styles.scss

/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
html {
  line-height: 1.15;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

article,
aside,
footer,
header,
nav,
section {
  display: block;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

figcaption,
figure,
main {
  display: block;
}

figure {
  margin: 1em 40px;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}

b,
strong {
  font-weight: inherit;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

dfn {
  font-style: italic;
}

mark {
  background-color: #ff0;
  color: #000;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

audio,
video {
  display: inline-block;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

img {
  border-style: none;
}

svg:not(:root) {
  overflow: hidden;
}

button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
html [type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type='button']:-moz-focusring,
[type='reset']:-moz-focusring,
[type='submit']:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  display: inline-block;
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type='checkbox'],
[type='radio'] {
  box-sizing: border-box;
  padding: 0;
}

[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
  height: auto;
}

[type='search'] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type='search']::-webkit-search-cancel-button,
[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details,
menu {
  display: block;
}

summary {
  display: list-item;
}

canvas {
  display: inline-block;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

*,
*:before,
*:after {
  outline: none;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}

html,
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100%;
}

body {
  font-family: 'proxima-nova', sans-serif;
  background-color: #fff;
}

::-moz-selection {
  background: #a116b7;
  color: #fff;
}

::selection {
  background: #a116b7;
  color: #fff;
}

::-moz-selection {
  background: #a116b7;
  color: #fff;
}

p,
h1,
h2,
h3,
h4,
h5 {
  font-style: normal;
  margin-top: 0;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

svg {
  display: block;
  overflow: visible !important;
}

a,
button,
input[type='submit'],
path {
  transition: background-color 0.3s ease, color 0.3s ease,
    border-color 0.3s ease, opacity 0.3s ease, fill 0.3s ease;
}

input,
textarea,
button,
fieldset,
legend {
  font-family: 'proxima-nova', sans-serif;
  outline: none;
  -webkit-appearance: none;
  border: none;
  padding: 0;
  margin: 0;
  background: transparent;
  line-height: normal;
}

button {
  cursor: pointer;
}

a,
a:active,
a:visited,
a:hover {
  text-decoration: none;
}

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

svg {
  display: block;
  overflow: visible;
}

.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

@media screen and (min-width: 1020px) {
  .mobile-only {
    display: none;
  }
}

@media screen and (max-width: 1019px) {
  body.menu-active {
    height: 100%;
    overflow: hidden;
  }

  .desktop-only {
    display: none !important;
  }

  .mobile-break {
    display: block;
  }
}

main {
  position: relative;
  overflow: hidden;
}

.container {
  width: 100%;
  margin: 0 auto;
}

.standard-button {
  color: #fff;
  line-height: 1;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
}

.standard-button.purple {
  background-color: #12063d;
}

.no-touchevents .standard-button.purple:hover {
  background-color: #a116b7;
}

.feature {
  display: flex;
  border-bottom: 1px solid #eae9ee;
}

.feature.centered {
  align-items: center;
}

.feature .icon>div {
  position: relative;
  border-radius: 50%;
  background-color: #f4f3f9;
}

.feature .icon>div img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.feature .description {
  line-height: 30px;
}

.feature .description h4 {
  color: #12063d;
  margin: 0;
}

.feature .description p {
  color: #12063d;
  margin: 0;
}

.love {
  display: inline-block;
  vertical-align: middle;
  background-image: url(/img/heart.svg);
  background-size: cover;
  text-indent: -9999px;
  overflow: hidden;
  margin: 0 5px;
}

.tooltip {
  background-color: #12063d;
  transition: background-color 300ms ease;
  width: 33px;
  height: 33px;
  border-radius: 50%;
  position: relative;
  z-index: 4;
  color: #fff;
}

.tooltip:before {
  content: '?';
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.no-touchevents .tooltip:hover,
.tooltip.active {
  background-color: #a116b7;
}

.no-touchevents .tooltip:hover div,
.tooltip.active div {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translate(-50%, -100%);
  transform: translate(-50%, -100%);
}

.tooltip div {
  position: absolute;
  background-color: #12063d;
  font-size: 15px;
  padding: 14px 10px;
  width: 209px;
  text-align: center;
  border-radius: 20px;
  top: 0;
  left: 50%;
  -webkit-transform: translate(-50%, -90%);
  transform: translate(-50%, -90%);
  margin-top: -14px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms ease, visibility 300ms ease,
    -webkit-transform 300ms ease;
  transition: opacity 300ms ease, visibility 300ms ease, transform 300ms ease;
  transition: opacity 300ms ease, visibility 300ms ease, transform 300ms ease,
    -webkit-transform 300ms ease;
}

.tooltip div:after {
  content: '';
  position: absolute;
  -webkit-transform: translateX(-50%) rotate(-45deg);
  transform: translateX(-50%) rotate(-45deg);
  width: 20px;
  height: 20px;
  bottom: -8px;
  background-color: #12063d;
  border-radius: 3px;
  font-weight: 700;
  font-size: 15px;
}

.tooltip div p {
  font-size: 15px;
  line-height: 20px;
  margin: 0;
}

.infinite-movement {
  position: absolute;
  width: 100%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.infinite-movement>* {
  position: absolute;
  top: 0;
}

@-webkit-keyframes antenna-move {
  0% {
    width: 0px;
    height: 0px;
    opacity: 0;
  }

  10% {
    width: 0px;
    height: 0px;
    opacity: 1;
  }

  100% {
    width: 100px;
    height: 100px;
    opacity: 0;
  }
}

@keyframes antenna-move {
  0% {
    width: 0px;
    height: 0px;
    opacity: 0;
  }

  10% {
    width: 0px;
    height: 0px;
    opacity: 1;
  }

  100% {
    width: 100px;
    height: 100px;
    opacity: 0;
  }
}

@-webkit-keyframes object-float {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateY(-250px);
    transform: translateY(-250px);
    opacity: 0;
  }
}

@keyframes object-float {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateY(-250px);
    transform: translateY(-250px);
    opacity: 0;
  }
}

.sphere.orange {
  background-image: url(/img/sphere-orange.png);
  width: 366px;
  height: 366px;
}

@media (min--moz-device-pixel-ratio: 1.3),
(-webkit-min-device-pixel-ratio: 1.3),
(min-device-pixel-ratio: 1.3),
(min-resolution: 1.3dppx) {
  .sphere.orange {
    background-image: url('/img/sphere-orange@2x.png');
    background-size: 366px 366px;
  }
}

.sphere.orange-opaque {
  background-image: url(/img/sphere-orange-opaque.png);
  width: 193px;
  height: 193px;
}

@media (min--moz-device-pixel-ratio: 1.3),
(-webkit-min-device-pixel-ratio: 1.3),
(min-device-pixel-ratio: 1.3),
(min-resolution: 1.3dppx) {
  .sphere.orange-opaque {
    background-image: url('/img/sphere-orange-opaque@2x.png');
    background-size: 193px 193px;
  }
}

.sphere.purple-glow {
  background-image: url(/img/sphere-purple-glow.png);
  width: 414px;
  height: 414px;
}

@media (min--moz-device-pixel-ratio: 1.3),
(-webkit-min-device-pixel-ratio: 1.3),
(min-device-pixel-ratio: 1.3),
(min-resolution: 1.3dppx) {
  .sphere.purple-glow {
    background-image: url('/img/sphere-purple-glow@2x.png');
    background-size: 414px 414px;
  }
}

.sphere.teal {
  background-image: url(/img/sphere-teal.png);
  width: 311px;
  height: 311px;
}

@media (min--moz-device-pixel-ratio: 1.3),
(-webkit-min-device-pixel-ratio: 1.3),
(min-device-pixel-ratio: 1.3),
(min-resolution: 1.3dppx) {
  .sphere.teal {
    background-image: url('/img/sphere-teal@2x.png');
    background-size: 311px 311px;
  }
}

.sphere.teal-opaque {
  background-image: url(/img/sphere-teal-opaque.png);
  width: 156px;
  height: 156px;
}

@media (min--moz-device-pixel-ratio: 1.3),
(-webkit-min-device-pixel-ratio: 1.3),
(min-device-pixel-ratio: 1.3),
(min-resolution: 1.3dppx) {
  .sphere.teal-opaque {
    background-image: url('/img/sphere-teal-opaque.png');
    background-size: 156px 156px;
  }
}

.sphere.purple {
  background-image: url(/img/sphere-purple.png);
  width: 298px;
  height: 298px;
}

@media (min--moz-device-pixel-ratio: 1.3),
(-webkit-min-device-pixel-ratio: 1.3),
(min-device-pixel-ratio: 1.3),
(min-resolution: 1.3dppx) {
  .sphere.purple {
    background-image: url('/img/sphere-purple@2x.png');
    background-size: 298px 298px;
  }
}

@media screen and (min-width: 1020px) {
  .container {
    padding: 0 55px;
    max-width: 1596px;
  }

  .standard-button {
    border-radius: 30px;
    padding: 17px 36px;
    font-size: 16px;
  }

  .feature {
    padding: 28px 0 28px 0;
  }

  .feature:last-child {
    border-bottom: none;
  }

  .feature .icon>div {
    width: 66px;
    height: 66px;
  }

  .feature .description {
    max-width: 395px;
    margin-left: 30px;
    margin-right: 30px;
  }

  .feature .description h4 {
    font-size: 17px;
  }

  .feature .description p {
    line-height: 31px;
    font-size: 17px;
  }

  .row {
    justify-content: space-between;
    display: flex;
  }

  .row.two-columns {
    justify-content: space-between;
    margin-right: -15px;
    margin-left: -15px;
  }

  .row.two-columns>* {
    max-width: 557px;
    padding: 0 15px;
    width: 50%;
  }

  .row.three-columns {
    justify-content: flex-start;
    margin-right: -40px;
    margin-left: -40px;
    flex-wrap: wrap;
  }

  .row.three-columns>* {
    width: 33.3%;
  }

  .row.three-columns>*>* {
    margin: 0 auto;
    max-width: 360px;
    padding: 0 15px;
  }

  .row.five-columns {
    justify-content: center;
    flex-wrap: wrap;
  }

  .row.five-columns>* {
    width: 20%;
  }

  .row.five-columns>*>* {
    margin: 0 auto;
  }

  .love {
    width: 17px;
    height: 15px;
  }
}

@media screen and (max-width: 1019px) {
  .container {
    padding: 0 25px;
  }

  .standard-button {
    border-radius: 30px;
    padding: 17px 38px;
    font-size: 16px;
  }
}

@media screen and (max-width: 1019px) and (min-width: 600px) {
  .row.three-columns {
    justify-content: space-between;
    display: flex;
    margin-right: -15px;
    margin-left: -15px;
    flex-wrap: wrap;
  }

  .row.five-columns {
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
  }
}

@media screen and (max-width: 1019px) {
  .row.three-columns>* {
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }

  .row.five-columns>* {
    max-width: 280px;
  }
}

@media screen and (max-width: 1019px) and (min-width: 600px) {
  .row.three-columns>* {
    padding: 0 15px;
    width: 50%;
  }

  .row.five-columns>* {
    padding: 0 16px;
  }
}

@media screen and (max-width: 599px) {
  .row.five-columns>* {
    max-width: unset !important;
  }
}

@media screen and (max-width: 1019px) {
  .feature {
    padding: 32px 0 35px 0;
  }

  .feature .icon>div {
    width: 61px;
    height: 61px;
  }

  .feature .description {
    margin-left: 22px;
  }

  .feature .description h4 {
    font-size: 16px;
  }

  .feature .description p {
    line-height: 29px;
    font-size: 16px;
  }

  .row .column:last-child .feature:last-child {
    border-bottom: none;
  }

  .love {
    width: 14px;
    height: 12px;
  }
}

.page-scroll {
  display: block;
  position: relative;
  z-index: 3;
  width: 45px;
  height: 45px;
  margin: 0 auto;
}

.page-scroll.has-title {
  height: 72px;
}

.page-scroll span:not(.visually-hidden) {
  text-align: center;
  font-weight: 700;
  text-transform: uppercase;
  position: absolute;
  left: 50%;
  top: 0;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.page-scroll svg {
  position: absolute;
  width: 12px;
  height: 32px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  transition: -webkit-transform 300ms ease;
  transition: transform 300ms ease;
  transition: transform 300ms ease, -webkit-transform 300ms ease;
}

.page-scroll.has-title svg {
  top: auto;
  bottom: 0;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}

.no-touchevents .page-scroll:hover svg {
  -webkit-transform: translate(-50%, 30%);
  transform: translate(-50%, 30%);
}

.no-touchevents .page-scroll:not(.has-title):hover svg {
  -webkit-transform: translate(-50%, -10%);
  transform: translate(-50%, -10%);
}

.page-scroll.orange {
  color: #f98569;
}

.page-scroll.orange svg {
  fill: #f98569;
}

.page-scroll.teal {
  color: #05bcd4;
}

.page-scroll.teal svg {
  fill: #05bcd4;
}

.page-scroll.pink {
  color: #a116b7;
}

.page-scroll.pink svg {
  fill: #a116b7;
}

.page-scroll.magenta {
  color: #ff35d7;
}

.page-scroll.magenta svg {
  fill: #ff35d7;
}

.page-scroll.has-waves:before,
.page-scroll.has-waves:after {
  content: '';
  background-size: 1875px 50px;
  position: absolute;
  width: 1875px;
  height: 50px;
  background-repeat: no-repeat;
}

.page-scroll.has-waves:before {
  top: -20px;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  margin-left: -35px;
  background-image: url(/img/reuseable-divider-wave-alt.svg);
}

.page-scroll.has-waves:after {
  top: -20px;
  margin-left: 70px;
  background-image: url(/img/reuseable-divider-wave.svg);
}

@media screen and (min-width: 1020px) {
  #menu-button {
    display: none;
  }
}

@media screen and (max-width: 1019px) {
  #menu-button {
    position: fixed;
    background-color: #12063d;
    width: 46px;
    height: 46px;
    z-index: 999;
    top: 20px;
    right: 20px;
    border-radius: 50%;
  }

  .no-touchevents #menu-button:hover {
    background-color: #6d00e8;
  }

  #menu-button svg {
    position: absolute;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    fill: #fff;
    transition: all 300ms ease;
  }

  #menu-button .icon-kebab svg {
    width: 30px;
    height: 30px;
    opacity: 1;
    visibility: visible;
  }

  #menu-button .icon-kebab svg path {
    fill: #fff;
  }

  .menu-active #menu-button .icon-kebab svg {
    opacity: 0;
    visibility: hidden;
  }

  #menu-button .close {
    width: 16px;
    height: 16px;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translate(-50%, -50%) scale(1.5);
    transform: translate(-50%, -50%) scale(1.5);
  }

  .menu-active #menu-button .close {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
  }

  #menu-button span {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
}

