:root {
  /* ************  Color reference chart  https://www.cssfontstack.com/oldsites/hexcolortool/  https://www.canva.com/colors/color-wheel/  */
  --ilc:#4f81bc;    /* icon logo color  rood fb0200  paars 7f00fb derde 7bfb00  vierde 00f9fb*/

  --bbc:#FAFF7F;    /* body background color */
  --btc:#000;       /*body text color */

  --hbc:#007C00;    /* header box color    */
  --htc:#FFFFFF;    /* header text color   */


  --fbc:#62E200;    /* Q-footer background color     */
  --ftc:#ffffff;    /* Q-footer text color     */

  --lbc:#dce6f2;    /* link background color     */
  --ltc:red;        /* link text color            */
  --lvbc:red;       /* link visited background colors    */
  --lvtc:red;           /* link visited text color       */
  --lhbc:#333333;   /*   link hover background colors  */
  --lhtc:  red;          /* link hover text color          */
  --labc:  red;          /* link active background colors    */
  --latc:  red;          /* link active text color          */

  --nbbc: #7f00fb;  /*  Q-navbar background color */
  --nbtc: #fff;   /* Q-navbar text color

  /*  --mb /* menu bar  */
  /*  --mbh /* menu bar hover  */
  /*  --dbm /* dropdown button menu */
  /*  --dbh /* dropdown button hover  */

}
/* ************  End color reference chart ******************** */


/* **************** dropdownL language bar  **************** */

#Q-language {            /* Q-language container */
  position: absolute;
  right: 0;
  top: 0;
  padding: 10px;

  overflow: hidden;
  background-color: var(--hbc);
  color: var(--nbtc);
  /* left: 0;
  margin-left: 0; */
  font-family: avenir;
  width: 50px;
  z-index: 200;
}

/* Links inside the Q-language */
#Q-language a {
  float: left;
  /*  display: block; */
  color: var(--nbtc);
  text-align: center;
  background-color: var(--hbc);
  padding: 14px 16px;
  text-decoration: none;
  font-size: 16px;
}

#Q-language a:hover {
  background-color: #ddd;
  color: black;
}

/* The dropdownL container */
.dropdownL {
  float: left;
  overflow: hidden;
  display: inline-block;
}

/* dropdownL button */
.dropdownL .dropbtnL {
  font-size: 16px;
  border: none;
  outline: none;
  color: inherit;
  padding: 4px 6px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

/* Add a red background color to Q-language links on hover */
#Q-language a:hover, .dropdownL:hover .dropbtnL {
  background-color: #98092f;
}

/* dropdownL content (hidden by default) */
.dropdownL-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 150;
}

/* Links inside the dropdownL */
.dropdownL-content a {
  float: none;
  /* position: absolute; */
  /*  display:inline-block  */
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a grey background color to dropdownL links on hover */
.dropdownL-content a:hover {
  background-color: #ddd;
  color: black;
}

/* Show the dropdownL menu on hover */
.dropdownL:hover .dropdownL-content {
  display: block;
}

/* The sticky class is added to the Q-language with JS when it reaches its scroll position */
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 200;
}

/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .i4l-tekst {
  padding-top: 60px;
}

/* **************** end dropdownL language bar  **************** */





/* **************** Dropdown navigation bar  **************** */

#Q-navbar {            /* Q-navbar container */
  overflow: hidden;
  background-color: var(--nbbc);
  color: var(--nbtc);
  /* left: 0;
  margin-left: 0; */
  font-family: avenir;
  z-index: 200;
}

/* Links inside the Q-navbar */
#Q-navbar a {
  float: left;
  /*  display: block; */
  color: var(--nbtc);
  text-align: center;
  background-color: var(--nbbc);
  padding: 14px 16px;
  text-decoration: none;
  font-size: 16px;
}

#Q-navbar a:hover {
  background-color: #ddd;
  color: black;
}

/* The dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
  display: inline-block;
}

/* Dropdown button */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: inherit;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

/* Add a red background color to Q-navbar links on hover */
#Q-navbar a:hover, .dropdown:hover .dropbtn {
  background-color: #98092f;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 150;
}

/* Links inside the dropdown */
.dropdown-content a {
  float: none;
  /* position: absolute; */
  /*  display:inline-block  */
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* The sticky class is added to the Q-navbar with JS when it reaches its scroll position */
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 200;
}

/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .i4l-tekst {
  padding-top: 60px;
}



/* **************** end  Dropdown navigation bar  **************** */






/* *********************** Text alignment left right  ************************************/


/* .alignleft {
float: left;
}
.alignright {
float: right;
}
*/



/* *********************** End text alignment left right  ************************************/


body {
  height:100%;
  padding: 0;
  margin: 0;
  text-align: left;
  background-color: var(--bbc);
}

.i4l-page {
  position:relative;
  min-height:100%;
  color: var(--btc);
  background-color: var(--bbc);
}

.i4l-header {
  /* text-align: center; */
  vertical-align: middle;
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
  padding-left: 0px;
  padding-bottom: 0px;
  min-width:100%;
  font-family:avenir;
  font-size:20px;
  color: var(--htc);
  background-color: var(--hbc);
}


.i4l-tekst {
  padding-bottom:50px;	/* Height of the Q-footer */
  color: var(--btc);
  background-color: var(--bbc);
}

