/* Webfonts:Neue haas unica pro light & Swiss 925 from myfonts.net */
@import url("//hello.myfonts.net/count/3845f4");
@font-face {font-family: 'Swiss924BTWXX-Regular';src: url("webfonts/3845F4_0_0.5e634f354a66.eot");src: url("webfonts/3845F4_0_0.5e634f354a66.eot?#iefix") format('embedded-opentype'),url("webfonts/3845F4_0_0.2ba82c44f810.woff2") format('woff2'),url("webfonts/3845F4_0_0.e899ee39d104.woff") format('woff'),url("webfonts/3845F4_0_0.64f2a4e44ab1.ttf") format('truetype');}
@font-face {font-family: 'NeueHaasUnicaW1G-Light';src: url("webfonts/3845F4_1_0.8c242ff1e5ea.eot");src: url("webfonts/3845F4_1_0.8c242ff1e5ea.eot?#iefix") format('embedded-opentype'),url("webfonts/3845F4_1_0.662f832ce481.woff2") format('woff2'),url("webfonts/3845F4_1_0.0f0e9852a4aa.woff") format('woff'),url("webfonts/3845F4_1_0.ff7a57c99a41.ttf") format('truetype');}

/* Eric Meyer's Reset CSS v2.0 - cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

/* Natural box layout model - paulirish.com */
html {
  box-sizing: border-box;
}

html, body {
    height: 100%;
}

*, *:before, *:after {
  box-sizing: inherit;
}

/* Design implemented by Thor Merlin Lervik - thor-merlin.no */
body {
    font-family: NeueHaasUnicaW1G-Light;
    color: #231f20;
}

a {
    color: #231f20;
}

