@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap);
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block
}
audio,
canvas,
video {
  display: inline-block
}
#video {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  width: 100%;
  max-width: 480px;
  object-fit: fill
}
.video_init {
  top: 0;
  height: 80%!important
}
audio:not([controls]) {
  display: none;
  height: 0
}
[hidden] {
  display: none
}
html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%
}
body {
  margin: 0
}
a:focus {
  outline: thin dotted
}
a:active,
a:hover {
  outline: 0
}
h1 {
  font-size: 2em;
  margin: .67em 0
}
abbr[title] {
  border-bottom: .0625rem dotted
}
dfn {
  font-style: italic
}
hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0
}
mark {
  background: #ff0;
  color: #000
}
code,
kbd,
pre,
samp {
  font-family: monospace,serif;
  font-size: 1em
}
pre {
  white-space: pre-wrap
}
q {
  quotes: "\201C""\201D""\2018""\2019"
}
small {
  font-size: 80%
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline
}
sup {
  top: -.5em
}
sub {
  bottom: -.25em
}
img {
  border: 0
}
:root {
  --main-color: #630AA3;
  --main-grey-color: #2B2B2B;
  --black-color: #1C1C1E;
  --second-color: #FF004D
}
svg:not(:root) {
  overflow: hidden
}
figure {
  margin: 0
}
fieldset {
  border: .0625rem solid silver;
  margin: 0 .125rem;
  padding: .35em .625em .75em
}
legend {
  border: 0;
  padding: 0
}
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  margin: 0
}
button,
input {
  line-height: normal
}
button,
select {
  text-transform: none
}
button,
html input[type=button],
input[type=reset],
input[type=submit] {
  -webkit-appearance: button;
  cursor: pointer
}
button[disabled],
html input[disabled] {
  cursor: default
}
input[type=checkbox],
input[type=radio] {
  box-sizing: border-box;
  padding: 0
}
input[type=search] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box
}
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0
}
textarea {
  overflow: auto;
  vertical-align: top
}
table {
  border-collapse: collapse;
  border-spacing: 0
}
.step,
body,
form,
html {
  height: 100%;
  width: 100%;
  font-family: Inter
}
body {
  font-weight: 400;
  color: var(--black-color);
  background-color: #fff;
  -webkit-transition: background-color .1s ease-out 1s;
  -moz-transition: background-color .1s ease-out 1s;
  -o-transition: background-color .1s ease-out 1s;
  transition: background-color .1s ease-out 1s
}
body.is--blackbg {
  background: var(--black-color)
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 400
}
.captcha__item,
a,
button {
  -webkit-tap-highlight-color: transparent;
  outline: 0
}
.footer_last_step {
  margin-top: 30px;
  margin-bottom: 0;
  font-size: 12px;
  position: relative;
  bottom: 5px
}
footer {
  font-family: Roboto,sans-serif;
  position: absolute;
  bottom: 4px;
  left: 0;
  font-weight: 400;
  right: 0
}
footer ul {
  padding: 0;
  margin: 0;
  display: flex;
  list-style: none;
  width: 100%;
  justify-content: center;
  align-items: center
}
footer li {
  margin: 0 4px
}
footer a {
  color: #000;
  text-decoration: none;
  font-size: 10px
}
footer .is--white {
  color: #fff!important
}
.is--gray {
  color: #9f9e9e!important
}
.line-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%
}
.line {
  flex: 1;
  height: 1px;
  background-color: #e6e6e6;
  margin: 0 10px
}
.text {
  font-size: 16px;
  color: #f2f2f2
}
.animated-bg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  z-index: -100;
  height: 100%;
  width: 100%;
  max-width: 480px;
  background: url("../images/intro.gif") no-repeat center center;
  background-size: cover
}
.wrapper {
  width: 100%;
  max-width: 21.5rem;
  margin: 0 auto
}
.wrapper_matches {
  height: calc(100vh - 200px);
  overflow-y: auto;
  padding: 10px;
  margin-top: 10px;
  padding-bottom: 30px
}
.grid-container {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 10px;
  width: 95%;
  max-width: 480px;
  margin: 0 auto
}
.intro__bg__content {
  padding: 15px 15px 0 15px
}
.intro__bg__content_matches {
  background-color: var(--black-color)
}
.intro__bg__content_matches_bot {
  background-color: var(--black-color);
  height: 15%;
  margin-top: auto;
  bottom: 0
}
.step {
  position: absolute;
  margin: 0 auto;
  text-align: center;
  -webkit-transition: transform .4s ease;
  -moz-transition: transform .4s ease;
  -o-transition: transform .4s ease;
  transition: transform .4s ease;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center
}
.step[data-step="1"],
.step[data-step="7"],
section {
  color: var(--black-color)
}
.step[data-step="1"] {
  height: 100vh!important
}
.step[data-step="1"]::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  height: 10vh;
  background: #fff;
  background: -moz-linear-gradient(0deg,rgba(255,255,255,0) 0,#000 100%);
  background: -webkit-linear-gradient(0deg,rgba(255,255,255,0) 0,#000 100%);
  background: linear-gradient(0deg,rgba(255,255,255,0) 0,#000 100%);
  opacity: .2
}
.step[data-step="0"]::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  height: 60vh;
  background: #1e1d1d;
  background: -moz-linear-gradient(180deg,rgba(255,255,255,0) 0,#000 100%);
  background: -webkit-linear-gradient(180deg,rgba(255,255,255,0) 0,#000 100%);
  background: linear-gradient(180deg,rgba(255,255,255,0) 0,#000 100%);
  opacity: 1
}
.step[data-step="13"].is--overlayed .girl__overlay:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.83)
}
.step_black {
  background: rgba(0,0,0,.83);
  z-index: 200
}
@media screen and (orientation:landscape) {
  .step_black {
    height: auto
  }
}
.step__logo {
  width: 60%;
  margin-bottom: 20px;
  height: auto
}
.step__ubi_icon {
  width: 40px;
  height: auto;
  margin-top: .4125rem;
  margin-bottom: 1.125rem
}
.step7_bg {
  background-color: var(--black-color);
  height: 100%;
  width: 100%;
  max-width: 480px;
  color: #fff!important;
  padding-bottom: 25px;
  padding-top: 25px;
  z-index: 99;
  overflow: hidden;
  max-width: 480px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99
}
.container {
  text-align: center;
  width: 100%;
  max-width: 400px
}
.container {
  width: 100%;
  overflow: hidden;
  max-width: 480px;
  color: #fff!important;
  padding-bottom: 25px;
  padding-top: 25px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99
}
.container_matches {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  background-color: #1a1a1a;
  max-width: 480px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99;
  position: relative
}
.title {
  font-size: 1.5rem;
  margin-bottom: 20px
}
.body-type-container {
  display: flex;
  justify-content: space-between;
  margin: 50px 15px
}
.body-type {
  position: relative;
  border: 2px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  width: 130px;
  height: 250px;
  cursor: pointer;
  transition: border-color .3s ease
}
.body-type.selected {
  border-color: #f60
}
.body-image {
  width: 100%;
  height: 100%;
  object-fit: cover
}
.label {
  position: absolute;
  top: 10px;
  left: 10px;
  color: #fff;
  font-size: .8rem;
  padding: 2px 5px;
  border-radius: 3px
}
.checkbox-wrapper {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 25px;
  height: 25px
}
.checkbox {
  display: none
}
.checkbox-label {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  border: 2px solid #fff;
  background-color: transparent;
  border-radius: 2px;
  color: transparent;
  font-size: 16px;
  transition: all .3s ease
}
.checkbox:checked + .checkbox-label {
  background-color: #f60;
  color: #fff
}
@keyframes rotateClockwise {
  from {
    transform: rotate(0)
  }
  to {
    transform: rotate(360deg)
  }
}
.loader {
  width: 70px;
  margin-top: 50px;
  margin-bottom: 50px;
  height: auto;
  animation: rotateClockwise 2s linear infinite
}
.step2__image {
  width: 70%;
  height: auto;
  margin-top: .3125rem
}
.step__title {
  font-size: 14px;
  line-height: 1;
  font-weight: 400;
  margin-top: 0
}
.step__title.medium {
  font-size: 36px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 1px;
  margin-right: 0;
  padding: 5px;
  width: fit-content;
  position: relative;
  margin: auto
}
.step__title.red {
  font-size: 18px;
  color: red;
  line-height: 1;
  font-weight: 400;
  margin-right: 0;
  padding: 0;
  width: max-content;
  position: relative;
  margin: auto;
  margin-top: 10px
}
.step3_title {
  margin-top: 50px
}
.step__title.big {
  text-shadow: 0 4px 4px rgba(0,0,0,.25);
  font-family: Inter;
  font-size: 48px;
  font-style: normal;
  font-weight: 700;
  line-height: 45px;
  letter-spacing: 3px;
  margin-bottom: 0;
  display: flow-root;
  padding: 0;
  width: max-content;
  position: relative;
  margin: auto
}
.step__title.map {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 0;
  display: flow-root;
  padding: 0;
  width: max-content;
  position: relative;
  margin: auto
}
.step__title.miles {
  font-size: 60px;
  font-weight: 400;
  line-height: 1;
  display: flow-root;
  padding: 0;
  width: max-content;
  position: relative;
  margin: auto;
  margin-bottom: 10px;
  margin-top: 20px
}
.step__title.matches {
  color: silver;
  font-size: 34px;
  font-weight: 600;
  margin-bottom: 0;
  display: flow-root;
  padding: 0;
  width: max-content;
  position: relative;
  margin: auto;
  margin-top: 5px!important
}
.step__title_mail {
  font-size: 36px;
  margin-top: 50px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 0;
  display: flow-root;
  padding: 0;
  width: max-content;
  position: relative
}
.slider-container {
  width: max-content;
  position: relative;
  margin: auto;
  margin-bottom: 25px;
  align-items: center;
  gap: 10px
}
.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 350px;
  height: 8px;
  background: gray;
  outline: 0;
  border-radius: 5px;
  position: relative;
  background-image: linear-gradient(to right,#630aa3,#630aa3);
  background-size: 0 100%;
  background-repeat: no-repeat
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background-color: #630aa3;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  z-index: 2
}
.slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background-color: #630aa3;
  border-radius: 50%;
  cursor: pointer
}
.slider::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #630aa3;
  z-index: 1;
  width: 0
}
.step__intro {
  width: 100%;
  margin: 0 auto;
  opacity: .5
}
.blurred {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(2px);
  z-index: 2;
  pointer-events: none
}
.step__title.small {
  margin-top: 0;
  margin-bottom: 5px!important;
  font-family: Inter;
  font-size: 26px;
  font-weight: 350;
  line-height: 25px;
  letter-spacing: 1.5px
}
.step__title.gray {
  margin-top: 10px;
  color: grey;
  margin-bottom: 10px!important;
  font-family: Inter;
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: 1px
}
.step__intro:before {
  content: '';
  display: block;
  padding-bottom: 100%
}
.step__intro__bg_top {
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 28%;
  overflow: hidden;
  max-width: 480px;
  color: #fff!important;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99
}
.intro__bg__gradient {
  margin-bottom: 20px;
  background: linear-gradient(180deg,rgba(37,39,41,0) 0,#121212 50%)
}
.step__intro__bg {
  width: 100%;
  overflow: hidden;
  max-width: 480px;
  color: #fff!important;
  background: linear-gradient(180deg,rgba(34,32,32,0) 2%,#121212 25%);
  padding-bottom: 25px;
  padding-top: 25px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99
}
.step__intro__bg_matches_bot {
  padding-top: 0;
  width: 100%;
  overflow: hidden;
  max-width: 480px;
  color: #fff!important;
  bottom: 0;
  left: 50%;
  z-index: 99
}
.step__intro__bg_matches_email_bot {
  padding-top: 0;
  width: 100%;
  overflow: hidden;
  max-width: 480px;
  color: #fff!important;
  bottom: 0;
  left: 50%;
  z-index: 99
}
.step__intro__promo_top {
  padding-top: 50px;
  width: 100%;
  overflow: hidden;
  max-width: 480px;
  color: #fff!important;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99
}
.margin_top_30 {
  margin-top: 30px!important
}
.margin_vertical_10 {
  margin-top: 10px!important;
  margin-bottom: 10px!important
}
.padding_vertical {
  padding-top: 0!important;
  padding-top: 0!important
}
.transform_0 {
  transform: translateY(0)!important
}
.profile-card-new {
  width: 100%;
  border-radius: 15px;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,.2);
  text-align: center
}
.profile-header-new {
  position: relative
}
.profile-header-new img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  background-color: #000
}
.status {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: green;
  color: #fff;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 12px
}
.status.offline {
  background-color: gray
}
.profile-info {
  padding: 0 6px 6px 6px;
  color: #000;
  text-align: left;
  height: 50px
}
.profile-info h2 {
  font-size: 12px;
  margin: 2px 0
}
.profile-info p {
  color: gray;
  font-style: italic;
  font-size: 12px;
  margin: 2px 0
}
caption.match_step {
  margin-top: 50px!important
}
.bottom-bar {
  background-color: #1a1a1a;
  color: silver;
  padding: 15px 20px;
  text-align: center;
  position: fixed;
  bottom: 0;
  width: 100%;
  max-width: 480px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99
}
@media (max-height:768px) {
  .profile-header-new img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    background-color: #000
  }
  .profile-info {
    padding: 5px;
    color: #000;
    text-align: left;
    height: 40px
  }
  .profile-info h2 {
    font-size: 10px;
    margin: 2px 0
  }
  .profile-info p {
    color: gray;
    font-style: italic;
    font-size: 10px;
    margin: 2px 0
  }
}
@media (max-height:520px) {
  .profile-header-new img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    background-color: #000
  }
}
.step_matches_bg {
  font-family: Arial,sans-serif;
  background-color: #101010;
  color: #fff
}
@media only screen and (max-width:767px) {
  body {
    background-color: var(--black-color)!important
  }
  .step_matches_bg {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: var(--black-color)
  }
  .matches_container {
    display: flex;
    flex-direction: column;
    flex: 1
  }
  .step7 {
    transform: translateX(0)
  }
  .profile-grid-wrapper {
    max-height: 65%;
    overflow-y: auto;
    padding: 10px;
    scroll-behavior: smooth;
    z-index: 1
  }
}
@media only screen and (min-width:768px) {
  .form {
    background-image: url(../images/desktop_bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center
  }
  .step7 {
    transform: none!important
  }
  .step_matches_bg {
    display: flex;
    background-color: var(--black-color)
  }
  .matches_container {
    display: flex;
    flex-direction: column;
    flex: 1
  }
}
.profile-card {
  background-color: #fff;
  color: #333;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0,0,0,.2);
  display: flex;
  flex-direction: column;
  height: 250px;
  position: relative
}
.profile-card .description {
  height: 20%;
  padding: 5px;
  box-sizing: border-box;
  text-align: left
}
.profile-card .description .name {
  font-size: 14px;
  font-weight: 400
}
.profile-card .description .details {
  margin-top: 3px;
  font-size: 12px;
  color: #777
}
@media only screen and (max-height:720px) {
  .profile-card {
    background-color: #fff;
    color: #333;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0,0,0,.2);
    display: flex;
    flex-direction: column;
    height: 180px!important;
    position: relative
  }
  .profile-card .description {
    height: 22%;
    padding: 5px;
    box-sizing: border-box;
    text-align: left
  }
  .profile-card .description .name {
    font-size: 12px;
    font-weight: 400
  }
  .profile-card .description .details {
    margin-top: 2px;
    font-size: 10px;
    color: #777
  }
  .profile-grid-wrapper {
    max-height: 50%!important;
    overflow-y: auto;
    padding: 10px;
    scroll-behavior: smooth;
    z-index: 1
  }
}
.header {
  text-align: center;
  padding: 20px;
  flex-shrink: 0
}
.header h1 {
  margin: 0;
  font-size: 24px
}
.header span {
  color: #ff5722;
  font-weight: 700
}
.profile-grid-wrapper {
  max-height: 65%;
  overflow-y: auto;
  padding: 10px;
  scroll-behavior: smooth;
  z-index: 1
}
.profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px
}
.profile-card .status {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: #4caf50;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 20px;
  z-index: 2
}
.profile-card .status.offline {
  background-color: #888
}
.profile-card .image {
  flex: 1;
  background-size: cover;
  position: relative
}
.step5__button--1 {
  min-height: 60px;
  width: 100%;
  max-width: 20.625rem
}
.step5_button {
  background-color: var(--main-color);
  font-size: 1.125rem;
  line-height: 3.2rem;
  text-transform: capitalize;
  color: #fff;
  margin-top: .5rem;
  margin-bottom: .5em;
  padding-left: 1.15625rem;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  width: 95%;
  max-width: 30rem
}
.step5_button:hover {
  background-color: var(--main-color)
}
.button_footer {
  background-color: #ff5722;
  text-align: center;
  padding: 15px 0;
  flex-shrink: 0
}
.button_footer button {
  background-color: #fff;
  color: #ff5722;
  font-size: 18px;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  cursor: pointer
}
.button_footer button:hover {
  background-color: #ffe0cc
}
.step__intro__bg_matches {
  background-color: var(--black-color);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: -100;
  height: 100%;
  width: 100%;
  max-width: 480px;
  object-fit: cover
}
.intro__bg__content_matches .first {
  flex: 1;
  flex-direction: column
}
.image-container {
  max-height: 40vh;
  overflow: hidden
}
.matches_images_email {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top
}
.matches_images {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin-top: 25px;
  padding: 10px;
  transform: translate(0 ,.5%)
}
.step__intro__bg_map {
  background-image: url(../images/map.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  padding-top: 10px;
  width: 100%;
  overflow: hidden;
  max-width: 480px;
  color: #fff!important;
  position: absolute;
  bottom: -15px;
  left: 50%;
  border-radius: 25px;
  transform: translateX(-50%);
  z-index: 99
}
.blurred-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(3px)
}
.blurred-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(2px)
}
.step__warning {
  margin: 0;
  font-size: 1rem;
  text-align: center;
  padding: 0;
  width: 80%;
  max-width: 480px;
  color: #fff!important;
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
  text-shadow: -1px 1px 10px #000;
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: -.5px
}
.error {
  padding: 0 10px;
  font-size: 14px;
  text-align: center;
  display: none;
  margin-top: 3px;
  color: #fa221c;
  border-radius: 6px;
  font-size: 12px
}
.results__list-multi {
  margin: 2rem 0
}
.botRight {
  top: 440px
}
.header__container {
  background: 0 0!important;
  padding: 0 20px
}
.step__warning strong {
  font-weight: 500;
  font-size: 1.25rem;
  display: block;
  padding: 5px;
  background: #000;
  -moz-transform: rotate(358deg);
  -webkit-transform: rotate(358deg);
  -o-transform: rotate(358deg);
  -ms-transform: rotate(358deg);
  transform: rotate(358deg)
}
.step__warning strong span {
  color: #fff
}
.step__text {
  max-width: 520px;
  margin: 0 auto;
  padding: 0 13px!important
}
.step__text__content {
  max-width: 380px;
  margin: 16px auto 0;
  position: relative
}
.step__text__content .step__label {
  text-transform: uppercase;
  margin-bottom: 14px
}
.step__text--1 {
  margin-bottom: .5rem
}
.step__text--2,
.step__text--3 {
  margin-bottom: .9rem
}
.step__text--4,
.step__text--5 {
  margin-bottom: .6rem
}
.step__text--10,
.step__text--6,
.step__text--7,
.step__text--8,
.step__text--9 {
  margin-bottom: .7rem
}
.step__label {
  display: block;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 700
}
.step[data-step="12"] .step__label {
  margin-top: 10px!important
}
.step__label__robot--1 {
  margin: .857rem 0 .5rem;
  font-size: 1.428rem;
  color: #ed4653
}
.step__label__robot--2 {
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: .428rem;
  font-size: .857rem
}
.step__label__robot--3 {
  font-size: 1.125rem;
  color: #ed4653
}
.step__label__password {
  max-width: 96%;
  margin: 2.9rem auto 2.214rem;
  font-size: 1.125rem;
  line-height: 1.3
}
.step__label-small {
  font-size: .8125rem;
  line-height: 1.5rem;
  color: #9b9b9b
}
.step__label-last {
  width: 100%;
  max-width: 19.625rem;
  margin: 0 auto
}
.step__match {
  margin: 2rem auto .375rem;
  font-size: 4.285rem;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .214rem;
  line-height: 1.1
}
.step__girls {
  width: 17.0625rem;
  margin: 0 auto 10px;
  background-image: url("../images/snap.png");
  background-repeat: no-repeat;
  background-size: cover
}
.step__girls:before {
  content: '';
  display: block;
  padding-bottom: 45.64%
}
.step__preferences {
  max-width: 18rem;
  margin: 0 auto 1.875rem;
  font-size: 1.25rem;
  color: #fff;
  line-height: 1.875rem
}
.step__disclaimer {
  width: 100%;
  margin: 35px auto 0;
  font-size: .625rem;
  color: #818181;
  letter-spacing: .05875rem;
  line-height: 2;
  text-transform: uppercase
}
.step__disclaimer a {
  color: #818181
}
.step__buttons {
  max-width: 500px;
  margin: 0 auto
}
span.step__button--1 {
  display: inline-block
}
.realBtns {
  display: none
}
* {
  box-sizing: border-box
}
.realBtns button {
  width: 90px
}
.btns,
.step__button {
  width: 95%;
  max-width: 22.5rem;
  margin-top: .5rem;
  margin-bottom: .5em;
  padding: .1rem;
  font-size: 1.125rem;
  line-height: 2rem;
  text-transform: capitalize;
  color: #fff;
  background: var(--main-color);
  border: none;
  -webkit-border-radius: 0.4rem;
  -moz-border-radius: .4rem;
  border-radius: .4rem
}
.noBtn {
  background: #fff!important;
  color: #fff
}
.icon {
  margin-top: 10px;
  width: 40px;
  height: 40px
}
.step__button--1 {
  min-height: 50px;
  width: 100%
}
.step__button--2 {
  align-items: center;
  width: 46%
}
.step_button_matches {
  margin-top: 51px;
  max-width: 20.625rem
}
[data-step="7"] .step__button--1 {
  width: 100%!important;
  padding: 16px;
  margin-top: 10px;
  margin-bottom: 20px
}
.step__button:focus {
  outline: 0
}
.step__button_extra {
  margin-top: 2rem
}
.step__button__arrow {
  position: relative;
  height: 1em;
  width: auto;
  top: .125em;
  left: .1875rem
}
.promo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: absolute;
  height: 2.2em;
  top: 0;
  left: 0;
  right: 0;
  padding: 5px;
  background-color: var(--second-color);
  z-index: 999;
  font-size: 18px;
  letter-spacing: .3px
}
.clock {
  display: inline-block;
  padding: 2px 5px;
  border: 1.5px solid #fff;
  border-radius: 8px;
  font-size: 18px;
  color: #fff
}
.step__button--3 .step__button__arrow {
  left: 2.65rem
}
.step .bg__init {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  max-width: 480px;
  margin: auto
}
.step[data-step="1"] .bg__init {
  background-image: url(../images/step1.jpg)
}
.bf__red {
  color: #d7175e
}
.girl.girl__image--1 {
  background-image: url(../images/step2_map.jpg)
}
.girl .girl__text .step__title.big {
  color: #fff;
  text-align: center
}
.girl .girl__text .step__title.big::before {
  content: "";
  display: inline-block;
  height: 100%;
  background-color: #000;
  width: 200vw;
  position: absolute;
  z-index: -1;
  transform: translateX(-99%)
}
.girl .girl__text {
  position: absolute;
  top: 24px;
  z-index: 100;
  transform-origin: center;
  transform: rotate(-4deg);
  width: 100%;
  max-width: 450px
}
.caption {
  transform-origin: center;
  margin-bottom: 10px;
  position: relative
}
.caption.padding {
  padding: 20px
}
.caption_step3 {
  transform-origin: center;
  margin-top: 70px;
  position: relative
}
.caption_step7 {
  transform-origin: center;
  padding: 5px;
  margin-top: 10px;
  position: relative
}
.caption_step9 {
  transform-origin: center;
  padding: 20px;
  margin-top: 30px;
  position: relative
}
.girl.girl__image--1 .girl__text {
  top: 9px
}
.girl.girl__image--2 .girl__text {
  top: 50%;
  transform: rotate(-4deg) translateY(-50%)
}
.step__field {
  position: relative;
  width: 95%;
  margin: .3rem .5rem;
  text-align: left
}
.step__field__input {
  padding: .625rem 2.3rem .6875rem 1.2rem;
  width: 100%;
  font-size: 1rem;
  line-height: 1.5rem;
  background-color: #2c2b2b;
  border: none;
  border-radius: 10px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  color: #c0b7b7;
  text-align: center;
  font-weight: 400
}
.step__field__input:focus {
  outline: 0
}
.step__field__valid {
  position: absolute;
  right: .4375rem;
  top: 48%;
  width: 1.25rem;
  height: 1rem;
  background: url("//cdn.tours-78-94.wellhello.com/snapcheat/img/svg/check.svg") no-repeat scroll;
  background-size: 1.1rem 1.1rem;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%)
}
.step__field__show {
  position: absolute;
  top: .7rem;
  left: 101%;
  font-size: .642rem;
  background: 0 0;
  border: 0
}
.step__field__show.is--active .step__field__show__eyeon {
  display: inline-block
}
.step__field__show.is--active .step__field__show__eyeoff {
  display: none
}
.step__field__show__eyeon {
  display: none
}
.step__field__placeholder {
  position: absolute;
  left: .214rem;
  top: 0;
  font-size: 1.125rem;
  line-height: 2.0625rem;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
  z-index: -1;
  color: #fff
}
.step__field__placeholder_active {
  top: -.5rem;
  font-size: .625rem;
  line-height: .625rem;
  color: #fff
}
#lastStepBtn {
  font-size: 18px
}
.step__field__error {
  position: absolute;
  z-index: 10;
  margin: 0;
  padding: 1rem;
  background-color: #000;
  border-radius: .4375rem;
  line-height: 1.6;
  color: #fff;
  margin-top: 5px;
  font-weight: 300;
  font-size: .75rem;
  width: 100%;
  max-width: 255px
}
.step__field__error:before {
  content: '';
  position: absolute;
  z-index: -1;
  bottom: 100%;
  left: .875rem;
  display: block;
  width: 1.125rem;
  height: 1.875rem;
  background-color: #000;
  -webkit-transform: translateY(73%) rotate(45deg);
  transform: translateY(73%) rotate(45deg)
}
.step__free {
  margin: 1rem auto 1.8rem;
  font-size: 3.0625rem;
  line-height: 1.5rem;
  text-transform: uppercase;
  color: #000;
  padding-top: 30px;
  font-weight: 700;
  display: block;
  letter-spacing: -1px
}
.first {
  position: relative;
  transform: translateY(-20px)
}
.age-buttons-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  padding: 30px;
  padding-top: 35px
}
.age-button-mobile {
  height: 50px;
  background-color: var(--main-color);
  padding: 10px 10px;
  border-color: var(--main-color);
  border-style: solid;
  border-width: 1px;
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  font-size: 20px;
  transition: all .3s ease
}
.age-button-mobile.active {
  background-color: var(--main-color)
}
.first_matches {
  position: relative;
  margin: 25px 25px 0 25px
}
.first_matches_email {
  position: relative
}
.bold-text {
  font-weight: 700
}
.green-text {
  color: #55e349
}
.orange-text {
  color: var(--main-color)
}
.offer {
  width: 100%;
  background: linear-gradient(to right,var(--second-color),var(--second-color));
  backdrop-filter: blur(15px);
  padding: 5px 0;
  transform: rotate(-3deg);
  position: relative;
  z-index: 1
}
.offer__container {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  -webkit-animation: scroll 40s linear infinite;
  animation: scroll 40s linear infinite;
  width: calc(var(--offer-div-width) * 12)
}
.offer div {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  place-items: center;
  gap: 10px
}
.offer img {
  max-width: 30px
}
.offer span {
  font-size: 1rem;
  color: #fff
}
.offer .line {
  width: 1px;
  height: 60%;
  background: #101011;
  margin: 0 10px
}
@-webkit-keyframes scroll {
  0% {
    transform: translateX(0)
  }
  100% {
    transform: translateX(calc(var(--offer-div-width-neg) * 6))
  }
}
@keyframes scroll {
  0% {
    transform: translateX(0)
  }
  100% {
    transform: translateX(calc(var(--offer-div-width-neg) * 6))
  }
}
.header {
  width: 100%;
  text-align: center;
  z-index: 200;
  padding: .5rem 0
}
.header_absolute {
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  border-bottom: 1px solid #e3e0e0
}
.header__container {
  position: relative;
  max-width: 480px;
  margin: 0 auto;
  min-height: 50px
}
.header__container__logo {
  text-align: center;
  height: auto;
  margin-top: 5px;
  width: 100%;
  max-width: 260px
}
.header__container__chat {
  position: absolute;
  top: .9375rem;
  right: 0;
  width: 1.5625rem;
  height: 1.5625rem
}
.girl__overlay {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding-top: .8rem;
  padding-bottom: 2.5rem;
  background: rgba(255,255,255,0);
  background: -moz-linear-gradient(top,rgba(255,255,255,0) 0,#000 100%);
  background: -webkit-gradient(left top,left bottom,color-stop(0,rgba(255,255,255,0)),color-stop(100%,#000));
  background: -webkit-linear-gradient(top,rgba(255,255,255,0) 0,#000 100%);
  background: -o-linear-gradient(top,rgba(255,255,255,0) 0,#000 100%);
  background: -ms-linear-gradient(top,rgba(255,255,255,0) 0,#000 100%);
  background: linear-gradient(to bottom,rgba(255,255,255,0) 0,#000 100%)
}
.step__buttons_extra {
  margin-top: 1rem
}
.step__buttons__button {
  position: relative;
  display: inline-block;
  width: 37px;
  height: 37px;
  margin: .15rem 1rem;
  cursor: pointer
}
.step__buttons__button_disabled {
  background: #eceef4
}
.step__buttons__button__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  -o-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  width: 100%
}
.step__buttons__button__icon--yes {
  -webkit-transform: translate(-51%,-46%);
  -moz-transform: translate(-51%,-46%);
  -ms-transform: translate(-51%,-46%);
  -o-transform: translate(-51%,-46%);
  transform: translate(-51%,-46%);
  animation: 1.2s infinite beatHeart;
  width: 62px;
  height: 62px
}
.step__buttons__button__icon--no {
  -webkit-transform: translate(-49%,-48%);
  -moz-transform: translate(-49%,-48%);
  -ms-transform: translate(-49%,-48%);
  -o-transform: translate(-49%,-48%);
  transform: translate(-49%,-48%)
}
@keyframes beatHeart {
  0% {
    transform: translate(-51%,-46%) scale(1)
  }
  25% {
    transform: translate(-51%,-46%) scale(1.05)
  }
  40% {
    transform: translate(-51%,-46%) scale(1)
  }
  60% {
    transform: translate(-51%,-46%) scale(1.05)
  }
  100% {
    transform: translate(-51%,-46%) scale(1)
  }
}
.step__girl {
  position: relative;
  width: 95%;
  height: auto;
  margin: 0 auto;
  background: #000
}
.girl {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  max-width: 480px;
  margin: auto
}
.girl::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  height: 20vh;
  background: #fff;
  background: -moz-linear-gradient(180deg,rgba(255,255,255,0) 0,#000 100%);
  background: -webkit-linear-gradient(180deg,rgba(255,255,255,0) 0,#000 100%);
  background: linear-gradient(180deg,rgba(255,255,255,0) 0,#000 100%);
  opacity: .7;
  z-index: 1
}
.likes {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 10px;
  text-align: left;
  font-weight: 300;
  z-index: 2;
  font-size: .75rem;
  color: #fff;
  height: auto
}
.likes__container.address {
  text-transform: uppercase;
  font-family: Roboto,sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: -.015rem;
  font-size: 11px
}
.likes__container.address IMG {
  position: relative;
  top: 5px;
  max-width: 16px
}
.girl__info {
  font-size: .875rem;
  margin-bottom: .875rem;
  text-align: center
}
.girl__info IMG {
  top: 10px;
  position: relative
}
.girl__info__name {
  font-weight: 800
}
.girl__image--1 .girl__caption {
  top: 50%;
  margin-top: -6.2rem
}
.girl__image--2 .left {
  height: 100%;
  background-image: url("../images/step3a.jpg");
  background-size: cover;
  position: relative;
  background-position: center
}
.girl__image--2 .right {
  height: 100%;
  background-image: url("../images/step3b.jpg");
  background-size: cover;
  position: relative;
  background-position: center
}
.girl__image--2 .girl__caption {
  top: 50%;
  margin-top: -6.2rem
}
.girl__image--3 .left {
  height: 100%;
  background-image: url("../images/step4a.jpg");
  background-size: cover;
  position: relative;
  background-position: center
}
.girl__image--3 .right {
  height: 100%;
  background-image: url("../images/step4b.jpg");
  background-size: cover;
  position: relative;
  background-position: center
}
.girl__image--3 .girl__caption {
  top: 50%;
  margin-top: -5.8em
}
.girl__image--4 .left {
  height: 100%;
  background-image: url("../images/step5a.jpg");
  background-size: cover;
  position: relative;
  background-position: center
}
.girl__image--4 .right {
  height: 100%;
  background-image: url("../images/step5b.jpg");
  background-size: cover;
  background-position: center;
  position: relative
}
.girl__image--4 .girl__caption {
  top: 50%;
  margin-top: -6.2rem
}
.girl__image--5 .left {
  height: 100%;
  background-image: url("../images/step6a.jpg");
  background-size: cover;
  position: relative;
  background-position: center
}
.girl__image--5 .right {
  height: 100%;
  background-image: url("../images/step6b.jpg");
  background-size: cover;
  background-position: top center;
  position: relative
}
.girl__image--5 .girl__caption {
  top: 50%;
  margin-top: -6.2rem
}
.girl__caption {
  position: absolute;
  left: 0;
  width: 100%;
  padding: .5rem 0;
  background: rgba(0,0,0,.7);
  text-align: center;
  font-size: 1.0714rem
}
.captcha {
  overflow: hidden;
  width: 90%;
  max-width: 500px;
  margin: 1.285rem auto .714rem;
  padding: 0;
  list-style: none;
  text-align: center;
  font-size: 0
}
.captcha__item {
  position: relative;
  display: inline-block;
  width: 30%;
  margin-left: 3%;
  margin-bottom: 3%;
  background-repeat: no-repeat;
  background-size: 104%;
  background-position: 25% 25%
}
.captcha__item:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255,255,255,.7);
  background-image: url('//cdn.tours-78-94.wellhello.com/snapcheat/img/svg/robot_tick.svg');
  background-repeat: no-repeat;
  background-size: 72%;
  background-position: center;
  opacity: 0;
  -webkit-transition: opacity .3s ease-out;
  -moz-transition: opacity .3s ease-out;
  -o-transition: opacity .3s ease-out;
  transition: opacity .3s ease-out
}
.captcha__item.is--active:after {
  opacity: 1
}
.captcha__item:nth-child(3n+1) {
  margin-left: 0
}
.captcha__item:before {
  content: '';
  display: block;
  padding-bottom: 97%
}
.captcha__item--1 {
  background-image: url("../images/c1.jpg")
}
.captcha__item--2 {
  background-image: url("../images/c2.jpg")
}
.captcha__item--3 {
  background-image: url("../images/c3.jpg")
}
.captcha__item--4 {
  background-image: url("../images/c4.jpg")
}
.captcha__item--5 {
  background-image: url("../images/c5.jpg")
}
.captcha__item--6 {
  background-image: url("../images/c6.jpg")
}
.results {
  position: relative
}
.results__list {
  list-style: none;
  padding: 0
}
.results__list-single {
  margin: 2rem 0 1.5rem;
  padding: 0
}
.results__list-multi {
  margin: 0 0 2rem
}
.results__list-single-step {
  margin: 15px 0 0 0;
  font-size: 16px;
  line-height: 1.4rem;
  text-align: center
}
.results__list-single-step-big {
  font-size: 33px;
  text-transform: uppercase;
  color: #000;
  font-weight: 700;
  margin: 0;
  letter-spacing: -1px
}
.results__list-multi-step {
  min-height: 1.5rem;
  margin-bottom: 0;
  padding-left: 1.55rem;
  padding-top: 3px;
  font-weight: 700;
  text-align: left;
  font-size: 1rem;
  background: url(../images/check.svg) no-repeat scroll;
  background-size: 1em 1em;
  background-position: 0 .4375rem;
  margin-bottom: 5px
}
div[data-finish] {
  max-width: 19.6rem;
  margin: 0 auto
}
.results__link {
  box-sizing: border-box;
  display: block;
  width: 100%;
  padding: 1rem 1.15625rem;
  font-size: 1.1428rem;
  line-height: 2.06;
  color: #fff;
  background: #6ebd52;
  border: none;
  -webkit-border-radius: 0.5625rem;
  -moz-border-radius: .5625rem;
  border-radius: 6px;
  text-decoration: none;
  text-align: center;
  font-weight: 600
}
.step__label__email {
  text-transform: uppercase;
  font-size: 15px;
  font-weight: 600
}
.results__spinner {
  position: absolute;
  top: 1.45rem;
  left: 0;
  width: 100%
}
.results__spinner__inner {
  color: #9b9b9b;
  padding: 0 100px;
  text-align: center;
  display: flex;
  left: 100%;
  text-align: center;
  align-items: auto;
  justify-content: center
}
.results__spinner__inner label {
  font-size: 20px;
  opacity: 0;
  display: inline-block
}
.results__spinner__inner label:nth-child(6) {
  -webkit-animation: lol 3s infinite ease-in-out;
  animation: lol 3s infinite ease-in-out
}
.results__spinner__inner label:nth-child(5) {
  -webkit-animation: lol 3s .1s infinite ease-in-out;
  animation: lol 3s .1s infinite ease-in-out
}
.results__spinner__inner label:nth-child(4) {
  -webkit-animation: lol 3s .2s infinite ease-in-out;
  animation: lol 3s .2s infinite ease-in-out
}
.results__spinner__inner label:nth-child(3) {
  -webkit-animation: lol 3s .3s infinite ease-in-out;
  animation: lol 3s .3s infinite ease-in-out
}
.results__spinner__inner label:nth-child(2) {
  -webkit-animation: lol 3s .4s infinite ease-in-out;
  animation: lol 3s .4s infinite ease-in-out
}
.results__spinner__inner label:first-child {
  -webkit-animation: lol 3s .5s infinite ease-in-out;
  animation: lol 3s .5s infinite ease-in-out
}
.hidden {
  visibility: hidden
}
.upgrade {
  text-align: center;
  overflow: hidden
}
.upgrade__container {
  margin-top: 10px
}
.upgrade__content {
  position: relative;
  overflow: hidden;
  width: calc(100% + 3.125rem);
  left: -1.5625rem;
  padding: 3.2rem 0 2rem;
  background: #fff;
  box-shadow: 0 .125rem .25rem 0 rgba(0,0,0,.31);
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  transform: rotate(-3deg)
}
.upgrade__content span {
  font-weight: 700
}
.upgrade__content span.upgrade__fact,
.upgrade__content span.upgrade__receive,
.upgrade__content span.upgrade__trial__text,
.upgrade__content span.upgrade__trial__text span {
  font-weight: 400
}
.upgrade__fact {
  position: absolute;
  top: .6rem;
  left: -35px;
  width: 12.25rem;
  padding-top: 3px;
  padding-bottom: 1px;
  padding-right: 1.5rem;
  line-height: 1.9375rem;
  font-size: 1.314rem;
  text-transform: uppercase;
  letter-spacing: .1225rem;
  color: #fff;
  background: #000;
  transform: rotate(-27deg);
  box-sizing: border-box;
  letter-spacing: 1.96px
}
.upgrade__members {
  display: block;
  margin: 0;
  padding-left: 1rem;
  font-size: 2.2rem;
  text-transform: capitalize;
  letter-spacing: .01875rem;
  color: #000;
  line-height: 2.1875rem;
  margin-top: 30px
}
.upgrade__receive {
  display: block;
  margin-top: .2rem;
  margin-bottom: .4rem;
  padding-left: .2rem;
  font-size: 1.25rem;
  color: #4a4a4a;
  line-height: 2.125rem
}
.upgrade__hookups {
  display: block;
  margin: 0 auto 1rem;
  font-size: 2.3rem;
  text-transform: capitalize;
  letter-spacing: .0125rem;
  color: #e92754;
  line-height: 1.9rem
}
.upgrade__button {
  box-sizing: border-box;
  display: block;
  max-width: 21rem;
  margin: 1.5625rem auto 1.5rem;
  padding-left: .5rem;
  border: none;
  font-size: 1.3rem;
  line-height: 4.4rem;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  border-radius: .5625rem
}
.upgrade__button__arrow {
  position: relative;
  top: .125rem;
  left: .7rem;
  width: .9375rem;
  height: 1.0625rem
}
.upgrade__trial {
  padding-left: .1rem;
  font-size: 1.07rem;
  line-height: 1rem
}
.upgrade__trial__text {
  text-transform: capitalize;
  color: #4a4a4a
}
.upgrade__nothanks {
  margin-top: 2.9rem;
  font-size: .93rem;
  color: #000;
  letter-spacing: 0;
  line-height: 1.3125rem;
  font-weight: 400;
  font-family: Roboto,sans-serif
}
.upgrade__nothanks a {
  color: #000;
  font-weight: 400
}
.step[data-effect=zoom] {
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0)
}
.step[data-effect=left] {
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%);
  transform: translateX(100%)
}
.step[data-effect=up] {
  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  -ms-transform: translateY(100%);
  -o-transform: translateY(100%);
  transform: translateY(100%)
}
.step[data-effect=turn] {
  -webkit-transform: rotate3d(0,1,0,90deg);
  -moz-transform: rotate3d(0,1,0,90deg);
  -ms-transform: rotate3d(0,1,0,90deg);
  -o-transform: rotate3d(0,1,0,90deg);
  transform: rotate3d(0,1,0,90deg)
}
.step[data-step="1"] {
  -webkit-transform: none;
  -moz-transform: none;
  -ms-transform: none;
  -o-transform: none;
  transform: none
}
@-webkit-keyframes lol {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-18.75rem)
  }
  33% {
    opacity: 1;
    -webkit-transform: translateX(0)
  }
  66% {
    opacity: 1;
    -webkit-transform: translateX(0)
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(18.75rem)
  }
}
@keyframes lol {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-18.75rem);
    transform: translateX(-18.75rem)
  }
  33% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0)
  }
  66% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0)
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(18.75rem);
    transform: translateX(18.75rem)
  }
}
@media only screen and (max-width:320px) and (max-height:440px) {
  html {
    font-size: 13.5px
  }
}
@media only screen and (min-width:400px) {
  html {
    font-size: 18px
  }
}
.botRight {
  background-color: transparent;
  border: #6ebd52 3px solid;
  width: 40px;
  height: 40px;
  border-radius: 40px;
  padding: 0;
  color: #6ebd52;
  position: fixed;
  top: 460px;
  right: 5%;
  margin-right: -5px
}
.stepDots {
  position: absolute;
  top: 80px;
  right: 5%;
  list-style-type: none;
  font-size: 130px;
  line-height: 29px
}
.active {
  color: #6ebd52
}
@media only screen and (max-width:415px) {
  .step__title.big:not(.starting) {
    font-size: 28px
  }
  .step__text__content .step__label {
    font-size: 17px
  }
}
.promo_top {
  width: 100%;
  background: var(--main-color);
  backdrop-filter: blur(15px);
  padding: 5px 0;
  position: relative;
  z-index: 1
}
.promo_top_container {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content
}
.promo_top div {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  place-items: center;
  gap: 10px
}
.promo_top img {
  max-width: 30px
}
.promo_top span {
  font-size: 1rem;
  color: #111
}
@media only screen and (max-width:340px) {
  .step__text__content .step__label {
    font-size: 15px
  }
  .step__button--1 {
    font-size: 20px
  }
  .step__title.big {
    font-size: 26px
  }
  .step__title.big:not(.starting) {
    font-size: 24px
  }
  .step__disclaimer {
    margin: 30px auto 0
  }
  .step__button.step__button--4 {
    max-width: 17.625rem;
    margin: .75rem 0
  }
  .upgrade__nothanks {
    font-size: .85rem
  }
  .step__label {
    font-size: 15px
  }
  .step__button.step__button--2 {
    max-width: 17.625rem;
    margin: .25rem 0 0
  }
  .step__match {
    font-size: 3.5rem
  }
  .results__list-multi-step {
    font-size: 15px
  }
  div[data-finish] {
    max-width: 18rem
  }
  .upgrade__content {
    padding: 2rem 0 1rem
  }
  .upgrade__hookups {
    font-size: 31px
  }
  .upgrade__members {
    font-size: 32px
  }
  .upgrade__button {
    max-width: 19rem;
    margin: 1rem auto;
    font-size: 20px
  }
  .step__text__content {
    margin: 10px auto 0
  }
  .upgrade__fact {
    left: -39px;
    top: -1px
  }
  .results__list-multi {
    margin: 0 0 1.7rem
  }
  .results__list-single-step.small {
    font-size: .97rem
  }
  .results__list.results__list-multi {
    padding: 0 1rem
  }
  .step__title.big,
  .step__title.big:not(.starting) {
    font-size: 22px
  }
  .step__label__email {
    font-size: 14px
  }
  .results__list-single-step-big {
    font-size: 28px
  }
}
@media only screen and (max-width:320px) and (max-height:440px) {
  .step__girl {
    font-size: 13.5px
  }
}
@media only screen and (min-width:400px) {
  .step__girl {
    max-width: 391px
  }
}
@media only screen and (min-width:480px) {
  .step__girl {
    max-width: 435px
  }
}
@media only screen and (min-width:341px) {
  .step__warning {
    bottom: 20%
  }
  .step__label {
    font-size: 16px
  }
}
@media only screen and (max-width:420px) {
  .upgrade__content {
    transform-origin: center;
    transform: rotate(-3deg) scale(.9);
    margin-top: -20px
  }
}
.error {
  position: absolute;
  top: 14px;
  left: 0;
  right: 0;
  font-size: 11px
}
.results footer,
.step footer,
.upgrade footer {
  display: none!important
}
@media screen and (max-width:1024px) and (orientation:landscape) {
  footer {
    display: none;
    z-index: 99
  }
  .results__spinner {
    top: 1.5rem!important
  }
  .step:not([data-step="1"]) footer,
  .upgrade footer {
    display: block!important;
    position: relative;
    margin: 20px 0
  }
  [data-step="1"] footer {
    display: block!important
  }
  .girl {
    min-height: 0;
    height: 100vw;
    background-position-x: center
  }
}