/*html { scroll-behavior: smooth; } */

.section-hero{ 
	width: 100%;
	padding: 180px 0 0 0;
	text-align: center;
	box-sizing: border-box;
	overflow: hidden;
}

.bg-grey{ background-color: #F2F2F5; }
.bg-lemon{ background-color: #FFFCEB; }
.bg-cream{ background-color: #FBFBF7; }
.bg-blue{ background-color: #E0F0EF; }
.bg-pink{ background-color: #FDF3F1; }

.section-hero img{
	max-width: 100%;
	margin-bottom: -6px;
}

.section-content{
	background-color: #ffffff;
	color: #232C33;
	padding-bottom: 80px; scroll-behavior: smooth;
}

.section-content div div p b{ font-weight: 700; color: #1D2934; }

/*--Archived project description--*/
.project-description{
	display: flex;
	justify-content: center;
	padding: 74px 0;
	box-sizing: border-box;
}

.project-description > div{ width: 600px; }

.project-description > div:first-of-type{ margin-right: 172px; }

.project-description > div:last-of-type > h4:last-of-type{ margin-top: 20px; }

.project-description p{
	margin: 10px 0 0 0;
	font-size: 21px;
}

.project-description > div:last-of-type > p{ margin-top: 4px; }

.project-description .btn-main{ margin-top: 30px; }

/*--New project description--*/
.project-overview{
	display: flex;
	justify-content: center;
	padding: 74px 0;
	gap: 172px;
	box-sizing: border-box;
}

.project-overview > div{ width: 600px; }

.project-overview p{
	margin: 10px 0 0 0;
	font-size: 21px;
}

#project-details > h4:last-of-type{ margin-top: 20px; }
#project-details > p{ margin-top: 4px!important; }


.project-overview .btn-group{ display: flex; flex-wrap: nowrap; gap: 12px;  }
.project-overview .btn-main{ margin-top: 30px; white-space: nowrap;  }

.img-100{
	width: 100%;
	text-align: center;
	padding: 20px 0;
	margin-bottom: 40px;
}

.img-100-pad30{
	width: 100%;
	text-align: center;
	padding: 30px 30px;
	box-sizing: border-box; font-size: 0;
}

.pad30h{ box-sizing: border-box; padding-left: 30px!important; padding-right: 30px!important; }

.img-100 img{ max-width: 100%; }
.full{ width: 100%; }
.full-padded{ width: 100%; padding: 0 80px; box-sizing: border-box; }
.max-1600{ width: 100%; max-width: 1600px!important; }
.max-1400{ width: 100%; max-width: 1400px!important; }
.max-1200{ width: 100%; max-width: 1200px!important; }
.max-1020{ width: 100%; max-width: 1020px!important; }
.max-800{ width: 100%; max-width: 800px!important; }
.max-560{ width: 100%; max-width: 560px!important; }

.radius-8{ border-radius: 8px; }
.radius-16{ border-radius: 16px; }
.radius-24{ border-radius: 24px; }
.shadow-none{ box-shadow: none!important; }
.shadow-1{ box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.06), 0px 3px 4px rgba(0, 0, 0, 0.08)!important; }
.shadow-2{ box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.02), 0px 5.6px 20px rgba(0, 0, 0, 0.045), 0px 29px 67px rgba(61, 61, 9, 0.04)!important; }
.shadow-3{ box-shadow: 0px 2px 3px rgba(61, 61, 9, 0.06), 0px 4px 16px rgba(61, 61, 9, 0.06), 0px 29px 67px rgba(61, 61, 9, 0.04)!important; }
.margin-bottom30{ margin-bottom: 30px; }

.full{ width: 100%; box-sizing: border-box; }
.img-100-pad30 .full{ box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.06), 0px 3px 4px rgba(0, 0, 0, 0.08); }

.img-two, .img-three{
	width: 100%;
	padding: 0 30px;
	box-sizing: border-box;
	display: flex;
	align-items: flex-start;
}

.img-33, .img-50, .img-d, .img-m{
	margin-right: 30px;
	box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.06), 0px 3px 4px rgba(0, 0, 0, 0.08);
}

.no-shadow{ box-shadow: none!important; }

.img-33:last-of-type, .img-50:last-of-type, .img-d:last-of-type, .img-m:last-of-type{ margin-right: 0; }

.img-33{ width: calc(33% - 15px); }

.img-50{ width: calc(50% - 15px); }

.img-d{ width: calc(73% - 15px); }

.img-m{ width: calc(27% - 15px); }

.sectionIntro{
	margin: 0 auto 60px auto;
	max-width: 710px;
}

.sectionIntro h2{
	text-align: center;
	margin-bottom: 50px;
}

.sectionIntro p{
	font-size: 18px;
	line-height: 1.45em;
	margin: 0 0 18px 0;
}

.objectives{
	margin: 0px auto;
	padding: 20px 0;
}

.objectives .label{
	
}

.split-2{
	max-width: 850px;
}

.split-3{
	max-width: 1300px;
}


.objectives > div{
	display: flex;
	justify-content: center;
	flex-wrap: nowrap; 
}

.objectives > div > div{
	margin-right: 50px;
	max-width: 400px;
	flex-grow: 1;
	vertical-align: top;
}

.objectives > div > div:last-of-type{ margin-right: 0; }

.objectives > div > div ul{ padding-left: 20px; }
.objectives > div > div ul li{ margin-bottom: 8px; }

.inlineBullet{ margin-left: 16px; }

.personas-2, .personas-3{
	display: flex;
	justify-content: center;
	padding: 0 15px;
	box-sizing: border-box;
	margin: 30px auto;
}

.personas-2 > div, .personas-3 > div{
	flex-grow: 1;
	margin: 0 15px;
	max-width: 760px;
	padding: 5% 4% 4% 4%;
	box-sizing: border-box;
	border-radius: 4px;
	background-color: #FBFBF7;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.personas-2 > div img, .personas-3 > div img{
	width: 50%;
	max-width: 296px;
	min-width: 130px;
}	

.personas-2 > div div, .personas-3 > div div{
	display: flex;
	flex-direction: column;
	align-items: center;
}

.personas-2 > div div .label, .personas-3 > div div .label{
	margin: 30px 0 12px 0;
}

.personas-2 .strikethrough, .personas-3 .strikethrough{ text-decoration: line-through; }
.personas-2 p .strikethrough, .personas-3 p .strikethrough{ color:#8C96A0; }


.personas-2 > div div h3, .personas-3 > div div h3{
	margin: 0px;
}	
	
.personas-2 > div div p, .personas-3 > div div p{
	max-width: 540px;
}

.personas-2 img, .personas-3 img{ border-radius: 999px; }

/*--quote--*/
.section-quote{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	max-width: 540px;
	margin: 100px auto 80px auto;
}

.quoteMarks{ width: 66%; }
.med-quote .quoteMarks{ width: 48%; }

.med-quote{ max-width: 740px; }

.large-quote{
	max-width: 800px!important;
	margin-top: 60px;
}

.side-quote{ max-width: 580px!important; }

.quotesPath{
	opacity: .5;
	fill: #E0F0EF!important;
}

.section-quote .quote, .section-stat .quote{
	font-size: 46px;
	line-height: 1.16em;
	color: #2D3F51;
	margin: -50px 0 24px 0;
}

.section-quote .quote b, .section-stat .quote b{ font-weight: 700; }

.med-quote .quote{ margin-top: -16%; }

.large-quote .quote{
	font-size: 42px!important;
	line-height: 1.2em!important;
	letter-spacing: -0.5px;
	margin-top: -33%;
}

.section-quote .label{
	text-align: center;
}

/*--statistic--*/
.asterisk{ z-index: 0; max-width: 300px; }

.section-stat{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	max-width: 780px;
	margin: 100px auto 80px auto;
}

/*-equal columns-*/
/*-equal columns-*/
.col-2{
	display: flex;
	flex-wrap: nowrap;
	width: 100%;
	padding: 0 30px;
	gap: 30px;
	box-sizing: border-box;
}

.col-2 > *{
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center; 
	justify-content: center;
}

.col-2 img, .col-2 video{
	width: 100%; height: auto;
}

.col-2 .section-quote{ margin: 0 auto!important; }

/*-NEW alternating side image-*/
.img-altSide{
	width: 100%;
	margin: 60px 0;
	padding: 0 30px;
	box-sizing: border-box;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 30px;
}

.img-altSide img, .img-altSide video{
	width: 54%;
}

.img-altSide > div{
	display: flex;
	flex: 1 1 0;
	justify-content: center;
	margin: 0 30px;
}
.img-altSide > div div{ max-width: 640px!important; }


/*-alternating side image-*/

.img-sideTxt{
	width: 100%;
	padding: 0 30px;
	box-sizing: border-box;
}

.img-sideTxt > div{
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	margin: 60px 0;
}

.img-sideTxt > div div{
	max-width: 600px!important;
	margin: 0 60px;
}

.img-sideTxt > div img, .img-sideTxt > div video{
	width: 62%;
	box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.06), 0px 3px 4px rgba(0, 0, 0, 0.08);
}


.img-sideTxt > div:nth-child(even) img, .img-sideTxt > div:nth-child(even) video{ order: 2; }

/*--right image--*/
.img-clip{
	width: 100%;
	padding-left: 30px;
	box-sizing: border-box;
}

.moveTop{ margin-top: -140px; }
.maxH-900{ max-height: 800px!important; }

.img-clip > div{
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	margin: 60px 0;
}

.img-clip > div .sideTxt{
	max-width: 650px;
	margin: 0 auto;
}

.img-clip > div .sideTxt h3{ margin-top: 80px; }

.img-clip > div .img-R{ 
	width: 44%;
	max-width: 1000px;
	overflow-x: hidden;
	display: flex;
	align-items: center;
}

.img-clip > div .img-R div img{
	max-height: 1000px;
}

/*--Image Slider--*/
.laptopSlider{
	position: relative;
	display: inline-flex;
	justify-content: center;
}
.laptopSlider img{  }

.imgSlider{
	position: absolute;
	top: 6.2%;
	width: 75.6%;
}

.stats{
	width: 100%;
	display: flex;
	justify-content: center;
	box-sizing: border-box;
}

.metrics-2{ gap: 150px; }
.metrics-3{ margin: 80px 0; gap: clamp(20px, 7%, 150px); }

.stats > div{
	display: flex;
	flex-direction: column;
	text-align: center;
	min-with: 200px;
}

.statNum{
	font: 250 120px Bree;
	color: #9F71E8;
}

.stats > div .label{
	color: #8C96A0;
	font-size: 17px;
	margin: -13px 0 10px 0;
	white-space: nowrap;
}

.stats > div p{
	font-size: 22px;
	margin: 0;
}

.results-sections{
	margin: 0px auto;
	padding: 20px 0;
	display: flex;
	justify-content: center;
	flex-wrap: nowrap;
	width: 100%;
	box-sizing: border-box;
}

.results-sections > div{
	margin-right: 60px;
	max-width: 560px;
	flex-grow: 1;
	vertical-align: top;
}

.results-sections > div:last-of-type{
	margin-right: 0;
}

.results-sections ul{ padding-left: 20px; }

#backToLink{
	text-align: center;
	margin-top: 60px;
}

/*----Typography----*/
.projectTitle{
	max-width: 620px;
	margin: auto;
	font: 500 51px "adelle", serif;
	letter-spacing: -1px;
	color: #253443;
}

.projectType{
	display: block;
	margin: 18px 0 60px 0;
	font: 700 18px Montserrat;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: #8C96A0;
}

.sectionNum{
	font-weight: bold;
	letter-spacing: -1px;
	margin-right: 9px;
	color: #BCE0DC;
}

.imgLabel{
	font: 15px Montserrat;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: #8C96A0;
	text-align: center;
}

.caption{
	font: 11px Montserrat;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: #8C96A0;
	text-align: center;
}

.centerParagraph{
	margin: 60px auto;
	max-width: 710px;
	font-size: 18px;
	line-height: 1.45em;
}

.p-headers{ margin: 30px auto; }
.p-headers p{ margin: 8px 0; }
.p-headers ul{ margin: 0; }

.centerContent{
	width: 100%;
	text-align: center;
}


.section-divider{
	width: 1px; height: 100px;
	background-color: #E5E5E5;
	margin: 40px auto;
}

ul{ margin: 24px 0; }
ul li{ margin-bottom: 12px; }

.checklist{ list-style: none; padding-left: 0; }

.checklist li{
	position: relative;
    padding-left: 40px;
	margin-bottom: 15px;
}

.checklist li::before{
	content: "";
	position: absolute;
    left: 0;
    top: -4.5px;
	width: 32px;
	height: 32px;
	background-size: cover; /* ensures perfect fit */
    background-repeat: no-repeat;
}

.list-check::before{ background-image: url('../images/icons/list-check.png'); }
.list-X::before{ background-image: url('../images/icons/list-X.png'); }
.list-idea::before{ background-image: url('../images/icons/list-idea.png'); }

/*------Media Queries------*/
@media (max-width: 1640px) {
	.project-description > div:first-of-type{ margin-right: 8%; }
	.project-description > div:last-of-type{ width: 33%; }
	.project-overview{ gap: 8%; }
	#project-details{ width: 33%; }
	.side-quote{ max-width: 560px!important; }
	.side-quote .quote{ font-size: 42px; }
	.side-quote .quoteMarks{ width: 50%;}
}

@media (max-width: 1470px) {
	.split-3{ margin: 0 60px; }
	.results-sections{ padding: 0 60px; }
}

@media (max-width: 1440px) {
	.project-description > div:first-of-type{ width: 45%; }
	.project-description > div:last-of-type{ width: 28%; }
	#project-problem{ width: 48%; }
	#project-details{ width: 28%; }
	#project-details > p{ font-size: 19px; }
	.personas-3{ flex-wrap: wrap; }
	.personas-3 > div{ margin-bottom: 30px; flex-direction: row;  }
	.personas-3 > div img{ width: 25%; }
	.personas-3 > div div{ width: 75%; margin-left: 30px; align-items: flex-start; }
	.side-quote{ padding: 0 4% 0 8%; }
	.side-quote .quote{ font-size: 36px; }
}

@media (max-width: 1200px) {
	.project-description > div:first-of-type{ width: 47%; }
	.project-description > div:last-of-type{ width: 30%; }
	.project-overview{ gap: 6%; }
	#project-problem{ width: 52%; }
	#project-details{ width: 32%; }
	.split-3{ width: 60%; max-width: 540px; margin: 0 auto; }
	.split-3 > div{ flex-wrap: wrap; }
	.split-3 > div > div{ max-width: 100%; margin: 0; }
	.results-sections{ flex-wrap: wrap; width: 100%;  }
	.results-sections > div{ width: 100%; margin: 0; }
	.results-sections h3{ text-align: center; }
	.img-sideTxt > div img, .img-sideTxt > div video{ width: 60%; }
	.img-sideTxt > div div{ margin: 0 40px; }
	.metrics-3{ padding: 6%; gap: 5%; margin: 0px 0!important; }
	.section-stat{ margin-top: 80px; max-width: 560px; }
	.side-quote .quote{ font-size: 36px; }
}

@media (max-width: 1070px) {
	.project-overview { flex-direction: column; padding: 74px 10%; align-items: center; }
	.project-overview > div{ width: 100%!important; max-width: 720px; }
	#project-problem > h4{ margin-top: 0; }
	#project-details > p{ font-size: 21px; }
	.col-2{ flex-direction: column; }
	.side-quote{ max-width: 580px!important; padding: 40px 0!important; }
	.side-quote .quote{ font-size: 46px; }
	.side-quote .quoteMarks{ width: 60%;}
	.img-altSide{ display: flex; flex-direction: column; padding: 0; gap: 16px;; }
	.img-altSide img, .img-altSide video{ width: 94%; order: -1; margin-top: 40px; }
	.img-altSide > div{ margin: 0; width:80%; max-width: 710px;  }
	.img-altSide > div div{ max-width: 100%!important; }
}

@media (max-width: 1000px) {
	.split-2{ margin: 0 60px; }
	.personas-2{ flex-wrap: wrap; }
	.personas-2 > div{ margin-bottom: 30px; flex-direction: row;  }
	.personas-2 > div img{ width: 25%; }
	.personas-2 > div div{ width: 75%; margin-left: 30px; align-items: flex-start; }
	.img-sideTxt > div img, .img-sideTxt > div video{ width: 52%; }
	.metrics-2{ gap: 11%; }
	.statNum{ font-size: 90px; }
	.stats > div .label{ margin-top: -10px; }
}

@media (max-width: 960px) {
	.section-hero{ padding-top: 170px; }
	.projectTitle{ font-size: 46px; }
	.project-description { flex-direction: column; padding: 74px 10%; }
	.project-description > div:first-of-type, .project-description > div:last-of-type{ width: 100%; margin-right: 0; }
	.project-description > div:first-of-type h4{ margin-top: 0; }
	.sectionIntro{ width: 80%; }
	.centerParagraph{ width: 80%; max-width: 710px; }
	.section-quote, .section-stat{ padding: 0 20px; }
}

@media (max-width: 880px) {
	.split-2{ width: 60%; max-width: 540px; margin: 0 auto; }
	.split-2 > div{ flex-wrap: wrap; }
	.split-2 > div > div{ max-width: 100%; margin: 0; }
	.img-sideTxt > div{ flex-wrap: wrap; justify-content: center; }
	.img-sideTxt > div img, .img-sideTxt > div video{ width: 90%; margin-bottom: 20px; }
	.img-sideTxt > div div{ width: 90%; max-width: 100%!important; margin: 0; }
	.img-sideTxt > div:nth-child(even) img{ order: 0; }
	.section-quote, .section-stat{ padding: 0 40px; }
	.results-sections{ width: 80%; padding: 0; }
}

@media (max-width: 700px) {
	.section-hero{ padding-top: 160px; }
	.projectTitle{ font-size: 42px; max-width: 100%; padding: 0 40px; }
	.split-2, .split-3{ width: 80%; max-width: 400px; }
	.personas-2 > div, .personas-3 > div{ flex-direction: column;  }
	.personas-2 > div img, .personas-3 > div img{ width: 33%; }
	.personas-2 > div div, .personas-3 > div div{ width: 100%; margin-left: 0px; align-items: center; }
	.img-sideTxt > div img, .img-sideTxt > div video{ width: 100%; }
	.section-stat{ margin: 60px auto; }
	/*.stats > div{ margin-right: 5%; }*/
	.stats > div .label{ font-size: 16px; margin-top: -4px; white-space: wrap; }
	.metrics-2{ padding: 20px; gap: 11%; }
	.metrics-3{ padding: 5%; gap: 5%; }
	.statNum{ font-size: 60px; }
	.stats > div p{ font-size: 20px; }
}

@media (max-width: 560px) {
	.section-quote, .section-stat{ padding: 0 30px; }
}

@media (max-width: 480px) {
	.section-hero{ padding-top: 120px; }
	.projectTitle{ font-size: 34px; }
}