.component-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: -1px;
    overflow: hidden;
    pointer-events: none;
    z-index: 0
}

.component-bg .layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.component-bg .color-holder {
    background: var(--componentBgVideoPreview, transparent)
}

.component-bg .image-holder,
.component-bg .preview-holder {
    background-repeat: no-repeat;
    background-size: cover
}

.component-bg .image-holder {
    image-rendering: var(--imageRendering, auto)
}

.component-bg .preview-holder {
    transition: opacity .3s ease, visibility .3s ease
}

.component-bg .video-holder {
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center
}

.component-bg .video-holder iframe,
.component-bg .video-holder video {
    flex-shrink: 0
}

.component-bg .parallax-holder+.image-holder {
    animation: none !important
}

.component-bg .parallax-holder.ready+.image-holder {
    opacity: 0;
    visibility: hidden
}

.component-bg .overlay {
    background: var(--componentBgColor, transparent);
    opacity: var(--componentBgOpacity, 1)
}

.component-bg.image-loaded .preview-holder {
    opacity: 0;
    visibility: hidden
}

.component-bg.video-loaded .color-holder,
.component-bg.video-loaded .image-holder {
    opacity: 0;
    visibility: hidden;
    display: none
}

.component-bg.video-loaded .video-holder {
    opacity: 1
}

.component-bg[data-type=video][data-effect] {
    clip-path: inset(0)
}

.component-bg[data-type=video][data-effect] .image-holder,
.component-bg[data-type=video][data-effect] .video-holder {
    position: fixed;
    height: max(100vh, var(--100vh))
}

.component-bg[data-type=video][data-effect=parallax] .image-holder,
.component-bg[data-type=video][data-effect=parallax] .video-holder {
    transform: translateZ(0);
    will-change: transform
}

.component-bg[data-type=image][data-effect=fixed] .image-holder {
    transform: none !important;
    transition: none !important;
    animation: none !important;
    will-change: unset !important;
    contain: none !important
}

.component-bg[data-type=image][data-effect=fixed] .image-holder,
.component-bg[data-type=image][data-effect=fixed] .preview-holder {
    background-attachment: fixed
}

body:is(.is-ios, .is-osx.is-touch, .is-safari, .adaptive-mobile) .component-bg[data-effect=fixed] {
    clip-path: inset(0)
}

body:is(.is-ios, .is-osx.is-touch, .is-safari, .adaptive-mobile) .component-bg[data-effect=fixed] .image-holder,
body:is(.is-ios, .is-osx.is-touch, .is-safari, .adaptive-mobile) .component-bg[data-effect=fixed] .preview-holder {
    position: fixed;
    background-attachment: scroll;
    left: var(--fixedOffset);
    width: var(--100vw);
    height: var(--100lvh);
    will-change: transform;
    transform: translateZ(0)
}

.b_block .component-bg .overlay[data-alpha="1"] {
    opacity: 1 !important
}

body.adaptive-mobile .component-bg[data-mobile-video-enabled=false] .video-holder {
    display: none !important
}

body.adaptive-mobile .component-bg[data-mobile-video-enabled=false] .image-holder {
    opacity: 1;
    visibility: visible;
    display: block
}

body.adaptive-mobile .component-bg[data-effect-mobile=off] .layer {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-attachment: scroll !important;
    transform: none !important;
    will-change: auto !important
}

body.adaptive-mobile .component-bg[data-effect-mobile=off] .image-holder {
    opacity: 1 !important;
    visibility: visible !important
}

body.adaptive-mobile .component-bg[data-effect-mobile=off] .parallax-holder {
    display: none !important
}

body.adaptive-mobile .component-bg[data-effect-mobile=off] .overlay {
    --componentBgOpacity: revert !important
}

.bg-element {
    position: relative;
    box-sizing: border-box;
    --bgColor: none;
    --bgImage: none;
    --bgAverageColor: none;
    --bgShadingColor: none;
    --bgPositionX: 50%;
    --bgPositionY: 50%;
    --bgShadow: none;
    --borderWidth: 0px;
    --borderColor: transparent;
    --bgZIndex: 998;
    --bgZBorder: 999;
    --hoverFadeInFrom: 0;
    --hoverFadeInTo: 1;
    z-index: auto
}

.bg-border,
.bg-border-hover,
.bg-fill,
.bg-fill-hover,
.bg-glare-hover,
.bg-preview,
.bg-shadow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: var(--topLeftRadius, 0) var(--topRightRadius, 0) var(--bottomRightRadius, 0) var(--bottomLeftRadius, 0);
    pointer-events: none
}

.bg-glare-hover {
    overflow: hidden;
    contain: strict;
    z-index: var(--bgZIndex)
}

.bg-glare-hover:before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: "";
    aspect-ratio: 1/1;
    border-radius: 100%;
    transform: translate(calc(var(--bgGlareX, 0) - 50%), calc(var(--bgGlareY, 0) - 50%));
    background: var(--bgGlareColor);
    filter: blur(var(--bgGlareBlur, 100px));
    z-index: auto;
    width: 0;
    transition: width max(var(--transitionDuration), .1s) var(--transitionTiming, ease)
}

.bg-fill {
    z-index: var(--bgZIndex);
    background: var(--bgColor)
}

.bg-fill[data-img-ext=png] {
    background-color: transparent
}

.bg-fill[data-type=image] {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: var(--bgPositionX) var(--bgPositionY)
}

.bg-fill[data-type=image]:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: var(--bgShadingColor);
    border-radius: inherit
}

.bg-fill-hover {
    display: none;
    z-index: var(--bgZIndex);
    background: var(--hoverBgColor)
}

.bg-fill-hover[data-img-ext=png] {
    background-color: transparent
}

.bg-fill-hover[data-type=image] {
    background-size: cover;
    background-repeat: no-repeat;
    background-color: var(--hoverBgAverageColor);
    background-position: var(--hoverBgPositionX) var(--hoverBgPositionY)
}

.bg-fill-hover[data-type=image]:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background-color: var(--hoverBgShadingColor);
    border-radius: inherit
}

.bg-preview {
    z-index: var(--bgZIndex);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: var(--bgPositionX) var(--bgPositionY);
    background-color: var(--bgAverageColor);
    transition: opacity .4s ease, visibility .4s ease
}

.bg-border {
    border: var(--borderWidth) solid var(--borderColor);
    z-index: var(--bgZBorder)
}

.bg-border.is-gradient {
    background: var(--borderGradient);
    border-radius: 0;
    border: 0
}

.bg-border-hover {
    display: none;
    z-index: var(--bgZBorder);
    border: var(--borderWidth) solid var(--hoverBorderColor)
}

.bg-border-hover.is-gradient {
    background: var(--hoverBorderGradient);
    border-radius: 0;
    border: 0
}

.bg-shadow {
    box-shadow: var(--bgShadow);
    z-index: var(--bgZIndex)
}

.is-touch .bg-glare-hover {
    display: none !important
}