@import url("flexboxgrid.css");
@import url("normalize.css");
@import url("locomotive-scroll.css");

body,
button,
input,
select,
optgroup,
ul,
textarea {
    color: inherit;
    font-family: "Kern-Regular", Helvetica, sans-serif;
    font-size: calc(13px + (12 - 8) * ((100vw - 300px) / (1800 - 300)));
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}
#logo_text{
    line-height: 0.9;
    letter-spacing: -0.02em;
    font-size: calc(5em + (48 - 24) * ((100vw - 300px) / (1800 - 300)));
}

#logo {
    max-width: 600px; 
    filter: invert(1.00);  
    margin-left: calc(50vw - 1.5vw - 300px); 
    margin-right: calc(50vw - 1.5vw - 300px);
    margin-top: 130px;
}

@media only screen and (max-width:768px) {
    #logo {
        margin-left: auto; 
        margin-right: auto;
    }
}

p,
a,
h2 {
    color: inherit;
    cursor: none;
    margin-block-start: -0.20em;
    margin-block-end: -0.14em
}

* {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

img {
    pointer-events: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    -ms-user-drag: none;
    user-drag: none
}

h1,
h2,
h3,
h4,
h5,
h6 {
    clear: both;
    font-weight: normal;
    text-transform: uppercase;
    padding-bottom: 1em
}

@media only screen and (max-width:768px) {
    p,
    a {
        font-size: 1em
    }
}

.l6 {
    font-size: 15.4vw;
    line-height: 0.9em;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    margin-block-start: -0.14em;
    margin-block-end: 0;
    margin-inline-start: -0.06em
}

@media only screen and (max-width:768px) {
    .l6 {
        font-size: 11.2vw;
        line-height: 0.9em;
        letter-spacing: -0.05em;
        text-transform: uppercase;
        margin-block-start: -0.14em;
        margin-block-end: 0;
        margin-inline-start: -0.06em;
        margin-inline-end: 0.05em
    }
}

.l5 {
    font-size: 12vw;
    line-height: 0.9em;
    letter-spacing: -0.05em;
    text-transform: uppercase;
    margin-block-start: -0.14em;
    margin-block-end: -0.07em;
    margin-inline-start: -0.06em;
    margin-inline-end: 0.05em
}

.--start0 {
    margin-inline-start: 0
}

@media only screen and (max-width:1200px) {
    .l5 {
        font-size: 16.5vw
    }
}

h1,
.l4 {
    font-size: calc(5em + (48 - 24) * ((100vw - 300px) / (1800 - 300)));
    line-height: 0.8;
    letter-spacing: -0.04em;
    margin-block-start: -0.09em;
    margin-block-end: -0.12em;
    margin-inline-start: -0.03em
}

@media only screen and (max-width:768px) {
    h1,
    .l4 {
        font-size: calc(3.7em + (48 - 24) * ((100vw - 300px) / (1800 - 300)))
    }
}

.l3 {
    margin-top: -0.2em !important;
    font-size: calc(2.7em + (48 - 24) * ((100vw - 300px) / (1800 - 300)));
    line-height: 1;
    letter-spacing: -0.02em
}

@media only screen and (max-width:768px) {
    .l3 {
        font-size: calc(2.2em + (48 - 24) * ((100vw - 300px) / (1800 - 300)))
    }
}

.l2,
h3 {
    margin-top: -0.18em !important;
    font-size: calc(1.7em + (36 - 24) * ((100vw - 300px) / (1800 - 300)));
    line-height: 1;
    padding-bottom: 0
}

h3 {
    line-height: .85
}

.l1,
.l1-2 {
    margin-top: -0.15em !important;
    font-size: calc(1.2em + (12 - 10) * ((100vw - 300px) / (1800 - 300)));
    line-height: 1.15;
    letter-spacing: -0.022em
}

@media only screen and (max-width:1200px) {
    .l1-2 {
        margin-top: -0.18em !important;
        font-size: calc(1.7em + (36 - 24) * ((100vw - 300px) / (1800 - 300)));
        line-height: 1;
        padding-bottom: 0
    }
}

.s0,
h2 {
    font-size: 1em !important
}

.s1 {
    font-size: 0.8em;
    line-height: 1
}

.s2 {
    font-size: 0.6em
}

.--upper {
    text-transform: uppercase
}

.--none {
    text-transform: none
}




html,
body {
    background-color: #858585;
    width: 100vw;
    height: 100% !important;
    overflow: hidden;
    height: -webkit-fill-available !important
}

html {
    box-sizing: border-box
}

.is-loading a {
    pointer-events: none
}

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

ul {
    padding: 0;
    margin: 0;
    list-style: none
}

figure {
    margin: var(--outer-margin) 0
}

table {
    margin: 0 0 var(--outer-margin) 0;
    width: 100%
}

::selection,
::-moz-selection {
    background: rgba(255, 255, 255, 0.2)
}

.app {
    overflow: hidden
}

#wrapper {
    position: relative;
    width: 100vw;
    height: 100%;
    overflow: hidden;
    min-width: 320px;
    visibility: hidden;
    -webkit-overflow-scrolling: touch
}

#js-scroll {
    position: relative;
    overflow: hidden
}

#page {
    width: 100%;
    position: relative;
    background-color: white;
    overflow: hidden
}

#content {
    position: relative;
    z-index: 90
}

#footer {
    padding: 0 0 var(--half-gutter-width) 0
}

#footer div:first-child {
    padding: 0 0 calc(var(--half-gutter-width) * 1.5) 0 !important
}

