@import url("//hello.myfonts.net/count/3aa357");
* {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  -webkit-font-smoothing: antialiased; }

@font-face {
  font-family: 'Gilroy-ExtraBold';
  src: url("webfonts/3AA357_0_0.eot");
  src: url("webfonts/3AA357_0_0.eot?#iefix") format("embedded-opentype"), url("webfonts/3AA357_0_0.woff2") format("woff2"), url("webfonts/3AA357_0_0.woff") format("woff"), url("webfonts/3AA357_0_0.ttf") format("truetype"); }

@font-face {
  font-family: 'Manier-Light';
  src: url("webfonts/Manier-Light.eot");
  src: url("webfonts/Manier-Light.eot?#iefix") format("embedded-opentype"), url("webfonts/Manier-Light.svg#Manier-Light") format("svg"), url("webfonts/Manier-Light.ttf") format("truetype"), url("webfonts/Manier-Light.woff") format("woff"), url("webfonts/Manier-Light.woff2") format("woff2");
  font-weight: normal;
  font-style: normal; }

:root {
  --fg:   #000;
  --bg: #f2f2f2;
  --fg: #000;
  --bg: #000;
  --sp: #000;
  --hd: #000;
  --bd: #000;
  --sn: #000;
  --ic: #000;
  --fontA:  'Gilroy-ExtraBold';
  --fontB:  'Manier-Light'; }

h1, h2, h3 {
  font-weight: 100; }

p {
  font-size: 1.5rem;
  font-size: 1.2rem; }

img {
  width: 100%;
  height: auto;
  display: block; }

a {
  color: var(--fg);
  text-decoration: underline;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }

html {
  background: var(--bg);
  color: var(--fg);
  font-size: 3.5vw;
  line-height: 1.3;
  font-family: var(--fontB); }
  html body {
    background: var(--bg);
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s; }
  @media screen and (min-width: 50rem) {
    html #app {
      margin: 0 auto;
      padding: 0 0.4rem; } }
  @media screen and (min-width: 50rem) {
    html {
      font-size: 1.2vw; } }
  @media screen and (min-width: 80rem) {
    html {
      font-size: 0.9vw; } }

.container {
  max-width: 100rem;
  margin: 0 auto;
  padding: 0 2rem;
  position: relative; }

.hidden {
  display: none; }

