section.loading {
    height: 100vh;
    position: fixed;
    z-index: 15;
    top: 0;
    left: 0;
    width: 100%;
    transition: 0.4s;
    background: linear-gradient(161deg, #e8f3fc 0.31%, #eef7ff 28.03%);
    /* Centralizar o svg */
    display: flex;
    align-items: center;
    justify-content: center;
}
/* A classe 'open' se colocada na section com a classe 'loading' faz com que a tela de loading desapareça */
section.loading.open {
    transform: scale(4);
    opacity: 0;
    visibility: hidden;
}
section.loading svg {
    width: 230px;
}
section.loading svg {
    stroke-width: 2px;
}
section.loading svg path {
    stroke-linejoin: round;
}
section.loading svg #perna-laranja {
    fill: transparent;
    stroke: #e8621f;
    stroke-dasharray: 717;
    stroke-dashoffset: 717;
    animation: draw 3s infinite alternate,
    opacity-laranja 3s 3s infinite alternate;
}

section.loading svg #perna-verde {
    fill: transparent;
    stroke: #44939e;
    stroke-dasharray: 715;
    stroke-dashoffset: 715;
    animation: draw 3s infinite alternate, opacity-verde 3s 3s infinite alternate;
}

section.loading svg #center {
    fill: transparent;
    stroke: #ed1e79;
    stroke-dasharray: 1050;
    stroke-dashoffset: 1050;
    animation: draw 3s infinite alternate, opacity-center 3s 3s infinite alternate;
}

@keyframes draw {
    50% {
        stroke-dashoffset: 0;
    }
}

@keyframes opacity-center {
    100% {
        fill: #ed1e79;
        stroke-opacity: 0;
    }
}
@keyframes opacity-verde {
    100% {
        fill: #44939e;
        stroke-opacity: 0;
    }
}

@keyframes opacity-laranja {
    100% {
        fill: #e8621f;
        stroke-opacity: 0.2;
    }
}