/*
##########################################################################

© www.versicherungsmarkt.de gmbh
Version 5, 03.04.2020

~~~~~~~~~~~~~~~~~~
Einbindung
~~~~~~~~~~~~~~~~~~
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link href="jutho_fadeIn.css" rel="stylesheet">
<script src="jutho_fadeIn.js"></script>

~~~~~~~~~~~~~~~~~~
Definition
~~~~~~~~~~~~~~~~~~
Die "einfliegenden" Elemente müssen lediglich mit einer der folgenden 
Klassen belegt werden
.fadeInRight, .fadeInLeft, .fadeInTop, .fadeInBottom, .fadeInTopLeft, 
.fadeInTopRight, .fadeInBottomLeft, .fadeInBottomRight
[ gleiches gilt für .fadeOut***** ]

Zusätzlich kann (muss aber nicht) auf den Elementen mit data-Attributen 
gearbeitet werden, um die Flugeigenschaften zu verändern:
data-fadeInTimeout="2" 		=> Dauer der Verzögerung des Animations-Starts in Sekunden
data-fadeInDuration="1" 		=> Dauer der Animation in Sekunden
data-fadeInTiming="ease-out"	=> CSS-Timing-Angaben (http://www.w3schools.com/cssref/css3_pr_animation-timing-function.asp)

##########################################################################
*/
.fadeIn,
.fadeInRight,
.fadeInLeft,
.fadeInTop,
.fadeInBottom,
.fadeInTopLeft,
.fadeInTopRight,
.fadeInBottomLeft,
.fadeInBottomRight {
    visibility: hidden;
}

.fadeOut,
.fadeOutRight,
.fadeOutLeft,
.fadeOutTop,
.fadeOutBottom,
.fadeOutTopLeft,
.fadeOutTopRight,
.fadeOutBottomLeft,
.fadeOutBottomRight {
    visibility: visible;
}

.fadeIn.animated {
    -webkit-animation-name: fadeIn;
    -moz-animation-name: fadeIn;
    -o-animation-name: fadeIn;
    animation-name: fadeIn;
    animation-fill-mode: forwards;
}
.fadeInRight.animated {
    -webkit-animation-name: fadeInRight;
    -moz-animation-name: fadeInRight;
    -o-animation-name: fadeInRight;
    animation-name: fadeInRight;
    animation-fill-mode: forwards;
}
.fadeInLeft.animated {
    -webkit-animation-name: fadeInLeft;
    -moz-animation-name: fadeInLeft;
    -o-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
    animation-fill-mode: forwards;
}
.fadeInTop.animated {
    -webkit-animation-name: fadeInTop;
    -moz-animation-name: fadeInTop;
    -o-animation-name: fadeInTop;
    animation-name: fadeInTop;
    animation-fill-mode: forwards;
}
.fadeInBottom.animated {
    -webkit-animation-name: fadeInBottom;
    -moz-animation-name: fadeInBottom;
    -o-animation-name: fadeInBottom;
    animation-name: fadeInBottom;
    animation-fill-mode: forwards;
}
.fadeInTopLeft.animated {
    -webkit-animation-name: fadeInTopLeft;
    -moz-animation-name: fadeInTopLeft;
    -o-animation-name: fadeInTopLeft;
    animation-name: fadeInTopLeft;
    animation-fill-mode: forwards;
}
.fadeInTopRight.animated {
    -webkit-animation-name: fadeInTopRight;
    -moz-animation-name: fadeInTopRight;
    -o-animation-name: fadeInTopRight;
    animation-name: fadeInTopRight;
    animation-fill-mode: forwards;
}
.fadeInBottomLeft.animated {
    -webkit-animation-name: fadeInBottomLeft;
    -moz-animation-name: fadeInBottomLeft;
    -o-animation-name: fadeInBottomLeft;
    animation-name: fadeInBottomLeft;
    animation-fill-mode: forwards;
}
.fadeInBottomRight.animated {
    -webkit-animation-name: fadeInBottomRight;
    -moz-animation-name: fadeInBottomRight;
    -o-animation-name: fadeInBottomRight;
    animation-name: fadeInBottomRight;
    animation-fill-mode: forwards;
}

