@charset "utf-8";

/* CSS Document */

* {margin:0; padding:0;font-family: 'Roboto Condensed', sans-serif;}

body {margin:0; padding:0;background-image:url("../images/fundo.png");background-color:#fff;text-align:center;color:#333;font-size: 62.5%;}

div.clear {clear:both;}

#wrap {width:100%;background:#fff;}

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

.inicio{width:22%;margin: 0 auto;margin-top:12%;cursor:pointer;}

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

#titulo{margin-top:2%;}

.lcolun {width:50%;float:left;}
.rcolun {width:50%;float:right;}

.pagina{display:none;}

.ajuda{margin-top:5%;cursor:pointer;}
.contemAjuda{position:relative;display:none;}
.txtAjuda{width:50%;margin:0 auto;margin-top:1%;padding:1%;background-color:#fff;color:#519d8e;font-weight:bold;font-size:18px;border:10px solid #e885b7;border-radius:0.5em;}
#fecharAjuda{position:absolute;top:0%;left:73%;cursor:pointer;z-index:2000;}

.audio{margin-top:2%;cursor:pointer;}

.numero{margin:0 auto;}
.containerResposta{width:30%;margin:0 auto;margin-bottom:5%;}
.resposta{cursor:pointer;}

#parabens{position:absolute;width:100%;height:88.8%;z-index:1000;display:none;}
#ok{margin-top:10%;}
#ok2{margin-top:6%;}
.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;}
#avancar{cursor:pointer;}

img{max-width:100%;height:auto;}
	
@media screen and (max-width: 768px) {
	#titulo{margin-top:15%;}
	.inicio{width:50%;margin-top:25%;}
	#imgAjuda{width:20%;}
	.audio{margin-top:15%;}
	.lcolun{margin-top:15%;}
	.rcolun{margin-top:10%;}
	.numero{width:100%;}		
	#parabens{top:16%;}
	#parabens2{top:19%;}
	#tente{top:16%;} 	
}

@media screen and (max-width: 720px) {
	#ok{width:50%;}
	#ok2{width:50%;}
	#imgTente{width:50%;}
}
	
@media screen and (max-width: 1024px) and (orientation: landscape) {
	#titulo{margin-top:5%;}
	.inicio{width:33%;margin-top:9%;}
	#imgAjuda{width:13%;}
	.audio{margin-top:5%;}
	.lcolun{margin-top:0%;}
	.rcolun{margin-top:0%;}
}
	
@media screen and (max-width: 736px) and (orientation: landscape) {	
	#titulo{width:66%;}
	.contemAjuda{position:absolute;top:62%;bottom:0;left:0;right:0;z-index:2000;}
	.audio{width:10%;margin-top:3%;}
	.lcolun{width:40%;margin-top:0%;margin-left:5%;}	
	.rcolun{width:22%;margin-top:0%;margin-right:5%;}
	.resposta{margin-bottom:33%;}
	.inicio{margin-bottom:8%;}
	#ok{width:30%;margin-top:10%;}
	#ok2{width:30%;margin-top:0%;}
	#imgTente{width:30%;margin-top:10%;}
}