/* ----------------------------------------------------------------------------------------------------------- */
/* --------------------------------------- DEFAULT INSTELLINGEN ---------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------- */

/* DEFAULT OVER HELE WEBSITE */
* {
  margin: 0;                                     /* margin volledige site */
  padding: 0;                                    /* padding volledige site */
  box-sizing: border-box;                        /* Hierdoor gedragen al je elementen zich voorspelbaar qua breedte en padding. */

  font-family: "Raleway", sans-serif;            /* Font-family : GoogleFont "Raleway", (reserve:) sans-serif */
  font-optical-sizing: auto;                     /* Variabele lettertypen : maakt letters leesbaar per scherm */
  font-weight: 300;                              /* Dikte van letters | waarde tussen 100 en 900 */
  font-style: normal;                            /* Font stijl : normaal | italic */
}

/* DEFAULT FONT-SIZE */
h1 { font-size: 24px; font-weight: 400;}         /* h1 lettergroote */
h2 { font-size: 18px;}                           /* h2 lettergroote */
h3 { font-size: 12px;}                           /* h3 lettergroote */
p  { font-size: 10px;}                           /* p lettergroote */

h1, h2, h3 {
  margin-bottom: 15px;                           /* Margin onderaan, bij elke koptekst */
}

/* DEFAULT LINKS OPMAAK GEDRAG */
a  {text-decoration: none;}                      /* links default opmaak gedrag negeren */

/* DEFAULT BUTTON */
a button {
  color: rgba(28, 28, 30, 1);                  /* knoptekst kleur */
  text-align: center;                            /* Knoptekst centreren in midden van knop */
  font-weight: 700;                              /* font dikte */
  background-color: rgba(255, 255, 255, 1);    /* knop kleur */
  border: none;                                  /* Geen zichtbaar rand */
  padding: 10px 40px;                            /* Padding binnen de knop */
  cursor: pointer;                               /* Muispijl --> wijzende hand WANNEER het boven de knop zweeft */ 
}

/* KLEUREN INFO */
/* KLEUREN : Wit rgba(255, 255, 255, 1) | Zwart rgba(28, 28, 30, 1) | Grijs rgba(58, 58, 60, 1) */
/* KLEUREN LOGO: Blauw #004a80 | Groen #23953c */

body {
  background: rgba(255, 255, 255, 1);          /* Default achtergrondkleur webpagina */
  font-size: 16px;                               /* Default lettergroote */
  color: rgba(28, 28, 30, 1);                  /* Default letterkleur */
  word-wrap:break-word !important;               /* Woorden splitsen bij te klein scherm */

  display: flex;                                 /* FLEX */
  flex-direction: column;                        /* Flex kolom : header | main | footer */
  align-content: space-between;                  /* Gespreid */
  min-height: 100vh;                             /* Minstens 100% view hoogte */
}

/* ----------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------- FULL OVERLAY ----------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------- */

.full-overlay {
  position: fixed;                                /* Fixed, blijft bovenaan */
  top: 0;                                         /* begin positie boven 0 */
  left: 0;                                        /* begin positie links 0 */
  width: 100vw;                                   /* Volledig scherm breedte */
  height: 100vh;                                  /* Volledig scherm hoogte */
  background-color: rgba(28, 28, 30, 1);        /* Achtergrondkleur */
  display: flex;                                  /* FLEX */
  justify-content: center;                        /* content centreren */
  align-items: center;                            /* content centreren */
  z-index: 100;                                   /* Altijd bovenop de rest */
  transition: opacity 0.6s ease-in-out;           /* transactie  */
}

.full-overlay-inner {
  text-align: center;                             /* tekst centeren */
  color: rgba(255, 255, 255, 1) ;               /* witte tekstkleur */
  padding: 20px;                                  /* padding rond content */
}

.full-overlay-inner button {
  padding: 12px 30px;                             /* padding knop */
  font-size: 1rem;                                /* tekstgroote */
  cursor: pointer;                                /* Muispijl --> wijzende hand WANNEER het boven de knop zweeft */
  margin-top: 25px;                               /* margin boven knop */
  text-transform: uppercase;                      /* Zet volledige tekst in hoofdletters */
  letter-spacing: 1px;                            /* witruimte tussen letters */
}

