

.slider-nav {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border-radius: 45px;

  @media (max-width: 767px) { 
    justify-content: center;
  }

  .slider-prev,
  .slider-next {
    
        transition: all .2s ease-out;
        overflow: hidden;
        position: relative;
        border: 1px solid #15011d;
        background: #fff;
        border-radius: 50%; 
        color: #15011d;

        &::before {
            content: '';
            display: block;
            background: #01d1d0;

            /* @if $size == 50% {
            border-radius: 50%;
            } @else {
            border-radius: #{$size - 2px};
            } */
             border-radius: 50%;

            height: calc(100% + 2px);
            width: calc(100% + 2px);
            position: absolute;
            left: -1px;
            top: -1px;
            transform: translate(-100%, 0) rotate(10deg);
            transform-origin: top left;
            transition: transform .2s ease-out;            
            z-index: -1;
        }

        &:hover,
        &.hover,
        &:focus-within {
            color: #15011d;
            border-color: #01d1d0;
            box-shadow: 0 6px 30px 0 rgba(#000, .2);
            transform: scale(1.2);
            z-index: 1;

            &::before {
            transform: translate(0, 0);
            }
        }

    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0;

    &::after {
      content: '';
      width: 14px;
      height: 24px;
      display: block;
      background: url(../images/icon-chevron-r-dark.svg) no-repeat center;
    }

    &:hover {
      transform: translate(0, 0);
      box-shadow: none;
    }

    &:focus {
     transform: translate(0, 0);
     box-shadow: none !important;
     outline: none !important;
     &:before {
       transform: translate(0, 0);
     }
   }

    &.inactive {
      pointer-events: none;
      opacity: .2;
      transform: none;

      &::before {
        display: none;
      }
    }
  }

  .slider-prev {
    &::before {
      transform: translate(100%, 0);
    }

    &::after {
      transform: rotate(180deg);
    }
  }
}

.slider {
  width: 100%;
  position: relative;

  .slider-paginator {
    display: flex;
    margin: 0 16px;

    &.hidden {
      display: none;
    }

    li {
      border-radius: 45px;
      height: 15px;
      width: 15px;
      flex-shrink: 0;
      opacity: .2;
      border: 2px solid black;
      cursor: pointer;

      &.active {
        opacity: 1;
        background: black;
        cursor: pointer;
      }

      & + li {
        margin-left: 8px;
      }
    }
  }

  .slider-list {
    position: relative;
  }

  .slide {
    width: 100%;
  }

  .box-title {
    @media (max-width: 767px) {
      font-size: 28px;
    }
  }

  &.slider-boxed {
    .slider-window {
      overflow: hidden;
      width: 100%;
    }

    .slider-list {
      display: flex;
      flex-flow: row nowrap;
      justify-content: flex-start;
      margin: 0;
    }

    .slide {
      white-space: normal;
      flex-shrink: 0;
      margin-left: 0;

    }

    .box-inner {
      @media (max-width: 767px) {
        flex-grow: 1;
      }
    }
  }

  &.slider-fader {
    .slide {
      display: block;
      position: absolute;
      opacity: 0;

      &.active,
      &.active-fading-in {
        z-index: 1;
      }

      &.active,
      &.active-fading-in,
      &.active-fading-out {
        opacity: 1;
      }

      @media (min-width: 768px) {
        padding-bottom: 96px;
      }
    }

    .slider-list {
      overflow: visible !important; 
    }

    .slide-bg-wrapper {
      overflow: hidden;
      font-size: 0;
      line-height: 0;
      height: 400px;
      width: 100%;
      position: relative;

      @media (max-width: 767px) { 
        height: 340px;
        margin-bottom: -72px;
      }
    }

    .slide-bg {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transform: translateX(0);
      transition: transform .2s ease;
    }

    .active-fading-out .slide-bg {
      transform: translateX(-15%);
    }

    .active-fading-in .slide-bg {
      transform: translateX(15%);
    }

    .active:not(.active-fading-out) .slide-bg {
      transform: translateX(0);
    }

    .slide-reveal {
      background: linear-gradient(to right, rgba(#f7f7f7, 0) 0%, rgba(#f7f7f7, 1) 10%, rgba(#f7f7f7, 1) 90%, rgba(#f7f7f7, 0) 100%);
      width: 130%;
      height: 101%;
      position: absolute;
      top: 0;
      right: -15%;
      transform-origin: 0 50%;
      transform: scaleX(1.1);
      transition: transform .3s ease, opacity .3s ease;
    }

    .active-fading-out .slide-reveal {
      transform-origin: 100% 50%;
    }

    .active-fading-in .slide-reveal {
      transform-origin: 100% 50%;
    }

    .active:not(.active-fading-out) .slide-reveal {
      transform-origin: 0 50%;
      transform: scaleX(0);
    }


    .slide-info {
      background: #fff;
      border-radius: 4px;
      box-shadow:  0 25px 100px 0 rgba(#000, .15);

      @media (min-width: 768px) {
        width: calc(50% + 16px);
      }
    }

    .box {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      opacity: 0;
      transition: all .5s ease-in-out;
      min-height: 375px;
      padding: 40px 32px 32px;

      @media (max-width: 767px) { 
        min-height: 300px;
        padding: 24px;
      }
    }

    .slide.active,
    .slide.active-fading-in,
    .slide.active-fading-out {
      .box {
        opacity: 1;
      }

    }
    .box-logo {
      margin-bottom: 24px;
      display: block;
    }

    .box-bottom-logo {
      bottom: 32px;
      right: 40px;
    }

    .slide-title-hidden {
      display: none;
    }

    .box-title {
      margin-bottom: 8px;

      @media (max-width: 767px) { 
        margin-bottom: 16px;
      }
    }

    .more {
      margin-top: auto;
    }

    .slider-bottom {
      z-index: 2;
      display: flex;
      flex-direction: column;

      @media (max-width: 767px) { 
        margin-top: 40px;
        position: relative;
        align-items: center;
      }

      @media (min-width: 768px) {
        position: absolute;
        top: 296px;
        left: calc(50% + 16px);
        padding-left: 30px;
        align-items: flex-start;
      }

      @media (min-width: 768px) {
        width: 328px;
      }

      @media (min-width: 992px) {
        width: 448px;
      }

      @media (min-width: 1200px) {
        width: 538px;
      }
    }

    .slider-nav {
      @media (min-width: 768px) {
        margin-bottom: 24px;
      }
    }
  }
}




/* Slider */
.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}
