@charset "UTF-8";
/* Slideshow CSS Document */

.placeholder {
	height: 100%;
	width: 100%;
	visibility: hidden;
}
.layer1, .layer2, .layer3, .layer4, .layer5, .layer6, .layer7, .layer8, .layer9 {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-size: 100%;
		background-repeat: no-repeat;
		z-index: -1;
	}
.layer1 {
	background-image: url(../images/Slideshow/slide_1.jpg);
	-webkit-animation: slide1 54s infinite;
	-moz-animation: slide1 54s infinite;
	animation: slide1 54s infinite;
}
.layer2 {
	background-image: url(../images/Slideshow/slide_2.jpg);
	-webkit-animation: slide2 54s infinite;
	-moz-animation: slide2 54s infinite;
	animation: slide2 54s infinite;
}
.layer3 {
	background-image: url(../images/Slideshow/slide_3.jpg);
	-webkit-animation: slide3 54s infinite;
	-moz-animation: slide3 54s infinite;
	animation: slide3 54s infinite;
}
.layer4 {
	background-image: url(../images/Slideshow/slide_4.jpg);
	-webkit-animation: slide4 54s infinite;
	-moz-animation: slide4 54s infinite;
	animation: slide4 54s infinite;
}
.layer5 {
	background-image: url(../images/Slideshow/slide_5.jpg);
	-webkit-animation: slide5 54s infinite;
	-moz-animation: slide5 54s infinite;
	animation: slide5 54s infinite;
}
.layer6 {
	background-image: url(../images/Slideshow/slide_6.jpg);
	-webkit-animation: slide6 54s infinite;
	-moz-animation: slide6 54s infinite;
	animation: slide6 54s infinite;
}

.layer7 {
	background-image: url(../images/Slideshow/slide_7.jpg);
	-webkit-animation: slide7 54s infinite;
	-moz-animation: slide7 54s infinite;
	animation: slide7 54s infinite;
}

.layer8 {
	background-image: url(../images/Slideshow/slide_8.jpg);
	-webkit-animation: slide8 54s infinite;
	-moz-animation: slide8 54s infinite;
	animation: slide8 54s infinite;
}

.layer9 {
	background-image: url(../images/Slideshow/slide_9.jpg);
	-webkit-animation: slide9 54s infinite;
	-moz-animation: slide9 54s infinite;
	animation: slide9 54s infinite;
}




/*Slide 1*/
@keyframes slide1 {
		0% {opacity: 1;}
		10% {opacity: 1;}
		12% {opacity: 0;}
		94% {opacity: 0;}
		96% {opacity: 1;}
		100% {opacity: 1;}
}

/*slide 2*/
@keyframes slide2 {
		0% {opacity: 0;}
		10% {opacity: 0;}
		12% {opacity: 1;}
		20% {opacity: 1;}
		22% {opacity: 0;}
		100% {opacity: 0;}
	}

/*slide 3*/
@keyframes slide3 {
		0% {opacity: 0;}
		20% {opacity: 0;}
		22% {opacity: 1;}
		30% {opacity: 1;}
		32% {opacity: 0;}
		100% {opacity: 0;}
	}

/*slide 4*/
@keyframes slide4 {
		0% {opacity: 0;}
		30% {opacity: 0;}
		32% {opacity: 1;}
		40% {opacity: 1;}
		42% {opacity: 0;}
		100% {opacity: 0;}
	}

/*slide 5*/
@keyframes slide5 {
		0% {opacity: 0;}
		40% {opacity: 0;}
		42% {opacity: 1;}
		50% {opacity: 1;}
		52% {opacity: 0;}
		100% {opacity: 0;}
	}

/*slide 6*/
@keyframes slide6 {
		0% {opacity: 0;}
		50% {opacity: 0;}
		52% {opacity: 1;}
		60% {opacity: 1;}
		62% {opacity: 0;}
		100% {opacity: 0;}
	}

/*slide 7*/
@keyframes slide7 {
		0% {opacity: 0;}
		60% {opacity: 0;}
		62% {opacity: 1;}
		70% {opacity: 1;}
		72% {opacity: 0;}
		100% {opacity: 0;}
	}
/*slide 8*/
@keyframes slide8 {
		0% {opacity: 0;}
		70% {opacity: 0;}
		72% {opacity: 1;}
		82% {opacity: 1;}
		84% {opacity: 0;}
		100% {opacity: 0;}
	}
/*slide 9*/
@keyframes slide9 {
		0% {opacity: 0;}
		82% {opacity: 0;}
		84% {opacity: 1;}
		94% {opacity: 1;}
		96% {opacity: 0;}
		100% {opacity: 0;}
	}

.dots {
	position: absolute;
	width: 95%;
	top: 90%;
	left: 0;
	display: flex;
	justify-content: flex-end;
	z-index: 99;
}
input[type="button"] {
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .8);
	margin: 3px 5px;
}
input:checked + .layer1 {
	z-index: 10;
}