#fake-preloader{
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 999;
    transition: .5s ease-in;
}

#fake-preloader.active{
    transform: translateX(-100%);
}

#fake-preloader .container{
    position: relative;
    max-width: none;
    width: 200vw;
    height: 100%;
    display: flex;
    transition: .75s cubic-bezier(0.5, 1.2, 1, 1);
    transition-delay: .5s;
}

#fake-preloader .container.active{
    transform: translateX(-50%);
}

.fp-count{
    position: absolute;
    left: 50%;
    bottom: var(--size1);
    transform: translateX(-50%);
    color: var(--color7);
    z-index: 1;
    transition: 1s;
    animation: fp-count 2.5s cubic-bezier(.47,2,.2,1);
}

@keyframes fp-count {
    0%{
        transform: translate(-50%,100%) scale(.5);
        opacity: 0%;
    }    
}

.fp-page{
    position: relative;
    width: 100vw;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color7);
}

.fp-page1 .brand{
    animation: fp-page1_brand 1s cubic-bezier(.47,1.64,.41,2);
}

@keyframes fp-page1_brand {
    0%{
        opacity: 0;
        transform: skewY(-10deg) translateY(30%);
    }

    100%{
        opacity: 1;
        transform: inherit;
    }
}

.fp-page1{
    background-color: var(--color1);
}


.fp-page2{
    background-color: var(--color2);
}

.fp-page2 h2{
    text-align: center;
    width: min-content;
    transition: 2s;
    font-size: 3rem;
}


.fp-page2 h2.active{
    transform: translate(100%,-1000%);
}