.how-it-works {
  position: relative;
  overflow: hidden; }
  .how-it-works::after {
    -webkit-transition: 3s ease;
    transition: 3s ease;
    -webkit-transition-delay: 0s;
            transition-delay: 0s;
    content: '';
    display: block;
    position: absolute;
    z-index: -1;
    left: auto;
    right: auto;
    bottom: 150px;
    margin: auto;
    width: 100%;
    height: 200px;
    background: url(../img/lines-1.svg) no-repeat center bottom;
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0; }
  .how-it-works.draw::after {
    -webkit-transform: scaleX(1);
            transform: scaleX(1); }
.steps {
  margin-top: 80px; }
  .steps div[class*='col']:nth-child(1) .step__content .icon,
  .steps div[class*='col']:nth-child(1) .step__content img {
    -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s;
    -webkit-animation-duration: 10.2s;
            animation-duration: 10.2s; }
  .steps div[class*='col']:nth-child(2) .step__content .icon,
  .steps div[class*='col']:nth-child(2) .step__content img {
    -webkit-animation-delay: 0.4s;
            animation-delay: 0.4s;
    -webkit-animation-duration: 10.4s;
            animation-duration: 10.4s; }
  .steps div[class*='col']:nth-child(3) .step__content .icon,
  .steps div[class*='col']:nth-child(3) .step__content img {
    -webkit-animation-delay: 0.6s;
            animation-delay: 0.6s;
    -webkit-animation-duration: 10.6s;
            animation-duration: 10.6s; }
  .steps div[class*='col']:nth-child(4) .step__content .icon,
  .steps div[class*='col']:nth-child(4) .step__content img {
    -webkit-animation-delay: 0.8s;
            animation-delay: 0.8s;
    -webkit-animation-duration: 10.8s;
            animation-duration: 10.8s; }
  .steps div[class*='col']:nth-child(5) .step__content .icon,
  .steps div[class*='col']:nth-child(5) .step__content img {
    -webkit-animation-delay: 1s;
            animation-delay: 1s;
    -webkit-animation-duration: 11s;
            animation-duration: 11s; }
  .steps div[class*='col']:nth-child(6) .step__content .icon,
  .steps div[class*='col']:nth-child(6) .step__content img {
    -webkit-animation-delay: 1.2s;
            animation-delay: 1.2s;
    -webkit-animation-duration: 11.2s;
            animation-duration: 11.2s; }
  .steps div[class*='col']:nth-child(7) .step__content .icon,
  .steps div[class*='col']:nth-child(7) .step__content img {
    -webkit-animation-delay: 1.4s;
            animation-delay: 1.4s;
    -webkit-animation-duration: 11.4s;
            animation-duration: 11.4s; }
  .steps div[class*='col']:nth-child(8) .step__content .icon,
  .steps div[class*='col']:nth-child(8) .step__content img {
    -webkit-animation-delay: 1.6s;
            animation-delay: 1.6s;
    -webkit-animation-duration: 11.6s;
            animation-duration: 11.6s; }
  .steps div[class*='col']:nth-child(9) .step__content .icon,
  .steps div[class*='col']:nth-child(9) .step__content img {
    -webkit-animation-delay: 1.8s;
            animation-delay: 1.8s;
    -webkit-animation-duration: 11.8s;
            animation-duration: 11.8s; }

.steps--no-margin {
  margin: 0; }

.step {
  position: relative;
  margin-bottom: 64px;
  height: calc(100% - 64px); }

.step__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-left: -10px;
  padding-bottom: 40px;
  padding-right: 16px; }
  .step__content .icon,
  .step__content img {
    -webkit-box-flex: 1;
        -ms-flex: 1 0 auto;
            flex: 1 0 auto;
    margin-right: 16px;
    -webkit-animation: flow 5s ease infinite;
            animation: flow 5s ease infinite;
    -webkit-transform: translateY(-25px);
            transform: translateY(-25px);
    margin-top: -150px;
    width: 76px;
    height: 76px; }

.step__title {
  margin-left: 80px;
  line-height: 1.2;
  -webkit-transform: translateY(4px);
          transform: translateY(4px); }

.step__text {
  line-height: 1.3;
  margin-top: 1em; }

.step__bg {
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 0;
  width: calc(100% - 30px);
  height: calc(100% - 30px);
  background: #F5F8FC; }

@-webkit-keyframes flow {
  50% {
    -webkit-transform: translateY(25px);
            transform: translateY(25px); }
  100% {
    -webkit-transform: translateY(-25px);
            transform: translateY(-25px); } }

@keyframes flow {
  50% {
    -webkit-transform: translateY(25px);
            transform: translateY(25px); }
  100% {
    -webkit-transform: translateY(-25px);
            transform: translateY(-25px); } }
.guides {
  padding-bottom: 210px;
  padding-top: 0;
  margin-bottom: -150px; }
  .guides .title--lg {
    margin-bottom: 100px; }
  .guides .container {
    position: relative; }
  .guides .container::after {
    -webkit-transition: 3s ease;
    transition: 3s ease;
    -webkit-transition-delay: 0s;
            transition-delay: 0s;
    content: '';
    display: block;
    position: absolute;
    z-index: -1;
    right: -3vw;
    top: -400px;
    width: 200px;
    height: 250%;
    background: url(../img/lines-2.svg) no-repeat;
    background-position: 0 0;
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0; }
  .guides.draw .container::after {
    -webkit-transform: scaleY(1);
            transform: scaleY(1); }
  @media (max-width: 1366px) {
    .guides {
      overflow: hidden; } }
  @media (max-width: 480px) {
    .guides .title--lg {
      margin-bottom: 30px; } }

.guide {
  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;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  height: calc(550px / 2 - 25px);
  padding: 16px; }
  .guide + .guide {
    margin-top: 50px; }
  .guide .icon {
    position: relative;
    z-index: 1; }
  .guide::before {
    -webkit-transition: 1.5s ease;
    transition: 1.5s ease;
    -webkit-transition-delay: 0s;
            transition-delay: 0s;
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: url(../img/video-bg.jpg) no-repeat center;
    background-size: cover;
    opacity: 1;
    z-index: 0; }
  .guide:hover .guide__bg {
    opacity: 0.5; }
  .guide:hover:before {
    -webkit-transition-duration: 3s;
            transition-duration: 3s;
    -webkit-transform: scale(1.1);
            transform: scale(1.1); }
  @media (max-width: 1200px) {
    .guide {
      height: 30vw;
      min-height: 200px;
      margin-top: 50px; } }

.guide--lg {
  height: 550px; }
  .guide--lg .guide__title {
    font-size: 24px; }
  @media (max-width: 1200px) {
    .guide--lg {
      height: 30vw;
      min-height: 300px; } }

.guide__title {
  text-transform: uppercase;
  color: #ffffff;
  font-size: 16px;
  margin-top: 16px;
  text-align: center;
  position: relative;
  z-index: 1; }

.guide__video {
  width: 854px;
  height: 480px; }
  @media (max-width: 991px) {
    .guide__video {
      width: 80vw;
      height: 61vw; } }