.how-it-works { background: var(--primary); color: white; padding-top: 70px; padding-bottom: 70px; }
@media (max-width: 1079px) { .how-it-works { padding-top: 60px; padding-bottom: 60px; } }
@media (max-width: 699px) { .how-it-works { padding-top: 55px; padding-bottom: 55px; } }
.how-it-works > .inner .intro { padding-left: 60px; padding-right: 60px; max-width: var(--wrap-regular); margin-left: auto; margin-right: auto; text-align: center; }
@media (max-width: 1079px) { .how-it-works > .inner .intro { padding-left: 50px; padding-left: 50px; } }
@media (max-width: 699px) { .how-it-works > .inner .intro { padding-left: 35px; padding-right: 35px; } }
.how-it-works > .inner .intro h1, .how-it-works > .inner .intro h2, .how-it-works > .inner .intro h3, .how-it-works > .inner .intro h4, .how-it-works > .inner .intro h5 { color: white; }
.how-it-works > .inner .works-slider .slide .inner { max-width: var(--wrap-regular); margin-left: auto; margin-right: auto; padding-left: 60px; padding-right: 60px; text-align: center; }
@media (max-width: 1079px) { .how-it-works > .inner .works-slider .slide .inner { padding-left: 50px; padding-left: 50px; } }
@media (max-width: 699px) { .how-it-works > .inner .works-slider .slide .inner { padding-left: 35px; padding-right: 35px; } }
.how-it-works > .inner .works-slider .slide .image { width: 149px; height: 149px; margin: auto; }
.how-it-works > .inner .works-slider .slide .image img { object-fit: contain; width: 100%; height: 100%; }
.how-it-works > .inner .works-slider .slide .content { width: 100%; max-width: 640px; margin: auto; text-align: center; margin-top: 30px; }
.how-it-works > .inner .works-slider .slide .mobile-step { display: none; margin-top: 30px; font-weight: var(--font-weight-bold); }
@media (max-width: 699px) { .how-it-works > .inner .works-slider .slide .mobile-step { display: block; } }
.how-it-works > .inner .works-navigation { margin-top: 40px; max-width: var(--wrap-small); margin-left: auto; margin-right: auto; max-width: var(--wrap-very-small); display: flex; justify-content: center; }
@media (max-width: 699px) { .how-it-works > .inner .works-navigation { display: none; } }
.how-it-works > .inner .works-navigation .slide { display: flex; justify-content: center; flex-wrap: wrap; opacity: 0.5; cursor: pointer; transition: ease-in-out 0.3s opacity; }
.how-it-works > .inner .works-navigation .slide .image { width: 60px; height: 60px; }
.how-it-works > .inner .works-navigation .slide .image img { object-fit: contain; width: 100%; height: 100%; }
.how-it-works > .inner .works-navigation .slide .content { width: 100%; text-align: center; margin-top: 20px; font-weight: var(--font-weight-medium); }
.how-it-works > .inner .works-navigation .slide.slick-active, .how-it-works > .inner .works-navigation .slide:hover { opacity: 1; }
.how-it-works > .inner .mobile-instructions { text-align: center; opacity: 0.5; display: none; margin-top: 30px; }
@media (max-width: 699px) { .how-it-works > .inner .mobile-instructions { display: block; } }
.how-it-works .slick-prev:before, .how-it-works .slick-next:before { color: white; }
@media (max-width: 699px) { .how-it-works .slick-prev, .how-it-works .slick-next { top: calc(100% - 20px); } }