/**
 * 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 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 1800ms ease-out 800ms, opacity 800ms ease-out 800ms;
    -moz-transition: -moz-transform 1800ms ease-out 800ms, opacity 800ms ease-out 800ms;
    transition: transform  1800ms ease-out 800ms, opacity 800ms ease-out 800ms;
}