/*

Fade content bs-carousel with hero headers

Code snippet by maridlcrmn (Follow me on Twitter @maridlcrmn) for Bootsnipp.com

Image credits: unsplash.com

*/



/********************************/

/*       Fade Bs-carousel       */

/********************************/

.hero h2, .hero h1{text-transform: capitalize; font-size: 46px; font-family: 'Oswald', sans-serif; font-weight: 700; color: #69b22c;}
.hero p{text-transform: capitalize;}
.hero h1 strong{font-size: 60px;}
.fade-carousel {

    position: relative;

    height: 100vh;

    margin-top: -21px;

}

.fade-carousel .carousel-inner .item {

    height: 100vh;

}

.fade-carousel .carousel-indicators > li {

    margin: 0 2px;

    background-color: #ffffff;

    border-color: #ffffff;

    opacity: .7;

}

.fade-carousel .carousel-indicators > li.active {

  width: 10px;

  height: 10px;

  opacity: 1;

}



/********************************/

/*          Hero Headers        */

/********************************/

.hero {

    position: absolute;

    width: 84%;

    top: 35%;

    left: 50%;

    z-index: 3;

    color: #fff;

    text-align: center;

    text-transform: uppercase;

    text-shadow: 1px 1px 0 rgba(0,0,0,.75);

      -webkit-transform: translate3d(-50%,-50%,0);

         -moz-transform: translate3d(-50%,-50%,0);

          -ms-transform: translate3d(-50%,-50%,0);

           -o-transform: translate3d(-50%,-50%,0);

              transform: translate3d(-50%,-50%,0);

}

/*.hero h1 {

    font-size: 6em;    

    font-weight: bold;

    margin: 0;

    padding: 0;

}*/



.flexslider .flex-viewport .slides  .hero {

    opacity: 0;

    -webkit-transition: 2s all ease-in-out .1s;

       -moz-transition: 2s all ease-in-out .1s; 

        -ms-transition: 2s all ease-in-out .1s; 

         -o-transition: 2s all ease-in-out .1s; 

            transition: 2s all ease-in-out .1s; 

}

.flexslider .flex-viewport .slides  .flex-active-slide .hero {

    opacity: 1;

    -webkit-transition: 2s all ease-in-out .1s;

       -moz-transition: 2s all ease-in-out .1s; 

        -ms-transition: 2s all ease-in-out .1s; 

         -o-transition: 2s all ease-in-out .1s; 

            transition: 2s all ease-in-out .1s;    

}



/********************************/

/*            Overlay           */

/********************************/

/*.overlay {

    position: absolute;

    width: 100%;

    height: 100%;

    z-index: 2;

    background-color: #080d15;

    opacity: .7;

}

*/

/********************************/

/*          Custom Buttons      */

/********************************/

.btn.btn-lg {padding: 10px 40px;color: #151515;}

.btn.btn-hero,

.btn.btn-hero:hover,

.btn.btn-hero:focus {

    color: #f5f5f5;

    background-color: transparent;

    border-color: #ffffff;

    outline: none;

    margin: 20px auto;

    border-radius: 4px;

        padding: 12px 22px;

}

.hero i{padding-right: 13px;}

/********************************/

/*       Slides backgrounds     */

/********************************/

.fade-carousel .slides .slide-1, 

.fade-carousel .slides .slide-2,

.fade-carousel .slides .slide-3 {

  height: 110vh;

  background-size: cover;

  background-position: center center;

  background-repeat: no-repeat;

}

.fade-carousel .slides .slide-1 {

  background-image: url(../img/slide1.jpg); 

}

.fade-carousel .slides .slide-2 {

  background-image: url(../img/slide1.jpg);

}

.fade-carousel .slides .slide-3 {

  background-image: url(../img/slide1.jpg);

}



/********************************/

/*          Media Queries       */

/********************************/

@media screen and (min-width: 980px) and (max-width: 1023px){

    .hero { width: 980px; }    

}

@media screen and (max-width: 767px){

    .hero h1{font-size: 23px;}    

}