body {
margin:0px;
}

#main {
 background-image: url("http://www.tjallingschrik.nl/tjalling_achtergrond.jpeg");
 --border: 1px solid red;
 background-position: center center;
 background-repeat:no-repeat;
 background-size: 100%;
 height:100vh;
 display: flex;                  /* establish flex container */
  flex-direction: row;            /* 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:black;
}


/** drie klikbare blokken**/
.box{
 -- border:2px solid blue;
  display:inline;
  width:33%;
}
/** LIGHTBOX MARKUP **/

a {
  color: inherit;
}

a:hover {
  color: #bbb;
}

.italic { font-style: italic; }
.small { font-size: 0.8em; }

/** LIGHTBOX MARKUP **/

.lightbox {
  /* Default to hidden */
  display: none;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  
  /* A bit of padding around image */
  padding: 1em;

  /* Translucent background */
  background: rgba(0, 0, 0, 0.8);
}

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

.infobox {

background-color:white;
width:40%;
height:40%;
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);

}

/*-------------------DIV  LIGHTBOXES CSS ---------------------*/
div.lightboxroel {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color:rgba(0, 0, 0, 0.8);
}

div.lightboxroel:target {
  display: table;
}

div.lightboxroel figure {
  display: table-cell;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  vertical-align: middle;
}

div.lightboxroel figure figcaption {
    line-height: 1.6;

  display: block;
  margin: auto;
  padding: 20px;
  background-color: white;
  max-height: 600px;
  position: relative;
  overflow: auto;
  border-radius: 8px;
  text-align: justify;
  font-size: 18px;
font-family: 'Nunito Sans', sans-serif;
  font-weight:300;
}

div.lightboxroel figure .closemsg {
  display: block;
  margin: auto;
  height: 0;
  overflow: visible;
  text-align: right;
  z-index: 99;
  cursor: default;
}

div.lightboxroel figure .closemsg, div.lightboxroel figure figcaption {
  width: 600px;
}



.closemsg::before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}


.closemsg::after {
  content: "\00D7";
  display: inline-block;
  position: relative;
	font-size: 30px;
  z-index: 3;
  width: 30px;
  height: 30px;
  text-align: center;
  margin: 0;
  cursor: pointer;
}



#download {
  border:1px solid red;
}

figcaption a{
  color:#B62731;
}



.infobox {
font-family: 'Nunito Sans', sans-serif;
}