html { width: 100%; height: 100%; margin: 0 0 0 0;}
body {
	font-size: 90%; line-height: 1.2em;
	font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif";
    height: 100%; margin: 0 0 0 0;
    overflow: hidden;                   /* geen scrollbars */
}
/* Logo block */
.topblock { width: 1025px; margin: 0px; padding: 0px; }
.flexrow { display: flex; flex-flow: row wrap; margin: 0px; padding: 0px; justify-content: space-between;}
.flexbox1 { display: flex; flex-flow: row wrap; margin: 0px; padding: 0px; justify-content: space-between;}
.flexbox2 { display: flex; flex-flow: row wrap; margin: 0px; padding: 0px; justify-content: space-between;}
.logogz { flex: 0 1 12%; width: 12%; min-width: 0px; min-height: 0px; }
.logofi { flex: 0 1 12%; width: 12%; min-width: 0px; min-height: 0px; height: 138px; overflow: auto;}
.logosl { flex: 0 1 40%; width: 40%; min-width: 0px; min-height: 0px; }
.logobl { margin: 5px; padding: 0px; }
.imglogo { height: auto; max-width: 100%; display:inline-block;vertical-align: middle; border: 0px none;}
.hdrlogo { margin-top: 0px;}
/* tbv achtergrond botm=bottom image */
.gzbotmdv  { position: fixed; bottom: -1px; visibility: visible; width: 100%; }
.gzbotml  { margin: 0px 0px 0px 0px; float: left; height: 200px; width: 50%; }
.gzbotmr  { margin: 0px 0px 0px 0px; float: right; height: 200px; width:  50%;}
/* standaard */
h1, h2, h3 { text-align: center; }
div.outliner { height: 100%; padding: 0px; border: 0px solid white;}
/* Tekst blok absolute positie (links) */
div.maintext { position: absolute; top: 140px; left: 66px; width: 380px; height: 430px;
               border-top: 5px solid white; border-left: 5px solid white;
               border-bottom: 5px solid grey; border-right: 5px solid grey;
}
div.TxtHdr { position: relative; border: 0 solid green; padding: 5px 0px 0px 0px;}
div.ImgHdr { position: relative; border: 0 solid green; padding: 5px 0px 0px 0px; margin-bottom: 10px;}
div.TxtHdr h3 { margin: 0px 68px 0px 28px; padding: 0.6em 0 0.6em 0;}
div.TxtBdy { margin: 10px 25px 0px 30px; }
div.TxtBdy > ul { padding-inline-start: 20px;}
button.Btn { border: 1px solid #8c701c; font-size: 16px; font-family: sans-serif; line-height: 1.3em;
               width:  1.75em; height: 1.75em;  border-radius: 1em; box-sizing: content-box; 
               background-clip: padding-box; background-position-x: 0px; background-position-y: -112px;
               background-color: rgb(254, 238, 189); cursor: pointer; text-overflow: ellipsis;
               display: inline-block; position: absolute; overflow: hidden; top: 0.3em;
               padding: 0 0 0 0; 
               text-align: center;text-decoration: none; text-indent: -9999px; vertical-align: middle;
}
button.Btn:after {   background-repeat: no-repeat; background-position: center center;
                     border-radius: 1em; width: 22px; height: 22px;display: block;
                     position: absolute; content: ""; top: 50%; margin-top: -11px;
                     left: 50%; margin-left: -11px; 
                     background-color: rgba(0,0,0,0.5);
}
button.Btn1 { left: 8px; }
button.Btn1:after { background-image: url("jqui/images/icons-png/home-white.png"); }
button.Btn2 { right: 8px; }
button.Btn2:after { background-image: url("jqui/images/icons-png/arrow-r-white.png");}
button.Btn3 { right: 40px; }
button.Btn3:after { background-image: url("jqui/images/icons-png/arrow-l-white.png");}
/* Centrale knoppen blok (rechts boven) */
div.mainknop1 { position: absolute; top: 145px; left: 492px; width: 250px; 
               border: 0px solid white; }
div.mainknop2 { position: absolute; top: 700px; left: 400px; width: 200px; 
               border: 0px solid white; }
