.mappa {
    width: 100%;
    height: 100vh;
    position: relative;
}
#info {
    position: absolute;
    margin: 0px auto;
    width: 50%;
    padding: 10px;
    border: none;
    border-radius: 3px;
    font-size: 12px;
    text-align: center;
    color: #222;
    background: #fff;
    z-index: 3;
    left: 50%;
    transform: translateX(-50%);
    }

.mappa .marker:hover {
    cursor: pointer;
}
.img_popup {
    max-width: 100%;
    height: 200px;
    margin-bottom: 25px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.mapboxgl-popup-content  {
    padding: 25px 15px;
}
.mapboxgl-popup-close-button {
    font-size: 24px;
    top: 3px;
}
.mapboxgl-popup-close-button:focus-visible {
    border: none;
    outline: none;
}
.mapboxgl-popup {
    max-width: 300px !important;
}

.marker {
    width: 30px;
    height: 52px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}


.POI_PARKS {
    background-image: url("../img/park_poi.png");
}
.POI_CHURCH {
    background-image: url("../img/church_poi.png");
}
.POI_MUSEUMS {
    background-image: url("../img/museum_poi.png");
}
.POI_CASTEL {
    background-image: url("../img/castle_poi.png");
}
.POI_INFO {
    background-image: url("../img/info_point_poi.png");
}            
.POI_ARCHE {
    background-image: url("../img/archeologial_area_poi.png");
}
.POI_BIKE {
    background-image: url("../img/bike_assistance_poi.png");
}
.POI_LIB {
    background-image: url("../img/library_poi.png");
}
.POI_BEB {
    background-image: url("../img/beb_poi.png");
}
.POI-CONV {
    background-image: url("../img/church_poi.png");
}
.POI_HOTELS {
    background-image: url("../img/hotel_poi.png");
}
.POI_PINA {
    background-image: url("../img/pinacoteca_poi.png");
}
.POI_REST {
    background-image: url("../img/resturant_poi.png");
}
.POI_TUR {
    background-image: url("../img/poi_tur.png");
}