@charset "utf-8";

.rains {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: rotate(10deg);
    pointer-events: none;
}

    .rains span {
        position: absolute;
        width: 2px;
        height: 180px;
        background: #FFF;
        opacity: 0.4;
    }

        .rains span:nth-child(1) {
            left: 5%;
            top: -190px;
            animation: rain-anim 13s infinite;
        }

        .rains span:nth-child(2) {
            left: 10%;
            top: -180px;
            animation: rain-anim 14s infinite;
        }

        .rains span:nth-child(3) {
            left: 15%;
            top: -170px;
            animation: rain-anim 11s infinite;
        }

        .rains span:nth-child(4) {
            left: 20%;
            top: -160px;
            animation: rain-anim 15s infinite;
        }

        .rains span:nth-child(5) {
            left: 25%;
            top: -150px;
            animation: rain-anim 13s infinite;
        }

        .rains span:nth-child(6) {
            left: 30%;
            top: -150px;
            animation: rain-anim 14s infinite;
        }

        .rains span:nth-child(7) {
            left: 35%;
            top: -160px;
            animation: rain-anim 16s infinite;
        }

        .rains span:nth-child(8) {
            left: 40%;
            top: -170px;
            animation: rain-anim 10s infinite;
        }

        .rains span:nth-child(9) {
            left: 45%;
            top: -180px;
            animation: rain-anim 12s infinite;
        }

        .rains span:nth-child(10) {
            left: 50%;
            top: -190px;
            animation: rain-anim 14s infinite;
        }

        .rains span:nth-child(11) {
            left: 55%;
            top: -190px;
            animation: rain-anim 13s infinite;
        }

        .rains span:nth-child(12) {
            left: 60%;
            top: -180px;
            animation: rain-anim 9s infinite;
        }

        .rains span:nth-child(13) {
            left: 65%;
            top: -170px;
            animation: rain-anim 17s infinite;
        }

        .rains span:nth-child(14) {
            left: 70%;
            top: -160px;
            animation: rain-anim 15s infinite;
        }

        .rains span:nth-child(15) {
            left: 75%;
            top: -150px;
            animation: rain-anim 13s infinite;
        }

        .rains span:nth-child(16) {
            left: 80%;
            top: -150px;
            animation: rain-anim 17s infinite;
        }

        .rains span:nth-child(17) {
            left: 85%;
            top: -160px;
            animation: rain-anim 11s infinite;
        }

        .rains span:nth-child(18) {
            left: 90%;
            top: -170px;
            animation: rain-anim 12s infinite;
        }

        .rains span:nth-child(19) {
            left: 95%;
            top: -180px;
            animation: rain-anim 14s infinite;
        }

        .rains span:nth-child(20) {
            left: 100%;
            top: -190px;
            animation: rain-anim9 17s infinite;
        }

@keyframes rain-anim {

    0% {
        transform: translate(0px,0px);
    }

    4% {
        transform: translate(0px,600px);
    }

    5% {
        transform: translate(200px,0px);
    }

    9% {
        transform: translate(200px,600px);
    }

    10% {
        transform: translate(-100px,0px);
    }

    14% {
        transform: translate(-100px,600px);
    }

    15% {
        transform: translate(-200px,0px);
    }

    19% {
        transform: translate(-200px,600px);
    }

    20% {
        transform: translate(100px,0px);
    }

    24% {
        transform: translate(100px,600px);
    }

    25% {
        transform: translate(-150px,0px);
    }

    29% {
        transform: translate(-150px,600px);
    }

    30% {
        transform: translate(-80px,0px);
    }

    34% {
        transform: translate(-80px,600px);
    }

    35% {
        transform: translate(150px,0px);
    }

    39% {
        transform: translate(150px,600px);
    }

    40% {
        transform: translate(-60px,0px);
    }

    44% {
        transform: translate(-60px,600px);
    }

    45% {
        transform: translate(90px,0px);
    }

    49% {
        transform: translate(90px,600px);
    }

    50% {
        transform: translate(60px,0px);
    }

    54% {
        transform: translate(60px,600px);
    }

    55% {
        transform: translate(-60px,0px);
    }

    59% {
        transform: translate(-60px,600px);
    }

    60% {
        transform: translate(-40px,0px);
    }

    64% {
        transform: translate(-40px,600px);
    }

    65% {
        transform: translate(40px,0px);
    }

    69% {
        transform: translate(40px,600px);
    }

    70% {
        transform: translate(-20px,0px);
    }

    74% {
        transform: translate(-20px,600px);
    }

    75% {
        transform: translate(-110px,0px);
    }

    79% {
        transform: translate(-110px,600px);
    }

    80% {
        transform: translate(20px,0px);
    }

    84% {
        transform: translate(20px,600px);
    }

    85% {
        transform: translate(-20px,0px);
    }

    89% {
        transform: translate(-20px,600px);
    }

    90% {
        transform: translate(50px,0px);
    }

    99% {
        transform: translate(50px,600px);
    }

    100% {
        transform: translate(0px,0px);
    }
}

/*EOF*/