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

/* Needed to display preloader with CSS BG image, otherwise hidden. */

.b-loaded,
.b-error,
/* @todo deprecated and removed media--loading for is-b-loading to make sense outside media. */

.b-bg.media--loading,
.b-bg.is-b-loading {
    opacity: 1;
}

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

/* The .blazy container is not always preset such at lightboxes. */

.litebox,
.blazy iframe,
.media iframe {
    border: 0;
    display: block;
    max-width: 100%;
}

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

/** Fix for conflict with Bootstrap CSS if not using aspect ratio. */

.blazy .media {
    display: block;
    position: relative;
}

/**
 * Non-js element. Supports both BG, or inline media.
 * Makes generic animation contaitner, 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. */

.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;
}

/**
 * The blur image, to support various usages: native, BG and regular IMG.
 * The native lazy load swaps placeholders for real images, makes it impossible
 * to have blur effect, that is why we put it into another IMG.
 */

.media--fx .b-blur {
    color: transparent;
    /* < 980: The less the more artifacts. The more the slower. */
    filter: blur(3px);
    opacity: .9;
    /* Longer than animation timing to let the actual image surface better. */
    transition: opacity 1.2s;
    /* Avoid overlaying, this causes unwanted dark shadow and more artifacts. */
    /* z-index: 1; */
}

.media--fx-lg .b-blur {
    /* > 980: The less the more artifacts. The more the slower. */
    filter: blur(6px);
    /* Reduces artifacts due to being large. */
    opacity: .8;
}

.animated img {
    opacity: 1;
}

/* Be sure to add width to the container accordingly, otherwise collapsed. */

.field[data-blazy] {
    min-width: 50%;
}