@font-face {
  font-family: 'myriadpro';
  src: url('fonts/myriadpro_regular.eot');
  src: url('fonts/myriadpro_regular.ttf');
}
@font-face {
  font-family: 'myriadpro';
  src: url('fonts/myriadpro_semibold.eot');
  src: url('fonts/myriadpro_semibold.ttf');
  font-weight: bold;
}
@font-face {
  font-family: 'myriadpro';
  src: url('fonts/myriadpro_it.eot');
  src: url('fonts/myriadpro_it.ttf');
  font-style: italic;
}
@font-face {
  font-family: 'myriadpro';
  src: url('fonts/myriadpro_semiboldit.eot');
  src: url('fonts/myriadpro_semiboldit.ttf');
  font-weight: bold;
  font-style: italic;
}

#stage .credito.grande {
    top: 270px;
    right: -24%;
    width: 400px;
    height: auto;
}

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

.bg_intro{ background: url(img/bg_pc.jpg) no-repeat 0 0; }

button{ background: none; border: none; cursor: pointer; }

#btBaixarAnexos{ 
	background: url(img/bt_baixar_anexos.png) no-repeat 0 0;
	background-size: 100%;
	width:84px;
	height:32px;
	position: absolute;
	bottom: 18px;
	right: 24px;
	text-indent: -5000px;
}
#btCamera{ 
	background: url(img/bt_camera.png) no-repeat 0 0;
	background-size: 100%;
	width:50px;
	height:51px;
	position: absolute;
	top: 38px;
    right: 12px;
	text-indent: -5000px;
}

#celular{ 
	background: url(img/celular.png) no-repeat 0 0;
	width:572px;
	height:585px;
	position: absolute;
	top: 18px;
	left: 97px;
}
#celular .screen{ 
	position: absolute;
	width:309px;
	height:428px;
	left: 140px;
	top: 63px;
}
#celular .screen p{ 
	padding:5px 10px 5px 16px;
	font-family: 'myriadpro';
	font-size: 14px;
	line-height: 14px;
	color: #000;
}
#celular .screen p b, #celular .screen p strong{ 
	font-family: 'myriadpro';
    font-weight: bold;
}
#celular .screen p strong{ 
	width: 220px;
    display: block;
}
#celular #email .anexo{ 
	background: url(img/icon_anexo.png) no-repeat center top;
	position: absolute;
	width:200px;
	height:170px;
	top: 125px;
	left: 50%;
	margin-left: -100px;
}
#celular #email .anexo label{ 
	position: absolute;
	bottom: 0; 
	left: 0;
	text-align: center;
	font-family: 'myriadpro';
	font-size: 24px;
    line-height: 26px;
    color: #2f95bd;
    width: 100%;
}
#celular #main{ background: url(img/screen_apps.png) no-repeat 0 0; }
#celular #email{ background: url(img/screen_email.png) no-repeat 0 0; padding-top: 38px; height:390px;  }
#celular #questionario{ background: url(img/screen_questionario.png) no-repeat 0 0; }

#celular #questionario > p:first-of-type{ 
	margin-top: 8px;
}
#celular #questionario p{ 
	font-size: 14px;
	line-height: 16px;
}
#celular #questionario ul li{ 
	background:rgba(55,147,184,.72);
	margin: 9px 0 0 20px;
    border-radius: 7px 0 0 7px;
    padding-left: 20px;
    position: relative;
    list-style: none;
    display: block;
    cursor: pointer;
}
#celular #questionario ul li[data-selected=true]{ background:rgba(255,192,40,.72); }
#celular #questionario ul li[data-ok=true]{ background:rgba(101,204,32,.72); }
  
#celular #questionario ul li span{ 
	position: absolute;
	font-family: 'myriadpro';
	font-size: 17px;
	font-weight: bold;
    top: 4px;
    left: 10px;
}
#celular #questionario ul li .ico-check{ 
	background: url(img/icon_check.png) no-repeat 0 0;
	background-size: 100%;
	position: absolute;
    bottom: -4px;
    left: 5px;
	width: 22px;
    height: 18px;
	display: none;
}
#celular #questionario ul li[data-ok=true] .ico-check{ display: block; }

