@keyframes drawMap{
    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: .7; }
    50%{ fill-opacity: 1; }
    75%{ fill-opacity: .7; }
    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; }

}


.Brand_Text 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 >---*/

 .Logo .tile_1{ animation: logo 5s linear 0s infinite normal; }
 .Logo .tile_2{ animation: logo 5s linear .1s infinite normal; }
 .Logo .tile_3{ animation: logo 5s linear .2s infinite normal; }
 .Logo .tile_4{ animation: logo 5s linear .3s infinite normal; }
 .Logo .tile_5{ animation: logo 5s linear .4s infinite normal; }
 .Logo .tile_6{ animation: logo 5s linear .5s infinite normal; }
 .Logo .tile_7{ animation: logo 5s linear .6s infinite normal; }
 .Logo .tile_8{ animation: logo 5s linear .7s infinite normal; }
 .Logo .tile_9{ animation: logo 5s linear .8s infinite normal; }
 .Logo .tile_10{ animation: logo 5s linear .9s infinite normal; }
 .Logo .tile_11{ animation: logo 5s linear 1s infinite normal; }
 .Logo .tile_12{ animation: logo 5s linear 1.1s infinite normal; }
 .Logo .tile_13{ animation: logo 5s linear 1.2s infinite normal; }
 .Logo .tile_14{ animation: logo 5s linear 1.3s infinite normal; }
 .Logo .tile_15{ animation: logo 5s linear 1.4s infinite normal; }
 .Logo .tile_16{ animation: logo 5s linear 1.5s infinite normal; }
 .Logo .tile_17{ animation: logo 5s linear 1.6s infinite normal; }
 .Logo .tile_18{ animation: logo 5s linear 1.7s infinite normal; }
 .Logo .tile_19{ animation: logo 5s linear 1.8s infinite normal; }
 .Logo .tile_20{ animation: logo 5s linear 1.9s infinite normal; }
 .Logo .tile_21{ animation: logo 5s linear 2s infinite normal; }
 .Logo .tile_22{ animation: logo 5s linear 2.1s infinite normal; }
 .Logo .tile_23{ animation: logo 5s linear 2.2s infinite normal; }
 .Logo .tile_24{ animation: logo 5s linear 2.3s infinite normal; }
 .Logo .tile_25{ animation: logo 5s linear 2.4s infinite normal; }
 .Logo .tile_26{ animation: logo 5s linear 2.5s infinite normal; }
 .Logo .tile_27{ animation: logo 5s linear 2.6s infinite normal; }
 .Logo .tile_28{ animation: logo 5s linear 2.7s infinite normal; }
 .Logo .tile_29{ animation: logo 5s linear 2.8s infinite normal; }
 .Logo .tile_30{ animation: logo 5s linear 2.9s infinite normal; }
 .Logo .tile_31{ animation: logo 5s linear 3s infinite normal; }
 .Logo .tile_32{ animation: logo 5s linear 3.1s infinite normal; }
 .Logo .tile_33{ animation: logo 5s linear 3.2s infinite normal; }
 .Logo .tile_34{ animation: logo 5s linear 3.3s infinite normal; }
 .Logo .tile_35{ animation: logo 5s linear 3.4s infinite normal; }
 .Logo .tile_36{ animation: logo 5s linear 3.5s infinite normal; }
 .Logo .tile_37{ animation: logo 5s linear 3.6s infinite normal; }