/* reset */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}
/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}
/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}
/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}
/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}
/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2 */
}
/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}
/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}
/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}
/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}
/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input { /* 1 */
  overflow: visible;
}
/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select { /* 1 */
  text-transform: none;
}
/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}
/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}
/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}
/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}
/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}
/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}
/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}
/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}
/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}
/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}
/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}
/* @import "highlight.js/styles/github.css";
@import "plyr/dist/plyr.css"; */
@font-face {
  font-family: 'Plain Bold';
  font-style: normal;
  font-weight: 700;
  src: local('Plain Bold'),
    url('/static/fonts/Plain-Bold.woff2') format('woff2');
  font-display: block;
}
@font-face {
  font-family: 'Plain Extrabold';
  font-style: normal;
  font-weight: 800;
  src: local('Plain Extrabold'),
    url('/static/fonts/Plain-Extrabold.woff2') format('woff2');
  font-display: block;
}
@font-face {
  font-family: 'Plain Light';
  font-style: normal;
  font-weight: 300;
  src: local('Plain Light'),
    url('/static/fonts/Plain-Light.woff2') format('woff2');
  font-display: block;
}
@font-face {
  font-family: 'Plain Light';
  font-style: italic;
  font-weight: 300;
  src: local('Plain Light'),
    url('/static/fonts/Plain-Lightitalic.woff2') format('woff2');
  font-display: block;
}
@font-face {
  font-family: 'Canela Web';
  font-style: normal;
  font-weight: 100;
  src: local('Canela Web'),
    url('/static/fonts/Canela-Thin-Web.woff2') format('woff2');
  font-display: block;
}
@font-face {
  font-family: 'Canela Web';
  font-style: italic;
  font-weight: 100;
  font-stretch: normal;
  src: local('Canela Web'),
    url('/static/fonts/Canela-ThinItalic-Web.woff2') format('woff2');
  font-display: block;
}
@font-face {
  font-family: 'Canela Web';
  font-style: normal;
  font-weight: 700;
  src: local('Canela Web'),
    url('/static/fonts/Canela-Medium.woff2') format('woff2');
  font-display: block;
}
@font-face {
  font-family: 'Canela Web';
  font-style: italic;
  font-weight: 700;
  font-stretch: normal;
  src: local('Canela Web'),
    url('/static/fonts/Canela-MediumItalic.woff2') format('woff2');
  font-display: block;
}
/* global */
/**
 * grid
 */
/* 47/26 */
/**
 * viewport spacing
 * use these for vertical flow or margins
 */
/*
$vs-25: 0.96rem;
$vs-40: 1.54rem;
$vs-50: 1.92rem;
$vs-75: 2.88rem;
$vs-100: 3.84rem;
$vs-150: 5.77rem;
$vs-175: 6.73rem;
$vs-200: 7.69rem;
*/
/**
 * ease
 */
/**
 * durations
 */
