body{
	font-family: Arial, Helvetica, sans-serif;
	font-size:15px;
	line-height:1.5;
	/* kort = font: 15px/1.5 Arial, Helvetica, sans-serif; */
	padding:0; /* binnenkant object */
	margin:0;
	/*background-color:#f4f4f4;*/
	/*background-color:#BFBFBF;*/
	background-color:white;
}
	
	/* Global */
.container{
	width:80%;
	margin:auto;
	overflow:hidden;

}
	
ul{
	margin:0;
	padding:0;
}

.center{
	display: flex;
  	justify-content: center;
  	align-items: center;
  	height: 200px;
}
a button{
	text-decoration: none;
}	
.button_1{
	height:38px;
	background:#064d24; /* groen */
	border: 2px solid #ffbb00;	
	border-radius: 15px;
	padding-left:20px;
	padding-right:20px;
	color:#ffffff; /* witte tekst */
	font-weight: bold;
	transition: 0.5s;
}
.button_1:hover {
	background-color:#448000;
	cursor:pointer;
}
.submit_button {
	height: 38px;
	border-radius: 15px;
	padding-left:15px;
	padding-right: 15px;
	margin-top: 10px;
	background: #003b95;
	color:#ffffff;
	font-weight: bold;
	font-size: medium;
	transition: 0.75s;
}
.submit_button:hover {
	background-color: #2e5796;
	cursor:pointer;
}
.back_button {
	height: 38px;
	border-radius: 15px;
	padding-left:15px;
	padding-right: 15px;
	margin-top: 10px;
	background: #003b95;
	color:#ffffff;
	font-weight: bold;
	font-size: medium;
	transition: 0.75s;
	float: right;
}
.back_button:hover {
	background-color: #2e5796;
	cursor:pointer;
}
.button_kopen {
	height:50px;
	width: 400px;
	background:#d86c3a; /* oranje */
	border:1;
	border-color:#ffbb00;
	padding-left:20px;
	padding-right:20px;
	margin-bottom:10px;
	color:#03032c; /* witte tekst */
	font-size: 20px;
	font-weight:900;
	border-radius:20px;
	transition: 0.5s;
	
	
}

.button_kopen:hover {
	background-color:#FFA500;
	cursor:pointer;
}
.button_contact {
	height:50px;
	width: 400px;
	background:#b9e56f;/* groen */
	border:1;
	border-color:#77e256;
	padding-left:20px;
	padding-right:20px;
	margin-bottom:10px;
	color:#152b1b; /* witte tekst */
	font-size: 20px;
	font-weight:900;
	border-radius:20px;
	transition: 0.5s;
	
	
}

.button_contact:hover {
	background-color:#91d19f;
	cursor:pointer;
}
#kopen {
	text-align: center;
	margin-top: 10px;
}
	
.dark{
	padding:15px;
	background:#0b102c;
	color:#ffffff;
	margin-top:10px;
	margin-bottom:10px;
}
	/* Header */
header{
	/*background:#2f485e;
	background-image: linear-gradient(#2f485e, #5f7d96);*/
	background-color: #003b95;
	color:#ffffff;
	padding-top:10px;
	min-height:50px;
	border-bottom:#ffbb00 3px solid; /* oranje lijn */
	position: sticky;
	top: 0;
}
	
header a{
	color:#ffffff;
	text-decoration:none; /* geen onderlijning van de hyperlink */
	/*text-transform: uppercase;*/
	font-size:16px;
}
header h1{
	float: right;
}
	

/*header ul{ /* is naar global verplaatst 
	
	margin:0;
	padding:0;
}*/
	
		/* menu horizontaal zetten */
/*header li{
	float:left;
	display:inline;
	padding: 0 20px 0 20px; /* top right bottom left*/
/*}
<style>
       /* Specific styles */
 .language-switcher img {
		width: 30px;
		margin: 0 5px;
}
	
	/* menu links plaatsen */
.container #branding{ 
	float:left;
}
	
.container #branding h1{
	margin:0;
}
.container #tfnr{
	float:left;
	margin-top: 10px;
	margin-left: 10px;
}

.container #headertitel{
	float:right;
}
.container #headertitel h1{
	font-size: 20px;
}
/*header nav{
	float:right;
	margin-top:10px; /*nav naar beneden brengen
}
	/* einde menu horizontaal zetten*/
	
	/* oplichten gedeelte van tekst*/
