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

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

#interatividade{
	background: #151515;
}
#interatividade .main{
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
}
#interatividade .main .content{
	position: absolute;
	left: 0px;
	right: 0px;
	top: 50%;
	height: 500px;
	margin-top: -250px;
	overflow: hidden;
}

.span_mobile{ display: block; }
.span_desk{ display: none; }

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

.animaAll{
	transition: all .8s ease-in-out;
	-webkit-transition:  all .8s ease-in-out, -webkit-transform .8s;
	transition:  all .8s ease-in-out, -webkit-transform .8s;
}

/*ITENS PADROES*/
/*BOTOES*/
#interatividade .btns_padroes{
    position: absolute;
    color: #fff;
    font-family: 'highway';
    font-size: 14px;
    text-align: left;
}

#interatividade .btns_padroes[data-button='avancar'],
#interatividade .btns_padroes[data-button='voltar']{
	width: 124px;
	height: 45px;
}

#interatividade .btns_padroes[data-button='avancar']{
	background: url(img/bt_avancar.png) no-repeat center center;
	padding: 0px 0 0 12px;
}
#interatividade .btns_padroes[data-button='voltar']{
	background: url(img/bt_voltar.png) no-repeat center center;
	text-align: right;
	padding: 0px 16px 0px 0;
}
#interatividade .btns_padroes[data-button='verificar']{
	width: 137px;
	height: 39px;
	background: url(img/bt_verificar.png) no-repeat center center;
	text-align: right;
	padding: 0px 16px 0px 0;
}

/*MARCADOR*/
#interatividade .marcador{
    position: absolute;
    width: 60px;
    height: 13px;
    background-size: 60px;
}

#interatividade .marcador[data-pos='0']{
	background: url(img/marcador_0.svg) no-repeat;
	background-size: 100%;
}
#interatividade .marcador[data-pos='1']{
	background: url(img/marcador_1.svg) no-repeat;
	background-size: 100%;
}
#interatividade .marcador[data-pos='2']{
	background: url(img/marcador_2.svg) no-repeat;
	background-size: 100%;
}
#interatividade .marcador[data-pos='3']{
	background: url(img/marcador_3.svg) no-repeat;
	background-size: 100%;
}

/*FIM - ITENS PADROES*/

#mobile_alert{ background: #F8EDD7; }
#mobile_alert .mao{
	position: absolute;
	width: 105px;
	height: 127px;
	top: 50%;
	left: 50%;
	margin: -63.5px 0 0 -52.5px;
	background: url(img/mao.png) no-repeat center center;
	background-size: 100%;
}

#introducao{ background: #F8EDD7; }
#introducao .imagem{ position: absolute; }

#introducao .marcador{
    left: 50%;
    top: 0;
    margin: 10px 0 0 -22.5px;
    width: 45px;
    display: block;
    background-size: 133% !important;
}

#introducao[data-parte='0'] .imagem{
	width: 283px;
	height: 261px;
	background: url(img/mala.png) no-repeat center center;
	background-size: 100%;
	left: 50%;
	margin: 0 0 0 -141.5px;
	bottom: 0;
}

#introducao[data-parte='1'] .imagem,
#introducao[data-parte='2'] .imagem{
	width: 250px;
	height: 258px;
	left: 50%;
}

#introducao[data-parte='1'] .imagem{
	background: url(img/img_pt2_texto.png) no-repeat center center;
	background-size: 100%;
	margin: 0 0 0 -118px;
	top: 60px;
}

#introducao[data-parte='2'] .imagem{
	background: url(img/img_pt3_texto.png) no-repeat center center;
	background-size: 100%;
	margin: 0 0 0 -125px;
	top: 50px;
}

#introducao .box_texto{
	position: absolute;
	width: 240px;
	height: auto;
	background: #302E99;
	padding: 10px;
	border-radius: 7px;
}

#interatividade .linhaBranca{
	border: 2px solid #fff;
	border-radius: 7px;
	padding: 5px 17px 5px 17px;
}

#introducao .box_texto p{
	font-family: 'trf2';
	font-size: 21px;
	color: #fff;
	text-align: center;
	line-height: 25px;
	display: none;	
}

#introducao[data-parte='0'] .box_texto,
#introducao[data-parte='1'] .box_texto,
#introducao[data-parte='2'] .box_texto{
    left: 50%;
    margin: 0 0 0 -130px;
}

#introducao[data-parte='0'] .box_texto{	top: 84px; }
#introducao[data-parte='1'] .box_texto{	top: 335px; }
#introducao[data-parte='2'] .box_texto{	top: 310px; }

