/* Bootstrap Carousel Fade Transition (for Bootstrap 3.3.x)
  Inspired from: http://codepen.io/Rowno/pen/Afykb */
/*      carousel    */
.carousel {
    height: 100vh;  
    position: relative;
}
.carousel .carousel-inner .item {
    height: 100vh;
}
/*     slides dotted overlay     */
.overlay {
    background-image: url(../images/overlays/pattern.png);
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    top: 0;
    left: 0;
    opacity:0.7;
}
/*      desktop slideshow images      */
.carousel-fade .slides .slide-1, .slide-2, .slide-3, .slide-4, .slide-5, .slide-6 {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
}
.carousel-fade .carousel-inner .item {
  -webkit-transition-property: opacity;
  transition-property: opacity;
}
.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  opacity: 0;
}
.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}
.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
/*      desktop slideshow images      */
#preload-images {
background: url(../images/hero-desktop/hero-1.jpg) no-repeat -9999px -9999px;
        background: url(../images/hero-desktop/hero-1.jpg) no-repeat -9999px -9999px,
        url(../images/hero-desktop/hero-2.jpg) no-repeat -9999px -9999px,
        url(../images/hero-desktop/hero-3.jpg) no-repeat -9999px -9999px,
        url(../images/hero-desktop/hero-4.jpg) no-repeat -9999px -9999px,
        url(../images/hero-desktop/hero-5.jpg) no-repeat -9999px -9999px,
        url(../images/hero-desktop/hero-6.jpg) no-repeat -9999px -9999px;
}
.carousel-fade .slides .slide-1, .slide-2, .slide-3, .slide-4, .slide-5, .slide-6 {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
}
.carousel-fade .slides .slide-1 {
    background-image: url(../images/hero-desktop/hero-1.jpg); 
}
.carousel-fade .slides .slide-2 {
    background-image: url(../images/hero-desktop/hero-2.jpg);
}
.carousel-fade .slides .slide-3 {
    background-image: url(../images/hero-desktop/hero-3.jpg);
}
.carousel-fade .slides .slide-4 {
    background-image: url(../images/hero-desktop/hero-4.jpg);
}
.carousel-fade .slides .slide-5 {
    background-image: url(../images/hero-desktop/hero-5.jpg);
}
.carousel-fade .slides .slide-6 {
    background-image: url(../images/hero-desktop/hero-6.jpg);
}
/*     mobile slideshow images      */
@media screen and (min-width: 300px) and (max-width: 768px) {
    #preload-images {
    background: url(../images/hero-mobile/hero-1-mobile.jpg) no-repeat -9999px -9999px;
            background: url(../images/hero-mobile/hero-1-mobile.jpg) no-repeat -9999px -9999px,
            url(../images/hero-mobile/hero-2-mobile.jpg) no-repeat -9999px -9999px,
            url(../images/hero-mobile/hero-3-mobile.jpg) no-repeat -9999px -9999px,
            url(../images/hero-mobile/hero-4-mobile.jpg) no-repeat -9999px -9999px,
            url(../images/hero-mobile/hero-5-mobile.jpg) no-repeat -9999px -9999px,
            url(../images/hero-mobile/hero-6-mobile.jpg) no-repeat -9999px -9999px;
    }
    .carousel-fade .slides .slide-1, .slide-2, .slide-3, .slide-4, .slide-5 {
        background-position: center top;
        background-repeat: no-repeat;
        background-size: cover;
        height: 100vh;
    }
    .carousel-fade .slides .slide-1 {
        background-image: url(../images/hero-mobile/hero-1-mobile.jpg); 
    }
    .carousel-fade .slides .slide-2 {
        background-image: url(../images/hero-mobile/hero-2-mobile.jpg);
    }
    .carousel-fade .slides .slide-3 {
        background-image: url(../images/hero-mobile/hero-3-mobile.jpg);
    }
    .carousel-fade .slides .slide-4 {
        background-image: url(../images/hero-mobile/hero-4-mobile.jpg);
    }
    .carousel-fade .slides .slide-5 {
        background-image: url(../images/hero-mobile/hero-5-mobile.jpg);
    }
    .carousel-fade .slides .slide-6 {
        background-image: url(../images/hero-mobile/hero-6-mobile.jpg);
    }
}
/*  tablet slideshow images     */
@media screen and (min-width:768px) and (max-width: 850px) {
    #preload-images {
    background: url(../images/hero-tablet/hero-1-tablet.jpg) no-repeat -9999px -9999px;
            background: url(../images/hero-tablet/hero-1-tablet.jpg) no-repeat -9999px -9999px,
            url(../images/hero-tablet/hero-2-tablet.jpg) no-repeat -9999px -9999px,
            url(../images/hero-tablet/hero-3-tablet.jpg) no-repeat -9999px -9999px,
            url(../images/hero-tablet/hero-4-tablet.jpg) no-repeat -9999px -9999px,
            url(../images/hero-tablet/hero-5-tablet.jpg) no-repeat -9999px -9999px,
            url(../images/hero-tablet/hero-6-tablet.jpg) no-repeat -9999px -9999px;
    }
    .carousel-fade .slides .slide-1, .slide-2, .slide-3, .slide-4, .slide-5 {
        background-position: center top;
        background-repeat: no-repeat;
        background-size: cover;
        height: 100vh;
    }
    .carousel-fade .slides .slide-1 {
        background-image: url(../images/hero-tablet/hero-1-tablet.jpg); 
    }
    .carousel-fade .slides .slide-2 {
        background-image: url(../images/hero-tablet/hero-2-tablet.jpg);
    }
    .carousel-fade .slides .slide-3 {
        background-image: url(../images/hero-tablet/hero-3-tablet.jpg);
    }
    .carousel-fade .slides .slide-4 {
        background-image: url(../images/hero-tablet/hero-4-tablet.jpg);
    }
    .carousel-fade .slides .slide-5 {
        background-image: url(../images/hero-tablet/hero-5-tablet.jpg);
    }
    .carousel-fade .slides .slide-6 {
        background-image: url(../images/hero-tablet/hero-6-tablet.jpg);
    }
}
/*  general media queries    */
@media screen and (min-width: 980px){
    .hero { width: 980px; }    
    }
}
@media screen and (max-width: 640px){
    .hero h1 { font-size: 4em; }    
    }
}
/* New in Boostrap 3.3: "Added transforms to improve carousel performance in modern browsers."
Override the 3.3 new styles for modern browsers & apply opacity */
@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right,
    .carousel-fade .carousel-inner > .item.active {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}