#landing {
    overflow: hidden;
    height: calc(var(--vh, 1vh) * 100);
    position: relative;
    min-height: calc(var(--vh, 1vh) * 100);
}

#landing .hero {
    filter: brightness(0.9);
    z-index: -1;
    min-height: 100%;
    min-width: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#landing img.hero {
    filter: brightness(0.5);
}


/* ---- SLOGAN ---- */

#landing .slogan,
#landing .title {
    display: flex;
    flex-direction: column;
    position: absolute;
    color: white;
    font-size: 4.2em;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.2rem;
    left: 5%;
    top: 80%;
    transform: translate(0%, -100%);
    word-break: break-word;
}

#landing .title {
    font-size: 8em;
    top: 65%;
    left: 15%;
}

#landing .title span {
    animation: fade-left 1200ms;
}

#landing .slogan span:nth-child(1) {
    margin-left: 6rem;
    animation: fade-right 800ms;
}

#landing .slogan span:nth-child(2) {
    animation: fade-left 1200ms;
}

#landing .slogan span:nth-child(3) {
    margin-left: 4rem;
    animation: fade-right 1600ms;
}

#landing .btt-main {
    animation: fade-in 1.5s;
}

@media (max-width: 750px) {
    #landing .btt-main {
        display: none;
    }
}