/*
 *       ___      ___       ___  __    __   __   __  
 * |  | |__   /\   |  |__| |__  |__)  /  ` /__` /__` 
 * |/\| |___ /~~\  |  |  | |___ |  \ .\__, .__/ .__/ 
 *
 * Minecraft weather effects with pure CSS
 * © Copyright 2014 Moritz Marquardt
 *
 * https://github.com/moqmar/weather.css
 *
 * Licensed under MIT License (http://opensource.org/licenses/MIT)
 */

/* main element */
.head1 {
    position: relative; overflow: hidden;
}
/* pseudo elements: positioning and setup */
.head1:before, .head1:after {
    content: "";
    position: absolute; left: -50%; top: -50%; right: -50%; bottom: -50%;
    z-index: 1;
    pointer-events: none;
    
    background: transparent repeat;
    opacity: 0.7;
    
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    transform: rotate(10deg);
    
    -webkit-animation-name: weather;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-name: weather;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.head1:after {
    opacity: 0.8;
    -webkit-animation-name: weather2;
    animation-name: weather2;
}
/* rain (fast, rain.png) */
.head1.rain:before, .head1.rain:after {
    background-image: url(images/rain2.png);
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
}
.head1.rain:after {
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
}

.head2 {
    position: relative; overflow: hidden;
}
/* pseudo elements: positioning and setup */
.head2:before, .head2:after {
    content: "";
    position: absolute; left: -50%; top: -50%; right: -50%; bottom: -50%;
    z-index: 1;
    pointer-events: none;
    
    background: transparent repeat;
    opacity: 0.7;
    
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    transform: rotate(10deg);
    
    -webkit-animation-name: weather;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-name: weather;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.head2:after {
    opacity: 0.8;
    -webkit-animation-name: weather2;
    animation-name: weather2;
}
/* rain (fast, rain.png) */
.head2.rain:before, .head2.rain:after {
    background-image: url(images/rain2.png);
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
}
.head2.rain:after {
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
}
.head3 {
    position: relative; overflow: hidden;
}
/* pseudo elements: positioning and setup */
.head3:before, .head3:after {
    content: "";
    position: absolute; left: -50%; top: -50%; right: -50%; bottom: -50%;
    z-index: 1;
    pointer-events: none;
    
    background: transparent repeat;
    opacity: 0.7;
    
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    transform: rotate(10deg);
    
    -webkit-animation-name: weather;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-name: weather;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.head3:after {
    opacity: 0.8;
    -webkit-animation-name: weather2;
    animation-name: weather2;
}
/* rain (fast, rain.png) */
.head3.rain:before, .head3.rain:after {
    background-image: url(images/rain2.png);
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
}
.head3.rain:after {
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
}
/* animation keyframes */
@-webkit-keyframes weather {
    from { background-position: 0 0px; }
    to { background-position: 0 1024px; }
}
@keyframes weather {
    from { background-position: 0 0px; }
    to { background-position: 0 1024px; }
}
@-webkit-keyframes weather2 {
    from { background-position: 64px 64px; }
    to { background-position: 64px 1088px; }
}
@keyframes weather2 {
    from { background-position: 64px 64px; }
    to { background-position: 64px 1088px; }
}