@charset "UTF-8";
:root {
  --red: #cf1829;
  --lightgray: #f0f0f0;
  --black:#000000;
  --font-family-sans-serif: "Open sans", "Helvetica Neue", Arial, sans-serif;
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; 
  }

html{
	/* padding over de volledige pagina van 2em */
	padding:2em;
	font-size:1em;
	color:black;
	font-family: Arial, Helvetica, sans-serif;
	
}
h3{
	color: red;
	text-align:center;
}

.logo{
	/* image class om logo een gepast formaat te geven */
	height: 3em;
	
}
.banner{
	/* image class om banner een gepast formaat te geven */
    width:100%; 
	text-align:center;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
	background-color:white;
	

}
.juist{
	color:green;
}
.fout{
	color:red;
}
#balk{
	width: 100%;
	background-color: lightgray;
	text-align:center;
	margin-top:30px;
	
}



#headersection{
	overflow: hidden;
	position:fixed;
	display:flex;
	justify-content:flex-start;
	width:100%;
	top:0px;
	background-color:white;
}
.menu{
	width:75%;
	display:flex;
	justify-content:flex-end;
	
	
}
/*.menuitem{
	width:15%;
	color:#000000;
	font-size: 1.3em;
	text-decoration:none;
	display: none;
}*/

.menu a {
  color: black;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
  
  
  
  
}
.menu a:hover {
  color: red;
  border-bottom: 3px solid red;
}
.active {
  background-color: white;
  color: red;
}
.footersection{
	background-color: lightgray;
	display:flex;
	width:100%;
	flex-wrap:wrap;
	font-size:1em;
}
.footersection > div {
	padding:2em;
	width:25%;
	font-size:1em;
}
input
{
	background-color:lightgray;
	border-width:1px;
	border-style:solid;
	border-color:red;
	margin-bottom:10px;
	width:25em;
}

.bodybox
{

	padding:5px;
	display:flex;
	justify-content:space-around;
	flex-wrap:wrap;

}
.appbox
{
	margin:2px;
	padding:2px;
	background-color:lightgray;
	border-width:1px;
	width: 20em;

	/*width:30em;
	height:7em; */
	/*font-size:0.25em;*/
	font-size:1em;
}	


#menu{
	width:35%;
}
#inhoud{
	width:65%;
}
#filmpjes{
    display:flex;
	width:100%;
}
#filmlijst, #leerpadenlijst, #loginlijst, #themalijst, #beheerlijst, #error{
	width:50%;
}

#filmvideo{
    width:50%;
}

.achtergrondfoto{
	background-image:url("foto/achtergrondafbeelding.png");
	background-repeat: no-repeat;
	border: 3px solid red;
	padding:2em;
}
/* opmaak van het formulier */
form{
	padding: 1em;
    width: 95%;
    
    font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;}
label, input, select{
    font-family: Arial, Helvetica, sans-serif;
	font-size: 1em; 
    width:100%;	
}	
fieldset{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em; 
    width:95%;	
}
input[type='checkbox']{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em; 
    width:40%;	
	
}
	
	/* einde opmaak van het formulier */
	
@media only screen and (max-width: 600px) {
#filmlijst, #leerpadenlijst, #loginlijst, #themalijst, #beheerlijst, #error {
	width:100%;

} 
#headersection{
	
	display:flex;
	justify-content:flex-start;
	width:110%;
	top:0px;
	background-color:white;
	flex-wrap:wrap;
}
.banner{
	/* image class om banner een gepast formaat te geven */
	
    width:100%; 
	text-align:center;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
	background-color:white;
	

}
#balk{
	width: 100%;
	background-color: lightgray;
	text-align:center;
	margin-top:3em;
	
}
h3{
	margin-top:5em;
}

}