:root {
  --onyx-200: #19181c;
  --light-text: #e7e7e7;
  --line: #2a282f;
  --onyx-100: #3c3a42;
  --dark-text: #a2a2a4;
  --accent: #e53e19;
}

body {
  background-color: var(--onyx-200);
  color: var(--light-text);
  font-family: Switzer, sans-serif;
  font-size: 1vw;
  font-weight: 400;
}

h1 {
  letter-spacing: -.02em;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Anton, sans-serif;
  font-size: 9em;
  font-weight: 400;
  line-height: 1;
}

h2 {
  letter-spacing: -.02em;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Anton, sans-serif;
  font-size: 6em;
  font-weight: 400;
  line-height: 1.2;
}

h3 {
  letter-spacing: -.02em;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Anton, sans-serif;
  font-size: 5em;
  font-weight: 400;
  line-height: 1.2;
}

h4 {
  letter-spacing: -.02em;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Anton, sans-serif;
  font-size: 4em;
  font-weight: 400;
  line-height: 1.2;
}

h5 {
  letter-spacing: -.02em;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Anton, sans-serif;
  font-size: 3em;
  font-weight: 400;
  line-height: 1.2;
}

h6 {
  letter-spacing: -.02em;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Anton, sans-serif;
  font-size: 2.5em;
  font-weight: 400;
  line-height: 1.2;
}

