@font-face {
	font-family: 'SayItFat';
	src:  url('/fonts/sayitfat.otf') format('opentype');
	font-style: normal;
	font-weight: 400;
}

@font-face {
	font-family: 'SegoeSymbol';
	src:  url('/fonts/segoe-ui-symbol.ttf') format('truetype');
	font-style: normal;
	font-weight: 400;
}

body	{
	font-size: 1.2vw;

}



body	{
	font-family: "Panton W04";
	font-weight: 400;
	line-height: 1.6em;
	text-rendering: optimizeLegibility;
	font-feature-settings: liga, dlig, hlig, kern, onum, frac,case; 
	font-feature-settings: 'frac' 1;

}

h1 {
	margin-top: .8em;
	margin-bottom: .2em;
	font-size: 140%;
	font-weight: 700;
	color: rgba(0,128,0,1);
}

h1 + p {
	margin-top: 0;
}

h2 {
	margin-top: .8em;
	margin-bottom: .2em;
	font-size: 100%;
	font-weight: 600;
	color: rgba(0,128,0,1);
	page-break-after: avoid;
}

h2 + p {
	margin-top: 0;
}

h3	{
	cursor: pointer;
	font-weight: 600;
	color: rgba(0,160,0,1);
	display: table;
	page-break-after: avoid;
}

h3+p, h3+h4 {
	margin-top: -1em;
	
}

h4 {
	cursor: pointer;
	font-weight: 600;
	color: rgba(1,192,0,1);
	margin-left: 0;
	margin-top: 0; 
	margin-bottom: 0;
	display: table;
	width: auto;
	page-break-after: avoid;
}


h5 {
	
	font-weight: 600;
	color: rgba(1,124,0,1);
	font-size: 100%;
	page-break-after: avoid;
}

h5 + p {
	margin-top: -2em;
}

h5 + div {
	margin-top: -1em;
}

.dbt_subhead {
	cursor: pointer;
	margin-bottom: 0;
}

small {font-size: 70%}

#backdrop	{
	background-image: url('/img/02F49621.jpg');
	background-size: 100%;
	position: absolute;
	width: 98vw;
	height: 98vh;
	border: solid 2px green;
	top: 1vh;
	left: 1vw;
	overflow: hidden;
}

#cliptext	{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	vertical-align: top;
	border: solid 2px blue;
	background-color: white;
	margin-top: 0;
	font-family: SayItFat;
	font-size: 34vw;
	line-height: 0.53em;
	color: black;
	mix-blend-mode: screen;
	transform: scale(1,2.1);
	transform-origin: top;
	overflow: hidden;
	text-shadow: 2px 2px aqua, 2px -2px aqua, -2px 2px aqua, -2px -2px aqua ;
}

#overlay	{
	width: 100%; height: 100%;
	position: absolute;
	top: 0;
	mix-blend-mode: multiply;
	}
	


#menulink {
	position: fixed;
	width: 3vw;
	height: 3vw;
	right: 1em;
	top: 1em;
	perspective: 1000px;
	perspective-origin: 50% 50%;
	border: none;
	z-index: 3;
}

#flip_menu {
	position: absolute;
	width: 100%;
	height:100%;
	transform-style: preserve-3d;
	transition: transform 2s;
}


#flip_menu div {
	margin: 0;
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
	background-repeat: no-repeat;
	background-size: cover;
	border: solid 1px red;
	border-radius: 1ex;
	cursor: pointer;
}

#flip_voor {
	background-image: url('/img/icon-hires.png');

}

#flip_achter {
	background-image: url('/img/maatles_logo_flip.jpg');
	transform: rotateY( 180deg );
}

#flip_menu.flipped {
	transform: rotateY( 180deg );
	transition: transform 2s;
}

#menu_sign {
	position: absolute;
	color: green;
	top: 3.5em;
	left: .5ex;
	text-align: center;
	display: block;
	font-size: 70%;
	font-variant: small-caps;
	letter-spacing: .5ex;
}

#nomobile {
	display: none;
}


#hoofdmenu {
	background-color: white;
	list-style: none;
	color: FireBrick;
	position: fixed;
	right: 2em;
	top: 7em;
	font-weight: 700;
	font-size: 70%;
	font-variant: small-caps;
	letter-spacing: .5ex;
	z-index: 4;
}

.itemselected {
	color: CornflowerBlue;
	transition: color 1s;

}

.itemunselected {
	color: FireBrick;
	transition: color 1s;
}

#hoofdmenu li:hover {
	color: cornflowerblue;
	cursor: pointer;
	transition: color 1s;
	
}

