:root {
      --purple: #4b2a4f;
      --purple-dark: #3c203f;
      --cream: #fff7ec;
      --card: #ffffff;
      --text: #2b2b2b;
      --muted: #6b6b6b;
  }

  * {
      box-sizing: border-box;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  ul {
      margin: 0px;
      padding: 0px;
  }

  body {
      margin: 0;
      font-family: 'Inter', sans-serif;
      color: var(--text);

  }

  @font-face {
      font-family: 'ProximaNovaRegular';
      src: url('../fonts/ProximaNovaRegular.ttf') format('truetype');
      font-weight: 400;
  }

  @font-face {
      font-family: 'ProximaNova bold';
      src: url('../fonts/ProximaNova Extrabold.ttf') format('truetype');
      font-weight: 900;
  }

  @font-face {
      font-family: 'ProximaNova Semibold';
      src: url('../fonts/ProximaNova Semibold.ttf') format('truetype');
      font-weight: 900;
  }

.required-message {
  margin-top: 20px;
  color: red;
}

  /* HEADER / HERO */
  .banner-img img {
      display: flex;
  }

  .banner-img img {
      width: 100%;
  }

  .banner-img .mobile-banner {
      display: none;
  }

  /* MAIN WRAPPER */
  .container-box {
      /* max-width: 990px; */
      max-width: 1200px;
      margin: 0 auto;
  }
  .kvitel-row-inner.kvitel-flex{
    margin: 0 100px;
  }

  .kvitel-story-area {
      background: #FFF8EC;
      padding-bottom: 50px;
  }

  /* KVITEL CARDS */
  .kvitel-row {
      padding: 50px 15px 80px;
      background: #4B2B49;
  }

  .kvitel-row-inner {
      display: flex;
      align-items: center;
      gap: 40px;
      flex-direction: column;
      justify-content: space-between;
  }

  .kvitel-row-inner.kvitel-flex {
      display: flex;
      flex-direction: row;
  }

  .kvitel-item {
      padding: 15px 50px 15px 15px;
      display: flex;
      align-items: center;
      gap: 10px;
      border-radius: 100px;
      background: #FFF8EC;
  }

  .kvitel-image {
      border-radius: 85px;
      border: 2px solid #4B2B49;
      background: #FFF;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      max-width: 85px;
      aspect-ratio: 1;
  }

  .kvitel-content {
      display: flex;
      flex-direction: column;
      gap: 3px;
      padding-left: 10px;
  }

  .kvitel-content span {
      color: #4B2B49;
      font-family: 'ProximaNovaRegular';
      font-size: 16px;
      font-weight: 400;
      line-height: 20px;
  }

  .kvitel-content strong {
      color: #4B2B49;
      font-family: "ProximaNova bold";
      font-size: 25px;
      font-weight: 900;
      line-height: 30px;
  }

  /* STORY CARD */
  .story-wrapper {
      padding: 0px 15px;
  }

  .story-inner-area {
      background: #fff;
      border-radius: 20px;
      padding: 30px;
      box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.15);
      margin-top: -50px;
  }

  .story-inner-area p {
      color: #000;
      font-family: 'ProximaNovaRegular';
      font-size: 15px;
      font-weight: 400;
      line-height: 20px;
      margin: 0px;
  }

  .story-inner-area p:not(:first-child) {
      margin-bottom: 20px;
  }

  /* Monthly Form */
  .monthly-form-wrap {
      background: #fff;
      padding: 50px 15px;
  }

  /* COMMITMENT */
  .form-wrap-head {
      margin-bottom: 25px;
  }

  .form-wrap-head h2 {
      margin-bottom: 5px;
      color: #000;
      font-family: 'ProximaNova bold';
      font-size: 30px;
      font-style: normal;
      font-weight: 900;
      line-height: 38px;
  }

  .form-wrap-head p {
      color: #000;
      font-family: 'ProximaNovaRegular';
      font-size: 20px;
      font-style: normal;
      font-weight: 400;
      line-height: 22px;
  }

  .amounts-area {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 12px;
      margin-bottom: 25px;
      max-width: 900px;
  }

  .amount-label {
      padding: 18px 20px;
      text-align: center;
      cursor: pointer;
      border-radius: 10px;
      background: #fff;
      color: #000;
      font-family: 'ProximaNovaRegular';
      font-size: 30px;
      font-weight: 400;
      line-height: 38px;
      border: initial;
      outline: initial;
      border: 1px solid #D8D8D8;
  }

  .other-amount {
      display: flex;
      align-items: center;
      gap: 3px;
  }

  .custom-field {
      display: flex;
  }

  .other-amount span,
  .amount-label.active .other-amount span {
      color: #FFF;
      font-family: 'ProximaNova bold';
      font-size: 30px;
      font-style: normal;
      font-weight: 900;
      line-height: normal;
  }

  .amount-label.active {
      background: var(--purple);
      color: #fff;
      padding: 6px 20px;
  }

  .amount-label.active span {
      font-size: 12px;
      font-family: 'ProximaNovaRegular';
      line-height: normal;
  }

  .amounts-area [type="radio"] {
      visibility: hidden;
      position: absolute;
  }

  .amounts-area [type="radio"]:checked + .amount-label {
      background: var(--purple);
      color: #fff;
      font-family: 'ProximaNova bold';
  }

  .amounts-area label.amount-label {
      display: flex;
      width: 100%;
      flex-direction: column;
      justify-content: center;
  }

  .amount-label-input {
      height: 100%;
      color: #fff;
      font-family: 'ProximaNova bold';
      font-size: 30px;
      font-weight: 400;
      line-height: normal;
      background: transparent;
      border: initial;
      outline: initial;
      width: 100%;
  }

  .charge-info p {
      display: flex;
      align-items: center;
      gap: 15px;
      font-size: 16px;
  }

  .charge-info {
      color: #000;
      font-family: 'ProximaNovaRegular';
      font-size: 20px;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
  }

  .charge-info strong {
      font-family: 'ProximaNova bold';
      font-size: 30px;
      font-weight: 900;
      line-height: normal;
  }

  .charge-info .charge-info-date {
      border-radius: 5px;
      background: #FFF8EC;
      padding: 5px 15px;
      color: #000;
      text-align: center;
      font-family: 'ProximaNova Semibold';
      font-size: 18px;
      font-weight: 700;
      line-height: normal;
  }

  .payment-area {
      margin-top: 0;
  }

  .pay-methods {
      display: flex;
      gap: 10px;
      margin-bottom: 24px;
      margin-top: 15px;
  }

  .pay-box {
      position: relative;
      flex: 1;
      padding: 14px 20px;
      text-align: center;
      cursor: pointer;
      border-radius: 10px;
      background: #fff;
      color: #000;
      font-family: 'ProximaNovaRegular';
      font-size: 24px;
      font-weight: 400;
      line-height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      white-space: nowrap;
      border: 1px solid #D8D8D8;
  }

  .pay-box:before {
      content: '\f00c';
      color: #000;
      font-family: 'FontAwesome';
      line-height: normal;
      border: 1.8px solid #000000;
      border-radius: 50%;
      width: 20px;
      aspect-ratio: 1/1;
      display: inline-flex;
      font-size: 0;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
      box-sizing: border-box;
  }

  .pay-box.active:before {
      border-color: #fff;
      font-size: 14px;
      color: #4B2B49;
      background: #fff;
  }

  .pay-box.active {
      background: var(--purple);
      color: #fff;
      font-family: 'ProximaNova bold';
  }

  .card-items {
      display: flex;
      align-items: stretch;
      gap: 10px;
      flex-wrap: wrap;
      width: 100%;
      position: relative;
  }

  .card-group {
      display: flex;
      gap: 10px;
      width: calc(50% - 5px);
      flex: 1;
  }

  .select-btn {
      position: relative;
      padding: 12px 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 5px;
      border: 1px solid #D8D8D8;
      background: #fff;
      color: #000;
      font-size: 18px;
      font-weight: 900;
      line-height: normal;
      height: 50px;
      max-width: 52px;
      z-index: 2;
  }

  .select-btn i {
      display: flex;
      align-items: center;
      line-height: 14px;
  }

  .card-item-small.active .select-btn {
      border-bottom: initial;
      border-radius: 5px 5px 0 0;
  }

  .droupdown-block {
      border-radius: 5px 0 5px 5px;
      border: 1px solid #D8D8D8;
      background: #FFF;
      position: absolute;
      top: calc(100% - 1px);
      list-style: none;
      right: 0;
      padding: 15px 20px;
      width: 100%;
      z-index: 1;
  }

  .droupdown-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      cursor: pointer;
  }

  .droupdown-item:not(:first-child) {
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid #D8D8D8;
  }

  .droupdown-item p {
      color: #787483;
      font-family: 'ProximaNova Semibold';
      font-size: 22px;
      font-style: normal;
      font-weight: 700;
      line-height: normal;
  }

  .card-item,
  .card-item-small {
      display: flex;
      flex-direction: column;
      gap: 3px;
  }

  .card-item {
      width: calc(50% - 5px);
      flex: 1;
  }

  .card-item label,
  .card-item-small label {
      color: #9E9E9E;
      font-family: 'ProximaNovaRegular';
      font-size: 12px;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
  }

  .card-item input,
  .card-item-small input {
      background: #fff;
      border-radius: 5px;
      border: 1px solid #D8D8D8;
      padding: 15px 20px;
      color: #787483;
      font-family: 'ProximaNova Semibold';
      font-size: 20px !important;
      font-style: normal;
      font-weight: 700;
      line-height: normal;
      height: 50px;
  }

  .submit-area {
      margin-top: 100px;
      text-align: center;
      width: 100%;
  }

  .submit-area button {
      padding: 30px 50px;
      cursor: pointer;
      border-radius: 20px;
      background: #4B2B49;
      box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15);
      border: initial;
      outline: initial;
      color: #FFF;
      font-family: 'ProximaNova bold';
      font-size: 30px;
      font-weight: 900;
      line-height: 38px;
  }

  .card-item input.error,
  .card-item-small input.error {
      border-color: #ff0000 !important;
  }
  .notification .error {
    color: #ff0000;
  }

  .donate-form label.error {
      display: none !important;
  }

  .kvitel-image img {
      width: 100%;
  }

  .sticky-donate-wrapper, .sticky-faq-wrapper  {
      position: relative;
      border-top: 1px solid #777483;
      position: sticky;
      bottom: 0;
      width: 100%;
  }


  .donate-buttons-wrapper {
      color: #fff;
      margin: 50px 0 0 0;
      padding-top: 50px;
      border-top: 2px solid #fff;
      display: flex;
      justify-content: space-between;
      grid-column-gap: 40px;
      grid-row-gap: 20px;
  }
  .container-box .donate-buttons-wrapper:first-child {
      margin-top: 0;
      border-top: initial;
      padding-top: 30px;
  }

  .donate-buttons-wrapper .list {
      width: 100%;
  }

  .donate-buttons-wrapper .list a {
      background: #fff;
      padding: 30px;
      border-radius: 10px;
      width: 100%;
      display: block;
      display: flex;
      justify-content: space-between;
      color: #4B2B49;
      text-decoration: none;
      font-size: 20px;
      font-weight: 600;
  }

  .donate-buttons-wrapper .list a i {
      font-size: 30px;
      line-height: 24px;
      display: flex;
  }

  .donate-buttons-wrapper .list a:hover {
      background: #FFF8EC;
  }

  .sticky-donate-wrapper, .sticky-faq-wrapper  {
      background: #FFF8EC;
      padding: 30px;
      box-shadow: -5px 0 10px rgba(0, 0, 0, .2);
      /* padding-bottom: 0; */
  }

  .step-section {
      display: flex;
      grid-column-gap: 25px;
      padding-bottom: 30px;
  }

  .step-section .step .number {
      width: 37px;
      height: 37px;
      line-height: 37px;
      font-size: 16px;
      font-family: 'ProximaNova bold';
      background: #B29EB2;
      border-radius: 100%;
      color: #fff;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
  }

  .step-section .step {
      display: flex;
      align-items: center;
      grid-column-gap: 15px;
  }

  .step-section .step .label-text {
      color: #B29EB2;
      font-family: 'ProximaNova bold';
  }

  .step-section .step.active .label-text {
      color: #000000;
  }

  .step-section .step.active .number {
      background: #4B2B49;
  }

  .step-section .step.disabled .number {
      background: #777483;
  }

  .step-section .step.disabled .label-text {
      color: #777483;
      font-family: 'ProximaNovaRegular';
  }


  .toggle-button, .toggle-button-faq {
      position: absolute;
      top: -30px;
      right: 20px;
  }

  .toggle-button a, .toggle-button-faq a {
      width: 121px;
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #FFF8EC;
      border: 1px solid #777483;
      border-radius: 30px;
      padding: 20px 20px;
      text-decoration: none;
      font-size: 15px;
      color: #777483;
      font-family: 'ProximaNova bold';
  }

  .toggle-button a i, .toggle-button-faq a i {
      font-size: 20px;
  }

  .toggle-button.open i, .toggle-button-faq.open i {
      transform: rotate(180deg);
  }


  a.faq-btn {
      display: inline-flex;
      justify-content: space-between;
      align-items: center;
      background: #777483;
      border: 1px solid #777483;
      border-radius: 60px;
      padding: 16px 20px;
      text-decoration: none;
      font-size: 15px;
      color: #fff;
      font-family: 'ProximaNova Semibold';
      grid-column-gap: 16px;
      margin: 0;
  }

  a.faq-btn i {
      font-size: 30px;
  }

  .video-button-section {
      display: flex;
      justify-content: center;
      margin-top: 20px;
  }


  .fullwidth-banner {
      background: #673246;
      background-size: cover;
      width: 100%;
      text-align: center;
      justify-content: center;
  }

  .fullwidth-banner img {
      max-width: 100%;
      display: flex;
  }

  .fullwidth-banner .desk-banner {
      display: flex;
      justify-content: center;
  }

