/* * * * * * * * * COLOURS * * * * * * * * * * * */
/* * * * * * * * * * * * * * * * * * * * * * * * */
/* CSS is used on:
 * https://koekenei.foliata.nl/
 * https://pheauteau.nl/
 * https://secure.hondeman.net/
 * https://secure.hondeman.net/fjhindex/
 * https://secure.hondeman.net/waldorf/
 * https://secure.hondeman.net/bookmarks/
 * https://foliata.nl/ip/
 * http://chez.hondeman.net/~hondeman/schrijfhulp.html
 */

:root {
  --COLdark:      #333333; /* text, footerbackground */
  --COLlight:     #f7f7f7; /* button/title/footer text */
  --COLback:      #f7f7f7; /* background */
  --COLprimary:   #416a41; /* title background, kader */
  --COLsecondary: #416a41; /* topmenubuttons */
  --COLtertiary:  #87bd87; /* leftmenubuttons */
  --COLtext:      #333333; /* calculated */
  --COLshade:     #aaaabb; /* calculated */
  --COLtitle:     #f7f7f7; /* title text color */
  --COLpaper:     #f7f7f7; /* paper background */
  --COLtableback: #416a41; /* table background */

  --COLsecondary2: #f7f7f7; /* calculated */
  --COLprimary2:  #f7f7f7; /* calculated */
  --COLtabletxt:  #f7f7f7; /* calculated */

  --mainfontfam: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  --titlefontfam: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  --buttonfontfam: Verdana, Geneva, sans-serif;
  --formfontfam: Verdana, Geneva, sans-serif;
  --monofontfam: "Courier New", Courier, monospace;
  --fancyfontfam: "brush script mt", cursive;
}

/* * * * * * * * * MAIN settings * * * * * * * * */
/* * * * * * * * * mobile first  * * * * * * * * */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100%;
  max-height: 100%;
  overflow: hidden;

  background-color: var(--COLback);
  font-family: var(--mainfontfam);
  font-size: 14pt;
  line-height: 1.1;

  color: var(--COLtext);
}

/* make HR behave like BR clear all */
hr {
  clear: both;
/*   margin: 2em 0; */
  margin: 0;

  border: 0;
  height: 2px;
  background-image: linear-gradient(to right, var(--COLback), var(--COLtext), var(--COLback));
}

/* * * * fullscreen images for photo show / slideshow * * * */
/* div on top of it all */
#ImageContent {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 0;
  z-index: 10;
  transition: all 0.7s ease;
}

#ImageClose, #ImagePrev, #ImageNext, #ImageTitle, #ImageSlide {
  position: absolute;
/*  font-family: var(--buttonfontfam); */
  font-family: var(--formfontfam);
  font-size: 200%;
  color: white;
  text-shadow: 0 0 6px black;
}

#ImageClose > a, #ImageTitle > a, #ImageSlide > a, #ImagZoom > a {
  color: white;
  text-decoration: none;
  text-shadow: 0 0 0 white;
}

#ImageClose > a:hover, #ImageTitle > a:hover, #ImageSlide > a:hover, #ImagZoom > a:hover {
  color: white;
  text-shadow: 0 0 6px white;
}

#ImageClose {
  top: 4px; right: 4px;
  width: 1em;
  z-index: 20;
}

#ImageSlide {
  display: block;
  bottom: 4px; right: 4px;
  width: 42px; height: 42px;
  z-index: 19;
}

#ImagePrev {
  top: 36px;
  bottom: 36px;
  width: 20%;
  left: 0;
  z-index: 12;
}

#ImageNext {
  top: 36px;
  bottom: 36px;
  width: 20%;
  right: 0;
  z-index: 11;
}

/* Januari => "'#B1F0F0'", */
a.Januari {
  background-color: #B1F0F0;
  color: white;
}

a.Januari:hover {
  color: white;
  text-shadow: 0 0 6px white;
  opacity: 0.7;
}

/* Februari => "'#DC0A21'", */
a.Februari {
  background-color: #DC0A21;
  color: white;
}

a.Februari:hover {
  color: white;
  text-shadow: 0 0 6px white;
  opacity: 0.7;
}

/* Maart => "'#3F8A31'", */
a.Maart {
  background-color: #3F8A31;
  color: white;
}

a.Maart:hover {
  color: white;
  text-shadow: 0 0 6px white;
  opacity: 0.7;
}

/* April => "'#FFE1F4'", */
a.April {
  background-color: #FFE1F4;
  color: white;
}

a.April:hover {
  color: white;
  text-shadow: 0 0 6px white;
  opacity: 0.7;
}

/* Mei => "'#0D552D'", */
a.Mei {
  background-color: #0D552D;
  color: white;
}

a.Mei:hover {
  color: white;
  text-shadow: 0 0 6px white;
  opacity: 0.7;
}

/* Juni => "'#FFEA4E'", */
a.Juni {
  background-color: #FFEA4E;
  color: white;
}

a.Juni:hover {
  color: white;
  text-shadow: 0 0 6px white;
  opacity: 0.7;
}

/* Juli => "'#C0000B'", */
a.Juli {
  background-color: #C0000B;
  color: white;
}

a.Juli:hover {
  color: white;
  text-shadow: 0 0 6px white;
  opacity: 0.7;
}

/* Augustus => "'#7C1824'", */
a.Augustus {
  background-color: #7C1824;
  color: white;
}

a.Augustus:hover {
  color: white;
  text-shadow: 0 0 6px white;
  opacity: 0.7;
}

/* September => "'#0199CA'", */
a.September {
  background-color: #0199CA;
  color: white;
}

a.September:hover {
  color: white;
  text-shadow: 0 0 6px white;
  opacity: 0.7;
}

/* Oktober => "'#FF942F'", */
a.Oktober {
  background-color: #FF942F;
  color: white;
}

a.Oktober:hover {
  color: white;
  text-shadow: 0 0 6px white;
  opacity: 0.7;
}

/* November => "'#7C4930'", */
a.November {
  background-color: #7C4930;
  color: white;
}

a.November:hover {
  color: white;
  text-shadow: 0 0 6px white;
  opacity: 0.7;
}