.main-header .logo span {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.main-header .menu>div>ul>li>span:after {
  position: relative;
}

@media screen and (min-width: 1020px) {
  .main-header .logo {
    position: absolute;
    position: absolute;
    z-index: 3;
    width: 150px;
    height: 99px;
    top: 28px;
    left: 66px;
  }

  .main-header .menu {
    position: absolute;
    z-index: 9;
    right: 66px;
    top: 24px;
  }

  .main-header .menu>div>ul {
    display: flex;
    align-items: center;
  }

  .main-header .menu>div>ul>li {
    font-weight: 700;
    position: relative;
  }

  .main-header .menu>div>ul>li:not(:first-child) {
    margin-left: 0px;
  }

  .main-header .menu>div>ul>li>a:not(.standard-button) {
    color: #12063d;
  }

  .main-header .menu>div>ul>li>a:not(.standard-button).active {
    color: #c4cbd7;
  }

  .no-touchevents .main-header .menu>div>ul>li>a:not(.standard-button):hover {
    color: #c4cbd7;
  }

  .main-header .menu>div>ul>li>a:not(.standard-button),
  .main-header .menu>div>ul>li>span {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
  }

  .main-header .menu>div>ul>li>span {
    color: #a116b7;
    letter-spacing: 1.3px;
    padding-right: 18px;
  }

  .main-header .menu>div>ul>li>span:after {
    content: '';
    position: absolute;
    background-image: url(/img/down-arrow-pink.svg);
    background-size: 10px 7px;
    width: 10px;
    height: 7px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    transition: -webkit-transform 300ms ease;
    transition: transform 300ms ease;
    transition: transform 300ms ease, -webkit-transform 300ms ease;
    right: 0;
  }

  .main-header .menu>div>ul>li>ul {
    position: absolute;
    background-color: #fff;
    border-radius: 13px;
    box-shadow: 0px 0px 57px 0px rgba(58, 16, 82, 0.06);
    left: 50%;
    top: 39px;
    transition: visibility 300ms ease, opacity 300ms ease,
      -webkit-transform 300ms ease;
    transition: visibility 300ms ease, transform 300ms ease, opacity 300ms ease;
    transition: visibility 300ms ease, transform 300ms ease, opacity 300ms ease,
      -webkit-transform 300ms ease;
    -webkit-transform: translate(-50%, 0px);
    transform: translate(-50%, 0px);
    opacity: 0;
    visibility: hidden;
    z-index: 999;
  }

  .main-header .menu>div>ul>li>ul li {
    width: 155px;
    padding: 10px 15px;
  }

  .main-header .menu>div>ul>li>ul li:not(:last-child) {
    border-bottom: 1px solid #eeeef0;
  }

  .main-header .menu>div>ul>li>ul li a {
    color: #12063d;
    font-size: 15px;
    font-weight: 400;
  }

  .no-touchevents .main-header .menu>div>ul>li>ul li a:hover {
    color: #a116b7;
  }

  .main-header .menu>div>ul>li>ul li.language {
    padding-right: 55px;
    background-repeat: no-repeat;
    background-position: right 10px center;
  }

  .main-header .menu>div>ul>li>ul li.language.english {
    background-image: url(/img/flag-english.png);
  }

  .main-header .menu>div>ul>li>ul li.language.chinese {
    background-image: url(/img/flag-chinese.png);
  }

  .main-header .menu>div>ul>li>ul li.language.japanese {
    background-image: url(/img/flag-japanese.png);
  }

  .no-touchevents .main-header .menu>div>ul>li:hover>ul,
  .main-header .menu>div>ul>li.active>ul {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate(-50%, 10px);
    transform: translate(-50%, 10px);
  }

  .no-touchevents .main-header .menu>div>ul>li:hover span:after,
  .main-header .menu>div>ul>li.active span:after {
    -webkit-transform: translateY(-50%) rotate(180deg);
    transform: translateY(-50%) rotate(180deg);
  }

  .no-touchevents .main-header .menu>div>ul>li:hover>ul:before {
    content: '';
    position: absolute;
    height: 50px;
    width: 100%;
    top: -49px;
    left: 0;
  }

  .main-header.clone {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    box-shadow: 0px 0px 57px 0px rgba(58, 16, 82, 0.06);
    background-color: #fff;
    height: 72px;
    -webkit-transform: translateY(-200px);
    transform: translateY(-200px);
    transition: -webkit-transform 300ms ease;
    transition: transform 300ms ease;
    transition: transform 300ms ease, -webkit-transform 300ms ease;
  }

  .main-header.clone .logo {
    overflow: hidden;
    width: 100px;
    height: 47px;
    top: 14px;
    left: 66px;
  }

  .main-header.clone .menu {
    top: 4px;
  }

  .main-header.clone {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@media screen and (min-width: 1280px) {
  .main-header .menu>div>ul>li:not(:first-child) {
    margin-left: 24px;
  }
}

@media screen and (max-width: 1019px) {
  .main-header {
    margin-top: 22px;
    margin-bottom: 21px;
  }

  .main-header.clone {
    display: none;
  }

  .main-header .logo {
    width: 64px;
    height: 72px;
    margin: 0 auto;
  }

  .main-header .menu {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-image: linear-gradient(#7607da, #f7356d);
    transition: all 300ms ease;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
  }

  .main-header .menu>div {
    position: fixed;
    z-index: 101;
    top: 0;
    left: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    height: 100%;
    width: 100%;
  }

  .main-header .menu>div:before {
    content: '';
    position: absolute;
    width: 64px;
    height: 73px;
    background-image: url(/img/audius-white.svg);
    background-size: 64px 73px;
    left: 50%;
    top: 20px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }

  .main-header .menu>div>ul {
    text-align: center;
    padding-top: 155px;
    padding-bottom: 70px;
  }

  .main-header .menu>div>ul>li {
    font-weight: 800;
  }

  .main-header .menu>div>ul>li:not(:last-child) {
    margin-bottom: 32px;
  }

  .main-header .menu>div>ul>li:last-child {
    padding-top: 20px;
  }

  .main-header .menu>div>ul>li>a:not(.standard-button) {
    color: #fff;
    letter-spacing: 8px;
    font-size: 23px;
    text-transform: uppercase;
  }

  .main-header .menu>div>ul>li>span {
    color: #fff;
    letter-spacing: 8px;
    font-size: 23px;
    text-transform: uppercase;
    padding-right: 25px;
    position: relative;
  }

  .main-header .menu>div>ul>li>span:after {
    content: '';
    position: absolute;
    background-image: url(/img/down-arrow-white.svg);
    background-size: 15px 10px;
    width: 15px;
    height: 10px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    transition: -webkit-transform 300ms ease;
    transition: transform 300ms ease;
    transition: transform 300ms ease, -webkit-transform 300ms ease;
    right: 0;
  }

  .main-header .menu>div>ul>li.active>span:after {
    -webkit-transform: translateY(-50%) rotate(-180deg);
    transform: translateY(-50%) rotate(-180deg);
  }

  .main-header .menu>div>ul>li>ul {
    height: 0;
    overflow: hidden;
  }

  .main-header .menu>div>ul>li>ul>li {
    background-color: #fff;
    border-bottom: 1px solid #ebecee;
    background-position: 200px center;
  }

  .main-header .menu>div>ul>li>ul>li:first-child {
    margin-top: 24px;
  }

  .main-header .menu>div>ul>li>ul>li.language>a {
    margin: 0 auto;
    max-width: 46%;
    min-width: 142px;
    padding-right: 55px;
    text-align: left;
    background-repeat: no-repeat;
    background-position: center right 10px;
  }

  .main-header .menu>div>ul>li>ul>li.language.english a {
    background-image: url(/img/flag-english.png);
  }

  .main-header .menu>div>ul>li>ul>li.language.chinese a {
    background-image: url(/img/flag-chinese.png);
  }

  .main-header .menu>div>ul>li>ul>li.language.japanese a {
    background-image: url(/img/flag-japanese.png);
  }

  .main-header .menu>div>ul>li>ul>li a {
    display: block;
    font-weight: 400;
    font-size: 15px;
    color: #12063d;
    padding: 14px;
    text-align: center;
  }

  .no-touch .main-header .menu>div>ul>li>ul>li a:hover {
    color: #a116b7;
  }

  .menu-active .main-header .menu {
    opacity: 1;
    visibility: visible;
  }

  .main-header .menu .bg-shapes {
    left: 0;
    top: 0;
    position: fixed;
    width: 100%;
    height: 709px;
    overflow: hidden;
  }

  .main-header .menu .bg-shapes span {
    position: fixed;
    width: 642px;
    height: 559px;
    background-image: url(/img/menu-bg-shapes.png);
    top: 150px;
    left: 28%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
}

@media screen and (max-width: 1019px) and (min--moz-device-pixel-ratio: 1.3),
screen and (max-width: 1019px) and (-webkit-min-device-pixel-ratio: 1.3),
screen and (max-width: 1019px) and (min-device-pixel-ratio: 1.3),
screen and (max-width: 1019px) and (min-resolution: 1.3dppx) {
  .main-header .menu .bg-shapes span {
    background-image: url('/img/menu-bg-shapes@2x.png');
    background-size: 642px 559px;
  }
}

#intro .header {
  color: #12063d;
  text-align: center;
  z-index: 2;
}

#intro .header h2 {
  font-weight: 800;
}

#intro .header p {
  font-weight: 400;
  line-height: 1.7em;
}

#intro .play {
  background-color: #12063d;
  border-radius: 50%;
  position: absolute;
  z-index: 3;
}

#intro .play span {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

#intro .play svg {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  fill: #fff;
}

.no-touchevents #intro .play:hover {
  background-color: #a116b7;
}

#intro .animation {
  width: 100%;
  z-index: 1;
}

#intro .partners {
  position: absolute;
  z-index: 2;
  opacity: 0.6;
  width: 100%;
  text-align: center;
  color: #fff;
}

#intro .partners h3 {
  text-transform: uppercase;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.09em;
  margin: 0;
}

#intro .partners .logos ul {
  list-style: none;
  margin: 0;
  padding: 0;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

#intro .partners .logos ul li span {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

@media screen and (min-width: 1020px) {
  #intro {
    width: 100%;
    height: 100vh;
    min-height: 955px;
    position: relative;
  }

  #intro .header {
    position: absolute;
    top: 180px;
    width: 100%;
  }

  #intro .header h2 {
    font-size: 83px;
    margin-bottom: 12px;
  }

  #intro .header p {
    font-size: 23px;
    margin-bottom: 0;
  }

  #intro .play {
    width: 102px;
    height: 102px;
    box-shadow: 0px 2px 87px 0px rgba(18, 6, 60, 0.6);
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: 200px;
  }

  #intro .play svg {
    margin-left: 5px;
    width: 37px;
    height: 45px;
  }

  #intro .animation {
    position: absolute;
    height: 1002px;
    bottom: -355px;
  }

  #intro .partners {
    bottom: 35px;
  }

  #intro .partners h3 {
    font-size: 14px;
  }

  #intro .partners .logos {
    margin-top: 32px;
  }

  #intro .partners .logos ul li {
    margin: 0 36px;
  }

  #intro .partners .logos ul li img.general {
    width: 205px;
    height: 29px;
  }

  #intro .partners .logos ul li img.kpcb {
    width: 224px;
    height: 21px;
  }

  #intro .partners .logos ul li img.lightspeed {
    width: 150px;
    height: 31px;
  }

  #intro .partners .logos ul li img.pantera {
    width: 152px;
    height: 12px;
  }
}

@media screen and (max-width: 1019px) {
  #intro {
    position: absolute;
    overflow: hidden;
    position: relative;
  }

  #intro .header {
    position: relative;
    margin-bottom: 19px;
    padding: 0 30px;
  }

  #intro .header h2 {
    font-size: 44px;
    margin-bottom: 7px;
  }

  #intro .header p {
    font-size: 18px;
    margin-bottom: 0;
  }

  #intro .white-paper {
    position: relative;
    z-index: 2;
    display: table;
    margin: 0 auto;
  }

  #intro .play {
    width: 77px;
    height: 77px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    margin-top: 142px;
  }

  #intro .play svg {
    margin-left: 4px;
    width: 27px;
    height: 33px;
  }

  #intro .animation {
    position: relative;
    width: 100%;
    overflow: hidden;
    height: 601px;
  }

  #intro .partners {
    bottom: 130px;
  }

  #intro .partners h3 {
    font-size: 13px;
  }

  #intro .partners .logos {
    margin-top: 42px;
  }

  #intro .partners .logos ul li {
    margin: 0 10px 44px 10px;
    display: flex;
    align-items: center;
    height: 23px;
  }

  #intro .partners .logos ul li img {
    margin: 0 auto;
  }

  #intro .partners .logos ul li img.general {
    width: 149px;
    height: 22px;
  }

  #intro .partners .logos ul li img.kpcb {
    width: 148px;
    height: 14px;
  }

  #intro .partners .logos ul li img.lightspeed {
    width: 108px;
    height: 23px;
  }

  #intro .partners .logos ul li img.pantera {
    width: 112px;
    height: 10px;
  }
}

#intro-animation {
  height: 1002px;
  position: absolute;
  z-index: 1;
  left: 0;
  overflow: hidden;
  background-repeat: repeat-x;
  background-position: center;
  background-image: url(/img/intro-animation-wave-bg.png);
}

@media (min--moz-device-pixel-ratio: 1.3),
(-webkit-min-device-pixel-ratio: 1.3),
(min-device-pixel-ratio: 1.3),
(min-resolution: 1.3dppx) {
  #intro-animation {
    background-image: url('/img/intro-animation-wave-bg@2x.png');
    background-size: 4000px 1002px;
  }
}

#intro-animation .wave {
  fill: none;
}

#intro-animation .wave path {
  stroke: #ff0;
  stroke-width: 1.25;
  stroke-miterlimit: 10;
}

#intro-animation .dot {
  top: -30px;
  left: -30px;
  position: absolute;
  width: 61px;
  height: 61px;
  background-size: 100% 100%;
}

#intro-animation .dot span {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

#intro-animation .dot:before,
#intro-animation .dot:after {
  content: '';
  position: absolute;
  z-index: 1;
  width: 95px;
  height: 95px;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%) scale(0.4);
  transform: translate(-50%, -50%) scale(0.4);
  -webkit-animation: dot-pulse 2s infinite;
  animation: dot-pulse 2s infinite;
  -webkit-transform-origin: center center;
  transform-origin: center center;
  background-size: 100% 100%;
}

#intro-animation .dot:after {
  -webkit-animation-delay: 500ms;
  animation-delay: 500ms;
}

@-webkit-keyframes dot-pulse {
  0% {
    -webkit-transform: translate(-50%, -50%) scale(0.7);
    transform: translate(-50%, -50%) scale(0.7);
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes dot-pulse {
  0% {
    -webkit-transform: translate(-50%, -50%) scale(0.7);
    transform: translate(-50%, -50%) scale(0.7);
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
  }
}

#intro-animation .scrubber {
  position: absolute;
  width: 100%;
  position: absolute;
  height: 100%;
  top: 0;
  background-color: rgba(255, 255, 255, 0.1);
  z-index: 1;
  border-right: 1px solid rgba(255, 255, 255, 0.3);
  mix-blend-mode: overlay;
}

#intro-animation .bars-bg {
  position: absolute;
  width: 100%;
  z-index: 0;
  top: 175px;
  width: 8092px;
  height: 460px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

#intro-animation .bars-bg .bars {
  position: absolute;
  width: 2023px;
  height: 460px;
  background-image: url(/img/intro-animation-bars-bg.png);
}

@media (min--moz-device-pixel-ratio: 1.3),
(-webkit-min-device-pixel-ratio: 1.3),
(min-device-pixel-ratio: 1.3),
(min-resolution: 1.3dppx) {
  #intro-animation .bars-bg .bars {
    background-image: url('/img/intro-animation-bars-bg@2x.png');
    background-size: 2023px 460px;
  }
}

#intro-animation .wave-1 {
  position: absolute;
  width: 100%;
  top: 195px;
  height: 290px;
  z-index: 2;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

#intro-animation .wave-1 .wave-container {
  position: absolute;
  width: 2033px;
  height: 290px;
}

#intro-animation .wave-1 .wave-container .wave {
  width: 2033px;
  height: 290px;
}

#intro-animation .wave-1 .dot.one span {
  background-image: url(/img/intro-animation-heart.svg);
}

#intro-animation .wave-1 .dot.two span {
  background-image: url(/img/intro-animation-thumb.svg);
}

#intro-animation .wave-1 .dot.three span {
  background-image: url(/img/intro-animation-heart.svg);
}

#intro-animation .wave-1 .dot.four span {
  background-image: url(/img/intro-animation-thumb.svg);
}

#intro-animation .wave-1 .dot:before,
#intro-animation .wave-1 .dot:after {
  background-image: url(/img/intro-animation-orange-dot.png);
}

