.delay_1s {
    animation-delay: 1s;
}

.delay_2s {
    animation-delay: 2s;
}

/* FadeIn Animation */

.fade_initial {
    opacity: 0;
}

.fadeIn {
    animation-name: fadeIn;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1}
}

/* SlideIn */

.slideIn_initial {
    bottom: -50px;
}

.slideIn {
    animation-name: slideIn;
    animation-duration: 1s;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}

@keyframes slideIn {
    from {bottom: -50px;}
    to {bottom: 0px;}
}

/* Crossfade In */

.crossfadeIn_initial {
    opacity: 0;
}

.crossfadeIn {
    animation-delay: -1s;
    animation-name: crossfadeIn;
    animation-duration: 1.2s;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}

@keyframes crossfadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}

/* Crossfade Out */

.crossfadeOut_initial {
    opacity: 1;
}

.crossfadeOut {
    animation-delay: -1s;
    animation-name: crossfadeOut;
    animation-duration: 1.2s;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}

@keyframes crossfadeOut {
    from {opacity: 1;}
    to {opacity: 0;}
}