* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
  /* font-family: "Exo 2", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal; */


/* /* css voor groote laptops en middelgroote desktops */
@media screen and (min-width: 1440px) {
    .mobiel {
        display: none;
    }
    header {
        display: flex;
        align-items: center;
        justify-content:center;
        gap:45%;
        height:10%;
    }
    .heusdenhoutlogo {
        width: 2.375rem;
        margin-right:0.8125rem;
    }
    .logo-text {
        display: flex;
        align-items: center;
    }
    .heusdenhout-titel {
        font-family:"Exo 2", sans-serif;
        font-optical-sizing: auto;
        font-weight:600;
        font-style:normal;
        font-size:1.125rem;
        color:#000000;
    }
    .desktop-nav a {
        font-family:"Exo 2",sans-serif;
        font-optical-sizing: auto;
        font-weight:400;
        font-style:normal;
        text-decoration:none;
        font-size:1.125rem;
        color:#000000;
    }
    .desktop-nav {
        display: flex;
        gap:1.5625rem;
    }
    .topnav a {
        display: none;
    }
/* home */
    .home {
        background-image: url(https://placehold.co/400x400);
        height:37.8125rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 1%
    }
    h1 {
        width: 50%;
        text-align: center;
        font-family:"Exo 2", sans-serif;
        font-optical-sizing: auto;
        font-weight:700;
        font-style:normal;
        font-size:3rem;
        color:#000000;
    }
    .home-text {
        font-family:"Exo 2", sans-serif;
        font-optical-sizing: auto;
        font-weight:600;
        font-style:normal;
        font-size:1.25rem;
        color:#000000;
    }
    .wordlid-knop{
        font-family:"Exo 2", sans-serif;
        font-optical-sizing: auto;
        font-weight:700;
        font-style:normal;
        font-size:1.25rem;
        color:#000000;
        padding-left:4.875rem;
        padding-right:4.875rem;
        padding-top: 1.6875rem;
        padding-bottom: 1.6875rem;
        background-color: #ffffff;
        border: 2.5px solid green;
        box-sizing: border-box;
        margin-top:3.5%;
    }
/* missie & visie */
    .missie {
        background-color: #FFFFFF;
        display:flex;
        justify-content: center;
        align-items: center;
        gap:3%;
        padding:3% 0;
    }
    .missie-text,
    .visie-text,
    .vooriedereen-text {
        font-family:"Exo 2", sans-serif;
        font-optical-sizing: auto;
        font-weight:400;
        font-style:normal;
        font-size:1rem;        
    }
    .missie-titel,
    .visie-titel,
    .vooriedereen-titel {
        font-family:"Exo 2", sans-serif;
        font-optical-sizing: auto;
        font-weight:400;
        font-style:normal;
        font-size:3rem;
    }
    .groen {
        color:#A5AB46;
        font-weight:700;
    }
    .missie-container {
        width: 30%;
    }
    .hartje {
        width: 30%;
    }
    .visie {
        background-image: url(https://placehold.co/500x500);
        padding:4% 0 6% 0;
    }
    .visie-container {
        text-align: right;
        color:#FFFFFF;
    }
    .visie-titel {
        padding:0 0 1.5% 0;
    }
    .info-titel {
        font-family:"Exo 2", sans-serif;
        font-optical-sizing: auto;
        font-weight:700;
        font-style:normal;
        font-size:4rem;
        color:#FFFFFF;       
    }
    .info-onderwerp {
        font-family:"Exo 2", sans-serif;
        font-optical-sizing: auto;
        font-weight: 300;
        font-style:normal;
        font-size:1.5rem;
        color:#FFFFFF;
    }
    .grid,
    .gegevens {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .gegevens div {
        text-align: center;
    }
    .visie-container {
        padding:0 12% 0 0;
    }
    .info {
        width:40%;
    }
    .onderwerp-titel {
        font-family:"Exo 2", sans-serif;
        font-optical-sizing: auto;
        font-weight:400;
        font-style:normal;
        font-size:1.5rem;
    }
    .onderwerp-text,
    .vooriedereen-text {
        font-family:"Exo 2", sans-serif;
        font-optical-sizing: auto;
        font-weight:400;
        font-style:normal;
        font-size:1rem;     
    }
    .onderwerp-titel,
    .onderwerp-text,
    .vooriedereen-text {
        color:#000000;
    }
    .vooriedereen-img-container {
        width:18vh;
        height:13vh;
        background-image: url(https://placehold.co/100x100);
        margin:0 auto;
        border: 2px solid black;
        border-radius: 5%;
    }
    .vooriedereen-img {
        width:100%;
        margin:0 auto;
    }
    .vooriedereengrid {
        display:grid;
        grid-template-columns: 1fr 1fr 1fr;
        text-align: center;
        width:80%;
        margin:0 auto;
    }
    .bewoners,
    .winkeliers,
    .maatschappelijke-partners {
        width:47%;
        margin:0 auto;
    }
    .vooriedereen-titel,
    .vooriedereen-text {
        text-align: center;
        width:50%;
        margin:0 auto;
    }
    .vooriedereen {
        padding:3% 0;
    }
     h4 {
        padding:1% 0;
    }
    .vooriedereen-text {
        padding:0 0 1.5% 0;
    }

/* footer */
    .footer {
        background-color: #000000;
        padding-top:3%;
    }
    .heusdenhout-titel-footer {
        color:#ffffff;
        font-family:"Exo 2", sans-serif;
        font-optical-sizing: auto;
        font-weight:600;
        font-style:normal;
        font-size:1.125rem;
    }
    .heusdenhoutlogo-footer {
        width: 2.375rem;
        margin-right:0.8125rem;
    }
    .logo-text-footer {
        display: flex;
        justify-content: center;
    }
    .desktop-footer {
        display: flex;
        justify-content: center;
        gap:1%;
    }
    .footer-social-icoon {
        display: flex;
        justify-content: center;
        gap:1.1%;
        margin-bottom:3%;
    }
    .footer-icoon {
        scale:1.2;
    }
    .logo-text-footer {
        display: flex;
        align-items: center;
    }
}

@media screen and (max-width: 400px) {
    .desktop {
        display:none;
    }
    header {
        background-color: red;
        width: 100%;
        height: 4.375rem;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1.375rem;
    }

    .heusdenhoutlogo {
        height: 1.6875rem;
    }

    .zoekbalk {
        background-color: blue;
        height: 2.75rem;
        width: 70%;
        display: flex;
        align-items: center;
    }

    .zoekicoon {
        height: 1.3125rem;
        margin-left: 0.5625rem;
    }

    .tandwiel {
        margin-left: 88%;
        margin-top: 2.375rem;
    }

    /* navigatie menu mobiel */
    /* Style the navigation menu */
    .topnav {
        overflow: hidden;
        background-color: lightblue;
        position: fixed;
    }

    /* Hide the links inside the navigation menu (except for logo/home) */
    .topnav #myLinks {
        display: none;
        width: 100vw;
        height: 100vh;
        padding-top: 5rem;
    }

    /* Style navigation menu links */
    .topnav a {
        color: white;
        padding: 14px 16px;
        text-decoration: none;
        text-align: right;
        font-size: 17px;
        display: block;
    }

    /* Add a grey background color on mouse-over */
    .topnav a:hover {
        background-color: #ddd;
        color: black;
    }

    /* Style the active link (or home/logo) */
    .active {
        background-color: #04AA6D;
        color: white;
    }

    /* hamburgermenu */
    #nav {
        width: 1.343125rem;
        height: 45px;
        position: relative;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: .5s ease-in-out;
        -moz-transition: .5s ease-in-out;
        -o-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
        cursor: pointer;
    }

    #nav span {
        display: block;
        position: absolute;
        height: 0.135625rem;
        width: 1.343125rem;
        background: blue;
        border-radius: 9px;
        opacity: 1;
        left: 0;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: .25s ease-in-out;
        -moz-transition: .25s ease-in-out;
        -o-transition: .25s ease-in-out;
        transition: .25s ease-in-out;
    }

    #nav span:nth-child(1) {
        top: 0.95rem;
    }

    #nav span:nth-child(2),
    #nav span:nth-child(3) {
        top: 1.365rem;
    }

    #nav span:nth-child(4) {
        top: 1.7rem;
    }

    #nav.open span:nth-child(1) {
        top: 18px;
        width: 0%;
        left: 50%;
    }

    #nav.open span:nth-child(2) {
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    #nav.open span:nth-child(3) {
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    #nav.open span:nth-child(4) {
        top: 18px;
        width: 0%;
        left: 50%;
    }
