.map{
    position: relative;
}

/* China */
.blink{
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #fff;
    border-radius: 100px;
    position: absolute;
    top: 45%;
    left: 72%;
}

.dash{
    position: relative;
    transition: 0.3s;
}

.blink .country-name{
    visibility: hidden;
    position: absolute;
    bottom: 77px;
    left: 18px;
    background-color: #fff;
    color: var(--primary_color);
    font-weight: 700;
    font-size: 20px;
    width: 211px;
    text-align: center;
}



.blink:hover .country-name{
    visibility: visible;
}

.blink:hover .dash::after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 4px;
    width: 2px;
    height: 38px;
    background-color: #fff;
}

.blink:hover .dash::before{
    content: '';
    position: absolute;
    bottom: 32px;
    left: 17px;
    width: 2px;
    height: 38px;
    background-color: #fff;
    transform: rotate(45deg);
}

.tooltip{
    background-color: #fff;
    color: #000;
}

.blink::after{
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 100px;
    position: absolute;
    content: "";
    opacity: 0.5;
    top: -5px;
    left: -5px;
    animation: blink 2s infinite;
}

@keyframes blink{
    0%{
        transform: scale(0);
		opacity: 1;
    }

    100%{
        transform: scale(2);
		opacity: 0;
    }
}

/* End China*/

/* Japan */
.blink2{
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #fff;
    border-radius: 100px;
    position: absolute;
    top: 47%;
    left: 87%;
}

.dash2{
    position: relative;
    transition: 0.3s;
}

.blink2 .country-name2{
    visibility: hidden;
    position: absolute;
    bottom: 77px;
    left: 18px;
    background-color: #fff;
    color: var(--primary_color);
    font-weight: 700;
    font-size: 20px;
    width: 211px;
    text-align: center;
}



.blink2:hover .country-name2{
    visibility: visible;
}

.blink2:hover .dash2::after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 4px;
    width: 2px;
    height: 38px;
    background-color: #fff;
}

.blink2:hover .dash2::before{
    content: '';
    position: absolute;
    bottom: 32px;
    left: 17px;
    width: 2px;
    height: 38px;
    background-color: #fff;
    transform: rotate(45deg);
}

.tooltip{
    background-color: #fff;
    color: #000;
}

.blink2::after{
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 100px;
    position: absolute;
    content: "";
    opacity: 0.5;
    top: -5px;
    left: -5px;
    animation: blink 2s infinite;
}

@keyframes blink{
    0%{
        transform: scale(0);
		opacity: 1;
    }

    100%{
        transform: scale(2);
		opacity: 0;
    }
}

/* End Japan*/

/* Europ */

.blink3{
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #fff;
    border-radius: 100px;
    position: absolute;
    top: 34%;
    left: 62%;
}

.dash3{
    position: relative;
    transition: 0.3s;
}

.blink3 .country-name3{
    visibility: hidden;
    position: absolute;
    bottom: 77px;
    left: 18px;
    background-color: #fff;
    color: var(--primary_color);
    font-weight: 700;
    font-size: 20px;
    width: 211px;
    text-align: center;
}



.blink3:hover .country-name3{
    visibility: visible;
}

.blink3:hover .dash3::after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 4px;
    width: 2px;
    height: 38px;
    background-color: #fff;
}

.blink3:hover .dash3::before{
    content: '';
    position: absolute;
    bottom: 32px;
    left: 17px;
    width: 2px;
    height: 38px;
    background-color: #fff;
    transform: rotate(45deg);
}

.tooltip{
    background-color: #fff;
    color: #000;
}

.blink3::after{
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 100px;
    position: absolute;
    content: "";
    opacity: 0.5;
    top: -5px;
    left: -5px;
    animation: blink 2s infinite;
}

@keyframes blink{
    0%{
        transform: scale(0);
		opacity: 1;
    }

    100%{
        transform: scale(2);
		opacity: 0;
    }
}

/* End Europ */

/* Australia */

.blink4{
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #fff;
    border-radius: 100px;
    position: absolute;
    top: 79%;
    left: 87%;
}

.dash4{
    position: relative;
    transition: 0.3s;
}

.blink4 .country-name4{
    visibility: hidden;
    position: absolute;
    bottom: 77px;
    left: 18px;
    background-color: #fff;
    color: var(--primary_color);
    font-weight: 700;
    font-size: 20px;
    width: 211px;
    text-align: center;
}



.blink4:hover .country-name4{
    visibility: visible;
}

.blink4:hover .dash4::after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 4px;
    width: 2px;
    height: 38px;
    background-color: #fff;
}

.blink4:hover .dash4::before{
    content: '';
    position: absolute;
    bottom: 32px;
    left: 17px;
    width: 2px;
    height: 38px;
    background-color: #fff;
    transform: rotate(45deg);
}

.tooltip{
    background-color: #fff;
    color: #000;
}

.blink4::after{
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 100px;
    position: absolute;
    content: "";
    opacity: 0.5;
    top: -5px;
    left: -5px;
    animation: blink 2s infinite;
}

@keyframes blink{
    0%{
        transform: scale(0);
		opacity: 1;
    }

    100%{
        transform: scale(2);
		opacity: 0;
    }
}

/* End Australia */

