/* * * * * * * * * * * * * Fall Animation:  */

#fall01, #fall02, #fall03, #fall04, #fall05, #fall06, #fall07,  #fall08, #fall09, #fall10 {
    position: absolute;
    background-position: 0% 0%;
    background-size: 100%;
             
    -webkit-animation-duration: 20s;
       -moz-animation-duration: 20s;
        -ms-animation-duration: 20s;
         -o-animation-duration: 20s;
            animation-duration: 20s;
     
    -webkit-animation-iteration-count: infinite;
       -moz-animation-iteration-count: infinite;
        -ms-animation-iteration-count: infinite;
         -o-animation-iteration-count: infinite;
            animation-iteration-count: infinite;

    -webkit-transform-origin: 50% 50%;
       -moz-transform-origin: 50% 50%;
         -o-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
            
    -webkit-animation-timing-function: linear;
       -moz-animation-timing-function: linear;
            animation-timing-function: linear;
}

#fall01 {
    background-image: url('images/leaf_01.png');
    width: 20px;
    height: 24px;
         
    -webkit-animation-duration: 18s;
       -moz-animation-duration: 18s;
        -ms-animation-duration: 18s;
         -o-animation-duration: 18s;
            animation-duration: 18s;

    -webkit-animation-name: leaf01;
       -moz-animation-name: leaf01;
        -ms-animation-name: leaf01;
         -o-animation-name: leaf01;
            animation-name: leaf01;
}

#fall02 {
    background-image: url('images/leaf_02.png');
    width: 20px;
    height: 24px;
         
    -webkit-animation-duration: 24s;
       -moz-animation-duration: 24s;
        -ms-animation-duration: 24s;
         -o-animation-duration: 24s;
            animation-duration: 24s;
    
    -webkit-animation-name: leaf02;
       -moz-animation-name: leaf02;
        -ms-animation-name: leaf02;
         -o-animation-name: leaf02;
            animation-name: leaf02;
}

#fall03 {
    background-image: url('images/leaf_03.png');
    width: 20px;
    height: 20px;
         
    -webkit-animation-duration: 20s;
       -moz-animation-duration: 20s;
        -ms-animation-duration: 20s;
         -o-animation-duration: 20s;
            animation-duration: 20s;
    
    -webkit-animation-name: leaf03;
       -moz-animation-name: leaf03;
        -ms-animation-name: leaf03;
         -o-animation-name: leaf03;
            animation-name: leaf03;
}

#fall04 {
    background-image: url('images/leaf_04.png');
    width: 25px;
    height: 19px;
    
    -webkit-animation-name: leaf04;
       -moz-animation-name: leaf04;
        -ms-animation-name: leaf04;
         -o-animation-name: leaf04;
            animation-name: leaf04;
}

#fall05 {
    background-image: url('images/leaf_05.png');
    width: 20px;
    height: 12px;
         
    -webkit-animation-duration: 18s;
       -moz-animation-duration: 18s;
        -ms-animation-duration: 18s;
         -o-animation-duration: 18s;
            animation-duration: 18s;
    
    -webkit-animation-name: leaf05;
       -moz-animation-name: leaf05;
        -ms-animation-name: leaf05;
         -o-animation-name: leaf05;
            animation-name: leaf05;
}

#fall06 {
    background-image: url('images/leaf_06.png');
    width: 24px;
    height: 14px;
         
    -webkit-animation-duration: 24s;
       -moz-animation-duration: 24s;
        -ms-animation-duration: 24s;
         -o-animation-duration: 24s;
            animation-duration: 24s;
    
    -webkit-animation-name: leaf06;
       -moz-animation-name: leaf06;
        -ms-animation-name: leaf06;
         -o-animation-name: leaf06;
            animation-name: leaf06;
}

