/******/
/*** SCROLLED / ANIMATE ON SCROLL ***/
/******/

/* BASE */

.js-scroll {
	opacity: 0;
	transition: none;
	will-change: opacity, transform, clip-path;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.js-scroll img,
.js-scroll picture,
.js-scroll svg {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

/* Set the hidden/start state before JS runs.
   This prevents Safari from briefly painting the final image state. */
.js-scroll.fade-in-top {
	-webkit-transform: translate3d(0, -3.125rem, 0);
	transform: translate3d(0, -3.125rem, 0);
}

/* FADE-IN-BOTTOM START STATE */

.js-scroll.fade-in-bottom {
	-webkit-transform: translate3d(0, 3.125rem, 0);
	transform: translate3d(0, 3.125rem, 0);
}

.js-scroll.slide-in-left {
	-webkit-transform: translate3d(-6.25rem, 0, 0);
	transform: translate3d(-6.25rem, 0, 0);
}

.js-scroll.slide-in-right {
	-webkit-transform: translate3d(6.25rem, 0, 0);
	transform: translate3d(6.25rem, 0, 0);
}

.js-scroll.wipe-in-top {
	-webkit-clip-path: var(--wipe-in-top);
	clip-path: var(--wipe-in-top);
}

.js-scroll.wipe-in-bottom,
.js-scroll.wipe-and-zoom {
	-webkit-clip-path: var(--wipe-in-bottom);
	clip-path: var(--wipe-in-bottom);
}

.js-scroll.wipe-in-right {
	-webkit-clip-path: var(--wipe-in-left);
	clip-path: var(--wipe-in-left);
}

.js-scroll.wipe-in-left {
	-webkit-clip-path: var(--wipe-in-right);
	clip-path: var(--wipe-in-right);
}

.js-scroll.wipe-and-zoom {
	-webkit-transform: translate3d(0, 0, 0) scale(1.08);
	transform: translate3d(0, 0, 0) scale(1.08);
	overflow: clip;
}

.logged-in .js-scroll,
.paged .js-scroll {
	opacity: 1 !important;
}

.js-scroll.scrolled.wipe-in-top,
.js-scroll.scrolled.wipe-in-bottom,
.js-scroll.scrolled.wipe-in-right,
.js-scroll.scrolled.wipe-in-left {
	opacity: 1;
}

.js-scroll.scrolled-complete {
	opacity: 1;
	will-change: auto;
}

/* ANIMATION DEFAULTS */

.scrolled {
	--animation-duration: 800ms;
	--animation-easing: ease-in-out;
	--animation-delay: 0ms;
}

.scrolled.fade-in,
.scrolled.fade-in-top,
.scrolled.fade-in-bottom,
.scrolled.slide-in-left,
.scrolled.slide-in-right,
.scrolled.wipe-in-top,
.scrolled.wipe-in-bottom,
.scrolled.wipe-in-right,
.scrolled.wipe-in-left,
.scrolled.wipe-and-zoom {
	-webkit-animation-duration: var(--animation-duration);
	animation-duration: var(--animation-duration);
	-webkit-animation-timing-function: var(--animation-easing);
	animation-timing-function: var(--animation-easing);
	-webkit-animation-delay: var(--animation-delay);
	animation-delay: var(--animation-delay);
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

/* FADE / SLIDE ANIMATIONS */

.scrolled.fade-in {
	-webkit-animation-name: fade-in;
	animation-name: fade-in;
}

.scrolled.fade-in-top {
	-webkit-animation-name: fade-in-top;
	animation-name: fade-in-top;
}

.scrolled.fade-in-bottom {
	-webkit-animation-name: fade-in-bottom;
	animation-name: fade-in-bottom;
}

.scrolled.slide-in-left {
	-webkit-animation-name: slide-in-left;
	animation-name: slide-in-left;
}

.scrolled.slide-in-right {
	-webkit-animation-name: slide-in-right;
	animation-name: slide-in-right;
}

/* WIPE ANIMATIONS */

:root {
	--wipe-in: inset(0 0 0 0);
	--wipe-in-bottom: inset(100% 0 0 0);
	--wipe-in-left: inset(0 100% 0 0);
	--wipe-in-top: inset(0 0 100% 0);
	--wipe-in-right: inset(0 0 0 100%);
}

.scrolled.wipe-in-top,
.scrolled.wipe-in-bottom,
.scrolled.wipe-in-right,
.scrolled.wipe-in-left {
	--animation-duration: 600ms;
}

.scrolled.wipe-in-top {
	-webkit-animation-name: wipe-in-top;
	animation-name: wipe-in-top;
}

.scrolled.wipe-in-bottom {
	-webkit-animation-name: wipe-in-bottom;
	animation-name: wipe-in-bottom;
}

.scrolled.wipe-in-right {
	-webkit-animation-name: wipe-in-right;
	animation-name: wipe-in-right;
}

.scrolled.wipe-in-left {
	-webkit-animation-name: wipe-in-left;
	animation-name: wipe-in-left;
}

/* WIPE + ZOOM */

.scrolled.wipe-and-zoom {
	--animation-duration: 1200ms;
	-webkit-animation-name: wipe-and-zoom;
	animation-name: wipe-and-zoom;
	overflow: clip;
}

/* ATTRIBUTE-BASED WIPE SUPPORT */

[transition-style] {
	-webkit-animation-delay: var(--transition__delay, 0ms);
	animation-delay: var(--transition__delay, 0ms);
	-webkit-animation-duration: var(--transition__duration, 2.5s);
	animation-duration: var(--transition__duration, 2.5s);
	-webkit-animation-timing-function: var(--transition__easing, cubic-bezier(.25, 1, .3, 1));
	animation-timing-function: var(--transition__easing, cubic-bezier(.25, 1, .3, 1));
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	will-change: clip-path;
}

[transition-style="in:wipe:down"],
[transition-style="in:wipe:top"] {
	-webkit-animation-name: wipe-in-top;
	animation-name: wipe-in-top;
}

[transition-style="in:wipe:right"] {
	-webkit-animation-name: wipe-in-right;
	animation-name: wipe-in-right;
}

[transition-style="in:wipe:bottom"],
[transition-style="in:wipe:up"] {
	-webkit-animation-name: wipe-in-bottom;
	animation-name: wipe-in-bottom;
}

[transition-style="in:wipe:left"] {
	-webkit-animation-name: wipe-in-left;
	animation-name: wipe-in-left;
}

/******/
/*** KEYFRAMES ***/
/******/

@-webkit-keyframes fade-in {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes fade-in {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@-webkit-keyframes fade-in-top {
	0% {
		-webkit-transform: translate3d(0, -3.125rem, 0);
		transform: translate3d(0, -3.125rem, 0);
		opacity: 0;
	}

	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

@keyframes fade-in-top {
	0% {
		-webkit-transform: translate3d(0, -3.125rem, 0);
		transform: translate3d(0, -3.125rem, 0);
		opacity: 0;
	}

	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

@-webkit-keyframes fade-in-bottom {
	0% {
		-webkit-transform: translate3d(0, 3.125rem, 0);
		transform: translate3d(0, 3.125rem, 0);
		opacity: 0;
	}

	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

@keyframes fade-in-bottom {
	0% {
		-webkit-transform: translate3d(0, 3.125rem, 0);
		transform: translate3d(0, 3.125rem, 0);
		opacity: 0;
	}

	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

@-webkit-keyframes slide-in-left {
	0% {
		-webkit-transform: translate3d(-6.25rem, 0, 0);
		transform: translate3d(-6.25rem, 0, 0);
		opacity: 0;
	}

	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

@keyframes slide-in-left {
	0% {
		-webkit-transform: translate3d(-6.25rem, 0, 0);
		transform: translate3d(-6.25rem, 0, 0);
		opacity: 0;
	}

	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

@-webkit-keyframes slide-in-right {
	0% {
		-webkit-transform: translate3d(6.25rem, 0, 0);
		transform: translate3d(6.25rem, 0, 0);
		opacity: 0;
	}

	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

@keyframes slide-in-right {
	0% {
		-webkit-transform: translate3d(6.25rem, 0, 0);
		transform: translate3d(6.25rem, 0, 0);
		opacity: 0;
	}

	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

@-webkit-keyframes wipe-in-top {
	0% {
		-webkit-clip-path: var(--wipe-in-top);
		clip-path: var(--wipe-in-top);
	}

	100% {
		-webkit-clip-path: var(--wipe-in);
		clip-path: var(--wipe-in);
	}
}

@keyframes wipe-in-top {
	0% {
		-webkit-clip-path: var(--wipe-in-top);
		clip-path: var(--wipe-in-top);
	}

	100% {
		-webkit-clip-path: var(--wipe-in);
		clip-path: var(--wipe-in);
	}
}

@-webkit-keyframes wipe-in-right {
	0% {
		-webkit-clip-path: var(--wipe-in-left);
		clip-path: var(--wipe-in-left);
	}

	100% {
		-webkit-clip-path: var(--wipe-in);
		clip-path: var(--wipe-in);
	}
}

@keyframes wipe-in-right {
	0% {
		-webkit-clip-path: var(--wipe-in-left);
		clip-path: var(--wipe-in-left);
	}

	100% {
		-webkit-clip-path: var(--wipe-in);
		clip-path: var(--wipe-in);
	}
}

@-webkit-keyframes wipe-in-bottom {
	0% {
		-webkit-clip-path: var(--wipe-in-bottom);
		clip-path: var(--wipe-in-bottom);
	}

	100% {
		-webkit-clip-path: var(--wipe-in);
		clip-path: var(--wipe-in);
	}
}

@keyframes wipe-in-bottom {
	0% {
		-webkit-clip-path: var(--wipe-in-bottom);
		clip-path: var(--wipe-in-bottom);
	}

	100% {
		-webkit-clip-path: var(--wipe-in);
		clip-path: var(--wipe-in);
	}
}

@-webkit-keyframes wipe-in-left {
	0% {
		-webkit-clip-path: var(--wipe-in-right);
		clip-path: var(--wipe-in-right);
	}

	100% {
		-webkit-clip-path: var(--wipe-in);
		clip-path: var(--wipe-in);
	}
}

@keyframes wipe-in-left {
	0% {
		-webkit-clip-path: var(--wipe-in-right);
		clip-path: var(--wipe-in-right);
	}

	100% {
		-webkit-clip-path: var(--wipe-in);
		clip-path: var(--wipe-in);
	}
}

@-webkit-keyframes wipe-and-zoom {
	0% {
		-webkit-clip-path: var(--wipe-in-bottom);
		clip-path: var(--wipe-in-bottom);
		-webkit-transform: translate3d(0, 0, 0) scale(1.08);
		transform: translate3d(0, 0, 0) scale(1.08);
		opacity: 0;
	}

	100% {
		-webkit-clip-path: var(--wipe-in);
		clip-path: var(--wipe-in);
		-webkit-transform: translate3d(0, 0, 0) scale(1);
		transform: translate3d(0, 0, 0) scale(1);
		opacity: 1;
	}
}

@keyframes wipe-and-zoom {
	0% {
		-webkit-clip-path: var(--wipe-in-bottom);
		clip-path: var(--wipe-in-bottom);
		-webkit-transform: translate3d(0, 0, 0) scale(1.08);
		transform: translate3d(0, 0, 0) scale(1.08);
		opacity: 0;
	}

	100% {
		-webkit-clip-path: var(--wipe-in);
		clip-path: var(--wipe-in);
		-webkit-transform: translate3d(0, 0, 0) scale(1);
		transform: translate3d(0, 0, 0) scale(1);
		opacity: 1;
	}
}

/******/
/*** INFINITE SCROLL ***/
/******/

.infinite-scroll-wrapper {
	width: 100%;
	overflow-x: hidden;
}

.infinite-scroll-container {
	display: flex;
	width: 125rem;
	animation: infinite-scroll 20s linear infinite;
}

.infinite-scroll-item {
	white-space: nowrap;
}

@-webkit-keyframes infinite-scroll {
	from {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}

	to {
		-webkit-transform: translate3d(-50%, 0, 0);
		transform: translate3d(-50%, 0, 0);
	}
}

@keyframes infinite-scroll {
	from {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}

	to {
		-webkit-transform: translate3d(-50%, 0, 0);
		transform: translate3d(-50%, 0, 0);
	}
}

/******/
/*** DELAYS ***/
/******/

.transition-delay-50 {
	--animation-delay: 50ms;
	animation-delay: 50ms;
	transition-delay: 50ms;
}

.transition-delay-100 {
	--animation-delay: 100ms;
	animation-delay: 100ms;
	transition-delay: 100ms;
}

.transition-delay-150 {
	--animation-delay: 150ms;
	animation-delay: 150ms;
	transition-delay: 150ms;
}

.transition-delay-200 {
	--animation-delay: 200ms;
	animation-delay: 200ms;
	transition-delay: 200ms;
}

.transition-delay-250 {
	--animation-delay: 250ms;
	animation-delay: 250ms;
	transition-delay: 250ms;
}

.transition-delay-300 {
	--animation-delay: 300ms;
	animation-delay: 300ms;
	transition-delay: 300ms;
}

.transition-delay-350 {
	--animation-delay: 350ms;
	animation-delay: 350ms;
	transition-delay: 350ms;
}

.transition-delay-400 {
	--animation-delay: 400ms;
	animation-delay: 400ms;
	transition-delay: 400ms;
}

.transition-delay-450 {
	--animation-delay: 450ms;
	animation-delay: 450ms;
	transition-delay: 450ms;
}

.transition-delay-500 {
	--animation-delay: 500ms;
	animation-delay: 500ms;
	transition-delay: 500ms;
}

.transition-delay-550 {
	--animation-delay: 550ms;
	animation-delay: 550ms;
	transition-delay: 550ms;
}

.transition-delay-600 {
	--animation-delay: 600ms;
	animation-delay: 600ms;
	transition-delay: 600ms;
}

.transition-delay-650 {
	--animation-delay: 650ms;
	animation-delay: 650ms;
	transition-delay: 650ms;
}

.transition-delay-700 {
	--animation-delay: 700ms;
	animation-delay: 700ms;
	transition-delay: 700ms;
}

.transition-delay-750 {
	--animation-delay: 750ms;
	animation-delay: 750ms;
	transition-delay: 750ms;
}

.transition-delay-800 {
	--animation-delay: 800ms;
	animation-delay: 800ms;
	transition-delay: 800ms;
}

.transition-delay-850 {
	--animation-delay: 850ms;
	animation-delay: 850ms;
	transition-delay: 850ms;
}

.transition-delay-900 {
	--animation-delay: 900ms;
	animation-delay: 900ms;
	transition-delay: 900ms;
}

.transition-delay-950 {
	--animation-delay: 950ms;
	animation-delay: 950ms;
	transition-delay: 950ms;
}

.transition-delay-1000 {
	--animation-delay: 1000ms;
	animation-delay: 1000ms;
	transition-delay: 1000ms;
}

/******/
/*** GRID STAGGER DELAYS ***/
/******/

@media screen and (min-width: 48rem) {
	.grid-50:nth-of-type(2n+2),
	.grid-33:nth-of-type(3n+2),
	.grid-25:nth-of-type(4n+2),
	.grid-20:nth-of-type(5n+2),
	.grid-16:nth-of-type(6n+2) {
		animation-delay: 100ms;
	}

	.grid-33:nth-of-type(3n+3),
	.grid-25:nth-of-type(4n+3),
	.grid-20:nth-of-type(5n+3),
	.grid-16:nth-of-type(6n+3) {
		animation-delay: 200ms;
	}

	.grid-25:nth-of-type(4n+4),
	.grid-20:nth-of-type(5n+4),
	.grid-16:nth-of-type(6n+4) {
		animation-delay: 300ms;
	}

	.grid-20:nth-of-type(5n+5),
	.grid-16:nth-of-type(6n+5) {
		animation-delay: 400ms;
	}

	.grid-16:nth-of-type(6n+6) {
		animation-delay: 500ms;
	}
}

@media screen and (max-width: 47.9375rem) {
	.mobile-grid-50:nth-of-type(2n+2),
	.mobile-grid-33:nth-of-type(3n+2),
	.mobile-grid-25:nth-of-type(4n+2),
	.mobile-grid-20:nth-of-type(5n+2),
	.mobile-grid-16:nth-of-type(6n+2) {
		animation-delay: 100ms;
	}

	.mobile-grid-33:nth-of-type(3n+3),
	.mobile-grid-25:nth-of-type(4n+3),
	.mobile-grid-20:nth-of-type(5n+3),
	.mobile-grid-16:nth-of-type(6n+3) {
		animation-delay: 200ms;
	}

	.mobile-grid-25:nth-of-type(4n+4),
	.mobile-grid-20:nth-of-type(5n+4),
	.mobile-grid-16:nth-of-type(6n+4) {
		animation-delay: 300ms;
	}

	.mobile-grid-20:nth-of-type(5n+5),
	.mobile-grid-16:nth-of-type(6n+5) {
		animation-delay: 400ms;
	}

	.mobile-grid-16:nth-of-type(6n+6) {
		animation-delay: 500ms;
	}
}

/******/
/*** DYNAMIC STICKY SIDEBAR ***/
/******/

@media screen and (min-width: 48rem) {
	
	:root {
		--space: 2rem;
		--space-xs: calc(var(--space) / 3);
		--space-sm: calc(var(--space) / 2);
		--space-md: calc(var(--space) * 2);
	}

	.sticky-article {
		flex-basis: 0;
		flex-grow: 999;
	}

	.sticky-aside {
		--offset: var(--space);
		flex-grow: 1;
		align-self: start;
		position: sticky;
		top: var(--offset);
	}
	
	.scrolling-text-fading-image .sticky-aside {
		--offset: 0;
	}
	
}

/******/
/*** REDUCED MOTION ***/
/******/

@media (prefers-reduced-motion: reduce), print {
	.js-scroll,
	.scrolled,
	[transition-style],
	.infinite-scroll-container {
		-webkit-animation-duration: 1ms !important;
		animation-duration: 1ms !important;
		transition-duration: 1ms !important;
		-webkit-animation-iteration-count: 1 !important;
		animation-iteration-count: 1 !important;
	}
}

/* Line Reveal
--------------------------------------------- */

.line-reveal-mask {
	display: block;
	overflow: hidden;
}

.line-reveal-ready .line-reveal-line {
	display: block;
	opacity: 0;
	transform: translate3d(0, 2rem, 0);
	transition:
		opacity 0.7s ease,
		transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: var(--line-reveal-delay, 0ms);
	will-change: opacity, transform;
}

.line-reveal-ready.line-reveal-visible .line-reveal-line {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

/*
 * Prevent lines from replaying while their wrapping is
 * recalculated after a viewport-width change.
 */
.line-reveal-resizing .line-reveal-line {
	transition: none !important;
}

/* ROTATE GRAPHICS */

.rotate-graphic {
	will-change: transform;
}

/* Reduced Motion
--------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	
	.line-reveal-ready .line-reveal-line {
		opacity: 1;
		transform: none;
		transition: none;
	}
	
	.rotate-graphic {
		transform: none !important;
		will-change: auto;
	}
	
}