.map-container {
    position: relative;
    max-width: 100%;
    margin: auto;
}

.map-image {
    width: 100%;
    height: auto;
    display: block;
}

.hotspot.item-point {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #b89535;
    border-radius: 50%;
    border: 2px solid #b89535;
    cursor: pointer;
    transform: translate(-50%, -50%);
}

.scalize .item-point.pulse2:after, .scalize .item-point.pulse2:before {
    margin: -3px 0 0 -10px !important;
}

.hotspot {
    position: absolute;
    width: 115px;
    /*height: 62px;*/
    background-color: #fffffff7;
    border-radius: 9%;
    border: 2px solid #a7a7a7;
    cursor: pointer;
    transform: translate(-50%, -50%);
    text-align: center;
}

.hotspot.smallImg{
    width: 70px;
}

    .hotspot.imgSpot:hover::after {
        content: attr(data-title);
        position: absolute;
        top: -30px;
        left: 50%;
        transform: translateX(-50%);
        white-space: nowrap;
        background: black;
        color: white;
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 12px;
    }

.scalize .item-point:after, .scalize .item-point:before {
   /* width: 40px !important;
    height: 40px !important;
    border: 2px solid #ffffff !important;*/
}

.hotspot.imgSpot img {
    padding: 5px 15px;
    margin: auto;
}


.hotspot.smallImg img {
    padding: 3px 3px;
}

/* Slide-in side panel */
.side-panel {
    position: fixed;
    top: 0;
    left: -320px;
    width: 300px;
    height: 100vh;
    background: #fff;
    box-shadow: 2px 0 10px rgba(0,0,0,0.2);
    padding: 20px;
    box-sizing: border-box;
    transition: left 0.3s ease;
    z-index: 1000;
}

    .side-panel.active {
        left: 0;
    }

    .side-panel .close-btn {
        position: absolute;
        top: 10px;
        right: 15px;
        background: none;
        border: none;
        font-size: 24px;
        cursor: pointer;
    }