.appox-hero-background{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  z-index:1!important;
  overflow:hidden!important;
  pointer-events:none!important;
  user-select:none!important;
  opacity:var(--appox-bg-opacity,.78)!important;
  display:block!important;
  visibility:visible!important;
}
.appox-hero-background__canvas{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  display:block!important;
  pointer-events:none!important;
}
.appox-hero-background__vignette{display:none!important}
.appox-hero-background-host{
  position:relative!important;
  isolation:isolate!important;
}
/* Only the real BeTheme content wrapper is lifted above the animation.
   Do not touch individual wraps/columns: that was what destabilised the layout. */
.appox-hero-background-host > .mcb-section-inner,
.appox-hero-background-host > .section_wrapper,
.appox-hero-background-host > .mcb-section-inner-wrapper{
  position:relative!important;
  z-index:2!important;
}
.appox-hero-background-host > .mcb-background-overlay,
.appox-hero-background-host > .section-decoration-wrap,
.appox-hero-background-host > .section-divider{
  z-index:0!important;
}
@media(max-width:767px){.appox-hero-background--hide-mobile{display:none!important}}
@media(prefers-reduced-motion:reduce){.appox-hero-background{opacity:calc(var(--appox-bg-opacity,.78) * .74)!important}}