/* CSS Document */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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; }


/* CLEARFIX HACK : http://nicolasgallagher.com/micro-clearfix-hack/ */
/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.clearfix:before, .clearfix:after { 
    content: " "; /* 1 */
    display: table; /* 2 */
	line-height:0;
}
.clearfix:after { clear: both; }





@import url('https://fonts.googleapis.com/css?family=PT+Sans:400,700i');

* {	box-sizing: border-box; -moz-box-sizing:border-box; /* Firefox */ margin: 0; padding: 0; }

html, body { /*basis voor baseline grid*/ font-size: 100%; line-height: 1; 
height: 100%; margin: 0; padding: 0; }

body {
	font-family:'PT Sans', sans-serif, Verdana, Arial, Helvetica, sans-serif;
	font-size: .9375em;
	line-height: 1.4;
	background:	url(../images/bg_rich.jpg) top center repeat;
}
.nobreak { white-space: nowrap; } 
.scroller { display: none; }
	img { max-width: 100%; height: auto; }

	td { vertical-align:top; }
		
	#sitecontainer { background: #fff; border-radius: 20px; box-shadow: 5px 5px 10px #666;	}
			
	#kop { /*position:absolute; top:10px; left:0; height:162px; height: 30%; width:367px;*/ position: relative; padding: 1em 1em 1em 0; z-index: 10; }
	
	#clear { clear:both; }
	.align_right { text-align:right; }

	#header { width: 100%;	height: 165px; 	/*border: 1px solid #ccc000;*/ 	}		
	#content { width: 100%; }
	h1 {
		/* titel van pagina */
		font-family: 'PT Sans', sans-serif;
		font-size:2em;
		font-weight: 400;
		margin:0em 0em 10px 0em;
	}
		
		h2 {
			/* subkopjes */
			font-size:1em;
			color:#613810;
			padding:1.5em 0em 0em 0em;
		}

		ul { margin-left: 2em; }
		
	#quote { display: none; }
				
	a:link, a:visited, a:active { color:#1eb5c0; }
	a:hover { color:#7e4e58; }

	.kola { display: block; width: 100%; color:#1fb6c1; padding:2em 2em 0 2em; }
	.kolb { display: block; width: 100%; color:#613810; padding:2em 2em 0 2em;  }
	.kolc { display: block; width: 100%; color:#1fb6c1; padding:2em 2em 0 2em; }		


@media screen and (min-width : 48em)  {	/* 768px */
	#content {
		/*width: 90vw;*/
		max-width: 1320px;          /* required - desired width */
	}
	#kop img { max-width: 48%; }
	#quote { display: inline; position:absolute; top:20px; right: 3em; z-index: 5; max-width: 65%; /*width:510px; height:90px;*/ }
}
		
@media screen and (min-width : 64em)  {	/* 1024px */

	body {
		background:	url(../images/bg_rich.jpg) top center no-repeat;
		background-attachment:fixed;
	}

	#navigatie { position:absolute; top:130px; left:165px; width: 100%; height: 40px; }
	#content {
		height:	calc(90vh - 165px);
		/*width: 80vw;
		width: 100%;*/
		max-height: 525px;          /* required - desired height */
		max-width: 1320px;          /* required - desired width */
		display: flex;
		flex-direction: row;
		align-items: stretch;
		padding-bottom: 1em;
	}
	#quote { max-width: 100%; }
	.kola_nomobile { display: block; }
	.kola, .kola_nomobile { overflow-y: auto; width: 22%; color:#1fb6c1; padding:1em; align-self: flex-end; }
	.kolb { overflow-y: auto; width: 56%; color:#613810; padding:1em;  }
	.kolc { overflow-y: auto; width: 22%; color:#1fb6c1; padding:1em; }		
}

@media screen and (min-width : 76.25em)  {	/* 1220px */
	#content {
		height:	calc(80vh - 165px);
		width: 80vw;
		max-height: 525px;          /* required - desired height */
		max-width: 1320px;          /* required - desired width */
		display: flex;
		flex-direction: row;
		align-items: stretch;
	}
}