div.pgresbar  { position: absolute; top: 565px; left: 494px; width: 465px;}
#pgresser     { border:0px solid white; height: 8px; z-index: 1; }
/* Image blok absolute positie (rechts onder) pos1= video naast txt, pos2=alleen video*/
div.mainimag { border-top: 5px solid white; border-left: 5px solid white;
               border-bottom: 5px solid grey; border-right: 5px solid grey;
}
div.imagpos1 { position: absolute; top: 210px; left: 487px; width: 470px; height: 360px; }
div.imagpos2 { position: absolute; top: 140px; left: 110px; width: 790px; height: 480px; }
div.vidplay { margin: 0px 30px 0px 30px; }
.vidplayer1 { border: 5px solid white; border-radius: 8px; width:400px; height: 300px; }
.vidplayer2 { border: 5px solid white; border-radius: 8px; width:720px; height: 405px; }
img.mainimg { margin-left:35px; margin-top: 5px; width: 420px; height: 290px; }
div.mainimag h3 { margin: 8px 0px 8px 0px; }
/* Knoppen display - Plaatsing voor vijf knoppen (details instellingen zie knopstd knopmark*/
div.knopblok1 { margin: 0px; padding: 0px; width: 900px; 
               position: absolute; top: 610px; left: 66px;}
div.knopblok2 { margin: 0px; padding: 0px; width: 790px; 
               position: absolute; top: 635px; left: 110px;}
