.slider,
body,
html {
 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:10px;
 width:100%;
 text-align:center;
 margin:0;
 padding:0;
 /*! z-index: ; */
}
.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%
}