@media (min--moz-device-pixel-ratio: 1.3),
(-webkit-min-device-pixel-ratio: 1.3),
(min-device-pixel-ratio: 1.3),
(min-resolution: 1.3dppx) {

  #intro-animation .wave-1 .dot:before,
  #intro-animation .wave-1 .dot:after {
    background-image: url('/img/intro-animation-orange-dot@2x.png');
    background-size: 95px 95px;
  }
}

#intro-animation .wave-2 {
  position: absolute;
  width: 100%;
  top: 245px;
  height: 162px;
  z-index: 2;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

#intro-animation .wave-2 .wave-container {
  position: absolute;
  width: 2212px;
  height: 162px;
}

#intro-animation .wave-2 .wave-container .wave {
  width: 2212px;
  height: 162px;
}

#intro-animation .wave-2 .dot.one span {
  background-image: url(/img/intro-animation-music-1.svg);
}

#intro-animation .wave-2 .dot.two span {
  background-image: url(/img/intro-animation-music-2.svg);
}

#intro-animation .wave-2 .dot.three span {
  background-image: url(/img/intro-animation-music-3.svg);
}

#intro-animation .wave-2 .dot.four span {
  background-image: url(/img/intro-animation-music-2.svg);
}

#intro-animation .wave-2 .dot:before,
#intro-animation .wave-2 .dot:after {
  background-image: url(/img/intro-animation-purple-dot.png);
}

@media (min--moz-device-pixel-ratio: 1.3),
(-webkit-min-device-pixel-ratio: 1.3),
(min-device-pixel-ratio: 1.3),
(min-resolution: 1.3dppx) {

  #intro-animation .wave-2 .dot:before,
  #intro-animation .wave-2 .dot:after {
    background-image: url('/img/intro-animation-purple-dot@2x.png');
    background-size: 95px 95px;
  }
}

#intro-animation .wave-3,
#intro-animation .wave-4 {
  position: absolute;
  width: 100%;
  top: 330px;
  z-index: 1;
  height: 66px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  opacity: 0.2;
}

#intro-animation .wave-3 .wave-container,
#intro-animation .wave-4 .wave-container {
  position: absolute;
  width: 2410px;
  height: 66px;
  overflow: hidden;
}

#intro-animation .wave-3 .wave-container .wave,
#intro-animation .wave-4 .wave-container .wave {
  width: 2410px;
  height: 66px;
  opacity: 0.8;
}

@media screen and (min-width: 1020px) {
  #intro-animation {
    width: 100%;
  }
}

@media screen and (max-width: 1019px) {
  #intro-animation {
    width: 1700px;
    position: absolute;
    -webkit-transform-origin: top center;
    transform-origin: top center;
    left: 50%;
    top: 0;
    -webkit-transform: translateX(-50%) scale(0.6);
    transform: translateX(-50%) scale(0.6);
  }

  #intro-animation .wave-1 {
    top: 185px;
  }

  #intro-animation .wave-2 {
    top: 175px;
  }

  #intro-animation .wave-3,
  #intro-animation .wave-4 {
    top: 250px;
  }
}

body.modal-active {
  height: 100%;
  overflow: hidden;
}

@media screen and (max-width: 1020px) {
  body.team.modal-active {
    height: auto;
    overflow: visible;
  }
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: rgba(18, 6, 61, 0.8);
  overflow: auto;
  visibility: hidden;
  opacity: 0;
  transition: all 300ms ease;
}

.modal.active {
  visibility: visible;
  opacity: 1;
}

.modal .close-modal {
  position: absolute;
  width: 40px;
  height: 40px;
}

.modal .close-modal svg {
  fill: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.modal .close-modal span {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.modal .modal-container {
  margin: 0 auto;
  position: relative;
}

.modal .modal-container .modal-frame {
  position: relative;
  background-repeat: repeat;
  transition: all 500ms ease;
}

.modal .modal-container .modal-frame .modal-content iframe {
  display: block;
  width: 100%;
}

@media screen and (min-width: 1020px) {
  .modal .close-modal {
    top: -57px;
    right: -33px;
  }

  .modal .close-modal svg {
    width: 17px;
    height: 17px;
  }

  .modal .modal-container {
    margin-top: -30px;
    transition: margin 300ms ease;
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    padding: 40px;
    width: 100%;
  }

  .modal .modal-container .modal-frame .modal-content {
    background-color: #fff;
  }

  .modal.active .modal-container {
    margin-top: 0;
  }

  .modal#video-modal .modal-container {
    max-width: 850px;
  }

  .modal#video-modal .modal-container .modal-frame {
    height: unset;
  }

  .modal#video-modal .modal-container .modal-frame .modal-content iframe {
    position: absolute;
    height: 100%;
  }

  .modal#person-modal .modal-container {
    max-width: 1030px;
  }

  .modal#person-modal .modal-container .modal-frame .modal-content {
    background-image: url(/img/person-modal-bg.png);
    background-position: center right;
    background-repeat: no-repeat;
    display: flex;
    height: 460px;
    border-radius: 20px;
    overflow: hidden;
  }
}

@media screen and (min-width: 1020px) and (min--moz-device-pixel-ratio: 1.3),
screen and (min-width: 1020px) and (-webkit-min-device-pixel-ratio: 1.3),
screen and (min-width: 1020px) and (min-device-pixel-ratio: 1.3),
screen and (min-width: 1020px) and (min-resolution: 1.3dppx) {
  .modal#person-modal .modal-container .modal-frame .modal-content {
    background-image: url('/img/person-modal-bg@2x.png');
    background-size: 252px 460px;
  }
}

@media screen and (min-width: 1020px) {
  .modal#person-modal .modal-container .modal-frame .modal-content .headshot {
    width: 369px;
    height: 100%;
    position: relative;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
  }

  .modal#person-modal .modal-container .modal-frame .modal-content .headshot img {
    max-width: 410px;
    height: 100%;
  }

  .modal#person-modal .modal-container .modal-frame .modal-content .headshot img {
    position: relative;
    z-index: 1;
  }

  .modal#person-modal .modal-container .modal-frame .modal-content .headshot a {
    position: absolute;
    bottom: 20px;
    left: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #fff;
    z-index: 2;
  }

  .no-touchevents .modal#person-modal .modal-container .modal-frame .modal-content .headshot a:hover {
    background-color: #12063d;
  }

  .no-touchevents .modal#person-modal .modal-container .modal-frame .modal-content .headshot a:hover path {
    fill: #fff;
  }

  .modal#person-modal .modal-container .modal-frame .modal-content .headshot a span {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }

  .modal#person-modal .modal-container .modal-frame .modal-content .headshot a svg {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    fill: #12063d;
  }

  .modal#person-modal .modal-container .modal-frame .modal-content .headshot a svg.linkedin {
    width: 15px;
    height: 13px;
  }

  .modal#person-modal .modal-container .modal-frame .modal-content .description {
    padding: 65px 153px 0 67px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }

  .modal#person-modal .modal-container .modal-frame .modal-content .description h4 {
    color: #6d00e8;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 24px;
    letter-spacing: 8px;
    margin-bottom: 15px;
  }

  .modal#person-modal .modal-container .modal-frame .modal-content .description h5 {
    color: #12063d;
    font-size: 17px;
    font-weight: 400;
    margin: 0;
  }

  .modal#person-modal .modal-container .modal-frame .modal-content .description .squiggle {
    margin-top: 27px;
    margin-bottom: 27px;
  }

  .modal#person-modal .modal-container .modal-frame .modal-content .description .squiggle svg {
    fill: #6d00e8;
  }

  .modal#person-modal .modal-container .modal-frame .modal-content .description p {
    color: #12063d;
    font-size: 17px;
    line-height: 31px;
  }
}

@media screen and (max-width: 1019px) {
  .modal .close-modal {
    position: fixed;
    top: 22px;
    right: 22px;
    z-index: 9;
  }

  .modal .close-modal svg {
    width: 20px;
    height: 20px;
  }

  .modal .modal-container {
    position: relative;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    transition: margin 300ms ease;
  }

  .modal.active .modal-container {
    margin-top: 40px;
  }

  .modal .modal-container .modal-frame {
    margin: 0 20px;
  }
}

#value header img {
  width: 155px;
  height: 145px;
  margin: 0 auto;
}

#value header h2 {
  font-weight: 300;
  color: #12063d;
  text-align: center;
}

#value .description.orange h3,
#value .description.orange h4 {
  color: #f98569;
}

#value .description.orange .squiggle {
  fill: #f98569;
}

#value .description.violet h3,
#value .description.violet h4 {
  color: #6d00e8;
}

#value .description.violet .squiggle {
  fill: #6d00e8;
}

#value .description.teal h3,
#value .description.teal h4 {
  color: #05bcd4;
}

#value .description.teal .squiggle {
  fill: #05bcd4;
}

#value .description .header .title h3 {
  font-weight: 800;
  text-transform: uppercase;
}

#value .description .header .title h4 {
  font-weight: 400;
  margin: 0;
}

#value .description p {
  color: #12063d;
}

#value .description p:last-child {
  margin: 0;
}

@media screen and (min-width: 1020px) {
  #value {
    position: relative;
    padding-top: 375px;
    background-image: url(/img/value-bg.jpg);
    background-repeat: no-repeat;
    background-position: center bottom;
  }

  #value header {
    margin-bottom: 180px;
  }

  #value header h2 {
    font-size: 47px;
    line-height: 67px;
    max-width: 580px;
    margin: 30px auto 0 auto;
  }

  #value .row {
    align-items: center;
    padding-top: 27px;
    padding-bottom: 140px;
  }

  #value .row:nth-child(odd) .column:nth-child(1) {
    order: 2;
  }
}

@media screen and (min-width: 1020px) and (max-width: 1200px) {
  #value .row:nth-child(odd) .column:nth-child(1) .animation {
    margin-left: auto;
  }
}

@media screen and (min-width: 1020px) {
  #value .row:nth-child(odd) .column:nth-child(2) {
    order: 1;
  }

  #value .description {
    padding: 0 0 0 0;
  }

  #value .description .header {
    display: flex;
    align-items: center;
    margin-bottom: 45px;
    margin-left: -7px;
  }

  #value .description .header .icon {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
  }

  #value .description .header .title {
    padding: 0 0 0 30px;
  }

  #value .description .header .title h3 {
    font-size: 24px;
    letter-spacing: 8px;
    margin-bottom: 13px;
  }

  #value .description .header .title h4 {
    font-size: 17px;
  }

  #value .description .squiggle {
    margin-bottom: 46px;
  }

  #value .description p {
    max-width: 405px;
    font-size: 17px;
    line-height: 31px;
  }

  #value .animation {
    display: flex;
    width: 527px;
    height: 527px;
  }
}

@media screen and (min-width: 1020px) and (max-width: 1200px) {
  #value .animation {
    width: 421px;
    height: 421px;
  }
}

@media screen and (max-width: 1019px) {
  #value {
    max-width: 800px;
    margin: 60px auto 0 auto;
  }

  #value header {
    margin-bottom: 43px;
  }

  #value header img {
    margin-bottom: 39px;
  }

  #value header h2 {
    font-size: 30px;
    line-height: 40px;
  }

  #value .description {
    margin-bottom: 60px;
  }
}

@media screen and (max-width: 1019px) and (min-width: 600px) {
  #value .description {
    text-align: center;
  }
}

@media screen and (max-width: 1019px) {
  #value .description .header {
    margin-bottom: 32px;
  }

  #value .description .header .icon {
    display: none;
  }

  #value .description .header .title {
    margin-top: 33px;
  }

  #value .description .header .title h3 {
    font-size: 23px;
    letter-spacing: 7.8px;
    margin-bottom: 13px;
  }

  #value .description .header .title p {
    font-size: 16px;
  }

  #value .description .squiggle {
    margin-bottom: 30px;
  }
}

@media screen and (max-width: 1019px) and (min-width: 600px) {
  #value .description .squiggle {
    margin: 0 auto 30px auto;
  }
}

@media screen and (max-width: 1019px) {
  #value .description p {
    font-size: 16px;
    line-height: 29px;
  }

  #value .animation {
    position: relative;
    height: 321px;
    width: 100%;
  }
}

#value-distribution-animation {
  position: absolute;
  width: 527px;
  height: 527px;
  border-radius: 20px;
  overflow: hidden;
}

#value-distribution-animation .clock {
  position: absolute;
}

#value-distribution-animation .lock {
  position: absolute;
}

#value-distribution-animation .bg {
  position: absolute;
}

#value-distribution-animation .clock {
  position: absolute;
  z-index: 2;
}

#value-distribution-animation .clock .lock {
  position: absolute;
  z-index: 2;
  right: -5px;
  top: -5px;
}

#value-distribution-animation .clock.one {
  top: 101px;
}

#value-distribution-animation .clock.two {
  top: 200px;
}

#value-distribution-animation .clock.three {
  top: 254px;
}

#value-distribution-animation .clock.four {
  top: 254px;
}

#value-distribution-animation .clock.five {
  top: 308px;
}

#value-distribution-animation .clock.six {
  top: 428px;
}

#value-distribution-animation .network-lines {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 67px;
}

#value-distribution-animation .network-lines.one {
  top: 116px;
}

#value-distribution-animation .network-lines.one .line.one {
  -webkit-animation-duration: 9s;
  animation-duration: 9s;
}

#value-distribution-animation .network-lines.one .line.two {
  -webkit-animation-duration: 6s;
  animation-duration: 6s;
}

#value-distribution-animation .network-lines.one .line.three {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
}

#value-distribution-animation .network-lines.one .line.four {
  -webkit-animation-duration: 5s;
  animation-duration: 5s;
}

#value-distribution-animation .network-lines.one .line.five {
  -webkit-animation-duration: 8s;
  animation-duration: 8s;
}

#value-distribution-animation .network-lines.two {
  top: 219px;
}

#value-distribution-animation .network-lines.two .line.one {
  -webkit-animation-duration: 9s;
  animation-duration: 9s;
}

#value-distribution-animation .network-lines.two .line.two {
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
}

#value-distribution-animation .network-lines.two .line.three {
  -webkit-animation-duration: 7s;
  animation-duration: 7s;
}

#value-distribution-animation .network-lines.two .line.four {
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
}

#value-distribution-animation .network-lines.two .line.five {
  -webkit-animation-duration: 5s;
  animation-duration: 5s;
}

#value-distribution-animation .network-lines.three {
  top: 322px;
}

#value-distribution-animation .network-lines.three .line.one {
  -webkit-animation-duration: 6s;
  animation-duration: 6s;
}

#value-distribution-animation .network-lines.three .line.two {
  -webkit-animation-duration: 8s;
  animation-duration: 8s;
}

#value-distribution-animation .network-lines.three .line.three {
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
}

#value-distribution-animation .network-lines.three .line.four {
  -webkit-animation-duration: 10s;
  animation-duration: 10s;
}

#value-distribution-animation .network-lines.three .line.five {
  -webkit-animation-duration: 8s;
  animation-duration: 8s;
}

#value-distribution-animation .network-lines.four {
  top: 423px;
}

#value-distribution-animation .network-lines.four .line.one {
  -webkit-animation-duration: 12s;
  animation-duration: 12s;
}

#value-distribution-animation .network-lines.four .line.two {
  -webkit-animation-duration: 6s;
  animation-duration: 6s;
}

#value-distribution-animation .network-lines.four .line.three {
  -webkit-animation-duration: 12s;
  animation-duration: 12s;
}

#value-distribution-animation .network-lines.four .line.four {
  -webkit-animation-duration: 7s;
  animation-duration: 7s;
}

#value-distribution-animation .network-lines.four .line.five {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
}

#value-distribution-animation .network-lines .line {
  position: absolute;
  background-color: rgba(248, 136, 89, 0.4);
  height: 8px;
  border-radius: 5px;
  -webkit-animation-name: network-line-movement;
  animation-name: network-line-movement;
  -webkit-animation-duration: 5s;
  animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

