/* comets animations */

#comets {
    position: absolute;
    top: -150px;
    width: 100vw;
    text-align: left;
    height: 100%;
    min-height: 900px;
    overflow: hidden;
}

#comets i {
    display: inline-block;
    width: 250px;
    height: 150px;
    position: absolute;
    border-radius: 5% 40% 70%;
    box-shadow: inset 0px 0px 1px #294b67;
    border: 1px solid #333;
    z-index: 1;
    background-color: #fff;
    opacity: .7;
    -webkit-animation: falling 10s 0s infinite;
    -webkit-animation-timing-function: ease-in;
}

#comets i:nth-child(1) {
    left: 20vw;
    height: 73px;
    width: 3px;
    background-color: #fff;
}

#comets i:nth-child(3) {
    height: 11px;
    width: 3px;
    height: 35px;
    -webkit-animation: falling3 8s 3s infinite;
    left: 3vw;
    background-color: #fff;
}

#comets i:nth-child(2) {
    -webkit-animation: falling2 6s 1s infinite;
    left: 45vw;
    height: 70px;
    width: 4px;
    background-color: #fff;

}

@-webkit-keyframes falling {

    0% {
        -webkit-transform: translate3d(100px, 0px, 0px) rotate(160deg);
    }

    3% {
        -webkit-transform: translate3d(450px, 900px, 0) rotate(160deg);
        opacity: 0;
    }
    100% {
        -webkit-transform: translate3d(450px, 900px, 0) rotate(160deg);
        opacity: 0;
    }
}

@-webkit-keyframes falling3 {
    0% {
        -webkit-transform: translate3d(0, 0, 0) rotate(150deg);
    }

    10% {
        -webkit-transform: translate3d(430px, 640px, 0) rotate(150deg);
        opacity: 0;
    }

    100% {
        -webkit-transform: translate3d(430px, 640px, 0) rotate(150deg);
        opacity: 0;
    }
}

@-webkit-keyframes falling2 {
    0% {
        -webkit-transform: translate3d(100px, 0, 0) rotate(130deg);
    }

    15% {
        -webkit-transform: translate3d(800px, 580px, 0) rotate(130deg);
        opacity: 0;
    }

    100% {
        -webkit-transform: translate3d(800px, 680px, 0) rotate(180deg);
        opacity: 0;
    }
}