@charset "UTF-8";

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# SubModule Rippling UI Kit
# Utilities
  ## Blog Common
  ## Mixins
  ## Normalize
  ## Typo
  ## Variables
# Componentss
  ## Animation
    ## HomePage
    ## Broker
    ## Accountant
    ## HR
    ## IT
    ## OnBoarding
    ## Ops
  ## Alignments
  ## Comments
  ## Common
  ## Cylance
  ## Media
  ## Navigation
  ## Search
  ## Widgets
# Layout
  ## Overrides
    ## Page based over-rides
  ## Page
    ## Partner
      ## Guideline
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# SubModule Rippling UI Kit
--------------------------------------------------------------*/

.ruiContainer {
  width: 1100px;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 15px;
}

.ruiContainer--blog {
  width: 1050px;
  padding: 0 5px;
  max-width: 100%;
}

.ruiContainer--micro {
  width: 650px;
  max-width: 100%;
}

.ruiContainer--noPadding {
  padding: 0;
}

.ruiContainerLarge {
  width: 1280px;
  max-width: 100%;
}

.shadowBoxLarge {
  border-radius: 8px;
  overflow: hidden;
  -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.16);
          box-shadow: 0 0 40px rgba(0, 0, 0, 0.16);
}

.inline-block {
  display: inline-block;
}

.ruiList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  font-family: ripplingFontBook;
}

.ruiList__item {
  padding: 10px 0 10px 35px;
  min-width: 345px;
  -webkit-box-flex: 100%;
      -ms-flex: 100%;
          flex: 100%;
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  max-width: 100%;
  position: relative;
  font-size: 1.125em;
}

.ruiList__item:before {
  content: '';
  position: absolute;
  left: 0;
  top: .6rem;
  height: 1.25rem;
  width: 1.25rem;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/icon-check-blue.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

@media screen and (min-width: 768px) {
  .ruiList__item {
    -webkit-box-flex: 50%;
        -ms-flex: 50%;
            flex: 50%;
    padding: 10px 0 10px 45px;
  }

  .ruiList__item:before {
    top: .8rem;
  }
}

@media screen and (max-width: 767px) {
  .hideMobile {
    display: none;
  }
}

.ruiBtn {
  font-size: 10px;
  font-family: ripplingFontBold;
  padding: 0 14px;
  height: 30px;
  line-height: 28px;
  text-align: center;
  border: 2px solid #ffcc1c;
  background-color: #ffcc1c;
  text-transform: uppercase;
  text-decoration: none !important;
  color: #000;
  display: inline-block;
  position: relative;
  cursor: pointer;
  -webkit-transition: all 0.2s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.2s cubic-bezier(1, 0, 0, 1);
  transition: all 0.2s cubic-bezier(1, 0, 0, 1);
}

.ruiBtn:hover {
  -webkit-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12);
          box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12);
}

.ruiBtn--dark {
  background-color: #000;
  border-color: #000;
}

.ruiBtn--go {
  padding-right: 40px;
}

.ruiBtn--go:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 15px;
  -webkit-transform: translate(0%, -50%);
       -o-transform: translate(0%, -50%);
          transform: translate(0%, -50%);
  width: 0;
  height: 0;
  display: inline-block;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid #000;
}

.ruiBtn--link {
  padding: 0;
  color: #000;
  background-color: transparent;
  border: none;
  -webkit-transition: all 0.2s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.2s cubic-bezier(1, 0, 0, 1);
  transition: all 0.2s cubic-bezier(1, 0, 0, 1);
  height: auto;
  line-height: 1;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  font-size: 11px;
  font-family: ripplingFontMedium;
  letter-spacing: 0.5px;
}

.ruiBtn--link.ruiBtn--linkGo .linkArrow {
  position: absolute;
  top: -1.6px;
  right: 0;
  width: 0;
  height: 0;
  display: inline-block;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid #22c8e3;
  -webkit-transition: all 0.2s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.2s cubic-bezier(1, 0, 0, 1);
  transition: all 0.2s cubic-bezier(1, 0, 0, 1);
  opacity: 0;
}

.ruiBtn--link:hover {
  color: #000;
}

.ruiBtn--link:hover.ruiBtn--linkGo .linkArrow {
  opacity: 1;
  right: -10px;
}

.ruiBtn--linkPrimary {
  padding: 0;
  color: #fff;
  background-color: transparent;
  border: none;
  -webkit-transition: all 0.2s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.2s cubic-bezier(1, 0, 0, 1);
  transition: all 0.2s cubic-bezier(1, 0, 0, 1);
  height: auto;
  line-height: 1;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  font-size: inherit;
  font-family: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  opacity: 1;
}

.ruiBtn--linkPrimary:hover {
  color: #fff;
  opacity: 0.8;
}

.ruiBtn--outlined {
  background-color: #fff;
  color: #000;
}

.ruiBtn--outlined.ruiBtn--go:after {
  border-left: 6px solid #22c8e3;
}

.ruiBtn--large {
  font-size: 13px;
  height: 44px;
  line-height: 42px;
  padding: 0 25px;
  font-family: ripplingFontPrag;
  letter-spacing: 1.25px;
}

.ruiBtn--large.ruiBtn--go {
  padding-right: 60px;
}

.ruiBtn--large.ruiBtn--go:after {
  right: 20px;
}

.ruiInput {
  outline: none !important;
  font-size: 20px;
  line-height: 1.4;
  border: 1px solid #959595 !important;
  border-radius: 0;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  -webkit-appearance: none;
  padding: 6px 15px;
  font-family: ripplingFontBook;
}

.ruiInput--light {
  border: 1px solid #fff !important;
}

.ruiInput--mini {
  font-size: 12px;
}

.ruiForm--inline input {
  display: block;
  width: 280px;
  margin: 0 auto 15px;
  padding: 7px 15px 6px;
  font-size: 14px;
  height: 42px;
}

.ruiForm--inline a {
  display: block;
  height: 42px;
  line-height: 40px;
  width: 280px;
  margin: 0 auto;
}

@media screen and (min-width: 768px) {
  .ruiForm--inline input {
    display: inline-block;
    vertical-align: middle;
    width: 280px;
    margin: 0 15px 0 0;
  }

  .ruiForm--inline a {
    display: inline-block;
    vertical-align: middle;
    width: auto;
    margin: 0;
  }
}

.ruiAppStore .ruiContainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 0;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.ruiAppStore .ruiAppStoreCategory {
  padding: 0;
  -webkit-box-flex: 100%;
      -ms-flex: 100%;
          flex: 100%;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  background-color: #000;
  height: 35px;
  overflow: hidden;
}

.ruiAppStore .ruiAppStoreCategory__title {
  display: none;
  color: #000;
  font-family: ripplingFontMedium;
  font-size: 18px;
  padding-bottom: 35px;
}

.ruiAppStore .ruiAppStoreCategory__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  width: 100%;
  overflow: auto;
}

.ruiAppStore .ruiAppStoreCategory__listItem {
  position: relative;
  color: #fff;
  font-family: ripplingFontBook;
  font-size: 1em;
  padding: 10px;
  white-space: nowrap;
  cursor: pointer;
  -webkit-transition: all 0.1s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.1s cubic-bezier(1, 0, 0, 1);
  transition: all 0.1s cubic-bezier(1, 0, 0, 1);
}

.ruiAppStore .ruiAppStoreCategory__listItem:first-child {
  padding-left: 20px;
}

.ruiAppStore .ruiAppStoreCategory__listItem:last-child {
  padding-right: 20px;
}

.ruiAppStore .ruiAppStoreCategory__listItem:hover {
  color: #22c8e3;
}

.ruiAppStore .ruiAppStoreCategory__listItem.active {
  pointer-events: none;
  color: #22c8e3;
  font-family: ripplingFontMedium;
}

.ruiAppStore .ruiAppStoreCategory__listItem.active:before {
  content: '';
  height: 0;
  width: 0;
  bottom: 0;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
       -o-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  position: absolute;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #fff;
}

.ruiAppStore .ruiAppStoreApps {
  width: 650px;
  max-width: 100%;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.ruiAppStore__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 15px;
}

.ruiAppStore__title {
  color: #000;
  font-family: ripplingFontMedium;
  font-size: 14px;
}

.ruiAppStore__search {
  position: relative;
}

.ruiAppStore__search:before {
  content: '';
  position: absolute;
  height: 30px;
  width: 30px;
  top: 0;
  left: 0;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/icon-search.svg");
  background-size: 15px;
  background-position: center;
  background-repeat: no-repeat;
}

.ruiAppStore__search input {
  padding-left: 35px;
  border: 1px solid #d0d0d0 !important;
}

.ruiAppStore__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding-bottom: 55px;
  position: relative;
}

.ruiAppStore__listCount {
  position: absolute;
  cursor: default;
  bottom: 0;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
       -o-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
}

.ruiAppStore__listCount > span {
  font-size: .8em;
  padding: 8px 20px;
  color: #000;
  font-family: ripplingFontNormal;
  display: inline-block;
  background-color: #ededed;
}

.ruiAppStore__listEmpty {
  text-align: center;
  -webkit-box-flex: 100%;
      -ms-flex: 100%;
          flex: 100%;
  padding: 60px 0;
}

.ruiAppStore__listItem {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  padding: 15px;
  width: 90px;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  cursor: default;
}

.ruiAppStore__listItem:hover .ruiAppStore__listItemIcon {
  -webkit-box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.4);
          box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.4);
}

.ruiAppStore__listItemIcon {
  height: 60px;
  width: 60px;
  border-radius: 25%;
  background-color: #f5f3f1;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-transition: all 0.1s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.1s cubic-bezier(1, 0, 0, 1);
  transition: all 0.1s cubic-bezier(1, 0, 0, 1);
}

.ruiAppStore__listItemTitle {
  margin: 10px 0;
  font-size: 10px;
  font-family: ripplingFontBook;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.ruiAppStore__listItemRating {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.ruiAppStore__listItemRating > span {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  height: 10px;
  width: 10px;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/icon-star.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.ruiAppStore__listItemRating > span.active {
  background-image: url("https://cdn.rippling.com/static/marketing/assets/icon-star_active.svg");
}

.ruiAppStore__hideinMobile {
  display: none;
}

@media screen and (min-width: 900px) {
  .ruiAppStore .ruiAppStoreCategory {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    background-color: transparent;
    padding: 0 20px;
    height: auto;
  }

  .ruiAppStore .ruiAppStoreCategory__title {
    display: block;
  }

  .ruiAppStore .ruiAppStoreCategory__list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }

  .ruiAppStore .ruiAppStoreCategory__listItem {
    padding: 6px 0 !important;
    white-space: normal;
    color: #000;
  }

  .ruiAppStore .ruiAppStoreCategory__listItem:before {
    display: none;
  }

  .ruiAppStore .ruiAppStoreApps {
    min-height: 750px;
  }

  .ruiAppStore__head {
    padding: 0 20px 20px;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }

  .ruiAppStore__title {
    font-size: 18px;
  }

  .ruiAppStore__listItem {
    padding: 20px;
    width: 130px;
  }

  .ruiAppStore__listItemIcon {
    height: 90px;
    width: 90px;
  }

  .ruiAppStore__listItemTitle {
    font-size: 14px;
    margin: 15px 0 16px;
  }

  .ruiAppStore__listItemRating > span {
    height: 14px;
    width: 14px;
  }

  .ruiAppStore__hideinMobile {
    display: initial;
  }
}

.ruiCoverPanel {
  height: 600px;
  max-width: 100%;
  width: 1280px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  background-color: #fff;
  position: relative;
  z-index: 0;
  margin: 0 auto;
  padding-top: 60px;
  text-align: left;
  overflow: hidden;
}

.ruiCoverPanel__image {
  position: absolute;
  bottom: -2px;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
       -o-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  height: auto;
  width: 320px;
  max-width: 100%;
  z-index: -1;
}

.ruiCoverPanel__title {
  font-family: ripplingFontLight;
  color: #020202;
  padding-bottom: 30px;
  width: 420px;
  max-width: 100%;
  margin: 0 auto;
}

.ruiCoverPanel__caption {
  font-family: ripplingFontBook;
  color: #030303;
  width: 420px;
  max-width: 100%;
  margin: 0 auto;
}

.ruiCoverPanel--primary {
  height: 500px;
  padding: 20px 0 100px;
  margin-top: 0;
}

.ruiCoverPanel--primary .ruiCoverPanel__title {
  color: #22c8e3;
  font-family: ripplingFontBook;
  width: 370px;
}

.ruiCoverPanel--primary .ruiCoverPanel__caption {
  width: 370px;
}

.ruiCoverPanel--mini .ruiCoverPanel__title {
  width: 345px;
}

.ruiCoverPanel--mini .ruiCoverPanel__caption {
  width: 385px;
}

.ruiCoverPanel--miniCaption .ruiCoverPanel__caption {
  width: 370px;
}

@media screen and (min-width: 768px) {
  .ruiCoverPanel {
    height: 100vh;
    max-height: 360px;
    text-align: left;
    padding-top: 40px;
  }

  .ruiCoverPanel .ruiContainer:first-child {
    padding-bottom: 40px;
  }

  .ruiCoverPanel__title {
    margin: 0 auto 0 0;
  }

  .ruiCoverPanel__image {
    width: calc(100% - 420px);
    left: auto;
    right: 0;
    -webkit-transform: none;
         -o-transform: none;
            transform: none;
  }

  .ruiCoverPanel__caption {
    margin: 0 auto 0 0;
  }

  .ruiCoverPanel--primary {
    padding: 80px 0;
  }

  .ruiCoverPanel--primary .ruiCoverPanel__image {
    top: 50%;
    width: calc(100% - 470px);
    -webkit-transform: translate(0, -50%);
         -o-transform: translate(0, -50%);
            transform: translate(0, -50%);
    bottom: auto;
  }
}

@media screen and (min-width: 900px) {
  .ruiCoverPanel {
    padding-top: 60px;
    max-height: 520px;
  }
}

@media screen and (min-width: 992px) {
  .ruiCoverPanel {
    padding-top: 100px;
    max-height: 600px;
  }
}

@media screen and (min-width: 1100px) {
  .ruiCoverPanel {
    max-height: 700px;
    padding-top: 0;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }

  .ruiCoverPanel .ruiContainer:first-child {
    padding-bottom: 0;
  }

  .ruiCoverPanel--primary {
    padding: 180px 0;
  }
}

@media screen and (min-width: 1280px) {
  .ruiCoverPanel--primary {
    overflow: hidden;
    width: 100%;
  }

  .ruiCoverPanel--primary .ruiCoverPanel__image {
    width: calc(100% - 520px);
    right: -40px;
  }
}

@media screen and (min-width: 1380px) {
  .ruiCoverPanel--primary {
    width: 1280px;
  }

  .ruiCoverPanel--primary .ruiCoverPanel__image {
    width: calc(100% - 600px);
    right: 0;
  }
}

.ruiCoverPanelAlt {
  width: 100%;
  padding-top: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  background-color: #fff;
  color: #000;
  position: relative;
  z-index: 0;
  text-align: center;
  font-family: ripplingFontBook;
  overflow: hidden;
}

.ruiCoverPanelAlt__wrapper {
  display: block;
  width: 100%;
}

.ruiCoverPanelAlt__container {
  padding: 0;
}

.ruiCoverPanelAlt__title {
  margin-top: 16px;
  margin-bottom: 12px;
  font-size: 1.125em;
  font-family: ripplingFontPrag;
  text-transform: uppercase;
  letter-spacing: 1.25px;
}

.ruiCoverPanelAlt__caption {
  font-size: 1.13em;
}

.ruiCoverPanelAlt__image {
  position: relative;
  height: auto;
  -webkit-box-flex: 55%;
      -ms-flex: 55%;
          flex: 55%;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  text-align: center;
}

.ruiCoverPanelAlt__image img {
  margin-top: 40px;
  width: 320px;
}

.ruiCoverPanelAlt__icon {
  height: 60px;
  width: 60px;
  margin: 0 auto;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.ruiCoverPanelAlt__footer {
  margin-top: 20px;
  padding: 35px 0 40px;
}

.ruiCoverPanelAlt__footerTitle {
  padding-bottom: 15px;
  font-size: 12px;
  font-family: ripplingFontBold;
  letter-spacing: 1.25px;
  text-transform: uppercase;
}

@media screen and (min-width: 768px) {
  .ruiCoverPanelAlt {
    text-align: left;
    padding-top: 80px;
  }

  .ruiCoverPanelAlt__container {
    padding: 0 15px;
  }

  .ruiCoverPanelAlt__wrapper > .ruiContainer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
  }

  .ruiCoverPanelAlt__wrapper > .ruiContainer .ruiCoverPanelAlt__container {
    -webkit-box-flex: 45%;
        -ms-flex: 45%;
            flex: 45%;
    -ms-flex-negative: 0;
        flex-shrink: 0;
  }

  .ruiCoverPanelAlt__image {
    -webkit-box-flex: 55%;
        -ms-flex: 55%;
            flex: 55%;
  }

  .ruiCoverPanelAlt__image img {
    margin-top: 0;
    width: 100%;
    -webkit-transform: translateX(20px);
         -o-transform: translateX(20px);
            transform: translateX(20px);
    margin-bottom: -100px;
  }

  .ruiCoverPanelAlt__icon {
    margin: 0 0 0 -30px;
  }

  .ruiCoverPanelAlt__footer {
    margin-top: 45px;
  }
}

@media screen and (min-width: 900px) {
  .ruiCoverPanelAlt {
    padding-top: 120px;
  }

  .ruiCoverPanelAlt__image img {
    margin-bottom: -155px;
  }
}

@media screen and (min-width: 1280px) {
  .ruiCoverPanelAlt__image img {
    -webkit-transform: translateX(70px);
         -o-transform: translateX(70px);
            transform: translateX(70px);
  }
}

.ruiContentBlock {
  width: 100%;
  min-height: 400px;
  overflow: hidden;
  background-color: #fff;
  position: relative;
  z-index: 0;
  padding: 40px 0;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
}

.ruiContentBlock ul {
  text-align: left;
}

.ruiContentBlock .ruiContainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  overflow: visible;
}

.ruiContentBlock .ruiContainer__image {
  width: 700px;
  height: auto;
}

.ruiContentBlock__content {
  width: 420px;
  max-width: 100%;
  margin: 0 auto;
  text-align: left;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.ruiContentBlock__image {
  text-align: center;
  -webkit-box-flex: 100%;
      -ms-flex: 100%;
          flex: 100%;
}

.ruiContentBlock__image img {
  width: 290px;
  max-width: 100%;
}

.ruiContentBlock__title {
  font-size: 2.375em;
  font-weight: normal;
  font-family: ripplingFontBook;
  color: #000;
  padding-bottom: 20px;
}

.ruiContentBlock__caption {
  font-size: 1em;
  font-family: ripplingFontBook;
  font-weight: normal;
  color: #000;
  margin: 0 0 20px;
  padding: 0;
}

.ruiContentBlock__caption *:first-child {
  margin-top: 0;
}

.ruiContentBlock__caption ul {
  padding-left: 20px;
}

.ruiContentBlock--dark {
  background-color: #000;
}

.ruiContentBlock--dark .ruiContentBlock__title {
  color: #fff;
}

.ruiContentBlock--dark .ruiContentBlock__caption {
  color: #fff;
}

@media screen and (min-width: 768px) {
  .ruiContentBlock {
    margin-top: 0;
    text-align: left;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 60px 0;
  }

  .ruiContentBlock .ruiContainer {
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }

  .ruiContentBlock__image {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    padding-left: 60px;
    padding-right: 0;
  }

  .ruiContentBlock__image img {
    width: 550px;
  }

  .ruiContentBlock__image--float {
    padding: 0;
    text-align: right;
  }

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

  .ruiContentBlock__image--feature {
    position: relative;
  }

  .ruiContentBlock__image--feature:after {
    content: '';
    position: absolute;
    z-index: -1;
    height: 80%;
    width: 75%;
    top: 7.5%;
    left: auto;
    right: 0;
    background-color: #22c8e3;
    opacity: .42;
  }

  .ruiContentBlock__image--featureMini:after {
    height: 74%;
    width: 82%;
    top: 14%;
  }

  .ruiContentBlock__image--featureBelow:after {
    top: auto;
    bottom: 0;
  }

  .ruiContentBlock__image--featureUp:after {
    top: 0;
    bottom: auto;
  }

  .ruiContentBlock--reverse .ruiContainer {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
  }

  .ruiContentBlock--reverse .ruiContentBlock__image {
    padding-left: 0;
    padding-right: 60px;
  }

  .ruiContentBlock--reverse .ruiContentBlock__image--float {
    text-align: left;
    padding: 0;
  }

  .ruiContentBlock--reverse .ruiContentBlock__image--floatNormal {
    text-align: left;
    padding: 0;
  }

  .ruiContentBlock--reverse .ruiContentBlock__image--feature:after {
    left: 0;
    right: auto;
  }
}

@media screen and (min-width: 1280px) {
  .ruiContentBlock__image img {
    width: 700px;
  }

  .ruiContentBlock__image--float img {
    margin-right: -175px;
  }

  .ruiContentBlock--reverse .ruiContentBlock__image--float img {
    margin-left: -175px;
    margin-right: auto;
  }
}

.ruiContentHead {
  width: 100%;
  overflow: hidden;
  padding: 30px 0;
}

.ruiContentHead .ruiContainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.ruiContentHead__leftBlock {
  width: 510px;
  max-width: 100%;
}

.ruiContentHead__name {
  font-size: 12px;
  letter-spacing: 1.25px;
  font-family: ripplingFontPrag;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.ruiContentHead__title {
  font-size: 1.75em;
  font-family: ripplingFontBook;
  color: #000;
  margin-bottom: 20px;
}

.ruiContentHead__caption {
  font-family: ripplingFontBook;
  color: #000;
  width: 510px;
  max-width: 100%;
}

.ruiContentHead__caption *:first-child {
  margin-top: 0;
}

.ruiContentHead__caption ul {
  padding-left: 20px;
}

.ruiContentHead--primary .ruiContentHead__title {
  font-size: 2.25em;
}

.ruiContentHead--featured {
  background-color: #ededed;
  max-width: 1170px;
  margin: 0 auto;
}

.ruiContentHead--featured .ruiContentHead__title {
  font-size: 2em;
}

@media screen and (min-width: 768px) {
  .ruiContentHead {
    padding: 60px 0;
  }

  .ruiContentHead--featured {
    padding: 80px 0 140px;
  }
}

.ruiContentHeadImage {
  background-color: #ededed;
  max-width: 1170px;
  margin: 0 auto;
  padding: 30px 0;
}

.ruiContentHeadImage .ruiContainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.ruiContentHeadImage__leftBlock {
  width: 360px;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
}

.ruiContentHeadImage__rightBlock {
  width: 510px;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
}

.ruiContentHeadImage__rightBlock img {
  max-width: 100%;
}

.ruiContentHeadImage__title {
  font-family: ripplingFontBook;
  color: #000;
  margin-bottom: 30px;
  line-height: 1.2;
  font-size: 2.375em;
  text-align: left;
}

.ruiContentHeadImage__caption {
  font-family: ripplingFontBook;
  color: #000;
  margin-bottom: 30px;
  text-align: left;
}

.ruiContentHeadImage__caption *:first-child {
  margin-top: 0;
}

.ruiContentHeadImage__caption ul {
  padding-left: 20px;
}

.ruiContentHeadImage--reverse .ruiContainer {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}

@media screen and (min-width: 768px) {
  .ruiContentHeadImage {
    padding: 90px 0;
  }

  .ruiContentHeadImage .ruiContainer {
    padding: 0 30px;
  }

  .ruiContentHeadImage__leftBlock {
    text-align: left;
  }

  .ruiContentHeadImage__rightBlock {
    text-align: right;
  }

  .ruiContentHeadImage--floathorizontal {
    overflow: hidden;
  }

  .ruiContentHeadImage--floathorizontal .ruiContentHeadImage__rightBlock img {
    -webkit-transform: translateX(120px);
         -o-transform: translateX(120px);
            transform: translateX(120px);
  }

  .ruiContentHeadImage--reverse.ruiContentHeadImage--floathorizontal img {
    -webkit-transform: translateX(-120px);
         -o-transform: translateX(-120px);
            transform: translateX(-120px);
  }

  .ruiContentHeadImage--reverse .ruiContentHeadImage__rightBlock {
    text-align: left;
  }

  .ruiContentHeadImage--floatup {
    margin-top: 70px;
  }

  .ruiContentHeadImage--floatup img {
    -webkit-transform: translateY(-160px);
         -o-transform: translateY(-160px);
            transform: translateY(-160px);
    margin-bottom: -160px;
  }

  .ruiContentHeadImage--floatdown {
    margin-bottom: 70px;
  }

  .ruiContentHeadImage--floatdown img {
    -webkit-transform: translateY(160px);
         -o-transform: translateY(160px);
            transform: translateY(160px);
    margin-top: -160px;
  }

  .ruiContentHeadImage--floatvertical {
    margin: 135px auto;
  }

  .ruiContentHeadImage--floatvertical img {
    margin: -200px 0;
  }
}

.ruiFeatureBlock {
  width: 100%;
  min-height: 400px;
  background-color: #000;
  color: #fff;
  font-family: ripplingFontBook;
  padding: 0 0 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.ruiFeatureBlock__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 60px 15px 80px;
}

.ruiFeatureBlock__border {
  margin-bottom: 45px;
}

.ruiFeatureBlock__border:after {
  content: '';
  display: block;
  width: 100%;
  border-bottom: 2px solid #d4ff00;
}

.ruiFeatureBlock__title {
  font-size: 1.625em;
  padding-bottom: 20px;
  width: 420px;
  max-width: 100%;
}

.ruiFeatureBlock__caption {
  width: 500px;
  max-width: 100%;
}

.ruiFeatureBlock__desktopImage {
  display: none;
  height: auto;
  width: 100%;
  margin: 0 auto;
}

.ruiFeatureBlock__mobileImage {
  width: 290px;
  height: auto;
  max-width: 100%;
}

.ruiFeatureBlock__iconBlock {
  display: none;
}

@media screen and (min-width: 768px) {
  .ruiFeatureBlock {
    padding: 60px 0 125px;
  }

  .ruiFeatureBlock .ruiContainer__image {
    position: relative;
    width: 750px;
    min-height: 774px;
    padding: 0;
  }

  .ruiFeatureBlock__content {
    padding: 90px 15px;
  }

  .ruiFeatureBlock__border {
    margin-bottom: 120px;
  }

  .ruiFeatureBlock__mobileImage {
    display: none;
  }

  .ruiFeatureBlock__desktopImage {
    display: block;
  }

  .ruiFeatureBlock__iconBlock {
    display: block;
    position: absolute;
  }

  .ruiFeatureBlock__iconBlock:hover .iconCaption {
    opacity: 1;
  }

  .ruiFeatureBlock__iconBlock .icon {
    height: 70px;
    width: 70px;
    margin: 0 auto;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  .ruiFeatureBlock__iconBlock .iconContent {
    width: 142px;
    text-align: center;
  }

  .ruiFeatureBlock__iconBlock .iconTitle {
    margin-top: 16px;
    font-family: ripplingFontPrag;
    font-size: 11px;
    letter-spacing: 1.25px;
    line-height: 1.4;
    text-transform: uppercase;
  }

  .ruiFeatureBlock__iconBlock .iconCaption {
    margin-top: 8px;
    font-family: ripplingFontBook;
    font-size: 9px;
    line-height: 1.4;
    letter-spacing: .5px;
    opacity: 0;
    -webkit-transition: all 0.1s cubic-bezier(1, 0, 0, 1);
    -o-transition: all 0.1s cubic-bezier(1, 0, 0, 1);
    transition: all 0.1s cubic-bezier(1, 0, 0, 1);
    text-align: left;
  }

  .ruiFeatureBlock__iconBlock--comp {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    left: 64px;
    top: 2px;
    width: 232px;
  }

  .ruiFeatureBlock__iconBlock--comp .icon {
    margin: 0;
  }

  .ruiFeatureBlock__iconBlock--comp .iconTitle {
    margin-top: 4px;
  }

  .ruiFeatureBlock__iconBlock--sales {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    right: 50px;
    top: 2px;
    width: 232px;
  }

  .ruiFeatureBlock__iconBlock--sales .icon {
    margin: 0;
  }

  .ruiFeatureBlock__iconBlock--sales .iconTitle {
    margin-top: 4px;
  }

  .ruiFeatureBlock__iconBlock--pto {
    right: 10px;
    top: 192px;
  }

  .ruiFeatureBlock__iconBlock--emp {
    right: 40px;
    bottom: 135px;
  }

  .ruiFeatureBlock__iconBlock--emp .iconContent {
    width: 155px;
  }

  .ruiFeatureBlock__iconBlock--time {
    bottom: 20px;
    left: 304px;
  }

  .ruiFeatureBlock__iconBlock--401k {
    left: 50px;
    bottom: 125px;
  }

  .ruiFeatureBlock__iconBlock--insurance {
    left: 10px;
    top: 192px;
  }

  .ruiFeatureBlock--reverse {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    padding: 140px 0 0;
  }

  .ruiFeatureBlock--reverse .ruiFeatureBlock__border {
    margin-top: 85px;
    margin-bottom: 0;
  }

  .ruiFeatureBlock--reverse .ruiFeatureBlock__content {
    padding: 65px 15px 90px;
  }
}

.ruiFeatureFloat {
  background-color: #d4ff00;
  padding-top: 40px;
  margin-bottom: 60px;
  font-family: ripplingFontBook;
}

.ruiFeatureFloat__title {
  font-size: 2.625em;
  margin-bottom: -30px;
}

.ruiFeatureFloat__card {
  -webkit-box-shadow: 0 3px 30px rgba(0, 0, 0, 0.16);
          box-shadow: 0 3px 30px rgba(0, 0, 0, 0.16);
  background: #fff;
  -webkit-transform: translateY(60px);
       -o-transform: translateY(60px);
          transform: translateY(60px);
  padding: 20px 20px 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.ruiFeatureFloat__cardItem {
  padding: 10px 0 10px 34px;
  width: 425px;
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  max-width: 100%;
  position: relative;
  font-size: 1.125em;
}

.ruiFeatureFloat__cardItem:before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  height: 16px;
  width: 16px;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/icon-check-green.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

@media screen and (min-width: 768px) {
  .ruiFeatureFloat__cardItem {
    padding: 15px 0 15px 38px;
  }

  .ruiFeatureFloat__cardItem:before {
    top: 18px;
    height: 18px;
    width: 18px;
  }
}

@media screen and (min-width: 992px) {
  .ruiFeatureFloat {
    padding-top: 60px;
    margin-bottom: 100px;
  }

  .ruiFeatureFloat__card {
    -webkit-transform: translateY(100px);
         -o-transform: translateY(100px);
            transform: translateY(100px);
    padding: 55px 70px 60px;
  }
}

.ruiFeaturePanel {
  font-family: ripplingFontBook;
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-bottom: 30px;
}

.ruiFeaturePanel__inner {
  background-color: #22c8e3;
  padding: 60px 0 0;
  -webkit-box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
          box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
}

.ruiFeaturePanel__title {
  padding: 30px 0;
  color: #fff;
  font-size: 28px;
  line-height: 1.4;
  text-align: center;
}

.ruiFeaturePanel__caption {
  padding-bottom: 50px;
  color: #000;
  font-size: 14px;
  line-height: 1.4;
  width: 400px;
  max-width: 100%;
  margin: 0 auto;
  text-align: left;
}

.ruiFeaturePanel__feature {
  position: relative;
  overflow: hidden;
  padding-bottom: 40px;
  text-align: center;
}

.ruiFeaturePanel__featureTitle {
  color: #000;
  font-family: ripplingFontPrag;
  font-size: 13px;
  line-height: 17px;
  letter-spacing: 1.25px;
}

.ruiFeaturePanel__featureCaption {
  padding-top: 2px;
  color: #000;
  font-size: 16px;
  line-height: 22px;
  width: 250px;
  max-width: 100%;
  margin: 0 auto;
  text-align: left;
}

.ruiFeaturePanel__image {
  position: relative;
  text-align: center;
}

.ruiFeaturePanel__image img {
  width: 320px;
  -webkit-transform: translate(0, 26px);
       -o-transform: translate(0, 26px);
          transform: translate(0, 26px);
}

.ruiFeaturePanel__imageDesktop {
  display: none;
}

.ruiFeaturePanel__imageMobile {
  display: inline-block;
}

@media screen and (min-width: 768px) {
  .ruiFeaturePanel {
    padding-bottom: 40px;
  }

  .ruiFeaturePanel__image img {
    width: 600px;
    -webkit-transform: translate(0, 47px);
         -o-transform: translate(0, 47px);
            transform: translate(0, 47px);
  }
}

@media screen and (min-width: 1100px) {
  .ruiFeaturePanel {
    padding-bottom: 60px;
  }

  .ruiFeaturePanel__feature {
    padding-bottom: 100px;
  }

  .ruiFeaturePanel__feature.arrowMark:before {
    content: '';
    position: absolute;
    top: 6px;
    left: 280px;
    height: 1px;
    width: 100%;
    background-color: #000;
    z-index: 0;
  }

  .ruiFeaturePanel__feature.arrowSignIn:before {
    top: 15px;
  }

  .ruiFeaturePanel__feature.arrowOnboarding:before {
    top: 18px;
  }

  .ruiFeaturePanel__feature.arrowSync:before {
    top: 42px;
  }

  .ruiFeaturePanel__title {
    padding: 60px 0;
    text-align: left;
    font-size: 36px;
  }

  .ruiFeaturePanel__caption {
    padding-bottom: 100px;
    margin: 0 auto 0 0;
    text-align: left;
    font-size: 16px;
  }

  .ruiFeaturePanel__feature {
    text-align: left;
  }

  .ruiFeaturePanel__featureCaption {
    margin: 0 auto 0 0;
  }

  .ruiFeaturePanel__image {
    position: absolute;
    z-index: 0;
    width: 1280px;
    max-width: 100%;
    left: 50%;
    bottom: 0;
    -webkit-transform: translate(-50%, 0);
         -o-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
    text-align: right;
  }

  .ruiFeaturePanel__image img {
    width: 1120px;
    -webkit-transform: translate(300px, 22.5px);
         -o-transform: translate(300px, 22.5px);
            transform: translate(300px, 22.5px);
  }

  .ruiFeaturePanel__imageDesktop {
    display: inline-block;
  }

  .ruiFeaturePanel__imageMobile {
    display: none;
  }
}

.ruiDemoPanel {
  width: 100%;
  overflow: hidden;
  position: relative;
  background-color: #22c8e3;
  font-family: ripplingFontBook;
  padding: 50px 0 40px;
}

.ruiDemoPanel__content {
  width: 360px;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
}

.ruiDemoPanel__title {
  padding-bottom: 25px;
  color: #fff;
  font-size: 28px;
  line-height: 1.4;
}

.ruiDemoPanel__caption {
  padding-bottom: 40px;
  color: #000;
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
}

.ruiDemoPanel .ruiBtn {
  font-size: 14px;
  min-width: 240px;
}

.ruiDemoPanel__image {
  position: relative;
  text-align: center;
  margin: 40px auto 0;
  width: 320px;
  max-width: 100%;
}

.ruiDemoPanel__image img {
  height: auto;
  width: 100%;
}

.ruiDemoPanel__comment {
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
       -o-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  background-color: #d9f4f8;
  color: #000;
  width: 265px;
  max-width: 100%;
  font-family: ripplingFontBook;
  font-size: 11px;
  line-height: 1.3;
  text-align: left;
  height: 115px;
  -webkit-box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.15);
          box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.ruiDemoPanel__commentBox {
  position: absolute;
  left: 120%;
  width: 100%;
  top: 50%;
  -webkit-transform: translate(0, -50%);
       -o-transform: translate(0, -50%);
          transform: translate(0, -50%);
  padding: 0 25px;
  opacity: 0;
}

.ruiDemoPanel__commentBox--animate {
  -webkit-animation: showQuoteAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s 1 normal forwards, hideQuoteAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 5s 1 normal forwards;
       -o-animation: showQuoteAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s 1 normal forwards, hideQuoteAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 5s 1 normal forwards;
          animation: showQuoteAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s 1 normal forwards, hideQuoteAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 5s 1 normal forwards;
}

.ruiDemoPanel__commentMessage {
  max-height: 72px;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.ruiDemoPanel__commentAuthor {
  font-size: 9px;
  margin-top: 6px;
  font-family: ripplingFontMedium;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media screen and (min-width: 768px) {
  .ruiDemoPanel__image {
    width: 500px;
  }

  .ruiDemoPanel__comment {
    left: -100px;
    -webkit-transform: none;
         -o-transform: none;
            transform: none;
    bottom: 120px;
  }
}

@media screen and (min-width: 1100px) {
  .ruiDemoPanel {
    padding: 0;
  }

  .ruiDemoPanel:before {
    content: '';
    height: 100px;
    display: block;
    background-color: #fff;
  }

  .ruiDemoPanel .ruiContainer {
    padding-top: 90px;
    margin-bottom: -105px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }

  .ruiDemoPanel__content {
    text-align: left;
    -ms-flex-negative: 0;
        flex-shrink: 0;
  }

  .ruiDemoPanel__title {
    font-size: 38px;
  }

  .ruiDemoPanel__caption {
    font-size: 16px;
  }

  .ruiDemoPanel__image {
    width: 600px;
    margin: 0;
    -webkit-transform: translate(130px, -190px);
         -o-transform: translate(130px, -190px);
            transform: translate(130px, -190px);
  }

  .ruiDemoPanel__comment {
    padding: 40px 42px 25px;
    width: 355px;
    font-size: 14px;
    left: -80px;
    bottom: 90px;
    height: 162px;
  }

  .ruiDemoPanel__commentAuthor {
    margin-top: 15px;
  }
}

@media screen and (min-width: 1280px) {
  .ruiDemoPanel:before {
    height: 120px;
  }

  .ruiDemoPanel .ruiContainer {
    margin-bottom: -135px;
  }

  .ruiDemoPanel__image {
    width: 660px;
    -webkit-transform: translate(130px, -210px);
         -o-transform: translate(130px, -210px);
            transform: translate(130px, -210px);
  }
}

@-webkit-keyframes showQuoteAnim {
  0% {
    left: 120%;
    opacity: 0;
  }

  100% {
    left: 0;
    opacity: 1;
  }
}

@-o-keyframes showQuoteAnim {
  0% {
    left: 120%;
    opacity: 0;
  }

  100% {
    left: 0;
    opacity: 1;
  }
}

@keyframes showQuoteAnim {
  0% {
    left: 120%;
    opacity: 0;
  }

  100% {
    left: 0;
    opacity: 1;
  }
}

@-webkit-keyframes hideQuoteAnim {
  0% {
    left: 0;
    opacity: 1;
  }

  100% {
    left: -120%;
    opacity: 0;
  }
}

@-o-keyframes hideQuoteAnim {
  0% {
    left: 0;
    opacity: 1;
  }

  100% {
    left: -120%;
    opacity: 0;
  }
}

@keyframes hideQuoteAnim {
  0% {
    left: 0;
    opacity: 1;
  }

  100% {
    left: -120%;
    opacity: 0;
  }
}

.ruiImagePanel {
  background-color: #22c8e3;
  text-align: center;
  font-family: ripplingFontBook;
  padding-top: 40px;
  margin-bottom: 60px;
}

.ruiImagePanel__title {
  font-size: 2.2em;
  color: #fff;
  text-align: left;
}

.ruiImagePanel__caption {
  color: #000;
  margin: 15px auto 0;
  text-align: left;
}

.ruiImagePanel__image {
  width: 1180px;
  max-width: 100%;
  margin-top: -20px;
  -webkit-transform: translateY(60px);
       -o-transform: translateY(60px);
          transform: translateY(60px);
}

.ruiImagePanel--plain {
  padding-top: 0;
}

.ruiImagePanel--plain .ruiContainer {
  display: none;
}

@media screen and (min-width: 375px) {
  .ruiImagePanel {
    margin-bottom: 90px;
  }

  .ruiImagePanel__image {
    margin-top: -40px;
    -webkit-transform: translateY(90px);
         -o-transform: translateY(90px);
            transform: translateY(90px);
  }
}

@media screen and (min-width: 768px) {
  .ruiImagePanel {
    padding-top: 90px;
    margin-bottom: 150px;
  }

  .ruiImagePanel__caption {
    margin: 30px auto 0;
  }

  .ruiImagePanel__image {
    margin-top: -80px;
    -webkit-transform: translateY(150px);
         -o-transform: translateY(150px);
            transform: translateY(150px);
  }

  .ruiImagePanel--plain {
    padding-top: 10px;
  }

  .ruiImagePanel__title {
    text-align: center;
  }

  .ruiImagePanel__caption {
    text-align: center;
  }
}

@media screen and (min-width: 992px) {
  .ruiImagePanel {
    margin-bottom: 210px;
  }

  .ruiImagePanel__caption {
    margin: 30px auto 0;
  }

  .ruiImagePanel__image {
    margin-top: -120px;
    -webkit-transform: translateY(210px);
         -o-transform: translateY(210px);
            transform: translateY(210px);
  }
}

.ruiAccPricingBlock {
  background-color: #d4ff00;
  padding: 90px 0 0;
  margin-bottom: 40px;
  color: #000;
  text-align: center;
  font-family: ripplingFontBook;
}

.ruiAccPricingBlock .ruiContainer {
  padding: 0;
}

.ruiAccPricingBlock__title {
  padding: 0 15px;
  font-size: 2.125em;
  font-family: ripplingFontLight;
  margin-bottom: 60px;
}

.ruiAccPricingBlock__subBlockTitle {
  padding: 30px 15px 15px;
  font-size: 1.562em;
}

.ruiAccPricingBlock__subBlockCaption {
  padding: 0 15px;
  margin-bottom: -10px;
  font-size: 1em;
}

.ruiAccPricingBlock__options {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.ruiAccPricingBlock .ruiAccCard {
  -webkit-box-shadow: 0 3px 30px rgba(0, 0, 0, 0.16);
          box-shadow: 0 3px 30px rgba(0, 0, 0, 0.16);
  background: #fff;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin: 20px;
  padding: 40px 20px 60px;
  max-width: calc(100% - 40px);
}

.ruiAccPricingBlock .ruiAccCard__heading {
  text-transform: uppercase;
  font-family: ripplingFontPrag;
  font-size: .812em;
  letter-spacing: 1.25px;
}

.ruiAccPricingBlock .ruiAccCard__title {
  font-size: 2em;
  padding: 35px 0 45px;
}

.ruiAccPricingBlock .ruiAccCard__caption {
  font-size: 1.375em;
  line-height: 1.2;
  padding-bottom: 45px;
  margin: 0 auto;
  width: 335px;
  max-width: 100%;
}

.ruiAccPricingBlock .ruiAccCard__details {
  font-size: 1em;
  margin: 0 auto;
  width: 346px;
  max-width: 100%;
}

.ruiAccPricingBlock .ruiAccSummaryCard {
  -webkit-box-shadow: 0 3px 30px rgba(0, 0, 0, 0.16);
          box-shadow: 0 3px 30px rgba(0, 0, 0, 0.16);
  background: #fff;
  -webkit-transform: translateY(40px);
       -o-transform: translateY(40px);
          transform: translateY(40px);
  padding: 30px 20px;
  margin: 0 10px;
  width: calc(100% - 20px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.ruiAccPricingBlock .ruiAccSummaryCard__head {
  text-align: center;
  padding: 20px;
  width: 320px;
  max-width: 100%;
  margin-bottom: 30px;
}

.ruiAccPricingBlock .ruiAccSummaryCard__title {
  font-size: 2.375em;
  margin-bottom: 15px;
}

.ruiAccPricingBlock .ruiAccSummaryCard__caption {
  font-size: 1.125em;
}

.ruiAccPricingBlock .ruiAccSummaryCard__content {
  -webkit-box-flex: 100%;
      -ms-flex: 100%;
          flex: 100%;
}

.ruiAccPricingBlock .ruiAccSummaryCard__contentRow {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.ruiAccPricingBlock .ruiAccSummaryCard__contentRow > div {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.ruiAccPricingBlock .ruiAccSummaryCard__contentRow--head {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  text-transform: uppercase;
  font-family: ripplingFontPrag;
  font-size: .8em;
  letter-spacing: 1px;
  padding-bottom: 20px;
}

.ruiAccPricingBlock .ruiAccSummaryCard__contentRow--caption {
  font-size: .8em;
  padding: 0 10px;
}

.ruiAccPricingBlock .ruiAccSummaryCard__contentRow--caption > div:first-child {
  border-right: 1px solid #000;
}

.ruiAccPricingBlock .ruiAccSummaryCard__contentRow:nth-child(2) > div {
  padding-bottom: 20px;
}

.ruiAccPricingBlock .ruiAccSummaryCard__contentRow--footer {
  margin-top: 50px;
}

.ruiAccPricingBlock .ruiAccSummaryCard__contentRow--footer > div:nth-child(1) {
  text-transform: uppercase;
  font-family: ripplingFontPrag;
  font-size: .8em;
  letter-spacing: 1px;
}

.ruiAccPricingBlock .ruiAccSummaryCard__contentRowBtn {
  display: block;
  font-size: 1em;
  background-color: #d4ff00;
  padding: 10px 0;
  margin: 0;
}

@media screen and (min-width: 768px) {
  .ruiAccPricingBlock {
    margin-bottom: 90px;
  }

  .ruiAccPricingBlock__subBlockTitle {
    padding: 40px 15px 25px;
  }

  .ruiAccPricingBlock__subBlockCaption {
    margin-bottom: -20px;
  }

  .ruiAccPricingBlock .ruiAccSummaryCard {
    -webkit-transform: translateY(90px);
         -o-transform: translateY(90px);
            transform: translateY(90px);
    padding: 60px 60px 50px;
  }

  .ruiAccPricingBlock .ruiAccSummaryCard__title {
    margin-bottom: 30px;
  }

  .ruiAccPricingBlock .ruiAccSummaryCard__contentRow--head {
    font-size: .812em;
    letter-spacing: 1.25px;
    padding-bottom: 50px;
  }

  .ruiAccPricingBlock .ruiAccSummaryCard__contentRow--caption {
    font-size: 1.125em;
  }

  .ruiAccPricingBlock .ruiAccSummaryCard__contentRow:nth-child(2) > div {
    padding-bottom: 50px;
  }

  .ruiAccPricingBlock .ruiAccSummaryCard__contentRow--footer > div:nth-child(1) {
    font-size: .812em;
    letter-spacing: 1.25px;
  }

  .ruiAccPricingBlock .ruiAccSummaryCard__contentRowBtn {
    padding: 22px 0;
    margin: 0 12px;
    font-size: 1.562em;
  }
}

@media screen and (min-width: 992px) {
  .ruiAccPricingBlock .ruiAccSummaryCard__head {
    text-align: left;
    margin-bottom: 80px;
  }

  .ruiAccPricingBlock .ruiAccSummaryCard__content {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
}

.ruiPricingBlock {
  background: #000;
  -webkit-box-shadow: 0 3px 15px rgba(0, 0, 0, 0.25);
          box-shadow: 0 3px 15px rgba(0, 0, 0, 0.25);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.ruiPricingBlock .ruiPricingBlockHead {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  padding: 40px 15px 0;
  color: #fff;
  width: 305px;
  max-width: 100%;
  font-family: ripplingFontMedium;
  margin: 0 auto;
  text-align: center;
}

.ruiPricingBlock .ruiPricingBlockHead__icon {
  height: 96px;
  width: 96px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  display: inline-block;
}

.ruiPricingBlock .ruiPricingBlockHead__title {
  font-size: 16px;
  letter-spacing: 1.25px;
  text-transform: uppercase;
  font-family: ripplingFontPrag;
  padding: 20px 0 15px;
}

.ruiPricingBlock .ruiPricingBlockHead__price {
  font-family: ripplingFontMedium;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.ruiPricingBlock .ruiPricingBlockHead__currency {
  font-size: 18px;
  padding-top: 4px;
}

.ruiPricingBlock .ruiPricingBlockHead__amount {
  font-size: 27px;
  padding: 0 7px 0 5px;
}

.ruiPricingBlock .ruiPricingBlockHead__period {
  font-size: 15px;
}

.ruiPricingBlock .ruiPricingBlockList {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  color: #fff;
  padding: 40px 15px;
}

.ruiPricingBlock--payroll .ruiPricingBlockHead__icon {
  background-image: url("https://cdn.rippling.com/static/marketing/assets/product-icons/icon-hr.svg");
}

.ruiPricingBlock--payroll .ruiPricingBlockList .ruiList__item:before {
  background-image: url("https://cdn.rippling.com/static/marketing/assets/icon-check-green.svg");
}

.ruiPricingBlock--apps .ruiPricingBlockHead__icon {
  background-image: url("https://cdn.rippling.com/static/marketing/assets/product-icons/icon-apps.svg");
}

.ruiPricingBlock--apps .ruiPricingBlockList .ruiList__item:before {
  background-image: url("https://cdn.rippling.com/static/marketing/assets/icon-check-orange.svg");
}

.ruiPricingBlock--hardware .ruiPricingBlockHead__icon {
  background-image: url("https://cdn.rippling.com/static/marketing/assets/product-icons/icon-hardware.svg");
}

.ruiPricingBlock--hardware .ruiPricingBlockList .ruiList__item:before {
  background-image: url("https://cdn.rippling.com/static/marketing/assets/icon-check-pink.svg");
}

@media screen and (min-width: 768px) {
  .ruiPricingBlock .ruiPricingBlockHead {
    padding: 70px 60px;
    text-align: left;
  }

  .ruiPricingBlock .ruiPricingBlockHead__title {
    padding: 30px 0 25px;
  }

  .ruiPricingBlock .ruiPricingBlockHead__price {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }

  .ruiPricingBlock .ruiPricingBlockList {
    padding: 70px 30px 70px 0;
  }
}

.ruiPricingBlockFeature {
  background-color: #22c8e3;
  margin-bottom: 220px;
}

.ruiPricingBlockFeature .ruiPricingBlockFeatureHead {
  padding: 40px 0 60px;
  font-family: ripplingFontBook;
  text-align: center;
}

.ruiPricingBlockFeature .ruiPricingBlockFeatureHead__title {
  color: #fff;
  font-size: 2em;
}

.ruiPricingBlockFeature .ruiPricingBlockFeatureHead__caption {
  padding-top: 12px;
  color: #000;
  font-size: 1.25em;
}

.ruiPricingBlockFeature .ruiPricingBlockFeatureList {
  background-color: #fff;
  color: #000;
  -webkit-box-shadow: 0 4px 30px rgba(0, 0, 0, 0.16);
          box-shadow: 0 4px 30px rgba(0, 0, 0, 0.16);
  padding: 50px 15px 30px;
  font-family: ripplingFontBook;
  text-align: center;
  -webkit-transform: translateY(220px);
       -o-transform: translateY(220px);
          transform: translateY(220px);
  margin-top: -220px;
  position: relative;
}

.ruiPricingBlockFeature .ruiPricingBlockFeatureList__titleFloat {
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
       -o-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-color: #000;
  color: #fff;
  font-size: .875em;
  letter-spacing: 1.25px;
  text-transform: uppercase;
  font-family: ripplingFontPrag;
  padding: 12px 65px;
}

.ruiPricingBlockFeature .ruiPricingBlockFeatureList__title {
  font-size: 1em;
  letter-spacing: 1.25px;
  text-transform: uppercase;
  font-family: ripplingFontPrag;
  padding: 20px 0;
}

.ruiPricingBlockFeature .ruiPricingBlockFeatureList__caption {
  font-size: 1em;
}

.ruiPricingBlockFeature .ruiPricingBlockFeatureList__price {
  margin: 2.2em 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-family: ripplingFontMedium;
}

.ruiPricingBlockFeature .ruiPricingBlockFeatureList__currency {
  font-size: 18px;
  padding-top: 4px;
}

.ruiPricingBlockFeature .ruiPricingBlockFeatureList__amount {
  font-size: 27px;
  padding: 0 7px 0 5px;
}

.ruiPricingBlockFeature .ruiPricingBlockFeatureList__period {
  font-size: 15px;
}

.ruiPricingBlockFeature .ruiPricingBlockFeatureList .ruiList {
  width: 850px;
  max-width: 100%;
  margin: 0 auto;
  text-align: left;
}

.ruiPricingBlockFeature .ruiPricingBlockFeatureList .ruiList__item {
  -webkit-box-flex: 1;
      -ms-flex: auto;
          flex: auto;
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

@media screen and (min-width: 768px) {
  .ruiPricingBlockFeature .ruiPricingBlockFeatureHead {
    padding: 40px 0 120px;
  }

  .ruiPricingBlockFeature .ruiPricingBlockFeatureList {
    padding: 70px 15px 60px;
  }
}

.ruiPricingCoverPanel {
  position: relative;
}

.ruiPricingCoverPanel .ruiCoverPanel {
  height: initial !important;
  max-height: initial !important;
  padding-top: 10px;
  padding-bottom: 120px;
  background-color: transparent;
  text-align: center;
}

.ruiPricingCoverPanel .ruiCoverPanel .ruiBtn {
  margin: 40px 0 60px;
}

.ruiPricingCoverPanel .ruiContainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.ruiPricingCoverPanel:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120px;
  background-color: #22c8e3;
}

.ruiPricingCoverPanel__content {
  max-width: 100%;
}

.ruiPricingCoverPanel__float {
  color: #000;
  background-color: #fff;
  -webkit-box-shadow: 0 3px 30px rgba(0, 0, 0, 0.16);
          box-shadow: 0 3px 30px rgba(0, 0, 0, 0.16);
  width: 550px;
  max-width: 100%;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  padding: 3em 15px;
  text-align: center;
  font-family: ripplingFontBook;
  -webkit-transform: translateY(70px);
       -o-transform: translateY(70px);
          transform: translateY(70px);
  margin: -70px auto 0;
}

.ruiPricingCoverPanel__floatTitle {
  font-size: 1.125em;
  letter-spacing: 1.25px;
  text-transform: uppercase;
  font-family: ripplingFontPrag;
}

.ruiPricingCoverPanel__floatCaption {
  font-size: 1em;
  padding: 1.25em 0;
}

.ruiPricingCoverPanel__floatOr {
  font-family: ripplingFontMedium;
  font-size: .875em;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #22c8e3;
  padding: 1.25em 0 .75em;
}

.ruiPricingCoverPanel__floatPrice {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.ruiPricingCoverPanel__floatPrice--currency {
  padding-top: .8em;
  font-family: ripplingFontMedium;
  font-size: 2.187em;
}

.ruiPricingCoverPanel__floatPrice--amount {
  font-size: 6.875em;
  padding: 0 14px 0 10px;
}

.ruiPricingCoverPanel__floatPrice--period {
  padding-top: 1.1em;
  font-size: 1.31em;
  text-align: left;
}

.ruiPricingCoverPanel__floatPrice--periodBold {
  font-family: ripplingFontMedium;
}

.ruiPricingCoverPanel__floatFooter {
  padding: 1.5em 0 1.25em;
}

@media screen and (min-width: 1100px) {
  .ruiPricingCoverPanel .ruiContainer {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    text-align: left;
  }

  .ruiPricingCoverPanel__float {
    margin: -70px 0 0;
  }
}

.ruiTimeline {
  background-color: #000;
  font-family: ripplingFontBook;
  position: relative;
}

.ruiTimeline__item {
  padding: 30px 0 30px 40px;
  position: relative;
}

.ruiTimeline__item:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 2px;
  background-color: #fff;
}

.ruiTimeline__item--pre {
  position: absolute;
  padding: 0 !important;
  opacity: 0;
  left: 0;
  -webkit-transform: translate(0, -100%);
       -o-transform: translate(0, -100%);
          transform: translate(0, -100%);
}

.ruiTimeline__item--pre img {
  vertical-align: top;
  height: auto;
}

.ruiTimeline__item--pre:before {
  content: none;
}

.ruiTimeline__item--post {
  padding: 0 0 0 10px !important;
}

.ruiTimeline__item--post img {
  vertical-align: top;
  max-width: 100%;
  height: auto;
}

.ruiTimeline__item--post:before {
  content: none;
}

.ruiTimeline__item--wide {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.ruiTimeline__item--wide .ruiTimeline__itemLabel {
  display: none !important;
}

.ruiTimeline__item--wide .ruiTimeline__itemTitle {
  margin-right: 80px;
  font-size: 24px;
  width: 435px;
  max-width: 100%;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.ruiTimeline__item--wide .ruiTimeline__itemCaption {
  margin-right: 0;
}

.ruiTimeline__item--start .ruiTimeline__itemLabel {
  margin-bottom: 60px;
  font-size: 8px;
  font-family: ripplingFontPrag;
  letter-spacing: 1.25px;
  text-transform: uppercase;
  color: #000;
  background-color: #fff;
  padding: 6px 15px;
  display: inline-block;
  position: relative;
}

.ruiTimeline__item--start .ruiTimeline__itemLabel:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  top: 50%;
  left: 0;
  -webkit-transform: translate(-100%, -50%);
       -o-transform: translate(-100%, -50%);
          transform: translate(-100%, -50%);
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-right: 14px solid #fff;
  border-width: 11px;
}

.ruiTimeline__item--start .ruiTimeline__itemIcon {
  top: 40px;
  height: 34px;
  width: 34px;
}

.ruiTimeline__item--end:before {
  height: 50%;
}

.ruiTimeline__item--end .ruiTimeline__itemIcon {
  top: 50%;
  height: 30px;
  width: 30px;
}

.ruiTimeline__item--endArrow .ruiTimeline__itemIcon {
  border-radius: 0;
  height: 20px !important;
  width: 20px !important;
}

.ruiTimeline__item--collapsed.collapsible .ruiTimeline__itemTitle {
  font-size: 14px;
}

.ruiTimeline__item--collapsed.collapsible .ruiTimeline__itemContent {
  max-height: 0;
}

.ruiTimeline__item--collapsed.collapsible .ruiTimeline__itemIcon {
  left: 1px;
  -webkit-transform: translate(-50%, -50%) scale(0.25);
       -o-transform: translate(-50%, -50%) scale(0.25);
          transform: translate(-50%, -50%) scale(0.25);
  background-image: none !important;
  border: 10px solid #fff;
}

.ruiTimeline__item.collapsible .ruiTimeline__itemTitle {
  cursor: pointer;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.ruiTimeline__itemLabel {
  font-family: ripplingFontBook;
  color: #fff;
  font-size: 1.75em;
}

.ruiTimeline__itemIcon {
  height: 50px;
  width: 50px;
  position: absolute;
  top: 36px;
  left: 0;
  background-color: #000;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: contain;
  border: 0;
  border-radius: 50%;
  -webkit-transform: translate(-50%, -50%) scale(1);
       -o-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1);
  -webkit-transition: all 0.2s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.2s cubic-bezier(1, 0, 0, 1);
  transition: all 0.2s cubic-bezier(1, 0, 0, 1);
}

.ruiTimeline__itemTitle {
  font-family: ripplingFontPrag;
  color: #fff;
  text-transform: uppercase;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 1.25px;
  margin-bottom: 35px;
  -webkit-transition: all 0.2s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.2s cubic-bezier(1, 0, 0, 1);
  transition: all 0.2s cubic-bezier(1, 0, 0, 1);
}

.ruiTimeline__itemTitle--active {
  font-family: ripplingFontMedium;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}

.ruiTimeline__itemCaption {
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 435px;
  max-width: 100%;
  margin-right: 80px;
  margin-bottom: 40px;
}

.ruiTimeline__itemCaption--active {
  font-size: 12px;
}

.ruiTimeline__itemContent {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  overflow: hidden;
  -webkit-transition: all 0.2s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.2s cubic-bezier(1, 0, 0, 1);
  transition: all 0.2s cubic-bezier(1, 0, 0, 1);
  max-height: 1000px;
}

.ruiTimeline__itemLinks {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 100%;
  max-width: 100%;
}

.ruiTimeline__itemLinks a {
  color: #fff;
}

.ruiTimeline__itemLinks a .linkArrow {
  top: 5px !important;
}

.ruiTimeline__itemLinks a:hover {
  color: inherit;
}

.ruiTimeline .ruiContainer {
  padding-left: 45px;
  position: relative;
}

@media screen and (min-width: 768px) {
  .ruiTimeline__item {
    padding: 50px 0 50px 60px;
  }

  .ruiTimeline__item--post {
    padding: 0 !important;
  }

  .ruiTimeline__item--start .ruiTimeline__itemIcon {
    top: 68px;
    height: 42px;
    width: 42px;
  }

  .ruiTimeline__item--start .ruiTimeline__itemLabel {
    font-size: 12px;
    padding: 6.5px 40px 6.5px 15px;
  }

  .ruiTimeline__item--start .ruiTimeline__itemLabel:before {
    border-width: 14px;
  }

  .ruiTimeline__item--end .ruiTimeline__itemIcon {
    height: 36px;
    width: 36px;
  }

  .ruiTimeline__itemIcon {
    top: 60px;
    height: 90px;
    width: 90px;
  }

  .ruiTimeline__itemTitle {
    font-size: 18px;
  }

  .ruiTimeline__itemTitle--active {
    font-size: 24px;
  }

  .ruiTimeline__itemCaption {
    font-size: 18px;
  }

  .ruiTimeline__itemCaption--active {
    font-size: 16px;
  }
}

@media screen and (min-width: 900px) {
  .ruiTimeline__item--pre {
    opacity: 1;
  }
}

@media screen and (min-width: 1100px) {
  .ruiTimeline__item--start {
    padding-top: 110px;
  }

  .ruiTimeline__item--start .ruiTimeline__itemIcon {
    top: 122px;
  }

  .ruiTimeline__itemContent {
    overflow: visible;
  }

  .ruiTimeline__itemLinks {
    width: 435px;
    -webkit-transform: translate(0, -55px);
         -o-transform: translate(0, -55px);
            transform: translate(0, -55px);
  }
}

.ruiLinkBlock__title {
  margin-bottom: 12px;
  font-size: 10px;
  letter-spacing: .5px;
  font-family: ripplingFontMedium;
  text-transform: uppercase;
  text-align: left;
}

.ruiLinkBlock a {
  font-size: 10px;
  font-family: ripplingFontPrag;
  padding: 5px 0;
  letter-spacing: 1.25px;
  text-align: left;
  -webkit-transition: all 0.2s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.2s cubic-bezier(1, 0, 0, 1);
  transition: all 0.2s cubic-bezier(1, 0, 0, 1);
}

.ruiLinkBlock a .linkText {
  position: relative;
}

.ruiLinkBlock a .linkArrow {
  position: absolute;
  top: 50% !important;
  right: -15px;
  width: 0;
  height: 0;
  -webkit-transform: translate(0%, -50%);
       -o-transform: translate(0%, -50%);
          transform: translate(0%, -50%);
  display: inline-block;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid #fff;
  border-left-color: inherit;
  display: none;
}

.ruiLinkBlock a .linkCaption {
  overflow: hidden;
  display: block;
  max-height: 0;
  -webkit-transition: max-height 0.2s cubic-bezier(1, 0, 0, 1);
  -o-transition: max-height 0.2s cubic-bezier(1, 0, 0, 1);
  transition: max-height 0.2s cubic-bezier(1, 0, 0, 1);
  font-size: 7px;
  margin-top: 2px;
  letter-spacing: 0;
  font-family: ripplingFontBook;
  text-transform: none;
}

.ruiLinkBlock a:hover .linkCaption {
  max-height: 50px;
}

@media screen and (min-width: 768px) {
  .ruiLinkBlock__title {
    font-size: 12px;
    margin-bottom: 32px;
  }

  .ruiLinkBlock a {
    font-size: 14px;
  }

  .ruiLinkBlock a .linkArrow {
    display: block;
  }

  .ruiLinkBlock a .linkCaption {
    font-size: 11px;
  }
}

.ruiTabBar {
  padding: 0;
  background-color: #000;
  font-family: ripplingFontBold;
  font-size: 9px;
  line-height: 1.4;
  letter-spacing: 1.25px;
  height: 74px;
  overflow: hidden;
}

.ruiTabBar__content {
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  overflow-x: scroll;
}

.ruiTabBar__content::-webkit-scrollbar {
  width: 0;
}

.ruiTabBar__content::-webkit-scrollbar-thumb {
  background-clip: padding-box;
}

.ruiTabBar__item {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 100px;
  padding: 25px 4px;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  position: relative;
  cursor: pointer;
}

.ruiTabBar__item--active {
  color: inherit;
  pointer-events: none;
}

.ruiTabBar__item--active:after {
  content: '';
  position: absolute;
  height: 0;
  width: 0;
  bottom: 0;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
       -o-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-bottom: 14px solid #fff;
}

.ruiTabBar__item:hover {
  color: inherit;
}

@media screen and (min-width: 768px) {
  .ruiTabBar {
    height: 108px;
    font-size: 11px;
  }

  .ruiTabBar__item {
    min-width: 122px;
    padding: 40px 4px;
  }
}

.ruiAboutBlock {
  color: #000;
  font-family: ripplingFontBook;
  width: 100%;
  overflow: hidden;
}

.ruiAboutBlock__missionTitle {
  padding-top: 12rem;
  color: #22c8e3;
  font-size: 1.56em;
}

.ruiAboutBlock__mission {
  margin-top: .7rem;
  font-size: 2.37em;
  font-family: ripplingFontLight;
}

.ruiAboutBlock__missionCaption {
  margin-top: 4rem;
  font-size: 1em;
  line-height: 1.4;
  width: 415px;
  max-width: 100%;
}

.ruiAboutBlock__missionCaptionMini {
  margin-top: 7rem;
  font-size: 1.125em;
  line-height: 1.4;
  width: 320px;
  max-width: 100%;
}

.ruiAboutBlock__missionTitleMini {
  margin-top: 6.5rem;
  margin-bottom: 19.5rem;
  color: #22c8e3;
  font-size: 1.375em;
}

.ruiAboutBlock__timeline {
  border-left: 2px solid #BCBCBC;
  padding-left: 50px;
  padding-bottom: 20rem;
  position: relative;
}

.ruiAboutBlock__timeline:before {
  content: '';
  position: absolute;
  left: -2px;
  top: 0;
  -webkit-transform: translateX(-50%);
       -o-transform: translateX(-50%);
          transform: translateX(-50%);
  height: 22px;
  width: 22px;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid #BCBCBC;
}

.ruiAboutBlock__timelineTitle {
  font-size: 2.25em;
  font-family: ripplingFontLight;
  -webkit-transform: translateY(-14px);
       -o-transform: translateY(-14px);
          transform: translateY(-14px);
}

.ruiAboutBlock__timelineCaption {
  margin-top: 1rem;
  font-size: 1em;
  line-height: 1.4;
  width: 442px;
  max-width: 100%;
}

.ruiAboutBlock__circle {
  position: absolute;
  border-radius: 50%;
  background-color: #F7F7F7;
  z-index: -1;
}

.ruiAboutBlock__circleBlock {
  display: none;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: absolute;
  text-align: center;
  color: #000;
  font-family: ripplingFontPrag;
  font-size: 8px;
  letter-spacing: 1.25px;
  text-transform: uppercase;
  z-index: -1;
}

.ruiAboutBlock__circleBlock:before {
  content: '';
  border-radius: 50%;
  margin: 10px auto;
}

.ruiAboutBlock__circleBlock.green:before {
  background-color: #d4ff00;
}

.ruiAboutBlock__circleBlock.orange:before {
  background-color: #ff7605;
}

.ruiAboutBlock__circleBlock.pink:before {
  background-color: #f10054;
}

.ruiAboutBlock__circleBlock.reversed {
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
}

.ruiAboutBlock .ruiContainer {
  position: relative;
}

.ruiAboutBlock .ruiContainer .ruiAboutCircle0 {
  top: 2rem;
  right: 9.3rem;
  height: 2.25rem;
  width: 2.25rem;
}

.ruiAboutBlock .ruiContainer .ruiAboutCircle1 {
  top: 9.75rem;
  right: 29.3rem;
  height: 3.375rem;
  width: 3.375rem;
}

.ruiAboutBlock .ruiContainer .ruiAboutCircle2 {
  top: 13.12rem;
  right: 4.5rem;
  height: 1rem;
  width: 1rem;
}

.ruiAboutBlock .ruiContainer .ruiAboutCircle3 {
  top: 8.75rem;
  right: -10px;
  -webkit-transform: translate(100%, 0);
       -o-transform: translate(100%, 0);
          transform: translate(100%, 0);
  height: 14.6rem;
  width: 14.6rem;
}

.ruiAboutBlock .ruiContainer .ruiAboutCircle4 {
  top: 16.6rem;
  right: 12.5rem;
  height: 4.1rem;
  width: 4.1rem;
}

.ruiAboutBlock .ruiContainer .ruiAboutCircle5 {
  top: 18.12rem;
  left: -1.2rem;
  -webkit-transform: translate(-100%, 0);
       -o-transform: translate(-100%, 0);
          transform: translate(-100%, 0);
  height: 10.5rem;
  width: 10.5rem;
}

.ruiAboutBlock .ruiContainer .ruiAboutCircle6 {
  top: 19.37rem;
  left: 31rem;
  height: 2.5rem;
  width: 2.5rem;
}

.ruiAboutBlock .ruiContainer .ruiAboutCircle7 {
  top: 25rem;
  left: 18.125rem;
  height: 5rem;
  width: 5rem;
}

.ruiAboutBlock .ruiContainer .ruiAboutCircle8 {
  top: 25.625rem;
  right: 0rem;
  height: 5rem;
  width: 5rem;
}

.ruiAboutBlock .ruiContainer .ruiAboutCircle9 {
  top: 30.625rem;
  left: 9.5rem;
  height: 1rem;
  width: 1rem;
}

.ruiAboutBlock .ruiContainer .ruiAboutCircle10 {
  top: 32.625rem;
  left: 32.625rem;
  height: .5rem;
  width: .5rem;
}

.ruiAboutBlock .ruiContainer .ruiAboutCircle11 {
  top: 33.125rem;
  right: 20.5rem;
  height: 2.1rem;
  width: 2.1rem;
}

.ruiAboutBlock .ruiContainer .ruiAboutCircle12 {
  top: 35rem;
  left: -1rem;
  height: 2.2rem;
  width: 2.2rem;
  -webkit-transform: translate(-100%, 0);
       -o-transform: translate(-100%, 0);
          transform: translate(-100%, 0);
}

.ruiAboutBlock .ruiContainer .ruiAboutCircle13 {
  top: 39.68rem;
  right: 12.18rem;
  height: 12.5rem;
  width: 12.5rem;
  opacity: .4;
}

.ruiAboutBlock .ruiContainer .ruiAboutCircle14 {
  top: 51.25rem;
  right: -1rem;
  height: 4rem;
  width: 4rem;
  opacity: .4;
}

.ruiAboutBlock .ruiContainer .ruiAboutCircle15 {
  top: 53.75rem;
  left: 19.37rem;
  height: 1.5rem;
  width: 1.5rem;
}

.ruiAboutBlock .ruiContainer .ruiAboutCircle16 {
  top: 57.8rem;
  left: 16.2rem;
  height: 1rem;
  width: 1rem;
}

.ruiAboutBlock .ruiContainer .ruiAboutCircle17 {
  top: 62.18rem;
  right: 6rem;
  height: .5rem;
  width: .5rem;
}

.ruiAboutBlock .ruiContainer .ruiAboutCircle18 {
  top: 54.75rem;
  right: -3rem;
  height: 8rem;
  width: 8rem;
  -webkit-transform: translate(100%, 0);
       -o-transform: translate(100%, 0);
          transform: translate(100%, 0);
}

.ruiAboutBlock .ruiContainer .ruiAboutCircle19 {
  top: 59.5rem;
  left: -2rem;
  height: 4rem;
  width: 4rem;
  -webkit-transform: translate(-100%, 0);
       -o-transform: translate(-100%, 0);
          transform: translate(-100%, 0);
}

.ruiAboutBlock .ruiContainer .ruiAboutCircle20 {
  top: 59.37rem;
  left: 30.62rem;
  height: 8.25rem;
  width: 8.25rem;
  opacity: .4;
}

.ruiAboutBlock .ruiContainer .ruiAboutCircle21 {
  top: 66.25rem;
  left: 19.37rem;
  height: 2.6rem;
  width: 2.6rem;
}

.ruiAboutBlock .ruiContainer .ruiAboutCircle22 {
  top: 69.25rem;
  right: 0;
  height: 2.75rem;
  width: 2.75rem;
  -webkit-transform: translate(100%, 0);
       -o-transform: translate(100%, 0);
          transform: translate(100%, 0);
}

.ruiAboutBlock .ruiContainer .ruiAboutCircle23 {
  top: 75rem;
  left: 20.3rem;
  height: 1.5rem;
  width: 1.5rem;
}

.ruiAboutBlock .ruiContainer .ruiAboutCircle24 {
  top: 76.875rem;
  left: 0;
  height: 1rem;
  width: 1rem;
  -webkit-transform: translate(-100%, 0);
       -o-transform: translate(-100%, 0);
          transform: translate(-100%, 0);
}

.ruiAboutBlock .ruiContainer .ruiAboutCircle25 {
  top: 80rem;
  left: 21.25rem;
  height: 2rem;
  width: 2rem;
}

.ruiAboutBlock .ruiContainer .ruiAboutCircle26 {
  top: 85rem;
  left: 33.125rem;
  height: 3.5rem;
  width: 3.5rem;
}

.ruiAboutBlock .ruiContainer .ruiAboutCircle27 {
  top: 82.5rem;
  right: 1em;
  height: 7.375rem;
  width: 7.375rem;
  -webkit-transform: translate(100%, 0);
       -o-transform: translate(100%, 0);
          transform: translate(100%, 0);
}

.ruiAboutBlock .ruiContainer .ruiAboutCircle28 {
  bottom: 4rem;
  left: 50%;
  height: 41.25rem;
  width: 41.25rem;
  -webkit-transform: translate(-50%, 100%);
       -o-transform: translate(-50%, 100%);
          transform: translate(-50%, 100%);
}

.ruiAboutBlock .ruiContainer .ruiAboutCircle29 {
  bottom: 0;
  left: 6.8rem;
  height: 4.2rem;
  width: 4.2rem;
  -webkit-transform: translate(0, 50%);
       -o-transform: translate(0, 50%);
          transform: translate(0, 50%);
}

.ruiAboutBlock .ruiContainer .ruiAboutCircleBlock0 {
  top: 20rem;
  right: 22.5rem;
}

.ruiAboutBlock .ruiContainer .ruiAboutCircleBlock0:before {
  height: 5.3rem;
  width: 5.3rem;
}

.ruiAboutBlock .ruiContainer .ruiAboutCircleBlock1 {
  top: 31.25rem;
  right: 8rem;
}

.ruiAboutBlock .ruiContainer .ruiAboutCircleBlock1:before {
  height: 3.25rem;
  width: 3.25rem;
}

.ruiAboutBlock .ruiContainer .ruiAboutCircleBlock2 {
  top: 33.75rem;
  left: 29rem;
}

.ruiAboutBlock .ruiContainer .ruiAboutCircleBlock2:before {
  height: 5rem;
  width: 5rem;
}

.ruiAboutBlock .ruiContainer .ruiAboutCircleBlock3 {
  top: 49.3rem;
  right: 25.6rem;
}

.ruiAboutBlock .ruiContainer .ruiAboutCircleBlock3:before {
  height: 4rem;
  width: 4rem;
}

.ruiAboutBlock .ruiContainer .ruiAboutCircleBlock4 {
  top: 51.62rem;
  right: 6.87rem;
}

.ruiAboutBlock .ruiContainer .ruiAboutCircleBlock4:before {
  height: 3.8rem;
  width: 3.8rem;
}

.ruiAboutBlock .ruiContainer .ruiAboutCircleBlock5 {
  top: 52.5rem;
  left: 6.25rem;
}

.ruiAboutBlock .ruiContainer .ruiAboutCircleBlock5:before {
  height: 3.8rem;
  width: 3.8rem;
}

.ruiAboutBlock .ruiContainer .ruiAboutCircleBlock6 {
  top: 60rem;
  left: 24.75rem;
}

.ruiAboutBlock .ruiContainer .ruiAboutCircleBlock6:before {
  height: 2.2rem;
  width: 2.2rem;
}

.ruiAboutBlock .ruiContainer .ruiAboutCircleBlock7 {
  top: 62rem;
  right: 1.2rem;
}

.ruiAboutBlock .ruiContainer .ruiAboutCircleBlock7:before {
  height: 3.2rem;
  width: 3.2rem;
}

.ruiAboutBlock .ruiContainer .ruiAboutCircleBlock8 {
  top: 63.124rem;
  right: 11.625rem;
}

.ruiAboutBlock .ruiContainer .ruiAboutCircleBlock8:before {
  height: 4.3rem;
  width: 4.3rem;
}

.ruiAboutBlock .ruiContainer .ruiAboutCircleBlock9 {
  top: 68.75rem;
  right: 25rem;
}

.ruiAboutBlock .ruiContainer .ruiAboutCircleBlock9:before {
  height: 6.6rem;
  width: 6.6rem;
}

.ruiAboutBlock .ruiContainer .ruiAboutCircleBlock10 {
  top: 73.75rem;
  right: 3.75rem;
}

.ruiAboutBlock .ruiContainer .ruiAboutCircleBlock10:before {
  height: 4.5rem;
  width: 4.5rem;
}

.ruiAboutBlock .ruiContainer .ruiAboutCircleBlock11 {
  top: 80.125rem;
  left: 6.125rem;
}

.ruiAboutBlock .ruiContainer .ruiAboutCircleBlock11:before {
  height: 8.6rem;
  width: 8.6rem;
}

.ruiAboutBlock .ruiContainer .ruiAboutCircleBlock12 {
  top: 81.375rem;
  right: 22.25rem;
}

.ruiAboutBlock .ruiContainer .ruiAboutCircleBlock12:before {
  height: 5.5rem;
  width: 5.5rem;
}

.ruiAboutBlock .ruiContainer .ruiAboutCircleBlock13 {
  bottom: 5rem;
  left: 24.5rem;
}

.ruiAboutBlock .ruiContainer .ruiAboutCircleBlock13:before {
  height: 3.5rem;
  width: 3.5rem;
}

.ruiAboutBlock .ruiContainer .ruiAboutCircleBlock14 {
  bottom: -3rem;
  right: 5.625rem;
}

.ruiAboutBlock .ruiContainer .ruiAboutCircleBlock14:before {
  height: 8.25rem;
  width: 8.25rem;
}

.ruiAboutBlock .ruiContainer .ruiAboutCircleBlock15 {
  bottom: 1rem;
  left: 50%;
}

.ruiAboutBlock .ruiContainer .ruiAboutCircleBlock15:before {
  height: 2.25rem;
  width: 2.25rem;
}

@media screen and (min-width: 900px) {
  .ruiAboutBlock__circleBlock {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

.ruiNavbar .ruiContainer {
  padding-top: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.ruiNavbar__logo a {
  width: 210px;
  height: 28px;
  cursor: pointer;
  display: block;
  background-image: url("https://cdn.rippling.com/static/blog/rippling-blog-logo.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

@media screen and (min-width: 768px) {
  .ruiNavbar .ruiContainer {
    padding-top: 60px;
  }
}

.ruiFooter {
  background-color: #000;
  padding: 10px 0;
  font-family: ripplingFontBook;
}

.ruiFooter .ruiContainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.ruiFooter__menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 24px 0 0;
  width: 100%;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.ruiFooter__menu .block {
  max-width: 100%;
  width: 260px;
  padding-bottom: 30px;
}

.ruiFooter__menu .block__listHeader {
  color: #ffcc1c;
  font-weight: bold;
  margin: 0 0 8px 0;
  padding: 0;
}

.ruiFooter__menu .block__list {
  margin: 0;
  padding: 0;
}

.ruiFooter__menu .block__list > li {
  padding-top: 10px;
}

.ruiFooter__menu .block__list > li a {
  color: #fff;
  font-family: ripplingFontMedium;
  text-decoration: none;
  line-height: 18px;
}

.ruiFooter__menu .block__list > li a:hover {
  border-bottom: 1px solid #fff;
}

.ruiFooter__logo {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 12px 0;
  width: 100%;
}

.ruiFooter__brand a {
  background-image: url("https://cdn.rippling.com/static/rippling_logo_small_light.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: block;
  height: 44px;
  width: 44px;
}

.ruiFooter__social > ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  margin: 0;
}

.ruiFooter__socialLink {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.ruiFooter__socialLink:not(:last-child) {
  padding-right: 24px;
}

.ruiFooter__socialLink a:before {
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  content: "";
  display: block;
  height: 18px;
  width: 18px;
}

.ruiFooter__socialLink--facebook a:before {
  background-image: url("https://cdn.rippling.com/static/marketing/footer/facebook.svg");
}

.ruiFooter__socialLink--twitter a:before {
  background-image: url("https://cdn.rippling.com/static/marketing/footer/twitter.svg");
}

.ruiFooter__socialLink--instagram a:before {
  background-image: url("https://cdn.rippling.com/static/marketing/footer/instagram.svg");
}

.ruiFooter__links {
  color: #9a9a9a;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 0.875em;
  font-family: ripplingFontNormal;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
}

.ruiFooter__copyRight {
  margin: 20px 0;
}

.ruiFooter__bottomMenu ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  list-style: none;
  padding: 0;
  margin: 20px 0;
}

.ruiFooter__bottomMenu ul li a {
  text-decoration: none !important;
  color: #9a9a9a;
  white-space: nowrap;
}

.ruiFooter__bottomMenu ul li:not(:last-child) {
  margin-right: 20px;
}

@media screen and (min-width: 768px) {
  .ruiFooter {
    padding: 30px 0;
  }

  .ruiFooter__logo__brand a {
    width: 50px;
    height: 50px;
  }
}

.ruiFeaturePost .ruiContainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.ruiFeaturePost__image {
  height: 290px;
  width: 290px;
  border-radius: 5px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin: 10px 10px 40px;
}

.ruiFeaturePost__content {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 290px;
  padding-left: 0;
  margin: 10px;
}

.ruiFeaturePost__category {
  text-transform: uppercase;
  font-family: ripplingFontBold;
  font-size: 0.75em;
  letter-spacing: 1.2px;
  color: #939393;
}

.ruiFeaturePost__category a {
  text-decoration: none !important;
  color: #939393;
}

.ruiFeaturePost__category a:not(:first-child) {
  margin-left: 5px;
}

.ruiFeaturePost__title {
  font-family: ripplingFontMedium;
  font-size: 20px;
  color: #424242;
  margin-top: 12px;
}

.ruiFeaturePost__title a {
  text-decoration: none !important;
  color: #424242;
}

.ruiFeaturePost__title a[href="#"] {
  pointer-events: none;
  cursor: default;
}

.ruiFeaturePost__caption {
  font-family: ripplingFontBook;
  font-size: 1em;
  color: #000;
  margin-top: 25px;
}

.ruiFeaturePost__info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-transform: uppercase;
  font-family: ripplingFontBold;
  font-size: 0.75em;
  letter-spacing: 1.2px;
  color: #939393;
  margin-top: 16px;
}

.ruiFeaturePost__info > div:not(:last-child):after {
  content: "";
  border-right: 1px solid #ededed;
  padding-left: 12px;
  margin-right: 12px;
}

@media screen and (min-width: 768px) {
  .ruiFeaturePost__image {
    height: 320px;
    width: 320px;
    margin: 10px;
  }

  .ruiFeaturePost__content {
    padding-left: 10px;
  }

  .ruiFeaturePost__title {
    font-size: 28px;
    margin-top: 16px;
  }

  .ruiFeaturePost__caption {
    margin-top: 35px;
  }

  .ruiFeaturePost__info {
    margin-top: 24px;
  }
}

@media screen and (min-width: 992px) {
  .ruiFeaturePost__image {
    height: 490px;
    width: 490px;
  }

  .ruiFeaturePost__title {
    font-size: 42px;
  }

  .ruiFeaturePost__caption {
    margin-top: 50px;
  }
}

.ruiPostList .ruiContainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media screen and (min-width: 1050px) {
  .ruiPostList .ruiContainer {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
}

.ruiPostItem {
  padding: 0 15px;
  margin: 30px 0;
  width: 350px;
  max-width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.ruiPostItem__image {
  height: 210px;
  border-radius: 5px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.ruiPostItem__category {
  text-transform: uppercase;
  font-family: ripplingFontBold;
  font-size: 0.75em;
  letter-spacing: 1.2px;
  color: #939393;
  margin-top: 20px;
}

.ruiPostItem__category a {
  text-decoration: none !important;
  color: #939393;
}

.ruiPostItem__category a:not(:first-child) {
  margin-left: 5px;
}

.ruiPostItem__title {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-size: 1.625em;
  font-family: ripplingFontMedium;
  color: #424242;
  margin-top: 10px;
}

.ruiPostItem__title a {
  text-decoration: none !important;
  color: #424242;
}

.ruiPostItem__info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-transform: uppercase;
  font-family: ripplingFontBold;
  font-size: 0.75em;
  letter-spacing: 1.2px;
  color: #939393;
  margin-top: 16px;
}

.ruiPostItem__info > div:not(:last-child):after {
  content: "";
  border-right: 1px solid #ededed;
  padding-left: 12px;
  margin-right: 12px;
}

@media screen and (min-width: 1050px) {
  .ruiPostItem {
    border-right: 1px solid #ededed;
  }

  .ruiPostItem:nth-child(3n),
  .ruiPostItem:last-child {
    border-right: none;
  }
}

.ruiCategoryList {
  height: 76px;
  position: relative;
  overflow: hidden;
}

.ruiCategoryList:after {
  content: "";
  position: absolute;
  height: 1px;
  width: 100%;
  bottom: 0;
  left: 0;
  background-color: #ededed;
  z-index: 1;
}

.ruiCategoryList .ruiContainer {
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.ruiCategoryList .ruiContainer ul {
  list-style: none;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin: 0 auto;
  padding: 0;
  overflow: auto;
  max-width: 100%;
}

.ruiCategoryList .ruiContainer ul li a {
  color: #939393;
  text-decoration: none !important;
  padding: 30px 0;
  margin: 0 15px;
  font-family: ripplingFontBold;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  white-space: nowrap;
  position: relative;
  display: block;
}

.ruiCategoryList .ruiContainer ul li.current-cat a {
  color: #22c8e3;
}

.ruiCategoryList .ruiContainer ul li.current-cat a:after {
  content: "";
  position: absolute;
  height: 1px;
  width: 100%;
  bottom: 0;
  left: 0;
  background-color: #22c8e3;
  z-index: 10;
}

.referralBar {
  text-align: center;
  background: black;
  color: white;
  font-family: ripplingFontBold;
  padding: 10px;
  font-size: 0.8rem;
}

.gift-icon::before {
  content: '\F06B';
  font-family: fontIcons;
  font-style: normal;
}

.ruiDeskBlock {
  text-align: center;
  position: relative;
  padding-bottom: 40px;
}

.ruiDeskBlock__title {
  font-family: ripplingFontBook;
  font-size: 2.5em;
  padding-bottom: 30px;
  text-align: left;
}

.ruiDeskBlock__caption {
  font-family: ripplingFontBook;
  font-size: 1em;
  width: 650px;
  max-width: 100%;
  margin: 0 auto;
  text-align: left;
}

.ruiDeskBlock__image {
  width: 980px;
  max-width: 100%;
  margin-top: 130px;
}

.ruiDeskBlock:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 257px;
  background-color: #f7f7f7;
  z-index: -1;
}

@media screen and (min-width: 768px) {
  .ruiDeskBlock__title {
    text-align: center;
  }

  .ruiDeskBlock__caption {
    text-align: center;
  }
}

.ruiCheckListBlock {
  background-color: #000;
  color: #fff;
}

.ruiCheckListBlock__title {
  text-align: center;
  margin: 0 auto;
  padding: 110px 0 50px;
  font-family: ripplingFontBook;
  font-size: 2.3em;
  width: 610px;
  max-width: 100%;
}

.ruiCheckListBlock__paper {
  margin: 0 auto;
  padding: 10px 40px 10px;
  width: 500px;
  max-width: 100%;
  background-color: #fff;
  color: #000;
}

.ruiCheckListBlock__paperTitle {
  padding: 20px 0;
  text-align: center;
  border-bottom: 2px solid #707070;
  margin-bottom: 25px;
}

.ruiCheckListBlock__paperTitleText {
  font-size: 18px;
  font-family: ripplingFontPrag;
  text-transform: uppercase;
  position: relative;
}

.ruiCheckListBlock__paperTitleText:before {
  content: '';
  position: absolute;
  left: -50px;
  top: -10px;
  height: 40px;
  width: 40px;
  background-image: url(https://cdn.rippling.com/static/marketing/assets/icon-spinner.svg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
}

.ruiCheckListBlock__paperItem {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 18px;
  font-family: ripplingFontBook;
  padding: 8px 0;
}

.ruiCheckListBlock__paperItemText {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.ruiCheckListBlock__paperItemCheck {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  height: 22px;
  width: 22px;
  margin-right: 18px;
  background-color: #EBEAEB;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.ruiCheckListBlock--animate .ruiCheckListBlock__paperItemCheck--0 {
  -webkit-animation: showCheckBack 0.1s linear 0s 1 normal forwards;
       -o-animation: showCheckBack 0.1s linear 0s 1 normal forwards;
          animation: showCheckBack 0.1s linear 0s 1 normal forwards;
}

.ruiCheckListBlock--animate .ruiCheckListBlock__paperItemCheck--1 {
  -webkit-animation: showCheckBack 0.1s linear 0.6s 1 normal forwards;
       -o-animation: showCheckBack 0.1s linear 0.6s 1 normal forwards;
          animation: showCheckBack 0.1s linear 0.6s 1 normal forwards;
}

.ruiCheckListBlock--animate .ruiCheckListBlock__paperItemCheck--2 {
  -webkit-animation: showCheckBack 0.1s linear 1.2s 1 normal forwards;
       -o-animation: showCheckBack 0.1s linear 1.2s 1 normal forwards;
          animation: showCheckBack 0.1s linear 1.2s 1 normal forwards;
}

.ruiCheckListBlock--animate .ruiCheckListBlock__paperItemCheck--3 {
  -webkit-animation: showCheckBack 0.1s linear 1.8s 1 normal forwards;
       -o-animation: showCheckBack 0.1s linear 1.8s 1 normal forwards;
          animation: showCheckBack 0.1s linear 1.8s 1 normal forwards;
}

.ruiCheckListBlock--animate .ruiCheckListBlock__paperItemCheck--4 {
  -webkit-animation: showCheckBack 0.1s linear 2.4s 1 normal forwards;
       -o-animation: showCheckBack 0.1s linear 2.4s 1 normal forwards;
          animation: showCheckBack 0.1s linear 2.4s 1 normal forwards;
}

.ruiCheckListBlock--animate .ruiCheckListBlock__paperItemCheck--5 {
  -webkit-animation: showCheckBack 0.1s linear 3s 1 normal forwards;
       -o-animation: showCheckBack 0.1s linear 3s 1 normal forwards;
          animation: showCheckBack 0.1s linear 3s 1 normal forwards;
}

.ruiCheckListBlock--animate .ruiCheckListBlock__paperItemCheck--6 {
  -webkit-animation: showCheckBack 0.1s linear 3.6s 1 normal forwards;
       -o-animation: showCheckBack 0.1s linear 3.6s 1 normal forwards;
          animation: showCheckBack 0.1s linear 3.6s 1 normal forwards;
}

.ruiCheckListBlock--animate .ruiCheckListBlock__paperItemCheck--7 {
  -webkit-animation: showCheckBack 0.1s linear 4.2s 1 normal forwards;
       -o-animation: showCheckBack 0.1s linear 4.2s 1 normal forwards;
          animation: showCheckBack 0.1s linear 4.2s 1 normal forwards;
}

.ruiCheckListBlock--animate .ruiCheckListBlock__paperTitleText:before {
  opacity: 1;
  -webkit-animation: doneCheck .1s linear 5s 1 normal forwards;
       -o-animation: doneCheck .1s linear 5s 1 normal forwards;
          animation: doneCheck .1s linear 5s 1 normal forwards;
}

@-webkit-keyframes doneCheck {
  to {
    background-size: 30px;
    background-image: url(https://cdn.rippling.com/static/marketing/assets/icon-success.svg);
  }
}

@-o-keyframes doneCheck {
  to {
    background-size: 30px;
    background-image: url(https://cdn.rippling.com/static/marketing/assets/icon-success.svg);
  }
}

@keyframes doneCheck {
  to {
    background-size: 30px;
    background-image: url(https://cdn.rippling.com/static/marketing/assets/icon-success.svg);
  }
}

@-webkit-keyframes showCheckBack {
  to {
    background-image: url(https://cdn.rippling.com/static/marketing/assets/icon-check-sqaure.svg);
  }
}

@-o-keyframes showCheckBack {
  to {
    background-image: url(https://cdn.rippling.com/static/marketing/assets/icon-check-sqaure.svg);
  }
}

@keyframes showCheckBack {
  to {
    background-image: url(https://cdn.rippling.com/static/marketing/assets/icon-check-sqaure.svg);
  }
}

*,
::after,
::before {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-size: 12px;
}

body h1 {
  font-size: 2.375em;
  margin: 0;
  padding: 0;
  font-weight: normal;
}

body h2 {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

body h3 {
  font-size: 1em;
  margin: 0;
  padding: 0;
  font-weight: normal;
}

body h4 {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

body p {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

body ul.ruiList {
  list-style: none;
  padding-left: 20px;
}

body ul.ruiList li {
  position: relative;
  padding: 8px 0 8px 10px;
}

body ul.ruiList li:before {
  content: '';
  position: absolute;
  left: -20px;
  top: 9px;
  height: 20px;
  width: 20px;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/icon-check.svg");
  background-size: contain;
  background-repeat: no-repeat;
}

@media only screen and (min-width: 768px) {
  body {
    font-size: 16px;
  }
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

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

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

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

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

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

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

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

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

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

/**
 * Remove the inner border and padding in Firefox.
 */

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

/**
 * Restore the focus styles unset by the previous rule.
 */

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

/**
 * Correct the padding in Firefox.
 */

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

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

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

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

/**
 * figure CSS
 */

figure {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

@font-face {
  font-family: "fontIcons";
  src: url("https://cdn.rippling.com/static/marketing/fonts/FontAwesome.woff") format("woff");
}

/**
 * TYPOGRAPHY
 */

/**
 * COLORS
 */

/**
 * TYPOGRAPHY
 */

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/*---------------------------
## Animation components
---------------------------*/

.checkAnimWrapper {
  position: relative;
}

.checkAnimWrapper img {
  width: 295px;
}

.checkAnimWrapper .checkAnim {
  position: absolute;
  top: 0;
  left: 0;
  height: 16px;
  width: 16px;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/icon-check-sqaure.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
}

.checkAnimWrapper .checkAnim--a {
  top: 69px;
  left: 48px;
}

.checkAnimWrapper .checkAnim--b {
  top: 98px;
  left: 48px;
}

.checkAnimWrapper .checkAnim--c {
  top: 127px;
  left: 48px;
}

.checkAnimWrapper .checkAnim--d {
  top: 159px;
  left: 48px;
}

.checkAnimWrapper .checkAnim--e {
  top: 185px;
  left: 48px;
}

.checkAnimWrapper--animate .checkAnim--a {
  -webkit-animation: showPop 0.1s linear 0.15s 1 normal forwards;
       -o-animation: showPop 0.1s linear 0.15s 1 normal forwards;
          animation: showPop 0.1s linear 0.15s 1 normal forwards;
}

.checkAnimWrapper--animate .checkAnim--b {
  -webkit-animation: showPop 0.1s linear 0.3s 1 normal forwards;
       -o-animation: showPop 0.1s linear 0.3s 1 normal forwards;
          animation: showPop 0.1s linear 0.3s 1 normal forwards;
}

.checkAnimWrapper--animate .checkAnim--c {
  -webkit-animation: showPop 0.1s linear 0.45s 1 normal forwards;
       -o-animation: showPop 0.1s linear 0.45s 1 normal forwards;
          animation: showPop 0.1s linear 0.45s 1 normal forwards;
}

.checkAnimWrapper--animate .checkAnim--d {
  -webkit-animation: showPop 0.1s linear 0.6s 1 normal forwards;
       -o-animation: showPop 0.1s linear 0.6s 1 normal forwards;
          animation: showPop 0.1s linear 0.6s 1 normal forwards;
}

.checkAnimWrapper--animate .checkAnim--e {
  -webkit-animation: showPop 0.1s linear 0.75s 1 normal forwards;
       -o-animation: showPop 0.1s linear 0.75s 1 normal forwards;
          animation: showPop 0.1s linear 0.75s 1 normal forwards;
}

@media screen and (min-width: 768px) {
  .checkAnimWrapper .checkAnim {
    height: 25px;
    width: 25px;
  }

  .checkAnimWrapper .checkAnim--a {
    top: 110px;
    left: 60px;
  }

  .checkAnimWrapper .checkAnim--b {
    top: 157px;
    left: 60px;
  }

  .checkAnimWrapper .checkAnim--c {
    top: 204px;
    left: 60px;
  }

  .checkAnimWrapper .checkAnim--d {
    top: 254px;
    left: 60px;
  }

  .checkAnimWrapper .checkAnim--e {
    top: 298px;
    left: 60px;
  }

  .checkAnimWrapper img {
    width: 470px;
  }
}

.onboardingCover .ruiImagePanel__image {
  width: 320px;
}

.onboardingCover .ruiImagePanel__imageWrapper {
  position: relative;
}

.onboardingCover .ruiImagePanel__imageWrapper .signaturePop {
  position: absolute;
  height: 80px;
  width: 255px;
  display: inline-block;
  background-color: #fff;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-135px, 16px) scale(0.28);
       -o-transform: translate(-135px, 16px) scale(0.28);
          transform: translate(-135px, 16px) scale(0.28);
}

.onboardingCover .ruiImagePanel__imageWrapper .signaturePop:before {
  content: '';
  display: block;
  position: absolute;
  top: 15px;
  left: 0;
  width: 255px;
  height: 84px;
  background: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_offer_sign_img.png") no-repeat;
}

.onboardingCover .ruiImagePanel__imageWrapper .signaturePop.animateOnReveal--play:before {
  -webkit-animation: signOfferAnim 2s steps(85) 0s forwards;
       -o-animation: signOfferAnim 2s steps(85) 0s forwards;
          animation: signOfferAnim 2s steps(85) 0s forwards;
}

@media screen and (min-width: 375px) {
  .onboardingCover .ruiImagePanel__imageWrapper .signaturePop {
    -webkit-transform: translate(-140px, 36px) scale(0.28);
         -o-transform: translate(-140px, 36px) scale(0.28);
            transform: translate(-140px, 36px) scale(0.28);
  }
}

@media screen and (min-width: 480px) {
  .onboardingCover .ruiImagePanel__image {
    width: 480px;
  }

  .onboardingCover .ruiImagePanel__imageWrapper .signaturePop {
    -webkit-transform: translate(-145px, 40px) scale(0.4);
         -o-transform: translate(-145px, 40px) scale(0.4);
            transform: translate(-145px, 40px) scale(0.4);
  }
}

@media screen and (min-width: 768px) {
  .onboardingCover .ruiImagePanel__image {
    width: 768px;
  }

  .onboardingCover .ruiImagePanel__imageWrapper .signaturePop {
    -webkit-transform: translate(-155px, 88px) scale(0.7);
         -o-transform: translate(-155px, 88px) scale(0.7);
            transform: translate(-155px, 88px) scale(0.7);
  }
}

@media screen and (min-width: 992px) {
  .onboardingCover .ruiImagePanel__image {
    width: 992px;
  }

  .onboardingCover .ruiImagePanel__imageWrapper .signaturePop {
    -webkit-transform: translate(-160px, 135px) scale(0.8);
         -o-transform: translate(-160px, 135px) scale(0.8);
            transform: translate(-160px, 135px) scale(0.8);
  }
}

@media screen and (min-width: 1100px) {
  .onboardingCover .ruiImagePanel__image {
    width: 1180px;
  }

  .onboardingCover .ruiImagePanel__imageWrapper .signaturePop {
    -webkit-transform: translate(-170px, 140px) scale(1);
         -o-transform: translate(-170px, 140px) scale(1);
            transform: translate(-170px, 140px) scale(1);
  }
}

@-webkit-keyframes signOfferAnim {
  to {
    background-position: 0 -7140px;
  }
}

@-o-keyframes signOfferAnim {
  to {
    background-position: 0 -7140px;
  }
}

@keyframes signOfferAnim {
  to {
    background-position: 0 -7140px;
  }
}

@-webkit-keyframes showPop {
  to {
    -webkit-transform: perspective(1px) scale(1);
            transform: perspective(1px) scale(1);
  }
}

@-o-keyframes showPop {
  to {
    transform: perspective(1px) scale(1);
  }
}

@keyframes showPop {
  to {
    -webkit-transform: perspective(1px) scale(1);
            transform: perspective(1px) scale(1);
  }
}

.formAnimField--software > div:after {
  font-size: 12px;
  line-height: 12px;
  letter-spacing: 0.5px;
}

.formAnimField--radio .radioBox__title {
  font-size: 14px;
  line-height: 14px;
  letter-spacing: 0.5px;
}

.formAnimField--radio .radioBox__check {
  font-size: 16px;
  line-height: 20px;
}

.homePageAnimation .actionList {
  position: absolute;
  top: calc(50% - 80px);
  right: 150px;
  z-index: 10;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
}

.homePageAnimation .actionList:after {
  opacity: 1;
  content: '';
  height: 22px;
  width: 22px;
  position: absolute;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  top: -80px;
  left: 220px;
  z-index: 10;
}

.homePageAnimation .actionList__item.offboard,
.homePageAnimation .actionList__item.view-all-employees {
  pointer-events: none;
}

.homePageAnimation .actionList:after {
  -webkit-animation: mouseMoveToHireAction 0.2s cubic-bezier(1, 0, 0, 1) 2.5s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 2.65s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 3s 1 normal forwards, hideAnim 0.1s cubic-bezier(1, 0, 0, 1) 4s 1 normal forwards;
       -o-animation: mouseMoveToHireAction 0.2s cubic-bezier(1, 0, 0, 1) 2.5s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 2.65s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 3s 1 normal forwards, hideAnim 0.1s cubic-bezier(1, 0, 0, 1) 4s 1 normal forwards;
          animation: mouseMoveToHireAction 0.2s cubic-bezier(1, 0, 0, 1) 2.5s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 2.65s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 3s 1 normal forwards, hideAnim 0.1s cubic-bezier(1, 0, 0, 1) 4s 1 normal forwards;
}

.homePageAnimation .hireAnim {
  z-index: 1;
}

.homePageAnimation .hireAnim__primaryBox {
  -webkit-transform-origin: center;
       -o-transform-origin: center;
          transform-origin: center;
}

.homePageAnimation .hireAnim__primaryBox.hireAnimIntro {
  position: absolute;
  top: calc(50% - 250px);
  right: 260px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
}

.homePageAnimation .hireAnim__primaryBox.hireAnimIntro:after {
  opacity: 1;
  content: '';
  height: 22px;
  width: 22px;
  position: absolute;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  top: 160px;
  left: 335px;
  z-index: 10;
}

.homePageAnimation .hireAnim__primaryBox.hireAnimCheck {
  position: absolute;
  top: calc(50% - 50px);
  right: 350px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
}

.homePageAnimation .hireAnim__primaryBox.hireAnimCheck:after {
  opacity: 1;
  content: '';
  height: 22px;
  width: 22px;
  position: absolute;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  top: 200px;
  left: 40px;
  z-index: 10;
}

.homePageAnimation .hireAnim__primaryBox.hireAnimHardware {
  position: absolute;
  top: calc(50% - 250px);
  right: 260px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
}

.homePageAnimation .hireAnim__primaryBox.hireAnimHardware:after {
  opacity: 1;
  content: '';
  height: 22px;
  width: 22px;
  position: absolute;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  top: 220px;
  left: 40px;
  z-index: 10;
}

.homePageAnimation .hireAnim__primaryBox.hireAnimSoftware {
  position: absolute;
  top: calc(50% - 50px);
  right: 180px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
}

.homePageAnimation .hireAnim__primaryBox.hireAnimSoftware:after {
  opacity: 1;
  content: '';
  height: 22px;
  width: 22px;
  position: absolute;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  top: 300px;
  left: 80px;
  z-index: 10;
}

.homePageAnimation .hireAnim__primaryBox.hireAnimEmail {
  position: absolute;
  top: calc(50% - 250px);
  right: 260px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
}

.homePageAnimation .hireAnim__primaryBox.hireAnimEmail:after {
  opacity: 1;
  content: '';
  height: 22px;
  width: 22px;
  position: absolute;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  top: 160px;
  left: 40px;
  z-index: 10;
}

.homePageAnimation .hireAnim__primaryBox.hireAnimAccount {
  position: absolute;
  top: calc(50% - 120px);
  right: 370px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
}

.homePageAnimation .hireAnim__primaryBox.hireAnimOffer {
  position: absolute;
  top: calc(50% - 250px);
  right: 260px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
}

.homePageAnimation .hireAnim__primaryBox.hireAnimOffer:after {
  opacity: 1;
  content: '';
  height: 22px;
  width: 22px;
  position: absolute;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  top: 160px;
  left: 335px;
  z-index: 10;
}

.homePageAnimation .hireAnim__primaryBox.hireAnimSendOffer {
  position: absolute;
  top: calc(50% - 180px);
  right: 40px;
  width: 300px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
}

.homePageAnimation .hireAnim__primaryBox.hireAnimSendOffer:after {
  opacity: 1;
  content: '';
  height: 22px;
  width: 22px;
  position: absolute;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  top: 320px;
  left: 265px;
  z-index: 10;
}

.homePageAnimation .hireAnim__primaryBox.hireAnimDone {
  position: absolute;
  top: calc(50% - 250px);
  right: 260px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
}

.homePageAnimation .deptBack {
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_dept.svg");
}

.homePageAnimation .empTypeBack {
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_emp_type.png");
}

.homePageAnimation .offerLetterBack {
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_agreement_select.png");
}

.homePageAnimation .hardwarePop {
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  position: absolute;
  right: -60px;
  bottom: -70px;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_hw_pop.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
  width: 135px;
  height: 180px;
  -webkit-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.homePageAnimation .accountPop {
  position: absolute;
  background-color: #ffffff;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-box-shadow: 0 2px 10px 0 rgba(91, 98, 99, 0.4);
          box-shadow: 0 2px 10px 0 rgba(91, 98, 99, 0.4);
  -webkit-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
}

.homePageAnimation .accountPop--a {
  width: 388px;
  height: 90px;
  right: -140px;
  top: -80px;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_acc_dropbox.svg");
}

.homePageAnimation .accountPop--b {
  width: 347px;
  height: 117px;
  right: -365px;
  bottom: 40px;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_acc_gsuite.svg");
}

.homePageAnimation .accountPop--c {
  width: 347px;
  height: 139px;
  right: -140px;
  bottom: -160px;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_acc_slack.svg");
}

.homePageAnimation .sendOfferPop {
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  position: absolute;
  width: 300px;
  height: 170px;
  left: -200px;
  bottom: -80px;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_offer_sign.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.homePageAnimation .sendOfferPop:before {
  content: '';
  position: absolute;
  top: 18px;
  left: 0;
  display: inline-block;
  width: 255px;
  height: 84px;
  -webkit-transform: perspective(1px) scale(0.4);
          transform: perspective(1px) scale(0.4);
  background: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_offer_sign_img.png") no-repeat;
}

.homePageAnimation .sendOfferPop:after {
  content: 'Send Offer';
  display: inline-block;
  padding: 6px 25px;
  text-transform: uppercase;
  font-family: ripplingFontMedium;
  font-size: 12px;
  color: #ffffff;
  background-color: #01C8E5;
  opacity: 1;
  -webkit-transform: perspective(1px) scale(1);
          transform: perspective(1px) scale(1);
  -webkit-font-smoothing: antialiased;
  position: absolute;
  bottom: -2px;
  right: 40px;
}

.actionList {
  background-color: #ffffff;
  padding: 15px 15px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-box-shadow: 0 2px 10px 0 rgba(91, 98, 99, 0.4);
          box-shadow: 0 2px 10px 0 rgba(91, 98, 99, 0.4);
  display: inline-block;
  -webkit-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.actionList--hide {
  opacity: 0;
}

.actionList__item {
  color: #000000;
  font-family: ripplingFontLight;
  padding: 6px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  cursor: pointer;
}

.actionList__item--heading {
  cursor: default;
  font-family: ripplingFontBold;
}

.actionList__item:hover {
  opacity: .8;
}

.actionList__item:hover--heading {
  opacity: 1;
}

.homePageAnimation .hireAnim {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  opacity: 0;
  -webkit-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.homePageAnimation .hireAnim__primaryBox {
  right: 260px;
  width: 390px;
  min-height: 350px;
  background-color: #ffffff;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_browser_window.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  -webkit-box-shadow: 0 0 30px 0 rgba(91, 98, 99, 0.4);
          box-shadow: 0 0 30px 0 rgba(91, 98, 99, 0.4);
}

.homePageAnimation .hireAnim__primaryBox--small {
  min-height: auto;
}

.homePageAnimation .hireAnim__primaryBox--mini {
  background-image: none;
  min-height: auto;
}

.homePageAnimation .hireAnim__primaryBoxTitle {
  font-family: ripplingFontNormal;
  text-align: center;
  padding-top: 60px;
  font-size: 16px;
  color: #000000;
}

.homePageAnimation .hireAnim__primaryBoxTitle--mini {
  padding-top: 30px;
}

.homePageAnimation .hireAnim--animate {
  opacity: 1;
}

.homePageAnimation .hireAnim--animate .hireAnimIntro {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 13.5s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 13.5s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 13.5s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimIntro:after {
  -webkit-animation: mouseMoveToEmpType 0.2s cubic-bezier(1, 0, 0, 1) 4s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 4.2s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 4.8s 1 normal forwards, mouseToPointer0 0s cubic-bezier(1, 0, 0, 1) 7.55s 1 normal forwards, mouseMoveToDept 0.2s cubic-bezier(1, 0, 0, 1) 7.5s 1 normal forwards, mouseToCursor1 0s cubic-bezier(1, 0, 0, 1) 7.7s 1 normal forwards, mouseClick1 0.1s cubic-bezier(1, 0, 0, 1) 8.3s 1 normal forwards, mouseToPointer1 0s cubic-bezier(1, 0, 0, 1) 9.05s 1 normal forwards, mouseMoveToDeptExpand 0.2s cubic-bezier(1, 0, 0, 1) 9s 1 normal forwards, mouseToCursor2 0s cubic-bezier(1, 0, 0, 1) 9.2s 1 normal forwards, mouseClick2 0.1s cubic-bezier(1, 0, 0, 1) 9.8s 1 normal forwards, mouseToPointer2 0s cubic-bezier(1, 0, 0, 1) 10.8s 1 normal forwards, mouseMoveToHireBtn 0.2s cubic-bezier(1, 0, 0, 1) 11.5s 1 normal forwards, mouseToCursor3 0s cubic-bezier(1, 0, 0, 1) 11.7s 1 normal forwards, mouseClick3 0.1s cubic-bezier(1, 0, 0, 1) 12.3s 1 normal forwards;
       -o-animation: mouseMoveToEmpType 0.2s cubic-bezier(1, 0, 0, 1) 4s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 4.2s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 4.8s 1 normal forwards, mouseToPointer0 0s cubic-bezier(1, 0, 0, 1) 7.55s 1 normal forwards, mouseMoveToDept 0.2s cubic-bezier(1, 0, 0, 1) 7.5s 1 normal forwards, mouseToCursor1 0s cubic-bezier(1, 0, 0, 1) 7.7s 1 normal forwards, mouseClick1 0.1s cubic-bezier(1, 0, 0, 1) 8.3s 1 normal forwards, mouseToPointer1 0s cubic-bezier(1, 0, 0, 1) 9.05s 1 normal forwards, mouseMoveToDeptExpand 0.2s cubic-bezier(1, 0, 0, 1) 9s 1 normal forwards, mouseToCursor2 0s cubic-bezier(1, 0, 0, 1) 9.2s 1 normal forwards, mouseClick2 0.1s cubic-bezier(1, 0, 0, 1) 9.8s 1 normal forwards, mouseToPointer2 0s cubic-bezier(1, 0, 0, 1) 10.8s 1 normal forwards, mouseMoveToHireBtn 0.2s cubic-bezier(1, 0, 0, 1) 11.5s 1 normal forwards, mouseToCursor3 0s cubic-bezier(1, 0, 0, 1) 11.7s 1 normal forwards, mouseClick3 0.1s cubic-bezier(1, 0, 0, 1) 12.3s 1 normal forwards;
          animation: mouseMoveToEmpType 0.2s cubic-bezier(1, 0, 0, 1) 4s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 4.2s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 4.8s 1 normal forwards, mouseToPointer0 0s cubic-bezier(1, 0, 0, 1) 7.55s 1 normal forwards, mouseMoveToDept 0.2s cubic-bezier(1, 0, 0, 1) 7.5s 1 normal forwards, mouseToCursor1 0s cubic-bezier(1, 0, 0, 1) 7.7s 1 normal forwards, mouseClick1 0.1s cubic-bezier(1, 0, 0, 1) 8.3s 1 normal forwards, mouseToPointer1 0s cubic-bezier(1, 0, 0, 1) 9.05s 1 normal forwards, mouseMoveToDeptExpand 0.2s cubic-bezier(1, 0, 0, 1) 9s 1 normal forwards, mouseToCursor2 0s cubic-bezier(1, 0, 0, 1) 9.2s 1 normal forwards, mouseClick2 0.1s cubic-bezier(1, 0, 0, 1) 9.8s 1 normal forwards, mouseToPointer2 0s cubic-bezier(1, 0, 0, 1) 10.8s 1 normal forwards, mouseMoveToHireBtn 0.2s cubic-bezier(1, 0, 0, 1) 11.5s 1 normal forwards, mouseToCursor3 0s cubic-bezier(1, 0, 0, 1) 11.7s 1 normal forwards, mouseClick3 0.1s cubic-bezier(1, 0, 0, 1) 12.3s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimIntro .formAnimField--hireName .formAnimField__inner {
  -webkit-animation: formAnimField 1.3s linear 0.8s 1 normal forwards;
       -o-animation: formAnimField 1.3s linear 0.8s 1 normal forwards;
          animation: formAnimField 1.3s linear 0.8s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimIntro .formAnimField--hireName .formAnimField__label {
  -webkit-animation: formAnimFieldLabel 0.2s linear 1.1s 1 normal forwards;
       -o-animation: formAnimFieldLabel 0.2s linear 1.1s 1 normal forwards;
          animation: formAnimFieldLabel 0.2s linear 1.1s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimIntro .formAnimField--hireName .formAnimField__value > span:nth-child(1) {
  -webkit-animation: typing 0.08s linear 1.1s 1 normal forwards;
       -o-animation: typing 0.08s linear 1.1s 1 normal forwards;
          animation: typing 0.08s linear 1.1s 1 normal forwards;
  animation: typing 0.08s linear 1.1s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimIntro .formAnimField--hireName .formAnimField__value > span:nth-child(2) {
  -webkit-animation: typing 0.08s linear 1.18s 1 normal forwards;
       -o-animation: typing 0.08s linear 1.18s 1 normal forwards;
          animation: typing 0.08s linear 1.18s 1 normal forwards;
  animation: typing 0.08s linear 1.18s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimIntro .formAnimField--hireName .formAnimField__value > span:nth-child(3) {
  -webkit-animation: typing 0.08s linear 1.26s 1 normal forwards;
       -o-animation: typing 0.08s linear 1.26s 1 normal forwards;
          animation: typing 0.08s linear 1.26s 1 normal forwards;
  animation: typing 0.08s linear 1.26s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimIntro .formAnimField--hireName .formAnimField__value > span:nth-child(4) {
  -webkit-animation: typing 0.08s linear 1.34s 1 normal forwards;
       -o-animation: typing 0.08s linear 1.34s 1 normal forwards;
          animation: typing 0.08s linear 1.34s 1 normal forwards;
  animation: typing 0.08s linear 1.34s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimIntro .formAnimField--hireName .formAnimField__value > span:nth-child(5) {
  -webkit-animation: typing 0.08s linear 1.42s 1 normal forwards;
       -o-animation: typing 0.08s linear 1.42s 1 normal forwards;
          animation: typing 0.08s linear 1.42s 1 normal forwards;
  animation: typing 0.08s linear 1.42s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimIntro .formAnimField--hireName .formAnimField__value > span:nth-child(6) {
  -webkit-animation: typing 0.08s linear 1.5s 1 normal forwards;
       -o-animation: typing 0.08s linear 1.5s 1 normal forwards;
          animation: typing 0.08s linear 1.5s 1 normal forwards;
  animation: typing 0.08s linear 1.5s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimIntro .formAnimField--hireName .formAnimField__value > span:nth-child(7) {
  -webkit-animation: typing 0.08s linear 1.58s 1 normal forwards;
       -o-animation: typing 0.08s linear 1.58s 1 normal forwards;
          animation: typing 0.08s linear 1.58s 1 normal forwards;
  animation: typing 0.08s linear 1.58s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimIntro .formAnimField--hireName .formAnimField__value > span:nth-child(8) {
  -webkit-animation: typing 0.08s linear 1.66s 1 normal forwards;
       -o-animation: typing 0.08s linear 1.66s 1 normal forwards;
          animation: typing 0.08s linear 1.66s 1 normal forwards;
  animation: typing 0.08s linear 1.66s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimIntro .formAnimField--hireName .formAnimField__value > span:nth-child(9) {
  -webkit-animation: typing 0.08s linear 1.74s 1 normal forwards;
       -o-animation: typing 0.08s linear 1.74s 1 normal forwards;
          animation: typing 0.08s linear 1.74s 1 normal forwards;
  animation: typing 0.08s linear 1.74s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimIntro .formAnimField--hireName .formAnimField__value > span:nth-child(10) {
  -webkit-animation: typing 0.08s linear 1.82s 1 normal forwards;
       -o-animation: typing 0.08s linear 1.82s 1 normal forwards;
          animation: typing 0.08s linear 1.82s 1 normal forwards;
  animation: typing 0.08s linear 1.82s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimIntro .formAnimField--hireTitle .formAnimField__inner {
  -webkit-animation: formAnimField 1.86s linear 2.1s 1 normal forwards;
       -o-animation: formAnimField 1.86s linear 2.1s 1 normal forwards;
          animation: formAnimField 1.86s linear 2.1s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimIntro .formAnimField--hireTitle .formAnimField__label {
  -webkit-animation: formAnimFieldLabel 0.2s linear 2.4s 1 normal forwards;
       -o-animation: formAnimFieldLabel 0.2s linear 2.4s 1 normal forwards;
          animation: formAnimFieldLabel 0.2s linear 2.4s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimIntro .formAnimField--hireTitle .formAnimField__value > span:nth-child(1) {
  -webkit-animation: typing 0.08s linear 2.4s 1 normal forwards;
       -o-animation: typing 0.08s linear 2.4s 1 normal forwards;
          animation: typing 0.08s linear 2.4s 1 normal forwards;
  animation: typing 0.08s linear 2.4s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimIntro .formAnimField--hireTitle .formAnimField__value > span:nth-child(2) {
  -webkit-animation: typing 0.08s linear 2.48s 1 normal forwards;
       -o-animation: typing 0.08s linear 2.48s 1 normal forwards;
          animation: typing 0.08s linear 2.48s 1 normal forwards;
  animation: typing 0.08s linear 2.48s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimIntro .formAnimField--hireTitle .formAnimField__value > span:nth-child(3) {
  -webkit-animation: typing 0.08s linear 2.56s 1 normal forwards;
       -o-animation: typing 0.08s linear 2.56s 1 normal forwards;
          animation: typing 0.08s linear 2.56s 1 normal forwards;
  animation: typing 0.08s linear 2.56s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimIntro .formAnimField--hireTitle .formAnimField__value > span:nth-child(4) {
  -webkit-animation: typing 0.08s linear 2.64s 1 normal forwards;
       -o-animation: typing 0.08s linear 2.64s 1 normal forwards;
          animation: typing 0.08s linear 2.64s 1 normal forwards;
  animation: typing 0.08s linear 2.64s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimIntro .formAnimField--hireTitle .formAnimField__value > span:nth-child(5) {
  -webkit-animation: typing 0.08s linear 2.72s 1 normal forwards;
       -o-animation: typing 0.08s linear 2.72s 1 normal forwards;
          animation: typing 0.08s linear 2.72s 1 normal forwards;
  animation: typing 0.08s linear 2.72s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimIntro .formAnimField--hireTitle .formAnimField__value > span:nth-child(6) {
  -webkit-animation: typing 0.08s linear 2.8s 1 normal forwards;
       -o-animation: typing 0.08s linear 2.8s 1 normal forwards;
          animation: typing 0.08s linear 2.8s 1 normal forwards;
  animation: typing 0.08s linear 2.8s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimIntro .formAnimField--hireTitle .formAnimField__value > span:nth-child(7) {
  -webkit-animation: typing 0.08s linear 2.88s 1 normal forwards;
       -o-animation: typing 0.08s linear 2.88s 1 normal forwards;
          animation: typing 0.08s linear 2.88s 1 normal forwards;
  animation: typing 0.08s linear 2.88s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimIntro .formAnimField--hireTitle .formAnimField__value > span:nth-child(8) {
  -webkit-animation: typing 0.08s linear 2.96s 1 normal forwards;
       -o-animation: typing 0.08s linear 2.96s 1 normal forwards;
          animation: typing 0.08s linear 2.96s 1 normal forwards;
  animation: typing 0.08s linear 2.96s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimIntro .formAnimField--hireTitle .formAnimField__value > span:nth-child(9) {
  -webkit-animation: typing 0.08s linear 3.04s 1 normal forwards;
       -o-animation: typing 0.08s linear 3.04s 1 normal forwards;
          animation: typing 0.08s linear 3.04s 1 normal forwards;
  animation: typing 0.08s linear 3.04s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimIntro .formAnimField--hireTitle .formAnimField__value > span:nth-child(10) {
  -webkit-animation: typing 0.08s linear 3.12s 1 normal forwards;
       -o-animation: typing 0.08s linear 3.12s 1 normal forwards;
          animation: typing 0.08s linear 3.12s 1 normal forwards;
  animation: typing 0.08s linear 3.12s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimIntro .formAnimField--hireTitle .formAnimField__value > span:nth-child(11) {
  -webkit-animation: typing 0.08s linear 3.2s 1 normal forwards;
       -o-animation: typing 0.08s linear 3.2s 1 normal forwards;
          animation: typing 0.08s linear 3.2s 1 normal forwards;
  animation: typing 0.08s linear 3.2s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimIntro .formAnimField--hireTitle .formAnimField__value > span:nth-child(12) {
  -webkit-animation: typing 0.08s linear 3.28s 1 normal forwards;
       -o-animation: typing 0.08s linear 3.28s 1 normal forwards;
          animation: typing 0.08s linear 3.28s 1 normal forwards;
  animation: typing 0.08s linear 3.28s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimIntro .formAnimField--hireTitle .formAnimField__value > span:nth-child(13) {
  -webkit-animation: typing 0.08s linear 3.36s 1 normal forwards;
       -o-animation: typing 0.08s linear 3.36s 1 normal forwards;
          animation: typing 0.08s linear 3.36s 1 normal forwards;
  animation: typing 0.08s linear 3.36s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimIntro .formAnimField--hireTitle .formAnimField__value > span:nth-child(14) {
  -webkit-animation: typing 0.08s linear 3.44s 1 normal forwards;
       -o-animation: typing 0.08s linear 3.44s 1 normal forwards;
          animation: typing 0.08s linear 3.44s 1 normal forwards;
  animation: typing 0.08s linear 3.44s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimIntro .formAnimField--hireTitle .formAnimField__value > span:nth-child(15) {
  -webkit-animation: typing 0.08s linear 3.52s 1 normal forwards;
       -o-animation: typing 0.08s linear 3.52s 1 normal forwards;
          animation: typing 0.08s linear 3.52s 1 normal forwards;
  animation: typing 0.08s linear 3.52s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimIntro .formAnimField--hireTitle .formAnimField__value > span:nth-child(16) {
  -webkit-animation: typing 0.08s linear 3.6s 1 normal forwards;
       -o-animation: typing 0.08s linear 3.6s 1 normal forwards;
          animation: typing 0.08s linear 3.6s 1 normal forwards;
  animation: typing 0.08s linear 3.6s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimIntro .formAnimField--hireTitle .formAnimField__value > span:nth-child(17) {
  -webkit-animation: typing 0.08s linear 3.68s 1 normal forwards;
       -o-animation: typing 0.08s linear 3.68s 1 normal forwards;
          animation: typing 0.08s linear 3.68s 1 normal forwards;
  animation: typing 0.08s linear 3.68s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimIntro .formAnimField--hireType {
  -webkit-animation: showHover 0.1s linear 4.26s 1 normal forwards, hideHover 0.1s linear 5.06s 1 normal forwards, showFocus 0.2s linear 5.06s 1 normal forwards, hideFocus 0.2s linear 5.86s 1 normal forwards, showHover 0.1s linear 5.86s 1 normal forwards, hideHover 0.1s linear 6.66s 1 normal forwards;
       -o-animation: showHover 0.1s linear 4.26s 1 normal forwards, hideHover 0.1s linear 5.06s 1 normal forwards, showFocus 0.2s linear 5.06s 1 normal forwards, hideFocus 0.2s linear 5.86s 1 normal forwards, showHover 0.1s linear 5.86s 1 normal forwards, hideHover 0.1s linear 6.66s 1 normal forwards;
          animation: showHover 0.1s linear 4.26s 1 normal forwards, hideHover 0.1s linear 5.06s 1 normal forwards, showFocus 0.2s linear 5.06s 1 normal forwards, hideFocus 0.2s linear 5.86s 1 normal forwards, showHover 0.1s linear 5.86s 1 normal forwards, hideHover 0.1s linear 6.66s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimIntro .formAnimField--hireType .formAnimDropdown__content {
  -webkit-animation: empTypeExpandAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 5.06s 1 normal forwards, empTypeCollapseAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 5.86s 1 normal forwards;
       -o-animation: empTypeExpandAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 5.06s 1 normal forwards, empTypeCollapseAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 5.86s 1 normal forwards;
          animation: empTypeExpandAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 5.06s 1 normal forwards, empTypeCollapseAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 5.86s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimIntro .formAnimField--hireType .formAnimField__label {
  -webkit-animation: formAnimFieldLabel 0.2s linear 5.86s 1 normal forwards;
       -o-animation: formAnimFieldLabel 0.2s linear 5.86s 1 normal forwards;
          animation: formAnimFieldLabel 0.2s linear 5.86s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimIntro .formAnimField--hireType .formAnimField__value {
  opacity: 0;
  max-width: 100%;
  -webkit-animation: showAnim 0.2s linear 5.86s 1 normal forwards;
       -o-animation: showAnim 0.2s linear 5.86s 1 normal forwards;
          animation: showAnim 0.2s linear 5.86s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimIntro .formAnimField--hireSalary .formAnimField__inner {
  -webkit-animation: formAnimField 1.06s linear 6.26s 1 normal forwards;
       -o-animation: formAnimField 1.06s linear 6.26s 1 normal forwards;
          animation: formAnimField 1.06s linear 6.26s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimIntro .formAnimField--hireSalary .formAnimField__label {
  -webkit-animation: formAnimFieldLabel 0.2s linear 6.56s 1 normal forwards;
       -o-animation: formAnimFieldLabel 0.2s linear 6.56s 1 normal forwards;
          animation: formAnimFieldLabel 0.2s linear 6.56s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimIntro .formAnimField--hireSalary .formAnimField__value > span:nth-child(1) {
  -webkit-animation: typing 0.08s linear 6.56s 1 normal forwards;
       -o-animation: typing 0.08s linear 6.56s 1 normal forwards;
          animation: typing 0.08s linear 6.56s 1 normal forwards;
  animation: typing 0.08s linear 6.56s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimIntro .formAnimField--hireSalary .formAnimField__value > span:nth-child(2) {
  -webkit-animation: typing 0.08s linear 6.64s 1 normal forwards;
       -o-animation: typing 0.08s linear 6.64s 1 normal forwards;
          animation: typing 0.08s linear 6.64s 1 normal forwards;
  animation: typing 0.08s linear 6.64s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimIntro .formAnimField--hireSalary .formAnimField__value > span:nth-child(3) {
  -webkit-animation: typing 0.08s linear 6.72s 1 normal forwards;
       -o-animation: typing 0.08s linear 6.72s 1 normal forwards;
          animation: typing 0.08s linear 6.72s 1 normal forwards;
  animation: typing 0.08s linear 6.72s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimIntro .formAnimField--hireSalary .formAnimField__value > span:nth-child(4) {
  -webkit-animation: typing 0.08s linear 6.8s 1 normal forwards;
       -o-animation: typing 0.08s linear 6.8s 1 normal forwards;
          animation: typing 0.08s linear 6.8s 1 normal forwards;
  animation: typing 0.08s linear 6.8s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimIntro .formAnimField--hireSalary .formAnimField__value > span:nth-child(5) {
  -webkit-animation: typing 0.08s linear 6.88s 1 normal forwards;
       -o-animation: typing 0.08s linear 6.88s 1 normal forwards;
          animation: typing 0.08s linear 6.88s 1 normal forwards;
  animation: typing 0.08s linear 6.88s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimIntro .formAnimField--hireSalary .formAnimField__value > span:nth-child(6) {
  -webkit-animation: typing 0.08s linear 6.96s 1 normal forwards;
       -o-animation: typing 0.08s linear 6.96s 1 normal forwards;
          animation: typing 0.08s linear 6.96s 1 normal forwards;
  animation: typing 0.08s linear 6.96s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimIntro .formAnimField--hireSalary .formAnimField__value > span:nth-child(7) {
  -webkit-animation: typing 0.08s linear 7.04s 1 normal forwards;
       -o-animation: typing 0.08s linear 7.04s 1 normal forwards;
          animation: typing 0.08s linear 7.04s 1 normal forwards;
  animation: typing 0.08s linear 7.04s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimIntro .formAnimField--hireDept {
  -webkit-animation: showHover 0.1s linear 7.82s 1 normal forwards, hideHover 0.1s linear 8.62s 1 normal forwards, showFocus 0.2s linear 8.62s 1 normal forwards, hideFocus 0.2s linear 11.02s 1 normal forwards, showHover 0.1s linear 11.02s 1 normal forwards, hideHover 0.1s linear 11.82s 1 normal forwards;
       -o-animation: showHover 0.1s linear 7.82s 1 normal forwards, hideHover 0.1s linear 8.62s 1 normal forwards, showFocus 0.2s linear 8.62s 1 normal forwards, hideFocus 0.2s linear 11.02s 1 normal forwards, showHover 0.1s linear 11.02s 1 normal forwards, hideHover 0.1s linear 11.82s 1 normal forwards;
          animation: showHover 0.1s linear 7.82s 1 normal forwards, hideHover 0.1s linear 8.62s 1 normal forwards, showFocus 0.2s linear 8.62s 1 normal forwards, hideFocus 0.2s linear 11.02s 1 normal forwards, showHover 0.1s linear 11.02s 1 normal forwards, hideHover 0.1s linear 11.82s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimIntro .formAnimField--hireDept .formAnimDropdown__content {
  -webkit-animation: deptExpandAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 8.62s 1 normal forwards, deptBackAnim 0s linear 10.22s 1 normal forwards, deptCollapseAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 11.02s 1 normal forwards;
       -o-animation: deptExpandAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 8.62s 1 normal forwards, deptBackAnim 0s linear 10.22s 1 normal forwards, deptCollapseAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 11.02s 1 normal forwards;
          animation: deptExpandAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 8.62s 1 normal forwards, deptBackAnim 0s linear 10.22s 1 normal forwards, deptCollapseAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 11.02s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimIntro .formAnimField--hireDept .formAnimField__label {
  -webkit-animation: formAnimFieldLabel 0.2s linear 11.02s 1 normal forwards;
       -o-animation: formAnimFieldLabel 0.2s linear 11.02s 1 normal forwards;
          animation: formAnimFieldLabel 0.2s linear 11.02s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimIntro .formAnimField--hireDept .formAnimField__value {
  opacity: 0;
  max-width: 100%;
  -webkit-animation: showAnim 0.2s linear 11.02s 1 normal forwards;
       -o-animation: showAnim 0.2s linear 11.02s 1 normal forwards;
          animation: showAnim 0.2s linear 11.02s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimIntro .formSubmit__btn {
  -webkit-animation: buttonClick 0.2s linear 12.32s 1 normal forwards;
       -o-animation: buttonClick 0.2s linear 12.32s 1 normal forwards;
          animation: buttonClick 0.2s linear 12.32s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimCheck {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 13.8s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 15.8s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 13.8s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 15.8s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 13.8s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 15.8s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimCheck:after {
  -webkit-animation: mouseMoveToNo 0.2s cubic-bezier(1, 0, 0, 1) 14.2s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 14.2s 1 normal forwards, mouseMoveToYes 0.4s cubic-bezier(1, 0, 0, 1) 14.4s 1 normal forwards, mouseToPointer0 0s cubic-bezier(1, 0, 0, 1) 14.5s 1 normal forwards, mouseToCursor1 0s cubic-bezier(1, 0, 0, 1) 14.6s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 15.1s 1 normal forwards;
       -o-animation: mouseMoveToNo 0.2s cubic-bezier(1, 0, 0, 1) 14.2s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 14.2s 1 normal forwards, mouseMoveToYes 0.4s cubic-bezier(1, 0, 0, 1) 14.4s 1 normal forwards, mouseToPointer0 0s cubic-bezier(1, 0, 0, 1) 14.5s 1 normal forwards, mouseToCursor1 0s cubic-bezier(1, 0, 0, 1) 14.6s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 15.1s 1 normal forwards;
          animation: mouseMoveToNo 0.2s cubic-bezier(1, 0, 0, 1) 14.2s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 14.2s 1 normal forwards, mouseMoveToYes 0.4s cubic-bezier(1, 0, 0, 1) 14.4s 1 normal forwards, mouseToPointer0 0s cubic-bezier(1, 0, 0, 1) 14.5s 1 normal forwards, mouseToCursor1 0s cubic-bezier(1, 0, 0, 1) 14.6s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 15.1s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimCheck .radioBox:first-child {
  -webkit-animation: transformUp 0.1s cubic-bezier(1, 0, 0, 1) 14.3s 1 normal forwards, transformDown 0.1s cubic-bezier(1, 0, 0, 1) 14.5s 1 normal forwards;
       -o-animation: transformUp 0.1s cubic-bezier(1, 0, 0, 1) 14.3s 1 normal forwards, transformDown 0.1s cubic-bezier(1, 0, 0, 1) 14.5s 1 normal forwards;
          animation: transformUp 0.1s cubic-bezier(1, 0, 0, 1) 14.3s 1 normal forwards, transformDown 0.1s cubic-bezier(1, 0, 0, 1) 14.5s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimCheck .radioBox:first-child .radioBox__title {
  -webkit-animation: showHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 14.3s 1 normal forwards, hideHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 14.5s 1 normal forwards;
       -o-animation: showHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 14.3s 1 normal forwards, hideHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 14.5s 1 normal forwards;
          animation: showHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 14.3s 1 normal forwards, hideHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 14.5s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimCheck .radioBox:first-child .radioBox__check {
  -webkit-animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 14.3s 1 normal forwards, hideHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 14.5s 1 normal forwards;
       -o-animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 14.3s 1 normal forwards, hideHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 14.5s 1 normal forwards;
          animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 14.3s 1 normal forwards, hideHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 14.5s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimCheck .radioBox:first-child:after {
  -webkit-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 14.3s 1 normal forwards, hideAnim 0.1s cubic-bezier(1, 0, 0, 1) 14.5s 1 normal forwards;
       -o-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 14.3s 1 normal forwards, hideAnim 0.1s cubic-bezier(1, 0, 0, 1) 14.5s 1 normal forwards;
          animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 14.3s 1 normal forwards, hideAnim 0.1s cubic-bezier(1, 0, 0, 1) 14.5s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimCheck .radioBox:last-child {
  -webkit-animation: transformUp 0.1s cubic-bezier(1, 0, 0, 1) 14.5s 1 normal forwards, showHoverBlue 0.1s cubic-bezier(1, 0, 0, 1) 14.9s 1 normal forwards, showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 14.9s 1 normal forwards;
       -o-animation: transformUp 0.1s cubic-bezier(1, 0, 0, 1) 14.5s 1 normal forwards, showHoverBlue 0.1s cubic-bezier(1, 0, 0, 1) 14.9s 1 normal forwards, showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 14.9s 1 normal forwards;
          animation: transformUp 0.1s cubic-bezier(1, 0, 0, 1) 14.5s 1 normal forwards, showHoverBlue 0.1s cubic-bezier(1, 0, 0, 1) 14.9s 1 normal forwards, showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 14.9s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimCheck .radioBox:last-child .radioBox__title {
  -webkit-animation: showHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 14.5s 1 normal forwards, showHoverLightColor 0.1s cubic-bezier(1, 0, 0, 1) 14.9s 1 normal forwards;
       -o-animation: showHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 14.5s 1 normal forwards, showHoverLightColor 0.1s cubic-bezier(1, 0, 0, 1) 14.9s 1 normal forwards;
          animation: showHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 14.5s 1 normal forwards, showHoverLightColor 0.1s cubic-bezier(1, 0, 0, 1) 14.9s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimCheck .radioBox:last-child .radioBox__check {
  -webkit-animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 14.5s 1 normal forwards, showHoverColorBlue 0.1s cubic-bezier(1, 0, 0, 1) 14.9s 1 normal forwards;
       -o-animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 14.5s 1 normal forwards, showHoverColorBlue 0.1s cubic-bezier(1, 0, 0, 1) 14.9s 1 normal forwards;
          animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 14.5s 1 normal forwards, showHoverColorBlue 0.1s cubic-bezier(1, 0, 0, 1) 14.9s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimCheck .radioBox:last-child:after {
  -webkit-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 14.5s 1 normal forwards;
       -o-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 14.5s 1 normal forwards;
          animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 14.5s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimHardware {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 16.1s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 20.3s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 16.1s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 20.3s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 16.1s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 20.3s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimHardware:after {
  -webkit-animation: mouseMoveToBoxTwo 0.2s cubic-bezier(1, 0, 0, 1) 16.9s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 16.9s 1 normal forwards, mouseMoveToBoxThree 0.4s cubic-bezier(1, 0, 0, 1) 17.1s 1 normal forwards, mouseToPointer0 0s cubic-bezier(1, 0, 0, 1) 17.2s 1 normal forwards, mouseToCursor1 0s cubic-bezier(1, 0, 0, 1) 17.3s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 18.1s 1 normal forwards;
       -o-animation: mouseMoveToBoxTwo 0.2s cubic-bezier(1, 0, 0, 1) 16.9s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 16.9s 1 normal forwards, mouseMoveToBoxThree 0.4s cubic-bezier(1, 0, 0, 1) 17.1s 1 normal forwards, mouseToPointer0 0s cubic-bezier(1, 0, 0, 1) 17.2s 1 normal forwards, mouseToCursor1 0s cubic-bezier(1, 0, 0, 1) 17.3s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 18.1s 1 normal forwards;
          animation: mouseMoveToBoxTwo 0.2s cubic-bezier(1, 0, 0, 1) 16.9s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 16.9s 1 normal forwards, mouseMoveToBoxThree 0.4s cubic-bezier(1, 0, 0, 1) 17.1s 1 normal forwards, mouseToPointer0 0s cubic-bezier(1, 0, 0, 1) 17.2s 1 normal forwards, mouseToCursor1 0s cubic-bezier(1, 0, 0, 1) 17.3s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 18.1s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimHardware .boxItem:nth-child(2) {
  -webkit-animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 17s 1 normal forwards, showHoverShadow 0.1s cubic-bezier(1, 0, 0, 1) 17s 1 normal forwards, hideHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 17.4s 1 normal forwards, hideHoverShadow 0.1s cubic-bezier(1, 0, 0, 1) 17.4s 1 normal forwards;
       -o-animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 17s 1 normal forwards, showHoverShadow 0.1s cubic-bezier(1, 0, 0, 1) 17s 1 normal forwards, hideHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 17.4s 1 normal forwards, hideHoverShadow 0.1s cubic-bezier(1, 0, 0, 1) 17.4s 1 normal forwards;
          animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 17s 1 normal forwards, showHoverShadow 0.1s cubic-bezier(1, 0, 0, 1) 17s 1 normal forwards, hideHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 17.4s 1 normal forwards, hideHoverShadow 0.1s cubic-bezier(1, 0, 0, 1) 17.4s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimHardware .boxItem:nth-child(3) {
  -webkit-animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 17.5s 1 normal forwards, showHoverShadow 0.1s cubic-bezier(1, 0, 0, 1) 17.5s 1 normal forwards;
       -o-animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 17.5s 1 normal forwards, showHoverShadow 0.1s cubic-bezier(1, 0, 0, 1) 17.5s 1 normal forwards;
          animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 17.5s 1 normal forwards, showHoverShadow 0.1s cubic-bezier(1, 0, 0, 1) 17.5s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimHardware .hardwarePop {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 18.1s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 18.1s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 18.1s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimSoftware {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 20.6s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 26.6s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 20.6s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 26.6s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 20.6s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 26.6s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimSoftware:after {
  -webkit-animation: mouseMoveToBoxExcel 0.2s cubic-bezier(1, 0, 0, 1) 21.4s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 21.5s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 22.1s 1 normal forwards, mouseMoveToBoxXd 0.4s cubic-bezier(1, 0, 0, 1) 22.8s 1 normal forwards, mouseToPointer0 0s cubic-bezier(1, 0, 0, 1) 22.9s 1 normal forwards, mouseToCursor1 0s cubic-bezier(1, 0, 0, 1) 23s 1 normal forwards, mouseClick1 0.1s cubic-bezier(1, 0, 0, 1) 23.8s 1 normal forwards, mouseMoveToBoxPhotoshop 0.4s cubic-bezier(1, 0, 0, 1) 24.4s 1 normal forwards, mouseToPointer1 0s cubic-bezier(1, 0, 0, 1) 24.5s 1 normal forwards, mouseToCursor2 0s cubic-bezier(1, 0, 0, 1) 24.6s 1 normal forwards, mouseClick2 0.1s cubic-bezier(1, 0, 0, 1) 25.4s 1 normal forwards;
       -o-animation: mouseMoveToBoxExcel 0.2s cubic-bezier(1, 0, 0, 1) 21.4s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 21.5s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 22.1s 1 normal forwards, mouseMoveToBoxXd 0.4s cubic-bezier(1, 0, 0, 1) 22.8s 1 normal forwards, mouseToPointer0 0s cubic-bezier(1, 0, 0, 1) 22.9s 1 normal forwards, mouseToCursor1 0s cubic-bezier(1, 0, 0, 1) 23s 1 normal forwards, mouseClick1 0.1s cubic-bezier(1, 0, 0, 1) 23.8s 1 normal forwards, mouseMoveToBoxPhotoshop 0.4s cubic-bezier(1, 0, 0, 1) 24.4s 1 normal forwards, mouseToPointer1 0s cubic-bezier(1, 0, 0, 1) 24.5s 1 normal forwards, mouseToCursor2 0s cubic-bezier(1, 0, 0, 1) 24.6s 1 normal forwards, mouseClick2 0.1s cubic-bezier(1, 0, 0, 1) 25.4s 1 normal forwards;
          animation: mouseMoveToBoxExcel 0.2s cubic-bezier(1, 0, 0, 1) 21.4s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 21.5s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 22.1s 1 normal forwards, mouseMoveToBoxXd 0.4s cubic-bezier(1, 0, 0, 1) 22.8s 1 normal forwards, mouseToPointer0 0s cubic-bezier(1, 0, 0, 1) 22.9s 1 normal forwards, mouseToCursor1 0s cubic-bezier(1, 0, 0, 1) 23s 1 normal forwards, mouseClick1 0.1s cubic-bezier(1, 0, 0, 1) 23.8s 1 normal forwards, mouseMoveToBoxPhotoshop 0.4s cubic-bezier(1, 0, 0, 1) 24.4s 1 normal forwards, mouseToPointer1 0s cubic-bezier(1, 0, 0, 1) 24.5s 1 normal forwards, mouseToCursor2 0s cubic-bezier(1, 0, 0, 1) 24.6s 1 normal forwards, mouseClick2 0.1s cubic-bezier(1, 0, 0, 1) 25.4s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimSoftware .boxItem:nth-child(6) {
  -webkit-animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 21.5s 1 normal forwards, showHoverShadow 0.1s cubic-bezier(1, 0, 0, 1) 21.5s 1 normal forwards, hideHoverShadow 0.1s cubic-bezier(1, 0, 0, 1) 22.9s 1 normal forwards;
       -o-animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 21.5s 1 normal forwards, showHoverShadow 0.1s cubic-bezier(1, 0, 0, 1) 21.5s 1 normal forwards, hideHoverShadow 0.1s cubic-bezier(1, 0, 0, 1) 22.9s 1 normal forwards;
          animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 21.5s 1 normal forwards, showHoverShadow 0.1s cubic-bezier(1, 0, 0, 1) 21.5s 1 normal forwards, hideHoverShadow 0.1s cubic-bezier(1, 0, 0, 1) 22.9s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimSoftware .boxItem:nth-child(6):after {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 22.2s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 22.2s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 22.2s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimSoftware .boxItem:nth-child(3) {
  -webkit-animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 23s 1 normal forwards, showHoverShadow 0.1s cubic-bezier(1, 0, 0, 1) 23s 1 normal forwards, hideHoverShadow 0.1s cubic-bezier(1, 0, 0, 1) 24.4s 1 normal forwards;
       -o-animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 23s 1 normal forwards, showHoverShadow 0.1s cubic-bezier(1, 0, 0, 1) 23s 1 normal forwards, hideHoverShadow 0.1s cubic-bezier(1, 0, 0, 1) 24.4s 1 normal forwards;
          animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 23s 1 normal forwards, showHoverShadow 0.1s cubic-bezier(1, 0, 0, 1) 23s 1 normal forwards, hideHoverShadow 0.1s cubic-bezier(1, 0, 0, 1) 24.4s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimSoftware .boxItem:nth-child(3):after {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 23.9s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 23.9s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 23.9s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimSoftware .boxItem:nth-child(4) {
  -webkit-animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 24.5s 1 normal forwards, showHoverShadow 0.1s cubic-bezier(1, 0, 0, 1) 24.5s 1 normal forwards;
       -o-animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 24.5s 1 normal forwards, showHoverShadow 0.1s cubic-bezier(1, 0, 0, 1) 24.5s 1 normal forwards;
          animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 24.5s 1 normal forwards, showHoverShadow 0.1s cubic-bezier(1, 0, 0, 1) 24.5s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimSoftware .boxItem:nth-child(4):after {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 25.5s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 25.5s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 25.5s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimEmail {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 26.9s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 30.1s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 26.9s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 30.1s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 26.9s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 30.1s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimEmail:after {
  -webkit-animation: mouseMoveToEmailBtn 0.2s cubic-bezier(1, 0, 0, 1) 28.7s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 28.9s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 29.2s 1 normal forwards;
       -o-animation: mouseMoveToEmailBtn 0.2s cubic-bezier(1, 0, 0, 1) 28.7s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 28.9s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 29.2s 1 normal forwards;
          animation: mouseMoveToEmailBtn 0.2s cubic-bezier(1, 0, 0, 1) 28.7s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 28.9s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 29.2s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimEmail .formAnimField--hireEmail .formAnimField__inner {
  -webkit-animation: formAnimField 1.3s linear 27.4s 1 normal forwards;
       -o-animation: formAnimField 1.3s linear 27.4s 1 normal forwards;
          animation: formAnimField 1.3s linear 27.4s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimEmail .formAnimField--hireEmail .formAnimField__label {
  -webkit-animation: formAnimFieldLabel 0.2s linear 27.7s 1 normal forwards;
       -o-animation: formAnimFieldLabel 0.2s linear 27.7s 1 normal forwards;
          animation: formAnimFieldLabel 0.2s linear 27.7s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimEmail .formAnimField--hireEmail .formAnimField__value > span:nth-child(1) {
  -webkit-animation: typing 0.08s linear 27.7s 1 normal forwards;
       -o-animation: typing 0.08s linear 27.7s 1 normal forwards;
          animation: typing 0.08s linear 27.7s 1 normal forwards;
  animation: typing 0.08s linear 27.7s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimEmail .formAnimField--hireEmail .formAnimField__value > span:nth-child(2) {
  -webkit-animation: typing 0.08s linear 27.78s 1 normal forwards;
       -o-animation: typing 0.08s linear 27.78s 1 normal forwards;
          animation: typing 0.08s linear 27.78s 1 normal forwards;
  animation: typing 0.08s linear 27.78s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimEmail .formAnimField--hireEmail .formAnimField__value > span:nth-child(3) {
  -webkit-animation: typing 0.08s linear 27.86s 1 normal forwards;
       -o-animation: typing 0.08s linear 27.86s 1 normal forwards;
          animation: typing 0.08s linear 27.86s 1 normal forwards;
  animation: typing 0.08s linear 27.86s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimEmail .formAnimField--hireEmail .formAnimField__value > span:nth-child(4) {
  -webkit-animation: typing 0.08s linear 27.94s 1 normal forwards;
       -o-animation: typing 0.08s linear 27.94s 1 normal forwards;
          animation: typing 0.08s linear 27.94s 1 normal forwards;
  animation: typing 0.08s linear 27.94s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimEmail .formAnimField--hireEmail .formAnimField__value > span:nth-child(5) {
  -webkit-animation: typing 0.08s linear 28.02s 1 normal forwards;
       -o-animation: typing 0.08s linear 28.02s 1 normal forwards;
          animation: typing 0.08s linear 28.02s 1 normal forwards;
  animation: typing 0.08s linear 28.02s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimEmail .formAnimField--hireEmail .formAnimField__value > span:nth-child(6) {
  -webkit-animation: typing 0.08s linear 28.1s 1 normal forwards;
       -o-animation: typing 0.08s linear 28.1s 1 normal forwards;
          animation: typing 0.08s linear 28.1s 1 normal forwards;
  animation: typing 0.08s linear 28.1s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimEmail .formAnimField--hireEmail .formAnimField__value > span:nth-child(7) {
  -webkit-animation: typing 0.08s linear 28.18s 1 normal forwards;
       -o-animation: typing 0.08s linear 28.18s 1 normal forwards;
          animation: typing 0.08s linear 28.18s 1 normal forwards;
  animation: typing 0.08s linear 28.18s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimEmail .formAnimField--hireEmail .formAnimField__value > span:nth-child(8) {
  -webkit-animation: typing 0.08s linear 28.26s 1 normal forwards;
       -o-animation: typing 0.08s linear 28.26s 1 normal forwards;
          animation: typing 0.08s linear 28.26s 1 normal forwards;
  animation: typing 0.08s linear 28.26s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimEmail .formAnimField--hireEmail .formAnimField__value > span:nth-child(9) {
  -webkit-animation: typing 0.08s linear 28.34s 1 normal forwards;
       -o-animation: typing 0.08s linear 28.34s 1 normal forwards;
          animation: typing 0.08s linear 28.34s 1 normal forwards;
  animation: typing 0.08s linear 28.34s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimEmail .formAnimField--hireEmail .formAnimField__value > span:nth-child(10) {
  -webkit-animation: typing 0.08s linear 28.42s 1 normal forwards;
       -o-animation: typing 0.08s linear 28.42s 1 normal forwards;
          animation: typing 0.08s linear 28.42s 1 normal forwards;
  animation: typing 0.08s linear 28.42s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimEmail .formSubmit__btn {
  -webkit-animation: buttonClick 0.2s linear 29.2s 1 normal forwards;
       -o-animation: buttonClick 0.2s linear 29.2s 1 normal forwards;
          animation: buttonClick 0.2s linear 29.2s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimAccount {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 30.4s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 40.9s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 30.4s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 40.9s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 30.4s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 40.9s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimAccount .formAnimField--accounts {
  -webkit-animation: backgroundScroll 9s cubic-bezier(0.645, 0.045, 0.905, 1.125) 31.2s 1 normal forwards;
       -o-animation: backgroundScroll 9s cubic-bezier(0.645, 0.045, 0.905, 1.125) 31.2s 1 normal forwards;
          animation: backgroundScroll 9s cubic-bezier(0.645, 0.045, 0.905, 1.125) 31.2s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimAccount .accountPop--b {
  -webkit-animation: showPopAnim 0.1s cubic-bezier(0.645, 0.045, 0.905, 1.125) 31.9s 1 normal forwards, hidePopAnim 0.1s cubic-bezier(0.645, 0.045, 0.905, 1.125) 35.9s 1 normal forwards;
       -o-animation: showPopAnim 0.1s cubic-bezier(0.645, 0.045, 0.905, 1.125) 31.9s 1 normal forwards, hidePopAnim 0.1s cubic-bezier(0.645, 0.045, 0.905, 1.125) 35.9s 1 normal forwards;
          animation: showPopAnim 0.1s cubic-bezier(0.645, 0.045, 0.905, 1.125) 31.9s 1 normal forwards, hidePopAnim 0.1s cubic-bezier(0.645, 0.045, 0.905, 1.125) 35.9s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimAccount .accountPop--c {
  -webkit-animation: showPopAnim 0.1s cubic-bezier(0.645, 0.045, 0.905, 1.125) 35.9s 1 normal forwards, hidePopAnim 0.1s cubic-bezier(0.645, 0.045, 0.905, 1.125) 39.9s 1 normal forwards;
       -o-animation: showPopAnim 0.1s cubic-bezier(0.645, 0.045, 0.905, 1.125) 35.9s 1 normal forwards, hidePopAnim 0.1s cubic-bezier(0.645, 0.045, 0.905, 1.125) 39.9s 1 normal forwards;
          animation: showPopAnim 0.1s cubic-bezier(0.645, 0.045, 0.905, 1.125) 35.9s 1 normal forwards, hidePopAnim 0.1s cubic-bezier(0.645, 0.045, 0.905, 1.125) 39.9s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimOffer {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 41.2s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 47.2s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 41.2s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 47.2s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 41.2s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 47.2s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimOffer:after {
  -webkit-animation: mouseMoveToOfferLetter 0.2s cubic-bezier(1, 0, 0, 1) 41.6s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 41.8s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 42s 1 normal forwards, mouseToPointer0 0s cubic-bezier(1, 0, 0, 1) 44.25s 1 normal forwards, mouseMoveToAgreement 0.2s cubic-bezier(1, 0, 0, 1) 44.2s 1 normal forwards, mouseToCursor1 0s cubic-bezier(1, 0, 0, 1) 44.4s 1 normal forwards, mouseClick1 0.1s cubic-bezier(1, 0, 0, 1) 44.6s 1 normal forwards, mouseToPointer1 0s cubic-bezier(1, 0, 0, 1) 45.75s 1 normal forwards, mouseMoveToOfferLetterBtn 0.2s cubic-bezier(1, 0, 0, 1) 45.7s 1 normal forwards, mouseToCursor2 0s cubic-bezier(1, 0, 0, 1) 45.9s 1 normal forwards, mouseClick2 0.1s cubic-bezier(1, 0, 0, 1) 46.1s 1 normal forwards;
       -o-animation: mouseMoveToOfferLetter 0.2s cubic-bezier(1, 0, 0, 1) 41.6s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 41.8s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 42s 1 normal forwards, mouseToPointer0 0s cubic-bezier(1, 0, 0, 1) 44.25s 1 normal forwards, mouseMoveToAgreement 0.2s cubic-bezier(1, 0, 0, 1) 44.2s 1 normal forwards, mouseToCursor1 0s cubic-bezier(1, 0, 0, 1) 44.4s 1 normal forwards, mouseClick1 0.1s cubic-bezier(1, 0, 0, 1) 44.6s 1 normal forwards, mouseToPointer1 0s cubic-bezier(1, 0, 0, 1) 45.75s 1 normal forwards, mouseMoveToOfferLetterBtn 0.2s cubic-bezier(1, 0, 0, 1) 45.7s 1 normal forwards, mouseToCursor2 0s cubic-bezier(1, 0, 0, 1) 45.9s 1 normal forwards, mouseClick2 0.1s cubic-bezier(1, 0, 0, 1) 46.1s 1 normal forwards;
          animation: mouseMoveToOfferLetter 0.2s cubic-bezier(1, 0, 0, 1) 41.6s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 41.8s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 42s 1 normal forwards, mouseToPointer0 0s cubic-bezier(1, 0, 0, 1) 44.25s 1 normal forwards, mouseMoveToAgreement 0.2s cubic-bezier(1, 0, 0, 1) 44.2s 1 normal forwards, mouseToCursor1 0s cubic-bezier(1, 0, 0, 1) 44.4s 1 normal forwards, mouseClick1 0.1s cubic-bezier(1, 0, 0, 1) 44.6s 1 normal forwards, mouseToPointer1 0s cubic-bezier(1, 0, 0, 1) 45.75s 1 normal forwards, mouseMoveToOfferLetterBtn 0.2s cubic-bezier(1, 0, 0, 1) 45.7s 1 normal forwards, mouseToCursor2 0s cubic-bezier(1, 0, 0, 1) 45.9s 1 normal forwards, mouseClick2 0.1s cubic-bezier(1, 0, 0, 1) 46.1s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimOffer .formAnimField--hireOffer {
  -webkit-animation: showHover 0.1s linear 41.7s 1 normal forwards, hideHover 0.1s linear 42.5s 1 normal forwards, showFocus 0.2s linear 42.5s 1 normal forwards, hideFocus 0.2s linear 43.3s 1 normal forwards, showHover 0.1s linear 43.3s 1 normal forwards, hideHover 0.1s linear 44.1s 1 normal forwards;
       -o-animation: showHover 0.1s linear 41.7s 1 normal forwards, hideHover 0.1s linear 42.5s 1 normal forwards, showFocus 0.2s linear 42.5s 1 normal forwards, hideFocus 0.2s linear 43.3s 1 normal forwards, showHover 0.1s linear 43.3s 1 normal forwards, hideHover 0.1s linear 44.1s 1 normal forwards;
          animation: showHover 0.1s linear 41.7s 1 normal forwards, hideHover 0.1s linear 42.5s 1 normal forwards, showFocus 0.2s linear 42.5s 1 normal forwards, hideFocus 0.2s linear 43.3s 1 normal forwards, showHover 0.1s linear 43.3s 1 normal forwards, hideHover 0.1s linear 44.1s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimOffer .formAnimField--hireOffer .formAnimDropdown__content {
  -webkit-animation: offerLetterExpandAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 42.5s 1 normal forwards, offerLetterCollapseAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 43.3s 1 normal forwards;
       -o-animation: offerLetterExpandAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 42.5s 1 normal forwards, offerLetterCollapseAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 43.3s 1 normal forwards;
          animation: offerLetterExpandAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 42.5s 1 normal forwards, offerLetterCollapseAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 43.3s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimOffer .formAnimField--hireOffer .formAnimField__label {
  -webkit-animation: formAnimFieldLabel 0.2s linear 43.3s 1 normal forwards;
       -o-animation: formAnimFieldLabel 0.2s linear 43.3s 1 normal forwards;
          animation: formAnimFieldLabel 0.2s linear 43.3s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimOffer .formAnimField--hireOffer .formAnimField__value {
  opacity: 0;
  max-width: 100%;
  -webkit-animation: showAnim 0.2s linear 43.3s 1 normal forwards;
       -o-animation: showAnim 0.2s linear 43.3s 1 normal forwards;
          animation: showAnim 0.2s linear 43.3s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimOffer .formAnimField--agreement {
  -webkit-animation: formAnimFieldAgreement 0s linear 44.7s 1 normal forwards;
       -o-animation: formAnimFieldAgreement 0s linear 44.7s 1 normal forwards;
          animation: formAnimFieldAgreement 0s linear 44.7s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimOffer .formSubmit__btn {
  -webkit-animation: buttonClick 0.2s linear 46.1s 1 normal forwards;
       -o-animation: buttonClick 0.2s linear 46.1s 1 normal forwards;
          animation: buttonClick 0.2s linear 46.1s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimSendOffer {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 47.5s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 56.5s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 47.5s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 56.5s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 47.5s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 56.5s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimSendOffer .formAnimField--sendOffer {
  -webkit-animation: backgroundScroll 2s cubic-bezier(0.645, 0.045, 0.905, 1.125) 49.5s 1 normal forwards;
       -o-animation: backgroundScroll 2s cubic-bezier(0.645, 0.045, 0.905, 1.125) 49.5s 1 normal forwards;
          animation: backgroundScroll 2s cubic-bezier(0.645, 0.045, 0.905, 1.125) 49.5s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimSendOffer .sendOfferPop {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 52.5s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 52.5s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 52.5s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimSendOffer .sendOfferPop:before {
  -webkit-animation: signAnim 1s 53.3s steps(85) forwards;
       -o-animation: signAnim 1s 53.3s steps(85) forwards;
          animation: signAnim 1s 53.3s steps(85) forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimSendOffer .sendOfferPop:after {
  -webkit-animation: buttonClick 0.2s linear 55.9s 1 normal forwards;
       -o-animation: buttonClick 0.2s linear 55.9s 1 normal forwards;
          animation: buttonClick 0.2s linear 55.9s 1 normal forwards;
}

.homePageAnimation .hireAnim--animate .hireAnimSendOffer:after {
  -webkit-animation: mouseMoveToSendOfferBtnMobile 0.4s cubic-bezier(1, 0, 0, 1) 55s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 55.35s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 55.9s 1 normal forwards;
       -o-animation: mouseMoveToSendOfferBtnMobile 0.4s cubic-bezier(1, 0, 0, 1) 55s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 55.35s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 55.9s 1 normal forwards;
          animation: mouseMoveToSendOfferBtnMobile 0.4s cubic-bezier(1, 0, 0, 1) 55s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 55.35s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 55.9s 1 normal forwards;
}

@media screen and (min-width: 768px) {
  .homePageAnimation .hireAnim--animate .hireAnimSendOffer:after {
    -webkit-animation: mouseMoveToSendOfferBtn 0.4s cubic-bezier(1, 0, 0, 1) 55s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 55.35s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 55.9s 1 normal forwards;
         -o-animation: mouseMoveToSendOfferBtn 0.4s cubic-bezier(1, 0, 0, 1) 55s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 55.35s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 55.9s 1 normal forwards;
            animation: mouseMoveToSendOfferBtn 0.4s cubic-bezier(1, 0, 0, 1) 55s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 55.35s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 55.9s 1 normal forwards;
  }
}

.homePageAnimation .hireAnim--animate .hireAnimDone {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 56.8s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 58.2s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 56.8s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 58.2s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 56.8s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 58.2s 1 normal forwards;
}

.formAnim {
  padding: 10px 0 20px;
}

.formAnim--hirizontalPadding {
  padding: 10px 20px 0px;
}

.formAnim--noPadding {
  padding: 0;
}

.formAnim--inline {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.formAnimField {
  position: relative;
  width: 240px;
  margin: 8px auto;
  padding: 0 8px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 1px solid transparent;
  font-family: ripplingFontNormal;
  font-size: 12px;
  -webkit-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.formAnimField__inner {
  position: relative;
  padding: 8px 0 3px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  border: 1px solid transparent;
  border-bottom: 1px solid #CCCCCC;
}

.formAnimField__label {
  position: absolute;
  top: 8px;
  left: 0;
  color: #CCCCCC;
  font-size: 12px;
  font-family: ripplingFontNormal;
  -webkit-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.formAnimField__value {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  white-space: nowrap;
  overflow: hidden;
  color: #000000;
}

.formAnimField__value > span {
  color: transparent;
  border-right: .6px solid transparent;
}

.formAnimField__value > span:last-child {
  padding-right: 2px;
}

.formAnimField__valueFinal {
  position: absolute;
  bottom: 3px;
  left: 0;
  background-color: #fff;
  opacity: 0;
}

.formAnimField__suffix {
  position: absolute;
  top: 8px;
  right: 0;
  color: #000000;
}

.formAnimField--select .formAnimField__value {
  opacity: 0;
}

.formAnimField--date .formAnimField__label:before {
  content: '\F073';
  font-family: fontIcons;
  margin-right: 5px;
}

.formAnimField--time .formAnimField__label:before {
  content: '\F017';
  font-family: fontIcons;
  margin-right: 5px;
}

.formAnimField--wide {
  width: 100%;
}

.formAnimField--range {
  width: 100%;
  padding: 22px 0;
  position: relative;
  font-size: 12px;
}

.formAnimField--range .rangeLine {
  height: 3px;
  background-color: #ededed;
  position: relative;
}

.formAnimField--range .rangeLine:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background-color: #22c8e3;
}

.formAnimField--range .rangeVal {
  position: absolute;
  top: -1px;
  left: -4px;
  text-align: center;
}

.formAnimField--range .rangeVal > span {
  opacity: 0;
}

.formAnimField--range .rangeVal:after {
  content: '';
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background-color: #22c8e3;
  display: block;
}

.formAnimField--range .rangeMin {
  position: absolute;
  bottom: 0;
  left: 0;
}

.formAnimField--range .rangeMax {
  position: absolute;
  bottom: 0;
  right: 0;
}

.formAnimField--radio {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.formAnimField--radio .radioBox {
  width: 100px;
  height: 120px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  background-color: transparent;
  border: 1px solid #CECECE;
  -webkit-transition: all 0.1s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.1s cubic-bezier(1, 0, 0, 1);
  transition: all 0.1s cubic-bezier(1, 0, 0, 1);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  -webkit-transform: translateY(0);
       -o-transform: translateY(0);
          transform: translateY(0);
}

.formAnimField--radio .radioBox__check {
  position: relative;
  margin-top: 20px;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  border: 2px solid #CECECE;
  background-color: #ffffff;
  color: #CECECE;
  text-align: center;
  font-family: fontIcons;
  line-height: 36px;
}

.formAnimField--radio .radioBox__check:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.formAnimField--radio .radioBox__check--yes:before {
  content: '\F00C';
}

.formAnimField--radio .radioBox__check--no:before {
  content: '\F00D';
}

.formAnimField--radio .radioBox__title {
  color: #999999;
  -webkit-box-flex: 100%;
      -ms-flex: 100%;
          flex: 100%;
  text-align: center;
  font-family: ripplingFontMedium;
}

.formAnimField--radio .radioBox:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #01C8E5;
  opacity: 0;
  -webkit-transform: translateY(0);
       -o-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition: all 0.1s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.1s cubic-bezier(1, 0, 0, 1);
  transition: all 0.1s cubic-bezier(1, 0, 0, 1);
}

.formAnimField--radio .radioBox:not(:last-child) {
  margin-right: 20px;
}

.formAnimField--hardware {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: 30px;
}

.formAnimField--hardware > div {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  height: 100px;
  width: 75px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
  border-bottom-color: transparent;
  border: 1px solid #CECECE;
  -webkit-box-shadow: none;
          box-shadow: none;
  -webkit-transition: all 0.1s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.1s cubic-bezier(1, 0, 0, 1);
  transition: all 0.1s cubic-bezier(1, 0, 0, 1);
}

.formAnimField--hardware > div:not(:last-child) {
  margin-right: 15px;
}

.formAnimField--hardware > div:nth-child(1) {
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_hw_none.svg");
}

.formAnimField--hardware > div:nth-child(2) {
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_hw_byol.svg");
}

.formAnimField--hardware > div:nth-child(3) {
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_hw_macbook.svg");
}

.formAnimField--hardware > div:nth-child(4) {
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_hw_imac.svg");
}

.formAnimField--software {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  padding: 0 16px;
  margin-bottom: 30px;
}

.formAnimField--software > div {
  position: relative;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  height: 100px;
  width: 75px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
  border-bottom-color: transparent;
  border: 1px solid #CECECE;
  -webkit-box-shadow: none;
          box-shadow: none;
  -webkit-transition: all 0.1s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.1s cubic-bezier(1, 0, 0, 1);
  transition: all 0.1s cubic-bezier(1, 0, 0, 1);
}

.formAnimField--software > div:not(:last-child) {
  margin-right: 15px;
}

.formAnimField--software > div:nth-child(1) {
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_code.svg");
}

.formAnimField--software > div:nth-child(2) {
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_slack.svg");
}

.formAnimField--software > div:nth-child(3) {
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_xd.svg");
}

.formAnimField--software > div:nth-child(4) {
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_photoshop.svg");
  margin-right: 0;
}

.formAnimField--software > div:nth-child(5) {
  margin-top: 15px;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_chrome.svg");
}

.formAnimField--software > div:nth-child(6) {
  margin-top: 15px;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_powerpoint.svg");
}

.formAnimField--software > div:nth-child(7) {
  margin-top: 15px;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_word.svg");
}

.formAnimField--software > div:nth-child(8) {
  margin-top: 15px;
  margin-right: 0;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_excel.svg");
}

.formAnimField--software > div:after {
  content: '\F00C';
  font-family: fontIcons;
  position: absolute;
  right: -10px;
  top: 30px;
  height: 20px;
  width: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 10px;
  color: #ffffff;
  background-color: #00A95E;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
}

.formAnimField--accounts {
  height: 160px;
  width: 100%;
  margin: 0;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_acc.svg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  border-bottom-color: transparent;
}

.formAnimField--agreement {
  margin: 30px auto 20px;
  height: 100px;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_agreement_op.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
  border-bottom-color: transparent;
}

.formAnimField--sendOffer {
  margin: 0;
  height: 350px;
  width: 100%;
  border: 0;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_offer.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  border-bottom-color: transparent;
}

.formAnimField--sendServerance {
  margin: 0;
  height: 350px;
  width: 100%;
  border: 0;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/ops-animation/ops_anim_severance_agreement.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  border-bottom-color: transparent;
}

.formAnimField--done {
  margin-top: 32px;
  height: calc(350px - 70px);
  width: 100%;
  border: 0;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_done.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  border-bottom-color: transparent;
}

.formAnimDropdown {
  position: absolute;
  z-index: 1;
  top: 100%;
  left: -10px;
  width: calc(100% + 20px);
}

.formAnimDropdown__content {
  height: 0;
  background-size: 94%;
  background-repeat: no-repeat;
  background-position: center top;
  background-color: #ffffff;
  -webkit-box-shadow: inset 0 -1px 0 0 #01C8E5, inset 1px 0 0 0 #01C8E5, inset -1px 0 0 0 #01C8E5;
          box-shadow: inset 0 -1px 0 0 #01C8E5, inset 1px 0 0 0 #01C8E5, inset -1px 0 0 0 #01C8E5;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.formSubmit {
  padding: 10px 0;
  text-align: center;
}

.formSubmit__btn {
  display: inline-block;
  padding: 6px 25px;
  text-transform: uppercase;
  font-family: ripplingFontMedium;
  font-size: 12px;
  color: #ffffff;
  background-color: #01C8E5;
  opacity: 1;
  -webkit-transform: perspective(1px) scale(1);
          transform: perspective(1px) scale(1);
  -webkit-font-smoothing: antialiased;
}

.formSubmit__btn--large {
  font-size: 14px;
}

.formTag {
  position: absolute;
  background-color: #f5f5f5;
  font-size: 16px;
  font-family: ripplingFontNormal;
  padding: 4px 4px 3px;
  border-radius: 0;
}

.formTag.pop {
  opacity: 0;
}

.formTag.typing {
  background-color: transparent;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  white-space: nowrap;
  overflow: hidden;
  color: #000000;
}

.formTag.typing > span {
  color: transparent;
  border-right: .6px solid transparent;
}

.formTag.typing > span:last-child {
  padding-right: 2px;
}

.formTagSuggest {
  position: absolute;
  width: 280px;
  height: 0;
  -webkit-box-shadow: 0 2px 10px 0 rgba(91, 98, 99, 0.4);
          box-shadow: 0 2px 10px 0 rgba(91, 98, 99, 0.4);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
}

.formTagSuggest.dept {
  background-image: url("https://cdn.rippling.com/static/marketing/assets/hr-animation/report-pop-dept.png");
}

.formTagSuggest.deptDesign {
  background-image: url("https://cdn.rippling.com/static/marketing/assets/it-animation/report-pop-dept-design.png");
}

.formTagSuggest.deptSales {
  background-image: url("https://cdn.rippling.com/static/marketing/assets/it-animation/report-pop-dept-sales.png");
}

.formTagSuggest.groupFulltime {
  background-image: url("https://cdn.rippling.com/static/marketing/assets/it-animation/report-pop-group-full-time.png");
}

.assignGroup {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 16px;
  white-space: nowrap;
}

.assignGroup__label {
  padding: 5px;
}

.assignGroup__data {
  text-align: left;
  padding: 5px;
  background-color: #22c8e3;
  color: #fff;
  border-radius: 4px;
  overflow: hidden;
  height: 24px;
  opacity: 0;
}

.assignGroup__tag {
  position: absolute;
  z-index: -1;
}

.assignGroup__tag.typing {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  white-space: nowrap;
  overflow: hidden;
  color: #000000;
}

.assignGroup__tag.typing > span {
  color: transparent;
  border-right: .6px solid transparent;
}

.assignGroup__tag.typing > span:last-child {
  padding-right: 2px;
}

@media screen and (min-width: 768px) {
  .assignGroup__data {
    height: 30px;
  }
}

.popAnimShow {
  -webkit-transform-origin: center;
       -o-transform-origin: center;
          transform-origin: center;
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s 1 normal forwards;
}

.popAnimHide {
  -webkit-transform-origin: center;
       -o-transform-origin: center;
          transform-origin: center;
  -webkit-animation: hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 0s 1 normal forwards;
       -o-animation: hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 0s 1 normal forwards;
          animation: hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 0s 1 normal forwards;
}

@-webkit-keyframes signAnim {
  to {
    background-position: 0 -7140px;
  }
}

@-o-keyframes signAnim {
  to {
    background-position: 0 -7140px;
  }
}

@keyframes signAnim {
  to {
    background-position: 0 -7140px;
  }
}

@-webkit-keyframes deptExpandAnim {
  0% {
    height: 0;
  }

  100% {
    height: 110px;
  }
}

@-o-keyframes deptExpandAnim {
  0% {
    height: 0;
  }

  100% {
    height: 110px;
  }
}

@keyframes deptExpandAnim {
  0% {
    height: 0;
  }

  100% {
    height: 110px;
  }
}

@-webkit-keyframes deptCollapseAnim {
  0% {
    height: 110px;
  }

  100% {
    height: 0;
  }
}

@-o-keyframes deptCollapseAnim {
  0% {
    height: 110px;
  }

  100% {
    height: 0;
  }
}

@keyframes deptCollapseAnim {
  0% {
    height: 110px;
  }

  100% {
    height: 0;
  }
}

@-webkit-keyframes empTypeExpandAnim {
  0% {
    height: 0;
  }

  100% {
    height: 125px;
  }
}

@-o-keyframes empTypeExpandAnim {
  0% {
    height: 0;
  }

  100% {
    height: 125px;
  }
}

@keyframes empTypeExpandAnim {
  0% {
    height: 0;
  }

  100% {
    height: 125px;
  }
}

@-webkit-keyframes empTypeCollapseAnim {
  0% {
    height: 125px;
  }

  100% {
    height: 0;
  }
}

@-o-keyframes empTypeCollapseAnim {
  0% {
    height: 125px;
  }

  100% {
    height: 0;
  }
}

@keyframes empTypeCollapseAnim {
  0% {
    height: 125px;
  }

  100% {
    height: 0;
  }
}

@-webkit-keyframes offerLetterExpandAnim {
  0% {
    height: 0;
  }

  100% {
    height: 100px;
  }
}

@-o-keyframes offerLetterExpandAnim {
  0% {
    height: 0;
  }

  100% {
    height: 100px;
  }
}

@keyframes offerLetterExpandAnim {
  0% {
    height: 0;
  }

  100% {
    height: 100px;
  }
}

@-webkit-keyframes offerLetterCollapseAnim {
  0% {
    height: 100px;
  }

  100% {
    height: 0;
  }
}

@-o-keyframes offerLetterCollapseAnim {
  0% {
    height: 100px;
  }

  100% {
    height: 0;
  }
}

@keyframes offerLetterCollapseAnim {
  0% {
    height: 100px;
  }

  100% {
    height: 0;
  }
}

@-webkit-keyframes showAnim {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-o-keyframes showAnim {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes showAnim {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-webkit-keyframes showHover {
  0% {
    background-color: transparent;
  }

  100% {
    background-color: #F8F8F8;
  }
}

@-o-keyframes showHover {
  0% {
    background-color: transparent;
  }

  100% {
    background-color: #F8F8F8;
  }
}

@keyframes showHover {
  0% {
    background-color: transparent;
  }

  100% {
    background-color: #F8F8F8;
  }
}

@-webkit-keyframes hideHover {
  0% {
    background-color: #F8F8F8;
  }

  100% {
    background-color: transparent;
  }
}

@-o-keyframes hideHover {
  0% {
    background-color: #F8F8F8;
  }

  100% {
    background-color: transparent;
  }
}

@keyframes hideHover {
  0% {
    background-color: #F8F8F8;
  }

  100% {
    background-color: transparent;
  }
}

@-webkit-keyframes showHoverBlue {
  to {
    background-color: #01C8E5;
  }
}

@-o-keyframes showHoverBlue {
  to {
    background-color: #01C8E5;
  }
}

@keyframes showHoverBlue {
  to {
    background-color: #01C8E5;
  }
}

@-webkit-keyframes showHoverColor {
  0% {
    color: #999999;
  }

  100% {
    color: #01C8E5;
  }
}

@-o-keyframes showHoverColor {
  0% {
    color: #999999;
  }

  100% {
    color: #01C8E5;
  }
}

@keyframes showHoverColor {
  0% {
    color: #999999;
  }

  100% {
    color: #01C8E5;
  }
}

@-webkit-keyframes showHoverLightColor {
  0% {
    color: #01C8E5;
  }

  100% {
    color: #ffffff;
  }
}

@-o-keyframes showHoverLightColor {
  0% {
    color: #01C8E5;
  }

  100% {
    color: #ffffff;
  }
}

@keyframes showHoverLightColor {
  0% {
    color: #01C8E5;
  }

  100% {
    color: #ffffff;
  }
}

@-webkit-keyframes showHoverColorBlue {
  to {
    color: #01C8E5;
  }
}

@-o-keyframes showHoverColorBlue {
  to {
    color: #01C8E5;
  }
}

@keyframes showHoverColorBlue {
  to {
    color: #01C8E5;
  }
}

@-webkit-keyframes showHoverColorBlack {
  to {
    color: #000;
  }
}

@-o-keyframes showHoverColorBlack {
  to {
    color: #000;
  }
}

@keyframes showHoverColorBlack {
  to {
    color: #000;
  }
}

@-webkit-keyframes hideHoverColor {
  0% {
    color: #01C8E5;
  }

  100% {
    color: #999999;
  }
}

@-o-keyframes hideHoverColor {
  0% {
    color: #01C8E5;
  }

  100% {
    color: #999999;
  }
}

@keyframes hideHoverColor {
  0% {
    color: #01C8E5;
  }

  100% {
    color: #999999;
  }
}

@-webkit-keyframes showHoverBorderColor {
  0% {
    border-color: #CECECE;
  }

  100% {
    border-color: #01C8E5;
  }
}

@-o-keyframes showHoverBorderColor {
  0% {
    border-color: #CECECE;
  }

  100% {
    border-color: #01C8E5;
  }
}

@keyframes showHoverBorderColor {
  0% {
    border-color: #CECECE;
  }

  100% {
    border-color: #01C8E5;
  }
}

@-webkit-keyframes hideHoverBorderColor {
  0% {
    border-color: #01C8E5;
  }

  100% {
    border-color: #CECECE;
  }
}

@-o-keyframes hideHoverBorderColor {
  0% {
    border-color: #01C8E5;
  }

  100% {
    border-color: #CECECE;
  }
}

@keyframes hideHoverBorderColor {
  0% {
    border-color: #01C8E5;
  }

  100% {
    border-color: #CECECE;
  }
}

@-webkit-keyframes showFocus {
  0% {
    border-color: transparent;
  }

  100% {
    border-color: #01C8E5;
  }
}

@-o-keyframes showFocus {
  0% {
    border-color: transparent;
  }

  100% {
    border-color: #01C8E5;
  }
}

@keyframes showFocus {
  0% {
    border-color: transparent;
  }

  100% {
    border-color: #01C8E5;
  }
}

@-webkit-keyframes hideFocus {
  0% {
    border-color: #01C8E5;
  }

  100% {
    border-color: transparent;
  }
}

@-o-keyframes hideFocus {
  0% {
    border-color: #01C8E5;
  }

  100% {
    border-color: transparent;
  }
}

@keyframes hideFocus {
  0% {
    border-color: #01C8E5;
  }

  100% {
    border-color: transparent;
  }
}

@-webkit-keyframes hideAnim {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@-o-keyframes hideAnim {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes hideAnim {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@-webkit-keyframes hideAnim1 {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@-o-keyframes hideAnim1 {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes hideAnim1 {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@-webkit-keyframes showPopAnim {
  0% {
    -webkit-transform: perspective(1px) scale(0);
            transform: perspective(1px) scale(0);
  }

  100% {
    -webkit-transform: perspective(1px) scale(1);
            transform: perspective(1px) scale(1);
  }
}

@-o-keyframes showPopAnim {
  0% {
    transform: perspective(1px) scale(0);
  }

  100% {
    transform: perspective(1px) scale(1);
  }
}

@keyframes showPopAnim {
  0% {
    -webkit-transform: perspective(1px) scale(0);
            transform: perspective(1px) scale(0);
  }

  100% {
    -webkit-transform: perspective(1px) scale(1);
            transform: perspective(1px) scale(1);
  }
}

@-webkit-keyframes hidePopAnim {
  0% {
    -webkit-transform: perspective(1px) scale(1);
            transform: perspective(1px) scale(1);
  }

  100% {
    -webkit-transform: perspective(1px) scale(0);
            transform: perspective(1px) scale(0);
  }
}

@-o-keyframes hidePopAnim {
  0% {
    transform: perspective(1px) scale(1);
  }

  100% {
    transform: perspective(1px) scale(0);
  }
}

@keyframes hidePopAnim {
  0% {
    -webkit-transform: perspective(1px) scale(1);
            transform: perspective(1px) scale(1);
  }

  100% {
    -webkit-transform: perspective(1px) scale(0);
            transform: perspective(1px) scale(0);
  }
}

@-webkit-keyframes showHoverShadow {
  from {
    -webkit-box-shadow: none;
            box-shadow: none;
  }

  to {
    -webkit-box-shadow: 0 2px 10px 0 rgba(91, 98, 99, 0.4);
            box-shadow: 0 2px 10px 0 rgba(91, 98, 99, 0.4);
  }
}

@-o-keyframes showHoverShadow {
  from {
    box-shadow: none;
  }

  to {
    box-shadow: 0 2px 10px 0 rgba(91, 98, 99, 0.4);
  }
}

@keyframes showHoverShadow {
  from {
    -webkit-box-shadow: none;
            box-shadow: none;
  }

  to {
    -webkit-box-shadow: 0 2px 10px 0 rgba(91, 98, 99, 0.4);
            box-shadow: 0 2px 10px 0 rgba(91, 98, 99, 0.4);
  }
}

@-webkit-keyframes hideHoverShadow {
  from {
    -webkit-box-shadow: 0 2px 10px 0 rgba(91, 98, 99, 0.4);
            box-shadow: 0 2px 10px 0 rgba(91, 98, 99, 0.4);
  }

  to {
    -webkit-box-shadow: none;
            box-shadow: none;
  }
}

@-o-keyframes hideHoverShadow {
  from {
    box-shadow: 0 2px 10px 0 rgba(91, 98, 99, 0.4);
  }

  to {
    box-shadow: none;
  }
}

@keyframes hideHoverShadow {
  from {
    -webkit-box-shadow: 0 2px 10px 0 rgba(91, 98, 99, 0.4);
            box-shadow: 0 2px 10px 0 rgba(91, 98, 99, 0.4);
  }

  to {
    -webkit-box-shadow: none;
            box-shadow: none;
  }
}

@-webkit-keyframes typing {
  0% {
    color: #000;
    border-color: transparent;
    border-width: 1;
  }

  10% {
    color: #000;
    border-color: #01C8E5;
    border-width: 1;
  }

  90% {
    color: #000;
    border-color: #01C8E5;
    border-width: 1;
  }

  100% {
    color: #000;
    border-color: transparent;
    border-width: 0;
  }
}

@-o-keyframes typing {
  0% {
    color: #000;
    border-color: transparent;
    border-width: 1;
  }

  10% {
    color: #000;
    border-color: #01C8E5;
    border-width: 1;
  }

  90% {
    color: #000;
    border-color: #01C8E5;
    border-width: 1;
  }

  100% {
    color: #000;
    border-color: transparent;
    border-width: 0;
  }
}

@keyframes typing {
  0% {
    color: #000;
    border-color: transparent;
    border-width: 1;
  }

  10% {
    color: #000;
    border-color: #01C8E5;
    border-width: 1;
  }

  90% {
    color: #000;
    border-color: #01C8E5;
    border-width: 1;
  }

  100% {
    color: #000;
    border-color: transparent;
    border-width: 0;
  }
}

@-webkit-keyframes formAnimField {
  30% {
    border-bottom-color: #01C8E5;
  }

  80% {
    border-bottom-color: #01C8E5;
  }

  100% {
    border-bottom-color: #CCCCCC;
  }
}

@-o-keyframes formAnimField {
  30% {
    border-bottom-color: #01C8E5;
  }

  80% {
    border-bottom-color: #01C8E5;
  }

  100% {
    border-bottom-color: #CCCCCC;
  }
}

@keyframes formAnimField {
  30% {
    border-bottom-color: #01C8E5;
  }

  80% {
    border-bottom-color: #01C8E5;
  }

  100% {
    border-bottom-color: #CCCCCC;
  }
}

@-webkit-keyframes formAnimFieldAgreement {
  0% {
    background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_agreement_op.png");
  }

  100% {
    background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_agreement_op_selected.png");
  }
}

@-o-keyframes formAnimFieldAgreement {
  0% {
    background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_agreement_op.png");
  }

  100% {
    background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_agreement_op_selected.png");
  }
}

@keyframes formAnimFieldAgreement {
  0% {
    background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_agreement_op.png");
  }

  100% {
    background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_agreement_op_selected.png");
  }
}

@-webkit-keyframes deptBackAnim {
  0% {
    background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_dept.svg");
  }

  100% {
    background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_dept_h.svg");
  }
}

@-o-keyframes deptBackAnim {
  0% {
    background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_dept.svg");
  }

  100% {
    background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_dept_h.svg");
  }
}

@keyframes deptBackAnim {
  0% {
    background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_dept.svg");
  }

  100% {
    background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_dept_h.svg");
  }
}

@-webkit-keyframes formAnimFieldBackground {
  0% {
    background-position: center top;
  }

  100% {
    background-position: center bottom;
  }
}

@-o-keyframes formAnimFieldBackground {
  0% {
    background-position: center top;
  }

  100% {
    background-position: center bottom;
  }
}

@keyframes formAnimFieldBackground {
  0% {
    background-position: center top;
  }

  100% {
    background-position: center bottom;
  }
}

@-webkit-keyframes backgroundScroll {
  to {
    background-position: center bottom;
  }
}

@-o-keyframes backgroundScroll {
  to {
    background-position: center bottom;
  }
}

@keyframes backgroundScroll {
  to {
    background-position: center bottom;
  }
}

@-webkit-keyframes formAnimFieldLabel {
  100% {
    top: -2px;
    font-size: 8px;
    color: #999999;
    font-family: ripplingFontMedium;
  }
}

@-o-keyframes formAnimFieldLabel {
  100% {
    top: -2px;
    font-size: 8px;
    color: #999999;
    font-family: ripplingFontMedium;
  }
}

@keyframes formAnimFieldLabel {
  100% {
    top: -2px;
    font-size: 8px;
    color: #999999;
    font-family: ripplingFontMedium;
  }
}

@-webkit-keyframes formAnimFieldValue {
  0% {
    max-width: 0;
  }

  100% {
    max-width: 260px;
  }
}

@-o-keyframes formAnimFieldValue {
  0% {
    max-width: 0;
  }

  100% {
    max-width: 260px;
  }
}

@keyframes formAnimFieldValue {
  0% {
    max-width: 0;
  }

  100% {
    max-width: 260px;
  }
}

@-webkit-keyframes transformUp {
  from {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }

  to {
    -webkit-transform: translateY(-3px);
            transform: translateY(-3px);
  }
}

@-o-keyframes transformUp {
  from {
    -o-transform: translateY(0);
       transform: translateY(0);
  }

  to {
    -o-transform: translateY(-3px);
       transform: translateY(-3px);
  }
}

@keyframes transformUp {
  from {
    -webkit-transform: translateY(0);
         -o-transform: translateY(0);
            transform: translateY(0);
  }

  to {
    -webkit-transform: translateY(-3px);
         -o-transform: translateY(-3px);
            transform: translateY(-3px);
  }
}

@-webkit-keyframes transformDown {
  from {
    -webkit-transform: translateY(-3px);
            transform: translateY(-3px);
  }

  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@-o-keyframes transformDown {
  from {
    -o-transform: translateY(-3px);
       transform: translateY(-3px);
  }

  to {
    -o-transform: translateY(0);
       transform: translateY(0);
  }
}

@keyframes transformDown {
  from {
    -webkit-transform: translateY(-3px);
         -o-transform: translateY(-3px);
            transform: translateY(-3px);
  }

  to {
    -webkit-transform: translateY(0);
         -o-transform: translateY(0);
            transform: translateY(0);
  }
}

@-webkit-keyframes buttonClick {
  from, to {
    -webkit-transform: perspective(1px) scale(1);
            transform: perspective(1px) scale(1);
  }

  50% {
    -webkit-transform: perspective(1px) scale(0.8);
            transform: perspective(1px) scale(0.8);
  }
}

@-o-keyframes buttonClick {
  from, to {
    transform: perspective(1px) scale(1);
  }

  50% {
    transform: perspective(1px) scale(0.8);
  }
}

@keyframes buttonClick {
  from, to {
    -webkit-transform: perspective(1px) scale(1);
            transform: perspective(1px) scale(1);
  }

  50% {
    -webkit-transform: perspective(1px) scale(0.8);
            transform: perspective(1px) scale(0.8);
  }
}

@-webkit-keyframes mouseClick0 {
  from, to {
    background-size: 100%;
  }

  50% {
    background-size: 80%;
  }
}

@-o-keyframes mouseClick0 {
  from, to {
    background-size: 100%;
  }

  50% {
    background-size: 80%;
  }
}

@keyframes mouseClick0 {
  from, to {
    background-size: 100%;
  }

  50% {
    background-size: 80%;
  }
}

@-webkit-keyframes mouseClick1 {
  from, to {
    background-size: 100%;
  }

  50% {
    background-size: 80%;
  }
}

@-o-keyframes mouseClick1 {
  from, to {
    background-size: 100%;
  }

  50% {
    background-size: 80%;
  }
}

@keyframes mouseClick1 {
  from, to {
    background-size: 100%;
  }

  50% {
    background-size: 80%;
  }
}

@-webkit-keyframes mouseClick2 {
  from, to {
    background-size: 100%;
  }

  50% {
    background-size: 80%;
  }
}

@-o-keyframes mouseClick2 {
  from, to {
    background-size: 100%;
  }

  50% {
    background-size: 80%;
  }
}

@keyframes mouseClick2 {
  from, to {
    background-size: 100%;
  }

  50% {
    background-size: 80%;
  }
}

@-webkit-keyframes mouseClick3 {
  from, to {
    background-size: 100%;
  }

  50% {
    background-size: 80%;
  }
}

@-o-keyframes mouseClick3 {
  from, to {
    background-size: 100%;
  }

  50% {
    background-size: 80%;
  }
}

@keyframes mouseClick3 {
  from, to {
    background-size: 100%;
  }

  50% {
    background-size: 80%;
  }
}

@-webkit-keyframes mouseToCursor0 {
  from {
    background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  }

  to {
    background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_hand.png");
  }
}

@-o-keyframes mouseToCursor0 {
  from {
    background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  }

  to {
    background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_hand.png");
  }
}

@keyframes mouseToCursor0 {
  from {
    background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  }

  to {
    background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_hand.png");
  }
}

@-webkit-keyframes mouseToCursor1 {
  from {
    background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  }

  to {
    background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_hand.png");
  }
}

@-o-keyframes mouseToCursor1 {
  from {
    background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  }

  to {
    background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_hand.png");
  }
}

@keyframes mouseToCursor1 {
  from {
    background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  }

  to {
    background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_hand.png");
  }
}

@-webkit-keyframes mouseToCursor2 {
  from {
    background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  }

  to {
    background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_hand.png");
  }
}

@-o-keyframes mouseToCursor2 {
  from {
    background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  }

  to {
    background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_hand.png");
  }
}

@keyframes mouseToCursor2 {
  from {
    background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  }

  to {
    background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_hand.png");
  }
}

@-webkit-keyframes mouseToCursor3 {
  from {
    background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  }

  to {
    background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_hand.png");
  }
}

@-o-keyframes mouseToCursor3 {
  from {
    background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  }

  to {
    background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_hand.png");
  }
}

@keyframes mouseToCursor3 {
  from {
    background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  }

  to {
    background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_hand.png");
  }
}

@-webkit-keyframes mouseToPointer0 {
  from {
    background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_hand.png");
  }

  to {
    background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  }
}

@-o-keyframes mouseToPointer0 {
  from {
    background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_hand.png");
  }

  to {
    background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  }
}

@keyframes mouseToPointer0 {
  from {
    background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_hand.png");
  }

  to {
    background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  }
}

@-webkit-keyframes mouseToPointer1 {
  from {
    background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_hand.png");
  }

  to {
    background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  }
}

@-o-keyframes mouseToPointer1 {
  from {
    background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_hand.png");
  }

  to {
    background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  }
}

@keyframes mouseToPointer1 {
  from {
    background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_hand.png");
  }

  to {
    background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  }
}

@-webkit-keyframes mouseToPointer2 {
  from {
    background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_hand.png");
  }

  to {
    background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  }
}

@-o-keyframes mouseToPointer2 {
  from {
    background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_hand.png");
  }

  to {
    background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  }
}

@keyframes mouseToPointer2 {
  from {
    background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_hand.png");
  }

  to {
    background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  }
}

@-webkit-keyframes mouseMoveToHireAction {
  to {
    top: 60px;
    left: 80px;
  }
}

@-o-keyframes mouseMoveToHireAction {
  to {
    top: 60px;
    left: 80px;
  }
}

@keyframes mouseMoveToHireAction {
  to {
    top: 60px;
    left: 80px;
  }
}

@-webkit-keyframes mouseMoveToEmpType {
  to {
    top: 190px;
    left: 220px;
  }
}

@-o-keyframes mouseMoveToEmpType {
  to {
    top: 190px;
    left: 220px;
  }
}

@keyframes mouseMoveToEmpType {
  to {
    top: 190px;
    left: 220px;
  }
}

@-webkit-keyframes mouseMoveToDept {
  from {
    top: 190px;
    left: 220px;
  }

  to {
    top: 265px;
    left: 220px;
  }
}

@-o-keyframes mouseMoveToDept {
  from {
    top: 190px;
    left: 220px;
  }

  to {
    top: 265px;
    left: 220px;
  }
}

@keyframes mouseMoveToDept {
  from {
    top: 190px;
    left: 220px;
  }

  to {
    top: 265px;
    left: 220px;
  }
}

@-webkit-keyframes mouseMoveToDeptExpand {
  from {
    top: 265px;
    left: 220px;
  }

  to {
    top: 295px;
    left: 130px;
  }
}

@-o-keyframes mouseMoveToDeptExpand {
  from {
    top: 265px;
    left: 220px;
  }

  to {
    top: 295px;
    left: 130px;
  }
}

@keyframes mouseMoveToDeptExpand {
  from {
    top: 265px;
    left: 220px;
  }

  to {
    top: 295px;
    left: 130px;
  }
}

@-webkit-keyframes mouseMoveToHireBtn {
  from {
    top: 295px;
    left: 130px;
  }

  to {
    top: 320px;
    left: 190px;
  }
}

@-o-keyframes mouseMoveToHireBtn {
  from {
    top: 295px;
    left: 130px;
  }

  to {
    top: 320px;
    left: 190px;
  }
}

@keyframes mouseMoveToHireBtn {
  from {
    top: 295px;
    left: 130px;
  }

  to {
    top: 320px;
    left: 190px;
  }
}

@-webkit-keyframes mouseMoveToNo {
  to {
    top: 195px;
    left: 128px;
  }
}

@-o-keyframes mouseMoveToNo {
  to {
    top: 195px;
    left: 128px;
  }
}

@keyframes mouseMoveToNo {
  to {
    top: 195px;
    left: 128px;
  }
}

@-webkit-keyframes mouseMoveToYes {
  from {
    top: 195px;
    left: 128px;
  }

  to {
    top: 195px;
    left: 250px;
  }
}

@-o-keyframes mouseMoveToYes {
  from {
    top: 195px;
    left: 128px;
  }

  to {
    top: 195px;
    left: 250px;
  }
}

@keyframes mouseMoveToYes {
  from {
    top: 195px;
    left: 128px;
  }

  to {
    top: 195px;
    left: 250px;
  }
}

@-webkit-keyframes mouseMoveToBoxTwo {
  to {
    top: 188px;
    left: 145px;
  }
}

@-o-keyframes mouseMoveToBoxTwo {
  to {
    top: 188px;
    left: 145px;
  }
}

@keyframes mouseMoveToBoxTwo {
  to {
    top: 188px;
    left: 145px;
  }
}

@-webkit-keyframes mouseMoveToBoxThree {
  from {
    top: 188px;
    left: 145px;
  }

  to {
    top: 188px;
    left: 235px;
  }
}

@-o-keyframes mouseMoveToBoxThree {
  from {
    top: 188px;
    left: 145px;
  }

  to {
    top: 188px;
    left: 235px;
  }
}

@keyframes mouseMoveToBoxThree {
  from {
    top: 188px;
    left: 145px;
  }

  to {
    top: 188px;
    left: 235px;
  }
}

@-webkit-keyframes mouseMoveToBoxExcel {
  to {
    top: 275px;
    left: 140px;
  }
}

@-o-keyframes mouseMoveToBoxExcel {
  to {
    top: 275px;
    left: 140px;
  }
}

@keyframes mouseMoveToBoxExcel {
  to {
    top: 275px;
    left: 140px;
  }
}

@-webkit-keyframes mouseMoveToBoxXd {
  from {
    top: 275px;
    left: 145px;
  }

  to {
    top: 160px;
    left: 230px;
  }
}

@-o-keyframes mouseMoveToBoxXd {
  from {
    top: 275px;
    left: 145px;
  }

  to {
    top: 160px;
    left: 230px;
  }
}

@keyframes mouseMoveToBoxXd {
  from {
    top: 275px;
    left: 145px;
  }

  to {
    top: 160px;
    left: 230px;
  }
}

@-webkit-keyframes mouseMoveToBoxPhotoshop {
  from {
    top: 160px;
    left: 230px;
  }

  to {
    top: 160px;
    left: 330px;
  }
}

@-o-keyframes mouseMoveToBoxPhotoshop {
  from {
    top: 160px;
    left: 230px;
  }

  to {
    top: 160px;
    left: 330px;
  }
}

@keyframes mouseMoveToBoxPhotoshop {
  from {
    top: 160px;
    left: 230px;
  }

  to {
    top: 160px;
    left: 330px;
  }
}

@-webkit-keyframes mouseMoveToEmailBtn {
  to {
    top: 165px;
    left: 185px;
  }
}

@-o-keyframes mouseMoveToEmailBtn {
  to {
    top: 165px;
    left: 185px;
  }
}

@keyframes mouseMoveToEmailBtn {
  to {
    top: 165px;
    left: 185px;
  }
}

@-webkit-keyframes mouseMoveToOfferLetter {
  to {
    top: 140px;
    left: 200px;
  }
}

@-o-keyframes mouseMoveToOfferLetter {
  to {
    top: 140px;
    left: 200px;
  }
}

@keyframes mouseMoveToOfferLetter {
  to {
    top: 140px;
    left: 200px;
  }
}

@-webkit-keyframes mouseMoveToAgreement {
  from {
    top: 140px;
    left: 200px;
  }

  to {
    top: 230px;
    left: 140px;
  }
}

@-o-keyframes mouseMoveToAgreement {
  from {
    top: 140px;
    left: 200px;
  }

  to {
    top: 230px;
    left: 140px;
  }
}

@keyframes mouseMoveToAgreement {
  from {
    top: 140px;
    left: 200px;
  }

  to {
    top: 230px;
    left: 140px;
  }
}

@-webkit-keyframes mouseMoveToOfferLetterBtn {
  from {
    top: 230px;
    left: 140px;
  }

  to {
    top: 330px;
    left: 180px;
  }
}

@-o-keyframes mouseMoveToOfferLetterBtn {
  from {
    top: 230px;
    left: 140px;
  }

  to {
    top: 330px;
    left: 180px;
  }
}

@keyframes mouseMoveToOfferLetterBtn {
  from {
    top: 230px;
    left: 140px;
  }

  to {
    top: 330px;
    left: 180px;
  }
}

@-webkit-keyframes mouseMoveToSendOfferBtn {
  to {
    top: 422px;
    left: -12px;
  }
}

@-o-keyframes mouseMoveToSendOfferBtn {
  to {
    top: 422px;
    left: -12px;
  }
}

@keyframes mouseMoveToSendOfferBtn {
  to {
    top: 422px;
    left: -12px;
  }
}

@-webkit-keyframes mouseMoveToSendOfferBtnMobile {
  to {
    top: 245px;
    left: 210px;
  }
}

@-o-keyframes mouseMoveToSendOfferBtnMobile {
  to {
    top: 245px;
    left: 210px;
  }
}

@keyframes mouseMoveToSendOfferBtnMobile {
  to {
    top: 245px;
    left: 210px;
  }
}

.homeCoverPanel .ruiCoverPanel .homePageAnimation .actionList {
  right: calc(50% - 70px);
  top: auto;
  bottom: 20px;
}

.homeCoverPanel .ruiCoverPanel .homePageAnimation .hireAnim {
  position: absolute;
  left: calc(50% - 300px);
  bottom: -150px;
  width: 600px;
  height: 600px;
  -webkit-transform: scale(0.5);
       -o-transform: scale(0.5);
          transform: scale(0.5);
  -webkit-transform-origin: center;
       -o-transform-origin: center;
          transform-origin: center;
}

.homeCoverPanel .ruiCoverPanel .homePageAnimation .hireAnim__primaryBox.hireAnimIntro {
  top: 0;
  right: 0;
  zoom: 1.55;
}

.homeCoverPanel .ruiCoverPanel .homePageAnimation .hireAnim__primaryBox.hireAnimCheck {
  top: 0;
  right: 0;
  zoom: 1.55;
}

.homeCoverPanel .ruiCoverPanel .homePageAnimation .hireAnim__primaryBox.hireAnimHardware {
  top: 0;
  right: 0;
  zoom: 1.55;
}

.homeCoverPanel .ruiCoverPanel .homePageAnimation .hireAnim__primaryBox.hireAnimHardware .hardwarePop {
  right: 0;
}

.homeCoverPanel .ruiCoverPanel .homePageAnimation .hireAnim__primaryBox.hireAnimSoftware {
  top: 0;
  right: 0;
  zoom: 1.55;
}

.homeCoverPanel .ruiCoverPanel .homePageAnimation .hireAnim__primaryBox.hireAnimEmail {
  top: 0;
  right: 0;
  zoom: 1.55;
}

.homeCoverPanel .ruiCoverPanel .homePageAnimation .hireAnim__primaryBox.hireAnimAccount {
  top: 0;
  right: 0;
  zoom: 1.55;
}

.homeCoverPanel .ruiCoverPanel .homePageAnimation .hireAnim__primaryBox.hireAnimAccount .accountPop--a {
  right: 0;
}

.homeCoverPanel .ruiCoverPanel .homePageAnimation .hireAnim__primaryBox.hireAnimAccount .accountPop--b {
  right: 0;
  bottom: 96%;
}

.homeCoverPanel .ruiCoverPanel .homePageAnimation .hireAnim__primaryBox.hireAnimAccount .accountPop--c {
  right: 0;
}

.homeCoverPanel .ruiCoverPanel .homePageAnimation .hireAnim__primaryBox.hireAnimOffer {
  top: 0;
  right: 0;
  zoom: 1.55;
}

.homeCoverPanel .ruiCoverPanel .homePageAnimation .hireAnim__primaryBox.hireAnimSendOffer {
  top: -60px;
  right: 0;
  zoom: 2;
}

.homeCoverPanel .ruiCoverPanel .homePageAnimation .hireAnim__primaryBox.hireAnimSendOffer .sendOfferPop {
  left: 0;
  bottom: 100px;
}

.homeCoverPanel .ruiCoverPanel .homePageAnimation .hireAnim__primaryBox.hireAnimDone {
  top: 0;
  right: 0;
  zoom: 1.55;
}

.homeCoverPanel .ruiCoverPanel .homePageAnimation .hireAnim__primaryBoxTitle {
  font-size: 26px;
}

@media screen and (min-width: 768px) {
  .homeCoverPanel .ruiCoverPanel .homePageAnimation .actionList {
    top: calc(50% - 80px);
    bottom: auto;
    right: 15px;
  }

  .homeCoverPanel .ruiCoverPanel .homePageAnimation .hireAnim {
    position: relative;
    height: auto;
    width: auto;
    left: auto;
    -webkit-transform: scale(0.44) translateY(0px);
         -o-transform: scale(0.44) translateY(0px);
            transform: scale(0.44) translateY(0px);
  }

  .homeCoverPanel .ruiCoverPanel .homePageAnimation .hireAnim__primaryBox.hireAnimIntro {
    top: calc(50% - 250px);
    right: 260px;
    zoom: normal;
  }

  .homeCoverPanel .ruiCoverPanel .homePageAnimation .hireAnim__primaryBox.hireAnimCheck {
    top: calc(50% - 50px);
    right: 350px;
    zoom: normal;
  }

  .homeCoverPanel .ruiCoverPanel .homePageAnimation .hireAnim__primaryBox.hireAnimHardware {
    top: calc(50% - 250px);
    right: 260px;
    zoom: normal;
  }

  .homeCoverPanel .ruiCoverPanel .homePageAnimation .hireAnim__primaryBox.hireAnimHardware .hardwarePop {
    right: -60px;
  }

  .homeCoverPanel .ruiCoverPanel .homePageAnimation .hireAnim__primaryBox.hireAnimSoftware {
    top: calc(50% - 50px);
    right: 180px;
    zoom: normal;
  }

  .homeCoverPanel .ruiCoverPanel .homePageAnimation .hireAnim__primaryBox.hireAnimEmail {
    top: calc(50% - 250px);
    right: 260px;
    zoom: normal;
  }

  .homeCoverPanel .ruiCoverPanel .homePageAnimation .hireAnim__primaryBox.hireAnimAccount {
    top: calc(50% - 120px);
    right: 370px;
    zoom: normal;
  }

  .homeCoverPanel .ruiCoverPanel .homePageAnimation .hireAnim__primaryBox.hireAnimAccount .accountPop--a {
    right: -140px;
  }

  .homeCoverPanel .ruiCoverPanel .homePageAnimation .hireAnim__primaryBox.hireAnimAccount .accountPop--b {
    right: -365px;
    bottom: 40px;
  }

  .homeCoverPanel .ruiCoverPanel .homePageAnimation .hireAnim__primaryBox.hireAnimAccount .accountPop--c {
    right: -140px;
  }

  .homeCoverPanel .ruiCoverPanel .homePageAnimation .hireAnim__primaryBox.hireAnimOffer {
    top: calc(50% - 250px);
    right: 260px;
    zoom: normal;
  }

  .homeCoverPanel .ruiCoverPanel .homePageAnimation .hireAnim__primaryBox.hireAnimSendOffer {
    top: calc(50% - 180px);
    right: 40px;
    zoom: normal;
  }

  .homeCoverPanel .ruiCoverPanel .homePageAnimation .hireAnim__primaryBox.hireAnimSendOffer .sendOfferPop {
    left: -200px;
    bottom: -80px;
  }

  .homeCoverPanel .ruiCoverPanel .homePageAnimation .hireAnim__primaryBox.hireAnimDone {
    position: absolute;
    top: calc(50% - 250px);
    right: 260px;
    zoom: normal;
  }

  .homeCoverPanel .ruiCoverPanel .homePageAnimation .hireAnim__primaryBoxTitle {
    font-size: 16px;
  }
}

@media screen and (min-width: 900px) {
  .homeCoverPanel .ruiCoverPanel .homePageAnimation .hireAnim {
    -webkit-transform: scale(0.6) translateY(0px);
         -o-transform: scale(0.6) translateY(0px);
            transform: scale(0.6) translateY(0px);
  }
}

@media screen and (min-width: 1100px) {
  .homeCoverPanel .ruiCoverPanel .homePageAnimation {
    display: block;
  }

  .homeCoverPanel .ruiCoverPanel .homePageAnimation .actionList {
    right: 150px;
  }

  .homeCoverPanel .ruiCoverPanel .homePageAnimation .hireAnim {
    -webkit-transform: scale(0.8) translateY(-160px);
         -o-transform: scale(0.8) translateY(-160px);
            transform: scale(0.8) translateY(-160px);
  }
}

@media screen and (min-width: 1280px) {
  .homeCoverPanel .ruiCoverPanel .homePageAnimation .hireAnim {
    -webkit-transform: scale(1) translateY(-160px);
         -o-transform: scale(1) translateY(-160px);
            transform: scale(1) translateY(-160px);
  }
}

.onboarding-animation-wrapper .ruiContainer {
  -ms-flex-wrap: wrap !important;
      flex-wrap: wrap !important;
}

.onboarding-animation {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 600px;
  height: 200px;
  max-width: 100%;
  margin: 0 auto;
  position: relative;
}

@media screen and (min-width: 600px) {
  .onboarding-animation {
    height: 300px;
  }
}

@media screen and (min-width: 768px) {
  .onboarding-animation {
    height: 500px;
  }
}

@media screen and (min-width: 1280px) {
  .onboarding-animation {
    height: 600px;
  }
}

.onboarding-animation .onboardingAnim {
  z-index: 1;
  -webkit-transform: scale(0.3);
       -o-transform: scale(0.3);
          transform: scale(0.3);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  opacity: 0;
  -webkit-transform-origin: 20% center;
       -o-transform-origin: 20% center;
          transform-origin: 20% center;
  -webkit-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.onboarding-animation .onboardingAnim__primaryBoxTitle {
  font-family: ripplingFontNormal;
  text-align: center;
  padding-top: 60px;
  font-size: 16px;
  color: #000000;
}

.onboarding-animation .onboardingAnim__primaryBoxTitle--mini {
  padding-top: 30px;
}

.onboarding-animation .onboardingAnim__primaryBox {
  -webkit-transform-origin: center;
       -o-transform-origin: center;
          transform-origin: center;
  right: 260px;
  width: 390px;
  min-height: 350px;
  background-color: #ffffff;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_browser_window.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  -webkit-box-shadow: 0 0 30px 0 rgba(91, 98, 99, 0.4);
          box-shadow: 0 0 30px 0 rgba(91, 98, 99, 0.4);
}

.onboarding-animation .onboardingAnim__primaryBox--small {
  min-height: auto;
}

.onboarding-animation .onboardingAnim__primaryBox--mini {
  background-image: none;
  min-height: auto;
}

.onboarding-animation .onboardingAnim__primaryBox.hireAnimHardware {
  position: absolute;
  top: 70px;
  left: 80px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
}

.onboarding-animation .onboardingAnim__primaryBox.hireAnimHardware:after {
  opacity: 1;
  content: '';
  height: 22px;
  width: 22px;
  position: absolute;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  top: 220px;
  left: 40px;
  z-index: 10;
}

.onboarding-animation .onboardingAnim__primaryBox.hireAnimSoftware {
  position: absolute;
  top: 150px;
  right: 0px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
}

.onboarding-animation .onboardingAnim__primaryBox.hireAnimSoftware:after {
  opacity: 1;
  content: '';
  height: 22px;
  width: 22px;
  position: absolute;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  top: 300px;
  left: 80px;
  z-index: 10;
}

.onboarding-animation .onboardingAnim__primaryBox.hireAnimAccount {
  position: absolute;
  top: 120px;
  left: 20px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
}

@media screen and (min-width: 600px) {
  .onboarding-animation .onboardingAnim {
    -webkit-transform: scale(0.4);
         -o-transform: scale(0.4);
            transform: scale(0.4);
  }
}

@media screen and (min-width: 768px) {
  .onboarding-animation .onboardingAnim {
    -webkit-transform: scale(0.7);
         -o-transform: scale(0.7);
            transform: scale(0.7);
    -webkit-transform-origin: center left;
         -o-transform-origin: center left;
            transform-origin: center left;
  }
}

@media screen and (min-width: 1280px) {
  .onboarding-animation .onboardingAnim {
    -webkit-transform: scale(0.85);
         -o-transform: scale(0.85);
            transform: scale(0.85);
  }
}

@media screen and (min-width: 1440px) {
  .onboarding-animation .onboardingAnim {
    -webkit-transform: scale(1);
         -o-transform: scale(1);
            transform: scale(1);
  }
}

.onboarding-animation .onboardingAnim--animate {
  opacity: 1;
}

.onboarding-animation .onboardingAnim--animate .hireAnimHardware {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 4.2s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 4.2s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 4.2s 1 normal forwards;
}

.onboarding-animation .onboardingAnim--animate .hireAnimHardware:after {
  -webkit-animation: mouseMoveToBoxTwo 0.2s cubic-bezier(1, 0, 0, 1) 0.8s 1 normal forwards, mouseToCursor 0s cubic-bezier(1, 0, 0, 1) 0.8s 1 normal forwards, mouseMoveToBoxThree 0.4s cubic-bezier(1, 0, 0, 1) 1s 1 normal forwards, mouseToPointer 0s cubic-bezier(1, 0, 0, 1) 1.1s 1 normal forwards, mouseToCursor 0s cubic-bezier(1, 0, 0, 1) 1.2s 1 normal forwards, mouseClick 0.1s cubic-bezier(1, 0, 0, 1) 2s 1 normal forwards;
       -o-animation: mouseMoveToBoxTwo 0.2s cubic-bezier(1, 0, 0, 1) 0.8s 1 normal forwards, mouseToCursor 0s cubic-bezier(1, 0, 0, 1) 0.8s 1 normal forwards, mouseMoveToBoxThree 0.4s cubic-bezier(1, 0, 0, 1) 1s 1 normal forwards, mouseToPointer 0s cubic-bezier(1, 0, 0, 1) 1.1s 1 normal forwards, mouseToCursor 0s cubic-bezier(1, 0, 0, 1) 1.2s 1 normal forwards, mouseClick 0.1s cubic-bezier(1, 0, 0, 1) 2s 1 normal forwards;
          animation: mouseMoveToBoxTwo 0.2s cubic-bezier(1, 0, 0, 1) 0.8s 1 normal forwards, mouseToCursor 0s cubic-bezier(1, 0, 0, 1) 0.8s 1 normal forwards, mouseMoveToBoxThree 0.4s cubic-bezier(1, 0, 0, 1) 1s 1 normal forwards, mouseToPointer 0s cubic-bezier(1, 0, 0, 1) 1.1s 1 normal forwards, mouseToCursor 0s cubic-bezier(1, 0, 0, 1) 1.2s 1 normal forwards, mouseClick 0.1s cubic-bezier(1, 0, 0, 1) 2s 1 normal forwards;
}

.onboarding-animation .onboardingAnim--animate .hireAnimHardware .boxItem:nth-child(2) {
  -webkit-animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 0.9s 1 normal forwards, showHoverShadow 0.1s cubic-bezier(1, 0, 0, 1) 0.9s 1 normal forwards, hideHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 1.3s 1 normal forwards, hideHoverShadow 0.1s cubic-bezier(1, 0, 0, 1) 1.3s 1 normal forwards;
       -o-animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 0.9s 1 normal forwards, showHoverShadow 0.1s cubic-bezier(1, 0, 0, 1) 0.9s 1 normal forwards, hideHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 1.3s 1 normal forwards, hideHoverShadow 0.1s cubic-bezier(1, 0, 0, 1) 1.3s 1 normal forwards;
          animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 0.9s 1 normal forwards, showHoverShadow 0.1s cubic-bezier(1, 0, 0, 1) 0.9s 1 normal forwards, hideHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 1.3s 1 normal forwards, hideHoverShadow 0.1s cubic-bezier(1, 0, 0, 1) 1.3s 1 normal forwards;
}

.onboarding-animation .onboardingAnim--animate .hireAnimHardware .boxItem:nth-child(3) {
  -webkit-animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 1.4s 1 normal forwards, showHoverShadow 0.1s cubic-bezier(1, 0, 0, 1) 1.4s 1 normal forwards;
       -o-animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 1.4s 1 normal forwards, showHoverShadow 0.1s cubic-bezier(1, 0, 0, 1) 1.4s 1 normal forwards;
          animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 1.4s 1 normal forwards, showHoverShadow 0.1s cubic-bezier(1, 0, 0, 1) 1.4s 1 normal forwards;
}

.onboarding-animation .onboardingAnim--animate .hireAnimHardware .hardwarePop {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 2s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 2s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 2s 1 normal forwards;
}

.onboarding-animation .onboardingAnim--animate .hireAnimSoftware {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 4.5s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 10.5s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 4.5s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 10.5s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 4.5s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 10.5s 1 normal forwards;
}

.onboarding-animation .onboardingAnim--animate .hireAnimSoftware:after {
  -webkit-animation: mouseMoveToBoxExcel 0.2s cubic-bezier(1, 0, 0, 1) 5.3s 1 normal forwards, mouseToCursor 0s cubic-bezier(1, 0, 0, 1) 5.4s 1 normal forwards, mouseClick 0.1s cubic-bezier(1, 0, 0, 1) 6s 1 normal forwards, mouseMoveToBoxXd 0.4s cubic-bezier(1, 0, 0, 1) 6.7s 1 normal forwards, mouseToPointer 0s cubic-bezier(1, 0, 0, 1) 6.8s 1 normal forwards, mouseToCursor 0s cubic-bezier(1, 0, 0, 1) 6.9s 1 normal forwards, mouseClick 0.1s cubic-bezier(1, 0, 0, 1) 7.7s 1 normal forwards, mouseMoveToBoxPhotoshop 0.4s cubic-bezier(1, 0, 0, 1) 8.3s 1 normal forwards, mouseToPointer 0s cubic-bezier(1, 0, 0, 1) 8.4s 1 normal forwards, mouseToCursor 0s cubic-bezier(1, 0, 0, 1) 8.5s 1 normal forwards, mouseClick 0.1s cubic-bezier(1, 0, 0, 1) 9.3s 1 normal forwards;
       -o-animation: mouseMoveToBoxExcel 0.2s cubic-bezier(1, 0, 0, 1) 5.3s 1 normal forwards, mouseToCursor 0s cubic-bezier(1, 0, 0, 1) 5.4s 1 normal forwards, mouseClick 0.1s cubic-bezier(1, 0, 0, 1) 6s 1 normal forwards, mouseMoveToBoxXd 0.4s cubic-bezier(1, 0, 0, 1) 6.7s 1 normal forwards, mouseToPointer 0s cubic-bezier(1, 0, 0, 1) 6.8s 1 normal forwards, mouseToCursor 0s cubic-bezier(1, 0, 0, 1) 6.9s 1 normal forwards, mouseClick 0.1s cubic-bezier(1, 0, 0, 1) 7.7s 1 normal forwards, mouseMoveToBoxPhotoshop 0.4s cubic-bezier(1, 0, 0, 1) 8.3s 1 normal forwards, mouseToPointer 0s cubic-bezier(1, 0, 0, 1) 8.4s 1 normal forwards, mouseToCursor 0s cubic-bezier(1, 0, 0, 1) 8.5s 1 normal forwards, mouseClick 0.1s cubic-bezier(1, 0, 0, 1) 9.3s 1 normal forwards;
          animation: mouseMoveToBoxExcel 0.2s cubic-bezier(1, 0, 0, 1) 5.3s 1 normal forwards, mouseToCursor 0s cubic-bezier(1, 0, 0, 1) 5.4s 1 normal forwards, mouseClick 0.1s cubic-bezier(1, 0, 0, 1) 6s 1 normal forwards, mouseMoveToBoxXd 0.4s cubic-bezier(1, 0, 0, 1) 6.7s 1 normal forwards, mouseToPointer 0s cubic-bezier(1, 0, 0, 1) 6.8s 1 normal forwards, mouseToCursor 0s cubic-bezier(1, 0, 0, 1) 6.9s 1 normal forwards, mouseClick 0.1s cubic-bezier(1, 0, 0, 1) 7.7s 1 normal forwards, mouseMoveToBoxPhotoshop 0.4s cubic-bezier(1, 0, 0, 1) 8.3s 1 normal forwards, mouseToPointer 0s cubic-bezier(1, 0, 0, 1) 8.4s 1 normal forwards, mouseToCursor 0s cubic-bezier(1, 0, 0, 1) 8.5s 1 normal forwards, mouseClick 0.1s cubic-bezier(1, 0, 0, 1) 9.3s 1 normal forwards;
}

.onboarding-animation .onboardingAnim--animate .hireAnimSoftware .boxItem:nth-child(6) {
  -webkit-animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 5.4s 1 normal forwards, showHoverShadow 0.1s cubic-bezier(1, 0, 0, 1) 5.4s 1 normal forwards, hideHoverShadow 0.1s cubic-bezier(1, 0, 0, 1) 6.8s 1 normal forwards;
       -o-animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 5.4s 1 normal forwards, showHoverShadow 0.1s cubic-bezier(1, 0, 0, 1) 5.4s 1 normal forwards, hideHoverShadow 0.1s cubic-bezier(1, 0, 0, 1) 6.8s 1 normal forwards;
          animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 5.4s 1 normal forwards, showHoverShadow 0.1s cubic-bezier(1, 0, 0, 1) 5.4s 1 normal forwards, hideHoverShadow 0.1s cubic-bezier(1, 0, 0, 1) 6.8s 1 normal forwards;
}

.onboarding-animation .onboardingAnim--animate .hireAnimSoftware .boxItem:nth-child(6):after {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 6.1s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 6.1s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 6.1s 1 normal forwards;
}

.onboarding-animation .onboardingAnim--animate .hireAnimSoftware .boxItem:nth-child(3) {
  -webkit-animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 6.9s 1 normal forwards, showHoverShadow 0.1s cubic-bezier(1, 0, 0, 1) 6.9s 1 normal forwards, hideHoverShadow 0.1s cubic-bezier(1, 0, 0, 1) 8.3s 1 normal forwards;
       -o-animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 6.9s 1 normal forwards, showHoverShadow 0.1s cubic-bezier(1, 0, 0, 1) 6.9s 1 normal forwards, hideHoverShadow 0.1s cubic-bezier(1, 0, 0, 1) 8.3s 1 normal forwards;
          animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 6.9s 1 normal forwards, showHoverShadow 0.1s cubic-bezier(1, 0, 0, 1) 6.9s 1 normal forwards, hideHoverShadow 0.1s cubic-bezier(1, 0, 0, 1) 8.3s 1 normal forwards;
}

.onboarding-animation .onboardingAnim--animate .hireAnimSoftware .boxItem:nth-child(3):after {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 7.8s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 7.8s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 7.8s 1 normal forwards;
}

.onboarding-animation .onboardingAnim--animate .hireAnimSoftware .boxItem:nth-child(4) {
  -webkit-animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 8.4s 1 normal forwards, showHoverShadow 0.1s cubic-bezier(1, 0, 0, 1) 8.4s 1 normal forwards;
       -o-animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 8.4s 1 normal forwards, showHoverShadow 0.1s cubic-bezier(1, 0, 0, 1) 8.4s 1 normal forwards;
          animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 8.4s 1 normal forwards, showHoverShadow 0.1s cubic-bezier(1, 0, 0, 1) 8.4s 1 normal forwards;
}

.onboarding-animation .onboardingAnim--animate .hireAnimSoftware .boxItem:nth-child(4):after {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 9.4s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 9.4s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 9.4s 1 normal forwards;
}

.onboarding-animation .onboardingAnim--animate .hireAnimAccount {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 10.8s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 21.3s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 10.8s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 21.3s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 10.8s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 21.3s 1 normal forwards;
}

.onboarding-animation .onboardingAnim--animate .hireAnimAccount .formAnimField--accounts {
  -webkit-animation: backgroundScroll 9s cubic-bezier(0.645, 0.045, 0.905, 1.125) 11.6s 1 normal forwards;
       -o-animation: backgroundScroll 9s cubic-bezier(0.645, 0.045, 0.905, 1.125) 11.6s 1 normal forwards;
          animation: backgroundScroll 9s cubic-bezier(0.645, 0.045, 0.905, 1.125) 11.6s 1 normal forwards;
}

.onboarding-animation .onboardingAnim--animate .hireAnimAccount .accountPop--b {
  -webkit-animation: showPopAnim 0.1s cubic-bezier(0.645, 0.045, 0.905, 1.125) 12.3s 1 normal forwards, hidePopAnim 0.1s cubic-bezier(0.645, 0.045, 0.905, 1.125) 16.3s 1 normal forwards;
       -o-animation: showPopAnim 0.1s cubic-bezier(0.645, 0.045, 0.905, 1.125) 12.3s 1 normal forwards, hidePopAnim 0.1s cubic-bezier(0.645, 0.045, 0.905, 1.125) 16.3s 1 normal forwards;
          animation: showPopAnim 0.1s cubic-bezier(0.645, 0.045, 0.905, 1.125) 12.3s 1 normal forwards, hidePopAnim 0.1s cubic-bezier(0.645, 0.045, 0.905, 1.125) 16.3s 1 normal forwards;
}

.onboarding-animation .onboardingAnim--animate .hireAnimAccount .accountPop--c {
  -webkit-animation: showPopAnim 0.1s cubic-bezier(0.645, 0.045, 0.905, 1.125) 16.3s 1 normal forwards, hidePopAnim 0.1s cubic-bezier(0.645, 0.045, 0.905, 1.125) 20.3s 1 normal forwards;
       -o-animation: showPopAnim 0.1s cubic-bezier(0.645, 0.045, 0.905, 1.125) 16.3s 1 normal forwards, hidePopAnim 0.1s cubic-bezier(0.645, 0.045, 0.905, 1.125) 20.3s 1 normal forwards;
          animation: showPopAnim 0.1s cubic-bezier(0.645, 0.045, 0.905, 1.125) 16.3s 1 normal forwards, hidePopAnim 0.1s cubic-bezier(0.645, 0.045, 0.905, 1.125) 20.3s 1 normal forwards;
}

.onboarding-animation .hardwarePop {
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  position: absolute;
  right: -60px;
  bottom: -70px;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_hw_pop.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
  width: 135px;
  height: 180px;
  -webkit-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.onboarding-animation .accountPop {
  position: absolute;
  background-color: #ffffff;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-box-shadow: 0 2px 10px 0 rgba(91, 98, 99, 0.4);
          box-shadow: 0 2px 10px 0 rgba(91, 98, 99, 0.4);
  -webkit-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
}

.onboarding-animation .accountPop--a {
  width: 388px;
  height: 90px;
  right: -140px;
  top: -80px;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_acc_dropbox.svg");
}

.onboarding-animation .accountPop--b {
  width: 347px;
  height: 117px;
  right: -365px;
  bottom: 40px;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_acc_gsuite.svg");
}

.onboarding-animation .accountPop--c {
  width: 347px;
  height: 139px;
  right: -140px;
  bottom: -160px;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_acc_slack.svg");
}

.hrPageAnimation .actionBtn {
  position: absolute;
  top: calc(50% + 20px);
  right: 120px;
  z-index: 10;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
}

.hrPageAnimation .actionBtn:after {
  opacity: 1;
  content: '';
  height: 22px;
  width: 22px;
  position: absolute;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  top: -70px;
  left: 200px;
  z-index: 10;
}

.hrPageAnimation .actionBtn:after {
  -webkit-animation: mouseMoveToRunPayroll 0.2s cubic-bezier(1, 0, 0, 1) 2s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 2.18s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 2.5s 1 normal forwards, hideAnim 0.05s 5s 1 normal forwards;
       -o-animation: mouseMoveToRunPayroll 0.2s cubic-bezier(1, 0, 0, 1) 2s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 2.18s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 2.5s 1 normal forwards, hideAnim 0.05s 5s 1 normal forwards;
          animation: mouseMoveToRunPayroll 0.2s cubic-bezier(1, 0, 0, 1) 2s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 2.18s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 2.5s 1 normal forwards, hideAnim 0.05s 5s 1 normal forwards;
}

.hrPageAnimation .actionBtn .ruiBtn {
  -webkit-animation: buttonClick .1s linear 2.5s 1 normal forwards;
       -o-animation: buttonClick .1s linear 2.5s 1 normal forwards;
          animation: buttonClick .1s linear 2.5s 1 normal forwards;
  -webkit-box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.16);
          box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.16);
}

.hrPageAnimation .actionBtn .ruiBtn:hover {
  -webkit-box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.2);
          box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.2);
}

.hrPageAnimation .hrAnim {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  opacity: 0;
  -webkit-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.hrPageAnimation .hrAnim__whiteBox {
  background-color: #ffffff;
  -webkit-box-shadow: 0 0 30px 0 rgba(91, 98, 99, 0.4);
          box-shadow: 0 0 30px 0 rgba(91, 98, 99, 0.4);
  -webkit-transform-origin: center;
       -o-transform-origin: center;
          transform-origin: center;
}

.hrPageAnimation .hrAnim__whiteBoxTitle {
  font-family: ripplingFontNormal;
  text-align: center;
  padding-top: 30px;
  font-size: 16px;
  color: #000000;
}

.hrPageAnimation .hrAnim .hrAnimPayroll {
  position: absolute;
  top: calc(50% - 120px);
  right: 260px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
}

.hrPageAnimation .hrAnim .hrAnimPayrollList {
  position: absolute;
  top: calc(50% - 280px);
  right: 80px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  padding: 10px;
}

.hrPageAnimation .hrAnim .hrAnimPayrollList .hrAnim__whiteBoxTitle {
  padding: 15px 0;
}

.hrPageAnimation .hrAnim .hrAnimPayrollList__back {
  position: relative;
  width: 400px;
  height: 190px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/hr-animation/payroll-list-new.png");
}

.hrPageAnimation .hrAnim .hrAnimPayrollList__back:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 28px;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/hr-animation/payroll-list-new.png");
}

.hrPageAnimation .hrAnim .hrAnimPayrollList .ruiBtn {
  position: absolute;
  display: table;
  right: -80px;
  bottom: -30px;
  pointer-events: none;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-box-shadow: 0 2px 10px 0 rgba(91, 98, 99, 0.4);
          box-shadow: 0 2px 10px 0 rgba(91, 98, 99, 0.4);
}

.hrPageAnimation .hrAnim .hrAnimPayrollList:after {
  opacity: 1;
  content: '';
  height: 22px;
  width: 22px;
  position: absolute;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  top: 240px;
  left: 35px;
  z-index: 10;
}

.hrPageAnimation .hrAnim .hrAnimPayrollListItem {
  position: absolute;
  background-color: transparent;
  -webkit-box-shadow: none;
          box-shadow: none;
  top: calc(50% - 80px);
  right: 35px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
}

.hrPageAnimation .hrAnim .hrAnimPayrollListItem__back {
  height: 80px;
  width: 500px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #ffffff;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/hr-animation/payroll-row-new.png");
  -webkit-box-shadow: 0 0 30px 0 rgba(91, 98, 99, 0.4);
          box-shadow: 0 0 30px 0 rgba(91, 98, 99, 0.4);
  position: relative;
}

.hrPageAnimation .hrAnim .hrAnimPayrollListItem__back:after {
  opacity: 1;
  content: '';
  height: 22px;
  width: 22px;
  position: absolute;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  top: 50px;
  left: 30px;
  z-index: 10;
}

.hrPageAnimation .hrAnim .hrAnimPayrollListItem__back:before {
  content: '';
  position: absolute;
  top: 70px;
  right: 20px;
  width: 300px;
  height: 120px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #fff;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/hr-animation/payroll-changehistory.png");
  -webkit-box-shadow: 0 0 30px 0 rgba(91, 98, 99, 0.4);
          box-shadow: 0 0 30px 0 rgba(91, 98, 99, 0.4);
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
}

.hrPageAnimation .hrAnim .hrAnimPayrollSummary {
  position: absolute;
  top: calc(50% - 160px);
  right: 210px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  padding: 25px 30px 35px;
}

.hrPageAnimation .hrAnim .hrAnimPayrollSummary__back {
  width: 400px;
  height: 227px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/hr-animation/payroll-summary.png");
}

.hrPageAnimation .hrAnim .hrAnimPayrollSummary .ruiBtn {
  position: absolute;
  display: table;
  left: calc(50% - 53px);
  bottom: -30px;
  pointer-events: none;
  -webkit-transform: perspective(1px) scale(1);
          transform: perspective(1px) scale(1);
  -webkit-box-shadow: 0 2px 10px 0 rgba(91, 98, 99, 0.4);
          box-shadow: 0 2px 10px 0 rgba(91, 98, 99, 0.4);
}

.hrPageAnimation .hrAnim .hrAnimPayrollSummary:after {
  opacity: 1;
  content: '';
  height: 22px;
  width: 22px;
  position: absolute;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  top: 110px;
  left: 400px;
  z-index: 10;
}

.hrPageAnimation .hrAnim .hrAnimPayrollSuccess {
  position: absolute;
  top: calc(50% - 120px);
  right: 300px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
}

.hrPageAnimation .hrAnim .hrAnimPayrollSuccess__back {
  width: 210px;
  height: 196px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/hr-animation/payroll-success.png");
}

.hrPageAnimation .hrAnim .hrAnimPayrollSuccess .ruiBtn {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  right: -70px;
  bottom: -15px;
  pointer-events: none;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-box-shadow: 0 2px 10px 0 rgba(91, 98, 99, 0.4);
          box-shadow: 0 2px 10px 0 rgba(91, 98, 99, 0.4);
  line-height: 15px;
}

.hrPageAnimation .hrAnim .hrAnimPayrollSuccess .ruiBtn:before {
  content: '\F017';
  font-family: fontIcons;
  font-size: 16px;
  margin-right: 10px;
}

.hrPageAnimation .hrAnim .hrAnimPayrollSuccess:after {
  opacity: 1;
  content: '';
  height: 22px;
  width: 22px;
  position: absolute;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  top: 110px;
  left: 160px;
  z-index: 10;
}

.hrPageAnimation .hrAnim .hrAnimReportVars {
  position: absolute;
  top: calc(50% - 120px);
  right: 100px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  padding: 10px 10px 5px 5px;
}

.hrPageAnimation .hrAnim .hrAnimReportVars__back {
  width: 440px;
  height: 210px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/hr-animation/report-vars-new.png");
}

.hrPageAnimation .hrAnim .hrAnimReportVars__back:after {
  opacity: 1;
  content: '';
  height: 22px;
  width: 22px;
  position: absolute;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  top: 120px;
  left: 400px;
  z-index: 10;
}

.hrPageAnimation .hrAnim .hrAnimReportVars__tag {
  position: absolute;
  background-color: #f5f5f5;
  font-size: 6px;
  font-family: ripplingFontNormal;
  padding: 2px 3px 1px;
  border-radius: 1.5px;
}

.hrPageAnimation .hrAnim .hrAnimReportVars__tag--dept {
  top: 51px;
  right: 140px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
}

.hrPageAnimation .hrAnim .hrAnimReportVars__tag--comp {
  top: 51px;
  right: 64px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
}

.hrPageAnimation .hrAnim .hrAnimReportVars .ruiBtn {
  position: absolute;
  position: absolute;
  right: -50px;
  bottom: 60px;
  -webkit-box-shadow: 0 2px 10px 0 rgba(91, 98, 99, 0.4);
          box-shadow: 0 2px 10px 0 rgba(91, 98, 99, 0.4);
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
}

.hrPageAnimation .hrAnim .hrAnimReportTimeframe {
  position: absolute;
  top: calc(50% - 120px);
  right: 200px;
  width: 350px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  padding: 10px 10px 5px 5px;
}

.hrPageAnimation .hrAnim .hrAnimReportTimeframe:after {
  opacity: 1;
  content: '';
  height: 22px;
  width: 22px;
  position: absolute;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  top: 150px;
  left: 320px;
  z-index: 10;
}

.hrPageAnimation .hrAnim .hrAnimReportTimeframe .formAnimField .radioBox {
  width: 120px;
  height: 140px;
}

.hrPageAnimation .hrAnim .hrAnimReportTimeframe .formAnimField .radioBox__check {
  color: #fff;
}

.hrPageAnimation .hrAnim .hrAnimReportTimeframe .formAnimField .radioBox__title {
  font-size: 12px;
  padding: 0 10px;
}

.hrPageAnimation .hrAnim .hrAnimReportTable {
  position: absolute;
  top: calc(50% - 190px);
  right: 300px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  padding: 8px 8px 0;
}

.hrPageAnimation .hrAnim .hrAnimReportTable__back {
  width: 350px;
  height: 360px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/hr-animation/report-table-new.png");
  position: relative;
}

.hrPageAnimation .hrAnim .hrAnimReportTable__back:before {
  position: absolute;
  content: 'Loading...';
  text-align: center;
  font-size: 20px;
  line-height: 275px;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  opacity: 0;
}

.hrPageAnimation .hrAnim .hrAnimReportTable:after {
  opacity: 1;
  content: '';
  height: 22px;
  width: 22px;
  position: absolute;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  top: 120px;
  left: 330px;
  z-index: 10;
}

.hrPageAnimation .hrAnim .hrAnimReportFilter {
  position: absolute;
  top: calc(50% - 100px);
  right: 100px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
}

.hrPageAnimation .hrAnim .hrAnimReportFilter__back {
  width: 400px;
  height: 225px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/hr-animation/report-filter-options.png");
}

.hrPageAnimation .hrAnim .hrAnimReportFilter__back:before {
  content: '';
  position: absolute;
  top: 179px;
  left: 139px;
  height: 8px;
  width: 8px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/icon-check-blue.svg");
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
}

.hrPageAnimation .hrAnim .hrAnimReportFilter .ruiBtn {
  position: absolute;
  right: 8px;
  bottom: 8px;
  zoom: 0.5;
}

.hrPageAnimation .hrAnim .hrAnimReportFilter:after {
  opacity: 1;
  content: '';
  height: 22px;
  width: 22px;
  position: absolute;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  top: 150px;
  left: 350px;
  z-index: 10;
}

.hrPageAnimation .hrAnim .hrAnimReportShare {
  position: absolute;
  top: calc(50% - 90px);
  right: 260px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  padding: 8px 8px 0;
}

.hrPageAnimation .hrAnim .hrAnimReportShare .hrAnim__whiteBoxTitle {
  padding: 15px 0;
}

.hrPageAnimation .hrAnim .hrAnimReportShare__back {
  width: 400px;
  height: 180px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/hr-animation/report-share.png");
}

.hrPageAnimation .hrAnim .hrAnimReportShare__back:after {
  opacity: 1;
  content: '';
  height: 22px;
  width: 22px;
  position: absolute;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  top: 200px;
  left: 380px;
  z-index: 10;
}

.hrPageAnimation .hrAnim .hrAnimReportShare__tag {
  position: absolute;
  background-color: #f5f5f5;
  font-size: 16px;
  font-family: ripplingFontNormal;
  padding: 4px 4px 3px;
  border-radius: 0;
}

.hrPageAnimation .hrAnim .hrAnimReportShare__tag.dept {
  top: 80px;
  left: 25px;
}

.hrPageAnimation .hrAnim .hrAnimReportShare__tag.person {
  top: 80px;
  left: 250px;
}

.hrPageAnimation .hrAnim .hrAnimReportShare__tag.pop {
  opacity: 0;
}

.hrPageAnimation .hrAnim .hrAnimReportShare__tag.typing {
  background-color: transparent;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  white-space: nowrap;
  overflow: hidden;
  color: #000000;
}

.hrPageAnimation .hrAnim .hrAnimReportShare__tag.typing > span {
  color: transparent;
  border-right: .6px solid transparent;
}

.hrPageAnimation .hrAnim .hrAnimReportShare__tag.typing > span:last-child {
  padding-right: 2px;
}

.hrPageAnimation .hrAnim .hrAnimReportShare__deptPop {
  position: absolute;
  top: 115px;
  left: 25px;
  width: 280px;
  height: 0;
  -webkit-box-shadow: 0 2px 10px 0 rgba(91, 98, 99, 0.4);
          box-shadow: 0 2px 10px 0 rgba(91, 98, 99, 0.4);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/hr-animation/report-pop-dept.png");
}

.hrPageAnimation .hrAnim .hrAnimReportShare__personPop {
  position: absolute;
  top: 115px;
  left: 250px;
  width: 280px;
  height: 0;
  -webkit-box-shadow: 0 2px 10px 0 rgba(91, 98, 99, 0.4);
          box-shadow: 0 2px 10px 0 rgba(91, 98, 99, 0.4);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/hr-animation/report-pop-people.png");
}

.hrPageAnimation .hrAnim .hrAnimReportShareSuccess {
  position: absolute;
  top: calc(50% - 50px);
  right: 250px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  width: 210px;
  height: 196px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/hr-animation/report-success.png");
}

.hrPageAnimation .hrAnim--animate {
  opacity: 1;
}

.hrPageAnimation .hrAnim--animate .hrAnimPayroll {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 13s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 13s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 13s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimPayroll .appProgress__progress:before {
  -webkit-animation: progressBarAnim 10s cubic-bezier(1, 0, 0, 1) 0.7s 1 normal forwards;
       -o-animation: progressBarAnim 10s cubic-bezier(1, 0, 0, 1) 0.7s 1 normal forwards;
          animation: progressBarAnim 10s cubic-bezier(1, 0, 0, 1) 0.7s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimPayroll .appProgress__progress > span:nth-child(1) {
  -webkit-animation: showAnim 0.05s cubic-bezier(1, 0, 0, 1) 0.5s 1 normal forwards, hideAnim 0.05s cubic-bezier(1, 0, 0, 1) 2.5s 1 normal forwards;
       -o-animation: showAnim 0.05s cubic-bezier(1, 0, 0, 1) 0.5s 1 normal forwards, hideAnim 0.05s cubic-bezier(1, 0, 0, 1) 2.5s 1 normal forwards;
          animation: showAnim 0.05s cubic-bezier(1, 0, 0, 1) 0.5s 1 normal forwards, hideAnim 0.05s cubic-bezier(1, 0, 0, 1) 2.5s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimPayroll .appProgress__progress > span:nth-child(2) {
  -webkit-animation: showAnim 0.05s cubic-bezier(1, 0, 0, 1) 2.5s 1 normal forwards, hideAnim 0.05s cubic-bezier(1, 0, 0, 1) 4.5s 1 normal forwards;
       -o-animation: showAnim 0.05s cubic-bezier(1, 0, 0, 1) 2.5s 1 normal forwards, hideAnim 0.05s cubic-bezier(1, 0, 0, 1) 4.5s 1 normal forwards;
          animation: showAnim 0.05s cubic-bezier(1, 0, 0, 1) 2.5s 1 normal forwards, hideAnim 0.05s cubic-bezier(1, 0, 0, 1) 4.5s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimPayroll .appProgress__progress > span:nth-child(3) {
  -webkit-animation: showAnim 0.05s cubic-bezier(1, 0, 0, 1) 4.5s 1 normal forwards, hideAnim 0.05s cubic-bezier(1, 0, 0, 1) 6.5s 1 normal forwards;
       -o-animation: showAnim 0.05s cubic-bezier(1, 0, 0, 1) 4.5s 1 normal forwards, hideAnim 0.05s cubic-bezier(1, 0, 0, 1) 6.5s 1 normal forwards;
          animation: showAnim 0.05s cubic-bezier(1, 0, 0, 1) 4.5s 1 normal forwards, hideAnim 0.05s cubic-bezier(1, 0, 0, 1) 6.5s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimPayroll .appProgress__progress > span:nth-child(4) {
  -webkit-animation: showAnim 0.05s cubic-bezier(1, 0, 0, 1) 6.5s 1 normal forwards, hideAnim 0.05s cubic-bezier(1, 0, 0, 1) 8.5s 1 normal forwards;
       -o-animation: showAnim 0.05s cubic-bezier(1, 0, 0, 1) 6.5s 1 normal forwards, hideAnim 0.05s cubic-bezier(1, 0, 0, 1) 8.5s 1 normal forwards;
          animation: showAnim 0.05s cubic-bezier(1, 0, 0, 1) 6.5s 1 normal forwards, hideAnim 0.05s cubic-bezier(1, 0, 0, 1) 8.5s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimPayroll .appProgress__progress > span:nth-child(5) {
  -webkit-animation: showAnim 0.05s cubic-bezier(1, 0, 0, 1) 8.5s 1 normal forwards, hideAnim 0.05s cubic-bezier(1, 0, 0, 1) 10.5s 1 normal forwards;
       -o-animation: showAnim 0.05s cubic-bezier(1, 0, 0, 1) 8.5s 1 normal forwards, hideAnim 0.05s cubic-bezier(1, 0, 0, 1) 10.5s 1 normal forwards;
          animation: showAnim 0.05s cubic-bezier(1, 0, 0, 1) 8.5s 1 normal forwards, hideAnim 0.05s cubic-bezier(1, 0, 0, 1) 10.5s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimPayroll .appProgress__progress > span:nth-child(6) {
  -webkit-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 10.7s 1 normal forwards;
       -o-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 10.7s 1 normal forwards;
          animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 10.7s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimPayroll .appProgress__listItem:nth-child(1) {
  -webkit-animation: showHoverColorBlack 0.2s cubic-bezier(1, 0, 0, 1) 2.5s 1 normal forwards;
       -o-animation: showHoverColorBlack 0.2s cubic-bezier(1, 0, 0, 1) 2.5s 1 normal forwards;
          animation: showHoverColorBlack 0.2s cubic-bezier(1, 0, 0, 1) 2.5s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimPayroll .appProgress__listItem:nth-child(1):after {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 2.5s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 2.5s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 2.5s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimPayroll .appProgress__listItem:nth-child(2) {
  -webkit-animation: showHoverColorBlack 0.2s cubic-bezier(1, 0, 0, 1) 4.5s 1 normal forwards;
       -o-animation: showHoverColorBlack 0.2s cubic-bezier(1, 0, 0, 1) 4.5s 1 normal forwards;
          animation: showHoverColorBlack 0.2s cubic-bezier(1, 0, 0, 1) 4.5s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimPayroll .appProgress__listItem:nth-child(2):after {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 4.5s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 4.5s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 4.5s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimPayroll .appProgress__listItem:nth-child(3) {
  -webkit-animation: showHoverColorBlack 0.2s cubic-bezier(1, 0, 0, 1) 6.5s 1 normal forwards;
       -o-animation: showHoverColorBlack 0.2s cubic-bezier(1, 0, 0, 1) 6.5s 1 normal forwards;
          animation: showHoverColorBlack 0.2s cubic-bezier(1, 0, 0, 1) 6.5s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimPayroll .appProgress__listItem:nth-child(3):after {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 6.5s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 6.5s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 6.5s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimPayroll .appProgress__listItem:nth-child(4) {
  -webkit-animation: showHoverColorBlack 0.2s cubic-bezier(1, 0, 0, 1) 8.5s 1 normal forwards;
       -o-animation: showHoverColorBlack 0.2s cubic-bezier(1, 0, 0, 1) 8.5s 1 normal forwards;
          animation: showHoverColorBlack 0.2s cubic-bezier(1, 0, 0, 1) 8.5s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimPayroll .appProgress__listItem:nth-child(4):after {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 8.5s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 8.5s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 8.5s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimPayroll .appProgress__listItem:nth-child(5) {
  -webkit-animation: showHoverColorBlack 0.2s cubic-bezier(1, 0, 0, 1) 10.5s 1 normal forwards;
       -o-animation: showHoverColorBlack 0.2s cubic-bezier(1, 0, 0, 1) 10.5s 1 normal forwards;
          animation: showHoverColorBlack 0.2s cubic-bezier(1, 0, 0, 1) 10.5s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimPayroll .appProgress__listItem:nth-child(5):after {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 10.5s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 10.5s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 10.5s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimPayrollList {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 13.8s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 25.6s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 13.8s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 25.6s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 13.8s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 25.6s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimPayrollList__back {
  -webkit-animation: backgroundScrollPayrollList 1s cubic-bezier(0.645, 0.045, 0.905, 1.125) 14.6s 1 normal forwards, backgroundScrollPayrollListFinal 0.5s cubic-bezier(0.645, 0.045, 0.905, 1.125) 22.1s 1 normal forwards;
       -o-animation: backgroundScrollPayrollList 1s cubic-bezier(0.645, 0.045, 0.905, 1.125) 14.6s 1 normal forwards, backgroundScrollPayrollListFinal 0.5s cubic-bezier(0.645, 0.045, 0.905, 1.125) 22.1s 1 normal forwards;
          animation: backgroundScrollPayrollList 1s cubic-bezier(0.645, 0.045, 0.905, 1.125) 14.6s 1 normal forwards, backgroundScrollPayrollListFinal 0.5s cubic-bezier(0.645, 0.045, 0.905, 1.125) 22.1s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimPayrollList .ruiBtn {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 22.6s 1 normal forwards, buttonClick 0.2s linear 23.6s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 22.6s 1 normal forwards, buttonClick 0.2s linear 23.6s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 22.6s 1 normal forwards, buttonClick 0.2s linear 23.6s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimPayrollList:after {
  -webkit-animation: mouseMoveToPayrollPreviewBtn 0.2s cubic-bezier(1, 0, 0, 1) 23.1s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 23.25s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 23.6s 1 normal forwards;
       -o-animation: mouseMoveToPayrollPreviewBtn 0.2s cubic-bezier(1, 0, 0, 1) 23.1s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 23.25s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 23.6s 1 normal forwards;
          animation: mouseMoveToPayrollPreviewBtn 0.2s cubic-bezier(1, 0, 0, 1) 23.1s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 23.25s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 23.6s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimPayrollListItem {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 17.1s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 21.6s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 17.1s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 21.6s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 17.1s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 21.6s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimPayrollListItem__back:before {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 18.7s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 18.7s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 18.7s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimPayrollListItem__back:after {
  -webkit-animation: mouseMoveToPayrollNotes 0.2s cubic-bezier(1, 0, 0, 1) 17.9s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 18s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 18.6s 1 normal forwards;
       -o-animation: mouseMoveToPayrollNotes 0.2s cubic-bezier(1, 0, 0, 1) 17.9s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 18s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 18.6s 1 normal forwards;
          animation: mouseMoveToPayrollNotes 0.2s cubic-bezier(1, 0, 0, 1) 17.9s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 18s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 18.6s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimPayrollSummary {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 25.9s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 28.9s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 25.9s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 28.9s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 25.9s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 28.9s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimPayrollSummary .ruiBtn {
  -webkit-animation: buttonClick 0.2s linear 27.9s 1 normal forwards;
       -o-animation: buttonClick 0.2s linear 27.9s 1 normal forwards;
          animation: buttonClick 0.2s linear 27.9s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimPayrollSummary:after {
  -webkit-animation: mouseMoveToPayrollSummaryBtn 0.2s cubic-bezier(1, 0, 0, 1) 26.9s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 27.05s 1 normal forwards, mouseClick0 0.2s cubic-bezier(1, 0, 0, 1) 27.9s 1 normal forwards;
       -o-animation: mouseMoveToPayrollSummaryBtn 0.2s cubic-bezier(1, 0, 0, 1) 26.9s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 27.05s 1 normal forwards, mouseClick0 0.2s cubic-bezier(1, 0, 0, 1) 27.9s 1 normal forwards;
          animation: mouseMoveToPayrollSummaryBtn 0.2s cubic-bezier(1, 0, 0, 1) 26.9s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 27.05s 1 normal forwards, mouseClick0 0.2s cubic-bezier(1, 0, 0, 1) 27.9s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimPayrollSuccess {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 29.2s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 32.2s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 29.2s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 32.2s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 29.2s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 32.2s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimPayrollSuccess .ruiBtn {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 30.7s 1 normal forwards, buttonClick 0.2s linear 31.7s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 30.7s 1 normal forwards, buttonClick 0.2s linear 31.7s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 30.7s 1 normal forwards, buttonClick 0.2s linear 31.7s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimPayrollSuccess:after {
  -webkit-animation: mouseMoveToPayrollSuccessBtn 0.2s cubic-bezier(1, 0, 0, 1) 31.2s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 31.35s 1 normal forwards, mouseClick0 0.2s cubic-bezier(1, 0, 0, 1) 31.7s 1 normal forwards;
       -o-animation: mouseMoveToPayrollSuccessBtn 0.2s cubic-bezier(1, 0, 0, 1) 31.2s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 31.35s 1 normal forwards, mouseClick0 0.2s cubic-bezier(1, 0, 0, 1) 31.7s 1 normal forwards;
          animation: mouseMoveToPayrollSuccessBtn 0.2s cubic-bezier(1, 0, 0, 1) 31.2s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 31.35s 1 normal forwards, mouseClick0 0.2s cubic-bezier(1, 0, 0, 1) 31.7s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimReportVars {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 32.5s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 39s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 32.5s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 39s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 32.5s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 39s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimReportVars__back:after {
  -webkit-animation: mouseMoveToReportVarsDept 0.2s cubic-bezier(1, 0, 0, 1) 34s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 34.15s 1 normal forwards, mouseClick0 0.2s cubic-bezier(1, 0, 0, 1) 34.5s 1 normal forwards, mouseMoveToReportVarsComp 0.2s cubic-bezier(1, 0, 0, 1) 35.5s 1 normal forwards, mouseClick1 0.2s cubic-bezier(1, 0, 0, 1) 36s 1 normal forwards, mouseMoveToReportVarsSubmit 0.2s cubic-bezier(1, 0, 0, 1) 37.5s 1 normal forwards, mouseToPointer0 0s cubic-bezier(1, 0, 0, 1) 37.55s 1 normal forwards, mouseToCursor1 0s cubic-bezier(1, 0, 0, 1) 37.65s 1 normal forwards, mouseClick1 0.2s cubic-bezier(1, 0, 0, 1) 38s 1 normal forwards;
       -o-animation: mouseMoveToReportVarsDept 0.2s cubic-bezier(1, 0, 0, 1) 34s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 34.15s 1 normal forwards, mouseClick0 0.2s cubic-bezier(1, 0, 0, 1) 34.5s 1 normal forwards, mouseMoveToReportVarsComp 0.2s cubic-bezier(1, 0, 0, 1) 35.5s 1 normal forwards, mouseClick1 0.2s cubic-bezier(1, 0, 0, 1) 36s 1 normal forwards, mouseMoveToReportVarsSubmit 0.2s cubic-bezier(1, 0, 0, 1) 37.5s 1 normal forwards, mouseToPointer0 0s cubic-bezier(1, 0, 0, 1) 37.55s 1 normal forwards, mouseToCursor1 0s cubic-bezier(1, 0, 0, 1) 37.65s 1 normal forwards, mouseClick1 0.2s cubic-bezier(1, 0, 0, 1) 38s 1 normal forwards;
          animation: mouseMoveToReportVarsDept 0.2s cubic-bezier(1, 0, 0, 1) 34s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 34.15s 1 normal forwards, mouseClick0 0.2s cubic-bezier(1, 0, 0, 1) 34.5s 1 normal forwards, mouseMoveToReportVarsComp 0.2s cubic-bezier(1, 0, 0, 1) 35.5s 1 normal forwards, mouseClick1 0.2s cubic-bezier(1, 0, 0, 1) 36s 1 normal forwards, mouseMoveToReportVarsSubmit 0.2s cubic-bezier(1, 0, 0, 1) 37.5s 1 normal forwards, mouseToPointer0 0s cubic-bezier(1, 0, 0, 1) 37.55s 1 normal forwards, mouseToCursor1 0s cubic-bezier(1, 0, 0, 1) 37.65s 1 normal forwards, mouseClick1 0.2s cubic-bezier(1, 0, 0, 1) 38s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimReportVars__tag--dept {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 34.7s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 34.7s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 34.7s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimReportVars__tag--comp {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 36.2s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 36.2s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 36.2s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimReportVars .ruiBtn {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 37s 1 normal forwards, buttonClick 0.2s linear 38s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 37s 1 normal forwards, buttonClick 0.2s linear 38s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 37s 1 normal forwards, buttonClick 0.2s linear 38s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimReportTimeframe {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 39.3s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 41.8s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 39.3s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 41.8s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 39.3s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 41.8s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimReportTimeframe:after {
  -webkit-animation: mouseMoveToReportTimeframeNo 0.2s cubic-bezier(1, 0, 0, 1) 39.7s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 39.7s 1 normal forwards, mouseMoveToReportTimeframeYes 0.4s cubic-bezier(1, 0, 0, 1) 39.9s 1 normal forwards, mouseToPointer0 0s cubic-bezier(1, 0, 0, 1) 40s 1 normal forwards, mouseToCursor1 0s cubic-bezier(1, 0, 0, 1) 40.1s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 40.8s 1 normal forwards;
       -o-animation: mouseMoveToReportTimeframeNo 0.2s cubic-bezier(1, 0, 0, 1) 39.7s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 39.7s 1 normal forwards, mouseMoveToReportTimeframeYes 0.4s cubic-bezier(1, 0, 0, 1) 39.9s 1 normal forwards, mouseToPointer0 0s cubic-bezier(1, 0, 0, 1) 40s 1 normal forwards, mouseToCursor1 0s cubic-bezier(1, 0, 0, 1) 40.1s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 40.8s 1 normal forwards;
          animation: mouseMoveToReportTimeframeNo 0.2s cubic-bezier(1, 0, 0, 1) 39.7s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 39.7s 1 normal forwards, mouseMoveToReportTimeframeYes 0.4s cubic-bezier(1, 0, 0, 1) 39.9s 1 normal forwards, mouseToPointer0 0s cubic-bezier(1, 0, 0, 1) 40s 1 normal forwards, mouseToCursor1 0s cubic-bezier(1, 0, 0, 1) 40.1s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 40.8s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimReportTimeframe .formAnimField .radioBox:first-child {
  -webkit-animation: transformUp 0.1s cubic-bezier(1, 0, 0, 1) 40.2s 1 normal forwards, showHoverBlue 0.1s cubic-bezier(1, 0, 0, 1) 40.6s 1 normal forwards, showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 40.6s 1 normal forwards;
       -o-animation: transformUp 0.1s cubic-bezier(1, 0, 0, 1) 40.2s 1 normal forwards, showHoverBlue 0.1s cubic-bezier(1, 0, 0, 1) 40.6s 1 normal forwards, showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 40.6s 1 normal forwards;
          animation: transformUp 0.1s cubic-bezier(1, 0, 0, 1) 40.2s 1 normal forwards, showHoverBlue 0.1s cubic-bezier(1, 0, 0, 1) 40.6s 1 normal forwards, showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 40.6s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimReportTimeframe .formAnimField .radioBox:first-child .radioBox__title {
  -webkit-animation: showHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 40.2s 1 normal forwards, showHoverLightColor 0.1s cubic-bezier(1, 0, 0, 1) 40.6s 1 normal forwards;
       -o-animation: showHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 40.2s 1 normal forwards, showHoverLightColor 0.1s cubic-bezier(1, 0, 0, 1) 40.6s 1 normal forwards;
          animation: showHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 40.2s 1 normal forwards, showHoverLightColor 0.1s cubic-bezier(1, 0, 0, 1) 40.6s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimReportTimeframe .formAnimField .radioBox:first-child .radioBox__check {
  -webkit-animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 40.2s 1 normal forwards, showHoverColorBlue 0.1s cubic-bezier(1, 0, 0, 1) 40.6s 1 normal forwards;
       -o-animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 40.2s 1 normal forwards, showHoverColorBlue 0.1s cubic-bezier(1, 0, 0, 1) 40.6s 1 normal forwards;
          animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 40.2s 1 normal forwards, showHoverColorBlue 0.1s cubic-bezier(1, 0, 0, 1) 40.6s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimReportTimeframe .formAnimField .radioBox:first-child:after {
  -webkit-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 40.2s 1 normal forwards;
       -o-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 40.2s 1 normal forwards;
          animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 40.2s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimReportTimeframe .formAnimField .radioBox:last-child {
  -webkit-animation: transformUp 0.1s cubic-bezier(1, 0, 0, 1) 39.8s 1 normal forwards, transformDown 0.1s cubic-bezier(1, 0, 0, 1) 40s 1 normal forwards;
       -o-animation: transformUp 0.1s cubic-bezier(1, 0, 0, 1) 39.8s 1 normal forwards, transformDown 0.1s cubic-bezier(1, 0, 0, 1) 40s 1 normal forwards;
          animation: transformUp 0.1s cubic-bezier(1, 0, 0, 1) 39.8s 1 normal forwards, transformDown 0.1s cubic-bezier(1, 0, 0, 1) 40s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimReportTimeframe .formAnimField .radioBox:last-child .radioBox__title {
  -webkit-animation: showHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 39.8s 1 normal forwards, hideHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 40s 1 normal forwards;
       -o-animation: showHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 39.8s 1 normal forwards, hideHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 40s 1 normal forwards;
          animation: showHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 39.8s 1 normal forwards, hideHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 40s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimReportTimeframe .formAnimField .radioBox:last-child .radioBox__check {
  -webkit-animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 39.8s 1 normal forwards, hideHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 40s 1 normal forwards;
       -o-animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 39.8s 1 normal forwards, hideHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 40s 1 normal forwards;
          animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 39.8s 1 normal forwards, hideHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 40s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimReportTimeframe .formAnimField .radioBox:last-child:after {
  -webkit-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 39.8s 1 normal forwards, hideAnim 0.1s cubic-bezier(1, 0, 0, 1) 40s 1 normal forwards;
       -o-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 39.8s 1 normal forwards, hideAnim 0.1s cubic-bezier(1, 0, 0, 1) 40s 1 normal forwards;
          animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 39.8s 1 normal forwards, hideAnim 0.1s cubic-bezier(1, 0, 0, 1) 40s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimReportTable {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 42.1s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 42.1s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 42.1s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimReportTable__back {
  -webkit-animation: backgroundChangeReportsTable 0s linear 50.2s 1 normal forwards;
       -o-animation: backgroundChangeReportsTable 0s linear 50.2s 1 normal forwards;
          animation: backgroundChangeReportsTable 0s linear 50.2s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimReportTable__back:before {
  -webkit-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 49.7s 1 normal forwards, hideAnim 0.1s cubic-bezier(1, 0, 0, 1) 50.7s 1 normal forwards;
       -o-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 49.7s 1 normal forwards, hideAnim 0.1s cubic-bezier(1, 0, 0, 1) 50.7s 1 normal forwards;
          animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 49.7s 1 normal forwards, hideAnim 0.1s cubic-bezier(1, 0, 0, 1) 50.7s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimReportTable:after {
  -webkit-animation: mouseMoveToReportFilter 0.3s cubic-bezier(1, 0, 0, 1) 43.6s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 43.85s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 43.9s 1 normal forwards, hideAnim 0.1s cubic-bezier(1, 0, 0, 1) 44.4s 1 normal forwards, mouseToPointer0 0s cubic-bezier(1, 0, 0, 1) 44.4s 1 normal forwards, showAnim 0.1s cubic-bezier(1, 0, 0, 1) 51.7s 1 normal forwards, mouseMoveToReportShareBtn 0.3s cubic-bezier(1, 0, 0, 1) 53.2s 1 normal forwards, mouseToCursor1 0s cubic-bezier(1, 0, 0, 1) 53.35s 1 normal forwards, mouseClick1 0.1s cubic-bezier(1, 0, 0, 1) 54s 1 normal forwards, hideAnim 0.1s cubic-bezier(1, 0, 0, 1) 55s 1 normal forwards;
       -o-animation: mouseMoveToReportFilter 0.3s cubic-bezier(1, 0, 0, 1) 43.6s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 43.85s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 43.9s 1 normal forwards, hideAnim 0.1s cubic-bezier(1, 0, 0, 1) 44.4s 1 normal forwards, mouseToPointer0 0s cubic-bezier(1, 0, 0, 1) 44.4s 1 normal forwards, showAnim 0.1s cubic-bezier(1, 0, 0, 1) 51.7s 1 normal forwards, mouseMoveToReportShareBtn 0.3s cubic-bezier(1, 0, 0, 1) 53.2s 1 normal forwards, mouseToCursor1 0s cubic-bezier(1, 0, 0, 1) 53.35s 1 normal forwards, mouseClick1 0.1s cubic-bezier(1, 0, 0, 1) 54s 1 normal forwards, hideAnim 0.1s cubic-bezier(1, 0, 0, 1) 55s 1 normal forwards;
          animation: mouseMoveToReportFilter 0.3s cubic-bezier(1, 0, 0, 1) 43.6s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 43.85s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 43.9s 1 normal forwards, hideAnim 0.1s cubic-bezier(1, 0, 0, 1) 44.4s 1 normal forwards, mouseToPointer0 0s cubic-bezier(1, 0, 0, 1) 44.4s 1 normal forwards, showAnim 0.1s cubic-bezier(1, 0, 0, 1) 51.7s 1 normal forwards, mouseMoveToReportShareBtn 0.3s cubic-bezier(1, 0, 0, 1) 53.2s 1 normal forwards, mouseToCursor1 0s cubic-bezier(1, 0, 0, 1) 53.35s 1 normal forwards, mouseClick1 0.1s cubic-bezier(1, 0, 0, 1) 54s 1 normal forwards, hideAnim 0.1s cubic-bezier(1, 0, 0, 1) 55s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimReportFilter {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 44.4s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 49.2s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 44.4s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 49.2s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 44.4s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 49.2s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimReportFilter:after {
  -webkit-animation: mouseMoveToReportFilterOption 0.2s cubic-bezier(1, 0, 0, 1) 45.6s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 45.75s 1 normal forwards, mouseClick0 0.2s cubic-bezier(1, 0, 0, 1) 46.4s 1 normal forwards, mouseMoveToReportFilterApply 0.2s cubic-bezier(1, 0, 0, 1) 47.4s 1 normal forwards, mouseToPointer0 0s cubic-bezier(1, 0, 0, 1) 47.45s 1 normal forwards, mouseToCursor1 0s cubic-bezier(1, 0, 0, 1) 47.55s 1 normal forwards, mouseClick1 0.2s cubic-bezier(1, 0, 0, 1) 48.4s 1 normal forwards;
       -o-animation: mouseMoveToReportFilterOption 0.2s cubic-bezier(1, 0, 0, 1) 45.6s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 45.75s 1 normal forwards, mouseClick0 0.2s cubic-bezier(1, 0, 0, 1) 46.4s 1 normal forwards, mouseMoveToReportFilterApply 0.2s cubic-bezier(1, 0, 0, 1) 47.4s 1 normal forwards, mouseToPointer0 0s cubic-bezier(1, 0, 0, 1) 47.45s 1 normal forwards, mouseToCursor1 0s cubic-bezier(1, 0, 0, 1) 47.55s 1 normal forwards, mouseClick1 0.2s cubic-bezier(1, 0, 0, 1) 48.4s 1 normal forwards;
          animation: mouseMoveToReportFilterOption 0.2s cubic-bezier(1, 0, 0, 1) 45.6s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 45.75s 1 normal forwards, mouseClick0 0.2s cubic-bezier(1, 0, 0, 1) 46.4s 1 normal forwards, mouseMoveToReportFilterApply 0.2s cubic-bezier(1, 0, 0, 1) 47.4s 1 normal forwards, mouseToPointer0 0s cubic-bezier(1, 0, 0, 1) 47.45s 1 normal forwards, mouseToCursor1 0s cubic-bezier(1, 0, 0, 1) 47.55s 1 normal forwards, mouseClick1 0.2s cubic-bezier(1, 0, 0, 1) 48.4s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimReportFilter__back:before {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 46.5s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 46.5s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 46.5s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimReportFilter .ruiBtn {
  -webkit-animation: buttonClick 0.2s linear 48.4s 1 normal forwards;
       -o-animation: buttonClick 0.2s linear 48.4s 1 normal forwards;
          animation: buttonClick 0.2s linear 48.4s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimReportShare {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 55.5s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 62.5s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 55.5s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 62.5s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 55.5s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 62.5s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimReportShare__back:after {
  -webkit-animation: mouseMoveToReportShare 0.2s cubic-bezier(1, 0, 0, 1) 61s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 61.15s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 61.7s 1 normal forwards;
       -o-animation: mouseMoveToReportShare 0.2s cubic-bezier(1, 0, 0, 1) 61s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 61.15s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 61.7s 1 normal forwards;
          animation: mouseMoveToReportShare 0.2s cubic-bezier(1, 0, 0, 1) 61s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 61.15s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 61.7s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimReportShare__deptPop {
  -webkit-animation: reportSharePopExpandAnim 0.2s cubic-bezier(1, 0, 0, 1) 57.3s 1 normal forwards, reportSharePopCollapseAnim 0.2s cubic-bezier(1, 0, 0, 1) 58.3s 1 normal forwards;
       -o-animation: reportSharePopExpandAnim 0.2s cubic-bezier(1, 0, 0, 1) 57.3s 1 normal forwards, reportSharePopCollapseAnim 0.2s cubic-bezier(1, 0, 0, 1) 58.3s 1 normal forwards;
          animation: reportSharePopExpandAnim 0.2s cubic-bezier(1, 0, 0, 1) 57.3s 1 normal forwards, reportSharePopCollapseAnim 0.2s cubic-bezier(1, 0, 0, 1) 58.3s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimReportShare__personPop {
  -webkit-animation: reportSharePopExpandAnim 0.2s cubic-bezier(1, 0, 0, 1) 59.3s 1 normal forwards, reportSharePopCollapseAnim 0.2s cubic-bezier(1, 0, 0, 1) 60.3s 1 normal forwards;
       -o-animation: reportSharePopExpandAnim 0.2s cubic-bezier(1, 0, 0, 1) 59.3s 1 normal forwards, reportSharePopCollapseAnim 0.2s cubic-bezier(1, 0, 0, 1) 60.3s 1 normal forwards;
          animation: reportSharePopExpandAnim 0.2s cubic-bezier(1, 0, 0, 1) 59.3s 1 normal forwards, reportSharePopCollapseAnim 0.2s cubic-bezier(1, 0, 0, 1) 60.3s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimReportShare__tag.dept.pop {
  -webkit-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 58.3s 1 normal forwards;
       -o-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 58.3s 1 normal forwards;
          animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 58.3s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimReportShare__tag.dept.typing > span:nth-child(1) {
  -webkit-animation: typing 0.08s linear 56.8s 1 normal forwards;
       -o-animation: typing 0.08s linear 56.8s 1 normal forwards;
          animation: typing 0.08s linear 56.8s 1 normal forwards;
  animation: typing 0.08s linear 56.8s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimReportShare__tag.dept.typing > span:nth-child(2) {
  -webkit-animation: typing 0.08s linear 56.88s 1 normal forwards;
       -o-animation: typing 0.08s linear 56.88s 1 normal forwards;
          animation: typing 0.08s linear 56.88s 1 normal forwards;
  animation: typing 0.08s linear 56.88s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimReportShare__tag.dept.typing > span:nth-child(3) {
  -webkit-animation: typing 0.08s linear 56.96s 1 normal forwards;
       -o-animation: typing 0.08s linear 56.96s 1 normal forwards;
          animation: typing 0.08s linear 56.96s 1 normal forwards;
  animation: typing 0.08s linear 56.96s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimReportShare__tag.dept.typing > span:nth-child(4) {
  -webkit-animation: typing 0.08s linear 57.04s 1 normal forwards;
       -o-animation: typing 0.08s linear 57.04s 1 normal forwards;
          animation: typing 0.08s linear 57.04s 1 normal forwards;
  animation: typing 0.08s linear 57.04s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimReportShare__tag.dept.typing > span:nth-child(5) {
  -webkit-animation: typing 0.08s linear 57.12s 1 normal forwards;
       -o-animation: typing 0.08s linear 57.12s 1 normal forwards;
          animation: typing 0.08s linear 57.12s 1 normal forwards;
  animation: typing 0.08s linear 57.12s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimReportShare__tag.person.pop {
  -webkit-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 60.3s 1 normal forwards;
       -o-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 60.3s 1 normal forwards;
          animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 60.3s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimReportShare__tag.person.typing > span:nth-child(1) {
  -webkit-animation: typing 0.08s linear 58.8s 1 normal forwards;
       -o-animation: typing 0.08s linear 58.8s 1 normal forwards;
          animation: typing 0.08s linear 58.8s 1 normal forwards;
  animation: typing 0.08s linear 58.8s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimReportShare__tag.person.typing > span:nth-child(2) {
  -webkit-animation: typing 0.08s linear 58.88s 1 normal forwards;
       -o-animation: typing 0.08s linear 58.88s 1 normal forwards;
          animation: typing 0.08s linear 58.88s 1 normal forwards;
  animation: typing 0.08s linear 58.88s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimReportShare__tag.person.typing > span:nth-child(3) {
  -webkit-animation: typing 0.08s linear 58.96s 1 normal forwards;
       -o-animation: typing 0.08s linear 58.96s 1 normal forwards;
          animation: typing 0.08s linear 58.96s 1 normal forwards;
  animation: typing 0.08s linear 58.96s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimReportShare__tag.person.typing > span:nth-child(4) {
  -webkit-animation: typing 0.08s linear 59.04s 1 normal forwards;
       -o-animation: typing 0.08s linear 59.04s 1 normal forwards;
          animation: typing 0.08s linear 59.04s 1 normal forwards;
  animation: typing 0.08s linear 59.04s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimReportShare__tag.person.typing > span:nth-child(5) {
  -webkit-animation: typing 0.08s linear 59.12s 1 normal forwards;
       -o-animation: typing 0.08s linear 59.12s 1 normal forwards;
          animation: typing 0.08s linear 59.12s 1 normal forwards;
  animation: typing 0.08s linear 59.12s 1 normal forwards;
}

.hrPageAnimation .hrAnim--animate .hrAnimReportShareSuccess {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 64s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 64s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 64s 1 normal forwards;
}

.hrPageAnimation .actionBtn {
  top: auto;
  bottom: 80px;
  right: calc(50% - 80px);
}

.hrPageAnimation .hrAnim {
  position: absolute;
  left: calc(50% - 300px);
  bottom: -200px;
  width: 600px;
  height: 600px;
  -webkit-transform: scale(0.5);
       -o-transform: scale(0.5);
          transform: scale(0.5);
  -webkit-transform-origin: center;
       -o-transform-origin: center;
          transform-origin: center;
}

.hrPageAnimation .hrAnim .hrAnimPayroll {
  top: 0;
  right: 0;
  zoom: 1.35;
}

.hrPageAnimation .hrAnim .hrAnimPayrollList {
  top: -80px;
  right: 0;
  zoom: 1.42;
}

.hrPageAnimation .hrAnim .hrAnimPayrollListItem {
  top: 135px;
  right: 0;
  zoom: 1.19;
}

.hrPageAnimation .hrAnim .hrAnimPayrollSummary {
  top: 0;
  right: 0;
  zoom: 1.3;
}

.hrPageAnimation .hrAnim .hrAnimPayrollSuccess {
  top: 0;
  right: 80px;
  zoom: 1.5;
}

.hrPageAnimation .hrAnim .hrAnimReportVars {
  top: 0;
  right: 0;
  zoom: 1.35;
}

.hrPageAnimation .hrAnim .hrAnimReportTimeframe {
  top: 0;
  right: 0;
  zoom: 1.7;
}

.hrPageAnimation .hrAnim .hrAnimReportTable {
  top: 0;
  right: 0;
  zoom: 1.7;
}

.hrPageAnimation .hrAnim .hrAnimReportFilter {
  top: 0;
  right: 0;
  zoom: 1.55;
}

.hrPageAnimation .hrAnim .hrAnimReportShare {
  top: 0;
  right: 0;
  zoom: 1.5;
}

.hrPageAnimation .hrAnim .hrAnimReportShareSuccess {
  top: -30px;
  right: 10%;
  zoom: 2.5;
}

@media screen and (min-width: 768px) {
  .hrPageAnimation .actionBtn {
    bottom: auto;
    top: calc(50% + 80px);
    right: 60px;
  }

  .hrPageAnimation .hrAnim {
    position: relative;
    height: auto;
    width: auto;
    left: auto;
    -webkit-transform: scale(0.44) translateY(320px);
         -o-transform: scale(0.44) translateY(320px);
            transform: scale(0.44) translateY(320px);
  }

  .hrPageAnimation .hrAnim .hrAnimPayroll {
    top: calc(50% - 120px);
    right: 260px;
    zoom: normal;
  }

  .hrPageAnimation .hrAnim .hrAnimPayrollList {
    top: calc(50% - 280px);
    right: 80px;
    zoom: normal;
  }

  .hrPageAnimation .hrAnim .hrAnimPayrollListItem {
    top: calc(50% - 80px);
    right: 35px;
    zoom: normal;
  }

  .hrPageAnimation .hrAnim .hrAnimPayrollSummary {
    top: calc(50% - 160px);
    right: 210px;
    zoom: normal;
  }

  .hrPageAnimation .hrAnim .hrAnimPayrollSuccess {
    top: calc(50% - 120px);
    right: 300px;
    zoom: normal;
  }

  .hrPageAnimation .hrAnim .hrAnimReportVars {
    top: calc(50% - 120px);
    right: 100px;
    zoom: normal;
  }

  .hrPageAnimation .hrAnim .hrAnimReportTimeframe {
    top: calc(50% - 190px);
    right: 300px;
    zoom: normal;
  }

  .hrPageAnimation .hrAnim .hrAnimReportTable {
    top: calc(50% - 190px);
    right: 300px;
    zoom: normal;
  }

  .hrPageAnimation .hrAnim .hrAnimReportFilter {
    top: calc(50% - 100px);
    right: 100px;
    zoom: normal;
  }

  .hrPageAnimation .hrAnim .hrAnimReportShare {
    top: calc(50% - 50px);
    right: 260px;
    zoom: normal;
  }

  .hrPageAnimation .hrAnim .hrAnimReportShareSuccess {
    top: calc(50% - 50px);
    right: 250px;
    zoom: normal;
  }
}

@media screen and (min-width: 900px) {
  .hrPageAnimation .actionBtn {
    top: calc(50% - 80px);
    right: 130px;
  }

  .hrPageAnimation .hrAnim {
    -webkit-transform: scale(0.6) translateY(280px);
         -o-transform: scale(0.6) translateY(280px);
            transform: scale(0.6) translateY(280px);
  }
}

@media screen and (min-width: 1100px) {
  .hrPageAnimation .actionBtn {
    top: calc(50% - 80px);
    right: 330px;
  }

  .hrPageAnimation .hrAnim {
    -webkit-transform: scale(0.9) translateY(-200px);
         -o-transform: scale(0.9) translateY(-200px);
            transform: scale(0.9) translateY(-200px);
  }
}

@media screen and (min-width: 1280px) {
  .hrPageAnimation .hrAnim {
    -webkit-transform: scale(1) translateY(-200px);
         -o-transform: scale(1) translateY(-200px);
            transform: scale(1) translateY(-200px);
  }
}

.appProgress {
  padding: 25px 60px 25px 30px;
}

.appProgress__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.appProgress__app {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-family: ripplingFontMedium;
  font-size: 16px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.appProgress__app:before {
  content: '';
  height: 40px;
  width: 40px;
  border-radius: 8px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #EFEEEF;
  margin-right: 10px;
}

.appProgress__app--payroll:before {
  background-image: url("https://cdn.rippling.com/static/marketing/assets/app-icons/payroll.png");
}

.appProgress__progress {
  margin-top: 20px;
  width: 100%;
  height: 12px;
  border: 1px solid #e6e6e6;
  position: relative;
}

.appProgress__progress:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background-color: #22c8e3;
}

.appProgress__progress > span {
  position: absolute;
  top: -3px;
  right: -10px;
  font-size: 12px;
  font-family: ripplingFontBook;
  -webkit-transform: translate(100%, 0);
       -o-transform: translate(100%, 0);
          transform: translate(100%, 0);
  color: #000;
  opacity: 0;
}

.appProgress__list {
  margin-top: 22px;
}

.appProgress__listItem {
  position: relative;
  font-family: ripplingFontBook;
  font-size: 12px;
  color: #aaa;
  padding: 5px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  opacity: 1;
  white-space: nowrap;
}

.appProgress__listItem:before {
  content: '';
  height: 18px;
  width: 18px;
  border-radius: 50%;
  border: 1px solid #EFEEEF;
  margin-right: 12px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.appProgress__listItem:after {
  content: '\F00C';
  position: absolute;
  left: 0;
  top: 5px;
  font-family: fontIcons;
  text-align: center;
  font-size: 10px;
  line-height: 18px;
  height: 18px;
  width: 18px;
  border-radius: 50%;
  color: #ffffff;
  background-color: #00A95E;
  margin-right: 12px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

@-webkit-keyframes backgroundChangeReportsTable {
  to {
    background-image: url("https://cdn.rippling.com/static/marketing/assets/hr-animation/report-table-new-filtered.png");
  }
}

@-o-keyframes backgroundChangeReportsTable {
  to {
    background-image: url("https://cdn.rippling.com/static/marketing/assets/hr-animation/report-table-new-filtered.png");
  }
}

@keyframes backgroundChangeReportsTable {
  to {
    background-image: url("https://cdn.rippling.com/static/marketing/assets/hr-animation/report-table-new-filtered.png");
  }
}

@-webkit-keyframes backgroundScrollPayrollList {
  to {
    background-position: center -170px;
  }
}

@-o-keyframes backgroundScrollPayrollList {
  to {
    background-position: center -170px;
  }
}

@keyframes backgroundScrollPayrollList {
  to {
    background-position: center -170px;
  }
}

@-webkit-keyframes backgroundScrollPayrollListFinal {
  from {
    background-position: center -170px;
  }

  to {
    background-position: center bottom;
  }
}

@-o-keyframes backgroundScrollPayrollListFinal {
  from {
    background-position: center -170px;
  }

  to {
    background-position: center bottom;
  }
}

@keyframes backgroundScrollPayrollListFinal {
  from {
    background-position: center -170px;
  }

  to {
    background-position: center bottom;
  }
}

@-webkit-keyframes mouseMoveToRunPayroll {
  to {
    top: 30px;
    left: 75px;
  }
}

@-o-keyframes mouseMoveToRunPayroll {
  to {
    top: 30px;
    left: 75px;
  }
}

@keyframes mouseMoveToRunPayroll {
  to {
    top: 30px;
    left: 75px;
  }
}

@-webkit-keyframes mouseMoveToPayrollNotes {
  to {
    top: 25px;
    left: 460px;
  }
}

@-o-keyframes mouseMoveToPayrollNotes {
  to {
    top: 25px;
    left: 460px;
  }
}

@keyframes mouseMoveToPayrollNotes {
  to {
    top: 25px;
    left: 460px;
  }
}

@-webkit-keyframes mouseMoveToPayrollPreviewBtn {
  to {
    top: 275px;
    left: 385px;
  }
}

@-o-keyframes mouseMoveToPayrollPreviewBtn {
  to {
    top: 275px;
    left: 385px;
  }
}

@keyframes mouseMoveToPayrollPreviewBtn {
  to {
    top: 275px;
    left: 385px;
  }
}

@-webkit-keyframes mouseMoveToPayrollSummaryBtn {
  to {
    top: 300px;
    left: 240px;
  }
}

@-o-keyframes mouseMoveToPayrollSummaryBtn {
  to {
    top: 300px;
    left: 240px;
  }
}

@keyframes mouseMoveToPayrollSummaryBtn {
  to {
    top: 300px;
    left: 240px;
  }
}

@-webkit-keyframes mouseMoveToPayrollSuccessBtn {
  to {
    top: 200px;
    left: 180px;
  }
}

@-o-keyframes mouseMoveToPayrollSuccessBtn {
  to {
    top: 200px;
    left: 180px;
  }
}

@keyframes mouseMoveToPayrollSuccessBtn {
  to {
    top: 200px;
    left: 180px;
  }
}

@-webkit-keyframes mouseMoveToReportVarsDept {
  to {
    top: 165px;
    left: 30px;
  }
}

@-o-keyframes mouseMoveToReportVarsDept {
  to {
    top: 165px;
    left: 30px;
  }
}

@keyframes mouseMoveToReportVarsDept {
  to {
    top: 165px;
    left: 30px;
  }
}

@-webkit-keyframes mouseMoveToReportVarsComp {
  from {
    top: 165px;
    left: 30px;
  }

  to {
    top: 177px;
    left: 140px;
  }
}

@-o-keyframes mouseMoveToReportVarsComp {
  from {
    top: 165px;
    left: 30px;
  }

  to {
    top: 177px;
    left: 140px;
  }
}

@keyframes mouseMoveToReportVarsComp {
  from {
    top: 165px;
    left: 30px;
  }

  to {
    top: 177px;
    left: 140px;
  }
}

@-webkit-keyframes mouseMoveToReportVarsSubmit {
  from {
    top: 177px;
    left: 140px;
  }

  to {
    top: 150px;
    left: 440px;
  }
}

@-o-keyframes mouseMoveToReportVarsSubmit {
  from {
    top: 177px;
    left: 140px;
  }

  to {
    top: 150px;
    left: 440px;
  }
}

@keyframes mouseMoveToReportVarsSubmit {
  from {
    top: 177px;
    left: 140px;
  }

  to {
    top: 150px;
    left: 440px;
  }
}

@-webkit-keyframes mouseMoveToReportTimeframeNo {
  to {
    top: 200px;
    left: 240px;
  }
}

@-o-keyframes mouseMoveToReportTimeframeNo {
  to {
    top: 200px;
    left: 240px;
  }
}

@keyframes mouseMoveToReportTimeframeNo {
  to {
    top: 200px;
    left: 240px;
  }
}

@-webkit-keyframes mouseMoveToReportTimeframeYes {
  from {
    top: 200px;
    left: 240px;
  }

  to {
    top: 200px;
    left: 100px;
  }
}

@-o-keyframes mouseMoveToReportTimeframeYes {
  from {
    top: 200px;
    left: 240px;
  }

  to {
    top: 200px;
    left: 100px;
  }
}

@keyframes mouseMoveToReportTimeframeYes {
  from {
    top: 200px;
    left: 240px;
  }

  to {
    top: 200px;
    left: 100px;
  }
}

@-webkit-keyframes mouseMoveToReportFilter {
  to {
    top: 92px;
    left: 35px;
  }
}

@-o-keyframes mouseMoveToReportFilter {
  to {
    top: 92px;
    left: 35px;
  }
}

@keyframes mouseMoveToReportFilter {
  to {
    top: 92px;
    left: 35px;
  }
}

@-webkit-keyframes mouseMoveToReportShareBtn {
  from {
    top: 92px;
    left: 35px;
  }

  to {
    top: 30px;
    left: 332px;
  }
}

@-o-keyframes mouseMoveToReportShareBtn {
  from {
    top: 92px;
    left: 35px;
  }

  to {
    top: 30px;
    left: 332px;
  }
}

@keyframes mouseMoveToReportShareBtn {
  from {
    top: 92px;
    left: 35px;
  }

  to {
    top: 30px;
    left: 332px;
  }
}

@-webkit-keyframes mouseMoveToReportShareBtnStart {
  to {
    top: 30px;
    left: 332px;
  }
}

@-o-keyframes mouseMoveToReportShareBtnStart {
  to {
    top: 30px;
    left: 332px;
  }
}

@keyframes mouseMoveToReportShareBtnStart {
  to {
    top: 30px;
    left: 332px;
  }
}

@-webkit-keyframes mouseMoveToReportFilterOption {
  to {
    top: 178px;
    left: 160px;
  }
}

@-o-keyframes mouseMoveToReportFilterOption {
  to {
    top: 178px;
    left: 160px;
  }
}

@keyframes mouseMoveToReportFilterOption {
  to {
    top: 178px;
    left: 160px;
  }
}

@-webkit-keyframes mouseMoveToReportFilterApply {
  from {
    top: 178px;
    left: 160px;
  }

  to {
    top: 212px;
    left: 355px;
  }
}

@-o-keyframes mouseMoveToReportFilterApply {
  from {
    top: 178px;
    left: 160px;
  }

  to {
    top: 212px;
    left: 355px;
  }
}

@keyframes mouseMoveToReportFilterApply {
  from {
    top: 178px;
    left: 160px;
  }

  to {
    top: 212px;
    left: 355px;
  }
}

@-webkit-keyframes mouseMoveToReportShare {
  to {
    top: 215px;
    left: 50px;
  }
}

@-o-keyframes mouseMoveToReportShare {
  to {
    top: 215px;
    left: 50px;
  }
}

@keyframes mouseMoveToReportShare {
  to {
    top: 215px;
    left: 50px;
  }
}

@-webkit-keyframes reportSharePopExpandAnim {
  0% {
    height: 0;
  }

  100% {
    height: 76px;
  }
}

@-o-keyframes reportSharePopExpandAnim {
  0% {
    height: 0;
  }

  100% {
    height: 76px;
  }
}

@keyframes reportSharePopExpandAnim {
  0% {
    height: 0;
  }

  100% {
    height: 76px;
  }
}

@-webkit-keyframes reportSharePopCollapseAnim {
  0% {
    height: 76px;
  }

  100% {
    height: 0;
  }
}

@-o-keyframes reportSharePopCollapseAnim {
  0% {
    height: 76px;
  }

  100% {
    height: 0;
  }
}

@keyframes reportSharePopCollapseAnim {
  0% {
    height: 76px;
  }

  100% {
    height: 0;
  }
}

@-webkit-keyframes progressBarAnim {
  0% {
    width: 0%;
  }

  20% {
    width: 20%;
  }

  40% {
    width: 40%;
  }

  60% {
    width: 60%;
  }

  80% {
    width: 80%;
  }

  100% {
    width: 100%;
  }
}

@-o-keyframes progressBarAnim {
  0% {
    width: 0%;
  }

  20% {
    width: 20%;
  }

  40% {
    width: 40%;
  }

  60% {
    width: 60%;
  }

  80% {
    width: 80%;
  }

  100% {
    width: 100%;
  }
}

@keyframes progressBarAnim {
  0% {
    width: 0%;
  }

  20% {
    width: 20%;
  }

  40% {
    width: 40%;
  }

  60% {
    width: 60%;
  }

  80% {
    width: 80%;
  }

  100% {
    width: 100%;
  }
}

.reportTabAnimation .ruiContentHeadImage__rightBlock {
  -webkit-box-flex: 100%;
      -ms-flex: 100%;
          flex: 100%;
}

.reportTabAnimation .reportAnim {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 0 auto 80px;
  zoom: .7;
  opacity: 0;
}

.reportTabAnimation .reportAnim__whiteBox {
  background-color: #ffffff;
  -webkit-box-shadow: 0 0 30px 0 rgba(91, 98, 99, 0.4);
          box-shadow: 0 0 30px 0 rgba(91, 98, 99, 0.4);
  -webkit-transform-origin: center;
       -o-transform-origin: center;
          transform-origin: center;
}

.reportTabAnimation .reportAnim__whiteBoxTitle {
  font-family: ripplingFontNormal;
  text-align: center;
  padding-top: 30px;
  font-size: 16px;
  color: #000000;
}

.reportTabAnimation .reportAnim .reportAnimReportTable {
  position: absolute;
  top: 0;
  left: -30px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  padding: 8px 8px 0;
}

.reportTabAnimation .reportAnim .reportAnimReportTable__back {
  width: 350px;
  height: 360px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/hr-animation/report-table-new.png");
  position: relative;
}

.reportTabAnimation .reportAnim .reportAnimReportTable__back:before {
  position: absolute;
  content: 'Loading...';
  text-align: center;
  font-size: 20px;
  line-height: 275px;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  opacity: 0;
}

.reportTabAnimation .reportAnim .reportAnimReportTable:after {
  opacity: 1;
  content: '';
  height: 22px;
  width: 22px;
  position: absolute;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  top: 120px;
  left: 330px;
  z-index: 10;
}

.reportTabAnimation .reportAnim .reportAnimReportShare {
  position: absolute;
  top: 100px;
  left: -60px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  padding: 8px 8px 0;
}

.reportTabAnimation .reportAnim .reportAnimReportShare .reportAnim__whiteBoxTitle {
  padding: 15px 0;
}

.reportTabAnimation .reportAnim .reportAnimReportShare__back {
  width: 400px;
  height: 180px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/hr-animation/report-share.png");
}

.reportTabAnimation .reportAnim .reportAnimReportShare__back:after {
  opacity: 1;
  content: '';
  height: 22px;
  width: 22px;
  position: absolute;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  top: 200px;
  left: 380px;
  z-index: 10;
}

.reportTabAnimation .reportAnim .reportAnimReportShare__tag {
  position: absolute;
  background-color: #f5f5f5;
  font-size: 16px;
  font-family: ripplingFontNormal;
  padding: 4px 4px 3px;
  border-radius: 0;
}

.reportTabAnimation .reportAnim .reportAnimReportShare__tag.dept {
  top: 80px;
  left: 25px;
}

.reportTabAnimation .reportAnim .reportAnimReportShare__tag.person {
  top: 80px;
  left: 250px;
}

.reportTabAnimation .reportAnim .reportAnimReportShare__tag.pop {
  opacity: 0;
}

.reportTabAnimation .reportAnim .reportAnimReportShare__tag.typing {
  background-color: transparent;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  white-space: nowrap;
  overflow: hidden;
  color: #000000;
}

.reportTabAnimation .reportAnim .reportAnimReportShare__tag.typing > span {
  color: transparent;
  border-right: .6px solid transparent;
}

.reportTabAnimation .reportAnim .reportAnimReportShare__tag.typing > span:last-child {
  padding-right: 2px;
}

.reportTabAnimation .reportAnim .reportAnimReportShare__deptPop {
  position: absolute;
  top: 115px;
  left: 25px;
  width: 280px;
  height: 0;
  -webkit-box-shadow: 0 2px 10px 0 rgba(91, 98, 99, 0.4);
          box-shadow: 0 2px 10px 0 rgba(91, 98, 99, 0.4);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/hr-animation/report-pop-dept.png");
}

.reportTabAnimation .reportAnim .reportAnimReportShare__personPop {
  position: absolute;
  top: 115px;
  left: 250px;
  width: 280px;
  height: 0;
  -webkit-box-shadow: 0 2px 10px 0 rgba(91, 98, 99, 0.4);
          box-shadow: 0 2px 10px 0 rgba(91, 98, 99, 0.4);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/hr-animation/report-pop-people.png");
}

.reportTabAnimation .reportAnim .reportAnimReportShareSuccess {
  position: absolute;
  top: 100px;
  right: 40px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  width: 210px;
  height: 196px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/hr-animation/report-success.png");
}

.reportTabAnimation .reportAnim--animate {
  opacity: 1;
}

.reportTabAnimation .reportAnim--animate .reportAnimReportTable {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s 1 normal forwards;
}

.reportTabAnimation .reportAnim--animate .reportAnimReportTable:after {
  -webkit-animation: mouseMoveToReportShareBtnStart 0.3s cubic-bezier(1, 0, 0, 1) 2s 1 normal forwards, mouseToCursor1 0s cubic-bezier(1, 0, 0, 1) 2.15s 1 normal forwards, mouseClick1 0.1s cubic-bezier(1, 0, 0, 1) 2.8s 1 normal forwards, hideAnim 0.1s cubic-bezier(1, 0, 0, 1) 3.8s 1 normal forwards;
       -o-animation: mouseMoveToReportShareBtnStart 0.3s cubic-bezier(1, 0, 0, 1) 2s 1 normal forwards, mouseToCursor1 0s cubic-bezier(1, 0, 0, 1) 2.15s 1 normal forwards, mouseClick1 0.1s cubic-bezier(1, 0, 0, 1) 2.8s 1 normal forwards, hideAnim 0.1s cubic-bezier(1, 0, 0, 1) 3.8s 1 normal forwards;
          animation: mouseMoveToReportShareBtnStart 0.3s cubic-bezier(1, 0, 0, 1) 2s 1 normal forwards, mouseToCursor1 0s cubic-bezier(1, 0, 0, 1) 2.15s 1 normal forwards, mouseClick1 0.1s cubic-bezier(1, 0, 0, 1) 2.8s 1 normal forwards, hideAnim 0.1s cubic-bezier(1, 0, 0, 1) 3.8s 1 normal forwards;
}

.reportTabAnimation .reportAnim--animate .reportAnimReportShare {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 3.3s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 10.3s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 3.3s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 10.3s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 3.3s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 10.3s 1 normal forwards;
}

.reportTabAnimation .reportAnim--animate .reportAnimReportShare__back:after {
  -webkit-animation: mouseMoveToReportShare 0.2s cubic-bezier(1, 0, 0, 1) 8.8s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 8.95s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 9.5s 1 normal forwards;
       -o-animation: mouseMoveToReportShare 0.2s cubic-bezier(1, 0, 0, 1) 8.8s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 8.95s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 9.5s 1 normal forwards;
          animation: mouseMoveToReportShare 0.2s cubic-bezier(1, 0, 0, 1) 8.8s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 8.95s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 9.5s 1 normal forwards;
}

.reportTabAnimation .reportAnim--animate .reportAnimReportShare__deptPop {
  -webkit-animation: reportSharePopExpandAnim 0.2s cubic-bezier(1, 0, 0, 1) 5.1s 1 normal forwards, reportSharePopCollapseAnim 0.2s cubic-bezier(1, 0, 0, 1) 6.1s 1 normal forwards;
       -o-animation: reportSharePopExpandAnim 0.2s cubic-bezier(1, 0, 0, 1) 5.1s 1 normal forwards, reportSharePopCollapseAnim 0.2s cubic-bezier(1, 0, 0, 1) 6.1s 1 normal forwards;
          animation: reportSharePopExpandAnim 0.2s cubic-bezier(1, 0, 0, 1) 5.1s 1 normal forwards, reportSharePopCollapseAnim 0.2s cubic-bezier(1, 0, 0, 1) 6.1s 1 normal forwards;
}

.reportTabAnimation .reportAnim--animate .reportAnimReportShare__personPop {
  -webkit-animation: reportSharePopExpandAnim 0.2s cubic-bezier(1, 0, 0, 1) 7.1s 1 normal forwards, reportSharePopCollapseAnim 0.2s cubic-bezier(1, 0, 0, 1) 8.1s 1 normal forwards;
       -o-animation: reportSharePopExpandAnim 0.2s cubic-bezier(1, 0, 0, 1) 7.1s 1 normal forwards, reportSharePopCollapseAnim 0.2s cubic-bezier(1, 0, 0, 1) 8.1s 1 normal forwards;
          animation: reportSharePopExpandAnim 0.2s cubic-bezier(1, 0, 0, 1) 7.1s 1 normal forwards, reportSharePopCollapseAnim 0.2s cubic-bezier(1, 0, 0, 1) 8.1s 1 normal forwards;
}

.reportTabAnimation .reportAnim--animate .reportAnimReportShare__tag.dept.pop {
  -webkit-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 6.1s 1 normal forwards;
       -o-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 6.1s 1 normal forwards;
          animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 6.1s 1 normal forwards;
}

.reportTabAnimation .reportAnim--animate .reportAnimReportShare__tag.dept.typing > span:nth-child(1) {
  -webkit-animation: typing 0.08s linear 4.6s 1 normal forwards;
       -o-animation: typing 0.08s linear 4.6s 1 normal forwards;
          animation: typing 0.08s linear 4.6s 1 normal forwards;
  animation: typing 0.08s linear 4.6s 1 normal forwards;
}

.reportTabAnimation .reportAnim--animate .reportAnimReportShare__tag.dept.typing > span:nth-child(2) {
  -webkit-animation: typing 0.08s linear 4.68s 1 normal forwards;
       -o-animation: typing 0.08s linear 4.68s 1 normal forwards;
          animation: typing 0.08s linear 4.68s 1 normal forwards;
  animation: typing 0.08s linear 4.68s 1 normal forwards;
}

.reportTabAnimation .reportAnim--animate .reportAnimReportShare__tag.dept.typing > span:nth-child(3) {
  -webkit-animation: typing 0.08s linear 4.76s 1 normal forwards;
       -o-animation: typing 0.08s linear 4.76s 1 normal forwards;
          animation: typing 0.08s linear 4.76s 1 normal forwards;
  animation: typing 0.08s linear 4.76s 1 normal forwards;
}

.reportTabAnimation .reportAnim--animate .reportAnimReportShare__tag.dept.typing > span:nth-child(4) {
  -webkit-animation: typing 0.08s linear 4.84s 1 normal forwards;
       -o-animation: typing 0.08s linear 4.84s 1 normal forwards;
          animation: typing 0.08s linear 4.84s 1 normal forwards;
  animation: typing 0.08s linear 4.84s 1 normal forwards;
}

.reportTabAnimation .reportAnim--animate .reportAnimReportShare__tag.dept.typing > span:nth-child(5) {
  -webkit-animation: typing 0.08s linear 4.92s 1 normal forwards;
       -o-animation: typing 0.08s linear 4.92s 1 normal forwards;
          animation: typing 0.08s linear 4.92s 1 normal forwards;
  animation: typing 0.08s linear 4.92s 1 normal forwards;
}

.reportTabAnimation .reportAnim--animate .reportAnimReportShare__tag.person.pop {
  -webkit-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 8.1s 1 normal forwards;
       -o-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 8.1s 1 normal forwards;
          animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 8.1s 1 normal forwards;
}

.reportTabAnimation .reportAnim--animate .reportAnimReportShare__tag.person.typing > span:nth-child(1) {
  -webkit-animation: typing 0.08s linear 6.6s 1 normal forwards;
       -o-animation: typing 0.08s linear 6.6s 1 normal forwards;
          animation: typing 0.08s linear 6.6s 1 normal forwards;
  animation: typing 0.08s linear 6.6s 1 normal forwards;
}

.reportTabAnimation .reportAnim--animate .reportAnimReportShare__tag.person.typing > span:nth-child(2) {
  -webkit-animation: typing 0.08s linear 6.68s 1 normal forwards;
       -o-animation: typing 0.08s linear 6.68s 1 normal forwards;
          animation: typing 0.08s linear 6.68s 1 normal forwards;
  animation: typing 0.08s linear 6.68s 1 normal forwards;
}

.reportTabAnimation .reportAnim--animate .reportAnimReportShare__tag.person.typing > span:nth-child(3) {
  -webkit-animation: typing 0.08s linear 6.76s 1 normal forwards;
       -o-animation: typing 0.08s linear 6.76s 1 normal forwards;
          animation: typing 0.08s linear 6.76s 1 normal forwards;
  animation: typing 0.08s linear 6.76s 1 normal forwards;
}

.reportTabAnimation .reportAnim--animate .reportAnimReportShare__tag.person.typing > span:nth-child(4) {
  -webkit-animation: typing 0.08s linear 6.84s 1 normal forwards;
       -o-animation: typing 0.08s linear 6.84s 1 normal forwards;
          animation: typing 0.08s linear 6.84s 1 normal forwards;
  animation: typing 0.08s linear 6.84s 1 normal forwards;
}

.reportTabAnimation .reportAnim--animate .reportAnimReportShare__tag.person.typing > span:nth-child(5) {
  -webkit-animation: typing 0.08s linear 6.92s 1 normal forwards;
       -o-animation: typing 0.08s linear 6.92s 1 normal forwards;
          animation: typing 0.08s linear 6.92s 1 normal forwards;
  animation: typing 0.08s linear 6.92s 1 normal forwards;
}

.reportTabAnimation .reportAnim--animate .reportAnimReportShareSuccess {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 11.8s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 11.8s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 11.8s 1 normal forwards;
}

@media screen and (min-width: 768px) {
  .reportTabAnimation .reportAnim {
    zoom: 1;
  }
}

@media screen and (min-width: 980px) {
  .reportTabAnimation .ruiContentHeadImage__rightBlock {
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
  }

  .reportTabAnimation .reportAnim {
    width: 100%;
    height: auto;
    -webkit-transform: translateY(-160px);
         -o-transform: translateY(-160px);
            transform: translateY(-160px);
    margin-bottom: -160px;
    margin: 0 auto;
  }

  .reportTabAnimation .reportAnim .reportAnimReportTable {
    top: 0;
    left: 0;
  }

  .reportTabAnimation .reportAnim .reportAnimReportShare {
    top: 150px;
    left: 20px;
  }

  .reportTabAnimation .reportAnim .reportAnimReportShareSuccess {
    top: 200px;
    right: 0;
  }
}

.itPageAnimation .actionBtn {
  position: absolute;
  top: calc(50% - 140px);
  right: 263px;
  z-index: 10;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  background-color: #fff;
  padding: 30px 50px;
  text-align: center;
  -webkit-box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.16);
          box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.16);
  font-size: 18px;
}

.itPageAnimation .actionBtn:after {
  opacity: 1;
  content: '';
  height: 22px;
  width: 22px;
  position: absolute;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  top: 15px;
  left: 260px;
  z-index: 10;
}

.itPageAnimation .actionBtn .ruiBtn {
  margin-top: 20px;
  font-size: 13px;
  padding: 0 24px;
  -webkit-animation: buttonClick .1s linear 2.5s 1 normal forwards;
       -o-animation: buttonClick .1s linear 2.5s 1 normal forwards;
          animation: buttonClick .1s linear 2.5s 1 normal forwards;
}

.itPageAnimation .actionBtn:after {
  -webkit-animation: mouseMoveToRunIt 0.2s cubic-bezier(1, 0, 0, 1) 2s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 2.18s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 2.5s 1 normal forwards, hideAnim 0.05s 5s 1 normal forwards;
       -o-animation: mouseMoveToRunIt 0.2s cubic-bezier(1, 0, 0, 1) 2s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 2.18s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 2.5s 1 normal forwards, hideAnim 0.05s 5s 1 normal forwards;
          animation: mouseMoveToRunIt 0.2s cubic-bezier(1, 0, 0, 1) 2s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 2.18s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 2.5s 1 normal forwards, hideAnim 0.05s 5s 1 normal forwards;
}

.itPageAnimation .itAnim {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  opacity: 0;
  -webkit-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.itPageAnimation .itAnim__whiteBox {
  background-color: #ffffff;
  -webkit-box-shadow: 0 0 30px 0 rgba(91, 98, 99, 0.4);
          box-shadow: 0 0 30px 0 rgba(91, 98, 99, 0.4);
  -webkit-transform-origin: center;
       -o-transform-origin: center;
          transform-origin: center;
}

.itPageAnimation .itAnim__whiteBoxTitle {
  font-family: ripplingFontNormal;
  text-align: center;
  padding-top: 30px;
  font-size: 16px;
  color: #000000;
}

.itPageAnimation .itAnim__whiteBoxTitle--left {
  text-align: left;
}

.itPageAnimation .itAnim .itAnimEncryption {
  position: absolute;
  top: calc(50% - 240px);
  right: 263px;
  padding: 0 30px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
}

.itPageAnimation .itAnim .itAnimEncryption:after {
  opacity: 1;
  content: '';
  height: 22px;
  width: 22px;
  position: absolute;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  top: 160px;
  left: 270px;
  z-index: 10;
}

.itPageAnimation .itAnim .itAnimPassword {
  position: absolute;
  top: calc(50% - 170px);
  right: 320px;
  padding: 0 30px;
  width: 400px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
}

.itPageAnimation .itAnim .itAnimPassword:after {
  opacity: 1;
  content: '';
  height: 22px;
  width: 22px;
  position: absolute;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  top: 120px;
  left: 360px;
  z-index: 10;
}

.itPageAnimation .itAnim .itAnimPassword .formAnimField--radio .radioBox {
  width: 110px;
  height: 130px;
}

.itPageAnimation .itAnim .itAnimPassword .formAnimField--radio .radioBox__title {
  font-size: 13px;
}

.itPageAnimation .itAnim .itAnimPasswordConfig {
  position: absolute;
  top: calc(50% - 90px);
  right: 120px;
  padding: 0 30px 25px;
  width: 385px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
}

.itPageAnimation .itAnim .itAnimPasswordConfig:after {
  opacity: 1;
  content: '';
  height: 22px;
  width: 22px;
  position: absolute;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  top: 70px;
  left: 350px;
  z-index: 10;
}

.itPageAnimation .itAnim .itAnimPasswordConfig .ruiBtn {
  position: absolute;
  bottom: -20px;
  left: 145px;
}

.itPageAnimation .itAnim .itAnimPasswordSize {
  position: absolute;
  top: calc(50% - 170px);
  right: 200px;
  padding: 0 30px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  width: 410px;
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
}

.itPageAnimation .itAnim .itAnimPasswordSize:after {
  opacity: 1;
  content: '';
  height: 22px;
  width: 22px;
  position: absolute;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  top: 120px;
  left: 365px;
  z-index: 10;
}

.itPageAnimation .itAnim .itAnimPasswordSize .formAnimField--radio .radioBox {
  width: 130px;
  height: 150px;
}

.itPageAnimation .itAnim .itAnimPasswordSize .formAnimField--radio .radioBox__title {
  font-size: 13px;
}

.itPageAnimation .itAnim .itAnimInvite {
  position: absolute;
  top: calc(50% - 200px);
  right: 250px;
  padding: 10px 0 15px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  text-align: center;
}

.itPageAnimation .itAnim .itAnimInvite__back {
  margin-bottom: 15px;
  width: 400px;
  height: 282px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/it-animation/invite-employees.png");
}

.itPageAnimation .itAnim .itAnimInvite:after {
  opacity: 1;
  content: '';
  height: 22px;
  width: 22px;
  position: absolute;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  top: 220px;
  left: 365px;
  z-index: 10;
}

.itPageAnimation .itAnim .itAnimExcel {
  position: absolute;
  top: calc(50% - 120px);
  right: 170px;
  padding: 0 30px 10px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
}

.itPageAnimation .itAnim .itAnimExcel:after {
  opacity: 1;
  content: '';
  height: 22px;
  width: 22px;
  position: absolute;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  top: 130px;
  left: 430px;
  z-index: 10;
}

.itPageAnimation .itAnim .itAnimExcel .itAnim__whiteBoxTitle {
  text-align: center;
}

.itPageAnimation .itAnim .itAnimExcel__back {
  position: relative;
  margin: 10px auto 0;
  width: 400px;
  height: 180px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/hr-animation/report-share.png");
}

.itPageAnimation .itAnim .itAnimExcel .formTag {
  top: 20px;
  left: 18px;
}

.itPageAnimation .itAnim .itAnimExcel .formTagSuggest {
  top: 50px;
  left: 18px;
}

.itPageAnimation .itAnim .itAnimSketch {
  position: absolute;
  top: calc(50% - 120px);
  right: 170px;
  padding: 0 30px 10px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
}

.itPageAnimation .itAnim .itAnimSketch:after {
  opacity: 1;
  content: '';
  height: 22px;
  width: 22px;
  position: absolute;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  top: 130px;
  left: 430px;
  z-index: 10;
}

.itPageAnimation .itAnim .itAnimSketch .itAnim__whiteBoxTitle {
  text-align: center;
}

.itPageAnimation .itAnim .itAnimSketch__back {
  position: relative;
  margin: 10px auto 0;
  width: 400px;
  height: 180px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/hr-animation/report-share.png");
}

.itPageAnimation .itAnim .itAnimSketch .formTag {
  top: 20px;
  left: 18px;
}

.itPageAnimation .itAnim .itAnimSketch .formTagSuggest {
  top: 50px;
  left: 18px;
}

.itPageAnimation .itAnim .itAnimGSuite {
  position: absolute;
  top: calc(50% - 120px);
  right: 170px;
  padding: 0 60px;
  width: 442px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
}

.itPageAnimation .itAnim .itAnimGSuite .itAnim__whiteBoxTitle {
  text-align: center;
}

.itPageAnimation .itAnim .itAnimGSuite .assignGroup {
  padding: 20px 0 25px;
}

.itPageAnimation .itAnim .itAnimGSuite .assignGroup__tag {
  top: 25px;
  left: 32px;
}

.itPageAnimation .itAnim .itAnimGSuite .assignGroup .formTagSuggest {
  top: 50px;
  left: 32px;
}

.itPageAnimation .itAnim .itAnimSalesforce {
  position: absolute;
  top: calc(50% - 120px);
  right: 80px;
  padding: 0 60px 20px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  width: 600px;
}

.itPageAnimation .itAnim .itAnimSalesforce .itAnim__whiteBoxTitle {
  text-align: center;
}

.itPageAnimation .itAnim .itAnimSalesforce .assignGroup {
  margin-top: 10px;
  padding: 20px 0 25px;
}

.itPageAnimation .itAnim .itAnimSalesforce .assignGroup__label.animateLabel {
  opacity: 0;
}

.itPageAnimation .itAnim .itAnimSalesforce .assignGroup__tag.group {
  top: 25px;
  left: 32px;
}

.itPageAnimation .itAnim .itAnimSalesforce .assignGroup__tag.dept {
  top: 25px;
  left: 340px;
}

.itPageAnimation .itAnim .itAnimSalesforce .assignGroup .formTagSuggest.groupFulltime {
  top: 50px;
  left: 32px;
}

.itPageAnimation .itAnim .itAnimSalesforce .assignGroup .formTagSuggest.deptSales {
  top: 50px;
  left: 340px;
}

.itPageAnimation .itAnim .itAnimHardware {
  position: absolute;
  top: calc(50% - 120px);
  right: 190px;
  padding: 0 10px 0;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
}

.itPageAnimation .itAnim .itAnimHardware:after {
  opacity: 1;
  content: '';
  height: 22px;
  width: 22px;
  position: absolute;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  top: 150px;
  left: 390px;
  z-index: 10;
}

.itPageAnimation .itAnim .itAnimHardware__back {
  position: relative;
  margin-top: 40px;
  width: 400px;
  height: 325px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/it-animation/it-hw-list.png");
}

.itPageAnimation .itAnim .itAnimHardware__back:before {
  content: '';
  position: absolute;
  top: -33px;
  left: 0;
  width: 400px;
  height: 33px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/it-animation/it-hw-list-head.png");
}

.itPageAnimation .itAnim .itAnimHardware__pop {
  position: absolute;
  top: 70px;
  right: -140px;
  width: 364px;
  height: 332px;
  -webkit-box-shadow: 0 0 30px 0 rgba(91, 98, 99, 0.4);
          box-shadow: 0 0 30px 0 rgba(91, 98, 99, 0.4);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/it-animation/it-hw-pop.png");
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
}

.itPageAnimation .itAnim--animate {
  opacity: 1;
}

.itPageAnimation .itAnim--animate .itAnimEncryption {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 4s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 4s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 4s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimEncryption:after {
  -webkit-animation: mouseMoveToItEncryptionNo 0.2s cubic-bezier(1, 0, 0, 1) 1.3s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 1.3s 1 normal forwards, mouseMoveToItEncryptionYes 0.4s cubic-bezier(1, 0, 0, 1) 1.5s 1 normal forwards, mouseToPointer0 0s cubic-bezier(1, 0, 0, 1) 1.6s 1 normal forwards, mouseToCursor1 0s cubic-bezier(1, 0, 0, 1) 1.7s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 2.1s 1 normal forwards;
       -o-animation: mouseMoveToItEncryptionNo 0.2s cubic-bezier(1, 0, 0, 1) 1.3s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 1.3s 1 normal forwards, mouseMoveToItEncryptionYes 0.4s cubic-bezier(1, 0, 0, 1) 1.5s 1 normal forwards, mouseToPointer0 0s cubic-bezier(1, 0, 0, 1) 1.6s 1 normal forwards, mouseToCursor1 0s cubic-bezier(1, 0, 0, 1) 1.7s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 2.1s 1 normal forwards;
          animation: mouseMoveToItEncryptionNo 0.2s cubic-bezier(1, 0, 0, 1) 1.3s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 1.3s 1 normal forwards, mouseMoveToItEncryptionYes 0.4s cubic-bezier(1, 0, 0, 1) 1.5s 1 normal forwards, mouseToPointer0 0s cubic-bezier(1, 0, 0, 1) 1.6s 1 normal forwards, mouseToCursor1 0s cubic-bezier(1, 0, 0, 1) 1.7s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 2.1s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimEncryption .formAnimField .radioBox:first-child {
  -webkit-animation: transformUp 0.1s cubic-bezier(1, 0, 0, 1) 1.8s 1 normal forwards, showHoverBlue 0.1s cubic-bezier(1, 0, 0, 1) 2.2s 1 normal forwards, showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 2.2s 1 normal forwards;
       -o-animation: transformUp 0.1s cubic-bezier(1, 0, 0, 1) 1.8s 1 normal forwards, showHoverBlue 0.1s cubic-bezier(1, 0, 0, 1) 2.2s 1 normal forwards, showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 2.2s 1 normal forwards;
          animation: transformUp 0.1s cubic-bezier(1, 0, 0, 1) 1.8s 1 normal forwards, showHoverBlue 0.1s cubic-bezier(1, 0, 0, 1) 2.2s 1 normal forwards, showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 2.2s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimEncryption .formAnimField .radioBox:first-child .radioBox__title {
  -webkit-animation: showHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 1.8s 1 normal forwards, showHoverLightColor 0.1s cubic-bezier(1, 0, 0, 1) 2.2s 1 normal forwards;
       -o-animation: showHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 1.8s 1 normal forwards, showHoverLightColor 0.1s cubic-bezier(1, 0, 0, 1) 2.2s 1 normal forwards;
          animation: showHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 1.8s 1 normal forwards, showHoverLightColor 0.1s cubic-bezier(1, 0, 0, 1) 2.2s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimEncryption .formAnimField .radioBox:first-child .radioBox__check {
  -webkit-animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 1.8s 1 normal forwards, showHoverColorBlue 0.1s cubic-bezier(1, 0, 0, 1) 2.2s 1 normal forwards;
       -o-animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 1.8s 1 normal forwards, showHoverColorBlue 0.1s cubic-bezier(1, 0, 0, 1) 2.2s 1 normal forwards;
          animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 1.8s 1 normal forwards, showHoverColorBlue 0.1s cubic-bezier(1, 0, 0, 1) 2.2s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimEncryption .formAnimField .radioBox:first-child:after {
  -webkit-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 1.8s 1 normal forwards;
       -o-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 1.8s 1 normal forwards;
          animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 1.8s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimEncryption .formAnimField .radioBox:last-child {
  -webkit-animation: transformUp 0.1s cubic-bezier(1, 0, 0, 1) 1.4s 1 normal forwards, transformDown 0.1s cubic-bezier(1, 0, 0, 1) 1.6s 1 normal forwards;
       -o-animation: transformUp 0.1s cubic-bezier(1, 0, 0, 1) 1.4s 1 normal forwards, transformDown 0.1s cubic-bezier(1, 0, 0, 1) 1.6s 1 normal forwards;
          animation: transformUp 0.1s cubic-bezier(1, 0, 0, 1) 1.4s 1 normal forwards, transformDown 0.1s cubic-bezier(1, 0, 0, 1) 1.6s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimEncryption .formAnimField .radioBox:last-child .radioBox__title {
  -webkit-animation: showHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 1.4s 1 normal forwards, hideHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 1.6s 1 normal forwards;
       -o-animation: showHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 1.4s 1 normal forwards, hideHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 1.6s 1 normal forwards;
          animation: showHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 1.4s 1 normal forwards, hideHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 1.6s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimEncryption .formAnimField .radioBox:last-child .radioBox__check {
  -webkit-animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 1.4s 1 normal forwards, hideHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 1.6s 1 normal forwards;
       -o-animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 1.4s 1 normal forwards, hideHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 1.6s 1 normal forwards;
          animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 1.4s 1 normal forwards, hideHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 1.6s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimEncryption .formAnimField .radioBox:last-child:after {
  -webkit-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 1.4s 1 normal forwards, hideAnim 0.1s cubic-bezier(1, 0, 0, 1) 1.6s 1 normal forwards;
       -o-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 1.4s 1 normal forwards, hideAnim 0.1s cubic-bezier(1, 0, 0, 1) 1.6s 1 normal forwards;
          animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 1.4s 1 normal forwards, hideAnim 0.1s cubic-bezier(1, 0, 0, 1) 1.6s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimPassword {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 4.3s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 7.8s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 4.3s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 7.8s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 4.3s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 7.8s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimPassword:after {
  -webkit-animation: mouseMoveToItPasswordNo 0.2s cubic-bezier(1, 0, 0, 1) 5.1s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 5.1s 1 normal forwards, mouseMoveToItPasswordYes 0.4s cubic-bezier(1, 0, 0, 1) 5.3s 1 normal forwards, mouseToPointer0 0s cubic-bezier(1, 0, 0, 1) 5.4s 1 normal forwards, mouseToCursor1 0s cubic-bezier(1, 0, 0, 1) 5.5s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 5.9s 1 normal forwards;
       -o-animation: mouseMoveToItPasswordNo 0.2s cubic-bezier(1, 0, 0, 1) 5.1s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 5.1s 1 normal forwards, mouseMoveToItPasswordYes 0.4s cubic-bezier(1, 0, 0, 1) 5.3s 1 normal forwards, mouseToPointer0 0s cubic-bezier(1, 0, 0, 1) 5.4s 1 normal forwards, mouseToCursor1 0s cubic-bezier(1, 0, 0, 1) 5.5s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 5.9s 1 normal forwards;
          animation: mouseMoveToItPasswordNo 0.2s cubic-bezier(1, 0, 0, 1) 5.1s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 5.1s 1 normal forwards, mouseMoveToItPasswordYes 0.4s cubic-bezier(1, 0, 0, 1) 5.3s 1 normal forwards, mouseToPointer0 0s cubic-bezier(1, 0, 0, 1) 5.4s 1 normal forwards, mouseToCursor1 0s cubic-bezier(1, 0, 0, 1) 5.5s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 5.9s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimPassword .formAnimField .radioBox:first-child {
  -webkit-animation: transformUp 0.1s cubic-bezier(1, 0, 0, 1) 5.6s 1 normal forwards, showHoverBlue 0.1s cubic-bezier(1, 0, 0, 1) 6s 1 normal forwards, showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 6s 1 normal forwards;
       -o-animation: transformUp 0.1s cubic-bezier(1, 0, 0, 1) 5.6s 1 normal forwards, showHoverBlue 0.1s cubic-bezier(1, 0, 0, 1) 6s 1 normal forwards, showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 6s 1 normal forwards;
          animation: transformUp 0.1s cubic-bezier(1, 0, 0, 1) 5.6s 1 normal forwards, showHoverBlue 0.1s cubic-bezier(1, 0, 0, 1) 6s 1 normal forwards, showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 6s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimPassword .formAnimField .radioBox:first-child .radioBox__title {
  -webkit-animation: showHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 5.6s 1 normal forwards, showHoverLightColor 0.1s cubic-bezier(1, 0, 0, 1) 6s 1 normal forwards;
       -o-animation: showHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 5.6s 1 normal forwards, showHoverLightColor 0.1s cubic-bezier(1, 0, 0, 1) 6s 1 normal forwards;
          animation: showHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 5.6s 1 normal forwards, showHoverLightColor 0.1s cubic-bezier(1, 0, 0, 1) 6s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimPassword .formAnimField .radioBox:first-child .radioBox__check {
  -webkit-animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 5.6s 1 normal forwards, showHoverColorBlue 0.1s cubic-bezier(1, 0, 0, 1) 6s 1 normal forwards;
       -o-animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 5.6s 1 normal forwards, showHoverColorBlue 0.1s cubic-bezier(1, 0, 0, 1) 6s 1 normal forwards;
          animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 5.6s 1 normal forwards, showHoverColorBlue 0.1s cubic-bezier(1, 0, 0, 1) 6s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimPassword .formAnimField .radioBox:first-child:after {
  -webkit-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 5.6s 1 normal forwards;
       -o-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 5.6s 1 normal forwards;
          animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 5.6s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimPassword .formAnimField .radioBox:last-child {
  -webkit-animation: transformUp 0.1s cubic-bezier(1, 0, 0, 1) 5.2s 1 normal forwards, transformDown 0.1s cubic-bezier(1, 0, 0, 1) 5.4s 1 normal forwards;
       -o-animation: transformUp 0.1s cubic-bezier(1, 0, 0, 1) 5.2s 1 normal forwards, transformDown 0.1s cubic-bezier(1, 0, 0, 1) 5.4s 1 normal forwards;
          animation: transformUp 0.1s cubic-bezier(1, 0, 0, 1) 5.2s 1 normal forwards, transformDown 0.1s cubic-bezier(1, 0, 0, 1) 5.4s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimPassword .formAnimField .radioBox:last-child .radioBox__title {
  -webkit-animation: showHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 5.2s 1 normal forwards, hideHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 5.4s 1 normal forwards;
       -o-animation: showHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 5.2s 1 normal forwards, hideHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 5.4s 1 normal forwards;
          animation: showHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 5.2s 1 normal forwards, hideHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 5.4s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimPassword .formAnimField .radioBox:last-child .radioBox__check {
  -webkit-animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 5.2s 1 normal forwards, hideHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 5.4s 1 normal forwards;
       -o-animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 5.2s 1 normal forwards, hideHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 5.4s 1 normal forwards;
          animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 5.2s 1 normal forwards, hideHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 5.4s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimPassword .formAnimField .radioBox:last-child:after {
  -webkit-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 5.2s 1 normal forwards, hideAnim 0.1s cubic-bezier(1, 0, 0, 1) 5.4s 1 normal forwards;
       -o-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 5.2s 1 normal forwards, hideAnim 0.1s cubic-bezier(1, 0, 0, 1) 5.4s 1 normal forwards;
          animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 5.2s 1 normal forwards, hideAnim 0.1s cubic-bezier(1, 0, 0, 1) 5.4s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimPasswordConfig {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 8.1s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 12.6s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 8.1s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 12.6s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 8.1s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 12.6s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimPasswordConfig:after {
  -webkit-animation: mouseMoveToItPasswordLengthStart 0.2s cubic-bezier(1, 0, 0, 1) 9.1s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 9.28s 1 normal forwards, mouseMoveToItPasswordLengthMid 0.4s linear 9.7s 1 normal forwards, mouseMoveToItPasswordLengthDone 0.2s linear 10.9s 1 normal forwards, mouseClick0 0.2s cubic-bezier(1, 0, 0, 1) 11.6s 1 normal forwards;
       -o-animation: mouseMoveToItPasswordLengthStart 0.2s cubic-bezier(1, 0, 0, 1) 9.1s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 9.28s 1 normal forwards, mouseMoveToItPasswordLengthMid 0.4s linear 9.7s 1 normal forwards, mouseMoveToItPasswordLengthDone 0.2s linear 10.9s 1 normal forwards, mouseClick0 0.2s cubic-bezier(1, 0, 0, 1) 11.6s 1 normal forwards;
          animation: mouseMoveToItPasswordLengthStart 0.2s cubic-bezier(1, 0, 0, 1) 9.1s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 9.28s 1 normal forwards, mouseMoveToItPasswordLengthMid 0.4s linear 9.7s 1 normal forwards, mouseMoveToItPasswordLengthDone 0.2s linear 10.9s 1 normal forwards, mouseClick0 0.2s cubic-bezier(1, 0, 0, 1) 11.6s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimPasswordConfig .formAnimField .rangeLine:before {
  -webkit-animation: rangeHalfWidth 0.4s linear 9.7s 1 normal forwards;
       -o-animation: rangeHalfWidth 0.4s linear 9.7s 1 normal forwards;
          animation: rangeHalfWidth 0.4s linear 9.7s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimPasswordConfig .formAnimField .rangeVal {
  -webkit-animation: rangeValueHalfMove 0.4s linear 9.7s 1 normal forwards;
       -o-animation: rangeValueHalfMove 0.4s linear 9.7s 1 normal forwards;
          animation: rangeValueHalfMove 0.4s linear 9.7s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimPasswordConfig .formAnimField .rangeVal > span {
  -webkit-animation: showAnim 0.1s linear 10.05s 1 normal forwards;
       -o-animation: showAnim 0.1s linear 10.05s 1 normal forwards;
          animation: showAnim 0.1s linear 10.05s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimPasswordConfig .ruiBtn {
  -webkit-animation: buttonClick 0.2s linear 11.6s 1 normal forwards;
       -o-animation: buttonClick 0.2s linear 11.6s 1 normal forwards;
          animation: buttonClick 0.2s linear 11.6s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimPasswordSize {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 12.9s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 15.9s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 12.9s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 15.9s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 12.9s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 15.9s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimPasswordSize:after {
  -webkit-animation: mouseMoveToItPasswordSizeNo 0.2s cubic-bezier(1, 0, 0, 1) 13.9s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 14.05s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 14.5s 1 normal forwards;
       -o-animation: mouseMoveToItPasswordSizeNo 0.2s cubic-bezier(1, 0, 0, 1) 13.9s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 14.05s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 14.5s 1 normal forwards;
          animation: mouseMoveToItPasswordSizeNo 0.2s cubic-bezier(1, 0, 0, 1) 13.9s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 14.05s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 14.5s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimPasswordSize .formAnimField .radioBox:last-child {
  -webkit-animation: transformUp 0.1s cubic-bezier(1, 0, 0, 1) 14s 1 normal forwards, showHoverBlue 0.1s cubic-bezier(1, 0, 0, 1) 14.4s 1 normal forwards, showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 14.4s 1 normal forwards;
       -o-animation: transformUp 0.1s cubic-bezier(1, 0, 0, 1) 14s 1 normal forwards, showHoverBlue 0.1s cubic-bezier(1, 0, 0, 1) 14.4s 1 normal forwards, showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 14.4s 1 normal forwards;
          animation: transformUp 0.1s cubic-bezier(1, 0, 0, 1) 14s 1 normal forwards, showHoverBlue 0.1s cubic-bezier(1, 0, 0, 1) 14.4s 1 normal forwards, showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 14.4s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimPasswordSize .formAnimField .radioBox:last-child .radioBox__title {
  -webkit-animation: showHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 14s 1 normal forwards, showHoverLightColor 0.1s cubic-bezier(1, 0, 0, 1) 14.4s 1 normal forwards;
       -o-animation: showHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 14s 1 normal forwards, showHoverLightColor 0.1s cubic-bezier(1, 0, 0, 1) 14.4s 1 normal forwards;
          animation: showHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 14s 1 normal forwards, showHoverLightColor 0.1s cubic-bezier(1, 0, 0, 1) 14.4s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimPasswordSize .formAnimField .radioBox:last-child .radioBox__check {
  -webkit-animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 14s 1 normal forwards, showHoverColorBlue 0.1s cubic-bezier(1, 0, 0, 1) 14.4s 1 normal forwards;
       -o-animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 14s 1 normal forwards, showHoverColorBlue 0.1s cubic-bezier(1, 0, 0, 1) 14.4s 1 normal forwards;
          animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 14s 1 normal forwards, showHoverColorBlue 0.1s cubic-bezier(1, 0, 0, 1) 14.4s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimPasswordSize .formAnimField .radioBox:last-child:after {
  -webkit-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 14s 1 normal forwards;
       -o-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 14s 1 normal forwards;
          animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 14s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimInvite {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 16.2s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 20.7s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 16.2s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 20.7s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 16.2s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 20.7s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimInvite:after {
  -webkit-animation: mouseMoveToItInviteBtn 0.2s cubic-bezier(1, 0, 0, 1) 18.7s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 18.72s 1 normal forwards, mouseClick0 0.2s cubic-bezier(1, 0, 0, 1) 19.7s 1 normal forwards;
       -o-animation: mouseMoveToItInviteBtn 0.2s cubic-bezier(1, 0, 0, 1) 18.7s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 18.72s 1 normal forwards, mouseClick0 0.2s cubic-bezier(1, 0, 0, 1) 19.7s 1 normal forwards;
          animation: mouseMoveToItInviteBtn 0.2s cubic-bezier(1, 0, 0, 1) 18.7s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 18.72s 1 normal forwards, mouseClick0 0.2s cubic-bezier(1, 0, 0, 1) 19.7s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimInvite .ruiBtn {
  -webkit-animation: buttonClick 0.2s linear 19.7s 1 normal forwards;
       -o-animation: buttonClick 0.2s linear 19.7s 1 normal forwards;
          animation: buttonClick 0.2s linear 19.7s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimExcel {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 21s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 26s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 21s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 26s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 21s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 26s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimExcel .formTag.pop {
  -webkit-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 23.8s 1 normal forwards;
       -o-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 23.8s 1 normal forwards;
          animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 23.8s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimExcel .formTag.typing > span:nth-child(1) {
  -webkit-animation: typing 0.08s linear 22.3s 1 normal forwards;
       -o-animation: typing 0.08s linear 22.3s 1 normal forwards;
          animation: typing 0.08s linear 22.3s 1 normal forwards;
  animation: typing 0.08s linear 22.3s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimExcel .formTag.typing > span:nth-child(2) {
  -webkit-animation: typing 0.08s linear 22.38s 1 normal forwards;
       -o-animation: typing 0.08s linear 22.38s 1 normal forwards;
          animation: typing 0.08s linear 22.38s 1 normal forwards;
  animation: typing 0.08s linear 22.38s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimExcel .formTag.typing > span:nth-child(3) {
  -webkit-animation: typing 0.08s linear 22.46s 1 normal forwards;
       -o-animation: typing 0.08s linear 22.46s 1 normal forwards;
          animation: typing 0.08s linear 22.46s 1 normal forwards;
  animation: typing 0.08s linear 22.46s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimExcel .formTag.typing > span:nth-child(4) {
  -webkit-animation: typing 0.08s linear 22.54s 1 normal forwards;
       -o-animation: typing 0.08s linear 22.54s 1 normal forwards;
          animation: typing 0.08s linear 22.54s 1 normal forwards;
  animation: typing 0.08s linear 22.54s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimExcel .formTag.typing > span:nth-child(5) {
  -webkit-animation: typing 0.08s linear 22.62s 1 normal forwards;
       -o-animation: typing 0.08s linear 22.62s 1 normal forwards;
          animation: typing 0.08s linear 22.62s 1 normal forwards;
  animation: typing 0.08s linear 22.62s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimExcel .formTagSuggest {
  -webkit-animation: reportSharePopExpandAnim 0.2s cubic-bezier(1, 0, 0, 1) 22.8s 1 normal forwards, reportSharePopCollapseAnim 0.2s cubic-bezier(1, 0, 0, 1) 23.8s 1 normal forwards;
       -o-animation: reportSharePopExpandAnim 0.2s cubic-bezier(1, 0, 0, 1) 22.8s 1 normal forwards, reportSharePopCollapseAnim 0.2s cubic-bezier(1, 0, 0, 1) 23.8s 1 normal forwards;
          animation: reportSharePopExpandAnim 0.2s cubic-bezier(1, 0, 0, 1) 22.8s 1 normal forwards, reportSharePopCollapseAnim 0.2s cubic-bezier(1, 0, 0, 1) 23.8s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimExcel:after {
  -webkit-animation: mouseMoveToItExcelBtn 0.2s cubic-bezier(1, 0, 0, 1) 24.5s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 24.52s 1 normal forwards, mouseClick0 0.2s cubic-bezier(1, 0, 0, 1) 25s 1 normal forwards;
       -o-animation: mouseMoveToItExcelBtn 0.2s cubic-bezier(1, 0, 0, 1) 24.5s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 24.52s 1 normal forwards, mouseClick0 0.2s cubic-bezier(1, 0, 0, 1) 25s 1 normal forwards;
          animation: mouseMoveToItExcelBtn 0.2s cubic-bezier(1, 0, 0, 1) 24.5s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 24.52s 1 normal forwards, mouseClick0 0.2s cubic-bezier(1, 0, 0, 1) 25s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimSketch {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 26.3s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 31.3s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 26.3s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 31.3s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 26.3s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 31.3s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimSketch .formTag.pop {
  -webkit-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 29.1s 1 normal forwards;
       -o-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 29.1s 1 normal forwards;
          animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 29.1s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimSketch .formTag.typing > span:nth-child(1) {
  -webkit-animation: typing 0.08s linear 27.6s 1 normal forwards;
       -o-animation: typing 0.08s linear 27.6s 1 normal forwards;
          animation: typing 0.08s linear 27.6s 1 normal forwards;
  animation: typing 0.08s linear 27.6s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimSketch .formTag.typing > span:nth-child(2) {
  -webkit-animation: typing 0.08s linear 27.68s 1 normal forwards;
       -o-animation: typing 0.08s linear 27.68s 1 normal forwards;
          animation: typing 0.08s linear 27.68s 1 normal forwards;
  animation: typing 0.08s linear 27.68s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimSketch .formTag.typing > span:nth-child(3) {
  -webkit-animation: typing 0.08s linear 27.76s 1 normal forwards;
       -o-animation: typing 0.08s linear 27.76s 1 normal forwards;
          animation: typing 0.08s linear 27.76s 1 normal forwards;
  animation: typing 0.08s linear 27.76s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimSketch .formTag.typing > span:nth-child(4) {
  -webkit-animation: typing 0.08s linear 27.84s 1 normal forwards;
       -o-animation: typing 0.08s linear 27.84s 1 normal forwards;
          animation: typing 0.08s linear 27.84s 1 normal forwards;
  animation: typing 0.08s linear 27.84s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimSketch .formTag.typing > span:nth-child(5) {
  -webkit-animation: typing 0.08s linear 27.92s 1 normal forwards;
       -o-animation: typing 0.08s linear 27.92s 1 normal forwards;
          animation: typing 0.08s linear 27.92s 1 normal forwards;
  animation: typing 0.08s linear 27.92s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimSketch .formTagSuggest {
  -webkit-animation: reportSharePopExpandAnim 0.2s cubic-bezier(1, 0, 0, 1) 28.1s 1 normal forwards, reportSharePopCollapseAnim 0.2s cubic-bezier(1, 0, 0, 1) 29.1s 1 normal forwards;
       -o-animation: reportSharePopExpandAnim 0.2s cubic-bezier(1, 0, 0, 1) 28.1s 1 normal forwards, reportSharePopCollapseAnim 0.2s cubic-bezier(1, 0, 0, 1) 29.1s 1 normal forwards;
          animation: reportSharePopExpandAnim 0.2s cubic-bezier(1, 0, 0, 1) 28.1s 1 normal forwards, reportSharePopCollapseAnim 0.2s cubic-bezier(1, 0, 0, 1) 29.1s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimSketch:after {
  -webkit-animation: mouseMoveToItSketchBtn 0.2s cubic-bezier(1, 0, 0, 1) 29.8s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 29.82s 1 normal forwards, mouseClick0 0.2s cubic-bezier(1, 0, 0, 1) 30.3s 1 normal forwards;
       -o-animation: mouseMoveToItSketchBtn 0.2s cubic-bezier(1, 0, 0, 1) 29.8s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 29.82s 1 normal forwards, mouseClick0 0.2s cubic-bezier(1, 0, 0, 1) 30.3s 1 normal forwards;
          animation: mouseMoveToItSketchBtn 0.2s cubic-bezier(1, 0, 0, 1) 29.8s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 29.82s 1 normal forwards, mouseClick0 0.2s cubic-bezier(1, 0, 0, 1) 30.3s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimGSuite {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 31.6s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 37.6s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 31.6s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 37.6s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 31.6s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 37.6s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimGSuite .assignGroup__tag.typing > span:nth-child(1) {
  -webkit-animation: typing 0.08s linear 32.9s 1 normal forwards;
       -o-animation: typing 0.08s linear 32.9s 1 normal forwards;
          animation: typing 0.08s linear 32.9s 1 normal forwards;
  animation: typing 0.08s linear 32.9s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimGSuite .assignGroup__tag.typing > span:nth-child(2) {
  -webkit-animation: typing 0.08s linear 32.98s 1 normal forwards;
       -o-animation: typing 0.08s linear 32.98s 1 normal forwards;
          animation: typing 0.08s linear 32.98s 1 normal forwards;
  animation: typing 0.08s linear 32.98s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimGSuite .assignGroup__tag.typing > span:nth-child(3) {
  -webkit-animation: typing 0.08s linear 33.06s 1 normal forwards;
       -o-animation: typing 0.08s linear 33.06s 1 normal forwards;
          animation: typing 0.08s linear 33.06s 1 normal forwards;
  animation: typing 0.08s linear 33.06s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimGSuite .assignGroup__tag.typing > span:nth-child(4) {
  -webkit-animation: typing 0.08s linear 33.14s 1 normal forwards;
       -o-animation: typing 0.08s linear 33.14s 1 normal forwards;
          animation: typing 0.08s linear 33.14s 1 normal forwards;
  animation: typing 0.08s linear 33.14s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimGSuite .assignGroup__tag.typing > span:nth-child(5) {
  -webkit-animation: typing 0.08s linear 33.22s 1 normal forwards;
       -o-animation: typing 0.08s linear 33.22s 1 normal forwards;
          animation: typing 0.08s linear 33.22s 1 normal forwards;
  animation: typing 0.08s linear 33.22s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimGSuite .assignGroup__tag.typing > span:nth-child(6) {
  -webkit-animation: typing 0.08s linear 33.3s 1 normal forwards;
       -o-animation: typing 0.08s linear 33.3s 1 normal forwards;
          animation: typing 0.08s linear 33.3s 1 normal forwards;
  animation: typing 0.08s linear 33.3s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimGSuite .assignGroup__tag.typing > span:nth-child(7) {
  -webkit-animation: typing 0.08s linear 33.38s 1 normal forwards;
       -o-animation: typing 0.08s linear 33.38s 1 normal forwards;
          animation: typing 0.08s linear 33.38s 1 normal forwards;
  animation: typing 0.08s linear 33.38s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimGSuite .assignGroup__data {
  -webkit-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 34.4s 1 normal forwards, assignGroupExpand4 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 35.4s 1 normal forwards;
       -o-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 34.4s 1 normal forwards, assignGroupExpand4 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 35.4s 1 normal forwards;
          animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 34.4s 1 normal forwards, assignGroupExpand4 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 35.4s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimGSuite .assignGroup .formTagSuggest.groupFulltime {
  -webkit-animation: reportSharePopExpandAnim 0.2s cubic-bezier(1, 0, 0, 1) 33.4s 1 normal forwards, reportSharePopCollapseAnim 0.2s cubic-bezier(1, 0, 0, 1) 34.4s 1 normal forwards;
       -o-animation: reportSharePopExpandAnim 0.2s cubic-bezier(1, 0, 0, 1) 33.4s 1 normal forwards, reportSharePopCollapseAnim 0.2s cubic-bezier(1, 0, 0, 1) 34.4s 1 normal forwards;
          animation: reportSharePopExpandAnim 0.2s cubic-bezier(1, 0, 0, 1) 33.4s 1 normal forwards, reportSharePopCollapseAnim 0.2s cubic-bezier(1, 0, 0, 1) 34.4s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimSalesforce {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 37.9s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 45.9s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 37.9s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 45.9s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 37.9s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 45.9s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimSalesforce .assignGroup__tag.typing.group > span:nth-child(1) {
  -webkit-animation: typing 0.08s linear 39.2s 1 normal forwards;
       -o-animation: typing 0.08s linear 39.2s 1 normal forwards;
          animation: typing 0.08s linear 39.2s 1 normal forwards;
  animation: typing 0.08s linear 39.2s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimSalesforce .assignGroup__tag.typing.group > span:nth-child(2) {
  -webkit-animation: typing 0.08s linear 39.28s 1 normal forwards;
       -o-animation: typing 0.08s linear 39.28s 1 normal forwards;
          animation: typing 0.08s linear 39.28s 1 normal forwards;
  animation: typing 0.08s linear 39.28s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimSalesforce .assignGroup__tag.typing.group > span:nth-child(3) {
  -webkit-animation: typing 0.08s linear 39.36s 1 normal forwards;
       -o-animation: typing 0.08s linear 39.36s 1 normal forwards;
          animation: typing 0.08s linear 39.36s 1 normal forwards;
  animation: typing 0.08s linear 39.36s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimSalesforce .assignGroup__tag.typing.group > span:nth-child(4) {
  -webkit-animation: typing 0.08s linear 39.44s 1 normal forwards;
       -o-animation: typing 0.08s linear 39.44s 1 normal forwards;
          animation: typing 0.08s linear 39.44s 1 normal forwards;
  animation: typing 0.08s linear 39.44s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimSalesforce .assignGroup__tag.typing.group > span:nth-child(5) {
  -webkit-animation: typing 0.08s linear 39.52s 1 normal forwards;
       -o-animation: typing 0.08s linear 39.52s 1 normal forwards;
          animation: typing 0.08s linear 39.52s 1 normal forwards;
  animation: typing 0.08s linear 39.52s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimSalesforce .assignGroup__tag.typing.group > span:nth-child(6) {
  -webkit-animation: typing 0.08s linear 39.6s 1 normal forwards;
       -o-animation: typing 0.08s linear 39.6s 1 normal forwards;
          animation: typing 0.08s linear 39.6s 1 normal forwards;
  animation: typing 0.08s linear 39.6s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimSalesforce .assignGroup__tag.typing.group > span:nth-child(7) {
  -webkit-animation: typing 0.08s linear 39.68s 1 normal forwards;
       -o-animation: typing 0.08s linear 39.68s 1 normal forwards;
          animation: typing 0.08s linear 39.68s 1 normal forwards;
  animation: typing 0.08s linear 39.68s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimSalesforce .assignGroup__tag.typing.dept > span:nth-child(1) {
  -webkit-animation: typing 0.08s linear 42.7s 1 normal forwards;
       -o-animation: typing 0.08s linear 42.7s 1 normal forwards;
          animation: typing 0.08s linear 42.7s 1 normal forwards;
  animation: typing 0.08s linear 42.7s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimSalesforce .assignGroup__tag.typing.dept > span:nth-child(2) {
  -webkit-animation: typing 0.08s linear 42.78s 1 normal forwards;
       -o-animation: typing 0.08s linear 42.78s 1 normal forwards;
          animation: typing 0.08s linear 42.78s 1 normal forwards;
  animation: typing 0.08s linear 42.78s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimSalesforce .assignGroup__tag.typing.dept > span:nth-child(3) {
  -webkit-animation: typing 0.08s linear 42.86s 1 normal forwards;
       -o-animation: typing 0.08s linear 42.86s 1 normal forwards;
          animation: typing 0.08s linear 42.86s 1 normal forwards;
  animation: typing 0.08s linear 42.86s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimSalesforce .assignGroup__data.group {
  -webkit-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 40.7s 1 normal forwards;
       -o-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 40.7s 1 normal forwards;
          animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 40.7s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimSalesforce .assignGroup__data.sales {
  -webkit-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 43.9s 1 normal forwards;
       -o-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 43.9s 1 normal forwards;
          animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 43.9s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimSalesforce .assignGroup .animateLabel {
  -webkit-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 41.4s 1 normal forwards;
       -o-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 41.4s 1 normal forwards;
          animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 41.4s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimSalesforce .assignGroup .formTagSuggest.groupFulltime {
  -webkit-animation: reportSharePopExpandAnim 0.2s cubic-bezier(1, 0, 0, 1) 39.7s 1 normal forwards, reportSharePopCollapseAnim 0.2s cubic-bezier(1, 0, 0, 1) 40.7s 1 normal forwards;
       -o-animation: reportSharePopExpandAnim 0.2s cubic-bezier(1, 0, 0, 1) 39.7s 1 normal forwards, reportSharePopCollapseAnim 0.2s cubic-bezier(1, 0, 0, 1) 40.7s 1 normal forwards;
          animation: reportSharePopExpandAnim 0.2s cubic-bezier(1, 0, 0, 1) 39.7s 1 normal forwards, reportSharePopCollapseAnim 0.2s cubic-bezier(1, 0, 0, 1) 40.7s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimSalesforce .assignGroup .formTagSuggest.deptSales {
  -webkit-animation: reportSharePopExpandAnim 0.2s cubic-bezier(1, 0, 0, 1) 42.9s 1 normal forwards, reportSharePopCollapseAnim 0.2s cubic-bezier(1, 0, 0, 1) 43.9s 1 normal forwards;
       -o-animation: reportSharePopExpandAnim 0.2s cubic-bezier(1, 0, 0, 1) 42.9s 1 normal forwards, reportSharePopCollapseAnim 0.2s cubic-bezier(1, 0, 0, 1) 43.9s 1 normal forwards;
          animation: reportSharePopExpandAnim 0.2s cubic-bezier(1, 0, 0, 1) 42.9s 1 normal forwards, reportSharePopCollapseAnim 0.2s cubic-bezier(1, 0, 0, 1) 43.9s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimHardware {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 46.2s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 54.2s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 46.2s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 54.2s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 46.2s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 54.2s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimHardware__back {
  -webkit-animation: backgroundScroll 1s cubic-bezier(0.645, 0.045, 0.905, 1.125) 47.2s 1 normal forwards;
       -o-animation: backgroundScroll 1s cubic-bezier(0.645, 0.045, 0.905, 1.125) 47.2s 1 normal forwards;
          animation: backgroundScroll 1s cubic-bezier(0.645, 0.045, 0.905, 1.125) 47.2s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimHardware__pop {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 50.2s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 50.2s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 50.2s 1 normal forwards;
}

.itPageAnimation .itAnim--animate .itAnimHardware:after {
  -webkit-animation: mouseMoveToItHardwareRow 0.2s cubic-bezier(1, 0, 0, 1) 49s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 49.15s 1 normal forwards, mouseClick0 0.2s cubic-bezier(1, 0, 0, 1) 49.7s 1 normal forwards;
       -o-animation: mouseMoveToItHardwareRow 0.2s cubic-bezier(1, 0, 0, 1) 49s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 49.15s 1 normal forwards, mouseClick0 0.2s cubic-bezier(1, 0, 0, 1) 49.7s 1 normal forwards;
          animation: mouseMoveToItHardwareRow 0.2s cubic-bezier(1, 0, 0, 1) 49s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 49.15s 1 normal forwards, mouseClick0 0.2s cubic-bezier(1, 0, 0, 1) 49.7s 1 normal forwards;
}

.itPageAnimation .actionBtn {
  top: auto;
  bottom: 80px;
  right: calc(50% - 150px);
}

.itPageAnimation .itAnim {
  position: absolute;
  left: calc(50% - 300px);
  bottom: -200px;
  width: 600px;
  height: 600px;
  -webkit-transform: scale(0.5);
       -o-transform: scale(0.5);
          transform: scale(0.5);
  -webkit-transform-origin: center;
       -o-transform-origin: center;
          transform-origin: center;
}

.itPageAnimation .itAnim .itAnimEncryption {
  top: 0;
  right: 16px;
  zoom: 1.8;
}

.itPageAnimation .itAnim .itAnimPassword {
  top: -50px;
  right: 0;
  zoom: 1.5;
}

.itPageAnimation .itAnim .itAnimPasswordConfig {
  top: 0;
  right: 0;
  zoom: 1.55;
}

.itPageAnimation .itAnim .itAnimPasswordSize {
  top: 0;
  right: 0;
  zoom: 1.47;
}

.itPageAnimation .itAnim .itAnimInvite {
  top: -50px;
  right: 0;
  zoom: 1.5;
}

.itPageAnimation .itAnim .itAnimExcel {
  top: 0;
  right: 0;
  zoom: 1.3;
}

.itPageAnimation .itAnim .itAnimSketch {
  top: 0;
  right: 0;
  zoom: 1.3;
}

.itPageAnimation .itAnim .itAnimGSuite {
  top: 0;
  right: 0;
  zoom: 1.35;
}

.itPageAnimation .itAnim .itAnimSalesforce {
  top: 0;
  right: 0;
  zoom: 1;
}

.itPageAnimation .itAnim .itAnimHardware {
  top: -80px;
  right: 0;
  zoom: 1.42;
}

.itPageAnimation .itAnim .itAnimHardware__pop {
  top: 90px;
  right: 30px;
}

.itPageAnimation .itAnim__whiteBoxTitle {
  font-size: 22px;
}

@media screen and (min-width: 768px) {
  .itPageAnimation .actionBtn {
    bottom: auto;
    top: calc(50% + 80px);
    right: 60px;
  }

  .itPageAnimation .itAnim {
    position: relative;
    height: auto;
    width: auto;
    left: auto;
    -webkit-transform: scale(0.44) translateY(50px);
         -o-transform: scale(0.44) translateY(50px);
            transform: scale(0.44) translateY(50px);
  }

  .itPageAnimation .itAnim .itAnimEncryption {
    top: calc(50% - 240px);
    right: 263px;
    zoom: normal;
  }

  .itPageAnimation .itAnim .itAnimPassword {
    top: calc(50% - 170px);
    right: 320px;
    zoom: normal;
  }

  .itPageAnimation .itAnim .itAnimPasswordConfig {
    top: calc(50% - 90px);
    right: 120px;
    zoom: normal;
  }

  .itPageAnimation .itAnim .itAnimPasswordSize {
    top: calc(50% - 170px);
    right: 200px;
    zoom: normal;
  }

  .itPageAnimation .itAnim .itAnimInvite {
    top: calc(50% - 200px);
    right: 250px;
    zoom: normal;
  }

  .itPageAnimation .itAnim .itAnimExcel {
    top: calc(50% - 120px);
    right: 170px;
    zoom: normal;
  }

  .itPageAnimation .itAnim .itAnimSketch {
    top: calc(50% - 120px);
    right: 170px;
    zoom: normal;
  }

  .itPageAnimation .itAnim .itAnimGSuite {
    top: calc(50% - 120px);
    right: 170px;
    zoom: normal;
  }

  .itPageAnimation .itAnim .itAnimSalesforce {
    top: calc(50% - 120px);
    right: 80px;
    zoom: normal;
  }

  .itPageAnimation .itAnim .itAnimHardware {
    top: calc(50% - 120px);
    right: 190px;
    zoom: normal;
  }

  .itPageAnimation .itAnim .itAnimHardware__pop {
    top: 70px;
    right: -140px;
  }

  .itPageAnimation .itAnim__whiteBoxTitle {
    font-size: 16px;
  }
}

@media screen and (min-width: 900px) {
  .itPageAnimation .actionBtn {
    top: calc(50% - 140px);
    right: 100px;
  }

  .itPageAnimation .itAnim {
    -webkit-transform: scale(0.6) translateY(0px);
         -o-transform: scale(0.6) translateY(0px);
            transform: scale(0.6) translateY(0px);
  }
}

@media screen and (min-width: 1100px) {
  .itPageAnimation .actionBtn {
    top: calc(50% - 140px);
    right: 263px;
  }

  .itPageAnimation .itAnim {
    -webkit-transform: scale(0.9) translateY(-200px);
         -o-transform: scale(0.9) translateY(-200px);
            transform: scale(0.9) translateY(-200px);
  }
}

@media screen and (min-width: 1280px) {
  .itPageAnimation .itAnim {
    -webkit-transform: scale(1) translateY(-200px);
         -o-transform: scale(1) translateY(-200px);
            transform: scale(1) translateY(-200px);
  }
}

@-webkit-keyframes mouseMoveToRunIt {
  to {
    top: 115px;
    left: 145px;
  }
}

@-o-keyframes mouseMoveToRunIt {
  to {
    top: 115px;
    left: 145px;
  }
}

@keyframes mouseMoveToRunIt {
  to {
    top: 115px;
    left: 145px;
  }
}

@-webkit-keyframes mouseMoveToItEncryptionNo {
  to {
    top: 210px;
    left: 204px;
  }
}

@-o-keyframes mouseMoveToItEncryptionNo {
  to {
    top: 210px;
    left: 204px;
  }
}

@keyframes mouseMoveToItEncryptionNo {
  to {
    top: 210px;
    left: 204px;
  }
}

@-webkit-keyframes mouseMoveToItEncryptionYes {
  from {
    top: 210px;
    left: 204px;
  }

  to {
    top: 210px;
    left: 85px;
  }
}

@-o-keyframes mouseMoveToItEncryptionYes {
  from {
    top: 210px;
    left: 204px;
  }

  to {
    top: 210px;
    left: 85px;
  }
}

@keyframes mouseMoveToItEncryptionYes {
  from {
    top: 210px;
    left: 204px;
  }

  to {
    top: 210px;
    left: 85px;
  }
}

@-webkit-keyframes mouseMoveToItPasswordNo {
  to {
    top: 205px;
    left: 260px;
  }
}

@-o-keyframes mouseMoveToItPasswordNo {
  to {
    top: 205px;
    left: 260px;
  }
}

@keyframes mouseMoveToItPasswordNo {
  to {
    top: 205px;
    left: 260px;
  }
}

@-webkit-keyframes mouseMoveToItPasswordYes {
  from {
    top: 205px;
    left: 260px;
  }

  to {
    top: 205px;
    left: 130px;
  }
}

@-o-keyframes mouseMoveToItPasswordYes {
  from {
    top: 205px;
    left: 260px;
  }

  to {
    top: 205px;
    left: 130px;
  }
}

@keyframes mouseMoveToItPasswordYes {
  from {
    top: 205px;
    left: 260px;
  }

  to {
    top: 205px;
    left: 130px;
  }
}

@-webkit-keyframes mouseMoveToItPasswordLengthStart {
  to {
    top: 110px;
    left: 26px;
  }
}

@-o-keyframes mouseMoveToItPasswordLengthStart {
  to {
    top: 110px;
    left: 26px;
  }
}

@keyframes mouseMoveToItPasswordLengthStart {
  to {
    top: 110px;
    left: 26px;
  }
}

@-webkit-keyframes mouseMoveToItPasswordLengthMid {
  from {
    top: 110px;
    left: 26px;
  }

  to {
    top: 110px;
    left: 194px;
  }
}

@-o-keyframes mouseMoveToItPasswordLengthMid {
  from {
    top: 110px;
    left: 26px;
  }

  to {
    top: 110px;
    left: 194px;
  }
}

@keyframes mouseMoveToItPasswordLengthMid {
  from {
    top: 110px;
    left: 26px;
  }

  to {
    top: 110px;
    left: 194px;
  }
}

@-webkit-keyframes mouseMoveToItPasswordLengthDone {
  from {
    top: 110px;
    left: 194px;
  }

  to {
    top: 200px;
    left: 194px;
  }
}

@-o-keyframes mouseMoveToItPasswordLengthDone {
  from {
    top: 110px;
    left: 194px;
  }

  to {
    top: 200px;
    left: 194px;
  }
}

@keyframes mouseMoveToItPasswordLengthDone {
  from {
    top: 110px;
    left: 194px;
  }

  to {
    top: 200px;
    left: 194px;
  }
}

@-webkit-keyframes mouseMoveToItPasswordSizeNo {
  to {
    top: 220px;
    left: 270px;
  }
}

@-o-keyframes mouseMoveToItPasswordSizeNo {
  to {
    top: 220px;
    left: 270px;
  }
}

@keyframes mouseMoveToItPasswordSizeNo {
  to {
    top: 220px;
    left: 270px;
  }
}

@-webkit-keyframes mouseMoveToItInviteBtn {
  to {
    top: 325px;
    left: 195px;
  }
}

@-o-keyframes mouseMoveToItInviteBtn {
  to {
    top: 325px;
    left: 195px;
  }
}

@keyframes mouseMoveToItInviteBtn {
  to {
    top: 325px;
    left: 195px;
  }
}

@-webkit-keyframes mouseMoveToItExcelBtn {
  to {
    top: 220px;
    left: 70px;
  }
}

@-o-keyframes mouseMoveToItExcelBtn {
  to {
    top: 220px;
    left: 70px;
  }
}

@keyframes mouseMoveToItExcelBtn {
  to {
    top: 220px;
    left: 70px;
  }
}

@-webkit-keyframes mouseMoveToItSketchBtn {
  to {
    top: 220px;
    left: 70px;
  }
}

@-o-keyframes mouseMoveToItSketchBtn {
  to {
    top: 220px;
    left: 70px;
  }
}

@keyframes mouseMoveToItSketchBtn {
  to {
    top: 220px;
    left: 70px;
  }
}

@-webkit-keyframes mouseMoveToItHardwareRow {
  to {
    top: 285px;
    left: 220px;
  }
}

@-o-keyframes mouseMoveToItHardwareRow {
  to {
    top: 285px;
    left: 220px;
  }
}

@keyframes mouseMoveToItHardwareRow {
  to {
    top: 285px;
    left: 220px;
  }
}

@-webkit-keyframes assignGroupExpand4 {
  to {
    height: 94px;
  }
}

@-o-keyframes assignGroupExpand4 {
  to {
    height: 94px;
  }
}

@keyframes assignGroupExpand4 {
  to {
    height: 94px;
  }
}

@-webkit-keyframes rangeHalfWidth {
  to {
    width: 50%;
  }
}

@-o-keyframes rangeHalfWidth {
  to {
    width: 50%;
  }
}

@keyframes rangeHalfWidth {
  to {
    width: 50%;
  }
}

@-webkit-keyframes rangeValueHalfMove {
  to {
    left: 50%;
  }
}

@-o-keyframes rangeValueHalfMove {
  to {
    left: 50%;
  }
}

@keyframes rangeValueHalfMove {
  to {
    left: 50%;
  }
}

.ops-animation .actionList {
  position: absolute;
  top: calc(50% - 80px);
  right: 150px;
  z-index: 10;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
}

.ops-animation .actionList:after {
  opacity: 1;
  content: '';
  height: 22px;
  width: 22px;
  position: absolute;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  top: -80px;
  left: 240px;
  z-index: 10;
}

.ops-animation .actionList__item.hire,
.ops-animation .actionList__item.view-all-employees {
  pointer-events: none;
}

.ops-animation .actionList:after {
  -webkit-animation: mouseMoveToOffboardAction 0.2s cubic-bezier(1, 0, 0, 1) 2.5s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 2.65s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 3s 1 normal forwards, hideAnim 0.1s cubic-bezier(1, 0, 0, 1) 4s 1 normal forwards;
       -o-animation: mouseMoveToOffboardAction 0.2s cubic-bezier(1, 0, 0, 1) 2.5s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 2.65s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 3s 1 normal forwards, hideAnim 0.1s cubic-bezier(1, 0, 0, 1) 4s 1 normal forwards;
          animation: mouseMoveToOffboardAction 0.2s cubic-bezier(1, 0, 0, 1) 2.5s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 2.65s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 3s 1 normal forwards, hideAnim 0.1s cubic-bezier(1, 0, 0, 1) 4s 1 normal forwards;
}

.ops-animation .severanceBack {
  background-image: url("https://cdn.rippling.com/static/marketing/assets/ops-animation/ops_anim_severance.png");
}

.ops-animation .opsAnim {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  opacity: 0;
  -webkit-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.ops-animation .opsAnim__primaryBox {
  right: 260px;
  width: 390px;
  min-height: 350px;
  background-color: #ffffff;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_browser_window.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  -webkit-box-shadow: 0 0 30px 0 rgba(91, 98, 99, 0.4);
          box-shadow: 0 0 30px 0 rgba(91, 98, 99, 0.4);
  -webkit-transform-origin: center;
       -o-transform-origin: center;
          transform-origin: center;
}

.ops-animation .opsAnim__primaryBox--small {
  min-height: auto;
}

.ops-animation .opsAnim__primaryBox--mini {
  background-image: none;
  min-height: auto;
}

.ops-animation .opsAnim__primaryBoxTitle {
  font-family: ripplingFontNormal;
  text-align: center;
  padding-top: 60px;
  font-size: 16px;
  color: #000000;
}

.ops-animation .opsAnim__primaryBoxTitle--mini {
  padding-top: 30px;
}

.ops-animation .opsAnim__primaryBoxTitle--micro {
  padding-top: 10px;
  font-size: 12px;
  color: #999999;
}

.ops-animation .opsAnim__primaryBoxTitle--leftAlign {
  text-align: left;
}

.ops-animation .opsAnim .termListBack {
  background-image: url("https://cdn.rippling.com/static/marketing/assets/ops-animation/ops_anim_term_list.png");
}

.ops-animation .opsAnim .opsAnimIntro {
  position: absolute;
  top: calc(50% - 140px);
  right: 263px;
  padding: 0 30px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
}

.ops-animation .opsAnim .opsAnimIntro .formAnimField--select .formAnimField__value {
  opacity: 1;
}

.ops-animation .opsAnim .opsAnimSchedule {
  position: absolute;
  top: calc(50% - 140px);
  right: 100px;
  padding: 0 30px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
}

.ops-animation .opsAnim .opsAnimSchedule:after {
  opacity: 1;
  content: '';
  height: 22px;
  width: 22px;
  position: absolute;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  top: 30px;
  left: 340px;
  z-index: 10;
}

.ops-animation .opsAnim .opsAnimSchedule .formAnimField__valueFinal {
  left: 13px;
  padding-left: 4px;
}

.ops-animation .opsAnim .opsAnimSchedule--datePop {
  position: absolute;
  top: 105px;
  left: 50px;
  height: 172px;
  width: 156px;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/ops-animation/ops_anim_date.png");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-box-shadow: 0 2px 10px 0 rgba(91, 98, 99, 0.4);
          box-shadow: 0 2px 10px 0 rgba(91, 98, 99, 0.4);
  border: 1px solid #22c8e3;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
}

.ops-animation .opsAnim .opsAnimSchedule--timePop {
  position: absolute;
  top: 105px;
  left: 215px;
  height: 237px;
  width: 150px;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/ops-animation/ops_anim_time.png");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-box-shadow: 0 2px 10px 0 rgba(91, 98, 99, 0.4);
          box-shadow: 0 2px 10px 0 rgba(91, 98, 99, 0.4);
  border: 1px solid #22c8e3;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
}

.ops-animation .opsAnim .opsAnimType {
  position: absolute;
  top: calc(50% - 190px);
  right: 260px;
  padding: 0 30px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
}

.ops-animation .opsAnim .opsAnimType:after {
  opacity: 1;
  content: '';
  height: 22px;
  width: 22px;
  position: absolute;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  top: 100px;
  left: 360px;
  z-index: 10;
}

.ops-animation .opsAnim .opsAnimReason {
  position: absolute;
  top: calc(50% - 120px);
  right: 200px;
  padding: 0 30px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
}

.ops-animation .opsAnim .opsAnimReason .formAnimField {
  height: 80px;
  border: 1px solid #CCCCCC;
}

.ops-animation .opsAnim .opsAnimReason .formAnimField__inner {
  border: none;
}

.ops-animation .opsAnim .opsAnimReason .formAnimField__value {
  white-space: normal;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.ops-animation .opsAnim .opsAnimSeverance {
  position: absolute;
  top: calc(50% - 110px);
  right: 150px;
  padding: 0 30px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
}

.ops-animation .opsAnim .opsAnimSeverance:after {
  opacity: 1;
  content: '';
  height: 22px;
  width: 22px;
  position: absolute;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  top: 100px;
  left: 360px;
  z-index: 10;
}

.ops-animation .opsAnim .opsAnimAmount {
  position: absolute;
  top: calc(50% - 190px);
  right: 270px;
  padding: 0 30px 10px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
}

.ops-animation .opsAnim .opsAnimAmount:after {
  opacity: 1;
  content: '';
  height: 22px;
  width: 22px;
  position: absolute;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  top: 110px;
  left: 360px;
  z-index: 10;
}

.ops-animation .opsAnim .opsAnimSuspend {
  position: absolute;
  top: calc(50% - 140px);
  right: 120px;
  padding: 0 30px 10px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
}

.ops-animation .opsAnim .opsAnimSuspend .formAnim {
  margin-top: 10px;
}

.ops-animation .opsAnim .opsAnimSuspend .formAnim .formAnimField--accounts {
  background-position: center -10px;
}

.ops-animation .opsAnim .opsAnimWipe {
  position: absolute;
  top: calc(50% - 160px);
  right: 210px;
  padding: 0 30px 10px;
  width: 400px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
}

.ops-animation .opsAnim .opsAnimWipe:after {
  opacity: 1;
  content: '';
  height: 22px;
  width: 22px;
  position: absolute;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  top: 180px;
  left: 360px;
  z-index: 10;
}

.ops-animation .opsAnim .opsAnimPaycheck {
  position: absolute;
  top: calc(50% - 120px);
  right: 260px;
  padding: 0 30px 15px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
}

.ops-animation .opsAnim .opsAnimPaycheck:after {
  opacity: 1;
  content: '';
  height: 22px;
  width: 22px;
  position: absolute;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  top: 180px;
  left: 360px;
  z-index: 10;
}

.ops-animation .opsAnim .opsAnimPaycheck .formAnimField {
  height: 120px;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/ops-animation/ops_anim_paycheck.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.ops-animation .opsAnim .opsAnimPaycheck .formSubmit {
  position: absolute;
  left: 135px;
  bottom: -22px;
}

.ops-animation .opsAnim .opsAnimReview {
  position: absolute;
  top: calc(50% - 160px);
  right: 200px;
  width: 440px;
  padding: 0 10px 15px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
}

.ops-animation .opsAnim .opsAnimReview:after {
  opacity: 1;
  content: '';
  height: 22px;
  width: 22px;
  position: absolute;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  top: 180px;
  left: 360px;
  z-index: 10;
}

.ops-animation .opsAnim .opsAnimReview .formAnimField {
  height: 140px;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/ops-animation/ops_anim_review.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.ops-animation .opsAnim .opsAnimReview .formSubmit {
  position: absolute;
  left: 155px;
  bottom: -22px;
}

.ops-animation .opsAnim .opsAnimTask {
  width: 400px;
  padding: 0;
}

.ops-animation .opsAnim .opsAnimTask .formAnim {
  padding: 0;
}

.ops-animation .opsAnim .opsAnimTask .formAnimField {
  margin: 0;
  padding: 0;
  height: 110px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.ops-animation .opsAnim .opsAnimTaskA {
  position: absolute;
  top: calc(50% - 200px);
  right: 80px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
}

.ops-animation .opsAnim .opsAnimTaskA .formAnimField {
  background-image: url("https://cdn.rippling.com/static/marketing/assets/ops-animation/ops_anim_taskA.png");
}

.ops-animation .opsAnim .opsAnimTaskB {
  position: absolute;
  top: calc(50% - 60px);
  right: 280px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
}

.ops-animation .opsAnim .opsAnimTaskB .formAnimField {
  background-image: url("https://cdn.rippling.com/static/marketing/assets/ops-animation/ops_anim_taskB.png");
}

.ops-animation .opsAnim .opsAnimTaskC {
  position: absolute;
  top: calc(50% + 80px);
  right: 80px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
}

.ops-animation .opsAnim .opsAnimTaskC .formAnimField {
  background-image: url("https://cdn.rippling.com/static/marketing/assets/ops-animation/ops_anim_taskC.png");
}

.ops-animation .opsAnim .opsAnimTaskD {
  position: absolute;
  top: calc(50% - 140px);
  right: 210px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
}

.ops-animation .opsAnim .opsAnimTaskD .formAnimField {
  background-image: url("https://cdn.rippling.com/static/marketing/assets/ops-animation/ops_anim_taskD.png");
}

.ops-animation .opsAnim .opsAnimSendServerance {
  position: absolute;
  top: calc(50% - 180px);
  right: 40px;
  width: 300px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
}

.ops-animation .opsAnim .opsAnimSendServerance:after {
  opacity: 1;
  content: '';
  height: 22px;
  width: 22px;
  position: absolute;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  top: 320px;
  left: 265px;
  z-index: 10;
}

.ops-animation .opsAnim .opsAnimSendServerance .sendServerancePop {
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  position: absolute;
  width: 300px;
  height: 170px;
  left: -200px;
  bottom: -80px;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/ops-animation/ops_anim_offer_sign.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.ops-animation .opsAnim .opsAnimSendServerance .sendServerancePop:before {
  content: '';
  position: absolute;
  top: 2px;
  left: -40px;
  display: inline-block;
  width: 255px;
  height: 84px;
  -webkit-transform: perspective(1px) scale(0.4);
          transform: perspective(1px) scale(0.4);
  background: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_offer_sign_img.png") no-repeat;
}

.ops-animation .opsAnim .opsAnimSendServerance .sendServerancePop:after {
  content: 'Send Agreement';
  display: inline-block;
  padding: 6px 25px;
  text-transform: uppercase;
  font-family: ripplingFontMedium;
  font-size: 12px;
  color: #ffffff;
  background-color: #01C8E5;
  opacity: 1;
  -webkit-transform: perspective(1px) scale(1);
          transform: perspective(1px) scale(1);
  -webkit-font-smoothing: antialiased;
  position: absolute;
  bottom: -2px;
  right: 40px;
}

.ops-animation .opsAnim--animate {
  opacity: 1;
}

.ops-animation .opsAnim--animate .opsAnimIntro {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 6.5s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 6.5s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 6.5s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimIntro .formAnimField--termList {
  -webkit-animation: showFocus 0.2s linear 2.74s 1 normal forwards, hideFocus 0.2s linear 4.54s 1 normal forwards;
       -o-animation: showFocus 0.2s linear 2.74s 1 normal forwards, hideFocus 0.2s linear 4.54s 1 normal forwards;
          animation: showFocus 0.2s linear 2.74s 1 normal forwards, hideFocus 0.2s linear 4.54s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimIntro .formAnimField--termList .formAnimDropdown__content {
  -webkit-animation: termListExpandAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 2.74s 1 normal forwards, termListCollapseAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 4.54s 1 normal forwards;
       -o-animation: termListExpandAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 2.74s 1 normal forwards, termListCollapseAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 4.54s 1 normal forwards;
          animation: termListExpandAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 2.74s 1 normal forwards, termListCollapseAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 4.54s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimIntro .formAnimField--termList .formAnimField__inner {
  -webkit-animation: formAnimField 0.74s linear 2s 1 normal forwards;
       -o-animation: formAnimField 0.74s linear 2s 1 normal forwards;
          animation: formAnimField 0.74s linear 2s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimIntro .formAnimField--termList .formAnimField__label {
  -webkit-animation: formAnimFieldLabel 0.2s linear 2.3s 1 normal forwards;
       -o-animation: formAnimFieldLabel 0.2s linear 2.3s 1 normal forwards;
          animation: formAnimFieldLabel 0.2s linear 2.3s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimIntro .formAnimField--termList .formAnimField__value > span:nth-child(1) {
  -webkit-animation: typing 0.08s linear 2.3s 1 normal forwards;
       -o-animation: typing 0.08s linear 2.3s 1 normal forwards;
          animation: typing 0.08s linear 2.3s 1 normal forwards;
  animation: typing 0.08s linear 2.3s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimIntro .formAnimField--termList .formAnimField__value > span:nth-child(2) {
  -webkit-animation: typing 0.08s linear 2.38s 1 normal forwards;
       -o-animation: typing 0.08s linear 2.38s 1 normal forwards;
          animation: typing 0.08s linear 2.38s 1 normal forwards;
  animation: typing 0.08s linear 2.38s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimIntro .formAnimField--termList .formAnimField__value > span:nth-child(3) {
  -webkit-animation: typing 0.08s linear 2.46s 1 normal forwards;
       -o-animation: typing 0.08s linear 2.46s 1 normal forwards;
          animation: typing 0.08s linear 2.46s 1 normal forwards;
  animation: typing 0.08s linear 2.46s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimIntro .formAnimField--termList .formAnimField__valueFinal {
  -webkit-animation: showAnim 0.2s linear 4.74s 1 normal forwards;
       -o-animation: showAnim 0.2s linear 4.74s 1 normal forwards;
          animation: showAnim 0.2s linear 4.74s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimSchedule {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 6.8s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 15.8s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 6.8s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 15.8s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 6.8s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 15.8s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimSchedule:after {
  -webkit-animation: mouseMoveToOpsDate 0.2s cubic-bezier(1, 0, 0, 1) 7.6s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 7.75s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 8.3s 1 normal forwards, mouseMoveToOpsDatePick 0.2s cubic-bezier(1, 0, 0, 1) 9s 1 normal forwards, mouseClick1 0.1s cubic-bezier(1, 0, 0, 1) 9.7s 1 normal forwards, mouseToPointer0 0.1s cubic-bezier(1, 0, 0, 1) 10.2s 1 normal forwards, mouseMoveToOpsTime 0.2s cubic-bezier(1, 0, 0, 1) 11.3s 1 normal forwards, mouseToCursor1 0s cubic-bezier(1, 0, 0, 1) 11.45s 1 normal forwards, mouseClick1 0.1s cubic-bezier(1, 0, 0, 1) 12s 1 normal forwards, mouseMoveToOpsTimePick 0.2s cubic-bezier(1, 0, 0, 1) 12.7s 1 normal forwards, mouseClick2 0.1s cubic-bezier(1, 0, 0, 1) 13s 1 normal forwards, hideAnim 0.1s cubic-bezier(1, 0, 0, 1) 14s 1 normal forwards;
       -o-animation: mouseMoveToOpsDate 0.2s cubic-bezier(1, 0, 0, 1) 7.6s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 7.75s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 8.3s 1 normal forwards, mouseMoveToOpsDatePick 0.2s cubic-bezier(1, 0, 0, 1) 9s 1 normal forwards, mouseClick1 0.1s cubic-bezier(1, 0, 0, 1) 9.7s 1 normal forwards, mouseToPointer0 0.1s cubic-bezier(1, 0, 0, 1) 10.2s 1 normal forwards, mouseMoveToOpsTime 0.2s cubic-bezier(1, 0, 0, 1) 11.3s 1 normal forwards, mouseToCursor1 0s cubic-bezier(1, 0, 0, 1) 11.45s 1 normal forwards, mouseClick1 0.1s cubic-bezier(1, 0, 0, 1) 12s 1 normal forwards, mouseMoveToOpsTimePick 0.2s cubic-bezier(1, 0, 0, 1) 12.7s 1 normal forwards, mouseClick2 0.1s cubic-bezier(1, 0, 0, 1) 13s 1 normal forwards, hideAnim 0.1s cubic-bezier(1, 0, 0, 1) 14s 1 normal forwards;
          animation: mouseMoveToOpsDate 0.2s cubic-bezier(1, 0, 0, 1) 7.6s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 7.75s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 8.3s 1 normal forwards, mouseMoveToOpsDatePick 0.2s cubic-bezier(1, 0, 0, 1) 9s 1 normal forwards, mouseClick1 0.1s cubic-bezier(1, 0, 0, 1) 9.7s 1 normal forwards, mouseToPointer0 0.1s cubic-bezier(1, 0, 0, 1) 10.2s 1 normal forwards, mouseMoveToOpsTime 0.2s cubic-bezier(1, 0, 0, 1) 11.3s 1 normal forwards, mouseToCursor1 0s cubic-bezier(1, 0, 0, 1) 11.45s 1 normal forwards, mouseClick1 0.1s cubic-bezier(1, 0, 0, 1) 12s 1 normal forwards, mouseMoveToOpsTimePick 0.2s cubic-bezier(1, 0, 0, 1) 12.7s 1 normal forwards, mouseClick2 0.1s cubic-bezier(1, 0, 0, 1) 13s 1 normal forwards, hideAnim 0.1s cubic-bezier(1, 0, 0, 1) 14s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimSchedule .formAnimField--date .formAnimField__valueFinal {
  -webkit-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 10.4s 1 normal forwards;
       -o-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 10.4s 1 normal forwards;
          animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 10.4s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimSchedule .formAnimField--time .formAnimField__valueFinal {
  -webkit-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 13.7s 1 normal forwards;
       -o-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 13.7s 1 normal forwards;
          animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 13.7s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimSchedule--datePop {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 8.5s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 10.3s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 8.5s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 10.3s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 8.5s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 10.3s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimSchedule--timePop {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 12.2s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 13.6s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 12.2s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 13.6s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 12.2s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 13.6s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimType {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 16.1s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 19.1s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 16.1s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 19.1s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 16.1s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 19.1s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimType:after {
  -webkit-animation: mouseMoveToOpsTypeNo 0.2s cubic-bezier(1, 0, 0, 1) 16.5s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 16.5s 1 normal forwards, mouseMoveToOpsTypeYes 0.4s cubic-bezier(1, 0, 0, 1) 16.7s 1 normal forwards, mouseToPointer0 0s cubic-bezier(1, 0, 0, 1) 16.8s 1 normal forwards, mouseToCursor1 0s cubic-bezier(1, 0, 0, 1) 16.9s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 17.4s 1 normal forwards;
       -o-animation: mouseMoveToOpsTypeNo 0.2s cubic-bezier(1, 0, 0, 1) 16.5s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 16.5s 1 normal forwards, mouseMoveToOpsTypeYes 0.4s cubic-bezier(1, 0, 0, 1) 16.7s 1 normal forwards, mouseToPointer0 0s cubic-bezier(1, 0, 0, 1) 16.8s 1 normal forwards, mouseToCursor1 0s cubic-bezier(1, 0, 0, 1) 16.9s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 17.4s 1 normal forwards;
          animation: mouseMoveToOpsTypeNo 0.2s cubic-bezier(1, 0, 0, 1) 16.5s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 16.5s 1 normal forwards, mouseMoveToOpsTypeYes 0.4s cubic-bezier(1, 0, 0, 1) 16.7s 1 normal forwards, mouseToPointer0 0s cubic-bezier(1, 0, 0, 1) 16.8s 1 normal forwards, mouseToCursor1 0s cubic-bezier(1, 0, 0, 1) 16.9s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 17.4s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimType .radioBox:first-child {
  -webkit-animation: transformUp 0.1s cubic-bezier(1, 0, 0, 1) 16.8s 1 normal forwards, showHoverBlue 0.1s cubic-bezier(1, 0, 0, 1) 17.2s 1 normal forwards, showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 17.2s 1 normal forwards;
       -o-animation: transformUp 0.1s cubic-bezier(1, 0, 0, 1) 16.8s 1 normal forwards, showHoverBlue 0.1s cubic-bezier(1, 0, 0, 1) 17.2s 1 normal forwards, showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 17.2s 1 normal forwards;
          animation: transformUp 0.1s cubic-bezier(1, 0, 0, 1) 16.8s 1 normal forwards, showHoverBlue 0.1s cubic-bezier(1, 0, 0, 1) 17.2s 1 normal forwards, showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 17.2s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimType .radioBox:first-child .radioBox__title {
  -webkit-animation: showHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 16.8s 1 normal forwards, showHoverLightColor 0.1s cubic-bezier(1, 0, 0, 1) 17.2s 1 normal forwards;
       -o-animation: showHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 16.8s 1 normal forwards, showHoverLightColor 0.1s cubic-bezier(1, 0, 0, 1) 17.2s 1 normal forwards;
          animation: showHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 16.8s 1 normal forwards, showHoverLightColor 0.1s cubic-bezier(1, 0, 0, 1) 17.2s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimType .radioBox:first-child .radioBox__check {
  -webkit-animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 16.8s 1 normal forwards, showHoverColorBlue 0.1s cubic-bezier(1, 0, 0, 1) 17.2s 1 normal forwards;
       -o-animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 16.8s 1 normal forwards, showHoverColorBlue 0.1s cubic-bezier(1, 0, 0, 1) 17.2s 1 normal forwards;
          animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 16.8s 1 normal forwards, showHoverColorBlue 0.1s cubic-bezier(1, 0, 0, 1) 17.2s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimType .radioBox:first-child:after {
  -webkit-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 16.8s 1 normal forwards;
       -o-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 16.8s 1 normal forwards;
          animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 16.8s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimType .radioBox:last-child {
  -webkit-animation: transformUp 0.1s cubic-bezier(1, 0, 0, 1) 16.6s 1 normal forwards, transformDown 0.1s cubic-bezier(1, 0, 0, 1) 16.8s 1 normal forwards;
       -o-animation: transformUp 0.1s cubic-bezier(1, 0, 0, 1) 16.6s 1 normal forwards, transformDown 0.1s cubic-bezier(1, 0, 0, 1) 16.8s 1 normal forwards;
          animation: transformUp 0.1s cubic-bezier(1, 0, 0, 1) 16.6s 1 normal forwards, transformDown 0.1s cubic-bezier(1, 0, 0, 1) 16.8s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimType .radioBox:last-child .radioBox__title {
  -webkit-animation: showHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 16.6s 1 normal forwards, hideHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 16.8s 1 normal forwards;
       -o-animation: showHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 16.6s 1 normal forwards, hideHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 16.8s 1 normal forwards;
          animation: showHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 16.6s 1 normal forwards, hideHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 16.8s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimType .radioBox:last-child .radioBox__check {
  -webkit-animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 16.6s 1 normal forwards, hideHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 16.8s 1 normal forwards;
       -o-animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 16.6s 1 normal forwards, hideHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 16.8s 1 normal forwards;
          animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 16.6s 1 normal forwards, hideHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 16.8s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimType .radioBox:last-child:after {
  -webkit-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 16.6s 1 normal forwards, hideAnim 0.1s cubic-bezier(1, 0, 0, 1) 16.8s 1 normal forwards;
       -o-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 16.6s 1 normal forwards, hideAnim 0.1s cubic-bezier(1, 0, 0, 1) 16.8s 1 normal forwards;
          animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 16.6s 1 normal forwards, hideAnim 0.1s cubic-bezier(1, 0, 0, 1) 16.8s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimReason {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 19.4s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 25.9s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 19.4s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 25.9s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 19.4s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 25.9s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimReason .formAnimField--reason .formAnimField__inner {
  -webkit-animation: formAnimField 4.34s linear 20.4s 1 normal forwards;
       -o-animation: formAnimField 4.34s linear 20.4s 1 normal forwards;
          animation: formAnimField 4.34s linear 20.4s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimReason .formAnimField--reason .formAnimField__label {
  -webkit-animation: formAnimFieldLabel 0.2s linear 20.7s 1 normal forwards;
       -o-animation: formAnimFieldLabel 0.2s linear 20.7s 1 normal forwards;
          animation: formAnimFieldLabel 0.2s linear 20.7s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimReason .formAnimField--reason .formAnimField__value > span:nth-child(1) {
  -webkit-animation: typing 0.08s linear 20.7s 1 normal forwards;
       -o-animation: typing 0.08s linear 20.7s 1 normal forwards;
          animation: typing 0.08s linear 20.7s 1 normal forwards;
  animation: typing 0.08s linear 20.7s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimReason .formAnimField--reason .formAnimField__value > span:nth-child(2) {
  -webkit-animation: typing 0.08s linear 20.78s 1 normal forwards;
       -o-animation: typing 0.08s linear 20.78s 1 normal forwards;
          animation: typing 0.08s linear 20.78s 1 normal forwards;
  animation: typing 0.08s linear 20.78s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimReason .formAnimField--reason .formAnimField__value > span:nth-child(3) {
  -webkit-animation: typing 0.08s linear 20.86s 1 normal forwards;
       -o-animation: typing 0.08s linear 20.86s 1 normal forwards;
          animation: typing 0.08s linear 20.86s 1 normal forwards;
  animation: typing 0.08s linear 20.86s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimReason .formAnimField--reason .formAnimField__value > span:nth-child(4) {
  -webkit-animation: typing 0.08s linear 20.94s 1 normal forwards;
       -o-animation: typing 0.08s linear 20.94s 1 normal forwards;
          animation: typing 0.08s linear 20.94s 1 normal forwards;
  animation: typing 0.08s linear 20.94s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimReason .formAnimField--reason .formAnimField__value > span:nth-child(5) {
  -webkit-animation: typing 0.08s linear 21.02s 1 normal forwards;
       -o-animation: typing 0.08s linear 21.02s 1 normal forwards;
          animation: typing 0.08s linear 21.02s 1 normal forwards;
  animation: typing 0.08s linear 21.02s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimReason .formAnimField--reason .formAnimField__value > span:nth-child(6) {
  -webkit-animation: typing 0.08s linear 21.1s 1 normal forwards;
       -o-animation: typing 0.08s linear 21.1s 1 normal forwards;
          animation: typing 0.08s linear 21.1s 1 normal forwards;
  animation: typing 0.08s linear 21.1s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimReason .formAnimField--reason .formAnimField__value > span:nth-child(7) {
  -webkit-animation: typing 0.08s linear 21.18s 1 normal forwards;
       -o-animation: typing 0.08s linear 21.18s 1 normal forwards;
          animation: typing 0.08s linear 21.18s 1 normal forwards;
  animation: typing 0.08s linear 21.18s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimReason .formAnimField--reason .formAnimField__value > span:nth-child(8) {
  -webkit-animation: typing 0.08s linear 21.26s 1 normal forwards;
       -o-animation: typing 0.08s linear 21.26s 1 normal forwards;
          animation: typing 0.08s linear 21.26s 1 normal forwards;
  animation: typing 0.08s linear 21.26s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimReason .formAnimField--reason .formAnimField__value > span:nth-child(9) {
  -webkit-animation: typing 0.08s linear 21.34s 1 normal forwards;
       -o-animation: typing 0.08s linear 21.34s 1 normal forwards;
          animation: typing 0.08s linear 21.34s 1 normal forwards;
  animation: typing 0.08s linear 21.34s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimReason .formAnimField--reason .formAnimField__value > span:nth-child(10) {
  -webkit-animation: typing 0.08s linear 21.42s 1 normal forwards;
       -o-animation: typing 0.08s linear 21.42s 1 normal forwards;
          animation: typing 0.08s linear 21.42s 1 normal forwards;
  animation: typing 0.08s linear 21.42s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimReason .formAnimField--reason .formAnimField__value > span:nth-child(11) {
  -webkit-animation: typing 0.08s linear 21.5s 1 normal forwards;
       -o-animation: typing 0.08s linear 21.5s 1 normal forwards;
          animation: typing 0.08s linear 21.5s 1 normal forwards;
  animation: typing 0.08s linear 21.5s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimReason .formAnimField--reason .formAnimField__value > span:nth-child(12) {
  -webkit-animation: typing 0.08s linear 21.58s 1 normal forwards;
       -o-animation: typing 0.08s linear 21.58s 1 normal forwards;
          animation: typing 0.08s linear 21.58s 1 normal forwards;
  animation: typing 0.08s linear 21.58s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimReason .formAnimField--reason .formAnimField__value > span:nth-child(13) {
  -webkit-animation: typing 0.08s linear 21.66s 1 normal forwards;
       -o-animation: typing 0.08s linear 21.66s 1 normal forwards;
          animation: typing 0.08s linear 21.66s 1 normal forwards;
  animation: typing 0.08s linear 21.66s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimReason .formAnimField--reason .formAnimField__value > span:nth-child(14) {
  -webkit-animation: typing 0.08s linear 21.74s 1 normal forwards;
       -o-animation: typing 0.08s linear 21.74s 1 normal forwards;
          animation: typing 0.08s linear 21.74s 1 normal forwards;
  animation: typing 0.08s linear 21.74s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimReason .formAnimField--reason .formAnimField__value > span:nth-child(15) {
  -webkit-animation: typing 0.08s linear 21.82s 1 normal forwards;
       -o-animation: typing 0.08s linear 21.82s 1 normal forwards;
          animation: typing 0.08s linear 21.82s 1 normal forwards;
  animation: typing 0.08s linear 21.82s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimReason .formAnimField--reason .formAnimField__value > span:nth-child(16) {
  -webkit-animation: typing 0.08s linear 21.9s 1 normal forwards;
       -o-animation: typing 0.08s linear 21.9s 1 normal forwards;
          animation: typing 0.08s linear 21.9s 1 normal forwards;
  animation: typing 0.08s linear 21.9s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimReason .formAnimField--reason .formAnimField__value > span:nth-child(17) {
  -webkit-animation: typing 0.08s linear 21.98s 1 normal forwards;
       -o-animation: typing 0.08s linear 21.98s 1 normal forwards;
          animation: typing 0.08s linear 21.98s 1 normal forwards;
  animation: typing 0.08s linear 21.98s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimReason .formAnimField--reason .formAnimField__value > span:nth-child(18) {
  -webkit-animation: typing 0.08s linear 22.06s 1 normal forwards;
       -o-animation: typing 0.08s linear 22.06s 1 normal forwards;
          animation: typing 0.08s linear 22.06s 1 normal forwards;
  animation: typing 0.08s linear 22.06s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimReason .formAnimField--reason .formAnimField__value > span:nth-child(19) {
  -webkit-animation: typing 0.08s linear 22.14s 1 normal forwards;
       -o-animation: typing 0.08s linear 22.14s 1 normal forwards;
          animation: typing 0.08s linear 22.14s 1 normal forwards;
  animation: typing 0.08s linear 22.14s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimReason .formAnimField--reason .formAnimField__value > span:nth-child(20) {
  -webkit-animation: typing 0.08s linear 22.22s 1 normal forwards;
       -o-animation: typing 0.08s linear 22.22s 1 normal forwards;
          animation: typing 0.08s linear 22.22s 1 normal forwards;
  animation: typing 0.08s linear 22.22s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimReason .formAnimField--reason .formAnimField__value > span:nth-child(21) {
  -webkit-animation: typing 0.08s linear 22.3s 1 normal forwards;
       -o-animation: typing 0.08s linear 22.3s 1 normal forwards;
          animation: typing 0.08s linear 22.3s 1 normal forwards;
  animation: typing 0.08s linear 22.3s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimReason .formAnimField--reason .formAnimField__value > span:nth-child(22) {
  -webkit-animation: typing 0.08s linear 22.38s 1 normal forwards;
       -o-animation: typing 0.08s linear 22.38s 1 normal forwards;
          animation: typing 0.08s linear 22.38s 1 normal forwards;
  animation: typing 0.08s linear 22.38s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimReason .formAnimField--reason .formAnimField__value > span:nth-child(23) {
  -webkit-animation: typing 0.08s linear 22.46s 1 normal forwards;
       -o-animation: typing 0.08s linear 22.46s 1 normal forwards;
          animation: typing 0.08s linear 22.46s 1 normal forwards;
  animation: typing 0.08s linear 22.46s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimReason .formAnimField--reason .formAnimField__value > span:nth-child(24) {
  -webkit-animation: typing 0.08s linear 22.54s 1 normal forwards;
       -o-animation: typing 0.08s linear 22.54s 1 normal forwards;
          animation: typing 0.08s linear 22.54s 1 normal forwards;
  animation: typing 0.08s linear 22.54s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimReason .formAnimField--reason .formAnimField__value > span:nth-child(25) {
  -webkit-animation: typing 0.08s linear 22.62s 1 normal forwards;
       -o-animation: typing 0.08s linear 22.62s 1 normal forwards;
          animation: typing 0.08s linear 22.62s 1 normal forwards;
  animation: typing 0.08s linear 22.62s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimReason .formAnimField--reason .formAnimField__value > span:nth-child(26) {
  -webkit-animation: typing 0.08s linear 22.7s 1 normal forwards;
       -o-animation: typing 0.08s linear 22.7s 1 normal forwards;
          animation: typing 0.08s linear 22.7s 1 normal forwards;
  animation: typing 0.08s linear 22.7s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimReason .formAnimField--reason .formAnimField__value > span:nth-child(27) {
  -webkit-animation: typing 0.08s linear 22.78s 1 normal forwards;
       -o-animation: typing 0.08s linear 22.78s 1 normal forwards;
          animation: typing 0.08s linear 22.78s 1 normal forwards;
  animation: typing 0.08s linear 22.78s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimReason .formAnimField--reason .formAnimField__value > span:nth-child(28) {
  -webkit-animation: typing 0.08s linear 22.86s 1 normal forwards;
       -o-animation: typing 0.08s linear 22.86s 1 normal forwards;
          animation: typing 0.08s linear 22.86s 1 normal forwards;
  animation: typing 0.08s linear 22.86s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimReason .formAnimField--reason .formAnimField__value > span:nth-child(29) {
  -webkit-animation: typing 0.08s linear 22.94s 1 normal forwards;
       -o-animation: typing 0.08s linear 22.94s 1 normal forwards;
          animation: typing 0.08s linear 22.94s 1 normal forwards;
  animation: typing 0.08s linear 22.94s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimReason .formAnimField--reason .formAnimField__value > span:nth-child(30) {
  -webkit-animation: typing 0.08s linear 23.02s 1 normal forwards;
       -o-animation: typing 0.08s linear 23.02s 1 normal forwards;
          animation: typing 0.08s linear 23.02s 1 normal forwards;
  animation: typing 0.08s linear 23.02s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimReason .formAnimField--reason .formAnimField__value > span:nth-child(31) {
  -webkit-animation: typing 0.08s linear 23.1s 1 normal forwards;
       -o-animation: typing 0.08s linear 23.1s 1 normal forwards;
          animation: typing 0.08s linear 23.1s 1 normal forwards;
  animation: typing 0.08s linear 23.1s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimReason .formAnimField--reason .formAnimField__value > span:nth-child(32) {
  -webkit-animation: typing 0.08s linear 23.18s 1 normal forwards;
       -o-animation: typing 0.08s linear 23.18s 1 normal forwards;
          animation: typing 0.08s linear 23.18s 1 normal forwards;
  animation: typing 0.08s linear 23.18s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimReason .formAnimField--reason .formAnimField__value > span:nth-child(33) {
  -webkit-animation: typing 0.08s linear 23.26s 1 normal forwards;
       -o-animation: typing 0.08s linear 23.26s 1 normal forwards;
          animation: typing 0.08s linear 23.26s 1 normal forwards;
  animation: typing 0.08s linear 23.26s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimReason .formAnimField--reason .formAnimField__value > span:nth-child(34) {
  -webkit-animation: typing 0.08s linear 23.34s 1 normal forwards;
       -o-animation: typing 0.08s linear 23.34s 1 normal forwards;
          animation: typing 0.08s linear 23.34s 1 normal forwards;
  animation: typing 0.08s linear 23.34s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimReason .formAnimField--reason .formAnimField__value > span:nth-child(35) {
  -webkit-animation: typing 0.08s linear 23.42s 1 normal forwards;
       -o-animation: typing 0.08s linear 23.42s 1 normal forwards;
          animation: typing 0.08s linear 23.42s 1 normal forwards;
  animation: typing 0.08s linear 23.42s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimReason .formAnimField--reason .formAnimField__value > span:nth-child(36) {
  -webkit-animation: typing 0.08s linear 23.5s 1 normal forwards;
       -o-animation: typing 0.08s linear 23.5s 1 normal forwards;
          animation: typing 0.08s linear 23.5s 1 normal forwards;
  animation: typing 0.08s linear 23.5s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimReason .formAnimField--reason .formAnimField__value > span:nth-child(37) {
  -webkit-animation: typing 0.08s linear 23.58s 1 normal forwards;
       -o-animation: typing 0.08s linear 23.58s 1 normal forwards;
          animation: typing 0.08s linear 23.58s 1 normal forwards;
  animation: typing 0.08s linear 23.58s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimReason .formAnimField--reason .formAnimField__value > span:nth-child(38) {
  -webkit-animation: typing 0.08s linear 23.66s 1 normal forwards;
       -o-animation: typing 0.08s linear 23.66s 1 normal forwards;
          animation: typing 0.08s linear 23.66s 1 normal forwards;
  animation: typing 0.08s linear 23.66s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimReason .formAnimField--reason .formAnimField__value > span:nth-child(39) {
  -webkit-animation: typing 0.08s linear 23.74s 1 normal forwards;
       -o-animation: typing 0.08s linear 23.74s 1 normal forwards;
          animation: typing 0.08s linear 23.74s 1 normal forwards;
  animation: typing 0.08s linear 23.74s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimReason .formAnimField--reason .formAnimField__value > span:nth-child(40) {
  -webkit-animation: typing 0.08s linear 23.82s 1 normal forwards;
       -o-animation: typing 0.08s linear 23.82s 1 normal forwards;
          animation: typing 0.08s linear 23.82s 1 normal forwards;
  animation: typing 0.08s linear 23.82s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimReason .formAnimField--reason .formAnimField__value > span:nth-child(41) {
  -webkit-animation: typing 0.08s linear 23.9s 1 normal forwards;
       -o-animation: typing 0.08s linear 23.9s 1 normal forwards;
          animation: typing 0.08s linear 23.9s 1 normal forwards;
  animation: typing 0.08s linear 23.9s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimReason .formAnimField--reason .formAnimField__value > span:nth-child(42) {
  -webkit-animation: typing 0.08s linear 23.98s 1 normal forwards;
       -o-animation: typing 0.08s linear 23.98s 1 normal forwards;
          animation: typing 0.08s linear 23.98s 1 normal forwards;
  animation: typing 0.08s linear 23.98s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimReason .formAnimField--reason .formAnimField__value > span:nth-child(43) {
  -webkit-animation: typing 0.08s linear 24.06s 1 normal forwards;
       -o-animation: typing 0.08s linear 24.06s 1 normal forwards;
          animation: typing 0.08s linear 24.06s 1 normal forwards;
  animation: typing 0.08s linear 24.06s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimReason .formAnimField--reason .formAnimField__value > span:nth-child(44) {
  -webkit-animation: typing 0.08s linear 24.14s 1 normal forwards;
       -o-animation: typing 0.08s linear 24.14s 1 normal forwards;
          animation: typing 0.08s linear 24.14s 1 normal forwards;
  animation: typing 0.08s linear 24.14s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimReason .formAnimField--reason .formAnimField__value > span:nth-child(45) {
  -webkit-animation: typing 0.08s linear 24.22s 1 normal forwards;
       -o-animation: typing 0.08s linear 24.22s 1 normal forwards;
          animation: typing 0.08s linear 24.22s 1 normal forwards;
  animation: typing 0.08s linear 24.22s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimReason .formAnimField--reason .formAnimField__value > span:nth-child(46) {
  -webkit-animation: typing 0.08s linear 24.3s 1 normal forwards;
       -o-animation: typing 0.08s linear 24.3s 1 normal forwards;
          animation: typing 0.08s linear 24.3s 1 normal forwards;
  animation: typing 0.08s linear 24.3s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimReason .formAnimField--reason .formAnimField__value > span:nth-child(47) {
  -webkit-animation: typing 0.08s linear 24.38s 1 normal forwards;
       -o-animation: typing 0.08s linear 24.38s 1 normal forwards;
          animation: typing 0.08s linear 24.38s 1 normal forwards;
  animation: typing 0.08s linear 24.38s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimReason .formAnimField--reason .formAnimField__value > span:nth-child(48) {
  -webkit-animation: typing 0.08s linear 24.46s 1 normal forwards;
       -o-animation: typing 0.08s linear 24.46s 1 normal forwards;
          animation: typing 0.08s linear 24.46s 1 normal forwards;
  animation: typing 0.08s linear 24.46s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimSeverance {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 26.2s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 29.2s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 26.2s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 29.2s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 26.2s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 29.2s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimSeverance:after {
  -webkit-animation: mouseMoveToOpsTypeNo 0.2s cubic-bezier(1, 0, 0, 1) 26.6s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 26.6s 1 normal forwards, mouseMoveToOpsTypeYes 0.4s cubic-bezier(1, 0, 0, 1) 26.8s 1 normal forwards, mouseToPointer0 0s cubic-bezier(1, 0, 0, 1) 26.9s 1 normal forwards, mouseToCursor1 0s cubic-bezier(1, 0, 0, 1) 27s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 27.5s 1 normal forwards;
       -o-animation: mouseMoveToOpsTypeNo 0.2s cubic-bezier(1, 0, 0, 1) 26.6s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 26.6s 1 normal forwards, mouseMoveToOpsTypeYes 0.4s cubic-bezier(1, 0, 0, 1) 26.8s 1 normal forwards, mouseToPointer0 0s cubic-bezier(1, 0, 0, 1) 26.9s 1 normal forwards, mouseToCursor1 0s cubic-bezier(1, 0, 0, 1) 27s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 27.5s 1 normal forwards;
          animation: mouseMoveToOpsTypeNo 0.2s cubic-bezier(1, 0, 0, 1) 26.6s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 26.6s 1 normal forwards, mouseMoveToOpsTypeYes 0.4s cubic-bezier(1, 0, 0, 1) 26.8s 1 normal forwards, mouseToPointer0 0s cubic-bezier(1, 0, 0, 1) 26.9s 1 normal forwards, mouseToCursor1 0s cubic-bezier(1, 0, 0, 1) 27s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 27.5s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimSeverance .radioBox:first-child {
  -webkit-animation: transformUp 0.1s cubic-bezier(1, 0, 0, 1) 26.9s 1 normal forwards, showHoverBlue 0.1s cubic-bezier(1, 0, 0, 1) 27.3s 1 normal forwards, showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 27.3s 1 normal forwards;
       -o-animation: transformUp 0.1s cubic-bezier(1, 0, 0, 1) 26.9s 1 normal forwards, showHoverBlue 0.1s cubic-bezier(1, 0, 0, 1) 27.3s 1 normal forwards, showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 27.3s 1 normal forwards;
          animation: transformUp 0.1s cubic-bezier(1, 0, 0, 1) 26.9s 1 normal forwards, showHoverBlue 0.1s cubic-bezier(1, 0, 0, 1) 27.3s 1 normal forwards, showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 27.3s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimSeverance .radioBox:first-child .radioBox__title {
  -webkit-animation: showHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 26.9s 1 normal forwards, showHoverLightColor 0.1s cubic-bezier(1, 0, 0, 1) 27.3s 1 normal forwards;
       -o-animation: showHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 26.9s 1 normal forwards, showHoverLightColor 0.1s cubic-bezier(1, 0, 0, 1) 27.3s 1 normal forwards;
          animation: showHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 26.9s 1 normal forwards, showHoverLightColor 0.1s cubic-bezier(1, 0, 0, 1) 27.3s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimSeverance .radioBox:first-child .radioBox__check {
  -webkit-animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 26.9s 1 normal forwards, showHoverColorBlue 0.1s cubic-bezier(1, 0, 0, 1) 27.3s 1 normal forwards;
       -o-animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 26.9s 1 normal forwards, showHoverColorBlue 0.1s cubic-bezier(1, 0, 0, 1) 27.3s 1 normal forwards;
          animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 26.9s 1 normal forwards, showHoverColorBlue 0.1s cubic-bezier(1, 0, 0, 1) 27.3s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimSeverance .radioBox:first-child:after {
  -webkit-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 26.9s 1 normal forwards;
       -o-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 26.9s 1 normal forwards;
          animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 26.9s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimSeverance .radioBox:last-child {
  -webkit-animation: transformUp 0.1s cubic-bezier(1, 0, 0, 1) 26.7s 1 normal forwards, transformDown 0.1s cubic-bezier(1, 0, 0, 1) 26.9s 1 normal forwards;
       -o-animation: transformUp 0.1s cubic-bezier(1, 0, 0, 1) 26.7s 1 normal forwards, transformDown 0.1s cubic-bezier(1, 0, 0, 1) 26.9s 1 normal forwards;
          animation: transformUp 0.1s cubic-bezier(1, 0, 0, 1) 26.7s 1 normal forwards, transformDown 0.1s cubic-bezier(1, 0, 0, 1) 26.9s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimSeverance .radioBox:last-child .radioBox__title {
  -webkit-animation: showHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 26.7s 1 normal forwards, hideHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 26.9s 1 normal forwards;
       -o-animation: showHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 26.7s 1 normal forwards, hideHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 26.9s 1 normal forwards;
          animation: showHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 26.7s 1 normal forwards, hideHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 26.9s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimSeverance .radioBox:last-child .radioBox__check {
  -webkit-animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 26.7s 1 normal forwards, hideHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 26.9s 1 normal forwards;
       -o-animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 26.7s 1 normal forwards, hideHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 26.9s 1 normal forwards;
          animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 26.7s 1 normal forwards, hideHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 26.9s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimSeverance .radioBox:last-child:after {
  -webkit-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 26.7s 1 normal forwards, hideAnim 0.1s cubic-bezier(1, 0, 0, 1) 26.9s 1 normal forwards;
       -o-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 26.7s 1 normal forwards, hideAnim 0.1s cubic-bezier(1, 0, 0, 1) 26.9s 1 normal forwards;
          animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 26.7s 1 normal forwards, hideAnim 0.1s cubic-bezier(1, 0, 0, 1) 26.9s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimAmount {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 29.5s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 35.9s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 29.5s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 35.9s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 29.5s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 35.9s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimAmount:after {
  -webkit-animation: mouseMoveToOpsTemplate 0.2s cubic-bezier(1, 0, 0, 1) 31.8s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 31.95s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 32.3s 1 normal forwards, mouseMoveToOpsTemplateDone 0.2s cubic-bezier(1, 0, 0, 1) 34.5s 1 normal forwards, mouseClick1 0.2s cubic-bezier(1, 0, 0, 1) 35.1s 1 normal forwards;
       -o-animation: mouseMoveToOpsTemplate 0.2s cubic-bezier(1, 0, 0, 1) 31.8s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 31.95s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 32.3s 1 normal forwards, mouseMoveToOpsTemplateDone 0.2s cubic-bezier(1, 0, 0, 1) 34.5s 1 normal forwards, mouseClick1 0.2s cubic-bezier(1, 0, 0, 1) 35.1s 1 normal forwards;
          animation: mouseMoveToOpsTemplate 0.2s cubic-bezier(1, 0, 0, 1) 31.8s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 31.95s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 32.3s 1 normal forwards, mouseMoveToOpsTemplateDone 0.2s cubic-bezier(1, 0, 0, 1) 34.5s 1 normal forwards, mouseClick1 0.2s cubic-bezier(1, 0, 0, 1) 35.1s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimAmount .formAnimField--opsAmount .formAnimField__inner {
  -webkit-animation: formAnimField 0.98s linear 30.3s 1 normal forwards;
       -o-animation: formAnimField 0.98s linear 30.3s 1 normal forwards;
          animation: formAnimField 0.98s linear 30.3s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimAmount .formAnimField--opsAmount .formAnimField__label {
  -webkit-animation: formAnimFieldLabel 0.2s linear 30.6s 1 normal forwards;
       -o-animation: formAnimFieldLabel 0.2s linear 30.6s 1 normal forwards;
          animation: formAnimFieldLabel 0.2s linear 30.6s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimAmount .formAnimField--opsAmount .formAnimField__value > span:nth-child(1) {
  -webkit-animation: typing 0.08s linear 30.6s 1 normal forwards;
       -o-animation: typing 0.08s linear 30.6s 1 normal forwards;
          animation: typing 0.08s linear 30.6s 1 normal forwards;
  animation: typing 0.08s linear 30.6s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimAmount .formAnimField--opsAmount .formAnimField__value > span:nth-child(2) {
  -webkit-animation: typing 0.08s linear 30.68s 1 normal forwards;
       -o-animation: typing 0.08s linear 30.68s 1 normal forwards;
          animation: typing 0.08s linear 30.68s 1 normal forwards;
  animation: typing 0.08s linear 30.68s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimAmount .formAnimField--opsAmount .formAnimField__value > span:nth-child(3) {
  -webkit-animation: typing 0.08s linear 30.76s 1 normal forwards;
       -o-animation: typing 0.08s linear 30.76s 1 normal forwards;
          animation: typing 0.08s linear 30.76s 1 normal forwards;
  animation: typing 0.08s linear 30.76s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimAmount .formAnimField--opsAmount .formAnimField__value > span:nth-child(4) {
  -webkit-animation: typing 0.08s linear 30.84s 1 normal forwards;
       -o-animation: typing 0.08s linear 30.84s 1 normal forwards;
          animation: typing 0.08s linear 30.84s 1 normal forwards;
  animation: typing 0.08s linear 30.84s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimAmount .formAnimField--opsAmount .formAnimField__value > span:nth-child(5) {
  -webkit-animation: typing 0.08s linear 30.92s 1 normal forwards;
       -o-animation: typing 0.08s linear 30.92s 1 normal forwards;
          animation: typing 0.08s linear 30.92s 1 normal forwards;
  animation: typing 0.08s linear 30.92s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimAmount .formAnimField--opsAmount .formAnimField__value > span:nth-child(6) {
  -webkit-animation: typing 0.08s linear 31s 1 normal forwards;
       -o-animation: typing 0.08s linear 31s 1 normal forwards;
          animation: typing 0.08s linear 31s 1 normal forwards;
  animation: typing 0.08s linear 31s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimAmount .formAnimField--opsTemplate {
  -webkit-animation: showHover 0.1s linear 32s 1 normal forwards, hideHover 0.1s linear 32.8s 1 normal forwards, showFocus 0.2s linear 32.8s 1 normal forwards, hideFocus 0.2s linear 33.6s 1 normal forwards, showHover 0.1s linear 33.6s 1 normal forwards, hideHover 0.1s linear 34.4s 1 normal forwards;
       -o-animation: showHover 0.1s linear 32s 1 normal forwards, hideHover 0.1s linear 32.8s 1 normal forwards, showFocus 0.2s linear 32.8s 1 normal forwards, hideFocus 0.2s linear 33.6s 1 normal forwards, showHover 0.1s linear 33.6s 1 normal forwards, hideHover 0.1s linear 34.4s 1 normal forwards;
          animation: showHover 0.1s linear 32s 1 normal forwards, hideHover 0.1s linear 32.8s 1 normal forwards, showFocus 0.2s linear 32.8s 1 normal forwards, hideFocus 0.2s linear 33.6s 1 normal forwards, showHover 0.1s linear 33.6s 1 normal forwards, hideHover 0.1s linear 34.4s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimAmount .formAnimField--opsTemplate .formAnimDropdown__content {
  -webkit-animation: empTypeExpandAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 32.8s 1 normal forwards, empTypeCollapseAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 33.6s 1 normal forwards;
       -o-animation: empTypeExpandAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 32.8s 1 normal forwards, empTypeCollapseAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 33.6s 1 normal forwards;
          animation: empTypeExpandAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 32.8s 1 normal forwards, empTypeCollapseAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 33.6s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimAmount .formAnimField--opsTemplate .formAnimField__label {
  -webkit-animation: formAnimFieldLabel 0.2s linear 33.6s 1 normal forwards;
       -o-animation: formAnimFieldLabel 0.2s linear 33.6s 1 normal forwards;
          animation: formAnimFieldLabel 0.2s linear 33.6s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimAmount .formAnimField--opsTemplate .formAnimField__value {
  opacity: 0;
  max-width: 100%;
  -webkit-animation: showAnim 0.2s linear 33.6s 1 normal forwards;
       -o-animation: showAnim 0.2s linear 33.6s 1 normal forwards;
          animation: showAnim 0.2s linear 33.6s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimAmount .formSubmit__btn {
  -webkit-animation: buttonClick 0.2s linear 35.1s 1 normal forwards;
       -o-animation: buttonClick 0.2s linear 35.1s 1 normal forwards;
          animation: buttonClick 0.2s linear 35.1s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimSuspend {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 36.2s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 43.2s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 36.2s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 43.2s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 36.2s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 43.2s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimSuspend .formAnimField--accounts {
  -webkit-animation: backgroundScroll 5s cubic-bezier(0.645, 0.045, 0.905, 1.125) 37s 1 normal forwards;
       -o-animation: backgroundScroll 5s cubic-bezier(0.645, 0.045, 0.905, 1.125) 37s 1 normal forwards;
          animation: backgroundScroll 5s cubic-bezier(0.645, 0.045, 0.905, 1.125) 37s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimWipe {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 43.5s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 47.5s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 43.5s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 47.5s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 43.5s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 47.5s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimWipe:after {
  -webkit-animation: mouseMoveToOpsWipeDone 0.2s cubic-bezier(1, 0, 0, 1) 46s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 46.15s 1 normal forwards, mouseClick1 0.2s cubic-bezier(1, 0, 0, 1) 46.7s 1 normal forwards;
       -o-animation: mouseMoveToOpsWipeDone 0.2s cubic-bezier(1, 0, 0, 1) 46s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 46.15s 1 normal forwards, mouseClick1 0.2s cubic-bezier(1, 0, 0, 1) 46.7s 1 normal forwards;
          animation: mouseMoveToOpsWipeDone 0.2s cubic-bezier(1, 0, 0, 1) 46s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 46.15s 1 normal forwards, mouseClick1 0.2s cubic-bezier(1, 0, 0, 1) 46.7s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimWipe .formSubmit__btn {
  -webkit-animation: buttonClick 0.2s linear 46.7s 1 normal forwards;
       -o-animation: buttonClick 0.2s linear 46.7s 1 normal forwards;
          animation: buttonClick 0.2s linear 46.7s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimWipe .formAnimField .formAnimField__inner {
  -webkit-animation: formAnimField 0.82s linear 45s 1 normal forwards;
       -o-animation: formAnimField 0.82s linear 45s 1 normal forwards;
          animation: formAnimField 0.82s linear 45s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimWipe .formAnimField .formAnimField__label {
  -webkit-animation: formAnimFieldLabel 0.2s linear 45.3s 1 normal forwards;
       -o-animation: formAnimFieldLabel 0.2s linear 45.3s 1 normal forwards;
          animation: formAnimFieldLabel 0.2s linear 45.3s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimWipe .formAnimField .formAnimField__value > span:nth-child(1) {
  -webkit-animation: typing 0.08s linear 45.3s 1 normal forwards;
       -o-animation: typing 0.08s linear 45.3s 1 normal forwards;
          animation: typing 0.08s linear 45.3s 1 normal forwards;
  animation: typing 0.08s linear 45.3s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimWipe .formAnimField .formAnimField__value > span:nth-child(2) {
  -webkit-animation: typing 0.08s linear 45.38s 1 normal forwards;
       -o-animation: typing 0.08s linear 45.38s 1 normal forwards;
          animation: typing 0.08s linear 45.38s 1 normal forwards;
  animation: typing 0.08s linear 45.38s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimWipe .formAnimField .formAnimField__value > span:nth-child(3) {
  -webkit-animation: typing 0.08s linear 45.46s 1 normal forwards;
       -o-animation: typing 0.08s linear 45.46s 1 normal forwards;
          animation: typing 0.08s linear 45.46s 1 normal forwards;
  animation: typing 0.08s linear 45.46s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimWipe .formAnimField .formAnimField__value > span:nth-child(4) {
  -webkit-animation: typing 0.08s linear 45.54s 1 normal forwards;
       -o-animation: typing 0.08s linear 45.54s 1 normal forwards;
          animation: typing 0.08s linear 45.54s 1 normal forwards;
  animation: typing 0.08s linear 45.54s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimPaycheck {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 47.8s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 51.6s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 47.8s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 51.6s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 47.8s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 51.6s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimPaycheck:after {
  -webkit-animation: mouseMoveToOpsPaycheckDone 0.2s cubic-bezier(1, 0, 0, 1) 50.2s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 50.35s 1 normal forwards, mouseClick1 0.2s cubic-bezier(1, 0, 0, 1) 51.1s 1 normal forwards;
       -o-animation: mouseMoveToOpsPaycheckDone 0.2s cubic-bezier(1, 0, 0, 1) 50.2s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 50.35s 1 normal forwards, mouseClick1 0.2s cubic-bezier(1, 0, 0, 1) 51.1s 1 normal forwards;
          animation: mouseMoveToOpsPaycheckDone 0.2s cubic-bezier(1, 0, 0, 1) 50.2s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 50.35s 1 normal forwards, mouseClick1 0.2s cubic-bezier(1, 0, 0, 1) 51.1s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimPaycheck .formSubmit__btn {
  -webkit-animation: buttonClick 0.2s linear 51.1s 1 normal forwards;
       -o-animation: buttonClick 0.2s linear 51.1s 1 normal forwards;
          animation: buttonClick 0.2s linear 51.1s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimReview {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 51.9s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 55.7s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 51.9s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 55.7s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 51.9s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 55.7s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimReview:after {
  -webkit-animation: mouseMoveToOpsReviewDone 0.2s cubic-bezier(1, 0, 0, 1) 54.3s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 54.45s 1 normal forwards, mouseClick1 0.2s cubic-bezier(1, 0, 0, 1) 55.2s 1 normal forwards;
       -o-animation: mouseMoveToOpsReviewDone 0.2s cubic-bezier(1, 0, 0, 1) 54.3s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 54.45s 1 normal forwards, mouseClick1 0.2s cubic-bezier(1, 0, 0, 1) 55.2s 1 normal forwards;
          animation: mouseMoveToOpsReviewDone 0.2s cubic-bezier(1, 0, 0, 1) 54.3s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 54.45s 1 normal forwards, mouseClick1 0.2s cubic-bezier(1, 0, 0, 1) 55.2s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimReview .formSubmit__btn {
  -webkit-animation: buttonClick 0.2s linear 55.2s 1 normal forwards;
       -o-animation: buttonClick 0.2s linear 55.2s 1 normal forwards;
          animation: buttonClick 0.2s linear 55.2s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimTaskA {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 56s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 59.2s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 56s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 59.2s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 56s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 59.2s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimTaskB {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 59.5s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 62.7s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 59.5s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 62.7s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 59.5s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 62.7s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimTaskC {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 63s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 66.2s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 63s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 66.2s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 63s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 66.2s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimTaskD {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 66.5s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 69.7s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 66.5s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 69.7s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 66.5s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 69.7s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimSendServerance {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 70s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 79s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 70s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 79s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 70s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 79s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimSendServerance .formAnimField--sendServerance {
  -webkit-animation: backgroundScroll 2s cubic-bezier(0.645, 0.045, 0.905, 1.125) 72s 1 normal forwards;
       -o-animation: backgroundScroll 2s cubic-bezier(0.645, 0.045, 0.905, 1.125) 72s 1 normal forwards;
          animation: backgroundScroll 2s cubic-bezier(0.645, 0.045, 0.905, 1.125) 72s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimSendServerance .sendServerancePop {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 75s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 75s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 75s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimSendServerance .sendServerancePop:before {
  -webkit-animation: signAnim 1s 75.8s steps(85) forwards;
       -o-animation: signAnim 1s 75.8s steps(85) forwards;
          animation: signAnim 1s 75.8s steps(85) forwards;
}

.ops-animation .opsAnim--animate .opsAnimSendServerance .sendServerancePop:after {
  -webkit-animation: buttonClick 0.2s linear 78.4s 1 normal forwards;
       -o-animation: buttonClick 0.2s linear 78.4s 1 normal forwards;
          animation: buttonClick 0.2s linear 78.4s 1 normal forwards;
}

.ops-animation .opsAnim--animate .opsAnimSendServerance:after {
  -webkit-animation: mouseMoveToSendOfferBtnMobile 0.4s cubic-bezier(1, 0, 0, 1) 77.5s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 77.85s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 78.4s 1 normal forwards;
       -o-animation: mouseMoveToSendOfferBtnMobile 0.4s cubic-bezier(1, 0, 0, 1) 77.5s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 77.85s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 78.4s 1 normal forwards;
          animation: mouseMoveToSendOfferBtnMobile 0.4s cubic-bezier(1, 0, 0, 1) 77.5s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 77.85s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 78.4s 1 normal forwards;
}

@media screen and (min-width: 768px) {
  .ops-animation .opsAnim--animate .opsAnimSendServerance:after {
    -webkit-animation: mouseMoveToSendOfferBtn 0.4s cubic-bezier(1, 0, 0, 1) 77.5s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 77.85s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 78.4s 1 normal forwards;
         -o-animation: mouseMoveToSendOfferBtn 0.4s cubic-bezier(1, 0, 0, 1) 77.5s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 77.85s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 78.4s 1 normal forwards;
            animation: mouseMoveToSendOfferBtn 0.4s cubic-bezier(1, 0, 0, 1) 77.5s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 77.85s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 78.4s 1 normal forwards;
  }
}

.ops-animation .actionList {
  right: calc(50% - 70px);
  top: auto;
  bottom: 20px;
}

.ops-animation .opsAnim {
  position: absolute;
  left: calc(50% - 300px);
  bottom: -150px;
  width: 600px;
  height: 600px;
  -webkit-transform: scale(0.5);
       -o-transform: scale(0.5);
          transform: scale(0.5);
  -webkit-transform-origin: center;
       -o-transform-origin: center;
          transform-origin: center;
}

.ops-animation .opsAnim__primaryBoxTitle {
  font-size: 22px;
}

.ops-animation .opsAnim__primaryBoxTitle--micro {
  font-size: 17px;
}

.ops-animation .opsAnim .opsAnimIntro {
  top: 0;
  right: 0;
  zoom: 1.55;
}

.ops-animation .opsAnim .opsAnimSchedule {
  top: 0;
  right: 0;
  zoom: 1.55;
}

.ops-animation .opsAnim .opsAnimType {
  top: 0;
  right: 0;
  zoom: 1.55;
}

.ops-animation .opsAnim .opsAnimReason {
  top: 0;
  right: 0;
  zoom: 1.55;
}

.ops-animation .opsAnim .opsAnimSeverance {
  top: 0;
  right: 0;
  zoom: 1.55;
}

.ops-animation .opsAnim .opsAnimAmount {
  top: -40px;
  right: 0;
  zoom: 1.55;
  padding: 0 20px 10px;
}

.ops-animation .opsAnim .opsAnimAmount .opsAnim__primaryBoxTitle--leftAlign {
  padding-top: 35px;
}

.ops-animation .opsAnim .opsAnimSuspend {
  top: 0;
  right: 0;
  zoom: 1.55;
  padding: 0 10px 10px;
}

.ops-animation .opsAnim .opsAnimWipe {
  top: 0;
  right: 0;
  zoom: 1.5;
}

.ops-animation .opsAnim .opsAnimPaycheck {
  top: 0;
  right: 0;
  zoom: 1.55;
}

.ops-animation .opsAnim .opsAnimReview {
  top: 0;
  right: 0;
  zoom: 1.37;
}

.ops-animation .opsAnim .opsAnimTaskA {
  top: 0;
  right: 0;
  zoom: 1.5;
}

.ops-animation .opsAnim .opsAnimTaskB {
  top: 150px;
  right: 0;
  zoom: 1.5;
}

.ops-animation .opsAnim .opsAnimTaskC {
  top: 0;
  right: 0;
  zoom: 1.5;
}

.ops-animation .opsAnim .opsAnimTaskD {
  top: 150px;
  right: 0;
  zoom: 1.5;
}

.ops-animation .opsAnim .opsAnimSendServerance {
  top: -60px;
  right: 0;
  zoom: 2;
}

.ops-animation .opsAnim .opsAnimSendServerance .sendServerancePop {
  left: 0;
  bottom: 100px;
}

@media screen and (min-width: 768px) {
  .ops-animation .actionList {
    top: calc(50% - 80px);
    bottom: auto;
    right: 15px;
  }

  .ops-animation .opsAnim {
    position: relative;
    height: auto;
    width: auto;
    left: auto;
    -webkit-transform: scale(0.44) translateY(0px);
         -o-transform: scale(0.44) translateY(0px);
            transform: scale(0.44) translateY(0px);
  }

  .ops-animation .opsAnim__primaryBoxTitle {
    font-size: 16px;
  }

  .ops-animation .opsAnim__primaryBoxTitle--micro {
    font-size: 12px;
  }

  .ops-animation .opsAnim .opsAnimIntro {
    top: calc(50% - 140px);
    right: 263px;
    zoom: normal;
  }

  .ops-animation .opsAnim .opsAnimSchedule {
    top: calc(50% - 140px);
    right: 100px;
    zoom: normal;
  }

  .ops-animation .opsAnim .opsAnimType {
    top: calc(50% - 190px);
    right: 260px;
    zoom: normal;
  }

  .ops-animation .opsAnim .opsAnimReason {
    top: calc(50% - 120px);
    right: 200px;
    zoom: normal;
  }

  .ops-animation .opsAnim .opsAnimSeverance {
    top: calc(50% - 110px);
    right: 150px;
    zoom: normal;
  }

  .ops-animation .opsAnim .opsAnimAmount {
    top: calc(50% - 190px);
    right: 270px;
    zoom: normal;
    padding: 0 30px 10px;
  }

  .ops-animation .opsAnim .opsAnimAmount .opsAnim__primaryBoxTitle--leftAlign {
    padding-top: 30px;
  }

  .ops-animation .opsAnim .opsAnimSuspend {
    top: calc(50% - 140px);
    right: 120px;
    zoom: normal;
    padding: 0 30px 10px;
  }

  .ops-animation .opsAnim .opsAnimWipe {
    top: calc(50% - 160px);
    right: 210px;
    zoom: normal;
  }

  .ops-animation .opsAnim .opsAnimPaycheck {
    top: calc(50% - 120px);
    right: 260px;
    zoom: normal;
  }

  .ops-animation .opsAnim .opsAnimReview {
    top: calc(50% - 160px);
    right: 200px;
    zoom: normal;
  }

  .ops-animation .opsAnim .opsAnimTaskA {
    top: calc(50% - 200px);
    right: 80px;
    zoom: normal;
  }

  .ops-animation .opsAnim .opsAnimTaskB {
    top: calc(50% - 60px);
    right: 280px;
    zoom: normal;
  }

  .ops-animation .opsAnim .opsAnimTaskC {
    top: calc(50% + 80px);
    right: 80px;
    zoom: normal;
  }

  .ops-animation .opsAnim .opsAnimTaskD {
    top: calc(50% - 140px);
    right: 210px;
    zoom: normal;
  }

  .ops-animation .opsAnim .opsAnimSendServerance {
    top: calc(50% - 180px);
    right: 40px;
    zoom: normal;
  }

  .ops-animation .opsAnim .opsAnimSendServerance .sendServerancePop {
    left: -200px;
    bottom: -80px;
  }
}

@media screen and (min-width: 900px) {
  .ops-animation .opsAnim {
    -webkit-transform: scale(0.6) translateY(0px);
         -o-transform: scale(0.6) translateY(0px);
            transform: scale(0.6) translateY(0px);
  }
}

@media screen and (min-width: 1100px) {
  .ops-animation .actionList {
    right: 150px;
  }

  .ops-animation .opsAnim {
    -webkit-transform: scale(0.8) translateY(-160px);
         -o-transform: scale(0.8) translateY(-160px);
            transform: scale(0.8) translateY(-160px);
  }
}

@media screen and (min-width: 1280px) {
  .ops-animation .opsAnim {
    -webkit-transform: scale(1) translateY(-160px);
         -o-transform: scale(1) translateY(-160px);
            transform: scale(1) translateY(-160px);
  }
}

@-webkit-keyframes termListExpandAnim {
  0% {
    height: 0;
  }

  100% {
    height: 160px;
  }
}

@-o-keyframes termListExpandAnim {
  0% {
    height: 0;
  }

  100% {
    height: 160px;
  }
}

@keyframes termListExpandAnim {
  0% {
    height: 0;
  }

  100% {
    height: 160px;
  }
}

@-webkit-keyframes termListCollapseAnim {
  0% {
    height: 160px;
  }

  100% {
    height: 0;
  }
}

@-o-keyframes termListCollapseAnim {
  0% {
    height: 160px;
  }

  100% {
    height: 0;
  }
}

@keyframes termListCollapseAnim {
  0% {
    height: 160px;
  }

  100% {
    height: 0;
  }
}

@-webkit-keyframes mouseMoveToOffboardAction {
  to {
    top: 95px;
    left: 80px;
  }
}

@-o-keyframes mouseMoveToOffboardAction {
  to {
    top: 95px;
    left: 80px;
  }
}

@keyframes mouseMoveToOffboardAction {
  to {
    top: 95px;
    left: 80px;
  }
}

@-webkit-keyframes mouseMoveToOpsDate {
  to {
    top: 82px;
    left: 80px;
  }
}

@-o-keyframes mouseMoveToOpsDate {
  to {
    top: 82px;
    left: 80px;
  }
}

@keyframes mouseMoveToOpsDate {
  to {
    top: 82px;
    left: 80px;
  }
}

@-webkit-keyframes mouseMoveToOpsDatePick {
  from {
    top: 82px;
    left: 80px;
  }

  to {
    top: 202px;
    left: 80px;
  }
}

@-o-keyframes mouseMoveToOpsDatePick {
  from {
    top: 82px;
    left: 80px;
  }

  to {
    top: 202px;
    left: 80px;
  }
}

@keyframes mouseMoveToOpsDatePick {
  from {
    top: 82px;
    left: 80px;
  }

  to {
    top: 202px;
    left: 80px;
  }
}

@-webkit-keyframes mouseMoveToOpsTime {
  from {
    top: 202px;
    left: 80px;
  }

  to {
    top: 82px;
    left: 250px;
  }
}

@-o-keyframes mouseMoveToOpsTime {
  from {
    top: 202px;
    left: 80px;
  }

  to {
    top: 82px;
    left: 250px;
  }
}

@keyframes mouseMoveToOpsTime {
  from {
    top: 202px;
    left: 80px;
  }

  to {
    top: 82px;
    left: 250px;
  }
}

@-webkit-keyframes mouseMoveToOpsTimePick {
  from {
    top: 82px;
    left: 250px;
  }

  to {
    top: 325px;
    left: 300px;
  }
}

@-o-keyframes mouseMoveToOpsTimePick {
  from {
    top: 82px;
    left: 250px;
  }

  to {
    top: 325px;
    left: 300px;
  }
}

@keyframes mouseMoveToOpsTimePick {
  from {
    top: 82px;
    left: 250px;
  }

  to {
    top: 325px;
    left: 300px;
  }
}

@-webkit-keyframes mouseMoveToOpsTypeNo {
  to {
    top: 175px;
    left: 250px;
  }
}

@-o-keyframes mouseMoveToOpsTypeNo {
  to {
    top: 175px;
    left: 250px;
  }
}

@keyframes mouseMoveToOpsTypeNo {
  to {
    top: 175px;
    left: 250px;
  }
}

@-webkit-keyframes mouseMoveToOpsTypeYes {
  from {
    top: 175px;
    left: 250px;
  }

  to {
    top: 175px;
    left: 130px;
  }
}

@-o-keyframes mouseMoveToOpsTypeYes {
  from {
    top: 175px;
    left: 250px;
  }

  to {
    top: 175px;
    left: 130px;
  }
}

@keyframes mouseMoveToOpsTypeYes {
  from {
    top: 175px;
    left: 250px;
  }

  to {
    top: 175px;
    left: 130px;
  }
}

@-webkit-keyframes mouseMoveToOpsTemplate {
  to {
    top: 230px;
    left: 230px;
  }
}

@-o-keyframes mouseMoveToOpsTemplate {
  to {
    top: 230px;
    left: 230px;
  }
}

@keyframes mouseMoveToOpsTemplate {
  to {
    top: 230px;
    left: 230px;
  }
}

@-webkit-keyframes mouseMoveToOpsTemplateDone {
  from {
    top: 230px;
    left: 230px;
  }

  to {
    top: 300px;
    left: 190px;
  }
}

@-o-keyframes mouseMoveToOpsTemplateDone {
  from {
    top: 230px;
    left: 230px;
  }

  to {
    top: 300px;
    left: 190px;
  }
}

@keyframes mouseMoveToOpsTemplateDone {
  from {
    top: 230px;
    left: 230px;
  }

  to {
    top: 300px;
    left: 190px;
  }
}

@-webkit-keyframes mouseMoveToOpsWipeDone {
  to {
    top: 215px;
    left: 190px;
  }
}

@-o-keyframes mouseMoveToOpsWipeDone {
  to {
    top: 215px;
    left: 190px;
  }
}

@keyframes mouseMoveToOpsWipeDone {
  to {
    top: 215px;
    left: 190px;
  }
}

@-webkit-keyframes mouseMoveToOpsPaycheckDone {
  to {
    top: 230px;
    left: 190px;
  }
}

@-o-keyframes mouseMoveToOpsPaycheckDone {
  to {
    top: 230px;
    left: 190px;
  }
}

@keyframes mouseMoveToOpsPaycheckDone {
  to {
    top: 230px;
    left: 190px;
  }
}

@-webkit-keyframes mouseMoveToOpsReviewDone {
  to {
    top: 245px;
    left: 210px;
  }
}

@-o-keyframes mouseMoveToOpsReviewDone {
  to {
    top: 245px;
    left: 210px;
  }
}

@keyframes mouseMoveToOpsReviewDone {
  to {
    top: 245px;
    left: 210px;
  }
}

.accountantPageAnimation .actionBtn {
  position: absolute;
  top: calc(50% + 20px);
  right: 320px;
  z-index: 10;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
}

.accountantPageAnimation .actionBtn:after {
  opacity: 1;
  content: '';
  height: 22px;
  width: 22px;
  position: absolute;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  top: -70px;
  left: 300px;
  z-index: 10;
}

.accountantPageAnimation .actionBtn:after {
  -webkit-animation: mouseMoveToAccountant 0.2s cubic-bezier(1, 0, 0, 1) 2s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 2.18s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 2.5s 1 normal forwards, hideAnim 0.05s 5s 1 normal forwards;
       -o-animation: mouseMoveToAccountant 0.2s cubic-bezier(1, 0, 0, 1) 2s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 2.18s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 2.5s 1 normal forwards, hideAnim 0.05s 5s 1 normal forwards;
          animation: mouseMoveToAccountant 0.2s cubic-bezier(1, 0, 0, 1) 2s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 2.18s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 2.5s 1 normal forwards, hideAnim 0.05s 5s 1 normal forwards;
}

.accountantPageAnimation .actionBtn .ruiBtn {
  -webkit-animation: buttonClick .1s linear 2.5s 1 normal forwards;
       -o-animation: buttonClick .1s linear 2.5s 1 normal forwards;
          animation: buttonClick .1s linear 2.5s 1 normal forwards;
  -webkit-box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.16);
          box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.16);
}

.accountantPageAnimation .actionBtn .ruiBtn:hover {
  -webkit-box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.2);
          box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.2);
}

.accountantPageAnimation .accountantAnim {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  opacity: 1;
  -webkit-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.accountantPageAnimation .accountantAnim__whiteBox {
  background-color: #ffffff;
  -webkit-box-shadow: 0 0 30px 0 rgba(91, 98, 99, 0.4);
          box-shadow: 0 0 30px 0 rgba(91, 98, 99, 0.4);
  -webkit-transform-origin: center;
       -o-transform-origin: center;
          transform-origin: center;
}

.accountantPageAnimation .accountantAnim__whiteBoxTitle {
  font-family: ripplingFontNormal;
  text-align: center;
  padding-top: 30px;
  font-size: 16px;
  color: #000000;
}

.accountantPageAnimation .accountantAnim .accountantAnimDash {
  position: absolute;
  top: calc(50% - 160px);
  right: 75px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
}

.accountantPageAnimation .accountantAnim .accountantAnimDash__back {
  width: 400px;
  height: 211px;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/accountant-animation/accountant_anim_dash_new.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.accountantPageAnimation .accountantAnim .accountantAnimDash__back:after {
  opacity: 1;
  content: '';
  height: 22px;
  width: 22px;
  position: absolute;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  top: 50px;
  left: 420px;
  z-index: 10;
}

.accountantPageAnimation .accountantAnim .accountantAnimDash__back:after {
  zoom: .8;
}

.accountantPageAnimation .accountantAnim .accountantAnimDash__pop {
  position: absolute;
  top: 92.4px;
  left: 100px;
  width: 200px;
  height: 132px;
  -webkit-transform: perspective(1px) scale(0.623);
          transform: perspective(1px) scale(0.623);
  background-image: url("https://cdn.rippling.com/static/marketing/assets/accountant-animation/accountant_anim_dash_pop_new.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.accountantPageAnimation .accountantAnim .accountantAnimDash__pop:before {
  font-size: 7px;
  content: 'RUN PAYROLL';
  position: absolute;
  right: 11px;
  bottom: 11.5px;
  padding: 7.5px 12.5px 6.5px;
  background-color: #22c8e3;
  color: #fff;
  font-family: ripplingFontMedium;
  opacity: 0;
}

.accountantPageAnimation .accountantAnim .accountantAnimPayroll {
  position: absolute;
  top: calc(50% - 120px);
  right: 260px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
}

.accountantPageAnimation .accountantAnim .accountantAnimPayrollList {
  position: absolute;
  top: calc(50% - 280px);
  right: 80px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  padding: 10px;
}

.accountantPageAnimation .accountantAnim .accountantAnimPayrollList .accountantAnim__whiteBoxTitle {
  padding: 15px 0;
}

.accountantPageAnimation .accountantAnim .accountantAnimPayrollList__back {
  position: relative;
  width: 400px;
  height: 190px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/hr-animation/payroll-list-new.png");
}

.accountantPageAnimation .accountantAnim .accountantAnimPayrollList__back:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 28px;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/hr-animation/payroll-list-new.png");
}

.accountantPageAnimation .accountantAnim .accountantAnimPayrollList .ruiBtn {
  position: absolute;
  display: table;
  right: -80px;
  bottom: -30px;
  pointer-events: none;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-box-shadow: 0 2px 10px 0 rgba(91, 98, 99, 0.4);
          box-shadow: 0 2px 10px 0 rgba(91, 98, 99, 0.4);
}

.accountantPageAnimation .accountantAnim .accountantAnimPayrollList:after {
  opacity: 1;
  content: '';
  height: 22px;
  width: 22px;
  position: absolute;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  top: 240px;
  left: 35px;
  z-index: 10;
}

.accountantPageAnimation .accountantAnim .accountantAnimPayrollListItem {
  position: absolute;
  background-color: transparent;
  -webkit-box-shadow: none;
          box-shadow: none;
  top: calc(50% - 80px);
  right: 35px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
}

.accountantPageAnimation .accountantAnim .accountantAnimPayrollListItem__back {
  height: 80px;
  width: 500px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #ffffff;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/hr-animation/payroll-row-new.png");
  -webkit-box-shadow: 0 0 30px 0 rgba(91, 98, 99, 0.4);
          box-shadow: 0 0 30px 0 rgba(91, 98, 99, 0.4);
  position: relative;
}

.accountantPageAnimation .accountantAnim .accountantAnimPayrollListItem__back:after {
  opacity: 1;
  content: '';
  height: 22px;
  width: 22px;
  position: absolute;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  top: 50px;
  left: 30px;
  z-index: 10;
}

.accountantPageAnimation .accountantAnim .accountantAnimPayrollListItem__back:before {
  content: '';
  position: absolute;
  top: 70px;
  right: 20px;
  width: 300px;
  height: 120px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #fff;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/hr-animation/payroll-changehistory.png");
  -webkit-box-shadow: 0 0 30px 0 rgba(91, 98, 99, 0.4);
          box-shadow: 0 0 30px 0 rgba(91, 98, 99, 0.4);
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
}

.accountantPageAnimation .accountantAnim .accountantAnimPayrollSummary {
  position: absolute;
  top: calc(50% - 160px);
  right: 210px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  padding: 25px 30px 35px;
}

.accountantPageAnimation .accountantAnim .accountantAnimPayrollSummary__back {
  width: 400px;
  height: 227px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/hr-animation/payroll-summary.png");
}

.accountantPageAnimation .accountantAnim .accountantAnimPayrollSummary .ruiBtn {
  position: absolute;
  display: table;
  left: calc(50% - 53px);
  bottom: -30px;
  pointer-events: none;
  -webkit-transform: perspective(1px) scale(1);
          transform: perspective(1px) scale(1);
  -webkit-box-shadow: 0 2px 10px 0 rgba(91, 98, 99, 0.4);
          box-shadow: 0 2px 10px 0 rgba(91, 98, 99, 0.4);
}

.accountantPageAnimation .accountantAnim .accountantAnimPayrollSummary:after {
  opacity: 1;
  content: '';
  height: 22px;
  width: 22px;
  position: absolute;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  top: 110px;
  left: 400px;
  z-index: 10;
}

.accountantPageAnimation .accountantAnim .accountantAnimPayrollSuccess {
  position: absolute;
  top: calc(50% - 120px);
  right: 300px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
}

.accountantPageAnimation .accountantAnim .accountantAnimPayrollSuccess__back {
  width: 210px;
  height: 196px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/hr-animation/payroll-success.png");
}

.accountantPageAnimation .accountantAnim .accountantAnimPayrollSuccess .ruiBtn {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  right: -70px;
  bottom: -15px;
  pointer-events: none;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-box-shadow: 0 2px 10px 0 rgba(91, 98, 99, 0.4);
          box-shadow: 0 2px 10px 0 rgba(91, 98, 99, 0.4);
  line-height: 15px;
}

.accountantPageAnimation .accountantAnim .accountantAnimPayrollSuccess .ruiBtn:before {
  content: '\F017';
  font-family: fontIcons;
  font-size: 16px;
  margin-right: 10px;
}

.accountantPageAnimation .accountantAnim .accountantAnimPayrollSuccess:after {
  opacity: 1;
  content: '';
  height: 22px;
  width: 22px;
  position: absolute;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  top: 110px;
  left: 160px;
  z-index: 10;
}

.accountantPageAnimation .accountantAnim .accountantAnimReportVars {
  position: absolute;
  top: calc(50% - 120px);
  right: 100px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  padding: 10px 10px 5px 5px;
}

.accountantPageAnimation .accountantAnim .accountantAnimReportVars__back {
  width: 440px;
  height: 210px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/hr-animation/report-vars-new.png");
}

.accountantPageAnimation .accountantAnim .accountantAnimReportVars__back:after {
  opacity: 1;
  content: '';
  height: 22px;
  width: 22px;
  position: absolute;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  top: 120px;
  left: 400px;
  z-index: 10;
}

.accountantPageAnimation .accountantAnim .accountantAnimReportVars__tag {
  position: absolute;
  background-color: #f5f5f5;
  font-size: 6px;
  font-family: ripplingFontNormal;
  padding: 2px 3px 1px;
  border-radius: 1.5px;
}

.accountantPageAnimation .accountantAnim .accountantAnimReportVars__tag--dept {
  top: 51px;
  right: 140px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
}

.accountantPageAnimation .accountantAnim .accountantAnimReportVars__tag--comp {
  top: 51px;
  right: 64px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
}

.accountantPageAnimation .accountantAnim .accountantAnimReportVars .ruiBtn {
  position: absolute;
  position: absolute;
  right: -50px;
  bottom: 60px;
  -webkit-box-shadow: 0 2px 10px 0 rgba(91, 98, 99, 0.4);
          box-shadow: 0 2px 10px 0 rgba(91, 98, 99, 0.4);
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
}

.accountantPageAnimation .accountantAnim .accountantAnimReportTimeframe {
  position: absolute;
  top: calc(50% - 120px);
  right: 200px;
  width: 350px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  padding: 10px 10px 5px 5px;
}

.accountantPageAnimation .accountantAnim .accountantAnimReportTimeframe:after {
  opacity: 1;
  content: '';
  height: 22px;
  width: 22px;
  position: absolute;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  top: 150px;
  left: 320px;
  z-index: 10;
}

.accountantPageAnimation .accountantAnim .accountantAnimReportTimeframe .formAnimField .radioBox {
  width: 120px;
  height: 140px;
}

.accountantPageAnimation .accountantAnim .accountantAnimReportTimeframe .formAnimField .radioBox__check {
  color: #fff;
}

.accountantPageAnimation .accountantAnim .accountantAnimReportTimeframe .formAnimField .radioBox__title {
  font-size: 12px;
  padding: 0 10px;
}

.accountantPageAnimation .accountantAnim .accountantAnimReportTable {
  position: absolute;
  top: calc(50% - 190px);
  right: 300px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  padding: 8px 8px 0;
}

.accountantPageAnimation .accountantAnim .accountantAnimReportTable__back {
  width: 350px;
  height: 360px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/hr-animation/report-table-new.png");
  position: relative;
}

.accountantPageAnimation .accountantAnim .accountantAnimReportTable__back:before {
  position: absolute;
  content: 'Loading...';
  text-align: center;
  font-size: 20px;
  line-height: 275px;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  opacity: 0;
}

.accountantPageAnimation .accountantAnim .accountantAnimReportTable:after {
  opacity: 1;
  content: '';
  height: 22px;
  width: 22px;
  position: absolute;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  top: 120px;
  left: 330px;
  z-index: 10;
}

.accountantPageAnimation .accountantAnim .accountantAnimReportFilter {
  position: absolute;
  top: calc(50% - 100px);
  right: 100px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
}

.accountantPageAnimation .accountantAnim .accountantAnimReportFilter__back {
  width: 400px;
  height: 225px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/hr-animation/report-filter-options.png");
}

.accountantPageAnimation .accountantAnim .accountantAnimReportFilter__back:before {
  content: '';
  position: absolute;
  top: 179px;
  left: 139px;
  height: 8px;
  width: 8px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/icon-check-blue.svg");
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
}

.accountantPageAnimation .accountantAnim .accountantAnimReportFilter .ruiBtn {
  position: absolute;
  right: 8px;
  bottom: 8px;
  zoom: 0.5;
}

.accountantPageAnimation .accountantAnim .accountantAnimReportFilter:after {
  opacity: 1;
  content: '';
  height: 22px;
  width: 22px;
  position: absolute;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  top: 150px;
  left: 350px;
  z-index: 10;
}

.accountantPageAnimation .accountantAnim .accountantAnimReportShare {
  position: absolute;
  top: calc(50% - 90px);
  right: 260px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  padding: 8px 8px 0;
}

.accountantPageAnimation .accountantAnim .accountantAnimReportShare .accountantAnim__whiteBoxTitle {
  padding: 15px 0;
}

.accountantPageAnimation .accountantAnim .accountantAnimReportShare__back {
  width: 400px;
  height: 180px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/hr-animation/report-share.png");
}

.accountantPageAnimation .accountantAnim .accountantAnimReportShare__back:after {
  opacity: 1;
  content: '';
  height: 22px;
  width: 22px;
  position: absolute;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  top: 200px;
  left: 380px;
  z-index: 10;
}

.accountantPageAnimation .accountantAnim .accountantAnimReportShare__tag {
  position: absolute;
  background-color: #f5f5f5;
  font-size: 16px;
  font-family: ripplingFontNormal;
  padding: 4px 4px 3px;
  border-radius: 0;
}

.accountantPageAnimation .accountantAnim .accountantAnimReportShare__tag.dept {
  top: 80px;
  left: 25px;
}

.accountantPageAnimation .accountantAnim .accountantAnimReportShare__tag.person {
  top: 80px;
  left: 250px;
}

.accountantPageAnimation .accountantAnim .accountantAnimReportShare__tag.pop {
  opacity: 0;
}

.accountantPageAnimation .accountantAnim .accountantAnimReportShare__tag.typing {
  background-color: transparent;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  white-space: nowrap;
  overflow: hidden;
  color: #000000;
}

.accountantPageAnimation .accountantAnim .accountantAnimReportShare__tag.typing > span {
  color: transparent;
  border-right: .6px solid transparent;
}

.accountantPageAnimation .accountantAnim .accountantAnimReportShare__tag.typing > span:last-child {
  padding-right: 2px;
}

.accountantPageAnimation .accountantAnim .accountantAnimReportShare__deptPop {
  position: absolute;
  top: 115px;
  left: 25px;
  width: 280px;
  height: 0;
  -webkit-box-shadow: 0 2px 10px 0 rgba(91, 98, 99, 0.4);
          box-shadow: 0 2px 10px 0 rgba(91, 98, 99, 0.4);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/hr-animation/report-pop-dept.png");
}

.accountantPageAnimation .accountantAnim .accountantAnimReportShare__personPop {
  position: absolute;
  top: 115px;
  left: 250px;
  width: 280px;
  height: 0;
  -webkit-box-shadow: 0 2px 10px 0 rgba(91, 98, 99, 0.4);
          box-shadow: 0 2px 10px 0 rgba(91, 98, 99, 0.4);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/hr-animation/report-pop-people.png");
}

.accountantPageAnimation .accountantAnim .accountantAnimReportShareSuccess {
  position: absolute;
  top: calc(50% - 50px);
  right: 250px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  width: 210px;
  height: 196px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/hr-animation/report-success.png");
}

.accountantPageAnimation .accountantAnim--animate {
  opacity: 1;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimDash {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 8s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 8s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 8s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimDash__pop {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 4s 1 normal forwards, showHoverShadow 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 4s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 4s 1 normal forwards, showHoverShadow 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 4s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 4s 1 normal forwards, showHoverShadow 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 4s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimDash__pop:before {
  -webkit-animation: showAnim 0.05s cubic-bezier(1, 0, 0, 1) 6.15s 1 normal forwards;
       -o-animation: showAnim 0.05s cubic-bezier(1, 0, 0, 1) 6.15s 1 normal forwards;
          animation: showAnim 0.05s cubic-bezier(1, 0, 0, 1) 6.15s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimDash__back:after {
  -webkit-animation: mouseMoveToAccountantDashCard 0.2s cubic-bezier(1, 0, 0, 1) 3.3s 1 normal forwards, mouseMoveToAccountantDashBtn 0.2s cubic-bezier(1, 0, 0, 1) 6s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 6.15s 1 normal forwards, mouseClick0 0.2s cubic-bezier(1, 0, 0, 1) 7s 1 normal forwards;
       -o-animation: mouseMoveToAccountantDashCard 0.2s cubic-bezier(1, 0, 0, 1) 3.3s 1 normal forwards, mouseMoveToAccountantDashBtn 0.2s cubic-bezier(1, 0, 0, 1) 6s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 6.15s 1 normal forwards, mouseClick0 0.2s cubic-bezier(1, 0, 0, 1) 7s 1 normal forwards;
          animation: mouseMoveToAccountantDashCard 0.2s cubic-bezier(1, 0, 0, 1) 3.3s 1 normal forwards, mouseMoveToAccountantDashBtn 0.2s cubic-bezier(1, 0, 0, 1) 6s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 6.15s 1 normal forwards, mouseClick0 0.2s cubic-bezier(1, 0, 0, 1) 7s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimPayroll {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 8.3s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 21.3s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 8.3s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 21.3s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 8.3s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 21.3s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimPayroll .appProgress__progress:before {
  -webkit-animation: progressBarAnim 10s cubic-bezier(1, 0, 0, 1) 8.5s 1 normal forwards;
       -o-animation: progressBarAnim 10s cubic-bezier(1, 0, 0, 1) 8.5s 1 normal forwards;
          animation: progressBarAnim 10s cubic-bezier(1, 0, 0, 1) 8.5s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimPayroll .appProgress__progress > span:nth-child(1) {
  -webkit-animation: showAnim 0.05s cubic-bezier(1, 0, 0, 1) 8.3s 1 normal forwards, hideAnim 0.05s cubic-bezier(1, 0, 0, 1) 10.3s 1 normal forwards;
       -o-animation: showAnim 0.05s cubic-bezier(1, 0, 0, 1) 8.3s 1 normal forwards, hideAnim 0.05s cubic-bezier(1, 0, 0, 1) 10.3s 1 normal forwards;
          animation: showAnim 0.05s cubic-bezier(1, 0, 0, 1) 8.3s 1 normal forwards, hideAnim 0.05s cubic-bezier(1, 0, 0, 1) 10.3s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimPayroll .appProgress__progress > span:nth-child(2) {
  -webkit-animation: showAnim 0.05s cubic-bezier(1, 0, 0, 1) 10.3s 1 normal forwards, hideAnim 0.05s cubic-bezier(1, 0, 0, 1) 12.3s 1 normal forwards;
       -o-animation: showAnim 0.05s cubic-bezier(1, 0, 0, 1) 10.3s 1 normal forwards, hideAnim 0.05s cubic-bezier(1, 0, 0, 1) 12.3s 1 normal forwards;
          animation: showAnim 0.05s cubic-bezier(1, 0, 0, 1) 10.3s 1 normal forwards, hideAnim 0.05s cubic-bezier(1, 0, 0, 1) 12.3s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimPayroll .appProgress__progress > span:nth-child(3) {
  -webkit-animation: showAnim 0.05s cubic-bezier(1, 0, 0, 1) 12.3s 1 normal forwards, hideAnim 0.05s cubic-bezier(1, 0, 0, 1) 14.3s 1 normal forwards;
       -o-animation: showAnim 0.05s cubic-bezier(1, 0, 0, 1) 12.3s 1 normal forwards, hideAnim 0.05s cubic-bezier(1, 0, 0, 1) 14.3s 1 normal forwards;
          animation: showAnim 0.05s cubic-bezier(1, 0, 0, 1) 12.3s 1 normal forwards, hideAnim 0.05s cubic-bezier(1, 0, 0, 1) 14.3s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimPayroll .appProgress__progress > span:nth-child(4) {
  -webkit-animation: showAnim 0.05s cubic-bezier(1, 0, 0, 1) 14.3s 1 normal forwards, hideAnim 0.05s cubic-bezier(1, 0, 0, 1) 16.3s 1 normal forwards;
       -o-animation: showAnim 0.05s cubic-bezier(1, 0, 0, 1) 14.3s 1 normal forwards, hideAnim 0.05s cubic-bezier(1, 0, 0, 1) 16.3s 1 normal forwards;
          animation: showAnim 0.05s cubic-bezier(1, 0, 0, 1) 14.3s 1 normal forwards, hideAnim 0.05s cubic-bezier(1, 0, 0, 1) 16.3s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimPayroll .appProgress__progress > span:nth-child(5) {
  -webkit-animation: showAnim 0.05s cubic-bezier(1, 0, 0, 1) 16.3s 1 normal forwards, hideAnim 0.05s cubic-bezier(1, 0, 0, 1) 18.3s 1 normal forwards;
       -o-animation: showAnim 0.05s cubic-bezier(1, 0, 0, 1) 16.3s 1 normal forwards, hideAnim 0.05s cubic-bezier(1, 0, 0, 1) 18.3s 1 normal forwards;
          animation: showAnim 0.05s cubic-bezier(1, 0, 0, 1) 16.3s 1 normal forwards, hideAnim 0.05s cubic-bezier(1, 0, 0, 1) 18.3s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimPayroll .appProgress__progress > span:nth-child(6) {
  -webkit-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 18.5s 1 normal forwards;
       -o-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 18.5s 1 normal forwards;
          animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 18.5s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimPayroll .appProgress__listItem:nth-child(1) {
  -webkit-animation: showHoverColorBlack 0.2s cubic-bezier(1, 0, 0, 1) 10.3s 1 normal forwards;
       -o-animation: showHoverColorBlack 0.2s cubic-bezier(1, 0, 0, 1) 10.3s 1 normal forwards;
          animation: showHoverColorBlack 0.2s cubic-bezier(1, 0, 0, 1) 10.3s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimPayroll .appProgress__listItem:nth-child(1):after {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 10.3s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 10.3s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 10.3s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimPayroll .appProgress__listItem:nth-child(2) {
  -webkit-animation: showHoverColorBlack 0.2s cubic-bezier(1, 0, 0, 1) 12.3s 1 normal forwards;
       -o-animation: showHoverColorBlack 0.2s cubic-bezier(1, 0, 0, 1) 12.3s 1 normal forwards;
          animation: showHoverColorBlack 0.2s cubic-bezier(1, 0, 0, 1) 12.3s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimPayroll .appProgress__listItem:nth-child(2):after {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 12.3s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 12.3s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 12.3s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimPayroll .appProgress__listItem:nth-child(3) {
  -webkit-animation: showHoverColorBlack 0.2s cubic-bezier(1, 0, 0, 1) 14.3s 1 normal forwards;
       -o-animation: showHoverColorBlack 0.2s cubic-bezier(1, 0, 0, 1) 14.3s 1 normal forwards;
          animation: showHoverColorBlack 0.2s cubic-bezier(1, 0, 0, 1) 14.3s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimPayroll .appProgress__listItem:nth-child(3):after {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 14.3s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 14.3s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 14.3s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimPayroll .appProgress__listItem:nth-child(4) {
  -webkit-animation: showHoverColorBlack 0.2s cubic-bezier(1, 0, 0, 1) 16.3s 1 normal forwards;
       -o-animation: showHoverColorBlack 0.2s cubic-bezier(1, 0, 0, 1) 16.3s 1 normal forwards;
          animation: showHoverColorBlack 0.2s cubic-bezier(1, 0, 0, 1) 16.3s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimPayroll .appProgress__listItem:nth-child(4):after {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 16.3s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 16.3s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 16.3s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimPayroll .appProgress__listItem:nth-child(5) {
  -webkit-animation: showHoverColorBlack 0.2s cubic-bezier(1, 0, 0, 1) 18.3s 1 normal forwards;
       -o-animation: showHoverColorBlack 0.2s cubic-bezier(1, 0, 0, 1) 18.3s 1 normal forwards;
          animation: showHoverColorBlack 0.2s cubic-bezier(1, 0, 0, 1) 18.3s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimPayroll .appProgress__listItem:nth-child(5):after {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 18.3s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 18.3s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 18.3s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimPayrollList {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 21.6s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 33.4s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 21.6s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 33.4s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 21.6s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 33.4s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimPayrollList__back {
  -webkit-animation: backgroundScrollPayrollList 1s cubic-bezier(0.645, 0.045, 0.905, 1.125) 22.4s 1 normal forwards, backgroundScrollPayrollListFinal 0.5s cubic-bezier(0.645, 0.045, 0.905, 1.125) 29.9s 1 normal forwards;
       -o-animation: backgroundScrollPayrollList 1s cubic-bezier(0.645, 0.045, 0.905, 1.125) 22.4s 1 normal forwards, backgroundScrollPayrollListFinal 0.5s cubic-bezier(0.645, 0.045, 0.905, 1.125) 29.9s 1 normal forwards;
          animation: backgroundScrollPayrollList 1s cubic-bezier(0.645, 0.045, 0.905, 1.125) 22.4s 1 normal forwards, backgroundScrollPayrollListFinal 0.5s cubic-bezier(0.645, 0.045, 0.905, 1.125) 29.9s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimPayrollList .ruiBtn {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 30.4s 1 normal forwards, buttonClick 0.2s linear 31.4s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 30.4s 1 normal forwards, buttonClick 0.2s linear 31.4s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 30.4s 1 normal forwards, buttonClick 0.2s linear 31.4s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimPayrollList:after {
  -webkit-animation: mouseMoveToPayrollPreviewBtn 0.2s cubic-bezier(1, 0, 0, 1) 30.9s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 31.05s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 31.4s 1 normal forwards;
       -o-animation: mouseMoveToPayrollPreviewBtn 0.2s cubic-bezier(1, 0, 0, 1) 30.9s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 31.05s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 31.4s 1 normal forwards;
          animation: mouseMoveToPayrollPreviewBtn 0.2s cubic-bezier(1, 0, 0, 1) 30.9s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 31.05s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 31.4s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimPayrollListItem {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 24.9s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 29.4s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 24.9s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 29.4s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 24.9s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 29.4s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimPayrollListItem__back:before {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 26.5s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 26.5s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 26.5s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimPayrollListItem__back:after {
  -webkit-animation: mouseMoveToPayrollNotes 0.2s cubic-bezier(1, 0, 0, 1) 25.7s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 25.8s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 26.4s 1 normal forwards;
       -o-animation: mouseMoveToPayrollNotes 0.2s cubic-bezier(1, 0, 0, 1) 25.7s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 25.8s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 26.4s 1 normal forwards;
          animation: mouseMoveToPayrollNotes 0.2s cubic-bezier(1, 0, 0, 1) 25.7s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 25.8s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 26.4s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimPayrollSummary {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 33.7s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 36.7s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 33.7s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 36.7s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 33.7s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 36.7s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimPayrollSummary .ruiBtn {
  -webkit-animation: buttonClick 0.2s linear 35.7s 1 normal forwards;
       -o-animation: buttonClick 0.2s linear 35.7s 1 normal forwards;
          animation: buttonClick 0.2s linear 35.7s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimPayrollSummary:after {
  -webkit-animation: mouseMoveToPayrollSummaryBtn 0.2s cubic-bezier(1, 0, 0, 1) 34.7s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 34.85s 1 normal forwards, mouseClick0 0.2s cubic-bezier(1, 0, 0, 1) 35.7s 1 normal forwards;
       -o-animation: mouseMoveToPayrollSummaryBtn 0.2s cubic-bezier(1, 0, 0, 1) 34.7s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 34.85s 1 normal forwards, mouseClick0 0.2s cubic-bezier(1, 0, 0, 1) 35.7s 1 normal forwards;
          animation: mouseMoveToPayrollSummaryBtn 0.2s cubic-bezier(1, 0, 0, 1) 34.7s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 34.85s 1 normal forwards, mouseClick0 0.2s cubic-bezier(1, 0, 0, 1) 35.7s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimPayrollSuccess {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 37s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 40s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 37s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 40s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 37s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 40s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimPayrollSuccess .ruiBtn {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 38.5s 1 normal forwards, buttonClick 0.2s linear 39.5s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 38.5s 1 normal forwards, buttonClick 0.2s linear 39.5s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 38.5s 1 normal forwards, buttonClick 0.2s linear 39.5s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimPayrollSuccess:after {
  -webkit-animation: mouseMoveToPayrollSuccessBtn 0.2s cubic-bezier(1, 0, 0, 1) 39s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 39.15s 1 normal forwards, mouseClick0 0.2s cubic-bezier(1, 0, 0, 1) 39.5s 1 normal forwards;
       -o-animation: mouseMoveToPayrollSuccessBtn 0.2s cubic-bezier(1, 0, 0, 1) 39s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 39.15s 1 normal forwards, mouseClick0 0.2s cubic-bezier(1, 0, 0, 1) 39.5s 1 normal forwards;
          animation: mouseMoveToPayrollSuccessBtn 0.2s cubic-bezier(1, 0, 0, 1) 39s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 39.15s 1 normal forwards, mouseClick0 0.2s cubic-bezier(1, 0, 0, 1) 39.5s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimReportVars {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 40.3s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 46.8s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 40.3s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 46.8s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 40.3s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 46.8s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimReportVars__back:after {
  -webkit-animation: mouseMoveToReportVarsDept 0.2s cubic-bezier(1, 0, 0, 1) 41.8s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 41.95s 1 normal forwards, mouseClick0 0.2s cubic-bezier(1, 0, 0, 1) 42.3s 1 normal forwards, mouseMoveToReportVarsComp 0.2s cubic-bezier(1, 0, 0, 1) 43.3s 1 normal forwards, mouseClick1 0.2s cubic-bezier(1, 0, 0, 1) 43.8s 1 normal forwards, mouseMoveToReportVarsSubmit 0.2s cubic-bezier(1, 0, 0, 1) 45.3s 1 normal forwards, mouseToPointer0 0s cubic-bezier(1, 0, 0, 1) 45.35s 1 normal forwards, mouseToCursor1 0s cubic-bezier(1, 0, 0, 1) 45.45s 1 normal forwards, mouseClick1 0.2s cubic-bezier(1, 0, 0, 1) 45.8s 1 normal forwards;
       -o-animation: mouseMoveToReportVarsDept 0.2s cubic-bezier(1, 0, 0, 1) 41.8s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 41.95s 1 normal forwards, mouseClick0 0.2s cubic-bezier(1, 0, 0, 1) 42.3s 1 normal forwards, mouseMoveToReportVarsComp 0.2s cubic-bezier(1, 0, 0, 1) 43.3s 1 normal forwards, mouseClick1 0.2s cubic-bezier(1, 0, 0, 1) 43.8s 1 normal forwards, mouseMoveToReportVarsSubmit 0.2s cubic-bezier(1, 0, 0, 1) 45.3s 1 normal forwards, mouseToPointer0 0s cubic-bezier(1, 0, 0, 1) 45.35s 1 normal forwards, mouseToCursor1 0s cubic-bezier(1, 0, 0, 1) 45.45s 1 normal forwards, mouseClick1 0.2s cubic-bezier(1, 0, 0, 1) 45.8s 1 normal forwards;
          animation: mouseMoveToReportVarsDept 0.2s cubic-bezier(1, 0, 0, 1) 41.8s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 41.95s 1 normal forwards, mouseClick0 0.2s cubic-bezier(1, 0, 0, 1) 42.3s 1 normal forwards, mouseMoveToReportVarsComp 0.2s cubic-bezier(1, 0, 0, 1) 43.3s 1 normal forwards, mouseClick1 0.2s cubic-bezier(1, 0, 0, 1) 43.8s 1 normal forwards, mouseMoveToReportVarsSubmit 0.2s cubic-bezier(1, 0, 0, 1) 45.3s 1 normal forwards, mouseToPointer0 0s cubic-bezier(1, 0, 0, 1) 45.35s 1 normal forwards, mouseToCursor1 0s cubic-bezier(1, 0, 0, 1) 45.45s 1 normal forwards, mouseClick1 0.2s cubic-bezier(1, 0, 0, 1) 45.8s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimReportVars__tag--dept {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 42.5s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 42.5s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 42.5s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimReportVars__tag--comp {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 44s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 44s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 44s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimReportVars .ruiBtn {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 44.8s 1 normal forwards, buttonClick 0.2s linear 45.8s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 44.8s 1 normal forwards, buttonClick 0.2s linear 45.8s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 44.8s 1 normal forwards, buttonClick 0.2s linear 45.8s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimReportTimeframe {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 47.1s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 49.6s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 47.1s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 49.6s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 47.1s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 49.6s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimReportTimeframe:after {
  -webkit-animation: mouseMoveToReportTimeframeNo 0.2s cubic-bezier(1, 0, 0, 1) 47.5s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 47.5s 1 normal forwards, mouseMoveToReportTimeframeYes 0.4s cubic-bezier(1, 0, 0, 1) 47.7s 1 normal forwards, mouseToPointer0 0s cubic-bezier(1, 0, 0, 1) 47.8s 1 normal forwards, mouseToCursor1 0s cubic-bezier(1, 0, 0, 1) 47.9s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 48.6s 1 normal forwards;
       -o-animation: mouseMoveToReportTimeframeNo 0.2s cubic-bezier(1, 0, 0, 1) 47.5s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 47.5s 1 normal forwards, mouseMoveToReportTimeframeYes 0.4s cubic-bezier(1, 0, 0, 1) 47.7s 1 normal forwards, mouseToPointer0 0s cubic-bezier(1, 0, 0, 1) 47.8s 1 normal forwards, mouseToCursor1 0s cubic-bezier(1, 0, 0, 1) 47.9s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 48.6s 1 normal forwards;
          animation: mouseMoveToReportTimeframeNo 0.2s cubic-bezier(1, 0, 0, 1) 47.5s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 47.5s 1 normal forwards, mouseMoveToReportTimeframeYes 0.4s cubic-bezier(1, 0, 0, 1) 47.7s 1 normal forwards, mouseToPointer0 0s cubic-bezier(1, 0, 0, 1) 47.8s 1 normal forwards, mouseToCursor1 0s cubic-bezier(1, 0, 0, 1) 47.9s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 48.6s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimReportTimeframe .formAnimField .radioBox:first-child {
  -webkit-animation: transformUp 0.1s cubic-bezier(1, 0, 0, 1) 48s 1 normal forwards, showHoverBlue 0.1s cubic-bezier(1, 0, 0, 1) 48.4s 1 normal forwards, showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 48.4s 1 normal forwards;
       -o-animation: transformUp 0.1s cubic-bezier(1, 0, 0, 1) 48s 1 normal forwards, showHoverBlue 0.1s cubic-bezier(1, 0, 0, 1) 48.4s 1 normal forwards, showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 48.4s 1 normal forwards;
          animation: transformUp 0.1s cubic-bezier(1, 0, 0, 1) 48s 1 normal forwards, showHoverBlue 0.1s cubic-bezier(1, 0, 0, 1) 48.4s 1 normal forwards, showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 48.4s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimReportTimeframe .formAnimField .radioBox:first-child .radioBox__title {
  -webkit-animation: showHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 48s 1 normal forwards, showHoverLightColor 0.1s cubic-bezier(1, 0, 0, 1) 48.4s 1 normal forwards;
       -o-animation: showHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 48s 1 normal forwards, showHoverLightColor 0.1s cubic-bezier(1, 0, 0, 1) 48.4s 1 normal forwards;
          animation: showHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 48s 1 normal forwards, showHoverLightColor 0.1s cubic-bezier(1, 0, 0, 1) 48.4s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimReportTimeframe .formAnimField .radioBox:first-child .radioBox__check {
  -webkit-animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 48s 1 normal forwards, showHoverColorBlue 0.1s cubic-bezier(1, 0, 0, 1) 48.4s 1 normal forwards;
       -o-animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 48s 1 normal forwards, showHoverColorBlue 0.1s cubic-bezier(1, 0, 0, 1) 48.4s 1 normal forwards;
          animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 48s 1 normal forwards, showHoverColorBlue 0.1s cubic-bezier(1, 0, 0, 1) 48.4s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimReportTimeframe .formAnimField .radioBox:first-child:after {
  -webkit-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 48s 1 normal forwards;
       -o-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 48s 1 normal forwards;
          animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 48s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimReportTimeframe .formAnimField .radioBox:last-child {
  -webkit-animation: transformUp 0.1s cubic-bezier(1, 0, 0, 1) 47.6s 1 normal forwards, transformDown 0.1s cubic-bezier(1, 0, 0, 1) 47.8s 1 normal forwards;
       -o-animation: transformUp 0.1s cubic-bezier(1, 0, 0, 1) 47.6s 1 normal forwards, transformDown 0.1s cubic-bezier(1, 0, 0, 1) 47.8s 1 normal forwards;
          animation: transformUp 0.1s cubic-bezier(1, 0, 0, 1) 47.6s 1 normal forwards, transformDown 0.1s cubic-bezier(1, 0, 0, 1) 47.8s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimReportTimeframe .formAnimField .radioBox:last-child .radioBox__title {
  -webkit-animation: showHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 47.6s 1 normal forwards, hideHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 47.8s 1 normal forwards;
       -o-animation: showHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 47.6s 1 normal forwards, hideHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 47.8s 1 normal forwards;
          animation: showHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 47.6s 1 normal forwards, hideHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 47.8s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimReportTimeframe .formAnimField .radioBox:last-child .radioBox__check {
  -webkit-animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 47.6s 1 normal forwards, hideHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 47.8s 1 normal forwards;
       -o-animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 47.6s 1 normal forwards, hideHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 47.8s 1 normal forwards;
          animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 47.6s 1 normal forwards, hideHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 47.8s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimReportTimeframe .formAnimField .radioBox:last-child:after {
  -webkit-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 47.6s 1 normal forwards, hideAnim 0.1s cubic-bezier(1, 0, 0, 1) 47.8s 1 normal forwards;
       -o-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 47.6s 1 normal forwards, hideAnim 0.1s cubic-bezier(1, 0, 0, 1) 47.8s 1 normal forwards;
          animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 47.6s 1 normal forwards, hideAnim 0.1s cubic-bezier(1, 0, 0, 1) 47.8s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimReportTable {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 49.9s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 49.9s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 49.9s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimReportTable__back {
  -webkit-animation: backgroundChangeReportsTable 0s linear 58s 1 normal forwards;
       -o-animation: backgroundChangeReportsTable 0s linear 58s 1 normal forwards;
          animation: backgroundChangeReportsTable 0s linear 58s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimReportTable__back:before {
  -webkit-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 57.5s 1 normal forwards, hideAnim 0.1s cubic-bezier(1, 0, 0, 1) 58.5s 1 normal forwards;
       -o-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 57.5s 1 normal forwards, hideAnim 0.1s cubic-bezier(1, 0, 0, 1) 58.5s 1 normal forwards;
          animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 57.5s 1 normal forwards, hideAnim 0.1s cubic-bezier(1, 0, 0, 1) 58.5s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimReportTable:after {
  -webkit-animation: mouseMoveToReportFilter 0.3s cubic-bezier(1, 0, 0, 1) 51.4s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 51.65s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 51.7s 1 normal forwards, hideAnim 0.1s cubic-bezier(1, 0, 0, 1) 52.2s 1 normal forwards, mouseToPointer0 0s cubic-bezier(1, 0, 0, 1) 52.2s 1 normal forwards, showAnim 0.1s cubic-bezier(1, 0, 0, 1) 59.5s 1 normal forwards, mouseMoveToReportShareBtn 0.3s cubic-bezier(1, 0, 0, 1) 61s 1 normal forwards, mouseToCursor1 0s cubic-bezier(1, 0, 0, 1) 61.15s 1 normal forwards, mouseClick1 0.1s cubic-bezier(1, 0, 0, 1) 61.8s 1 normal forwards, hideAnim 0.1s cubic-bezier(1, 0, 0, 1) 62.8s 1 normal forwards;
       -o-animation: mouseMoveToReportFilter 0.3s cubic-bezier(1, 0, 0, 1) 51.4s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 51.65s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 51.7s 1 normal forwards, hideAnim 0.1s cubic-bezier(1, 0, 0, 1) 52.2s 1 normal forwards, mouseToPointer0 0s cubic-bezier(1, 0, 0, 1) 52.2s 1 normal forwards, showAnim 0.1s cubic-bezier(1, 0, 0, 1) 59.5s 1 normal forwards, mouseMoveToReportShareBtn 0.3s cubic-bezier(1, 0, 0, 1) 61s 1 normal forwards, mouseToCursor1 0s cubic-bezier(1, 0, 0, 1) 61.15s 1 normal forwards, mouseClick1 0.1s cubic-bezier(1, 0, 0, 1) 61.8s 1 normal forwards, hideAnim 0.1s cubic-bezier(1, 0, 0, 1) 62.8s 1 normal forwards;
          animation: mouseMoveToReportFilter 0.3s cubic-bezier(1, 0, 0, 1) 51.4s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 51.65s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 51.7s 1 normal forwards, hideAnim 0.1s cubic-bezier(1, 0, 0, 1) 52.2s 1 normal forwards, mouseToPointer0 0s cubic-bezier(1, 0, 0, 1) 52.2s 1 normal forwards, showAnim 0.1s cubic-bezier(1, 0, 0, 1) 59.5s 1 normal forwards, mouseMoveToReportShareBtn 0.3s cubic-bezier(1, 0, 0, 1) 61s 1 normal forwards, mouseToCursor1 0s cubic-bezier(1, 0, 0, 1) 61.15s 1 normal forwards, mouseClick1 0.1s cubic-bezier(1, 0, 0, 1) 61.8s 1 normal forwards, hideAnim 0.1s cubic-bezier(1, 0, 0, 1) 62.8s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimReportFilter {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 52.2s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 57s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 52.2s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 57s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 52.2s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 57s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimReportFilter:after {
  -webkit-animation: mouseMoveToReportFilterOption 0.2s cubic-bezier(1, 0, 0, 1) 53.4s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 53.55s 1 normal forwards, mouseClick0 0.2s cubic-bezier(1, 0, 0, 1) 54.2s 1 normal forwards, mouseMoveToReportFilterApply 0.2s cubic-bezier(1, 0, 0, 1) 55.2s 1 normal forwards, mouseToPointer0 0s cubic-bezier(1, 0, 0, 1) 55.25s 1 normal forwards, mouseToCursor1 0s cubic-bezier(1, 0, 0, 1) 55.35s 1 normal forwards, mouseClick1 0.2s cubic-bezier(1, 0, 0, 1) 56.2s 1 normal forwards;
       -o-animation: mouseMoveToReportFilterOption 0.2s cubic-bezier(1, 0, 0, 1) 53.4s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 53.55s 1 normal forwards, mouseClick0 0.2s cubic-bezier(1, 0, 0, 1) 54.2s 1 normal forwards, mouseMoveToReportFilterApply 0.2s cubic-bezier(1, 0, 0, 1) 55.2s 1 normal forwards, mouseToPointer0 0s cubic-bezier(1, 0, 0, 1) 55.25s 1 normal forwards, mouseToCursor1 0s cubic-bezier(1, 0, 0, 1) 55.35s 1 normal forwards, mouseClick1 0.2s cubic-bezier(1, 0, 0, 1) 56.2s 1 normal forwards;
          animation: mouseMoveToReportFilterOption 0.2s cubic-bezier(1, 0, 0, 1) 53.4s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 53.55s 1 normal forwards, mouseClick0 0.2s cubic-bezier(1, 0, 0, 1) 54.2s 1 normal forwards, mouseMoveToReportFilterApply 0.2s cubic-bezier(1, 0, 0, 1) 55.2s 1 normal forwards, mouseToPointer0 0s cubic-bezier(1, 0, 0, 1) 55.25s 1 normal forwards, mouseToCursor1 0s cubic-bezier(1, 0, 0, 1) 55.35s 1 normal forwards, mouseClick1 0.2s cubic-bezier(1, 0, 0, 1) 56.2s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimReportFilter__back:before {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 54.3s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 54.3s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 54.3s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimReportFilter .ruiBtn {
  -webkit-animation: buttonClick 0.2s linear 56.2s 1 normal forwards;
       -o-animation: buttonClick 0.2s linear 56.2s 1 normal forwards;
          animation: buttonClick 0.2s linear 56.2s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimReportShare {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 63.3s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 70.3s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 63.3s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 70.3s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 63.3s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 70.3s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimReportShare__back:after {
  -webkit-animation: mouseMoveToReportShare 0.2s cubic-bezier(1, 0, 0, 1) 68.8s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 68.95s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 69.5s 1 normal forwards;
       -o-animation: mouseMoveToReportShare 0.2s cubic-bezier(1, 0, 0, 1) 68.8s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 68.95s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 69.5s 1 normal forwards;
          animation: mouseMoveToReportShare 0.2s cubic-bezier(1, 0, 0, 1) 68.8s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 68.95s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 69.5s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimReportShare__deptPop {
  -webkit-animation: reportSharePopExpandAnim 0.2s cubic-bezier(1, 0, 0, 1) 65.1s 1 normal forwards, reportSharePopCollapseAnim 0.2s cubic-bezier(1, 0, 0, 1) 66.1s 1 normal forwards;
       -o-animation: reportSharePopExpandAnim 0.2s cubic-bezier(1, 0, 0, 1) 65.1s 1 normal forwards, reportSharePopCollapseAnim 0.2s cubic-bezier(1, 0, 0, 1) 66.1s 1 normal forwards;
          animation: reportSharePopExpandAnim 0.2s cubic-bezier(1, 0, 0, 1) 65.1s 1 normal forwards, reportSharePopCollapseAnim 0.2s cubic-bezier(1, 0, 0, 1) 66.1s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimReportShare__personPop {
  -webkit-animation: reportSharePopExpandAnim 0.2s cubic-bezier(1, 0, 0, 1) 67.1s 1 normal forwards, reportSharePopCollapseAnim 0.2s cubic-bezier(1, 0, 0, 1) 68.1s 1 normal forwards;
       -o-animation: reportSharePopExpandAnim 0.2s cubic-bezier(1, 0, 0, 1) 67.1s 1 normal forwards, reportSharePopCollapseAnim 0.2s cubic-bezier(1, 0, 0, 1) 68.1s 1 normal forwards;
          animation: reportSharePopExpandAnim 0.2s cubic-bezier(1, 0, 0, 1) 67.1s 1 normal forwards, reportSharePopCollapseAnim 0.2s cubic-bezier(1, 0, 0, 1) 68.1s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimReportShare__tag.dept.pop {
  -webkit-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 66.1s 1 normal forwards;
       -o-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 66.1s 1 normal forwards;
          animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 66.1s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimReportShare__tag.dept.typing > span:nth-child(1) {
  -webkit-animation: typing 0.08s linear 64.6s 1 normal forwards;
       -o-animation: typing 0.08s linear 64.6s 1 normal forwards;
          animation: typing 0.08s linear 64.6s 1 normal forwards;
  animation: typing 0.08s linear 64.6s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimReportShare__tag.dept.typing > span:nth-child(2) {
  -webkit-animation: typing 0.08s linear 64.68s 1 normal forwards;
       -o-animation: typing 0.08s linear 64.68s 1 normal forwards;
          animation: typing 0.08s linear 64.68s 1 normal forwards;
  animation: typing 0.08s linear 64.68s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimReportShare__tag.dept.typing > span:nth-child(3) {
  -webkit-animation: typing 0.08s linear 64.76s 1 normal forwards;
       -o-animation: typing 0.08s linear 64.76s 1 normal forwards;
          animation: typing 0.08s linear 64.76s 1 normal forwards;
  animation: typing 0.08s linear 64.76s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimReportShare__tag.dept.typing > span:nth-child(4) {
  -webkit-animation: typing 0.08s linear 64.84s 1 normal forwards;
       -o-animation: typing 0.08s linear 64.84s 1 normal forwards;
          animation: typing 0.08s linear 64.84s 1 normal forwards;
  animation: typing 0.08s linear 64.84s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimReportShare__tag.dept.typing > span:nth-child(5) {
  -webkit-animation: typing 0.08s linear 64.92s 1 normal forwards;
       -o-animation: typing 0.08s linear 64.92s 1 normal forwards;
          animation: typing 0.08s linear 64.92s 1 normal forwards;
  animation: typing 0.08s linear 64.92s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimReportShare__tag.person.pop {
  -webkit-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 68.1s 1 normal forwards;
       -o-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 68.1s 1 normal forwards;
          animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 68.1s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimReportShare__tag.person.typing > span:nth-child(1) {
  -webkit-animation: typing 0.08s linear 66.6s 1 normal forwards;
       -o-animation: typing 0.08s linear 66.6s 1 normal forwards;
          animation: typing 0.08s linear 66.6s 1 normal forwards;
  animation: typing 0.08s linear 66.6s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimReportShare__tag.person.typing > span:nth-child(2) {
  -webkit-animation: typing 0.08s linear 66.68s 1 normal forwards;
       -o-animation: typing 0.08s linear 66.68s 1 normal forwards;
          animation: typing 0.08s linear 66.68s 1 normal forwards;
  animation: typing 0.08s linear 66.68s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimReportShare__tag.person.typing > span:nth-child(3) {
  -webkit-animation: typing 0.08s linear 66.76s 1 normal forwards;
       -o-animation: typing 0.08s linear 66.76s 1 normal forwards;
          animation: typing 0.08s linear 66.76s 1 normal forwards;
  animation: typing 0.08s linear 66.76s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimReportShare__tag.person.typing > span:nth-child(4) {
  -webkit-animation: typing 0.08s linear 66.84s 1 normal forwards;
       -o-animation: typing 0.08s linear 66.84s 1 normal forwards;
          animation: typing 0.08s linear 66.84s 1 normal forwards;
  animation: typing 0.08s linear 66.84s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimReportShare__tag.person.typing > span:nth-child(5) {
  -webkit-animation: typing 0.08s linear 66.92s 1 normal forwards;
       -o-animation: typing 0.08s linear 66.92s 1 normal forwards;
          animation: typing 0.08s linear 66.92s 1 normal forwards;
  animation: typing 0.08s linear 66.92s 1 normal forwards;
}

.accountantPageAnimation .accountantAnim--animate .accountantAnimReportShareSuccess {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 71.8s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 71.8s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 71.8s 1 normal forwards;
}

.accountantPageAnimation .actionBtn {
  top: auto;
  bottom: 80px;
  right: calc(50% - 110px);
}

.accountantPageAnimation .accountantAnim {
  position: absolute;
  left: calc(50% - 300px);
  bottom: -200px;
  width: 600px;
  height: 600px;
  -webkit-transform: scale(0.5);
       -o-transform: scale(0.5);
          transform: scale(0.5);
  -webkit-transform-origin: center;
       -o-transform-origin: center;
          transform-origin: center;
}

.accountantPageAnimation .accountantAnim .accountantAnimDash {
  top: 0;
  right: 0;
  zoom: 1.5;
}

.accountantPageAnimation .accountantAnim .accountantAnimPayroll {
  top: 0;
  right: 0;
  zoom: 1.35;
}

.accountantPageAnimation .accountantAnim .accountantAnimPayrollList {
  top: -80px;
  right: 0;
  zoom: 1.42;
}

.accountantPageAnimation .accountantAnim .accountantAnimPayrollListItem {
  top: 135px;
  right: 0;
  zoom: 1.19;
}

.accountantPageAnimation .accountantAnim .accountantAnimPayrollSummary {
  top: 0;
  right: 0;
  zoom: 1.3;
}

.accountantPageAnimation .accountantAnim .accountantAnimPayrollSuccess {
  top: 0;
  right: 80px;
  zoom: 1.5;
}

.accountantPageAnimation .accountantAnim .accountantAnimReportVars {
  top: 0;
  right: 0;
  zoom: 1.35;
}

.accountantPageAnimation .accountantAnim .accountantAnimReportTimeframe {
  top: 0;
  right: 0;
  zoom: 1.7;
}

.accountantPageAnimation .accountantAnim .accountantAnimReportTable {
  top: 0;
  right: 0;
  zoom: 1.7;
}

.accountantPageAnimation .accountantAnim .accountantAnimReportFilter {
  top: 0;
  right: 0;
  zoom: 1.55;
}

.accountantPageAnimation .accountantAnim .accountantAnimReportShare {
  top: 0;
  right: 0;
  zoom: 1.5;
}

.accountantPageAnimation .accountantAnim .accountantAnimReportShareSuccess {
  top: -30px;
  right: 10%;
  zoom: 2.5;
}

@media screen and (min-width: 768px) {
  .accountantPageAnimation .actionBtn {
    bottom: auto;
    top: calc(50% + 80px);
    right: 60px;
  }

  .accountantPageAnimation .accountantAnim {
    position: relative;
    height: auto;
    width: auto;
    left: auto;
    -webkit-transform: scale(0.44) translateY(320px);
         -o-transform: scale(0.44) translateY(320px);
            transform: scale(0.44) translateY(320px);
  }

  .accountantPageAnimation .accountantAnim .accountantAnimDash {
    top: calc(50% - 160px);
    right: 75px;
  }

  .accountantPageAnimation .accountantAnim .accountantAnimPayroll {
    top: calc(50% - 120px);
    right: 260px;
    zoom: normal;
  }

  .accountantPageAnimation .accountantAnim .accountantAnimPayrollList {
    top: calc(50% - 280px);
    right: 80px;
    zoom: normal;
  }

  .accountantPageAnimation .accountantAnim .accountantAnimPayrollListItem {
    top: calc(50% - 80px);
    right: 35px;
    zoom: normal;
  }

  .accountantPageAnimation .accountantAnim .accountantAnimPayrollSummary {
    top: calc(50% - 160px);
    right: 210px;
    zoom: normal;
  }

  .accountantPageAnimation .accountantAnim .accountantAnimPayrollSuccess {
    top: calc(50% - 120px);
    right: 300px;
    zoom: normal;
  }

  .accountantPageAnimation .accountantAnim .accountantAnimReportVars {
    top: calc(50% - 120px);
    right: 100px;
    zoom: normal;
  }

  .accountantPageAnimation .accountantAnim .accountantAnimReportTimeframe {
    top: calc(50% - 190px);
    right: 300px;
    zoom: normal;
  }

  .accountantPageAnimation .accountantAnim .accountantAnimReportTable {
    top: calc(50% - 190px);
    right: 300px;
    zoom: normal;
  }

  .accountantPageAnimation .accountantAnim .accountantAnimReportFilter {
    top: calc(50% - 100px);
    right: 100px;
    zoom: normal;
  }

  .accountantPageAnimation .accountantAnim .accountantAnimReportShare {
    top: calc(50% - 50px);
    right: 260px;
    zoom: normal;
  }

  .accountantPageAnimation .accountantAnim .accountantAnimReportShareSuccess {
    top: calc(50% - 50px);
    right: 250px;
    zoom: normal;
  }
}

@media screen and (min-width: 900px) {
  .accountantPageAnimation .actionBtn {
    top: calc(50% - 100px);
    right: 100px;
  }

  .accountantPageAnimation .accountantAnim {
    -webkit-transform: scale(0.6) translateY(280px);
         -o-transform: scale(0.6) translateY(280px);
            transform: scale(0.6) translateY(280px);
  }
}

@media screen and (min-width: 1100px) {
  .accountantPageAnimation .actionBtn {
    top: calc(50% - 100px);
    right: 320px;
  }

  .accountantPageAnimation .accountantAnim {
    -webkit-transform: scale(0.9) translateY(-200px);
         -o-transform: scale(0.9) translateY(-200px);
            transform: scale(0.9) translateY(-200px);
  }
}

@media screen and (min-width: 1280px) {
  .accountantPageAnimation .accountantAnim {
    -webkit-transform: scale(1) translateY(-200px);
         -o-transform: scale(1) translateY(-200px);
            transform: scale(1) translateY(-200px);
  }
}

@-webkit-keyframes mouseMoveToAccountant {
  to {
    top: 30px;
    left: 90px;
  }
}

@-o-keyframes mouseMoveToAccountant {
  to {
    top: 30px;
    left: 90px;
  }
}

@keyframes mouseMoveToAccountant {
  to {
    top: 30px;
    left: 90px;
  }
}

@-webkit-keyframes mouseMoveToAccountantDashCard {
  to {
    top: 190px;
    left: 300px;
  }
}

@-o-keyframes mouseMoveToAccountantDashCard {
  to {
    top: 190px;
    left: 300px;
  }
}

@keyframes mouseMoveToAccountantDashCard {
  to {
    top: 190px;
    left: 300px;
  }
}

@-webkit-keyframes mouseMoveToAccountantDashBtn {
  from {
    top: 190px;
    left: 300px;
  }

  to {
    top: 255px;
    left: 300px;
  }
}

@-o-keyframes mouseMoveToAccountantDashBtn {
  from {
    top: 190px;
    left: 300px;
  }

  to {
    top: 255px;
    left: 300px;
  }
}

@keyframes mouseMoveToAccountantDashBtn {
  from {
    top: 190px;
    left: 300px;
  }

  to {
    top: 255px;
    left: 300px;
  }
}

.broker-animation .actionList {
  position: absolute;
  top: calc(50% - 60px);
  right: 160px;
  z-index: 10;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
}

.broker-animation .actionList:after {
  opacity: 1;
  content: '';
  height: 22px;
  width: 22px;
  position: absolute;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  top: -80px;
  left: 320px;
  z-index: 10;
}

.broker-animation .actionList__item.existing {
  pointer-events: none;
}

.broker-animation .actionList:after {
  -webkit-animation: mouseMoveToBrokerAction 0.2s cubic-bezier(1, 0, 0, 1) 2.5s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 2.65s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 3s 1 normal forwards, hideAnim 0.1s cubic-bezier(1, 0, 0, 1) 4s 1 normal forwards;
       -o-animation: mouseMoveToBrokerAction 0.2s cubic-bezier(1, 0, 0, 1) 2.5s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 2.65s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 3s 1 normal forwards, hideAnim 0.1s cubic-bezier(1, 0, 0, 1) 4s 1 normal forwards;
          animation: mouseMoveToBrokerAction 0.2s cubic-bezier(1, 0, 0, 1) 2.5s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 2.65s 1 normal forwards, mouseClick0 0.1s cubic-bezier(1, 0, 0, 1) 3s 1 normal forwards, hideAnim 0.1s cubic-bezier(1, 0, 0, 1) 4s 1 normal forwards;
}

.broker-animation .brokerAnim {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  opacity: 0;
  -webkit-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.broker-animation .brokerAnim__primaryBox {
  right: 260px;
  width: 390px;
  min-height: 350px;
  background-color: #ffffff;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_browser_window.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  -webkit-box-shadow: 0 0 30px 0 rgba(91, 98, 99, 0.4);
          box-shadow: 0 0 30px 0 rgba(91, 98, 99, 0.4);
  -webkit-transform-origin: center;
       -o-transform-origin: center;
          transform-origin: center;
}

.broker-animation .brokerAnim__primaryBox--small {
  min-height: auto;
}

.broker-animation .brokerAnim__primaryBox--mini {
  background-image: none;
  min-height: auto;
}

.broker-animation .brokerAnim__primaryBoxTitle {
  font-family: ripplingFontNormal;
  text-align: center;
  padding-top: 60px;
  font-size: 16px;
  color: #000000;
}

.broker-animation .brokerAnim__primaryBoxTitle--mini {
  padding-top: 30px;
}

.broker-animation .brokerAnim__primaryBoxTitle--micro {
  padding-top: 10px;
  font-size: 12px;
  color: #999999;
}

.broker-animation .brokerAnim__primaryBoxTitle--leftAlign {
  text-align: left;
}

.broker-animation .brokerAnim .brokerAnimCoverage {
  position: absolute;
  top: calc(50% - 200px);
  right: 200px;
  width: 400px;
  padding: 0 10px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
}

.broker-animation .brokerAnim .brokerAnimCoverage:after {
  opacity: 1;
  content: '';
  height: 22px;
  width: 22px;
  position: absolute;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  top: 270px;
  left: 290px;
  z-index: 10;
}

.broker-animation .brokerAnim .brokerAnimCoverage .formAnimField--radio {
  width: 100%;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.broker-animation .brokerAnim .brokerAnimCoverage .formAnimField--radio .radioBox {
  margin: 10px;
}

.broker-animation .brokerAnim .brokerAnimCoverage .formAnimField--radio .radioBox__title {
  padding: 0 5px;
  line-height: 1.2;
}

.broker-animation .brokerAnim .brokerAnimDate {
  position: absolute;
  top: calc(50% - 160px);
  right: 280px;
  width: 400px;
  padding: 0 10px 10px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
}

.broker-animation .brokerAnim .brokerAnimDate:after {
  opacity: 1;
  content: '';
  height: 22px;
  width: 22px;
  position: absolute;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  top: 240px;
  left: 20px;
  z-index: 10;
}

.broker-animation .brokerAnim .brokerAnimDate .formAnimField--radio {
  width: 100%;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.broker-animation .brokerAnim .brokerAnimDate .formAnimField--radio .radioBox {
  margin: 10px;
}

.broker-animation .brokerAnim .brokerAnimDate .formAnimField--radio .radioBox__title {
  padding: 0 5px;
  line-height: 1.2;
}

.broker-animation .brokerAnim .brokerAnimDate .formSubmit {
  position: absolute;
  bottom: -20px;
  left: 140px;
}

.broker-animation .brokerAnim .brokerAnimApproach {
  position: absolute;
  top: calc(50% - 220px);
  right: 100px;
  width: 460px;
  padding: 0 10px 10px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
}

.broker-animation .brokerAnim .brokerAnimApproach:after {
  opacity: 1;
  content: '';
  height: 22px;
  width: 22px;
  position: absolute;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  top: 240px;
  left: 20px;
  z-index: 10;
}

.broker-animation .brokerAnim .brokerAnimApproach .formAnimField--radio {
  width: 100%;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.broker-animation .brokerAnim .brokerAnimApproach .formAnimField--radio .radioBox {
  margin: 10px;
  width: 120px;
  height: 140px;
}

.broker-animation .brokerAnim .brokerAnimApproach .formAnimField--radio .radioBox__title {
  padding: 0 5px;
  line-height: 1.2;
}

.broker-animation .brokerAnim .brokerAnimApproach .formSubmit {
  position: absolute;
  bottom: -20px;
  left: 170px;
}

.broker-animation .brokerAnim .brokerAnimOptions {
  position: absolute;
  top: calc(50% - 200px);
  right: 205px;
  padding: 0;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
}

.broker-animation .brokerAnim .brokerAnimOptions__back {
  width: 420px;
  height: 454px;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/insurance-animation/insurance_anim_options.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.broker-animation .brokerAnim .brokerAnimOptions__back:after {
  opacity: 1;
  content: '';
  height: 22px;
  width: 22px;
  position: absolute;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  top: 200px;
  left: 397px;
  z-index: 10;
}

.broker-animation .brokerAnim .brokerAnimOptions .formSubmit {
  position: absolute;
  bottom: -20px;
  left: 160px;
}

.broker-animation .brokerAnim .brokerAnimOptions .brokerAnimEmployees {
  position: absolute;
  top: 90px;
  right: -100px;
  z-index: 10;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
}

.broker-animation .brokerAnim .brokerAnimOptions .brokerAnimEmployees:after {
  opacity: 1;
  content: '';
  height: 22px;
  width: 22px;
  position: absolute;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  top: 80px;
  left: 320px;
  z-index: 10;
}

.broker-animation .brokerAnim .brokerAnimOptions .brokerAnimEmployees__back {
  position: relative;
  margin: 0 auto;
  width: 380px;
  height: 340px;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/insurance-animation/insurance_anim_employees.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

.broker-animation .brokerAnim .brokerAnimOptions .brokerAnimEmployees__back:before {
  content: '';
  position: absolute;
  width: 380px;
  height: 115px;
  top: 0;
  left: 0;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/insurance-animation/insurance_anim_employees.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

.broker-animation .brokerAnim .brokerAnimOptions .brokerAnimEmployees__close {
  position: absolute;
  top: 10px;
  right: 12px;
}

.broker-animation .brokerAnim .brokerAnimOptions .brokerAnimEmployees__close:before {
  content: '\F00D';
  font-size: 16px;
  font-family: fontIcons;
}

.broker-animation .brokerAnim .brokerAnimContribution {
  position: absolute;
  top: calc(50% - 160px);
  right: 180px;
  width: 400px;
  padding: 0 30px 30px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
}

.broker-animation .brokerAnim .brokerAnimContribution:after {
  opacity: 1;
  content: '';
  height: 22px;
  width: 22px;
  position: absolute;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  top: 150px;
  left: 350px;
  z-index: 10;
}

.broker-animation .brokerAnim .brokerAnimContribution .formAnimField--radio .radioBox {
  width: 108px;
}

.broker-animation .brokerAnim .brokerAnimContribution .formAnimField--radio .radioBox__title {
  padding: 0 5px;
  line-height: 1.2;
}

.broker-animation .brokerAnim .brokerAnimContribution .formSubmit {
  position: absolute;
  bottom: -20px;
  left: 135px;
}

.broker-animation .brokerAnim .brokerAnimDays {
  position: absolute;
  top: calc(50% - 70px);
  right: 250px;
  width: 400px;
  padding: 0 30px 30px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
}

.broker-animation .brokerAnim .brokerAnimDays:after {
  opacity: 1;
  content: '';
  height: 22px;
  width: 22px;
  position: absolute;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  top: 60px;
  left: 350px;
  z-index: 10;
}

.broker-animation .brokerAnim .brokerAnimDays .formSubmit {
  position: absolute;
  bottom: -20px;
  left: 135px;
}

.broker-animation .brokerAnim .brokerAnimEmail {
  position: absolute;
  top: calc(50% - 260px);
  right: 100px;
  padding: 0;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
}

.broker-animation .brokerAnim .brokerAnimEmail__back {
  width: 400px;
  height: 410px;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/insurance-animation/insurance_anim_email.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.broker-animation .brokerAnim .brokerAnimEmail__back:after {
  opacity: 1;
  content: '';
  height: 22px;
  width: 22px;
  position: absolute;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/home-animation/home_anim_mouse_pointer.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  top: 240px;
  left: 350px;
  z-index: 10;
}

.broker-animation .brokerAnim .brokerAnimEmail .formSubmit {
  position: absolute;
  bottom: -20px;
  left: 150px;
}

.broker-animation .brokerAnim .brokerAnimEnroll {
  position: absolute;
  top: calc(50% - 180px);
  right: 190px;
  width: 430px;
  padding: 0 20px 20px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
}

.broker-animation .brokerAnim .brokerAnimEnroll .brokerAnim__primaryBoxTitle {
  margin-bottom: 20px;
}

.broker-animation .brokerAnim .brokerAnimEnroll__back {
  position: relative;
  height: 190px;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/insurance-animation/insurance_anim_enroll.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.broker-animation .brokerAnim .brokerAnimEnroll__greyA {
  position: absolute;
  top: 12px;
  left: 15px;
  font-size: 15px;
  color: #000;
}

.broker-animation .brokerAnim .brokerAnimEnroll__greyA > span {
  white-space: nowrap;
  position: absolute;
  top: 0;
}

.broker-animation .brokerAnim .brokerAnimEnroll__greyA > span:nth-child(2) {
  opacity: 0;
}

.broker-animation .brokerAnim .brokerAnimEnroll__greyA > span:nth-child(3) {
  opacity: 0;
}

.broker-animation .brokerAnim .brokerAnimEnroll__greyA > span:nth-child(4) {
  opacity: 0;
}

.broker-animation .brokerAnim .brokerAnimEnroll__greyA > span:nth-child(5) {
  opacity: 0;
}

.broker-animation .brokerAnim .brokerAnimEnroll__greyA > span:nth-child(6) {
  opacity: 0;
}

.broker-animation .brokerAnim .brokerAnimEnroll__greyB {
  position: absolute;
  top: 33px;
  left: 15px;
  font-size: 15px;
  color: #000;
}

.broker-animation .brokerAnim .brokerAnimEnroll__greyB > span {
  white-space: nowrap;
  position: absolute;
  left: 0;
}

.broker-animation .brokerAnim .brokerAnimEnroll__greyB > span:nth-child(2) {
  opacity: 0;
}

.broker-animation .brokerAnim .brokerAnimEnroll__greyB > span:nth-child(3) {
  opacity: 0;
}

.broker-animation .brokerAnim .brokerAnimEnroll__greyB > span:nth-child(4) {
  opacity: 0;
}

.broker-animation .brokerAnim .brokerAnimEnroll__greyB > span:nth-child(5) {
  opacity: 0;
}

.broker-animation .brokerAnim .brokerAnimEnroll__greyB > span:nth-child(6) {
  opacity: 0;
}

.broker-animation .brokerAnim .brokerAnimEnroll__enrollA {
  position: absolute;
  top: 130px;
  left: 24px;
  font-size: 12px;
  color: #000;
}

.broker-animation .brokerAnim .brokerAnimEnroll__enrollA > span {
  white-space: nowrap;
  position: absolute;
  left: 0;
}

.broker-animation .brokerAnim .brokerAnimEnroll__enrollA > span:nth-child(2) {
  opacity: 0;
}

.broker-animation .brokerAnim .brokerAnimEnroll__enrollA > span:nth-child(3) {
  opacity: 0;
}

.broker-animation .brokerAnim .brokerAnimEnroll__enrollA > span:nth-child(4) {
  opacity: 0;
}

.broker-animation .brokerAnim .brokerAnimEnroll__enrollA > span:nth-child(5) {
  opacity: 0;
}

.broker-animation .brokerAnim .brokerAnimEnroll__enrollA > span:nth-child(6) {
  opacity: 0;
}

.broker-animation .brokerAnim .brokerAnimEnroll__enrollB {
  position: absolute;
  top: 152px;
  left: 24px;
  font-size: 12px;
  color: #000;
}

.broker-animation .brokerAnim .brokerAnimEnroll__enrollB > span {
  white-space: nowrap;
  position: absolute;
  left: 0;
}

.broker-animation .brokerAnim .brokerAnimEnroll__enrollB > span:nth-child(2) {
  opacity: 0;
}

.broker-animation .brokerAnim .brokerAnimEnroll__enrollB > span:nth-child(3) {
  opacity: 0;
}

.broker-animation .brokerAnim .brokerAnimEnroll__enrollB > span:nth-child(4) {
  opacity: 0;
}

.broker-animation .brokerAnim .brokerAnimEnroll__enrollB > span:nth-child(5) {
  opacity: 0;
}

.broker-animation .brokerAnim .brokerAnimEnroll__enrollB > span:nth-child(6) {
  opacity: 0;
}

.broker-animation .brokerAnim .brokerAnimEnroll__waiveA {
  position: absolute;
  top: 130px;
  left: 250px;
  font-size: 12px;
  color: #000;
}

.broker-animation .brokerAnim .brokerAnimEnroll__waiveA > span {
  white-space: nowrap;
  position: absolute;
  left: 0;
}

.broker-animation .brokerAnim .brokerAnimEnroll__waiveA > span:nth-child(2) {
  opacity: 0;
}

.broker-animation .brokerAnim .brokerAnimEnroll__waiveA > span:nth-child(3) {
  opacity: 0;
}

.broker-animation .brokerAnim .brokerAnimEnroll__waiveA > span:nth-child(4) {
  opacity: 0;
}

.broker-animation .brokerAnim .brokerAnimEnroll__waiveB {
  position: absolute;
  top: 152px;
  left: 250px;
  font-size: 12px;
  color: #000;
}

.broker-animation .brokerAnim .brokerAnimEnroll__waiveB > span {
  white-space: nowrap;
  position: absolute;
  left: 0;
}

.broker-animation .brokerAnim .brokerAnimEnroll__waiveB > span:nth-child(2) {
  opacity: 0;
}

.broker-animation .brokerAnim .brokerAnimEnroll__waiveC {
  position: absolute;
  top: 172px;
  left: 250px;
  font-size: 12px;
  color: #000;
}

.broker-animation .brokerAnim .brokerAnimEnroll__waiveC > span {
  white-space: nowrap;
  position: absolute;
  left: 0;
}

.broker-animation .brokerAnim .brokerAnimEnroll__waiveC > span:nth-child(2) {
  opacity: 0;
}

.broker-animation .brokerAnim .brokerAnimEnroll__waiveC > span:nth-child(3) {
  opacity: 0;
}

.broker-animation .brokerAnim .brokerAnimEnroll__waiveC > span:nth-child(4) {
  opacity: 0;
}

.broker-animation .brokerAnim .brokerAnimEnroll__waiveC > span:nth-child(5) {
  opacity: 0;
}

.broker-animation .brokerAnim .brokerAnimEnroll__progress {
  position: absolute;
  top: 75px;
  left: 0;
  width: 100%;
  height: 26px;
  background-color: #f2f2f2;
}

.broker-animation .brokerAnim .brokerAnimEnroll__progress > span {
  position: absolute;
  left: 0;
  height: 100%;
}

.broker-animation .brokerAnim .brokerAnimEnroll__progress > span:nth-child(1) {
  width: 1%;
  background-color: #2d9448;
  z-index: 3;
}

.broker-animation .brokerAnim .brokerAnimEnroll__progress > span:nth-child(2) {
  width: 2%;
  background-color: #ffd082;
  z-index: 2;
}

.broker-animation .brokerAnim .brokerAnimEnroll__progress > span:nth-child(3) {
  width: 3%;
  background-color: #ef3a44;
  z-index: 1;
}

.broker-animation .brokerAnim .brokerAnimSuccess {
  position: absolute;
  top: calc(50% - 200px);
  right: 250px;
  padding: 0;
  width: 300px;
  height: 277px;
  -webkit-transform: perspective(1px) scale(0);
          transform: perspective(1px) scale(0);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  background-image: url("https://cdn.rippling.com/static/marketing/assets/insurance-animation/insurance_anim_success.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.broker-animation .brokerAnim--animate {
  opacity: 1;
}

.broker-animation .brokerAnim--animate .brokerAnimCoverage {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 5s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 5s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 5s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimCoverage:after {
  -webkit-animation: mouseMoveToBrokerCoverageOp2 0.2s cubic-bezier(1, 0, 0, 1) 2.5s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 2.65s 1 normal forwards, mouseMoveToBrokerCoverageOp1 0.2s cubic-bezier(1, 0, 0, 1) 2.8s 1 normal forwards, mouseClick1 0.2s cubic-bezier(1, 0, 0, 1) 3.2s 1 normal forwards;
       -o-animation: mouseMoveToBrokerCoverageOp2 0.2s cubic-bezier(1, 0, 0, 1) 2.5s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 2.65s 1 normal forwards, mouseMoveToBrokerCoverageOp1 0.2s cubic-bezier(1, 0, 0, 1) 2.8s 1 normal forwards, mouseClick1 0.2s cubic-bezier(1, 0, 0, 1) 3.2s 1 normal forwards;
          animation: mouseMoveToBrokerCoverageOp2 0.2s cubic-bezier(1, 0, 0, 1) 2.5s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 2.65s 1 normal forwards, mouseMoveToBrokerCoverageOp1 0.2s cubic-bezier(1, 0, 0, 1) 2.8s 1 normal forwards, mouseClick1 0.2s cubic-bezier(1, 0, 0, 1) 3.2s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimCoverage .radioBox:nth-child(2) {
  -webkit-animation: transformUp 0.1s cubic-bezier(1, 0, 0, 1) 2.65s 1 normal forwards, transformDown 0.1s cubic-bezier(1, 0, 0, 1) 2.85s 1 normal forwards;
       -o-animation: transformUp 0.1s cubic-bezier(1, 0, 0, 1) 2.65s 1 normal forwards, transformDown 0.1s cubic-bezier(1, 0, 0, 1) 2.85s 1 normal forwards;
          animation: transformUp 0.1s cubic-bezier(1, 0, 0, 1) 2.65s 1 normal forwards, transformDown 0.1s cubic-bezier(1, 0, 0, 1) 2.85s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimCoverage .radioBox:nth-child(2) .radioBox__title {
  -webkit-animation: showHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 2.65s 1 normal forwards, hideHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 2.85s 1 normal forwards;
       -o-animation: showHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 2.65s 1 normal forwards, hideHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 2.85s 1 normal forwards;
          animation: showHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 2.65s 1 normal forwards, hideHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 2.85s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimCoverage .radioBox:nth-child(2) .radioBox__check {
  -webkit-animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 2.65s 1 normal forwards, hideHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 2.85s 1 normal forwards;
       -o-animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 2.65s 1 normal forwards, hideHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 2.85s 1 normal forwards;
          animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 2.65s 1 normal forwards, hideHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 2.85s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimCoverage .radioBox:nth-child(2):after {
  -webkit-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 2.65s 1 normal forwards, hideAnim 0.1s cubic-bezier(1, 0, 0, 1) 2.85s 1 normal forwards;
       -o-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 2.65s 1 normal forwards, hideAnim 0.1s cubic-bezier(1, 0, 0, 1) 2.85s 1 normal forwards;
          animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 2.65s 1 normal forwards, hideAnim 0.1s cubic-bezier(1, 0, 0, 1) 2.85s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimCoverage .radioBox:nth-child(1) {
  -webkit-animation: transformUp 0.1s cubic-bezier(1, 0, 0, 1) 2.9s 1 normal forwards, showHoverBlue 0.1s cubic-bezier(1, 0, 0, 1) 3.3s 1 normal forwards, showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 3.3s 1 normal forwards;
       -o-animation: transformUp 0.1s cubic-bezier(1, 0, 0, 1) 2.9s 1 normal forwards, showHoverBlue 0.1s cubic-bezier(1, 0, 0, 1) 3.3s 1 normal forwards, showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 3.3s 1 normal forwards;
          animation: transformUp 0.1s cubic-bezier(1, 0, 0, 1) 2.9s 1 normal forwards, showHoverBlue 0.1s cubic-bezier(1, 0, 0, 1) 3.3s 1 normal forwards, showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 3.3s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimCoverage .radioBox:nth-child(1) .radioBox__title {
  -webkit-animation: showHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 2.9s 1 normal forwards, showHoverLightColor 0.1s cubic-bezier(1, 0, 0, 1) 3.3s 1 normal forwards;
       -o-animation: showHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 2.9s 1 normal forwards, showHoverLightColor 0.1s cubic-bezier(1, 0, 0, 1) 3.3s 1 normal forwards;
          animation: showHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 2.9s 1 normal forwards, showHoverLightColor 0.1s cubic-bezier(1, 0, 0, 1) 3.3s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimCoverage .radioBox:nth-child(1) .radioBox__check {
  -webkit-animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 2.9s 1 normal forwards, showHoverColorBlue 0.1s cubic-bezier(1, 0, 0, 1) 3.3s 1 normal forwards;
       -o-animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 2.9s 1 normal forwards, showHoverColorBlue 0.1s cubic-bezier(1, 0, 0, 1) 3.3s 1 normal forwards;
          animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 2.9s 1 normal forwards, showHoverColorBlue 0.1s cubic-bezier(1, 0, 0, 1) 3.3s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimCoverage .radioBox:nth-child(1):after {
  -webkit-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 2.9s 1 normal forwards;
       -o-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 2.9s 1 normal forwards;
          animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 2.9s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimCoverage .radioBox:nth-child(1) .radioBox__check:before {
  opacity: 0;
  -webkit-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 3.3s 1 normal forwards;
       -o-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 3.3s 1 normal forwards;
          animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 3.3s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimDate {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 5.3s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 9.5s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 5.3s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 9.5s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 5.3s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 9.5s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimDate:after {
  -webkit-animation: mouseMoveToBrokerDateOption 0.2s cubic-bezier(1, 0, 0, 1) 6.8s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 6.95s 1 normal forwards, mouseClick1 0.2s cubic-bezier(1, 0, 0, 1) 7.3s 1 normal forwards, mouseMoveToBrokerDateDone 0.2s cubic-bezier(1, 0, 0, 1) 7.8s 1 normal forwards, mouseClick2 0.2s cubic-bezier(1, 0, 0, 1) 8.3s 1 normal forwards;
       -o-animation: mouseMoveToBrokerDateOption 0.2s cubic-bezier(1, 0, 0, 1) 6.8s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 6.95s 1 normal forwards, mouseClick1 0.2s cubic-bezier(1, 0, 0, 1) 7.3s 1 normal forwards, mouseMoveToBrokerDateDone 0.2s cubic-bezier(1, 0, 0, 1) 7.8s 1 normal forwards, mouseClick2 0.2s cubic-bezier(1, 0, 0, 1) 8.3s 1 normal forwards;
          animation: mouseMoveToBrokerDateOption 0.2s cubic-bezier(1, 0, 0, 1) 6.8s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 6.95s 1 normal forwards, mouseClick1 0.2s cubic-bezier(1, 0, 0, 1) 7.3s 1 normal forwards, mouseMoveToBrokerDateDone 0.2s cubic-bezier(1, 0, 0, 1) 7.8s 1 normal forwards, mouseClick2 0.2s cubic-bezier(1, 0, 0, 1) 8.3s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimDate .formSubmit__btn {
  -webkit-animation: buttonClick 0.2s linear 8.3s 1 normal forwards;
       -o-animation: buttonClick 0.2s linear 8.3s 1 normal forwards;
          animation: buttonClick 0.2s linear 8.3s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimDate .radioBox:nth-child(1) {
  -webkit-animation: transformUp 0.1s cubic-bezier(1, 0, 0, 1) 6.9s 1 normal forwards, showHoverBlue 0.1s cubic-bezier(1, 0, 0, 1) 7.3s 1 normal forwards, showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 7.3s 1 normal forwards;
       -o-animation: transformUp 0.1s cubic-bezier(1, 0, 0, 1) 6.9s 1 normal forwards, showHoverBlue 0.1s cubic-bezier(1, 0, 0, 1) 7.3s 1 normal forwards, showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 7.3s 1 normal forwards;
          animation: transformUp 0.1s cubic-bezier(1, 0, 0, 1) 6.9s 1 normal forwards, showHoverBlue 0.1s cubic-bezier(1, 0, 0, 1) 7.3s 1 normal forwards, showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 7.3s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimDate .radioBox:nth-child(1) .radioBox__title {
  -webkit-animation: showHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 6.9s 1 normal forwards, showHoverLightColor 0.1s cubic-bezier(1, 0, 0, 1) 7.3s 1 normal forwards;
       -o-animation: showHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 6.9s 1 normal forwards, showHoverLightColor 0.1s cubic-bezier(1, 0, 0, 1) 7.3s 1 normal forwards;
          animation: showHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 6.9s 1 normal forwards, showHoverLightColor 0.1s cubic-bezier(1, 0, 0, 1) 7.3s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimDate .radioBox:nth-child(1) .radioBox__check {
  -webkit-animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 6.9s 1 normal forwards, showHoverColorBlue 0.1s cubic-bezier(1, 0, 0, 1) 7.3s 1 normal forwards;
       -o-animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 6.9s 1 normal forwards, showHoverColorBlue 0.1s cubic-bezier(1, 0, 0, 1) 7.3s 1 normal forwards;
          animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 6.9s 1 normal forwards, showHoverColorBlue 0.1s cubic-bezier(1, 0, 0, 1) 7.3s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimDate .radioBox:nth-child(1):after {
  -webkit-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 6.9s 1 normal forwards;
       -o-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 6.9s 1 normal forwards;
          animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 6.9s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimDate .radioBox:nth-child(1) .radioBox__check:before {
  opacity: 0;
  -webkit-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 7.4s 1 normal forwards;
       -o-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 7.4s 1 normal forwards;
          animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 7.4s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimApproach {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 9.8s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 14s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 9.8s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 14s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 9.8s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 14s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimApproach:after {
  -webkit-animation: mouseMoveToBrokerApproachOption 0.2s cubic-bezier(1, 0, 0, 1) 11.3s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 11.45s 1 normal forwards, mouseClick1 0.2s cubic-bezier(1, 0, 0, 1) 11.8s 1 normal forwards, mouseMoveToBrokerApproachDone 0.2s cubic-bezier(1, 0, 0, 1) 12.3s 1 normal forwards, mouseClick2 0.2s cubic-bezier(1, 0, 0, 1) 12.8s 1 normal forwards;
       -o-animation: mouseMoveToBrokerApproachOption 0.2s cubic-bezier(1, 0, 0, 1) 11.3s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 11.45s 1 normal forwards, mouseClick1 0.2s cubic-bezier(1, 0, 0, 1) 11.8s 1 normal forwards, mouseMoveToBrokerApproachDone 0.2s cubic-bezier(1, 0, 0, 1) 12.3s 1 normal forwards, mouseClick2 0.2s cubic-bezier(1, 0, 0, 1) 12.8s 1 normal forwards;
          animation: mouseMoveToBrokerApproachOption 0.2s cubic-bezier(1, 0, 0, 1) 11.3s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 11.45s 1 normal forwards, mouseClick1 0.2s cubic-bezier(1, 0, 0, 1) 11.8s 1 normal forwards, mouseMoveToBrokerApproachDone 0.2s cubic-bezier(1, 0, 0, 1) 12.3s 1 normal forwards, mouseClick2 0.2s cubic-bezier(1, 0, 0, 1) 12.8s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimApproach .formSubmit__btn {
  -webkit-animation: buttonClick 0.2s linear 12.8s 1 normal forwards;
       -o-animation: buttonClick 0.2s linear 12.8s 1 normal forwards;
          animation: buttonClick 0.2s linear 12.8s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimApproach .radioBox:nth-child(1) {
  -webkit-animation: transformUp 0.1s cubic-bezier(1, 0, 0, 1) 11.4s 1 normal forwards, showHoverBlue 0.1s cubic-bezier(1, 0, 0, 1) 11.8s 1 normal forwards, showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 11.8s 1 normal forwards;
       -o-animation: transformUp 0.1s cubic-bezier(1, 0, 0, 1) 11.4s 1 normal forwards, showHoverBlue 0.1s cubic-bezier(1, 0, 0, 1) 11.8s 1 normal forwards, showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 11.8s 1 normal forwards;
          animation: transformUp 0.1s cubic-bezier(1, 0, 0, 1) 11.4s 1 normal forwards, showHoverBlue 0.1s cubic-bezier(1, 0, 0, 1) 11.8s 1 normal forwards, showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 11.8s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimApproach .radioBox:nth-child(1) .radioBox__title {
  -webkit-animation: showHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 11.4s 1 normal forwards, showHoverLightColor 0.1s cubic-bezier(1, 0, 0, 1) 11.8s 1 normal forwards;
       -o-animation: showHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 11.4s 1 normal forwards, showHoverLightColor 0.1s cubic-bezier(1, 0, 0, 1) 11.8s 1 normal forwards;
          animation: showHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 11.4s 1 normal forwards, showHoverLightColor 0.1s cubic-bezier(1, 0, 0, 1) 11.8s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimApproach .radioBox:nth-child(1) .radioBox__check {
  -webkit-animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 11.4s 1 normal forwards, showHoverColorBlue 0.1s cubic-bezier(1, 0, 0, 1) 11.8s 1 normal forwards;
       -o-animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 11.4s 1 normal forwards, showHoverColorBlue 0.1s cubic-bezier(1, 0, 0, 1) 11.8s 1 normal forwards;
          animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 11.4s 1 normal forwards, showHoverColorBlue 0.1s cubic-bezier(1, 0, 0, 1) 11.8s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimApproach .radioBox:nth-child(1):after {
  -webkit-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 11.4s 1 normal forwards;
       -o-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 11.4s 1 normal forwards;
          animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 11.4s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimApproach .radioBox:nth-child(1) .radioBox__check:before {
  opacity: 0;
  -webkit-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 11.9s 1 normal forwards;
       -o-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 11.9s 1 normal forwards;
          animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 11.9s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimOptions {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 14.3s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 24.8s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 14.3s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 24.8s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 14.3s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 24.8s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimOptions__back:after {
  -webkit-animation: mouseMoveToBrokerBreakdown 0.2s cubic-bezier(1, 0, 0, 1) 16.8s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 16.95s 1 normal forwards, mouseClick0 0.2s cubic-bezier(1, 0, 0, 1) 17.3s 1 normal forwards, mouseMoveToBrokerBreakdownDone 0.2s cubic-bezier(1, 0, 0, 1) 23.3s 1 normal forwards, mouseClick1 0.2s cubic-bezier(1, 0, 0, 1) 23.8s 1 normal forwards;
       -o-animation: mouseMoveToBrokerBreakdown 0.2s cubic-bezier(1, 0, 0, 1) 16.8s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 16.95s 1 normal forwards, mouseClick0 0.2s cubic-bezier(1, 0, 0, 1) 17.3s 1 normal forwards, mouseMoveToBrokerBreakdownDone 0.2s cubic-bezier(1, 0, 0, 1) 23.3s 1 normal forwards, mouseClick1 0.2s cubic-bezier(1, 0, 0, 1) 23.8s 1 normal forwards;
          animation: mouseMoveToBrokerBreakdown 0.2s cubic-bezier(1, 0, 0, 1) 16.8s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 16.95s 1 normal forwards, mouseClick0 0.2s cubic-bezier(1, 0, 0, 1) 17.3s 1 normal forwards, mouseMoveToBrokerBreakdownDone 0.2s cubic-bezier(1, 0, 0, 1) 23.3s 1 normal forwards, mouseClick1 0.2s cubic-bezier(1, 0, 0, 1) 23.8s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimOptions .formSubmit__btn {
  -webkit-animation: buttonClick 0.2s linear 23.8s 1 normal forwards;
       -o-animation: buttonClick 0.2s linear 23.8s 1 normal forwards;
          animation: buttonClick 0.2s linear 23.8s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimOptions .brokerAnimEmployees {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 17.6s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 22.5s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 17.6s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 22.5s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 17.6s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 22.5s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimOptions .brokerAnimEmployees:after {
  -webkit-animation: mouseMoveToBrokerEmployeesClose 0.2s cubic-bezier(1, 0, 0, 1) 21.3s 1 normal forwards, mouseToCursor1 0s cubic-bezier(1, 0, 0, 1) 21.45s 1 normal forwards, mouseClick1 0.2s cubic-bezier(1, 0, 0, 1) 21.8s 1 normal forwards;
       -o-animation: mouseMoveToBrokerEmployeesClose 0.2s cubic-bezier(1, 0, 0, 1) 21.3s 1 normal forwards, mouseToCursor1 0s cubic-bezier(1, 0, 0, 1) 21.45s 1 normal forwards, mouseClick1 0.2s cubic-bezier(1, 0, 0, 1) 21.8s 1 normal forwards;
          animation: mouseMoveToBrokerEmployeesClose 0.2s cubic-bezier(1, 0, 0, 1) 21.3s 1 normal forwards, mouseToCursor1 0s cubic-bezier(1, 0, 0, 1) 21.45s 1 normal forwards, mouseClick1 0.2s cubic-bezier(1, 0, 0, 1) 21.8s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimOptions .brokerAnimEmployees__back {
  -webkit-animation: backgroundScroll 2s cubic-bezier(0.645, 0.045, 0.905, 1.125) 18.8s 1 normal forwards;
       -o-animation: backgroundScroll 2s cubic-bezier(0.645, 0.045, 0.905, 1.125) 18.8s 1 normal forwards;
          animation: backgroundScroll 2s cubic-bezier(0.645, 0.045, 0.905, 1.125) 18.8s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimContribution {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 25.1s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 30.3s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 25.1s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 30.3s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 25.1s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 30.3s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimContribution:after {
  -webkit-animation: mouseMoveToBrokerContributionOp2 0.2s cubic-bezier(1, 0, 0, 1) 27.1s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 27.25s 1 normal forwards, mouseMoveToBrokerContributionOp1 0.2s cubic-bezier(1, 0, 0, 1) 27.4s 1 normal forwards, mouseClick0 0.2s cubic-bezier(1, 0, 0, 1) 27.8s 1 normal forwards, mouseMoveToBrokerContributionDone 0.2s cubic-bezier(1, 0, 0, 1) 28.9s 1 normal forwards, mouseClick1 0.2s cubic-bezier(1, 0, 0, 1) 29.4s 1 normal forwards;
       -o-animation: mouseMoveToBrokerContributionOp2 0.2s cubic-bezier(1, 0, 0, 1) 27.1s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 27.25s 1 normal forwards, mouseMoveToBrokerContributionOp1 0.2s cubic-bezier(1, 0, 0, 1) 27.4s 1 normal forwards, mouseClick0 0.2s cubic-bezier(1, 0, 0, 1) 27.8s 1 normal forwards, mouseMoveToBrokerContributionDone 0.2s cubic-bezier(1, 0, 0, 1) 28.9s 1 normal forwards, mouseClick1 0.2s cubic-bezier(1, 0, 0, 1) 29.4s 1 normal forwards;
          animation: mouseMoveToBrokerContributionOp2 0.2s cubic-bezier(1, 0, 0, 1) 27.1s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 27.25s 1 normal forwards, mouseMoveToBrokerContributionOp1 0.2s cubic-bezier(1, 0, 0, 1) 27.4s 1 normal forwards, mouseClick0 0.2s cubic-bezier(1, 0, 0, 1) 27.8s 1 normal forwards, mouseMoveToBrokerContributionDone 0.2s cubic-bezier(1, 0, 0, 1) 28.9s 1 normal forwards, mouseClick1 0.2s cubic-bezier(1, 0, 0, 1) 29.4s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimContribution .formSubmit__btn {
  -webkit-animation: buttonClick 0.2s linear 29.4s 1 normal forwards;
       -o-animation: buttonClick 0.2s linear 29.4s 1 normal forwards;
          animation: buttonClick 0.2s linear 29.4s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimContribution .radioBox:nth-child(1) {
  -webkit-animation: transformUp 0.1s cubic-bezier(1, 0, 0, 1) 27.4s 1 normal forwards, showHoverBlue 0.1s cubic-bezier(1, 0, 0, 1) 27.8s 1 normal forwards, showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 27.8s 1 normal forwards;
       -o-animation: transformUp 0.1s cubic-bezier(1, 0, 0, 1) 27.4s 1 normal forwards, showHoverBlue 0.1s cubic-bezier(1, 0, 0, 1) 27.8s 1 normal forwards, showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 27.8s 1 normal forwards;
          animation: transformUp 0.1s cubic-bezier(1, 0, 0, 1) 27.4s 1 normal forwards, showHoverBlue 0.1s cubic-bezier(1, 0, 0, 1) 27.8s 1 normal forwards, showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 27.8s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimContribution .radioBox:nth-child(1) .radioBox__title {
  -webkit-animation: showHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 27.4s 1 normal forwards, showHoverLightColor 0.1s cubic-bezier(1, 0, 0, 1) 27.8s 1 normal forwards;
       -o-animation: showHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 27.4s 1 normal forwards, showHoverLightColor 0.1s cubic-bezier(1, 0, 0, 1) 27.8s 1 normal forwards;
          animation: showHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 27.4s 1 normal forwards, showHoverLightColor 0.1s cubic-bezier(1, 0, 0, 1) 27.8s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimContribution .radioBox:nth-child(1) .radioBox__check {
  -webkit-animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 27.4s 1 normal forwards, showHoverColorBlue 0.1s cubic-bezier(1, 0, 0, 1) 27.8s 1 normal forwards;
       -o-animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 27.4s 1 normal forwards, showHoverColorBlue 0.1s cubic-bezier(1, 0, 0, 1) 27.8s 1 normal forwards;
          animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 27.4s 1 normal forwards, showHoverColorBlue 0.1s cubic-bezier(1, 0, 0, 1) 27.8s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimContribution .radioBox:nth-child(1):after {
  -webkit-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 27.4s 1 normal forwards;
       -o-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 27.4s 1 normal forwards;
          animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 27.4s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimContribution .radioBox:nth-child(1) .radioBox__check:before {
  opacity: 0;
  -webkit-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 27.8s 1 normal forwards;
       -o-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 27.8s 1 normal forwards;
          animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 27.8s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimContribution .radioBox:nth-child(2) {
  -webkit-animation: transformUp 0.1s cubic-bezier(1, 0, 0, 1) 27.2s 1 normal forwards, transformDown 0.1s cubic-bezier(1, 0, 0, 1) 27.4s 1 normal forwards;
       -o-animation: transformUp 0.1s cubic-bezier(1, 0, 0, 1) 27.2s 1 normal forwards, transformDown 0.1s cubic-bezier(1, 0, 0, 1) 27.4s 1 normal forwards;
          animation: transformUp 0.1s cubic-bezier(1, 0, 0, 1) 27.2s 1 normal forwards, transformDown 0.1s cubic-bezier(1, 0, 0, 1) 27.4s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimContribution .radioBox:nth-child(2) .radioBox__title {
  -webkit-animation: showHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 27.2s 1 normal forwards, hideHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 27.4s 1 normal forwards;
       -o-animation: showHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 27.2s 1 normal forwards, hideHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 27.4s 1 normal forwards;
          animation: showHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 27.2s 1 normal forwards, hideHoverColor 0.1s cubic-bezier(1, 0, 0, 1) 27.4s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimContribution .radioBox:nth-child(2) .radioBox__check {
  -webkit-animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 27.2s 1 normal forwards, hideHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 27.4s 1 normal forwards;
       -o-animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 27.2s 1 normal forwards, hideHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 27.4s 1 normal forwards;
          animation: showHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 27.2s 1 normal forwards, hideHoverBorderColor 0.1s cubic-bezier(1, 0, 0, 1) 27.4s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimContribution .radioBox:nth-child(2):after {
  -webkit-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 27.2s 1 normal forwards, hideAnim 0.1s cubic-bezier(1, 0, 0, 1) 27.4s 1 normal forwards;
       -o-animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 27.2s 1 normal forwards, hideAnim 0.1s cubic-bezier(1, 0, 0, 1) 27.4s 1 normal forwards;
          animation: showAnim 0.1s cubic-bezier(1, 0, 0, 1) 27.2s 1 normal forwards, hideAnim 0.1s cubic-bezier(1, 0, 0, 1) 27.4s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimDays {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 30.6s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 34.8s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 30.6s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 34.8s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 30.6s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 34.8s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimDays:after {
  -webkit-animation: mouseMoveToBrokerDaysStart 0.2s cubic-bezier(1, 0, 0, 1) 31.6s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 31.78s 1 normal forwards, mouseMoveToBrokerDaysMid 0.4s linear 32.2s 1 normal forwards, mouseMoveToBrokerDaysDone 0.2s linear 33.4s 1 normal forwards, mouseClick0 0.2s cubic-bezier(1, 0, 0, 1) 34.1s 1 normal forwards;
       -o-animation: mouseMoveToBrokerDaysStart 0.2s cubic-bezier(1, 0, 0, 1) 31.6s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 31.78s 1 normal forwards, mouseMoveToBrokerDaysMid 0.4s linear 32.2s 1 normal forwards, mouseMoveToBrokerDaysDone 0.2s linear 33.4s 1 normal forwards, mouseClick0 0.2s cubic-bezier(1, 0, 0, 1) 34.1s 1 normal forwards;
          animation: mouseMoveToBrokerDaysStart 0.2s cubic-bezier(1, 0, 0, 1) 31.6s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 31.78s 1 normal forwards, mouseMoveToBrokerDaysMid 0.4s linear 32.2s 1 normal forwards, mouseMoveToBrokerDaysDone 0.2s linear 33.4s 1 normal forwards, mouseClick0 0.2s cubic-bezier(1, 0, 0, 1) 34.1s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimDays .formAnimField .rangeLine:before {
  -webkit-animation: rangeHalfWidth 0.4s linear 32.2s 1 normal forwards;
       -o-animation: rangeHalfWidth 0.4s linear 32.2s 1 normal forwards;
          animation: rangeHalfWidth 0.4s linear 32.2s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimDays .formAnimField .rangeVal {
  -webkit-animation: rangeValueHalfMove 0.4s linear 32.2s 1 normal forwards;
       -o-animation: rangeValueHalfMove 0.4s linear 32.2s 1 normal forwards;
          animation: rangeValueHalfMove 0.4s linear 32.2s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimDays .formAnimField .rangeVal > span {
  -webkit-animation: showAnim 0.1s linear 32.55s 1 normal forwards;
       -o-animation: showAnim 0.1s linear 32.55s 1 normal forwards;
          animation: showAnim 0.1s linear 32.55s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimDays .formSubmit__btn {
  -webkit-animation: buttonClick 0.2s linear 34.1s 1 normal forwards;
       -o-animation: buttonClick 0.2s linear 34.1s 1 normal forwards;
          animation: buttonClick 0.2s linear 34.1s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimEmail {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 35.1s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 40.6s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 35.1s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 40.6s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 35.1s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 40.6s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimEmail__back:after {
  -webkit-animation: mouseMoveToBrokerEmailDone 0.2s cubic-bezier(1, 0, 0, 1) 39.1s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 39.25s 1 normal forwards, mouseClick0 0.2s cubic-bezier(1, 0, 0, 1) 39.6s 1 normal forwards;
       -o-animation: mouseMoveToBrokerEmailDone 0.2s cubic-bezier(1, 0, 0, 1) 39.1s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 39.25s 1 normal forwards, mouseClick0 0.2s cubic-bezier(1, 0, 0, 1) 39.6s 1 normal forwards;
          animation: mouseMoveToBrokerEmailDone 0.2s cubic-bezier(1, 0, 0, 1) 39.1s 1 normal forwards, mouseToCursor0 0s cubic-bezier(1, 0, 0, 1) 39.25s 1 normal forwards, mouseClick0 0.2s cubic-bezier(1, 0, 0, 1) 39.6s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimEmail .formSubmit__btn {
  -webkit-animation: buttonClick 0.2s linear 39.6s 1 normal forwards;
       -o-animation: buttonClick 0.2s linear 39.6s 1 normal forwards;
          animation: buttonClick 0.2s linear 39.6s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimEnroll {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 40.9s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 49.9s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 40.9s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 49.9s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 40.9s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.2) 49.9s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimEnroll__greyA > span:nth-child(1) {
  -webkit-animation: hideAnim 0.1s linear 41.9s 1 normal forwards;
       -o-animation: hideAnim 0.1s linear 41.9s 1 normal forwards;
          animation: hideAnim 0.1s linear 41.9s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimEnroll__greyA > span:nth-child(2) {
  -webkit-animation: showAnim 0.1s linear 41.9s 1 normal forwards, hideAnim 0.1s linear 42.9s 1 normal forwards;
       -o-animation: showAnim 0.1s linear 41.9s 1 normal forwards, hideAnim 0.1s linear 42.9s 1 normal forwards;
          animation: showAnim 0.1s linear 41.9s 1 normal forwards, hideAnim 0.1s linear 42.9s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimEnroll__greyA > span:nth-child(3) {
  -webkit-animation: showAnim 0.1s linear 42.9s 1 normal forwards, hideAnim 0.1s linear 43.9s 1 normal forwards;
       -o-animation: showAnim 0.1s linear 42.9s 1 normal forwards, hideAnim 0.1s linear 43.9s 1 normal forwards;
          animation: showAnim 0.1s linear 42.9s 1 normal forwards, hideAnim 0.1s linear 43.9s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimEnroll__greyA > span:nth-child(4) {
  -webkit-animation: showAnim 0.1s linear 43.9s 1 normal forwards, hideAnim 0.1s linear 44.9s 1 normal forwards;
       -o-animation: showAnim 0.1s linear 43.9s 1 normal forwards, hideAnim 0.1s linear 44.9s 1 normal forwards;
          animation: showAnim 0.1s linear 43.9s 1 normal forwards, hideAnim 0.1s linear 44.9s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimEnroll__greyA > span:nth-child(5) {
  -webkit-animation: showAnim 0.1s linear 44.9s 1 normal forwards, hideAnim 0.1s linear 45.9s 1 normal forwards;
       -o-animation: showAnim 0.1s linear 44.9s 1 normal forwards, hideAnim 0.1s linear 45.9s 1 normal forwards;
          animation: showAnim 0.1s linear 44.9s 1 normal forwards, hideAnim 0.1s linear 45.9s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimEnroll__greyA > span:nth-child(6) {
  -webkit-animation: showAnim 0.1s linear 45.9s 1 normal forwards;
       -o-animation: showAnim 0.1s linear 45.9s 1 normal forwards;
          animation: showAnim 0.1s linear 45.9s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimEnroll__greyB > span:nth-child(1) {
  -webkit-animation: hideAnim 0.1s linear 41.9s 1 normal forwards;
       -o-animation: hideAnim 0.1s linear 41.9s 1 normal forwards;
          animation: hideAnim 0.1s linear 41.9s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimEnroll__greyB > span:nth-child(2) {
  -webkit-animation: showAnim 0.1s linear 41.9s 1 normal forwards, hideAnim 0.1s linear 42.9s 1 normal forwards;
       -o-animation: showAnim 0.1s linear 41.9s 1 normal forwards, hideAnim 0.1s linear 42.9s 1 normal forwards;
          animation: showAnim 0.1s linear 41.9s 1 normal forwards, hideAnim 0.1s linear 42.9s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimEnroll__greyB > span:nth-child(3) {
  -webkit-animation: showAnim 0.1s linear 42.9s 1 normal forwards, hideAnim 0.1s linear 43.9s 1 normal forwards;
       -o-animation: showAnim 0.1s linear 42.9s 1 normal forwards, hideAnim 0.1s linear 43.9s 1 normal forwards;
          animation: showAnim 0.1s linear 42.9s 1 normal forwards, hideAnim 0.1s linear 43.9s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimEnroll__greyB > span:nth-child(4) {
  -webkit-animation: showAnim 0.1s linear 43.9s 1 normal forwards, hideAnim 0.1s linear 44.9s 1 normal forwards;
       -o-animation: showAnim 0.1s linear 43.9s 1 normal forwards, hideAnim 0.1s linear 44.9s 1 normal forwards;
          animation: showAnim 0.1s linear 43.9s 1 normal forwards, hideAnim 0.1s linear 44.9s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimEnroll__greyB > span:nth-child(5) {
  -webkit-animation: showAnim 0.1s linear 44.9s 1 normal forwards, hideAnim 0.1s linear 45.9s 1 normal forwards;
       -o-animation: showAnim 0.1s linear 44.9s 1 normal forwards, hideAnim 0.1s linear 45.9s 1 normal forwards;
          animation: showAnim 0.1s linear 44.9s 1 normal forwards, hideAnim 0.1s linear 45.9s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimEnroll__greyB > span:nth-child(6) {
  -webkit-animation: showAnim 0.1s linear 45.9s 1 normal forwards;
       -o-animation: showAnim 0.1s linear 45.9s 1 normal forwards;
          animation: showAnim 0.1s linear 45.9s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimEnroll__enrollA > span:nth-child(1) {
  -webkit-animation: hideAnim 0.1s linear 41.9s 1 normal forwards;
       -o-animation: hideAnim 0.1s linear 41.9s 1 normal forwards;
          animation: hideAnim 0.1s linear 41.9s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimEnroll__enrollA > span:nth-child(2) {
  -webkit-animation: showAnim 0.1s linear 41.9s 1 normal forwards, hideAnim 0.1s linear 42.9s 1 normal forwards;
       -o-animation: showAnim 0.1s linear 41.9s 1 normal forwards, hideAnim 0.1s linear 42.9s 1 normal forwards;
          animation: showAnim 0.1s linear 41.9s 1 normal forwards, hideAnim 0.1s linear 42.9s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimEnroll__enrollA > span:nth-child(3) {
  -webkit-animation: showAnim 0.1s linear 42.9s 1 normal forwards, hideAnim 0.1s linear 43.9s 1 normal forwards;
       -o-animation: showAnim 0.1s linear 42.9s 1 normal forwards, hideAnim 0.1s linear 43.9s 1 normal forwards;
          animation: showAnim 0.1s linear 42.9s 1 normal forwards, hideAnim 0.1s linear 43.9s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimEnroll__enrollA > span:nth-child(4) {
  -webkit-animation: showAnim 0.1s linear 43.9s 1 normal forwards, hideAnim 0.1s linear 44.9s 1 normal forwards;
       -o-animation: showAnim 0.1s linear 43.9s 1 normal forwards, hideAnim 0.1s linear 44.9s 1 normal forwards;
          animation: showAnim 0.1s linear 43.9s 1 normal forwards, hideAnim 0.1s linear 44.9s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimEnroll__enrollA > span:nth-child(5) {
  -webkit-animation: showAnim 0.1s linear 44.9s 1 normal forwards, hideAnim 0.1s linear 45.9s 1 normal forwards;
       -o-animation: showAnim 0.1s linear 44.9s 1 normal forwards, hideAnim 0.1s linear 45.9s 1 normal forwards;
          animation: showAnim 0.1s linear 44.9s 1 normal forwards, hideAnim 0.1s linear 45.9s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimEnroll__enrollA > span:nth-child(6) {
  -webkit-animation: showAnim 0.1s linear 45.9s 1 normal forwards;
       -o-animation: showAnim 0.1s linear 45.9s 1 normal forwards;
          animation: showAnim 0.1s linear 45.9s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimEnroll__enrollB > span:nth-child(1) {
  -webkit-animation: hideAnim 0.1s linear 41.9s 1 normal forwards;
       -o-animation: hideAnim 0.1s linear 41.9s 1 normal forwards;
          animation: hideAnim 0.1s linear 41.9s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimEnroll__enrollB > span:nth-child(2) {
  -webkit-animation: showAnim 0.1s linear 41.9s 1 normal forwards, hideAnim 0.1s linear 42.9s 1 normal forwards;
       -o-animation: showAnim 0.1s linear 41.9s 1 normal forwards, hideAnim 0.1s linear 42.9s 1 normal forwards;
          animation: showAnim 0.1s linear 41.9s 1 normal forwards, hideAnim 0.1s linear 42.9s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimEnroll__enrollB > span:nth-child(3) {
  -webkit-animation: showAnim 0.1s linear 42.9s 1 normal forwards, hideAnim 0.1s linear 43.9s 1 normal forwards;
       -o-animation: showAnim 0.1s linear 42.9s 1 normal forwards, hideAnim 0.1s linear 43.9s 1 normal forwards;
          animation: showAnim 0.1s linear 42.9s 1 normal forwards, hideAnim 0.1s linear 43.9s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimEnroll__enrollB > span:nth-child(4) {
  -webkit-animation: showAnim 0.1s linear 43.9s 1 normal forwards, hideAnim 0.1s linear 44.9s 1 normal forwards;
       -o-animation: showAnim 0.1s linear 43.9s 1 normal forwards, hideAnim 0.1s linear 44.9s 1 normal forwards;
          animation: showAnim 0.1s linear 43.9s 1 normal forwards, hideAnim 0.1s linear 44.9s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimEnroll__enrollB > span:nth-child(5) {
  -webkit-animation: showAnim 0.1s linear 44.9s 1 normal forwards, hideAnim 0.1s linear 45.9s 1 normal forwards;
       -o-animation: showAnim 0.1s linear 44.9s 1 normal forwards, hideAnim 0.1s linear 45.9s 1 normal forwards;
          animation: showAnim 0.1s linear 44.9s 1 normal forwards, hideAnim 0.1s linear 45.9s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimEnroll__enrollB > span:nth-child(6) {
  -webkit-animation: showAnim 0.1s linear 45.9s 1 normal forwards;
       -o-animation: showAnim 0.1s linear 45.9s 1 normal forwards;
          animation: showAnim 0.1s linear 45.9s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimEnroll__waiveA > span:nth-child(1) {
  -webkit-animation: hideAnim 0.1s linear 42.3s 1 normal forwards;
       -o-animation: hideAnim 0.1s linear 42.3s 1 normal forwards;
          animation: hideAnim 0.1s linear 42.3s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimEnroll__waiveA > span:nth-child(2) {
  -webkit-animation: showAnim 0.1s linear 42.3s 1 normal forwards, hideAnim 0.1s linear 43.5s 1 normal forwards;
       -o-animation: showAnim 0.1s linear 42.3s 1 normal forwards, hideAnim 0.1s linear 43.5s 1 normal forwards;
          animation: showAnim 0.1s linear 42.3s 1 normal forwards, hideAnim 0.1s linear 43.5s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimEnroll__waiveA > span:nth-child(3) {
  -webkit-animation: showAnim 0.1s linear 43.5s 1 normal forwards, hideAnim 0.1s linear 44.7s 1 normal forwards;
       -o-animation: showAnim 0.1s linear 43.5s 1 normal forwards, hideAnim 0.1s linear 44.7s 1 normal forwards;
          animation: showAnim 0.1s linear 43.5s 1 normal forwards, hideAnim 0.1s linear 44.7s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimEnroll__waiveA > span:nth-child(4) {
  -webkit-animation: showAnim 0.1s linear 44.7s 1 normal forwards;
       -o-animation: showAnim 0.1s linear 44.7s 1 normal forwards;
          animation: showAnim 0.1s linear 44.7s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimEnroll__waiveB > span:nth-child(1) {
  -webkit-animation: hideAnim 0.1s linear 44.9s 1 normal forwards;
       -o-animation: hideAnim 0.1s linear 44.9s 1 normal forwards;
          animation: hideAnim 0.1s linear 44.9s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimEnroll__waiveB > span:nth-child(2) {
  -webkit-animation: showAnim 0.1s linear 44.9s 1 normal forwards;
       -o-animation: showAnim 0.1s linear 44.9s 1 normal forwards;
          animation: showAnim 0.1s linear 44.9s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimEnroll__waiveC > span:nth-child(1) {
  -webkit-animation: hideAnim 0.1s linear 41.7s 1 normal forwards;
       -o-animation: hideAnim 0.1s linear 41.7s 1 normal forwards;
          animation: hideAnim 0.1s linear 41.7s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimEnroll__waiveC > span:nth-child(2) {
  -webkit-animation: showAnim 0.1s linear 41.7s 1 normal forwards, hideAnim 0.1s linear 43.1s 1 normal forwards;
       -o-animation: showAnim 0.1s linear 41.7s 1 normal forwards, hideAnim 0.1s linear 43.1s 1 normal forwards;
          animation: showAnim 0.1s linear 41.7s 1 normal forwards, hideAnim 0.1s linear 43.1s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimEnroll__waiveC > span:nth-child(3) {
  -webkit-animation: showAnim 0.1s linear 43.1s 1 normal forwards, hideAnim 0.1s linear 44.5s 1 normal forwards;
       -o-animation: showAnim 0.1s linear 43.1s 1 normal forwards, hideAnim 0.1s linear 44.5s 1 normal forwards;
          animation: showAnim 0.1s linear 43.1s 1 normal forwards, hideAnim 0.1s linear 44.5s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimEnroll__waiveC > span:nth-child(4) {
  -webkit-animation: showAnim 0.1s linear 44.5s 1 normal forwards, hideAnim 0.1s linear 45.9s 1 normal forwards;
       -o-animation: showAnim 0.1s linear 44.5s 1 normal forwards, hideAnim 0.1s linear 45.9s 1 normal forwards;
          animation: showAnim 0.1s linear 44.5s 1 normal forwards, hideAnim 0.1s linear 45.9s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimEnroll__waiveC > span:nth-child(5) {
  -webkit-animation: showAnim 0.1s linear 45.9s 1 normal forwards;
       -o-animation: showAnim 0.1s linear 45.9s 1 normal forwards;
          animation: showAnim 0.1s linear 45.9s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimEnroll__progress > span:nth-child(1) {
  -webkit-animation: brokerBarA 5s linear 41.1s 1 normal forwards;
       -o-animation: brokerBarA 5s linear 41.1s 1 normal forwards;
          animation: brokerBarA 5s linear 41.1s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimEnroll__progress > span:nth-child(2) {
  -webkit-animation: brokerBarB 5s linear 41.1s 1 normal forwards;
       -o-animation: brokerBarB 5s linear 41.1s 1 normal forwards;
          animation: brokerBarB 5s linear 41.1s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimEnroll__progress > span:nth-child(3) {
  -webkit-animation: brokerBarC 5s linear 41.1s 1 normal forwards;
       -o-animation: brokerBarC 5s linear 41.1s 1 normal forwards;
          animation: brokerBarC 5s linear 41.1s 1 normal forwards;
}

.broker-animation .brokerAnim--animate .brokerAnimSuccess {
  -webkit-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 50.2s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 52.7s 1 normal forwards;
       -o-animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 50.2s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 52.7s 1 normal forwards;
          animation: showPopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 50.2s 1 normal forwards, hidePopAnim 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 52.7s 1 normal forwards;
}

.broker-animation .actionList {
  right: calc(50% - 135px);
  top: auto;
  bottom: 20px;
}

.broker-animation .brokerAnim {
  position: absolute;
  left: calc(50% - 300px);
  bottom: -150px;
  width: 600px;
  height: 600px;
  -webkit-transform: scale(0.5);
       -o-transform: scale(0.5);
          transform: scale(0.5);
  -webkit-transform-origin: center;
       -o-transform-origin: center;
          transform-origin: center;
}

.broker-animation .brokerAnim__primaryBoxTitle {
  font-size: 22px;
}

.broker-animation .brokerAnim__primaryBoxTitle--micro {
  font-size: 17px;
}

.broker-animation .brokerAnim .brokerAnimCoverage {
  top: 0;
  right: 15px;
  zoom: 1.4;
}

.broker-animation .brokerAnim .brokerAnimDate {
  top: 0;
  right: 10px;
  zoom: 1.45;
}

.broker-animation .brokerAnim .brokerAnimApproach {
  top: 40px;
  right: 0;
  zoom: 1.3;
}

.broker-animation .brokerAnim .brokerAnimOptions {
  top: 0;
  right: 20px;
  zoom: 1.5;
}

.broker-animation .brokerAnim .brokerAnimOptions .brokerAnimEmployees {
  right: -10px;
}

.broker-animation .brokerAnim .brokerAnimContribution {
  top: 0;
  right: 0;
  zoom: 1.5;
}

.broker-animation .brokerAnim .brokerAnimDays {
  top: 0;
  right: 0;
  zoom: 1.5;
}

.broker-animation .brokerAnim .brokerAnimEmail {
  top: 0;
  right: 0;
  zoom: 1.55;
}

.broker-animation .brokerAnim .brokerAnimEnroll {
  top: 0;
  right: 0;
  zoom: 1.4;
}

.broker-animation .brokerAnim .brokerAnimSuccess {
  top: 0;
  right: 0;
  zoom: 2;
}

@media screen and (min-width: 768px) {
  .broker-animation .actionList {
    top: calc(50% - 60px);
    right: 10px;
    bottom: auto;
  }

  .broker-animation .brokerAnim {
    position: relative;
    height: auto;
    width: auto;
    left: auto;
    -webkit-transform: scale(0.44) translateY(0px);
         -o-transform: scale(0.44) translateY(0px);
            transform: scale(0.44) translateY(0px);
  }

  .broker-animation .brokerAnim__primaryBoxTitle {
    font-size: 16px;
  }

  .broker-animation .brokerAnim__primaryBoxTitle--micro {
    font-size: 12px;
  }

  .broker-animation .brokerAnim .brokerAnimCoverage {
    top: calc(50% - 200px);
    right: 200px;
    zoom: normal;
  }

  .broker-animation .brokerAnim .brokerAnimDate {
    top: calc(50% - 160px);
    right: 280px;
    zoom: normal;
  }

  .broker-animation .brokerAnim .brokerAnimApproach {
    top: calc(50% - 220px);
    right: 100px;
    zoom: normal;
  }

  .broker-animation .brokerAnim .brokerAnimOptions {
    top: calc(50% - 200px);
    right: 205px;
    zoom: normal;
  }

  .broker-animation .brokerAnim .brokerAnimOptions .brokerAnimEmployees {
    right: -100px;
  }

  .broker-animation .brokerAnim .brokerAnimContribution {
    top: calc(50% - 160px);
    right: 180px;
    zoom: normal;
  }

  .broker-animation .brokerAnim .brokerAnimDays {
    top: calc(50% - 70px);
    right: 250px;
    zoom: normal;
  }

  .broker-animation .brokerAnim .brokerAnimEmail {
    top: calc(50% - 260px);
    right: 100px;
    zoom: normal;
  }

  .broker-animation .brokerAnim .brokerAnimEnroll {
    top: calc(50% - 180px);
    right: 190px;
    zoom: normal;
  }

  .broker-animation .brokerAnim .brokerAnimSuccess {
    top: calc(50% - 200px);
    right: 250px;
    zoom: normal;
  }
}

@media screen and (min-width: 900px) {
  .broker-animation .actionList {
    top: calc(50% - 60px);
    right: 160px;
  }

  .broker-animation .brokerAnim {
    -webkit-transform: scale(0.6) translateY(0px);
         -o-transform: scale(0.6) translateY(0px);
            transform: scale(0.6) translateY(0px);
  }
}

@media screen and (min-width: 1100px) {
  .broker-animation .brokerAnim {
    -webkit-transform: scale(0.8) translateY(-160px);
         -o-transform: scale(0.8) translateY(-160px);
            transform: scale(0.8) translateY(-160px);
  }
}

@media screen and (min-width: 1280px) {
  .broker-animation .brokerAnim {
    -webkit-transform: scale(1) translateY(-160px);
         -o-transform: scale(1) translateY(-160px);
            transform: scale(1) translateY(-160px);
  }
}

@-webkit-keyframes brokerBarA {
  0% {
    width: 1%;
  }

  100% {
    width: 80%;
  }
}

@-o-keyframes brokerBarA {
  0% {
    width: 1%;
  }

  100% {
    width: 80%;
  }
}

@keyframes brokerBarA {
  0% {
    width: 1%;
  }

  100% {
    width: 80%;
  }
}

@-webkit-keyframes brokerBarB {
  0% {
    width: 2%;
  }

  100% {
    width: 95%;
  }
}

@-o-keyframes brokerBarB {
  0% {
    width: 2%;
  }

  100% {
    width: 95%;
  }
}

@keyframes brokerBarB {
  0% {
    width: 2%;
  }

  100% {
    width: 95%;
  }
}

@-webkit-keyframes brokerBarC {
  0% {
    width: 3%;
  }

  100% {
    width: 100%;
  }
}

@-o-keyframes brokerBarC {
  0% {
    width: 3%;
  }

  100% {
    width: 100%;
  }
}

@keyframes brokerBarC {
  0% {
    width: 3%;
  }

  100% {
    width: 100%;
  }
}

@-webkit-keyframes mouseMoveToBrokerAction {
  to {
    top: 65px;
    left: 80px;
  }
}

@-o-keyframes mouseMoveToBrokerAction {
  to {
    top: 65px;
    left: 80px;
  }
}

@keyframes mouseMoveToBrokerAction {
  to {
    top: 65px;
    left: 80px;
  }
}

@keyframes mouseMoveToBrokerAction {
  to {
    top: 65px;
    left: 80px;
  }
}

@-webkit-keyframes mouseMoveToBrokerCoverageOp2 {
  to {
    top: 205px;
    left: 190px;
  }
}

@-o-keyframes mouseMoveToBrokerCoverageOp2 {
  to {
    top: 205px;
    left: 190px;
  }
}

@keyframes mouseMoveToBrokerCoverageOp2 {
  to {
    top: 205px;
    left: 190px;
  }
}

@-webkit-keyframes mouseMoveToBrokerCoverageOp1 {
  from {
    top: 205px;
    left: 190px;
  }

  to {
    top: 205px;
    left: 70px;
  }
}

@-o-keyframes mouseMoveToBrokerCoverageOp1 {
  from {
    top: 205px;
    left: 190px;
  }

  to {
    top: 205px;
    left: 70px;
  }
}

@keyframes mouseMoveToBrokerCoverageOp1 {
  from {
    top: 205px;
    left: 190px;
  }

  to {
    top: 205px;
    left: 70px;
  }
}

@-webkit-keyframes mouseMoveToBrokerDateOption {
  to {
    top: 200px;
    left: 80px;
  }
}

@-o-keyframes mouseMoveToBrokerDateOption {
  to {
    top: 200px;
    left: 80px;
  }
}

@keyframes mouseMoveToBrokerDateOption {
  to {
    top: 200px;
    left: 80px;
  }
}

@-webkit-keyframes mouseMoveToBrokerDateDone {
  from {
    top: 200px;
    left: 80px;
  }

  to {
    top: 265px;
    left: 200px;
  }
}

@-o-keyframes mouseMoveToBrokerDateDone {
  from {
    top: 200px;
    left: 80px;
  }

  to {
    top: 265px;
    left: 200px;
  }
}

@keyframes mouseMoveToBrokerDateDone {
  from {
    top: 200px;
    left: 80px;
  }

  to {
    top: 265px;
    left: 200px;
  }
}

@-webkit-keyframes mouseMoveToBrokerApproachOption {
  to {
    top: 200px;
    left: 80px;
  }
}

@-o-keyframes mouseMoveToBrokerApproachOption {
  to {
    top: 200px;
    left: 80px;
  }
}

@keyframes mouseMoveToBrokerApproachOption {
  to {
    top: 200px;
    left: 80px;
  }
}

@-webkit-keyframes mouseMoveToBrokerApproachDone {
  from {
    top: 200px;
    left: 80px;
  }

  to {
    top: 265px;
    left: 225px;
  }
}

@-o-keyframes mouseMoveToBrokerApproachDone {
  from {
    top: 200px;
    left: 80px;
  }

  to {
    top: 265px;
    left: 225px;
  }
}

@keyframes mouseMoveToBrokerApproachDone {
  from {
    top: 200px;
    left: 80px;
  }

  to {
    top: 265px;
    left: 225px;
  }
}

@-webkit-keyframes mouseMoveToBrokerBreakdown {
  to {
    top: 368px;
    left: 295px;
  }
}

@-o-keyframes mouseMoveToBrokerBreakdown {
  to {
    top: 368px;
    left: 295px;
  }
}

@keyframes mouseMoveToBrokerBreakdown {
  to {
    top: 368px;
    left: 295px;
  }
}

@-webkit-keyframes mouseMoveToBrokerBreakdownDone {
  from {
    top: 368px;
    left: 295px;
  }

  to {
    top: 450px;
    left: 218px;
  }
}

@-o-keyframes mouseMoveToBrokerBreakdownDone {
  from {
    top: 368px;
    left: 295px;
  }

  to {
    top: 450px;
    left: 218px;
  }
}

@keyframes mouseMoveToBrokerBreakdownDone {
  from {
    top: 368px;
    left: 295px;
  }

  to {
    top: 450px;
    left: 218px;
  }
}

@-webkit-keyframes mouseMoveToBrokerEmployeesClose {
  to {
    top: 18px;
    left: 365px;
  }
}

@-o-keyframes mouseMoveToBrokerEmployeesClose {
  to {
    top: 18px;
    left: 365px;
  }
}

@keyframes mouseMoveToBrokerEmployeesClose {
  to {
    top: 18px;
    left: 365px;
  }
}

@-webkit-keyframes mouseMoveToBrokerContributionOp2 {
  to {
    top: 195px;
    left: 255px;
  }
}

@-o-keyframes mouseMoveToBrokerContributionOp2 {
  to {
    top: 195px;
    left: 255px;
  }
}

@keyframes mouseMoveToBrokerContributionOp2 {
  to {
    top: 195px;
    left: 255px;
  }
}

@-webkit-keyframes mouseMoveToBrokerContributionOp1 {
  from {
    top: 195px;
    left: 255px;
  }

  to {
    top: 195px;
    left: 128px;
  }
}

@-o-keyframes mouseMoveToBrokerContributionOp1 {
  from {
    top: 195px;
    left: 255px;
  }

  to {
    top: 195px;
    left: 128px;
  }
}

@keyframes mouseMoveToBrokerContributionOp1 {
  from {
    top: 195px;
    left: 255px;
  }

  to {
    top: 195px;
    left: 128px;
  }
}

@-webkit-keyframes mouseMoveToBrokerContributionDone {
  from {
    top: 195px;
    left: 128px;
  }

  to {
    top: 265px;
    left: 195px;
  }
}

@-o-keyframes mouseMoveToBrokerContributionDone {
  from {
    top: 195px;
    left: 128px;
  }

  to {
    top: 265px;
    left: 195px;
  }
}

@keyframes mouseMoveToBrokerContributionDone {
  from {
    top: 195px;
    left: 128px;
  }

  to {
    top: 265px;
    left: 195px;
  }
}

@-webkit-keyframes mouseMoveToBrokerDaysStart {
  to {
    top: 110px;
    left: 28px;
  }
}

@-o-keyframes mouseMoveToBrokerDaysStart {
  to {
    top: 110px;
    left: 28px;
  }
}

@keyframes mouseMoveToBrokerDaysStart {
  to {
    top: 110px;
    left: 28px;
  }
}

@-webkit-keyframes mouseMoveToBrokerDaysMid {
  from {
    top: 110px;
    left: 28px;
  }

  to {
    top: 110px;
    left: 202px;
  }
}

@-o-keyframes mouseMoveToBrokerDaysMid {
  from {
    top: 110px;
    left: 28px;
  }

  to {
    top: 110px;
    left: 202px;
  }
}

@keyframes mouseMoveToBrokerDaysMid {
  from {
    top: 110px;
    left: 28px;
  }

  to {
    top: 110px;
    left: 202px;
  }
}

@-webkit-keyframes mouseMoveToBrokerDaysDone {
  from {
    top: 110px;
    left: 202px;
  }

  to {
    top: 195px;
    left: 200px;
  }
}

@-o-keyframes mouseMoveToBrokerDaysDone {
  from {
    top: 110px;
    left: 202px;
  }

  to {
    top: 195px;
    left: 200px;
  }
}

@keyframes mouseMoveToBrokerDaysDone {
  from {
    top: 110px;
    left: 202px;
  }

  to {
    top: 195px;
    left: 200px;
  }
}

@-webkit-keyframes mouseMoveToBrokerEmailDone {
  to {
    top: 410px;
    left: 190px;
  }
}

@-o-keyframes mouseMoveToBrokerEmailDone {
  to {
    top: 410px;
    left: 190px;
  }
}

@keyframes mouseMoveToBrokerEmailDone {
  to {
    top: 410px;
    left: 190px;
  }
}

/*---------------------------
## Alignments
---------------------------*/

.alignleft {
  display: inline;
  float: left;
  margin-right: 1.5em;
}

.alignright {
  display: inline;
  float: right;
  margin-left: 1.5em;
}

.aligncenter {
  clear: both;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/*---------------------------
## Comments
---------------------------*/

/*---------------------------
## Common
---------------------------*/

.rtLink {
  color: #22c8e3;
  text-decoration: none;
}

.rtPlayLink {
  font-size: 0.875em;
  font-family: "ripplingFontPrag";
  letter-spacing: 1.25px;
  color: #000 !important;
}

.rtPlayLink .linkArrow {
  opacity: 1 !important;
  top: 0.3px !important;
  right: -12px !important;
  border-left: 6px solid #000 !important;
}

.rtPlayLink:hover {
  color: #22c8e3 !important;
}

.rtPlayLink:hover .linkArrow {
  border-left: 6px solid #22c8e3 !important;
}

.rtHide {
  display: none;
}

/**
 * Need to move to RPass new template page specific CSS.
 */

.ruiBtn--large.ruiBtn--go.rpass-whitepaper-download {
  padding-right: 40px;
}

.ruiBtn--noCase {
  text-transform: none;
}

.ruiBtn--linkGoActive {
  color: #22c8e3;
}

.ruiBtn--linkGoActive .linkArrow {
  opacity: 1 !important;
  right: -16px !important;
}

.ruiBtn--font16 {
  font-size: 16px;
}

.ruiBtn--font16 .linkArrow {
  top: 2px !important;
}

.whitePaperDownloads__title {
  font-family: 'ripplingFontPrag';
  font-size: 12px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 15px 0;
  border-bottom: 1px solid #000;
  margin-bottom: 15px;
}

.whitePaperDownloads .ruiBtn {
  font-size: 15px;
  margin: 10px 0;
  display: inline-block;
  text-align: left;
  text-transform: none;
}

.whitePaperDownloads .ruiBtn .linkArrow {
  opacity: 1;
  top: 3px;
  right: -10px;
  border-top-width: 5px;
  border-bottom-width: 5px;
  border-left-width: 5px;
  border-left-color: #000;
}

.whitePaperDownloads .ruiBtn:hover .linkArrow {
  border-left-color: #22c8e3;
}

.cylanceContent {
  float: right;
  padding-top: 10px;
  font-size: 0.75em;
}

.ruiBlog__categoryTitle {
  text-align: center;
  font-size: 2.5em;
  color: #424242;
  font-family: ripplingFontMedium;
  padding: 30px 0;
}

.ruiBlog__postContent {
  font-size: 1.125em;
  font-family: ripplingFontNormal;
}

.ruiBlog__postContent a {
  color: #22c8e3;
  text-decoration: none;
}

.ruiBlog__postContent p {
  margin: 1.5em 0;
  line-height: 1.5;
}

.ruiBlog__postContent h1 {
  font-size: 2.5em;
  font-family: ripplingFontMedium;
}

.ruiBlog__postContent h2 {
  font-size: 2em;
  font-family: ripplingFontMedium;
}

.ruiBlog__postContent h3 {
  font-size: 1.75em;
  font-family: ripplingFontMedium;
}

.ruiBlog__postContent h4 {
  font-size: 1.5em;
  font-family: ripplingFontMedium;
}

.ruiBlog__postContent h5 {
  font-size: 1.25em;
  font-family: ripplingFontMedium;
}

.ruiBlog__postContent h6 {
  font-size: 1em;
  font-family: ripplingFontMedium;
}

.ruiBlog__postContent img {
  max-width: 100%;
}

.ruiBlog__postContent .postList li {
  padding-bottom: 1em;
}

@media screen and (max-width: 767px) {
  .ruiBlog__postContent img {
    max-width: 100%;
    height: auto !important;
  }
}

.ruiBlog__postContent .caption-text {
  text-align: center;
  font-size: 0.75em;
  font-style: italic;
}

.ruiBlog__postContent ul {
  margin: 0 auto;
}

.ruiBlog__postContent ul li {
  padding-bottom: 1em;
}

.ruiBlog__postContent ul li p {
  margin: 1em 0 0;
}

@media screen and (max-width: 767px) {
  .ruiBlog__postContent img {
    max-width: 100%;
    height: auto !important;
  }
}

.ruiBlog__postSuggest {
  border-top: 1px solid #ededed;
  padding: 40px 0 10px;
  text-align: center;
  font-family: ripplingFontMedium;
  font-size: 1.625em;
}

@media screen and (min-width: 768px) {
  .ruiBlog__categoryTitle {
    padding: 60px 0;
  }
}

.single .ruiFeaturePost {
  border-bottom: 1px solid #e9e9e9;
  padding-bottom: 60px;
}

.single .ruiFeaturePost .ruiContainer {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}

.single .ruiFeaturePost__title {
  text-decoration: none;
}

.single .ruiFeaturePost__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media screen and (min-width: 768px) {
  .single .ruiFeaturePost__info {
    margin-top: 3em;
  }
}

.single .ruiFeaturePost__caption {
  font-size: 1.125em;
  font-family: ripplingFontNormal;
  margin-top: 0;
}

.single .ruiFeaturePost__image {
  background-size: contain;
}

/*---------------------------
## Cylance
---------------------------*/

.cylanceBlock {
  background-color: #000;
  padding: 6rem 0 7rem;
  color: #fff;
  text-align: center;
}

.cylanceBlock__title {
  width: 480px;
  max-width: 100%;
  margin: 0 auto;
  font-size: 2.375em;
}

.cylanceBlock__caption {
  width: 640px;
  max-width: 100%;
  margin: 2rem auto 2.2rem;
  line-height: 1.6;
}

.cylanceBlock__image {
  width: 100%;
}

.cylanceBlock__features {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 5rem;
}

.cylanceBlock__features > div {
  width: 267px;
  height: 267px;
  margin: 40px 0;
  max-width: 100%;
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

@media screen and (min-width: 600px) {
  .cylanceBlock__features {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}

/*---------------------------
## Media
---------------------------*/

.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
  border: none;
  margin-bottom: 0;
  margin-top: 0;
  padding: 0;
}

/* Make sure embeds and iframes fit their containers. */

embed,
iframe,
object {
  max-width: 100%;
}

/* Make sure logo link wraps around logo image. */

.custom-logo-link {
  display: inline-block;
}

/* CAPTIONS */

.wp-caption {
  margin-bottom: 1.5em;
  max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.wp-caption .wp-caption-text {
  margin: 0.8075em 0;
}

.wp-caption-text {
  text-align: center;
}

/* GALLERIES */

.gallery {
  margin-bottom: 1.5em;
}

.gallery-item {
  display: inline-block;
  text-align: center;
  vertical-align: top;
  width: 100%;
}

.gallery-columns-2 .gallery-item {
  max-width: 50%;
}

.gallery-columns-3 .gallery-item {
  max-width: 33.33333%;
}

.gallery-columns-4 .gallery-item {
  max-width: 25%;
}

.gallery-columns-5 .gallery-item {
  max-width: 20%;
}

.gallery-columns-6 .gallery-item {
  max-width: 16.66667%;
}

.gallery-columns-7 .gallery-item {
  max-width: 14.28571%;
}

.gallery-columns-8 .gallery-item {
  max-width: 12.5%;
}

.gallery-columns-9 .gallery-item {
  max-width: 11.11111%;
}

.gallery-caption {
  display: block;
}

/*---------------------------
## Navigation
---------------------------*/

.navigation ul {
  margin: 0;
  padding: 0;
}

.navigation .mobile-nav-button {
  display: none;
  color: #000;
  position: relative;
  margin: 0;
  z-index: 9999;
  cursor: pointer;
}

@media screen and (min-width: 0px) and (max-width: 768px) {
  .navigation .mobile-nav-button {
    display: block;
  }
}

.navigation .mobile-nav-button__line {
  width: 24px;
  height: 2px;
  background: #000;
  position: relative;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.navigation .mobile-nav-button__line:nth-of-type(2) {
  margin: 4px 0;
}

.navigation .mobile-nav-button__line--1 {
  -webkit-transform: rotate(45deg);
       -o-transform: rotate(45deg);
          transform: rotate(45deg);
  background: #fff;
}

.navigation .mobile-nav-button__line--2 {
  display: none;
}

.navigation .mobile-nav-button__line--3 {
  background: #fff;
  -webkit-transform: rotate(135deg);
       -o-transform: rotate(135deg);
          transform: rotate(135deg);
  top: 0px;
  position: absolute;
}

.navigation__mobile__menu {
  background-color: #000;
  padding-top: 50px !important;
}

.navigation__mobile-menu {
  background-color: #000;
  font-family: ripplingFontMedium;
  display: block;
  width: 100%;
  right: -100%;
  height: 100vh;
  background: #ffffff;
  position: fixed;
  z-index: 1000;
  -webkit-transition: 0.3s ease;
  -o-transition: 0.3s ease;
  transition: 0.3s ease;
  top: 0;
  opacity: 0;
}

.navigation__mobile-menu ul {
  position: relative;
  top: 0;
  padding: 0;
  text-align: left;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.navigation__mobile-menu ul li {
  padding-left: 35px;
  list-style: none;
  -webkit-box-flex: 100%;
      -ms-flex: 100%;
          flex: 100%;
}

.navigation__mobile-menu ul li.loginBtn,
.navigation__mobile-menu ul li.signUp {
  margin-top: 25px;
  -webkit-box-flex: 50%;
      -ms-flex: 50%;
          flex: 50%;
}

.navigation__mobile-menu ul li a {
  font-size: 16px;
  font-size: 1rem;
  margin: 12px auto;
  text-align: center;
}

.navigation__mobile-menu ul li > ul {
  position: inherit;
  display: none;
}

.navigation__mobile-menu ul li.menu-item-has-children > a {
  pointer-events: none;
  font-size: 17px;
  letter-spacing: 0.05em;
}

.navigation__mobile-menu ul li.menu-item-has-children > a:after {
  content: "";
  position: absolute;
  top: 1px;
  right: -25px;
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
  width: 0;
  height: 0;
  display: inline-block;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 9px solid #000;
}

.navigation__mobile-menu ul li.menu-item-has-children > a > ul > li {
  margin: 12px auto;
}

.navigation__mobile-menu ul li.menu-item-has-children.active > a:after {
  -webkit-transform: translate(0%, -50%) rotate(90deg);
       -o-transform: translate(0%, -50%) rotate(90deg);
          transform: translate(0%, -50%) rotate(90deg);
}

.navigation__mobile-menu ul .loginMobileMenu {
  padding-left: 0;
  background-color: #22c8e3;
  text-align: center;
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 10px 0;
}

.navigation__mobile-menu ul .loginMobileMenu a {
  color: #fff;
}

.navigation__mobile-menu ul .openMenu {
  background: #000;
  padding: 20px;
}

.navigation__mobile-menu ul .openMenu a {
  color: #fff;
}

.navigation__mobile-menu ul .openMenu.menu-item-has-children > a:after {
  -webkit-transform: rotate(0deg);
       -o-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
  border-left: 9px solid #fff;
}

.navigation__mobile-menu ul .openMenu.menu-item-has-children ul {
  padding-top: 30px;
}

.navigation__mobile-menu ul .openMenu.menu-item-has-children ul > li {
  padding-left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.navigation__mobile-menu ul .openMenu.menu-item-has-children ul > li a {
  margin: 0;
  padding: 0;
  padding-right: 16px;
  font-family: ripplingFontPrag;
  color: #22c8e3;
  font-size: 13px;
  line-height: 1.4;
  max-width: 120px;
  width: 100%;
  text-align: left;
  letter-spacing: 0.125em;
}

.navigation__mobile-menu ul .openMenu.menu-item-has-children ul > li ul {
  padding-top: 0px;
}

.navigation__mobile-menu ul .openMenu.menu-item-has-children ul > li ul li a {
  font-family: ripplingFontNormal;
  color: #fff;
  font-size: 13px;
  line-height: 1.4;
  text-transform: unset;
  max-width: 250px;
  width: 100%;
  text-align: left;
  padding-bottom: 10px;
  letter-spacing: 0.01em;
}

.navigation__mobile-menu ul .openMenu.menu-item-has-children ul > li ul li a:hover {
  font-weight: bold;
  color: #22c8e3;
}

.navigation__mobile-menu ul .openMenu.menu-item-has-children ul > li ul li:last-child a {
  padding-bottom: 25px;
}

.navigation__mobile-menu ul .openMenu--show.menu-item-has-children ul {
  display: block;
}

.navigation__mobile-menu ul .openMenu--show.menu-item-has-children a:after {
  -webkit-transform: rotate(90deg);
       -o-transform: rotate(90deg);
          transform: rotate(90deg);
}

.navigation__mobile-menu ul .openMenuClick {
  background: #fff;
  padding: 20px;
}

.navigation__mobile-menu ul .openMenuClick a {
  color: #000;
}

.navigation__mobile-menu ul .openMenuClick.menu-item-has-children > a:after {
  -webkit-transform: rotate(0deg);
       -o-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
  border-left: 9px solid #000;
}

.navigation__mobile-menu ul .openMenuClick.menu-item-has-children ul > li {
  padding-left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.navigation__mobile-menu ul .openMenuClick.menu-item-has-children ul > li a {
  margin: 0;
  padding: 0;
  padding-right: 16px;
  padding-bottom: 10px;
  font-family: ripplingFontPrag;
  color: #22c8e3;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.125em;
  text-align: left;
}

.navigation__mobile-menu ul .openMenuClick.menu-item-has-children ul > li a:after {
  content: none;
}

.navigation__mobile-menu ul .openMenuClick.menu-item-has-children ul > li ul > li a {
  font-family: ripplingFontNormal;
  color: #000;
  font-size: 13px;
  text-transform: unset;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

.navigation__mobile-menu ul .openMenuClick.menu-item-has-children ul > li ul > li a:hover {
  font-weight: bold;
  color: #22c8e3;
}

.navigation__mobile-menu ul .openMenuClick--show {
  display: block;
}

.navigation__mobile-menu ul .openMenuClick--show.menu-item-has-children a:after {
  -webkit-transform: rotate(90deg);
       -o-transform: rotate(90deg);
          transform: rotate(90deg);
}

.navigation__mobile-menu__open {
  right: 0;
  opacity: 1;
}

.navigation__header a {
  text-decoration: none;
}

.navigation__header ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media screen and (min-width: 0px) and (max-width: 768px) {
  .navigation__header ul {
    display: none;
  }
}

.navigation__header ul li {
  margin-right: 26px;
  padding-right: 14px;
  text-transform: uppercase;
  position: relative;
  list-style: none;
  cursor: pointer;
}

.navigation__header ul li a {
  color: #000000;
  text-decoration: none;
  font-family: ripplingFontMedium;
  font-size: 13px;
}

.navigation__header ul li.current-menu-item a {
  color: #000;
}

.navigation__header ul li.menu-item-has-children:after {
  border-top: 7px solid #000;
}

.navigation__header ul li.menu-item-has-children > ul {
  display: none;
  -webkit-box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.16);
          box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.16);
}

.navigation__header ul li.menu-item-has-children > ul li {
  padding-right: 24px;
  padding-left: 0;
  border-right: 1px solid #e2e2e2;
  margin-right: 0;
  /** need to Remove **/
  display: inline-block;
  list-style-image: none;
}

.navigation__header ul li.menu-item-has-children > ul li:last-child {
  border-right: 0;
  padding-right: 0;
  padding-left: 24px;
}

.navigation__header ul li.menu-item-has-children > ul li:first-child {
  padding-left: 0;
}

.navigation__header ul li.menu-item-has-children > ul li a {
  font-size: 14px;
  font-family: ripplingFontPrag;
  text-transform: none;
  color: #000;
  padding-bottom: 0;
  line-height: 14px;
  letter-spacing: 0.125em;
  margin-bottom: 4px;
}

.navigation__header ul li.menu-item-has-children > ul li > ul {
  display: block;
  border: none;
  position: relative;
  padding: 8px 0 0;
  margin-top: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.navigation__header ul li.menu-item-has-children > ul li > ul li {
  border-right: none;
  padding-bottom: 4px;
  padding-right: 0;
  display: list-item;
  list-style: none;
  list-style-image: none;
}

.navigation__header ul li.menu-item-has-children > ul li > ul li:last-child {
  padding-left: 0;
  padding-bottom: 0;
}

.navigation__header ul li.menu-item-has-children > ul li > ul li a {
  font-family: ripplingFontNormal;
  color: #000;
  font-size: 14px;
  line-height: 18px;
  border-bottom: 1px solid transparent;
  letter-spacing: 0.01em;
}

.navigation__header ul li.menu-item-has-children > ul li > ul li a:hover {
  color: #000;
  border-color: #000;
}

.navigation__header ul li.menu-item-has-children > ul li > ul:before {
  content: none;
}

.navigation__header ul li.menu-item-has-children > ul li:after {
  content: none;
}

.navigation__header ul li.menu-item-has-children > ul:before {
  top: -6px;
  left: calc(50% - 5px);
  border: solid transparent;
  content: " ";
  position: absolute;
  pointer-events: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 9px;
  height: 9px;
  background: #fff;
  -webkit-box-shadow: -3px -2px 6px -2px rgba(0, 0, 0, 0.16);
          box-shadow: -3px -2px 6px -2px rgba(0, 0, 0, 0.16);
  -webkit-transform: translate(-50%, 0) rotate(45deg);
       -o-transform: translate(-50%, 0) rotate(45deg);
          transform: translate(-50%, 0) rotate(45deg);
}

.navigation__header ul li.menu-item-has-children > a {
  pointer-events: none;
  letter-spacing: 0.05em;
}

.navigation__header ul li.menu-item-has-children:after {
  right: 0 !important;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid #000;
  top: 3px;
}

.navigation__header ul li.menu-item-has-children:hover > ul {
  display: block;
}

.navigation__header > ul > li > ul {
  background: #fff;
  border: 1px solid #fff;
  display: none;
  position: absolute;
  top: 15px;
  right: 0;
  -webkit-transform: translateX(50%);
       -o-transform: translateX(50%);
          transform: translateX(50%);
  white-space: nowrap;
  padding: 25px;
  z-index: 10;
}

.navigation__header__menu > li > ul {
  position: relative;
  margin-top: 19px;
}

.navigation__header__menu > li > ul:after {
  content: "";
  position: absolute;
  left: 0;
  top: -25px;
  height: 25px;
  width: 100%;
}

.navigation__login__menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media screen and (min-width: 0px) and (max-width: 768px) {
  .navigation__login__menu {
    display: none;
  }
}

.navigation__login__menu li {
  margin-right: 22px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  list-style: none;
}

.navigation__login__menu li:last-child {
  margin-right: 0;
}

.navigation__login__menu li a {
  font-family: ripplingFontPrag;
  font-size: 12px;
  letter-spacing: 0.5px;
}

.navigation__loginFloat__menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media screen and (min-width: 0px) and (max-width: 768px) {
  .navigation__loginFloat__menu {
    display: none;
  }
}

.navigation__loginFloat__menu li {
  margin-right: 22px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  list-style: none;
}

.navigation__loginFloat__menu li:last-child {
  margin-right: 0;
}

.navigation__loginFloat__menu li a {
  font-size: 12px;
  letter-spacing: 0.5px;
  font-family: ripplingFontPrag;
}

.navigation__footer__menu ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.navigation__footer__menu ul li {
  list-style: none;
}

.navigation__footer__menu ul li a {
  color: #ffffff;
}

/*---------------------------
## Search
---------------------------*/

/*---------------------------
## Widgets
---------------------------*/

.widget {
  margin: 0;
  /* Make sure select elements fit in widgets. */
}

.widget select {
  max-width: 100%;
}

/*---------------------------
## Overlay [Custom Modal]
---------------------------*/

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 100;
}

.overlay__backdrop {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 0;
}

.overlay__content {
  position: absolute;
  top: 50%;
  left: 50%;
  max-height: 95%;
  -webkit-transform: translate(-50%, -50%);
       -o-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 500px;
  background-color: #fff;
  z-index: 10;
}

/*--------------------------
## New Testimonial
---------------------------*/

.testimonial {
  background: #f7f7f7;
  padding-top: 75px;
}

.testimonial .data {
  width: 745px;
  max-width: 100%;
  margin: 0 auto -75px;
}

.testimonial .data__author {
  font-size: 0.875em;
  font-family: ripplingFontPrag;
  color: #000;
  letter-spacing: 0.075em;
  position: relative;
  top: 58px;
  text-align: left;
  left: 30px;
  text-transform: uppercase;
}

@media screen and (min-width: 768px) {
  .testimonial .data__author {
    left: 350px;
  }
}

.testimonial .data__content {
  -webkit-box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.16);
          box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.16);
  background: #fff;
  border-radius: 10px;
  padding: 42px 35px;
  position: relative;
  line-height: 0;
  top: -150px;
}

.testimonial .data__content span {
  font-family: ripplingFontNormal;
  color: #000;
  font-size: 1.5em;
  letter-spacing: 0.1px;
  line-height: 1.4;
}

.testimonial .data__content span:before {
  content: "\201C";
  position: absolute;
  left: 26px;
}

.testimonial .data__content span:after {
  content: "\201D";
  position: absolute;
}

.testimonial .data__content:after {
  content: " ";
  position: absolute;
  left: 30px;
  bottom: -25px;
  width: 0;
  height: 0;
  border-top: 25px solid #fff;
  border-left: 25px solid transparent;
}

@media screen and (min-width: 768px) {
  .testimonial .data__content:after {
    left: 350px;
  }
}

/*--------------------------
## Footer SignUp Form
---------------------------*/

.footerSignUp {
  background: #000;
  padding: 0;
  padding-bottom: 15px;
  padding-top: 115px;
}

.footerSignUp .content {
  width: 970px;
  max-width: 100%;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.footerSignUp .content__notes {
  max-width: 375px;
  width: 100%;
}

.footerSignUp .content__notes .title {
  font-size: 2.375em;
  font-family: ripplingFontBook;
  color: #fff;
  padding-bottom: 1.125em;
}

.footerSignUp .content__notes .description {
  font-size: 1em;
  font-family: ripplingFontBook;
  color: #fff;
  line-height: 1.5em;
}

.footerSignUp .content__form .requestDemoPage {
  padding: 0px;
}

.footerSignUp .content__form .requestDemoPage__container--black {
  background-color: #000;
  border: none;
  padding: 0;
  padding-top: 30px;
  margin: 0;
  max-width: 350px;
  width: 100%;
}

@media screen and (min-width: 768px) {
  .footerSignUp .content__form .requestDemoPage__container {
    padding-top: 0;
  }
}

.footerSignUp .content__form .requestDemoPage__field .ruiInput {
  padding-left: 20px;
  padding-right: 20px;
}

.footerSignUp .content__form .requestDemoPage__field .ruiBtn {
  text-align: left;
}

.footerSignUp .content__form .requestDemoPage__field .ruiBtn--large {
  padding: 0 20px;
  height: 50px;
  line-height: 48px;
}

.footerSignUp .content__form .requestDemoPage__field .ruiBtn--go:after {
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 8px solid #FFF;
}

.footerSignUp .content__form .requestDemoPage__fieldIcon {
  background-size: 16px;
}

@media screen and (min-width: 768px) {
  .footerSignUp .content {
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}

/*--------------------------
## Brands component
---------------------------*/

.brands {
  text-align: center;
}

.brands__title {
  font-family: ripplingFontNormal;
  color: #fff;
  font-size: 1.375em;
  padding-bottom: 25px;
}

.brands__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0 auto;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.brands__block {
  padding: 20px;
}

.brands--full {
  padding-top: 55px;
  padding-bottom: 45px;
}

.brands--full.blackBg {
  background: #000;
}

.brands--full.blueBg {
  background: #f5fcff;
}

.brands--full.greyBg {
  background: #ededed;
}

.brands--full.greyBg .brands__title {
  color: #000;
}

.brands--container {
  padding-top: 55px;
  padding-bottom: 35px;
}

.brands--container.blackBg {
  background: #000;
}

.brands--container.blueBg {
  background: #f5fcff;
}

.brands--container.blueBg .brands__title {
  color: #000;
}

/*-----------------------------
## Feature Black Content Panel
------------------------------*/

.featureBlackContentBlock {
  background: #000;
  color: #fff;
  text-align: center;
  padding-top: 82px;
  padding-bottom: 114px;
}

.featureBlackContentBlock .wrapper {
  width: 645px;
  max-width: 100%;
  margin: 0 auto;
}

.featureBlackContentBlock__title {
  font-family: ripplingFontBook;
  font-size: 2.375em;
  padding-bottom: 40px;
}

.featureBlackContentBlock__caption {
  font-family: ripplingFontNormal;
  font-size: 1.125em;
  padding-bottom: 90px;
}

.featureBlackContentBlock__subServices {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0 auto;
  width: 645px;
  max-width: 100%;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

@media screen and (min-width: 768px) {
  .featureBlackContentBlock__subServices {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}

.featureBlackContentBlock__subServices .block {
  padding: 22.5px;
}

.featureBlackContentBlock__subServices .icon {
  height: 110px;
  width: 110px;
  background-size: 100%;
  background-repeat: no-repeat;
}

.featureBlackContentBlock__subServices .name {
  font-family: ripplingFontPrag;
  font-size: 0.8125em;
  letter-spacing: 0.125em;
  text-transform: uppercase;
  text-align: center;
  padding-top: 30px;
  width: 100px;
}

/*-----------------------------
## Light Blue Bg Content Panel
------------------------------*/

.lbContentBlock {
  width: 100%;
  min-height: 400px;
  overflow: hidden;
  background-color: #fff;
  position: relative;
  z-index: 0;
  padding: 40px 0;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
}

.lbContentBlock ul {
  text-align: left;
}

.lbContentBlock .ruiContainer {
  background-color: #f5fcff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  overflow: visible;
  padding-top: 15px;
  padding-bottom: 15px;
}

@media screen and (min-width: 768px) {
  .lbContentBlock .ruiContainer {
    padding-top: 0;
    padding-bottom: 0;
  }
}

.lbContentBlock .ruiContainer__image {
  width: 700px;
  height: auto;
}

.lbContentBlock__content {
  width: 480px;
  max-width: 100%;
  margin: 0 auto;
  text-align: left;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  padding: 0;
}

.lbContentBlock__image {
  text-align: center;
  -webkit-box-flex: 100%;
      -ms-flex: 100%;
          flex: 100%;
  overflow: hidden;
}

.lbContentBlock__image img {
  width: 290px;
  max-width: 100%;
}

.lbContentBlock__title {
  font-family: ripplingFontBook;
  color: #000;
  font-size: 2.375em;
  padding-bottom: 40px;
}

.lbContentBlock__caption {
  font-family: ripplingFontBook;
  color: #000;
  margin-bottom: 20px;
}

.lbContentBlock__caption *:first-child {
  margin-top: 0;
}

.lbContentBlock__caption ul {
  padding-left: 20px;
}

@media screen and (min-width: 768px) {
  .lbContentBlock {
    margin-top: 0;
    text-align: left;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 60px 0;
  }

  .lbContentBlock .ruiContainer {
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    padding-right: 0;
  }

  .lbContentBlock__content {
    padding: 45px 0 45px 45px;
  }

  .lbContentBlock__image {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    padding-left: 75px;
    padding-right: 0;
  }

  .lbContentBlock__image img {
    width: 550px;
    margin-left: 40px;
  }

  .lbContentBlock__image--float {
    padding: 0;
    text-align: right;
  }

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

  .lbContentBlock__image--feature {
    position: relative;
  }

  .lbContentBlock__image--feature:after {
    content: '';
    position: absolute;
    z-index: -1;
    height: 80%;
    width: 75%;
    top: 7.5%;
    left: auto;
    right: 0;
    background-color: #22c8e3;
    opacity: .42;
  }

  .lbContentBlock__image--featureMini:after {
    height: 74%;
    width: 82%;
    top: 14%;
  }

  .lbContentBlock__image--featureBelow:after {
    top: auto;
    bottom: 0;
  }

  .lbContentBlock__image--featureUp:after {
    top: 0;
    bottom: auto;
  }

  .lbContentBlock--reverse .ruiContainer {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
    padding-right: 15px;
    padding-left: 0;
  }

  .lbContentBlock--reverse .lbContentBlock__content {
    padding: 45px 45px 45px 0;
  }

  .lbContentBlock--reverse .lbContentBlock__image {
    padding-left: 0;
    padding-right: 0;
  }

  .lbContentBlock--reverse .lbContentBlock__image img {
    margin-left: -100px;
    -o-object-fit: cover;
       object-fit: cover;
  }

  .lbContentBlock--reverse .lbContentBlock__image--float {
    text-align: left;
    padding: 0;
  }

  .lbContentBlock--reverse .lbContentBlock__image--floatNormal {
    text-align: left;
    padding: 0;
  }

  .lbContentBlock--reverse .lbContentBlock__image--feature:after {
    left: 0;
    right: auto;
  }
}

@media screen and (min-width: 1280px) {
  .lbContentBlock__image img {
    width: 568px;
  }

  .lbContentBlock__image--float img {
    margin-right: -175px;
  }

  .lbContentBlock--reverse .lbContentBlock__image--float img {
    margin-left: -175px;
    margin-right: auto;
  }
}

/*-----------------------------
## Platform Intro Block
------------------------------*/

.platformIntro {
  background: #000;
  padding: 40px 0 280px;
}

.platformIntro .ruiContainer {
  text-align: center;
}

.platformIntro__title {
  font-family: ripplingFontPrag;
  font-size: 0.9375em;
  padding-bottom: 45px;
  letter-spacing: 0.125em;
  color: #fff;
}

.platformIntro__brands {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0 auto;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.platformIntro__brands .block {
  padding: 0 45px;
}

.platformIntro__brands .icon {
  width: 122px;
  height: 100px;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
}

.platformIntro__secondBox {
  color: #000;
  background: #fff;
  text-align: center;
  -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
          box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  -webkit-transform: translateY(-220px);
       -o-transform: translateY(-220px);
          transform: translateY(-220px);
  margin-bottom: -180px;
}

.platformIntro__secondBox .title {
  font-family: ripplingFontNormal;
  font-size: 1.75em;
  padding-top: 80px;
  padding-bottom: 55px;
}

.platformIntro__secondBox .title span {
  font-family: ripplingFontMedium;
}

.platformIntro__secondBox .platformApps {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0 auto;
  padding-bottom: 55px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

@media screen and (min-width: 768px) {
  .platformIntro__secondBox .platformApps {
    -ms-flex-pack: distribute;
        justify-content: space-around;
  }
}

.platformIntro__secondBox .platformApps__block {
  padding: 0;
  padding-bottom: 25px;
  max-width: 100%;
  width: 242px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.platformIntro__secondBox .platformApps__icon {
  width: 100px;
  height: 100px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin: 0 auto;
}

.platformIntro__secondBox .platformApps__title {
  font-family: ripplingFontPrag;
  font-size: 0.825em;
  padding-top: 36px;
  padding-bottom: 20px;
  letter-spacing: 0.125em;
}

.platformIntro__secondBox .platformApps__caption {
  font-family: ripplingFontNormal;
  font-size: 0.75em;
  padding-bottom: 1em;
  padding: 0 25px;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.platformIntro__secondBox .platformApps__link {
  padding-top: 20px;
}

.platformIntro__secondBox .platformApps__link a {
  color: #22c8e3;
  font-size: 0.75em;
  font-family: ripplingFontPrag;
}

.platformIntro__secondBox .platformApps__link a .linkArrow {
  top: 1px;
  opacity: 1;
  right: -10px;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 4px solid #22C8E3;
}

/*-----------------------------
## Step Component Block
------------------------------*/

.stepComponent .ruiContainer {
  text-align: center;
}

.stepComponent__title {
  font-family: ripplingFontBook;
  font-size: 2.625em;
  padding-top: 160px;
  padding-bottom: 20px;
}

.stepComponent__caption {
  font-family: ripplingFontNormal;
  font-size: 1.25em;
}

.stepComponent__steps {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.stepComponent__steps .block {
  padding: 22.5px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
}

@media screen and (min-width: 768px) {
  .stepComponent__steps .block {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    padding: 45px;
  }
}

.stepComponent__steps .image {
  width: 272px;
  height: 247px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  margin: 0 auto;
}

.stepComponent__steps .stepContent {
  padding: 30px 0 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 588px;
  max-width: 100%;
}

@media screen and (min-width: 768px) {
  .stepComponent__steps .stepContent {
    padding: 0;
    padding-top: 80px;
  }
}

.stepComponent__steps .stepContent__count {
  color: #22c8e3;
  font-family: ripplingFontBook;
  font-size: 4.6875em;
  padding: 0 15px 0 0;
  line-height: 1;
}

@media screen and (min-width: 768px) {
  .stepComponent__steps .stepContent__count {
    padding: 0 35px;
  }
}

.stepComponent__steps .stepContent__title {
  font-family: ripplingFontNormal;
  font-size: 1.625em;
  padding-bottom: 16px;
  text-align: left;
}

.stepComponent__steps .stepContent__caption {
  font-family: ripplingFontBook;
  font-size: 1.125em;
  text-align: left;
}

@media screen and (min-width: 768px) {
  .stepComponent__steps .stepContent__caption {
    width: 405px;
    max-width: 100%;
  }
}

/*-----------------------------
## Highlight Component Block
------------------------------*/

.highlightBlock {
  overflow: hidden;
}

.highlightBlock .ruiContainer {
  text-align: center;
}

.highlightBlock__title {
  font-family: ripplingFontBook;
  font-size: 2.25em;
  padding-top: 120px;
}

.highlightBlock__caption {
  font-family: ripplingFontBook;
  font-size: 1em;
  padding-top: 20px;
  padding-bottom: 145px;
}

.highlightBlock__imageSection {
  background: #A1E7F3;
}

.highlightBlock__imageSection img {
  -webkit-transform: translateY(-80px);
       -o-transform: translateY(-80px);
          transform: translateY(-80px);
  width: 100%;
  margin-bottom: -90px;
}

/*-----------------------------
## Simple Block Component Block
------------------------------*/

.simpleContentBlock .ruiContainer {
  text-align: center;
  background-color: #EDEDED;
  padding-top: 90px;
  padding-bottom: 90px;
}

.simpleContentBlock__title {
  font-family: ripplingFontBook;
  font-size: 2.25em;
}

.simpleContentBlock__caption {
  font-family: ripplingFontBook;
  font-size: 1em;
  padding-top: 20px;
  padding-bottom: 45px;
}

/*--------------------------------------------------------------
# Layout
--------------------------------------------------------------*/

/*---------------------------
## Override of UIkit
---------------------------*/

.ruiAccPartnerBlock {
  background-color: #d4ff00;
  padding: 90px 0 0;
  margin-bottom: 40px;
  color: #000;
  text-align: center;
  font-family: ripplingFontBook;
}

.ruiAccPartnerBlock .ruiContainer {
  padding: 0;
}

.ruiAccPartnerBlock__title {
  padding: 0 15px;
  font-size: 2.125em;
  font-family: ripplingFontLight;
  margin-bottom: 60px;
}

.ruiAccPartnerBlock .ruiAccSummaryCard {
  -webkit-box-shadow: 0 3px 30px rgba(0, 0, 0, 0.16);
          box-shadow: 0 3px 30px rgba(0, 0, 0, 0.16);
  background: #fff;
  -webkit-transform: translateY(40px);
       -o-transform: translateY(40px);
          transform: translateY(40px);
  padding: 30px 20px;
  width: calc(100% - 20px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
}

.ruiAccPartnerBlock .ruiAccSummaryCard__title {
  font-size: 0.875em;
  -webkit-box-flex: 100%;
      -ms-flex: 100%;
          flex: 100%;
  text-transform: uppercase;
  font-family: ripplingFontPrag;
  letter-spacing: 0.15em;
}

.ruiAccPartnerBlock .ruiAccSummaryCard__sub_title {
  font-size: 0.75em;
  margin-bottom: 40px;
  -webkit-box-flex: 100%;
      -ms-flex: 100%;
          flex: 100%;
  font-family: ripplingFontLight;
}

.ruiAccPartnerBlock .ruiAccSummaryCard__pricing_info {
  font-size: 2.25em;
  -webkit-box-flex: 100%;
      -ms-flex: 100%;
          flex: 100%;
  font-family: ripplingFontBook;
}

.ruiAccPartnerBlock .ruiAccSummaryCard__pricing_info_sub_title {
  font-size: 1.25em;
  -webkit-box-flex: 100%;
      -ms-flex: 100%;
          flex: 100%;
  margin-bottom: 40px;
  font-family: ripplingFontLight;
}

.ruiAccPartnerBlock .ruiAccSummaryCard__itemsection {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 650px;
  max-width: 100%;
}

.ruiAccPartnerBlock .ruiAccSummaryCard__itemsection .block {
  margin: 0 auto 25px;
  width: 320px;
  max-width: 100%;
  padding: 25px;
}

@media screen and (min-width: 992px) {
  .ruiAccPartnerBlock .ruiAccSummaryCard__itemsection .block {
    margin: 0;
    width: 375px;
    max-width: 100%;
  }
}

.ruiAccPartnerBlock .ruiAccSummaryCard__itemsection .block__title {
  font-size: 1.5em;
  font-weight: bold;
  font-family: ripplingFontBook;
  color: #000;
}

.ruiAccPartnerBlock .ruiAccSummaryCard__itemsection .block__subTitle {
  font-size: 1em;
  font-family: ripplingFontNormal;
  color: #000;
  padding-bottom: 20px;
}

.ruiAccPartnerBlock .ruiAccSummaryCardItem {
  padding: 12px 0 12px 38px;
  width: 325px;
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  max-width: 100%;
  position: relative;
  text-align: left;
}

.ruiAccPartnerBlock .ruiAccSummaryCardItem__title {
  font-size: 1em;
  font-family: ripplingFontBold;
}

.ruiAccPartnerBlock .ruiAccSummaryCardItem__caption {
  font-size: 0.875em;
  font-family: ripplingFontLight;
}

.ruiAccPartnerBlock .ruiAccSummaryCardItem:before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  height: 24px;
  width: 24px;
  background-image: url(https://cdn.rippling.com/static/marketing/assets/icon-check-green.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50%;
}

@media screen and (min-width: 768px) {
  .ruiAccPartnerBlock {
    margin-bottom: -60px;
  }

  .ruiAccPartnerBlock__title {
    margin-bottom: 120px;
  }

  .ruiAccPartnerBlock__subBlockTitle {
    padding: 40px 15px 25px;
  }

  .ruiAccPartnerBlock__subBlockCaption {
    margin-bottom: -20px;
  }

  .ruiAccPartnerBlock .ruiAccSummaryCard {
    -webkit-transform: translateY(-60px);
         -o-transform: translateY(-60px);
            transform: translateY(-60px);
    padding: 40px 60px 40px;
  }

  .ruiAccPartnerBlock .ruiAccSummaryCard__title {
    margin-bottom: 0px;
  }

  .ruiAccPartnerBlock .ruiAccSummaryCard__contentRow--head {
    font-size: .812em;
    letter-spacing: 1.25px;
    padding-bottom: 50px;
  }

  .ruiAccPartnerBlock .ruiAccSummaryCard__contentRow--caption {
    font-size: 1.125em;
  }

  .ruiAccPartnerBlock .ruiAccSummaryCard__contentRow:nth-child(2) > div {
    padding-bottom: 50px;
  }

  .ruiAccPartnerBlock .ruiAccSummaryCard__contentRow--footer > div:nth-child(1) {
    font-size: .812em;
    letter-spacing: 1.25px;
  }

  .ruiAccPartnerBlock .ruiAccSummaryCard__contentRowBtn {
    padding: 22px 0;
    margin: 0 12px;
    font-size: 1.562em;
  }
}

@media screen and (min-width: 992px) {
  .ruiAccPartnerBlock .ruiAccSummaryCard__head {
    text-align: left;
    margin-bottom: 80px;
  }

  .ruiAccPartnerBlock .ruiAccSummaryCard__content {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
}

.ruiAccPartnerBlock--whiteBg {
  padding: 45px 0;
  background-color: white;
  border-top: 40px solid #000;
}

.ruiAccPartnerBlock--whiteBg .ruiAccSummaryCard__title {
  font-size: 1.75em;
  -webkit-box-flex: 100%;
      -ms-flex: 100%;
          flex: 100%;
  font-family: ripplingFontBook;
}

.ruiAccPartnerBlock--whiteBg .ruiAccSummaryCard__pricing_info {
  font-size: 1.25em;
  -webkit-box-flex: 100%;
      -ms-flex: 100%;
          flex: 100%;
  font-family: ripplingFontBook;
}

.ruiAccPartnerBlock--whiteBg .ruiAccSummaryCard__pricing_info_sub_title {
  font-size: 0.75em;
  margin-bottom: 40px;
  -webkit-box-flex: 100%;
      -ms-flex: 100%;
          flex: 100%;
  font-family: ripplingFontLight;
}

.ruiAccPartnerBlock--blackBg {
  background-color: #000;
}

.ruiAccPartnerBlock--blackBg .ruiAccSummaryCardItem:before {
  background-image: url(https://cdn.rippling.com/static/marketing/assets/icon-check-blue.svg);
}

.ruiAccPartnerBlock--contentSectionBlack .ruiAccSummaryCard {
  background-color: #000;
  color: #fff;
}

.ruiAccPartnerBlock--contentSectionBlack .ruiAccSummaryCard__itemsection {
  width: 768px;
}

.ruiAccPartnerBlock--contentSectionBlack .ruiAccSummaryCard__itemsection .block {
  background-color: #fff;
  color: #000;
}

.ruiAccPartnerBlock--contentSectionBlack .ruiAccSummaryCard__itemsection .block__header {
  min-height: 5em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.ruiAccPartnerBlock--contentSectionBlack .ruiAccSummaryCard__itemsection .ruiAccSummaryCardItem__title {
  font-family: ripplingFontNormal;
}

@media screen and (max-width: 375px) {
  .ruiAccPartnerBlock {
    margin-bottom: -40px;
  }
}

.homeCoverPanel .ruiCoverPanel {
  height: calc(100vh - 48px);
  min-height: 700px;
}

.homeCoverPanel__signup {
  margin-top: 25px;
}

.homeCoverPanel__signup input {
  width: 320px;
  max-width: 100%;
  display: block;
  margin: 0 auto;
}

.homeCoverPanel__signup .ruiBtn {
  letter-spacing: 1.25px;
  margin: 15px auto 0;
  display: block;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  max-width: 100%;
}

.homeCoverPanel__signup .ruiBtn.disabled {
  opacity: .7;
  pointer-events: none;
}

@media screen and (min-width: 768px) {
  .homeCoverPanel .ruiCoverPanel {
    height: calc(100vh - 70px);
    min-height: 600px;
  }

  .homeCoverPanel__signup input {
    margin: 0;
  }

  .homeCoverPanel__signup .ruiBtn {
    margin: 15px 0 0;
  }
}

.ruiCoverPanel .ruiBtn {
  display: inline-block;
}

.ruiDemoPanel--dark:before {
  background-color: #000;
}

/**
 */

.ruiContentBlock--no__padding {
  padding: 0;
  margin: 10px auto;
  min-height: 30px;
}

.ruiContentBlock--no__padding .ruiContainer {
  width: 640px;
  max-width: 100%;
}

#ajax-content .ruiList li {
  -webkit-box-flex: 100%;
      -ms-flex: 100%;
          flex: 100%;
}

.ruiImagePanel--compact .ruiImagePanel__image {
  margin-top: -40px;
}

@media screen and (min-width: 768px) {
  .ruiImagePanel--compact .ruiImagePanel__image {
    margin-top: -180px;
  }
}

.ruiContentHeadImage__caption ul {
  width: 300px;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}

.ruiContentHeadImage--paystub {
  padding: 20px 0 0;
}

.ruiContentHeadImage--paystub .ruiContainer {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.ruiContentHeadImage--paystub .ruiContentHeadImage__leftBlock {
  width: 430px;
}

.ruiContentHeadImage--paystub .ruiContentHeadImage__rightBlock {
  width: 332px;
  height: 500px;
  background-image: url(https://cdn.rippling.com/static/marketing/assets/paystub-animation/paystub-1.png);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
  -webkit-transition: all 0.1s ease-in;
  -o-transition: all 0.1s ease-in;
  transition: all 0.1s ease-in;
  -webkit-animation: rotatePaystub 20s linear 0s normal infinite;
       -o-animation: rotatePaystub 20s linear 0s normal infinite;
          animation: rotatePaystub 20s linear 0s normal infinite;
}

.ruiContentHeadImage--paystubFloat .ruiContentHeadImage__rightBlock {
  width: 312px;
  height: 400px;
}

@media screen and (min-width: 768px) {
  .ruiContentHeadImage--paystubFloat .ruiContentHeadImage__rightBlock {
    width: 278px;
    margin-top: -80px;
  }

  .ruiContentHeadImage__caption ul {
    width: auto;
  }
}

@media screen and (min-width: 1100px) {
  .ruiContentHeadImage--paystubFloat .ruiContentHeadImage__rightBlock {
    width: 332px;
    height: 500px;
    margin-top: -110px;
  }
}

@-webkit-keyframes rotatePaystub {
  0% {
    background-image: url(https://cdn.rippling.com/static/marketing/assets/paystub-animation/paystub-1.png);
  }

  18% {
    background-image: url(https://cdn.rippling.com/static/marketing/assets/paystub-animation/paystub-1.png);
  }

  20% {
    background-image: url(https://cdn.rippling.com/static/marketing/assets/paystub-animation/paystub-2.png);
  }

  38% {
    background-image: url(https://cdn.rippling.com/static/marketing/assets/paystub-animation/paystub-2.png);
  }

  40% {
    background-image: url(https://cdn.rippling.com/static/marketing/assets/paystub-animation/paystub-3.png);
  }

  58% {
    background-image: url(https://cdn.rippling.com/static/marketing/assets/paystub-animation/paystub-3.png);
  }

  60% {
    background-image: url(https://cdn.rippling.com/static/marketing/assets/paystub-animation/paystub-4.png);
  }

  78% {
    background-image: url(https://cdn.rippling.com/static/marketing/assets/paystub-animation/paystub-4.png);
  }

  80% {
    background-image: url(https://cdn.rippling.com/static/marketing/assets/paystub-animation/paystub-5.png);
  }

  98% {
    background-image: url(https://cdn.rippling.com/static/marketing/assets/paystub-animation/paystub-5.png);
  }
}

@-o-keyframes rotatePaystub {
  0% {
    background-image: url(https://cdn.rippling.com/static/marketing/assets/paystub-animation/paystub-1.png);
  }

  18% {
    background-image: url(https://cdn.rippling.com/static/marketing/assets/paystub-animation/paystub-1.png);
  }

  20% {
    background-image: url(https://cdn.rippling.com/static/marketing/assets/paystub-animation/paystub-2.png);
  }

  38% {
    background-image: url(https://cdn.rippling.com/static/marketing/assets/paystub-animation/paystub-2.png);
  }

  40% {
    background-image: url(https://cdn.rippling.com/static/marketing/assets/paystub-animation/paystub-3.png);
  }

  58% {
    background-image: url(https://cdn.rippling.com/static/marketing/assets/paystub-animation/paystub-3.png);
  }

  60% {
    background-image: url(https://cdn.rippling.com/static/marketing/assets/paystub-animation/paystub-4.png);
  }

  78% {
    background-image: url(https://cdn.rippling.com/static/marketing/assets/paystub-animation/paystub-4.png);
  }

  80% {
    background-image: url(https://cdn.rippling.com/static/marketing/assets/paystub-animation/paystub-5.png);
  }

  98% {
    background-image: url(https://cdn.rippling.com/static/marketing/assets/paystub-animation/paystub-5.png);
  }
}

@keyframes rotatePaystub {
  0% {
    background-image: url(https://cdn.rippling.com/static/marketing/assets/paystub-animation/paystub-1.png);
  }

  18% {
    background-image: url(https://cdn.rippling.com/static/marketing/assets/paystub-animation/paystub-1.png);
  }

  20% {
    background-image: url(https://cdn.rippling.com/static/marketing/assets/paystub-animation/paystub-2.png);
  }

  38% {
    background-image: url(https://cdn.rippling.com/static/marketing/assets/paystub-animation/paystub-2.png);
  }

  40% {
    background-image: url(https://cdn.rippling.com/static/marketing/assets/paystub-animation/paystub-3.png);
  }

  58% {
    background-image: url(https://cdn.rippling.com/static/marketing/assets/paystub-animation/paystub-3.png);
  }

  60% {
    background-image: url(https://cdn.rippling.com/static/marketing/assets/paystub-animation/paystub-4.png);
  }

  78% {
    background-image: url(https://cdn.rippling.com/static/marketing/assets/paystub-animation/paystub-4.png);
  }

  80% {
    background-image: url(https://cdn.rippling.com/static/marketing/assets/paystub-animation/paystub-5.png);
  }

  98% {
    background-image: url(https://cdn.rippling.com/static/marketing/assets/paystub-animation/paystub-5.png);
  }
}

.ruiFooter__socialLink--facebook {
  padding-right: 0px !important;
}

.ruiFooter__socialLink--instagram a {
  display: none;
}

.ruiPricingBlockFeature .ruiPricingBlockFeatureList__price {
  margin: 2.2em 0 0;
}

.ruiPricingBlockFeature .ruiPricingBlockFeatureList__baseprice {
  font-size: 1em;
  margin: 0 0 2.2em;
}

.ruiPricingBlockFeature .ruiPricingBlockFeatureHead__caption {
  color: #ffffff;
}

.ruiPricingCoverPanel .ruiCoverPanel__caption {
  margin: 0 auto 30px;
}

.ruiPricingCoverPanel .ruiCoverPanel .ruiBtn {
  margin: 40px 0 20px;
}

@media screen and (min-width: 768px) {
  .ruiPricingCoverPanel .ruiCoverPanel__caption {
    margin: 0 auto 0 0;
  }
}

.ruiAccPricingBlock__subBlockTitle {
  display: none;
}

.ruiAccPricingBlock__subBlockCaption {
  display: none;
}

.referralBar {
  padding-right: 30px;
  position: relative;
}

.referralBar a.close {
  color: #fff;
  position: absolute;
  right: 10px;
  top: 10px;
  text-decoration: none;
}

.referralBar a.close:before {
  content: '';
  background-image: url("https://cdn.rippling.com/static/marketing/assets/close-button.svg");
  background-size: contain;
  height: 16px;
  width: 16px;
  display: block;
}

.referralBar a {
  color: #22c8e3;
}

.referralBar a:visited,
.referralBar a:hover,
.referralBar a:active {
  color: #22c8e3;
}

.referralBar__underline {
  cursor: pointer;
  display: inline-block;
  position: relative;
  text-decoration: underline;
}

.referralBar__underline .tooltipbox {
  background-color: #F7F7F7;
  border-radius: 3px;
  color: #000;
  left: 50%;
  margin-left: -116px;
  padding: 15px;
  position: absolute;
  top: 45px;
  text-align: left;
  visibility: hidden;
  width: 320px;
  z-index: 101;
}

.referralBar__underline .tooltipbox h2 {
  font-size: 1em;
  font-family: ripplingFontBold;
  margin-bottom: 0;
}

.referralBar__underline .tooltipbox h3 {
  font-size: 1em;
  font-family: ripplingFontBook;
}

@media screen and (min-width: 768px) {
  .referralBar__underline .tooltipbox {
    margin-left: -160px;
    top: 30px;
  }
}

.referralBar__underline .tooltipbox::after {
  bottom: 100%;
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent #F7F7F7 transparent;
  content: '';
  left: 50%;
  margin-left: -10px;
  position: absolute;
}

.referralBar__underline:hover .tooltipbox {
  visibility: visible;
}

.ruiDemoPanel__commentMessage {
  -webkit-box-pack: left;
      -ms-flex-pack: left;
          justify-content: left;
}

.requestDemoPage--success .requestDemoPage__container--black .requestDemoPageSuccess__icon {
  background-image: url(https://cdn.rippling.com/static/marketing/assets/form-icons/icon-email-light.svg) !important;
  border-color: #fff !important;
}

.requestDemoPage--success .requestDemoPage__container--black .requestDemoPageSuccess__title {
  color: #fff !important;
}

.requestDemoPage--success .requestDemoPage__container--black .requestDemoPageSuccess__caption {
  color: #fff !important;
}

.requestDemoPage--success .requestDemoPage__container--black .requestDemoPageSuccess__contact {
  color: #fff !important;
}

.requestDemoPage--success .requestDemoPage__container--black .ruiBtn {
  display: none;
}

.ruiTabBarWrapper {
  height: 74px;
  width: 100%;
  overflow: hidden;
}

.ruiTabBarWrapper .ruiTabBar__float {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  height: 60px;
}

.ruiTabBarWrapper .ruiTabBar__float .ruiTabBar__item {
  padding: 20px 4px;
}

@media screen and (min-width: 768px) {
  .ruiTabBarWrapper {
    height: 108px;
  }

  .ruiTabBarWrapper .ruiTabBar__float {
    height: 70px;
  }

  .ruiTabBarWrapper .ruiTabBar__float .ruiTabBar__item {
    padding: 20px 4px;
  }
}

.ruiCoverPanel__imageUnderContent {
  display: block;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .ruiCoverPanel__imageUnderContent {
    text-align: left;
  }
}

.ruiCoverPanel__imageUnderContent img {
  width: 260px;
  max-width: 100%;
  padding-top: 40px;
}

.ruiCoverPanel a {
  display: block;
  margin: 0 auto;
}

@media screen and (min-width: 768px) {
  .ruiCoverPanel a {
    margin: initial;
  }
}

.ruiFeatureFloat--blackBg {
  background: #000;
}

.ruiFeatureFloat--blackBg .ruiFeatureFloat__title {
  color: #fff;
  text-align: center;
  line-height: 1.4;
  font-size: 2.375em;
  margin-top: 1em;
}

.ruiFeatureFloat--blackBg .ruiFeatureFloat__caption {
  color: #fff;
  text-align: center;
  padding-top: 42px;
}

.ruiList li {
  font-size: 1.375em;
}

.ruiList li:before {
  top: 14px !important;
}

.ruiAppStore .ruiContainer.ruiAppStore--extraPadding {
  padding: 0 0 40px 0;
}

@media screen and (min-width: 900px) {
  .ruiAppStore .ruiContainer.ruiAppStore--extraPadding {
    padding: 40px;
  }
}

/*---------------------------
## Page Specific
---------------------------*/

.partner {
  background-color: #FFF;
}

.partner__cta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.partner__cta.top {
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/partner/guideline/a741d3ee-d8cb-4b8c-9172-09b2f6e3f424.png");
  background-position: center right;
  background-size: 580px;
}

.partner__cta.bottom {
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/partner/guideline/1ec51ac5-fc0a-4a57-ad00-4b0be740ee12.png");
  background-position: bottom right;
  background-size: 1100px;
  background-color: #fff;
  text-align: left;
  padding: 80px 0 40px;
}

.partner__cta__contain {
  width: 1100px;
  max-width: 100%;
  padding: 0 15px;
}

.partner__cta__contain .left {
  width: 435px;
  max-width: 100%;
  padding: 0 15px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.partner__cta__contain .left__form {
  font-family: ripplingFontLight;
  margin: 60px 0;
  position: relative;
}

.partner__cta__contain .left__form__title {
  font-size: 40px;
  line-height: 1.25;
  margin-bottom: 25px;
}

.partner__cta__contain .left__form__description {
  font-size: 18px;
  text-align: left;
  font-family: ripplingFontNormal;
  margin-bottom: 15px;
}

.partner__cta__contain .left__form .form-container {
  max-width: 100%;
  width: 340px;
}

.partner__cta__contain .left__form .requestDemoSuccess {
  display: none;
  left: 0;
  position: absolute;
  top: 75%;
  -webkit-transform: translate(0, -50%);
       -o-transform: translate(0, -50%);
          transform: translate(0, -50%);
  text-align: center;
  width: 100%;
}

.partner__cta__contain .left__form .requestDemoSuccess__icon {
  height: 60px;
  width: 60px;
  border-radius: 50%;
  border: 2px solid #000;
  margin: 0 auto;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 30px;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/form-icons/icon-email-dark.svg");
}

.partner__cta__contain .left__form .requestDemoSuccess__title {
  color: #000;
  font-size: 1.3em;
  font-family: ripplingFontMedium;
  margin: 20px 0 15px;
}

.partner__cta__contain .left__form .requestDemoSuccess__caption {
  color: #000;
  font-size: 1em;
  font-family: ripplingFontLight;
}

.partner__cta__contain .left__form .requestDemoSuccess__contact {
  color: #000;
  font-family: ripplingFontMedium;
  margin: 15px 0 40px;
}

.partner__cta__contain .left__form--success .form-container {
  opacity: 0;
  visibility: hidden;
}

.partner__cta__contain .left__form--success .requestDemoSuccess {
  display: block;
}

@media screen and (max-width: 1099px) {
  .partner__cta.top,
  .partner__cta.bottom {
    background-image: none;
  }

  .partner__cta__contain .left {
    margin: 0 auto;
  }

  .partner__cta__contain .left__form {
    margin: 40px 0;
    font-family: ripplingFontLight;
  }

  .partner__cta__contain .left__form__title {
    font-size: 30px;
  }
}

.partner__reference {
  background: #000;
}

.partner__reference__contain {
  max-width: 100%;
  width: 1100px;
  margin: 0 auto;
  padding: 0 15px;
}

.partner__reference__contain .trustedby {
  padding: 80px 0 0;
  text-align: center;
}

.partner__reference__contain .trustedby__logo {
  margin: 10px auto;
  width: 145px;
  height: 63px;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/partner/guideline/809e3bca-310c-445f-98ab-4f35305469ab.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.partner__reference__contain .feature {
  padding: 80px 0 100px;
  text-align: center;
}

.partner__reference__contain .feature__title {
  color: #fff;
  font-size: 40px;
}

.partner__reference__contain .feature__listing {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  text-align: left;
  max-width: 100%;
  width: 960px;
  margin: 30px auto 0;
}

.partner__reference__contain .feature__listing--item {
  position: relative;
  -webkit-box-flex: 50%;
      -ms-flex: 50%;
          flex: 50%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  padding: 10px 20px;
  min-width: 300px;
}

.partner__reference__contain .feature__listing--item:before {
  content: '';
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/partner/guideline/52d1777e-f7b9-445b-872e-40ffffffbc53.svg");
  height: 20px;
  width: 20px;
}

.partner__reference__contain .feature__listing--item span {
  color: #FFFFFF;
  padding-left: 30px;
}

@media screen and (max-width: 1099px) {
  .partner__reference__contain .feature {
    padding: 60px 0 80px;
  }

  .partner__reference__contain .feature__title {
    font-size: 30px;
  }
}

.partner__productintro {
  background: #FFFFFF;
  font-family: ripplingFontLight;
  color: #000;
}

.partner__productintro__contain .upgrade {
  max-width: 100%;
  width: 1100px;
  padding: 0 15px;
  margin: 0 auto;
  text-align: center;
  margin-bottom: -150px;
}

.partner__productintro__contain .upgrade__content {
  font-size: 40px;
  padding: 80px 0 0;
  color: #000;
  font-family: ripplingFontLight;
  margin-bottom: 40px;
}

.partner__productintro__contain .upgrade__image {
  max-width: 95%;
  width: 1100px;
  height: auto;
}

@media screen and (max-width: 1099px) {
  .partner__productintro__contain .upgrade__content {
    font-size: 30px;
    padding: 40px 0 0;
  }
}

.partner__productinfo {
  background: #000;
  text-align: center;
}

.partner__productinfo__title {
  max-width: 100%;
  width: 1100px;
  padding: 0 15px;
  text-align: center;
  margin: 0 auto;
  padding: 250px 0 0;
}

.partner__productinfo__title span {
  font-family: ripplingFontLight;
  color: #FFFFFF;
  font-size: 40px;
}

.partner__productinfo__contain {
  margin: 50px auto 20px;
  max-width: 95%;
  width: 1050px;
  height: auto;
}

@media screen and (max-width: 1099px) {
  .partner__productinfo__title span {
    font-size: 30px;
  }
}

.partner-xero {
  font-family: ripplingFontNormal;
}

.partner-xero .main-container {
  max-width: 100%;
  margin: 60px auto 0;
  padding: 0 15px;
  width: 1100px;
}

.partner-xero ul li {
  list-style: disc;
  margin-left: 20px;
}

.partner-xero__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.partner-xero__head__left {
  width: 100%;
  max-width: 400px;
}

.partner-xero__head__left h1 {
  padding-bottom: 12px;
  font-size: 2.125em;
}

.partner-xero__head__left .description {
  font-family: ripplingFontLight;
  -webkit-margin-before: 1em;
          margin-block-start: 1em;
  -webkit-margin-after: 1em;
          margin-block-end: 1em;
}

.partner-xero__head__left .logo {
  background-repeat: no-repeat;
  background-position: left;
  background-size: contain;
  height: 120px;
  margin: 50px 0;
  background-image: url("https://developer.xero.com/static/images/documentation/xero-connected-app-logo-lowres-RGB.png");
}

@media (max-width: 1099px) {
  .partner-xero__head__left .logo {
    background-position: center;
  }
}

.partner-xero__head__left .ruiBtn {
  margin: 10px 0;
}

.partner-xero__head__left .ruiBtn--rippling {
  border: 2px solid #000;
  background-color: #000;
}

.partner-xero__head__left .ruiBtn--xero {
  border: 2px solid #2cbeeb;
  background-color: #2cbeeb;
  padding: 0 36px;
}

@media (max-width: 1099px) {
  .partner-xero__head__left {
    text-align: center;
    max-width: 100%;
  }

  .partner-xero__head__left .description {
    text-align: justify;
  }
}

.partner-xero__head__right {
  display: block;
  width: 100%;
  max-width: 600px;
  height: 375px;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/partner/xero/xero-integration.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.partner-xero__head__right .description {
  padding-bottom: 50px;
}

@media (max-width: 1099px) {
  .partner-xero__head__right {
    margin-top: 50px;
    -webkit-box-flex: 100%;
        -ms-flex: 100%;
            flex: 100%;
  }
}

.partner-xero__faq {
  padding-top: 77px;
}

.partner-xero__faq h1 {
  padding-bottom: 10px;
  font-family: ripplingFontMedium;
  color: #000;
  font-size: 1.125em;
  line-height: 2;
  letter-spacing: normal;
}

.partner-xero__faq .questions {
  padding-bottom: 44px;
  color: #464646;
  font-size: 1.125em;
  line-height: 2;
  letter-spacing: normal;
}

.partner-xero__about {
  padding-top: 44px;
}

.partner-xero__about h1 {
  padding-bottom: 10px;
  font-family: ripplingFontMedium;
  color: #000;
  font-size: 1.125em;
  line-height: 2;
  letter-spacing: normal;
}

.partner-xero__about .questions {
  padding-bottom: 44px;
  color: #464646;
  font-size: 1.125em;
  line-height: 2;
  letter-spacing: normal;
}

.partner-xero__about .ruiBtn--xero {
  border: 2px solid #2cbeeb;
  background-color: #2cbeeb;
  padding: 0 36px;
}

@media (max-width: 1099px) {
  .partner-xero .main-container {
    padding: 0 15px;
    margin-top: 15px;
  }

  .partner-xero .btn-outer-container {
    text-align: center;
  }
}

.about-us-page .ruiTimeline {
  z-index: 0;
}

.about-us-page .ruiTimeline__itemContent {
  display: none;
}

.about-us-page .ruiTimeline__item--start .ruiTimeline__itemTitle,
.about-us-page .ruiTimeline__item--start .ruiTimeline__itemCaption {
  display: none;
}

.about-us-page .ruiTimeline__item--start .ruiTimeline__itemLabel {
  margin-bottom: 20px;
}

.about-us-page .aboutUsFormContainer {
  padding: 15px 15px 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.about-us-page .aboutUsFormContainer .aboutUsForm {
  width: 460px;
  max-width: 100%;
}

.about-us-page .aboutUsFormContainer .title {
  color: #22c8e3;
  font-size: 2.25em;
  margin-bottom: 44px;
}

.about-us-page .aboutUsFormContainer .caption {
  color: #ffffff;
  font-size: 1em;
  margin-bottom: 15px;
}

.about-us-page .aboutUsFormContainer .homeCoverPanel__signup input {
  margin: 0;
}

@media screen and (min-width: 900px) {
  .about-us-page .aboutUsFormContainer {
    padding: 100px 15px 15px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(0%, -50%);
         -o-transform: translate(0%, -50%);
            transform: translate(0%, -50%);
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    z-index: 10;
  }

  .about-us-page .ruiTimeline__item--start .ruiTimeline__itemLabel {
    margin-bottom: 40px;
  }
}

.requestDemoPage {
  padding: 0 10px;
}

.requestDemoPage__container {
  width: 600px;
  max-width: 100%;
  margin: 2.25em auto 9em;
  padding: 35px 30px;
  text-align: center;
  border: 1px solid #ededed;
  background-color: #f9f9f9;
  position: relative;
}

.requestDemoPage__container--modal {
  border: 0;
  padding: 20px 15px;
  margin: 0;
  background-color: #fff;
}

.requestDemoPage__title {
  color: #000;
  font-size: 1.8em;
  font-family: "ripplingFontNormal";
}

.requestDemoPage__caption {
  padding: 10px 0 30px;
  color: #000;
  font-size: 1em;
  font-family: "ripplingFontLight";
}

.requestDemoPage__info {
  margin-top: 15px;
  color: #000;
  font-size: .8em;
  font-family: "ripplingFontLight";
}

.requestDemoPage__field {
  text-align: left;
  padding: 5px 0;
  position: relative;
}

.requestDemoPage__field .ruiInput {
  width: 100%;
  font-size: 16px;
  border-color: #ededed !important;
  padding: 12px 10px 8px 50px;
}

.requestDemoPage__field .ruiInput--error {
  border-color: #f44336 !important;
}

.requestDemoPage__field .ruiInput.select {
  background-color: #fff;
  color: #757575;
}

.requestDemoPage__field .ruiBtn {
  width: 100%;
}

.requestDemoPage__field .ruiBtn.disabled {
  opacity: 0.7;
  pointer-events: none;
}

.requestDemoPage__fieldIcon {
  position: absolute;
  top: 0px;
  left: 5px;
  width: 44px;
  height: 44px;
  top: 50%;
  -webkit-transform: translate(0, -50%);
       -o-transform: translate(0, -50%);
          transform: translate(0, -50%);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 20px;
}

.requestDemoPage__fieldIcon.user {
  background-image: url("https://cdn.rippling.com/static/marketing/assets/form-icons/icon-user.svg");
}

.requestDemoPage__fieldIcon.email {
  background-image: url("https://cdn.rippling.com/static/marketing/assets/form-icons/icon-email.svg");
}

.requestDemoPage__fieldIcon.company {
  background-image: url("https://cdn.rippling.com/static/marketing/assets/form-icons/icon-company.svg");
}

.requestDemoPage__fieldIcon.number {
  background-image: url("https://cdn.rippling.com/static/marketing/assets/form-icons/icon-number.svg");
}

.requestDemoPage__fieldIcon.title {
  background-image: url("https://cdn.rippling.com/static/marketing/assets/form-icons/icon-title.svg");
}

.requestDemoPage__fieldIcon.country {
  background-image: url("https://cdn.rippling.com/static/marketing/assets/form-icons/icon-country.svg");
}

.requestDemoPage__fieldIcon.payroll {
  background-image: url("https://cdn.rippling.com/static/marketing/assets/form-icons/icon-payroll.svg");
}

.requestDemoPage__fieldIcon.lead {
  background-image: url("https://cdn.rippling.com/static/marketing/assets/form-icons/icon-source.svg");
}

.requestDemoPage__fieldIcon.lead-right {
  background-image: url("https://cdn.rippling.com/static/marketing/assets/form-icons/icon-down-arrow.svg");
  left: unset;
  pointer-events: none;
  right: 5px;
}

.requestDemoPage__fieldIcon.tel {
  background-image: url("https://cdn.rippling.com/static/marketing/assets/form-icons/icon-tel.svg");
}

.requestDemoPage__fieldError {
  position: absolute;
  bottom: 0;
  font-size: .8em;
  font-family: "ripplingFontLight";
}

.requestDemoPage__hide {
  max-height: 0px;
  overflow: hidden;
  -webkit-transition: all 2s ease;
  -o-transition: all 2s ease;
  transition: all 2s ease;
}

.requestDemoPage__tempHide {
  max-height: 0px;
  overflow: hidden;
  -webkit-transition: all 2s ease;
  -o-transition: all 2s ease;
  transition: all 2s ease;
}

.requestDemoPage__tempHide--show {
  max-height: 500px;
}

.requestDemoPage .requestDemoPageSuccess {
  display: none;
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  -webkit-transform: translate(0, -50%);
       -o-transform: translate(0, -50%);
          transform: translate(0, -50%);
  text-align: center;
}

.requestDemoPage .requestDemoPageSuccess__icon {
  height: 60px;
  width: 60px;
  border-radius: 50%;
  border: 2px solid #000;
  margin: 0 auto;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 30px;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/form-icons/icon-email-dark.svg");
}

.requestDemoPage .requestDemoPageSuccess__icon--whitepaper {
  background-image: url("https://cdn.rippling.com/static/marketing/assets/form-icons/icon-white-papers.svg");
}

.requestDemoPage .requestDemoPageSuccess__title {
  color: #000;
  font-size: 1.3em;
  font-family: "ripplingFontMedium";
  margin: 20px 0 15px;
}

.requestDemoPage .requestDemoPageSuccess__caption {
  color: #000;
  font-size: 1em;
  font-family: "ripplingFontLight";
}

.requestDemoPage .requestDemoPageSuccess__contact {
  color: #000;
  font-family: "ripplingFontMedium";
  margin: 15px 0 40px;
}

.requestDemoPage--success .requestDemoPageContent {
  opacity: 0;
  visibility: hidden;
}

.requestDemoPage--success .requestDemoPageSuccess {
  display: block;
}

.rtNewPricing {
  text-align: center;
}

.rtNewPricing__title {
  font-family: ripplingFontBook;
  font-size: 1.875em;
  color: #000;
  padding-bottom: 10px;
}

.rtNewPricing__title--white {
  padding-top: 110px;
  color: #fff;
}

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

.rtNewPricing__link {
  text-align: center;
  height: auto;
}

.rtNewPricing__link .customBtn {
  padding: 12px 70px;
  font-size: 1em;
  font-weight: 400;
  font-family: ripplingFontPrag;
  height: auto;
  letter-spacing: 1.25px;
}

.rtNewPricing__caption {
  width: 625px;
  max-width: 100%;
  font-size: 1.25em;
  font-family: ripplingFontLight;
  margin: 0 auto 40px;
}

.rtNewPricing__plan {
  padding: 40px 0;
  width: 625px;
  max-width: 100%;
  font-size: 1.1em;
  font-family: ripplingFontBook;
  margin: 0 auto;
  text-align: center;
}

.rtNewPricing__plan input[type=radio] {
  cursor: pointer;
  margin: 0 5px;
}

.rtNewPricing__plan input[type=radio] {
  position: absolute;
  opacity: 0;
  z-index: 1;
  margin-top: 4px;
}

.rtNewPricing__plan input[type="radio"] + span {
  position: relative;
  padding-left: 28px;
  cursor: pointer;
  display: inline-block;
  height: 25px;
  line-height: 25px;
  font-size: 1rem;
  -webkit-transition: .28s ease;
  -o-transition: .28s ease;
  transition: .28s ease;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.rtNewPricing__plan input[type="radio"] + span:before {
  content: '';
  border: 2px solid #b5b5b5;
  position: absolute;
  left: 0;
  top: 0;
  margin: 2px;
  width: 20px;
  height: 20px;
  z-index: 0;
  -webkit-transition: .28s ease;
  -o-transition: .28s ease;
  transition: .28s ease;
  border-radius: 50%;
}

.rtNewPricing__plan input[type="radio"]:checked {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.rtNewPricing__plan input[type="radio"]:checked + span {
  position: relative;
  padding-left: 28px;
  cursor: pointer;
  display: inline-block;
  height: 25px;
  line-height: 25px;
  font-size: 1rem;
  -webkit-transition: .28s ease;
  -o-transition: .28s ease;
  transition: .28s ease;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.rtNewPricing__plan input[type="radio"]:checked + span:before {
  content: '';
  border: 2px solid #b5b5b5;
  position: absolute;
  left: 0;
  top: 0;
  margin: 2px;
  width: 20px;
  height: 20px;
  z-index: 0;
  -webkit-transition: .28s ease;
  -o-transition: .28s ease;
  transition: .28s ease;
  border-radius: 50%;
}

.rtNewPricing__plan input[type="radio"]:checked + span:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  margin: 2px;
  width: 20px;
  height: 20px;
  z-index: 0;
  -webkit-transition: .28s ease;
  -o-transition: .28s ease;
  transition: .28s ease;
  -webkit-transform: scale(0.5);
  -o-transform: scale(0.5);
     transform: scale(0.5);
  background-color: #22c8e3;
  border-radius: 50%;
}

.rtNewPricing__selectProductGroup {
  width: 625px;
  max-width: 100%;
  margin: 0 auto;
}

.rtNewPricing__selectProductGroup .products {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
}

.rtNewPricing__selectProductGroup .products .product {
  -webkit-box-flex: wrap;
      -ms-flex: wrap;
          flex: wrap;
  font-size: 1em;
  letter-spacing: 1.25px;
  line-height: 1.375em;
  font-family: ripplingFontPrag;
  border: 1px solid #22c8e3;
  padding: 16px 44px;
}

.rtNewPricing__selectProductGroup .products .product--active {
  width: 200px;
  max-width: 100%;
  background-color: #22c8e3;
  color: #fff;
}

.rtNewPricing__selectProductGroup .products .product:hover {
  cursor: pointer;
}

.rtNewPricing__container {
  background-color: #000;
  padding: 112px 0 400px;
}

.rtNewPricing__container--noHoverProduct .rtNewPricing__productBlock {
  border: none;
}

.rtNewPricing__container--noHoverProduct .rtNewPricing__productBlock:hover {
  border-color: #000;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.rtNewPricing__faqContainer {
  background-color: #fff;
}

.rtNewPricing__faqContainer .ruiContainer {
  margin-bottom: -160px;
}

.rtNewPricing__faqContainer .dataContent {
  background-color: #E8E8E9;
  position: relative;
  top: -300px;
  bottom: 200px;
  -webkit-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
          box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
}

.rtNewPricing__faqContainer .faq__topTitle {
  font-size: 2em;
  padding: 90px 0 60px;
  text-align: center;
}

.rtNewPricing__faqContainer .faq__questions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 0 15px;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}

@media screen and (min-width: 768px) {
  .rtNewPricing__faqContainer .faq__questions {
    padding: 0 80px 80px;
  }
}

.rtNewPricing__faqContainer .faq__questions .question {
  width: 420px;
  max-width: 100%;
  padding: 20px 0;
}

.rtNewPricing__faqContainer .faq__questions .question__query {
  font-size: 1.3em;
  padding-bottom: 32px;
  font-family: ripplingFontMedium;
}

.rtNewPricing__faqContainer .faq__questions .question__answer {
  line-height: 1.5em;
}

.rtNewPricing__faqContainer .faq__questions .question__answer a {
  color: #22c8e3;
}

.rtNewPricing__products .topTitle {
  color: #fff;
  position: relative;
  z-index: 1;
  font-size: 2.375em;
  padding: 60px 0;
  text-align: center;
}

.rtNewPricing__products .topTitle:before {
  border-top: 1px solid #dfdfdf;
  content: "";
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  z-index: -1;
}

.rtNewPricing__products .topTitle span {
  background: #000;
  padding: 0 15px;
}

.rtNewPricing__products .bottomTitle {
  color: #B9B9B9;
  font-size: 1.5em;
  line-height: 1.875em;
  text-align: center;
}

.rtNewPricing__productBlockMoreCount {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-bottom: 10px;
}

@media screen and (min-width: 1100px) {
  .rtNewPricing__productBlockMoreCount {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding-bottom: 20px;
  }
}

.rtNewPricing__productBlock {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  border: 5px solid #000;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 480px;
  max-width: 100%;
  margin: 0 auto;
}

@media screen and (min-width: 768px) {
  .rtNewPricing__productBlock {
    padding: 60px 60px 50px;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    width: auto;
    max-width: 100%;
    margin: 0;
  }
}

.rtNewPricing__productBlock--selected {
  border-color: #22c8e3;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.rtNewPricing__productBlock:hover {
  border-color: #22c8e3;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.rtNewPricing__productBlock--half {
  width: 480px;
  max-width: 100%;
  padding: 20px;
  margin-bottom: 10px;
}

@media screen and (min-width: 768px) {
  .rtNewPricing__productBlock--half {
    padding: 40px 40px 30px;
    width: 525px;
    margin-bottom: 0px;
  }
}

.rtNewPricing__productBlock--half .icon {
  height: 90px !important;
  width: 90px !important;
}

.rtNewPricing__productBlock--half .info__head {
  padding-bottom: 6px !important;
}

.rtNewPricing__productBlock--half .info .subTitle {
  font-size: 0.9375em;
}

.rtNewPricing__productBlock--half .list {
  -webkit-box-flex: 1 !important;
      -ms-flex: 1 0 50% !important;
          flex: 1 0 50% !important;
  font-size: 0.92em !important;
}

.rtNewPricing__productBlock--oneThird {
  width: 480px;
  max-width: 100%;
  padding: 20px;
  margin-bottom: 10px;
}

@media screen and (min-width: 768px) {
  .rtNewPricing__productBlock--oneThird {
    padding: 30px 30px 23px;
    width: 345px;
    margin-bottom: 0px;
  }
}

.rtNewPricing__productBlock--oneThird .icon {
  height: 80px !important;
  width: 80px !important;
}

.rtNewPricing__productBlock--oneThird .info {
  padding-left: 10px !important;
  -webkit-box-align: center !important;
      -ms-flex-align: center !important;
          align-items: center !important;
}

.rtNewPricing__productBlock--oneThird .info__head {
  padding-bottom: 6px !important;
}

.rtNewPricing__productBlock--oneThird .info__head .title {
  padding-left: 10px !important;
}

.rtNewPricing__productBlock--oneThird .list {
  -webkit-box-flex: 1 !important;
      -ms-flex: 1 !important;
          flex: 1 !important;
  font-size: 1em !important;
}

.rtNewPricing__productBlock--oneThird .list:before {
  display: none !important;
}

.rtNewPricing__productBlock--oneThird .title {
  font-size: 1em !important;
  line-height: 1.5em !important;
  padding-right: 0px !important;
}

.rtNewPricing__productBlock--oneThird .content {
  padding-top: 20px !important;
}

.rtNewPricing__productBlock .top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media screen and (min-width: 480px) {
  .rtNewPricing__productBlock .top {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}

.rtNewPricing__productBlock .icon {
  background-size: contain;
  background-position: 50%;
  background-repeat: no-repeat;
  display: inline-block;
  height: 110px;
  width: 110px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.rtNewPricing__productBlock .icon--core {
  background-image: url(//cdn.rippling.com/static/marketing/assets/pricing/rippling-core-app-logo.png);
}

.rtNewPricing__productBlock .icon--payroll {
  background-image: url(//cdn.rippling.com/static/marketing/assets/pricing/rippling-product-payroll.png);
}

.rtNewPricing__productBlock .icon--benefits {
  background-image: url(//cdn.rippling.com/static/marketing/assets/pricing/rippling-product-benefits.png);
}

.rtNewPricing__productBlock .icon--cobra {
  background-image: url(//cdn.rippling.com/static/marketing/assets/pricing/rippling-product-aca-cobra-compliance.png);
}

.rtNewPricing__productBlock .icon--commuter-hsa-fsa {
  background-image: url(//cdn.rippling.com/static/marketing/assets/pricing/rippling-product-hsa-fsa.png);
}

.rtNewPricing__productBlock .icon--hr-help-desk {
  background-image: url(//cdn.rippling.com/static/marketing/assets/pricing/rippling-product-help-desk.png);
}

.rtNewPricing__productBlock .icon--identity {
  background-image: url(//cdn.rippling.com/static/marketing/assets/pricing/rippling-product-identity.png);
}

.rtNewPricing__productBlock .icon--devices {
  background-image: url(//cdn.rippling.com/static/marketing/assets/pricing/rippling-product-device.png);
}

.rtNewPricing__productBlock .changeInView {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding-left: 8px;
}

.rtNewPricing__productBlock .changeInView .princingInfo {
  top: 0;
}

.rtNewPricing__productBlock .changeInView .princingInfo__price .currency {
  top: -12px;
}

.rtNewPricing__productBlock .changeInView .princingInfo__term {
  top: 4px;
}

.rtNewPricing__productBlock .changeInView .princingInfo--extraSmall {
  left: 10px;
}

.rtNewPricing__productBlock .changeInView .info {
  padding-left: 0 !important;
}

.rtNewPricing__productBlock .info {
  padding-left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media screen and (min-width: 480px) {
  .rtNewPricing__productBlock .info {
    padding-left: 28px;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}

.rtNewPricing__productBlock .info__head {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-bottom: 16px;
  text-transform: uppercase;
  -ms-flex-direction: column;
      flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media screen and (min-width: 480px) {
  .rtNewPricing__productBlock .info__head {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}

@media screen and (min-width: 768px) {
  .rtNewPricing__productBlock .info__head {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}

.rtNewPricing__productBlock .princingInfo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media screen and (min-width: 768px) {
  .rtNewPricing__productBlock .princingInfo {
    position: relative;
    top: -16px;
    min-width: 125px;
  }
}

.rtNewPricing__productBlock .princingInfo__price .currency {
  position: relative;
  top: -24px;
  font-size: 2em;
  font-family: ripplingFontMedium;
}

@media screen and (min-width: 480px) {
  .rtNewPricing__productBlock .princingInfo__price .currency {
    top: -32px;
  }
}

.rtNewPricing__productBlock .princingInfo__price .amount {
  font-size: 5em;
  font-family: ripplingFontBook;
}

.rtNewPricing__productBlock .princingInfo__term {
  position: relative;
  top: 16px;
  font-size: 1.375em;
  font-family: ripplingFontBook;
}

.rtNewPricing__productBlock .princingInfo__term span {
  font-family: ripplingFontMedium;
}

.rtNewPricing__productBlock .princingInfo--small .princingInfo__price .currency {
  font-size: 1.5em;
  top: -12px;
}

@media screen and (min-width: 768px) {
  .rtNewPricing__productBlock .princingInfo--small .princingInfo__price .currency {
    top: -16px;
  }
}

.rtNewPricing__productBlock .princingInfo--small .princingInfo__price .amount {
  font-size: 3em;
}

.rtNewPricing__productBlock .princingInfo--small .princingInfo__term {
  font-size: 1em;
  top: 6px;
  left: 8px;
}

@media screen and (min-width: 768px) {
  .rtNewPricing__productBlock .princingInfo--small .princingInfo__term {
    top: 8px;
  }
}

.rtNewPricing__productBlock .princingInfo--extraSmall .princingInfo__price .currency {
  font-size: 0.75em;
}

.rtNewPricing__productBlock .princingInfo--extraSmall .princingInfo__price .amount {
  font-size: 1.875em;
}

.rtNewPricing__productBlock .princingInfo--extraSmall .princingInfo__term {
  font-size: 0.9375em;
}

.rtNewPricing__productBlock .title {
  font-family: ripplingFontPrag;
  font-size: 1.375em;
  line-height: 2em;
  letter-spacing: 1.25px;
  padding-right: 0;
}

@media screen and (min-width: 480px) {
  .rtNewPricing__productBlock .title {
    padding-right: 36px;
  }
}

.rtNewPricing__productBlock .required {
  background-size: contain;
  background-position: 50%;
  background-repeat: no-repeat;
  display: inline-block;
  height: 35px;
  width: 138px;
  background-image: url(//cdn.rippling.com/static/marketing/assets/pricing/rippling-required-button.png);
}

.rtNewPricing__productBlock .content {
  padding-top: 44px;
}

.rtNewPricing__productBlock .content__lists {
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.rtNewPricing__productBlock .content__lists .list {
  width: 300px;
  max-width: 100%;
  color: #535353;
  padding-bottom: 8px;
}

@media screen and (min-width: 768px) {
  .rtNewPricing__productBlock .content__lists .list {
    -webkit-box-flex: 1;
        -ms-flex: 1 0 33%;
            flex: 1 0 33%;
  }
}

.rtNewPricing__productBlock .content__lists .list:before {
  display: inline-block;
  content: '';
  border-radius: 50%;
  height: 0.375em;
  width: 0.375em;
  margin-right: 0.5em;
  background-color: #535353;
  vertical-align: middle;
}

.rtPricingFooter {
  position: fixed;
  z-index: 99;
  bottom: 0px;
  right: 0;
  left: 0;
  display: none;
  -webkit-box-shadow: 0px 0px 9px #ccc;
          box-shadow: 0px 0px 9px #ccc;
  background-color: #fff;
  padding: 20px 0;
}

.rtPricingFooter__component {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-line-pack: start;
      align-content: start;
}

.rtPricingFooter__selected {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.rtPricingFooter__selected .title {
  text-transform: uppercase;
  font-family: ripplingFontBold;
  padding-bottom: 10px;
}

.rtPricingFooter__selected .item_list {
  font-family: ripplingFontMedium;
  text-transform: uppercase;
  text-align: left;
  padding-right: 20px;
}

.rtPricingFooter__totalPrice {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

@media screen and (min-width: 768px) {
  .rtPricingFooter__totalPrice {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}

.rtPricingFooter__priceInfo {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.rtPricingFooter__priceInfo .title {
  text-transform: uppercase;
  font-family: ripplingFontBold;
  padding-bottom: 10px;
}

.rtPricingFooter__priceInfo .per_person_price {
  font-size: 1.1875em;
  font-family: ripplingFontMedium;
}

.rtPricingFooter__priceInfo .per_person_price span {
  font-family: ripplingFontLight;
}

.rtPricingFooter__priceInfo .base_compamy_price {
  font-size: 1.1875em;
  font-family: ripplingFontLight;
}

@media screen and (min-width: 768px) {
  .rtPricingFooter__priceInfo {
    margin-right: 20px;
  }
}

.rtPricingFooter__signUp {
  padding-top: 10px;
}

.rtPricingFooter__signUp .ruiBtn {
  height: 46px;
  line-height: 44px;
  padding: 0 34px;
}

@media screen and (min-width: 768px) {
  .rtPricingFooter__signUp {
    padding-top: 0;
  }
}

.rtBounty__page {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 1.1em;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.rtBounty__hero {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding-bottom: 30px;
  padding-top: 30px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media screen and (min-width: 768px) {
  .rtBounty__hero {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
  }
}

.rtBounty__hero .image {
  background-position: center right;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/bounty/security.svg");
  height: 480px;
  max-width: 100%;
  width: 480px;
}

.rtBounty__hero .content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  max-width: 100%;
  width: 420px;
}

.rtBounty__hero .content__title {
  color: #020202;
  font-family: ripplingFontLight;
  padding-bottom: 30px;
}

.rtBounty__hero .content__description {
  font-family: ripplingFontBook;
  color: #030303;
}

.rtBounty__program {
  background: #22c8e3;
  color: #ffffff;
  font-family: ripplingFontNormal;
  padding: 50px 0 30px;
}

.rtBounty__program .title {
  font-size: 1.1em;
  padding-bottom: 5px;
}

.rtBounty__program .list li {
  font-size: 1.1em;
  margin-bottom: 6px;
}

.rtBounty__program .list li:last-child {
  margin-bottom: 0;
}

.rtBounty__key {
  padding-bottom: 30px;
  padding-top: 50px;
}

.rtBounty__key .title {
  color: #020202;
  font-family: ripplingFontNormal;
  font-weight: normal;
  font-size: 1.1em;
  -webkit-margin-before: 0.83em;
          margin-block-start: 0.83em;
  -webkit-margin-after: 0.83em;
          margin-block-end: 0.83em;
}

.rtBounty__key .title a {
  color: #22c8e3;
}

.rtBounty__key .textarea {
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  border: 1px solid #959595;
  font-size: 0.7em;
  font-family: monospace;
  line-height: 1.2em;
  letter-spacing: .5px;
  max-width: 600px;
  margin-top: 15px;
  outline: none !important;
  padding: 30px;
  resize: none;
  width: 100%;
}

.rtBounty__key .cpBtn {
  font-size: 12px;
  height: auto;
  padding: 4px 24px 2px;
}

.rtBounty__key .copySuccess {
  background: #22c8e3;
  bottom: 24px;
  color: #fff;
  font-family: ripplingFontMedium;
  font-size: 12px;
  left: 1px;
  overflow: hidden;
  opacity: 0;
  padding: 5px;
  position: relative;
  width: 598px;
  max-width: 100%;
}

.rtPress__page {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.rtPress__page .heroHeadline {
  font-family: ripplingFontLight;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.rtPress__page .heroHeadline__textWrapper {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #020202;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
}

.rtPress__page .heroHeadline__headline {
  max-width: 100%;
  padding-top: 30px;
  width: 420px;
}

.rtPress__page .heroHeadline__subhead {
  font-weight: normal;
  max-width: 100%;
  padding-bottom: 20px;
  width: 640px;
}

.rtPress__page .heroHeadline__subhead a {
  color: #22c8e3;
  text-decoration: none;
}

.rtPress__page .articleCards {
  font-family: ripplingFontMedium;
}

.rtPress__page .articleCards__block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  padding-bottom: 120px;
  padding-top: 30px;
}

.rtPress__page .articleCards__content {
  cursor: pointer;
  text-decoration: none !important;
  background-color: #fff;
  -webkit-box-shadow: 0 3px 5px 0 rgba(36, 50, 66, 0.2);
          box-shadow: 0 3px 5px 0 rgba(36, 50, 66, 0.2);
  border-radius: 0;
  overflow: hidden;
  max-width: 100%;
  margin: 10px;
  text-align: center;
  -webkit-transition: -webkit-box-shadow 225ms;
  transition: -webkit-box-shadow 225ms;
  -o-transition: box-shadow 225ms;
  transition: box-shadow 225ms;
  transition: box-shadow 225ms, -webkit-box-shadow 225ms;
  width: 320px;
}

.rtPress__page .articleCards__content .logo {
  -ms-flex-line-pack: center;
      align-content: center;
  background-position: 0;
  background-repeat: no-repeat;
  background-size: cover;
  height: 250px;
  position: relative;
  margin: 0 auto;
}

.rtPress__page .articleCards__content .logo--blog {
  background-image: url("https://cdn.rippling.com/static/marketing/content/press_blog.jpg");
}

.rtPress__page .articleCards__content .logo--product {
  background-image: url("https://cdn.rippling.com/static/marketing/content/press_logo.jpg");
}

.rtPress__page .articleCards__content .logo--leadership {
  background-image: url("https://cdn.rippling.com/static/marketing/content/press_leadership.jpg");
}

.rtPress__page .articleCards__content .link > span {
  display: block;
  padding: 15px 0;
  font-size: 14px;
  position: relative;
  -webkit-transition: all 0.2s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.2s cubic-bezier(1, 0, 0, 1);
  transition: all 0.2s cubic-bezier(1, 0, 0, 1);
  background-color: #fff;
  color: #000;
}

.rtPress__page .articleCards__content .link > span.external:before {
  content: '';
  display: inline-block;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/icon-external-link.svg");
  height: 16px;
  right: 10px;
  position: relative;
  top: 2px;
  width: 16px;
}

.rtPress__page .articleCards__content .link > span.download:before {
  content: '';
  display: inline-block;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/icon-download.svg");
  height: 16px;
  right: 10px;
  position: relative;
  top: 2px;
  width: 16px;
}

.rtPress__page .articleCards__content:hover .link > span {
  color: #fff;
  background-color: #22c8e3;
}

.rtPress__page .articleCards__content:hover .link > span.external {
  -webkit-transition: background 0.2s cubic-bezier(1, 0, 0, 1);
  -o-transition: background 0.2s cubic-bezier(1, 0, 0, 1);
  transition: background 0.2s cubic-bezier(1, 0, 0, 1);
}

.rtPress__page .articleCards__content:hover .link > span.external:before {
  background-image: url("https://cdn.rippling.com/static/marketing/assets/icon-hover-external-link.svg");
}

.rtPress__page .articleCards__content:hover .link > span.download {
  -webkit-transition: background 0.2s cubic-bezier(1, 0, 0, 1);
  -o-transition: background 0.2s cubic-bezier(1, 0, 0, 1);
  transition: background 0.2s cubic-bezier(1, 0, 0, 1);
}

.rtPress__page .articleCards__content:hover .link > span.download:before {
  background-image: url("https://cdn.rippling.com/static/marketing/assets/icon-hover-download.svg");
}

.accoutantPage .ruiCoverPanel {
  height: calc(100vh);
  min-height: 1000px;
}

@media screen and (min-width: 768px) {
  .accoutantPage .ruiCoverPanel {
    height: calc(100vh - 70px);
    min-height: 760px;
  }
}

@media screen and (min-width: 1100px) {
  .accoutantPage .ruiCoverPanel {
    height: calc(100vh - 70px);
    min-height: 700px;
  }
}

.partnerSignup {
  position: relative;
  margin: 0 auto;
  margin-top: 25px;
  max-width: 100%;
  width: 320px;
  padding: 10px 10px;
  background-color: #f9f9f9;
  border: 1px solid #EDEDED;
}

.partnerSignup .partnerSignupForm__field {
  text-align: left;
  position: relative;
}

.partnerSignup .partnerSignupForm__field .ruiInput {
  width: 100%;
  font-size: 16px;
  padding: 12px 10px 8px 10px;
  border: 1px solid #EDEDED !important;
}

.partnerSignup .partnerSignupForm__field .ruiInput.select {
  background-color: #fff;
  color: #757575;
}

.partnerSignup .partnerSignupForm__fieldIcon {
  position: absolute;
  top: 0px;
  left: 5px;
  width: 44px;
  height: 44px;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  transform: translate(0, -50%);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 20px;
}

.partnerSignup .partnerSignupForm__fieldIcon.lead-right {
  background-image: url(https://cdn.rippling.com/static/marketing/assets/form-icons/icon-down-arrow.svg);
  left: unset;
  pointer-events: none;
  right: 5px;
}

.partnerSignup .partnerSignupForm input {
  width: 320px;
  max-width: 100%;
  display: block;
  text-align: left;
  margin: 5px auto;
  position: relative;
  font-size: 16px;
  border: 1px solid #EDEDED !important;
  padding: 12px 10px 8px;
}

.partnerSignup .partnerSignupForm .ruiBtn {
  letter-spacing: 1.25px;
  margin: 5px auto 0;
  display: block;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  max-width: 100%;
}

.partnerSignup .partnerSignupForm .ruiBtn.disabled {
  opacity: .7;
  pointer-events: none;
}

.partnerSignup .partnerSignupForm .partnerName {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  max-width: 100%;
  width: 320px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.partnerSignup .partnerSignupForm .partnerName input {
  max-width: 100%;
  width: 320px;
  margin: 5px auto;
}

.partnerSignup .partnerSignupForm .partnerName input:last-child {
  margin: 0;
}

@media screen and (min-width: 768px) {
  .partnerSignup .partnerSignupForm .partnerName input {
    width: 146px;
    margin: 0;
  }
}

@media screen and (min-width: 768px) {
  .partnerSignup .partnerSignupForm .partnerName {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}

@media screen and (min-width: 768px) {
  .partnerSignup .partnerSignupForm .ruiBtn {
    margin: 5px 0 0;
  }
}

.partnerSignup .partnerSignupSuccess {
  display: none;
  position: absolute;
  top: 30%;
  left: 30px;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .partnerSignup .partnerSignupSuccess {
    top: 15%;
    left: 0;
  }
}

.partnerSignup .partnerSignupSuccess__icon {
  height: 60px;
  width: 60px;
  border-radius: 50%;
  border: 2px solid #000;
  margin: 0 auto;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 30px;
  background-image: url("https://cdn.rippling.com/static/marketing/assets/form-icons/icon-email-dark.svg");
}

.partnerSignup .partnerSignupSuccess__icon--whitepaper {
  background-image: url("https://cdn.rippling.com/static/marketing/assets/form-icons/icon-white-papers.svg");
}

.partnerSignup .partnerSignupSuccess__title {
  color: #000;
  font-size: 1.3em;
  font-family: "ripplingFontMedium";
  margin: 20px 0 15px;
}

.partnerSignup .partnerSignupSuccess__caption {
  color: #000;
  font-size: 1em;
  font-family: "ripplingFontLight";
}

.partnerSignup .partnerSignupSuccess__contact {
  color: #000;
  font-family: "ripplingFontMedium";
  margin: 15px 0 40px;
}

.partnerSignup--success .partnerSignupForm {
  opacity: 0;
  visibility: hidden;
}

.partnerSignup--success .partnerSignupSuccess {
  display: block;
}

@media screen and (min-width: 768px) {
  .partnerSignup {
    float: left;
  }
}

/*---------------------------
## Footer
---------------------------*/

.footer {
  font-size: 14px;
  font-size: 0.875rem;
  font-family: "ripplingFontNormal";
  padding: 71px 91px;
  background: #000000;
  color: #ffffff;
}

.footer a {
  text-decoration: none;
}

@media screen and (min-width: 0px) and (max-width: 768px) {
  .footer {
    padding: 32px 16px;
  }
}

.footer .inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

@media screen and (min-width: 0px) and (max-width: 768px) {
  .footer .inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}

.footer__left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 0;
}

.footer__left li {
  list-style: none;
  padding-bottom: 11px;
}

.footer__left__navigation {
  min-width: 220px;
}

.footer__left__navigation ul {
  margin: 0px;
  padding: 0px;
  float: left;
}

.footer__left__navigation ul li a {
  color: #ffffff;
}

@media screen and (min-width: 0px) and (max-width: 768px) {
  .footer__left__navigation {
    min-width: auto;
  }
}

.footer__left__social {
  display: none;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.footer__left__social ul {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 220px;
  margin: 0px;
  padding: 0px;
}

.footer__left__social ul li {
  list-style: none;
  padding-bottom: 17px;
}

.footer__left__social ul li a {
  color: #ffffff;
  margin: 0;
}

.footer__left__social ul li a.facebook {
  display: block;
  width: 14px;
  height: 14px;
  background-position: 0 0;
  background-repeat: no-repeat;
  padding-right: 10px;
  line-height: 14px;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3LjMxMiAxNCI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgZmlsbDogI2ZmZjsKICAgICAgICBmaWxsLXJ1bGU6IGV2ZW5vZGQ7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9kZWZzPgogIDxwYXRoIGlkPSJQYXRoXzM4IiBkYXRhLW5hbWU9IlBhdGggMzgiIGNsYXNzPSJjbHMtMSIgZD0iTTg0Ljc0NCwxNFY3LjYyMmgyLjE3OGwuMzExLTIuNDg5SDg0Ljc0NFYzLjU3OGMwLS43LjIzMy0xLjI0NCwxLjI0NC0xLjI0NGgxLjMyMlYuMDc4Qzg3LC4wNzgsODYuMjIyLDAsODUuMzY3LDBhMywzLDAsMCwwLTMuMTg5LDMuMjY3VjUuMTMzSDgwVjcuNjIyaDIuMTc4VjE0WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTgwKSIvPgo8L3N2Zz4K);
}

.footer__left__social ul li a.facebook span {
  padding-left: 24px;
}

.footer__left__social ul li a.twitter {
  display: block;
  width: 14px;
  height: 14px;
  background-position: 0 0;
  background-repeat: no-repeat;
  padding-right: 10px;
  line-height: 14px;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNCAxMS4zNTUiPgogIDxkZWZzPgogICAgPHN0eWxlPgogICAgICAuY2xzLTEgewogICAgICAgIGZpbGw6ICNmZmY7CiAgICAgICAgZmlsbC1ydWxlOiBldmVub2RkOwogICAgICB9CiAgICA8L3N0eWxlPgogIDwvZGVmcz4KICA8cGF0aCBpZD0iUGF0aF8zOSIgZGF0YS1uYW1lPSJQYXRoIDM5IiBjbGFzcz0iY2xzLTEiIGQ9Ik00Mi40MzMsMTMuMzU2QTguMDk0LDguMDk0LDAsMCwwLDUwLjYsNS4xODlWNC44QTYuMzIyLDYuMzIyLDAsMCwwLDUyLDMuMzIyYTYuNDU3LDYuNDU3LDAsMCwxLTEuNjMzLjQ2NywzLjAyNiwzLjAyNiwwLDAsMCwxLjI0NC0xLjU1Niw3LjEzNCw3LjEzNCwwLDAsMS0xLjc4OS43QTIuNzc4LDIuNzc4LDAsMCwwLDQ3LjcyMiwyYTIuOTIyLDIuOTIyLDAsMCwwLTIuODc4LDIuODc4LDEuNTE2LDEuNTE2LDAsMCwwLC4wNzguNjIyLDguMDQxLDguMDQxLDAsMCwxLTUuOTExLTMuMDMzLDIuOTc5LDIuOTc5LDAsMCwwLS4zODksMS40NzgsMy4wOSwzLjA5LDAsMCwwLDEuMjQ0LDIuNDExLDIuNjIyLDIuNjIyLDAsMCwxLTEuMzIyLS4zODloMGEyLjg0MywyLjg0MywwLDAsMCwyLjMzMywyLjgsMi40LDIuNCwwLDAsMS0uNzc4LjA3OCwxLjMyNCwxLjMyNCwwLDAsMS0uNTQ0LS4wNzgsMi45NDcsMi45NDcsMCwwLDAsMi43MjIsMi4wMjJBNS44NzIsNS44NzIsMCwwLDEsMzguNywxMi4wMzNhMi4xNTMsMi4xNTMsMCwwLDEtLjctLjA3OCw3LjM0MSw3LjM0MSwwLDAsMCw0LjQzMywxLjQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zOCAtMikiLz4KPC9zdmc+Cg==);
}

.footer__left__social ul li a.twitter span {
  padding-left: 24px;
}

.footer__left__social ul li a.instagram {
  display: block;
  width: 14px;
  height: 14px;
  background-position: 0 0;
  background-repeat: no-repeat;
  padding-right: 10px;
  line-height: 14px;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNCAxNCI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgZmlsbDogI2ZmZjsKICAgICAgICBmaWxsLXJ1bGU6IGV2ZW5vZGQ7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9kZWZzPgogIDxwYXRoIGlkPSJQYXRoXzQwIiBkYXRhLW5hbWU9IlBhdGggNDAiIGNsYXNzPSJjbHMtMSIgZD0iTTcsMS4yNDRhMjEuNDYzLDIxLjQ2MywwLDAsMSwyLjguMDc4LDMuNjA3LDMuNjA3LDAsMCwxLDEuMzIyLjIzMywyLjczMiwyLjczMiwwLDAsMSwxLjMyMiwxLjMyMkEzLjYwNywzLjYwNywwLDAsMSwxMi42NzgsNC4yYzAsLjcuMDc4LjkzMy4wNzgsMi44YTIxLjQ2MywyMS40NjMsMCwwLDEtLjA3OCwyLjgsMy42MDcsMy42MDcsMCwwLDEtLjIzMywxLjMyMiwyLjczMiwyLjczMiwwLDAsMS0xLjMyMiwxLjMyMiwzLjYwNywzLjYwNywwLDAsMS0xLjMyMi4yMzNjLS43LDAtLjkzMy4wNzgtMi44LjA3OGEyMS40NjMsMjEuNDYzLDAsMCwxLTIuOC0uMDc4LDMuNjA3LDMuNjA3LDAsMCwxLTEuMzIyLS4yMzMsMi43MzIsMi43MzIsMCwwLDEtMS4zMjItMS4zMjJBMy42MDcsMy42MDcsMCwwLDEsMS4zMjIsOS44YzAtLjctLjA3OC0uOTMzLS4wNzgtMi44YTIxLjQ2MywyMS40NjMsMCwwLDEsLjA3OC0yLjgsMy42MDcsMy42MDcsMCwwLDEsLjIzMy0xLjMyMkEyLjc5MywyLjc5MywwLDAsMSwyLjEsMi4xYTEuMzE1LDEuMzE1LDAsMCwxLC43NzgtLjU0NEEzLjYwNywzLjYwNywwLDAsMSw0LjIsMS4zMjIsMjEuNDYzLDIxLjQ2MywwLDAsMSw3LDEuMjQ0TTcsMEEyMi45ODEsMjIuOTgxLDAsMCwwLDQuMTIyLjA3OCw0LjgsNC44LDAsMCwwLDIuNDExLjM4OWEzLjA0NSwzLjA0NSwwLDAsMC0xLjI0NC43NzhBMy4wNDUsMy4wNDUsMCwwLDAsLjM4OSwyLjQxMSwzLjU0NCwzLjU0NCwwLDAsMCwuMDc4LDQuMTIyLDIyLjk4MSwyMi45ODEsMCwwLDAsMCw3LDIyLjk4MSwyMi45ODEsMCwwLDAsLjA3OCw5Ljg3OGE0LjgsNC44LDAsMCwwLC4zMTEsMS43MTEsMy4wNDUsMy4wNDUsMCwwLDAsLjc3OCwxLjI0NCwzLjA0NSwzLjA0NSwwLDAsMCwxLjI0NC43NzgsNC44LDQuOCwwLDAsMCwxLjcxMS4zMTFBMjIuOTgxLDIyLjk4MSwwLDAsMCw3LDE0YTIyLjk4MSwyMi45ODEsMCwwLDAsMi44NzgtLjA3OCw0LjgsNC44LDAsMCwwLDEuNzExLS4zMTEsMy4yNjMsMy4yNjMsMCwwLDAsMi4wMjItMi4wMjIsNC44LDQuOCwwLDAsMCwuMzExLTEuNzExQzEzLjkyMiw5LjEsMTQsOC44NjcsMTQsN2EyMi45ODEsMjIuOTgxLDAsMCwwLS4wNzgtMi44NzgsNC44LDQuOCwwLDAsMC0uMzExLTEuNzExLDMuMDQ1LDMuMDQ1LDAsMCwwLS43NzgtMS4yNDRBMy4wNDUsMy4wNDUsMCwwLDAsMTEuNTg5LjM4OSw0LjgsNC44LDAsMCwwLDkuODc4LjA3OCwyMi45ODEsMjIuOTgxLDAsMCwwLDcsME03LDMuNDIyQTMuNTIsMy41MiwwLDAsMCwzLjQyMiw3LDMuNTc4LDMuNTc4LDAsMSwwLDcsMy40MjJNNyw5LjMzM0EyLjI5MiwyLjI5MiwwLDAsMSw0LjY2Nyw3LDIuMjkyLDIuMjkyLDAsMCwxLDcsNC42NjcsMi4yOTIsMi4yOTIsMCwwLDEsOS4zMzMsNywyLjI5MiwyLjI5MiwwLDAsMSw3LDkuMzMzbTMuNzMzLTYuOTIyYS44NTYuODU2LDAsMSwwLC44NTYuODU2Ljg2My44NjMsMCwwLDAtLjg1Ni0uODU2Ii8+Cjwvc3ZnPgo=);
}

.footer__left__social ul li a.instagram span {
  padding-left: 24px;
}

@media screen and (min-width: 0px) and (max-width: 768px) {
  .footer__left__social ul li a {
    margin: 0 10px;
  }

  .footer__left__social ul li a span {
    display: none;
  }
}

@media screen and (min-width: 0px) and (max-width: 768px) {
  .footer__left__social ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-width: auto;
  }
}

@media screen and (min-width: 0px) and (max-width: 768px) {
  .footer__left {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }

  .footer__left > div {
    padding-bottom: 40px;
  }
}

.footer__right {
  font-size: 12px;
  font-size: 0.75rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin: 0;
}

@media screen and (min-width: 0px) and (max-width: 768px) {
  .footer__right {
    text-align: center;
  }
}

.footer__right__address {
  display: none;
  padding-bottom: 40px;
  line-height: 150%;
  font-family: ripplingFontBook;
}

.footer__right__link {
  margin: 0;
}

.footer__right__link ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

.footer__right__link ul li {
  padding-right: 20px;
  list-style: none;
}

.footer__right__link ul li a {
  color: #ffffff;
  font-family: ripplingFontMedium;
}

.footer__right__link ul li:nth-last-child(1) {
  padding-right: 0;
}

/*---------------------------
## Global
---------------------------*/

button {
  outline: none !important;
}

img[data-url] {
  cursor: pointer;
}

.rtVideoPlayContainer {
  position: relative;
  padding-bottom: 54%;
  padding-top: 35px;
  height: 0;
}

.rtVideoPlayContainer iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
}

/*---------------------------
## Header
---------------------------*/

.header {
  font-size: 11px;
  font-size: 0.6875rem;
  font-family: "ripplingFontMedium";
  position: absolute;
  width: 100%;
  z-index: 100;
  left: 0;
  top: 0;
  background-color: #fff;
}

.header-top {
  padding-top: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media screen and (min-width: 0px) and (max-width: 768px) {
  .header-top {
    padding-top: 20px;
  }
}

.header-top__left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0;
}

.header-top__left .site-logo {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  float: left;
  -o-object-fit: contain;
     object-fit: contain;
  background-image: url("https://cdn.rippling.com/static/rippling_logo.svg");
  width: 165px;
  height: 28px;
  cursor: pointer;
  display: block;
  outline: none !important;
}

.header-top__right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  margin: 0;
}

.header__float {
  position: fixed;
  -webkit-box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.06), 0px 1px 10px 0px rgba(0, 0, 0, 0.04);
          box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.06), 0px 1px 10px 0px rgba(0, 0, 0, 0.04);
}

.header__float .header-top {
  padding: 12px 15px;
}

@media screen and (min-width: 768px) {
  .header__float .header-top .navigation__header__menu .menu-item-has-children {
    position: relative;
    z-index: 0;
    cursor: pointer;
  }

  .header__float .header-top .navigation__header__menu .menu-item-has-children:before {
    position: absolute;
    content: "";
    display: block;
    height: 20px;
    left: 0;
    width: 100%;
    bottom: -20px;
    background-color: transparent;
    z-index: 10;
    border: none;
  }

  .header__float .header-top .navigation__header__menu .menu-item-has-children:after {
    right: -14px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid #000;
    top: 3px;
  }

  .header__float .header-top .navigation__header__menu .menu-item-has-children:hover:after {
    border-top: 7px solid #ffcc1c;
  }

  .header__float .header-top .navigation__header__menu .menu-item-has-children:hover > ul li {
    border-right: 1px solid #e2e2e2;
    padding-right: 24px;
    padding-left: 0;
  }

  .header__float .header-top .navigation__header__menu .menu-item-has-children:hover > ul li:last-child {
    border-right: 0;
    padding-right: 0;
    padding-left: 24px;
  }

  .header__float .header-top .navigation__header__menu .menu-item-has-children:hover > ul li:first-child {
    padding-left: 0;
  }

  .header__float .header-top .navigation__header__menu .menu-item-has-children:hover > ul li:after {
    content: none;
  }

  .header__float .header-top .navigation__header__menu .menu-item-has-children:hover > ul li > ul li {
    border-right: none;
  }

  .header__float .header-top .navigation__header__menu .menu-item-has-children:hover > ul li > ul li:last-child {
    padding-left: 0;
  }
}

/*---------------------------
## Main
---------------------------*/

body {
  width: 100%;
  margin: 0 auto;
  text-align: left;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-family: "ripplingFontNormal";
  margin: 0 auto;
}

.display-none {
  display: none;
}

.site {
  overflow: hidden;
  position: relative;
  padding-top: 90px;
}

@media screen and (min-width: 0px) and (max-width: 768px) {
  .site {
    padding-top: 48px;
  }
}

.fundRaising {
  font-size: 1em;
}

.fundRaising .gift-icon:before {
  content: '';
}

.blank_page a {
  color: #22c8e3;
}

.blank_page p {
  -webkit-margin-before: 1em;
          margin-block-start: 1em;
  -webkit-margin-after: 1em;
          margin-block-end: 1em;
}

/*---------------------------
## Sidebar
---------------------------*/

/*---------------------------
## Career
---------------------------*/

.rtCareer {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  padding-bottom: 20px;
}

.rtCareer .jobs {
  display: none;
}

#grnhse_app h1 {
  display: none;
}


/*# sourceMappingURL=main_6047b5e.css.map*/