body {
    color: #222;
    font-family: 'Open Sans', sans-serif;
    font-size: 1em;
    line-height: 1.3;
}

h1, h2, h3, h4, nav {
    font-family: 'Open Sans', sans-serif;
}

hr {
    border: 0;
    color: #9E9E9E;
    background-color: #9E9E9E;
    height: 1px;
    width: 100%;
    text-align: left;
}



header {
    background-color: skyblue;
    background-image: url(../afbeeldingen/banner_kunstgarage.jpg);
    background-size: cover;
    height: 100vh;
    background-position: center top;
    padding: 5em 0 4em 0;
    text-align: center;
}

header.subpage {
    background-color: white;
    background-image: none;
    background-size: cover;
    height: 1vh;
    background-position: center top;
    padding: 5em 0 4em 0;
    text-align: center;
}

header.subpage-2 {
    background-color: white;
    background-image: none;
    background-size: cover;
    height: 1vh;
    background-position: center top;
    padding: 1em 0 2em 0;
    text-align: center;
}

header.subpage-3 {
    background-color: white;
    background-image: none;
    background-size: cover;
    height: 1px;
    background-position: center top;
    padding: 0 0 0 0;
    text-align: center;
}

header p {
        /*color: white;
        border: 3px solid skyblue;*/ 
        color: rgb(238, 235, 224);
        position: absolute;
        bottom: 0;
        right: 30px;
        text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
        font-size: 1.3em;
}

header h1 {
    background-color: rgba(0, 0, 0, 0.42);
    padding: .2em;
}

header a {
    color: white;
    text-decoration: none;
}

nav {
    background-color: rgba(0, 0, 0, 0.75);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 4;
    border-bottom: 1px solid dimgrey;    
}

nav p.menuknop  {
    background-color: white;
    font-family: 'Open Sans', sans-serif;
    font-size: 1em;
    line-height: 1;
    margin: 0;
    padding-top: 3em;
    padding-right: .2em;
    padding-bottom: .1em;
    padding-left: 0;
    text-align: right;
    /* border: 3px solid skyblue; */
}

nav p.menuknop a {
    color: black; 
}