/* Voor fade-out effect */
.full-overlay.hidden {
  opacity: 0;                                     /* Doorzichtigheid */
  pointer-events: none;                           /* Zorgt dat je na het faden weer op de site kunt klikken */
}

/* ----------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------ HEADER --------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------- */

header {
  position:fixed;                                /* Fixed: blijft zichtbaar bij scrollen en op positie */
  width: 100%;                                   /* Neemt volledige body breedte */
  top: 0;                                        /* Bovenrand begint volledig bovenaan */
  left: 0;                                       /* Linkerrand begint volledig links */
  z-index: 5;                                    /* Hoger niveau dan body */

  display: flex;                                 /* FLEX */
  flex-direction: row;                           /* Flex rijen: logo | menu-knop */
  justify-content: space-between;                /* Content verspreid over volledige lengte */
  background-color: rgba(255, 255, 255, 1);    /* Achtergrondkleur Header */

  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

header a { padding: 9px; }                        /* header links padding */
#logo    { height: 35px; }                        /* Logo groote */

/* Hamburger menu-knop */
.container {
  display: inline-block;                          /* hybride gedrag combo: inline + block */
  cursor: pointer;                                /* Muispijl --> wijzende hand WANNEER het boven de knop zweeft */
  padding: 18px;                                  /* padding rond menu-knop */
  align-content: center;                          /* centreren */
}

/* Hambuger menu-knop strepen */
.bar1, .bar2, .bar3 {
  width: 18px;                                    /* Lengte streep */
  height: 2.5px;                                  /* Hoogte streep */
  background-color: rgba(28, 28, 30, 1);        /* Kleur streep */
  margin: 3px 0;                                  /* Tussenruimte strepen */
  transition: 0.4s;                               /* transformatie tijd */
}

/* menu-knop transformatie: hamburger --> kruis */
/* draai eerste bar */
.change .bar1 { transform: translate(0, 5.5px) rotate(-45deg);}
/* Fade out tweede bar */
.change .bar2 {opacity: 0;}
/* draai laatste bar */
.change .bar3 { transform: translate(0, -5.5px) rotate(45deg);}

/* ----------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------ OVERLAY NAVIGATIE ---------------------------------------------- */
/* ---------------------------------------- (Mobiel versie alleen) ------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------- */

/* The Overlay (achtergrond) */
.overlay {
  /* Height & width hangt af hoe je de overlay vertoont (zie JS script) */   
  height: 0;                                       /* START op 0, door script gaat naar 100% */
  width: 100%;                                     /* 100% schermbreedte */
  position: fixed;                                 /* Blijft op z'n plaats */
  z-index: 1;                                      /* Blijft op voorgrond (uitzondering Header) */
  left: 0;                                         /* Begint volledig links */
  top: 57px;                                       /* Begint ONDER Header */
  background-color: rgb(0,0,0);                  /* Black terugval kleur (als transparantie niet lukt) */
  background-color: rgba(0,0,0, 0.9);            /* Black met transparantie */
  overflow-y: hidden;                              /* Disable vertical scroll */
  overflow-x: hidden;                              /* Disable horizontal scroll */
  transition: 0.5s;                                /* 0.5 seconden transactie effect voor slide down van de overlay */
}

/* Content positie in de overlay */
.overlay-content {
  position: relative;
  top: 5%;                                         /* 5% van de top */
  width: 100%;                                     /* 100% width */
  text-align: left;                                /* Center tekst/links */
}

/* Navigatie links in de overlay */
.overlay a {
  padding: 8px;                                    /* linktekst padding */
  margin-left: 9px;                                /* marge links van linktekst */
  text-decoration: none;                           /* Negeert het standaard linktekst gedrag */
  font-size: 18px;                                 /* Font grote 18px */
  color: #818181;                                /* tekst kleur : grijs */
  display: block;                                  /* Display block in plaats van inline */
  transition: 0.3s;                                /* Transactie effects op hover (color) */
}

.overlay hr { margin: 0 18px 0 18px;}              /* streep over volledige breedte */

.overlay a.active {
  background-color: #23953c;                     /* Achtergrondkleur van actieve webpagina */
  color: rgba(255, 255, 255, 1);                 /* Linktekst kleur van actieve webpagina */
}

/* Wanneer muis over navigatie links zweeft, verander kleur color */
.overlay a:hover, .overlay a:focus {
  color: rgba(255, 255, 255, 1);                 /* Linktekst kleur bij hover/focus */
}

.links-socials {
  display: flex;                                   /* FLEX */
  flex-direction: row;                             /* Flex rij */
}

.topnav { display: none;}                          /* TOPNAV = voor grootschermen */

/* ----------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------- MAIN DEFAULT ---------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------- */

main {
  display: flex;                                   /* FLEX */
  flex-direction: column;                          /* Flex koloms */
  justify-content: flex-start;                     /* Content centreren vertikaal */
  align-content: center;                           /* Content centeren horizontaal */

  flex: 1;                                         /* Neemt resterende ruimte in zodat footer beneden blijft */
  margin-top: 53px;                                /* Zodat main niet onder menu verborgen begint */
  padding-bottom: 64px;                            /* Inhoud afstand van footer */
}

#banner {
  display: block;                                   /* block gedrag */
  border: none;                                     /* geen rand */
  opacity: 0.25;                                    /* opvulling 25% */
}

