.how-it-works {
  overflow: hidden;
  padding-top: 4rem;
  padding-bottom: 4rem; }
  .how-it-works .how-it-works-diagram {
    height: 226px;
    margin-top: -226px;
    position: relative;
    z-index: -2; }
    @media (min-width: 62em) {
      .how-it-works .how-it-works-diagram {
        margin-top: 0;
        height: 291px;
        text-align: center; } }
    .how-it-works .how-it-works-diagram svg {
      position: absolute;
      top: 0;
      top: -22px;
      left: 50%;
      -webkit-transition: -webkit-transform 600ms ease;
      transition: -webkit-transform 600ms ease;
      transition: transform 600ms ease;
      transition: transform 600ms ease, -webkit-transform 600ms ease;
      -webkit-transform: scale(0.8333);
      transform: scale(0.8333);
      overflow: visible;
      -webkit-box-shadow: 0px -0px 10000px transparent;
      box-shadow: 0px -0px 10000px transparent;
      /*trick for chrome*/ }
      .how-it-works .how-it-works-diagram svg text {
        font-weight: bold;
        font-size: 12px; }
      @media (min-width: 62em) {
        .how-it-works .how-it-works-diagram svg {
          position: relative;
          left: auto;
          top: auto;
          -webkit-transform: none !important;
          transform: none !important; } }
    .how-it-works .how-it-works-diagram.firstSlide svg {
      -webkit-transform: translateX(-25%) scale(0.8333);
      transform: translateX(-25%) scale(0.8333); }
    .how-it-works .how-it-works-diagram.secondSlide svg {
      -webkit-transform: translateX(-50%) scale(0.8333);
      transform: translateX(-50%) scale(0.8333); }
    .how-it-works .how-it-works-diagram.thirdSlide svg {
      -webkit-transform: translateX(-75%) scale(0.8333);
      transform: translateX(-75%) scale(0.8333); }
  .how-it-works .how-it-works-scroller .slide {
    text-align: center;
    font-size: 14px;
    line-height: 28px;
    padding: 0 1rem 226px; }
    .how-it-works .how-it-works-scroller .slide p {
      font-size: 1rem;
      margin: 0 auto;
      max-width: 20rem; }
  @media (min-width: 62em) {
    .how-it-works .how-it-works-scroller {
      position: relative; }
      .how-it-works .how-it-works-scroller .slide {
        position: absolute;
        top: 0;
        left: 50%;
        text-align: left;
        padding: 0;
        width: 280px; }
        .how-it-works .how-it-works-scroller .slide span {
          display: none; }
        .how-it-works .how-it-works-scroller .slide:nth-child(1) {
          -webkit-transform: translate(-519px, 207px);
          transform: translate(-519px, 207px); }
        .how-it-works .how-it-works-scroller .slide:nth-child(2) {
          -webkit-transform: translate(-199px, 239px);
          transform: translate(-199px, 239px); }
        .how-it-works .how-it-works-scroller .slide:nth-child(3) {
          -webkit-transform: translate(120px, 265px);
          transform: translate(120px, 265px); } }
  .how-it-works .slick-prev,
  .how-it-works .slick-next {
    top: 1.7rem;
    bottom: auto;
    width: 12px;
    height: 24px;
    background-size: 12px 24px;
    padding: 0.5rem;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1; }
    .how-it-works .slick-prev:before,
    .how-it-works .slick-next:before {
      display: none; }
  .how-it-works .slick-prev {
    background-image: url("../img/chevron-left-pink.svg");
    left: -1rem; }
  .how-it-works .slick-next {
    background-image: url("../img/chevron-right-pink.svg");
    right: -1rem; }
  .how-it-works .first-dots circle,
  .how-it-works .second-dots-top circle,
  .how-it-works .second-dots-bottom circle,
  .how-it-works .third-dots-top circle,
  .how-it-works .third-dots-bottom circle {
    opacity: 0.28;
    -webkit-transition: opacity 200ms ease;
    transition: opacity 200ms ease; }
  .how-it-works .second,
  .how-it-works .third-top,
  .how-it-works .third-bottom,
  .how-it-works .fourth-bottom,
  .how-it-works .fourth-top {
    opacity: 0.28;
    -webkit-transition: opacity 200ms ease;
    transition: opacity 200ms ease; }
  .how-it-works .firstSlide .first-dots circle {
    opacity: 1; }
    .how-it-works .firstSlide .first-dots circle.two {
      -webkit-transition-delay: 600ms;
      transition-delay: 600ms; }
    .how-it-works .firstSlide .first-dots circle.three {
      -webkit-transition-delay: 1200ms;
      transition-delay: 1200ms; }
  .how-it-works .firstSlide .second {
    opacity: 1;
    -webkit-transition-delay: 1800ms;
    transition-delay: 1800ms; }
  .how-it-works .secondSlide .second-dots-bottom circle {
    opacity: 1; }
    .how-it-works .secondSlide .second-dots-bottom circle.two {
      -webkit-transition-delay: 600ms;
      transition-delay: 600ms; }
    .how-it-works .secondSlide .second-dots-bottom circle.three {
      -webkit-transition-delay: 1200ms;
      transition-delay: 1200ms; }
    .how-it-works .secondSlide .second-dots-bottom circle.four {
      -webkit-transition-delay: 1800ms;
      transition-delay: 1800ms; }
  .how-it-works .secondSlide .third-bottom {
    opacity: 1;
    -webkit-transition-delay: 2400ms;
    transition-delay: 2400ms; }
  .how-it-works .thirdSlide .third-dots-bottom circle {
    opacity: 1; }
    .how-it-works .thirdSlide .third-dots-bottom circle.two {
      -webkit-transition-delay: 600ms;
      transition-delay: 600ms; }
    .how-it-works .thirdSlide .third-dots-bottom circle.three {
      -webkit-transition-delay: 1200ms;
      transition-delay: 1200ms; }
  .how-it-works .thirdSlide .fourth-bottom {
    opacity: 1;
    -webkit-transition-delay: 1800ms;
    transition-delay: 1800ms; }
  .how-it-works .button-group {
    text-align: center;
    margin: 3rem 0 0; }
    @media (min-width: 62em) {
      .how-it-works .button-group {
        margin-top: 6rem; } }

/*# sourceMappingURL=maps/how_it_works.css.map */