/* html { scroll-behavior: smooth; } */

/* body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif;} */
body, html {
  height: 100%;
}

table { border-spacing: 0; }

/* Create a Parallax Effect */
.stilbeeld {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
/* First image (Logo. Full height) */
.bgimg {
  min-height: 100%;
}

#logo {
  width: 180px;
  margin-left: 16px;
  margin-top: -110px;
  transition: 0.2s;
}

#knoppen {
  transition: 0.2s;
}

.w3-green,.w3-hover-green:hover{color:#fff!important;background-color:#4CAF50!important}
.w3-red,.w3-hover-red:hover{color:#fff!important;background-color:#f44336!important}
.w3-black,.w3-hover-black:hover{color:#fff!important;}
.w3-yellow,.w3-hover-yellow:hover{color:#000!important;background-color:#ffeb3b!important}
.w3-text-red,.w3-hover-text-red:hover{color:#f44336!important}
.bg-donkergroen,.bg-donkergroen:hover{color:#fff!important;background-color:#030!important}
#navbar {
  /* background-image: url('balk-groen.png'); */
  min-height: 100%;
}
.icons {
  display: none;
}

table.lessen {
  background-color: #fffff8;
  min-width: 80%;
  margin-left: auto;
  margin-right: auto;
  border-radius: 1em;
  padding: 1em;
  opacity: 0.92;
}

table.lessen2 td, table.lessen td {
  padding-top: 0.5em;
  padding-right: 0.5em;
  vertical-align: top;
}

table.lessen2 th, table.lessen th {
  border-bottom: 2px solid black;
  text-align: left;
}

table#voordelen td {
  padding: 8px 5px;
  vertical-align: top;
}
table#voordelen th {
  padding: 8px 5px;
  border-bottom: 2px solid white;
  font-weight: 900;
  text-align: left;
}
table#voordelen ul {
  margin: 0;
  padding-left: 1em;
}
table#voordelen th  li  {
  list-style: none outside none;
}
table#voordelen .quote { color: white; }

/*
table#voordelen tr td:first-child li  {
  list-style: circle outside none;
}
*/

/*
table#voordelen tr td + td li {
  list-style: square outside none;
}
*/

video#poemeltje {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.quote, .quoteblok {
  font-family: "MV Boli";
}

.quoteblok{
  display: none;
  background-color: #bdcbc4;
}

.quote {
	color: #666;
}
.quote b {
  font-family: sans-serif;
}

@media (min-width:993px){ .quote, .quoteblok { font-size: large; } .fifty { width: 50%; } }
@media (max-width:992px) and (min-width:601px){ .quote, .quoteblok { font-size: large; } .fifty { width: 70%; } }
@media (max-width:600px){ .quote, .quoteblok { font-size: large; } .topform { width: 90%; } .small-on-small { font-size:12px!important } }
@media (max-height:700px){ .bgimg-1 { min-height: 125%; } }

.topform { background-color: rgba(0, 0, 0, 0.6) !important; }
.fifty { margin: 2em 0; }

h1::before, h2::before {
  content: "- ";
}
h1::after, h2::after {
  content: " -";
}

.accordion {
  font-size: 24px;
  color: green;
  border-bottom: solid 1px green;
  padding-bottom: 1px;
  margin-bottom: 0.5em;
}
.accordion:hover {
  /* background-color: #f8f8f8; */
  border-bottom: solid 2px green;
  padding-bottom: 0px;
}
.accordion::before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: "\f107";
  font-size: medium;
/*
  content: "\2193 ";
*/
}
.accordion.open::before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: "\f106"; 
/*
  content: "\2191 ";
*/
}

div#navbarcont a.open i.fa-angle-down:before { content: "\f106"; }
/* div#smallNav a.open { color:#000;background-color:#ccc;opacity:0.60 } */
/* div#smallNav a.open:hover { opacity:0.70 } */
div.submenu a {
  padding-left: 36px !important;
}
div#submenu {
  float: right;
  padding-right: 22px;
}

h2 { font-size: 24px; } 

h1, h2 {
  /* text-align: center; */
  margin-left: 1em;
}

/*
b {
  font-family: Arial, Helvetica, sans-serif;
}
*/

