/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

 @keyframes spin {
   0% {
      transform: rotate(0deg);
   }
   to {
      transform: rotate(1turn);
   }
}

.hidden {
   display: none;
}

.stages li.current {
   font-weight: bold;
}

.cc-donation-form {
   position: relative;
   min-height: 500px;
}

.cc-donation-form.submitted form,
.cc-donation-form.submitting form {
   opacity: 0;
   transform: scale(0.9);
   pointer-events: none;
}

.cc-donation-form.submitted .success,
.cc-donation-form.submitting .success {
   pointer-events: all;
}

.cc-donation-form.submitting .success .icon {
   opacity: 1;
}

.cc-donation-form.submitted .success > * {
   opacity: 1;
   transform: none !important;
}

.cc-donation-form.submitted .success > :nth-child(2) {
   transition-delay: 0.1s;
}

.cc-donation-form.submitted .success > :nth-child(3) {
   transition-delay: 0.2s;
}

.cc-donation-form.submitted .success > :nth-child(4) {
   transition-delay: 0.3s;
}

.cc-donation-form.submitted .success .icon .border,
.cc-donation-form.submitted .success .icon .checkmark {
   opacity: 1;
   stroke-dashoffset: 0 !important;
}

.cc-donation-form .error {
   /*
   display: -ms-flexbox;
   display: flex;
   -ms-flex-pack: center;
   justify-content: center;
   position: absolute;
   width: 100%;
   top: 100%;
   margin-top: 20px;
   left: 0;
   padding: 0 15px; */
   opacity: 0;
   transition-property: opacity, transform;
   transition-duration: 0.35s;
   transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
   transform: translateY(10px);
   margin-top: 20px;
   text-align: center;
}

.cc-donation-form .error .error-text {
   display: none;
}

.cc-donation-form .error.visible {
   opacity: 1;
   transform: none;
}

.cc-donation-form .error.visible .error-text {
   display: block;
}

.cc-donation-form .monthly-success {
   display: -ms-flexbox;
   display: flex;
   -ms-flex-direction: column;
   flex-direction: column;
   -ms-flex-align: center;
   align-items: center;
   -ms-flex-pack: center;
   justify-content: center;
}

.cc-donation-form .success {
   display: -ms-flexbox;
   display: flex;
   -ms-flex-direction: column;
   flex-direction: column;
   -ms-flex-align: center;
   align-items: center;
   -ms-flex-pack: center;
   justify-content: center;
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   padding: 10px;
   text-align: center;
   pointer-events: none;
   overflow: hidden;
}

@media (min-width: 670px) {
   .cc-donation-form .monthly-success,
   .cc-donation-form .success {
      padding: 40px;
   }
}

.cc-donation-form .monthly-success > *,
.cc-donation-form .success > * {
   transition-property: opacity, transform;
   transition-duration: 0.35s;
   transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
   transform: translateY(50px);
}

.cc-donation-form .success > * {
   opacity: 0;
}

.cc-donation-form .monthly-success .icon,
.cc-donation-form .success .icon {
   margin: 15px 0 30px;
   transform: translateY(70px) scale(0.75);
}

.cc-donation-form .success .icon svg {
   will-change: transform;
}

.cc-donation-form .success .icon .border {
   stroke-dasharray: 251;
   stroke-dashoffset: 62.75;
   transform-origin: 50% 50%;
   transition: stroke-dashoffset 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
   animation: spin 1s linear infinite;
}

.cc-donation-form .success .icon .checkmark {
   stroke-dasharray: 60;
   stroke-dashoffset: 60;
   transition: stroke-dashoffset 0.35s cubic-bezier(0.165, 0.84, 0.44, 1) .035s;
}

.cc-donation-form .gift-aid-logo {
   float: right;
}

#submit-message {
	border: 10px solid var(--color-4);
	padding: 15px;
	text-align: center;
}