:root {
  --section-gaps: 60px;
  --black: black;
  --white: white;
  --purple: #c265fb;
  --white-40: #fcf9f966;
  --white-50: #fcf9f980;
  --purple-dk: #1f042b;
  --red: red;
  --desktop: 1440px;
  --tablet: 768px;
  --h2-to-h3: 24px;
  --desktoph: 968px;
  --desktopscrollmask: 320px;
  --grid-gaps: 24px;
  --scrolling-gap: 20vh;
}

.w-layout-grid {
  grid-row-gap: 16px;
  grid-column-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.w-layout-hflex {
  flex-direction: row;
  align-items: flex-start;
  display: flex;
}

body {
  color: #333;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 20px;
}

a {
  text-decoration: underline;
}

.zzz {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-decoration: none;
  display: flex;
}

.zzz.zzzz {
  pointer-events: auto;
}

.body {
  grid-column-gap: var(--section-gaps);
  grid-row-gap: var(--section-gaps);
  background-color: var(--black);
  flex-flow: column;
  display: flex;
}

.h2 {
  z-index: 2;
  max-width: 62vw;
  color: var(--white);
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Barlow Semi Condensed, sans-serif;
  font-size: 64px;
  font-style: italic;
  font-weight: 400;
  line-height: 100%;
  text-decoration: none;
  position: relative;
}

.h2.purple {
  color: var(--purple);
}

.h2.device_dynamic {
  max-width: 75vw;
}

.h3 {
  z-index: auto;
  min-width: auto;
  color: var(--white);
  text-align: left;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Public Sans, sans-serif;
  font-size: 36px;
  font-style: italic;
  font-weight: 400;
  line-height: 150%;
  text-decoration: none;
}

.h3.purple {
  color: var(--purple);
  text-align: center;
  overflow: visible;
}

.h3.nowrap {
  white-space: nowrap;
}

.stat-copy {
  color: #fff;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Barlow Semi Condensed, sans-serif;
  font-size: 136px;
  font-weight: 500;
  line-height: 120px;
  text-decoration: none;
}

.legend {
  color: var(--white);
  letter-spacing: .03em;
  text-transform: none;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Public Sans, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 150%;
  text-decoration: none;
}

.legend.allcaps {
  text-align: center;
  text-transform: uppercase;
  flex: 0 auto;
  justify-content: center;
  align-self: auto;
  align-items: center;
  font-weight: 700;
  display: flex;
}

.legend.allcaps.grey {
  color: var(--white-40);
  text-align: left;
  justify-content: flex-start;
  align-items: flex-start;
}

.legend.allcaps.grey.nowrap {
  flex: 0 auto;
}

.legend.allcaps.grey.centered {
  text-align: center;
}

.legend.nav {
  color: var(--black);
}

.body-copy {
  color: var(--white);
  margin-top: 0;
  margin-bottom: 0;
  font-family: Public Sans, sans-serif;
  font-size: 24px;
  font-weight: 300;
  line-height: 150%;
  text-decoration: none;
}

.body-copy.dynamic_color {
  color: var(--white-40);
  font-size: 24px;
}

.body-copy.dynamic_color.centered {
  text-align: center;
  max-width: 50vw;
}

.body-copy.dynamic_color.centered.device_dynamic {
  max-width: 65vw;
}

.body-copy.bullets {
  line-height: 165%;
}

.caption {
  color: #fff;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Public Sans, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 150%;
  text-decoration: none;
}

.scroll-wrapper {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.scroll-wrapper.brands {
  justify-content: center;
  align-items: center;
  width: 180px;
  height: 120px;
}

.scroll-wrapper.big {
  max-width: 320px;
  max-height: 160px;
}

.vectors-wrapper {
  opacity: .35;
  color: var(--white-40);
  object-fit: fill;
  flex-flow: column;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: flex-start;
  text-decoration: none;
  display: flex;
}

.navsection {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.navigation {
  background-color: #fff;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  padding-left: 24px;
  padding-right: 24px;
  text-decoration: none;
  display: flex;
}

.navbarcontainer {
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  text-decoration: none;
  display: flex;
}

.navbar-content {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  text-decoration: none;
  display: flex;
}

.navbar-brand {
  flex: 0 auto;
  justify-content: flex-start;
  align-items: flex-start;
  text-decoration: none;
  display: flex;
}

.logo {
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  height: 36px;
  text-decoration: none;
  display: flex;
}

.navname {
  color: #000;
  letter-spacing: .01em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Barlow Semi Condensed, sans-serif;
  font-size: 24px;
  font-style: italic;
  font-weight: 400;
  line-height: 48px;
  text-decoration: none;
}

.navbar-menu {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.navbar-link {
  flex: 0 auto;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 24px 12px;
  text-decoration: none;
  display: flex;
}

.navitem {
  color: #000;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Public Sans, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 150%;
  text-decoration: none;
}

.navbutton {
  grid-column-gap: 8px;
  border: 2px solid #000;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  padding: 8px 16px;
  text-decoration: none;
  display: flex;
}

.section {
  grid-row-gap: 24px;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  align-items: center;
  width: 100vw;
  min-height: 100vh;
  margin-bottom: 0;
  text-decoration: none;
  display: flex;
}

.section.recently {
  padding-top: var(--section-gaps);
  grid-row-gap: 0px;
  justify-content: flex-start;
  align-items: flex-start;
  padding-bottom: 140px;
  padding-left: 0;
  padding-right: 0;
}

.section.recently.other {
  justify-content: flex-start;
  align-items: center;
}

.section.alt {
  background-color: var(--purple-dk);
}

.quotecomma {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.h1 {
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  align-self: auto;
  font-family: Rubik, sans-serif;
  font-size: 96px;
  font-weight: 900;
  line-height: 80px;
}

.container {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 24px;
  text-decoration: none;
  display: flex;
}

.container.fullvh {
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.container.skills {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  width: 100%;
}

.container.centered {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  justify-content: flex-start;
  align-items: center;
}

.container.centered._100vh {
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.container.centered._24 {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
}

.container.centered._24._100vh {
  grid-column-gap: var(--section-gaps);
  grid-row-gap: var(--section-gaps);
}

.container._4-gaps {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
}

.container.row {
  grid-column-gap: 22px;
  grid-row-gap: 22px;
  flex-flow: row;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  align-self: auto;
  width: auto;
  max-width: none;
  padding: 0;
  display: flex;
}

.container._24 {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
}

.container.recently {
  width: 100vw;
  padding-left: 84px;
  padding-right: 84px;
}

.container.recently.info {
  flex-flow: row;
  align-self: flex-start;
  width: auto;
  padding-top: 0;
  padding-bottom: 60px;
}

.container.recently.info.column {
  flex-flow: column;
  max-width: 50vw;
  padding: 12px 24px 24px;
}

.container.recently.logo {
  z-index: 1;
  height: auto;
  padding-top: 0;
  padding-bottom: 0;
  position: sticky;
  top: 0;
}

.container.recently.top {
  padding: 0;
}

.container.device_dynamic {
  grid-column-gap: 16vh;
  grid-row-gap: 16vh;
  justify-content: flex-start;
  align-items: center;
}

.container._0pad {
  padding: 0;
}

.container.title {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  padding-left: 0;
  padding-right: 0;
}

.container.other {
  padding-left: 48px;
}

.image-wrapper {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.image-wrapper.recently_device_dynamic {
  background-color: var(--black);
  border-radius: 6px;
  align-self: flex-start;
  padding: 16px;
}

.image-wrapper.hero {
  max-width: 30vh;
  max-height: 30vh;
}

.text-wrapper {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.text-wrapper.centered {
  clear: right;
  justify-content: flex-start;
  align-items: center;
}

._2-columns {
  grid-column-gap: 24px;
  justify-content: center;
  align-items: flex-start;
  width: 100vw;
  text-decoration: none;
  display: flex;
}

.column {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  flex-direction: column;
  height: auto;
  padding: 24px;
  text-decoration: none;
}

.column.sticky {
  position: sticky;
  top: 0;
}

.column.deviceappropriatewidth {
  width: 50%;
}

.grid {
  grid-column-gap: 30vh;
  grid-row-gap: 30vh;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  grid-auto-flow: row;
  place-content: center;
  align-self: flex-start;
  place-items: stretch center;
  display: grid;
}

.grid._3col {
  grid-column-gap: 4vw;
  grid-row-gap: 4vw;
  grid-template-columns: 1fr 1fr 1fr;
  justify-items: stretch;
}

.scrollbottomslug {
  height: 100vh;
}

.scrollcolumn {
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}

.utility-page-wrap {
  justify-content: center;
  align-items: center;
  width: 100vw;
  max-width: 100%;
  height: 100vh;
  max-height: 100%;
  display: flex;
}

.utility-page-content {
  text-align: center;
  flex-direction: column;
  width: 260px;
  display: flex;
}

.utility-page-form {
  flex-direction: column;
  align-items: stretch;
  display: flex;
}

.columns {
  grid-column-gap: 84px;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.extra {
  grid-row-gap: 24px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.icon {
  color: #fff;
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Barlow Semi Condensed, sans-serif;
  font-size: 200px;
  font-weight: 500;
  line-height: 200px;
  text-decoration: none;
}

.image {
  object-fit: contain;
}

.image.big {
  max-width: 60svw;
  max-height: 60svh;
}

.flex-block {
  flex-flow: row;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.flex-block.v {
  flex-flow: column;
}

.link {
  color: var(--white-40);
}

.link_specialchar {
  text-decoration: none;
}

.seperator {
  background-color: var(--purple-dk);
  color: var(--purple);
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  padding: 24px;
  font-family: Barlow Semi Condensed, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 150%;
  text-decoration: none;
}

.hover_video_wrapper {
  opacity: .86;
  cursor: auto;
  mix-blend-mode: normal;
  flex-flow: column;
  justify-content: center;
  align-self: auto;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.embed-wrapper {
  justify-content: center;
  align-items: flex-start;
  width: 100vw;
  display: flex;
}

@media screen and (max-width: 991px) {
  .h2 {
    text-align: center;
    font-size: 42px;
  }

  .h2.purple {
    font-size: 42px;
  }

  .h2.device_dynamic {
    max-width: 80vw;
  }

  .h3 {
    font-size: 24px;
  }

  .h3.purple {
    font-size: 28px;
    line-height: 120%;
  }

  .h3.scroll-text {
    z-index: 100;
    background-color: var(--black);
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 28px;
    line-height: 140%;
  }

  .legend.allcaps.grey.nowrap.devicedynamic, .legend.allcaps.grey.centered.device_dynamic {
    font-size: 14px;
  }

  .body-copy.dynamic_color.centered.device_dynamic {
    max-width: 70vw;
  }

  .body-copy.dynamic_color.device_dynamic {
    font-size: 18px;
  }

  .navigation {
    padding-right: 0;
  }

  .navbar-menu {
    max-width: unset;
  }

  .navbar-link, .navbutton {
    justify-content: center;
  }

  .h1 {
    font-size: 48px;
    line-height: 42px;
  }

  .container.skills {
    align-self: auto;
  }

  .container.recently.info {
    flex-flow: wrap;
  }

  .container.recently.info.column {
    min-width: auto;
    max-width: none;
    padding-bottom: 12px;
  }

  .container.recently.logo {
    padding-bottom: 12px;
    padding-left: 98px;
  }

  .container.device_dynamic {
    grid-column-gap: 5vh;
    grid-row-gap: 5vh;
  }

  .container.other {
    padding-left: 48px;
  }

  .image-wrapper.recently_device_dynamic {
    width: 23%;
    padding: 8px 10px;
  }

  ._2-columns {
    flex-direction: column;
    align-items: center;
  }

  ._2-columns.device_dynamic {
    flex-flow: wrap;
    align-self: auto;
  }

  .column {
    width: 80vw;
  }

  .column.deviceappropriatewidth {
    width: 90%;
    padding: 0;
  }

  .grid {
    flex-flow: wrap;
    justify-content: flex-start;
    place-items: center;
    display: flex;
  }

  .grid._1col {
    justify-content: center;
    align-items: flex-start;
  }

  .grid._3col {
    grid-column-gap: 5vw;
    grid-row-gap: 5vw;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    grid-auto-flow: row;
    justify-content: center;
    align-items: center;
    display: grid;
  }

  .scrollbottomslug {
    height: 120vh;
  }

  .scrollcolumn {
    flex-flow: row;
  }

  .columns {
    grid-column-gap: 5vw;
    grid-row-gap: 5vw;
    flex-flow: wrap;
  }

  .image.recently_device_dynamic {
    height: 100%;
  }
}

@media screen and (max-width: 767px) {
  .h2.purple {
    text-align: left;
  }

  .h2.purple.nowrap {
    white-space: nowrap;
  }

  .h2.device_dynamic {
    font-size: 36px;
  }

  .h3.purple, .h3.scroll-text {
    font-size: 24px;
  }

  .body-copy.dynamic_color {
    color: var(--white-50);
    font-size: 18px;
  }

  .body-copy.bullets {
    font-size: 18px;
    line-height: 180%;
  }

  .section {
    max-height: none;
    padding-left: 12px;
    padding-right: 12px;
  }

  .h1 {
    font-size: 42px;
  }

  .container.skills {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    padding-left: 48px;
  }

  .container.centered._100vh.also {
    height: auto;
  }

  .container._4-gaps {
    padding-top: 0;
  }

  .container.row.contact {
    flex-flow: wrap;
    justify-content: center;
    align-items: flex-start;
  }

  .container.recently.info.column {
    width: 80svw;
    min-width: auto;
    max-width: none;
  }

  .container.other {
    padding-left: 48px;
  }

  .grid._3col {
    grid-column-gap: 5vw;
    grid-row-gap: 5vw;
    flex-flow: column;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }

  .scrollbottomslug {
    height: 120svh;
  }

  .columns {
    grid-column-gap: 10vw;
    grid-row-gap: 10vw;
    flex-direction: column;
    align-items: center;
  }

  .extra {
    grid-row-gap: 8px;
  }

  .image.big {
    max-width: 80svw;
    max-height: 80svh;
  }

  .link {
    font-size: 20px;
  }
}

@media screen and (max-width: 479px) {
  .h2 {
    font-size: 24px;
  }

  .h2.purple {
    font-size: 24px;
    line-height: 118%;
  }

  .h2.purple.nowrap {
    white-space: nowrap;
    word-break: normal;
  }

  .h2.device_dynamic {
    font-size: 24px;
    line-height: 118%;
  }

  .h3 {
    font-size: 20px;
    line-height: 130%;
  }

  .h3.purple {
    line-height: 116%;
  }

  .h3.purple.left {
    text-align: left;
    font-size: 20px;
  }

  .h3.scroll-text {
    min-width: 80svw;
    font-size: 20px;
  }

  .legend.allcaps.grey.nowrap.devicedynamic {
    font-size: 12px;
  }

  .body-copy.dynamic_color, .body-copy.dynamic_color.centered.device_dynamic, .body-copy.dynamic_color.device_dynamic, .body-copy.bullets {
    font-size: 14px;
  }

  .h1 {
    font-size: 30px;
    line-height: 28px;
  }

  .h1.title {
    line-height: 34px;
  }

  .container {
    padding: 12px;
  }

  .container.fullvh._0pad {
    width: 80svw;
    height: 100svh;
  }

  .container.centered {
    height: auto;
    padding: 12px;
  }

  .container.centered._100vh {
    height: 100vh;
  }

  .container.centered._100vh.also {
    padding: 0;
  }

  .container.row {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }

  .container.recently.info {
    height: auto;
    padding-left: 12px;
    padding-right: 0;
  }

  .container.recently.info.column {
    grid-column-gap: 4px;
    grid-row-gap: 4px;
    width: 95svw;
    min-width: auto;
    max-width: none;
  }

  .container.recently.logo {
    padding-left: 24px;
  }

  .container.title {
    grid-column-gap: 4px;
    grid-row-gap: 4px;
  }

  .container.other {
    padding-bottom: 24px;
    padding-left: 10px;
  }

  .image-wrapper.recently_device_dynamic {
    width: 40%;
  }

  .image-wrapper.hero {
    justify-content: flex-start;
    align-items: flex-start;
  }

  ._2-columns {
    width: 80svw;
  }

  .column.sticky {
    flex: auto;
    align-self: auto;
    padding: 0;
  }

  .column.deviceappropriatewidth {
    width: 100%;
  }

  .grid {
    flex-flow: column;
    grid-template-rows: auto auto auto auto auto auto;
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(auto, auto);
    justify-content: center;
    align-items: flex-start;
  }

  .grid._1col {
    justify-content: center;
    align-items: center;
  }

  .grid._3col {
    display: flex;
  }

  .scrollbottomslug {
    height: 120svh;
  }

  .icon {
    font-size: 140px;
    line-height: 140px;
  }
}