html, body{
	font-family: Arial;
	margin: 0px;
	background-color: #F2F2F2;
}

img.Banner{
	max-width: 100%;
}

img.techning{
	width: 275px;
	padding-left: 30px;
	padding-top: 15px;
	padding-bottom: 15px;
}

/*Alle CSS met betrekking tot navigatiebalk*/

:root {
  --background: rgba(242, 242, 242, 0.93)
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
	margin: 0;
	background: #f2f2f2;
	font-weight: 400;
}

.content {
  height: 200vh;
  background-image: url(//unsplash.it/1000/1000);
  background-color: #f2f2f2;
  background-blend-mode: multiply;
  background-size: cover;
  display: grid;
  place-items: center;
}

header{
	background: var(--background)
}

header{
	text-align: center;
	position: fixed;
	width: 100%;
	z-index: 999;
	color: white;
	text-transform: uppercase;
	font-weight: bold;
}

.nav-toggle{
	display: none;
}

.nav-toggle-label{
	position: absolute;
	top: 0;
	left: 0;
	margin-left: 2em;
	height: 100%;
	display: flex;
	align-items: center;
}

.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after{
	display: block;
	background: #001467;
	height: 2px;
	width: 2em;
	border-radius: 2px;
	position: relative;
}

.nav-toggle-label span::before,
.nav-toggle-label span::after{
	content: "";
	position: absolute;
}

.nav-toggle-label span::before{
	bottom: 7px;
}

.nav-toggle-label span::after{
	top: 7px;
}

nav {
	position: absolute;
	text-align: left;
	top: 100%;
	left: 0;
	background: var(--background)
}

nav{
	display: none;
	width: 100%;
}


nav ul{
	margin: 0;
	padding: 0;
	list-style: none;
}

nav li{
	margin-bottom: 1em;
	margin-left: 2em;
}

nav a{
	color: black;
	text-decoration: none;
	font-size: 20px;
}

nav a:hover{
	color: #004ece;
}

.nav-toggle:checked ~ nav{
	display: block;
}

@media screen and (min-width: 1000px){
	.nav-toggle-label{
		display: none;
	}

	header{
		display: grid;
		grid-template-columns: 1fr auto minmax(600px, 10.7fr) 1fr;
	}

	.logo{
		grid-column: 2 / 3;
	}

	nav{
		all: unset;
		grid-column: 3 / 4;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	nav ul{
		display: flex;
	}

	nav li{
		margin-left: 3em;
		margin-bottom: 0;
	}

	nav a{
		opacity: 1;
	}
}

/*Einde CSS navigatiebalk*/

div.title{
	background: #001467;
	color: white;
	font-weight: italic;
	padding-left: 40px;
}

img.home{
	max-width: 100%;
	padding-left: 17px;
	padding-top: 15px;
	padding-right: 15px;
}

div.home{
	display: grid;
	grid-template-columns: 41% 59%;
	padding-top: 140px;
}

footer{
	width: 100%;
}

div.Referentie{
	background-color: #000F6B;
	padding: 1px 40px;
	color:	white;
	font-size: 18px;
}

div.Projectervaring{
	padding: 1px 0px 1px 40px;
	max-width: 80%;
}

.Lijst1{
	color: black;
	font-size: 18px;
}

div.opdrachtgevers{
	text-align: center;
}

img.logo1{
	padding: 0px 40px;
}
img.logo2{
	padding: 0px 40px;
}
img.logo3{
	padding: 0px 40px;
}
img.logo4{
	padding: 0px 40px;
}
img.logo5{
	padding: 0px 40px;
}
img.logo6{
	padding: 0px 40px;
}
img.logo7{
	padding: 0px 40px;
}
img.logo8{
	padding: 0px 40px;
}
img.logo9{
	padding: 0px 40px;
}
img.logo10{
	padding: 0px 40px;
}
img.logo11{
	padding: 0px 40px;
}

div.Contact{
	background-color: #000F6B;
	padding: 1px 40px;
	color:	white;
	font-size: 18px;
}

.Contact_inhoud{
	display: grid;
	grid-template-columns: 1fr 2fr;
}

img.Cees{
	padding-bottom: 15px;
	max-width: 100%;
}

div.Bedrijfsgegevens{
	padding: 1px 40px 260px 40px;
}

div.Contactgegevens{
	padding: 1px 40px;
}

.LinkedIn{
	color: black;
	font-weight: normal;
}

footer{
	background-color: #D8D8D8;
	padding: 15px 20px;
}

.Footer_Techning{
	color: black;
}

footer ul{
	text-align: center;
}

footer ul li{
	display: inline-block;
	margin: 0 5px;
}