/**
 * @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;
}

/* Ensure that without js (or in print or emails) our lazy-loader stubs don't
interfere. */
html:not(.js) .b-lazy[data-src],
html:not(.js) [data-b-blur] {
  display: none;
}

.b-bg,
/* Tricking IE and other oldies to fix aspect ratio. */
.media--ratio .is-b-ie {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  display: block;
}

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

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

.media--blazy iframe {
  position: relative;
  width: 100%;
  z-index: 1;
}

.media-wrapper--inline {
  margin: auto;
  max-width: 100%;
}

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

/**
 * Non-js element. Supports both BG, or inline media.
 * Makes generic animation container, either blur, or other animate.css.
 */
.media--fx {
  /* Hide extra blur edges. */
  overflow: hidden;
  /* Dup for BlazyFilter which has no .blazy container. */
  position: relative;
}

.media--fx img {
  /* Prevents unwanted alt text from showing. */
  color: transparent;
  display: block;
  /* Prevents blinking.
  opacity: 1; */
  /* Prevents collapsing thumbnail image if Aspect ratio is disabled. */
  width: 100%;
}

/* Aspect ratio element: IMG, IFRAME, DIV.
The best things we can do to minimize layout/ reflows with dynamic DOM:
absolute position and fixed dimensions. */
.media--ratio .media__element,
.media--fx .b-blur {
  bottom: 0;
  height: 100%;
  left: 0;
  min-height: 1px;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 0;
  /** Temp fix, also to fix the VIDEO element to max width, not only IMG. */
  object-fit: cover;
}

.animated img,
.b-bg.is-b-animated {
  opacity: 1;
}

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

/* Overrides .field--type-image img, causes confusing blur mismatched height. */
.blazy .media--blazy img.b-blur,
.blazy .media--blazy img.media__element {
  margin: 0;
}