html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,a,img,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;margin:0;padding:0;}:focus{outline:0;}ol,ul{list-style:none;}table{border-collapse:separate;border-spacing:0;}caption,th,td{text-align:left;font-weight:400;}blockquote:before,blockquote:after,q:before,q:after{content:"";}.clearfix:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0;}.clearfix{display:inline-block;}html[xmlns] .clearfix{display:block;}* html .clearfix{height:1%;}.clear{clear:both;height:0;width:0;margin:0;padding:0;}.no,.ausblenden{display:none;}

header,section,footer,aside,nav,article,figure { display: block; }

.clear { clear: both; }

html, body {margin: 0; overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;}

body {
    position: relative;
    background-color: var(--superlightgrey);
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;

}

.grid {
    display: grid;
    position: relative;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    padding: 0 50px 0 50px;
    grid-column-gap: 24px;
}

.section { margin-top: 100px; }

.img-2-4 { grid-column-start: 2; grid-column-end: 4; }
.img-2-12 { grid-column-start: 2; grid-column-end: 12; position: relative;}
.img-1-13 { grid-column-start: 1; grid-column-end: 13; }
.img-3-12 { grid-column-start: 3; grid-column-end: 12; }
.img-4-13 { grid-column-start: 4; grid-column-end: 13; }


@media only screen and (max-device-width : 700px) {
    .grid { padding: 0 20px 0 20px; grid-column-gap: 8px; }
    .section { margin-top: 50px; }
    .img-3-12 { grid-column-start: 1; grid-column-end: 13; }
    .img-2-12 { grid-column-start: 1; grid-column-end: 13; margin: 0 -16px 0 -16px;}
}

@media (min-width: 2000px){
    .grid {
        width: 2000px;
        margin: 100px auto;
    }
}

:root {
    /* 2E46C6 */
    /* #3E49FF */

    --accent: #2E46C6;
    --accent2: #FFE500;
    --superlightgrey: #fafafa;
    --lightgrey: #EAECEF;
    --midgrey: #C1C3C5;
    --dark: #212534;
}

::selection { background: var(--accent); color: white; }
::-moz-selection { background: var(--accent); color: white; }


video {
    width: 100%;
    height: auto;
}

video[poster] {
    object-fit: cover;
}


.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently*/
}



/* --------------------------Landing Page--------------------------------- */

.hero-text {
    grid-column-start: 1;
    grid-column-end: 13;
    height: 80vh;
    margin-top: 30px;
}

.project { }

.project_01 { grid-column-start: 1; grid-column-end: 5; }
.project_02 { grid-column-start: 5; grid-column-end: 9; }
.project_03 { grid-column-start: 9; grid-column-end: 13; }

.project-thumbnail { width: 100%; height: 55vh; transition: transform 200ms ease-in-out; }

.project-thumbnail:hover { transform: translateY(-8px); }

.project-thumbnail-text { margin: 12px 0 0 8px; }


.landingpage-section-headline {
    grid-column-start: 1; grid-column-end: 5;
    margin: 0 0 0px 0;
}

.about-me-text {
    grid-column-start: 6; grid-column-end: 12;
    margin-left: 20px;
    grid-row-start: 2; grid-row-end: 3;
}
.me { 
    width: 100%; 
    height: 86%;
    grid-column-start: 1; grid-column-end: 6;
    grid-row-start: 1; grid-row-end: 3;

    position: absolute;
    bottom: 9px;
    left: 0;
}



@media only screen and (max-device-width : 700px) {
    .project_01 { grid-column-start: 1; grid-column-end: 13; }
    .project_02 { grid-column-start: 1; grid-column-end: 13; }
    .project_03 { grid-column-start: 1; grid-column-end: 13; }
    .project { margin-top: 40px; }
    .project-thumbnail { height: 45vh; }
    .about-me-text { grid-column-start: 1; grid-column-end: 13; margin: 0 0 0 0;}
    .me { display: none;}
    .landingpage-section-headline { display: none;}
}







/*------------------------------Projects-----------------------------*/
#scrollTop {
    display: none; 
    position: fixed; 
    bottom: 20px; 
    right: 20px;
    width: 40px;
    height: 40px;
    z-index: 12; 
    background-color: rgba(242, 242, 242, 0.8);
    border-radius: 100%;
    color: black;
    cursor: pointer;
    font-size: 22px; 
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.scrollTop-arrow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#scrollTop:hover {
    box-shadow: 0 1px 6px rgba(0,0,0,0.04);
}

@media only screen and (max-device-width : 700px) {
    #scrollTop {
        width: 46px;
        height: 46px;
        font-size: 24px;
    }
}


.project-nav-arrow {position: absolute;top: 20px;left: 20px;width: 20px;height: 20px;z-index: 1;border-radius: 100%;}
.project-nav-arrow img { transition: all 0.3s ease; }
.project-nav-arrow:hover img { transform: translateX(-6px);}

.project-headline {
    grid-column-start: 3;
    grid-column-end: 11;
    height: 80vh;
    display:flex;
}

.project-hero-img {
    grid-column-start: 1;
    grid-column-end: 13;
    height: 100vh;
    overflow: hidden;
}

.project-hero-img img {
    height: 100%; 
    width: 100%;
    border-radius: 6px;
    object-fit: cover;
}
.project-hero video { object-fit: cover; -webkit-border-radius: 1px; }


