@keyframes draw{
    0%{ fill-opacity: 0; }
    10%{ fill-opacity: 1; }
    20%{ fill-opacity: .8; }
    30%{ fill-opacity: 1; }
    40%{ fill-opacity: .8; }
    50%{ fill-opacity: 1; }
    60%{ fill-opacity: .7; }
    70%{ fill-opacity: .9; }
    8%{ fill-opacity: .7; }
    90%{ fill-opacity: 1; }
    95%{ fill-opacity: .8;}
    100%{ fill-opacity: 1; }
}

@keyframes logo{
    0%{ fill-opacity: 1; }
    25%{ fill-opacity: .3; }
    50%{ fill-opacity: 1; }
    75%{ fill-opacity: .5; }
    100%{ fill-opacity: 1; }
}

@keyframes drawFill{
    to{
        fill-opacity: 1;
    }
}

@keyframes drawText{
    to{
        stroke-dashoffset: 0;
    }
}
/* 
.BrandContainer.play{

    .Brand .tile_1{ animation: drawMap 10s ease-out 0s 1 normal forwards; }
    .Brand .tile_2{ animation: drawMap 10s ease-out .1s 1 normal forwards; }
    .Brand .tile_3{ animation: drawMap 10s ease-out .2s 1 normal forwards; }
    .Brand .tile_4{ animation: drawMap 10s ease-out .3s 1 normal forwards; }
    .Brand .tile_5{ animation: drawMap 10s ease-out .4s 1 normal forwards; }
    .Brand .tile_6{ animation: drawMap 10s ease-out .5s 1 normal forwards; }

    .Brand .tile_d_6{ animation: drawFill .2s ease-out .6s 1 normal forwards; }

    .Brand .tile_7{ animation: drawMap 10s ease-out .6s 1 normal forwards; }
    .Brand .tile_8{ animation: drawMap 10s ease-out .7s 1 normal forwards; }
    .Brand .tile_9{ animation: drawMap 10s ease-out .8s 1 normal forwards; }
    .Brand .tile_10{ animation: drawMap 10s ease-out .9s 1 normal forwards; }
    .Brand .tile_11{ animation: drawMap 10s ease-out 1s 1 normal forwards; }
    .Brand .tile_12{ animation: drawMap 10s ease-out 1.1s 1 normal forwards; }
    .Brand .tile_13{ animation: drawMap 10s ease-out 1.2s 1 normal forwards; }

    .Brand .tile_d_13{ animation: drawFill .2s ease-out 1.3s 1 normal forwards; }

    .Brand .tile_14{ animation: drawMap 10s ease-out 1.3s 1 normal forwards; }
    .Brand .tile_15{ animation: drawMap 10s ease-out 1.4s 1 normal forwards; }
    .Brand .tile_16{ animation: drawMap 10s ease-out 1.5s 1 normal forwards; }

    .Brand .tile_d_16{ animation: drawFill .2s ease-out 1.6s 1 normal forwards; }

    .Brand .tile_17{ animation: drawMap 10s ease-out 1.6s 1 normal forwards; }
    .Brand .tile_18{ animation: drawMap 10s ease-out 1.7s 1 normal forwards; }
    .Brand .tile_19{ animation: drawMap 10s ease-out 1.8s 1 normal forwards; }
    .Brand .tile_20{ animation: drawMap 10s ease-out 1.9s 1 normal forwards; }
    .Brand .tile_21{ animation: drawMap 10s ease-out 2s 1 normal forwards; }

    .Brand .tile_d_21{ animation: drawFill .2s ease-out 2.1s 1 normal forwards; }

    .Brand .tile_22{ animation: drawMap 10s ease-out 2.1s 1 normal forwards; }
    .Brand .tile_23{ animation: drawMap 10s ease-out 2.2s 1 normal forwards; }
    .Brand .tile_24{ animation: drawMap 10s ease-out 2.3s 1 normal forwards; }
    .Brand .tile_25{ animation: drawMap 10s ease-out 2.4s 1 normal forwards; }
    .Brand .tile_26{ animation: drawMap 10s ease-out 2.5s 1 normal forwards; }
    .Brand .tile_27{ animation: drawMap 10s ease-out 2.6s 1 normal forwards; }
    .Brand .tile_28{ animation: drawMap 10s ease-out 2.7s 1 normal forwards; }
    .Brand .tile_29{ animation: drawMap 10s ease-out 2.8s 1 normal forwards; }
    .Brand .tile_30{ animation: drawMap 10s ease-out 2.9s 1 normal forwards; }
    .Brand .tile_31{ animation: drawMap 10s ease-out 3s 1 normal forwards; }
    .Brand .tile_32{ animation: drawMap 10s ease-out 3.1s 1 normal forwards; }

    .Brand .tile_d_32{ animation: drawFill .2s ease-out 3.2s 1 normal forwards; }

    .Brand .tile_33{ animation: drawMap 10s ease-out 3.2s 1 normal forwards; }

    .Brand .tile_d_33{ animation: drawFill .2s ease-out 3.3s 1 normal forwards; }

    .Brand .tile_34{ animation: drawMap 10s ease-out 3.3s 1 normal forwards; }
    .Brand .tile_35{ animation: drawMap 10s ease-out 3.4s 1 normal forwards; }
    .Brand .tile_36{ animation: drawMap 10s ease-out 3.5s 1 normal forwards; }
    .Brand .tile_37{ animation: drawMap 10s ease-out 3.6s 1 normal forwards; }
    .Brand .tile_Burg{ animation: drawFill 2s ease-in 5s 1 normal forwards; }

} */


#stick path{
    stroke-dashoffset: 1830;
    stroke-dasharray: 1830;
}

.BrandContainer.play .Brand_Text g{
    animation:drawFill 2s ease-in 5s forwards;
}

.BrandContainer.play .Brand_Text path{
    animation:drawText 10s forwards;
}

 /*---------------------------------------------------------------------------------< Logo >---*/

 /* #stick{ animation: logo 5s linear 0s infinite normal; } */
 #sign_1{ animation: logo 5s linear .5s infinite normal; }
 #sign_2{ animation: logo 5s linear .1s infinite normal; }
 #sign_3{ animation: logo 5s linear .7s infinite normal; }