#tekst {
  position: absolute;
  left: 8vw;
  right: 12vw;
  margin-top: 5em;
  border-top: solid DarkGreen 2px;
  padding-top: 1em;
  hyphens: auto;
  z-index: 1;
  
}

.mod_desc {
	column-break-inside: avoid;
	webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	break-inside: avoid-column;
	break-inside: avoid;
	border-radius: 1ex;
	padding-left: 2em;
	padding-right: 1em;
	background-color: rgba(128,128,128,.2)
}

.modlinkhot {
	border-bottom: solid 1px FireBrick;
}


.keep {
	column-break-inside: avoid;
	webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	break-inside: avoid-column;
	break-inside: avoid;

}

.onzichtbaar {
	opacity: 0;
	transition: opacity 3s;
	z-index: -100;
}

.zichtbaar {
	opacity: 1;
	transition: opacity 3s;
	z-index: 15;
}

.nodisplay {
	display: none;
}

#titel_small {
	display: block;
	font-weight: 300;
	font-size: 300%;
	position: absolute;
	height: 2em;
	top: .3em;
	left: 8vw;
	opacity: 0;
}

#titel_small_zichtbaar {
	display: block;
	font-weight: 300;
	font-size: 240%;
	position: absolute;
	height: 2em;
	top: 1em;
	left: 8vw;
	opacity: 1;
	transition: opacity 3s;
	}

em {
	color: FireBrick; font-weight: inherit; font-style: inherit; text-decoration: none; 
}

b {
	font-style: inherit; 
	
}

i {
	font-weight: inherit;  
	
}


a {
	color: rgba(216,140,0,1)
}

.nav-at-end {
	list-style: none;
	text-indent: 0;
	padding: 1ex;
	display: inline-block;
	background-color: rgba(0,111,0,1);
	color: rgba(0,255,0,.7);
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	cursor: pointer;
	border-radius: .5ex;
}

.nav-at-end li {
	display: inline-block;
}

q {quotes: '\2018' '\2019' '\2039' '\203A' '\25DC' '\25DD'}
q:before {content: open-quote}
q:after {content: close-quote}

cite {quotes: '\201C' '\201D' '\00AB' '\00BB' '\25DC \25DC' '\25DD \25DD'; font-style: normal; }
cite:before {content: open-quote}
cite:after {content: close-quote}

ins {quotes: "(" ")" "[" "]" "\2329" "\232A"; text-decoration: none;}
ins:before {content: open-quote}
ins:after {content: close-quote}

.ul_1, .ul_2, .ul_3 {
	list-style: none;
	text-indent: 0;
	padding: 0;
	display: flex;
	justify-content: space-between;
}

.ul_2 {
	flex-wrap: wrap;
	justify-content: flex-start;

}

.ul_3 {
	display: block;
}

.ul_1 li, .ul_2 li, .ul_3 li {
	display: inline-block;
	font-size: 80%;
	width: 14em;
	margin-left: 0;	
	margin-right: 1em;
	padding: .5ex;
	text-indent: 0;
	border: solid green .2ex;
	border-radius: 1ex;
	background-color: rgba(0,128,0,.2);
}

.ul_2 li {
	text-align: center;
	margin-bottom: 1em;
}

.ul_3 li {
	width: 95%;
	margin-right: 5vw;
	margin-bottom: 2vh;
}

.ul_3 li p:first-child {
	color: rgba(0,96,0,1);
	margin-bottom: 0;
	font-weight: 500;
}

.ul_3 li p:nth-child(2) {
	margin-top: 0;
	margin-bottom: 0;
}

.ul_3 li p:nth-child(3) {
	margin-top: 0;
	font-style: italic;
	
}

#beschrijving_container .lay-out {
	columns: 2;
	column-gap: 8vw;
}

#nav_mod { /* een tweesw hamburger voor de modules, alleen actief in  maatles_klein.css*/
	display: none;
}

#modules_container .lay-out {
	display: flex;
	justify-content: space-between;
	
}

#modules_lijst {
	flex-basis: 30%;
}

#modules_info {
	flex-basis: 65%;
	height: 80vh;
	background-color: rgba(0,128,0,.1);
	border-radius: 1ex;
	padding-left: 1em;
	padding-right: 1em;
}

.sectie_titel {
	font-size: 150%;
	margin-top: .5em;
	margin-bottom: .2em;
	color: Maroon;
}

#ruler {
	background-color: FireBrick;
	height: 0.1ex;
}


#fix_bottom {
	display: block;
	position: fixed;
	width: 32px;
	height: 218px;
	right: -1px;
	bottom: 10vh;
	z-index: 5;
	padding: 0;

	}
	
