/* A better looking default horizontal rule */
  hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
  }

  /* Allow only vertical resizing of textareas. */
  textarea {
    resize: vertical;
  }

  /*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

  audio,
  canvas,
  iframe,
  img,
  svg,
  video {
    vertical-align: middle;
  }

  /* ==========================================================================
   Author's custom styles
   ========================================================================== */

  html {
    box-sizing: border-box;
  }

  *,
  *:before,
  *:after {
    box-sizing: inherit;
  }

  img {
    width: 100%;
    height: auto;
  }

  figure {
    margin: 0;
  }

  /* ==========================================================================
   BEGIN TYPOGRAPHY
   ========================================================================== */
  html {
    font-family: 'Open Sans', "HelveticaNeue", "Helvetica", "Arial", sans-serif !important;
    line-height: 1.5;
    /* unitless values: multiplied by the element's font size */
    font-size: 100%;
    /* base font size 16px with 1.5 line-height */
    color: #212121;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: none;
  }

  @media only screen and (max-width: 480px) {
    html {
      font-size: 0.875em;
      /* base font size 14px */
    }
  }

  @media only screen and (min-width: 576px) {
    html {
      font-size: 1em;
      /* base font size 16px */
    }
  }

  @media only screen and (min-width: 768px) {
    html {
      font-size: 1.125em;
      /* base font size 18px */
    }
  }

  @media only screen and (min-width: 992px) {
    html {
      font-size: 1.1875em;
      /* base font size 19px */
    }
  }

  @media only screen and (min-width: 1200px) {
    html {
      font-size: 1.3125em;
      /* base font size 21px */
    }
  }


  /* Modular Scale with 1em base and 1.25 ratio as starting point then adjusted to make photoshop friendly numbers */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: 'Fjalla One', "HelveticaNeue", "Helvetica", "Arial", sans-serif !important;
    font-weight: 400;
    color: #2f2f2f;
  }

  h1 {
    font-size: 3.0625em;
    /* font size 49px = 3.0625em x 16px */
    line-height: 1.4;
    margin-bottom: 0;
  }

  @media only screen and (min-width:320px) and (max-width: 479px) {
    h1 {
      line-height: 1.35;
      font-size: 2.5em;
      /* font size 35px = 2.5em x 14px */
    }
  }

  @media only screen and (min-width: 480px) and (max-width: 575px) {
    h1 {
      line-height: 1.35;
    }
  }

  h2 {
    font-size: 2.4375em;
    /* font size 39px = 2.4375em x 16px */
    line-height: 1.4;
    margin-bottom: 0;
  }

  @media only screen and (min-width:320px) and (max-width: 479px) {
    h2 {
      line-height: 1.37;
      font-size: 2em;
      /* font size 28px = 2em x 14px */
    }
  }

  @media only screen and (min-width: 480px) and (max-width: 575px) {
    h2 {
      line-height: 1.37;
    }
  }


  h3 {
    font-size: 1.9375em;
    /* font size 31px = 1.9375em x 16px */
    line-height: 1.3;
    margin-bottom: 0;
  }

  @media only screen and (min-width:320px) and (max-width: 479px) {
    h3 {
      line-height: 1.43;
      font-size: 1.75em;
      /* font size 24.5px = 1.75em x 14px */
    }
  }

  @media only screen and (min-width: 480px) and (max-width: 575px) {
    h3 {
      line-height: 1.43;
    }
  }


  h4 {
    font-size: 1.5625em;
    /* font size 25px = 1.5625em x 16px */
    line-height: 1.35;
    margin-bottom: 0;
  }

  @media only screen and (min-width:320px) and (max-width: 479px) {
    h4 {
      line-height: 1.45;
      font-size: 1.5em;
      /* font size 21px = 1.5em x 14px */
    }
  }

  @media only screen and (min-width: 480px) and (max-width: 575px) {
    h4 {
      line-height: 1.45;
    }
  }

  h5 {
    font-size: 1.25em;
    /* font size 20px = 1.25em x 16px */
    line-height: 1.4;
    margin-bottom: 0;
  }

  @media only screen and (min-width:320px) and (max-width: 479px) {
    h5 {
      line-height: 1.55;
      font-size: 1.25em;
      /* font size 17.5px = 1.25em x 14px */
    }
  }

  @media only screen and (min-width: 480px) and (max-width: 575px) {
    h5 {
      line-height: 1.5;
    }
  }

  p {
    font-family: 'Open Sans', "HelveticaNeue", "Helvetica", "Arial", sans-serif !important;
    line-height: 1.7;
    font-weight: 400;
    font-size: 1em;
    /* base font size 16px */
    color: #212121;
  }

  a {
    color: #FF851B;
    text-decoration: none;
  }

  a:hover {
    text-decoration: underline;
    cursor: pointer;
  }

  a:active {
    color: black;
  }

  a:visited {
    color: purple;
  }

  ul,
  ol,
  dl {
    font-size: 1em;
    /* font size 16px */
    line-height: 1.6;
    margin-bottom: 1.25em;
    padding-left: 1.4em;
    font-family: inherit;
  }

  ul li ol {
    margin-bottom: inherit;
  }

  ul.square li ul,
  ul.circle li ul,
  ul.disc li ul {
    list-style: inherit;
  }

  ul.square {
    list-style-type: square;
  }

  ul.circle {
    list-style-type: circle;
  }

  ul.disc {
    list-style-type: disc;
  }

  ul.no-bullet {
    list-style: none;
  }



  /* MEDIA QUERIES *
-----------------------------------------------*/

  @media only screen and (min-width:320px) and (max-width: 479px) {
    .wrapper {
      margin: 0;
    }  
  }

  @media only screen and (min-width: 480px) and (max-width: 575px) {
    .wrapper {
      margin: 0;
    }
  
  }

  @media only screen and (min-width: 576px) and (max-width: 767px) {
    .wrapper {
      margin: 0 .3em;
    }
  }

  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .wrapper {
      margin: 0 1em;
    }
  }

  @media only screen and (min-width: 992px) and (max-width: 1920px) {
    .wrapper {
      margin: 0 2em;
    }
  }
  @media only screen and (min-width: 1921px) {
    .wrapper {
      margin: 0 4em;
    }
  }


  /* ==========================================================================
   BEGIN NAVIGATION
   ========================================================================== */
  .navbar,
  .bottom-navbar {
    font-size: 18px;
    padding-bottom: 10px;
  }

  .nav-link,
  .bottom-nav-link,
  .logo {
    text-decoration: none;
    color: #333;
  }

  .main-nav li,
  .bottom-nav li {
    text-align: center;
    margin: 15px auto;
  }

  .logo {
    display: inline-block;
    font-size: 22px;
    margin-top: 10px;
    margin-left: 10px;
    flex-shrink: 0;
    /* new */
  }

  .navbar-toggle {
    position: absolute;
    right: 30px;
    vertical-align: middle;
    cursor: pointer;
    font-size: 36px;
  }

  .navbar-toggle-text {
    font-size: 18px;
  }

  .main-nav {
    display: none;
  }

  .active-nav {
    display: block;
    color: red;
  }

  .nav-link a:link,
  .bottom-nav-link a:link {
    color: #333;
  }

  .logo:hover,
  .nav-link:hover,
  .bottom-nav-link:hover {
    color: #FF851B;
  }


  @media screen and (min-width: 1200px) {
    .navbar {
      display: flex;
      justify-content: center;
      padding-bottom: 0;
      height: 70px;
      align-items: center;
    }

    .main-nav {
      display: flex;
      margin-right: 30px;
      flex-direction: row;
      justify-content: flex-end;
    }

    .main-nav li {
      margin: 0;

    }

    .nav-link {
      margin-left: 40px;
    }

    .logo {
      margin-top: 0;
    }

    .navbar-toggle {
      display: none;
    }
  }

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

    .bottom-navbar {
      display: flex;
      justify-content: center;
      padding-bottom: 0;
      height: 70px;
      align-items: center;
      width: 100%;
    }

    .bottom-nav {
      display: flex;
      flex-direction: row;

    }

    .bottom-nav li {
      margin: 0;
    }

    .bottom-nav-link {
      margin: 0 20px 0 20px;
    }
  }

  /* end navigation css */

  /* Begin Video gallery styles */
  .youtube {
    background-color: #000;
    position: relative;
    padding-top: 56.25%;
    /* 16:9 */
    overflow: hidden;
    cursor: pointer;
  }

  .youtube img {
    width: 100%;
    top: 0;
    left: 0;
    opacity: 1;
  }

  .youtube .play-button {
    width: 60px;
    height: 40px;
    background-color: #333;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
    z-index: 1;
    opacity: 0.5;
    border-radius: 3px;
  }

  .youtube .play-button:before {
    content: "";
    border-style: solid;
    border-width: 15px 0 15px 26.0px;
    border-color: transparent transparent transparent #fff;
  }

  .youtube img,
  .youtube .play-button {
    cursor: pointer;
  }

  .youtube img,
  .youtube iframe,
  .youtube .play-button,
  .youtube .play-button:before {
    position: absolute;
  }

  .youtube .play-button,
  .youtube .play-button:before {
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
  }

  .youtube iframe {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
  }

  .thumb-heading {
    align-items: center;
    text-align: center
  }

  /* End Video gallery styles */

  /* ==========================================================================
   THUMBNAIL GALLERIES
   ========================================================================== */
  .header,
  .footer {
    margin-left: 5px;
    margin-right: 5px;
    flex: 0 1 100%;
    grid-column: 1 / -1;
  }

  .thumbnail-gallery {
    max-width: auto;
    margin: 0 20px;
  }

  /* no grid support? */

  .thumbnail-gallery {
    display: flex;
    flex-wrap: wrap;
  }

  .thumbnail-gallery {
    /* all galleries defaults */
    display: grid;
    margin: 0 auto;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-auto-rows: minmax(150px, auto);
    grid-gap: 5px;
  }

  .portfolio-gallery {
    /* specific to portfolio page */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-auto-rows: minmax(150px, auto);
    grid-gap: 5px;
  }

  .video-gallery {
    /* specific to video page */
    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
    grid-auto-rows: minmax(150px, auto);
    grid-gap: 5px;
  }

  .gallery-thumbnail {
    /* needed for the flex layout*/
    margin-left: 5px;
    margin-right: 5px;
    flex: 1 1 300px;

  }

  .thumbnail-gallery>* {
    padding: 5px;
    margin-bottom: 10px;
  }

  /* We need to set the margin used on flex items to 0 as we have gaps in grid.  */

  @supports (display: grid) {
    .thumbnail-gallery>* {
      margin: 0;
    }

    .gallery-thumbnail {
      padding: 0;
      /* remove padding for grid */
    }
  }

  /* thumbnail captions */

  .thumbnail-caption {
    margin: 0 1em;
  }

  .thumbnail-caption>p {
    margin: .4em 0 1.25em 0;
  }

  .thumbnail-caption h2 {
    margin: 0;
    font-size: 1.1666666666666667em;
    line-height: 1.2857142857142858em;
    font-weight: bold;
    color: #333;
  }

  .thumbnail-caption h3 {
    margin: 0;
    font-size: 1em;
    line-height: 1.5em;
    font-weight: normal;
    color: #666666;
  }

  .thumbnail-caption h4 {
    margin: 0;
    font-size: 1em;
    line-height: 1.5em;
    font-weight: normal;
    color: #666666;
  }

  .thumbnail-caption p {
    color: #666;
  }

  .center-grid {
    display: grid;
    max-width: 1200px;
    margin: 50px auto;
    /*center the content grid */
    grid-gap: 0px;
    /*c50 left right and 10 up down*/
    grid-template-columns: 1fr 14fr 1fr;
    grid-template-rows: auto;
  }

  .content>* {
    grid-column: 2 / -2;
  }

  .content>figure {
    margin: 0;
    grid-column: 1/-1;
  }

  .artwork-title {
    color: #CC0000;
  }

  .artwork-subhead {
    font-weight: bold;
    font-size: 1.5625em;
    /* font size 25px = 1.5625em x 16px */
    line-height: 1.35;
    margin-bottom: 0;
  }

  @media only screen and (min-width:320px) and (max-width: 479px) {
    .artwork-subhead {
      line-height: 1.45;
      font-size: 1.5em;
      /* font size 21px = 1.5em x 14px */
    }
  }

  @media only screen and (min-width: 480px) and (max-width: 575px) {
    .artwork-subhead {
      line-height: 1.45;
    }
  }

  .artwork-subhead,
  .artwork-date {
    margin: 0;
  }

  .artwork-date {
    padding: 0 0 1.125em 0;
    color: #333;
  }
