/* --------------------------------
PRIMARY STYLES
-------------------------------- */
*, *::after, *::before { box-sizing: border-box; }
body { 
	font-family: sans-serif;
	font-weight: normal;
	font-optical-sizing: auto;
	line-height: 1;
	color: black;
	overflow-x: hidden;
}

h1, h2, h3, h4 {
	font-family: 'Saira', sans-serif;
	font-weight: 600;
	font-style: normal;
	line-height: 1.2;
	letter-spacing: 2px;
	margin-bottom: 1em;
	color: #0a71b3;
}
h1, h2 { letter-spacing: 3px; }
h1 { font-size: 32px; }
h2 { font-size: 28px; }
h3 { font-size: 24px; }
h4 { font-size: 16px; }
h1 span, h2 span, h3 span, h4 span { font-weight: 300; }

table { 
	width: 100%;
	margin: 2em 0;
	border-top: 2px solid rgb(255 255 255 / 10%);
}
th, td { 
	text-align: left;
	padding: .5em;
	border-bottom: 1px solid rgb(255 255 255 / 10%);
	font-family: 'Saira', sans-serif;
	font-weight: 300;
	font-size: 14px;
	line-height: 1.5;
}
th { font-weight: 600; }

ol, ul, p { 
	font-family: 'Saira', sans-serif;
	font-weight: 300;
	font-size: 14px;
	line-height: 1.5;
}

a { text-decoration: none; }
a:hover { }

b, strong { font-weight: 600; }
i, em { font-style: italic; }

/* --------------------------------
EFFECTS
-------------------------------- */
.txt-shadow { text-shadow: 1px 1px 40px black; }
.bx-shadow,
.bx-shadow-hover:hover {
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
}
.opacity-hover:hover { opacity: .5; }

/* --------------------------------
BUTTONS
-------------------------------- */
.btns { cursor: pointer; }
.btn-more {
	display: inline-block;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 2px;
	padding: 1em 2em;
	color: white !important;
	background: #0a71b3;
	text-decoration: none;
	transition: all .5s ease;
}
.btn-more:hover {
	background: #3b134c;
	padding: 1em 3em;
}
.btn-more i { transition: all .5s ease; font-size: .6em; margin-left: 1em; }

#backtotop {
	display: none;
	z-index: 999;
	position: fixed;
	bottom: 1.5em; right: 1.5em;
	width: 3em;
	height: 3em;
	line-height: 3em;
	color: white;
	text-align: center;
	background: #0a71b3;
	border-radius: 50%;
	transition: all .5s ease;
}
#backtotop:hover { background: #3b134c; }

/* -------------------------------- 
VIDEO
-------------------------------- */
.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}
.embed-container iframe,
.embed-container object,
.embed-container embed,
.embed-container video {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
}

/* --------------------------------
FORMS
-------------------------------- */
form { position: relative; width: 100%; margin-bottom: 4em; }
form h4 { margin: .5em 0 0; }
input::-webkit-input-placeholder { color: rgba(59,19,76,.4); }
input:-moz-placeholder { color: rgba(59,19,76,.4); }
textarea::-webkit-input-placeholder { color: rgba(59,19,76,.4); }
textarea:-moz-placeholder { color: rgba(59,19,76,.4); }

