@font-face {
font-family: 'Montserrat-SemiBoldItalic';
src: 	url("/webfonts/Montserrat-SemiBoldItalic.ttf") format("truetype");		
}

@font-face {
font-family: 'OpenSans-Bold';
src: 	url("/fonts/OpenSans-Bold.ttf") format("truetype");		
}

@font-face {
font-family: 'OpenSans-Regular';
src: 	url("/fonts/OpenSans-Regular.ttf") format("truetype");	
font-display: swap;
}


@font-face {
font-family: 'OpenSans-Italic';
src: 	url("/fonts/OpenSans-Regular.ttf") format("truetype");		
}


:root{
--main-font: 'OpenSans-Regular';
--main-font-bold:'OpenSans-Bold';
--main-font-italic:'OpenSans-Italic';
--theory-header-color:#1f7dbb;
}


/*p,
a,li {
font-family: var(--main-font);
font-size:0.9em;
line-height: 1.25em;
}*/

p,li {
font-family: var(--main-font);
font-size:1rem;
line-height: 2rem;
}

#j277sidenav li {
line-height: 1.1rem;
}

@media screen and (min-width:1200px) {
#j277sidenav li {
line-height: 1.7rem;
}
}


#j277sidenav li a{
font-family: var(--main-font);
}

.container li {
font-size: 1em;
}


h1,
h2,
h3 {
font-family: var(--main-font-bold);
color: var(--theory-header-color);
}

#middle {
width:100%;
border-top: 1px solid black;
}

.topic-navigation-left h2 {
font-family: 'Montserrat-SemiBoldItalic'; 
font-size:1.6em;
}

.navcontainer {
  padding-left: 20px;
  display: grid;
  grid-gap: 1px;;
/*  grid-template-columns: repeat(auto-fit,minmax(394px,1fr));*/
  grid-template-columns: minmax(364px,30%) 1fr;
  background: white;
  border-bottom: thin solid #7F7E7E;
  border-top: thin solid #7F7E7E;
  justify-items:center;
}

@media (min-width:370px) {
.navcontainer {
  grid-template-columns: 1fr;
  justify-items: center;
}

}
.topictitle {
  height:50px;
}

.pagination {
    padding-bottom: 0px;

}



.navpage ul { 
list-style: none; 
display: inline-block; 
cursor: pointer;

}

.pagination_items {
    display: inline-block;
    list-style: none;
    padding:0px;
    background: grey;
}

.pagination_items li{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width:45px;
  cursor: pointer;
  text-align: center;
  align-items: center;
  background-color: #4d81a3;
  border-left: thin grey solid;
  margin-left: -4px;
}

.pagination_items li a {
  display: block;
  padding: 10px 18px;
  color: white;
  font-size: 20px;
  text-decoration: none;
}

.pagination_items li a:hover{
background: #F9060A;
}

.current  {
  background-color: black;
  padding-left:10px;
}


.topic-navigation-left{
  justify-self: start;
}

.topic-navigation-center{
  margin-left: 0px;
}

.topic-navigation-right{
  justify-self: end;
}

@media (max-width:1112px){
.topic-navigation-center{
  margin-left: 0px;
}
}

.mb1 {
 max-width: 680px;
 margin-left: auto;
 margin-right: auto;
 margin-top:21px;
 padding-bottom:20px;
 padding-left:5px;
 border: 1px solid grey;
 background: white;
}

.thelogo {
  padding-top:10px;
  margin-bottom: -10px;
}


.bread {
  display: flex;
  flex-direction: row;
  list-style: none;
  border-bottom: 1px solid black;
  background: #525252;
  justify-content: center;
  margin-bottom: 0px;

}

.bread li {
margin-right: 12px;
}

.bread li+li:before {
  padding: 8px;
  color: white;
  content: "/\00a0";
}

.bread li a {
  color: white;
  text-decoration: none;
}

.bread li a:hover{
text-decoration: underline;
}

.ok-to-view p {
  font-size: 0.8em;
}

.ok-to-view h2 {
font-family: 'Montserrat-SemiBoldItalic'; 
font-size:1.6em;
}

.video-heading {
  padding-left: 10px;
  margin-bottom:20px;
}

table.tlarge_b{
width:auto;
}


@media (min-width: 375px) {

      .mb1{
        width: 100%;
      }

      #middle {
        width:100%;
      }


      .picright {
      float: none;
      }
      
      .sm-font{
        font-size: 0.7em;
      }

}


@media (max-width: 374px) {


      .mb1{
        width: 100%;
      }

      #middle {
        width:100%;
      }

      main h1 {
        font-size: 1.1em;
      }

      .picright {
      float: none;
      }
      
      .sm-font{
        font-size: 0.7em;
      }
      
      main {
      
        padding-left:0;
        padding-top:0;
      }
      
      .navcontainer {
        grid-template-columns: 1fr;
      }

}


.topic {
text-align: center;
font-size: 1.5rem;
margin-top:5px;
}

.sf-menu > li > ul > li{line-height:1rem;}