@media screen {

    :root {
        --delay-increment: 0.1s;
        --fade-distance: 10px;
    }

    .load-transition {
        position: relative;
        will-change: opacity, transform;
    }

    .load-transition.fade {
        opacity: 0;
        animation: fade 0.5s ease-in-out 0s forwards;
    }

    .load-transition.fade.delay-1 {
        opacity: 0;
        animation: fade 0.5s ease-in-out var(--delay-increment) forwards;
    }

    .load-transition.fade.delay-2 {
        opacity: 0;
        animation: fade 0.5s ease-in-out calc(var(--delay-increment) * 2) forwards;
    }

    .load-transition.fade.delay-3 {
        opacity: 0;
        animation: fade 0.5s ease-in-out calc(var(--delay-increment) * 3) forwards;
    }

    .load-transition.fade.delay-4 {
        opacity: 0;
        animation: fade 0.5s ease-in-out calc(var(--delay-increment) * 4) forwards;
    }

    .load-transition.fade.delay-5 {
        opacity: 0;
        animation: fade 0.5s ease-in-out calc(var(--delay-increment) * 5) forwards;
    }

    .load-transition.fade.delay-6 {
        opacity: 0;
        animation: fade 0.5s ease-in-out calc(var(--delay-increment) * 6) forwards;
    }

    .load-transition.fade-up {
        opacity: 0;
        transform: translateY(var(--fade-distance));
        animation: fadeUp 0.5s ease-in-out 0s forwards;
    }

    .load-transition.fade-up.delay-1 {
        opacity: 0;
        animation: fadeUp 0.5s ease-in-out var(--delay-increment) forwards;
    }

    .load-transition.fade-up.delay-2 {
        opacity: 0;
        animation: fadeUp 0.5s ease-in-out calc(var(--delay-increment) * 2) forwards;
    }

    .load-transition.fade-up.delay-3 {
        opacity: 0;
        animation: fadeUp 0.5s ease-in-out calc(var(--delay-increment) * 3) forwards;
    }

    .load-transition.fade-up.delay-4 {
        opacity: 0;
        animation: fadeUp 0.5s ease-in-out calc(var(--delay-increment) * 4) forwards;
    }

    .load-transition.fade-up.delay-5 {
        opacity: 0;
        animation: fadeUp 0.5s ease-in-out calc(var(--delay-increment) * 5) forwards;
    }

    .load-transition.fade-up.delay-6 {
        opacity: 0;
        animation: fadeUp 0.5s ease-in-out calc(var(--delay-increment) * 6) forwards;
    }

    .load-transition.fade-down {
        opacity: 0;
        transform: translateY(calc(var(--fade-distance) * -1));
        animation: fadeDown 0.5s ease-in-out 0s forwards;
    }

    .load-transition.fade-down.delay-1 {
        opacity: 0;
        animation: fadeDown 0.5s ease-in-out var(--delay-increment) forwards;
    }

    .load-transition.fade-down.delay-2 {
        opacity: 0;
        animation: fadeDown 0.5s ease-in-out calc(var(--delay-increment) * 2) forwards;
    }

    .load-transition.fade-down.delay-3 {
        opacity: 0;
        animation: fadeDown 0.5s ease-in-out calc(var(--delay-increment) * 3) forwards;
    }

    .load-transition.fade-down.delay-4 {
        opacity: 0;
        animation: fadeDown 0.5s ease-in-out calc(var(--delay-increment) * 4) forwards;
    }

    .load-transition.fade-down.delay-5 {
        opacity: 0;
        animation: fadeDown 0.5s ease-in-out calc(var(--delay-increment) * 5) forwards;
    }

    .load-transition.fade-down.delay-6 {
        opacity: 0;
        animation: fadeDown 0.5s ease-in-out calc(var(--delay-increment) * 6) forwards;
    }

    @keyframes fade {
        to {
            opacity: 1;
        }
    }

    @keyframes fadeUp {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes fadeDown {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

}