@import url('https://fonts.googleapis.com/css?family=Raleway:400,900|Roboto:300,400,500,600,700');



body {
    text-decoration: none;
    text-underline-position: none;
    width: 100vw;
    height: 100vh;
    top: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    background: ;
}

p {
    width: 100%;
    margin-top: 0;
    text-align: justify;
    text-decoration:none;
    display: inline-block;
    color:black;
    background: ;
    font-size: medium;
    font-family: 'Raleway', sans-serif;
}

h1{
    width: 100%;
    text-decoration:none;
    display: inline-block;
    text-align: center;
    color:black;
    background: ;
    font-size: 8em;
    font-family: 'Raleway', sans-serif;
}
h2 {
    width:100%;
    text-decoration:none;
    margin-left: auto;
    margin-right: auto;
    display:block;
    text-align: center;
    color:#5D5C5C;
    background: ;
    font-size: 1em;
    font-family: 'Raleway', sans-serif;
}

h5 {
    width:100%;
    text-decoration:none;
    margin-left: auto;
    margin-right: auto;
    display:block;
    text-align: center;
    color:#5D5C5C;
    background: ;
    font-size: 0.8em;
    font-family: 'Raleway', sans-serif;
}

.maincontainer {
    margin-top: 20vh;
    width: 80vw;
    margin-left: auto;
    margin-right: auto;
    background: ;
}


/* -------------- NAVIGATION ----------------*/



.titel {
    display: block;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    background: ;
}




    /* ------- INDEXPAGE ------- */

.biosection {
    display: block;
    width: 60vw;
    height:65vh;
    margin-top: 5vh;
    margin-bottom: 5vh;
    margin-left: auto;
    margin-right: auto;
    background: ;
}

.logoparent {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width: 65%;
    height: 20%;
    margin-bottom: 10%;
}

.introtext {
    margin-left: auto;
    margin-right: auto;
    width: 65%;
    margin-bottom: 5%;
    text-align: justify;
    text-justify:center;
    color:black;
;
}

.nameboxes {
    display: block;
    margin-left: 12.5%;
    width: 100%;
  
}
.namebox {
    text-align: center;
    display: inline-block;
    width: 25%;
    height:5%;
    margin-left:auto;
    margin-right:auto;
    background: ;
    
}

.contactinfo {
    margin-top: 5vh;
    display: block;
    margin-right: auto;
    margin-left: auto;
    background: ;
}


/* ------------ IMAGE COLUMN --------------*/