#value-distribution-animation .network-lines .line.small {
  width: 36px;
}

#value-distribution-animation .network-lines .line.medium {
  width: 66px;
}

#value-distribution-animation .network-lines .line.large {
  width: 166px;
}

#value-distribution-animation .network-lines .line.one {
  top: -3px;
}

#value-distribution-animation .network-lines .line.two {
  top: 12px;
}

#value-distribution-animation .network-lines .line.three {
  top: 29px;
}

#value-distribution-animation .network-lines .line.four {
  top: 45px;
}

#value-distribution-animation .network-lines .line.five {
  top: 61px;
}

@-webkit-keyframes network-line-movement {
  0% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    left: 0;
  }

  100% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
    left: 100%;
  }
}

@keyframes network-line-movement {
  0% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    left: 0;
  }

  100% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
    left: 100%;
  }
}

@media screen and (min-width: 1020px) and (max-width: 1200px) {
  #value-distribution-animation {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }
}

@media screen and (max-width: 1019px) {
  #value-distribution-animation {
    left: 50%;
    -webkit-transform-origin: top center;
    transform-origin: top center;
    -webkit-transform: translateX(-50%) scale(0.62);
    transform: translateX(-50%) scale(0.62);
  }
}

#value-attribution-animation {
  position: absolute;
  width: 527px;
  height: 527px;
  border-radius: 20px;
  overflow: hidden;
}

#value-attribution-animation .equalizer {
  position: absolute;
  z-index: 4;
  width: 62px;
  height: 18px;
  top: 176px;
  left: 171px;
  overflow: hidden;
}

#value-attribution-animation .equalizer img {
  width: 60px;
  height: 18px;
}

#value-attribution-animation .device {
  position: absolute;
  z-index: 3;
  left: 152px;
  width: 224px;
  height: 90px;
  overflow: hidden;
  top: 151px;
}

#value-attribution-animation .device img {
  position: absolute;
  bottom: 0;
  width: 224px;
  height: 239px;
}

#value-attribution-animation .arms {
  position: absolute;
  z-index: 3;
  top: 140px;
}

#value-attribution-animation .coin {
  position: absolute;
  z-index: 2;
  width: 41px;
  height: 38px;
}

#value-attribution-animation .coin .note {
  position: absolute;
}

#value-attribution-animation .coin .gold {
  position: absolute;
  display: none;
}

#value-attribution-animation .coin.active .note {
  display: none;
}

#value-attribution-animation .coin.active .gold {
  display: block;
}

#value-attribution-animation .coin.one {
  left: 180px;
}

#value-attribution-animation .coin.two {
  left: 240px;
}

#value-attribution-animation .coin.three {
  left: 300px;
}

#value-attribution-animation .bg {
  position: absolute;
  z-index: 1;
  top: 0;
}

#value-attribution-animation .wave-1 {
  position: absolute;
  width: 100%;
  top: 275px;
  height: 75px;
  z-index: 2;
}

#value-attribution-animation .wave-1 .wave {
  width: 527px;
  height: 75px;
}

#value-attribution-animation .wave-2 {
  position: absolute;
  width: 100%;
  top: 275px;
  height: 39px;
  z-index: 2;
}

#value-attribution-animation .wave-2 .wave {
  width: 527px;
  height: 39px;
}

#value-attribution-animation .wave {
  position: absolute;
  fill: none;
}

#value-attribution-animation .wave path {
  stroke: #ff0;
  stroke-width: 4;
  stroke-miterlimit: 10;
}

#value-attribution-animation .needle {
  position: absolute;
  background-color: #ff0;
  width: 2px;
  height: 10px;
  -webkit-transform-origin: bottom center;
  transform-origin: bottom center;
  z-index: 4;
  -webkit-animation-name: device-needle;
  animation-name: device-needle;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

#value-attribution-animation .needle.one {
  top: 187px;
  left: 278px;
  width: 2px;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

#value-attribution-animation .needle.two {
  top: 187px;
  left: 327px;
  background-color: #ff0;
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
}

@-webkit-keyframes device-needle {
  0% {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }

  50% {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }

  100% {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
}

@keyframes device-needle {
  0% {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }

  50% {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }

  100% {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
}

#value-attribution-animation .data {
  position: absolute;
  width: 52px;
  height: 24px;
  z-index: 4;
  top: 202px;
  left: 170px;
  overflow: hidden;
}

#value-attribution-animation .data .lines {
  position: absolute;
  -webkit-animation-name: device-data;
  animation-name: device-data;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

#value-attribution-animation .data .lines.two {
  top: 29px;
}

@-webkit-keyframes device-data {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    -webkit-transform: translateY(-28px);
    transform: translateY(-28px);
  }
}

@keyframes device-data {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    -webkit-transform: translateY(-28px);
    transform: translateY(-28px);
  }
}

@media screen and (min-width: 1020px) and (max-width: 1200px) {
  #value-attribution-animation {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }
}

@media screen and (max-width: 1019px) {
  #value-attribution-animation {
    left: 50%;
    -webkit-transform-origin: top center;
    transform-origin: top center;
    -webkit-transform: translateX(-50%) scale(0.62);
    transform: translateX(-50%) scale(0.62);
  }
}

#value-monetization-animation {
  position: absolute;
  width: 527px;
  height: 527px;
  border-radius: 20px;
  overflow: hidden;
}

#value-monetization-animation .create {
  position: absolute;
  z-index: 2;
  fill: #0277bd;
  top: 203px;
  left: 307px;
}

#value-monetization-animation .create.active {
  fill: #fff;
}

#value-monetization-animation .preexisting {
  position: absolute;
  z-index: 2;
  fill: #0277bd;
  top: 203px;
  left: 206px;
}

#value-monetization-animation .preexisting.active {
  fill: #fff;
}

#value-monetization-animation .document {
  position: absolute;
  z-index: 2;
}

#value-monetization-animation .bg {
  position: absolute;
  z-index: 1;
}

#value-monetization-animation .mask-one {
  position: absolute;
  z-index: 3;
  left: 314px;
}

#value-monetization-animation .mask-one.one {
  top: 114px;
}

#value-monetization-animation .mask-one.two {
  top: 447px;
}

#value-monetization-animation .mask-two {
  position: absolute;
  z-index: 3;
  top: 291px;
  left: 120px;
}

@media screen and (min-width: 1020px) and (max-width: 1200px) {
  #value-monetization-animation {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }
}

@media screen and (max-width: 1019px) {
  #value-monetization-animation {
    left: 50%;
    -webkit-transform-origin: top center;
    transform-origin: top center;
    -webkit-transform: translateX(-50%) scale(0.62);
    transform: translateX(-50%) scale(0.62);
  }
}

#features {
  position: relative;
  z-index: 2;
}

#features header {
  position: relative;
}

#features header h2 {
  font-weight: 300;
  margin: 0;
}

#features header h2:before,
#features header h2:after {
  content: '';
  background-image: url(/img/reuseable-divider-wave.svg);
  background-size: 1875px 50px;
  position: absolute;
  width: 1875px;
  height: 50px;
  background-repeat: no-repeat;
}

#features .feature-list {
  width: 100%;
  box-shadow: 0px 14px 108.73px 22.27px rgba(0, 0, 0, 0.03);
}

#features .feature-list .header {
  background-image: linear-gradient(#6500ea, #d422f9);
  position: relative;
  overflow: visible;
}

#features .feature-list .header:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-position: bottom left;
  background-repeat: repeat-x;
  background-image: url(/img/feature-header-bars.png);
}

@media (min--moz-device-pixel-ratio: 1.3),
(-webkit-min-device-pixel-ratio: 1.3),
(min-device-pixel-ratio: 1.3),
(min-resolution: 1.3dppx) {
  #features .feature-list .header:before {
    background-image: url('/img/feature-header-bars@2x.png');
    background-size: 528px 87px;
  }
}

#features .feature-list .header h3 {
  color: #fff;
  text-transform: uppercase;
  font-weight: 800;
  margin: 0;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

#features .feature-list .header img {
  position: absolute;
  bottom: 0;
  right: 10px;
}

@media screen and (min-width: 1020px) {
  #features {
    margin-top: 306px;
  }

  #features header {
    margin-bottom: 133px;
  }

  #features header h2 {
    font-size: 47px;
  }

  #features header h2:before {
    top: -13px;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    margin-left: -28px;
  }

  #features header h2:after {
    top: -13px;
    margin-left: 28px;
  }

  #features .feature-list {
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    padding-bottom: 10px;
    background-color: #fff;
  }

  #features .feature-list .header {
    height: 125px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
  }

  #features .feature-list .header h3 {
    font-size: 24px;
    letter-spacing: 8.5px;
    left: 30px;
  }

  #features .feature-list .header img {
    width: 203px;
    height: 226px;
  }

  #features .feature-list .feature {
    margin: 0 30px;
  }
}

@media screen and (max-width: 1019px) {
  #features header {
    margin-bottom: 37px;
    position: relative;
  }

  #features header h2 {
    font-size: 30px;
    padding-top: 90px;
    text-align: center;
  }

  #features header h2:before {
    top: 0;
    left: -100px;
  }

  #features header h2:after {
    display: none;
  }

  #features .row .column {
    margin-top: 37px;
    margin-bottom: 84px;
  }

  #features .feature-list {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    padding-bottom: 15px;
    background-color: #fff;
  }

  #features .feature-list .header {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    height: 76px;
  }

  #features .feature-list .header:before {
    background-size: 322px 52px;
  }

  #features .feature-list .header h3 {
    font-size: 23px;
    letter-spacing: 8px;
    left: 21px;
  }

  #features .feature-list .header img {
    width: 125px;
    height: 139px;
  }

  #features .feature-list .header+.feature {
    padding-top: 20px;
  }

  #features .feature-list .feature {
    margin: 0 19px;
  }

  #features .feature-list .feature:last-child {
    border-bottom: none;
  }
}

#newsletter {
  background-repeat: repeat-x;
  background-position: top center;
  background-image: url(/img/newsletter-wave-bg.png);
  position: relative;
}

@media (min--moz-device-pixel-ratio: 1.3),
(-webkit-min-device-pixel-ratio: 1.3),
(min-device-pixel-ratio: 1.3),
(min-resolution: 1.3dppx) {
  #newsletter {
    background-image: url('/img/newsletter-wave-bg@2x.png');
    background-size: 4000px 1352px;
  }
}

#newsletter .content {
  z-index: 2;
}

#newsletter h3 {
  text-align: center;
  font-weight: 700;
  color: #fff;
}

#newsletter p {
  text-align: center;
  font-weight: 400;
  color: #fff;
}

#newsletter form {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  max-width: 463px;
  height: 69px;
  margin: 0 auto;
  padding: 0 10px 0 25px;
  border-radius: 35px;
}

#newsletter form input[type='email'] {
  font-size: 15px;
  width: 100%;
}

#newsletter form input[type='email']::-webkit-input-placeholder {
  color: #a116b7;
}

#newsletter form input[type='email']::-moz-placeholder {
  color: #a116b7;
}

#newsletter form input[type='email']:-ms-input-placeholder {
  color: #a116b7;
}

#newsletter form input[type='email']:-moz-placeholder {
  color: #a116b7;
}

#newsletter form input[type='email']:-webkit-autofill,
#newsletter form input[type='email']:-webkit-autofill:hover,
#newsletter form input[type='email']:-webkit-autofill:focus {
  -webkit-text-fill-color: #12063d;
  -webkit-box-shadow: 0 0 0px 1000px #fff inset;
  transition: background-color 5000s ease-in-out 0s;
}

#newsletter .shapes {
  width: 1718px;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 1;
}

@media screen and (min-width: 1020px) {
  #newsletter {
    height: 972px;
  }

  #newsletter .content {
    position: absolute;
    max-width: 850px;
    width: 100%;
    margin: 0 auto;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    top: 57%;
    left: 50%;
  }

  #newsletter h3 {
    font-size: 83px;
    letter-spacing: 1px;
    margin-bottom: 25px;
    line-height: 100px;
  }

  #newsletter p {
    font-size: 23px;
  }

  #newsletter form {
    margin-top: 47px;
  }

  #newsletter .shapes.parallaxed {
    bottom: -200px;
  }

  .home #newsletter {
    height: 1352px;
    margin-top: -460px;
  }

  .home #newsletter .content {
    top: 69%;
  }

  .token #newsletter {
    margin-top: -150px;
  }

  .about #newsletter {
    margin-top: -150px;
  }
}

@media screen and (max-width: 1019px) {
  #newsletter {
    padding-bottom: 126px;
  }

  #newsletter .content {
    position: relative;
    padding-top: 238px;
    max-width: 600px;
    margin: 0 auto;
  }

  #newsletter .header {
    padding: 0 40px;
  }

  #newsletter h3 {
    font-size: 44px;
    line-height: 48px;
    margin-bottom: 22px;
  }

  #newsletter p {
    font-size: 20px;
    line-height: 32px;
  }

  #newsletter form {
    margin-top: 30px;
  }

  #newsletter .shapes {
    -webkit-transform: translateX(-35%) scale(0.8) !important;
    transform: translateX(-35%) scale(0.8) !important;
    top: 0;
  }

  .home #newsletter {
    margin-top: -605px;
  }

  .home #newsletter .content {
    padding-top: 653px;
  }

  .token #newsletter {
    margin-top: -190px;
  }

  .about #newsletter {
    margin-top: -190px;
  }
}

#footer a {
  color: #12063D;
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

#footer svg {
  width: 24px;
  height: 24px;
  margin-right: 12px;
}

#footer .navigation nav {
  margin: 0 55px;
}

.no-touchevents #footer a:hover {
  color: #a116b7;
}

.no-touchevents #footer a:hover path {
  fill: #a116b7;
}

#footer a.active {
  color: #a116b7;
}

#footer .boilerplate h3 {
  font-size: 29px;
  color: #12063d;
  margin: 0;
}

#footer .navigation .social ul {
  display: flex;
  flex-direction: column;
}

#footer .navigation .social ul li a {
  position: relative;
  display: flex;
  align-items: space-between;
}

#footer .sign-off {
  font-size: 15px;
  color: #12063d;
}

#footer .sign-off p {
  margin-bottom: 10px;
}

#footer .sign-off p .divider {
  height: 10px;
  width: 1px;
  display: inline-block;
  vertical-align: middle;
  background-color: #12063d;
  margin: 0 10px 0 10px;
}

@media screen and (min-width: 1020px) {
  #footer {
    position: relative;
    padding-top: 174px;
    padding-bottom: 174px;
    background-color: #fff;
    z-index: 5;
  }

  #footer .boilerplate {
    display: flex;
    width: 260px;
  }

  #footer .boilerplate .logo {
    margin-right: 27px;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
    width: 240px;
  }

  #footer .navigation {
    display: flex;
    justify-content: space-between;
  }

  #footer .navigation h4 {
    color: #12063d80;
    font-size: 14px;
    font-weight: 700 !important;
    line-height: 20px;
  }

  #footer .navigation .sitemap {
    width: 171px;
    margin-right: 44px;
  }

  #footer .navigation .sitemap li {
    margin-bottom: 22px;
  }

  #footer .navigation .social {
    width: 193px;
    margin-right: 20px;
  }

  #footer .sign-off {
    margin-top: -39px;
  }
}

@media screen and (max-width: 1019px) {
  #footer {
    padding-top: 62px;
    padding-bottom: 50px;
    background-color: #fafafe;
  }

  #footer .boilerplate {
    margin-bottom: 45px;
  }

  #footer .boilerplate .logo {
    width: 54px;
    height: 56px;
    margin: 0 auto 27px auto;
  }

  #footer .boilerplate h3 {
    text-align: center;
  }

  #footer .navigation h4 {
    display: none;
  }

  #footer .navigation .sitemap {
    display: none;
  }

  #footer .navigation .social ul {
    max-width: 500px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
  }

  #footer .navigation .social ul li {
    margin: 11px;
  }

  #footer .sign-off {
    text-align: center;
    margin-top: 44px;
  }
}