#fall07 {
    background-image: url('images/leaf_02.png');
    width: 20px;
    height: 24px;
         
    -webkit-animation-duration: 20s;
       -moz-animation-duration: 20s;
        -ms-animation-duration: 20s;
         -o-animation-duration: 20s;
            animation-duration: 20s;
    
    -webkit-animation-name: leaf07;
       -moz-animation-name: leaf07;
        -ms-animation-name: leaf07;
         -o-animation-name: leaf07;
            animation-name: leaf07;
}

#fall08 {
    background-image: url('images/leaf_05.png');
    width: 20px;
    height: 12px;
         
    -webkit-animation-duration: 18s;
       -moz-animation-duration: 18s;
        -ms-animation-duration: 18s;
         -o-animation-duration: 18s;
            animation-duration: 18s;
    
    -webkit-animation-name: leaf08;
       -moz-animation-name: leaf08;
        -ms-animation-name: leaf08;
         -o-animation-name: leaf08;
            animation-name: leaf08;
}

#fall09 {
    background-image: url('images/leaf_07.png');
    width: 22px;
    height: 25px;
         
    -webkit-animation-duration: 24s;
       -moz-animation-duration: 24s;
        -ms-animation-duration: 24s;
         -o-animation-duration: 24s;
            animation-duration: 24s;
         
    
    -webkit-animation-name: leaf09;
       -moz-animation-name: leaf09;
        -ms-animation-name: leaf09;
         -o-animation-name: leaf09;
            animation-name: leaf09;
}

#fall10 {
    background-image: url('images/leaf_07.png');
    width: 24px;
    height: 27px;
         
    -webkit-animation-duration: 20s;
       -moz-animation-duration: 20s;
        -ms-animation-duration: 20s;
         -o-animation-duration: 20s;
            animation-duration: 20s;
    
    -webkit-animation-name: leaf10;
       -moz-animation-name: leaf10;
        -ms-animation-name: leaf10;
         -o-animation-name: leaf10;
            animation-name: leaf10;
}

@keyframes leaf01 {

    0% {
        top: -40px;
        left: 5%;

        transform: rotate3d(0, 0, 0, 0deg);
    }

    15% {
        left: -1%;
    }

    30% {
        left: 13%;
    }

    45% {
        left: -1%;
    }

    60% {
        left: 13%;
    }

    73% {
        top: 600px;
        left: 13%;      

        transform: rotate3d(3000, 3000, 3000, 3000deg);
    }

    100% {
        top: 600px;
        left: 13%;      

        transform: rotate3d(3000, 3000, 3000, 3000deg);
    }
    
}

@keyframes leaf02 {

    0% {
        top: -50px;
        left: 15%;

        transform: rotate3d(3600, 3600, 3600, 3600deg);
    }

    20% {
        top: -50px;
        left: 11%;
    }

    35% {
        left: 20%;
    }

    50% {
        left: 11%;
    }

    65% {
        left: 19%;
    }

    78% {
        top: 620px;
        left: 11%;
    }

    100% {
        top: 620px;
        left: 24%;

        transform: rotate3d(0, 0, 0, 0deg);
    }
}

@keyframes leaf03 {

    0% {
        top: -30px;
        left: 35%;

        transform: rotate3d(0, 0, 0, 0deg);
    }

    12% {
        top: -30px;
        left: 35%;
    }

    40% {
        left: 30%;
    }

    70% {
        left: 40%;
    }

    80% {
        top: 620px;
        left: 30%;        

        transform: rotate3d(5000, 5000, 5000, 5000deg);
    }

    100% {
        top: 620px;
        left: 30%;        

        transform: rotate3d(5000, 5000, 5000, 5000deg);
    }
}

@keyframes leaf04 {

    0% {
        top: -40px;
        left: 55%;     

        transform: rotate3d(5000, 5000, 5000, 5000deg);
    }

    35% {
        top: -40px;
        left: 60%;
    }

    45% {
        left: 50%;
    }

    55% {
        left: 60%;
    }

    65% {
        left: 50%;
    }

    75% {
        left: 60%;
    }

    85% {
        left: 50%;
    }

    95% {
        left: 60%;
    }

    100% {
        top: 620px;
        left: 50%;

        transform: rotate3d(0, 0, 0, 0deg);
    }
}

