#sidebar {
    width: 30%;
    padding: 0px;
    overflow-y: auto;
}

#map {
    flex: 1;
    height: 100%;
}

.leaflet-bottom.leaflet-right {
    display: none;
}

.location {
    margin-bottom: 20px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}

.location h3 {
    margin: 0 0 5px;
}

.location p {
    margin: 10px 0;

}

.leaflet-container a,
.leaflet-container a:visited {
    font-weight: bold;
    color: var(--link) !important
}

.buttons {
    margin-top: 40px;
    margin-bottom: 20px;
}

.buttons button,
.buttons a {
    display: inline-block;
    margin-right: 5px;
    padding: 15px 20px;
    background: #000;
    color: #fff;
    border: none;
    border-radius: 0px;
    text-decoration: none;
    font-size: 12px;
    cursor: pointer;
    font-weight: 600;
    font-family: var(--font);
}

.buttons button:hover,
.buttons a:hover {
    background: var(--link);
}

#map-body {
    display: flex;
    height: 600px;

}

#dynamicIframe {
    border: none;
    width: 100%;
    height: 600px
}

@media screen and (max-width: 835px) {


    #map-body,
    #sidebar,
    #locations-list,
    #dynamicIframe {
        height: fit-content !important;
        overflow: hidden;
    }

    /* Make the map take full width */
    div#sidebar {
        width: 100vw;
        /* Full viewport width */
        height: 100%;
        /* Full viewport height */
    }

    /* Hide the sidebar */
    div#map,
    .buttons button {
        display: none;
        /* Completely hide the sidebar */
    }



}