.img-responsive {
    display: block;
    max-width: 100%;
    height: auto
  }
  
  .slider {
    position: relative;
    overflow: hidden
  }
  
  .slider-list {
    margin: 0;
    padding: 0;
    list-style: none;
    transition: transform .5s ease
  }
  
  .slider-item {
    float: left;
    width: 100%
  }
  
  .slider-arrow {
    margin: 0;
    padding: 0;
    list-style: none
  }
  
  .slider-arrow-next, .slider-arrow-prev {
    position: absolute;
    top: 50%;
    display: block;
    margin-top: -20px
  }
  
  .slider-arrow-next button, .slider-arrow-prev button {
    padding: 0;
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent
  }
  
  .slider-arrow-next button[disabled], .slider-arrow-prev button[disabled] {
    opacity: .5
  }
  
  .slider-arrow-next button:before, .slider-arrow-prev button:before {
    display: block;
    width: 50px;
    height: 50px;
    content: ''
  }
  
  .slider-arrow-prev {
    left: 10px
  }
  
  .slider-arrow-prev button:before {
    background-image: url("img/left_arrow.png")
  }
  
  .slider-arrow-next {
    right: 10px
  }
  
  .slider-arrow-next button:before {
    background-image: url("img/right_arrow.png")
  }
  
  .slider-dots {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center
  }
  
  .slider-dots li {
    display: inline-block;
    margin: 0 5px
  }
  
  .slider-dots button {
    padding: 0;
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent
  }
  
  .slider-dots button:before {
    display: block;
    width: 10px;
    height: 10px;
    content: '';
    border-radius: 50%;
    background: rgba(0, 0, 0, .5)
  }
  
  .slider-dots button.active {
    opacity: .5
  }