html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

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

@font-face {
  font-family: 'SaansMediumItalic';
  src: url("../fonts/SaansTRIAL-MediumItalic.e6760046.woff2") format("woff2"), url("../fonts/SaansTRIAL-MediumItalic.781a7173.woff") format("woff");
  font-weight: 500;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: 'SaansMedium';
  src: url("../fonts/SaansTRIAL-Medium.f4507314.woff2") format("woff2"), url("../fonts/SaansTRIAL-Medium.9fb15795.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: 'Saans';
  src: url("../fonts/SaansTRIAL-Regular.7ff4dd0c.woff2") format("woff2"), url("../fonts/SaansTRIAL-Regular.ed616b99.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: 'SaansItalic';
  src: url("../fonts/SaansTRIAL-RegularItalic.0a5815b2.woff2") format("woff2"), url("../fonts/SaansTRIAL-RegularItalic.04cd5071.woff") format("woff");
  font-weight: normal;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: 'SaansBold';
  src: url("../fonts/SaansTRIAL-Bold.c1e16c99.woff2") format("woff2"), url("../fonts/SaansTRIAL-Bold.dae9c566.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: 'SaansLight';
  src: url("../fonts/SaansTRIAL-Light.049d79db.woff2") format("woff2"), url("../fonts/SaansTRIAL-Light.9033f110.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: 'SaansBoldItalic';
  src: url("../fonts/SaansTRIAL-BoldItalic.3db2bc72.woff2") format("woff2"), url("../fonts/SaansTRIAL-BoldItalic.e51cf447.woff") format("woff");
  font-weight: bold;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: 'Alfredino';
  src: url("../fonts/TRIALAlfredinoSemimono-Semimono.feb8af50.woff2") format("woff2"), url("../fonts/TRIALAlfredinoSemimono-Semimono.9b9cd585.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: 'NTBauMono';
  src: url("../fonts/NTBauMono-Regular.eb803944.woff2") format("woff2"), url("../fonts/NTBauMono-Regular.921d708c.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: 'Review';
  src: url("../fonts/Review-Medium.47af278c.woff2") format("woff2"), url("../fonts/Review-Medium.b13ff36d.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: 'TimesNow';
  src: url("../fonts/TimesNow-SemiLight.8596124a.woff2") format("woff2"), url("../fonts/TimesNow-SemiLight.a9bc25a1.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap; }

html {
  font-size: 10px; }

body {
  font-family: 'Saans', 'Arial', serif;
  font-size: 1.6rem;
  line-height: 1.5;
  color: #000;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

a {
  text-decoration: none; }
  a:hover {
    text-decoration: none; }

.title {
  font-size: 10.8rem;
  font-family: 'SaansMedium';
  line-height: 1;
  letter-spacing: -5px; }
  @media screen and (max-width: 991px) {
    .title {
      font-size: 8rem; } }

h3 {
  font-size: 1.5vw;
  line-height: 1.8vw;
  letter-spacing: -1.18px; }
  @media screen and (max-width: 991px) {
    h3 {
      font-size: 2.6rem;
      line-height: 2.8rem; } }

.page {
  position: relative;
  z-index: 1;
  padding-top: 20rem; }
  @media screen and (max-width: 991px) {
    .page {
      padding-top: 14rem; } }

.full {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center; }

.ml-auto {
  margin-left: auto; }

.layout-1 {
  width: 24%; }
  .layout-1 .img-container {
    height: 28vw;
    position: relative; }
    .layout-1 .img-container img, .layout-1 .img-container video {
      position: absolute;
      top: 0;
      left: 0; }
  @media screen and (max-width: 991px) {
    .layout-1 {
      width: 100%; }
      .layout-1 .img-container {
        height: 28rem; } }

.layout-2 {
  display: flex;
  padding-bottom: 4rem; }
  .layout-2 > div img, .layout-2 > div video {
    position: absolute;
    top: 0;
    left: 0; }
  .layout-2 > div .img-container {
    position: relative; }
  .layout-2 > div:first-child {
    width: calc(76% - 2rem); }
    .layout-2 > div:first-child .img-container {
      padding-bottom: 60%; }
  .layout-2 > div:last-child {
    margin-left: auto;
    width: 24%; }
    .layout-2 > div:last-child .img-container {
      padding-bottom: 100%; }
  @media screen and (max-width: 991px) {
    .layout-2 {
      flex-wrap: wrap; }
      .layout-2 > div:first-child {
        width: 100%;
        margin-bottom: 4rem; }
        .layout-2 > div:first-child .img-container {
          padding-bottom: 28rem; }
      .layout-2 > div:last-child {
        width: 100%; }
        .layout-2 > div:last-child .img-container {
          padding-bottom: 28rem; } }

.layout-3 {
  margin-bottom: 10rem;
  width: 48%; }
  .layout-3 .img-container {
    height: 44vw; }
  @media screen and (max-width: 991px) {
    .layout-3 {
      width: 100%; }
      .layout-3 .img-container {
        height: 28rem; } }

.legend {
  padding-top: 1rem;
  display: flex;
  color: #BBBBBB;
  font-size: 1.4rem;
  letter-spacing: -0.21px;
  align-items: center; }
  .legend svg {
    display: block; }
  .legend span {
    display: block;
    margin-left: 4rem; }
  @media screen and (max-width: 991px) {
    .legend {
      font-size: 1.2rem; }
      .legend span {
        margin-left: 2rem; } }

.text-anim {
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translate3d(0, 3rem, 0);
  -moz-transform: translate3d(0, 3rem, 0);
  -ms-transform: translate3d(0, 3rem, 0);
  -o-transform: translate3d(0, 3rem, 0);
  transform: translate3d(0, 3rem, 0); }
  .text-anim.anim {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: all 1.4s cubic-bezier(0.15, 0.9, 0.34, 0.95) 0.4s;
    -moz-transition: all 1.4s cubic-bezier(0.15, 0.9, 0.34, 0.95) 0.4s;
    -ms-transition: all 1.4s cubic-bezier(0.15, 0.9, 0.34, 0.95) 0.4s;
    -o-transition: all 1.4s cubic-bezier(0.15, 0.9, 0.34, 0.95) 0.4s;
    transition: all 1.4s cubic-bezier(0.15, 0.9, 0.34, 0.95) 0.4s; }

.img-anim .img-container {
  clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translate3d(0, 5rem, 0);
  -moz-transform: translate3d(0, 5rem, 0);
  -ms-transform: translate3d(0, 5rem, 0);
  -o-transform: translate3d(0, 5rem, 0);
  transform: translate3d(0, 5rem, 0); }

.img-anim.anim .img-container {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: all 1.4s cubic-bezier(0.15, 0.9, 0.34, 0.95);
  -moz-transition: all 1.4s cubic-bezier(0.15, 0.9, 0.34, 0.95);
  -ms-transition: all 1.4s cubic-bezier(0.15, 0.9, 0.34, 0.95);
  -o-transition: all 1.4s cubic-bezier(0.15, 0.9, 0.34, 0.95);
  transition: all 1.4s cubic-bezier(0.15, 0.9, 0.34, 0.95); }

.img-anim.img-anim--delay.anim .img-container {
  -webkit-transition: transform 1.4s cubic-bezier(0.15, 0.9, 0.34, 0.95) 0.2s, opacity 1.4s cubic-bezier(0.15, 0.9, 0.34, 0.95) 0.2s, visibility 1.4s cubic-bezier(0.15, 0.9, 0.34, 0.95) 0.2s, clip-path 1.4s cubic-bezier(0.15, 0.9, 0.34, 0.95);
  -moz-transition: transform 1.4s cubic-bezier(0.15, 0.9, 0.34, 0.95) 0.2s, opacity 1.4s cubic-bezier(0.15, 0.9, 0.34, 0.95) 0.2s, visibility 1.4s cubic-bezier(0.15, 0.9, 0.34, 0.95) 0.2s, clip-path 1.4s cubic-bezier(0.15, 0.9, 0.34, 0.95);
  -ms-transition: transform 1.4s cubic-bezier(0.15, 0.9, 0.34, 0.95) 0.2s, opacity 1.4s cubic-bezier(0.15, 0.9, 0.34, 0.95) 0.2s, visibility 1.4s cubic-bezier(0.15, 0.9, 0.34, 0.95) 0.2s, clip-path 1.4s cubic-bezier(0.15, 0.9, 0.34, 0.95);
  -o-transition: transform 1.4s cubic-bezier(0.15, 0.9, 0.34, 0.95) 0.2s, opacity 1.4s cubic-bezier(0.15, 0.9, 0.34, 0.95) 0.2s, visibility 1.4s cubic-bezier(0.15, 0.9, 0.34, 0.95) 0.2s, clip-path 1.4s cubic-bezier(0.15, 0.9, 0.34, 0.95);
  transition: transform 1.4s cubic-bezier(0.15, 0.9, 0.34, 0.95) 0.2s, opacity 1.4s cubic-bezier(0.15, 0.9, 0.34, 0.95) 0.2s, visibility 1.4s cubic-bezier(0.15, 0.9, 0.34, 0.95) 0.2s, clip-path 1.4s cubic-bezier(0.15, 0.9, 0.34, 0.95); }

.img-anim:hover .img-container {
  clip-path: polygon(2% 2%, 98% 2%, 98% 98%, 2% 98%); }

.cursor {
  height: 2rem;
  width: 2rem;
  position: fixed;
  z-index: 500;
  pointer-events: none;
  top: -1rem;
  left: -1rem;
  will-change: transform;
  -webkit-transform: translate(-100px, -100px);
  -moz-transform: translate(-100px, -100px);
  -ms-transform: translate(-100px, -100px);
  -o-transform: translate(-100px, -100px);
  transform: translate(-100px, -100px);
  -webkit-transition: transform 0.9s cubic-bezier(0.15, 0.9, 0.34, 0.95), opacity 0.3s cubic-bezier(0.15, 0.9, 0.34, 0.95);
  -moz-transition: transform 0.9s cubic-bezier(0.15, 0.9, 0.34, 0.95), opacity 0.3s cubic-bezier(0.15, 0.9, 0.34, 0.95);
  -ms-transition: transform 0.9s cubic-bezier(0.15, 0.9, 0.34, 0.95), opacity 0.3s cubic-bezier(0.15, 0.9, 0.34, 0.95);
  -o-transition: transform 0.9s cubic-bezier(0.15, 0.9, 0.34, 0.95), opacity 0.3s cubic-bezier(0.15, 0.9, 0.34, 0.95);
  transition: transform 0.9s cubic-bezier(0.15, 0.9, 0.34, 0.95), opacity 0.3s cubic-bezier(0.15, 0.9, 0.34, 0.95); }
  .cursor:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: 50%;
    background-color: #e4e4e4;
    opacity: 0.4;
    -webkit-transition: all 0.4s cubic-bezier(0.15, 0.9, 0.34, 0.95);
    -moz-transition: all 0.4s cubic-bezier(0.15, 0.9, 0.34, 0.95);
    -ms-transition: all 0.4s cubic-bezier(0.15, 0.9, 0.34, 0.95);
    -o-transition: all 0.4s cubic-bezier(0.15, 0.9, 0.34, 0.95);
    transition: all 0.4s cubic-bezier(0.15, 0.9, 0.34, 0.95); }
  .cursor:before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    height: 180%;
    width: 180%;
    border-radius: 50%;
    border: 1px solid #000;
    -webkit-transform: translate3d(-50%, -50%, 0) scale(1.2);
    -moz-transform: translate3d(-50%, -50%, 0) scale(1.2);
    -ms-transform: translate3d(-50%, -50%, 0) scale(1.2);
    -o-transform: translate3d(-50%, -50%, 0) scale(1.2);
    transform: translate3d(-50%, -50%, 0) scale(1.2);
    -webkit-transition: all 0.4s cubic-bezier(0.15, 0.9, 0.34, 0.95);
    -moz-transition: all 0.4s cubic-bezier(0.15, 0.9, 0.34, 0.95);
    -ms-transition: all 0.4s cubic-bezier(0.15, 0.9, 0.34, 0.95);
    -o-transition: all 0.4s cubic-bezier(0.15, 0.9, 0.34, 0.95);
    transition: all 0.4s cubic-bezier(0.15, 0.9, 0.34, 0.95);
    opacity: 0;
    visibility: hidden; }
  .cursor svg {
    opacity: 0;
    visibility: hidden;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    -webkit-transform: scale(0) translate(-50%, -50%) rotate(45deg);
    -moz-transform: scale(0) translate(-50%, -50%) rotate(45deg);
    -ms-transform: scale(0) translate(-50%, -50%) rotate(45deg);
    -o-transform: scale(0) translate(-50%, -50%) rotate(45deg);
    transform: scale(0) translate(-50%, -50%) rotate(45deg);
    -webkit-transition: all 0.6s cubic-bezier(0.15, 0.9, 0.34, 0.95);
    -moz-transition: all 0.6s cubic-bezier(0.15, 0.9, 0.34, 0.95);
    -ms-transition: all 0.6s cubic-bezier(0.15, 0.9, 0.34, 0.95);
    -o-transition: all 0.6s cubic-bezier(0.15, 0.9, 0.34, 0.95);
    transition: all 0.6s cubic-bezier(0.15, 0.9, 0.34, 0.95); }
  .cursor.hover:after {
    background-color: #000;
    opacity: 0.8;
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -ms-transform: scale(1.3);
    -o-transform: scale(1.3);
    transform: scale(1.3); }
  .cursor.hover svg {
    opacity: 1;
    visibility: visible;
    -webkit-transform: scale(1) translate(-50%, -50%) rotate(0);
    -moz-transform: scale(1) translate(-50%, -50%) rotate(0);
    -ms-transform: scale(1) translate(-50%, -50%) rotate(0);
    -o-transform: scale(1) translate(-50%, -50%) rotate(0);
    transform: scale(1) translate(-50%, -50%) rotate(0); }
  .cursor span {
    display: block;
    position: absolute;
    font-size: 1.2rem;
    width: 20rem;
    left: 4rem;
    top: 0rem;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translate3d(2rem, 0, 0) scale(1.1);
    -moz-transform: translate3d(2rem, 0, 0) scale(1.1);
    -ms-transform: translate3d(2rem, 0, 0) scale(1.1);
    -o-transform: translate3d(2rem, 0, 0) scale(1.1);
    transform: translate3d(2rem, 0, 0) scale(1.1);
    -webkit-transition: all 0.6s cubic-bezier(0.76, 0, 0.24, 1);
    -moz-transition: all 0.6s cubic-bezier(0.76, 0, 0.24, 1);
    -ms-transition: all 0.6s cubic-bezier(0.76, 0, 0.24, 1);
    -o-transition: all 0.6s cubic-bezier(0.76, 0, 0.24, 1);
    transition: all 0.6s cubic-bezier(0.76, 0, 0.24, 1); }
  .cursor.hover-case:after {
    background-color: #000;
    opacity: 0.8;
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -ms-transform: scale(1.3);
    -o-transform: scale(1.3);
    transform: scale(1.3); }
  .cursor.hover-case:before {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate3d(-50%, -50%, 0);
    -moz-transform: translate3d(-50%, -50%, 0);
    -ms-transform: translate3d(-50%, -50%, 0);
    -o-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0); }
  .cursor.hover-case span {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  .cursor.hover-case svg {
    opacity: 1;
    visibility: visible;
    -webkit-transform: scale(1) translate(-50%, -50%) rotate(0);
    -moz-transform: scale(1) translate(-50%, -50%) rotate(0);
    -ms-transform: scale(1) translate(-50%, -50%) rotate(0);
    -o-transform: scale(1) translate(-50%, -50%) rotate(0);
    transform: scale(1) translate(-50%, -50%) rotate(0); }

.mango-overlay {
  background-color: white;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  height: 100%;
  width: 100%;
  transition: opacity 0.3s ease 0.3s; }

.mango-image--open {
  position: relative;
  cursor: zoom-out !important; }

.mango--open .mango-overlay {
  cursor: zoom-out;
  opacity: 1;
  transition: opacity 0.1s ease; }

.mango-image {
  cursor: pointer;
  transition: transform 0.3s ease; }

[data-mango] {
  visibility: visible !important; }

.img-container {
  overflow: hidden; }

.img-container:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #000;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: all 0.4s cubic-bezier(0.15, 0.9, 0.34, 0.95);
  -moz-transition: all 0.4s cubic-bezier(0.15, 0.9, 0.34, 0.95);
  -ms-transition: all 0.4s cubic-bezier(0.15, 0.9, 0.34, 0.95);
  -o-transition: all 0.4s cubic-bezier(0.15, 0.9, 0.34, 0.95);
  transition: all 0.4s cubic-bezier(0.15, 0.9, 0.34, 0.95); }

.img-container:hover:after {
  opacity: 0.2; }

* {
  box-sizing: border-box;
  outline: none; }

html {
  background-color: #fff;
  overflow-x: hidden; }

body {
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  overflow-x: hidden;
  -webkit-transition: background-color 1s cubic-bezier(0.15, 0.9, 0.34, 0.95);
  -moz-transition: background-color 1s cubic-bezier(0.15, 0.9, 0.34, 0.95);
  -ms-transition: background-color 1s cubic-bezier(0.15, 0.9, 0.34, 0.95);
  -o-transition: background-color 1s cubic-bezier(0.15, 0.9, 0.34, 0.95);
  transition: background-color 1s cubic-bezier(0.15, 0.9, 0.34, 0.95); }

img {
  max-width: 100%; }

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

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

.container {
  padding: 0 1.5rem; }

canvas {
  display: block;
  height: 100vh;
  left: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 6; }

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1.6rem 1.5rem 0 1.5rem;
  z-index: 10;
  pointer-events: none;
  opacity: 0; }
  .header h1 {
    height: 3rem;
    width: 3rem;
    margin-top: -0.7rem; }
    .header h1 #logo-lottie {
      height: 3rem;
      width: 3rem; }
  .header .mobile {
    display: none; }
    @media screen and (max-width: 991px) {
      .header .mobile {
        display: block; } }
  @media screen and (max-width: 991px) {
    .header .desktop {
      display: none; } }
  .header__links {
    position: absolute;
    top: 3.2rem;
    left: 59.6%;
    color: #111;
    font-size: 1.1rem;
    line-height: 1;
    letter-spacing: -0.22px;
    font-family: 'SaansMedium'; }
    .header__links a {
      color: #111;
      pointer-events: initial; }
      .header__links a:visited, .header__links a:active {
        color: #111 !important;
        text-decoration: none !important; }
    @media screen and (max-width: 991px) {
      .header__links {
        display: none; } }
  @media screen and (max-width: 991px) {
    .header {
      padding-top: 1.6rem; } }
  .header h1 a {
    pointer-events: initial; }
  .header__menu {
    position: absolute;
    right: 1.5rem;
    display: flex;
    top: 2rem;
    z-index: 12;
    pointer-events: initial; }
    @media screen and (max-width: 1500px) {
      .header__menu {
        font-size: 1.5rem; } }
    @media screen and (max-width: 991px) {
      .header__menu {
        top: 1.4rem; } }
    .header__menu a {
      color: #A9A9A9;
      display: flex;
      align-items: center;
      font-family: 'TimesNow';
      font-size: 1.5rem;
      -webkit-transition: color 0.3s cubic-bezier(0.15, 0.9, 0.34, 0.95);
      -moz-transition: color 0.3s cubic-bezier(0.15, 0.9, 0.34, 0.95);
      -ms-transition: color 0.3s cubic-bezier(0.15, 0.9, 0.34, 0.95);
      -o-transition: color 0.3s cubic-bezier(0.15, 0.9, 0.34, 0.95);
      transition: color 0.3s cubic-bezier(0.15, 0.9, 0.34, 0.95); }
      .header__menu a path {
        -webkit-transition: fill 0.3s cubic-bezier(0.15, 0.9, 0.34, 0.95);
        -moz-transition: fill 0.3s cubic-bezier(0.15, 0.9, 0.34, 0.95);
        -ms-transition: fill 0.3s cubic-bezier(0.15, 0.9, 0.34, 0.95);
        -o-transition: fill 0.3s cubic-bezier(0.15, 0.9, 0.34, 0.95);
        transition: fill 0.3s cubic-bezier(0.15, 0.9, 0.34, 0.95); }
      .header__menu a span {
        margin-left: 1rem; }
      @media screen and (max-width: 991px) {
        .header__menu a {
          font-size: 1.4rem;
          letter-spacing: -0.5px; } }
      .header__menu a:hover {
        color: #000; }
        .header__menu a:hover path {
          fill: #000; }
    .header__menu__work svg {
      opacity: 0;
      visibility: hidden;
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
      transform: rotate(-45deg);
      -webkit-transition: all 1s cubic-bezier(0.15, 0.9, 0.34, 0.95);
      -moz-transition: all 1s cubic-bezier(0.15, 0.9, 0.34, 0.95);
      -ms-transition: all 1s cubic-bezier(0.15, 0.9, 0.34, 0.95);
      -o-transition: all 1s cubic-bezier(0.15, 0.9, 0.34, 0.95);
      transition: all 1s cubic-bezier(0.15, 0.9, 0.34, 0.95); }
    .header__menu.case-study .header__menu__work svg {
      opacity: 1;
      visibility: visible;
      -webkit-transform: rotate(0);
      -moz-transform: rotate(0);
      -ms-transform: rotate(0);
      -o-transform: rotate(0);
      transform: rotate(0); }
    .header__menu.work-menu .header__menu__work {
      color: #000; }
  .header.nopointer h1 a {
    pointer-events: none; }
  .header.nopointer .header__menu {
    pointer-events: none; }

.menu {
  position: fixed;
  bottom: 4vh;
  left: 0;
  right: 0;
  margin: auto;
  border-radius: 33px;
  height: 4.8rem;
  z-index: 15;
  width: 9.8rem;
  overflow: hidden;
  background-color: #fff;
  opacity: 0;
  -webkit-transition: transform 1s cubic-bezier(0.15, 0.9, 0.34, 0.95);
  -moz-transition: transform 1s cubic-bezier(0.15, 0.9, 0.34, 0.95);
  -ms-transition: transform 1s cubic-bezier(0.15, 0.9, 0.34, 0.95);
  -o-transition: transform 1s cubic-bezier(0.15, 0.9, 0.34, 0.95);
  transition: transform 1s cubic-bezier(0.15, 0.9, 0.34, 0.95);
  transform-origin: bottom center; }
  .menu.hide {
    -webkit-transform: translateY(10rem);
    -moz-transform: translateY(10rem);
    -ms-transform: translateY(10rem);
    -o-transform: translateY(10rem);
    transform: translateY(10rem); }
  @media screen and (max-width: 991px) {
    .menu {
      background-color: transparent; } }
  .menu .navigation {
    height: 100%; }
  .menu .navigation__item {
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 1.4rem;
    letter-spacing: -0.05px;
    width: 100%;
    justify-content: center;
    -webkit-transition: background-color 0.4s cubic-bezier(0.15, 0.9, 0.34, 0.95);
    -moz-transition: background-color 0.4s cubic-bezier(0.15, 0.9, 0.34, 0.95);
    -ms-transition: background-color 0.4s cubic-bezier(0.15, 0.9, 0.34, 0.95);
    -o-transition: background-color 0.4s cubic-bezier(0.15, 0.9, 0.34, 0.95);
    transition: background-color 0.4s cubic-bezier(0.15, 0.9, 0.34, 0.95); }
    .menu .navigation__item.work-item {
      background-color: #000;
      color: #A9A9A9; }
    .menu .navigation__item .text {
      height: 2.1rem;
      overflow: hidden;
      width: 4.2rem;
      -webkit-transition: all 1s cubic-bezier(0.76, 0, 0.24, 1);
      -moz-transition: all 1s cubic-bezier(0.76, 0, 0.24, 1);
      -ms-transition: all 1s cubic-bezier(0.76, 0, 0.24, 1);
      -o-transition: all 1s cubic-bezier(0.76, 0, 0.24, 1);
      transition: all 1s cubic-bezier(0.76, 0, 0.24, 1); }
      .menu .navigation__item .text span {
        display: block;
        -webkit-transition: all 1s cubic-bezier(0.76, 0, 0.24, 1);
        -moz-transition: all 1s cubic-bezier(0.76, 0, 0.24, 1);
        -ms-transition: all 1s cubic-bezier(0.76, 0, 0.24, 1);
        -o-transition: all 1s cubic-bezier(0.76, 0, 0.24, 1);
        transition: all 1s cubic-bezier(0.76, 0, 0.24, 1); }
        .menu .navigation__item .text span:last-child {
          width: 8rem; }
    .menu .navigation__item .arrow {
      width: 1.25rem;
      height: 1.25rem;
      display: inline-block;
      position: relative;
      margin-left: 0.2rem;
      -webkit-transform: rotate(90deg) translateZ(0);
      -moz-transform: rotate(90deg) translateZ(0);
      -ms-transform: rotate(90deg) translateZ(0);
      -o-transform: rotate(90deg) translateZ(0);
      transform: rotate(90deg) translateZ(0); }
      .menu .navigation__item .arrow.top span:nth-child(4) {
        transform: rotate(-45deg);
        transition: transform 2s cubic-bezier(0.15, 0.9, 0.34, 0.95) 1s; }
      .menu .navigation__item .arrow.top span:nth-child(5) {
        transform: rotate(45deg);
        transition: transform 2s cubic-bezier(0.15, 0.9, 0.34, 0.95) 1s; }
      .menu .navigation__item .arrow.bottom span:nth-child(1) {
        transform: rotate(-45deg);
        transition: transform 2s cubic-bezier(0.15, 0.9, 0.34, 0.95) 1s; }
      .menu .navigation__item .arrow.bottom span:nth-child(2) {
        transform: rotate(45deg);
        transition: transform 2s cubic-bezier(0.15, 0.9, 0.34, 0.95) 1s; }
      .menu .navigation__item .arrow span {
        position: absolute;
        height: .1rem;
        background-color: #BDBBB6;
        transition: transform 1s cubic-bezier(0.15, 0.9, 0.34, 0.95); }
        .menu .navigation__item .arrow span:nth-child(1), .menu .navigation__item .arrow span:nth-child(2), .menu .navigation__item .arrow span:nth-child(4), .menu .navigation__item .arrow span:nth-child(5) {
          width: .625rem;
          top: .625rem; }
        .menu .navigation__item .arrow span:nth-child(1) {
          right: 0;
          transform-origin: bottom right; }
        .menu .navigation__item .arrow span:nth-child(2) {
          right: 0;
          transform-origin: top right; }
        .menu .navigation__item .arrow span:nth-child(3) {
          width: 1.25rem;
          top: .625rem; }
        .menu .navigation__item .arrow span:nth-child(4) {
          left: 0;
          transform-origin: bottom left; }
        .menu .navigation__item .arrow span:nth-child(5) {
          left: 0;
          transform-origin: top left; }
    .menu .navigation__item.translate .text span:first-child {
      margin-top: -2.1rem; }
    .menu .navigation__item.translated .text {
      width: 8rem; }
      .menu .navigation__item.translated .text span:first-child {
        margin-top: -4.2rem; }
  @media screen and (min-width: 992px) {
    .menu:hover {
      -webkit-transform: scale(1.2);
      -moz-transform: scale(1.2);
      -ms-transform: scale(1.2);
      -o-transform: scale(1.2);
      transform: scale(1.2); }
      .menu:hover .navigation__item {
        background-color: #222; } }

gl-wave-effect {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  z-index: 1; }

.in-wave header.header {
  opacity: 1 !important; }

.in-wave .home__content {
  opacity: 1 !important;
  transform: scale(1) !important; }

.page.home {
  padding-top: 0;
  height: 100vh;
  overflow: hidden; }
  .page.home #lottie {
    width: 120%;
    height: 120%;
    display: block;
    overflow: hidden;
    transform: translate3d(0, 0, 0);
    text-align: center;
    opacity: 1;
    position: fixed;
    top: -10%;
    left: -10%;
    pointer-events: none;
    z-index: 2; }
    .page.home #lottie svg g:first-child rect {
      display: none; }

.home:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #000;
  opacity: 0;
  pointer-events: none;
  z-index: 2; }

.home.fade-black:after {
  opacity: 1;
  -webkit-transition: opacity 3s cubic-bezier(0.15, 0.9, 0.34, 0.95) 0.2s;
  -moz-transition: opacity 3s cubic-bezier(0.15, 0.9, 0.34, 0.95) 0.2s;
  -ms-transition: opacity 3s cubic-bezier(0.15, 0.9, 0.34, 0.95) 0.2s;
  -o-transition: opacity 3s cubic-bezier(0.15, 0.9, 0.34, 0.95) 0.2s;
  transition: opacity 3s cubic-bezier(0.15, 0.9, 0.34, 0.95) 0.2s; }

.home__content {
  height: 100%;
  opacity: 0; }
  .home__content__head {
    display: flex;
    height: calc(36vh - 1.5rem);
    align-items: center;
    position: relative;
    justify-content: center; }
    .home__content__head .design {
      position: absolute;
      font-family: 'TimesNow';
      font-size: 1.3rem;
      line-height: 1;
      color: rgba(0, 0, 0, 0.85);
      top: 2.4rem;
      left: 50%;
      -webkit-transform: translateX(-50%);
      -moz-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      -o-transform: translateX(-50%);
      transform: translateX(-50%); }
      @media screen and (max-width: 991px) {
        .home__content__head .design {
          font-size: 1.2rem;
          top: 2rem; } }
    .home__content__head .content {
      text-align: center; }
      .home__content__head .content h2 {
        font-family: 'TimesNow';
        font-size: 3.7rem;
        letter-spacing: -0.1rem;
        line-height: 1;
        margin-top: 0.6rem;
        font-weight: 300; }
        @media screen and (max-width: 991px) {
          .home__content__head .content h2 {
            font-size: 2.4rem; } }
      @media screen and (max-width: 991px) {
        .home__content__head .content img {
          width: 4.5rem; } }
    .home__content__head .home-play {
      background: transparent;
      border: none;
      appearance: none;
      padding: 0;
      position: absolute;
      bottom: 2rem;
      left: 0;
      cursor: pointer;
      font-size: 1.5rem;
      line-height: 1;
      color: #A9A9A9;
      font-family: 'TimesNow'; }
      @media screen and (min-width: 992px) {
        .home__content__head .home-play {
          -webkit-transition: color 0.4s cubic-bezier(0.15, 0.9, 0.34, 0.95);
          -moz-transition: color 0.4s cubic-bezier(0.15, 0.9, 0.34, 0.95);
          -ms-transition: color 0.4s cubic-bezier(0.15, 0.9, 0.34, 0.95);
          -o-transition: color 0.4s cubic-bezier(0.15, 0.9, 0.34, 0.95);
          transition: color 0.4s cubic-bezier(0.15, 0.9, 0.34, 0.95); }
          .home__content__head .home-play:hover {
            color: #000; } }
      @media screen and (max-width: 991px) {
        .home__content__head .home-play {
          bottom: 2.4rem; } }
    .home__content__head .home-switch {
      background: transparent;
      border: none;
      cursor: pointer;
      height: 3.2rem;
      width: 3.2rem;
      position: absolute;
      right: -0.4rem;
      bottom: 2rem;
      appearance: none;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      z-index: 4; }
      @media screen and (max-width: 1500px) {
        .home__content__head .home-switch {
          height: 2.8rem;
          width: 2.8rem; } }
      @media screen and (max-width: 991px) {
        .home__content__head .home-switch {
          height: 2.6rem;
          width: 2.6rem;
          bottom: 2rem; } }
      .home__content__head .home-switch svg {
        display: block; }
        .home__content__head .home-switch svg path {
          -webkit-transition: fill 2.5s cubic-bezier(0.15, 0.9, 0.34, 0.95);
          -moz-transition: fill 2.5s cubic-bezier(0.15, 0.9, 0.34, 0.95);
          -ms-transition: fill 2.5s cubic-bezier(0.15, 0.9, 0.34, 0.95);
          -o-transition: fill 2.5s cubic-bezier(0.15, 0.9, 0.34, 0.95);
          transition: fill 2.5s cubic-bezier(0.15, 0.9, 0.34, 0.95); }
        @media screen and (max-width: 991px) {
          .home__content__head .home-switch svg {
            height: 1.2rem;
            width: 1.2rem; } }
      .home__content__head .home-switch.close svg path {
        fill: #000; }
    .home__content__head h1 {
      font-size: 5.4rem;
      letter-spacing: -1.5px;
      line-height: 1;
      font-family: 'Review';
      display: flex; }
      .home__content__head h1 span {
        display: block;
        margin-right: 1rem; }
      @media screen and (max-width: 1500px) {
        .home__content__head h1 {
          font-size: 4.6rem; } }
      @media screen and (max-width: 991px) {
        .home__content__head h1 {
          font-size: 3.4rem; }
          .home__content__head h1 span {
            margin-right: 0.5rem; } }
  .home__content__video {
    height: 64vh;
    overflow: hidden;
    position: absolute;
    bottom: 1.5rem;
    width: calc(100% - 3rem);
    left: 1.5rem; }
    .home__content__video video {
      display: block;
      height: 100vh;
      width: 100%;
      object-fit: cover;
      object-position: center; }

.home__info {
  padding: 15vh 0; }
  .home__info h2 {
    font-size: 5.2rem;
    text-align: center;
    letter-spacing: -1.6px;
    width: 900px;
    max-width: 80%;
    font-family: 'Saans';
    line-height: 1.4;
    margin: 0 auto; }
    @media screen and (max-width: 991px) {
      .home__info h2 {
        font-size: 3rem;
        letter-spacing: -1px;
        width: 80%; } }

.studio__video {
  margin-top: 5vh;
  height: 100vh;
  width: 100%;
  opacity: 0;
  -webkit-transform: translateY(20vh);
  -moz-transform: translateY(20vh);
  -ms-transform: translateY(20vh);
  -o-transform: translateY(20vh);
  transform: translateY(20vh); }
  .studio__video video {
    display: block;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center; }

.loop {
  height: 100vh;
  padding-top: 17vh;
  overflow: hidden; }

*::-webkit-scrollbar {
  display: none; }

.work {
  padding-top: 0; }
  .work:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #000;
    opacity: 0;
    pointer-events: none;
    z-index: 2; }
  .work.fade-black:before {
    opacity: 1;
    -webkit-transition: opacity 3s cubic-bezier(0.15, 0.9, 0.34, 0.95) 0.2s;
    -moz-transition: opacity 3s cubic-bezier(0.15, 0.9, 0.34, 0.95) 0.2s;
    -ms-transition: opacity 3s cubic-bezier(0.15, 0.9, 0.34, 0.95) 0.2s;
    -o-transition: opacity 3s cubic-bezier(0.15, 0.9, 0.34, 0.95) 0.2s;
    transition: opacity 3s cubic-bezier(0.15, 0.9, 0.34, 0.95) 0.2s; }
  .work .title {
    position: relative;
    font-family: 'TimesNow';
    font-size: 1.5rem;
    letter-spacing: 0; }
  .work gl-wave-effect {
    position: fixed;
    z-index: 0; }
  .work .title-wrapper {
    display: flex;
    height: 32.5vh;
    align-items: flex-end;
    position: relative; }
    @media screen and (max-width: 991px) {
      .work .title-wrapper {
        height: 30rem; } }
    .work .title-wrapper .content {
      position: absolute;
      top: 50%;
      left: 0;
      width: 87.1rem;
      -webkit-transform: translate(0, -50%);
      -moz-transform: translate(0, -50%);
      -ms-transform: translate(0, -50%);
      -o-transform: translate(0, -50%);
      transform: translate(0, -50%); }
      @media screen and (max-width: 991px) {
        .work .title-wrapper .content {
          width: 100%; } }
      .work .title-wrapper .content h2 {
        font-family: 'TimesNow';
        font-size: 4.2rem;
        letter-spacing: -0.084rem;
        line-height: 4.6rem; }
        @media screen and (max-width: 991px) {
          .work .title-wrapper .content h2 {
            font-size: 2.4rem;
            line-height: 2.6rem;
            max-width: 34rem;
            letter-spacing: -0.06rem; } }
  .work:after {
    content: '';
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #fff;
    z-index: 20;
    pointer-events: none; }
    @media screen and (max-width: 991px) {
      .work:after {
        display: none; } }
  .work.ready:after {
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 1s cubic-bezier(0.15, 0.9, 0.34, 0.95) 0.2s;
    -moz-transition: all 1s cubic-bezier(0.15, 0.9, 0.34, 0.95) 0.2s;
    -ms-transition: all 1s cubic-bezier(0.15, 0.9, 0.34, 0.95) 0.2s;
    -o-transition: all 1s cubic-bezier(0.15, 0.9, 0.34, 0.95) 0.2s;
    transition: all 1s cubic-bezier(0.15, 0.9, 0.34, 0.95) 0.2s; }
  .work.notransition:after {
    display: none; }
  .work .grid {
    display: flex;
    padding: 2rem 0 15rem 0;
    flex-wrap: wrap; }
    @media screen and (max-width: 991px) {
      .work .grid {
        padding: 2rem 0 0 0; } }
    .work .grid__item {
      position: relative; }
      .work .grid__item__link {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: 5; }
      .work .grid__item .image {
        width: 100%;
        position: relative;
        overflow: hidden; }
      .work .grid__item .img-wrap {
        height: 100%;
        width: 100%;
        -webkit-transition: transform 3s cubic-bezier(0.15, 0.9, 0.34, 0.95);
        -moz-transition: transform 3s cubic-bezier(0.15, 0.9, 0.34, 0.95);
        -ms-transition: transform 3s cubic-bezier(0.15, 0.9, 0.34, 0.95);
        -o-transition: transform 3s cubic-bezier(0.15, 0.9, 0.34, 0.95);
        transition: transform 3s cubic-bezier(0.15, 0.9, 0.34, 0.95); }
      .work .grid__item .img {
        height: 100%;
        background-color: #D9D9D9;
        opacity: 1;
        position: relative;
        z-index: 1; }
      @media screen and (min-width: 992px) {
        .work .grid__item:hover .img-wrap {
          -webkit-transform: scale(1.1);
          -moz-transform: scale(1.1);
          -ms-transform: scale(1.1);
          -o-transform: scale(1.1);
          transform: scale(1.1); } }
      .work .grid__item .transition {
        position: absolute;
        background-color: #fff;
        top: 0;
        left: 0;
        padding-top: 12rem;
        width: 100%;
        height: 100%;
        overflow: hidden; }
        @media screen and (max-width: 991px) {
          .work .grid__item .transition {
            padding-top: 10rem; } }
        .work .grid__item .transition .head {
          display: flex;
          justify-content: space-between;
          align-items: center;
          text-align: center;
          width: 100%;
          height: calc(65vh - 24rem); }
          @media screen and (max-width: 991px) {
            .work .grid__item .transition .head {
              flex-wrap: wrap;
              justify-content: center;
              height: calc(80vh - 24rem); } }
          .work .grid__item .transition .head .content img {
            display: table;
            margin: 0 auto; }
            @media screen and (max-width: 991px) {
              .work .grid__item .transition .head .content img {
                width: 4.5rem; } }
          .work .grid__item .transition .head h1 {
            font-family: 'TimesNow';
            font-size: 13.2rem;
            letter-spacing: -0.6px;
            line-height: 1;
            position: relative;
            color: #1E1E1E; }
            .work .grid__item .transition .head h1 .new {
              font-size: 1rem;
              border-radius: 9px;
              border: 1px solid #000;
              padding: 0 7px;
              letter-spacing: -0.05px;
              display: inline-flex;
              align-items: center;
              height: 18px;
              position: absolute;
              font-family: 'Saans';
              text-transform: uppercase;
              top: 2rem;
              margin-left: 2rem; }
            @media screen and (max-width: 991px) {
              .work .grid__item .transition .head h1 {
                font-size: 4.8rem;
                text-align: center;
                line-height: 2.8rem; }
                .work .grid__item .transition .head h1 > span:not(.new) {
                  display: block; }
                .work .grid__item .transition .head h1 .new {
                  position: relative;
                  top: auto;
                  margin-left: 0; } }
      .work .grid__item .caption {
        display: flex;
        justify-content: space-between;
        padding-top: 1.4rem; }
        @media screen and (max-width: 991px) {
          .work .grid__item .caption {
            align-items: center; } }
        .work .grid__item .caption h4 {
          font-size: 1.2rem; }
          @media screen and (max-width: 991px) {
            .work .grid__item .caption h4 {
              font-size: 1.6rem; } }
          .work .grid__item .caption h4 span {
            font-size: 9px;
            color: rgba(0, 0, 0, 0.5);
            margin-left: 1.6rem;
            letter-spacing: -0.045px;
            text-transform: uppercase; }
            @media screen and (max-width: 991px) {
              .work .grid__item .caption h4 span {
                display: none; } }
        .work .grid__item .caption p {
          line-height: 1.2; }
          @media screen and (max-width: 991px) {
            .work .grid__item .caption p {
              display: none; } }
        .work .grid__item .caption .category {
          color: rgba(0, 0, 0, 0.5); }
        .work .grid__item .caption .new {
          font-size: 1rem;
          border-radius: 9px;
          border: 1px solid #000;
          padding: 0 7px;
          letter-spacing: -0.05px;
          display: inline-flex;
          align-items: center;
          height: 18px; }
      .work .grid__item:first-child {
        width: 56.7777vw; }
        .work .grid__item:first-child .image {
          height: 104.4vh; }
        @media screen and (max-width: 991px) {
          .work .grid__item:first-child {
            width: 100%; }
            .work .grid__item:first-child .image {
              height: 35vh; } }
      .work .grid__item:nth-child(4) {
        width: 30vw; }
        .work .grid__item:nth-child(4) .image {
          height: 50vh; }
        @media screen and (max-width: 991px) {
          .work .grid__item:nth-child(4) {
            width: 100%; }
            .work .grid__item:nth-child(4) .image {
              height: 35vh; } }
    .work .grid .group {
      flex-grow: 1;
      width: auto; }
      .work .grid .group .grid__item:nth-child(1) {
        margin-left: 9.89vw;
        width: 23.4375vw; }
        .work .grid .group .grid__item:nth-child(1) .image {
          height: 24.72vh; }
      .work .grid .group .grid__item:nth-child(2) {
        margin-top: 11.0185185185vh;
        margin-left: auto;
        width: 23.4375vw; }
        .work .grid .group .grid__item:nth-child(2) .image {
          height: 65.648vh; }
      @media screen and (max-width: 991px) {
        .work .grid .group .grid__item:nth-child(1) {
          margin-left: 0;
          width: 100%;
          margin-top: 10vh;
          margin-bottom: 10vh !important; }
          .work .grid .group .grid__item:nth-child(1) .image {
            height: 35vh; }
        .work .grid .group .grid__item:nth-child(2) {
          margin-top: 10vh;
          margin-left: auto;
          width: 100%; }
          .work .grid .group .grid__item:nth-child(2) .image {
            height: 35vh; } }
    .work .grid .center {
      padding-top: 10rem;
      display: flex;
      justify-content: center;
      width: 100%; }
      @media screen and (max-width: 991px) {
        .work .grid .center {
          flex-wrap: wrap;
          padding-top: 0; } }
      .work .grid .center .grid__item {
        width: 23.4375vw; }
        @media screen and (max-width: 991px) {
          .work .grid .center .grid__item {
            width: 100%; } }
        .work .grid .center .grid__item:nth-child(1) .image {
          height: 48.24vh; }
          @media screen and (max-width: 991px) {
            .work .grid .center .grid__item:nth-child(1) .image {
              height: 35vh; } }
        .work .grid .center .grid__item:nth-child(2) {
          margin: 0 5.72916666667vw; }
          .work .grid .center .grid__item:nth-child(2) .image {
            height: 26.6666666667vh; }
          @media screen and (max-width: 991px) {
            .work .grid .center .grid__item:nth-child(2) {
              margin: 10vh 0; }
              .work .grid .center .grid__item:nth-child(2) .image {
                height: 35vh; } }
        .work .grid .center .grid__item:nth-child(3) .image {
          height: 69.9074074074vh; }
          @media screen and (max-width: 991px) {
            .work .grid .center .grid__item:nth-child(3) .image {
              height: 35vh; } }

@media screen and (max-width: 991px) {
  .grid__item {
    margin: 5vh 0 !important; }
    .grid__item[data-id="1"] {
      margin-top: 0 !important; }
  .anim-mobile {
    -webkit-transform: translate3d(0, 14rem, 0);
    -moz-transform: translate3d(0, 14rem, 0);
    -ms-transform: translate3d(0, 14rem, 0);
    -o-transform: translate3d(0, 14rem, 0);
    transform: translate3d(0, 14rem, 0);
    opacity: 0; }
    .anim-mobile img {
      -webkit-transform: scale(1.2);
      -moz-transform: scale(1.2);
      -ms-transform: scale(1.2);
      -o-transform: scale(1.2);
      transform: scale(1.2); }
    .anim-mobile.anim {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      -moz-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
      -o-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      -webkit-transition: all 1.5s cubic-bezier(0.15, 0.9, 0.34, 0.95);
      -moz-transition: all 1.5s cubic-bezier(0.15, 0.9, 0.34, 0.95);
      -ms-transition: all 1.5s cubic-bezier(0.15, 0.9, 0.34, 0.95);
      -o-transition: all 1.5s cubic-bezier(0.15, 0.9, 0.34, 0.95);
      transition: all 1.5s cubic-bezier(0.15, 0.9, 0.34, 0.95); }
      .anim-mobile.anim img {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
        -webkit-transition: all 1.5s cubic-bezier(0.15, 0.9, 0.34, 0.95);
        -moz-transition: all 1.5s cubic-bezier(0.15, 0.9, 0.34, 0.95);
        -ms-transition: all 1.5s cubic-bezier(0.15, 0.9, 0.34, 0.95);
        -o-transition: all 1.5s cubic-bezier(0.15, 0.9, 0.34, 0.95);
        transition: all 1.5s cubic-bezier(0.15, 0.9, 0.34, 0.95); }
      .anim-mobile.anim.notransition {
        -webkit-transition: none;
        -moz-transition: none;
        -ms-transition: none;
        -o-transition: none;
        transition: none; }
        .anim-mobile.anim.notransition img {
          -webkit-transition: none;
          -moz-transition: none;
          -ms-transition: none;
          -o-transition: none;
          transition: none; }
  .no-anim-mobile .anim-mobile {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
    .no-anim-mobile .anim-mobile img {
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      -o-transform: scale(1);
      transform: scale(1); } }

.case {
  background-color: #fff;
  padding-top: 12rem;
  position: relative; }
  @media screen and (max-width: 991px) {
    .case {
      padding-top: 10rem; } }
  .case:before {
    content: '';
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #fff;
    z-index: 20;
    pointer-events: none; }
  .case.ready:before {
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.2s cubic-bezier(0.15, 0.9, 0.34, 0.95) 0.2s;
    -moz-transition: all 0.2s cubic-bezier(0.15, 0.9, 0.34, 0.95) 0.2s;
    -ms-transition: all 0.2s cubic-bezier(0.15, 0.9, 0.34, 0.95) 0.2s;
    -o-transition: all 0.2s cubic-bezier(0.15, 0.9, 0.34, 0.95) 0.2s;
    transition: all 0.2s cubic-bezier(0.15, 0.9, 0.34, 0.95) 0.2s; }
  .case__details {
    left: 0;
    width: 100%;
    position: absolute;
    top: 65vh;
    -webkit-transform: translateY(calc(-100% - 1.4rem));
    -moz-transform: translateY(calc(-100% - 1.4rem));
    -ms-transform: translateY(calc(-100% - 1.4rem));
    -o-transform: translateY(calc(-100% - 1.4rem));
    transform: translateY(calc(-100% - 1.4rem));
    opacity: 0; }
    .case__details .container {
      display: flex;
      align-items: center; }
      .case__details .container div:first-child {
        width: 35%;
        letter-spacing: -0.5px;
        font-size: 1.1rem; }
      .case__details .container div:nth-child(2) {
        font-family: 'SaansMedium';
        letter-spacing: -0.5px; }
      .case__details .container div:last-child {
        font-size: 1.1rem;
        margin-left: auto;
        letter-spacing: -0.2px; }
      .case__details .container a {
        color: #1E1E1E; }
    @media screen and (max-width: 991px) {
      .case__details {
        top: 80vh;
        -webkit-transform: translateY(-150%);
        -moz-transform: translateY(-150%);
        -ms-transform: translateY(-150%);
        -o-transform: translateY(-150%);
        transform: translateY(-150%); }
        .case__details .container {
          flex-wrap: wrap;
          justify-content: space-between; }
          .case__details .container div:first-child {
            width: auto;
            margin-left: auto;
            text-align: right; }
          .case__details .container div:nth-child(2) {
            width: auto;
            font-size: 1.4rem; }
          .case__details .container div:last-child {
            display: none;
            font-size: 1.2rem;
            width: 100%;
            text-align: right;
            margin-top: 32vh; } }
  .case.notransition:before {
    display: none; }
  .case:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #000;
    opacity: 0;
    pointer-events: none; }
  .case.fade-black:after {
    opacity: 1;
    -webkit-transition: opacity 3s cubic-bezier(0.15, 0.9, 0.34, 0.95) 0.4s;
    -moz-transition: opacity 3s cubic-bezier(0.15, 0.9, 0.34, 0.95) 0.4s;
    -ms-transition: opacity 3s cubic-bezier(0.15, 0.9, 0.34, 0.95) 0.4s;
    -o-transition: opacity 3s cubic-bezier(0.15, 0.9, 0.34, 0.95) 0.4s;
    transition: opacity 3s cubic-bezier(0.15, 0.9, 0.34, 0.95) 0.4s; }
  .case__close {
    position: fixed;
    top: 2rem;
    right: 2rem;
    z-index: 11;
    color: #000;
    font-weight: 600; }
  .case__footer {
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center; }
    @media screen and (max-width: 991px) {
      .case__footer {
        height: 90vh;
        align-items: flex-start;
        padding-top: 30vh; } }
    .case__footer__bottom {
      display: flex;
      align-items: center;
      position: absolute;
      bottom: 1.4rem;
      left: 0;
      width: 100%; }
      @media screen and (max-width: 991px) {
        .case__footer__bottom {
          justify-content: space-between;
          bottom: 12.5rem; } }
      .case__footer__bottom > p {
        color: #A6A6A6;
        font-size: 1rem;
        font-family: 'SaansMedium';
        letter-spacing: -0.5px; }
        @media screen and (max-width: 991px) {
          .case__footer__bottom > p {
            display: none; } }
      .case__footer__bottom .links {
        color: #A9A9A9;
        font-size: 1.6rem;
        line-height: 1;
        position: absolute;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%);
        letter-spacing: -0.2px;
        font-family: 'TimesNow'; }
        .case__footer__bottom .links a {
          color: #A9A9A9;
          -webkit-transition: color 0.4s cubic-bezier(0.15, 0.9, 0.34, 0.95);
          -moz-transition: color 0.4s cubic-bezier(0.15, 0.9, 0.34, 0.95);
          -ms-transition: color 0.4s cubic-bezier(0.15, 0.9, 0.34, 0.95);
          -o-transition: color 0.4s cubic-bezier(0.15, 0.9, 0.34, 0.95);
          transition: color 0.4s cubic-bezier(0.15, 0.9, 0.34, 0.95); }
          .case__footer__bottom .links a:hover {
            color: #000; }
      .case__footer__bottom .next {
        margin-left: auto;
        color: #000;
        font-size: 1rem;
        line-height: 1;
        letter-spacing: -0.2px; }
        @media screen and (max-width: 991px) {
          .case__footer__bottom .next {
            display: none; } }
    .case__footer__main {
      text-align: center; }
      .case__footer__main > span {
        display: none; }
        @media screen and (max-width: 991px) {
          .case__footer__main > span {
            display: table;
            margin: 0 auto;
            color: #1E1E1E;
            text-transform: uppercase;
            font-family: 'SaansMedium';
            font-size: 1.1rem;
            letter-spacing: -0.5%; } }
      .case__footer__main a {
        text-transform: uppercase;
        display: inline-flex;
        align-items: center;
        font-family: 'Saans';
        font-size: 1.1rem;
        letter-spacing: -0.5%;
        line-height: 1;
        color: #1E1E1E;
        padding: 0 2.2rem;
        border-radius: 25px;
        border: 1px solid #000;
        height: 4rem;
        -webkit-transition: all 0.4s cubic-bezier(0.15, 0.9, 0.34, 0.95);
        -moz-transition: all 0.4s cubic-bezier(0.15, 0.9, 0.34, 0.95);
        -ms-transition: all 0.4s cubic-bezier(0.15, 0.9, 0.34, 0.95);
        -o-transition: all 0.4s cubic-bezier(0.15, 0.9, 0.34, 0.95);
        transition: all 0.4s cubic-bezier(0.15, 0.9, 0.34, 0.95); }
        @media screen and (max-width: 991px) {
          .case__footer__main a {
            height: 3rem;
            padding: 0 1.8rem; } }
        .case__footer__main a svg {
          display: block;
          margin-left: 0.6rem; }
          .case__footer__main a svg path {
            -webkit-transition: all 0.4s cubic-bezier(0.15, 0.9, 0.34, 0.95);
            -moz-transition: all 0.4s cubic-bezier(0.15, 0.9, 0.34, 0.95);
            -ms-transition: all 0.4s cubic-bezier(0.15, 0.9, 0.34, 0.95);
            -o-transition: all 0.4s cubic-bezier(0.15, 0.9, 0.34, 0.95);
            transition: all 0.4s cubic-bezier(0.15, 0.9, 0.34, 0.95); }
        @media screen and (min-width: 992px) {
          .case__footer__main a:hover {
            background-color: #000;
            color: #fff; }
            .case__footer__main a:hover svg path {
              stroke: #fff; } }
      .case__footer__main #logo-footer {
        width: 8rem;
        height: 1.4rem;
        display: table;
        margin: 0 auto; }
        @media screen and (max-width: 991px) {
          .case__footer__main #logo-footer {
            position: absolute;
            bottom: 3rem;
            width: 100%;
            height: 6.3rem;
            left: 0; } }
      .case__footer__main h2 {
        font-family: 'TimesNow';
        font-size: 4.2rem;
        line-height: 4.6rem;
        letter-spacing: -0.84px;
        color: #1E1E1E;
        width: 80rem;
        margin: 1rem 0 1.6rem 0; }
        @media screen and (max-width: 991px) {
          .case__footer__main h2 {
            font-size: 2rem;
            line-height: 2.4rem;
            width: 100%; } }
  .case .head {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 120vh;
    position: relative;
    align-items: center;
    -webkit-backface-visibility: hidden;
    height: calc(65vh - 24rem); }
    @media screen and (max-width: 1680px) {
      .case .head {
        margin-bottom: 122vh; } }
    .case .head .content img {
      display: table;
      margin: 0 auto; }
      @media screen and (max-width: 991px) {
        .case .head .content img {
          width: 4.5rem; } }
    @media screen and (max-width: 991px) {
      .case .head {
        flex-wrap: wrap;
        margin-bottom: 125vh;
        justify-content: center;
        height: calc(80vh - 24rem); } }
    .case .head h1 {
      font-family: 'TimesNow';
      font-size: 13.2rem;
      letter-spacing: -0.6px;
      line-height: 1;
      color: #1E1E1E;
      position: relative; }
      .case .head h1 .new {
        font-size: 1rem;
        border-radius: 9px;
        border: 1px solid #000;
        padding: 0 7px;
        letter-spacing: -0.05px;
        display: inline-flex;
        align-items: center;
        height: 18px;
        position: absolute;
        font-family: 'Saans';
        text-transform: uppercase;
        top: 2rem;
        margin-left: 2rem; }
      @media screen and (max-width: 991px) {
        .case .head h1 {
          font-size: 4.8rem;
          width: 100%;
          text-align: center;
          line-height: 2.8rem; }
          .case .head h1 > span:not(.new) {
            display: block; }
          .case .head h1 .new {
            position: relative;
            top: auto;
            margin-left: 0; } }
  .case .img {
    background-color: #D9D9D9;
    height: 100vh;
    position: absolute;
    top: 65vh;
    width: 100%;
    left: 0;
    right: 0;
    margin: auto; }
    @media screen and (max-width: 991px) {
      .case .img {
        top: 80vh; } }
  .case__intro {
    margin-bottom: 16rem;
    width: 48%;
    text-indent: 25%; }
    @media screen and (max-width: 991px) {
      .case__intro {
        width: 100%;
        text-align: left;
        margin-bottom: 8rem; } }
  .case__info {
    display: flex;
    padding: 19rem 0 4rem 0; }
    .case__info div {
      color: #0D0D0D;
      width: 24%;
      padding-right: 2%; }
      .case__info div p {
        font-size: .8vw;
        line-height: 1.1vw; }
      .case__info div:first-child {
        color: #5B5B5B;
        width: 52%;
        text-transform: uppercase; }
        .case__info div:first-child p {
          font-size: .8vw; }
    @media screen and (max-width: 991px) {
      .case__info {
        flex-wrap: wrap;
        padding-top: 8rem;
        padding-bottom: 8rem; }
        .case__info div {
          width: 100%;
          padding: 0; }
          .case__info div p {
            font-size: 1.4rem;
            line-height: 1.4rem; }
          .case__info div:first-child p {
            font-size: 1.2rem;
            margin-bottom: 2rem; } }
  .case__information {
    display: flex;
    padding: 2rem 0 6rem 0; }
    .case__information div {
      color: #0D0D0D;
      width: 48%; }
      .case__information div p {
        font-size: .88vw;
        line-height: 1.1vw; }
      .case__information div:first-child {
        color: #5B5B5B;
        width: 52%;
        text-transform: uppercase; }
        .case__information div:first-child p {
          font-size: .8vw; }
    @media screen and (max-width: 991px) {
      .case__information {
        flex-wrap: wrap;
        padding-top: 8rem;
        padding-bottom: 8rem; }
        .case__information div {
          width: 100%;
          padding: 0; }
          .case__information div p {
            font-size: 1.4rem;
            line-height: 1.4rem; }
          .case__information div:first-child p {
            font-size: 1.2rem;
            margin-bottom: 2rem; } }


/*# sourceMappingURL=/dist/index.css.map */