:root {
	--body-font-family: 'Montserrat', 'Work Sans', sans-serif;
	--alt-heading-font-family: 'Lora', sans-serif;
	--alt2-heading-font-family: 'Yuji Syuku', sans-serif;
	--heading-font-family: 'Montserrat', 'Work Sans', sans-serif;
	--base-body-font-size: 1.2rem;
	--base-heading-font-size: 1.5rem;
	--base-subheading-font-size: 1.3rem;
	--base-line-height: 1.5;
	--color9:#ffffff;
	--color0:#000000;
	--color1:#004F85; /* dark blue */
	--color2:#3f88c5; /* blue */
	--color3:#e2754a; /* rust */
	--color4:#d00000; /* red */
	--color5:#8CC084; /* green */
	--color6:#ffba08; /* yellow */
	--color7:#fdf0d5; /* tan */
	--color8:#792359; /* purple */
}
body {-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;font-family:var(--body-font-family);margin: 0;padding: 0;overflow-x: hidden;}
h1,h2,h3,h4,h5,h6 {font-family: var(--heading-font-family);}
:focus {outline: none;}
.button {font-weight:700;display:block;border:2px solid var(--color3);padding:10px;color:var(--color3);text-decoration:none;text-transform:uppercase;text-align:center;border-radius:0px;}
.button:hover {background-color:var(--color3);color:#fff;}
header {display:grid;grid-template-columns:300px 1fr min-content;position:fixed;top:0;left:0;right:0;z-index:99;height:60px;width:100%;background-color: rgba(0, 0, 0, 0.7);}
header a.logo {float:left;}
header a.logo img {height:38px;margin-top:11px;margin-left:10px;}
header a.button {align-self:center;margin-right:75px;grid-column:3/4;font-size:14px;color:#fff;background-color:var(--color3);padding:3px;}
header a.button:hover {background-color:transparent;color:var(--color3);}

footer {background:#3d4245;color:#fff;display:grid;grid-template-columns:30px 225px 1fr 1fr 30px;padding-top:1em;padding-bottom:3em;}
footer img.footer-logo {max-width:225px;margin-left:18px;margin-top:0.5em;}
footer a.logo {grid-column:2/3;grid-row:1/2;}
footer .info {line-height:1.5;grid-column:2/4;grid-row:2/3;margin-top:1em;line-height: 1.5;margin-left:1em;}
footer .info a {color:#fff;text-decoration: none;}
footer .info a:hover {color:var(--color3);}
footer .social {line-height:1.5;grid-column:4/5;grid-row:1/3;margin-top:1em;text-align:right;}
footer .social svg {fill:#fff;width:20px;height:20px;margin-left:0.2em;margin-top:0.7em;margin-bottom:-0.3em;}
footer .social span {display:block;}
footer .social span a {color:#fff;text-decoration: none;}
footer .social span a:hover {color:var(--color3);}
footer .social span a:hover svg {fill:var(--color3);}
footer .social .button {max-width:10em;display:inline-block;}
footer .full-footer-area {grid-column: 2 / 5;text-align: center;margin-top: 2em;}

.main-sections-area {min-height:calc(100vh - 522px);}

section:first-of-type {margin-top:150px;}
section:first-of-type.template-image-section {margin-top:0;}
section:first-of-type.template-hero-image-section {margin-top:0;}
section:first-of-type.template-hero-image-and-boxes-section {margin-top:0;}
.box-of-copy {line-height:var(--base-line-height);font-size:var(--base-body-font-size);}

.slideout-menu {height: 100%;width: 0;position: fixed;z-index: 999;right: 0;top: 0;background-color: #333;overflow-x: hidden;transition: 0.5s;padding-top: 60px;}
.slideout-menu ul {list-style-type: none;padding: 0;padding-top:100px;}
.slideout-menu ul li {padding: 8px 28px 8px 32px;text-align: right;}
.slideout-menu ul li a {text-decoration: none;color: white;font-size: 25px;display: block;transition: 0.3s;}
.slideout-menu ul li a:hover {color: #f1f1f1;}
.content {padding: 20px;margin-left: 10px;}
svg#menu-button {cursor: pointer;z-index: 1000; width: 60px;position: fixed;color:#fff;top:10px;right: 10px;}
#top-line,#bottom-line,#middle-line {transform-box: fill-box;transform-origin: center;}

svg#menu-button.open {
	#top-line {animation: down-rotate 0.6s ease-out both;}
	#bottom-line {animation: up-rotate 0.6s ease-out both;}
	#middle-line {animation: hide 0.6s ease-out forwards;}
}

@keyframes up-rotate {
	0% {
		animation-timing-function: cubic-bezier(0.16, -0.88, 0.97, 0.53);
		transform: translateY(0px);
	}
	30% {
		transform-origin: center;
		animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
		transform: translateY(-10px);
	}
	100% {
		transform-origin: center;
		transform: translateY(-10px) rotate(45deg) scale(0.9);
	}
}

@keyframes down-rotate {
	0% {
		animation-timing-function: cubic-bezier(0.16, -0.88, 0.97, 0.53);
		transform: translateY(0px);
	}
	30% {
		transform-origin: center;
		animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
		transform: translateY(10px);
	}
	100% {
		transform-origin: center;
		transform: translateY(10px) rotate(-45deg) scale(0.9);
	}
}

@keyframes hide {
	29% {
		opacity: 1;
	}
	30% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

a { color: inherit; text-decoration: underline; }
.box-of-copy a:hover { text-decoration: none; }

/* custom fonts and colors  override */

section.text-color0 .box-of-copy, section .box-of-copy {color:var(--color0) !important; }
section.text-color1 .box-of-copy {color:var(--color1) !important; }
section.text-color2 .box-of-copy {color:var(--color2) !important; }
section.text-color3 .box-of-copy {color:var(--color3) !important; }
section.text-color4 .box-of-copy {color:var(--color4) !important; }
section.text-color5 .box-of-copy {color:var(--color5) !important; }
section.text-color6 .box-of-copy {color:var(--color6) !important; }
section.text-color7 .box-of-copy {color:var(--color7) !important; }
section.text-color8 .box-of-copy {color:var(--color8) !important; }
section.text-color9 .box-of-copy {color:var(--color9) !important; }

section.color0-body .box-of-copy { color:var(--color0) !important; }
section.color1-body .box-of-copy { color:var(--color1) !important; }
section.color2-body .box-of-copy { color:var(--color2) !important; }
section.color3-body .box-of-copy { color:var(--color3) !important; }
section.color4-body .box-of-copy { color:var(--color4) !important; }
section.color5-body .box-of-copy { color:var(--color5) !important; }
section.color6-body .box-of-copy { color:var(--color6) !important; }
section.color7-body .box-of-copy { color:var(--color7) !important; }
section.color8-body .box-of-copy { color:var(--color8) !important; }
section.color9-body .box-of-copy { color:var(--color9) !important; }

section.color0-header h2, section.color0-header h3 { color:var(--color0) !important; }
section.color1-header h2, section.color1-header h3 { color:var(--color1) !important; }
section.color2-header h2, section.color2-header h3 { color:var(--color2) !important; }
section.color3-header h2, section.color3-header h3 { color:var(--color3) !important; }
section.color4-header h2, section.color4-header h3 { color:var(--color4) !important; }
section.color5-header h2, section.color5-header h3 { color:var(--color5) !important; }
section.color6-header h2, section.color6-header h3 { color:var(--color6) !important; }
section.color7-header h2, section.color7-header h3 { color:var(--color7) !important; }
section.color8-header h2, section.color8-header h3 { color:var(--color8) !important; }
section.color9-header h2, section.color9-header h3 { color:var(--color9) !important; }



section.color1 .box-of-copy {color:var(--color9) !important;}
section.color9 .box-of-copy {color:var(--color0) !important;}

section.header-Montserrat h2 { font-family: 'Montserrat', 'Work Sans', sans-serif !important; }
section.header-Monserrat h2 { font-family: 'Montserrat', 'Work Sans', sans-serif !important; }
section.header-Lora h2 { font-family: 'Lora', sans-serif !important; }
section.header-Work-Sans h2 { font-family: 'Work Sans', sans-serif !important; }
section.header-Yuji-Syuku h2 { font-family: 'Yuji Syuku', sans-serif !important; }

section.subheader-Montserrat h3 { font-family: 'Montserrat', 'Work Sans', sans-serif !important; }
section.subheader-Monserrat h3 { font-family: 'Montserrat', 'Work Sans', sans-serif !important; }
section.subheader-Lora h3 { font-family: 'Lora', sans-serif !important; }
section.subheader-Work-Sans h3 { font-family: 'Work Sans', sans-serif !important; }
section.subheader-Yuji-Syuku h3 { font-family: 'Yuji Syuku', sans-serif !important; }

section.body-Montserrat .box-of-copy { font-family: 'Montserrat', 'Work Sans', sans-serif !important; }
section.body-Monserrat .box-of-copy { font-family: 'Montserrat', 'Work Sans', sans-serif !important; }
section.body-Lora .box-of-copy { font-family: 'Lora', sans-serif !important; }
section.body-Work-Sans .box-of-copy { font-family: 'Work Sans', sans-serif !important; }
section.body-Yuji-Syuku .box-of-copy { font-family: 'Yuji Syuku', sans-serif !important; }


/* image borders - sitewide */

.image-wrap {
  position: relative;
  display: inline-block;
}

section.color0-border img, img.color0-border { border: 2px solid var(--color0); }
section.color1-border img, img.color1-border { border: 2px solid var(--color1); }
section.color2-border img, img.color2-border { border: 2px solid var(--color2); }
section.color3-border img, img.color3-border { border: 2px solid var(--color3); }
section.color4-border img, img.color4-border { border: 2px solid var(--color4); }
section.color5-border img, img.color5-border { border: 2px solid var(--color5); }
section.color6-border img, img.color6-border { border: 2px solid var(--color6); }
section.color7-border img, img.color7-border { border: 2px solid var(--color7); }
section.color8-border img, img.color8-border { border: 2px solid var(--color8); }
section.color9-border img, img.color9-border { border: 2px solid var(--color9); }

section.color0-offset .offset-border, 
section.color1-offset .offset-border, 
section.color2-offset .offset-border, 
section.color3-offset .offset-border, 
section.color4-offset .offset-border, 
section.color5-offset .offset-border, 
section.color6-offset .offset-border, 
section.color7-offset .offset-border, 
section.color8-offset .offset-border, 
section.color9-offset .offset-border,
/* for repeated template images */
.color0-offset.offset-border, 
.color1-offset.offset-border, 
.color2-offset.offset-border, 
.color3-offset.offset-border, 
.color4-offset.offset-border, 
.color5-offset.offset-border, 
.color6-offset.offset-border, 
.color7-offset.offset-border, 
.color8-offset.offset-border, 
.color9-offset.offset-border 
{
  position: relative;
  display: inline-block;
  position: absolute;
  bottom: -1.3em; /* offset from bottom */
  right: -1.3em;  /* offset from right */
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2; /* on top of image */
}

/* adjust article grid text for border offset */
.template-article-grid-section.color0-offset h3, 
.template-article-grid-section.color1-offset h3, 
.template-article-grid-section.color2-offset h3, 
.template-article-grid-section.color3-offset h3, 
.template-article-grid-section.color4-offset h3, 
.template-article-grid-section.color5-offset h3, 
.template-article-grid-section.color6-offset h3, 
.template-article-grid-section.color7-offset h3, 
.template-article-grid-section.color8-offset h3, 
.template-article-grid-section.color9-offset h3
{ margin-top: 2em !important; }

section.color0-offset .offset-border, .color0-offset.offset-border {  border: 3px solid var(--color0); }
section.color1-offset .offset-border, .color1-offset.offset-border {  border: 3px solid var(--color1); }
section.color2-offset .offset-border, .color2-offset.offset-border {  border: 3px solid var(--color2); }
section.color3-offset .offset-border, .color3-offset.offset-border {  border: 3px solid var(--color3); }
section.color4-offset .offset-border, .color4-offset.offset-border {  border: 3px solid var(--color4); }
section.color5-offset .offset-border, .color5-offset.offset-border {  border: 3px solid var(--color5); }
section.color6-offset .offset-border, .color6-offset.offset-border {  border: 3px solid var(--color6); }
section.color7-offset .offset-border, .color7-offset.offset-border {  border: 3px solid var(--color7); }
section.color8-offset .offset-border, .color8-offset.offset-border {  border: 3px solid var(--color8); }
section.color9-offset .offset-border, .color9-offset.offset-border {  border: 3px solid var(--color9); }


/* Stripe specific styles */
.payment-form-container {max-width:100%;margin:10px auto;padding: 10px;background: #fff;}
.payment-form-container .form-group {margin-bottom: 20px;}label {display: block;margin-bottom: 5px;font-weight: bold;color: #333;}
.payment-form-container input[type="text"],.payment-form-container select,.payment-form-container input[type="email"], .payment-form-container input[type="number"], .payment-form-container textarea {width: 100%;padding: 12px;border: 1px solid #ccc;border-radius: 4px;font-size: 16px;box-sizing: border-box;}
.payment-form-container textarea {height: 80px;resize: vertical;}
.payment-form-container label {font-size:0.8em;text-transform:uppercase;}
.payment-form-container #card-element {padding: 12px;border: 1px solid #ccc;border-radius: 4px;background: white;}
.payment-form-container #card-errors {color: #fa755a;margin-top: 5px;}
.payment-form-container .submit-button {background: #5469d4;color: white;border: none;padding: 12px 30px;border-radius: 4px;font-size: 16px;cursor: pointer;width: 100%;margin-top: 20px;}
.payment-form-container .submit-button:hover {background: #4f63d2;}
.payment-form-container .submit-button:disabled {background: #ccc;cursor: not-allowed;}
.payment-form-container .loading {opacity: 0.6;}
.payment-form-container .success-message {background: #d4edda;color: #155724;padding: 15px;border-radius: 4px;margin-bottom: 20px;}
.payment-form-container .error-message {background: #f8d7da;color: #721c24;padding: 15px;border-radius: 4px;margin-bottom: 20px;}

html { overflow-x: hidden; }

@media screen and (max-width:64em) {
	header { grid-template-columns: 1fr 1fr min-content; }
	header a.button { margin-right: 75px; }
	footer { display: block;text-align: center; }
	footer .social {  text-align: center; margin-left: 1em;margin-top:1em; }
	
	.template-blockquote-section.body-width .grid { font-size: 1em; }
	
	.template-hero-image-and-boxes-section { overflow-x: hidden; }
	.template-hero-image-and-boxes-section h1.headline { top: -4.1em; font-size: 3em; }
	.template-hero-image-and-boxes-section .box-wrap { margin-top:0;padding:0; }
	.template-hero-image-and-boxes-section .box-wrap .box-one {  }
	.template-hero-image-and-boxes-section .box-wrap .box-one, 
	.template-hero-image-and-boxes-section .box-wrap .box-two, 
	.template-hero-image-and-boxes-section .box-wrap .box-three { width: 90%; }
	
	.template-donation-form-header-section .donation-form-container { max-width: 80vw; }
	
	.template-text-image-section .grid { width:100%; }
	.template-text-image-section .grid .box-of-copy { margin: 0 2em; }
	.template-text-image-section .grid .box-of-copy .content-wrap { padding-left: 0; padding-right: 0; }
	.template-text-multi-image-section .grid { width:100%; }
	.template-text-multi-image-section .grid { width:100%; }
	.template-text-multi-image-section .grid .box-of-copy { }
	.template-text-with-image-slider-section .grid { width:100%; }
	.template-text-with-image-slider-section .grid .box-of-copy { margin: 0 2em; }
	
	.template-youtube-shorts-grid-section .grid { width: 85%; }
	
}

@media screen and (min-width: 30em) and (max-width: 64em) {
	.template-youtube-shorts-grid-section .grid { grid-template-columns: 1fr 1fr !important; }
	.template-youtube-shorts-grid-section .grid .video { grid-column: span 1 !important; }
}

section .box-of-copy { max-width: 100%; overflow-x: hidden; }



.payment-modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .payment-modal-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.8);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .payment-modal-content {
      background: white;
      border-radius: 8px;
      max-width: 600px;
      width: 90%;
      max-height: 90%;
      overflow-y: auto;
      position: relative;
    }
    .payment-modal-header {
      padding: 20px;
      border-bottom: 1px solid #eee;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .payment-modal-header h2 {
      margin: 0;
    }
    .payment-modal-close {
      background: none;
      border: none;
      font-size: 24px;
      cursor: pointer;
      padding: 0;
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .payment-modal-body {
      padding: 20px;
    }
    .loading {
      text-align: center;
      padding: 40px 20px;
    }
    
    /* body copy size limits for mobile */
    
@media (max-width: 640px) {
  /* Body text sized inline */
  .box-of-copy [style*="font-size"] { font-size: clamp(1em, 4.2vw, 24px) !important; }
  body { margin-top:60px; }
 }