@charset "utf-8";
/* CSS Document */

HTML, body{
	height: 100%;
	background: #DDEFFF;
	margin: 0;
	font-family: 'Quicksand', sans-serif;
	font-size: 1em;
}

body{
	overflow-y:scroll;
}

body a{
	text-decoration: none;
}

@font-face {
	font-family: 'Quicksand';
	src: url('/fonts/Quicksand-Light.ttf') format('truetype');
	font-weight: 300;
}

@font-face {
	font-family: 'Quicksand';
	src: url('/fonts/Quicksand-Regular.ttf') format('truetype');
	font-weight: 400;
}

@font-face {
	font-family: 'Quicksand';
	src: url('/fonts/Quicksand-Medium.ttf') format('truetype');
	font-weight: 500;
}

@font-face {
	font-family: 'Quicksand';
	src: url('/fonts/Quicksand-SemiBold.ttf') format('truetype');
	font-weight: 500;
}

@font-face {
	font-family: 'Quicksand';
	src: url('/fonts/Quicksand-Bold.ttf') format('truetype');
	font-weight: bold;
}

@font-face {
	font-family: 'Quicksand';
	src: url('/fonts/Quicksand-Bold.ttf') format('truetype');
	font-weight: 700;
}

@font-face {
	font-family: 'Ubuntu Mono';
	src: url('/fonts/UbuntuMono-Regular.ttf') format('truetype');
}

/* codes om breedte van objecten aan te geven */
.w_50{	width: 50px !important; }
.w_100{	width: 100px !important; }
.w_120{	width: 120px !important; }
.w_150{	width: 150px !important; }
.w_200{	width: 200px !important; }
.w_250{	width: 250px !important; }
.w_300{	width: 300px !important; }
.w_350{	width: 350px !important; }
.w_400{ width: 400px !important; }
.w_425{ width: 425px !important; }
.w_450{ width: 450px !important; }

.w_100p{ width: 100% !important; }

.w_max_100p {max-width: 100%;}
.w_max_vw {max-width: 98vw;}

