.slider {
    margin: 0 auto;
    max-width: 90%;
    
  }
  
  .slide_viewer {
    height: 600px;
    overflow: hidden;
    position: relative;
  }
  
  .slide_group {
    height: 100%;
    position: relative;
    width: 100%;
  }
  
  .slide {
    display: none;
    height: 100%;
    position: absolute;
    width: 100%;
  }
  
  .slide:first-child {
    display: block;
  }
  
  .slide:nth-of-type(1) {
    background: #D7A151;
  }
  
  .slide:nth-of-type(2) {
    background: #F4E4CD;
  }
  
  .slide:nth-of-type(3) {
    background: #C75534;
  }
  
  .slide:nth-of-type(4) {
    background: #D1D1D4;
  }
  
  .slide_buttons {
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
  }
  
  a.slide_btn {
    color: #474544;
    font-size: 42px;
    margin: 0 0.175em;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
  }
  
  .slide_btn.active, .slide_btn:hover {
    color: #428CC6;
    cursor: pointer;
  }

  .slide img{
    object-fit: cover;
    width: 100% !important;
    height: 100% !important;
    
  }
  
  .directional_nav {
    height: 40px;
    margin: 0 auto;
    max-width: 60%;
    position: relative;
    top: -340px;
  }
  
  .previous_btn {
    bottom: 0;
    left: 100px;
    margin: auto;
    position: absolute;
    top: 0;
    margin-left: -250px;
    margin-top: 60px;
  }
  
  .next_btn {
    bottom: 0;
    margin: auto;
    position: absolute;
    right: 100px;
    top: 0;
    margin-right: -250px; 
    margin-top: 60px
    
  }

  @media (max-width: 568px) {
    .previous_btn {
        bottom: 0;
        left: 45px !important;
        margin: auto;
        position: absolute;
        top: 0;
        margin-top: 60px;
      }
      
      .next_btn {
        bottom: 0;
        margin: auto;
        position: absolute;
        right: 20px !important;
        top: 0;
        margin-top: 60px
        
      }
  }
  
  .previous_btn, .next_btn {
    cursor: pointer;
    height: 65px;
    opacity: 0.5;
    -webkit-transition: opacity 0.4s ease-in-out;
    -moz-transition: opacity 0.4s ease-in-out;
    -ms-transition: opacity 0.4s ease-in-out;
    -o-transition: opacity 0.4s ease-in-out;
    transition: opacity 0.4s ease-in-out;
    width: 65px;
  }
  
  .previous_btn:hover, .next_btn:hover {
    opacity: 1;
  }
  
  @media only screen and (max-width: 767px) {
    .previous_btn {
      left: 50px;
    }
    .next_btn {
      right: 50px;
    }

    .directional_nav {
      height: 40px;
      margin: 0 auto;
      max-width: 90%;
      position: relative;
      top: -340px;
    }
  }