.fullwidth-banner .mob-banner{
    display: none;
}

  .button-section-form {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      padding-bottom: 30px; padding-top: 20px;
  }

  .button-section-form a, .button-section-form .submit-btn {
      display: inline-flex;
      justify-content: space-between;
      align-items: center;
      background: #777483;
      border: 1px solid #777483;
      border-radius: 30px;
      padding: 10px 20px;
      text-decoration: none;
      font-size: 15px;
      color: #fff;
      font-family: 'ProximaNova bold';
      grid-column-gap: 20px;
      margin: 0;
      cursor:pointer;
  }

  .button-section-form a i, .button-section-form .submit-btn i {
      font-size: 26px;
      display: flex;
      line-height: 26px;
  }

  .commitment .commitment-panel {
      display: flex;
      justify-content: space-between;
  }



  .payment-area {
      display: flex;
      grid-column-gap: 20px;
  }

  .payment-area .payment-list-group {
      display: flex;
      grid-column-gap: 20px;
  }

  .container-wrapper {
      max-width: 1300px;
      margin: 0 auto;
  }


  .billing-info-text {
      font-size: 12px;
      font-family: 'ProximaNova';
      margin: 10px 0 15px;
      display: flex;
      align-items: center;
      grid-column-gap: 10px;
  }

  .billing-info-text span {
      color: #9E9E9E;
      display: inline-block;
      font-family: 'ProximaNovaRegular';
  }

  .billing-info-text b {
      font-weight: normal;
      font-family: 'ProximaNova bold';
      display: inline-block;
  }

  .btn-small {
      display: inline-block;
      align-items: center;
      background: #777483;
      border: 1px solid #777483;
      border-radius: 5px;
      padding: 10px 20px;
      text-decoration: none;
      font-size: 13px;
      color: #fff;
      font-family: 'ProximaNova bold';


  }

