.app-pages-onboard--closeButton {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  padding: 10px;
}

  @media (min-width: 768px) {.app-pages-onboard--closeButton {
    top: 20px;
    right: 20px
}
  }

.app-components-onboard-onboardmobile--wrapper {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.app-components-onboard-onboardmobile--media {
  position: relative;
  display: -webkit-flex;
  display: flex;
  -webkit-flex: 0.5;
          flex: 0.5;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-align-items: center;
          align-items: center;
}

@media (min-width: 375px) {

.app-components-onboard-onboardmobile--media {
    -webkit-flex: 0.56;
            flex: 0.56
}
  }

@media (min-height: 668px) {

.app-components-onboard-onboardmobile--media {
    -webkit-flex: 0.6;
            flex: 0.6
}
  }

.app-components-onboard-onboardmobile--contentWrapper {
  position: relative;
  -webkit-flex: 0.5;
          flex: 0.5;
  text-align: center;
}

@media (min-width: 375px) {

.app-components-onboard-onboardmobile--contentWrapper {
    -webkit-flex: 0.44;
            flex: 0.44
}
  }

@media (min-height: 668px) {

.app-components-onboard-onboardmobile--contentWrapper {
    -webkit-flex: 0.4;
            flex: 0.4
}
  }

.app-components-onboard-onboardmobile--content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 60px;
  left: 0;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-align-items: center;
          align-items: center;
  padding: 0 25px;
}

@media (min-width: 375px) {

.app-components-onboard-onboardmobile--content {
    bottom: 70px
}
  }

.app-components-onboard-onboardmobile--content em {
    font-style: normal;
  }

.app-components-onboard-onboardmobile--content em:before {
      white-space: pre;
      content: '\A';
    }

.app-components-onboard-onboardmobile--title {
  margin-top: 10px;
  margin-bottom: 12px;
  font-size: 22px;
  line-height: 1.18;
}

@media (min-width: 376px) {

.app-components-onboard-onboardmobile--title {
    font-size: 27px
}
  }

@media (min-width: 375px and min-height: 668px) {

.app-components-onboard-onboardmobile--title {
    font-size: 32px
}
  }

.app-components-onboard-onboardmobile--description {
  margin-bottom: 0;
  font-size: 13px;
  line-height: 1.36;
}

@media (min-width: 375px) {

.app-components-onboard-onboardmobile--description {
    font-size: 14px
}
  }

@media (min-height: 668px) {

.app-components-onboard-onboardmobile--description {
    font-size: 16px
}
  }

.app-components-onboard-onboardmobile--nav {
  position: absolute;
  bottom: 20px;
  left: 50%;
  z-index: 2;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);

  --spacing: 45px;
}

@media (min-width: 375px) {

.app-components-onboard-onboardmobile--nav {
    bottom: 30px
}
  }

.app-components-onboard-onboardmobile--next,
.app-components-onboard-onboardmobile--prev {
  position: relative;
  top: 3px;
  margin-left: var(--spacing);
  line-height: 1;
}

.app-components-onboard-onboardmobile--next:before, .app-components-onboard-onboardmobile--prev:before {
    position: absolute;
    top: -17px;
    left: -15px;
    display: block;
    width: 50px;
    height: 50px;
    content: '';
  }

.app-components-onboard-onboardmobile--next svg, .app-components-onboard-onboardmobile--prev svg {
    width: 20px;
  }

.app-components-onboard-onboardmobile--prev {
  margin-right: var(--spacing);
  margin-left: 0;
}

.app-components-onboard-onboardmobile--prev svg {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }

.app-components-onboard-onboardmobile--finishButton {
  position: absolute;
  bottom: 23px;
  left: 50%;
  z-index: 3;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

.app-components-onboard-onboardmobile--finishButton:active {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }

.app-components-onboard-onboardmobile--video {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  min-width: 100%;
  height: 100%;
  background-color: #e5e4e5;
  -o-object-fit: cover;
     object-fit: cover;
}

.app-components-onboard-interactiveguide--realTrackWrapper {
  -webkit-transform: scale(2);
          transform: scale(2);
  -webkit-transform-origin: center left;
          transform-origin: center left;
}

  /* track wrapper - reset margins and padding to center on page */

  .app-components-onboard-interactiveguide--realTrackWrapper > div {
    height: 138px;
    margin: 0;
    padding: 0;
  }

.app-components-onboard-interactiveguide--realTrackMain {
  opacity: 0;
}

.app-components-onboard-interactiveguide--coverGrid {
  position: absolute;
  top: -22.5%;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  width: 592px;
  height: 800px;
  color: red;
  list-style: none;
  -webkit-transform-origin: center left;
          transform-origin: center left;
}

.app-components-onboard-interactiveguide--coverGrid li {
    width: 276px;
    height: 276px;
    margin-right: 20px;
    margin-bottom: 20px;
    background-size: cover;
    border-radius: 12px;
    content: '';
  }

.app-components-onboard-interactiveguide--coverGrid li:nth-child(3) {
      opacity: 0;
    }

.app-components-onboard-interactiveguide--coverGrid li:nth-child(even) {
      margin-top: -150px;
    }

.app-components-onboard-interactiveguide--coverGrid:before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: radial-gradient(300% 40%, var(--opaque-0) 0%, var(--bg) 100%);
    pointer-events: none;
    content: '';
  }

