body, html {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #272522;
}

.container-area {
    background: white;
}

.container-area p:first-of-type {
    margin-top: -0.25rem;
}

.container-logo {
    grid-area: logo;
    text-align: right;
    padding-bottom: 1rem;
}

.container-logo img {
    max-width: 8rem;
}

.container-social {
    grid-area: social;
}

.container-social ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    height: 100%;
    position: relative;
}

.container-social ul li {
    display: inline-block;
    position: absolute;
    bottom: 0;
    height: 1.25rem;
    width: 1.25rem;
}

.container-social ul li a img {
    height: 100%;
    width: 100%;
}

.container-social ul li:nth-of-type(1) {
    right: 3.5rem;
}

.container-social ul li:nth-of-type(2) {
    right: 1.75rem;
}

.container-social ul li:nth-of-type(3) {
    right: 0;
}

.container-afbeelding {
    grid-area: afbeelding;
}

.container-nav {
    grid-area: nav;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

.container-nav a {
    display: block;
    width: 100%;
    text-align: right;
    color: #272522;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
}

.container-nav a:hover,
.container-social ul li a img:hover {
    opacity: 0.6;
}

.container-nav a:first-of-type {
    margin-top: -0.25rem;
}

.container-txt {
    grid-area: txt;
}

.container-nieuws {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1rem;
    padding-bottom: 3rem;
}

.container-projecten .grid-item-container-projecten, .container-nieuws .grid-item-container-nieuws {
    display: block;
}

.container-projecten .grid-item-container-projecten a, .container-nieuws .grid-item-container-nieuws a {
    color: #272522;
    text-decoration: none;
    text-align: center;
    display: block;
}

.container-projecten .grid-item-container-projecten a:hover, .container-nieuws .grid-item-container-nieuws a:hover {
    opacity: 0.6;
}

.container-paginatie {
    width: 100%;
    text-align: center;
    padding-top: 1rem;
    position: absolute;
    bottom: 0.5rem;
}

.paginatie-project-en-nieuws {
    /*
    border: 0.125rem solid #272522;
    border-radius: 0.25rem;
    background: #ffffff;
    padding: 0.25rem 0.5rem;
    margin-left: 0.5rem;
    color: #272522;
    text-decoration: none;
    font-weight: 600;
    */
    border: 0.125rem solid #272522;
    border-radius: 50%;
    background: #ffffff;
    padding: 0.125rem 0.5rem;
    margin-left: 0.5rem;
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    user-select: none;
}

.paginatie-project-en-nieuws:first-of-type {
    margin-left: 0;
}

.paginatie-project-en-nieuws:hover {
    /* opacity: 0.6; */
    color: #272522;
    background: #272522;
}

.container-footer {
    grid-area: footer;
    text-align: center;
    font-size: 85%;
    color: #5b5750;
}

.container-footer a {
    color: #5b5750;
}

.container-adresbalk {
    width: calc(100% - 2rem);
    padding: 1rem;
    text-align: center;
    position: fixed;
    bottom: 0;
    background-color: #ffffff;
}

.container {
    margin: 10vh auto 5vh;
    max-width: 75rem;
    padding: 1rem;
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas: 
        "logo logo social social social social social social social social social social"
        "nav nav afbeelding afbeelding afbeelding afbeelding afbeelding afbeelding afbeelding afbeelding afbeelding afbeelding"
        "nav nav txt txt txt txt txt txt txt txt txt txt"
        "footer footer footer footer footer footer footer footer footer footer footer footer";
}

.nieuws-afbeelding-container {
    height: 50vh;
    text-align: center;
}

.nieuws-afbeelding-container img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

/* CSS : Below 56.25rem - 900px */

@media (max-width: 56.25rem) {
    .container {
        margin: 10vh auto 5vh;
        max-width: 75rem;
        padding: 1rem;
        display: grid;
        grid-gap: 1rem;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-areas: 
            "logo logo logo social social social social social social social social social"
            "nav nav nav afbeelding afbeelding afbeelding afbeelding afbeelding afbeelding afbeelding afbeelding afbeelding"
            "nav nav nav txt txt txt txt txt txt txt txt txt"
            "footer footer footer footer footer footer footer footer footer footer footer footer";
    }
    .container-footer {
        padding-bottom: 1.25rem;
    }
}

/* CSS : Below 37.5rem - 600px */

@media (max-width: 37.5rem) {
    .container {
        margin: 5vh auto 5vh;
        max-width: 75rem;
        padding: 1rem;
        display: grid;
        grid-gap: 1rem;
        grid-template-columns: 1fr 1fr;
        grid-template-areas: 
            "logo social"
            "nav nav"
            "afbeelding afbeelding"
            "txt txt"
            "footer footer";
    }
                
    .container-logo {
        text-align: left;
        padding-bottom: 0rem;
    }
    
    .container-nav {
        flex-direction: row;
    }

    .container-nav a {
        text-align: center;
        display: block;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    
    .container-nav a:first-of-type {
        margin-top: 0;
    }
    
    .container-nieuws {
        grid-template-columns: 1fr;
    }
    
    .container-footer {
        padding-bottom: 2rem;
    }
}