.btn-small:hover{
    background: #000;
}



  .thank-you-section {
      padding: 30px;
      background: #fff;
      max-width: 530px;
      margin: 0 auto;
      border-radius: 20px;
      margin-bottom: 30px;
  }

  .thank-you-section .column-section {
      display: flex;
      align-items: flex-start;
      grid-column-gap: 30px;
  }

  .thank-you-section .text-section h3 {
      font-size: 28px
  }

  .thank-you-section .text-section p {
      font-size: 17px;
      font-weight: 300;
  }

  .thank-you-section .total-section {
      display: inline-block;
      align-items: center;
      background: #4B2B49;
      border: 1px solid #777483;
      border-radius: 5px;
      padding: 13px 40px;
      text-decoration: none;
      font-size: 40px;
      color: #F9D57F;
      font-family: 'ProximaNova bold';
  }

  .form-controls {
      border: 1px solid #D8D8D8;
      padding: 12px 16px;
      outline: none;
      box-shadow: none;
      border-radius: 5px;
      width: 100%;
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      font-size: 14px !important;
      font-family: "proximanovaregular";
  }

  .billing-info-section {
      display: block;
      padding-bottom: 30px;
      margin-top: -40px;
  }

  .billing-info-section .billing-form-panel {
      display: flex;
      flex-wrap: wrap;
      grid-row-gap: 15px;
  }

  .billing-info-section label {
      font-size: 12px;
      color: #9E9E9E;
      font-weight: 300;
      padding: 0 0 6px 0;
      display: block;
  }

  .billing-info-section .form-control {
      display: flex;
      grid-column-gap: 20px;
  }

  .billing-info-section .form-group {
      width: 100%;
  }

  .billing-info-section .form-controls {
      font-size: 20px !important;
      font-family: 'ProximaNova bold';
      color: #787483;
  }

  



