:root {
	font-size:16px;
}

@font-face {
	font-family: 'machina';
	font-weight: 200;
	src:  	url('./assets/fonts/PPNeueMachina-InktrapThin.woff') format('woff'), 
			url('./assets/fonts/PPNeueMachina-InktrapThin.woff2') format('woff2')
}

@font-face {
	font-family: 'machina';
	font-weight: 300;
	src:  url('./assets/fonts/PPNeueMachina-InktrapLight.woff') format('woff'),
		  url('./assets/fonts/PPNeueMachina-InktrapLight.woff2') format('woff2')
}

@font-face {
	font-family: 'machina';
	font-weight: 400;
	src:  url('./assets/fonts/PPNeueMachina-InktrapRegular.woff') format('woff'),
		  url('./assets/fonts/PPNeueMachina-InktrapRegular.woff2') format('woff2')
}

@font-face {
	font-family: 'machina';
	font-weight: 500;
	src:  url('./assets/fonts/PPNeueMachina-InktrapMedium.woff') format('woff'),
		  url('./assets/fonts/PPNeueMachina-InktrapMedium.woff2') format('woff2')
}

@font-face {
	font-family: 'machina';
	font-weight: 800;
	src:  url('./assets/fonts/PPNeueMachina-InktrapUltraBold.woff') format('woff'),
	 	  url('./assets/fonts/PPNeueMachina-InktrapUltraBold.woff2') format('woff2')
}

@font-face {
	font-family: 'SpaceGrotesk';
	font-weight: 300;
	src:  	url('./assets/fonts/SpaceGrotesk-Light.woff') format('woff'), 
			url('./assets/fonts/SpaceGrotesk-Light.woff2') format('woff2')
}

@font-face {
	font-family: 'SpaceGrotesk';
	font-weight: 400;
	src:  url('./assets/fonts/SpaceGrotesk-Regular.woff') format('woff'),
		  url('./assets/fonts/SpaceGrotesk-Regular.woff2') format('woff2')
}

@font-face {
	font-family: 'SpaceGrotesk';
	font-weight: 500;
	src:  url('./assets/fonts/SpaceGrotesk-Medium.woff') format('woff'),
		  url('./assets/fonts/SpaceGrotesk-Medium.woff2') format('woff2')
}

@font-face {
	font-family: 'SpaceGrotesk';
	font-weight: 600;
	src:  url('./assets/fonts/SpaceGrotesk-SemiBold.woff') format('woff'),
		  url('./assets/fonts/SpaceGrotesk-SemiBold.woff2') format('woff2')
}

@font-face {
	font-family: 'SpaceGrotesk';
	font-weight: 700;
	src:  url('./assets/fonts/SpaceGrotesk-Bold.woff') format('woff'),
	 	  url('./assets/fonts/SpaceGrotesk-Bold.woff2') format('woff2')
}

h1, h2, h3, h4, h5, h6, .heading {
	font-family: machina, Helvetica, sans-serif;
	font-weight:400;
	color:#fff;
	text-transform:uppercase;
}
h1 > span, h2 > span, h3 > span, h4 > span, h5 > span, h6 > span, .heading > span {
	color:#FF6700;
}

.h2-small {
 font-size:1.3rem; line-height: 1.57rem;
}

h1, h2 {
	color:#fff;
	font-size:2.67rem;
}

h1 span {
	color:#FF6700;
}

p {
	font-weight:300;
	line-height:1.45;
	color:#F4EEEA;
}

p, span.title, span:not(.icon), .btn {
	font-family: SpaceGrotesk, Helvetica, sans-serif;
}

.note{
	font-family: SpaceGrotesk, Helvetica, sans-serif;
	font-weight:700;
	font-size:0.87rem; text-transform:uppercase;
}
.btn {
	font-weight:600;
	font-size:1rem;
	display:flex;
	align-items:center;
}
.btn .icon:first-child {
	margin-right:15px; 
}
.btn .icon:last-child {
	margin-left:15px; 
}

