.container-splash{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
    background-color: var(--main-color);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.5s;
    display: flex;
}

.container-splash > div.logo-splash{
    width: 60vw;
    height: 60vw;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("../../img/logo/logo.png");
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.container-splash.disabled{
    display: none;
}

.container-splash.active{
    display: flex;
    opacity: 1;
    transition: opacity 0.5s;
}

.loader-splash{
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader-splash > div{
    width: 5vw;
    height: 5vw;
    background-color: var(--text-color-main);
    border-radius: 100%;
    margin: 5px;

}

.container-splash.active > .loader-splash > div:nth-child(1){
    animation:0.5s animation-preload-splash linear infinite;
}

.container-splash.active > .loader-splash > div:nth-child(2){
    animation:0.5s animation-preload-splash linear infinite;
    animation-delay:0.25s;
}

.container-splash.active > .loader-splash > div:nth-child(3){
    animation:0.5s animation-preload-splash linear infinite;
}

@keyframes animation-preload-splash{
    0%{
        transform:translateY(0vw);
    }
    50%{
        transform:translateY(-5vw);
    }
    100%{
        transform:translateY(0vw);
    }
}