:root {
    --ans-groen: #00e68a;
    --ans-groen-donkerder-links: #00b36b;
    --ans-groen-bleek: #ecf8ed;
    --ans-blauw: #3e86c3;
    --ans-tussen-groen-en-blauw: #1bbca3;
}

/*

	Basisindeling: [OUD]
	1)
	-breedte van 720px en meer: links logo + inhoudsopgave met vaste breedte. Rechts zoekicoon dat bij klikken naar links openschuift, waarbij ook het zoekveld zichtbaar wordt
		bij aanpassing breedte wordt de tekstkolom in het midden smaller
	-breedte van 719px en minder: linkerkolom met logo + inhoudsopgave verdwijnt. Boven: balk met hamburgericoon + logo + zoekicoon;
		bij klik op hamburgericoon schuift inhoudsopgavekolom van links 3/4 in beeld en schuift de rest op + wordt grijs
		minimum breedte: 280px;
	
	2)
	-breedte van 1400px of meer: <aside> en het zoekveld zijn 300px + rechtermarge, <article> begint vanaf rechts op 380px;
	-breedte van 1000-1400px: <aside> en het zoekveld zijn 250px + rechtermarge;;

*/


@media all{

	body{
		font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	}

}

/* breedte van 1500px en meer */
@media all and (min-width: 1500px){

	header{
		height: 190px;
	}

	header .topheader{
		height: 40px;
	}

	header .topheader .headermenu{
		font-size: 16px;
		padding-top: 10px;
	}

	.headermenu-small, .topheader-mini{
		display: none;
	}

	header .mainheader{
		height: 150px;
	}
	
	.headermenu, .headermenu-small{
		padding-top: 10px;
	}


	/*.logo > span{
		padding: 15px 0px 0px 0px;
		float: left;
		font-size: 45px;
		line-height: 0.8em;
	}
	*/

	/*
	.logo span .cap{
		background-color: white;
		color: var(--ans-groen-donkerder-links);
		text-transform: uppercase;
		font-size: 136px;
		height: 150px;
		float: left;
		margin-right: 26px;
		width: 100px;
		text-align: center;
	}
	*/
	
	.logo{
		float: left;
		margin-top: 9px;
	}
	
	.logo img{
		height: 135px;
	}

	.logo-small{
		display: none;
	}

	.mainheader .searchbox{
		margin-top: 50px;
	}

	.searchbox{
		width: 800px;
	}

	.searchbox input{
		height: 50px;
		width: 75%;
	}

	.searchbox .search-go{
		padding: 10px;
		width: 140px;
	}

	.searchbox .fa-search{
		font-size: 30px;
		margin-right: 54px;
	}
	
	.shortheader{
		height: 60px;
	}
	
	.shortheader .searchbox input{
		height: 40px;
	}
	
	.shortheader .searchbox .search-go{
		padding: 5px 10px;
	}
	
	.searchbox input{
		font-size: 20px;
	}

	.autocomplete-suggestions{
		padding-right: 0px !important;
	}
	
	/* hamburger icon voor toc */
	#toc-toggle-icon, #toc-toggle-icon-small{
		display: none;
	}
	
	nav .nav-chapters{
		font-size: 20px;
	}
	
	nav > ul > li a{
		font-size: 18px;
	}

	.nav-close{
		visibility: hidden;
	}
	
	nav ul.isVisibleChapter{
		/*font-size: 16px;*/
		font-size: 14px;
	}
	
	.main-wrapper{
		padding-top: 50px;
	}

	.left-wrapper{
		width: 350px;
	}
	
	.right{
		height: 100%;     	
		float: left;
		width: 100%;
	}

	.right-wrapper {
		margin-top: 0px;
    	margin-left: 350px;
    	height: 100%;
		/* zorg voor topics met hele smalle content */
		min-width: -moz-calc(100% - 360px);/* Firefox */
		min-width: -webkit-calc(100% - 360px);	/* WebKit */	
		min-width: -o-calc(100% - 360px);	/* Opera */
		min-width: calc(100% - 360px);	/* Standard */
	}
	
	.right-wrapper.onderwijs {
		/*margin-left: 0px;*/
		margin-left: 350px;
	}
	
	.article-wrapper{
		width: 100%;
	}
	
	#article-nav{
		margin: 0px 0px 0px 0px;
		padding-bottom: 20px;
		border-bottom: 2px solid #00b36b;
		border-bottom: 2px solid var(--ans-groen-donkerder-links);
	}

	#kruimelpad{
		font-size: 16px;	
		width: 90%;
	}
	
	.kruimelpad-toggle{
		display: none;	
	}
	
	#topictitle{
		font-size: 30px;
		/*margin-bottom: 50px;*/
	}
	
	article{
		/*margin-right: 230px;*/		/* het verschil tussen de breedte + margin-right van <aside> en de marge hier bepaalt de marge tussen aside en de main tekst */
		float: left;
		width: 95%;
		width: -moz-calc(100% - 80px);/* Firefox */
		width: -webkit-calc(100% - 80px);	/* WebKit */	
		width: -o-calc(100% - 80px);	/* Opera */
		width: calc(100% - 80px);	/* Standard */
		padding: 40px;
	}
	
	/* onderwijs is smaller */
	body.onderwijs article{
		/*margin-right: 230px;*/		/* het verschil tussen de breedte + margin-right van <aside> en de marge hier bepaalt de marge tussen aside en de main tekst */
		float: left;
		width: 95%;
		width: -moz-calc(100% - 400px);/* Firefox */
		width: -webkit-calc(100% - 400px);	/* WebKit */	
		width: -o-calc(100% - 400px);	/* Opera */
		width: calc(100% - 400px);	/* Standard */
		padding: 40px;
	}
	
	/* welkomstpagina is breder*/
	body.onderwijs article#onderwijs-main{
		width: -moz-calc(100% - 200px);/* Firefox */
		width: -webkit-calc(100% - 200px);	/* WebKit */	
		width: -o-calc(100% - 200px);	/* Opera */
		width: calc(100% - 200px);	/* Standard */
	}

	aside{
	    margin-left: 20px;
	    float: right;
		width: 160px;
	}
	
	#citeerPopup {
		border: 2px solid #00b36b; 
		border: 2px solid var(--ans-groen-donkerder-links);
	}
	
	.citeer, .print{
		width: 75px;
		color: #00b36b;
		color: var(--ans-groen-donkerder-links);
	}
	
	.citeer{
		float: left;
	}
	
	.print{
		margin-left: 5px;
		float: right;
	}
	
	.termlist, .taaladvies, .version-remark, .onderwijs-mod, .keywordlist{
		width: 100%;
		float: left;
		color: #222;
	}
	
	.citeer, .print, .termlist, .taaladvies, .version-remark, .onderwijs-mod, .keywordlist{
		background: white;
		padding: 12px 0px;
		font-size: 12px;
		margin-bottom: 10px;
	}
	
	.citeer, .print, .onderwijs-mod{
		background: white;
		padding: 12px 0px;
		font-size: 12px;
		margin-bottom: 10px;
		cursor: pointer;
	}
	
	.termlist-label, .taaladvies .taaladv-label, .keywordlist-label{
		color: #00b36b;
		color: var(--ans-groen-donkerder-links);
		margin: 0px 16px;
		font-variant: small-caps;
		font-size: 18px;
		font-weight: bold;
		font-family: 'Asap Condensed', 'Open Sans', arial, sans;
		text-decoration: none;
	}
	
	.onderwijs-mod a{
		color: #00b36b;
		color: var(--ans-groen-donkerder-links);
		margin: 0px 16px;
		font-size: 13px;
		/*font-family: 'Asap Condensed', 'Open Sans', arial, sans;*/
		text-decoration: none;
	}
	
	
	.onderwijs-mod a .fas, .onderwijs-mod .fas{
		margin-left: 0px;
		display: table-cell;
	}
	
	.onderwijs-mod .notactive .fas{
		/*color: #00b36b;
		color: var(--ans-groen-donkerder-links);*/
		color: #ccc;
		margin-left: 10px;
	}
	
	.onderwijs-mod .notactive .ond{
		/*color: #00b36b;
		color: var(--ans-groen-donkerder-links);*/
		color: #ccc;
		/*margin: 0px 16px;
		font-variant: small-caps;
		font-size: 18px;
		font-weight: bold;
		font-family: 'Asap Condensed', 'Open Sans', arial, sans;
		margin: 0px 2px !important;*/
	}
	
	.onderwijs-mod a, .onderwijs-mod .onderwijs-label{
		margin: 0px 10px !important;
	}
	
	.onderwijs-mod a .ond:hover{
		text-decoration: underline;
	}
	
	body.onderwijs .note{
		font-weight: normal;
		color: #009ece;
		color: var(--ans-ow-blauw-tekst);
		float: right;
		width: 200px !important;
		font-size: 14px;
		line-height: 115%;
		margin-right: -270px;
		padding-left: 10px;
		border-left: 1px solid #009ece;
		border-left: 1px solid var(--ans-ow-blauw-tekst);
	}
	
	aside .version-remark .version-label{
		display: none;
	}
	
	.version-remark, .onderwijs-mod, .onderwijs-label.notactive{
		cursor: default !important;
	}

	aside .termlist .termlist-label, aside .taaladvies .taaladv-label, aside .keywordlist-label{
		margin: 10px;
	}
