/* Donations page /donate/ (inc/grp-donate.php): the original's Elementor page (post 42716, its post-42716.css and Elementor's container rules) in plain CSS. */
/* Rubik (hebrew + latin): the original loads it from Google Fonts; here it is served from the theme (variable font 300-900; licence: SIL OFL 1.1) */
@font-face{font-family:Rubik;font-style:normal;font-weight:300 900;font-display:swap;src:url(../fonts/rubik-hebrew.woff2) format('woff2');unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F}
@font-face{font-family:Rubik;font-style:normal;font-weight:300 900;font-display:swap;src:url(../fonts/rubik-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* Heebo as the original theme declared it: its bold (700) is the ExtraBold file */
@font-face{font-family:'MH Donate Heebo';font-weight:400;font-display:swap;src:url(../fonts/heebo-400.ttf)}
@font-face{font-family:'MH Donate Heebo';font-weight:700;font-display:swap;src:url(../grp-inst-heebo-800.ttf)}

.mh-donate-page{--dn-blue:#021242;--dn-gold:#C9AB65;background:#f8f8f8;font-size:16px;line-height:1.5;text-align:right}
.mh-donate-page h2{margin:0;padding:0;line-height:1;font-family:Rubik,sans-serif;font-weight:500;text-align:center}
.dn-spacer{height:var(--h)}
.dn-spacer-1{--h:30px}

/* hero: photo under a 75% blue layer, everything centred in a column with 20px between the parts */
.dn-hero{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;min-height:90vh;background-color:var(--dn-blue);background-position:center center;background-repeat:no-repeat;background-size:cover}
.dn-hero::before{content:"";position:absolute;inset:0;background-color:var(--dn-blue);opacity:.75}
.dn-hero>*{position:relative;width:100%;flex:0 0 auto}
.dn-hero::after{content:"";order:-1;height:0}
.dn-quote{display:flex;flex-direction:column;gap:20px;max-width:1140px;padding:10px}
.dn-q1{font-size:35px;color:var(--dn-gold)}
.dn-q2{font-size:30px;color:#FFFFFFD1}
@media (min-width:768px){.dn-quote h2{width:100%;max-width:600px;margin:0 auto}}
.donation-btn-container{display:flex;justify-content:center;direction:rtl;z-index:15}
.donation-main-btn{display:flex;align-items:center;justify-content:center;width:290px;height:50px;background-color:var(--dn-blue);color:#fff;border:2px solid #c9ab65;border-radius:20px;font-family:Rubik,sans-serif;font-size:20px;font-weight:500;line-height:30px;text-decoration:none;cursor:pointer;transition:.3s;box-shadow:rgba(0,0,0,.2) 0 3px 12px}
.donation-main-btn:hover,.donation-main-btn:focus{color:#fff;text-decoration:none;transform:scale(1.05)}
.dn-bless img{display:inline-block;max-width:100%;height:auto;border:none;vertical-align:middle}
.dn-bless-small{text-align:center}
.dn-bless-wide{position:absolute!important;left:22px;top:358px;width:800px!important;text-align:left}
.dn-bless-wide img{width:36%}
@media (min-width:1025px){.dn-bless-small{display:none}}
@media (max-width:1024px){.dn-bless-wide{display:none}}
@media (max-width:767px){.dn-bless-small img{width:40%}.dn-spacer-1{--h:1px}}

/* the form: the plugin's own markup and styles; the original's page rule for its wrapper */
.dn-form{display:flex;flex-direction:column}
.dn-form .donation-wrapper{--primary-blue:#021242;--accent-gold:#c9ab65;--accent-gold-light:#e0ca96;background-color:#e0ca96;width:100vw!important;max-width:100vw;min-height:100vh!important}
.dn-form .mh-donations-soon{margin:0;padding:120px 16px;background-color:#e0ca96;color:var(--dn-blue);font-family:Rubik,sans-serif;font-size:24px;font-weight:500;line-height:1.4;text-align:center}

/* the plugin's buttons use one glyph of Elementor's icon font (eicons "chevron-left", GPL): drawn here from the same outline, at the font's size and baseline */
.mh-donate-page .eicon-chevron-left{display:inline-block;width:1em;height:1em;line-height:1;vertical-align:-.15em;background-color:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath transform='matrix(1 0 0 -1 0 850)' d='M646 725c-17 0-33-8-42-17l-296-300c-12-12-16-29-16-45 0-17 4-34 16-46l296-321c13-13 25-21 42-21 17 0 33 4 46 17 12 12 21 29 21 46 0 16-5 33-21 45l-254 280 254 262c8 8 16 21 16 38 0 16-4 33-16 45-17 13-29 17-46 17z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath transform='matrix(1 0 0 -1 0 850)' d='M646 725c-17 0-33-8-42-17l-296-300c-12-12-16-29-16-45 0-17 4-34 16-46l296-321c13-13 25-21 42-21 17 0 33 4 46 17 12 12 21 29 21 46 0 16-5 33-21 45l-254 280 254 262c8 8 16 21 16 38 0 16-4 33-16 45-17 13-29 17-46 17z'/%3E%3C/svg%3E") center/contain no-repeat}

/* other ways to donate: three blue cards in a row (one under the other on phones) */
.dn-ways{background-color:#FAF8F4;padding:10px}
.dn-ways-inner{display:flex;flex-direction:column;gap:20px;max-width:1140px;margin:0 auto}
.dn-ways-title{font-size:35px;color:var(--dn-gold)}
.dn-cards{display:flex;flex-direction:row;gap:20px;padding:10px}
.dn-card{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:20px;padding:20px 0;background-color:var(--dn-blue);border-bottom:3px solid var(--dn-blue);border-radius:15px;box-shadow:3px 2px 26px 0 rgba(0,0,0,.5)}
.dn-icon{height:37px;text-align:center;line-height:0}
/* as the icon font there: a 30px box, a wider glyph (the card) overflows it on both sides */
.dn-i{display:inline-block;position:relative;width:30px;height:30px}
.dn-icon svg{position:absolute;top:0;left:50%;transform:translateX(-50%);height:30px;width:auto;fill:var(--dn-gold)}
.dn-card-title{font-size:25px;color:var(--dn-gold)}
.dn-card-text{font-family:Roboto,sans-serif;font-weight:400;color:#fff;text-align:center}
/* the bank card text is a paragraph: the original theme set paragraphs in Heebo */
.dn-card-text p{margin:0 0 16px;font-family:'MH Donate Heebo',Heebo,sans-serif;font-size:16px;line-height:24px}
.dn-card-text a{color:#fff}
@media (max-width:767px){.dn-cards{flex-direction:column}.dn-card{flex:0 0 auto}}

/* footer on phones: on the original this page loads Bootstrap's own stylesheet (for the form) after the theme's, and its .mt-4 gives the footer's last row 24px more than on other pages */
@media (max-width:575.98px){body.mh-donate #colophon .site-info{margin-top:1.5rem!important}}
