@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%;}
div.clear {clear:both;}
img{width:100%;height:auto;}

.geral{width:100%;height:100%;overflow:hidden;}

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

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

#intro{position:relative;
/* width:55%; */
height:100%;margin:0 auto;}
#capa{position:relative;width:auto;height:100%;margin:0 auto;}
.inicio{position:absolute;width:24%;right:4%;bottom:4%;margin:auto;cursor:pointer;}

.pagina{position:relative;height:100%;margin:0 auto;display:none;}

.peca{position:absolute;width:7%;cursor:pointer;z-index:2;}
#a{top:78%;left:58%;}
#b{top:67%;left:66%;}
#c{top:67%;left:58%;}
#d{top:78%;left:66%;}
#e{top:78%;left:82%;}
#f{top:78%;left:42%;}
#g{top:89%;left:54%;}
#h{top:78%;left:74%;}
#i{top:78%;left:26%;}
#j{top:67%;left:26%;}
#k{top:67%;left:10%;}
#l{top:78%;left:18%;}
#m{top:67%;left:42%;}
#n{top:67%;left:50%;}
#o{top:67%;left:82%;}
#p{top:78%;left:50%;}
#q{top:67%;left:34%;}
#r{top:67%;left:18%;}
#s{top:89%;left:38%;}
#t{top:67%;left:10%;}
#u{top:78%;left:10%;}
#v{top:89%;left:46%;}
#w{top:67%;left:82%;}
#x{top:78%;left:34%;}
#y{top:78%;left:74%;}
#z{top:67%;left:74%;}

.recebe{position:absolute;width:6%;height9%;z-index:1;}

.a{top:12%;left:22%;}
.b{top:12%;left:31%;}
.c{top:12%;left:40%;}
.d{top:12%;left:53%;}
.e{top:12%;left:62%;}
.f{top:12%;left:71%;}
.g{top:23%;left:22%;}
.h{top:23%;left:31%;}
.i{top:23%;left:40%;}
.j{top:23%;left:53%;}
.k{top:23%;left:62%;}
.l{top:23%;left:62%;}
.m{top:23%;left:71%;}
.n{top:34%;left:22%;}
.o{top:34%;left:31%;}
.p{top:34%;left:40%;}
.q{top:34%;left:53%;}
.r{top:34%;left:62%;}
.s{top:34%;left:71%;}
.t{top:45%;left:22%;}
.u{top:45%;left:31%;}
.v{top:45%;left:40%;}
.w{top:45%;left:62%;}
.x{top:45%;left:53%;}
.y{top:45%;left:22%;}
.z{top:45%;left:62%;}

.fim{position:absolute;width:15%;height:7%;top:39%;cursor:pointer;}
#sim{left:12%;}
#nao{left:35%;}

@media only screen and (orientation:portrait){
  body {height:100vw;transform:rotate(90deg);}
}

