/* Animation Elements */

.animate-up-wrapper {
    overflow: hidden;
}

.animate-up-element {
    top: 10vh;
    position: relative;
    display: block;
    -webkit-transition: ease-out 1s;
    -moz-transition: ease-out 1s;
    transition: ease-out 1s;
}


/* Opacity Transitions */

@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .fade-in-animation {
        animation: fadeIn 2s 1;
    }

    .slide-up-animation {
        top: 0;
    }

    .fade-out-animation {
        animation: fadeOut 1s 1;
        animation-fill-mode: forwards;
    }
}