.projectimagegrid {
    margin-top: 0vh;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5vh;
    background: ;
    width: 80vw;
    display: grid;
    display: -ms-grid;
    height: 100%;
    grid-gap: 2vw;
    grid-template-columns: 11vw 11vw 11vw 11vw 11vw 11vw;
    -ms-grid-columns: 11vw 11vw 11vw 11vw 11vw 11vw;
    grid-template-rows:11vw 11vw 11vw 11vw 11vw 11vw 11vw 11vw 11vw 11vw 11vw 11vw 11vw 11vw 11vw 11vw 11vw 11vw 11vw 11vw 11vw 11vw 11vw 11vw 11vw 11vw 11vw 11vw 11vw 11vw 11vw 11vw 11vw 11vw 11vw 11vw 11vw 11vw 11vw 11vw;
    -ms-grid-rows:11vw 11vw 11vw 11vw 11vw 11vw 11vw 11vw 11vw 11vw 11vw 11vw 11vw 11vw 11vw 11vw 11vw 11vw 11vw 11vw 11vw 11vw 11vw 11vw 11vw 11vw 11vw 11vw 11vw 11vw 11vw 11vw 11vw 11vw 11vw 11vw 11vw 11vw 11vw 11vw;
    grid-template-areas: 
        "wp_beams wp_beams wp_beams wp_beams wp_floor wp_floor"
        "wp_beams wp_beams wp_beams wp_beams wp_floor wp_floor"
        "wp_beams wp_beams wp_beams wp_beams wp_floor wp_floor"
        "wp_side wp_side wp_beitel wp_beitel wp_beitel wp_beitel"
        "wp_side wp_side wp_beitel wp_beitel wp_beitel wp_beitel"
        "wp_side wp_side wp_beitel wp_beitel wp_beitel wp_beitel"
        "wp_front wp_front wp_front wp_front wp_balkon wp_balkon"
        "wp_front wp_front wp_front wp_front wp_balkon wp_balkon"
        "wp_front wp_front wp_front wp_front wp_balkon wp_balkon"
        "bnd_shelves bnd_shelves bnd_bath bnd_bath bnd_bath bnd_bath"
        "bnd_shelves bnd_shelves bnd_bath bnd_bath bnd_bath bnd_bath"
        "bnd_shelves bnd_shelves bnd_bath bnd_bath bnd_bath bnd_bath"
        "bnd_sink bnd_sink bnd_sink bnd_sink bnd_bench bnd_bench"
        "bnd_sink bnd_sink bnd_sink bnd_sink bnd_bench bnd_bench"
        "bnd_sink bnd_sink bnd_sink bnd_sink bnd_bench bnd_bench"
        "bnd_open bnd_open bnd_halfopen bnd_halfopen bnd_closed bnd_closed"
        "bnd_open bnd_open bnd_halfopen bnd_halfopen bnd_closed bnd_closed"
        "bnd_open bnd_open bnd_halfopen bnd_halfopen bnd_closed bnd_closed"
        "image1 image1 image2 image2 image2 image2"
        "image1 image1 image2 image2 image2 image2"
        "image1 image1 image2 image2 image2 image2"
        "image3 image3 image3 image4 image4 image4"
        "image3 image3 image3 image4 image4 image4"
        "image3 image3 image3 image4 image4 image4"
        "image5 image5 image5 image5 image6 image6"
        "image5 image5 image5 image5 image6 image6"
        "image7 image7 image8 image8 image6 image6"
        "image7 image7 image8 image8 image9 image9"
        "image7 image7 image11 image11 image9 image9"
        "image10 image10 image11 image11 image9 image9"
        "image10 image10 image12 image12 image12 image12"
        "image10 image10 image12 image12 image12 image12"
        "image13 image13 image13 image13 image14 image14"
        "image13 image13 image13 image13 image14 image14"
        "image15 image15 image16 image16 image14 image14"
        "image15 image15 image16 image16 image14 image14"
        "image15 image15 image17 image17 image17 image17"
        "image15 image15 image17 image17 image17 image17"
        "image18 image18 image18 image18 image18 image18"
        "image18 image18 image18 image18 image18 image18"
        ;
}

.projectimagecontainer > a img{
object-fit: cover;
width: 100%;
height: 100%;
margin-top: 0;
}

.wp_beams {
grid-area: wp_beams;
width: 100%;
height: 100%;    
}

.wp_floor {
grid-area: wp_floor;
width: 100%;
height: 100%;    
}

.bnd_bath {
grid-area: bnd_bath;
width: 100%;
height: 100%;    
}

.bnd_shelves {
grid-area: bnd_shelves;
width: 100%;
height: 100%;    
}

.bnd_bench {
grid-area: bnd_bench;
width: 100%;
height: 100%;    
}

.bnd_sink {
grid-area: bnd_sink;
width: 100%;
height: 100%;    
}

.bnd_open {
grid-area: bnd_open;
width: 100%;
height: 100%;    
}

.bnd_halfopen  {
grid-area: bnd_halfopen;
width: 100%;
height: 100%;    
}

.bnd_closed  {
grid-area: bnd_closed;
width: 100%;
height: 100%;    
}

.wp_side {
grid-area: wp_side;
width: 100%;
height: 100%;    
}

.wp_beitel {
grid-area: wp_beitel;
width: 100%;
height: 100%;    
}

.wp_front {
grid-area: wp_front;
width: 100%;
height: 100%;    
}

.wp_balkon {
grid-area: wp_balkon;
width: 100%;
height: 100%;    
}

.image1 {
grid-area: image1;
width: 100%;
height: 100%;    
}

.image2 {
grid-area: image2;
width: 100%;
height: 100%;    
}

.image3 {
grid-area: image3;
width: 100%;
height: 100%;    
}

.image4 {
grid-area: image4;
width: 100%;
height: 100%;    
}

.image5 {
grid-area: image5;
width: 100%;
height: 100%;    
}

.image6 {
grid-area: image6;
width: 100%;
height: 100%;    
}

.image7 {
grid-area: image7;
width: 100%;
height: 100%;    
}

.image8 {
grid-area: image8;
width: 100%;
height: 100%;    
}

.image9 {
grid-area: image9;
width: 100%;
height: 100%;    
}

.image10 {
grid-area: image10;
width: 100%;
height: 100%;    
}

.image11 {
grid-area: image11;
width: 100%;
height: 100%;    
}

.image12 {
grid-area: image12;
width: 100%;
height: 100%;    
}
.image13 {
grid-area: image13;
width: 100%;
height: 100%;    
}
.image14 {
grid-area: image14;
width: 100%;
height: 100%;    
}
.image15 {
grid-area: image15;
width: 100%;
height: 100%;    
}

