@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{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:60%;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:auto;left:26%;bottom:8%;margin:auto;cursor:pointer;}
.como{position:absolute;width:21%;left:auto;right:26%;bottom:8%;margin:auto;cursor:pointer;}
.duvida{position:absolute;width:6%;top:2%;left:1%;margin:auto;z-index:3000;cursor:pointer;}
.stop{position:absolute;width:6%;top:2%;left:7%;margin:auto;z-index:3000;cursor:pointer;}
.sair{position:absolute;width:6%;top:2%;right:1%;margin:auto;z-index:3000;cursor:poiter}
.proximo{    width: 19%;
    position: absolute;
    top: 40%;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;}
.jogarFinal{    width: 15%;
    position: absolute;
    top: 35%;
    bottom: 0;
    left: 35%;
    right: auto;
    margin: auto;}
.sairFinal{    width: 15%;
    position: absolute;
    top: 35%;
    bottom: 0;
    left: auto;
    right: 35%;
    margin: auto;}

.imgBase{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:71%;height:47%;left:auto;top:33%;bottom:auto;right:7%;margin:auto;
/*background-color:rgba(0,0,255,.5);*/
}
#painel-direita{position:absolute;width:82%;height:18%;left:4%;top:41%;bottom:auto;right:auto;margin:auto;
/*background-color:rgba(0,0,255,.5);*/
}
.imgDir{position:absolute;width:90%;left:0;top:0;bottom:0;right:auto;margin:auto;z-index:-1;}
.imgFinal{position:absolute;left:0;top:0;bottom:0;right:0;margin:auto;z-index:-1;}

/*.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%);display:none;}

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



.resposta {
	width: 100%;
	height: 100%;

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



.circulo, .retangulo, .triangulo, .quadrado {
	position: relative;
	z-index: 2;
}
.sequencia .circulo, .sequencia .retangulo, .sequencia .triangulo, .sequencia .quadrado {
	position: relative;
	/*width: 54%;*/
	height: 100%;
	/*margin: 10px 15px;*/
	z-index: 2;
}

@media screen and (max-width: 1024px) and (orientation: portrait) {
	.inicio{width:44%;right:0;left:0;bottom:23%;}
	.como{width:44%;right:0;left:0;bottom:8%;}
	.sair {width:15%;top:0%;}
	.duvida {width:15%;top:0%;}
	.dica {width:93%;top:24%;bottom:auto;}
	.acertou{width:95%;}
	.ladoDireito{
	width:100%;
	height:38%;
	/*background-color:rgba(0,0,255,.5);*/
	}
	.imgDir{right:0;}
	#painel-direita{left:9%;}
	.ladoEsquerdo{
	width:100%;
	height:62%;
	/*background-color:rgba(0,0,255,.5);*/
	}
	.imgEsq{left:0;}
	#painel-esquerda{height:66%;top:26%;right:15%;}
	.proximo{width: 47%;top: 27%;}
	.jogarFinal{    
	width: 40%;
    top: 50%;
    left: 0%;
    right: 0;}
	.sairFinal{    
	width: 40%;
    top: 75%;
    left: 0;
    right: 0%;}
}

@media screen and (max-width: 600px) and (orientation: portrait) {
	.dica {width:95%;top:11%;}
	.proximo{top:31%;}
}