.billing-info-section .form-two-col {
      display: flex; grid-column-gap: 20px; width:100%;
    
  }

  .all-steps-wrapper {
      position: relative;
      display: none;
  }

  .all-steps-wrapper .buttons {
      position: absolute;
      top: 0;
      right: 0;
  }

  .commitment,
  .payment-area {
      padding-right: 200px;
  }

  .button-section-form a.next-btn,
  .button-section-form a.submit-btn, .button-section-form button.submit-btn {
      margin-top: 18px;
  }


  .video-player-panel {
      background: #FFF8EC;
      margin: 0 auto;
      width: 100%;
  }

  .video-player-panel .video-title {
      font-family: 'ProximaNova bold';
      color: #000;
  }

  .video-player-panel .container-content {
      padding: 70px 20px;
      max-width: 736px;
      margin: 0 auto;
  }

  .videowrapper {
      float: none;
      clear: both;
      width: 100%;
      position: relative;
      padding-bottom: 56.25%;
      padding-top: 25px;
      height: 0;
  }

  .videowrapper iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
  }
  .video-placeholder {
      width: 100%;
      height: 0;
      padding-bottom: 56.25%;
      position: relative;
  }
  .video-placeholder img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
  }
 .hide {
      display: none;
  }

.faq-section{padding-bottom: 40px;}
.faq-section .heading-text{display: flex; align-items: center; grid-column-gap: 10px; }
.faq-section .heading-text span{
    width:37px; height: 37px; border-radius: 100%; background: #4B2B49; display: flex; justify-content: center; align-items: center;
}


