section.loading-layer-container {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000000;
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    background-color: rgba(255, 255, 255, 1);
}

section.loading-layer-container .main-loader-content {
    margin-top: 10vw;
    padding: 0;
    width: 30vw;
    height: 15vw;
    background-color: transparent;
    overflow: hidden;
    transform: translateX(-0.5vw);
}

section.loading-layer-container .main-loader-content > div {
    width: 100%;
    height: 50%;
    /*border: 1px solid green;*/
}

section.loading-layer-container .main-loader-content > div:first-child {
    padding: 1vw;
    height: 70%;
}

section.loading-layer-container .main-loader-content > div:last-child {
    height: 30%;
}


section.loading-layer-container .main-loader-content > div:last-child h3 {
    color: var(--dark-font);
    opacity: 0.2;
    animation: animate-main-loader-title 2s linear infinite;
}

@keyframes animate-main-loader-title {
    0%{opacity: 0.2}
    50%{opacity: 1}
    100%{opacity: 0.2}
}

section.loading-layer-container figure.main-loader-logo {
    width: 65%;
    height: 65%;
    position: relative;
}

section.loading-layer-container figure.main-loader-logo svg {
    position: absolute;
    width: 100%;
    transition: all 0.3s linear;
}

section.loading-layer-container figure.main-loader-logo svg path {
    transition: all 0.3s linear;
}

section.loading-layer-container figure.main-loader-logo svg path:nth-child(1),
section.loading-layer-container figure.main-loader-logo svg path:nth-child(2) {
    animation: animate-logo-path1 1.5s linear forwards;
}

section.loading-layer-container figure.main-loader-logo svg path:nth-child(3),
section.loading-layer-container figure.main-loader-logo svg path:nth-child(4),
section.loading-layer-container figure.main-loader-logo svg path:nth-child(5),
section.loading-layer-container figure.main-loader-logo svg path:nth-child(6),
section.loading-layer-container figure.main-loader-logo svg path:nth-child(7),
section.loading-layer-container figure.main-loader-logo svg path:nth-child(8),
section.loading-layer-container figure.main-loader-logo svg path:nth-child(9),
section.loading-layer-container figure.main-loader-logo svg path:nth-child(10),
section.loading-layer-container figure.main-loader-logo svg path:nth-child(11),
section.loading-layer-container figure.main-loader-logo svg path:nth-child(12),
section.loading-layer-container figure.main-loader-logo svg path:nth-child(13),
section.loading-layer-container figure.main-loader-logo svg path:nth-child(14),
section.loading-layer-container figure.main-loader-logo svg path:nth-child(15),
section.loading-layer-container figure.main-loader-logo svg path:nth-child(16) {
    stroke-dasharray: 60vw;
    stroke-dashoffset: 60vw;
    fill: transparent;
    stroke: var(--green);
    stroke-width: 0.15vw;
    animation: animate-logo-path3 2.25s linear forwards;
}

@keyframes animate-logo-path1 {
    0%{opacity: 0}
    100%{opacity: 1}
}

@keyframes animate-logo-path3 {
    0%{stroke-dashoffset: 60vw;}
    20%{stroke-dashoffset: 50vw;}
    40%{stroke-dashoffset: 30vw}
    60%{stroke-dashoffset: 15vw}
    80%{stroke-dashoffset: 5vw; fill: transparent}
    100%{stroke-dashoffset: 0; fill: #023531FF}
}

/*tiny-loader*/
section.loading-layer-container .lds-ellipsis {
    display: inline-block;
    position: relative;
    width: 4.7vw;
    height: 4vw;
}
section.loading-layer-container .lds-ellipsis div {
    position: absolute;
    top: 1.6vw;
    width: 0.7vw;
    height: 0.7vw;
    border-radius: 50%;
    background: var(--green);
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
section.loading-layer-container .lds-ellipsis div:nth-child(1) {
    left: 0.5vw;
    animation: lds-ellipsis1 0.6s infinite;
}
section.loading-layer-container .lds-ellipsis div:nth-child(2) {
    left: 0.5vw;
    animation: lds-ellipsis2 0.6s infinite;
}
section.loading-layer-container .lds-ellipsis div:nth-child(3) {
    left: 2vw;
    animation: lds-ellipsis2 0.6s infinite;
}
section.loading-layer-container .lds-ellipsis div:nth-child(4) {
    left: 3.5vw;
    animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes lds-ellipsis3 {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
    }
}
@keyframes lds-ellipsis2 {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(1.5vw, 0);
    }
}

@media (max-width: 450px) {
    section.loading-layer-container .main-loader-content {
        padding: 0;
        width: 60vw;
        height: 58vw;
        background-color: transparent;
        overflow: hidden;
        transform: translateX(-0.5vw);
    }
    section.loading-layer-container figure.main-loader-logo {
        width: 95%;
        height: 95%;
        position: relative;
    }

    section.loading-layer-container figure.main-loader-logo svg path {
        transition: all 0.4s linear;
    }

    section.loading-layer-container figure.main-loader-logo svg path:nth-child(1),
    section.loading-layer-container figure.main-loader-logo svg path:nth-child(2) {
        animation: animate-logo-path1 1.7s linear forwards;
    }

    section.loading-layer-container figure.main-loader-logo svg path:nth-child(3),
    section.loading-layer-container figure.main-loader-logo svg path:nth-child(4),
    section.loading-layer-container figure.main-loader-logo svg path:nth-child(5),
    section.loading-layer-container figure.main-loader-logo svg path:nth-child(6),
    section.loading-layer-container figure.main-loader-logo svg path:nth-child(7),
    section.loading-layer-container figure.main-loader-logo svg path:nth-child(8),
    section.loading-layer-container figure.main-loader-logo svg path:nth-child(9),
    section.loading-layer-container figure.main-loader-logo svg path:nth-child(10),
    section.loading-layer-container figure.main-loader-logo svg path:nth-child(11),
    section.loading-layer-container figure.main-loader-logo svg path:nth-child(12),
    section.loading-layer-container figure.main-loader-logo svg path:nth-child(13),
    section.loading-layer-container figure.main-loader-logo svg path:nth-child(14),
    section.loading-layer-container figure.main-loader-logo svg path:nth-child(15),
    section.loading-layer-container figure.main-loader-logo svg path:nth-child(16) {
        stroke-dasharray: 60vw;
        stroke-dashoffset: 60vw;
        fill: transparent;
        stroke: var(--green);
        stroke-width: 1.5vw;
        animation: animate-logo-path3 2.45s linear forwards;
    }

    @keyframes animate-logo-path1 {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @keyframes animate-logo-path3 {
        0% {
            stroke-dashoffset: 60vw;
        }
        20% {
            stroke-dashoffset: 50vw;
        }
        40% {
            stroke-dashoffset: 30vw;
        }
        60% {
            stroke-dashoffset: 15vw;
        }
        80% {
            stroke-dashoffset: 5vw;
            fill: transparent;
        }
        100% {
            stroke-dashoffset: 0;
            fill: #023531ff;
        }
    }
}