@font-face {font-family: "Lato-Black";src: url(../fonts/Lato-Black.ttf);font-weight: 400;}
@font-face {font-family: "Lato-BlackItalic";src: url(../fonts/Lato-BlackItalic.ttf);font-weight: 400;}
@font-face {font-family: "Lato-Bold";src: url(../fonts/Lato-Bold.ttf);font-weight: 400;}
@font-face {font-family: "Lato-BoldItalic";src: url(../fonts/Lato-BoldItalic.ttf);font-weight: 400;}
@font-face {font-family: "Lato-Italic";src: url(../fonts/Lato-Italic.ttf);font-weight: 400;}
@font-face {font-family: "Lato-Light";src: url(../fonts/Lato-Light.ttf);font-weight: 400;}
@font-face {font-family: "Lato-LightItalic";src: url(../fonts/Lato-LightItalic.ttf);font-weight: 400;}
@font-face {font-family: "Lato-Regular";src: url(../fonts/Lato-Regular.ttf);font-weight: 400;}
@font-face {font-family: "Lato-Thin";src: url(../fonts/Lato-Thin.ttf);font-weight: 400;}
@font-face {font-family: "Lato-ThinItalic";src: url(../fonts/Lato-ThinItalic.ttf);font-weight: 400;}

@font-face {font-family: "Merriweather-Black"; src: url(../fonts/Merriweather-Black.ttf); font-weight: 400;}
@font-face {font-family: "Merriweather-Light"; src: url(../fonts/Merriweather-Light.ttf); font-weight: 400;}
@font-face {font-family: "Merriweather-BlackItalic"; src: url(../fonts/Merriweather-BlackItalic.ttf); font-weight: 400;}
@font-face {font-family: "Merriweather-Bold"; src: url(../fonts/Merriweather-Bold.ttf); font-weight: 400;}
@font-face {font-family: "Merriweather-BoldItalic"; src: url(../fonts/Merriweather-BoldItalic.ttf); font-weight: 400;}
@font-face {font-family: "Merriweather-Italic"; src: url(../fonts/Merriweather-Italic.ttf); font-weight: 400;}
@font-face {font-family: "Merriweather-LightItalic"; src: url(../fonts/Merriweather-LightItalic.ttf); font-weight: 400;}
@font-face {font-family: "Merriweather-LightItalic"; src: url(../fonts/Merriweather-LightItalic.ttf); font-weight: 400;}
@font-face {font-family: "Merriweather-Regular"; src: url(../fonts/Merriweather-Regular.ttf); font-weight: 400;}
@font-face {font-family: "Arvo-Regular"; src: url(../fonts/Arvo-Regular.ttf); font-weight: 400;}

#container{
 max-width: 1240px;
 margin-left: auto; margin-right: auto;
}
.word-count-mobile{color: red} .word-count-desktop{color: blue;}
div.main-content-wrapper{
 max-width: 1240px;
 font-size: calc(16px + (21 - 16) * ((100vw - 320px) / (991 - 320)));
 /* font-size: 16px; */
}
@media (max-width:991px){
 div.main-content-wrapper{
  /* font-size: 23px; */
 }
}
.lesson-container{
 padding:0.01em 16px; 
 font-family: Lato-Regular, Tahoma, Verdana, sans-serif;
}
@media (min-width:601px){
 .lesson-container{
  width: 90%;
  margin-left: auto;
  margin-right: auto;
 }
}
@media (min-width:992px){
 .lesson-container{
  width: 70%;
  margin-left: auto;
  margin-right: auto;
 }
}
#subject-topic{
 text-align: center;
 color:#000; 
 background-color:#ffebcc;
 padding-top:32px;
 padding-bottom: 32px;
 margin-top:16px;margin-bottom:16px;
 border-right:6px solid orange;border-left:6px solid orange;

 
}
#date-class{
 font-size: .8em;
 background-color: aqua;
}
#subject-topic h1{
 font-family: Arvo-Regular;
}
#objective h2, #glossary h2, #summary h2, #revision-exercise h2{ 
 text-align: center;
 font-family: Merriweather-Black, Georgia;
}
#note-block h1, #note-block h2, #note-block h2{
 font-family: Merriweather-Black, Arial Black, Sans-Serif;
 /*Segoe UI, Helvetica, Gill Sans, Arial Black;*/
 font-weight: bold;
}

