*, html { padding: 0; margin: 0; box-sizing: border-box; font-family: "Roboto", sans-serif; }

:root {
    --sloganBreedte: 9em;
    --footerHoogte: 3em;
    --headerHoogte: 3.4em;
    --tussenruimte: 4svh;
    --miniruimte: calc(var(--tussenruimte) / 4);
    --opleidingenHoogte: ;
    --addressHoogte: ;
    --mainHoogteMax: calc(100svh - var(--headerHoogte) - var(--footerHoogte) - 3 * var(--tussenruimte) - var(--miniruimte));
    --mainHoogte: ;

    --rood:#ED1B24;
    --wit: #FFFBF9;
    --zwart: rgb(50, 50, 50);
}

a {color: var(--zwart);}
b {font-weight: 400; color: var(--zwart);}
p, ul { color: var(--zwart);}
h3 { color: var(--rood); margin-bottom: var(--miniruimte); }
h4 { color: var(--zwart); margin: calc(var(--tussenruimte) / 2) 0 var(--miniruimte) 0; font-weight: 400;}

@media only screen and (max-width: 600px)  { html { font-size: 17px; }}

body { background-color: var(--wit);}

body {height: 100svh; width: 100vw; display: flex; justify-content: center; overflow-x: hidden !important; font-weight: 300 !important;}
body div.pagewrapper { height: 100svh; width: 90vw; position: relative;}

header { width: 100%; height: var(--headerHoogte); margin: var(--tussenruimte) 0;}
header a { width: 100%; height: var(--headerHoogte); display: flex; justify-content: space-between; align-items: center; color: black; text-decoration: none;}
header a h1 { font-size: 1.5em; color: var(--rood); font-weight: 500;}
header a h2 { font-size: 1em; line-height: 1.3; font-weight: 300; color: var(--zwart);}
header a h2 b { color: var(--rood); font-weight: 700;}
header a img { height: var(--headerHoogte); }

address { border: 0.1em dotted var(--zwart); padding: var(--miniruimte); text-align: center; margin-bottom: var(--tussenruimte); }

section.afspraak, section.terug {height: 2em; display: flex; flex-direction: column; justify-content: center; align-items: center; margin-bottom: var(--tussenruimte);}
section a { font-weight: 400;}
section.afspraak a { padding: 0.5em; background-color: rgb(59, 192, 59); color: var(--wit); line-height: 1em; text-decoration: none; }

figure { width: 100%; object-fit: cover; margin-bottom: var(--tussenruimte);}
figure img { width: 100% ;}
figure.desktop {display: none;}

.nevenpagina main { min-height: calc(100svh - var(--headerHoogte) - var(--footerHoogte) - 2em - 3*var(--tussenruimte) - 5vw); width: 100%; justify-content: center;}

footer { height: var(--footerHoogte); display: flex; justify-content: space-between; align-items: center; font-style: italic;}

main section { margin-bottom: var(--tussenruimte);}

ul { margin: var(--miniruimte) 0 ; list-style-position: outside; padding-left: 0.6em; list-style-type: "• "; }
.opleidingen ul { margin-bottom: 0;}
p, ul { line-height: 1.4em;}

.nevenpagina main p { margin-bottom: var(--miniruimte);}
.nevenpagina main h3 { color: var(--zwart); }