#subpage-intro h1 {
  position: relative;
  margin: 0 auto;
  overflow: hidden;
}

#subpage-intro h1 img {
  position: relative;
  z-index: 5;
}

#subpage-intro h1 .animation {
  position: absolute;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  top: 1px;
  left: 1px;
  background-color: #12063d;
  overflow: hidden;
}

#subpage-intro .squiggle {
  fill: #12063d;
  margin: 0 auto;
}

#subpage-intro p {
  text-align: center;
  color: #12063d;
}

#subpage-intro p a {
  position: relative;
  color: #12063d;
  display: inline-block;
}

#subpage-intro p a:after {
  content: '';
  position: absolute;
  height: 1px;
  width: 100%;
  background-color: #12063d;
  transition: background-color 300ms ease;
  bottom: 0;
  left: 0;
}

#subpage-intro p a:hover {
  color: #a116b7;
}

#subpage-intro p a:hover:after {
  background-color: #a116b7;
}

@media screen and (min-width: 1020px) {
  #subpage-intro {
    margin-top: 200px;
  }

  #subpage-intro h1 {
    margin-bottom: 16px;
  }

  #subpage-intro h1 .sphere {
    position: absolute;
    z-index: 3;
    -webkit-animation-duration: 30s;
    animation-duration: 30s;
    -webkit-animation-name: header-sphere-clockwise;
    animation-name: header-sphere-clockwise;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
  }

  #subpage-intro h1 .sphere.orange {
    -webkit-transform-origin: top right;
    transform-origin: top right;
    top: 0;
    left: 0;
  }

  #subpage-intro h1 .sphere.orange-opaque {
    -webkit-transform-origin: center right;
    transform-origin: center right;
    top: 0;
    left: 0;
    -webkit-animation-duration: 50s;
    animation-duration: 50s;
    z-index: 4;
  }

  #subpage-intro h1 .sphere.teal {
    -webkit-transform-origin: bottom right;
    transform-origin: bottom right;
    top: 0;
    left: 0;
    -webkit-animation-duration: 40s;
    animation-duration: 40s;
  }

  #subpage-intro h1 .sphere.purple-glow {
    -webkit-transform-origin: center right;
    transform-origin: center right;
    top: 0;
    right: 0;
    -webkit-animation-name: header-sphere-counter;
    animation-name: header-sphere-counter;
  }

  @-webkit-keyframes header-sphere-clockwise {
    0% {
      -webkit-transform: rotate(0);
      transform: rotate(0);
    }

    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }

  @keyframes header-sphere-clockwise {
    0% {
      -webkit-transform: rotate(0);
      transform: rotate(0);
    }

    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }

  @-webkit-keyframes header-sphere-counter {
    0% {
      -webkit-transform: rotate(0);
      transform: rotate(0);
    }

    100% {
      -webkit-transform: rotate(-360deg);
      transform: rotate(-360deg);
    }
  }

  @keyframes header-sphere-counter {
    0% {
      -webkit-transform: rotate(0);
      transform: rotate(0);
    }

    100% {
      -webkit-transform: rotate(-360deg);
      transform: rotate(-360deg);
    }
  }

  #subpage-intro .squiggle {
    margin-bottom: 39px;
  }

  #subpage-intro p {
    max-width: 768px;
    margin: 0 auto;
    font-size: 23px;
    line-height: 42px;
  }

  .token #subpage-intro h1 {
    left: 11px;
    width: 888px;
    height: 280px;
  }

  .token #subpage-intro h1 img {
    width: 888px;
    height: 280px;
  }

  .about #subpage-intro h1 {
    margin-bottom: 50px;
    width: 921px;
    height: 248px;
    top: 8px;
    left: 20px;
  }

  .about #subpage-intro h1 img {
    width: 921px;
    height: 248px;
  }

  .team #subpage-intro {
    margin-top: 220px;
  }

  .team #subpage-intro h1 {
    margin-bottom: 35px;
    width: 793px;
    height: 240px;
    top: 8px;
    left: 20px;
  }

  .team #subpage-intro h1 img {
    width: 793px;
    height: 240px;
  }
}

@media screen and (max-width: 1019px) {
  #subpage-intro .container {
    max-width: 800px;
  }

  #subpage-intro h1 .sphere {
    position: absolute;
    z-index: 3;
    -webkit-animation-duration: 30s;
    animation-duration: 30s;
    -webkit-animation-name: header-sphere-clockwise-downsized;
    animation-name: header-sphere-clockwise-downsized;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
  }

  #subpage-intro h1 .sphere.orange {
    -webkit-transform-origin: top right;
    transform-origin: top right;
    top: 80px;
    left: -130px;
    -webkit-animation-duration: 90s;
    animation-duration: 90s;
  }

  #subpage-intro h1 .sphere.orange-opaque {
    -webkit-transform-origin: center right;
    transform-origin: center right;
    top: 0;
    left: 0;
    -webkit-animation-duration: 30s;
    animation-duration: 30s;
    z-index: 4;
  }

  #subpage-intro h1 .sphere.teal {
    -webkit-transform-origin: top right;
    transform-origin: top right;
    top: 90px;
    left: -210px;
    -webkit-animation-duration: 40s;
    animation-duration: 40s;
  }

  #subpage-intro h1 .sphere.purple-glow {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    top: -30px;
    left: 90px;
    -webkit-animation-name: header-sphere-counter-downsized;
    animation-name: header-sphere-counter-downsized;
  }

  @-webkit-keyframes header-sphere-clockwise-downsized {
    0% {
      -webkit-transform: rotate(0) scale(0.3);
      transform: rotate(0) scale(0.3);
    }

    100% {
      -webkit-transform: rotate(360deg) scale(0.3);
      transform: rotate(360deg) scale(0.3);
    }
  }

  @keyframes header-sphere-clockwise-downsized {
    0% {
      -webkit-transform: rotate(0) scale(0.3);
      transform: rotate(0) scale(0.3);
    }

    100% {
      -webkit-transform: rotate(360deg) scale(0.3);
      transform: rotate(360deg) scale(0.3);
    }
  }

  @-webkit-keyframes header-sphere-counter-downsized {
    0% {
      -webkit-transform: rotate(0) scale(0.3);
      transform: rotate(0) scale(0.3);
    }

    100% {
      -webkit-transform: rotate(-360deg) scale(0.3);
      transform: rotate(-360deg) scale(0.3);
    }
  }

  @keyframes header-sphere-counter-downsized {
    0% {
      -webkit-transform: rotate(0) scale(0.3);
      transform: rotate(0) scale(0.3);
    }

    100% {
      -webkit-transform: rotate(-360deg) scale(0.3);
      transform: rotate(-360deg) scale(0.3);
    }
  }

  #subpage-intro .squiggle {
    width: 38px;
    height: 5px;
  }

  #subpage-intro p {
    font-size: 20px;
    line-height: 31px;
    color: #12063d;
  }

  .api #subpage-intro h1 {
    margin-top: 22px;
  }

  .token #subpage-intro {
    margin-bottom: 57px;
  }

  .token #subpage-intro h1 {
    margin-top: 22px;
    width: 336px;
    height: 105px;
    left: 1px;
  }

  .token #subpage-intro h1 img {
    width: 336px;
    height: 105px;
  }

  .token #subpage-intro .squiggle {
    margin-top: 12px;
    margin-bottom: 22px;
  }

  .protocol #subpage-intro {
    margin-bottom: 57px;
  }

  .protocol #subpage-intro h1 {
    margin-top: 22px;
    width: 336px;
    height: 105px;
    left: 1px;
  }

  .protocol #subpage-intro h1 img {
    width: 336px;
    height: 105px;
  }

  .protocol #subpage-intro .squiggle {
    margin-top: 12px;
    margin-bottom: 22px;
  }

  .about #subpage-intro {
    margin-bottom: 49px;
  }

  .about #subpage-intro h1 {
    margin-top: 27px;
    width: 329px;
    height: 86px;
    left: 6px;
  }

  .about #subpage-intro h1 img {
    width: 329px;
    height: 86px;
  }

  .about #subpage-intro .squiggle {
    margin-top: 25px;
    margin-bottom: 19px;
  }

  .team #subpage-intro {
    margin-bottom: 60px;
  }

  .team #subpage-intro h1 {
    margin-top: 31px;
    width: 287px;
    height: 87px;
    left: 9px;
  }

  .team #subpage-intro h1 img {
    width: 287px;
    height: 87px;
  }

  .team #subpage-intro .squiggle {
    margin-top: 20px;
    margin-bottom: 19px;
  }

  .careers #subpage-intro {
    margin-bottom: 60px;
  }

  .careers #subpage-intro h1 {
    margin-top: 31px;
    width: 287px;
    height: 87px;
    left: 9px;
  }

  .careers #subpage-intro h1 img {
    width: 287px;
    height: 87px;
  }

  .careers #subpage-intro .squiggle {
    margin-top: 20px;
    margin-bottom: 19px;
  }
}

.token-features .animations {
  position: relative;
}

.token-features .animations .animation {
  position: relative;
}

@media screen and (min-width: 1020px) {
  .token-features {
    margin-top: 171px;
    margin-bottom: 112px;
  }

  .token-features .container {
    position: relative;
  }

  .token-features .animations {
    height: 611px;
    margin-bottom: 64px;
  }

  .token-features .animations .animation.one {
    position: absolute;
    z-index: 1;
  }

  .token-features .animations .animation.two {
    position: absolute;
    z-index: 2;
    top: 92px;
  }
}

@media screen and (min-width: 1020px) and (max-width: 1200px) {
  .token-features .animations .animation.two {
    top: 47px;
  }
}

@media screen and (min-width: 1020px) {
  .token-features .animations .page-scroll {
    position: absolute;
    bottom: 0;
  }
}

@media screen and (min-width: 1020px) and (max-width: 1200px) {
  .token-features .animations .page-scroll {
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
}

@media screen and (min-width: 1020px) {
  .token-features#loud .animations .animation.one {
    right: 0;
  }
}

@media screen and (min-width: 1020px) and (min-width: 1201px) {
  .token-features#loud .animations .page-scroll {
    right: 325px;
  }
}

@media screen and (min-width: 1020px) {
  .token-features#audius .animations .animation.one {
    left: 0;
  }

  .token-features#audius .animations .animation.two {
    right: 0;
  }
}

@media screen and (min-width: 1020px) and (min-width: 1201px) {
  .token-features#audius .animations .page-scroll {
    left: 320px;
  }
}

@media screen and (max-width: 1019px) {
  .token-features {
    margin-bottom: 55px;
  }

  .token-features .container {
    padding: 0;
  }

  .token-features .row {
    padding: 0 25px;
  }

  .token-features .animations .animation.two {
    height: 326px;
  }
}

#token-loud-animation-1 {
  position: relative;
  background-color: #12063d;
  background-image: url(/img/token-loud-animation-1-bg.png);
  overflow: hidden;
}

#token-loud-animation-1 p {
  text-align: center;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  max-width: 306px;
  z-index: 2;
  line-height: 31px;
  color: #f98569;
}

#token-loud-animation-1 .seal {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 2;
}

#token-loud-animation-1 .wave-1 {
  position: absolute;
  width: 100%;
  height: 75px;
  z-index: 2;
}

#token-loud-animation-1 .wave-1 .wave {
  width: 527px;
  height: 75px;
}

#token-loud-animation-1 .wave-2 {
  position: absolute;
  width: 100%;
  height: 39px;
  z-index: 2;
}

#token-loud-animation-1 .wave-2 .wave {
  width: 527px;
  height: 39px;
}

#token-loud-animation-1 .wave {
  position: absolute;
  fill: none;
}

#token-loud-animation-1 .wave path {
  stroke: #f98569;
  stroke-width: 2;
  stroke-miterlimit: 10;
}

@media screen and (min-width: 1020px) {
  #token-loud-animation-1 {
    width: 759px;
    height: 465px;
    background-position: -40px -250px;
  }

  #token-loud-animation-1 .seal {
    top: 40px;
    margin-left: 30px;
  }

  #token-loud-animation-1 p {
    font-size: 17px;
    margin-left: 30px;
    bottom: 22px;
  }

  #token-loud-animation-1 .wave-1 {
    top: 160px;
  }

  #token-loud-animation-1 .wave-2 {
    top: 160px;
  }
}

@media screen and (max-width: 1019px) {
  #token-loud-animation-1 {
    width: 759px;
    height: 524px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background-position: center -230px;
  }

  #token-loud-animation-1 .seal {
    top: 72px;
  }

  #token-loud-animation-1 p {
    font-size: 16px;
    bottom: 51px;
  }

  #token-loud-animation-1 .wave-1 {
    top: 190px;
  }

  #token-loud-animation-1 .wave-2 {
    top: 190px;
  }
}

#token-loud-animation-2 {
  position: relative;
  width: 526px;
  height: 526px;
  background-color: #f98569;
  border-radius: 20px;
  overflow: hidden;
}

#token-loud-animation-2 .radio {
  position: absolute;
  overflow: hidden;
  z-index: 3;
  width: 284px;
  height: 154px;
  left: 120px;
  top: 153px;
}

#token-loud-animation-2 .radio img {
  position: absolute;
  bottom: 0;
  width: 299px;
  height: 220px;
  max-width: inherit;
}

#token-loud-animation-2 .hands {
  position: absolute;
  z-index: 3;
  bottom: 0;
}

#token-loud-animation-2 .dial {
  position: absolute;
  height: 36px;
  width: 2px;
  background-color: #ff0;
  z-index: 4;
  left: 133px;
  top: 181px;
  -webkit-animation-name: dial-move;
  animation-name: dial-move;
  -webkit-animation-duration: 9s;
  animation-duration: 9s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

@-webkit-keyframes dial-move {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  50% {
    -webkit-transform: translateX(245px);
    transform: translateX(245px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes dial-move {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  50% {
    -webkit-transform: translateX(245px);
    transform: translateX(245px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

#token-loud-animation-2 .antenna {
  position: absolute;
  z-index: 4;
  width: 100px;
  height: 100px;
  left: 320px;
  top: 42px;
}

#token-loud-animation-2 .antenna span {
  position: absolute;
  border-radius: 50%;
  border: 2px solid #fdd835;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-animation-name: antenna-move;
  animation-name: antenna-move;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

#token-loud-animation-2 .antenna span:nth-child(2) {
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
}

#token-loud-animation-2 .bg {
  position: absolute;
}

#token-loud-animation-2 .waves {
  position: absolute;
  z-index: 4;
  width: 246px;
  height: 36px;
  left: 135px;
  top: 181px;
  overflow: hidden;
}

#token-loud-animation-2 .waves .wave-1 {
  position: absolute;
  top: 8px;
  height: 22px;
}

#token-loud-animation-2 .waves .wave-1 .wave {
  width: 154px;
  height: 22px;
}

#token-loud-animation-2 .waves .wave-2 {
  position: absolute;
  top: 8px;
  height: 15px;
}

#token-loud-animation-2 .waves .wave-2 .wave {
  width: 203px;
  height: 15px;
}

#token-loud-animation-2 .waves .wave {
  position: absolute;
  fill: none;
}

#token-loud-animation-2 .waves .wave path {
  stroke: #ff0;
  stroke-width: 5;
  stroke-miterlimit: 10;
}

#token-loud-animation-2 .symbol {
  position: absolute;
  z-index: 2;
  top: 100%;
  -webkit-animation-name: object-float;
  animation-name: object-float;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

#token-loud-animation-2 .symbol.one {
  left: 50px;
}

#token-loud-animation-2 .symbol.two {
  left: 100px;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

#token-loud-animation-2 .symbol.three {
  left: 150px;
}

#token-loud-animation-2 .symbol.four {
  left: 200px;
}

