.control h4 {
    /* width: 365px;*/
    height: 52px;
    font-size: 24px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.08;
    letter-spacing: normal;
    color: #000000;
}

.world {
    position: absolute;
    right: 0px;
    z-index: 0;
    height: 292px;
    width: 90vw;
}

.blue {
    background-color: #e7f5e17f;
    margin-top: 97px;
}

.control {
    height: 293px;
    background-position-x: -100px;
}

.control .control {
    background-position-x: 16px;
    background-position-y: 139px;
}

div.control {
    padding-top: 95px;
}

.control svg circle {
    fill: #54b625;
    stroke: #54b625;
    r: 5;
}

.tracks {
    fill: none;
    stroke: #54b625;
    stroke-width: 2px;
    stroke-linecap: round;
    stroke-dasharray: 5px;
}

.mask {
    fill: none;
    stroke: white;
    stroke-linecap: round;
    stroke-width: 10;
}

#canada-mask {
    stroke-dasharray: 400;
    animation: canada-dash 4s linear infinite;
}

@keyframes canada-dash {
    0% {
        stroke-dashoffset: -400;
    }
    40% {
        stroke-dashoffset: 0;
    }
    90% {
        stroke-dashoffset: 400;
    }
    100% {
        stroke-dashoffset: 400;
    }
}

#chaina-mask {
    stroke-dasharray: 150;
    animation: chaina-dash 5s linear infinite;
}

@keyframes chaina-dash {
    0% {
        stroke-dashoffset: 150;
    }
    20% {
        stroke-dashoffset: 150;
    }
    36% {
        stroke-dashoffset: 0;
    }
    52% {
        stroke-dashoffset: -150;
    }
    100% {
        stroke-dashoffset: -150;
    }
}

#usa-mask {
    stroke-dasharray: 350;
    animation: usa-dash 6s linear infinite;
}

@keyframes usa-dash {
    0% {
        stroke-dashoffset: 350;
    }
    20% {
        stroke-dashoffset: 350;
    }
    42% {
        stroke-dashoffset: 0;
    }
    64% {
        stroke-dashoffset: -350;
    }
    100% {
        stroke-dashoffset: -350;
    }
}

#russia-mask {
    stroke-dasharray: 200;
    animation: russia-dash 4s linear infinite;
}

@keyframes russia-dash {
    0% {
        stroke-dashoffset: 200;
    }
    30% {
        stroke-dashoffset: 200;
    }
    76% {
        stroke-dashoffset: 0;
    }
    95% {
        stroke-dashoffset: -200;
    }
    100% {
        stroke-dashoffset: -200;
    }
}

#europ-mask {
    stroke-dasharray: 100;
    animation: europ-dash 5s linear infinite;
}

@keyframes europ-dash {
    0% {
        stroke-dashoffset: -100;
    }
    70% {
        stroke-dashoffset: -100;
    }
    85% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: 100;
    }
}


/*phone: Extra small - Small*/

@media(max-width: 767px) {
    .blue {
        margin-top: 124px;
    }
    .control {
        height: 241px;
    }
    div.control {
        padding-top: 40px;
    }
    .control h4 {
        font-size: 1.2em;
    }
    .control .control {
        background-position-x: 15px;
        background-position-y: 76px;
    }
    .world {
        height: 241px;
    }
}


/*pad: Medium-Large*/

@media (min-width: 768px) and (max-width: 1139px) {}


/*PC: Extra large*/

@media (min-width: 1140px) {
    .world {
        position: absolute;
        right: 0px;
        z-index: 0;
        height: 292px;
        width: 887px;
    }
}