html {
	font: 400 16px/1.25 system-ui;
}
@layer bm-videocta {
	#videoCTA {
		position: fixed;
		bottom: 5%;
		right: 2.5%;
		width: 180px !important;
		height: auto;
		aspect-ratio: 9/16;
		outline: 2px solid #ddd5;
		border-radius: 0.25rem;
		cursor: pointer;
		display: grid;
		font-size: 20px;
		margin: 0 !important;
		padding: 0 !important;
		z-index: 1000;
		transition: width 200ms ease-in-out, height 200ms ease-in-out, border-radius 200ms ease-in-out;

		@media(max-width: 992px) {
			width: 80px !important;
			font-size: 25px !important;
		}
	}

	/* Pause icon overlay */
	#videoCTA::after {
		content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmZmYiIGNsYXNzPSJiaSBiaS1wYXVzZS1jaXJjbGUiIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZD0iTTggMTVBNyA3IDAgMSAxIDggMWE3IDcgMCAwIDEgMCAxNG0wIDFBOCA4IDAgMSAwIDggMGE4IDggMCAwIDAgMCAxNiIvPgogIDxwYXRoIGQ9Ik01IDYuMjVhMS4yNSAxLjI1IDAgMSAxIDIuNSAwdjMuNWExLjI1IDEuMjUgMCAxIDEtMi41IDB6bTMuNSAwYTEuMjUgMS4yNSAwIDEgMSAyLjUgMHYzLjVhMS4yNSAxLjI1IDAgMSAxLTIuNSAweiIvPgo8L3N2Zz4=");
		position: absolute;
		z-index: 10;
		inset: 2rem;
		top: 50%;
		translate: 0 -50%;
		pointer-events: none;

		/* Hidden by default */
		opacity: 0;
		visibility: hidden;
		transition: none;
	}

	/* Flash animation when pausing */
	#videoCTA.flash::after {
		visibility: visible;
		animation: pauseFlash 500ms ease-out forwards;
	}

	@keyframes pauseFlash {
		0% {
			opacity: 0.5;
			transform: scale(1);
		}
		70% {
			opacity: 0.3;
			transform: scale(1.08);
		}
		100% {
			opacity: 0;
			transform: scale(1);
		}
	}

	#videoCTA video {
		width: 100%;
		height: 100%;
		aspect-ratio: inherit;
		border-radius: inherit;
		object-fit: cover;
		margin: 0 !important;
		padding: 0 !important;
	}

	#videoCTA .closeBtn,
	#videoCTA .text,
	#videoCTA .sound {
		background: #0005;
		color: #fff;
		padding: 0.25rem;
		display: none;
		position: absolute;
	}

	#videoCTA .closeBtn,
	#videoCTA .sound {
		user-select: none;
		cursor: pointer;
		border-radius: 100%;
		right: 1em;
		width: 1.25em;
		height: 1.25em;
	}

	#videoCTA .closeBtn {
		opacity: 1 !important;
		display: grid !important;
		top: 1em;
		pointer-events: all;
		background: #0005
			url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmZmYiIGNsYXNzPSJiaSBiaS14IiB2aWV3Qm94PSIwIDAgMTYgMTYiPgogIDxwYXRoIGQ9Ik00LjY0NiA0LjY0NmEuNS41IDAgMCAxIC43MDggMEw4IDcuMjkzbDIuNjQ2LTIuNjQ3YS41LjUgMCAwIDEgLjcwOC43MDhMOC43MDcgOGwyLjY0NyAyLjY0NmEuNS41IDAgMCAxLS43MDguNzA4TDggOC43MDdsLTIuNjQ2IDIuNjQ3YS41LjUgMCAwIDEtLjcwOC0uNzA4TDcuMjkzIDggNC42NDYgNS4zNTRhLjUuNSAwIDAgMSAwLS43MDgiLz4KPC9zdmc+");
	}

	#videoCTA .sound {
		top: 2.5em;
		line-height: 0 !important;
	}

	#videoCTA .text {
		bottom: 1em;
		left: 1em;
		right: 1em;
		font-size: 1rem !important;
		padding: 0.35em 1em;
		font-size: 0.875em;
		width: fit-content;
		border-radius: 1em;
		color: #fff !important;
	}

	#videoCTA .text p {
		margin: 0;
	}

	#videoCTA.open {
		width: 20rem !important;
		height: auto;
		border-radius: 1rem;
		outline: 4px solid #ddd5;
		cursor: auto;

		@media(max-width: 992px) {
			width: 95% !important;
		}
	}

	#videoCTA.open .closeBtn,
	#videoCTA.open .text,
	#videoCTA.open .sound {
		display: grid;
		opacity: 0;
		transition: opacity 200ms ease;
	}

	#videoCTA.open .closeBtn {
		cursor: pointer;
	}

	#videoCTA.open .sound::before {
		content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmZmYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZD0iTTExLjUzNiAxNC4wMUE4LjQ3IDguNDcgMCAwIDAgMTQuMDI2IDhhOC40NyA4LjQ3IDAgMCAwLTIuNDktNi4wMWwtLjcwOC43MDdBNy40OCA3LjQ4IDAgMCAxIDEzLjAyNSA4YzAgMi4wNzEtLjg0IDMuOTQ2LTIuMTk3IDUuMzAzeiIvPgogIDxwYXRoIGQ9Ik0xMC4xMjEgMTIuNTk2QTYuNDggNi40OCAwIDAgMCAxMi4wMjUgOGE2LjQ4IDYuNDggMCAwIDAtMS45MDQtNC41OTZsLS43MDcuNzA3QTUuNDggNS40OCAwIDAgMSAxMS4wMjUgOGE1LjQ4IDUuNDggMCAwIDEtMS42MSAzLjg5eiIvPgogIDxwYXRoIGQ9Ik0xMC4wMjUgOGE0LjUgNC41IDAgMCAxLTEuMzE4IDMuMTgyTDggMTAuNDc1QTMuNSAzLjUgMCAwIDAgOS4wMjUgOGMwLS45NjYtLjM5Mi0xLjg0MS0xLjAyNS0yLjQ3NWwuNzA3LS43MDdBNC41IDQuNSAwIDAgMSAxMC4wMjUgOE03IDRhLjUuNSAwIDAgMC0uODEyLS4zOUwzLjgyNSA1LjVIMS41QS41LjUgMCAwIDAgMSA2djRhLjUuNSAwIDAgMCAuNS41aDIuMzI1bDIuMzYzIDEuODlBLjUuNSAwIDAgMCA3IDEyek00LjMxMiA2LjM5IDYgNS4wNHY1LjkyTDQuMzEyIDkuNjFBLjUuNSAwIDAgMCA0IDkuNUgydi0zaDJhLjUuNSAwIDAgMCAuMzEyLS4xMSIvPgo8L3N2Zz4=");
	}

	#videoCTA.open .sound.muted::before {
		content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmZmYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZD0iTTYuNzE3IDMuNTVBLjUuNSAwIDAgMSA3IDR2OGEuNS41IDAgMCAxLS44MTIuMzlMMy44MjUgMTAuNUgxLjVBLjUuNSAwIDAgMSAxIDEwVjZhLjUuNSAwIDAgMSAuNS0uNWgyLjMyNWwyLjM2My0xLjg5YS41LjUgMCAwIDEgLjUyOS0uMDZNNiA1LjA0IDQuMzEyIDYuMzlBLjUuNSAwIDAgMSA0IDYuNUgydjNoMmEuNS41IDAgMCAxIC4zMTIuMTFMNiAxMC45NnptNy44NTQuNjA2YS41LjUgMCAwIDEgMCAuNzA4TDEyLjIwNyA4bDEuNjQ3IDEuNjQ2YS41LjUgMCAwIDEtLjcwOC43MDhMMTEuNSA4LjcwN2wtMS42NDYgMS42NDdhLjUuNSAwIDAgMS0uNzA4LS43MDhMMTAuNzkzIDggOS4xNDYgNi4zNTRhLjUuNSAwIDEgMSAuNzA4LS43MDhMMTEuNSA3LjI5M2wxLjY0Ni0xLjY0N2EuNS41IDAgMCAxIC43MDggMCIvPgo8L3N2Zz4=");
	}

	#videoCTA.open:hover .closeBtn,
	#videoCTA.open:hover .text,
	#videoCTA.open:hover .sound,
	#videoCTA.open:focus-within .closeBtn,
	#videoCTA.open:focus-within .text,
	#videoCTA.open:focus-within .sound {
		opacity: 1;
	}

	@media(max-width: 992px) {
		#videoCTA .closeBtn, 
		#videoCTA .sound {
			right: 4px;
		}

		#videoCTA.open .closeBtn, 
		#videoCTA.open .sound {
			right: 1rem;
		}

		#videoCTA .closeBtn {
			top: 4px;
		}

		#videoCTA.open .closeBtn {
			top: 1rem;
		}
	}
}