/* codes voor text kleur */
.tk_wit{	color: #fff !important; }
.tk_zwart{	color: #000 !important; }
.tk_dblauw{	color: #335C80 !important; }
.tk_lblauw{	color: #cce6ff !important; }
.tk_dgrijs{	color: #596E80 !important; }
.tk_lgrijs{	color: #6E6E6E !important; }
.tk_geel{	color: #ffcc00 !important; }
.tk_groen{	color: #2CAB66  !important; }
.tk_rood{	color: #DB5461  !important; }

.tk_left{	text-align: left !important; }
.tk_center{	text-align: center !important; }
.tk_right{	text-align: right !important; }

.t_size_1 {font-size: 1em;}
.t_size_1_1 {font-size: 1.1em;}
.t_size_1_2 {font-size: 1.2em;}
.t_size_1_3 {font-size: 1.3em;}

.t_bold{font-weight: bold;}
.t_bolder{font-weight: bolder;}

/* codes voor bg kleur */
.bg_wit{	background-color: #fff !important; }
.bg_zwart{	background-color: #000 !important; }
.bg_dblauw{	background-color: #335C80 !important; }
.bg_lblauw{	background-color: #cce6ff !important; }
.bg_dgrijs{	background-color: #596E80 !important; }
.bg_lgrijs{	background-color: #6E6E6E !important; }
.bg_geel{	background-color: #ffcc00 !important; }
.bg_rood{	background-color: #FF8680 !important; }
.bg_groen{	background-color: #2CAB66 !important; }

.hidden{
	display:none;
}

.pointer{
	cursor: pointer !important;
}

.no_pointer{
	cursor:auto !important;
}

.flex{
	display: flex;
	flex-wrap: wrap;
}

.flex_items_center{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}



.flex_space_between{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between
}

main { 
	position: relative;
	grid-area: inhoud;
	padding: 5px;
}

main h1, h2, h3, h4{
	margin:2px 0px;
}

main a{
	color: #394955;
}

main a:hover{
	color: #000;
}

main table{ border-collapse: collapse;}
main table, tr, td, th{ border: 0px;}
main tr:nth-child(even) {background: #DDEFFF}
main tr:nth-child(odd) {background: transparent}
main thead{ background-color: #67B9FF !important;}


.message{
	position: absolute;
	top: 20px;
	right: 20px;
	border: 1px solid #000;
	border-radius: 0.5rem;
	width: 250px;
	min-height: 60px;
	max-width: 90vw;
	padding: 5px 10px;
	font-weight: 600;
	font-size: 1.2em;
	z-index: 1000;
}

.message.error{
	background-color: #1A2E40;
	color: #EDF6FF;
}

.message.ok{
	background-color: #2CAB66;
	color: #fff;
}

section{
	margin-bottom: 15px;
}

reclame{ 
	grid-area: reclame;
	display: none;
	border: 0px solid black;
	padding: 5px;
}


.inlogform{
	/*display: block;*/
	background-color: #fff;
	border: 1px solid #5A6E7F;
	border-radius: 0.25em;
	padding: 5px;
	margin: 10px;
	width: 19em;
}

.wachtwoordform i{
	margin-left: -40px;
    cursor: pointer;
}

.inloggen{
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-items: center;
}

.inloggen i{
    cursor: pointer;
}


.inlogbutton{
	display: block;
	background-color: #5A6E7F;
	color: #fff;
	border: 1px solid #5A6E7F;
	border-radius: 0.25em;
	padding: 5px;
	margin: 10px;
	width: 10em;
	cursor:pointer;
	appearance: none;
	-webkit-appearance: none;
}

.inloggoogle{
	display: block;
	background-color: #3265b8 !important; 
	color: #fff;
	border: 1px solid #000;
	border-radius: 0.25em;
	padding: 5px 5px 5px;
	margin: 10px;
	width: 12em;
	float: inherit;
	cursor:pointer;
	font-weight: 400;
	font-size: 1.1em;
}

.inlogmicrosoft{
	display: block;
	background-color: #0d6e00 !important;
	color: #fff;
	border: 1px solid #000;
	border-radius: 0.25em;
	padding: 5px 5px 5px;
	margin: 10px;
	width: 12em;
	cursor:pointer;
	font-weight: 400;
	font-size: 1.1em;
}

.inlogafbeelding{
	background-color: #FFF;
	float: left;
	margin-top: 0px;
	width: 20px;
}

.activeren_profiel{
	display: flex;
	text-align: center;
	margin: 0;
	padding: 0;
}

.activeren_blok {
	margin: 2px;
}

.activeren_blok .button{
	margin: 5px 2px 5px 2px;
}

#timer{
	font-family: 'Ubuntu Mono', monospace;
}

.acceptbutton{
	display: block;
	background-color: #ffcc00;
	color: #000;
	border: 1px solid #5A6E7F;
	border-radius: 0.25em;
	padding: 5px;
	margin: 10px;
	width: 30em;
	cursor:pointer;
	appearance: none;
	-webkit-appearance: none;
}

.blok{
	background-color: #EDF6FF;
	padding: 10px;
	border: 1px solid #5A6E7F;
	border-radius: 0.25em;
}

.blok_no_border{
	background-color: #EDF6FF;
	padding: 10px;
}

.fout_waarde{
	color: #A72527;
	font-weight: bold;
	margin: 0px;
}


.button{
	display: block;
	background-color: #5A6E7F;
	color: #fff;
	border: 1px solid #5A6E7F;
	border-radius: 0.25em;
	padding: 5px;
	margin: 10px;
	width: 10em;
	cursor:pointer;
	appearance: none;
	-webkit-appearance: none;
	font-family: 'Quicksand', sans-serif;
	font-weight: 500;
	font-size: 0.9em;
}

.button:disabled{
	background-color: #5A6E7F;
	color: #fff;
	border: 1px solid #5A6E7F;
	cursor: not-allowed;
}	

.button_breed{
	display: block;
	background-color: #5A6E7F;
	color: #fff;
	border: 1px solid #5A6E7F;
	border-radius: 0.25em;
	padding: 5px;
	margin: 10px;
	width: 30em;
	cursor:pointer;
	appearance: none;
	-webkit-appearance: none;
	font-family: 'Quicksand', sans-serif;
	font-weight: 500;
}

.button:hover, .button_breed:hover, .inloggoogle:hover, .inlogmicrosoft:hover{
	background-color: #7C90A2 !important;
	color: #fff !important;
}

.button_geel{
	background-color:#ffcc00;
	color: #000;
	font-size: 0.9em;
}

.button_groen{
	background-color:#2CAB66;
	color: #000;
	font-size: 0.9em;
}

.button_blauw{
	background-color: #4D8ABF  ;
	color: #fff;
	font-size: 0.9em;
}

.button_edit{
	border: 0px solid #5A6E7F;
	border-radius: 0.25em;
	background: transparent;
	font-family: 'Quicksand', sans-serif;
	font-size: 1em;
	font-weight: 400;
	cursor:pointer;
}

canvas{
		user-select: none;
		-moz-user-select: none;
		-webkit-user-select: none;
		-ms-user-select: none;
	}

.fa-arrow-up-right-dots {
	--fa-primary-color: #4D8ABF;
	--fa-secondary-color: #2CAB66;
}

.top_layer{
	position: relative;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgb(146, 166, 185, 0.3);
	z-index: 10;
}

/* header */


header { 
	grid-area: header; 
	background: #67B9FF;
	color: #FFF;
	padding: 0px;
	font-size: 0.9em;
	max-width: 100vw;
}

header h1 a{
	color: #FFF;
}

#header_logo{
	float: left;
	font-size: 1.0em;
	padding-left:5px;
	padding-top:18px;
}

#header_logo a{
	display: block;
	height: 35px;
}

#header_logo a:focus{
	border: 2px solid #475879;
	outline: none;
}

#header_knoppen{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	min-width: 250px;
	max-width:70vw;
	padding-right: 2px;
	float: right;

}

header img{
		height: 35px;
	}

header ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	margin: 0px;
	padding: 0px 4px 0px 0px;
	list-style-type: none;
}

header li{ 
	font-weight: 500;
	margin: 2px;
}

header li a{
	display: block;
	padding: 2px;
	margin-left: 5px;
	color: #335C7F;
}

header .header_vak a{
	margin-left: 3px;
	margin-bottom: 2px;
	text-align: center;
	border-bottom: 3px solid #475879;
	color: #000;
}

header li a:hover, header li a:focus{
	background-color: #475879;
	color: #FFF;
}

header .aanmelden a{
	border-bottom: 3px solid #FF8680;
	text-align: center;
	color: #000;
}
header .aanmelden a:hover, .aanmelden a:focus{
	background-color: #FF8680;
	color: #000;
}

header .inloggen a{
	border-bottom: 3px solid #ffcc00;
	text-align: center;
	color: #000;
	margin-left: 3px;
	}

header .inloggen a:hover, header .inloggen a:focus{
	background-color: #ffcc00;
	color: #000;
}

header .admin a{
	border-bottom: 3px solid #0F2233;
	text-align: center;
	color: #000;
	}

/*footer*/

footer { 
	grid-area: footer; 
	background: #394955;
	padding: 5px;
	color: #FFF;
	min-height: 150px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr) ) ;
}

footer p{
	display: block;
	margin: 0px 0px 5px 0px;
}

footer a{
	color: #FFF;
	border-bottom: 2px solid #394955;
}

footer a:hover{
	color: #67B9FF;
}

footer a:focus{
	border-bottom: 2px solid #67B9FF;
	outline: none;
}

footer h3{
	margin:5px 0px;
}

.copyright{
	margin: 5px 0px;
	padding: 0px;
}

/* cookie goedkeuren */
#cookieconsent.hidden{
	display:none;
	opacity: 0;
}

#cookieconsent{
	position: fixed;
	bottom: 0;
	width: 100%;
	background-color:#0F2233;
	color: #fff;
	z-index: 10;
	padding: 10px 0px;
	opacity: 1;
	transition: opacity .8s ease;
}

#cookieconsent p{
	line-height: 2em;
	font-size: 1em;
	text-align: center;
}

#cookieconsent .cookie_info{
    font-size: 0.9em;
    line-height: normal;
}

#cookieconsent a{
	color: #cce6ff;
}

#cookieconsent a:hover{
	color: #3492D5;
}

#cookieaccept, #cookierefuse{
	border-radius: .25rem;
	padding: 5px;
	margin-left: 25px;
}

#cookieaccept{
	background-color: #ffcc00;
	color: #000 !important;
}

#cookierefuse{
	background-color: #5A6E7F;
	color: #fff !important;
}


.popup_achtergrond{
	position:fixed; 
	top:0px; 
	left:0px; 
	background:rgba(0,0,0,0.6); 
	z-index:10; 
	width:100%; 
	height:100%;

}


/* container voor kleinste scherm*/
.container{
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: 65px auto;
	grid-row-gap: 0px;
	grid-template-areas:
		'header'
		'header_action'
		'inhoud'
		'footer';
	border: 1px solid black;
}


/*Kiezen van onderwerp/methode*/
.vak_keuze_container{
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: 50px auto;
	grid-row-gap: 10px;
	grid-column-gap: 10px;
	grid-template-areas:
		'vak_keuze_titel'
		'vak_keuze_sorteren'
		'vak_keuze_inhoud';
}

.vak_keuze_titel { 
	grid-area: vak_keuze_titel;
	font-size: 1.4em;
	font-weight: 800;
}

.vak_keuze_sorteren { 
	grid-area: vak_keuze_sorteren;
}

.vak_keuze_sorteren button{ 
	background-color: #5A6E7F;
	color: #fff;
	border: 1px solid #5A6E7F;
	border-radius: 0.25em;
	padding: 5px;
	margin: 10px;
	width: 10em;
	cursor:pointer;
	appearance: none;
	-webkit-appearance: none;
	font-family: 'Quicksand', sans-serif;
	font-weight: 500;
}

.vak_keuze_sorteren button.active{ 
	background-color: #67B9FF;
	color: #335C7F;
}

.vak_keuze_inhoud { 
	display: grid;
	grid-gap: 10px 10px;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr) ) ;
}

.vakkeuzeinhoud{
	grid-area: vak_keuze_inhoud;
}

#methode { 
		display: none;
}