header {
  padding: 0.5rem;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg);
  margin-bottom: 0.4rem;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s; }
  header:before {
    content: "";
    position: absolute;
    bottom: 0rem;
    left: 0.35rem;
    right: 0.35rem;
    height: 0.25rem;
    background: var(--fg);
    border-radius: 100rem; }
  @media screen and (min-width: 50rem) {
    header {
      position: relative;
      padding: 3rem 3rem 0.4rem; }
      header:before {
        display: none; } }
  header a {
    color: var(--fg);
    font-weight: 600;
    text-decoration: none;
    display: block; }
    header a svg {
      width: 100%;
      height: auto;
      display: block;
      fill: var(--sp);
      position: relative;
      z-index: 1;
      -webkit-perspective: 500; }
      header a svg path {
        opacity: 0;
        -webkit-transform: scale(0.7) rotate(-5deg);
        -ms-transform: scale(0.7) rotate(-5deg);
        transform: scale(0.7) rotate(-5deg);
        -webkit-transform-origin: center center;
        -ms-transform-origin: center center;
        transform-origin: center center;
        -webkit-transition: opacity .6s, -webkit-transform .6s;
        transition: opacity .6s, -webkit-transform .6s;
        -o-transition: opacity .6s, transform .6s;
        transition: opacity .6s, transform .6s;
        transition: opacity .6s, transform .6s, -webkit-transform .6s; }
        header a svg path:nth-of-type(1) {
          -webkit-transition-delay: 0.1s;
          -o-transition-delay: 0.1s;
          transition-delay: 0.1s; }
        header a svg path:nth-of-type(2) {
          -webkit-transition-delay: 0.2s;
          -o-transition-delay: 0.2s;
          transition-delay: 0.2s; }
        header a svg path:nth-of-type(3) {
          -webkit-transition-delay: 0.3s;
          -o-transition-delay: 0.3s;
          transition-delay: 0.3s; }
        header a svg path:nth-of-type(4) {
          -webkit-transition-delay: 0.4s;
          -o-transition-delay: 0.4s;
          transition-delay: 0.4s; }
        header a svg path:nth-of-type(5) {
          -webkit-transition-delay: 0.5s;
          -o-transition-delay: 0.5s;
          transition-delay: 0.5s; }
        header a svg path:nth-of-type(6) {
          -webkit-transition-delay: 0.6s;
          -o-transition-delay: 0.6s;
          transition-delay: 0.6s; }
        header a svg path:nth-of-type(7) {
          -webkit-transition-delay: 0.7s;
          -o-transition-delay: 0.7s;
          transition-delay: 0.7s; }
        header a svg path:nth-of-type(12) {
          -webkit-transition-delay: 0.5s;
          -o-transition-delay: 0.5s;
          transition-delay: 0.5s; }
        header a svg path:nth-of-type(8) {
          -webkit-transition-delay: 0.4s;
          -o-transition-delay: 0.4s;
          transition-delay: 0.4s; }
        header a svg path:nth-of-type(9) {
          -webkit-transition-delay: 0.3s;
          -o-transition-delay: 0.3s;
          transition-delay: 0.3s; }
        header a svg path:nth-of-type(10) {
          -webkit-transition-delay: 0.2s;
          -o-transition-delay: 0.2s;
          transition-delay: 0.2s; }
        header a svg path:nth-of-type(11) {
          -webkit-transition-delay: 0.1s;
          -o-transition-delay: 0.1s;
          transition-delay: 0.1s; }
        header a svg path:nth-of-type(1) {
          -webkit-transition-delay: 0.1s;
          -o-transition-delay: 0.1s;
          transition-delay: 0.1s; }
        header a svg path:nth-of-type(2) {
          -webkit-transition-delay: 0.2s;
          -o-transition-delay: 0.2s;
          transition-delay: 0.2s; }
        header a svg path:nth-of-type(3) {
          -webkit-transition-delay: 0.5s;
          -o-transition-delay: 0.5s;
          transition-delay: 0.5s; }
        header a svg path:nth-of-type(4) {
          -webkit-transition-delay: 0.4s;
          -o-transition-delay: 0.4s;
          transition-delay: 0.4s; }
        header a svg path:nth-of-type(5) {
          -webkit-transition-delay: 0.5s;
          -o-transition-delay: 0.5s;
          transition-delay: 0.5s; }
        header a svg path:nth-of-type(6) {
          -webkit-transition-delay: 0.3s;
          -o-transition-delay: 0.3s;
          transition-delay: 0.3s; }
        header a svg path:nth-of-type(7) {
          -webkit-transition-delay: 0.1s;
          -o-transition-delay: 0.1s;
          transition-delay: 0.1s; }
        header a svg path:nth-of-type(12) {
          -webkit-transition-delay: 0.5s;
          -o-transition-delay: 0.5s;
          transition-delay: 0.5s; }
        header a svg path:nth-of-type(8) {
          -webkit-transition-delay: 0.4s;
          -o-transition-delay: 0.4s;
          transition-delay: 0.4s; }
        header a svg path:nth-of-type(9) {
          -webkit-transition-delay: 0.7s;
          -o-transition-delay: 0.7s;
          transition-delay: 0.7s; }
        header a svg path:nth-of-type(10) {
          -webkit-transition-delay: 0.2s;
          -o-transition-delay: 0.2s;
          transition-delay: 0.2s; }
        header a svg path:nth-of-type(11) {
          -webkit-transition-delay: 0.1s;
          -o-transition-delay: 0.1s;
          transition-delay: 0.1s; }
      header a svg.active path {
        opacity: 1;
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1); }
      @media screen and (min-width: 50rem) {
        header a svg#lines path {
          opacity: 1 !important;
          stroke: #fff2d7;
          stroke-dasharray: 80;
          fill: none;
          stroke-width: 0.05rem;
          -webkit-transform: none;
          -ms-transform: none;
          transform: none;
          -webkit-transform-origin: center center;
          -ms-transform-origin: center center;
          transform-origin: center center;
          -webkit-transition: opacity .6s, stroke-dasharray 60s, -webkit-transform .6s;
          transition: opacity .6s, stroke-dasharray 60s, -webkit-transform .6s;
          -o-transition: opacity .6s, transform .6s, stroke-dasharray 60s;
          transition: opacity .6s, transform .6s, stroke-dasharray 60s;
          transition: opacity .6s, transform .6s, stroke-dasharray 60s, -webkit-transform .6s; }
          header a svg#lines path:nth-of-type(1) {
            -webkit-transition-delay: 0.1s;
            -o-transition-delay: 0.1s;
            transition-delay: 0.1s; }
          header a svg#lines path:nth-of-type(2) {
            -webkit-transition-delay: 0.2s;
            -o-transition-delay: 0.2s;
            transition-delay: 0.2s; }
          header a svg#lines path:nth-of-type(3) {
            -webkit-transition-delay: 0.5s;
            -o-transition-delay: 0.5s;
            transition-delay: 0.5s; }
          header a svg#lines path:nth-of-type(4) {
            -webkit-transition-delay: 0.4s;
            -o-transition-delay: 0.4s;
            transition-delay: 0.4s; }
          header a svg#lines path:nth-of-type(5) {
            -webkit-transition-delay: 0.5s;
            -o-transition-delay: 0.5s;
            transition-delay: 0.5s; }
          header a svg#lines path:nth-of-type(6) {
            -webkit-transition-delay: 0.3s;
            -o-transition-delay: 0.3s;
            transition-delay: 0.3s; }
          header a svg#lines path:nth-of-type(7) {
            -webkit-transition-delay: 0.1s;
            -o-transition-delay: 0.1s;
            transition-delay: 0.1s; }
          header a svg#lines path:nth-of-type(12) {
            -webkit-transition-delay: 0.5s;
            -o-transition-delay: 0.5s;
            transition-delay: 0.5s; }
          header a svg#lines path:nth-of-type(8) {
            -webkit-transition-delay: 0.4s;
            -o-transition-delay: 0.4s;
            transition-delay: 0.4s; }
          header a svg#lines path:nth-of-type(9) {
            -webkit-transition-delay: 0.7s;
            -o-transition-delay: 0.7s;
            transition-delay: 0.7s; }
          header a svg#lines path:nth-of-type(10) {
            -webkit-transition-delay: 0.2s;
            -o-transition-delay: 0.2s;
            transition-delay: 0.2s; }
          header a svg#lines path:nth-of-type(11) {
            -webkit-transition-delay: 0.1s;
            -o-transition-delay: 0.1s;
            transition-delay: 0.1s; }
        header a svg#lines.active path {
          stroke-dasharray: 700; } }
  header span {
    display: block;
    text-align: center;
    line-height: 1;
    opacity: 0;
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
    -webkit-transition: opacity .6s, -webkit-transform .6s;
    transition: opacity .6s, -webkit-transform .6s;
    -o-transition: opacity .6s, transform .6s;
    transition: opacity .6s, transform .6s;
    transition: opacity .6s, transform .6s, -webkit-transform .6s;
    -webkit-transition-delay: 1.5s;
    -o-transition-delay: 1.5s;
    transition-delay: 1.5s;
    font-size: 1.96rem;
    padding: 0.25rem 0 0.125rem;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    font-size: 1.1rem;
    font-weight: 600;
    position: relative;
    left: 0.15em; }
    @media screen and (min-width: 50rem) {
      header span {
        padding: 0.5rem 0 0.5rem;
        font-size: 3.3rem;
        margin-top: 0.3rem;
        font-weight: 100; } }
    header span.active {
      opacity: 1;
      -webkit-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1); }

