/* Video Button - Default (One that doesnt have custom markup in it, just the usual one with a play symbol)
https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/includes/helper/video-button.md
--------------------------------------------------------------- */
/* Video Button Skeletons. No need to edit 
--------------------------------------------------------------- */
@keyframes video-button-default-text-rotate {
	from {
	  transform: rotate(0deg);
	}
	to {
	  transform: rotate(360deg);
	}
  }
  .video-button-default {
	display: inline-flex;
	width: 1em;
	height: 1em;
	position: relative;
	font-size: var(--video-button-size);
	z-index: 0;
	cursor: pointer;
	align-items: center;
	justify-content: center;
  }
  .video-button-default:is(.video-button-no-api) {
	pointer-events: none;
  }
  .video-thumbnail .video-button-default {
	/* customize instances of video button within thumbnail*/
	position: absolute;
	z-index: 1;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	--video-button-size: 70px;
  }
  .video-button-default-image, .video-button-default-text, .video-button-default-text-svg, .video-button-default-text span, .video-button-default::before, .video-button-default::after {
	position: absolute;
	margin: auto;
	pointer-events: none;
  }
  .video-button-default-text, .video-button-default-image {
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
  }
  .video-button-default.video-button-default-no-icon::before, .video-button-default.video-button-default-no-icon::after {
	content: "";
	display: block;
  }
  .video-button-default > .wistia_click_to_play {
	position: static !important;
	width: auto !important;
	height: auto !important;
  }
  .video-button-default-glyph {
	display: flex;
	align-items: center;
  }
  .video-button-default-glyph::before {
	content: "";
	display: block;
	width: var(--video-button-glyph-width);
	height: var(--video-button-glyph-height);
	background: var(--video-button-glyph-color, currentColor);
	-webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
			clip-path: polygon(0 0, 100% 50%, 0 100%);
  }
  .video-button-default-glyph:not(.video-button-default-glyph-has-text) {
	padding-left: calc(var(--video-button-glyph-width) * 0.25);
  }
  .video-button-default-glyph-has-text::before {
	content: none;
  }
  .video-button-default-text {
	font-size: var(--video-button-glyph-height);
  }
  .video-button-default-text-svg {
	transform-style: preserve-3d;
	max-width: none;
	top: -100%;
	left: -100%;
	right: -100%;
	bottom: -100%;
	margin: auto;
	font-size: calc(1em * 1 / var(--video-button-text-svg-radius-ratio));
	width: calc(200% * var(--video-button-text-svg-radius-ratio));
	height: calc(200% * var(--video-button-text-svg-radius-ratio));
  }
  .video-button-default-text-svg-path {
	transform-origin: center center;
  }
  .video-button-default-text-html span {
	top: 0;
	bottom: 0;
	width: -webkit-max-content;
	width: -moz-max-content;
	width: max-content;
	height: -webkit-max-content;
	height: -moz-max-content;
	height: max-content;
  }
  .video-button-default-text-html span:not(.video-button-default-text-html-separator):first-child {
	right: 100%;
	margin-right: 1em;
  }
  .video-button-default-text-html span:not(.video-button-default-text-html-separator):last-child {
	left: 100%;
	margin-left: 1em;
  }
  .video-button-default-image-init:not(:only-child), .video-button-default:is(:hover, :focus) .video-button-default-image-hover, .video-pointer-reference:is(:hover, :focus-within) .video-button-default-image-hover {
	opacity: 1;
  }
  
  .video-button-default-image-hover, .video-button-default:is(:hover, :focus) .video-button-default-image-init:not(:only-child), .video-pointer-reference:is(:hover, :focus-within) .video-button-default-image-init:not(:only-child) {
	opacity: 0;
  }
  
  /* Video Button Customizations: https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/includes/helper/video-button.md#css-vars
  --------------------------------------------------------------- */
  .video-button-default {
	--video-button-size: 80px;
	/* size of video button by height and or width */
	--video-button-text-svg-radius-ratio: 1.25;
	/*  ratio of svg path for rounded text. */
	--video-button-text-svg-start-offset: 50%;
	/*  offset of svg text */
	--video-button-glyph-height: 0.24em;
	/* height for video play triangle glyph*/
	/* Tip: set as ems so the play symbol scales along with the actual button */
	--video-button-glyph-width: 0.16em;
	/* width for video play triangle glyph*/
	/* Tip: set as ems so the play symbol scales along with the actual button */
	--video-button-glyph-color: currentColor;
	/* color of the video button glyph. Used as a background-color so it can take gradients too */
	color: var(--color-light);
  }
  .video-button-default, .video-button-default-image, .video-button-default-text, .video-button-default::before, .video-button-default::after, .video-button-default-thumbnail-markup::after {
	transition-duration: 0.25s;
	transition-timing-function: ease-in-out;
  }
  .video-button-default, .video-button-default-image, .video-button-default-text, .video-button-default-thumbnail-markup::after {
	transition-property: opacity, left, top, bottom, right, width, height;
  }
  .video-button-default::before, .video-button-default::after {
	transition-property: all;
  }
  .video-thumbnail .video-button-default {
	/* customize instances of video button within thumbnail*/
	--video-button-size: 70px;
  }
  .video-thumbnail .video-button-default:is(:hover, :focus), .video-pointer-reference:is(:hover, :focus-within) .video-thumbnail .video-button-default {
	--video-thumbnail-overlay-opacity: .8;
  }
  @media only screen and (min-width: 1400px) {
	.video-button-default {
	  --video-button-size: 100px;
	}
	.video-thumbnail .video-button-default {
	  --video-button-size: 120px;
	}
  }
  .video-button-default-glyph {
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-weight: 700;
  }
  .video-button-default-glyph::before {
	-webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
			clip-path: polygon(0 0, 100% 50%, 0 100%);
  }
  .video-button-default-text {
	font-size: 0.75rem;
	line-height: 1;
	color: var(--color-neutral);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-weight: 700;
  }
  .video-button-default-text-separator {
	color: inherit;
  }
  .video-button-default-text-svg {
	transform: rotate(32deg);
	color: inherit;
  }
  .video-button-default-text-html > span {
	top: 0;
	bottom: 0;
  }
  .video-button-default.video-button-default-no-icon {
	/* tru element/background */
	/* these are basic styles. overhaul as needed */
	background: rgba(255, 255, 255, 0.2);
	box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2);
  }
  .video-button-default.video-button-default-no-icon, .video-button-default.video-button-default-no-icon::before, .video-button-default.video-button-default-no-icon::after {
	/* these are basic styles. overhaul as needed */
	border-radius: 999em;
	transform: scale(1);
  }
  .video-button-default.video-button-default-no-icon::before {
	/* fake extra background */
	/* these are basic styles. overhaul as needed */
	background: linear-gradient(to bottom, var(--color-primary-gradient-start), var(--color-primary-gradient-end));
	z-index: -1;
	top: 0.1em;
	bottom: 0.1em;
	left: 0.1em;
	right: 0.1em;
  }
  .video-button-default.video-button-default-no-icon::after {
	/* other element for fx */
	/* these are basic styles. overhaul as needed */
	border: 0.0125em solid var(--color-accent);
	top: 0.15em;
	bottom: 0.15em;
	left: 0.15em;
	right: 0.15em;
  }
  .video-button-default.video-button-default-no-icon:is(:hover, :focus), .video-pointer-reference:is(:hover, :focus-within) .video-button-default.video-button-default-no-icon {
	/* on hover on itself/ containing repeater/ .video-pointer-reference */
	--video-button-glyph-color: linear-gradient(to bottom, var(--color-light-alt), var(--color-light));
	/* these are basic styles. overhaul as needed */
	box-shadow: 0 0 0 0.1em rgba(255, 255, 255, 0.2);
  }
  .video-button-default.video-button-default-no-icon:is(:hover, :focus)::before, .video-pointer-reference:is(:hover, :focus-within) .video-button-default.video-button-default-no-icon::before {
	/* these are basic styles. overhaul as needed */
	background: linear-gradient(to bottom, var(--color-primary-gradient-start), var(--color-primary-gradient-end));
	transform: scale(1.25);
  }
  .video-button-default.video-button-default-no-icon:is(:hover, :focus)::after, .video-pointer-reference:is(:hover, :focus-within) .video-button-default.video-button-default-no-icon::after {
	/* these are basic styles. overhaul as needed */
	transform: scale(0.98);
  }
  .video-thumbnail .video-button-default.video-button-default-no-icon:is(:hover, :focus), .video-pointer-reference:has(.video-thumbnail .video-button-default.video-button-default-no-icon):is(:hover, :focus-within) .video-button-default.video-button-default-no-icon {
	/* these are basic styles. overhaul as needed */
  }
  .video-thumbnail .video-button-default.video-button-default-no-icon:is(:hover, :focus)::before, .video-pointer-reference:has(.video-thumbnail .video-button-default.video-button-default-no-icon):is(:hover, :focus-within) .video-button-default.video-button-default-no-icon::before {
	/* these are basic styles. overhaul as needed */
  }
  .video-thumbnail .video-button-default.video-button-default-no-icon:is(:hover, :focus)::after, .video-pointer-reference:has(.video-thumbnail .video-button-default.video-button-default-no-icon):is(:hover, :focus-within) .video-button-default.video-button-default-no-icon::after {
	/* these are basic styles. overhaul as needed */
  }
  
  /* Video Pointer Reference
  --------------------------------------------------------------- */
  .video-pointer-reference {
	cursor: pointer;
  }
  
  /* Video Thumbnail https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/includes/helper/video-thumbnail.md
  --------------------------------------------------------------- */
  /* Video Thumbnail Skeletons. No need to edit 
  --------------------------------------------------------------- */
  .video-thumbnail {
	position: relative;
	display: block;
	max-width: 100%;
	width: 100%;
	flex: 0 0 auto;
	background-color: var(--color-light-alt);
	border-radius: inherit;
	overflow: hidden;
  }
  .video-thumbnail::before {
	/* aspect ratio keeper  */
	content: "";
	display: block;
	padding-top: calc(100% * var(--video-thumbnail-aspect-l) / var(--video-thumbnail-aspect-w));
  }
  .video-thumbnail-markup {
	border-radius: inherit;
	overflow: hidden;
  }
  .video-thumbnail-markup[href]::after, .video-thumbnail-markup.wistia_embed::after {
	/* overlay */
	content: "";
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	pointer-events: none;
	background: var(--video-thumbnail-overlay-background);
	opacity: var(--video-thumbnail-overlay-opacity);
  }
  .video-thumbnail-markup-img img {
	max-width: none;
  }
  
  /* force object fit cover where we need to, im looking at you wistia
  --------------------------------------------------------------- */
  :is(.video-thumbnail-markup, .video-button-image),
  .video-thumbnail-markup > *,
  .video-thumbnail-markup img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	position: absolute !important;
	top: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	right: 0 !important;
	-o-object-fit: cover !important;
	   object-fit: cover !important;
	margin: 0 !important;
  }
  
  /* Video Thumbnail
  https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/includes/helper/video-thumbnail.md#css-vars
  --------------------------------------------------------------- */
  .video-thumbnail {
	--video-thumbnail-aspect-w: 320;
	--video-thumbnail-aspect-l: 180;
	--video-thumbnail-overlay-background: var(--color-dark-alt) linear-gradient(to bottom right, var(--color-dark), var(--color-dark-alt));
	--video-thumbnail-overlay-opacity: 0;
  }
  .video-thumbnail:is(:hover, :focus), .video-pointer-reference:is(:hover, :focus-within) .video-thumbnail {
	--video-thumbnail-overlay-opacity: .8;
  }
  .video-thumbnail-markup[href]::after, .video-thumbnail-markup.wistia_embed::after {
	/* overlay */
	mix-blend-mode: multiply;
	transition: 0.25s ease-in-out all;
  }