@charset "utf-8";
/* CSS Document */
  
      .css-bg-example-container {
        max-width: 48rem;
        position: relative;
        margin: 0 auto 1rem;
      }

      .css-bg-example {
        position: absolute;
        padding-top: 75%;
        width: 100%;
        top: 0;
        left: 0;
        background: #ccc;
      }

      .css-bg-example.lazy-bg-loaded {
        background-image: url("img/test-768w.jpg");
        background-size: 100% auto;
      }

      @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
        .css-bg-example.lazy-bg-loaded {
          background-image: url("img/test-1536w.jpg");
          background-size: 100% auto;
        }
      }

      img {
        transition: opacity 2s ease-out;
        position: relative;
        z-index: 1;
      }

      img.lazy {
        opacity: .5;
      }

      img.yall-loaded
      img.yall-error {
        opacity: 1;
      }

      .message {
        visibility: hidden;
        opacity: 0;
        transition: opacity 2s ease-out;
        text-align: center;
        padding: 1rem .5rem;
        color: #fff;
        font-size: 1.5rem;
        margin: 1rem 0 0;
      }

      .message.error {
        background: #f00;
      }

      .message.notice {
        background: #00f;
      }

      .message.visible {
        visibility: visible;
        opacity: 1;
      }

      .no-js .lazy,
      .no-js .lazy-bg {
        display: none;
      }