#token-loud-animation-2 .symbol.five {
  left: 250px;
  -webkit-animation-delay: 500ms;
  animation-delay: 500ms;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

#token-loud-animation-2 .symbol.five img {
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
}

#token-loud-animation-2 .symbol.six {
  left: 300px;
  -webkit-animation-delay: 100ms;
  animation-delay: 100ms;
}

#token-loud-animation-2 .symbol.seven {
  left: 350px;
  -webkit-animation-duration: 1.75s;
  animation-duration: 1.75s;
}

#token-loud-animation-2 .symbol.eight {
  left: 400px;
  -webkit-animation-delay: 200ms;
  animation-delay: 200ms;
}

#token-loud-animation-2 .symbol.nine {
  left: 450px;
}

#token-loud-animation-2 .symbol.nine img {
  -webkit-transform: scale(0.6);
  transform: scale(0.6);
}

#token-loud-animation-2 .symbol.ten {
  left: 500px;
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
}

#token-loud-animation-2 .coin {
  position: absolute;
  z-index: 2;
  margin-top: -20px;
}

#token-loud-animation-2 .coin.one {
  margin-left: -50px;
}

#token-loud-animation-2 .coin.three {
  margin-left: 210px;
}

#token-loud-animation-2 .coin.four {
  margin-left: 240px;
}

#token-loud-animation-2 .coin-path {
  position: absolute;
  display: block;
  fill: none;
}

@media screen and (min-width: 1020px) and (max-width: 1200px) {
  #token-loud-animation-2 {
    -webkit-transform-origin: left top;
    transform-origin: left top;
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
  }
}

@media screen and (max-width: 1019px) {
  #token-loud-animation-2 {
    top: -45px;
    left: 50%;
    -webkit-transform-origin: top center;
    transform-origin: top center;
    -webkit-transform: translateX(-50%) scale(0.62);
    transform: translateX(-50%) scale(0.62);
  }
}

#token-audius-animation-1 {
  position: relative;
  background-color: #12063d;
  background-image: url(/img/token-audius-animation-1-bg.png);
  background-position: center;
  overflow: hidden;
}

#token-audius-animation-1 p {
  text-align: center;
  position: absolute;
  left: 50%;
  bottom: 22px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 306px;
  z-index: 3;
  line-height: 31px;
  color: #05bcd4;
}

#token-audius-animation-1 .seal {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 2;
}

#token-audius-animation-1 .wave-1 {
  position: absolute;
  width: 100%;
  height: 75px;
  z-index: 2;
}

#token-audius-animation-1 .wave-1 .wave {
  width: 527px;
  height: 75px;
}

#token-audius-animation-1 .wave-2 {
  position: absolute;
  width: 100%;
  height: 39px;
  z-index: 2;
}

#token-audius-animation-1 .wave-2 .wave {
  width: 527px;
  height: 39px;
}

#token-audius-animation-1 .wave {
  position: absolute;
  fill: none;
}

#token-audius-animation-1 .wave path {
  stroke: #05bcd4;
  stroke-width: 2;
  stroke-miterlimit: 10;
}

@media screen and (min-width: 1020px) {
  #token-audius-animation-1 {
    position: relative;
    background-position: -70px -250px;
    width: 759px;
    height: 465px;
  }

  #token-audius-animation-1 .seal {
    top: 40px;
    margin-left: -30px;
  }

  #token-audius-animation-1 p {
    font-size: 17px;
    margin-left: -30px;
    bottom: 22px;
  }

  #token-audius-animation-1 .wave-1 {
    top: 160px;
  }

  #token-audius-animation-1 .wave-2 {
    top: 160px;
  }
}

@media screen and (max-width: 1019px) {
  #token-audius-animation-1 {
    position: relative;
    width: 759px;
    height: 524px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background-position: center -230px;
  }

  #token-audius-animation-1 .seal {
    top: 72px;
  }

  #token-audius-animation-1 p {
    font-size: 16px;
    bottom: 51px;
  }

  #token-audius-animation-1 .wave-1 {
    top: 190px;
  }

  #token-audius-animation-1 .wave-2 {
    top: 190px;
  }
}

#token-audius-animation-2 {
  position: relative;
  width: 526px;
  height: 526px;
  background-color: #05bcd4;
  border-radius: 20px;
  overflow: hidden;
}

#token-audius-animation-2 .radio {
  position: absolute;
  overflow: hidden;
  z-index: 3;
  width: 273px;
  height: 154px;
  left: 120px;
  top: 153px;
}

#token-audius-animation-2 .radio img {
  position: absolute;
  bottom: 0;
  width: 299px;
  height: 220px;
  max-width: inherit;
}

#token-audius-animation-2 .hands {
  position: absolute;
  z-index: 3;
  bottom: 0;
}

#token-audius-animation-2 .dial {
  position: absolute;
  height: 36px;
  width: 2px;
  background-color: #a7ffeb;
  z-index: 4;
  left: 133px;
  top: 181px;
  -webkit-animation-name: dial-move;
  animation-name: dial-move;
  -webkit-animation-duration: 9s;
  animation-duration: 9s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

@keyframes dial-move {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  50% {
    -webkit-transform: translateX(245px);
    transform: translateX(245px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

#token-audius-animation-2 .antenna {
  position: absolute;
  z-index: 4;
  width: 100px;
  height: 100px;
  left: 320px;
  top: 42px;
}

#token-audius-animation-2 .antenna span {
  position: absolute;
  border-radius: 50%;
  border: 2px solid #a7ffeb;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-animation-name: antenna-move;
  animation-name: antenna-move;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

#token-audius-animation-2 .antenna span:nth-child(2) {
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
}

#token-audius-animation-2 .bg {
  position: absolute;
}

#token-audius-animation-2 .waves {
  position: absolute;
  z-index: 4;
  width: 246px;
  height: 36px;
  left: 135px;
  top: 181px;
  overflow: hidden;
}

#token-audius-animation-2 .waves .wave-1 {
  position: absolute;
  top: 8px;
  height: 22px;
}

#token-audius-animation-2 .waves .wave-1 .wave {
  width: 154px;
  height: 22px;
}

#token-audius-animation-2 .waves .wave-2 {
  position: absolute;
  top: 8px;
  height: 15px;
}

#token-audius-animation-2 .waves .wave-2 .wave {
  width: 203px;
  height: 15px;
}

#token-audius-animation-2 .waves .wave {
  position: absolute;
  fill: none;
}

#token-audius-animation-2 .waves .wave path {
  stroke: #a7ffeb;
  stroke-width: 5;
  stroke-miterlimit: 10;
}

#token-audius-animation-2 .symbol {
  position: absolute;
  z-index: 2;
  top: 100%;
  -webkit-animation-name: object-float;
  animation-name: object-float;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

#token-audius-animation-2 .symbol.one {
  left: 50px;
}

#token-audius-animation-2 .symbol.two {
  left: 100px;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

#token-audius-animation-2 .symbol.three {
  left: 150px;
}

#token-audius-animation-2 .symbol.four {
  left: 200px;
}

#token-audius-animation-2 .symbol.five {
  left: 250px;
  -webkit-animation-delay: 500ms;
  animation-delay: 500ms;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

#token-audius-animation-2 .symbol.five img {
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
}

#token-audius-animation-2 .symbol.six {
  left: 300px;
  -webkit-animation-delay: 100ms;
  animation-delay: 100ms;
}

#token-audius-animation-2 .symbol.seven {
  left: 350px;
  -webkit-animation-duration: 1.75s;
  animation-duration: 1.75s;
}

#token-audius-animation-2 .symbol.eight {
  left: 400px;
  -webkit-animation-delay: 200ms;
  animation-delay: 200ms;
}

#token-audius-animation-2 .symbol.nine {
  left: 450px;
}

#token-audius-animation-2 .symbol.nine img {
  -webkit-transform: scale(0.6);
  transform: scale(0.6);
}

#token-audius-animation-2 .symbol.ten {
  left: 500px;
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
}

#token-audius-animation-2 .coin {
  position: absolute;
  z-index: 2;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

#token-audius-animation-2 .coin.one {
  -webkit-animation-name: coin-move;
  animation-name: coin-move;
  top: -38px;
  left: 210px;
}

#token-audius-animation-2 .coin.two {
  -webkit-animation-name: coin-move;
  animation-name: coin-move;
  -webkit-animation-duration: 1.75s;
  animation-duration: 1.75s;
  top: -38px;
  left: 240px;
}

#token-audius-animation-2 .coin.three {
  -webkit-animation-name: coin-move;
  animation-name: coin-move;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-delay: 2.5s;
  animation-delay: 2.5s;
  top: -38px;
  left: 280px;
}

#token-audius-animation-2 .coin.four {
  -webkit-animation-name: coin-move;
  animation-name: coin-move;
  -webkit-animation-duration: 1.9s;
  animation-duration: 1.9s;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
  top: -38px;
  left: 210px;
}

@-webkit-keyframes coin-move {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    -webkit-transform: translateY(700px);
    transform: translateY(700px);
  }
}

@keyframes coin-move {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    -webkit-transform: translateY(700px);
    transform: translateY(700px);
  }
}

@media screen and (min-width: 1020px) and (max-width: 1200px) {
  #token-audius-animation-2 {
    -webkit-transform-origin: right top;
    transform-origin: right top;
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
  }
}

@media screen and (max-width: 1019px) {
  #token-audius-animation-2 {
    top: -45px;
    left: 50%;
    -webkit-transform-origin: top center;
    transform-origin: top center;
    -webkit-transform: translateX(-50%) scale(0.62);
    transform: translateX(-50%) scale(0.62);
  }
}

.simple-callout {
  position: relative;
  min-height: 394px;
  background-image: url(/img/simple-callout-bg.png);
  background-position: top center;
  background-repeat: no-repeat;
  text-align: center;
}

@media (min--moz-device-pixel-ratio: 1.3),
(-webkit-min-device-pixel-ratio: 1.3),
(min-device-pixel-ratio: 1.3),
(min-resolution: 1.3dppx) {
  .simple-callout {
    background-image: url('/img/simple-callout-bg@2x.png');
    background-size: 478px 394px;
  }
}

.simple-callout .content {
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
}

.simple-callout .copy h3 {
  font-weight: 300;
  color: #12063d;
}

.simple-callout .copy p {
  margin: 0 auto;
  max-width: 460px;
  color: #12063d;
}

.simple-callout a {
  display: inline-block;
}

@media screen and (min-width: 1020px) {
  .simple-callout {
    margin: 0 0 203px 0;
  }

  .simple-callout .content {
    padding: 20px 40px 0 40px;
    max-width: 950px;
  }

  .simple-callout .copy {
    margin-bottom: 20px;
  }

  .simple-callout .copy h3 {
    font-size: 46px;
    margin: 0 auto 5px auto;
    letter-spacing: 0.4px;
    line-height: 70px;
  }

  .simple-callout .copy p {
    font-size: 23px;
    margin-bottom: 20px;
    line-height: 37px;
  }
}

@media screen and (max-width: 1019px) {
  .simple-callout {
    margin-bottom: 111px;
  }

  .simple-callout .content {
    padding: 30px 20px 0 20px;
    max-width: 500px;
  }

  .simple-callout .copy h3 {
    margin: 0 auto 30px auto;
    font-size: 30px;
    line-height: 40px;
  }

  .simple-callout .copy p {
    margin-top: -30px;
    font-size: 20px;
    line-height: 32px;
    margin-bottom: 40px;
  }
}

#non-fungible {
  background-color: rgba(221, 223, 247, 0.2);
}

#non-fungible .header {
  text-align: center;
}

#non-fungible .header h3 {
  text-transform: uppercase;
  color: #6d00e8;
  font-weight: 800;
}

#non-fungible ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#non-fungible ul li {
  text-align: center;
  color: #12063d;
}

#non-fungible ul li span {
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  color: #ff35d7;
  display: block;
  width: 191px;
  height: 167px;
  margin: 0 auto 22px auto;
  padding-top: 134px;
  letter-spacing: 1.5px;
}

#non-fungible ul li.erc721 span {
  background-image: url(/img/non-fungible-erc721.png);
}

@media (min--moz-device-pixel-ratio: 1.3),
(-webkit-min-device-pixel-ratio: 1.3),
(min-device-pixel-ratio: 1.3),
(min-resolution: 1.3dppx) {
  #non-fungible ul li.erc721 span {
    background-image: url('/img/non-fungible-erc721@2x.png');
    background-size: 191px 167px;
  }
}

#non-fungible ul li.artist span {
  background-image: url(/img/non-fungible-creator.png);
}

@media (min--moz-device-pixel-ratio: 1.3),
(-webkit-min-device-pixel-ratio: 1.3),
(min-device-pixel-ratio: 1.3),
(min-resolution: 1.3dppx) {
  #non-fungible ul li.artist span {
    background-image: url('/img/non-fungible-creator@2x.png');
    background-size: 191px 167px;
  }
}

#non-fungible ul li.compilation span {
  background-image: url(/img/non-fungible-compilation.png);
}

@media (min--moz-device-pixel-ratio: 1.3),
(-webkit-min-device-pixel-ratio: 1.3),
(min-device-pixel-ratio: 1.3),
(min-resolution: 1.3dppx) {
  #non-fungible ul li.compilation span {
    background-image: url('/img/non-fungible-compilation@2x.png');
    background-size: 191px 167px;
  }
}

#non-fungible ul li.tour span {
  background-image: url(/img/non-fungible-tour.png);
}

@media (min--moz-device-pixel-ratio: 1.3),
(-webkit-min-device-pixel-ratio: 1.3),
(min-device-pixel-ratio: 1.3),
(min-resolution: 1.3dppx) {
  #non-fungible ul li.tour span {
    background-image: url('/img/non-fungible-tour@2x.png');
    background-size: 191px 167px;
  }
}

@media screen and (min-width: 1020px) {
  #non-fungible {
    margin-top: 140px;
    padding-top: 135px;
    padding-bottom: 280px;
  }

  #non-fungible .header {
    margin-bottom: 122px;
  }

  #non-fungible .header h3 {
    font-size: 24px;
    letter-spacing: 8.2px;
    margin-bottom: 31px;
  }

  #non-fungible .header p {
    font-size: 23px;
  }

  #non-fungible ul {
    max-width: 1194px;
    margin: 0 auto;
  }

  #non-fungible ul li {
    width: 25%;
    font-size: 17px;
    position: relative;
  }

  #non-fungible ul li:not(:last-child):after {
    content: '+';
    position: absolute;
    color: #6d00e8;
    font-size: 30px;
    right: -8px;
    top: 48px;
  }
}

@media screen and (max-width: 1019px) {
  #non-fungible {
    margin-top: 70px;
    padding-top: 95px;
    padding-bottom: 190px;
  }

  #non-fungible .header {
    margin-bottom: 50px;
  }

  #non-fungible .header h3 {
    font-size: 23px;
    letter-spacing: 8px;
    line-height: 30px;
    margin-bottom: 15px;
  }

  #non-fungible .header p {
    font-size: 20px;
    line-height: 31px;
  }
}

@media screen and (max-width: 1019px) and (min-width: 600px) {
  #non-fungible ul {
    display: flex;
    flex-wrap: wrap;
  }
}

@media screen and (max-width: 1019px) {
  #non-fungible ul>li {
    position: relative;
    font-size: 16px;
    margin-bottom: 47px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media screen and (max-width: 1019px) and (min-width: 600px) {
  #non-fungible ul>li {
    width: 50%;
  }

  #non-fungible ul>li:nth-child(odd):after {
    content: '+';
    position: absolute;
    color: #6d00e8;
    font-size: 30px;
    right: -8px;
    top: 48px;
  }
}

@media screen and (max-width: 1019px) and (max-width: 599px) {
  #non-fungible ul>li li {
    width: 360px;
  }
}

#roadmap .header {
  text-align: center;
}

#roadmap .header h2 {
  font-weight: 300;
  color: #12063d;
}

