@import url("//hello.myfonts.net/count/3fb7d0");/*! normalize.css v1.1.3 | MIT License | git.io/normalize *//* ==========================================================================
   HTML5 display definitions
   ========================================================================== *//**
 * Correct `block` display not defined in IE 6/7/8/9 and Firefox 3.
 */article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
    display: block;
}/**
 * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
 */audio,
canvas,
video {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */audio:not([controls]) {
    display: none;
    height: 0;
}/**
 * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
 * Known issue: no IE 6 support.
 */[hidden] {
    display: none;
}/* ==========================================================================
   Base
   ========================================================================== *//**
 * 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
 *    `em` units.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */html {
    font-size: 100%; /* 1 */
    -ms-text-size-adjust: 100%; /* 2 */
    -webkit-text-size-adjust: 100%; /* 2 */
}/**
 * Address `font-family` inconsistency between `textarea` and other form
 * elements.
 */html,
button,
input,
select,
textarea {
    font-family: sans-serif;
}/**
 * Address margins handled incorrectly in IE 6/7.
 */body {
    margin: 0;
}/* ==========================================================================
   Links
   ========================================================================== *//**
 * Address `outline` inconsistency between Chrome and other browsers.
 */a:focus {
    outline: thin dotted;
}/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */a:active,
a:hover {
    outline: 0;
}/* ==========================================================================
   Typography
   ========================================================================== *//**
 * Address font sizes and margins set differently in IE 6/7.
 * Address font sizes within `section` and `article` in Firefox 4+, Safari 5,
 * and Chrome.
 */h1 {
    font-size: 2em;
    margin: 0.67em 0;
}h2 {
    font-size: 1.5em;
    margin: 0.83em 0;
}h3 {
    font-size: 1.17em;
    margin: 1em 0;
}h4 {
    font-size: 1em;
    margin: 1.33em 0;
}h5 {
    font-size: 0.83em;
    margin: 1.67em 0;
}h6 {
    font-size: 0.67em;
    margin: 2.33em 0;
}/**
 * Address styling not present in IE 7/8/9, Safari 5, and Chrome.
 */abbr[title] {
    border-bottom: 1px dotted;
}/**
 * Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
 */b,
strong {
    font-weight: bold;
}blockquote {
    margin: 1em 40px;
}/**
 * Address styling not present in Safari 5 and Chrome.
 */dfn {
    font-style: italic;
}/**
 * Address differences between Firefox and other browsers.
 * Known issue: no IE 6/7 normalization.
 */hr {
    box-sizing: content-box;
    height: 0;
}/**
 * Address styling not present in IE 6/7/8/9.
 */mark {
    background: #ff0;
    color: #000;
}/**
 * Address margins set differently in IE 6/7.
 */p,
pre {
    margin: 1em 0;
}/**
 * Correct font family set oddly in IE 6, Safari 4/5, and Chrome.
 */code,
kbd,
pre,
samp {
    font-family: monospace, serif;
    _font-family: 'courier new', monospace;
    font-size: 1em;
}/**
 * Improve readability of pre-formatted text in all browsers.
 */pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
}/**
 * Address CSS quotes not supported in IE 6/7.
 */q {
    quotes: none;
}/**
 * Address `quotes` property not supported in Safari 4.
 */q:before,
q:after {
    content: '';
    content: none;
}/**
 * Address inconsistent and variable font size in all browsers.
 */small {
    font-size: 80%;
}/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}sup {
    top: -0.5em;
}sub {
    bottom: -0.25em;
}/* ==========================================================================
   Lists
   ========================================================================== *//**
 * Address margins set differently in IE 6/7.
 */dl,
menu,
ol,
ul {
    margin: 1em 0;
}dd {
    margin: 0 0 0 40px;
}/**
 * Address paddings set differently in IE 6/7.
 */menu,
ol,
ul {
    padding: 0 0 0 40px;
}/**
 * Correct list images handled incorrectly in IE 7.
 */nav ul,
nav ol {
    list-style: none;
    list-style-image: none;
}/* ==========================================================================
   Embedded content
   ========================================================================== *//**
 * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
 * 2. Improve image quality when scaled in IE 7.
 */img {
    border: 0; /* 1 */
    -ms-interpolation-mode: bicubic; /* 2 */
}/**
 * Correct overflow displayed oddly in IE 9.
 */svg:not(:root) {
    overflow: hidden;
}/* ==========================================================================
   Figures
   ========================================================================== *//**
 * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
 */figure {
    margin: 0;
}/* ==========================================================================
   Forms
   ========================================================================== *//**
 * Correct margin displayed oddly in IE 6/7.
 */form {
    margin: 0;
}/**
 * Define consistent border, margin, and padding.
 */fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}/**
 * 1. Correct color not being inherited in IE 6/7/8/9.
 * 2. Correct text not wrapping in Firefox 3.
 * 3. Correct alignment displayed oddly in IE 6/7.
 */legend {
    border: 0; /* 1 */
    padding: 0;
    white-space: normal; /* 2 */
    *margin-left: -7px; /* 3 */
}/**
 * 1. Correct font size not being inherited in all browsers.
 * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
 *    and Chrome.
 * 3. Improve appearance and consistency in all browsers.
 */button,
input,
select,
textarea {
    font-size: 100%; /* 1 */
    margin: 0; /* 2 */
    vertical-align: baseline; /* 3 */
    *vertical-align: middle; /* 3 */
}/**
 * Address Firefox 3+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */button,
input {
    line-height: normal;
}/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
 * Correct `select` style inheritance in Firefox 4+ and Opera.
 */button,
select {
    text-transform: none;
}/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 * 4. Remove inner spacing in IE 7 without affecting normal text inputs.
 *    Known issue: inner spacing remains in IE 6.
 */button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button; /* 2 */
    cursor: pointer; /* 3 */
    *overflow: visible;  /* 4 */
}/**
 * Re-set default cursor for disabled elements.
 */button[disabled],
