/* -- reset -- */
*{
	padding: 0;
	margin: 0;
	
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	
	-webkit-tap-highlight-color: transparent;
}
/* -- fim reset -- */


/* -- global --*/


html{
	width: 100%;
	height: 100%;
	background: #9DD7D4;
}

body{
	width: inherit;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	font-family: Georgia;
}
/* -- fim global -- */


/* -- point of view -- */
.screen{
	position: relative;
	width: 1255px;
	height: 500px;
	margin-left: auto;
	margin-right: auto;
	background-color: #fff;
	overflow: hidden;
	opacity: 0;
}

.frame{
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	display: none;
}

#frame1{
	display: inline;
}

.frame1bg{
	position: absolute;
	width: 100%;
	height: 100%;
}

#ceu1{
	top: 0%;
	left: 0%;
	background-color: #6caf99;
	z-index: 5;
}

#ceu2{
	top: 100%;
	left: 0%;
	background-color: #8eba8c;
	z-index: 6;
}

#ceu3{
	top: 100%;
	left: 0%;
	background-color: #a9c27c;
	z-index: 7;
}

#ceu4{
	top: 100%;
	left: 0%;
	background-color: #c0c967;
	z-index: 8;
}

#ceu5{
	top: 100%;
	left: 0%;
	background-color: #d6cf54;
	z-index: 9;
}

#terra{
	top: 100%;
	left: 0%;
	background-color: #b39a47;
	z-index: 10;
}

#trator{
	position: absolute;
	top: 30%;
	left: -30%;
	width: 25%;
	z-index: 20;
}

#sombra_trator{
	position: absolute;
	top: 78%;
	left: -30%;
	width: 30%;
	z-index: 15;
}

#titulo{
	position: absolute;
	top: 19%;
	left: -65%;
	width: 50%;
	height: 50%;
	z-index: 15;
}

.bt_avancar{
	position: absolute;
	width: 5%;
	bottom: 5%;
	right: 3%;
	cursor: pointer;
	z-index: 20;
	display: none;
}

.bt_voltar{
	position: absolute;
	width: 5%;
	bottom: 5%;
	left: 3%;
	cursor: pointer;
	z-index: 20;
	display: none;
}

.bt_fechar{
	position: absolute;
	width: 5%;
	top: 5%;
	right: 3%;
	cursor: pointer;
	z-index: 100;
	display: none;
}

#bt_i{
	position: absolute;
	width: 5%;
	top: 5%;
	right: 3%;
	cursor: pointer;
	z-index: 21;
	display: none;
}

#frame2{
	z-index: 20;
}

#frame2left{
	position: absolute;
	top: 0%;
	left: -70%;
	height: 100%;
	z-index: 15;
}

#frame2right{
	position: absolute;
	top: 0%;
	right: -35%;
	height: 100%;
	z-index: 15;
}

#creditos{
	z-index: 25;
	background-image: url(../media/popup_bg.svg);
	background-size: cover;
}

#creditos_img{
	position: absolute;
	top: 20%;
	right: 5%;
	width: 25%;
	display: none;
}

.frame2img{
	position: absolute;
	z-index: 16;
	display: none;
}

#frame2p1{
	width: 60%;
	top: 8%;
	left: 5%;
}

#frame2p2{
	width: 60%;
	top: 20%;
	left: 5%;
}

#frame2p3{
	width: 60%;
	top: 38%;
	left: 5%;
}

#frame2p4{
	width: 40%;
	top: 65%;
	left: 22%;
}

#frame2p5{
	width: 24%;
	top: 68%;
	left: 72%;
}

#frame2img1{
	width: 12%;
	top: 62%;
	left: 8%;
}

#frame2img2{
	width: 20%;
	top: 15%;
	left: 74%;
}

#frame2link1{
	width: 35%;
	top: 25%;
	left: 33%;
	cursor: pointer;
}

#frame2link2{
	width: 20%;
	top: 88%;
	left: 32%;
	cursor: pointer;
}

.creditos_img{
	position: absolute;
	z-index: 16;
	display: none;
}

#creditos_p1{
	width: 10%;
	top: 8%;
	left: 5%;
}

#creditos_p2{
	width: 30%;
	top: 25%;
	left: 5%;
}

#creditos_p3{
	width: 24%;
	top: 40%;
	left: 5%;
}

#creditos_p4{
	width: 41%;
	top: 55%;
	left: 5%;
}

#creditos_p5{
	width: 65%;
	top: 70%;
	left: 5%;
}

