@import url('https://fonts.googleapis.com/css2?family=Mochiy+Pop+One&family=Montserrat:ital,wght@0,100;0,300;0,400;0,700;1,300;1,400&family=Paytone+One&display=swap');

/* Basic styling */
:root {
    /* COLORS */
    --white: rgb(255, 255, 255);
    --black: rgb(0, 0, 0);
    --grey: rgb(221, 221, 221);

    --logo-oranje-logo: rgb(233, 78, 27);
    --logo-light-orange: rgb(244, 163, 31);
    --logo-medium-orange: rgb(230, 100, 36);
    --logo-dark-orange: rgb(228, 91, 34);
    
    --logo-light-yellow: rgb(255, 215, 35);
    --logo-medium-yellow: rgb(248, 216, 17);
    --logo-dark-yellow: rgb(246, 216, 42);
    --logo-yellow: rgb(244, 202, 13);
    
    --logo-light-red: rgb(227, 50, 36);
    --logo-medium-red: rgb(225, 24, 43);
    --logo-dark-red: rgb(188, 36, 33);
    
    --bodycopy-color: rgb(0, 0, 0);
    --table-color: rgb(255, 255, 255);

    /*--logo-light-blue: rgb(0, 0, 0);
    --logo-dark-pink: rgb(207, 42, 97);
    --logo-medium-pink: rgb(214, 207, 207);
    --logo-light-pink: rgb(173, 0, 9);
    --logo-light-pink-gradient: rgb(151, 1, 1);
    --logo-purple: rgb(117, 132, 193);
    --logo-red: rgb(215, 113, 106);
    --logo-green: rgb(120, 189, 119);*/


    /* GRADIENT */
    --gradient-vlocare: linear-gradient(to right, var(--logo-medium-orange), var(--logo-light-red));
    --gradient-vlocare-geel: linear-gradient(to right, var(--logo-light-yellow), var(--logo-light-orange));

    /* FONTS */
    --body-font: 'Poppins', sans-serif;
    --heading-font: 'OpenSans-ExtraBold', sans-serif;
    --heading-font-sub: 'OpenSans-ExtraBold', sans-serif;

    /* 1rem = 10px; */
    --h1-font-size: 3.5rem;
    --h2-font-size: 2.4rem;
    --h3-font-size: 2.2rem;
    --h4-font-size: 1.4rem;

    --h1-span-size: 3.8rem;
    --h2-span-size: 2.8rem;
    --h3-span-size: 2.6rem;

    --body-font-size: 1.2rem;
    --body-line-height: 2.2rem;
    --body-nav: 1.5rem;

    --button-font-size: 1.6rem;

    /* Font Weight */
    --font-body: 300;
    --font-medium: 500;
    --font-semi-bold: 600;
    --font-bold: 700;
}

    /*Text kleur*/
    .text-white {color: var(--white);}
    .text-geel {color: var(--logo-yellow);}
    .text-rood {color: var(--logo-light-red);}
    .text-oranje {color: var(--logo-dark-orange);}

   /*Achtergrond kleuren*/
    .bg-oranje {background-color: var(--logo-dark-orange)}
    .bg-rood {background-color: var(--logo-light-red)}
    .bg-light-orange {background-color: var(--logo-light-orange);}
    .bg-geel {background-color: var(--logo-yellow)}
    .bg-grey {background-color: var(--grey)}
    .bg-gradient-rood {background-image: var(--gradient-vlocare); background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: auto;
    width: 100%;
}
    .bg-gradient-geel {background-image: var(--gradient-vlocare-geel); background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: auto;
    width: 100%;
}
    

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

html {
    font-size: 62.5%;
    /*1rem = 10px;*/
    overflow-x: hidden;
}

body {
    font-size: var(--body-font-size);
    font-family: var(--body-font);
}

body,
html {
    height: 100%;
}

h1 {
    font-family: var(--heading-font);
    font-size: var(--h1-font-size);
    padding-bottom: 1rem;
}

h1 span {
    font-family: var(--heading-font-sub);
    font-size: var(--h1-span-size);
}

h2 {
    font-family: var(--heading-font);
    font-size: var(--h2-font-size);
    line-height: 4rem;
}