/* December => "'#BDF5F6'", */
a.December {
  background-color: #BDF5F6;
  color: white;
}

a.December:hover {
  color: white;
  text-shadow: 0 0 6px white;
  opacity: 0.7;
}

a.leftright {
  height: 100%; width:100%;
  position: absolute;
  border-radius: 4px;
  background-color: #111;
  color: white;
  text-decoration: none;
  text-shadow: 0 0 0 white;
  transition: 0.3s;
  opacity: 0.0;
}

a.leftright:hover {
  color: white;
  text-shadow: 0 0 6px white;
  opacity: 0.7;
}

.vcenterl {
  position: absolute;
  top: 45%; left: 8px;
}

.vcenterr {
  position: absolute;
  top: 45%; right: 8px;
}

#ImageTitle {
  bottom: 4px;
  width: 100%;
  z-index: 18;
  font-size: 100%;
  padding: 2px 1em;
}

#ImageZoom {
  position: absolute;
  top: 4px;
  left: 45%;
  width: 42px;
  z-index: 17;
  padding: 2px 1em;
}

.ImgMax {
  object-fit: cover;
  width: 100%;
  height: 100%;
  background-color: #000;
}

.ImgFull {
  object-fit: contain;
  width: 100%;
  height: 100%;
  background-color: #000;
}

.ImgTitle {
  position: relative;
  bottom: 2rem;
  color: #f8f8f8;
  text-shadow: 1px 1px 6px #000;
  font-size: 14pt;
  height: 0;
}

.Image:hover {
  cursor: pointer;
}

.Image {
  padding: 0;
  border: 0;
  margin: 0;
}

/* * * * website * * * * */
/* div on top of it all */
#overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  background-color: rgba(10, 10, 10, 0.8)
}

.glowing {
  background: linear-gradient(224deg,
    var(--COLprimary), var(--COLprimary), var(--COLprimary), var(--COLtertiary), var(--COLprimary), var(--COLprimary), var(--COLprimary));
  background-size: 600% 600%;

  -webkit-animation: AnimationName 29s ease infinite;
  -moz-animation: AnimationName 29s ease infinite;
  animation: AnimationName 29s ease infinite;
}

.glowingOnce {
  background: linear-gradient(224deg,
    var(--COLprimary), var(--COLprimary), var(--COLprimary), var(--COLtertiary), var(--COLprimary), var(--COLprimary), var(--COLprimary));
  background-size: 600% 600%;

  -webkit-animation: AnimationName 29s ease 1;
  -moz-animation: AnimationName 29s ease 1;
  animation: AnimationName 29s ease 1;
}

.glowingNone {
  background-color: var(--COLprimary);
}

@-webkit-keyframes AnimationName {
  0%{background-position:0% 14%}
  50%{background-position:100% 87%}
  100%{background-position:0% 14%}
}
@-moz-keyframes AnimationName {
  0%{background-position:0% 14%}
  50%{background-position:100% 87%}
  100%{background-position:0% 14%}
}
@keyframes AnimationName {
  0%{background-position:0% 14%}
  50%{background-position:100% 87%}
  100%{background-position:0% 14%}
}

#wrapper {
  height: 100vh;
  width: 100vw;
  
  display: grid;

  grid-template-columns: auto;
  grid-template-rows: auto 1fr;
  grid-template-areas: 
    'header'
    'main';
  overflow: hidden;
}

#header, #header2 {
  grid-area: header;
  display: grid;
  grid-template-columns: auto 3em;
  grid-template-rows: 2fr;
  grid-template-areas: 
    'title burger'
    'nav   nav' ;
  color: var(--COLtitle);
  text-align: center;
  overflow-x: hidden;
  transition: 0.6s; /* Add a transition effect (when scrolling - and font size is decreased) */
}

#scrolling {
  grid-area: scrolling;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  height: 33vh;
}

#bmain, #bmainwide, #scrollingmain {
  grid-area: main;
  position: relative;
  letter-spacing: 1px;
  line-height: 1.66;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;

  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas:
  "bleft"
  "bcenter"
  "bright"
  "bfooter";
}

#scrollingmain {
  grid-template-areas:
  "scrolling"
  "bleft"
  "bcenter"
  "bright"
  "bfooter";
}

#bmain a, #bmainwide a { 
  color: var(--COLsecondary);
  text-decoration: underline;
  text-underline-offset: 0.3em;
  transition: all 0.3s ease;
}

#bmain a:hover, #bmainwide a:hover, #scrollingmain a:hover {
  color: var(--COLtertiary);
  text-decoration: underline;
  text-shadow: 0 0 6px var(--COLlight);
}

#columns5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 0.5em;
}

/*#wrapper > #header img {
  padding: 4px;
}
*/

.title {
  grid-area: title;
  margin: 0 auto 2px auto;
  padding: 0.1em 0 0.2em 0;
  text-decoration: none;
  color: var(--COLtertiary);
}

.title img {
  vertical-align: middle;
  max-width: 300px;
/*  margin: 0.5em 10px; */
  margin: 6px 0.5em;
  transition: 0.6s; /* Add a transition effect (when scrolling - and font size is decreased) */
}

.title h1 {
  display: inline-block;
  vertical-align: middle;
  font-family: var(--titlefontfam);
  font-size: 210%;
  text-shadow: 0 0 3px var(--COLprimary2);
  transition: 0.6s; /* Add a transition effect (when scrolling - and font size is decreased) */
  color: var(--COLtitle);
  margin: 14px 0 4px 0;
}

.title h2 {
  display: block;
  vertical-align: middle;
  font-family: var(--titlefontfam);
  font-size: 160%;
  text-shadow: none;
  transition: 0.6s; /* Add a transition effect (when scrolling - and font size is decreased) */
  color: var(--COLtitle);
}

/* title h1 is usually BOLD, can be overwritten: */
.normal {
  font-weight: normal !important;
}