/*	
	aside .termlist .termlist-label{
		display: block;
		font-size: 16px;
		margin: 0px 10px;
		font-weight: bold;
		color: #333;
		font-family: 'Asap Condensed', 'Rubik', 'Arial', 'Sans';
	}

	aside .taaladvies .taaladv-label{
		font-size: 16px;
		margin: 0px 10px;
		font-weight: bold;
		color: #333;
		font-family: 'Asap Condensed', 'Rubik', 'Arial', 'Sans';
	}
*/
	aside #cite-print-prev-next .citeer .fas, aside #cite-print-prev-next .print .fas{
		font-size: 20px;
		padding-left: 27px;
	}
	
	#cite-print-prev-next-small{
		display: none;
	}
	
	.citeer:hover, .print:hover{
		color: white;
		background-color:#00b36b;
		background-color: var(--ans-groen-donkerder-links);
	}

	.content{
		margin-left: 20px;
		width: inherit;
	}
	
	.content:not(.main){	/* content.main (index, over) wordt uitgevuld over de hele rechterkant */
		width: 950px;		/* 1500 - 350 (left-wrapper) - 150 (aside) - 20 (marginleft) */
	}
	
	.quickinfo, .readmore{
		font-size: 17px;
	}
	
	.filter-inner{
		display: block;
	}

}