div.knopcontain {display: flex; flex-flow: row wrap; justify-content: space-between;}
.knopstd {flex: 0 1 1; width: 100px; min-width: 100px; min-height: 50px;
       color: white; font-weight: bold; 
       /* border-top: 5px solid #AEDFFE; border-left: 5px solid #AEDFFE;
       border-bottom: 5px solid #0075BE; border-right: 5px solid #0075BE; */
}
.smallfont { font-size: 75%;}
/* knop is een div maar daarin een image of text */
img.butimg { width: 100px; height: 100px; }
.buttxt { text-align: center; }
/* Instellingen voor de knop (incl animatie bij hoover) c1=#0075BE c2= #AEDFFE */
/*.knopstd { position: absolute; width: 100px; height: 100px; top: 610px; 
    display: inline-block; color: white; font-weight: bold;
    border-top: 5px solid #AEDFFE; border-left: 5px solid #AEDFFE;
    border-bottom: 5px solid #0075BE; border-right: 5px solid #0075BE; 
} */
.knop, .knopmark:hover { 
    background: -webkit-linear-gradient(90deg, #0075BE 5%, #AEDFFE 100%);
    background: -moz-linear-gradient(90deg, #0075BE 5%, #AEDFFE 100%);
    background: -ms-linear-gradient(90deg, #0075BE 5%, #AEDFFE 100%);
    background: linear-gradient(180deg, #AEDFFE 5%, #0075BE 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#AEDFFE",endColorstr="#0075BE");
}
.knopmark, .knop:hover { /* Kleuren zijn precies tegen gesteld t.o.v. div.knop */
    background: -webkit-linear-gradient(90deg, #AEDFFE 5%, #0075BE 100%);
    background: -moz-linear-gradient(90deg, #AEDFFE 5%, #0075BE 100%);
    background: -ms-linear-gradient(90deg, #AEDFFE 5%, #0075BE 100%);
    background: linear-gradient(180deg, #0075BE 5%, #AEDFFE 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0075BE",endColorstr="#AEDFFE");
}
.knopmark { 
    -webkit-box-shadow: 1px 1px 26px 18px rgba(0, 117, 190, 0.55);
    -moz-box-shadow: 1px 1px 26px 18px rgba(0, 117, 190, 0.55);
    box-shadow: 1px 1px 26px 18px rgba(0, 117, 190, 0.55);
}
/* Code voor de tabel van de popup data 2 blokken per rij */
.popcontainer { width: 640px; max-width:640px; max-height: 530px; height: 530px;
                padding: 5px 20px 5px 20px; 
                border-top: 5px solid white; border-left: 5px solid white;
                border-bottom: 5px solid grey; border-right: 5px solid grey;
}
.blok50r { box-sizing: border-box; width: 50%; height: 240px; border: 0; float: left; 
          overflow-y: auto; scrollbar-face-color: #817865; padding-right: 2px;}
.blok50l { box-sizing: border-box; width: 50%; height: 240px; border: 0; float: left; 
          overflow-y: auto; scrollbar-face-color: #817865; padding-left: 2px;}
.blok100 { box-sizing: border-box; width: 100%; height:240px; border: 0; float: left;  
           overflow-y: auto; scrollbar-face-color: #817865;}
.blokimg { box-sizing: border-box; width: 50%; height:240px; border: 0; float: left; }
img.popimag { width: 100%; height: 100%; overflow: hidden;}
div.popcontainer h3 { height: 20px; margin-top: 15px; margin-bottom: 15px;}
/* Code voor display van de icons */
.icon-hulp   { vertical-align: top; border: 0; margin-top: 2px; margin: 2px 3px 0px 1px; background-color: darkred; 
               border-radius: 1em; border: 2px solid #817865; }
/* Grid layout classes */
.gridalg { margin: 8px 8px 8px 8px; }
div.gridalg h3 { height: 20px;margin-top: 15px; margin-bottom: 15px;}
.grid2x2 { width: 100%; max-width: 640px; }
.grid3x3 { width: 100%; max-width: 960px; }
.grid4x3 { width: 100%; max-width: 1280px; }
     /*-- our cleafix hack -- */ 
.row:before, .row:after { content:""; display: table ; clear:both; }
.colalg { float: left; padding: 0px; background: #FFDCDC; position: relative;}
.col-2  { width: 50%; height: 240px; }
.col-3  { width: 33.3%; height: 240px; }
.col-4  { width: 25%; height: 240px; }
.outline, .outline *{ outline: 3px solid white; }
.imgtxt { position: absolute; bottom: 10px; left: 20px; color: white; 
          outline: 0; background: black; padding-left: 4px; padding-right: 4px;
          border: 2px solid white; border-radius: 8px;
}
img.collimg { width: 320px; height: 240px;}
/* bovenstaand is bedoeld voor media 1024x800, hieronder voor grotere schermen*/
@media all and (min-width: 1025px) {
  body { font-size: 100%; }
  div.topblock { width: 1400px; margin: 0px; padding: 0px; }
  div.maintext { top: 170px; left: 105px; width: 460px; height: 490px;}
  div.mainknop1 { top: 620px; left: 620px; width: 400px;}
  div.mainknop2 { top: 675px; left: 610px; width: 400px;}
  div.pgresbar  { top: 585px; left: 622px; width: 555px;}
  div.imagpos1 { top: 170px; left: 615px; width: 560px; height: 420px; }
  div.imagpos2 { top: 170px; left: 200px; width: 800px; height: 480px; }
  div.vidplay { margin: 0px 34px 0px 34px; }
  .vidplayer1 { width: 480px; height: 360px; }
  .vidplayer2 { width: 720px; height: 405px; }
  img.mainimg { width: 490px; height: 350px; }
  button.Btn { top: 0.5em;}
/* Knoppen display - Plaatsing voor vijf knoppen (details instellingen zie knopstd knopmark*/
  div.knopblok1 { top: 170px; left: 1230px; height: 320px; width: 200px; }
  div.knopblok2 { top: 170px; left: 1130px; height: 320px; width: 200px; }
  div.knopcontain {display: flex; flex-flow: column wrap; justify-content: space-between; height: 100%;}
  .knopstd {flex: 0 1 1; width: 180px; min-width: 100px; min-height: 50px;}
}
@media all and (min-width: 1500px) {
  body { font-size: 100%; }
  div.topblock { width: 1920px; padding: 20px 20px 0px 20px;}
  div.maintext { top: 270px; left: 150px; width: 520px; height: 550px;}
  div.mainknop1 { top: 780px; left: 812px; width: 420px;}
  div.mainknop2 { top: 255px; left: 120px; width: 200px; height: 125px; }
  div.pgresbar  { top: 745px; left: 814px; width: 635px;}
  .flexbox2 { flex-flow: column wrap; margin: 0px; padding: 0px; justify-content: space-between;}

  div.imagpos1 { top: 270px; left: 807px; width: 640px; height: 480px; }
  div.imagpos2 { top: 250px; left: 400px; width: 1040px; height: 615px; }
  div.vidplay { margin: 0px 34px 0px 34px; }
  .vidplayer1 { width: 560px; height: 420px; }
  .vidplayer2 { width: 960px; height: 540px; }
  img.mainimg { width: 570px; height: 427px; }
/* Knoppen display - Plaatsing voor vijf knoppen (details instellingen zie knopstd knopmark*/
  div.knopblok1 { top: 270px; left: 1578px;}
  div.knopblok2 { top: 255px; left: 1578px;}
  .gzbotml { height: 340px; }
  .gzbotmr { height: 340px; }
}