/*! sanitize.css v4.1.0 | CC0 License | github.com/jonathantneal/sanitize.css */

menu,
nav,
section,
summary {
    display: block
}

audio,
canvas,
progress,
video {
    display: inline-block
}

audio:not([controls]) {
    display: none;
    height: 0
}

[hidden] {
    display: none
}

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

::after,
::before {
    text-decoration: inherit;
    vertical-align: inherit
}

html {
    box-sizing: border-box;
    cursor: default;
    font-family: sans-serif;
    line-height: 1.5;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

.stretch{
    will-change: transform;
}

body {
    margin: 0;
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

code,
kbd,
pre,
samp {
    font-family: monospace, monospace;
    font-size: 1em
}

hr {
    height: 0;
    overflow: visible
}

nav ol,
nav ul {
    list-style: none
}

abbr[title] {
    border-bottom: 1px dotted;
    text-decoration: none
}

b,
strong {
    font-weight: inherit
}

b,
strong {
    font-weight: bolder
}

dfn {
    font-style: italic
}

mark {
    background-color: #ff0;
    color: #000
}

progress {
    vertical-align: baseline
}

small {
    font-size: 83.3333%
}

sub,
sup {
    font-size: 83.3333%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

::-moz-selection {
    background-color: #b3d4fc;
    color: #000;
    text-shadow: none
}

::selection {
    background-color: #b3d4fc;
    color: #000;
    text-shadow: none
}

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle
}

img {
    border-style: none
}

svg {
    fill: currentColor
}

svg:not(:root) {
    overflow: hidden
}

a {
    background-color: transparent;
    -webkit-text-decoration-skip: objects
}

a:hover {
    outline-width: 0
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

button,
input,
select,
textarea {
    background-color: transparent;
    border-style: none;
    color: inherit;
    font-size: 1em;
    margin: 0
}

button,
input {
    overflow: visible
}

button,
select {
    text-transform: none
}

[type=reset],
[type=submit] {
    -webkit-appearance: button
}

::-moz-focus-inner {
    border-style: none;
    padding: 0
}

::-moz-focusring {
    outline: 1px dotted ButtonText
}

fieldset {
    border: 1px solid silver;
    margin: 0 2px;
    padding: .35em .625em .75em
}

legend {
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal
}

textarea {
    overflow: auto;
    resize: vertical
}

[type=checkbox],
[type=radio] {
    padding: 0
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

::-webkit-search-cancel-button,
::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-input-placeholder {
    color: inherit;
    opacity: .54
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

[aria-busy=true] {
    cursor: progress
}

[aria-controls] {
    cursor: pointer
}

[aria-disabled] {
    cursor: default
}

[tabindex],
a,
area,
button,
input,
label,
select,
textarea {
    touch-action: manipulation
}

[hidden][aria-hidden=false] {
    clip: rect(0, 0, 0, 0);
    display: inherit;
    position: absolute
}

[hidden][aria-hidden=false]:focus {
    clip: auto
}

::root {
    background-color: #fff
}

::-webkit-scrollbar {
    display: none !important;
    background: 0 0 !important;
    width: 0 !important
}

header.header {
    z-index: 99
}

.row,
.wrapper {
    *zoom: 1
}

.row:after,
.row:before,
.wrapper:after,
.wrapper:before {
    content: " ";
    display: table
}

.row:after,
.wrapper:after {
    clear: both
}

*,
:after,
:before {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

img {
    width: auto;
    max-width: 100%;
    height: auto
}

.wrapper {
    width: 100%;
    position: relative;
    margin: 0 auto
}

.row,
.wrapper {
    *zoom: 1
}

.row:after,
.row:before,
.wrapper:after,
.wrapper:before {
    content: " ";
    display: table
}

.row:after,
.wrapper:after {
    clear: both
}

*,
:after,
:before {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

.grid {
    width: 100%;
    margin: 10px 0;
    float: left
}

.grid[class*=col-] {
    padding: 0;
    min-height: 1px
}

@media only screen and (min-width:10px) {
    .col-xs-1 {
        width: 8.33333%;
        margin: 10px 0;
        display: inline-block
    }
    .col-xs-2 {
        width: 16.66667%;
        margin: 10px 0;
        display: inline-block
    }
    .col-xs-3 {
        width: 25%;
        margin: 10px 0;
        display: inline-block
    }
    .col-xs-4 {
        width: 33.33333%;
        margin: 10px 0;
        display: inline-block
    }
    .col-xs-5 {
        width: 41.66667%;
        margin: 10px 0;
        display: inline-block
    }
    .col-xs-6 {
        width: 50%;
        margin: 10px 0;
        display: inline-block
    }
    .col-xs-7 {
        width: 58.33333%;
        margin: 10px 0;
        display: inline-block
    }
    .col-xs-8 {
        width: 66.66667%;
        margin: 10px 0;
        display: inline-block
    }
    .col-xs-9 {
        width: 75%;
        margin: 10px 0;
        display: inline-block
    }
    .col-xs-10 {
        width: 83.33333%;
        margin: 10px 0;
        display: inline-block
    }
    .col-xs-11 {
        width: 91.66667%;
        margin: 10px 0;
        display: inline-block
    }
    .col-xs-12 {
        width: 100%;
        margin: 10px 0;
        display: inline-block
    }
}

.off-xs-1 {
    margin-left: 8.33333%;
    padding: 0 10px
}

.off-xs-2 {
    margin-left: 16.66667%;
    padding: 0 10px
}

.off-xs-3 {
    margin-left: 25%;
    padding: 0 10px
}

.off-xs-4 {
    margin-left: 33.33333%;
    padding: 0 10px
}

.off-xs-5 {
    margin-left: 41.66667%;
    padding: 0 10px
}

.off-xs-6 {
    margin-left: 50%;
    padding: 0 10px
}

.off-xs-7 {
    margin-left: 58.33333%;
    padding: 0 10px
}

.off-xs-8 {
    margin-left: 66.66667%;
    padding: 0 10px
}

.off-xs-9 {
    margin-left: 75%;
    padding: 0 10px
}

.off-xs-10 {
    margin-left: 83.33333%;
    padding: 0 10px
}

.off-xs-11 {
    margin-left: 91.66667%;
    padding: 0 10px
}

.off-xs-12 {
    margin-left: 100%;
    padding: 0 10px
}

.hide-xs {
    display: none;
    margin: 0;
    padding: 0;
    width: 0;
    height: 0;
    position: absolute;
    left: 3000vw
}

@media only screen and (min-width:768px) {
    .col-s-1 {
        width: 8.33333%;
        margin: 10px 0;
        display: inline-block
    }
    .col-s-2 {
        width: 16.66667%;
        margin: 10px 0;
        display: inline-block
    }
    .col-s-3 {
        width: 25%;
        margin: 10px 0;
        display: inline-block
    }
    .col-s-4 {
        width: 33.33333%;
        margin: 10px 0;
        display: inline-block
    }
    .col-s-5 {
        width: 41.66667%;
        margin: 10px 0;
        display: inline-block
    }
    .col-s-6 {
        width: 50%;
        margin: 10px 0;
        display: inline-block
    }
    .col-s-7 {
        width: 58.33333%;
        margin: 10px 0;
        display: inline-block
    }
    .col-s-8 {
        width: 66.66667%;
        margin: 10px 0;
        display: inline-block
    }
    .col-s-9 {
        width: 75%;
        margin: 10px 0;
        display: inline-block
    }
    .col-s-10 {
        width: 83.33333%;
        margin: 10px 0;
        display: inline-block
    }
    .col-s-11 {
        width: 91.66667%;
        margin: 10px 0;
        display: inline-block
    }
    .col-s-12 {
        width: 100%;
        margin: 10px 0;
        display: inline-block
    }
}

.off-s-1 {
    margin-left: 8.33333%;
    padding: 0 10px
}

.off-s-2 {
    margin-left: 16.66667%;
    padding: 0 10px
}

.off-s-3 {
    margin-left: 25%;
    padding: 0 10px
}

.off-s-4 {
    margin-left: 33.33333%;
    padding: 0 10px
}

.off-s-5 {
    margin-left: 41.66667%;
    padding: 0 10px
}

.off-s-6 {
    margin-left: 50%;
    padding: 0 10px
}

.off-s-7 {
    margin-left: 58.33333%;
    padding: 0 10px
}

.off-s-8 {
    margin-left: 66.66667%;
    padding: 0 10px
}

.off-s-9 {
    margin-left: 75%;
    padding: 0 10px
}

.off-s-10 {
    margin-left: 83.33333%;
    padding: 0 10px
}

.off-s-11 {
    margin-left: 91.66667%;
    padding: 0 10px
}

.off-s-12 {
    margin-left: 100%;
    padding: 0 10px
}

.hide-s {
    display: none;
    margin: 0;
    padding: 0;
    width: 0;
    height: 0;
    position: absolute;
    left: 3000vw
}

@media only screen and (min-width:1024px) {
    .col-m-1 {
        width: 8.33333%;
        margin: 10px 0;
        display: inline-block
    }
    .col-m-2 {
        width: 16.66667%;
        margin: 10px 0;
        display: inline-block
    }
    .col-m-3 {
        width: 25%;
        margin: 10px 0;
        display: inline-block
    }
    .col-m-4 {
        width: 33.33333%;
        margin: 10px 0;
        display: inline-block
    }
    .col-m-5 {
        width: 41.66667%;
        margin: 10px 0;
        display: inline-block
    }
    .col-m-6 {
        width: 50%;
        margin: 10px 0;
        display: inline-block
    }
    .col-m-7 {
        width: 58.33333%;
        margin: 10px 0;
        display: inline-block
    }
    .col-m-8 {
        width: 66.66667%;
        margin: 10px 0;
        display: inline-block
    }
    .col-m-9 {
        width: 75%;
        margin: 10px 0;
        display: inline-block
    }
    .col-m-10 {
        width: 83.33333%;
        margin: 10px 0;
        display: inline-block
    }
    .col-m-11 {
        width: 91.66667%;
        margin: 10px 0;
        display: inline-block
    }
    .col-m-12 {
        width: 100%;
        margin: 10px 0;
        display: inline-block
    }
}

.off-m-1 {
    margin-left: 8.33333%;
    padding: 0 10px
}

.off-m-2 {
    margin-left: 16.66667%;
    padding: 0 10px
}

.off-m-3 {
    margin-left: 25%;
    padding: 0 10px
}

.off-m-4 {
    margin-left: 33.33333%;
    padding: 0 10px
}

.off-m-5 {
    margin-left: 41.66667%;
    padding: 0 10px
}

.off-m-6 {
    margin-left: 50%;
    padding: 0 10px
}

.off-m-7 {
    margin-left: 58.33333%;
    padding: 0 10px
}

.off-m-8 {
    margin-left: 66.66667%;
    padding: 0 10px
}

.off-m-9 {
    margin-left: 75%;
    padding: 0 10px
}

.off-m-10 {
    margin-left: 83.33333%;
    padding: 0 10px
}

.off-m-11 {
    margin-left: 91.66667%;
    padding: 0 10px
}

.off-m-12 {
    margin-left: 100%;
    padding: 0 10px
}

.hide-m {
    display: none;
    margin: 0;
    padding: 0;
    width: 0;
    height: 0;
    position: absolute;
    left: 3000vw
}

@media only screen and (min-width:1280px) {
    .col-l-1 {
        width: 8.33333%;
        margin: 10px 0;
        display: inline-block
    }
    .col-l-2 {
        width: 16.66667%;
        margin: 10px 0;
        display: inline-block
    }
    .col-l-3 {
        width: 25%;
        margin: 10px 0;
        display: inline-block
    }
    .col-l-4 {
        width: 33.33333%;
        margin: 10px 0;
        display: inline-block
    }
    .col-l-5 {
        width: 41.66667%;
        margin: 10px 0;
        display: inline-block
    }
    .col-l-6 {
        width: 50%;
        margin: 10px 0;
        display: inline-block
    }
    .col-l-7 {
        width: 58.33333%;
        margin: 10px 0;
        display: inline-block
    }
    .col-l-8 {
        width: 66.66667%;
        margin: 10px 0;
        display: inline-block
    }
    .col-l-9 {
        width: 75%;
        margin: 10px 0;
        display: inline-block
    }
    .col-l-10 {
        width: 83.33333%;
        margin: 10px 0;
        display: inline-block
    }
    .col-l-11 {
        width: 91.66667%;
        margin: 10px 0;
        display: inline-block
    }
    .col-l-12 {
        width: 100%;
        margin: 10px 0;
        display: inline-block
    }
}

.off-l-1 {
    margin-left: 8.33333%;
    padding: 0 10px
}

.off-l-2 {
    margin-left: 16.66667%;
    padding: 0 10px
}

.off-l-3 {
    margin-left: 25%;
    padding: 0 10px
}

.off-l-4 {
    margin-left: 33.33333%;
    padding: 0 10px
}

.off-l-5 {
    margin-left: 41.66667%;
    padding: 0 10px
}

.off-l-6 {
    margin-left: 50%;
    padding: 0 10px
}

.off-l-7 {
    margin-left: 58.33333%;
    padding: 0 10px
}

.off-l-8 {
    margin-left: 66.66667%;
    padding: 0 10px
}

.off-l-9 {
    margin-left: 75%;
    padding: 0 10px
}

.off-l-10 {
    margin-left: 83.33333%;
    padding: 0 10px
}

.off-l-11 {
    margin-left: 91.66667%;
    padding: 0 10px
}

.off-l-12 {
    margin-left: 100%;
    padding: 0 10px
}

.hide-l {
    display: none;
    margin: 0;
    padding: 0;
    width: 0;
    height: 0;
    position: absolute;
    left: 3000vw
}

@font-face {
    font-family: Saol;
    src: url(../fonts/saol/saol.eot) format("embedded-opentype");
    src: url(../fonts/saol/saol.woff) format("woff"), url(../fonts/saol/saol.woff2) format("woff2");
    font-weight: 100;
    font-style: normal;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale
}

@font-face {
    font-family: Sneak;
    src: url(../fonts/sneak/Sneak-Light.eot) format("embedded-opentype");
    src: url(../fonts/sneak/Sneak-Light.woff) format("woff"), url(../fonts/sneak/Sneak-Light.woff) format("woff");
    font-weight: 100;
    font-style: normal;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale
}

.font,
.service h4.gs,
.signature svg text,
.signature svg textPath,
.spaceship-container .landing-area:after,
blockquote,
button,
em,
figcaption,
h1,
h2,
h3,
h4,
h5,
h6,
i,
li,
p,
span,
strong {
    font-weight: 100 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeSpeed !important
}

b,
h3,
h6,
strong {
    font-family: sneak
}

strong {
    display: inline-block
}

h1 {
    font-size: 2rem;
    line-height: 3rem
}

@media only screen and (max-width:1024px) {
    h1 {
        font-size: 2rem;
        line-height: 3rem
    }
}

@media only screen and (max-width:568px) {
    h1 {
        font-size: 1.25rem;
        line-height: 1.75rem
    }
}

h2 {
    font-family: Saol;
    font-size: 2.4rem
}

@media only screen and (max-width:1024px) {
    h2 {
        font-size: 1.75rem
    }
}

@media only screen and (max-width:568px) {
    h2 {
        font-size: 1.25rem
    }
}

h3 {
    font-family: sneak;
    font-size: 2rem
}

@media only screen and (max-width:1024px) {
    h3 {
        font-size: 1.75rem
    }
}

@media only screen and (max-width:568px) {
    h3 {
        font-size: 1.25rem
    }
}

h6 {
    font-size: 1.25rem;
    opacity: .5
}

h6 b {
    font-style: italic;
    text-decoration: line-through
}

body,
header,
html {
    margin: 0;
    padding: 0;
    position: relative;
    font-family: sneak, sans-serif;
    color: #373737;
    overflow-x: hidden
}

html {
    -webkit-overflow-scrolling: auto
}

a,
button,
input,
label {
    cursor: none;
    -webkit-overflow-scrolling: auto
}

html {
    font-size: calc(12px + (20 - 12)*(100vw - 320px)/ (3840 - 320));
    overflow-x: hidden;
    cursor: none;
    transition: .75s cubic-bezier(.77, 0, .175, 1) background-color;
    -ms-overflow-style: -ms-autohiding-scrollbar
}

html.noscroll {
    overflow: hidden
}

html.black {
    background-color: #101010
}

.ajax--container {
    transition: .6s cubic-bezier(.77, 0, .175, 1) opacity, .6s cubic-bezier(.77, 0, .175, 1) -webkit-filter;
    transition: .6s cubic-bezier(.77, 0, .175, 1) opacity, .6s cubic-bezier(.77, 0, .175, 1) filter;
    transition: .6s cubic-bezier(.77, 0, .175, 1) opacity, .6s cubic-bezier(.77, 0, .175, 1) filter, .6s cubic-bezier(.77, 0, .175, 1) -webkit-filter;
    -webkit-overflow-scrolling: auto;
    opacity: 1;
    z-index: 100;
    left: 0
}

.ajax--container.loading {
    opacity: 0
}

.ajax--container.page-transition {
    opacity: 0;
    pointer-events: none;
}

.main {
    position: relative;
    width: 100vw;
    height: 100%;
    height: auto
}

.js-error,
.js-home,
.js-project {
    height: 100%;
    width: 100vw;
    will-change: transform
}

.js-error h6 div.visible,
.js-home h6 div.visible,
.js-project h6 div.visible {
    opacity: 0;
    -webkit-transform: rotate3d(1, 0, 0, 90deg) translateY(100px);
    transform: rotate3d(1, 0, 0, 90deg) translateY(100px);
    transition: .3s ease all
}

.js-work {
    overflow-y: hidden
}

.js-home {
    margin: 0;
    padding: 69vh 0 0 0
}

.js-home #work {
    padding-top: 0;
    margin: 0 auto
}

.js-error {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
    position: relative;
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-flow: column wrap;
    justify-content: center
}

.js-error h1 {
    max-width: 400px;
    margin: 0 15vw
}

.footer--cta,
.footer--social,
.js-error h6 div,
.js-home h6 div,
.js-project .text p.gs div,
.js-project h6 div,
.js-project header h1,
.page--header h1,
.profile p.gs div,
.scroll_visible,
.service h3.gs div,
.service h4.gs div,
.service p.gs div,
.spaceship-container h1 div {
    transition: 1s .2s ease transform, 1s .2s ease opacity;
    -webkit-transform: rotate3d(0, 0, 0, 90deg) translateY(0);
    transform: rotate3d(0, 0, 0, 90deg) translateY(0);
    -webkit-transform-origin: center center;
    transform-origin: center center;
    opacity: 1;
    will-change: transform
}

.clip,
.footer--cta h2 a {
    background: linear-gradient(45deg, #5ad5ff, #ff4cd0, #5ad5ff);
    background-size: 200% 100%;
    background-position: 0 0;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: .6s ease background-position;
    margin-right: 12px;
}

.clip_filter,
.footer--social .list--social ul li a,
p a,
p strong {
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
    opacity: .7;
    transition: .6s cubic-bezier(.77, 0, .175, 1) opacity, .6s ease background-position, .3s cubic-bezier(.77, 0, .175, 1) -webkit-filter;
    transition: .6s cubic-bezier(.77, 0, .175, 1) opacity, .3s cubic-bezier(.77, 0, .175, 1) filter, .6s ease background-position;
    transition: .6s cubic-bezier(.77, 0, .175, 1) opacity, .3s cubic-bezier(.77, 0, .175, 1) filter, .6s ease background-position, .3s cubic-bezier(.77, 0, .175, 1) -webkit-filter;
    background: linear-gradient(45deg, #5ad5ff, #ff4cd0, #5ad5ff);
    background-size: 200% 100%;
    background-position: 0 0;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    will-change: opacity, filter;
}

@media only screen and (max-width:1024px) {
    .js-error h1 {
        padding: 2vw 10vw 0 10vw
    }
}

@media only screen and (max-width:768px) {
    a,
    button,
    input,
    label {
        cursor: pointer
    }
    .js-error h1 {
        padding: 2vw 5vw 0 5vw
    }
    .js-home {
        padding: 40vh 0 0 0
    }
}

@media only screen and (max-width:568px) {
    .js-home {
        padding: 47vh 0 0 0
    }
}

.cookie-banner {
    z-index: 9999;
    width: 100vw;
    height: 60px;
    position: fixed;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0), #fff);
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    transition: .5s ease all
}

.cookie-banner.dark {
    background-image: inherit;
}

.cookie-banner.dark span {
    color: white;
}

.cookie-banner.out {
    -webkit-transform: translateY(35px);
    transform: translateY(35px);
    opacity: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none
}

.cookie-banner span {
    font-weight: 100;
    font-size: 16px;
    margin-right: 8px;
    display: inline-block;
    position: relative
}

.validate {
    font-weight: 100;
    font-size: 14px;
    background-color: #f7f7f7;
    padding: 4px 6px 6px 8px;
    border-radius: 4px;
    border: none;
    cursor: none;
    transition: .225s ease all;
    font-family: sneak;
    margin-bottom: 3px
}

.validate:hover {
    background-color: #eaeaea
}

.validate:focus {
    outline: 0
}

.validate.click {
    background-color: #ddd
}

.rain-container {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
    margin: 0;
    padding: 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10000
}

.rain-item {
    position: absolute;
    transition: 1s ease opacity;
    opacity: .99;
    display: block;
    will-change: transform, transition, animation
}

.rain-item span {
    font-size: 32px;
    display: block;
    will-change: transform, transition, animation
}

.rain-item.ready {
    opacity: .01
}

.rain-item.out {
    opacity: .01;
    transition: .5s ease opacity
}

.rain-item.animate {
    -webkit-animation: itsrainingmen 2s ease;
    animation: itsrainingmen 2s ease;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

@-webkit-keyframes itsrainingmen {
    0% {
        -webkit-transform: translateY(-30vh) rotate3D(0, 0, 1, 0deg);
        transform: translateY(-30vh) rotate3D(0, 0, 1, 0deg)
    }
    100% {
        -webkit-transform: translateY(40vh) rotate3D(0, 0, 1, 360deg);
        transform: translateY(40vh) rotate3D(0, 0, 1, 360deg)
    }
}

@keyframes itsrainingmen {
    0% {
        -webkit-transform: translateY(-30vh) rotate3D(0, 0, 1, 0deg);
        transform: translateY(-30vh) rotate3D(0, 0, 1, 0deg)
    }
    100% {
        -webkit-transform: translateY(40vh) rotate3D(0, 0, 1, 360deg);
        transform: translateY(40vh) rotate3D(0, 0, 1, 360deg)
    }
}

.cursor {
    position: absolute;
    background-color: #8eaaf1;
    width: 6px;
    height: 6px;
    border-radius: 100%;
    z-index: 1;
    transition: .2s cubic-bezier(.75, -.27, .3, 1.33) opacity, .3s cubic-bezier(.75, -1.27, .3, 2.33) -webkit-transform;
    transition: .3s cubic-bezier(.75, -1.27, .3, 2.33) transform, .2s cubic-bezier(.75, -.27, .3, 1.33) opacity;
    transition: .3s cubic-bezier(.75, -1.27, .3, 2.33) transform, .2s cubic-bezier(.75, -.27, .3, 1.33) opacity, .3s cubic-bezier(.75, -1.27, .3, 2.33) -webkit-transform;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
    -webkit-transform: scale(1);
    transform: scale(1)
}

.cursor.active {
    opacity: .5;
    -webkit-transform: scale(0);
    transform: scale(0)
}

.cursor.hide {
    -webkit-transform: scale(0);
    transform: scale(0)
}

.cursor-follower {
    position: absolute;
    background-color: rgba(198, 124, 225, .2);
    width: 20px;
    height: 20px;
    border-radius: 100%;
    z-index: 1;
    transition: .2s cubic-bezier(.75, -.27, .3, 1.33) opacity, .6s cubic-bezier(.75, -1.27, .3, 2.33) -webkit-transform;
    transition: .6s cubic-bezier(.75, -1.27, .3, 2.33) transform, .2s cubic-bezier(.75, -.27, .3, 1.33) opacity;
    transition: .6s cubic-bezier(.75, -1.27, .3, 2.33) transform, .2s cubic-bezier(.75, -.27, .3, 1.33) opacity, .6s cubic-bezier(.75, -1.27, .3, 2.33) -webkit-transform;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
    z-index: 10000;
    -webkit-transform: translate(5px, 5px);
    transform: translate(5px, 5px)
}

.cursor-follower:after{
    font-family: sneak;
    font-weight: 100 !important;
    -webkit-font-smoothing: antialiased !important;
    font-size: 6px;
    color: black;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: .3s ease all;
}

.cursor-follower.active {
    opacity: 1;
    -webkit-transform: scale(3);
    transform: scale(3)
}

.cursor-follower.active:after {
    opacity: 1;
}

.cursor-follower.hide {
    -webkit-transform: scale(0);
    transform: scale(0)
}

.cursor--container {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: 10000
}

@media only screen and (max-width:768px) {
    .cursor,
    .cursor-follower {
        display: none
    }
    html {
        cursor: auto
    }
    a,
    button {
        cursor: pointer
    }
}

.default {
    background-color: #373737;
    color: #fff;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 5px solid #fff
}

.footer {
    position: relative;
    height: 100vh;
    width: 100vw
}

.footer--sub {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 50%
}

.footer--sub:first-of-type {
    border-bottom: 1px solid rgba(55, 55, 55, .05)
}

.footer--cta {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: center;
    padding: 0 10vw;
    position: relative;
    -webkit-transform-origin: 1 1 !important;
    transform-origin: 1 1 !important
}

.footer--cta.visible {
    opacity: 0;
    -webkit-transform: rotate3d(1, 0, 0, 90deg) translateY(200px);
    transform: rotate3d(1, 0, 0, 90deg) translateY(200px);
    transition: .3s ease all
}

.footer--cta h2 {
    width: auto;
    margin: 0;
    position: relative
}

.footer--cta h2 .emoji {
    position: absolute;
    top: 0;
    right: -10%
}

.footer--cta h2 a {
    font-family: Saol;
    display: inline-block;
    text-decoration: none
}

.footer--cta h2 a.ie {
    background: inherit;
    -webkit-background-clip: inherit;
    -webkit-text-fill-color: inherit;
    color: #000;
    opacity: .2;
    -webkit-filter: inherit;
    filter: inherit;
    transition: 225ms cubic-bezier(.77, 0, .175, 1) opacity
}

.footer--cta h2 a.ie:hover {
    opacity: 1
}

.footer--cta h2 a:hover {
    background-position: 100% 0
}

.footer--cta h2 a:hover~.emoji {
    -webkit-animation: heartbeat 1.5s linear infinite;
    animation: heartbeat 1.5s linear infinite
}

.footer--social {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
    padding: 0 10vw;
    position: relative
}

.footer--social.visible {
    opacity: 0;
    -webkit-transform: rotate3d(1, 0, 0, 90deg) translateY(200px);
    transform: rotate3d(1, 0, 0, 90deg) translateY(200px);
    transition: .3s ease all
}

.footer--social .list--social {
    position: relative;
    display: flex
}

.footer--social .list--social ul {
    margin-right: 65px
}

.footer--social .list--social ul:last-of-type {
    margin-right: 0
}

.footer--social .list--social ul li {
    list-style: none
}

.footer--social .list--social ul li a {
    font-size: 1.25rem;
    font-family: sneak;
    text-decoration: none
}

.footer--social .list--social ul li a.ie {
    background: inherit;
    -webkit-background-clip: inherit;
    -webkit-text-fill-color: inherit;
    color: #000;
    opacity: .2;
    -webkit-filter: inherit;
    filter: inherit
}

.footer--social .list--social ul li a:hover {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
    opacity: 1;
    background-position: 100% 0
}

.footer--sub.footer-case{
    padding: 10vh 16.5vw 10vh 16.5vw;
}

.signature {
    width: 100px;
    height: 100px;
    position: relative
}

.signature svg {
    width: 100%;
    height: 100%;
    font-family: sneak;
    text-transform: uppercase;
    display: block;
    overflow: visible;
    opacity: .2;
    font-size: 10px;
    position: relative;
    -webkit-animation: rotate 10s linear infinite;
    animation: rotate 10s linear infinite;
    -webkit-transform-origin: center center;
    transform-origin: center center
}

.signature__img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transform-origin: center;
    transform-origin: center;
    width: 24px
}

.signature.player-button{
    width: 100px;
    height: 100px;
    position: absolute;
    top: calc(100vh - 85px);
    right: -15px;
    z-index: 999;
    background-color: rgba(255,255,255, 0.8);
    border-radius: 100px;
}

.signature.player-button svg{
    font-size: 10px;
}


.signature.player-button .signature__img {
    -webkit-transform: translate(-50%, -50%) rotate(-15deg);
    transform: translate(-50%, -50%) rotate(-15deg);
    transition: .225s ease all;
}

.signature.player-button .signature__img.ishide {
    opacity: 0;
    pointer-events: none;
}

.signature__img.close:hover{
    -webkit-transform: translate(-50%, -50%) rotate(-180deg);
    transform: translate(-50%, -50%) rotate(-180deg);
}


@media only screen and (max-width:768px) {
    .signature.player-button{
        width: 100px;
        height: 100px;
        position: absolute;
        top: calc(80vh - 85px);
        right: -15px;
        z-index: 999;
        background-color: rgba(255,255,255, 0.8);
        border-radius: 100px;
    }
}


@-webkit-keyframes float-90 {
    0% {
        -webkit-transform: translateY(-3px) rotate(-90deg);
        transform: translateY(-3px) rotate(-90deg)
    }
    50% {
        -webkit-transform: translateY(3px) rotate(-90deg);
        transform: translateY(3px) rotate(-90deg)
    }
    100% {
        -webkit-transform: translateY(-3px) rotate(-90deg);
        transform: translateY(-3px) rotate(-90deg)
    }
}

@keyframes float-90 {
    0% {
        -webkit-transform: translateY(-3px) rotate(-90deg);
        transform: translateY(-3px) rotate(-90deg)
    }
    50% {
        -webkit-transform: translateY(3px) rotate(-90deg);
        transform: translateY(3px) rotate(-90deg)
    }
    100% {
        -webkit-transform: translateY(-3px) rotate(-90deg);
        transform: translateY(-3px) rotate(-90deg)
    }
}

@media only screen and (max-width:768px) {
    .footer {
        height: auto
    }
    .footer .block,
    .footer--cta,
    .footer--social {
        width: 100vw
    }
    .footer--social {
        width: 100%;
        height: auto;
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-start;
        padding: 10vw;
        margin-bottom: 40px
    }
    .footer--social .list--social {
        flex-flow: row wrap;
        margin-bottom: 100px
    }
    .footer--social .list--social ul:first-of-type {
        width: 100vw;
        margin-bottom: 24px
    }
    .footer--cta {
        height: 200px
    }
    .footer--cta h2 {
        font-size: 1.5rem
    }
    .footer--cta h2 .emoji {
        position: absolute;
        top: 0;
        right: -12%
    }
    .signature {
        margin-left: 3vw
    }
}

@-webkit-keyframes heartbeat {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    25% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    30% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }
    50% {
        -webkit-transform: scale(1.05);
        transform: scale(1.05)
    }
    55% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes heartbeat {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    25% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    30% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }
    50% {
        -webkit-transform: scale(1.05);
        transform: scale(1.05)
    }
    55% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

.page--header {
    position: relative;
    width: 100vw;
    min-height: 100vh;
    display: flex;
    flex-flow: column wrap;
    justify-content: flex-end
}

.page--header h1 {
    max-width: 880px;
    margin: 0 10vw 100px 10vw
}

.page--header.intro h1 {
    opacity: 0;
    -webkit-transform: scale3D(1, 1.2, 1) translateY(10px);
    transform: scale3D(1, 1.2, 1) translateY(10px);
    transition: .3s ease all
}

.page--header.intro .go-down,
.page--header.intro .lang {
    opacity: 0
}

.go-down {
    position: absolute;
    top: 72vh;
    opacity: 1;
    right: 15vw;
    width: 32px;
    height: 32px;
    transition: .5s .5s cubic-bezier(.77, 0, .175, 1) all;
    z-index: 1001;
    -webkit-animation: float 3s cubic-bezier(.77, 0, .175, 1) infinite;
    animation: float 3s cubic-bezier(.77, 0, .175, 1) infinite;
    opacity: .3
}

.go-down img {
    width: 24px;
    height: 24px
}

.go-down:focus {
    outline: 0
}

.go-down.hide {
    top: 51.5vh;
    transition: .5s cubic-bezier(.77, 0, .175, 1) all
}

@media only screen and (max-width:768px) {
    .site_title {
        top: calc(8vh + 80px)
    }
}

@media only screen and (max-width:568px) {
    .page--header {
        position: relative;
        width: 100vw;
        min-height: inherit;
        height: 80vh
    }
    .page--header h1 {
        margin: 0 8vw
    }
    .page--header .lang {
        right: 3vw;
        top: calc(8vh + 95px);
        -webkit-transform: rotate(90deg) translateX(0);
        transform: rotate(90deg) translateX(0)
    }
    .page--header .lang li a {
        font-size: 14px
    }
    .go-down {
        top: calc(65vh - 115px);
        right: 5vw
    }
    .go-down.hide {
        top: calc(50vh - 80px)
    }
    .site_title {
        top: calc(8vh + 80px);
        left: 8vw
    }
    .site_title h3 {
        font-size: 1rem
    }
}

@-webkit-keyframes float {
    0% {
        -webkit-transform: translateY(-3px);
        transform: translateY(-3px)
    }
    50% {
        -webkit-transform: translateY(3px);
        transform: translateY(3px)
    }
    100% {
        -webkit-transform: translateY(-3px);
        transform: translateY(-3px)
    }
}

@keyframes float {
    0% {
        -webkit-transform: translateY(-3px);
        transform: translateY(-3px)
    }
    50% {
        -webkit-transform: translateY(3px);
        transform: translateY(3px)
    }
    100% {
        -webkit-transform: translateY(-3px);
        transform: translateY(-3px)
    }
}

.more--projects {
    margin: 0 auto;
    width: 67vw;
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    overflow: hidden;
    will-change: transform;
}

.more--projects h6 {
    padding-bottom: 24px;
    font-size: 1.25rem
}

.more--projects ul {
    list-style-type: none;
    overflow: hidden
}

.more--projects li {
    overflow: hidden;
    transition: 1.2s .3s ease transform, 1.2s .3s ease opacity;
    -webkit-transform: rotate3d(0, 0, 0, 90deg) translateY(0);
    transform: rotate3d(0, 0, 0, 90deg) translateY(0);
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
    will-change: transform
}

.more--projects li.visible {
    opacity: 0;
    -webkit-transform: rotate3d(1, 0, 0, 90deg) translateY(150px);
    transform: rotate3d(1, 0, 0, 90deg) translateY(150px);
    transition: .3s ease all
}

.more--projects a {
    position: relative;
    overflow: hidden;
    text-decoration: none;
    font-family: Saol;
    font-size: 4rem;
    display: inline-block;
    height: 100%;
    background: linear-gradient(45deg, #5ad5ff, #ff4cd0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: .58;
    transition: .3s cubic-bezier(.77, 0, .175, 1) opacity, 2s ease background-position, .3s cubic-bezier(.77, 0, .175, 1) -webkit-filter;
    transition: .3s cubic-bezier(.77, 0, .175, 1) opacity, .3s cubic-bezier(.77, 0, .175, 1) filter, 2s ease background-position;
    transition: .3s cubic-bezier(.77, 0, .175, 1) opacity, .3s cubic-bezier(.77, 0, .175, 1) filter, 2s ease background-position, .3s cubic-bezier(.77, 0, .175, 1) -webkit-filter;
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
    background: linear-gradient(45deg, #5ad5ff, #ff4cd0, #5ad5ff);
    background-size: 200% 100%;
    background-position: 0 0;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    will-change: filter, opacity;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding-left: 6px;
    padding-right: 6px;
}

.more--projects a.firefox {
    opacity: .6
}

.more--projects a.ie {
    background: inherit;
    -webkit-background-clip: inherit;
    -webkit-text-fill-color: inherit;
    color: #000;
    opacity: .2;
    -webkit-filter: inherit;
    filter: inherit
}

.more--projects a:hover {
    opacity: 1;
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
    background-position: 100% 0
}

.js-project .more--projects {
    min-height: 100vh
}

.js-project .more--projects a {
    font-size: 3rem
}

.floating-img {
    position: fixed;
    bottom: 0;
    right: 0;
    top: 0;
    left: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
    transition: .2s cubic-bezier(.77, 0, .175, 1) all;
    opacity: 1
}

.floating-img.hidden canvas {
    opacity: 0
}

.floating-img .img {
    position: absolute;
    top: 30%;
    left: 30%;
    width: 20vw;
    height: 12vw;
    background-color: rgba(0, 0, 255, .2);
    z-index: 2;
    transition: .6s cubic-bezier(.77, 0, .175, 1) opacity;
    opacity: 0;
    will-change: transform
}

.floating-img .img.fadein {
    opacity: 1
}

.floating-img .img img {
    position: relative;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.floating-img canvas {
    position: absolute;
    top: 0;
    left: 0;
    background-color: transparent;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: -1;
    transition: .3s cubic-bezier(.77, 0, .175, 1) all
}

@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    100% {
        -webkit-transform: rotate(-360deg);
        transform: rotate(-360deg)
    }
}

@keyframes rotate {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    100% {
        -webkit-transform: rotate(-360deg);
        transform: rotate(-360deg)
    }
}

@media only screen and (max-width:1024px) {
    .more--projects {
        width: 680px
    }
    .more--projects a {
        font-size: 3.5rem
    }
}

@media only screen and (max-width:768px) {
    .more--projects {
        max-width: 80vw
    }
    .more--projects a {
        font-size: 3rem
    }
    .floating-img .img {
        width: 40vw;
        height: 24vw
    }
}

@media only screen and (max-width:568px) {
    .more--projects {
        max-width: 300px
    }
    .more--projects a {
        font-size: 2rem;
        opacity: .4
    }
    .js-project .more--projects {
        min-height: 100vh
    }
    .js-project .more--projects a {
        font-size: 2rem
    }
}

.loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .3s cubic-bezier(.77, 0, .175, 1) all
}

.loader.loaded {
    opacity: 0
}

.loader .rot {
    font-size: 1.5rem;
    opacity: 0;
    -webkit-animation: rot 15s 3s linear infinite;
    animation: rot 15s 3s linear infinite
}

.loader--intro {
    transition: .5s cubic-bezier(.77, 0, .175, 1) all;
    opacity: 0;
    position: absolute;
    top: 8vh;
    left: calc(5vw + 36px);
    font-family: sneak;
    font-size: 1.25rem
}

.loader--intro.active {
    opacity: 1
}

@media only screen and (max-width:1024px) {
    .loader--img {
        top: 32px
    }
    .loader--intro {
        top: 34px;
        font-size: 1rem
    }
}

@-webkit-keyframes rot {
    0% {
        opacity: 0;
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    20% {
        opacity: 1;
        -webkit-transform: rotate(72deg);
        transform: rotate(72deg)
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes rot {
    0% {
        opacity: 0;
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    20% {
        opacity: 1;
        -webkit-transform: rotate(72deg);
        transform: rotate(72deg)
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

.nav-bg {
    position: fixed;
    top: 0vh;
    left: 0;
    width: 100vw;
    height: 200px;
    display: block;
    background-image: linear-gradient(#fff, rgba(255, 255, 255, 0));
    z-index: 999;
    transition: .5s .5s ease all;
    pointer-events: none
}

.nav-bg.case,
.nav-bg.out,
.nav-bg.top {
    opacity: 0;
    transition: .2s ease all
}

.navigation {
    position: fixed;
    z-index: 1000;
    width: 67vw;
    height: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    top: 20vh;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: .5s cubic-bezier(.77, 0, .175, 1) opacity, .5s cubic-bezier(.77, 0, .175, 1) top, .5s cubic-bezier(.77, 0, .175, 1) padding-bottom
}

.navigation.hidden,
.navigation.scroll,
.navigation.out {
    opacity: 0;
    pointer-events: none
}

.navigation.reduce {
    top: 10vh
}

.navigation .home--logo {
    position: absolute;
    top: -21px;
    left: -32px;
    -webkit-user-select: inherit;
    -moz-user-select: inherit;
    -ms-user-select: inherit;
    user-select: inherit;
    height: 64px;
    width: 64px;
    padding: 20px;
    opacity: .75;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    text-decoration: none;
    -webkit-perspective: 80px;
    perspective: 80px
}

.navigation .home--logo h3 {
    font-size: 1rem;
    font-family: sneak;
    color: #000;
    display: inline;
    width: 200px;
    top: 21px;
    left: 56px;
    position: absolute
}

.navigation .home--logo img {
    transition: .25s cubic-bezier(.77, 0, .175, 1) all
}

.navigation .home--logo:after {
    content: '';
    position: absolute;
    top: 21px;
    left: 20px;
    width: calc(100% - 44px);
    height: calc(100% - 44px);
    background: url(../svg/logo-color.svg) no-repeat;
    background-size: contain;
    transition: .25s cubic-bezier(.77, 0, .175, 1) opacity, .25s .25s cubic-bezier(.77, 0, .175, 1) transform;
    opacity: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.navigation .home--logo.hover img {
    opacity: 0
}

.navigation .home--logo.hover:after {
    opacity: 1;
    transition: .25s cubic-bezier(.77, 0, .175, 1) opacity, 2s cubic-bezier(.77, 0, .175, 1) -webkit-transform;
    transition: .25s cubic-bezier(.77, 0, .175, 1) opacity, 2s cubic-bezier(.77, 0, .175, 1) transform;
    transition: .25s cubic-bezier(.77, 0, .175, 1) opacity, 2s cubic-bezier(.77, 0, .175, 1) transform, 2s cubic-bezier(.77, 0, .175, 1) -webkit-transform;
    -webkit-transform: rotateY(-360deg);
    transform: rotateY(-360deg)
}

.navigation .home--logo img {
    height: 20px;
    opacity: .15
}

.navigation .menu {
    position: absolute;
    top: 0vh;
    right: 0vw;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-end;
    transition: 1s cubic-bezier(.77, 0, .175, 1) opacity, 1s cubic-bezier(.77, 0, .175, 1) -webkit-transform;
    transition: 1s cubic-bezier(.77, 0, .175, 1) opacity, 1s cubic-bezier(.77, 0, .175, 1) transform;
    transition: 1s cubic-bezier(.77, 0, .175, 1) opacity, 1s cubic-bezier(.77, 0, .175, 1) transform, 1s cubic-bezier(.77, 0, .175, 1) -webkit-transform
}

.navigation .menu-item {
    display: block;
    opacity: 1;
    z-index: 2;
    margin-left: 36px;
    transition: 1s cubic-bezier(.77, 0, .175, 1) opacity;
    will-change: opacity
}

.navigation .menu-item img {
    width: 24px;
    -webkit-transform: translateY(-10%);
    transform: translateY(-10%)
}

.navigation .menu-item.intro {
    opacity: 0
}

.navigation .menu-item:first-of-type {
    margin-left: 0;
    transition-delay: 0s
}

.navigation .menu-item:nth-of-type(2) {
    transition-delay: .1s
}

.navigation .menu-item:last-of-type {
    transition-delay: .2s
}

.navigation .menu-item a {
    text-decoration: none;
    color: rgba(55, 55, 55, .6);
    font-family: sneak;
    font-size: 1rem
}

.navigation .menu.is-inactive {
    -webkit-transform: translateX(-40%);
    transform: translateX(-40%);
    opacity: 0
}

.navigation .back-home {
    position: absolute;
    top: 0vh;
    right: 0vw;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    opacity: 0;
    font-size: 1rem;
    text-decoration: none;
    background: linear-gradient(45deg, #5ad5ff, #ff4cd0, #5ad5ff);
    background-size: 200% 100%;
    background-position: 0 0;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
    transition: .6s ease background-position, 1s cubic-bezier(.77, 0, .175, 1) opacity, 1s cubic-bezier(.77, 0, .175, 1) -webkit-transform;
    transition: .6s ease background-position, 1s cubic-bezier(.77, 0, .175, 1) opacity, 1s cubic-bezier(.77, 0, .175, 1) transform;
    transition: .6s ease background-position, 1s cubic-bezier(.77, 0, .175, 1) opacity, 1s cubic-bezier(.77, 0, .175, 1) transform, 1s cubic-bezier(.77, 0, .175, 1) -webkit-transform;
    will-change: transition, filter
}

.navigation .back-home.ie {
    background: inherit;
    -webkit-background-clip: inherit;
    -webkit-text-fill-color: inherit;
    color: #000;
    -webkit-filter: inherit;
    filter: inherit
}

.navigation .back-home:hover {
    background-position: 100% 0;
    -webkit-filter: grayscale(0);
    filter: grayscale(0)
}

.navigation .back-home:hover:before {
    margin-right: 18px
}

.navigation .back-home.is-active {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1
}

.navigation .back-home:before {
    content: url(../svg/arrow-left.svg);
    display: inline-block;
    -webkit-transform: scale(1.5) translateY(-1px);
    transform: scale(1.5) translateY(-1px);
    transition: .3s ease margin-right;
    margin-right: 12px;
    opacity: .4
}

.navigation .contact-nav {
    display: flex;
    flex-flow: row wrap;
    position: absolute;
    top: 24px;
    left: 24px;
}


.navigation .contact-nav a {
    text-decoration: none;
    color: black;
    opacity: .3;
}

.navigation .contact-nav a {
    text-decoration: none;
    color: black;
    background: linear-gradient(45deg, #5ad5ff, #ff4cd0, #5ad5ff);
    background-size: 200% 100%;
    background-position: 0 0;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
    opacity: .7;
    transition: .6s ease background-position, 1s cubic-bezier(.77, 0, .175, 1) opacity, 1s cubic-bezier(.77, 0, .175, 1) -webkit-transform;
    transition: .6s ease background-position, 1s cubic-bezier(.77, 0, .175, 1) opacity, 1s cubic-bezier(.77, 0, .175, 1) transform;
    transition: .6s ease background-position, 1s cubic-bezier(.77, 0, .175, 1) opacity, 1s cubic-bezier(.77, 0, .175, 1) transform, 1s cubic-bezier(.77, 0, .175, 1) -webkit-transform;
    will-change: transition, filter;
}

.navigation .contact-nav a:hover {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
    opacity: 1;
    background-position: 100% 0;
}

.navigation .contact-nav a:last-of-type {
    margin-left: 8px;
}

.navigation .contact-nav a:first-of-type {
    margin-right: 8px;
}

@media only screen and (max-width:1024px) {
    .navigation {
        width: 680px
    }
}

@media only screen and (max-width:768px) {
    .nav-bg {
        display: none
    }
    .navigation .contact-nav {
        display: none;
    }
    .navigation {
        z-index: 9999;
        width: 100vw;
        background: #fff;
        border-bottom: 1px solid rgba(55, 55, 55, .1);
        height: 70px;
        top: 0;
        left: 0;
        -webkit-transform: translateX(0);
        transform: translateX(0);
        padding-bottom: 0vh
    }
    .navigation.hidden,
    .navigation.scroll {
        opacity: 1;
        padding-bottom: 0vh;
        top: 0;
        pointer-events: inherit
    }
    .navigation .home--logo {
        left: 15px;
        top: 50%;
        -webkit-transform: translateY(-45%);
        transform: translateY(-45%)
    }
    .navigation .home--logo h3 {
        display: none
    }
    .navigation .menu {
        position: absolute;
        top: 3vh;
        right: 25px;
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-end
    }
    .navigation .menu-item {
        margin-left: 12px
    }
    .navigation .menu-item a {
        overflow: hidden;
        width: 32px;
        height: 32px;
        display: block;
        word-wrap: nowrap;
        padding: 4px;
        color: transparent
    }
    .navigation .back-home {
        top: 27px;
        right: 8vw
    }
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotateY(0);
        transform: rotateY(0)
    }
    100% {
        -webkit-transform: rotateY(-360deg);
        transform: rotateY(-360deg)
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotateY(0);
        transform: rotateY(0)
    }
    100% {
        -webkit-transform: rotateY(-360deg);
        transform: rotateY(-360deg)
    }
}

picture {
    width: 100vw;
    position: relative
}

picture img {
    width: 100vw
}

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

.progress {
    position: fixed;
    top: 0;
    right: 0;
    width: 5px;
    height: 0;
    background: linear-gradient(0deg, #5ad5ff, #ff4cd0);
    z-index: 9999;
    transition: top .5s cubic-bezier(.77, 0, .175, 1), opacity .5s cubic-bezier(.77, 0, .175, 1)
}

.progress.out {
    top: 100vh;
    opacity: 0
}

@media only screen and (max-width:768px) {
    .progress {
        display: none
    }
}

.js-project header {
    margin: 0 auto;
    width: 67vw;
    height: 56vh;
    position: relative;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: flex-start;
    position: relative
}

.js-project header h1 {
    -webkit-transform: translateY(80px);
    transform: translateY(80px);
    position: relative;
    font-family: Saol;
    width: 100%;
    margin: 0 0 24px 0;
    font-size: 4rem;
    color: rgba(0, 0, 0, .2);
    line-height: 6rem;
    padding-left: 8px;
}

.js-project header h6 {
    position: absolute;
    bottom: 2%;
    left: 0;
    font-size: 1rem
}

.js-project header.intro h1 {
    opacity: 0;
    -webkit-transform: rotate3d(1, 0, 0, 90deg) translateY(200px);
    transform: rotate3d(1, 0, 0, 90deg) translateY(200px);
    transition: .3s ease all
}

.js-project .case--full,
.js-project .case--gallery {
    margin: 0
}

.js-project .case--gallery {
    margin-bottom: 12vh
}

.js-project .text {
    padding: 3vw 5vw 9vw 5vw;
    display: flex;
    flex-flow: row wrap
}

.js-project .text.no-bottom {
    padding-bottom: 0
}

.js-project .text p.gs {
    position: relative;
    font-family: sneak;
    max-width: 650px;
    margin: 0 auto;
    font-size: 1.7rem;
    line-height: 3rem
}

.js-project .text p.gs div.visible {
    opacity: 0;
    -webkit-transform: rotate3d(1, 0, 0, 0deg) translateY(100px);
    transform: rotate3d(1, 0, 0, 0deg) translateY(100px);
    transition: .3s ease all
}

.js-project .text p.gs div em {
    position: relative;
    font-family: sneak;
    font-size: 2.75rem;
    line-height: 4rem
}

.js-project .project {
    position: absolute;
    overflow: hidden;
    transition: .8s ease transform;
    -webkit-transform: scale3D(1, 1, 1) translateY(0);
    transform: scale3D(1, 1, 1) translateY(0);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    opacity: 1;
    will-change: transform;
    overflow: hidden
}

.js-project .project:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: -10%;
    display: block;
    background-color: #fff;
    width: 120%;
    height: 100%;
    z-index: 99;
    transition: .8s .2s ease transform;
    will-change: transform;
    -webkit-transform: translateY(99.5%);
    transform: translateY(99.5%)
}

.js-project .project.intro,
.js-project .project.visible {
    transition: .3s ease all;
    -webkit-transform: scale3D(1, 1.3, 1) translateY(100px);
    transform: scale3D(1, 1.3, 1) translateY(100px)
}

.js-project .project.intro:before,
.js-project .project.visible:before {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    transition: .1s ease transform
}

.js-project .container {
    margin: 4vh 0 0 0;
    background-color: #fff
}

@media only screen and (max-width:1024px) {
    .js-project header {
        padding: 2vw 0 0 0;
        width: 680px
    }
    .js-project header h1 {
        font-size: 2rem;
        line-height: 3rem
    }
    .js-project .container {
        margin: 0
    }
    .js-project .text {
        margin-top: 10vh
    }
    .js-project .text p,
    .js-project .text p em {
        font-size: 2rem;
        line-height: 3rem
    }
}

@media only screen and (max-width:768px) {
    .js-project header {
        padding: 2vw 0 0 0;
        width: 300px;
        height: 65vh
    }
    .js-project header h1 {
        -webkit-transform: translateY(80px);
        transform: translateY(80px)
    }
    .js-project .container {
        margin: 10vh 0
    }
    .js-project .text {
        margin-top: 5vh;
        display: flex;
        flex-flow: column wrap
    }
    .js-project .text p.gs {
        font-size: 1.5rem;
        line-height: 2.5rem
    }
    .js-project .project {
        -webkit-transform: scale3D(1, 1, 1) translateY(0);
        transform: scale3D(1, 1, 1) translateY(0)
    }
    .js-project .project:before {
        bottom: 0
    }
}

.case--gallery .row,
.projects .row {
    margin: 0;
    position: relative;
    height: 200px;
    transition: 0s ease all
}

.case--gallery .row .pos-0,
.case--gallery .row .pos-1,
.case--gallery .row .pos-2,
.case--gallery .row .pos-3,
.case--gallery .row .pos-4,
.case--gallery .row .pos-5,
.projects .row .pos-0,
.projects .row .pos-1,
.projects .row .pos-2,
.projects .row .pos-3,
.projects .row .pos-4,
.projects .row .pos-5 {
    top: -25%
}

.case--gallery .row.pos-0,
.projects .row.pos-0 {
    margin: 0 auto 14vh auto;
    width: 940px
}

.case--gallery .row.pos-1,
.projects .row.pos-1 {
    margin: 0 0 5vh 0
}

.case--gallery .row.pos-2,
.projects .row.pos-2 {
    margin: 0 0 3vh 0
}

.case--gallery .row.pos-3,
.projects .row.pos-3 {
    margin: 0 0 10vh 0
}

.case--gallery .row.pos-4,
.projects .row.pos-4 {
    margin: 0 0 14vh 0
}

.case--gallery .row.pos-5,
.projects .row.pos-5 {
    margin: 0 0 7vh 0
}

.case--gallery .row:last-of-type,
.projects .row:last-of-type {
    margin: 0 0 0vh 0 !important
}

.case--gallery .row .pos-0,
.case--gallery .row .pos-2,
.case--gallery .row .pos-3,
.case--gallery .row .pos-5,
.projects .row .pos-0,
.projects .row .pos-2,
.projects .row .pos-3,
.projects .row .pos-5 {
    width: 45vw
}

.case--gallery .row .pos-1,
.case--gallery .row .pos-4,
.projects .row .pos-1,
.projects .row .pos-4 {
    width: 60vw
}

.case--gallery .row .pos-0,
.projects .row .pos-0 {
    left: 0vw
}

.case--gallery .row .pos-1,
.projects .row .pos-1 {
    right: -5vw
}

.case--gallery .row .pos-2,
.projects .row .pos-2 {
    left: -2.5vw
}

.case--gallery .row .pos-3,
.projects .row .pos-3 {
    left: 52.5vw
}

.case--gallery .row .pos-4,
.projects .row .pos-4 {
    left: 10vw
}

.case--gallery .row .pos-5,
.projects .row .pos-5 {
    right: -5vw
}

.case--gallery .row.pos-5+.row.pos-0,
.projects .row.pos-5+.row.pos-0 {
    margin-top: 96px
}

@media only screen and (max-width:1024px) {
    .case--gallery,
    .projects {
        margin-top: 5vw
    }
    .case--gallery .row,
    .projects .row {
        margin: 0 0 2vw 0 !important;
        position: relative;
        height: 45vw !important;
        transition: 0s ease all
    }
    .case--gallery .row .pos-0,
    .case--gallery .row .pos-1,
    .case--gallery .row .pos-2,
    .case--gallery .row .pos-3,
    .case--gallery .row .pos-4,
    .case--gallery .row .pos-5,
    .projects .row .pos-0,
    .projects .row .pos-1,
    .projects .row .pos-2,
    .projects .row .pos-3,
    .projects .row .pos-4,
    .projects .row .pos-5 {
        left: inherit;
        right: inherit;
        top: inherit;
        bottom: inherit;
        -webkit-transform: none;
        transform: none;
        position: relative;
        width: 90vw !important;
        height: 45vw !important;
        margin: 0 auto
    }
    .case--gallery .row.pos-0,
    .projects .row.pos-0 {
        width: inherit;
        margin-top: 0 !important
    }
    .js-project .case--gallery {
        margin-bottom: 0vh
    }
}

@media only screen and (max-width:768px) {
    .case--gallery .row,
    .projects .row {
        height: auto !important;
        margin: 0 0 5vw 0 !important
    }
    .case--gallery .row .pos-0,
    .case--gallery .row .pos-1,
    .case--gallery .row .pos-2,
    .case--gallery .row .pos-3,
    .case--gallery .row .pos-4,
    .case--gallery .row .pos-5,
    .projects .row .pos-0,
    .projects .row .pos-1,
    .projects .row .pos-2,
    .projects .row .pos-3,
    .projects .row .pos-4,
    .projects .row .pos-5 {
        height: auto !important
    }
    .js-project .case--gallery {
        margin-bottom: 0vh
    }
}

.profile {
    margin: 20vh 0 0 16.5vw;
    max-width: 940px;
    padding-right: 200px;
    position: relative
}

.profile h6 {
    padding-bottom: 24px
}

.profile h2 {
    font-size: 2rem;
    font-family: sneak;
    margin-bottom: 8px
}

.profile p.gs {
    position: relative;
    font-family: sneak;
    width: 100%;
    margin: 0 0 40px 0;
    font-size: 1.95rem;
    line-height: 3.05rem
}

.profile p.gs div.visible {
    opacity: 0;
    -webkit-transform: rotate3d(1, 0, 0, 0deg) translateY(100px);
    transform: rotate3d(1, 0, 0, 0deg) translateY(100px);
    transition: .3s ease all
}

p a,
p strong {
    color: #000;
    display: inline-block;
    text-decoration: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: relative;
    -webkit-overflow-scrolling: touch;
}

p a:focus,
p a:hover,
p strong:focus,
p strong:hover {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
    opacity: 1;
    background-position: 100% 0;
}

p a:focus:after,
p a:hover:after,
p strong:focus:after,
p strong:hover:after {
    background-position: 100% 0;
}

p a.ie,
p strong.ie {
    background: inherit;
    -webkit-background-clip: inherit;
    -webkit-text-fill-color: inherit;
    color: #000;
    opacity: .4;
    -webkit-filter: inherit;
    filter: inherit
}

p a.ie:hover,
p strong.ie:hover {
    opacity: 1
}

.service {
    margin: 20vh 0 0 16.5vw;
    max-width: 940px;
    padding-right: 200px;
    position: relative
}

.service h4 {
    font-family: Saol;
    font-size: 3.2rem;
    line-height: 4.2rem;
    max-width: 80%;
    margin-top: 160px;
    margin-bottom: 160px;
    opacity: .3
}

.service h4.gs div.visible {
    opacity: 0;
    -webkit-transform: rotate3d(1, 0, 0, 90deg) translateY(200px);
    transform: rotate3d(1, 0, 0, 90deg) translateY(200px);
    transition: .3s ease all
}

.service h6 {
    padding-bottom: 24px
}

.service p.gs {
    position: relative;
    font-family: sneak;
    width: 100%;
    margin: 0 0 40px 0;
    font-size: 1.95rem;
    line-height: 3.05rem
}

.service p.gs div.visible {
    opacity: 0;
    -webkit-transform: rotate3d(1, 0, 0, 0deg) translateY(100px);
    transform: rotate3d(1, 0, 0, 0deg) translateY(100px);
    transition: .3s ease all
}

.service h3.gs {
    opacity: .33;
    margin-top: 48px;
    font-size: 2.75rem;
    line-height: 4rem
}

.service h3.gs div.visible {
    opacity: 0;
    -webkit-transform: rotate3d(1, 0, 0, 180deg) translateY(100px);
    transform: rotate3d(1, 0, 0, 180deg) translateY(100px);
    transition: .3s ease all
}

.spaceship-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    transition: .2s .6s cubic-bezier(.77, 0, .175, 1) opacity;
    opacity: 1
}

.spaceship-container.hidden {
    opacity: 0;
    transition: .1s cubic-bezier(.77, 0, .175, 1) opacity
}

.spaceship-container canvas {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: -1;
    transition: .5s ease all
}

.spaceship-container canvas.hidden {
    opacity: 0
}

.spaceship-container h1 {
    font-size: 2rem;
    color: #555;
    font-family: Saol;
    transition: .5s cubic-bezier(.77, 0, .175, 1) opacity
}


.spaceship-container h1 div.visible {
    opacity: 0;
    -webkit-transform: rotate3d(1, 0, 0, 0deg) translateY(100px);
    transform: rotate3d(1, 0, 0, 0deg) translateY(100px);
    transition: .3s ease all
}

.spaceship-container h1.hide {
    opacity: 0
}

.spaceship-container .spaceship {
    position: absolute;
    bottom: calc(12vh - 20px);
    left: calc(15vh - 20px);
    z-index: 10;
    font-size: 1.25rem;
    padding: 20px;
    opacity: 1;
    transition: .4s ease opacity .1s
}

.spaceship-container .spaceship.hide {
    opacity: 0
}

.spaceship-container .spaceship.ready {
    -webkit-animation: .2s ease infinite spaceshake;
    animation: .2s ease infinite spaceshake
}

.spaceship-container .spaceship-canvas {
    position: absolute;
    top: 90vh;
    left: 8%;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    will-change: transform;
    pointer-events: none;
    z-index: 11;
    transition: .2s ease opacity
}

.spaceship-container .spaceship-canvas .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 1.8rem;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    pointer-events: none;
    text-shadow: 0 0 4px #000;
    transition: .2s ease font-size
}

.spaceship-container .spaceship-canvas.hidden {
    opacity: 0
}

.spaceship-container .spaceship-canvas.hidden .icon {
    font-size: 1rem
}

.spaceship-container .landing-area {
    position: absolute;
    bottom: 12%;
    left: 6%;
    width: 70px;
    height: 70px;
    background-color: rgba(255, 255, 255, .15);
    -webkit-transform: translate(0, 30%) scale(1);
    transform: translate(0, 30%) scale(1);
    border-radius: 100%;
    transition: .4s ease opacity .11s, .4s ease transform .11s, .1s ease z-index;
    z-index: 1;
    opacity: 1
}

.spaceship-container .landing-area.hidden {
    -webkit-transform: translate(0, 30%) scale(.9);
    transform: translate(0, 30%) scale(.9);
    opacity: 0;
    z-index: -10;
    transition: .4s ease opacity, .4s ease transform, .5s ease z-index .5s
}

.spaceship-container .landing-area .spot {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    opacity: .2;
    border-radius: 100%;
    -webkit-transform: scale(0);
    transform: scale(0)
}

.spaceship-container .landing-area:after {
    content: 'Landing Area';
    position: absolute;
    width: 240px;
    top: 50%;
    left: 120%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    font-size: 1rem;
    color: #fff
}



.overlay-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    transition: .6s cubic-bezier(.77, 0, .175, 1) all;
    opacity: 0;
    transform: translateY(-100%);
    display: flex;
}


.overlay-video video{
    width: 100vw;
    margin: auto;
}

.overlay-video.show {
    opacity: 1;
    transform: translateY(0%)
}


@-webkit-keyframes spaceshake {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    25% {
        -webkit-transform: rotate(-8deg);
        transform: rotate(-8deg)
    }
    75% {
        -webkit-transform: rotate(8deg);
        transform: rotate(8deg)
    }
    100% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
}

@keyframes spaceshake {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    25% {
        -webkit-transform: rotate(-8deg);
        transform: rotate(-8deg)
    }
    75% {
        -webkit-transform: rotate(8deg);
        transform: rotate(8deg)
    }
    100% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
}

@media only screen and (max-width:1024px) {
    .profile,
    .service {
        max-width: 680px;
        margin: 20vh auto 0 auto;
        padding-right: 120px
    }
    .profile p,
    .profile p.gs,
    .service p,
    .service p.gs {
        font-size: 2rem;
        line-height: 3rem
    }
    .service h3,
    .service p {
        font-size: 2rem;
        line-height: 3rem
    }
    .service h4.gs {
        font-size: 2.2rem;
        line-height: 3.2rem;
        max-width: 100%
    }
}

@media only screen and (max-width:768px) {
    .profile {
        max-width: 80vw;
        margin: 20vh auto 0 auto;
        padding-right: 0
    }
    .profile p {
        padding: 0
    }
    .service {
        max-width: 80vw;
        margin: 20vh auto 0 auto;
        padding-right: 0
    }
    .service ul li {
        font-size: 16px
    }
    .service h4.gs {
        font-size: 2rem;
        line-height: 3rem;
        max-width: 60%;
        margin-top: 80px;
        margin-bottom: 80px
    }
    .profile p.gs,
    .service p.gs {
        font-size: 1.5rem;
        line-height: 2.5rem
    }
    .spaceship-container {
        display: none;
        visibility: hidden
    }
}

@media only screen and (max-width:568px) {
    .service h4.gs {
        max-width: 100%
    }
}

/* ===== Vertical spacing tightening — reduces oversized gaps between nav, images and text divs site-wide (appended override; selectors match the originals' specificity so they win on source order) ===== */
/* text blocks: cut the big bottom padding + top margin */
.js-project .text, .js-home .text { padding: 2vw 5vw 4vw 5vw; }
.text { margin-top: 4vh; }
.container { margin-top: 3vh; }
/* gallery: gap after each gallery group and between overlapping image rows */
.js-project .case--gallery, .js-home .case--gallery { margin-bottom: 6vh; }
.case--gallery .row.pos-0, .projects .row.pos-0 { margin: 0 auto 7vh auto; }
.case--gallery .row.pos-1, .projects .row.pos-1 { margin: 0 0 3vh 0; }
.case--gallery .row.pos-2, .projects .row.pos-2 { margin: 0 0 2vh 0; }
.case--gallery .row.pos-3, .projects .row.pos-3 { margin: 0 0 5vh 0; }
.case--gallery .row.pos-4, .projects .row.pos-4 { margin: 0 0 7vh 0; }
.case--gallery .row.pos-5, .projects .row.pos-5 { margin: 0 0 4vh 0; }
.case--gallery .row.pos-5 + .row.pos-0, .projects .row.pos-5 + .row.pos-0 { margin-top: 48px; }
/* "Selected Work" list no longer forced to a full viewport of centered emptiness */
.js-project .more--projects, .js-home .more--projects, .more--projects { min-height: 60vh; }
@media (max-width: 800px) {
  .text { margin-top: 3vh; }
  .js-project .case--gallery, .js-home .case--gallery, .case--gallery, .projects { margin-top: 3vw; }
  .case--gallery .row, .projects .row { margin: 0 0 3vw 0 !important; }
  .js-project .more--projects, .js-home .more--projects, .more--projects { min-height: auto; padding: 8vh 0; }
}