#fix_bottom img {
	border: none;
	width: 100%;
	height: 32px;
}	


#smi_1 {position: absolute; top: 0;}
#smi_2 {position: absolute; top: 31px;}
#smi_3 {position: absolute; top: 62px;}
#smi_4 {position: absolute; top: 93px;}
#smi_5 {position: absolute; top: 124px;}
#smi_6 {position: absolute; top: 155px;}
#smi_7 {position: absolute; top: 186px;}

.vraag		{
	font-weight: 500;
	margin-bottom: 0;
	cursor: pointer;
	
}
.antwoord	{
	margin-top: 0;
	font-style: italic;


}


.noot {
	position: fixed;
	left: 2em;
	top: 2em;
	width: 25vw;
	border: solid 2px FireBrick;
	border-radius: .5ex;
	background-color: rgba(255,255,255,1);
	padding: 1ex;
	padding-top: 3em;
	
}


.nootnum {
	font-weight: 700;
	color: rgba(0,96,0,1);
	font-size: 150%;
	line-height: 0;
	cursor: pointer;
}

.sluit {
	position: absolute;
	display: table;
	top: 0ex;
	right: 0ex;
	padding: .5em;
	padding-top: .2ex;
	padding-bottom: .2ex;
	z-index: 11;
	background-color: rgba(0,111,0,1);
	border-radius: 0.3ex;
	color: rgba(0,255,0,.4);
	font-weight: 600;
	cursor: pointer
}

table#verslag {
	border-collapse: collapse;
	border: 0.1ex solid FireBrick;
	width: 75vw;
	margin-bottom: 3vh;
}


td, th {
	padding-left: 2em;
	padding-right: 2em;
	vertical-align: top;
	border: 0.1ex solid FireBrick;
	font-size: 90%;
}

.td_datum {
	white-space: nowrap;
}

th {
	text-align: left;
	color:  rgba(0,160,16,.5);
}

caption {
	background: rgba(0,160,16,.1);
	border: 0.1ex solid FireBrick;
	border-bottom: none;
	height: 2vw;
}


.inv {display: none; }

.frame_left {
	border: solid darkred 2px; 
	border-radius: 2em; 
	overflow-x: hidden; 
	overflow-y: hidden;
	width: 50vw; 
	height: 28.5vw;
	}


figcaption {
	background-color: Darkred; 
	color: white; 
	padding-top: 1em;
	padding-left: 2em; 
	padding-right: 2em; 
	font-size: 90%; 
	margin-top: -0.5em; 
	height: 4vw;}

.img_cont {
	overflow-x: hidden;
	overflow-y: scroll;
	height: 25.5vw;
	width: 140%;
	padding: 0;
	background-color: rgba(111,111,111,.3);
}

.img_cont img {
	width: 74%; 
	margin: 0;
	cursor: pointer;
	}


#slider {
	position: relative;
	height: 34vw;
	
	}

.frame_left {
	position: absolute;
	left: 0vw;
	
	}


.slide_left {
	transform: translate(-100vw);
	transition: transform 1s ease;
	}
	
.slide_center {
	transform: translate(0);
	transition: transform 1s ease;
	}
.slide_right {
	transform: translate(100vw);
	transition: transform 1s ease;
}

.slide_left_ {
	transform: translate(-100vw);
	}
	
.slide_center_ {
	transform: translate(0);
	}

.slide_right_ {
	transform: translate(100vw);
}


#slidecontrols {
	position: absolute;
	width: 50vw;
	bottom: 2vh;
	display: flex;
	justify-content: space-between;
	font-size: 2em;
	color: rgba(0,128,0,1);
	font-family: "SegoeSymbol";
	cursor: pointer;
}

#sc_middle {}




/*
font-family:'Panton Icons W95 A Light';
font-family:'Panton Icons W95 A Regular';
font-family:'Panton Icons W95 A Fill Light';
font-family:'Panton Icons W95 A Fill Rg';

font-family:'Panton Icons W95 B Light';
font-family:'Panton Icons W95 B Regular';
font-family:'Panton Icons W95 B Fill Light';
font-family:'Panton Icons W95 B Fill Rg';

font-family:'Panton Icons W95 C Light';
font-family:'Panton Icons W95 C Regular';
font-family:'Panton Icons W95 C Fill Light';
font-family:'Panton Icons W95 C Fill Rg';

font-family:'Panton Icons W95 D Light';
font-family:'Panton Icons W95 D Regular';
font-family:'Panton Icons W95 D Fill Light';
font-family:'Panton Icons W95 D Fill Rg';

*/