div.w3-row div.w3-half {
  padding-right: 8px;
}
div.w3-row div.w3-half + div.w3-half {
  padding-right: 0;
  padding-left: 8px;
}

.w3-content .w3-row .w3-half a {
  color: green;
  text-decoration: none;
}

.w3-content .w3-row .w3-half a:hover {
  border-bottom: solid 2px green;
}

.w3-content .w3-row .w3-half a {
  border-bottom: solid 1px green;
  margin-bottom: 1px;
}

div#gereedschap:hover .tabtit {
  color: green;
}

div#gereedschap:hover .titlijn {
  border-bottom: solid 3px green !important;
  margin-bottom: 5px !important;
}

.naw-link a {
  text-decoration: none;
}

.naw-link a:hover {
  border-bottom: solid 2px white;
}

a.tools2c-link       { color: green; text-decoration: none; border-bottom: solid 1px green; margin-bottom: 1px; }
a.tools2c-link:hover { border-bottom: solid 2px green; margin-bottom: 0px; }

.w3-modal .naw-link a:hover {
  border-bottom: solid 2px green;
}
footer td + td {
  padding-left: 4px;
}
@media (min-width:601px) {
  .vogelvraagteken {
    background-image: url('Photos/ilkka-karkkainen-yn8aHOdNLZo-unsplash.jpg'); 
    min-height: 44.4444vw;
    background-position: 50% 100px;
    background-repeat: repeat;
    background-size: 33.3333%;
  }
}
@media (max-width:600px) {
  .vogelvraagteken {
    background-image: url('Photos/ilkka-karkkainen-yn8aHOdNLZo-unsplash.jpg');
    min-height: 100%;
    background-position: 50% 100px;
    background-repeat: repeat;
    background-size: 100%;
  }
}

table.berichttab td {
  text-align: right !important;
  vertical-align: top;
  padding-right: 8px;
}

table.berichttab td + td {
  text-align: left !important;
  padding-right: 0;
}

button.w3-green:disabled , button.w3-black:disabled , button.w3-red:disabled {
  color: #000 !important;
  background-color: #ccc !important;
}

/* body { color: #777; } */
body,h1,h2,h3,h4,h5,h6 {font-family: Montserrat, sans-serif;}

table.gereedschappen {
  width: 100%;
}

table.gereedschappen th, table.gereedschappen td {
  text-align: left;
  vertical-align: top;
  padding: 8px;
}

.centerContainer {
  display: flex;
  flex-direction: column; 
  justify-content: center;
}
.centerChild {
  align-self: center;
}

