/*Set the default behaviour for all elements*/
* {
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

body {
  margin: 1;

}

/* Style the top navigation bar */
.topnav {
  overflow: hidden;
  background-color: #322A0F;
}

/* Style the topnav links */
.topnav a {
  float: left;
  display: block;
  color: #FEFDF9;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
  background-color: #FEFDF9;
  color: #322A0F;
}

/* Vertikaal uitvullen */
.col-container {
  display: table;
  width: 100%;
  background: #FEFDF9;
}




.col {
  display: table-cell;
}


/* Create two columns/boxes that floats next to each other */
nav {
  float: left;
  width: 30%;
  background: #FEFDF9;
  padding: 20px;
  /*height: 99%;*/
}

/* Style the list inside the menu */
nav ul {
  list-style-type: none;
  padding: 0;
}

/*Main article*/
article {
  float: left;
  padding: 20px;
  width: 70%;
  background-color: #E4C245;
  /*height: 300px; /* only for demonstration, should be removed */
}

/*Sub article*/
.article2 {
  float: right;
  padding: 0px;
  width: 70%;
  background-color: #FEFDF9;
  color: #AA8A18;/*#E4C245 /*F1DF9D*/
  /*height: 300px; /* only for demonstration, should be removed */
}

/*Forms*/
.form-signin {
  float: left;
  padding: 20px;
  width: 70%;
  background-color: #E4C245;/*#AA8A18;*/
}
.form-signin h2 {
  color: #FEFDF9;
}

.form-signin p, legend {
  color: #FEFDF9;/*#E4C245;/*#F1DF9D;*/
}

.form-control {
 
  padding: 5px;
  /* width:100%; */
  background-color: #FEFDF9;
  color: #FEFDF9;/*#322A0F*/
}
input {
	display: block;
}

.button {
	padding: 8px 16px;
	background-color: #E4C245;
	text-align: center!important;
	color: #FEFDF9;
}
/* Change color on hover */
.button1:hover {
  background-color: #FEFDF9;
  color: #322A0F;
}


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

/* Style the content */
.content {
  background-color: #E4C245;
  padding: 10px;
  /*height: 200px; /* Should be removed. Only for demonstration */
}

/* Style the footer */
footer {
  background-color: #322A0F;
  padding: 10px;
  text-align: center;
  color: #FEFDF9;
}
/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
@media (max-width: 600px) {
  nav, article, .form-signin, .article2  {
    width: 100%;
    height: auto;
  }
  .hidden-small {
	  display:none;
  }
}