#roadmap .milestone {
  position: relative;
  color: #fff;
}

#roadmap .milestone.teal {
  background-image: linear-gradient(#06bcd4, #3fe5d8);
}

#roadmap .milestone.orange {
  background-image: linear-gradient(#f87d70, #fbae4c);
}

#roadmap .milestone.purple {
  background-image: linear-gradient(#6500ea, #cc00f8);
}

#roadmap .milestone .description {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align: center;
  width: 100%;
  padding: 0 20px;
}

#roadmap .milestone .description h3 {
  text-transform: uppercase;
  font-weight: 800;
}

#roadmap .milestone .description p {
  margin-bottom: 0;
}

@media screen and (min-width: 1020px) {
  #roadmap {
    margin-top: 123px;
    margin-bottom: 149px;
  }

  #roadmap .header {
    margin-bottom: 70px;
  }

  #roadmap .header h2 {
    font-size: 47px;
  }

  #roadmap .container {
    max-width: 100%;
    padding: 0;
    overflow: hidden;
  }

  #roadmap .row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 50px;
    position: relative;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    min-width: 1500px;
    background-size: 492px 82px;
    background-image: url(/img/roadmap-date-row-bg.svg);
    background-repeat: repeat-x;
    background-position: center center;
  }

  #roadmap .row>* {
    margin: 0 0.5%;
    border-radius: 20px;
  }

  #roadmap .milestone {
    height: 133px;
    width: 23%;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
  }

  #roadmap .milestone .description h3 {
    letter-spacing: 8px;
    font-size: 24px;
    margin-bottom: 12px;
  }

  #roadmap .milestone .description p {
    font-size: 17px;
    line-height: 23px;
  }

  #roadmap .blank {
    display: block;
    height: 133px;
    background-color: rgba(221, 223, 247, 0.2);
  }

  #roadmap .blank.small {
    width: 76px;
  }

  #roadmap .blank.medium {
    width: 123px;
  }

  #roadmap .blank.large {
    width: 351px;
  }

  #roadmap .blank.teal {
    background-image: linear-gradient(#06bcd4, #3fe5d8);
  }

  #roadmap .blank.orange {
    background-image: linear-gradient(#f87d70, #fbae4c);
  }

  #roadmap .blank.purple {
    background-image: linear-gradient(#6500ea, #cc00f8);
  }
}

@media screen and (max-width: 1019px) {
  #roadmap {
    margin-bottom: 54px;
  }

  #roadmap header h2 {
    font-size: 30px;
    line-height: 40px;
    margin-bottom: 37px;
  }

  #roadmap .milestone {
    border-radius: 10px;
    height: 162px;
    max-width: 800px;
    margin: 0 auto 19px auto;
  }

  #roadmap .milestone:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    height: 82px;
    width: 1020px;
    background-size: 492px 82px;
    background-image: url(/img/roadmap-date-row-bg.svg);
    background-repeat: repeat-x;
    background-position: center center;
    z-index: -1;
  }

  #roadmap .milestone .description h3 {
    font-size: 23px;
    letter-spacing: 8px;
    margin-bottom: 15px;
  }

  #roadmap .milestone .description p {
    font-size: 16px;
    line-height: 30px;
  }
}

#architecture {
  background-image: linear-gradient(#fff, #f8f9fd);
  background-image: url(/img/architecture-bg.jpg);
  background-position: top center;
  background-repeat: repeat-x;
}

#architecture .header {
  text-align: center;
}

#architecture .header h2 {
  font-weight: 300;
  color: #12063d;
}

#architecture .header p {
  color: #12063d;
}

#architecture .animations {
  position: relative;
}

#architecture .content {
  position: relative;
}

#architecture .animation {
  position: relative;
  z-index: 3;
}

#architecture .description {
  position: relative;
  z-index: 3;
}

#architecture .description div {
  text-align: center;
  background-color: #fff;
  border-radius: 15px;
  width: 100%;
  padding: 12px;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

#architecture .description p {
  margin: 0;
  font-size: 15px;
  line-height: 23px;
  color: #12063d;
}

#architecture .line {
  background-color: #dbdfe8;
  height: 1px;
  position: absolute;
  z-index: 2;
}

#architecture .tooltip {
  position: absolute;
}

@media screen and (min-width: 1020px) {
  #architecture {
    margin-top: 146px;
    padding-bottom: 290px;
  }

  #architecture .container {
    max-width: 1495px;
  }

  #architecture .header {
    margin: 0 auto 125px auto;
    max-width: 700px;
  }

  #architecture .header h2 {
    font-size: 47px;
    margin-bottom: 38px;
  }

  #architecture .header p {
    font-size: 23px;
    line-height: 40px;
  }

  #architecture .row .column {
    width: 33.3%;
  }

  #architecture .row .column .content {
    margin: 0 auto;
    width: 275px;
  }

  #architecture .row .row {
    width: 66.6%;
  }

  #architecture .row .row .column {
    width: 50%;
  }

  #architecture .row.one {
    margin-bottom: 144px;
  }

  #architecture .row.two {
    width: 66.6%;
    margin-left: auto;
  }

  #architecture .row.two .column {
    width: 50%;
  }

  #architecture .animation {
    height: 203px;
  }

  #architecture .description {
    height: 97px;
  }

  @-webkit-keyframes line-arrow {
    0% {
      left: 0;
    }

    100% {
      left: 100%;
    }
  }

  @keyframes line-arrow {
    0% {
      left: 0;
    }

    100% {
      left: 100%;
    }
  }

  #architecture .line.one {
    top: 251px;
    width: 25%;
    right: 50%;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  #architecture .line.one:before {
    content: '';
    background-image: url(/img/roadmap-arrow.svg);
    width: 11px;
    height: 6px;
    position: absolute;
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    margin-top: -3px;
    -webkit-animation-name: line-arrow;
    animation-name: line-arrow;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    animation-direction: reverse;
  }

  #architecture .line.two {
    top: 251px;
    width: 15%;
    left: 50%;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    margin-left: 140px;
  }

  #architecture .line.two:before {
    content: '';
    background-image: url(/img/roadmap-arrow.svg);
    width: 11px;
    height: 6px;
    position: absolute;
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    margin-top: -3px;
    -webkit-animation-name: line-arrow;
    animation-name: line-arrow;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
  }

  #architecture .line.three {
    top: 360px;
    width: 160px;
    left: 50%;
    -webkit-transform: translateX(-50%) rotate(-90deg);
    transform: translateX(-50%) rotate(-90deg);
  }

  #architecture .line.three:before {
    content: '';
    background-image: url(/img/roadmap-arrow.svg);
    width: 11px;
    height: 6px;
    position: absolute;
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    margin-top: -3px;
    -webkit-animation-name: line-arrow;
    animation-name: line-arrow;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    animation-direction: reverse;
  }

  #architecture .line.four {
    top: 290px;
    width: 22%;
    left: 50%;
    margin-left: 127px;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-transform: rotate(36deg);
    transform: rotate(36deg);
  }

  #architecture .line.four:before {
    content: '';
    background-image: url(/img/roadmap-arrow.svg);
    width: 11px;
    height: 6px;
    position: absolute;
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    margin-top: -3px;
    -webkit-animation-name: line-arrow;
    animation-name: line-arrow;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    animation-direction: reverse;
  }
}

@media screen and (min-width: 1020px) and (max-width: 1200px) {
  #architecture .line.four {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
}

@media screen and (min-width: 1020px) {
  #architecture .line.five {
    top: 360px;
    width: 160px;
    left: 50%;
    margin-left: 33.3%;
    -webkit-transform: translateX(-50%) rotate(-90deg);
    transform: translateX(-50%) rotate(-90deg);
  }

  #architecture .line.five:before {
    content: '';
    background-image: url(/img/roadmap-arrow.svg);
    width: 11px;
    height: 6px;
    position: absolute;
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    margin-top: -3px;
    -webkit-animation-name: line-arrow;
    animation-name: line-arrow;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
  }

  #architecture .line.six {
    top: 695px;
    width: 30%;
    left: 50%;
  }

  #architecture .line.six:before {
    content: '';
    background-image: url(/img/roadmap-arrow.svg);
    width: 11px;
    height: 6px;
    position: absolute;
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    margin-top: -3px;
    -webkit-animation-name: line-arrow;
    animation-name: line-arrow;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
  }

  #architecture .tooltip.one {
    top: 235px;
    margin-left: -16px;
    left: 66.6%;
  }

  #architecture .tooltip.two {
    top: 357px;
    margin-left: -16px;
    left: 50%;
  }

  #architecture .tooltip.three {
    top: 357px;
    margin-left: 223px;
    left: 50%;
  }
}

@media screen and (min-width: 1020px) and (max-width: 1200px) {
  #architecture .tooltip.three {
    margin-left: 193px;
  }
}

@media screen and (min-width: 1020px) {
  #architecture .tooltip.four {
    top: 357px;
    margin-left: 33.3%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }

  #architecture .tooltip.five {
    top: 607px;
    margin-left: -16px;
    left: 50%;
  }

  #architecture .tooltip.six {
    top: 682px;
    margin-left: -16px;
    left: 66.6%;
  }

  #architecture .waves.waves-connection {
    position: absolute;
    z-index: 1;
    width: 33.3%;
    height: 36px;
    left: 50%;
    top: 531px;
    overflow: hidden;
  }

  #architecture .waves.waves-connection .wave-1 {
    position: absolute;
    top: 8px;
    height: 22px;
  }

  #architecture .waves.waves-connection .wave-1 .wave {
    width: 154px;
    height: 22px;
  }

  #architecture .waves.waves-connection .wave-2 {
    position: absolute;
    top: 8px;
    height: 15px;
  }

  #architecture .waves.waves-connection .wave-2 .wave {
    width: 203px;
    height: 15px;
  }

  #architecture .waves.waves-connection .wave {
    position: absolute;
    fill: none;
  }

  #architecture .waves.waves-connection .wave path {
    stroke: #b9bbd4;
    stroke-width: 5;
    stroke-miterlimit: 10;
  }

  #architecture .antenna {
    position: absolute;
    z-index: 4;
    width: 100px;
    height: 100px;
    left: 96.22px;
    top: -22.9px;
  }

  #architecture .antenna span {
    position: absolute;
    border-radius: 50%;
    border: 2px solid #64ffda;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-animation-name: antenna-move;
    animation-name: antenna-move;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  #architecture .antenna span:nth-child(2) {
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
  }
}

@media screen and (max-width: 1019px) {
  #architecture {
    margin-top: 49px;
    padding-bottom: 250px;
    height: 1300px;
  }

  #architecture .header {
    max-width: 800px;
    margin: 0 auto 51px auto;
  }

  #architecture .header h2 {
    font-size: 30px;
    line-height: 40px;
    margin-bottom: 18px;
  }

  #architecture .header p {
    font-size: 20px;
    line-height: 30px;
  }

  #architecture .animations {
    max-width: 800px;
    margin: 0 auto;
  }

  #architecture .animations>.waves {
    display: none;
  }

  #architecture .row.one>.column {
    margin-bottom: 43px;
  }

  #architecture .row.one>.column .animation {
    height: 181px;
  }

  #architecture .row.one .row {
    display: flex;
    justify-content: space-between;
    margin-right: -10px;
    margin-left: -10px;
  }

  #architecture .row.one .row .animation {
    height: 102px;
  }

  #architecture .row.one .row .column {
    width: 50%;
    margin: 0 10px 67px 10px;
  }

  #architecture .row.two {
    display: flex;
    justify-content: space-between;
    margin-right: -10px;
    margin-left: -10px;
  }

  #architecture .row.two .animation {
    height: 102px;
  }

  #architecture .row.two>.column {
    width: 50%;
    margin: 0 10px;
  }

  #architecture .content {
    margin: 0 auto;
  }

  #architecture .content.one {
    max-width: 500px;
  }

  #architecture .content.one .description {
    height: 79px;
  }

  #architecture .content.one .description>div {
    height: 79px;
    padding: 0;
  }

  #architecture .content.one .description>div p {
    position: absolute;
    width: 100%;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    padding: 15px;
  }

  #architecture .content.two {
    max-width: 220px;
  }

  #architecture .content.two .description {
    height: 145px;
  }

  #architecture .content.two .description>div {
    height: 145px;
  }

  #architecture .content.three {
    max-width: 220px;
  }

  #architecture .content.three .description {
    height: 145px;
  }

  #architecture .content.three .description>div {
    height: 145px;
  }

  #architecture .content.four {
    height: 79px;
  }

  #architecture .content.four .description {
    height: 79px;
  }

  #architecture .content.four .description>div {
    height: 79px;
    padding: 0;
  }

  #architecture .content.four .description>div p {
    position: absolute;
    width: 100%;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    padding: 15px;
  }

  #architecture .content.five {
    max-width: 220px;
    height: 79px;
  }

  #architecture .content.five .description {
    height: 79px;
  }

  #architecture .content.five .description>div {
    height: 79px;
    padding: 0;
  }

  #architecture .content.five .description>div p {
    position: absolute;
    width: 100%;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    padding: 15px;
  }

  #architecture .line.one {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    left: 25%;
    width: 40px;
    top: 260px;
  }

  #architecture .line.two {
    left: 50%;
    width: 40%;
    top: 337px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }

  #architecture .line.three {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    left: 25%;
    width: 60px;
    top: 550px;
  }

  #architecture .line.four {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    left: 50%;
    width: 80px;
    top: 553px;
    margin-left: -9px;
  }

  #architecture .line.five {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    left: 75%;
    width: 60px;
    top: 550px;
  }

  #architecture .line.six {
    left: 50%;
    width: 40%;
    top: 668px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }

  #architecture .tooltip {
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }

  #architecture .tooltip.one {
    left: 50%;
    top: 323px;
  }

  #architecture .tooltip.two {
    left: 25%;
    top: 565px;
  }

  #architecture .tooltip.three {
    left: 50%;
    top: 565px;
  }
}

@media screen and (max-width: 1019px) and (max-width: 1200px) {
  #architecture .tooltip.three {
    margin-left: 20px;
  }
}

@media screen and (max-width: 1019px) {
  #architecture .tooltip.four {
    left: 75%;
    top: 565px;
  }

  #architecture .tooltip.five {
    left: 50%;
    top: 652px;
  }

  #architecture .tooltip.six {
    left: 25%;
    top: 686px;
  }
}

#architecture-animation-1 {
  position: absolute;
  width: 342px;
  height: 175px;
}

#architecture-animation-1 .bg {
  position: absolute;
  bottom: 0;
}

#architecture-animation-1 .antenna {
  position: absolute;
  z-index: 4;
  width: 100px;
  height: 100px;
  left: 127px;
  top: -13px;
}

#architecture-animation-1 .antenna span {
  position: absolute;
  border-radius: 50%;
  border: 2px solid #ff35d7;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-animation-name: antenna-move;
  animation-name: antenna-move;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

#architecture-animation-1 .antenna span:nth-child(2) {
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
}

#architecture-animation-1 .equalizer {
  position: absolute;
  z-index: 4;
  width: 62px;
  height: 18px;
  overflow: hidden;
}

#architecture-animation-1 .equalizer img {
  width: 62px;
  height: 18px;
}

#architecture-animation-1 .equalizer.one {
  top: 105px;
  left: 111px;
}

#architecture-animation-1 .equalizer.two {
  top: 135px;
  left: 111px;
}

@media screen and (max-width: 1019px) {
  #architecture-animation-1 {
    left: 50%;
    margin-left: 9px;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-transform: translateX(-50%) scale(0.9);
    transform: translateX(-50%) scale(0.9);
  }
}

#architecture-animation-2 {
  position: absolute;
  width: 342px;
  height: 176px;
  overflow: hidden;
}

#architecture-animation-2 .bg {
  position: absolute;
  bottom: 0;
}

#architecture-animation-2 .symbol {
  position: absolute;
  z-index: 2;
  top: 100%;
  -webkit-animation-name: object-float-2;
  animation-name: object-float-2;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