/* ----------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------- MAIN HOME ------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------- */

.main-intro h1 {
  margin-bottom: 20px;
}

.main-intro h2 {
  margin-bottom: 30px;                            /* Meer ruimte boven de knop */
}

.main-intro {
  background-image: url(images/images-mobile/main-header-144.jpg);  /* Achtergrond afbeelding Header */
  background-position: right;                      /* Achtergrond afbeelding rechts plakken | "cover" snijt links af indien nodig */
  background-size: cover;                          /* Vult het hele vlak; snijdt delen van de afbeelding weg indien nodig */
  filter: grayscale(70%);                          /* Grijsfilter */
}

.main-intro article {
  color: rgba(255, 255, 255, 1);                 /* Tekstkleur */
  padding: 9px;                                    /* padding header articel (tekst) */
}

.main-intro nav { padding: 12px; }                 /* padding rond socials icon links */

.main-intro nav a {
  text-decoration: none;                           /* negeer linktekst opmaak reacties */
  color: rgba(255, 255, 255, 1);                 /* linktekst/iconen kleur */
}

/* MAIN INTRO PAGES | DEFAULT */
#page {
  padding-top: 32px;                               /* padding artikel box */
  scroll-margin-top: 57px;                         /* "Ontdek meer" knop laat #page onder header beginnen | De hoogte van header (ongeveer 57px) */
}

#page article {
  display: flex;                                   /* FLEX artikel */
  flex-direction: column;                          /* flex kolom */
  justify-content: center;                         /* content centreren */
  align-content: center;                           /* content centreren */
  margin: 0px 9px;                                 /* top-/bottommargin 0 (bij mobiel) */
}

#page article img {
  display: block;
  width: 100%;                                      /* breedte afbeelding 100% box breedte */
  height: 64px;                                     /* hoogte afbeelding (smalle banner vorm) */
  object-fit: cover;                                /* Snijdt de afbeelding bij zodat hij precies in de box past */
  object-position: center;                          /* foto centreren | midden foto blijft zichtbaar bij afsnijden */
}

#page h2 { 
  font-weight: 500;                                 /* font dikte h2 dikker dan standaard */
  margin: 9px;                                      /* margin h2 */
}

#page p { margin: 9px;}                             /* margin p (korte uitleg) pagina's */
#page a { 
  margin: 18px;                                     /* link margin ("meer info") */
  width: fit-content;
}

#page button {
  color: rgba(255, 255, 255, 1);                  /* knop tekstkleur */
  background-color: rgba(58, 58, 60, 1);          /* knop achtergrondkleur */
}

