/* Background Block: https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/includes/field/responsive-background
--------------------------------------------------------------- */
.responsive-background {
	pointer-events: none;
	overflow: hidden;
	transform-style: preserve-3d;
	z-index: -1;
	background-color: var(--color-dark-alt);
  }
  .responsive-background-wrapper {
	position: relative;
	z-index: 0;
  }
  .responsive-background, .responsive-background-bg {
	position: absolute !important;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
  }
  .responsive-background-bg {
	/* Note: when styling instances of this block, make sure properties are NOT set as shorthand to avoid override issues */
	background-size: cover;
	background-position: center center;
	/* Note: Best practice to add fallback background-colors to your background images */
	background-color: inherit;
	z-index: -2;
	background-image: var(--responsive-background-image, none) !important;
  }
  .responsive-background-bg:is(img) {
	-o-object-fit: cover;
	   object-fit: cover;
	-o-object-position: center center;
	   object-position: center center;
	width: 100%;
	height: 100%;
  }
  @media only screen and (min-width: 1200px) {
	:is(.responsive-background-animated-on-loaded, .responsive-background-animated-on-visible.visible) .responsive-background-bg {
	  /* make background block animate for document ready or when visible*/
	  transition: opacity ease-in-out 1.5s, transform ease-in-out 1.5s;
	  opacity: 1;
	  transform: scale(1);
	  transform-style: preserve-3d;
	}
	:is(html:not(.doc-images-loaded) .responsive-background-animated-on-loaded,
	.responsive-background-animated-on-visible:not(.visible)) .responsive-background-bg {
	  /* hide if not ready to let the world to know got to let it show */
	  opacity: 0;
	  transform: scale(1.125);
	}
  }