.seaside-slider {
position:relative;
display:inline-block;
}



/*
Viewport
---------------------------------------------------------------------------------------------------- */

.seaside-slider > .viewport {
width:540px;
height:340px;
position:relative;
overflow-x:hidden;
overflow-y:auto;
}

.js .seaside-slider > .viewport {
overflow-y:hidden;
}



/*
Slides
---------------------------------------------------------------------------------------------------- */

.seaside-slider .slides {
width:100%;
height:100%;
position:absolute
}

.no-touch .seaside-slider .slides.transition {
-moz-transition:-moz-transform 0.6s ease-in-out;
-webkit-transition:-webkit-transform 0.6s ease-in-out;
-o-transition:-o-transform 0.6s ease-in-out;
-ms-transition:-ms-transform 0.6s ease-in-out;
transition:transform 0.6s ease-in-out;
}

.touch .seaside-slider .slides.transition {
-moz-transition:-moz-transform 0.4s ease-out;
-webkit-transition:-webkit-transform 0.4s ease-out;
-o-transition:-o-transform 0.4s ease-out;
-ms-transition:-ms-transform 0.4s ease-out;
transition:transform 0.4s ease-out;
}

.seaside-slider .slides > section {
width:100%;
height:100%;
margin-right:20px;
overflow:hidden;
}

.seaside-slider.center-content .slides > section,
.seaside-slider .slides > section.center-content {
display:-moz-box;
display:-webkit-box;
display:-ms-box;
display:box;
-moz-box-align:center;
-webkit-box-align:center;
-ms-align:center;
box-align:center;
-moz-box-pack:center;
-webkit-box-pack:center;
-ms-box-pack:center;
box-pack:center;
}

.js .seaside-slider .slides > section {
position:absolute;
}

.touch .seaside-slider .slides > section img {
-webkit-transform:translate3d(0,0,0);
}

.seaside-slider .slides > section * {
max-width:100%;
max-height:100%;
}



/*
Navigation
---------------------------------------------------------------------------------------------------- */

.seaside-slider > nav {
display:block;
visibility:hidden;
}

.js .seaside-slider > nav {
visibility:visible;
}



/*
Full width
---------------------------------------------------------------------------------------------------- */

.seaside-slider.full-width {
width:100%;
display:block;
}

.seaside-slider.full-width > .viewport {
width:100%;
}



/*
Fullscreen
---------------------------------------------------------------------------------------------------- */

.seaside-slider.fullscreen {
width:100%;
height:100%;
display:block;
}

.seaside-slider.fullscreen > .viewport {
width:100%;
height:100%;
}