.vak_keuze_blok{
	/*min-width: 30vw;	*/
	background-color: rgb(76, 93, 107, 0.9);
	color: #fff;
	border: 1px solid #5A6E7F;
	display: flex;
	align-items: center;
}

.vak_keuze_blok:hover{
	background-color: rgb(76, 93, 107, 0.8);
}


.vak_keuze_blok img{
	width: 40px;
	height: 100%;
	margin-right: 1vw;;
}

/*
.img_onderwerp {
	height: auto;
	max-height: 140px;
	width: 100%;
}
*/

/*
.vak_keuze_blok p{
	width: 10vw;
}
*/

.vak_keuze_container .breadcrum{
	margin: -5px 0px 10px 0px;
}

/*Kiezen van onderdeel/activiteit/uitleg/enz*/
.vak_niveau_container{
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: auto;
	grid-row-gap: 10px;
	grid-column-gap: 10px;
	grid-template-areas:
		'vak_niveau_titel'
		'vak_niveau_informatie'
		'vak_niveau_keuze1'
		'vak_niveau_keuze2';
	border: 1px solid black;
}

.vak_niveau_titel { 
	grid-area: vak_niveau_titel;
	font-size: 1.4em;
	font-weight: 800;
}

.vak_niveau_informatie { 
	grid-area: vak_niveau_informatie;
}

