html {
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

body {
margin: 20px;
padding: 0;
	height:100%;
font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1em;
	background-color: #FFF ;
border: none;
}

h1 {margin: 0; padding-top: 50px;
padding-bottom: 50px;
font-size: 1.3em;}
h2 {margin: 0; padding-top: 10px; font-size: 1.2em;}
h3 {font-size: 1.1em;}
h4 {font-size: 1.0em;}

h1, h2, h3, h4, h5, h6, p {	color: #000;}

a:link {	color:#03C; 	text-decoration: none}

a:visited {color: #20B29A; 	text-decoration: none }

a:hover, a:active, a:focus {text-decoration: none; }

/* Om informatie op mobiele apparaten te verbergen */
.verberg {
display: block;
}

/* Opmaak van het menu */ 
.sidebar {
  margin: 0;
  padding: 0;
  width: 200px;
  position: fixed;
  height: 100%;
  overflow: auto;
}

.sidebar img {
padding: 20px 0px 20px 20px;
}

.sidebar ul {
  list-style-type: none;
background-image: linear-gradient(to right, lightblue, #FFF);
}

.sidebar ul li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

.sidebar ul li a.active {
  background-color: #4CAF50;
  color: white;
}

.sidebar ul li a:hover:not(.active) {
  background-color: #6495ED;
  color: white;
}

div.content {
  margin-left: 200px;
  padding: 1px 16px;
  height: 1000px;
}

div.footer {
	border-top: black 1px solid;
text-align: center;
padding: 20px 0px 40px 0px;
}

/* Het contactformulier */
.input-container {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  width: 100%;
  margin-bottom: 15px;
}

.icon {
  padding: 10px;
  background: dodgerblue;
  color: white;
  min-width: 50px;
  text-align: center;
}

.label-text {
  width: 18%;
  padding: 10px;
  outline: none;
}

.input-field {
  width: 50%;
  padding: 10px;
  outline: none;
}

.input-field:focus {
  border: 2px solid dodgerblue;
}

.flt-right {  /* met deze klasse kunt u een element aan de rechterkant van uw pagina laten zweven. Het zwevende element moet voorafgaan aan het element waarnaast het op de pagina staat. */
	float: right;
	margin: 15px 0px 15px 15px;
}

.flt-left { /* met deze klasse kunt u een element aan de linkerkant van uw pagina laten zweven. Het zwevende element moet voorafgaan aan het element waarnaast het op de pagina staat. */
	float: left;
	margin: 15px 15px 15px 0px;
}

/* table cells */
#vw th, td   { 
  text-align: left;
padding: 6px; }

#vw th   { background: #0074d9; color: #fff; 
}
#vw th a { color: #fff; text-decoration: none; }

#vw table.vw-grid { 
border-collapse: collapse;
}
#vw table.vw-grid tr:nth-child(even)                        { background: #eee; }
#vw table.vw-grid tr.vw-active, #vw table.vw-grid tr:hover { background: #c2e3ff; } /* highlight hover and current row edited */ 

/* Set a style for the submit button */
.knop-animatie {
    background-color: #0099FF; /* blue */
    border: 1px solid #0099FF;
border-radius: 5px;
box-shadow: 5px 5px 5px blue; 
transition: all 0.2s ease-in-out 0s;
    color: #000;
    padding: 5px ;
    text-align: center;
   font-size: 12px;
    cursor: pointer;
}

.knop-animatie:hover {
    background-color: #99FF33;
    border: 1px solid #99FF33;
box-shadow: 5px 5px 5px green; 
}

.achtergrond-blue {background-color: lightblue;}

/* Responsive layout - when the screen is less than 700px wide */
@media screen and (max-width: 700px) {
.verberg {
display: none;
}

  .sidebar {
    width: 100%;
    height: auto;
    position: relative;
display: inline-block;
  }

  .sidebar ul {
background-image: none;
background-color: transparent;
}

  .sidebar a {float: left;}

  div.content {margin-left: 0;}

/ * Make the two columns stack on top of each other instead of next to each other */
  .label-text, .input-field, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}

@media screen and (max-width: 400px) {
.verberg {
display: none;
}

  .sidebar a {
    text-align: center;
    float: none;
  }
}