@font-face {
    font-family: "Kern-Regular";
    src: url("../../assets_main/fonts/Kern-Regular.eot");
    src: url("../../assets_main/fonts/Kern-Regular.eot?#iefix") format("embedded-opentype"), url("../../assets_main/fonts/Kern-Regular.otf") format("opentype"), url("../../assets_main/fonts/Kern-Regular.svg") format("svg"), url("../../assets_main/fonts/Kern-Regular.ttf") format("truetype"), url("../../assets_main/fonts/Kern-Regular.woff") format("woff"), url("../../assets_main/fonts/Kern-Regular.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: block
}

a,
a:hover,
a:focus,
a:active,
a:visited {
    cursor: none;
    color: inherit;
    outline: 0;
    text-decoration: none
}

a.underline {
    position: relative;
    padding-bottom: 0px;
    text-decoration: none
}

a.underline::before,
a.underline::after {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    bottom: 1px;
    height: 1px;
    width: 100%;
    opacity: .25;
    transition: width 0s ease;
    pointer-events: none
}

a.underline::after {
    left: 0;
    right: auto;
    transition: width 0.3s ease
}

a.underline:hover::before {
    width: 0%;
    transition: width 0.3s ease
}

a.underline:hover::after {
    width: 0%;
    background: inherit;
    transition: width 0s ease
}

#loader {
    position: absolute;
    width: 100vw;
    height: 100vh;
    max-height: -webkit-fill-available;
    color: white !important;
    z-index: 999;
    background: black;
    overflow: hidden
}

#loader .container {
    width: 100vw;
    overflow: hidden
}

#loader p {
    transform: translateY(100%)
}

.row,
.row-inner {
    padding-top: calc(30px + 20 * (100vw - 380px) / 1300);
    padding-bottom: calc(30px + 20 * (100vw - 380px) / 1300);
    box-sizing: border-box;
    display: flex;
    flex: 0 1 auto;
    flex-direction: row;
    flex-wrap: wrap
}

.row:first-child,
.row-inner:first-child {
    padding-top: 0px
}

.row:last-child {
    padding-bottom: 0
}

.col-inner,
.row-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: calc(var(--outer-margin) * 2) !important
}

.row-inner {
    padding-bottom: 0 !important
}

.has-chars div {
    margin-left: -0.7em;
    padding-left: 0.7em;
    display: inline-block;
    overflow: hidden
}

.has-chars div p {
    position: relative;
    display: inline-block;
    transition: transform 1s cubic-bezier(0.16, 1.05, 0.3, 1);
    transform: translateY(0em)
}

.has-chars div:nth-child(2) p {
    margin-left: -0.05em
}

.is-unseen .has-chars div p {
    transform: translateY(100%)
}

.has-chars div:nth-child(1) p {
    transition-delay: calc(100ms + (80ms * 3))
}

.has-chars div:nth-child(2) p {
    transition-delay: calc(100ms + (80ms * 5))
}

.has-words>div {
    padding-bottom: 0
}

.is-unseen .has-words .word {
    position: relative;
    display: block;
    opacity: 1;
    transform: translateY(1em)
}

.has-words>div .word {
    position: relative;
    display: inline-block
}

.has-words .word {
    transition: transform 1.2s cubic-bezier(0.16, 1.1, 0.3, 1);
    transform: translateY(0em)
}

.has-words>div:nth-child(1) .word {
    transition-delay: calc(100ms + (80ms * 1))
}

.has-words>div:nth-child(2) .word {
    transition-delay: calc(100ms + (80ms * 2))
}

.has-words>div:nth-child(3) .word {
    transition-delay: calc(100ms + (80ms * 3))
}

.has-words>div:nth-child(4) .word {
    transition-delay: calc(100ms + (80ms * 4))
}

.has-words>div:nth-child(5) .word {
    transition-delay: calc(100ms + (80ms * 5))
}

.has-words>div:nth-child(6) .word {
    transition-delay: calc(100ms + (80ms * 6))
}

.has-words>div:nth-child(7) .word {
    transition-delay: calc(100ms + (80ms * 7))
}

.has-lines .word {
    display: inline-block;
    transform: translateY(8vh);
    opacity: 0
}

.has-lines .word.is-inview {
    transition: opacity .4s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 1;
    transition-delay: calc(100ms * var(--char-index));
    transform: translateY(0px)
}

.col-image {
    display: flex;
    justify-content: center;
    overflow: hidden;
    padding-left: 0 !important;
    padding-right: 0 !important
}

.l5.col-image {}

.col-image-portrait {
    height: 100%;
    max-height: 25vw
}

.col-image-portrait-2 {
    width: 100%;
    height: auto
}

.col-image-portrait-2 img {
    width: 100%;
    height: auto;
    transform-origin: top center
}

@media only screen and (max-width:1024px) {
    .col-image-portrait {
        height: 55vw;
        max-height: 55vw !important
    }
}

@media only screen and (max-width:768px) {
    .col-image-portrait {
        height: 60vw !important;
        max-height: 60vw !important
    }
}

.col-image-6 {
    height: 5em
}

@media only screen and (max-width:768px) {
    .col-image-6 {
        height: 60vw !important;
        max-height: 60vw !important
    }
}

.col-image__inner,
.col-image__inner-2 {
    pointer-events: none;
    display: flex;
    justify-content: center
}

.col-image__inner img {
    object-fit: cover;
    width: 100%;
    height: auto;
    transform-origin: top center;
    transform: scale(1.08)
}

.col-image__inner-2 img {
    object-fit: cover;
    width: 100%;
    height: auto;
    transform-origin: top center
}