@-webkit-keyframes fadeOutScaleUp {
  from {
    opacity: 1;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(1.04);
  }
}
@keyframes fadeOutScaleUp {
  from {
    opacity: 1;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(1.04);
  }
}
@-webkit-keyframes fadeOutScaleDown {
  from {
    opacity: 1;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(0.96);
  }
}
@keyframes fadeOutScaleDown {
  from {
    opacity: 1;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(0.96);
  }
}
@-webkit-keyframes fadeInScaleUp {
  from {
    opacity: 0;
    transform: scale(0.96);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes fadeInScaleUp {
  from {
    opacity: 0;
    transform: scale(0.96);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes fadeInScaleDown {
  from {
    opacity: 0;
    transform: scale(1.04);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes fadeInScaleDown {
  from {
    opacity: 0;
    transform: scale(1.04);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
.fade-in {
  -webkit-animation-name: fadeIn;
          animation-name: fadeIn;
  -webkit-animation-duration: 200ms;
          animation-duration: 200ms;
}
/**
 * variables
 */
/**
 * helper classes
 */
.c-purple { color: #5d5fff; }
.c-black { color: #151515; }
.c-gray { color: #a0a0a0; }
.c-lilac { color: #b12dff; }
.c-orange { color: #ff5300; }
.c-red { color: #d3020d; }
.c-white { color: #fff; }
/**
 * gradients
 */
html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}
body {
  color: #151515;
  background-color: #fff;
  overflow-x: hidden; /*IE Fix*/
}
a,
.btn {
  color: #151515;
  text-decoration: none;
}
.lazy {
  opacity: 0.4;
}
img {
  opacity: 1;
  transition: opacity 0.3s ease-out;
}
blockquote,
pre {
  margin: 0;
  padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
}
h2 {
  margin-bottom: 1.9230769230769231rem;
}
h4 {
  text-transform: uppercase;
  margin-bottom: 0.9615384615384616rem;
}
p {
  margin-bottom: 2.3rem;
}
p:last-child {
  margin-bottom: 0;
}
.outer,
.inner {
  position: relative;
}
.outer {
  transition: background-color 500ms ease-out;
}
/* components/page wrapper */
.components {
  border-bottom: 4px solid #e8e8e8;
}
.page {
  padding-top: 1.9230769230769231rem;
}
/* theme */
.theme--dark {
  background-color: #151515;
}
.theme__section--dark,
.theme__section--light {
  transition: opacity 500ms;
}
.theme__section--dark {
  color: #fff !important;
  border-bottom: 0;
  opacity: 0;
}
.theme__section--light,
.theme--dark .theme__section--light .btn {
  color: #151515 !important;
}
.theme--dark .theme__section--dark {
  opacity: 1;
}
.theme--dark .theme__section--light {
  opacity: 0;
}
/* components */
.caption {
  margin-top: 0.9615384615384616rem;
}
.caption.caption--full {
  max-width: none;
}
/* TODO: Add back smooth animation */
.component {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 300ms ease-out 150ms,
    transform 400ms ease-out 150ms;
}
.component--visible {
  opacity: 1;
  transform: translateY(0);
}
.component--no-margin {
  margin-bottom: 4px !important;
}
/**
 * viewport based typography
 * image: http://zellwk.com/blog/viewport-based-typography/
 * min: 14px @ 768px (small)
 * max: 26px @ 1720px (xlarge)
 * calc: min-font + (max-font - min-font) * (100vm - min-size) / (max-size - min-size)
 */
html,
h5,
code,
input,
.t-mini,
.text .list-mini,
.btn,
.input__field,
.input__label {
  font-size: calc(15px + 11 * ((100vw - 768px) / 952));
  line-height: calc(25px + 11 * ((100vw - 768px) / 952));
}
@media screen and (min-width: 1720px) {
  html,
h5,
code,
input,
.t-mini,
.text .list-mini,
.btn,
.input__field,
.input__label {
    line-height: 36px;
  }
}
@media screen and (max-width: 768px) {
  html,
h5,
code,
input,
.t-mini,
.text .list-mini,
.btn,
.input__field,
.input__label {
    line-height: 25px;
  }
}
@media screen and (min-width: 1720px) {
  html,
h5,
code,
input,
.t-mini,
.text .list-mini,
.btn,
.input__field,
.input__label {
    font-size: 26px;
  }
}
@media screen and (max-width: 768px) {
  html,
h5,
code,
input,
.t-mini,
.text .list-mini,
.btn,
.input__field,
.input__label {
    font-size: 15px;
  }
}
.text .list-mini {
  line-height: calc(25px + 21 * ((100vw - 768px) / 952));
}
@media screen and (min-width: 1720px) {
  .text .list-mini {
    line-height: 46px;
  }
}
@media screen and (max-width: 768px) {
  .text .list-mini {
    line-height: 25px;
  }
}
h1,
.quote__body,
.t-title {
  font-size: calc(35px + 45 * ((100vw - 768px) / 952));
  line-height: calc(45px + 45 * ((100vw - 768px) / 952));
  letter-spacing: -0.5px;
}
@media screen and (min-width: 1720px) {
  h1,
.quote__body,
.t-title {
    line-height: 90px;
  }
}
@media screen and (max-width: 768px) {
  h1,
.quote__body,
.t-title {
    line-height: 45px;
  }
}
@media screen and (min-width: 1720px) {
  h1,
.quote__body,
.t-title {
    font-size: 80px;
  }
}
@media screen and (max-width: 768px) {
  h1,
.quote__body,
.t-title {
    font-size: 35px;
  }
}
h2 {
  font-size: calc(30px + 30 * ((100vw - 768px) / 952));
  line-height: calc(30px + 40 * ((100vw - 768px) / 952));
  letter-spacing: calc(-1.5px + -0.5 * ((100vw - 768px) / 952));
}
@media screen and (min-width: 1720px) {
  h2 {
    letter-spacing: -2px;
  }
}
@media screen and (max-width: 768px) {
  h2 {
    letter-spacing: -1.5px;
  }
}
@media screen and (min-width: 1720px) {
  h2 {
    line-height: 70px;
  }
}
@media screen and (max-width: 768px) {
  h2 {
    line-height: 30px;
  }
}
@media screen and (min-width: 1720px) {
  h2 {
    font-size: 60px;
  }
}
@media screen and (max-width: 768px) {
  h2 {
    font-size: 30px;
  }
}
h3 {
  font-size: calc(20px + 16 * ((100vw - 768px) / 952));
  line-height: calc(25px + 21 * ((100vw - 768px) / 952));
}
@media screen and (min-width: 1720px) {
  h3 {
    line-height: 46px;
  }
}
@media screen and (max-width: 768px) {
  h3 {
    line-height: 25px;
  }
}
@media screen and (min-width: 1720px) {
  h3 {
    font-size: 36px;
  }
}
@media screen and (max-width: 768px) {
  h3 {
    font-size: 20px;
  }
}
h4 {
  font-size: calc(17px + 18 * ((100vw - 768px) / 952));
  line-height: calc(17px + 23 * ((100vw - 768px) / 952));
}
@media screen and (min-width: 1720px) {
  h4 {
    line-height: 40px;
  }
}
@media screen and (max-width: 768px) {
  h4 {
    line-height: 17px;
  }
}
@media screen and (min-width: 1720px) {
  h4 {
    font-size: 35px;
  }
}
@media screen and (max-width: 768px) {
  h4 {
    font-size: 17px;
  }
}
p,
ul.u-nb-list,
.text ul,
.text ol,
.secondary-link {
  font-size: calc(25px + 25 * ((100vw - 768px) / 952));
  line-height: calc(35px + 30 * ((100vw - 768px) / 952));
}
@media screen and (min-width: 1720px) {
  p,
ul.u-nb-list,
.text ul,
.text ol,
.secondary-link {
    line-height: 65px;
  }
}
@media screen and (max-width: 768px) {
  p,
ul.u-nb-list,
.text ul,
.text ol,
.secondary-link {
    line-height: 35px;
  }
}
@media screen and (min-width: 1720px) {
  p,
ul.u-nb-list,
.text ul,
.text ol,
.secondary-link {
    font-size: 50px;
  }
}
@media screen and (max-width: 768px) {
  p,
ul.u-nb-list,
.text ul,
.text ol,
.secondary-link {
    font-size: 25px;
  }
}
.t-large {
  font-size: calc(40px + 60 * ((100vw - 768px) / 952));
  line-height: calc(40px + 50 * ((100vw - 768px) / 952));
  letter-spacing: calc(-1.6px + -2.4 * ((100vw - 768px) / 952));
}
@media screen and (min-width: 1720px) {
  .t-large {
    letter-spacing: -4px;
  }
}
@media screen and (max-width: 768px) {
  .t-large {
    letter-spacing: -1.6px;
  }
}
@media screen and (min-width: 1720px) {
  .t-large {
    line-height: 90px;
  }
}
@media screen and (max-width: 768px) {
  .t-large {
    line-height: 40px;
  }
}
@media screen and (min-width: 1720px) {
  .t-large {
    font-size: 100px;
  }
}
@media screen and (max-width: 768px) {
  .t-large {
    font-size: 40px;
  }
}
.t-mega {
  font-size: calc(50px + 150 * ((100vw - 768px) / 952));
  line-height: calc(50px + 140 * ((100vw - 768px) / 952));
  letter-spacing: calc(-2px + -6 * ((100vw - 768px) / 952));
}
@media screen and (min-width: 1720px) {
  .t-mega {
    letter-spacing: -8px;
  }
}
@media screen and (max-width: 768px) {
  .t-mega {
    letter-spacing: -2px;
  }
}
@media screen and (min-width: 1720px) {
  .t-mega {
    line-height: 190px;
  }
}
@media screen and (max-width: 768px) {
  .t-mega {
    line-height: 50px;
  }
}
@media screen and (min-width: 1720px) {
  .t-mega {
    font-size: 200px;
  }
}
@media screen and (max-width: 768px) {
  .t-mega {
    font-size: 50px;
  }
}
.t-tiny,
.input--active .input__label {
  font-size: calc(10px + 7 * ((100vw - 768px) / 952));
  line-height: calc(15px + 21 * ((100vw - 768px) / 952));
}
@media screen and (min-width: 1720px) {
  .t-tiny,
.input--active .input__label {
    line-height: 36px;
  }
}
@media screen and (max-width: 768px) {
  .t-tiny,
.input--active .input__label {
    line-height: 15px;
  }
}
@media screen and (min-width: 1720px) {
  .t-tiny,
.input--active .input__label {
    font-size: 17px;
  }
}
@media screen and (max-width: 768px) {
  .t-tiny,
.input--active .input__label {
    font-size: 10px;
  }
}
/**
 * font style classes
 */
.f-italic {
  font-style: italic;
}
.f-strike {
  text-decoration: line-through;
}
/**
 * misc typography
 */
html {
  font-weight: 300;
  font-family: 'Plain Light', sans-serif;
  font-weight: normal;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga" 1;
}
h1,
h3,
p,
ul.u-nb-list,
.quote__body,
.secondary-link,
.text ul,
.text ol {
  font-family: 'Canela Web', serif;
  font-weight: 100;
}
.quote__body {
  font-style: italic;
}
h2,
h4 {
  font-family: 'Plain Bold', sans-serif;
  font-weight: 700;
}
h4 {
  text-transform: uppercase;
}
h5 {
  font-weight: 200;
}
.t-large,
.t-mega {
  font-family: 'Plain Extrabold', sans-serif;
  font-weight: 800;
}
h1,
.t-large,
.t-mega {
  word-wrap: break-word;
}
.t-mini,
.t-tiny,
.text .list-mini,
.btn {
  font-family: 'Plain Light', sans-serif;
  font-weight: 300;
}
input {
  font-family: inherit;
  font-weight: inherit;
}
/**
 * lost config
 */
/**
 * grid util classes and element styles
 */
.g-row {
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}
.g-row:before {
  content: '';
  display: table;
}
.g-row:after {
  content: '';
  display: table;
  clear: both;
}
.g-row:before {
  content: '';
  display: table;
}
.g-row:after {
  content: '';
  display: table;
  clear: both;
}
.g-none {
  width: auto;
}
.g-none:last-child {
  float: none;
  clear: none;
  margin-right: 0;
  width: auto;
}
.g-none:nth-child(1n) {
  float: none;
  clear: none;
  margin-right: 0;
  width: auto;
}
.g-none:nth-child(1n + 1) {
  float: none;
  clear: none;
  margin-right: 0;
  width: auto;
}
@media only screen and (min-width: 768px) {
  h2,
  .news-title {
    width: calc(99.9% * 2/4 - (1.8rem - 1.8rem * 2/4));
    float: none !important;
  }
  h2:nth-child(1n),
  .news-title:nth-child(1n) {
    float: left;
    margin-right: 1.8rem;
    clear: none;
  }
  h2:last-child,
  .news-title:last-child {
    margin-right: 0;
  }
  h2:nth-child(4n),
  .news-title:nth-child(4n) {
    margin-right: 0;
    float: right;
  }
  h2:nth-child(4n + 1),
  .news-title:nth-child(4n + 1) {
    clear: both;
  }

  p,
  .text ul,
  .text ol {
    width: calc(99.9% * 3/4 - (1.8rem - 1.8rem * 3/4));
    float: none !important;
  }

  p:nth-child(1n),
  .text ul:nth-child(1n),
  .text ol:nth-child(1n) {
    float: left;
    margin-right: 1.8rem;
    clear: none;
  }

  p:last-child,
  .text ul:last-child,
  .text ol:last-child {
    margin-right: 0;
  }

  p:nth-child(4n),
  .text ul:nth-child(4n),
  .text ol:nth-child(4n) {
    margin-right: 0;
    float: right;
  }

  p:nth-child(4n + 1),
  .text ul:nth-child(4n + 1),
  .text ol:nth-child(4n + 1) {
    clear: both;
  }

  .g-col3 {
    width: calc(99.9% * 3/4 - (1.8rem - 1.8rem * 3/4));
  }

  .g-col3:nth-child(1n) {
    float: left;
    margin-right: 1.8rem;
    clear: none;
  }

  .g-col3:last-child {
    margin-right: 0;
  }

  .g-col3:nth-child(4n) {
    margin-right: 0;
    float: right;
  }

  .g-col3:nth-child(4n + 1) {
    clear: both;
  }

  .g-col2 {
    width: calc(99.9% * 2/4 - (1.8rem - 1.8rem * 2/4));
  }

  .g-col2:nth-child(1n) {
    float: left;
    margin-right: 1.8rem;
    clear: none;
  }

  .g-col2:last-child {
    margin-right: 0;
  }

  .g-col2:nth-child(4n) {
    margin-right: 0;
    float: right;
  }

  .g-col2:nth-child(4n + 1) {
    clear: both;
  }

  .g-col1 {
    width: calc(99.9% * 1/4 - (1.8rem - 1.8rem * 1/4));
  }

  .g-col1:nth-child(1n) {
    float: left;
    margin-right: 1.8rem;
    clear: none;
  }

  .g-col1:last-child {
    margin-right: 0;
  }

  .g-col1:nth-child(4n) {
    margin-right: 0;
    float: right;
  }

  .g-col1:nth-child(4n + 1) {
    clear: both;
  }
}
/**
 * margin bottom
 */
.mb-25 { margin-bottom: 0.9615384615384616rem !important; }
.mb-50 { margin-bottom: 1.9230769230769231rem !important; }
.mb-75 { margin-bottom: 2.8846153846153846rem !important; }
.mb-100 { margin-bottom: 3.8461538461538463rem !important; }
.mb-200 { margin-bottom: 7.6923076923076925rem !important; }
.u-no-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.u-hidden {
  display: none;
}
.u-center {
  text-align: center;
}
.u-cf:before {
  content: '';
  display: table;
}
.u-cf:after {
  content: '';
  display: table;
  clear: both;
}
.u-overflow {
  overflow: hidden;
}
.u-dot-del {
  margin: 0 0.2692307692307692rem;
}
.u-nb-list {
	list-style: inside;
	list-style-type: decimal;
	margin: 0;
  padding: 0;
}
.primary-link,
.secondary-link__title,
.tertiary-link,
.text a {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  transition:
    color 200ms ease-out,
    border-bottom-color 200ms ease-out;
}
.primary-link {
  font-style: italic;
}
.primary-link--active {
  color: #5d5fff;
}
.secondary-link__title {
  margin-right: 0.9615384615384616rem;
}
.secondary-link__source {
  color: #a0a0a0;
  font-style: italic;
}
.text a,
.secondary-link--active .secondary-link__title--active, /* believe this one can be removed */
.news-list .secondary-link--active .secondary-link__title,
.secondary-link--active .secondary-link__title {
  color: #5d5fff;
}
.text a {
  border-bottom-color: transparent;  
}
.secondary-link__title {
  border-bottom-color: transparent;
  color: #151515;
}
.news-list .secondary-link__title {
  color: #151515;
}
.tertiary-link {
  color: #151515;
  border-bottom-color: transparent;
}
.theme__section--dark .text .tertiary-link {
  color: #fff;
}
/* .no-touchevents .primary-link:hover,
.no-touchevents .secondary-link__title:hover,
.no-touchevents .tertiary-link:hover,
.no-touchevents .text a:hover { */
.primary-link:hover,
.secondary-link__title:hover,
.tertiary-link:hover,
.text a:hover {
  border-bottom-color: #5d5fff;
}
h1.c-purple a {
  color: currentColor;
  border-bottom: 1px solid currentColor;
}
/*
  TODO: Uncomment when blobs are interactive

  .no-touchevents .primary-link:hover {
    color: #fff;
  }

  .no-touchevents .featured-projects--condensed .primary-link:hover {
    color: inherit;
  }

*/
.interstitial {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
}
.sg-nav {
  background-color: #e8e8e8;
  padding-top: 0.9615384615384616rem;
  padding-bottom: 0.9615384615384616rem;
  margin-bottom: 0.9615384615384616rem;
}
.sg-nav__item {
  margin-bottom: 0.5rem;
}
.sg-element {
  margin-bottom: 1.9230769230769231rem;
}
.sg-element--filled {
  background-color: #e8e8e8;
}
.sg-grid-row,
.sg-color-item,
.sg-spacing-item {
  margin-bottom: 0.9615384615384616rem;
}
.sg-label {
  font-family: monospace;
  text-decoration: underline;
  font-size: 0.65rem;
  margin-bottom: 0.9615384615384616rem;
}
.sg-label--full {
  font-size: 0.9615384615384616rem;
  color: #5d5fff;
  border-bottom: 2px solid #e8e8e8;
  padding-bottom: 0.25rem;
  font-weight: 700;
}
.sg-label--full:not(:first-child) {
  margin-top: 0.9615384615384616rem;
}
.sg-grid-row,
.sg-color-item,
.sg-spacing-item {
  background-color: #e8e8e8;
  height: 2.8846153846153846rem;
  padding: 0.9615384615384616rem;
  display: flex;
  align-items: center;
}
.sg-grid-row .sg-label,
.sg-color-item .sg-label,
.sg-spacing-item .sg-label {
  margin-bottom: 0;
}
.sg-color-item {
  background-color: currentColor;
}
.sg-color-item .sg-label,
.sg-spacing-item .sg-label {
  color: white;
}
.sg-dark-bg {
  background-color: #e8e8e8;
  display: inline;
}
.sg-spacing-item {
  background-color: #5d5fff;
  padding: 0;
  justify-content: center;
}
.sg-spacing-item.vs25 {
  height: 0.9615384615384616rem;
}
.sg-spacing-item.vs50 {
  height: 1.9230769230769231rem;
}
.sg-spacing-item.vs100 {
  height: 3.8461538461538463rem;
}
.sg-spacing-item.vs200 {
  height: 7.6923076923076925rem;
}
.sg-wrapper {
  position: relative;
  overflow: auto;
}
.sg-wrapper:hover {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAGElEQVQYV2NkYGCQZEADjFDB58jiFAoCAL8RBB+NdMiaAAAAAElFTkSuQmCC);
  background-repeat: repeat;
}
/**
 * > small
 */
@media only screen and (min-width: 768px) {
  .sg-nav__item {
    display: inline-block;
    margin-right: 0.9615384615384616rem;
    margin-bottom: 0;
  }
}
/* components */
.article-header {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1.9230769230769231rem;
}
.article-header__section {
  flex: 1;
  font-size: calc(15px + 15 * ((100vw - 420px) / 860));
  line-height: 1.6;
}
@media screen and (min-width: 1280px) {
  .article-header__section {
    font-size: 30px;
  }
}
@media screen and (max-width: 420px) {
  .article-header__section {
    font-size: 15px;
  }
}
.article-header__detail {
  margin-left: 0.6em;
  line-height: 2.8;
}
.article-header__title {
  flex-basis: 100%;
  margin-top: 7.6923076923076925rem;
}
.page--article .markdown h2 {
  font-size: calc(20px + 20 * ((100vw - 420px) / 860));
  line-height: 1.2;
}
@media screen and (min-width: 1280px) {
  .page--article .markdown h2 {
    font-size: 40px;
  }
}
@media screen and (max-width: 420px) {
  .page--article .markdown h2 {
    font-size: 20px;
  }
}
.page--article .markdown p,
.page--article .markdown ol,
.page--article .markdown ul {
  font-family: 'Plain Light', sans-serif;
  font-weight: 300;
  font-size: calc(16px + 14 * ((100vw - 420px) / 860));
  line-height: 1.6;
}
@media screen and (min-width: 1280px) {
  .page--article .markdown p,
.page--article .markdown ol,
.page--article .markdown ul {
    font-size: 30px;
  }
}
@media screen and (max-width: 420px) {
  .page--article .markdown p,
.page--article .markdown ol,
.page--article .markdown ul {
    font-size: 16px;
  }
}
.page--article .text.markdown ol {
  margin-left: 0;
}
.page--article .text.markdown li {
  margin-bottom: 1.9230769230769231rem;
}
.page--article .text.markdown li:last-child {
  margin-bottom: 7.6923076923076925rem;
}
.page--article .text.markdown ol li:before {
  font-family: 'Plain Bold', sans-serif;
  font-weight: bold;
}
.page--article .markdown strong {
  font-family: 'Plain Bold', sans-serif;
  font-weight: bold;
}
.blobs {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 1;
  background: #fff;
  opacity: 0;
  transition: opacity 1000ms ease;
}
.btn {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: inline-block;
  outline: none;
  opacity: 1;
  transition: opacity 75ms;
  position: relative;
}
.btn--round {
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn--colored {
  color: #5d5fff;
}
.btn--filled {
  background-color: #5d5fff;
}
.btn--arrow::after {
  content: '\2192';
  display: inline-block;
  transform: rotate(90deg) translate3d(0, 0, 0);
  position: relative;
  margin-left: 0.46153846153846156rem;
  top: 0.11538461538461539rem;
}
.btn--expanded.btn--arrow::after {
  content: '\2190';
}
.btn--hidden {
  opacity: 0;
}
.credits {
  display: flex;
  margin-top: 7.6923076923076925rem;
}
.credits__author {
  display: flex;
  flex-direction: column-reverse;
  min-width: 50%;
}
@media only screen and (min-width: 768px) {
  .credits__author {
    min-width: 221px;
  }
}
.credits__author dd,
.credits__author dt {
  line-height: 1.41;
}
.credits dd {
  margin: 0;
}
input {
  border: 0;
  background: 0;
  outline: 0;
  padding: 0.9615384615384616rem 0;
  width: 100%;
  display: block;
  border-radius: 0;
}
input[type=submit] {
  color: #fff;
  display: block;
  cursor: pointer;
}
.input {
  border-bottom: 1px solid #e8e8e8;
  position: relative;
  transition: border-color 200ms ease-out;
}
.input--active {
  border-color: #5d5fff;
}
.input__label {
  color: #a0a0a0;
  transition: color 200ms;
}
.input--text .input__label {
  transition:
    font-size 200ms ease-out,
    transform 200ms ease-out;
  pointer-events: none;
  position: absolute;
  top: 0.9615384615384616rem;
  left: 0;
}
.input--active .input__label {
  transform: translate(0, -100%);
}
.input--radio {
  border-bottom: 0;
  display: inline-block;
  margin-right: 3.8461538461538463rem;
}
.input--radio:last-child {
  margin-right: 0;
}
.input--radio input {
  display: none;
}
.input--radio .input__label {
  cursor: pointer;
  border-bottom: 2px solid transparent;
  padding-bottom: 0.53rem;
  transition:
    color 200ms ease-out,
    border-color 200ms ease-out;
}
.no-touchevents .input--radio .input__label:hover,
.input--radio .input__field:checked + .input__label {
  color: #5d5fff;
}
.input--radio .input__field:checked + .input__label {
  border-color: currentColor;
}
.input--submit {
  background-color: #5d5fff;
}
.input--submit .input__field {
  opacity: 1;
}
.input--submit .loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.input--submit .input__field,
.input--submit .loader {
  transition: opacity 200ms;
}
.input--submit[loading] .input__field,
.input--submit.loading .input__field {
  opacity: 0;
}
.input--submit[loading] .loader,
.input--submit.loading .loader {
  opacity: 1;
}
.icon {
  display: inline-block;
  position: relative;
  color: white;
}
.icon svg {
  width: inherit;
  height: inherit;
  stroke: currentColor;
  fill: currentColor;
}
.icon--apple,
.icon-apple svg {
  width: 1.3846153846153846rem;
  height: 1.5769230769230769rem;
}
.loader {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  pointer-events: none;
}
.loader__inner {
  position: relative;
  background-color: #fff;
  width: 0.5384615384615384rem;
  height: 0.5384615384615384rem;
  margin: 0 auto;
  border-radius: 100%;
}
.loader__inner::after,
.loader__inner::before {
  content: '';
  position: absolute;
  border-radius: 100%;
  background-color: #fff;
}
.loader__inner::after {
  left: -0.38461538461538464rem;
  top: -0.19230769230769232rem;
  width: 0.23076923076923078rem;
  height: 0.23076923076923078rem;
  transform-origin: 0.5769230769230769rem 0.5rem;
  -webkit-animation: axis 1.5s linear infinite;
          animation: axis 1.5s linear infinite;
}
.loader__inner::before {
  left: -0.7692307692307693rem;
  top: -0.38461538461538464rem;
  width: 0.15384615384615385rem;
  height: 0.15384615384615385rem;
  transform-origin: 0.7692307692307693rem 0.5769230769230769rem;
  -webkit-animation: axis 2s linear infinite;
          animation: axis 2s linear infinite;
}
@-webkit-keyframes axis {
  0% {
    transform: rotateZ(0deg) translate3d(0, 0, 0);
  }

  100% {
    transform: rotateZ(360deg) translate3d(0, 0, 0);
  }
}
@keyframes axis {
  0% {
    transform: rotateZ(0deg) translate3d(0, 0, 0);
  }

  100% {
    transform: rotateZ(360deg) translate3d(0, 0, 0);
  }
}
.image {
  position: relative;
  margin-bottom: 7.6923076923076925rem;
}
.image__inner {
  position: relative;
  width: 100%;
  padding-bottom: 56%;
  background-color: #e8e8e8;
  transition: padding-bottom 0.2s ease-out;
}
.image__inner img {
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  width: 100%;
  height: 100%;
}
.image-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.image-grid > .image,
.image-grid > .markdown {
  flex: 1;
}
@media only screen and (min-width: 768px) {
  .image-grid {
    flex-direction: row;
    gap: 32px;
  }

  .image-grid > .text * {
    width: 100%;
  }

  .image-grid > .text li {
    width: calc(100% - 4rem);
  }
}
.video {
  position: relative;
  margin-bottom: 7.6923076923076925rem;
}
.video__inner {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  background-color: #e8e8e8;
  overflow: hidden;
}
.video video {
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  top: -2px;
  left: -2px;
  bottom: -2px;
  right: -2px;
  background-color: transparent;
}
/* hide to avoid seeing empty video with controls before poster is loaded */
video.video.has-poster {
  opacity: 0;
}
div.video__poster.video__poster--loaded + img.video__poster--image {
  opacity: 0;
}
img.video__poster {
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: #fff;
}
.video__play {
  opacity: 0.4;
  position: absolute;
  z-index: 2;
}
.video.video--loaded .video__play{
  opacity: 1;
}
.video__play,
.video__poster {
  transition: opacity 100ms;
}
.video[autoplay] .video__play,
.video--playing .video__poster,
.video--playing .video__play {
  opacity: 0;
}
.video--playing .video__poster {
  pointer-events: none;
}
.video--playing .video__play {
  z-index: -1;
}
.video--playing video.video.has-poster {
  opacity: 1;
}
.video--paused .video__play {
  z-index: 2;
  opacity: 1;
}
.video__play {
  top: 50%;
  left: 50%;
  background-color: #fff;
  width: 5.769230769230769rem;
  height: 5.769230769230769rem;
  border-radius: 100%;
  box-shadow: 0 10px 20px rgba(31, 31, 31, 0.5);
  transform: translate3d(-50%, -50%, 0);
  transition: transform 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.video__play .icon {
  position: absolute;
  top: 50%;
  left: 50%;
  color: #5d5fff;
  width: 1.7307692307692308rem;
  height: 1.5384615384615385rem;
  transform: translate3d(-50%, -50%, 0);
  transition: transform 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.no-touchevents .video__play:hover {
  transform: translate3d(-50%, -50%, 0) scale(1.13);
}
.no-touchevents .video__play:hover .icon {
  transform: translate3d(-50%, -50%, 0) scale(0.88496);
}
/* plyr */
.plyr__video-wrapper,
.plyr--ready,
.video__basic {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
  background-color: transparent;
}
.plyr {
  font-family: inherit;
}
.plyr__progress--played,
.plyr__volume--display {
  color: #5d5fff;
}
.plyr--video .plyr__controls button.tab-focus:focus,
.plyr--video .plyr__controls button:hover {
  background-color: transparent;
}
.video .plyr input[type=range]:active::-webkit-slider-thumb { background: #5d5fff; }
.video .plyr input[type=range]:active::-moz-range-thumb { background: #5d5fff; }
.video .plyr input[type=range]:active::-ms-thumb { background: #5d5fff; }
.video:not([controls]) .plyr__controls {
  display: none;
}
.video-hero {
  position: relative;
}
.video-hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  margin-top: 1.9230769230769231rem;
  z-index: 2;
  opacity: 1;
  transition: opacity 200ms;
  pointer-events: none;
}
.video-hero__section {
  color: #fff;
  margin-bottom: 3.8461538461538463rem;
}
.video-hero .video__inner {
  z-index: 1;
  padding-bottom: 50% !important;
}
.video--playing + .video-hero__overlay {
  opacity: 0;
  z-index: -1;
}
/* .no-mobile .video-hero__section {
  margin-bottom: $vs-50;
}

.no-mobile .video-hero .video__inner {
  transition: padding-bottom 200ms;
}

.no-mobile .video-hero .video--playing .video__inner {
  padding-bottom: 56% !important;
} */
.video-hero__section {
  margin-bottom: 1.9230769230769231rem;
}
.video-hero .video__inner {
  transition: padding-bottom 200ms;
}
.video-hero .video--playing .video__inner {
  padding-bottom: 56% !important;
}
.no-objectfit .video-hero .video video {
  height: auto !important;
}
@media only screen and (max-width: 568px) {
  .no-mobile .video-hero__overlay h1 {
    display: none;
  }

  .mobile .video-hero .video__inner {
    padding-bottom: 177% !important;
  }
}
.header {
  position: relative;
}
/**
 * default
 */
.footer__links {
  padding-top: 3.8461538461538463rem;
  padding-bottom: 2.8846153846153846rem;
}
.footer__title {
  color: #a0a0a0;
}
.footer__col {
  width: calc(99.9% * 1/2 - (1.8rem - 1.8rem * 1/2));
  margin-bottom: 1.9230769230769231rem;
}
.footer__col:nth-child(1n) {
  float: left;
  margin-right: 1.8rem;
  clear: none;
}
.footer__col:last-child {
  margin-right: 0;
}
.footer__col:nth-child(2n) {
  margin-right: 0;
  float: right;
}
.footer__col:nth-child(2n + 1) {
  clear: both;
}
/**
 * > small
 */
@media only screen and (min-width: 768px) {
  .footer__col {
    width: calc(99.9% * 1/4 - (1.8rem - 1.8rem * 1/4));
    margin-bottom: 0;
  }
  .footer__col:nth-child(1n) {
    float: left;
    margin-right: 1.8rem;
    clear: none;
  }
  .footer__col:last-child {
    margin-right: 0;
  }
  .footer__col:nth-child(4n) {
    margin-right: 0;
    float: right;
  }
  .footer__col:nth-child(4n + 1) {
    clear: both;
  }
}
.toggle-content {
  height: 0;
  opacity: 0;
  transition:
    height 300ms,
    opacity 300ms;
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
}
/* compensates for hanging quotes outside content el */
.toggle-content--indent {
  margin-left: -0.7692307692307693rem;
  padding-left: 0.7692307692307693rem;
}
[expanded="true"] .toggle-content,
.toggle-content[expanded="true"] {
  opacity: 1;
}
/**
 * default
 */
.featured-projects {
  position: relative;
  border-bottom: 1px solid #e8e8e8;
}
.featured-projects__ymco {
  margin-bottom: 6.730769230769231rem;
}
.featured-projects--condensed {
  padding-top: 7.6923076923076925rem;
}
.featured-projects--condensed .featured-projects__ymco {
  display: none;
}
.featured-projects__title {
  margin-bottom: 3.8461538461538463rem;
}
.featured-projects__nav {
  margin-bottom: 7.6923076923076925rem;
}
.featured-projects__nav-item {
  float: left;
  margin-right: 1.44231rem;
}
.featured-projects--expanded {
  margin-bottom: 7.6923076923076925rem;
}
.toggle-content[expanded="true"],
.featured-projects[expanded="true"] .toggle-content{
  margin-bottom: 3.8461538461538463rem;
}
/**
 * > small
 */
@media only screen and (min-width: 768px) {
  /* something here */
}
.link-list,
.link-list__item {
  margin-bottom: 3.8461538461538463rem;
}
.news-list {
  padding-top: 3.8461538461538463rem;
  padding-bottom: 7.6923076923076925rem;
  border-bottom: 1px solid #e8e8e8;
}
.news-list--news_post {
  border-bottom: 0;
  border-top: 1px solid #e8e8e8;
}
.news-list .link-list {
  margin-bottom: 0;
}
.news-list--done .news-list__load {
  display: none;
}
.news-header {
  margin-bottom: 1.9230769230769231rem;
}
.news-header--extra-margin {
  margin-bottom: 7.6923076923076925rem;
}
.news-title {
  margin-bottom: 0.9615384615384616rem;
}
.text {
  margin-bottom: 7.6923076923076925rem;
}
.text p + h1,
.text p + h2,
.text p + h3,
.text p + h4 {
  margin-top: 7.6923076923076925rem;
}
.text ul,
.text ol {
  margin-left: 1.9230769230769231rem;
  padding-left: 0;
  margin-top: 0;
  padding-top: 0;
  list-style-type: none;
}
.text li {
  position: relative;
  margin-left: 2rem;
  margin-bottom: 0.9615384615384616rem;
}
.text li:last-child {
  margin-bottom: 1.9230769230769231rem;
}
.text li::before {
  position: absolute;
  left: -2rem;
}
.text ul li::before {
  content: "\2022";
  line-height: inherit;
}
.text ol {
  counter-reset: section;
}
.text ol li::before {
  counter-increment: section;
  content: counter(section) ".";
}
.text .list-mini {
  margin-bottom: 3.8461538461538463rem;
}
.text .list-mini:last-child {
  margin-bottom: 0;
}
.text .list-mini li {
  margin-bottom: auto;
  margin-left: -0.25rem;
}
.text .list-mini li::before {
  left: -1.25rem;
}
.text strong {
  font-weight: bold;
}
/**
 * breakpoint > small
 */
@media only screen and (min-width: 768px) {
  /* something here */
  .text--align-left {
    text-align: left;
  }

  .text--align-right {
    text-align: right;
  }
}
.large-text {
  margin-bottom: 7.6923076923076925rem;
}
.quote {
  margin-bottom: 7.6923076923076925rem;
}
.quote--inline {
  margin-bottom: 3.8461538461538463rem;
}
.quote__body {
  quotes: '\201C' '\201D' '\2018' '\2019';
  margin-bottom: 0.9615384615384616rem;
  color: #5d5fff;
}
.quote__body--black {
  color: #151515;
}
.quote--marks .quote__body {
  text-indent: -0.3em;
}
.quote--marks .quote__body::before {
  content: open-quote;
}
.quote--marks .quote__body::after {
  content: close-quote;
}
.page--article blockquote {
  width: calc(99.9% * 3/4 - (1.8rem - 1.8rem * 3/4));
  margin-left: 20%;
}
.page--article blockquote:nth-child(1n) {
  float: left;
  margin-right: 1.8rem;
  clear: none;
}
.page--article blockquote:last-child {
  margin-right: 0;
}
.page--article blockquote:nth-child(4n) {
  margin-right: 0;
  float: right;
}
.page--article blockquote:nth-child(4n + 1) {
  clear: both;
}
/* TODO Should leverage typography.css instead of specifying fonts here */
.page--article .quote__body {
  font-family: 'Plain Bold';
  font-weight: 700;
  font-size: calc(35px + 45 * ((100vw - 420px) / 860));
  line-height: 1;
  letter-spacing: -0.04em;
  font-style: normal;
  color: inherit;
}
@media screen and (min-width: 1280px) {
  .page--article .quote__body {
    font-size: 80px;
  }
}
@media screen and (max-width: 420px) {
  .page--article .quote__body {
    font-size: 35px;
  }
}
/* TODO Should leverage typography.css instead of specifying fonts here */
.page--article .quote__footer {
  font-size: calc(10px + 7 * ((100vw - 420px) / 860));
  line-height: 1.4;
  white-space: pre-wrap;
}
@media screen and (min-width: 1280px) {
  .page--article .quote__footer {
    font-size: 17px;
  }
}
@media screen and (max-width: 420px) {
  .page--article .quote__footer {
    font-size: 10px;
  }
}
.home-btn {
  position: fixed;
  bottom: 1.9230769230769231rem;
  right: 50%;
  background-color: #5d5fff;
  width: 4.153846153846154rem;
  height: 4.153846153846154rem;
  border-radius: 100%;
  box-shadow: 0 10px 20px rgba(31, 31, 31, 0.25);
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(50%, 0, 0);
  transition:
    opacity 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.home-btn--visible {
  opacity: 1;
  pointer-events: auto;
}
.home-btn .icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.6153846153846154rem;
  height: 3.1153846153846154rem;
  transform: translate3d(-50%, -50%, 0);
  transition:
    transform 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    opacity 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  opacity: 1;
}
.home-btn .icon-hover {
  opacity: 0;
}
.no-touchevents .home-btn:hover {
  transform: translate3d(50%, 0, 0) scale(1.27);
}
.no-touchevents .home-btn:hover .icon {
  transform: translate3d(-50%, -50%, 0) scale(0.7874);
  opacity: 0;
}
.no-touchevents .home-btn:hover .icon-hover {
  opacity: 1;
}
@media only screen and (min-width: 768px) {
  .home-btn {
    right: 1.9230769230769231rem;
    transform: translate3d(0, 0, 0);
  }

  .home-btn {
    width: 2.769230769230769rem;
    height: 2.769230769230769rem;
  }

  .no-touchevents .home-btn:hover {
    transform: translate3d(0, 0, 0) scale(1.13);
  }
}
.divider {
  height: 0;
  border-top: 1px solid #e8e8e8;
}
.code {
  background-color: #ffc;
  margin-bottom: 7.6923076923076925rem;
}
.code pre {
  overflow: scroll;
}
.column-lists {
  margin-bottom: 7.6923076923076925rem;
}
.column-lists__col {
  margin-bottom: 1.9230769230769231rem;
}
.column-lists__title {
  line-height: inherit;
}
.column-lists__title,
.column-lists__item {
  margin-bottom: 0.3rem;
}
.column-lists__item {
  color: #a0a0a0;
}
/**
 * > small
 */
@media only screen and (min-width: 768px) {
  .column-lists__col {
    width: calc(99.9% * 1/2 - (1.8rem - 1.8rem * 1/2));
    margin-bottom: 1.9230769230769231rem;
  }
  .column-lists__col:nth-child(1n) {
    float: left;
    margin-right: 1.8rem;
    clear: none;
  }
  .column-lists__col:last-child {
    margin-right: 0;
  }
  .column-lists__col:nth-child(2n) {
    margin-right: 0;
    float: right;
  }
  .column-lists__col:nth-child(2n + 1) {
    clear: both;
  }
}
/**
 * > medium
 */
@media only screen and (min-width: 1024px) {
  .column-lists__col {
    width: calc(99.9% * 1/3 - (1.8rem - 1.8rem * 1/3));
  }
  .column-lists__col:nth-child(1n) {
    float: left;
    margin-right: 1.8rem;
    clear: none;
  }
  .column-lists__col:last-child {
    margin-right: 0;
  }
  .column-lists__col:nth-child(3n) {
    margin-right: 0;
    float: right;
  }
  .column-lists__col:nth-child(3n + 1) {
    clear: both;
  }
}
/**
 * > large
 */
@media only screen and (min-width: 1440px) {
  .column-lists__col {
    width: calc(99.9% * 1/4 - (1.8rem - 1.8rem * 1/4));
  }
  .column-lists__col:nth-child(1n) {
    float: left;
    margin-right: 1.8rem;
    clear: none;
  }
  .column-lists__col:last-child {
    margin-right: 0;
  }
  .column-lists__col:nth-child(4n) {
    margin-right: 0;
    float: right;
  }
  .column-lists__col:nth-child(4n + 1) {
    clear: both;
  }
}
.link-button {
  margin-bottom: 7.6923076923076925rem;
}
.link-button .secondary-link,
.link-button .secondary-link .secondary-link__title {
  color: #5d5fff;
}
.card-list {
  margin-bottom: 7.6923076923076925rem;
  lost-util: clearfix;
}
.card {
  margin-bottom: 1.9230769230769231rem;
}
.card h3 {
  color: #151515;
  margin-bottom: 1px;
}
.card--link h3,
.card--link .card__description {
  color: #5d5fff;
}
/**
 * > small
 */
@media only screen and (min-width: 768px) {
  .card {
    width: calc(99.9% * 2/4 - (1.8rem - 1.8rem * 2/4));
    height: 18.46rem;
  }
  .card:nth-child(1n) {
    float: left;
    margin-right: 1.8rem;
    clear: none;
  }
  .card:last-child {
    margin-right: 0;
  }
  .card:nth-child(2n) {
    margin-right: 0;
    float: right;
  }
  .card:nth-child(2n + 1) {
    clear: both;
  }

  .card__inner {
    padding: 1.5384615384615385rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 2px solid rgba(93, 93, 255, 0.5);
    border-radius: 5px;
    transition: border-color 200ms;
    color: #5d5fff;
  }

  .no-touchevents .card--link:hover .card__inner {
    border-color: #5d5fff;
  }

  .card--filled .card__inner,
  .card--gradient .card__inner {
    color: white;
    border: 0;
  }

  .card--filled .card__inner {
    background-color: #5d5fff;
  }

  .card--gradient .card__inner {
    background-image: linear-gradient(225deg, #b12dff 0%, #5d5fff 100%);
  }

  .card h3 {
    color: inherit;
    margin-bottom: 0;
  }

  .card__description {
    margin-top: auto;
  }
}
/**
 * > small
 */
@media only screen and (min-width: 1024px) {
  .card {
    width: calc(99.9% * 1/4 - (1.8rem - 1.8rem * 1/4));
  }
  .card:nth-child(1n) {
    float: left;
    margin-right: 1.8rem;
    clear: none;
  }
  .card:last-child {
    margin-right: 0;
  }
  .card:nth-child(4n) {
    margin-right: 0;
    float: right;
  }
  .card:nth-child(4n + 1) {
    clear: both;
  }
}
.helmet-hero {
  height: 85vh;
  position: relative;
  z-index: -1;
}
@media screen and (max-width: 768px) {
  .helmet-hero {
    height: 375px;
    margin-bottom: 0 !important;
  }
}
.helmet {
  position: absolute;
  width: 111.1111111112%;
  height: 100%;
  margin-left: -5.5555555556%;
  perspective: 600px;
}
.helmet svg {
  height: 166%;
  width: 100%;
  transform: translate3d(0, -20.3%, 0);
}
.helmet--animate .helmet__path {
  opacity: 1;
  transform: translate3d(0,0,0) rotate(0) !important;
}
.helmet--loading .helmet__path {
  transition-duration: 0s;
  transition-delay: 0s !important;
}
.helmet__path {
  opacity: 0;
  transition-duration: 1.6s;
  transition-property: transform opacity;
  transition-timing-function: cubic-bezier(0.000, 0.700, 0.305, 1.000);
  will-change: transform;
}
.helmet__path:nth-child(1) {
  transition-delay: 0s;
  transform: translate3d(-802px, 680px, 0) rotate(90deg);
  transform-origin: 738px 862px;
}
.helmet__path:nth-child(2) {
  transition-delay: 0.16s;
  transform: translate3d(-590px, -533px, 0) rotate(-90deg);
  transform-origin: 870px 862px;
}
.helmet__path:nth-child(3) {
  transition-delay: 0.24s;
  transform: translate3d(412px, 660px, 0) rotate(90deg);
  transform-origin: 804px 832px;
}
.helmet__path:nth-child(4) {
  transition-delay: 0.36s;
  transform: translate3d(632px, 620px, 0) rotate(-90deg);
  transform-origin: 725px 1024px;
}
.helmet__path:nth-child(5) {
  transition-delay: 0.4s;
  transform: translate3d(810px, -605px, 0) rotate(90deg);
  transform-origin: 880px 1024px;
}
.helmet__path:nth-child(6) {
  transition-delay: 0.5s;
  transform: translate3d(972px, 0, 0) rotate(-90deg);
  transform-origin: 909px 900px;
}
.helmet__path:nth-child(7) {
  transition-delay: 0.56s;
  transform: translate3d(-1016px, 138px, 0) rotate(90deg);
  transform-origin: 698px 900px;
}
.helmet__path:nth-child(8) {
  transition-delay: 0.58s;
  transform: translate3d(-950px, 334px, 0) rotate(-90deg);
  transform-origin: 647px 1072px;
}
.helmet__path:nth-child(9) {
  transition-delay: 0.62s;
  transform: translate3d(946px, 394px, 0) rotate(90deg);
  transform-origin: 970px 1072px;
}
.helmet__path:nth-child(10) {
  transition-delay: 0.66s;
  transform: translate3d(-758px, -584px, 0) rotate(-90deg);
  transform-origin: 664px 975px;
}
.helmet__path:nth-child(11) {
  transition-delay: 0.7s;
  transform: translate3d(966px, -516px, 0) rotate(90deg);
  transform-origin: 944px 975px;
}
.helmet__path:nth-child(12) {
  transition-delay: 0.72s;
  transform: translate3d(726px, 576px, 0) rotate(-90deg);
  transform-origin: 863px 1123px;
}
.helmet__path:nth-child(13) {
  transition-delay: 0.74s;
  transform: translate3d(504px, -626px, 0) rotate(90deg);
  transform-origin: 744px 1123px;
}
.helmet__path:nth-child(14) {
  transition-delay: 0.78s;
  transform: translate3d(958px, 312px, 0) rotate(-90deg);
  transform-origin: 964px 712px;
}
.helmet__path:nth-child(15) {
  transition-delay: 0.82s;
  transform: translate3d(-338px, 788px, 0) rotate(90deg);
  transform-origin: 898px 624px;
}
.helmet__path:nth-child(16) {
  transition-delay: 0.84s;
  transform: translate3d(704px, -444px, 0) rotate(-90deg);
  transform-origin: 710px 624px;
}
.helmet__path:nth-child(17) {
  transition-delay: 0.88s;
  transform: translate3d(-992px, -228px, 0) rotate(90deg);
  transform-origin: 644px 712px;
}
.helmet__path:nth-child(18) {
  transition-delay: 0.9s;
  transform: translate3d(348px, -403px, 0) rotate(-90deg);
  transform-origin: 576px 584px;
}
.helmet__path:nth-child(19) {
  transition-delay: 0.94s;
  transform: translate3d(-946px, 69px, 0) rotate(90deg);
  transform-origin: 625px 572px;
}
.helmet__path:nth-child(20) {
  transition-delay: 0.96s;
  transform: translate3d(-992px, -342px, 0) rotate(-90deg);
  transform-origin: 759px 525px;
}
.helmet__path:nth-child(21) {
  transition-delay: 1s;
  transform: translate3d(362px, 800px, 0) rotate(90deg);
  transform-origin: 1032px 583px;
}
.helmet__path:nth-child(22) {
  transition-delay: 1.04s;
  transform: translate3d(-236px, -410px, 0) rotate(-90deg);
  transform-origin: 983px 572px;
}
.helmet__path:nth-child(23) {
  transition-delay: 1.1s;
  transform: translate3d(-338px, -427px, 0) rotate(90deg);
  transform-origin: 849px 525px;
}
.newsletter-signup {
  position: relative;
  margin-bottom: 3.8461538461538463rem;
}
.newsletter-signup__inner {
  position: relative;
}
.newsletter-signup__10things {
  padding-bottom: 1.9230769230769231rem;
}
.newsletter-signup .input--radio {
  margin-bottom: 0.9615384615384616rem;
}
.newsletter-signup__confirmation {
  padding: 0.9615384615384616rem 0;
  width: 100%;
}
.newsletter-signup--error .newsletter-signup__confirmation {
  color: #5d5fff;
}
.newsletter-signup__bottom {
  position: relative;
}
.newsletter-signup__bottom .toggle-content--submit {
  z-index: 10;
}
/**
 * breakpoint > medium
 */
@media only screen and (min-width: 1024px) {
  .newsletter-signup__inner {
    width: calc(99.9% * 1/2 - (1.8rem - 1.8rem * 1/2));
  }
  .newsletter-signup__inner:nth-child(1n) {
    float: left;
    margin-right: 1.8rem;
    clear: none;
  }
  .newsletter-signup__inner:last-child {
    margin-right: 0;
  }
  .newsletter-signup__inner:nth-child(2n) {
    margin-right: 0;
    float: right;
  }
  .newsletter-signup__inner:nth-child(2n + 1) {
    clear: both;
  }

  .newsletter-signup .input--radio {
    margin-bottom: 0;
  }
}
.project-title {
  margin-bottom: 0.9615384615384616rem;
}
@media only screen and (min-width: 768px) {
  .project-title {
    margin-bottom: 1.9230769230769231rem;
  }
}


/*# sourceMappingURL=2ae7b5d44e0f0e3d4c8e2ec642bcae5461032d54_CSS.38115c71.chunk.css.map*/