@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%;background-image:url("../images/fundo.png");text-align:center;color:#333;font-size:62.5%;}
div.clear {clear:both;}

#wrap {position:relative;width:100%;height:100%;}

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

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

#titulo{width:55%;height:10%;margin:0 auto;margin-top:1%;}

#questao{width:71%;height:4%;margin:0 auto;margin-top:2%;display:none;}

.clicado{box-shadow:0px 0px 70px #000;border-radius:14%;background-color:rgba(0,0,0,.4);}

.intro{top:3%;}
.pagina{position:relative;width:98%;height:63%;margin:0 auto;top:3%;display:none;/* background-color:blue; */}

.esquerda{float:left;width:40%;/* height:78%; *//* background-color:red; */}
.direita{float:right;width:50%;/* height:78%; *//* background-color:yellow; */}

.silaba{position:relative;width:26%;height:13%;margin:0 auto;cursor:pointer;/* background-color:pink; */}
.circulo{position:relative;width:75%;margin:0 auto;top:1%;cursor:pointer;/* background-color:gray; */}
.colocado{position:absolute;top:0%;left:0%;display:none;}
.posicao1c{width:56%;height:45%;top:13%;left:8%;}
.posicao2c{width:56%;height:45%;top:41%;left:41%;}
.posicao3c{width:47%;height:35%;top:7%;left:23%;}
.posicao4c{width:45%;height:45%;top:48%;left:10%;}
.posicao5c{width:48%;height:45%;top:41%;left:47%;}
.gorilaPosicao{top:48%;left:28%;}

.quadro{position:relative;margin:0 auto;}
.resposta{position:absolute;top:0%;left:0%;width:34%;height:39%;}
.posicao1{top:7%;left:7%;}
.posicao2{top:7%;left:60%;}
.posicao3{top:35%;left:35%;}
.posicao4{top:55%;left:7%;}
.posicao5{top:55%;left:60%;}

.rodape{clear:both;position:relative;width:25%;height:24%;margin:0 auto;top:3%;display:none;/* ;background-color:green; */}
.btn{position:relative;float:left;width:25%;height:100%;cursor:pointer;}
.rodape2{clear:both;position:relative;width:11%;height:24%;margin:0 auto;top:11%;display:none;}
.btn2{position:relative;float:left;width:50%;height:100%;cursor:pointer;}

#parabens{position:absolute;width:100%;height:66%;top:13%;z-index:1000;display:none;}
#contemPopup{position:relative;width:38%;height:100%;margin:0 auto;}
#ok{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;}
.fim{position:absolute;width:59%;z-index:2000;display:none;}
.fim1{top:13%;left:22%;}
.fim2{top:53%;left:22%;}
.fim3{top:14%;left:22%;}
.fim4{top:32%;left:11%;}
.fim5{top:55%;left:31%;}

/* #parabens2{position:absolute;width:100%;height:66%;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) and (orientation: portrait) {
	#titulo{height:5%;top:5%;}
	.pagina{height:74%;top:1%;}
	#questao{width:100%;}
	.esquerda{clear:both;width:100%;}
	.direita{clear:both;width:100%;top:1%;}
	.quadro{width:70%;margin:0 auto;}
	#contemPopup{width:67%;}
	.rodape{width:45%;}
	.rodape2{width:29%;}
	.fim1{top:22%;}
	}
	
	@media screen and (max-width: 414px) and (orientation: portrait) {
	#titulo{width:90%;}
	.inicio{width:45%;top:30%;}
	#contemPopup{width:88%;}
	.fim4{top:40%;}
	.fim5{top:59%;}
	.rodape{width:60%;}
	}
	
	@media screen and (max-width: 1024px) and (orientation: landscape) {
	.pagina{top:9%;}
	#questao{width:95%;}
	.esquerda{height:67%;}
	.direita{height:67%;}
	#contemPopup{width:50%;}
	}
	
	@media screen and (max-width: 736px) and (orientation: landscape) {
	.inicio{width:30%;}
	.pagina{top:3%;}
	.esquerda{height:78%;}
	.direita{height:78%;}
	#contemPopup{width:40%;}
	.rodape{width:30%;}
	}