/* is replaced by .titlebackground */
.chezhondeman {
  width: 167px;
  height: 48px;
  background-image: url(https://secure.hondeman.net/images/chezhondeman-167.png);
  background-repeat: no-repeat;
  margin: 4px auto;
}

.titlebackground {
  width: 320px;
  height: 48px;
  background-image: url(/_images/titleback.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  margin: 4px auto;
}

/*  #wrapper > #header > .logo, #wrapper > #header2 > .logo, #wrapper > #footer > .third > .logo { */
#footer > .third > .logo {
/*   grid-area: logo; */
  display: inline-block;
  background-image: url(https://secure.hondeman.net/images/foliata.svg);
  background-repeat: no-repeat;
  background-size: contain;
  width: 36px;
  height: 22px;
  margin-left: 0.5em;
}

.burger {
  grid-area: burger;
  width: 1.5em;
  height: 1.5em;
  font-family: var(--buttonfontfam);
  font-size: 200%;
  line-height: 1.2;
  text-align: center;
  float: right;
  margin: 8px;
  background-color: color-mix(in srgb, var(--COLprimary), transparent 70%);
  border-radius: 50%;
}

/* nav = Large buttons on screen, hamburger on mobile */
#nav {
  grid-area: nav;
  overflow: hidden;
  height: auto;
  overflow-x: hidden; /* toggle for show/hide */

  max-height: 0px; 	/* = hidden */
  transition: all linear 0.7s;
  transition-timing-function: ease;
}

#scrolling #nav {
  position: fixed;
  top: 3em; right: 0; width: 90%;
}

.hiddenmenu {
  max-height: 450px !important; /* show */
}

/*#wrapper > #header > #nav a, #wrapper > #header2 > #nav a { */
#nav a, #nav button {
  float: left;
  width: 100%;
  padding: 1em 2em;
  border: none;
  border-top-left-radius: 24px;
  border-bottom-right-radius: 24px;
  margin: 0 0 1px 1px;
  font-family: var(--buttonfontfam);
  font-size: 100%;
  text-align: center;
  text-decoration: none;
  background-color: var(--COLtertiary);
  color: var(--COLtertiary2);
  transition: text-shadow 1s ease;
}

#wrapper > #header2 > #nav a.active {
  color: var(--COLtitle);
}

#wrapper > #header > #nav a:hover, #wrapper > #header2 > #nav a:hover, #wrapper > #header > #nav button:hover {
  background-color: var(--COLsecondary);
  color: var(--COLsecondary2);
  text-shadow: 0 0 6px var(--COLsecondary2);
}

.burger a {
  display: table-cell;
  text-decoration: none;
  color: white;
  width: 2em;
  padding: 0.25em 0;
}

.burger a:hover {
  color: white;
  text-shadow: 0 0 6px white;
}

#bleft {
  grid-area: bleft;
/* border: 1px solid var(--COLsecondary); */
}

#bright {
  grid-area: bright;
/* border: 1px solid var(--COLsecondary); */
}

#bcenter {
  grid-area: bcenter;
  padding: 0;
}

#footer {
  grid-area: bfooter;
  color: var(--COLtertiary);

  padding: 8px;
  text-align: center;
  font-size: 80%;
  clear: both;
}

#bleft > a {
  display: block;
  margin: 3px 3px 1px 3px;
  padding: 4px 2px;
  font-family: var(--buttonfontfam);
  font-size: 80%;
  text-align: center;
  text-decoration: none;
  background-color: var(--COLsecondary);
  color: var(--COLsecondary2);
}

#bleft > a:hover, #bleft a.active {
  background-color: var(--COLtertiary);
  color: var(--COLtertiary2);
/*   text-shadow: 0 0 6px var(--COLtertiary2) */
}

/* switch bleft a:hover SHADOWED */
.shadowed {
  text-shadow: 0 0 6px var(--COLtertiary2);
}

.explorer {
  padding: 0 0 0 1em;
}

.explorer > a {
  display: inline;
  margin: 3px 3px 1px 3px;
  font-family: var(--buttonfontfam);
  font-size: 80%;
  background-color: inherited;
}

.third {
  float: left;
  width: 33%;
  margin: 0 auto;
  text-align: center;
}

/* GSM: 1 column, tablet 2 columns, pc 3 columns */
.columns {
  display: block;
  column-count: 1;
}

#footer .third a {
  margin: 0 0.3em;
}

#footer a {
  color: var(--COLtitle);
}

#bcenter > .bread {
  font-family: var(--buttonfontfam);
  font-size: 67%;
  margin: 0.5em 1em;
}

#bcenter p {
  margin: 0.5em 1em;
  margin-bottom: 0.5em;
}

/* #wrapper > #bmain > #bcenter p::first-letter, #wrapper > #bmain > #bright p::first-letter { */
p.first::first-letter {
  float: left;
  font-size: 380%;
  line-height: 75%;
  padding: 8px 4px 1px 0;
}

#bcenter h2 {
  text-align: center;
  font-family: var(--titlefontfam);
  font-size: 1.4em;
  margin: 0.6em 0.1em 0.1em 0.1em;
  clear: both;
}

#bcenter h3 {
  text-align: center;
  font-size: 1.2em;
  color: var(--COLsecondary2);
  background-color: var(--COLsecondary);
  padding: 0.1em 0.4em;
  clear: both;
}

#bcenter h4 {
  font-size: 1.3em;
  text-align: center;
  text-align: left;
  font-family: var(--fancyfontfam);
  clear: both;
}

#bcenter .key {
  display: inline;
  color: var(--COLback);
  background-color: var(--COLtext);
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  padding: 2px 0.4em 4px 0.4em;
  margin-right: 0.1em;
}

#mybread > a { 
  color: var(--COLsecondary);
  text-decoration: underline;
  text-underline-offset: 0.3em;
  text-decoration-color: var(--COLtertiary);
  transition: all 0.3s ease;
}

#mybread > a:hover {
  color: var(--COLtertiary);
  text-decoration: underline;
  text-shadow: 0 0 6px var(--COLlight);
}

#bcenter h3 a {
  font-size: 50%;
  text-decoration: none;
  vertical-align: super;
}

