@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%;height:100%;float:left;}
.rcolun {position:relative;width:50%;height:100%;float:right;}

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

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


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

#intro{position:relative;width:57%;height:100%;margin:0 auto;}
.fundoIntro{position:relative;width:100%;height:100%;margin:0 auto;top:50%;transform:translateY(-50%);}
.imgIntro{height:100%;width:auto;}
.inicio{position:absolute;width:17%;height:10%;right:0;left:0;bottom:3%;margin:auto;cursor:pointer;}

.pagina{position:relative;width:40%;height:100%;margin:0 auto;display:none;}
.imgPagina{position:absolute;width:100%;right:0;left:0;top:0;bottom:0;margin:auto;}

.contemResposta{position:absolute;width:100%;height:17%;right:0;left:0;bottom:7%;margin:auto;}
.audioGeral{position: absolute;
    width: 7%;
    top: -59px;
    right: 0;
    margin: auto;
    z-index: 3000;
    cursor: pointer;
    left: 0;}
.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;}

#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 (min-width: 1707px){
	#intro{width:35%;}	
	.inicio{bottom:0%;}	
}

@media screen and (min-width: 1540px){
	#intro{width:40%;}	
}

@media screen and (max-width: 1093px){
	#intro{width:34%;}	
	.inicio{bottom:6%;}
} */

@media screen and (max-width: 768px) and (orientation: portrait) {
	#intro{width:86%;}	
	.inicio{bottom:4%;}
	.pagina{width:85%}
	#titulo{width:60%;}
	#sair{width:6%;}
	#ok2{width:35%;}
}

@media screen and (max-width: 414px) and (orientation: portrait) {
	#intro{width:96%;}	
	.imgIntro{width:100%;height:auto;}
	.inicio{bottom:17%;}
	.pagina{width:95%}
	.contemResposta{bottom:15%;}
	#ok2{margin-top:53%;}
}

@media screen and (max-width: 320px)and (max-height: 480px)  and (orientation: portrait) {
	.inicio{bottom:6%;}
	#ok2{margin-top:35%;}
}

@media screen and (max-width: 1024px) and (orientation: landscape) {
	#intro{width:87%;}
	.inicio{width:20%;bottom:4%;}
	.pagina{width:88%;height:100%;}
	.contemResposta{position:absolute;width:22%;height:77%;left:75%;right:0;top:0;bottom:0;margin:auto;}
	.containerResp{width:100%;height:26%;margin-bottom:28%;}
	#ok2{width:25%;}
}

@media screen and (max-width: 736px) and (orientation: landscape) {
	#intro{width:59%;height:91%;}
	.pagina{height:100%;}	
	.inicio{bottom:5%;}
	#sair{width:4%;}
	.imgPagina{width:92%;}
	.contemResposta{height:74%;left:62%;}
	.containerResp{margin-bottom:20%;}
	.resposta{width:62%;}
}

@media screen and (max-width: 568px) and (orientation: landscape) {
	#intro{width:56%;height:85%;}
}

@media screen and (max-width: 480px) and (orientation: landscape) {
	#intro{width:66%;}
	.imgPagina{width:100%;}
	.contemResposta{height:62%;}
}