/* home */
    .home {
        background-image: url(https://placehold.co/400x400);
        height:37.8125rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 1%
    }
    h1 {
        width: 80%;
        text-align: center;
        font-family:"Exo 2", sans-serif;
        font-optical-sizing: auto;
        font-weight:700;
        font-style:normal;
        font-size:2rem;
        color:#000000;
    }
    .home-text {
        width:80%;
        font-family:"Exo 2", sans-serif;
        font-optical-sizing: auto;
        font-weight:600;
        font-style:normal;
        font-size:1rem;
        text-align: center;
        color:#000000;
        
    }
    .wordlid-knop{
        font-family:"Exo 2", sans-serif;
        font-optical-sizing: auto;
        font-weight:700;
        font-style:normal;
        font-size:1.25rem;
        color:#000000;
        padding-left:3.875rem;
        padding-right:3.875rem;
        padding-top: 1.6875rem;
        padding-bottom: 1.6875rem;
        background-color: #ffffff;
        border: 2.5px solid green;
        box-sizing: border-box;
        margin-top:3.5%;
    }
/* missie & visie */
    .missie {
        background-color: #FFFFFF;
        display:flex;
        justify-content: center;
        align-items: center;
        gap:3%;
        padding:10% 0;
    }
    .visie {
        padding:10% 0;
        background-image: url(https://placehold.co/400x400);
    }
    .missie-container {
        width:80%;
    }
    .visie .grid{
        grid-template-columns: 1fr;
    }
    .missie-text,
    .visie-text,
    .vooriedereen-text {
        font-family:"Exo 2", sans-serif;
        font-optical-sizing: auto;
        font-weight:400;
        font-style:normal;
        font-size:1rem;        
    }
    .missie-titel,
    .visie-titel,
    .vooriedereen-titel {
        font-family:"Exo 2", sans-serif;
        font-optical-sizing: auto;
        font-weight:400;
        font-style:normal;
        font-size:2rem;
    }
    .groen {
        color:#A5AB46;
        font-weight:700;
    }
    .visie-container {
        width:80%;
        text-align: left;
        margin:0 auto;
        color:#FFFFFF;
    }
    h3 {
        padding:5% 0;
    }
    .grid,
    .gegevens {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .info-titel {
        font-family:"Exo 2", sans-serif;
        font-optical-sizing: auto;
        font-weight:700;
        font-style:normal;
        font-size:2rem;
        color:#FFFFFF;       
    }
    .info-onderwerp {
        font-family:"Exo 2", sans-serif;
        font-optical-sizing: auto;
        font-weight: 300;
        font-style:normal;
        font-size:1rem;
        color:#FFFFFF;
    }
    .gegevens {
        width: 80%;
        margin: 0 auto;
        padding:5% 0;
    }
/* vooriedereen */
    .vooriedereen {
        background-color: white;
        padding:10% 0;
    }
    h4 {
        width:80%;
        margin:0 auto;
        padding:0 0 3% 0;
    }
    .vooriedereen-text,
    .vooriedereengrid {
        width: 80%;
        margin:0 auto;
    }
    .onderwerp-titel {
        font-family:"Exo 2", sans-serif;
        font-optical-sizing: auto;
        font-weight:400;
        font-style:normal;
        font-size:1.5rem;
    }
    .onderwerp-text,
    .vooriedereen-text {
        font-family:"Exo 2", sans-serif;
        font-optical-sizing: auto;
        font-weight:400;
        font-style:normal;
        font-size:1rem;     
    }
    .onderwerp-titel,
    .onderwerp-text,
    .vooriedereen-text {
        color:#000000;
    }
    .bewoners,
    .winkeliers,
    .maatschappelijke-partners {
        padding:3% 0;
    }
    .onderwerp-titel {
        font-weight:700;       
    }
    


/* footer */
    .footer {
        background-color: green;
        display: flex;
        justify-content: space-between;
        font-family:"Exo 2", sans-serif;
        font-optical-sizing: auto;
        font-weight:600;
        font-style:normal;
        font-size:1.125rem;
        color:#ffffff;
        padding-top:2%;
        padding-bottom:5%;
    }

    .snelnavigeren {
        margin-left: 1.56rem;
        margin-top: 1.25rem;
    }

    .handigeinfo {
        margin-top: 15.5%;
        margin-right: 1.56rem;
        text-align: right;
    }

    .footer-titel {
        font-size: 1.25rem;
        font-weight: bold;
    }

    .footer-navigatie {
        font-size: 1rem;
        padding-top:1%;

    }
    .jaartal {
        padding-top:13%;
    }
    .footer-social-icoon {
       padding-top:5%;
    }
    .facebook {
        margin-right: 1.125rem;
    }
    
}