#celular #questionario .filtro{ 	
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(19,58,71,.9);
}
#celular #questionario .filtro blockquote{ 	    
    background: #e1e2e1;
    width: 210px;
    position: absolute;
    top: 150px;
    left: 51px;
    border-radius: 6px;
    display: table;
    text-align: center;
    padding: 10px 0;
}

#celular #questionario button{ 
	width:110px;
	height:35px;
	position: absolute;
	bottom: 10px;
	text-indent: -5000px;
	background-size: 100%;
}
#btnRefazerEntrevista{ 
	background: url(img/bt_refazer_entrevistas.png) no-repeat 0 0;
	left: 50px;
}
#btnSalvarInformacoes{ 
	background: url(img/bt_salvar_informacoes.png) no-repeat 0 0;
	right: 30px;
}
#celular #questionario #btnX{ 
	background: url(img/bt_x_azul.png) no-repeat 0 0;
	background-size: 100%;
    width: 25px;
    height: 25px;
    right: -12px;
    bottom: auto;
    top: -11px;
}

#celular #mao{ 
	position: absolute;
	width:433px;
	height:308px;
	background: url(img/dedo.png) no-repeat 0 0;
}
#celular #lockscell{ 
	position: absolute;
	width:100%;
	height:100%;
}

#vinheta .bg_aviao{ background: url(img/bg_trans_aviao.jpg) no-repeat 0 0; }
#vinheta .bg_barco{ background: url(img/bg_trans_barco.jpg) no-repeat 0 0; }

#vinheta .bg_aviao .aviao{ 
	background: url(img/aviao.png) no-repeat 0 0;
	width:162px;
	height:65px;
	position: absolute;
}
#vinheta .bg_barco .barco{ 
	background: url(img/barco.png) no-repeat 0 0;
	width:217px;
	height:87px;
	position: absolute;
	top: 400px;
}

#tela1{ background: url(img/tela1.jpg) no-repeat 0 0; top: 0; position: absolute; }
#tela2{ background: url(img/tela2.jpg) no-repeat 0 0; top: 0; position: absolute; }
#tela3{ background: url(img/tela3.jpg) no-repeat 0 0; top: 0; position: absolute; }

#cenarios .setas{
	background: url(img/setas.png) no-repeat;
	width: 35px;
	height:104px;
	position: absolute;
	top: 50%;
	margin-top: -52px;
	text-indent: -5000px;
}
#cenarios .setas[data-status=off]{ cursor: auto; }

#cenarios #stA{ left: 25px; background-position: 0 0;}
#cenarios #stA[data-status=off]{ background-position:-82px 0;}
#cenarios #stP{ right: 25px; background-position:-40px 0;}
#cenarios #stP[data-status=off]{ background-position:-122px 0;}

#cenarios .ops{
	position: absolute;
	text-indent: -5000px;
}
#cenarios .ops .ico-target{
	position: absolute;
	width: 33px; 
	height:33px;
	top: 50%;
	left: 50%;
	margin: -16px 0 0 -16px;
	transform-origin: center center;
	background: url(img/destaque.png) no-repeat 0 0;
	-webkit-animation: pulse 2s linear infinite;
	animation: pulse 2s linear infinite;
}
#cenarios .ops[data-status=visited] .ico-target{
	background: url(img/destaque_visited.png) no-repeat 0 0;
}

@-webkit-keyframes pulse { 0% { transform: scale(1); } 50% { transform:  scale(1.2); } 100% { transform:  scale(1); } }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform:  scale(1.2); } 100% { transform:  scale(1); } }

#tela1 #tela1_op1{ width: 158px; height:218px; left: 317px; top: 230px; }     
#tela1 #tela1_op1 .ico-target{ margin-top: 50px; }
#tela1 #tela1_op2{ width: 109px; height: 79px; left: 608px; top: 468px; }
#tela1 #tela1_op3{ width: 103px; height: 54px; left: 587px; top: 306px; }

