@font-face {
    font-family: 'abelregular';
    src: url('../fonts/abel-regular-webfont.eot');
    src: url('../fonts/abel-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/abel-regular-webfont.woff') format('woff'),
         url('../fonts/abel-regular-webfont.ttf') format('truetype'),
         url('../fonts/abel-regular-webfont.svg#abelregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
body {
	margin:0;
	font-family: 'abelregular';
}
#introducao {
	width:1024px;
	height:768px;
	display:none;
	background:url(../imgs/bgIntro.png) no-repeat;	
}
#stageMarinho {
	width:1024px;
	height:768px;
	display:none;
	background:url(../imgs/bgMarinho.jpg) no-repeat;	
}
#stageDoce {
	width:1024px;
	height:768px;
	display:none;
	background:url(../imgs/bgDoce.jpg) no-repeat;	
	background-size: 100%;
}
#stageMarinho .tab {
	position:absolute;
	top:0;
	left:0;
	width:234px;
	height:695px;
	display:none;
	margin:77px 0 0 0;
	background:url(../imgs/tabMarinho.png) no-repeat;	
	z-index:50;
}
#stageDoce .tab {
	position:absolute;
	bottom:0;
	left:0;
	width:794px;
	height:230px;
	display:none;
	margin:77px 0 0 0;
	background:url(../imgs/tabDoce.png) no-repeat;	
	z-index:50;
}
.infoDoce, .infoMarinho {
	display:block;
	position:absolute;
	top:0;
	right:89px;
	width:630px;
	margin:0 auto;
	padding:10px;
	font-family: 'abelregular';
	font-size:20pt;
	background-color:#FFF;
}

/* FEEDBACK */
#feedback {
	position:absolute;
	top:30px;
	left:100px;
	z-index:500;
	display:none;
}
#feedback .imagem {
	position:absolute;
	top:340px;
	left:50%;
	margin-left:-25px;
	width:50px;
	height:51px;
}
#feedback .iconePositivo {
	background:url(../imgs/iconePositivo.png) no-repeat;
}
#feedback .iconeNegativo {
	background:url(../imgs/iconeNegativo.png) no-repeat;
}
#feedback h2 {
width: 507px;
height: 151px;
margin: 0 auto;
padding: 141px 20px 0 10px;
font-size: 33px;
text-align: right;	
}
#feedback p {
display:block;
width:770px;
margin:0 auto;
padding:70px 20px 70px 20px;
font-family: 'abelregular';
font-size:19pt;
background-color:#FFF;
border:7px solid #b8f7f0;		
}
#feedback .btnSim {
	width:110px;
	height:75px;
	font-family:'abelregular';
	font-size:29pt;
	color:#000;
	text-align:center;
	padding:33px 0 0 0;
	margin:-50px 0 0 290px;
	background:url(../imgs/btn_feed_up.png) no-repeat;
	cursor:pointer;
	transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
}
#feedback .btnNao {
	width:110px;
	height:75px;
	font-family:'abelregular';
	font-size:29pt;
	color:#000;
	text-align:center;
	padding:33px 0 0 0;
	margin:-110px 0 0 405px;
	background:url(../imgs/btn_feed_up.png) no-repeat;
	cursor:pointer;
	transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
}
#feedback .btnSim:hover, #feedback .btnSim:active, #feedback .btnNao:hover, #feedback .btnNao:active {
	background:url(../imgs/btn_feed_down.png) no-repeat;
}
.btnFechar {
	position:absolute;
	top:5px;
	left:61px;
	width:78px;
	height:83px;
	margin:0;
	background:url(../imgs/btn_voltar_up.png) no-repeat;
	cursor:pointer;
	transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	z-index:510;
}
.btnFechar:hover, .btnFechar:active {
	background:url(../imgs/btn_voltar_down.png) no-repeat;
}
.btnVoltarIntro {
	position:absolute;
	top:5px;
	left:61px;
	width:78px;
	height:83px;
	margin:0;
	background:url(../imgs/btn_voltar_up.png) no-repeat;
	cursor:pointer;
	transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	z-index:100;
}

