.js--lazyload{position:relative;display:block;background-color:#f5f5f5}.js--lazyload:not(img){height:0;padding-bottom:50%}img.js--lazyload{width:100%}.js--lazyload img{position:absolute;top:0;left:0;display:block;/*height:100%*/;width:100%;opacity:1;transition:150ms opacity linear}.js--lazyload--loading img{opacity:0}

  /*
     * Add a loading animation to lazyloaded images.
     */
    .js--lazyload--loading::before,.js--lazyload--loading::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: block;
      width: 60px;
      height: 60px;
      background-color: #BBBBBB;
      border: 2px solid #BBBBBB;
      border-radius: 50%;
      opacity: 0;
      z-index: 1;
    }

    .js--lazyload::before {
      animation: loading 2s linear 0s infinite;
    }

    .js--lazyload::after {
      animation: loading 2s linear -1s infinite;
    }

    @keyframes loading {
      0% {
        background-color: rgba(175, 175, 175, 0.95);
        transform: translate(-50%, -50%) scale(0.1);
        opacity: 1;
      }

      60% {
        background-color: rgba(175, 175, 175, 0.5);
      }

      100% {
        background-color: rgba(175, 175, 175, 0);
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
      }
    }

    /*
     * NOTE: It’d probably be wise to hide the animation if JS is disabled.
     * To do this, add a `no-js` class to the body element and remove it with
     * JS once the DOM is ready, then uncomment this rule.
     * /
    .no-js .js--lazyload--loading {
      display: none;
    }
    /**/