/**
 * Pilpil v1.0.0 - Progressive Image Loading
 * @link https://zafree.github.io/pilpil
 * @copyright 2015-2016 Zafree
 * @license MIT
 */
figure {
  display: block;
  margin: 0; }

.graf-figure {
  position: relative;
  clear: both;
  outline: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.aspectRatioPlaceholder {
  position: relative;
  width: 100%;
  margin: 0 auto;
  display: block; }

.aspectRatioPlaceholder-fill {
  display: block; }

.progressiveMedia {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.05); }

.progressiveMedia-thumbnail {
  display: none; }

.progressiveMedia-canvas {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  vertical-align: baseline; }

.progressiveMedia-image {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: auto;
  z-index: 100;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.progressiveMedia .progressiveMedia-canvas {
  visibility: hidden;
  opacity: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }
.progressiveMedia.is-canvasLoaded .progressiveMedia-canvas {
  visibility: visible;
  opacity: 1;
  -webkit-transition: visibility 0s linear 0s,opacity .4s 0s;
  transition: visibility 0s linear 0s,opacity .4s 0s; }
.progressiveMedia .progressiveMedia-image {
  visibility: hidden;
  opacity: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }
.progressiveMedia.is-imageLoaded .progressiveMedia-image {
  visibility: visible;
  opacity: 1;
  z-index: 1;
  -webkit-transition: visibility 0s linear 0s, opacity 1s 0s;
  transition: visibility 0s linear 0s, opacity 1s 0s; }