@charset "utf-8";
/* CSS Document */
#name{
	float:left;
	height:40px; 
	width: 38%; /* The width is 40% inclusief padding, by default */ 
	font-size:30px;
	color:black;
	text-align:left;
	background:transparant; 
	padding-left:0%;
	padding-right: 2%;
	padding-top:1%;
	padding-bottom:2%;
}
#menu{
	float:left;
	left:75%;
	width: 24%; /* The width is 50%, by default */ 
	height:40px; 
	/*font-size:30px;*/
	color:black;
	text-align:left;
	background:transparant; 
	padding-left: 1%;
	padding-right: 0%;
	padding-top:1%;
	padding-bottom:2%;
}
#login{
	float:left;
	left:50%;
	width: 33%; /* The width is 50%, by default */ 
	/*margin-right: 1%;*/
	height:40px; 
	/*font-size:30px;*/
	color:black;
	text-align:left;
	background:transparant; 
	padding-left:0%;
	padding-right: 2%;
	padding-top:1%;
	padding-bottom:2%;
}
#login.grid{
	display: grid;
    grid-template-columns: 50% 28% 18%;
   	grid-gap: 2%;
}
#login.nogrid{
	height:5.5vh;
	line-height: 5.5vh;
}
.loginl, .loginr{
	background-color: transparent;
	cursor:pointer;
	height:5.5vh;/*toegevoegd*/
	line-height: 5.5vh;/*toegevoegd*/
	min-height: 40px;/*toegevoegd*/
	max-height: 48px;/*toegevoegd*/
	padding-left:1%;
	padding-right: 1%;
}
.loginl{
	text-align: left;
}
.loginr{
	text-align: right;
}
.panel.show {
	max-height: 85vh;
}
#submenu{
	position:fixed;
	left:3%;
	z-index: 1;
	width: 94%;
	margin:80px 0px 40px 0px;
	padding-right: 3%;
}
#submenu div, #submenu label{
	text-align: center;
	background-color: #ccc;
	cursor:pointer;
	width:10%;
	Float:left;
	margin-right:2%;
	height:4vh;
	line-height: 4vh;
	min-height: 30px;/*toegevoegd*/
	max-height: 38px;/*toegevoegd*/
}
#submenu div:active, #submenu div:hover, #submenu label:active, #submenu label:hover {
    background-color: #ccc;
}
/* Use a media query to add a break point at 800px: */
@media screen and (max-width: 600px) {
	#name{
		width: 100%; /* The width is 100%, when the viewport is 600px or smaller */
	}
	#menu{
		width: 100%; /* The width is 100%, when the viewport is 600px or smaller */
		margin-top: 2%;
		padding-right: 4%;
	}
	#login{
		width: 100%; /* The width is 100%, when the viewport is 600px or smaller */
		text-align:center;
	}
	.loginl{
	text-align: match-parent;
	}
	.loginr{
		text-align: match-parent;
	}
	#submenu{
		grid-template-columns: auto auto auto;
		top:10%;
		width: 98%;
	}
	#submenu div, #submenu label{
		height:3vh;
		line-height: 3vh;
		width:30%;
	}
	.panel.show {
	max-height: 60vh;
}
}
div.menu{
	width: 75%;/* aangepast */
	max-width: 1028px;
	padding-left: 0%;
	z-index:1;
}
#menu2{
	position:fixed;
	left:3%;
	width:97%;
	top:160px;/*div menu 2 hoogte fixeert een minimum afstand tot de bovenkant van het secundaire menu*/
	visibility:visible;
	float:left;
	background:transparant;/*kies wit om transparantie op te heffen*/}
#menu3{
	position:relative;
	top: 2.2vh;/*div menu3 telt bij de gefixeerde minimum afstand tot de bovenkant van het secundaire menu een percentage van de viewpoorthoogte op*/
}
/* Style the buttons that are used to open and close the accordion panel */
button.accordion {
	/*background-color: #eee;*/
	background-color: white;
	color: #444;
	cursor: pointer;
	/*padding: 18px;*/
	width: 100%;
	height:5.5vh;/*toegevoegd*/
	line-height: 5.5vh;/*toegevoegd*/
	min-height: 40px;/*toegevoegd*/
	max-height: 48px;/*toegevoegd*/
	border: 1px solid black;
	text-align: center;
	outline: none;
	/*font-size: 100%;/*aangepast, was 15 px*/
	/*font-size: calc(12px + 0.2vw);*/
	transition: 0.4s;
	overflow: hidden;
}
button.accordion:active, button.accordion:hover {
    background-color: #ccc;
}

button.accordion:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

button.accordion.active:after {
    content: "\2212";
}

div.panel {
    padding: 0 0px;
    background-color: transparent;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
}
/*toegevoegd*/
.panel.show {
	z-index: 10;
 	opacity: 1;
 	/*max-height: 85vh;*/
	overflow-y: scroll;
	webkit-overflow-scrolling: touch;
	transition: max-height 0.4s ease-in;
}
.panel.hide {
  opacity: 0;
  height: 0;
}
/*einde toegevoegd*/
div.but_group{
	width:100%;
	margin-right:1%;
	float:left;
}
.vert-btn-group button {
    background-color: rgba(0,170,221,1.0); /* blue background */
	color: white;  /*White text */
	/*background-color: rgba(255,255,72,0.80);  yellow background */
	/*color: black;  zwarte text */
    border: 1px solid grey; /* Green border */
    /*padding: 10px 24px;  Some padding */
    cursor: pointer; /* Pointer/hand icon */
    width: 100%; /* Set a width if needed */
	height:5.5vh;/*toegevoegd*/
	line-height: 5.5vh;/*toegevoegd*/
	min-height: 40px;/*toegevoegd*/
    display: block; /* Make the buttons appear below each other */
	/*font-size: 100%;/*aangepast, was 15 px*/
	/*font-size: calc(12px + 0.2vw);*/
	/*padding: 18px;*/
}
.vert-btn-group button:not(:last-child) {
    border-bottom: none; /* Prevent double borders */
}

/* Add a background color on hover and active*/
.vert-btn-group button:hover, .vert-btn-group button:active {
    background-color: rgba(0,120,160,0.70);
}
.vert-btn-group div {
    background-color: white; /* white background */
	/*color: white;  /*White text */
	/*background-color: rgba(255,255,72,0.80);  yellow background */
	color: black;  /*zwarte text */
    border: 1px solid grey; /* Green border */
    /*padding: 10px 24px;  Some padding */
    /*cursor: pointer; /* Pointer/hand icon */
    width: 100%; /* Set a width if needed */
	height:5.5vh;/*toegevoegd*/
	line-height: 5.5vh;/*toegevoegd*/
	min-height: 40px;/*toegevoegd*/
    display: block; /* Make the buttons appear below each other */
	text-align: center;
	/*font-size: 100%;/*aangepast, was 15 px*/
	/*font-size: calc(12px + 0.2vw);*/
	/*padding: 18px;*/
}
.vert-btn-group input {
	background-color: red;
	width: 100%;
}