/* ================START OF MOBILE section=========================== */
 @media only screen and (max-width: 700px) {
    /* ================START OF Concept cartoons section=========================== */
    /* Container needed to position the button. Adjust the width as needed */
     .concept-container {
         position: relative;
         width: 100%;
    }
    /* Make the image responsive */
     .concept-container img {
         width: 100%;
         height: auto;
    }
    /* Style the Ideas button and place it bottom-left */
     .concept-container .concept-buttonL {
         position: absolute;
         bottom: 0%;
         left: 1%;
         height: 10%;
         width: 49%;
         background-color: #555;
         color: white;
         font-size: 20px;
         padding: 6px 12px;
         border: none;
         cursor: pointer;
         border-radius: 5px;
    }
     .concept-container .concept-buttonL:hover {
         background-color: black;
    }
    /* Style the follow-up button and place it bottom-right */
     .concept-container .concept-buttonR {
         position: absolute;
         bottom: 0%;
         right: 1%;
         height: 10%;
         width: 48%;
         background-color: #555;
         color: white;
         font-size: 20px;
         padding: 6px 12px;
         border: none;
         cursor: pointer;
         border-radius: 5px;
    }
     .concept-container .concept-buttonR:hover {
         background-color: black;
    }
    /* Follow-up text in Top left of image */
     .concept-container .followup, .concept-container .ideas {
         position: absolute;
         font-family: "Comic Sans MS", cursive, sans-serif;
         top: 0%;
         left: 5%;
         height: 75%;
         max-height: 75%;
         width: 90%;
         background-color: #fefee4;
         color: black;
         font-size: 20px;
         padding: 6px 12px;
         border: none;
         cursor: pointer;
         border-radius: 5px;
         box-shadow: inset 0 0 0 3px #C70039;
    }
    /* ================END OF Concept cartoons section=========================== */
     #QUESTION {
         font-family: Tahoma,Verdana,sans-serif;
         font-size: 300%;
         font-weight: bold;
         padding: 1px;
         width:100%;
         overflow: auto;
         border: 5pt solid #fa9901;
    }
     .BOX {
         font-family: Tahoma,Verdana,sans-serif;
         font-size: 135%;
         padding: 1px;
         width:100%;
         overflow: auto;
    }
     .Easy {
         color: green 
    }
     .Medium {
         color: #ff9900 
    }
     .Hard {
         color: red 
    }
     .english {
         color: black 
    }
     .kazakh {
         color: #165A28 
    }
     .russian {
         color: #252DBB 
    }
     .assessed {
         color: red;
         font-weight: bold;
    }
     .paper2 {
         font-weight: bold;
         text-decoration: underline;
    }
     #home-button {
         background: url('Sprited/sprited.png');
         background-position: -532px -98px !important;
         background-repeat: no-repeat !important;
         display: inline;
         position: fixed;
         top: 0px;
         right: 0px;
         z-index: 500;
    }
     body {
         display: inline;
         top: 0;
    }
     a, .org-info-js_local-toc a {
         line-height: 1.8em;
         padding: 5px;
         font-size: 100%;
    }
     .org-info-js_local-toc {
         background: #f1f1f1;
         border-color: #c6c6c6;
         border-style: solid;
         border-width: 1px;
         font-size: 100%;
         text-align: left;
         color: #63912C;
         margin: 20px;
    }
     .org-info-js_local-toc ul {
         list-style-type: circle;
    }
     #table-of-contents {
         display: none;
    }
     #table-of-contents ul {
         list-style: none 
    }
     #mobile-nav-right {
         display: none;
    }
     #right-column {
         display: none;
    }
     #mobileheader {
         display: inline;
         position: static;
         text-align: left !important;
         font-size: 130%;
    }
     #mobileheaderclasses {
         display: inline;
         position: static;
         text-align: left !important;
         font-size: 100%;
    }
     #banner-top {
         background: url('Sprited/sprited.png');
         height: 60px;
         background-position: 0 -208px;
         margin-left: auto;
         margin-right: auto;
         background-repeat: no-repeat;
         left:0;
         width: 100% !important;
    }
     #banner-right-bottom {
         height: 60px !important;
         background-position: -140px -208px !important;
         background-repeat: repeat-x;
         left: 0%;
         width: 100% !important;
    }
     #banner-right-bottom:hover {
         background: url('Sprited/sprited.png');
         width: 110px;
         height: 110px;
         background-position: -307px -77px;
    }
     #banner-top-physics {
         left:0;
    }
     h1 {
         display: none !important 
    }
     h2 {
         color: #3f3d3d;
         border: 1pt solid #4B4A67;
         border-left: 30px solid #4B4A67;
         font-family: Arial,Helvetica,sans-serif;
         overflow: auto;
         font-size: 180%;
         font-weight: bold;
         padding: 12pt;
         text-align: center;
    }
     h3 {
         color: #3f3d3d;
         font-family: Arial,Helvetica,sans-serif;
         overflow: auto;
         border: 1pt solid #fa7921;
         border-left: 25px solid #fa7921;
         font-size: 130%;
         padding: 9pt;
    }
     h4 {
         color: #3f3d3d;
         font-family: Arial,Helvetica,sans-serif;
         overflow: auto;
         border: 1pt solid #35a7ff;
         border-left: 15px solid #35a7ff;
         font-size: 120%;
         padding: 6pt;
    }
     h5 {
         color: #3f3d3d;
         font-family: Arial,Helvetica,sans-serif;
         overflow: auto;
         border: 1pt solid #9bc53d;
         border-left: 10px solid #9bc53d;
         line-height: 45px;
         display: inline;
         font-size: 110%;
         padding: 6pt;
    }
     h6 {
         display: inline;
         overflow: auto;
         line-height: 45px;
         padding: 4pt;
         border: 1pt solid #e55934;
         border-left: 6px solid #e55934;
         color: #3f3d3d;
         font-size: 100%;
    }
     h7 {
         display: inline;
         overflow: auto;
         line-height: 45px;
         padding: 3pt;
         border: 1pt solid #fde74c;
         border-left: 3px solid #fde74c;
         color: #3f3d3d;
         font-size: 100%;
    }
     .rightcolh {
         font-family:Consolas, 'Lucida Console', 'DejaVu Sans Mono', monospace;
         font-weight:600;
         padding: 3pt;
    }
     img {
         border: none;
         width: 80%;
    }
     #override img {
         width: auto 
    }
     code {
         font-size: 100% 
    }
     td {
         padding: .1em .7em .1em .3em;
         border: 1px solid #b0b0b0;
    }
     tr:nth-child(even) {
        background-color: #E4E4E4
    }
     th {
        background-color: #4CAF50;
         color: white;
    }
     .author, .email, .creator {
         color: black;
         font-family: Courier, monospace;
         font-size: 90%;
         font-weight: bold;
         line-height: 0.9em;
         text-align: right;
    }
     a:hover {
         color: #a34d32 
    }
     a:visited {
         color: #98855b;
         text-decoration: none;
    }
     #table-of-contents h2, h2#sec-1, #firstheadingonpage {
         display: none 
    }
     #SmallText {
         font-size: 65%;
    }
     #LargeText {
         font-size: 130%;
    }
}
/* ================END OF MOBILE section=========================== */
/* ================END OF MOBILE section=========================== */
/* ================END OF MOBILE section=========================== */
/* ================END OF MOBILE section=========================== */
/* ================END OF MOBILE section=========================== */
/* ================START OF DESKTOP section=========================== */
/* ================START OF DESKTOP section=========================== */
/* ================START OF DESKTOP section=========================== */
/* ================START OF DESKTOP section=========================== */
/* ================START OF DESKTOP section=========================== */
/* ================START OF DESKTOP section=========================== */
 @media screen and (min-width: 768px) {
    /* For desktop: */
    /* ================START OF Concept cartoons section=========================== */
    /* Container needed to position the button. Adjust the width as needed */
     .concept-container {
         position: relative;
         width: 100%;
    }
    /* Make the image responsive */
     .concept-container img {
         width: 100%;
         height: auto;
    }
    /* Style the Ideas button and place it bottom-left */
     .concept-container .concept-buttonL {
         position: absolute;
         bottom: 0%;
         left: 1%;
         height: 10%;
         width: 49%;
         background-color: #555;
         color: white;
         font-size: 20px;
         padding: 6px 12px;
         border: none;
         cursor: pointer;
         border-radius: 5px;
    }
     .concept-container .concept-buttonL:hover {
         background-color: black;
    }
    /* Style the follow-up button and place it bottom-right */
     .concept-container .concept-buttonR {
         position: absolute;
         bottom: 0%;
         right: 1%;
         height: 10%;
         width: 48%;
         background-color: #555;
         color: white;
         font-size: 20px;
         padding: 6px 12px;
         border: none;
         cursor: pointer;
         border-radius: 5px;
    }
     .concept-container .concept-buttonR:hover {
         background-color: black;
    }
    /* Follow-up text in Top left of image */
     .concept-container .followup, .concept-container .ideas {
         position: absolute;
         font-family: "Comic Sans MS", cursive, sans-serif;
         top: 0%;
         left: 5%;
         height: 75%;
         max-height: 75%;
         width: 90%;
         background-color: #fefee4;
         color: black;
         font-size: 20px;
         padding: 6px 12px;
         border: none;
         cursor: pointer;
         border-radius: 5px;
         box-shadow: inset 0 0 0 3px #C70039;
    }
    /* ================END OF Concept cartoons section=========================== */
     #mobileheader {
         display: none !important;
    }
     #mobileheaderclasses {
         display: none !important;
    }
     #QUESTION {
         font-family: Tahoma,Verdana,sans-serif;
         font-size: 300%;
         font-weight: bold;
         padding: 1px;
         width:100%;
         overflow: auto;
         border: 5pt solid #fa9901;
    }
     .BOX {
         font-family: Tahoma,Verdana,sans-serif;
         font-size: 135%;
         padding: 1px;
         width:100%;
         overflow: auto;
    }
     .Easy {
         color: green 
    }
     .Medium {
         color: #ff9900 
    }
     .Hard {
         color: red 
    }
     .english {
         color: black 
    }
     .kazakh {
         color: #165A28 
    }
     .russian {
         color: #252DBB 
    }
     .assessed {
         color: red;
         font-weight: bold;
    }
     .paper2 {
         font-weight: bold;
         text-decoration: underline;
    }
     #home-button {
         display: none 
    }
     body {
         background: #F7F7F7;
         color: #000000;
         display: block;
         font-family: Tahoma,Verdana,sans-serif;
         font-size: 12pt;
         line-height: 1.2em;
         margin-left: 20%;
         margin-right: 19%;
         overflow: auto;
         text-align: left;
         top: 22%;
         width: 59%;
         z-index: -50;
    }
     .org-info-js_local-toc {
         background: #f1f1f1;
         border-color: #c6c6c6;
         border-style: solid;
         border-width: 1px;
         font-size: 100%;
         text-align: left;
         color: #63912C;
         margin: 20px;
    }
     .org-info-js_local-toc a {
         color: #63912C 
    }
     .org-info-js_local-toc ul {
         list-style-type: circle;
    }
     #table-of-contents {
         background: #f1f1f1;
         border-color: #e5e5e5;
         border-style: solid;
         display: block;
         font-size: 80%;
         max-height: 100%;
         min-height: 100%;
         overflow: auto;
         position: fixed;
         text-align: left;
         top: 0;
         z-index: 5;
         border-width: 0 2px 0 0;
         left: 0;
         width: 19%;
    }
     #table-of-contents ul {
         list-style: none;
         margin: 3px 0 3px 10px;
         padding: 0;
    }
     #mobile-nav-right {
         display: none 
    }
     #right-column {
         background: #f1f1f1;
         border-color: #e5e5e5;
         border-style: solid;
         display: block;
         font-size: 80%;
         max-height: 100%;
         min-height: 100%;
         overflow: auto;
         position: fixed;
         text-align: left;
         top: 0;
         z-index: 5;
         padding: 3px;
         border-width: 0 2px;
         left: 80%;
         width: 20%;
    }
     #banner-top {
         background: url('Sprited/sprited.png');
         height: 60px;
         background-position: 0 -208px;
         left: 25%;
         background-repeat: repeat-x;
         width: 100% !important;
    }
     #banner-right-bottom {
         background: url('Sprited/sprited.png');
         width: 99px;
         height: 86px;
         background-position: -422px -86px;
         background-repeat: no-repeat;
         margin-left: auto;
         margin-right: auto;
    }
     #banner-right-bottom:hover {
         background: url('explosionhead.png');
         width: 160px;
         height: 146px;
    }
     #banner-top-physics {
         background-image: url(bannerphysics.png);
         background-position: top left;
         background-repeat: repeat-x;
         background-size: 602px 60px;
         height: 60px;
         left: 25%;
         width: 100% !important;
    }
     h1 {
         display: none !important 
    }
     h2 {
         color: #3f3d3d;
         border: 1pt solid #4B4A67;
         border-left: 30px solid #4B4A67;
         font-family: Arial,Helvetica,sans-serif;
         overflow: auto;
         font-size: 180%;
         font-weight: bold;
         padding: 12pt;
         text-align: center;
    }
     h3 {
         color: #3f3d3d;
         font-family: Arial,Helvetica,sans-serif;
         overflow: auto;
         border: 1pt solid #fa7921;
         border-left: 25px solid #fa7921;
         font-size: 130%;
         padding: 9pt;
    }
     h4 {
         color: #3f3d3d;
         font-family: Arial,Helvetica,sans-serif;
         overflow: auto;
         border: 1pt solid #35a7ff;
         border-left: 15px solid #35a7ff;
         font-size: 120%;
         padding: 6pt;
    }
     h5 {
         color: #3f3d3d;
         font-family: Arial,Helvetica,sans-serif;
         overflow: auto;
         border: 1pt solid #9bc53d;
         border-left: 10px solid #9bc53d;
         line-height: 45px;
         display: inline;
         font-size: 110%;
         padding: 6pt;
    }
     h6 {
         display: inline;
         overflow: auto;
         line-height: 45px;
         padding: 4pt;
         border: 1pt solid #e55934;
         border-left: 6px solid #e55934;
         color: #3f3d3d;
         font-size: 100%;
    }
     h7 {
         display: inline;
         overflow: auto;
         line-height: 45px;
         padding: 3pt;
         border: 1pt solid #fde74c;
         border-left: 3px solid #fde74c;
         color: #3f3d3d;
         font-size: 100%;
    }
     .rightcolh {
         font-family:Consolas, 'Lucida Console', 'DejaVu Sans Mono', monospace;
         font-weight:600;
         padding: 3pt;
    }
     img {
         border: none;
         width: 80%;
    }
     #override img {
         width: auto 
    }
     code {
         font-size: 100% 
    }
     td {
         padding: .1em .7em .1em .3em;
         border: 1px solid #b0b0b0;
    }
     tr:nth-child(even) {
        background-color: #E4E4E4
    }
     th {
        background-color: #4CAF50;
         color: white;
    }
     .author, .email, .creator {
         color: black;
         font-family: Courier, monospace;
         font-size: 90%;
         font-weight: bold;
         line-height: 0.9em;
         text-align: right;
    }
     a {
         color: #537d7b;
         text-decoration: underline;
    }
     a:hover {
         color: #a34d32 
    }
     a:visited {
         color: #98855b;
         text-decoration: none;
    }
     #table-of-contents h2, h2#sec-1, #firstheadingonpage {
         display: none 
    }
     #SmallText {
         font-size: 65%;
    }
     #LargeText {
         font-size: 130%;
    }
}
/* ================END OF DESKTOP section=========================== */
 
