/* ======
   HEADER 
   ====== */

/* Rendered header height (unscrolled). Used to offset things pinned beneath it, e.g. the hero logo.
   Update if the header's size changes. */
:root {
	--header-height: 18rem; }

@media all and (max-width:768px) {
	:root {
		--header-height: 15.2rem; } }

@media all and (max-width:500px) {
	:root {
		--header-height: 12.8rem; } }

header#header {
	background-color: transparent;
	transition: all .6s;
	z-index: 9000;
	position: fixed; }

header#header .mc,
header#header .inner {
	padding-top: 3.3rem;
	padding-bottom: 2rem; }
	
header#header:after {
	content: '';
	background: var(--color-charcoal); 
	width: 100%;
	height: 2px;
	position: absolute;
	transition: all .3s;
	bottom: 0;
	opacity: 0; }	

/* ========
   BRANDING 
   ======== */
#header .branding {
	z-index: 190;
	position: relative;
	float: left;
	line-height: 0;
	transform: translate(0, -10px);
	transition: all .6s; }		

#header .branding a {
	display: block; }
	
#header .branding,
#header .branding svg {
	width: auto;
	transition: all .6s;
	height: 80px; }		

#header .branding svg path {
	transition: all .6s; }
	
#header .branding svg path {
	fill: var(--color-charcoal-dark); }

.scrolled #header .branding,
.scrolled #header .branding svg {
	height: 55px; }		


@media all and (max-width:768px) {
	
	#header .branding,
	#header .branding svg {
		height: 70px; }	
	
	.scrolled #header .branding,
	.scrolled #header .branding svg {
		height: 50px; }		

}


@media all and (max-width:500px) {
	
	#header .branding,
	#header .branding svg {
		height: 55px; }	
	
	.scrolled #header .branding,
	.scrolled #header .branding svg {
		height: 45px; }		

}
	
	


/* ===========
   MENU TOGGLE 
   ============ */
.header__toolbar_navigation-toggle {
	margin-left: 2.5rem; }
	   
.navigation-toggle {
	border: none;
	position: relative;
	background: transparent;
	display: block;
	width: 3.4rem;
	height: 3.4rem; }
	
.navigation-toggle span {
	background: var(--color-charcoal-dark);
	width: 100%;
	height: 5px;
	left: 0;
	position: absolute;
	transition: all .3s; }	
	
.navigation-toggle span.line-1 {		top: 0; }	
.navigation-toggle span.line-2 {		top: 12px; }	
.navigation-toggle span.line-3 {		top: 24px; }	
	
.navigation-toggle span.line-2 {		
	width: 75%; }

.navigation-toggle:hover	 span.line-2 {
	width: 100%; }


.navigation_navigation-toggle {
	padding: var(--global-padding-xl);
	padding-top: 3.3rem;
	padding-bottom: 0;
	position: absolute;
	z-index: 90; }

.navigation_navigation-toggle .navigation-toggle {
	background: no-repeat top;
	background-image: url("data:image/svg+xml,%3Csvg width='31' height='31' viewBox='0 0 31 31' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30.7899 4.06141L27.3957 0.667301L15.7285 12.3345L4.06128 0.667297L0.667166 4.06141L12.3344 15.7286L0.667114 27.3959L4.06123 30.79L15.7285 19.1228L27.3958 30.79L30.7899 27.3959L22.0925 18.6985L15.7285 19.1228L30.7899 4.06141Z' fill='%23202325'/%3E%3C/svg%3E%0A");
	background-size: 35px; }
	

   	
/* ========
   SCROLLED 
   ======== */	

.scrolled header#header {
	background-color: var(--color-gray-light); }

.scrolled #header.scrolled_header-theme__dark {
	background-color: var(--color-charcoal); }
	
.scrolled header#header:after {
	opacity: 0.1; }		

/* Header Theme Dark/Bright Scroll/Not Scrolled */
header#header.header-theme__dark .branding svg path#zebra {
	fill: var(--color-white); }

header#header.header-theme__dark .branding svg path#people {
	fill: var(--color-green); }

#header.header-theme__dark .header__toolbar_utility a,
.scrolled #header.scrolled_header-theme__dark .header__toolbar_utility a {
 	color: var(--color-white); }

#header.header-theme__dark .navigation-toggle span,
.scrolled #header.scrolled_header-theme__dark .navigation-toggle span {
	background: var(--color-white); } 	

.scrolled #header.scrolled_header-theme__bright .branding svg path#zebra,
.scrolled #header.scrolled_header-theme__bright .branding svg path#people {
	fill: var(--color-charcoal-dark); }
	
.scrolled #header.scrolled_header-theme__bright .header__toolbar_utility a {
 	color: var(--color-charcoal-dark); }	

.scrolled #header.scrolled_header-theme__bright .navigation-toggle span {
	background: var(--color-charcoal-dark); } 	


#header.header-theme__dark .header__toolbar_utility__client a {
	border-top-color: var(--color-gray); }			

.scrolled  #header.scrolled_header-theme__bright .header__toolbar_utility__client a {
	border-top-color: var(--color-charcoal-dark); }


.scrolled header#header .mc,
.scrolled header#header .inner {
		padding-bottom: 1rem; }
		
@media all and (max-width:768px) {
	
	.scrolled header#header .mc,
.scrolled header#header .inner {
		padding-bottom: 1rem; }	
	
}

