/***
------------------------------------------------------------------------------------------
HERO SLIDER 
------------------------------------------------------------------------------------------
***/


/****LAYOUT *******/


#slides-main, #slides-main:after, #slides-main .slide-image, #slides-main .abs-mask, #slides-main .slide {
  position: absolute;
  /*position: fixed;*/
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.mask {
  overflow: hidden;
}

#hero-slider {
  position: relative;
  height: 100svh;
  display: flex;
  clip-path: inset(0px);
}

#hero-slider:not(.ready) {
  visibility: hidden;
}



#slideshow {
  position: relative;
  flex: 1 1 80%;
  display: flex;
  align-items: flex-end;
  padding: 0;
}

#slides-main:after {
  content: '';
  background-color: rgba(0, 0, 0, 0);
  z-index: 100;
}

#slides-main .slide-image {
  z-index: -1;
  background-color: var(--blackbg);
}
.slide-image img {
  object-fit: cover !important;
  height: 100% !important;
  width: 100% !important;
  object-position: center;
  opacity: 0.6;
}


/**** LEGENDAS ****/

#slides-aux {
  position: absolute;
  width: 100%;
  height: 100% !important;
}

#slides-aux .slide-title {

  /** hide titles ***/
  /*visibility: hidden !important;*/
  
  position: absolute;
  z-index: 100;
  background-color: transparent;
  margin: 0 auto !important;
  width: 100% !important;
  height: 100% !important;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  font-size: var(--mediumsize);
  letter-spacing: var(--letterspacing-big);
  font-weight: 400;
  line-height: 150%;
  color: var(--whitetext);
  text-align: center;
  padding: 80px;
}

#slides-aux .slide-title a {
  color: #fff !important;
  text-decoration: none !important;
}







/***** INITIAL ANIMATION *****/

#hero-slider .current,
#hero-slider .sep:before {
  opacity: 0;
  transition: opacity .4s .1s;
}

#hero-slider.ready .current,
#hero-slider.ready .sep:before {
  opacity: 1;
}

#hero-slider:not(.loaded) .slide:not(:first-child) {
  visibility: hidden;
}



/*** SLIDESHOW - START ***/
#slides-main {
  overflow: hidden;
}

#slides-main .abs-mask {
  overflow: hidden;
}

#slides-main .slide {
  overflow: hidden;
  will-change: transform;
}

#slides-main .slide .slide-image {
  will-change: transform;
}

#slides-main .slide.prev {
  z-index: 5;
  transform: translate3d(-100%, 0, 0);
  transition: 1s cubic-bezier(0.694, 0, 0.335, 1);
}

#slides-main .slide.prev .abs-mask {
/* take out image self animation to become fixed ***/
  /*transform: translateX(80%);*/
  transform: translateX(100%);
  transition: 1s cubic-bezier(0.694, 0, 0.335, 1);
}

#slides-main .slide.active {
  z-index: 10;
  transform: translate3d(0, 0, 0);
  transition: transform 1s cubic-bezier(0.694, 0, 0.335, 1);
}

#slides-main .slide.active .abs-mask {
  transform: translate3d(0, 0, 0);
  transition: transform 1s cubic-bezier(0.694, 0, 0.335, 1);
}

#slides-main .slide:not(.prev):not(.active) {
  z-index: -1;
  transform: translate3d(100%, 0, 0);
}

#slides-main .slide:not(.prev):not(.active) .abs-mask {
/* take out image self animation to become fixed ***/
/*  transform: translateX(-50%);*/
transform: translateX(-100%);
}

#hero-slider.prev #slides-main .slide.prev {
  transform: translate3d(100%, 0, 0);
}

#hero-slider.prev #slides-main .slide.prev .abs-mask {
/* take out image self animation to become fixed ***/
  /*transform: translate3d(-80%, 0, 0);*/
    transform: translate3d(-100%, 0, 0);
}

#hero-slider.prev #slides-main .slide:not(.prev):not(.active) {
  transform: translate3d(-100%, 0, 0);
}

#hero-slider.prev #slides-main .slide:not(.prev):not(.active) .abs-mask {
/* take out image self animation to become fixed ***/
 /* transform: translate3d(50%, 0, 0);*/
   transform: translate3d(100%, 0, 0);
}

#slides-aux .slide:not(.active) {
  /*transform: translateX(-5%);*/
  opacity: 0;
}

#slides-aux .slide.prev {
  transition: transform .0s .2s, opacity .4s;
}

#slides-aux .slide.active {
  transition: opacity 0.6s 0.8s, transform 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0.8s;
}


/************** SLIDER NAV *****************/


#hero-slider .heronav {
  z-index: 999;
  position: absolute;
  bottom: 50px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 220px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all .2s linear;
}


/** hide on scroll -- js in the module ******/
#hero-slider .heronav.hide {
  opacity: 0;
  pointer-events: none;
}


/**** NUMBERS ****/

#slider-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
  font-family: var(--primaryfont) !important;
  font-variant-numeric: tabular-nums;
  width: auto;
}


#slider-nav .current {
  color: #fff;
}


#slider-nav .sep {
  position: relative;
  color: var(--whitetext);
  margin: 0 10px;
}


#slider-nav .total {
  color: rgba(255,255,255,0.6);
}

#slider-nav > span {
  font-size: var(--basesize);
}

/**** ARROWS ****/


#hero-slider .slider-arrow {
  background: transparent;
  border: 0;
  color: #fff;
  cursor: pointer;
  z-index: 5;
  opacity: .7;
  padding: 0 !important;
  height: 40px;
  width: 40px;
}
#hero-slider .slider-arrow span {
  font-size: 40px;
  font-weight: 200;
}


#hero-slider .slider-arrow:hover{ opacity:1; }