@media screen and (min-width: 768px) {

  #narration {
    width: 60vw;
    height: 100vh;
    max-width: 500px;
    top: 0;
    box-shadow: 4px 0px 4px #00000033;
    /* border-right: 3px orange solid; */
  }

  #map {
    width: calc(100vw - 500px);
    left: 500px;
    height: 100vh;
    border: 0;
    z-index: 0;
  }

  #title {
    width: 60vw;
    max-width: 500px;
    top: 0;
  }

  .leaflet-control-attribution {
    visibility: visible;
  }
  
  /* legend overlay */

  #legend {
    left: 520px;
    top: 20px;
    visibility: visible;
  }

  #legend-image {
    max-width:200px;
  }

  /* this should match the dimensions/positioning of the map */
  #non-map-content {
    width: calc(100vw - 500px);
    left: 500px;
    height: 100vh;
    border: 0;
    z-index: 0;
  }

  /*
  #map-overlay{
    width: calc(100vw - 500px);
    left: 500px;
    height: 100vh;
    border: 0;
    z-index: 9999999;
    background-color: black;
    opacity: 1;
    transition: opacity 0.3s;
  }*/

  /* Tweaks to the lightbox for screen media */
  .lightboxOverlay {
    width: calc(100% - 500px) !important;
    left: 500px !important;
  }
  .lightbox {
    width: calc(100% - 500px - 40px) !important;
    left: 520px !important;
  }
  .lb-outerContainer {
    width: 100% !important;
    background: none !important;
  }
  .lb-image {
    max-width: 100% !important;
    height: inherit !important;
    margin-left: auto;
    margin-right: auto;
  }
  .lb-closeContainer {
    position: fixed;
    top: 0;
    right: 0;
  }
  .lb-close {
    margin: 10px;
  }
  #nav-bar {
    margin-right: 12px;
  }
  
  /*.nav-bar-fixed {
    white-space: normal;
  }*/

  #back-to-top {
    visibility: hidden !important;
}

}