nav ul {
    display: none;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

nav ul li {
    border-top: 1px solid dimgrey;
    padding: .7em .4em .6em .4em;
}

nav a {
    color: white;
    text-decoration: none;
}

nav ul li:hover {
    background-color:  rgb(17, 70, 81);
}

nav ul li.submenu {
    position: relative;
}

nav ul li.submenu > a:after {
    content: " \025BE";
    color: orange;
}

nav ul li.submenu:hover ul {
    box-sizing: border-box;
    background-color:  rgb(17, 70, 81);
    display: block;
    width: 50%;
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 5;
}

nav li li:first-child {
    border-top: none;
}

nav li li a:hover {
    color: darkgrey;
}

ul {
   list-style-type: square;
}

ul.ingrid {
  margin-left: 2em;
}


.flex-wrapper {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  justify-content: space-between;
}



.dienst {
    margin-left:auto;
    margin-right:auto;
    margin-top:2em;
    margin-bottom:1em;
    display: -webkit-flex; /* Safari */     
    display: flex;    
    /*border-top: 1px solid dimgrey; */
    /*background-color: grey; */
    flex-direction: row;
}


.dienst-content {
    margin-left:0;
    margin-right:auto;
    margin-top:0;
    margin-bottom:0;
    
    display: -webkit-flex; /* Safari */     
    display: flex;    
    /*border-top: 1px solid dimgrey; */
    flex-direction: column;
}




img.floatLeft { 
    float: left; 
    margin-right: 10px; 
}

img.floatRight { 
    float: right; 
    margin-left: 10px; 
}

article {
    padding: 1em;
}

article h1 {
    color: rgb(17, 70, 81);
}

article h2 {
    color: #978c6f;
    font-size: 1.3em;
    margin-top: 0.6em;
    margin-left: 1em;
    /*text-shadow: 2px 2px #000000;*/
}

article h3 {
    color: black;
    font-size: 1em;
    margin-top: 1.5em;
    margin-left: 2em;
    margin-right: 2em;
    /*text-shadow: 2px 2px #000000;*/
}

article h1 + article h2 {
    margin-top: auto;
}

article p {
    margin-left: 2em;
    margin-right: 2em;
    margin-block-end: 0.2em;
}

aside {
    background-color: white;
    padding: 1em 1em 2em 1em;
    text-align: center;
    height: 70vh;
    min-width: 30%;
    margin-right: auto;
    margin-left: auto;
}

aside2 {
    background-color: orange;
    padding: 1em 1em 2em 1em;
    text-align: left;
    height: 60vh;
    min-width: 30%;
    margin-right: 5%;
    margin-left: auto;
}

projectdetails {
  margin-left:5%;
  margin-right: 5%;
}

projectdetails h2{
    color: #252b65;
    font-size: 1.3em;
    margin-top: 0.6em;
    margin-left: 1em;
    font-family: 'Open Sans', sans-serif;
}

.projectmainimage {
    box-sizing: border-box;
    display: flex;
    /*position: fixed;*/
    background-color: white;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right top;
  /*  background-attachment: fixed;*/
    padding-top: 0;
 /*   padding: 5em 0 4em 0; */
    text-align: center;
    top: 2px;
 /*   z-index: 1;*/
    height: 100vh;
    width:100%;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;   
} 


.projectinfo {
  position: absolute;
  top: 10%;
  left: 5%;
  padding-top: 0px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  min-width: 260px;
  width: 25%;
  color: #252b65;
  background-color: #aad16c;
 /*  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; */
  font-size: 1em;
  z-index: 3;
  text-align: left;
}

/* uit tr background-color:white; */
.project_details{}
.project_details table{}
.project_details tr{}
.project_details th{text-align: right;vertical-align:top;border-right:1px solid #D3D3D3;padding:4px 8px; color:#252b65;}
.project_details td{text-align:left;padding:4px 8px;}
.project_details A:link{text-decoration:none; color:#000000;}
.project_details A:visited {text-decoration:none; color:#000000;}
.project_details A:hover{text-decoration:none; color:#8C8C8C;}




.block2 {
    background-color: white;
    padding: 1em 1em 2em 1em;
    text-align: left;
    margin-right: 10%;
    margin-left: 10%;
}

a.darklink:link,a.darklink:visited,a.darklink:active {
    font-size:1em;
    text-decoration: underline;
    color:#000000;
    line-height:130%;
}

a.clearlink:link,a.clearlink:visited,a.clearlink:active {
    color:#5e628d;
    text-decoration: underline;
}

div.quotebox {
    padding: 5px 5px 5px 5px;
    margin:0px 0px 0px 15px;  
    border:0px solid #000;
    background-color:#FFF;
    color:#000000;
}

p.quotebox {
    font-family:verdana;
    font-size:12px;
    color:#60658e;
    line-height:130%;
    font-style:italic;
}


.push  {
height: 5em;
margin: 0px;
}

.push-contact  {
height: 5em;
margin: 0px;
}

.footer {
    margin-top: auto;
    background-color: black;
    color: white;
    font-size: .9em;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: right;
        padding: 1em 0em;
}

.footer A {
    color: white;
    text-decoration: none;
}

.footer A:hover {
    text-decoration: underline;
}

.footer p {
        margin: 0 1em;
        margin-right: 4em;
}


img.rechts, img.links {
    box-sizing: border-box;
    display: block;
    margin: .2em auto;
    max-width: 100%;
}

img.logo {
    box-sizing: border-box;
    display: flex;
    position: fixed;
    top: 2px;
    z-index: 10;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
} 


.grid-container {
    position: relative;
    display: grid;
    /*grid-template-columns: 1fr 1fr;*/
    grid-template-columns: none;
    grid-gap: 20px;
    padding-bottom: 0px;
    margin-bottom: 0px;    
}

.grid-container_1kol {
    position: relative;
    display: grid;
    /*grid-template-columns: 1fr 1fr;*/
    grid-template-columns: none;
    grid-gap: 20px;
    padding-bottom: 0px;
    margin-bottom: 0px;    
}


.grid-child {
  position: relative;
  /*background-color: #a29a89;*/
  /*border: 3px solid skyblue;*/
}

.grid-child-centerd {
  position: relative;
  /*background-color: #a29a89;*/
  /*border: 3px solid red;*/
  margin-left:auto;
  margin-right:auto;
  text-align: center;
  align-content: center;
  align-items: center;
}

.gridcontent {   
}

.gridimage {
    width: 100%;
    /*height: 100%; */
    object-fit: contain;    
}

.gridimage_portrait {
 width: 66%;
}

/* Bottom right text */
.bijschrift {
  position: absolute;
  bottom: 8px;
  right: 16px;
  color: white;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  font-size: 0.8em;
  /*text-align:right;
  padding:4px 8px;*/
}

.bijschrift_boven {
  position: absolute;
  top: 8px;
  left: 16px;
  color: black;
  /*text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;*/
  font-size: 0.8em;
  background: rgba(255, 255, 255, 0.8);
  /*text-align:right;*/
  padding:4px 8px;
  /*border-bottom: 1px solid dimgrey;*/    
}


.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #978c6f;
}

.gridcontent:hover .overlay {
  opacity: 0.9;
}

.textoverlay {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}


.contact_details{}
.contact_details table{}
.contact_details tr{}
.contact_details th{text-align:right;vertical-align:top;border-right:1px solid #D3D3D3;padding:4px 8px; color:#252b65;}
.contact_details td{text-align:left;padding:4px 8px;}
.contact_details A:link{text-decoration:none; color:#000000;}
.contact_details A:visited {text-decoration:none; color:#000000;}
.contact_details A:hover{text-decoration:none; color:#8C8C8C;}






.project_fotos{}
.project_fotos tr{}
.project_fotos td{padding:4px 8px;}



/* onder de 250 menu anders vormgeven */ 
@media screen and (min-width: 250px) {

    img.logo {
        box-sizing: border-box;
        display: flex;
        position: fixed;
        top: 2px;
        z-index: 10;
        width: 180px;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        text-align: center;
    } 
}

/* onder de 500 menu anders vormgeven */ 
@media screen and (min-width: 500px) {
    nav p.menuknop  {
        background-color: white;
        /*background-image: url(afbeeldingen/logo.svg);
        background-repeat: no-repeat;
        background-position: left center;
        background-size: contain; */
        font-family: 'Open Sans', sans-serif;
        font-size: 1em;
        line-height: 1;
        margin: 0;
        padding-top: 2.3em;
        padding-right: .2em;
        padding-bottom: .1em;
        padding-left: 0;
        text-align: right;
        /* border: 3px solid skyblue; */
    }

    img.logo {
        box-sizing: border-box;
        display: flex;
        position: fixed;
        top: 3px;
        z-index: 10;
        width: 280px;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        padding-top:10px;
        /**padding: 10px;**/
        background-color: white;
        text-align: center;
    } 
}

@media screen and (min-width: 700px) {
    header {
        padding: 9em 0 7em 0;
        background-image: url(../afbeeldingen/banner_kunstgarage.jpg);
    }

    nav > ul > li {
        margin: 0 .25em; 
    }
    
    .mainpart {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
    }
    
    /* mag vervallen 1 brede pagina
    aside {
        background-color: #f7b336;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 18%;
        flex: 0 0 18%;
        font-size: .9em;
        margin: 3em 1em 0 0;
    }
    */
    .grid-container {
        display: grid;
        /*grid-template-columns: 1fr 1fr 1fr;*/
        grid-template-columns: repeat(3, 1fr);
        /*grid-template-columns: none;*/
        grid-gap: 20px;
        margin-top:13px;
        padding-bottom: 0px;
        margin-bottom: 0px;
    }
}




/* onder de 740 menu anders vormgeven */ 
@media screen and (min-width: 999px) {
    header {
        padding: 7em 0 5em 0;

    }


    img.rechts {
        float: right;
        margin: 0.4em 0 0.4em .8em;
    }

    img.links {
        float: left;
        margin: 0.4em .8em 0.4em 0;
    }


}





@media screen and (min-width: 1000px) {
    
    header h1 {
        font-size: 3.5em;
    }

    div.mainpart {
        max-width: 90%;
        margin: 0 auto;
    }

}

@media screen and (min-width: 1081px) {
    header {
        padding: 7em 0 5em 0;
        background-image: url(../afbeeldingen/banner_kunstgarage.jpg);
    }


}

@media screen and (min-width: 1260px) {
 /*    img.logo {
    width: 350px;
 }*/
 

    img.logo {
        box-sizing: border-box;
        display: flex;
        position: fixed;
        z-index: 10;
        background-color: rgba(255, 255, 255, 1);
        width: 280px;
        margin-left: 5%;
        margin-right: auto;
        left:  0;
        right: 0;
        top: 1.5em;
        text-align: left;
        padding-left: 0.3em;
        padding-top: 0em;
        padding-bottom: 0.3em;

        /* border: 3px solid slategray; */
    } 

    nav {
        background-color: white !important;

    }
    
    nav a {
        color: black;
    }
    
    nav p.menuknop  {
        position: absolute;
        background-position: left 2px;
        /*border: 3px solid slategray;*/
        font-family: 'Open Sans', sans-serif;
        font-size: 1em;
        line-height: 1;
        margin: 0;
        padding-top: 0em;
        padding-right: 0em;
        padding-bottom: 0em;
        padding-left: 0;
        text-align: right;
    }
    
    nav p.menuknop a {
        visibility: hidden;
    }
    
    nav > ul {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-pack: distribute;
        -webkit-box-pack: end;
        justify-content: flex-end;
    }
 
    nav ul li {
    width: 8em;
    }

    nav ul li.small {
        width: 5em;
    }

    nav ul li.small2 {
        width: 6.5em;
    }



    nav ul li:hover {
        background-color: rgba(255, 255, 255, 1);
    }

    a.main:hover{
        color: rgb(38, 43, 97);
    }  

    nav ul li.submenu:hover ul {
        background-color: rgba(255, 255, 255, 0.65);
        width: 8.8em;
        left: 0;
        top: 100%;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        border-top: 1px solid darkgrey;
    }

    nav li li a:hover {
        color: rgb(38, 43, 97);
        /* font-weight: bold;*/
    }

    nav ul li.last {
                background-color: rgb(38, 43, 97) !important;
                color: white;
                margin-right: 3em;
                text-align: center;

    }

    a.last {
        color: white;
        text-align: center;
    }

    nav > ul > li {
        border-top: none;
    }

    p.links {
    max-width: 48%;
    text-align: left;
    border: 3px solid slategray;     
    }

    p.rechts {
    max-width: 48%;
    text-align: right;     
    }

    div.breed {
    max-width: 100%;
    text-align: left;
    border: 3px solid slategray;     
    }
  


/* Create two equal columns that sits next to each other 
    .column {
        flex: 50%;
    }
*/

}


@media screen and (min-width: 1921px) {
/* 4k */
    header {
        background-image: url(../afbeeldingen/banner_kunstgarage.jpg);
    }
}