/* Container */
.cfs-section {
	flex-flow: column;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	height: 85vh;
	padding-top: 0;
	display: flex;
	position: relative;
}

/* Background images stack */
.cfs-bg {
	z-index: 0;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	display: flex;
	position: absolute;
	inset: 0% auto auto 0%;
	overflow: hidden;
}

.cfs-bg-image {
	background-size: cover;
	width: 100%;
	height: 100%;
	position: absolute;
	opacity: 0;
	transform: scale3d(1, 1, 1);
	transform-style: preserve-3d;
	transition: opacity .5s ease;
	will-change: opacity;
}

.cfs-bg-image.is-active {
	opacity: 1;
	transform: scale3d(1.05, 1.05, 1);
	transition: transform 10s ease;
	transform-style: preserve-3d;
	will-change: transform;
}


/* Overlay for contrast */
.cfs-overlay {
	width: 100%;
	position: absolute;
	inset: auto auto 0% 0%;
	z-index: 1;
	background-image: linear-gradient(#fff, #d8d8d800 27%, #6d879412 48%, #00192526 95%, #001925);
	height: 100%;
}

/* Content */
.cfs-inner {
	z-index: 1;
	flex-flow: column;
	justify-content: space-between;
	width: 90%;
	height: 100%;
	display: flex;
	position: relative;
}

.cfs-title {
	z-index: 1;
	grid-column-gap: 2vw;
	grid-row-gap: 2vw;
	flex-flow: column;
	justify-content: space-between;
	align-items: flex-start;
	width: 100%;
	margin: 0;
	padding: 0;
	display: flex;
	position: relative;
	inset: 0% auto auto 0%;
	color: #0e2043;
	letter-spacing: -.06em;
	flex: none;
	font-family: Aboreto, sans-serif;
	font-size: 4.5vw;
	line-height: 1.2em;
}

/* Cards */
.cfs-cards {
	height: 100%;
	display: flex;
	z-index: 1;
	grid-column-gap: 0vw;
	grid-row-gap: 0vw;
	flex-flow: row;
	justify-content: flex-start;
	place-items: end stretch;
	width: 100%;
	height: 100%;
	display: flex;
	position: relative;
	inset: 0% auto auto 0%;
}

.cfs-card {
	grid-column-gap: 1vw;
	grid-row-gap: 1vw;
	flex-flow: column;
	justify-content: flex-end;
	align-items: flex-start;
	width: 25%;
	height: 100%;
	padding-bottom: 3vw;
	display: flex;
}

.cfs-card-inner {
	grid-column-gap: 1vw;
	grid-row-gap: 1vw;
	flex-flow: column;
	width: 17vw;
	height: 7vw;
	display: flex;
}

.cfs-card-divider {
	background-color: #ffffff30;
	width: 1px;
	height: 90%;
	margin-left: 2vw;
	margin-right: 2.5vw;
}

.cfs-card-divider:last-child {
	display: none;
}

.cfs-card-title {
	color: #fff;
	letter-spacing: -.06em;
	font-family: Aboreto, sans-serif;
	font-size: 1.6vw;
	line-height: 1.2em;
	max-width: 46%;
}

.cfs-card-desc {
	color: var(--dark-blue);
	letter-spacing: .03em;
	font-family: Ppneuemontreal Book, Arial, sans-serif;
	font-size: 1vw;
	line-height: 1.3em;
	z-index: 2;
	color: #fff;
	position: relative;
}

/* Responsive */
@media (max-width: 1024px) {

	.cfs-cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {

	.cfs-cards {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 479px) {
	.cfs-bg-image.is-active {
		opacity: 0;
	}

	.cfs-section {
		height: auto;
	}

	.cfs-inner {
		grid-column-gap: 10vw;
		grid-row-gap: 10vw;
		justify-content: space-between;
		align-items: center;
		width: 90%;
		height: 100%;
	}

	.cfs-overlay,
	.cfs-card-divider {
		display: none !important;
	}

	.cfs-cards {
		grid-column-gap: 2vw;
		grid-row-gap: 2vw;
		flex-flow: column;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		min-height: auto;
		padding-left: 0;
		padding-right: 0;
		display: inline-flex;
	}

	.cfs-card {
		grid-column-gap: 4vw;
		grid-row-gap: 4vw;
		background-color: #fff;
		border-radius: 10px;
		width: 100%;
		padding: 8vw;
		box-shadow: 0 4px 35.2px #0000001a;
	}

	.cfs-card-inner {
		grid-column-gap: 5vw;
		grid-row-gap: 5vw;
		width: 100%;
		height: auto;
	}

	.cfs-card-title {
		color: var(--dark-blue);
		width: 100%;
		font-size: 6vw;
		max-width: 81%;
	}

	.cfs-card-desc {
		flex: 0 auto;
		font-size: 4vw;
		color: var(--dark-blue);
		width: 66vw;
	}
}