/**
 * Animationsdatei für das eingfäden von Elementen
 * Markus Linne und Katharina Marquardt Anno 2018
 * Benötigt jQuery als Javascript Bibliothek und die JS Datei mlanimation.js
 * Weiterhin wird die Animation.css
 */

.fadein-right.fadein-right.fadein-right,
.animate-right.animate-right.animate-right {
    opacity: 0;
    visibility: hidden;
    transform: translate(-300px, 0);
}

.fadein-right.fadein-right.fadein-right.animated,
.animate-right.animate-right.animate-right.animated {
    opacity: 1;
    visibility: visible;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    transform: translate(0, 0);
    -webkit-transition: -webkit-transform 400ms ease-out 200ms, opacity 400ms ease-out 200ms;
    -moz-transition: -moz-transform 400ms ease-out 200ms, opacity 400ms ease-out 200ms;
    transition: transform 400ms ease-out 200ms, opacity 400ms ease-out 200ms;
}

.fadein-left.fadein-left.fadein-left,
.animate-left.animate-left.animate-left {
    opacity: 0;
    visibility: hidden;
    transform: translate(300px, 0);
}

.fadein-left.fadein-left.fadein-left.animated,
.animate-left.animate-left.animate-left.animated {
    opacity: 1;
    visibility: visible;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    transform: translate(0, 0);
    -webkit-transition: -webkit-transform 400ms ease-out 200ms, opacity 400ms ease-out 200ms;
    -moz-transition: -moz-transform 400ms ease-out 200ms, opacity 400ms ease-out 200ms;
    transition: transform 400ms ease-out 200ms, opacity 400ms ease-out 200ms;
}

.animated.animated.animated.schnell {
    -webkit-transition: -webkit-transform 200ms ease-out 100ms, opacity 400ms ease-out 100ms;
    -moz-transition: -moz-transform 200ms ease-out 100ms, opacity 400ms ease-out 100ms;
    transition: transform 200ms ease-out 100ms, opacity 400ms ease-out 100ms;
}

.animated.animated.animated.langsam {
    -webkit-transition: -webkit-transform 800ms ease-out 100ms, opacity 400ms ease-out 100ms;
    -moz-transition: -moz-transform 800ms ease-out 100ms, opacity 400ms ease-out 100ms;
    transition: transform 600ms ease-out 100ms, opacity 400ms ease-out 100ms;
}

.animated.animated.animated.eins {
    transition-delay: 800ms;
    -moz-transition-delay: 800ms;
    -o-transition-delay: 800ms;
    -webkit-transition-delay: 800ms;
}

.animated.animated.animated.zwei {
    transition-delay: 1600ms;
    -moz-transition-delay: 1600ms;
    -o-transition-delay: 1600ms;
    -webkit-transition-delay: 1600ms;
}

.animated.animated.animated.drei {
    transition-delay: 2400ms;
    -moz-transition-delay: 2400ms;
    -o-transition-delay: 2400ms;
    -webkit-transition-delay: 2400ms;
}

.animated.animated.animated.vier {
    transition-delay: 3200ms;
    -moz-transition-delay: 3200ms;
    -o-transition-delay: 3200ms;
    -webkit-transition-delay: 3200ms;
}

.animated.animated.animated.fuenf {
    transition-delay: 4000ms;
    -moz-transition-delay: 4000ms;
    -o-transition-delay: 4000ms;
    -webkit-transition-delay: 4000ms;
}