@charset "UTF-8";

html,
body {
   margin:0;
   padding:0;
   height:100%;
   font-family: Arial, Helvetica, sans-serif; font-size:12px; line-height:22px; color:#6d6e6c;
}
#container {
   min-height:100%;
   position:relative;
}

/* HEADER */
#headerwrap {
   background:#444444;
   height:104px; position:fixed; width:100%; z-index:1100;
}
#header {
    max-width:1400px; height:104px;
    margin: 0px auto 0px auto; 
    padding: 0px 20px 0px 20px; font-family: 'Oswald', sans-serif; font-weight:300; position:relative; z-index:1000;
}

/* BODY */
#bodywrap {
   padding-bottom:160px;   /* HOOGTE VAN DE FOOTER - AAN TE PASSEN */
}
#body {
    max-width:1400px;
    margin: 0px auto 0px auto; 
    padding: 124px 20px 70px 20px;
}

/* FOOTER */
#footerwrap {
   position:absolute;
   bottom:0;
   width:100%;
   height:160px; background-image:url(../images/bg_foot.jpg); background-repeat:repeat-x; background-position:top;
}
#footer {
    max-width:1400px; 
    margin: 0px auto 0px auto; 
    padding: 0px 20px 0px 20px;
}

#logo { position:absolute;}