@media (min-width: 1439px) {
	.container {
		width:100%;
		max-width: 1320px;
	}
}

@media (min-width: 1200px) {
	.container {
		width:100%;
		max-width: 1200;
	}
}
img {
	width:100%;
}
.photo1{
	width:100%;
	max-width:537px;
	position: relative;
}

.arrows {
	position: absolute;
	width:60%;
	bottom:90%;
	z-index:-1;
	right:0;

}

.icon.checkmark{
	width:20px; height:20px; margin-right:25px; 
    display: block;
}
body {
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
	background:#0b0b0b;
	color:#fff;  
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
}

::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.example {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.Heading {width:100%;}

.aloneRow {
	display: flex;
	flex-wrap:wrap;
    width: calc(100% + 30px);
    margin-right: -15px;
    margin-left: -15px;
}

.question {
	width:100%;
	background:rgba(244, 238, 234,.85);
	display:flex;
	justify-content: space-between;
	padding-top:8px; 
	padding-bottom:8px;
	padding-right:30px;
	border:0;
	align-items:center;
	margin-top:15px;
}
.question .icon.checkmark {
    min-width: 26px;
    min-height: 26px;
}
.question .title {
	text-transform: uppercase;
    width: 100%;
    text-align: left;
}
.question .arrow {
	transition: all .3s ease-in-out;
	transform:rotate(90deg);
	width:18px; 

}
.question.opened .arrow {
	transform:rotate(-90deg);

}

.question.opened + .answer{
	transition: height .35s ease-in-out, opacity .2s ease-in-out .15s;
	opacity:1;
	visibility:visible;
}

.question:not(.opened) + .answer{
	/*transition is het sluiten*/
	transition: height .35s ease-in-out, opacity .15s ease-in-out; 
	height:0!important;
	opacity:0;
	visibility:hidden;
}

.answer {
	width:100%;
	background:rgba(244, 238, 234,.85);
	color:#000;
}

.answer .inner{
	margin-top:-1px;
	padding-right:30px;
	padding-top:5px;
	padding-left:50px; 
	padding-bottom:15px;
}

.row-reverse {
	flex-direction:row-reverse;
}
.top-container {
	background-color: #f1f1f1;
	padding: 30px;
	text-align: center;
}

.navLink:hover {
	color:#FF6700;
}

.talk .title {font-weight:800;}
.talk .title, .navLink {
	text-transform:uppercase; font-size:1rem; font-family:SpaceGrotesk, Arial, Helvetica, sans-serif;
}

#Header {
	padding: 10px 16px;
	background: transparent;
	color: #f1f1f1;
    display: block;
}

#Header .row .col-sm-12{
	display:flex;
    justify-content: space-between;
    width: 100%;
}
#Header .left {
	display:flex; 
}
#Header .left .logo {
	width:110px; 
}
#Header .left .navbar {
    display: flex;
    align-items: center;
}
#Header .navList, #Footer .right .navList {
	list-style-type:none;
	display:flex;
    margin: 0;
    padding: 0;
}
#Header .navLink, #Footer .right .navLink {
	padding:20px;
	color: #fff; 
	text-decoration:none;
}

#Header .navLink:hover, #Footer .right .navLink:hover {
	color:#FF6700;
}
#Header .right {
	display:flex; 
}
#Header .right .talk {}
#Header .right .talk .title{}

#spacer.vis {
	display:block;
}
#spacer {
	display:none;
}

.content {
	padding: 16px;
}

.sticky {
	position: fixed;
	top: 0;
	width: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
}

.sticky + .content {
	padding-top: 102px;
}

#Header .right {
	display:flex;
	align-items:center;
}