h2 span {
    font-family: var(--heading-font-sub);
    font-size: var(--h2-span-size);
}

.h2 center {
    max-width:800px;
    margin:auto;
    padding:clamp(1.5rem, 3vw, 3rem);
    text-align: center;
}

h3 {
    font-family: var(--heading-font);
    font-size: var(--h3-font-size);
}

h3 span {
    font-family: var(--heading-font-sub);
    font-size: var(--h3-span-size);
}

h4 {
    font-family: var(--heading-font);
    font-size: var(--h4-font-size);
}

p {
    font-size: var(--body-font-size);
    line-height: var(--body-line-height);
    font-weight: var(--font-body);
    color: var(--bodycopy-color);
}

p a {
    color: var(--bodycopy-color);
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul a {
    color: var(--bodycopy-color);
}

nav a {
    color: var(--black);
    text-decoration: none;
}

nav {
    background: var(--white);
    padding: 0 3%;
}

.menu,
.submenu {
    list-style-type: none;
}

.logo img {
    height: 3rem;
}

.item {
    padding: 1.5rem;
}

.item:hover {
    background-color: var(--logo-dark-red);
}

.item.button {
    padding: 1rem 0.5rem;
}

.item:not(.button) a:hover,
.item a:hover::after {
    color: var(--white);
}

.subitem:not(.button) a:hover,
.subitem a:hover::after {
    color: var(--logo-oranje-logo);
}

/* Mobile menu */
.menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.menu li a {
    display: block;
    padding: 1.5rem 0.5rem;
    font-size: var(--body-nav);
}

.menu li.subitem a {
    padding: 1.5rem;
}

.toggle {
    order: 1;
}

.fa-bars,
.fa-times {
    font-size: 2rem;
}

.item.button {
    order: 2;
}

.item {
    order: 3;
    width: 100%;
    text-align: center;
    display: none;
}

.active .item {
    display: block;
}

.button.secondary {
    /* divider between buttons and menu links */
    border-bottom: 5px #444 solid;
}

/* Submenu up from mobile screens */
.submenu {
    display: none;
}

.submenu-active .submenu {
    display: block;
}

.has-submenu i {
    font-size: var(--body-nav);
}

.has-submenu>a::after {
    font-family: "Font Awesome 5 Free";
    font-size: var(--body-nav);
    line-height: var(--body-line-height);
    font-weight: 700;
    content: "\f078";
    color: var(--logo-oranje-logo);
    padding-left: 5px;
}

.subitem a {
    padding: 10px 15px;
}

.submenu-active {
    background-color: var(--logo-dark-red);
    border-radius: 0.3rem;
}

.submenu-active a {
    color: var(--logo-yellow);
}

.submenu-active a:hover {
    color: var(--logo-dark-red);
}

.submenu-active>a::after {
    color: var(--logo-yellow);
}

.container-hero {
    display: flex;
    height: 80vh;
    width: 100%;
}

.container-hero-subpage {
    display: flex;
    height: 2.5rem;
    width: 100%;
}

.hero-flex-image {
    /* background-image: var(--gradient-pink); */
    background-image: url("/images/headerbeeld-background-VloCare.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.hero-flex-text {
    display: flex;
    flex-flow: column wrap;
    align-items: left;
    text-align: center;
    width: 70%;
    padding-right: 2vh;
}

.hero-flex-text h1 {
    color: var(--black);
    font-size: var(--h1-font-size);
}

.hero-flex-text p {
    color: var(--black);
    font-size: 1.8rem;
    line-height: 3.2rem;
    font-weight: 300;
}

.hero-flex-beeld {
    width: 60%;
    padding-top: 1rem;
}

.hero-flex-image img {
    width: 100%;
    height: 100%;
    margin: auto;
    object-fit: cover;
    border-radius: 12px;
}


/* BUTTONS */
.buttonyellow {
    border: none;
    display: inline-block;
    padding: 1rem 3rem 1rem 3rem;
    border-radius: 2rem;
    margin-top: 1rem;
    color: var(--white);
    background-color: var(--logo-dark-red);
    text-align: center;
    font-family: var(--heading-font);
    font-size: var(--button-font-size);
    cursor: pointer;
}

.buttonyellow:hover,
.buttonyellow:focus {
    background-color: var(--logo-oranje-logo);
    color: var(--white);
    transition: 0.8s;
}

.buttonwhite {
    border: none;
    display: inline-block;
    padding: 1rem 3rem 1rem 3rem;
    border-radius: 2rem;
    margin-top: 1rem;
    color: var(--logo-dark-red);
    background-color: var(--white);
    text-align: center;
    font-family: var(--heading-font);
    font-size: var(--button-font-size);
    cursor: pointer;
}

.buttonwhite:hover,
.buttonwhite:focus {
    background-color: var(--logo-dark-red);
    color: var(--white);
    transition: 0.8s;
}

/* informatie kolommen */
.row {
    display: flex;
    flex-wrap: wrap;
}

/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side_30_right,
.side_30_left {
    display: flex;
    flex: 40%;
    padding: 1rem 0 1rem 0;
}

.side_30_right_bg {
    display: flex;
    flex: 40%;
    background-color: var(--logo-light-pink);
    padding: 1rem 0 1rem 0;
}

.side_30_right img,
.side_30_left img {
    width: 100%;
    height: 100%;
    margin: auto;
    object-fit: cover;
}

.side_50 {
    flex: 50%;
    background-color: var(--white);
    padding: 2rem;
}

/* Images columns */
.imageSide {
    display: flex;
    width: 100%;
    height: 100%;
}

.imageSide img {
    width: 75%;
    height: 75%;
    margin: auto;
    object-fit: cover;
    justify-content: center;
    align-items: center;
}

/* Main columns */
.main_70_left,
.main_70_right {
    flex: 60%;
    padding: 3rem;
}

.main_70_left_bg {
    flex: 60%;
    background-color: var(--logo-light-pink);
    padding: 3rem;
}

.main_70_left h2 {
    color: var(--logo-red);
    padding-bottom: 1rem;
}

.main_70_left h2 span {
    color: var(--logo-oranje-logo);
}

.main_70_right h2 {
    color: var(--logo-purple);
    padding-bottom: 1rem;
}

.main_70_right h2 span {
    color: var(--logo-orange);
}

.main_70_left_bg h2 {
    color: var(--logo-oranje-logo);
    padding-bottom: 1rem;
}

.main_70_left_bg h2 span {
    color: var(--logo-green);
}

.main_50 {
    flex: 50%;
    padding: 4rem 0rem 4rem 0rem;
    order: 1;
    text-align: center;
    height: auto;
    align-items: flex-start;
}

.main_50 img {
    width: auto;
    height: 20vh;
    padding-bottom: 4rem;
}

.main_50Border {
    width: 60%;
    max-width: 400px;
    margin: 0 auto;
    padding-bottom: 4rem;
    border-top: 2px solid var(--black);
}

/* Enkele box voor tekst */
/* Wrapper (vervang .row voor deze sectie) */
.single-box {
    width:100%;
    display:block;
    padding:clamp(2rem, 5vw, 4rem) 1rem; 
}

/* Tekst box */
.text-box {
    max-width:800px;
    margin:auto;
    padding:clamp(1.5rem, 3vw, 3rem);
    text-align: left;
}

/* Titel */
.text-box h2 {
    font-family: var(--heading-font);
    font-size: var(--h2-font-size);
    margin-bottom:1rem;
}

.text-box h3 {
    font-family: var(--heading-font);
    font-size: var(--h3-font-size);
    margin-bottom:1rem;
}

/* Tekst */
.text-box p {
    font-size: var(--body-font-size);
    line-height: var(--body-line-height);
    font-weight: var(--font-body);
}


/* Quotes */
.quotes {
    display: flex;
    flex-wrap: wrap;
    /*background-image: url(/images/header-bg.png);*/
    background-repeat: no-repeat;
    background-size: 20rem;
    background-position-y: -12%;
    background-position-x: 75%;
}

.quotes-heading{
    flex:100%;              /* zorgt dat hij boven alles staat */
    text-align:center;
    padding:3rem 1rem 1rem 1rem;
}

.quotes-heading h2{
    font-family: var(--heading-font);
    font-size: var(--h2-font-size);
    color:var(--logo-dark-red);
}

.quoteImg {
    width: auto;
    max-width: 200px;
    max-height: 200px;
    margin: 2rem auto;
    display: block;
    border-radius: 0.5rem;
}

.quoteBorder {
    margin: 0 5rem 0 5rem;
    padding-bottom: 4rem;
    border-top: 0.5rem solid var(--logo-dark-red);
}

.quoteLeft,
.quoteMiddle,
.quoteRight {
    flex: 100%;
    padding: 6rem 8rem;
    text-align: center;
    color: var(--logo-dark-orange);
}

.quoteLeft span,
.quoteMiddle span,
.quoteRight span {
    color: var(--logo-dark-red);
}

.quoteRight {
    /*background-image: url(images/doodle-orange.png);*/
    background-repeat: no-repeat;
    background-size: 20rem;
    background-position-y: 20rem;
    background-position-x: -5rem;
}


/* Quotes */
.partners {
    display: flex;
    flex-wrap: wrap;
    /*background-image: url(/images/header-bg.png);*/
    background-repeat: no-repeat;
    background-size: 20rem;
    background-position-y: -12%;
    background-position-x: 75%;
}

.partners-heading{
    flex:100%;              /* zorgt dat hij boven alles staat */
    text-align:center;
    padding:3rem 1rem 1rem 1rem;
}

.partners-heading h2{
    font-family: var(--heading-font);
    font-size: var(--h2-font-size);
    color:var(--logo-dark-red);
}

.partnersImg {
    width: auto;
    max-width: 200px;
    max-height: 200px;
    margin: 2rem auto;
    display: block;
    border-radius: 0.5rem;
}

.partnersBorder {
    margin: 0 5rem 0 5rem;
    padding-bottom: 4rem;
    border-top: 0.5rem solid var(--logo-dark-red);
}

.partnersLeft,
.partnersMiddle,
.partnersRight {
    flex: 100%;
    padding: 6rem 8rem;
    text-align: center;
    color: var(--logo-dark-orange);
}

.partnersLeft span,
.partnersMiddle span,
.partnersRight span {
    color: var(--logo-dark-red);
}

.partnersRight {
    /*background-image: url(images/doodle-orange.png);*/
    background-repeat: no-repeat;
    background-size: 20rem;
    background-position-y: 20rem;
    background-position-x: -5rem;
}


/*lijn over de pagina*/
.linePage {
  background-color: var(--logo-dark-orange); /* This will be the visible color */
  padding: 1px; /* Space around the child */
  width: 100%;
}

.lineMargin {
  margin: 4px; /* Create space from the edges of parent */
  background-color: white; /* Color of the child element */
}

.linePageSmall {
  background-color: var(--grey); /* This will be the visible color */
  padding: 1px; /* Space around the child */
}

.lineMarginSmall {
  margin: 1px; /* Create space from the edges of parent */
}


/* Team */
.team {
    display: flex;
    flex-wrap: wrap;
    margin: 0rem 10rem;
}

.teamBorder {
    margin: 0 5rem 0 5rem;
    padding-bottom: 1rem;
    border-top: 0.5rem solid var(--logo-purple);
}

.team img {
    height: 100%;
    width: 100%;
}

.teamLeft,
.teamMiddle,
.teamRight {
    flex: 100%;
    height: 100%;
    padding: 0rem 2rem 2rem 2rem;
    text-align: center;
    color: var(--logo-purple);
}

.teamLeft span,
.teamMiddle span,
.teamRight span {
    color: var(--logo-purple);
}

/* Team ORIGINEEL*/
/* .centerHead {
    text-align: center;
    padding: 1rem 0;
    color: var(--heading-color);
}

.team {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.teamPerson {
    flex: 100%;
    padding: 20px;
    text-align: center;
    margin: 5px 10px;
}

.team img {
    width: 100%;
} */

/* Subpage */
.breadCrumb {
    display: flex;
    align-items: center;
    height: 5rem;
    width: 100%;
    background-color: var(--grey);
    padding: 0 0 0 7%;
    color: var(--black);
    border-bottom: 5px solid var(--logo-dark-red);
}

.breadCrumb h3 {
    font-size: var(--body-nav);
    font-family: var(--body-font);
    font-weight: var(--font-medium);
}

.subpage_txt {
    display: flex;
    justify-content: center;
    flex-flow: column wrap;
    width: 100%;
    background-color: var(--white);
    padding: 3rem 3rem;
}

.subpage_txt h2 {
    padding-bottom: 2rem;
    color: var(--logo-dark-red);
}
.subpage_txt h3 {
    color: var(--logo-medium-pink);
}

.subpage_txt ul {
        list-style-type:disc;
        font-size: var(--body-font-size);
        line-height: var(--body-line-height);
        font-weight: var(--font-body);
        color: var(--bodycopy-color);
        text-align: left;
        padding-left: 1.4rem;
}

.subpage_txt img {
    width: 100%;
    max-width: 500px;
    height: auto;
    border-radius: 12px;
    margin: 2rem 0rem;
    /*margin: 2rem auto; dit centreerd de afbeelding */
    display: block;
    object-fit: cover;
}

table {
    border-collapse: collapse;
    width: 100%;
    font-size: var(--body-font-size);
    line-height: var(--body-line-height);
    font-weight: var(--font-body);
    color: var(--bodycopy-color);

  }
  
td, th {
    border: 1px solid var(--table-color);
    text-align: left;
    padding: 8px;
  }
tr:nth-child(even) {
    background-color: var(--table-color);
  }

/* CTA */
.cta {
    display: flex;
    flex-flow: column wrap;
    height: auto;
    width: 100%;
    padding: 2rem;
    align-items: center;
    justify-content: center;
}

.cta-flex-image {
    /* background-image: var(--gradient-pink); */
    background-image: url("/images/headerbeeld-background-VloCare.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 3rem;
}

.cta img {
    width: 100%;
}

.ctatxt {
    padding: 1rem 20px;
    text-align: center;
    color: var(--bodycopy-color);
}

.ctatxt h2 {
    padding-top: 3rem;
}

.ctaHeadColorOne {
    color: var(--logo-green);
}

.ctaHeadColorTwo {
    padding-top: 1rem;
    color: var(--logo-dark-red);
}

/* Footer */
.footer {
    display: flex;
    flex-flow: column wrap;
    height: auto;
    width: 100%;
    margin-top: 2rem;
    align-items: center;
    justify-content: center;
}

.footer img {
    width: 60%;
}

.footertxt {
    padding: 1rem 20px;
    text-align: center;
    color: var(--bodycopy-color);
}

.footertxt h2,
.footertxt p {
    padding-bottom: 1rem;
}

.footerHeadColorOne {
    color: var(--logo-green);
}

.footerHeadColorTwo {
    padding-top: 1rem;
    color: var(--logo-dark-red);
}

.copyright {
    display: flex;
    flex-flow: column wrap;
    background-color: var(--logo-oranje-logo);
    width: 100%;
    padding: 1rem 20px;
    color: var(--white);
    justify-content: space-between;
    align-items: center;
}

.copyright p:nth-child(2) {
    color: var(--white);
}

.copyright p {
    color: var(--white);
    font-size: 1rem;
}

.copyrighttxt a {
    color: var(--white);
    font-size: 1rem;
    text-decoration: none;
}


/* TEST FOTOGALLERIJ */
.body-fotogallerij {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}
.fotogallerij-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0 10%;
}

.fotogallerij-item {
    margin: 10px;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.fotogallerij-item img {
    width: 200px;
    height: 200px;
    object-fit: cover;
}

.fotogallerij-item:hover {
    transform: scale(1.2);
}

@media screen and (max-width: 700px) {

    .row,
    .navbar {
        flex-direction: column;
    }
}


/* Tablet menu */
@media all and (min-width: 700px) {

    .menu {
        justify-content: center;
    }

    .logo {
        flex: 1;
    }

    .item.button {
        width: auto;
        order: 1;
        display: block;
    }

    .toggle {
        flex: 1;
        text-align: right;
        order: 2;
    }

    /* Button up from tablet screen */
    .menu li.button a {
        padding: 10px 15px;
        margin: 5px 0;
    }

    .button a {
        background: var(--logo-oranje-logo);
        border: 1px var(--logo-oranje-logo) solid;
    }

    .button.secondary {
        border: 0;
    }

    .button.secondary a {
        background: transparent;
        border: 1px var(--logo-oranje-logo) solid;
    }

    .button a:hover {
        text-decoration: none;
    }

    .button:not(.secondary) a:hover {
        background: var(--logo-oranje-logo);
        border-color: var(--logo-oranje-logo);
    }

    .container-hero {
        height: 40vh;
    }

    .hero-flex-image {
        flex-flow: row wrap;
    }

    .hero-flex-image img {
        width: 80%;
        height: 80%;
        margin: auto;
        object-fit: cover;
    }

    .hero-flex-text {
        text-align: left;
        width: 50%;
        padding-left: 5rem;
    }

    .hero-flex-beeld {
        padding-right: 2rem;
        width: 50%;
    }

    .side_50 {
        order: 1;
    }

    .imageSide img {
        width: 100%;
        height: 100%;
        margin: auto;
        object-fit: contain;
    }

    /* Side columns */
    .side_30_left {
        padding-left: 5rem;
    }

    .side_30_right,
    .side_30_right_bg {
        padding-right: 5rem;
    }

    /* Main columns */
    .main_70_left,
    .main_70_left_bg {
        padding-left: 5rem;
    }

    .main_70_right {
        padding-right: 5rem
    }

    .subpage_txt {
        padding: 3rem 15rem;
    }

    /* Quotes */
    .quotes {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        width: 100%;
        height: 35vh;
        margin: 2vh 0;
        padding: 4rem 3rem;
        /*background-image: url(images/doodle-dubble.png);*/
        background-size: 100%;
        background-position-y: 50%;
        background-position-x: 50%;
    }

    .quoteLeft,
    .quoteMiddle,
    .quoteRight {
        flex: 20%;
        padding: 2rem;
        text-align: center;
        margin: 1rem;
    }

    .quoteRight {
        background-image: none;
    }

    /* Team */
    .teamLeft,
    .teamMiddle,
    .teamRight {
        flex: 20%;
        padding: 20px;
        text-align: center;
        margin: 10px 10px;
    }

    .team {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .teamBorder {
        margin: 0 5rem 0 5rem;
        padding-bottom: 4rem;
        border-top: 0.5rem solid var(--logo-purple);
    }

    .teamPerson {
        flex: 40%;
    }

    .teamPerson:last-of-type {
        max-width: 47.5%;
    }

    /* Footer */
    .footer {
        display: flex;
        flex-flow: row wrap;
        height: auto;
        width: 100%;
        margin-top: 3rem;
    }

    .footer img {
        width: 90%;
    }

    .footertxt {
        display: flex;
        height: auto;
        width: 100%;
        justify-content: flex-start;
        text-align: left;
        padding: 2rem 0 2rem 5rem;
    }

    .footerLogo {
        width: 1vh;
    }

    .footerContact {
        padding-right: 10rem;
    }

    .footerVlocare {
        display: flex;
        flex-flow: row wrap;
    }

    .footerLogo {
        display: flex;
        flex-flow: row wrap;
        width: 20%;
    }

    .footerHeadColorTwo {
        display: flex;
        flex: 1 1 100%;
        padding-top: 0;
    }

    .footerVlocare ul {
        flex: 1 1 auto;
    }

    .footertxt h2,
    .footertxt p {
        padding-bottom: 1rem;
    }

    .copyright {
        flex-flow: row wrap;
        padding: 1rem 5rem;
    }
}

/* Desktop menu */
@media all and (min-width: 960px) {
    :root {
        --h1-font-size: 5rem;
        --h2-font-size: 3rem;
        --h3-font-size: 2.2rem;
        --h4-font-size: 2rem;

        --h1-span-size: 5.2rem;
        --h2-span-size: 3.6rem;
        --h3-span-size: 2.6rem;

        --body-font-size: 1.2rem;
        --body-line-height: 3rem;
        --body-nav: 1.5rem;

        --button-font-size: 1.6rem;
    }

    .menu {
        align-items: flex-start;
        flex-wrap: nowrap;
        background: none;
        padding: 0;
    }

    .menu:nth-child(2) {
        color: var(--logo-red);
    }

    .logo {
        order: 0;
    }

    .logo img {
        height: 5rem;
        padding: 0;
    }

    .item {
        order: 1;
        position: relative;
        display: block;
        width: auto;
        height: 90px;
        padding: 1.5rem 0.5rem;
    }

    li.item {
        height: 90px;
        line-height: 35px;
    }

    .button {
        order: 2;
    }

    .submenu-active .submenu {
        display: block;
        position: absolute;
        left: 0;
        top: 90px;
        background: var(--logo-dark-red);
    }

    .toggle {
        display: none;
    }

    .submenu-active {
        border-radius: 0;
    }

    .submenu-active a {
        color: var(--white);
    }

    .submenu-active a:hover {
        color: var(--logo-oranje-logo);
    }

    .submenu-active>a::after {
        color: var(--white);
    }

    .teamPerson {
        flex: 30%;
    }

    .container-hero {
        height: 80vh;
    }

    .hero-flex-image {
        flex-flow: row wrap;
    }

    .hero-flex-text {
        text-align: left;
        width: 50%;
        padding-left: 5rem;
    }

    .hero-flex-text p {
        font-size: 2.2rem;
        line-height: 4.2rem;
        font-weight: 300;
    }

    .hero-flex-text img {
        width: 4rem;
    }

    .hero-flex-beeld {
        padding-right: 5rem;
        max-width: 50%;
    }

    .hero-flex-image img {
        width: 100%;
        height: 100%;
        margin: auto;
        object-fit: cover;
    }

    .buttonyellow {
        margin-top: 3rem;
    }

    /* Side columns */
    .side_30_left {
        height: 80vh;
        padding-left: 5rem;
    }

    .side_30_right,
    .side_30_right_bg {
        height: 80vh;
        padding-right: 5rem;
    }

    .imageSide img {
        width: 80%;
        height: 80%;
    }

    /* Main columns */
    .main_70_left,
    .main_70_left_bg {
        display: flex;
        flex: 50%;
        flex-flow: row wrap;
        height: 80vh;
        align-content: center;
        padding: 0 5rem;
    }

    .main_70_right {
        display: flex;
        flex: 50%;
        flex-flow: row wrap;
        height: 80vh;
        align-content: center;
        padding: 0 5rem;
    }

    .subpage_txt { 
        padding: 3rem 20rem;
    }

    /* Quotes */
    .quotes {
        height: 50vh;
        background-size: 100%;
        padding: 5rem 3rem;
    }

    /* Footer */
    .footer img {
        width: 70%;
    }

    .footertxt {
        padding: 4rem 0 2rem 50px;
    }

    .copyright {
        padding: 1rem 5rem;
    }
}

/* Desktop menu */
@media all and (min-width: 1200px) {
    .menu {
        padding: 0;
    }

    .item {
        padding: 1.5rem 1.5rem;
    }

    .hero-flex-text {
        width: 40%;
    }

    .hero-flex-beeld {
        max-width: 45%;
    }

    /* Side columns */
    .side_30_left {
        padding-left: 10rem;
    }

    .side_30_right,
    .side_30_right_bg {
        padding-right: 10rem;
    }

    
    /* Main columns */
    .main_70_left,
    .main_70_left_bg {
        padding: 0 5rem 0 15rem;
    }

    .main_70_right {
        padding: 0 15rem 0 5rem;
    }

    .subpage_txt { 
        padding: 3rem 30%;
    }

    .footertxt {
        padding: 4rem 0 2rem 15rem;
    }
}

/* Desktop menu */
@media all and (min-width: 1400px) {
    .menu {
        padding: 0 5rem;
    }

    .hero-flex-text {
        padding-left: 10rem;
    }

    .hero-flex-beeld {
        padding-right: 10rem;
    }

    .hero-flex-beeld img {
        width: 80%;
        height: 80%;
    }

    /* Side columns */
    .side_30_left {
        padding-left: 15rem;
    }

    .side_30_right,
    .side_30_right_bg {
        padding-right: 15rem;
    }

    /* Main columns */
    .main_70_left,
    .main_70_left_bg {
        padding: 0 15rem 0 20rem;
    }

    .main_70_right {
        padding: 0 20rem 0 15rem;
    }

    /* Quotes */
    .quotes {
        background-size: 60%;
    }

    .footertxt {
        padding: 4rem 0 2rem 20rem;
    }

    .copyright {
        padding: 1rem 20rem;
    }
}