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-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-afbeelding {
    grid-area: afbeelding;
}

.project-afbeelding-slider {
    width: 100%;
    height: 50vh;
    position: relative;
}

.project-afbeelding-item {
    width: 100%;
    height: 100%;
    object-fit: contain;
    //object-fit: cover;
    display: none;
}

.project-afbeelding-select {
    padding-bottom: 1rem;
    text-align: center;
}

.kies-afbeelding {
    cursor: pointer;
    height: 12px;
    width: 12px;
    margin: 15px 4px 0;
    background-color: #fff;
    border: 1px solid #333333;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
    user-select: none;
}

.active, .kies-afbeelding:hover {
  background-color: #333333;
}

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

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

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

.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 data data txt txt txt txt txt txt txt txt"
        "footer footer footer footer footer footer footer footer footer footer footer footer";
}

/* 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"
            "nav nav nav data data data data data data data data data"
            "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"
            "data data"
            "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;
    }
    
    .project-afbeelding-slider {
        height: 40vh;
    }
    
    .container-footer {
        padding-bottom: 2rem;
    }
}