/* ---------------------------------------- @HERO  */

section.hero {
    padding:0;
    margin:0;
    overflow: hidden;
  }
section.hero div.carousel.slide {
        position: relative;
        height: 788px;
        overflow: hidden;
    }
section.hero div.carousel.slide img {
   
    }
 
div.heroBottomGradientOverlay {
      background-image: linear-gradient( transparent, black );
     width: 100%;
     height: 50%;
     position: absolute;
     bottom: 0;
     opacity: 0.69;
     z-index: 6;
    }


 



section.hero .carousel-item {
  transition: transform 2.6s ease-in-out;
}

section.hero .carousel-fade .active.carousel-item-start,
section.hero .carousel-fade .active.carousel-item-end {
  transition: opacity 0s 2.6s;
}


section.hero .carousel-control-prev,
section.hero .carousel-control-next {
  position: absolute;
  top:0 ;
  font-size: 4rem;
  color: white;
  z-index: 200;
  opacity: 1;
}
section.hero .carousel-control-prev:hover > .carousel-control-prev-icon i,
section.hero .carousel-control-next:hover > .carousel-control-next-icon i {
  opacity: 0.66;
  text-shadow:  3px 3px 6px #0000009c;
}
section.hero .carousel-control-prev {
  left:6px;
}
section.hero .carousel-control-next {
  right:6px;
}
section.hero .carousel-control-next-icon,
section.hero .carousel-control-prev-icon {
  background-image: none;
  display: contents;
}
section.hero .carousel-control-next-icon i,
section.hero .carousel-control-prev-icon i{
  opacity: 0.24;
}

.beelocal section.hero .carousel-control-prev-icon:hover > i,
.beelocal section.hero .carousel-control-next-icon:hover > i{
    text-shadow: 3px 3px 11px #000000d6;
    opacity: 1;
    z-index: 300;
}
section.hero .hero-heading-mbl h1 {
  font-size: 42px;
  font-family: Helvetica, Verdana, Arial; 
  font-weight: bold;

}
section.hero .hero-heading {
  text-align: left; 
}
section.hero .hero-heading h1 {
  font-size: 70px; 
  font-family:   Helvetica, Arial;
  font-weight: 400;
  color: white;
  text-shadow: 2px 2px 13px #515151;
}
section.hero .hero-content-mbl {

}
section.hero .hero-content-mbl p {
  font-size: 13px;
  margin-top: 55px;
  color:#c6c6c6;
}
section.hero .hero-content { 
  text-align: left;
}
section.hero .hero-content p {
  letter-spacing: 0.9px;

}
section.hero .carousel-caption-left {
  text-shadow: none;
  z-index: 100;
  bottom:42px;
}



 

section.hero .carousel-inner .carousel-caption img{
    position: absolute; 
  }

  section.hero .carousel-inner .carousel-caption img.mobile{
  margin-left: auto; 
  margin-right: auto; 
}
  section.hero .carousel-inner .carousel-caption img.desktop{
    bottom:320px;
  }
  section.hero .carousel-inner .carousel-caption img.desktop.pos-top{
    bottom:370px;
  }

  section.hero .carousel-inner .carousel-caption.caption-left img{     
     left:30px;
     margin-left: unset;
     margin-right: unset;
  }

  section.hero .carousel-inner .carousel-caption.caption-right img{
    right: 30px;
     margin-left: unset;
     margin-right: unset;
  }
  section.hero .carousel-inner .carousel-caption.caption-right .hero-heading h1{
    text-align: right;
  }
  section.hero .carousel-inner .carousel-caption.caption-right .hero-content {
    text-align: right;
  }  



  section.hero .carousel-inner .carousel-caption img.portrait {
    width: auto;
    max-height: 310px;  
  }
  section.hero .carousel-inner .carousel-caption img.landscape {
 
    max-height: 190px;
    max-width: unset; 
  }
 

  section.hero .carousel-indicators {
    text-align: center;
    z-index: 100;
  }
  section.hero .carousel-indicators li {
    height: 15px;
    width: 15px;
    z-index: 200;
  }
  section.hero .carousel-indicators .active {
    background: rgba(184,155,208,0.58);
    height: 17px;
    width: 17px;
  }


@media screen and (min-width: 768px){
  section.hero .carousel-caption {
    right: unset;
    left: unset;
    padding-bottom: 132px;
    /* padding-left: 0;*/
    /* padding-right: 0;*/
    /* margin-left: auto; */
    /* margin-right: auto; */
    /* display: block; */
    }
}

section.hero .carousel-inner .carousel-item {
  height:788px;
}

@media only screen and (max-width: 600px) {
        .mobile-85  { height:88vh}
        .mobile-100 { height:100vh}
        
        
        section.hero .carousel-inner .carousel-caption {
            height: unset; 
            right:unset; 
        }
        
        section.hero .carousel-inner .carousel-caption img{
            right: unset;
            width: 90%;
        }
        
        section.hero .carousel-inner .carousel-caption img.pos-top {
            bottom:390px;
            left: unset;right:unset; 
        }
        section.hero .carousel-inner .carousel-caption img.pos-middle {
            bottom:280px;
            left: unset;right:unset; 
        }
        section.hero .carousel-inner .carousel-caption img.pos-bottom {
            bottom:60%; 
            left: 0; 
            right: 0; 
            margin-left: auto; 
            margin-right: auto; 
        }

        section.hero .carousel-caption {
            bottom:7vh;
            right:unset;
            left:unset;
        }
        section.hero .carousel-inner .carousel-item {
            height:88vh;
        }
        section.hero div.carousel.slide {
            height:88vh;
            }
}



 

  @media (max-width: 667px) {
    section.hero {
      margin-top: 0px;
    }
  }
  @media (max-width: 992px) {
    section.hero .hero-heading-mbl {
      margin-top: 138px;
    }
  }
  @media (min-width: 992px) {
    section.hero .hero-heading-mbl {
      display: none;
    }
  }
  @media (max-width: 992px) {
    section.hero .hero-heading {
      display: none;
    }
  }
  @media (min-width: 992px) {
    section.hero .hero-content-mbl {
      display: none;
    }
  }
  @media (max-width: 992px) {
    section.hero .hero-content {
      display: none;
    }
  }
  @media (max-width: 992px) {
    section.hero .carousel-indicators li {
      height: 18px;
      width: 18px;
      border-radius: 0;
    }
  }
  @media (max-width: 992px) {
    section.hero .carousel-indicators .active {
      height: 20px;
      width: 20px;
      border-radius: 0;
    }
  }
  @media (max-width: 992px) {
    section.hero .item {
      margin-top: 90px;
    }
    section.hero .item img {
      height: 280px;
      min-width: 715px;
      margin-left: -265px;
    }
  }


.beelocal section.hero ol.carousel-indicators li.active{
    height:15px;
    width:15px;
    background:rgba(184,155,208);
    opacity:1;
  }

 .beelocal ol.carousel-indicators li{
    margin: 6px;
    border: 1px transparent;
    background-color: white;
    opacity: 0.2;
 }
.beelocal .carousel-inner > .item{
     height:510px;
   }
.beelocal section.hero .hero-content p{
     font-size: 2.511rem;
     color: #e5c6fa;
     padding-left: 12px;
}