@font-face{
    font-family:"Brown Light";
    src:url("../webfonts/lineto-brown-pro-light.woff") format("woff"), url("../webfonts/lineto-brown-pro-light.woff2") format("woff2");
    font-style: normal;
    font-weight: normal;
}

@font-face{
    font-family:"Brown Regular";
    src:url("../webfonts/lineto-brown-pro-regular.woff") format("woff"), url("../webfonts/lineto-brown-pro-regular.woff2") format("woff2");
    font-style: normal;
    font-weight: normal;
}

@font-face{
    font-family:"Brown Bold";
    src:url("../webfonts/lineto-brown-pro-bold.woff") format("woff"), url("../webfonts/lineto-brown-pro-bold.woff2") format("woff2");
    font-style: normal;
    font-weight: normal;
}

:root {
    --page-size: 1280px;
    --page-height-factor: 0.65;
    --mobile-size: 1200px;
    --content-padding: 64px;
    --gray: #f2f2f2;
    --darkergray: #8e8e8e;
    --darkgray: #3B3C3D;
    --black:
    rgb(17,17,17);
    --serif-font:
    'Spectral', serif;
    --sans-serif-font:
    'Brown Regular', 'Arial', 'Helvetica', sans-serif;
    --sans-serif-light-font:
    'Brown Light', 'Arial', 'Helvetica', sans-serif;
    --sans-serif-bold-font:
    'Brown Bold', 'Arial', 'Helvetica', sans-serif;
    --sans-serif-font-weight: 400;
    --sans-serif-light-font-weight: 300;
    --sans-serif-bold-font-weight: 700;
    --header-height: 100px;
    --footer-height: 80px;
    --page-padding: 80px;
    --left-width: 50%;
    --right-width: 50%;
    --letter-spacing: 0.07em;
    --header-height: 100px;
    --header-height-negativ: -100px;
    --footer-height: 80px;
    --footer-height-negativ: -80px;
    --small-link-size: 0.7rem;
}

@media (max-width: 1280px){
    :root {
        --page-padding: 40px;
        --small-link-size: 13px;
    }
}

@media (max-width: 768px){
    :root {

    }
}

@media (max-width: 760px){
    :root {
        --content-padding: 22px;
        --page-padding: 20px;
    }
}

@media (max-width: 400px){
    :root {
        --small-link-size: 10px;
        --header-height: 80px;
        --footer-height: 50px;
    }
}



body, html {
    margin: 0;
    padding: 0;
    background-color: var(--gray);
    -webkit-tap-highlight-color: transparent;
}

body {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    overflow-x: hidden;
    overflow-y: auto;
    /*overflow: hidden;*/
    height: calc(var(--vh, 1vh) * 100);
}

.mobile-only,
.mobile-only-inline,
.mobile-only-flex
{
    display: none !important;
}

.desktop-only {
    display: block !important;
}

.desktop-only-flex {
    display: flex !important;
}

.desktop-only-inline {
    display: inline-block !important;
}

@media(max-width: 1200px){
    .mobile-only {
        display: block !important;
    }

    .mobile-only-inline {
        display: inline-block !important;
    }

    .mobile-only-flex {
        display: flex !important;
    }

    .desktop-only,
    .desktop-only-flex,
    .desktop-only-inline
    {
        display: none !important;
    }
}

#entrance {
    position: absolute;
    z-index: 2;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--gray);
    -webkit-transition: top 0.8s;
    -moz-transition: top 0.8s;
    -ms-transition: top 0.8s;
    -o-transition: top 0.8s;
    transition: top 0.8s;
}

#entrance.active {
    top: 0;
}

#entrance .wrap {
    height: 100%;
    align-items: center;
    justify-content: center;
}

#entrance .wrap .content {
    font-size: 5rem;
    line-height: 1.8em;
    letter-spacing: var(--letter-spacing);
}

#entrance .wrap .content > span {
    display: block;
}

@media (max-width: 1600px){
    #entrance .wrap .content {
        font-size: 5vw;
    }
}

@media (max-width: 600px){
    #entrance .wrap .content {
        font-size: 30px;
    }
}


#page-wrapper {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    width: var(--page-size);
    max-width: 100%;
    height: calc(var(--page-size) * var(--page-height-factor));
    max-height: calc(var(--vh, 1vh) * 100);
    margin: 0 auto;
    padding: 0;
    position: relative;
    z-index: 1;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    justify-content: space-between;
    overflow: hidden;
}

@media(min-height: 1440px){
    #page-wrapper {
        max-height: calc(var(--page-size) * var(--page-height-factor));
    }
}

@media (max-width: 768px){
    #page-wrapper {
        max-height: 100%;
        height: 100%;
    }
}

#page-wrapper:after {
    content: '';
    display: block;
    width: var(--page-padding);
    height: 100%;
    background-color: var(--gray);
    position: absolute;
    z-index: 16;
    right: 0;
    opacity: 1;
}

.wrap {
    display: flex;
    flex-flow: row nowrap;
    align-items: stretch;
    padding: 0 var(--page-padding);
    box-sizing: border-box;
    justify-content: space-between;
}