.col-xs-padding {
    padding-right: var(--half-gutter-width);
    padding-left: var(--half-gutter-width);
    padding-bottom: var(--gutter-width)
}

@media only screen and (max-width:768px) {
    .col-xs-padding {
        padding-top: calc(3 * var(--gutter-width));
        padding-bottom: calc(4 * var(--gutter-width))
    }
}

#single {
    position: absolute;
    z-index: 95;
    outline: 0;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: flex-start;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0)
}

#clone {
    pointer-events: none;
    position: relative;
    outline: 0;
    z-index: 100;
    pointer-events: none;
    background-color: black
}

#clone img {
    width: 100%;
    mix-blend-mode: difference;
    height: auto
}

#cookie {
    position: fixed;
    z-index: 999;
    outline: 0;
    height: auto;
    bottom: 0;
    right: 0;
    display: flex;
    padding: var(--half-gutter-width) var(--outer-margin);
    margin: var(--outer-margin);
    background: black;
    color: white;
    border-radius: var(--outer-margin)
}

#cookie .ok {
    margin-left: var(--outer-margin);
    cursor: pointer !important
}

.project-grid {}

.project {
    display: flex;
    box-sizing: border-box;
    flex: 0 0 auto;
    padding-right: var(--half-gutter-width);
    padding-left: var(--half-gutter-width);
    padding-bottom: calc(var(--gutter-width)*8);
    transition: 1s transform cubic-bezier(0.16, 1, 0.3, 1)
}

@media only screen and (max-width:1024px) {
    .project {
        padding-bottom: calc(var(--gutter-width)*5) !important
    }
}

@media only screen and (max-width:768px) {
    .project {
        padding-bottom: calc(var(--gutter-width)*3) !important
    }
}

.project:nth-child(9n-8) {
    flex-basis: 41.66666667%;
    max-width: 41.66666667%;
    margin-right: 8.33333333%
}

.project:nth-child(9n-8)[data-img="landscape"] {
    flex-basis: 50%;
    max-width: 50%;
    margin-left: 0;
    margin-right: 0
}

.project:nth-child(9n-7) {
    flex-basis: 25%;
    max-width: 25%;
    margin-left: 25%;
    align-items: flex-end
}

.project:nth-child(9n-7)[data-img="landscape"] {
    flex-basis: 33.33333333%;
    max-width: 33.33333333%;
    margin-left: 16.66666666%;
    margin-right: 0;
    align-items: flex-end
}

.project:nth-child(9n-6) {
    flex-basis: 33.33333333%;
    max-width: 33.33333333%;
    margin-left: 16.66666666%;
    margin-right: 0
}

.project:nth-child(9n-6)[data-img="landscape"] {
    flex-basis: 41.66666667%;
    max-width: 41.66666667%;
    margin-left: 0;
    margin-right: 8.33333333%
}

.project:nth-child(9n-5) {
    flex-basis: 33.33333333%;
    max-width: 33.33333333%;
    margin-left: 8.33333333%;
    margin-right: 8.33333333%;
    align-items: center
}

.project:nth-child(9n-5)[data-img="landscape"] {
    flex-basis: 33.33333333%;
    max-width: 33.33333333%;
    margin-left: 8.33333333%;
    margin-right: 8.33333333%;
    align-items: center
}

.project:nth-child(9n-4) {
    flex-basis: 25%;
    max-width: 25%;
    margin-left: 8.33333333%;
    align-items: flex-end
}

.project:nth-child(9n-4)[data-img="landscape"] {
    flex-basis: 25%;
    max-width: 25%;
    margin-left: 8.33333333%;
    align-items: flex-end
}

.project:nth-child(9n-3) {
    flex-basis: 50%;
    max-width: 50%;
    margin-left: 8.33333333%;
    margin-right: 8.33333333%
}

.project:nth-child(9n-3)[data-img="landscape"] {
    flex-basis: 58.33333333%;
    max-width: 58.33333333%;
    margin-left: 8.33333333%;
    margin-right: 0
}

.project:nth-child(9n-2) {
    flex-basis: 33.33333333%;
    max-width: 33.33333333%;
    margin-left: 33.33333333%;
    margin-right: 33.33333333%
}

.project:nth-child(9n-2)[data-img="landscape"] {
    flex-basis: 66.66666667%;
    max-width: 66.66666667%;
    margin-left: 16.66666666%;
    margin-right: 16.66666666%
}

.project:nth-child(9n-1) {
    flex-basis: 25%;
    max-width: 25%;
    margin-left: 0;
    margin-right: 16.66666666%;
    align-items: flex-start
}

.project:nth-child(9n-1)[data-img="landscape"] {
    flex-basis: 33.33333333%;
    max-width: 33.33333333%;
    margin-left: 0;
    margin-right: 8.33333333%;
    align-items: flex-start
}

.project:nth-child(9n) {
    flex-basis: 41.66666667%;
    max-width: 41.66666667%;
    margin-left: 16.66666666%
}

.project:nth-child(9n)[data-img="landscape"] {
    flex-basis: 50%;
    max-width: 50%;
    margin-left: 8.33333333%
}

@media only screen and (max-width:768px) {
    .project:nth-child(n),
    .project:nth-child(n)[data-img="landscape"] {
        flex-basis: 100%;
        max-width: 100%;
        margin-left: 0
    }
}

.project__thumb {
    position: relative
}

.project__thumb img {
    width: 100%;
    height: auto
}

.is-loading .project__transition {
    transform: scaleY(0)
}

.project__transition {
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background-color: #FFF;
    transition: transform 1s cubic-bezier(.86, 0, .07, .995);
    transform: scaleY(0);
    transform-origin: bottom center;
    z-index: 4
}

