/* ======================================================================== */
/* ! General
/* ======================================================================== */
/*
*,
*::before,
*::after {
	box-sizing: border-box;
}
*:focus {
	outline: none;
}
*/

html {
	font-size: 62.5%; /* = 10px / 62.5% of browser default of 16px */
	font-family: sans-serif;
	line-height: 1.15; /* from bootstrap */
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
	font: 1.6rem / 2.4rem ProximaNova-Regular, Helvetica, Arial, sans-serif;
	background: #ffffff;
	color: #1E2832;
}

.body2 {
	font: 1.4rem / 2.2rem ProximaNova-Regular, Helvetica, Arial, sans-serif;
}








/* ======================================================================== */
/* ! Typography
/* Font weight / font size / lineheight
/* ======================================================================== */
h1, h2, h3, h4, h5, h6, p { margin: 0 0 2rem; letter-spacing: 0; }
h4 { margin: 0 0 0.8rem; letter-spacing: 0; }
h1 { font: 300 5.6rem/6.4rem ProximaNova-Semibold, Helvetica, Arial, sans-serif; } 
h2 { font: 300 4.8rem/5.6rem ProximaNova-Regular, Helvetica, Arial, sans-serif; }
h3 { font: 300 3.0rem/3.6rem ProximaNova-Regular, Helvetica, Arial, sans-serif; }
h3 { font: 300 2.4rem/3.0rem ProximaNova-Regular, Helvetica, Arial, sans-serif; }
h4 { font: 300 2.0rem/2.4rem ProximaNova-Bold, Helvetica, Arial, sans-serif;}
h5 { font: 300 1.6rem/2.2rem ProximaNova-Regular, Helvetica, Arial, sans-serif; }
h6 { font: 300 1.4rem/2.0rem ProximaNova-Regular, Helvetica, Arial, sans-serif; }

.intro { font: 300 2.2rem/3.1rem ProximaNova-Regular, Helvetica, Arial, sans-serif; }

.strong { font-family: 'ProximaNova-Bold'; }

p.para_before_list {margin: 0 0 0.6rem;}


.small_text {	font-size: 60%;		}




/* ======================================================================== */
/* ! Links
/* ======================================================================== */

a {
	font-family: 'ProximaNova-Medium';
	color: rgba(60,148,139,1); /* green / dark */
	border-bottom: 1px solid rgba(0,0,0,0);
	-webkit-transition: 0.2s;
	-moz-transition: 0.2s;
	-ms-transition: 0.2s;
	transition: 0.2s;
	text-decoration: none;
}

a:hover {
	xtext-decoration: none;

	cursor: pointer;
	border-color: inherit
}

a.btn {
	border-radius: 0.8rem;
	background: rgba(30,40,50,1);
	color: rgba(255,255,255,1);
	box-sizing: border-box;
	padding: 10px 26px 6px;
	display: flex;
	gap: 0.8rem;
	text-decoration: none;
}

a.btn.large {
	padding: 1.2rem 5rem;
}


/* green */
a.btn:hover {
	background: rgba(60,148,139,1);
}

/* charcoal */
a.btn.secondary:hover {
	background: rgba(60,80,100,1);
}

.btn .icon {
	font-family: "InsightsIcon";
	font-size: 1.1rem;
	-webkit-font-smoothing: antialiased;
	color: #ffffff;
}
.btn .icon:before {
	content: "\e801";
}
.btn .icon.arrow:before {
    content: "\e291";	
}


.btn .icon.animate {
	width: 1.1rem;
	position: relative;
}
.btn .icon.animate:before {
	position: absolute;
	bottom: 0.2rem;
	left: 0;
	-webkit-transition: 0.2s;
	-moz-transition: 0.2s;
	-ms-transition: 0.2s;
	transition: 0.2s;
}


.btn:hover .icon.animate:before {
	bottom: 0.4rem;
	left: 0.2rem;
}


.icon.linkedIn {
	background: url(../images/icons/icon_linkedIn__white_trans.svg) no-repeat 0 0;
	background-size: auto 100%;
	background-position: 50% 50%;
	height: 2.4rem;
	width: 2.4rem;
}

.icon.linkedIn:before {
	content: "";
}




/* ======================================================================== */
/* ! Lists
/* ======================================================================== */

