/* Slider */
/* Slideshow container */
#slide-container {
 position: relative;
}
/* 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,
#slide-element-6,
#slide-element-7,
#slide-element-8,
#slide-element-9,
#slide-element-10,
#slide-element-11,
#slide-element-12{
 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 100s infinite;
 -webkit-animation: fade-1 100s infinite;
}
#slide-element-2 {
 animation: fade-2 100s infinite;
 -webkit-animation: fade-2 100s infinite;
}
#slide-element-3 {
 animation: fade-3 100s infinite;
 -webkit-animation: fade-3 100s infinite;
}
#slide-element-4 {
 animation: fade-4 100s infinite;
 -webkit-animation: fade-4 100s infinite;
}
#slide-element-5 {
 animation: fade-5 100s infinite;
 -webkit-animation: fade-5 100s infinite;
}
#slide-element-6 {
 animation: fade-6 100s infinite;
 -webkit-animation: fade-6 100s infinite;
}
#slide-element-7 {
 animation: fade-7 100s infinite;
 -webkit-animation: fade-7 100s infinite;
}
#slide-element-8 {
 animation: fade-8 100s infinite;
 -webkit-animation: fade-8 100s infinite;
}
#slide-element-9 {
 animation: fade-9 100s infinite;
 -webkit-animation: fade-9 100s infinite;
}
#slide-element-10 {
 animation: fade-10 100s infinite;
 -webkit-animation: fade-10 100s infinite;
}
#slide-element-11 {
 animation: fade-11 100s infinite;
 -webkit-animation: fade-11 100s infinite;
}
#slide-element-12 {
 animation: fade-12 100s infinite;
 -webkit-animation: fade-12 100s infinite;
}

/* and more if there are more slides to show */
/* example for a 1st slide */
@keyframes fade-1 {
 0% { opacity: 1; }
 8% { opacity: 0; }
 16% { opacity: 0; }
 24% { opacity: 0; }
 32% { opacity: 0; }
 48% { opacity: 0; }
 56% { opacity: 0; }
 64% { opacity: 0; }
 72% { opacity: 0; }
 80% { opacity: 0; }
 88% { opacity: 0; }
 96% { opacity: 0; }
 100% { opacity: 1; }
}
/* example for a 2nd slide */
@keyframes fade-2 {
 0% { opacity: 0; }
 8% { opacity: 1; }
 16% { opacity: 0; }
 24% { opacity: 0; }
 32% { opacity: 0; }
 48% { opacity: 0; }
 56% { opacity: 0; }
 64% { opacity: 0; }
 72% { opacity: 0; }
 80% { opacity: 0; }
 88% { opacity: 0; }
 96% { opacity: 0; }
 100% { opacity: 0; }
}
/* example for a 3rd slide */
@keyframes fade-3 {
 0% { opacity: 0; }
 8% { opacity: 0; }
 16% { opacity: 1; }
 24% { opacity: 0; }
 32% { opacity: 0; }
 48% { opacity: 0; }
 56% { opacity: 0; }
 64% { opacity: 0; }
 72% { opacity: 0; }
 80% { opacity: 0; }
 88% { opacity: 0; }
 96% { opacity: 0; }
 100% { opacity: 0; }
}
/* example for a 4th slide */
@keyframes fade-4 {
 0% { opacity: 0; }
 8% { opacity: 0; }
 16% { opacity: 0; }
 24% { opacity: 1; }
 32% { opacity: 0; }
 48% { opacity: 0; }
 56% { opacity: 0; }
 64% { opacity: 0; }
 72% { opacity: 0; }
 80% { opacity: 0; }
 88% { opacity: 0; }
 96% { opacity: 0; }
 100% { opacity: 0; }
}
/* example for a 5th slide */
@keyframes fade-5 {
 0% { opacity: 0; }
 8% { opacity: 0; }
 16% { opacity: 0; }
 24% { opacity: 0; }
 32% { opacity: 1; }
 48% { opacity: 0; }
 56% { opacity: 0; }
 64% { opacity: 0; }
 72% { opacity: 0; }
 80% { opacity: 0; }
 88% { opacity: 0; }
 96% { opacity: 0; }
 100% { opacity: 0; }
}
/* example for a 6th slide */
@keyframes fade-6 {
  0% { opacity: 0; }
 8% { opacity: 0; }
 16% { opacity: 0; }
 24% { opacity: 0; }
 32% { opacity: 0; }
 48% { opacity: 1; }
 56% { opacity: 0; }
 64% { opacity: 0; }
 72% { opacity: 0; }
 80% { opacity: 0; }
 88% { opacity: 0; }
 96% { opacity: 0; }
 100% { opacity: 0; }
}
/* example for a 7th slide */
@keyframes fade-7{
 0% { opacity: 0; }
 8% { opacity: 0; }
 16% { opacity: 0; }
 24% { opacity: 0; }
 32% { opacity: 0; }
 48% { opacity: 0; }
 56% { opacity: 1; }
 64% { opacity: 0; }
 72% { opacity: 0; }
 80% { opacity: 0; }
 88% { opacity: 0; }
 96% { opacity: 0; }
 100% { opacity: 0; }
}
/* example for a 8th slide */
@keyframes fade-8 {
 0% { opacity: 0; }
 8% { opacity: 0; }
 16% { opacity: 0; }
 24% { opacity: 0; }
 32% { opacity: 0; }
 48% { opacity: 0; }
 56% { opacity: 0; }
 64% { opacity: 1; }
 72% { opacity: 0; }
 80% { opacity: 0; }
 88% { opacity: 0; }
 96% { opacity: 0; }
 100% { opacity: 0; }
}
/* example for a 9th slide */
@keyframes fade-9 {
 0% { opacity: 0; }
 8% { opacity: 0; }
 16% { opacity: 0; }
 24% { opacity: 0; }
 32% { opacity: 0; }
 48% { opacity: 0; }
 56% { opacity: 0; }
 64% { opacity: 0; }
 72% { opacity: 1; }
 80% { opacity: 0; }
 88% { opacity: 0; }
 96% { opacity: 0; }
 100% { opacity: 0; }
}
/* example for a 10th slide */
@keyframes fade-10 {
 0% { opacity: 0; }
 8% { opacity: 0; }
 16% { opacity: 0; }
 24% { opacity: 0; }
 32% { opacity: 0; }
 48% { opacity: 0; }
 56% { opacity: 0; }
 64% { opacity: 0; }
 72% { opacity: 0; }
 80% { opacity: 1; }
 88% { opacity: 0; }
 96% { opacity: 0; }
 100% { opacity: 0; }
}
/* example for a 11th slide */
@keyframes fade-11 {
 0% { opacity: 0; }
 8% { opacity: 0; }
 16% { opacity: 0; }
 24% { opacity: 0; }
 32% { opacity: 0; }
 48% { opacity: 0; }
 56% { opacity: 0; }
 64% { opacity: 0; }
 72% { opacity: 0; }
 80% { opacity: 0; }
 88% { opacity: 1; }
 96% { opacity: 0; }
 100% { opacity: 0; }
}
/* example for a 12th slide */
@keyframes fade-12 {
 0% { opacity: 0; }
 8% { opacity: 0; }
 16% { opacity: 0; }
 24% { opacity: 0; }
 32% { opacity: 0; }
 48% { opacity: 0; }
 56% { opacity: 0; }
 64% { opacity: 0; }
 72% { opacity: 0; }
 80% { opacity: 0; }
 88% { opacity: 0; }
 96% { opacity: 1; }
 100% { opacity: 0; }
}