#intro_loading {
    position: fixed;
    z-index: 9999999999999;
    background-color: #000;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    /* animation: logo_bg_fade_zoom_out .7s ease forwards 3.7s; */
    overflow: hidden;
}

#logo_svg {
    max-width: 500px;
    z-index: 1;
    /* animation: logo_fade_zoom_out .7s ease forwards 3.7s; */
}

#logo_svg > path {
    stroke: #fff;
    stroke-width: 1px;
    fill: transparent;
}

#logo_svg > path:nth-child(1) {
    stroke-dasharray: 1450.579345703125px;
    stroke-dashoffset: 1450.579345703125px;
    animation: logo_intro 1.5s ease-in-out forwards, logo_fill 0.5s ease-in forwards .7s;
}

#logo_svg > path:nth-child(2) {
    stroke-dasharray: 1065.846923828125px;
    stroke-dashoffset: 1065.846923828125px;
    animation: logo_intro 1.5s ease-in-out forwards .3s, logo_fill 0.8s ease-in forwards 1s;
}

#logo_svg > path:nth-child(3) {
    stroke-dasharray: 891.1275634765625px;
    stroke-dashoffset: 891.1275634765625px;
    animation: logo_intro 1.5s ease-in-out forwards .6s, logo_fill 0.8s ease-in forwards 1.3s;
}

#logo_svg > path:nth-child(4) {
    stroke-dasharray: 495.7514343261719px;
    stroke-dashoffset: 495.7514343261719px;
    animation: logo_intro 1.5s ease-in-out forwards .9s, logo_fill 0.8s ease-in forwards 1.6s;
}

#logo_svg > path:nth-child(5) {
    stroke: #ff5722;
    stroke-dasharray: 154.6368408203125px;
    stroke-dashoffset: 154.6368408203125px;
    animation: logo_intro 1.5s ease-in-out forwards 1.2s, logo_fill_2 0.8s ease-in forwards 1.9s;
}

#intro_loading:after {
    position: absolute;
    left: 0;
    top: -50%;
    content: "";
    width: 100%;
    height: 50%;
    background-color: #000;
    animation: logo_back_up .5s linear forwards 3.3s;
    z-index: 2;
}

#intro_loading:before {
    position: absolute;
    right: 0;
    bottom: -50%;
    content: "";
    width: 100%;
    height: 50%;
    background-color: #000;
    animation: logo_back_bottom .5s linear forwards 3.3s;
    z-index: 2;
}

@keyframes logo_intro {
    to {
        stroke-dashoffset: 0%;
    }

}

@keyframes logo_fill {
    to {
        fill: white;
    }
}

@keyframes logo_fill_2 {
    to {
        fill: #ff5722;
    }
}

@keyframes logo_back_up {
    to{
        top: 0;
    }
}

@keyframes logo_back_bottom {
    to{
        bottom: 0;
    }
}

@keyframes logo_fade_zoom_out{
    to{
        transform: scale(0);
    }
}

@keyframes logo_bg_fade_zoom_out{
    to{
        border-radius: 100%;
        transform: scale(0);
    }
}

@media screen and (max-width:767px) {
    #intro_loading {
        padding: 0 30px;
    }
}