@import url("https://use.typekit.net/spy8bwp.css");

html {
    font-family: neue-haas-grotesk-display, sans-serif;
    font-weight: 700;
    font-style: normal;


    margin-top: 0vw;
    margin-right: 0vw;

    overflow-x: hidden;

    scroll-behavior: smooth;
    --gray: #303030;
    --gray2: #e6e6e6;
    --font_size_text: 1.1rem;
    font-family: neue-haas-grotesk-display, sans-serif;
    font-weight: 700;
    font-style: normal;
    /*    background-color: black;*/


    /*
    --white: black;
    --black: white;
*/


    --white: #e6e6e6;
    --black: black;


}

video {}

body {

    margin-top: 0vw;
    margin-left: 0vw;
}

p{
    font-size: var(--font_size);
    font-family: neue-haas-grotesk-display, sans-serif;
    font-weight: 500;
   
    color: var(--white);
}


h3 {
    font-size: var(--font_size);
    font-family: neue-haas-grotesk-display, sans-serif;
    font-weight: 700;
    font-style: normal;
    color: var(--white);
}

h4 {
    font-size: 1rem;
    font-family: neue-haas-grotesk-display, sans-serif;
    font-weight: 700;
    font-style: normal;
    color: var(--white);
}

pre {
    font-size: var(--font_size_text);
    font-family: neue-haas-grotesk-display, sans-serif;
    font-weight: 700;
    font-style: normal;
    color: var(--gray);
    line-height: 1.8;
}

a {
    text-decoration: none;
    color: var(--gray);
}

ul, li {margin-left: 0; padding-left: 0;}

.text {
/*    margin-top: 10vh;*/
    margin-bottom: 10vh;
    margin-left: 2vw;
    width: 65ch;
    font-size: 1.45rem;
    font-weight: 500;

}

.zitat {
   
margin-left: 2vw;
    width: 50vw;
    font-size: var(--font_size_2);
    --font_size_text: 1.4rem;
     font-style: italic;
     font-weight: 500;
    

}

.container_subpage {
    margin-top: 20vh;
    display: flex;

    flex-direction: column;
    /*
    grid-template-columns: 25vw 25vw 25vw 25vw;
    grid-template-rows: 20vh 100vw 100vw 100vw 100vw 100vw
*/
}

/*----------------Gallery-----------------------*/
.mySlides {
    display: none;
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 1;
    /*    height: 80vh;*/
    height: 100vh;
    justify-self: center;
}

.container_gallery {
    height: 90vh;
    margin-top: 10vh;
    margin-bottom: 20vh;


    display: grid;
    grid-template-columns: 20vw 30vw 30vw 20vw;
    grid-template-rows: 1fr
}



.img_content {
    width: 100vw;
    margin-top: 3vh;
    margin-bottom: 3vh;
    /*    flex-direction: column;*/


}




.arrow_r {
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 1;
    justify-self: end;
    z-index: 300;
    font-size: 3rem;

}

.arrow_l {
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 1;
    justify-self: start;
    z-index: 300;
    font-size: 3rem;
}


.fullhight {
    height: 82vh;
    width: fit-content;

    margin-top: 10vh;
    margin-bottom: 10vh;

}

.dubbelhight {
    height: 180vh;
    width: fit-content;

    margin-top: 10vh;
    margin-bottom: 10vh;

}

.halfhight {
    height: 48vh;
    width: fit-content;

    margin-top: 10vh;
    margin-bottom: 10vh;

}


.twothird {
    width: 60vw;
    height: fit-content;

    margin-bottom: 10vh;
    margin-top: 10vh;




}

.halfscreen {
    width: 50vw;
    margin-bottom: 10vh;
    margin-top: 10vh;

}

.fullscreen {
    width: 100vw;
    margin-bottom: 10vh;
    margin-top: 10vh;

}

.center {
    margin: auto auto;

}

.left {
    justify-self: left;

}

