.csslider {
    -moz-perspective   : 1300px;
    -ms-perspective    : 1300px;
    -webkit-perspective: 1300px;
    perspective        : 1300px;
    display            : inline-block;
    text-align         : left;
    position           : relative;
    margin-bottom      : 22px;
    width              : 100%;
}

.csslider>input {
    display: none;
}

.csslider>input:nth-of-type(10):checked~ul li:first-of-type {
    margin-left: -900%;
}

.csslider>input:nth-of-type(9):checked~ul li:first-of-type {
    margin-left: -800%;
}

.csslider>input:nth-of-type(8):checked~ul li:first-of-type {
    margin-left: -700%;
}

.csslider>input:nth-of-type(7):checked~ul li:first-of-type {
    margin-left: -600%;
}

.csslider>input:nth-of-type(6):checked~ul li:first-of-type {
    margin-left: -500%;
}

.csslider>input:nth-of-type(5):checked~ul li:first-of-type {
    margin-left: -400%;
}

.csslider>input:nth-of-type(4):checked~ul li:first-of-type {
    margin-left: -300%;
}

.csslider>input:nth-of-type(3):checked~ul li:first-of-type {
    margin-left: -200%;
}

.csslider>input:nth-of-type(2):checked~ul li:first-of-type {
    margin-left: -100%;
}

.csslider>input:nth-of-type(1):checked~ul li:first-of-type {
    margin-left: 0%;
}

.csslider>ul {
    position          : relative;
    z-index           : 1;
    font-size         : 0;
    line-height       : 0;
    margin            : 0 auto;
    padding           : 0;
    overflow          : hidden;
    white-space       : nowrap;
    -moz-box-sizing   : border-box;
    -webkit-box-sizing: border-box;
    box-sizing        : border-box;
}

.csslider>ul>li {
    position          : relative;
    display           : inline-block;
    width             : 100%;
    height            : 100%;
    overflow          : hidden;
    font-size         : 15px;
    font-size         : initial;
    line-height       : normal;
    -moz-transition   : all 0.5s cubic-bezier(0.13, 0.91, 0.38, 0.98);
    -o-transition     : all 0.5s cubic-bezier(0.13, 0.91, 0.38, 0.98);
    -webkit-transition: all 0.5s cubic-bezier(0.13, 0.91, 0.38, 0.98);
    transition        : all 0.5s cubic-bezier(0.13, 0.91, 0.38, 0.98);
    vertical-align    : top;
    -moz-box-sizing   : border-box;
    -webkit-box-sizing: border-box;
    box-sizing        : border-box;
    white-space       : normal;
    margin            : 0;
}

.csslider>ul>li.scrollable {
    overflow-y: scroll;
}

.csslider>ul>li img {
    width: 100%;
}

.csslider>.slinav {
    position             : absolute;
    bottom               : -8px;
    left                 : 50%;
    z-index              : 10;
    margin-bottom        : -10px;
    font-size            : 0;
    line-height          : 0;
    text-align           : center;
    -webkit-touch-callout: none;
    -webkit-user-select  : none;
    -khtml-user-select   : none;
    -moz-user-select     : none;
    -ms-user-select      : none;
    user-select          : none;
}

.csslider>.slinav>div {
    margin-left: -100%;
}

.csslider>.slinav label {
    position     : relative;
    display      : inline-block;
    cursor       : pointer;
    border-radius: 50%;
    margin       : 0 4px;
    padding      : 4px;
    background   : #a2a2a2;
}

.csslider>.slinav label:hover:after {
    opacity: 1;
}

.csslider>.slinav label:after {
    content      : "";
    position     : absolute;
    left         : 50%;
    top          : 50%;
    margin-left  : -6px;
    margin-top   : -6px;
    background   : #000000;
    border-radius: 50%;
    padding      : 6px;
    opacity      : 0;
}

.csslider>.arrows {
    -webkit-touch-callout: none;
    -webkit-user-select  : none;
    -khtml-user-select   : none;
    -moz-user-select     : none;
    -ms-user-select      : none;
    user-select          : none;
}

.csslider.inside .slinav {
    bottom       : 10px;
    margin-bottom: 10px;
}

.csslider.inside .slinav label {
    border: 1px solid #7e7e7e;
}