.related-gallery {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 10px;
}

  .related-gallery>h2,
  .related-gallery>hr {
    grid-column: 1/-1;
    padding-left: 20px;
  }

  .related-gallery>figure>figcaption>p {
    margin: 5px 0 0 0;
  }

  .related-gallery>figure>figcaption {
    padding-left: 20px;
  }

  .related-gallery a:link {
    color: black;
  }

  .footer-copyright {
    font-size: 12px;
    text-align: center;
    padding: 50px 0 50px 0;
  }

  .footer-social {
    display: flex;
    flex-wrap: wrap;
    padding: 1.000em 0 1.000em 0;
    align-items: center;
    justify-content: center;
  }

  .footer-social>li {
    display: flex;
    list-style: none;
    padding: 0 0.313em 0 0.313em;
  }

  /* BEGIN grid and formating for article images */
  .singleimagebar,
  .leftimagebar,
  .rightimagebar,
  .fiveimagebar {
    display: grid;
    grid-gap: 10px;
  }

  .singleimagebar,
  .leftimagebar,
  .rightimagebar {
    grid-template-columns: 1fr;
  }

  .fiveimagebar {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 5px;
  }

  .singleimagebar>figcaption,
  .leftimagebar>figcaption,
  .rightimagebar>figcaption,
  .fiveimagebar>figcaption  {
    grid-column: 1/-1;
    font-size: .875em;
    /* 14px at base font size 16px */
    padding: 0 0 0.625em 1.250em;
  }

  .singleimagebar>figcaption>p,
  .leftimagebar>figcaption>p,
  .rightimagebar>figcaption>p,
  .fiveimagebar>figcaption>p {
    color: #A9A9A9;
    margin: 0;
  }


  .image-top-left {
    object-position: 0 0;
  }

  .image-top-right {
    object-position: 150% 150%;
  }

  .image-bottom-left {
    object-position: 0 150%;
  }

  .image-bottom-right {
    object-position: 100% 150%;
  }

  .image-up {
    object-position: 50% 0;
  }

  .image-down {
    object-position: 50% 0;
  }

  .image-right {
    object-position: 0 50%;
  }

  .image-left {
    object-position: 0 50%;
  }

  /* END grid and formating for article images */


  /* BEGIN php gallery styles */

  .content-gallery {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 10px;
  }

  .vertical {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

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

  

    .leftimagebar {
      grid-template-columns: 4fr 6fr;
    }

    .rightimagebar {
      grid-template-columns: 6fr 4fr;
    }

    .leftimagebar>a>img,
    .rightimagebar>a>img {
      object-fit: cover;
      height: 400px;
    }

    .content-gallery {
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      grid-gap: 10px;
    }

    .related-gallery {
      grid-template-columns: repeat(2, minmax(250px, 1fr));
      grid-gap: 20px;
    }

  }

  @media screen and (min-width: 1200px) {
    .content-gallery {
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      grid-gap: 10px;
    }

    .leftimagebar>a>img,
    .rightimagebar>a>img {
      object-fit: cover;
      height: 500px;
    }

    .related-gallery {
      grid-template-columns: repeat(3, minmax(250px, 1fr));
      grid-gap: 25px;
    }

  }

  /* END php gallery styles */

  /* ==========================================================================
   Helper classes
   ========================================================================== */

  /*
 * Hide visually and from screen readers
 */

  .hidden {
    display: none !important;
  }

  /*
* Hide only visually, but have it available for screen readers:
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*
* 1. For long content, line feeds are not interpreted as spaces and small width
*    causes content to wrap 1 word per line:
*    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
*/

  .visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
    /* 1 */
  }

  /*
* Extends the .visuallyhidden class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/

  .visuallyhidden.focusable:active,
  .visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
    white-space: inherit;
  }

  /*
* Hide visually and from screen readers, but maintain layout
*/

  .invisible {
    visibility: hidden;
  }

  /*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
*    `contenteditable` attribute is included anywhere else in the document.
*    Otherwise it causes space to appear at the top and bottom of elements
*    that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
*    `:before` to contain the top-margins of child elements.
*/

  .clearfix:before,
  .clearfix:after {
    content: " ";
    /* 1 */
    display: table;
    /* 2 */
  }

  .clearfix:after {
    clear: both;
  }

  /* ==========================================================================
 EXAMPLE Media Queries for Responsive Design.
 These examples override the primary ('mobile first') styles.
 Modify as content requires.
 ========================================================================== */

  @media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
  }

  @media print,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
  }

  /* ==========================================================================
 Print styles.
 Inlined to avoid the additional HTTP request:
 https://www.phpied.com/delay-loading-your-print-css/
 ========================================================================== */

  @media print {

    *,
    *:before,
    *:after {
      background: transparent !important;
      color: #000 !important;
      /* Black prints faster */
      -webkit-box-shadow: none !important;
      box-shadow: none !important;
      text-shadow: none !important;
    }

    a,
    a:visited {
      text-decoration: underline;
    }

    a[href]:after {
      content: " ("attr(href) ")";
    }

    abbr[title]:after {
      content: " ("attr(title) ")";
    }

    /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
      content: "";
    }

    pre {
      white-space: pre-wrap !important;
    }

    pre,
    blockquote {
      border: 1px solid #999;
      page-break-inside: avoid;
    }

    /*
   * Printing Tables:
   * http://css-discuss.incutio.com/wiki/Printing_Tables
   */

    thead {
      display: table-header-group;
    }

    tr,
    img {
      page-break-inside: avoid;
    }

    p,
    h2,
    h3 {
      orphans: 3;
      widows: 3;
    }

    h2,
    h3 {
      page-break-after: avoid;
    }
  }

  /* photoswipe */

  /*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */
  /*
	Styles for basic PhotoSwipe functionality (sliding area, open/close transitions)
*/
  /* pswp = photoswipe */
  .pswp {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    overflow: hidden;
    -ms-touch-action: none;
    touch-action: none;
    z-index: 1500;
    -webkit-text-size-adjust: 100%;
    /* create separate layer, to avoid paint on window.onscroll in webkit/blink */
    -webkit-backface-visibility: hidden;
    outline: none;
  }

  .pswp * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .pswp img {
    max-width: none;
  }

  /* style is added when JS option showHideOpacity is set to true */
  .pswp--animate_opacity {
    /* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */
    opacity: 0.001;
    will-change: opacity;
    /* for open/close transition */
    -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
    transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
  }

  .pswp--open {
    display: block;
  }

  .pswp--zoom-allowed .pswp__img {
    /* autoprefixer: off */
    cursor: -webkit-zoom-in;
    cursor: -moz-zoom-in;
    cursor: zoom-in;
  }

  .pswp--zoomed-in .pswp__img {
    /* autoprefixer: off */
    cursor: -webkit-grab;
    cursor: -moz-grab;
    cursor: grab;
  }

  .pswp--dragging .pswp__img {
    /* autoprefixer: off */
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing;
    cursor: grabbing;
  }

  /*
	Background is added as a separate element.
	As animating opacity is much faster than animating rgba() background-color.
*/
  .pswp__bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    will-change: opacity;
  }

  .pswp__scroll-wrap {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .pswp__container,
  .pswp__zoom-wrap {
    -ms-touch-action: none;
    touch-action: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }

  /* Prevent selection and tap highlights */
  .pswp__container,
  .pswp__img {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
  }

  .pswp__zoom-wrap {
    position: absolute;
    width: 100%;
    -webkit-transform-origin: left top;
    -ms-transform-origin: left top;
    transform-origin: left top;
    /* for open/close transition */
    -webkit-transition: -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
    transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
  }

  .pswp__bg {
    will-change: opacity;
    /* for open/close transition */
    -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
    transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
  }

  .pswp--animated-in .pswp__bg,
  .pswp--animated-in .pswp__zoom-wrap {
    -webkit-transition: none;
    transition: none;
  }

  .pswp__container,
  .pswp__zoom-wrap {
    -webkit-backface-visibility: hidden;
  }

  .pswp__item {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
  }

  .pswp__img {
    position: absolute;
    width: auto;
    height: auto;
    top: 0;
    left: 0;
  }

  /*
	stretched thumbnail or div placeholder element (see below)
	style is added to avoid flickering in webkit/blink when layers overlap
*/
  .pswp__img--placeholder {
    -webkit-backface-visibility: hidden;
  }

  /*
	div element that matches size of large image
	large image loads on top of it
*/
  .pswp__img--placeholder--blank {
    background: #222;
  }

  .pswp--ie .pswp__img {
    width: 100% !important;
    height: auto !important;
    left: 0;
    top: 0;
  }

  /*
	Error message appears when image is not loaded
	(JS option errorMsg controls markup)
*/
  .pswp__error-msg {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    text-align: center;
    font-size: 14px;
    line-height: 16px;
    margin-top: -8px;
    color: #CCC;
  }

  .pswp__error-msg a {
    color: #CCC;
    text-decoration: underline;
  }