.project__caption {
    position: relative;
    display: none;
    z-index: -1
}

.project__category {
    display: none
}

.next-project-title {
    z-index: 2;
    overflow: hidden;
    display: inline-block;
    position: relative;
    height: 1.2em;
    line-height: 1.2em;
    text-align: left;
    cursor: none;
    margin: 0;
    padding: 0;
    width: 80%
}

.next-project-title li {
    margin: 0;
    padding: 0;
    list-style: none
}

.main-title,
.main-subtitle {
    position: absolute;
    box-sizing: border-box;
    width: 100%
}

[scroll-direction="horizontal"] .site-content {
    height: 100vh
}

.site-content {
    height: 100%
}

.--xs,
.--sm,
.--md,
.--ml {
    display: flex;
    position: relative;
    height: 100vh
}

.--lg {
    height: 100%;
    display: flex;
    position: relative
}

.--xl {
    padding: 0 var(--outer-margin) 0 0 !important;
    height: 100%;
    display: flex;
    position: relative
}

@media only screen and (max-width:768px) {
    .--xs,
    .--sm,
    .--md,
    .--ml,
    .--lg {
        padding: 0 var(--outer-margin) var(--outer-margin) var(--outer-margin) !important;
        display: block;
        height: auto;
        width: 100%
    }
    .--xl {
        padding: 0 0 var(--outer-margin) 0 !important;
        display: block;
        height: auto;
        width: 100%
    }
}

.--top {
    align-items: flex-start !important
}

.--center {
    align-items: center !important
}

.--bottom {
    align-items: flex-end !important
}

.--sb {
    display: flex;
    justify-content: space-between;
    flex-direction: column
}

.--top-self {
    align-self: flex-start
}

.--center-self {
    align-self: center
}

.--bottom-self {
    align-self: flex-end
}

.--left {
    justify-content: flex-start
}

.--right {
    justify-content: flex-end
}

.--text-right {
    text-align: right
}

.--pb {
    padding-bottom: 0.5em
}

.module {
    padding: 0;
    overflow: hidden
}

@media only screen and (max-width:768px) {
    .module {
        padding: var(--outer-margin) 0 0 0 !important
    }
}

.module-spacer--xs,
.module-spacer--sm,
.module-spacer--md,
.module-spacer--lg {
    width: 10vw;
    height: 100%
}

.module-spacer--sm {
    width: 16vw
}

.module-spacer--md {
    width: 26vw
}

.module-spacer--lg {
    width: 36vw
}

@media only screen and (max-width:768px) {
    .module-spacer--xs,
    .module-spacer--sm,
    .module-spacer--md,
    .module-spacer--lg {
        width: 100%;
        height: 12vh
    }
    .module-spacer--sm {
        height: 24vh
    }
    .module-spacer--md {
        height: 36vh
    }
    .module-spacer--lg {
        height: 48vh
    }
}

.module-stack {
    padding: var(--outer-margin) var(--outer-margin) var(--outer-margin) 0;
    height: 100vh
}

.module-stack .module_image__img {
    height: calc(50% + var(--half-gutter-width));
    width: 100%;
    align-self: flex-start;
    padding: 0 0 var(--outer-margin) 0
}

.module-stack .module_image__spacer {
    height: 0;
    display: none
}

.module-stack .module_image__img img {
    position: relative;
    height: 100%;
    width: auto;
    object-fit: contain
}

@media only screen and (max-width:768px) {
    .module-stack {
        display: flex;
        padding: 0;
        flex-direction: row;
        flex-flow: row wrap;
        height: auto
    }
    .module-stack .module_image__caption {
        display: none
    }
    .module-stack .module_image__img:nth-child(odd) {
        padding: 0 var(--half-gutter-width) var(--outer-margin) var(--outer-margin);
        width: 50%
    }
    .module-stack .module_image__img:nth-child(even) {
        padding: 0 var(--outer-margin) var(--outer-margin) var(--half-gutter-width);
        width: 50%
    }
    .module-stack .module_image__img img {
        width: 100%;
        height: 100%
    }
}

.module-image {
    padding: var(--outer-margin) var(--outer-margin) var(--outer-margin) 0;
    height: 100vh;
    display: flex;
    position: relative
}

.module-image-thumb {
    padding: 0 !important;
    margin-right: var(--outer-margin)
}

.module_image__caption {
    padding: 0 var(--outer-margin);
    height: auto;
    width: 20vw;
    display: block;
    position: relative;
    white-space: normal;
    transform: translate(calc(var(--outer-margin)*2), var(--outer-margin));
    opacity: 0;
    transition: opacity .8s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1)
}

.is-inview .module_image__caption {
    opacity: 1;
    transform: translate(0, 0)
}

.--xl .module_image__caption {
    padding: var(--outer-margin)
}

@media only screen and (max-width:768px) {
    .module-image {
        height: auto;
        width: 100%
    }
    .module-image-thumb {
        padding: 0 !important;
        margin-right: 0
    }
    .module-image:first-child {
        padding: 0 0 var(--outer-margin) 0
    }
    .module_image__caption {
        width: 100%;
        transform: translate(0, var(--outer-margin))
    }
    .--xs .module_image__caption,
    .--sm .module_image__caption {
        padding: 0
    }
    .module_image__caption {
        padding: var(--outer-margin) 0 0 0
    }
    .--sm .module_image__caption,
    .--xs .module_image__caption {
        padding: 0 0 0 var(--outer-margin) !important
    }
    .--bottom.--sm .module_image__caption,
    .--bottom.--xs .module_image__caption {
        padding: 0 !important
    }
}