#Header .right nav {
	display:flex;
}
#Header .right .talk{
	margin-right:10px; 
}
nav > *:not(:last-child){
	margin-right:15px; 
}
nav.small > *:not(:last-child){
	margin-right:5px; 
}
.btn {
	padding:.72rem 2.12rem;
	color:#fff;
	text-decoration:none;
	background:#FF6700;
	text-transform:uppercase;
	border-radius:0;
}
.btn-small {
	padding: 3px 17px;
    text-transform: none;
}

.btn-small .title {
	font-weight:400;
	font-size:0.87rem;
}

.btnSecondary {
	color:#FF6700;
	background:white;
}

.btnPrimary {
	color:#fff;
	background:#FF6700;
}

.btnBlack {
	color:#fff;
	background:#1A1A1A;
}
/* .main {
	position:absolute; 
	top:calc(50% - 54px);
	top:50%;
	transform:translateY(-50%);
	width:100%;
} */
.topcontainer {
	height:100vh;
	position:relative;
}
.topcontainer > .row {
	height:100%;
}
.stickyFooter {
	position: fixed;
    bottom: 20px;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
}
#Footer .left {
	display:flex;
    align-items: center;
}

#Footer .footerLogo {
	width:60px;
}

#Footer .col-sm-3{
	align-items: center;
    display: flex;
}
.slogan{
	margin-left:25px; font-size:.75rem; font-weight:800; font-family:SpaceGrotesk, Arial, Helvetica, sans-serif;
}

#Footer .row .col-sm-12{
	display:flex;
    justify-content: flex-start;
	align-items:center;
    width: 100%;
}

#Footer .right {
	display:flex;
}

#Footer .right .navbar{ 
    width: 600px;
}

#Footer .right .navList{
	width:100%;
    justify-content: space-between;
}

#Footer .right .navLink{
	display:flex;
}
.tns-item > * {
	max-height: calc(100vh - 79px - 81px);
    height: 100%;
}

.tns-items > *:not(.Textblock) {
    justify-content: center;
    display: flex;
    flex-direction: column;
}

.Textblock {
	display:flex;
    justify-content: space-between;;
    align-items: center;
}

.Textblock > * {
	width:50%;
}

.Textblock figure img {
	width:100%;
}

.Textblock.Form {
	flex-direction:column;
    justify-content: center;
}
.Textblock.Form > .Heading {
	width:100%;
}
.Textblock.Form > .Heading h2{
	width:100%; max-width:926px;
}
.Textblock.Form .Textblock-wrapper {
	display:flex; flex-direction:row-reverse;
	justify-content: space-between;
	align-items: center;
    width: 100%;
}

.Textblock-wrapper .inner{
	padding-left: 50px;
}

.Textblock-wrapper figure {
	max-width: 660px;
    width: 100%;
	position: relative;
}

.h2-small.txt-center {text-align:center; margin-bottom:40px; }

.logoGrid .tns-item:not(.tns-slide-active) > *{
	opacity:1; 
}
.tns-item > *{
	opacity:1;
	transition: all .3s ease-in-out .5s; 
}

.tns-item:not(.tns-slide-active) > *{
	opacity:0; 
}
.tns-ovh {
    overflow: visible;
}
.absoluteImage {
	position:absolute; 
	top:-80px; left:-80px; width:100%; max-width: 270px;
}
.pl-110 {
	padding-left:4.8rem;
}

figure {
	position:relative;
}
figure figcaption {
	position:absolute; padding:25px 40px; top:0; left:0; width:100%;  

}

.checkmarkList {
	list-style-type: none;
	padding:0; margin:0; margin-top:35px;
}

.checkmarkList li {
	display:flex;
	align-items:flex-start; margin-bottom:15px;
}

.checkmarkList li .icon {
	margin-right:20px; width:20px;
    min-width: 20px;
}

.checkmarkList li .title{
	font-size:1rem; line-height:1.25;
}

.tns-liveregion {
	position: absolute;
    bottom: 0;
    right: 0;
}

.tns-nav {
	position: absolute;
    bottom: 37px;
    right: 0;
}