label {
	display: inline-block;
	line-height: 1;
	padding: 1em;
	margin-bottom: .5em;
}
textarea { height: 140px; }
textarea,
select,
.input-text,
.input-submit {
	display: inline-block;
	font-family: 'Saira', sans-serif;
	font-weight: 300;
	color: black;
	line-height: 1;
	width: 100%;
	padding: 1em;
	margin-bottom: .5em;
	outline: none;
	border: 1px solid #ccc;
}
.input-submit {
	font-weight: 600;
	border: none;
	transition: all .5s ease;
	background: #0a71b3;
	color: white;
	letter-spacing: 2px;
	padding: 1em 2em;
}
.input-submit:hover { background: #3b134c; }

/* --------------------------------
NAV
-------------------------------- */
nav { 
	display: none;
	text-align: left;
	background: #0a71b3;
	position: fixed;
	top: 0; left: 0;
	width: 100%;
	height: 100vh;
	padding: 2em;
	overflow-y: scroll;
}
nav ul { width: 100%; line-height: 1; }
nav ul li { display: block; }
nav ul li a {
	font-size: 18px;
	color: white;
	display: inline-block;
	padding: 1em;
	letter-spacing: 1px;
	transition: all .5s ease;
}
nav ul li a:hover,
nav ul li.current-menu-item > a { color: #163459; }
nav ul ul { display: none; padding: 0 1em 1em; }
nav ul li.menu-item-has-children { position: relative; }
nav ul li.menu-item-has-children > a::after {
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free";
	font-size: .6em;
	font-weight: bold;
	content: "\f107";
	margin-left: .5em;
}
nav ul li.menu-item-has-children:hover > ul { display: block; z-index: 2; }

nav ul.top { margin: 2em 0; }
nav ul.top li a { font-size: 14px; }
nav ul.top li a i { transform: rotate(8deg); margin-left: .25em; }

nav ul.main { }
nav ul.main li a { font-weight: 600; }
nav ul.main li.btn-aubergine a {
	background: #3b134c;
	color: white;
	padding: .5em 2em;
	margin: 1em;
}
nav ul.main li.btn-aubergine a:hover { background: white; color: #3b134c; }

nav.expanded { display: flex; flex-direction: column; }
nav.expanded ul.main { order: 1; }
nav.expanded ul.top  { order: 2; }

.nav-toggle {
	float: right;
	-webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  cursor: pointer;
  position: relative;
  z-index: 3;
  display: inline-block;
  height: .75rem;
  width: 2em;
}
.nav-toggle:hover .nav-toggle-bar,
.nav-toggle:hover .nav-toggle-bar::after,
.nav-toggle:hover .nav-toggle-bar::before { background: white; }

.nav-toggle .nav-toggle-bar,
.nav-toggle .nav-toggle-bar::after,
.nav-toggle .nav-toggle-bar::before {
	position: absolute;
	top: 50%;
	left: 0;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
	background: white;
	content: '';
	height: 0.2rem;
	width: 100%;
}
.nav-toggle .nav-toggle-bar { margin-top: 0; }
.nav-toggle .nav-toggle-bar::after { margin-top: 0.4rem; }
.nav-toggle .nav-toggle-bar::before { margin-top: -0.4rem; }

.nav-toggle.expanded .nav-toggle-bar { background: transparent; }
.nav-toggle.expanded .nav-toggle-bar::after,
.nav-toggle.expanded .nav-toggle-bar::before { background: white; margin-top: 0; }
.nav-toggle.expanded .nav-toggle-bar::after {
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.nav-toggle.expanded .nav-toggle-bar::before {
	-ms-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

/* --------------------------------
HEADER
-------------------------------- */
header {
	z-index: 999;
	position: sticky;
	top: 0; left: 0;
	width: 100%;
	background: #163459;
	padding: 1em 0;
}
header.active { background: rgba(22,52,89,.95); }

/* -------------------------------- 
SLIDER
-------------------------------- */
.slider { }
.slider .slide { position: relative; width: 100%; height: 100%; }
.slider img { z-index: 1; width: 100%; }

.slick-dots { top: 2em; bottom: auto; }
.slick-dots li button { background: white; }
.slick-dots li.slick-active button { background: #0a71b3; }
.slick-dots li button::before,
.slick-dots li.slick-active button::before { opacity: 0 !important; }

/* --------------------------------
ARTICLE & SECTIONS
-------------------------------- */
article { }
section { 
	position: relative;
	width: 100%;
	padding: 2em 0;
}
section p,
section ol,
section ul { margin-bottom: 2em; }
section ol { list-style: number; margin-left: 1em; }
section ul { list-style: disc; margin-left: 1em; }
section a { 
	font-weight: 600;
	letter-spacing: 1px;
	color: #0a71b3;
	transition: all .5s ease;
}
section a:hover { color: #3b134c; }
section a img { transition: all .5s ease; }
section a:hover img { transform: scale(1.1); }

.container { margin: 0 auto; position: relative; }
.inner { padding: 0 1em; }

.desktop-hide {}
.desktop-show { display: none; }

.table-align { display: table; width: 100%; height: 100%; }
.table-cell-align { display: table-cell; vertical-align: middle; }
.table-cell-align.bottom { vertical-align: bottom; }

.last { margin-bottom: 0 !important; }
.align-h { height: 100%; }
.center { text-align: center; }

.gradient { position: relative; }
.gradient::before {
	z-index: 2;
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	content: "";
	background: rgb(40,53,131);
	background: -moz-linear-gradient(0deg, rgba(40,53,131,0.5046393557422969) 40%, rgba(40,53,131,0) 100%);
	background: -webkit-linear-gradient(0deg, rgba(40,53,131,0.5046393557422969) 40%, rgba(40,53,131,0) 100%);
	background: linear-gradient(0deg, rgba(40,53,131,0.5046393557422969) 40%, rgba(40,53,131,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#283583",endColorstr="#283583",GradientType=1);
}

.spheres { 
	position: fixed;
	width: 100vw;
	height: 100vh;
}
.spheres .container { z-index: 3; position: relative; }
.spheres.sphere-blue::before {
	z-index: 2;
	position: absolute;
	top: -100px; right: 100px;
	width: 600px;
	height: 600px;
	content: "";
	background: #163459;
  background: radial-gradient(circle, rgba(10, 113, 179, 0.2) 0%, rgba(10, 113, 179, 0) 70%, rgba(255, 255, 255, 0) 100%);
	border-radius: 100%;
}
.spheres.sphere-yellow::after {
	z-index: 1;
	position: absolute;
	top: 300px; right: 500px;
	width: 300px;
	height: 300px;
	content: "";
  background: #FFFF00;
	background: radial-gradient(circle,rgba(255, 255, 0, 0.1) 0%, rgba(255, 255, 0, 0) 50%, rgba(255, 255, 255, 0) 100%);
	border-radius: 100%;
}

.wifi { display: none; }

.hero { padding: 0; overflow: hidden; }
.hero img { z-index: 1; width: 100%; }

.hero .hero-focus { 
	z-index: 10;
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
}
.hero .hero-focus h1 { color: white; margin-bottom: 0; }

.intro { 
	background: #163459 url('img/line-art.svg') no-repeat 10em center;
	background-size: 100%;
	background-blend-mode: soft-light;
	text-align: center;
}
.intro h4 { font-weight: 300; line-height: 2; color: white; }

.icons { text-align: center; }
.icons .icon {
	position: relative;
	display: block;
	background-image: url('img/iconen.svg');
	background-repeat: no-repeat;
	background-size: 300%;
	background-color: #fff;
	/*background-blend-mode: multiply;*/
	transition: background-color .5s ease;
}
.icons .icon:after {
	content: "";
  display: block;
  padding-bottom: 100%;
}
.icons .icon.nr-1 { background-position: top left; }
.icons .icon.nr-2 { background-position: top center; }
.icons .icon.nr-3 { background-position: top right; }
.icons .icon.nr-4 { background-position: bottom left; }
.icons .icon.nr-5 { background-position: bottom center; }
.icons .icon.nr-6 { background-position: bottom right; }

.icons .icon.gbso { background-image: url('img/iconen-gbso.svg'); }
.icons .icon.gbso.nr-7 { background-position: top left; }
.icons .icon.gbso.nr-8 { background-position: top center; }
.icons .icon.gbso.nr-9 { background-position: top right; }
.icons .icon.gbso.nr-10 { background-position: bottom left; }
.icons .icon.gbso.nr-11 { background-position: bottom center; }
.icons .icon.gbso.nr-12 { background-position: bottom right; }

.icons .icon:hover { background-color: #0a71b3; }
.icons p a { color: #0a71b3; }
.icons p a:hover { color: #3b134c; }

.duo-columns {}
.duo-columns .sidebar { background-color: rgba(134, 194, 235, .1); }
.duo-columns .sidebar h4 { margin-top: 1em; }
.duo-columns .sidebar p { color: #3b134c; }
.duo-columns .sidebar p span { color: #0a71b3; }
.duo-columns .sidebar p a { font-weight: 300; }

.single-column { }
.single-column h4 a { font-weight: 300; color: #0a71b3; }

.blue { background: #163459; }
.blue h2,
.blue h3,
.blue h4,
.blue p,
.blue ul,
.blue ol,
.blue a:hover,
.blue th,
.blue td { color: white; }

.vacancy {}

.square { position: relative; background: #163459; margin: 1em; }
.square.light { background: #0a71b3; }
.square:after { content: ""; display: block; padding-bottom: 100%; }
.square .inner { 
	position: absolute;
	width: 100%;
	height: 100%;
	padding: 2em 1em;
	text-align: center;
}
.square .inner * { color: white; }
.square .inner a:hover { color: #0a71b3; }

.square-more { text-align: center; }
.square-more#item-2 { background: #0a71b3; }

.priva {
  position: relative;
  padding: 0 1em;
  background: white;
  overflow: hidden;
  display: inline-block;
}
.priva a { display: inline-block; }

.tabs {}
.tabs .inner { padding: 0 .5em; }

.tabs .btn-tab { 
	position: relative;
	display: block;
	margin: .5em 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
.tabs .btn-tab:after { content: ""; display: block; padding-bottom: 100%; }
.tabs .btn-tab:before {
	content: "";
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	background-image:
	linear-gradient(0deg, 
		rgba(22, 52, 89, 0) 0%,
		rgba(22, 52, 89, 0) 30%,
		rgba(22, 52, 89, 0.8) 30%,
		rgba(22, 52, 89, 0.8) 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.tabs .btn-tab .btn-tab-inner {
	position: absolute;
	width: 100%;
	height: 100%;
	padding: 30px;
	transition: all .5s ease;
}
.tabs .btn-tab .btn-tab-inner:hover { background-color: rgba(22, 52, 89, 1); }
.tabs .btn-tab .btn-tab-inner h3 { transition: all .5s ease; }
.tabs .btn-tab .btn-tab-inner h3,
.tabs .btn-tab .btn-tab-inner h4,
.tabs .btn-tab .btn-tab-inner p { color: white; }

.tabs a.btn-tab .btn-tab-inner { background: white; }
.tabs a.btn-tab h3 { color: #0a71b3; }
.tabs a.btn-tab:hover .btn-tab-inner { background: #0a71b3; }
.tabs a.btn-tab:hover h3 { color: white; }

.tabs .btn-tab p {
	opacity: 0;
	transition: all .5s ease;
	position: relative;
	left: -30px;
	z-index: 2;
	width: calc(100% + 60px);
	padding: 30px;
}
.tabs .btn-tab:hover p { padding-top: 0; opacity: 1; background: #163459; }

#kenmerken-ecobuilding {
	display: none;
	z-index: 9;
	position: absolute;
	background: #163459;
	width: calc(100% - 1em);
	padding: 3em 2em;
}
#kenmerken-ecobuilding * { color: white; }

.tabs.steps .btn-tab .btn-tab-inner:after {
  content: "";
  position: absolute;
  bottom: 2em; right: 2em;
  width: 50px;
  height: 50px;
  background: white;
  clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
}

.steps {}
.steps .inner { padding: 0 .5em; }
.steps .step {
	position: relative;
	display: block;
	background-image: url('img/stappenplan.svg');
	background-repeat: no-repeat;
	background-size: 400%;
	transition: all .5s ease;
}
.steps .step:after {
	content: "";
  display: block;
  padding-bottom: 100%;
}
.steps .step-1 { background-position: 0 0; }
.steps .step-2 { background-position: 33.34% 0; }
.steps .step-3 { background-position: 66.67% 0; }
.steps .step-4 { background-position: 100% 0; }

.faq { text-align: left; }
.faq h2 { margin-bottom: 2em; }
.faq h3 {
	cursor: pointer;
	position: relative;
	padding-right: 2em;
}
.faq h3::after {
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free";
	font-weight: bold;
	content: "\f107";
	transition: transform .4s;
	position: absolute;
	top: 0; right: 0;
	color: rgba(255,255,255,.2);
}
.faq h3.open { }
.faq h3.open::after { transform: rotate(-180deg); }

/* --------------------------------
FOOTER
-------------------------------- */
footer {
	width: 100%;
	padding: 3em 0;
	background: #0a71b3;
	color: white;
}
footer h4 { color: white; margin-bottom: 1em; }
footer p,
footer ul { color: inherit; line-height: 2.5; margin-bottom: 2em; }
footer a { color: inherit; }
footer a:hover { color: #163459; }

footer ul li a i { 
	background: #163459;
	display: inline-block;
	height: 100%;
	border-radius: 50%;
	padding: 1em;
	font-size: 11px;
	margin-right: 1em;
	transition: all .5s ease;
}
footer ul li a:hover i { background: white; color: #163459; }

/* --------------------------------
MEDIA QUERIES
-------------------------------- */
@media screen and (min-width: 35.5em) {
	.container { width: 568px; }
}
@media screen and (min-width: 48em) {
	.container { width: 768px; }
}
@media screen and (min-width: 64em) {
	.container { width: 1024px; }

	.desktop-hide { display: none; }
	.desktop-show { display: block; }

	h1 { font-size: 50px; }
	h2 { font-size: 40px; }
	h3 { font-size: 28px; }
	h4 { font-size: 18px; }

	.input-text,
	.input-submit,
	textarea,
	th, td,
	ul, ol, p { font-size: 16px; }

	nav {
		display: block !important;
		text-align: right;
		background: transparent;
		position: relative;
		height: auto;
		padding: 0;
		overflow-y: unset;
	}
	nav ul.top { margin: 0; }
	nav ul.main { border-top: 1px solid rgba(255, 255, 255, .1); }
	nav ul.main li.btn-aubergine a:hover { background: #86c2eb; }

	nav ul li { display: inline-block; }
	nav ul li a { font-size: 16px !important; }
	nav ul li a:hover,
	nav ul > li.current-menu-item > a { color: #0a71b3; }
	nav ul ul li.current-menu-item > a { color: white; }
	nav ul ul {
		position: absolute;
		top: 100%; left: 0;
		background: #0a71b3;
		text-align: left;
		padding: 1em .5em;
		width: auto;
	}
	nav ul ul li a:hover { color: #163459; }

	section { padding: 4em 0; }

	.hero .hero-overlay {	position: absolute; }
	.hero .hero-overlay h1 { text-align: left; }
	.hero .hero-overlay h1,
	.hero .hero-overlay h4,
	.hero .hero-overlay p a { color: white; }
	.hero .hero-overlay p a:hover { color: #0a71b3; }
	.hero .hero-overlay h4,
	.hero .hero-overlay p { text-align: right; }

	.wifi {
		pointer-events: none;
		z-index: 9999;
		position: absolute;
		top: 0; right: -10%;
		width: 100%;
		height: 100%;
	}
	.wifi img { opacity: .15; }
}
@media screen and (min-width: 80em) {
	.container { width: 1200px; }
}
@media screen and (min-width: 120em) {
	.cta,
	.hero .hero-img { width: 1920px; left: calc(50% - 960px); overflow: hidden; }
}

/* IE11
@media all and (-ms-high-contrast:none) {
	*::-ms-backdrop,
	[data-aos^=fade][data-aos^=fade],
	[data-aos^=zoom][data-aos^=zoom] { opacity: 1; }
}*/