#objective, #glossary, #summary, #revision-exercise{
 color:#fff;
 background-color:#e68a00;
 padding:8px 16px;
 margin:16px;
 border-radius: 8px;
 box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19)
}
@media (min-width: 601px){
 #objective-glossary, #summary-revisionexercise{
  content:"";
  display:table;
  clear:both;
 }
 #objective, #glossary, #summary, #revision-exercise{
  width: 42%;
  float: left;
  font-size: .8em;
 }
}

.main-note-section h2{
 border-left: 0.1em solid #00FF28;
}
.lesson-container h1{
  font-size: 2.2em;
 }
.lesson-container h2{
  font-size: 1.8em;
}
.lesson-container h3{
 font-size: 1.5em;
 margin-bottom: 0;
 font-family: Merriweather-BoldItalic, Garamond, serif;
} 
.lesson-container h4{
 font-size: 1.2em;
 margin-bottom: 0;
 font-family: Merriweather-BoldItalic, Garamond, serif;
}
.lesson-container h5{
 font-size: 1em;
 margin-bottom: 0;
 font-family: Merriweather-BoldItalic, Garamond, serif;
}
.descr-list h3, .descr-list h4{
 display: list-item;
 list-style: inside;
}

/*************************************/
/*image box*/
.image-box{
 font-family: OpenSans-Italic, 'Poppins-Bold';
 width: 100%;
 max-width: 600px;
 margin-top: 16px;
 margin-bottom: 16px;
 padding: 0.01em 16px;
}
.image-box img{
 margin-bottom: 0;
 width: 100%;
 margin-left: auto; margin-right: auto;
}
.image-box figcaption{
 /* margin-top: 0; */
 padding: 4px;
}
@media screen and (min-width: 768px){
 .image-box{
  width: 50%;
   margin-left: auto; margin-right: auto;
 }
}
/***************************/

.main-note-section{
 margin-bottom: 3em;
}
.next-prev a{
 display: block;
 text-align: center;
 text-decoration: none;
 background-color:#fff;
 color:#e68a00;
 width: 7em;
 padding:12px 24px;
 border-radius: 4px;
 box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19)
}
.next-prev a:hover{
 color:#fff;
 background-color: #e68a00;
}
.prev-btn{
 margin-left:0;
}
.next-btn{
  margin-left: auto;
}

/* .w3-row:before,.w3-row-padding:after,.w3-row-padding:before,
.w3-cell-row:before,.w3-cell-row:after,.w3-clear:after,.w3-clear:before,.w3-bar:before,.w3-bar:after{content:"";display:table;clear:both} */
/*JS toggle style*/

.main-note-section.js-default-style p, .main-note-section.js-default-style section, .main-note-section.js-default-style img, .main-note-section.js-default-style table, .main-note-section.js-default-style ul, .main-note-section.js-default-style ol, .main-note-section.js-default-style dl, .main-note-section.js-default-style h3, .main-note-section.js-default-style h4, .main-note-section.js-default-style h5{
 position: absolute;
 left: -999em;
}
.main-note-section.collapsed p, .main-note-section.collapsed section, .main-note-section.collapsed img, .main-note-section.collapsed table, .main-note-section.collapsed ul, .main-note-section.collapsed ol, .main-note-section.collapsed dl, .main-note-section.collapsed h3, .main-note-section.js-default-style h4, .main-note-section.collapsed h5{
 position: relative;
 left: 0;
}