.module_image__img {
    display: flex;
    transition: transform .8s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translate(calc(var(--outer-margin)*4), 0)
}

@media only screen and (max-width:768px) {
    .module_image__img {
        display: flex;
        transition: transform .8s cubic-bezier(0.16, 1, 0.3, 1);
        transform: translate(0, calc(var(--outer-margin)*4))
    }
}

.module_image__img.is-inview {
    transform: translate(0, 0)
}

.--xs .module_image__img {
    height: 33.3%
}

.--sm .module_image__img {
    height: calc(50% - var(--half-gutter-width))
}

.--md .module_image__img {
    height: 66.6%
}

.--ml .module_image__img {
    height: 83.3%
}

.--lg .module_image__img {
    height: 100%
}

.--xl .module_image__img {
    height: 100%
}

.module-image .module_image__img img {
    width: auto;
    height: 100%
}

.my-img {
    float: left
}

@media only screen and (max-width:768px) {
    [data-scroll-speed=0] {
        float: none
    }
}

@media only screen and (max-width:768px) {
    .module-image .module_image__img img {
        height: auto;
        width: 100%
    }
    .--xs .module_image__img img,
    .--sm .module_image__img img {
        width: 50%;
        height: 50%
    }
    .--xs .module_image__img,
    .--sm .module_image__img,
    .--md .module_image__img,
    .--lg .module_image__img,
    .--xl .module_image__img {
        flex-direction: column;
        width: 100%;
        height: auto
    }
    .--xs.--top .module_image__img,
    .--sm.--top .module_image__img,
    .--xs.--center .module_image__img,
    .--sm.--center .module_image__img {
        flex-direction: row;
        justify-content: flex-start
    }
    .--xs.--bottom .module_image__img,
    .--sm.--bottom .module_image__img {
        flex-direction: row-reverse;
        justify-content: flex-end
    }
}

.module-text {
    height: 100%;
    padding: var(--outer-margin) var(--outer-margin) var(--outer-margin) 0 !important;
    display: flex;
    white-space: normal
}

.module-text.--sm .module-text__text {
    width: 24vw
}

.module-caption.--sm .module-text__text {
    width: 20vw
}

.module-text.--md .module-text__text {
    width: 36vw
}

.module-text.--lg .module-text__text {
    width: 64vw
}

.module-text.--xl .module-text__text {
    width: 36vw;
    padding: 0 10vw 0 0
}

.module-text.--sm .module-text__text p {
    font-size: 1em
}

.module-text.--md .module-text__text p {
    font-size: calc(1.3em + (12 - 10) * ((100vw - 300px) / (1800 - 300)));
    line-height: 1.1;
    margin-block-start: -0.19em !important;
    margin-block-end: -0.11em !important
}

.module-text.--lg .module-text__text p {
    font-size: calc(1.8em + (36 - 24) * ((100vw - 300px) / (1800 - 300)));
    line-height: 1.05;
    margin-block-start: -0.17em !important;
    margin-block-end: -0.1em !important
}

.module-text.--xl .module-text__text p {
    font-size: calc(2.2em + (48 - 24) * ((100vw - 300px) / (1800 - 300)));
    line-height: 0.95;
    text-transform: uppercase;
    letter-spacing: -0.04em;
    margin-block-start: -0.14em !important;
    margin-block-end: -0.04em !important
}

.module-text__text {
    display: flex;
    flex-direction: column;
    align-content: space-between;
    justify-content: space-between;
    opacity: 0;
    transform: translate(calc(var(--outer-margin)*4), 0);
    transition: opacity .8s cubic-bezier(0.16, 1, 0.3, 1), transform .8s cubic-bezier(0.16, 1, 0.3, 1)
}

.module-text:last-child .module-text__text {
    height: 100%
}

.module-text div.is-inview {
    transform: translate(0, 0);
    opacity: 1
}

.module-text-collab {}

@media only screen and (max-width:768px) {
    .module-text {
        padding: 0 var(--outer-margin) var(--outer-margin) var(--outer-margin) !important;
        display: flex;
        white-space: normal
    }
    .module-text__text {
        transform: translate(0, calc(var(--outer-margin)*4))
    }
    .module-text.--sm .module-text__text,
    .module-caption.--sm .module-text__text {
        padding: 0 !important;
        width: 100%
    }
    .module-text-collab .module-text__text {
        padding: 0 !important
    }
    .module-text.--md .module-text__text {
        width: 100%
    }
    .module-text.--lg .module-text__text {
        width: 100%;
        padding: 0 0 var(--outer-margin) 0 !important
    }
    .module-text.--xl .module-text__text {
        width: 100%;
        padding: 0 !important
    }
}

.single {
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: space-between;
    align-content: flex-end;
    white-space: normal;
    height: 100vh;
    padding: var(--outer-margin);
    width: 50vw
}

.single__title,
.single__category {
    display: block;
    padding: 0;
    margin: 0
}

.single__text {
    padding: var(--outer-margin) var(--half-gutter-width);
    height: 100vh;
    width: 25vw;
    display: flex;
    position: relative;
    flex-direction: column;
    flex-flow: column wrap;
    justify-content: space-between
}

@media only screen and (max-width:768px) {
    .single__text {
        padding: var(--outer-margin) var(--outer-margin) 0 var(--outer-margin) !important;
        width: 100%;
        height: auto
    }
}

.single__text div {
    padding-bottom: 0px !important;
    opacity: 1;
    white-space: normal;
    transform: translateX(0);
    transition: opacity .8s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1)
}

