.slider-container{
  position: relative;
  width: 100%; 
  height: 75vh;
  user-select: none;
  cursor: all-scroll;
  overflow: hidden;
}

.slider-control {
  position: absolute;
  top: 0;
  width: 12%;
  height: 100%;
  transition: opacity 0.3s;
  will-change: opacity;
  opacity: 0.7;
  z-index: 2;
}

.slider-control.inactive:hover {
  cursor: auto;
}

.slider-control:not(.inactive):hover {
  opacity: 1;
  cursor: pointer;
}


.slider-control.left {
  left: 0;
  /* border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  background: rgba(233, 233, 233, 0.7) url(/assets/frontend/icons/left_arrow.png) center / 25px no-repeat ; */
  /* background: linear-gradient(to right, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0) 100%); */
}
.slider-control.right {
  right: 0;
  /* border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  background: rgba(233, 233, 233, 0.7) url(/assets/frontend/icons/right_arrow.png) center / 25px no-repeat ; */
  /* background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.18) 100%); */
}

.slider {
  z-index: 1;
  position: relative;
  height: 100%;
}

.slider.animating {
  transition: transform 0.3s;
  will-change: transform;
}
 

.slide {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-position: top center;
  background-repeat: no-repeat;
  background-size: contain;
}

.slide.active .slide__overlay, .slide.active .slide__text {
  opacity: 1;
  transform: translateX(0);
}

.slide:nth-child(1) {
  left: 0;
}

.slide:nth-child(2) {
  left: 100%;
}

.slide:nth-child(3) {
  left: 200%;
}

.slide:nth-child(4) {
  left: 300%;
}




#product-images-container{
  position: relative;
	width: 100%;
  height: 100px; 
  margin: 10px 0;
  overflow: auto;
}


#product-images-container .images{
  display: flex; 
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  width: 100vw;
  height: 100%;  
}


#product-images-container .images::-webkit-scrollbar {
  width: 5px
}

/* Track */
#product-images-container .images::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
#product-images-container .images::-webkit-scrollbar-thumb {
  background: rgb(197, 197, 197); 
}

/* Handle on hover */
#product-images-container .images::-webkit-scrollbar-thumb:hover {
  background: rgb(110, 110, 110); 
}

 
#product-images-container img{
  width: auto;
  height: 100%; 
  border-radius: 2px; 
  box-sizing: border-box;
  margin: 0 5px;
}
  

.slider-pagi__elem.active{
  /* border: 1px solid black !important;   */
}



@media only screen and (min-width: 600px) {
  .slider-container{
    width: 400px;
    height: 70vh;
  }

  #product-images-container{
    width: 20%;
    height: 70vh;
    margin: 0; 
  }

  #product-images-container .images{
    width: 100% !important; 
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;    
    padding: 0;
  }

  #product-images-container img{
    width: 100%;
    height: auto;
    margin: 0 0 10px 0;
  }
}