ul, li { 
	padding: 0; margin: 0;
}

ul { 
	list-style: disc;
	padding: 0; 
	margin: 0;
	margin-bottom: 2rem;
}

/* approach page */
ul li {
	margin-left: 1.2rem;
}

ul li p {
	margin: 0;
}
ul.no_margin {
	margin: 0;
}

/* footer */
#footer ul { 
	list-style: none;
}








/* ======================================================================== */
/* ! Nav Bar
/* ======================================================================== */

.navbar {
	height: max-content;
	width: 100%;
	position: fixed;
	z-index: 2;
	background: rgba(255,255,255,0.8); /* 80% opacity to work with the backdrop-filter on scroll */


	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.6rem 7.2rem;
	box-sizing: border-box;


	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}


/* On-scroll shadow and blur */

.navbar.shadow {
	box-shadow: 0 0 1rem rgba(0,0,0,0.2);
	backdrop-filter: blur(0.6rem); /* from manuelrocco */
}


/* Navigation */

a.logo {
	font-size: 2.8rem;
	border-bottom: none;
	text-decoration: none;
}

a.logo .name {

}

a.logo .secondary_text {
	font-family: 'ProximaNova-Light';
	color: rgba(30,40,50,0.6);
}


/* Navigation */
.navbar .nav_wrapper {
	display: flex;
	gap: 2rem;
}

a.nav_link {
	color: rgba(30,40,50,1);
	text-decoration: none;
}

a.nav_link.selected {
	color: rgba(60,148,139,1);
	border-color: inherit;
}


.logo_wrapper {
	display: flex;
	align-items: center;
	gap: 10px;
}

.headshot {
	width: 4.8rem;
	height: 4.8rem;
	border-radius: 50%;
	background: rgba(60, 148, 139, 1);
	background: url('../images/headshot/headshot.jpg') no-repeat 50% 60%;
	background-size: 120% auto;
}





/* ======================================================================== */
/* ! Scaffolding
/* ======================================================================== */

.wrapper {
	width: 100%;
	padding: 6rem 0;
	margin: 0 auto;

	display: flex;
	flex-direction: column;
}

.row {
	display: flex;
	box-sizing: border-box;

	width: -webkit-fill-available;
	margin: 0 auto;

	min-width: 1080px;
    max-width: 1480px;
}

.row.margin-bottom {
	margin-bottom: 4rem;
}





/* ======================================================================== */
/* ! Content Wrappers
/* ======================================================================== */

.content .wrapper {

}

.content .wrapper {
	padding: 6rem 0 4rem;
}

.approach_page .content .wrapper {
	padding: 8rem 0 4rem; /* increased padding with anchoring */
	padding: 4rem 0 4rem; /* reduced with including the step icon above the title */
}

/* intro / top section extra padding for nav banner */
#copy_block__intro.content .wrapper,
.top_section.content .wrapper {
	padding-top: 12rem;
}


.content.copy_section .divider {
/*	min-width: 1080px;
	max-width: 1480px;
	margin: 0 auto;*/

	border-bottom: 1px solid rgba(30,40,50,0.1);
	margin: 3rem 5% 4rem;
}


/* added for footer */
.content .wrapper.text-center,
.content .wrapper.text-center .row {
	justify-content: center;
}


/* for project details */
.content.project_details .wrapper {
	padding-top: 4rem;
	padding-bottom: 8rem;
}








/* ======================================================================== */
/* ! Copy blocks
/* ======================================================================== */


/* ======================================================================== */
/* ! Text Blocks

/* 

CSS % flex
1480px / 100 x 5% = 74px (Gap)
1480px / 100 x 33% = 488.4px (Column)

Actual width:
444 + 444 + 444 = 1332
1480 - 1332 = 148 (148 / 2 = 74)

*/
/* ======================================================================== */



/* CONTENT SIZE THE NON-PARALLAX BANNERS */
.content {
	background:#fff;
	padding:0em !important;

	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}


.copy_section {
	xbox-shadow: 0 0 1rem 0.4rem rgba(30,40,50,0.1); 
	/* having issues when testing with blocks of shadow in white area */
	/* X Y Blur Spread */
}

.copy_block {

	display: flex;
	column-gap: 5%;
	text-align: left;
}