#page-program { 
  background-color: rgba(124, 155, 186, 0.25);    /* achtergrondkleur  */
}

#page-webdesign {
  background-color: rgba(94, 65, 69, 0.25);       /* achtergrondkleur */
}

#page-photo {
  background-color: rgba(28, 28, 30, 0.25);       /* achtergrondkleur */
}

/* ----------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------- MAIN PROGRAM ---------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------- */

#main-program .main-intro {
  background-image: url(images/images-mobile/page-program-144.jpg);  /* Achtergrond afbeelding Header */
  background-position: center;                       /* Achtergrond afbeelding centreren */  
}

@media screen and (min-width: 451px) {
#main-program .main-intro {
  background-image: url(images/page-program.jpg);    /* Achtergrond afbeelding Header */
}
}

#main-program .article1 {
  background-color: rgba(124, 155, 186, 0.25);     /* achtergrondkleur */
  border: none;                                      /* geen rand */
}

#main-program .article2 {
  background-image: url(images/section-hero-pattern.svg); /* achtergrondafbeelding onder banner */
  background-position: cover;                        /* vult heel de pagina artikel2 */
}

/* ----------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------- MAIN WEBDESIGN -------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------- */

#main-webdesign .main-intro {
  background-image: url(images/page-webdesign.jpg);/* Achtergrond afbeelding Header */
  background-position: center;                     /* Achtergrond afbeelding centreren */
}

#main-webdesign .main-intro article {
  color: black;                                  /* tekstkleur */
}

#main-webdesign .article1 {
  background-color: rgba(94, 65, 69, 0.25);      /* achtergrondkleur */
  border: none;                                    /* geen rand */
}

/* alle pagina's */
.article2 {
display: flex;                                     /* FLEX */
flex-direction: column;                            
justify-content: center;
align-content: center;
}

.article2 h2 {
  font-weight: bold;
}

.article2 article {
  display: flex;
  flex-direction: column;
  padding: 10px;
}

.article2 h1 { font-size: 64px;}

@media screen and (min-width: 451px) {

  #main-webdesign .main-intro {
  background-image: url(images/images-mobile/page-webdesign-144.jpg);  /* Achtergrond afbeelding Header */
  }

  #meeting-foto {
  transform: translateY(-120px);
  }

  .article2 {
  flex-direction: row;
  flex-wrap: wrap;
  }

  .article2 article {
    width: 50%;
  }
}

/* ----------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------- MAIN PHOTO ------------------------------------------------ */
/* ----------------------------------------------------------------------------------------------------------- */

#main-photo .article3 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
}

#main-photo .article3 h1,
#main-photo .article3 h2 {
  margin: 9px 18px;
  text-align: center;
}

#main-photo .main-intro {
  background-image: url(images/images-mobile/page-photo-144.jpg);  /* Achtergrond afbeelding Header */
  background-position: center;                     /* Achtergrond afbeelding centreren */
}

#main-photo .article1 {
  background-color: rgba(28, 28, 30, 0.25);       /* achtergrondkleur */
  border: none;
}

/* Buiten of binnen de media query, afhankelijk van je wens */
.article2 .photoset-titel {
  width: 100%;       /* Dwingt de titel naar 100% breedte */
  flex-basis: 100%;  /* Extra veiligheid voor flexbox */
  text-align: left;  /* Of center, wat je voorkeur heeft */
  padding: 20px 10px; /* Wat ademruimte rond de tekst */
}

/* Zorg dat de afbeelding reageert op de breedte van de article */
.article2 picture img {
  width: 100%;
  height: auto;
  display: block;
}

@media screen and (min-width: 451px){
  .article2 .photoset-titel p {
    width: 50%;
  }

  #main-photo .main-intro {
    background-image: url(images/page-photo-1.jpg);  /* Achtergrond afbeelding Header */
  }
}

/* ----------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------- MAIN OVER ------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------- */

#main-over .main-intro {
  background-image: url(images/page-over-72-1.jpg);  /* Achtergrond afbeelding Header */
  background-position: center;                     /* Achtergrond afbeelding centreren */
}

