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

#input_email {
  display: block;
  width: 80%;
  margin: 0 auto 15px auto;
  height: 50px;
  font-size: 15px;
  padding: 0 15px; }
  @media (min-width: 1200px) {
    #input_email {
      font-size: 20px;
      height: 39px;
      width: 100%; } }

.step1 .btn-main {
  background: transparent;
  border: none; }

.btn.btn-main {
  position: relative;
  display: inline-block;
  padding: 1.2em 1em;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  user-select: none;
  color: white;
  font-size: 21px; }
  @media (min-width: 1200px) {
    .btn.btn-main {
      font-size: 30px; } }
  .btn.btn-main::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(135deg, #CE3232, #A7705C);
    border-radius: 4px;
    transition: box-shadow .5s ease, transform .2s ease;
    will-change: transform;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transform: translateY(var(--ty, 0)) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)) translateZ(var(--tz, -12px)); }
  .btn.btn-main:hover::before {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); }
  .btn.btn-main::after {
    position: relative;
    display: inline-block;
    content: attr(data-title);
    transition: transform .2s ease;
    font-weight: bold;
    letter-spacing: .01em;
    will-change: transform;
    transform: translateY(var(--ty, 0)) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)); }
  .btn.btn-main.btn-secondary {
    padding: 0.5em 1.5em; }

