@font-face {
	font-family: 'luckiestguy';
	src: url('fonts/luckiestguy.eot');
	src: url('fonts/luckiestguy.ttf');
}
@font-face {
	font-family: 'myriadpro_bold';
	src: url('fonts/myriadpro_bold.eot');
	src: url('fonts/myriadpro_bold.ttf');
}
@font-face {
	font-family: 'myriadpro';
	src: url('fonts/myriadpro_regular.eot');
	src: url('fonts/myriadpro_regular.ttf');
}

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

#stage #interatividade .credito small{
	text-shadow: rgba(0,0,0,.5) 0px 0px 1px;
}

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

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

#splash .plataforma{
	position: absolute;
	width: 561px;
	height: 122px;
	background: url(img/plataforma.png) no-repeat center bottom;
	bottom: 112px;
    left: 126px;
}
#splash .plataforma .carro{
	position: absolute;
	bottom: 60px;
    left: 50%;
}
#splash .plataforma .carro[data-carro=vinheta1]{ width: 590px; height: 350px; background: url(img/vinheta1.png) no-repeat 0 0; margin-left: -315px; }
#splash .plataforma .carro[data-carro=vinheta2]{ width: 596px; height: 350px; background: url(img/vinheta2.png) no-repeat 0 0; margin-left: -308px; }
#splash .plataforma .carro[data-carro=vinheta3]{ width: 616px; height: 350px; background: url(img/vinheta3.png) no-repeat 0 0; margin-left: -308px; }
#splash .plataforma .carro[data-carro=vinheta4]{ width: 554px; height: 350px; background: url(img/vinheta4.png) no-repeat 0 0; margin-left: -252px; }
#splash .plataforma .carro[data-carro=vinheta5]{ width: 542px; height: 350px; background: url(img/vinheta5.png) no-repeat 0 0; margin-left: -263px; }

#splash #btIniciar{	
	position: absolute;
	width: 219px;
	height: 81px;
	bottom: -2px;
    left: 50%;
	text-indent: -5000px;
	margin-left:-109.5px;
	background: url(img/bt_iniciar.png) no-repeat 0 0;
}
#splash .engineStart{
	-webkit-animation: engineStart .02s infinite;
	animation:         engineStart .02s infinite;
}

@-webkit-keyframes engineStart { 
	0% { transform: translate(0px, 0px); } 25% { transform: translate(-0.5px, 0.5px); }  50% { transform: translate(0.5px, -0.5px); }  
	75% { transform: translate(-0.5px, -0.5px); }  100% { transform: translate(0px, 0px); } 
}
@keyframes engineStart { 
	0% { transform: translate(0px, 0px); } 25% { transform: translate(-0.5px, 0.5px); }  50% { transform: translate(0.5px, -0.5px); }  
	75% { transform: translate(-0.5px, -0.5px); }  100% { transform: translate(0px, 0px); } 
}

#splash .letreiro{
	position: absolute;
	width: 223px;
	height: 82px;
	background: url(img/bg_titutlo_vinheta.png) no-repeat 0 0;
	top: 11px;
    right: 0px;
	text-indent: -5000px;
}

#splash .numero_fase{
	position: absolute;
	width: 178px;
	height:105px;
	background: url(img/bg_num_vinheta.png) no-repeat 0 0;
	top: 97px;
    right: 0px;
}
#splash .numero_fase #numeroFase{
	position: absolute;
	width: 89px;
	height:89px;
	line-height:98px;
	top: 7px;
    left: 7px;	
	font-family: 'myriadpro_bold';
	color: #e0e700;
	font-size: 64px;
	text-shadow: rgba(224,231,0,.5)  1px  1px 15px,
				 rgba(224,231,0,.5)  1px -1px 15px,
				 rgba(224,231,0,.5) -1px -1px 15px,
				 rgba(224,231,0,.5) -1px  1px 15px;
	text-align: center;
}
#splash .numero_fase .agulha{
	position: absolute;
	width: 46px;
	height:46px;
	border-radius:46px;
	top: 7px;
    left: 99px;
	background: url(img/agulha_vinheta.png) no-repeat 0 0;
}

#jogo[data-fase=fase1]{ background: url(img/fase1.png) no-repeat 0 0; }
#jogo[data-fase=fase2]{ background: url(img/fase2.png) no-repeat 0 0; }
#jogo[data-fase=fase3]{ background: url(img/fase3.png) no-repeat 0 0; }
#jogo[data-fase=fase4]{ background: url(img/fase4.png) no-repeat 0 0; }
#jogo[data-fase=fase5]{ background: url(img/fase5.png) no-repeat 0 0; }

