/*
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       */
/********************************/
.carousel{
font-family: Butler-Light;
}

.carousel h4{font-family: yrsa-regular;font-size: 16px;letter-spacing: 2px;}


.fade-carousel {
    position: relative;
    height: 85vh;
    display: block;
}
.fade-carousel .carousel-inner .item {
    height: 85vh;
}
.fade-carousel .carousel-indicators > li {
    margin: 0 8px;
    border-color: #fff;
    opacity: .7;
}
.fade-carousel .carousel-indicators > li.active {
  width: 12px;
  height: 12px;
  opacity: 1;
}

.carousel-indicators{
    width: 100%;
    left: 30%;
}

/********************************/
/*          Hero Headers        */
/********************************/


.hero {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    color: #fff;
    text-align: center;
    -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 {
    margin: 0;
    padding: 0;
}

#bs-carousel{
    overflow-x: hidden;
    overflow-y: hidden;
}

#flag-overlay img{
        height: 100%;
}

#flag-overlay i:hover{
    color: white;
}

#flag-overlay i{
        position: absolute;
        top: 40%;
        left: 25%;
        opacity: .3;
}

#flag-overlay{
    position: absolute;
    height: 63px;
    right: 0;
    bottom: 20px;
    z-index: 99;
    z-index: -1;
    cursor: pointer;

        color: gray;
}

.fade-carousel .carousel-inner .item .hero {
    /*opacity: .5;*/
    /* -webkit-transition: 1s 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: 1s all ease-in-out .1s; */
}
.fade-carousel .carousel-inner .item.active .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; */
}


/********************************/
/*          Custom Buttons      */
/********************************/
.btn.btn-lg {padding: 10px 40px;}
.btn.btn-hero,
.btn.btn-hero:hover,
.btn.btn-hero:focus {
    color: #fff;
    border-color: #fff;
    outline: none;
    /* margin: 20px auto; */
    margin: 20px;
    margin-left: 5px;
    margin-right: 5px;
    font-size: 16px;
    background-color: transparent;
}

/********************************/
/*       Slides backgrounds     */
/********************************/
.fade-carousel .slides .slide {
  height: 85vh;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  overflow-x: hidden;
}
.fade-carousel .slides .slide-1 {
  /* background-color: black; */
  background-image: url(https://ununsplash.imgix.net/photo-1416339134316-0e91dc9ded92?q=75&fm=jpg&s=883a422e10fc4149893984019f63c818);
}




.hero.completed {
    text-align: left;
    top: 50%;
    left: 83%;
    width: 35%;
    float: right;
    z-index: 3;
    color: #000;
    -moz-transform: translate3d(-50%,-50%,0);
    -ms-transform: translate3d(-50%,-50%,0);
    -o-transform: translate3d(-50%,-50%,0);
    padding: 2%;
    background-color: rgba(255, 255, 255, 0.77);
    border: 1px solid rgb(245, 245, 245);
}

.see-features:hover{
    background-color: rgba(255, 255, 255, 0.27)!important;
}

.view-available-units:hover{
    background-color: rgba(255, 255, 255, 0.27)!important;
}


/********************************/
/*          Media Queries       */
/********************************/
@media screen and (min-width: 980px){
    .hero {
      /* width: 980px; */
      width: 40%;
    } 

    .hero.gallery {
      /* width: 980px; */
      width: 80%;
      /*background-color: rgba(0, 0, 0, 0.85);*/
      background-color: rgba(48, 55, 111, 0.81);
      /*padding: 2%;*/
    }    
}

@media screen and (max-width: 640px){
    .hero h1 { 
        
        font-size: 4em;
        margin-top: 0rem;
    }    
}

@media screen and (max-width: 384px){
    .btn.btn-hero{ 
        
        font-size: 12px;
    }    
}