/*
  [CSS Index]
  
  ---
  
  Template Name: Wildone - Photography Portfolio Template
  Author:  ex-nihilo
  Version: 1.3 - RAIN
*/


/*
  1. TEMPLATE BACKGROUNDS
    1.1. slick fullscreen slideshow IMG BACKGROUND - FILM GRAIN, RAIN
  2. additional styling
*/


/* 1. TEMPLATE BACKGROUNDS */
/* 1.1. slick fullscreen slideshow IMG BACKGROUND - FILM GRAIN, RAIN */
.bg-img-1 {
background-image: url(../img/background/hero-bg-1-FILM-GRAIN.jpg);
}

.bg-img-2 {
background-image: url(../img/background/hero-bg-2-FILM-GRAIN.jpg);
}

.bg-img-3 {
background-image: url(../img/background/hero-bg-3-FILM-GRAIN.jpg);
}

.bg-img-4 {
background-image: url(../img/background/hero-bg-4-FILM-GRAIN.jpg);
}


/* 2. additional styling */
.overlay-dark-60:before {
z-index: 9;
}

.weather {
position: absolute;
width: 100%;
height: 100%!important;
left: 0;
top: 0;
overflow: hidden;
z-index: 10;
-webkit-pointer-events: none;
   -moz-pointer-events: none;
        pointer-events: none;
}

.weather:before, .weather:after {
content: "";
position: absolute;
left: -100%;
top: -100%;
right: -100%;
bottom: -100%;
pointer-events: none;
background: transparent repeat;
-webkit-transform: rotate(-40deg);
   -moz-transform: rotate(-40deg);
    -ms-transform: rotate(-40deg);
     -o-transform: rotate(-40deg);
        transform: rotate(-40deg);
-webkit-transform-origin: center;
   -moz-transform-origin: center;
    -ms-transform-origin: center;
     -o-transform-origin: center;
        transform-origin: center;
-webkit-animation-timing-function: linear;
        animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
-webkit-animation-name: weather;
        animation-name: weather;
}

.weather:after {
-webkit-animation-name: weather2;
        animation-name: weather2;
}

.weather.rain:before, .weather.rain:after {
background: url(../img/effects/rain.png) left top;
        opacity: 0.6;
   -moz-opacity: 0.6;
-webkit-opacity: 0.6;
filter: alpha(opacity=60);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
-webkit-animation-duration: 2s;
        animation-duration: 2s;
}

.weather.rain:after {
-webkit-animation-duration: 1.5s;
        animation-duration: 1.5s;
}

@-webkit-keyframes weather {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 1024px;
  }
}
@keyframes weather {
  from {
	background-position: 0 0;
  }
  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;
  }
}