header {
	position: fixed;
	display: flex;
	justify-content: space-between;
	align-items: center;
	top: 0;
	left: 0;
	width: 100%;
	height: var(--headerHeight);
	z-index: 10;
	padding: 0 2.78vw; /*40px*/
    transition: 
		opacity .4s cubic-bezier(.65,0,.5,1) .1s,
		background .2s cubic-bezier(.65,0,.5,1),
		backdropFilter .2s cubic-bezier(.65,0,.5,1);
}

.scrolled header,
header.header-positive {
	border-bottom: 1px solid var(--softGrey_4);	
}

.embed-video-opened header {
	z-index: 1;
}

header.has-hero {
    transition: 
		opacity .4s cubic-bezier(.65,0,.5,1) .8s,
		background .2s cubic-bezier(.65,0,.5,1),
		backdropFilter .2s cubic-bezier(.65,0,.5,1);
}

.scrolled header {
	background: rgba(246,237,241,.8);
  	backdrop-filter: blur(14px);
}

/* Logo */
header .logo {
	position: relative;
	display: inline-block;
	width: fit-content;
}

header .logo svg {
	position: relative;
	display: block;
	width: 14.09vw; /*203px*/
	height: 1.736vw; /*25px*/
	object-fit: contain;
}

header.header-positive .logo svg {
	fill: var(--black);
}

header.header-negative .logo svg {
	fill: var(--white);
}

.scrolled header.header-negative .logo svg {
	fill: var(--black);
}

/* Nav*/
header .nav-inner {
	position: relative;
	display: inline-block;
	width: fit-content;
	height: 100%;
}

header .nav-inner nav {
	height: 100%;
}

header .nav-inner .menu {
	position: relative;
	display: flex;
	width: fit-content;
	height: 100%;
	column-gap: 2.778vw; /*40px*/
	align-items: center;
}

header .nav-inner .menu li {
	position: relative;
	display: inline-flex;
	width: fit-content;
	height: 100%;
	align-items: center;
}

header .nav-inner .menu li a {
	position: relative;
	display: inline-block;
    font-family: 'Roobert-Regular', Helvetica, sans-serif;
	font-size: 1.5rem;
}

header.header-positive .nav-inner .menu li a {
	color: var(--softGrey_2);
}

header.header-positive .nav-inner .menu li a:hover,
header.header-positive .nav-inner .menu li.current-menu-item a,
.tax-project_tax header.header-positive .nav-inner .menu li.cta-projects a,
.single-project header.header-positive .nav-inner .menu li.cta-projects a {
	color: var(--black);
}

header.header-negative .nav-inner .menu li a {
	color: var(--white);
}

header.header-negative .nav-inner .menu li a:hover,
header.header-negative .nav-inner .menu li.current-menu-item a {
	color: var(--softGrey_2);
}


.scrolled header.header-negative .nav-inner .menu li a {
	color: var(--softGrey_2);
}

.scrolled header.header-negative .nav-inner .menu li a:hover,
.scrolled header.header-negative .nav-inner .menu li.current-menu-item a {
	color: var(--black);
}

header .nav-inner .menu li ul.sub-menu {
	position: absolute;
	background: var(--white);
	display: none;
	flex-flow: column;
	width: max-content;
	padding: 2.778vw; /*40px*/
	align-items: center;
	row-gap: 1.736vw; /*25px*/
	top: 4.861vw; /*70px*/
	left: 50%;
	transform: translate(-50%,0);
	border-radius: 1.388vw; /*20px*/
	z-index: 1;	
}

header .nav-inner .menu li:hover ul.sub-menu {
	display: flex;
}

header .nav-inner .menu li ul.sub-menu::after {
	content: "";
	position: absolute;
	display: block;
	width: 2.08vw; /*30px*/
	height: 1.041vw; /*15px*/
	top: 0;
	left: 50%;
	transform: translate(-50%,-100%);
	background-image: url('../../assets/svgs/sub-menu-arrow.svg');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}

header .nav-inner .menu li ul.sub-menu li a {
    font-family: 'Tobias-Light', Helvetica, sans-serif;
	font-size: 2.5rem;
	color: var(--softGrey_2);
}

header .nav-inner .menu li ul.sub-menu li a:hover {
	color: var(--black);
}

