/* * * * * * * * * * * * * Winter Animation:  */

#snowF01, #snowF02, #snowF03, #snowF04, #snowF05, #snowF06, #snowF07, #snowF08, #snowF09, #snowF10 {
    position: absolute;
    background-position: 0% 0%;
    background-size: 100%;
     
    -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
}

#snowF01 {
    background-image: url('images/snowflakes_01.png');
    width: 25px;
    height: 25px;
     
    -webkit-animation-duration: 23s;
       -moz-animation-duration: 23s;
        -ms-animation-duration: 23s;
         -o-animation-duration: 23s;
            animation-duration: 23s; 

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

#snowF02 {
    background-image: url('images/snowflakes_02.png');
    width: 25px;
    height: 25px;
    
    -webkit-animation-duration: 30s;
       -moz-animation-duration: 30s;
        -ms-animation-duration: 30s;
         -o-animation-duration: 30s;
            animation-duration: 30s;

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

#snowF03 {
    background-image: url('images/snowflakes_03.png');
    width: 25px;
    height: 25px;
    
    -webkit-animation-duration: 20s;
       -moz-animation-duration: 20s;
        -ms-animation-duration: 20s;
         -o-animation-duration: 20s;
            animation-duration: 20s;

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

#snowF04 {
    background-image: url('images/snowflakes_01.png');
    width: 25px;
    height: 25px;
    
    -webkit-animation-duration: 30s;
       -moz-animation-duration: 30s;
        -ms-animation-duration: 30s;
         -o-animation-duration: 30s;
            animation-duration: 30s;

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

#snowF05 {
    background-image: url('images/snowflakes_02.png');
    width: 25px;
    height: 25px;
     
    -webkit-animation-duration: 25s;
       -moz-animation-duration: 25s;
        -ms-animation-duration: 25s;
         -o-animation-duration: 25s;
            animation-duration: 25s;

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

#snowF06 {
    background-image: url('images/snowflakes_03.png');
    width: 25px;
    height: 25px;
     
    -webkit-animation-duration: 36s;
       -moz-animation-duration: 36s;
        -ms-animation-duration: 36s;
         -o-animation-duration: 36s;
            animation-duration: 36s;

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

#snowF07 {
    background-image: url('images/snowflakes_01.png');
    width: 25px;
    height: 25px;
     
    -webkit-animation-duration: 24s;
       -moz-animation-duration: 24s;
        -ms-animation-duration: 24s;
         -o-animation-duration: 24s;
            animation-duration: 24s;

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

#snowF08 {
    background-image: url('images/snowflakes_02.png');
    width: 25px;
    height: 25px;
     
    -webkit-animation-duration: 35s;
       -moz-animation-duration: 35s;
        -ms-animation-duration: 35s;
         -o-animation-duration: 35s;
            animation-duration: 35s;

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

#snowF09 {
    background-image: url('images/snowflakes_03.png');
    width: 25px;
    height: 25px;
    
    -webkit-animation-duration: 20s;
       -moz-animation-duration: 20s;
        -ms-animation-duration: 20s;
         -o-animation-duration: 20s;
            animation-duration: 20s;

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

#snowF10 {
    background-image: url('images/snowflakes_01.png');
    width: 25px;
    height: 25px;
    
    -webkit-animation-duration: 30s;
       -moz-animation-duration: 30s;
        -ms-animation-duration: 30s;
         -o-animation-duration: 30s;
            animation-duration: 30s;

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

#snowF11 {
    background-image: url('images/snowflakes_02.png');
    width: 25px;
    height: 25px;
    
    -webkit-animation-duration: 50s;
       -moz-animation-duration: 50s;
        -ms-animation-duration: 50s;
         -o-animation-duration: 50s;
            animation-duration: 50s;

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

@keyframes flake01 {

    0% {
        top: -30px;
        left: 5%;
        transform: rotate(0deg);
    }

    80% {
        top: 103%;
        left: 5%;
        transform: rotate(850deg);
    }

    100% {
        top: 100%;
        left: 5%;
        transform: rotate(850deg);
    }
}

@keyframes flake02 {

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

        transform: rotate(0deg);
    }  

    1% {
        top: -30px;
        left: 15%;

        transform: rotate(0deg);
    } 

    99% {
        top: 100%;
        left: 15%; 

        transform: rotate(-500deg);
    }

    100% {
        top: 100%;
        left: 15%; 

        transform: rotate(-500deg);
    }
}

@keyframes flake03 {

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

        transform: rotate(0deg);
    }  

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

        transform: rotate(0deg);
    }  

    80% {
        top: 100%;
        left: 25%; 

        transform: rotate(1200deg);
    }

    100% {
        top: 100%;
        left: 25%; 

        transform: rotate(1200deg);
    }
}