@media all and (max-width: 1499px){
	/* verplaats de aside-informatie naar boven het kruimelpad */
	aside{
		position: absolute;
		width: calc(100% - 80px);
		font-family: 'Roboto Condensed', 'Abel', 'Asap Condensed', 'Barlow', 'Rubik', 'Arial';
	}	
	
	aside #cite-print-prev-next, aside .termlist, aside .taaladvies, aside .version-remark, aside .onderwijs-mod{
		float: right;
	}
	
	aside #cite-print-prev-next .citeer .fas{
		font-size: 11px;
		padding: 8px 15px 6px 15px;
	}
	
	aside #cite-print-prev-next .print .fas{
		font-size: 13px;
		padding: 6px 15px;
	}

	aside #cite-print-prev-next .citeer .fas, aside #cite-print-prev-next .print .fas, .termlist-label, .taaladv-label, .version-label, .onderwijs-mod{
		border: 1px solid #f2f2f2;
		background: white;
	}
	
	.previous-topic {
		margin-right: 0px !important;
	}
	
	#citeerPopup {
		border: 2px solid #00b36b; 
		border: 2px solid var(--ans-groen-donkerder-links);
	}
	
	aside #cite-print-prev-next{	
		margin-top: 10px;
		font-size: 16px;
		height: 22px;
	}
	
	aside .print, aside .citeer{
		padding-bottom: 3px;
	}
	
	.termlist-label:hover, .taaladv-label:hover, .taaladv-label.active, .termlist.active .termlist-label, .taaladvies.active .taaladv-label, .version-label:hover, .version-remark.active .version-label{
		color: white;
		background-color:#00b36b;
		background-color: var(--ans-groen-donkerder-links);
	}
	
	.citeer:hover .fas, .citeer.active .fas, .print .fas:hover{
		color: white !important;
		background-color:#00b36b !important;
		background-color: var(--ans-groen-donkerder-links) !important;
	}
	
	
	.onderwijs-mod:hover{
		background-color:#00b36b !important;
		background-color: var(--ans-groen-donkerder-links) !important;
		cursor: pointer;
	}
	
	 .onderwijs-mod:hover a .fas{
		 color: white;
	 }
	 
	

	
	.citeer:hover{
		/*background-color:#00b36b !important;
		background-color: var(--ans-groen-donkerder-links) !important;*/
	}

	.termlist, .citeer{
		margin-top: 13px !important;
		height: 22px;
	}
	
	.taaladvies{
		margin-top: 14px !important;
		height: 22px;
	}
	
	.onderwijs-mod{
		margin-top: 10px !important;
		height: 15px !important;
	}
	
	
	.version-remark{
		margin-top: 10px;
		height: 22px;
	}
	
	.version-remark .version-remark-text{
		margin: -1px 0px 0px 1px !important;
	}
	
	.termlist-label{
		color: #00b36b;	
		color: var(--ans-groen-donkerder-links);
		font-size: 14px;
		margin: 0px 0px 0px 0px;
		padding: 4px 12px;
	}
	
	.version-label{
		color: #00b36b;	
		color: var(--ans-groen-donkerder-links);
		font-size: 14px;
		margin: 0px 0px 0px 0px;
		padding: 6px 7px 1px 7px;
	}
	
	.taaladv-label{
		color: #00b36b;	
		color: var(--ans-groen-donkerder-links);
		font-size: 16px;
		margin: 0px 5px 0px 5px;
		padding: 3px 8px;
	}
	
	.onderwijs-mod{
		color: #00b36b;	
		color: var(--ans-groen-donkerder-links);
		font-size: 16px;
		margin: 0px 0px 0px 0px;
		padding: 7px 3px 3px 3px;
	}
	
	.onderwijs-mod a .fas{
		color: #00b36b;	
		color: var(--ans-groen-donkerder-links);
	}
	
	.onderwijs-mod .onderwijs-label {
		margin: 5px 7px !important;
	}
	
	.termlist.active .terms, .taaladvies.active .taaladv-items, .version-remark.active .version-remark-text{
		display: block !important;
	}
	
	aside .termlist-label .aside-sub-toggle, aside .taaladv-label .aside-sub-toggle{
		font-size: 12px;
		margin-left: 3px;
	}

	/*
	aside #cite-print-prev-next .citeer .fas, aside #cite-print-prev-next .print .fas{
		font-size: 20px;
	}
	*/

	
	/* verberg de tekst van citeren/printen en de inhoud van de versie, termenlijst en de taaladvieslijst */
	aside .citeer span, aside .print span, aside .termlist .terms, aside .taaladvies .taaladv-items, aside .version-remark .version-remark-text{
		display: none;
	}
	
	aside .taaladvies .taaladv-items, aside .terms, aside .version-remark-text{
		position: absolute;
		background-color: white;
		border: 2px solid #00b36b;
		border: 2px solid var(--ans-groen-donkerder-links);
		margin-left: 1px;
		margin-top: 2px;
		box-shadow: 0 40px 40px rgba(0,0,0,0.3);
	}
	
	aside .terms, aside .version-remark-text{
		padding: 10px;
	}
	
	.citeer, .print, .termlist, .taaladvies, .version-remark{
		color: #00b36b;
		color: var(--ans-groen-donkerder-links);
		cursor: pointer;
		padding: 0px 0px 0px 5px;
	}
	
	
	aside .note{
		display: none;
	}
	
	#cite-print-prev-next-small{
		/*display: block;
		float: right;
		height: 60px;
		margin-right: 10px;*/
		display: none;
	}
	
	.topheader-mini{
		display: none;
	}
	
	.ond, .taaladv-ll{
		display: none !important;
	}
	
	.filter-inner{
		display: block;
	}

	
}

