/**
 * @file
 */

.blazy,
.blazy *,
.blazy *::before,
.blazy *::after {
  box-sizing: border-box;
}

/* The lazyloaded element: IMG, IFRAME, DIV. */
.b-lazy,
.b-responsive {
  display: block;
  height: auto;
  min-height: 1px;
  opacity: 0;
  transition: opacity 500ms ease-in-out;
}

/* Needed to display preloader with CSS BG image, otherwise hidden. */
.b-loaded,
.b-error,
.b-bg.media--loading {
  opacity: 1;
}

.b-bg {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* The .blazy container is not always preset such at lightboxes. */
.litebox,
.blazy iframe,
.media iframe {
  border: 0 none;
  display: block;
  max-width: 100%;
}

/** Fix for conflict with Bootstrap CSS if not using aspect ratio. */
.blazy .media {
  display: block;
  position: relative;
}

/* Be sure to add width to the container accordingly, otherwise collapsed. */
.field[data-blazy] {
  min-width: 50%;
}