.animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}.animated.hinge{-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}@-webkit-keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    } 40% {
        -webkit-transform: perspective(400px) rotateX(-10deg);
    }

    70% {
        -webkit-transform: perspective(400px) rotateX(10deg);
    }

    100% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@-moz-keyframes flipInX {
    0% {
        -moz-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }

    40% {
        -moz-transform: perspective(400px) rotateX(-10deg);
    }

    70% {
        -moz-transform: perspective(400px) rotateX(10deg);
    }

    100% {
        -moz-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@-o-keyframes flipInX {
    0% {
        -o-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }

    40% {
        -o-transform: perspective(400px) rotateX(-10deg);
    }

    70% {
        -o-transform: perspective(400px) rotateX(10deg);
    }

    100% {
        -o-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@keyframes flipInX {
    0% {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }

    40% {
        transform: perspective(400px) rotateX(-10deg);
    }

    70% {
        transform: perspective(400px) rotateX(10deg);
    }

    100% {
        transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}

.flipInX {
	-webkit-backface-visibility: visible !important;
	-webkit-animation-name: flipInX;
	-moz-backface-visibility: visible !important;
	-moz-animation-name: flipInX;
	-o-backface-visibility: visible !important;
	-o-animation-name: flipInX;
	backface-visibility: visible !important;
	animation-name: flipInX;
}
@-webkit-keyframes flipOutX {
    0% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
	100% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
}

@-moz-keyframes flipOutX {
    0% {
        -moz-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
	100% {
        -moz-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
}

@-o-keyframes flipOutX {
    0% {
        -o-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
	100% {
        -o-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
}

@keyframes flipOutX {
    0% {
        transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
	100% {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
}

.flipOutX {
	-webkit-animation-name: flipOutX;
	-webkit-backface-visibility: visible !important;
	-moz-animation-name: flipOutX;
	-moz-backface-visibility: visible !important;
	-o-animation-name: flipOutX;
	-o-backface-visibility: visible !important;
	animation-name: flipOutX;
	backface-visibility: visible !important;
}
@-webkit-keyframes flipInY {
    0% {
        -webkit-transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotateY(-10deg);
    }

    70% {
        -webkit-transform: perspective(400px) rotateY(10deg);
    }

    100% {
        -webkit-transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
}
@-moz-keyframes flipInY {
    0% {
        -moz-transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }

    40% {
        -moz-transform: perspective(400px) rotateY(-10deg);
    }

    70% {
        -moz-transform: perspective(400px) rotateY(10deg);
    }

    100% {
        -moz-transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
}
@-o-keyframes flipInY {
    0% {
        -o-transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }

    40% {
        -o-transform: perspective(400px) rotateY(-10deg);
    }

    70% {
        -o-transform: perspective(400px) rotateY(10deg);
    }

    100% {
        -o-transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
}
@keyframes flipInY {
    0% {
        transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }

    40% {
        transform: perspective(400px) rotateY(-10deg);
    }

    70% {
        transform: perspective(400px) rotateY(10deg);
    }

    100% {
        transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
}

.flipInY {
	-webkit-backface-visibility: visible !important;
	-webkit-animation-name: flipInY;
	-moz-backface-visibility: visible !important;
	-moz-animation-name: flipInY;
	-o-backface-visibility: visible !important;
	-o-animation-name: flipInY;
	backface-visibility: visible !important;
	animation-name: flipInY;
}
@-webkit-keyframes bounceInDown {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-2000px);
	}

	60% {
		opacity: 1;
		-webkit-transform: translateY(30px);
	}

	80% {
		-webkit-transform: translateY(-10px);
	}

	100% {
		-webkit-transform: translateY(0);
	}
}

@-moz-keyframes bounceInDown {
	0% {
		opacity: 0;
		-moz-transform: translateY(-2000px);
	}

	60% {
		opacity: 1;
		-moz-transform: translateY(30px);
	}

	80% {
		-moz-transform: translateY(-10px);
	}

	100% {
		-moz-transform: translateY(0);
	}
}

@-o-keyframes bounceInDown {
	0% {
		opacity: 0;
		-o-transform: translateY(-2000px);
	}

	60% {
		opacity: 1;
		-o-transform: translateY(30px);
	}

	80% {
		-o-transform: translateY(-10px);
	}

	100% {
		-o-transform: translateY(0);
	}
}

@keyframes bounceInDown {
	0% {
		opacity: 0;
		transform: translateY(-2000px);
	}

	60% {
		opacity: 1;
		transform: translateY(30px);
	}

	80% {
		transform: translateY(-10px);
	}

	100% {
		transform: translateY(0);
	}
}

.bounceInDown {
	-webkit-animation-name: bounceInDown;
	-moz-animation-name: bounceInDown;
	-o-animation-name: bounceInDown;
	animation-name: bounceInDown;
}
.circles{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.circles li{
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    animation: animate 25s linear infinite;
    bottom: -150px;

}
/* Truck Shape */
.circles li:nth-child(1) {
    left: 25%;
    width: 120px;
    height: 40px;
    background-color: transparent;
    border-radius: 10px;
    animation-delay: 3s;
}

.circles li:nth-child(2) {
    left: 22%;
    width: 40px;
    height: 40px;
    background-color: transparent;
    border-radius: 5px;
    animation-delay: 2s;
    animation-duration: 12s;
}

.circles li:nth-child(3) {
    left: 37%;
    width: 40px;
    height: 40px;
    background-color: transparent;
    border-radius: 5px;
    animation-delay: 4s;
    animation-duration: 18s;
}

.circles li:nth-child(4) {
    left: 20%;
    width: 30px;
    height: 30px;
    background-color: transparent;
    border-radius: 50%;
    animation-delay: 0s;
}

.circles li:nth-child(5) {
    left: 48%;
    width: 30px;
    height: 30px;
    background-color: transparent;
    border-radius: 50%;
    animation-delay: 3s;
}

.circles li:nth-child(6) {
    left: 60%;
    width: 70px;
    height: 40px;
    background-color: transparent;
    border-radius: 5px;
    animation-delay: 0s;
}

.circles li:nth-child(7) {
    left: 58%;
    top: -5px;
    width: 20px;
    height: 20px;
    background-color: transparent;
    border-radius: 50%;
    animation-delay: 0s;
}
/* Truck Shape */
.circles li:nth-child(8) {
    left: 25%;
    width: 120px;
    height: 40px;
    background-color: transparent;
    border-radius: 10px;
    animation-delay: 5s;
}

.circles li:nth-child(9) {
    left: 80%;
    width: 40px;
    height: 40px;
    background-color: transparent;
    border-radius: 5px;
    animation-delay: 2s;
    animation-duration: 12s;
}

.circles li:nth-child(10) {
    left: 90%;
    width: 40px;
    height: 40px;
    background-color: transparent;
    border-radius: 5px;
    animation-delay: 4s;
    animation-duration: 18s;
}

.circles li:nth-child(11) {
    left: 86%;
    width: 30px;
    height: 30px;
    background-color: transparent;
    border-radius: 50%;
    animation-delay: 0s;
}

.circles li:nth-child(12) {
    left: 63%;
    width: 30px;
    height: 30px;
    background-color: transparent;
    border-radius: 50%;
    animation-delay: 8s;
}

.circles li:nth-child(13) {
    left: 55%;
    width: 70px;
    height: 40px;
    background-color: transparent;
    border-radius: 5px;
    animation-delay: 0s;
}

.circles li:nth-child(14) {
    left: 45%;
    top: -5px;
    width: 20px;
    height: 20px;
    background-color: transparent;
    border-radius: 50%;
    animation-delay: 0s;
}
.circles li:nth-child(1) img {
width:100px
}

.circles li:nth-child(2) img {
width:100px
}

.circles li:nth-child(3) img {
width:100px
}

.circles li:nth-child(4) img {
width:100px
}

.circles li:nth-child(5) img {
width:100px
}

.circles li:nth-child(6) img {
width:100px
}

.circles li:nth-child(7) img {
width:100px
}
/* Truck Shape */
.circles li:nth-child(8) img {
width:100px
}

.circles li:nth-child(9) img {
width:100px
}

.circles li:nth-child(10) img {
width:100px
}

.circles li:nth-child(11) img {
width:100px
}

.circles li:nth-child(12) img {
width:100px
}

.circles li:nth-child(13) img {
width:100px
}

.circles li:nth-child(14) img {
width:100px
}
@keyframes animate {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }
    100% {
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }
}