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

/*=====vehicles & tyres general classes======*/
.tyreWrapper{
	width:100%;
	position:absolute;
}
.tyres{
	float:left;
	animation:rotation;
	animation-iteration-count:infinite;
	animation-direction:normal;
	animation-timing-function:linear;
	-webkit-animation:rotation;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-direction:normal;
	-webkit-animation-timing-function:linear;
	-moz-animation:rotation;
	-moz-animation-iteration-count:infinite;
	-moz-animation-direction:normal;
	-moz-animation-timing-function:linear;
	-o-animation:rotation;
	-o-animation-iteration-count:infinite;
	-o-animation-direction:normal;
	-o-animation-timing-function:linear;
}
/*(((((((TIR)))))))))*/
.tir{
	background-size:100% 100%;
	position:absolute;
	width:250px;
	height:70px;
	margin-top: 56px;
}
    .tir .tyres {        
        background: url(../../trafimg/tyre.png);
        background-size: 100% 100%;
        width: 20px;
        height: 20px;
        animation-duration: 0.3s;
        -webkit-animation-duration: 0.3s;
        -moz-animation-duration: 0.3s;
        -o-animation-duration: 0.3s;
    }

.tir #tyre0{
	margin-left: 19px;
    margin-top: 54px;
}
.tir #tyre1{
	margin-left: 49px;
    margin-top: 54px;
}
.tir #tyre2{
	margin-left:172px;
	margin-top: -21px;
}
.tir #tyre3{
	margin-left:195px;
	margin-top: -21px;
}
.tir #tyre4{
	margin-left:218px;
	margin-top: -21px;
}
/*this must be always display:none*/
.tirText{
	display:none;
}
/*Div on the tir*/
.tirLogo{
	width: 187px;
    height: 48px;
	border-top:1px solid #666;
    margin-left: 62px !important;
	margin-top:0px !important;
    color: #fff !important;
    text-align: center !important;
    /*padding-top: 10px !important;*/
    font-size: xx-large !important;
    background: #192648 !important;
    position: absolute !important;
	display:block !important;
}
/*((((((((AUTO1))))))))*/
.auto1{
	background-image:url(../../trafimg/auto1red.png);
	background-size:100% 100%;
	position:absolute;
	width:120px;
	height:48px;
	margin-top: 85px;
}
.auto1 .tyres{
	background:url(../../trafimg/auto1tyre.png);
	background-size:100% 100%;
    width: 19px;
    height: 19px;
	animation-duration:0.3s;
	-webkit-animation-duration:0.3s;
	-moz-animation-duration:0.3s;
	-o-animation-duration:0.3s;
}
.auto1 #tyre0{
	margin-left: 13px;
    margin-top: 27px;
}
.auto1 #tyre1{
	margin-left: 52px;
    margin-top: 27px;
}
/*((((((((AUTO2))))))))*/
.auto2{
	background-size:100% 100%;
	position:absolute;
	width:120px;
	height:40px;
	margin-top: 90px;
}
.auto2 .tyres{
	background:url(../../trafimg/auto2tyre.png);
	background-size:100% 100%;
    width: 19px;
    height: 19px;
	animation-duration:0.1s;
	-webkit-animation-duration:0.1s;
	-moz-animation-duration:0.1s;
	-wo-animation-duration:0.1s;
}
.auto2 #tyre0{
	margin-left: 16px;
    margin-top: 22px;
}
.auto2 #tyre1{
	margin-left: 52px;
    margin-top: 22px;
}
/*((((((((AUTO3))))))))*/
.auto3{
	background-size:100% 100%;
	position:absolute;
	width:93px;
	height:37px;
	margin-top: 93px;
}
.auto3 .tyres{
	background:url(../../trafimg/auto3tyre.png);
	background-size:100% 100%;
    width: 17px;
    height: 17px;
	animation-duration:0.1s;
	-webkit-animation-duration:0.1s;
	-moz-animation-duration:0.1s;
	-o-animation-duration:0.1s;
}
.auto3 #tyre0{
	margin-left: 8px;
    margin-top: 20px;
}
.auto3 #tyre1{
	margin-left: 46px;
    margin-top: 20px;
}
/*((((((((AUTO4))))))))*/
.auto4{
	background-size:100% 100%;
	position:absolute;
	width:93px;
	height:38px;
	margin-top: 92px;
}
.auto4 .tyres{
	background:url(../../trafimg/auto4tyre.png);
	background-size:100% 100%;
    width: 15px;
    height: 15px;
	animation-duration:0.7s;
	-webkit-animation-duration:0.7s;
	-moz-animation-duration:0.7s;
	-o-animation-duration:0.7s;
}
.auto4 #tyre0{
	margin-left: 12px;
    margin-top: 23px;
}
.auto4 #tyre1{
	margin-left: 44px;
    margin-top: 23px;
}
/*====tyres rotation====*/
@-o-keyframes rotation{
	0%{-o-transform:rotate(0deg)}
	100%{-o-transform:rotate(-360deg)}
}
@-moz-keyframes rotation{
	0%{-moz-transform:rotate(0deg)}
	100%{-moz-transform:rotate(-360deg)}
}
@-webkit-keyframes rotation{
	0%{-webkit-transform:rotate(0deg)}
	100%{-webkit-transform:rotate(-360deg)}
}
@keyframes rotation{
	0%{transform:rotate(0deg);-ms-transform:rotate(0deg)}
	100%{transform:rotate(-360deg);-ms-transform:rotate(0deg)}
}