#jogo header{
	width: 800px;
	height:70px;
}
#jogo .placar{
	position: absolute;
	top: 9px;
    right: -3px;
	width: 347px;
	height:57px;
	background: url(img/bg_pontos_fase.png) no-repeat 0 0;
}
#jogo .placar #alvo, #jogo .placar #pontos, #jogo .placar #total{
	position: absolute;
	font-family: 'myriadpro_bold';
	font-size: 26px;
	text-align: center;
}
#jogo .placar #alvo{
	top: 4px;
    left:4px;
	width: 48px;
	height:48px;
	line-height:51px;
	color: #fff72e;
    letter-spacing: -2px;
	text-indent: -7px;
}
#jogo .placar .alvo_brilho{
	position: absolute;
	top: -16px;
    left: -15px;
	width: 90px;
	height:88px;
	background: url(img/brilho.png) no-repeat 0 0;
}


#jogo .placar #pontos, #jogo .placar #total{
	top: 7px;
	width: 55px;
	height:41px;
	line-height:44px;
	color: #fff;
}
#jogo .placar #pontos{
    right:71px;
}
#jogo .placar #total{
	right:11px;
}
#jogo .placar .agulha{
	position: absolute;
	width: 22px;
	height:22px;
	border-radius:22px;
	top:  6px;
    left:55px;
	background: url(img/agulha_fase.png) no-repeat 0 0;
}

#jogo .pistas {
	position: absolute;
	width: 800px;
	height:530px;
    bottom: 0;
    left: 0;
}

#jogo .pistas .carro{
	position: absolute;
	height: 126px;
	cursor:pointer;
}
#jogo .pistas .carro[data-pista=p1]{ top: -13px; }
#jogo .pistas .carro[data-pista=p2]{ top: 118px; }
#jogo .pistas .carro[data-pista=p3]{ top: 249px; }
#jogo .pistas .carro[data-pista=p4]{ top: 389px; }

#jogo .pistas .carro[data-status=off]{ background: url(img/modelo_carros.png) no-repeat; }
#jogo .pistas .carro[data-status=on]{ background: url(img/modelo_carros_brilho.png) no-repeat; }

#jogo .pistas .carro[data-direcao=right]{ }
#jogo .pistas .carro[data-direcao=left]{ transform: rotate(180deg); }
#jogo .pistas .carro[data-direcao=left] label, #jogo .pistas .carro[data-direcao=left] .star{ transform: rotate(180deg); }

#jogo .pistas .carro[data-cor=amarelo][data-tipo=grande][data-modelo=m0]{ background-position: -24px -24px; width: 280px; }
#jogo .pistas .carro[data-cor=amarelo][data-tipo=grande][data-modelo=m1]{ background-position:-304px -24px; width: 257px; }
#jogo .pistas .carro[data-cor=amarelo][data-tipo=normal][data-modelo=m0]{ background-position:-561px -24px; width: 214px; }
#jogo .pistas .carro[data-cor=amarelo][data-tipo=normal][data-modelo=m1]{ background-position:-775px -24px; width: 209px; }
#jogo .pistas .carro[data-cor=amarelo][data-tipo=normal][data-modelo=m2]{ background-position:-983px -24px; width: 211px; }

#jogo .pistas .carro[data-cor=azul][data-tipo=grande][data-modelo=m0]{ background-position: -24px -197px; width: 280px; }
#jogo .pistas .carro[data-cor=azul][data-tipo=grande][data-modelo=m1]{ background-position:-304px -197px; width: 257px; }
#jogo .pistas .carro[data-cor=azul][data-tipo=normal][data-modelo=m0]{ background-position:-561px -197px; width: 214px; }
#jogo .pistas .carro[data-cor=azul][data-tipo=normal][data-modelo=m1]{ background-position:-775px -197px; width: 209px; }
#jogo .pistas .carro[data-cor=azul][data-tipo=normal][data-modelo=m2]{ background-position:-983px -197px; width: 211px; }

#jogo .pistas .carro[data-cor=verde][data-tipo=grande][data-modelo=m0]{ background-position: -24px -371px; width: 280px; }
#jogo .pistas .carro[data-cor=verde][data-tipo=grande][data-modelo=m1]{ background-position:-304px -371px; width: 257px; }
#jogo .pistas .carro[data-cor=verde][data-tipo=normal][data-modelo=m0]{ background-position:-561px -371px; width: 214px; }
#jogo .pistas .carro[data-cor=verde][data-tipo=normal][data-modelo=m1]{ background-position:-775px -371px; width: 209px; }
#jogo .pistas .carro[data-cor=verde][data-tipo=normal][data-modelo=m2]{ background-position:-983px -370px; width: 211px; }