form { width: 100%; }
form div { width: 100%; display: flex; flex-direction: column; }
form div input, form div textarea { border-radius: 0; border: 1px solid var(--zwart); margin: var(--miniruimte) 0 calc(var(--miniruimte) * 2) 0; font-size: 1em;}
form div input:not(input[type="submit"]) { height: 1.6em;}
form div input[type="checkbox"] {width: 1.6em;}
/* form div#patient {flex-direction: row; justify-content: space-between; align-items: center;} */
form div textarea { height: 6.4em;}
form div#verzenden { width: 100%; display: flex; align-items: center; margin: var(--miniruimte) 0; }
form div#verzenden input { width: fit-content; padding: var(--miniruimte) calc(var(--miniruimte) * 2); background-color: var(--rood); color: var(--wit); border: none; font-size: 1em;}
div.error {color: #ED1B24; width: 700;}


main.patientencheck {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

main.patientencheck div {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

main.patientencheck div p {
    margin-top: 1em;
    text-align: center;
}

main.patientencheck div a {
    padding: 0.5em; background-color: rgb(59, 192, 59); color: var(--wit); line-height: 1em; text-decoration: none; font-weight: 400; width: 60%; text-align: center;
}

.vet {
    font-weight: 400;
}

.ipad {display: none;}

/*VOOR DEN IPAD*/
@media only screen and (min-width: 650px) and (orientation: portrait), only screen and (min-width: 800px) and (orientation:landscape) {
    /* body .pagewrapper {line-height: 0;} */
    header {display: inline-flex; justify-content: center; width: 48%; margin-right: 3.3%; box-sizing: border-box; vertical-align: top; margin-top: calc(2 * var(--tussenruimte)); }
    header a {width: 100%;}

    address {display: inline-flex; flex-direction: column; justify-content: center; box-sizing: border-box; vertical-align: top; align-items: center; height: calc(var(--headerHoogte) + 2 * var(--tussenruimte));     width: 48%;
        margin-left: 0; margin-bottom: 0; margin-top: var(--tussenruimte);}

        .afspraak, .terug {
            margin-top: var(--tussenruimte);
        }

        .afspraak a {width: 100%; text-align: center;}

    .opleidingen {grid-area: opleidingen; height: min-content;}
    .visie {grid-area: visie;}
    .mobile {grid-area: figure; height: var(--opleidingenHoogte);}
    figure img {height: 100%; width: 100%; object-fit: cover;}
    .betekenen {grid-area: betekenen;}

    main:not(.nevenpagina main) {
        min-height: calc(100svh - var(--headerHoogte) - var(--footerHoogte) - 2em - 5 * var(--tussenruimte));
        display: grid; grid-template-columns: 0.5fr 1fr; grid-template-rows: min-content min-content min-content min-content; gap: var(--tussenruimte);
        grid-template-areas: 
        "visie visie"
        "betekenen betekenen"
        "figure opleidingen"
        "dankzij dankzij";
    }

    main section { margin-bottom: 0;}
    figure {margin-bottom: 0}
    .nevenpagina main {display: flex; flex-direction: column; align-items: center; 
        min-height: calc(100svh - var(--headerHoogte) - var(--footerHoogte) - 2em - 6 * var(--tussenruimte));}
    .ipad {display: inline-flex;}
    form { width: 100%; max-width: 600px;}
    main.privacyverklaring {display: block;}
    .dankzij {grid-area: dankzij;}
    footer {margin-top: var(--tussenruimte);}
}

@media only screen and (min-width: 1200px) and (orientation:landscape) and (min-height: 690px) and (aspect-ratio >= 15/12) {
    html {
        font-size: 13px;
    }

    header { position: absolute; top: 0; left: 0;}
    .afspraak, .terug { position: absolute; top: 0; left: 100%; transform: translateX(-100%);}
    footer { position: absolute; bottom: 0; left: 0;}

    header {
        width: calc((100% / 3) - 0.5 * var(--tussenruimte));
        height: 6em;
        margin: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    section.afspraak, section.terug {
        width: max-content;
        margin: 0;
        height: 6em;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    footer {
        width: 100%;
        height: 6em;
        margin: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    address {
        margin: 0;
        width: 100%;
        height: auto;
    }

    body {

        justify-content: center;
        overflow-y:hidden;
    }

    body div.pagewrapper {
        display: grid; grid-template-columns: 0.5fr 1fr; gap: var(--tussenruimte);
        align-content: center;
        grid-template-areas: 
        "address main"
        "figure main";
        margin: var(--tussenruimte) 0;
        height: calc(100svh - 2 * var(--tussenruimte));
    }

    address {
        grid-area: address;
    }

    figure.mobile {
        display: none;
    }

    figure.desktop {
        display: block;
        grid-area: figure;
        height: calc(var(--mainHoogte) - var(--headerHoogte) - 0 * var(--tussenruimte));
    }

    main:not(.nevenpagina main) {
        row-gap: var(--tussenruimte);
        grid-area: main;
        height: min-content;
        min-height: auto;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .visie {
        height: min-content;
    }

    .opleidingen {
        width: 39%;
        height: min-content;
    }

    .betekenen {
        width: 54%;
        height: min-content;
    }

    .nevenpagina address {
        display: none;
    }

    body div.nevenpagina {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    body div.nevenpagina main:not(main.privacyverklaring) {
        width: calc(100% / 3 - 1.5 * var(--tussenruimte));
    }

    form div#verzenden input { margin-bottom: 0;}


    main.privacyverklaring {
        width: 100%;
        height: fit-content;
        columns: 2;
        margin: 0 auto;
        min-height: auto;
    }
 }

 @media only screen and (min-width: 1500px) and (orientation:landscape) and (min-height: 710px) and (aspect-ratio >= 16/12) {
    html {
        font-size: 17px;
    }

    body div.pagewrapper {
        width: 75vw;
        min-width: 1400px;
        
    }

    header, footer, section.afspraak {
        height: 6em;
    }
}