@charset "utf-8";

* {margin:0; padding:0;font-family: 'Roboto Condensed', sans-serif;}
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;}

.geral{width:100%;height:100%;overflow:hidden;}

#wrap {position:relative;width:100%;height:100%;background-color:#fff;}

.audio{position:absolute;width:5%;top:14%;left:12%;margin:auto;z-index:3000;cursor:pointer;display:none;}
.audioTitulo{position:absolute;width:5%;top:14%;left:12%;margin:auto;z-index:3000;cursor:pointer;}
.stop{position:absolute;width:5%;top:14%;left:18%;margin:auto;z-index:3000;cursor:pointer;}
.sair{position:absolute;width:5%;top:14%;right:12%;margin:auto;z-index:3000;cursor:pointer;}
.home{position:absolute;width:5%;bottom:14%;right:12%;margin:auto;z-index:3000;cursor:pointer;}

#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:20%;right:0;left:0;bottom:14%;margin:auto;cursor:pointer;box-shadow:0px 5px 5px rgba(0,0,0,.5), 10px 3px 26px 16px rgba(255,255,255,0.5)}

.pagina{position:relative;height:100%;width:auto;margin:0 auto;top:50%;transform:translateY(-50%);display:none;}
#imgBase{position:relative;width:100%;height:auto;margin:0 auto;top: 50%;transform: translateY(-50%);}
.pergunta{position:absolute;width:50%;height:60%;top:25%;bottom:auto;left:0;right:auto;margin:auto;}
.perguntaImg{position:absolute;width:auto;height:100%;top:0;bottom:0;left:0;right:0;margin:auto;}
.contemCarinhas{position:absolute;width:50%;height:100%;top:0;bottom:0;left:auto;right:0;margin:auto;display:flex;flex-direction:column;gap:4%;justify-content:center;align-items:center;}
.cara{width:65%;cursor:pointer;}
.block{display:none;position:absolute;width:100%;height:100%;top:0;bottom:0;left:0;right:0;margin:auto;z-index:10000;}
.final{position:absolute;width:30%;height:31%;top:0;bottom:0;left:0;right:0;margin:auto;background-color:#EAFDB4;display:flex;flex-direction:column;gap:4%;justify-content:center;align-items:center;}
.final img{width:90%;cursor:pointer;}


@media only screen and (orientation:portrait){
  body {height:100vw;transform:rotate(90deg);}
}

@media only screen and (orientation:landscape){
	body {margin:0; padding:0;width:100%;height:100%;text-align:center;color:#333;font-size: 62.5%;}  
}

@media screen and (max-width: 916px) and (orientation: landscape) {
	.audio{width:7%;left:6%;}
	.sair{width:7%;}
	.stop{width:6.5%;left:16%;}
	
}