pre {
  text-align: left;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

/* #wrapper > #bmain > #bcenter input { */
input {
  background-color: var(--COLprimary);
  color: var(--COLprimary2);
  transition-duration: 0.2s;
  padding: 6px;
  border-radius: 3px;
  border-width: 0;
  font-size: 85%;
}

/* #wrapper > #bmain > #bcenter input:hover { */
input:hover {
  background-color: var(--COLsecondary);
  color: var(--COLlight);
  text-shadow: 0 0 6px var(--COLlight);
}

/* #bmain > #bcenter ul { */
ul {
  display: table;
  list-style: none;
  margin: 0 1em 0 2em;
}

/* #bmain > #bcenter ul > li:before { */
ul > li:before {
  content: "-";
  display: table-cell;
  width: 1.2em;
}

/* #bmain > #bcenter ul > li { */
ul > li {
  display: table-row;
}

.centerblock {
  margin: auto;
  width: 95%;
  text-align: center;
}

iframe {
  display: block;
  border: 0;
  overflow: hidden;
  margin: 1em auto;
}

/* * * * * * * * * * * * * * * * * * *
 * Ordered lists like buttons
 * * * * * * * * * * * * * * * * * * */
ol {
  display: table;
  border-collapse: separate;
  border-spacing: 0 4px;
  list-style: none;
  counter-reset: my-basis-counter;
  width: 100%;
}

ol li {
  display: table-row;
  counter-increment: my-basis-counter;
  background-color: var(--COLtertiary);
  color: var(--COLtertiary2);
  border-top-left-radius: 24px;
  border-bottom-right-radius: 24px;
}

ol li::before {
  content: counter(my-basis-counter) ": ";
  display: table-cell;
  padding: 8px;
  width: 2em;
}

ol li a {
  color: var(--COLsecondary);
  text-decoration: underline;
}

/*  #bmain > #bcenter a:hover {
  color: var(--COLtertiary2);
  text-decoration: underline;
  text-shadow: 0 0 6px var(--COLtertiary2)
}
*/

#bcenter .foot {
  clear: both;
  margin: 3px 0 1px 0;
  padding: 2px 1em;
  background-color: var(--COLsecondary);
  color: var(--COLsecondary2);
  font-family: var(--buttonfontfam);
  font-size: 60%;
  text-align: right;
  text-shadow: 0 0 6px var(--COLlight)
}

.hero {
  position: relative;
  display: inline-block;
  left: 0; top: 0;
  width: 100%;
  color: var(--COLdark);
  text-align: center;
}

.fullwidth, .portfolio {
  width: 100%;
  transition: all 0.3s ease-out;
}

.maxwidth {
  display: block;
  max-width: 100%;
  margin: 0 auto;
}

.blogwidth {
  display: block;
  max-width: 100%;
  margin: 0 auto;
}

.kader {
  color: var(--COLsecondary2);
  background-color: var(--COLsecondary);
  font-style: italic;
  padding: 1em;
  margin: 1em;
  overflow: hidden;
}

.kader a {
  color: var(--COLsecondary2) !important;
}

.greyed { /* old/invalid table entry: greyed out */
  color: var(--COLtableback);
  background-color: var(--COLsecondary);
}

fieldset {
  border: 4px outset;
  padding: 0.5em;
  background-color: var(--COLpaper);
  border-radius: 8px;
}

.mycell, .quote { /* fullwidth on mobile, 1/3 on computerscreen */
  display: block;
  width: 100%;
  text-decoration: none;
  box-shadow: 1px 1px 100px inset var(--COLback);
/*  color: var(--COLtertiary2); */
  text-align: center;
  padding: 2px 1em;
  margin: 0.5em 0;
  overflow: hidden; 
}

.mycell a, .quote a {
  text-decoration: none;
  color: var(--COLsecondary2) !important;
}

/* lifting objects like foto's panels */
.lifting {
  box-shadow: 1px 1px 3px var(--COLshade);
  transition: all 0.3s ease;
}

.lifting:hover {
  box-shadow: 12px 12px 32px var(--COLshade);
  transform: scale(1.020);
}

/* lifting objects like foto's panels */
.LiftingMore {
  transition: all 2s ease-out;
}

.LiftingMore:hover {
  transform: scale(1.200);
}
.foto {
  display: inline-block; 
/*  float: left; */
  padding: 6px;
  margin: 8px;
  background-color: #fff;
  color: #665 !important;
  text-align: center;
  text-decoration: none;
  font-family: var(--formfontfam);
  font-size: 67%;
  letter-spacing: 0;
}

.foto:nth-child(even) {
  float: right;
}

.inlinefoto {
  padding: 0;
  margin: 0;
  object-fit: cover;
  max-width: 100%;
}

/* fotos in text, alternating left/right on PC, full size on GSM */
.afb3 {
  float: right;
  padding: 0;
  margin: 0;
  object-fit: cover;
  width: 100%;
}

/* foto's with a white border */
.fotoright, .fotocenter, .fotoleft, .fotoinline  {
  display: inline-block; 
  background-color: #fff;
  color: #665 !important;
  margin: 4px;
  padding: 8px;
  box-shadow: 4px 4px 8px var(--COLshade);
  font-family: var(--formfontfam);
  font-size: 67%;
  text-align: right;
  max-width: 92%;
}

.fotoright {
  float: right;
  margin: 4px 0 4px 2em;
}

.fotoleft {
  float: left;
  margin: 4px 2em 4px 0;
}

.fotocenter {
  margin: 4px auto 2em auto;
}

/* used for logos in text (cpchild) */
.fotoinline {
  background-color: inherit;
  margin: 4px 4px;
  box-shadow: none;
}

.quarter {
  display: inline-block; 
  padding: 0;
  margin: 0;
  background-color: #fff;
  width: 100%;
  overflow: auto;
}

code, blockquote, .paper, .kolom {
  display: block;
  vertical-align: top;
  background-color: var(--COLpaper);

  border-top-left-radius: 6px;
  border-bottom-right-radius: 6px;
  box-shadow: 4px 4px 16px var(--COLshade);
  
  text-align: left;
  margin:  1em 1em;
  padding: 0.5em 1em;
  clear: both;
}

p > code {
  margin: 0;
}