#jogo .pistas .carro[data-cor=roxo][data-tipo=grande][data-modelo=m0]{ background-position: -24px -544px; width: 280px; }
#jogo .pistas .carro[data-cor=roxo][data-tipo=grande][data-modelo=m1]{ background-position:-304px -544px; width: 257px; }
#jogo .pistas .carro[data-cor=roxo][data-tipo=normal][data-modelo=m0]{ background-position:-561px -544px; width: 214px; }
#jogo .pistas .carro[data-cor=roxo][data-tipo=normal][data-modelo=m1]{ background-position:-775px -544px; width: 209px; }
#jogo .pistas .carro[data-cor=roxo][data-tipo=normal][data-modelo=m2]{ background-position:-983px -544px; width: 211px; }

#jogo .pistas .carro[data-cor=lilas][data-tipo=grande][data-modelo=m0]{ background-position: -24px -717px; width: 280px; }
#jogo .pistas .carro[data-cor=lilas][data-tipo=grande][data-modelo=m1]{ background-position:-304px -717px; width: 257px; }
#jogo .pistas .carro[data-cor=lilas][data-tipo=normal][data-modelo=m0]{ background-position:-561px -717px; width: 214px; }
#jogo .pistas .carro[data-cor=lilas][data-tipo=normal][data-modelo=m1]{ background-position:-775px -717px; width: 209px; }
#jogo .pistas .carro[data-cor=lilas][data-tipo=normal][data-modelo=m2]{ background-position:-983px -717px; width: 211px; }

#jogo .pistas .carro[data-cor=laranja][data-tipo=grande][data-modelo=m0]{ background-position: -24px -891px; width: 280px; }
#jogo .pistas .carro[data-cor=laranja][data-tipo=grande][data-modelo=m1]{ background-position:-304px -891px; width: 257px; }
#jogo .pistas .carro[data-cor=laranja][data-tipo=normal][data-modelo=m0]{ background-position:-561px -891px; width: 214px; }
#jogo .pistas .carro[data-cor=laranja][data-tipo=normal][data-modelo=m1]{ background-position:-775px -891px; width: 209px; }
#jogo .pistas .carro[data-cor=laranja][data-tipo=normal][data-modelo=m2]{ background-position:-983px -891px; width: 211px; }

#jogo .pistas .carro[data-cor=vermelho][data-tipo=grande][data-modelo=m0]{ background-position: -24px -1064px; width: 280px; }
#jogo .pistas .carro[data-cor=vermelho][data-tipo=grande][data-modelo=m1]{ background-position:-304px -1064px; width: 257px; }
#jogo .pistas .carro[data-cor=vermelho][data-tipo=normal][data-modelo=m0]{ background-position:-561px -1064px; width: 214px; }
#jogo .pistas .carro[data-cor=vermelho][data-tipo=normal][data-modelo=m1]{ background-position:-775px -1064px; width: 209px; }
#jogo .pistas .carro[data-cor=vermelho][data-tipo=normal][data-modelo=m2]{ background-position:-983px -1064px; width: 211px; }


#jogo .pistas .carro label{
	position: absolute;
	text-align: center;
	display: table;
}
#jogo .pistas .carro label span{
	width: 100%;
	height: 100%;
	display: table-cell;
	vertical-align: middle;
	font-family: 'myriadpro_bold';
	font-size: 26px;
	color:#000;
}
#jogo .pistas .carro[data-tipo=grande][data-modelo=m1][data-direcao=right] label span{ font-size: 23px; }
#jogo .pistas .carro[data-tipo=grande][data-modelo=m1][data-direcao=left] label span{ font-size: 23px; }

#jogo .pistas .carro[data-tipo=grande][data-modelo=m0][data-direcao=right] label{ width: 150px; height: 86px; top: 19px; left: 17px; }
#jogo .pistas .carro[data-tipo=grande][data-modelo=m0][data-direcao=right] .star{ top: 39px; left: 70px; }
#jogo .pistas .carro[data-tipo=grande][data-modelo=m1][data-direcao=right] label{ width: 124px; height: 61px; top: 35px; left: 55px; }
#jogo .pistas .carro[data-tipo=grande][data-modelo=m1][data-direcao=right] .star{ top: 41px; left: 91px; }
#jogo .pistas .carro[data-tipo=normal][data-modelo=m0][data-direcao=right] label{ width: 100px; height: 48px; top: 40px; left: 44px; }
#jogo .pistas .carro[data-tipo=normal][data-modelo=m0][data-direcao=right] .star{ top: 40px; left: 68px; }
#jogo .pistas .carro[data-tipo=normal][data-modelo=m1][data-direcao=right] label{ width: 100px; height: 48px; top: 41px; left: 49px; }
#jogo .pistas .carro[data-tipo=normal][data-modelo=m1][data-direcao=right] .star{ top: 39px; left: 72px; }
#jogo .pistas .carro[data-tipo=normal][data-modelo=m2][data-direcao=right] label{ width: 100px; height: 48px; top: 40px; left: 43px; }
#jogo .pistas .carro[data-tipo=normal][data-modelo=m2][data-direcao=right] .star{ top: 39px; left: 66px; }