/* FEEDBACK */
#feedFinal {
	position:absolute;
	top:290px;
	left:101px;
	z-index:500;
	display:none;
}
#feedFinal .imagem {
	position:absolute;
	top:40px;
	left:50%;
	margin-left:-25px;
	width:50px;
	height:51px;
}
#feedFinal .iconePositivo {
	background:url(../imgs/iconePositivo.png) no-repeat;
}
#feedFinal p {
	display:block;
	width:780px;
	margin:0 auto;
	padding:105px 20px 35px 20px;
	font-family: 'abelregular';
	font-size:19pt;
	background-color:#FFF;
	border:7px solid #b8f7f0;		
}
.btnVoltarIntroFinal {
	display:none;
	position:absolute;
	top:5px;
	left:61px;
	width:78px;
	height:83px;
	margin:0;
	background:url(../imgs/btn_voltar_up.png) no-repeat;
	cursor:pointer;
	transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	z-index:600;
}


.wrap {
	position:relative;
	width:1024px;
	height:768px;
	background-color:#00d3ef;
	overflow:hidden;	
}

/* MENU DAS TELA */
.itens .item {
	display:block;
	position:absolute;
	padding:10px;
	font-size:16px;
}
.btnFechar {
	display:none;	
}
.itens .item {
	transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
}
.itens .item:hover {
    transform:scale(1.2);
    -moz-transform:scale(1.2);
    -ms-transform:scale(1.2);
    -webkit-transform:scale(1.2);
}
.gfPolvo {
	width:108px;
	height:94px;
	left:765px;
	top:330px;
	background:url(../imgs/btn_polvo.png) no-repeat;
	z-index:300
}
.gfAlga {
	width:176px;
	height:148px;
	left:770px;
	top:615px;
	background:url(../imgs/btn_alga.png) no-repeat;
	z-index:300
}
.gfAguaViva {
	width:75px;
	height:125px;
	left:267px;
	top:197px;
	background:url(../imgs/btn_aguaviva.png) no-repeat;
	z-index:300
}

.gfConcha {
	width:72px;
	height:60px;
	left:940px;
	top:706px;
	background:url(../imgs/btn_concha.png) no-repeat;
	z-index:300
}

.gfCamarao {
	width:98px;
	height:95px;
	left:234px;
	top:634px;
	background:url(../imgs/btn_camarao.png) no-repeat;
	z-index:300
}

.gfPeixe {
	width:301px;
	height:162px;
	left:720px;
	top:463px;
	background:url(../imgs/btn_tubarao.png) no-repeat;
	z-index:300
}

.gfTartaruga {
	width:103px;
	height:133px;
	left:593px;
	top:400px;
	background:url(../imgs/btn_tartaruga.png) no-repeat;
	z-index:300
}

.gfGolfinho {
	width:163px;
	height:177px;
	left:650px;
	top:175px;
	background:url(../imgs/btn_golfinho.png) no-repeat;
	z-index:300
}

.gfRedePesca {
	width:224px;
	height:232px;
	left:377px;
	top:250px;
	background:url(../imgs/btn_rede.png) no-repeat;
	z-index:300
}

.gfSacolaPlastica {
	width:147px;
	height:143px;
	left:857px;
	top:183px;
	background:url(../imgs/btn_sacolasplastico.png) no-repeat;
	z-index:300
}

.gfGarrafa {
	width:65px;
	height:120px;
	left:708px;
	top:615px;
	background:url(../imgs/btn_garrafa.png) no-repeat;
	z-index:300
}

.gfNavio {
	width:334px;
	height:267px;
	left:345px;
	top:490px;
	background:url(../imgs/btn_navio.png) no-repeat;
	z-index:300
}

.gfCapivara {
	width:191px;
	height:142px;
	left:415px;
	top:110px;
	background:url(../imgs/btn_capivara.png) no-repeat;
	z-index:300
}

.gfPetroleo{
	width:80px;
	height:87px;
	left:275px;
	top:420px;
	background:url(../imgs/btn_petroleo.png) no-repeat;
	z-index:300
}








.gfCaramujo {
	width:110px;
	height:59px;
	left: 339px;
	top: 493px;
	background:url(../imgs/btn_caramujo.png) no-repeat;
	z-index:300
}
.gfVitoriaRegia {
	width:180px;
	height:91px;
	left:554px;
	top:204px;
	background:url(../imgs/btn_vitoriaregia.png) no-repeat;
	z-index:300
}
.gfJacare {
	width:327px;
	height:143px;
	left: 146px;
	top: 312px;
	background:url(../imgs/btn_jacare.png) no-repeat;
	z-index:300
}

