/* Slider */
/* Slideshow container */
#slide-container {
	position: relative;
	max-width: 100%; /* responsiveness */
}

/* First element to be in block mode for responsiveness */
#slide-first-element {
	display: block; /* to get the dimensions set */
	width: 100%;
	height: auto;
}

/* Other element to be in absolute position */
#slide-element-2,
#slide-element-3,
#slide-element-4,
#slide-element-5 {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

/* Style images */
.slide-image {
	width: 100%;
}


/* Animation settings for individual elements */
/* For more images the animations have to be adjusted */
#slide-first-element {
	animation: fade-1 30s infinite;
	-webkit-animation: fade-1 30s infinite;
}

#slide-element-2 {
	animation: fade-2 30s infinite;
	-webkit-animation: fade-2 30s infinite;
}

#slide-element-3 {
	animation: fade-3 30s infinite;
	-webkit-animation: fade-3 30s infinite;
}

#slide-element-4 {
	animation: fade-4 30s infinite;
	-webkit-animation: fade-4 30s infinite;
}

#slide-element-5 {
	animation: fade-5 30s infinite;
	-webkit-animation: fade-5 30s infinite;
}

@keyframes fade-1 {
	0% {
		opacity: 1;
	}
	10% {
		opacity: 1;
	}
	20% {
		opacity: 0;
	}
	30% {
		opacity: 0;
	}
	40% {
		opacity: 0;
	}
	50% {
		opacity: 0;
	}
	60% {
		opacity: 0;
	}
	70% {
		opacity: 0;
	}
	80% {
		opacity: 0;
	}
	90% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes fade-2 {
	0% {
		opacity: 0;
	}
	10% {
		opacity: 0;
	}
	20% {
		opacity: 1;
	}
	30% {
		opacity: 1;
	}
	40% {
		opacity: 0;
	}
	50% {
		opacity: 0;
	}
	60% {
		opacity: 0;
	}
	70% {
		opacity: 0;
	}
	80% {
		opacity: 0;
	}
	90% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}


@keyframes fade-3 {
	0% {
		opacity: 0;
	}
	10% {
		opacity: 0;
	}
	20% {
		opacity: 0;
	}
	30% {
		opacity: 0;
	}
	40% {
		opacity: 1;
	}
	50% {
		opacity: 1;
	}
	60% {
		opacity: 0;
	}
	70% {
		opacity: 0;
	}
	80% {
		opacity: 0;
	}
	90% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

@keyframes fade-4 {
	0% {
		opacity: 0;
	}
	10% {
		opacity: 0;
	}
	20% {
		opacity: 0;
	}
	30% {
		opacity: 0;
	}
	40% {
		opacity: 0;
	}
	50% {
		opacity: 0;
	}
	60% {
		opacity: 1;
	}
	70% {
		opacity: 1;
	}
	80% {
		opacity: 0;
	}
	90% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}


@keyframes fade-5 {
	0% {
		opacity: 0;
	}
	10% {
		opacity: 0;
	}
	20% {
		opacity: 0;
	}
	30% {
		opacity: 0;
	}
	40% {
		opacity: 0;
	}
	50% {
		opacity: 0;
	}
	60% {
		opacity: 0;
	}
	70% {
		opacity: 0;
	}
	80% {
		opacity: 1;
	}
	90% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}