/* Style for the default slick dots */
.slick-dots li {
  width: 30px !important;
  height: 8px !important;
  padding: 0px !important;
  border: 0.4px solid white !important;
  background-color: transparent !important;
}
.slick-dots > .slick-active {
  width: 30px !important;
  height: 8px !important;
  padding: 0px !important;
  border: 0px solid white !important;
  background-color: transparent !important;
}
.slick-dots li button:before {
  color: transparent !important;
}

.slick-dots li button {

  width: 30px !important;
  height: 7px !important;
  cursor: pointer;
  color: transparent;
  border: 0.3px solid white;
  padding: 0px !important;
  background-color: transparent;
}

/* Style for the active dot */
.slick-dots li.slick-active button {
  height: 7.5px !important;
  border: 1px solid white;
  background: white;
  /* Color of the active dot */
}

/* Extra large devices (large desktops, 1400px and up) */
@media (max-width: 1400px) {}

/* Large devices (laptops/desktops, 1200px and up) */
@media (max-width: 1200px) {}


/* Medium devices (small laptops, 992px and up) */
@media (max-width: 992px) {}

@media (max-width: 768px) {}

@media (max-width: 552px) {

  .slick-dots{
    margin-left: auto !important;
    margin-right: auto !important;    
  }

  /* Style for the default slick dots */
  .slick-dots li {
    height: 4px !important;
  }

  .slick-dots li button:before {
    height: 4px !important;
  }

  .slick-dots li button {
    height: 4px !important;
  }

  .slick-dots li.slick-active button {
    height: 4px !important;
  }

}