@charset "UTF-8";

/*
 * ImageSet - responsive, lazy-loading images for Kirby CMS
 * 
 * @copyright (c) 2016-2018 Fabian Michael <https://fabianmichael.de>
 * @link https://github.com/fabianmichael/kirby-imageset
 *
 */

/* -----  ImageSet Component  ----------------------------------------------- */

.imageset {
  /* Fixes a glitch in Firefox, where (in rare cases) a
     black border appears for no abvious reason at the
     left side of an imageset. */
  overflow: hidden;
  /* Improve rendering speed in supported browsers. */
  contain: content;
}

/* ·····  ImageSet with Ratio-Placeholder  ·································· */

.imageset.-ratio {
  display: block;
  /* Remove bottom margin (borrowed from Inuit CSS) */
  position: relative;
  width: 100%;
  /* Create a new stacking context for this imageset.
     See comments below to learn about why this
     is important. */
  z-index: 0;
}

.imageset.-ratio .imageset-element {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  /* Override issues introduced by common rules
     for responsive images,
     e.g. `img { max-width: 100%; height: auto; }` */
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  zoom: 1;
}

.imageset.-ratio .imageset-ratio-fill {
  display: block;
  overflow: hidden;
  position: relative;
  z-index: -1;
  /* Setting the width of the placeholder element and
     adding `overflow: hidden` prevents rendering bugs
     in IE 11. */
  width: 100%;
}

