@import url('https://fonts.googleapis.com/css2?family=Judson:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap');

 body{
    margin: 0 auto;
    font-family: 'Judson', serif;
    font-weight: 400;
	  background-color: #f9f5f0;
  }
  .site {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 16px;
  }
  div.smallscreen{
    display: none;
  }
  .wide{
    width: 92%;
    position: relative;
    left: 4%;
    justify-content: center;
  }
  .logo-img {
    display: block;
  }

  img.logo-img {
    padding-top:4%;
    width: 42%;
    object-fit: contain; 
  }
  img.home_image_mobile{
    display: none;
  }
  
/*  Menu */
  div.topnav{
    display: flex;
    width: 100%;
    padding-top:0%;
    padding-left: 4%;
  }
  div.topnav a {
    padding-right: 25%;
    color: black;
    background-color: transparent;
    text-decoration: none;
    display: flex;
  }
  div.topnav a.icon {
    display: none;
  }
/* Einde Menu */
/* Menu bottom */
  div.bottomnav{
    font-family:Judson;
    font-size: 2.2vw;
/*    font-size: 28px; */
  }
  div.bottomnav p{  
    display: flex;
    position: relative;
    justify-content: center;
  }
  div.bottomnav a{  
    color: black;
    background-color: transparent;
    text-decoration: underline;
  }
  button.button-dark{
    font-family:'Open Sans';
    font-size:1.7vw;
    border: none;
    width:27%;
    padding: 1.5%;
    background-color:#384144;
    color:white;
    border-radius: 50px;
  }
  a{  
    color: white;
    background-color: transparent;
    text-decoration: underline;
  }
/* main div pagina-inhoud */
  hr {
    width: 100%;
    border-top: none;
    border-right: none;
    border-left: none;
    height: 1px;
    color: black;
  }
/* afbeelding met tekstblok */
  @media screen and (max-width: 1024px) {
    img.home_image {
      width: 75%;
      object-fit: fill;
    }
  }
  @media screen and (min-width: 1025px) {
    img.home_image {
      width: 70%;
      object-fit: fill;
    }
  }

  .darkblue_bg {
    position: absolute;
    background-color: #384144;
    width: 100%;
    display: flex;
    flex-direction: column;
    left: 0%;
    right: 0%;
    font-size: 2.5vw;
    color: white;
  }
 .quote_bg{
    background-color: #ece6ddd0;
  /*background-color: rgba(255, 255, 255, 0.6);   f9f5f0d0*/
    position: absolute;
    display: flex;
    top: 7%;
    left: 50%;
    right: 0%;
    width: 50%;
    height: 92.6%;
    font-size: 35pt;
    color: black;
 }
 .quote{
    font-size:2.5vw;
    font-weight: 400;
    padding-top:25%;
    padding-left:15%;
    padding-right:15%;
  }
 .author{
    font-family:'Open Sans';
    font-size:1.4vw;
    font-weight:bold;
    text-align:right;
    padding-bottom:5%;
 }
 .quot_sans{
    font-family:'Open Sans';
    font-weight:400;
    font-size:1.5vw;
 }
 .quot_sans.marg{
    padding-left:25%;
    padding-right:25%;
 }
/* einde afbeelding met tekstblok */ 
 h1{
    font-size:4vw;
    font-weight:200;
    display: flex;
    align-items: center;
 }
 h1.divider{
    font-size:4vw;
    font-weight:400;
    display: flex;
    align-items: center;
 }
 .divider::after {
    flex: 1;
    content: '';
    padding: 0.5px;
    background-color: black;
    margin-left: 3%;
}
 h1.divider1{
    font-size:4vw;
    font-weight:400;
    display: flex;
    align-items: center;
 }
 .divider1::before {
    flex: 1;
    content: '';
    padding: 0.5px;
    background-color: black;
    margin-right: 3%;
}
.divider1::after {
    flex: 1;
    content: '';
    padding: 0.5px;
    background-color: black;
    margin-left: 3%;
}
/* presentatie thumbnails in grid*/
  div.image-grid-mobile{
    display: none;
  }
 .row {
    display: flex;
    flex-wrap: wrap;
    padding: 0 4px;
  }

  /* Create four equal columns that sits next to each other */
  @media screen and (max-width: 1024px) {
   .column {
      flex: 23%;
      max-width: 23%;
      padding: 0 4px;
   }
  }
  @media screen and (min-width: 1025px) {
   .column {
      flex: 24%;
      max-width: 24%;
      padding: 0 4px;
   }
  }
 .column img {
    margin-top: 8px;
    vertical-align: middle;
    width: 100%;
 }

  /* Responsive layout - makes a two column-layout instead of four columns */
  @media screen and (max-width: 800px) {
   .column {
      flex: 50%;
      max-width: 50%;
   }
 }

  /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
  @media screen and (max-width: 600px) {
    .column {
      flex: 100%;
      max-width: 100%;
    }
  }
 .row o{
    display: flex;
    flex-wrap: wrap;
    padding: 0 4px;
  }
  .column o1{
      flex: 35%;
      max-width: 35%;
      padding: 0 4px;
      column-span:2;
  }
  .column o2{
      flex: 65%;
      max-width: 65%;
      padding: 0 4px;
      column-span:2;
  }
  .width20{
    width: 20%;
  }

tr{
    padding-top: 0px;
    padding-bottom: 0px;
}
  .footer {
    display: flex;
    width:100%;
    padding-top: 4px;
    padding-left:0%;
    font-size:1.7vw;
  }
  img.footer {
  /*    width: 210px; */
    object-fit: contain; 
    width: 30%;
  }