/**
**All css Rules regarding Background Video
**Related to: wc-image-swiper.css, wc-swiper-init.js, child-theme.js
*/
.header-video-template-landing-page #backgroud-video {
  position: absolute;
  margin-top: 0 !important;
  height: 100%;
  width: 100%;
}

#backgroud-video {
  margin-top: calc(
    (var(--nav-bar-pad) * 2) + var(--height-logo-wappen) +
      var(--height-logo-txt) + var(--gap-logo)
  );
  position: fixed;
  height: 100vh;
  width: 100vw;
  transition: all var(--trans-dur) cubic-bezier(0.46, 0.03, 0.52, 0.96) 0s;
  top: 0;
}

#backgroud-video.small {
  margin-top: calc(
    (var(--nav-bar-pad) * 2) + var(--height-logo-txt) + var(--gap-logo)
  );
}

.background-video-wrapper {
  position: relative;
  display: flex;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.background-video-wrapper-inner::after {
  content: "";
  transition: all var(--trans-dur) cubic-bezier(0.46, 0.03, 0.52, 0.96) 0s;
  width: 130%;
  height: 130%;
  backdrop-filter: blur(0);
  position: absolute;
  top: 0;
  left: 0;
}

#backgroud-video.swiper-slider-visible .background-video-wrapper-inner::after,
#backgroud-video.small .background-video-wrapper-inner::after {
  backdrop-filter: blur(13px);
}

.background-video-wrapper::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 9;
  background-color: #000;
  opacity: 0;
  transition: all var(--trans-dur) cubic-bezier(0.46, 0.03, 0.52, 0.96) 0s;
}

#backgroud-video.swiper-slider-visible .background-video-wrapper::after,
#backgroud-video.small .background-video-wrapper::after {
  opacity: 0.4;
}

.background-video-wrapper-inner {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
}

.background-video-wrapper-inner video {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

#primary.content-area.page-video-background
/*#primary.has-page-video-background */ {
  padding-top: 100vh !important;
  margin-top: 0 !important;
  padding-bottom: 0;
}