.fadeOut.animated {
    -webkit-animation-name: fadeOut;
    -moz-animation-name: fadeOut;
    -o-animation-name: fadeOut;
    animation-name: fadeOut;

    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
.fadeOutRight.animated {
    -webkit-animation-name: fadeOutRight;
    -moz-animation-name: fadeOutRight;
    -o-animation-name: fadeOutRight;
    animation-name: fadeOutRight;

    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
.fadeOutLeft.animated {
    -webkit-animation-name: fadeOutLeft;
    -moz-animation-name: fadeOutLeft;
    -o-animation-name: fadeOutLeft;
    animation-name: fadeOutLeft;

    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
.fadeOutTop.animated {
    -webkit-animation-name: fadeOutTop;
    -moz-animation-name: fadeOutTop;
    -o-animation-name: fadeOutTop;
    animation-name: fadeOutTop;

    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
.fadeOutBottom.animated {
    -webkit-animation-name: fadeOutBottom;
    -moz-animation-name: fadeOutBottom;
    -o-animation-name: fadeOutBottom;
    animation-name: fadeOutBottom;

    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
.fadeOutTopLeft.animated {
    -webkit-animation-name: fadeOutTopLeft;
    -moz-animation-name: fadeOutTopLeft;
    -o-animation-name: fadeOutTopLeft;
    animation-name: fadeOutTopLeft;

    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
.fadeOutTopRight.animated {
    -webkit-animation-name: fadeOutTopRight;
    -moz-animation-name: fadeOutTopRight;
    -o-animation-name: fadeOutTopRight;
    animation-name: fadeOutTopRight;

    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
.fadeOutBottomLeft.animated {
    -webkit-animation-name: fadeOutBottomLeft;
    -moz-animation-name: fadeOutBottomLeft;
    -o-animation-name: fadeOutBottomLeft;
    animation-name: fadeOutBottomLeft;

    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
.fadeOutBottomRight.animated {
    -webkit-animation-name: fadeOutBottomRight;
    -moz-animation-name: fadeOutBottomRight;
    -o-animation-name: fadeOutBottomRight;
    animation-name: fadeOutBottomRight;

    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

/*
Keyframes
*/
@-webkit-keyframes fadeIn {
    from {
        -webkit-transform: scale(0.01);
        opacity: 0.01;
    }
    to {
        -webkit-transform: scale(1);
        opacity: 1;
    }
}
@-webkit-keyframes fadeInRight {
    from {
        -webkit-transform: translate(100%, 0);
        opacity: 0;
    }
    to {
        -webkit-transform: translate(0px, 0);
        opacity: 1;
    }
}
@-webkit-keyframes fadeInLeft {
    from {
        -webkit-transform: translate(-100%, 0);
        opacity: 0;
    }
    to {
        -webkit-transform: translate(0px, 0);
        opacity: 1;
    }
}
@-webkit-keyframes fadeInTop {
    from {
        -webkit-transform: translate(0, -100%);
        opacity: 0;
    }
    to {
        -webkit-transform: translate(0px, 0);
        opacity: 1;
    }
}
@-webkit-keyframes fadeInBottom {
    from {
        -webkit-transform: translate(0, 100%);
        opacity: 0;
    }
    to {
        -webkit-transform: translate(0px, 0);
        opacity: 1;
    }
}
@-webkit-keyframes fadeInTopLeft {
    from {
        -webkit-transform: translate(-100%, -100%);
        opacity: 0;
    }
    to {
        -webkit-transform: translate(0px, 0);
        opacity: 1;
    }
}
@-webkit-keyframes fadeInTopRight {
    from {
        -webkit-transform: translate(100%, -100%);
        opacity: 0;
    }
    to {
        -webkit-transform: translate(0px, 0);
        opacity: 1;
    }
}
@-webkit-keyframes fadeInBottomLeft {
    from {
        -webkit-transform: translate(-100%, 100%);
        opacity: 0;
    }
    to {
        -webkit-transform: translate(0px, 0);
        opacity: 1;
    }
}
@-webkit-keyframes fadeInBottomRight {
    from {
        -webkit-transform: translate(100%, 100%);
        opacity: 0;
    }
    to {
        -webkit-transform: translate(0px, 0);
        opacity: 1;
    }
}

@-webkit-keyframes fadeOut {
    from {
        -webkit-transform: scale(1);
        opacity: 1;
    }
    to {
        -webkit-transform: scale(0.01);
        opacity: 0;
    }
}
@-webkit-keyframes fadeOutRight {
    from {
        -webkit-transform: translate(0px, 0);
        opacity: 1;
    }
    to {
        -webkit-transform: translate(100%, 0);
        opacity: 0;
    }
}
@-webkit-keyframes fadeOutLeft {
    from {
        -webkit-transform: translate(0px, 0);
        opacity: 1;
    }
    to {
        -webkit-transform: translate(-100%, 0);
        opacity: 0;
    }
}
@-webkit-keyframes fadeOutTop {
    from {
        -webkit-transform: translate(0px, 0);
        opacity: 1;
    }
    to {
        -webkit-transform: translate(0, -100%);
        opacity: 0;
    }
}
@-webkit-keyframes fadeOutBottom {
    from {
        -webkit-transform: translate(0px, 0);
        opacity: 1;
    }
    to {
        -webkit-transform: translate(0, 100%);
        opacity: 0;
    }
}
@-webkit-keyframes fadeOutTopLeft {
    from {
        -webkit-transform: translate(0px, 0);
        opacity: 1;
    }
    to {
        -webkit-transform: translate(-100%, -100%);
        opacity: 0;
    }
}
@-webkit-keyframes fadeOutTopRight {
    from {
        -webkit-transform: translate(0px, 0);
        opacity: 1;
    }
    to {
        -webkit-transform: translate(100%, -100%);
        opacity: 0;
    }
}
@-webkit-keyframes fadeOutBottomLeft {
    from {
        -webkit-transform: translate(0px, 0);
        opacity: 1;
    }
    to {
        -webkit-transform: translate(-100%, 100%);
        opacity: 0;
    }
}
@-webkit-keyframes fadeOutBottomRight {
    from {
        -webkit-transform: translate(0px, 0);
        opacity: 1;
    }
    to {
        -webkit-transform: translate(100%, 100%);
        opacity: 0;
    }
}
/*####################*/
@-moz-keyframes fadeIn {
    from {
        -moz-transform: scale(0.01);
        opacity: 0;
    }
    to {
        -moz-transform: scale(1);
        opacity: 1;
    }
}
@-moz-keyframes fadeInRight {
    from {
        -moz-transform: translate(100%, 0);
        opacity: 0;
    }
    to {
        -moz-transform: translate(0px, 0);
        opacity: 1;
    }
}
@-moz-keyframes fadeInLeft {
    from {
        -moz-transform: translate(-100%, 0);
        opacity: 0;
    }
    to {
        -moz-transform: translate(0px, 0);
        opacity: 1;
    }
}
@-moz-keyframes fadeInTop {
    from {
        -moz-transform: translate(0, -100%);
        opacity: 0;
    }
    to {
        -moz-transform: translate(0px, 0);
        opacity: 1;
    }
}
@-moz-keyframes fadeInBottom {
    from {
        -moz-transform: translate(0, 100%);
        opacity: 0;
    }
    to {
        -moz-transform: translate(0px, 0);
        opacity: 1;
    }
}
@-moz-keyframes fadeInTopLeft {
    from {
        -moz-transform: translate(-100%, -100%);
        opacity: 0;
    }
    to {
        -moz-transform: translate(0px, 0);
        opacity: 1;
    }
}
@-moz-keyframes fadeInTopRight {
    from {
        -moz-transform: translate(100%, -100%);
        opacity: 0;
    }
    to {
        -moz-transform: translate(0px, 0);
        opacity: 1;
    }
}
@-moz-keyframes fadeInBottomLeft {
    from {
        -moz-transform: translate(-100%, 100%);
        opacity: 0;
    }
    to {
        -moz-transform: translate(0px, 0);
        opacity: 1;
    }
}
@-moz-keyframes fadeInBottomRight {
    from {
        -moz-transform: translate(100%, 100%);
        opacity: 0;
    }
    to {
        -moz-transform: translate(0px, 0);
        opacity: 1;
    }
}

@-moz-keyframes fadeOut {
    from {
        -moz-transform: scale(1);
        opacity: 1;
    }
    to {
        -moz-transform: scale(0.01);
        opacity: 0;
    }
}
@-moz-keyframes fadeOutRight {
    from {
        -moz-transform: translate(0px, 0);
        opacity: 1;
    }
    to {
        -moz-transform: translate(100%, 0);
        opacity: 0;
    }
}
@-moz-keyframes fadeOutLeft {
    from {
        -moz-transform: translate(0px, 0);
        opacity: 1;
    }
    to {
        -moz-transform: translate(-100%, 0);
        opacity: 0;
    }
}
@-moz-keyframes fadeOutTop {
    from {
        -moz-transform: translate(0px, 0);
        opacity: 1;
    }
    to {
        -moz-transform: translate(0, -100%);
        opacity: 0;
    }
}
@-moz-keyframes fadeOutBottom {
    from {
        -moz-transform: translate(0px, 0);
        opacity: 1;
    }
    to {
        -moz-transform: translate(0, 100%);
        opacity: 0;
    }
}
@-moz-keyframes fadeOutTopLeft {
    from {
        -moz-transform: translate(0px, 0);
        opacity: 1;
    }
    to {
        -moz-transform: translate(-100%, -100%);
        opacity: 0;
    }
}
@-moz-keyframes fadeOutTopRight {
    from {
        -moz-transform: translate(0px, 0);
        opacity: 1;
    }
    to {
        -moz-transform: translate(100%, -100%);
        opacity: 0;
    }
}
@-moz-keyframes fadeOutBottomLeft {
    from {
        -moz-transform: translate(0px, 0);
        opacity: 1;
    }
    to {
        -moz-transform: translate(-100%, 100%);
        opacity: 0;
    }
}
@-moz-keyframes fadeOutBottomRight {
    from {
        -moz-transform: translate(0px, 0);
        opacity: 1;
    }
    to {
        -moz-transform: translate(100%, 100%);
        opacity: 0;
    }
}
/*###############*/
@-o-keyframes fadeIn {
    from {
        -o-transform: scale(0.01);
        opacity: 0;
    }
    to {
        -o-transform: scale(1);
        opacity: 1;
    }
}
@-o-keyframes fadeInRight {
    from {
        -o-transform: translate(100%, 0);
        opacity: 0;
    }
    to {
        -o-transform: translate(0px, 0);
        opacity: 1;
    }
}
@-o-keyframes fadeInLeft {
    from {
        -o-transform: translate(-100%, 0);
        opacity: 0;
    }
    to {
        -o-transform: translate(0px, 0);
        opacity: 1;
    }
}
@-o-keyframes fadeInTop {
    from {
        -o-transform: translate(0, -100%);
        opacity: 0;
    }
    to {
        -o-transform: translate(0px, 0);
        opacity: 1;
    }
}
@-o-keyframes fadeInBottom {
    from {
        -o-transform: translate(0, 100%);
        opacity: 0;
    }
    to {
        -o-transform: translate(0px, 0);
        opacity: 1;
    }
}
@-o-keyframes fadeInTopLeft {
    from {
        -o-transform: translate(-100%, -100%);
        opacity: 0;
    }
    to {
        -o-transform: translate(0px, 0);
        opacity: 1;
    }
}
@-o-keyframes fadeInTopRight {
    from {
        -o-transform: translate(100%, -100%);
        opacity: 0;
    }
    to {
        -o-transform: translate(0px, 0);
        opacity: 1;
    }
}
@-o-keyframes fadeInBottomLeft {
    from {
        -o-transform: translate(-100%, 100%);
        opacity: 0;
    }
    to {
        -o-transform: translate(0px, 0);
        opacity: 1;
    }
}
@-o-keyframes fadeInBottomRight {
    from {
        -o-transform: translate(100%, 100%);
        opacity: 0;
    }
    to {
        -o-transform: translate(0px, 0);
        opacity: 1;
    }
}

@-o-keyframes fadeOut {
    from {
        -o-transform: scale(1);
        opacity: 1;
    }
    to {
        -o-transform: scale(0.01);
        opacity: 0;
    }
}
@-o-keyframes fadeOutRight {
    from {
        -o-transform: translate(0px, 0);
        opacity: 1;
    }
    to {
        -o-transform: translate(100%, 0);
        opacity: 0;
    }
}
@-o-keyframes fadeOutLeft {
    from {
        -o-transform: translate(0px, 0);
        opacity: 1;
    }
    to {
        -o-transform: translate(-100%, 0);
        opacity: 0;
    }
}
@-o-keyframes fadeOutTop {
    from {
        -o-transform: translate(0px, 0);
        opacity: 1;
    }
    to {
        -o-transform: translate(0, -100%);
        opacity: 0;
    }
}
@-o-keyframes fadeOutBottom {
    from {
        -o-transform: translate(0px, 0);
        opacity: 1;
    }
    to {
        -o-transform: translate(0, 100%);
        opacity: 0;
    }
}
@-o-keyframes fadeOutTopLeft {
    from {
        -o-transform: translate(0px, 0);
        opacity: 1;
    }
    to {
        -o-transform: translate(-100%, -100%);
        opacity: 0;
    }
}
@-o-keyframes fadeOutTopRight {
    from {
        -o-transform: translate(0px, 0);
        opacity: 1;
    }
    to {
        -o-transform: translate(100%, -100%);
        opacity: 0;
    }
}
@-o-keyframes fadeOutBottomLeft {
    from {
        -o-transform: translate(0px, 0);
        opacity: 1;
    }
    to {
        -o-transform: translate(-100%, 100%);
        opacity: 0;
    }
}
@-o-keyframes fadeOutBottomRight {
    from {
        -o-transform: translate(0px, 0);
        opacity: 1;
    }
    to {
        -o-transform: translate(100%, 100%);
        opacity: 0;
    }
}
/*#############################*/
@keyframes fadeIn {
    from {
        transform: scale(0.01);
        opacity: 0;
        visibility: hidden;
    }
    to {
        transform: scale(1);
        opacity: 1;
        visibility: visible;
    }
}
@keyframes fadeInRight {
    from {
        transform: translate(100%, 0);
        opacity: 0;
        visibility: hidden;
    }
    to {
        transform: translate(0px, 0);
        opacity: 1;
        visibility: visible;
    }
}
@keyframes fadeInLeft {
    from {
        transform: translate(-100%, 0);
        opacity: 0;
        visibility: hidden;
    }
    to {
        transform: translate(0px, 0);
        opacity: 1;
        visibility: visible;
    }
}
@keyframes fadeInTop {
    from {
        transform: translate(0, -100%);
        opacity: 0;
        visibility: hidden;
    }
    to {
        transform: translate(0px, 0);
        opacity: 1;
        visibility: visible;
    }
}
@keyframes fadeInBottom {
    from {
        transform: translate(0, 100%);
        opacity: 0;
        visibility: hidden;
    }
    to {
        transform: translate(0px, 0);
        opacity: 1;
        visibility: visible;
    }
}
@keyframes fadeInTopLeft {
    from {
        transform: translate(-100%, -100%);
        opacity: 0;
        visibility: hidden;
    }
    to {
        transform: translate(0px, 0);
        opacity: 1;
        visibility: visible;
    }
}
@keyframes fadeInTopRight {
    from {
        transform: translate(100%, -100%);
        opacity: 0;
        visibility: hidden;
    }
    to {
        transform: translate(0px, 0);
        opacity: 1;
        visibility: visible;
    }
}
@keyframes fadeInBottomLeft {
    from {
        transform: translate(-100%, 100%);
        opacity: 0;
        visibility: hidden;
    }
    to {
        transform: translate(0px, 0);
        opacity: 1;
        visibility: visible;
    }
}
@keyframes fadeInBottomRight {
    from {
        transform: translate(100%, 100%);
        opacity: 0;
        visibility: hidden;
    }
    to {
        transform: translate(0px, 0);
        opacity: 1;
        visibility: visible;
    }
}

@keyframes fadeOut {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(0.01);
        opacity: 0;
    }
}
@keyframes fadeOutRight {
    from {
        transform: translate(0px, 0);
        opacity: 1;
    }
    to {
        transform: translate(100%, 0);
        opacity: 0;
    }
}
@keyframes fadeOutLeft {
    from {
        transform: translate(0px, 0);
        opacity: 1;
    }
    to {
        transform: translate(-100%, 0);
        opacity: 0;
    }
}
@keyframes fadeOutTop {
    from {
        transform: translate(0px, 0);
        opacity: 1;
    }
    to {
        transform: translate(0, -100%);
        opacity: 0;
    }
}
@keyframes fadeOutBottom {
    from {
        transform: translate(0px, 0);
        opacity: 1;
    }
    to {
        transform: translate(0, 100%);
        opacity: 0;
    }
}
@keyframes fadeOutTopLeft {
    from {
        transform: translate(0px, 0);
        opacity: 1;
    }
    to {
        transform: translate(-100%, -100%);
        opacity: 0;
    }
}
@keyframes fadeOutTopRight {
    from {
        transform: translate(0px, 0);
        opacity: 1;
    }
    to {
        transform: translate(100%, -100%);
        opacity: 0;
    }
}
@keyframes fadeOutBottomLeft {
    from {
        transform: translate(0px, 0);
        opacity: 1;
    }
    to {
        transform: translate(-100%, 100%);
        opacity: 0;
    }
}
@keyframes fadeOutBottomRight {
    from {
        transform: translate(0px, 0);
        opacity: 1;
    }
    to {
        transform: translate(100%, 100%);
        opacity: 0;
    }
}

/*
##########################################################################
########## Versionshistorie:
##########################################################################

+ Version 3: Cross-Browser-Unterstützung nachgerüstet
+ Version 4: Animations-Start noch vor dem Scrollen, wenn Elemente innerhalb des Viewports. data-fadeInTimeout Attribut eingeführt.
+ Version 5: Neue Animation .fadeIn
+ Version 6: FadeOut wird ebenfalls unterstützt
+ Version 7: Starten aller FadeIns bei opacity:0 (bisher 0.5)
*/