/* sass --watch public/scss:public/css */
.lp-how {
  background-image: url("/public/assets/images/Soundwave Light.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}
@media (min-width: 1080px) {
  .lp-how {
    height: 100vh;
  }
}
@media (max-width: calc(1080px - 1px)) {
  .lp-how {
    background-position: top center;
  }
}
.lp-how a {
  text-decoration: underline;
}
.lp-how__interface {
  margin-top: 110px;
  width: 100%;
}
.lp-how__aux {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  left: -10%;
  transition: all 1s;
  max-height: 700px;
}
.lp-how__aux.show {
  left: 0;
  opacity: 1;
}
.lp-how .lp-how__mob-card {
  box-sizing: border-box;
  width: calc(100% - 100px);
  height: 380px;
  padding-right: 25% !important;
}
@media (min-width: 576px) {
  .lp-how .lp-how__mob-card {
    height: 350px;
  }
}
.lp-how .lp-how__mob-card h4 {
  margin-top: 0;
}
@media (min-width: 576px) {
  .lp-how .lp-how__mob-card h4 {
    font-size: 30px;
  }
}
.lp-how .lp-how__mob-card.sans-image {
  padding-right: 20px !important;
  width: 90%;
}
.lp-how__phone {
  position: absolute;
  z-index: 10;
  right: -40px;
  max-height: 510px;
  height: 81vw;
  pointer-events: none;
}
.lp-how__mob-nav {
  width: calc(100% - 100px);
  position: relative;
  top: -50px;
  padding: 0 20px;
  box-sizing: border-box;
}
.lp-how__mob-nav-pips {
  width: 40%;
}
.lp-how__mob-nav-pip {
  height: 8px;
  width: 8px;
  background-color: white;
  border-radius: 10px;
}
.lp-how__mob-nav-pip.slider__pip--active {
  height: 15px;
  width: 15px;
}
.lp-how__mob-nav .slider__next,
.lp-how__mob-nav .slider__prev {
  padding: 10px;
  opacity: 0.5;
}
.lp-how__mob-nav .slider__next img,
.lp-how__mob-nav .slider__prev img {
  height: 20px;
  width: 20px;
}

/*# sourceMappingURL=how-it-works.css.map */