@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%;text-align:center;color:#333;font-size:62.5%;}
div.clear {clear:both;}

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

#contem{position:relative;margin: 0 auto;width:67%;font-size:1.5em;height:100%;background-color:#669900;}
#subTit1{font-size:1.6em;}
#subTit2{font-size:1.6em;margin-top:3%;margin-bottom:3%;}
#titulo{width:73%;height:10%;margin:0 auto;margin-top:1%;}

#fundoEsquerda{position:absolute;width:9%;top:0;bottom:0;left:0;margin:auto;z-index:1000;}
#fundoDireita{position:absolute;width:13%;top:0;bottom:0;right:0;margin:auto;z-index:1000;}

.pagina{position:relative;width:83%;height:83%;margin:0 auto;padding:1%;color:#fff;background-color:#66755F;border:5px solid rgba(211,211,211,0.4);border-radius:0.5em;}
#lista{position:relative;width:90%;height:20%;margin:0 auto;top:5%;}
#quadroEsquerda{position:relative;width:35%;float:left;}
#quadroDireita{position:relative;width:34%;height:15%;float:right;border:2px solid #fff;}
#seta{position:relative;width:30%;float:left;margin:0 auto;}
#dados{border:2px solid #fff;padding: 5% 0;}
#digite{width:50%;display:inline-block;}
#inputDados{width:40%;display:inline-block;}
#name{width:70%;text-align:center;}
#verificarvalor{width:40%;float:left;background-color:#669a0a;border:1px solid #fff;}
#limpar{width:40%;float:right;background-color:#666633;border:1px solid #fff;}
.btn{margin-top:3%;padding:1%;cursor:pointer;}
#mensagem{position:relative;width:70%;margin:0 auto;color:yellow;}

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

@media screen and (max-width: 768px) and (orientation: portrait) {	
	#contem{width:90%;}
	#lista{top:9%;}
	#subTit2{margin-top:13%;margin-bottom:13%;}
}

@media screen and (max-width: 414px) and (orientation: portrait) {	
	#contem{height:130%;}
	#titulo{height:3%;}
	#lista{height:8%;top:3%;}
	#verificarvalor{width:47%;}
	#limpar{width:45%;}
	#seta{width:25%;}
}

@media screen and (max-width: 375px) and (orientation: portrait) {	
	#contem{height:146%;}
	#verificarvalor{width:48%;font-size:0.8em;}
	#limpar{width:40%;font-size:0.8em;}
}

@media screen and (max-width: 320px) and (orientation: portrait) {	
	#contem{height:190%;}
}

@media screen and (max-width: 320px) and (max-height: 480px) and  (orientation: portrait) {
	#contem{height:222%;}
}

@media screen and (max-width: 736px) and (orientation: landscape) {
	#wrap{height:130%;}
	#contem{width:95%;}
}

@media screen and (max-width: 667px) and (orientation: landscape) {
	#wrap{height:160%;}
}

@media screen and (max-width: 568px) and (orientation: landscape) {
	#wrap{height:193%;}
	#titulo{height:7%;}
	#quadroEsquerda{width:42%;}
	#seta{width:15%;}
	#quadroDireita{width:40%;}
}

@media screen and (max-width: 480px) and (orientation: landscape) {
	#wrap{height:225%;}
	#titulo{height:5%;}
	#lista{height:14%;}
}