/*Terugkerende elementen op elke pagina*/

    /*header*/
        header
        { 
        display: flex;
        flex-wrap: nowrap;
        align-items: flex-end;
        justify-content: space-between;
        margin-bottom: 2rem;
        height: 6rem;
        margin: 2rem;
        }

        header img
        {
        width: 20%;
        justify-content: left;
        }

        h1 
        {
        font-family: 'Zen Loop', Arial, sans-serif;
        justify-content: left;
        font-size: 4rem;
        font-weight: bolder;
        color: rgb(63,74,22);
        padding-right: 1rem;
        text-transform: uppercase;
        }
        
        header nav
        {   
        justify-content: center;
        background-color: white ;
        display: inline;
        }

        header ul
        { 
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        }

        header li {padding:0.5rem;}

        header a {
        text-decoration: none; 
        color:rgb(185, 129, 80);
        font-family: 'Montserrat', Arial, sans-serif;
        font-size: 1rem;
        }

    /*footer*/

        footer
        {
        background-color: rgb(63,74,22);
        color:white;
        padding: 2rem;
        margin-top: 4rem;
        font-size: 0.5rem;
        line-height:1.5;
        font-family: Arial, Helvetica, sans-serif;
        }

        footer address
        {
        padding-top: 1rem;
        padding-bottom: 1rem;
        }

    footer h5
        {
        padding-bottom: 0.5rem;
        font-size: 0.8rem;
        }

        footer  a {
        color: white; 
        }

/*algemeen*/

    /*indeling*/
    main {margin:2rem;}

    /*tekst*/
        /*titels*/
        h2 
        {
        font-size: 1.3rem;
        color: rgb(185, 129, 80);
        padding-top: 1rem;
        padding-bottom: 1rem;
        font-family: 'Montserrat', Arial, Helvetica, sans-serif;
        font-weight: bold;
        }
        /*tekstblokken*/
        main 
        {line-height: 1.5rem;
        text-align:justify;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 0.7rem;
        }
        /*links*/
        a:visited { text-decoration: none; }
        a:hover{ text-decoration: underline; }
        a:active { text-decoration: underline; }
        main a {color: rgb(185, 129, 80);}

    /*media*/
        img
        {max-width: 100%;}

    /*formulier: contact en reservatiepagina*/
        form
        { 
        margin: 1rem 0rem 1rem 0rem;
        padding: 1rem;
        background-color: rgb(224, 204, 175);
        border: 0.1rem outset rgb(63,74,22);
        border-radius: 5px;
        max-width: 80%;
        }
        label, input 
        {
        display: block;
        }
        label, input, select, textarea 
        {
        width: 95%;
        box-sizing: border-box;
        }
        input
        {height: 20px;
        border-radius: 5px;
        border: 1px solid black;
        }

    /*Sectie/article gele achtergrond / Over ons*/
        .yellowbox
        {
        padding:3rem;
        margin:3rem;
        margin-bottom: 4rem;
        margin-top: 4rem;
        border: 0.1rem solid rgb(185, 129, 80);
        border-radius: 5px;
        background-color: rgb(224, 204, 175);  
        color: black;
        }

      


/*Index*/

        /*per section*/
        .index div + section
        {margin: 3rem 9rem 3rem 9rem;}

        .index div + section > p 
            {
            padding-top: 0.5rem;
            }

        .index section + section
        {
        padding: 3rem;
        margin: 4rem 3rem;
        border: 0.1rem solid rgb(185, 129, 80);
        border-radius: 5px;
        background-color: rgb(224, 204, 175);  
        color: black;
        }

        .index section + section >h3
        {padding-left: 1rem;
        padding-top:1rem}

        .index h4
        {padding-top:1rem}

        .index section + section > article
        {padding-left: 1rem}
    
        /*media*/
       .index div img 
        {
        width: 50%;
        }
        .index div 
        {
        display:flex;
        flex-wrap: wrap;
        }
        .index section img
         {
        width: 25%;
        display: block;
        margin: 2rem auto 0 auto;
        }

        /*text */
        .index section h3
            {font-weight: bold;}

        .index section h4
            {font-style: italic;}

