@charset "utf-8";

/* CSS Document */

* {margin:0; padding:0;font-family: 'Roboto Condensed', sans-serif;}
html{height:100%;}
body {margin:0; padding:0;height:100%;/* background-image:url("../images/fundo.png"); */background-color:#7fc5c1;text-align:center;color:#333;font-size:62.5%;}
div.clear {clear:both;}

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

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

#titulo{width:73%;height:10%;margin:0 auto;margin-top:1%;}


#intro{position:relative;width:100%;height:100%;margin:0 auto;}
.fundoIntro{position:relative;width:82%;height:100%;margin:0 auto;}
.imgIntro{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;}
.inicio{position:absolute;width:13%;height:10%;top:57%;left:62%;cursor:pointer;}
.instrucaoBtn{position:absolute;width:16%;height:10%;top:74%;left:60%;cursor:pointer;}
.instrucao{position:absolute;width:80%;height:35%;text-align:center;font-size:16px;z-index:1000;background-color:#609895;display:none;top:0;bottom:0;right:0;left:0;margin:auto;border:3px solid #fff;}
.instrucao p{color:#fff;text-shadow:1px 1px 0.5px rgba(0,0,0,.4);}

.pagina{position:relative;width:98%;height:86%;margin:0 auto;top:1%;display:none;}

#jogo{position:relative;width:100%;height:87%;margin:0 auto;}
.esquerda{position:relative;float:left;width:49.7%;height:100%;border-right:4px dashed #fff;}
.direita{position:relative;float:right;width:49.7%;height:100%;}
.box_p{position:relative;float:left;width:40%;height:26%;margin-top:3%;margin-left:5%;background-color:#fff;border-radius:0.5em;box-shadow:4px 4px 10px #000, inset 0 0 10px #000;border:2px solid #00887a;font-size:15px;padding:2px 5px 2px 5px;line-height:1em;cursor:pointer;}
.box_p p{position:relative;top:50%;transform:translateY(-50%);text-align:left;}

.box_r{position:relative;float:left;width:40%;height:27.5%;margin-top:3%;margin-left:5%;background-color:#fff;border-radius:0.5em;box-shadow:4px 4px 10px #000, inset 0 0 10px #000;border:5px solid #00887a;color:#00887a;font-weight:bold;padding:0px 5px 0px 5px;cursor:pointer;line-height:1.3em;}
.box_r p{position:relative;top:50%;transform:translateY(-50%);}
.resp,.box{display: none;}

.historico{position:relative;margin:0 auto;width:10%;height:5%;top:5%;border-radius:0.2em;padding:0.1% 0.5% 0.2% 0.5%;background-color:#ffc809;color:#fff;cursor:pointer;}
.historico p{position:relative;top:50%;transform:translateY(-50%);}
.respondidas{width:100%;min-height:100%;position:absolute;text-align:center;font-size:16px;z-index:1000;background-color:white;display:none;}
.fecharHist{margin:0 0 0 30px;}
.resp`{display:none;}
.tit{color:#00887a;font-weight:bold;}

#parabens2{position:absolute;width:100%;height:66%;top:5%;z-index:1000;display:none;}
#ok2{width:20%;margin-top:6%;}
#avancar{cursor:pointer;}

img{max-width:100%;height:auto;}

@media screen and (max-width: 768px) and (orientation: portrait) {	
	#contem{width:100%;}
	.esquerda{width:100%;border:0px;clear:both;}
	.box_p{height:30%;}
	.direita{width:100%;border:0px;clear:both;top:10%;}
	.historico{width:30%;top:10%;}
	#ok2{width:40%;}
	.fundoIntro{width:100%;}
	.inicio{height:4%;top:54%;left:65%;}
	.instrucaoBtn{height:4%;top:62%;left:64%;}
}

@media screen and (max-width: 414px) and (orientation: portrait) {
	#ok2{width:65%;}
	#titulo{height:5%;}
	.box_p{width:39%;height:38%;}
	.box_r{width:38%;}
	.direita{top:30%;}
	.historico{top:25%;}
	.respondidas{width:96%;padding:1% 2%;}	
	.inicio{top:53%;}
	.instrucaoBtn{top:59%;}
	.instrucao{height:40%;}
}

@media screen and (max-width: 375px) and (orientation: portrait) {
	.box_p{height:45%;}
	.box_r{font-size:0.9em;}
	.direita{top:53%;}
	.historico{width:36%;top:46%;}
	.instrucao{height:52%;}
}

@media screen and (max-width: 320px) and (orientation: portrait) {
	.box_p{width:38%;height:63%;}
	.direita{top:110%;}
	.box_r{width:36%;font-size:0.7em;}
	.historico{width:41%;top:97%;}
	.instrucao{height:60%;}
}

@media screen and (max-width: 320px) and (max-height: 480px) and  (orientation: portrait) {
	.box_p{height:75%;}
	.direita{top:150%;}
	.historico{top:135%;}
	.instrucaoBtn{top:61%;}
	.instrucao{height:70%;}
}

@media screen and (max-width: 1024px) and (orientation: landscape) {
	#contem{width:99%;}
	#titulo{height:9%;}
	.pagina{height:90%;}
	#jogo{height:89%;}
	.box_p{height:28%;}
	.historico{width:15%;}
	#ok2{width:30%;}	
	.fundoIntro{width:100%;}
	.instrucaoBtn{top:72%;}
}

@media screen and (max-width: 736px) and (orientation: landscape) {
	.esquerda{width:48%;border:0px;}
	.box_p{width:90%;height:36%;}
	.direita{width:48%;}
	.box_r{width:84%;height:35%;font-size:0.9em;}
	.historico{width:20%;height:10%;top:144%;}
	#parabens2{top:0%;}
	#ok2{margin-top:0%;}	
	.fundoIntro{width:76%;}
	.inicio{top:56%;}
	.instrucaoBtn{top:71%;}
	.instrucao{height:62%;}
}

@media screen and (max-width: 568px) and (orientation: landscape) {
	.box_p{height:50%;}
	.box_r{height:49%;}
	.historico{width:23%;top:222%;}
	#avancar{width:13%;}
	.instrucao{height:73%;}
}

@media screen and (max-width: 480px) and (orientation: landscape) {
	.box_p{height:64%;}
	.box_r{height:63%;}
	.historico{width:26%;top:293%;}
	#ok2{width:32%;}
	#avancar{width:16%;}
	.inicio{top:55%;}
	.instrucaoBtn{top:68%;}
	.instrucao{width:97%;}
}