.app-components-onboard-interactiveguide--fakeList {
  position: absolute;
  top: 9.5%;
  width: 657px;
  margin-left: -3px;
  -webkit-transform-origin: center left;
          transform-origin: center left;
}

.app-components-onboard-interactiveguide--fakeList li {
    width: 657px;
    height: 142px;
    margin-bottom: 30px;
    list-style: none;
    background-size: cover;
    content: '';
  }

.app-components-onboard-interactiveguide--fakeList li:nth-child(2) {
      opacity: 0;
    }

.app-components-onboard-interactiveguide--fakeList:before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: radial-gradient(300% 60%, var(--opaque-0) 0%, var(--opaqueBg) 100%);
    pointer-events: none;
    content: '';
  }

.app-components-onboard-interactiveguide--overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.app-components-onboard-interactiveguide--overlay svg {
    width: 98px;
    height: 98px;
  }

.app-components-onboard-interactiveguide--overlay svg path {
      fill: white;
    }

.app-components-onboard-interactiveguide--overlay svg path + path {
        fill: black;
      }

.app-components-onboard-interactiveguide--video {
  position: absolute;
  width: 100%;
  margin-left: -39px; /* offset .media padding */
  background-color: #e5e4e5;
}

.app-components-onboard-interactiveguide--blocker0 {
  position: absolute;
  top: 0;
  left: 316px;
  z-index: 2;
  width: 400px;
  height: 100%;
  content: '';
}

.app-components-onboard-interactiveguide--blocker1,
.app-components-onboard-interactiveguide--blocker2 {
  top: 210px;
  left: 220px;
  height: 80px;
}

.app-components-onboard-interactiveguide--blocker1:after, .app-components-onboard-interactiveguide--blocker2:after {
    position: absolute;
    top: 134px;
    left: 0;
    width: 400px;
    height: 50px;
    content: '';
  }

.app-components-onboard-interactiveguide--blocker3 {
  top: 210px;
  left: 240px;
  height: 80px;
}

.app-components-onboard-interactiveguide--blocker3:after {
    position: absolute;
    top: 145px;
    right: 0;
    width: 700px;
    height: 50px;
    content: '';
  }

.app-components-base-markdown--wrapper a {
    text-decoration: underline;
  }

.app-components-onboard-pagedots--pageDots {
  display: -webkit-flex;
  display: flex;
  margin: 0;
}

.app-components-onboard-pagedots--pageDot {
  width: 6px;
  height: 6px;
  margin-right: 16px;
  list-style-type: none;
  background-color: var(--veryLight);
  border-radius: 6px;
}

.app-components-onboard-pagedots--pageDot:last-of-type {
    margin-right: 0;
  }

.app-components-onboard-pagedots--pageDotActive {
  width: 6px;
  height: 6px;
  background-color: var(--text);
  border-radius: 6px;
  content: '';
}

.app-components-onboard-onboarddesktop--bg {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-align-items: center;
          align-items: center;
  height: 100%;
  min-height: 100vh;
  padding: 50px 0;
  background-color: gray;
  background-image: url('/static/images/onboard/blur.jpg');
  background-size: cover;
}

.app-components-onboard-onboarddesktop--modal {
  width: 1190px;
  height: auto;
  min-height: 0;
  margin: 0 auto;
  padding: 0 50px;
  overflow: hidden;
  background-color: var(--bg);
}

@media (min-width: 1024px) {

.app-components-onboard-onboarddesktop--modal {
    margin-right: 20px;
    margin-left: 20px;
    padding: 0 90px;
    border-radius: 8px
}
  }

/* modal body wrapper */
.app-components-onboard-onboarddesktop--wrapper {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
          align-items: center;
  height: 600px;
}

.app-components-onboard-onboarddesktop--contentWrapper {
  position: relative;
  -webkit-flex: 1;
          flex: 1;
  width: 100%;
  height: 100%;
}

.app-components-onboard-onboarddesktop--media {
  position: relative;
  z-index: 1;
  display: -webkit-flex;
  display: flex;
  -webkit-flex: 0 0 59%;
          flex: 0 0 59%;
  -webkit-align-items: center;
          align-items: center;
  height: 100%;
  margin-right: -90px;
  margin-bottom: 0;
  margin-left: 40px;
  padding-left: 40px;
  overflow: hidden;
  background-color: var(--opaqueBg);
}

