@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;background-color:#fff;text-align:center;color:#333;font-size:62.5%;}
div.clear {clear:both;}
.lcolun {position:relative;width:50%;float:left;}
.rcolun {position:relative;width:50%;float:right;}

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

#contem{position:relative;margin: 0 auto;width:100%;height:100%;font-size:1.6em;}

#sair{position:absolute;width:3%;top:3%;right:1%;margin:auto;z-index:3000;cursor:pointer;display:none;}

#titulo{position:absolute;width:100%;height:15%;right:0;left:0;top:0%;margin:auto;}
#imgTitulo{position:relative;width:37%;z-index:1000;}

#intro{position:relative;width:31%;height:100%;margin:0 auto;}
.fundoIntro{position:relative;width:100%;height:100%;margin:0 auto;}
.imgIntro{position:absolute;width:100%;right:0;left:0;top:0;bottom:0;margin:auto;}
.btnInicio{position:absolute;width:30%;height:10%;right:0;left:0;top:47%;margin:auto;cursor:pointer;}

.pagina{position:relative;width:41%;height:100%;margin:0 auto;display:none;}
.imgPagina{position:absolute;height:100%;width:auto;right:0;left:0;top:0;bottom:0;margin:auto;}
.opcoes{position:relative;width:75%;height:10%;margin:0 auto;top:46%;}
.containerResposta{position:relative;float:left;width:20%;height:100%;}
.resposta{position:relative;width:100%;height:100%;margin:0 auto;cursor:pointer;}
.containerOk3{position:relative;float:right;width:20%;height:8%;top:46%;}

.palavraCoral{position:relative;width:75%;height:5.5%;margin:0 auto;top:51%;border-top:2px solid #F79225;}
.palavraAzul{position:relative;width:75%;height:5.5%;margin:0 auto;top:51%;border-top:2px solid #00a4e2;}
.palavraVerde{position:relative;width:75%;height:5.5%;margin:0 auto;top:51%;border-top:2px solid #7ac943;}
.palavraRosa{position:relative;width:75%;height:5.5%;margin:0 auto;top:51%;border-top:2px solid #ff7bac;}
.palavraVermelha{position:relative;width:75%;height:5.5%;margin:0 auto;top:51%;border-top:2px solid #ff1d25;}
.palavraRoxa{position:relative;width:75%;height:5.5%;margin:0 auto;top:51%;border-top:2px solid #8b6ea6;}
.palavraAmarela{position:relative;width:75%;height:5.5%;margin:0 auto;top:51%;border-top:2px solid #fce06e;}
.containerPalavra{position:relative;display:inline-block;width:10%;height:100%;}
.icone{position:relative;width:75%;height:10%;margin:0 auto;top:55%;cursor:pointer;}
.containerIcone{position:relative;display:inline-block;width:10%;height:100%;}
.imgPalavras{display:none;}

.multiplaEscolha{position:relative;width:45%;height:30%;margin:0 auto;top:60%;}
.containerEscolha{position:relative;width:100%;height:30%;margin:0 auto;cursor:pointer;}
.escolha{float:right;width:80%;height:51%;}
.escolha p{position:relative;top:50%;transform:translateY(-50%);text-align:center;font-weight:bold;}
.imgAudio{width:17%;}

.contemContinuar{position:absolute;width:100%;height:100%;background-color:rgba(0,0,0,.4);z-index:1000;display:none;}
.continuar{position:absolute;width:50%;height:53%;top:0;bottom:0;left:0;right:0;margin:auto;z-index:1000;cursor:pointer;}
.escolhaBtn{position:absolute;width:20%;height:32%;bottom:0%;top:0;margin:auto;}
#sim{left:20%;}
#nao{right:20%;}

#parabens2{position:absolute;width:100%;height:100%;background-color:rgba(0,0,0,.4);z-index:1000;display:none;}
#ok2{width:18%;margin-top:10%;}
#avancar{cursor:pointer;}

img{max-width:100%;height:auto;}
	
@media screen and (max-width: 768px) and (orientation: portrait) {
	#intro{width:78%;}
	.pagina{width:78%;}
	.imgPagina{width:100%;height:auto}
	#sair{width:5%;}
	.palavra{height:4.5%;top:47%;}
	.icone{width:96%;height:6%;top:52%;}
	.multiplaEscolha{height:22%;}
	.continuar{height:23%;}
	.escolhaBtn{height:34%;}
	#ok2{width:35%;}
}

@media screen and (max-width: 414px) and (orientation: portrait) {
	#intro{width:90%;}
	.pagina{width:90%;}
	#sair{width:8%;}
	.palavra{height:3.8%;}
	.icone{top:50%;}
	.multiplaEscolha{width:55%;}
	.escolha{height:65%;}
	#ok2{margin-top:35%;}
}

@media screen and (max-width: 375px) and (orientation: portrait) {
	.multiplaEscolha{width:60%;}
	.escolha{height:75%;}
}

@media screen and (max-width: 320px) and (orientation: portrait) {
	.multiplaEscolha{width:75%;top:55%;}
	.escolha{height:95%;}
	.imgAudio{width:14%;}
}

@media screen and (max-width: 320px)and (max-height: 480px)  and (orientation: portrait) {
	.multiplaEscolha{height:28%;}
}

@media screen and (max-width: 1024px) and (orientation: landscape) {
	#wrap{height:82%;}
	#intro{width:48%;}
	.pagina{width:48%;}
	.imgPagina{width:100%;height:auto}
	.palavra{height:4.8%;}
}

@media screen and (max-width: 736px) and (orientation: landscape) {
	#intro{width:30%;}
	.pagina{width:41%;}
	.opcoes{height:12%;}
	.multiplaEscolha{width:70%;height:37%;top:58%;}
	.escolha{height:78%;}
}

@media screen and (max-width: 667px) and (orientation: landscape) {
	.multiplaEscolha{width:79%;}
	.imgAudio{width:14%;}
}

@media screen and (max-width: 568px) and (orientation: landscape) {
	#wrap{height:77%;}
	.escolha{font-size:0.8em;}
}

@media screen and (max-width: 480px) and (orientation: landscape) {
	#intro{width:35%;}
	.opcoes{height:10%;}
	.icone{top:53%;}
	.containerIcone{width:15%;}
	.multiplaEscolha{top:53%;}
	.escolha{font-size:0.7em;}
}