@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Roboto+Slab:wght@100..900&display=swap');

body, html { margin: 0; padding: 0; font-weight: 300; font-size: 1.2rem; color: #131719; font-family: "Lato", sans-serif; max-width: 100%; scroll-behavior: smooth; }

.actionaid-logo { background-color: currentColor; mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 276 37' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.204 30.2351C10.5183 30.2351 9.24302 29.5975 9.24302 27.9778C9.24302 25.9118 10.072 25.0318 14.0637 25.0318H18.234C23.4373 25.0318 23.9729 25.7205 23.9729 27.5825C23.9729 29.2531 23.3863 30.2351 16.9077 30.2351H14.204ZM0.11175 28.9981C0.11175 34.89 3.79741 36.1654 9.53634 36.1143H15.9639C20.6826 36.1143 21.6646 35.566 24.2662 32.875V35.719H33.2062V19.2674C33.2062 13.3755 29.7629 10.2764 23.2843 10.2764H12.3293C4.37131 10.2764 1.02998 11.3987 1.02998 18.1834H10.1612C10.2633 16.4235 11.0412 16.1684 13.7959 16.1684H19.3435C23.0292 16.1684 23.7689 17.0484 23.7689 19.5097V21.7288C21.9579 19.8668 19.1012 19.7138 13.9489 19.7138C4.80492 19.7138 0.098999 20.1091 0.098999 26.9321V28.9981H0.11175Z' fill='white' /%3E%3Cpath d='M36.1395 21.8308C36.1395 12.3425 40.8581 10.2892 47.7321 10.2892H58.3427C65.3187 10.2892 69.591 12.8398 69.591 18.5915V20.8488H60.447C60.447 18.2982 59.1207 17.3672 55.0014 17.3672H51.3667C47.4388 17.3672 45.5768 18.4512 45.5768 21.1932V24.5345C45.5768 27.7738 47.6428 28.7558 50.5888 28.7558H55.3967C58.0494 28.7558 60.4598 28.1691 60.4598 25.8608V25.2742H69.6038V27.4805C69.6038 34.2141 64.0051 36.1271 58.5978 36.1271H48.9691C42.7328 36.1271 36.1522 34.9411 36.1522 24.2412V21.8308H36.1395Z' fill='white' /%3E%3Cpath d='M76.6562 17.4565H71.9375V10.6846H76.6562V4.79259H86.0808V10.6846H100.721V17.4565H86.0935V27.0851C86.0935 28.9471 87.4709 29.3424 89.7282 29.3424C92.7762 29.3424 93.6051 28.6538 93.6051 26.3454V24.6748H101.856V27.7228C101.856 32.4925 98.7064 36.1271 91.1948 36.1271H87.4709C81.6809 36.1271 76.6689 34.3162 76.6689 27.3784V17.4565H76.6562Z' fill='white' /%3E%3Cpath d='M127.465 22.0349C127.465 18.4512 129.569 17.3672 133.892 17.3672H136.15C142.246 17.3672 143.419 18.1579 143.419 21.4992V24.9426C143.419 28.2839 142.246 29.0746 136.15 29.0746H133.892C129.569 29.0746 127.465 27.9906 127.465 24.407V22.0349ZM118.027 26.2052C118.027 34.4564 123.575 36.1271 128.396 36.1271H142.488C147.296 36.1271 152.856 34.4564 152.856 26.2052V20.2112C152.856 11.9599 147.296 10.2892 142.488 10.2892H128.396C123.575 10.2892 118.027 11.9599 118.027 20.2112V26.2052Z' fill='white' /%3E%3Cpath d='M156.274 10.6845H165.712V14.7146H165.801C167.472 11.2329 170.762 10.2892 175.825 10.2892C181.666 10.2892 189.828 10.5315 189.828 21.3462V35.7445H180.39V21.3462C180.39 18.8848 178.426 17.6605 174.294 17.6605H172.139C168.109 17.6605 165.712 19.5225 165.712 23.1189V35.7445H156.274V10.6845Z' fill='white' /%3E%3Cpath d='M206.879 30.2351C203.193 30.2351 201.918 29.5975 201.918 27.9778C201.918 25.9118 202.76 25.0318 206.726 25.0318H210.896C216.099 25.0318 216.648 25.7205 216.648 27.5825C216.648 29.2531 216.061 30.2351 209.57 30.2351H206.879ZM192.787 28.9981C192.787 34.89 196.472 36.1654 202.224 36.1143H208.652C213.37 36.1143 214.352 35.566 216.954 32.875V35.719H225.894V19.2674C225.894 13.3755 222.463 10.2764 215.972 10.2764H205.017C197.059 10.2764 193.718 11.3987 193.718 18.1834H202.849C202.938 16.4235 203.729 16.1684 206.484 16.1684H212.031C215.717 16.1684 216.456 17.0484 216.456 19.5097V21.7288C214.646 19.8668 211.789 19.7138 206.624 19.7138C197.493 19.7138 192.774 20.1091 192.774 26.9321V28.9981H192.787Z' fill='white' /%3E%3Cpath d='M238.698 35.7318H229.273V10.6845H238.698V35.7318ZM238.698 7.53451H229.273V0.163177H238.698V7.53451Z' fill='white' /%3E%3Cpath d='M250.813 21.7288C250.813 18.9231 251.26 17.3545 255.774 17.3545H261.322C265.059 17.3545 267.023 18.1834 267.023 21.9711V24.4197C267.023 28.2074 265.059 29.0364 261.322 29.0364H255.774C251.26 29.0364 250.813 27.4677 250.813 24.662V21.7288ZM241.682 25.4655C241.682 31.8548 243.162 36.1271 255.086 36.1271H257.84C263.528 36.1271 265.888 34.2014 266.921 31.1151H267.023V35.7318H275.861V0.175949H266.423V15.3012H266.334C265.747 11.3732 261.768 10.2892 257.879 10.2892H255.073C243.136 10.2892 241.669 14.5615 241.669 20.9509V25.4655H241.682Z' fill='white' /%3E%3Cpath d='M114.571 10.608H105.325V25.2104H114.571V10.608Z' fill='white' /%3E%3Cpath d='M114.546 28.3732H105.3V35.566H114.546V28.3732Z' fill='white' /%3E%3C/svg%3E");
	mask-size: contain;
   	mask-repeat: no-repeat;
    mask-position: center;
	background-color: #f00;
}
	.actionaid-red { color: #f00; }
	.logo-header { height: 4rem; float: left; }

    .topnav { width: fit-content; float: right; }
	.topnav a.menu_item { text-decoration: none; font-size: 1rem; color: #212121; margin-right: 1rem; font-weight: 500; }
	.topnav a.menu_item:hover { color: #f00; }

header { display: block; width: -webkit-fill-available; height: 4rem; padding: 0 5vw; position: fixed; z-index: 999; top: 0; left: 0; background: #fff; align-content: center; box-shadow: 0 0 10px rgba(29,23,25,0.3); }

#background::before {
    content: "";
    position: fixed;
    top: 4rem;
    left: 0;
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(rgba(19, 23, 25, 0), rgba(19, 23, 25, 0), rgba(19, 23, 25, 1)), url(../img/hero.jpg);
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    z-index: -1;
	background-color: #212121;
}
	
h1, h2, h3, h4 { font-family: 'Roboto', sans-serif; font-weight: 800; text-align: left; font-size: 1.3rem; display: grid; }
#title h1, #title h2 {
		color: #fff;
		width: -webkit-fill-available; /* 25% */
		padding: 1rem 1rem;
}
#title h1 {
		font-weight: 600;
		margin-bottom: 1rem;
		font-size: 1.8rem;
}
#title h2 {
	margin-top: 1rem;
	font-size: 1.2rem;
	font-weight: 400;
	line-height: 1.6rem;
}
#title hr { width: 10%; margin: 0 auto 0 1rem; border: 1px solid #f00; }

.content_block h3 { text-transform: uppercase; font-size: 1.5rem; }

strong { font-weight: 400; }

.red { color: #f00; }
.redleftbar { border-left: 2px solid #f00; padding-left: 2rem; }
.obs { font-size: 0.9rem; }
.secure { font-size: 0.9rem; display: inline-flex; }
.secure::before {  content: "";
  width: 0.9rem;
  height: 0.9rem;
  background-color: currentColor; /* herda a cor do texto */
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M256 160L256 224L384 224L384 160C384 124.7 355.3 96 320 96C284.7 96 256 124.7 256 160zM192 224L192 160C192 89.3 249.3 32 320 32C390.7 32 448 89.3 448 160L448 224C483.3 224 512 252.7 512 288L512 512C512 547.3 483.3 576 448 576L192 576C156.7 576 128 547.3 128 288L128 288C128 252.7 156.7 224 192 224z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M256 160L256 224L384 224L384 160C384 124.7 355.3 96 320 96C284.7 96 256 124.7 256 160zM192 224L192 160C192 89.3 249.3 32 320 32C390.7 32 448 89.3 448 160L448 224C483.3 224 512 252.7 512 288L512 512C512 547.3 483.3 576 448 576L192 576C156.7 576 128 547.3 128 288L128 288C128 252.7 156.7 224 192 224z'/%3E%3C/svg%3E");
  margin-right: 0.5rem;
  align-self: anchor-center;
  display: inline-flex;
} 

.button_donations { display: inline-block; width: fit-content; height: fit-content; padding: 0.6rem 1.4rem; border: 1px solid #ff0000; background: #f00; margin: 0.6rem 0; font-size: 1rem; font-weight: 800; color: #fff; text-transform: uppercase; text-align: center; border-radius: 0.5rem; text-decoration: none; }
	.button_donations:hover { background: #fff; color: #f00; cursor: pointer; }

.donate_form { width: 96%; background: rgba(255,255,255,1); border-radius: 0.5rem; text-align: center; padding: 0.8rem 2%; }
.donate_form .button_donations { width: -webkit-fill-available; font-size: 1.4rem; padding: 0.8rem auto;   }
.donation_steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0rem; margin: 1rem auto 0.5rem; }
.donation_step { font-size: 0.8rem; font-weight: 400; color: #948576; background-image: url(../img/steps_bg.png); background-repeat: no-repeat; background-position-y: 1rem; }
.step_num { width: 1.4rem; height: 1.4rem; padding: 0.2rem; font-size: 1rem; font-weight: 800; border-radius: 100%; border: 1px solid #948576; margin-bottom: 0.4rem; background: #fff; outline: 0.4rem #fff solid; }
.donation_step.first { background-size: 50%; background-position-x: 100%; }
.donation_step.active { background-image: url(../img/steps_bg_active.png); }
.donation_step.last { background-position-x: 0; background-size: 50%; }
.donation_step.active .step_num { color: #fff; background: #f00; border-color: #f00; }
.payment_types { width: fit-content; margin-top: 1rem; display: grid; grid-template-columns: repeat(4, 1fr); gap:1rem; align-items: anchor-center; text-align: center; }
.payment_types img { max-width: 4rem; max-height: 1rem; margin: 0 auto; }

.content_block { width: 100%; }
	.block_contents { width: -webkit-fill-available; padding: 1rem 4vw 2rem; }
	.block1 { padding-top: 5rem; background: linear-gradient(to right, rgba(19,23,25,1), rgba(19,23,25,1) 25%, rgba(19,23,25,0.5) 40%, rgba(19,23,25,0) 50%); align-content: center; min-height: 80vh; }
	.block2 { background: #fff; color: #212121; }
	.block3 { color: #fff; background: url("../img/crysis.jpg") center; background-size: cover;  }
	.block4 { color: #212121; background: #fff; }
	.block5 { color: #212121; background: #fff; padding-top: 2rem; }
	.block6 { color: #212121; background: #fff; padding-top: 2rem; }
	.block7 { color: #212121; background: #fff; padding-top: 2rem; }
	.block8 { color: #fff; background: #d00; }
	.blockX { color:#fff; background: linear-gradient(to right, rgba(19,23,25,1), rgba(19,23,25,1) 50%, rgba(19,23,25,0) 70%); }

.block_content_col2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4rem; }
.block_content_col { display: grid; width: -webkit-fill-available;; }
.block_content_col_img { width: 100%; height: 24rem; background-size: cover; background-position: center; }

.block1 .block_content_col2 { align-items:center; }
.block1 .donate_form h4 { text-align: center; margin-bottom: 1rem; }
.block1 .donate_form p { margin-top: 0;; }

.donate_box { text-align: center; background: rgba(255,255,255,0.8); border-radius: 1rem; align-items: center; }
.donate_box h3 { font-size: 1.1rem; font-weight: 500; text-align: center; color: #f00; }
.donation_buttons { width: 70%; text-align: center; align-items: center; margin: 0 15% 1rem; }

.block2 h3 { color: #212121; }
.block2 h5 { text-align: center; }

.block2 .block_content_col2, .block3 .block_content_col2  { grid-template-columns: repeat(3, 1fr); gap:0; }
.block2 .block_content_col { align-content: baseline; }
.block2 .dstk { font-size: 2.5rem; font-weight: 800; }
.block2 .bignum { font-size: 5rem; }
.block2 p { margin-top: 0; margin-bottom: 0; }
.block2 .coldata { padding-right: 8rem; }
.block2 .borderleft { padding-left: 5rem; border-left: 1px solid #c1b6ab; margin-left: -3rem; }

.block3 h3 { color: #fff; ; }
.block3 .block_content_col { align-content: center; }
.block3 .block_contents { background: linear-gradient(to right, rgba(19,23,25,1), rgba(19,23,25,1) 30%, rgba(19,23,25,0.5) 50%) }

.block4 img { width: 100%; }
.block4 h3 { margin-bottom: 2.5rem; text-align: center; }
.block4 h5 { font-size: 1.2rem; margin-bottom: 0; }
.block4 .block_content_col2 { grid-template-columns: repeat(2, 2fr); gap: 5rem; margin: 5rem; align-content: baseline; }
.block4 .block_content_col { font-size: 1rem; font-weight: 500; text-align: center; }
.block4 .numhl { font-weight: 600; font-size: 2rem; }

.block5 h3 { margin: 0; }
.block5 .block_content_col2 { align-items: anchor-center; }

.block6 h3 { text-align: center; margin-bottom: 2rem; }
.block6 h5 { margin: 0; }
.block6 h5 .red { margin-bottom: 0.4rem; font-weight: 900; font-size: 1.3rem; }
.block6 .block_content_col2 { grid-template-columns: repeat(4, 1fr); gap:2rem; align-items: flex-start; }
.block6 .block_content_col { grid-template-columns: repeat(2, 1fr); gap: 1rem; align-items: flex-start; }


.block7 .block_content_col2 { align-content: baseline; }
.block7 .block_content_col { align-content: baseline; }
	.testimonials { display: grid; align-content: baseline; grid-template-columns: repeat(1, 1fr); gap: 1rem; }
	.testimonials p { margin-top: 0; }
	.testimonials .testimonial_photo { width: 50%; height: auto; border-radius: 0.5rem; float: inline-start; margin: 0 1rem 0.5rem 0;  }
	.testimonial { margin-right: 2rem; }
	.testimonial quote::before {
	  content: "";
	  display: inline-block;
	  width: 2rem;
	  height: 2rem;
		margin-right: 0.5rem;
	  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='white' d='M0 216C0 149.7 53.7 96 120 96l8 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-8 0c-30.9 0-56 25.1-56 56l0 8 64 0c35.3 0 64 28.7 64 64l0 64c0 35.3-28.7 64-64 64l-64 0c-35.3 0-64-28.7-64-64L0 216zm256 0c0-66.3 53.7-120 120-120l8 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-8 0c-30.9 0-56 25.1-56 56l0 8 64 0c35.3 0 64 28.7 64 64l0 64c0 35.3-28.7 64-64 64l-64 0c-35.3 0-64-28.7-64-64l0-136z'/%3E%3C/svg%3E") no-repeat center;
	  mask-size: contain;
	  background-color: #f00;
	}
	.testimonial_person {
		width: 100%;
		display: inline-grid;
		font-size: 1rem;
		font-weight: 400;
		color: #f00;
		margin-top: 0.6rem;
	}
	.testimonials .info { font-size: 1rem; margin: 0 3rem; }

.block8 h3 { margin-bottom: 0; }
.block8 .block_content_col2 { align-items: baseline; }
.block8 .button_donations { background: #fff; color: #f00; border: 1px solid #f00; width: -webkit-fill-available; }
.block8 .button_donations:hover { background: #f00; color: #fff; border: 1px solid #fff; width: -webkit-fill-available; }

.aamap { width: 100%; }
.legend { font-size: 0.9rem; }

.wedo_icon, .commitment_icon { width: -webkit-fill-available; height: fit-content; margin: 0; color: #d00; font-size: 4rem; }
.commitment_icon {font-weight: 900; text-align: end; }
.wedo_icon svg { width: 8rem; height: auto; }
.commitment_icon svg { height: 4rem; width: auto; }

footer { display: inline-block; width: -webkit-fill-available; font-weight: 300; background: #212121; color: #fff; font-size: 0.7rem; text-align: left; margin: 0 0; padding: 0.1rem 2%; }
footer a { color: #948576; text-decoration: none; }
footer a:hover { text-decoration: underline; }

#donation_footer { display: none; }

		.video-container { border-radius: 0.5rem; overflow: hidden; }
       .video-wrapper {
            width: 100%;           /* largura total do espaço disponível (pode ser qualquer % ou px) */
            max-width: 1200px;     /* limite opcional para não ficar gigante em telas muito largas */
            margin: 0 auto;        /* centraliza se quiser */
            background-color: #000; /* fundo preto durante carregamento */
            
            /* Mantém a proporção 16:9 exata (altura = largura * 9 / 16) */
            aspect-ratio: 16 / 9;
            
            /* Para navegadores antigos (fallback com padding-bottom) */
            /* position: relative;  (se usar fallback, descomente) */
        }

        /* Estilo do iframe: ocupa 100% da largura e altura da div pai */
        .video-wrapper iframe, .video-wrapper video {
            width: 100%;
            height: 100%;
            display: block;        /* remove espaçamento inline extra */
            border: none;          /* remove borda padrão */
        }

        /* Exemplo extra: você pode criar qualquer div com outra classe 
           e aplicar o mesmo conceito. Basta que a div tenha aspect-ratio e o iframe 100%/100% */

        /* Apenas para demonstrar um layout com título e rodapé */
        .video_container {
            background: #0f172a;
            border-radius: 1.5rem;
            padding: 1.5rem;
            box-shadow: 0 25px 40px -12px rgba(0,0,0,0.5);
            width: 100%;
            max-width: 1000px;
        }


    .donation-card {
      width: -webkit-fill-available;
      border-radius: 0.5rem;
      box-shadow: 0 25px 45px -12px rgba(0, 0, 0, 0.25), 0 8px 18px rgba(0, 0, 0, 0.05);
      overflow: hidden;
    }

    .highlight {
      background: #fff0f3;
      display: inline-block;
      padding: 0.2rem 0.7rem;
      border-radius: 0.5rem;
      font-size: 0.8rem;
      font-weight: 600;
      color: #c13b5e;
      margin-top: 0.8rem;
    }

    .options-grid {
      display: grid;
      gap: 1rem;
      margin-bottom: 1rem;
    }

    .option {
      position: relative;
      width: -webkit-fill-available; 
    }

    .radio-sr {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border-width: 0;
    }

    .option-card {
      display: flex;
      flex-direction: column;
      background: white;
      border-radius: 0.5rem;
      padding: 1rem 1.4rem 1rem 12rem;
      cursor: pointer;
      transition: all 0.25s cubic-bezier(0.2, 0.9, 0.4, 1.1);
      border: 1px solid #c1b6ab;
      width: -webkit-fill-available;
      position: relative;
	  color: rgba(19,23,25,0.7);
    }

    .option-card:hover {
      transform: translateY(-4px);
      border-color: #f00;
      background: rgba(255,0,0,0.01);
    }

    .radio-sr:checked + .option-card {
      border: 2px solid #f00;
      background: rgba(255,0,0,0.1);
	  color: #f00;
    }

    .radio-sr + .option-card::before {
      content: "";
      position: absolute;
	  left: 1.5rem;
      font-size: 1.3rem;
      font-weight: 800;
      width: 1.6rem;
      height: 1.6rem;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
	  border: 2px solid #c1b6ab;
    }

    .radio-sr:checked + .option-card::before {
	  width: 0.6rem;
      height: 0.6rem;
	  border: 0.6rem solid #f00;
    }

    .amount {
      font-size: 1.8rem;
      font-weight: 800;
      color: #212121;
      display: flex;
      align-items: baseline;
      flex-wrap: wrap;
      gap: 0.25rem;
	  margin-top:  -0.3rem;
    }

    .period {
      font-size: 1rem;
      font-weight: 800;
      color: #212121;
	  margin-bottom: 0.1rem;
    }

    .description {
      font-size: 0.95rem;
      color: #212121;
      font-weight: 500;
      text-align: left;
      margin: 0;
      padding: 0;
	}

	.donate_icons {
		width: 3rem;
		height: auto;
		position: absolute;
		margin-left: -6rem;
		margin-top: 0.6rem;
	}

    @media (max-width: 800px) {
      .amount { font-size: 2rem; }
      .option-card { padding: 1.4rem; }
    }


.comunity_quote { min-height: 34rem; }
.comunity_quote blockquote { margin: 0; padding: 0; font-size: 1.2rem; font-weight: 400; text-align: left; }
.quote_block { display: inline-block; }
	.comunity_quote img { position: absolute; }
.comunity_quote .sidelight { width: 15rem; height: 33.5rem; text-align: center; color: #FFF; align-content: center; }
	.sidelight1 { background-color: #713a60; clip-path: polygon(100% 0, 100% 65%, 0 100%, 0 35%);  }
	.sidelight2 { background-color: #948576; clip-path: polygon(0 0, 0 65%, 100% 100%, 100% 35%); }
.comunity_quote .quote { color: #FFF; width: 100%; height: 4rem; text-align: center; position: relative; margin-top: -29rem; }
	.quote2 {  }
.comunity_quote .quote svg { height: 100%; width: auto; }
.comunity_quote .quote_txt { display: inline-block; font-weight: 300; font-size: 1rem; padding: 0 1.5rem; }
.comunity_quote .quote_name { display: inline-block; font-size: 0.8rem; font-weight: 500; margin-top: 0.5rem;  }

.quote_block1, .quote_block2 { width: fit-content; display: inline-block; }
	.quote_block1 { float: inline-end; }
	.quote_block2 { float: inline-start; } 


#faq { }
.faq p { margin: 0 0 0.8rem; }
.accordion { font-size: 1.2rem; cursor: pointer; padding: 0.6rem; width: 100%; text-align: left; border: none; outline: none; font-weight: 400; color: #131719; transition: 0.4s; border-bottom: 1px solid rgba(193,182,171,1); background: #fff; }
.accordion:first-of-type { border-top: 1px solid rgba(193,182,171,1); }
.accordion:hover { background-color: rgba(193,182,171,0.2); }
.active { border-bottom: none; }

.panel { padding: 0 1.2rem; max-height: 0; opacity: 0; overflow: hidden; font-size: 1.2rem; font-weight: 300; transition: max-height 0.4s ease-out, opacity 0.3s ease-out; }
.panel.active { opacity: 1; border-bottom: 1px solid rgba(193,182,171,1); }

button.accordion:after { content: '+'; width: 1rem; height: 1rem; float: right; margin-left: 0.5rem; }
button.accordion.active:after { content: '-'; }

#faq li { margin-bottom: 0.8em; }
#faq a { text-decoration: underline; color: #948576; font-weight: 400; }

@media (max-width: 800px) {
	header { height: 3.5rem; font-size: 1rem; padding: 0 4vw; }
	.logo-area { max-width: 50%; } 
	.logo-header { max-width: -webkit-fill-available; margin-top: -0.2rem; }
	.button_donations { padding: 0.4rem 1rem; margin: 1rem 0; font-size: 0.7rem; }
/*	.topnav .button_donations  { display: none; } */
	.secure { font-size: 0.55rem; margin-top: 2.5rem; margin-right: -2rem; }
	#title h1, #title h2 { padding: 0.5rem; font-size: 1.3rem; max-width: 50%; }
	#title h1 { margin-top: 6rem; }
	#donate_form h2 { font-size: 1.6rem; line-height: 1.2rem; }
	#donate_form button { font-size: 1.2rem; }
	donation_footer { display: none; width: 100%; position: fixed; z-index: 998; box-shadow: 0 0 4px rgba(0,0,0,0.8); bottom: 0; left: 0; color: #fff; background: #ff0000; transition: opacity 0.3s ease; }
	donation_footer button.button_donations { width: -webkit-fill-available; font-size: 1.1rem; margin: 0; border-radius: 0; padding: 1rem; }
	footer { text-align: center; }
	#background { background: #212121; top: 3rem; }
	#background::before { background-position: left top; background-position-x: 30%; top: 3rem; }
	.comunity_quote { background-size: auto 100%; background-position: 15%; }
	.comunity_quote .sidelight { }
	.comunity_quote img { width: -webkit-fill-available; }
	.quote1 img { width: 60%; }
	.quote2 img { width: 100%; position: absolute; left: 0; }
	.block_content_col2 { grid-template-columns: repeat(1, 1fr); gap: 1rem; }
	.block2 h5 { text-align: left; }
	.block2 h3 { text-align: center; }
	.block_content_col_img { height: 20rem; }
	.block2 .block_content_col2, .block3 .block_content_col2, .block4 .block_content_col2 { grid-template-columns: repeat(1, 1fr); gap: 1rem; }
	.block2 .coldata { text-align: center; padding: 1rem; }
	.block2 .borderleft { padding: 1rem; border-left: none; border-top: 1px solid #c1b6ab; margin-left: auto; }
	.block3 { background-size: auto 100%; background-position-x: -55%; }
	.block3 p { width: 60vw; }
	.block3 .redleftbar { padding-left: 1rem; }
	.block3 .block_contents { background: linear-gradient(to right, rgba(19, 23, 25, 1), rgba(19, 23, 25, 1) 45%, rgba(19, 23, 25, 0.5) 70%); }
	.block4 .block_content_col2 .block_content_col img { width: 60%; margin: 0 20%; }
	.block4 .block_content_col2 { margin: 1rem; gap: 2rem; }
	.block4 h3 { font-size: 1.3rem; }
	.block4 h5 { margin-top: 0; }
	.block5 .block_content_col:last-of-type { order: -1; }
	.block6 .commitment_icon { text-align: center; }
	.block6 .commitment_icon svg { height: 3.5rem; }
	.block6 .block_content_col { grid-template-columns: repeat(1, 1fr); gap: 0; align-items: center; }
	.block6 .block_content_col h5 { margin-top: 0; text-align: center; }
	.block_contents { padding: 1rem 2vw 2rem; }
	.block6 .block_content_col2 { grid-template-columns: repeat(1, 1fr); gap:2rem; }
	.block7 img { width: -webkit-fill-available; }
	.block8 .button_donations { font-size: 1.4rem; }
	.map_block { order: -1; }
	.donate_icons { margin-top: 2.6rem; margin-left: 2.7rem; }
	form .amount, form .description { margin-left: 7rem; }
	.testimonials { grid-template-columns: repeat(1, 1fr); } 
	.testimonials .testimonial_photo { width: 100%; margin: 0 0 0.5rem; }
	.testimonial { margin-right: 0; }
	.testimonials .info { margin: 0; }
	.wedo_icon svg { width: 4rem; }
	h3 { text-align: center; }
	.thank_you_page #title h1 { margin-top: 0; }
	.thank_you_page .block1 { padding-top: 3rem; }
}


@media (min-width: 801px) {
	.quote_block1 img { width: 18vw; float: left;  }
	.quote_block2 img { width: 18vw; float: right; }
	.block7 img { width: -webkit-fill-available; }
	.quote2 img { width: -webkit-fill-available; }	
	    .block_contents {
        width: auto;
        margin: 0 auto;
    }
	    body {
        overflow-x: hidden;
    }
    .content_block {
        overflow-x: hidden;
    }
/*	#donate_form, */ .form-spacer { width: 30vw; }
	
	.block1 h1, .block1 h2 { max-width: 55%; }

	.thank_you_page .block1 { align-content: baseline; background: linear-gradient(to right, rgba(19,23,25,0) 50%, rgba(19,23,25,0.5) 60%, rgba(19,23,25,1) 75%, rgba(19,23,25,1) 100%); height: 100vh; }
	.thank_you_page .block_content_col2 { grid-template-columns: repeat(3, 1fr); gap:4rem; }	
	.thank_you_page #title h1, .thank_you_page #title h2 { padding: 1rem 0rem 1rem 8rem; max-width: 100%; }
}

@media (min-width: 801px) and (max-width: 1024px) {
	header { padding-left: 7vw; text-align: left; }
	.quote1 img { width: 25vw; margin-top: 2rem; }
	.quote2 img { width: 42vw; margin-top: 2rem; float: left; }	
	.topnav a.menu_item, .topnav .secure { font-size: 0.8rem; margin-right: 0.6rem; }
	header { padding: 0 4vw; }
}

@media (max-width: 1024px) {
	.comunity_quote { min-height: 42rem; }
	.quote_block1, .quote_block2 { margin-top: 8rem; }
	.nomobile { display: none; }
}
@media (min-width: 1025px) {
	.comunity_quote_img img { width: 110%; }
/*	.button_donations { width: 50%; padding: 0.8rem 2vw; } */
	.block6 .block_content_col2 { margin-left: -4vw; }
}
@media (min-width: 1280px) {
	.quote1 img { width: 25vw; margin-top: 2rem; }
	.quote2 img { width: 42vw; margin-top: 2rem; }	
}
@media (min-width: 1281px) {
	.block6 .block_content_col2 { margin-left: -6vw; }
}

.thank_you_page #background::before { background-image: url("/img/danke.jpg"); background-position-y: bottom;  }
.thank_you_page footer { position: fixed; bottom: 0; }

@media (min-width: 801px) {
	.topnav .icon {
    	display: none;
	}
}

@media screen and (max-width: 800px) {
    .topnav a:not(:first-child) {
        display: none;
    }

    .topnav a.icon {
        float: right;
        display: block;
        color: #000;
        width: 1.5rem;
        height: 1.5rem;
        margin-top: 0.5rem
    }

    .topnav.responsive {
        position: relative;
		position: relative;
        background: #fff;
        width: 50%;
        padding: 1rem;
        margin-top: -1rem;
        margin-right: -1rem;
    }

    .topnav.responsive a.icon {
        position: absolute;
        right: 0;
        top: -3.5rem;
	    width: 1.5rem;
        height: 1.5rem;
        margin-top: 0.5rem;
    }

    .topnav.responsive a,
    .topnav.responsive .secure {
        float: none;
        display: block;
        text-align: left;
        width: 100%;
        margin: 0;
        padding: 14px 16px;
    }
}