#header{
	display:none;
background-color: white;
height: 100px;
width: 99vw;
border-bottom: 5px solid orangered;
position: sticky;
top: 0px;
z-index:11 ;
}
footer{
position: relative;

}

body{
  margin: 0;
height: 100vh;
width: 100%;
overflow-x: hidden;
}
.navigation-bar{
width: 100%;
height: 50px;
position: relative;
color: #337AB7;
font-size: 25px;
top: 5px;
font-family: "Raleway",sans-serif;
}
.navigation-bar a{
color: #337AB7;
text-decoration: none;
}
.navigation-bar a:hover{
text-decoration: underline;
}
.side-nav{
  position: relative;
  height: 100%;
  min-height: 350px;
  width: 15vw;
  min-width: 100px;
  top: 20px;
  float: left;
}
.nav-element{
height: 50px;
}
.nav-element a{
margin-left: 20px;
font-weight: 600;
text-decoration: none;
color: #3e6389;
font-size: 20px;
font-family: "Open sans",sans-serif;
}
.nav-element a:hover{
text-decoration: underline;
color: dark-blue;
}
.cp{
  color: #ff6600;
}

.heading{
padding: 10px 20px;
text-align: center;
height: 50px;
}

.heading h1{
  color: #2C99CE;
  font-family: "Raleway",sans-serif;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
margin: 5px 0px;}
.main-section{
  position: relative;
  height: auto;
  width: 83vw;
  display: inline-block;
  border-left: 1px solid rgba(0,0,0,0.1);
  margin: 5px 0;
}
.csection{
  position: relative;
height: auto;
min-height: 450px;
width: 100%;
}
.des{
width: 95%;
height: 100%;
min-height: 450px;
font-family: "Raleway",sans-serif;
font-weight: 300;
left: 2.5%;
position: relative;
text-align: justify;}

.des p{
font-size:20px;}
.des ol{
font-size: 20px;
}
footer{
  height: 150px;
  width: 100%;
background-color: rgba(0, 0, 0, 0.9);
position: relative;
font-family: "Raleway",sans-serif;}

.foot1{
float: left;
width: 32%;
position: relative;
left: 1.5%;
}
.fheading h4{
margin: 0;}
.fheading{
height: 20px;
width: 100%;
padding: 5px 0;
color: whitesmoke;
border-width: 0.15rem;
border-style: solid;
border-image: linear-gradient(to right, #3ec1d5 20%, #555 0%) 0% 0% 100% 0%; ;
}
.fdes a{
  color: whitesmoke;
  text-decoration: none;
margin: 5px 0;
display: block;
}
.fdes p{
  color: whitesmoke;
  text-decoration: none;
margin: 5px 0;
display: block;
}


.fdes a:hover{
text-decoration: underline;
color: gray;
transition-duration: 0.25s;
}
.foot2{
display: inline-block;
width: 32%;
position: relative;
left: 3%;
}
.foot3{
float: right;
width: 30%;
right: 1.5%;
position: relative;

}
.sm{
border-radius: 50%;
height: 25px;
width: 25px;
margin: 5px;
}
.desm{
display: flex;
}
.endfoot{
background-color: rgba(255,255, 255, 0.1);
width: 100%;
height: 25px;
text-align: center;
position: relative;
top: 15px;
color: whitesmoke;
}
.endfoot a{
  top: 5px;
color: dodgerblue;
text-decoration: none;
}
.endfoot a:hover{
text-decoration: underline;
opacity: 0.8;
}
.menu-btn .bar{
  width: 25px;
  height: 0.5px;
  background-color: black;
  margin: 8px 0;
  position: relative;
  left: 12.5px;
}

.menu-btn {
position: relative;
height: 100%;
width: 70px;
float: left;
outline: none;
border: none;
}

.menu-btn:hover{
cursor: pointer;
}

header img{
  display: inline-block;
width: 140px;
height: 90px;
position: relative;
left: 40px;
top: 5px;
}
.right-head{
height: 50px;
top: 40px;
float: right;
position: relative;
right: 10px;
}
.right-head a{
text-decoration: none;
color: #2C98CD;
margin: 20px;
padding: 10px;
font-family: "Raleway",sans-serif;
}
.right-head a:hover{
background-color: #77bb41;
border-radius: 5px;
color: white;
text-decoration: underline;
transition-duration: 0.1s;
}
@media screen and (max-width: 850px)
{

.side-nav{
position: absolute;
background-color: white;
opacity: 1;
z-index: 10;
width: 60%;
left: 20%;
border-radius: 10px;
box-shadow: 5px 5px rgba(0, 0, 0, 0.2);
padding-top:20px ;
display: none;
overflow-y: scroll;
}
.main-section{
width:100% ;}
.foot1{
float: left;
width: 45%;
position: relative;
}
.foot2{
  display: inline-block;
  left: 6%;
width: 45%;
position: relative;
}
.foot3{
float: left;
width: 95%;
margin: 0 2.5%;
position: relative;

}
footer{
  height: 250px;
  width: 100%;
background-color: rgba(0, 0, 0, 0.9);
position: relative;
font-family: "Raleway",sans-serif;}
.endfoot{
display: block;
position: absolute;
top: 225px;
}
.endfoot a{
color: dodgerblue;
text-decoration: none;
}

@media screen and (max-height: 700px)
{
.side-nav{
height: 400px;
}
}

@media screen and (min-height: 700px)
{
.side-nav{
height: 500px;}
}
}

@media screen and (min-width: 500px)
{

.math{
font-size: 15px;
}}

@media screen and (max-width: 500px)
{
.math{
font-size: 10px;
}
}
@media screen and (max-width: 400px)
{
.math{
font-size: 9px;
}}

@media screen and (min-width: 700px)
{
  .right-head {
display: block;}
}
@media screen and (max-width: 700px)
{
.right-head {
display: none;}

}
#feedback-btn{
color: dodgerblue;
text-decoration: none;
padding: 10px;
border: 0.5px solid dodgerblue;
border-radius: 5px;}

