/**
 * 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;
}

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

.fadein-unten.fadein-unten.fadein-unten.animated,
.animate-unten.animate-unten.animate-unten.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-oben.fadein-oben.fadein-oben,
.animate-oben.animate-oben.animate-oben  {
    opacity: 0;
    visibility: hidden;
    transform: translate(0, -50px);
}

.fadein-oben.fadein-oben.fadein-oben.animated,
.animate-oben.animate-oben.animate-oben.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-op.fadein-op.fadein-op,
.animate-op.animate-op.animate-op  {
    opacity: 0;
    visibility: hidden;
}

.fadein-op.fadein-op.fadein-op.animated,
.animate-op.animate-op.animate-op.animated  {
    opacity: 1;
    visibility: visible;
    -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 200ms, opacity 200ms ease-out 200ms;
    -moz-transition: -moz-transform 200ms ease-out 200ms, opacity 200ms ease-out 200ms;
    transition: transform 200ms ease-out 200ms, opacity 200ms ease-out 200ms;
}

.animated.animated.animated.langsam {
    -webkit-transition: -webkit-transform 1800ms ease-out 1800ms, opacity 1800ms ease-out 1800ms;
    -moz-transition: -moz-transform 1800ms ease-out 1800ms, opacity 1800ms ease-out 1800ms;
    transition: transform  1800ms ease-out 1800ms, opacity 1800ms ease-out 1800ms;
}

.animated.animated.animated.ani1 {
    -webkit-transition: -webkit-transform 800ms ease-out 800ms, opacity 800ms ease-out 800ms;
    -moz-transition: -moz-transform 800ms ease-out 800ms, opacity 800ms ease-out 800ms;
    transition: transform  800ms ease-out 800ms, opacity 800ms ease-out 800ms;
}

.animated.animated.animated.ani2 {
    -webkit-transition: -webkit-transform 1200ms ease-out 800ms, opacity 800ms ease-out 1200ms;
    -moz-transition: -moz-transform 1200ms ease-out 800ms, opacity 1200ms ease-out 1200ms;
    transition: transform  1200ms ease-out 1200ms, opacity 800ms ease-out 1200ms;
}

.animated.animated.animated.ani3 {
    -webkit-transition: -webkit-transform 2200ms ease-out 1200ms, opacity 800ms ease-out 2200ms;
    -moz-transition: -moz-transform 2200ms ease-out 1200ms, opacity 2200ms ease-out 2200ms;
    transition: transform  2200ms ease-out 1200ms, opacity 800ms ease-out 2200ms;
}

.animated.animated.animated.ani4 {
    -webkit-transition: -webkit-transform 3200ms ease-out 1200ms, opacity 800ms ease-out 3200ms;
    -moz-transition: -moz-transform 3200ms ease-out 1200ms, opacity 3200ms ease-out 3200ms;
    transition: transform  3200ms ease-out 1200ms, opacity 3200ms ease-out 3200ms;
}

.animated.animated.animated.ani5 {
    -webkit-transition: -webkit-transform 4200ms ease-out 1200ms, opacity 4200ms ease-out 4200ms;
    -moz-transition: -moz-transform 4200ms ease-out 1200ms, opacity 4200ms ease-out 4200ms;
    transition: transform  4200ms ease-out 1200ms, opacity 4200ms ease-out 4200ms;
}