.js_simple{
display: none;
} .examplecode {
margin: 0 auto 30px;
} .examplecode:last-child {
margin-bottom: 0;
}
section {
padding: 5vw 0;
} section:nth-child(even) {
background: #ececec;
} .slider {
position: relative; width: 320px; margin: 0 auto 40px; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: -moz-none; -o-user-select: none; user-select: none;
} .frame {
position: relative; width: 270px; margin: 0 auto; font-size: 0; line-height: 0; overflow: hidden; white-space: nowrap;
} .frame li {
position: relative; display: inline-block; font-family: 'Source Sans Pro', sans-serif; height: 210px; text-align: center; font-size: 15px; line-height: 30px; background: #fff; color: #fff;
} .slides {
display: inline-block;
} .variablewidth li {
width: 280px; margin-right: 10px;
}
.variablewidth li:last-child{
margin-right: 0;
} .prev, .next {
position: absolute; top: 50%; margin-top: -25px; display: block; cursor: pointer;
} .next {
right: 0;
} .prev {
left: 0;
} .next svg, .prev svg {
width: 25px;
} @media screen and (min-width: 45rem ) {
.frame { width: 580px; } .next svg, .prev svg { width: 2vw; } .slider { width: 70vw; margin: 0 auto 20px; min-width: 640px; } .variablewidth li { width: 280px; margin-right: 10px; }
} @media screen and (min-width: 90rem ) {
.slider { width: 980px; margin: 0 auto 20px; } .frame { width: 880px; } .variablewidth li { width: 280px; margin-right: 10px; }
} @media screen and (max-width: 45rem ) {
.variablewidth li{ width: 135px; } .frame li{ height: 100px; }
}