@charset "utf-8";

/* CSS Document */

* {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{max-width:100%;height:auto;}

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

.sair{position:absolute;width:5%;top:4%;right:2%;margin:auto;z-index:3000;cursor:pointer;display:none;}

#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:20%;right:0;left:0;bottom:18%;margin:auto;cursor:pointer;}
.audio2{position:absolute;width:5%;bottom:4%;right:2%;margin:auto;z-index:3000;cursor:pointer;}

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

.pagina img{width:100%;max-width:300%;}
.pagina img.sair{width:5%;max-width:300%;}

.contemResposta{position:absolute;width:55%;height:13%;top:auto;right:0;left:0;bottom:44%;margin:auto;}
.containerResp{position:relative;float:left;width:33.3%;height:100%;}
.resposta{position:absolute;width:70%;top:0;right:0;bottom:0;left:0;margin:auto;cursor:pointer;}
.acerto{position:absolute;width:33%;height:23%;right:0;left:0;bottom:23%;margin:auto;display:none;}
.audio{position:absolute;width:13%;height:12%;right:0;left:0;bottom:1%;margin:auto;cursor:pointer;}
.audio img{height:100%;width:auto;}

#parabens{position:absolute;width:100%;height:100%;background-color:rgba(0,0,0,.4);z-index:1000;
display:none;
}
#parabens2{position:absolute;width:100%;height:100%;background-color:rgba(0,0,0,.4);z-index:1000;
display:none;
}
#tente{position:absolute;width:100%;z-index:1000;display:none;height:100%;background-color:rgba(0,0,0,.7);}
#ok{position:absolute;top:0;bottom:0;right:0;left:0;margin:auto;}
#imgTente{position:absolute;width:25%;top:0;bottom:0;right:0;left:0;margin:auto;}

#ok2{width:18%;margin-top:10%;}
img#avancar{max-width:100%;cursor:pointer;}

@keyframes fullScale{
    from{
        transform:scale(1);
    }
    to{
        transform:scale(1.1);
    }
}

.arvoreImg{
    animation: fullScale 1s;
	animation-iteration-count:infinite;
}

@media screen and (max-width: 1024px) and (orientation: portrait) {
	.sair{width:7%;}
	.inicio{bottom:26%;}
	.contemResposta{width:75%;height:10%;}
	.acerto{width:40%;}
	.audio{height:8%;}
}

@media screen and (max-width: 600px) and (orientation: portrait) {
	.sair{width:10%;}
	.inicio{width:28%;bottom:30%;}	
	.contemResposta{width:81%;}
	.audio2{width:10%;}
	.acerto{width:53%;}
}

@media screen and (max-width: 824px) and (orientation: landscape) {
	.inicio{width:16%;bottom:13%;}	
	.acerto{width:30%;}
}