header .highlight, header .current a{
	color:#ffbb00; /*#B736D6; */
	font-weight:bold;
}
header form{
	float:right;
	padding-bottom:10px;
}
header input[type="email"]{
	padding:4px;
	height:25px;
	width:250px;
	border-radius: 8px;
}
/*header a:hover{
	color:#cccccc;
	font-weight:bold;
}*/
	/*topnav*/
.topnav {
  overflow: hidden;
  background-color: #333;
 
}

.topnav a {
	float: left;
	display: block;
	color: #f2f2f2;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	font-size: 17px;
}

.active {
	background-color: #4CAF50;
	color: white;
}

.topnav .icon {
	display: none;
}

.dropdown {
	float: left;
	overflow: hidden;
}

.dropdown .dropbtn {
	font-size: 17px;    
	border: none;
	outline: none;
	color: white;
	padding: 14px 16px;
	background-color: inherit;
	font-family: inherit;
	margin: 0;
}

.dropdown-content {
	display: none;
	position: absolute;
	background-color: #f9f9f9;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
}

.dropdown-content a {
	float: none;
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
	background-color: #555;
	color: white;
}

.dropdown-content a:hover {
	background-color: #ddd;
	color: black;
}

.dropdown:hover .dropdown-content {
  display: block;
}
/*einde topnav*/
	/* showcase (foto in bovenbalk) */
#showcase{
	min-height:150px;
	/*background:url('../images/Metabolism_Plus_Coffee_front.jpg') no-repeat ;
	background-position:50% -15px; /* horizontaal centraal en 150px naar beneden */
	background-color:#003b95;/*#5f7d96;*/
	/* filter: brightness(80%);  /* zet donkerder, maar zet ook tekst donker */
	text-align:center;
	color:#ffffff;
	border-bottom:#ffbb00 2px solid; /* oranje lijn */
	/*margin-left:15%;
	margin-right:15%;*/
}
	
#showcase h1{
	margin-top:2px;
	font-size:30px;
	margin-bottom:10px;
}
	
#showcase p{
	font-size:20px;
}

#showcase ul.no-bullets{
	list-style-type: none; /* Remove bullets */
  	padding: 0; /* Remove padding */
  	margin: 0; /* Remove margins */

}
	
	/* Nieuwsbrief */
#nieuwsbrief{
	padding:15px;
	color:#ffffff;
	background:#35424a
}
	
#nieuwsbrief h1{
	float:left;
}
	
#nieuwsbrief form{
	float:right;
	margin-top:15px;
}
	
#nieuwsbrief input[type="email"]{
	padding:4px;
	height:25px;
	width:250px;
}

#meerweten{
	padding: 10px;
	text-align: center;
}
	
	/* Boxes */
.boxes{
	margin-top:20px;
	

	/* background-color:#BFBFBF; */
}
	
.boxes .box{
	float:left;
	text-align:left; /* aangepast van center*/
	width:30%;
	padding:10px;
}
.boxes .boxLeft{
	float:left;
	width: 50%;
	text-align: center;
	padding: 10px;
}
.boxes .boxLeft{
	float:right;
	width: 50%;
	text-align: center;
	padding: 10px;
}
.boxes .box h3{
	text-align: left;
}
	
.boxes .box img{
	height:300px;
}
.boxes .box video{
	height:200px;
}
/*text op foto*/
.containerFoto {
	position: relative;
	font-family: Arial;
	}

	.text-blockFoto {
	position: absolute;
	bottom: 20px;
	right: 50%;
	top: 50%;
	background-color: yellow;
	color: blue;
	padding-left: 5px;
	padding-right: 10px;
	border-radius: 40px;
	border-color: red;
	border-style: solid;
	border-width: 3px;
	float: none;
	}
	/* einde text op foto*/
.floatLeft{
	float:left;
	margin: 10px;
}
	/* Sidebar */
aside#sidebar{
	float:right;
	width:30%;
	margin-top:10px;
}

aside#sidebar .quote input, aside#sidebar .quote textarea{
	width:90%;
	padding:5px;
}

aside#sidebar .quote textarea{
	height:200px;
}

	/* Main-col */