/* speciaal voor de textboxes op main */
@media all and (min-width: 1300px){
	.textbox-content{
		height: 200px;
	}
}

@media all and (min-width: 1100px) and (max-width: 1300px){
	
	.textbox-header{
		height: 60px;
	}
	
	.textbox-content{
		height: 250px;
	}
	
	.textbox-content ul {
		padding-left: 15px !important;
	}
}

@media all and (min-width: 1100px) and (max-width: 1499px){
	/* onderwijs is smaller */
	body.onderwijs article{
		/*margin-right: 230px;*/		/* het verschil tussen de breedte + margin-right van <aside> en de marge hier bepaalt de marge tussen aside en de main tekst */
		float: left;
		width: 95%;
		width: -moz-calc(100% - 300px);/* Firefox */
		width: -webkit-calc(100% - 300px);	/* WebKit */	
		width: -o-calc(100% - 300px);	/* Opera */
		width: calc(100% - 300px);	/* Standard */
		padding: 40px;
	}
	
	/* welkomstpagina is breder*/
	body.onderwijs article#onderwijs-main{
		width: -moz-calc(100% - 100px);/* Firefox */
		width: -webkit-calc(100% - 100px);	/* WebKit */	
		width: -o-calc(100% - 100px);	/* Opera */
		width: calc(100% - 100px);	/* Standard */
	}
	
}


@media all and (min-width: 1300px) and (max-width: 1499px){
	body.onderwijs .ow-link, body.onderwijs .note {
		width: 150px !important;
		margin-right: -220px !important;
	}
}

@media all and (min-width: 1100px) and (max-width: 1300px){
	body.onderwijs .ow-link, body.onderwijs .note {
		/*width: 150px !important;
		margin-right: -220px !important;*/
	}
}

@media all and (min-width: 900px) and (max-width: 1100px){
	.textbox-header{
		height: 60px;
	}
	
	.textbox-content{
		height: 300px;
	}
	
	.textbox-content ul {
		padding-left: 15px !important;
	}
	
	/* onderwijs is smaller */
	body.onderwijs article{
		float: left;
		width: 95%;
		width: -moz-calc(100% - 200px);/* Firefox */
		width: -webkit-calc(100% - 200px);	/* WebKit */	
		width: -o-calc(100% - 200px);	/* Opera */
		width: calc(100% - 200px);	/* Standard */
		padding: 40px;
	}

	/* welkomstpagina is breder*/
	body.onderwijs article#onderwijs-main{
		width: -moz-calc(100% - 100px);/* Firefox */
		width: -webkit-calc(100% - 100px);	/* WebKit */	
		width: -o-calc(100% - 100px);	/* Opera */
		width: calc(100% - 100px);	/* Standard */
	}


	body.onderwijs .note/*, body.onderwijs .ow-link*/ {
		/*width: 100px !important;
		margin-right: -160px !important;
		font-size: 12px;*/
	}

}

@media all and (min-width: 1300px){
	/* links worden bij groter dan 1300px niet standaard getoond, maar onder 'note'-popup */
	body.onderwijs .note-marker .fas, body.onderwijs .note-popup-close{
		display: none;
	}
	
	body.onderwijs .note{
		display: block;
		border: none;
		left: unset !important;
		margin-left: unset !important;
		position: unset !important;
		box-shadow: none !important;
		padding: 0px 0px 0px 10px !important;
		font-weight: normal;
		color: #009ece;
		color: var(--ans-ow-blauw-tekst);
		float: right;
		width: 200px;
		font-size: 14px !important;
		line-height: 115% !important;
		margin-right: -270px;
		padding-left: 10px;
		border-left: 1px solid #009ece;
		border-left: 1px solid var(--ans-ow-blauw-tekst);
		background-color: unset !important;
	}
	
	body.onderwijs .note-content{
		font-size: 14px !important;
		line-height: 115% !important;
	}
	
	
	
	body.onderwijs .note-content a:hover{
		text-decoration: underline !important;
	}

}



