@charset "utf-8";

/* CSS Document */

* {margin:0; padding:0;font-family: 'Roboto Condensed', sans-serif;}
html {height:100%;}
body {margin:0;padding:0;height:100%;text-align:center;color:#333;font-size: 62.5%;}
div.clear {clear:both;}

.lcolun{float:left;margin-left:6%;}
.rcolun{float:right;margin-right:17%;}

#wrap {width:100%;height:100%;background-color:#fff;}

#contem{position:relative;margin:0 auto;width:88.95478%;height:100%;font-size:2em;}

#sair{float:right;margin-top:2%;cursor:pointer;display:none;}

#intro{position:relative;width:100%;height:45%;}

#titulo{position:relative;width:74.068%;height:21%;margin:0 auto;top:5%;}

.inicio{position:relative;width:25%;height:30%;margin:0 auto;top:60%;cursor:pointer;}

#headInterno{position:relative;width:93%;height:21%;top:5%;display:none;}
#titulo2{float:left;width:80%;top:0%;}
.pergunta{float:left;width:15%;top:0%;cursor:pointer;}

.pagina{position:relative;width:100%;height:33%;top:15%;display:none;}

.atividade{position:relative;width:100%;height:100%;}
.opcoes{position:relative;width:100%;height:100%;}
.containerResposta{float:left;width:25%;height:100%;}
.resposta{position:relative;width:73%;height:auto;cursor:pointer;}
  
#contador{position:relative;width:28%;height:7%;margin:0 auto;top:27%;}
.contemEstrela{float:left;width:33%;}
.estrela{float:left;display:none;}

#parabens{position:absolute;width:100%;z-index:1000;display:none;}
#ok{margin-top:10%;}
.tente{position:absolute;width:100%;height:88.8%;z-index:1000;display:none;}
#imgTente{margin-top:10%;}
#parabens2{position:absolute;width:100%;height:88.8%;top:13%;z-index:1000;display:none;}
#ok2{margin-top:6%;}
#avancar{cursor:pointer;}

img{max-width:100%;height:auto;}
	
 @media screen and (max-width: 768px) {	
   #titulo{width:100%;}
   .inicio{width:45%;}
   .pagina{height:28%;top:4%;}
   .containerResposta{width:50%;}
   .resposta{width:65%;}
   #contador{width:65%;top:8%;}   
	}
	
	 @media screen and (max-width: 414px) {
		.inicio{width:55%;}
		#sair{width:14%;}
		#headInterno{clear:both;width:100%;top:0%;}
		#titulo2{width:98%;}
		.pergunta{clear:both;width:25%;margin-top:5%;margin-left:38%;}
		#contador{top:2%;}
		#ok{width:70%;margin-top:25%;}
		#imgTente{width:70%;margin-top:25%;}
		#ok2{width:70%;}
	 }
	
@media screen and (max-width: 1024px) and (orientation: landscape) {
	.inicio{width:30%;}
	#contador{width:40%;}
	#ok{margin-top:15%;}
	#imgTente{margin-top:15%;}
}
	
@media screen and (max-width: 736px) and (orientation: landscape) {		
	#titulo{width:80%;}
	.inicio{width:37%;}
	.containerResposta{width:25%;}
	.pergunta{width:10%;}
	.pagina{top:14%;}
	#contador{top:28%;}
	#parabens2{top:13%;}
	#ok{width:35%;margin-top:9%;}
	#ok2{width:35%;margin-top:0%;}
	#imgTente{width:35%;margin-top:9%;}
	#avancar{width:13%;}
}