html input[disabled] {
    cursor: default;
}/**
 * 1. Address box sizing set to content-box in IE 8/9.
 * 2. Remove excess padding in IE 8/9.
 * 3. Remove excess padding in IE 7.
 *    Known issue: excess padding remains in IE 6.
 */input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
    *height: 13px; /* 3 */
    *width: 13px; /* 3 */
}/**
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */input[type="search"] {
    -webkit-appearance: textfield; /* 1 */ /* 2 */
    box-sizing: content-box;
}/**
 * Remove inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}/**
 * Remove inner padding and border in Firefox 3+.
 */button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}/**
 * 1. Remove default vertical scrollbar in IE 6/7/8/9.
 * 2. Improve readability and alignment in all browsers.
 */textarea {
    overflow: auto; /* 1 */
    vertical-align: top; /* 2 */
}/* ==========================================================================
   Tables
   ========================================================================== *//**
 * Remove most spacing between table cells.
 */table {
    border-collapse: collapse;
    border-spacing: 0;
}.big-hero-six {
  display: flex;
  position: absolute;
  height: 600px;
  top: 0px;
  background: white;
  z-index: 1;
  margin-bottom: 64px;
}.big-hero-six p {
    margin: 0
  }.big-hero-six p:first-of-type {
      position: relative;
      left: 3px;
    }.big-hero-six p:last-of-type {
      position: relative;
      left: 3px;
      top: 4px
    }@media (minx-width: 520px) {

    .big-hero-six p:last-of-type {
        top: 8px
    }
      }.big-hero-six .background {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    max-width: 1440px;
    margin: auto;
    background: #fff;
    bottom: -164px;
    z-index: 2;
    overflow: hidden;
  }.big-hero-six .main-content-wrapper {
    align-items: center;
    justify-content: flex-start;
    z-index: 3;
  }.big-hero-six video {
    position: relative;
    z-index: 1;
    width: 101%;
    flex: none;
    background: linear-gradient(to top, #FFA000, #FFA000 25% , #fff 25%, #fff 25%);
    opacity: 0.99 // Helps with blending the video with the section below
  }.big-hero-six .custom-wave {
    display: block;
    position: absolute;
    z-index: 1;
    top: 445px;
    width: 100vw;
    height: 400px;
    background: #FFA000;
    }.big-hero-six .custom-wave path,
    .big-hero-six .custom-wave rect {
      fill: white;
      }.memoji {
  display: none;
  height: 60px;
  margin-right: 10px;
}#unecessary-part-of-name {
  animation: 10s ease-in-out 1s fade-away;
  animation-fill-mode: forwards;
}@keyframes fade-away {
  from { opacity: 1; }
  to { opacity: 0.1; }
}/* Some switcharoos on what to show on the hero, depending on the size */@media (max-width: 780px) {
  .big-hero-six {
    color: #0e1e25;
    z-index: 2;
 }
   
    .big-hero-six .background {
      background: #fff;
   }
   
   .big-hero-six .custom-wave {
     display: none;
   }
}@media (max-width: 900px) {
  
  .big-hero-six .background {
    bottom: -64px;
  }
}@media (max-width: 624px) {
  .big-hero-six h1 {
    font-size: 11vw;
  }
}@media (max-width: 520px) {
  
  .big-hero-six .main-content-wrapper {
    align-items: center;
    justify-content: flex-start;
    font-size: 16px;
  }

  .big-hero-six h1 {
    font-size: 42px;
    margin: 4px 0 4px 0;
  }
}.sketch {
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
    position: relative;
    z-index: 1;
    margin-top: -4px;
    background: #FFA000;
    color: #030303
}@media (max-width: 975px) {.sketch {
      z-index: 3
}
    }.sketch .tint-color {
        color: #FFA000;
        color: color(display-p3 1 0.675 0.229);
    }.sketch .wave-bottom {
        z-index: 1;
    }.sketch .wave-bottom path {
            fill: #EAE9EA;
        }.sketch .timestamp {
      left: 4px;
    }.sketch .external-link {
      color: #131314
  }.sketch .external-link:hover {
      border-color: #131314;
    }.sketch .main-content-wrapper {
    align-items: center;
    padding-bottom: 30px;
    max-height: 300px;
    margin-top: -80px;
    margin-bottom: 100px;
    z-index: 2;
    top: -20px
  }@media (max-width: 975px) {

  .sketch .main-content-wrapper {
      flex-direction: column;
      align-items: center;
      min-height: 400px;
      margin-top: 0;
      margin-bottom: 140px
  }
    }.sketch .showcase {
    position: relative;
  }.sketch .showcase .card {
      position: absolute;
      background-size: cover;
      background-color: transparent
    }.sketch .showcase .card:first-of-type {
        position: relative;
      }.sketch .showcase .card:nth-child(1) {
        width: 512px;
        height: 512px;
        top: 84px;
        left: 100px;
        background-image: url(/assets/sketch-app-icon.png);
        background-color: transparent;
        transform: scale(0.8, 0.8) translateY(-16px) rotate(10deg)
      }.sketch .showcase .card:nth-child(1):hover {
          transform: scale(1, 1) translateY(-16px) rotate(0deg)
        }@media (max-width: 975px) {
        
        .sketch .showcase .card:nth-child(1):hover {
            transform: scale(0.7, 0.7) translateY(-16px) rotate(0deg)
        }
          }@media (max-width: 975px) {
      
      .sketch .showcase .card:nth-child(1) {
          left: 0;
          top: -60px;
          transform: scale(0.6, 0.6) translateY(-16px) rotate(10deg)
      }
        }.handmirror {
  position: relative;
  z-index: 2;
  background: #EAE9EA;
  color: #202124
}@media (max-width: 975px) {.handmirror {
    z-index: 2
}
  }.handmirror .wave-bottom {
    z-index: 1;
  }.handmirror .wave-bottom path {
      fill: #060606;
    }.handmirror .tint-color {
    color: #C60000;
  }.handmirror p, .handmirror a {
    border-color: rgba(198, 0, 0, 0.3)
  }.handmirror p:hover, .handmirror a:hover {
     border-color: rgba(198, 0, 0, 1);
    }.handmirror .external-link:hover {
    border-color: #C60000;
  }.handmirror .main-content-wrapper {
    align-items: center;
    padding: 64px 0 186px 0
  }@media (max-width: 975px) {

  .handmirror .main-content-wrapper {
      flex-direction: column;
      align-items: center;
      min-height: 900px;
      padding-bottom: 150px
  }
    }@media (max-width: 780px) {

  .handmirror .main-content-wrapper {
      align-items: flex-start
  }
    }@media (max-width: 469px) {

  .handmirror .main-content-wrapper {
      min-height: 860px;
      padding-bottom: 10px
  }
    }.handmirror .showcase {
    position: relative;
    margin-top: 40px;
    left: -20px;
    transform: scale(.8);
    transform-origin: top left;
    top: 100px;
    min-height: 460px
  }@media (min-width: 475px) {

  .handmirror .showcase {
      transform: scale(0.9);
      top: 100px;
      left: 40px;
      min-height: auto
  }
    }@media (min-width: 975px) {

  .handmirror .showcase {
      transform: scale(1, 1);
      top: -70px
  }
    }.handmirror .card {
    position: absolute;
    width: auto;
    height: auto;
    overflow: hidden;
    background-size: cover;
    background-color: transparent
  }.handmirror .card:first-of-type {
      position: relative;
    }.handmirror .card video {
      position: relative;
      width: 400px;
      height: auto;
    }.handmirror .card:nth-child(1) {
      top: -170px;
      left: -20px;
      height: 294px;

      transform: scale(.8, .8) rotate(-6deg);
      box-shadow: 0px 4px 24px 2px rgba(14, 30, 37, 0.16)
    }.handmirror .card:nth-child(1):hover {
        transform: scale(1, 1) translateY(-16px) rotate(0deg);
      }.handmirror .card:nth-child(2) {
      top: -130px;
      left: 220px;
      height: 294px;

      transform: scale(.8, .8) rotate(4deg);
      box-shadow: 0px 4px 24px 2px rgba(14, 30, 37, 0.16)
    }.handmirror .card:nth-child(2):hover {
        transform: scale(1, 1) translateY(-16px) rotate(0deg);
      }.handmirror .card:nth-child(3) {
      top: 0px;
      left: 40px;
      background-image: url(/assets/hand-mirror-app-icon.png);
      background-size: auto 100%;
      background-repeat: no-repeat;
      background-position: center;
    }.handmirror .card:nth-child(4) {
      top: 100px;
      left: 240px;
      height: 294px;

      transform: scale(.8, .8) rotate(16deg);
      box-shadow: 0px 4px 24px 2px rgba(14, 30, 37, 0.16)
    }.handmirror .card:nth-child(4):hover {
        transform: scale(1, 1) translateY(-16px) rotate(0deg);
      }.handmirror .card:nth-child(5) {
      top: 230px;
      left: 50px;
      height: 294px;

      transform: scale(.8, .8) rotate(-8deg);
      box-shadow: 0px 4px 24px 2px rgba(14, 30, 37, 0.16)
    }.handmirror .card:nth-child(5):hover {
        transform: scale(1, 1) translateY(-16px) rotate(0deg);
      }.handmirror .hero-card {
    box-shadow: none;
    transform: scale(1);
    height: 320px;
    width: 320px;
  }.spatialty-coffee {
  position: relative;
  z-index: 2;
  background: #DEC19A;
  color: #2D1005
}@media (max-width: 975px) {.spatialty-coffee {
    z-index: 2
}
  }.spatialty-coffee .wave-bottom {
    z-index: 1;
  }.spatialty-coffee .wave-bottom path {
      fill: rgb(48, 24, 0);
      fill: color(display-p3 0.175 0.099 0.004);
    }.spatialty-coffee .tint-color {
    color: #723118;
  }.spatialty-coffee h2 {
    font-family: ui-serif;
  }.spatialty-coffee .timestamp {
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
  }.spatialty-coffee p, .spatialty-coffee a {
    border-color: rgba(198, 0, 0, 0.3)
  }.spatialty-coffee p:hover, .spatialty-coffee a:hover {
     border-color: rgba(220, 190, 150, 1);
    }.spatialty-coffee .external-link:hover {
    border-color: #DEC19A;
  }.spatialty-coffee .main-content-wrapper {
    align-items: center;
    padding: 64px 0 80px 0
  }@media (max-width: 975px) {

  .spatialty-coffee .main-content-wrapper {
      flex-direction: column;
      align-items: center;
      min-height: 400px
  }
    }@media (max-width: 780px) {

  .spatialty-coffee .main-content-wrapper {
      align-items: flex-start
  }
    }@media (max-width: 469px) {

  .spatialty-coffee .main-content-wrapper {
      padding-bottom: 10px
  }
    }.spatialty-coffee .content {
    z-index: 2;
    max-width: 550px;
  }.spatialty-coffee .showcase {
    position: relative;
    margin-top: 40px;
    left: -20px;
    transform: scale(.8);
    transform-origin: top left;
    min-height: 400px;
    z-index: 1
  }@media (min-width: 475px) {

  .spatialty-coffee .showcase {
      transform: scale(0.9);
      left: 40px;
      min-height: 0
  }
    }@media (max-width: 780px) {

  .spatialty-coffee .showcase {
      left: 150px
  }
    }@media (min-width: 975px) {

  .spatialty-coffee .showcase {
      transform: scale(1, 1);
      top: 0
  }
    }.spatialty-coffee .appIcon {
    width: 256px;
    height: 256px;
    position: absolute;
    top: 100px;
    z-index: 9;

    display: block;
    transition: transform 200ms ease-out;
    transform-style: preserve-3d;
  }.spatialty-coffee .icon-back {
    position: absolute;
    background-image: url("../assets/spatialty-appIcon-back.png");
    background-size: 100%;
    top: 0; right: 0; bottom: 0; left: 0;
    border-radius: 50%;
    z-index: 1;
  }.spatialty-coffee .icon-middle {
    position: absolute;
    background-image: url("../assets/spatialty-appIcon-middle.png");
    background-size: 100%;
    top: 0; right: 0; bottom: 0; left: 0;
    transform-origin: 50% 50%;
    transform-style: preserve-3d;
    transition: all 250ms ease-out;
    z-index: 2;
  }.spatialty-coffee .icon-front {
    position: absolute;
    background-image: url("../assets/spatialty-appIcon-front.png");
    background-size: 100%;
    top: 0; right: 0; bottom: 0; left: 0;

    transform-origin: 50% 50%;
    transform-style: preserve-3d;
    transition: all 250ms ease-out;
    z-index: 3;
  }.spatialty-coffee .appIcon:hover .icon-back {
      filter: drop-shadow(1px 2px 4px hsla(0deg, 0%, 0%, 0.42));
  }.spatialty-coffee .appIcon:hover .icon-middle {
    transform: translateZ(40px);
    filter: drop-shadow(1px 2px 4px hsla(0deg, 0%, 0%, 0.42));
  }.spatialty-coffee .appIcon:hover .icon-front {
    transform: translateZ(60px);
    filter: drop-shadow(1px 4px 8px hsla(0deg, 0%, 0%, 0.42));
  }.spatialty-coffee .not-actually-a-card {
    position: absolute;
    overflow: hidden;
    background-size: cover;
    background-color: transparent
  }.spatialty-coffee .not-actually-a-card:first-of-type {
      position: relative;
    }.spatialty-coffee .not-actually-a-card:nth-child(2) {
      height: 452px;
      width: 330px;
      top: -0px;
      left: -180px;
      z-index: 2;

      background-image: url(/assets/spatialty-window-1.png);
      background-size: cover;
      background-repeat: no-repeat;
    }.spatialty-coffee .not-actually-a-card:nth-child(3) {
      height: 368px;
      width: 588px;
      top: 20px;
      left: 64px;
      z-index: 1;

      background-image: url(/assets/spatialty-window-2.png);
      background-size: cover;
      background-repeat: no-repeat;
    }.hidock {
  position: relative;
  z-index: 2;
  background-image: linear-gradient(180deg, #D431D6 0%, #D42ED6 8%, #BE28C9 27%, #672389 80%, #581F86 94%, #571F86 100%);
  background-image: linear-gradient(180deg, color(display-p3 0.798 0.117 0.861) 0%, color(display-p3 0.765 0.123 0.824) 8%, color(display-p3 0.668 0.06 0.768) 27%, color(display-p3 0.331 0.025 0.535) 80%, color(display-p3 0.283 0.015 0.559) 94%, color(display-p3 0.246 0.01 0.498) 100%);
  color: #fff
}@media (max-width: 975px) {.hidock {
    z-index: 1
}
  }.hidock .wave-bottom {
    z-index: 1;
  }.hidock .wave-bottom path {
      fill: #0d0d0d;
    }.hidock .tint-color {
    color: #fff;
  }.hidock p, .hidock a {
    border-color: rgba(198, 0, 0, 0.3)
  }.hidock p:hover, .hidock a:hover {
     border-color: rgba(198, 0, 0, 1);
    }.hidock .external-link:hover {
    border-color: #fff;
  }.hidock .main-content-wrapper {
    align-items: center;
    padding: 60px 0 186px 0
  }@media (max-width: 975px) {

  .hidock .main-content-wrapper {
      flex-direction: column;
      align-items: center;
      min-height: 400px;
      padding-bottom: 100px
  }
    }@media (max-width: 780px) {

  .hidock .main-content-wrapper {
      align-items: flex-start
  }
    }@media (max-width: 469px) {

  .hidock .main-content-wrapper {
      min-height: 500px;
      padding-bottom: 10px
  }
    }.hidock .showcase {
    position: relative;
    margin-top: 40px;
    left: -20px;
    transform: scale(.8);
    transform-origin: top left;
    top: 100px;
    min-height: 460px
  }@media (min-width: 475px) {

  .hidock .showcase {
      transform: scale(0.9);
      top: 20px;
      left: -100px;
      min-height: auto
  }
    }@media (min-width: 975px) {

  .hidock .showcase {
      transform: scale(1, 1);
      top: -70px
  }
    }.hidock .card {
    position: absolute;
    width: auto;
    height: auto;
    overflow: hidden;
    background-size: cover;
    background-color: transparent
  }.hidock .card:first-of-type {
      position: relative;
    }.hidock .card:nth-child(1) {
      top: 120px;
      left: 100px;
      height: 316px;
      width: 500px;
      background-image: url(/assets/hidock-screenshot.png);
      background-size: auto 100%;
      background-repeat: no-repeat;
      background-position: center;

      transform: scale(1, 1) rotate(4deg);
      box-shadow: none
    }.hidock .card:nth-child(1):hover {
        transform: scale(1.1, 1.1) translateY(-16px) rotate(0deg);
      }.hidock .card:nth-child(2) {
      top: -40px;
      left: 200px;
      background-image: url(/assets/hidock-app-icon.png);
      background-size: auto 100%;
      background-repeat: no-repeat;
      background-position: center;
    }.hidock .hero-card {
    box-shadow: none;
    transform: scale(1);
    height: 320px;
    width: 320px;
  }.along {
    font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
    position: relative;
    z-index: 3;
    background: #0d0d0d;
    color: #fff
}@media (max-width: 975px) {.along {
      z-index: 1
}
    }.along .tint-color {
        color: #c503ff;
        color: color(display-p3 0.685 0 1);
    }.along .wave-bottom {
        z-index: 1;
    }.along .wave-bottom path {
            fill: #f7fafb;
        }.along .timestamp {
      left: 4px;
    }.along p a {
    border-color: rgba(199, 1, 255, 0.3)
  }.along p a:hover {
        border-color: rgba(199, 1, 255, 1);
      }.along .main-content-wrapper {
    align-items: center;
    padding-bottom: 30px;
    min-height: 640px;
    margin-top: -40px;
    z-index: 2
  }@media (max-width: 975px) {

  .along .main-content-wrapper {
      flex-direction: column;
      align-items: center;
      min-height: 720px;
      margin-top: 64px;
      margin-bottom: 140px;
      padding-bottom: 164px
  }
    }@media (max-width: 469px) {

  .along .main-content-wrapper {
      min-height: 764px;
      padding-bottom: 120px
  }
    }.along .showcase {
    position: relative	
  }@media (max-width: 975px) {

  .along .showcase {
      left: 80px	
  }
    }.along .showcase .video-card {
      position: absolute;
      width: auto;
      height: auto;
      overflow: hidden;
    }.along .showcase .video-card video {
        position: relative;
        padding: 8px 8px 4px 8px;
        border-radius: 16px;
        width: 400px;
      }.along .showcase .video-card:nth-child(1) {
        top: -80px;
        right: -80px;
        z-index: 1;
        
        transform: scale(1.3, 1.3) rotate(3deg);
        box-shadow: 0px 4px 24px 2px rgba(14, 30, 37, 0.16) 
      }.along .showcase .video-card:nth-child(1):hover {
          transform: scale(1.4, 1.4) translateY(-16px) rotate(2deg);
        }.along .showcase .video-card:nth-child(2) {
        top: 64px;
        right: -280px;
        z-index: 2;
        
        transform: scale(.8, .8) rotate(-10deg);
        box-shadow: 0px 4px 24px 2px rgba(14, 30, 37, 0.16) 
      }.along .showcase .video-card:nth-child(2):hover {
          transform: scale(.8, .8) translateY(-16px) rotate(2deg);
        }.along .showcase .video-card:nth-child(3) {
        top: -320px;
        right: -240px;
        z-index: 0;
        
        transform: scale(.8, .8) rotate(14deg);
        box-shadow: 0px 4px 24px 2px rgba(14, 30, 37, 0.16) 
      }.along .showcase .video-card:nth-child(3):hover {
          transform: scale(.8, .8) translateY(-16px) rotate(2deg);
        }.along .showcase .card {
      position: absolute;
      background-size: cover
    }.along .showcase .card:nth-child(4) {
        top: -280px;
        right: 220px;
        z-index: 0;
        height: 200px;
        width: 200px;
        border-radius: 25%;
        background-image: url(/assets/along-app-icon.png);
        background-color: transparent;
        
        transform:rotate(-6deg);
        box-shadow: 0px 4px 24px 2px rgba(14, 30, 37, 0.16) 
      }.along .showcase .card:nth-child(4):hover {
          transform: translateY(-16px) rotate(2deg);
        }.netlify {
  position: relative;
  z-index: 3
}@media (min-width: 975px) {.netlify {
    margin: -104px 0 -40px
}
  }.netlify .tint-color {
    color: #009387;
  }.netlify .external-link:hover {
    border-color: #00ad9f;
  }.netlify p, .netlify a {
    border-color: rgba(0, 173, 159, 0.3)
  }.netlify p:hover, .netlify a:hover {
     border-color: rgba(0, 173, 159, 1);
    }.netlify .wave-bottom {
    z-index: 1;
  }.netlify .wave-bottom path {
      fill: #F4D7C7;
    }.netlify .main-content-wrapper {
    align-items: center;
    min-height: 730px
  }@media (max-width: 975px) {

  .netlify .main-content-wrapper {
      flex-direction: column;
      align-items: center;
      min-height: 900px;
      margin-bottom: -40px;
      padding-bottom: 0px
  }
    }@media (max-width: 780px) {

  .netlify .main-content-wrapper {
      align-items: flex-start
  }
    }@media (max-width: 469px) {

  .netlify .main-content-wrapper {
      min-height: 790px;
      padding-bottom: 10px
  }
    }.netlify .showcase {
    position: relative;
    margin-top: 40px;
    left: -20px;
    top: -70px;
    transform: scale(1, 1);
    transform-origin: top left;
    z-index: 2
  }@media (max-width: 975px) {

  .netlify .showcase {
      transform: scale(.8)
  }
    }@media (max-width: 469px) {

  .netlify .showcase {
      margin-top: 204px
  }
    }.netlify .card {
    position: absolute;
    background-size: cover
  }.netlify .card:first-of-type {
      position: relative;
    }.netlify .card:nth-child(1) {
      top: -200px;
      left: -110px;
      background-image: url(/assets/dribbble-1.jpg);
    }.netlify .card:nth-child(2) {
      top: -150px;
      left: 200px;
      background-image: url(/assets/dribbble-splittest.gif);
    }.netlify .card:nth-child(3) {
      top: 70px;
      left: 70px;
      background-image: url(/assets/dribbble-netlify-app.png);
    }.netlify .card:nth-child(4) {
      top: 160px;
      left: 290px;
      background-image: url(/assets/dribbble-netlify-logo.jpg);
    }.netlify .card:nth-child(5) {
      top: 330px;
      left: 50px;
      background-image: url(/assets/dribbble-icons.gif);
    }.boobyTrack {
	font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
	position: relative;
	z-index: 1;
	background: #F4D7C7;
	color: #5A3730;
}.boobyTrack .tint-color {
		color: #AF3B52;
	}.boobyTrack .wave-bottom {
	z-index: 1;
  }.boobyTrack .wave-bottom path {
		fill: #1C051D;
	}.boobyTrack .external-link:hover {
	border-color: #AF3B52;
  }.boobyTrack .main-content-wrapper {
	align-items: center;
	padding-bottom: 30px;
	min-height: 730px;
	margin-top: -40px;
	z-index: 2
  }@media (max-width: 975px) {

  .boobyTrack .main-content-wrapper {
	  flex-direction: column;
	  align-items: center;
	  min-height: 0;
	  margin-top: 64px;
	  margin-bottom: 104px
  }
	}@media (max-width: 469px) {

  .boobyTrack .main-content-wrapper {
	  min-height: 790px;
	  padding-bottom: 10px
  }
	}.boobyTrack .viewport {
	  background-image: url(/assets/boobyTrack-screenshot.png);
	  background-size: cover;
  }.boobyTrack .showcase {
	position: relative;
  }.boobyTrack .showcase .video-card {
		position: absolute;
		width: auto;
		height: auto;
		overflow: hidden;
		top: -104px;
		right: -184px;
		z-index: 2;
		border-radius: 56px;

		transform: scale(.8, .8) rotate(10deg);
		box-shadow: 0px 4px 24px 2px rgba(14, 30, 37, 0.16);
		z-index: 2
	}.boobyTrack .showcase .video-card:hover {
			transform: scale(.8, .8) translateY(-16px) rotate(2deg);
		}.boobyTrack .showcase .video-card video {
			position: relative;
			padding: 8px 8px 4px 8px;
			border-radius: 60px;
			width: 320px;
		}.boobyTrack .card {
	  position: absolute;
	  background-size: cover
  }.boobyTrack .card:nth-child(3) {
		  top: 264px;
		  left: -140px;
		  height: 300px;
		  width: 300px;
		  border-radius: 22%;
		  background-image: url(/assets/booby-track-app-icon.png);
		  background-color: transparent;
		}.apple-watch-my-back {
	position: relative;
	width: 265px;
	height: 440px;
	background-image: url("../assets/apple-watch.png");
	background-size: 100% 100%;
	cursor: url(../assets/cursor.svg) 20 20, pointer;
	text-align: center;
	font-family:
		"SFCompactText-Medium",
		ui-sans-serif,
		-apple-system,
		BlinkMacSystemFont,
		Segoe UI,
		Helvetica,
		Arial,
		sans-serif,
		Apple Color Emoji,
		Segoe UI Emoji;
	z-index: 99;
}.viewport {
	position: absolute;
	display: flex;
	height: 225px;
	width: 185px;
	top: 107px;
	left: 40px;
	margin-left: 0;
	margin-right: 0;
	border-radius: 33px;
	overflow: hidden;
	-webkit-mask-image: -webkit-radial-gradient(white, black);
	background: black;
}.thwip {
	font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
  position: relative;
  z-index: 0;
  margin-top: 0px;
  background: #060606;
  color: #fff;
}.thwip .tint-color {
	color: #f0d8fd;
  }.thwip .wave-bottom {
	z-index: 1;
  }.thwip .wave-bottom path {
		fill: #DEC19A;
	}.thwip .external-link:hover {
	border-color: #8700f3;
	border-color: color(display-p3 0.458 0.003 0.953);
  }.thwip .main-content-wrapper {
	align-items: center;
	padding-bottom: 30px;
	min-height: 0;
	min-height: 730px;
	margin-top: -40px;
	z-index: 2
  }@media (max-width: 975px) {

  .thwip .main-content-wrapper {
	  flex-direction: column;
	  align-items: center;
	  min-height: 900px;
	  margin-top: 64px;
	  margin-bottom: 104px
  }
	}@media (max-width: 469px) {

  .thwip .main-content-wrapper {
	  min-height: 980px;
	  padding-bottom: 10px
  }
	}.thwip .showcase {
	position: relative
  }@media (max-width: 975px) {

  .thwip .showcase {
		min-height: 200px;
		top: -70px;
		left: 75px
  }
	}.thwip .showcase .video-card {
		position: absolute;
		width: auto;
		height: auto;
		overflow: hidden;
		top: -140px;
		right: -184px;
		z-index: 9;
	}.thwip .showcase .video-card video {
			position: relative;
			border-radius: 16px;
			width: 224px;
		}.thwip .showcase .video-card{

		transform: scale(.8, .8) rotate(6deg);
	    box-shadow: 0px 4px 24px 2px rgba(14, 30, 37, 0.16);
}.thwip .showcase .video-card:hover {
			transform: scale(1, 1) translateY(-16px) rotate(0deg);
		}.thwip .card {
	  position: absolute;
	  width: auto;
	  height: auto;
	  overflow: hidden;
	  background-size: cover;
	  background-color: transparent
  }.thwip .card:nth-child(1) {
		top: -120px;
		left: -200px;
		height: 256px;
		width: 256px;
		border-radius: 22%;
		z-index: 99;

		transform: scale(.8, .8);
		box-shadow: 0px 4px 24px 2px rgba(14, 30, 37, 0.16);
	  }.thwip .card:nth-child(1):hover {
		  transform: scale(1, 1) translateY(-16px);
		}.thwip .card:nth-child(1) {

		background-image: url(/assets/thwip-app-icon.png);
	  }.thwip .card:nth-child(2) {
		  top: -280px;
		  left: -130px;
		  height: 260px;
		  width: 400px;
		  z-index: 3;

		  transform: scale(.8, .8) rotate(6deg);
		  box-shadow: 0px 4px 24px 2px rgba(14, 30, 37, 0.16);
		}.thwip .card:nth-child(2):hover {
			transform: scale(1, 1) translateY(-16px) rotate(0deg);
		  }.thwip .card:nth-child(2) {

		  background-image: url(/assets/thwip-demo-1.jpg);
		}.thwip .card:nth-child(3) {
		  top: 120px;
		  left: -100px;
		  height: 260px;
		  width: 400px;

		  transform: scale(.8, .8) rotate(-8deg);
		  box-shadow: 0px 4px 24px 2px rgba(14, 30, 37, 0.16);
		}.thwip .card:nth-child(3):hover {
			transform: scale(1, 1) translateY(-16px) rotate(0deg);
		  }.thwip .card:nth-child(3) {

		  background-image: url(/assets/thwip-demo-2.jpg);
		}.thwip .card:nth-child(4) {
		  top: -240px;
		  left: -380px;
		  height: 260px;
		  width: 400px;
		  z-index: 1;

		  transform: scale(.8, .8) rotate(4deg);
		  box-shadow: 0px 4px 24px 2px rgba(14, 30, 37, 0.16);
		}.thwip .card:nth-child(4):hover {
			transform: scale(1, 1) translateY(-16px) rotate(0deg);
		  }.thwip .card:nth-child(4) {

		  background-image: url(/assets/thwip-demo-3.jpg);
		}.thwip .card:nth-child(5) {
		  top: -40px;
		  left: -380px;
		  height: 260px;
		  width: 400px;
		  z-index: 1;

		  transform: scale(.8, .8) rotate(-16deg);
		  box-shadow: 0px 4px 24px 2px rgba(14, 30, 37, 0.16);
		}.thwip .card:nth-child(5):hover {
			transform: scale(1, 1) translateY(-16px) rotate(0deg);
		  }.thwip .card:nth-child(5) {

		  background-image: url(/assets/thwip-demo-4.jpg);
		}.docktor {
  position: relative;
  z-index: 2;
  background: rgb(48, 24, 0);
  background: color(display-p3 0.175 0.099 0.004);
  color: #fff
}@media (max-width: 975px) {.docktor {
    z-index: 1
}
  }.docktor .wave-bottom {
    z-index: 1;
  }.docktor .wave-bottom path {
      fill: #D431D6;
      fill: color(display-p3 0.798 0.117 0.861);
    }.docktor .tint-color {
    color: #fff;
  }.docktor .external-link:hover {
    border-color: #fff;
  }.docktor .main-content-wrapper {
    align-items: center;
    padding: 60px 0 186px 0
  }@media (max-width: 975px) {

  .docktor .main-content-wrapper {
      flex-direction: column;
      align-items: center;
      min-height: 400px;
      padding-bottom: 100px
  }
    }@media (max-width: 780px) {

  .docktor .main-content-wrapper {
      align-items: flex-start
  }
    }@media (max-width: 469px) {

  .docktor .main-content-wrapper {
      min-height: 500px;
      padding-bottom: 10px
  }
    }.docktor .showcase {
    position: relative;
    margin-top: 40px;
    left: -20px;
    transform: scale(.8);
    transform-origin: top left;
    top: 100px;
    min-height: 460px
  }@media (min-width: 475px) {

  .docktor .showcase {
      transform: scale(0.9);
      top: 20px;
      left: -100px;
      min-height: auto
  }
    }@media (min-width: 975px) {

  .docktor .showcase {
      transform: scale(1, 1);
      top: -70px
  }
    }.docktor .showcase .video-card {
      position: absolute;
      width: auto;
      height: auto;
      overflow: hidden;

      top: 200px;
      right: -120px;
      z-index: 1;

      transform: scale(1.3, 1.3) rotate(3deg);
      box-shadow: 0px 4px 24px 2px rgba(14, 30, 37, 0.16)
    }.docktor .showcase .video-card:hover {
        transform: scale(1.4, 1.4) translateY(-16px) rotate(2deg);
      }.docktor .showcase .video-card video {
        position: relative;
        padding: 8px 8px 4px 8px;
        border-radius: 16px;
        width: 420px;
      }.docktor .card {
    position: absolute;
    width: auto;
    height: auto;
    overflow: hidden;
    background-size: cover;
    background-color: transparent
  }.docktor .card:first-of-type {
      position: relative;
    }.docktor .card:nth-child(1) {
      top: -80px;
      left: 200px;
      height: 316px;
      width: 500px;
      background-image: url(/assets/docktor-app-icon.png);
      background-size: auto 100%;
      background-repeat: no-repeat;
      background-position: center;

      transform: scale(1, 1) rotate(4deg);
      box-shadow: none
    }.docktor .card:nth-child(1):hover {
        transform: scale(1.1, 1.1) translateY(-16px) rotate(0deg);
      }.docktor .hero-card {
    box-shadow: none;
    transform: scale(1);
    height: 320px;
    width: 320px;
  }.layout {
  position: relative;
  z-index: 2;
  margin-top: -56px;
}.layout .tint-color {
    color: #50C54C;
    color: color(display-p3 0.296 0.738 0.28);
  }.layout .wave-bottom {
    z-index: 1;
  }.layout .external-link:hover {
    border-color: #50C54C;
    border-color: color(display-p3 0.296 0.738 0.28);
  }.layout p, .layout a {
    border-color: rgba(80, 197, 76, 0.3)
  }.layout p:hover, .layout a:hover {
     border-color: #50C54C;
     border-color: color(display-p3 0.296 0.738 0.28);
    }.layout .main-content-wrapper {
    align-items: center;
    padding-bottom: 30px;
    min-height: 730px;
    margin-top: -40px;
    z-index: 2
  }@media (max-width: 975px) {

  .layout .main-content-wrapper {
      flex-direction: column;
      align-items: center;
      min-height: 900px;
      margin-top: 64px;
      margin-bottom: 104px
  }
    }@media (max-width: 780px) {

  .layout .main-content-wrapper {
      align-items: flex-start
  }
    }@media (max-width: 469px) {

  .layout .main-content-wrapper {
      min-height: 790px;
      padding-bottom: 10px
  }
    }.layout .showcase {
    position: relative;
    margin-top: 140px;
    left: -40px;
    transform: scale(.8, .8);
    transform-origin: top left
  }@media (min-width: 469px) {

  .layout .showcase {
      transform: scale(1, 1);
      top: -50px;
      left: -40px
  }
    }@media (min-width: 975px) {

  .layout .showcase {
      top: -120px;
      left: 40px
  }
    }.layout .card {
    position: absolute;
    background-size: cover;
    background-position: center;
    width: 380px;
    height: 380px
  }.layout .card:first-of-type {
      position: relative;
    }.layout .card:nth-child(1) {
      top: -160px;
      left: -60px;
      background-image: url(/assets/layout-1.jpg);
    }.layout .card:nth-child(2) {
      top: -160px;
      left: 200px;
      background-image: url(/assets/layout-2.jpg);
    }.layout .card:nth-child(3) {
      top: 70px;
      left: 70px;
      background-image: url(/assets/layout-cover.png);
    }.layout .card:nth-child(4) {
      top: 130px;
      left: 340px;
      background-image: url(/assets/layout-3.jpg);
    }.layout .card:nth-child(5) {
      top: 300px;
      left: -60px;
      background-image: url(/assets/layout-4.jpg);
    }.layout .card:nth-child(6) {
      top: 340px;
      left: 170px;
      background-image: url(/assets/layout-5.jpg);
    }.layout .card:nth-child(7) {
      top: 110px;
      left: -120px;
      background-image: url(/assets/layout-6.jpg);
    }.galaxy {
  position: relative;
  z-index: 2;
  background-color: #1C051D;
  background-image: url(/assets/galaxy-background.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  color: #fff;
  font-family: "MyriadPro-Regular", -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji
}@media (max-width: 975px) {.galaxy {
    z-index: 1
}
  }.galaxy .wave-bottom {
    z-index: 1;
  }.galaxy .wave-bottom path {
      fill: #f7fafb;
    }.galaxy .tint-color {
    color: #fff;
  }.galaxy h2 {
    font-family: "MyriadPro-Semibold", -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
    background: linear-gradient(#fff 33%, #8c8c8c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0px 2px 4px rgba(0,0,0,.5));
  }.galaxy p, .galaxy a {
    filter: drop-shadow(0px 2px 4px rgba(0,0,0,.5));
    border-color: rgba(198, 0, 0, 0.3)
  }.galaxy p:hover, .galaxy a:hover {
     border-color: rgba(198, 0, 0, 1);
    }.galaxy .external-link:hover {
    border-color: #fff;
  }.galaxy .main-content-wrapper {
    align-items: center;
    padding: 60px 0 186px 0
  }@media (max-width: 975px) {

  .galaxy .main-content-wrapper {
      flex-direction: column;
      align-items: center;
      min-height: 400px;
      padding-bottom: 100px
  }
    }@media (max-width: 780px) {

  .galaxy .main-content-wrapper {
      align-items: flex-start
  }
    }@media (max-width: 469px) {

  .galaxy .main-content-wrapper {
      min-height: 600px;
      padding-bottom: 10px
  }
    }.galaxy .showcase {
    position: relative;
    margin-top: 40px;
    left: -20px;
    transform: scale(.8);
    transform-origin: top left;
    top: 100px;
    min-height: 460px
  }@media (min-width: 475px) {

  .galaxy .showcase {
      transform: scale(0.9);
      top: 20px;
      left: -40px
  }
    }@media (min-width: 975px) {

  .galaxy .showcase {
      transform: scale(1, 1);
      top: -70px
  }
    }.galaxy .card {
    position: absolute;
    width: auto;
    height: auto;
    overflow: hidden;
    background-size: cover;
    background-color: transparent
  }.galaxy .card:first-of-type {
      position: relative;
    }.galaxy .card:nth-child(1) {
      top: 120px;
      left: 100px;
      height: 316px;
      width: 500px;
      background-image: url(/assets/hidock-screenshot.png);
      background-size: auto 100%;
      background-repeat: no-repeat;
      background-position: center;

      transform: scale(1, 1) rotate(4deg);
      box-shadow: none
    }.galaxy .card:nth-child(1):hover {
        transform: scale(1.1, 1.1) translateY(-16px) rotate(0deg);
      }.galaxy .card:nth-child(2) {
      top: -40px;
      left: 200px;
      background-image: url(/assets/hidock-app-icon.png);
      background-size: auto 100%;
      background-repeat: no-repeat;
      background-position: center;
    }.galaxy .hero-card {
    box-shadow: none;
    transform: scale(1);
    height: 320px;
    width: 320px;
  }.break-this-safe {
  background: #000;
  color: #fff;
  z-index: 1;
}.break-this-safe .tint-color {
    color: #519D9E;
  }.break-this-safe .external-link:hover {
    border-color: #519D9E;
  }.break-this-safe .wave {
    z-index: 2;
    pointer-events: none
  }.break-this-safe .wave-top {
    top: -8px;
  }.break-this-safe .wave-top path {
      fill: #f7fafb;
    }.break-this-safe .wave-bottom {
    bottom: -8px;
  }.break-this-safe .main-content-wrapper {
    align-items: center
  }@media (max-width: 975px) {

  .break-this-safe .main-content-wrapper {
      flex-direction: column;
      align-items: center;
      padding-top: 110px
  }
    }@media (max-width: 780px) {

  .break-this-safe .main-content-wrapper {
      align-items: flex-start
  }
    }@media (max-width: 469px) {

  .break-this-safe .main-content-wrapper {
      min-height: 790px;
      padding-bottom: 10px
  }
    }.break-this-safe .showcase {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 400px;
    max-height: 600px;
    z-index: 1;
  }.break-this-safe .video-card {
    position: absolute;
    width: auto;
    height: auto;
    overflow: hidden;
    top: 200px;
    left: 200px;
    z-index: 0;
    
    transform: scale(.8, .8) rotate(10deg);
    box-shadow: 0px 4px 24px 2px rgba(14, 30, 37, 0.16)
  }.break-this-safe .video-card:hover {
      transform: scale(.8, .8) translateY(-16px) rotate(2deg);
    }.break-this-safe .video-card video {
      position: relative;
      padding: 8px 8px 4px 8px;
      border-radius: 16px;
      width: 400px;
    }.break-this-safe .watch-wrapper {
    display: block;
    position: relative;
    width: 264px;
    top: 120px;
    z-index: 1;
  }.break-this-safe .watch-wrapper img {
      width: 100%;
    }.break-this-safe .watch-wrapper video {
      position: absolute;
      top: 403px;
      left: 38px;
      width: 179px;
    }.break-this-safe .watch-wrapper .watch-frame-closed {
      display: none;
    }@media (max-width: 975px) {

  .break-this-safe .watch-wrapper {
      top: 0;
  }

      .break-this-safe .watch-wrapper video {
        top: 133px;
        left: 45px;
      }

      .break-this-safe .watch-wrapper .watch-frame-closed {
        display: block;
      }

      .break-this-safe .watch-wrapper .watch-frame-open {
        display: none;
      }
    }.miscelanious-is-a-funny-word {
  background: #fff;
  position: relative;
  flex-direction: column;
  z-index: 1;
}.miscelanious-is-a-funny-word p {
    margin-top: 8px;
  }.miscelanious-is-a-funny-word .main-content-wrapper {
    align-items: center;
    padding-bottom: 30px;
    min-height: 730px;
    margin-top: -40px;
  }.miscelanious-is-a-funny-word .content {
    max-width: 100%;
  }.miscelanious-is-a-funny-word ul {
    list-style-type: none;
    padding: 0;
    margin: 40px 0 0 0;
  }.miscelanious-is-a-funny-word .flexing-like-a-douche {
    display: flex;
    align-items: center;
  }.miscelanious-is-a-funny-word .detail {
    width: 40px;
    height: 40px;
    margin-right: 16px;
    padding-top: 4px;
  }.miscelanious-is-a-funny-word .detail img {
      width: 100%;
    }.miscelanious-is-a-funny-word .wrapper p {
    margin: 0;
  }.people-id-like-to-meet ul {
    -moz-column-count: 5;
         column-count: 5;
    -moz-column-width: 190px;
         column-width: 190px;
  }.people-id-like-to-meet .tick {
    display: block;
    box-sizing: content-box;
    height: 18px;
    width: 18px;
    border: 2px solid #0E1E25;
    border-radius: 4px;
    margin-right: 8px;
  }.people-id-like-to-meet .checked .tick {
    border: 2px solid #219653;
    border: 2px solid color(display-p3 0.056 0.567 0.169);
    background: rgba(33, 150, 83, 0.17);
    background: color(display-p3 0.086 0.578 0.195 / 0.17);
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTEiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDExIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTQuMTMzMDUgNC43ODUxNUwyLjQ4MDYgMy4xMzI3QzEuOTEzMTMgMi41NjUyMiAwLjk5MzA3NiAyLjU2NTIyIDAuNDI1NjA0IDMuMTMyN0MtMC4xNDE4NjggMy43MDAxNyAtMC4xNDE4NjggNC42MjAyMiAwLjQyNTYwNCA1LjE4NzY5TDMuMDc5NzQgNy44NDE4MkMzLjQ2MjQ2IDguMjI0NTUgNC4wMDU1NiA4LjM0OTE1IDQuNDkyNzEgOC4yMTU2M0M0Ljc1MzE2IDguMTU3NzEgNS4wMDA3NiA4LjAyNzQzIDUuMjAzNDEgNy44MjQ3OUwxMC41NDc2IDIuNDgwNkMxMS4xMTUxIDEuOTEzMTMgMTEuMTE1MSAwLjk5MzA3NiAxMC41NDc2IDAuNDI1NjA0QzkuOTgwMTIgLTAuMTQxODY4IDkuMDYwMDcgLTAuMTQxODY4IDguNDkyNiAwLjQyNTYwNEw0LjEzMzA1IDQuNzg1MTVaIiBmaWxsPSIjMjE5NjUzIi8+PC9zdmc+);
    background-repeat: no-repeat;
    background-position: 4px 5px;
  }.people-id-like-to-meet .checked a {
    color: #219653;
    color: color(display-p3 0.056 0.567 0.169);
  }.people-id-like-to-meet li {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
    margin-right: -8px;
  }.people-id-like-to-meet li a {
    font-size: 18px;
    color: #0E1E25;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 2px solid #fff;
    padding-top: 2px
  }.people-id-like-to-meet li a:hover {
      border-bottom: 2px solid #219653;
      border-bottom: 2px solid color(display-p3 0.056 0.567 0.169);
    }.people-id-like-to-meet .people-at-wwdc {
    background: #F9FAFB;
    border-radius: 16px;
    padding: 24px;
    margin: 40px -16px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
    border: 0.5px solid #ddd;
  }.people-id-like-to-meet .people-at-wwdc h3 {
      font-size: 20px;
    }.people-id-like-to-meet .people-at-wwdc li a {
      border-bottom: 2px solid #F9FAFB
    }.people-id-like-to-meet .people-at-wwdc li a:hover {
        border-bottom: 2px solid #219653;
        border-bottom: 2px solid color(display-p3 0.056 0.567 0.169);
      }.miscelanious-is-a-funny-word .main-content-wrapper.social {
  margin-top: 64px;
}.miscelanious-is-a-funny-word .main-content-wrapper.footer {
  display: block;
  padding-bottom: 30px;
  min-height: 0px;
  margin-top: 40px;
}.miscelanious-is-a-funny-word .main-content-wrapper.footer p {
    font-size: 14px;
    margin-bottom: 4px;
  }.in-the-year-2000 .flexing-like-a-douche,
.social .flexing-like-a-douche {
  display: flex;
  align-items: flex-start;
}.in-the-year-2000 .flexing-like-a-douche .detail, .social .flexing-like-a-douche .detail {
    flex-basis: 40px;
  }.in-the-year-2000 .flexing-like-a-douche .wrapper, .social .flexing-like-a-douche .wrapper {
    flex-basis: 95%;
  }.in-the-year-2000 li,
.social li {
  display: block;
  position: relative;
  padding: 8px;
  margin-top: -8px;
  margin-left: -8px;
  border-radius: 4px;
  margin-bottom: 24px
}.in-the-year-2000 li:hover, .social li:hover {
    background: rgba(0, 179, 229, .1);
    cursor: pointer;
  }.in-the-year-2000 li .whole-thang-is-a-target, .social li .whole-thang-is-a-target {
    position: absolute;
    top: 0;
    left: 0;
  }.in-the-year-2000 .frames:hover {      background: rgba(059, 191, 248, .1); }.in-the-year-2000 .sketchcasts:hover { background: rgba(069, 116, 174, .1); }.in-the-year-2000 .talks:hover {       background: rgba(010, 158, 251, .1); }.social .twitter:hover {               background: rgba(097, 159, 230, .1); }.social .mastodon:hover {              background: rgba(040, 044, 055, .1); }.social .letterboxd:hover {            background: rgba(040, 044, 055, .1); }.social .dribbble:hover {              background: rgba(176, 092, 131, .1); }.social .github:hover {                background: rgba(023, 021, 022, .1); }.social .apple-music:hover {           background: rgba(213, 110, 125, .1); }.social .strava:hover {                background: rgba(219, 098, 058, .1); }.social .psn:hover,
.social .switch:hover {
  background: white;
  cursor: auto;
}.dribbble img {
    border-radius: 999px;
  }.forohfor {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background: #262527;
	color: #fff;
}.forohfor .rapper {
		display: flex;
		flex-grow: 1;
		align-items: center;
		justify-content: center;
	}.forohfor h1 {
		font-family: ui-rounded, "SF-Pro-Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";;
		font-size: 40px;
		text-align: center;
	}.forohfor .footer {
		position: relative;
		height: 104px;
		background: #1F1D1F;
		display: flex;
		width: 100%;
		align-items: center;
	}.forohfor a {
		width: 100%;
		text-align: center;
		color: inherit;
		text-decoration: none;
		z-index: 2
	}.forohfor a:hover {
			text-decoration: underline;
		}.forohfor .video-rapper {
		display: flex;
		justify-content: center;
		position: absolute;
		width: 100%;
		height: 280px;
		top: -199px;
		z-index: 1	
	}@media (max-width: 463px) {
	
	.forohfor .video-rapper {
			height: 220px;	
			top: -157px	
	}
		}.forohfor video {
		position: absolute;
	    display: block;
	    margin: 0 auto;
	    height: 100%;
	}/**
 * @license
 * MyFonts Webfont Build ID 4175828, 2021-09-04T14:05:27-0400
 *
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are
 * explicitly restricted from using the Licensed Webfonts(s).
 *
 * You may obtain a valid license at the URLs below.
 *
 * Webfont: MyriadPro-Regular by Adobe
 * URL: https://www.myfonts.com/fonts/adobe/myriad/regular/
 *
 * Webfont: MyriadPro-Semibold by Adobe
 * URL: https://www.myfonts.com/fonts/adobe/myriad/semibold/
 *
 *
 * Webfonts copyright: © 1992, 1994, 1997, 2000, 2004 Adobe Systems Incorporated. All rights reserved.
 *
 * © 2021 MyFonts Inc
*/@font-face {
  font-family: "MyriadPro-Semibold";
  src: url('../assets/fonts/MyriadProSemibold/font.woff2') format('woff2'), url('../assets/fonts/MyriadProSemibold/font.woff') format('woff');
}@font-face {
  font-family: "MyriadPro-Regular";
  src: url('../assets/fonts/MyriadProRegular/font.woff2') format('woff2'), url('../assets/fonts/MyriadProRegular/font.woff') format('woff');
}:root {
  --rounded: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
}* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  color: #0e1e25;
  font-size: 18px;
  margin: 0;
  background: #f7fafb;
}h1 {
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
  font-family: var(--rounded);
  font-size: 72px;
  font-weight: 900;
  margin: 0;
}h2 {
  font-size: 52px;
  font-weight: bold;
  margin: 0
}@media (max-width: 520px) {h2 { font-size: 42px
} }h3 {
  font-size: 36px;
  margin: 0
}@media (max-width: 520px) {h3 { font-size: 28px
} }h4 {
  font-weight: 600;
  margin: 0 0 4px 0;
}p {
  margin-top: 16px;
  opacity: .7;
  line-height: 1.4em;
}p a {
  display: inline-block;
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid rgba(0, 179, 229, 0.3)
}p a:hover {
    border-color: rgba(0, 179, 229, 1);
  }a.external-link {
  display: inline-block;
  font-weight: 500;
  text-decoration: none;
  margin-top: 8px;
  border-bottom: 2px solid rgba(0, 179, 229, 0)
}a.external-link::after {
    content: "→";
    position: absolute;
    margin-left: 4px;
  }a.external-link:hover {
    border-color: rgba(0, 179, 229, 1);
  }.timestamp {
  position: relative;
  bottom: -8px;
  font-size: 14px;
  opacity: 0.4;
  margin: 0 0 -8px 2px ;
  font-weight: 500;
}.whole-thang-is-a-target {
  display: block;
  height: 100%;
  width: 100%;
  text-decoration: none;
}.ninja-links {
  color: inherit;
  text-decoration: none;
  border: none;
}.ninja-links:hover {
  cursor: text;
}.papa-wrapper {
  width: 100vw;
  overflow-x: hidden;
}.wave {
  display: block;
  position: absolute;
  z-index: 9;
  width: 100vw;
  min-width: 1400px;
  height: auto;
}.wave-bottom {
  bottom: -8px;
}.wave-top {
  top: -75px;
}.card {
  display: block;
  position: relative;
  width: 480px;
  height: 360px;
  background: #fff;
  border-radius: 16px;

  transition: transform 0.3s cubic-bezier(.83, 0, .17, 1);
}.not-actually-a-card {
  transition: transform 0.3s cubic-bezier(.83, 0, .17, 1);
}.depth-level-1 {
  box-shadow: 0px 4px 34px 2px rgba(14, 30, 37, 0.16);
  z-index: 3
}.depth-level-1:hover {
    transform: translateY(-16px);
  }.depth-level-2 {
  transform: scale(.8, .8);
  box-shadow: 0px 4px 24px 2px rgba(14, 30, 37, 0.16);
  z-index: 2
}.depth-level-2:hover {
    transform: scale(.8, .8) translateY(-16px);
  }.depth-level-3 {
  transform: scale(.7, .7);
  box-shadow: 0px 4px 14px 2px rgba(14, 30, 37, 0.16);
  z-index: 1
}.depth-level-3:hover {
    transform: scale(.7, .7) translateY(-16px);
  }.main-content-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  position: relative;
  width: 90%;
  max-width: 1024px;
  margin: auto;
  z-index: 2;
}.content {
  max-width: 600px;
}.background {
  display: block;
  position: absolute;
  bottom: 0;
  z-index: 1;
}.section {
  position: relative;
  display: flex;
  justify-content: center;
}#easterNope {
  z-index: 999;
  position: fixed;
  left: -280px;
  top: 50%;
  height: 200px;
  animation-fill-mode: forwards;
}.popin {
  animation: 1s popin cubic-bezier(0.770, 0.000, 0.175, 1.000);
}.popout {
  animation: 1s popout cubic-bezier(0.770, 0.000, 0.175, 1.000);
}@keyframes popin {
  from { left: -280px; }
  to {left: 0;}
}@keyframes popout {
  from { left: 0px; }
  to {left: -280px;}
}.hide {
  display: none;
}video {
  pointer-events: none;
}video::-webkit-media-controls-panel {
  display: none !important;
  opacity: 1 !important;
}