html { /*Door de font-size in de root al op 16px te zetten, kunnen we de font-sizes makkelijker aanpassen doormiddel van de REM-eenheid*/
    font-size: 16px;
}

body { 
    background-color: #FFF6F2; /*Hierin wordt de achtergrondkleur over de gehele webpagina bepaald*/
}

.container { /*Hierin wordt de algemene styling (grootte van het veld in dit geval) bepaalt voor ALLE containers in het document*/
    max-width: 90%;
    margin: 0px auto; /*deze evt weghalen om geen margin om de containers te zetten*/
    padding: 2rem;
}

h1,h2,h3,h4,h5,h6 { /*Hierin zitten alle algemene eigenschappen van alle headings*/
    font-family: Poppins, Tahoma, Verdana, sans-serif;
    font-weight: bold;
    margin: 0px;
}

/*Hieronder zijn alle specifieke eigenschappen per header*/

h1 {
    font-size: 4rem;
    color: #FF401C;
}

h2 {
    font-size: 3rem;
    color: #EC644A;
}

#homeHero h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.5rem;
    color: #40652C;
    margin: 20px 0 20px 0;
}

h4 {
    font-size: 1rem;
    color: #163704;
}

p,a,li,i { /*Alle algemene eigenschappen van de paragrafen, links, list-items, en italic tekst*/
    font-family: Poppins, Tahoma, Verdana, sans-serif;
    font-size: 1rem;
    line-height: 1.5rem;
}

p {
    margin-bottom: 20px;
}

footer p {
    color: white;
}

#introZakelijk p {
    color: blue;
    text-decoration: underline;
}

/*Hieronder zijn alle eigenschappen van links in verschillende 'states'*/
a {
    color: #EC644A;
    text-decoration: none;
    font-weight: bold;
    transition: all ease .5s;
    margin: 30px;
    min-width: 150px;
}

a:visited {
    color: blue;
}

a:hover {
    color: #B4290F
}

a:focus {
    color: #B4290F;
}

a:active {
    color: #B4290F;
}

/*Hieronder zijn de eigenschappen van de h3 links, om te laten zien dat deze interactief zijn -- Hoe kan ik deze werkend maken? = Zie styling voor h3*/
a.h3 {
    color: #40652C;
    transition: all ease .5s;
}

a.h3:hover {
    color: #163704;
}

a.h3:focus {
    color: #163704;
}

a.h3:active {
    color: #163704;
}

/*Hieronder is de styling voor alle links die als button zijn vormgegeven*/
a.button {
    color: white;
    display: block;
    background-color: #40652C;
    text-align: center;
    text-decoration: none;
    padding: 16px;
    border-radius: 25px;
    max-width: 150px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    transition: all ease .5s;
    float: right;
}

a.button:hover {
    color: white;
    display: block;
    background-color: #163704;
    text-align: center;
    text-decoration: none;
    padding: 16px;
    border-radius: 25px;
    max-width: 150px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.subNavButton { /*Styling van de dropdown button in de navbar*/
    text-decoration: none;
    color:#EC644A;
    font-family: Poppins;
    font-size: 1rem;
    font-weight: bold;
    background: none;
    border: none;
    padding: 0;
}

img {
    width: 100%;
}
footer .card img {
    width: 48px;
}

#socialsContact img {
    width: 48px;
}

#siteHeader img {
    width: 20%;
    height: auto;
}

#siteFooter img {
    width: 10%;
    height: auto;
}

video {
    width: 100%;
    height: auto;
}

fieldset {
    border: none;
    padding: 0;
    margin-bottom: 30px;
}

input {
    border-color: #D1D1D1;
    border-radius: 5px;
    padding: 10px;
    width: 100%;
    margin-top: 16px;
}

#CTA h2, #CTA p {
    color: white;
}

#socialsContact h4 {
    color: #B4290F;
}

.vaardighedenContainer {
    background-color: #F6E1DA;
    padding: .5rem;
    text-align: center;
}

/*-------------------------------------------------------*/
/*Hieronder volgt het GRID-SYSTEEM*/
/*-------------------------------------------------------*/

/*-------------------------------------------------------*/
/*siteHeader*/
/*-------------------------------------------------------*/

#siteHeader{ /* gefixeerde siteheader */
    position: sticky;
    height: 8vh;
    top: 0px;
    left: 0px;
    background-color: #FFF6F2;
    width: 100%;
}