@keyframes flake04 {

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

        transform: rotate(0deg);
    }

    90% {
        top: 100%;
        left: 35%;  

        transform: rotate(-1050deg);
    }

    100% {
        top: 100%;
        left: 35%;  

        transform: rotate(-1050deg);
    }
}

@keyframes flake05 {

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

        transform: rotate(0deg);
    }  

    1% {
        top: -30px;
        left: 45%;

        transform: rotate(0deg);
    }  

    85% {
        top: 100%;
        left: 45%; 

        transform: rotate(850deg);
    }

    100% {
        top: 100%;
        left: 45%;  

        transform: rotate(850deg);
    }
}

@keyframes flake06 {

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

        transform: rotate(0deg);
    }  

    1% {
        top: -30px;
        left: 55%;

        transform: rotate(0deg);
    } 

    90% {
        top: 100%;
        left: 55%;

        transform: rotate(-380deg);
    }

    100% {
        top: 100%;
        left: 55%; 

        transform: rotate(-380deg);
    }
}

@keyframes flake07 {

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

        transform: rotate(0deg);
    }  

    3% {
        top: -30px;
        left: 65%;

        transform: rotate(0deg);
    }  

    89% {
        top: 100%;
        left: 65%; 

        transform: rotate(750deg);
    }

    100% {
        top: 100%;
        left: 65%;

        transform: rotate(750deg);
    }
}

@keyframes flake08 {

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

        transform: rotate(0deg);
    }  

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

        transform: rotate(0deg);
    } 

    97% {
        top: 100%;
        left: 75%;

        transform: rotate(-640deg);
    }

    100% {
        top: 100%;
        left: 75%;

        transform: rotate(-640deg);
    }
}

@keyframes flake09 {

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

        transform: rotate(0deg);
    }  

    5% {
        top: -30px;
        left: 85%;

        transform: rotate(0deg);
    }

    95% {
        top: 100%;
        left: 85%;

        transform: rotate(-720deg);
    }  

    100% {
        top: 100%;
        left: 85%;

        transform: rotate(-720deg);
    }
    
}

@keyframes flake10 {

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

        transform: rotate(0deg);
    }  

    80% {
        top: 100%;
        left: 95%;

        transform: rotate(930deg);
    }

    100% {
        top: 100%;
        left: 95%;

        transform: rotate(930deg);
    }
    
}

@keyframes flake11 {

    0% {
        top: -30px;
        left: 30%;
        transform: rotate(0deg);
    }
    
    35% {
        top: -30px;
        left: 30%;
        transform: rotate(0deg);
    }  

    90% {
        top: 100%;
        left: 35%;
        transform: rotate(1020deg);
    }

    100% {
        top: 100%;
        left: 35%;
        transform: rotate(1020deg);
    }
    
}

@keyframes flake12 {

    0% {
        top: -30px;
        left: 43%;
        transform: rotate(0deg);
    }
    
    38% {
        top: -30px;
        left: 43%;
        transform: rotate(0deg);
    }  

    95% {
        top: 100%;
        left: 45%;
        transform: rotate(-1020deg);
    }

    100% {
        top: 100%;
        left: 45%;
        transform: rotate(-1020deg);
    }
    
}

@keyframes flake13 {

    0% {
        top: -30px;
        left: 55%;
        transform: rotate(0deg);
    }
    
    30% {
        top: -30px;
        left: 55%;
        transform: rotate(0deg);
    }  

    93% {
        top: 100%;
        left: 55%;
        transform: rotate(950deg);
    }

    100% {
        top: 100%;
        left: 55%;
        transform: rotate(950deg);
    }
    
}

@keyframes flake14 {

    0% {
        top: -30px;
        left: 77%;
        transform: rotate(0deg);
    }
    
    40% {
        top: -30px;
        left: 77%;
        transform: rotate(0deg);
    }  

    99% {
        top: 100%;
        left: 77%;
        transform: rotate(1200deg);
    }

    100% {
        top: 100%;
        left: 77%;
        transform: rotate(1200deg);
    }
    
}

@keyframes flake15 {

    0% {
        top: -30px;
        left: 86%;
        transform: rotate(0deg);
    }
    
    39% {
        top: -30px;
        left: 86%;
        transform: rotate(0deg);
    }  

    96% {
        top: 100%;
        left: 86%;
        transform: rotate(-1050deg);
    }

    100% {
        top: 100%;
        left: 86%;
        transform: rotate(-1050deg);
    }
    
}