.fabric {
  padding: 3em; }
  .fabric ul {
    list-style: none;
    padding: 0;
    position: relative;
    height: 0;
    padding-top: 37%;
    margin: 0;
    --mouse-y: 0;
    --mouse-x: 0; }
    .fabric ul li {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
              clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
      cursor: url(../images/cursor-white.svg), auto; }
      .fabric ul li .background, .fabric ul li .model {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover; }
      .fabric ul li .model {
        width: 100%;
        height: 110%;
        position: absolute;
        top: -5%;
        left: 0%;
        -webkit-transform: translate(var(--mouse-x), var(--mouse-y));
                transform: translate(var(--mouse-x), var(--mouse-y)); }
      .fabric ul li .material {
        position: absolute;
        left: 6em;
        bottom: 1em;
        height: calc(100% - 2em);
        width: auto;
        -webkit-transform: translate(calc(var(--mouse-x) * -1), calc(var(--mouse-y) * -1));
                transform: translate(calc(var(--mouse-x) * -1), calc(var(--mouse-y) * -1)); }
      .fabric ul li h2 {
        font-family: 'Oswald', sans-serif;
        font-size: calc(var(--step-8) * 1.25);
        text-transform: uppercase;
        color: white;
        position: absolute;
        top: calc(50% - 0.5em);
        line-height: 1;
        width: 100%;
        text-align: center;
        margin: 0; }
      .fabric ul li .info {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow-y: scroll;
        scrollbar-width: none;
        background-color: white;
        pointer-events: none;
        --ease: 2s ease-in-out;
        --delay: 0s;
        -webkit-clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
                clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
        -webkit-transition: -webkit-clip-path var(--ease) var(--delay);
        transition: -webkit-clip-path var(--ease) var(--delay);
        transition: clip-path var(--ease) var(--delay);
        transition: clip-path var(--ease) var(--delay), -webkit-clip-path var(--ease) var(--delay);
        cursor: url(../images/cursor-black.svg), auto; }
        .fabric ul li .info h2 {
          color: black;
          width: auto;
          font-size: calc(var(--step-8) * 1.5);
          top: 4vw;
          left: 4vw;
          --delay: 1.6s
                ; }
        .fabric ul li .info p {
          position: absolute;
          top: calc(4vw + (var(--step-8) * 1.5));
          width: 75%;
          left: 20%;
          --delay: 1.7s; }
        .fabric ul li .info h2, .fabric ul li .info p {
          -webkit-transform: translateY(2rem);
                  transform: translateY(2rem);
          opacity: 0;
          -webkit-transition: opacity var(--ease) var(--delay), -webkit-transform var(--ease) var(--delay);
          transition: opacity var(--ease) var(--delay), -webkit-transform var(--ease) var(--delay);
          transition: transform var(--ease) var(--delay), opacity var(--ease) var(--delay);
          transition: transform var(--ease) var(--delay), opacity var(--ease) var(--delay), -webkit-transform var(--ease) var(--delay); }
        .fabric ul li .info.show {
          pointer-events: all;
          -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
                  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); }
          .fabric ul li .info.show h2, .fabric ul li .info.show p {
            -webkit-transform: translateY(0);
                    transform: translateY(0);
            opacity: 1; }
      .fabric ul li .link {
        background-color: black;
        position: absolute;
        bottom: 2em;
        left: 2em;
        padding: 1em;
        font-family: 'Oswald', sans-serif;
        text-transform: uppercase;
        display: -webkit-box;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
                flex-flow: row nowrap;
        color: white;
        text-decoration: none; }
        .fabric ul li .link p {
          margin: 0; }
        .fabric ul li .link svg {
          height: 1.4em;
          width: auto;
          margin-right: 0.5em; }
  .fabric nav {
    width: calc(100% - 1em);
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
            flex-flow: row nowrap;
    -webkit-box-pack: justify;
            justify-content: space-between;
    -webkit-box-align: stretch;
            align-items: stretch;
    padding: 0 0 0 1em; }
    .fabric nav button {
      -webkit-appearance: none;
      border: none;
      background-color: transparent;
      border-radius: 0px;
      padding: 0;
      display: -webkit-box;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
              flex-flow: column nowrap;
      -webkit-box-pack: center;
              justify-content: center;
      -webkit-box-align: center;
              align-items: center; }
      .fabric nav button:active, .fabric nav button:focus {
        outline: none; }
    .fabric nav .navigate {
      padding: 1em 0;
      --ease: 0.2s ease-in-out; }
      .fabric nav .navigate div {
        width: 1.5em;
        height: 1.5em;
        border: 2px solid white;
        border-radius: 1.5em;
        display: -webkit-box;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
                flex-flow: column nowrap;
        -webkit-box-pack: center;
                justify-content: center;
        -webkit-box-align: center;
                align-items: center;
        -webkit-transition: border-color var(--ease);
        transition: border-color var(--ease); }
      .fabric nav .navigate span {
        width: 0.5em;
        height: 0.5em;
        border-radius: 0.5em;
        background-color: black; }
      .fabric nav .navigate p {
        text-align: center;
        text-transform: uppercase;
        font-family: 'Oswald', sans-serif;
        margin: 0.5em 0 0;
        opacity: 0;
        -webkit-transition: opacity var(--ease);
        transition: opacity var(--ease); }
      .fabric nav .navigate:active div, .fabric nav .navigate:focus div, .fabric nav .navigate.current div {
        border-color: black; }
      .fabric nav .navigate:active p, .fabric nav .navigate:focus p, .fabric nav .navigate.current p {
        opacity: 1; }
    .fabric nav .skip {
      color: white;
      padding: 1em;
      max-width: 9ch;
      background-color: black;
      text-transform: uppercase;
      font-family: 'Oswald', sans-serif;
      text-align: center; }
      .fabric nav .skip svg {
        width: 2ch;
        height: auto;
        margin-bottom: 0.5em; }
  @media screen and (max-width: 1024px) {
    .fabric ul {
      padding-top: 50%; } }
  @media screen and (max-width: 960px) {
    .fabric ul li .info h2 {
      font-size: var(--step-6); }
    .fabric ul li .info p {
      top: calc(4vw + (var(--step-6) * 1.5)); } }
  @media screen and (max-width: 768px) {
    .fabric {
      padding: 1em; }
      .fabric ul li .info p {
        font-size: var(--step--2); }
      .fabric ul li .link {
        left: 1em;
        bottom: 1em;
        font-size: 0.8em; } }
  @media screen and (max-width: 690px) {
    .fabric nav {
      -webkit-box-pack: center;
              justify-content: center; }
    .fabric .navigate {
      display: none;
      margin: 0 auto; }
      .fabric .navigate.current {
        display: -webkit-box;
        display: flex; } }
  @media screen and (max-width: 600px) {
    .fabric ul li .info h2 {
      font-size: var(--step-3); }
    .fabric ul li .info p {
      top: calc(4vw + (var(--step-3) * 1.5)); } }
  @media screen and (max-width: 540px) {
    .fabric ul li .info p {
      width: calc(100% - 8vw);
      left: 4vw; } }
  @media screen and (max-width: 490px) {
    .fabric ul li .link {
      font-size: 0.5em; } }
  @media screen and (max-width: 425px) {
    .fabric ul li .info h2 {
      font-size: var(--step-1); }
    .fabric ul li .info p {
      margin: 0;
      top: calc(4vw + (var(--step-1) * 1.5)); } }