.tns-nav > button{
	background:#FF6700; width:22px;
	border:0; height:7px;

}
.tns-nav > .tns-nav-active ~ button{
	background:White;
}

.logoGrid .tns-controls, .logoGrid .tns-liveregion, .tns-outer > button, .logoGrid .tns-nav {
	display:none;
}

.sliderControl button{
	padding:10px;
    height: 50px;
    width: 50px;
    border: 1px solid #fff;
    color: #FF6700;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sliderControl button:disabled {
	background:transparent;
}

.sliderControl button .icon img,.sliderControl button .icon {
	display:block;
}

.sliderControl button svg {
	fill:currentColor;
}
.sliderControl .prev svg {
	transform:rotate(180deg);
}
.sliderControl .prev {
	position: absolute;
    top: calc(50% - 54px);
    transform: translateY(-50%);
	left:-100px;
}
.sliderControl .next{
	position: absolute;
    top: calc(50% - 54px);
    transform: translateY(-50%);
	right:-100px;
}


.checkmarks {
    margin-top: 3.125rem;
}

.logoGrid {
    margin-top: 3.125rem;
}

.logoGrid .logoList{
	list-style-type: none;
	display: flex;
}

.logoGrid span.logoItem {
	filter: grayscale(1);
    display: block;
	transition: all .3s ease-in-out;
	
}
.logoGrid span.logoItem:hover {
	filter: grayscale(0);
}
.logoItem img {
	height:50px; 
}

.flex{
	display: flex;
}


form .right {
	display: flex;
	flex-direction: column;
	align-items:flex-start;

}
form .half{
	width: calc(100% - 10px);
}

form .flex{
	display:flex; align-items: flex-end;
}

form .flex > *, form .half > * {
    margin-left: 10px;
	width:50%;
}
form .flex > *:first-child, form .half > *:first-child {
    margin-left: 0;
}
form input {
	margin-bottom:10px;
	width:50%;
}
form textarea {
	margin-bottom:10px;
}
#veiligheid{
	margin-bottom: 0;
}
.z-10{
	z-index: 10;
}
form > input, form > select, form > textarea {
	width:calc(calc(100% - 10px) / 2);
}
form > input.functie {
	width: 100%;
}
label {
	font-family:SpaceGrotesk, Arial, Helvetica, sans-serif;
	font-size:.87rem;
}
input, textarea, select {
	padding:5px 15px; 
	font-size:.87rem;
    border: 0;
    line-height: 1.3;
}

::placeholder {
	color: #858381;
}

.formsend{
	padding: 20px;
	border-radius: 5px;
	margin-bottom: 10px;
	color: white;
}
.formsend.success{
	background: rgba(150, 255, 150, .1);
	border: 1px solid #28a7456e;
}
.formsend.error{
	background: rgba(255, 150, 150, .1);
	border: 1px solid rgba(167, 40, 40, 0.43);
}
select {
    width: 100%;
	margin-bottom:10px
}

textarea{
	margin-top:15px;
	min-width:100%;
}

form nav {
	margin-top:20px;
	display: flex;
	justify-content: flex-end;
}

.icon svg {
	fill:currentColor;
}

.btn.btnPrimary .icon {
	color:currentColor; 
}

.btn.btnPrimary .icon svg {
	fill:currentColor;
}



@media (min-width: 1200px) {
	header#Header.container {
		max-width: 1500px;
	}
}