#school { width: 100%; }
#leesrijp { text-align: center; height: 200px; }
@media (min-width:601px){ #school { margin-top: 250px; } }
@media (max-width:600px){ #school { margin-top:   0px; } }


@keyframes schoolanihoe {
    0%  { color: rgba(0, 0, 0, 0.0); }
   10%  { color: rgba(0, 0, 0, 0.0); }
   20%  { color: rgba(0, 0, 0, 1.0); }
   90%  { color: rgba(0, 0, 0, 1.0); }
  100%  { color: rgba(0, 0, 0, 0.0); }
}
#schooldaghoe {
  color: rgba(0, 0, 0, 0.0);
  animation-name: schoolanihoe;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

@keyframes schoolaniniets {
    0%  { color: rgba(0, 0, 0, 0.0); }
   50%  { color: rgba(0, 0, 0, 0.0); }
   60%  { color: rgba(0, 0, 0, 1.0); }
   90%  { color: rgba(0, 0, 0, 1.0); }
  100%  { color: rgba(0, 0, 0, 0.0); }
}
#schooldagniets {
  color: rgba(0, 0, 0, 0.0);
  animation-name: schoolaniniets;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

@keyframes zoveranirijp {
    0%    { color: rgba(0, 0, 0, 0.0); }
   25%    { color: rgba(0, 0, 0, 0.0); }
   35%    { color: rgba(0, 0, 0, 1.0); }
   90%    { color: rgba(0, 0, 0, 1.0); }
  100%    { color: rgba(0, 0, 0, 0.0); }
}

@keyframes zoveraninogniet {
    0%    { color: rgba(0, 0, 0, 0.0); }
   50%    { color: rgba(0, 0, 0, 0.0); }
   60%    { color: rgba(0, 0, 0, 1.0); }
   90%    { color: rgba(0, 0, 0, 1.0); }
  100%    { color: rgba(0, 0, 0, 0.0); }
}

.leesrijpimg { animation-duration: 21s; }
#lrhuizen    { animation-delay:     0s; }
#lrflessen   { animation-delay:     7s; }
#lrbomen     { animation-delay:    14s; }
.zover       { animation-duration:  7s; }

#rijp        { animation-name: zoveranirijp; }
#nogniet     { animation-name: zoveraninogniet; }

@keyframes lranibig {
    0%    { opacity: 0.0; left:  100%; }
   10%    { opacity: 1.0; left:    0%; }
   33.33% { opacity: 1.0; left:    0%; }
   36.33% { opacity: 0.0; left:  -20%; }
  100%    { opacity: 0.0; left:    0%; }
}

@keyframes lranismall {
    0%    { opacity: 0.0; }
   10%    { opacity: 1.0; }
   33.33% { opacity: 1.0; }
   36.33% { opacity: 0.0; }
  100%    { opacity: 0.0; }
}

.leesrijpimg {
  animation-duration: 21s;
  position: relative;
  width: 100%;
  top: 0;
  height: 0;
  animation-iteration-count: infinite;
  opacity: 0.0;
}

@media (min-width:601px){ .leesrijpimg { animation-name: lranibig; } }
@media (max-width:600px){ .leesrijpimg { animation-name: lranismall; } }

.zover {
  color: rgba(0, 0, 0, 0.0);
  animation-iteration-count: infinite;
  float: left;
  width: 49.99999%;
}

.leesrijpimg img { width: 100% }

table#inner td, table#inner th {
  text-align: right;
  padding: 1ex;
}

img#jongen-in-trein { width: 100%; }
div#trein-container {
	overflow: hidden;
	z-index: -1;
}

@keyframes treinrijden {
    0%    { margin-left: -155%; }
   20%    { margin-left: -95%; }
   50%    { margin-left: -95%; }
   99.99999% { margin-left: 180%; }
  100%    { margin-left: -155%; }
}

img#trein { 
	width: 180%;
	margin-top: -7%;
	z-index: -1;
	margin-left: -120%; /* voorbij op 60%, nog niet op -120% */
	animation-name: treinrijden;
	animation-duration: 21s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}

#perron {
  width: 72%;
  height: 72%;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: -2;
}

#peinzende-kinderen {
  position: relative;
}

@keyframes peinzen1 {
   0% { opacity: 0; }
  10% { opacity: 1; }
  60% { opacity: 1; }
  70% { opacity: 0; }
 100% { opacity: 0; }
}

@keyframes peinzen2 {
   0% { opacity: 0; }
  10% { opacity: 1; }
  40% { opacity: 1; }
  50% { opacity: 0; }
 100% { opacity: 0; }
}

@keyframes peinzen3 {
   0% { opacity: 0; }
   3% { opacity: 1; }
  13.66666% { opacity: 1; }
  16.66666% { opacity: 0; }
 100% { opacity: 0; }
}



#pk11, #pk21, #pk22, #pk23, #pk31, #pk32, #pk33, #pk34, #pk35, #pk36 {
	animation-iteration-count: infinite;
}
#pk11 {
	  animation-name: peinzen1;
	  animation-duration:  7s;
}
#pk21, #pk22 {
	  animation-name: peinzen2;
	  animation-duration: 11s;
}
#pk21	{ animation-delay:     1s; }
#pk22	{ animation-delay:     6.5s; }
#pk31, #pk32, #pk33, #pk34, #pk35, #pk36 {
	  animation-name: peinzen3;
	  animation-duration: 29s;
}
#pk31	{ animation-delay:     0s; }
#pk32	{ animation-delay:     4.83333s; }
#pk33	{ animation-delay:     9.66666s; }
#pk34	{ animation-delay:    14.5s; }
#pk35	{ animation-delay:    19.33333s; }
#pk36	{ animation-delay:    24.16666s; }

h4 {
	font-variant: small-caps; 
	font-weight: 600;
/*
	text-transform: uppercase;
	font-size: 15px;
	font-feature-settings: "smcp"; 
*/
	margin-bottom: 0;
}

#contact2 img {
	filter: invert(100%);
}