.vak_niveau_keuze1 { 
	grid-area: vak_niveau_keuze1;
}

.vak_niveau_keuze2 { 
	grid-area: vak_niveau_keuze2;
}


.vak_onderdeel_container{
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: auto;
	grid-row-gap: 10px;
	grid-column-gap: 10px;
	grid-template-areas:
		'vak_onderdeel_informatie'
		'breadcrum'
		'vak_onderdeel_lijst';
}


.vak_onderdeel_titel { 
	grid-area: vak_onderdeel_titel;
	font-size: 1.4em;
	font-weight: 800;
}

.breadcrum { 
	grid-area: breadcrum;
}

.vak_onderdeel_informatie { 
	grid-area: vak_onderdeel_informatie;
}

.onderdeel_informatie_mobiel{
	display: block;
}

.onderdeel_informatie_computer{
	display: none;	
}

.vak_onderdeel_lijst { 
	grid-area: vak_onderdeel_lijst;
}


.rating-container {
/*	display: grid;
	grid-template-columns: auto;
	grid-gap: 10px 10px;
*/
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(80px, 2fr) ) ;
	grid-gap: 10px 10px;

}

.rating-text {
	padding-left: 20px;
}

.rating {
	background-color: #5A6E7F;
	padding: 0.4rem 0.4rem 0.1rem 0.4rem;
	border-radius: 2.2rem;
	width: 250px;
	
}