.Diensten {
	padding:0 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.overlay{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}

nav {
	display:Flex; 
}

.Employees {
	padding: 0 47px;
}

.block-grid {
	display: flex;
	width:100%;
	justify-content: flex-start;
    flex-wrap: wrap;
}
.block-grid{
	list-style-type: none;
	padding:0; 
	margin-left:-10px; margin-right:-10px;
	width:calc(100% + 20px);
}
.two-up > li {
	width: 33%;
}

.two-up > li > .Item{
	margin-right:10px;
	margin-left:10px;
	margin-bottom:20px;
}

.Employee.Item {
	display:flex;
	flex-direction:column;
}


.Employee.Item .inner{
	padding:16px 19px; 
	background:#FF6700;
}

.Employee.Item .title.name{
	color:#1a1a1a;
	font-size:.87rem;
}

.Employee.Item .title.function {
	color:#1a1a1a;
	font-size:.87rem;
}

.Employee figure {
	position: relative; margin:0;
	filter: grayscale(1);
}
.Employee:hover figure {
	filter: grayscale(0);
	transition:all .3s ease-in-out;
}
.Employee a:hover {
	text-decoration: none;;
	
}

.Employee figure .linkedin {
	position: absolute;
	top:11px; left:11px; width:15px; height:15px; 
}

.Team.row {
	align-items:center;
}

.Textblock.Team {
    justify-content: flex-start;
    align-items: flex-start;
}

body, html {
	background-position:center;
	background-size:cover;
	background-repeat:no-repeat;
	transition:background-image 1s ease-in-out;

}
html {
	background-image:url('./images/background2.jpg');
    overflow-x: hidden;
}
body[data-active-slider="0"]{
	background-image:url('./images/background1.jpg');

}
body[data-active-slider="1"]{
	background-image:url('./images/background-2-b.jpg');
}
body[data-active-slider="2"]{
	background-image:url('./images/background3.jpg');
}
body[data-active-slider="3"]{
	background-image:url('./images/background-2-b.jpg');
}
body[data-active-slider="4"]{
	background-image:url('./images/background4.jpg');
}
body[data-active-slider="5"]{
	background-image:url('./images/background5.jpg');
}
body[data-active-slider="6"]{
	background-image:url('./images/background2.jpg');
}

.tns-nav {
    display: flex;
    align-items: center;
}

.sliderNumber, .sliderTotal, .tns-nav > :nth-last-child(2), .tns-nav > :last-child {
	font-weight:500; font-family:SpaceGrotesk, Arial, Helvetica, sans-serif;
	margin-left:12px; margin-right:12px; 
}
.sliderNumber, .tns-nav > :nth-last-child(2) {
position:absolute; right:100%;
}
.sliderTotal, .tns-nav > :last-child {
	opacity:.4;
}

@media (max-width: 1440px) {
	h1, h2 {
		font-size:2rem;
	}
	.checkmarks {
		margin-top: 2.125rem;
	}
	.checkmarkList {
		margin-top:20px;
	}
	.Diensten .faq .Heading h2 br{display:none;}
 }
/* little desktop */
@media (max-width: 1200px) {
	h1, h2 {
		font-size:1.67rem;
	}
 }

 /* tablet */

 @media (max-width: 1024px) {

 }
@media (min-width:1025px){
	.menu-mob, .mobile-background {
		display:none;
	}
}
/* phone */

@media (max-width: 768px) {

	.menu-mob .Heading {
		margin-bottom:15%; 
	}	
	.menu-mob ul { margin-bottom:40px; }
	.menu-mob ul > li {
		margin-bottom:9%; 
	}
	.menu-mob .talk {
		margin-bottom:8%; 
	}
	.menu-mob nav {
		margin-bottom:10%; 
	}
	#Footer .col-sm-3{
		justify-content: center;
	}
	#Footer .row{
		flex-direction: column-reverse;
	}
}
@media (max-width: 1024px) {
	#Footer .right,
	#Footer .right .navbar{
		width: 100%;
	}
	body{
		overflow-x: hidden;
	}
	#Footer{
		bottom: 0px;
		padding-bottom: 10px;
		background-image: linear-gradient(transparent, black);
	}
	body::before {
		opacity:0; pointer-events: none;
		content:'';
		top:0; left:0; right:0; bottom:0; z-index:99;
		background:#1a1a1a;
		position:Absolute;
		z-index:101;

		transition:all .5s ease-in-out;
	}
	body.menu-open::before {
		opacity:.8;
	}

	.logo {
		width:101px;
	}
	#Header {
		padding-top:20px; padding-bottom:20px;
		background-image: linear-gradient(black, transparent);
	}

	:root {
		font-size:14px;
	}
	.menu-mob {
		background: #FF6700;
		display: block;
		position: fixed;
		left: 100%;
		padding:40px 32px 28px;
		color:#fff; 
		text-transform:uppercase;
		max-width: 80%;
		width:100%;
		z-index: 1000;
		top:0;
		left:100%;
		transition:all .5s ease-in-out;

	}
	.menu-mob .btn {
		display: flex;
		justify-content: center;
	}
	body.menu-open .menu-mob {
		left:20%;
	}
	.menu-mob .Heading {
		display:flex;
		justify-content:space-between;
		align-items: center;
		margin-bottom:5%; 
	}	
	.menu-mob .Heading .menuTitle{
		font-size:26px; color:#fff;
	}
	.menu-mob ul {padding:0; list-style-type:none; margin-bottom:4r0px; }
	.menu-mob ul > li a{color: white;}
	.menu-mob ul > li {
		border-bottom:1px solid white;
		display:flex; justify-content:space-between;
		margin-bottom:15px; 

	}
	.menu-mob ul .title { font-weight:800;}
	.menu-mob ul .arrow svg{fill:#fff; }
	.menu-mob .Heading .cross{
		width:19px; height:19px; 
	}

	.menu-mob .talk {
		font-weight:bold; margin-bottom:30px; 
	}

	.menu-mob .linkedin {
		width:26px; height:26px; 
	}
	.menu-mob nav {
		flex-direction:column;
		align-items:stretch; margin-bottom:20px; 
	}
	.menu-mob nav > * {
		margin-bottom:10px;    
		margin-right: 0;
		width: 100%;
	}

	#Header .right nav, #Header .right .talk {display: none;}
	#Header .right .hamburger {
		display:flex;
		flex-direction: column;
		cursor:pointer;
	}
	.hamburger {
		width:46px; height:46px; background:#FF6700;
		padding:0 10px; display:flex; justify-content:center;
	}
	.line {
		height: 3px; background:white; width:100%;
	}
	.line:not(:last-child){
		margin-bottom:4px;
	}
	#Header .right {
		justify-content: flex-end;
	}

	.mobile-hidden {
		display:none;
	}
	.container {
		padding-right: 20px;
		padding-left: 20px;
	}
	.pl-110 {
		padding-left:0;
	}
	.mobile-background {
		position:fixed;
		top:0;
		left:0;
		right:0; 
		bottom:0; 
		background-position:center;
		background-size:cover;
		background-repeat:no-repeat;
		background-image:url('./images/background1.jpg');
		transition:background-image 1s ease-in-out;
	}
	.my-slider > div > div {
		padding-bottom: 60px;
	}
	.Textblock {
		flex-direction:column;
		justify-content:flex-start;
		align-items:center;
		min-height:calc(100vh - 94px);
	}

	.Textblock > * {
		width: 100%;
	}
	.Textblock > figure {
		width:50%;
		margin-bottom:32px; 
	}
	
	h1, h2 {
		font-size:1.86rem;
	}
	.note {
		font-size:1.14rem;
	}
	nav.small {
		flex-wrap: wrap;
	}
	nav.small > * {
		margin-bottom:11px;
	}
	.Textblock.row-reverse {
		flex-direction: column-reverse;
	}

	.Textblock.row-reverse > figure, .Textblock.Vision > figure {
		width:100%;
	}

	.block-grid.two-up > li {
		width:50%;
	}

	.Employees {padding:0;}

	.Textblock.Form .Textblock-wrapper {
		padding-bottom:100px;
		flex-direction: column-reverse;
		justify-content: flex-start;
	}

	.Textblock-wrapper .inner {padding-left:0; }

	.Textblock-wrapper figure {
		max-width:unset;
	}

}