.is-unseen .single__text div {
    opacity: 0;
    transform: translateX(var(--half-gutter-width))
}

.single .module-text {
    height: auto
}

.single .module-text__text {
    display: block
}

.single__parameter {
    padding: 0 0 0 0
}

@media only screen and (max-width:768px) {
    .single {
        display: flex;
        flex-direction: column;
        flex: 1;
        align-content: flex-end;
        white-space: normal;
        height: 75vh;
        height: calc(var(--vh, 1vh) * 75);
        padding: var(--outer-margin) var(--outer-margin) var(--outer-margin) var(--outer-margin);
        width: 100vw;
        margin: 0
    }
    .single .module-text,
    .single .module-text__text {
        padding: var(--outer-margin) 0 0 0 !important
    }
    .single__parameter {
        padding: calc(var(--outer-margin) * 3) 0 0 0
    }
}

#single-title {
    color: white;
    position: absolute;
    width: 50vw;
    padding: var(--outer-margin)
}

@media only screen and (max-width:768px) {
    #single-title {
        width: 100%
    }
}

#single-title h1>.word {
    display: inline-flex;
    position: relative;
    color: rgba(255, 255, 255, 1);
    overflow: hidden;
    padding-right: 0.257em
}

#single-title h1>.word>span {
    display: inline-flex;
    color: rgba(255, 255, 255, 1);
    transform: translateY(1em)
}

#single-next.single {
    width: 50vw;
    margin: 0 0 0 25vw;
    padding: var(--outer-margin)
}

#single-thumb {
    cursor: none;
    overflow: hidden;
    display: flex;
    height: 100vh;
    width: 25vw;
    padding: 0;
    margin: 0
}

@media only screen and (max-width:768px) {
    #single-next.single {
        width: 100%;
        margin-left: 0;
        display: flex;
        padding: var(--outer-margin);
        flex-direction: column;
        height: calc(var(--vh, 1vh) * 75);
        padding-top: calc(var(--vh, 1vh) * 25)
    }
    #single-thumb {
        display: flex;
        height: auto;
        width: 100%;
        padding: 0 !important;
        margin: 0;
        height: calc(var(--vh, 1vh) * 25)
    }
}

#single-next .single__title {}

#single-next .single__title h1 {
    cursor: none;
    padding: 0
}

#single-next .single__title h1 .word {}

#single-next .single__category {}

#single-next .single__hold {
    justify-content: normal;
    padding-top: 20vw
}

#single-thumb .module_image__img img {
    transform-origin: center center;
    transition: transform 2s cubic-bezier(0.16, 1, 0.3, 1)
}

#single-thumb.hover .module_image__img img {
    transform: scale(1.02)
}

.next {
    position: fixed;
    pointer-events: none;
    z-index: 99;
    outline: 0;
    top: 0;
    bottom: 0;
    right: -2%;
    width: 0;
    background-color: white;
    mix-blend-mode: difference;
    transition: width 1s cubic-bezier(0.16, 1, 0.3, 1)
}

@media only screen and (max-width:768px) {
    .next {
        top: 100vh;
        bottom: 0;
        left: 0;
        width: 100%
    }
}

.cursor {
    pointer-events: none;
    position: fixed;
    z-index: 9999;
    width: 100%;
    height: auto;
    display: flex;
    align-items: center
}

#cursor-inner {
    position: absolute;
    opacity: 1;
    transform: scale(0.2);
    width: calc(10 * var(--outer-margin) + 12px);
    height: calc(10 * var(--outer-margin) + 12px);
    display: flex;
    align-items: center;
    justify-content: center;
    left: 0;
    top: 0;
    mix-blend-mode: difference !important;
    color: white
}

.progress {
    position: absolute;
    transform: rotate(-90deg);
    stroke: white
}

.progress circle {
    stroke: white;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: stroke-dasharray 0s cubic-bezier(0.16, 1, 0.3, 1);
    stroke-dasharray: 0, 100;
    stroke-dashoffset: 0
}

#cursor-outer {
    width: 100%;
    display: flex;
    height: 1.25em;
    position: relative;
    left: 20px;
    align-items: center;
    overflow: hidden;
    color: white;
    font-size: 1em;
    opacity: 0
}

@media only screen and (max-width:768px) {
    #cursor-outer {}
}

#cursor-outer span {
    display: inline-flex;
    justify-content: center;
    width: 0.6em;
    text-align: center !important;
    margin-top: auto;
    margin-bottom: auto
}

#cursor-outer .project__caption {
    position: absolute;
    display: block;
    transform: translateY(120%);
    left: 24px;
}

#cursor-outer .next-project {
    text-transform: uppercase;
    position: absolute;
    display: block;
    transform: translateY(120%)
}

.indent-50,
.indent-25,
.indent-12,
.indent-4,
.indent-2 {
    display: inline-block;
    float: left;
    height: 0.5em;
    width: calc(50% + var(--half-gutter-width))
}

.indent-25 {
    height: 0.5em;
    width: calc(25% + (var(--half-gutter-width)/2))
}

.indent-15 {
    height: 0.5em;
    width: calc(18% + (var(--gutter-width) * 4))
}

.indent-12 {
    height: 0.5em;
    width: calc(12.5% + (var(--gutter-width) * 4))
}

.indent-4 {
    height: 0.5em;
    width: calc(25% + (var(--half-gutter-width)/2))
}

.text-indent-4 {
    padding-left: calc(var(--outer-margin) * 4) !important
}

.indent-2 {
    height: 0.5em;
    width: calc(var(--outer-margin) * 2)
}

.text-indent-2 {
    text-indent: calc(var(--outer-margin))
}