.copy_block.display_rows {
	flex-direction: column; /* stacked */
}

.copy_block.display_columns {
	flex-direction: row;	/* beside */
	width: -webkit-fill-available;
}

/* default */
.copy_block .column {
	flex: 33%;
}

.copy_block.display_columns.columns_5 .column {
	flex: 0 0 16%;	
}

.copy_block.display_columns.columns_4 .column {
	flex: 0 0 21.25%;
}

.copy_block.display_columns.columns_3 .column {
	flex: 0 0 29%;	
}




/* ============= SECTION TITLE ============= */

.row.section_title {
	margin-bottom: 2rem;
}


.section_title .title_wrapper {
	display: flex;
	align-items: center;
	font-size: 2.4rem;
	font-family: 'ProximaNova-Semibold';
	font-family: 'ProximaNova-Bold';
	margin-bottom: 3rem;
	gap: 0.8rem; /* gap used for line at the end */

	/* for positioning under the text */
	position: relative;
	margin-bottom: 4rem;
}

.section_title .title_wrapper .line {
	width: 2rem;
}

.section_title .title_wrapper .line:after {
	content: "";
	width: -webkit-fill-available;
	height: 1px;
	display: block;
	background: rgb(30, 40, 50); /* text primary */


	/* V2 - smaller (not full width) + colour (to distinguish from underline) */
	background: rgb(60, 148, 139); /* green */
	height: 2px;
	width: 3rem;
}

/* for positioning under the text */
.section_title .title_wrapper .line {
	position: absolute;
	bottom: 0;
	left: 0;


	bottom: -0.8rem;
	width: 4rem;
	/* full width */
	width: -webkit-fill-available;


	/* V2 ticker and NOT looking like underline */
	bottom: -1.6rem;
}



/* Page title on sub pages */
.section_title .title_wrapper.page_title {
	font-size: 5.6rem;
	line-height: 5.6rem;
}


/* Project title on project detail sections */
.section_title .title_wrapper.project_title  { 
	font-size: 2.8rem;
	line-height: 3.6rem;
	margin-bottom: 5rem;
}




/* ============= FEATURED TITLE ============= */

.header_wrapper.featured {
	margin-bottom: 2rem;

}


.header_wrapper.featured h5,
.header_wrapper.featured h6 {
	text-transform: uppercase;
	letter-spacing: 2px;
}








/* ======================================================================== */
/* ! Impact stats
/* ======================================================================== */

#impact.wrapper .column.stats {

}

#impact.wrapper .stat_number {
	font-size: 4.8rem;
	line-height: 4.4rem;


	font-size: 5.6rem;
	line-height: 5.2rem;
	font-family: 'ProximaNova-Semibold';
}


#impact.wrapper .stat_label {
	font: 300 1.8rem/2.2rem ProximaNova-Regular, Helvetica, Arial, sans-serif;
}









/* ======================================================================== */
/* ! Icons above copy blocks titles
/* ======================================================================== */

.copy__icon_wrapper {
	height: fit-content;
	margin-bottom: 1.2rem;
	display: flex;
}


.copy__icon_wrapper .icon {
	height: 4rem;
	font-family: "InsightsIcon";
	font-size: 4rem;
	line-height: normal;
	-webkit-font-smoothing: antialiased;
	color: rgba(30,40,50);
}
.copy__icon_wrapper .icon:before {
	content: "\e820";
}
.copy__icon_wrapper .icon.zero_to_one:before {
	content: "\e820";	
}
.copy__icon_wrapper .icon.experience:before {
	content: "\e821";	
}
.copy__icon_wrapper .icon.my_approach:before {
	content: "\e822";	
}
.copy__icon_wrapper .icon.insights_driven:before {
	content: "\e823";	
}

.copy__icon_wrapper .icon.outcomes:before {
	content: "\e824";	
}
.copy__icon_wrapper .icon.learning:before {
	content: "\e825";	
}
.copy__icon_wrapper .icon.less_is_more:before {
	content: "\e826";	
}

.copy__icon_wrapper .icon.vision:before {
	content: "\e828";	
}
.copy__icon_wrapper .icon.empathy:before {
	content: "\e829";	
}
.copy__icon_wrapper .icon.growth:before {
	content: "\e830";	
}






