@import url("https://fonts.googleapis.com/css?family=Amatic+SC|Fira+Sans");
/* ================================= Base Element Styles ==================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }

body { font-family: "Fira Sans", sans-serif; line-height: 1.28; display: flex; /*--- Sticky footer ---*/ flex-direction: column; min-height: 100vh; }

header { background-color: white; }

ul { margin: 0; padding: 0; list-style: none; }

p { font-size: 1em; font-weight: 400; margin-bottom: 1.8em; }

h1 { font-size: 1.75em; }

h2 { font-size: 1.5em; }

h3 { font-size: 1.25em; }

h4 { font-size: 0.875em; }

a { text-decoration: none; }

img { max-width: 100%; }

.text-white { color: white; }

.text-uppercase { text-transform: uppercase; }

.text-tertiary { color: #594a42; }

.font-accent { font-family: "Amatic SC", cursive; }

.bg-primary { background-color: #2c318c; }

.bg-secondary { background-color: #21a1a1; }

.bg-success { background-color: #2a328f; }

.bg-warning { background-color: #f04e29; }

.bg-info { background-color: #7d4895; }

.bg-highlight { background-color: #fbb040; }

/* ================================= Media Queries ==================================== */
/* Extra small devices (portrait phones, less than 576px)
- No media query since this should be the default styles */
@media (min-width: 768px) { h1 { font-size: 3.75em; } h2 { font-size: 2.813em; } h3 { font-size: 1.563em; } p { font-size: 1.375em; } }

/* ================================= Base Layout Containers ==================================== */
.row, .col, .full-width { display: flex; }

.row { flex-wrap: wrap; flex: 1; width: 100%; margin: 20px auto; padding: 10px 20px; }

.full-width { flex-wrap: wrap; flex: 1; }

/*as long as there is a 'row' class div in the body on the page,
there will be a sticky footer due to 'body' min-height and 'row' flex:1*/
.col { flex-direction: column; padding-right: 1em; padding-left: 1em; justify-content: center; }

.col .one-third { flex-grow: 0; }

.col .two-thirds { flex-grow: 2; }

.flex-center { flex-direction: column; align-items: center; justify-content: center; }

/* ================================= Media Queries ==================================== */
/* Extra small devices (portrait phones, less than 576px)
- No media query since this should be the default styles */
@media (min-width: 768px) { .col { flex: 1 50%; flex-direction: column; } .one-third { flex: 1 33%; } .two-thirds { flex: 2 66%; } .row { flex-wrap: wrap; } }

@media (min-width: 992px) { .row { width: 90%; } .col { flex-basis: 0; } }

.btn { font-family: "Amatic SC", cursive; font-size: 1.5em; font-weight: 700; color: white; text-align: center; display: inline-block; padding: .25em 1.25em; text-transform: uppercase; }

.btn-block { display: block; width: 100%; }

.btn-centered { justify-content: center; }

.btn-primary { background: #2c318c; }

.btn-primary:hover { background: #22266d; transition: all 0.3s ease; }

.btn-primary:active { background: #0e0f2b; }

.btn-primary-inverse { color: #2c318c; background: white; }

.btn-primary-inverse:hover { background: #ebebeb; transition: all 0.3s ease; }

.btn-primary-inverse:active { background: #bfbfbf; }

.btn-secondary { background: #21a1a1; }

.btn-secondary:hover { background: #1a7f7f; transition: all 0.3s ease; }

.btn-secondary:active { background: #0b3737; }

.btn-secondary-inverse { color: #21a1a1; background: white; }

.btn-secondary-inverse:hover { background: #ebebeb; transition: all 0.3s ease; }

.btn-secondary-inverse:active { background: #bfbfbf; }

.btn-tertiary { background: #594a42; }

.btn-tertiary:hover { background: #423731; transition: all 0.3s ease; }

.btn-tertiary:active { background: #100d0c; }

.btn-highlight { background: #fbb040; }

.btn-highlight:hover { background: #fa9f18; transition: all 0.3s ease; }

.btn-highlight:active { background: #b87004; }

.btn-tertiary-inverse { color: #594a42; background: white; }

.btn-tertiary-inverse:hover { background: #ebebeb; transition: all 0.3s ease; }

.btn-tertiary-inverse:active { background: #bfbfbf; }

.btn-warning { background: #f04e29; }

.btn-warning:hover { background: #e03710; transition: all 0.3s ease; }

.btn-warning:active { background: #8f230a; }

.btn-warning-inverse { color: #f04e29; background: white; }

.btn-warning-inverse:hover { background: #ebebeb; transition: all 0.3s ease; }

.btn-warning-inverse:active { background: #bfbfbf; }

.btn-success { background: #2a328f; }

.btn-success:hover { background: #21276f; transition: all 0.3s ease; }

.btn-success:active { background: #0d102c; }

.btn-success-inverse { color: #2a328f; background: white; }

.btn-success-inverse:hover { background: #ebebeb; transition: all 0.3s ease; }

.btn-success-inverse:active { background: #bfbfbf; }

.btn-info { background: #7d4895; }

.btn-info:hover { background: #663b79; transition: all 0.3s ease; }

.btn-info:active { background: #351e3f; }

.btn-info-inverse { color: #7d4895; background: white; }

.btn-info-inverse:hover { background: #ebebeb; transition: all 0.3s ease; }

.btn-info-inverse:active { background: #bfbfbf; }

/* ---- button ---- */
.button { display: inline-block; padding: 0.5em 1.0em; margin-bottom: 10px; background: #EEE; border: none; border-radius: none; background-color: white; color: #594a42; font-family: "Amatic SC", cursive; font-size: 1.5em; font-weight: 700; cursor: pointer; }

.button:hover { color: #21a1a1; }

.button:active, .button.is-checked { color: #21a1a1; }

.button:active { box-shadow: inset 0 1px 10px rgba(0, 0, 0, 0.8); }

/* ---- button-group for isotope grid ---- */
.button-group:after { content: ''; display: block; clear: both; }

.button-group .button { float: left; border-radius: 0; margin-left: 0; margin-right: 1px; }

/* ================================= Media Queries ==================================== */
/* Extra small devices (portrait phones, less than 576px)
- No media query since this should be the default styles */
@media (min-width: 768px) { .btn { font-size: 2.25em; margin: 20px 0; } .button { font-size: 2.25em; } }

nav, .main-nav, .social-icon-nav, .nav-btn { display: flex; }

nav, .main-nav { flex-direction: column; }

nav { align-items: center; width: 95%; margin: 20px auto; padding: 10px 20px; }

.logo { width: 80%; }

.main-nav { display: none; margin-top: 5px; }

.main-nav a { display: block; padding: 10px 15px; font-size: 1.25em; font-weight: 500; color: #594a42; text-transform: uppercase; }

.main-nav a.nav-link.active { color: #f04e29; }

.social-icon-nav a { color: #2c318c; }

.main-nav a:hover, .social-icon-nav a:hover { color: #f04e29; }

.social-icon-nav, .nav-btn { display: flex; justify-content: center; }

.social-icon-nav { margin-top: 20px; margin-bottom: 20px; }

.nav-btn { font-size: 1.35em; font-weight: 700; background-color: #f04e29; display: block; width: 100%; }

.nav-btn:hover { background-color: #2c318c; }

.nav-link-toggle { align-self: flex-end; display: initial; position: absolute; top: 35px; right: 15px; cursor: pointer; }

.nav-toggle-show { display: flex; }

.dropdown li { margin-left: 20px; }

.dropdown li:hover, .dropdown li:focus-within { background: #ebebeb; cursor: pointer; }

.dropdown li:focus-within a { outline: none; }

/* ================================= Media Queries ==================================== */
/* Extra small devices (portrait phones, less than 576px)
- No media query since this should be the default styles */
@media (min-width: 768px) { .logo { width: 90%; } }

@media (min-width: 1200px) { .logo { width: 100%; } .main-nav { display: flex; flex-direction: row; } .nav-btn { font-size: 3em; width: auto; padding: 10px 30px; } .nav-link-toggle { display: none; } nav { flex-direction: row; justify-content: space-around; } /* Dropdown */ .dropdown li { margin-left: 0px; display: block; float: left; padding: 1rem; position: relative; transition-duration: 0.5s; } ul li ul { background: white; visibility: hidden; opacity: 0; position: absolute; transition: all 0.5s ease; display: none; } ul li:hover > ul, ul li:focus-within > ul, ul li ul:hover, ul li ul:focus { visibility: visible; opacity: 1; display: block; } ul li ul li { clear: both; width: 100%; } }

.main-footer { background-color: white; padding: 1em 0; line-height: 1.667; text-transform: uppercase; }

.main-footer .footer-row { display: flex; flex-wrap: wrap; }

.main-footer .footer-row ul { margin: 15px 30px; }

.main-footer h3 { font-weight: 700; color: #fbb040; }

.main-footer h4, .main-footer a { font-weight: 400; color: #594a42; }

.main-footer li a { font-size: 1.125em; }

.main-footer a:hover { color: #f04e29; }

.main-footer .row { width: 100%; max-width: 100%; justify-content: center; }

#copyright { margin-bottom: 0; }

#mailing-address { margin-top: 0; padding-top: 0; }

.social-icon-nav a { color: #2c318c; }

/* ================================= Media Queries ==================================== */
/* Extra small devices (portrait phones, less than 576px)
- No media query since this should be the default styles */
@media (min-width: 768px) { .main-footer .footer-row { flex-direction: row; flex-wrap: wrap; justify-content: center; } }

@media (min-width: 1200px) { .main-footer .footer-row { justify-content: space-evenly; } }

.circle-success { background: rgba(42, 50, 143, 0.85); width: 200px; height: 200px; margin: .5em; border-radius: 50%; }

.circle-secondary { background: rgba(33, 161, 161, 0.85); width: 200px; height: 200px; margin: .5em; border-radius: 50%; }

.circle-warning { background: rgba(240, 78, 41, 0.85); width: 200px; height: 200px; margin: .5em; border-radius: 50%; }

.overlay-circle-success { background: url("./../images/program-circle-pattern.png"); background-color: #2a328f; width: 250px; height: 250px; margin: .5em; border-radius: 50%; }

.overlay-circle-secondary { background: url("./../images/program-circle-pattern.png"); background-color: #21a1a1; width: 250px; height: 250px; margin: .5em; border-radius: 50%; }

.overlay-circle-warning { background: url("./../images/program-circle-pattern.png"); background-color: #f04e29; width: 250px; height: 250px; margin: .5em; border-radius: 50%; }

.overlay-circle-info { background: url("./../images/program-circle-pattern.png"); background-color: #7d4895; width: 250px; height: 250px; margin: .5em; border-radius: 50%; }

.overlay-circle-highlight { background: url("./../images/program-circle-pattern.png"); background-color: #fbb040; width: 250px; height: 250px; margin: .5em; border-radius: 50%; }

.circle-photo { width: 300px; height: 300px; margin: .5em; border-radius: 50%; }

.inner-circle { display: flex; align-items: center; justify-content: center; height: 100%; text-align: center; }

.inner-circle h2 { color: white; font-size: 1.25em; }

#circle-row { display: flex; flex-direction: column; align-items: center; }

/* ================================= Media Queries ==================================== */
/* Extra small devices (portrait phones, less than 576px)
- No media query since this should be the default styles */
@media (min-width: 768px) { #circle-row { flex-direction: row; justify-content: space-around; } }

@media (min-width: 992px) { .circle-success { background: rgba(42, 50, 143, 0.85); width: 300px; height: 300px; margin: .5em; border-radius: 50%; } .circle-secondary { background: rgba(33, 161, 161, 0.85); width: 300px; height: 300px; margin: .5em; border-radius: 50%; } .circle-warning { background: rgba(240, 78, 41, 0.85); width: 300px; height: 300px; margin: .5em; border-radius: 50%; } .overlay-circle-success { background: url("./../images/program-circle-pattern.png"); background-color: #2a328f; width: 350px; height: 350px; margin: .5em; border-radius: 50%; } .overlay-circle-secondary { background: url("./../images/program-circle-pattern.png"); background-color: #21a1a1; width: 350px; height: 350px; margin: .5em; border-radius: 50%; } .overlay-circle-warning { background: url("./../images/program-circle-pattern.png"); background-color: #f04e29; width: 350px; height: 350px; margin: .5em; border-radius: 50%; } .overlay-circle-info { background: url("./../images/program-circle-pattern.png"); background-color: #7d4895; width: 350px; height: 350px; margin: .5em; border-radius: 50%; } .overlay-circle-highlight { background: url("./../images/program-circle-pattern.png"); background-color: #fbb040; width: 350px; height: 350px; margin: .5em; border-radius: 50%; } .inner-circle h2 { font-size: 1.875em; } }

@media (min-width: 1600px) { .circle-success { background: rgba(42, 50, 143, 0.85); width: 350px; height: 350px; margin: .5em; border-radius: 50%; } .circle-secondary { background: rgba(33, 161, 161, 0.85); width: 350px; height: 350px; margin: .5em; border-radius: 50%; } .circle-warning { background: rgba(240, 78, 41, 0.85); width: 350px; height: 350px; margin: .5em; border-radius: 50%; } .overlay-circle-success { background: url("./../images/program-circle-pattern.png"); background-color: #2a328f; width: 400px; height: 400px; margin: .5em; border-radius: 50%; } .overlay-circle-secondary { background: url("./../images/program-circle-pattern.png"); background-color: #21a1a1; width: 400px; height: 400px; margin: .5em; border-radius: 50%; } .overlay-circle-warning { background: url("./../images/program-circle-pattern.png"); background-color: #f04e29; width: 400px; height: 400px; margin: .5em; border-radius: 50%; } .overlay-circle-info { background: url("./../images/program-circle-pattern.png"); background-color: #7d4895; width: 400px; height: 400px; margin: .5em; border-radius: 50%; } .overlay-circle-highlight { background: url("./../images/program-circle-pattern.png"); background-color: #fbb040; width: 400px; height: 400px; margin: .5em; border-radius: 50%; } }

.preview { padding: 0; width: 300px; height: 300px; margin: 10px 0; display: flex; flex-direction: column; justify-content: flex-end; background-size: cover; background-position: center; }

.preview h4 { text-transform: uppercase; }

.preview a { color: white; display: inline-block; position: relative; z-index: 1; padding-top: 3em; padding-bottom: 1em; margin-top: -3em; margin-bottom: -1em; }

.preview-full-bg { padding: 0; width: 300px; height: 300px; margin: 10px 0; display: flex; flex-direction: column; justify-content: center; }

.preview-full-bg h4 { text-transform: uppercase; }

.preview-full-bg a { color: white; display: inline-block; position: relative; z-index: 1; padding-top: 5em; padding-bottom: 5em; margin-top: -5em; margin-bottom: -5em; }

#post-preview div.col { align-items: center; }

.bg-health { background: rgba(42, 50, 143, 0.9); padding: 15px; line-height: 2; }

.bg-development { background: rgba(33, 161, 161, 0.9); padding: 15px; line-height: 2; }

.bg-education { background: rgba(240, 78, 41, 0.9); padding: 15px; line-height: 2; }

.bg-covid19 { background: rgba(251, 176, 64, 0.9); padding: 15px; line-height: 2; }

.bg-news { background: rgba(125, 72, 149, 0.9); padding: 15px; line-height: 2; }

.post-container { color: #594a42; }

.post-sidebar { padding-left: 20px; padding-right: 20px; margin-bottom: 20px; display: flex; flex-direction: column; }

.post-sidebar h4 { font-weight: 400; font-size: 1.25em; }

.post-sidebar i { margin-right: 20px; color: #2a328f; }

.post-sidebar i:hover { color: #f04e29; }

.post-sidebar ul { margin-top: 40px; }

.post-sidebar ul li { margin-bottom: 10px; text-transform: uppercase; }

.post-sidebar ul li a { color: #f04e29; }

.post-sidebar ul li a:hover { color: #2a328f; }

.post-categories { text-transform: uppercase; }

.post-heading { background-color: #e5e3e3; background: linear-gradient(rgba(229, 227, 227, 0.75), rgba(229, 227, 227, 0.85)), url("./../images/post-background.jpg"); background-size: 100%, cover; background-repeat: no-repeat; background-position: center, 50% center; padding: 0; display: flex; flex-direction: column; align-items: flex-start; }

.post-heading h1 { color: white; font-size: 1.5em; margin-bottom: 20px; }

.post-category { padding-left: 20px; padding-right: 20px; display: flex; justify-content: space-between; }

.post-info { padding: 0px; justify-content: space-between; }

.featured-image { width: 100%; height: auto; padding: 0; }

.post-content { padding: 15px; }

.post-content img { height: auto; }

.post-navigation a { color: #f04e29; margin-bottom: 30px; }

.post-navigation a:hover { color: #2a328f; }

#outer-button-group { margin-top: 50px; }

#outer-grid, #outer-button-group { display: flex; justify-content: center; margin-bottom: 15px; }

#outer-button-group button { font-size: 1.25em; }

.button-group { display: flex; flex-direction: column; }

.grid, .button-group { width: 90%; }

#event-highlight { background-color: white; background-image: url("./../images/striped-rectangle.png"); background-size: cover; background-position: top; padding-top: 90px; }

#event-highlight .event-info { justify-content: space-between; align-items: flex-start; padding-top: 0; padding-bottom: 0; }

#event-highlight img { width: 300px; margin-bottom: 20px; }

/* ================================= Media Queries ==================================== */
/* Extra small devices (portrait phones, less than 576px)
- No media query since this should be the default styles */
@media (min-width: 576px) { .grid { width: 320px; } .preview, .preview-full-bg { margin: 10px 10px; } .button-group { flex-direction: row; } }

@media (min-width: 768px) { #event-highlight .btn { align-self: flex-start; } .grid { width: 640px; } .post-info h1 { font-size: 2.25em; margin-top: 30px; } .post-sidebar { flex-direction: row; justify-content: space-around; } }

@media (min-width: 992px) { #event-highlight img { width: 400px; } }

@media (min-width: 1050px) { .grid { width: 960px; } }

@media (min-width: 1200px) { #event-highlight img { width: 450px; } #outer-button-group button { font-size: 1.75em; } .post-container { background-repeat: repeat-x; display: flex; flex-direction: row-reverse; } }

@media (min-width: 1400px) { .grid { width: 1280px; } .post-sidebar { flex-direction: column; justify-content: flex-start; padding-left: 30px; } .post-sidebar ul { width: 300px; } .post-container { width: 80%; align-self: center; } }

@media (min-width: 1750px) { .grid, .button-group { width: 1600px; } #event-highlight img { width: 90%; } .post-container { width: 70%; } }

.banner-success { background: #2a328f; padding: 30px 0; display: flex; flex-direction: row; justify-content: center; text-align: center; color: white; text-transform: uppercase; }

.banner-secondary { background: #21a1a1; padding: 30px 0; display: flex; flex-direction: row; justify-content: center; text-align: center; color: white; text-transform: uppercase; }

.banner-warning { background: #f04e29; padding: 30px 0; display: flex; flex-direction: row; justify-content: center; text-align: center; color: white; text-transform: uppercase; }

.hero { background-size: cover; background-position: center; height: calc(100vh - 249px); display: flex; flex-direction: column; justify-content: flex-end; text-align: center; }

.hero-text { padding-bottom: 30px; color: white; text-transform: uppercase; }

.hero-text-success { background: rgba(42, 50, 143, 0.85); padding: 20px 0; }

.hero-text-secondary { background: rgba(33, 161, 161, 0.85); padding: 20px 0; }

.hero-text-warning { background: rgba(240, 78, 41, 0.85); padding: 20px 0; }

/* hero images on different pages */
#home-hero { background-image: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0)); background-size: 100%; background-repeat: no-repeat; background-position: center; padding: 0 15px; }

#home-subhero { color: white; }

#home-subhero .col { align-items: center; }

#home-subhero h2 { text-align: center; }

#programs-hero { background-image: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0)), url("./../images/programs-hero.jpg"); }

#health-hero { background-image: url("./../images/health-hero.jpg"); background-position: top; }

#development-hero { background-image: url("./../images/development.jpg"); }

#education-hero { background-image: url("./../images/education.jpg"); }

#about-hero { background-image: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0)), url("./../images/about-hero.jpg"); background-position: center; }

#reproductive-hero { background-image: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0)), url("./../images/reproductive-hero.jpg"); background-position: center; }

#donate-hero { background-image: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0)), url("./../images/donate-hero.jpg"); background-position: center; }

#donate-once { background-image: linear-gradient(to top, rgba(125, 72, 149, 0.8), rgba(125, 72, 149, 0.8)), url("./../images/donate-once.jpg"); background-position: center; }

#donate-monthly { background-image: linear-gradient(to top, rgba(33, 161, 161, 0.8), rgba(33, 161, 161, 0.8)), url("./../images/donate-monthly.jpg"); background-position: top; }

#donate-charitable { background-image: linear-gradient(to top, rgba(251, 176, 64, 0.9), rgba(251, 176, 64, 0.9)), url("./../images/post-background.jpg"); background-position: bottom; }

#donate-charitable a { color: #7d4895; }

#donate-charitable a:hover { color: #f04e29; }

#donate-once, #donate-monthly { height: 75vh; }

#donate-charitable { height: 50vh; }

#join-hero { background-image: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0)), url("./../images/join-hero.jpg"); background-position: center; }

#covid19-hero { background-image: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0)), url("./../images/covid19-hero.jpg"); }

/* Different elements on pages */
#home-about { background: linear-gradient(rgba(33, 161, 161, 0.85), rgba(33, 161, 161, 0.85)), url("./../images/people-hugging-bwfaded.jpg"); background-size: 100%, cover; background-repeat: no-repeat; background-position: center, 50% center; padding: 50px 0; }

#home-about .row > .col { justify-content: space-between; padding-top: 0; }

#home-about h2 { margin-top: 30px; margin-bottom: 20px; }

#home-about figure { margin-top: 30px; align-self: flex-start; }

#programs-highlight { background-image: url("./../images/people-in-field.jpg"); background-size: cover; background-position: bottom; text-transform: uppercase; min-height: 80vh; }

#programs-highlight .row { margin-top: 0; padding-top: 0; justify-content: center; }

#programs-highlight h2 { background-color: #f04e29; padding: 20px 40px; }

#programs-highlight a { font-size: 1.5em; }

#program-subheads { background: url("./../images/programs-purple-overlay.png"); background-position: top center; background-size: cover; }

#program-subheads .row { padding-top: 100px; padding-bottom: 100px; }

#program-subheads .col { justify-content: flex-start; }

.text-snippet { text-align: center; color: #594a42; font-size: 1.4em; padding-top: 100px; padding-bottom: 50px; }

.text-snippet span { font-weight: 700; }

.quote { font-family: "Amatic SC", cursive; font-size: 2em; }

.orange-divider-pattern { background-image: url("./../images/orange-divider-pattern.png"); background-repeat: no-repeat; background-position: 50% -5px; }

.teal-divider-pattern { background-image: url("./../images/teal-divider-pattern.png"); background-repeat: no-repeat; background-position: 50% -5px; }

.blue-divider-pattern { background-image: url("./../images/blue-divider-pattern.png"); background-repeat: no-repeat; background-position: 50% -5px; }

.program-info { padding-top: 100px; padding-bottom: 50px; justify-content: center; text-align: center; }

.program-info h2 { color: #fbb040; text-transform: uppercase; font-weight: 700; margin-bottom: 40px; }

.program-info p { color: #594a42; }

#reproductive-info { flex-direction: column; }

#reproductive-info .row { margin-top: 0; margin-bottom: 0; }

#reproductive-info h2 { color: #fbb040; text-transform: uppercase; font-weight: 700; margin-bottom: 40px; margin-top: 20px; }

#reproductive-info p, #reproductive-info small { color: #594a42; }

#reproductive-info ul { text-align: left; margin-bottom: 30px; }

#reproductive-info ul li { margin-bottom: 10px; color: #594a42; }

#reproductive-info ul li:nth-child(odd) { color: #21a1a1; }

#reproductive-info a { color: #2c318c; }

#reproductive-info a:hover { color: #f04e29; }

#reproductive-info .btn { color: white; margin-top: 20px; margin-bottom: 20px; }

#reproductive-info .btn:hover { color: white; }

.icons { flex-direction: column; }

.icons .col { align-items: flex-start; margin-bottom: 20px; }

.icons a { color: #2c318c; margin-bottom: 5px; }

.icons a:hover { color: #f04e29; }

#rhrp-archives h2 { color: #fbb040; text-transform: uppercase; font-weight: 700; margin-bottom: 40px; margin-top: 20px; }

.odd { background-color: #e5e3e3; }

.even { background-color: #f6f5f5; }

.staff { display: flex; flex-direction: column; justify-content: center; align-items: center; margin-bottom: 15px; }

.picture-row { display: flex; flex-direction: row; background-color: #594a42; }

#photo1 { display: block; }

#photo2, #photo3, #photo4 { display: none; }

.square-cover-photo { background-size: cover; background-position: center; background-repeat: no-repeat; width: 100%; height: 350px; }

#wezesha-circle { background: url("./../images/programs-purple-overlay.png"); background-position: top center; background-size: cover; }

#wezesha-inner { color: white; padding-top: 100px; padding-bottom: 100px; }

#wezesha-inner h2 { text-transform: uppercase; }

.donate { display: flex; flex-direction: column; justify-content: center; }

.donate .col a { align-self: center; }

.donate .col h2 { margin-bottom: 20px; }

#board_members .col { justify-content: flex-start; }

#board_members h3 { margin: 20px 0; }

#board_members li { margin: 5px 0; }

#betterbiz-logo { width: 200px; margin-bottom: 20px; }

#covid-donate { background-image: linear-gradient(to top, rgba(211, 211, 211, 0.8), rgba(211, 211, 211, 0.8)), url("./../images/horizon-gradient.jpg"); background-position: center; background-size: cover; }

#covid-donate-inner { color: black; margin-bottom: 0; }

#covid-donate-inner p { text-align: center; font-size: 1.75em; margin-top: 50px; margin-bottom: 0; }

#covid-donate-inner .btn { align-self: center; font-family: "Fira Sans", sans-serif; font-size: 1.5em; }

#covid-donate-once { margin-top: 0; padding-top: 0; }

#covid-donate-once .btn { align-self: center; }

#covid-donate-once p { color: #594a42; }

#covid-donate-once .color-box { padding: 30px; margin: 30px; justify-content: space-between; }

#covid-donate-once .color-box h3, #covid-donate-once .color-box p { color: white; }

#covid-donate-once .color-box h3 { font-size: 2em; }

#color-box-row { padding-top: 0; display: flex; flex-direction: column; }

#our-partners-top { background-image: url("./../images/orange-divider-pattern.png"), url("./../images/white-pattern-10percent.png"); background-repeat: repeat-x; background-size: auto, cover; background-position: 50% -5px, top; background-color: #fbb040; text-align: center; line-height: 2.5em; padding-bottom: 20px; }

#our-partners-top .row { justify-content: center; }

.rustyorangeh2 { font-size: 1.5em; color: white; text-transform: uppercase; background-color: #c04724; margin-top: -30px; padding-top: 40px; padding-left: 20px; padding-right: 20px; padding-bottom: 20px; }

#our-partners-bottom { background-image: url("./../images/our-partners-kids8percent.png"); background-repeat: no-repeat; background-size: cover; background-position: top center; background-color: #f1592a; color: white; text-align: center; line-height: 2.5em; }

#our-partners-bottom-tophalf { background-image: linear-gradient(to top, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)); padding-top: 10px; padding-bottom: 10px; }

#our-partners-bottom-bottomhalf { padding-top: 20px; padding-bottom: 20px; }

#our-partners-bottom-bottomhalfbottom { padding-top: 20px; padding-bottom: 20px; background-color: #21a1a1; }

.inline-list li { display: inline; }

.inline-list i { font-size: .3em; margin-left: 10px; margin-right: 5px; vertical-align: middle; }

.inline-list > li:last-of-type i { display: none; }

/* ================================= Media Queries ==================================== */
/* Extra small devices (portrait phones, less than 576px)
- No media query since this should be the default styles */
@media (min-width: 576px) { .square-cover-photo { width: 50%; } #photo2 { display: block; } #board_members { margin-bottom: 40px; } }

@media (min-width: 768px) { #home-about .btn { align-self: flex-start; } #home-about figure { margin-top: 0; } #home-about h2 { margin-top: 0; } #programs-highlight a { font-size: 2.25em; } #programs-hero h1 { font-size: 5.625em; } .program-info h2 { font-size: 1.875em; } .program-info p { font-size: 1.5em; } .square-cover-photo { width: calc(100%/3); } #photo3 { display: block; } .donate { flex-direction: row; } #board_members h3 { margin-top: 0; } #members > div { display: flex; } #members > div ul { margin-right: 30px; } .icons { flex-direction: row; } #color-box-row { display: flex; flex-direction: row; flex-wrap: wrap; } #color-box-row .color-box { max-width: 400px; } #color-box-row .color-box h3 { font-size: 3em; } }

@media screen and (max-device-width: 800px) { #home-hero { background-image: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0)), url("./../images/unfoldingfabric_frame.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover; } }

@media (min-width: 992px) { .square-cover-photo { width: 25%; height: 400px; } #photo4 { display: block; } .donate { padding-left: 40px; } .quote { font-size: 3em; } #members { flex-grow: 2; } #covid-donate-inner .btn { max-width: 30%; } #covid-donate-inner, #covid-donate-once { width: 75%; } .program-info { width: 75%; } }

@media (min-width: 1200px) { .hero { height: calc(100vh - 181px); } #donate-once, #donate-monthly { height: 60vh; } .orange-divider-pattern, .teal-divider-pattern, .blue-divider-pattern { background-repeat: repeat-x; } }

@media (min-width: 2000px) { .square-cover-photo { width: 500px; } .picture-row { align-items: center; } }

video { display: block; }

video#bgvid { position: fixed; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; -ms-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); background: url("./../images/unfoldingfabric_frame.jpg") no-repeat; background-size: cover; }

/* ================================= Media Queries ==================================== */
/* Extra small devices (portrait phones, less than 576px)
- No media query since this should be the default styles */
@media screen and (max-device-width: 800px) { #bgvid { display: none; } }

#newsletter { background-image: url("./../images/orange-divider-pattern.png"), url("./../images/horizon-gradient.jpg"); background-repeat: no-repeat, no-repeat; background-size: auto, cover; background-position: 50% -5px, bottom; display: flex; flex-direction: column; padding: 30px 0; }

#newsletter h2 { text-transform: uppercase; color: #2a328f; font-weight: 700; margin-bottom: 30px; align-self: center; }

.form-control { padding: 10px; margin-bottom: 10px; flex-grow: 1; }

input::placeholder { color: #594a42; }

form button { border: none; }

/* ================================= Media Queries ==================================== */
/* Extra small devices (portrait phones, less than 576px)
- No media query since this should be the default styles */
@media (min-width: 576px) { form button { align-self: center; } }

@media (min-width: 768px) { .form-group { flex-direction: row; } #newsletter { padding-top: 100px; padding-bottom: 50px; } .form-control { margin-right: 10px; } }

@media (min-width: 1200px) { .form-group { width: 80%; } #newsletter { background-repeat: repeat-x, no-repeat; } }

@media (min-width: 1750px) { width: 70%; }

.split-box { align-items: center; justify-content: flex-start; padding: 30px 30px; width: 100%; }

.split-box p { text-align: center; }

.split-box h2 { margin-bottom: 20px; }

.split-box .two-button-line { display: flex; flex-direction: column; }

.split-box .two-button-line a { margin: 10px; }

.solid-bg-primary { background-color: #2c318c; }

.solid-bg-secondary { background-color: #21a1a1; }

.solid-bg-tertiary { background-color: #594a42; }

.solid-bg-highlight { background-color: #fbb040; }

.solid-bg-white { background-color: white; }

#bigger-h2 { font-size: 2.5em; }

#home-split-box h2 { font-family: "Fira Sans", sans-serif; text-align: center; }

#home-split-box .col { justify-content: space-between; }

.covid-response-row { justify-content: center; }

.covid-response-row h2 { color: #fbb040; text-transform: uppercase; font-size: 1.75em; margin-bottom: 20px; }

.covid-response-row p { color: #594a42; text-align: center; margin-bottom: 0; }

#solo-divider-pattern { background-color: white; height: 30px; }

/* ================================= Media Queries ==================================== */
/* Extra small devices (portrait phones, less than 576px)
- No media query since this should be the default styles */
@media (min-width: 1600px) { .split-box .two-button-line { flex-direction: row; } }

/*# sourceMappingURL=main.css.map */