@media all and (min-width: 880px) and (max-width: 900px){
	.textbox-header{
		height: 60px;
		font-size: 16px !important;
	}
	
	.textbox-content{
		height: 350px;
		font-size: 13px !important;
	}
	
	.textbox-content ul {
		padding-left: 12px !important;
	}

}


@media all and (max-width: 880px){
	.readmore.isHome .section .textboxes{
		margin-top: 10px;
	}
	
	/* de textboxen op de home komen onder elkaar */
	.readmore.isHome .section .textbox{
		width: 100%;
		margin-bottom: 20px;
	}
	
	.textbox-leesmeer{
		float: left !important;
	}
	

}
/* einde textboxes main */

/* voor de figuren in 'over' */
@media all and (min-width: 721px) and (max-width: 820px){
	.img-container{
		width: 100% !important;
	}
}

@media all and (max-width: 500px){
	.img-container{
		width: 100% !important;
	}
}



@media all and (min-width: 720px) and (max-width: 1499px){

	header .topheader{
		height: 30px;
		width: 100%;
		z-index: 100;
	}

	.shortheader{
		height: 60px;
	}
	
	.headermenu-small{
		display: none;
	}
	
	
	/******************** waarom was dit? *******************/
	
	/*
	header{
		height: 100px;
	}

	header .topheader{
		height: 30px;
		position: fixed;
		width: 100%;
		z-index: 100;
	}

	header .topheader .headermenu{
		font-size: 15px;
		padding-top: 5px;
		margin-right: 20px;
	}

	.headermenu-small{
		display: none;
	}

	
	header .shortheader{
		display: none !important;
	}
	

	header .mainheader{
		height: 100px;
		position: fixed;
		width: 100%;
		top: 30px;
	}
	*/
	
	header .mainheader{
		height: 100px;
	}
	
	.logo img{
		height: 90px;
	}

	.main-wrapper{
		padding-top: 60px;
	}

	.left-wrapper{
		margin-left: 20px;
	}
	
	.nav-close{
		visibility: hidden;
	}
	
	nav .nav-chapters{
		font-size: 20px;
	}

	
	nav > ul > li a{
		font-size: 18px;
	}

	nav ul.isVisibleChapter{
		font-size: 14px;
	}
	
	.right-wrapper{
		position: absolute;
		margin-left: 290px;
		margin-right: 20px;
		/* zorg voor topics met hele smalle content */
		min-width: -moz-calc(100% - 360px);/* Firefox */
		min-width: -webkit-calc(100% - 360px);	/* WebKit */	
		min-width: -o-calc(100% - 360px);	/* Opera */
		min-width: calc(100% - 360px);	/* Standard */
	}
	
	/*
	.right-wrapper.onderwijs {
		margin-left: 0px;
	}
	*/
	
	aside{
		top: 0px;
		background-color: white;
		height: 40px;
		padding: 5px 40px 0px 40px;		/* geeft zelfde marges als article */
	}
	
	
	.kruimelpad-toggle{
		display: none;	
	}

	
	.content{
		/*margin-left: 20px;*/
		width: 100%;
	}
	
	#topictitle{
		/*margin-bottom: 50px;*/
	}
		
	#article-nav{
		margin: 0px 0px 0px 0px;
		padding-bottom: 20px;
		border-bottom: 2px solid #00b36b;
		border-bottom: 2px solid var(--ans-groen-donkerder-links);
	}
	
	#kruimelpad{
		font-size: 14px;
	}
	
	article{
		float: left;
		width: 95%;
		width: -moz-calc(100% - 80px);/* Firefox */
		width: -webkit-calc(100% - 80px);	/* WebKit */	
		width: -o-calc(100% - 80px);	/* Opera */
		width: calc(100% - 80px);	/* Standard */
		padding: 40px;
	}

	/* hamburger icon voor toc */
	#toc-toggle-icon, #toc-toggle-icon-small{
		display: none;
	}

	.logo{
		float: left;
		margin-left: 20px;
		margin-top: 7px;
	}

	/* alleen relevant als we tekst gebruiken */
	/*.logo > span{
		padding: 15px 0px 0px 0px;
		font-size: 30px;
		line-height: 0.8em;
	}

	.logo span .cap{
		border-radius: 40px;
		padding-left: 10px;
		padding-right: 10px;
		font-size: 25px;
	}*/

	.logo-small{
		display: none;
	}

	.searchbox{
		width: 60%;
		margin-right: 20px;
	}

	.mainheader .searchbox{
		margin-top: 30px;
	}
	
	

	.searchbox input{
		height: 40px;
		width: 75%;
		font-size: 20px;
	}

	.searchbox .search-go{
		padding: 5px;
		width: 70px;
	}

	.searchbox .fa-search{
		font-size: 25px;
		padding: 3px 0px;
		margin-right: 21px;
	}

	
	.previous-topic, .next-topic{
		position: relative;
	}
	
	#topictitle{
		font-size: 30px;
	}

	body:not(.onderwijs) article:not(.staticpag){
		/*margin-top: -60px;*/	/* compenseert voor het blok #cite-print-prev-next-small */
		margin-top: 40px;
	}
	
	
	.quickinfo, .readmore{
		font-size: 16px;
	}
	
	/* correctie voor de verticale positie van de zoekpopup */
	#searchbox-container{
		margin-top: -190px;
	}
	
	/* onderwijs > over */
	body.onderwijs article .blok-tekst{
		font-size: 13px !important;
		line-height: 1.2;
		padding: 0;
	}
	
	body.onderwijs article .blok-tekst a{
		font-size: 12px !important;
	}
}

