<p>&nbsp;</p>
<style><!--
/* SUNNY */
.sunny {
    -webkit-animation: sunny 15s linear infinite;
    animation: sunny 15s linear infinite;
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
    background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
    height: 140px;
    width: 20px;
    margin-left: -15px;
    position: absolute;
    left: 90px;
    top: 20px;
}
.sunny:before {
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
    background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
    content: '';
    height: 140px;
    width: 20px;
    opacity: 1;
    position: absolute;
    bottom: 0px;
    left: 0px;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}
.sunny:after {
    background: #FFEE44;
    border-radius: 50%;
    box-shadow: rgba(255,255,0,0.2) 0 0 0 15px;
    content: '';
    height: 80px;
    width: 80px;
    position: absolute;
    left: -30px;
    top: 30px;
}
@-webkit-keyframes sunny {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes sunny {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/* CLOUDY */
.cloudy {
    -webkit-animation: cloudy 5s ease-in-out infinite;
    animation: cloudy 5s ease-in-out infinite;
    background: #FFFFFF;
    border-radius: 50%;
    box-shadow:
    #FFFFFF 65px -15px 0 -5px,
    #FFFFFF 25px -25px,
    #FFFFFF 30px 10px,
    #FFFFFF 60px 15px 0 -10px,
    #FFFFFF 85px 5px 0 -5px;
    height: 50px;
    width: 50px;
    margin-left: -60px;
    position: absolute;
    left: 255px;
    top: 70px;
}
.cloudy:after {
    -webkit-animation: cloudy_shadow 5s ease-in-out infinite;
    animation: cloudy_shadow 5s ease-in-out infinite;
    background: #000000;
    border-radius: 50%;
    content: '';
    height: 15px;
    width: 120px;
    opacity: 0.2;
    position: absolute;
    left: 5px;
    bottom: -60px;
    -webkit-transform: scale(.7);
    -ms-transform: scale(.7);
    transform: scale(.7);
}
@-webkit-keyframes cloudy {
    50% {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
    }
}
@keyframes cloudy {
    50% {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
    }
}
@-webkit-keyframes cloudy_shadow {
    50% {
        -webkit-transform: translateY(20px) scale(1);
        transform: translateY(20px) scale(1);
        opacity: .05;
    }
}
@keyframes cloudy_shadow {
    50% {
        -webkit-transform: translateY(20px) scale(1);
        transform: translateY(20px) scale(1);
        opacity: .05;
    }
}

/* RAINY */
.rainy {
    -webkit-animation: rainy 5s ease-in-out infinite 1s;
    animation: rainy 5s ease-in-out infinite 1s;
    background: #CCCCCC;
    border-radius: 50%;
    box-shadow:
    #CCCCCC 65px -15px 0 -5px,
    #CCCCCC 25px -25px,
    #CCCCCC 30px 10px,
    #CCCCCC 60px 15px 0 -10px,
    #CCCCCC 85px 5px 0 -5px;
    display: block;
    height: 50px;
    width: 50px;
    margin-left: -60px;
    position: absolute;
    left: 427px;
    top: 70px;
}
.rainy:after {
    -webkit-animation: rainy_shadow 5s ease-in-out infinite 1s;
    animation: rainy_shadow 5s ease-in-out infinite 1s;
    background: #000000;
    border-radius: 50%;
    content: '';
    height: 15px;
    width: 120px;
    opacity: 0.2;
    position: absolute;
    left: 5px;
    bottom: -60px;
    -webkit-transform: scale(.7);
    -ms-transform: scale(.7);
    transform: scale(.7);
}
.rainy:before {
    -webkit-animation: rainy_rain .7s infinite linear;
    animation: rainy_rain .7s infinite linear;
    content: '';
    background: #CCCCCC;
    border-radius: 50%;
    display: block;
    height: 6px;
    width: 3px;
    opacity: 0.3;
    -webkit-transform: scale(.9);
    -ms-transform: scale(.9);
    transform: scale(.9);
}
@-webkit-keyframes rainy {
    50% {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
    }
}
@keyframes rainy {
    50% {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
    }
}
@-webkit-keyframes rainy_shadow {
    50% {
        -webkit-transform: translateY(20px) scale(1);
        transform: translateY(20px) scale(1);
        opacity: 0.05;
    }
}
@keyframes rainy_shadow {
    50% {
        -webkit-transform: translateY(20px) scale(1);
        transform: translateY(20px) scale(1);
        opacity: 0.05;
    }
}
@-webkit-keyframes rainy_rain {
    0% {
        box-shadow:
        rgba(0,0,0,0) 30px 30px,
        rgba(0,0,0,0) 40px 40px,
        #000 50px 75px,
        #000 55px 50px,
        #000 70px 100px,
        #000 80px 95px,
        #000 110px 45px,
        #000 90px 35px;
    }
    25% {
        box-shadow:
        #000 30px 45px,
        #000 40px 60px,
        #000 50px 90px,
        #000 55px 65px,
        rgba(0,0,0,0) 70px 120px,
        rgba(0,0,0,0) 80px 120px,
        #000 110px 70px,
        #000 90px 60px;
    }
    26% {
        box-shadow:
        #000 30px 45px,
        #000 40px 60px,
        #000 50px 90px,
        #000 55px 65px,
        rgba(0,0,0,0) 70px 40px,
        rgba(0,0,0,0) 80px 20px,
        #000 110px 70px,
        #000 90px 60px;
    }
    50% {
        box-shadow:
        #000 30px 70px,
        #000 40px 80px,
        rgba(0,0,0,0) 50px 100px,
        #000 55px 80px,
        #000 70px 60px,
        #000 80px 45px,
        #000 110px 95px,
        #000 90px 85px;
    }
    51% {
        box-shadow:
        #000 30px 70px,
        #000 40px 80px,
        rgba(0,0,0,0) 50px 45px,
        #000 55px 80px,
        #000 70px 60px,
        #000 80px 45px,
        #000 110px 95px,
        #000 90px 85px;
    }
    75% {
        box-shadow:
        #000 30px 95px,
        #000 40px 100px,
        #000 50px 60px,
        rgba(0,0,0,0) 55px 95px,
        #000 70px 80px,
        #000 80px 70px,
        rgba(0,0,0,0) 110px 120px,
        rgba(0,0,0,0) 90px 110px;
    }
    76% {
        box-shadow:
        #000 30px 95px,
        #000 40px 100px,
        #000 50px 60px,
        rgba(0,0,0,0) 55px 35px,
        #000 70px 80px,
        #000 80px 70px,
        rgba(0,0,0,0) 110px 25px,
        rgba(0,0,0,0) 90px 15px;
    }
    100% {
        box-shadow:
        rgba(0,0,0,0) 30px 120px,
        rgba(0,0,0,0) 40px 120px,
        #000 50px 75px,
        #000 55px 50px,
        #000 70px 100px,
        #000 80px 95px,
        #000 110px 45px,
        #000 90px 35px;
    }
}
@keyframes rainy_rain {
    0% {
        box-shadow:
        rgba(0,0,0,0) 30px 30px,
        rgba(0,0,0,0) 40px 40px,
        #000 50px 75px,
        #000 55px 50px,
        #000 70px 100px,
        #000 80px 95px,
        #000 110px 45px,
        #000 90px 35px;
    }
    25% {
        box-shadow:
        #000 30px 45px,
        #000 40px 60px,
        #000 50px 90px,
        #000 55px 65px,
        rgba(0,0,0,0) 70px 120px,
        rgba(0,0,0,0) 80px 120px,
        #000 110px 70px,
        #000 90px 60px