section {
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 11;
    top: 100%;
    left: 0;
    overflow: hidden;
    -webkit-transition: top 0.8s;
    -moz-transition: top 0.8s;
    -ms-transition: top 0.8s;
    -o-transition: top 0.8s;
    transition: top 0.8s;
    background-color: var(--gray);
}

section.last,
section.active {
    display: block;
    height: 100%;
    top: 0;
    z-index: 13;
}

section.last {
    z-index: 12;
}



.screen {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 5;
    top: 100%; /*calc(-100% - var(--header-height));*/
    left: 0;
    background-color: var(--gray);
    overflow-y: auto;
    -webkit-transition: top 0.8s;
    -moz-transition: top 0.8s;
    -ms-transition: top 0.8s;
    -o-transition: top 0.8s;
    transition: top 0.8s;
    scrollbar-width: none;
}

.screen::-webkit-scrollbar {
    display: none;
}

section.active .screen.static {
    top: 0;
    z-index: 5;
}

.screen.static.active,
.screen.active {
    top: 0;
    z-index: 6;
}

.screen .wrap {
    align-items: stretch;
    min-height: 100%;
}

.wrap > .left {
    flex: 0 0 calc(var(--left-width) - 16px);
    width: calc(var(--left-width) - 16px);
}

.wrap > .right {
    flex: 0 0 calc(var(--right-width) - 16px);
    width: calc(var(--right-width) - 16px);
}

.screen .wrap .left,
.screen .wrap .right
{
    overflow: hidden;
    position: relative;
}

.screen .wrap .left .background,
.screen .wrap .right .background
{
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

header.header {
    flex: 0 0 var(--header-height);
    display: block;
    position: relative;
    z-index: 17;
    height: 100px;
    width: 100%;
    background-color: var(--gray);
    box-sizing: border-box;
}

@media (max-width: 768px){
    header.header {
        /*box-shadow: 0px 4px 10px 0px rgb(0 0 0 / 20%);*/
    }
}

header.header .wrap {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    height: 100%;
    justify-content: space-between;
}

header.header .wrap > .left {

}

header.header .wrap > .right {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: stretch;
    height: 100%;
}

header.header .logo {
    line-height: 1em;
}

header.header .tag {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    line-height: 1em;
}

header.header .logo .tag {
    margin-top: 0.5em;
}

@media (min-width: 801px) AND (max-width: 1200px){
    header.header .logo .tag {
        margin-top: 15px;
    }
}

@media (min-width: 550px) AND (max-width: 800px){
    header.header .logo .tag {
        margin-top: 2vw;
    }
}

@media (max-width: 549px){
    header.header .logo .tag {
        margin-top: 2vw;
    }
}

header.header .tag span,
header.header .logo a {
    display: inline-block;
    color: var(--black);
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1.45rem;
    line-height: 1em;
    white-space: nowrap;
}

header.header .logo a img {
    display: block;
    height: auto;
    max-width: 100%;
}

header.header .tag span {
    font-family: var(--serif-font);
    font-weight: 600;
}

header.header .menu {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    position: relative;
    height: 100%;
}

header.header .menu .menu-button {
    border-width: 0;
    padding: 0;
    margin: 0;
    text-transform: uppercase;
    font-family: var(--sans-serif-font);
    font-size: var(--small-link-size);
    font-weight: var(--sans-serif-font-weight);
    line-height: 1em;
    letter-spacing: var(--letter-spacing);
}

@media (max-width: 1200px){
    header.header {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
    }

    header.header .wrap {
        height: auto;
        width: 100%;align-items: stretch;}

    header.header .wrap > .right {
        justify-content: flex-end;
    }

    header.header .menu .menu-button {
        display: block;
    }
}

#main {
    flex: 1 1 100%;
    width: 100%;
    position: relative;
    z-index: 14;
    overflow: hidden;
}

#main > .inner {
    height: 100%;
    position: relative;
    z-index: 2;
}

#main > nav {
    display: block;
    position: absolute;
    z-index: 15;
    top: 0;
    right: -100%;
    bottom: 0;
    width: var(--right-width);
    -webkit-transition: right 0.8s;
    -moz-transition: right 0.8s;
    -ms-transition: right 0.8s;
    -o-transition: right 0.8s;
    transition: right 0.8s;
}

#main > nav.open {
    right: -16px;
}

@media (max-width: 1200px){
    #main > nav {
        width: calc(100% - var(--page-padding));
    }

    #main > nav.open {
        right: 0;
    }
}

#main > nav > .wrap {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    padding-left: 0;
    /*background-color: var(--darkgray);*/
    position: relative;
    box-sizing: border-box;
}

#main > nav > .wrap .background {
    position: absolute;
    z-index: 1;
    right: var(--page-padding);
    left: 0;
    top: 0;
    width: auto;
    height: 100%;
    opacity: 0.9;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-color: var(--darkgray);
}

#main > nav ul {
    position: relative;
    z-index: 2;
}

#main nav ul li {

}

