body {
    font-family:Arial, Helvetica, sans-serif;
    color:#222;
    font-size:14px;
    line-height:22px;
}

html {
}

#headerwrapper {
	width:100%;
	background:#363636;
}
#menuwrapper {
	width:100%;
	background:#5a8dcc;
	height: 42px;
}

a.logo {
    display:block;
	margin:10px 0;
}

.slider-wrapper {
	margin-bottom:50px;
}

/***********************TOPMENU**************************/

#topmenu {
	background: none repeat scroll 0 0 #5A8DCC;
    border-radius: 0 0 10px 10px;
    color: #cecece;
    display: block;
    float: right;
    font-size: 14px;
    font-weight: normal;
    height: 32px;
    line-height: 11px;
    text-transform: lowercase;
    width: 378px;
	display:none;
}
#topmenu a {
    border-left: 1px solid #cecece;
    color: #fff;
    float: left;
    margin: 7px 2px 0;
    padding: 2px 5px 5px 6px;
	text-shadow: 0 0 5px #000;
}
#topmenu a:hover {
    color: #d5d5d5;
}
#topmenu .active a {
    color: #d5d5d5;
}
#topmenu .overons a {
	border-left: 0px solid #363636;
}

/*********************END TOP-MENU************************/


#contact {
    color: #c5d1eb;
    float: right;
    font-size: 20px;
    font-weight: bold;
    margin: 73px 0 40px;
    text-align: right;
    text-transform: uppercase;
}

#phonenumber {
	background:url(../images/phone.png) left center no-repeat;
	padding:0 0 0 34px;
	color:#5a8dcc;
	line-height:30px;
	font-size:22px;
}
#phonenumber a {

}

nav {
    height:30px;
    line-height:30px;
	padding-top:5px;
	padding-bottom:5px;
    font-size:16px;
}
nav li {
    float:left;
    margin: 0 3px;
}
nav a {
    color: #fff;
    display: block;
    margin: 0 5px;
    overflow: auto;
    padding: 0 10px;
    transition: color 0.2s ease-in 0s;
	border-radius: 3px;
}

nav li.active.level1 > a, nav li.level1 > a:hover, nav li.level1:hover > a { 
    color:#5a8dcc;
    background:#fff;
}


/* Sub menu's */
nav ul {
    position: relative;
}
nav ul ul, nav ul ul ul, nav ul ul ul ul {
    display:none;
    position:absolute;
    top:100%;
    background:#000; 
    line-height:32px;   
    z-index:999;
}
nav li.level1 > ul {
    top:30px;
	margin: 0 0 0 10px;
    padding:1px;
    background:#363636; 
}
nav ul ul li {
    padding:0 0 1px 0;
	margin:0;
}
nav ul ul li:last-child {
    padding:0;
}
nav ul ul li a {
    padding: 0 8px;
    color:fff;
    text-align:left; 
	display:block;
	font-size:15px;
    transition: none;
}
nav ul ul li a:hover, nav ul ul li.active a  {
	background:none;
    color:#5a8dcc;
    text-align:left;
}

nav ul ul li {
    float:none;
}
nav li:hover > ul {
    display:block;
}

/*****************HIDE MENU ITEMS**********************/

#menu li.over-ons {
	display:none;
}
#menu li.garanties {
	display:none;
}
#menu li.vacatures {
	display:none;
}
#menu li.werkgebied {
	display:none;
}

/*************END HIDE MENU ITEMS**********************/

.blockwrapper a.block {
	margin-bottom:26px;
	padding:15px;
	color:#fff;
	height:400px;
    display:block;
    transition:all 0.5s;
	border-radius: 3px;
}

.blockwrapper .blue a.block {
	background:#5a8dcc;
}
.blockwrapper .grey a.block {
	background:#888;
}
.blockwrapper .blue a.block:hover, .blockwrapper .grey a.block:hover {
    background:#363636;
}

.blockwrapper a.block p {
    line-height:16px;
	font-size: 13px;
}
.blockwrapper .block  img {
    display:block;
    margin-bottom:18px;
	border-radius: 3px;
}
.block .title {
	font-size:24px;
	padding:0 0 15px 0;
	display:block;
	line-height:26px;
}

.textblock img {
    margin-bottom:20px;
	border-radius: 3px;
}

#content {
    overflow:auto;
	margin-bottom:26px;
}

.textblock2 {
    background: url(../images/bel-bg.jpg) top left no-repeat;
    background-size: auto auto; 
    padding: 10px 5px 0 10px;
    min-height:319px;
	border-radius: 3px;
}
.bel {
    font-size:17px;
    font-weight:bold;
    color: #fff;
    margin:0px 0 0 75px;
    line-height: 19px;
    height: 57px;
    width:187px;
    text-shadow: 0 0 2px #2c78cd;
}