#introducao[data-parte='0'] .box_texto .parte1{
	display: block;
}
#introducao[data-parte='1'] .box_texto .parte2{
	display: block;
}
#introducao[data-parte='2'] .box_texto .parte3{
	display: block;
}

#introducao .btns_padroes{
	bottom: 99px;
    right: 172px;
    display: none;
}

#personagens .avanMapa{
	bottom: 30px;
	left: 50%;
	margin: 0 0 0 -62px;
}
#personagens .slide_anima{
	position: absolute;
	width: 846px;
	height: 100%;
	left: 0;
	display: inline-flex;
}

#personagens .blocos{
	position: relative;
}

#personagens .blocos[data-pessoa='0']{ background: #FFEAA7; }
#personagens .blocos[data-pessoa='1']{ background: #55EFC4; }
#personagens .blocos[data-pessoa='2']{ background: #FF7675; }
#personagens .blocos[data-pessoa='3']{ background: #74B9FF; }

#personagens .blocos .box_conteudo{
	position: relative;
}

#personagens .blocos[data-pessoa='0'] .box_conteudo{ background: #EDD89D; }
#personagens .blocos[data-pessoa='1'] .box_conteudo{ background: #7DDBAC; }
#personagens .blocos[data-pessoa='2'] .box_conteudo{ background: #E56A6A; }
#personagens .blocos[data-pessoa='3'] .box_conteudo{ background: #6AADE5; }

#personagens .blocos .box_conteudo[data-etapa='0']{
	width: 431px;
	height: 431px;
	top: 50%;
	left: 50%;
	margin: -215.5px 0 0 -215.5px;
	border-radius: 310px;
}

#personagens .blocos .box_conteudo[data-etapa='1']{
	width: 100%;
	height: 57%;
	top: 0;
	left: 0;
	margin: 0;
	border-radius: 0px;
}

#personagens .blocos .box_conteudo[data-etapa='2']{
	width: 100%;
	height: 0;
	top: 0;
	left: 0;
	margin: 0;
	border-radius: 0px; 
	background: rgba(237, 216, 157, 0) ;
	text-align: center;
}

#personagens .blocos .box_conteudo .imagem{
	margin: 0 auto;
	transform-origin: 50% 50%;
	display: inline;
}
#personagens .blocos .box_conteudo .imagem .img1{
	width: 258px;
	height: 305px;
	margin: 0 auto;
	transform-origin: 50% 50%;
} 

#personagens .blocos[data-pessoa='0'] .box_conteudo .imagem .img1{
	background: url(img/pessoa_0.png) no-repeat center center;
	background-size: 100%;
}
#personagens .blocos[data-pessoa='1'] .box_conteudo .imagem .img1{
	background: url(img/pessoa_1.png) no-repeat center 28px;
	background-size: 100%;
}
#personagens .blocos[data-pessoa='2'] .box_conteudo .imagem .img1{
	background: url(img/pessoa_2.png) no-repeat center center;
	background-size: 100%;
}
#personagens .blocos[data-pessoa='3'] .box_conteudo .imagem .img1{
	background: url(img/pessoa_3.png) no-repeat center 31px;
	background-size: 100%;
}

#personagens .blocos[data-pessoa='1'] .box_conteudo[data-etapa='2'] .imagem .img1{
	background: url(img/pessoa_1.png) no-repeat center 13px;
	background-size: 100%;
}

#personagens .blocos[data-pessoa='3'] .box_conteudo[data-etapa='2'] .imagem .img1{
	background: url(img/pessoa_3.png) no-repeat center 11px;
	background-size: 100%;
}

#personagens .blocos .box_conteudo[data-etapa='2'] .imagem{
	display: inline-flex;
}

#personagens .blocos .box_conteudo[data-etapa='2'] .imagem .img1{
    width: 64px;
    min-width: 64px;
    height: 90px;
    margin: 0 auto;
    transform-origin: 50% 50%;
}

#personagens .blocos .box_conteudo .imagem .small_infos{
	text-align: left;
	font-family: 'highway';
	width: 0px;
	height: 0px;
	color: #000;
	overflow: hidden;
	margin: 21px 0 0 0;
}

#personagens .blocos .box_conteudo .imagem .small_infos .nome{
	font-size: 26px;
}
#personagens .blocos .box_conteudo .imagem .small_infos .idade{
	font-size: 15px;
}

#personagens .blocos .box_conteudo[data-etapa='0'] .imagem .small_infos,
#personagens .blocos .box_conteudo[data-etapa='1'] .imagem .small_infos{
	overflow: hidden;
	width: 0;
	height: 0;
	display: block;
	transition: none;
	-webkit-transition:  none;
	transition:  none;
}