#main > nav ul li a {
    color: rgb(142,142,142);
    font-weight: 400;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 1.7rem;
    line-height: 1.4em;
    letter-spacing: var(--letter-spacing);
}

#main > nav ul li a:hover,
#main > nav ul li a:active
{
    color: #FFFFFF;
}

#main > nav ul li.close  {
    margin-bottom: 1.7rem;
}

#main > nav ul li.meta {
    display: none !important;
}

#main > nav ul li.close  button.close-button {
    border-width: 0;
    background-color: transparent;
    margin: 0;
    padding: 0;
    color: rgb(142,142,142);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing);
    font-weight: 400;
    font-size: 1em;font-family: var(--sans-serif-font);}

#main > nav ul li.meta {

}

#main > nav ul li.meta.first {
    margin-top: 2rem;
}

#main > nav ul li.meta a {
    font-size: 1em;
}

@media (max-width: 768px){
    #main > nav ul li a {
        font-size: 1.1rem;
        line-height: 1.8em;
    }

    #main > nav ul li.close  button.close-button {
        font-size: var(--small-link-size);
    }
}



footer.footer {
    flex: 0 0 var(--footer-height);
    display: block;
    height: var(--footer-height);
    width: 100%;
    position: relative;
    z-index: 17;
    background-color: var(--gray);
}

@media (max-width: 768px){
    footer.footer {
        /*box-shadow: 0px -4px 10px 0px rgb(0 0 0 / 20%);*/
    }
}

footer.footer > .wrap {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    height: 100%;
    justify-content: space-between;
}

footer.footer > .wrap[data-footer] {
    display: none;
}

body.ProjectPage[data-screen="project"] footer.footer > .wrap[data-footer="project"],
body.ProjectPage[data-screen="projects"] footer.footer > .wrap[data-footer="projects"],
body.ProjectPage[data-screen="overview"] footer.footer > .wrap[data-footer="overview"],
body[data-section="section-home"] footer.footer > .wrap[data-footer="section-home"],
body[data-section="section-about"] footer.footer > .wrap[data-footer="section-about"],
body[data-section="section-press"] footer.footer > .wrap[data-footer="section-press"],
body[data-section="section-contact"] footer.footer > .wrap[data-footer="section-contact"] {
    display: flex;
}

footer.footer > .wrap > .left {

}

footer.footer > .wrap > .left > h1,
footer.footer > .wrap > .left > a {
    font-family: var(--serif-font);
    font-size: 1.35rem;
    font-weight: 500;
    color: var(--black);
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    letter-spacing: var(--letter-spacing);
}

@media (max-width: 500px) {
    footer.footer > .wrap > .left > h1,
    footer.footer > .wrap > .left > a {
        font-size: 4vw;
    }
}

footer.footer > .wrap > .right {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}

footer.footer > .wrap > .right .column-left {
    flex: 1 1 50%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
}

@media(max-width: 1200px){
    footer.footer > .wrap[data-footer="section-about"] > .right .column-left {
        justify-content: flex-end;
    }
}

footer.footer > .wrap > .right .column-right {
    flex: 1 1 50%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
}

footer.footer > .wrap > .right span,
footer.footer > .wrap > .right a {
    display: inline-block;
    text-transform: uppercase;
    font-family: var(--sans-serif-font);
    font-weight: var(--sans-serif-font-weight);
    font-size: var(--small-link-size);
    line-height: 1em;
    letter-spacing: var(--letter-spacing);
    color: var(--black);
    text-decoration: none;
    margin-right: 30px;
}

footer.footer > .wrap > .right a:last-child {
    margin-right: 0;
}

footer.footer > .wrap > .right .column-left a {
    color: var(--darkergray);
}

.ProjectPage footer.footer > .wrap > .right .column-left > span {
    margin-left: 80px;
}

.ProjectPage footer.footer > .wrap > .right .column-left > span > span {
    margin: 0;
}

.ProjectPage footer.footer > .wrap > .right .column-left > span,
.ProjectPage footer.footer > .wrap > .right .column-left > a {
    color: var(--black);
}

body[data-section="section-about"][data-screen="work"] footer.footer > .wrap > .right a[data-screen="work"],
body[data-section="section-about"][data-screen="portrait"] footer.footer > .wrap > .right a[data-screen="portrait"] {
    font-family: var(--sans-serif-font);
    font-weight: var(--sans-serif-font-weight);
    color: var(--black);
}



/*
****************
SCREEN Home
****************
*/

.screen.home {

}

.screen.home .wrap {

}

.screen.home .wrap .left {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
}

.screen.home .wrap .left .content {
    text-transform: uppercase;
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 1.5em;
    letter-spacing: var(--letter-spacing);
    margin-right: auto;
    margin-left: 14%;
}

