@import url('https://cdn.jsdelivr.net/npm/@mdi/font@7.4.47/css/materialdesignicons.min.css');

/* TYPOGRAPHY */
@font-face {
    font-family: 'roboto_thin';
    src: url('..//fonts/Roboto-Thin-webfont.eot');
    src: url('..//fonts/Roboto-Thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('..//fonts/Roboto-Thin-webfont.woff2') format('woff2'),
         url('..//fonts/Roboto-Thin-webfont.woff') format('woff'),
         url('..//fonts/Roboto-Thin-webfont.ttf') format('truetype'),
         url('..//fonts/Roboto-Thin-webfont.svg#roboto_thin') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'roboto_light';
    src: url('..//fonts/Roboto-Light-webfont.eot');
    src: url('..//fonts/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('..//fonts/Roboto-Light-webfont.woff2') format('woff2'),
         url('..//fonts/Roboto-Light-webfont.woff') format('woff'),
         url('..//fonts/Roboto-Light-webfont.ttf') format('truetype'),
         url('..//fonts/Roboto-Light-webfont.svg#roboto_light') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'roboto_regular';
    src: url('..//fonts/Roboto-Regular-webfont.eot');
    src: url('..//fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('..//fonts/Roboto-Regular-webfont.woff2') format('woff2'),
         url('..//fonts/Roboto-Regular-webfont.woff') format('woff'),
         url('..//fonts/Roboto-Regular-webfont.ttf') format('truetype'),
         url('..//fonts/Roboto-Regular-webfont.svg#roboto_regular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'roboto_medium';
    src: url('..//fonts/Roboto-Medium-webfont.eot');
    src: url('..//fonts/Roboto-Medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('..//fonts/Roboto-Medium-webfont.woff2') format('woff2'),
         url('..//fonts/Roboto-Medium-webfont.woff') format('woff'),
         url('..//fonts/Roboto-Medium-webfont.ttf') format('truetype'),
         url('..//fonts/Roboto-Medium-webfont.svg#roboto_medium') format('svg');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'roboto_black';
    src: url('..//fonts/Roboto-Black-webfont.eot');
    src: url('..//fonts/Roboto-Black-webfont.eot?#iefix') format('embedded-opentype'),
         url('..//fonts/Roboto-Black-webfont.woff2') format('woff2'),
         url('..//fonts/Roboto-Black-webfont.woff') format('woff'),
         url('..//fonts/Roboto-Black-webfont.ttf') format('truetype'),
         url('..//fonts/Roboto-Black-webfont.svg#roboto_black') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'roboto_blackitalic';
    src: url('..//fonts/Roboto-BlackItalic-webfont.eot');
    src: url('..//fonts/Roboto-BlackItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('..//fonts/Roboto-BlackItalic-webfont.woff2') format('woff2'),
         url('..//fonts/Roboto-BlackItalic-webfont.woff') format('woff'),
         url('..//fonts/Roboto-BlackItalic-webfont.ttf') format('truetype'),
         url('..//fonts/Roboto-BlackItalic-webfont.svg#roboto_blackitalic') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'roboto_regular';
    src: url('..//fonts/Roboto-Regular-webfont.eot');
    src: url('..//fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('..//fonts/Roboto-Regular-webfont.woff2') format('woff2'),
         url('..//fonts/Roboto-Regular-webfont.woff') format('woff'),
         url('..//fonts/Roboto-Regular-webfont.ttf') format('truetype'),
         url('..//fonts/Roboto-Regular-webfont.svg#roboto_condensedlight') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'roboto_bold';
    src: url('..//fonts/Roboto-Bold-webfont.eot');
    src: url('..//fonts/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('..//fonts/Roboto-Bold-webfont.woff2') format('woff2'),
         url('..//fonts/Roboto-Bold-webfont.woff') format('woff'),
         url('..//fonts/Roboto-Bold-webfont.ttf') format('truetype'),
         url('..//fonts/Roboto-Bold-webfont.svg#roboto_bold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'roboto_italic';
    src: url('..//fonts/Roboto-Italic-webfont.eot');
    src: url('..//fonts/Roboto-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('..//fonts/Roboto-Italic-webfont.woff2') format('woff2'),
         url('..//fonts/Roboto-Italic-webfont.woff') format('woff'),
         url('..//fonts/Roboto-Italic-webfont.ttf') format('truetype'),
         url('..//fonts/Roboto-Italic-webfont.svg#roboto_italic') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'roboto_light';
    src: url('..//fonts/Roboto-Light-webfont.eot');
    src: url('..//fonts/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('..//fonts/Roboto-Light-webfont.woff2') format('woff2'),
         url('..//fonts/Roboto-Light-webfont.woff') format('woff'),
         url('..//fonts/Roboto-Light-webfont.ttf') format('truetype'),
         url('..//fonts/Roboto-Light-webfont.svg#roboto_light') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'roboto_lightitalic';
    src: url('..//fonts/Roboto-Light-webfont.eotItalic');
    src: url('..//fonts/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('..//fonts/Roboto-Light-webfont.woff2') format('woff2'),
         url('..//fonts/Roboto-Light-webfont.woff') format('woff'),
         url('..//fonts/Roboto-Light-webfont.ttf') format('truetype'),
         url('..//fonts/Roboto-Light-webfont.svg#roboto_lightitalic') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'roboto_thinitalic';
    src: url('..//fonts/Roboto-Thin-webfont.eot');
    src: url('..//fonts/Roboto-Thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('..//fonts/Roboto-Thin-webfont.woff2') format('woff2'),
         url('..//fonts/Roboto-Thin-webfont.woff') format('woff'),
         url('..//fonts/Roboto-Thin-webfont.ttf') format('truetype'),
         url('..//fonts/Roboto-Thin-webfont.svg#roboto_thinitalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'roboto_condensed_thin';
    src: url('..//fonts/RobotoCondensed-Thin-webfont.eot');
    src: url('..//fonts/RobotoCondensed-Thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('..//fonts/RobotoCondensed-Thin-webfont.woff2') format('woff2'),
         url('..//fonts/RobotoCondensed-Thin-webfont.woff') format('woff'),
         url('..//fonts/RobotoCondensed-Thin-webfont.ttf') format('truetype'),
         url('..//fonts/RobotoCondensed-Thin-webfont.svg#roboto_condensed_thin') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'roboto_condensed_light';
    src: url('..//fonts/RobotoCondensed-Light-webfont.eot');
    src: url('..//fonts/RobotoCondensed-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('..//fonts/RobotoCondensed-Light-webfont.woff2') format('woff2'),
         url('..//fonts/RobotoCondensed-Light-webfont.woff') format('woff'),
         url('..//fonts/RobotoCondensed-Light-webfont.ttf') format('truetype'),
         url('..//fonts/RobotoCondensed-Light-webfont.svg#roboto_condensed_light') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'roboto_condensed_regular';
    src: url('..//fonts/RobotoCondensed-Regular-webfont.eot');
    src: url('..//fonts/RobotoCondensed-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('..//fonts/RobotoCondensed-Regular-webfont.woff2') format('woff2'),
         url('..//fonts/RobotoCondensed-Regular-webfont.woff') format('woff'),
         url('..//fonts/RobotoCondensed-Regular-webfont.ttf') format('truetype'),
         url('..//fonts/RobotoCondensed-Regular-webfont.svg#roboto_condensed_regular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'roboto_condensed_medium';
    src: url('..//fonts/RobotoCondensed-Medium-webfont.eot');
    src: url('..//fonts/RobotoCondensed-Medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('..//fonts/RobotoCondensed-Medium-webfont.woff2') format('woff2'),
         url('..//fonts/RobotoCondensed-Medium-webfont.woff') format('woff'),
         url('..//fonts/RobotoCondensed-Medium-webfont.ttf') format('truetype'),
         url('..//fonts/RobotoCondensed-Medium-webfont.svg#roboto_condensed_medium') format('svg');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'roboto_condensed_black';
    src: url('..//fonts/RobotoCondensed-Black-webfont.eot');
    src: url('..//fonts/RobotoCondensed-Black-webfont.eot?#iefix') format('embedded-opentype'),
         url('..//fonts/RobotoCondensed-Black-webfont.woff2') format('woff2'),
         url('..//fonts/RobotoCondensed-Black-webfont.woff') format('woff'),
         url('..//fonts/RobotoCondensed-Black-webfont.ttf') format('truetype'),
         url('..//fonts/RobotoCondensed-Black-webfont.svg#roboto_condensed_black') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'roboto_condensed_blackitalic';
    src: url('..//fonts/RobotoCondensed-BlackItalic-webfont.eot');
    src: url('..//fonts/RobotoCondensed-BlackItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('..//fonts/RobotoCondensed-BlackItalic-webfont.woff2') format('woff2'),
         url('..//fonts/RobotoCondensed-BlackItalic-webfont.woff') format('woff'),
         url('..//fonts/RobotoCondensed-BlackItalic-webfont.ttf') format('truetype'),
         url('..//fonts/RobotoCondensed-BlackItalic-webfont.svg#roboto_condensed_blackitalic') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'roboto_condensed_regular';
    src: url('..//fonts/RobotoCondensed-Regular-webfont.eot');
    src: url('..//fonts/RobotoCondensed-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('..//fonts/RobotoCondensed-Regular-webfont.woff2') format('woff2'),
         url('..//fonts/RobotoCondensed-Regular-webfont.woff') format('woff'),
         url('..//fonts/RobotoCondensed-Regular-webfont.ttf') format('truetype'),
         url('..//fonts/RobotoCondensed-Regular-webfont.svg#roboto_condensed_condensedlight') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'roboto_condensed_bold';
    src: url('..//fonts/RobotoCondensed-Bold-webfont.eot');
    src: url('..//fonts/RobotoCondensed-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('..//fonts/RobotoCondensed-Bold-webfont.woff2') format('woff2'),
         url('..//fonts/RobotoCondensed-Bold-webfont.woff') format('woff'),
         url('..//fonts/RobotoCondensed-Bold-webfont.ttf') format('truetype'),
         url('..//fonts/RobotoCondensed-Bold-webfont.svg#roboto_condensed_bold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'roboto_condensed_italic';
    src: url('..//fonts/RobotoCondensed-Italic-webfont.eot');
    src: url('..//fonts/RobotoCondensed-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('..//fonts/RobotoCondensed-Italic-webfont.woff2') format('woff2'),
         url('..//fonts/RobotoCondensed-Italic-webfont.woff') format('woff'),
         url('..//fonts/RobotoCondensed-Italic-webfont.ttf') format('truetype'),
         url('..//fonts/RobotoCondensed-Italic-webfont.svg#roboto_condensed_italic') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'roboto_condensed_light';
    src: url('..//fonts/RobotoCondensed-Light-webfont.eot');
    src: url('..//fonts/RobotoCondensed-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('..//fonts/RobotoCondensed-Light-webfont.woff2') format('woff2'),
         url('..//fonts/RobotoCondensed-Light-webfont.woff') format('woff'),
         url('..//fonts/RobotoCondensed-Light-webfont.ttf') format('truetype'),
         url('..//fonts/RobotoCondensed-Light-webfont.svg#roboto_condensed_light') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'roboto_condensed_lightitalic';
    src: url('..//fonts/RobotoCondensed-Light-webfont.eotItalic');
    src: url('..//fonts/RobotoCondensed-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('..//fonts/RobotoCondensed-Light-webfont.woff2') format('woff2'),
         url('..//fonts/RobotoCondensed-Light-webfont.woff') format('woff'),
         url('..//fonts/RobotoCondensed-Light-webfont.ttf') format('truetype'),
         url('..//fonts/RobotoCondensed-Light-webfont.svg#roboto_condensed_lightitalic') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'roboto_condensed_thinitalic';
    src: url('..//fonts/RobotoCondensed-Thin-webfont.eot');
    src: url('..//fonts/RobotoCondensed-Thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('..//fonts/RobotoCondensed-Thin-webfont.woff2') format('woff2'),
         url('..//fonts/RobotoCondensed-Thin-webfont.woff') format('woff'),
         url('..//fonts/RobotoCondensed-Thin-webfont.ttf') format('truetype'),
         url('..//fonts/RobotoCondensed-Thin-webfont.svg#roboto_condensed_thinitalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
  font-family: "roboto_light", Roboto, Arial, sans-serif;
  color: ##2D2626;
  font-size: 1em;
  margin-top: 0em;
  margin-bottom: 1em;
  font-weight: 100;
  background: #ffffff;
  margin:0;
  line-height: 145%;}

p {
  font-size: 1em;
  line-height: 145%;
  margin-top: 0;
  margin-bottom: 1em;
  font-weight: 100;
  font-family: "roboto_light", Roboto, Arial, sans-serif;
  }

p a:link {
  color: #288EAD !important;
  font-family: "roboto_medium", Roboto, Arial, sans-serif;
  text-decoration: none;
  font-weight: bolder;
  font-size: 1em;
  font-style: italic;
  }

body{	}
a{		text-decoration: none;
        color: darkorange}
a:		focus{outline:thin dotted;}

h1 {
  margin-top: 1em;
  margin-bottom: 1em;
  font-family: "roboto_thin", Roboto, Arial, sans-serif;
  font-weight: 100;
	line-height: 120%;
  color: #333;}
h2 {
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  font-size: 1.3em;
  font-family: "roboto regular", Roboto, Arial, sans-serif;
  font-weight: 100;
  color: #0288D1;}
h3 {
  margin-top: 1em;
  margin-bottom: 0.25em;
  font-family: "roboto_thin", Roboto, Arial, sans-serif;
  font-weight: 100;
  color: #333;
  font-style: italic;}
h4 {
  margin-top: 1em;
  margin-bottom: 0.155em;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 100;
  color: #333;}
h5 {
  margin-top: 0.5em;
  margin-bottom: 0.1em;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 100;
  color: #333;}
h6 {
  margin-top: 0.5em;
  margin-bottom: 0.1em;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 100;
  color: #333;}

b, strong{
  font-weight: 500;}

blockquote{margin:1em 40px;}
blockquote{
  border-left: 3px solid #1abc9c;
  background: #F9F9F9;}

code {
  max-width: 100%;
  white-space: pre-wrap;}

tbody tr:nth-child(odd) {
   background-color: #ccc;}
/* vertical menu */
nav.vertical ul li{
	display:block;}
/* horizontal menu */
nav.horizontal ul li{
	display: inline-block;}
.pos-rel{
	position:relative;}
.clearfix{
	clear:both;}
img{
	border:1px solid #021a40;-ms-interpolation-mode:bicubic; 
	max-width:100%;}
article,aside,details,figcaption,figure,hgroup,nav,section,summary{display:block;}

.borderless{
    border:0px;-ms-interpolation-mode:bicubic; 
	max-width:100%;}

    
audio,canvas,video{
	display:inline-block;
	*display:inline;
	*zoom:1;}
[hidden]{display:none;}
html{
	font-size:100%;
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust:100%;}
html,button,input,textarea{
	font-family:sans-serif;}

abbr[title]{border-bottom:1px dotted;}


dfn{font-style:italic;}
mark{background:#ff0;color:#000;}

pre,code,kbd,samp{font-family:monospace, serif;_font-family:'courier new',monospace;font-size:1em;}
pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word;}
q{quotes:none;}
q:before,q:after{content:'';content:none;}
small{font-size:75%;}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
sup{top:-0.5em;}
sub{bottom:-0.25em;}
address{margin-bottom:10px;}

dt {font-weight:bold ;
	font-size: 1em;
	color: #333;
    text-decoration: ;}
dd {margin: 0;
    padding: 0em 0em 0.8em 2em;
    font-size: 0.9em;
    background: url(arrow.gif) no-repeat 0em 0.3em;}

/* styling */

.wrap{
	width:auto;
	margin:0 10px;}

.footer{
	background: #0288D1;
	text-align:center;
	padding: 20px;
	}

.copyright{
	color:#ffffff;
	font-size:0.8em;
	text-align:center;}
	
.designedforchrome{
	font-size:0.7em; 
	margin:10px 0; 
	text-align:center;
	color:#F0F0F0;}

.designedforchrome img{
	border: 0px;
	vertical-align:-6px;}

ul.small{font-size:0.8em;}

ul.small a{font-weight:normal;}



.separator{
	margin:15px 0;
	opacity:0.4;
	border-width: 1px;
	border-bottom:none;}
.header+.separator{margin-top:0;}

.attachmentcontainer{
	background: #F4F4F4
}

.attachment{
	padding: 30px;
	padding-left: 15px;
    font-family: "roboto_regular", Roboto, Arial, sans-serif;
    font-style: italic;
    font-size: 0.9em;
}
.attachment li {
   list-style-image: url('..//stationary/paperklip.png');
   line-height: 2.5em;
}
.attachment a {
    color: #0D0D0D;
}





table{border-collapse:collapse;
	border-spacing:0;
    padding:20px;
    margin:0;
    width:100%;}

/*definiering van de zebrakleuren in tabellen */ 

tbody tr:nth-of-type(even){
  background:#F8F8F8;}
tbody tr:nth-of-type(odd){
  background:#FFFFFF;}


th.{
	border-left: 1px solid #A1A1A1;
	border-top: 0;
	background: #fff url(img/bullet1.gif) no-repeat;
	font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;}

th.specalt {
	border-left: 1px solid #A1A1A1;
	border-top: 0;
	background: #f5fafa url(img/bullet2.gif) no-repeat;
	font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	color: #797268;}

th {
	font: bold 0.7em "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
	border-right: 1px solid #A1A1A1;
	border-left: 1px solid #A1A1A1;
	border-bottom: 1px solid #E9E9E9;
	border-top: 1px solid #A1A1A1;
	letter-spacing: 2px;
	text-transform: uppercase;
	padding: 6px 6px 6px 12px;
	background: #ccc;}

th.nobg {
	border-top: 0;
	border-left: 0;
	border-right: 1px solid #E9E9E9;
	background: none;}

td {
	border-right: 1px solid #A1A1A1;
	border-left: 1px solid #A1A1A1;
	border-top: 1px solid #A1A1A1;
    border-bottom: 1px solid #A1A1A1;
	padding: 6px 6px 6px 12px;
	color: #000000;
	font-size: 0.8em;}

/* Formulieren */ 
form label{
	font-size:12px;
	margin-bottom: 0.4em;
	
	}
form.contact-form{margin-bottom:20px;}
form input[type=text],
form input[type=password],textarea{
	-webkit-appearance:none;
	-moz-appearance:none;}
form input[type="radio"]{
	position:relative;
	top:1px;}
form div{
	margin:0 0 0.8em 0;}
form textarea{
	height:80px;}
label{display:block;}
form label span.red{
	color:#ff0000;}
form input[type=submit]{
	cursor: pointer;	}
form input[type=submit],
form input[type=text],
form input[type=password],
form textarea{
	padding:5px;}
form input[type=text],
form input[type=password],
form textarea,
form input[type=submit]{
	background:#fafafa;
	border:1px solid #ddd;
	width:100%;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;}
form input:focus,
form textarea:focus{
	outline:1px solid #00baff;}
form input[type=submit]{
	width:100%;
	background: #f9fcf7;
	background: -moz-linear-gradient(top,  #f9fcf7 0%, #eee 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9fcf7), color-stop(100%,#eee));
	background: -webkit-linear-gradient(top,  #f9fcf7 0%,#eee 100%);
	background: -o-linear-gradient(top,  #f9fcf7 0%,#eee 100%);
	background: -ms-linear-gradient(top,  #f9fcf7 0%,#eee 100%);
	background: linear-gradient(to bottom,  #f9fcf7 0%,#eee 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9fcf7', endColorstr='#eee',GradientType=0 );
	color:#565656;
	font-weight:bold;
	font-size:0.8em;
	padding:10px;}

.inline input,.inline label{display:inline-block !important;}
/* typography */

blockquote{background:url("..//stationary/quotes.png") no-repeat top left;padding-left:40px;min-height:30px;margin:5px 0 30px 0;font-size:0.8em;line-height:1.6em;color:#767676;}



/* menu */
.filter{
        margin:20px 0 10px 0;
        padding:0 10px;
        }
.filter__label{
        display:block;
        font-size:0.75em;
        color:#4a4a4a;
        margin-bottom:5px;
        letter-spacing:0.05em;
        text-transform:uppercase;
        }
.letter-filter{
        display:flex;
        flex-wrap:wrap;
        gap:8px;
        margin-bottom:10px;
        padding:0;
        list-style:none;
        }
.letter-filter__button{
        border:1px solid #d0d0d0;
        border-radius:16px;
        background:#ffffff;
        color:#4a4a4a;
        font-size:0.85em;
        padding:6px 14px;
        cursor:pointer;
        transition:background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
        }
.letter-filter__button:hover,
.letter-filter__button:focus{
        background:#f1f1f1;
        outline:none;
        }
.letter-filter__button--active{
        background:#f1f1f1;
        border-color:#4a4a4a;
        color:#000000;
        font-weight:700;
        }
.letter-filter__active{
        min-height:32px;
        display:flex;
        align-items:center;
        }
.letter-filter__pill{
        display:inline-flex;
        align-items:center;
        gap:8px;
        background:#f2f2f6;
        color:#5f6368;
        border:1px solid #d3d7df;
        border-radius:999px;
        padding:4px 12px;
        font-size:0.85em;
        box-shadow:0 1px 2px rgba(15,23,42,0.08);
        cursor:pointer;
        font-family:inherit;
        line-height:1.2;
        transition:background 0.2s ease, box-shadow 0.2s ease;
        }
.letter-filter__pill:hover,
.letter-filter__pill:focus{
        background:#e6e6eb;
        box-shadow:0 2px 4px rgba(15,23,42,0.12);
        outline:none;
        }
.letter-filter__pill-label{
        display:inline-flex;
        align-items:center;
        line-height:1.2;
        }
.letter-filter__pill-icon{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        font-size:1em;
        line-height:1;
        }
.menu{
        margin:20px 10px;
        padding:0;
        display:flex;
        flex-wrap:wrap;
        gap:10px;
        }
.menu a{
        font-size:12px;
        font-weight:normal;
        text-align:center;
        display:block;
        background:#ffffff;
        border:1px solid #000000;
        color:#000000;
        padding:10px;
        margin:10px 0;
        -moz-border-radius:2px;
        -webkit-border-radius:2px;
        border-radius:2px;
        -moz-box-shadow:none;
        -webkit-box-shadow:none;
        box-shadow:none;
        }
.menu.menu--books{
        display:flex;
        flex-wrap:wrap;
        gap:10px;
        }
.menu.menu--books a{
        display:inline-flex;
        align-items:center;
        justify-content:flex-start;
        padding:10px 14px;
        margin:0;
        text-align:left;
        gap:8px;
        box-sizing:border-box;
        }
.menu.menu--books .book-icon{
        font-size:18px;
        line-height:1;
        }
.menu.menu--books .book-label{
        line-height:1.2;
        }
.menu.menu--translations{
        display:block;
        width:100%;
        }
.menu.menu--translations a{
        width:100%;
        }
.menu.menu--books .menu-empty{
        width:100%;
        margin:0;
        }
.menu-empty{
        display:none;
        font-size:0.85em;
        color:#666666;
        text-align:center;
        margin:10px 0;
        }
.menu a:hover{
        color:#000000;
        -moz-box-shadow:none;
        -webkit-box-shadow:none;
        box-shadow:none;
        }

@media (max-width: 640px){
        .menu.menu--books{
                width:100%;
                flex-direction:column;
        }
        .menu.menu--books a{
                width:100%;
        }
}

/* tabellen */

caption {
	padding: 0 0 5px 0;
	width: 700px;	 
	font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	text-align: right;}

/* metro: voor links die naar een sectie in de pagina verwijzen: <a href="LINK" class="metro">TITEL</a> */
.metro {
  display: inline-block;
  padding: 3px;
  margin: 1px;
  background: #08C;

  color: white;
  font-weight: 200;
  font: 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
  text-decoration: none;}

.metro:hover { background: #323232; color: white;}

.metro::before {
    background-color:#00000;
    background-repeat:no-repeat;
    background-position:center center;
    content:"# ";

}

/* Control the left side */
.left {
  left: 0;
}

/* Control the right side */
.right {
  right: 0;
  margin-bottom: 10px;
}

.split {
  height: 100%;
  width: 50%;
  position: absolute;
  z-index: auto;
  top: 0;
  overflow-x: visible;
  padding-top: 20px;
}