.csslider>input:nth-of-type(1):checked~.slinav label:nth-of-type(1):after,
.csslider>input:nth-of-type(2):checked~.slinav label:nth-of-type(2):after,
.csslider>input:nth-of-type(3):checked~.slinav label:nth-of-type(3):after,
.csslider>input:nth-of-type(4):checked~.slinav label:nth-of-type(4):after,
.csslider>input:nth-of-type(5):checked~.slinav label:nth-of-type(5):after,
.csslider>input:nth-of-type(6):checked~.slinav label:nth-of-type(6):after,
.csslider>input:nth-of-type(7):checked~.slinav label:nth-of-type(7):after,
.csslider>input:nth-of-type(8):checked~.slinav label:nth-of-type(8):after,
.csslider>input:nth-of-type(9):checked~.slinav label:nth-of-type(9):after,
.csslider>input:nth-of-type(10):checked~.slinav label:nth-of-type(10):after,
.csslider>input:nth-of-type(11):checked~.slinav label:nth-of-type(11):after {
    opacity: 1;
}

.csslider>.arrows {
    position          : absolute;
    left              : 0;
    top               : 50%;
    width             : ~"calc(100% - 90px)";
    height            : 45px;
    /* padding        : 0 44px; */
    z-index           : 1;
    -moz-box-sizing   : border-box;
    -webkit-box-sizing: border-box;
    box-sizing        : border-box;
    margin            : 0 44px;
}

.csslider>.arrows label {
    display           : none;
    position          : absolute;
    top               : -50%;
    padding           : 14px;
    box-shadow        : inset 1px -1px 0 1px #afafaf;
    cursor            : pointer;
    -moz-transition   : box-shadow 0.15s, margin 0.15s;
    -o-transition     : box-shadow 0.15s, margin 0.15s;
    -webkit-transition: box-shadow 0.15s, margin 0.15s;
    transition        : box-shadow 0.15s, margin 0.15s;
    z-index           : 10;
}

.csslider>.arrows label:hover {
    box-shadow: inset 2px -2px 0 2px #656565;
    margin    : 0 0px;
}

.csslider>.arrows label:before {
    content : "";
    position: absolute;
    top     : -100%;
    left    : -100%;
    height  : 300%;
    width   : 300%;
}

.csslider.infinity>input:first-of-type:checked~.arrows label.goto-last,
.csslider>input:nth-of-type(1):checked~.arrows>label:nth-of-type(0),
.csslider>input:nth-of-type(2):checked~.arrows>label:nth-of-type(1),
.csslider>input:nth-of-type(3):checked~.arrows>label:nth-of-type(2),
.csslider>input:nth-of-type(4):checked~.arrows>label:nth-of-type(3),
.csslider>input:nth-of-type(5):checked~.arrows>label:nth-of-type(4),
.csslider>input:nth-of-type(6):checked~.arrows>label:nth-of-type(5),
.csslider>input:nth-of-type(7):checked~.arrows>label:nth-of-type(6),
.csslider>input:nth-of-type(8):checked~.arrows>label:nth-of-type(7),
.csslider>input:nth-of-type(9):checked~.arrows>label:nth-of-type(8),
.csslider>input:nth-of-type(10):checked~.arrows>label:nth-of-type(9),
.csslider>input:nth-of-type(11):checked~.arrows>label:nth-of-type(10) {
    display          : block;
    left             : 0;
    right            : auto;
    -moz-transform   : rotate(45deg);
    -ms-transform    : rotate(45deg);
    -o-transform     : rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform        : rotate(45deg);
}

.csslider.infinity>input:last-of-type:checked~.arrows label.goto-first,
.csslider>input:nth-of-type(1):checked~.arrows>label:nth-of-type(2),
.csslider>input:nth-of-type(2):checked~.arrows>label:nth-of-type(3),
.csslider>input:nth-of-type(3):checked~.arrows>label:nth-of-type(4),
.csslider>input:nth-of-type(4):checked~.arrows>label:nth-of-type(5),
.csslider>input:nth-of-type(5):checked~.arrows>label:nth-of-type(6),
.csslider>input:nth-of-type(6):checked~.arrows>label:nth-of-type(7),
.csslider>input:nth-of-type(7):checked~.arrows>label:nth-of-type(8),
.csslider>input:nth-of-type(8):checked~.arrows>label:nth-of-type(9),
.csslider>input:nth-of-type(9):checked~.arrows>label:nth-of-type(10),
.csslider>input:nth-of-type(10):checked~.arrows>label:nth-of-type(11),
.csslider>input:nth-of-type(11):checked~.arrows>label:nth-of-type(12) {
    display          : block;
    right            : 0;
    left             : auto;
    -moz-transform   : rotate(225deg);
    -ms-transform    : rotate(225deg);
    -o-transform     : rotate(225deg);
    -webkit-transform: rotate(225deg);
    transform        : rotate(225deg);
}