@media screen and (max-width: 599px){
        /*
    Blauw: 
    color: #3a92ca;
    background-color: #3a92ca;

    Grijs: 
    color: #333333;
    background-color: #333333;
    */
    *{
        margin: 0;
        padding: 0;
        outline: 0;
        border: 0; 
    }

    html{
        height: 100%;
    }

    body{
        font-family: 'Varela', sans-serif;
        color: #222222;
        background-color: #FFF;
        height: 100%;
    }

    p{
        line-height: 25px;
        margin: 20px 0;
        font-size: 15px;
    }

    .contentProject p{
        /*width: 600px;   */
    }

    .line{
        border: 3px solid #3a92ca;
        float: right;
        width: 100px;
        margin-top: 30px;
    }

    h2{
        color: #333333;
        font-size: 33px;
        margin: 20px 0;
    }

    h2 span{
        color: #d7d7d7;
        font-size: 45px;
    }

    h3{
        color: #3a92ca;
        color: #333;
        font-size: 18px;
        margin: 15px 0 5px 0;
    }

    .clear{
        clear: both;
    }

    span{
        color: #3a92ca;
    }

    h1{
        font-size: 35px;
    }

    a{
        text-decoration: none;
        color: #333;
    }

    a:hover{
       color: #3a92ca;     
    }

    #header a{
        color: #333;   
    }

    #header a.selected{
        color: #3a92ca;
    }

    #header{
        padding: 50px 0 30px 0;
        margin-bottom: 50px;
    }

    #header ul{
        list-style-type: none;
        position: absolute;
        top: 120px;
        right: 50%;
        margin-right: -150px;
        min-width: 300px;
    }

    #header ul li a{
        color: #333;
        float: right;
        display: block;
        margin-left: 20px;
        font-size: 16px;
    }

    #header ul li a:hover{
        color: #3a92ca;
    }

    #logoStart{
        color: #FFF;
        position: absolute;
        bottom: 200px;
        left: 100px;
    }

    #logoT{
        text-align: right;
        margin-top: 50px;
    }

    #logo{
        text-align: center;
    }

    #containerStart{
        width: 100%;
        position: relative;
        margin: 0px auto;
        height: 100%;
        display: block;
    }

    #container{
        width: 100%;
        position: relative;
        margin: 0px auto;
        padding-bottom: 50px;
    }

    .picturesBig{
        position: relative;
        width: 100%;
        overflow: hidden;
    }

    #contactInfo{
        border: 1px solid #CCC;
        position: absolute;
        bottom: -1px;
        right: -1px;
        background-color: #FFF;
        padding: 20px 30px;
    }

    #slideshow img{
       width: 100%;
    }

    #project{
        width: 100%;
        text-align: center;
    }

    #project img{
        
        max-height: 300px;
        max-width: 100%;
    }

    #rowExtras{
        margin-top: 30px;
        margin-right: 30px;
        margin-left: 30px;   
    }

    #content h2{
        margin-left: 30px;
        margin-right: 30px;   
    }

    #rowExtras img{
        cursor: pointer;
        position: relative;
        z-index: 1;
        max-height: 60px;
        margin-right: 4px;
        opacity: 0.8;
        filter: url("data:image/svg+xml;utf8,<svg xmlns=\'https://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
        filter: gray; /* IE6-9 */
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        transition: all 0.5s;
    }

    #rowExtras img:hover, #rowExtras img.selected{
        z-index: 5;
        box-shadow: 0 0 5px 2px #666;
        opacity: 1;
        filter: url("data:image/svg+xml;utf8,<svg xmlns=\'https://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
        -webkit-filter: grayscale(0%);
        -moz-filter: grayscale(0%);
        -ms-filter: grayscale(0%);
        -o-filter: grayscale(0%);
        transition: all 0.5s;
    }

    #projects{
        border: 1px solid #CCC;
        overflow: hidden;
        position: relative;
    }

    #projects a img{
        display: block;
        position: relative;
        float: left;
        width: 50%;
        z-index: 1;
        
        transition: all 0.5s;
    }

    #collect1:before{
        content: "woningen";
        display: block;
        border-bottom: 1px solid #CCC;
        padding: 10px 20px;
    }
     #collect2:before{
        content: "appartementen";
        display: block;
        clear: both;
        border-bottom: 1px solid #CCC;
        padding: 10px 20px;
    }
     #collect3:before{
        content: "interieur";
        display: block;
        border-bottom: 1px solid #CCC;
        clear: both;
        padding: 10px 20px;
    }
     #collect4:before{
        content: "diverse";
        display: block;
        clear: both;
        border-bottom: 1px solid #CCC;
        padding: 10px 20px;
    }

    #projects a img:hover{
        z-index: 5;
        box-shadow: 0 0 5px 2px #666;
        opacity: 1;
        filter: url("data:image/svg+xml;utf8,<svg xmlns=\'https://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
        -webkit-filter: grayscale(0%);
        -moz-filter: grayscale(0%);
        -ms-filter: grayscale(0%);
        -o-filter: grayscale(0%);
        transition: all 0.5s;
    }

    iframe{
        height: 400px;
    }

    .jump{
        margin-left: 20px;
    }

    #projects ul{
        display: none;
        list-style-type: none;
        border-bottom: 1px solid #CCC;
        position: relative; 
        z-index: 4000; 
        background-color: #FFF;
    }

    #projects ul li p{
        border-right: 1px solid #CCC;
        padding: 10px 15px;
        display: block;
        float: left;
        line-height: 30px;
        width: 216px;
        color: #333;
    }

    #projects ul li a:hover, #projects ul li a.selected{
        color: #3a92ca;
    }

    .contentProject p{
        margin-left: 30px;
    }

    #buroC{
        border-top: 1px solid #CCC;
        position: relative;
        width: 96%;
        padding: 2%;
        overflow: hidden;    
    }

    .teamLeft{
        float: left;
        width: 100%;
        margin-right: 0px;
        font-size: 15px;
        margin-top: 0px;
    }

    .teamLeft img{
        display: block;
    }

    .teamLeft div{
        padding: 10px 15px 0px 15px;
        border: 1px solid #CCC;
        border-left: 0px solid #CCC;
        border-top: 0px solid #CCC;
    }

    .teamLeft p{
        margin: 20px 0;
        font-size: 13px;
    }

    .listPro{
        width: 100%;
        position: static;
        top: 0px;
        height: 534px;
    }

    .listPro div{
    }

    #list1{
        left: 0;    
    }
    #list2{
        left: 247px;    
    }
    #list3{
        left: 494px;    
    }
    #list4{
        left: 741px;    
    }

    .listPro .pijl1next{
        position: absolute;
        z-index: 200;
        top: 20px;
        left: -2000px;
        cursor: pointer;
    }

    .listPro .pijl1prev{
        position: absolute;
        z-index: 200;
        top: 485px;
        left: -2000px;
        cursor: pointer;
    }
}