/* ======================================================================== */
/* ! BACKGROUNDS
/* ======================================================================== */

.pattern {
	background: url('../images/heros/noise_100x100.png') repeat left top;
	background-color:#e8766f;
}

.background-red {
	background-color:#e8766f;
}
.background-blue {
	background-color: #29a8c9;
}
.background-green {
	background-color: #49c8b3;
}
.background-green-dark {
	background-color: #3c948b;
}


.background-orange {
	background-color: #f8bc5e;
}
.background-grey {
	background-color: #f6f8f9;
}
.background-grey-icon-light {
	background-color: #bbcbd3;
}
.background-grey-icon-dark {
	background-color: #a3afb2;
}
.background-white {
	background-color: #ffffff;
}









/* ======================================================================== */
/* ! Footer
/* ======================================================================== */

#footer {
	height: 50%;
}

#footer .wrapper {
	padding: 6rem 0 2rem 0;
}

.text-center {
	text-align: center;
}

#footer, #footer a {
	color: #ffffff;
	text-decoration: none;
}

.footer-contacts {
	display: inline-block;
	margin: 2rem 0 9rem 0;
}

.footer-icons a {
	height: 3rem;
	width: 3rem;
	display: inline-block;
	margin: 3rem 0 1rem 0;
}
/*
.footer-icons a:hover {
background: rgba(255, 255, 255, 0.5);
transition: 0.4s ease-in-out;
}
*/

.icon-linkedin {
	background: url('../images/icons/icon_linkedin.svg') no-repeat 0 0;
	background-color: rgba(255, 255, 255, 0.2);
	background-size: 3rem;
	background-position: 50% 50%;
}
.icon-linkedin:hover {
	background: url('../images/icons/icon_linkedin.svg') no-repeat 0 0;
	background-color: rgba(255, 255, 255, 0.4);
	transition: 0.2s linear;
}

#footer p {
	margin-bottom: 0;
}





/* ======================================================================== */
/* ! TOGGLE SWITCH 
	-	used in approach page
		-	styling from AM
/* ======================================================================== */


/* ======================================================================== */
/* ! TOGGLE SWITCH
	> MOVED FROM SS_WorkflowUI.css to use in IE for top winners / audience size
/* ======================================================================== */


.toggle_switch_placement {
	width: 90%;
	display: flex;
	justify-content: flex-end;
	margin: 0 auto;
	margin-bottom: 2rem;
}


/* -------------- TOGGLE BUTTON -------------- */
.toggle_switch_wrapper {

	font-size: 1.6rem;

	width: fit-content;

	/* make pipe border instead of full height - adjust child paddings to align */
	height: calc(4.8rem - 1.6rem);
	top: 0.8rem;
	padding: 0.7rem 1rem;

	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.toggle_switch_wrapper .label {
	margin: 0.3rem 0.6rem;
}

.toggle_switch {
	width: 3.2rem;
	height: 2rem;
	background: rgba(70,80,90,0.4);
	border-radius: 1rem;

	cursor: pointer;
	display: flex;
	position: relative;
}

.toggle_switch .selection_area {
	xborder-radius: 50%;
	height: 2rem;
	width: 1.6rem;
	xbackground: rgba(70,80,90,0.4);
}

.toggle_switch .toggle_slider {
	border-radius: 50%;
	height: 1.4rem;
	width: 1.4rem;
	background: rgba(255,255,255,1);
	position: absolute;
	top: 0.3rem;
	left: 0.3rem;	
	z-index: 1;

	-webkit-transition: all 0.1s ease-in-out;
	-moz-transition: all 0.1s ease-in-out;
	-ms-transition: all 0.1s ease-in-out;
	-o-transition: all 0.1s ease-in-out;
	transition: all 0.1s ease-in-out;
}

.toggle_switch.left_selected .toggle_slider {
	xleft: 0.3rem;
}
.toggle_switch.right_selected .toggle_slider {
	left: 1.5rem;
}
.toggle_switch.left_selected {
	background: rgba(15,7,42,1); /* IHQ text primary */
	background: rgba(85,67,120,1); /* IHQ fig */

}
.toggle_switch.right_selected {
	background: rgba(15,7,42,1); /* IHQ text primary */
	background: rgba(85,67,120,1); /* IHQ fig */
}