.SCROLLER {
	position: relative;
}

.SCROLLER .image-container {
	position: absolute;
	top: -40rem;
	right: 0;
	left: 50%;
	height: 800rem;
	margin-left: 20rem;
	background: var(--cream);
	border-radius: 400rem 0 0 400rem;
}

.SCROLLER .image {
	position: absolute;
	top: 50%;
	left: 0;
	width: 560rem;
	height: auto;
	opacity: 0;
	transition: opacity 0.25s;
	transform: translate(0, -50%);
}

.SCROLLER .overlap {
	position: absolute;
	top: 0;
	left: 0;
	height: 40rem;
	width: 40rem;
}

.SCROLLER.alt-fixed .image-container {
	position: fixed;
	top: 50%;
	transform: translate(0, -50%);
}

.SCROLLER.alt-fixed-end .image-container {
	top: auto;
	bottom: -40rem;
}

.SCROLLER .group {
	position: relative;
	margin: 200rem 0;
}

.SCROLLER .group::before {
	content: '';
	display: block;
	position: absolute;
	top: 40rem;
	left: 529rem;
	bottom: -210rem;
	width: 2rem;
	background: #979797;
}

.SCROLLER .group::after {
	content: '';
	position: absolute;
	top: 10rem;
	left: 515rem;
	width: 30rem;
	height: 30rem;
	border-radius: 15rem;
	box-shadow: inset 0 0 0 2rem #979797;
	transition: background 0.25s, box-shadow 0.25s;
}

.SCROLLER .group:first-child {margin-top: 0}
.SCROLLER .group:last-child {margin-bottom: 0}
.SCROLLER .group:last-child::before {display: none;}

.SCROLLER .mobile-image {display: none;}
.SCROLLER .content {max-width: 460rem;}
.SCROLLER .content .b-eyebrow {color: var(--light-blue);}
.SCROLLER .content h3 {color: var(--blue);}
.SCROLLER .content blockquote {
	font-weight: 700;  
	background: var(--teal-bg); 
	border-radius: 10rem; 
	padding: 25rem; 
	margin: 0; 
	width: fit-content;
}
.SCROLLER .content blockquote strong {	color: var(--orange);}

.SCROLLER .content .alt-pill {
	background-color: var(--cream);
	box-sizing: border-box;
	padding: 10rem 16rem;
	border-radius: 10rem;
	display: inline-block;

	font-weight: 700;
}
.SCROLLER .content .alt-pill + .alt-pill { margin-left: 24rem; }

.SCROLLER[data-active="0"] .group:first-child::after,
.SCROLLER[data-active="1"] .group:nth-child(1)::after,
.SCROLLER[data-active="2"] .group:nth-child(2)::after,
.SCROLLER[data-active="3"] .group:nth-child(3)::after,
.SCROLLER[data-active="4"] .group:nth-child(4)::after,
.SCROLLER[data-active="5"] .group:nth-child(5)::after,
.SCROLLER[data-active="6"] .group:nth-child(6)::after {background: var(--yellow); box-shadow: inset 0 0 0 2rem var(--yellow);}

.SCROLLER[data-active="0"] .image:first-child,
.SCROLLER[data-active="1"] .image:nth-child(1),
.SCROLLER[data-active="2"] .image:nth-child(2),
.SCROLLER[data-active="3"] .image:nth-child(3),
.SCROLLER[data-active="4"] .image:nth-child(4),
.SCROLLER[data-active="5"] .image:nth-child(5),
.SCROLLER[data-active="6"] .image:nth-child(6) {opacity: 1;}


@media screen and (min-width: 961px) {
	.SCROLLER .content blockquote {font-size: 20rem;}
	.SCROLLER .content blockquote strong {display: block; font-size: 48rem; margin-bottom: -5rem;}
}

@media screen and (max-width: 960px) {
	.SCROLLER .image-container {display: none !important;}
	.SCROLLER .group {margin: 80rem 0;}
	.SCROLLER .group::before {display: none;}
	.SCROLLER .group::after {display: none;}
	.SCROLLER .mobile-image {display: block; margin-bottom: 20rem;}
}




.SCROLLER[data-style='custom-1'] .content {max-width: 480rem;}
/* .SCROLLER[data-style='custom-1'] .image-container {height: 500rem;} */
.SCROLLER[data-style='custom-1'] .image-container {height: 770rem;}
.SCROLLER[data-style='custom-1'] .image {left: 30rem; width: 710rem; max-width: 100%;}

.SCROLLER[data-style='custom-1'][data-active="0"] .group:first-child::after {background: #132853; box-shadow: inset 0 0 0 2rem #132853;}
.SCROLLER[data-style='custom-1'][data-active="1"] .group:nth-child(1)::after {background: #132853; box-shadow: inset 0 0 0 2rem #132853;}
.SCROLLER[data-style='custom-1'][data-active="2"] .group:nth-child(2)::after {background: #274FA5; box-shadow: inset 0 0 0 2rem #274FA5;}
.SCROLLER[data-style='custom-1'][data-active="3"] .group:nth-child(3)::after {background: #E36751; box-shadow: inset 0 0 0 2rem #E36751;}
.SCROLLER[data-style='custom-1'][data-active="4"] .group:nth-child(4)::after {background: #D8AE10; box-shadow: inset 0 0 0 2rem #D8AE10;}
.SCROLLER[data-style='custom-1'][data-active="5"] .group:nth-child(5)::after {background: #45A19F; box-shadow: inset 0 0 0 2rem #45A19F;}
.SCROLLER[data-style='custom-1'][data-active="6"] .group:nth-child(6)::after {background: #7ECECD; box-shadow: inset 0 0 0 2rem #7ECECD;}

.SCROLLER[data-style='custom-1'][data-active="1"] .group:nth-child(1)::after {background: #132853; box-shadow: inset 0 0 0 2rem #132853;}
.SCROLLER[data-style='custom-1'][data-active="1"] .group:nth-child(1)::after {background: #132853; box-shadow: inset 0 0 0 2rem #132853;}
.SCROLLER[data-style='custom-1'][data-active="2"] .group:nth-child(2)::after {background: #274FA5; box-shadow: inset 0 0 0 2rem #274FA5;}
.SCROLLER[data-style='custom-1'][data-active="3"] .group:nth-child(3)::after {background: #E36751; box-shadow: inset 0 0 0 2rem #E36751;}
.SCROLLER[data-style='custom-1'][data-active="4"] .group:nth-child(4)::after {background: #D8AE10; box-shadow: inset 0 0 0 2rem #D8AE10;}
.SCROLLER[data-style='custom-1'][data-active="5"] .group:nth-child(5)::after {background: #45A19F; box-shadow: inset 0 0 0 2rem #45A19F;}
.SCROLLER[data-style='custom-1'][data-active="6"] .group:nth-child(6)::after {background: #7ECECD; box-shadow: inset 0 0 0 2rem #7ECECD;}