@charset "utf-8";

/* CSS Document */

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

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

.modal, .modal2, .modal3, .modal4{position:fixed;top:0;left:0;width:100%;height:100%;display:none;
background-color:rgba(0,0,0,.4);
z-index:5000;}

.informacao{width:100%;position:relative;height:100%;margin:0 auto;top:50%;transform:translateY(-50%);}
.dicaFundo{position:relative;width:auto;height:100%;margin:0 auto;top:50%;transform:translateY(-50%);}
.dica{position:absolute;width:50%;top:0;bottom:0;left:0;right:0;margin:auto;}
.acertou{position:absolute;width:60%;top:0;bottom:0;left:0;right:0;margin:auto;}
.parabens{position:absolute;left:0;top:0;bottom:0;right:0;margin:auto;z-index:-1;}

#intro{position:relative;height:100%;margin:0 auto;top:50%;transform:translateY(-50%);}
#capa{position:relative;width:100%;height:auto;margin:0 auto;top:50%;transform:translateY(-50%);}
.inicio{position:absolute;width:21%;right:3%;left:auto;bottom:22%;margin:auto;cursor:pointer;}
.como{position:absolute;width:21%;left:auto;right:3%;bottom:5%;margin:auto;cursor:pointer;}
.duvida{position:absolute;width:6%;top:2%;left:1%;margin:auto;z-index:3000;cursor:pointer;}
.audioQuestao{position:absolute;width:6%;top:2%;left:8%;margin:auto;z-index:3000;cursor:pointer;}
.sair{position:absolute;width:6%;top:2%;right:1%;margin:auto;z-index:3000;cursor:poiter}
.jogarFinal{    width: 18%;
    position: absolute;
    top: 34%;
    bottom: 0;
    left: 4%;
    right: auto;
    margin: auto;
	cursor:pointer;}
.sairFinal{    width: 18%;
    position: absolute;
    top: 61%;
    bottom: 0;
    left: 4%;
    right: auto;
    margin: auto;
	cursor:pointer;}

.imgBase{position:absolute;left:0;top:0;bottom:0;right:0;margin:auto;z-index:-1;}
.fundoCerto{position:absolute;left:0;top:0;bottom:0;right:0;margin:auto;z-index:-1;}
.fera{position:absolute;left:0;top:0;bottom:0;right:0;margin:auto;z-index:-1;display:none;}
.mb{position:absolute;left:0;top:0;bottom:0;right:0;margin:auto;z-index:-1;display:none;}
.uau{position:absolute;left:0;top:0;bottom:0;right:0;margin:auto;z-index:-1;display:none;}
.fundoPula{position:absolute;left:0;top:0;bottom:0;right:0;margin:auto;z-index:-1;}
.imgEsq{position:absolute;width:85%;left:auto;top:0;bottom:0;right:0;margin:auto;z-index:-1;}
#painel-esquerda{position:absolute;width:100%;height:100%;left:0;top:0;bottom:0;right:0;margin:auto;
/*background-color:rgba(0,0,255,.5);*/
}
.imgDir{position:absolute;width:35%;left:0;top:25%;bottom:auto;right:0;margin:auto;}
.imgPerg{position:absolute;width:35%;left:0;top:68%;bottom:auto;right:0;margin:auto;display:none;}
.imgFinal{position:absolute;left:0;top:0;bottom:0;right:0;margin:auto;z-index:-1;}
.questaoPerg{position:relative;width:49%;}
#pergunta1{float:left;}
#pergunta2{float:right;display:none;}
.simOuNao{position:absolute;width:30%;top:55%;cursor:pointer;}
#sim{left:15%;}
#nao{right:15%;}
.numero{position:absolute;width:21%;top:47%;bottom:auto;margin:auto;cursor:pointer;}
#n1{left:15%;right:auto;}
#n2{right:0;left:0;}
#n3{right:15%;left:auto;}