/*Over onspagina*/

        /*Opmaak sections algemeen*/
        .overons section
        {margin: 2rem 4rem 2.5rem 4rem;}

        /*sectiongroen*/
        .teamsection
        {
        margin: 2rem 3rem 2rem 3rem;
        padding: 2rem;
        background-color: rgb(63,74,22);
        border: 0.1rem solid rgb(63,74,22);
        border-radius: 5px;
        }

         /*teamkaarten*/
        .teamgrid
        {display: grid;
        grid-template-columns: repeat(3, 1fr);
        } 

        .teamgrid article
        {
        margin: 1rem;
        padding: 1rem;
        display: flex; 
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        text-align:center;
        border: 0.1rem outset rgb(63,74,22);
        border-radius: 5px;
        background-color: rgb(224, 204, 175);
        }
       
        /*teamkaarten fotos*/
        .teamimg
         {
        margin:1rem 0rem 1rem 0rem;
        max-width: 100%;
        height: 16rem;
        object-fit: cover;
        border: 0.1rem solid rgb(63,74,22);
        } 

        /*tekst overons algemeen*/
        .overons section  p
        {padding-top: 0.5rem;}

        .overons section h3
        {
        font-weight:bold;
        color: rgb(63,74,22);
        padding-top: 1rem;
        font-size: 0.8rem; 
        width: fit-content;
        }

        /*Onze Waarden*/
        .overons li 
        {
        padding: 0.25rem 0rem 0.25rem 1rem
        }
        iframe {
         width: 100%;
         aspect-ratio: 16 / 9;
        height: auto;}
            
/*Contactpagina/*

        /*tabel openingsuren*/
        td , th
        {padding-right: 1rem;}

        /*layout contact*/

        .contact {
        display: grid;
        grid-template-columns: 1fr 1fr;
        row-gap: 1rem;
        column-gap: 2rem;
        margin-bottom: 4rem;
        align-items: stretch;
        }

        /*Contact pagina foto + google*/
        
        .contact img, iframe 
        {
        margin:1rem 0rem 1rem 0rem;
        width: 100%;
        max-height: 100%;
        }


/*Reservatiepagina*/
         /*Contact pagina foto*/
        .reservatieimg
        {
        max-width: 40%;
        margin: 1rem;
        }
        .reservatie section h3
        {
        font-weight:bold;
        color: rgb(63,74,22);
        padding-top: 1rem;
        font-size: 0.8rem
        }
        .reservatie section h4
            {padding: 0rem 0rem 0.5rem 0rem;
            font-weight: bold;}
        .reservatie section li
            {
            padding-left: 1rem;
            padding-bottom: 0.5rem;
            }
        .reservatie li > p
        {padding-top: 0;}



/*Blogpagina*/
         /*blogpagina*/
        .blogpagina
        {margin: 2rem;
        padding: 1rem;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;}

        .blogpagina >:first-child
        {
        max-width: 50%; 
        }

         .blogpost
        {
        margin: 2rem;
        padding: 1rem;
        max-width: 50%; 
        background-color: rgb(224, 204, 175);
        border: 0.1rem outset rgb(63,74,22);
        border-radius: 5px;
        }

        .blogimg
        {max-height: 30rem;
        width: 100%;
        object-fit:cover;}

        .blogpagina p 
        {
        padding-top: 0.5rem;
        }

        .blogpagina h3
        {
        font-weight:bold;
        color: rgb(63,74,22);
        padding-top: 1rem;
        font-size: 1rem
        }

        .blogpagina h4
        {
        font-weight:bold;
        font-style:italic  
        }

        .blogpagina h3 + p
        {font-style: italic;}


/*menupagina*/

        .menulayout
        {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        row-gap: 1rem;
        column-gap: 2rem;
        margin-bottom: 4rem;
        }

        .menulayout img
        {width: 100%;
        height: 12rem;
        object-fit: cover;
        margin: 1rem 0rem 1rem 0rem;}

        .menulayout h2
        {grid-column: 1/4}

        .menulayout h3
        {
        grid-column: 1/4;
        font-weight: bold;
        padding-top:1rem;}

        .menulayout h4
        {font-style: italic;
        padding-top:0.5rem;}