/* Debug div and span boxes /
div { border: solid red; } span { border: solid green }
/* End debug div and span boxes */

* { box-sizing: border-box; } 

html { font-family: Calibri, system-ui;; }

body { background: #edce69; margin: 0; }

div { overflow: hidden; }

h1, h2, h3, h4 { color: #d25f3b; }

.leftcolumn p { text-align: justify; }

/* ----------------- */
/* Header/Blog Title */
/* ----------------- */
.header { margin: 0; position:relative; }
.header > img { width:100%; display:block; height:auto; }

/* ---------------------------- */
/* Style the top navigation bar */
/* ---------------------------- */
.topnav, .topnav2 { background-color: #333; }
.topnav  { position: absolute; bottom: 0; z-index:10; background-color: transparent; width: 100%; }
.topnav2 { float: right; position: absolute; top: 0; right: 0; z-index:2; }
.topnav2 img { width: 6vw; }

/* Style the topnav links */
.topnav a {
  float: left;
  display: block;
  color: inherit;
  text-align: center;
  text-decoration: none;
}

.topnav2 ul {
  list-style-type: none;
  padding: 0;
  margin-block: 0;
}

.topnav2 a {
  float: right;
  display: block;
  color: white;
  text-align: center;
  text-decoration: none;
}

/* Change color on hover */
.topnav a:hover, .topnav2 a:hover { background-color: #ddd; color: black; }

/* --------------------------------------------------------- */
/* Create two unequal columns that floats next to each other */
/* --------------------------------------------------------- */
/* Left column */
.leftcolumn {   float: left; width: 75%; }

/* Right column */
.rightcolumn {
  float: left;
  width: 25%;
  padding-left: 20px;
}

/* Fake image */
.foto img {
  border: #999999 1px solid;
  padding: 4px;
}
.rightcolumn .foto img { width: 100%; }
.foto_bijschrift {
  font: italic x-small Georgia, "Times New Roman", Times, serif;
  text-transform: none;
  color: #666666;
  border-bottom: #666666 1px;
  text-decoration: none;
}
.foto_links {
  float: left;
  margin: 20px;
  margin-left: 0px;
}

.abutton {
  background-color: #ffae04;
  color: white;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  border-radius: 14px;
  width: 100%;
  font-weight: bold;
  font-size: xx-large;
}

/* Add a card effect for articles */
.card {
  background-color: white;
  padding: 20px;
  margin-bottom: 20px;
}
 /* two column bullet list with left and right aligned sub columns */
.card dl {
  overflow: hidden;
  }
.card dl > dt {
   height: 0;
   }
.card dl > dd {
}

/* table effect */
.alternate_rows tr:nth-child(even) {background-color:#ddd;}
.right_align_third_column td:nth-child(3) {text-align: right;}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* ------ */
/* Footer */
/* ------ */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
  margin-top: 20px;
}

/* -------- */
/* Carousel */
/* -------- */
.carousel-ctn {
  position: relative;
  aspect-ratio: 1.5;
  z-index: 0;
}

.carousel-ctn > img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  opacity: 0;
  animation: display infinite;
  animation-duration: 20s; /* 4s per picture, thus 20s for 5 pictures */
  animation-timing-function: linear;
}
@keyframes display {
  0% {  /* start transform at 0 seconds */
    transform: translateX(100%); opacity: 1;
  }
  5% {  /* start transform at 1 seconds, which is ( animation-duration / 4 ) % */
    transform: translateX(0); opacity: 1;
  }
  20% {  /* start transform at 4 seconds, which is (animation-duration * 4/4 ) % */
    transform: translateX(0); opacity: 1;
  }
  25% {  /* start transform at 5 seconds, which is (animation-duration * 5/4 ) % */
    transform: translateX(-100%); opacity: 1;
  }
  26% {  /* start transform at 5+ seconds, which is (animation-duration * 5/4 ) + 1 % */
    opacity: 0; right: 100%;
  }
  100% {  /* start transform at 20 seconds */
    opacity: 0; right: 100%;
  }
}
.carousel-ctn img:nth-child(1) { animation-delay: -2s; }
.carousel-ctn img:nth-child(2) { animation-delay:  2s; }
.carousel-ctn img:nth-child(3) { animation-delay:  6s; }
.carousel-ctn img:nth-child(4) { animation-delay: 10s; }
.carousel-ctn img:nth-child(5) { animation-delay: 14s; }


/* -------------------*/
/* Pure css light box */
/* -------------------*/
/** LIGHTBOX MARKUP **/
.lightbox {
  display: none; /* Default to hidden */
  /* Overlay entire screen */
  position: fixed;  z-index: 99;
  top: 0;  left: 0;  right: 0;  bottom: 0;
  padding: 1em; /* A bit of padding around image */
  background: rgba(0, 0, 0, 0.8); /* Translucent background */
}

/* Unhide the lightbox when it's the target */
.lightbox:target { display: block; }

.lightbox span {
  /* Full width and height */
  display: block;
  width: 100%;  height: 100%;
  /* Size and position background image */
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

/* Better light box */
.lightbox2 a { text-decoration: none; }
.lightbox2 {
    position: fixed;
    z-index: 77;
    height: 0; width: 0;
    text-align: center;
    top: 0; left: 0;
    background: rgba(0, 0, 0, 0.8);
    opacity: 0;
}
.lightbox2 img {
    max-width: 100%; max-height: 100%; margin: 2vh 2vw 2vh 2vw;
    vertical-align: middle;
    opacity: 0;
}
.lightbox2:target {
    outline: none;
    width: 100%; height: 100%;
    opacity: 1 !important;
    
}
.lightbox2:target img {
    border: solid 17px white;
    opacity: 1;
    webkit-transition: opacity 0.5s;
}
.bijschrift {
    color: black;
    background-color: #fafafa;
    padding: 5px 15px;
    border-radius: 15px;
    text-decoration: none;
    z-index: 99;
}

.btn-all {
    color: black;
    background-color: #fafafa;
    padding: 5px 15px;
    border-radius: 15px;
    text-decoration: none;
    cursor: pointer;
    z-index: 99;
}
.btn-all:hover { background-color: #afafaf; }
.btn-close {
    position: absolute;
    right: 0; top: 0;
    color: #fafafa;
    background-color: red;
    border: solid 2px white;
    padding: 10px 15px;
    text-decoration: none;
}
.btn-close:hover { background-color: #740404; }

/* -------------------------- */
/* All different screen sizes */
/* -------------------------- */

/* Responsive layout - when the screen is more than 800px wide, */
/* have the two columns next of each other */
@media screen and (min-width: 1126px) {
  body { display: grid; justify-content: center; }
  .header, .carousel-ctn, .topnav, .row, .footer  { width: 1024px; }
  .topnav2 img { width: 70px; }
  .carousel-ctn, .carousel-ctn > img { height: 621px; }
}

@media screen and (min-width: 800px) {
  body { padding: 0 5% 0 5%; }
}

/* Responsive layout - when the screen is less than 800px wide, */
/* make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {   
    width: 100%;
    padding: 0;
  }
}

/* Responsive layout - when the screen is less than 600px wide, */
/* make the navigation links stack on top of each other instead of next to each other */
@media screen and (min-width: 600px) {
  .toggler, .toggler2 { display: none; }
  .topnav ul { margin: -4px; display: flex; justify-content: space-evenly; }
  .topnav ul li {
    display: inline-block;
    padding: 14px 16px;
   /* background-color: rgb(255,255,255,0.5); */
    border-radius: 15px 15px 0px 0px;
    backdrop-filter: blur(15px);
	 color: white;
  }
  #wit {
    background-color: white !important;
    color: #d25f3b !important;
  }
  .card dl { column-count: 2; } /* two column bullet list with left and right aligned sub columns */
}

@media screen and (max-width: 600px) {
  /* ---------------*/
  /* HAMBURGER MENU */
  /* ---------------*/
  .topnav, .opnav2 { position: absolute; top: 0; }
  .toggler,  .hamburger,  .topnav  { left:  0; }
  .toggler2, .hamburger2, .topnav2 { right: 0; }

  .toggler, .toggler2 {
    display: inline-block; position: fixed; top: 0; z-index:10;
  /* Always keeping the toggler or the checkbox on top of everything */
    width: 50px; height: 50px;
    cursor: pointer;
    opacity: 0;
  }

  .hamburger, .hamburger2 {
    position: fixed;
    top: 0;
    width: 40px; height: 40px;
    padding: 0.6rem;
  /* For displaying every element in the center */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* If the toggler is not checked, then show a hamburger */
  .hamburger > div, .hamburger2 > div {
    width: 25px; height: 25px;
    background: repeating-linear-gradient(to bottom,  white,  black 5px,  transparent 5px,  transparent 10px);
    transition: all 0.4s ease;
  }

  /* If the toggler is checked, then show a circle */
  .toggler:checked + .hamburger > div, .toggler2:checked + .hamburger2 > div {
    width: 25px; height: 25px;
    background: repeating-radial-gradient(transparent, transparent 5px, black 5px, white 10px);
    transition: all 0.4s ease;
  }

  /* If the toggler is checked, then increase the width of the menu to 70% */
  .toggler:checked ~ .topnav, .toggler2:checked ~ .topnav2 {
    width: 70%;
  }

  /* Styling the menu */
  .topnav > ul, .topnav2 > ul {
    background: #333;
    border: solid #f1f1f1;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 25px;
    padding-left: 10px;
    color: white;
  
  /* Hidden initially */
    visibility: hidden;
  }
  .topnav2 > ul { top: 45px; }

  .topnav > ul > li, .topnav2 > ul > li {
    list-style: none;
    padding: 0.5rem;
  }

  /* When the toggler is checked, change the visibility to visible */
  .toggler:checked ~ .topnav > ul, .toggler2:checked ~ .topnav2 > ul {
    transition: visibility 0.4s ease;
    transition-delay: 0.1s;
    visibility: visible;
  }

  .toggler2:checked ~ .topnav2 > ul {
    right: 0;
    z-index: 2;
  }

  .toggler:checked ~ .topnav > ul > li > a:hover, .toggler2:checked ~ .topnav2 > ul > li > a:hover {
    color: orange;
  }
}