/* CSS Document */
.ecards {
  min-height: calc(100vh - var(--navbar-height));
  height: auto; }
  .ecards h1 {
    font-size: clamp(60px, 18vw, 180px); }
  .ecards .topbar {
    background-color: var(--color-grub); }
    .ecards .topbar .step {
      border: 2px solid #000;
      border-radius: 64px;
      width: auto;
      height: 64px;
      margin-right: 2em;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #000;
      line-height: 0;
      transition: all ease .3s .5s;
      padding: 0 1em;
      font-size: 20px;
      font-family: 'acumin-pro-wide', acumin-pro-wide, sans-serif;
      font-weight: 600; }
      .ecards .topbar .step.active {
        background: #000;
        color: #fff; }
      .ecards .topbar .step.ready {
        cursor: pointer; }
      @media (max-width: 768px) {
        .ecards .topbar .step {
          height: 38px;
          font-size: 13px; } }
  .ecards form .error {
    color: red;
    display: none; }
    .ecards form .error.active {
      display: block; }
  .ecards .heading {
    position: relative; }
    .ecards .heading .heartside {
      position: relative; }
      .ecards .heading .heartside img {
        position: relative;
        margin-left: -50%;
        max-width: 200px; }
      @media (max-width: 992px) {
        .ecards .heading .heartside {
          position: absolute;
          width: 100%;
          bottom: 0;
          text-align: right; }
          .ecards .heading .heartside img {
            right: 0;
            margin-left: 0;
            max-width: 25vw; } }
  .ecards .ecard-input-group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    border-radius: 0.3em;
    margin-bottom: 1em; }
    .ecards .ecard-input-group .form-input {
      display: flex;
      flex-grow: 1;
      order: 2;
      min-height: 3.5em;
      padding: 1em;
      border-radius: 4px;
      transition: all ease .2s;
      will-change: box-shadow;
      font-family: 'acumin-pro-wide', acumin-pro-wide, sans-serif;
      font-size: 1em; }
      .ecards .ecard-input-group .form-input:focus, .ecards .ecard-input-group .form-input:active, .ecards .ecard-input-group .form-input:focus-visible, .ecards .ecard-input-group .form-input:focus-within {
        border-color: var(--color-orange) !important;
        box-shadow: inset 0 0 2px var(--color-orange);
        outline: none; }
  .ecards .ecard-button {
    background: none;
    outline: none;
    border: none;
    color: #000;
    font-size: 30px;
    font-family: 'acumin-pro-wide', acumin-pro-wide, sans-serif;
    font-weight: 600;
    display: flex;
    align-items: center; }
    @media (max-width: 768px) {
      .ecards .ecard-button {
        font-size: 20px;
        line-height: 12px;
        flex-direction: column; } }
    .ecards .ecard-button .arrow {
      position: relative;
      overflow: hidden;
      width: 2em;
      transform: translateX(10%);
      transition: all ease-in .2s;
      height: 100%;
      right: 0;
      top: 2px;
      margin-left: 1em;
      display: inline-block; }
      @media (max-width: 768px) {
        .ecards .ecard-button .arrow {
          margin-left: .5em;
          width: 1.5em;
          max-height: 1.5em;
          order: 2;
          top: 10px;
          width: 100%;
          left: -8px;
          height: 1.2em; } }
      .ecards .ecard-button .arrow svg {
        object-fit: cover;
        height: 100%;
        right: 0;
        position: absolute; }
        .ecards .ecard-button .arrow svg .st1 {
          fill: none;
          stroke: #000;
          stroke-linecap: round;
          stroke-width: 2px; }
    .ecards .ecard-button.ecard-prev .arrow {
      transform: scaleX(-1);
      margin-left: 0;
      margin-right: .5em; }
      @media (max-width: 768px) {
        .ecards .ecard-button.ecard-prev .arrow {
          left: 2px; } }
    .ecards .ecard-button:hover {
      cursor: pointer; }
      .ecards .ecard-button:hover .arrow {
        transform: translateX(20%); }
      .ecards .ecard-button:hover.ecard-prev .arrow {
        transform: scaleX(-1) translateX(20%); }
    .ecards .ecard-button.ecard-donate {
      color: #000;
      background: var(--color-orange);
      padding: 10px 20px;
      border-radius: 5px;
      font-family: 'acumin-pro-wide';
      font-weight: bold;
      text-decoration: none;
      font-size: 20px; }
      @media (max-width: 768px) {
        .ecards .ecard-button.ecard-donate {
          padding: 15px; } }
      .ecards .ecard-button.ecard-donate:hover, .ecards .ecard-button.ecard-donate:focus {
        background: #000;
        color: #fff; }
  .ecards .buttons {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse; }
  .ecards .ecards-wrapper {
    position: relative;
    min-height: 100%; }
    .ecards .ecards-wrapper .ecards-panel {
      top: 0;
      position: absolute;
      z-index: -1;
      opacity: 0;
      transform: translateX(-100%);
      pointer-events: none;
      transition: all ease .7s .1s; }
      .ecards .ecards-wrapper .ecards-panel.active {
        position: relative;
        pointer-events: all;
        z-index: 3;
        opacity: 1;
        transform: translateX(0%); }
        .ecards .ecards-wrapper .ecards-panel.active + .ecards-panel {
          transform: translateX(90%);
          opacity: 0; }
    .ecards .ecards-wrapper .errorsNotice {
      display: none; }
      .ecards .ecards-wrapper .errorsNotice.active {
        display: block; }
      .ecards .ecards-wrapper .errorsNotice .errorsListingWrapper {
        border: 2px solid red;
        border-radius: 5px;
        padding: calc(var(--cubit) / 2);
        margin: var(--cubit) 0 0 0; }
        .ecards .ecards-wrapper .errorsNotice .errorsListingWrapper ul {
          margin-bottom: 0; }
          .ecards .ecards-wrapper .errorsNotice .errorsListingWrapper ul li {
            margin-bottom: 1em; }
            .ecards .ecards-wrapper .errorsNotice .errorsListingWrapper ul li:last-child {
              margin-bottom: 0; }
            .ecards .ecards-wrapper .errorsNotice .errorsListingWrapper ul li .title {
              font-weight: bold;
              margin-right: 1em; }
    .ecards .ecards-wrapper .styles input[type="radio"] {
      position: absolute;
      visibility: hidden; }
    .ecards .ecards-wrapper .styles label {
      opacity: .9;
      transition: all ease .3s; }
      .ecards .ecards-wrapper .styles label:hover {
        cursor: pointer; }
    .ecards .ecards-wrapper .styles span {
      display: none; }
    .ecards .ecards-wrapper .styles img {
      width: 100%;
      height: auto;
      display: block; }
    .ecards .ecards-wrapper .styles input[type="radio"]:checked + label {
      box-shadow: 0 0 0 5px orange;
      opacity: 1; }
  .ecards .review h4 {
    color: var(--color-orange); }
    .ecards .review h4 #review_theiremail {
      font-weight: normal;
      color: #000; }
  .ecards .showDonationAmountWrapper {
    max-width: 800px;
    margin: auto;
    position: relative;
    margin-top: -10px;
    margin-bottom: 5px; }
    .ecards .showDonationAmountWrapper input[type=checkbox] {
      visibility: hidden; }
    .ecards .showDonationAmountWrapper input[type=checkbox] + label {
      padding-left: .3em; }
      .ecards .showDonationAmountWrapper input[type=checkbox] + label:hover {
        cursor: pointer; }
      .ecards .showDonationAmountWrapper input[type=checkbox] + label:before {
        content: '';
        display: block;
        position: absolute;
        top: 3px;
        left: 0;
        width: 1.1em;
        height: 1.1em;
        background: transparent;
        border: 2px solid #000;
        border-radius: 3px;
        background: var(--color-grub-light);
        box-shadow: inset 0 0 0 2px var(--color-grub-light); }
    .ecards .showDonationAmountWrapper input[type=checkbox]:checked + label:before {
      background: #000; }
  .ecards .review-wrapper {
    max-width: 800px;
    margin: auto;
    background: #1f1f1f;
    color: #fff; }
    .ecards .review-wrapper .inner {
      max-width: 600px;
      margin: auto; }
    .ecards .review-wrapper .donation {
      background: #85BBC5;
      color: #000;
      max-width: 600px;
      margin: auto;
      margin-bottom: 40px; }
      .ecards .review-wrapper .donation .h2 {
        color: #000;
        font-family: arial,sans-serif !important;
        font-size: clamp(30px, 13vw, 90px); }
    .ecards .review-wrapper .hearts {
      max-width: 600px;
      margin: auto; }
    .ecards .review-wrapper.floveyou {
      background: #1f1f1f;
      color: #fff; }
      .ecards .review-wrapper.floveyou .img-floveyou {
        display: block; }
      .ecards .review-wrapper.floveyou .donation {
        background: #85BBC5; }
    .ecards .review-wrapper.youarenumber1 {
      background: #85BBC5;
      color: #000; }
      .ecards .review-wrapper.youarenumber1 .img-youarenumber1 {
        display: block; }
      .ecards .review-wrapper.youarenumber1 .donation {
        background: #FCF8EE; }
    .ecards .review-wrapper.myworld {
      background: #EFE0C4;
      color: #000; }
      .ecards .review-wrapper.myworld .img-myworld {
        display: block; }
      .ecards .review-wrapper.myworld .donation {
        background: #FE7438; }
    .ecards .review-wrapper.happyday {
      background: #F6DCDD;
      color: #000; }
      .ecards .review-wrapper.happyday .img-happyday {
        display: block; }
      .ecards .review-wrapper.happyday .donation {
        background: #F9A8AF; }