#slider {
width: 640px;
position: relative;
margin-bottom: 50px;
}
.slides-container {
width: 640px;
overflow: hidden;
position: relative;
background: #000;
color: #fff;
-webkit-transition: all .3s ease;
-moz-transition: all .3s easee;
-o-transition: all .3s ease;
transition: all .3s ease;
}
.slider-list {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
left: 0;
-webkit-transition: all .3s ease;
-moz-transition: all .3s easee;
-o-transition: all .3s ease;
transition: all .3s ease;
}
.slider-list li {
float: left;
height: 300px;
}
.slider-list li img {
width: 100%;
}
.slider-list li .caption {
padding: 20px;
margin-top: 100px;
border: none;
}
.prev,
.next {
width: 50px;
height: 50px;
position: absolute;
background: url(../img/arrows.png) 0 0 no-repeat;
left: 0;
top: 200px;
opacity: .4;
margin: auto;
text-indent: -9999px;
}
.prev:hover,
.next:hover {
opacity: 1;
}
.next {
left: auto;
right: 0;
background: url(../img/arrows.png) -50px 0 no-repeat;
background-position: 100% 0;
}
.pagination-container {
-webkit-transition: all .3s ease;
-moz-transition: all .3s easee;
-o-transition: all .3s ease;
transition: all .3s ease;
width: 640px;
height: 80px;
overflow: hidden;
left: 0;
position: absolute;
}
.pagination {
margin: 0;
padding: 0;
position: relative;
left: 0;
list-style: none;
-webkit-transition: all .3s ease;
-moz-transition: all .3s easee;
-o-transition: all .3s ease;
transition: all .3s ease;
}
.pagination li {
background-color: #000;
background-size: cover;
background-position: center center;
display: inline-block;
height: 80px;
width: 120px;
border: 1px solid #000;
opacity: .4;
cursor: pointer;
}
.pagination li img {
    opacity: 0;
}
.pagination li:hover {
opacity: .8;
}
.pagination li.current {
opacity: 1;
}
.slider-ad-container {
padding: rem-calc(50 0);
height: 400px;
background-color: #111;
color: #fff;
}
.slider-ad-container div:not(.slider-adloader) {
margin: 0 auto 50px !important;
}
.slider-adloader {
width: 0px;
height: 3px;
overflow: hidden;
text-indent: -9999px;
background-color: red;
-webkit-transition: width 3s linear;
-moz-transition: width 3s linear;
-o-transition: width 3s linear;
transition: width 3s linear;
}
#fullscreen {
position: absolute;
background: black url(../img/fs.png) center center no-repeat;
top: 20px;
right: 20px;
width: 25px;
height: 25px;
text-indent: -9999px;
border-radius: 3px;
opacity: .5;
display: none;
}
#fullscreen:hover {
    opacity: 1;
}
#slider.fullscreen {
width: 100%;
height: 100%;
background-color: black;
}
#slider.fullscreen .slides-container {
width: 100%;
}
#slider.fullscreen .pagination-container {
bottom: 0;
width: 100%;
top: auto;
}
#slider.fullscreen .slider-list li {
height: auto;
}
#slider.fullscreen .slider-list li img {
width: 75%;
display: block;
margin: 0 auto;
}