@keyframes leaf05 {

    0% {
        top: -40px;
        left: 15%;     

        transform: rotate3d(5000, 5000, 5000, 5000deg);
    }

    30% {
        top: -40px;
        left: 15%;
    }

    40% {
        left: 12%;
    }

    50% {
        left: 18%;
    }

    60% {
        left: 12%;
    }

    70% {
        left: 18%;
    }

    80% {
        left: 12%;
    }

    90% {
        left: 18%;
    }

    100% {
        top: 620px;
        left: 12%;

        transform: rotate3d(0, 0, 0, 0deg);
    }
}

@keyframes leaf06 {

    0% {
        top: -40px;
        left: 65%;     

        transform: rotate3d(5000, 5000, 5000, 5000deg);
    }

    5% {
        top: -40px;
        left: 65%;
    }

    25% {
        left: 60%;
    }

    45% {
        left: 68%;
    }

    65% {
        left: 63%;
    }

    85% {
        left: 68%;
    }

    100% {
        top: 620px;
        left: 63%;

        transform: rotate3d(0, 0, 0, 0deg);
    }

}

@keyframes leaf07 {

    0% {
        top: -30px;
        left: 75%;

        transform: rotate3d(4500, 4500, 4500, 5600deg);
    }

    18% {
        top: -30px;
        left: 78%;
    }

    38% {
        left: 73%;
    }

    58% {
        left: 78%;
    }

    80% {
        top: 620px;
        left: 73%;

        transform: rotate3d(0, 0, 0, 0deg);
    }

    100% {
        top: 620px;
        left: 78%;

        transform: rotate3d(0, 0, 0, 0deg);
    }

}

@keyframes leaf08 {

    0% {
        top: -40px;
        left: 85%;     

        transform: rotate3d(5000, 5000, 5000, 5000deg);
    }

    25% {
        top: -40px;
        left: 85%;

        transform: rotate3d(5000, 5000, 5000, 5000deg);
    }

    40% {
        left: 90%;
    }

    55% {
        left: 80%;
    }

    60% {
        left: 90%;
    }

    75% {
        left: 80%;
    }

    80% {
        left: 90%;
    }

    90% {
        left: 80%;
    }

    100% {
        top: 620px;
        left: 90%;

        transform: rotate3d(0, 0, 0, 0deg);
    }
}

@keyframes leaf09 {

    0% {
        top: -30px;
        left: 40%;

        transform: rotate3d(5500, 5500, 5500, 6000deg);
    }

    30% {
        top: -30px;
        left: 44%;

        transform: rotate3d(5500, 5500, 5500, 6000deg);
    }

    40% {
        left: 38%;
    }

    50% {
        left: 44%;
    }

    60% {
        left: 38%;
    }

    70% {
        left: 44%;
    }

    80% {
        left: 38%;
    }

    90% {
        left: 44%;
    }

    100% {
        top: 620px;
        left: 38%;

        transform: rotate3d(0, 0, 0, 0deg);
    }

}

@keyframes leaf10 {

    0% {
        top: -30px;
        left: 90%;

        transform: rotate3d(5500, 5500, 5500, 6000deg);
    }

    25% {
        top: -30px;
        left: 94%;

        transform: rotate3d(5500, 5500, 5500, 6000deg);
    }

    35% {
        left: 98%;
    }

    45% {
        left: 94%;
    }

    55% {
        left: 98%;
    }

    65% {
        left: 94%;
    }

    75% {
        left: 98%;
    }

    85% {
        left: 94%;
    }

    95% {
        left: 98%;
    }

    100% {
        top: 620px;
        left: 98%;

        transform: rotate3d(0, 0, 0, 0deg);
    }

}