@font-face {
	font-family: 'concertone';
	src: url('fonts/concertone.eot');
	src: url('fonts/concertone.ttf');
}
@font-face {
	font-family: 'nunito';
	src: url('fonts/nunito.eot');
	src: url('fonts/nunito.ttf');
}

#interatividade{
	background: url(img/bg.jpg) no-repeat 0 0;
}

.tela{
	width: 800px;
	height: 600px;
}

.botoes{
	font-family: 'concertone';
	font-size:21px;
	line-height:63px;
	color:#01789a;
	text-decoration: none;
	text-align: center;
	height: 79px;
	position: absolute;
	left:50%;
	bottom: 35px;
}
#stage.tablet .botoes{
	line-height:53px;
}
.botoes.botao_152{ background:url(img/botao_152x79.png) no-repeat 0 0; width: 152px; margin-left: -76px; }
.botoes.botao_175{ background:url(img/botao_175x79.png) no-repeat 0 0; width: 175px; margin-left: -87.5px; }
.botoes.botao_224{ background:url(img/botao_224x79.png) no-repeat 0 0; width: 224px; margin-left: -112px; }
.botoes.botao_300{ background:url(img/botao_300x79.png) no-repeat 0 0; width: 300px; margin-left: -150px; }

.popup{
	background: rgba(53,63,35,.85);
}
.popup.no-filter{
	background: none;
}
.popup article{
	position: absolute;
	top:50%;
    left:50%;
}
.popup article blockquote{
	position: absolute;
	bottom:25px;
    left:0;
	display: table;
}
.popup article blockquote span{
	display: table-cell;
	width: 100%;
	text-align: center;
	vertical-align: middle;
}
.popup article blockquote span p{
	font-family: 'nunito';
	font-size:20px;
	line-height:24px;
	color:#ffffff;
	padding:7px 0;
}

.icone{
	position: absolute;
	cursor: pointer;
	transform-origin:50% 50%;
}
.icone.bandeira{ background: url(img/bandeira.png) no-repeat 0 0; width: 196px; height:236px; }
.icone.boi_garantido{ background: url(img/boi_garantido.png) no-repeat 0 0; width: 192px; height:217px; }
.icone.boi_caprichoso{ background: url(img/boi_caprichoso.png) no-repeat 0 0; width: 192px; height:217px; }
.icone.bonecao{ background: url(img/bonecao.png) no-repeat 0 0; width: 204px; height:327px; }
.icone.cavaleiro{ background: url(img/cavaleiro.png) no-repeat 0 0; width: 184px; height:174px; }
.icone.cavalo{ background: url(img/cavalo.png) no-repeat 0 0; width: 191px; height:220px; }
.icone.fita{ background: url(img/fita.png) no-repeat 0 0; width: 162px; height:126px; }
.icone.suco{ background: url(img/suco.png) no-repeat 0 0; width: 115px; height:174px; }
.icone.uva{ background: url(img/uva.png) no-repeat 0 0; width: 157px; height:132px; }
.icone.vaso{ background: url(img/vaso.png) no-repeat 0 0; width: 167px; height:265px; }

.mochila{
	position: absolute;
	background: url(img/mochila.png) no-repeat;
	width: 97px;
	height:180px;
}
#galeria .mochila{
	top: 328px;
    left: 670px;
}
#galeria .poeira{
	position: absolute;
	background: url(img/poeira.png) no-repeat;
	width: 34px;
	height:40px;
    top: 400px;
    left: 703px;
}


#popupInicial article{
	background: url(img/popup_inicio.png) no-repeat 0 0;
	width: 711px;
	height:386px;
	margin:-243px 0 0 -355.5px;
}
#popupInicial article blockquote{
	height:180px;
	padding: 0px 80px;
}

#popupIncompleto, #popupCompleto {
	z-index:5;
}
#popupIncompleto article, #popupCompleto article{
	background: url(img/popup_fechamento.png) no-repeat 0 0;
	width: 667px;
	height:318px;
	margin:-199px 0 0 -333.5px;
}
#popupIncompleto article blockquote{
	height:180px;
	padding: 0px 60px;
}
#popupIncompleto .btVoltar{
    margin-left: -250px;
}
#popupIncompleto .btContinuar{
    margin-left: -30px;
}

#popupCompleto article blockquote{
	height:180px;
	padding: 0px 90px;
}

#popupMuitoBem article{
	background: url(img/popup_muito_bem.png) no-repeat 0 0;
	width: 711px;
	height:386px;
	margin:-243px 0 0 -355.5px;
}
#popupMuitoBem article blockquote{
	height:180px;
	padding: 0px 80px;
    left: 48px;
}

