body,html{margin:0px;padding:0px;background-image:url(sos.png);font-family:Verdana, Geneva, sans-serif;

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;

}

.cc1{background-color:#fee09d}

#audControl{float:right;width:80px;height:80px;position:absolute;right:0px;top:7px;}
#audControl img{width:50px;}

img {
    pointer-events: none;
}


#s1 a:hover{text-decoration: none;color:#333;}
#s1 a:active{text-decoration: none;color:#333;}
#s1 a:visited{text-decoration: none;color:#333;}
#s1 a:link{text-decoration: none;color:#333;}

#s2 a:hover{text-decoration: none;color:#333;}
#s2 a:active{text-decoration: none;color:#333;}
#s2 a:visited{text-decoration: none;color:#333;}
#s2 a:link{text-decoration: none;color:#333;}

#s3 a:hover{text-decoration: none;color:#333;}
#s3 a:active{text-decoration: none;color:#333;}
#s3 a:visited{text-decoration: none;color:#333;}
#s3 a:link{text-decoration: none;color:#333;}

#s4 a:hover{text-decoration: none;color:#333;}
#s4 a:active{text-decoration: none;color:#333;}
#s4 a:visited{text-decoration: none;color:#333;}
#s4 a:link{text-decoration: none;color:#333;}

#s5 a:hover{text-decoration: none;color:#333;}
#s5 a:active{text-decoration: none;color:#333;}
#s5 a:visited{text-decoration: none;color:#333;}
#s5 a:link{text-decoration: none;color:#333;}

.gop3 a:hover{text-decoration: none;color:#333;}
.gop3 a:active{text-decoration: none;color:#333;}
.gop3 a:visited{text-decoration: none;color:#333;}
.gop3 a:link{text-decoration: none;color:#333;}

#promo{margin-top:3px;margin-bottom:3px;text-align:center;}
#order{float:right;cursor:pointer;}
#order:hover{opacity:.5;width:36px;}

#dots{width:300px;top:0px; padding-top:5px;padding-bottom:5px;margin:auto; }
#dotHolder{margin:auto;width:140px; }
.dot1{width:6px;height:6px;border-radius:14px;background-color:white;margin-left:2px;margin-right:2px;float:left;}
.dot2{width:6px;height:6px;border-radius:14px;background-color:white;margin-left:2px;margin-right:2px;float:left;opacity:.5;}
.dot3{width:6px;height:6px;border-radius:14px;background-color:#fabe58;margin-left:2px;margin-right:2px;float:left; }

#t1{font-size:30px;}
#t2{font-size:20px;width:320px;margin:auto;}
#t3{font-size:15px;color:#2574a9;}
#t5{width:100%;text-align:center;}

#contentArea{width:800px;background-color:#fff;padding:10px;margin:auto;}
.lessonTitle{padding:10px;border:1px solid grey;cursor:pointer;color:black!important;}
.lessonTitle:hover{background-color:#efefef;}

#contentArea a:hover{text-decoration: none;color:#333;}
#contentArea a:active{text-decoration: none;color:#333;}
#contentArea a:visited{text-decoration: none;color:#333;}
#contentArea a:link{text-decoration: none;color:#333;}

#butangC2 a:hover{text-decoration: none;color:#333;}
#butangC2 a:active{text-decoration: none;color:#333;}
#butangC2 a:visited{text-decoration: none;color:#333;}
#butangC2 a:link{text-decoration: none;color:#333;}



#navArea{width:506px;margin:auto;padding-top:3px;background-color:white;height:60px;}
#butangC1{width:300px;margin:auto;margin-top:15px;}
#butangC2{width:33%;float:left;}
#butangC3{width:33%;float:left;}

#butang1c{margin:auto;padding:5px;width:250px;border-radius:3px;cursor:pointer;
	text-align:center;background-color:#f15a22;color:#ececec;}
#butang1c:hover{opacity:.7;}

#butang1{margin:auto;padding:5px;width:90px;border-radius:3px;cursor:pointer;
	text-align:center;background-color:#f15a22;color:#ececec;}
#butang1:hover{opacity:.7;}
#butang2{margin:auto;padding:5px;width:90px;border-radius:3px;cursor:pointer;
	text-align:center;background-color:#f15a22;color:#ececec;}
#butang2:hover{opacity:.7;}
#butang3{margin:auto;padding:5px;width:90px;border-radius:3px;cursor:pointer;
	text-align:center;background-color:#f15a22;color:#ececec;}
#butang3:hover{opacity:.7;}


#butang1a{margin-left:15px;float:left;padding:5px;width:90px;border-radius:3px;cursor:pointer;
	text-align:center;background-color:#f15a22;color:#ececec;opacity:.1;}
#butang1a:hover{background-color:#fdcb6e;}
#butang2a{float:left;margin-left:15px;padding:5px;width:90px;border-radius:3px;cursor:pointer;
	text-align:center;background-color:#f15a22;color:#ececec;opacity:.1;;}
#butang2a:hover{background-color:#fdcb6e;}


#myQQ{height:0px;width:100%;text-align:center;padding-left:10%;padding-right:10%;font-size:30px;
padding-top:20px;position:absolute;top:0px;margin:auto;box-sizing:border-box;}


.desel{opacity:.2;cursor:none;}
.desel:hover{opacity:.2!important;cursor:auto!important;}

.spacer5{width:100%;height:5px;}
.spacer10{width:100%;height:15px;}
#spacerQ{width:100%;height:40px;}

#area1{width:846px;padding:8px;background-color:#6c7a89;margin:auto;text-align:center;color:#eff;font-size:12px;position:relative;}
.intro{margin-bottom:0px;}



#area2outer{width:860px;background-color:white;margin:auto;border-bottom:1px solid #6c7a89;border-right:1px solid #6c7a89;border-left:1px solid #6c7a89;position:relative;} 

#area2{position:relative;width:400px;height:400px;margin:auto;overflow-y:hidden;}
#area2:before{
	content: "";
	display: block;
	padding-top: 100%; 	/* initial ratio of 1:1*/
}



.selectedAnswerx{background-color:#bfbfbf;}
.selectedAnswerx:hover{background-color:#bfbfbf!important;}


.option{margin:auto;width:90%; padding:10px;margin-bottom:8px;cursor:pointer; border-radius:8px;background-color:#ececec;font-size:20px;width:300px;}

.options{font-size:18px;}

.option:hover{background-color:#2574A9;color:#efefef;}

#feedback1{float:right;position:relative;}
#feedback1 img{width:30px;position:absolute;right:0px;top:-3px;}









#area2inner{position:absolute;width:400px;height:400px;top: 0;left: 0;bottom: 0;right: 0;}
#area2inner img{width:400px;height:400px;}

#qArea{width:400px;height:400px;top: 0;left: 0;right: 0;text-align:center;font-size:23px;position:absolute;}


#fb1{margin:auto;padding:2px;text-align:center;color:#95a5a6;font-size:20px;}

 #fb2{margin:auto;padding:2px;text-align:center;color:#ececec;background-color:#d91e18;width:140px;border-radius:3px;}

@media screen and (max-width:880px){


#area1{width:96%;margin:auto;padding-right:0px;padding-left:0px;border-right:1px solid #6c7a89;border-left:1px solid #6c7a89;}
#area2outer{width:96%;margin:auto;background-color:white;margin:auto;} 

}


@media screen and (max-width:820px){
#contentArea{width:90%;background-color:#fff;padding:10px;margin:auto;}
}


@media screen and (max-width:750px){
  
#myQQ{padding-left:5%;padding-right:5%;font-size:27px;padding-top:15px;}
}



@media screen and (max-width:506px){
#navArea{width:100%;} 
#myQQ{padding-left:5%;padding-right:5%;font-size:25px;padding-top:15px;}
}


@media screen and (max-width:450px){

#audControl{float:right;width:80px;height:80px;position:absolute;right:-13px;top:9px;}
#audControl img{width:40px;}
 #t2{font-size:17px;}
#navArea{width:100%;} 
#area2{width:100%;height:100%;}
 
#area2inner{width:100%;height:100%;}
#area2inner img{width:100%;height:100%;}

#qArea{width:100%;}

 
#fb1{font-size:20px;}
 #fb2{font-size:20px;}
}

@media screen and (max-width:410px){

.option{padding:5px;width:270px;}
#myQQ{font-size:20px;}
}
@media screen and (max-width:349px){
 #audControl{display:none;}
}


@media screen and (max-width:340px){
#spacerQ{width:100%;height:20px;}
}