:root{
	--header-height: 96px;
	--header-font-size: 20px;
	--header-padding: 15px;
	--header-margin: calc((var(--header-height) - (var(--header-font-size) + (var(--header-padding) * 2))) / 2);
	--header-image-height: 45px;
	--header-image-margin: calc((var(--header-height) - var(--header-image-height)) / 2)
}
.header{
	/* 80px hoog eerst */
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: var(--header-height);
	z-index: 20;
	background-color: transparent;
	font-size: var(--header-font-size);
	transition: 0.1s;
	line-height: 1;
}
.top-header-container{
	padding: 0 20px;
}
.top-menu-logo
{
	position: absolute;
	/* left: 40px; */
	/* top: 20px; */
	top: var(--header-image-margin);
	height: var(--header-image-height);
	transition: 0.1s;
}
.scrolled .top-menu-logo{
	top: var(--header-image-margin);
}



.top-menu-logo img
{
	/* width: 200px; */
	width: 171px;
	height: var(--header-image-height);
}


#nav-calculator{
	position: relative;
	margin-top: var(--header-margin);
	margin-bottom: var(--header-margin);
	display: inline-block;
}
#nav-calculator a{
	line-height: 1;
	display: inline-block;
	border-radius: 2px;
	padding: var(--header-padding);
	font-size: var(--header-font-size);
	background-color: #5719B4;
	color: #fff;
	text-decoration: none;
}
#nav-calculator a:hover{
	background-color: #000;
}
/* .blue-overlay{
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: #00F;
	z-index: 11;
	opacity: 0.5;
	display: none;
}
.blue-overlay-hover{
	position: relative;
	z-index: 12;
}
.blue-overlay-hover:hover + .blue-overlay{
	display: block;
} */
.top-menu-container
{
	margin-right: 20px;
}
.top-menu-container ul
{
	font-weight: 400;
	margin-top: var(--header-margin);
	margin-bottom: var(--header-margin);
}
.top-menu-container ul li
{
	float: left;
	list-style-type: none;
	margin-right: 20px;
}
.top-menu-container ul li a
{
  text-decoration: none;
  display: inline-block;
  padding: var(--header-padding) 5px;
  /*
  color:#232323;
  */
  color:#000;
}
.top-menu-container ul .current-menu-item a{
	font-weight: 700;
}
.scrolled .top-menu-container ul .current-menu-item a{
	color: #FF0033;
}

.top-menu-container ul li a:hover
{
  text-decoration: underline;
}

/*
================================================================================
PLECTRUM
================================================================================
*/
.plectrum-container{
	padding: 0 20px;
	position: absolute;
	left: 200px;
	left: calc((100% - 1280px) / 2);
}
.plectrum
{
  position: relative;
  top: -1px;
  width: 171px;
/* height: 145px;
  background-image: url('../images/logo-backdrop.svg'); */
  height: 157px;
  /* background-image: url('../images/logo-backdrop2.svg'); */
  background-image: url('../images/logo-backdrop-eee.svg');
  background-repeat: no-repeat;
  z-index: 9;
  /*
  find out ratio if 640 = 1 what does 1000 =
  */
}
@media only screen and (max-width: 1280px) {
	.plectrum-container{
		left: 0;
	}

}



@media only screen and (max-width: 1400px) {
	.expanded-header .top-menu-logo{
		top: var(--header-image-margin);
	}
	.scrolled .top-menu-logo{
		top: var(--header-image-margin);
	}
}
@media only screen and (max-width: 1000px) {
	.header{
		--header-height: 80px;
		--header-font-size: 20px;
		--header-padding: 15px;
		--header-margin: calc((var(--header-height) - (var(--header-font-size) + (var(--header-padding) * 2))) / 2);
		--header-image-height: 34px;
		--header-image-margin: calc((var(--header-height) - var(--header-image-height)) / 2)
	}
	.plectrum{
		margin-left: var(--column-padding);
		/* left: 25px; */
		width: 150px;
		/* 108,75*/
		/* height: 109px; */
		/* 117,75 */
		height: 118px;
	}
	.top-menu-logo
	{
		/* 33,75 */
		height: var(--header-image-height);
		width: 150px;
		margin-left: var(--column-padding);
	}
	.top-menu-logo img
	{
		width: 100%;
		height: 100%;
	}
}



/* RESPONSIVE */

.scrolled{
	background-color:#fff;
}
#nav-dropdown{
	display: none;
}


.admin-badge{
	position: fixed;
	right: 0;
	bottom: 0;
	z-index: 1000;
}
.admin-badge a{
	color: #fff;
	text-decoration: none;
	/* background-color: #1ED760; */
	background-color: #232323;
	padding: 15px 30px;
	font-size: 20px;
	line-height: 1;
	display: block;
	font-weight: 600;
	border-radius: 5px 0 0 0;
	/* transition: 0.5s; */
}
.admin-badge a:hover{
	/* transform: scale(1.1); */
	/* background-color: #0EC750; */
	background-color: #444444ff;
}
@media only screen and (max-width: 1200px) {
	.header{
		transition: none;
	}
	.expanded-header .top-menu-logo{
		top: var(--header-image-margin);
	}
	.scrolled .top-menu-logo{
		top: var(--header-image-margin);
	}


	/* remove calculator button */
	#nav-calculator{
		display: none;
	}

	#nav-dropdown{
		position: relative;
		height: 50px;
		margin-top: var(--header-margin);
		margin-bottom: var(--header-margin);
		margin-right: 15px;
		display: inline-block;
	}
	#nav-dropdown span{
		display: inline-block;
		font-weight: 600;
		padding: 0 30px;
		font-size: calc(var(--header-font-size) + (var(--header-padding) * 2));
		color: #fff;
		font-weight: 400;
		text-decoration: none;
	}
	/* if user scrolled make burger menu black */
	.scrolled #nav-dropdown span{
		color: #000;
	}

	/* if burger menu expaneded make menu black */
	.expanded-header #nav-dropdown span{
		color: #000;
	}
	/* if menu expanded make header white in case of transparancy */
	.expanded-header{
		background-color: #fff;
	}
	/* menu standard hidden */
	.top-menu-container ul{
		display: none;
		border-top: 1px solid #ccc;
	}
	/* show menu when expanded*/
	.top-menu-container .expand{
		display: block;
		position: absolute;
		bottom: 0;
		right: 0;
		margin: 0;
		width: 100%;
		background-color: #fff;
		height: auto;
		transform: translateY(100%);
	}
	.top-menu-container .expand li{
		float: none;
		list-style-type: none;
		border-bottom: 1px solid #ccc;
		line-height: 1;
		margin-right: 0;
	}
	.top-menu-container .expand li a{
		color: #000;
		display: block;
		padding: var(--header-padding) 25px;
	}
}