#tela2 #tela2_op1{ width: 287px; height:92px; left: 94px; top: 385px;}     
#tela2 #tela2_op1 .ico-target{ margin-top: -2px; }
#tela2 #tela2_op2{ width: 116px; height: 103px; left: 367px; top: 188px; }
#tela2 #tela2_op2 .ico-target{ margin-top: -23px; }
#tela2 #tela2_op3{ width: 195px; height: 74px; left: 546px; top: 209px; }   
#tela2 #tela2_op3 .ico-target{ margin-top: -40px; }

#tela3 #tela3_op1{ width: 242px; height:93px; left: 272px; top: 458px; }     
#tela3 #tela3_op1 .ico-target{ margin-left: -9px; }
#tela3 #tela3_op2{ width: 354px; height: 235px; left: 1px; top: 0px; }  
#tela3 #tela3_op2 .ico-target{ margin-top: -50px; }
#tela3 #tela3_op3{ width: 110px; height: 111px; left: 688px; top: 355px; }  
#tela3 #tela3_op3 .ico-target{ margin-left: -30px; margin-top: 0px; }

#camera .filtro{ background: #fff; }
#camera .ico-camera-alvo{
	background: url(img/icon_camera_alvo.png) no-repeat 0 0;
	width: 181px;
	height:181px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -90px 0 0 -90px;
	text-indent: -5000px;
}

#dialogos .box{
	background: url(img/bg_dialogo.png) no-repeat 0 0;
	width: 626px;
	height:125px;
	position: absolute;
	right: 40px;
	bottom: 40px;
}
#dialogos .box .psg{
	width: 156px;
	height:156px;
	position: absolute;
	left: -115px;
	top: -20px;
}
#dialogos .box .psg[data-personagem=psg_1]{ background: url(img/psg_1.png) no-repeat 0 0; }
#dialogos .box .psg[data-personagem=psg_2]{ background: url(img/psg_2.png) no-repeat 0 0; }
#dialogos .box .psg[data-personagem=psg_3]{ background: url(img/psg_3.png) no-repeat 0 0; }

#dialogos .box blockquote{
	width: 500px;
	height:110px;
	position: absolute;
	right: 45px;
	top: 8px;
	display: table;
}
#dialogos .box blockquote p{
	display: table-cell;
	vertical-align: middle;
	font-family: 'myriadpro';
	font-size: 20px;
    line-height: 24px;
    color: #000;
}

#dialogos .setas{
	background: url(img/setas.png) no-repeat;
	width: 25px;
	height:60px;
	position: absolute;
	top: 50%;
	margin-top: -30px;
	text-indent: -5000px;
}
#dialogos .setas[data-status=off]{ cursor: auto; }

#dialogos #stmA{ left: 45px; background-position: -11px bottom;}
#dialogos #stmA[data-status=off]{ background-position:-94px bottom;}
#dialogos #stmP{ right: 12px; background-position:-40px bottom;}
#dialogos #stmP[data-status=off]{ background-position:-122px bottom;}


#dialogos #btFecharDialogo{
	background: url(img/bt_x.png) no-repeat 0 0;
	width: 41px;
	height:41px;
	position: absolute;
	top: -18px;
	right: -13px;
	text-indent: -5000px;
}

#final{ background: url(img/bg_pc_final.jpg) no-repeat 0 0; }
#final .thumb{
	width: 146px;
	height:107px;
	position: absolute;
	left: 400px;
    top: 275px;
}
#final .thumb[data-picture=final0]{ background: url(img/final_1.png) no-repeat 0 0; }
#final .thumb[data-picture=final1]{ background: url(img/final_2.png) no-repeat 0 0; }
#final .thumb[data-picture=final2]{ background: url(img/final_3.png) no-repeat 0 0; }

#final #btReiniciar{
	background: url(img/bt_reiniciar.png) no-repeat 0 0;
	width: 133px;
	height:36px;
	position: absolute;
	bottom: 25px;
	left: 50%;
	margin-left: -67px;
	text-indent: -5000px;
}