#feedback-btn:focus{
box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);
}
.pretest .MathJax_Display{
margin: 5px 0px;
display: inline!important;
}

.test{
margin: 5px 0px;
font-size: 17px!important;
display: inline-block;
}
.test:hover{
cursor: pointer;}
#input_button{
  background-color: dodgerblue;
  position: relative;
  display: block;
  top: 2.5vh;
  font-size: 18px;
border-radius: 10px;
color: whitesmoke;
height:30px ;
width: 100px;
left: 5px;
border: none;
}
#input_button:hover{
cursor: pointer;}
.side-exp{
  position: relative;
  height: 100%;
  min-height: 500px;
  width: 15vw;
  min-width: 100px;
  float: right;
  color:#000;
  border-left: 1px solid rgba(0,0,0,0.1);
margin: 5px 0;
padding: 10px;
}
.active{
	color: #f00 !important;
}
#rank{

   position: absolute;
left: 30%;
top: 58%;
color: #c4c3c8;
width: 79px;
height: 50px;
cursor: pointer;

}
#rank0{

   position: absolute;
left: 30%;
top: 58%;
color: #c4c3c8;
width: 79px;
height: 50px;
cursor: pointer;

}
#rank1 {
  position: absolute;
left: 30%;
top: 58%;
color: #c4c3c8;
width: 79px;
height: 50px;
cursor: pointer;
}
#rank11{
 position: absolute;
left: 30%;
top: 58%;
color: #c4c3c8;
width: 79px;
height: 50px;
cursor: pointer;	
}
#off {
  left: 65%;
  position: absolute;
  top: 68%;
  cursor: pointer;
  width: 66px;
  height: 25px;
}
.blink{text-decoration: none;
  font-size: 20px;
  color: #3e44a2;
  cursor: text !important;
font-weight: bold;
}
#rightsidebar img{width:70px;}
#rightsidebar a{width: 100%;display: inline-block;padding: 10px 40px;}
#des{float:left;}
#rightsidebar{float:right;width:20%;min-height:460px;border-left:1px solid rgba(0, 0, 0, 0.1);}
#rightsidebarn img{width:70px;}
#rightsidebarn a{width: 100%;display: inline-block;padding: 10px 40px;}
#rightsidebarn{float:right;width:20%;min-height:460px;border-left:1px solid rgba(0, 0, 0, 0.1);}

#skip{width:50%!important;padding: 4px !important;text-decoration: none;text-decoration: none;font-size: 17px;font-weight: bold;}
#resetn{width:20%!important;padding: 4px !important;text-decoration: none;font-size: 17px;font-weight: bold;}
.max{width:100%!important;padding: 4px !important;text-decoration: none;text-decoration: none;font-size: 17px;font-weight: bold;}
a[disabled], a[disabled]:hover {
   pointer-events: none;
   color: #e1e1e1;
}
p.inlink {
  display: inline-block;

  padding:0;float: left;
}
p.inlink a{
  padding:10px!important;
}
p.inlink a img{
  height:100px!important;width: 10px!important;
}
.inlink{display:none!important;}
.active{display:block!important;}
#number1,#number2,#number3 {
  left: 12%;
  position: absolute;
  top: 70%;
  cursor: pointer;
  width: 70px;
  height: 30px;
  color: #000;
font-size: 18px;
font-weight: bold;
}