sheet-slider.min.css

/*! Sheet Slider 1.03 | Daniel Abel - http://zkreations.com | Free to use under terms of MIT license */.sheet-slider{font-size:16px;line-height:1.5;z-index:30;position:relative;margin:0 auto;width:100%;overflow:hidden;-webkit-font-smoothing:antialiased;background:#263238}.sheet-slider *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;color:#fff}.sheet-slider>input{display:none}.sheet-slider img{width:100%;display:block;max-width:none;background:0;padding:0;margin:0;border:0;border-radius:0}.sheet-slider>ul>li.tab{display:block;padding:0;margin:0;list-style-type:none}.sheet-slider>ul{padding:0;margin:0;list-style-type:none}.sheet-slider .sh-btns{bottom:0;left:0;margin:0 auto;position:absolute;right:0}.sheet-slider ul{-moz-transition:left .7s cubic-bezier(0.54,0,0.1,1);-ms-transition:left .7s cubic-bezier(0.54,0,0.1,1);-o-transition:left .7s cubic-bezier(0.54,0,0.1,1);-webkit-transition:left .7s cubic-bezier(0.54,0,0.1,1);transition:left .7s cubic-bezier(0.54,0,0.1,1)}.sh-arrows,.sh-arrows label{-moz-transition:opacity .3s,right .3s,width .5s;-ms-transition:opacity .3s,right .3s,width .5s;-o-transition:opacity .3s,right .3s,width .5s;-webkit-transition:opacity .3s,right .3s,width .5s;transition:opacity .3s,right .3s,width .5s}li.tab>div{-moz-transition:opacity .7s ease .5s,top .7s ease .5s;-ms-transition:opacity .7s ease .5s,top .7s ease .5s;-o-transition:opacity .7s ease .5s,top .7s ease .5s;-webkit-transition:opacity .7s ease .5s,top .7s ease .5s;transition:opacity .7s ease .5s,top .7s ease .5s}.sheet-slider ul{position:relative;height:420px}.sheet-slider ul>li.tab{position:absolute;top:0;display:inline-block;vertical-align:top;width:100%;height:100%;bottom:0}.sheet-slider li.tab>div{left:0;top:1em;position:absolute;padding-left:3em;padding-top:2.5em;text-shadow:0 1px 1px rgba(0,0,0,0.3),0 1px 5px rgba(0,0,0,0.16);max-width:80%;opacity:0}.sheet-slider li.tab>div a{color:#009688;font-weight:500;text-decoration:none}.sheet-slider li.tab>div a:hover{color:#4db6ac;text-decoration:none}.sheet-slider li.tab>div h3{font-size:2em;margin:0;font-weight:700}.sheet-slider li.tab>div span{font-size:1.1em;font-weight:500}.sheet-slider .sh-btns{width:100%;z-index:35;padding:0 3em;display:-webkit-flex;display:-moz-flex;display:flex;-webkit-flex-direction:row;-moz-flex-direction:row;flex-direction:row;-webkit-justify-content:space-between;-moz-justify-content:space-between;justify-content:space-between}.sheet-slider .sh-btns label{background-color:rgba(255,255,255,0.8);cursor:pointer;margin:0 2px;height:7px;-webkit-flex-basis:0;-moz-flex-basis:0;flex-basis:0;-webkit-flex-grow:1;-moz-flex-grow:1;flex-grow:1}.sheet-slider .sh-btns label:hover{background-color:rgba(255,255,255,0.95)}.sheet-slider .sh-arrows{position:absolute;right:-140px;z-index:40;width:auto;bottom:calc(3em + 7px);opacity:0}.sheet-slider:hover .sh-arrows{opacity:1;right:0}.sheet-slider .sh-arrows label{background-color:rgba(255,255,255,0.8);background-repeat:no-repeat;background-position:center center;cursor:pointer;display:none;height:60px;position:relative;width:70px}.sheet-slider .sh-arrows label:hover{background-color:rgba(255,255,255,0.95);width:80px}.sheet-slider ul>li:nth-child(1){left:0}.sheet-slider ul>li:nth-child(2){left:100%}.sheet-slider ul>li:nth-child(3){left:200%}.sheet-slider ul>li:nth-child(4){left:300%}.sheet-slider ul>li:nth-child(5){left:400%}.sheet-slider ul>li:nth-child(6){left:500%}.sheet-slider ul>li:nth-child(7){left:600%}.sheet-slider ul>li:nth-child(8){left:700%}#s1:checked ~ ul{left:0}#s2:checked ~ ul{left:-100%}#s3:checked ~ ul{left:-200%}#s4:checked ~ ul{left:-300%}#s5:checked ~ ul{left:-400%}#s6:checked ~ ul{left:-500%}#s7:checked ~ ul{left:-600%}#s8:checked ~ ul{left:-700%}#s1:checked ~ ul>li:nth-child(1)>div,#s2:checked ~ ul>li:nth-child(2)>div,#s3:checked ~ ul>li:nth-child(3)>div,#s4:checked ~ ul>li:nth-child(4)>div,#s5:checked ~ ul>li:nth-child(5)>div,#s6:checked ~ ul>li:nth-child(6)>div,#s7:checked ~ ul>li:nth-child(7)>div,#s8:checked ~ ul>li:nth-child(8)>div{opacity:1;top:0}#s1:checked ~ .sh-btns label:nth-child(1),#s2:checked ~ .sh-btns label:nth-child(2),#s3:checked ~ .sh-btns label:nth-child(3),#s4:checked ~ .sh-btns label:nth-child(4),#s5:checked ~ .sh-btns label:nth-child(5),#s6:checked ~ .sh-btns label:nth-child(6),#s7:checked ~ .sh-btns label:nth-child(7),#s8:checked ~ .sh-btns label:nth-child(8){background-color:#009688}#s1:checked ~ .sh-arrows label:nth-child(2),#s2:checked ~ .sh-arrows label:nth-child(3),#s3:checked ~ .sh-arrows label:nth-child(4),#s4:checked ~ .sh-arrows label:nth-child(5),#s5:checked ~ .sh-arrows label:nth-child(6),#s6:checked ~ .sh-arrows label:nth-child(7),#s7:checked ~ .sh-arrows label:nth-child(8),#s2:checked:last-of-type ~ .sh-arrows label:nth-child(1),#s3:checked:last-of-type ~ .sh-arrows label:nth-child(1),#s4:checked:last-of-type ~ .sh-arrows label:nth-child(1),#s5:checked:last-of-type ~ .sh-arrows label:nth-child(1),#s6:checked:last-of-type ~ .sh-arrows label:nth-child(1),#s7:checked:last-of-type ~ .sh-arrows label:nth-child(1),#s8:checked:last-of-type ~ .sh-arrows label:nth-child(1){background-image:url(img/arrow/right1x.png);display:block;float:right}#s1:checked ~ #s2:last-of-type ~ .sh-arrows label:nth-child(2),#s1:checked ~ #s3:last-of-type ~ .sh-arrows label:nth-child(3),#s1:checked ~ #s4:last-of-type ~ .sh-arrows label:nth-child(4),#s1:checked ~ #s5:last-of-type ~ .sh-arrows label:nth-child(5),#s1:checked ~ #s6:last-of-type ~ .sh-arrows label:nth-child(6),#s1:checked ~ #s7:last-of-type ~ .sh-arrows label:nth-child(7),#s1:checked ~ #s8:last-of-type ~ .sh-arrows label:nth-child(8),#s2:checked ~ .sh-arrows label:nth-child(1),#s3:checked ~ .sh-arrows label:nth-child(2),#s4:checked ~ .sh-arrows label:nth-child(3),#s5:checked ~ .sh-arrows label:nth-child(4),#s6:checked ~ .sh-arrows label:nth-child(5),#s7:checked ~ .sh-arrows label:nth-child(6),#s8:checked ~ .sh-arrows label:nth-child(7){background-image:url(img/arrow/left1x.png);display:block;float:left}@media only screen and (max-width:840px){.sheet-slider{font-size:14px}.sheet-slider ul{height:350px}}@media only screen and (max-width:730px){.sheet-slider{font-size:13px}.sheet-slider ul{height:280px}.sheet-slider .sh-arrows{right:0;opacity:1;bottom:0}.sheet-slider .sh-btns{display:none}.sheet-slider li.tab>div{padding-left:2em;padding-top:1.5em}}@media only screen and (max-width:620px){.sheet-slider li.tab>div{display:none}.sheet-slider ul{height:240px}}@media only screen and (max-width:510px){.sheet-slider img{height:100%;min-width:100%;width:auto}}