/*
################################
####    Carousel Example    ####
####    By: Hrily           ####
####    github.com/Hrily    ####
################################
*/

.carousel {
	background-color: #777;
	width: 95%;
    max-width: 600px;
    padding: 5px;
    overflow: hidden;
    border: 1px solid #ccc;
    border-radius: 3px;
    text-align: center;  
}

.carousel-list {
    white-space: nowrap;
    padding: 0;
    margin: 0;
    transition: transform .3s;
}

.carousel-list li {
    white-space: normal;
    display: inline-block;
    border: none;
	margin-left: -0px;
	margin-right: -5px;
    width: 100%;
}

.carousel-list img {
    width: 100%; 
	z-index: 0;
}

input:nth-child(1):checked ~ ul {
    transform: translateX(0);
}

input:nth-child(2):checked ~ ul {
    transform: translateX(-100%);
}

input:nth-child(3):checked ~ ul {
    transform: translateX(-200%);
}

input:nth-child(4):checked ~ ul {
    transform: translateX(-300%);
}

input:nth-child(5):checked ~ ul {
    transform: translateX(-400%);
}

.carousel-list li {
    opacity: 0;
    transition: all .8s;
    transform: scale(.1);
}

input:nth-child(1):checked ~ ul li:nth-child(1),
input:nth-child(2):checked ~ ul li:nth-child(2),
input:nth-child(3):checked ~ ul li:nth-child(3),
input:nth-child(4):checked ~ ul li:nth-child(4),
input:nth-child(5):checked ~ ul li:nth-child(5) {
    opacity: 1;
    transform: scale(1);
}

.event  {
	color: #ffffff;
}

.event_head {
	background-color: #6699ff;
	position: absolute;
	padding: 5px;
	top: 5%;
	left: 3%;
	z-index: 1;
	font-size: 4vmin;
}

.event_cap  {
	background-color: #6699ff;
	position: absolute;
	padding: 5px;
	top: 18%;
	left: 3%;
	font-size: 3vmin;
}

.event_des  {
	background-color: #6699ff;
	position: absolute;
	padding: 5px;
	bottom: 5%;
	right: 3%;
	font-size: 2vmin;
	text-align: left;
}

.carousel button {
	background-color: #000099;
	border: none;
	border-radius: 3px;
	color: #ffffff;
}