.abstract { margin-top: 150px; margin-bottom: 200px;}
.abstract h5 { margin-bottom: 10px;}
.context { grid-column-start: 2; grid-column-end: 5; font-size: 0.8rem; line-height: 1.3rem; color: var(--dark);}
.challenge { grid-column-start: 5; grid-column-end: 8; }
.solution { grid-column-start: 8; grid-column-end: 11; }
.context a { text-decoration: underline; }
.download-thesis { font-size: 0.8rem;color: var(--accent); }


@media only screen and (max-width : 700px) {
    .project-headline { grid-column-start: 1; grid-column-end: 13; height: 50vh;}
    .context { grid-column-start: 1; grid-column-end: 13; display: none;}
    .challenge { grid-column-start: 1; grid-column-end: 13; margin-top: 30px;}
    .solution { grid-column-start: 1; grid-column-end: 13; margin-top: 30px;}
}




.headline { grid-column-start: 2; grid-column-end: 5; margin-top: -0.1rem; }

.headline-full { grid-column-start: 2; grid-column-end: 11; margin-top: -0.1rem; }

.project-text { grid-column-start: 5; grid-column-end: 11; }
.project-text a { text-decoration: underline; opacity: 0.8;}
.project-text a:hover { opacity: 1;}




.project-info {
    grid-column-start: 2;
    grid-column-end: 5;
}


.project-annotation {
    grid-column-start: 2; grid-column-end: 4;
    padding: 20px 20px 0 0;
    opacity: 0.3;
    text-align: left;
    margin-bottom: 30px;
}

.reference {
    font-family: 'SuisseIntlMono';
    font-size: 0.7rem;
    letter-spacing: -0.02rem;
}

@media only screen and (max-device-width : 700px) {
    .project-annotation { grid-column-start: 1; grid-column-end: 13; }
    .project-hero { height: 80vh; margin:0 -8px 0 -8px; }
    .headline { grid-column-start: 1; grid-column-end: 13; margin-top: -10px;}
    .project-text { grid-column-start: 1; grid-column-end: 13; }
    .project-info { display: none; }
    .headline-full { grid-column-start: 1; grid-column-end: 13; }
}



/*-------------- Gallery -----------------*/
.img-gallery {
    position: relative;
    grid-column-start: 3;
    grid-column-end: 12;
    height: 85vh;
    cursor: pointer;
}

.img-gallery-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 70%;
    height: 70%;
    transition: all ease-in-out 0.2s;
    
}
.img-gallery-content video { object-fit: cover; }
/* .img-gallery-content:hover { top: -10px;} */




@media only screen and (max-device-width : 700px) {
    .img-gallery {
        grid-column-start: 1;
        grid-column-end: 13;
        height: 45vh;
    }
}



/*---------------------------------------*/

.project-footer {
    font-size: 0.8rem;
    line-height: 1.5rem;
}
.project-footer a { text-decoration: underline; }

.project-footer-team {
    grid-column-start: 1;
    grid-column-end: 3;
}
.banner {
    grid-column-start:  3;
    grid-column-end: 11;
    position: relative;
    height: 200px;
    background-color: var(--lightgrey);
    border-radius: 2px;
}

.banner:hover {
    opacity: 0.8;
}

.banner img {
    border-radius: 2px;
}

.banner-text {
    position: absolute;
    top: 30px;
    left: 30px;
}


.doku {
    position: absolute;
    width: auto;
    height: 400px;
    top: -100px;
    right: -12%;
}


.project-footer-disciplines {
    margin-left: 30px;
    grid-column-start: 11;
    grid-column-end: 13;
}

.medium-logo {
    position: absolute;
    top: 20px;
    right: 20px;                                                                    
    height: 30px;
    width: 30px;
}


.download {
    position: absolute;
    bottom: 20px;
    left: 28px;                                                                    
    height: 30px;
    width: 30px;
}



.footer-outro {
    padding-top: 80px;
    padding-bottom: 60px;
    background: #F4F5F6;
}

.divider {
    position: absolute;
    top: 0;
    left: 0;
    background: var(--midgrey);
    opacity: 0.2;
    height: 1px;
    width: 100%;
}

.footer-outro-head {
    grid-column-start: 1; grid-column-end: 8;
    margin: 0 0 0px 0;
}

.project_left { grid-column-start: 1; grid-column-end: 7; }
.project_right { grid-column-start: 7; grid-column-end: 13; }


@media only screen and (max-width : 700px) {
    .banner {
        grid-column-start: 1;
        grid-column-end: 13;
        height: 200px;
    }
    .project_left { grid-column-start: 1; grid-column-end: 13; }
    .project_right { grid-column-start: 1; grid-column-end: 13; }
}











/*----- Video Responsive -----------------*/
.responsive-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.responsive-video {
    position: relative;
    padding-bottom: 56.25%; /* Default for 1600x900 videos 16:9 ratio*/
    padding-top: 0px;
    height: 0;
    overflow: hidden;
}
/*----------------------------------------*/





/*-------------Footer--------------*/

.footer {}

.footer-left { grid-column-start: 1; grid-column-end: 13; }

.footer-right { grid-column-start: 8; grid-column-end: 13; text-align: right; opacity: 0.1;;}