.wistia_facade_wrap {
	position: relative;
	display: block;
	width: 100%;
	max-width: 100%;
}
.wistia_facade_wrap[data-box="fixed"] {
	width: auto;
	max-width: 100%;
	box-sizing: border-box;
}
/**
 * The player and the facade must stay in one containing block. Aurora's shadow root
 * carries ":host { display: flex; position: relative; width: 100% }" and paints a
 * full-size preload thumbnail into it the moment player.js upgrades the element - left
 * in flow, that thumbnail lays itself out below the facade instead of over it and both
 * are on screen. Document rules beat :host, so absolute + z-index here is enough.
 */
.wistia_facade_wrap .wistia_facade_player,
.wistia_facade_wrap > wistia-player {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}
.wistia_facade_wrap .wistia_facade {
	z-index: 2;
	position: absolute;
	inset: 0;
}
/**
 * From the click on, the player owns the top layer. wistia.js adds "loading" before it
 * requests player.js and adds "playing" before it drops "loading", so the player is
 * never handed back down while a facade is still there.
 */
.wistia_facade_wrap.wistia_facade_loading .wistia_facade_player,
.wistia_facade_wrap.wistia_facade_loading > wistia-player,
.wistia_facade_wrap.wistia_facade_playing .wistia_facade_player,
.wistia_facade_wrap.wistia_facade_playing > wistia-player {
	z-index: 3;
}
/* Aurora draws its own big play button - ours would sit next to it, slightly offset. */
.wistia_facade_wrap.wistia_facade_loading .wistia_facade_play_button {
	display: none;
}
.wistia_facade_wrap img.wistia_facade_poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	margin: 0;
	box-sizing: border-box;
}
/* Caps keep the button inside small embeds - popover thumbnails run ~150px wide. */
.wistia_facade_play_button {
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 125px;
	height: 80px;
	max-width: 40%;
	max-height: 40%;
	cursor: pointer;
	z-index: 3;
}
.wistia_facade_play_button svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: rgb(255, 255, 255);
	stroke-width: 0px;
}
.wistia_facade_play_button .wistia_facade_play_background {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	opacity: 0.75;
	background-color: #54bbff;
	transition: opacity 150ms ease 0s;
}
.wistia_facade_play_button:hover .wistia_facade_play_background {
	opacity: 0.5
}
.wistia_facade_spinner {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(255, 255, 255, 0.8);
	z-index: 4;
}
.wistia_facade_spinner.wistia_facade_fixed {
	position: fixed;
	background: rgba(0, 0, 0, 0.5);
	z-index: 10000003;
}
.wistia_facade_spinner_inner {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 50px;
	height: 50px;
	transform: translateX(-25px) translateY(-25px);
}
.wistia_facade_spinner_svg {
	width: 100%;
	height: 100%;
	animation: 1.4s linear 0s infinite normal none running wistia_facade_spinner_rotate;
}
.wistia_facade_spinner_circle {
	stroke: #0080d5;
	stroke-dasharray: 0px, 200px;
	stroke-dashoffset: 0;
	stroke-linecap: round;
	transform: translateZ(0px);
	animation: 1.4s ease-in-out 0s infinite normal none running wistia_facade_spinner_stroke;
}
@keyframes wistia_facade_spinner_rotate {
	100% {
		transform: rotate(360deg);
	}
}
@keyframes wistia_facade_spinner_stroke {
	0% {
		stroke-dasharray: 1px, 200px;
		stroke-dashoffset: 0;
	}
	50% {
		stroke-dasharray: 120px, 200px;
		stroke-dashoffset: -15px;
	}
	100% {
		stroke-dasharray: 120px, 200px;
		stroke-dashoffset: -135px;
	}
}