@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;}

#wrap {width:100%;height:100%;background-color:#fff;background-image:url("../images/fundo_inicial.png");}

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

#sair{position:absolute;width:7%;top:3%;right:2%;margin:auto;z-index:5000;cursor:pointer;display:none;}

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

#titulo{position:relative;width:74%;height:14%;margin:0 auto;top:1%;}
#imgTitulo2{display:none;}

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

.pagina{position:relative;width:100%;height:90%;display:none;}
.atividade{position:relative;width:100%;height:85%;margin:0 auto;}
.pergunta{position:relative;width:30%;height:62%;margin:0 auto;}
.opcoes{position:relative;width:100%;height:46%;margin:0 auto;}
.containerResposta{position:relative;float:left;width:33.33%;height:100%;}
.resposta{position:relative;width:80%;height:100%;margin:0 auto;cursor:pointer;}
.navegacao{position:absolute;width:3%;height:26%;top:0;bottom:0;right:3%;margin:auto;z-index:5000;cursor:pointer;/* background-color:rgba(255,255,255,0.6); */display:none;}

.ajuda{position:relative;width:25%;height:30%;margin:0 auto;top:90%;cursor:pointer;}
.contemAjuda{position:absolute;width:50%;top:0;bottom:0;right:0;left:0;margin:auto;display:none;}
#fecharAjuda{position:absolute;width:12%;top:0%;left:75%;cursor:pointer;z-index:2000;}

.contemEscolha{position:absolute;width:100%;height:100%;background-color:rgba(0,0,0,.4);z-index:1000;display:none;}
.escolha{position:absolute;width:50%;height:50%;top:0;bottom:0;left:0;right:0;margin:auto;z-index:1000;cursor:pointer;}
.escolhaBtn{position:absolute;width:20%;height:40%;bottom:0%;margin:auto;}
#sim{left:20%;}
#nao{right:20%;}

#parabens{position:absolute;width:100%;height:100%;z-index:1000;display:none;}
#ok{width:45%;margin-top:5%;}
.tente{position:absolute;width:100%;height:88.8%;z-index:1000;display:none;}
#imgTente{width:55%;margin-top:5%;}
#parabens2{position:absolute;width:100%;height:100%;background-color:rgba(0,0,0,.4);z-index:1000;display:none;}
#ok2{width:46%;margin-top:5%;}
#recomecar{cursor:pointer;}

img{max-width:100%;height:auto;}
	
@media screen and (max-width: 768px) {
	.inicio{width:40%;top:50%;}
	.ajuda{width:40%;top:50%;}
}
	
@media screen and (max-width: 414px) {
	#titulo{width:90%;height:10%;}
	#imgTitulo2{width:60%;}
	#sair{width:17%;top:1%;}
	.inicio{width:60%;top:40%;}
	.ajuda{width:60%;top:50%;}
	.contemAjuda{width:90%;}
	.pergunta{width:45%;height:31%;}
	.opcoes{height:28%;}
	.containerResposta{clear:both;width:100%;}
	.resposta{width:50%;}
	.navegacao{width:10%;}
	#ok{width:95%;margin-top:35%;}
	#imgTente{width:95%;margin-top:35%;}
	.escolha{width:90%;height:29%;}
	#ok2{width:90%;margin-top:30%;}
}
	
@media screen and (max-width: 1024px) and (orientation: landscape) {
	.escolha{height:37%;}
}
	
@media screen and (max-width: 736px) and (orientation: landscape) {		
	.inicio{top:40%;}
	#titulo{width:50%;}
	#imgTitulo2{width:60%;}
}

@media screen and (max-width: 568px) and (orientation: landscape) {	
	#titulo{width:60%;}	
	#recomecar{width:10%;}
}