@media all and (max-width:500px) {
	
	.scrolled header#header .mc {
		padding-bottom: .5rem; }	
	
}


/* Header Spacing */
.m__title .mc {
	margin-top: 133px; }
	

@media all and (max-width:768px) {
	
	.m__title .mc {
		margin-top: 105px; }

}



/* =============
   DIVIDER AFTER 
   ============= */		
.page-template-template-4-jobs-php header#header:after,
.page-template-template-6-consultants-php header#header:after {
	z-index: 9999; 
	background: var(--color-white);
	opacity: .1; }
	
	
	
	
	
	
	
	
	
/* =======
   TOOLBAR 
   ======= */

/* Navigation Buttons */      
.header__toolbar {
	float: right; }
	
.header__toolbar div {
	float: left; }	

.header__toolbar_utility	 {
	transition: all .6s; }
		
.header__toolbar_utility	 a {
	display: inline-block;
	width: 15.4rem;
	font-weight: 600;
	text-align: center;
	border-top: 5px solid var(--color-gray);
	margin-right: 1rem; 
	color: var(--color-charcoal-dark);
	padding-top: .8rem;
	transition: all .6s;
	position: relative; }

.header__toolbar_utility__client a {
	border-top-color: var(--color-charcoal); }

.header__toolbar_utility__candidate a {
	border-top-color: var(--color-green); }



@media all and (max-width:768px) {
	
	header#header .mc,
	header#header .inner {
		padding: 2.5rem 1.5rem 1rem; }
	
	.header__toolbar_utility	 {
		display: none; }		

}


/* Overlays */
.navigation__toolbar {
	position: fixed;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: var(--width-lg);
	height: 100%;
	z-index: -1;
	display: block; }

.toolbar-open .navigation__toolbar {
	z-index: 9700; }

.navigation__toolbar .navigation__toolbar__panel {
	opacity: 0;
	z-index: 9;
	transition: all .6s;
	transform: translate(0,  20px);
	position: absolute;	
	display: flex;
	text-align: center;
	right: 10rem;
	top: 90px; }

.navigation__toolbar .navigation__toolbar__candidate {
	background: var(--color-green); }

.navigation__toolbar__candidate .navigation__toolbar__option:first-of-type {
	background: rgba(255,255,255,.2); }
	
.navigation__toolbar .navigation__toolbar__client {
	background: var(--color-charcoal); }
		
.navigation__toolbar__client .navigation__toolbar__option:first-of-type {
	background: rgba(255,255,255,.05); }


.navigation__toolbar .navigation__toolbar__candidate.active,
.navigation__toolbar .navigation__toolbar__client.active {
	opacity: 1;
	transform: translate(0, 0); }
	
		
.navigation__toolbar__option	 {
	width: calc(230px + 9rem);
	padding: 3.8rem 4.8rem; }
	
.navigation__toolbar__option	 .btn {
	width: 100%; }
		
.navigation__toolbar p.has-icon {
	padding-top: 50px;
	position: relative;
	height: 10rem; }

.navigation__toolbar .navigation__toolbar__client p {
	color: var(--color-white); }
		
.navigation__toolbar .has-icon:after {
	content: '';
	position: absolute;
	display: block;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 40px;
	height: 40px;
	z-index: 1;
	background: yellow;
	background-size: 100%; }
			
			
.navigation__toolbar__candidate .has-icon_send:after {
	background: url('../../images/icon/icon__send__charcoal-dark.svg'); }
	
.navigation__toolbar__candidate .has-icon_talk:after {
	background: url('../../images/icon/icon__talk__charcoal-dark.svg'); }	
	
.navigation__toolbar__client .has-icon_send:after {
	background: url('../../images/icon/icon__send__white.svg'); }
	
.navigation__toolbar__client .has-icon_talk:after {
	background: url('../../images/icon/icon__talk__white.svg'); }		
	
			
/* Active / Disabled */
.navigation__toolbar__panel.active {
	opacity: 1; }			

.navigation__toolbar .close	 {
	top: 2rem;
	right: 2rem;
	visibility: hidden;
	opacity: 0; }	

.header__toolbar_utility.disabled {
	opacity: .3; }

.toolbar-open .navigation__toolbar__panel { 	z-index: 9; }	
.toolbar-open .navigation__toolbar__panel.active { 	z-index: 20; }	
				
@media all and (max-width: 1000px) {
	
	.navigation__toolbar .navigation__toolbar__panel {
		right: 9rem;
		top: 140px;
		width: calc(100% - 18rem); }
	
	.navigation__toolbar__option	 {
		flex-basis: 100%; /* Change back to 50% once phone number is reactivated */ }
		
}			
			
	
			
@media all and (max-width: 768px) {
	
	.navigation__toolbar .navigation__toolbar__panel {
		right: 0;
		top: 0;
		width: 100%;
		height: 100%;
		flex-direction: column; 	}
	
	.navigation__toolbar__option	 {
		display: flex;
		width: 100%; 
		flex-wrap: wrap;
		align-content: center;
		justify-content: space-around; }
	
	.navigation__toolbar__option	 p {
		width: 100%; }	
	
	.navigation__toolbar__option	 .btn {
		width: 20rem; }	
		
	 .navigation__toolbar .close	 {
		visibility: visible;
		opacity: 1; }	
}