#siteHeader .container{ /* de gridcontainer van siteheader */
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 1rem;
}

#siteHeader .card:nth-child(1){/* card 1 */
    grid-column-start: 1;
    grid-column-end: 5;
}

#siteHeader .card:nth-child(2){/* card 2 */
    grid-column-start: 5;
    grid-column-end: 13;    
}


/* HAMBUREGR MENU */
/* (A) BREAK INTO VERTICAL MENU */

 #hamnav {
  width: 100%;
  background: #B4290F;
}
  #hamitems a { 
    box-sizing: border-box;
    display: block;
    width: 100%;
    color: white;
    text-decoration: none;
    border-top: 1px solid #fff;
    padding: 10px 5px;
  }

  /* (B) SHOW HAMBURGER ICON */
  #hamnav label {
    display: inline-block;
    color: white;
    background: #B4290F;
    font-style: normal;
    font-size: 1.2em;
    padding: 10px;
    float: right;
  }

  /* (C) TOGGLE SHOW/HIDE MENU */
    #hamitems { display: none; }
    #hamnav input:checked ~ #hamitems {display: block;}
    #hamburger {display: none}

/*-------------------------------------------------------*/
/*homeHero*/
/*-------------------------------------------------------*/

#homeHero {
    background-image: url(Assets/IMG_Hero.png);
    background-repeat: no-repeat;
    background-size: auto;
}

#homeHero .container {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 1rem;
}

#homeHero .card {
    grid-column-start: 1;
    grid-column-end: 1;
    background-color: rgba(255, 255, 255, 0.8);
    margin: 30px;
    border-radius: 50px;
    padding: 1.5rem;
}

/*-------------------------------------------------------*/
/*homeBanner*/
/*-------------------------------------------------------*/

#homeBanner {
    background-color: #F6E1DA;
    padding: .5rem;
    text-align: center;
    word-spacing: normal;
}

#homeIntro {
    background-color: #FFECE8;
    padding: 1rem;
}

#homeIntro h2 {
    color:#40652C
}

#homeIntro .card { 
    text-align: center;
}

#homeIntro .container {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 1rem;
}

#homeIntro .card:nth-child(1) {
    grid-column-start: 1;
    grid-column-end: 1;
}

/*-------------------------------------------------------*/
/*homeHighlights  -  Niet aanwezig op webpagina*/
/*-------------------------------------------------------*/



#homeHighlights .container {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 1rem;
}

#homeHighlights .card:nth-child(1) {
    grid-column-start: 1;
    grid-column-end: 1;
}

#homeHighlights .card:nth-child(2) {
    grid-column-start: 1;
    grid-column-end: 1;
}

#homeHighlights .card:nth-child(3) {
    grid-column-start: 1;
    grid-column-end: 1;
}

/*-------------------------------------------------------*/
/*homeAbout*/
/*-------------------------------------------------------*/

#homeAbout .container {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 1rem;
}

#homeAbout .card:nth-child(1) {
    grid-column-start: 1;
    grid-column-end: 1;
}

#homeAbout .card:nth-child(2) {
    grid-column-start: 1;
    grid-column-end: 1;
}

/*-------------------------------------------------------*/
/*homeProjecten*/
/*-------------------------------------------------------*/

#homeProjecten {
    background-color: #F6E1DA;
    padding: 2rem;
}

#homeProjecten .container {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 1rem;
}

#homeProjecten .card:nth-child(1) {
    grid-column-start: 1;
    grid-column-end: 1;
    background-color: white;
}

#homeProjecten .card:nth-child(2) {
    grid-column-start: 1;
    grid-column-end: 1;
    background-color: white;
}

#homeProjecten h3 {
    padding: 1rem;
    text-align: center;
}

/*-------------------------------------------------------*/
/*CTA*/
/*-------------------------------------------------------*/

#CTA {
    background-color: #EC644A;
}

#CTA .container {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 1rem;
}

#CTA .card:nth-child(1) {
    grid-column-start: 1;
    grid-column-end: 1;
}

/*-------------------------------------------------------*/
/*siteFooter*/
/*-------------------------------------------------------*/

#siteFooter {
    background-color: #40652C;
}

#siteFooter .container {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 1rem;
}

#siteFooter .card:nth-child(1) {
    grid-column-start: 1;
    grid-column-end: 1;
}