.js .imageset.-ratio.-lazyload .imageset-element {
  /* The actual image is kept behind the placeholder.
     Rather than fading in the image, the placeholder is
     faded out instead. This prevents the image layer to
     switch from hardware-accelerated rendering during the
     animation to CPU rendering after the animation has
     ended, because this can cause rendering issues in
     WebKit- and Blink-based (and possibly any other)
     browsers. */
  z-index: 1;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

@media screen {
  .js .imageset.-ratio.-lazyload .imageset-element {
    transition: opacity 0.5s;
  }
}

.js .imageset.-alpha.-lazyload .imageset-element {
  /* Images with transparency require a different fading
     technique, as the placeholder would shine through,
     after the final image was loaded. */
  opacity: 0;
  will-change: opacity;
}

@media screen {
  .js .imageset.-alpha.-lazyload .imageset-element {
    transition: opacity 0.5s;
  }
}

.js .imageset.-lazyload.is-loaded .imageset-element {
  opacity: 1;
  will-change: auto;
}

.imageset-placeholder {
  display: block;
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  max-width: none !important;
  max-height: none !important;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.js .imageset.-lazyload .imageset-placeholder {
  /* Placeholder will be placed on top of the actual
     image element. This will only be applied, when
     JavaScript is enabled. */
  /* Visibility of placeholder is changed to hidden after
     the transition. */
  /* The actual placeholder is in front of the actual
     image, so we don’t have to fade in the image, which
     would lead to artifacts in WebKit- and Blink-based
     browsers. */
  z-index: 2;
  /* Prevent user interaction like accidently saving the
     placeholder via tap/right-click */
  pointer-events: none;
  /* Background color is needed to avoid `image-rendering`
     property beeing ignored when layer is rendered on
     the GPU during animation
     Tested in: Chrome 49, Safari 9.1 */
  background-color: #efefef;
}

@media screen {
  .js .imageset.-lazyload .imageset-placeholder {
    transition: opacity 0.5s 0.05s, visibility 0s 0.8s;
  }
}

.imageset.-alpha .imageset-placeholder {
  visibility: hidden;
}

.js .imageset.-alpha .imageset-placeholder {
  visibility: visible;
}

@media screen {
  .js .imageset.-alpha .imageset-placeholder {
    transition: opacity 0.5s 0.05s, visibility 0s 0.8s;
  }
}

.js .imageset.-alpha:not(.-placeholder\:color) .imageset-placeholder {
  background-color: transparent;
}

.imageset.-placeholder\:mosaic .imageset-placeholder {
  /* autoprefixer: off */
  /* Mosaic placeholders should render crisp! */
  -ms-interpolation-mode: nearest-neighbor;
  /* IE 10, 11 */
  image-rendering: -moz-crisp-edges;
  /* Firefox */
  image-rendering: -o-crisp-edges;
  /* Opera */
  image-rendering: -webkit-optimize-contrast;
  /* Webkit (non-standard naming) */
  image-rendering: crisp-edges;
  /* Safari 10+ */
  image-rendering: pixelated;
  /* Opera 26+, Chrome */
}

.js .imageset.is-loaded:not(.has-error) .imageset-placeholder {
  /* After image is loaded, the placeholder will fade out
     and then change visibility to allow mouse interation
     with the loaded image in browsers, where the
     `pointer-events` property is not supported. */
  opacity: 0;
  visibility: hidden;
}

/* ·····  NoScript Fallback  ················································ */

.imageset.-ratio .imageset-fallback {
  /* autoprefixer: off */
  position: absolute;
  z-index: 5;
  min-width: 100%;
  min-height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-interpolation-mode: bicubic;
}

@supports (object-fit: cover) {
  .imageset.-ratio .imageset-fallback {
    min-width: none;
    min-height: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform: none;
    object-fit: cover;
  }
}

.no-js .imageset .imageset-element {
  display: none;
}

/* ·····  Error Handling  ··················································· */

.js .imageset .imageset-error {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.js .imageset .imageset-error {
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%20%20%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M15%2C10.2803438%20L12.7537186%2C11.7778647%20L9.75371856%2C9.77786474%20L6.75371856%2C11.7778647%20L3.75371856%2C9.77786474%20L1%2C11.6136771%20L1%2C7.19820434e-15%20L15%2C9.76996262e-15%20L15%2C10.2803438%20Z%20M15%2C12.0831194%20L15%2C16%20L1%2C16%20L1%2C13.4164528%20L3.75371856%2C11.5806404%20L6.75371856%2C13.5806404%20L9.75371856%2C11.5806404%20L12.7537186%2C13.5806404%20L15%2C12.0831194%20Z%20M10%2C2.22044605e-15%20L15%2C5%20L15%2C3.44509285e-15%20L10%2C2.22044605e-15%20Z%20M13%2C6%20L9%2C2%20L9%2C6%20L13%2C6%20Z%22/%3E%0A%3C/svg%3E%0A") no-repeat 10px 10px, rgba(255, 255, 255, 0.75);
  border: 1px solid #888;
  padding: 36px 10px 10px;
  box-sizing: border-box;
}

.no-js .imageset:not(.-alpha) .imageset-fallback:-moz-broken {
  background-color: rgba(255, 255, 255, 0.75);
  border: 1px solid #888;
  padding: 10px;
  box-sizing: border-box;
}

.js .imageset .imageset-error,
.no-js .imageset .imageset-fallback {
  font-size: 12px !important;
  line-height: 20px !important;
  font-family: -apple-system, BlinkMacSystemFont,  'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',  'Fira Sans', 'Droid Sans', 'Helvetica Neue',  sans-serif !important;
  font-weight: normal !important;
  font-style: normal !important;
  font-feature-settings: normal !important;
  color: #000 !important;
  text-shadow: none !important;
}

.js .imageset .imageset-error {
  overflow: hidden !important;
}

.js .imageset.has-error .imageset-error {
  opacity: 1;
}

.js .imageset.-lazyload.has-error .imageset-element {
  opacity: 0;
  visibility: hidden;
  transition: none;
}

.js .imageset.has-placeholder-error .imageset-placeholder {
  visibility: hidden;
  transition: none;
}

/* ·····  Opera Mini Fixes  ················································· */

.operamini .imageset-placeholder {
  display: none;
}

.operamini .imageset.-multiple-ratios .imageset-element {
  /* autoprefixer: off */
  -o-object-fit: cover;
  object-fit: cover;
}