/*GRAY SHAPES STUFF*/
.gray-shapes-grid {	
	height: calc(var(--shape-half-size) * 3);
	position: relative;
	width: calc(var(--shape-half-size) * 8);
	max-width: 100%;
	margin: 0 auto calc(var(--shape-half-size) * -1 - 100px);
	z-index: 0;
}
.gray-shapes-grid::before {
	content: '';
	display: block;
	position: absolute;
	right: calc(50% + var(--shape-h-size) + var(--shape-h-size));
	width: 100vw;
	height: 100%;
	bottom: 0;
	background-image: url('../../images/section-outer-left-shapes.svg');
	background-position: right center;
	background-size: contain;
	opacity: 0;
	transform: translate3d(0, var(--shape-half-size), 0);
}
.gray-shapes-grid::after {
	content: '';
	display: block;
	position: absolute;
	left: calc(50% + var(--shape-h-size) + var(--shape-h-size));
	width: 100vw;
	height: 100%;
	bottom: 0;
	background-image: url('../../images/section-outer-right-shapes.svg');
	background-position: left center;
	background-size: contain;
	opacity: 0;
	transform: translate3d(0, var(--shape-half-size), 0);
}
body.loaded .in-view .gray-shapes-grid::before,
body.loaded .in-view .gray-shapes-grid::after {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	transition: opacity 1s, transform 2s;
}
	
	.gray-shapes-grid > div {
		background: #f4f4f4;
		width: var(--shape-h-size);
		height: var(--shape-h-size);
		position: absolute;
	}
	.gray-shapes-grid > div {
		opacity: 0;
		transform: translate3d(0, var(--shape-half-size), 0);
	}
	.gray-shapes-grid > div:nth-child(even) {
		transition: opacity 1s, transform 2.25s;
	}
	body.loaded .in-view .gray-shapes-grid > div {
		opacity: 1;
		transform: translate3d(0, 0, 0);
		transition: opacity 1s, transform 2s;
	}

	.gray-shape-1 {
		top: 0;
		right: calc(50% + var(--shape-h-size) + var(--shape-half-size));
	}
	.gray-shape-2 {
		top: 0;
		right: calc(50% + var(--shape-half-size));
	}
	.gray-shape-3 {
		top: 0;
		right: 50%;
	}
	.gray-shape-4 {
		top: 0;
		left: 50%;
	}
	.gray-shape-5 {
		top: 0;
		left: calc(50% + var(--shape-half-size));
	}
	.gray-shape-6 {
		top: 0;
		left: calc(50% + var(--shape-h-size));
	}
	.gray-shape-7 {
		top: var(--shape-half-size);
		right: calc(50% + var(--shape-h-size) + var(--shape-half-size));
	}
	.gray-shape-8 {
		top: var(--shape-half-size);
		right: calc(50% + var(--shape-h-size));
	}
	.gray-shape-9 {
		top: var(--shape-half-size);
		left: calc(50% + var(--shape-h-size));
	}
	.gray-shape-10 {
		top: var(--shape-half-size);
		left: calc(50% + var(--shape-h-size) + var(--shape-half-size));
	}