*,
*::after,
*::before {
    box-sizing: border-box;
}

html {
    font-size: 19px;
}

@media (min-width: 768px) {
    html {
        font-size: 17px;
    }
}

@media (min-width: 1263px) {
    html {
        font-size: 16px;
    }
}

body {
    font-family: 'Merriweather', serif;
    background: #fff;
    margin: 0;
    color: #262626;
    line-height: 1.6;
}

img {
    width: 100%;
    display: block;
}


/* ===================
General layout
====================*/

.header {

}

.header-home {
    
}

.main {
    
    
}


/* ===================
Typography
====================*/

/* nav typography */

.site-title {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 1.875rem; /* 30px */
    line-height: 1.1;
    color: #fff;
    text-align: center;
    margin-top: 0.7em; /* 21px */
    margin-bottom: 0.7em;
}

.title-nav-link {
    text-decoration: none;
    color: inherit;
}

@media (min-width: 768px) {
    .site-title {
        margin-top: 1.25em; /* 45px */
        font-size: 2.25rem; /* 36px */
        font-weight: 700;
    }
}

.nav-link {
    text-decoration: none;
    color: #fff;
    margin-left: 1.5em;
    margin-right: 1.5em;
    padding: .3em 0 .1em;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 1.1rem;
    font-weight: 300;
}

.nav-link_current-page {
    border-bottom: 1px solid #fff;
}

.nav-link:hover,
.nav-link:focus {
    border-bottom: 1px solid #fff;
}


/* main section typography */

.project-title {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 900;
    font-size: 2.375rem; /* 38px */
    font-size: 2.1rem; /* 38px */

    line-height: 1.1;
}

@media (min-width: 768px) {
    .project-title {
        font-size: 3.125rem; /* 50px */
    }
}

@media (min-width: 1263px) {
    .project-title {
        font-size: 5rem; /* 80px */
        font-size: 4rem; /* 80px */
    }
}


.intro-text {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: 1.0625rem; /*17px*/
    line-height: 1.5;
}

@media (min-width: 768px) {
    .intro-text {
        font-size: 1.1875rem; /*19px*/
    }
}

@media (min-width: 1263px) {
    .intro-text {
        font-size: 1.5rem; /*24px*/
    }
}

.section-title {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 1.1875rem; /*19px*/
    font-weight: 800;
    margin: 0 0 19px 0;
    line-height: 1.3;
}

@media (min-width: 768px) {
    .section-title {
        font-size: 1.3125rem; /*21px*/
    }
}

@media (min-width: 1263px) {
    .section-title {
        font-size: 1.5625rem; /*25px*/
    }
}

.body-text {
    font-family: 'Merriweather', serif;
    font-weight: 400;
    font-size: .875rem; /*14px*/
    line-height: 1.7;
    color: #595959;
    margin: 0 0 30px 0;
}

.body-text:last-of-type {
    margin-bottom: 50px;
}

.body-text_last {
    margin-bottom: 50px;
}

@media (min-width: 768px) {
    .body-text {
        font-size: 1rem;
    }
}

@media (min-width: 1263px) {
    .body-text {
        font-size: 1.125rem; /*18px*/
    }
}

.figcaption {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 300;
    font-size: .9375rem; /*15px*/
    font-size: .8125rem; /*13px test voor mobiel*/
    padding: 0 0 0px; /*test voor mobiel*/

}

@media (min-width: 768px) {
    .figcaption {
        font-size: 17px;
        font-size: 1.125rem; /*18px*/
    }
}

@media (min-width: 1263px) {
    .figcaption {
        font-size: 1.1875rem; /*19px*/
    }
}

.img-description {
    color: #4f4f4f;
    margin-right: 5px; /*test voor mobiel*/
}

.img-title {
    color: #a6a6a6;
}

.img-quote {
    color: #E6394E;
    font-family: 'Merriweather', serif;
    font-weight: 700;
    font-size: 1.125rem; /*18px*/
    font-size: .875rem; /*14px*/
    margin: 20px 0 10px; /*mobiel*/
}

@media (min-width: 768px) {
    .img-quote {
        font-size: 1.25rem; /*20px*/
    }
}

@media (min-width: 1263px) {
    .img-quote {
        font-size: 1.5625rem; /*25px*/
    }
}

.title-next-project {
    font-family: 'Nunito Sans', sans-serif;
    color: #fff;
    font-size: 1.5625rem; /*25px*/
    font-weight: 700px;
}



/* ===================
bronnen page layout
====================*/


/* ---------  small screens -------------- */

/* header */

.header-bronnen {
    background-size: cover;
    background-color: #ae0000;
    background-position: center bottom;
    height: calc(100px + 30vw);
    max-height: 500px;
}