.kolom {
  display: inline-block;
  width: 14em;
}

.datum {
  display: inline-block;
  width: 7em;
  text-align: center;
  color: var(--COLtertiary2) !important;
  border: 1px solid var(--COLtertiary);
  border-radius: 5px;
  margin: 0 0 1px 0;
}

.CTA {
  display: inline-block; 
  padding: 1em;
  border-top-left-radius: 24px;
  border-bottom-right-radius: 24px;
  border-style: none;
  margin: 0.3em 1em;
  font-family: var(--buttonfontfam);
  font-size: 90%;
  text-align: center;
  background-color: var(--COLtertiary);
  text-decoration: none !important;
  color: var(--COLtertiary2) !important;
  min-width: 14em;
  max-width: 95%;
  box-shadow: 2px 2px 8px var(--COLshade);
  overflow: hidden;
  transition: all 0.3s ease-in;
}

.CTA:hover {
  background-color: var(--COLsecondary) !important;
  color: var(--COLsecondary2) !important;
  text-shadow: 0 0 6px var(--COLsecondary2);
  box-shadow: 3px 3px 12px var(--COLshade);
}

.CTA.right {
  float: right !important;
}

.CTAlogo {
  display: inline-block;
  top: 0;
  vertical-align: top;
  padding: 0; margin: 0;
}

.CTAcontent {
  display: inline-block;
  top: 0;
  vertical-align: top;
  max-width: 85%;
}

.CTAlogoR {
  display: inline-block;
  top: 0;
  vertical-align: top;
  padding: 0; margin: 0;
}

.CTAcontentL {
  display: inline-block;
  top: 0;
  vertical-align: top;
  max-width: 85%;
}

.CTAlogo img, .CTAlogoR img {
  width: 3em;
  height: 6em;
}

.download {
  display: inline-block; 
  padding: 1em;
  border-top-left-radius: 24px;
  border-bottom-right-radius: 24px;
  border-style: none;
  margin: 0.3em 1em;
  font-family: var(--buttonfontfam);
  font-size: 90%;
  text-align: center;
  background-color: var(--COLtertiary);
  text-decoration: none !important;
  color: var(--COLtertiary2) !important;
  min-width: 14em;
  max-width: 95%;
  box-shadow: 2px 2px 8px var(--COLshade);
  overflow: hidden;
  transition: all 0.3s ease-in;
}

.download:hover {
  background-color: var(--COLsecondary) !important;
  color: var(--COLsecondary2) !important;
  text-shadow: 0 0 6px var(--COLsecondary2);
  box-shadow: 3px 3px 12px var(--COLshade);
}

.yellow {
  display: inline-block; 
  height: 20em;
  width: 20em;
  background-color: #eeb !important;
  color: #338;
/*
  box-shadow: 1px 1px 5px var(--COLshade);
 */ 
  font-size: 70%;
  text-align: left;
  margin:  1em 2em;
  padding: 1em;

  overflow: hidden;
/*
  transition: 0.5s;
  transform: rotate(2deg);
*/
}

.yellow-w {
  width: 40em;
}

.yellow-l {
  height: 30em;
}
/*
.yellow:nth-child(even) {
  transform: rotate(-2deg);
}

.yellow:nth-child(5n+4) {
  transform: rotate( 3deg);
  background-color: #ebb;
}

.yellow:nth-child(6n+5) {
  transform: rotate(-5deg);
}

.yellow:hover {
  transform: rotate(0);
  box-shadow: 4px 6px 5px var(--COLshade);
}
*/

.shaded {
  background: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.11));
}

.note {
  display: inline-block; 
  background-color: var(--COLpaper);
  box-shadow: 2px 2px 4px var(--COLshade);
  margin:  1em 2em;
  padding: 1em;
  overflow: hidden;
  transition: 0.5s;
  transform: rotate(2deg);
}

.note:nth-child(even) {
  transform: rotate(-2deg);
}

.note:nth-child(6n+4) {
  transform: rotate(-8deg);
}

.note:hover {
  transform: rotate(0);
  box-shadow: 8px 8px 24px var(--COLshade);
}

.right {
  text-align: right;
}

.left {
  text-align: left;
}

.pad1em {
  padding: 0.5em 1em;
}

.fineborder {
  border: 1px solid var(--COLsecondary);
}

.listlist {
  font-size: 80%;
  text-align: right;
}

.mono {
  font-family: var(--monofontfam);
  text-align: center;
  padding: 0.1em 1em;
}

.cleantext {
  text-decoration: none !important;
}

.borderless {
  padding: 0px;
  margin: 0px;
  border: 0px;
}

.border {
  padding: 0px;
  margin: 1em;
  border: 1em;
}

audio {
  height: 36px;
  width: 100%;
  color: var(--COLsecondary2);
  background-color: var(--COLsecondary);
  border-top-left-radius: 12px;
  border-bottom-right-radius: 12px;
  margin: 14px 0;
}

audio::-webkit-media-controls-enclosure {
  border-radius: 2px;
  color: var(--COLsecondary2);
  background-color: var(--COLsecondary);
}

.audiobackground {
  background: url(https://secure.hondeman.net/images/audioplayer.png) var(--COLsecondary);
  background-size: cover;
  height: 4em;
  padding: 4px 0 0 0;
  margin: 0 1em;
}

.audioplayer {
  color: var(--COLsecondary2);
  background-color: var(--COLsecondary);
  padding: 0.5em;
  border-top-left-radius: 12px;
  border-bottom-right-radius: 12px;
  overflow: hidden;
  margin: 0 1em 2px 1em;
  text-align: center;
}

.audiotitle {
  display: block;
}

header {
  text-align: center;
}

table {
  border-collapse: separate;
  background-color: var(--COLtableback);
  color: var(--COLtabletxt);
  border-spacing: 0px;
  -webkit-border-horizontal-spacing: 0px;
  -webkit-border-vertical-spacing: 0px;
  margin: 0.5em auto;
  border: 2px solid var(--COLtabletxt);
  border-top-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

th {
  border-top: none;
}

td, th {
  margin: 4px;
  padding: 5px 4px;
  text-align: right;
  border-left: 1px solid #999999;
}

td:first-child, th:first-child {
  border-left: none;
}

tr {
  background: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.1));
}