@media (max-width: 1200px){
    .screen.home {

    }

    .screen.home .wrap {
        display: flex;
        flex-flow: row wrap;
        align-items: flex-start;
        justify-content: flex-start;
        overflow-y: auto;
    }

    .screen.home .wrap .left {
        order: 2;
        flex: 0 0 100%;
        width: 100%;
        min-height: 0;
        height: auto;
    }

    .screen.home .wrap .right {
        order: 1;
        flex: 0 0 100%;
        width: 100%;
        min-height: 0;
        height: auto;
    }

    .screen.home .wrap .right .background
    {
        position: relative;
        left: 0;
        top: 0;
        height: 50vh;
        width: 100%;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .screen.home .wrap .left .content {
        padding-right: 0;
        margin-left: auto;
    }
}

@media (max-width: 400px){
    .screen.home .wrap .left .content {
        font-size: 1.0rem;
    }
}


/*
****************
SCREEN Projects
****************
*/

.screen.projects {
    background: none;
    overflow: hidden;
}



.screen.projects .wrap {
    align-items: stretch;
    height: 100%;
}

.screen.projects .wrap > .left {
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-start;
    background-color: var(--gray);
    overflow-y: auto;
    max-height: 100%;
    scrollbar-width: none;
}

@media(max-width: 1200px){
    .screen.projects .wrap > .left {
        flex: 0 0 100%;
    }
}

.screen.projects .wrap > .left::-webkit-scrollbar {
    display: none;
}

.screen.projects .wrap > .left > ul {
    padding: 7vh 4vw 0 0;
    min-width: 20%;
    box-sizing: content-box;
    height: auto;
}

.screen.projects .wrap > .left > ul > li {
    padding: 0;
    margin: 0 0 0.7rem 0;
}

.screen.projects .wrap > .left > ul > li:before {
    display: none;
}

.screen.projects .wrap > .left > ul.column-1 {

}

.screen.projects .wrap > .left > ul.column-2 {

}

.screen.projects .wrap > .left > ul > li a,
.screen.projects .wrap > .left > ul > li > span {
    display: block;
    font-size: 1rem;
    line-height: 1.3em;
    font-weight: 400;
    text-transform: uppercase;
}

@media(max-height: 900px){
    .screen.projects .wrap > .left > ul > li a,
    .screen.projects .wrap > .left > ul > li > span {
        font-size: 1.8vh;
    }
}

@media(min-height: 901px){
    .screen.projects .wrap > .left > ul > li a,
    .screen.projects .wrap > .left > ul > li > span {
        font-size: 0.81rem;
    }
}


.screen.projects .wrap > .left > ul > li a:hover {
    color: var(--darkergray);
}

.screen.projects .wrap > .right {
    height: 100%;
}

.screen.projects .wrap > .right > ul.preview {
    height: 100%;
    position: relative;
    overflow: hidden;
    background-color: transparent;
    -webkit-transition: background-color 0.5s;
    -moz-transition: background-color 0.5s;
    -ms-transition: background-color 0.5s;
    -o-transition: background-color 0.5s;
    transition: background-color 0.5s;
}

.screen.projects .wrap > .right > ul.preview.active {
    background-color: var(--gray);
}

.screen.projects .wrap > .right > ul.preview li {
    display: block;
    padding: 0;
    margin: 0;
    position: absolute;
    left: 0;
    top: 100%;
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    transition: top 0.8s;
    overflow: hidden;
    opacity: 1;
    -webkit-transition: opacity 0.5s, top 0.8s;
    -moz-transition: opacity 0.5s, top 0.8s;
    -ms-transition: opacity 0.5s, top 0.8s;
    -o-transition: opacity 0.5s, top 0.8s;
    transition: opacity 0.5s, top 0.8s;
    /*-webkit-transition-delay: 0s, 0.5s;
    -moz-transition-delay: 0s, 0.5s;
    -ms-transition-delay: 0s, 0.5s;
    -o-transition-delay: 0s, 0.5s;
    transition-delay: 0s, 0.5s;*/
}

.screen.projects .wrap > .right > ul.preview li.last {
    z-index: 2;
    opacity: 0;
}

.screen.projects .wrap > .right > ul.preview li.active {
    z-index: 3;
}

.screen.projects .wrap > .right > ul.preview li.last,
.screen.projects .wrap > .right > ul.preview li.active {
    top: 0;
}

.screen.projects .wrap > .right > ul.preview li:before {
    display: none;
}

.screen.projects .wrap > .right > ul.preview li > a {
    display: block;
    height: 100%;
    width: 100%;
}

.screen.projects .wrap > .right > ul.preview li > a img {
    display: block;
    max-width: 100%;
    height: auto;
    opacity: 0;
}

@media (max-width: 1200px){
    .screen.projects {
        background-color: var(--gray);
    }

    .screen.projects .wrap > .left > ul > li a {
        /* font-size: 1rem; */
    }

    .screen.projects .wrap > .left > ul {
        padding: 10vh 4vw 10vh 0;
        width: 200px;
        min-width: 150px;
        max-width: 50%;
        box-sizing: content-box;
        height: auto;
    }
}


/*
****************
SCREEN Work / Portrait
****************
*/

.screen.work,
.screen.portrait {

}

.screen.work .right .background,
.screen.portrait .right .background {
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
}


.screen.work .right .background img,
.screen.portrait .right .background img {
    display: block;
    opacity: 0;
    height: auto;
    max-width: 100%;
}


.screen.work .content,
.screen.portrait .content {
    max-width: 50%;
    min-width: 80%;
}

.screen.work .content h2,
.screen.portrait .content h2,
.screen.work .content h1,
.screen.portrait .content h1
{
    margin-top: 100px;
}

@media (max-width: 1200px){
    .screen.portrait,
    .screen.work
    {

    }

    .screen.portrait .wrap,
    .screen.work .wrap
    {
        display: flex;
        flex-flow: row wrap;
        align-items: flex-start;
        justify-content: flex-start;
        overflow-y: auto;
    }

    .screen.portrait .wrap .left,
    .screen.work .wrap .left
    {
        order: 2;
        flex: 0 0 100%;
        width: 100%;
        min-height: 0;
        height: auto;
    }

    .screen.portrait .wrap .right,
    .screen.work .wrap .right
    {
        order: 1;
        flex: 0 0 100%;
        width: 100%;
        min-height: 0;
        height: auto;
    }

    .screen.portrait .wrap .right .background,
    .screen.work .wrap .right .background
    {
        position: relative;
        left: 0;
        top: 0;
        height: auto;
        width: 100%;
        background-position: center top;
        background-repeat: no-repeat;
        background-size: cover;

    }

    .screen.portrait .wrap .right .background img,
    .screen.work .wrap .right .background img {

    }

    .screen.work .content,
    .screen.portrait .content {
        max-width: 100%;
        /* min-width: 335px; */
        padding: 0 var(--content-padding) var(--content-padding);
        box-sizing: border-box;
    }

    .screen.work .content h2,
    .screen.portrait .content h2 {
        margin-top: 35px;
    }
}


/*
****************
SCREEN Press
****************
*/

.screen.press {
    overflow-y: hidden;
    max-height: 100%;
}

.screen.press .wrap {
    padding-top: 4vh;
    box-sizing: border-box;
    max-height: 100%;
}

.screen.press .wrap .left {
    scrollbar-width: none;
    overflow-y: scroll;
    max-height: 100%;
    padding-bottom: 4vh;
    box-sizing: border-box;
}

@media (max-width: 1200px){
    .screen.press .wrap .left {
        flex: 0 0 100%;
    }
}

.screen.press .wrap .left::-webkit-scrollbar {
    display: none;
}


.screen.press .wrap .left ul {
    display: block;
    width: 50%;
}

.screen.press .wrap .left ul li {
    margin: 0 0 1.44em 0;
    padding: 0;
    font-size: 1rem;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--black);
    cursor: pointer;
}