#personagens .blocos .box_conteudo[data-etapa='2'] .imagem .small_infos{

	transition-delay: .8s;
	overflow: hidden;
	width: 100%;
	height: 100%;
	display: inline-table;
}

#personagens .blocos .box_conteudo .box_textos .linhaBranca{
	padding: 0;
}

#personagens .blocos .box_conteudo .box_textos{
	width: 249px;
	height: auto;
	margin: -53px auto 0 auto;
	padding: 5px;
	border-radius: 7px;
	font-family: 'highway';
	color: #fff;
	text-align: center;
}

#personagens .blocos .box_conteudo[data-etapa='1'] .box_textos{
	transition: all .8s ease-in-out;
	-webkit-transition:  all .8s ease-in-out, -webkit-transform .8s;
	transition:  all .8s ease-in-out, -webkit-transform .8s;
	margin: -83px auto;
}

#personagens .blocos .box_conteudo[data-etapa='2'] .box_textos{
	transition: all .8s ease-in-out;
	-webkit-transition:  all .8s ease-in-out, -webkit-transform .8s;
	transition:  all .8s ease-in-out, -webkit-transform .8s;
	opacity: 0;
}
#personagens .blocos .box_conteudo[data-etapa='2'] .box_textos{
	transition: all .8s ease-in-out;
	-webkit-transition:  all .8s ease-in-out, -webkit-transform .8s;
	transition:  all .8s ease-in-out, -webkit-transform .8s;
}

#personagens .blocos .box_conteudo .box_textos[data-cor='off']{
	background: #6C5CE7;
}

#personagens .blocos .box_conteudo .box_textos[data-cor='feito']{
	background: #009434;
}

#personagens .blocos .box_conteudo .box_textos .nome{
	font-size: 42px;
	border-bottom: 2px solid #fff;
	padding: 2px 0 8px 0px;
}
#personagens .blocos .box_conteudo .box_textos .idade{
	font-size: 21px;
	padding: 4px 0 4px 0;
}

#personagens .blocos .box_conteudo .box_textos .st_branca{
	width: 22px;
	margin: 0 auto;
	height: 0;
	background: url(img/seta_branca.png) no-repeat center center;
}

#personagens .blocos .box_conteudo .box_textos .tickFeito{
    width: 42px;
    height: 42px;
    background: url(img/tick_certo.png) no-repeat;
    position: absolute;
    margin: -20px auto 0 224px;
    display: none;
}

#personagens .blocos .box_conteudo .box_textos[data-cor='feito'] .tickFeito{
	display: block;
}


#personagens .blocos .box_conteudo[data-etapa='1'] .st_branca{
	height: 28px;
}

#personagens .blocos .box_conteudo .descricao{
	width: 260px;
	font-family: 'trf2';
	font-size: 21px;
	color: #000000;
	text-align: center;
	position: relative;
	left: 50%;
	margin: 0px 0 0 -130px;
	overflow: hidden;
	transition: all .8s ease-in-out;
	-webkit-transition:  all .8s ease-in-out, -webkit-transform .8s;
	transition:  all .8s ease-in-out, -webkit-transform .8s;
}

#personagens .blocos .box_conteudo[data-etapa='0'] .descricao{
	opacity: 0;
	height: 0px;
	transition: all .8s ease-in-out;
	-webkit-transition:  all .8s ease-in-out, -webkit-transform .8s;
	transition:  all .8s ease-in-out, -webkit-transform .8s;
}

#personagens .blocos .box_conteudo[data-etapa='1'] .descricao{
	opacity: 1;
	height: auto;
	margin: 100px 0 40px -130px;
}

#personagens .blocos .box_conteudo[data-etapa='2'] .descricao{
	opacity: 0;
	height: 0px;
	margin: 100px 0 0 -130px;
	transition: all .8s ease-in-out;
	-webkit-transition:  all .8s ease-in-out, -webkit-transform .8s;
	transition:  all .8s ease-in-out, -webkit-transform .8s;
}

#personagens .blocos .box_conteudo .box_botoes{
    width: 260px;
    margin: 0 auto 20px auto;
    overflow: hidden;
    text-align: center;
    position: relative;
}

#personagens .blocos .box_conteudo[data-etapa='0'] .box_botoes{
	height: 0px;
}
#personagens .blocos .box_conteudo[data-etapa='1'] .box_botoes{
	transition-delay: 1s;
	height: 44px;
}
#personagens .blocos .box_conteudo[data-etapa='2'] .box_botoes{
	height: 0px;
}