td a {
  color: var(--COLtabletxt) !important;
}

.info {
  width: 95%;
  background-color: var(--COLtableback);
  color: var(--COLtabletxt);
  margin: 0 auto;
  border: 2px solid;
  border-top-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.info1 {
  display: inline-block;
  vertical-align: top;
  width: 25%;
  text-align: right;
  padding: 0 0.3em;
}

.info2 {
  display: inline-block;
  vertical-align: top;
  width: 74%;
  text-align: left;
  padding: 0 0.3em;
}

.info3 {
  display: inline-block;
  vertical-align: top;
  width: 100%;
  text-align: center;
  font-size: 1.7em;
  letter-spacing: 0;
  font-family: var(--fancyfontfam);
  text-shadow: 0 0 3px var(--COLprimary2);
  padding: 0 0.3em;
/*  background-color: var(--COLlight) !important;
  color: var(--COLtertiary); */
}

.title svg {
  color: var(--COLtitle);
  width: 2em;
  height: 2em;
}

#nav a svg {
  width: 1em;
  height: 1em;
}

#footer a svg {
  width: 2em;
  height: 2em;
}

.editbutton {
  position: absolute;
  top: 4px;
  right: 4px;
}

/* * * * * * * * * * * * * * * * *
 * SHOWCASE styles
 * * * * * * * * * * * * * * * * */
/* groottes: small  = 4/3 = 120px hoog, 90px breed
 *           medium = 2/3 = 120px hoog, 180px breed
 *           large  = 4/9 = 120px hoog, 270px breed */
.showcase {
  display: grid;
  grid-gap: 8px;
  grid-template-columns: repeat( auto-fill, minmax( 90px, 1fr ) );
  grid-auto-rows: 120px;
  grid-auto-flow: dense;
  width: 100%;
  padding: 8px;
}

.flexcase {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: left;
}

.card {
  margin: 0;
  transition: all 2s ease-out;
  overflow: hidden;
}

.flexcard {
  margin: 8px;
}

/* portrait foto, H/W = 0.75 */
  .sS {
  grid-column-end: span 1;
}

/* landscape foto, H/W = 1.333 */
.sM {
  grid-column-end: span 2;
}

/* more-than-landscape foto, H/W => 1.333 */
.sL {
  grid-column-end: span 3;
}

.sCover {
  height: 150px;
  width: 100%;
  object-fit: cover;
}

.sContain {
  height: 150px;
  width: auto%;
  object-fit: contain;
}

.sTitle {
  position: relative;
  top: -150px;
  color: #f8f8f8;
  text-shadow: #000 1px 1px 6px;
  font-family: var(--mainfontfam);
  text-align: center;

}


/* formulier is presented in front of the website
 * this is for mobile:
 */
#formulier {
  position: fixed;
  top: 15%; right: 0; left: 0;
  margin-right: auto;
  margin-left: auto;
  min-height: 10em;
  min-width:   8em;
  width: 90%;
  max-width: 90%;
  min-height: 8em;
  transition: all 0.7s ease;
  background-color: var(--COLback);
  border: 2px solid var(--COLdark);
  text-align: center;
}

.FormIn > table {
  background-color: var(--COLtertiary);
  margin: 0 auto;
  padding: 0.1em;
  text-align: right;
/*  border-spacing: 20px; */
}

.FormIn > table tr {
  margin: 2px;
}

#formulier > .FormText {
  background-color: var(--COLprimary);
  color: var(--COLprimary2);
  overflow: hidden;
  padding: 1em;
  margin: 0;
}

#formulier > .FormIn {
  background-color: var(--COLlight);
  color: var(--COLdark);
  padding: 2em 1em 0.5em 1em;
  margin: 0;
}

#formulier > .FormText h3 {
  font-size: 1.5em;
  text-align: center;
}

/* .FormIn > textarea { */
textarea {
  width: 100%;
  font-family: var(--formfontfam);
  font-size: 80%;
  padding: 3px;
}

.FormInputSize {
  width: 9em;
}

#formulier .push {
  background-color: var(--COLsecondary);
  color: var(--COLsecondary2);
  border: 0;
  border-radius: 0;
  padding: 1em 2em;
  margin: 1em;
}

#formulier .push:hover {
  background-color: var(--COLtertiary);
  color: var(--COLtertiary2);
  text-shadow: 0 0 6px var(--COLtertiary2)
}


/* * * * * https://www.w3schools.com/howto/howto_css_custom_checkbox.asp * * * * */
/* Customize the label (the container) */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
 user-select: none;
}

/* Hide the browser's default radio button */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom radio button */
.radio {
  position: absolute;
  top: 0.3em;
  left: 0;
  height: 1.1em;
  width: 1.1em;
  background-color: var(--COLtertiary);
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .radio {
  background-color: var(--COLsecondary);
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .radio {
  background-color: var(--COLsecondary);
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.radio:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .radio:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.container .radio:after {
  top: 0.25em;
  left: 0.25em;
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: white;
}

#carousel {
  position: relative;
  width: 100%;
  max-height: 256px;
  overflow: hidden;
}

#carouselinner {
  position: relative;
  left: 0;
  height: 100%;
  overflow: hidden;
}

#carouselinner img {
  float: left;
  width: auto;
  max-height: 200px;
  padding: 0; margin: 0;
}
/* * * * * * * * * * * * * * * * * * * * * * * *
 * PANEL menu
 * * * * * * * * * * * * * * * * * * * * * * * */
#panels {
  display: flex;
  width: 100%;
  max-width: 1542px;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  clear: both;
}

.panel {
  display: flex;                  /* establish flex container */
  flex-direction: column;         /* default value; can be omitted */
  flex-wrap: nowrap;              /* default value; can be omitted */
  justify-content: space-between; /* switched from default (flex-start, see below) */

  background-color: #ddeecc;
  margin: 6px;
  padding: 0.2em;
}

