#Jakarta, #Perth, #Sydney, #Tokyo, #Guangzhou, #Heiderabad, #Dubai, #Turki, #Djibouti, #Africa, #Sudan, #Aljazair, #Argentina, #Brazil, #Colombia, #America, #Canada, #DotJak, #DotTok, #DotDub, #DotDji, #DotHai, #DotGua, #DotSud, #DotAlj, #DotAfr, #DotTur, #DotSyd, #DotPer, #DotCan, #DotAme, #DotBra, #DotCol, #DotArg{
    opacity:0;
}

#lineTokyo{
    stroke-dasharray: 104;
    stroke-dashoffset: -104;
}
#lineGuangzhou{
    stroke-dasharray: 180;
    stroke-dashoffset: -180;
}
#lineSydney{
    stroke-dasharray: 357;
    stroke-dashoffset: -357;
}
#linePerth{
    stroke-dasharray: 140;
    stroke-dashoffset: -140;
}
#lineHeiderabad{
    stroke-dasharray: 221;
    stroke-dashoffset: -221;
}
#lineDubai{
    stroke-dasharray: 361;
    stroke-dashoffset: -361;
}
#lineDjibouti{
    stroke-dasharray: 368;
    stroke-dashoffset: -368;
}
#lineAfrica{
    stroke-dasharray: 405;
    stroke-dashoffset: -405;
}
#lineTurki{
    stroke-dasharray: 610;
    stroke-dashoffset: -610;
}
#lineSudan{
    stroke-dasharray: 619;
    stroke-dashoffset: -619;
}
#lineAljazair{
    stroke-dasharray: 754;
    stroke-dashoffset: -754;
}
#lineBrazil{
    stroke-dasharray: 1033;
    stroke-dashoffset: -1033;
}
#lineColombia{
    stroke-dasharray: 1133;
    stroke-dashoffset: -1133;
}
#lineArgentina{
    stroke-dasharray: 1103;
    stroke-dashoffset: -1103;
}
#lineAmerica{
    stroke-dasharray: 1234;
    stroke-dashoffset: -1234;
}
#lineCanada{
    stroke-dasharray: 1211;
    stroke-dashoffset: -1211;
}

.play #DotJak, .play #DotTok, .play #DotDub, .play #DotDji, .play #DotHai, .play #DotGua, .play #DotSud, .play #DotAlj, .play #DotAfr, .play #DotTur, .play #DotSyd, .play #DotPer, .play #DotCan, .play #DotAme, .play #DotBra, .play #DotCol, .play #DotArg{
    animation: dots 0.5s forwards;
    animation-timing-function: ease-in-out;
}

.play #Jakarta, .play #Perth, .play #Sydney, .play #Tokyo, .play #Guangzhou, .play #Heiderabad, .play #Dubai, .play #Turki, .play #Djibouti, .play #Africa, .play #Sudan, .play #Aljazair, .play #Argentina, .play #Brazil, .play #Colombia, .play #America, .play #Canada{
    animation: grow 0.5s ease-in-out 0.2s forwards;
}

.play #Jakarta{transform-origin: 76% 52%;animation-delay: 0.5s;}
.play #Perth{transform-origin: 81% 62%;animation-delay: 5s;}
.play #Sydney{transform-origin: 95% 65%;animation-delay: 6.5s;}
.play #Tokyo{transform-origin: 75% 37%;animation-delay: 4.5s;}
.play #Guangzhou{transform-origin: 68% 38%;animation-delay: 5s;}
.play #Heiderabad{transform-origin: 62% 45%;animation-delay: 5.5s;}
.play #Dubai{transform-origin: 53% 43%;animation-delay: 6.5s;}
.play #Turki{transform-origin: 45% 37%;animation-delay: 8.5s;}
.play #Djibouti{transform-origin: 50% 46%;animation-delay: 6.5s;}
.play #Africa{transform-origin: 46% 55%;animation-delay: 7.5s;}
.play #Sudan{transform-origin: 46% 42%;animation-delay: 8.5s;}
.play #Aljazair{transform-origin: 38% 41%;animation-delay: 9.5s;}
.play #Argentina{transform-origin: 9% 66%;animation-delay: 12.5s;}
.play #Brazil{transform-origin: 19% 54%;animation-delay: 11.5s;}
.play #Colombia{transform-origin: 11% 52%;animation-delay: 12.5s;}
.play #America{transform-origin: 7% 38%;animation-delay: 13.5s;}
.play #Canada{transform-origin: 11% 30%;animation-delay: 13.5s;}

.play #lineTokyo{
    animation: lines 3s linear forwards;
    animation-delay: 1s;
}
.play #lineGuangzhou{
    animation: lines 3.5s linear forwards;
    animation-delay: 1s;
}
.play #lineSydney{
    animation: lines 5s linear forwards;
    animation-delay: 1s;
}
.play #linePerth{
    animation: lines 3.5s linear forwards;
    animation-delay: 1s;
}
.play #lineHeiderabad{
    animation: lines 4s linear forwards;
    animation-delay: 1s;
}
.play #lineDubai{
    animation: lines 5s linear forwards;
    animation-delay: 1s;
}
.play #lineDjibouti{
    animation: lines 5s linear forwards;
    animation-delay: 1s;
}
.play #lineAfrica{
    animation: lines 6s linear forwards;
    animation-delay: 1s;
}
.play #lineTurki{
    animation: lines 7s linear forwards;
    animation-delay: 1s;
}
.play #lineSudan{
    animation: lines 7s linear forwards;
    animation-delay: 1s;
}
.play #lineAljazair{
    animation: lines 8s linear forwards;
    animation-delay: 1s;
}
.play #lineBrazil{
    animation: lines 10s linear forwards;
    animation-delay: 1s;
}
.play #lineColombia{
    animation: lines 11s linear forwards;
    animation-delay: 1s;
}
.play #lineArgentina{
    animation: lines 11s linear forwards;
    animation-delay: 1s;
}
.play #lineAmerica{
    animation: lines 12s linear forwards;
    animation-delay: 1s;
}
.play #lineCanada{
    animation: lines 12s linear forwards;
    animation-delay: 1s;
}

.play #DotDub{animation-delay: 6s;}
.play #DotDji{animation-delay: 6s;}
.play #DotHai{animation-delay: 5s;}
.play #DotTok{animation-delay: 4s;}
.play #DotGua{animation-delay: 4.5s;}
.play #DotSud{animation-delay: 8s;}
.play #DotAlj{animation-delay: 9s;}
.play #DotAfr{animation-delay: 7s;}
.play #DotTur{animation-delay: 8s;}
.play #DotSyd{animation-delay: 6s;}
.play #DotPer{animation-delay: 4.5s;}
.play #DotCan{animation-delay: 13s;}
.play #DotAme{animation-delay: 13s;}
.play #DotBra{animation-delay: 11s;}
.play #DotCol{animation-delay: 12s;}
.play #DotArg{animation-delay: 12s;}


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

@keyframes dots {
    from{
        transform:translateY(2%) ;
    }

    to{
        transform: translateY(0%);
        opacity: 100;
    }
}

@keyframes grow {
    from {
        transform: scale(0);
        opacity:1;
    }
    to {
        transform: scale(1);
        opacity:1;
    }
}