@media(max-height: 900px){
    .screen.press .wrap .left ul li {
        font-size: 1.8vh;
    }
}

@media(min-height: 901px){
    .screen.press .wrap .left ul li {
        font-size: 0.81rem;
    }
}

.screen.press .wrap .left ul li:hover,
.screen.press .wrap .left ul li:active,
.screen.press .wrap .left ul li.active {
    color: var(--darkergray);
}

.screen.press .wrap .left ul li.header,
.screen.press .wrap .left ul li.header:hover,
.screen.press .wrap .left ul li.header:active,
.screen.press .wrap .left ul li.header.active
{
    padding-bottom: 50px;
    color: var(--black);
    cursor: default;
}

.screen.press .wrap .left ul li:before {
    display: none;
}

.screen.press .wrap .left ul li .inner {
    display: flex;
    flex-flow: row nowrap;
    align-content: flex-start;
    width: 100%;
}

.screen.press .wrap .left ul li .inner .year {
    flex: 1 1 100px;
    max-width: 200px;
}

.screen.press .wrap .left ul li .inner .project {
    flex: 0 0 200px;
    max-width: 100%;
    width: 200px;
}

@media (max-width: 1200px){

    .screen.press .wrap .left ul {
        width: 100%;
    }
}

@media (max-width: 768px){

    .screen.press .wrap .left ul {
        display: block;
        width: 100%;
    }

    .screen.press .wrap .left ul li .inner .year {
        flex: 0 0 30%;
        max-width: 30%;
    }

    .screen.press .wrap .left ul li .inner .project {
        flex: 0 0 70%;
        max-width: 70%;
        width: 70%;
    }

    .screen.press .wrap .left ul li:hover,
    .screen.press .wrap .left ul li:active,
    .screen.press .wrap .left ul li.active {
        color: var(--darkergray);
        cursor: default;
    }
}

.screen.press .wrap .left ul li .preview {

}

.screen.press .wrap .left ul li .preview > div {
    background: none;
    height: 0;
    overflow: hidden;
}

.screen.press .wrap .left ul li.active .preview > div {
    height: auto;
    width: 600px;
    max-width: 100%;
}

.screen.press .wrap .left ul li .preview > div img {
    display: block;
    max-width: 100%;
    margin-top: 1rem;
}

.screen.press .wrap .right {

}

.screen.press .wrap .right ul.preview {
    display: block;
    height: 100%;
    position: relative;
}

