.VIDEO-CAROUSEL {
	height: 700rem;
	position: relative;
	z-index: 1;
}

.VIDEO-CAROUSEL .mask {
	position: absolute;
	top: -40rem;
	bottom: -40rem;

	left: -500rem;
	right: 50%;
	margin-right: -130rem;
	border-radius: 0 390rem 390rem 0;
	background: var(--cream);
}
.VIDEO-CAROUSEL .b-frame .mask { pointer-events: all; }


.VIDEO-CAROUSEL .b-frame {
	padding-top: 0;
	padding-bottom: 0;
	position: relative;
	pointer-events: none;
}

.VIDEO-CAROUSEL .b-frame,
.VIDEO-CAROUSEL .slider {
	height: 100%;
	width: 100%;
}
@media screen and (min-width: 961px) {
	.VIDEO-CAROUSEL .b-frame {
		padding-top: 0;
		padding-bottom: 0;
		position: relative;
	}
	.VIDEO-CAROUSEL .slide  {
		height: 100%;
		width: 100%;
		box-sizing: border-box;
	}	
}

.VIDEO-CAROUSEL .slider,
.VIDEO-CAROUSEL .slide { box-sizing: border-box; }


.VIDEO-CAROUSEL .image-container {line-height: 0;}

.VIDEO-CAROUSEL .image {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	aspect-ratio: 3/2;
}


.VIDEO-CAROUSEL button.image {
	appearance: none;
	border: none;
	padding: 0;
	cursor: pointer;
}
.VIDEO-CAROUSEL button.image .btn-play {
	position: absolute;
	top: 50%;
	right: 30%;
	transform: translate(0, -50%);
} 

.VIDEO-CAROUSEL button.image .btn-play rect { fill: var(--orange); transition: 0.2s ease-out;}
.VIDEO-CAROUSEL button.image:hover .btn-play rect { fill: var(--light-orange) } 

.VIDEO-CAROUSEL .content  :where(h1, h2, h3, h4) { color: var(--blue); }

.VIDEO-CAROUSEL .content .footnote {
	max-width: 380rem;
	font-size: 16rem;
}

@media screen and (min-width: 961px) {
	.VIDEO-CAROUSEL .content h3 { font-size: 34rem;}
	.VIDEO-CAROUSEL .slider:not(.alt-flickity) .content {
		bottom: 50%;
		transform: translate(0, 50%);
	}
}


.VIDEO-CAROUSEL .content {
	position: absolute;
	bottom: 150rem;
	left: 40rem;
	width: 560rem;
	font-size: 20rem;
	font-weight: 500;
}

.VIDEO-CAROUSEL .flickity-page-dots {
	position: absolute;
	bottom: 100rem;
	left: 50%;
	margin-left: 20rem;
	transform: translate(-605rem, 0);
}

.VIDEO-CAROUSEL .flickity-prev-next-button {
	top: auto;
	border-radius: 0;
	transform: none;
	width: 44rem;
	height: 24rem;
	bottom: 100rem;
	padding: 0;
	background: url(images/arrow.svg) no-repeat center / 100%;
	display: block !important;
}

.VIDEO-CAROUSEL .flickity-prev-next-button.previous {margin-left: -160rem; left: 50%; transform: scaleX(-1);}
.VIDEO-CAROUSEL .flickity-prev-next-button.next {margin-left: -100rem; left: 50%;}
.VIDEO-CAROUSEL .flickity-prev-next-button .flickity-button-icon {display: none;}



.VIDEO-CAROUSEL .flickity-viewport {overflow: visible;}
@media screen and (min-width: 961px) {
	.VIDEO-CAROUSEL .flickity-viewport {height: 100% !important}
}

@media screen and (min-width: 2401px) {
	.VIDEO-CAROUSEL .mask {margin-left: -200rem;}
}

@media screen and (min-width: 961px) {
	.VIDEO-CAROUSEL[data-reverse] .mask { right: -500rem; left: 50%; margin-left: -130rem; border-radius: 390rem 0 0 390rem; }
	.VIDEO-CAROUSEL[data-reverse] .image { right: unset; left: 0; }
	.VIDEO-CAROUSEL[data-reverse] .btn-play { right: auto; left: 30%; }
	.VIDEO-CAROUSEL[data-reverse] .content { left: unset; right: 40rem; }

	.VIDEO-CAROUSEL[data-reverse] .flickity-page-dots {
		bottom: 100rem;
		left: 50%;
		margin-left: 20rem;
		transform: none;
	}

	.VIDEO-CAROUSEL[data-reverse] .flickity-prev-next-button.previous {margin-left: 472rem; left: 50%; transform: scaleX(-1);}
	.VIDEO-CAROUSEL[data-reverse] .flickity-prev-next-button.next {margin-left: 536rem; left: 50%; right: auto; }
	.VIDEO-CAROUSEL[data-reverse] .flickity-prev-next-button .flickity-button-icon {display: none;}
}

@media screen and (max-width: 960px) {
	.VIDEO-CAROUSEL {height: auto; max-width: 480rem; margin: 0 auto; overflow: hidden;}
	.VIDEO-CAROUSEL .b-frame {padding: 30rem 20rem 120rem; box-sizing: border-box;}
	.VIDEO-CAROUSEL .slider:not(.alt-flickity) .b-frame {padding: 30rem 20rem 60rem;}
	
	.VIDEO-CAROUSEL > .mask {display: none;}
	.VIDEO-CAROUSEL .b-frame .mask {
		left: -300rem;
		right: -300rem;
		min-height: 1000rem;
		border-radius: 100% 100% 0 0;
		margin-left: 0;
		margin-right: 0;
		top: -60rem;
		background: var(--cream);
		pointer-events: none;
	}

	.VIDEO-CAROUSEL .image {position: static;}
	.VIDEO-CAROUSEL .content {position: relative; right: unset; left: unset; bottom: unset; width: auto; font-size: 18rem;}

	.VIDEO-CAROUSEL button.image .btn-play {
		position: absolute;
		top: 100rem;
		left: 50%;
		opacity: 0.8;
		transform: translate(-50%, 0);
	}

	.VIDEO-CAROUSEL .flickity-page-dots {bottom: 60rem; left: 20rem; margin-left: 0; transform: none;}
	.VIDEO-CAROUSEL .flickity-prev-next-button {bottom: 56rem;}
	.VIDEO-CAROUSEL .flickity-prev-next-button.previous {right: 80rem; left: auto; margin-left: 0;}
	.VIDEO-CAROUSEL .flickity-prev-next-button.next {right: 20rem; left: auto; margin-left: 0;}
}


@media screen and (max-width: 425px) {
	.VIDEO-CAROUSEL .image {bottom: auto; left: -50rem; right: -50rem;}
}

@media screen and (max-width: 370px) {
	.VIDEO-CAROUSEL button.image .btn-play {top: 60rem;}
}


/* Admin Preview */
.acf-block-preview > .VIDEO-CAROUSEL .b-frame { padding-top: 0; padding-bottom: 0; }
.acf-block-preview > .VIDEO-CAROUSEL .slide:not(:first-child) { display: none; }