html,
  body {
    margin: 0;
    padding: 0;
  }

  figure {
    float: right;
    width: 100vw;
    height: 80vh;
    text-align: center;
    font-style: italic;
    text-indent: 0;
    margin: 0;
    padding: 0;
  }

  figcaption {
    margin-top: 0.5em;
  }

  .resource-url {
    font-style: normal;
  }

  #image-zoom-wrapper {
    position: relative;
    text-align: left;
    width: 100vw;
    height: 80vh;
    overflow: auto;
    margin: 0;
    border: 1px solid #000;
    background: #FFF url("./loader.gif") no-repeat 50% 50%;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
  }

  #image-zoom-wrapper.js-active {
    cursor: move;
    background-image: none;
  }

  .js-enabled #image-zoom-wrapper {
    overflow: hidden;
    position: relative;
  }

  .js-enabled #image-zoom-wrapper #image-zoom {
    visibility: hidden;
    position: relative;
  }

  #image-zoom-wrapper div {
    padding: 0;
  }

  #image-zoom-wrapper div.zoom-control {
    width: 26px;
    height: 26px;
  }

  #image-zoom-wrapper div.zoom-in,
  #image-zoom-wrapper div.zoom-out,
  #image-zoom-wrapper div.zoom-close {
    background: url("./zoom-in.png") no-repeat 0 0;
    position: absolute;
    left: 10px;
    top: 10px;
  }

  #image-zoom-wrapper div.zoom-out {
    background-image: url("./zoom-out.png");
    top: 46px;
  }

  #image-zoom-wrapper div.zoom-close {
    background-image: url("./close.png");
    top: 10px;
    left: auto;
    right: 10px;
  }

  #image-zoom-wrapper div.zoom-off {
    background-position: 0 100%;
  }

  @media only screen and (max-width: 820px) {

    #image-zoom-wrapper {
      width: auto;
      margin-left: 10px;
      margin-right: 10px;
      border-width: 5px;
    }

    #image-zoom-wrapper div.zoom-in,
    #image-zoom-wrapper div.zoom-out,
    #image-zoom-wrapper div.zoom-close {
      background-image: url("./zoom-in-104.png");
      background-size: 52px;
      width: 52px;
      height: 52px;
    }

    #image-zoom-wrapper div.zoom-out {
      background-image: url("./zoom-out-104.png");
      top: auto;
      bottom: 10px;
    }

    #image-zoom-wrapper div.zoom-close {
      background-image: url("./close-104.png");
    }

  }

  @media only screen and (max-width: 820px) {
    #image-zoom-wrapper {
      height: 75vh;
    }
  }

  @media only screen and (max-height: 420px) {
    #image-zoom-wrapper {
      height: 55vh;
    }
  }