@charset "UTF-8";
/* CSS Document */
*{
	margin: 0; 
	padding: 0; 
}
/* Typografie */
@font-face {
    font-family: 'Brandon Grotesque';
    src: url('../fonts/BrandonGrotesque-Bold.eot');
    src: url('../fonts/BrandonGrotesque-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/BrandonGrotesque-Bold.woff2') format('woff2'),
        url('../fonts/BrandonGrotesque-Bold.woff') format('woff'),
        url('../fonts/BrandonGrotesque-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

html, body{
	overflow-x: hidden;
	height: 100%;
}
body{
	display: flex;
	flex-direction: column;
}
.container-fluid{
	flex: 1 0 auto;
}
/* LOGO ------------- */
#logobanner{
	min-height: 120px; 
}
#logo img{
	margin: 1em auto 0;
	width: 20%;
    display: flex;
	padding-bottom: 1%;
	
}
/* INLEIDING -------- */
#achtergrondinleiding{
	background-color: #f9f9f9; 
	min-height: 718px; 
}
hr{
	width: 340px;
    height: 2px;
    color: #BD9A5F;
    border: 0px solid #BD9A5F;
    background-color: #BD9A5F;
    margin: 0 auto;
    margin-top: 3.5%;
}
#inleiding h1{
	font-family: 'Brandon Grotesque';
	font-weight: bold; 
	font-size: 2em;
	text-align: center; 
	padding-top: 0;
	/* padding-bottom: 2%; */
	display: block;
	width: 40%;
	margin: 0 auto;
	color: #f9f9f9;
}

#inleiding .sugar{
	width: 100%;
	text-align: center;
}

#inleiding p{
	font-family: 'Open Sans', sans-serif; 
	font-size: 1.2em; 
	text-align: center; 
	color: #222740; 
	width: 52%;
	padding-top: 3%;
	padding-bottom: 6%;
	margin: 0 auto; 
	max-width: 1200px;
}

#inleiding .sugarbeets{
	margin: auto;
	width: 52%;
	max-width: 1200px;
	height: 350px;
	background-image: url(../img/sugar.jpg);
	background-position: 25% 45%;
	background-size: cover;
}

.footer{
	background-color: #5F8EB6 !important; 
	flex-shrink: 0;
}
#contactgegevensfooter{
	background-color: #5F8EB6; 
	width: 100%;
}
#contactgegevensfooter p{
	color: #FFFFFF !important;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.9em;
    padding-top: 13px;
}
a#contactmail{
	color: #fff; 
	text-decoration: none; 
}



/* MEDIAQUERIES ------ */
@media(min-width: 1600px){
	#logo img{
		width: 15%;
	}
}

@media all and (max-width: 1700px){
	#achtergrondinleiding{
		min-height: 740px;
	}
	#inleiding p{
		padding-top: 5%;
	}
}
@media all and (max-width: 1550px){
	#logo img{
		width: 20%;
	}
	#achtergrondinleiding{
		min-height: 720px;
	}
	#inleiding p{
		width: 60%;
	}

	#inleiding .sugarbeets{
		width: 60%;
	}
}
@media all and (max-width: 1450px){
	#achtergrondinleiding{
		min-height: 733px;
	}
	#inleiding p{
		width: 65%;
	}

	#inleiding .sugarbeets{
		width: 65%;
		height: 300px;
	}
}
@media all and (max-width: 1300px){
	#logo img{
		width: 25%;
	}
}
@media all and (max-width: 1120px){
	#logo img{
		width: 30%;
	}
	#inleiding p{
		font-size: 1.1em;
		width: 52%;
	}

	#inleiding .sugarbeets{
		width: 52%;
		height: 250px;
	}

	#achtergrondinleiding{
		min-height: 725px;
	}
}
@media all and (max-width: 970px){
	hr{
		margin-top: 5%;
	}
	#inleiding p{
		padding-top: 5%;
	}
	#achtergrondinleiding{
		min-height: 748px;
	}
}
@media all and (max-width: 795px){
	#contactgegevensfooter p{
		font-size: 0.8em;
	}
	#logo img{
		width: 40%;
	}
	#inleiding p{
		font-size: 1em;
		width: 60%;
	}

	#inleiding h1{
		padding-bottom: 0;
	}

	#inleiding .sugarbeets{
		width: 60%;
		height: 200px;
	}

	#achtergrondinleiding{
		min-height: 763px;
	}
}
@media all and (max-width: 607px){
	#logo img{
		width: 45%;
	}
	#inleiding p{
		width: 75%;
	}

	#inleiding .sugarbeets{
		width: 75%;
		background-position: center;
	}
}
@media all and (max-width: 520px){
	#logo img{
		width: 55%;
	}
}
@media all and (max-width: 450px){
	#logo img{
		width: 65%;
	}
	#inleiding p{
		width: 85%;
		font-size: 0.9em;
		padding-top: 10%;
	}

	#inleiding .sugarbeets{
		width: 85%;
	}

	hr{
		margin-top: 10%;
	}
}