:root {
    --dur: 6s;
    --anim-func: ease-in;
}

.preloader {
	z-index: 1000;
}

.preloader__content {
    position: relative;
    max-width: 630px;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preloader__content::before, .preloader__content::after {
    content: "";
    position: absolute;
    opacity: 0;
    left: 32%;
    transform: translateX(-50%);
    height: 46%;
    width: 40px;
    background: var(--color-black);
    animation-duration: var(--dur);
    animation-timing-function: var(--anim-func);
    animation-name: step-1;
}

.preloader__content::before {
    top: 0;
}

.preloader__content::after {
    bottom: 0;
}

.preloader.active {
    display: flex;
}

.preloader.hidden {
    display: none;
}

.p1, .p2, .p3, .p4 {
    animation-duration: var(--dur);
    animation-timing-function: var(--anim-func);
}

.p1 {
    animation-name: step-2;
}

.p2 {
    animation-name: step-3;
}

.p3 {
    animation-name: step-4;
}

.p4 {
    animation-name: step-5;
}

.word1 path, .word2 path {
    animation-duration: var(--dur);
    animation-timing-function: var(--anim-func);
    animation-name: step-6;
}

.preloader {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 101;
    width: 100%;
    height: 100vh;
    background-color:#B3D6DA;
    display: none;
    justify-content: center;
    align-items: center;
    opacity: 1;
    animation-duration: var(--dur);
    animation-timing-function: var(--anim-func);
    animation-name: step-7;
}

.preloader__logo svg path {
    fill: #fff;
}

/* Animation keyframes */ 


@keyframes step-1 {
    0% {
        height: 0;
        opacity: 1;
    }
    20% {
        height: 46%;
        opacity: 1;
    }
    60% {
        opacity: 1;
    }
    70% {
        opacity: 0;
    }
}

@keyframes step-2 {
    0% {
        fill: #262827;
        opacity: 0;
    }
    20% {
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    60% {
        fill: #262827;
    }
    70% {
        fill: #fff;
    }
    100% {
        fill: #fff;
    }
}

@keyframes step-3 {
    0% {
        fill: #262827;
        opacity: 0;
    }
    25% {
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    60% {
        fill: #262827;
    }
    70% {
        fill: #fff;
    }
    100% {
        fill: #fff;
    }
}

@keyframes step-4 {
    0% {
        fill: #262827;
        opacity: 0;
    }
    30% {
        opacity: 0;
    }
    35% {
        opacity: 1;
    }
    60% {
        fill: #262827;
    }
    70% {
        fill: #fff;
    }
    100% {
        fill: #fff;
    }
}

@keyframes step-5 {
    0% {
        fill: #262827;
        opacity: 0;
    }
    35% {
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    60% {
        fill: #262827;
    }
    70% {
        fill: #fff;
    }
    100% {
        fill: #fff;
    }
}

@keyframes step-6 {
    0% {
        fill: #262827;
        opacity: 0;
    }
    40% {
        opacity: 0;
    }
    60% {
        opacity: 1;
        fill: #262827;
    }
    70% {
        fill: #fff;
    }
    100% {
        fill: #fff;
    }
}

@keyframes step-7 {
    0% {
        background-color: #F6F4ED;
    }
    60% {
        background-color: #F6F4ED;
    }
    70% {
        background-color:#B3D6DA;
    }
    90% {
        background-color:#B3D6DA;
        opacity: 1;
    }
    100% {
        opacity: 0;
        background-color:#B3D6DA;
    }
}

@media screen and (max-width: 768px) {
    .preloader__logo {
        transform: scale(0.8);
    }
    .preloader__content::before, .preloader__content::after {
        width: 32px;
    }
}

@media screen and (max-width: 576px) {
    .preloader__logo {
        transform: scale(0.4);
    }
    .preloader__content::before, .preloader__content::after {
        width: 15px;
    }
}