/*#region main*/

#main {
    width: 100%;
    height: calc(100vh - 100px);
    min-height: 720px;
}

#title {
    width: 100%;
    overflow: hidden;
    font-size: 4rem;
    letter-spacing: 1rem;
    line-height: 4rem;
    text-transform: uppercase;
    white-space: nowrap;
    animation: sliddes-fade-in 2s;
    animation-fill-mode: forwards;
}

#line-0 {
    margin: 0;
    color: var(--color-SLIDDES-dark);
    text-transform: uppercase;
    font-family: 'Roboto-Medium';
    font-size: 1rem;
    letter-spacing: 0.15rem;
    font-stretch: normal;
    opacity: 0;
    animation: opacity-fade-in 2s;
    animation-delay: 2s;
    animation-fill-mode: forwards;
}

#line-1 {
    margin: 0;
    color: var(--color-SLIDDES-dark);
    text-transform: uppercase;
    font-family: 'Roboto-Medium';
    font-size: 1rem;
    letter-spacing: 0.15rem;
    font-stretch: normal;
    opacity: 0;
    animation: opacity-fade-in 2s;
    animation-delay: 4s;
    animation-fill-mode: forwards;
}

#sliddes-logo {
    height: 128px;
    margin-top: 4rem;
    opacity: 0;
    animation: opacity-fade-in 2s;
    animation-delay: 6s;
    animation-fill-mode: forwards;
}

.site-header {
    opacity: 0;
    animation: opacity-fade-in 2s;
    animation-delay: 6s;
    animation-fill-mode: forwards;
}

@keyframes sliddes-fade-in {
    from {
        width: 0;
    }
}

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

/*#endregion*/

.js-loading *:after {
    animation-play-state: paused !important;
}