@charset "UTF-8";
/* * SimbelShop * ==============================================================
   Slider / Carrusel
   ========================================================================== */
.slick,
.slick_with_nav{
    background-color: transparent;
    box-sizing: border-box;
}

.slick img,
.slick_with_nav img{
    display: block;
    width: 100%;
}

.slick::before,
.slick::after,
.slick div::before,
.slick div::after,
.slick_with_nav::before,
.slick_with_nav::after,
.slick_with_nav div::before,
.slick_with_nav div::after{
    content: " ";
    display: table;
}

.slick::after,
.slick div::after,
.slick_with_nav::after,
.slick_with_nav div::after{
    clear: both;
}

.slick .slick-slide,
.slick_with_nav .slick-slide{
  float: left;
}


.slick{
  position: relative;
  overflow: hidden;
  z-index: 7100 !important;
}

.slick .slick-track{
    margin-right: auto;
    margin-left: auto;
}

.slick .slick-slide{
    z-index: 7120 !important; 
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
   Carrusel
   - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
.slick.slick_carousel,
.slick_with_nav.slick_carousel{
  position: relative;
  background-color: var(--white);
}

.slick.slick_carousel .slick-list,
.slick_with_nav.slick_carousel .slick-list{
    position: relative;
    overflow: hidden;
}

.slick.slick_carousel.slickNoArrows{
    padding-right: 0!important;
    padding-left: 0!important;
}
    
@media (max-width: 350px){
    .slick.slick_carousel,
    .slick_with_nav.slick_carousel{
      padding-right: calc(40px * 0.8);
      padding-left: calc(40px * 0.8);
    }
}
    
@media (min-width: 351px){
    .slick.slick_carousel,
    .slick_with_nav.slick_carousel{
      padding-right: calc(30px * 1);
      padding-left: calc(30px * 1);
    }
}
    
@media (min-width: 500px){
    .slick.slick_carousel,
    .slick_with_nav.slick_carousel{
      padding-right: calc(30px * 1.5);
      padding-left: calc(30px * 1.5);
    }
}
    
@media (min-width: 768px){
    .slick.slick_carousel,
    .slick_with_nav.slick_carousel{
      padding-right: calc(30px * 1.5);
      padding-left: calc(30px * 1.5);
    }
}
    
@media (min-width: 1024px){
    .slick.slick_carousel,
    .slick_with_nav.slick_carousel{
      padding-right: calc(50px * 1.5);
      padding-left: calc(50px * 1.5);
    }
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
   Slider Arrows Styles
   - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
.slickPrev{
  left: 2%;
  background-image: url("../img/button_slider_left.svg");
}

.slickNext{
  right: 2%;
  background-image: url("../img/button_slider_right.svg");
}

.slickPrev,
.slickNext{
  transition: all 0.7s ease;
  position: absolute;
  z-index: 7140;
  top: 50%;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  border: none !important;
  padding: 0 !important;
  text-indent: -9999px;
  overflow: hidden;
}

@media (max-width: 767px){
  .slickPrev,
  .slickNext{
    width: 30px;
    height: 30px;
    margin-top: calc(-1 * calc(30px / 2));
  }
}

@media (min-width: 768px){
    .slickPrev,
    .slickNext{
        width: 30px;
        height: 30px;
        margin-top: calc(-1 * calc(30px / 2));
        opacity: calc(75 / 100);
        filter: alpha(opacity=75);
        -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(opacity=75)";
    }

    .slickPrev:focus,
    .slickPrev:hover,
    .slickNext:focus,
    .slickNext:hover{
        opacity: calc(100 / 100);
        filter: alpha(opacity=100);
        -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(opacity=100)";
    }
}

@media (min-width: 1024px){
  .slickPrev,
  .slickNext{
    width: 50px;
    height: 50px;
    margin-top: calc(-1 * calc(50px / 2));
  }
}

.slick_carousel .slickPrev{
  background-image: url("../img/button_carousel_left.svg");
}

.slick_carousel .slickNext{
  background-image: url("../img/button_carousel_right.svg");
}

.slick_carousel.slick_arrows_opaque .slickPrev{
    background-image: url("../img/button_carousel_left_opaque.svg");
}

.slick_carousel.slick_arrows_opaque .slickNext{
    background-image: url("../img/button_carousel_right_opaque.svg");
}

@media (max-width: 350px){
  .slick_carousel .slickPrev{
    left: 0; }
  
  .slick_carousel .slickNext{
    right: 0; }
  
  .slick_carousel .slickPrev,
  .slick_carousel .slickNext{
    width: 40px;
    height: 40px;
    margin-top: calc(-1 * calc(40px / 2));
  }
}

@media (min-width: 351px){
  .slick_carousel .slickPrev{
    left: calc(30px / 4); }
  
  .slick_carousel .slickNext{
    right: calc(30px / 4); }
  
  .slick_carousel .slickPrev,
  .slick_carousel .slickNext{
    width: 30px;
    height: 30px;
    margin-top: calc(-1 * calc(30px / 2));
    margin-right: -10px;
    margin-left: -10px;
  }
}

@media (min-width: 500px){
  .slick_carousel .slickPrev{
    left: calc(30px / 4); }
  
  .slick_carousel .slickNext{
    right: calc(30px / 4); }
  
  .slick_carousel .slickPrev,
  .slick_carousel .slickNext{
    width: 30px;
    height: 30px;
    margin-top: calc(-1 * calc(30px / 2));
  }
}

@media (min-width: 768px){
  .slick_carousel .slickPrev{
    left: calc(30px / 4); }
  
  .slick_carousel .slickNext{
    right: calc(30px / 4); }
  
  .slick_carousel .slickPrev,
  .slick_carousel .slickNext{
    width: 30px;
    height: 30px;
    margin-top: calc(-1 * calc(30px / 2));
  }
}

@media (min-width: 1024px){
  .slick_carousel .slickPrev{
    left: calc(50px / 4); }
  
  .slick_carousel .slickNext{
    right: calc(50px / 4); }
  
  .slick_carousel .slickPrev,
  .slick_carousel .slickNext{
    width: 50px;
    height: 50px;
    margin-top: calc(-1 * calc(50px / 2));
  }
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
   Slider Dots Styles
   - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
.slickDots{
  list-style: none;
  position: relative;
  z-index: 7140;
  top: calc(-1 * calc(15px + 20px));
  height: calc(15px + calc(10px * 2));
  margin: 0 auto;
  text-align: center;
}

.slickDots li{
  transition: all 0.7s ease;
  opacity: calc(60 / 100);
  filter: alpha(opacity=60);
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(opacity=60)";
  display: inline-block;
  float: none !important;
  height: 15px;
  padding: 10px;
}
  
.slickDots li,
.slickDots li button{
  width: 15px;
  height: 15px;
}
    
.slickDots li button{
  display: block;
  background-color: transparent;
  background-image: url("../img/button_slider_pag.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  padding: 0 !important;
  border: none !important;
  text-indent: -9999px;
  overflow: hidden;
}
    
.slickDots li:focus,
.slickDots li:hover{
  opacity: calc(80 / 100);
  filter: alpha(opacity=80);
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(opacity=80)";
}
    
.slickDots li:focus button,
.slickDots li:hover button{
  background-image: url("../img/button_slider_pag_hover.svg");
}
      
.slickDots li.slickActive{
  opacity: calc(100 / 100);
  filter: alpha(opacity=100);
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(opacity=100)";
}
    
.slickDots li.slickActive button{
  background-image: url("../img/button_slider_pag_current.svg");
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
   Slider Nav Styles
   - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
.slick_nav .slick-list{
  margin-right: auto !important;
  margin-left: auto !important;
}

.slick_nav li,
.slick_nav li img{
  transition: all 0.7s ease;
}

.slick_nav li img{
  opacity: calc(80 / 100);
  filter: alpha(opacity=80);
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(opacity=80)";
  filter: grayscale(1);
}

.slick_nav li.slick-current img,
.slick_nav li.slick-current:focus img,
.slick_nav li.slick-current:hover img{
  opacity: calc(100 / 100);
  filter: alpha(opacity=100);
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(opacity=100)";
}

.slick_nav li:focus img, .slick_nav li:hover img{
    filter: grayscale(0);
}

@media (max-width: 767px){
    .slick_nav{
      border-bottom: 2px solid var(--grey);
      padding-bottom: 10px;
      margin-bottom: 10px;
    }
  
    .slick_nav li{
      padding: 0 5px;
    }
}

@media (min-width: 768px){
    .slick_nav li{
      border: 1px solid var(--grey);
      margin-top: 0;
    }
  
    .slick_nav li.slick-current,
    .slick_nav li.slick-current:focus,
    .slick_nav li.slick-current:hover{
      border-color: var(--grey);
    }
    
    .slick_nav li:focus, .slick_nav li:hover{
      border-color: var(--black);
    }
}