.esq .carrossel .slick-slide {
  margin: 0px 2px;
}

.esq .carrossel .esq .carrossel .slick-slide img {
  width: 100%;
}

.esq .carrossel .slick-prev:before,
.esq .carrossel .slick-next:before {
  color: black;
}


.esq .carrossel .slick-slide {
  transition: all ease-in-out .3s;
  opacity: .2;
}

.esq .carrossel .slick-active {
  opacity: .5;
}

.esq .carrossel .slick-current {
  opacity: 1;
}

.esq .carrossel .slider-container {
  max-width: 100vw;
  width: 100%;
  overflow: hidden;
}

.esq .carrossel .variable {
  height: 400px;
  overflow: hidden;
  margin-bottom: 4px
}

.variable img {
  height: 400px;
}

.esq .carrossel .esq .carrossel .thumbnails {
  height: 100px;
  overflow: hidden
}

.esq .carrossel .thumbnails img {
  height: 100px;
  cursor: pointer
}

.esq .carrossel .slick-next {
  right: 10px;
  left: auto;
  background: url("../../../images/setaDir.svg") no-repeat !important;
  width: 25px;
  height: 25px;
  background-size: 100% !important;
  z-index: 2;
}

.esq .carrossel .variable .slick-prev {
  left: 10px;
  z-index: 2;
  background: url("../../../images/setaEsq.svg") no-repeat !important;
  width: 25px;
  height: 25px;
  background-size: 100% !important;
}

.esq .carrossel .variable .slick-arrow::before {
  content: "" !important;
}

.esq .carrossel .thumbnails .slick-arrow {
  display: none !important;
}

@media (max-width: 750px) {
  .esq .carrossel .variable {
    height: 200px !important;
    overflow: hidden;
    margin-bottom: 4px
  }

  .esq .carrossel .variable img {
    height: 200px !important;
  }

  .esq .carrossel .thumbnails {
    height: 50px !important;
    overflow: hidden
  }

  .esq .carrossel .thumbnails img {
    height: 50px !important;
    cursor: pointer
  }

}