.topnav { color:#FFF; position:absolute; right:0px;font-size:13px; line-height:16px; width:250px; margin-top:15px;}
.topnav a { color:#FFF; padding-left:10%; padding-right:10%; display: inline-block;}

.nav { font-size:14px; text-transform:uppercase; line-height:46px; padding-top:58px; }
.nav ul li a { float:right; margin-left:8%; color:#FFF;}
.nav ul li a:hover { background-image:url(../images/bg_nav.jpg); background-repeat:no-repeat; background-position:center bottom;}

.ticker {font-family: 'Oswald', sans-serif; font-weight:300; text-align:center; font-size:24px; line-height:34px; color:#aeba22; height:124px;}
.ticker span { background-color:#FFF; padding-left:10px; padding-right:10px;}
.foot { text-align:center; font-family:Arial, Helvetica, sans-serif; font-size:11px; text-align:center; line-height:36px; color:#FFF;}
.foot a { color:#FFF;}

h1 {font-family: 'Oswald', sans-serif; font-weight:300; text-align:center; color:#aeba22; font-size:22px; text-transform:uppercase; line-height:74px; background-image:url(../images/h1.jpg); background-repeat:no-repeat; background-position:center bottom; margin-bottom:15px;}
h2 {font-family: 'Oswald', sans-serif; font-weight:300; text-align:center; color:#aeba22; font-size:18px; text-transform:uppercase; line-height:74px;  margin-bottom:15px;}
h3 {font-family: 'Oswald', sans-serif; font-weight:300; font-size:12px; text-transform:uppercase; text-align:center; line-height:33px; background-image:url(../images/h3.jpg); background-repeat:no-repeat; background-position:center bottom; color:#aeba22; margin-bottom:65px; }

.centr { text-align:center; }

.diensten {}
.diensten h2 { text-transform:uppercase; color:#AEBA22; text-align:center; font-size:16px; line-height:35px; background-color:#E6E6E6; margin-bottom:14px;}
.dienst { padding:30px;}
.dienst h3 { color:#6d6e6c; line-height:48px; font-size:16px; background-image:url(../images/mat2_bg.png); background-repeat:no-repeat; background-position:right top; text-align:left; border-bottom:2px solid #9ea83b; margin-bottom:0px;}
.dienst h3:hover { background-position:bottom right; cursor:pointer;}

.diensten h2.active{ background: #b4b342; color: #fff;}

.project { position:relative;}
.project a { position:absolute; width:100%; height:100%; text-align:center;  z-index:100;}
.project a h2 { display:none; font-family: 'Oswald', sans-serif; font-weight:300; color:#869200; font-size:30px; text-transform:uppercase; padding-top:22%;}
.project a:hover { background-image:url(../images/bg_link.png); }
.project a:hover h2 { display:block;}

.groepen {}
.groepen a { font-size:16px; text-align:center; display:block; text-transform:uppercase; color:#aeba22; font-family: 'Oswald', sans-serif; font-weight:300; line-height:45px; background-color:#e6e6e6; width:100%;}

.plus { background-image:url(../images/plus.png); background-repeat:no-repeat; background-position:right top; position:absolute; width:52px; height:50px; display:block; right:0px;}
.rel { position:relative;}

.pro_controls { height:45px; width:100%; background-image:url(../images/line.png); background-repeat:repeat-x; margin-top:25px; margin-bottom:25px;}
.controls_left { float:left; width:45%; margin-left:1%;}
.controls_left a { float:left; margin-right:1%;}
.controls_right { float:right; width:45%; margin-left:1%;}
.controls_right a { float:right; margin-right:1%;}

.materiaal {}
.materiaal h2 { color:#AEBA22; font-size:16px; line-height:35px; background-color:#E6E6E6; margin-bottom:14px; text-align:left; padding-left:2%; text-transform:none; background-repeat:no-repeat; background-position:right top; margin-bottom:10px; }
.materiaal h2:hover { background-position:bottom right; cursor:pointer;}
.materiaal h2.active{ background: #b4b342; color: #fff;}
.line {border-bottom:2px solid #9ea83b; line-height:1000%;}

.kader {  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
 border:2px solid #d5e14d;}
 
 .gegevens { font-size:11px; line-height:20px; margin-bottom:5%;}
 .gegevens a { color:#87921f;}
 
 .left { float:left;}
 .right { float:right;}
 
 .pad { padding:3%;}
 
 input[type=text] { border:1px solid #717171; padding:2%; width:100%; margin-bottom:6%; border-radius: 3px; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;  }
 textarea {border:1px solid #717171; padding:2%; width:100%; margin-bottom:6%; border-radius: 3px; min-height:200px; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;  }
 input[type=submit] { width:100%; color:#FFF; border:none; background-color:#bbca17; line-height:40px; display:block;}
 
 .nb { max-width:450px; margin:auto;}



/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 5%;
}
.col:first-child { margin-left: 0; }


/*  GROUPING  */
.group:before,
.group:after {
	content:"";
	display:table;
}
.group:after {
	clear:both;
}
.group {
    zoom:1; /* For IE 6/7 */
}
                                               
/*  GRID OF TWO  */
.span_2_of_2 {
	width: 100%;
}
.span_1_of_2 {
	width: 47.5%;
}

					
/*  GRID OF THREE  */
.span_3_of_3 {
	width: 100%;
}
.span_2_of_3 {
	width: 65%;
}
.span_1_of_3 {
	width: 30%;
}


/*  GRID OF FOUR  */
.span_4_of_4 {
	width: 100%;
}
.span_3_of_4 {
	width: 73.75%;
}
.span_2_of_4 {
	width: 47.5%;
}
.span_1_of_4 {
	width: 21.25%;
}


/*  GRID OF FIVE  */
.span_5_of_5 {
	width: 100%;
}
.span_4_of_5 {
	width: 79%;
}
.span_3_of_5 {
	width: 58%;
}
.span_2_of_5 {
	width: 37%;
}
.span_1_of_5 {
	width: 16%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
	.col { 
		margin: 1% 0 1% 0%;
	}
}

@media only screen and (max-width: 480px) {
	
	.span_2_of_2 {
		width: 100%; 
	}
	.span_1_of_2 {
		width: 100%;
	}
	
	.span_3_of_3 {
		width: 100%; 
	}
	.span_2_of_3 {
		width: 100%; 
	}
	.span_1_of_3 {
		width: 100%;
	}
	
	
	
	.span_4_of_4 {
		width: 100%; 
	}
	.span_3_of_4 {
		width: 100%; 
	}
	.span_2_of_4 {
		width: 100%; 
	}
	.span_1_of_4 {
		width: 100%;
	}
	
	
	
	.span_5_of_5 {
		width: 100%; 
	}
	.span_4_of_5 {
		width: 100%; 
	}
	.span_3_of_5 {
		width: 100%; 
	}
	.span_2_of_5 {
		width: 100%; 
	}
	.span_1_of_5 {
		width: 100%;
	}
}