.page-content {
  padding: 0 1em 1em;
  max-width: 64em;
  margin: auto;
}

code {
  display: block;
  background: #ebebeb;
  font-size: 0.875em;
  padding: 1em 2em;
  overflow-x: scroll;
  white-space: nowrap;
}


/* #### - modal overlay plus contents - #### */
#gallery .overlay {
  position: fixed;
  overflow: hidden;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  z-index: 9999;
  text-align: center;
  color: #fff;
  background: rgba(0,0,0,.75);
}

#gallery .overlay div {
  position: absolute;
  bottom: 1px;
  left: 1px;
  right: 1px;
}


#gallery .overlay div a {
  display: inline;
  color: #fff;
  text-decoration: none;
}

#gallery .overlay img {
  max-width: 120%;
  max-height: 120%;
  position: absolute;
  opacity: 0;
  float: none;
  margin: 0;
  top: 48%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: opacity .5s linear;
  transition: opacity .5s linear;
}

#gallery .overlay:target {
  width: auto;
  height: auto;
  bottom: 0;
  right: 0;
  padding: 0.5em 0 5em;
}

#gallery .overlay:target img {
  opacity: 1;
}

/* #### - gallery controls - #### */
#gallery .close {
  position: absolute;
  z-index: 1001;
  color: #fff;
  background: #222;
  left: 50%;
  margin-left: -0.725em;
  width: 1.25em;
  height: 1.25em;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgb(102,102,102);
  top: 1%;
}

#gallery  a:hover, a:focus {
  text-decoration: none;
}

#gallery .close:hover {
  background: #666;
}

#gallery .prev, #gallery .next {
  color: transparent;
  position: absolute;
  z-index: 1000;
  display: inline-block;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
}

#gallery .prev {
  left: 0;
}

#gallery .next:after, #gallery .prev:after {
  content: "\203A";
  display: block;
  position: relative;
  top: 43%;
  right: 0;
  font-size: 10em;
  color: #222;
  text-align: right;
  opacity: .75;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 4px #fff, 0 0 5px #fff;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

#gallery .prev:after {
  content: "\2039";
  text-align: left;
}

#gallery .next:hover:after, #gallery .prev:hover:after {
  color: #666;
}

@media ( min-width:48.75em ) {
 /* #### - make better use of space at 780px (780/16=48.75 - 16px being default browser font-size) - #### */
  #gallery .overlay div {
    position: relative;
    bottom: auto;
  }
  
  #gallery .overlay img {
    
    position: relative;
    top: auto;
    left: auto;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }

  #gallery .overlay:target {
    padding-top: 2.875em;
  }
  }
  @media(max-width:728px){
#gallery .overlay img {
  max-width: 100%;
  max-height: 100%;
}
}