/*--- cloud animation ---*/
.road {
	top: 0;
  height: 100%;
  overflow: hidden;
  position: absolute;
  width: 100%;
}
.road .transport {
  position: absolute;  
  margin-left: -200px;
  opacity: 0;
}

.road .transport img {
  position: relative;
}
.road .transport.car-1 {
  top: 1%;
  margin-left: 80%;
  -webkit-transform: scale(0.9);
  -webkit-animation: car-in-out 14s 0.2s infinite linear;
}


.road .transport.auto-1 {
  top: 66%;
  margin-left: 65%;
  -webkit-transform: scale(0.9);
  -webkit-animation: car-in-out 12s 0.1s infinite linear;
}


.road .transport.tempoo-1 {
  top: 5%;
  margin-left: 70%;
  -webkit-transform: scale(0.7);
  -webkit-animation: car-in-out 16s 0.2s infinite linear;
}

.road .transport.bus-1 {
  top: 33%;
  margin-left: 25%;
  -webkit-transform: scale(1);
  -webkit-animation: car-in-out 10s 0s infinite linear;
}

.road .transport.metro-1 {
  bottom: 80px;
  margin-left: 55%;
  -webkit-transform: scale(1);
  -webkit-animation: car-in-out 9s 0.1s infinite linear;
}

.road .transport.car-2 {
  top: 23%;
  margin-left: 55%;
  -webkit-transform: scale(0.9);
  -webkit-animation: car-in-out 9s 0.5s infinite linear;
}


.road .transport.auto-2 {
  top: 55%;
  margin-left: 70%;
  -webkit-transform: scale(0.8);
  -webkit-animation: car-in-out 12s 0.5s infinite linear;
}

.road .transport.tempoo-2 {
  top: 28%;
  margin-left: 30%;
  -webkit-transform: scale(0.7);
  -webkit-animation: car-in-out 16s 0.5s infinite linear;
}

.road .transport.bus-2 {
  top: 2%;
  margin-left: 55%;
  -webkit-transform: scale(0.9);
  -webkit-animation: car-in-out 10s 0.5s infinite linear;
}


.road .transport.metro-2 {
  top: 62%;
  margin-left: 20%;
  -webkit-transform: scale(1);
  -webkit-animation: car-in-out 9s 0.35s infinite linear;
}

.road .transport.car-3 {
  top: 45%;
  margin-left: 25%;
  -webkit-transform: scale(0.9);
  -webkit-animation: car-in-out 14s 1s infinite linear;
}


.road .transport.auto-3 {
  top: 80px;
  margin-left: 50%;
  -webkit-transform: scale(1);
  -webkit-animation: car-in-out 12s 1s infinite linear;
}


.road .transport.tempoo-3 {
  top: 40%;
  margin-left: 15%;
  -webkit-transform: scale(0.7);
  -webkit-animation: car-in-out 16s 1s infinite linear;
}


.road .transport.bus-3 {
  bottom: 80px;
  margin-left: 23%;
  -webkit-transform: scale(1);
  -webkit-animation: car-in-out 10s 0.75s infinite linear;
}


.road .transport.metro-3 {
  top: 25%;
  margin-left: 78%;
  -webkit-transform: scale(1);
  -webkit-animation: car-in-out 9s 0.7s infinite linear;
}

.road .transport.car-4 {
  bottom: 80px;
  margin-left: 0%;
  -webkit-transform: scale(0.9);
  -webkit-animation: car-in-out 14s 1s infinite linear;
}

.road .transport.auto-4 {
  top: 70%;
  margin-left: 1%;
  -webkit-transform: scale(1);
  -webkit-animation: car-in-out 12s 1s infinite linear;
}

.road .transport.tempoo-4 {
  top: 15%;
  margin-left: -22%;
  -webkit-transform: scale(0.7);
  -webkit-animation: car-in-out 16s 1s infinite linear;
}

.road .transport.bus-4 {
  top: 33%;
  margin-left: 10%;
  -webkit-transform: scale(0.9);
  -webkit-animation: car-in-out 10s 1s infinite linear;
}

.road .transport.metro-4 {
  top: 33%;
  margin-left: 0%;
  -webkit-transform: scale(1);
  -webkit-animation: car-in-out 9s 1s infinite linear;
}


.road .transport.car-5 {
  bottom: 10px;
  margin-left: -10%;
  -webkit-transform: scale(0.9);
  -webkit-animation: car-in-out 14s 1s infinite linear;
}

.road .transport.auto-5 {
  top: 40%;
  margin-left: -21%;
  -webkit-transform: scale(1);
  -webkit-animation: car-in-out 12s 1s infinite linear;
}

.road .transport.tempoo-5 {
  bottom: 22%;
  margin-left: 2%;
  -webkit-transform: scale(0.7);
  -webkit-animation: car-in-out 16s 1s infinite linear;
}

.road .transport.bus-5 {
  top: 53%;
  margin-left: -30%;
  -webkit-transform: scale(0.9);
  -webkit-animation: car-in-out 10s 1s infinite linear;
}

.road .transport.metro-5 {
  top: 71%;
  margin-left: -5%;
  -webkit-transform: scale(1);
  -webkit-animation: car-in-out 9s 1s infinite linear;
}

.road .transport.car-6 {
  bottom: 1%;
  margin-left: -22%;
  -webkit-transform: scale(0.9);
  -webkit-animation: car-in-out 14s 1s infinite linear;
}

.road .transport.auto-6 {
  top: 11%;
  margin-left: -22%;
  -webkit-transform: scale(1);
  -webkit-animation: car-in-out 12s 1s infinite linear;
}

.road .transport.tempoo-6 {
  bottom: 11px;
  margin-left: -12%;
  -webkit-transform: scale(0.7);
  -webkit-animation: car-in-out 16s 1s infinite linear;
}

.road .transport.bus-6 {
  top: 1%;
  margin-left: 10%;
  -webkit-transform: scale(0.9);
  -webkit-animation: car-in-out 10s 1s infinite linear;
}

.road .transport.metro-6 {
  top: 21%;
  margin-left: -10%;
  -webkit-transform: scale(1);
  -webkit-animation: car-in-out 9s 1s infinite linear;
}
@-webkit-keyframes car-in-out {
0% {
	opacity: 0;
    left: 0%;
  }
  1% {
	opacity: 0.5;
    left: 1%;
  }
  5% {
	opacity: 1;
    left: 5%;
  }
  10% {
	opacity: 1;
    left: 10%;
  }
  20% {
	opacity: 1;
    left: 20%;
  }
 30% {
	opacity: 1;
    left: 30%;
  }
  40% {
	opacity: 1;
    left: 40%;
  }
  50% {
	opacity: 1;
    left: 50%;
  }
  60% {
	opacity: 1;
    left: 60%;
  }
  70% {
	opacity: 1;
    left: 70%;
  }
  80% {
	opacity: 1;
    left: 80%;
  }
  90% {
	opacity: 1;
    left: 90%;
  }
  96% {
	opacity: 1;
    left: 96%;
  }
  98% {
	opacity: 0.8;
    left: 99%;
  }
  100% {
	opacity: 0;
    left: 105%;
  }
}
/*--- cloud animation end ---*/