.proximo{width:20%;position:absolute;top:75%;bottom:auto;left:0;right:0;margin:auto;display:none;}
.seguir{width:34%;position:absolute;top:75%;bottom:auto;left:0;right:0;margin:auto;cursor:pointer;}
/*.stop{position:absolute;width:5%;bottom:3%;left:3%;margin:auto;z-index:3000;}*/

.pagina{position:relative;height:100%;margin:0 auto;top:50%;transform:translateY(-50%);overflow:hidden;display:none;}

.questaoArrasta{position:absolute;width:28%;top:18%;left:2%;z-index:2;}
.fundoArrasta{position:absolute;width:88%;top:0%;left:6%;}
.quantidade{position:absolute;width:28%;top:57%;left:20%;color:#fff;font-size:3em;}
.ladoDireito{position:relative;width:100%;height:67%;
/*background-color:rgba(255,0,.5);*/
}

.bandeja{width:87%;}

.ladoEsquerdo{
	position:relative;
	width:100%;
	height:33%;
	/*background-color:rgba(0,0,255,.5);*/
}
.objeto{
	position:relative;
	float:left;
	width:25%;
	height:100%;
	cursor:pointer;
	/*border-left: 3px #eab81b dashed;*/
}
.objeto img.objetoImg{
	position:absolute;
	width:100%;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
}

.objeto img.simbolo{
	position:absolute;
	width:15%;
	top:10%;
	bottom:auto;
	left:0;
	right:0;
	margin:auto;
}
.simboloAcerto{display:none;}
.simboloErro{display:none;}



.interrogacao{
	background-image: url(../images/interrogacao.png);
	background-repeat: no-repeat;
	background-size: 40%;
	background-position:center center;
}


.imgPerg.portrait{width:100%;top:18%;}
.imgPerg.portrait .questaoPerg{width:95%;margin:0 auto;}
.imgPerg.portrait .questaoPerg#pergunta1{float:none;margin-bottom:4%;}
.imgPerg.portrait .questaoPerg#pergunta2{float:none;}

.esconde{display:none;}
.aparece{display:block;}

@media screen and (max-width: 1024px) and (orientation: portrait) {
	.inicio{width:44%;right:0;left:0;bottom:12%;}
	.como{width:44%;right:0;left:0;bottom:2%;}
	.ladoDireito{width:100%;height:62%;}
	.imgDir{width:95%;top:17%;bottom:auto;}
	.objeto{width:50%;height:42%;}
	.objeto img.objetoImg{width:85%;}
	.questaoArrasta {top:38%;left:0;right:0;margin:auto;}
	
	.sair {width:15%;top:0%;}
	.duvida {width:15%;top:0%;}
	.seguir{width:30%;top:90%;}
	.audioQuestao{width:15%;top:0%;left:14%;}
	.objeto img.simbolo{width:13%;top:20%;}
	.dica {width:93%;top:18%;bottom:auto;}	
	.simOuNao{width:19%;}
	.numero{width:14%;top:41%;}
	#sim{left:24%;}
	#nao{right:24%;}
	.ladoEsquerdo{
	width:100%;
	height:45%;
	/*background-color:rgba(0,0,255,.5);*/
	}

	#painel-esquerda{width:100%;height:100%;}
	.jogarFinal{    
	width: 40%;
    top: 80%;
    left: 7%;
    right: auto;}
	.sairFinal{    
	width: 40%;
    top: 80%;
    left: auto;
    right:7%;}
}

@media screen and (max-width: 600px) and (orientation: portrait) {
	.inicio{bottom:56%;}
	.como{bottom:45%;}	
	.ladoDireito{height:71%;}
	.ladoEsquerdo{height:36%;}
	.questaoArrasta {width:42%;top:37%;}
	.seguir{width:67%;top:88%;}
	.quantidade{top:52%;font-size:2em;}
	.questaoPerg{margin:0 auto;}
	.imgPerg{width:100%;top:17%;margin:0 auto;}
	#pergunta1,#pergunta2{float:none;}
	#pergunta2{margin-top:5%;}
	.jogarFinal{top:63%;left:0;right:0}
	.sairFinal{left:0;right:0}
	
	.dica {width:95%;top:22%;}
	
}