@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro:300italic,400italic,700italic,300,400,700');

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,300,400,700);
        body {
            font-family: 'Source Code Pro', sans-serif;
        }

        body p {
            font-weight: 400; /* You specify the number you see next to the fonts to change from light to bold ie you would put 700 etc. etc. */
        }

body, html { 
	overflow-x: hidden; 
}


.bg{
	background:#000;
}

.container-fluid {padding:0;}

.headerimg {
	background:url('img/header_BB.png');
	background-position: center center;
	width:100%;
	height:197px;
	border-bottom: 10px solid #fff;	
}

.headerarea {
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.headerarea .maila, .headerarea .telno {
	float:right;
	margin-top:40px;
	color: #fff;
	width: 430px;
	font-style:italic;
	font-size:25px;
	text-decoration:none;
}

.telno img, .maila img {
	height:60px;
	margin-right:15px;
}

.alignright {
	text-align:right;
	padding-right:60px;
}

.iconmenu {
	width:415px;
	padding-top:25px;
	margin: 0 auto;
}

.iconmenu a{
	text-decoration: none;
}

.iconmenu .iconitem {
	float:left;
	border-top: 2px solid #fff;
	padding:10px;
}

.title {
	color: #fff;
	margin-top:40px;
	margin-bottom:20px;
}

.sloganimg {max-height:30px;}

.martijnimg {
	border-left: 10px solid #fff;
	float:right;
}

.martijnsig {
	width:250px;
}

.contentarea img {
	max-width: 100%;
	
}
.contentarea p {color:#fff;}

.telefoonnummer, .telefoonnummer:hover {
	color: #96d5e0;
	font-size: 25px;
	text-decoration:none;
	font-family: 'Open Sans';
	font-weight:700;
}

.mailadres, .mailadres:hover {
	text-decoration: none;
	color:#000;
}

.themakleur {
	color:#c80052;
}

.menuimg {
	background:url('img/menu_balk.png');
	background-position: center center;
	font-weight:bold;
	font-style:italic;
	width:100%;
	height:60px;
	margin-top:-60px;
}

.dienstenmenu {
	font-size:18px;
	margin-left: 275px;
	padding-top:14px;
}

.dienstenmenu li{
	float:left;
	list-style-type: none;
	padding: 0px 20px;
	
}

.dienstenmenu a li{
	color: #000;
}

.slogan {
	background:url('img/menu_balk.png');
}

.dienstenmenu li.active{
	color:#fff;
}

.zevenhonderd{
	font-weight:700;	
}

.branding {z-index:9999;max-width:300px;}

.logo {
	max-height:200px;
	float:left;
}

@media only screen and (max-width: 600px) {
  
  .menuimg {
	background:url('img/menu_balk.png');
	background-position: center center;
	font-weight:bold;
	font-style:italic;
	width:100%;
	height:60px;
	margin-top:0px;
}

.dienstenmenu {
	font-size:18px;
	margin-left: 0px;
}
.logo {
	max-height:150px;
	float:none;
	text-align:center;
	margin: 0 auto;
}
.sloganimg {display:none;}
.branding, .iconmenu {width:100%;}
.branding {max-width: 100%;}
.martijnimg {border-left:0px solid #fff;}

.headerarea .maila, .headerarea .telno {margin-top:5px; margin-bottom:5px;}
.headerimg {background-position:-400px;}
}

@media only screen and (max-width: 450px) {
	
	.iconmenu .iconitem {
	float:left;
	border-top: 2px solid #fff;
	padding:10px;
	width:100%;
	padding-inline-start: 0;
}
	.headerareaul li, .headerarea ul, .headerarea a{	padding-inline-start: 0;}
	.menuimg {padding-bottom:15px;}
	.headerarea .maila, .headerarea .telno {font-size:16px;}
	.headerimg {background-position:-500px;}
}

@media only screen and (max-width: 300px) {
	.headerarea .maila, .headerarea .telno {font-size:12px;}
	.telno img, .maila img {height:30px;}
	.dienstenmenu a li {width:100%;}
	.menuimg {height: auto;}
}