@charset "utf-8";
/* CSS Document */

.Driving-School-Bunbury
{
	height:180px;
	width:100%;
	min-width:1200px;
	background-image:url(city.png);
	background-position:center;
	background-size:cover;	
	position:relative;
	overflow-x:hidden;

}


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

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




@media screen and (max-device-width: 377px){ 

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


.wheel
{
	left:12%;
	bottom:83px;
	transform:translateX(-50%);
	position:absolute;
	z-index:2;
}


}




@media screen and (min-device-width: 378px) and (max-device-width: 799px){ 

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


.wheel
{
	left:20%;
	bottom:83px;
	transform:translateX(-50%);
	position:absolute;
	z-index:2;
}


}



@media screen and (min-device-width: 800px){ 

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

.wheel
{
	left:40%;
	bottom:83px;
	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 img
{
	width:60px;
	height:60px;
	animation: wheel .741s linear infinite;
}

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

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


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

#Bunbury_Driving_School {
	background-color: #000;
	height: 38px;
	width: 100%;
	border-top: 8px solid #2c2f2c;
}