.Q-footer {
  position:fixed;
  bottom:0;
  height: 50px;
  vertical-align: middle;
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  min-width: 100%;
  color: var(--ftc);
  background-color: var(--fbc);
  z-index: 200;
}

.Q-logo {
  float:left;
  margin-top: 0px;
  width:100%;
}

.Q-taal
float:left;
margin-top: 0px;
width:100%;
max-width: 5px;
}

.i4l-image {
  float:top;
  width:100%;
  padding-bottom: 2px;
}

.i4l-mid {
  vertical-align:middle
}

.Q-foto {
  height:200px;
  border:10px;
  padding:10px;
  border-color: var(--bbc);
}


/*   defining responsive table with flex container */
.flex-container {
  display: flex;

}

.flex-container > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}


/*   end defining responsive table with flex container */

.form {
  padding-bottom:50px;	/* Height of the Q-footer */
  color: /*btc*/ var(--btc);
  background-color: var(--bbc);
  margin-left: 20px;
  padding: 20px 20px;
}

a:link, a:visited {
  background-color: var(--lbc);
  color: var(--ltc);
  padding: 0px 0px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: var(--lhbc);
}

p {
  margin-left: 20px;
  margin-right: 20px;
  font-family:avenir;
  font-size:15px;
}

h1 {
  /* nieuwe h1 --> */
  margin-left: 20px;
  margin-right: 20px;
  font-family:avenir;
  font-size:25px;
  font-weight: bolder;
}

h2 {
  margin-left: 20px;
  margin-right: 20px;
  font-family:avenir;
  font-size:18px;
  font-style: italic;
}

h3 {

  margin-left: 20px;
  margin-right: 20px;
  font-family:avenir;
  font-size:15px;
}


h4 {

  margin-left: 20px;
  margin-right: 20px;
  font-family:avenir;
  font-size:15px;
}

h5 {

  margin-left: 20px;
  margin-right: 20px;
  font-family:avenir;
  font-size:15px;
  float: left;

}


/*  ********* table definitions ********** */

/* banner */
.tableH {
  margin-top:0px;
  margin-left:0px;
  margin-right:0px;
  padding-left:0px;
  padding-bottom:0px;
  vertical-align:middle;
  font-family:avenir;
  color:var(--htc);
  width:100%;
  border:0;
  background-color: var(--hbc);
  border-collapse: collapse;

}
.tableH td:nth-child(1) {
  width:20%;
  text-align:right;
  vertical-align:middle;
  background-color: var(--hbc);
  border:0 var(--hbc);
}
.tableH td:nth-child(2) {
  width:80%;
  text-align:left;

  font-size:4vw;
  margin-left: 0%;
  vertical-align:middle;
  background-color: var(--hbc);
  border:0 var(--hbc);
}



/* body tekst */
.table1 {
  margin-top:0px;
  margin-left:0px;
  margin-right:0px;
  padding-left:0px;
  padding-bottom:0px;
  vertical-align:middle;
  font-family:avenir;
  color:var(--btc);
  width:100%;
  border:0 var(--bbc);
  background-color: var(--bbc);
  border-collapse: collapse;

}
.table1 td:nth-child(1) {
  width:25%;
  text-align:left;
  vertical-align:top;
  border:0 var(--bbc);
  background-color: var(--bbc);

}
.table1 td:nth-child(2) {
  width:75%;
  text-align:left;
  margin-left: 0%;
  vertical-align:top;
  border:0 var(--bbc);
  background-color: var(--bbc);
}



/* Q-footer */
.tableF {
  margin-top:0px;
  margin-left:0px;
  margin-right:0px;
  padding-left:0px;
  padding-bottom:0px;
  vertical-align:middle;


  color:var(--ftc);

  width:100%;
  background-color: var(--fbc);
  border-collapse: collapse;

}
.tableF td:nth-child(1) {
  width:50%;
  text-align:left;
  vertical-align:middle;
  background-color: var(--fbc);
  font-family:avenir;
  font-size:calc(12px + 0.1vw);
}
.tableF td:nth-child(2) {
  width:50%;
  text-align:right;
  margin-left: 0%;
  vertical-align:middle;
  background-color: var(--fbc);
  font-family:avenir;
  font-size:calc(12px + 0.1vw);
}






.table15 {
  border-collapse: collapse;
}
.table15, th, td {
  border: 0px solid black;
}

.table15 th, td {
  padding: 15px;
}

.table15 tr, td:nth-child(1) {
  background: #ccc;
}

.table1, tr, td:nth-child(2) {
  background: #ddd;
}


/* ****************** make menu screensize responsive ************* */
@media screen and (max-width: 600px) {
  .Q-navbar a:not(:first-child) {display: none;}
  .Q-navbar a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .Q-navbar.responsive {position: relative;}
  .Q-navbar.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .Q-navbar.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
/* *********************** End dropdown navigation bar  ************************************/

@media screen and (max-width: 600px) {
  .i4l-tekst {
    padding-bottom:0px;	/* Height of the Q-footer */
    color: var(--btc);
    background-color: var(--bbc);
    margin-bottom: 2px;
  }

  .Q-footer {
    position:fixed;
    top: auto;
    left: auto;
    height: auto;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: -1px;
    min-width: 100%;
    color: var(--ftc);
    background-color: var(--fbc);
    z-index: 200;
  }

}