.space_bottom {
    margin-bottom: 10vh;

}

.morespace {
    margin-bottom: 10vh;
    margin-top: 10vh;

}

.morespacex2 {
    display: block;
    margin-bottom: 20vh;
     !important margin-top: 20vh;
     !important
}

.morespacex3 {
    display: block;
    margin-bottom: 30vh !important;
    margin-top: 30vh !important;

    background-color: hotpink;

}

/*
.footer {
    display: grid;
    height: 20vh;
    width: 100vw;

    z-index: 1000;


}
*/

.footer_container {
     margin-top: 20vh ;
    display: grid;
    height: 40vh;
    width: 100vw;

    z-index: 1000;


    grid-template-columns: 5vw 25vw 25vw 25vw;
    grid-template-rows: 6vh 30vh;

}

.list_1 {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
     grid-row-end: 3;
}

.list_2 {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
}

.list_3 {
    grid-column-start: 4;
    grid-column-end: 5;
    grid-row-start: 2;
     grid-row-end: 3;
}

.list_top_1 {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;

}

.list_top_2 {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 1;

}

.list_top_3 {
    grid-column-start: 4;
    grid-column-end: 5;
    grid-row-start: 1;

} 

li footer_container{
    text-decoration: none;
    list-style-type: none;
   
    font-size: 1rem;
    font-family: neue-haas-grotesk-display, sans-serif;
    font-weight: 700;
    font-style: normal;
    color: var(--white);
    
    
}





.arrow {

    height: 5vh;
    width: 5vh;
    z-index: 800;
    cursor: pointer;
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 3;
    grid-row-end: 4;
    display: none;
    justify-self: start;
    align-self: flex-start;
    margin-top: 85vh;



}

.arrow svg {
    width: 10vw;

}

.container_about {
    display: grid;
    width: 99vw;
    grid-template-columns: 10vw 70vw 20vw;
    grid-template-rows: 100vh 80vh 50vh 80vh 5vh;
    z-index: 199;
    overflow-x: hidden;
    /*    overflow-y: scroll;*/

}

#img_ich {

    height: 100vh;

    position: absolute;
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 1;
    grid-row-end: 2;
    z-index: 1;
}


.text_about {
    width: 30vw;
    overflow: hidden;


    font-size: 1.8rem;
    padding-right: 59vw;
    grid-column-start: 2;
    grid-column-end: 5;
    grid-row-start: 2;
    grid-row-end: 3;
    color: var(--gray);
    z-index: 200;

}

.about_gradient {
    background: rgb(0, 0, 0);
    background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
    width: 100vw;
    height: 50vh;
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 3;
    grid-row-end: 4;
    z-index: 300;

}



.text_cv {
    height: 100vh;
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 4;
    grid-row-end: 5;
    z-index: 500;
    color: var(--gray);
    font-size: 1.8rem;
}

.text_copy {
    height: 5vh;
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 5;
    grid-row-end: 6;
    z-index: 500;
    color: var(--gray);
    font-size: 1.8rem;

}

.about_back {
    background-color: black;
    grid-column-start: 2;
    grid-column-end: 1;
    grid-row-start: 4;
    grid-row-end: 6;
    width: 100vw;
    height: 200vh;
    z-index: 499;

}

.spacer_about {
    grid-column-start: 1;
    grid-column-end: 6;
    grid-row-start: 1;
    grid-row-end: 2;
    height: 100vh;
    width: 100vw;
    opacity: 0;
    z-index: 400;
}

.about_html {
    width: 100vw;
    overflow-x: hidden;
    /*    background-color: black;*/
    /*
    background-image: url(img/about/Ich_Portfolio.jpg);
    background-attachment:fixed;
    background-position: center top; 
    background-repeat:no-repeat;
	
	background-size: auto 100vh;
*/

    width: 100vw;


}

.video_screen_P1 {
    width: 50vw;
}