.gfPeixe2 {
	width:111px;
	height:47px;
	left: 542px;
	top: 483px;
	background:url(../imgs/btn_peixe2.png) no-repeat;
	z-index:300
}

.gfCastor {
	width:98px;
	height:57px;
	left:95px;
	top:237px;
	background:url(../imgs/btn_castor.png) no-repeat;
	z-index:300
}

.gfAguape {
	width:184px;
	height:146px;
	left:786px;
	top:156px;
	background:url(../imgs/btn_aguape.png) no-repeat;
	z-index:300
}

.gfPeixeBoi {
	width:154px;
	height:184px;
	left: 606px;
	top: 324px;
	background:url(../imgs/btn_peixeboi.png) no-repeat;
	z-index:300
}

.gfRochas {
	width:138px;
	height:107px;
	left:819px;
	top:660px;
	background:url(../imgs/btn_rochas.png) no-repeat;
	z-index:300
}

.gfPneu {
	width:124px;
	height:137px;
	left: 857px;
	top: 370px;
	background:url(../imgs/btn_pneu.png) no-repeat;
	z-index:300
}

.gfEsgoto {
	width:105px;
	height:141px;
	left:174px;
	top:167px;
	background:url(../imgs/btn_esgoto.png) no-repeat;
	z-index:300
}

.gfAgrotoxico {
	width:101px;
	height:81px;
	left: 55px;
	top: 392px;
	background:url(../imgs/btn_agrotoxico.png) no-repeat;
	z-index:300
}

.gfPinguim {
	width:71px;
	height:86px;
	left:81px;
	top:83px;
	background:url(../imgs/btn_pinguim.png) no-repeat;
	z-index:300
}

.gfEntulho {
	width:275px;
	height:131px;
	left: 783px;
	top: 535px;
	background:url(../imgs/btn_entulho.png) no-repeat;
	z-index:300
}

.gfEspumaDetergente{
	width:220px;
	height:92px;
	left: 290px;
	top: 196px;
	background:url(../imgs/btn_espumadetergente.png) no-repeat;
	z-index:300
}



#capa {
	width:1024px;
	height:768px;
	background:url(../imgs/capa.jpg) no-repeat;
}
#capa #logo {
	width:799px;
	height:180px;
	margin:250px 0 0 100px;
	background:url(../imgs/img_titulo.png) no-repeat;
}
#capa .btnIniciar {
	width:167px;
	height:166px;
	font-family:'abelregular';
	font-size:29pt;
	color:#000;
	text-align:center;
	padding:60px 0 0 0;
	margin:110px 0 0 400px;
	background:url(../imgs/btn_iniciar_up.png) no-repeat;
	cursor:pointer;
	transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
}
#capa .btnIniciar:hover, #capa .btnIniciar:active {
	background:url(../imgs/btn_iniciar_down.png) no-repeat;
}

#introducao .txtIntro {
	display:block;
	width:780px;
	margin:0 auto;
	padding:20px;
	font-family: 'abelregular';
	font-size:21pt;
	background-color:#FFF;
	text-align: justify;
}
.btnMarinho {
	display:none;
	position:absolute;
	top:0;
	left:0;
	margin:620px 0 0 100px;
	font-size:22pt;
	background-color:#204d56;
	border:15px solid #b8f7f0;
	color:#fff;
	text-align:center;
	padding:20px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	cursor:pointer;
}
.btnDoce {
	display:none;
	position:absolute;
	top:0;
	left:0;
	margin:621px 0 0 645px;
	font-size:22pt;
	background-color:#204d56;
	border:15px solid #b8f7f0;
	color:#fff;
	text-align:center;
	padding:20px 30px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	cursor:pointer;
}
.btnMarinho:hover {
	background-color:#da5f3a;
}
.btnDoce:hover {
	background-color:#da5f3a;
}

.overlay {
	position:absolute;
	display:none;
	width:1024px;
	height:768px;
	background:rgba(0,0,0,.8);
	left:0;
	top:0;
	z-index:310;
}