/* CSS Document */
body {background-color: #FFF;
	color: #000000;
	font-family: "Times New Roman", Times, serif;
	font-size: 18px;}
  
div {border: 0;}

h1, h2, h3 {
  color: orange;
}

.button {
  font: bold 11px Arial;
  text-decoration: none;
  background-color: orange;
  color: #333333;
  padding: 2px 6px 2px 6px;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
}

img.portret {float:right;
	width:30%}

div.menu{
 font-size: 90%;
 position : absolute;
 left:0px;
 top:10px;
 width:180px;
 padding: 10px 0.5em 100px 0;
 border-right-width: 1px;
 border-right-color: black;
 border-right-style: solid;
 border-bottom-width: 1px;
 border-bottom-color: black;
 border-bottom-style: solid;
}

div.menu ul {list-style-type: none;}

img.vlag {
  width:50%;
  margin-left:auto;
  margin-right:auto;
}

span.opmerking{
 font-color: #BBB;
 font-size: 90%;
}

#container {
	margin: 4vw 0 0 0;
	padding: 0;
	width: 100%;
}
#content {
	width: 100%;
	float: left;
}
#pagewrap {
	padding: 0;
	width: 90%;
	max-width: 1400px;
	margin: 0 auto;
}

/* Aanmeldformulier */
/* Style inputs, select elements and textareas */
input[type=text], input[type=password], select, textarea{
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
}
input[type=text], input[type=password], select{
  max-width: 200px;
}

/* Style the label to display next to the inputs */
label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}

/* Style the submit button */
input[type=submit] {
  background-color: orange;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
}

/* Style the container */
.containerform {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}
.forminlog {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
  max-width: 400px;
}

/* Floating column for labels: 25% width */
.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}

/* Floating column for inputs: 50% width */
.col-50 {
  float: left;
  width: 50%;
  margin-top: 6px;
}

/* Floating column for inputs: 75% width */
.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}


@media screen and (max-width:1800px) {
#pagewrap {
	padding: 0;
	width: auto;
	max-width: none;
	margin: 0 170px 0 190px;
}
@media screen and (max-width:1400px) {
  #pagewrap {
	padding: 0;
	width: auto;
	margin: 0 20px 0 20px;
  }
  div.menu{
    position : relative;
    font-size: 80%;
    border-right: 0;
    border-bottom: 0;
  }
  .nav li {
    display: inline-block;
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media screen and (max-width: 1050px) {
  #pagewrap {
    width: auto;
  }
  #content {
    width: auto;
    float: none;  
  }
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
  .col-25, .col-50, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
  img.vlag {
    display:none;
  }
}