.panel > .paneltop {
  display: block;
  text-align: center;
  font-weight: bold;
  margin: 0.4em 0;
}

.panel > .panelbot {
  display: block;
  float: right;
  font-family: var(--buttonfontfam);
  font-size: 300%;
  text-align: right;
  margin: 0 0.1em -0.3em 0.3em;
  bottom: 0; right: 0;
}

#panels a {
  color: white;
  text-shadow: 1px 1px 3px black;
  text-decoration: none;
}

#panels a:hover {
  color: white;
  text-shadow: 2px 2px 6px black;
  text-decoration: none;
/*  box-shadow: 12px 12px 32px var(--COLshade); */
}

/* div that blacksout the image, large white font */
.panelShadow {
  background-color: rgba(0,0,0,0.6);
  color: white;
  font-size: 200%;
  text-shadow: 2px 2px 6px black;
  padding: 8px;
}

.youtube {
  width: 400px;
  height: 225px;
}

.metro {
  display: inline-block;
  padding: 0.6em 1em;
  border-style: none;
  font-family: var(--buttonfontfam);
  text-align: right;
  background-color: var(--COLtertiary) !important;
  text-decoration: none !important;
  font-size: 100%;
  color: var(--COLtertiary2) !important;
  transition: all 0.25s ease;
}

.metro:hover {
  color: var(--COLsecondary2) !important;
  background-color: var(--COLsecondary) !important;
  text-decoration: underline;
}

/* * * w3schools custom radiobuttons * * * */
/* * * w3schools custom checkboxes * * * */

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0.3em;
  left: 0;
  height: 1.1em;
  width: 1.1em;
  background-color: var(--COLtertiary);
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: var(--COLsecondary);
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: var(--COLsecondary);
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 0.3em;
  top: 0;
  width: 0.4em;
  height: 0.7em;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* * * w3schools custom checkboxes * * * */

.gsmonly {
}

.pconly {
  display: none;
}

.tdcelpconly {
  display: none;
}

.background_paper {
  background-image: url(https://secure.hondeman.net/images/paper.webp);
  background-repeat: repeat;
}

.background_canvas {
  background-image: url(https://secure.hondeman.net/images/canvas.webp);
  background-repeat: repeat;
}

.background_checkered {
  background-image: url(https://secure.hondeman.net/images/checkered.webp);
  background-repeat: repeat;
}

.background_papyrus {
  background-image: url(https://secure.hondeman.net/images/papyrus.webp);
  background-repeat: repeat;
}

.formtopic {
  width: 100%;
}

.formtxt {
  display: inline-block;
  vertical-align: top;
  top: 0;
  left: 0;
  min-width: 45%;
  text-align: right;
  padding: 2px 0.4em;
}

.forminput {
  display: inline-block;
  vertical-align: top;
  top: 0;
  right: 100%;
  text-align: left;
  padding: 2px 0.4em;
}

.story {
/*  background-color: var(--COLpaper); */
  border-top-left-radius: 6px;
  border-bottom-right-radius: 6px;
  box-shadow: 4px 4px 16px var(--COLshade);
  margin: 1em;
  padding: 1em;
  overflow: hidden;
}

/* SINS and monitor meter */
meter {
  height: 1.3em;
  width: 1.5em;
  border-radius: 0;
  transform: rotate(-90deg);
}

/* tablet and large screens */
@media only screen and (min-width: 768px) {
body {
  font-size: 16pt;
}

.titlebackground {
  width: 512px;
  height: 64px;
}

#wrapper > #header > .title img {
  max-width: 600px;
}

#bmain {
  display: grid;
  grid-template-columns: 25% 75%;
  grid-template-rows: auto;
  grid-template-rows: 1fr auto auto;
  grid-template-areas:
    'scrolling scrolling'
    'bleft bcenter'
    'bright bright'
    'bfooter bfooter';
}

#bmainwide {
  display: grid;
  grid-template-columns: 1% 99%;
  grid-template-rows: auto;
  grid-template-rows: 1fr auto auto;
  grid-template-areas:
    'scrolling'
    'bleft bcenter'
    'bright bright'
    'bfooter bfooter';
}

#wrapper > #header > .title h1 {
  font-size: 260%;
}

/* tablet or larger: no space for hamburger: */
#header {
  grid-template-columns: auto 1px;
}

#header2 {
  grid-template-columns: auto auto 36px;
  grid-template-rows: 1fr;
  grid-template-areas:
    'title nav burger';
}

#header2 > .title {
  grid-area: title;
  margin: 0 0.6em 0 auto;
}

.burger {
  display: none;
}

#wrapper #header #nav {
  display: block;
  height: auto;
  max-height: 300px;
  padding: 0 0 0 20%;
  overflow-x: auto; /* toggle for show/hide */
}

#wrapper #header2 #nav, #scrolling #nav {
  display: inline;
  padding: 0 0 0 0;
  height: auto;
  max-height: 300px;
  overflow-x: auto; /* toggle for show/hide */
}

#wrapper #header2 #nav, #scrolling #nav {
  text-align: right;
}

#scrolling #nav {
  position: absolute;
  top: -1em; right: 0;
  height: auto; width: auto;
}

#wrapper #header #nav a, #wrapper #header #nav button {
  display: inline;
  float: left;
  width: 10em;
  padding: 1em;
  text-align: center;
}

#wrapper #header2 #nav a, #scrolling #nav a {
  padding: 8px 8px;
  margin: 1em 0 1px 0;
  height: auto;
  max-height: 300px;
  width: auto;
  min-width: 5em;
  font-family: var(--buttonfontfam);
  font-size: 100%;
  padding: 1em 1em;
  text-align: center;
  text-decoration: none;
  color: var(--COLtertiary);
  background-color: inherit;
  border-top-left-radius: 0;
  border-bottom-right-radius: 0;
  border-left: 1px solid var(--COLtertiary);
  overflow-x: auto; /* toggle for show/hide */
}

#scrolling #nav a {
  display: inline;
  width: auto;
  padding: 0.5em;
  text-align: center;
  text-decoration: none;
  background-color: color-mix(in srgb, var(--COLprimary), transparent 70%);
}