#frame3{
	z-index: 20;
	background-image: url(../media/feira_bg.svg);
	background-size: cover;
}

.frame3img{
	position: absolute;
}

.personagens{
	display: none;
}

#feira{
	width: 80%;
	left: 10%;
	bottom: -5%;
	z-index: 15;
}

#toldo{
	width: 96%;
	left: 2%;
	bottom: 0%;
	z-index: 15;
}

#senhora{
	width: 14%;
	bottom: 0%;
	left: 1%;
	z-index: 20;
}

#mulher{
	width: 11%;
	bottom: 0%;
	left: 16.5%;
	z-index: 20;
}

#mulher2{
	width: 11%;
	bottom: 0%;
	left: 55%;
	z-index: 20;
}

#feirante1{
	width: 11.5%;
	bottom: 27%;
	left: 43%;
	z-index: 20;
}

#feirante2{
	width: 19%;
	bottom: 29.5%;
	left: 69%;
	z-index: 20;
}

#homem{
	width: 11%;
	bottom: 0%;
	left: 30%;
	z-index: 20;
}

#menino{
	width: 11%;
	bottom: 0%;
	left: 88%;
	z-index: 20;
}

.shadow{
	-webkit-filter: drop-shadow( -5px -5px 5px #666 );
	filter: drop-shadow( -5px -5px 5px #666 );
}

#jk_popup{
	z-index: 25;
	background-image: url(../media/feira_bg.svg);
	background-size: cover;
}

#feira_popup{
	z-index: 25;
	background-image: url(../media/feira_bg.svg);
	background-size: cover;
}

#feiralivre_popup{
	z-index: 25;
	background-image: url(../media/feira_bg.svg);
	background-size: cover;
}

#fatoreconomico_popup{
	z-index: 25;
	background-image: url(../media/feira_bg.svg);
	background-size: cover;
}

#fatorsocial_popup{
	z-index: 25;
	background-image: url(../media/feira_bg.svg);
	background-size: cover;
}

#dados_popup{
	z-index: 25;
	background-image: url(../media/feira_bg.svg);
	background-size: cover;
}

.bt_mais{
	cursor: pointer;
	width: 4%;
	z-index: 50;
	display: none;
}

#bt_mais_1{
	top: 45%;
	left: 15%;
}

#bt_mais_2{
	top: 15%;
	left: 40%;
}

#bt_mais_3{
	top: 85%;
	left: 50%;
}

#bt_mais_4{
	top: 30%;
	left: 85%;
}

#jk_img{
	position: absolute;
	height: 100%;
	top: 0%;
	right: 0%;
	display: none;
}

#jk_texto{
	position: absolute;
	top: 15%;
	left: 5%;
	width: 60%;
	display: none;
}

#feira_img{
	position: absolute;
	width: 30%;
	top: 15%;
	left: 65%;
	display: none;
}

#feira_texto{
	position: absolute;
	width: 55%;
	top: 15%;
	left: 5%;
	display: none;
}

#fatorsocial_img{
	position: absolute;
	top: 5%;
	left: 3%;
	width: 35%;
	display: none;
}

#fatorsocial_texto{
	position: absolute;
	top: 33%;
	left: 42%;
	width: 55%;
	display: none;
}

#feiralivre_img{
	position: absolute;
	top: 15%;
	left: 70%;
	width: 25%;
	display: none;
}

#feiralivre_texto{
	position: absolute;
	top: 20%;
	left: 3%;
	width: 65%;
	display: none;
}

#fatoreconomico_img{
	position: absolute;
	top: 15%;
	left: 65%;
	width: 30%;
	display: none;
}

#fatoreconomico_texto{
	position: absolute;
	top: 17%;
	left: 5%;
	width: 60%;
	display: none;
}

#dados_img{
	position: absolute;
	top: 8%;
	left: 25%;
	width: 70%;
	display: none;
}

#dados_texto{
	position: absolute;
	top: 5%;
	left: 3%;
	width: 45%;
	display: none;
}

#fim_popup{
	display: inherit;
	top: 100%;
	z-index: 25;
	background-image: url(../media/fim_bg.svg);
	background-size: cover;
}

#fim_img{
	position: absolute;
	width: 90%;
	left: 5%;
	bottom: 5%;
}

#fim_p1{
	position: absolute;
	top: 5%;
	left: 5%;
	width: 45%;
}

#fim_p2{
	position: absolute;
	top: 45%;
	left: 5%;
	width: 30%;
}

#vejamais{
	float: right;
	height: 10%;
	width: auto;
	cursor: pointer;
	display: none;
}