svg {
	fill: rgb(242, 242, 242);
	height: 25px;
	width: 25px;
	margin: 0.2rem;
}

#radios label {
	position: relative;
}


.rating-container input[type="radio"] {
	position: absolute;
	opacity: 0;
	cursor: pointer;
}

.rating-container input[type="radio"] + svg {
	-webkit-transition: all 0.2s;
	transition: all 0.2s;
}

.rating-container input + svg {
	cursor: pointer;
}


.rating-container input[id="L_alle"] + svg{
	fill: rgb(146, 166, 185);
}

.rating-container input[id="L_1"] + svg {	fill: rgb(90, 206, 163); }
.rating-container input[id="L_3"] + svg {	fill: rgb(198, 247, 134); }
.rating-container input[id="L_5"] + svg {	fill: rgb(249, 248, 113); }
.rating-container input[id="L_7"] + svg {	fill: rgb(232, 155, 37); }
.rating-container input[id="L_9"] + svg {	fill: rgb(255, 116, 84); }

.rating-container input[type="radio"]:hover + svg,
.rating-container input[type="radio"]:checked + svg,
.rating-container input[type="radio"]:focus + svg {
	fill: rgb(255, 255, 255);
}

.rating-container input[id="L_alle"]:hover + svg,
.rating-container input[id="L_alle"]:checked + svg,
.rating-container input[id="L_alle"]:focus + svg {
	fill: rgb(57, 73, 85);
}

.svg_leerjaar svg {
	fill: rgb(146, 166, 185);
	height: 25px;
	width: 25px;
	margin: 0.2rem;
}

.svg_leerjaar input[type="radio"]:hover + svg,
.svg_leerjaar input[type="radio"]:checked + svg,
.svg_leerjaar input[type="radio"]:focus + svg {
	fill: rgb(57, 73, 85);
}

.rating-container .dropdown{
	background-color: #5A6E7F;
	background-image: url(/img/pijl_down.svg) ; 
	background-repeat: no-repeat;
	background-size: 1em;
	background-position-x: 90%;
	background-position-y: 0px;
	  
	color: #fff;
	width: 25vw;
	border-radius: 0.5rem;
	padding-left: 5px;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}


.vak_onderdeel_lijst h1{
			font-size: 1.25em;
			text-decoration: none;
			margin: 0.2em 0 0  0;
			font-weight: 500;
			}

.vak_onderdeel_lijst p{
			margin: 0;
}