#jogo .pistas .carro[data-tipo=grande][data-modelo=m0][data-direcao=left] label{ width: 150px; height: 86px; bottom: 19px; left: 17px; }
#jogo .pistas .carro[data-tipo=grande][data-modelo=m0][data-direcao=left] .star{ bottom: 39px; left: 67px; }
#jogo .pistas .carro[data-tipo=grande][data-modelo=m1][data-direcao=left] label{ width: 124px; height: 61px; bottom: 33px; left: 55px; }
#jogo .pistas .carro[data-tipo=grande][data-modelo=m1][data-direcao=left] .star{ bottom: 36px; left: 85px; }
#jogo .pistas .carro[data-tipo=normal][data-modelo=m0][data-direcao=left] label{ width: 100px; height: 48px; bottom: 40px; left: 42px; }
#jogo .pistas .carro[data-tipo=normal][data-modelo=m0][data-direcao=left] .star{ bottom: 39px; left: 63px; }
#jogo .pistas .carro[data-tipo=normal][data-modelo=m1][data-direcao=left] label{ width: 100px; height: 48px; bottom: 39px; left: 49px; }
#jogo .pistas .carro[data-tipo=normal][data-modelo=m1][data-direcao=left] .star{ bottom: 39px; left: 68px; }
#jogo .pistas .carro[data-tipo=normal][data-modelo=m2][data-direcao=left] label{ width: 100px; height: 48px; bottom: 42px; left: 43px; }
#jogo .pistas .carro[data-tipo=normal][data-modelo=m2][data-direcao=left] .star{ bottom: 39px; left: 63px; }

#jogo .pistas .carro .star{
	position: absolute;
	width: 52px;
	height: 46px;
	background: url(img/star.png) no-repeat 0 0;
}

#ranking{ background: url(img/bg_ranking.png) no-repeat 0 0; }

#ranking ul{
	position: absolute;
	top: 37px;
	right: 0;
	width: 480px;	
}
#ranking ul li{
	list-style: none;
	position: relative;
	width: 480px;	
	height: 78px;
	background: url(img/bg_item_ranking.png) no-repeat 0 0;
    margin-bottom: 13px;
}
#ranking ul li:last-of-type{
	list-style: none;
	position: relative;
	width: 338px;	
	height: 78px;
	left:143px;
	background: url(img/bg_final_ranking.png) no-repeat 0 0;
}
#ranking ul li span{
	position: absolute;
	width: 99px;	
	height:49px;
	top: 10px;
	left:70px;
}
#ranking ul li:nth-child(1) span{ background: url(img/item1_ranking.png) no-repeat 0 0; }
#ranking ul li:nth-child(2) span{ background: url(img/item2_ranking.png) no-repeat 0 0; }
#ranking ul li:nth-child(3) span{ background: url(img/item3_ranking.png) no-repeat 0 0; }
#ranking ul li:nth-child(4) span{ background: url(img/item4_ranking.png) no-repeat 0 0; }
#ranking ul li:nth-child(5) span{ background: url(img/item5_ranking.png) no-repeat 0 0; }

#ranking ul li label{
	position: absolute;
	width: 118px;	
	height:54px;
	line-height:54px;
	font-family: 'luckiestguy';
	font-size: 22px;
	color:#e0e700;
	top: 8px;
	left:198px;
	text-align: center;
    letter-spacing: 2px;
}
#ranking ul li:last-of-type label{
	left: 55px;
}
#ranking ul li strong{
	position: absolute;
	width: 165px;	
	height:54px;
	line-height:54px;
	font-family: 'luckiestguy';
	font-size: 22px;
	color:#fff;
	top: 8px;
	right:0px;
	text-align: center;
    letter-spacing: 2px;
}
#ranking #btReiniciar{
	position: absolute;
	width: 244px;
	height: 56px;
	top:326px;
    left:-20px;
	text-indent: -5000px;
	background: url(img/bt_reiniciar.png) no-repeat 0 0;
}
#ranking .carro{
	position: absolute;
	width: 267px;
	height:163px;
	top:137px;
    left:10px;
	background: url(img/animacao_final.png) no-repeat 0 0;
}