/*****************************************************
MAP PAGE
*****************************************************/


html {
    height: 100%;
}
body {
    margin: 0;
    height: 100%;
}

#mapid {
    width: 100%;
    height: 600px;
}

#slider {
  margin:1em 1em;
}

.color-box {
    width: 10px;
    height: 10px;
    display: inline-block;
    background-color: #ccc;
    margin-right:5px;
}

.leaflet-popup, .leaflet-popup-content-wrapper {
  min-width:40rem;
  min-height:120px;
  clear:both;
  float:left;
}

.popup-card {
    display: flex;
    align-items: flex-start;
}


.popup-card {
  font-size: 1.4em; /* Increase as needed */
}

.popup-card h3 {
  font-size: 1.5em;
}

.popup-card p,
.popup-card a {
  font-size: 1.1em;
}



.popup-img {
    width: 200px;
    height: auto;
    border-radius: 0.75rem;
    margin-right: 1em;
    flex-shrink: 0;
}

.popup-text {
    flex: 1;
}

.popup-card h3{
  font-family:'Oswald';
  font-size:1.8rem;
  margin:0;
  padding:0;
}

.popup h4{
  font-family:'Oswald';
  margin:1rem 0 0 0;
  padding:0;
}

.map-popup p {
  padding:0;
  margin:1rem 0 1rem 0;
  line-height:1.4rem;
}

.leaflet-popup-content p {
    margin-top: 1em;
}

.map-popup a:hover {
  text-decoration:none;
}

.leaflet-popup-content a:hover{
  text-decoration:none;
}


.leaflet-overlay-pane path {
    transition: fill-opacity 0.2s linear;
}
#map.hl-hint .leaflet-overlay-pane path {
    fill-opacity: 0.5;
}

.leaflet-control-layers-list {
    margin: -6px -10px -6px -6px;
    border-radius: 5px;
    overflow: hidden;
}
.leaflet-control-layers-selector {
    display: none;
}
.leaflet-control-layers label span {
    padding: 6px 20px;
    display: block;
    border-bottom: 1px solid #ccc;
    background: #fff;
}
    .leaflet-control-layers label:last-child span {
        border-bottom: none;
    }
.leaflet-control-layers label :checked + span,
.leaflet-control-layers label span:active {
    font-weight: bold;
    background: #f4f4f4;
    box-shadow: inset 0 0 8px #ccc;
}
.leaflet-control-layers label span:hover {
    background: #f4f4f4;
    cursor: pointer;
}

.leaflet-bar a {
    font-variant: small-caps;
    text-transform: lowercase;
}

.leaflet-bar a:active {
    box-shadow: inset 0 0 8px #ccc;
}
    .leaflet-bar a.leaflet-disabled {
        box-shadow: none;
    }


.image-slider {
    position: relative;
    margin: 0 0 25px;
    padding: 0;
    background: #ccc;
    overflow: hidden;
}
.bx-wrapper .image-slider {
    margin-bottom: 0;
}
.image-slider li {
    display: none;
}
.bx-wrapper .image-slider li,
.image-slider li:first-child {
    display: block;
}
.image-slider li img {
    display: block;
    max-width: 400px !important;
    margin: 0 auto;
}
.bx-pager {
    text-align: center;
    line-height: 0;
    margin-bottom: 5px;
}
.bx-pager-item {
    display: inline-block;
    margin: 5px 2px;
}
.bx-pager-link {
    border-radius: 10px;
    background: #ddd;
    font-size: 0;
    display: block;
    padding: 5px;
    height: 0;
    width: 5px;
}
.bx-pager-link.active, .bx-pager-link:hover {
    background: #555;
}

#menu {
background: #fff;
position: absolute;
z-index: 1;
top: 10px;
right: 10px;
border-radius: 3px;
width: 120px;
border: 1px solid rgba(0,0,0,0.4);
font-family: 'Open Sans', sans-serif;
}

#menu a {
font-size: 13px;
color: #404040;
display: block;
margin: 0;
padding: 0;
padding: 10px;
text-decoration: none;
border-bottom: 1px solid rgba(0,0,0,0.25);
text-align: center;
}

#menu a:last-child {
border: none;
}

#menu a:hover {
background-color: #f8f8f8;
color: #404040;
}

#menu a.active {
background-color: #3887be;
color: #ffffff;
}

#menu a.active:hover {
background: #3074a4;
}