.st0_B {
    stroke-dasharray: 37;
    stroke-dashoffset: 37;
    animation: draw 3s linear forwards;
    animation-delay: 6s;
    animation-direction: alternate;
}

.st1_B {
    stroke-dasharray:53;
    stroke-dashoffset: 53;
    animation: draw 3s linear forwards;
    animation-delay: 3s;
}

.st2_B {
    stroke-dasharray:244;
    stroke-dashoffset: 244;
    animation: draw 6s linear forwards;
}

#Layer_A {
    opacity: 0;
    animation: fadein ease-in 1;
    animation-fill-mode: forwards;
    animation-duration: 3s;
    animation-delay: 5s;
}

#Layer_B {
    opacity: 1;
    animation: fadeout ease-out 1;
    animation-fill-mode: forwards;
    animation-duration: 3s;
    animation-delay: 7s;
}

#Logo {
    animation: roll 7s;
    transform-origin: 50.5% 49.25%;
    animation-delay: 3s;
}

@keyframes roll {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes draw {
    to{
        stroke-dashoffset: 0;
    }
}

@keyframes fadein {
    from {opacity: 0;}
    to {opacity: 1}
}

@keyframes fadeout {
    from {opacity: 1;}
    to {opacity: 0}
}