.btn-secondary {
  background: linear-gradient(135deg, #CE3232, #A7705C);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  border: none;
  border-radius: 4px;
  color: white;
  display: inline-block;
  padding: 0.5em 1.5em;
  font-size: 21px; }
  .btn-secondary:hover {
    background: rgba(255, 142, 162, 0.9); }
  @media only screen and (min-width: 900px) and (orientation: landscape) {
    .btn-secondary {
      font-size: 17px; } }
  @media (min-width: 1200px) {
    .btn-secondary {
      padding: 0.3em 1.5em;
      font-size: 30px; } }

body {
  min-height: 340px; }
  body .step-left .step-girl img {
    max-width: 100%; }
    @media (max-width: 599px) {
      body .step-left .step-girl img {
        margin: 0 0 4rem 0; } }
    @media only screen and (min-width: 900px) and (orientation: landscape) {
      body .step-left .step-girl img {
        max-width: 90%; } }
    @media (min-width: 1200px) {
      body .step-left .step-girl img {
        width: 100%; } }
  @media only screen and (max-width: 900px) and (orientation: landscape) {
    body .option {
      display: inline-block;
      margin-right: 3rem;
      font-size: medium; } }
  @media (min-width: 1200px) {
    body .option {
      margin-top: 3rem;
      font-size: 30px; } }
  @media only screen and (min-width: 900px) and (orientation: landscape) {
    body .option {
      font-size: 18px; } }
  @media only screen and (max-width: 900px) and (orientation: landscape) {
    body .option.option-step-nine {
      margin-top: 0; } }
  @media only screen and (max-width: 900px) and (orientation: landscape) {
    body .options {
      margin: 0 auto 0 0; } }
  @media (min-width: 1200px) {
    body .options {
      margin: 3rem 0; } }
  @media only screen and (max-width: 900px) and (orientation: landscape) {
    body .option-title {
      text-align: left;
      font-size: 14px; } }
  @media (min-width: 1200px) {
    body .option-title {
      font-size: 23px; } }
  body .pagination {
    margin: 8rem auto 7rem; }
    @media (max-width: 599px) {
      body .pagination {
        margin: 0rem auto 5rem; } }
    @media only screen and (max-width: 900px) and (orientation: landscape) {
      body .pagination {
        margin: 3rem 0 0 0; } }
    @media only screen and (min-width: 600px) and (min-height: 1024px) {
      body .pagination {
        margin: 8rem auto 0rem; } }
    @media only screen and (min-width: 900px) and (orientation: landscape) {
      body .pagination {
        margin: 3rem; } }
  body .btn-horizontal {
    display: none; }
    @media only screen and (max-width: 900px) and (orientation: landscape) {
      body .btn-horizontal {
        display: flex;
        align-self: center;
        width: 100%;
        justify-content: space-evenly; } }
    @media only screen and (min-width: 900px) and (orientation: landscape) {
      body .btn-horizontal {
        display: flex;
        align-self: center;
        width: 100%;
        justify-content: space-evenly; } }
    @media only screen and (min-width: 600px) and (min-height: 1024px) {
      body .btn-horizontal {
        display: none; } }
    @media (min-width: 1200px) {
      body .btn-horizontal {
        display: flex;
        align-self: center;
        width: 100%;
        justify-content: space-evenly; } }
  body .btn-vertical {
    display: flex;
    justify-content: space-evenly;
    padding: 0 23rem; }
    @media (max-width: 599px) {
      body .btn-vertical {
        padding: 0 4rem; } }
    @media only screen and (max-width: 900px) and (orientation: landscape) {
      body .btn-vertical {
        display: none; } }
    @media only screen and (min-width: 900px) and (orientation: landscape) {
      body .btn-vertical {
        display: none; } }
  body .step-block {
    max-height: 100vh; }
  body .step-wrapper {
    display: flex;
    flex-direction: row; }
    @media (max-width: 599px) {
      body .step-wrapper {
        flex-direction: column; } }
    @media only screen and (max-width: 900px) and (orientation: landscape) {
      body .step-wrapper {
        flex-direction: row; } }
    @media only screen and (min-width: 600px) and (min-height: 1024px) {
      body .step-wrapper {
        flex-direction: column; } }
    @media (min-width: 1200px) {
      body .step-wrapper {
        flex-direction: row;
        padding-right: 10rem; } }
  body .step {
    margin: auto; }
    @media only screen and (max-width: 900px) and (orientation: landscape) {
      body .step {
        width: 100%; } }
    @media only screen and (min-width: 900px) and (orientation: landscape) {
      body .step {
        width: 100%;
        max-width: 100%;
        margin: auto 3rem; } }
  @media (max-width: 599px) {
    body .step1 {
      padding-top: 20rem; } }
  @media only screen and (min-width: 600px) and (min-height: 1024px) {
    body .step1 {
      padding-top: 36rem; } }
  @media (min-width: 768px) {
    body .step1 {
      padding-top: 36rem; } }
  @media only screen and (min-width: 900px) and (orientation: landscape) {
    body .step1 {
      padding: 13rem 2rem 0 0; } }
  @media (min-width: 1200px) {
    body .step1 {
      padding-top: 13rem; } }
  @media only screen and (max-width: 900px) and (orientation: landscape) {
    body .step1.visible {
      padding-top: 6rem;
      margin-right: 4rem; } }
  body .step-girl img {
    margin: 0; }
  body .step-title {
    text-align: left; }
    @media (max-width: 599px) {
      body .step-title {
        margin: 0;
        font-size: large;
        text-align: center; } }
    @media only screen and (max-width: 900px) and (orientation: landscape) {
      body .step-title {
        margin: 3rem 0 2rem 0;
        font-size: 17px; } }
    @media only screen and (min-width: 600px) and (min-height: 1024px) {
      body .step-title {
        text-align: center; } }
    @media (min-width: 1200px) {
      body .step-title {
        font-size: 30px; } }
  body .step-left {
    max-width: 60%;
    margin: auto; }
    @media (max-width: 599px) {
      body .step-left {
        max-width: 100%; } }
    @media only screen and (max-width: 900px) and (orientation: landscape) {
      body .step-left {
        padding: 3rem 4rem 0 0;
        margin: auto;
        padding: 0 2rem; } }
    @media only screen and (min-width: 600px) and (min-height: 1024px) {
      body .step-left {
        max-width: 100%; } }
    @media only screen and (min-width: 900px) and (orientation: landscape) {
      body .step-left {
        padding: 0 2rem 0 0;
        max-width: 68%; } }
    @media (min-width: 1200px) {
      body .step-left {
        width: 100%;
        padding: 10rem; } }
  body .step-paginated {
    margin: 6rem 0 auto 0; }
  body .step-right {
    width: 100%;
    border-left: 1px solid pink; }
    @media (max-width: 599px) {
      body .step-right {
        border-radius: 8px;
        border-right: 1px solid pink;
        padding: 0 1rem; } }
    @media only screen and (max-width: 900px) and (orientation: landscape) {
      body .step-right {
        display: flex;
        flex-direction: column;
        border-radius: 63px;
        padding: 0 4rem;
        justify-content: center; } }
    @media only screen and (min-width: 600px) and (min-height: 1024px) {
      body .step-right {
        border-radius: 8px;
        border-right: 1px solid pink;
        margin: 5rem 0 2rem 0; } }
    @media only screen and (min-width: 900px) and (orientation: landscape) {
      body .step-right {
        display: flex;
        flex-direction: column;
        border-radius: 63px;
        padding: 0 4rem;
        justify-content: center;
        width: auto; } }
    @media (min-width: 1200px) {
      body .step-right {
        width: 40%; } }
  body .step-simple {
    padding-top: 15rem; }
  @media only screen and (max-width: 900px) and (orientation: landscape) {
    body .step-text {
      font-size: medium;
      margin: 2rem auto; } }
  @media only screen and (min-width: 900px) and (orientation: landscape) {
    body .step-text {
      margin: 2rem auto;
      font-size: 18px; } }
  @media (min-width: 1200px) {
    body .step-text {
      font-size: 20px;
      margin: 6rem auto; } }
  @media only screen and (max-width: 900px) and (orientation: landscape) {
    body .step-text-final {
      font-size: small; } }
  body .step-text-with-title {
    margin: 10px 0; }
    @media (max-width: 599px) {
      body .step-text-with-title {
        margin: 3rem 0; } }
    @media only screen and (min-width: 600px) and (min-height: 1024px) {
      body .step-text-with-title {
        margin: 3.5rem auto 2rem; } }
  body .slogan {
    margin-bottom: 3rem; }
    @media (max-width: 599px) {
      body .slogan {
        margin-bottom: 5rem; } }
    @media only screen and (max-width: 900px) and (orientation: landscape) {
      body .slogan {
        font-size: larger; } }
    @media (min-width: 768px) {
      body .slogan {
        margin-bottom: 7rem; } }
    @media only screen and (min-width: 900px) and (orientation: landscape) {
      body .slogan {
        margin-bottom: 3rem; } }
    @media (min-width: 1200px) {
      body .slogan {
        margin-bottom: 7rem; } }
  body #wrapper {
    display: flex; }

.step-text, .option-title {
  margin-bottom: 30px; }
  @media (max-width: 599px) {
    .step-text, .option-title {
      text-align: center; } }
  @media only screen and (max-width: 900px) and (orientation: landscape) {
    .step-text, .option-title {
      margin-bottom: 9px;
      font-size: medium;
      text-align: left; } }
  @media only screen and (min-width: 900px) and (orientation: landscape) {
    .step-text, .option-title {
      font-size: 18px; } }
  @media (min-width: 1200px) {
    .step-text, .option-title {
      font-size: 30px; } }

.error-message {
  color: #ff8ea2; }

.pagination-item {
  background-color: #2B3B6A; }