.textarea{
    width:100%; min-height: 100px; height: calc(100% - 21px);
}

.faq-section .heading-text b{  font-size:14px;  font-family: 'ProximaNova bold';}

.faq-section .flex-panel{display: flex; grid-column-gap: 40px; margin-top: 15px;}

.faq-section label{font-size:12px;}
.faq-section .form-control {
  width:100%;
    
}

.faq-section .form-group {
  width: 100%;
}

.faq-section label {
  font-size: 12px;
  color: #9E9E9E;
  font-weight: 300;
  padding: 0 0 6px 0;
  display: block;
}

.faq-section .form-controls {
  font-size: 20px !important;
  font-family: 'ProximaNova bold';
  color: #787483;
}


.faq-section .column{display: flex; flex-wrap:wrap; grid-row-gap: 15px; width:100%;}


.faq-section .column.self-align{align-self: center; justify-content: flex-end;}

.faq-section .button-column{min-width: 120px; width:auto;}


.btn-default  {
      display: inline-flex;
      justify-content: space-between;
    align-items: center;
      align-items: center;
      background: #777483;
      border: 1px solid #777483;
      border-radius: 30px;
      padding: 10px 20px;
      text-decoration: none;
      font-size: 15px;
      color: #fff;
      font-family: 'ProximaNova bold';
      grid-column-gap: 20px;
      margin: 0;
  }

  .btn-default  i {
      font-size: 26px;
      display: flex;
      line-height: 26px;
  }


.btn-sm  {
      display: inline-flex;
      justify-content: space-between;
    align-items: center;
      align-items: center;
      background: #777483;
      border: 1px solid #777483;
      border-radius: 30px;
      padding: 10px 30px;
      text-decoration: none;
      font-size: 15px;
    line-height: 16px;
      color: #fff;
       font-family: 'ProximaNovaRegular';
      grid-column-gap: 12px;
      margin: 0;
    cursor: pointer;
  }

  .btn-sm  i {
      font-size: 14px;
      display: flex;
      line-height: 20px;
  }

.btn-sm-light{
    background: rgba(118, 116, 131, .34);
    border-color:#fff;
} 


.btn-sm:hover{
    background: #000;
}

.btn-sm-light:hover{
    background: #777483;
}


.backgroundOverlay {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  background: rgba(0,0,0,.5);
  z-index: 99999;
}
.backgroundOverlay, .delayedPopup {
  position: fixed;
  width: 100%;
  display: block;
}


.popup-form  .heading-text b{  font-size:14px;  font-family: 'ProximaNova bold';}

.popup-form  .flex-panel{margin-top: 15px; display: flex; flex-wrap: wrap; grid-row-gap: 20px;}

.popup-form  label{font-size:12px;}
.popup-form  .form-control {
  width:100%;
    
}

.popup-form  .form-group {
  width: 100%;
}

.popup-form  label {
  font-size: 12px;
  color: #9E9E9E;
  font-weight: 300;
  padding: 0 0 6px 0;
  display: block;
    text-align: left;
}

.popup-form  .form-controls {
  font-size: 20px !important;
  font-family: 'ProximaNova bold';
  color: #787483;
}

.popup-form .heading-text {
  display: flex;
  align-items: center;
  grid-column-gap: 10px;
}

.popup-form .column {
  display: flex;
  grid-row-gap: 15px;
  width: 100%;
    grid-column-gap: 30px;
}


 .closeBtnPopup{position:absolute;right:-15px;top:-15px;z-index:2; border:2px solid #777483; background: #FFF8EC; border-radius: 100%; width:40px;  height: 40px; display: flex; justify-content: center; align-items: center; cursor: pointer;}
    .delayedPopup{max-width:950px; min-width:950px; top:50%;left:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);z-index:999999; position: absolute; }
    .backgroundOverlay{top:0;right:0;bottom:0;left:0;height:100%;margin:0;padding:0;background:rgba(0,0,0,.5);z-index:99999} 
        
        .popup-content{
            background: #FFF8EC; padding: 50px; border-radius: 10px;
        }
        
        .popup-content .heading-text{padding-bottom: 10px;}
        
        .popup-content .button-column{
            text-align: center; margin: 30px 0 0;
        }

.faq-section .column{display: flex; flex-wrap:wrap; grid-row-gap: 15px; width:100%;}


.faq-section .column.self-align{align-self: center; justify-content: flex-end;}

.faq-section .button-column{min-width: 120px; width:auto;}


.checkbox-section-panel{
    margin-top:20px;
}


.checkbox-normal input[type="checkbox"] {
  opacity: 0;
  visibility: hidden;
  width: 0px;
  height: 0;
  position: absolute;
}
 
.checkbox-normal label {
  
    margin: 0;
    display: flex !important;
  font-family: 'Inter', sans-serif;
    padding-left: 34px;
    padding-top: 4px;
    border-radius: 5px;
    display: inline-block;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    color: #012B30;
    padding-right: 20px;

    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    font-weight: 400;
    line-height: 16px;

}


