#process {}
@media (min-width: 900px) { #process { margin: 100px 0; } }
@media (max-width: 899.99px) { #process { margin: 75px 0; } }

/*------------------------------------------------------------------------*/

#process > header {}
#process > header > * {
	max-width: 650px;
	margin: 0 auto;
	
	font-weight: 500;
}
#process > header > :not(:last-child) { margin-bottom: 25px; }
#process > header > .hook {}
#process > header > .title { line-height: 100%; }
@media (min-width: 900px) {
	#process > header {
		margin-bottom: 65px;
		text-align: center;
	}
	#process > header > .hook { font-size: 20px; }
	#process > header > .title { font-size: 50px; }
}
@media (max-width: 899.99px) {
	#process > header {
		margin-bottom: 35px;
	}
	#process > header > .hook { font-size: 20px; }
	#process > header > .title { font-size: 36px; }
}

/*------------------------------------------------------------------------*/

#process > div.content-wrapper {
	display: grid; max-width: 1000px;
}
@media (min-width: 900px) {
	#process > div.content-wrapper {
		height: 725px;
		grid-template-areas:
			"steps	testimonials"
			"steps	footer";
		grid-template-columns: auto 350px;
		grid-template-rows: 1fr auto;
		column-gap: 50px;
		row-gap: 50px;
	}
}
@media (max-width: 899.99px) {
	#process > div.content-wrapper {
		grid-template-areas:
			"testimonials"
			"steps"
			"footer";
		grid-template-columns: 1fr;
		grid-auto-rows: auto;
		row-gap: 35px;
	}
}

/*------------------------------------------------------------------------*/

#process > .content-wrapper > footer { grid-area: footer; }
@media (min-width: 900px)	 { #process > .content-wrapper > footer { text-align: left; } }
@media (max-width: 899.99px) { #process > .content-wrapper > footer { text-align: center; } }

/*------------------------------------------------------------------------*/

#process > .content-wrapper > .steps { grid-area: steps; }
#process > .content-wrapper > .steps .step {
	padding: 20px;
	border-radius: 30px;
	
	cursor: pointer;
}
#process > .content-wrapper > .steps .step > * { margin: 0; }
#process > .content-wrapper > .steps .step:nth-child(4n + 1) { background-color: #FFFFFF; color: #000; }
#process > .content-wrapper > .steps .step:nth-child(4n + 2) { background-color: #E9C8D2; color: #000; }
#process > .content-wrapper > .steps .step:nth-child(4n + 3) { background-color: #D5ED99; color: #000; }
#process > .content-wrapper > .steps .step:nth-child(4n)	 { background-color: #1C3558; color: #FFF; }
#process > .content-wrapper > .steps .step > .illustration {
	overflow: hidden;
	border-radius: 15px;
}
#process > .content-wrapper > .steps .step > .bullet {
	padding: 0 15px;
	margin-bottom: 15px;
	
	border-radius: 12.5px;
	
	text-align: center;
	font-size: 13px;
	line-height: 24px;
	font-weight: 500;
}
#process > .content-wrapper > .steps .step:nth-child(4n + 1) > .bullet { background-color: #BCD5E4; color: #000; }
#process > .content-wrapper > .steps .step:nth-child(4n + 2) > .bullet { background-color: #D5ED99; color: #000; }
#process > .content-wrapper > .steps .step:nth-child(4n + 3) > .bullet { background-color: #1C3558; color: #FFF; }
#process > .content-wrapper > .steps .step:nth-child(4n) > .bullet		{ background-color: #FFFFFF; color: #000; }
#process > .content-wrapper > .steps .step > .title {
	margin-bottom: 6px;
	
	line-height: 100%;
	font-size: 20px;
	font-weight: 500;
}
#process > .content-wrapper > .steps .step > .description {
	display: -webkit-box; overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	
	line-height: 130%;
	font-size: 13px;
	font-weight: 400;
}
@media (min-width: 900px) {
	#process > .content-wrapper > .steps {
		height: calc(100% + 40px); width: calc(100% + 20px);
		margin: -20px -20px -20px 0;
		padding: 20px 20px 20px 0;
		
		--mask-image: linear-gradient(to top, transparent, #000 20px, #000 calc(100% - 20px), transparent 100%);
		
		-webkit-mask-image: var(--mask-image);
		mask-image: var(--mask-image);
		
		drop-shadow(0 0 20px rgba(0,0,0,.2))
	}
	#process > .content-wrapper > .steps .step {
		display: flex; height: 175px;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		padding-left: 175px;
		
		transition: transform .2s ease-out;
	}
	#process > .content-wrapper > .steps .step:hover,
	#process > .content-wrapper > .steps .step.active { transform: translateX(20px); }
	#process > .content-wrapper > .steps .step > * { flex: 0 0 auto; }
	#process > .content-wrapper > .steps .step > .illustration {
		position: absolute; top: 20px; left: 20px;
		height: calc(100% - 40px); width: 135px;
	}
}
@media (max-width: 899.99px) {
	#process > .content-wrapper > .steps {
		width: 100vw;
		margin: 0 -25px;
		padding: 0 25px;
	}
	#process > .content-wrapper > .steps .step {}
	#process > .content-wrapper > .steps .step > .illustration {
		width: 100%; height: calc((100vw - 90px) * .45);
		margin-bottom: 20px;
	}
	#process > .content-wrapper > .steps .step > .bullet {
		position: absolute; top: 40px; left: 40px;
	}
}

/*------------------------------------------------------------------------*/

#process > .content-wrapper > .testimonials {
	grid-area: testimonials;
	overflow: visible;
}
#process > .content-wrapper > .testimonials .testimonial {}
#process > .content-wrapper > .testimonials .testimonial:after {
	content: '“';
	position: absolute; top: 0; left: -30px;
	
	text-shadow: 0 0 20px rgba(0,0,0,.2);
	line-height: 90px;
	font-family: 'Pixelify Sans';
	font-size: 200px;
	font-weight: 500;
	color: #BCD5E4;
	
	pointer-events: none;
}
#process > .content-wrapper > .testimonials .testimonial > .avatar {
	position: relative;
	overflow: hidden;
	
	border-radius: 30px;
}
#process > .content-wrapper > .testimonials .testimonial > .content {
	margin: 0 0 25px;
	
	line-height: 130%;
	font-size: 20px;
	font-weight: 500;
}
#process > .content-wrapper > .testimonials .testimonial > .content:before { content: open-quote ' '; }
#process > .content-wrapper > .testimonials .testimonial > .content:after  { content: ' ' close-quote; }
#process > .content-wrapper > .testimonials .testimonial > .name {
	margin-bottom: 5px;
	
	font-size: 18px;
	font-weight: 600;
}
#process > .content-wrapper > .testimonials .testimonial > .role {
	font-size: 16px;
	font-weight: 500;
}
@media (min-width: 900px) {
	#process > .content-wrapper > .testimonials { width: 100%; height: 100%; }
	#process > .content-wrapper > .testimonials .testimonial > .avatar {
		height: 350px; width: 350px;
		margin-bottom: 50px;
	}
	#process > .content-wrapper > .testimonials .testimonial > .avatar > .media-element {
		position: absolute; top: 0; left: 0;
	}
}
@media (max-width: 899.99px) {
	#process > .content-wrapper > .testimonials { width: calc(100vw - 50px); }
	#process > .content-wrapper > .testimonials .testimonial > .avatar {
		height: calc(100vw - 50px); width: 100%;
		margin-bottom: 35px;
	}
}