body {
	background-color: #9cc;
}

.window {
	width: 300px;
	height: 200px;
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
	text-align: center;
}

.image-container {
	width: 1200px;
	height: 200px;
	position: relative;
	transition: left 2s;
	-webkit-transition: left 2s;
	-moz-transition: left 2s;
	-o-transition: left 2s;
}

.slide {
	float: left;
	margin: 0;
	padding: 0;
}

.button-container {
	top: -20px;
	position: relative;
}

.slider-button {
	display: inline-block;
	padding: 12px 15px;
	border-radius: 8px;
	background-color: #ff0000;
}

#slide-1:target ~ .image-container {
	left: 0;
}

#slide-2:target ~ .image-container {
	left: -300px;
}

#slide-3:target ~ .image-container {
	left: -600px;
}

#slide-4:target ~ .image-container {
	left: -900px;
}

#slide-5:target ~ .image-container {
	left: 0;
}

#slide-6:target ~ .image-container {
	left: -300px;
}

#slide-7:target ~ .image-container {
	left: -600px;
}

#slide-8:target ~ .image-container {
	left: -900px;
}
#slide-9:target ~ .image-container {
	left: 0;
}

#slide-10:target ~ .image-container {
	left: -300px;
}

#slide-11:target ~ .image-container {
	left: -600px;
}

#slide-12:target ~ .image-container {
	left: -900px;
}

#slide-13:target ~ .image-container {
	left: 0;
}

#slide-14:target ~ .image-container {
	left: -300px;
}

#slide-15:target ~ .image-container {
	left: -600px;
}

#slide-16:target ~ .image-container {
	left: -900px;
}

#slide-17:target ~ .image-container {
	left: 0;
}

#slide-18:target ~ .image-container {
	left: -300px;
}

#slide-19:target ~ .image-container {
	left: -600px;
}

#slide-20:target ~ .image-container {
	left: -900px;
}

#slide-21:target ~ .image-container {
	left: 0;
}

#slide-22:target ~ .image-container {
	left: -300px;
}

#slide-23:target ~ .image-container {
	left: -600px;
}

#slide-24:target ~ .image-container {
	left: -900px;
}