/*
===========================================
=      ====        ==  =======  ===      ==
=  ===  ===  ========   ======  ==  ====  =
=  ====  ==  ========    =====  ==  ====  =
=  ===  ===  ========  ==  ===  ===  ======
=      ====      ====  ===  ==  =====  ====
=  ===  ===  ========  ====  =  =======  ==
=  ====  ==  ========  =====    ==  ====  =
=  ===  ===  ========  ======   ==  ====  =
=      ====        ==  =======  ===      ==
===========================================
=== R E C L A M E  &  M A R K E T I N G ===
===========================================
*/


/* ========================================================================= 
////	RESET
=========================================================================== */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video 
{margin: 0;	padding: 0;	border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}

/* ========================================================================= 
////	ALGEMENE LAY-OUT
=========================================================================== */
html {margin: 0; padding: 0; background-color: #fff; background: url("images/lghtmesh.png") center center}
body {margin:0; width:100%; font-family: 'Open Sans', Arial, Helvetica, Verdana; font-size: 16px; color:#333; font-weight: 300; word-spacing: -0.03em; line-height: 20px; margin: 0; padding: 0;}
#wrapper-buiten {margin:0 auto; width:100%; height:auto;}
.content-container {margin:0 auto; max-width: 1200px; height:auto; overflow:auto; clear:both; position:relative;}
img {border-style:none; max-width:100%; vertical-align:top; height:auto;}

/* ========================================================================= 
////	TEKSTEN  EN BASIS ONDERDELEN
=========================================================================== */
h1 {font-family:'Work Sans', Helvetica, Arial; font-size: 40px; color:#333333; font-weight: 800; line-height: 1.0; letter-spacing:-0.02em; margin: 10px 0; padding: 0;}
h2 {font-family:'Work Sans', Helvetica, Arial; font-size: 36px; color:#333333; font-weight: 800; line-height: 1.0; letter-spacing:-0.03em; margin: 10px 0; padding: 0;}
h3 {font-family:'Work Sans', Helvetica, Arial; font-size: 32px; color:#333333; font-weight: 800; line-height: 1.0; letter-spacing:-0.01em; margin: 10px 0; padding: 0;}
h4 {font-family:'Work Sans', Helvetica, Arial; font-size: 28px; color:#333333; font-weight: 800; line-height: 1.0; letter-spacing:-0.01em; margin: 10px 0; padding: 0;}
h5 {font-family:'Work Sans', Helvetica, Arial; font-size: 24px; color:#333333; font-weight: 800; line-height: 1.0; letter-spacing:-0.01em; margin: 10px 0; padding: 0;}
h6 {font-family:'Work Sans', Helvetica, Arial; font-size: 16px; color:#333333; font-weight: 800; line-height: 1.0; letter-spacing:-0.01em; margin: 20px 0 5px 10px; padding: 0; text-align:left;}
p {font-family: 'Roboto', Arial, Helvetica, Verdana, sans-serif; font-size: 16px; color:#333333; line-height: 25px; margin: 0; padding: 0; font-weight: 300; -webkit-font-smoothing: antialiased;}
blockquote p {font-family: 'Open Sans', Arial, Helvetica, Verdana, sans-serif; font-size: 18px; line-height: 22px; font-weight: 300; margin:10px; padding:10px 20px; color:#aaa;}
hr {border: 0; height: 0; border-top: 1px solid #eee; margin:20px 0;}
b, strong {font-weight: 900;}
small {font-size:10px;}
a {text-decoration:none;}
.tekst-oranje {color:#ff9900!important;}

/* ========================================================================= 
////	ELEMENT SUFFIX
=========================================================================== */
.clear {clear:both;}
.overflow {overflow:hidden;}
.relative {position: relative;}
.absolute {position: absolute;}
.block {display:block;}
.caps {text-transform: uppercase;}
.center {text-align:center; margin:0 auto;}
.left {text-align:left; margin:0 auto;}
.right {text-align:right; margin:0 auto;}
.float_left {float:left;}
.float_right {float:right;}
.underline {text-decoration:underline;}
.margin-10 {margin:10px;}
.margin-20 {margin:20px;}
.margin-30 {margin:30px;}
.margin-40 {margin:40px;}
.margin-50 {margin:50px;}
.margin-60 {margin:60px;}
.margin-70 {margin:70px;}
.margin-80 {margin:80px;}
.margin-10-0 {margin:10px auto;}
.margin-20-0 {margin:20px auto;}
.margin-30-0 {margin:30px auto;}
.margin-40-0 {margin:40px auto;}
.margin-50-0 {margin:50px auto;}
.margin-60-0 {margin:60px auto;}
.margin-70-0 {margin:70px auto;}
.margin-80-0 {margin:80px auto;}
.padding-10 {padding:10px;}
.padding-20 {padding:20px;}
.padding-30 {padding:30px;}
.padding-40 {padding:40px;}
.padding-50 {padding:50px;}
.padding-60 {padding:60px;}
.padding-70 {padding:70px;}
.padding-80 {padding:80px;}
.padding-10-0 {padding:10px auto;}
.padding-20-0 {padding:20px auto;}
.padding-30-0 {padding:30px auto;}
.padding-40-0 {padding:40px auto;}
.padding-50-0 {padding:50px auto;}
.padding-60-0 {padding:60px auto;}
.padding-70-0 {padding:70px auto;}
.padding-80-0 {padding:80px auto;}
.padding-0-10 {padding:0 10px;}
.padding-0-20 {padding:0 20px;}
.padding-0-30 {padding:0 30px;}
.padding-0-40 {padding:0 40px;}
.padding-0-50 {padding:0 50px;}
.padding-0-60 {padding:0 60px;}
.padding-0-70 {padding:0 70px;}
.padding-0-80 {padding:0 80px;}


/* ========================================================================= 
////	KNOP
=========================================================================== */
.btn-class{
 display: inline-block;
 border:1px solid #bfbfbf;
 color: #8c8c8c;
 border-radius: 5px 5px 5px 5px;
 -webkit-border-radius: 5px 5px 5px 5px;
 -moz-border-radius: 5px 5px 5px 5px;
 font-family: Verdana;
 width: auto;
 height: auto;
 font-size: 16px;
 padding: 10px 40px;
 box-shadow: inset 0 1px 0 0 #fff,inset 0 -1px 0 0 #d9d9d9,inset 0 0 0 1px #f2f2f2,0 2px 4px 0 #f2f2f2;
 -moz-box-shadow: inset 0 1px 0 0 #fff,inset 0 -1px 0 0 #d9d9d9,inset 0 0 0 1px #f2f2f2,0 2px 4px 0 #f2f2f2;
 -webkit-box-shadow: inset 0 1px 0 0 #fff,inset 0 -1px 0 0 #d9d9d9,inset 0 0 0 1px #f2f2f2,0 2px 4px 0 #f2f2f2;
 text-shadow: 0 1px 0 #fff;
 background-image: linear-gradient(to top, #f2f2f2, #f2f2f2);
 background-color: #f2f2f2;
}
.btn-class:hover, .btn-class:active{
 border:1px solid #8c8c8c;
 color: #8c8c8c;
 box-shadow: inset 0 1px 0 0 #ffffff,inset 0 -1px 0 0 #d9d9d9,inset 0 0 0 1px #f2f2f2;
 -moz-box-shadow: inset 0 1px 0 0 #ffffff,inset 0 -1px 0 0 #d9d9d9,inset 0 0 0 1px #f2f2f2;
 -webkit-box-shadow: inset 0 1px 0 0 #ffffff,inset 0 -1px 0 0 #d9d9d9,inset 0 0 0 1px #f2f2f2;
 background-color: #f2f2f2;
}

/* ========================================================================= 
//////	RESPONSIVE > 1280
=========================================================================== */
@media only screen and (max-width: 1200px) {
	.content-container, .footer-container {width:95%;}
}

/* ========================================================================= 
//////	RESPONSIVE > 1024
=========================================================================== */
@media only screen and (max-width: 980px) {
	.content-container, .footer-container {width:95%;}
}

/* ========================================================================= 
//////	RESPONSIVE > 800
=========================================================================== */
@media only screen and (max-width: 790px) {


}

 /* ========================================================================= 
//////	RESPONSIVE > 640
=========================================================================== */
 @media screen and (max-width: 640px) {

	.content-container, .footer-container {width:95%;}
	.content-container > p {padding:0;}
	 h1 {font-size: 48px;}
}
/* ========================================================================= 
//////	RESPONSIVE > 480
=========================================================================== */
 @media screen and (max-width: 450px) {

	.content-container, .footer-container {width:95%;}
	 h1 {font-size:24px;}
}