.image16 {
grid-area: image16;
width: 100%;
height: 100%;    
}

.image17 {
grid-area: image17;
width: 100%;
height: 100%;    
}

.image18 {
grid-area: image18;
width: 100%;
height: 100%;    
}

.footer {
    margin-bottom: 0;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5vh;
}

@media only screen and (max-width: 1600px)  { 

body {
    text-decoration: none;
    text-underline-position: none;
    width: 90vw;
    height: 100vh;
    top: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    background: ;
}

.maincontainer {
    margin-top: 7vh;    
    }    
    
h1{
    width: 100%;
    text-decoration:none;
    display: inline-block;
    text-align: center;
    color:black;
    background: ;
    font-size: 5em;
    font-family: 'Raleway', sans-serif;
}
h2 {
    width:100%;
    text-decoration:none;
    margin-left: auto;
    margin-right: auto;
    display:block;
    text-align: center;
    color:#5D5C5C;
    background: ;
    font-size: 1em;
    font-family: 'Raleway', sans-serif;
}

.container {
    margin-top: 20vh;
    width: 80vw;
    margin-left: auto;
    margin-right: auto;
    background: ;
}


/* -------------- NAVIGATION ----------------*/



.titel {
    display: block;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    background: ;
}






/* ------------ IMAGE COLUMN --------------*/

    /* ------- INDEXPAGE ------- */

.biosection {
    display: block;
    width: 90%;
    height:50vh;
    height: auto;
    margin-top: 5vh;
    margin-bottom: 5vh;
    margin-left: auto;
    margin-right: auto;
    background: ;
}

.contactinfo {
    display: block;
    margin-right: auto;
    margin-left: auto;
    background: ;
}

.nameboxes {
    display: block;
    margin-left: 12.5%;
    width: 100%;
  
}
.namebox {
    text-align: center;
    display: inline-block;
    width: 25%;
    height:auto;
    margin-left:auto;
    margin-right:auto;
    background: ;
    
}
    /* -------  ------- */

}


/* --------- small screen -------------- */ 

@media only screen and (max-width: 900px)  { 
    
    

body {
    text-decoration: none;
    text-underline-position: none;
    width: 90vw;
    height: 100%;
    top: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    background: ;
}
    

h2 {
    width:100%;
    text-decoration:none;
    margin-left: auto;
    margin-right: auto;
    display:block;
    text-align: center;
    color:#5D5C5C;
    background: ;
    font-size: 1em;
    font-family: 'Raleway', sans-serif;
}
 
.maincontainer {
    margin-top: 5vh;
    width: 80vw;
    margin-left: auto;
    margin-right: auto;
    background: ;
}    
    
.biosection {
    display: block;
    width: 100%;
    height:65%;
    margin-top: 0;
    margin-bottom: 5vh;
    margin-left: auto;
    margin-right: auto;
    background: ;
}

.logoparent {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    height: 20%;
    margin-bottom: 10%;
}
    
  .introtext {
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    margin-bottom: 5%;
    text-align: justify;
    text-justify:center;
}  
    
.nameboxes {
    display: block;
    margin-left:0 ;
    width: 100%;
  
}
.namebox {
    text-align: center;
    display: block;
    width: 100%;
    height:3vh;
    margin-left:auto;
    margin-right:auto;
    background: ;
    
}
  /*  
.projectimagegrid {
    margin-top: 0vh;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    background: ;
    width: 80vw;
    display: grid;
    display: -ms-grid;
    height: 100%;
    grid-gap: 2vw;
    grid-template-columns: 80vw;
    -ms-grid-columns: 80vw;
    grid-template-rows: 80vw 80vw 80vw 80vw 80vw 80vw 80vw 80vw 80vw 80vw 80vw 80vw 80vw 80vw 80vw 80vw 80vw 80vw ;
    -ms-grid-rows: 80vw 80vw 80vw 80vw 80vw 80vw 80vw 80vw 80vw 80vw 80vw 80vw 80vw 80vw 80vw 80vw 80vw 80vw ;
    grid-template-areas: 
        "image1"
        "image2"
        "image3"
        "image4"
        "image5"
        "image6"
        "image7"
        "image8"
        "image9"
        "image10"
        "image11"
        "image12"
        "image13"
        "image14"
        "image15"
        "image16"
        "image17"
        "image18"
}
*/

/* -------------- NAVIGATION ----------------*/