@media screen and (min-width: 50rem) {
  main {
    padding: 0 3rem; } }

@media screen and (min-width: 50rem) {
  main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
    main section {
      -ms-flex-preferred-size: 50%;
      flex-basis: 50%; } }

@media screen and (min-width: 80rem) and (orientation: landscape) {
  main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
    main section {
      -ms-flex-preferred-size: 33.3%;
      flex-basis: 33.3%; } }

@media screen and (min-width: 80rem) and (orientation: portrait) {
  main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
    main section {
      -ms-flex-preferred-size: 50%;
      flex-basis: 50%; } }

section {
  margin-bottom: 0;
  padding: 0 0.35rem;
  opacity: 0;
  -webkit-transform: scale(0.9);
  -ms-transform: scale(0.9);
  transform: scale(0.9);
  -webkit-transition: opacity .6s, -webkit-transform .6s;
  transition: opacity .6s, -webkit-transform .6s;
  -o-transition: opacity .6s, transform .6s;
  transition: opacity .6s, transform .6s;
  transition: opacity .6s, transform .6s, -webkit-transform .6s;
  -webkit-transition-delay: 1s;
  -o-transition-delay: 1s;
  transition-delay: 1s; }
  section.enhance {
    margin-bottom: 1.5rem; }
  @media screen and (min-width: 50rem) {
    section {
      margin-bottom: 1.5rem; } }
  section.active {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1); }
  section .samples {
    position: relative;
    -webkit-filter: saturate(1.2);
    filter: saturate(1.2);
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 0.2rem; }
    @media screen and (min-width: 50rem) {
      section .samples {
        padding: 0; } }
    section .samples li {
      position: absolute;
      background: var(--bg);
      opacity: 0;
      -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
      transform: scale(1.1);
      -webkit-transition: all .3s;
      -o-transition: all .3s;
      transition: all .3s; }
      section .samples li.active {
        opacity: 1;
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1); }
      section .samples li a {
        display: block;
        position: relative;
        overflow: hidden; }
        section .samples li a:before {
          content: "";
          top: 0;
          left: 0;
          height: 100%;
          width: 100%;
          position: absolute;
          z-index: 1;
          mix-blend-mode: overlay;
          border-radius: 0.2rem; }
        section .samples li a img {
          width: 100%;
          height: auto;
          display: block; }
      section .samples li .instruction {
        position: absolute;
        bottom: 0.75rem;
        right: 0.5rem;
        font-family: var(--fontA);
        font-size: 0.9rem;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        background: var(--bg);
        color: var(--fg);
        color: #000;
        padding: 0.5rem 0.45rem 0.25rem 0.5rem;
        line-height: 1;
        mix-blend-mode: lighten;
        -webkit-box-shadow: 0 -0.25rem 0.5rem black;
        box-shadow: 0 -0.25rem 0.5rem black;
        border-radius: 0.2rem; }
  section .caption {
    padding: 0.5rem 0 0.6rem; }
    @media screen and (min-width: 50rem) {
      section .caption {
        padding: 0.5rem 0; } }
    section .caption h2 {
      font-size: 1.75rem;
      font-family: var(--fontA);
      font-weight: 100;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: start;
      -ms-flex-align: start;
      align-items: flex-start;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      line-height: 1;
      -webkit-font-smoothing: antialiased; }
      section .caption h2 span:nth-of-type(1) {
        letter-spacing: -0.04em;
        color: var(--hd); }
      section .caption h2 span:nth-of-type(2) {
        color: var(--sn); }
      section .caption h2 a {
        border: 0.1rem solid;
        text-decoration: none;
        line-height: 1;
        display: inline-block;
        border-radius: 100rem;
        padding: 0.25rem 0.5rem 0.125rem 0.7rem;
        letter-spacing: 0.125em;
        font-size: 1rem;
        margin-left: 0.1rem;
        text-transform: uppercase;
        vertical-align: middle; }
        section .caption h2 a.active {
          opacity: 0.5; }
      @media screen and (min-width: 50rem) {
        section .caption h2 {
          font-size: 3.5rem; }
          section .caption h2 span:nth-of-type(2) {
            font-size: 2rem; } }
    section .caption p {
      color: var(--bd);
      font-size: 1.3rem;
      -webkit-font-smoothing: auto; }
      @media screen and (min-width: 50rem) {
        section .caption p {
          width: 75%;
          text-align: justify;
          line-height: 1.4; } }
      section .caption p a {
        -webkit-font-smoothing: antialiased;
        color: var(--fg);
        display: inline-block;
        margin-top: 0.75rem;
        text-decoration: none;
        line-height: 1;
        font-weight: 600;
        border-bottom: 3px solid var(--fg);
        padding-bottom: 0.5rem;
        font-family: var(--fontA);
        font-weight: 100; }