.screen.press .wrap .right ul.preview li {
    position: absolute;
    z-index: 1;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--gray);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: contain;
    opacity: 1;
    -webkit-transition: top 0.5s, opacity 0.3s;
    -moz-transition: top 0.5s, opacity 0.3s;
    -ms-transition: top 0.5s, opacity 0.3s;
    -o-transition: top 0.5s, opacity 0.3s;
    transition: top 0.5s, opacity 0.3s;
    -webkit-transition-delay: 0s, 0s;
    -moz-transition-delay: 0s, 0s;
    -ms-transition-delay: 0s, 0s;
    -o-transition-delay: 0s, 0s;
    transition-delay: 0s, 0s;
}

.screen.press .wrap .right ul.preview li:before {
    display: none;
}

.screen.press .wrap .right ul.preview li.active {
    top: 0;
    opacity: 1;
    z-index: 2;

    -webkit-transition-delay: 0.6s, 0s;
    -moz-transition-delay: 0.6s, 0s;
    -ms-transition-delay: 0.6s, 0s;
    -o-transition-delay: 0.6s, 0s;
    transition-delay: 0.6s, 0s;
}

.screen.press .wrap .right ul.preview li img {
    opacity: 0;
}




/*
****************
SCREEN Contact
****************
*/

.screen.contact {
    display: flex;
    flex-flow: row nowrap;
}

.screen.contact .wrap {
    align-items: stretch;
    height: auto;
    min-height: auto;
    align-self: center;
    width: 100%;
}

.screen.contact .wrap .left {

}

.screen.contact .wrap .left .content {

}

.screen.contact .wrap .left .content .initials {
    margin-bottom: 1rem;
}

.screen.contact .wrap .left .content p {
    letter-spacing: var(--letter-spacing);
    text-transform: uppercase;
}

.screen.contact .wrap .left .content p span.contact-label {
    display: inline-block;
    min-width: 3.5rem;
}

.screen.contact .wrap .right {

}

.screen.contact .wrap .right ul {

}

.screen.contact .wrap .right ul li {
    margin: 0;
    padding: 0;
    font-size: 1.3rem;
    font-family: var(--sans-serif-font);
    font-weight: var(--sans-serif-font-weight);
    letter-spacing: var(--letter-spacing);
    text-transform: uppercase;
    line-height: 1em;
    margin-bottom: 0.5em;
}

.screen.contact .wrap .right ul li:before {
    display: none;
}

.screen.contact .wrap .right ul li a {

}

.screen.contact .wrap .right ul li a:hover,
.screen.contact .wrap .right ul li a:active
{
    color: var(--darkergray);
}

@media (max-width: 991px){
    .screen.contact .wrap {
        display: block;
        max-height: 100%;
    }

    .screen.contact .wrap .left,
    .screen.contact .wrap .right {
        width: 100%;
    }

    .screen.contact .wrap .meta-navigation {
        margin-top: 3rem;
    }

    .screen.contact .wrap .right ul li {
        display: block;
        margin-bottom: 1rem;
    }

    .screen.contact .wrap .right ul li a {
        font-size: 1rem;
    }
}


/*
****************
SCREEN Project
****************
*/
.screen.project {

}

.screen.project .wrap {
    height: 100%;
    overflow: hidden;
}

.screen.project .wrap ul.image-list {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}

