/**car css */
/*styles for car*/
.car {
    position: absolute;
    top: 92%;
    z-index: 10;
    -moz-animation: truck 11s linear infinite;
    -webkit-animation: truck 11s linear infinite;
}
.car .truck-img {
    width: 383px;
    height: 154px;
    position: absolute;
    top: -124px;
}

.car2 {
    position: absolute;
    top: 69%;
    z-index: 9;
    -moz-animation: bus 8s linear infinite;
    -webkit-animation: bus 8s linear infinite;
}
.car2 .bus-img {
    width: 551px;
    height: 209px;
    position: absolute;
    top: -140px;
    right: 85px;
}

.car2 .tyre {
    left: 40px;
}

.car2 .tyre.front {
    left: -246px;
}

.car2 .car-shadow {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    bottom: -38px;
    box-shadow: -5px 10px 15px 3px #000000;
    left: 18px;
    position: absolute;
    width: 180px;
}
@-moz-keyframes bus-tyre-rotate {
    from {
        -moz-transform: rotate(0deg);
    }

    to {
        -moz-transform: rotate(-360deg);
    }
}

@-webkit-keyframes bus-tyre-rotate {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(-360deg);
    }
}

.car.car2 .tyre {
    border-radius: 50%;
    background: #3f3f40;
    position: absolute;
    z-index: 2;
    -moz-animation: bus-tyre-rotate 1s linear infinite;
    -webkit-animation: bus-tyre-rotate 1s linear infinite;
    top: 30px;
    width: 80px;
    height: 80px;
    left: -550px;
}

.car .tyre {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #3f3f40;
    position: absolute;
    z-index: 2;
    left:40px;
    top:0;
    -moz-animation: tyre-rotate 1s linear infinite; 
    -webkit-animation: tyre-rotate 1s linear infinite;
}

@-moz-keyframes tyre-rotate {
    from {
        -moz-transform: rotate(-360deg);
    }

    to {
        -moz-transform: rotate(0deg);
    }
}

@-webkit-keyframes tyre-rotate {
    from {
        -webkit-transform: rotate(-360deg);
    }

    to {
        -webkit-transform: rotate(0deg);
    }
}

.car.car2 .tyre:before {
    content: '';
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background: #bdc2bd;
    position: absolute;
    top: 8px;
    left: 8px;
}

.car .tyre:before {
    content: '';
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #bdc2bd;
    position: absolute;
    top: 5px;
    left: 5px;
}

.car .gap {
    background: #3f3f40;
    width: 2px;
    height: 6px;
    position: absolute;
    left: 50%;
    top: 40%;
    box-shadow: 0 9px 0 #3f3f40;
    transform: translate(-50%, -50%);
}
.car.car2 .gap {
    background: #3f3f40;
    width: 2px;
    height: 6px;
    position: absolute;
    left: 50%;
    top: 48%;
    box-shadow: 0 9px 0 #3f3f40;
    transform: translate(-50%, -50%);
}

.car .gap:before {
        content: '';
        display: block;
        width: 2px;
        height: 6px;
        position: absolute;
        background: #3f3f40;
        box-shadow: 0 12px 0 #3f3f40;
        -webkit-transform: rotate(-90deg);
        -webkit-transform-origin: 0 7px;
        -moz-transform: rotate(-90deg);
        -moz-transform-origin: 0 7px;
        z-index: 3;
        left: -1px;
        top: 43%;
    }

    .car.car2 .gap:before {
        content: '';
        display: block;
        width: 2px;
        height: 6px;
        position: absolute;
        background: #3f3f40;
        box-shadow: 0 12px 0 #3f3f40;
        -webkit-transform: rotate(-90deg);
        -webkit-transform-origin: 0 7px;
        -moz-transform: rotate(-90deg);
        -moz-transform-origin: 0 7px;
        z-index: 3;
        left: -1px;
        top: 38%;
    }

