.slider {
        width:95%;
        margin: 10px auto;
    }


    .slick-slide {
      margin: 0px 20px;
    }

    .slick-slide img {
        float: left;
    width:  100%;
    height: 100%;
    max-height: 320px;
    min-height: 320px;
    object-fit: cover;
    }

    .slick-prev:before,
    .slick-next:before {
    color: black;
    position: relative;
    top: 70px;

    }


    .slick-slide {
      transition: all ease-in-out .3s;
     opacity: 1; /* eg. 0.2 */
    }
    
    .slick-active {
      opacity: 1;
    }

    .slick-current {
      opacity: 1;
    } 

@media only screen and (min-width: 1024px) and (max-width : 1680px) {
.slider {
        width: 95%;
        margin: 10px auto;
}
.slick-list img {
       width:auto; height: 200px;
}
}
  
@media only screen and (min-width: 760px) and (max-width : 1024px) {
.slider {
       width: 85%;
       margin: 10px auto;
}
.slick-list img {
      width:auto; 
      height: 150px;
}
}

@media only screen and (min-width: 240px) and (max-width : 760px) {

.slider {
        width: 85%;
        margin: 10px auto;
}
.slick-list img {
        width:auto; 
        height:100px;
}
}