.bg{
    position: relative;
    width: 100%;
}

.bg img{
    width: 100%;
} 

.city{
    position: absolute;
    top: 0;
    left: 0;

    border-radius: 50%;
    background-color: #fff;
    width: 1.2%;
    height: 2.2%;
    border: none;
    cursor: pointer;
    border: 1px solid #666;
}
 
.text-block{
    cursor:auto;
}

.text-block,
.hover-text{
  
    position: relative;
    background-color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    display: none;
    border-radius: 10px;
    border: 1px solid #666;
}
 

.active{
    border:none;
}

.hover-text{
    display: none;
    padding: 10px 20px;
    z-index:1000;
    top: -5px;
    left: -5px;
}

.text-block{
    z-index: 100000;
    top: -5px;
    left: -5px;
}

.text-block p {
    order: 1;
}

.text-block a{
    order: 0;
}
 

.active .text-block{
    display:inline-flex;
    flex-wrap:wrap;
    justify-content: flex-start;
    /* width: 400px; */
    white-space: nowrap;
}

.text-block hr{
    margin:5px 0;
    border: 1px solid #666;
    width: 100%;
}
.city:hover .text-block{
    display: inline-flex;
    white-space: nowrap;
    flex-wrap: wrap;
}

.text-block p{
    margin: 10px 0;
}

.city .map_link{
    text-align: center;
    width: 100%;
}

.active .hover-text{
    display: none !important;
}
 
.map-mob{
    display: none;
}

.link-desc{
    color: #0a22cb;
    text-decoration: underline;
    position: absolute;
    left: 10px;
    bottom: 10px;
    font-size: 20px;
    font-weight: 900;
}

#habar .text-block{
    width:220px;
    white-space: inherit;
}

@media(max-width:1000px){
    .map-mob{
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 100;
    }
    
    .city{
        border:0;
    }
    
    .link-desc{
        font-size: 16px;
    }
}

@media(max-width:480px){
    .link-desc{
        font-size: 8px;
    }
}
.map_desc{
    max-width: 650px;
    position: absolute;
    top: 60px;
    color: #5e5e5e;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    z-index: 5;
    top: 10px;
    left: 10px;
}

#prod-select{
    width: 100%;
    border-color:#ccc;
    padding: 6px 12px;
}

@media(max-width:990px){
    .map_desc{
        font-size: 14px;
    }
}

@media(max-width:700px){
    .map_desc{
        font-size: 12px;
    }
}