.banner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 50;
    background-color: #0d0c0c;
    overflow: hidden;
    animation-name: slide-up-banner;
    animation-delay: 2s;
    animation-duration: 1.5s;
    animation-timing-function: ease-in;
    animation-fill-mode: both;
    box-shadow: 10em 0 0 black;
}

.logo-wrapper {
    /* Scale font-size to scale logo! */
    font-size: 1.5em; 
    height: min(10em, calc(26.7vw));
    max-width: 80vw;
    aspect-ratio: 3;
    margin-top: calc(50vh - min(10em, calc(26.7vw)) / 2);
    margin-left: calc(50vw - min(10em, calc(26.7vw)) / 2 * 3);
    overflow: hidden;

    background-image: url("/img/ES_Alpha_White.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    
    animation-name: slide-up-logo;
    animation-delay: 2s;
    animation-duration: 1.5s;
    animation-timing-function: ease-in;
    animation-fill-mode: both;
}

.banner > .progressbar {
    width: 66%;
    height: 0.1em;
    background-color: #585252;
    text-align: center;
    margin-top: min(10em, calc(26.7vw));
    margin-left: 16.6%;
}

.progressbar > .status {
    position: relative;
    width: 0;
    height: 100%;
    z-index: 51;
    background-color: #f7f0f0;

    animation-name: progressbar-load;
    animation-duration: 2s;
    animation-delay: 0.2s;
    animation-timing-function: ease;
    animation-fill-mode: both;
}

@keyframes progressbar-load {
    from {
        width: 0%;
        margin-left:50%;
    }
    to {
        width: 100%;
        margin-left:0%;
    }
}

@keyframes slide-up-banner {
    from {height: 100vh;}
    to {height: 0;}
}

@keyframes slide-up-logo {
    from {margin-top: calc(50vh - 5em);}
    to {margin-top: -15em;}
}