.slider{margin:0;padding:0}
.slider-container{overflow:hidden;position:relative}
.slider{width:100%;height:auto;list-style:none;overflow:hidden}
.slider li{float:left}
.slider li img{width:100%;display:block}

.slider-buttons{position:absolute;width:40px;height:40px;top:50%;margin-top:-20px;background:#333;vertical-align:middle;cursor:pointer}
.slider-buttons:hover{background:#000}
.slider-buttons span{color:#FFF;font-size:36px;font-weight:700;line-height:36px}
.next{right:0}
.next span{padding-left:16px}
.prev{left:0}
.prev span{padding-left:12px}
.pagination-container{position:absolute;bottom:8px;width:100%;text-align:center;margin:0;padding:0}
.dot,
.thumbnail{background:#FFF;width:15px;height:15px;border-radius:50%;display:inline-block;cursor:pointer}
.dot:not(:last-of-type),
.thumbnail:not(:last-of-type){margin-right:8px}
.dot:hover{background:#D9D9D9}
.dot.active{background:#333;cursor:initial}
.thumbnail{background:0 0;width:10%;height:10%;border-radius:0;padding:0}
.thumbnail img:hover{border:1px solid #D9D9D9}
.thumbnail.active img{border:1px solid #333;cursor:initial}
.thumbnail img{box-sizing:border-box;width:100%;height:100%}

@media (max-width: 992px){
    .slider-buttons {display:none;}
    .dot {display:none;}
    .thumbnail {display:none;}
    .pagination-container {display:none;}
}