.is-unseen .img__transition {
    transform: scaleY(1)
}

.img__transition {
    display: flex;
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    transition-delay: 0.4s;
    transform: scaleY(0);
    transform-origin: bottom center;
    z-index: 4
}

.spacer--1 {
    width: 100%;
    height: calc(2 * var(--outer-margin))
}

.spacer--2 {
    width: 100%;
    height: calc(6 * var(--outer-margin))
}

.spacer--3 {
    width: 100%;
    min-height: 3vw;
    height: calc(2 * var(--outer-margin))
}

.spacer--4 {
    width: 100%;
    min-height: 10vw;
    height: calc(10 * var(--outer-margin))
}

.spacer--xs {
    display: none
}

@media only screen and (max-width:768px) {
    .spacer--xs {
        display: flex;
        width: 100%;
        height: calc(2 * var(--outer-margin))
    }
    .spacer--3 {
        width: 100%;
        min-height: 10vw;
        height: calc(6 * var(--outer-margin))
    }
    .spacer--4 {
        width: 100%;
        min-height: 10vw;
        height: calc(6 * var(--outer-margin))
    }
}

.post-grid {}

.is-unseen .post {
    transform: translateY(50vh)
}

.post {
    transform: translateY(0);
    margin: 0 0 var(--gutter-width) 0
}

.post:nth-of-type(2) {
    margin-top: 15vw
}

.post:nth-of-type(3) {
    margin-top: 30vw
}

@media only screen and (max-width:1024px) {
    .post {
        margin-top: 0vw !important
    }
}

.post__img,
.post__txt {
    display: block;
    position: relative;
    margin: 0 0 var(--half-gutter-width) 0
}

.post__img img {
    width: 100%;
    height: auto
}

.post__img-multi {
    top: 0;
    display: block;
    height: 100%;
    position: absolute;
    opacity: 0
}

.post__img-multi:first-child {
    position: relative !important;
    opacity: 1
}

.post__img-multi img {
    width: 100%;
    height: auto
}

.inline {
    display: inline-block
}

.menu {
    opacity: 0;
    color: white;
    width: 100%;
    z-index: 0;
    position: fixed;
    pointer-events: none
}

.menu .row {
    justify-content: space-between;
    height: calc(66vh - 2 * var(--outer-margin))
}

.char {
    display: inline-block;
    float: left
}

.nav {
    width: calc(2 * var(--outer-margin) + 0.8em);
    height: calc(2 * var(--outer-margin) + 0.8em);
    position: fixed;
    z-index: 998;
    right: 0;
    display: block;
    mix-blend-mode: difference
}

.nav__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    width: calc(2 * var(--outer-margin) + 0.8em);
    height: calc(2 * var(--outer-margin) + 0.8em);
    cursor: none
}


/* !!!!!!!!!!!!! new code !!!!!!!!!!!!!!!!! */
.nav__btn span {
  display: block;
  width: 30%;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  background: white;
  border-radius: 3px;
  z-index: 1;
  transform-origin: 4px 0px;
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

body > div > div:nth-child(2) > div.nav.has-no-select > div > span:nth-child(1){
  top: -10px;
  left: 33%
}

body > div > div:nth-child(2) > div.nav.has-no-select > div > span:nth-child(3) {
    top: 10px;
    left: -33%
}

.menu-open-css > span:nth-child(1) {
  opacity: 1;
  transform: rotate(45deg) translate(-2%, -1%);
  background: #232323;
}

.menu-open-css > span:nth-child(1){
  opacity: 0;
}

.menu-open-css > span:nth-child(3){
    transform: rotate(-45deg);
    width: 25px;
    transform-origin: 5% 5%;
}
@media only screen and (max-width:768px) { 
    .menu-open-css > span:nth-child(3){
        width: 20px;
        transform-origin: -5% 5%;
    }
}

/* !!!!!!!!!!!!! new code !!!!!!!!!!!!!!!!! */

.nav__btn:after {
    content: "";
    background-color: white;
    border-radius: 60px;
    width: 0px;
    height: 0px;
    position: absolute;
    z-index: 999;
    transition: all 0.4s cubic-bezier(.65, 0, .35, 1);
    display: inline-block
}

.nav__text {
    top: 0;
    right: calc(2em + var(--outer-margin));
    height: 100%;
    color: white;
    position: absolute;
    z-index: 999;
    display: flex;
    align-items: center;
    mix-blend-mode: difference
}

/* @media only screen and (max-width:768px) { */
@media only screen and (max-width:980px) {
    .nav__text {
        /* right: calc(1.2em + var(--outer-margin)) */
        /* new code */
        display: none;
        /* new code */
    }
}

.nav__text div {
    height: 0.9em;
    display: flex;
    align-items: center;
    overflow: hidden
}

.nav__text p {
    transform: translateY(100%)
}


.menu__category {
    list-style: none;
    display: inline-block;
    flex-basis: auto;
    max-width: auto
}

.menu__category li {
    float: left;
    clear: left;
    display: flex;
    position: relative;
    text-transform: uppercase;
    line-height: 1;
    overflow: hidden
}

.menu__category li p {
    display: inline-block;
    margin-top: 0 !important;
    color: inherit;
    line-height: 1em;
    margin-block-start: -0.11em !important;
    margin-block-end: -0.04em !important;
    margin-inline-start: 0.06em !important
}

.menu__category li a {}

.menu__category:hover li a .char {
    opacity: 1
}

.menu__category li a:hover .char {
    opacity: 1
}

.menu__category li .menu__category__num {
    pointer-events: none !important;
    display: inline-flex;
    justify-content: flex-start;
    font-size: 2em;
    line-height: 1.2em;
    height: 1.2em;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1)
}