@media only screen and (orientation:landscape){
	body {margin:0; padding:0;width:100%;height:100%;text-align:center;color:#333;font-size: 62.5%;}  
}


@media screen and (max-width: 1024px) and (orientation: portrait) {
	
}
	
@media screen and (max-width: 768px) and (orientation: portrait) {
	
}

@media screen and (max-width: 600px) and (orientation: portrait) {
	.inicio{width:20%;right:9%;}
	.sair{width:6%;}
	#contemScrol{position:absolute;margin:auto;margin-right:20px;z-index:15000;overflow-y:auto;height:90%;left:auto;right:3%;top:4%;width:95%; white-space:nowrap;}
	.peca{position:relative;padding: 10px;white-space:normal;vertical-align:top;display:block;margin-top:0%;width:15%;margin-left:79%;}

	.recebe{width:7%;}
	.a{top:17%;left:6%;}
	.b{top:17%;left:15%;}
	.c{top:17%;left:25%;}
	.d{top:17%;left:37%;}
	.e{top:17%;left:47%;}
	.f{top:17%;left:56%;}
	.g{top:34%;left:6%;}
	.h{top:34%;left:15%;}
	.i{top:34%;left:25%;}
	.j{top:34%;left:37%;}
	.k{top:34%;left:47%;}
	.l{top:34%;left:47%;}
	.m{top:34%;left:56%;}
	.n{top:51%;left:6%;}	
	.o{top:51%;left:15%;}
	.p{top:51%;left:25%;}
	.q{top:51%;left:37%;}
	.r{top:51%;left:47%;}
	.s{top:51%;left:56%;}
	.t{top:68%;left:6%;}
	.u{top:68%;left:15%;}
	.v{top:68%;left:25%;}
	.x{top:68%;left:37%;}
	.w{top:68%;left:47%;}
	.z{top:68%;left:47%;}
	
		#a{top:auto;left:auto;}
	#b{top:auto;left:auto;}
	#c{top:auto;left:auto;}
	#d{top:auto;left:auto;}
	#e{top:auto;left:auto;}
	#f{top:auto;left:auto;}
	#g{top:auto;left:auto;}
	#h{top:auto;left:auto;}
	#i{top:auto;left:auto;}
	#j{top:auto;left:auto;}
	#k{top:auto;left:auto;}
	#l{top:auto;left:auto;}
	#m{top:auto;left:auto;}
	#n{top:auto;left:auto;}
	#o{top:auto;left:auto;}
	#p{top:auto;left:auto;}
	#q{top:auto;left:auto;}
	#r{top:auto;left:auto;}
	#s{top:auto;left:auto;}
	#t{top:auto;left:auto;}
	#u{top:auto;left:auto;}
	#v{top:auto;left:auto;}
	#w{top:auto;left:auto;}
	#x{top:auto;left:auto;}
	#y{top:auto;left:auto;}
	#z{top:auto;left:auto;}

	.fim{width:13%;}
	#sim{left:10%;}
	#nao{left:30%;}
}

@media screen and (max-width: 480px) and (orientation: portrait) {
	
}

@media screen and (max-width: 360px) and (orientation: portrait) {
	
}

@media screen and (max-width: 320px) and (orientation: portrait) {

}


@media screen and (max-width: 1024px) and (orientation: landscape) {	
	
}

@media screen and (max-width: 824px) and (orientation: landscape) {
	.inicio{width:20%;
	height:16%;
	right:9%;}
	#contemScrol{position:absolute;margin:auto;margin-right:20px;z-index:15000;overflow-y:auto;height:90%;left:auto;right:3%;top:4%;width:95%; white-space:nowrap;}
	.peca{position:relative;padding: 10px;white-space:normal;vertical-align:top;display:block;margin-top:0%;width:15%;margin-left:79%;}
	
	.recebe{width:7%;}
	.a{top:17%;left:6%;}
	.b{top:17%;left:15%;}
	.c{top:17%;left:25%;}
	.d{top:17%;left:37%;}
	.e{top:17%;left:47%;}
	.f{top:17%;left:56%;}
	.g{top:34%;left:6%;}
	.h{top:34%;left:15%;}
	.i{top:34%;left:25%;}
	.j{top:34%;left:37%;}
	.k{top:34%;left:47%;}
	.l{top:34%;left:47%;}
	.m{top:34%;left:56%;}
	.n{top:51%;left:6%;}	
	.o{top:51%;left:15%;}
	.p{top:51%;left:25%;}
	.q{top:51%;left:37%;}
	.r{top:51%;left:47%;}
	.s{top:51%;left:56%;}
	.t{top:68%;left:6%;}
	.u{top:68%;left:15%;}
	.v{top:68%;left:25%;}
	.x{top:68%;left:37%;}
	.w{top:68%;left:47%;}
	.z{top:68%;left:47%;}

	#a{top:auto;left:auto;}
	#b{top:auto;left:auto;}
	#c{top:auto;left:auto;}
	#d{top:auto;left:auto;}
	#e{top:auto;left:auto;}
	#f{top:auto;left:auto;}
	#g{top:auto;left:auto;}
	#h{top:auto;left:auto;}
	#i{top:auto;left:auto;}
	#j{top:auto;left:auto;}
	#k{top:auto;left:auto;}
	#l{top:auto;left:auto;}
	#m{top:auto;left:auto;}
	#n{top:auto;left:auto;}
	#o{top:auto;left:auto;}
	#p{top:auto;left:auto;}
	#q{top:auto;left:auto;}
	#r{top:auto;left:auto;}
	#s{top:auto;left:auto;}
	#t{top:auto;left:auto;}
	#u{top:auto;left:auto;}
	#v{top:auto;left:auto;}
	#w{top:auto;left:auto;}
	#x{top:auto;left:auto;}
	#y{top:auto;left:auto;}
	#z{top:auto;left:auto;}
	
	.fim{width:13%;}
	#sim{left:10%;}
	#nao{left:30%;}
}

@media screen and (max-width: 812px) and (orientation: landscape) {
	
	
}

@media screen and (max-width: 824px) and (orientation: landscape) {
	
}

@media screen and (max-width: 736px) and (orientation: landscape) {

}

@media screen and (max-width: 568px) and (orientation: landscape) {

}

@media screen and (max-width: 480px) and (orientation: landscape) {

}