@media all and (min-width: 1050px) and (max-width: 1499px){
	.headermenu, .headermenu-small{
		padding-right: 20px;
		padding-top: 6px;
		padding-left: 20px;
	}

	.left-wrapper{
		width: 300px;
	}
	
	.right-wrapper{
		margin-left: 340px;
	}
	
	/*
	.right-wrapper.onderwijs {
		margin-left: 0px;
	}
	*/
	
	.searchbox input{
		font-size: 20px;
	}
	
	#kruimelpad{
		font-size: 16px;
	}
	
	
}

@media all and (max-width: 1050px){
	/* op de zoekresultatenpagina verdwijnt de filter-div achter een popup */
	
	.headermenu, .headermenu-small{
		padding-right: 20px;
		padding-top: 6px;
		padding-left: 20px;
	}
	
	nav .nav-chapters{
		padding: 30px 10px 5px 0px;
		margin-bottom: 5px;
		font-size: 18px;
	}
	
	nav > ul >li a{
		font-size: 16px;
	}
	
	nav > ul >li a .sub{
		font-size: 12px;
	}
	
	nav ul.isVisibleChapter{
		font-size: 13px;
	}
	
	.left-wrapper{
		width: 250px;
	}
	
	.searchbox input{
		font-size: 20px;
	}

	.staticpag .infobox-text{
		font-size: 14px !important;
	}

	/* iets kleiner lettertype voor de searchbox-popup */
	#searchbox-container .searchbox-box, #searchbox-container .searchbox-box h3{
		font-size: 13px !important;
	}
	
	#searchbox-container .searchbox-box{
		margin-left: 0px !important;
	}
	
	.filter-container{
		position: absolute !important;
		padding: 0px !important;
	}
	
	.filter-label-main{
		font-size: 16px !important;
		font-variant: all-small-caps;
		cursor: pointer;
		padding: 20px;
		margin-left: 20px;
		margin-bottom: 0px !important;
	}
	
	.filter-label-main .fas{
		display: inline-block !important;
	}
	
	.filter-inner{
		display: none;
		padding: 40px;
		position: absolute;
		background: white;
		top: 40px;
		width: 200px;
		box-shadow: 10px 5px 10px #ddd;
	}
	
	.filter-inner li .sub{
		display: none;
	}
	
	.searchresults{
		width: 80% !important;
		padding-top: 60px !important;
	}
	
	.searchresults-label{
		border-top: 1px solid #219b4b;
		border-top: 1px solid var(--ans-groen-donkerder-links);
		padding-top: 20px;
	}
	
	/* onderwijs > over */
	body.onderwijs article .blok-tekst{
		font-size: 11px !important;
		line-height: 1.2;
		padding: 0;
	}
	
	body.onderwijs article .intro .blok-tekst a{
		font-size: 10px;
	}
	
	body.onderwijs article .onderwijs-blok a{
		font-size: 14px;
	}

	
}

/* 	breedte van 720px en minder: zoekveld komt 'onder' header; kruimelpad verdwijnt,
	aside komt vast te hangen onder de header
 */


/* correcties voor minder hoog wordende mainheader (groene balk) en eronder hangende aside */

@media all and (min-width: 551px) and (max-width: 720px){
	header .mainheader{ height: 97px }
	
	aside{ top: 93px; }
	
	#prevnext{ top: 112px; }
	
	.staticpag .infoboxes {
		margin-top: 30px !important;
	}
	
	.staticpag .section#ans-index-onder-textbox {
		margin-top: 40px !important;
	}
	
}

@media all and (min-width: 451px) and (max-width: 550px){
	header .mainheader{ height: 91px }
	
	aside{ top: 87px;	}
	
	#prevnext{ top: 106px; }
}

@media all and (min-width: 351px) and (max-width: 450px){
	header .mainheader{ height: 83px }
	
	aside{ top: 78px; }

	#prevnext{ top: 97px; }
}

@media all and (max-width: 350px){
	header .mainheader{ height: 72px }
	
	aside{ top: 66px; }
	
	#prevnext{ top: 85px; }
}