#bleft {
  margin: 0 0 auto 0;
  padding: 4em 0 0 0;
}

#bleft > a {
  padding: 12px 8px;
  margin: 3px 2em 1px 1em;
  transition: all 0.7s ease;
}

#bleft > a.active {
  margin: 3px 1em 1px 2em;
}

#bleft a:hover {
/*  margin: 3px 1em 1px 2em; */
}

.explorer > a {
  padding: 12px 1px;
  margin: 3px 0 1px 0;
}

.img-slider {
  height: 480px;
}

#carousel {
  max-height: 480px;
}

#carouselinner img {
  width: auto;
  max-height: 480px;
}

.blogwidth {
  max-width: 47%;
  float: left;
  margin: 1em 1em 1em 0;
}

.foto:nth-child(even) {
  float: inherit;
}

.quarter {
  padding: 4px;
  margin: 4px;
  width: 90%;
}

/* GSM: 1 column, tablet 2 columns, pc 3 columns */
.columns {
  font-size: 90%;
  column-count: 2;
  column-gap: 2em;
  column-rule: 1px solid lightblue;
  margin: 0 1em;
  border: 1em 0;
}

a.CTA {
  padding: 1em;
  border-top-left-radius: 24px;
  border-bottom-right-radius: 24px;
  font-size: 100%;
  margin: 1em;
  min-width: 14em;
}

.youtube {
  width: 1280px;
  height: 720px;
}

.gsmonly {
  display: none !important;
}

.pconly {
  display: inline !important;
}

.tdcelpconly {
  display: table-cell !important;
}

.portfolio {
  display: inline-block; 
  width: 30%;
  background-color: #ccb;
  padding: 0.6em;
  margin: 0.5em 0.5em;
}

/* title over portfolio: */
.imagetitle {
  position: absolute;
  top: 1em; left: 1em;
  text-align: left;
  font-weight: bold;
  margin: 0.6em;
}


/* * * * * * * * * * * * * * * * *
 * SHOWCASE styles
 * * * * * * * * * * * * * * * * */
.showcase {
  display: grid;
  grid-gap: 12px; /* [1] Add some gap between rows and columns */
  grid-template-columns: repeat( auto-fill, minmax( 200px, 1fr ) ); /* [2] Make columns adjust according to the available viewport */
  grid-auto-rows: 300px; /* [3] Set the height for implicitly-created row track */
  grid-auto-flow: dense;

  width: 100%;
/*  background: #f8f8f8; */
}

.card {
  margin: 0;
  transition: all 0.5s ease;
  text-align: center;
}

.ImageWrap {
  position: relative;
  overflow: hidden;
}

/* portrait foto, H/W = 0.75 */
  .sS {
  grid-column-end: span 1;
}

/* landscape foto, H/W = 1.333 */
.sM {
  grid-column-end: span 2;
}

/* more-than-landscape foto, H/W => 1.333 */
.sL {
  grid-column-end: span 3;
}

.sCover {
  height: 300px;
}

.sContain {
  height: 300px;
}

.card .sTitle {
  position: absolute;
  top: 4px; left: 4px; right: 4px;
  font-family: var(--mainfontfam);
  font-size: 160%;
  color: #f8f8f8;
  text-shadow: #000 1px 1px 6px;
  text-align: center;
  background: rgba(0,0,0,0.4);
  pointer-events: none;
}

/* fotos in text, alternating left/right on PC, full size on GSM */
.afb3 {
  max-width: 33%;
  margin: 0 0 0 2em;
}

.afb3left {
  float: left;
  margin: 0 2em 0 0;
}

.formtxt {
  padding: 2px 0.4em;
}

.forminput {
  padding: 2px 0.4em;
}

audio {
  height: 52px;
}

.audioplayer {
  padding: 1em;
}

.audiotitle {
  display: inline;
}

.audiobackground {
  margin: 0.6em 1em;
  padding: 0 0 0 0;
  border-top-left-radius: 24px;
  border-bottom-right-radius: 24px;
  clear: both;
}

} /* big screens */

/* large screens */
@media only screen and (min-width: 1124px) {
body {
  font-size: 16pt;
}

.chezhondeman {
  background-image: url(https://secure.hondeman.net/images/chezhondeman-1024.png);
  width: 1024px;
  height: 128px;
}

.titlebackground {
  width: 1024px;
  height: 128px;
}

#wrapper > #header > .title img {
  max-width: 100%;
}

#bmain {
  display: grid;
  grid-template-columns: 20% 60% 20%;
  grid-template-rows: auto;
  grid-template-rows: 1fr auto;
  grid-template-areas:
    'bleft bcenter bright'
    'bfooter bfooter bfooter';
}

#bmainwide, #scrollingmain {
  display: grid;
  grid-template-columns: 2% 96% 2%;
  grid-template-rows: auto;
  grid-template-rows: 1fr auto;
  grid-template-areas:
    'bleft bcenter bright'
    'bfooter bfooter bfooter';
}

#scrollingmain {
  grid-template-areas:
    'scrolling scrolling scrolling'
    'bleft bcenter bright'
    'bfooter bfooter bfooter';
}

#carousel {
  max-height: 600px;
}

#carouselinner img {
  max-height: 600px;
}

.mycell, .quote { /* fullwidth on mobile, 1/3 on computerscreen */
/*  display: table-cell; */
  display: inline-block;
  vertical-align: bottom;
  padding: 0;
  width: 32%;
  margin: 2px;
}

.quarter {
  padding: 4px;
  margin: 4px;
  width: 48%;
}

.info {
  width: 55%;
}

/* GSM: 1 column, tablet 2 columns, pc 3 columns */
.columns {
  column-count: 3;
  margin: 0 1em;
}

.panel {
  margin: 0.2em;
}

.youtube {
  width: 1280px;
  height: 720px;
}

#formulier {
  top: 30%; right: 0; left: 0;
  min-width:   8em;
  width: 66%;
  max-width: 30em;
  min-height: 8em;
}

audio {
  height: 56px;
  border-top-left-radius: 18px;
  border-bottom-right-radius: 18px;
}

} /* large screen */