@import url(https://fonts.googleapis.com/css?family=Libre+Franklin:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=latin-ext);
/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
	 ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */ }

/* Sections
	 ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0; }

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0; }

/* Grouping content
	 ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */ }

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */ }

/* Text-level semantics
	 ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent; }

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  text-decoration: underline dotted;
  /* 2 */ }

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder; }

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */ }

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%; }

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sub {
  bottom: -0.25em; }

sup {
  top: -0.5em; }

/* Embedded content
	 ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none; }

/* Forms
	 ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */ }

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible; }

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none; }

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; }

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0; }

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText; }

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em; }

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */ }

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline; }

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto; }

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto; }

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */ }

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */ }

/* Interactive
	 ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block; }

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item; }

/* Misc
	 ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none; }

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none; }

.icon-arrow-long {
  --icon-color:#fff;
  fill: var(--icon-color);
  stroke: var(--icon-color);
  display: inline-block;
  vertical-align: text-top;
  position: relative;
  line-height: 0px; }
  .icon-arrow-long svg {
    overflow: visible;
    vertical-align: top; }
  .icon-arrow-long .arrow-head {
    stroke-width: 2px;
    fill: none; }

.icon-arrow {
  --icon-color:#fff;
  fill: var(--icon-color);
  stroke: var(--icon-color);
  display: inline-block;
  vertical-align: text-top;
  position: relative;
  line-height: 0px; }
  .icon-arrow svg {
    overflow: visible;
    vertical-align: top; }
  .icon-arrow .arrow-head {
    stroke-width: 0px;
    fill: none; }

.component {
  padding-top: 2em;
  padding-bottom: 2em;
  --padding-mobile:16px;
  -webkit-transform: translate3d(0, 0, 0); }
  .component h2:first-of-type {
    box-sizing: border-box;
    padding: 0px var(--padding-mobile);
    margin-bottom: 1em;
    margin-top: 0px; }
  .component h4 {
    font-size: 1em;
    margin: 0px;
    letter-spacing: 1px; }
  @media screen and (min-width: 50em) {
    .component {
      padding-top: 5em;
      padding-bottom: 5em; }
      .component h2:first-of-type {
        width: 80%;
        max-width: 1376px;
        margin-left: auto;
        margin-right: auto;
        padding: 0px 11px; } }
  .component.component--featured-projects h2 {
    letter-spacing: 0px; }
  .component.component--featured-projects .featured-projects-wrap {
    padding: 0px 1em; }
    .component.component--featured-projects .featured-projects-wrap .project-view {
      width: 100%; }
  @media screen and (min-width: 37.5em) {
    .component.component--featured-projects .featured-projects-wrap .project-view {
      width: 50%;
      display: inline-block; }
      .component.component--featured-projects .featured-projects-wrap .project-view:nth-child(even) {
        padding-left: 1em; }
      .component.component--featured-projects .featured-projects-wrap .project-view:nth-child(odd) {
        padding-right: 1em; } }
  @media screen and (min-width: 50em) {
    .component.component--featured-projects .featured-projects-wrap {
      width: 100%;
      max-width: 1720px;
      margin-left: auto;
      margin-right: auto;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      box-sizing: border-box; }
      .component.component--featured-projects .featured-projects-wrap .project-view {
        width: 50%; }
        .component.component--featured-projects .featured-projects-wrap .project-view:nth-child(even) {
          padding-left: 1em; }
        .component.component--featured-projects .featured-projects-wrap .project-view:nth-child(odd) {
          padding-right: 1em; } }
  .component.component--catalogue-projects {
    background-color: #0d0d0d; }
    .component.component--catalogue-projects .catalogue-projects-wrap {
      padding: 0px 1em;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap; }
      .component.component--catalogue-projects .catalogue-projects-wrap .project-view {
        width: 25%;
        padding: .25em;
        position: relative; }
        .component.component--catalogue-projects .catalogue-projects-wrap .project-view .overlay {
          position: absolute;
          z-index: 10;
          top: 0px;
          left: 0px;
          width: 100%;
          height: 100%;
          padding: 2em 0em;
          box-sizing: border-box;
          display: none;
          transition: all 0.3s cubic-bezier(0.2, 0, 0.4, 1); }
        .component.component--catalogue-projects .catalogue-projects-wrap .project-view .poster img {
          display: block;
          width: 100%;
          transition: transform 0.3s cubic-bezier(0.2, 0, 0.4, 1); }
    @media screen and (min-width: 50em) {
      .component.component--catalogue-projects .catalogue-projects-wrap {
        width: 80%;
        max-width: 1376px;
        margin-left: auto;
        margin-right: auto;
        padding-bottom: 5em; }
        .component.component--catalogue-projects .catalogue-projects-wrap .project-view {
          width: 20%;
          padding: 1em;
          box-sizing: border-box;
          transition: opacity 0.3s cubic-bezier(0.2, 0, 0.4, 1); }
          .component.component--catalogue-projects .catalogue-projects-wrap .project-view:hover {
            opacity: 1 !important; }
            .component.component--catalogue-projects .catalogue-projects-wrap .project-view:hover .project-view__wrap {
              z-index: 10 !important; }
            .component.component--catalogue-projects .catalogue-projects-wrap .project-view:hover .overlay {
              opacity: 1;
              top: 100%;
              pointer-events: all; }
            .component.component--catalogue-projects .catalogue-projects-wrap .project-view:hover .poster img {
              transform-origin: "center center";
              transform: scale(1.1); }
          .component.component--catalogue-projects .catalogue-projects-wrap .project-view .overlay {
            pointer-events: none;
            opacity: 0;
            top: 110%;
            left: -25%;
            height: auto;
            position: absolute;
            display: block; }
            .component.component--catalogue-projects .catalogue-projects-wrap .project-view .overlay h4 {
              padding: 0px;
              margin: 0px; }
            .component.component--catalogue-projects .catalogue-projects-wrap .project-view .overlay p {
              margin: 0px;
              font-size: .8em;
              line-height: 1.5em; }
          .component.component--catalogue-projects .catalogue-projects-wrap .project-view img {
            line-height: 0px;
            width: 100%;
            display: block; }
        .component.component--catalogue-projects .catalogue-projects-wrap:hover .project-view {
          opacity: .10; } }
  .component.component--project-navigation {
    background-color: #1a1a1a;
    padding: 0px; }
    .component.component--project-navigation .project-navigation-inner {
      padding: 1em;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap; }
      .component.component--project-navigation .project-navigation-inner h4 {
        font-size: .6em; }
      .component.component--project-navigation .project-navigation-inner .project-view.small.mobile {
        margin-top: 1em;
        margin-bottom: 0px; }
      .component.component--project-navigation .project-navigation-inner .project-view.small a {
        display: block;
        transform: translateZ(0); }
      .component.component--project-navigation .project-navigation-inner .project-view.small:nth-child(1) {
        padding-right: .25em; }
      .component.component--project-navigation .project-navigation-inner .project-view.small:nth-child(2) {
        padding-left: .25em; }
    @media screen and (min-width: 50em) {
      .component.component--project-navigation .project-navigation-inner {
        padding: 5em 1em;
        box-sizing: border-box;
        width: 80%;
        max-width: 1376px;
        margin-left: auto;
        margin-right: auto; }
        .component.component--project-navigation .project-navigation-inner h4 {
          font-size: 1.25em; }
          .component.component--project-navigation .project-navigation-inner h4 .icon-arrow {
            display: block; }
        .component.component--project-navigation .project-navigation-inner .project-view.small a {
          display: block;
          transform: translateZ(0); }
        .component.component--project-navigation .project-navigation-inner .project-view.small:nth-child(1) {
          padding-right: 1em; }
        .component.component--project-navigation .project-navigation-inner .project-view.small:nth-child(2) {
          padding-left: 1em; } }
  .component.component--about {
    background-color: #0d0d0d; }
    .component.component--about .inner h2 {
      margin-bottom: 1.5em; }
    .component.component--about .inner h4 + p {
      margin-top: .3em; }
    .component.component--about .inner .wp-block-columns {
      font-size: .75em;
      line-height: 1.75em;
      padding: 0px  1em;
      -webkit-transform: translate3d(0, 0, 0); }
      .component.component--about .inner .wp-block-columns .wp-block-column {
        margin-bottom: 2em;
        width: calc((100% / 6 ) * 5);
        margin-left: .5em;
        flex: unset;
        flex-basis: unset; }
        .component.component--about .inner .wp-block-columns .wp-block-column:nth-child(2) {
          margin-left: auto; }
        .component.component--about .inner .wp-block-columns .wp-block-column:nth-child(3) {
          margin-left: auto;
          width: calc((100% / 6 ) * 4); }
    @media screen and (min-width: 37.5em) {
      .component.component--about .inner .wp-block-columns .wp-block-column {
        max-width: 50%; }
        .component.component--about .inner .wp-block-columns .wp-block-column:nth-child(2) {
          margin-left: auto;
          margin-right: auto; } }
    @media screen and (min-width: 50em) {
      .component.component--about .inner h2 {
        margin-bottom: 2em; }
      .component.component--about .inner .wp-block-columns {
        display: flex;
        justify-content: space-between;
        font-size: 1em;
        width: 80%;
        max-width: 1376px;
        margin-left: auto;
        margin-right: auto; }
        .component.component--about .inner .wp-block-columns .wp-block-column {
          width: 31% !important;
          padding: 0px 15px;
          box-sizing: border-box;
          margin-left: 0px; }
          .component.component--about .inner .wp-block-columns .wp-block-column:nth-child(2) h4 {
            margin-top: 6.8em; }
          .component.component--about .inner .wp-block-columns .wp-block-column:nth-child(3) {
            margin-top: 13.6em; } }

.cc-window {
  width: calc(100%);
  position: fixed;
  bottom: 0vh;
  z-index: 2000;
  padding: 1rem 1rem 1rem;
  box-sizing: border-box;
  left: 50%;
  transform: translateX(-50%);
  color: #000;
  letter-spacing: .5px;
  height: auto;
  font-weight: 500; }
  .cc-window.cc-invisible {
    display: none; }
  .cc-window .cc-message {
    flex-grow: 1;
    display: block;
    margin-bottom: 1rem; }
    .cc-window .cc-message a {
      float: right; }
  .cc-window .cc-compliance {
    display: flex;
    justify-content: space-between; }
  .cc-window a {
    color: inherit;
    cursor: pointer;
    color: #000;
    font-size: .85rem;
    padding: 10px 20px;
    background-color: #e0e0e0;
    box-sizing: border-box;
    opacity: 1;
    width: calc(50% - .5rem);
    text-align: center;
    margin-left: 0px; }
    .cc-window a:hover {
      background-color: #fff; }
  .cc-window::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    background-color: #f0f0f0;
    z-index: -1; }
  @media screen and (min-width: 68em) {
    .cc-window {
      padding: 1rem 4rem;
      width: 80%;
      max-width: 1376px;
      margin-left: auto;
      margin-right: auto;
      display: flex;
      justify-content: center;
      align-content: center;
      align-items: center; }
      .cc-window a {
        width: 180px;
        margin-left: 1rem; }
      .cc-window .cc-message {
        margin-bottom: 0px; } }

@keyframes play-x {
  100% {
    background-position-x: -1000px; } }

@keyframes play-x2 {
  100% {
    background-position-x: -1000%; } }

@keyframes play-y2 {
  100% {
    background-position-y: -500px; } }

@keyframes play-y3 {
  100% {
    background-position-y: -500%; } }

.component--preloader {
  position: absolute;
  background-color: #fff;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  z-index: 200; }
  .component--preloader .pre-svg {
    display: none; }
    .component--preloader .pre-svg svg {
      overflow: visible;
      width: 48px;
      height: 48px; }
  .component--preloader.inactive {
    pointer-events: none; }
  .component--preloader .preload-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 375px;
    max-width: 75%; }
  .component--preloader .preload-mask {
    display: block; }
    .component--preloader .preload-mask .p-sprite {
      -webkit-clip-path: url("#preloader-clip-path2");
      clip-path: url("#preloader-clip-path2"); }
  .component--preloader .preload-clip {
    width: 100%;
    padding-top: 100%;
    background-color: #141414;
    background-image: url("./assets/images/test_bg_preloader_big.jpg");
    animation: play-x2 1s steps(10) infinite, play-y3 5s steps(5) infinite;
    background-size: 1000%; }
  .component--preloader .preload-text {
    margin-top: 3em;
    display: none;
    max-width: 500px;
    text-align: center; }
    .component--preloader .preload-text h1 {
      font-size: 1.25em;
      font-weight: bold;
      color: #141414; }
  .component--preloader .preload-bar {
    position: relative;
    width: 50%;
    margin: 2rem auto 0px;
    height: 4px;
    background-color: rgba(0, 0, 0, 0.1); }
    .component--preloader .preload-bar .bar {
      position: relative;
      background-color: #141414;
      width: 100%;
      display: block;
      height: 100%; }
  @media screen and (min-width: 50em) {
    .component--preloader {
      height: 100vh; } }

@keyframes part-active {
  0% {
    opacity: 0;
    top: -3em; }
  15% {
    opacity: 1; }
  50% {
    opacity: 1; }
  85% { }
  100% {
    opacity: 0; } }

.video-container {
  position: relative;
  width: 100%; }
  .video-container.video-playing .video-holder .video-wrap .overlay .fill {
    opacity: 0; }
  .video-container.video-playing .icon-play {
    opacity: 0; }
  .video-container .video-holder {
    width: 100%;
    height: 100%;
    margin: 0px auto;
    transition: margin-bottom .25s ease-in-out; }
    .video-container .video-holder.fullscreen {
      display: flex;
      align-items: center;
      background-color: #141414; }
      .video-container .video-holder.fullscreen .video-wrap {
        width: 100%; }
      .video-container .video-holder.fullscreen .overlay {
        opacity: 0; }
        .video-container .video-holder.fullscreen .overlay:hover {
          opacity: 1; }
    .video-container .video-holder .video-wrap {
      position: relative;
      padding-top: 80%;
      margin: 0px auto; }
      .video-container .video-holder .video-wrap .sr-timeline {
        position: absolute;
        width: 100%;
        height: 50px;
        background-color: hotpink;
        display: flex;
        justify-content: flex-start;
        padding: 4px;
        box-sizing: border-box; }
        .video-container .video-holder .video-wrap .sr-timeline .sr-chunk {
          position: relative;
          width: 50%;
          box-sizing: border-box; }
          .video-container .video-holder .video-wrap .sr-timeline .sr-chunk:not(:last-child) {
            margin-right: 4px; }
          .video-container .video-holder .video-wrap .sr-timeline .sr-chunk .progress {
            background-color: #000;
            position: absolute;
            width: 0%;
            height: 100%; }
      .video-container .video-holder .video-wrap .overlay {
        position: absolute;
        top: 0px;
        left: 0px;
        bottom: 0px;
        right: 0px;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 10;
        -webkit-backface-visibility: hidden;
        -webkit-transform: translateZ(0) scale(1, 1);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        z-index: 15; }
        .video-container .video-holder .video-wrap .overlay .icon-play {
          position: relative;
          width: 30px;
          height: 30px;
          z-index: 5;
          pointer-events: none; }
          .video-container .video-holder .video-wrap .overlay .icon-play svg {
            width: 100%;
            height: auto;
            overflow: visible; }
            .video-container .video-holder .video-wrap .overlay .icon-play svg #pico {
              transition: stroke-width 0.3s cubic-bezier(0.2, 0, 0.4, 1); }
        .video-container .video-holder .video-wrap .overlay:hover .progress {
          opacity: 1;
          top: -5px;
          height: 10px; }
        .video-container .video-holder .video-wrap .overlay:hover .video-controls .functions {
          opacity: 1; }
        .video-container .video-holder .video-wrap .overlay:hover .fill {
          opacity: 0; }
        .video-container .video-holder .video-wrap .overlay:hover .icon-play svg #pico {
          stroke-width: 6px;
          fill: none; }
        .video-container .video-holder .video-wrap .overlay .video-controls {
          position: absolute;
          bottom: -60px;
          left: 0px;
          width: 100%;
          height: 60px;
          background-color: #000;
          z-index: 10; }
          .video-container .video-holder .video-wrap .overlay .video-controls .timecode {
            position: absolute;
            text-align: right;
            left: 0px;
            font-family: monospace;
            font-size: 1.2em;
            display: none; }
          .video-container .video-holder .video-wrap .overlay .video-controls .functions {
            opacity: .5;
            display: flex;
            align-items: center;
            height: 100%;
            padding: .5em 1em;
            box-sizing: border-box;
            height: 30px; }
            .video-container .video-holder .video-wrap .overlay .video-controls .functions .spacer {
              flex-grow: 1; }
            .video-container .video-holder .video-wrap .overlay .video-controls .functions .icon {
              cursor: pointer;
              overflow: visible;
              height: 16px; }
              .video-container .video-holder .video-wrap .overlay .video-controls .functions .icon.play {
                width: 25px; }
              .video-container .video-holder .video-wrap .overlay .video-controls .functions .icon.fscreen {
                width: 27px; }
              .video-container .video-holder .video-wrap .overlay .video-controls .functions .icon.volume {
                margin-right: 3em;
                width: 57px; }
              .video-container .video-holder .video-wrap .overlay .video-controls .functions .icon svg {
                overflow: visible;
                width: 100%;
                height: 100%; }
        .video-container .video-holder .video-wrap .overlay .progress {
          transition: all .25s ease-in-out;
          position: absolute;
          top: -1px;
          height: 3px;
          width: 100%;
          cursor: pointer;
          opacity: .25; }
          .video-container .video-holder .video-wrap .overlay .progress .progress__loaded {
            position: absolute;
            height: 100%;
            width: 0%;
            background-color: #fff;
            opacity: .4;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.2, 0, 0.4, 1); }
          .video-container .video-holder .video-wrap .overlay .progress .progress__position {
            pointer-events: none;
            position: absolute;
            height: 100%;
            width: 0%;
            z-index: 20;
            background-color: #fff; }
        .video-container .video-holder .video-wrap .overlay .fill {
          cursor: pointer;
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0px;
          left: 0px;
          background-color: #000;
          opacity: 0;
          transition: all .2s ease-out; }
      .video-container .video-holder .video-wrap .video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-position: center; }
        .video-container .video-holder .video-wrap .video .parallax-poster {
          position: absolute;
          width: 100%;
          height: 100%;
          overflow: hidden; }
          .video-container .video-holder .video-wrap .video .parallax-poster .gradient {
            --g-offset:50%;
            opacity: 1;
            background: -webkit-linear-gradient(top, rgba(var(--g-color), 0) 0%, rgba(var(--g-color), 0) var(--g-offset), rgba(var(--g-color), 1) 100%); }
          .video-container .video-holder .video-wrap .video .parallax-poster > div {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: bottom;
            -webkit-transform: translate3d(0, 0, 0); }
            .video-container .video-holder .video-wrap .video .parallax-poster > div:nth-child(1) {
              z-index: 10; }
            .video-container .video-holder .video-wrap .video .parallax-poster > div:nth-child(2) {
              z-index: 9; }
            .video-container .video-holder .video-wrap .video .parallax-poster > div:nth-child(3) {
              z-index: 8; }
            .video-container .video-holder .video-wrap .video .parallax-poster > div:nth-child(4) {
              z-index: 7; }
            .video-container .video-holder .video-wrap .video .parallax-poster > div:nth-child(5) {
              z-index: 6; }
        .video-container .video-holder .video-wrap .video video {
          -webkit-transform: translate3d(0, 0, 0);
          height: 100%; }
  .video-container.gp.video-active {
    padding-bottom: 30px; }
  .video-container.gp .video-wrap {
    padding-top: 42.45%; }
    .video-container.gp .video-wrap .video video {
      width: 100%;
      max-height: 100%; }
  .video-container.gp.aspect-16_9 .video-holder {
    max-height: 1080px; }
    .video-container.gp.aspect-16_9 .video-holder .video-wrap {
      padding-top: 56.25%; }
  .video-container.gp.is-showreel .video-wrap {
    padding-top: 80%; }
    .video-container.gp.is-showreel .video-wrap .video .parallax-poster > div {
      background-size: cover;
      background-position: bottom; }
    .video-container.gp.is-showreel .video-wrap .video video {
      width: unset;
      height: 100%; }
  @media screen and (min-width: 37.5em) {
    .video-container.gp.is-showreel .video-wrap {
      padding-top: 42.45%; }
      .video-container.gp.is-showreel .video-wrap .video video {
        width: 100%;
        max-height: 100%; }
      .video-container.gp.is-showreel .video-wrap .video .parallax-poster > div {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: bottom; }
        .video-container.gp.is-showreel .video-wrap .video .parallax-poster > div:nth-child(1) {
          z-index: 10; }
        .video-container.gp.is-showreel .video-wrap .video .parallax-poster > div:nth-child(2) {
          z-index: 9; }
        .video-container.gp.is-showreel .video-wrap .video .parallax-poster > div:nth-child(3) {
          z-index: 8; }
        .video-container.gp.is-showreel .video-wrap .video .parallax-poster > div:nth-child(4) {
          z-index: 7; }
        .video-container.gp.is-showreel .video-wrap .video .parallax-poster > div:nth-child(5) {
          z-index: 6; } }
  @media screen and (min-width: 50em) {
    .video-container.gp.video-active {
      padding-bottom: 46px; }
    .video-container.gp.is-showreel .video-wrap .video .parallax-poster > div {
      background-size: contain; }
    .video-container.gp .video-wrap {
      padding-top: 42.45%; }
      .video-container.gp .video-wrap .video video {
        width: 100%;
        max-height: 100%; }
      .video-container.gp .video-wrap .video .parallax-poster > div {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: bottom; }
        .video-container.gp .video-wrap .video .parallax-poster > div:nth-child(1) {
          z-index: 10; }
        .video-container.gp .video-wrap .video .parallax-poster > div:nth-child(2) {
          z-index: 9; }
        .video-container.gp .video-wrap .video .parallax-poster > div:nth-child(3) {
          z-index: 8; }
        .video-container.gp .video-wrap .video .parallax-poster > div:nth-child(4) {
          z-index: 7; }
        .video-container.gp .video-wrap .video .parallax-poster > div:nth-child(5) {
          z-index: 6; }
    .video-container.gp.aspect-16_9 .video-holder {
      max-height: 1080px; }
      .video-container.gp.aspect-16_9 .video-holder .video-wrap {
        padding-top: 56.25%; }
    .video-container.gp.aspect-21_9 .video-wrap {
      padding-top: 42.85%; } }
  .video-container.gp.solo .sr-info {
    display: none; }
  .video-container.gp.solo .video-holder .video-wrap .overlay .video-controls .progress {
    display: block; }
  .video-container.gp.solo .video-holder .video-wrap .overlay:hover .functions {
    margin-top: 10px;
    opacity: 1; }
  .video-container.gp .video-holder .video-wrap .overlay .video-controls {
    top: 100%;
    bottom: unset;
    height: auto; }
    .video-container.gp .video-holder .video-wrap .overlay .video-controls .functions {
      height: 30px;
      transition: all .25s ease-in-out; }
      .video-container.gp .video-holder .video-wrap .overlay .video-controls .functions .icon {
        height: 15px; }
        .video-container.gp .video-holder .video-wrap .overlay .video-controls .functions .icon.volume {
          margin-right: .5em;
          width: 57px; }
        .video-container.gp .video-holder .video-wrap .overlay .video-controls .functions .icon svg {
          display: block; }
      @media screen and (min-width: 50em) {
        .video-container.gp .video-holder .video-wrap .overlay .video-controls .functions {
          height: 40px; }
          .video-container.gp .video-holder .video-wrap .overlay .video-controls .functions .icon {
            height: 20px; }
            .video-container.gp .video-holder .video-wrap .overlay .video-controls .functions .icon.volume {
              margin-right: 3em;
              width: 57px; } }
    .video-container.gp .video-holder .video-wrap .overlay .video-controls .progress {
      display: none; }
  .video-container.gp .video-holder .video-wrap .overlay:hover .progress {
    opacity: 1;
    top: -5px;
    height: 10px; }
  .video-container.gp .video-holder .video-wrap .overlay:hover .video-controls .functions {
    opacity: 1; }
  .video-container.gp .video-holder .video-wrap .overlay:hover .fill {
    opacity: 0; }
  .video-container.gp .video-holder .video-wrap .overlay:hover .sr-info article {
    margin-top: 60px; }
  .video-container.gp .video-holder .video-wrap .overlay:hover .sr-parts {
    height: 50px; }
    .video-container.gp .video-holder .video-wrap .overlay:hover .sr-parts .sr-parts__part .inner {
      opacity: 1; }
      .video-container.gp .video-holder .video-wrap .overlay:hover .sr-parts .sr-parts__part .inner .headline {
        top: 0px; }
    .video-container.gp .video-holder .video-wrap .overlay:hover .sr-parts .sr-parts__buffered {
      height: 4px;
      bottom: 0px;
      opacity: .4; }
  .video-container.gp .sr-info {
    background-color: #141414;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    overflow: hidden; }
    .video-container.gp .sr-info:hover .inner {
      opacity: 1; }
    .video-container.gp .sr-info .article-ph {
      position: relative;
      z-index: 10;
      width: 100%;
      pointer-events: none;
      opacity: 1;
      transition: opacity .25s ease-out;
      background: -webkit-linear-gradient(top, #141414 0%, rgba(20, 20, 20, 0) 100px, rgba(20, 20, 20, 0) calc(100% - 100px), #141414 100%); }
    .video-container.gp .sr-info.project-active .article-ph {
      opacity: 0; }
    .video-container.gp .sr-info .project-small {
      width: 100%;
      position: absolute; }
      .video-container.gp .sr-info .project-small .page-project {
        padding-top: 0px; }
    .video-container.gp .sr-info .inner {
      width: 80%;
      max-width: 1376px;
      margin-left: auto;
      margin-right: auto;
      transition: all 0.35s cubic-bezier(0.45, 0.07, 0.5, 0.97);
      box-sizing: border-box;
      position: absolute;
      top: 0px;
      opacity: .5; }
      .video-container.gp .sr-info .inner article {
        padding: 5em 1em 3em;
        display: flex;
        align-items: flex-start;
        position: relative;
        height: auto; }
        .video-container.gp .sr-info .inner article .extra {
          font-size: 1.2em;
          margin-left: 3em; }
          .video-container.gp .sr-info .inner article .extra p {
            line-height: 1.7em;
            font-size: 0.75em;
            margin-top: 0px; }
            .video-container.gp .sr-info .inner article .extra p span {
              opacity: .5; }
        .video-container.gp .sr-info .inner article .content {
          font-size: 1.2em;
          margin-left: 3em;
          width: 37.5%; }
          .video-container.gp .sr-info .inner article .content h3 {
            margin: 0px;
            font-size: 1.5em; }
          .video-container.gp .sr-info .inner article .content p {
            line-height: 1.7em;
            font-size: 0.75em;
            overflow: hidden;
            margin: 1.7em 0px; }
          .video-container.gp .sr-info .inner article .content a {
            font-size: 0.75em;
            font-weight: bold; }
        .video-container.gp .sr-info .inner article figure {
          position: relative;
          padding: 0px;
          margin: 0px;
          background-size: cover;
          background-position: center; }
          .video-container.gp .sr-info .inner article figure.poster {
            width: 130px; }
            .video-container.gp .sr-info .inner article figure.poster img {
              position: relative;
              height: 100%;
              width: 100%; }
  .video-container.gp .sr-parts {
    position: relative;
    width: 100%;
    bottom: 0px;
    display: flex;
    justify-content: flex-start;
    padding: 0px;
    box-sizing: border-box;
    margin: 0px;
    height: 0px;
    margin-bottom: 4px;
    z-index: 50;
    transition: all 0.25s cubic-bezier(0.45, 0.07, 0.5, 0.97); }
    .video-container.gp .sr-parts__bar {
      position: absolute;
      background-color: #000;
      height: 4px;
      width: 100%;
      bottom: -4px;
      z-index: 20;
      display: none; }
    .video-container.gp .sr-parts__playhead {
      position: absolute;
      left: 0px;
      height: 100%;
      background-color: #fff; }
    .video-container.gp .sr-parts__buffered {
      position: absolute;
      width: 0%;
      height: 100%;
      left: 0px;
      background-color: #fff;
      opacity: .25;
      transition: all 0.15s cubic-bezier(0.45, 0.07, 0.5, 0.97); }
    .video-container.gp .sr-parts__part {
      overflow: visible;
      cursor: pointer;
      position: relative;
      width: 50%;
      height: 100%;
      box-sizing: border-box;
      z-index: 22;
      transition: all 0.45s cubic-bezier(0.6, 0, 0.4, 1);
      --part-color:#000; }
      .video-container.gp .sr-parts__part:not(:last-of-type):after {
        content: "";
        position: absolute;
        height: calc(100% + 4px);
        width: 3px;
        right: 0px;
        top: 0px;
        z-index: 2;
        background-color: #141414; }
      .video-container.gp .sr-parts__part[pp="end"]:after {
        display: none; }
      .video-container.gp .sr-parts__part[rpos="-1"] .part__progress, .video-container.gp .sr-parts__part[rpos="1"] .part__progress {
        opacity: .08; }
      .video-container.gp .sr-parts__part[rpos="0"] .part__progress {
        opacity: .16; }
      .video-container.gp .sr-parts__part .inner {
        position: absolute;
        z-index: 10;
        opacity: 0;
        width: 100%;
        height: 100%;
        overflow: hidden; }
        .video-container.gp .sr-parts__part .inner .headline {
          pointer-events: none;
          position: absolute;
          font-size: .875em;
          margin: 0px;
          padding: 16px 16px;
          opacity: 0;
          top: -3em;
          white-space: nowrap;
          transition: all 0.35s cubic-bezier(0.6, 0, 0.4, 1); }
      .video-container.gp .sr-parts__part .part__loaded {
        position: absolute;
        height: 100%;
        width: 100%;
        left: 0px;
        height: 4px;
        bottom: -4px;
        width: 0px;
        opacity: .5;
        transition: width .35s ease-out;
        background-color: #fff; }
      .video-container.gp .sr-parts__part .part__playhead--small {
        position: absolute;
        height: 100%;
        width: 0%;
        left: 0px;
        height: 4px;
        bottom: -4px;
        z-index: 1;
        background-color: #fff; }
      .video-container.gp .sr-parts__part .part__progress {
        position: absolute;
        height: 100%;
        width: 100%;
        left: 0px;
        background-color: #fff;
        opacity: .01;
        transition: background-color .25s ease-in-out;
        transform: translate3d(0, 0, 0); }
      .video-container.gp .sr-parts__part .part__playhead {
        position: absolute;
        height: calc(100%);
        width: 0px;
        left: 0px;
        opacity: 0;
        transform-origin: 2px;
        mix-blend-mode: overlay;
        background-color: var(--part-color);
        z-index: 2; }
      .video-container.gp .sr-parts__part.active .part__playhead {
        opacity: .35; }
      .video-container.gp .sr-parts__part.active .inner {
        opacity: 1; }
      .video-container.gp .sr-parts__part:hover {
        background-color: var(--project-color); }
        .video-container.gp .sr-parts__part:hover .playhead {
          mix-blend-mode: normal; }
        .video-container.gp .sr-parts__part:hover .inner .headline {
          opacity: 1;
          top: 0px;
          animation: unset; }
        .video-container.gp .sr-parts__part:hover .part__progress {
          opacity: .1; }
      .video-container.gp .sr-parts__part .progress {
        background-color: #000;
        position: absolute;
        width: 100%;
        height: 100%; }
    .video-container.gp .sr-parts ul {
      list-style: none;
      height: 100%; }
      .video-container.gp .sr-parts ul li {
        position: relative;
        width: 50%;
        box-sizing: border-box;
        background-color: #fff; }
        .video-container.gp .sr-parts ul li .progress {
          background-color: #000;
          position: absolute;
          width: 100%;
          height: 100%; }
  @media screen and (min-width: 50em) {
    .video-container.video-active .video-holder:hover + .sr-info .inner {
      transform: translateY(30px); }
    .video-container .video-holder .video-wrap .overlay .icon-play {
      width: 50px;
      height: 50px; }
    .video-container .video-holder .video-wrap .overlay:hover .video-controls .progress {
      top: -7px;
      height: 14px; }
    .video-container .video-holder .video-wrap .overlay .video-controls .functions {
      width: 80%;
      max-width: 1376px;
      margin-left: auto;
      margin-right: auto; }
    .video-container .video-keywords {
      width: 80%;
      max-width: 1376px;
      margin-left: auto;
      margin-right: auto;
      padding: 0px 16px;
      font-size: 1em; }
      .video-container .video-keywords ul {
        padding: 40px 0px; }
        .video-container .video-keywords ul li {
          font-size: 1em; } }

.project-view {
  width: 50%;
  box-sizing: border-box;
  margin-bottom: 1.5em; }
  .project-view.tiny {
    margin-bottom: 0px; }
  .project-view.next h4 {
    text-align: right;
    justify-content: flex-end; }
  .project-view.prev h4 {
    margin-left: 0px;
    padding: 0px; }
    .project-view.prev h4 .pname {
      order: 1; }
    .project-view.prev h4 .icon-arrow {
      margin-left: unset;
      margin-right: 0px; }
      .project-view.prev h4 .icon-arrow svg {
        transform: scaleX(-1); }
  .project-view a {
    opacity: 1; }
  .project-view .image {
    padding-top: 42.5%;
    background-position: center;
    background-size: cover;
    position: relative; }
    .project-view .image .overlay {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      background-color: #000;
      opacity: .3;
      transition: all .2s ease-out;
      z-index: 9; }
    .project-view .image video {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%; }
    .project-view .image.hide {
      visibility: hidden; }
      .project-view .image.hide video {
        display: none;
        visibility: hidden; }
  .project-view:hover .image .overlay {
    opacity: 0; }
  .project-view:hover video {
    visibility: visible; }
  .project-view:hover h4 {
    opacity: 1; }
  .project-view h4 {
    display: flex;
    justify-content: flex-start;
    box-sizing: border-box;
    margin: 1em 0px 1.5em;
    align-items: center;
    font-size: 0.9em;
    transition: opacity .35s ease-out; }
    .project-view h4 .icon-arrow {
      margin-left: 0px; }
      .project-view h4 .icon-arrow svg {
        width: 22px; }
  .project-view.mobile.prev h4, .project-view.mobile.next h4 {
    align-items: center; }
    .project-view.mobile.prev h4 .icon-arrow svg .arrow, .project-view.mobile.next h4 .icon-arrow svg .arrow {
      transform: translate(-10px, -2px); }
    .project-view.mobile.prev h4 .icon-arrow svg polygon.arrow-head.a, .project-view.mobile.next h4 .icon-arrow svg polygon.arrow-head.a {
      stroke-width: 1px !important; }
  .project-view.mobile.prev .image video, .project-view.mobile.next .image video {
    visibility: visible; }
  @media screen and (min-width: 50em) {
    .project-view {
      margin-bottom: 45px; }
      .project-view h4 {
        display: flex;
        width: 80%;
        box-sizing: border-box;
        margin: 30px 0px 0px auto;
        align-items: center;
        font-size: 1.25em;
        justify-content: flex-start;
        opacity: .8; }
        .project-view h4 .icon-arrow {
          margin-left: 10px; }
          .project-view h4 .icon-arrow svg {
            width: unset; }
      .project-view.next h4 {
        margin: 30px auto 0px 0px; }
      .project-view.prev h4 {
        margin: 30px 0px 0px auto; }
        .project-view.prev h4 .icon-arrow {
          margin-right: 10px; } }

@media screen and (min-width: 50em) {
  .wp-block-columns {
    display: flex; }
    .wp-block-columns .wp-block-column {
      flex-basis: 0;
      flex-grow: 1; }
      .wp-block-columns .wp-block-column:not(:first-child) {
        margin-left: 2em; } }

@media screen and (min-width: 50em) {
  .wp-block-columns .wp-block-column.contacts {
    display: flex;
    flex-wrap: wrap; }
    .wp-block-columns .wp-block-column.contacts h4 {
      width: 100%;
      margin-bottom: 0px; }
    .wp-block-columns .wp-block-column.contacts .contacts__contact {
      width: calc(50% - .5rem);
      padding-right: 1rem;
      box-sizing: border-box; } }

@media screen and (min-width: 50em) {
  .wp-block-columns .wp-block-column.locations {
    flex-basis: 33.3%; }
  .wp-block-columns .wp-block-column.contacts {
    flex-basis: 66.6%; } }

html {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  font-size: 15px;
  font-size: 1rem;
  --padding-mobile:1em; }

body {
  font-family: "Libre Franklin", sans-serif;
  line-height: 1.7em;
  color: #fff;
  overflow-y: scroll;
  overflow-x: hidden;
  background-color: #141414;
  -webkit-overflow-scrolling: touch;
  touch-action: manipulation; }

ul {
  list-style-type: square;
  line-height: 1.75em;
  letter-spacing: 1px;
  padding-left: 1rem; }
  ul li {
    margin-bottom: 1rem; }

a {
  color: #fff;
  opacity: .5;
  text-decoration: none; }
  a::-moz-focus-inner {
    border: 0; }
  a:visited {
    color: #fff; }
  a:hover {
    opacity: 1; }

:focus {
  outline: none; }

::-moz-focus-inner {
  border: 0; }

h1 {
  font-size: 3em; }

h2 {
  font-size: 2em; }

h3 {
  font-size: 1.7em; }

h4 {
  font-size: 1.2em;
  line-height: 1.7em; }

h5 {
  font-size: 1em;
  font-size: 1.7em; }

h1, h2, h3, h4, h5 {
  line-height: 1.25em; }

p {
  font-size: 1em;
  line-height: 1.75em;
  color: #bfbfbf;
  letter-spacing: 1px; }

@media screen and (min-width: 50em) {
  h1 {
    font-size: 5em; }
  h2 {
    font-size: 4em; }
  h3 {
    font-size: 3em; }
  h4 {
    font-size: 2em;
    line-height: 1.7em; }
  h5 {
    font-size: 1.7em; }
  h1, h2, h3, h4, h5 {
    line-height: 1.25em; }
  p {
    font-size: 1em;
    color: #bfbfbf;
    letter-spacing: 1px; } }

blockquote {
  font-size: 1.6em;
  font-style: italic; }

.debug {
  position: fixed;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  opacity: .1;
  z-index: 999;
  pointer-events: none;
  display: none; }
  .debug__grid {
    width: 100%;
    max-width: 1720px;
    margin-left: auto;
    margin-right: auto;
    height: 100%;
    display: flex; }
    .debug__grid div {
      display: inline-block;
      height: 100%;
      width: 10%;
      background-color: #000099; }
      .debug__grid div:after {
        content: "";
        width: 1em;
        height: 100%;
        background-color: #f00;
        display: block;
        left: 0px; }
      .debug__grid div:before {
        content: "";
        width: 1em;
        height: 100%;
        background-color: #0ff;
        display: block;
        float: right;
        right: 0px; }
      .debug__grid div:nth-child(even) {
        background-color: #ff0000; }

.ghost {
  height: 1px;
  min-height: 100vh;
  position: relative; }
  .ghost.preloading {
    background-color: #fff;
    max-height: 100vh;
    overflow: hidden; }
  .ghost-wrapper {
    height: unset;
    min-height: 100%; }
    .ghost-wrapper.transitioning {
      pointer-events: none;
      touch-action: none; }

header {
  padding: 1em 0px;
  box-sizing: border-box;
  position: fixed;
  top: 0px;
  width: 100%;
  z-index: 550;
  pointer-events: none; }
  body .ghost.preloading header {
    visibility: hidden; }
  header nav {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 30px;
    padding: 0px 1em;
    box-sizing: border-box;
    transition: all 0.5s cubic-bezier(0.6, 0, 0.4, 1); }
    header nav .logo-wrap {
      opacity: 1;
      pointer-events: all; }
      header nav .logo-wrap .logo {
        height: 30px;
        width: auto;
        position: relative;
        display: block; }
        header nav .logo-wrap .logo svg {
          overflow: visible;
          height: 100%;
          width: auto;
          display: block; }
          header nav .logo-wrap .logo svg .logo-letters, header nav .logo-wrap .logo svg .logo-ghost-big-text {
            visibility: hidden; }
          header nav .logo-wrap .logo svg .logo-letters-footer {
            visibility: hidden; }
    header nav.in_content {
      width: 100%;
      max-width: 1720px;
      margin-left: auto;
      margin-right: auto; }
    header nav .navigation-icons {
      pointer-events: all;
      list-style: none;
      right: 0px;
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 0px;
      margin: 0px; }
      header nav .navigation-icons li {
        margin-bottom: 0px;
        display: inline-block; }
        header nav .navigation-icons li a {
          cursor: pointer;
          opacity: 1; }
        header nav .navigation-icons li:not(:first-child) {
          margin-left: 1.25em; }
        header nav .navigation-icons li .nav-icon {
          width: 34px;
          height: 16px;
          cursor: pointer; }
        header nav .navigation-icons li svg {
          position: relative;
          overflow: visible;
          display: block;
          z-index: 2; }
        header nav .navigation-icons li.icon {
          position: relative;
          transition: transform 0.15s cubic-bezier(0.2, 0, 0.4, 1); }
          header nav .navigation-icons li.icon.icon-contact .all polygon:not(:first-child) {
            pointer-events: none; }
          header nav .navigation-icons li.icon.icon-projects .subs {
            pointer-events: none; }
          header nav .navigation-icons li.icon:hover {
            transform-origin: center;
            transform: scale(1.1); }
          header nav .navigation-icons li.icon.icon-showreel {
            transition: transform 0.15s cubic-bezier(0.2, 0, 0.4, 1); }
            header nav .navigation-icons li.icon.icon-showreel:hover {
              transform-origin: center;
              transform: scale(1.5); }
              header nav .navigation-icons li.icon.icon-showreel:hover foreignObject div {
                opacity: 1; }
              header nav .navigation-icons li.icon.icon-showreel:hover svg .picon {
                opacity: 1; }
            header nav .navigation-icons li.icon.icon-showreel .picon {
              opacity: 0;
              transform-origin: center;
              transition: all 0.25s cubic-bezier(0.2, 0, 0.4, 1); }
            header nav .navigation-icons li.icon.icon-showreel foreignObject div {
              opacity: 0;
              width: 100%;
              height: 100%;
              background-image: url("./assets/images/sr_sheet.jpg");
              background-size: calc(100% * 17) calc(100% * 13);
              animation: sr-icon-play-x 1.5s steps(17) infinite, sr-icon-play-y 19.5s steps(13) infinite; }

@keyframes sr-icon-play-x {
  100% {
    background-position-x: calc(-100% * 17); } }

@keyframes sr-icon-play-y {
  100% {
    background-position-y: calc(-100% * 13); } }
  @media screen and (min-width: 50em) {
    header {
      padding: 30px 0px; }
      header nav {
        width: 80%;
        max-width: 1376px;
        margin-left: auto;
        margin-right: auto;
        height: 50px;
        padding: 0px calc(30px / 2); }
        header nav .logo-wrap .logo {
          height: 50px; }
          header nav .logo-wrap .logo svg {
            overflow: visible; }
        header nav .navigation-icons li:not(:first-child) {
          margin-left: .5em; }
        header nav .navigation-icons li .nav-icon {
          width: 59px;
          height: 20px; } }

.main-section {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 450;
  background-color: #141414;
  min-height: calc(100vh); }
  .main-section .content {
    position: relative;
    --a-speed:1s;
    --a-ease:$a-ease-expo-in-out; }
    .main-section .content .content__wipe {
      pointer-events: none;
      background-color: transparent;
      display: none;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      z-index: 25;
      opacity: 1; }
      .main-section .content .content__wipe .box {
        position: absolute;
        width: 100%;
        height: 100%; }

@keyframes content-anim-out {
  0% {
    opacity: 1; }
  50% {
    opacity: 1; }
  60% { }
  100% {
    opacity: 0; } }

@keyframes content-anim-out-new {
  0% {
    opacity: 1;
    transform: translateY(0); }
  50% { }
  60% { }
  100% {
    opacity: 0; } }

@keyframes content-anim {
  0% {
    opacity: 0; }
  30% {
    opacity: 0; }
  40% {
    opacity: 0; }
  80% { }
  100% {
    opacity: 1; } }

@keyframes content-anim-new {
  0% { }
  30% { }
  40% { }
  80% { }
  100% { } }

@keyframes mask-anim-new {
  0% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); }
  100% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100vh, 0 100vh);
    clip-path: polygon(0 0, 100% 0, 100% 100vh, 0 100vh); } }

@keyframes mask-anim {
  0% {
    -webkit-clip-path: polygon(var(--mx) calc(var(--my) + var(--mh)), calc(var(--mx) + var(--mw)) calc(var(--my) + var(--mh)), calc(var(--mx) + var(--mw)) calc(var(--my) + var(--mh)), var(--mx) calc(var(--my) + var(--mh)));
    clip-path: polygon(var(--mx) calc(var(--my) + var(--mh)), calc(var(--mx) + var(--mw)) calc(var(--my) + var(--mh)), calc(var(--mx) + var(--mw)) calc(var(--my) + var(--mh)), var(--mx) calc(var(--my) + var(--mh))); }
  40% {
    -webkit-clip-path: polygon(var(--mx) var(--my), calc(var(--mx) + var(--mw)) var(--my), calc(var(--mx) + var(--mw)) calc(var(--my) + var(--mh)), var(--mx) calc(var(--my) + var(--mh)));
    clip-path: polygon(var(--mx) var(--my), calc(var(--mx) + var(--mw)) var(--my), calc(var(--mx) + var(--mw)) calc(var(--my) + var(--mh)), var(--mx) calc(var(--my) + var(--mh))); }
  100% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100vh, 0 100vh);
    clip-path: polygon(0 0, 100% 0, 100% 100vh, 0 100vh); } }
    .main-section .content .content-wrapper {
      position: relative;
      order: 2;
      z-index: 10; }
      .main-section .content .content-wrapper .page {
        -webkit-transform: translate3d(0, 0, 0); }
      .main-section .content .content-wrapper::before {
        position: absolute;
        z-index: 200;
        background-color: hotpink;
        width: var(--mw);
        height: var(--mh);
        left: var(--mx);
        top: var(--my); }
      .main-section .content .content-wrapper.revealing {
        order: 1;
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        overflow: hidden;
        pointer-events: none; }
        .main-section .content .content-wrapper.revealing .page > *:nth-child(n+4) {
          visibility: hidden; }
      .main-section .content .content-wrapper.inactive {
        position: fixed; }
      .main-section .content .content-wrapper.active {
        order: 1;
        z-index: 20; }
  .main-section .page {
    position: relative;
    margin: 0px auto;
    padding-top: 62px;
    overflow: hidden; }
    .main-section .page.page-project {
      transition: opacity 0.25s cubic-bezier(0.2, 0, 0.4, 1);
      position: absolute;
      width: 100%; }
      .main-section .page.page-project.active {
        opacity: 1;
        position: relative; }
      .main-section .page.page-project.transitioning {
        position: absolute; }
        .main-section .page.page-project.transitioning > * {
          background-color: transparent; }
          .main-section .page.page-project.transitioning > *:not(:first-child) {
            display: none; }
    .main-section .page.page-projects .page-projects__content {
      opacity: 1;
      padding-top: 0em; }
    .main-section .page.page-privacy-policy .page__content {
      padding: 0px 1rem;
      box-sizing: border-box;
      font-size: 12px; }
      @media screen and (min-width: 50em) {
        .main-section .page.page-privacy-policy .page__content {
          font-size: 1rem;
          width: 80%;
          max-width: 1376px;
          margin-left: auto;
          margin-right: auto; }
          .main-section .page.page-privacy-policy .page__content p, .main-section .page.page-privacy-policy .page__content ul {
            max-width: 600px; }
          .main-section .page.page-privacy-policy .page__content h2, .main-section .page.page-privacy-policy .page__content h3, .main-section .page.page-privacy-policy .page__content h4, .main-section .page.page-privacy-policy .page__content h5 {
            max-width: 600px; } }
    .main-section .page.page-contact-us .page__content, .main-section .page.page-error-page .page__content {
      font-size: .875em;
      padding: 0px 1rem;
      box-sizing: border-box;
      font-size: 12px; }
      .main-section .page.page-contact-us .page__content .contacts > h4:first-child, .main-section .page.page-contact-us .page__content .locations > h4:first-child, .main-section .page.page-error-page .page__content .contacts > h4:first-child, .main-section .page.page-error-page .page__content .locations > h4:first-child {
        opacity: .75; }
      .main-section .page.page-contact-us .page__content .contacts h4, .main-section .page.page-contact-us .page__content .locations h4, .main-section .page.page-error-page .page__content .contacts h4, .main-section .page.page-error-page .page__content .locations h4 {
        font-size: 1rem;
        margin-top: 1.75rem;
        margin-bottom: .75rem; }
        @media screen and (min-width: 68em) {
          .main-section .page.page-contact-us .page__content .contacts h4, .main-section .page.page-contact-us .page__content .locations h4, .main-section .page.page-error-page .page__content .contacts h4, .main-section .page.page-error-page .page__content .locations h4 {
            font-size: 1.25rem;
            margin-top: 1.75rem;
            margin-bottom: .75rem; } }
      .main-section .page.page-contact-us .page__content .contacts p, .main-section .page.page-contact-us .page__content .locations p, .main-section .page.page-error-page .page__content .contacts p, .main-section .page.page-error-page .page__content .locations p {
        font-size: .75rem; }
        @media screen and (min-width: 68em) {
          .main-section .page.page-contact-us .page__content .contacts p, .main-section .page.page-contact-us .page__content .locations p, .main-section .page.page-error-page .page__content .contacts p, .main-section .page.page-error-page .page__content .locations p {
            font-size: 1rem; } }
      .main-section .page.page-contact-us .page__content .contacts h4, .main-section .page.page-error-page .page__content .contacts h4 {
        margin-bottom: 0px; }
      @media screen and (min-width: 50em) {
        .main-section .page.page-contact-us .page__content, .main-section .page.page-error-page .page__content {
          font-size: 16px;
          width: 80%;
          max-width: 1376px;
          margin-left: auto;
          margin-right: auto; } }
    .main-section .page.page-contact-us .contact-form, .main-section .page.page-error-page .contact-form {
      margin-top: 4rem;
      margin-bottom: 4rem;
      font-size: .75rem; }
      .main-section .page.page-contact-us .contact-form ul, .main-section .page.page-error-page .contact-form ul {
        list-style: none;
        padding: 0px;
        margin: 0px;
        width: 100%;
        max-width: 500px; }
        .main-section .page.page-contact-us .contact-form ul li, .main-section .page.page-error-page .contact-form ul li {
          display: flex;
          position: relative;
          margin-bottom: .5rem; }
          .main-section .page.page-contact-us .contact-form ul li:not(:last-child):after, .main-section .page.page-error-page .contact-form ul li:not(:last-child):after {
            content: "*";
            position: absolute;
            color: red;
            right: 2px;
            top: 0px; }
          .main-section .page.page-contact-us .contact-form ul li label, .main-section .page.page-contact-us .contact-form ul li .spacer, .main-section .page.page-error-page .contact-form ul li label, .main-section .page.page-error-page .contact-form ul li .spacer {
            margin-top: .25rem;
            width: 25%;
            text-align: right;
            padding-right: 1rem;
            box-sizing: border-box;
            opacity: .6; }
          .main-section .page.page-contact-us .contact-form ul li input, .main-section .page.page-contact-us .contact-form ul li textarea, .main-section .page.page-error-page .contact-form ul li input, .main-section .page.page-error-page .contact-form ul li textarea {
            flex-grow: 1;
            resize: none;
            position: relative; }
          .main-section .page.page-contact-us .contact-form ul li.accept_terms, .main-section .page.page-error-page .contact-form ul li.accept_terms {
            position: relative;
            margin: 2rem 0px;
            margin-left: auto; }
            .main-section .page.page-contact-us .contact-form ul li.accept_terms:after, .main-section .page.page-error-page .contact-form ul li.accept_terms:after {
              display: none; }
            .main-section .page.page-contact-us .contact-form ul li.accept_terms .asterisk, .main-section .page.page-error-page .contact-form ul li.accept_terms .asterisk {
              color: red;
              opacity: 1;
              font-weight: bold; }
            .main-section .page.page-contact-us .contact-form ul li.accept_terms input, .main-section .page.page-error-page .contact-form ul li.accept_terms input {
              position: absolute;
              top: calc(50% - 15px); }
            .main-section .page.page-contact-us .contact-form ul li.accept_terms label, .main-section .page.page-error-page .contact-form ul li.accept_terms label {
              opacity: 1;
              top: -11px;
              position: relative;
              display: block;
              font-size: .75rem;
              width: auto;
              text-align: left;
              padding-right: 0px;
              padding-left: 1.75rem;
              line-height: 1.75em; }
          .main-section .page.page-contact-us .contact-form ul li textarea, .main-section .page.page-error-page .contact-form ul li textarea {
            height: 10rem;
            line-height: 1.25rem; }
          .main-section .page.page-contact-us .contact-form ul li:last-child, .main-section .page.page-error-page .contact-form ul li:last-child {
            justify-content: flex-end; }
          .main-section .page.page-contact-us .contact-form ul li button, .main-section .page.page-error-page .contact-form ul li button {
            position: relative;
            right: 0px; }
      .main-section .page.page-contact-us .contact-form label, .main-section .page.page-contact-us .contact-form input, .main-section .page.page-error-page .contact-form label, .main-section .page.page-error-page .contact-form input {
        font-size: .75rem; }
      .main-section .page.page-contact-us .contact-form button, .main-section .page.page-contact-us .contact-form input, .main-section .page.page-contact-us .contact-form textarea, .main-section .page.page-error-page .contact-form button, .main-section .page.page-error-page .contact-form input, .main-section .page.page-error-page .contact-form textarea {
        padding: .5rem;
        background-color: rgba(255, 255, 255, 0.1);
        color: #fff;
        border: none;
        font-size: .75rem; }
      .main-section .page.page-contact-us .contact-form button, .main-section .page.page-error-page .contact-form button {
        border: none;
        color: #000;
        background-color: #fff;
        padding: 1rem 1.25rem; }
        .main-section .page.page-contact-us .contact-form button.disabled, .main-section .page.page-error-page .contact-form button.disabled {
          opacity: .5;
          pointer-events: none; }
      .main-section .page.page-contact-us .contact-form .result, .main-section .page.page-error-page .contact-form .result {
        position: absolute;
        padding-right: 2rem;
        max-width: 75%;
        left: 0px;
        top: 0px;
        margin: 0px; }
      .main-section .page.page-contact-us .contact-form form.sending button, .main-section .page.page-error-page .contact-form form.sending button {
        pointer-events: none; }
      .main-section .page.page-contact-us .contact-form form.sending li:not(:last-child), .main-section .page.page-error-page .contact-form form.sending li:not(:last-child) {
        opacity: .5; }
    @media screen and (min-width: 50em) {
      .main-section .page.page-contact-us .contact-form .accept_terms, .main-section .page.page-error-page .contact-form .accept_terms {
        width: 75%; } }
    @media screen and (min-width: 68em) {
      .main-section .page.page-contact-us .contact-form label, .main-section .page.page-contact-us .contact-form input, .main-section .page.page-contact-us .contact-form textarea, .main-section .page.page-error-page .contact-form label, .main-section .page.page-error-page .contact-form input, .main-section .page.page-error-page .contact-form textarea {
        font-size: 1rem; } }
    .main-section .page.page-main .page-main__content {
      padding-top: 0em; }
    .main-section .page.page-main .page-main__hero {
      position: relative;
      margin: 0px auto;
      z-index: 10; }
      .main-section .page.page-main .page-main__hero .intro {
        pointer-events: none;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 50; }
        .main-section .page.page-main .page-main__hero .intro h1 {
          margin: 0px;
          padding: 0px;
          position: relative;
          z-index: 30;
          text-align: left; }
      .main-section .page.page-main .page-main__hero.first .intro h1 {
        text-align: center; }
    .main-section .page.page-main h1 {
      font-size: 2em;
      padding: 0px 16px;
      margin-bottom: 1em;
      margin-top: 0px; }
    .main-section .page .keywords {
      padding: 0px 1em;
      display: flex;
      justify-content: flex-end;
      box-sizing: border-box; }
      .main-section .page .keywords ul {
        display: inline-block;
        list-style: none;
        padding: 1em 0px;
        margin: 0px;
        font-weight: 600;
        color: #4d4d4d;
        line-height: .8em; }
        .main-section .page .keywords ul li {
          font-size: .8em;
          display: inline-block; }
          .main-section .page .keywords ul li:not(:last-child):after {
            content: "|";
            margin: 1em; }
      @media screen and (min-width: 50em) {
        .main-section .page .keywords {
          width: 80%;
          max-width: 1376px;
          margin-left: auto;
          margin-right: auto; }
          .main-section .page .keywords ul {
            padding: 2em 0px; }
            .main-section .page .keywords ul li {
              font-size: 1em; } }
  @media screen and (min-width: 50em) {
    .main-section .page {
      padding-top: 110px; }
      .main-section .page.page-main h2 {
        font-size: 4em; }
      .main-section .page.page-main h1 {
        box-sizing: border-box;
        font-size: 5em;
        width: 80%;
        max-width: 1376px;
        margin-left: auto;
        margin-right: auto;
        padding: 0px 16px; } }

[class^='block-project'] {
  position: relative;
  -webkit-transform: translate3d(0, 0, 0);
  overflow: hidden;
  pointer-events: auto; }
  [class^='block-project']:nth-child(1) {
    z-index: 50; }
  [class^='block-project']:nth-child(2) {
    z-index: 49; }
  [class^='block-project']:nth-child(3) {
    z-index: 48; }
  [class^='block-project']:nth-child(4) {
    z-index: 47; }
  [class^='block-project'] h2:first-of-type {
    margin-top: 0px; }
  [class^='block-project'] .block-inner {
    padding: 2em 1em; }
    [class^='block-project'] .block-inner .article {
      margin-top: 1em; }
      [class^='block-project'] .block-inner .article h2 {
        font-size: 1.125em;
        margin-top: 0px;
        line-height: 1.2em; }
      [class^='block-project'] .block-inner .article p {
        font-size: .875em;
        width: 80%; }
    @media screen and (min-width: 50em) {
      [class^='block-project'] .block-inner {
        padding: 5em 0em; }
        [class^='block-project'] .block-inner .article h2 {
          font-size: 2.5em; }
        [class^='block-project'] .block-inner .article p {
          font-size: 1em;
          line-height: 1.7em; } }
  [class^='block-project'].block-project-intro .block-inner {
    padding: 3em 0px;
    display: flex;
    justify-content: space-between; }
    [class^='block-project'].block-project-intro .block-inner .image {
      display: inline-block;
      position: relative;
      padding: 0px 1em;
      box-sizing: border-box;
      width: 40%; }
      [class^='block-project'].block-project-intro .block-inner .image img {
        width: 100%; }
    [class^='block-project'].block-project-intro .block-inner .article {
      padding: 0px 1em;
      box-sizing: border-box;
      margin-top: 0px;
      width: 60%; }
      [class^='block-project'].block-project-intro .block-inner .article h2 {
        margin-top: 0em;
        margin-bottom: .25em; }
      [class^='block-project'].block-project-intro .block-inner .article .client, [class^='block-project'].block-project-intro .block-inner .article .pre-client {
        font-size: .875em;
        margin-bottom: 2em;
        display: block; }
        [class^='block-project'].block-project-intro .block-inner .article .client:empty, [class^='block-project'].block-project-intro .block-inner .article .pre-client:empty {
          display: none; }
      [class^='block-project'].block-project-intro .block-inner .article .pre-client {
        color: #bfbfbf;
        margin-bottom: 0em; }
      [class^='block-project'].block-project-intro .block-inner .article p {
        font-size: .875em;
        width: 100%; }
  @media screen and (min-width: 50em) {
    [class^='block-project'].block-project-intro .block-inner {
      padding: 5em 0px;
      width: 80%;
      max-width: 1376px;
      margin-left: auto;
      margin-right: auto;
      display: flex;
      justify-content: space-between; }
      [class^='block-project'].block-project-intro .block-inner .article {
        width: 75%; }
        [class^='block-project'].block-project-intro .block-inner .article h2 {
          font-size: 4.25em; }
        [class^='block-project'].block-project-intro .block-inner .article p {
          font-size: 1em;
          max-width: 50%; }
        [class^='block-project'].block-project-intro .block-inner .article .client, [class^='block-project'].block-project-intro .block-inner .article .pre-client {
          font-size: 1em;
          margin-bottom: 1.75em;
          letter-spacing: 1px; }
        [class^='block-project'].block-project-intro .block-inner .article .pre-client {
          margin-bottom: 0em; }
      [class^='block-project'].block-project-intro .block-inner .image {
        width: 25%; } }
  [class^='block-project'].block-project-header {
    overflow: visible; }
    [class^='block-project'].block-project-header .block-inner {
      padding: 0px; }
  [class^='block-project'].block-project-gallery {
    padding: 0em 0em; }
    [class^='block-project'].block-project-gallery .block-inner {
      padding: 0px;
      margin: 0px auto; }
      [class^='block-project'].block-project-gallery .block-inner .grid {
        display: grid;
        position: relative;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: auto;
        grid-auto-flow: dense;
        grid-template-rows: 1fr min-content; }
        [class^='block-project'].block-project-gallery .block-inner .grid:hover .grid__item {
          opacity: .10 !important; }
        [class^='block-project'].block-project-gallery .block-inner .grid .grid__item {
          overflow: hidden;
          transition: opacity 0.35s cubic-bezier(0.2, 0, 0.4, 1);
          vertical-align: top;
          position: relative;
          padding-bottom: 75%;
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover; }
          [class^='block-project'].block-project-gallery .block-inner .grid .grid__item video {
            height: 100%;
            position: absolute;
            margin: 0 auto;
            left: 50%;
            transform: translate(-50%); }
          [class^='block-project'].block-project-gallery .block-inner .grid .grid__item:first-child {
            grid-column: span 4;
            grid-row: span 2; }
          [class^='block-project'].block-project-gallery .block-inner .grid .grid__item:nth-child(2), [class^='block-project'].block-project-gallery .block-inner .grid .grid__item:nth-child(3), [class^='block-project'].block-project-gallery .block-inner .grid .grid__item:nth-child(4) {
            grid-column: span 2; }
          [class^='block-project'].block-project-gallery .block-inner .grid .grid__item:nth-child(5) {
            grid-column: span 4;
            padding-bottom: 25%; }
          [class^='block-project'].block-project-gallery .block-inner .grid .grid__item:hover {
            z-index: 10 !important;
            opacity: 1 !important; }
    @media screen and (min-width: 50em) {
      [class^='block-project'].block-project-gallery .block-inner .grid {
        display: grid;
        position: relative;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: auto;
        grid-auto-flow: dense; }
        [class^='block-project'].block-project-gallery .block-inner .grid .grid__item {
          padding-bottom: 100%; }
          [class^='block-project'].block-project-gallery .block-inner .grid .grid__item:first-child {
            grid-column: span 2;
            grid-row: span 2; }
            [class^='block-project'].block-project-gallery .block-inner .grid .grid__item:first-child:hover video {
              left: 100%; }
          [class^='block-project'].block-project-gallery .block-inner .grid .grid__item:nth-child(2), [class^='block-project'].block-project-gallery .block-inner .grid .grid__item:nth-child(3), [class^='block-project'].block-project-gallery .block-inner .grid .grid__item:nth-child(4) {
            grid-column: span 1; }
          [class^='block-project'].block-project-gallery .block-inner .grid .grid__item:nth-child(5) {
            grid-column: span 1;
            padding-bottom: 100%; } }
  [class^='block-project'].block-project-detail-shot {
    overflow: visible; }
    [class^='block-project'].block-project-detail-shot .block-inner .article h2 {
      margin-top: 1em;
      line-height: 1.5em;
      width: 50%; }
    [class^='block-project'].block-project-detail-shot .block-inner .video-container .keywords {
      display: none; }
    @media screen and (min-width: 50em) {
      [class^='block-project'].block-project-detail-shot .block-inner {
        padding-top: 10em; }
        [class^='block-project'].block-project-detail-shot .block-inner .video-container {
          width: 80%;
          max-width: 1376px;
          margin-left: auto;
          margin-right: auto; }
        [class^='block-project'].block-project-detail-shot .block-inner .article {
          margin-top: 5em;
          width: 80%;
          max-width: 1376px;
          margin-left: auto;
          margin-right: auto;
          display: flex;
          justify-content: space-between;
          padding: 0px 1em;
          box-sizing: border-box; }
          [class^='block-project'].block-project-detail-shot .block-inner .article h2 {
            margin-top: 0em;
            width: 37.5%; }
          [class^='block-project'].block-project-detail-shot .block-inner .article p {
            width: 37.5%; } }
  [class^='block-project'].block-project-detail-element .block-inner .element {
    padding: 0px;
    margin: 0px; }
    [class^='block-project'].block-project-detail-element .block-inner .element img {
      width: 100%; }
  @media screen and (min-width: 50em) {
    [class^='block-project'].block-project-detail-element .block-inner {
      padding: 8em 0px;
      width: 80%;
      max-width: 1376px;
      margin-left: auto;
      margin-right: auto;
      display: flex;
      justify-content: space-between;
      align-items: center; }
      [class^='block-project'].block-project-detail-element .block-inner .article {
        width: 37.5%;
        order: -1;
        margin-top: 0em;
        padding: 0px 1em;
        box-sizing: border-box; }
        [class^='block-project'].block-project-detail-element .block-inner .article h2 {
          margin-top: 0;
          font-size: 2.5em; }
      [class^='block-project'].block-project-detail-element .block-inner .element {
        width: 50%; } }
  [class^='block-project'].block-project-before-after .block-inner .keywords {
    display: none; }
  [class^='block-project'].block-project-before-after .block-inner .article h2 {
    margin-top: 1.5em; }
  [class^='block-project'].block-project-before-after .block-inner .before-after {
    position: relative; }
    [class^='block-project'].block-project-before-after .block-inner .before-after + .before-after {
      margin-top: 3em; }
    [class^='block-project'].block-project-before-after .block-inner .before-after__ui {
      z-index: 50;
      position: absolute;
      top: 0px;
      width: 100%;
      height: 100%; }
      [class^='block-project'].block-project-before-after .block-inner .before-after__ui .bar {
        position: absolute;
        width: 2px;
        margin-left: -1px;
        top: -1em;
        height: calc(100% + 2em);
        background-color: #fff; }
    [class^='block-project'].block-project-before-after .block-inner .before-after__images {
      width: 100%;
      position: relative; }
      [class^='block-project'].block-project-before-after .block-inner .before-after__images .gtest {
        position: absolute;
        display: none;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        z-index: 50; }
      [class^='block-project'].block-project-before-after .block-inner .before-after__images svg {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        pointer-events: none;
        -webkit-transform: translate3d(0, 0, 0); }
        [class^='block-project'].block-project-before-after .block-inner .before-after__images svg image {
          width: 100%; }
      [class^='block-project'].block-project-before-after .block-inner .before-after__images .image, [class^='block-project'].block-project-before-after .block-inner .before-after__images svg {
        -webkit-touch-callout: none;
        /* iOS Safari */
        -webkit-user-select: none;
        /* Safari */
        -khtml-user-select: none;
        /* Konqueror HTML */
        -moz-user-select: none;
        /* Firefox */
        -ms-user-select: none;
        /* Internet Explorer/Edge */
        user-select: none;
        /* Non-prefixed version, currently*/ }
        [class^='block-project'].block-project-before-after .block-inner .before-after__images .image:focus, [class^='block-project'].block-project-before-after .block-inner .before-after__images .image:active, [class^='block-project'].block-project-before-after .block-inner .before-after__images svg:focus, [class^='block-project'].block-project-before-after .block-inner .before-after__images svg:active {
          outline: none;
          -moz-outline-style: none; }
      [class^='block-project'].block-project-before-after .block-inner .before-after__images .image {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        background-position: center;
        background-size: cover;
        pointer-events: none; }
        [class^='block-project'].block-project-before-after .block-inner .before-after__images .image.one {
          position: relative; }
          [class^='block-project'].block-project-before-after .block-inner .before-after__images .image.one img {
            width: 100%;
            height: auto;
            display: block; }
        [class^='block-project'].block-project-before-after .block-inner .before-after__images .image.two {
          mask-image: linear-gradient(to right, black calc(var(--mpos) - var(--d-start)), white calc(var(--mpos) + var(--d-start)));
          -webkit-mask-image: linear-gradient(to right, black calc(var(--mpos) - var(--d-start)), rgba(0, 0, 0, 0) calc(var(--mpos) + var(--d-start))); }
          [class^='block-project'].block-project-before-after .block-inner .before-after__images .image.two img {
            width: 100%; }
  @media screen and (min-width: 50em) {
    [class^='block-project'].block-project-before-after.template-1 .block-inner .ba-wrap {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap; }
      [class^='block-project'].block-project-before-after.template-1 .block-inner .ba-wrap .before-after + .before-after {
        margin-top: 8em; }
    [class^='block-project'].block-project-before-after.template-2 .block-inner {
      width: 80%;
      max-width: 1376px;
      margin-left: auto;
      margin-right: auto; }
      [class^='block-project'].block-project-before-after.template-2 .block-inner .ba-wrap {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        padding: 0px calc(30px / 2); }
        [class^='block-project'].block-project-before-after.template-2 .block-inner .ba-wrap .before-after {
          width: calc(50% - calc(30px / 2));
          box-sizing: border-box;
          margin-bottom: 30px;
          margin-top: 30px; }
          [class^='block-project'].block-project-before-after.template-2 .block-inner .ba-wrap .before-after:nth-child(odd) {
            margin-right: calc(30px / 2); }
          [class^='block-project'].block-project-before-after.template-2 .block-inner .ba-wrap .before-after:nth-child(even) {
            margin-left: calc(30px / 2); }
          [class^='block-project'].block-project-before-after.template-2 .block-inner .ba-wrap .before-after__ui .bar {
            width: 4px;
            margin-left: -2px;
            top: -1em;
            height: calc(100% + 2em); }
    [class^='block-project'].block-project-before-after .block-inner {
      padding-top: 8em;
      width: 80%;
      max-width: 1376px;
      margin-left: auto;
      margin-right: auto; }
      [class^='block-project'].block-project-before-after .block-inner .before-after__ui {
        position: absolute;
        pointer-events: none; }
        [class^='block-project'].block-project-before-after .block-inner .before-after__ui .bar {
          width: 4px;
          margin-left: -2px;
          top: -2em;
          height: calc(100% + 4em); }
      [class^='block-project'].block-project-before-after .block-inner .before-after__images {
        cursor: pointer; }
      [class^='block-project'].block-project-before-after .block-inner .article {
        position: relative;
        padding: 0px 1em;
        box-sizing: border-box; }
        [class^='block-project'].block-project-before-after .block-inner .article .keywords {
          display: block;
          position: absolute;
          width: auto;
          top: 0px;
          right: 1em;
          padding: 0px; }
        [class^='block-project'].block-project-before-after .block-inner .article p {
          font-size: 1em;
          max-width: 60%; } }
  [class^='block-project'].block-project-process {
    overflow: hidden; }
    [class^='block-project'].block-project-process .block-inner .items {
      --cols:5; }
      [class^='block-project'].block-project-process .block-inner .items__item {
        position: relative;
        width: calc( (var(--g-col-span) / var(--cols)) * 100%);
        max-width: 100%; }
        [class^='block-project'].block-project-process .block-inner .items__item img, [class^='block-project'].block-project-process .block-inner .items__item video {
          width: 100%; }
    @media screen and (min-width: 50em) {
      [class^='block-project'].block-project-process {
        padding-top: 5em;
        position: relative;
        --cols:5; }
        [class^='block-project'].block-project-process .block-inner {
          position: relative;
          padding-bottom: 3px;
          width: 100%;
          max-width: 1720px;
          margin-left: auto;
          margin-right: auto; }
          [class^='block-project'].block-project-process .block-inner .article {
            margin-top: 0px;
            pointer-events: none; }
            [class^='block-project'].block-project-process .block-inner .article h2 {
              margin-top: 0px; }
            [class^='block-project'].block-project-process .block-inner .article .description {
              width: 75%;
              box-sizing: border-box;
              padding-right: calc(30px / 2); }
              [class^='block-project'].block-project-process .block-inner .article .description p {
                width: auto; }
        [class^='block-project'].block-project-process:after {
          content: "";
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0px;
          left: 0px;
          background: -webkit-linear-gradient(top, rgba(var(--bg-color), 1) 0%, rgba(var(--bg-color), 0) 25%, rgba(var(--bg-color), 0) 75%, rgba(var(--bg-color), 1) 100%);
          z-index: 30;
          pointer-events: none; }
        [class^='block-project'].block-project-process .article {
          margin-left: 10%;
          padding: 0px 1em;
          box-sizing: border-box;
          position: relative;
          z-index: 40;
          width: 40%; }
        [class^='block-project'].block-project-process .block-inner {
          display: flex; }
        [class^='block-project'].block-project-process .items {
          position: relative;
          display: flex;
          align-items: flex-start;
          flex-wrap: wrap;
          width: 50%;
          margin-left: 0px;
          --g-col-span: 5;
          --g-col: 0; }
          [class^='block-project'].block-project-process .items__item {
            position: relative;
            width: calc( (var(--g-col-span) / var(--cols)) * 100%);
            left: calc( (var(--g-col) / var(--cols)) * 100%);
            margin-bottom: 30px; }
            [class^='block-project'].block-project-process .items__item.type-video {
              padding: 0px; }
              [class^='block-project'].block-project-process .items__item.type-video video {
                pointer-events: all;
                position: relative; }
            [class^='block-project'].block-project-process .items__item img, [class^='block-project'].block-project-process .items__item video {
              width: 100%; } }