.checkbox-normal label span:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    background: #012B30;
    border-radius: 3px;
    border: 0;
    background: none;
    border: 2px solid #4B2B49;
}

.checkbox-normal label b {
    font-weight: normal;
}


.checkbox-normal input[type="checkbox"]:checked ~ label span::before{
    background: #4B2B49;
}

.checkbox-normal input[type="checkbox"]:checked ~ label span:after {
    content: url(../images/check-icon-checkbox-white-fn.svg);
    left: 5px;
    top: 5px;
    position: absolute!important;
}

.thank-you-panel{
    text-align: center; max-width: 600px; padding: 0 20px; margin: 20px auto;
}
.thank-you-panel h3{
    font-size:30px; margin: 10px 0 20px 0;
}

.thank-you-panel p{
    font-size:15px; margin: 0 0 15px 0;
}


.account-email-platform{
    margin: 50px auto 0 auto; max-width: 927px; border-radius: 5px; 
}

.email-top-section{
   border:1px solid #D8D8D8; padding: 10px 15px; display: flex; justify-content: space-between; grid-column-gap: 20px;
    align-items: center; border-radius: 5px;
}

.email-tabs ul{display: flex; margin: 0; padding: 0; list-style: none; grid-column-gap: 10px;}
.email-tabs ul li{position: relative;}
.email-tabs ul li label{padding: 5px 15px; border:1px solid #D8D8D8; font-size:14px; line-height: 16px; border-radius: 20px; cursor: pointer;}

.email-tabs ul li input[type="radio"]{visibility: hidden; opacity: 0; position: absolute;}

.email-tabs ul li input[type="radio"]:checked ~ label{background: #767483; border-color:#767483; color:#fff}

.email-tabs ul li input[type="radio"]:hover ~ label{border-color:#666;}

.btn-small  {
      display: inline-flex;
      justify-content: space-between;
      align-items: center;
      align-items: center;
      background: #777483;
      border: 1px solid #777483;
      border-radius: 30px;
      padding: 5px 15px;
      text-decoration: none;
      font-size: 14px;
      line-height: 16px;
      color: #fff;
      font-family: 'ProximaNovaRegular';
      margin: 0;
  }



.mail-listing ul{margin: 0; padding: 0; list-style: none; grid-column-gap: 0;}
.mail-listing ul li{position: relative;}
.mail-listing ul li label{padding: 20px 50px; border-bottom:1px solid #D8D8D8;  cursor: pointer; 
    width:100%; display: block; position: relative;}

.mail-listing ul li:last-child label{border:0;}

.mail-listing ul li input[type="radio"]{visibility: hidden; opacity: 0; position: absolute;}


.mail-listing ul li h3{font-size:16px; line-height: 20px; margin: 0 0 5px 0;}
.mail-listing ul li p{font-size:10px; line-height: 13px;}

.email-bottom-section{display: flex; justify-content: space-between; margin: 10px 0 0;}
.email-bottom-section .left-col{width:auto; min-width: 300px;
border:1px solid #D8D8D8; border-top-left-radius: 5px; border-bottom-left-radius: 5px;}
.email-bottom-section .right-col{width:100%; background: #C6BFBF; border-top-right-radius: 5px; border-bottom-right-radius: 5px;}

.message-form-section{padding: 20px;}

.message-form-section .textarea-lg{
    height: 250px; width:100%; border-radius: 10px; border: 0; padding: 15px; outline: none;
    border: 1px solid #D8D8D8;
  outline: none;
  box-shadow: none;
  border-radius: 10px;
  width: 100%;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  font-size: 14px !important;
  font-family: "proximanovaregular";
}

.message-form-section input[type="text"]{
    height: 40px;  border-radius: 30px; padding: 15px; outline: none;
}

.message-form-section .form-group{
    margin: 0 0 20px 0;
}

.mail-listing label:before {
    content: "";
    position: absolute;
    left: 20px;
    top: 30px;
    width: 16px;
    height: 16px;
    background: #012B30;
    border-radius: 100%;
    border: 0;
    background: none;
    border: 1px solid #4B2B49;
}

.mail-listing ul li input[type="radio"]:checked ~ label{background: #767483; border-color:#767483; 
    color:#fff}

.mail-listing input[type="radio"]:checked ~ label:before{
    background: #fff; border-color:#fff;
}

.mail-listing input[type="radio"]:checked ~ label:after {
    content:url(../images/circle-check-small-email.svg);
     left: 25px;
    top: 30px;
    position: absolute!important;
    line-height: 16px;
     width: 16px;
    height: 16px;
}

.mail-listing input[type="radio"]:hover ~ label:before{
    background: #009712; border-color:#009712;
}

.mail-listing input[type="radio"]:hover ~ label:after {
    content:url(../images/circle-check-small-email-white.svg);
     left: 25px;
    top: 30px;
    position: absolute!important;
     width: 16px;
    height: 16px;
     line-height: 16px;
}



.message-form-section .button-section{
    display: block; text-align: right;
}
  @media(max-width: 1100px) {
      
      .delayedPopup{max-width:950px; min-width:inherit; width:90%; top:50%;left:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);z-index:999999; position: absolute; }
      
      
      .payment-area .payment-list-group {
          flex-wrap: wrap;
      }

      .all-steps-wrapper .buttons {
          position: static;
          top: inherit;
          right: inherit;
      }

      .charge-info p {
          padding-right: 40px;
      }

      .button-section-form a.next-btn,
      .button-section-form a.submit-btn,.button-section-form button.submit-btn {
          margin-top: 0;
      }

      .billing-info-section {
          margin-top: 0;
      }

      .donate-buttons-wrapper {
          grid-column-gap: 30px;
      }


  }



  @media(max-width: 991px) {
      
      .account-email-platform {
    padding: 0 20px;
  }

      .donate-buttons-wrapper {
          flex-wrap: wrap;
      }

      .kvitel-row-inner.kvitel-flex {
          flex-wrap: wrap;
          flex-direction: column;
      }

      .amounts-area {
          overflow-x: scroll;
          margin-right: -30px;
          padding-right: 20px;
      }

      .commitment,
      .payment-area {
          padding-right: 0;
      }

      .kvitel-item {
          padding: 20px;
      }

      .payment-area .payment-list-group {
          display: block;
      }

      .amounts-area label.amount-label {
          min-width: 100px;
      }

      .donate-buttons-wrapper {
          padding-bottom: 100px;
      }

      .toggle-button a, .toggle-button-faq a {
          width: 100px;
          height: 40px;
      }

      .toggle-button, .toggle-button-faq {
          right: 15px;
      }
      
      .email-bottom-section .left-col {min-width: 250px;}
  }

  @media all and (max-width:767px) {
      .faq-section{padding-bottom: 20px;}
      .faq-section .flex-panel{
          flex-wrap:wrap; grid-row-gap: 10px;
      }
      
      .faq-section .column{flex-wrap:nowrap; grid-column-gap: 10px;}
        
      .faq-section .submit-faq{width:100%; display: flex; justify-content: center;}
      
      .faq-section .column.self-align{width:100%; text-align: center; justify-content: center;}
      
      .faq-section .form-controls{font-size:15px!important;}
      
      .textarea { height: 70px; min-height: inherit!important;}
      
      .fullwidth-banner .desk-banner {
      display: none;
      }

    .fullwidth-banner .mob-banner{
        display: block;
    }
      
      
      .popup-content{padding: 20px;}
      .popup-form .column{flex-wrap: wrap;}
      
      .checkbox-normal label span::before{
          top:4px;
      }
      
      .checkbox-normal input[type="checkbox"]:checked ~ label span::after{
          top:9px;
      }
}

  @media all and (max-width:575px) {
      .kvitel-row-inner.kvitel-flex{margin: 0;}
      .video-player-panel .container-content {
          padding: 40px 20px;
      }

      .amounts-area {
          margin-right: -15px;
      }

      .banner-img .desktop-banner {
          display: none;
      }

      .banner-img .mobile-banner {
          display: block;
      }

      .kvitel-story-area {
          padding-bottom: 25px;
      }

      .kvitel-row {
          padding: 40px 15px 40px;
      }
      
    .sticky-donate-wrapper, .sticky-faq-wrapper {
      position: sticky; 
  }

      .kvitel-row-inner {
          gap: 15px;
      }
      
       .donate-buttons-wrapper {
    padding-bottom: 0; grid-column-gap: 15px; grid-row-gap: 15px;

  }
      
      .donate-buttons-wrapper{margin-top:20px; padding-top: 20px;}
      
      .donate-buttons-wrapper .list a{padding: 20px 20px; font-size:18px;}

      /* .kvitel-item { padding: initial; border-radius: initial; background: transparent; }
    .kvitel-image { display: none; } */
      .kvitel-item {
          padding: 10px 30px 10px 10px;
      }

      .kvitel-image {
          max-width: 40px;
          height: 100%;
      }

      .kvitel-content {
          padding-left: 0px;
      }

      .kvitel-content span {
          font-size: 14px;
          line-height: normal;
          line-height: 16px;
      }

      .kvitel-content strong {
          font-size: 16px;
          line-height: normal;
          line-height: 20px;
      }

      .story-inner-area {
          margin-top: -40px;
      }

      .monthly-form-wrap {
          padding: 25px 15px;
      }

      .form-wrap-head h2 {
          font-size: 25px;
          line-height: normal;
      }

      .form-wrap-head p {
          font-size: 16px;
      }

      .pay-box {
          font-size: 18px;
      }

      .card-item input,
      .card-item-small input,
      .droupdown-item p {
          font-size: 15px !important;
      }

      .amounts-area {
          margin-bottom: 0;
      }

      .card-item input {
         padding: 12px 10px; height: 40px;
      }
      .select-btn{height: 40px;}
      .card-group{min-width: 60px; width:auto;}
      .card-item.card-number{width:60%;}
      
      
      .billing-info-section label{font-size:11px;}

      .button-section-form {
          padding-top: 10px; padding-bottom: 15px; align-items: center;
      }
      
      .billing-info-section .form-two-col {
          grid-column-gap: 10px;
      }

      .submit-area {
          margin-top: 50px;
      }

      .submit-area button {
          font-size: 25px;
          line-height: normal;
      }

      .amount-label, .other-amount span, .amount-label.active .other-amount span, .amount-label-input {
          font-size: 20px;
          line-height: normal;
      }

       .amount-label{padding: 16px 15px;}
      .amounts-area{grid-column-gap: 10px;}
      .amounts-area label.amount-label {min-width: 70px; border-radius: 20px;}
      .amounts-area .amounts-item.custom-field label.amount-label{
          min-width: 100px;
      }
      
      .amounts-area [type="radio"]:checked + .amount-label{
          font-family: 'ProximaNovaRegular';
      }

      .charge-info p {
          font-size: 11px;
      }

      .sticky-donate-wrapper, .sticky-faq-wrapper  {
          padding: 15px 10px 0;
      }

      .step-section {
          padding-bottom: 15px;
      }

      .step-section .step .label-text {
          font-size: 12px;
      }

      .step-section .step .number {
          width: 30px;
          height: 30px;
      }

      .step-section .step {
          grid-column-gap: 10px;
      }

      .step-section {
          grid-column-gap: 20px;
      }

      .thank-you-section .text-section h3 {
          font-size: 20px;
          margin: 0 0 5px 0;
      }

      .thank-you-section .text-section p {
          font-size: 14px;
      }

      .thank-you-section .column-section .icon img {
          height: 50px;
      }

      .thank-you-section .total-section {
          font-size: 24px;
      }

      .thank-you-section {
          padding: 20px;
          border-radius: 16px;
      }

      .thank-you-section .column-section {
          grid-column-gap: 20px;
      }

      .thank-you-section .total-section {
          padding: 12px 20px;
      }

      .toggle-button a, .toggle-button-faq a {
          font-size: 14px;
      }
      
      
      .billing-info-section .city-section {
          
          
      }
      .billing-info-section .zip-code-section {
          
        }
      .billing-info-section  .state-section {
          
      }
      
      .form-controls{padding: 12px 10px;}
      
      .billing-info-section .form-controls {
          font-size: 15px !important; font-family: 'ProximaNova Semibold'; grid-column-gap: 10px;
        }
      
      .billing-info-section .form-control{width:100%; grid-column-gap: 10px;}
      
      a.faq-btn{padding: 12px 16px;}
      
      a.faq-btn svg{height: 30px;}
      .video-button-section{margin-top: 10px;}
      .button-section-form a{padding: 6px 16px;}
      .billing-info-text{font-size:10px; grid-column-gap: 3px; justify-content: space-between; margin-bottom: 5px; margin-top: 0;}
      .card-items{margin-bottom: 10px;}
      .pay-methods{margin-bottom: 15px; margin-top: 5px;}
      
      .billing-info-section{padding-bottom: 15px;}
      
      .all-steps-wrapper{overflow-x: hidden;}
      
      .email-bottom-section{flex-wrap:wrap;}
      
      .email-bottom-section .left-col {
  width: 100%;
  min-width: inherit;
}
      
      .email-tabs ul li label{padding: 5px 10px;}
      .btn-small{padding: 5px 10px;}
      
  }


  @media all and (max-width:480px) {

      .thank-you-section .text-section h3 {
          font-size: 16px;
      }

      .thank-you-section .text-section p {
          font-size: 12px;
      }

      .thank-you-section .column-section .icon img {
          height: 40px;
      }

      .thank-you-section .column-section {
          grid-column-gap: 16px;
      }
      
      .pay-box{font-size: 17px; padding: 10px 12px;}
      
  .email-tabs ul li label{font-size:13px;}
      .btn-small{font-size:13px;}
      .email-tabs ul{grid-column-gap: 6px;}
      
      .email-top-section{padding: 10px; grid-column-gap: 10px;}
      
      .mail-listing ul li label{padding: 20px 40px;}
      .mail-listing label::before{left:10px;}
      .mail-listing input[type="radio"]:checked ~ label::after{left:15px;}
      
      .message-form-section{padding: 15px 10px;}
      
      .account-email-platform{padding:0 15px;}
      
      .email-top-section{flex-wrap:wrap; grid-row-gap: 15px;}

  }