@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%;background-image: url(../images/background.jpg);background-color: #961b1e;background-repeat: no-repeat;background-position:top;
	/* overflow:scroll; */
text-align:center;}
div.clear {clear:both;}
img{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;width:75%;height:auto;margin:0 auto;padding-bottom:3%;background-color:#fff;border-radius:3em;}
#capa{position:relative;width:100%;height:auto;margin:0 auto;}
.inicio{position:absolute;width:20%;right:0;left:0;bottom:4%;margin:auto;cursor:pointer;}

#introducao{position:relative;max-width:60%;font-size:22px;text-align:left;margin:0 auto;}
#insideIntroducao{position:relative;background-color:#e8e7cd;padding:1%;box-shadow: 0px 0px 10px rgba(0, 0, 0, .5);border-radius:0.5em;
display:none;
}
.audio{position:absolute;width:4%;top:1%;bottom:auto;left:auto;right:1%;margin:auto;cursor:pointer;}

#principal{position:absolute;width:25%;z-index:2;bottom:1%;top:auto;left:auto;right:1%;}

.paginas{position:relative;width:75%;height:75%;margin:0 auto;
background-color:#fff;border-radius:3em;
/* top:45%;transform:translateY(-50%); */
display:none;
}

.miolo{width:45%;padding: 10px 10px;float:left;line-height:2.3em;}

.numero{float:left;font-size:2em;margin-right:1%;}
.txtarea{width:24px;height:25px;text-align:center;float:left;margin-top:0px;border: 1px solid #a1a0a0;text-transform: uppercase;}
.simbolos{width:24px;text-align:center;float:left;margin-top:0px;font-size:2em;padding:1px;}


.msg{width:43%;font-size:17px;background-color:#e8e7cd;padding:1%;padding-bottom:2%;line-height:1.5em;float:left;border-radius:0.5em;}
.msg div{text-transform: lowercase;vertical-align:bottom;height:32px;border-bottom:1px solid #333;display:inline-block;line-height:2.3em;}
.msg1{width:90px;}
.msg2{width:80px;}
.msg3{width:110px;}
.msg4{width:105px;}
.msg5{width:50px;}
.msg6{width:75px;}
.msg7{width:55px;}
.msg8{width:65px;}
.msg9{width:105px;}
.msg10{width:70px;}
.msg11{width:90px;}
.msg12{width:85px;}
.msg13{width:110px;}
.msg14{width:120px;}


.btnVogais{width:5%;min-width:62px;float:left;margin-left:1%;font-size:17px;border-radius:0.5em;background-color:#e8e7cd;padding:0.5%;box-shadow: 0px 0px 10px rgba(0, 0, 0, .5);cursor:pointer;
display:none;
}
.btnSimbolos{width:15%;min-width:80px;float:left;font-size:17px;margin-left:4%;border-radius:0.5em;background-color:#e8e7cd;padding:0.5%;box-shadow: 0px 0px 10px rgba(0, 0, 0, .5);
display:none;
cursor:pointer;}
.contemVogais{position:absolute;width:20%;min-width:120px;top:auto;bottom:22%;left:auto;right:30%;font-size:17px;background-color:#e8e7cd;padding:1%;text-align:center;box-shadow: 0px 0px 10px rgba(0, 0, 0, .5);border-radius:0.5em;
display:none;
}
.contemTabelaSimbolos{position:absolute;max-width:30%;display:inline-block;top:auto;bottom:15%;left:auto;right:24%;margin:auto;font-size:17px;background-color:#e8e7cd;padding:1%;z-index:3;box-shadow: 0px 0px 10px rgba(0, 0, 0, .5);border-radius:0.5em;
display:none;
}
.vogais{position:relative;display:inline-block;}
.tabelaSimbolos{position:relative;display:inline-block;}

.lateral{width:20px;float:left;margin-top:10px;}
.simbolo{height:25px;}


.jogar{width:10%;min-width:120px;float:left;margin-left:12%;cursor:pointer;}
#arvore{float:left;width:30%;}
#palavraJogar{float:left;border-radius:0.5em;font-size:17px;background-color:#e8e7cd;padding:9%;box-shadow: 0px 0px 10px rgba(0, 0, 0, .5);}
.verificar{width:10%;min-width:120px;float:left;margin-left:12%;cursor:pointer;
display:none;
}
#sinos{float:left;width:30%;}
#palavraSino{float:left;border-radius:0.5em;font-size:17px;background-color:#e8e7cd;padding:5%;box-shadow: 0px 0px 10px rgba(0, 0, 0, .5);}
.btnInstrucoes{width:15%;min-width:140px;float:left;margin-left:3%;cursor:pointer;}
#papai{float:left;width:22%;}
#palavraInstrucao{float:left;font-size:17px;border-radius:0.5em;background-color:#e8e7cd;padding:5%;box-shadow: 0px 0px 10px rgba(0, 0, 0, .5);}
#acertou{position:absolute;width:20%;height:10%;top:auto;bottom:25%;right:22%;left:auto;margin:auto;z-index:3000;font-size:17px;padding:1%;background-color:#fff;border:10px solid #003300;border-radius:0.5em;
display:none;
}
#insideAcertou{position: relative;top: 50%;transform: translateY(-50%); }
#errou{position:absolute;width:20%;height:10%;top:auto;bottom:25%;right:30%;left:auto;margin:auto;z-index:3000;font-size:17px;padding:1%;background-color:#fff;border:10px solid #990000;border-radius:0.5em;
display:none;
}
#insideErrou{position: relative;top: 50%;transform: translateY(-50%); }

#instrucoes{position:absolute;max-width:60%;top:5%;bottom:auto;left:0;right:0;margin:auto;font-size:17px;background-color:#e8e7cd;padding:5%;z-index:3;box-shadow: 0px 0px 10px rgba(0, 0, 0, .5);border-radius:0.5em;text-align:left;
display:none;
}
#insideInstrucoes{position:relative;display:inline-block;}