@media screen and (min-width: 451px) {
  #main-over .main-intro {
  background-image: url(images/page-over-300-1.jpg);  /* Achtergrond afbeelding Header */
  }
}

#main-over .article1 {
  background-color: rgba(77, 119, 76, 0.25);       /* achtergrondkleur */
  border: none;
}

#main-over .article2 article {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: center;
  gap: 9px;
}

#main-over .article2 article picture img {
  width: 100%;
  height: auto;
  display: block;
}

#main-over .article2 article picture {
  flex: 1;
}

#main-over .article2 article section {
  flex: 3;
}

#main-over .article2 article section p {
  margin: 5px 0;
}

.bold {
  font-weight: bold;
}

/* ----------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------- FOOTER ----------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------- */

footer {
  background-color: #000000;                      /* Footer achtergrondkleur */
  color: white;                                   /* Footer tekstkleur */
  width: 100%;                                      /* Footer 100% breedte */
  padding: 18px;                                    /* Footer padding */
}

footer a {
  color: white;                                   /* Footer linktekst kleur */
}

footer nav {
  display: flex;                                    /* FLEX */
  flex-direction: row;                              /* Flex rijen */
  justify-content: space-around;                    /* ruimte rond navigatie elementen */
}

footer p {
  padding: 10px;                                    /* footer padding */
  display: flex;                                    /* FLEX */
  flex-direction: row;                              /* Flex rijen */
  justify-content: center;                          /* centreren */
}

#naam-datum p {
  font-size: 8px;                                   /* font-size van eindwerk, naam en datum */
}

/* ----------------------------------------------------------------------------------------------------------- */
/* --------------------------------------------- CONTACT FORMULIER ---------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------- */

.contactPage-main { 
  margin-bottom: 0;                                 /* margin onderaan  */
  background-color: rgba(58, 58, 60, 0.15);       /* achtergrondkleur main */
}

.formulier {
  border-radius: 5px;                               /* formulier randhoeken */
  padding: 10px 20px;                               /* formulier padding */
}

form {
  display: grid;                                    /* GRID (eens anders dan FLEX) */
  grid-template-columns: 1fr;                       /* Alles in 1 kolom | 1 fraction unit */
  gap: 5px;                                         /* witruimte tussen alle elementen | vervangt margin */
  align-items: start;                               /* items starten aan begin */
}

label {
  padding: 10px 0 0 0;                              /* padding TOP 10px */
  display: inline-block;                            /* combo inline en block eigenschappen */
  font-weight: bold;                                /* tekst vetgedrukt */
}

input[type=text],
input[type=email],
select, 
textarea {
  width: 100%;                                       /* 100% beschikbare breedte */
  padding: 12px;                                     /* padding */
  border: 1px solid rgba(58, 58, 60, 1);           /* rand input */
  border-radius: 4px;                                /* randhoeken input */
  box-sizing: border-box;
  resize: vertical;                                  /* mogelijk om textarea hoogte aan te passen */
  font-family: inherit;                              /* font-familie geërft van parrent(s) */
}

button[type=submit], 
input[type=submit] {
  background-color: #004a80;                       /* achtergrondkleur verzendknop */
  color: rgba(255, 255, 255, 1);                   /* tekstkleur */
  padding: 12px 20px;                                /* padding verzendknop */
  border: none;                                      /* geen rand */
  border-radius: 4px;                                /* afgeronde hoeken */
  cursor: pointer;                                   /* muispijl --> wijzende hand */
  font-size: 16px;                                   /* tekstgroote */
  width: 100%;                                       /* Knop is volledig breed (mobiel) */
  margin-top: 10px;                                  /* margin bovenaan */
}

button[type=submit]:hover {
  background-color: #23953c;                       /* achtergrondkleur verzendknop bij hover */
}

/* ----------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------- RESPONSIVE MEDIA ---------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------- */

