body{
    /* background-image:url(../images/colour.png); */
    /* background-image:url(../images/full.png); */
    /* background-blend-mode: multiply; */
font: 15px/1.3 'Courier New', Courier, monospace;
padding:0;
margin:0;
}

/* global */
.container{
width: 80%;
margin:auto;
overflow:hidden;
}

/* header */
header{
    position:top;
    width:auto;
    height:45px;
    padding:20px;
    margin: 45px 0px 25px 0px ;
    background:#000000;
}
header h1{
    float:left;
     margin: 5px 400px 0px 50px ;
    color: #FFFFFF;
}
header h2{
    float:right;
    /* position: relative; */
    margin: 10px 150px 0px 0px ;
    color: #FFFFFF;
}



title{
    background:#000000;
}

nav{
    font: 15px/1.8 'Courier New', Courier, monospace;
    float:left;
    border: #000000 3px solid;
    margin: 20px;
    padding:  20px 60px 20px 60px;
    color: black;
    background-color: white;
    text-decoration:none;
}
nav:hover{
    background-color: black;
    color:white;
}
nav a{
    font: 35px/1.8 'Courier New', Courier, monospace;
    color: #000000;
    text-decoration:none;
    /* padding:  5px 5px 5px 5px; */
}
nav a:hover{
    color: #FFFFFF;
    font: 35px/1.8 'Courier New', Courier, monospace;;
    /* nav padding:  10px 60px 10px 60px; */
}

.guerilla{
    float: right;
    padding: 20px;
    margin: 4px;
    background-blend-mode: multiply;
}

.guerilla:hover{
    float: right;
    padding: 20px;
    margin: 4px;
    background-color: cyan;
}

div#qart{
    float: right;
    padding: 20px;
    margin: 4px;
    /* background-image:url(../images/full.png); */
    /* background-color:white */
}

div#qart:hover{
    float: right;
    padding: 20px;
    margin: 4px;
    background-color: magenta;
    background-blend-mode: exclusion;
}

div#sink{
    float: left;
    padding: 20px;
    margin: 4px;
    /* background-image:url(../images/full.png); */
    /* background-color: white; */
}

div#sink:hover{
    float: left;
    padding: 20px;
    margin: 4px;
    background-color: red;
}
div#pp{
    float: left;
    padding: 20px;
    margin: 4px;
}

div#pp:hover{
    float: left;
    padding: 20px;
    margin: 4px;
    background-color: cyan;
}

div#colour{
    float: left;
    padding: 5px 5px 5px;
    margin: 40px;
    /* background-image: url(images/moi146.png) */
    background-image: url(images/colour.png);
    /* background-color: white; */
    background-blend-mode: multiply;
}
div#colour:hover{
    float: left;
    padding: 5px 5px 5px;
    margin: 40px;
    /* background-image: url(images/moi146.png) */
    background-image: url(images/sdf.jpg);
    background-color:blue;
    background-blend-mode: multiply;
}

div#soundscapes{
    float: left;
    padding: 5px 5px 5px;
    margin: 40px;
    /* background-image: url(images/moi146.png) */
    /* background-image: url(images/sdf.jpg); */
    /* background-color:cyan; */
    /* background-blend-mode: multiply; */
}

div#soundscapes:hover{
    float: left;
    padding: 5px 5px 5px;
    margin: 40px;
    /* background-image: url(images/moi146.png) */
    /* background-image: url(images/sdf.jpg); */
    background-color:cyan;
    /* background-blend-mode: multiply; */
}


.blended{
    background-image: url(images/sdf.jpg);
    background-color: blue;
    background-blend-mode: multiply;
}

div#hoofd:hover{
    background-color:grey;
}
div#kast{
    float:left;
/* border: #000000 3px solid; */
margin: 20px;

    padding: 350px 350px 350px 350px;
    background-color: magenta;
}
div#kast2{
    float:left;
/* border: #000000 3px solid; */
margin: 20px;

    padding: -450px -250px -450px -150px;
    background-color: green;
}

div#about{
    float:left;
/* border: #000000 3px solid; */
margin: 20px;

    padding: 50px 5px 5px 5px;
    background-color: white;
}
div#about:hover{
    background-color: magenta;
}


.tekstvak{
    overflow: hidden;
    margin: 50px;
    padding: 50px;
background-color: white;
}
.tekstvak:hover{
    overflow: hidden;
    background-image: url(../images/sdf.jpg);
    /* background-color: magenta; */
    /* background-color: cyan; */
    background-blend-mode: multiply;
    }

    .grid-container {
        margin: auto;
        width: 90%;
        overflow: hidden;
        /* margin-bottom: -1.875em; */
        /* margin-left: 10%; */
        /* margin-right: 50%; */

        -webkit-columns: 4 300px;
        -moz-columns: 4 300px;
        columns: 4 300px;
        -webkit-column-gap: 1em;
        -moz-column-gap: 1em;
        column-gap: 1em;

    }