body {
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
background: #f2f5f6;
background: -moz-linear-gradient(-45deg, #f2f5f6 0%, #e3eaed 37%, #c8d7dc 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #f2f5f6), color-stop(37%, #e3eaed), color-stop(100%, #c8d7dc));
background: -webkit-linear-gradient(-45deg, #f2f5f6 0%, #e3eaed 37%, #c8d7dc 100%);
background: -o-linear-gradient(-45deg, #f2f5f6 0%, #e3eaed 37%, #c8d7dc 100%);
background: -ms-linear-gradient(-45deg, #f2f5f6 0%, #e3eaed 37%, #c8d7dc 100%);
background: linear-gradient(135deg, #f2f5f6 0%, #e3eaed 37%, #c8d7dc 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f5f6', endColorstr='#c8d7dc', GradientType=1 )
}
.slider {
overflow: hidden;
position: relative;
width: 768px;
max-width: 100%;
margin: 3em auto
}
.slider .container {
position: relative;
left: 0
}
.slider-image img {
width: 100%;
line-height: 0;
background-size: cover;
display: block
}
a.slider-controls {
opacity: 0;
transition: opacity 0.4s ease, background-color 0.2s ease;
pointer-events: auto;
display: block;
position: absolute;
top: 0;
bottom: 0;
width: 15%;
background-color: rgba(255,255,255,0.2);
vertical-align: middle;
color: white;
right: 0;
transition: background-color 0.2s ease
}
.no-touch .slider:hover a.slider-controls, a.slider-controls .no-touch .slider:focus, a.slider-controls .no-touch .slider:active {
opacity: 1
}
a.slider-controls:hover, a.slider-controls:focus, a.slider-controls:active {
background-color: rgba(255,255,255,0.4)
}
a.slider-controls .next {
display: block;
text-indent: -999rem;
position: absolute;
width: 50%;
height: 15%;
left: 50%;
top: 50%;
margin: -25% 0 0 -25%;
background-size: 100%
}
a.slider-controls .counter {
position: absolute;
bottom: 1em;
font-size: 1.2rem;
width: 100%;
text-align: center
}
a.slider-controls.hide {
opacity: 0 !important;
pointer-events: none
}