.vak tr:nth-child(even) {background: transparent}
.vak tr:nth-child(odd) {background: #cce6ff}

/*startpagina*/
.startpagina_header{
	background-color: #5A6E7F;
	background-image: url(./img/startpagina_header_klein.jpg);
	opacity: 0.9;
	padding: 10px 15vw;
	text-align: center;
	border-radius: 0.25em;
}

.startpagina_header h1{
	background-color: rgb(110, 121, 134, 0.8);
	max-width: calc(50em * 0.5);
	margin: auto;
	padding: 0px;
	letter-spacing: 0.3rem;
	color: #fff;
}

.startpagina_header p{
	line-height: 1.5rem;
	max-width: calc(50em * 0.5);
	margin: auto;
	color: #fff;
	background-color: rgb(110, 121, 134, 0.8);
}

.startpagina_container{
	background-color: #cce6ff;
	max-width: 97vw;
	margin-bottom: 10px;
	margin-top: 10px;
	padding: 10px;
	border: 1px solid #5A6E7F;
	border-radius: 0.25em;
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: auto;
	grid-row-gap: 10px;
	grid-column-gap: 10px;
	grid-template-areas:
		'titel'
		'info'
		'button';
}

.startpagina_container img{
	display: none;
	border-radius: 0.25em;
}

.startpagina_container h1{
	grid-area: titel;
	max-width: calc(50rem * 0.75);
	text-align: center;
	letter-spacing: 0.2rem;
	margin: auto;
	font-size: 1.3rem;
}

.startpagina_container p{
	grid-area: info;
	max-width: calc(50rem * 0.75);
	text-align: center;
	line-height: 2rem;
	margin: auto;
}

.startpagina_container button{
	grid-area: button;
	display: block;
	background-color: #5A6E7F; 
	color: #fff;
	border: 1px solid #5A6E7F;
	border-radius: 0.25em;
	padding: 5px;
	margin: auto;
	width: 90vw;
	height: 34px;
	cursor:pointer;
	appearance: none;
	-webkit-appearance: none;
	font-family: 'Quicksand', sans-serif;
	font-weight: 500;
	font-size: 0.9em;
}

.startpagina_container_top10{
	background-color: #cce6ff;
	max-width: 97vw;
	margin-bottom: 10px;
	margin-top: 10px;
	border: 1px solid #5A6E7F;
	border-radius: 0.25em;
	display: flex;
	flex-direction: column;

	}

.startpagina_container_top10 h1{
	margin: 10px;
	padding: 0;
}

.top10{
	max-width: 100%;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;

}

.top10 p{
	margin: 0;
	padding: 0;
	width: 100%;
}

.top10 a{
	display: block;
	background-color: #5A6E7F;
	color: #fff;
	width: 90vw;
	margin: 5px;
	padding: 5px;
	border: 1px solid #5A6E7F;
	border-radius: 0.25em;
	font-weight: 500;
	font-size: 0.9em;
}

.top10 a:hover{
	color: #000;
	background-color: #67B9FF;
}

.top10 a:focus{
	color: #000;
	background-color: #67B9FF;
}

/*Profiel */

.profiel_deactiveren p{
	margin: 10px;
}


/*Vragen startscherm */
#data {
	padding: 10px 0px;
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

#data span{
	background-color:   #EDF6FF ;
	padding: 2px 5px;
	margin-bottom: 20px;
	border: solid 1px;
	border-image: linear-gradient(45deg,  #ffcc00 ,  #5CA5E6 ) 1;
	cursor: pointer;
	font-size: 0.8em;
}


/* container voor hele kleine schermen*/
@media (max-width: 320px)  {

	.container {

		grid-template-rows: 85px auto;
	}

header{
	font-size: 0.8em;
}

header li{ 
	font-weight: 400;
}
	
header .header_vak a{
	margin-right: 4px;
	margin-bottom: 2px;
}	

#header_knoppen{
	width: 200px;
	min-width: 0px;
}

header img {
    height: 35px;
	padding-top: 25px;
}

}

/* container voor grotere schermen*/
@media (min-width: 750px)  {
	/* header voor groot scherm */	
	header{
		padding-top: 10px;
	}

	header ul{
		margin-top: 5px;
	}

	header li a{
		padding: 6px 8px 2px 8px;
		margin-right: 5px;
	}

	#header_knoppen{
		min-width: 600px;
		max-width: 78vw;

	}
	
	#header_logo{
		padding-top:0px;
	}

	header img{
			width:8em;
			max-width: 25vw;
		}

}