.menu__category li .menu__category__num span {
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translateY(0em);
    line-height: 1.2em;
    opacity: 0.5
}

.menu__category li:hover .menu__category__num span {
    transform: translateY(-1.2em) !important;
    opacity: 1 !important
}

.menu__category li.current-menu-item:hover .menu__category__num span {
    transform: translateY(0) !important;
    opacity: 0.5 !important
}

@media only screen and (max-width:768px) {
    .menu__category li p {
        font-size: calc(3.6em + (48 - 24) * ((100vw - 300px) / (1800 - 300)))
    }
    .menu__category li .menu__category__num {
        font-size: 1rem
    }
}

.menu__category li a .word {
    float: left;
    height: 0.92em;
    line-height: 0.92em;
    margin: 0;
    padding: 0;
    position: relative;
    display: inline-block;
    overflow: hidden;
    padding-right: 0.04em
}

.menu .menu__category li a {
    color: white
}

.menu .menu__category li p {
    transform: translateY(0)
}

.menu__category li .menu__category__num {
    line-height: 1em;
    font-size: 1.2em
}

.menu .menu__category li .menu__category__num span {
    transform: translateY(2.2em);
    opacity: 0;
    color: white
}

.menu__category li a .char {
    pointer-events: none;
    float: left;
    padding-top: 0.0em;
    line-height: 0.92em
}

.menu__category li a .char:before {
    pointer-events: none;
    display: block;
    content: attr(data-char);
    position: absolute;
    transform: translateY(-1em);
    transition: .6s cubic-bezier(.65, 0, .35, 1)
}

.menu__category li a .char:after {
    pointer-events: none;
    display: block;
    content: attr(data-char);
    position: absolute;
    transition: .6s cubic-bezier(.65, 0, .35, 1)
}

.menu__category li a .char:nth-of-type(odd) {
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1)
}

.menu__category li a .char:nth-of-type(2n) {
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1)
}

.menu__category li a:hover .char:before:nth-of-type(odd) {
    transform: translateY(0em)
}

.menu__category li a:hover .char:nth-of-type(2n) {
    transform: translate3d(0, -0.92em, 0);
    opacity: 1
}

.menu__category li a:hover .char:nth-of-type(odd) {
    transform: translate3d(0, 1em, 0);
    opacity: 1
}

.menu__main {
    margin: 0 1vw 0 0;
    position: relative
}

.menu__main li {
    margin: 0 1vw 0 0;
    display: flex;
    float: left;
    text-transform: uppercase;
    overflow: hidden;
    position: relative;
    transition: filter 1s, opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translateY(1em);
    opacity: 0;
}

.menu__main li.current-menu-item {
    pointer-events: none
}

.menu__main li a {
    text-decoration: none;
    color: white;
    display: block;
    transition: 0.3s;
    height: calc(20px + (12 - 8) * ((100vw - 300px) / (1800 - 300)));
}

@media only screen and (max-width:768px) {
    .menu__main li a { color: white; }
}

.menu__main li a:after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: black;
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}

.menu__main li a:hover {
    color: black;
}

.menu__main li a:hover:after {
    transform: scaleX(1);
    transform-origin: bottom left;
  }

@media only screen and (max-width:1024px) {
    .menu__main li {
        font-size: calc(1.2em + (12 - 10) * ((100vw - 300px) / (1800 - 300)));
        float: none;
        margin: 0 0 0.2em 0
    }
    .menu__main li a {
        height: calc(1.3em + (12 - 10) * ((100vw - 300px) / (1800 - 300)));
    }
}

@media only screen and (max-width:768px) {
    .menu__main {
        margin: 12vw 0 0 0
    }
    .menu__main li {
        font-size: calc(1.5em + (12 - 10) * ((100vw - 300px) / (1800 - 300)));
        float: none;
        margin: 1vw 0
    }
    .menu__main li a {
        height: calc(1.5em + (12 - 10) * ((100vw - 300px) / (1800 - 300)));
    }
}

/* No less than 1025px, no greater than 1230px */
@media (min-width:1025px) and (max-width:1230px) {
    .menu__main {
        margin-left: -6vw;
    }

}​


.filter-archive li {
    text-transform: uppercase;
    float: left;
    margin: 0 var(--outer-margin) 0 0
}

@media only screen and (max-width:768px) {
    .filter-archive li {
        font-size: 1em
    }
}

.filter-archive li a::after {
    content: "";
    display: block;
    position: relative;
    left: 0;
    bottom: 0.06em;
    ;
    height: 1px;
    width: 0%;
    background: rgba(0, 0, 0, 0.25);
    transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none
}

.filter-archive li.current-menu-item {
    pointer-events: none
}

.filter-archive li.current-menu-item a::after {
    width: 100%
}

.current-menu-item {
    cursor: default
}

.current-menu-item a {
    pointer-events: none !important
}

.--transformY {
    transform: translateY(8vh)
}

.--transformY.is-inview {
    transition: transform 1s cubic-bezier(0.16, 1.2, 0.3, 1);
    transform: translateY(0em);
    transition-delay: calc((60ms * var(--word-index)))
}

.redirecting {
    height: calc(100vh - 2* var(--outer-margin));
    white-space: nowrap
}

.redirecting>div {
    display: flex;
    justify-content: center;
    align-items: center
}

.redirecting p {
    display: inline-block;
    padding-right: 0.4em
}

.mejs-controls {
    display: none !important;
    visibility: hidden !important
}