#architecture-animation-2 .symbol.one {
  left: 0px;
}

#architecture-animation-2 .symbol.two {
  left: 50px;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

#architecture-animation-2 .symbol.three {
  left: 100px;
}

#architecture-animation-2 .symbol.four {
  left: 200px;
}

#architecture-animation-2 .symbol.five {
  left: 250px;
  -webkit-animation-delay: 500ms;
  animation-delay: 500ms;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

#architecture-animation-2 .symbol.six {
  left: 300px;
  -webkit-animation-delay: 100ms;
  animation-delay: 100ms;
}

#architecture-animation-2 .symbol.seven {
  left: 350px;
  -webkit-animation-duration: 1.75s;
  animation-duration: 1.75s;
}

#architecture-animation-2 .symbol.eight {
  left: 200px;
  -webkit-animation-delay: 200ms;
  animation-delay: 200ms;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

#architecture-animation-2 .symbol.nine {
  left: 150px;
}

#architecture-animation-2 .symbol.ten {
  left: 200px;
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
}

@-webkit-keyframes object-float-2 {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateY(-125px);
    transform: translateY(-125px);
    opacity: 0;
  }
}

@keyframes object-float-2 {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateY(-125px);
    transform: translateY(-125px);
    opacity: 0;
  }
}

@media screen and (max-width: 1019px) {
  #architecture-animation-2 {
    left: 50%;
    margin-left: 9px;
    -webkit-transform-origin: top center;
    transform-origin: top center;
    -webkit-transform: translateX(-50%) scale(0.5);
    transform: translateX(-50%) scale(0.5);
  }
}

#architecture-animation-3 {
  position: absolute;
  width: 145px;
  height: 169px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

#architecture-animation-3 .bg {
  position: absolute;
  top: 20px;
}

#architecture-animation-3 .arm {
  position: absolute;
  height: 186px;
  width: 186px;
  border-radius: 50%;
  overflow: hidden;
}

#architecture-animation-3 .arm.one {
  left: -36px;
  top: -16px;
}

#architecture-animation-3 .arm.one img {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 132px;
  height: 146px;
  max-width: inherit;
  -webkit-animation-name: arm-move;
  animation-name: arm-move;
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

#architecture-animation-3 .arm.two {
  height: 179px;
  width: 163px;
  left: -7px;
  top: -14px;
  -webkit-transform: translateY(-0.5px);
  transform: translateY(-0.5px);
}

#architecture-animation-3 .arm.two img {
  position: absolute;
  bottom: -20px;
  left: -15px;
  width: 132px;
  height: 146px;
  max-width: inherit;
  -webkit-animation-name: arm-move;
  animation-name: arm-move;
  -webkit-animation-duration: 4.5s;
  animation-duration: 4.5s;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

@-webkit-keyframes arm-move {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  50% {
    -webkit-transform: translateY(-18px);
    transform: translateY(-18px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes arm-move {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  50% {
    -webkit-transform: translateY(-18px);
    transform: translateY(-18px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@media screen and (max-width: 1019px) {
  #architecture-animation-3 {
    left: 50%;
    margin-left: -1px;
    margin-top: -14px;
    -webkit-transform-origin: top center;
    transform-origin: top center;
    -webkit-transform: translateX(-50%) scale(0.55);
    transform: translateX(-50%) scale(0.55);
  }
}

#architecture-animation-4 {
  position: absolute;
  width: 174px;
  height: 173px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

#architecture-animation-4 .bg {
  position: absolute;
  bottom: 0;
}

#architecture-animation-4 .dial {
  position: absolute;
  height: 21px;
  width: 2px;
  background-color: #b9f6ca;
  z-index: 4;
  left: 8px;
  top: 79px;
  -webkit-animation-name: dial-move-two;
  animation-name: dial-move-two;
  -webkit-animation-duration: 9s;
  animation-duration: 9s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

@-webkit-keyframes dial-move-two {
  0% {
    -webkit-transform: translate(0, 0.5px);
    transform: translate(0, 0.5px);
  }

  50% {
    -webkit-transform: translate(142px, 0.5px);
    transform: translate(142px, 0.5px);
  }

  100% {
    -webkit-transform: translate(0, 0.5px);
    transform: translate(0, 0.5px);
  }
}

@keyframes dial-move-two {
  0% {
    -webkit-transform: translate(0, 0.5px);
    transform: translate(0, 0.5px);
  }

  50% {
    -webkit-transform: translate(142px, 0.5px);
    transform: translate(142px, 0.5px);
  }

  100% {
    -webkit-transform: translate(0, 0.5px);
    transform: translate(0, 0.5px);
  }
}

#architecture-animation-4 .waves {
  position: absolute;
  z-index: 4;
  width: 142px;
  height: 21px;
  left: 8px;
  top: 79px;
  overflow: hidden;
}

#architecture-animation-4 .waves .wave-1 {
  position: absolute;
  top: 5px;
  height: 11px;
}

#architecture-animation-4 .waves .wave-1 .wave {
  width: 80px;
  height: 12px;
}

#architecture-animation-4 .waves .wave-2 {
  position: absolute;
  top: 8px;
  height: 4px;
}

#architecture-animation-4 .waves .wave-2 .wave {
  width: 127px;
  height: 10px;
}

#architecture-animation-4 .waves .wave {
  position: absolute;
  fill: none;
}

#architecture-animation-4 .waves .wave path {
  stroke: #a7ffeb;
  stroke-width: 5;
  stroke-miterlimit: 10;
}

@media screen and (max-width: 1019px) {
  #architecture-animation-4 {
    left: 50%;
    margin-left: -1px;
    -webkit-transform-origin: top center;
    transform-origin: top center;
    -webkit-transform: translateX(-50%) scale(0.52);
    transform: translateX(-50%) scale(0.52);
  }
}

#architecture-animation-5 {
  position: absolute;
  width: 145px;
  height: 169px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

#architecture-animation-5 .bg {
  position: absolute;
  top: 20px;
}

#architecture-animation-5 .arm {
  position: absolute;
  height: 186px;
  width: 186px;
  border-radius: 50%;
  overflow: hidden;
}

#architecture-animation-5 .arm.one {
  left: -36px;
  top: -16px;
}

#architecture-animation-5 .arm.one img {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 132px;
  height: 146px;
  max-width: inherit;
  -webkit-animation-name: arm-move;
  animation-name: arm-move;
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

#architecture-animation-5 .arm.two {
  height: 179px;
  width: 163px;
  left: -7px;
  top: -14px;
  -webkit-transform: translateY(-0.5px);
  transform: translateY(-0.5px);
}

#architecture-animation-5 .arm.two img {
  position: absolute;
  bottom: -20px;
  left: -15px;
  width: 132px;
  height: 146px;
  max-width: inherit;
  -webkit-animation-name: arm-move;
  animation-name: arm-move;
  -webkit-animation-duration: 4.5s;
  animation-duration: 4.5s;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

@keyframes arm-move {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  50% {
    -webkit-transform: translateY(-18px);
    transform: translateY(-18px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@media screen and (max-width: 1019px) {
  #architecture-animation-5 {
    left: 50%;
    margin-left: -1px;
    -webkit-transform-origin: top center;
    transform-origin: top center;
    -webkit-transform: translateX(-50%) scale(0.55);
    transform: translateX(-50%) scale(0.55);
  }
}

section.bios .header {
  text-align: center;
}

section.bios .header h2 {
  color: #6d00e8;
  text-transform: uppercase;
  font-weight: 800;
}

section.bios#advisors .header h2 {
  color: #05bcd4;
}

section.bios .person .headshot {
  position: relative;
}

section.bios .person .headshot a {
  position: absolute;
  right: 17px;
  top: 15px;
  z-index: 2;
  width: 40px;
  height: 40px;
  background-color: #fff;
  border-radius: 50%;
}

section.bios .person .headshot a span {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

section.bios .person .headshot a svg {
  width: 15px;
  height: 13px;
  position: absolute;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  fill: #12063d;
}

.no-touchevents section.bios .person .headshot a:hover {
  background-color: #12063d;
}

.no-touchevents section.bios .person .headshot a:hover svg {
  fill: #fff;
}

section.bios {
  margin-top: 200px;
  margin-bottom: 100px;
}

section.bios .header {
  margin-bottom: 90px;
}

section.bios .header h2 {
  font-size: 24px;
  letter-spacing: 8px;
}

section.bios .person {
  cursor: pointer;
  margin: 12px;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}

section.bios .person.nolink {
  cursor: default;
}

section.bios .person .headshot .photo {
  transition: transform 0.3s ease-in-out;
  transform: scale3d(1.01, 1.01, 1.01);
  transform-origin: bottom;
}

section.bios .person .headshot .photo.scale:hover {
  transform: scale3d(1.05, 1.05, 1.05);
}

section.bios .person .headshot .description {
  position: absolute;
  bottom: 0;
  padding: 16px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  width: 100%;
}

section.bios .person .headshot .description h4 {
  font-weight: 800;
  font-size: 16px;
  line-height: 120%;
  letter-spacing: 0.01em;
  color: #FFFFFF;
  text-shadow: 0px 0.5px 1px rgba(0, 0, 0, 0.15);
  margin: 0 0 3px 0;
}

section.bios .person .headshot .description h5 {
  font-weight: 400;
  font-size: 14px;
  line-height: 150%;
  letter-spacing: 0.01em;
  color: #FFFFFF;
  text-shadow: 0px 0.5px 1px rgba(0, 0, 0, 0.15);
  margin: 0;
}

@media screen and (min-width: 800px) and (max-width: 1200px) {
  section.bios .person .headshot .description h4 {
    font-size: 12px;
  }

  section.bios .person .headshot .description h5 {
    font-size: 10px;
  }
}

@media screen and (max-width: 800px) {
  section.bios .person {
    margin: 48px auto;
    border-radius: 32px;
    transform: translateZ(0);
    overflow: hidden;
    position: relative;
    max-width: 400px;
  }
}

#investors .header {
  text-align: center;
}

#investors .header h2 {
  color: #f98569;
  font-weight: 800;
  text-transform: uppercase;
}

#investors .logos ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

#investors .logos ul li {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

#investors .logos ul li img {
  margin: 0 auto;
}

#investors .logos ul li span {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

@media screen and (min-width: 1020px) {
  #investors {
    margin-top: 60px;
    margin-bottom: 120px;
  }

  #investors .header {
    margin-bottom: 92px;
  }

  #investors .header h2 {
    font-size: 24px;
    letter-spacing: 8px;
    font-weight: 800;
  }

  #investors .logos ul li {
    width: 25%;
    height: 113px;
    border-left: 1px solid #e7e6eb;
    margin-bottom: 139px;
  }

  #investors .logos ul li:nth-child(4n) {
    border-right: 1px solid #e7e6eb;
  }

  #investors .logos ul li img.general {
    width: 205px;
    height: 29px;
  }

  #investors .logos ul li img.kpcb {
    width: 190;
    height: 18px;
  }

  #investors .logos ul li img.lightspeed {
    width: 150px;
    height: 31px;
  }

  #investors .logos ul li img.pantera {
    width: 152px;
    height: 12px;
  }
}

@media screen and (max-width: 1019px) {
  #investors .header {
    margin-bottom: 43px;
  }

  #investors .header h2 {
    font-size: 24px;
    letter-spacing: 8px;
  }

  #investors .logos ul {
    margin: 0 -15px;
  }

  #investors .logos ul li {
    height: 91px;
    margin-bottom: 40px;
    width: 50%;
  }

  #investors .logos ul li:nth-child(2n + 1) {
    border-right: 1px solid #e7e6eb;
  }

  #investors .logos ul li img.general {
    width: 128px;
    height: 28px;
  }

  #investors .logos ul li img.kpcb {
    width: 148px;
    height: 14px;
  }

  #investors .logos ul li img.lightspeed {
    width: 115px;
    height: 24px;
  }

  #investors .logos ul li img.pantera {
    width: 125px;
    height: 9px;
  }
}

@media screen and (min-width: 1200px) {
  .parallax-sphere {
    position: absolute;
    z-index: 9;
    left: 50%;
  }

  .home .parallax-sphere.orange {
    top: 1680px;
    margin-left: 700px;
  }

  .careers .parallax-sphere.orange,
  .security .parallax-sphere.orange {
    top: 1680px;
    margin-left: 700px;
  }

  .team .parallax-sphere.orange {
    top: 1680px;
    margin-left: 800px;
  }

  .parallax-sphere.orange-opaque {
    z-index: 10;
  }

  .home .parallax-sphere.orange-opaque {
    top: 1820px;
    margin-left: 620px;
  }

  .team .parallax-sphere.orange-opaque,
  .careers .parallax-sphere.orange-opaque,
  .security .parallax-sphere.orange-opaque {
    top: 1680px;
    margin-left: 700px;
  }

  .home .parallax-sphere.purple-glow {
    top: 2320px;
    margin-left: -1120px;
  }

  .team .parallax-sphere.purple-glow,
  .careers .parallax-sphere.purple-glow,
  .security .parallax-sphere.purple-glow {
    top: 2320px;
    margin-left: -1120px;
  }

  .token .parallax-sphere.purple-glow {
    top: 4080px;
    margin-left: 700px;
  }

  .home .parallax-sphere.teal {
    top: 4120px;
    margin-left: 620px;
  }

  .careers .parallax-sphere.teal,
  .security .parallax-sphere.teal {
    top: 4620px;
    margin-left: -920px;
  }

  .team .parallax-sphere.teal {
    top: 4620px;
    margin-left: -1120px;
  }

  .token .parallax-sphere.teal {
    top: 5020px;
    margin-left: -900px;
  }

  .about .parallax-sphere.teal {
    top: 3300px;
    margin-left: -900px;
  }

  .home .parallax-sphere.teal-opaque {
    top: 4120px;
    margin-left: 620px;
  }

  .team .parallax-sphere.teal-opaque,
  .careers .parallax-sphere.teal-opaque,
  .security .parallax-sphere.teal-opaque {
    top: 4620px;
    margin-left: -900px;
  }

  .token .parallax-sphere.teal-opaque {
    top: 5020px;
    margin-left: -900px;
  }

  .about .parallax-sphere.teal-opaque {
    top: 3100px;
    margin-left: -780px;
  }

  .home .parallax-sphere.purple.one {
    top: 5520px;
    margin-left: -900px;
  }

  .home .parallax-sphere.purple.two {
    top: 6020px;
    margin-left: 600px;
  }
}

@media screen and (max-width: 1199px) {
  .parallax-sphere {
    display: none;
  }
}

body {
  transition: opacity 250ms ease, visibility 250ms ease;
}

a,
button,
input[type='submit'],
path {
  transition: background-color 0.15s ease, color 0.15s ease,
    border-color 0.15s ease, opacity 0.15s ease, fill 0.15s ease;
}

.notification-bar {
  position: fixed;
  top: 86px;
  left: 0;
  right: 0;
  z-index: 2;
}

.notification-bar .content {
  min-height: 40px;
  max-width: 720px;
  padding: 10px;
  border-radius: 20px;
  background-color: #12063d;
  margin: 0px auto;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.14px;
  text-align: center;
}

.about #subpage-intro h1 img {
  height: unset !important;
}

.page-header {
  display: flex;
  margin: 0 auto;
  text-align: center;
  user-select: none;
}

.header-background {
  mix-blend-mode: screen;
}

.header-cut-out {
  font-size: 200px;
  font-weight: 900;
  -webkit-text-stroke: 4px black;
  text-stroke: 4px black;
  letter-spacing: 4px;
  background: white;
  margin: 0 auto;
  flex: 1;
}

@media screen and (max-width: 1020px) {
  .header-cut-out {
    -webkit-text-stroke: 2px black;
    text-stroke: epx black;
    letter-spacing: 2px;
    font-size: 60px;
  }
}