#siteFooter .card:nth-child(2) {
    grid-column-start: 1;
    grid-column-end: 1;
}

#siteFooter .card:nth-child(3) {
    grid-column-start: 1;
    grid-column-end: 1;
}

#siteFooter .card:nth-child(4) {
    grid-column-start: 1;
    grid-column-end: 1;
}

/*-------------------------------------------------------*/
/*Contactpagina*/
/*-------------------------------------------------------*/

form {
    width: 100%;
}

/*-------------------------------------------------------*/
/*Individuele projectpagina's*/
/*-------------------------------------------------------*/

#reflectieFeedbackProjecten {
    background-color: #F6E1DA;
}

/*-------------------------------------------------------*/
/*Over Mij pagina inhoud*/
/*-------------------------------------------------------*/

#introHobbies {
    background-color: #F6E1DA;
}

#introVisie {
    background-color: #F6E1DA;
}

#introZakelijk {
    text-align: center;

}

/*-------------------------------------------------------*/
/*Vanaf hier MEDIA QUIRIES*/
/*-------------------------------------------------------*/

@media screen and (min-width: 900px) {
    
    .container {
        max-width: 1000px;
        margin: 0px auto;
    }

/*-------------------------------------------------------*/
/*siteHeader*/
/*-------------------------------------------------------*/

#siteHeader{ /* ----  nieuwe eigenschappen voor deze section ---- */
    background-color: #FFF6F2;
    width: 100%;
    height: 14vh;
    position: sticky;
    z-index: 1;
}
#siteHeader .container{ /* ----  de container heeft nu een 12 koloms grid en wat andere eigenschappen---- */
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 1rem;
    max-width: 1000px;
    margin: 0px auto;
    padding: 20px 0 ;
}
#siteHeader .card:nth-child(1){ /* ----  de cards worden anders uitgelijnd op het grid ---- */
    grid-column-start: 1;
    grid-column-end: 5;
}
#siteHeader .card:nth-child(2){
    grid-column-start: 5;
    grid-column-end: 13;
}

/* ----  eigenschappen hamburgermenu naar normaal menu ---- */
#hamnav {
    width: 100%;
}

/* (B) HORIZONTAL MENU ITEMS */
#hamitems { 
    display: inline-flex; 
    float:right;
}

#hamitems a {
    margin-left: 5px;
    padding: 10px;
    color: #EC644A;
    text-decoration: none;
    text-align: center;
    background: none;
}
#hamitems a:hover { 
    color: #af0d0d; 
}

/* (C) HIDE HAMBURGER */
#hamnav label, #hamburger { display: none; }


/*-------------------------------------------------------*/
/*homeHero*/
/*-------------------------------------------------------*/

#homeHero .container {
    height: 40vh;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 1rem;
}

#homeHero .card:nth-child(1) {
    grid-column-start: 1;
    grid-column-end: 8;
}

#homeHero .card:nth-child(2) {
    grid-column-start: 1;
    grid-column-end: 8;
}

/*-------------------------------------------------------*/
/*homeBanner*/
/*-------------------------------------------------------*/

#homeBanner {
    background-color: #F6E1DA;
    padding: .5rem;
    text-align: center;
    word-spacing: 1rem;
}

/*-------------------------------------------------------*/
/*homeIntro*/
/*-------------------------------------------------------*/

#homeIntro .container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 1rem;
}

#homeIntro .card:nth-child(1) {
    grid-column-start: 3;
    grid-column-end: 10;
}

/*-------------------------------------------------------*/
/*homeHighlights  -  Niet meer aanwezig op webpagina!*/
/*-------------------------------------------------------*/

#homeHighlights .container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 1rem;
}

#homeHighlights .card:nth-child(1) {
    grid-column-start: 5;
    grid-column-end: 8;
}

/*Waarom werkt dit niet? Grid van video & 2 afbeeldingen naast elkaar*/

#homeHighlights .container:nth-child(2) {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 1rem;
}

#homeHighlights .container:nth-child(2) .card:nth-child(1) {
    grid-column-start: 1;
    grid-column-end: 7;
}

#homeHighlights .container:nth-child(2) .card:nth-child(2) {
    grid-column-start: 7;
    grid-column-end: 10;
}

#homeHighlights .container:nth-child(2) .card:nth-child(3) {
    grid-column-start: 10;
    grid-column-end: 13;
}

