/* CSS - Exemplo carro */
#fundo{
	width:550px; /*largura baseada no tamanho a imagem de fundo.png*/
	height:250px; /*altura baseada no tamanho a imagem de fundo.png*/
	background:url('images/fundo.png') no-repeat; /*aplica fundo.png*/
	overflow:hidden; /*esconde tudo que "estourar" o limite da div*/
	margin:10px auto; /*margem de 10px vertical e automatica na horizontal*/
}

#sol{
	width:84px;
	height:83px;
	background:url('images/sol.png') no-repeat;
	position:relative; /*posição relativa ao elemento pai*/
	animation: animasol 20s linear 0s forwards; /*Anima o sol baseado no keyframes animar sol, de 20 s do tipo linear, com delay de 0s e para o último estado da animação "forwards"*/
}
@keyframes animasol{	
	from{
		left:420px;/*empura o sol para direita*/
		top:15px; /*empura o esol para baixo*/
	}
	to{
		left:150px;		
		top: 105px;
	}
}

#montanhas{
	width:1131px;
	height:95px;
	background:url('images/montanhas.png') no-repeat;
	position:relative;
	top:-28px;
	right:565px;
	animation: animamontanha 15s linear 0s infinite;

}
@keyframes animamontanha{	
	from{
		right:0px;	
	}
	to{
		right:565px;
	}
}
#grama{
	width:1134px;
	height:31px;
	background:url('images/grama.png') no-repeat;
	position:relative;
	top:-59px;
	animation: animagramaeestrada 3s linear 0s infinite;/*anima o elemnto grama, usando o keyframe do animar gramaeestrada com 3s de duração, do tipo linear, com delay 0 e laço infinito*/
}

#estrada{
	width:1135px;
	height:100px;
	background:url('images/estrada.png') no-repeat;
	position:relative;
	top:-59px;	
	animation: animagramaeestrada 2s linear 0s infinite;/*anima o elemnto estrada, usando o keyframe do animar gramaeestrada com 2s de duração, do tipo linear, com delay 0 e laço infinito*/
}
@keyframes animagramaeestrada{	
	from{
		left:-2px;/*puxa a grama para esquerda*/
	}
	to{
		left:-568px;/*puxa a grama para esquerda*/
	}
}

#carcaca{
	width:285px;
	height:125px;
	background:url('images/carcaca.png') no-repeat;
	position:relative;
	left:120px;
	bottom:220px; /*empura o elemento para cima*/
	z-index:1; /*traz o elemnto para frente*/ 
	
}

.rodas{
	width:84px;
	height:84px;
	background:url('images/roda.png') no-repeat;
	position:relative;	
	animation: girar .6s linear 0s infinite;
	
}
@keyframes girar{	
	from{
		transform:rotate(0deg) scale(0.8);
	}
	to{
		transform:rotate(360deg) scale(0.8);
	}
}

#dianteira{
	top:-275px;
	left:295px;
}

#traseira{
	top:-359px;
	left:155px;
}