/* India */

.blink5{
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #fff;
    border-radius: 100px;
    position: absolute;
    top: 59%;
    left: 70%;
}

.dash5{
    position: relative;
    transition: 0.3s;
}

.blink5 .country-name5{
    visibility: hidden;
    position: absolute;
    bottom: 77px;
    left: 18px;
    background-color: #fff;
    color: var(--primary_color);
    font-weight: 700;
    font-size: 20px;
    width: 211px;
    text-align: center;
}



.blink5:hover .country-name5{
    visibility: visible;
}

.blink5:hover .dash5::after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 4px;
    width: 2px;
    height: 38px;
    background-color: #fff;
}

.blink5:hover .dash5::before{
    content: '';
    position: absolute;
    bottom: 32px;
    left: 17px;
    width: 2px;
    height: 38px;
    background-color: #fff;
    transform: rotate(45deg);
}

.tooltip{
    background-color: #fff;
    color: #000;
}

.blink5::after{
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 100px;
    position: absolute;
    content: "";
    opacity: 0.5;
    top: -5px;
    left: -5px;
    animation: blink 2s infinite;
}

@keyframes blink{
    0%{
        transform: scale(0);
		opacity: 1;
    }

    100%{
        transform: scale(2);
		opacity: 0;
    }
}

/* End India */

/* Africa */

.blink6{
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #fff;
    border-radius: 100px;
    position: absolute;
    top: 70%;
    left: 54%;
}

.dash6{
    position: relative;
    transition: 0.3s;
}

.blink6 .country-name6{
    visibility: hidden;
    position: absolute;
    bottom: 77px;
    left: 18px;
    background-color: #fff;
    color: var(--primary_color);
    font-weight: 700;
    font-size: 20px;
    width: 211px;
    text-align: center;
}



.blink6:hover .country-name6{
    visibility: visible;
}

.blink6:hover .dash6::after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 4px;
    width: 2px;
    height: 38px;
    background-color: #fff;
}

.blink6:hover .dash6::before{
    content: '';
    position: absolute;
    bottom: 32px;
    left: 17px;
    width: 2px;
    height: 38px;
    background-color: #fff;
    transform: rotate(45deg);
}

.tooltip{
    background-color: #fff;
    color: #000;
}

.blink6::after{
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 100px;
    position: absolute;
    content: "";
    opacity: 0.5;
    top: -5px;
    left: -5px;
    animation: blink 2s infinite;
}

@keyframes blink{
    0%{
        transform: scale(0);
		opacity: 1;
    }

    100%{
        transform: scale(2);
		opacity: 0;
    }
}


/* End Africa */

/* Latin America */

.blink7{
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #fff;
    border-radius: 100px;
    position: absolute;
    top: 80%;
    left: 31%;
}

.dash7{
    position: relative;
    transition: 0.3s;
}

.blink7 .country-name7{
    visibility: hidden;
    position: absolute;
    bottom: 77px;
    left: 18px;
    background-color: #fff;
    color: var(--primary_color);
    font-weight: 700;
    font-size: 20px;
    width: 211px;
    text-align: center;
}



.blink7:hover .country-name7{
    visibility: visible;
}

.blink7:hover .dash7::after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 4px;
    width: 2px;
    height: 38px;
    background-color: #fff;
}

.blink7:hover .dash7::before{
    content: '';
    position: absolute;
    bottom: 32px;
    left: 17px;
    width: 2px;
    height: 38px;
    background-color: #fff;
    transform: rotate(45deg);
}

.tooltip{
    background-color: #fff;
    color: #000;
}

.blink7::after{
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 100px;
    position: absolute;
    content: "";
    opacity: 0.5;
    top: -5px;
    left: -5px;
    animation: blink 2s infinite;
}

@keyframes blink{
    0%{
        transform: scale(0);
		opacity: 1;
    }

    100%{
        transform: scale(2);
		opacity: 0;
    }
}

/* End Latin America */

/* USA */

.blink8{
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #fff;
    border-radius: 100px;
    position: absolute;
    top: 50%;
    left: 19%;
}

.dash8{
    position: relative;
    transition: 0.3s;
}

.blink8 .country-name8{
    visibility: hidden;
    position: absolute;
    bottom: 77px;
    left: 18px;
    background-color: #fff;
    color: var(--primary_color);
    font-weight: 700;
    font-size: 20px;
    width: 211px;
    text-align: center;
}



.blink8:hover .country-name8{
    visibility: visible;
}

.blink8:hover .dash8::after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 4px;
    width: 2px;
    height: 38px;
    background-color: #fff;
}

.blink8:hover .dash8::before{
    content: '';
    position: absolute;
    bottom: 32px;
    left: 17px;
    width: 2px;
    height: 38px;
    background-color: #fff;
    transform: rotate(45deg);
}

.tooltip{
    background-color: #fff;
    color: #000;
}

.blink8::after{
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 100px;
    position: absolute;
    content: "";
    opacity: 0.5;
    top: -5px;
    left: -5px;
    animation: blink 2s infinite;
}

@keyframes blink{
    0%{
        transform: scale(0);
		opacity: 1;
    }

    100%{
        transform: scale(2);
		opacity: 0;
    }
}

/* End USA */