@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.1rem; color: #131719; font-family: "Lato", sans-serif; }
h1, h2, h3, h4 { margin: 0; padding: 0.4rem 0; display: inline-block; width: 100%; }
	h1 { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.05rem; }
	h2 { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02rem; color: #131719; }
	h3 { font-size: 1.2rem; letter-spacing: -0.01rem; }

a { text-decoration: none; color: #131719;  }
strong { font-weight: 600; }
strong.red { color:#ff0000; font-weight: 800; }

#background::before { content: ""; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-image: linear-gradient(rgba(19,23,25,0),rgba(19,23,25,0), rgba(19,23,25,1)), url('../emergency-middle-east-appeal/bg.jpg'); background-size: cover; background-position: center bottom; background-repeat: no-repeat; z-index: -1; }

header, donate_footer { display: block; width: 90%; padding: 0.8rem 5% 0.6rem; text-align: center; position: fixed; z-index: 998; }
	header { top: 0; left: 0; background: #fff; }
	donate_footer { bottom: 0; left: 0; color: #fff; font-weight: 800; letter-spacing: -0.01rem; background: #ff0000; }
	donate_footer:hover { background: #ffaf24; color: #131719; }

.site-logo { display: inline-block; width: fit-content; }
.site-logo svg { min-height: 1.2rem; color: #ff0000; min-width: 90px; }

container { display: inline-block; width: -webkit-fill-available; margin: 2rem 0 2rem 0; padding: 0.5rem 0.5rem; text-align: left; margin-top: 1.8rem; overflow-x: hidden; }

.spacer1 { display: inline-block; width: 100%; margin: 0; padding: 9; height: 1.5rem; }

#donations, .campaign_block { display: inline-block; background-image: linear-gradient(rgba(255,255,255,1), rgba(255,255,255,1)); width: -webkit-fill-available; padding: 1rem;  margin: 1vh 0; }
#donations { padding: 1rem; }
.campaign_block { padding: 1.5rem 2vw; }
.campaign_block img { max-width: 100%; }

#donate { display: none; }

header, .campaign_block, #donate, #donations, #ctabuttons, a.button_donations { /* box-shadow: 1px 1px 1rem rgba(19,23,25,0.6); */ }
#donations iframe { background: #FFF; }

footer { display: inline-block; width: -webkit-fill-available; font-weight: 200; background: rgba(19,23,25,1); color: #FFF; font-size: 0.7rem; text-align: center; margin: 0 0 2.9rem; padding: 0.1rem 2%; }
footer a { color: #FFF; text-decoration: none; }
footer a:hover { text-decoration: underline; }
	
#hero { margin: 40vh 0 1vh 0; padding: 0.5rem 5%; background: rgba(255,255,255,1); border-bottom: 4px #ff0000 solid; }
#subheadline {  }

#ctabuttons { text-align: center; background: none; box-shadow: none; /* box-shadow: 0 0 6rem rgba(255,255,255,1); background: rgba(255,255,255,0.4); */ }
#crisis_snapshot { background: #ece9e6; }
#crisis_snapshot::before { /* content: ''; background: rgba(192,182,171,0.9); top:0; left: 0; right: 0; bottom: 0; position: absolute; */ }
#info_box {  }
#comunity_quote { background-color: #fff; }
#reinforced_cta { background: #ffaf24; }
#supporting { /* background: rgba(253,236,221,0.98); */ }

.verification_line { display: inline-block; width: 100%; text-align: left; font-size: 0.8rem; font-weight: 600; margin: 0.8rem 0 0 0; }

a.button_donations { display: inline-block; width: 100%; padding: 0.6rem 0; border: 1px solid #ff0000; background: #fff; margin: 0.6rem 0; font-size: 1.1rem; font-weight: 800; color: #FF0000; text-transform: uppercase; text-align: center; }
	a.button_donations svg { height: 1.1rem; width: auto; margin-left: 0.2rem; }
	#info_box a.button_donations { border: none; background: #ffaf24; color: #131719; }
	a.button_donations:hover, #info_box a.button_donations:hover { background: #FF0000; color: #fff; }
	#reinforced_cta a.button_donations { background: #ff0000; color: #fff; }
	#reinforced_cta a.button_donations:hover { background: #fff; color: #ff0000; }
	#ctabuttons a.button_donations { /* box-shadow: 0 0 6rem rgba(255,255,255,1); */ }

.block_nobg { padding: 1rem 0; }
.block_nomargin { }
.txt_content1 { padding: 0 1rem; display: inline-block; }


	#supporting p { margin-top: 0.5rem; }
	#info_box ul, #supporting ul { padding: 0 0 0 1.6rem; margin-top: 0; }
	#info_box ul li, #supporting ul li { list-style: none; margin: 0.5rem 0 1.1rem;  }
		#info_box ul li::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!--! !Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc. --%3E%3Cpath fill='%23ffaf24' d='M256 0c14.7 0 28.2 8.1 35.2 21l216 400c6.7 12.4 6.4 27.4-.8 39.5S486.1 480 472 480L40 480c-14.1 0-27.2-7.4-34.4-19.5s-7.5-27.1-.8-39.5l216-400c7-12.9 20.5-21 35.2-21zm0 352a32 32 0 1 0 0 64 32 32 0 1 0 0-64zm0-192c-18.2 0-32.7 15.5-31.4 33.7l7.4 104c.9 12.5 11.4 22.3 23.9 22.3 12.6 0 23-9.7 23.9-22.3l7.4-104c1.3-18.2-13.1-33.7-31.4-33.7z'/%3E%3C/svg%3E") no-repeat; }
		#supporting ul li::before { background: url("../icon.png") no-repeat; }
	#info_box ul li::before, #supporting ul li::before { content: ''; display: inline-block; background-size: cover; width: 1.05rem; height: 1.05rem; margin: 0 0.5rem -0.2rem -1.6rem;  }

		#supporting .number_highlight { display: block; width: fit-content; height: fit-content; margin: -1rem 0 5rem; }
		#supporting .number_highlight .sidelight_title { font-size: 1.2rem; font-weight: 800; color: #fff; background: #131719; text-transform: uppercase; display: block; padding: 0.4rem 0.8rem; margin: -5.5rem 0 0 8rem; width: fit-content; z-index: 2; position: relative; white-space: nowrap; }
        #supporting .sidelight { background-color: #948576; width: 7em; height: 15.75rem; clip-path: polygon(100% 0, 100% 65%, 0 100%, 0 35%); }
		#supporting .sidelight_number, #supporting .sidelight_txt { display: inline-block; width: -webkit-fill-available; color: #131719; text-align: center; }
		#supporting .sidelight_number { margin-top: 6.5rem; font-size: 1.4rem; font-weight: 800; }
		#supporting .sidelight_txt { font-size: 1rem; font-weight: 300; }

#impact_grid { text-align: center; background: #ffffff;  }
#impact_grid h2 { font-size: 1.4rem; color: #507855; border-bottom: 2px solid #507855;  width: -webkit-fill-available; text-transform: uppercase; margin-bottom: 1rem; padding-bottom: 0.5rem; }
#impact_grid h3 { font-size: 1.4rem; text-transform: uppercase; text-align: center; margin: 1rem 0; line-height: 0.9; color: #131719; }
#impact_grid h3 sub { width: 100%; display: inline-block; text-transform: none;  }

#impact_grid ul { list-style: none; padding: 0; margin: 0; }
#impact_grid ul li { display: inline-block; width: -webkit-fill-available; padding: 1rem; margin: 0.5rem; border: 2px solid #507855; color: #507855; /* box-shadow: 1px 1px 1rem rgba(19,23,25,0.3); */ }
#impact_grid ul li:hover { background: #e1f4f1; }
#impact_grid .donation_value { width: 100%; font-size: 2rem; font-weight: 600; }
#impact_grid .donation_value sub { display: block; width: 100%; font-size: 1rem; font-weight: 300; }
#impact_grid .donation_description, #impact_grid .donation_description2 { width: 100%; font-size: 1.2rem; font-weight: 400; border-top: 1px solid #507855; display: inline-block; margin-top: 0.5rem; color: #131719; }
	#impact_grid .donation_description2 { color: #507855; font-weight: 700; }
	#impact_grid .donation_description2 sub { color: #507855; line-height: 0.5rem; font-weight: 300; }
	#impact_grid a.button_donations { background: #507855; color: #fff; border: 2px solid #507855; }
	#impact_grid a.button_donations:hover { background: #fff; color: #507855; }
#impact_grid .donate_highlight { text-align: center; font-weight: 700; color: #507855; font-size: 1.2rem; }

#comunity_quote { background: #FFF url("../emergency-middle-east-appeal/bg2.jpg") no-repeat; background-size: cover; background-position: center; text-align: left; height: 28rem; box-shadow: 0 0 8rem #fff; }

#comunity_quote blockquote { margin: 0; padding: 0; font-size: 1.2rem; font-weight: 400; text-align: left; }
#comunity_quote_img { margin-top: -2rem; margin-bottom: 0 }
#comunity_quote_img img { width: 110%; /* box-shadow: 1px 1px 1rem rgba(19,23,25,0.6); */ margin-left: -5vw; }

#comunity_quote .sidelight { margin-top: -0.5rem; background-color: #1d729e; width: 13rem; height: 29rem; clip-path: polygon(0 0, 0 65%, 100% 100%, 100% 35%); text-align: center; color: #FFF; }
#comunity_quote .quote { color: #FFF; width: auto; height: 4rem; text-align: center; position: relative; margin-top: -26rem; margin-right: 2rem; }
#comunity_quote .quote svg { height: 100%; width: auto; }
#comunity_quote .quote_txt { display: inline-block;  margin-top: 9.2rem; font-weight: 300; font-size: 1.2rem; padding: 0 1.5rem; }
#comunity_quote .quote_name { display: inline-block; font-size: 0.9rem; font-weight: 600; margin-top: 0.5rem;  }


#who_we_are strong { color: #ff0000; }
#who_we_are h2 { background: url("../icon.png") no-repeat; background-size: auto 100%;  padding-left: 3.2rem; color: #ff0000; }

#reinforced_cta { text-align: center; }

#faq { }
.accordion { font-size: 1.2rem; background-color: rgba(193,182,171,0.1); cursor: pointer; padding: 1rem 1rem; width: 100%; text-align: left; border: none; outline: none; font-weight: 400; color: #131719; transition: 0.4s; border-left: 1px solid rgba(193,182,171,0.1); }
.active, .accordion:hover { background-color: rgba(193,182,171,0.3); }
.active { border-left: 1px solid rgba(193,182,171,1); }

.panel { padding: 0 1.2rem; background-color: white; max-height: 0; opacity: 0; overflow: hidden; font-weight: 300; transition: max-height 0.4s ease-out, opacity 0.3s ease-out; }
.panel.active { opacity: 1; }

button.accordion:after { content: ''; width: 1rem; height: 1rem; float: right; margin-left: 0.5rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! !Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc. --%3E%3Cpath fill='%23c1b6ab' d='M201.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 338.7 54.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E") no-repeat; }
button.accordion.active:after { content: ''; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! !Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc. --%3E%3Cpath fill='%23c1b6ab' d='M201.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L224 173.3 54.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z'/%3E%3C/svg%3E") no-repeat; }

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

@media only screen and (max-width: 768px) {
	#background { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-image: linear-gradient(rgba(19,23,25,0),rgba(19,23,25,0), rgba(19,23,25,1)), url('../emergency-middle-east-appeal/bg.jpg'); background-size: cover; background-position: 26% 4vh; background-repeat: no-repeat; z-index: -1; }
	#background::before { height: 60vh; background-size: auto 75%; background-position: 26% 4vh; }
	
	.block_nomargin { padding: 1rem 4vw; margin-left: -1rem; margin-right: -1rem; }
	#supporting .number_highlight { margin-left: -25%; }
	#comunity_quote { background-size: auto 100%; background-position: 15%; }
	#comunity_quote .sidelight { margin-right: -1rem; }
}

@media only screen and (min-width: 769px) {
	
	#background::before { top: 2.1rem; background-position-x: 10%; }
	h1, h2, h3, h4 { width: -webkit-fill-available; }
	.headline { padding: 0.5rem 2vw; width: 35vw; margin-top: 50vh; }
	container { top: 2vh; }
	#donations, .campaign_block  { width: 50vw; margin-top: 2vh; }
	#donations iframe { float: left; }
	#donate { display: inherit; margin: 2vh 0; float: right; background: rgba(255,255,255,0.95);  position: fixed; right: 2vw; width: 30%; width: fit-content; top: 3rem; }
	#impact_grid.col40 ul li { width: 40%; }
	.campaign_block h2, .campaign_block h3 { max-width: 70%; }
	
}
@media only screen and (min-width: 1025px) {
	#donations { padding: 0 4vw 0 0; width: 50vw;  }
	#donations iframe { /* box-shadow: 1px 1px 1rem rgba(19,23,25,0.6); */ }
	a.button_donations { width: 50%; padding: 0.8rem 2vw; }
	.block_nobg { width: 54vw; }
	#comunity_quote_img img { width: 110%; }
}