html, body { height: 100%; }
	body { font-family: 'Lato', sans-serif; overflow-y: scroll; padding-bottom: 250px; display: flex; flex-direction: column; }	

	.wrapper { flex: 1 0 auto; }
	
	.container { max-width: 1200px; }
	
	.button { background: #f2a429; color: #fff; padding: 6px 15px; padding: 10px 20px; border-radius: 5px; transition: .2s;  text-transform: uppercase; font-size: 14px; border: 0;}
	.button:hover { background: #333; color: #fff; padding: 10px 20px; border-radius: 5px; text-decoration: none; transition: .2s; }

	#menubar { position: fixed; display: block; top: 0px; left: 0px; width: 100%; background: rgba(255,255,255,.9); z-index: 99999999; height: 85px; }
	#menubar .brand { display: none; height: 85px; transition: all 1s; top: -80px;} 
	#menubar .brand.sub { display: block; } 
	#menubar .brand img { height: 75px; padding: 5px; transition: all 1s;}
	#menubar.logo .brand { display: block; height: 85px; transition: all 1s;}
	#menubar.logo .brand img { transition: all 1s; }

	#menubar .container { position: relative; }
	#menubar ul.menu { position: absolute; right: 200px; top: 30px; list-style-type: none; }
	#menubar ul.menu li { float: left; }
	#menubar ul.menu li a { color: #555; padding: 15px 10px; font-weight: 300; }
	#menubar a.button { position: absolute; right: 0px; top: 20px; font-size:14px; text-transform: uppercase; }
	#menubar .language { position: absolute; right: 0px; top: 20px; background: #eee; color: #777; padding: 6px 15px; padding: 10px 20px; border-radius: 5px; transition: .2s;}
	#menubar #menubutton { position: absolute; right: 10px; top: 20px; background: rgba(153,153,78, 1); color: #fff; padding: 6px 15px; padding: 10px 20px; border-radius: 5px; transition: .2s; font-size: 24px; display: none; }

	#header { width: 100%; height: 700px; position: relative; overflow: hidden; }
	#header .container { position: relative; z-index: 9999; }
	#header .slider { position: absolute; width: 100%; height: 700px; transition: 0s linear; transition-property: background-position; }
	#header .brand { position: absolute; left: 30px; top: 120px; z-index: 99999; transition: 0s linear; transition-property: background-position;}
	#header .melding { display: block; position: absolute; top: 160px; right: 30px; background: rgba(153,153,78, .9); border-radius: 15px; color: #fff; width: 500px; padding: 40px;  transition: 0s linear; transition-property: background-position; z-index: 99999;}
	#header .melding h3 { font-weight: 300;}
	#header .overlay2 { position: absolute; width: 100%; bottom: -2px; left: 0px; height: 270px; background: url('/theme/img/header-overlay.png') top center repeat-x; z-index:1111111;}
	#header .overlay { position: absolute; width: 1000px; bottom: -2px; right: 0px; height: 250px; background: url('/theme/img/header-overlay2.png') no-repeat ; z-index:111111; transition: 0s linear; transition-property: background-position;}

	#subheader { height: 400px; width: 100%; background: #36533e; position: relative; }
	#subheader .container { position: relative; height: 100%;}
	#subheader h1 { font-weight: 900; font-size: 45px; color: #fff; position: absolute; bottom: 40px; text-shadow: 1px 1px 1px #333; text-decoration: none;  }
	#subheader .arrbutton { background: #36533e; color: #fff; padding: 6px 15px; padding: 10px 20px; border-radius: 5px; transition: .2s; position: absolute; right:20px;  bottom: 40px; z-index: 99999; }

	#subheader.map  { position: relative; }
	#subheader h3 { font-size: 20px; color: #36533e; font-weight: 300;}
	#subheader a { font-size: 16px; color: #f3a726; font-weight: 500; padding: 0; margin: 0; }
		
	#intro { background: #36533e url("/theme/img/intro-bg.jpg") top center no-repeat; background-size: cover; color: #fff; padding: 60px 0; }
	#intro .text { padding-right: 80px; }
	#intro h1 { color: #f3a726; font-weight: 700; font-size: 35px; }
	#intro p { font-weight: 300; line-height: 33px; font-size: 17px; }
	#intro a.grotebutton { display: block; border: 2px solid #8e9253; border-radius: 15px; width: 100%; height: 160px; overflow: hidden; margin-bottom: 20px; position: relative; }
	#intro a.grotebutton h3 { position: absolute; bottom: 10px; left: 20px; font-size: 20px; color: #fff; font-weight: 700; }
	
	#intro .buttons { text-align: left; padding: 70px 0 40px 0; }
	#intro .buttons a.button { display: block; margin: 0 0 20px 0; padding: 20px 30px; font-size: 18px; text-transform: uppercase; letter-spacing: 1px; width: 100%; }
	#intro .buttons a.button i { padding-right: 10px; }

	#actueel { background: #efebeb; padding: 80px 0; color: #3e5945; }
	#actueel h2 { width: 100%; text-align: center; margin-bottom: 30px; }
	#actueel h3 { font-weight: 700; font-size: 25px; line-height: 30px;}
	#actueel .datum { font-weight: 300; margin: 0 0 5px 0; font-size: 14px; }
	#actueel .text{ padding: 20px 10px; font-weight: 300; line-height: 30px; font-size: 16px; }
	#actueel img { border-radius: 15px; }
	#actueel .archief { padding-top: 60px; text-align: center; } 
	#actueel .archief a { color: #3e5945; font-weight: 300; }
	#actueel a.button { display: inline-block; margin-top: 5px; }
	
	#about { background: #303f59; padding: 0; color: #fff; }
	#about h2 { color: #f2a429; font-weight: 700; }
	#about a { color: #f2a429; }
	#about p { font-weight: 300; line-height: 33px; font-size: 17px; }
	#about .row { padding: 0px; margin: 0px; }
	#about .foto { padding: 0px; }
	#about .img { width: 100%; height: 100%; }
	#about .tekst { padding: 80px 60px; }

	#dagattracties { background: #efebeb; padding: 80px 0; color: #3e5945; }	
	#dagattracties h2 { width: 100%; text-align: center; margin-bottom: 30px; }
	#dagattracties h3 { font-weight: 700; font-size: 20px; line-height: 30px; margin: 10px 0 0 0;}
	#dagattracties img { border-radius: 15px; }
	#dagattracties a img { opacity: 1; filter: alpha(opacity=100); transition: .8s; }
	#dagattracties a:hover img { opacity: 0.7; filter: alpha(opacity=70); transition: .8s; }
	#dagattracties .archief { padding-top: 60px; text-align: center; } 
	#dagattracties .archief a { color: #3e5945; font-weight: 300; }

	#overzicht { padding: 50px 0; background: #fcfcfc;  }
	#overzicht .item { border-radius: 4px; overflow: hidden; height: 250px; background: #eee; position: relative; margin-bottom: 30px;  }
	#overzicht .item .overlaytext { position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(240,163,58,.8); color: #fff; padding: 10px 20px; font-size: 18px; } 
	#overzicht .item .overlaytext a { color: #fff; }
	#overzicht .item span.plaats { font-size: 12px; }
	#overzicht h2 { width: 100%; text-align: center; padding: 20px;  }
	
	#content { padding: 50px 0; background: #fcfcfc; line-height: 26px; }
	#content .tekst { padding-right: 50px; }
	#content h2 { color: #f2a429; font-size: 25px; }
	#content a { color: #36533e; }
	#content a:hover { color: #f2a429; } 
	#content a.button { color: #fff;}
	
	#footer { background: #36533e; color: #fff; padding: 60px 0;  width: 100%; flex-shrink: 0; }
	#footer a { color: #FFF; }
	#footer .social i { font-size: 30px;}
	
	.nieuwsitem { margin-bottom: 10px; }
	.nieuwsitem span { color: #aaa; }
	.nieuwsitem a:hover { text-decoration: none; }

	#nieuwsoverzicht { background: #fff; padding: 80px 0; color: #3e5945; }
	#nieuwsoverzicht h2 { width: 100%; text-align: center; margin-bottom: 30px; }
	#nieuwsoverzicht h3 { font-weight: 700; font-size: 25px; line-height: 30px;}
	#nieuwsoverzicht .datum { font-weight: 300; margin: 0 0 5px 0; font-size: 14px; }
	#nieuwsoverzicht .text{ padding: 20px 10px; font-weight: 300; line-height: 30px; font-size: 16px; }
	#nieuwsoverzicht img { border-radius: 15px; }
	#nieuwsoverzicht .archief { padding-top: 60px; text-align: center; } 
	#nieuwsoverzicht.archief a { color: #3e5945; font-weight: 300; }
	#nieuwsoverzicht a.button { display: inline-block; margin-top: 5px; }	
	#nieuwsoverzicht .item { padding-bottom: 40px; }
	hr.divider { display: none; }
	
/* LG */		
@media (max-width: 1140px) {

	#menubar .language { right: 10px; }
	#header .overlay { bottom: -100px; width: 100%;}
	#header .brand { position: absolute; left: 40px; top: 120px; z-index: 99999; transition: 0s linear; transition-property: background-position;}
	#header .melding { display: block; position: absolute; top: 160px; right: 40px; background: rgba(153,153,78, .9); border-radius: 15px; color: #fff; width: 500px; padding: 40px;  transition: 0s linear; transition-property: background-position; z-index: 99999;}	
	#intro { padding: 60px 20px; }
	#dagattracties, #actueel { padding: 80px 20px; }
	#about .img { background: #333; } 
	#about .foto { min-height: 100%; }
}

/* MD */	
@media (max-width: 960px) {

	#menubar a.button { position: absolute; right: 80px; top: 20px; font-size:14px; text-transform: uppercase; padding: 12px 15px; }
	#menubar #menubutton { display: block; }
	#about .foto { height: 400px; } 
	#menubar .language { display: none; }
	#menubar ul.menu { display: none; background: rgba(153,153,78, 1); color: #fff; top: 85px; left: 0px; width: 100%; padding: 10px; }
	#menubar ul.menu li { display: block; width: 100%; text-align: center; padding: 10px 0; }
	#menubar ul.menu li a { color: #fff; font-size: 20px;  }
	#intro .map { padding: 40px 0 5px 0;  }
	#intro .buttons a.button { display: block; }
	#header .overlay2 { position: absolute; width: 100%; bottom: -2px; left: 0px; height: 270px; background: url('/theme/img/header-overlay.png') top center no-repeat ;  z-index:1111111;}
	#header .overlay { position: absolute; width: 100%; bottom: -2px; right: 0px; height: 200px; background: url('/theme/img/header-overlay2.png') no-repeat ; z-index:111111; transition: 0s linear; transition-property: background-position;}
	#header .melding { display: block; position: absolute; top: 140px; right: 30px; background: rgba(153,153,78, .9); border-radius: 15px; color: #fff; width: 370px; padding: 40px;  transition: 0s linear; transition-property: background-position; z-index: 99999;}
	hr.divider { margin: 40px 0; display: block; }
}

/* SM */	
@media (max-width: 540px) {

	#menubar { background: rgba(255,255,255,1); }
	#menubar #menubutton { display: block; }
	#about .foto { height: 250px; }
	#about .tekst { padding: 30px; } 
	#menubar .language { display: none; }
	#menubar ul.menu { display: none; }
	#dagattracties .item { margin-bottom: 25px; }
	#dagattracties .item .text { padding: 10px 0; }
	#subheader h1 { font-size: 35px; }
	#header .brand { position: absolute; left: 10%; top: 100px; z-index: 999; width: 80%; text-align:center;}
	#header .brand img { width: 80%; }
	#header .overlay2 { position: absolute; width: 100%; bottom: -2px; left: 0px; height: 270px; background: url('/theme/img/header-overlay.png') top center no-repeat ;  z-index:1111111;}
	#header .overlay { position: absolute; width: 100%; bottom: -2px; right: 0px; height: 230px; background: url('/theme/img/header-overlay2.png') no-repeat ; z-index:111111; transition: 0s linear; transition-property: background-position;}
	#header .melding { display: block; position: absolute; top: 320px; left: 5%; color: #fff; width: 90%; padding: 20px;}
	#header .melding h2 { font-weight: 300; font-size: 20px; }
	#subheader { height: 300px; }
	#subheader #map_canvas { height: 300px !important; }
	#intro .buttons a.button { display: block; font-size: 14px; }
	#intro .text { padding-right: 10px; }
	#actueel .item { margin-bottom: 30px;}
	#footer { text-align: center; }
	#footer ul { margin: 0; padding: 30px 0 50px 0; }
	#footer ul li i { display: none; }
	#footer ul li a { padding: 10px 0; line-height: 40px;}
	#footer .social { margin-bottom: 40px; }
	.bericht { margin-bottom: 40px; }
	#content .zijbalk { margin-top: 40px; 
	#content .tekst { padding: 10px !important; }
	}
}