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

@import url('https://fonts.googleapis.com/css?family=Niconne');

.slideshow_container {
	width: 100%;
	height: 0;
	padding-bottom: 39%;
	margin: 0;
	overflow: hidden;
	position: relative;
}

.slideshow_container h1 {
	font-family: 'Niconne', cursive;
	position: absolute;
	z-index: 20;
	font-size: calc(1.2rem + 2.5vw);
	color: rgba(255, 0, 0);
	text-align: center;
	height: 60px;
	top: 12vh;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	text-shadow: -2px -2px 0 white, -2px 2px 0 white, 2px -2px 0 white, 2px 2px 0 white ;
	font-weight: 400;
}

.placeholder {
	height: 100%;
	width: 100%;
	visibility: hidden;
}
.layer_1, .layer_2, .layer_3, .layer_4, .layer_5 {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-repeat: no-repeat;
		z-index: 10;
	}
.layer_1 {
	background-image: url("../images/animation/slide_1.jpg");
	animation: slide1 30s infinite;
	background-size: 100%;
}
.layer_2 {
	background-image: url("../images/animation/animation_logo.png");
	animation: slide2 30s infinite;
	background-size: contain;
}
.layer_3 {
	background-image: url("../images/animation/slide_2.jpg");
	animation: slide3 30s infinite;
	background-size: 100%;
}
.layer_4 {
	background-image: url("../images/animation/slide_3.jpg");
	animation: slide4 30s infinite;
	background-size: 100%;
}

.layer_5 {
	background-image: url("../images/animation/slide_4.jpg");
	animation: slide5 30s infinite;
	background-size: 100%;
}




@keyframes slide1 {
	0% {opacity: 1; left: 0px}
	10% {opacity: 1; left: 0px}
	25% {opacity: 1; left: 1280px}
	25.1% {opacity: 0; left: 1280px}
	90% {opacity: 0; left: 0px;}
	100% {opacity: 1; left: 0px}
}

@keyframes slide2 {
	0% {opacity: 0;}
	12% {opacity: 1; left: 0px}
	24% {opacityy: 1;}
	25% {opacity: 0; left: 1000px}
	100% {opacity: 0; left: 1000px }
}

@keyframes slide3 {
	0% {opacity: 0; }
	10% {opacity: 0;}
	25% {opacity: 1;}
	35% {opacity: 1;}
	50% {opacity: 0;}
	80% {opacity: 0;}
	100% {opacity: 0;}
}

@keyframes slide4 {
	0% {opacity: 0; }
	10% {opacity: 0;}
	35% {opacity: 0;}
	50% {opacity: 1;}
	60% {opacity: 1;}
	75% {opacity: 0;}
	100% {opacity: 0;}
}

@keyframes slide5 {
	0% {opacity: 0; }
	10% {opacity: 0;}
	35% {opacity: 0;}
	50% {opacity: 0;}
	60% {opacity: 0;}
	75% {opacity: 1;}
	90% {opacity: 1;}
	100% {opacity: 0;}
}








@media (max-width: 576px) {
	.slideshow_container {
		width: 96%;
		margin: 0 auto;
	}
}