main {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

.mobile {
    display: block;
}

.desktop {
    display: none;
}

.marcel,
.lelienhof {
    font-family: Swiss924BTWXX-Regular;
    /* Prevent selection of text when opening/closing menu */
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.marcel-wrapper,
.lelienhof-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    background: #fff;
    overflow: hidden;
}

.marcel-wrapper {
    width: 22.5vw;
    height: 35vw;
    cursor: pointer;
}

.marcel-wrapper.hidden {
    display: none;
}

.marcel {
    line-height: 36vw;
    font-size: 35.25vw;
    padding-left: 2.6vw;
    letter-spacing: 20vw;
}

.lelienhof-wrapper {
    display: none;
}

.marcel-wrapper .menu-area {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 22.5vw;
}

.category-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    font-family: Swiss924BTWXX-Regular;
    font-size: 9.6vw;
    line-height: 7.5vw;
    letter-spacing: 0.6vw;
    padding-top: 3.75vw;
    color: #656263;
    text-transform: uppercase;
    /* Prevent selection of text when opening/closing menu */
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.category-menu.visible {
    display: block;
}

.category-menu li {
    background: #fff;
    margin-bottom: 2.5vw;
    padding: 2.5vw 0;
    padding-left: 5vw;
    width: 63.75vw;
    cursor: pointer;
}

.category-menu li.close {
    color: #231f20;
    width: 13.75vw;
}

.category-menu li.close img {
    height: 7.5vw;
}

.category-menu li.page {
    color: #231f20;
}

.category-menu li.active {
    position: relative;
    color: #231f20;
}

.category-menu .categories:hover li {
    color: #656263;
}

.category-menu .categories:hover li.active {
    color: #231f20;
}

.category-menu .categories li:hover {
    color: #231f20;
}

.category-menu li.active:before {
    display: block;
    position: absolute;
    top: 40%;
    right: 94%;
    width: 0.75vw;
    height: 0.75vw;
    background: #231f20;
    content: '';
}

.project,
.mobile-project {
    position: absolute;
    background-size: cover;
    background-position: center;
}

.visited {
    opacity: 0.25;
}

.project .image-area,
.mobile-project .image-area {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
}

.mobile-project .text {
    display: none;
}

.project {
    display: none;
}

.projects-wrapper {
    position: relative;
}

.projects-wrapper.filtered .mobile-project {
    opacity: 0.0;
    pointer-events: none;
}

.projects-wrapper.filtered .mobile-project.visible {
    opacity: 1.0;
    pointer-events: auto;
}

.about-content {
    display: none;
    padding: 0 3.75vw;
    padding-top: 39vw;
}

.about-content.visible {
    display: block;
}

.about-content .header {
    font-family: Swiss924BTWXX-Regular;
    font-size: 6.37vw;
    line-height: 7.5vw;
    letter-spacing: 0.267vw;
    text-transform: uppercase;
}

.about-content .bread p {
    margin-top: 4vw;
    font-size: 3.66vw;
    line-height: 4.75vw;
}

.about-content .metadata {
    display: flex;
    margin-top: 5vw;
    margin-bottom: 8.75vw;
    font-size: 3vw;
    line-height: 4.5vw;
    justify-content: space-between;
}

.project-content {
    display: none;
}

.project-content.visible {
    display: block;
    padding: 0 3.75vw;
    padding-top: 39vw;
}

.project-content .header {
    font-family: Swiss924BTWXX-Regular;
    font-size: 6.37vw;
    line-height: 7.5vw;
    letter-spacing: 0.267vw;
    padding-bottom: 2vw;
    text-transform: uppercase;
}

.project-content .works img {
    width: 100%;
    margin-bottom: 3.75vw;
}

.project-content .works .video {
    width: 100%;
    height: 52vw;
    margin-bottom: 3.75vw;
}

.project-content .works .video iframe {
    background: #000;
    width: 100%;
    height: 100%;
}

/* Desktop version */
@media (min-aspect-ratio: 85/100) {
    main {
        flex-direction: row;
    }

    .mobile {
        display: none;
    }

    .desktop {
        display: block;
    }

    .marcel,
    .lelienhof {
        padding-left: 1.3vh;
        font-size: 20.45vh;
        letter-spacing: 2.605vh;
    }

    .marcel {
        padding-top: 2vh;
        line-height: 16.7vh;
    }

    .lelienhof {
        line-height: 20.6vh;
    }

    .marcel-wrapper {
        height: 20vh;
        width: 62vh;
        transition: width 1.5s;
        transition-delay: 1.25s;
    }

    .lelienhof-wrapper {
        display: block;
        top: 22vh;
        height: 20vh;
        width: 83vh;
        transition: width 1.5s;
        transition-delay: 1.25s;
    }

    .marcel-lelienhof.animate .marcel-wrapper {
        width: 12.5vh;
    }

    .marcel-lelienhof.animate .lelienhof-wrapper {
        width: 0;
    }

    main {
        overflow-x: scroll;
        overflow-y: hidden;
    }

    .marcel-wrapper .menu-area {
        width: 12.5vh;
    }

    .category-menu {
        font-size: 3.7vh;
        line-height: 3vh;
        letter-spacing: 0.35vh;
        padding-top: 2vh;
    }

    .category-menu li {
        margin-bottom: 1vh;
        padding: 1vh 0;
        width: 24vh;
        padding-left: 2vh;
    }

    .category-menu li.close {
        display: none;
    }

    .category-menu li.active:before {
        width: 0.3vh;
        height: 0.3vh;
    }

    .mobile-project {
        display: none;
    }

    .projects-wrapper.filtered .project,
    .projects-wrapper.filtered .mobile-project.visible {
        opacity: 0.25;
        pointer-events: none;
    }

    .projects-wrapper.filtered .project.visible.visited,
    .projects-wrapper.filtered .mobile-project.visible.visited {
        opacity: 0.65;
    }

    .projects-wrapper.filtered .project.visible {
        opacity: 1.0;
        pointer-events: auto;
    }

    .project {
        display: block;
    }

    .project .text {
        display: block;
        position: absolute;
        top: 100%;
        bottom: 0;
        width: 100%;
        padding: 0 1.2vh;
        padding-top: 0.5vh;
        font-size: 1.2vh;
        line-height: 2vh;
        opacity: 0.0;
        transition: opacity 1s;
        transition-delay: 1.6s;
    }

    .project .image-area {
        background: #231f20;
        opacity: 1.0;
        transition: opacity 1s;
        transition-delay: 1.6s;
    }

    main.animate .project .image-area {
        opacity: 0.0;
    }

    main.animate .project .text {
        opacity: 1.0;
    }

    .about-content {
        position: relative;
        padding: 0;
        padding-left: 27vh;
        padding-top: 17.7vh;
        padding-right: 17vh;
    }

    .about-content .header {
        font-size: 3vh;
        line-height: 3.3vh;
        width: 35vh;
        letter-spacing: 0.15vh;
    }

    .about-content .bread p {
        margin-top: 2vh;
        font-size: 1.5vh;
        line-height: 2vh;
        width: 35vh;
    }

    .about-content .metadata {
        position: absolute;
        top: 6.5vh;
        left: 27vh;
        width: 35vh;
        margin-top: 0;
        margin-bottom: 0;
        font-size: 1.2vh;
        line-height: 2vh;
    }

    .content-wrapper {
        height: 100%;
    }

    .project-content.visible {
        display: flex;
        height: 100%;
        padding: 0;
    }

    .project-content .header {
        width: 35vh;
        margin-top: 17.7vh;
        margin-right: 14vh;
        margin-left: 27vh;
        padding: 0;

        line-height: 3.3vh;
        letter-spacing: 0.15vh;
        font-size: 3vh;

        flex-shrink: 0;
    }

    .project-content .works {
        display: inline-flex;
        height: 100%;
        padding-top: 8vh;
        padding-bottom: 8vh;
        margin-right: -2vh;
    }

    .project-content .works img {
        height: 100%;
        width: unset;
        margin: 0;

        margin-left: 100vh;
        transition: margin-left 2s;
    }

    .project-content .works img.animate {
        margin-left: 8vh;
    }

    .project-content .works .video {
        position: relative;
        width: 145vh;
        height: unset;
        margin-left: 100vh;
        margin-bottom: unset;
    }

    .project-content .works .video.animate {
        transition: margin-left 2s;
        margin-left: 8vh;
    }

    .project-content .works .video .no-event-stencil {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 8vh;
    }

    .project-content .works:last-child {
        margin-right: 8vh;
    }

    @-moz-document url-prefix() {
        .project-content .works {
            justify-content: end;
        }
    }

    @media (max-height: 800px) {
        .project .text {
            display: none;
        }
    }
}