article#main-col{
	float:left;
	width:65%;
}

	/* werken */
ul#werken li{
	list-style: none;
	padding:20px;
	border:#cccccc solid 1 px;
	margin-bottom:5px;
	background:#e6e6e6;
}
	
footer{
	padding:20px;
	margin-top:20px;
	color:#ffffff;
	background:#003b95; /*#2f485e;*/
	background-color:#003b95;/*#2f485e;*/

	border-bottom:#ffbb00 2px solid; /* oranje lijn */
	border-top:#ffbb00 3px solid; /* oranje lijn */
	text-align: left;	
}
footer a{
	color:#ffffff;
	text-decoration:none; /* geen onderlijning van de hyperlink */	
	font-size:16px;
}
footer .box{
	float:left;
	text-align:center;
	width:30%;
	padding:10px;
}

/* Media querys Maken het responsive 768px*/
	@media(max-width: 600px){
		h1, h2, header #branding,
		header nav,
		header nav li,
		#nieuwsbrief h1,
		#nieuwsbrief form{
			float:none;
			text-align:center;
			width:100%;
		}
		img{
			
			text-align:center;
			margin-left: 25%;
			margin-right: 25%;
			/*float: none;*/
			
		}
		
		header form{
			float:none;
			padding-bottom:10px;
			text-align:center;
			margin-left: auto;
			margin-right: auto;
		}
		header form button{
			display: block;
			text-align:center;
			margin-left: auto;
			margin-right: auto;
			margin-top: 10px;
		   }
	
		header{
			padding-bottom:20px;
			margin-left: auto;
			margin-right: auto;
		}
		
		#showcase h1{
			margin-top:0px;
			font-size:20px;
			margin-bottom:10px;
		}
		.container{
			width:99%;		
			
		}
		a button{
			text-decoration: none;
		}
		.button_kopen {
			height:50px;
			width: 300px;
			background:#d86c3a; /* oranje */
			border:1;
			border-color:#ffbb00;
			padding-left:10px;
			padding-right:10px;
			margin-bottom:10px;
			color:#03032c; /* witte tekst */
			font-size: 20px;
			font-weight:900;
			border-radius:20px;
			transition: 0.5s;
			display: flex;
			text-align:center;
			margin-left: auto;
			margin-right: auto;
			display: flex;
  			justify-content: center;
  			align-items: center;  			
		}
		.boxes .box{
			float:none;
			text-align:center;
			width:100%;
			padding:0px;
			margin-left: auto;
			margin-right: auto;
		}
		
		/*text op foto*/
		.containerFoto {
			position:relative;
			font-family: Arial;
			}

			.text-blockFoto {
			position: absolute;
			bottom: 10px;
			right: 25%;
			top: 25%;
			background-color: yellow;
			color: blue;
			padding-left: 2px;
			padding-right: 5px;
			border-radius: 40px;
			border-color: red;
			border-style: solid;
			border-width: 3px;
			height: 150px;
			width: 150px;
			float: none;
			}
			/* einde text op foto*/
		#nieuwsbrief button{
			display:block;
			width:100%;
		}
		footer .box{
			float:none;
			text-align:center;
			width:30%;
			padding:10px;
			margin-left: auto;
			margin-right: auto;
		}
		#img_padeasi{
			width:250px;
			height: 300px;
		}
		 
	
	.container #branding{ 
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		float:none;
	}
		
	.container #branding h1{
		margin:0;
	}
	.container #tfnr{		
		margin-right: auto;
		margin-left: auto;
		text-align: center;
		float:none;
	}
	
	.container #headertitel{
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		float:none;
	}
	.container #headertitel h1{
		font-size: 20px;
	}
}
	/*topnav responsive*/
	@media screen and (max-width: 600px) {
		.topnav.responsive {position: relative;}
		.topnav.responsive .icon {
			position: absolute;
			right: 0;
			top: 0;
		}
		.topnav.responsive a {
			float: none;
			display: block;
			text-align: left;
		}
		.topnav.responsive .dropdown {float: none;}
		.topnav.responsive .dropdown-content {position: relative;}
		.topnav.responsive .dropdown .dropbtn {
			display: block;
			width: 100%;
			text-align: left;
		}
	}
/*einde topnav*/