p {
  letter-spacing: -.01em;
  margin-bottom: 0;
  font-family: Switzer, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

a {
  color: #fff;
  text-decoration: none;
}

ul, ol {
  margin-bottom: 0;
  padding-left: 20px;
}

li {
  font-size: 16px;
  line-height: 1.5;
}

img {
  max-width: 100%;
  display: inline-block;
}

strong {
  font-weight: 700;
}

blockquote {
  letter-spacing: -.02em;
  border-left: 5px #e2e2e2;
  margin-bottom: 0;
  padding: 0;
  font-family: Anton, sans-serif;
  font-size: 4em;
  font-weight: 400;
  line-height: 1;
}

figure {
  margin-bottom: 10px;
}

figcaption {
  text-align: center;
  margin-top: 5px;
}

.section {
  z-index: 5;
  width: 100%;
  padding-top: 11em;
  padding-bottom: 11em;
  position: relative;
}

.section.footer {
  z-index: 5;
  padding-top: 0;
  padding-bottom: 3.5em;
}

.section.hero {
  text-align: center;
  padding-top: 3em;
  padding-bottom: 0;
}

.section.blog {
  background-color: var(--line);
  padding-top: 8em;
  padding-bottom: 8em;
  overflow: hidden;
}

.section.blog-hero {
  padding-top: 5em;
  padding-bottom: 0;
}

.section.home-hero {
  z-index: 0;
  height: 100vh;
  background-color: var(--onyx-100);
  justify-content: center;
  align-items: stretch;
  margin-top: -6em;
  padding-top: 3.5em;
  padding-bottom: 5em;
  display: flex;
}

.section.blog-page {
  background-color: var(--line);
  padding-bottom: 5em;
  overflow: hidden;
}

.section.track-section {
  z-index: 5;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-top: -1px;
  padding-top: 2em;
  padding-bottom: 2em;
  position: relative;
  overflow: hidden;
}

.section.interactive-slider {
  padding-bottom: 0;
}

.section.services {
  padding-top: 0;
}

.container {
  width: 100%;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 5.625em;
  padding-right: 5.625em;
}

.container.nav {
  padding-left: 3.5em;
  padding-right: 3.5em;
}

.container.footer {
  background-color: rgba(0, 0, 0, 0);
  padding-left: 2em;
  padding-right: 2em;
}

.container.large {
  padding-left: 2em;
  padding-right: 2em;
}

.line {
  width: 100%;
  height: 1px;
  background-color: var(--line);
  line-height: 1.4px;
}

.grid {
  grid-column-gap: 0px;
  grid-row-gap: 40px;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.grid.licenses {
  grid-column-gap: 1.5em;
  grid-row-gap: 1.5em;
  grid-template-columns: 1fr 1fr 1fr;
}

.grid.work {
  grid-column-gap: 2.5em;
  grid-row-gap: 5em;
  grid-template-columns: 1fr 1fr;
}

.grid.partners {
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.padding-bottom-0 {
  padding-bottom: 0;
}

.text-display-1 {
  text-transform: uppercase;
  font-size: 9em;
  line-height: 1;
}

.text-display-1.center {
  overflow: hidden;
}

.text-display-1.center.line-1 {
  font-family: Open Sans, sans-serif;
  font-size: 2em;
  font-weight: 400;
}

.text-display-1.center.line-2 {
  font-family: Changa One, Impact, sans-serif;
  font-size: 12em;
  line-height: .7;
}

.grid-thirds {
  grid-column-gap: 2em;
  grid-row-gap: 2em;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.button {
  border: 1px solid var(--onyx-100);
  color: var(--dark-text);
  text-transform: uppercase;
  border-radius: .5em;
  justify-content: center;
  align-items: center;
  padding: .9em 1em 1em;
  font-size: 14px;
  font-weight: 500;
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.rich-text {
  max-width: 40em;
  font-size: 18px;
  font-weight: 400;
}

.rich-text h1 {
  margin-bottom: 32px;
  font-size: 2.5em;
}

.rich-text h2 {
  margin-bottom: 32px;
  font-size: 2em;
}

.rich-text h3 {
  margin-bottom: 24px;
  font-size: 1.75em;
}

.rich-text h4 {
  margin-bottom: 24px;
  font-size: 1.5em;
}

.rich-text h5 {
  margin-bottom: 20px;
  font-size: 1.25em;
}

.rich-text h6 {
  margin-bottom: 20px;
  font-size: 1em;
}

.rich-text p {
  color: var(--dark-text);
  letter-spacing: 0;
  margin-bottom: 32px;
  line-height: 1.6;
}

.rich-text li {
  margin-bottom: 12px;
}

.rich-text ul {
  margin-bottom: 32px;
  padding-left: 20px;
}

.rich-text ol {
  overflow: visible;
}

.rich-text figcaption {
  color: var(--dark-text);
  text-transform: uppercase;
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.3;
}

.rich-text blockquote {
  margin-bottom: 32px;
  font-size: 2em;
}

.rich-text figure {
  margin-top: 56px;
  margin-bottom: 56px;
}

.rich-text.center {
  text-align: left;
}

.style-guide-color {
  height: 150px;
  margin-bottom: 12px;
}

.style-guide-color.onyx-100 {
  background-color: var(--onyx-100);
}

.style-guide-color.line {
  background-color: var(--line);
  border: 1px solid #1c1c1c;
}

.style-guide-color.light-text {
  background-color: var(--light-text);
}

.style-guide-color.dark-text {
  background-color: var(--dark-text);
}

.style-guide-color.accent {
  background-color: var(--accent);
}

.style-guide-color.onyx-200 {
  background-color: var(--onyx-200);
}

.nav-link {
  color: var(--dark-text);
  letter-spacing: -.01em;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  transition: color .4s cubic-bezier(.23, 1, .32, 1);
}

.nav-link:hover {
  color: var(--light-text);
}

.text-display-2 {
  font-size: 5.2em;
}

.text-display-3 {
  font-size: 2.5em;
}

.text-display-5 {
  font-size: 1.5em;
  line-height: 1.2;
}

.text-body-1 {
  letter-spacing: -.01em;
  font-family: Inter;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
}

.text-micro-1 {
  color: var(--dark-text);
  letter-spacing: .01em;
  text-transform: uppercase;
  font-family: Switzer, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
}

.text-micro-1.button-text {
  position: relative;
  top: 2px;
}

.nav-btn {
  display: none;
}

.header-nav {
  grid-column-gap: 2em;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  position: relative;
}

.logo-link {
  margin-left: 0;
  margin-right: 0;
  padding: 0;
}

.header {
  z-index: 100;
  width: 100%;
  height: 6em;
  background-color: rgba(0, 0, 0, 0);
  justify-content: space-between;
  align-items: center;
  display: flex;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.header-inner {
  width: 100%;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.reel {
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.reel.home-hero {
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 2em;
  padding-left: 2em;
  padding-right: 2em;
  display: flex;
}

.reel-title {
  perspective: 2000px;
  margin-bottom: 2em;
}

.col {
  width: 100%;
}

.col._11-24 {
  max-width: 45.8333%;
}

.col._10-24 {
  max-width: 41.6667%;
}

.col._6-24 {
  max-width: 25%;
}

.col._8-24 {
  max-width: 33.3333%;
}

.col._3-24 {
  max-width: 12.5%;
}

.col._9-24 {
  max-width: 37.5%;
}

.col._5-24 {
  max-width: 20.8333%;
}

.col._2-24 {
  max-width: 8.33333%;
}

.col._12-24 {
  max-width: 50%;
}

.col._7-24 {
  max-width: 29.1667%;
}

.col._1-24 {
  max-width: 4.16667%;
}

.col._4-24 {
  max-width: 16.6667%;
}

.col._4-24.text-small {
  width: 158px;
}

.col._13-24 {
  max-width: 54.1667%;
}

.col._14-24 {
  max-width: 58.3333%;
}

.col._15-24 {
  max-width: 62.5%;
}

.col._16-24 {
  max-width: 66.6667%;
}

.col._17-24 {
  max-width: 70.8333%;
}

.col._18-24 {
  max-width: 75%;
}

.col._19-24 {
  max-width: 79.1667%;
}

.col._20-24 {
  max-width: 83.3333%;
}

.col._21-24 {
  max-width: 87.5%;
}

.col._22-24 {
  max-width: 91.6667%;
}

.col._23-24 {
  max-width: 95.8333%;
}

.col._24-24 {
  max-width: 100%;
}

.style-guide-block {
  height: 4em;
  background-color: var(--onyx-100);
}

.o-grid {
  width: 100%;
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.row {
  width: 100%;
  flex-direction: column;
  align-items: stretch;
  display: flex;
}

.row.hero-title, .row.template {
  text-align: center;
  justify-content: center;
  align-items: center;
}

.row.style-guide {
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  flex-direction: row;
  justify-content: space-between;
}

.row.title-header {
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
}

.row.footer-bottom {
  flex-direction: row;
}

.row.blog {
  border-radius: 2em;
  flex-direction: column;
  justify-content: space-between;
  padding: 6em 3.625em 0;
}

.row.home-hero {
  z-index: 10;
  height: 100%;
  justify-content: flex-end;
  align-items: center;
  position: relative;
}

.row.home-hero-bottom {
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  position: absolute;
  top: auto;
  bottom: 0%;
  left: 0%;
  right: 0%;
  transform: translate(0, -.6em);
}

.row.footer {
  background-color: rgba(0, 0, 0, 0);
  justify-content: center;
  align-items: center;
  padding-top: 11em;
  padding-bottom: 11em;
}

.row.licenses {
  text-align: center;
  align-items: center;
}

.row.slider-info {
  flex-direction: row;
  justify-content: space-between;
}

.row.services {
  align-items: flex-end;
  position: relative;
}

.row.blog-header {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.about-card {
  border-radius: 1.5em;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.blog-card {
  height: 100%;
  border: 1px solid var(--onyx-100);
  border-radius: 1em;
  flex-direction: column;
  justify-content: space-between;
  padding: 1em;
  display: flex;
}

.footer-bottom {
  width: 100%;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.text-link {
  color: var(--dark-text);
  letter-spacing: -.01em;
  text-transform: uppercase;
  font-family: Nacelle;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  transition: color .4s cubic-bezier(.23, 1, .32, 1);
}

.text-link:hover {
  color: var(--light-text);
}

.footer-links {
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  line-height: .9px;
  display: flex;
}

.reel-title-mask {
  padding-left: 1em;
  padding-right: 1em;
  overflow: hidden;
}

.template-text {
  max-width: 37.5em;
  margin-bottom: 2.5em;
}

.top-bar {
  width: 100%;
  background-color: var(--accent);
  color: var(--light-text);
  text-align: center;
  letter-spacing: 0;
  text-transform: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px 24px;
  font-size: 16px;
  font-weight: 400;
  display: flex;
}

.licenses-item {
  width: 100%;
  max-width: 56.25em;
  background-color: var(--onyx-100);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 32px;
  display: flex;
}

.licenses-text {
  margin-top: .7em;
}

.margin-56 {
  margin-bottom: 3.5em;
}

.margin-80 {
  margin-bottom: 5em;
}

.margin-160 {
  margin-bottom: 10em;
}

.margin-2 {
  margin-bottom: .125em;
}

.margin-64 {
  margin-bottom: 4em;
}

.margin-144 {
  margin-bottom: 9em;
}

.margin-12 {
  margin-bottom: .75em;
}

.margin-16 {
  margin-bottom: 1em;
}

.margin-32 {
  margin-bottom: 2em;
}

.margin-176 {
  margin-bottom: 11em;
}

.margin-4 {
  margin-bottom: .25em;
}

.margin-24 {
  margin-bottom: 1.5em;
}

.margin-40 {
  margin-bottom: 2.5em;
}

.margin-128 {
  margin-bottom: 8em;
}

.margin-136 {
  margin-bottom: 8.5em;
}

.margin-120 {
  margin-bottom: 7.5em;
}

.margin-48 {
  margin-bottom: 3em;
}

.margin-8 {
  margin-bottom: .5em;
}

.margin-96 {
  margin-bottom: 6em;
}

.image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.image.logo {
  width: auto;
  height: auto;
  max-height: 10em;
  max-width: 250%;
  font-size: 1vw;
  position: static;
}

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

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

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

.text-body-2 {
  letter-spacing: -.01em;
  font-size: 16px;
  line-height: 1.3;
}

.image-contain {
  position: relative;
}

.image-contain.thumb {
  width: 100%;
  height: 15em;
  border-radius: .5em;
  overflow: hidden;
}

.image-contain.blog-thumb {
  padding-top: 56.25%;
}

.image-contain.work-thumb {
  height: 28.625em;
  overflow: hidden;
}

.image-contain.track-icon {
  width: 48px;
  height: 56px;
  margin-left: 2.5em;
  margin-right: 2.5em;
}

.image-contain.services-pattern {
  width: 3.5em;
  margin-top: -1.5em;
  margin-bottom: -1.5em;
}

.image-contain.services-pattern.item-2 {
  transform: translate(-3.5em);
}

.image-contain.services-thumb {
  z-index: 5;
  width: 31.1875em;
  height: 17.5625em;
  border-radius: 1.5em;
  position: absolute;
  top: 0%;
  bottom: auto;
  left: 0%;
  right: auto;
  overflow: hidden;
}

.image-contain.badge {
  width: 11.0625em;
  height: 4em;
  position: absolute;
  transform: rotate(-15deg);
}

.image-contain.footer-pattern {
  height: 3.5em;
  position: absolute;
  top: 0%;
  bottom: auto;
  left: 0%;
  right: 0%;
}

.image-contain.services-static {
  width: 31.1875em;
  height: 17.5625em;
  border-radius: 1.5em;
  position: absolute;
  top: 0%;
  bottom: auto;
  left: 0%;
  right: auto;
  overflow: hidden;
}

.image-contain.about-bg {
  z-index: -1;
  width: 33.625em;
  height: 27.375em;
  position: absolute;
  top: auto;
  bottom: 0%;
  left: auto;
  right: 0%;
  transform: translate(0, 12em);
}

.text-color-dark {
  color: var(--dark-text);
}

.text-right {
  text-align: right;
}

.button-inner {
  z-index: 10;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.button-icon {
  margin-left: 3.1875em;
}

.track {
  align-items: center;
  display: flex;
}

.track.row-2 {
  justify-content: flex-end;
}

.track-line {
  flex: none;
  align-items: center;
  display: flex;
}

.track-line.row-2 {
  justify-content: flex-end;
}

.track-item {
  height: 5em;
  flex: none;
  justify-content: center;
  align-items: center;
  display: flex;
}

.footer {
  background-color: var(--onyx-200);
}

.text-divider {
  color: var(--dark-text);
  letter-spacing: -.01em;
  text-transform: uppercase;
  font-family: Nacelle;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.slider {
  width: 100%;
  height: 43.125em;
  background-color: rgba(0, 0, 0, 0);
  border-radius: 2em;
  overflow: hidden;
}

.slider-mask {
  width: 100%;
  position: static;
  overflow: visible;
}

.slide {
  margin-right: 1em;
}

.blog-card-bottom {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.slider-nav {
  display: none;
}

.slider-right-arrow {
  width: 48px;
  height: 48px;
  border: 1px solid var(--onyx-100);
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  top: auto;
  bottom: 0%;
  left: auto;
  right: 0%;
  transform: translate(0, 2em);
}

.slider-left-arrow {
  width: 48px;
  height: 48px;
  border: 1px solid var(--onyx-100);
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  top: auto;
  bottom: 0%;
  left: auto;
  right: 0%;
  transform: translate(-1.5em, 2em);
}

.left-arrow-icon {
  transform: rotate(180deg);
}

.button-bg {
  width: 0%;
  height: 100%;
  background-color: var(--line);
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.blog-data {
  grid-column-gap: 1em;
  justify-content: center;
  align-items: center;
  display: flex;
}

.bar-link {
  color: var(--light-text);
}

.reel-contain {
  position: relative;
}

.reel-contain.home-hero {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
  overflow: hidden;
}

.reel-contain.work {
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.text-small {
  min-width: 216px;
}

.work-item {
  width: 100%;
  grid-column-gap: 1.5em;
  grid-row-gap: 1.5em;
  flex-direction: column;
  grid-template-rows: auto;
  grid-template-columns: 56px 1fr 56px;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  align-items: stretch;
  display: flex;
  position: relative;
}

.slide-nav {
  display: none;
}

.left-arrow {
  z-index: 5;
  width: 50%;
  align-items: center;
  padding-left: 1em;
  display: none;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: auto;
}

.right-arrow {
  z-index: 1000;
  width: 100%;
  justify-content: flex-end;
  align-items: center;
  margin-right: 0;
  padding-right: 1em;
  display: flex;
  top: 0%;
  bottom: 0%;
  left: auto;
  right: 0%;
}

.left-arrow-image {
  transform: rotate(180deg);
}

.text-display-4 {
  align-items: flex-start;
  font-size: 2em;
  font-weight: 400;
  display: flex;
}

.overlay {
  background-color: var(--onyx-200);
  opacity: .4;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.work-item-top {
  width: 100%;
  border-radius: 1.5em;
  position: relative;
  overflow: hidden;
}

.work-item-bottom {
  width: 100%;
  grid-column-gap: 1.5em;
  grid-row-gap: 1.5em;
  align-items: flex-start;
  display: flex;
}

.work-number {
  transform: translate(0, .25em);
}

.partner-item {
  height: 10em;
  border: 1px solid var(--line);
  background-color: var(--onyx-200);
  border-radius: .5em;
  justify-content: center;
  align-items: center;
  padding: 2em;
  display: flex;
}

.services-item {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  justify-content: space-between;
  margin-top: -1px;
  padding-top: 1.5em;
  padding-bottom: 1.5em;
  display: flex;
}

.services-left {
  grid-column-gap: 1.5em;
  align-items: flex-start;
  display: flex;
}

.blog-slider {
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  border-radius: 2em;
  overflow: visible;
}

.blog-slider-mask {
  width: 20.75em;
  position: static;
  overflow: visible;
}

.footer-title {
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

@media screen and (max-width: 991px) {
  body {
    font-size: 16px;
  }

  h1 {
    font-size: 4em;
  }

  h2 {
    font-size: 3.5em;
  }

  h3 {
    font-size: 3em;
  }

  h4 {
    font-size: 2.5em;
  }

  h5 {
    font-size: 2em;
  }

  h6 {
    font-size: 1.5em;
  }

  p {
    font-size: 1em;
  }

  blockquote {
    font-size: 2em;
  }

  .section {
    padding-top: 5em;
    padding-bottom: 5em;
  }

  .section.padding-bottom-0 {
    padding-bottom: 0;
  }

  .section.blog {
    padding-top: 5em;
    padding-bottom: 7em;
  }

  .section.blog-hero {
    padding-top: 2em;
  }

  .section.home-hero {
    height: 100vh;
    margin-top: -3em;
  }

  .section.blog-page {
    padding-bottom: 2em;
  }

  .container, .container.nav {
    padding-left: 2em;
    padding-right: 2em;
  }

  .grid.work {
    grid-template-columns: 1fr;
  }

  .grid.partners {
    grid-template-columns: 1fr 1fr;
  }

  .text-display-1 {
    font-size: 4.5em;
  }

  .grid-thirds {
    grid-template-columns: 1fr 1fr;
  }

  .grid-thirds.blog {
    grid-column-gap: 1.25em;
    grid-row-gap: 1.25em;
    flex-wrap: wrap;
  }

  .rich-text p {
    color: #b3b3b3;
    font-size: 16px;
  }

  .nav-link {
    width: 100%;
    border-bottom: 1px solid var(--line);
    margin-left: 0;
    padding: 1.25em 1.5em;
  }

  .text-display-2 {
    font-size: 3em;
  }

  .text-display-3 {
    font-size: 2em;
  }

  .nav-btn {
    cursor: pointer;
    display: flex;
  }

  .logo-img {
    height: 1.5em;
  }

  .header-nav {
    z-index: -1;
    height: auto;
    background-color: var(--onyx-200);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    display: none;
    position: absolute;
    top: 4em;
    bottom: auto;
    left: 0%;
    right: 0%;
  }

  .header {
    z-index: 2000;
    height: 3em;
    border-bottom: 1px none var(--line);
  }

  .col._6-24 {
    max-width: 70%;
  }

  .col._8-24 {
    max-width: 50%;
  }

  .col._12-24 {
    max-width: 100%;
  }

  .col._4-24 {
    max-width: 30%;
  }

  .col._13-24, .col._15-24, .col._16-24, .col._18-24 {
    max-width: 100%;
  }

  .o-grid.no-space {
    grid-column-gap: 0em;
    grid-row-gap: 0em;
  }

  .row {
    padding-left: 0;
    padding-right: 0;
  }

  .row.style-guide {
    grid-column-gap: 3em;
    grid-row-gap: 3em;
    flex-direction: column;
  }

  .row.footer-bottom {
    flex-direction: column;
    padding-top: 0;
    padding-bottom: 0;
  }

  .row.blog {
    padding: 2.5em 1.25em;
  }

  .row.home-hero-bottom {
    padding-top: 2em;
    position: static;
  }

  .row.blog-header {
    transform: translate(0, .5em);
  }

  .blog-card {
    padding: 1em;
  }

  .footer-bottom {
    height: auto;
    grid-column-gap: .5em;
    grid-row-gap: .5em;
    flex-direction: column;
    justify-content: space-between;
    padding-top: 2em;
    padding-bottom: 2em;
  }

  .footer-links {
    margin-top: 1em;
    margin-bottom: 1em;
  }

  .margin-56 {
    margin-bottom: 2.5em;
  }

  .margin-80 {
    margin-bottom: 4em;
  }

  .margin-160 {
    margin-bottom: 5em;
  }

  .margin-64 {
    margin-bottom: 3em;
  }

  .margin-144 {
    margin-bottom: 5em;
  }

  .margin-32 {
    margin-bottom: 1.5em;
  }

  .margin-176 {
    margin-bottom: 5em;
  }

  .margin-24 {
    margin-bottom: 1.25em;
  }

  .margin-40 {
    margin-bottom: 2em;
  }

  .margin-128, .margin-136, .margin-120 {
    margin-bottom: 5em;
  }

  .margin-48 {
    margin-bottom: 2em;
  }

  .margin-96 {
    margin-bottom: 4em;
  }

  .text-body-2 {
    font-size: 2em;
  }

  .image-contain.work-thumb {
    height: auto;
    padding-top: 56.25%;
  }

  .image-contain.services-thumb {
    display: none;
  }

  .image-contain.badge {
    transform: translate(0, 5em)rotate(-15deg);
  }

  .image-contain.services-static {
    display: none;
  }

  .image-contain.about-bg {
    font-size: 1vw;
    display: none;
  }

  .slider {
    height: auto;
    border-radius: 1em;
    padding-top: 56.25%;
  }

  .slider-mask {
    position: absolute;
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: 0%;
  }

  .nav-btn-icon {
    width: 1.25em;
  }

  .reel-contain.home-hero {
    font-size: 1.8vw;
  }

  .right-arrow {
    padding-right: .5em;
  }

  .text-display-4 {
    font-size: 1.5em;
  }

  .work-item-top {
    border-radius: 1em;
  }
}

@media screen and (max-width: 767px) {
  .section {
    padding-top: 5em;
    padding-bottom: 5em;
  }

  .section.blog {
    padding-bottom: 5em;
  }

  .section.home-hero {
    height: auto;
    min-height: 680px;
    padding-bottom: 2em;
  }

  .section.blog-page {
    padding-bottom: 0;
  }

  .section.track-section {
    padding-top: 1.5em;
    padding-bottom: 1.5em;
  }

  .container, .container.nav, .container.footer, .container.large {
    padding-left: 1.25em;
    padding-right: 1.25em;
  }

  .text-display-1 {
    font-size: 3em;
  }

  .rich-text h2 {
    font-size: 1.5em;
  }

  .nav-link {
    padding-left: 1.25em;
    padding-right: 1.25em;
  }

  .text-display-2 {
    font-size: 2.5em;
  }

  .text-display-5 {
    font-size: 1.25em;
  }

  .col._10-24 {
    max-width: 100%;
  }

  .col._6-24 {
    max-width: 40%;
  }

  .col._8-24 {
    max-width: 70%;
  }

  .col._9-24, .col._7-24 {
    max-width: 60%;
  }

  .col._4-24 {
    max-width: 40%;
  }

  .col._15-24 {
    max-width: 100%;
  }

  .row.style-guide {
    grid-column-gap: 2em;
    grid-row-gap: 2em;
  }

  .row.title-header {
    grid-column-gap: 2em;
    grid-row-gap: 2em;
    flex-direction: column;
    align-items: flex-start;
  }

  .row.blog {
    padding-top: 3em;
    padding-bottom: 3em;
  }

  .footer-bottom {
    padding-top: .75em;
  }

  .margin-160, .margin-144, .margin-176, .margin-128, .margin-136, .margin-120 {
    margin-bottom: 4em;
  }

  .image.logo {
    font-size: 2vw;
  }

  .image-contain.badge {
    transform: translate(0, 4em)rotate(-10deg);
  }

  .partner-item {
    height: 8em;
    padding: 1.5em;
  }
}

@media screen and (max-width: 479px) {
  h1 {
    font-size: 2.5em;
  }

  h2 {
    font-size: 2.25em;
  }

  h3 {
    font-size: 2em;
  }

  h4 {
    font-size: 1.75em;
  }

  h5 {
    font-size: 1.5em;
  }

  h6 {
    font-size: 1.25em;
  }

  .section {
    padding-top: 3.75em;
    padding-bottom: 3.75em;
  }

  .section.track-section {
    padding-top: 1em;
    padding-bottom: 1em;
  }

  .text-display-1 {
    font-size: 3em;
  }

  .text-display-1.center.line-2 {
    font-size: 6em;
  }

  .grid-thirds {
    grid-template-columns: 1fr;
  }

  .rich-text h1 {
    font-size: 2em;
  }

  .rich-text h2 {
    font-size: 1.25em;
  }

  .rich-text h3 {
    font-size: 1.5em;
  }

  .rich-text h4 {
    font-size: 1.25em;
  }

  .rich-text h5 {
    font-size: 1em;
  }

  .rich-text h6 {
    font-size: .75em;
  }

  .rich-text ul {
    font-size: 1em;
  }

  .rich-text blockquote {
    font-size: 1.5em;
  }

  .text-display-2 {
    font-size: 2em;
  }

  .text-display-3 {
    font-size: 1.5em;
  }

  .text-display-5 {
    font-size: 1em;
  }

  .text-micro-1 {
    font-size: 14px;
  }

  .logo-link {
    border-top: 1px #c4c4c4;
  }

  .logo-link.w--current {
    border-top-style: none;
  }

  .header {
    padding: 0;
  }

  .reel.home-hero {
    padding-left: 1.25em;
    padding-right: 1.25em;
  }

  .col._11-24, .col._6-24, .col._8-24, .col._3-24, .col._9-24, .col._5-24, .col._2-24, .col._12-24, .col._7-24, .col._1-24, .col._4-24 {
    max-width: 100%;
  }

  .col._4-24.text-small {
    min-width: auto;
  }

  .col._14-24, .col._15-24, .col._16-24, .col._17-24, .col._18-24, .col._19-24, .col._20-24, .col._21-24, .col._22-24, .col._23-24 {
    max-width: 100%;
  }

  .row.title-header {
    grid-column-gap: 2em;
    grid-row-gap: 2em;
    flex-direction: column;
  }

  .row.footer-bottom {
    flex-direction: column;
    align-items: center;
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .row.blog {
    padding-top: 2em;
    padding-bottom: 2em;
  }

  .row.footer {
    padding-left: 1.25em;
    padding-right: 1.25em;
  }

  .blog-card {
    padding: 1em;
  }

  .footer-bottom {
    padding-left: 1.25em;
    padding-right: 1.25em;
  }

  .footer-links {
    grid-column-gap: .5em;
    grid-row-gap: .5em;
    text-align: center;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
  }

  .reel-title-mask {
    padding-left: .4em;
    padding-right: .4em;
  }

  .top-bar {
    font-size: 14px;
    line-height: 1.2;
  }

  .licenses-item {
    padding: 24px;
  }

  .margin-80, .margin-96 {
    margin-bottom: 3em;
  }

  .text-body-2 {
    font-size: 1.5em;
  }

  .image-contain.thumb.margin-24 {
    height: auto;
    padding-top: 64%;
  }

  .image-contain.badge {
    display: none;
    transform: translate(0, 3em)rotate(-5deg);
  }

  .text-divider {
    display: none;
  }

  .work-item {
    grid-column-gap: .5em;
  }

  .text-display-4 {
    font-size: 1.25em;
  }

  .work-number {
    font-size: 18px;
  }

  .partner-item {
    padding: 1em;
  }

  .blog-slider-mask {
    width: 90%;
  }
}

#w-node-_9c00b453-3b88-8910-d8b5-bbd2be093b67-e78c656e, #w-node-_804164d6-b093-83d3-77aa-3a6131932e64-e78c656e, #w-node-_211914f0-4b28-355e-9c9a-7ce379f24ac0-e78c656e, #w-node-dc21f501-11e5-f5f4-816e-36c21378d7d7-e78c656e, #w-node-_12063bdc-2ef0-06db-5192-15e7adafc02f-e78c656e, #w-node-_8eae6b98-e55f-f852-5101-fbe2c57f01bf-e78c656e, #w-node-_0375a59f-2f0e-7d14-0508-32be2f2e133a-e78c656e, #w-node-d3fe8597-7425-7b51-47c2-fab76c75b2f0-e78c656e {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_6ce95a03-1098-6add-2fca-26e4623a0e0b-e78c6575, #w-node-_113298a9-5c0d-3088-4998-9d182b9af0ef-e78c6575 {
  grid-area: span 1 / span 3 / span 1 / span 3;
  justify-self: end;
}

#w-node-_555938e2-1530-5faa-0b3c-645b9d516057-e78c6575, #w-node-c58e56e1-818b-6336-1858-d3be5e7383d6-e78c6575, #w-node-a029a75a-60a2-b997-f29d-22de39135e08-e78c6575 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-e5e32c2d-6788-b701-d7e1-d1a34bc061a5-e78c6575, #w-node-_38b93e66-eef6-f94d-8249-c878569e8db9-e78c6575, #w-node-_313273ed-c4dc-033b-8cb3-8a524734baae-e78c6575 {
  grid-area: span 1 / span 3 / span 1 / span 3;
  justify-self: end;
}

@media screen and (max-width: 991px) {
  #w-node-bece8a54-44bd-2aec-ff2e-5026fee5cc5f-e78c6571, #w-node-_9057ea78-36d2-9b8f-284c-256dd80574c2-e78c6573 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }

  #w-node-_6ce95a03-1098-6add-2fca-26e4623a0e0b-e78c6575, #w-node-_113298a9-5c0d-3088-4998-9d182b9af0ef-e78c6575, #w-node-e5e32c2d-6788-b701-d7e1-d1a34bc061a5-e78c6575, #w-node-_38b93e66-eef6-f94d-8249-c878569e8db9-e78c6575, #w-node-_313273ed-c4dc-033b-8cb3-8a524734baae-e78c6575 {
    grid-area: span 1 / span 1 / span 1 / span 1;
    justify-self: end;
  }
}


@font-face {
  font-family: 'Switzer';
  src: url('../fonts/Switzer-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('../fonts/Switzer-Semibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('../fonts/Switzer-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('../fonts/Switzer-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Anton';
  src: url('../fonts/anton-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}