.header-bronnen_steengoed {
    background-image: url(../img/steengoed-banner.jpg);
}

.header-bronnen_pygmodys {
    background-image: url(../img/pygmodys-banner.jpg);
}

.header-bronnen_pygmalion {
    background-image: url(../img/pygmalions-kroondomein-banner.jpg);
}

.section_header {
    display: grid;
    padding-top: 0;
    grid-template-columns: max-content;
    justify-content: center;
    background-color: #b00000;
}

@media (min-width: 400px) {
    .section_header {
    background-color: transparent;
    }
}

@media (min-width: 763px) {
    .section_header {
        grid-template-columns:
        1fr
        30vw
        60vw 
        1fr
    }
}

.title-bg {
    padding: 0 0 2em;
    background-color: #b00000;
}

@media (min-width: 400px) {
    .title-bg {
        padding: 0 4em 2em;
    }
}

@media (min-width: 763px) {
    .title-bg {
        grid-column: 3/4;
        justify-self: start;
        display: inline-block;
        padding: 0 50px 50px;
    }
}

.nav-container {
    text-align: center;
}





/* main */

.main {
    margin-bottom: 30px;
}

.section_color1 {
    background: #FBEBFC
}

.section_color2 {
    background: #FFFCF1;
}

.section_color3 {
    background: #E1EBEE;
}

.section {
    display: grid;
    grid-template-columns: 
        1.25em
        1fr
        1.25em;
    padding: 85px 0 0px;
}



.section_after-intro,
.section_intro {
    padding-top: 40px;
}

.project-title,
.intro-text,
.section-title,
.body-text {
    grid-column: 2/3;
}

.figure {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: 
        1.25em
        1fr
        1.25em;
}

.figure_other-projects {
    margin-bottom: 70px;
}

.figcaption {
    order: 1;
    grid-column: 2/3;
    width: 70%;
    border-bottom: px solid #aeaeae;
    padding-top: 10px;
    padding-bottom: 15px;
}

.figcaption::before {
    content:'';
    width: 100%;
    height: 1px;
    display: block;
    background: #000;
    margin-bottom: 15px;
}

.img-sample {
    order: 2;
    grid-column: 1/-1;
}

.img-together {
    grid-column: 1/-1;
    display: flex;
    align-items: flex-start;
    order: 2;

}

.img-left {
    width: 50%;
}

.img-right {
    width: 50%;
}

.img_one-third {
    width: 33%;
}

.img_two-third {
   width: 33%; 
}

/* between small and medium */

@media (min-width: 600px) {
    .section,
    .figure {
        grid-template-columns: 
            1fr
            580px
            1fr;
    }

}




/* medium screens */

@media (min-width: 763px) {
    .section_header,
    .section,
    .figure {
        grid-template-columns:
        1fr
        30vw
        60vw 
        1fr
    }
    
    .title-bg,
    .project-title,
    .intro-text,
    .section-title,
    .body-text {
        grid-column: 3/4;
    }

    .figcaption {
        grid-column: 3/4;
    }

}

/* big screens */

@media (min-width: 1000px) {

    .section_header,
    .section {
        grid-template-columns:
        1fr
        30vw
        60vw
        1fr
    }
    
    .project-title,
    .intro-text,
    .section-title,
    .body-text {
        max-width: 800px;
    }

    .figure {
        grid-column: 1/-1;
        display: grid;
        grid-template-columns: 1fr 30vw 60vw 1fr;
    }

    .img-sample {
        order: 2;
        grid-column: 3/5;
    }

    .img-together {
        order: 2;
        grid-column: 3/5;
        display: flex;
    }

    .img-full {
        width: 100%;
    }

    .img-left {
        margin-right: 20px;
        width: 44%;
    }

    .img-right {
        width: 44%;
    }

    .img_one-third {
        width: 28%;
        margin-right: 20px;
    }

    .img_last {
        margin-right: 0;
    }

    .figcaption {
        order: 1;
        grid-column: 2/3;
        width: 20vw;
        border-bottom: 1px solid #aeaeae;
        align-self: start;
    }
}

/* more-projects */


.section_more-projects {
    display: flex;
    flex-direction: column;
    background: #222;
    padding:20px;
}

.project-next {
    position: relative;
    xdisplay: flex;
    margin-bottom: 20px;

}

.title-next-project {
    position: absolute;
    top: 0%;
    left: 20px;

}

.next-project-link {
    color: inherit;
    text-decoration: none;
}

@media (min-width: 763px) {
    .section_more-projects {
        flex-direction: row;
    }

    .project-next {
        width: 50%;
    }

    .project-next_first {
        margin-right: 10px;
    }

    .project-next_last {
        margin-left: 10px;
    }
}