@media screen and (min-width: 600px) and (max-width: 989px){
        /*
    Blauw: 
    color: #3a92ca;
    background-color: #3a92ca;

    Grijs: 
    color: #333333;
    background-color: #333333;
    */
    *{
        margin: 0;
        padding: 0;
        outline: 0;
        border: 0; 
    }

    html{
        height: 100%;
    }

    body{
        font-family: 'Varela', sans-serif;
        color: #222222;
        background-color: #FFF;
        height: 100%;
    }

    p{
        line-height: 25px;
        margin: 20px 0;
        font-size: 15px;
    }

    .contentProject p{
        /*width: 600px;   */
    }

    .line{
        border: 3px solid #3a92ca;
        float: right;
        width: 100px;
        margin-top: 30px;
    }

    h2{
        color: #333333;
        font-size: 33px;
        margin: 20px 0;
    }

    h2 span{
        color: #d7d7d7;
        font-size: 45px;
    }

    h3{
        color: #3a92ca;
        color: #333;
        font-size: 18px;
        margin: 15px 0 5px 0;
    }

    .teamLeft h3{
        font-size: 16px;
    }

    .clear{
        clear: both;
    }

    span{
        color: #3a92ca;
    }

    h1{
        font-size: 35px;
    }

    a{
        text-decoration: none;
        color: #333;
    }

    a:hover{
       color: #3a92ca;     
    }

    #header a{
        color: #333;   
    }

    #header a.selected{
        color: #3a92ca;
    }

    #header{
        padding: 50px 0 30px 0;
        margin-bottom: 50px;
    }

    #header ul{
        list-style-type: none;
        position: absolute;
        top: 120px;
        right: 50%;
        margin-right: -150px;
        min-width: 300px;
    }

    #header ul li a{
        color: #333;
        float: right;
        display: block;
        margin-left: 20px;
        font-size: 16px;
    }

    #header ul li a:hover{
        color: #3a92ca;
    }

    #logoStart{
        color: #FFF;
        position: absolute;
        bottom: 200px;
        left: 100px;
    }

    #logoT{
        text-align: right;
        margin-top: 50px;
    }

    #logo{
        text-align: center;
    }

    #containerStart{
        width: 100%;
        position: relative;
        margin: 0px auto;
        height: 100%;
        display: block;
    }

    #container{
        width: 100%;
        position: relative;
        margin: 0px auto;
        padding-bottom: 50px;
    }

    .picturesBig{
        position: relative;
        width: 100%;
        overflow: hidden;
    }

    #contactInfo{
        border: 1px solid #CCC;
        position: absolute;
        bottom: -1px;
        right: -1px;
        background-color: #FFF;
        padding: 20px 30px;
    }

    #slideshow img{
       width: 100%;
    }

    #project{
        width: 100%;
        text-align: center;
    }

    #project img{
        
        max-height: 300px;
        max-width: 100%;
    }

    #rowExtras{
        margin-top: 30px;
        margin-right: 30px;
        margin-left: 30px;   
    }

    #content h2{
        margin-left: 30px;
        margin-right: 30px;   
    }

    #rowExtras img{
        cursor: pointer;
        position: relative;
        z-index: 1;
        max-height: 60px;
        margin-right: 4px;
        opacity: 0.8;
        filter: url("data:image/svg+xml;utf8,<svg xmlns=\'https://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
        filter: gray; /* IE6-9 */
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        transition: all 0.5s;
    }

    #rowExtras img:hover, #rowExtras img.selected{
        z-index: 5;
        box-shadow: 0 0 5px 2px #666;
        opacity: 1;
        filter: url("data:image/svg+xml;utf8,<svg xmlns=\'https://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
        -webkit-filter: grayscale(0%);
        -moz-filter: grayscale(0%);
        -ms-filter: grayscale(0%);
        -o-filter: grayscale(0%);
        transition: all 0.5s;
    }

    #projects{
        border: 1px solid #CCC;
        overflow: hidden;
        position: relative;
    }

    #projects a img{
        display: block;
        position: relative;
        float: left;
        width: 25%;
        z-index: 1;
        transition: all 0.5s;
    }

    #collect1:before{
        content: "woningen";
        display: block;
        border-bottom: 1px solid #CCC;
        padding: 10px 20px;
    }
     #collect2:before{
        content: "appartementen";
        display: block;
        clear: both;
        border-bottom: 1px solid #CCC;
        padding: 10px 20px;
    }
     #collect3:before{
        content: "interieur";
        display: block;
        border-bottom: 1px solid #CCC;
        clear: both;
        padding: 10px 20px;
    }
     #collect4:before{
        content: "diverse";
        display: block;
        clear: both;
        border-bottom: 1px solid #CCC;
        padding: 10px 20px;
    }

    #projects a img:hover{
        z-index: 5;
        box-shadow: 0 0 5px 2px #666;
        opacity: 1;
        filter: url("data:image/svg+xml;utf8,<svg xmlns=\'https://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
        -webkit-filter: grayscale(0%);
        -moz-filter: grayscale(0%);
        -ms-filter: grayscale(0%);
        -o-filter: grayscale(0%);
        transition: all 0.5s;
    }

    iframe{
        height: 400px;
    }

    .jump{
        margin-left: 20px;
    }

    #projects ul{
        display: none;
        list-style-type: none;
        border-bottom: 1px solid #CCC;
        position: relative; 
        z-index: 4000; 
        background-color: #FFF;
    }

    #projects ul li p{
        border-right: 1px solid #CCC;
        padding: 10px 15px;
        display: block;
        float: left;
        line-height: 30px;
        width: 216px;
        color: #333;
    }

    #projects ul li a:hover, #projects ul li a.selected{
        color: #3a92ca;
    }

    .contentProject p{
        margin-left: 30px;
    }

    #buroC{
        border-top: 1px solid #CCC;
        position: relative;
        width: 96%;
        padding: 2%;
        overflow: hidden;    
    }

    .teamLeft{
        float: left;
        width: 50%;
        margin-right: 0px;
        font-size: 15px;
        margin-top: 0px;
    }

    .teamLeft img{
        display: block;
    }

    .teamLeft div{
        padding: 10px 15px 0px 15px;
        border: 1px solid #CCC;
        border-left: 0px solid #CCC;
        border-top: 0px solid #CCC;
    }

    .teamLeft p{
        margin: 20px 0;
        font-size: 13px;
    }

    .listPro{
        width: 100%;
        position: static;
        top: 0px;
    }

    .listPro div{
    }

    #list1{
        left: 0;    
    }
    #list2{
        left: 247px;    
    }
    #list3{
        left: 494px;    
    }
    #list4{
        left: 741px;    
    }

    .listPro .pijl1next{
        position: absolute;
        z-index: 200;
        top: 20px;
        left: -2000px;
        cursor: pointer;
    }

    .listPro .pijl1prev{
        position: absolute;
        z-index: 200;
        top: 485px;
        left: -2000px;
        cursor: pointer;
    }
}

