html, body {
       margin: 0;
       padding: 0;
     }

     * {
       box-sizing: border-box;
     }

    .slider {
        width: 100%;
        margin: 30px auto;
    }
    
    .slick-slide {
        margin: 0px;
    }
    .slick-prev {
	left: 7px;
	border:1px solid #fff;
	border-radius: 10px;
	z-index:10;
    }
    .slick-next {
	right: 7px;
	border: 1px solid #fff;
	border-radius: 10px;
    }
      
    @media screen and (min-width:576px) { /* sm */ 
        .slider {
            width: 80%;
        }
	.slick-slide {
	  margin: 0px 20px;
	}
	.slick-prev {
	    left: -25px;
	    border: none;
	    border-radius: 0px;
	}
	.slick-next {
	    right: -25px;
	    border: none;
	    border-radius: 0px;
	}
    }

    @media screen and (min-width:768px) { /* md */ 
        .slider {
            width: 70%;
        }
    }

    @media screen and (min-width:992px) { /* lg */
    }

    @media screen and (min-width:1200px) { /* xl */
        .slider {
            width: 60%;
        }
    }

    .slick-slide img {
      width: 100%;
    }

    .slick-prev:before,
    .slick-next:before {
      color: black;
    }


    .slick-slide {
      transition: all ease-in-out .3s;
      opacity: .2;
    }

    .slick-active {
      opacity: .5;
    }

    .slick-current {
      opacity: 1;
    }

    .slick-class .slick-dots {
        position: static;
    }