#personagens .blocos .box_conteudo .box_botoes .btns_padroes[data-button='voltar']{
	margin-left: -130px;
}
#personagens .blocos .box_conteudo .box_botoes .btns_padroes[data-button='avancar']{
	margin-left: 6px;
}


#personagens .blocos .box_conteudo .click_rosto{
    position: absolute;
    width: 144px;
    height: 150px;
    background: none;
    border-radius: 100px;
    margin: -349px 0 0 144px;
}

#personagens .blocos .box_conteudo #rosto_1{
	margin: -326px 0 0 144px;
}
#personagens .blocos .box_conteudo #rosto_2{
	margin: -348px 0 0 144px;
}
#personagens .blocos .box_conteudo #rosto_3{
	margin: -317px 0 0 144px;
}

#personagens .blocos .box_conteudo[data-etapa='0'] .click_rosto{
	display: block;
}
#personagens .blocos .box_conteudo[data-etapa='1'] .click_rosto,
#personagens .blocos .box_conteudo[data-etapa='2'] .click_rosto{
	display: none;
}

#personagens .viewport {
    height: 500px;
    width: 100%;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
}

#personagens .overview {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
#personagens .scrollbar{
	position:  absolute;
	width: 10px;
	top:15px;
	right:0px;
	display: none;
}
#personagens .track {
	width:10px;
	height:100%;
	position: relative;
	padding: 0;
	background:#4d4d4d;
}
#personagens .thumb {
	width: 10px;
	height:20px;
	cursor: pointer;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	background:#b3b3b3;
}

#personagens .box_setas{ display: none; }

#personagens .nav_slide{
	position: absolute;
	width: 57px;
	height: 47px;
	top: 50%;
	margin: -28.5px 0 0 0;
	background: url(img/seta_nav.png);
	transition: all .5s ease-in-out;
	-webkit-transition:  all .5s ease-in-out, -webkit-transform .5s;
	transition:  all .5s ease-in-out, -webkit-transform .5s;
}


#personagens .nav_slide[title='ANTERIOR']{
	left: 86px;
	transform: scaleX(-1) scaleY(1);
}

#personagens .nav_slide[title='ANTERIOR']:active{
	transform: scaleX(-.8) scaleY(.8);
}

#personagens .nav_slide[title='PRÓXIMO']{
	transform: scale(1);
	right: 86px;
}

#personagens .nav_slide[title='PRÓXIMO']:active{
	transform: scale(.8);
}

#personagens .marcador{
	left: 50%;
	margin: 0 0 0 -30px;
	top: 5px;
}

#mapa_final{ 
	background: #F8EDD7;
	display: table; 
}

#mapa_final .mapa{
	margin: 0 auto;
	display: table-cell;
    vertical-align: middle;
}

#mapa_final .bt_ampliar{
	width: 41px;
	height: 41px;
}

#mapa_final .bt_ampliar[data-status='off']{
	background: url(img/bt_lupa.png);
}
#mapa_final .bt_ampliar[data-status='on']{
	background: url(img/bt_lupa_menos.png);
}

#mapa_final .mapa .bt_ampliar{
	position: absolute;
}

#mapa_final .zoom_img{
	position: relative;
	width: 846px;
	height: 100%;
	background: #2A8CB4 url(../assets/images/mapa.png) no-repeat center center;
}

#mapa_final .box_amplia{
	left: 0;
    top: 0;
}

#mapa_final .box_amplia .bt_ampliar{
	position: absolute;
	top: 46px;
	left: 1px;
}

#atividade .atvs_bl_texto{
	width: 264px;
	height: auto;
	margin: 82px auto 0 auto;
	text-align: center;
}

#atividade .atvs_bl_texto p{
	font-family: 'trf2';
	font-size: 14px;
	color: #000000;
}

#atividade .atvs_bl_drop{
    width: 260px;
    height: 37px;
    margin: 20px auto 0 auto;
    display: flex;
    text-align: center;
}

#atividade .pecas{
	width: 43px;
	height: 37px;
	text-align: center;
	color: #fff;
	font-family: 'highway';
}

#atividade .pecas[data-tipo='neutro']{
	background: url(img/campo_neutro.png) no-repeat center center;
}
#atividade .pecas[data-tipo='certo']{
	background: url(img/campo_certo.png) no-repeat center center;
}
#atividade .pecas[data-tipo='errado']{
	background: url(img/campo_errado.png) no-repeat center center;
}

