/* component styles */
slideshow-component {}

/* section styles */
/* controls */
slideshow-component {
  .container.controls-container {
    position: relative; padding: 0 7.5px;
    @media (max-width: 1023px){
      & { padding: 0 0; height: auto; }
    }
  }
  .rel-slideshow__controls {
    border:none;
    @media (min-width: 1024px){
      & { position: absolute; right: 7.5px; bottom: 32px; z-index: 2; }
    }
    .slider-counter {
      display: none!important;
      @media (max-width: 1023px){
        & { position: absolute; z-index: 2; left: 20px; bottom: 29px; display: block!important; }
      }
      .slideshow__control-wrapper {
        position: relative;
        .slider-counter__link { padding: 0; margin: 0 12px 0 0; height: 6px; width: 6px; background-color: var(--rel-orange-20); border-radius: 50%;
          &.slider-counter__link--active { background-color: var(--rel-orange-60); }
        }
      }
      span { display: none; }
    }
    .slider-button { display: flex; justify-content: center; align-items: center; padding: 3px; height: 42px; width: 42px; box-sizing: border-box; color: white; border: 1px solid white; border-radius: 50%; background: transparent;
      @media (min-width: 1024px){
        & { height: 50px; width: 50px; }
      }

      &:hover,&:hover:focus {
          @media (min-width: 1025px){ background: white; color: var(--rel-green); }
      }
      &:active {
          @media (max-width: 1024px){ background: white; color: var(--rel-green); }
      }

      /* prev btn */
      &.slider-button--prev { margin-right: 12px;
        @media (max-width: 1023px){
          & { position: absolute; right: calc(20px + 42px); bottom: 12px; z-index: 2; }
        }
      }
      /* next btn */
      &.slider-button--next {
        @media (max-width: 1023px){
          & { position: absolute; right: calc(20px); bottom: 12px; z-index: 2; }
        }
      }
      /* pause btn */
      &.slideshow__autoplay { display: none;}
    }

  }
}
/* Banner */
.rel-slideshow {
  /* wrapper */
  .slideshow__text-wrapper.banner__content { padding:120px 0 0; min-height: 700px; height: 77vh;
    @media (max-width: 1023px){
      & { padding: 0 0 68px; display: flex; flex-direction: column; justify-content: flex-end; height: 500px; min-height: 500px; }
    }
  }

  .slideshow__text.banner__box { display: flex; flex-direction: column; align-items: start; max-width: 600px; padding: 0; background: transparent; text-align: left; }
  .banner__box>*+* { margin-top: 0; }

  .slide-title { color: white; margin-bottom: 20px;
    @media (max-width: 1023px){
      & { margin-bottom: 8px; }
    }
  }


  .slide-text {
    color: white; font-size: 20px; font-style: normal; font-weight: 400; line-height: 31px;

    @media (max-width: 1023px){ font-size: 16px; line-height: 25px; }
  }
  .actions { margin-top: 32px;
    @media (max-width: 1023px){
      & { margin-top: 20px;}
    }
  }

}