@media all {
    
    
    /*
     * GENERIC
     *
     */
    
    body {
        
        text-align:     center;
        font-size:      10px;
        
        margin:         0;
        padding:        0;
        
    }
    
    body * {
        
        text-align:     left;
        
    }
    
    /*body * { outline: 1px solid red;} /**/
    
    
    /*
     * HEADER
     *
     */
    
    header {
        
        display:        inline-block;
        text-align:     left;
        
        width:          900px;
        height:         130px;
        
    }
    
    header h1,
    header nav {
        
        float:          left;
        clear:          none;
        
    }
    
    header h1 {
        
        display:        inline-block;
        
        height:         130px;
        width:          450px;
        
        margin:         0;
        padding:        0;
        
    }
    
    header h1 img {
        
        margin:         0;
        padding:        0;
        
    }
    
    header nav {
        
        display:        inline-block;
        
        width:          450px;
        height:         100px;
        
        margin:         0;
        padding:        30px 0 0 0;
        
        overflow:       hidden;
        
    }
    
    header nav ul,
    header nav ul li {
        
        margin:         0;
        padding:        0;
        
        list-style-type: none;
        
    }
    
    header nav ul li {
        
        display:        inline-block;
        width:          210px;
        height:         25px;
        
        color:          #ccc;
        
    }
    
    header nav ul li::before {
        
        content:        "•";
        display:        inline-block;
        width:          20px;
        
        color:          inherit;
        font:           bold 1.8em/25px "Gill Sans", sans-serif;
        
    }
    
    header nav ul li a,
    header nav ul li a:link,
    header nav ul li a:visited,
    header nav ul li a:hover,
    header nav ul li a:active {
        
        display:        inline-block;
        width:          190px;
        height:         25px;
        
        text-decoration: none;
        color:          inherit;
        font:           bold 1.8em/25px "Gill Sans", sans-serif;
        
        white-space:    nowrap;
        
    }
    
    
    #index header nav ul li {
        
        color:          #000;
        
    }
    
    #hoe header nav ul .hoe-we-werken,
    #wie header nav ul .wie-we-zijn,
    #wat header nav ul .wat-we-doen,
    #projecten header nav ul .onze-projecten,
    #partners header nav ul .onze-partners {
        
        color:          #000;
        
    }
    
    
    /*
     * FOOTER
     *
     */
    
    footer {
        
        position:       absolute;
        top:            130px;
        
        width:          100%;
        height:         30px;
        
        text-align:     center;
        background:     #ffdd53;
        
    }
    
    footer p#contact {
        
        display:        inline-block;
        
        width:          900px;
        
        margin:         0;
        padding:        0;
        
    }
    
    footer p#contact span {
        
        position:       relative;
        display:        inline;
        
        margin:         0 0 0 40px;
        padding:        0;
        
        font:           bold 1.35em/28px "Gill Sans", sans-serif;
        
    }
    
    footer p#contact span::before {
        
        content:        "";
        position:       absolute;
        
        left:          -35px;
        top:           -7px;
        
        width:          30px;
        height:         30px;
        
        vertical-align: middle;
        
        background-size: 20px 14px;
        background-position: 50% 50%;
        background-repeat: no-repeat;
        
    }
    
    footer p#contact span.email {
        
        margin-left:    70px;
        
    }
    
    footer p#contact span.phone::before {
        
        background-image: url("/images/phone.png");
        
    }
    
    footer p#contact span.email::before {
        
        background-image: url("/images/email.png");
        
    }
    
    
    /*
     * CONTENT
     *
     */
    
    article {
        
        position:       absolute;
        top:            160px;
        bottom:         0;
        left:           0;
        right:          0;
        
        display:        inline-block;
        text-align:     left;
        
        
    }
    
    article a,
    article a:link,
    article a:hover,
    article a:active,
    article a:visited {
        
        font:           bold 15px "Gill Sans", sans-serif;
        color:          black;
        text-decoration: underline;
        
    }
    
    
    /*
     * Home
     *
     */
    
    #index article #image {
        
        background-image: url("/images/front.jpg");
        background-size: cover;
        background-position: 50% 70%;
        background-repeat: no-repeat;
        
        position:       absolute;
        top:            0;
        left:           0;
        width:          100%;
        height:         100%;
        
        margin:         0;
        padding:        0;
        
    }
    
    #index article #controls {
        
        position:       absolute;
        bottom:         30px;
        left:           30px;
        
        list-style-type: none;
        margin:         0;
        padding:        7px;
        border-radius:  7px;
        text-align:     left;
        
        background:     white;
        
    }
    
    #index article #controls li {
        
        display:        inline-block;
        width:          auto;
        float:          none;
        clear:          none;
        height:         20px;
        vertical-align: middle;
        
        font:           bold 17px/20px "Gill Sans", sans-serif;
        color:          #999;
        
    }
    
    #index article #controls li img {
        
        border:         none;
        height:         20px;
        cursor:         pointer;
        
    }
    
    
    /*
     * Wat we doen
     * Wie we zijn
     * Hoe we werken
     *
     */
    
    #wat article,
    #wie article,
    #hoe article {
        
        position:       static;
        width:          900px;
        text-align:     center;
        background:     white;
        
    }
    
    #wat article section,
    #wie article section,
    #hoe article section {
        
        position:       static;
        display:        inline-block;
        vertical-align: top;
        width:          445px;
        margin:         60px 0 0 0;
        padding-bottom: 120px;
        
    }
    
    #wat article section.full-width,
    #wie article section.full-width,
    #hoe article section.full-width {
        
        margin-top:    -100px;
        width:          900px;
        
    }
    
    #wat article section img,
    #wie article section img,
    #hoe article section img {
        
        width:          400px;
        height:         600px;
        margin:         0 0 0 10px;
        background:     grey;
        
    }
    
    #wat article section.full-width img,
    #wie article section.full-width img,
    #hoe article section.full-width img {
        
        width:          100%;
        height:         auto;
        margin:         0 0 0 0;
        
    }
    
    #wat article section .two-column,
    #wie article section .two-column,
    #hoe article section .two-column {
        
        column-count: 2;
        column-gap: 50px;
        -webkit-column-count: 2;
        -webkit-column-gap: 50px;
        -moz-column-count: 2;
        -moz-column-gap: 50px;
        
        
    }
    
    #hoe article section .two-column div {
        
        break-inside:   avoid-column;
        page-break-inside: avoid;
        -webkit-column-break-inside: avoid;
        -moz-page-break-inside: avoid;
        -moz-column-break-inside: avoid;
        
    }
    
    #wat article section p,
    #wie article section p,
    #hoe article section p {
        
        margin:         0;
        padding:        0;
        
        font:           bold 14px/25px "Gill Sans", sans-serif;
        padding-bottom: 1em;
        color:          black;
        
    }
    
    #wat article section h1,
    #wie article section h1,
    #hoe article section h1 {
        
        font:           bold 25px/25px "Gill Sans", sans-serif;
        color:          #ccc;
        
    }
    
    #wat article section p,
    #wie article section p,
    #wat article section.full-width p,
    #wie article section.full-width p,
    #hoe article section.full-width p {
        
        font:           normal 17px/25px "Gill Sans", sans-serif;
        
    }
    
    #wat article section p em,
    #wie article section p em,
    #hoe article section p em {
        
        font-style:     normal;
        font-weight:    bold;
        color:          #af141e;
        
    }
    
    
    /*
     * Onze projecten
     * Onze partners
     *
     */
    
    #partners article,
    #projecten article {
        
        position:       static;
        display:        inline-block;
        background:     white;
        width:          900px;
        height:         2000px;
        
    }
    
    #partners article section,
    #projecten article section {
        
        position:       static;
        display:        inline-block;
        vertical-align: top;
        text-align:     center;
        width:          445px;
        margin:         60px 0 0 0;
        
    }
    
    #partners article section #image,
    #projecten article section #image {
        
        width:          400px;
        height:         600px;
        margin:         0 0 0 10px;
        background-size: cover;
        
    }
    
    #partners article section #controls,
    #projecten article section #controls {
        
        position:       relative;
        text-align:     center;
        margin-top:     10px;
        
    }
    
    #partners article section #controls li,
    #projecten article section #controls li {
        
        display:        inline-block;
        width:          auto;
        float:          none;
        clear:          none;
        height:         25px;
        vertical-align: middle;
        
        font:           bold 20px/25px "Gill Sans", sans-serif;
        color:          #999;
        
    }
    
    #partners article section #controls li#at,
    #projecten article section #controls li#at {
        
        margin-left:    10px;
        
    }
    
    #partners article section #controls li#of,
    #projecten article section #controls li#of {
        
        margin-right:   10px;
        
    }
    
    #partners article section #controls li#toggle,
    #projecten article section #controls li#toggle {
        
        position:       absolute;
        right:          30px;
        top:            0;
        
    }
    
    #partners article section #controls li img,
    #projecten article section #controls li img {
        
        border:         none;
        height:         25px;
        cursor:         pointer;
        
    }
    
    #partners article section ul,
    #projecten article section ul {
        
        list-style-type: none;
        margin:         0;
        padding:        0;
        width:          100%;
        text-align:     left;
        
    }
    
    #partners article section ul li,
    #projecten article section ul li {
        
        display:        block;
        float:          left;
        clear:          left;
        margin:         0 0 20px;
        padding:        0;
        width:          100%;
        
    }
    
    #partners article section ul li a,
    #projecten article section ul li a {
        
        text-decoration: none;
        
    }
    
    #partners article section#links ul li {
        
        margin-left:    10px;
        
    }
    
    #partners article section#links ul li a[href]:hover {
        
        text-decoration: underline;
        
    }
    
    #partners article section ul li a img,
    #projecten article section ul li a img {
        
        display:        inline-block;
        border:         none;
        width:          100px;
        margin:         0 20px 0 0;
        padding:        0;
        float:          left;
        
    }
    
    #partners article section ul li a h2,
    #partners article section ul li a p,
    #projecten article section ul li a h2,
    #projecten article section ul li a p {
        
        font:           bold 15px "Gill Sans", sans-serif;
        color:          black;
        
    }
    
    #partners article section ul li a h2,
    #projecten article section ul li a h2 {
        
        display:        block;
        margin:         0 0 20px 0;
        text-decoration: underline;
        
    }
    
    #partners article section ul li a p,
    #projecten article section ul li a p {
        
        display:        block;
        margin:         0;
        padding:        0;
        font:           italic 15px "Gill Sans", sans-serif;
        text-decoration: none;
        
    }
    
    #partners article section > a,
    #projecten article section > a {
        
        display:        block;
        margin-bottom:  30px;
        
    }
    
    #partners article section p,
    #projecten article section p {
        
        font:           15px/20px "Gill Sans", sans-serif;
        margin:         0;
        
    }
    
    #partners article section p + p,
    #projecten article section p + p {
        
        text-indent:    30px;
        margin-top:     5px;
        
    }
    
    #partners article section p.separate,
    #projecten article section p.separate {
        
        margin-top:     25px;
        text-indent:    0;
        
    }
    
    #partners article section p.separate:first-child,
    #projecten article section p.separate:first-child {
        
        margin-top:     0;
        
    }
    
    #partners article section p em,
    #projecten article section p em {
        
        font-style:     italic;
        font-weight:    bold;
        border-bottom:  2px solid #af141e;
        
    }
    
    #partners article section > img,
    #projecten article section > img {
        
        width:          80%;
        margin:         25px 0 0;
        
    }
    
    #partners article section blockquote,
    #projecten article section blockquote {
        
        display:        inline-block;
        width:          350px;
        text-align:     center;
        font:           bold 16px/20px "Gill Sans", sans-serif;
        margin:         35px;
        
    }
    
    
    /*
     * Onze partners
     *
     */
    
    #partners article {
        
        position:       static;
        display:        inline-block;
        background:     white;
        width:          900px;
        height:         2000px;
        
    }
    
}