.image-map img{
    max-width: 100%;
    width: 100%;
    height: auto;
}

.image-map__wrap{
    position: relative;
    display: block;
    width: 100%;
}

.image-map__map-pin {
    position: absolute;
    background: 0 0;
    border: 0;
    padding: 0;
    display: block;
    width: 12.5%;
    height: 9.36%;
    cursor: pointer;
}

.image-map__map-pin.pin-check {
    width: 18.48%;
    height: 11.9%;
}


.image-map__map-pin .info {   
    min-width: 250px;
    max-width: 300px;
    padding:10px;
    background:rgba(255,255,255,1);
    border-radius:5px;
    position:absolute;
    bottom:  100%;
    color: #4a5c69;
    -webkit-box-shadow: 1px 3px 8px 0px rgba(0, 0, 0, 0.07);
    -moz-box-shadow: 1px 3px 8px 0px rgba(0, 0, 0, 0.07);
    box-shadow: 1px 3px 8px 0px rgba(0, 0, 0, 0.07);
    border: 2px solid #9f3944;
    transition: opacity .5s;
    opacity: 0;
    display: none;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    font-size: 1em;
    line-height: 1.2em;
    z-index: 3;
    text-align: left;
}

.image-map__map-pin:hover .info {visibility:visible; opacity: 1; display: block;}

.image-map__map-pin .info a {   
    color: #9f3944;
    text-decoration: none;
}

.image-map__map-pin .info a:hover {   
    text-decoration: underline;
}


.image-map__map-pin span.a11y {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    border: 0;
    cursor: pointer;
}

.image-map__map-pin svg {
  fill: #9f3944;
  width: 100%;
  height: 100%;
  transition: filter .5s;
  filter: drop-shadow(3px 5px 2px transparent);
}

.image-map__map-pin.pin-check svg {
  fill: #02756e;
}

.image-map__map-pin:hover{
     background: none;
}

.image-map__map-pin:hover svg {
  filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));
}