/* container voor grotere schermen*/
@media (min-width: 1000px)  {
    .container {
	display: grid;
	grid-template-columns: auto 170px;
	grid-template-rows: 50px auto auto;
	grid-row-gap: 0px;
	grid-column-gap: 0px;
	grid-template-areas:
		'header header'
		'header_action header_action'
		'inhoud reclame'
		'footer footer';
	border: 1px solid black;	
	}
	
	reclame{
		display: block;
		min-height: 250px;
	}
	



	

	/*Kiezen van onderwerp/methode*/
	.vak_keuze_container{
		grid-row-gap: 5px;
		grid-template-areas:
			'vak_keuze_titel vak_keuze_sorteren'
			'vak_keuze_inhoud vak_keuze_inhoud';
		}

	.vak_keuze_inhoud { 
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr) ) ;
	}

	.vak_keuze_blok{
		min-width: 0px;	
		height: 90%;
		display: flex;
		flex-direction: column;
		padding:10px;
		margin: 5px 0px;
	}
	
	.vak_keuze_blok img{
		width: 140px;
		height: 100%;
		margin: 0px;;
	}
	
	.vak_keuze_blok p{
		width: 140px;
	}

	/*Kiezen van onderdeel/activiteit/uitleg/enz*/
	.onderdeel_informatie_mobiel{
	display: none;	
	}

	.onderdeel_informatie_computer{
		display: block;	
	}

	.rating-container {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 2fr) ) ;
	grid-gap: 10px 10px;

	}
	
	.vak_niveau_container{
	grid-template-areas:
		'vak_niveau_titel vak_niveau_informatie'
		'vak_niveau_keuze1 vak_niveau_keuze2';
	}

	
	
	/*startpagina*/
	.startpagina_container{
	background-color: #cce6ff;
	max-width: 97vw;
	margin-bottom: 10px;
	margin-top: 10px;
	padding: 10px;
	grid-template-columns: 60% 40%;
	grid-template-areas:
		'titel image'
		'info image'
		'button image';
	}
	
	.startpagina_container img{
	display: block;
	margin: auto;
	max-width: 300px;
	width: 20vw;
	max-height: 40vh;
	grid-area: image;
	}

	.startpagina_button{
		grid-area: button;
	}

	.startpagina_container button{
	display: block;
	background-color: #5A6E7F;
	color: #fff;
	border: 1px solid #5A6E7F;
	border-radius: 0.25em;
	padding: 5px;
	margin: auto;
	width: 100%;
	max-width: 40vw;
	height: 34px;
	cursor:pointer;
	appearance: none;
	-webkit-appearance: none;
	font-family: 'Quicksand', sans-serif;
	font-weight: 500;
	font-size: 0.9em;
	}
	
	.startpagina_header{
		background-image: url(./img/startpagina_header_groot.jpg);
	}
	

	.startpagina_container_top10{
		background-color: #cce6ff;
		max-width: 97vw;
		margin-bottom: 10px;
		margin-top: 10px;
		border: 1px solid #5A6E7F;
		border-radius: 0.25em;
		display: flex;
		flex-direction: column;

		}
	
	.startpagina_container_top10 h1{
		margin: 10px;
		padding: 0;
	}

	.top10{
		max-width: 100%;
		max-height: 300px;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
	}

	.top10 p{
		margin: 0;
		padding: 0;
		width: 100%;
		max-width: 30vw;
	}
	
	.top10 a{
		display: block;
		background-color: #5A6E7F;
		color: #fff;
		width: 350px;
		list-style-type: none;
		margin: 5px;
		padding: 5px;
		border: 1px solid #5A6E7F;
		border-radius: 0.25em;
		font-weight: 500;
		font-size: 0.9em;
	}


	.noselect {
		-webkit-touch-callout: none; /* iOS Safari */
		  -webkit-user-select: none; /* Safari */
		   -khtml-user-select: none; /* Konqueror HTML */
			 -moz-user-select: none; /* Old versions of Firefox */
			  -ms-user-select: none; /* Internet Explorer/Edge */
				  user-select: none; /* Non-prefixed version, currently
										supported by Chrome, Edge, Opera and Firefox */
	  }



}


/* container voor hele grote schermen*/
@media (min-width: 1440px)  {
	.container{
		width: 1440px;
		margin: 0 auto;
	}
	
	.startpagina_header{
		padding: 10px 100px;
	}	
	
	.top10{
		max-width: 100%;
		max-height: 150px;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
	}
	
	}


@media (max-width: 650px)  {
main .niet_mobiel{
	display: none;
}

.top10{
	max-width: 80vw;
	max-height: 100%;
	display: flex;
	flex-direction: column;

}

}

/* schakelt autozoom uit in safari */
@media screen and (-webkit-min-device-pixel-ratio:0) { 
	select,
	textarea,
	input {
	  font-size: 16px;
	}
 }

 #routing{
	display: block;
	width: 100%;
	position:fixed;
	bottom: 0px;
	left: 0px;
	z-index: 999;
	background-color: #3492D5;
	margin: 0 auto;
 }