.map-cnr {
  position: relative; }
.map-cnr .map {
  width: 100%;
  height: 100vh;
  position: relative;
  z-index: 1; }
.map-cnr .locations > .location {
  display: none; }
.map-cnr > .overlay-content {
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  overflow: auto; z-index: 1; }

.map-cnr .gm-style {
  font-size: 1em;
  font-family: 'IBM Plex Sans', sans-serif; }
.map-cnr .location .title {
  font-size: 1.5em; margin: 0; font-weight: 500; }
.map-cnr .location .address {
  font-size: 1em; }
.map-cnr .location .hours {
  font-size: 0.8em; display: flex; flex-flow: column; width: 90%;
  max-width: 14em; margin: 1.5em 0; line-height: 2em; }
.map-cnr .location .hours .range {
  display: flex; justify-content: space-between; }
.map-cnr .location .escape {
  cursor: pointer;
  position: absolute;
  top: 1em; right: 1em;
  width: 1em; height: 1em; }
.map-cnr .location .gallery {
  display: grid; width: 100%;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 1em; }
.map-cnr .location .gallery .item {
  position: relative; width: 100%; cursor: pointer; }
.map-cnr .location .gallery .item img {
  display: block; width: 100%; height: auto; }
.map-cnr .location .gallery .item:nth-of-type(4):after {
  content: attr(data-more);
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  color: white; font-weight: bold;
  display: flex; align-items: center; justify-content: center;
}
.map-cnr .location .gallery .item.hide {
  display: none;
}

/* The popup bubble styling. */
.popup-bubble {
/* Position the bubble centred-above its parent. */
position: absolute;
top: 0;
left: 0;
transform: translate(-50%, -75%);
 /* Style the bubble. */
 background-color: white;
 padding: 1em;
 overflow-y: auto;
 /* width: 90vw; */
 width: 25em;
 height: 21.3em;
 box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.15);
}
.popup-bubble-anchor {
  width: 20em;
}
/* JavaScript will position this div at the bottom of the popup tip. */
.popup-container {
 cursor: auto;
 height: 0;
 position: absolute;
 width: 20em;
}

@media screen and (min-width: 37.5em) {
  .popup-bubble {
    width: 25em;
    transform: translate(0, -75%);
  }
}

@media screen and (min-width: 48em) {
  .popup-bubble {
    transform: translate(4em, -75%);
  }
}