@media screen and (min-width: 990px){
        /*
    Blauw: 
    color: #3a92ca;
    background-color: #3a92ca;

    Grijs: 
    color: #333333;
    background-color: #333333;
    */
    *{
        margin: 0;
        padding: 0;
        outline: 0;
        border: 0; 
    }

    .jump{
        margin-left: 0px;
    }

    html{
        height: 100%;
    }

    body{
        font-family: 'Varela', sans-serif;
        color: #222222;
        background-color: #FFF;
        height: 100%;
    }

    p{
        line-height: 25px;
        margin: 20px 0;
        font-size: 15px;
    }

    .contentProject p{
        /*width: 600px;   */
    }

    .line{
        border: 3px solid #3a92ca;
        float: right;
        width: 100px;
        margin-top: 30px;
    }

    h2{
        color: #333333;
        font-size: 33px;
        margin: 20px 0;
    }

    h2 span{
        color: #d7d7d7;
        font-size: 45px;
    }

    h3{
        color: #3a92ca;
        color: #333;
        font-size: 18px;
        margin: 15px 0 5px 0;
    }

    .clear{
        clear: both;
    }

    span{
        color: #3a92ca;
    }

    h1{
        font-size: 35px;
    }

    a{
        text-decoration: none;
        color: #333;
    }

    a:hover{
       color: #3a92ca;     
    }

    #header a{
        color: #333;   
    }

    #header a.selected{
        color: #3a92ca;
    }

    #header{
        padding: 50px 0 30px 0;
    }

    #header ul{
        list-style-type: none;
        position: absolute;
        top: 70px;
        right: 0;
        min-width: 300px;
    }

    #header ul li a{
        color: #333;
        float: right;
        display: block;
        margin-left: 20px;
        font-size: 16px;
    }

    #header ul li a:hover{
        color: #3a92ca;
    }

    #logoStart{
        color: #FFF;
        position: absolute;
        bottom: 200px;
        left: 100px;
    }

    #logoT{
        text-align: right;
        margin-top: 50px;
    }

    #containerStart{
        width: 990px;
        position: relative;
        margin: 0px auto;
        height: 100%;
        display: block;
    }

    #container{
        width: 990px;
        position: relative;
        margin: 0px auto;
        padding-bottom: 50px;
    }

    .picturesBig{
        border: 1px solid #CCC;
        position: relative;
        width: 990px;
        height: 690px;
        overflow: hidden;
    }

    #contactInfo{
        border: 1px solid #CCC;
        position: absolute;
        bottom: -1px;
        right: -1px;
        background-color: #FFF;
        padding: 20px 30px;
    }

    #slideshow{
        height: 550px;
    }

    #project{
        height: 480px;
        text-align: left;
    }

    #project img{
        max-height: 490px;
        max-width: 1000px;
    }

    #rowExtras{
        margin-top: 30px;   
    }

    #rowExtras img{
        cursor: pointer;
        position: relative;
        z-index: 1;
        max-height: 60px;
        margin-right: 4px;
        opacity: 0.8;
        filter: url("data:image/svg+xml;utf8,<svg xmlns=\'https://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
        filter: gray; /* IE6-9 */
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        transition: all 0.5s;
    }

    #rowExtras img:hover, #rowExtras img.selected{
        z-index: 5;
        box-shadow: 0 0 5px 2px #666;
        opacity: 1;
        filter: url("data:image/svg+xml;utf8,<svg xmlns=\'https://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
        -webkit-filter: grayscale(0%);
        -moz-filter: grayscale(0%);
        -ms-filter: grayscale(0%);
        -o-filter: grayscale(0%);
        transition: all 0.5s;
    }

    #projects{
        border: 1px solid #CCC;
        height: 582px;
        overflow: hidden;
        position: relative;
    }

    #projects a img{
        display: block;
        position: relative;
        z-index: 1;
        filter: url("data:image/svg+xml;utf8,<svg xmlns=\'https://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
        filter: gray; /* IE6-9 */
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        transition: all 0.5s;
    }

    #projects a img:hover{
        z-index: 5;
        box-shadow: 0 0 5px 2px #666;
        opacity: 1;
        filter: url("data:image/svg+xml;utf8,<svg xmlns=\'https://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
        -webkit-filter: grayscale(0%);
        -moz-filter: grayscale(0%);
        -ms-filter: grayscale(0%);
        -o-filter: grayscale(0%);
        transition: all 0.5s;
    }

    #projects ul{
        list-style-type: none;
        border-bottom: 1px solid #CCC;
        position: relative; 
        z-index: 4000; 
        background-color: #FFF;
    }

    #projects ul li p{
        border-right: 1px solid #CCC;
        padding: 10px 15px;
        display: block;
        float: left;
        line-height: 30px;
        width: 216px;
        color: #333;
    }

    #projects ul li a:hover, #projects ul li a.selected{
        color: #3a92ca;
    }

    #buroC{
        border: 1px solid #CCC;
        position: relative;
        width: 950px;
        padding: 20px 20px 20px 20px;
        overflow: hidden;    
    }

    .teamLeft{
        float: left;
        width: 240px;
        margin-right: 10px;
        font-size: 15px;
        margin-top: 30px;
    }

    .teamLeft img{
        display: block;
    }

    iframe{
        height: 690px;
    }

    .teamLeft div{
        padding: 10px 15px 0px 15px;
        border: 1px solid #CCC;
        border-left: 0px solid #CCC;
        border-top: 0px solid #CCC;
    }

    .teamLeft p{
        margin: 20px 0;
        font-size: 13px;
    }

    .listPro{
        float: left;
        width: 25%;
        position: absolute;
        top: 51px;
        height: 534px;
    }

    .listPro div{
        position: absolute;
        top: 0;
    }

    #list1{
        left: 0;    
    }
    #list2{
        left: 247px;    
    }
    #list3{
        left: 494px;    
    }
    #list4{
        left: 741px;    
    }

    .listPro .pijl1next{
        position: absolute;
        z-index: 200;
        top: 20px;
        left: 20px;
        cursor: pointer;
    }

    .listPro .pijl1prev{
        position: absolute;
        z-index: 200;
        top: 485px;
        left: 20px;
        cursor: pointer;
    }
}