/* CSS Nienke Wuring -Standarisatie websites
    Versie CSS.Nov2022-002 */



@font-face {
    
    font-family: 'Roboto';
    src: url(../fonts/roboto/Roboto-Regular.ttf );
}

/* Even wat variabelen defineren  */
:root{
  --color-white: rgb(252, 252, 252);
  --color-green: green;
  --p-font-color: #0b3454;
  --h2-font-color:#0b3454;
  --font-size: 18px;
  --font-size-h2: 32px;
  --font-size-h1: 36px;
  --menu-link: white;
  --menu-onhover-link:rgb(62, 156, 0);
  --padding-txt: 0px 45px 25px 45px;
  --padding-Headers: 0px 45px 0px 45px;
  --margin-H2: 25px;
  --body-width: 1366px;
  --body-height: 100px;
  --body-height-50: 30px;
  --body-color: rgb(252, 252, 252);
  --H2-special-margin: 90px;
  --divider-large: 100px;
  --divider-small: 50px;
  --special-color: rgb(238 238 237);
  --special-color2: #002339;
}

.blue{
  color: blue;
}
.boldTekst{
  color: var(--p-font-color);
  font-size: var(--font-size);
  font-family: Verdana;
  font-weight: bold;
  padding: var(--padding-Headers);
  margin-top: 25px;
  margin-bottom: 50px;
}
.th{
  width: 50px;
}
.marginAuto{
    margin-left: auto;
    margin-right: auto;
}
.location{
    margin-bottom: 20px !important;
}

.logo_{
  width: 280px;
  margin-left: 45px;
  margin-bottom: 25px;
}

.articleLink{
  color: var(--p-font-color);
}

.grey{
  color: rgba(86, 86, 86, 0.773);
}

body{
  background-color: var(--body-color);
  margin: 0px;
  padding: 0px;
}

.ulList{
  margin-left: 45px;
  font-family: Verdana;
  font-size: var(--font-size);
  color: var(--p-font-color);
  line-height: 1.8;
  margin-top: -20px;
}

.geenMarginTop{
  margin-top: 0px !important;
}
.geenMarginBottom{
  margin-bottom: 0px !important;
}

.special{
  background-color:var(--special-color) !important;
}
.special2{
  background-color: var(--special-color2) !important;
}

.rowFullIMG{
  width: 100%;
 
}
/* De lettertypes voorzien */
/* scroll margin en padding toegevoegd 13 Okt 2023 */

h1, h2, h3, h4, h5{
  font-family: Roboto;
  color: var(--h2-font-color);
  scroll-padding-top: 100px !important;
  scroll-margin-top: 100px !important;
}

p{
  font-family: Verdana;
  color: var(--p-font-color);
  font-size: var(--font-size);
  line-height: 1.4;
}

/* Kleur van de menu links */

a{
  color: var(--menu-link);
}
a:hover{
  color: var(--menu-onhover-link);
}


/* Dit is de afstand tussen banner en tekst */

.divider{
  display: block;
  height: var(--divider-large);
}
.divider50{
  display: block;
  height: var(--divider-small);
}
.divider5px{
  display: block;
  height: 5px;
}
.divider25px{
  display: block;
  height: 25px;
}
.divider40px{
  display: block;
  height: 40px;
}
.lijn{
  padding-top: 0px !important;
  margin-top: 4px !important;
  width: 100%;
  border: 1px solid white !important;
  margin-bottom: 20px;
}
.row{
  display: flex;
  flex-wrap: wrap;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--body-width);
  background-color: var(--color-white);
  align-items: center;
}
.fontSpecial{
  color: white !important;
}

/* Dit zijn de vakken binnen de Rows 
Ik heb het in procenten uitgedrukt om gemakkelijker te voldoen aan screen resolutions
flex-basis zorgt ervoor dat het vaste maten zijn en niet dat de vakken toch nog kleiner neigen te worden  
} */

.w20{
  flex-basis: 20%;
  display: grid;
}
.w25{
  flex-basis: 25%;
  display: grid;
}
.w33{
  flex-basis: 33.3333%; 
  display: grid;
}
.w40{
  flex-basis: 40%;
  display: grid;
}
.w50{
  flex-basis: 50%;
  display: grid;
}
.w60{
  flex-basis: 60%;
  display: grid;
}
.w66{
  flex-basis: 66.6666%;
  display: grid;
}
.w80{
  flex-basis: 80%;
  display: grid;
}
.w100{
  flex-basis: 100%;
  display: grid;
}
.right{
  justify-items: right !important;
}
.left{
  justify-items: left !important;
}
.center{
  justify-items: center !important;
}
.img{
  width: 100%;
}

/* Hier de fonts instellingen */
h1{
  margin-top: var(--margin-H2);
  padding: var(--padding-Headers);
  font-size: var(--font-size-h1);
  /*aangepast door column probleem*/
  width: unset !important;
}
h2, h3{
 margin-top: var(--margin-H2);
 padding: var(--padding-Headers);
 font-size: var(--font-size-h2);
 width: unset !important;
}
p{
  padding: var(--padding-txt);
}


/*cicle aanpassing*/
.img-circle{

  border-radius: 50%;
  height: 280px;
  width: 280px;
  border: 1px solid var(--header-background-color);
  /*border: 15px solid  rgb(38, 38, 38);*/
}
.indexPageShowcase{
  margin-top: 25px;
  margin-bottom: 25px;
}
@media(max-width: 2560px){
  :root{
    --font-size-h2: 30px;
    --margin-H2: 25px;
    --body-height: 100px;
  }
}

@media(max-width: 1920px){
  :root{
    --font-size: 16px;
    --font-size-h2: 26px;
    /* --padding-txt: 0px 25px 25px 25px; */
    --margin-H2: 25px;
    --body-width: 1280px;
    --body-height: 100px;
  }
}
@media screen and (max-width: 1366px),
       screen and (max-height: 768px){
  :root{
    --font-size: 16px;
    --font-size-h2: 24px;
    --font-size-h1: 28px;
    --padding-txt: 0px 25px 25px 25px;
    --margin-H2: 25px;
    --body-width: 1024px;
    --body-height: 100px;
    --padding-Headers: 0px 25px 0px 25px;
    --divider-large: 50px;
    --divider-small: 25px;
  }
  .img-circle{
    height: 210px;
    width: 210px;
  }
}

@media screen and(max-width: 1024px),
       screen and(max-height: 768px){
  :root{
    --font-size-h2: 24px;
    --font-size-h1: 28px;
    --padding-txt: 0px 25px 25px 25px;
    --margin-H2: 25px;
    --body-height: 100px;
  }
  .img-circle{
    height: 200px;
    width: 200px;
  }
}
@media screen and (max-width: 768px){

    :root{
      --divider-large: 25px;
    } 

    .indexPageShowcase{
      margin-top: 0px;
      margin-bottom: 0px;
    }

    .w20, .w25, .w33, .w40, .w50, .w60, .w66, .w80, .w100{
      flex-basis: 100%;
      /*31-12-23 toegevoegd om column probleem*/
      width: 100%;   
    }
    /* zet de rows omgekeerd neer ivm gsm */
  .reverse{
    flex-direction: column-reverse;
  }
}