/*Thx to Tim Evko http://www.sitepoint.com/you-dont-need-javascript-for-that*/

/*BEGIN *** SLIDER FUER 2 BILDER DYNAMISCH *** BEGIN */

.slideshow-2-pic {
    width: 906px;
    margin: 0;
    overflow: hidden;
    border: solid 1px white;
}

.slideshow-container-2-pic {
    width: 1860px;
    font-size: 0;
    transition: 1s ease;
    height: 515px;
}

.slideshow-container-2-pic:hover {
    animation-play-state: paused;
}


.slide-2-pic {
    animation: slide-2-pic 16s ease infinite;
}

@keyframes slide-2-pic {
    0% {
        transform: translateX(0%);
    }


    25% {
        transform: translateX(0%);
    }



    50% {
        transform: translateX(-50%);
    }



    75% {
        transform: translateX(-50%);
    }



    99% {
        transform: translateX(-50%);
    }

    100% {
        transform: translateX(0);
    }
}


/* ENDE *** SLIDER FUER 2 BILDER DYNAMISCH *** ENDE */

/* BEGIN *** SLIDER FUER 2 BILDER DYNAMISCH mit 400 Höhe *** BEGIN */

.slideshow-2-pic-400 {
    width: 930px;
    margin: 0;
    overflow: hidden;
    border: solid 1px white;
}

.slideshow-container-2-pic-400 {
    width: 1860px;
    font-size: 0;
    transition: 1s ease;
    height: 400px;
}

.slideshow-container-2-pic-400:hover {
    animation-play-state: paused;
}


.slide-2-pic-400 {
    animation: slide-2-pic-400 16s ease infinite;
}

@keyframes slide-2-pic-400 {
    0% {
        transform: translateX(0%);
    }


    25% {
        transform: translateX(0%);
    }



    50% {
        transform: translateX(-50%);
    }



    75% {
        transform: translateX(-50%);
    }



    99% {
        transform: translateX(-50%);
    }

    100% {
        transform: translateX(0);
    }
}


/* ENDE *** SLIDER FUER 2 BILDER DYNAMISCH mit 400 Höhe *** ENDE */

/*BEGIN *** SLIDER FUER 4 BILDER DYNAMISCH *** BEGIN */

.slideshow-4-pic {
    width: 906px;
    margin: 0;
    overflow: hidden;
    border: solid 1px white;
}

.slideshow-container-4-pic {
    width: 3720px;
    font-size: 0;
    transition: 1s ease;
    height: 515px;
}

.slideshow-container-4-pic:hover {
    animation-play-state: paused;
}


.slide-4-pic {
    animation: slide-4-pic 32s ease infinite;
}

@keyframes slide-4-pic {
    0% {
        transform: translateX(0%);
    }

    12.5% {
        transform: translateX(0%);
    }

    25% {
        transform: translateX(-25%);
    }

    37.5% {
        transform: translateX(-25%);
    }

    50% {
        transform: translateX(-50%);
    }

    62.5% {
        transform: translateX(-50%);
    }

    75% {
        transform: translateX(-75%);
    }

    87.5% {
        transform: translateX(-75%);
    }

    99% {
        transform: translateX(-75%);
    }

    100% {
        transform: translateX(0);
    }
}


/* ENDE *** SLIDER FUER 4 BILDER DYNAMISCH *** ENDE */


/* BEGIN *** SLIDER FUER 4 BILDER STATISCH *** BEGIN */

.slideshow-4-pic-static {
    height: 515px;
    width: 906px;
    margin: auto;

}

.slideshow-4-pic-static img {
    position: absolute;
    height: 515px;
    width: 906px;
    opacity: 0;
}

.slideshow-4-pic-static:hover {
    animation-play-state: paused;
}



.slideshow-4-pic-static img:nth-of-type(1) {
    animation: fade 20s ease-in-out infinite;
}

.slideshow-4-pic-static img:nth-of-type(2) {
    animation: fade 20s 5s ease-in-out infinite;
}

.slideshow-4-pic-static img:nth-of-type(3) {
    animation: fade 20s 10s ease-in-out infinite;
}

.slideshow-4-pic-static img:nth-of-type(4) {
    animation: fade 20s 15s ease-in-out infinite;
}


@keyframes fade {

    5%,
    25% {
        opacity: 1;
    }

    0%,
    30%,
    100% {
        opacity: 0;
    }
}


/* ENDE *** SLIDER FUER 4 BILDER STATISCH *** ENDE */