@media all and (max-width: 720px){

	header{
		/*height: 80px;*/
	}

	header .container{
		padding: 0px 40px;
	}

	header .topheader{
		display: none;
	}

	header .mainheader{
		float: left;
		/*
		
		position: fixed;*/
		width: 100%;
	}

	header .shortheader{
		/*display: none !important;*/
		height: 50px;
	}

	.headermenu-small{
		/*display: block;
		width: 100%;
		height: 30px;
		background-color: black;
		float: left;
		font-size: 15px !important;
		padding-right: 20px;
		padding-top: 5px !important;
		*/
		display: none;
	}
	
	.topheader-mini{
		display: block;
	}

	.headermenu-small #literatuur{
		/*margin-right: 20px;*/
	}

	.left-wrapper{
		left: -301px;						/* let op: de breedte moet ook in js-ans-toc.js worden gewijzigd */;
		position: absolute;
	 	z-index: 100;
		width: 300px;						/* let op: de breedte moet ook in js-ans-toc.js worden gewijzigd */;
		background-color: white;
		/*border-right: 1px solid var(--ans-groen-donkerder-links);*/
	}

	nav > ul{
		margin-top: -15px !important;
	}
	
	.nav-toggle-wrapper, .nav-toggle{
		display: none;
	}

	.nav-close{
		visibility: visible;
	}
	
	.right-wrapper{
		/*position: absolute;
		left: 0px;*/
		width: 100%;
		top: 110px;
		z-index: 1;
		margin-right: 0px;
	}

	.left-wrapper .logo, #kruimelpad{
		display: none;
	}
	
	#kruimelpad{
		background-color: #00b36b;
		background-color: var(--ans-groen-donkerder-links);
		padding: 10px;
		font-size: 12px;
		margin-top: -35px;
		margin-left: -20px;
		width:80%;
		margin-bottom: 20px;
	}
	
	#kruimelpad a, #kruimelpad{
		color: white !important;
	}
	
	#kruimelpad a:hover{
		text-decoration: underline;
	}
	
	.kruimelpad-toggle{
		font-size: 12px;
		display: block;
		position: absolute;
		margin-top: 5px;
		padding: 5px 10px;
		background-color: #00b36b;
		background-color: var(--ans-groen-donkerder-links);
		color: white !important;
		border-radius: 0px 10px 10px 0px;
		cursor: pointer;
	}
	
	.kruimelpad-toggle:hover .fas{
		color: orange;
	}
	
	.kruimelpad-toggle.isActive{
		
	}


	.left-wrapper.isVisible{
		-webkit-box-shadow: 10px 0 15px -10px #888;
        box-shadow: 10px 0 15px -10px #888;
	}

	#toc-toggle-icon, #toc-toggle-icon-small{
		display: block;
		float: left;
		margin-top: -2px;
	}
	
	/* hamburgericoon als plaatje, maar wordt vaak onscherp door verkleining */
	#toc-toggle-icon img, #toc-toggle-icon-small img{
		width: 35px;
		cursor: pointer;
	}
	
	/*hamburgericoon van fontawesome */
	#toc-toggle-icon .fas{
		font-size: 30px;
		color: white;
		cursor: pointer;
		margin-top: 2px;
	}
	
	#toc-toggle-icon .fas:hover{
		color: orange;
	}
	
	#toc-toggle-icon-small img{
		margin-top: 9px;
	}

	.logo{
		display: none;
	}

	.logo-small{
		width: 100%;
		float: left;
		color: white;
		margin-top: 5px;
	}

	.logo-small img{
		width: 100%;
		/*min-width: 250px;*/
	}
	
	/*
	.logo-small .cap{
		color: white;
		border-radius: 40px;
		padding-left: 10px;
		padding-right: 10px;
		font-size: 25px;
	}
	*/

	.searchbox{
		/*clear: left;
		float: left !important;*/
		width: 90%;
	}

	.searchbox input{
		height: 30px;
		width: 75%;
		
	}
	
	.autocomplete-suggestions, .searchbox input{	
		font-size: 14px !important;
	}
	
	.autocomplete-suggestions{
		padding-right: 20px !important;
	}
	
	.searchbox .search-go{
		padding: 0px;
		width: 70px;
	}

	.searchbox .fa-search{
		font-size: 20px;
		padding: 5px 0px;
		margin-right: 25px;
	}
	
	aside{
		/*top: 91px;*/
		height: 40px;
		right: 70px;
		padding: 5px 0px 0px 0px;
	}
	
	#citeerPopup {
		/*border: 0px; 
		border-top: 1px solid #00b36b; 
		border-top: 1px solid var(--ans-groen-donkerder-links);
		*/
	}

	.content{
		min-width: 100%;
		margin-top: 47px;
	}
	
	body.onderwijs .content{
		margin-top: 0px;
	}
	
	.content article.staticpag{
		margin-top: -47px;
		/*margin-top: 0px;*/
	}
	
	
	/*aside{
		position: fixed;
		top: 80px;
		height: 40px;
		display: none;
	}
	*/
	
	#article-nav{
		margin: 0px;
		padding-bottom: 0px;
		border-bottom: 0px solid #00b36b;
		float: none;
	}
	
	/*#kruimelpad{
		display: none;	
	}*/
	
	/* de previous/next topic-pijltjes krijgen nu dezelfde opmaak als termen/versie/citeer/print */
	#prevnext{
		position: absolute;
		right: 15px;
		font-size: 19px;
		line-height: 100% !important;
		font-family: Abel, Rubik, Arial;
	}
	
	#prevnext .next-topic{
		margin-left: 6px;
	}
	
	#prevnext .previous-topic, #prevnext .next-topic{
		cursor: pointer;
		background-color: white;
		color: #00b36b;
		color: var(--ans-groen-donkerder-links);
		padding: 0px 5px;
	}
	
	#prevnext .previous-topic:hover, #prevnext .next-topic:hover{
		background-color: #00b36b;
		background-color: var(--ans-groen-donkerder-links);
		color: white !important;
	}
	/*
	aside .taaladvies .taaladv-items, aside .terms, aside .version-remark-text{
		position: absolute;
		background-color: white;
		border: 2px solid #00b36b;
		border: 2px solid var(--ans-groen-donkerder-links);
		margin-left: 1px;
		margin-top: 2px;
		box-shadow: 0 40px 40px rgba(0,0,0,0.3);
	}
	
	aside .terms, aside .version-remark-text{
		padding: 10px;
	}
	*/
	article{
		padding: 40px 20px;
		width: 95%;
		width: -moz-calc(100% - 40px);/* Firefox */
		width: -webkit-calc(100% - 40px);	/* WebKit */	
		width: -o-calc(100% - 40px);	/* Opera */
		width: calc(100% - 40px);	/* Standard */
	}

	body.onderwijs article{
		padding: 0px 20px 40px 20px;
	}
	
	#topictitle{
		width: 90%;
		font-size: 24px;
		margin-bottom: 10px;
	}
	
	.quickinfo, .readmore{
		font-size: 14px;
	}
	
	table.simpletable{
		font-size: 13px !important;
	}
}