#certificaten {
	background:#363636;
	width:100%;
	overflow:hidden;
	color:#9b9b9b;
	font-weight:bold;
	font-size:22px;
	line-height:50px;
}
#logos {
	width:100%;
	overflow:hidden;
	background:#fff;
	color:#105478;
	padding:30px 0;
}
#logos span {
	display:block;
	width:19%;
	padding:0 3%;
	text-align:center;
	float:left;
}
#footerwrapper {
	overflow:auto;
	color:#fff;
	padding-top:20px;
	background:#363636;
}
.footer {
	overflow:auto;
	font-size:15px;
	color:#9B9B9B;
}
.footer a {
	color:#9B9B9B;
}
.footer a:hover {
	color:#5a8dcc;
	underline:none;
}
.footer .title {
	font-weight:bold;
	font-size:24px;
	color:#fff;
	margin-bottom:20px;
	display:block;
}
.footer li {
	padding:0 0 0 20px;
	background:url(../images/pointer.png) 0 9px no-repeat;
	line-height:24px;
}
.footer .grid_4 {
    margin-bottom:20px;
}
.footer .grid_4 .title {
	color: #cecece;
}
.social li {
	float:left;
	padding:0;
	background:none;
}
.social li a {
    display: block;
    height: 34px;
    margin: 0 10px 0 0;
    width: 34px;
    transition: all 0.15s ease 0s;
}
.social li a span {
    display: none;
}
.social li.youtube a {
    background: url(../images/social.png) no-repeat 0 0;
}
.social li.youtube a:hover {
    background: url(../images/social.png) no-repeat 0 -34px;
}
.social li.facebook a {
    background: url(../images/social.png) no-repeat -34px 0;
}
.social li.facebook a:hover {
    background: url(../images/social.png) no-repeat -34px -34px;
}
.social li.twitter a {
    background: url(../images/social.png) no-repeat -68px 0;
}
.social li.twitter a:hover {
    background: url(../images/social.png) no-repeat -68px -34px;
}




.text h1, .text h2, .text h3, .text h4, .text h5, .text h6 {
    font-size:20px;
	line-height:28px;
	color:#5a8dcc;
	font-weight:normal;
}
.text h1 {
    font-size:24px;
}
.text h2 {
    font-size:20px;
}
.text a {
	color:#5a8dcc;
}

.text strong {
    font-weight:bold;
}
.text em {
    font-style:italic;
}




/* =============================================================================
   Page Styles
   ========================================================================== */

/* =============================================================================
   Media Queries
   ========================================================================== */

/* Regular screens */
@media only screen and (min-width: 996px) and (max-width: 1223px) {
    .textblock2 {
	background-size: 975px auto;
	padding: 10px 5px 0 10px;
	min-height:334px;
    }
    
    .bel {
	color: #fff;
	font-size: 15px;
	font-weight: bold;
	line-height: 16px;
	margin: 0 0 0 55px;
	width: 150px;
    }
    ul.cmsform li input[type=submit] {
	margin-right:16px !important;
	}
	nav {
    font-size: 15px;
	}
	
	nav a {
    margin: 0 0px;
	padding: 0 5px;
	}
	

	nav li {
	
	}
	
		#contact {
    margin: 59px 0 40px;
	}
}

/* Tablet Portrait size to Base 996px */
@media only screen and (min-width: 768px) and (max-width: 995px) {
    .textblock2 {
		background-size: 820px auto;
		overflow: hidden;
		padding: 10px 5px 0 10px;
		min-height:348px;
    }
  
    .bel {
		color: #fff;
		font-size: 11px;
		font-weight: bold;
		line-height: 12px;
		margin: 0 0 0 45px;
		width: 117px;
    }
    ul.cmsform li input[type=submit] {
	margin-right:16px !important;
    }
	nav {
    font-size: 11px;
	}
	nav li {
	
	}
	nav a {
	margin: 0 0px;
	padding: 0 5px;
	}
	
		#contact {
    margin: 50px 0 40px;
}
	
	
}

/* All Mobile Sizes */
@media only screen and (max-width: 767px) {
    .textblock2 {
		width: 257px;
    }
	#topmenu {
		display: none;
	}
	#topmenu a {
		margin: 9px 4px 0;
	}
	.blockwrapper {
		display: none;
	}
	
	
	#contact {
    margin: 39px 0 40px;
}
}

/* Mobile Landscape Size to Tablet Portrait */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	
	#contact {
    margin: 18px 0;
}
	
	
}

/* Mobile Portrait Size to Mobile Landscape Size */
@media only screen and (max-width: 479px) {
	#topmenu {
		width: 258px;
		padding: 2px 11px 5px;
		border-radius: 7px;
		font-size: 11px;
		height:18px;
		margin:
	}
	#topmenu a {
		border:none;
		color: #fff;
		float: left;
		margin: 4px 1px;
		padding: 1px 3px 0 0;
	}
	.blockwrapper {
		display: none;
	}
	.slogan {
		display: none;
	}
	#contact {
		margin: 0;
	}
	#phonenumber {
		font-size: 35px;
	}
}


/* =============================================================================
   Font-Face
   ========================================================================== */
/* This is the proper syntax for an @font-face file

/* @font-face {
font-family: 'FontName';
src: url('../fonts/FontName.eot');
src: url('../fonts/FontName.eot?iefix') format('embedded-opentype'),
url('../fonts/FontName.woff') format('woff'),
url('../fonts/FontName.ttf') format('truetype'),
url('../fonts/FontName.svg#FontName') format('svg');
font-weight: normal;
font-style: normal; }
*/