/* Gedrag vanaf KLEIN TABLET Schermgroote */
@media screen and (min-width: 451px) {           
  
  h1 { font-size: 36px; font-weight: 400;}         /* H1 lettergroote */
  h2 { font-size: 24px;}                           /* H2 lettergroote */
  h3 { font-size: 12px;}                           /* H3 lettergroote */
  p  { font-size: 16px;}                           /* P lettergroote */

  #page {
  padding-top: 64px;                               /* padding artikel box */
  }

  /* ---------------------------------------------------------------------------------------------------------- */
  /* --------------------------------------------- FORMULIER -------------------------------------------------- */
  /* ---------------------------------------------------------------------------------------------------------- */

  .formulier {
    padding: 64px;                                 /* padding formulier grooter */
  }

  form {
    grid-template-columns: 25% 75%;                /* 2 kolommen: label 25% en input 75% breedte */
    gap: 15px;                                     /* witruimte tussen elementen */
  }

  label {
    padding: 12px 12px 12px 0;                     /* label padding (links 0) */
  }

  button[type=submit], 
  input[type=submit] {
    grid-column: 2;                               /* Knop onder de inputs */
    width: fit-content;                           /* Knop krimpt naar tekstgrootte */
    justify-self: end;                            /* Rechts uitlijnen */
    margin-top: 0;                                /* margin bovenaan 0 */
  }
}

/* Gedrag vanaf TABLET Schermgroote */
@media screen and (min-width: 740px) {
  
  .container    { display: none;}                 /* Hamburger menu-knop: display: none | niet zichtbaar */
  .overlay      { display: none;}                 /* Geen overlay, wordt vervangen door topnav */


  /* ---------------------------------------------------------------------------------------------------------- */
  /* ------------------------------------------- TOP NAVIGATIE ------------------------------------------------ */
  /* ---------------------------------------------------------------------------------------------------------- */

  .topnav {
    display: flex;                                /* FLEX */
    flex-direction: row;                          /* Flex rij */
    align-items: center;                          /* Verticaal centreren */
    justify-content: center;                      /* Horizontaal centreren (optioneel) */
  }

  .topnav a {
    height: 100%;                                 /* link 100% hoogte van header balk */
    float: left;                                  /* link elementen float links binnen nav */
    color: rgba(58, 58, 60, 1);                 /* achtergrondkleur */
    text-align: center;                           /* tekst centreren */
    padding: 16px;                                /* padding tekst vs linkrand */
    text-decoration: none;                        /* link default opmaak negeren */
  }

  .topnav a:hover {
    background-color: #ccc;                     /* Verander de kleuren bij hover */
  }

  .topnav a.active {
    background-color: #23953c;                  /* link actieve pagina = groen */
    color: rgba(255, 255, 255, 1);              /* tekstkleur */
  }

  /* ---------------------------------------------------------------------------------------------------------- */
  /* --------------------------------------------- MAIN ------------------------------------------------------- */
  /* ---------------------------------------------------------------------------------------------------------- */

  main                   { margin-top: 56.5px;}    /* Zodat main niet onder menu verborgen begint */
  .main-intro article    { padding: 48px;}         /* padding */
  .main-intro article h1 { font-size: 45px;}       /* font-size vergroten */
  .main-intro nav        { padding: 24px;}         /* padding */

  /* ---------------------------------------------------------------------------------------------------------- */
  /* ------------------------------------------- FOOTER ------------------------------------------------------- */
  /* ---------------------------------------------------------------------------------------------------------- */

  #naam-datum p         { font-size: 10px;}        /* tekstgroote */
}

@media screen and (min-width: 786px) {
    
  #page article {
    flex-direction: row;                           /* flex rijen omgekeerd */
    margin: 0px 24px;                              /* margin links en rechts */
  }

  .webpage article h1 { flex: 1;}
  .webpage article p { flex: 2;}

  #page-webdesign {
    flex-direction: row-reverse !important;        /* flex rijen richting veranderen bij 2de artikel */
  }

  #page article article {
    flex-direction: column;                        /* tekst kolom */
  }

  #page article img {
    height: 250px;                                 /* afbeelding vaste hoogte */
    width: 400px;                                  /* afbeelding vaste breedte */
  }
}