@charset "utf-8";

/* CSS Document */

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

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

.pagina{display:none;}

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

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

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

#titulo{margin-top:3%;}

.contemNumero{width:30%;margin:0 auto;margin-top:3%;}

.containerResposta{float:left;width:15%;margin-top:3%;margin-left:8%;}

.resposta{cursor:pointer;}

#contador{width:28%;margin:0 auto;margin-top:3%;}

.contemEstrela{float:left;width:20%;}

#parabens{position:absolute;width:100%;z-index:1000;display:none;}
#tente{position:absolute;width:100%;z-index:1000;display:none;}
#parabens2{position:absolute;width:100%;top:17%;z-index:1000;display:none;}
#sair{cursor:pointer;}
#avancar{cursor:pointer;}
#ok{margin-top:7%;}
#ok2{margin-top:2%;}
#imgTente{margin-top:7%;}

img{max-width:100%;height:auto;}

	
.estrela{
	display:none;
	float:left;
}
	
	@media screen and (max-width: 768px) {
	.inicio{width:235px;margin-top:25%;}
	#sair{width:8%;}
	.contemNumero{margin-top:10%;}
	.containerResposta{margin-top:10%;}
	#contador{width:48%;margin-top:12%;}
	#parabens{top:9%;}
	#parabens2{top:11%;}
	#tente{top:9%;}
	
	}
	
	@media screen and (max-width: 1024px) and (orientation: landscape) {
		.inicio{width:235px;margin-top:15%;}
		.contemNumero{margin-top:5%;}
		.containerResposta{margin-top:5%;}
		#titulo{margin-top:0%;}
		#contador{width:39%;margin-top:14%;}
		#parabens2{top:12%;}
		#ok{margin-top:12%;}
		#imgTente{margin-top:12%;}
	}
	
	@media screen and (max-width: 720px) {
	#ok{width:50%;}
	#ok2{width:50%;}
	#imgTente{width:50%;}
}

	@media screen and (max-width: 736px) and (orientation: landscape) {	
		#titulo{width:85%;margin-top:0%;}
		.contemNumero{width:30%;margin-top:5%;}
		.containerResposta{width:12%;margin-top:5%;margin-left:11%;}		
		#contador{width:39%;margin-top:5%;}
		#ok{width:30%;margin-top:10%;}
		#ok2{width:30%;margin-top:0%;}
		#imgTente{width:30%;margin-top:10%;}
	}

	@media screen and (max-width: 360px) {
		.inicio{width:200px;}
}