@media all and (min-width: 500px) and (max-width: 530px){
	.searchbox input{
		width: 73%;
	}
}



@media all and (max-width: 500px){

	header .container{
		padding: 0px 20px;
	}

	.searchbox{
		width: 85%;
	}
	
	.searchbox input{
		width: 70%;
	}

	.searchbox .fa-search{
		font-size: 18px;
		padding: 6px 0px;
		margin-right: 9px;
	}	

	/*
	article{
		padding: 20px !important;
	}
	*/

	.searchbox .search-go{
		width: 40px;
	}

	.content{
		width: 100%;
	}
	
	article{
		padding: 40px 20px;
		width: 95%;
		width: -moz-calc(100% - 40px);/* Firefox */
		width: -webkit-calc(100% - 40px);	/* WebKit */	
		width: -o-calc(100% - 40px);	/* Opera */
		width: calc(100% - 40px);	/* Standard */
	}
	
	article.staticpag{
		padding-top: 20px;
	}
	
	article.staticpag h1{
		font-size: 24px;
	}
	
	.quickinfo, .readmore{
		font-size: 14px;
	}
	
	.staticpag .infoboxes {
		margin-top: 20px !important;
	}
	
	.staticpag .section#ans-index-onder-textbox {
		margin-top: 40px !important;
	}
	
	.staticpag .infobox-text{
		font-size: 13px !important;
	}
	/*
	.readmore.isHome .section .textboxes{
		margin-top: 10px;
	}
	
	.readmore.isHome .section .textbox{
		width: 100%;
		margin-bottom: 20px;
	}
	
	.textbox-leesmeer{
		float: left !important;
	}
	*/

}

/* passend maken grijze balk met (evt) adviezen, termen, prevnext */

@media all and (max-width: 400px){
	aside{
		width: calc(100% - 35px) !important;
	}	
	
	#cite-print-prev-next .citeer .fas{
		padding: 8px 8px 6px 8px !important;
	}
	
	#cite-print-prev-next .print .fas{
		padding: 6px 8px !important;
	}
}

/* het wordt nu te krap op de grijze balk: verwijder de pijltjes van adviezen/termen */
@media all and (max-width: 350px){

	.termlist-label, .taaladv-label{
		padding: 3px 6px !important;
	}
	
	.termlist-label .fas, .taaladv-label .fas{
		display: none;
	}
}

@media all and (max-width: 300px){

	.citeer, .print, .termlist, .taaladvies, .version-remark {
		padding: 0px 0px 0px 5px !important;
	}
	
	#prevnext{
		right: 24px;
	}
	
	#prevnext .next-topic {
		margin-left: 2px;
	}
}


@media all and (max-width: 315px){	

	.searchbox{
		width: 80%;
	}

	.searchbox input{
		width: 64%;
	}
	
	#topictitle{
		width: 70%;
	}
}

@media all and (max-width: 285px){	
	.searchbox input{
		width: 62%;
	}
}