*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

:root {
  --color-white: #fff;
  --color-main-back: #f8f8f8;
  --color-logo: #3e4096;
  --color-primary: #fe3838;
  --color-primary-hover: #E72A2A;
  --color-primary-rgb: 254, 56, 56;
  --color-secondary-rgb: 26, 50, 62;
  --color-secondary: #1a323e;
  --color-accent: #b07f09;
  --color-menu-active: #b07f09;
  --color-icons: #171717;
  --color-muted: #efe7ec;
  --color-bg-disable: #e0e0e0;
  --color-disable: #757575;
  --color-success: #0d792b;
  --color-success-rgb: 13,121,43;
  --color-border: #d9d9d9;
  --color-menu: #9e9e9e;
  --color-heading: #171717;
  --color-text: #474749;
  --color-text-disable: #969696;
  --color-text-card: #666666;
  --color-error: #CF0A0A;
  --color-campaign-bg: #1a323e;
  --color-campaign-progress: #fe3838;
  --color-campaign-icons: #f8f8f8;
  --alpha-15: .15;
}

html {
  font-size: 62.5%;
}
@media only screen and (max-width: 75em) {
  html {
    font-size: 56.25%;
  }
}
@media only screen and (max-width: 63.8em) {
  html {
    font-size: 50%;
  }
}
@media only screen and (min-width: 112.5em) {
  html {
    font-size: 75%;
  }
}

body {
  box-sizing: border-box;
  background-color: var(--color-main-back);
}
body a:link, body a:visited {
  text-decoration: none;
}
body a:hover {
  text-decoration: underline;
}

