.carousel-items, .carousel-labels {
	margin: 0;
	padding: 0;
	list-style: none;
	display: block;
}
.carousel-item {
	display: block;
	float: left;
}

.carousel-wrapper {
	width: 100%;
	position: relative;
	padding-bottom: 25%;
	background-color: #eee;
	overflow: hidden;
}
.carousel-items {
	width: 300%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	transition: left .5s ease-out;
	-o-transition: left .5s ease-out;
	-ms-transition: left .5s ease-out;
	-moz-transition: left .5s ease-out;
	-webkit-transition: left .5s ease-out;
}
.carousel-item {
	width: 33.33333333%;
	height: 100%;
	color: white;
}

.carousel-item img{
max-width:100%;
height:auto;
}

.carousel-item-blue {
	background-image: url("../images/banner/banner1.jpg");
  background-size: cover;
}
.carousel-item-red {
	background-image: url("../images/banner/banner2.jpg");
  background-size: cover;
}
.carousel-item-green {
	background-image: url("../images/banner/banner3.jpg");
  background-size: cover;
}
.carousel-labels {
	position: absolute;
	z-index: 2;
	left: 0;
	bottom: 0;
	height: 40px;
	width: 100%;
	padding: 10px 0;
	text-align: center;
}
.carousel-selector {
	display: none;
}
.carousel-label {
	display: inline-block;
}
.carousel-label label {
	width: 16px;
	height: 16px;
	border-radius: 10px;
	border: solid 1px #FFFFFF;
	background-color: white;
	opacity: .7;
	display: block;
	cursor: pointer;
}

#slide1:checked ~ .carousel-items {
    left: 0;
}
#slide1:checked ~ .carousel-labels .carousel-label:nth-child(1) label {
    background-color: black;
}
#slide2:checked ~ .carousel-items {
    left: -100%;
}
#slide2:checked ~ .carousel-labels .carousel-label:nth-child(2) label {
    background-color: black;
}
#slide3:checked ~ .carousel-items {
    left: -200%;
}
#slide3:checked ~ .carousel-labels .carousel-label:nth-child(3) label {
    background-color: black;
}