.gap {
    background: #3f3f40;
    width: 2px;
    height: 4px;
    position: absolute;
    left: 14px;
    top: 8px;
    box-shadow: 0 9px 0 #3f3f40;
}

    .gap:before {
        content: '';
        display: block;
        width: 2px;
        height: 4px;
        position: absolute;
        background: #3f3f40;
        box-shadow: 0 12px 0 #3f3f40;
        -webkit-transform: rotate(-90deg);
        -webkit-transform-origin: 0 7px;
        -moz-transform: rotate(-90deg);
        -moz-transform-origin: 0 7px;
        z-index: 3;
        left: -1px;
        top: 50%;
    }

.car .tyre.front {
    left: 290px;
}
.car.car2 .tyre.front {
    left: -259px;
}

.car.car2 .car-shadow {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    bottom: -87px;
    box-shadow: -5px 10px 24px 3px #000000;
    left: -610px;
    position: absolute;
    width: 490px;
}
.car .car-shadow {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    bottom: -33px;
    box-shadow: -5px 10px 15px 3px #000000;
    left: 24px;
    position: absolute;
    width: 350px;
}

/*Animation*/
/*Truck*/
@-moz-keyframes truck {
    0% {
        left: -25%;
    }

    100% {
        left: 100%;
    }
}

@-webkit-keyframes truck {
    0% {
        left: -25%;
    }

    100% {
        left: 100%;
    }
}
/*Truck*/

/*Bus*/
@-moz-keyframes bus {
    0% {
        right: -15%;
    }

    100% {
        right: 125%;
    }
}

@-webkit-keyframes bus {
    0% {
        right: -15%;
    }

    100% {
        right: 125%;
    }
}
/*Bus*/

/*Cycle*/
.cycle {
    width: 400px;
    position: absolute;
    top: 35%;
    left: -25%;
    z-index: 9;
    -moz-animation: cycle 18s linear infinite 3.2s;
    -webkit-animation: cycle 18s linear infinite 3.2s;
}
.cycle-tyre {
    width: 119px;
    display: inline-block;
    position: absolute;
    bottom: -48px;
     -moz-animation: cycle-tyre 4.5s linear infinite; 
    -webkit-animation: cycle-tyre 4.5s linear infinite;
}
.cycle-tyre.tyre1 {
    left: 38px;
}
.cycle-tyre.tyre2 {
    right: -50px;
}
   

@-moz-keyframes cycle-tyre {
    from {
        -moz-transform: rotate(-360deg);
    }

    to {
        -moz-transform: rotate(0deg);
    }
}

@-webkit-keyframes cycle-tyre {
    from {
        -webkit-transform: rotate(-360deg);
    }

    to {
        -webkit-transform: rotate(0deg);
    }
}

/*Cycle*/
@-moz-keyframes cycle {
    0% {
        left: -20%;
    }

    100% {
        left: 140%;
    }
}

@-webkit-keyframes cycle {
    0% {
        left: -20%;
    }

    100% {
        left: 140%;
    }
}

.cycle-rotate {
    width: 255px;
    position: absolute;
    top: 45%;
    right: -25%;
    z-index: 9;
    -moz-animation: cycle-rotate 18s linear infinite 3.2s;
    -webkit-animation: cycle-rotate 18s linear infinite 3.2s;
}
.cycle-rotate .cycle-tyre {
    width: 85px;
    display: inline-block;
    position: absolute;
    bottom: -35px;
     -moz-animation: cycle-tyre2 4.5s linear infinite; 
    -webkit-animation: cycle-tyre2 4.5s linear infinite;
}

@-moz-keyframes cycle-rotate {
    0% {
        right: -20%;
    }

    100% {
        right: 140%;
    }
}

@-webkit-keyframes cycle-rotate {
    0% {
        right: -20%;
    }

    100% {
        right: 140%;
    }
}

@-moz-keyframes cycle-tyre2 {
    from {
        -moz-transform: rotate(0deg);
    }

    to {
        -moz-transform: rotate(-360deg);
    }
}

@-webkit-keyframes cycle-tyre2 {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(-360deg);
    }
}
/*Cycle*/

.cycle-rotate .cycle-tyre.tyre1 {
    left: -37px;
}
.cycle-rotate .cycle-tyre.tyre2 {
    right: 23px;
}