@charset "utf-8";

/* CSS Document */

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

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

.modal{position:fixed;top:0;left:0;width:100%;height:100%;display:none;background-color:rgba(0,0,0,.8);z-index:5000;}
.txtAjuda{position:absolute;height:max-content;max-height:100%;top:0;bottom:0;right:0;left:0;margin:auto;padding:1%;background-color:#fff;color:#803100;border:10px solid #e80c9c;font-size:20px;z-index:4000;
}
.fundoCinza{position:fixed;top:0;left:0;width:100%;height:100%;display:none;background-color:rgba(0,0,0,.8);}
.sair{position:absolute;width:7%;top:4%;right:2%;margin:auto;z-index:3000;cursor:pointer;}
.dica{position:absolute;width:54%;height:max-content;top:0;right:0;left:0;bottom:0;margin:auto;}

.imgBase{position:absolute;width:100%;height:100%;top:0;bottom:0;right:0;left:0;margin:auto;z-index:-3;}
.titulo{position:absolute;width:80%;top:1%;right:0;left:0;bottom:auto;margin:auto;}
.inicio{position:absolute;width:auto;height:33%;right:auto;left:16%;top:22%;bottom:auto;margin:auto;cursor:pointer;}
.inicio2{position:absolute;width:auto;height:20%;right:16%;left:auto;top:auto;bottom:20%;margin:auto;cursor:pointer;}

.duvida{position:absolute;width:7%;height:auto;top:4%;left:2%;z-index:3000;cursor:pointer;}
.btnAjuda img{width:auto;height:100%;}

#intro{position:relative;height:100%;margin:0 auto;top:50%;transform:translateY(-50%);}
#capa{position:relative;width:100%;height:auto;margin:0 auto;}
.inicio{position:absolute;width:44%;height:max-content;top:auto;bottom:10%;left:0;right:0;margin:auto;}
.btnInicio{width:47%;height:max-content;cursor:pointer;
/*background-color:#7ea131;border:3px solid #dde5a5;color:#fff;text-shadow:1px 1px #333;padding:7% 0;font-size:2em;*/
}
#facil{float:left;}
#dificil{float:right;}


.pagina{position:relative;width:100%;height:100%;margin:0 auto;top:50%;transform:translateY(-50%);display:none;
}
.fundoPagina{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;z-index:-1;}
.jogo{position:relative;width:95%;height:50%;margin:0 auto;top:0%;top:50%;transform:translateY(-50%);
display:none;
}

#fundo{position:relative;width:70%;height:33%;margin:0 auto;
}

.cartas{position:relative;cursor:pointer;width:100%;height:100%;
}

.template{display:none;
}

.panel {position:relative;float:left;width:25%;height:100%;display:none;}
.panel .front {position:relative;width:100%;height:100%;top:0%;bottom:0;margin:auto;z-index:900;
/*backface-visibility:hidden;*/
}
.panel.flip .front {display:none;}
.panel .back {position: absolute;width:100%;height:100%;top:0%;left:0%;z-index:800;display:none;}
.panel.flip .back {display:block;z-index:1000;}

.imgCartas{width:auto;height:100%;}

.popup{position:absolute;width:100%;height:100%;top:0;left:0;right:0;bottom:0;margin:auto;z-index:2000;
display:none;
}
#ok{position:absolute;width:100%;height:auto;top:0;bottom:0;left:0;right:0;margin:auto;z-index:0;}
.botoesContainer{position:absolute;width:25%;top:60%;bottom:auto;left:auto;right:25%;}
.novamente{float:left;width:40%;cursor:pointer;}
.voltar{float:right;width:40%;cursor:pointer;}

@media screen and (max-width: 1024px) and (orientation: portrait) {
	.sair{width:16%;top:4%;}
	.duvida{width:16%;top:4%;}
	.audio{width:16%;top:4%;}
	.stop{width:16%;top:4%;}
	/*.stop{width:14%;top:6%;}*/
	.inicio{width:47%;bottom:7%;}
	.btnInicio{width:100%;}
	#dificil{margin-top:10%;}
.botoesContainer{width:50%;top:72%;right:9%;}
	.dica{width:85%;}
	/*.popup{width:75%;}*/
}

@media screen and (max-width: 600px) and (orientation: portrait) {
	.sair{right:6%;}
	.duvida{left:6%;}
	.inicio{bottom:13%;}
	#dificil{margin-top:24%;}
	.dica{width:98%;}
	/*
	.titulo{width:70%;}
	.inicio img{width:100%;height:auto;}
	.inicio2 img{width:100%;height:auto;}
	*/
	/*.sair{width:10%;}
	 .popup{width:90%;height:65%;} */
}

@media screen and (max-width: 824px) and (orientation: landscape) {
	/*.sair{width:4%;}
	.btnAjuda{height:15%;}
	.txtAjuda{overflow-y:auto;}		
	.popup{width:25%;height:66%;}
	#ok{width: auto;height: 75%;}
	*/
}