.csslider 
{
	-moz-perspective: 1300px;
	-ms-perspective: 1300px;
	-webkit-perspective: 1300px;
	perspective: 1300px;
	display: inline-block;
	text-align: left;
	position: relative;
	overflow: hidden;	
	padding-top: 85px
}
.csslider > input 
{
	display: none;
}
.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;
	width: 100%;
	height: 400px;
	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.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 > ul > li >img
{
	width: 100%;
	height: 100%;
}
.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 > .arrows {
	position: absolute;
	left: 25px;
	right:25px;
	top: 60%;
	height: 26px;
	z-index: 1;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
}
.csslider > .arrows label {
	display: none;
	position: absolute;
	top: -50%;
	padding: 10px;
	box-shadow: inset 2px -2px 0 1px white;
	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 {
	box-shadow: inset 3px -3px 0 2px #202564;
	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)
{
	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)
{
	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);
}



/*responsive*/

@media (max-width: 767px)
{
	.csslider > ul 
	{
		height:350px;
	}

}
@media (max-width:575px)
{
	.csslider > ul 
	{
		height:300px;
	}

}
@media (max-width: 480px)
{
	.csslider > ul 
	{
		height:250px;
	}
	.csslider > .arrows label
	{
		padding: 8px ;
	}
	.csslider > .arrows
	{
		height: 20px;
	}

}
@media (max-width:414px)
{
	.csslider > ul 
	{
		height:220px;
	}

}
@media (max-width:375px)
{
	.csslider > ul 
	{
		height:200px;
	}
}

@media (max-width:360px)
{
	.csslider > ul 
	{
		height:180px;
	}

}