.hero
{
	height: 100vh;
	width: 100%;
	background-image: url(../images/animation/sky.jpg);
	background-size: cover;
	background-position: center;
	position: relative;
	overflow-x: hidden;
}

.highway
{
	height: 200px;
	width: 500%;
	background-image: url(../images/animation/road.jpg);	
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1;
	animation: highway 5s linear infinite;
}
@keyframes highway
{
	100%
	{
		transform: translateX(-3400px);
	}
}

.city
{
	height: 200px;
	width: 500%;
	background-image: url(../images/animation/city.png);	
	position: absolute;
	bottom: 200px;
	left: 0;
	right: 0;
	z-index: 1;
	animation: city 20s linear infinite;
}
@keyframes city
{
	100%
	{
		transform: translateX(-1400px);
	}
}

.car
{	
	width: 400px;
	left: 50%;
	bottom: 100px;		
	position: absolute;	
	z-index: 2;
	transform: translate(-50%);
}
.car img
{
	width: 100%;
	animation: car 1s linear infinite;
}
@keyframes car
{
	100%
	{
		transform: translateY(-1px);
	}
	50%
	{
		transform: translateY(1px);
	}
	0%
	{
		transform: translateY(-1px);
	}
}

.logo
{	
	width: 125px;
	left: 49%;
	bottom: 140px;		
	position: absolute;	
	z-index: 2;
	transform: translate(-50%);
}
.logo img
{
	width: 100%;
	animation: logo 1s linear infinite;
}
@keyframes logo
{
	100%
	{
		transform: translateY(-1px);
	}
	50%
	{
		transform: translateY(1px);
	}
	0%
	{
		transform: translateY(-1px);
	}
}

.wheel
{	
	left: 50%;
	bottom: 178px;		
	position: absolute;	
	z-index: 2;
	transform: translateX(-50%);
}
.wheel img
{
	height: 72px;
	width: 72px;	
	animation: wheel 1s linear infinite;
}
.back-wheel
{
	left: -165px;
	position: absolute;
}
.front-wheel
{
	left: 80px;
	position: absolute;
}
@keyframes wheel
{
	100%
	{
		transform: rotate(360deg);
	}
}