header .nav-inner .menu li.cta a {
	padding: .76vw 1.388vw .902vw; /*11px 20px 13px*/
	border-radius: 2.6vw; /*50px*/
}

header.header-positive .nav-inner .menu li.cta a {
	color: var(--white);
	background-color: var(--black);
    border: 1px solid transparent;
}

header.header-positive .nav-inner .menu li.cta a:hover {
	color: var(--black);
	background-color: var(--white);
    border: 1px solid transparent;
}

header.header-negative .nav-inner .menu li.cta a {
	color: var(--black);
	background-color: var(--white);
    border: 1px solid transparent;
}

header.header-negative .nav-inner .menu li.cta a:hover {
	color: var(--white);
	background-color: var(--black);
    border: 1px solid var(--black);
}

.scrolled header .nav-inner .menu li.cta a {
	color: var(--white);
	background-color: var(--black);
}

.scrolled header .nav-inner .menu li.cta a:hover {
	color: var(--black);
	background-color: var(--softPink_2);
    border: 1px solid transparent;
}


/* Hamburger */
header #hamburger,
header .hamburger-wrapper,
header .hamburger-bg {
	display: none;
}


@media screen and (max-width: 1440px) {
	header {
		padding: 0 40px;
	}

	.scrolled header {
		backdrop-filter: blur(14px);
	}

	/* Logo */
	header .logo svg {
		width: 203px;
		height: 25px;
	}

	/* Nav*/
	header .nav-inner .menu {
		column-gap: 40px;
	}

	header .nav-inner .menu li ul.sub-menu {
		padding: 40px;
		row-gap: 25px;
		top: 70px;
		border-radius: 20px;
	}

	header .nav-inner .menu li ul.sub-menu::after {
		width: 30px;
		height: 15px;
	}

	header .nav-inner .menu li.cta a {
		padding: 11px 20px 13px;
		border-radius: 50px;
	}
}


