/**********    SLIDER CSS BEGINS   ***********/
#slider {
  position: relative;
  margin: 0 auto;
  width: 100%;
  padding-top: 50%;
  /* height: 300px; */
  /*min-height: 500px;*/
  overflow: hidden;
  background: #ccc;
  border-radius: 10px;
}

#slider ul.items li {
  position: absolute;
  top: 0;
  margin: 0;
  width: 100%;
  height: 100%;

  /*min-height: 500px;*/
  list-style: none;
  overflow: hidden;
}
#slider ul.items li img {
  position: absolute;
  left: 50%;
  top: 0;
  width: 100%;
  margin: 0 0 0 -50%;
}
#slider_leftButton,
#slider_rightButton {
  width: 48px;
  height: 48px;
  position: absolute;
  top: 50%;
  margin-top: -24px;
  cursor: pointer;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.4);
  background-position: 50% 50%;
  background-size: 48px 48px;
  transition: all 0.3s ease;
}
#slider_leftButton {
  left: 24px;

  background-image: url("../img/navLeft.png");
}
#slider_rightButton {
  right: 24px;
  background-image: url("../img/navRight.png");
}
#slider ul#slider_bullets {
  position: absolute;
  width: 100px;
  height: 10px;
  left: 50%;
  bottom: 4%;
  margin: 0 0 0 -60px;
}
#slider ul#slider_bullets li {
  width: 6px;
  height: 6px;
  list-style: none;
  padding: 0;
  margin: 0 7px 0 0;
  float: left;
  text-indent: -9999px;
  background: url("../img/bulletBg_6x12.png") left -6px no-repeat;
}
#slider ul#slider_bullets li:hover,
#slider ul#slider_bullets li.active {
  background: url("../img/bulletBg_6x12.png") left -0px no-repeat;
}

@media (max-width: 767px) {
  #slider {
    height: 250px;
  }
}
@media (max-width: 600px) {
  #slider {
    height: 200px;
  }
}
@media (max-width: 500px) {
  #slider {
    height: 180px;
  }
}
@media (max-width: 400px) {
  #slider {
    height: 150px;
  }
}

/**********     END OF SLIDER CSS     ***********/