.css-slider{
	position:relative;
	width:500px;
	height:400px;
	overflow:hidden;
	border:1px solid black;
	background:white;
}
.css-slider > input{
	display:none;
}
.css-slider > input + .css-slider-item-wrapper .css-slider-item{
	position:absolute;
	top:0; left:0;
	display:block;
	width:100%;
	height:100%;
	transform: translate(-100%);
	transition: transform 250ms ease-in-out;
	overflow:hidden;
}
.css-slider > input:checked + .css-slider-item-wrapper .css-slider-item{
	transform: translate(0px);
}
.css-slider > input:checked + .css-slider-item-wrapper ~ .css-slider-item-wrapper .css-slider-item{
	transform: translate(100%);
}
.css-slider > input + .css-slider-item-wrapper .css-slider-item .css-slider-item-body{
	display:block;
	width:100%;
	height:100%;
	background-position:center;
	background-size:contain;
	background-repeat:no-repeat;
}
.css-slider > input + .css-slider-item-wrapper .css-slider-prev,
.css-slider > input + .css-slider-item-wrapper .css-slider-next{
	position:absolute;
	top:50%;
	z-index:1;
	display:block;
	width:27px;
	height:100%;
	cursor:pointer;
	background:rgba(255,255,255,0.5);
	transition: transform 125ms ease-in-out;
}
.css-slider > input + .css-slider-item-wrapper .css-slider-prev{
	left:0;
	transform: translate(-100%, -50%);
}
.css-slider > input + .css-slider-item-wrapper .css-slider-next{
	right:0;
	transform: translate(100%, -50%);
}
.css-slider:hover > input + .css-slider-item-wrapper .css-slider-prev,
.css-slider:hover > input + .css-slider-item-wrapper .css-slider-next{
	transform: translate(0%, -50%);
}
.css-slider > input:not(:checked) + .css-slider-item-wrapper .css-slider-prev,
.css-slider > input:not(:checked) + .css-slider-item-wrapper .css-slider-next{
	opacity:0;
	pointer-events:none;
}