@media only screen and (max-width: 740px) {
	header .nav-inner {
		display: none;
	}

	header {
		justify-content: center;
		height: var(--headerHeight);
		padding: 0 3.846vw;
	}

	header .logo svg {
    	width: 45.641vw;
    	height: auto;
  	}

	header #hamburger {
		display: block;
		position: absolute;
		z-index: 100;
		left: var(--lateralMargin);
		top: 50%;
		transform: translate(0,-50%);
		width: 5.64vw; /*22px*/
		height: 2.307vw; /*9px*/
	}

	.toggleMenu span {
		position: absolute;
		top: 1.025vw; /*4px*/
	}

	.toggleMenu span:before,
	.toggleMenu span:after {
		content: '';
		position: absolute;
		display: block;
		width: 5.64vw; /*22px*/
		height: 1px;
		border-radius: 5.128vw; /*20px*/
	}
	
	.header-negative .toggleMenu span:before,
	.header-negative .toggleMenu span:after {
		background-color: var(--white);
	}
	
	.scrolled .toggleMenu span:before,
	.scrolled .toggleMenu span:after,
	.header-positive .toggleMenu span:before,
	.header-positive .toggleMenu span:after {
		background-color: var(--black);
	}

	.toggleMenu span:before {
		margin-top: -1.025vw; /*-4px*/
	}

	.toggleMenu span:after {
		margin-top: 1.025vw; /*4px*/
	}


	/* Hamburger wrapper */
	header .hamburger-bg { 
		position: fixed;
		display: block;
		width: 100vw;
		height: calc( var(--vh, 1vh) * 100 );
		top: 0;
		left: 0;
		background: var(--black);
		opacity: 0;
		z-index: 100;
		pointer-events: none !important;
		transition: 
			opacity .4s cubic-bezier(0, 0, 0.3, 1) 0s;
	}

	.menu-opened header .hamburger-bg {
		opacity: .25;
		pointer-events: all !important;
	}

	header .hamburger-wrapper {
		position: fixed;
		display: block;
		width: 76.92vw; /*300px*/
		max-width: 300px;
		height: calc( var(--vh, 1vh) * 100 );
		top: 0;
		left: 0;
		background: #F6E3EB;
		border-bottom-right-radius: 30px;
		border-top-right-radius: 30px;
		z-index: 101;
		padding: 19px var(--lateralMargin) 30px;
		transform: translate(-100%,0);
		opacity: 0;
		pointer-events: none;
		transition: 
			opacity 0s cubic-bezier(0, 0, 0.3, 1) .45s,
			transform .4s cubic-bezier(0, 0, 0.3, 1);
	}

	.menu-opened header .hamburger-wrapper {
		transform: translate(0%,0);
		opacity: 1;
		pointer-events: all;
		transition: 
			opacity 0s cubic-bezier(0, 0, 0.3, 1) 0s,
			transform .4s cubic-bezier(0, 0, 0.3, 1);
	}

	header .hamburger-wrapper .close {
		position: absolute;
		display: block;
		right: 26px;
    	top: 19px;
		height: 20px;
		width: 20px;
		background-image: url('../../assets/svgs/close.svg');
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
		cursor: pointer;
		z-index: 10;
	}

	header .hamburger-wrapper .hamburger-inner {
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
		overflow: auto;
		padding: 64px 0 0;
		
		background: #F6E3EB;
	}

	header .hamburger-wrapper .hamburger-inner nav {
		height: 100%;
	}

	header .hamburger-wrapper .hamburger-inner .menu {
		position: relative;
		display: flex;
		width: fit-content;
		height: 100%;
		width: 100%;
		row-gap: 29px; /*29px*/
		flex-flow: column;
	}

	header .hamburger-wrapper .hamburger-inner .menu li {
		position: relative;
		display: block;
		width: fit-content;
		height: fit-content;
	}

	header .hamburger-wrapper .hamburger-inner .menu li a {
		position: relative;
		display: block;
		font-family: 'Roobert-Regular', Helvetica, sans-serif;
		font-size: 40px;
		color: var(--black);
	}

	header .hamburger-wrapper .hamburger-inner .menu li .sub-menu {
		position: relative;
		display: flex;
		flex-flow: column;
		row-gap: 21px;
  		padding: 30px 0 6px 21px;
	}

	header .hamburger-wrapper .hamburger-inner .menu li .sub-menu li a {
		position: relative;
		display: block;
		font-family: 'Roobert-Regular', Helvetica, sans-serif;
		font-size: 20px;
		color: var(--black);
	}


	header .hamburger-wrapper .hamburger-inner .menu li.cta {
		position: absolute;
		display: flex;
		justify-content: center;
		width: fit-content;
		height: fit-content;
		bottom: 0;
		width: 100%;
		background-color: var(--black);
		height: 53px; /*53px*/
		padding: 15px 25px; /*15px 25px*/
		color: var(--white);
		border-radius: 50px; /*50px*/
	}

	header .hamburger-wrapper .hamburger-inner .menu li.cta a {
		color: var(--white);
		font-size: 18px;
	}
}


@media only screen and (max-width: 390px) {
	/* Hamburger wrapper */
	header .hamburger-wrapper {
		border-bottom-right-radius: 7.692vw; /*30px*/
		border-top-right-radius: 7.692vw; /*30px*/
		padding: 4.871vw var(--lateralMargin) 7.692vw; /* 19px var(--lateralMargin) 30px */
	}

	header .hamburger-wrapper .close {
		right: 6.67vw; /*26px*/
    	top: 4.871vw; /*19px*/
		height: 5.128vw; /*20px*/
		width: 5.128vw; /*20px*/
	}

	header .hamburger-wrapper .hamburger-inner {
		padding: 16.41vw 0 0; /*64px 0 0*/
	}

	header .hamburger-wrapper .hamburger-inner .menu {
		row-gap: 7.435vw; /*29px*/
	}

	header .hamburger-wrapper .hamburger-inner .menu li a {
		font-size: 4rem;
	}

	header .hamburger-wrapper .hamburger-inner .menu li .sub-menu {
		row-gap: 5.384vw;
  		padding: 7.692vw 0 1.538vw 5.384vw; /*30px 0 6px 21px*/
	}

	header .hamburger-wrapper .hamburger-inner .menu li .sub-menu li a {
		font-size: 2rem;
	}

	header .hamburger-wrapper .hamburger-inner .menu li.cta {
		height: 13.589vw; /*53px*/
		padding: 3.846vw 6.41vw; /*15px 25px*/
		border-radius: 12.82vw; /*50px*/
	}

	header .hamburger-wrapper .hamburger-inner .menu li.cta a {
		font-size: 1.8rem;
	}
}