#atividade .atvs_bl_drop[data-cor='0'] .pecas[data-tipo='vazio'],
#atividade .atvs_bl_drag[data-cor='0'] .pecas[data-tipo='vazio']{
	background: url(img/campo_vazio.png) no-repeat center center;
}
#atividade .atvs_bl_drop[data-cor='1'] .pecas[data-tipo='vazio'],
#atividade .atvs_bl_drag[data-cor='1'] .pecas[data-tipo='vazio']{
	background: url(img/campo_vazio_1.png) no-repeat center center;
}
#atividade .atvs_bl_drop[data-cor='2'] .pecas[data-tipo='vazio'],
#atividade .atvs_bl_drag[data-cor='2'] .pecas[data-tipo='vazio']{
	background: url(img/campo_vazio_2.png) no-repeat center center;
}
#atividade .atvs_bl_drop[data-cor='3'] .pecas[data-tipo='vazio'],
#atividade .atvs_bl_drag[data-cor='3'] .pecas[data-tipo='vazio']{
	background: url(img/campo_vazio_3.png) no-repeat center center;
}

#atividade .atvs_bl_drag{
	width: 100%;
	height: 194px;
	margin: 18px auto 0 auto;
}

#atividade .atvs_bl_drag[data-cor='0']{
	background: #EDD89D;
	border-top: 2px solid #BCAB7D;
	border-bottom: 2px solid #BCAB7D;
}
#atividade .atvs_bl_drag[data-cor='1']{
	background: #4ECC9E;
	border-top: 2px solid #318469;
	border-bottom: 2px solid #318469;
}
#atividade .atvs_bl_drag[data-cor='2']{
	background: #E56A6A;
	border-top: 2px solid #A04B4B;
	border-bottom: 2px solid #A04B4B;
}
#atividade .atvs_bl_drag[data-cor='3']{
	background: #65A8D6;
	border-top: 2px solid #365975;
	border-bottom: 2px solid #365975;
}

#atividade .atvs_bl_drag .box_drag{
    width: 290px;
    height: 175px;
    margin: 10px auto 0 auto;
}

#atividade .pecas.drag{
    display: inline-block;
    cursor: pointer;
    text-decoration: none;
    margin: 0 14px 2px 15px;
}

#atividade .pecas p{
    margin: 7px auto;
}

#atividade .atvs_bl_drop .seta_preta{
	width: 29px;
	height: 100%;
	background: url(img/seta_preta.png) no-repeat center center;
}

#atividade .btns_padroes{
	left: 50%;
    margin: 18px 0 0 -68.5px;
}

.atvs_bl_drag .viewport {
    height: 190px;
    width: 290px;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
}
.atvs_bl_drag .overview {
	position: absolute;
	left: 0;
	top: 0;
}
.atvs_bl_drag .scrollbar{
    position: absolute;
    width: 10px;
    top: 233px;
    right: 50%;
    margin: 0 -145px 0px 0;
    display: none;
}
.atvs_bl_drag .track {
	width:10px;
	height:100%;
	position: relative;
	padding: 0;
	background:rgba(0, 0, 0, 0.36);
}
.atvs_bl_drag .thumb {
	width: 10px;
	height:20px;
	cursor: pointer;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	background:rgba(0, 0, 0, 0.4117647058823529);
}






#stage #interatividade .credito.grande.bg{
	top: 200px;
	right: -214px;
	width: 510px;
	height: 95px; 
	background: -moz-linear-gradient(top, rgba(0,0,0,0) 32%, rgba(0,0,0,0.8) 100%);
	background: -webkit-linear-gradient(top, rgba(0,0,0,0) 32%,rgba(0,0,0,0.8) 100%);
	background: linear-gradient(to bottom, rgba(0,0,0,0) 32%,rgba(0,0,0,0.8) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#cc000000',GradientType=0 );
}

#stage #interatividade .credito.grande.bg small{
	bottom: 17px;
	right: 75px;
	color: #fff;
}

/*ESTRUTURA SCROLL
#stage #interface .lateral .viewport {
	height:400px;
	width:200px;
	overflow: hidden;
	position: absolute;
	left:0;
	top:15px;
}
#stage #interface .lateral .overview {
	position: absolute;
	left: 0;
	top: 0;
}
#stage #interface .lateral .scrollbar{
	position:  absolute;
	width: 10px;
	top:15px;
	right:0px;
}
#stage #interface .lateral .track {
	width:10px;
	height:100%;
	position: relative;
	padding: 0;
	background:#4d4d4d;
}
#stage #interface .lateral .thumb {
	width: 10px;
	height:20px;
	cursor: pointer;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	background:#b3b3b3;
}*/