/*
#final{position:absolute;max-width:60%;top:5%;bottom:auto;left:0;right:0;margin:auto;font-size:17px;background-color:#e8e7cd;padding:1%;z-index:3;box-shadow: 0px 0px 10px rgba(0, 0, 0, .5);border-radius:0.5em;text-align:left;
display:none;
}
#msgFinal{position:relative;display:inline-block;}
*/

#final{max-width:60%;font-size:17px;background-color:#e8e7cd;padding:1%;box-shadow: 0px 0px 10px rgba(0, 0, 0, .5);border-radius:0.5em;text-align:left;margin-top:3%;
display:none;
}

.btnJogar{width:15%;min-width:95px;float:left;font-size:17px;margin-left:4%;border-radius:0.5em;background-color:#e8e7cd;padding:0.5%;box-shadow: 0px 0px 10px rgba(0, 0, 0, .5);
display:none;
cursor:pointer;}

@media screen and (max-width: 1100px) and (orientation: portrait) {
	.sair{width:7%;}
	.miolo{width:90%;float:none;}
	.msg{width:70%;float:none;margin:0 auto;}
	.contemTabelaSimbolos{max-width:40%;top:auto;bottom:50%;right:0;left:0;margin:auto;}
	.contemVogais{top:auto;bottom:50%;right:0;left:0;margin:auto;}
	#acertou{bottom:50%;right:0;left:0;}
	#errou{bottom:50%;right:0;left:0;}
	.verificar{width:100%;}
	#sinos{width:10%;}
	#palavraSino{padding:3%;}
	.btnInstrucoes{width:100%;margin-top:5%;}
	#papai{width:10%;}
	#palavraInstrucao{padding:3%;}
	.btnVogais{width:20%;margin-top:1%;margin-left:33%;padding:2.5%;}
	.btnSimbolos{width:26%;margin-left:30%;padding:2.5%;margin-top:5%;}
}

@media screen and (max-width: 768px) and (orientation: portrait) {
	.sair{width:10%;}
	.paginas{height:auto;}
	.miolo{float:none;}
	/* .msg{float:none;margin:0 auto;} */
	/* .simbolos{margin-left:0.28%;} */
	#acertou{width:60%;}
	#errou{width:60%;}
	.simbolos{width:6%;}
	.txtarea{width:6%;}
	.verificar{width:35%;margin-left:5%;}
	#sinos{width:25%;}
	#palavraSino{padding:8%;}
	.btnInstrucoes{width:50%;margin-top:0%;margin-left:0%;}
	#papai{width:27%;}
	#palavraInstrucao{padding:8%;}
	.btnVogais{width:20%;margin-top:4%;margin-left:10%;padding:2.5%;}
	.btnSimbolos{width:20%;margin-left:4%;padding:0.5%;margin-top:5%;}
	.contemTabelaSimbolos{max-width:90%;bottom:28%;}
	#introducao{max-width:94%;}
	.audio{width:11%;}
}

@media screen and (max-width: 600px) and (orientation: portrait) {
	.sair{width:10%;}
}

@media screen and (max-width: 414px) and (orientation: portrait) {	
	.paginas{width:97%;height:auto;}
	#principal{display:none;}
	#instrucoes{max-width:85%;}
}

@media screen and (max-width: 1100px) and (orientation: landscape) {
	.sair{width:7%;}
	.miolo{width:95%;}
	.msg{width:75%;}
	.contemTabelaSimbolos{max-width:20%;bottom:44%;right:17%;}
	.contemVogais{top:17%;bottom:auto;right:17%;}
	/* .contemVogais{width:20%;} */
}


@media screen and (max-width: 824px) and (orientation: landscape) {
	.paginas{height:98%;}
	.miolo{padding:0px 10px;}
	.numero{font-size:1.5em;}
	.txtarea{width:20px;}
	.simbolos{width:20px;}
	.msg{margin-top:5%;}
	.contemTabelaSimbolos{max-width:30%;bottom:10%;right:9%;}
	.contemVogais{top:25%;}
	#acertou{width:35%;height:15%;}
	#errou{width:30%;}
	#instrucoes{max-width:90%;}
	#introducao{max-width:94%;}
	
}