.screen.project .wrap .image-list li {
    position: absolute;
    left: 0;
    top: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-color: var(--gray);
    -webkit-transition: opacity 0.3s, top 0.8s;
    -moz-transition: opacity 0.3s, top 0.8s;
    -ms-transition: opacity 0.3s, top 0.8s;
    -o-transition: opacity 0.3s, top 0.8s;
    transition: opacity 0.3s, top 0.8s;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.screen.project .wrap .image-list li.port {
    /* width: 50%; */
    background-size: 50%;
    background-position: right center;
}

.screen.project .wrap .image-list li.active,
.screen.project .wrap .image-list li.last {
    top: 0;
}

.screen.project .wrap .image-list li.last {
    z-index: 1;
    opacity: 0;
    -webkit-transition: opacity 0.3s, top 0.8s;
    -moz-transition: opacity 0.3s, top 0.8s;
    -ms-transition: opacity 0.3s, top 0.8s;
    -o-transition: opacity 0.3s, top 0.8s;
    transition: opacity 0.3s, top 0.8s;
    -webkit-transition-delay: 0.8s, 0.8s;
    -moz-transition-delay: 0.8s, 0.8s;
    -ms-transition-delay: 0.8s, 0.8s;
    -o-transition-delay: 0.8s, 0.8s;
    transition-delay: 0.8s, 0.8s;
}

.screen.project .wrap .image-list li.active {
    z-index: 2;
    opacity: 1;
    -webkit-transition: opacity 0.8s, top 0.8s;
    -moz-transition: opacity 0.8s, top 0.8s;
    -ms-transition: opacity 0.8s, top 0.8s;
    -o-transition: opacity 0.8s, top 0.8s;
    transition: opacity 0.8s, top 0.8s;
    -webkit-transition-delay: 0s, 0s;
    -moz-transition-delay: 0s, 0s;
    -ms-transition-delay: 0s, 0s;
    -o-transition-delay: 0s, 0s;
    transition-delay: 0s, 0s;
}

.screen.project .wrap .image-list li:before {
    display: none;
}

.screen.project .wrap .image-list li img {
    display: block;
    opacity: 0;
    width: 100%;
    max-height: 100%;
}

.screen.project .wrap .image-list li.project-intro {

}

.screen.project .wrap .image-list li.project-intro > .wrap {
    padding: 0;
    width: 100%;
}

.screen.project .wrap .image-list li.project-intro > .wrap > * {
    flex: 0 0 calc(var(--left-width) - 16px);
    width: calc(var(--left-width) - 16px);
}

.screen.project .wrap .image-list li.project-intro > .wrap .teaser {
    order: 2;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.screen.project .wrap .image-list li.project-intro > .wrap .description {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}

.screen.project .wrap .image-list li.project-intro > .wrap .description .inner {
    max-width: 60%;
    margin: 0 0 0 14%;
}

.screen.project .wrap .image-list li.project-intro > .wrap .description .inner p:last-child {
    margin-bottom: 0;
}

.screen.project .wrap .image-list li.project-intro > .wrap .description .inner h1,
.screen.project .wrap .image-list li.project-entry > .text .inner h2 {
    font-family: var(--sans-serif-font);
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 1em;
    letter-spacing: 0.07em;
}

@media (max-width: 1200px){
    .screen.project > .wrap {
        overflow-y: auto;
        height: auto;
    }

    .screen.project .wrap ul.image-list {
        height: auto;
        overflow: hidden;
    }

    .screen.project .wrap .image-list li {
        display: block;
        position: relative;
        top: 0;
        height: auto;
        opacity: 1;
        overflow: hidden;
        background: none;
        cursor: default;
        margin-bottom: var(--content-padding);
    }

    .screen.project .wrap .image-list li > .wrap {
        height: auto;
        display: block;
    }

    .screen.project .wrap .image-list li.project-intro > .wrap .teaser {
        display: block;
        background: none;
        width: 100%;
    }

    .screen.project .wrap .image-list li.project-intro > .wrap > * {
        display: block;
        width: 100%;
    }

    .screen.project .wrap .image-list li img {
        display: block;
        opacity: 1;
        width: 100%;
        max-height: none;
        max-width: 100%;
    }

    .screen.project .wrap .image-list li.project-intro > .wrap .description .inner {
        max-width: 100%;
        margin: 0 auto;
        padding: calc(var(--content-padding)*2) var(--content-padding);
        padding-bottom: var(--content-padding);
    }
}


.screen.project .wrap .image-list li.project-entry {
    display: flex;
    flex-flow: row nowrap;
    align-items: stretch;
    justify-content: space-between;
}

.screen.project .wrap .image-list li.project-entry .image,
.screen.project .wrap .image-list li.project-entry .text
{
    flex: 0 0 calc(var(--left-width) - 16px);
    width: calc(var(--left-width) - 16px);
}

.screen.project .wrap .image-list li.project-entry .image.image-right.padded {
    background-size: 80% auto;
    background-position: right center;}

.screen.project .wrap .image-list li.project-entry .image.image-left.image-full,
.screen.project .wrap .image-list li.project-entry .image.image-right.image-full
{
    flex: 0 0 100%;
    width: 100%;
}

.screen.project .wrap .image-list li.project-entry .image.image-left.image-full.port,
.screen.project .wrap .image-list li.project-entry .image.image-right.image-full.port
{
    flex: 0 0 calc(var(--left-width) - 16px);
    width: calc(var(--left-width) - 16px);
}

.screen.project .wrap .image-list li.project-entry .image.image-right.image-full.port {
    margin-left: auto;
}

.screen.project .wrap .image-list li.project-entry .image {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.screen.project .wrap .image-list li.project-entry .image-left {

}

.screen.project .wrap .image-list li.project-entry .image-left.padded {
    background-size: 100%;
    background-position: left center;
}

.screen.project .wrap .image-list li.project-entry .image-left.image-full {

}

.screen.project .wrap .image-list li.project-entry .image-right {

}

.screen.project .wrap .image-list li.project-entry .image-left + .image-right.port {
    background-position: right;
    background-size: cover;
}

.screen.project .wrap .image-list li.project-entry .image-right.image-full {

}

.screen.project .wrap .image-list li.project-entry .text {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    width: 100%;
}



.screen.project .wrap .image-list li.project-entry .text .inner {
    max-width: 60%;
}

.screen.project .wrap .image-list li.project-entry .text.text-left .inner {
    margin-left: 14%;
}

.screen.project .wrap .image-list li.project-entry .text .inner p:last-child {
    margin-bottom: 0;
}

.screen.project .wrap .image-list li.project-entry .text.text-left {}

.screen.project .wrap .image-list li.project-entry .text.text-right .inner {
    margin: 0 auto;
}

@media (max-width: 1200px){

    .screen.project .wrap .image-list li.project-entry {
        flex-flow: row wrap;
    }

    .screen.project .wrap .image-list li.project-entry.combo {
        flex-flow: row wrap;
    }

    .screen.project .wrap .image-list li.project-entry .text,
    .screen.project .wrap .image-list li.project-entry .image,
    .screen.project .wrap .image-list li.project-entry .image.image-left.image-full.port,
    .screen.project .wrap .image-list li.project-entry .image.image-right.image-full.port
    {
        flex: 0 0 100%;
        margin-left: 0;
    }

    .screen.project .wrap .image-list li.project-entry.combo .image {
        flex: 0 0 100%;
    }

    .screen.project .wrap .image-list li.project-entry.combo .image-left {
        margin-bottom: var(--content-padding);
    }

    .screen.project .wrap .image-list li.project-entry.combo .image.image-right {
        background-size: 0px 0px;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
    }

    .screen.project .wrap .image-list li.project-entry.combo .image.image-right img {
        display: block;
        /* width: 80%; */
        margin: 0 0 0 auto;
    }

    .screen.project .wrap .image-list li.project-entry .text .inner {
        max-width: 100%;
        margin: 0 auto;
        padding: calc(var(--content-padding)*2) var(--content-padding);
        padding-bottom: var(--content-padding);
    }

    .screen.project .wrap .image-list li.project-entry .text.text-left .inner {
        padding-bottom: calc(var(--content-padding)*2);
        padding-top: var(--content-padding);
        margin-left: auto;
    }

}

/*
****************
SCREEN Overview
****************
*/

.screen.overview {

}

.screen.overview .wrap {
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
    scrollbar-width: none;
}

.screen.overview .wrap::-webkit-scrollbar {
    display: none;
}


.screen.overview .wrap ul.image-grid {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: stretch;
    /* width: calc(100% + calc(var(--content-padding)*2)); */
    position: relative;
    left: calc(-1 * calc(var(--content-padding) / 4));
    right: calc(-1 * calc(var(--content-padding) / 4));
    min-width: calc(100% + calc(var(--content-padding) / 2));
}

.screen.overview .wrap .image-grid li {
    margin: 0;
    padding: 0 calc(var(--content-padding) / 4);
    background-repeat: no-repeat;
    background-position: top left;
    background-size: cover;
    overflow: hidden;
    margin-bottom: calc(var(--content-padding) / 2);
    cursor: pointer;
    opacity: 1;
    -webkit-transition: opacity 0s;
    -moz-transition: opacity 0s;
    -ms-transition: opacity 0s;
    -o-transition: opacity 0s;
    transition: opacity 0s;
    box-sizing: border-box;
    position: relative;
}

.screen.overview .wrap .image-grid li:hover {
    opacity: 0.3;
    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    -ms-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
    transition: opacity 0.3s;
}

.screen.overview .wrap .image-grid li.combo {
    display: flex;
    flex-flow: row nowrap;
    align-items: stretch;
    padding: 0;
    flex: 0 0 50%;
    width: 50%;
}

.screen.overview .wrap .image-grid li.combo .left,
.screen.overview .wrap .image-grid li.combo .right
{
    flex: 0 0 50%;
    width: 50%;
    padding: 0 calc(var(--content-padding) / 4) 0 calc(var(--content-padding) / 4);
    box-sizing: border-box;
}

.screen.overview .wrap .image-grid li.combo .right {
    padding: 0 calc(var(--content-padding) / 4) 0 calc(var(--content-padding) / 4);
}

.screen.overview .wrap .image-grid li:before {
    display: none;
}

.screen.overview .wrap .image-grid li.port {
    flex: 0 0 25%;
    width: 25%;
}

.screen.overview .wrap .image-grid li.land {
    flex: 0 0 50%;
    width: 50%;
}

.screen.overview .wrap .image-grid li img {
    display: block;
    position: relative;
    z-index: 2;
    opacity: 0;
    height: auto;
    max-width: 100%;
}

.screen.overview .wrap .image-grid li .background {
    position: absolute;
    top: 0;
    left: calc(var(--content-padding) / 4);
    right: calc(var(--content-padding) / 4);
    /* width: calc(100% - calc(var(--content-padding) / 4)); */
    /* width: 100%; */
    height: 100%;
    z-index: 1;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.screen.overview .wrap .image-grid li.combo .background {
    left: calc(var(--content-padding) / 4);
    right: calc(var(--content-padding) / 4);
    width: auto;
}

.screen.overview .wrap .image-grid li.combo .left.port .background {
    right: calc(var(--content-padding) / 4);
    left: calc(var(--content-padding) / 2);
}

.screen.overview .wrap .image-grid li.combo .left.port .background {
    left: calc(var(--content-padding) / 4);
}

.screen.overview .wrap .image-grid li.combo .right .background {
    /* width: 100%; */
    height: 100%;
    /* background-size: auto auto; */
}

.gallery-counter {
    white-space: nowrap;
}