.csslider {
	position: relative;
}

.csslider>input {
	display: none;
}

.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;
	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: visible;
	font-size: 15px;
	font-size: initial;
	line-height: normal;
	-moz-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
	-o-transition: all 0.5s ease-out;
	-webkit-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
	transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
	vertical-align: top;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	white-space: normal;
}

.csslider>.navigation {
	position: absolute;
	bottom: 6%;
	left: 50%;
	z-index: 99;
	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>.navigation>div {
	margin-left: -100%;
}

.csslider>.navigation label {
	position: relative;
	display: inline-block;
	cursor: pointer;
	border-radius: 50%;
	margin: 0 6px;
	padding: 4px;
	background: #353535;
	border: 2px solid #353535;
}

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

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

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

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

.csslider>input:nth-of-type(1):checked~.navigation label:nth-of-type(1):after,
.csslider>input:nth-of-type(2):checked~.navigation label:nth-of-type(2):after,
.csslider>input:nth-of-type(3):checked~.navigation label:nth-of-type(3):after {
	opacity: 1;
}

.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) {
	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) {
	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);
}

.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;
	display: none;
}

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

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

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

.csslider>.arrows {
	position: absolute;
	top: 50%;
	width: 100%;
	height: 26px;
	z-index: 99;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
}

.csslider>.arrows label {
	display: none;
	position: absolute;
	top: -50%;
	padding: 9px;
	box-shadow: inset 2px -2px 0 1px #304659;
	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;
}

.csslider>.arrows label:hover {
	margin: 0;
	opacity: .8;
}

.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: 5%;
	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: 5%;
	left: auto;
	-moz-transform: rotate(225deg);
	-ms-transform: rotate(225deg);
	-o-transform: rotate(225deg);
	-webkit-transform: rotate(225deg);
	transform: rotate(225deg);
}

#slider1 {
	width: 100%;
}

@media screen and (max-width:1080px) {

	.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) {
		left: 4%;
	}

	.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) {
		right: 4%;
	}
}

@media screen and (max-width:667px) {
	.csslider>.arrows label {
		padding: 7px;
	}
}

@media screen and (max-width:480px) {
	.csslider>.arrows label {
		padding: 6px;
	}

	.csslider>.navigation {
		bottom: 6%;
	}
}

@media screen and (max-width:414px) {

	.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) {
		right: 5%;
	}
}

@media screen and (max-width:375px) {

	.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) {
		right: 6%;
	}
}