#home .mapa, #atividade .mapa{
	background: url(img/mapa_brasil.png) no-repeat 0 0;
	position: absolute;
	width: 501px;
	height: 495px;
	top:5px;
	left:150px;
}
#home .mapa img{
	width: 501px;
	height: 495px;
}
#home .mapa .regioes, #atividade .mapa .regioes{
	position: absolute;
}
#home .mapa .regioes .pin{
	position: absolute;
	width: 39px;
	height:54px;
}
#home .mapa .regioes .pin[data-status=incompleto]{
	background: url(img/pins.png) no-repeat 0 0;
}
#home .mapa .regioes .pin[data-status=completo]{
	background: url(img/pins_ok.png) no-repeat 0 0;
}
#home .mapa .regioes.norte{
	background: url(img/norte.png) no-repeat 0 0;
	width: 360px;
	height:247px;
	top:0px;
	left:0px;
}
#home .mapa .regioes.norte .pin{
	top:49px;
	left:195px;
}
#home .mapa .regioes.nordeste{
	background: url(img/nordeste.png) no-repeat 0 0;
	width: 166px;
	height:224px;
	top: 90px;
    left: 334px;
}
#home .mapa .regioes.nordeste .pin{
	top:103px;
	left:94px;
}
#home .mapa .regioes.centro-oeste{
	background: url(img/centro_oeste.png) no-repeat 0 0;
	width: 191px;
	height:206px;
	top: 170px;
    left: 160px;
}
#home .mapa .regioes.centro-oeste .pin{
	top:69px;
	left:135px;
}
#home .mapa .regioes.sudeste{
	background: url(img/sudeste.png) no-repeat 0 0;
	width: 159px;
	height:130px;
    top: 259px;
    left: 269px;
}
#home .mapa .regioes.sudeste .pin{
	top:57px;
	left:83px;
}
#home .mapa .regioes.sul{
	background: url(img/sul.png) no-repeat 0 0;
	width: 99px;
	height:134px;
    top: 359px;
    left: 224px;
}
#home .mapa .regioes.sul .pin{
	top:34px;
	left:46px;
}
#home h3{
	position: absolute;
	bottom:5px;
	left:50%;
	background: url(img/flamula.png) no-repeat 0 0;
	width: 666px;
	height:80px;
	font-family: 'concertone';
	font-weight: normal;
	font-size:21px;
	line-height:52px;
	color:#fff;
	text-align: center;
	margin-left:-333px;
}

#stage.tablet #home h3{
	line-height:60px;
}

#atividade .mapa{
	background: none;
}
#atividade nav{
	position: absolute;
	background: url(img/aba_coletados.png) no-repeat 0 0;
	width: 686px;
	height:95px;
	bottom:5px;
	left:50%;
	margin-left:-343px;
	text-align: center;
	line-height: 101px;
	transform-origin: 50% 50%;
}
#atividade nav .icone{ 
	background-size:100% 100%; 
	top: 16px;
}
#atividade nav .bandeira{ width: 46px; height:55px; left:56px; }
#atividade nav .boi_garantido{ width: 49px; height:55px; left:420px; } 
#atividade nav .boi_caprichoso{ width: 49px; height:55px; left:170px; }
#atividade nav .bonecao{ width: 34px; height:55px; left:119px; }
#atividade nav .cavaleiro{ width: 55px; height:53px; left:234px; }
#atividade nav .cavalo{ width: 48px; height:55px; left:487px; }
#atividade nav .fita{ width: 55px; height:43px; left:554px; top: 26px; }
#atividade nav .suco{ width: 36px; height:55px; left:614px; }
#atividade nav .uva{ width: 55px; height:46px;  left:349px; top: 23px; }
#atividade nav .vaso{ width: 35px; height:55px; left:297px; }

#atividade nav .bandeira.hover, #atividade .regioes .bandeira{ width: 75px; height:91px; }
#atividade nav .boi_garantido.hover, #atividade .regioes .boi_garantido{ width: 86px; height:94px;  } 
#atividade nav .boi_caprichoso.hover, #atividade .regioes .boi_caprichoso{ width: 86px; height:94px;  }
#atividade nav .bonecao.hover, #atividade .regioes .bonecao{ width: 60px; height:88px;  }
#atividade nav .cavaleiro.hover, #atividade .regioes .cavaleiro{ width: 90px; height:86px;  }
#atividade nav .cavalo.hover, #atividade .regioes .cavalo{ width: 88px; height:96px;  }
#atividade nav .fita.hover, #atividade .regioes .fita{ width: 100px; height:77px; }
#atividade nav .suco.hover, #atividade .regioes .suco{ width: 54px; height:80px; }
#atividade nav .uva.hover, #atividade .regioes .uva{ width: 76px; height:67px; }
#atividade nav .vaso.hover, #atividade .regioes .vaso{ width: 62px; height:101px; }

#atividade .mapa .regioes.norte{ width: 360px; height:247px; top:0px; left:0px; }
#atividade .mapa .regioes.nordeste{ width: 166px; height:224px; top: 90px; left: 334px; }
#atividade .mapa .regioes.centro-oeste{ width: 191px; height:206px; top: 170px; left: 160px; }
#atividade .mapa .regioes.sudeste{ width: 159px; height:130px; top: 259px; left: 269px; }

#atividade .mapa .regioes.sul{ width: 99px; height:134px; top: 359px; left: 224px; }

#atividade .regioes .icone{ background-size:100% 100%; }
#atividade .regioes .bandeira{ top: 41px; left: 16px; }
#atividade .regioes .boi_garantido{ top: 18px; left: 113px; } 
#atividade .regioes .boi_caprichoso{ top: 90px; left: 240px; }
#atividade .regioes .bonecao{ top:50px; left:122px; }
#atividade .regioes .cavaleiro{ top:100px; left:57px; }
#atividade .regioes .cavalo{ top:50px; left:-27px; transform: scale(-1,1); }
#atividade .regioes .fita{ top:140px; left:70px; }
#atividade .regioes .suco{ top:30px; left:-14px; }
#atividade .regioes .uva{ top:73px; left:40px; }
#atividade .regioes .vaso{ top:50px; left:124px; }

#atividade .mochila{
	bottom: -60px;
	left: 50%;
    margin-left: -40px;
}

#atividade #btReiniciar{	
    bottom: 10px;
}

#crdRecurso{z-index: 101;}