/*-------------------------------------------------------*/
/*homeAbout*/
/*-------------------------------------------------------*/

#homeAbout .container:nth-child(2) {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 1rem;
}

#homeAbout .card:nth-child(1) {
    grid-column-start: 1;
    grid-column-end: 5;
}

#homeAbout .card:nth-child(2) {
    grid-column-start: 6;
    grid-column-end: 12;
}

/*-------------------------------------------------------*/
/*homeProjecten*/
/*-------------------------------------------------------*/

#homeProjecten .container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 1rem;
}

#homeProjecten .card:nth-child(1) {
    grid-column-start: 1;
    grid-column-end: 7;
}

#homeProjecten .card:nth-child(2) {
    grid-column-start: 7;
    grid-column-end: 13;
}

/*-------------------------------------------------------*/
/*CTA*/
/*-------------------------------------------------------*/

#CTA .container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 1rem;
}

/*Waarom reageert child 1 niet op het grid?*/

#CTA .card:nth-child(1) {
    grid-column-start: 1;
    grid-column-end: 8;
}

#CTA .card:nth-child(2) {
    grid-column-start: 8;
    grid-column-end: 12;
}

#CTA a{
    margin-top: 25%;
}

/*-------------------------------------------------------*/
/*siteFooter*/
/*-------------------------------------------------------*/

#siteFooter .container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 1rem;
}

#siteFooter .card:nth-child(1) {
    grid-column-start: 1;
    grid-column-end: 4;
}

#siteFooter .card:nth-child(2) {
    grid-column-start: 4;
    grid-column-end: 7;
}

#siteFooter .card:nth-child(3) {
    grid-column-start: 7;
    grid-column-end: 10;
}

#siteFooter .card:nth-child(4) {
    grid-column-start: 10;
    grid-column-end: 13;
}

/*-------------------------------------------------------*/
/*formContact*/
/*-------------------------------------------------------*/

form {
    width: 50%;
    margin-left: 25%;
}

/*-------------------------------------------------------*/
/*Projecten pagina's*/
/*-------------------------------------------------------*/

#projecten .container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 1rem;
}

#projecten .card:nth-child(1) {
    grid-column-start: 1;
    grid-column-end: 7;
}

#projecten .card:nth-child(2) {
    grid-column-start: 7;
    grid-column-end: 13;
}

#projecten .card:nth-child(3) {
    grid-column-start: 1;
    grid-column-end: 7;
}

#projecten .card:nth-child(4) {
    grid-column-start: 7;
    grid-column-end: 13;
}

#projecten .card:nth-child(5) {
    grid-column-start: 1;
    grid-column-end: 7;
}

#projecten .card:nth-child(6) {
    grid-column-start: 7;
    grid-column-end: 13;
}

#procesProjecten .container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 1rem;
}

#procesProjecten .card:nth-child(1) {
    grid-column-start: 1;
    grid-column-end: 6;
}

#procesProjecten .card:nth-child(2) {
    grid-column-start: 1;
    grid-column-end: 6;
}

#procesProjecten .card:nth-child(3) {
    grid-column-start: 1;
    grid-column-end: 6;
}

#procesProjecten .card:nth-child(4) {
    grid-column-start: 7;
    grid-column-end: 12;
}

/*-------------------------------------------------------*/
/*Over Mij pagina inhoud*/
/*-------------------------------------------------------*/

#introHobbies {
    background-color: #F6E1DA;
}

#introHobbies .container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 1rem;
}

#introHobbies .card:nth-child(1) {
    grid-column-start: 2;
    grid-column-end: 5;
}

#introHobbies .card:nth-child(2) {
    grid-column-start: 6;
    grid-column-end: 11;
}

/*-------------------------------------------------------*/
/*Contactpagina*/
/*-------------------------------------------------------*/

#socialsContact .container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 1rem;
}

#socialsContact .card:nth-child(1) {
    grid-column-start: 2;
    grid-column-end: 5;
}

#socialsContact .card:nth-child(2) {
    grid-column-start: 6;
    grid-column-end: 11;
}

#socialsContact .card:nth-child(3) {
    grid-column-start: 2;
    grid-column-end: 5;
}

#socialsContact .card:nth-child(4) {
    grid-column-start: 6;
    grid-column-end: 11;
}

#socialsContact .card:nth-child(5) {
    grid-column-start: 2;
    grid-column-end: 5;
}



}