body{margin: 0px; padding: 0px;}
.hero{width: 100%; height: 100vh; background-image: url(../images/sky.jpg); background-size: cover; background-position: center; position: relative; overflow-x: hidden;}
.highway{display: block; height: 200px; width: 500%; background-image:url(../images/road.jpg); background-repeat: repeat-x; position: absolute; bottom: 0px; left: 0px; right: 0px; z-index: 1; animation: highway 5s linear infinite; } 
@keyframes highway
{
		100%{
			transform: translateX(-3400px);
		}
}

.city
{
	height: 250px;
	width:  500%;
	background-image:url(../images/city.png);  
	position: absolute;
	bottom: 200px;
	left: 0px;
	right: 0px;
	display: block;
	z-index: 1;
	background-repeat: repeat-x;
	animation: city 20s linear infinite;  
}


@keyframes city
{
		100%{
			transform: translateX(-3400px);
		}
}


.car
{
	width:  520px;
	left: 50%;
	bottom: 110px;
	transform: translateX(-50%);
	position: absolute;
	z-index: 2;
}

.car img
{
	width: 100%;
	animation: car 1s linear infinite;  
}

@keyframes car
{
		100%{
			transform: translateY(-1px);
		}

		50%{
			transform: translateY(1px);
		}

		0%{
			transform: translateY(-1px);
		}
}

.wheel
{
	left: 50%;
	bottom: 178px;
	transform: translateX(-50%);
	position: absolute;
	z-index: 1;

}

.wheel img
{
	width: 72px;
	height:  72px;
	animation: wheel 1s linear infinite 
}

.back-wheel
{
	left: -165px;
	position: absolute;
}

.front-wheel
{
	left: 160px;
	position: absolute;
}

@keyframes wheel
{
		100%{
			transform: rotate(360deg);		
		}
}