footer {
  padding: 0rem 0.4rem 0.5rem 0.4rem;
  position: relative;
  margin-bottom: 1rem; }
  @media screen and (min-width: 50rem) {
    footer {
      margin-bottom: 1rem;
      padding: 3rem; } }
  footer h2 {
    font-size: 1.75rem;
    font-family: var(--fontA); }
  footer strong {
    font-weight: 100;
    display: block;
    font-family: var(--fontA);
    font-size: 1.75rem;
    color: var(--fg);
    -webkit-font-smoothing: antialiased; }
    @media screen and (min-width: 50rem) {
      footer strong {
        font-size: 3.5rem; } }
  footer p {
    color: var(--fg);
    -webkit-font-smoothing: auto;
    font-weight: 100;
    position: relative; }
    footer p:nth-of-type(1) {
      font-size: 1.96rem;
      text-align: justify;
      margin-bottom: 0.5rem;
      letter-spacing: -0.04em;
      padding: 1rem 0;
      line-height: 1.2;
      font-size: 1.5rem; }
      @media screen and (min-width: 50rem) {
        footer p:nth-of-type(1) {
          font-size: 1.96rem;
          padding: 3rem 0;
          margin-bottom: 2rem;
          line-height: 1.3; } }
      footer p:nth-of-type(1):before {
        content: "";
        position: absolute;
        top: 0rem;
        left: 0rem;
        right: 0rem;
        height: 0.25rem;
        background: var(--fg); }
      footer p:nth-of-type(1):after {
        content: "";
        position: absolute;
        bottom: 0rem;
        left: 0rem;
        right: 0rem;
        height: 0.25rem;
        background: var(--fg); }
    footer p:nth-of-type(2) {
      color: var(--bd);
      font-size: 1.3rem; }
      @media screen and (min-width: 50rem) {
        footer p:nth-of-type(2) {
          font-size: 2rem; } }
    @media screen and (min-width: 50rem) {
      footer p:nth-of-type(1) {
        font-size: 3rem;
        text-align: left; } }
  footer a {
    color: var(--bd);
    text-decoration: none;
    display: inline-block;
    line-height: 1;
    margin: 0.125rem 0; }
  footer svg {
    position: absolute;
    bottom: 0rem;
    right: 0rem;
    width: 5rem;
    height: auto; }
    footer svg polygon,
    footer svg path {
      fill: var(--ic); }