@keyframes error {
  0% {
    transform: translateX(-5px);
  }
  10% {
    transform: translateX(5px);
  }
  20% {
    transform: translateX(-4px);
  }
  30% {
    transform: translateX(4px);
  }
  40% {
    transform: translateX(-3px);
  }
  50% {
    transform: translateX(3px);
  }
  60% {
    transform: translateX(-2px);
  }
  70% {
    transform: translateX(2px);
  }
  80% {
    transform: translateX(-1px);
  }
  90% {
    transform: translateX(1px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes message-in {
  0% {
    transform: translateY(-10rem);
    opacity: 0;
  }
  90% {
    transform: translateY(0.5rem);
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
body {
  font-family: "Mulish", sans-serif;
  font-weight: 400;
  line-height: 1.7;
  /* color: $color-grey; */
}

p {
  font-size: 1.6rem;
  line-height: 2.4rem;
  color: var(--color-text);
  margin-top: 2.4rem;
}

.accent {
  color: var(--color-accent);
  font-size: 3.6rem;
  line-height: 4.4rem;
  margin: 2.4rem 0;
}

.heading-h2 {
  font-size: 3.6rem;
  line-height: 4.4rem;
  font-weight: 600;
  color: var(--color-heading);
  padding-bottom: 1.6rem;
}

.divider {
  border-bottom: 1px solid var(--color-muted);
}

.heading-h3 {
  color: var(--color-heading);
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 3.2rem;
}

.heading-h4 {
  color: var(--color-heading);
  font-size: 3.6rem;
  font-weight: 600;
  margin-bottom: 1.6rem;
  line-height: 4.4rem;
}

.f-white {
  color: var(--color-white);
}

.f-secondary {
  color: var(--color-secondary);
}

.btn__donate {
  display: inline-block;
  font-size: 1.9rem;
  font-weight: normal;
  height: 6.4rem;
  width: 18rem;
  text-align: center;
  border-radius: 50px;
  color: var(--color-white);
  padding: 1.6rem 3.6rem;
  transition: all 0.1s;
}
.btn__donate:link, .btn__donate:visited {
  background-color: var(--color-primary);
  text-decoration: none;
}
.btn__donate:hover {
  background-color: var(--color-primary-hover);
  text-decoration: none;
}
.btn__donate:active {
  background-color: var(--color-primary-hover);
  transform: translateY(2px);
}
@media only screen and (max-width: 75em) {
  .btn__donate {
    width: 15rem;
    padding: 1.6rem 1.6rem;
  }
}

.btn__secondary {
  display: inline-block;
  font-size: 1.9rem;
  font-weight: normal;
  height: 6rem;
  min-width: 18rem;
  text-align: center;
  border-radius: 50px;
  color: var(--color-white);
  padding: 1.6rem 3.6rem;
  transition: all 0.1s;
  border: none;
  background-color: var(--color-secondary);
}
.btn__secondary:link, .btn__secondary:visited {
  background-color: var(--color-secondary);
  text-decoration: none;
}
.btn__secondary:hover {
  background-color: var(--color-primary);
  text-decoration: none;
  cursor: pointer;
}
.btn__secondary:active {
  background-color: var(--color-primary);
  transform: translateY(2px);
}

.btn__light-primary {
  display: inline-block;
  font-size: 1.9rem;
  font-weight: normal;
  height: 6rem;
  min-width: 18rem;
  text-align: center;
  border-radius: 50px;
  padding: 1.6rem 3.6rem;
  transition: all 0.1s;
}
.btn__light-primary:link, .btn__light-primary:visited {
  color: var(--color-primary);
  background-color: var(--color-white);
  text-decoration: none;
}
.btn__light-primary:hover {
  color: var(--color-white);
  background-color: var(--color-primary);
  text-decoration: none;
}
.btn__light-primary:active {
  color: var(--color-white);
  background-color: var(--color-primary);
  transform: translateY(2px);
}

.btn__light-secondary {
  display: inline-block;
  font-size: 1.9rem;
  font-weight: normal;
  height: 6rem;
  min-width: 18rem;
  text-align: center;
  border-radius: 50px;
  padding: 1.6rem 3.6rem;
  transition: all 0.1s;
}
.btn__light-secondary:link, .btn__light-secondary:visited {
  color: var(--color-secondary);
  background-color: var(--color-white);
  text-decoration: none;
}
.btn__light-secondary:hover {
  color: var(--color-white);
  background-color: var(--color-primary);
  text-decoration: none;
}
.btn__light-secondary:active {
  color: var(--color-white);
  background-color: var(--color-primary);
  transform: translateY(2px);
}

.btn__currency {
  display: inline-block;
  font-size: 1.9rem;
  font-weight: normal;
  height: 5.6rem;
  min-width: 24rem;
  text-align: center;
  border-radius: 50px;
  border: none;
  padding: 1.6rem 3.6rem;
  transition: all 0.1s;
  margin: 0.8rem;
  cursor: pointer;
  color: var(--color-disable);
  background-color: var(--color-bg-disable);
}
.btn__currency:hover {
  color: var(--color-white);
  background-color: var(--color-secondary);
  text-decoration: none;
}
.btn__currency:active {
  color: var(--color-white);
  background-color: var(--color-secondary);
  transform: translateY(2px);
}
.btn__currency--active {
  color: var(--color-white);
  background-color: var(--color-secondary);
}

.btn__outline {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.9rem;
  font-weight: normal;
  height: 5.6rem;
  min-width: 12rem;
  border-radius: 50px;
  border: 1px solid var(--color-secondary);
  padding: 1.6rem 2rem;
  transition: all 0.1s;
  margin: 0.4rem;
  cursor: pointer;
  color: var(--color-secondary);
  background-color: transparent;
  text-decoration: none;
}
@media only screen and (max-width: 37.5em) {
  .btn__outline {
    min-width: 20rem;
  }
}
.btn__outline .text {
  padding-top: 0.2rem;
}
.btn__outline:hover {
  color: var(--color-white);
  background-color: var(--color-secondary);
  border: 1px solid var(--color-secondary);
  text-decoration: none;
}
.btn__outline:active {
  color: var(--color-white);
  background-color: var(--color-secondary);
  border: 1px solid var(--color-secondary);
  text-decoration: none;
  transform: translateY(2px);
}
.btn__outline .icon {
  height: 2.4rem;
  width: 2.4rem;
  fill: var(--color-secondary);
}
.btn__outline .icon__left {
  margin-right: 0.8rem;
}
.btn__outline .icon__right {
  margin-left: 0.8rem;
}
.btn__outline:hover .icon {
  fill: var(--color-white);
}
.btn__outline--active, .btn__outline--active:hover {
  border: 1px solid var(--color-primary);
  color: var(--color-white);
  background-color: var(--color-primary);
  cursor: auto;
}
.btn__outline--card {
  width: 23rem;
  height: 4rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  justify-content: center;
}
.btn__outline span {
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.btn__back {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.6rem;
  font-weight: normal;
  height: 4.6rem;
  min-width: 10rem;
  border-radius: 0.8rem;
  border: none;
  transition: all 0.1s;
  margin-right: 2.4rem;
  cursor: pointer;
  color: var(--color-text);
  background-color: var(--color-white);
}
.btn__back .text {
  padding-top: 0.2rem;
  padding-right: 0.2rem;
}
.btn__back:hover {
  color: var(--color-white);
  background-color: var(--color-secondary);
  text-decoration: none;
}
.btn__back:active {
  color: var(--color-white);
  background-color: var(--color-secondary);
  text-decoration: none;
  transform: translateY(2px);
}
.btn__back .icon {
  height: 2.4rem;
  width: 2.4rem;
  fill: var(--color-text);
  margin-right: 0.6rem;
}
.btn__back:hover .icon {
  fill: var(--color-white);
}

.btn-map__group {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}
@media only screen and (max-width: 37.5em) {
  .btn-map__group {
    flex-direction: column;
    width: 50vw;
    margin: 0 auto 2rem auto;
  }
}
.btn-map__label {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.9rem;
  font-weight: normal;
  height: 5.6rem;
  min-width: 24rem;
  border-radius: 50px;
  border: none;
  padding: 1.6rem 3.6rem;
  margin: 0.8rem;
  cursor: pointer;
  color: var(--color-disable);
  background-color: var(--color-bg-disable);
  transition: all 0.1s;
}
.btn-map__label:hover {
  color: var(--color-white);
  background-color: var(--color-secondary);
  text-decoration: none;
}
.btn-map__label:active {
  color: var(--color-white);
  background-color: var(--color-secondary);
  transform: translateY(2px);
}
.btn-map__radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.btn-map__radio:checked + .btn-map__label {
  color: var(--color-white);
  background-color: var(--color-secondary);
}

.btn__cancel {
  display: inline-block;
  font-size: 1.6rem;
  font-weight: normal;
  color: var(--color-secondary);
}
.btn__cancel:link, .btn__cancel:visited {
  color: var(--color-secondary);
}
.btn__cancel:hover {
  color: var(--color-primary);
  text-decoration: underline;
}
.btn__cancel:active {
  color: var(--color-primary);
  text-decoration: underline;
}

.btn__pagination {
  background-color: var(--color-secondary);
  height: 2.4rem;
  width: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.1s;
  border: none;
  cursor: pointer;
}
@media only screen and (max-width: 63.8em) {
  .btn__pagination {
    height: 3.2rem;
    width: 6.5rem;
  }
}
.btn__pagination--left {
  border-top-left-radius: 0.8rem;
  border-bottom-left-radius: 0.8rem;
  margin-right: 1px;
}
.btn__pagination--right {
  border-top-right-radius: 0.8rem;
  border-bottom-right-radius: 0.8rem;
}
.btn__pagination--icon {
  fill: var(--color-white);
  width: 0.8rem;
  height: 0.8rem;
}
@media only screen and (max-width: 63.8em) {
  .btn__pagination--icon {
    height: 1.6rem;
    width: 1.6rem;
  }
}
.btn__pagination:hover {
  background-color: var(--color-primary);
}
.btn__pagination:active {
  background-color: var(--color-primary);
  transform: translateY(1px);
}
.btn__pagination--disable {
  background-color: var(--color-bg-disable);
  cursor: default;
}
.btn__pagination--disable:hover {
  background-color: var(--color-bg-disable);
}
.btn__pagination--disable:active {
  background-color: var(--color-bg-disable);
}

.category-container {
  width: 100%;
  margin-inline: auto;
  margin-bottom: 1.8rem;
  container-type: inline-size;
}

.category__list {
  display: grid;
  gap: 1.8rem;
  grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
}
@media only screen and (max-width: 63.8em) {
  .category__list {
    width: 95%;
  }
}
@media only screen and (max-width: 37.5em) {
  .category__list {
    width: 90%;
  }
}
@container (width >= calc(12.5rem * 2 + 1.8rem)) {
  .category__list .category__card {
    grid-column-end: span 2;
  }
}
@container (calc(12.5rem * 4 + 5.4rem) < width <= calc(12.5rem * 6 + 9rem)) {
  .category__list .category__card:last-child:nth-child(3) {
    grid-column: 2/span 2;
  }
}
@container (calc(12.5rem * 6 + 9rem) < width <= calc(12.5rem * 8 + 12.6rem)) {
  .category__list .category__card:last-child:nth-child(4) {
    grid-column: 3/5;
  }
}
.category__card {
  padding: 1.8rem;
  border: 1px solid var(--color-border);
  border-radius: 0.8rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.category__card:hover {
  border: 1px solid var(--color-secondary);
}
.category__card--preselected {
  width: 100%;
  margin: 0;
}
.category__card--preselected:hover {
  border: 1px solid var(--color-border);
}
@media only screen and (max-width: 63.8em) {
  .category__card--preselected {
    min-height: 12rem;
    margin: 0;
  }
  .category__card--preselected:last-child {
    margin: 0;
  }
}
@media only screen and (max-width: 37.5em) {
  .category__card--preselected {
    width: 95%;
    min-height: 12rem;
    margin-bottom: 0;
    margin-right: 0;
  }
}
.category__card--error {
  border-color: var(--color-error);
}
.category__card--selected {
  border: 1px solid var(--color-secondary);
}
.category__card--selected .btn__outline--active {
  cursor: default;
  border: 1px solid var(--color-secondary);
  color: var(--color-white);
  background-color: var(--color-secondary);
}
.category__card--selected .btn__outline--active:active {
  transform: translateY(0);
}
.category__button {
  flex-grow: 1;
  align-content: flex-end;
}
.category__button .btn__outline--card {
  width: fit-content;
}
.category__type {
  font-size: 1.9rem;
  line-height: 1.5;
}
.category__type--selected {
  font-size: 1.4rem;
  line-height: 1.2;
  position: relative;
  margin-bottom: 1rem;
  margin-left: -1.8rem;
}
.category__type--selected::before {
  content: "+";
  display: inline-block;
  width: 1.8rem;
  height: 1.8rem;
  top: -0.1rem;
  left: -1.8rem;
  background-color: var(--color-text);
  mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI3LjAuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAyNSAyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjUgMjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7fQo8L3N0eWxlPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMTEuMSwxMy45bDUtNi43bDAsMGMwLjQtMC42LDEuMy0wLjcsMS45LTAuM3MwLjcsMS4zLDAuMywxLjlsLTYuMSw4Yy0wLjMsMC4zLTAuNiwwLjUtMS4xLDAuNQoJYy0wLjQsMC0wLjgtMC4yLTEuMS0wLjVsLTMuMi00LjFjLTAuNS0wLjYtMC4zLTEuNCwwLjItMS45YzAuNi0wLjUsMS40LTAuMywxLjksMC4yTDExLjEsMTMuOXoiLz4KPC9zdmc+");
  -webkit-mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI3LjAuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAyNSAyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjUgMjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7fQo8L3N0eWxlPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMTEuMSwxMy45bDUtNi43bDAsMGMwLjQtMC42LDEuMy0wLjcsMS45LTAuM3MwLjcsMS4zLDAuMywxLjlsLTYuMSw4Yy0wLjMsMC4zLTAuNiwwLjUtMS4xLDAuNQoJYy0wLjQsMC0wLjgtMC4yLTEuMS0wLjVsLTMuMi00LjFjLTAuNS0wLjYtMC4zLTEuNCwwLjItMS45YzAuNi0wLjUsMS40LTAuMywxLjksMC4yTDExLjEsMTMuOXoiLz4KPC9zdmc+");
}
.category__subcategory {
  font-size: 1.9rem;
}
.category__description {
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--color-text-card);
  margin: 1rem 0 1rem 0;
}
.category__error {
  color: var(--color-error);
  margin-top: 0;
  margin-bottom: 1.8rem;
  text-align: center;
  animation-name: error;
  animation-duration: 0.5s;
  animation-timing-function: ease-in-out;
}

.membership__type {
  color: var(--color-text-card);
  font-size: 1.9rem;
  line-height: 1.5;
}
.membership__description {
  font-size: 1.8rem;
  line-height: 1.1;
  font-weight: 600;
  margin: 1rem 0 1rem 0;
}

.donations {
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.donations__currency {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 1.8rem;
}
.donations__currency-select {
  display: inline-block;
  font-size: 1.9rem;
  font-weight: normal;
  height: 5.6rem;
  min-width: 26rem;
  text-align: center;
  border-radius: 50px;
  border: none;
  padding: 1.6rem 4.2rem 1.6rem 3.6rem;
  transition: all 0.1s;
  margin: 0.8rem;
  cursor: pointer;
  color: var(--color-white);
  background-color: var(--color-secondary);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-repeat: no-repeat;
  background-size: 2.4rem 2.4rem;
  background-image: url(/../assets/dropdown-white.svg);
  background-position: right 1.75rem center;
}
.donations__currency-select:focus {
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 0.25rem rgba(var(--color-secondary-rgb), 0.25);
}
.donations__currency-select:focus-visible {
  outline: none;
}

.donations__variants, .btn__group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 1.8rem;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.73);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.circle-loader {
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 auto;
}

.circle-line {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 30px;
  background-color: var(--color-secondary);
  border-radius: 10px;
  transform-origin: center -30px;
  animation: fade 1.2s infinite ease-in-out;
}

.circle-line:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: -1.1s;
}

.circle-line:nth-child(2) {
  transform: rotate(30deg);
  animation-delay: -1s;
}

.circle-line:nth-child(3) {
  transform: rotate(60deg);
  animation-delay: -0.9s;
}

.circle-line:nth-child(4) {
  transform: rotate(90deg);
  animation-delay: -0.8s;
}

.circle-line:nth-child(5) {
  transform: rotate(120deg);
  animation-delay: -0.7s;
}

.circle-line:nth-child(6) {
  transform: rotate(150deg);
  animation-delay: -0.6s;
}

.circle-line:nth-child(7) {
  transform: rotate(180deg);
  animation-delay: -0.5s;
}

.circle-line:nth-child(8) {
  transform: rotate(210deg);
  animation-delay: -0.4s;
}

.circle-line:nth-child(9) {
  transform: rotate(240deg);
  animation-delay: -0.3s;
}

.circle-line:nth-child(10) {
  transform: rotate(270deg);
  animation-delay: -0.2s;
}

.circle-line:nth-child(11) {
  transform: rotate(300deg);
  animation-delay: -0.1s;
}

.circle-line:nth-child(12) {
  transform: rotate(330deg);
  animation-delay: 0s;
}

@keyframes fade {
  0%, 39%, 100% {
    opacity: 0.3;
  }
  40% {
    opacity: 1;
  }
}
.overlay p {
  color: #fff;
  font-size: 18px;
  margin-top: 20px;
  text-align: center;
}

.hide {
  display: none;
}

#payer-account-number::placeholder, #payer-bank-code::placeholder {
  color: lightgrey;
}

.campaign__card .donations {
  gap: 1.6rem;
  background-color: var(--color-campaign-bg);
}
.campaign__card .donations .donations__currency {
  margin-bottom: 0;
}
.campaign__card .donations .donations__currency-select {
  border: 1px solid var(--color-main-back);
  font-size: 1.6rem;
  line-height: 1.2;
  padding: 0.8rem 2.4rem 0.8rem 0.8rem;
  min-width: 18rem;
  height: 3.6rem;
  margin: 0;
}
.campaign__card .donations .btn__outline {
  border-color: var(--color-main-back);
  color: var(--color-main-back);
  font-size: 1.6rem;
  line-height: 1.2;
  padding: 0.8rem;
  min-width: 8rem;
  height: 3.6rem;
}
.campaign__card .donations .btn__outline:hover {
  background-color: var(--color-main-back);
  color: var(--color-secondary);
}
.campaign__card .donations .btn__outline--active, .campaign__card .donations .btn__outline--active:hover {
  border: 1px solid var(--color-campaign-progress);
  color: var(--color-white);
  background-color: var(--color-campaign-progress);
  cursor: auto;
}
.campaign__card .donations .donations__variants {
  margin-top: 0;
}

.crowdfundings {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 2.4rem;
}
.crowdfundings__currency {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 1.8rem;
}
.crowdfundings__currency-select {
  display: inline-block;
  font-size: 1.9rem;
  font-weight: normal;
  height: 5.6rem;
  min-width: 26rem;
  text-align: center;
  border-radius: 50px;
  border: none;
  padding: 1.6rem 4.2rem 1.6rem 3.6rem;
  transition: all 0.1s;
  margin: 0.8rem;
  cursor: pointer;
  color: var(--color-white);
  background-color: var(--color-secondary);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-repeat: no-repeat;
  background-size: 2.4rem 2.4rem;
  background-image: url(/../assets/dropdown-white.svg);
  background-position: right 1.75rem center;
}
.crowdfundings__currency-select:focus {
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 0.25rem rgba(var(--color-secondary-rgb), 0.25);
}
.crowdfundings__currency-select:focus-visible {
  outline: none;
}

.dcrowdfundings__variants, .btn__group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 1.8rem;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.73);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.circle-loader {
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 auto;
}

.circle-line {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 30px;
  background-color: var(--color-secondary);
  border-radius: 10px;
  transform-origin: center -30px;
  animation: fade 1.2s infinite ease-in-out;
}

.circle-line:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: -1.1s;
}

.circle-line:nth-child(2) {
  transform: rotate(30deg);
  animation-delay: -1s;
}

.circle-line:nth-child(3) {
  transform: rotate(60deg);
  animation-delay: -0.9s;
}

.circle-line:nth-child(4) {
  transform: rotate(90deg);
  animation-delay: -0.8s;
}

.circle-line:nth-child(5) {
  transform: rotate(120deg);
  animation-delay: -0.7s;
}

.circle-line:nth-child(6) {
  transform: rotate(150deg);
  animation-delay: -0.6s;
}

.circle-line:nth-child(7) {
  transform: rotate(180deg);
  animation-delay: -0.5s;
}

.circle-line:nth-child(8) {
  transform: rotate(210deg);
  animation-delay: -0.4s;
}

.circle-line:nth-child(9) {
  transform: rotate(240deg);
  animation-delay: -0.3s;
}

.circle-line:nth-child(10) {
  transform: rotate(270deg);
  animation-delay: -0.2s;
}

.circle-line:nth-child(11) {
  transform: rotate(300deg);
  animation-delay: -0.1s;
}

.circle-line:nth-child(12) {
  transform: rotate(330deg);
  animation-delay: 0s;
}

@keyframes fade {
  0%, 39%, 100% {
    opacity: 0.3;
  }
  40% {
    opacity: 1;
  }
}
.overlay p {
  color: #fff;
  font-size: 18px;
  margin-top: 20px;
  text-align: center;
}

.hide {
  display: none;
}

#payer-account-number::placeholder, #payer-bank-code::placeholder {
  color: lightgrey;
}

.campaign__card .crowdfundings {
  gap: 1.6rem;
}
.campaign__card .crowdfundings .crowdfundings__currency {
  margin-bottom: 0;
}
.campaign__card .crowdfundings .crowdfundings__currency-select {
  font-size: 1.6rem;
  line-height: 1.2;
  padding: 0.8rem 2.4rem 0.8rem 0.8rem;
  min-width: 18rem;
  height: 3.6rem;
  margin: 0;
}
.campaign__card .crowdfundings .btn__outline {
  font-size: 1.6rem;
  line-height: 1.2;
  padding: 0.8rem;
  min-width: 10rem;
  height: 3.6rem;
}
.campaign__card .crowdfundings .btn__outline--active, .campaign__card .crowdfundings .btn__outline--active:hover {
  cursor: auto;
}
.campaign__card .crowdfundings .donations__variants {
  margin-top: 0;
  flex-wrap: nowrap;
}
.events {
  position: relative;
  padding-top: 4rem;
  height: 55rem;
  text-align: center;
}
@media only screen and (max-width: 63.8em) {
  .events {
    height: 65rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .events {
    height: 93rem;
    padding-bottom: 3rem;
  }
}
.events .event {
  min-height: 30rem;
  width: 80vw;
  border-radius: 4rem;
  background-color: var(--color-secondary);
  overflow: hidden;
  position: absolute;
  top: 13rem;
  left: 10vw;
  display: grid;
  color: var(--color-white);
  text-align: left;
  grid-template-rows: [header-start] 1fr [header-end description-start] minmax(min-content, 1fr) [description-end date-start] min-content [date-end place-start] min-content [place-end];
  grid-template-columns: [full-start] 1fr [img-end info-start] 1fr [info-end-end button-start] 1fr [full-end];
}
@media only screen and (max-width: 63.8em) {
  .events .event {
    width: 90vw;
    left: 5vw;
    grid-template-rows: [header-start] 1fr [header-end description-start] 1fr [description-end date-start] min-content [date-end place-start] min-content [place-end button-start] 1fr [button-end];
    grid-template-columns: [full-start] 1fr [img-end info-start] 1fr [full-end];
  }
}
@media only screen and (max-width: 37.5em) {
  .events .event {
    width: 90vw;
    left: 5vw;
    grid-template-rows: [img-start] 30rem [img-end header-start] 1fr [header-end description-start] 1fr [description-end date-start] min-content [date-end place-start] min-content [place-end button-start] 1fr [button-end];
    grid-template-columns: [full-start] 1fr [full-end];
  }
}
.events .event__image {
  grid-column: full-start/img-end;
  grid-row: header-start/button-end;
  background-image: url(/../assets/event1.jpg);
  background-position: center;
  background-size: cover;
}
@media only screen and (max-width: 37.5em) {
  .events .event__image {
    grid-column: full-start/full-end;
    grid-row: img-start/img-end;
  }
}
.events .event__title {
  grid-column: info-start/info-end;
  grid-row: header-start/header-end;
  margin-top: 5rem;
  margin-left: 4rem;
}
@media only screen and (max-width: 37.5em) {
  .events .event__title {
    grid-column: full-start/full-end;
    grid-row: header-start/header-end;
  }
}
.events .event__description {
  grid-column: info-start/info-end;
  grid-row: description-start/description-end;
  overflow: hidden;
  margin: auto 0 auto 4rem;
  font-size: 1.9rem;
  line-height: 2.8rem;
}
@media only screen and (max-width: 63.8em) {
  .events .event__description {
    margin: auto 4rem auto 4rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .events .event__description {
    grid-column: full-start/full-end;
    grid-row: description-start/description-end;
    margin: auto 4rem auto 4rem;
  }
}
.events .event__date {
  grid-column: info-start/info-end;
  grid-row: date-start/date-end;
  margin-left: 4rem;
  font-size: 1.6rem;
  opacity: 0.8;
}
@media only screen and (max-width: 37.5em) {
  .events .event__date {
    grid-column: full-start/full-end;
    grid-row: date-start/date-end;
  }
}
.events .event__place {
  grid-column: info-start/info-end;
  grid-row: place-start/place-end;
  margin-bottom: 5rem;
  margin-left: 4rem;
  font-size: 1.6rem;
  opacity: 0.8;
}
@media only screen and (max-width: 37.5em) {
  .events .event__place {
    grid-column: full-start/full-end;
    grid-row: place-start/place-end;
    margin-bottom: 2rem;
  }
}
.events .event__button {
  grid-column: button-start/button-end;
  grid-row: header-start/place-end;
  margin: auto;
}
@media only screen and (max-width: 63.8em) {
  .events .event__button {
    grid-column: info-start/full-end;
    grid-row: button-start/button-end;
    margin-left: 4rem;
    margin-top: 1rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .events .event__button {
    grid-column: full-start/full-end;
    grid-row: button-start/button-end;
    margin: auto;
  }
}
.events .dots__dot {
  border: 1px solid var(--color-secondary);
}
.events .dots__dot--active {
  background-color: var(--color-secondary);
}

.message {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 0.5rem;
  width: 100vw;
  min-height: 5rem;
  z-index: 20000;
}
@media only screen and (max-width: 63.8em) {
  .message {
    top: 0.5rem;
    padding: 1rem;
  }
}
.message__box {
  width: 100%;
  padding: 1rem;
  border-radius: 3px;
  background-color: rgba(136, 136, 136, 0.9);
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 0.4rem 0.8rem rgba(13, 13, 13, 0.1);
  margin-bottom: 0.5rem;
  animation-name: message-in;
  animation-duration: 0.5s;
  animation-timing-function: ease-in-out;
}
@media only screen and (max-width: 63.8em) {
  .message__box {
    height: 9rem;
  }
}
.message__box--error {
  background-color: rgba(207, 10, 10, 0.9);
}
.message__box--success {
  background-color: rgba(13, 121, 43, 0.9);
}
.message__icon {
  width: 2rem;
  height: 2rem;
  fill: #fff;
  margin: 0 1rem;
}
@media only screen and (max-width: 63.8em) {
  .message__icon {
    width: 3rem;
    height: 3rem;
  }
}
.message__text {
  color: #fff;
  font-size: 1.6rem;
  text-align: center;
  margin: 0.5rem 1rem;
  max-width: 80%;
}
@media only screen and (max-width: 63.8em) {
  .message__text {
    font-size: 2rem;
  }
}
.message__close-btn {
  height: 2rem;
  transition: all 0.2s;
}
@media only screen and (max-width: 63.8em) {
  .message__close-btn {
    height: 3rem;
  }
}
.message__close-btn:hover {
  transform: scale(1.1);
}
.message__close-btn:active {
  transform: scale(0.9);
}

.header {
  display: flex;
  justify-content: space-between;
  align-content: center;
  padding: 3rem 5rem;
  background-color: #fff;
  box-shadow: 0 0.4rem 0.8rem rgba(13, 13, 13, 0.05);
  z-index: 10;
  position: relative;
}
.header .header__wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
@media only screen and (max-width: 63.8em) {
  .header .menu {
    flex-grow: 0;
    flex-direction: row-reverse;
  }
}
@media only screen and (max-width: 63.8em) {
  .header .menu__list {
    position: fixed;
    top: 0;
    height: 0;
    background: var(--color-secondary);
    opacity: 0;
    align-items: center;
    flex-direction: column;
    margin: 0;
    overflow: scroll;
    z-index: 1500;
    transition: all 0.2s;
  }
}
@media only screen and (max-width: 63.8em) {
  .header .menu__list--item {
    margin: none;
    font-size: 4rem;
    margin-right: 0;
    margin-bottom: 2.5rem;
  }
}
@media only screen and (max-width: 63.8em) {
  .header .menu__list--link:link, .header .menu__list--link:visited {
    color: var(--color-white);
  }
}
@media only screen and (max-width: 63.8em) {
  .header .menu__list--link:hover {
    color: var(--color-white);
  }
}
@media only screen and (max-width: 63.8em) {
  .header .menu__list--active:link, .header .menu__list--active:visited {
    color: var(--color-accent);
  }
}
@media only screen and (max-width: 63.8em) {
  .header .menu__list--active:hover {
    color: var(--color-accent);
  }
}
.header .menu__actions {
  align-self: center;
  display: flex;
  transition: all 0.2s;
}
.header .menu__mobile--label {
  display: none;
  width: 6.4rem;
  height: 6.4rem;
  margin-left: 1rem;
  z-index: 10000;
  position: relative;
  cursor: pointer;
}
.header .menu__mobile--label:hover > ::before {
  transform: translateY(-2px);
}
.header .menu__mobile--label:hover > ::after {
  transform: translateY(2px);
}
@media only screen and (max-width: 63.8em) {
  .header .menu__mobile--label {
    display: inline-block;
  }
}
.header .menu__mobile--icon {
  position: absolute;
  display: inline-block;
  width: 4rem;
  height: 2px;
  border-radius: 1px;
  background-color: var(--color-secondary);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.header .menu__mobile--icon::after, .header .menu__mobile--icon::before {
  content: "";
  position: absolute;
  display: inline-block;
  width: 4rem;
  height: 2px;
  border-radius: 1px;
  background-color: var(--color-secondary);
  top: 1rem;
  transition: all 0.2s;
}
.header .menu__mobile--icon::before {
  top: -1rem;
}
.header .menu__mobile--icon::after {
  top: 1rem;
}
.header .menu__mobile--toggle {
  display: none;
}
.header .menu__mobile--toggle:checked ~ .menu__list {
  display: flex;
  opacity: 1;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding-top: 25rem;
}
.header .menu__mobile--toggle:checked ~ .menu__mobile--label .menu__mobile--icon {
  background-color: transparent;
}
.header .menu__mobile--toggle:checked ~ .menu__mobile--label {
  position: fixed;
  top: 3rem;
  right: 5rem;
}
.header .menu__mobile--toggle:checked ~ .menu__mobile--label .menu__mobile--icon::before {
  top: 0;
  transform: rotate(135deg);
  background-color: var(--color-white);
}
.header .menu__mobile--toggle:checked ~ .menu__mobile--label .menu__mobile--icon::after {
  top: 0;
  transform: rotate(-135deg);
  background-color: var(--color-white);
}
.header .menu__mobile--toggle:checked ~ .menu__actions {
  position: fixed;
  z-index: 10000;
  top: 3rem;
  left: 50%;
  transform: translateX(-50%);
}
@media only screen and (max-width: 37.5em) {
  .header .menu__mobile--toggle:checked ~ .menu__actions {
    display: block;
  }
}
@media only screen and (max-width: 37.5em) {
  .header .menu__actions {
    display: none;
  }
}

.menu {
  display: flex;
  flex-grow: 3;
}
.menu__list {
  margin-left: 2.4rem;
  flex-grow: 3;
  align-self: center;
  display: flex;
  list-style: none;
}
@media only screen and (max-width: 75em) {
  .menu__list {
    margin-left: 1.6rem;
  }
}
.menu__list--item {
  font-size: 1.6rem;
  margin-right: 1.8rem;
  font-weight: bold;
  color: var(--color-menu-active);
}
@media only screen and (max-width: 75em) {
  .menu__list--item {
    margin-right: 1.4rem;
  }
}
.menu__list--link {
  font-weight: normal;
}
.menu__list--link:link, .menu__list--link:visited {
  text-decoration: none;
  color: var(--color-menu);
}
.menu__list--link:hover {
  text-decoration: underline;
  color: var(--color-accent);
}
.menu__list--active:link, .menu__list--active:visited {
  color: var(--color-accent);
}
.menu__list--active:hover {
  text-decoration: underline;
  color: var(--color-accent);
}
.menu__actions {
  align-self: center;
  display: flex;
  transition: all 0.2s;
}
.menu__mobile--label {
  display: none;
  width: 6.4rem;
  height: 6.4rem;
  margin-left: 1rem;
  z-index: 10000;
  position: relative;
  cursor: pointer;
}
.menu__mobile--label:hover > ::before {
  transform: translateY(-2px);
}
.menu__mobile--label:hover > ::after {
  transform: translateY(2px);
}
@media only screen and (max-width: 63.8em) {
  .menu__mobile--label {
    display: inline-block;
  }
}
.menu__mobile--icon {
  position: absolute;
  display: inline-block;
  width: 4rem;
  height: 2px;
  border-radius: 1px;
  background-color: var(--color-secondary);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.menu__mobile--icon::after, .menu__mobile--icon::before {
  content: "";
  position: absolute;
  display: inline-block;
  width: 4rem;
  height: 2px;
  border-radius: 1px;
  background-color: var(--color-secondary);
  top: 1rem;
  transition: all 0.2s;
}
.menu__mobile--icon::before {
  top: -1rem;
}
.menu__mobile--icon::after {
  top: 1rem;
}
.menu__mobile--toggle {
  display: none;
}
.menu__mobile--toggle:checked ~ .menu__list {
  display: flex;
  opacity: 1;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding-top: 25rem;
}
.menu__mobile--toggle:checked ~ .menu__mobile--label .menu__mobile--icon {
  background-color: transparent;
}
.menu__mobile--toggle:checked ~ .menu__mobile--label {
  position: fixed;
  top: 3rem;
  right: 5rem;
}
.menu__mobile--toggle:checked ~ .menu__mobile--label .menu__mobile--icon::before {
  top: 0;
  transform: rotate(135deg);
  background-color: var(--color-white);
}
.menu__mobile--toggle:checked ~ .menu__mobile--label .menu__mobile--icon::after {
  top: 0;
  transform: rotate(-135deg);
  background-color: var(--color-white);
}
.menu__mobile--toggle:checked ~ .menu__actions {
  position: fixed;
  z-index: 10000;
  top: 3rem;
  left: 50%;
  transform: translateX(-50%);
}
@media only screen and (max-width: 37.5em) {
  .menu__mobile--toggle:checked ~ .menu__actions {
    display: block;
  }
}
@media only screen and (max-width: 37.5em) {
  .menu__actions {
    display: none;
  }
}

.logo {
  flex-grow: 0;
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 63.8em) {
  .logo {
    flex-grow: 3;
  }
}
.logo__image {
  width: 3.6rem;
  height: 3.6rem;
  object-fit: scale-down;
  margin-right: 2rem;
}
.logo__text {
  align-self: center;
  font-size: 2.4rem;
  font-weight: bold;
  color: var(--color-logo);
  line-height: 2.4rem;
  max-width: 25rem;
}
@media only screen and (min-width: 112.5em) {
  .logo__text {
    max-width: 45rem;
  }
}
@media only screen and (max-width: 75em) {
  .logo__text {
    font-size: 2.2rem;
    max-width: 20rem;
  }
}
@media only screen and (max-width: 63.8em) {
  .logo__text {
    max-width: 45rem;
  }
}
.logo:link, .logo:visited {
  text-decoration: none;
}
.logo:hover {
  text-decoration: none;
}

footer {
  padding: 9rem 5rem;
  background-color: #fff;
  display: grid;
  grid-template-rows: [menu-start] minmax(3.2rem, min-content) [menu-end divider-start] calc(2.4rem + 1px + 2.4rem) [divider-end copy-start] 2.4rem [copy-end];
  grid-template-columns: [full-start] 30.5rem [logo-end menu-start] 1fr [menu-end social-start] 24.8rem [full-end];
}
@media only screen and (max-width: 63.8em) {
  footer {
    grid-template-rows: [logo-start] minmax(3.2rem, min-content) [logo-end menu-start] min-content [menu-end divider-start] calc(3.2rem + 1px + 3.2rem) [divider-end social-start] min-content [social-end copy-start] min-content [copy-end];
    grid-template-columns: [full-start] 1fr [full-end];
  }
}
footer .logo {
  grid-column: full-start/logo-end;
  grid-row: menu-start/menu-end;
}
@media only screen and (max-width: 63.8em) {
  footer .logo {
    grid-column: full-start/full-end;
    grid-row: logo-start/logo-end;
    justify-content: center;
  }
}
footer .menu__list {
  grid-column: menu-start/full-end;
  grid-row: menu-start/menu-end;
}
@media only screen and (max-width: 63.8em) {
  footer .menu__list {
    grid-column: full-start/full-end;
    grid-row: menu-start/menu-end;
    justify-content: center;
    margin-top: 3.2rem;
    margin-left: 0;
  }
  footer .menu__list--item:last-child {
    margin-right: 0;
  }
}
@media only screen and (max-width: 37.5em) {
  footer .menu__list {
    flex-direction: column;
    align-items: center;
  }
  footer .menu__list--item {
    margin-right: 0;
    margin-bottom: 1.6rem;
  }
}
footer .divider {
  grid-column: full-start/full-end;
  grid-row: divider-start/divider-end;
  background-color: black;
  margin: 2.4rem 0;
  height: 1px;
}
@media only screen and (max-width: 63.8em) {
  footer .divider {
    grid-column: full-start/full-end;
    grid-row: divider-start/divider-end;
    margin: 3.2rem 0;
  }
}
footer .copyright {
  grid-column: full-start/menu-end;
  grid-row: copy-start/copy-end;
  font-size: 1.6rem;
}
@media only screen and (max-width: 63.8em) {
  footer .copyright {
    grid-column: full-start/full-end;
    grid-row: copy-start/copy-end;
    margin: 3.2rem auto;
    text-align: center;
  }
}
footer .social {
  grid-column: social-start/full-end;
  grid-row: copy-start/copy-end;
  justify-content: flex-end;
  display: flex;
  list-style: none;
}
footer .social__item:not(:last-child) {
  margin-right: 3.2rem;
}
footer .social__icon {
  height: 2.4rem;
  width: 2.4rem;
  fill: var(--color-icons);
  transition: all 0.1s;
}
footer .social__icon:hover {
  fill: var(--color-accent);
  transform: translateY(-1px);
}
@media only screen and (max-width: 63.8em) {
  footer .social {
    grid-column: full-start/full-end;
    grid-row: social-start/social-end;
    justify-content: center;
  }
}

.social--header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 2rem;
  list-style: none;
}
.social--header .social__item {
  display: flex;
  align-items: center;
}
.social--header .social__link {
  display: inline-block;
}
.social--header .social__icon {
  height: 2.4rem;
  width: 2.4rem;
  fill: var(--color-icons);
  transition: all 0.1s;
}
.social--header .social__icon:hover {
  fill: var(--color-accent);
  transform: translateY(-1px);
}

.popup__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(var(--color-success-rgb), 0.5);
  overflow-y: scroll;
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.popup__main {
  background-color: var(--color-white);
  overflow: hidden;
  box-sizing: border-box;
  border-radius: 1.5rem;
  width: 70rem;
  padding: 4rem;
}
@media only screen and (max-width: 37.5em) {
  .popup__main {
    width: 80%;
  }
}
.popup__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 3rem;
}
.popup__icon {
  height: 9.8rem;
  width: 9.8rem;
  fill: var(--color-success);
  margin: 2rem;
}
.popup__buttons {
  display: flex;
  justify-content: center;
  margin-top: 4rem;
}

.donate-popup {
  display: none;
}
.donate-popup__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(var(--color-secondary-rgb), 0.5);
  overflow-y: scroll;
  backdrop-filter: blur(4px);
  z-index: 1000;
}
.donate-popup__main {
  background-color: var(--color-white);
  margin: 4rem auto 2rem auto;
  border-radius: 1.5rem;
  width: 46rem;
  padding: 4rem;
}
@media only screen and (max-width: 37.5em) {
  .donate-popup__main {
    width: 80%;
  }
}
.donate-popup__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 3rem;
}
.donate-popup__icon {
  height: 9.8rem;
  width: 9.8rem;
  fill: var(--color-success);
  margin: 2rem;
}
.donate-popup__buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin: 2rem auto 0 auto;
  padding-top: 2rem;
  border-top: 1px solid var(--color-muted);
}

.progress {
  display: flex;
  min-height: 30rem;
  flex-direction: column;
  justify-content: center;
}
@media only screen and (max-width: 63.8em) {
  .progress {
    min-height: 30rem;
  }
}
.progress__header {
  text-align: center;
  align-self: center;
  margin-bottom: 5rem;
  font-size: 2.4rem;
}
@media only screen and (max-width: 37.5em) {
  .progress__header {
    width: 70vw;
  }
}
.progress__info {
  align-self: center;
  width: 40vw;
  margin-top: 5rem;
  margin-bottom: 5rem;
  text-align: center;
}
@media only screen and (max-width: 63.8em) {
  .progress__info {
    width: 60vw;
  }
}
@media only screen and (max-width: 37.5em) {
  .progress__info {
    width: 80vw;
  }
}
.progress__bar {
  width: 50vw;
  max-width: 70rem;
  height: 1rem;
  align-self: center;
  background-color: var(--color-bg-disable);
  border-radius: 0.8rem;
  overflow: hidden;
}
@media only screen and (max-width: 63.8em) {
  .progress__bar {
    width: 70vw;
  }
}
@media only screen and (max-width: 37.5em) {
  .progress__bar {
    width: 80vw;
  }
}
.progress__bar--now {
  background-color: var(--color-secondary);
  height: 1rem;
}

.sections {
  margin: 4rem auto;
  display: flex;
  max-width: 130rem;
}
@media only screen and (max-width: 37.5em) {
  .sections {
    flex-direction: column;
  }
}
.sections__donate {
  margin-top: 0;
}

.row {
  display: flex;
  justify-content: space-between;
}
@media only screen and (max-width: 37.5em) {
  .row {
    flex-direction: column;
    align-items: center;
  }
}

.section {
  margin: 3.2rem auto;
  background-color: var(--color-white);
  border-radius: 1.5rem;
  height: fit-content;
}
.section__one-of-two {
  width: 50%;
}
@media only screen and (max-width: 37.5em) {
  .section__one-of-two {
    width: 90%;
    margin-top: 3.2rem;
    padding: 0;
  }
}
.section__one-of-three {
  width: 33%;
  padding: 0 3.2rem;
}
@media only screen and (max-width: 37.5em) {
  .section__one-of-three {
    width: 90%;
    margin-top: 3.2rem;
    padding: 0;
  }
}
.section__two-of-three {
  width: 66%;
  padding: 0 3.2rem;
}
@media only screen and (max-width: 37.5em) {
  .section__two-of-three {
    width: 95%;
    margin: 3.2rem auto;
    padding: 0;
  }
}
.section__three-of-three {
  width: 95%;
  margin: 3.2rem auto;
}
@media only screen and (max-width: 37.5em) {
  .section {
    width: 90%;
  }
}
.section__header {
  font-size: 2.4rem;
  padding-bottom: 1.6rem;
  text-align: center;
}
.section--top {
  border-radius: 1.5rem 1.5rem 0 0;
}
.section--bottom {
  border-radius: 0 0 1.5rem 1.5rem;
}

.navigation {
  margin: 0 auto;
  border-right: 1px solid var(--color-border);
}
@media only screen and (max-width: 37.5em) {
  .navigation {
    height: fit-content;
    margin-bottom: 3.2rem;
    padding-bottom: 3.2rem;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }
}

.sub-menu {
  display: flex;
  flex-direction: column;
  list-style: none;
}

.row.gap {
  gap: 3.2rem;
}
.row.gap > .section__one-of-three {
  padding: 0;
}
.row.gap > .section__two-of-three {
  padding: 0;
}

.slider {
  width: 100vw;
  height: 76rem;
  position: relative;
  overflow: hidden;
}
.slider .slide {
  width: 100%;
  height: 100%;
  position: absolute;
  background-image: linear-gradient(3deg, rgba(27, 61, 74, 0.64), rgba(56, 95, 108, 0.64)), linear-gradient(to right bottom, rgba(0, 0, 0, 0), rgba(0, 12, 21, 0.56)), url(/../assets/main.jpg);
  background-position: center;
  background-size: cover;
}
.slider .slide__text {
  font-size: 5.2rem;
  line-height: 6.4rem;
  font-weight: bold;
  width: 64%;
  text-align: center;
  color: var(--color-white);
  margin: 23rem auto 2.4rem auto;
}
@media only screen and (max-width: 37.5em) {
  .slider .slide__text {
    width: 80%;
    font-size: 4.2rem;
    line-height: 5.4rem;
    margin: 22rem auto 2.4rem auto;
  }
}
.slider .slide__button {
  display: flex;
  justify-content: center;
}

.dots {
  position: absolute;
  bottom: 4rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}

.dots__dot {
  border: 1px solid var(--color-white);
  background-color: transparent;
  height: 1.8rem;
  width: 1.8rem;
  border-radius: 50%;
  margin-right: 0.8rem;
  cursor: pointer;
  transition: all 0.1s;
}
.dots__dot--active {
  background-color: var(--color-white);
}
.dots__dot:last-child {
  margin: 0;
}
.dots__dot:hover {
  transform: scale(1.1);
}

.subscribe {
  height: 32rem;
  background-color: var(--color-secondary);
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.subscribe__subtitle {
  font-size: 1.6;
  color: var(--color-white);
  margin-bottom: 1.6rem;
}
.subscribe__form {
  width: 40vw;
  background-color: var(--color-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (max-width: 63.8em) {
  .subscribe__form {
    width: 60vw;
  }
}
@media only screen and (max-width: 37.5em) {
  .subscribe__form {
    width: 90vw;
  }
}
.subscribe__input {
  font-family: inherit;
  font-size: inherit;
  color: var(--color-text);
  background-color: var(--color-white);
  border: none;
  padding: 1.3rem 2rem;
  border-radius: 0.8rem 0 0 0.8rem;
  width: 60%;
  transition: all 0.2s;
}
.subscribe__input:focus {
  outline: none;
  width: 65%;
  background-color: var(--color-white);
}
.subscribe__input::-webkit-input-placeholder {
  font-weight: 100;
  color: var(--color-disable);
}
.subscribe__button {
  border: none;
  font-family: inherit;
  font-size: inherit;
  color: var(--color-white);
  background-color: var(--color-primary);
  width: 30%;
  padding: 1.3rem 2rem;
  border-radius: 0 0.8rem 0.8rem 0;
  cursor: pointer;
}
.subscribe__button:hover {
  background-color: var(--color-primary-hover);
}
.subscribe__button:focus {
  outline: none;
}

.top {
  margin: 4rem auto;
  display: flex;
  justify-content: center;
  max-width: 130rem;
  flex-wrap: wrap;
}
.top__block {
  height: 12rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 5rem;
}
.top__block--donate {
  width: 90%;
}
.top__header {
  font-size: 2.8rem;
  line-height: 3.6rem;
}
.top__subheader {
  font-size: 1.6rem;
  line-height: 2.4rem;
  margin-top: 0;
}

.center {
  text-align: center;
}

.campaign > .row {
  padding-bottom: 3.2rem;
  margin-bottom: 3.2rem;
  border-bottom: 1px solid var(--color-muted);
}
.campaign__header {
  padding-inline: 3.2rem;
  font-size: 1.8rem;
  overflow-wrap: anywhere;
  hyphens: auto;
  height: 2lh;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: initial;
}
@supports (-webkit-line-clamp: 2) {
  .campaign__header {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: initial;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}
.campaign__promo {
  width: 100%;
  height: 100%;
}
.campaign__promo img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  display: block;
}
.campaign__card {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  padding: 1.6rem;
  text-align: center;
  margin-block-start: 1.6rem;
}
@media only screen and (max-width: 63.8em) {
  .campaign__card {
    min-height: min-content;
  }
}
.campaign__info {
  display: flex;
  flex-direction: column;
}
.campaign__info--summary {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 1rem;
}
@media only screen and (max-width: 37.5em) {
  .campaign__info--summary {
    flex-direction: column;
    align-items: center;
  }
}
.campaign__label--raised {
  font-size: 2.2rem;
  font-weight: 500;
  text-transform: uppercase;
  font-style: italic;
  position: relative;
  line-height: 1.2;
  margin-bottom: 0.8rem;
}
.campaign__amount--raised {
  font-size: 4.4rem;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 0.8rem;
}
.campaign__amount {
  font-weight: 600;
  font-size: 3.4rem;
  line-height: 1.2;
  margin-bottom: 0.8rem;
}
.campaign__label--amount {
  font-size: 1.7rem;
  font-weight: 500;
  text-transform: uppercase;
  font-style: italic;
  line-height: 1.2;
  margin-bottom: 0.8rem;
}
.campaign__donors {
  font-weight: 600;
  font-size: 2.4rem;
  line-height: 1.2;
  margin-bottom: 0.8rem;
}
.campaign__label--donors {
  font-size: 1.2rem;
  font-weight: 500;
  text-transform: uppercase;
  font-style: italic;
  line-height: 1.2;
  margin-bottom: 0.8rem;
}
.campaign__money {
  display: flex;
  justify-content: space-between;
}
.campaign__title {
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1.1;
  height: 2lh;
}
.campaign__description {
  font-size: 1.6rem;
  line-height: 1.2;
  text-align: left;
  overflow-wrap: anywhere;
  hyphens: auto;
  max-height: 4lh;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: initial;
}
@supports (-webkit-line-clamp: 4) {
  .campaign__description {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: initial;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
  }
}
.campaign__description-full {
  font-size: 1.8rem;
  line-height: 1.3;
  text-align: left;
  margin-bottom: 7.2rem;
}
.campaign__collected, .campaign__goal {
  font-size: 1.6rem;
  font-weight: 600;
}
.campaign__supporters, .campaign__end-date {
  font-size: 1.4rem;
  line-height: 1.2;
  margin: 0.4rem 0;
  min-height: 1lh;
}
.campaign__progress {
  width: 100%;
}
.campaign__progress-bar {
  width: 100%;
  height: 3.2rem;
  align-self: center;
  background-color: var(--color-bg-disable);
  border-radius: 2rem;
  overflow: hidden;
  position: relative;
  margin: 0.8rem 0;
}
.campaign__progress-bar-now {
  top: 0;
  left: 0;
  position: absolute;
  background-color: var(--color-campaign-progress);
  height: 3.2rem;
}
.campaign__progress-bar-amount {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.6rem;
  color: var(--color-white);
}
.campaign__share {
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
}
.campaign__share-list {
  justify-content: center;
  display: flex;
  list-style: none;
  gap: 4.8rem;
}
.campaign__share-icon {
  height: 2.4rem;
  width: 2.4rem;
  fill: var(--color-campaign-icons);
  transition: all 0.1s;
}
.campaign__share-icon:hover {
  fill: var(--color-accent);
  transform: translateY(-1px);
}
.campaign__share h3 {
  font-size: 1.6rem;
  text-align: center;
  font-weight: 400;
  margin-bottom: 1.6rem;
}

h4.campaign__collected {
  margin: 0.8rem 0;
}

.section__one-of-two .campaign__card {
  padding: 0;
}

.campaigns-container {
  width: min(130rem, 90%);
  padding-top: 3.2rem;
  padding-bottom: 3.2rem;
  container-type: inline-size;
  margin-inline: auto;
  margin-bottom: 1.8rem;
}

.campaigns {
  display: grid;
  gap: 3.2rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
@container (width >= calc(15rem * 2 + 3.2rem)) {
  .campaigns .campaign__summary {
    grid-column: span 2;
  }
}
@container (calc(15rem * 4 + 10.4rem) < width <= calc(15rem * 6 + 15.6rem)) {
  .campaigns .campaign__summary:last-child:nth-child(odd) {
    grid-column: 2/span 2;
  }
}
@container (calc(15rem * 6 + 15.6rem) < width <= calc(15rem * 8 + 20.8rem)) {
  .campaigns .campaign__summary:last-child:nth-child(4) {
    grid-column: 3/5;
  }
  .campaigns:has(:nth-child(3n+5):last-child) > :nth-last-child(2) {
    grid-column: 2/4;
  }
}
.campaigns .campaign__promo img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.campaigns-home {
  display: grid;
  width: 90vw;
  max-width: 127rem;
  margin-inline: auto;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  padding-top: 3.2rem;
  padding-bottom: 3.2rem;
  gap: 3.2rem;
}
@media only screen and (max-width: 63.8em) {
  .campaigns-home {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .campaigns-home > *:last-child {
    display: none;
  }
}
@media only screen and (max-width: 37.5em) {
  .campaigns-home {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .campaigns-home > *:last-child {
    display: flex;
  }
}
.campaigns-home .campaign__promo img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.campaign__summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 2.4rem;
  text-align: center;
  background-color: var(--color-white);
  border-radius: 1.6rem;
  overflow: clip;
}
.campaign__summary--completed {
  filter: grayscale(100%);
  opacity: 0.8;
}

.steps {
  margin: 0 auto;
  display: flex;
  justify-content: left;
  max-width: 130rem;
  padding-left: 3.2rem;
}
.steps .step {
  width: 3.2rem;
  height: 3.2rem;
  font-size: 1.6rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50rem;
  position: relative;
}
.steps .step:not(:first-child) {
  margin-left: 6rem;
}
.steps .step:not(:first-child)::before {
  position: absolute;
  content: "";
  width: 6rem;
  height: 1px;
  left: -6rem;
  background-image: linear-gradient(to right, transparent 25%, var(--color-bg-disable) 25%, var(--color-bg-disable) 75%, transparent 75%);
  background-size: 1.2rem 1px;
  background-repeat: repeat-x;
}
.steps .step__active {
  background-color: var(--color-icons);
  color: var(--color-white);
}
.steps .step__not-active {
  background-color: var(--color-bg-disable);
  color: var(color-text-disable);
}

.form__group {
  margin-top: 1.6rem;
}
.form__group-2 {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 1.6rem;
}
@media only screen and (max-width: 37.5em) {
  .form__group-2 {
    flex-direction: column;
  }
}
.form__group-center {
  align-self: center;
  width: 50%;
}
@media only screen and (max-width: 37.5em) {
  .form__group-center {
    width: 90%;
  }
}
.form__input-group {
  display: flex;
  flex-direction: column;
}
.form__input-group .large {
  font-size: 2.4rem;
}
.form__input {
  font-size: 1.6rem;
  padding: 1.6rem;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 0.6rem;
}
.form__input:focus {
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 0.25rem rgba(var(--color-secondary-rgb), 0.25);
}
.form__input:focus-visible {
  outline: none;
}
.form__input--error {
  border: 1px solid var(--color-error);
}
.form__error {
  font-size: 1.3rem;
  color: var(--color-error);
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
  animation-name: error;
  animation-duration: 0.5s;
  animation-timing-function: ease-in-out;
}
.form__input-label {
  font-size: 1.3rem;
  color: var(--color-text);
  margin-bottom: 0.2rem;
}
.form__input-label-error {
  color: var(--color-error);
}
.form__select-group {
  display: flex;
  flex-direction: column;
}
.form__select {
  font-size: 1.3rem;
  padding: 1.6rem;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 0.6rem;
}
.form__select:focus {
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 0.25rem rgba(var(--color-secondary-rgb), 0.25);
}
.form__select:focus-visible {
  outline: none;
}
.form__textarea-group {
  display: flex;
  flex-direction: column;
}
.form__textarea {
  resize: none;
  width: 100%;
  font-size: 1.6rem;
  padding: 1.6rem;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 0.6rem;
}
.form__textarea:focus {
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 0.25rem rgba(var(--color-secondary-rgb), 0.25);
}
.form__textarea:focus-visible {
  outline: none;
}
.form__textarea-label {
  font-size: 1.3rem;
  color: var(--color-text);
  font-size: 1.3rem;
  margin-bottom: 0.2rem;
}
.form__radio-group:not(:last-child) {
  margin-bottom: 1.5rem;
}
.form__button {
  display: flex;
  justify-content: center;
  margin-top: 5rem;
}
.form__radio-label {
  font-size: 1.6rem;
  position: relative;
  padding-left: 2.8rem;
  color: var(--color-text);
}
.form__radio-button {
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  width: 2rem;
  height: 2rem;
  border: 2px solid var(--color-icons);
  border-radius: 50%;
}
.form__radio-button::after {
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  background-color: var(--color-icons);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}
.form__radio-input {
  display: none;
}
.form__radio-input:checked ~ .form__radio-label .form__radio-button::after {
  opacity: 1;
}
.form__radio-button {
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  width: 2rem;
  height: 2rem;
  border: 2px solid var(--color-icons);
  border-radius: 50%;
}
.form__radio-button::after {
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  background-color: var(--color-icons);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}
.form__radio-input {
  display: none;
}
.form__radio-input:checked ~ .form__radio-label .form__radio-button::after {
  opacity: 1;
}
.form__card-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.form__radio-card-group {
  width: 49%;
  display: flex;
  align-items: center;
  flex-direction: column;
  border-radius: 0.8rem;
  padding: 8rem 2.4rem;
  border: 1px solid var(--color-border);
  margin-bottom: 1.4rem;
}
@media only screen and (max-width: 37.5em) {
  .form__radio-card-group {
    width: 100%;
    padding: 2.4rem 2.4rem;
  }
}
.form__radio-card {
  text-align: center;
  font-size: 1.3rem;
  margin: 1.2rem 0;
}
.form__radio-card-label {
  width: 13rem;
  display: flex;
  align-items: center;
  padding: 1.2rem 2.4rem 1.2rem 5.2rem;
  font-size: 1.6rem;
  position: relative;
  color: var(--color-secondary);
  background-color: var(--color-white);
  border-radius: 50rem;
  border: 1px solid var(--color-secondary);
  cursor: pointer;
}
.form__radio-card-button {
  display: inline-block;
  position: absolute;
  left: 2.4rem;
  top: 1.6rem;
  width: 2rem;
  height: 2rem;
  border: 2px solid var(--color-secondary);
  border-radius: 0.3rem;
}
.form__radio-card-button::after {
  content: "";
  display: block;
  width: 2rem;
  height: 2rem;
  background-color: var(--color-white);
  mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI3LjAuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAyNSAyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjUgMjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7fQo8L3N0eWxlPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMTEuMSwxMy45bDUtNi43bDAsMGMwLjQtMC42LDEuMy0wLjcsMS45LTAuM3MwLjcsMS4zLDAuMywxLjlsLTYuMSw4Yy0wLjMsMC4zLTAuNiwwLjUtMS4xLDAuNQoJYy0wLjQsMC0wLjgtMC4yLTEuMS0wLjVsLTMuMi00LjFjLTAuNS0wLjYtMC4zLTEuNCwwLjItMS45YzAuNi0wLjUsMS40LTAuMywxLjksMC4yTDExLjEsMTMuOXoiLz4KPC9zdmc+");
  -webkit-mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI3LjAuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAyNSAyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjUgMjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7fQo8L3N0eWxlPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMTEuMSwxMy45bDUtNi43bDAsMGMwLjQtMC42LDEuMy0wLjcsMS45LTAuM3MwLjcsMS4zLDAuMywxLjlsLTYuMSw4Yy0wLjMsMC4zLTAuNiwwLjUtMS4xLDAuNQoJYy0wLjQsMC0wLjgtMC4yLTEuMS0wLjVsLTMuMi00LjFjLTAuNS0wLjYtMC4zLTEuNCwwLjItMS45YzAuNi0wLjUsMS40LTAuMywxLjksMC4yTDExLjEsMTMuOXoiLz4KPC9zdmc+");
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}
.form__radio-input {
  display: none;
}
.form__radio-input:checked ~ .form__radio-card-label {
  color: var(--color-white);
  background-color: var(--color-secondary);
}
.form__radio-input:checked ~ .form__radio-card-label .form__radio-card-button {
  border: 2px solid var(--color-white);
}
.form__radio-input:checked ~ .form__radio-card-label .form__radio-card-button::after {
  opacity: 1;
}
.form__radio-input:checked ~ .more-options {
  display: block;
}
.form__check-group:not(:last-child) {
  margin-bottom: 1.5rem;
}
.form__button {
  display: flex;
  justify-content: center;
  margin-top: 5rem;
}
@media only screen and (max-width: 37.5em) {
  .form__button {
    margin-top: 0;
  }
}
.form__check-label {
  font-size: 1.6rem;
  position: relative;
  padding-left: 2.8rem;
  color: var(--color-text);
}
.form__check-button {
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  width: 2rem;
  height: 2rem;
  border: 2px solid var(--color-icons);
  border-radius: 0.3rem;
}
.form__check-button::after {
  content: "";
  display: block;
  width: 2rem;
  height: 2rem;
  background-color: var(--color-icons);
  mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI3LjAuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAyNSAyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjUgMjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7fQo8L3N0eWxlPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMTEuMSwxMy45bDUtNi43bDAsMGMwLjQtMC42LDEuMy0wLjcsMS45LTAuM3MwLjcsMS4zLDAuMywxLjlsLTYuMSw4Yy0wLjMsMC4zLTAuNiwwLjUtMS4xLDAuNQoJYy0wLjQsMC0wLjgtMC4yLTEuMS0wLjVsLTMuMi00LjFjLTAuNS0wLjYtMC4zLTEuNCwwLjItMS45YzAuNi0wLjUsMS40LTAuMywxLjksMC4yTDExLjEsMTMuOXoiLz4KPC9zdmc+");
  -webkit-mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI3LjAuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAyNSAyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjUgMjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7fQo8L3N0eWxlPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMTEuMSwxMy45bDUtNi43bDAsMGMwLjQtMC42LDEuMy0wLjcsMS45LTAuM3MwLjcsMS4zLDAuMywxLjlsLTYuMSw4Yy0wLjMsMC4zLTAuNiwwLjUtMS4xLDAuNQoJYy0wLjQsMC0wLjgtMC4yLTEuMS0wLjVsLTMuMi00LjFjLTAuNS0wLjYtMC4zLTEuNCwwLjItMS45YzAuNi0wLjUsMS40LTAuMywxLjksMC4yTDExLjEsMTMuOXoiLz4KPC9zdmc+");
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}
.form__check-input {
  display: none;
}
.form__check-input:checked ~ .form__check-label .form__check-button::after {
  opacity: 1;
}
.form__check-input:checked ~ .more-options {
  display: block;
}
.form__info {
  margin-top: 0.2rem;
  margin-left: 2.8rem;
  font-size: 1.3rem;
  line-height: 2rem;
}
.form:first-child {
  margin-top: 2rem;
}
.form__select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-size: 1.6rem;
  padding: 1.6rem;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 0.6rem;
  background-repeat: no-repeat;
  background-size: 2.4rem 2.4rem;
  background-image: url(/../assets/dropdown.svg);
  background-position: right 0.75rem center;
}
.form__select:focus {
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 0.25rem rgba(var(--color-secondary-rgb), 0.25);
}
.form__select:focus-visible {
  outline: none;
}

.more-options {
  display: none;
}

.one-of-two {
  width: calc(50% - 0.9rem);
}
@media only screen and (max-width: 37.5em) {
  .one-of-two {
    width: 100%;
    margin-bottom: 1rem;
  }
}

.more {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.more__link {
  font-size: 1.4rem;
  color: var(--color-primary);
}
.more__link:hover {
  color: var(--color-primary-hover);
}

.welcome {
  background-color: var(--color-white);
  border-radius: 1.5rem;
  width: 90vw;
  max-width: 127rem;
  padding: 4rem;
  margin: 4rem auto;
  box-shadow: 0 0.1rem 0.3rem rgba(0, 81, 75, 0.1);
}

.impact__top {
  width: 100vw;
  height: 52.4rem;
  background-image: linear-gradient(3deg, rgba(27, 61, 74, 0.64), rgba(56, 95, 108, 0.64)), linear-gradient(to right bottom, rgba(0, 0, 0, 0), rgba(0, 12, 21, 0.56)), url(/../assets/main.jpg);
  background-position: center;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}
.impact__top--text {
  width: 64%;
  text-align: center;
  font-size: 5.2rem;
  line-height: 6.4rem;
  color: var(--color-white);
}
@media only screen and (max-width: 37.5em) {
  .impact__top--text {
    width: 80%;
    font-size: 4.2rem;
    line-height: 5.4rem;
  }
}

.stories {
  display: flex;
  flex-direction: column;
  max-width: 130rem;
  align-content: center;
  margin: 7rem auto;
}
@media only screen and (max-width: 63.8em) {
  .stories {
    max-width: 90vw;
  }
}
@media only screen and (max-width: 37.5em) {
  .stories {
    width: 100vw;
    justify-content: center;
  }
}
.stories__heading {
  margin: 0 2rem;
}
@media only screen and (max-width: 63.8em) {
  .stories__heading {
    align-self: center;
  }
}
.stories__more {
  font-size: 1.9rem;
  margin: 0 2rem 0.6rem 2rem;
}
@media only screen and (max-width: 63.8em) {
  .stories__more {
    align-self: center;
  }
}
.stories__main {
  display: flex;
  flex-wrap: wrap;
}
@media only screen and (max-width: 63.8em) {
  .stories__main {
    justify-content: center;
  }
}
.stories__main .story {
  width: 30%;
  margin: 1.8rem;
}
@media only screen and (max-width: 63.8em) {
  .stories__main .story {
    width: 44%;
    justify-content: center;
  }
}
@media only screen and (max-width: 37.5em) {
  .stories__main .story {
    width: 80%;
    justify-content: center;
  }
}
.stories__main .story__image {
  border-radius: 0.5rem;
  height: 28rem;
  background-image: url(/../assets/blog.jpg);
  background-position: center;
  background-size: cover;
}
.stories__main .story__date {
  font-size: 1.3rem;
  color: var(--color-text);
  margin-top: 1.2rem;
}
.stories__main .story__header {
  margin: 0.8rem 0;
}
.stories__main .story__preview {
  margin: 0;
  font-size: 1.3rem;
  line-height: 2rem;
  overflow: hidden;
}
.stories__main .story__more {
  color: var(--color-primary);
  font-size: 1.6rem;
  margin-top: 0.8rem;
}

.profile__container {
  background-color: var(--color-white);
  border-radius: 1.5rem;
  width: 90vw;
  max-width: 127rem;
  padding: 4rem;
  margin: 4rem auto;
  box-shadow: 0 0.1rem 0.3rem rgba(0, 81, 75, 0.1);
  display: flex;
  flex-direction: row;
}
@media only screen and (max-width: 63.8em) {
  .profile__container {
    flex-direction: column;
  }
}
@media only screen and (max-width: 63.8em) {
  .profile__container .heading-h2 {
    text-align: center;
    margin-top: 5rem;
  }
}
.profile__container__info {
  width: 100%;
}
.profile__card {
  margin-right: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.profile__photo {
  background-image: url(/../assets/photo.jpg);
  background-position: center;
  background-size: cover;
  width: 27rem;
  height: 27rem;
  border-radius: 1000px;
}
.profile__name {
  font-size: 1.9rem;
  color: var(--color-secondary);
  font-weight: bold;
  margin-top: 1.6rem;
}
.profile__category {
  margin-top: 0;
  color: var(--color-primary);
}

.donors {
  margin: 4rem auto;
  display: flex;
  justify-content: center;
  max-width: 130rem;
  flex-wrap: wrap;
}
.donors__top {
  height: 12rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 5rem;
}
.donors__header {
  font-size: 2.8rem;
  line-height: 3.6rem;
}
.donors__subheader {
  font-size: 1.6rem;
  line-height: 2.4rem;
  margin-top: 0;
}

.header-divider {
  background-color: var(--color-secondary);
  height: 5rem;
}

.donor {
  width: 28.2rem;
  border-radius: 1.6rem;
  display: flex;
  text-align: center;
  background-color: var(--color-white);
  flex-direction: column;
  align-items: center;
  margin: 1.6rem;
}
.donor__top {
  display: flex;
  align-items: center;
}
.donor__photo {
  background-image: url(/../assets/photo.jpg);
  background-position: center;
  background-size: cover;
  width: 28.2rem;
  height: 21.6rem;
  border-radius: 1.6rem;
}
.donor__name {
  font-size: 1.9rem;
  margin: 1.6rem 1.6rem 1.2rem 1.6rem;
}
.donor__info-short {
  font-size: 1.6rem;
  line-height: 2.4rem;
  height: 7.2rem;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 1.6rem;
  text-align: center;
}
.donor__more {
  font-size: 1.6rem;
  margin-top: 1.6rem;
  margin-bottom: 3.2rem;
}
.donor__more:link, .donor__more:visited {
  color: var(--color-primary);
  text-decoration: none;
}
.donor__more:hover {
  color: var(--color-secondary);
  text-decoration: underline;
}

.pagination {
  display: flex;
  justify-content: center;
}

.story__top {
  width: 100vw;
  height: 52.4rem;
  background-image: linear-gradient(3deg, rgba(27, 61, 74, 0.64), rgba(56, 95, 108, 0.64)), linear-gradient(to right bottom, rgba(0, 0, 0, 0), rgba(0, 12, 21, 0.56)), url(/../assets/blog.jpg);
  background-position: center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}
.story__top--header {
  width: 64%;
  text-align: center;
  font-size: 5.2rem;
  line-height: 6.4rem;
  color: var(--color-white);
}
@media only screen and (max-width: 37.5em) {
  .story__top--header {
    width: 80%;
    font-size: 4.2rem;
    line-height: 5.4rem;
  }
}
.story__top--subheader {
  width: 64%;
  font-size: 1.9rem;
  line-height: 2.8rem;
  color: var(--color-white);
  margin-top: 1.3rem;
  text-align: center;
}
.story__back {
  position: absolute;
  top: 2rem;
  left: 11.5rem;
}
@media only screen and (max-width: 63.8em) {
  .story__back {
    left: 5rem;
  }
}
.story__main {
  display: flex;
  margin-bottom: 4rem;
  margin-top: 1.6rem;
}
@media only screen and (max-width: 37.5em) {
  .story__main {
    flex-direction: column;
    width: 80%;
    margin: 1.6rem auto 4rem auto;
  }
}
.story__main--date {
  width: 20%;
  font-size: 1.3rem;
  text-align: center;
  padding-right: 1.5rem;
  margin-top: 2.4rem;
}
@media only screen and (max-width: 63.8em) {
  .story__main--date {
    width: 15%;
  }
}
@media only screen and (max-width: 37.5em) {
  .story__main--date {
    width: 100%;
    text-align: left;
  }
}
.story__main--text {
  width: 60%;
}
@media only screen and (max-width: 63.8em) {
  .story__main--text {
    width: 70%;
  }
}
@media only screen and (max-width: 37.5em) {
  .story__main--text {
    width: 100%;
    text-align: left;
  }
}

.unsubscribe__top {
  margin: 4rem auto;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.unsubscribe__message {
  width: 70%;
  margin-bottom: 4rem;
  text-align: center;
}
@media only screen and (max-width: 37.5em) {
  .unsubscribe__message {
    width: 95%;
  }
}
.unsubscribe__copyright {
  text-align: center;
  font-size: 1.6rem;
  color: var(--color-text);
}
.unsubscribe .social {
  justify-content: center;
  display: flex;
  list-style: none;
}
.unsubscribe .social__item:not(:last-child) {
  margin-right: 3.2rem;
}
.unsubscribe .social__icon {
  height: 2.4rem;
  width: 2.4rem;
  fill: var(--color-icons);
  transition: all 0.1s;
}
.unsubscribe .social__icon:hover {
  fill: var(--color-accent);
  transform: translateY(-1px);
}

.confirmation {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.wall {
  background-color: var(--color-secondary);
  display: flex;
  justify-content: center;
  flex-direction: column;
}
@media only screen and (max-width: 37.5em) {
  .wall {
    align-items: center;
  }
}
.wall-donors__heading {
  font-size: 1.9rem;
  padding-bottom: 0.8rem;
}
.wall-donors__subheading {
  font-size: 1.3rem;
  margin-top: 0;
}
.wall-donors__results {
  font-size: 1.6rem;
  margin-top: 1.6rem;
}
.wall-donors__donor {
  display: flex;
  align-items: flex-start;
  margin-top: 1.1rem;
  gap: 2rem;
}
.wall-donors__donor:hover {
  text-decoration: none;
}
.wall-donors__donor:last-of-type {
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--color-muted);
}
.wall-donors__donor--photo {
  width: 4.3rem;
  height: 4.3rem;
  border-radius: 100rem;
  border: 1px solid var(--color-muted);
  background: url(/../assets/photo.jpg);
  background-position: center;
  background-size: cover;
}
.wall-donors__donor--name {
  flex-grow: 3;
  font-size: 1.3rem;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
}
.wall-donors__donor--cathegory {
  display: block;
  font-size: 1.1rem;
  color: var(--color-menu);
}
.wall-donors__donor:hover .wall-donors__donor--cathegory {
  text-decoration: none;
}
.wall-donors__donor--amount {
  font-size: 1.3rem;
  font-weight: bold;
  color: var(--color-text);
}

.map {
  width: 60%;
  height: 40rem;
  margin: 5rem auto 1rem auto;
}
@media only screen and (max-width: 63.8em) {
  .map {
    width: 90%;
    height: 40rem;
    margin: 3rem auto 1rem auto;
  }
}
@media only screen and (max-width: 37.5em) {
  .map {
    width: 90%;
    height: 30rem;
    margin: 3rem auto 0 auto;
  }
}

.hide {
  display: none;
}

.visible-of {
  transform: scaleY(0);
  transform-origin: top;
}

.mt-0 {
  margin-top: 0;
}

.mb-0 {
  margin-bottom: 0;
}

.my-0 {
  margin-block: 0;
}

.mb-7 {
  margin-bottom: 7rem;
}

.mb-4 {
  margin-bottom: 4rem;
}

.mb-2 {
  margin-bottom: 2rem;
}

.mb-3 {
  margin-bottom: 3rem;
}

.mt-7 {
  margin-top: 7rem;
}

.mt-4 {
  margin-top: 4rem;
}

.mt-2 {
  margin-top: 2rem;
}

.mt-1 {
  margin-top: 1rem;
}

.ml-1 {
  margin-left: 1rem;
}

.t-center {
  text-align: center;
}

.pb-1 {
  padding-bottom: 0.8rem;
}

.p-2 {
  padding: 3.2rem;
}
@media only screen and (max-width: 37.5em) {
  .p-2 {
    padding: 1.8rem;
  }
}

.pb-2 {
  padding-bottom: 1.8rem;
}

.py-4 {
  padding: 3.2rem 0;
}

.pt-4 {
  padding-top: 3.2rem;
}

.pb-4 {
  padding-bottom: 3.2rem;
}

.border-left {
  border-left: 1px solid var(--color-border);
}
@media only screen and (max-width: 37.5em) {
  .border-left {
    margin-top: 3.2rem;
    padding-top: 3.2rem;
    border-left: none;
    border-top: 1px solid var(--color-border);
  }
}

.min-height {
  min-height: calc(100vh - 49.2rem);
}
@media only screen and (max-width: 63.8em) {
  .min-height {
    min-height: calc(100vh - 66.2rem);
  }
}

svg {
  touch-action: none;
}

image, text, .jvm-zoomin, .jvm-zoomout {
  user-select: none;
}

.jvm-tooltip {
  border-radius: 3px;
  background-color: white;
  font-family: sans-serif, Verdana;
  font-size: smaller;
  box-shadow: 1px 2px 12px rgba(248, 239, 239, 0.2);
  padding: 3px 5px;
  white-space: nowrap;
  position: absolute;
  display: none;
  color: black;
}
.jvm-tooltip.active {
  display: block;
}

.jvm-zoom-btn {
  border-radius: 3px;
  background-color: #292929;
  padding: 3px;
  box-sizing: border-box;
  position: absolute;
  line-height: 10px;
  cursor: pointer;
  color: #FFF;
  height: 15px;
  width: 15px;
  left: 10px;
}
.jvm-zoom-btn.jvm-zoomout {
  top: 30px;
}
.jvm-zoom-btn.jvm-zoomin {
  top: 10px;
}

.jvm-series-container {
  right: 15px;
  position: absolute;
}
.jvm-series-container.jvm-series-h {
  bottom: 15px;
}
.jvm-series-container.jvm-series-v {
  top: 15px;
}
.jvm-series-container .jvm-legend {
  background-color: #FFF;
  border: 1px solid #e5e7eb;
  margin-left: 0.75rem;
  border-radius: 0.25rem;
  border-color: #e5e7eb;
  padding: 0.6rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  float: left;
}
.jvm-series-container .jvm-legend .jvm-legend-title {
  line-height: 1;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 0.5rem;
  margin-bottom: 0.575rem;
  text-align: left;
}
.jvm-series-container .jvm-legend .jvm-legend-inner {
  overflow: hidden;
}
.jvm-series-container .jvm-legend .jvm-legend-inner .jvm-legend-tick {
  overflow: hidden;
  min-width: 40px;
}
.jvm-series-container .jvm-legend .jvm-legend-inner .jvm-legend-tick:not(:first-child) {
  margin-top: 0.575rem;
}
.jvm-series-container .jvm-legend .jvm-legend-inner .jvm-legend-tick .jvm-legend-tick-sample {
  border-radius: 4px;
  margin-right: 0.65rem;
  height: 16px;
  width: 16px;
  float: left;
}
.jvm-series-container .jvm-legend .jvm-legend-inner .jvm-legend-tick .jvm-legend-tick-text {
  font-size: 12px;
  text-align: center;
  float: left;
}

.jvm-line[animation=true] {
  -webkit-animation: jvm-line-animation 10s linear forwards infinite;
  animation: jvm-line-animation 10s linear forwards infinite;
}
@keyframes jvm-line-animation {
  from {
    stroke-dashoffset: 250;
  }
}