@media (min-width: 1024px) {

.app-components-onboard-onboarddesktop--media {
    -webkit-flex: 0 0 54%;
            flex: 0 0 54%;
    margin-left: 70px
}
  }

.app-components-onboard-onboarddesktop--content {
  position: absolute;
  top: 50%;
  right: 0;
  bottom: 0;
  left: 0;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  -webkit-justify-content: center;
          justify-content: center;
  height: 400px;
  margin-top: -200px;
  padding-bottom: 0;
}

.app-components-onboard-onboarddesktop--content em {
    font-style: normal;
  }

.app-components-onboard-onboarddesktop--content em:before {
      white-space: pre;
      content: '\A';
    }

.app-components-onboard-onboarddesktop--title {
  margin-top: 10px;
  margin-bottom: 15px;
  font-size: 35px;
  line-height: 44px;
}

@media (min-width: 1024px) {

.app-components-onboard-onboarddesktop--title {
    font-size: 48px;
    line-height: 50px;
    letter-spacing: 0.34px
}
  }

.app-components-onboard-onboarddesktop--description {
  margin-bottom: 30px;
  font-size: 16px;
  line-height: 1.5;
}

@media (min-width: 1024px) {

.app-components-onboard-onboarddesktop--description {
    font-size: 18px;
    line-height: 28px
}
  }

.app-components-onboard-onboarddesktop--nav {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
          align-items: center;
  height: 52px;
}

.app-components-onboard-onboarddesktop--buttonWrapper {
  position: relative;
  text-align: left;
}

.app-components-onboard-onboarddesktop--handWritten {
  position: relative;
  margin-bottom: 0;
  font-weight: 700;
  white-space: nowrap;
}

.app-components-onboard-onboarddesktop--handWritten svg {
    position: absolute;
    bottom: 10px;
    left: calc(100% + 15px);
    z-index: 5;
    display: block;
    height: auto;
    pointer-events: none;
  }

@-webkit-keyframes app-components-onboard-onboarddesktop--dash {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes app-components-onboard-onboarddesktop--dash {
  to {
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes app-components-onboard-onboarddesktop--slideInUp {
  from {
    -webkit-transform: translate3d(0, 20%, 0) scale(0.98);
            transform: translate3d(0, 20%, 0) scale(0.98);
    opacity: 0;
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0) scale(1);
            transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
  }
}

@keyframes app-components-onboard-onboarddesktop--slideInUp {
  from {
    -webkit-transform: translate3d(0, 20%, 0) scale(0.98);
            transform: translate3d(0, 20%, 0) scale(0.98);
    opacity: 0;
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0) scale(1);
            transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
  }
}

.app-components-onboard-onboarddesktop--subscribed {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
          align-items: center;
  width: 100%;
  height: 100%;
  color: var(--brand);
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  -webkit-animation-name: app-components-onboard-onboarddesktop--slideInUp;
          animation-name: app-components-onboard-onboarddesktop--slideInUp;
  -webkit-animation-duration: 0.4s;
          animation-duration: 0.4s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.app-components-onboard-onboarddesktop--subscribed ~ button,
  .app-components-onboard-onboarddesktop--subscribed ~ form {
    opacity: 0;
    pointer-events: none;
  }

.app-components-onboard-onboarddesktop--noButton {
  position: absolute;
  top: 130%;
  left: 8px;
  padding: 0;
  color: var(--tintedText);
  font-weight: 400;
  font-size: 16px;
  text-transform: none;
  text-decoration: underline;
  background-color: transparent !important;
}

.app-components-onboard-onboarddesktop--noButton:hover,
  .app-components-onboard-onboarddesktop--noButton:active,
  .app-components-onboard-onboarddesktop--noButton:focus {
    color: var(--tintedText);
    opacity: 0.8;
  }

.app-components-onboard-onboarddesktop--pageDots {
  position: absolute;
  bottom: 60px;
}

svg.app-components-onboard-onboarddesktop--svg2 {
  width: 25vw;
  height: 119px;
}

@media (min-width: 900px) {

svg.app-components-onboard-onboarddesktop--svg2 {
    width: 27vw;
    height: 100px
}
  }

@media (min-width: 1024px) {

svg.app-components-onboard-onboarddesktop--svg2 {
    width: 26vw;
    height: 124px
}
  }

@media (min-width: 1200px) {

svg.app-components-onboard-onboarddesktop--svg2 {
    width: min(28vw, 345px);
    height: auto
}
  }

svg.app-components-onboard-onboarddesktop--svg3 {
  bottom: 12%;
  width: min(28vw, 403px);
  height: 180px;
  margin-left: 10px;
}

@media (min-width: 1024px) {

svg.app-components-onboard-onboarddesktop--svg3 {
    height: 220px
}
  }

@media (min-width: 1090px) {

svg.app-components-onboard-onboarddesktop--svg3 {
    height: 191px
}
  }


/*# sourceMappingURL=875c5.css.map*/