.footer {
  overflow: hidden;
  bottom: 0px;
  width: 100%;
  box-sizing: border-box;
  z-index: 350;
  position: relative; }
  body .ghost.preloading .footer {
    visibility: hidden; }
  .footer .footer-ph {
    position: relative;
    --bg-color:20,20,20;
    background: -webkit-linear-gradient(top, rgba(var(--bg-color), 1) 0%, rgba(var(--bg-color), 0) 2em);
    z-index: 10;
    pointer-events: none; }
  .footer .footer-inner {
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;
    font-size: .8em;
    padding: 5em 2em 1rem;
    box-sizing: border-box;
    letter-spacing: 1px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column; }
    .footer .footer-inner > * {
      box-sizing: border-box;
      margin-bottom: 3em; }
      .footer .footer-inner > *.footer__spacer {
        display: none; }
      .footer .footer-inner > *:last-child {
        margin-bottom: 0px; }
    .footer .footer-inner .footer__copy {
      font-size: 1em;
      opacity: .7;
      text-align: left;
      width: 100%;
      margin-top: 1em; }
    .footer .footer-inner .footer__logo .logo {
      display: block;
      width: 30px; }
      .footer .footer-inner .footer__logo .logo svg {
        overflow: visible; }
        .footer .footer-inner .footer__logo .logo svg .logo-ghost {
          opacity: 1;
          visibility: visible; }
    .footer .footer-inner .footer__social {
      text-align: left;
      padding: 0px 0px;
      margin-bottom: 10px; }
      .footer .footer-inner .footer__social li {
        width: 34px;
        line-height: 0px;
        display: inline-block; }
        .footer .footer-inner .footer__social li:not(:last-child) {
          margin-right: 1em; }
      .footer .footer-inner .footer__social a {
        display: inline-block;
        height: auto;
        opacity: 1;
        transition: opacity .25s ease-in-out; }
      .footer .footer-inner .footer__social svg {
        transition: fill .25s ease-in-out;
        fill: #4D4D4D;
        width: 100%;
        height: auto; }
    .footer .footer-inner .footer__menu {
      margin-bottom: 1rem; }
    .footer .footer-inner .footer__contact {
      line-height: 2em;
      display: flex;
      flex-wrap: wrap; }
      .footer .footer-inner .footer__contact-intro {
        width: 100%;
        font-weight: bold;
        display: none; }
      .footer .footer-inner .footer__contact p {
        white-space: nowrap;
        box-sizing: border-box;
        margin-top: 0px;
        margin-right: 4em; }
        .footer .footer-inner .footer__contact p:not(:first-child) {
          flex-basis: 0;
          margin-bottom: 1rem; }
      .footer .footer-inner .footer__contact a {
        color: #bfbfbf; }
        .footer .footer-inner .footer__contact a:hover {
          color: inherit; }
      .footer .footer-inner .footer__contact .label {
        color: #fff;
        font-weight: bold;
        display: block;
        margin-bottom: .25rem; }
        .footer .footer-inner .footer__contact .label:not(:first-child) {
          margin-top: 2em; }
  .footer ul {
    list-style: none;
    padding: 0px;
    margin: 0px; }
  @media screen and (min-width: 37.5em) {
    .footer {
      overflow: visible; }
      .footer .footer-ph {
        background: -webkit-linear-gradient(top, rgba(var(--bg-color), 1) 0%, rgba(var(--bg-color), 0) 20%); }
      .footer .footer-inner {
        padding: 0em;
        padding-top: 6rem;
        display: flex;
        flex-direction: row; }
        .footer .footer-inner > * {
          box-sizing: border-box;
          padding: 0px 16px; }
        .footer .footer-inner .footer__spacer {
          display: none; }
        .footer .footer-inner .footer__social {
          flex-grow: 1;
          text-align: right;
          padding: 0px 1em;
          width: 100%; }
          .footer .footer-inner .footer__social li:not(:last-child) {
            margin-right: 1em; }
          .footer .footer-inner .footer__social a {
            opacity: .5; }
            .footer .footer-inner .footer__social a:hover {
              opacity: 1; }
            .footer .footer-inner .footer__social a svg {
              fill: white; }
        .footer .footer-inner .footer__copy {
          margin-top: 0px;
          text-align: right; }
        .footer .footer-inner .footer__menu {
          align-self: flex-end;
          text-align: right;
          width: 100%; }
        .footer .footer-inner .footer__contact {
          display: flex;
          position: relative;
          margin-bottom: 0px;
          flex-grow: 1;
          width: 50%;
          justify-content: flex-start; }
          .footer .footer-inner .footer__contact p {
            width: auto;
            flex-grow: unset; }
        .footer .footer-inner .footer__logo {
          width: 100%; }
          .footer .footer-inner .footer__logo .logo {
            display: block;
            width: 40px; } }
  @media screen and (min-width: 50em) {
    .footer .footer-inner {
      width: 80%;
      max-width: 1376px;
      margin-left: auto;
      margin-right: auto;
      padding: calc(30px * 4) 0px;
      font-size: 1em;
      flex-direction: row; } }
  @media screen and (min-width: 50em) and (orientation: landscape) and (max-width: 850px) {
    .footer .footer-inner {
      font-size: .75rem;
      padding-bottom: 1rem; }
      .footer .footer-inner .footer__menu {
        align-self: flex-start !important;
        width: 100%; }
      .footer .footer-inner .footer__copy {
        position: absolute;
        right: 0px;
        bottom: 1rem; }
      .footer .footer-inner .footer__social {
        position: absolute;
        right: 0px;
        bottom: 4rem;
        width: 100px; }
        .footer .footer-inner .footer__social li {
          margin-right: 0px !important;
          margin-bottom: 5px; }
          .footer .footer-inner .footer__social li:nth-child(even) {
            margin-left: 5px; } }
  @media screen and (min-width: 50em) {
      .footer .footer-inner > * {
        width: 25%; }
      .footer .footer-inner .footer__logo {
        width: 100%; }
        .footer .footer-inner .footer__logo svg {
          width: 60px; }
      .footer .footer-inner .footer__menu {
        font-weight: bold;
        position: relative;
        top: -4px;
        align-self: flex-end;
        margin-bottom: 1rem; }
      .footer .footer-inner .footer__contact {
        flex-wrap: nowrap;
        margin-bottom: 2em;
        top: -4px;
        justify-content: flex-start;
        width: auto;
        margin-right: 5rem; }
        .footer .footer-inner .footer__contact p:not(:first-child) {
          width: auto;
          padding-right: 0px;
          flex-grow: 0; } }