/*
Teal: #617F7F
Light teal: #7bccd2
Dark blue: #2e414f
Yellow: #fcb040
Red: #b54a35
Gold: #cbb8a5
Purple: #7d669c
*/


.poppins-regular {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.poppins-medium {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.poppins-semibold {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.poppins-bold {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.poppins-regular-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.merriweather-bold {
  font-family: "Merriweather", serif;
  font-weight: 700;
  font-style: normal;
}


.reveal-bg { position: fixed; background: rgba(0, 0, 0, 0.7); z-index: 998 }

/* -----------------------------------------
   GLOBAL STYLES
----------------------------------------- */

*:focus { outline: 0 }

/* OLD COLORS */
.teal { background: #617F7F }
.eggplant { background: #2c293a }
.orange { background: #dd9a41 }
.green { background: #203330 }
.gray { background: #353535 }

/* NEW COLORS */
.tan { background: #e7dbd9 }

body { -webkit-overflow-scrolling: touch; font-family: 'Poppins', sans-serif; font-weight: 400; font-style: normal; color: #2e414f; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale }
body, #headerWrap { background: #FFFFFF }
#headerWrap div.row { max-width: 100% }
html.is-reveal-open, html.is-reveal-open body { width: 100% }
.row.story { max-width: 75rem }
a { color: #4597A4; cursor: pointer; display: inline-block; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: .5px }
@media only screen and (min-width: 40.063em) {
	a:hover { color: #4597A4; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px }
}
p, ul li, ol li { font-size: 1.1rem; line-height: 1.4em; font-family: 'Poppins', sans-serif; font-weight: 400; font-style: normal }
p strong, p b { font-weight: 700 }
.top p { font-size: 1.2rem }

a.button, a.button:focus { font-weight: 700; font-size: 1rem; line-height: 1em; text-transform: uppercase; font-family: 'Poppins', sans-serif; background: #2e414f; color: white; padding: 14px 30px; margin-top: 10px; margin-right: 15px; transition: none; border: 2px solid #2e414f; text-decoration: none }
a.button:hover, a.button.yellow, .home a.button.yellow { background: #FEC217; color: #2e414f; border: 2px solid #FEC217 }
a.button.yellow:hover, .home a.button.yellow:hover { color: #FEC217; background: #2e414f }
a.button.outline { background: transparent; color: #2e414f }
a.button.outline:hover { background: #FEC217; border-color: #FEC217; color: #2e414f }
.btn, a.donate, .btn:focus, a.catalog { color: #2e414f; background-color: #FEC217; font-size: .9em; font-weight: 700; line-height: 1em; text-transform: uppercase; padding: 0 55px 0 30px; height: 45px; display: inline-flex; align-items: center; -webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; -ms-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; border: 0; cursor: pointer; font-family: 'Poppins', sans-serif; border-radius: 3px; margin-right: 15px; margin-bottom: 15px; position: relative; text-decoration: none }
a.donate, a.catalog { font-size: .8rem; height: 40px; padding: 0 20px; text-decoration: none }

.btn:after { font-family: "Font Awesome 6 Pro"; content: "\f178"; font-size: 1.3rem; margin-left: 8px; font-weight: 300; position: absolute; right: 20px }

a.donate { padding: 0 15px }
.btn.no-arrow { padding: 0 30px }
.btn.no-arrow:after { content: '' }

a.button.gpp { padding-left: 60px; text-align: left; position: relative }
a.button.gpp i { font-size: 1.7rem; position: absolute; top: 10px; left: 20px }

.dark, .btn.dark:focus { background: #284251; color: #FEC217; padding: 0 50px 0 20px; text-transform: uppercase }
.dark:hover { background: #E8865B; color: #284251 }
.dark.no-arrow { padding: 10px 20px }

.panel { background: transparent; border: 0; padding: 0; margin: 60px auto }
.chunk { margin-bottom: 100px !important }
.spacer { height: 80px; display: block }

.noMobile { display: none }
[class*="column"]+[class*="column"]:last-child { float: left }
img.floater { max-width: 385px }
/* img.full { margin-bottom: 30px } */
h2, h3, h4 { font-family: 'Poppins', sans-serif; line-height: 1.1em }
h1 { font-size: 2.5rem; line-height: 1em; margin-bottom: 30px }
h1, .row.story.basic h1, h3, .story h3 { font-family: 'Poppins', serif; color: #2e414f; font-weight: 700; text-transform: none }
h2 { font-size: 2em; font-weight: 700; color: #2e414f; line-height: 1; margin-bottom: 15px }
h3 { font-size: 1.7em }
h3.serif { font-size: 1.7em }
h3.small { text-transform: uppercase; font-size: 2.4em; margin-top: 8px; margin-bottom: 0 }
h5 { font-size: 20px }
ul.no-bullet { margin-left: 0 !important }
ul.no-bullet li a { text-decoration: none !important }
ul.no-bullet li a:hover { text-decoration: underline !important; color: #2e414f !important; text-decoration-thickness: 1px !important; text-underline-offset: 3px }
.row.story a.donate { text-decoration: none }
.row.story a.donate:hover { color: white }
.row.story ul { margin-left: 40px }
.quote-container { margin-top: 80px; margin-bottom: 60px; }
blockquote { color: #617F7F; margin: 0 0 0 20px; font-size: 1.8em; line-height: 1.1em; border-left: none; padding: 0 0 0 20px; font-weight: 700; font-family: 'Merriweather', serif; position: relative }
blockquote:before { content: '“'; position: absolute; left: -25px; font-weight: 700; font-size: 3rem }
blockquote cite { color: #617f7f; margin-top: 20px; line-height: 1.5; font-style: normal }
blockquote cite span { margin-left: 18px;  }
blockquote cite span .skiptranslate { margin-left: 0 }
.quoteImage { max-width: 150px; border-radius: 50%; margin-bottom: 20px }

.donateWidget { background: #617F7F; padding: 40px; max-width: 60rem; margin: 0 auto }
.donateWidget h3 { font-weight: 600; color: #FFF; margin-bottom: 30px }
.donateWidget p, .donateWidget a:not(.btn) { color: #FFF }
.donateWidget a.btn { margin-bottom: 0; margin-top: 30px }
.donateWidget a.btn:hover { background: #E8865B; color: #284251; text-decoration: none }

button.more { border: 3px solid #FEC217; background: transparent; color: #2e414f; font-size: .9em; padding: 8px 16px 6px; letter-spacing: .1em }
button.more:hover { border: 3px solid #2e414f; }

span.citation { line-height: 1.4; font-size: .9rem; display: block }
.citation-link { background: #e5dcda90; padding: 1px 11px; text-decoration: none; color: #2e414f; font-size: 0.6rem; line-height: 1.1; border-radius: 10px; position: relative; top: -2px; font-weight: 600 }
.citation-link.asterisk { padding: 10px 9px 1px; font-size: 1.3rem; line-height: 0.3; top: 4px }
.citation-link:hover { cursor: pointer; background: #cac2c0; text-decoration: none; color: #2e414f }
.bubble-parent { position: relative; z-index: 9 }
.bubble { width: 400px; max-width: 100vw; position: absolute; background-color: white; padding: 20px; box-shadow: 0 0 20px -5px black; border-radius: 10px; top: calc(100% + 5px); left: -200px; transition: opacity 0.2s ease-out, transform 0.2s ease-out, top 0.2s ease-out, bottom 0.2s ease-out, left 0.2s ease-out; opacity: 0; transform: scale(0.95); pointer-events: none }

.bubble.open {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.tooltip-triangle {
  position: absolute;
  z-index: 12;
  box-sizing: border-box;
  margin-left: -0.65em;
  width: 1.3em;
  height: 1.3em;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  background: #fafafa;
  border: 1px solid #c3c3c3;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
  border-top-left-radius: 0;
}

/* transitions */
#drawerNav, .doubledouble .line, a#menuBtn, a.item .overlay, .columns .card { 
    -webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out; 
    -o-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out 
}

#headerWrap { -webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out }

@media only screen and (min-width: 40.063em) {
	h1 { font-size: 3rem }
	h2 { font-size: 2.3em }
	a.donate { padding: 0 30px }
	.donateWidget h3 { margin-bottom: 0 }
	.btn:hover, a.donate:hover { background-color: #617f7f; color: white; text-decoration: none }
	.btn.dark:hover { background-color: #E8865B; color: #294252; text-decoration: none }
	body.home a#logo.two { background: url(../png/logo-header-light.png) no-repeat; background-size: contain }
	.donateWidget a.btn { margin-top: 0 }
}
@media only screen and (max-width: 48em) {
	img.float-left { float: none; margin: 0 0 15px; max-width: 100% !important }
	img.float-right { float: none; margin: 0 0 15px; max-width: 100% !important }
}
@media only screen and (min-width: 48.063em) {
	img.float-left { float: left; margin: 25px 20px 15px 0 }
	img.float-right { float: right; margin: 25px 0 20px 15px }
}

.image-wide img { margin-bottom: 10px }
@media only screen and (min-width: 48.063em) {
	.image-wide { margin: 50px -50px 0 }
}
@media only screen and (min-width: 60em) {
	.image-wide { margin-left: -100px; margin-right: -100px }
}

figcaption { display: block; font-size: .9rem; font-style: italic; margin-top: 10px; line-height: 1.4; text-align: right; margin-bottom: 30px }

/* -----------------------------------------
   HEADER / NAVIGATION
----------------------------------------- */

#headerWrap { height: 76px; position: fixed; left: 0; right: 0; top: 0; z-index: 997; background-color: white }
html.translated-ltr #headerWrap, html.translated-rtl #headerWrap { top: 35px }
html.translated-ltr span.skiptranslate { padding-left: 5px; padding-right: 5px; } 
body.home #headerWrap { background: transparent }
/* body.dark.miniNav #headerWrap { background-color: rgba(31, 31, 31, 0.9) } */
#header { width: 100%; z-index: 3; height: 80px; background: transparent; overflow: hidden; }
#header .row, #headerWrap .row { background: transparent }
.page-header { padding-top: 30px; margin-top: 70px }
body.news-search .page-header { margin-top: 0 }
a#menuBtn { position: relative; display: inline-table; float: left; top: 30px; margin-left: 15px; z-index: 999; margin-right: 20px }
.doubledouble { background: transparent; width: 30px; text-indent: -9999px }
.doubledouble:hover .line, .doubledouble:focus .line { background-color: rgba(0,161,174,1) }
.doubledouble .line { height: 4px; background-color: rgba(38,38,38,.7); display: block; margin-bottom: 4px }
body.drawer a#menuBtn .doubledouble .line { background-color: #294250 !important; height: 2px !important }
body.drawer a#menuBtn .doubledouble .line.one { 
    -ms-transform: translate(0,7px) rotate(-45deg);
    -webkit-transform: translate(0,7px) rotate(-45deg);
    transform: translate(0,7px) rotate(-45deg);
}
body.drawer a#menuBtn .doubledouble .line.three { -ms-transform: translate(0,-5px) rotate(45deg); -webkit-transform: translate(0,-5px) rotate(45deg); transform: translate(0,-5px) rotate(45deg); height: 4px }
body.drawer a#menuBtn .doubledouble .line.two { width: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0 }
body.home .doubledouble .line { background-color: #294252 }

span.formerly { font-weight: 600; font-size: .7rem; line-height: 1; display: block; opacity: .6; margin-top: -12px; margin-left: 56px; transition: opacity .2s; position: absolute }
body.miniNav span.formerly { opacity: 0 }
@media only screen and (min-width: 40.063em) {
	body.home:not(.miniNav) span.formerly { color: white; opacity: 1 }
	span.formerly { margin-top: 0; margin-left: 68px }
}
@media only screen and (min-width: 64em) {
	span.formerly { margin-top: 5px; margin-left: 21px }
}

/* MENU */
ul.action { /* display: none; */ list-style: none; position: relative; padding-top: 0 !important; margin-left: 0; padding: 7px 0 0 0 !important }
ul.action.two li { display: inline-block }
ul.action.two ul { background: rgba(47, 65, 79, 0.8); position: absolute; top: 74px; right: 19px; margin: 0; padding: 10px; margin-bottom: 0; display: none }
body.drawer ul.action.two { right: -200px }
.action.two i { color: #294252; margin-right: 10px; top: 5px }
body.home.miniNav .action.two i { color: #294252 }
.action.two i:hover { color: #FEC217!important }
body.miniNav ul.action.two ul { top: 86px }
ul.action.two ul li { float: none; display: block; margin-right: 0; margin-bottom: 5px }
ul.action.two ul li a { color: white; font-size: .9em; line-height: 1.3em; font-weight: 400; white-space: nowrap; display: block; padding: 4px 10px; background: rgba(31, 31, 31, 0) }
ul.action.two ul li a:hover { background: #7bb7ae; color: #333 }
ul.action li a.donate { margin-top: 19px; margin-right: 10px }
a.donate:hover, ul.action.two ul li a:hover { background-color: #617f7f; color: #FFF }
a#logo.two { background: url(../png/logo-header.png) no-repeat; width: 204px; height: 60px; margin-top: 9px; background-size: contain; -webkit-transition: all 300ms ease-in-out !important; -moz-transition: all 300ms ease-in-out !important; -o-transition: all 300ms ease-in-out !important; -ms-transition: all 300ms ease-in-out !important; transition: all 300ms ease-in-out !important; text-indent: -9999px }
body.miniNav a#logo.two { margin-top: 17px }
@media only screen and (min-width: 40.063em) {
	ul.action.two li:hover ul { display: inline-block }
	.action.two i { margin-right: 15px }
	body.home .action.two i { color: white }
}
@media only screen and (min-width: 64.063em) {
	a#logo.two { margin-top: 18px; margin-left: 15px }
}
a.return { color: white; background-color: transparent; padding: 8px 20px !important; margin-bottom: 20px; display: inline-block !important; text-decoration: none !important; border: 2px solid #FEC217 }
a.return:hover { background: #FEC217; color: black !important }


/* -----------------------------------------
   MAIN NAV
----------------------------------------- */

ul.utility { list-style: none; margin: 8px 0 0 15px; color: #FEC217;  font-size: 10px; display: none; opacity: 1; -webkit-transition: all 100ms ease-in-out; -moz-transition: all 100ms ease-in-out; -o-transition: all 100ms ease-in-out; -ms-transition: all 100ms ease-in-out; transition: all 100ms ease-in-out }
ul.utility li { display: inline-block }
ul.utility li a { color: #FEC217;  font-size: 10px; text-transform: uppercase;  }
ul.utility li a:hover { text-decoration: underline }
ul.utility li a i.fa, ul.utility li a i.fab { font-size: 1.8em; margin-left: 10px; position: relative; top: 2px; opacity: .4 }
ul.utility li a i.fa:hover, ul.utility li a i.fab:hover { opacity: 1 }

ul#mainNav { list-style: none; text-align: left; margin: 47px 0 0; padding-top: 2px; width: auto; display: none }
ul#mainNav li { display: inline-block; vertical-align: top }
ul#mainNav > li { padding-bottom: 0; margin-left: -4px }


ul#mainNav li .row.subcontainer { position: fixed; left: 0; right: 0; margin: 0 !important; top: 100px; display: none }

ul#mainNav li .row.subcontainer .wrapper { max-width: 960px; margin: 0; }
ul#mainNav li .row.subcontainer .columns { padding: 20px 0 40px 0 !important; display: none; }
ul#mainNav li .row.subcontainer .columns h3 { margin-top: 20px; color: #DDD; }
ul#mainNav li .row.subcontainer .columns h3 a { font-size: inherit; padding: inherit; background: transparent !important; color: inherit; }
ul#mainNav li .row.subcontainer .columns h3 a:hover { color: #FEC217; }
ul#mainNav li .row.subcontainer .columns h4 {  font-size: .9em; padding-left: 5px; text-transform: uppercase; color: white; }
ul#mainNav li .row.subcontainer p { color: #DDD; }
ul#mainNav li a { font-family: 'Poppins', serif; font-weight: 500; line-height: 1.5em; color: white; font-size: .9em; display: inline-block; padding: 4px 8px 10px; -webkit-transition: none; -moz-transition: none; -o-transition: none; -ms-transition: none; transition: none; color: #2e414f; text-decoration: none }
body.home ul#mainNav li a { color: #FFF }

ul#mainNav li:hover a, ul#mainNav li a:hover { background: transparent; color: #4597A4; border-radius: 3px 3px 0px 0px }


ul#mainNav li ul { position: relative; padding: 24px 10px 20px 10px; }
ul#mainNav li ul li { display: inherit; }
ul#mainNav li ul li:last-of-type { padding-bottom: 20px; }
ul#mainNav li ul li a { color: #DDD !important; font-family: 'Roboto', sans-serif; font-style: normal; font-size: 1em; display: block; text-transform: none; padding: 5px 0 4px 4px; line-height: 1.1em; margin-bottom: 4px; background: transparent !important; }
ul#mainNav li:hover .row.subcontainer { display: block }
ul#mainNav li:hover .row.subcontainer, ul#mainNav li:hover .row.subcontainer .columns { display: block; }
ul#mainNav li ul li a:hover { background: #7bb7ae !important; color: black !important; border-radius: 3px; }


ul#mainNav li ul li a { font-family: 'Poppins', sans-serif; color: #2e414f !important; font-weight: 500; border-bottom: 1px solid #cbb8a5 }
ul#mainNav li ul li a:hover { border-bottom: 1px solid #2e414f; background: none !important }

ul#mainNav li .row.subcontainer .columns h3, ul#mainNav li .row.subcontainer .columns p { color: #2e414f !important }
ul#mainNav li .row.subcontainer .columns h3 a:hover { color: #617f7f }
ul#mainNav li .row.subcontainer .columns h4 { color: #617f7f; font-family: 'Poppins', sans-serif; text-transform: none; font-weight: 700; font-size: 1.1em }

@media only screen and (min-width: 1200px) {
	ul#mainNav li a { font-size: 1em; padding: 4px 12px 10px }
}

a.newsletter.drop { padding: 12px 20px 10px !important;  font-size: .9em !important; background: rgba(0, 0, 0, 0.1) !important }
a.newsletter.drop:hover { background: rgba(255, 255, 255, 0.3) !important }

.row.subcontainer > .row { border-top: 8px solid; border-left: 0;
	border-right: 0;
	border-bottom: 0; }
body.miniNav #headerWrap > .row { height: 88px }
body.miniNav ul#mainNav { margin-top: 46px }
body.miniNav ul#mainNav li .row.subcontainer { top: 71px }



/* -----------------------------------------
   DRAWER NAV
----------------------------------------- */

#drawerNav { background: #FFF; position: fixed; padding-top: 40px; padding-bottom: 40px; z-index: 998; width: 100%; top: 0; bottom: 0; left: -100%; overflow-y: auto; margin-top: 70px }
body.drawer #drawerNav { left: 0 }
#drawerNav ul { list-style: none; padding: 0 55px; margin-left: 0 }
#drawerNav ul li { margin-bottom: 10px; font-family: 'Poppins', sans-serif; font-weight: 500 }
#drawerNav ul#main li { border-bottom: 1px solid #29425240; padding-bottom: 9px }
#drawerNav ul#main li:last-of-type { border-bottom: 0 }
#drawerNav ul#main li a.btn { color: #2e414f; width: 100%; height: 50px; line-height: 50px; margin-top: 20px; padding-left: 20px }
#drawerNav ul li a { line-height: 1.2em; color: #2e414f; font-size: 1.3em; display: inline-block; color: #617f7f }
#drawerNav ul li ul { margin-top: 20px; padding: 0 20px }
#drawerNav ul li ul li { line-height: 1.2 }
#drawerNav ul li ul li a { font-size: 1rem }
#drawerNav ul#secondary li { font-size: .9em }
#drawerNav ul li a:hover { color: #2e414f }
#drawerNav .accordion-menu a { padding: 0 }
#drawerNav .submenu-toggle::after { border-color: #294252 transparent transparent }
#drawerNav .submenu-toggle { width: 30px; height: 30px; border-radius: 50%; margin-top: 0 }
#drawerNav .menu button { background: rgba(97, 127, 127, .1) }

div#featureWrapper { position: relative; z-index: 996 }
div#featureWrapper .feature { position: relative }

/* SEARCH */
#translate.reveal, #search-modal.reveal { max-width: 800px; padding: 50px 40px; border-radius: 23px; background: #F8F6F6 }
#search-modal.reveal input[type='search'], #search-modal.reveal .btn { margin-bottom: 0 }
#search-modal.reveal input[type='search'] { height: 45px }
#go-search { 
    margin-right: 0; 
    background: #2e414f; 
    color: #FEC217;
    width: 45px;
    padding: 0;
}

#go-search i {
    font-size: 1.2rem;
}

#go-search:hover { 
    background: #FEC217; 
    color: #2e414f 
}

/* Remove the default search icon that was being added with content */
.btn#go-search:after { 
    content: none;
}

.searchResult { border-bottom: 1px solid #E5E5E5; padding-top: 20px; padding-bottom: 20px }
.searchResult h3 { font-size: 1.1rem; margin-bottom: 5px; font-weight: 600 }
.searchResult a { text-decoration: none }
.searchResult p { margin-bottom: 0; margin-top: 8px }
.searchResult span:not(.skiptranslate) { display: block; opacity: .6; font-size: .8rem }
.searchResult:hover { background: #F8F6F6 }

@media only screen and (min-width: 40.063em) {
	body.search article, body.news-search article { margin-top: 180px }
}

/* -----------------------------------------
   HOME PAGE
----------------------------------------- */
.homeFeature { height: 220px; margin-top: 65px }

@media only screen and (min-width: 40.063em) {
	body.news .page-header { margin-top: 93px }
	.page-header, body.news.eye-listing .page-header { margin-top: 150px }
	body.news-search .page-header { margin-top: 0 }
	body.news-search h1 { margin-bottom: 60px }
	#drawerNav { margin-top: 0 }
	.homeFeature { height: 450px; margin-top: 0 }
	/* -------- miniNav -------- */
	body.home .doubledouble .line { background-color: #FFF }
	body.miniNav .doubledouble .line { background-color: #294252 }
	body.miniNav #headerWrap { top: -29px; background: #FFF }
	html.translated-ltr body.miniNav #headerWrap, html.translated-rtl body.miniNav #headerWrap { top: 13px }
	body.miniNav ul#mainNav li a { color: #284251 !important }	 
	body.miniNav a#logo.two { width: 130px; margin-top: 42px; background: url(../png/logo-header.png) no-repeat; background-size: contain }
	body.miniNav ul.action li a.donate { margin-top: 17px }
	body.miniNav ul.utility { opacity: 0 }
}
@media only screen and (min-width: 64.063em) {
	#drawerNav { display: none }
	.homeFeature { height: 600px }
}
p { font-size: 1.1em; line-height: 1.5 }
body.home .row.section { margin-bottom: 100px }
.mission h2, .vision h2 { color: #2e414f; margin-top: 0; text-transform: uppercase; font-size: 2em }
.mission p, .vision p { color: #617f7f; font-size: 1.5em }
.mission, .vision { padding-bottom: 30px }

body.home button.more, body.home a.more { background: transparent; border: 0; color: white; font-size: 1em; letter-spacing: 0 }
body.home button.more:hover, body.home a.more:hover { color: #FEC217; background: rgba(0,0,0,0.5) }

.causeSlider { border: 1px solid #cbb8a4; padding: 20px 15px; margin: 0 15px 30px }
.causeSlider p { text-align: center; margin-bottom: 0; color: #617f7f; font-size: 1.6rem !important }
.causeSlider ul { margin-left: 0; left: 0; bottom: -70px }
.slick-dots li { width: 40px }
.slick-dots li button { width: 30px; height: 4px; background: #97d5d9; padding: 0; opacity: .7 }
.slick-dots li.slick-active button { background: #617F7F; opacity: 1 }
.slick-dots li button:before { content: none }

.row.hero { margin-bottom: 100px }
.row.hero h1 { margin-bottom: 15px }
.row.hero .columns { padding: 0 }
.img-gradient{ position:relative; display:inline-block }
.img-gradient:after { content:''; position:absolute; left:0; top:0; width:100%; height:100%; display:inline-block; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.3) 100%) }
.img-gradient img { display:block }

@media only screen and (min-width: 90.0625em) {
	.homeFeature { height: 700px }
	.hide-for-large { display: none !important }
}

.row.hero .feature-text { position: absolute; bottom: 10%; padding-right: 10px; margin-left: 5%; max-width: 350px }
.row.hero .feature-text h1 { line-height: 1.25; text-transform: uppercase }
.row.hero .feature-text p { color: white; font-weight: 700; font-size: 1.4em; line-height: 1.2 }

.credit { position: absolute; top: 20px; right: 15px; opacity: .8 }
.credit p { color: white; font-weight: 500; font-style: italic; font-size: .85rem }
.credit i { position: relative; top: 1px; margin-right: 5px }

@media only screen and (min-width: 40.063em) {
	.credit { right: 30px; opacity: 1 }
	.credit p { font-size: 1.1rem }
	.img-gradient:after { background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.3) 100%) }
}


a.c-box { padding: 30px; text-decoration: none }
body.home a.c-box { padding: 20px }
.c-box p { margin: 0; font-size: 1em !important; line-height: 1.4; color: white }
.c-box p.heading { text-transform: uppercase; font-weight: 600; font-size: 1.3rem !important }
.c-box i { color: white }
.c-box.color-1 { background: #284251 }
.c-box.color-2 { background: #617F7F }
.c-box.color-3 { background: #FEC217 }
.c-box.color-4 { background: #E8865B }
.c-box.color-3 p, .c-box.color-4 p, .c-box.color-3 i, .c-box.color-4 i { color: #284251 }

 .round-image { border-radius: 50% }
 .subtitle { color: #617F7F; margin:0; font-weight: 500; text-transform: uppercase }
 
.gray-box { background: #E7DBD9; padding: 50px 0 }
.lightgray-box { background: #F8F6F6; padding: 50px 0 }
.stat-box { background: white; text-align: center; padding: 20px 5px; margin-bottom: 20px }
.stat-box i { font-size: 3em; color: #FEC217 }
.stat-box p { font-weight: 600; line-height: 1.35; margin-bottom: 0 }
.stat-box .large-num { font-size: 4em; font-weight: 700; line-height: 1.2; margin: 0 }

.gray-box.stats { padding-top: 50px }
@media only screen and (min-width: 40.063em) {
	.stat-box { padding: 40px 10px }
}
@media only screen and (min-width: 64.063em) {
	.gray-box.stats { padding-top: 0; padding-bottom: 0 }
	.stat-box { margin-bottom: 0 }
	.stat-box:first-child { margin-bottom: 30px }
	.stat-box.offset { margin-top: 60px }
}

h2.header-icon { text-align: center; color: #2e414f; text-transform: uppercase; font-size: 2em; margin-bottom: 45px }
.header-icon:before { content:''; background: url('../png/icon-everest.png') no-repeat; position:relative; top: -30px; margin: 0 auto; display: block; height: 30px; width: 30px; background-size: contain }

/* LINK BAR */
.link-bar { margin-top: 50px; margin-bottom: 120px }
.link-bar .columns { margin-bottom: 10px }
.link-bar a { background: #e5dcda95; padding: 25px 25px 25px; text-decoration: none; height: 100%; width: 100% }
.link-bar a p { font-weight: 600; font-size: 1.1rem !important; line-height: 1.2; margin-bottom: 0; color: #2e414f }
.link-bar a:hover { background: #e5dcda }


/* HOW WE DO IT */
.hcp-model { margin-bottom: 60px }
.hcp-model.map { max-width: 100% !important; background: url('../png/bg-dotmap.png') no-repeat center center; background-size: contain; padding: 40px 0 60px }
.hcp-model .color-box h2, .hcp-model .color-box p { color: #2e414f }
.hcp-model p { margin-bottom: 50px; font-size: 1.15em !important }
.hcp-model h3 span { display: block; font-family: 'Didot Roman', sans-serif; font-size: 1.4em; margin-bottom: 18px }
.color-box { background: #e5dcda; padding: 25px 25px 25px; text-decoration: none; height: 100% }
.color-box p { font-weight: 600; font-size: 1rem !important; line-height: 1.2; margin-bottom: 0 }

p.more { margin-bottom: 0; position: absolute; right: 70px; bottom: 30px; font-weight: 700 }
p.more:after { font-family: "Font Awesome 6 Pro"; content: "\f061"; font-size: 35px; color: #2e414f; margin-left: 8px; display: inline-block; transform: rotate(-45deg); position: absolute; font-weight: 300 }
.color-box:hover p.more { right: 70px }

.color-box.red:after, .color-box.red h3 span, .color-box.red p.more, .color-box.red p.more:after { color: #b54a35 }
.color-box.light-teal:after, .color-box.light-teal h3 span, .color-box.light-teal p.more, .color-box.light-teal p.more:after { color: #617f7f }
.color-box.purple:after, .color-box.purple h3 span, .color-box.purple p.more, .color-box.purple p.more:after { color: #7d669c }
.color-box.yellow:after, .color-box.yellow h3 span, .color-box.yellow p.more, .color-box.yellow p.more:after { color: #FEC217 }
.color-box.red { border-color: #b54a35 }
.color-box.light-teal { border-color: #617f7f }
.color-box.purple { border-color: #7d669c }
.color-box.yellow { border-color: #FEC217 }
.color-box.dark-blue { border-color: #2e414f }


.profileImg { min-height: 400px }
.profileText { padding: 70px 7% }
body.home div#profile h2.sectionHeader { border-bottom: 3px solid white }
.profileText h3 { font-size: 2em; margin-bottom: 30px }
.profileText p { font-size: 1.3em; line-height: 1.3em; margin-bottom: 40px; color: white }


/* VIDEO FEATURE */
#videoFeature { padding-top: 50px; overflow: hidden; position: relative; background: rgba(0,0,0,.3) }
#videoFeature video { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; transform: translateX(-50%) translateY(-50%); background: url('../jpg/video-hcploop-01-poster.jpg') no-repeat; background-size: cover; transition: 1s opacity }
.stopfade { opacity: .5 }
#videoFeature #videoText { color: white; max-width: 800px; margin-top: 40px; margin-bottom: 160px; padding: 0 15px }
#videoFeature #videoText h2 { font-size: 2em; color: white }
#videoFeature #videoText p { margin-bottom: 15px; font-size: 1.3em; line-height: 1.3em; max-width: 600px }
#videoFeature #videoText a { color: white; font-size: 1.3em; border-bottom: 1px solid transparent; opacity: .7 }
#videoFeature #videoText a:hover { border-bottom: 1px solid; opacity: 1 }
a.learn-more:after { font-family: "Font Awesome 6 Pro"; content: "\f061"; font-size: 20px; color: #fff; margin-left: 8px; display: inline-block; transform: rotate(-45deg); position: relative; bottom: -2px }



/* FINANCIALS */
ul.financials { margin-top: 140px; list-style: none }
.financials h2 { margin-bottom: 20px }
ul.financials li { font-size: 1.2em; margin-bottom: 15px }
ul.financials li span.key { height: 30px; width: 30px; background-color: #FEC217; display: inline-block; float: left; border-radius: 50%; }
ul.financials li span.key.gray { background-color: #F79026 }
ul.financials li span.key.white { background-color: #617F7F }
ul.financials li span.data { margin-left: 50px; display: block; line-height: 1em; padding-top: 4px }
ul.financials li span.data b { font-family: 'Poppins', sans-serif; float: left; width: 40px }
ul.financials li span.data span.item { margin-left: 10px }


.color-bars div { position: relative; padding: 6px 0 }
.color-bars div p { margin-bottom: 0; font-weight: 700 }
.color-bars div.fundraising h3 { display: inline-block; transform: rotate(-90deg); position: absolute; right: 10px; background: #bbb; transform-origin: bottom left }
.color-bars div.programs { width: 88%; background: #617F7F; padding: 6px 13px }
.administration { width: 7%; background: #b54a35 }
.fundraising { width: 5%; background: #fcb040 }
.programs:after, .administration:after, .fundraising:after { display: none }



/* WHAT WE'VE DONE */
h2.section-header, .section-header h2 { text-align: center; margin-bottom: 30px }
h2.section-header:after, .section-header h2:after { content: ''; display: block; margin: 0 auto; width: 60px; padding-top: 13px; border-bottom: 4px solid #617F7F; opacity: .6 }
.stat { margin-bottom: 70px }
.stat .columns.img-right { padding: 0 }
.stat .columns.img-left { padding: 0 }
.stat h3 { color: #617f7f; text-transform: uppercase; font-family: 'Poppins', sans-serif; text-align: left; font-size: 70px; display: inline-block }
.stat h3 span.pre { display: block; color: #2e414f; font-size:19px; line-height: 22px; position: relative; padding-left: 62px }
.stat h3 span.pre:before { font-family: "Font Awesome 6 Pro"; content: "\f0f0"; font-size: 40px; color: #cbb8a5; margin-left: 8px; display: inline-block; font-weight: 300; position: absolute; left: 0; bottom: 14px }
.stat.one h3 span.pre { padding-left: 78px }
.stat.one h3 span.pre:before { content: '\f0c0'; font-size: 48px }
.stat two h3 span.pre:before { content: '\f0f0'; font-size: 48px }
.stat.three h3 span.pre { padding-left: 69px }
.stat.three h3 span.pre:before { content: '\f06e'; left: -4px; bottom: 4px; font-size: 48px }
.stat.four h3 span.pre { padding-left: 58px }
.stat.four h3 span.pre:before { content: '\f47d'; left: -8px }
.stat h3 span.value { display: inline-block; line-height: 30px }
.stat h3 span.post { color: #2e414f; font-size: 30px; line-height: 30px; display: block }
.stat h3 span.post.side { display: inline-block }
.stat-data h3 span.num { display: block }

@media only screen and (min-width: 40.063em) {
	.link-bar .columns { margin-bottom: 0 }
	.stat { position: relative; display: table; width: 100%; height: 300px; margin-bottom: 20px }
	.stat .row, .stat .columns { display: flex; height: 100%; justify-content: center; align-items: center }
	.stat-data { display: table-cell; text-align: center; vertical-align: middle }
	.stat .columns.img-right { padding-left: 20px; padding-right: 0 }
	.stat .columns.img-left { padding-right: 20px; padding-left: 0 }
}
@media only screen and (min-width: 64.063em) {
	.stat.four h3 span.pre { padding-left: 58px; margin-bottom: 5px }
	.stat-data h3 span.num { top: -29px; position: relative; display: inline-block }
}


/* -----------------------------------------
   PAGE LAYOUTS
----------------------------------------- */

.content-main { margin-bottom: 80px }

article { text-align: left; margin: 0 auto; margin-top: 100px; margin-bottom: 100px; max-width: 75em }
article p.subhead { text-transform: uppercase; font-size: 1.5em }
article h3 { margin-bottom: 20px }
article p { font-size: 1em; line-height: 1.5em }
article.box { padding: 60px }
article.box.teal { background: #a2beb9 }
article.box.teal * { color: white }

.textCallout { border: 3px solid #FBB044; border-radius: 20px; padding: 25px }
.textCallout a.button { background: #FBB044; color: #111; margin-bottom: 0 }

/* CAUSE */
.row.basket article { margin-bottom: 100px; max-width: 64em }
.row.basket article h1 { margin-bottom: 60px; font-size: 4em }
.row.basket article h2 { font-family: 'Roboto', sans-serif; text-transform: none !important; font-size: 1.4em; margin-top: 0; font-weight: 300; line-height: 1.4em }
.row.surgeons article { margin-top: 120px }
.row.surgeons article p { text-align: left }
.row.surgeons article h3 { font-size: 2.5em; line-height: 1.2em; margin-bottom: 0 }
.row.surgeons article h4 { font-family: 'Roboto', sans-serif !important; font-weight: 400; font-style: normal; font-size: 1.4em; line-height: 1.2em; margin-top: 40px; margin-bottom: 20px }
.row.tan h3:nth-of-type(2) { margin-top: 80px }
body.cause .row.tan p { text-align: left }
.row.closeup h3 { margin-bottom: 60px }
.row.dark h3 {  font-size: 1.8em; text-transform: uppercase; font-weight: bold }
.row.dark h3::first-line { font-weight: normal }
.row.man h2 { font-size: 3em; line-height: 1.2em; text-transform: uppercase }
.row.man p { font-size: 1.2em; line-height: 1.2em }

.row.map { background-image: url('../jpg/img-bg-map.jpg'); background-position: center center; background-size: cover }
.row.basket *, .row.map *, .row.surgeons *, .row.closeup *, .row.man */*, .country .row*/ { color: white }


.row.interactive { display: none }
.row.interactive .map { background: transparent url('../png/bg-dotmap-dark.png') no-repeat center right; height: 800px; position: relative; background-size: contain }
.row.interactive .map h3 { color: #a3beb9; margin-bottom: 20px; max-width: 990px; text-align: left; margin: 0 auto; padding-left: 15px }
.row.interactive .map h4 { color: white; font-size: 1.8em; text-transform: uppercase }

.row.interactive .marker#sudan { top: 55.5%; right: 45% }
.row.interactive .marker#nepal { top: 44%; right: 31% }
.row.interactive .marker#india { top: 48%; right: 32% }
.row.interactive .marker#bhutan { top: 46.5%; right: 29% }
.row.interactive .marker#myanmar { top: 50.5%; right: 26% }
.row.interactive .marker#ghana { top: 56.5%; right: 54.5% }
.row.interactive .marker#ethiopia { top: 55%; right: 41.5% }
.row.interactive .marker#rwanda { top: 60%; right: 46% }

.row.interactive .marker:hover .bubble { display: block }


.row.interactive .marker { position: absolute; width: 20px; height: 20px; background: #2e414f; border-radius: 20px; z-index: 99 }
.row.interactive .marker:hover { width: 26px; height: 26px; margin-top: -3px; margin-right: -3px }
.row.interactive .marker .bubble { background: #617F7F; position: absolute; top: -64px; left: -50px; color: white; font-size: 1.2em; line-height: 1em; border-radius: 10px; padding: 20px 30px; display: none }


.row.matrix .row { margin: -8px }
.row.matrix .columns { padding: 8px }
.row.matrix a { display: block }
.row.discover a.discover-1 { background: url('../jpg/img-bg-eye-test.jpg') no-repeat center center; background-size: cover; height: 416px; transition: none }
.row.discover a.discover-1:hover { background: linear-gradient( rgba(237, 168, 65, 0.7), rgba(237, 168, 65, 0.7) ), url('../jpg/img-bg-eye-test.jpg') no-repeat center center; background-size: cover }
.row.discover a.discover-2 { background: url('../jpg/img-bg-eye-patch.jpg') no-repeat center center; background-size: cover; height: 416px; transition: none }
.row.discover a.discover-2:hover { background: linear-gradient( rgba(237, 168, 65, 0.7), rgba(237, 168, 65, 0.7) ), url('../jpg/img-bg-eye-patch.jpg') no-repeat center center; background-size: cover }
.row.discover h3, .row.partner h3 { font-size: 4em; line-height: 1.2em; color: #442b2b }
.row.donate h3 { font-size: 4em; line-height: 1.2em; color: #442b2b; margin-bottom: 30px }
.row.donate h4 { font-family: 'MercuryRoman'; font-weight: 400; font-style: normal; font-size: 1.6em; margin-bottom: 20px }
.row.partner p, .row.donate p { font-family: 'MercuryRoman'; font-weight: 400; font-style: normal; font-size: 1.2em; line-height: 1.6em }
.row.difference h2 { color: #442b2b }
.row.difference h2 u { color: #82afa7 }
.row.difference h2 a { color: inherit; transition: 0 }
.row.difference h2 a:hover { text-decoration: underline; color: #82afa7 }
.align-bottom { position: absolute; bottom: 8px; padding: 20px }
.row.matrix * { color: white }
.row.discover a h4 { font-size: 2.4em; line-height: 1em; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 12px }
.row.discover a h5 { border: 2px solid; margin: 0; padding: 8px;  font-size: .7em; text-transform: uppercase; letter-spacing: .2em; display: inline-block }
.row.partner a.partner-1 { background: url('../jpg/img-bg-posters.jpg') no-repeat center center; background-size: cover; height: 416px; transition: none }
.row.partner a.partner-1:hover { background: linear-gradient( rgba(237, 168, 65, 0.5), rgba(237, 168, 65, 0.5) ), url('../jpg/img-bg-posters.jpg') no-repeat center center; background-size: cover }
.row.partner a.partner-2 { background-color: #a3beb9; height: 200px }
.row.partner a.partner-3 { background: url('../jpg/img-bg-handshake.jpg') no-repeat center center; background-size: cover; height: 200px; transition: none }
.row.partner a.partner-3:hover { background: linear-gradient( rgba(237, 168, 65, 0.5), rgba(237, 168, 65, 0.5) ), url('../jpg/img-bg-handshake.jpg') no-repeat center center; background-size: cover }
.row.partner a h4 { font-size: 2.4em; line-height: 1em; letter-spacing: .05em; margin-bottom: 0px }
.row.partner a.partner-2 h4, .row.partner a.partner-3 h4 { font-size: 1.8em; text-transform: uppercase }

.row.donate div.donate-1 a.tile { background: url('../jpg/img-bg-social.jpg') no-repeat center center; background-size: cover; height: 200px; transition: none }
.row.donate div.donate-1 a.tile:hover { background: linear-gradient( rgba(237, 168, 65, 0.5), rgba(237, 168, 65, 0.5) ), url('../jpg/img-bg-social.jpg') no-repeat center center; background-size: cover }

.row.donate div.donate-2 a.tile { background-color: #37534e; height: 200px }
.row.donate div.donate-2 a.tile:hover, .row.donate div.donate-4 a.tile:hover, .row.partner a.partner-2:hover, .row.partner a.partner-red:hover { background-color: #eda841 }


.row.donate div.donate-3 a.tile { background: url('../jpg/img-bg-two-men.jpg') no-repeat center center; background-size: cover; height: 416px; transition: none }
.row.donate div.donate-3 a.tile:hover { background: linear-gradient( rgba(237, 168, 65, 0.6), rgba(237, 168, 65, 0.6) ), url('../jpg/img-bg-two-men.jpg') no-repeat center center; background-size: cover }

.row.donate div.donate-red a.tile { background-color: #aa503a; height: 200px }
.row.donate div.donate-4 a.tile { background-color: #2f2f3d; height: 200px }
.row.donate div.donate-5 a.tile { background-color: #e1d19c; height: 200px }
.row.donate div.donate-6 a.tile { background-color: #a3beb9; height: 200px }
.row.donate div.donate-7 a.tile { background: url('../jpg/img-bg-microscope.jpg') no-repeat center center; background-size: cover; height: 416px; transition: none }
.row.donate div.donate-7 a.tile:hover { background: linear-gradient( rgba(237, 168, 65, 0.7), rgba(237, 168, 65, 0.7) ), url('../jpg/img-bg-microscope.jpg') no-repeat center center; background-size: cover }

.row.donate h4 { font-size: 1.6em; line-height: 1.2em; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 0px }
.row.donate div.donate-3 a h4 { margin-bottom: 12px }
.row.donate a h5 { border: 2px solid; margin: 0; padding: 8px;  font-size: .7em; text-transform: uppercase; letter-spacing: .2em; display: inline-block }

.tileWrap:hover .moreInfo { opacity: 1 }
.moreInfo { position: absolute; top: 8px; right: 8px; bottom: 8px; left: 8px; background: rgba(237, 168, 65, .9); opacity: 0; transition: all 400ms ease }
.row.donate p.more, .row.partner p.more {  font-size: .7em; text-transform: uppercase; margin-top: 5px; margin-bottom: 0; opacity: .7 }
.moreInfo p { font-size: 1.4em; color: white; font-size: 1.6em !important; line-height: 1em !important }
.matrix a.ctaLink { color: white; width: 80%; max-width: 230px; height: inherit !important; margin-top: 15px; margin-bottom: 0; opacity: .6 }
.matrix a.ctaLink:hover { background: rgba(255, 255, 255, 0.2) !important; color: white; border: 2px solid white }
.moreInfo a.ctaLink { opacity: 1 }



/* -----------------------------------------
   THE WORK
----------------------------------------- */

ul.gridNav { list-style: none; margin: 80px 0 0 0 }
ul.gridNav li { display: block }
ul.gridNav li a { height: 250px;  text-transform: uppercase; color: white; font-size: 1.4em; line-height: 1em; padding-top: 110px }
ul.gridNav li a.orange:hover { background: #b07d36 }
ul.gridNav li a.teal:hover { background: #648d85 }
ul.gridNav li a.eggplant:hover { background: #1e1a30 }
ul.gridNav li a.yellow:hover { background: #e5d296 }

ul.gridNav li a.yellow, ul.gridNav li a.teal { color: #2e414f }
@media only screen and (min-width: 40.063em) {
	ul.gridNav li a.yellow, ul.gridNav li a.eggplant { text-align: right; padding-left: 80px }
	ul.gridNav li a.teal, ul.gridNav li a.orange { text-align: left; padding-right: 80px }
}
article.panel { max-width: 100%; padding: 120px 0 0 }


.panel p.intro { font-size: 1.4em; line-height: 1.2em; color: #988981; margin-bottom: 50px; color: white; max-width: 940px; margin: 0 auto }
.panel h3.intro { max-width: 940px; margin: 0 auto }


.row.work-panels { margin-bottom: 60px }

p.intro { font-size: 1.4em; line-height: 1.3em; color: #2e414f; margin-bottom: 50px; font-weight: 600 }
body.simple p.intro { color: #617f7f }
p.data { font-size: 1rem !important }
.work ul.tabs.vertical { border: 1px solid #617F7F; display: table }
.work ul.tabs.vertical li.tab-title { display: grid }
.tabs .tab-title > a { margin: 0; border: 0; border-bottom: 1px solid #617F7F; background: transparent; font-family: 'Poppins', sans-serif; text-transform: none; color: #2e414f; font-weight: 500; padding: 10px 0 10px 30px }
.tabs .tab-title > a:hover { color: #2e414f }
.tabs .tab-title:last-of-type > a { border-bottom: 0 }
.tabs .tab-title.active a { background: #7bccd2; border: inherit; border-bottom: 1px solid #617F7F; position: relative; color: #2e414f }
body.work .tabs .tab-title.active a:after { font-family: "Font Awesome 6 Pro"; content: "\f061"; font-size: 28px; color: white; margin-left: 8px; display: inline-block; position: absolute; bottom: 0; right: 20px; top: 10px; font-weight: 300 }

.case-studies .case { text-align: center; margin-bottom: 25px }
.case-studies .case h3 { color: white; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) }
.case-studies .case:hover .img-gradient:after { opacity: 0 }
.why img { max-height: 117px }
.why a { color: #2e414f }
.why a:hover { transform: scale(1.05) }
.why .columns:first-of-type { margin-bottom: 50px }

/* WORK */
body.work div.featureTextWrapper { bottom: 20px }
body.work div.featureText.basic h1 { font-size: 2em }
body.work div.featureText.basic .catBox { font-size: 1em; margin-bottom: 15px }




/* -----------------------------------------
   WHO WE ARE
----------------------------------------- */

body.who-we-are .row.basket article h1 { font-size: 3em }
.row.whoFeature article { max-width: 64em; margin-top: 180px }
.whoFeature h1 { color: white; text-transform: lowercase; font-size: 4em; text-align: left }
.featureQuote { margin-top: 180px; width: 80% }
.whoFeature h3 { color: white }
.whoFeature p, .featureQuote p { color: white; font-family: 'Roboto', sans-serif; text-align: left; margin-bottom: 15px; font-size: 24px; line-height: 1.3em }
.featureQuote p.quote::before { content: open-quote; font-size: 2.2em; line-height: 0; display: block;  margin-bottom: 15px }
.featureQuote p.quote { line-height: 1.3em }
/* .founders { background: linear-gradient( rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25) ), url('../img/img-who-founders.jpg') no-repeat center top; background-size: cover }
.founders article { margin-top: 120px; text-align: left } */

.row.whoTeal { background: linear-gradient( rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25) ), url('../jpg/img-bg-financials.jpg') no-repeat center top; background-size: cover; -webkit-filter: sepia(.7); filter: sepia(.7) }
.whoTeal h3, .whoTeal p { color: white; text-align: left }
.whoTeal h3 { text-transform: lowercase; font-size: 3.3em; line-height: 1em }
.whoTeal p { font-size: 24px; line-height: 1.3em; margin-bottom: 30px }
.whoTeal article { margin-top: 200px; margin-bottom: 300px }

.row.aboutStory { background: #25252d }
.row.aboutStory article { margin-top: 80px }
h2.mountain { text-indent: -9999px; height: 1px }
.row.aboutStory a.go.light { margin-top: 30px }
div.colorBlocks a { padding: 40px 10px }
div.colorBlocks a.link.waytoolong { -ms-word-break: break-all; word-break: break-all; word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto }

.linkBoxes .box { border: 1px solid #E8865B; height: 100%; padding: 30px 30px 100px; position: relative }
.linkBoxes .box h4 { color: #E8865B; font-weight: 600 }
.linkBoxes .box .links { height: 80px; display: block; position: absolute; bottom: 0 }
.linkBoxes .box a { color: #294252; font-weight: 700; text-decoration: none }
.linkBoxes .box a:hover { color: #4597A4 }
.linkBoxes .box a:after { font-family: "Font Awesome 6 Pro"; content: "\f178"; font-size: 1rem; margin-left: 8px; font-weight: 500; right: 20px; transition: .1s all }
.linkBoxes .box a:hover:after { margin-left: 15px }
.linkBoxes .box p { font-size: 1rem } 


/* OUR STORY LANDING */

div.colorBlocks a span.chapter { font-weight: 400; font-style: normal; font-size: .9em; letter-spacing: .1em }
div.colorBlocks a span.desc { font-weight: 400; margin-top: 15px; display: inline-block; text-transform: none; letter-spacing: 0; font-size: 1.2em; color: rgba(255,255,255,.6); font-style: italic; line-height: 1.2em }
article.storyNav div.colorBlocks a span.container { vertical-align: top }

h2.mountainText { text-transform: uppercase }
h2.mountainText span { font-size: 1.7em; line-height: .9em; color: #d8cec1; letter-spacing: -.05em; font-family: 'Poppins', sans-serif; font-weight: 300 }
h2.mountainText span.eggplant { color: #6b6c73; background: transparent !important }
h2.mountainText span.orange { color: #c65e48; background: transparent !important }
h2.mountainText span.yellow { color: #eca852; background: transparent !important }
h2.mountainText span.ltblue { color: #a3bbb6 }



/* -----------------------------------------
   GET INVOLVED
----------------------------------------- */

.involvedFeature h1 { margin-bottom: 100px }
.involvedFeature h3 { color: white; font-size: 2.5em }
.involvedFeature article { margin-top: 160px }
body.get-involved ul.get a { height: 250px; display: table; text-transform: uppercase; color: white; font-size: 2em; line-height: 1em; text-align: center }
body.get-involved ul.get a span { display: table-cell; vertical-align: middle }
body.get-involved ul.get a.teal { background: #a3beb9 url('../png/icon-discover-lg.png') no-repeat center top }
body.get-involved ul.get a.teal:hover { background: #96b0ab url('../png/icon-discover-lg.png') no-repeat center top !important }
body.get-involved ul.get a.orange { background: #FEC217 url('../png/icon-partner-lg.png') no-repeat center top; background-position: -100px 0 }
body.get-involved ul.get a.orange:hover { background: #eca13d url('../png/icon-partner-lg.png') no-repeat center top !important; background-position: -100px 0 !important }
body.get-involved ul.get a.gray { background: #353535 url('../png/icon-support-lg.png') no-repeat center top; background-position: 300px 0 }
body.get-involved ul.get a.gray:hover { background: #403f3f url('../png/icon-support-lg.png') no-repeat center top !important; background-position: 300px 0 !important }

ul.get { margin: 0 }



/* -----------------------------------------
   STORIES
----------------------------------------- */

div.storyFeature { position: relative; height: 250px; margin-bottom: 65px; width: 100% }
body.donate div.storyFeature { height: 200px; margin-bottom: 0; margin-top: 100px }
div.featureTextWrapper { position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); text-align: center; width: 100% }
body.postcards div.featureTextWrapper { top: 340px }
div.featureText.basic { color: white; margin: 0 auto; position: relative; max-width: 700px; padding: 0 20px }
div.featureText.basic h1 { color: white; font-size: 4em; letter-spacing: 0 !important }
div.featureText.basic h2 { color: #2e414f; text-transform: uppercase; letter-spacing: .08em; background: #FEC217; display: inline-block; padding: 3px 8px 1px; line-height: 1em }
div.featureText.basic p { text-align: center; opacity: .8 }
div.featureText.basic a { position: relative; font-size: 1em; color: white; top: 370px;  text-transform: uppercase; border: 1px solid white; display: inline-block; padding: 8px 15px 5px 15px }
div.featureText.basic .catBox { text-transform: uppercase; font-size: 1.6em; border: 2px solid white; display: inline-block; padding: 15px 25px 10px 25px; margin-bottom: 30px; border-radius: 18px }
div.featureText.basic.customType.left { margin-left: 5% }
div.featureText.basic.customType.right { margin-right: 5% }
div.featureText.basic.customType h1 { text-indent: -9999px }
div.featureText.basic.customType { width: 550px; height: 340px }

.featureTextWrapper.largeType div.featureText.basic.customType { width: 550px; height: 500px }
.featureTextWrapper.largeType { top: 120px }

body.postcards h1 { text-transform: lowercase }
body.postcards h3 { text-transform: uppercase; font-size: 1.2em; color: black; text-align: center }



/* NOT SURE WE NEED .story ANYMORE?? */
.story article { margin-top: 0; margin-bottom: 40px; text-align: left }
.story h2 { line-height: 1em; text-align: left; border-bottom: 1px solid; padding-bottom: 7px; display: inline-block }
.story h3 { font-size: 1.6em; line-height: 1.2em; text-align: left }
.story h2 + h3 { margin-top: 0 }
.story img.right { margin-left: 1.6em }
.story .sidebar p { margin-bottom: 40px }
/* ^^ NOT SURE WE NEED .story ANYMORE?? ^^ */



.publication { position: absolute; top: -80px; right: 0; width: 80%; z-index: 9999 }
.publication p { padding-right: 200px; text-align: right; line-height: .9em; font-size: .9em; color: #988981 }
.publication img { width: 170px; position: absolute; top: -180px; right: 0; -webkit-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.6); -moz-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.6); box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.6) }

.bigQuote { background: #2e414f; min-height: 400px; z-index: 9; position: relative }
.bigQuote article { margin-top: 80px; margin-bottom: 80px }
.bigQuote article p { font-size: 2.2em; line-height: 1em; color: white; text-align: left; background: url('../png/icon-quote.png') no-repeat top left; background-size: 28px 36px; padding-top: 50px }
.bigQuote article p.attr { background: none; padding-top: 0; font-size: 1.5em }
div.bigQuote + div#footer { margin-top: 300px }

div.bigFeature article { background: white; padding: 2em 4em }
div.bigFeature div.sectionHeader { text-align: center }
div.bigFeature div.sectionHeader h2 { font-size: 3em; color: white; border: 1px solid white; text-transform: uppercase; padding: 25px 20px 20px 20px; margin: 7em 0 }
div.row.twoColumn { max-width: 75em; border-bottom: 1px solid #DDD; padding-bottom: 40px }
div.row.twoColumn .columns { padding: 0 }
div.row.twoColumn p { padding: 0 2em }
div.row.twoColumn .ctaLink { margin-left: 32px }
h3.mtn { background: url('../gif/icon-mtn-sm.gif') no-repeat center top; background-size: 25px; text-align: center; padding-top: 25px; margin-bottom: 20px }
div.row.twoColumn p:last-of-type { margin-bottom: 30px }
div.row.twoColumn.story p.intro { padding-left: 32px; margin-bottom: 10px; font-size: 1.6em }


ul.opn { list-style: none; margin-left: 0 !important; padding-left: 10px; margin-bottom: 30px }
.sidebar ul.opn h3 { font-family: 'Poppins', sans-serif; border-bottom: 1px solid #bca58f; margin-bottom: 15px; color: #3b4751; font-size: 1.5rem; font-weight: 500 !important; font-style: normal }
ul.opn ul { list-style: none }
ul.opn li { font-weight: 500; border-bottom: 1px solid #bca58f; font-size: 1.1rem; margin-bottom: 3px }
ul.opn li ul li { font-size: .9rem; margin-bottom: 0 }
ul.opn li ul li a { font-weight: 300 }
ul.opn li ul li:last-of-type { border-bottom: 0 }
ul.opn li a { color: #3b4751 !important; font-weight: 500; display: inline-block; line-height: 1.2; margin-bottom: 0; padding: 8px 3px; text-decoration: none !important }
ul.opn li a span { border-bottom: 1px solid transparent }
ul.opn li ul { margin-bottom: 10px }

@media only screen and (min-width: 40em) { 
	body.what-we-do ul.opn { margin-top: 60px }
	ul.opn { border-left: 1px solid #bca58f; padding-left: 30px }
	ul.opn li { border-bottom: 0 }
	ul.opn li a { margin-bottom: 6px; padding: inherit }
	ul.opn li a:hover span { border-bottom: 1px solid #cfc5bb; color: #617f7f }
}


/* -----------------------------------------
   EYE ON THE WORLD
----------------------------------------- */

div#featureWrapper.eye div.storyFeature { height: 660px }
div#featureWrapper.eye div.storyFeature article { max-width: 63em }
div#featureWrapper.eye.listing div.storyFeature { height: 400px }
div#featureWrapper.eye div.featureTextWrapper { top: 270px }
div#featureWrapper.eye.listing div.featureTextWrapper { top: 170px }
div#featureWrapper.eye div.featureTextWrapper h1 { font-family: 'SofiaRoughBlackOne', sans-serif; letter-spacing: 0; font-size: 3.5em }
div#featureWrapper.eye div.featureTextWrapper p { text-transform: inherit }

div.row.story.eyeGrid { text-align: center; margin-bottom: 150px }
div.row.story.eyeGrid article { max-width: 81.25em }

div.row.story.eyeGrid .navWrapper { border-bottom: 1px solid #999 }
div.row.story.eyeGrid ul.sectionNav { list-style: none; margin: 0 auto; display: inline-block; position: relative; top: 3px }
div.row.story.eyeGrid ul.sectionNav li { display: inline-block; padding: 2px 18px 0 }
div.row.story.eyeGrid ul.sectionNav li a { color: #2e414f; text-transform: uppercase; font-size: 2em; line-height: 3em; text-decoration: none }
div.row.story.eyeGrid ul.sectionNav li a:hover { color: #83a7a0 }
div.row.story.eyeGrid ul.sectionNav li.here a { border-bottom: 5px solid #999 }

div.row.story.eyeGrid .columns { padding: 4px !important }
div.row.story.eyeGrid .columns .cardWrapper { height: 400px }
div.row.story.eyeGrid .columns .cardWrapper a { width: 100%; text-decoration: none !important }
div.row.story.eyeGrid .columns .cardWrapper.press { height: 300px }

div.row.story.eyeGrid .columns .card { opacity: 0; height: 400px; width: 100%; background: rgba(0,0,0,.7); padding-top: 20px; z-index: 1; position: relative; overflow: hidden }
div.row.story.eyeGrid .columns .cardWrapper.press .card { height: 300px }
div.row.story.eyeGrid .columns .cardWrapper:hover .card, div.row.story.eyeGrid .columns .cardWrapper.show .card { opacity: 1 }
div.row.story.eyeGrid .columns .card * { color: white }
div.row.story.eyeGrid .columns .cardWrapper span { color: #2e414f; background: rgba(255,255,255,.8);  text-transform: uppercase; font-size: .6em; padding: 6px 8px 4px 20px; margin-top: 20px; display: inline-block; position: absolute; z-index: 2 }
div.row.story.eyeGrid .columns .card h3, div.row.story.eyeGrid .columns .card p { margin-left: 20px; margin-right: 20px }
div.row.story.eyeGrid .columns .card h3 { font-size: 2.2em; line-height: 1em }
div.row.story.eyeGrid .columns .card p { font-size: 1.1em; line-height: 1.3em }
div.row.story.eyeGrid .columns .cardWrapper.press .card h3 { margin-top: 10px; font-size: 1.8em }
div.row.story.eyeGrid .columns .cardWrapper.press .card p { font-size: 1em; line-height: 1.2em }
.card p.read {  text-transform: uppercase; font-size: .8em !important; border-top: 1px solid; padding-top: 10px }

.related h3 { font-weight: 700; border-bottom: 1px solid; font-size: 1.2em; letter-spacing: .03em; margin-top: 0; margin-bottom: 20px !important; padding-bottom: 5px }
.related a { display: block !important; color: #617f7f !important; font-weight: 700; text-decoration: none !important; margin-bottom: 6px; line-height: 1.4 }
.related a:hover { text-decoration: underline !important }
@media only screen and (min-width: 40.063em) {
	.related.stuck { position: fixed; top: 175px; max-width: 300px }
	.addthis_toolbox { position: fixed; top: 190px; left: -40px }
}
@media only screen and (min-width: 1345px) {
	.addthis_toolbox { left: 50px }
}
div.breadcrumb { position: relative; font-size: .9em; margin-left: 6px }
div.breadcrumb a { color: #2e414f; text-decoration: underline }
div.breadcrumb a:hover { text-decoration: underline }

li.search { margin-left: 15px }
li.search a { text-indent: -9999px }
li.search:after { font-family: "Font Awesome 6 Pro"; content: "\f002"; font-size: 19px; color: #4597A4; top: -3px; position: absolute; font-weight: 700; cursor: pointer }
li.search:hover:after { color: #2e414f }
div.searchBox { padding-left: 0; padding-right: 0; height: 0; opacity: 0; transition: .2s all }
div.searchBox input { padding: 0 30px; font-size: 1.4em; height: 48px; line-height: 48px; font-size: 1.4em; margin-left: 15px }
div.searchBox input::placeholder { color: #BBB }
div.searchBox input:focus::placeholder { color: #EEE }
.searchBox.show { opacity: 1; height: 100px }
ul.search-mobile { margin-bottom: 15px; display: table; width: 100% }
ul.search-mobile li.search { color: #617f7f; font-weight: 700; float: right }
ul.search-mobile li.search:after { position: inherit; margin-left: 10px }
select#touchsplashmenu { background: #617F7F; border: 0; color: white; font-weight: 700; font-size: 1.2em; height: 42px; padding-left: 17px; padding-right: 40px; /* Make room for the icon */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
}

/* Update icon positioning */
.hide-for-large {
    position: relative;
}

.hide-for-large i.far.fa-angle-down { 
    position: absolute;
    right: 20px;
    top: 37%;
    transform: translateY(-50%);
    color: white; 
    font-weight: 700; 
    font-size: 1.2em;
    pointer-events: none; /* Ensure clicks pass through to select */
    z-index: 1;
}

/* Remove the default select arrow */
select#touchsplashmenu::-ms-expand {
    display: none;
}


/* NEW DEVELOPMENT */

body.eye-listing div#featureWrapper.eye div.storyFeature { height: 400px }
.columns.newsItem { text-decoration: none !important; padding: 15px 15px 0 !important; margin-top: 30px }
.columns.newsItem a { text-decoration: none !important }
.columns.newsItem a div { line-height: 22px }
div.newsItem { transition: all .3s; margin-bottom: 25px }
div.newsItem a.read { background: #617F7F; color: white; padding: 2px 10px; font-weight: 700 }
div.newsItem img { margin-bottom: 15px }
span.label { position: absolute; left: 0; top: 10px; -webkit-font-smoothing: antialiased; background: black; text-transform: uppercase; font-weight: 700; height: 30px; line-height: 30px; padding: 0 12px 0 22px; margin: 0; font-size: 15px }

.newsNav { background: #f4f4f4; padding: 40px 0 0 0 }
.newsNav h2 { text-transform: none; border-bottom: 1px solid #AAA; font-weight: 400; font-size: 1.4em; line-height: 1.1em; padding-bottom: 20px; padding-left: 20px; margin-bottom: 0 }
.newsNav ul { list-style: none; margin-bottom: 40px; margin-left: 0 }
.newsNav ul li a { display: block !important; color: #777; font-size: 1em; line-height: 40px; padding-left: 35px; position: relative }
.newsNav ul li a:hover { background: #E5E5E5 }

.newsNav ul li.active a { background: #617F7F; color: white; font-weight: 400 }
.newsNav ul li.active a:after { border-left-color: #617f7f }

.alt-img { overflow: hidden; width: 100%; aspect-ratio: 16/9 }

div.pagination { padding: 30px 15px; clear: both }
.row.pagination { border-top: 1px solid #b2aeb0; max-width: 95% !important; width: 95% }
ul.pagination li a { border: 1px solid transparent; border-radius: 50%; height: 35px; width: 35px; line-height: 33px; text-align: center; font-size: 1.2em; font-weight: 700; color: #2e414f; padding: 0; text-decoration: none }
ul.pagination li a:hover { cursor: pointer }
ul.pagination li.here a { border: 1px solid #b54a35 }
ul.pagination li.ellipsis:hover a { background: transparent; cursor: default }
.pagination .ellipsis::after { display: none }

form.newsSearch { max-width: 400px; margin-top: 40px }
form.newsSearch input[type="text"] { color: #2e414f; font-weight: 700; font-size: 1.2em; text-transform: uppercase; border-bototm: 1px solid #CCC; border-top: 0; border-left: 0; border-right: 0; outline: none; float: left; display: inline-block; box-shadow: none }

body.eye-listing div.row p { color: #2e414f; font-size: 1em; line-height: 1.3 }
div#newsListing { margin-top: 40px }
body.news-search div#newsListing { margin-top: 0 }
div#newsListing.columns { padding-left: 0; padding-right: 0 }
div.newsItem img { margin-bottom: 0 }


div.newsItem h3 { margin: 15px 0 10px; font-size: 1.2em !important; font-weight: 600; line-height: 1.2em; color: #2e414f }
div.newsItem:hover h3 { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: #d1c0bd }
/* div.newsItem h3:after { content: ''; display: block; width: 55px; height: 4px; background: transparent; margin-top: 1px; margin-bottom: 2px } */
div.newsItem .text { padding: 0 15px 15px }
.newsItem:hover p { color: #2e414f }

.list-text { padding: 10px 15px 0 }

/* ----------------------
	FEATURED SLIDER AND BLOCK SLIDER
---------------------- */
.slick-track { position: relative; left: 0; top: 0; display: block; margin-left: auto; margin-right: auto; }
.slick-with-captions img { padding: 5px; max-height: 280px }
.js-slick-with-captions--next i, .js-slick-with-captions--prev i { font-size: 2rem }
.js-slick-with-captions--next, .js-slick-with-captions--prev { color: #0a0a0a }
.js-slick-with-captions--next:hover, .js-slick-with-captions--prev:hover { color: #0a0a0a }
.js-slick-with-captions--next, .js-slick-with-captions--prev { color: #0a0a0a }
.js-slick-with-captions--next:hover, .js-slick-with-captions--prev:hover { color: #0a0a0a }
.js-slick-with-captions--slides { margin-bottom: 15px }
.js-slick-with-captions--slides.row.columns { margin-bottom: 0; padding: 0 0 15px 0 !important }
.slick-lightbox-slick-item-inner { text-align: left }
.js-slick-with-captions--captions .slide-caption h4 { margin-bottom: 2px }
.slide-caption p { font-size: .9rem; line-height: 1.3; font-style: italic }
.slick-lightbox-slick-caption h4, .slick-lightbox-slick-caption { color: #fefefe } 
button.slick-arrow { display: none !important }
.slick-lightbox-slick-item-inner { position: relative }
.slick-lightbox-slick-caption{ position: absolute; bottom: 0px; padding: 20px; background: rgba(0,0,0,.4) }
.slick-with-captions .row { margin: 0 }
.slick-with-captions { margin-bottom: 40px }
@media only screen and (min-width: 40.063em) {
.slick-with-captions img { max-height: none }
}

/* ----------------------
	NEWS
---------------------- */
body.news .top-spacer { margin-bottom: 45px }
body.eye-on-the-world .page-header h1 { display: inline-block; margin-right: 30px }
ul.categories.menu li.active > a { color: #b54a35; background: transparent }
/* ul.categories.menu li a:after { content: '|'; margin-left: 15px; color: #2e414f; font-weight: 400; font-size: 14px; top: -1px; position: relative } */
ul.categories.menu li { border-right: 1px solid }
ul.categories li:last-of-type { border-right: 0 }
ul.categories.menu { margin-left: 0; display: none; margin-bottom: 20px }
ul.categories.menu li a { font-weight: 600; padding: 0 10px 0 10px }

body.eye-on-the-world .row.hero { margin-bottom: 40px }
.row.hero .feature-news { background: #617F7F; padding: 25px }
.row.hero .feature-news .cats a, .row.hero .feature-news a h2, .row.hero .feature-news a { color: #FFF !important; text-decoration: none }
.row.hero .feature-news .cats a { margin-bottom: 7px }

@media only screen and (min-width: 64em) {
	ul.categories.menu { display: flex }
}

h1 { display: inline-block }
.row.hero .feature-news a h2 { font-size: 1.5em; margin-bottom: 10px }
.row.hero .feature-news a p.desc { display: none; color: #FFFFFF }
.row.hero .feature-news a p.date, body.eye-listing div.row p.date { font-size: .85em; margin-top: 0 }
.row.hero .feature-news .more { color: #FFFFFF }

.cats { margin-bottom: 0 }
.cats a { font-weight: 700; font-size: .8em; text-decoration: none !important; color: inherit !important; color: #4597A4 }
.cats a:hover { text-decoration: underline !important }




/* -----------------------------------------
   BASIC TPL
----------------------------------------- */

.row.story.basic { max-width: 75em; padding-top: 70px }
body.tan .row.donateCta { background: white }
.row.donateCta { max-width: 100%; margin-bottom: 40px }
.row.donateCta h3 { font-size: 1.4em; text-transform: none !important; margin-top: 10px; font-weight: 400; color: #2e414f; margin-bottom: 25px; border-bottom: 1px solid; padding-bottom: 10px }
.row.donateCta p { font-family: 'Poppins', sans-serif; font-size: 1.1em; color: #2e414f; line-height: 1.4em; margin-bottom: 30px }
.row.donateCta a.button { font-family: 'Poppins', sans-serif; background: #FEC217; text-transform: uppercase; cursor: pointer !important; color: #284251; text-decoration: none }
.row.donateCta a.button:hover { background: #284251; color: #FEC217 }
.row.story.basic article { margin-top: 0 }
.row.story.basic h1 { margin-bottom: 50px }


div.caption { position: absolute; bottom: 0; right: 0; background: rgba(0,0,0,.6); color: white; padding: 40px }
div.caption p { margin-bottom: 0; font-size: 1.5em; line-height: 1.1em }

.row.green { background: #203330; color: white }
.row.green article { margin-top: 60px; margin-bottom: 90px }
.row.green h2.boxHeader { color: white; text-transform: uppercase; font-size: 1em; border: 1px solid white; display: inline-block; padding: 20px 30px; margin-bottom: 50px }

.colorBlocks { margin: 40px 0 }
.colorBlocks a { padding: 50px 10px; float: left; background: #aa503a; color: white !important; text-transform: uppercase; text-decoration: none !important; text-align: center;  font-size: .9em !important; letter-spacing: .2em }
.colorBlocks a span.container { vertical-align: middle;  }
.colorBlocks a span.underline { border-bottom: 2px solid rgba(255, 255, 255, 0.45) }
.colorBlocks a:hover { background: #914836; text-decoration: none !important }
.colorBlocks a:nth-of-type(2) { background: #cb903e }
.colorBlocks a:nth-of-type(2):hover { background: #b07d35 }
.colorBlocks a:nth-of-type(3)  { background: #617F7F }
.colorBlocks a:nth-of-type(3):hover { background: #5b827c }
.colorBlocks a:nth-of-type(4)  { background: #5b5c62 }
.colorBlocks a:nth-of-type(4):hover { background: #4c4c4f }
.colorBlocks a:nth-of-type(5)  { background: #95938a }
.colorBlocks a:nth-of-type(5):hover { background: #7d7d7c }


/* -----------------------------------------
   EXPANDING GRID SECTION OF BASIC PAGE
----------------------------------------- */

div.gridExpand { margin: 2px 1px !important; background: white }
div.gridExpand .columns { padding: 2px }
div.gridExpand .cardWrapper { background: #96b0ab }
div.gridExpand .cardWrapper img { position: relative; z-index: 50 }
div.gridExpand .cardWrapper h3 { color: white; font-size: 2em; line-height: 1.2em; position: absolute; z-index: 100; top: 0; left: 0; bottom: 0; right: 0; background: linear-gradient( rgba(30, 30, 30, 0.45), rgba(30, 30, 30, 0.45) ); margin: 0; padding: 40px 20px 20px; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out }
div.gridExpand .cardWrapper h3:hover { background: linear-gradient( rgba(30, 30, 30, 0.65), rgba(30, 30, 30, 0.65) ) }
div.gridResults article { text-align: left }
div.gridResults article h2 { text-transform: uppercase; font-size: 2em }


/* FAQ */
.row.accordion { margin-bottom: 60px }
.accordion { margin-left: 15px }
.accordion h3:first-of-type { margin-top: 0 }
.accordion .accordion-navigation>a { /* line-height: 3em;  */width: 100% !important; border-bottom: 1px solid transparent; display: block; padding-bottom: 5px; padding-left: 0 }
.accordion .accordion-navigation.active>a { border-bottom: 1px solid #999 }
.accordion .accordion-navigation>a, .accordion dd>a, .accordion .accordion-navigation.active>a, .accordion dd.active>a, .accordion .accordion-navigation>.content.active, .accordion dd>.content.active { background: transparent !important; text-decoration: none !important }
.accordion .accordion-navigation>.content, .accordion dd>.content { padding-left: 0 }




/* -----------------------------------------
   BIO LISTING
----------------------------------------- */

ul.bioList { margin: 0 auto; max-width: 64em; list-style: none; margin-bottom: 80px }
ul.bioList a { text-decoration: none !important }
ul.bioList a:hover { cursor: pointer !important }
ul.bioList li { padding-left: 5px; padding-right: 5px; margin-bottom: 4px }
div.name { background: #a2beb9; color: #2e414f; padding: 10px; font-size: 1.3em }
ul.bioList li.linked:hover { opacity: .9 }
ul.bioList li:hover div.name { background: #FEC217 }
a.staff, div.staff { display: inline-block; margin-bottom: 20px }
a.staff h3, div.staff h3 { font-size: 1em; margin: 20px 0 5px }
a.staff p, div.staff p { color: #777; font-size: .9em; line-height: 1.2em }
a.staff div, div.staff div { min-height: 70px }
h2.staffHeader { border-bottom: 1px solid #2e414f; display: block; margin-bottom: 20px; font-size: 1.6em; padding-bottom: 5px; margin-left: 5px; margin-top: 50px; color: #2e414f }




/* -----------------------------------------
   BIO DETAIL
----------------------------------------- */

div.storyFeature.bio { height: 260px; margin-top: 20px }
div.storyFeature.bio.large { height: 550px }
/* div.storyFeature.bio div.featureTextWrapper { top: 137px } */
div.storyFeature.bio.large div.featureTextWrapper { top: 350px; opacity: .9 }
div.storyFeature.bio div.featureText.basic h1 { font-size: 2em; line-height: .8em; background: #25252d; display: inline-block; padding: 30px 40px 20px }
div.storyFeature.bio div.featureText.basic h1 span { font-size: .4em; text-transform: uppercase }
.headshot { float: right; margin: 0 0 15px 15px }
.inthenews { text-align: left; margin-bottom: 40px }
.inthenews span.date {  font-size: .8em; text-transform: uppercase }
.inthenews h4 { color: white; text-transform: uppercase; font-size: 1.8em; margin-bottom: 10px; line-height: 1em }
.inthenews p { line-height: 1.4em }
.inthenews a.more { background: #e9e4d2; color: #2e414f; padding: 1px 6px 0; text-transform: uppercase; font-size: .6em; line-height: 1.7em }
.inthenews a.more:hover { text-decoration: none; background: #FEC217 }

@media only screen and (min-width: 40.063em) {
	div.storyFeature.bio { height: 380px; margin-top: 100px }
}

ul.jobs { list-style: none; margin-left: 0 !important; margin-top: 40px }
ul.jobs li { margin-bottom: 10px }
ul.jobs a { text-decoration: none !important }
ul.jobs p a { display: inline-block !important; margin-bottom: 5px; border-bottom: 1px solid transparent }
ul.jobs a:hover { border-bottom: 1px solid #999; color: #000 !important }
ul.jobs h3 { margin: 0 0 6px 0; color: #444; font-size: 1.2em; text-transform: none; display: inline-block; border-bottom: 1px solid transparent }
ul.jobs p { color: #2e414f; font-size: .9em; line-height: 1.2em }


/* -----------------------------------------
   MODALS
----------------------------------------- */

.featImg button { position: absolute; bottom: 50px; left: 50px; z-index: 9; background: rgba(48,64,79,.25); border: 1px solid white; color: white; border-radius: 35px; font-family: 'Poppins'; text-transform: uppercase; font-weight: 600; font-size: 1.2rem; padding: 18px 30px }
.featImg button:hover { background: rgba(48,64,79,.6) }
.featImg button i { font-size: 1.3rem; margin-left: 9px; position: relative; bottom: -1px }


.reveal { max-width: 990px; width: 100% }
.reveal.popup { max-width: 600px }
.reveal .columns.text { padding: 2.5em }
.reveal .columns.img { padding: 0 }
.reveal h3 { text-transform: uppercase; font-size: 2em; line-height: 1.2em; margin-bottom: 0 }
.reveal h4 { font-size: 1em }
.reveal h1 { margin-bottom: 22px }
.reveal, dialog { background: #FFF; padding: 0; border: 0; box-shadow: 0 0 6px rgba(0,0,0,0.4); border-radius: 0 }
.reveal .close-reveal-modal, dialog .close-reveal-modal { color: #f2aa3e }
.reveal-bg { position: fixed; background: rgba(0, 0, 0, 0.7); z-index: 998 }
.reveal a.donate { border: 2px solid; margin: 0; color: #2e414f; width: 45%; text-align: center; font-size: .5em; text-transform: uppercase; letter-spacing: .2em }

div#modal-donate a.close-reveal-modal { color: #444 }

div#modal-newsletter.reveal.open { z-index: 999 !important }
.reveal.open { z-index: 999 !important; overflow-y: scroll; max-height: 80%; position: fixed; top: 0 !important }
.reveal.video { background: #2e414f; padding: 30px; box-shadow: 0 0 0px; max-width: 1200px }
.reveal.video .row.video { padding-top: 0; margin-bottom: 0 !important }
.reveal.video h3 { color: white }

a.ctaLink { color: #2e414f; background: transparent; border: 2px solid; margin: 0 1em 40px 0; padding: 8px 0 6px; width: 40%; text-align: center;  font-size: .7em; text-transform: uppercase; letter-spacing: .2em; display: inline-block }
a.ctaLink.dl { background: transparent url('../png/icon-dl.png') no-repeat right center; background-size: 22px }
a.ctaLink:hover { color: white; background: #a2beb9; border: 2px solid #a2beb9 }
a.ctaLink.dl:hover { color: white; background: #a2beb9 url('../png/icon-dl.png') no-repeat right center; background-size: 22px; border: 2px solid #a2beb9 }

ul.supportSocial { list-style: none; margin-top: 2em }
ul.supportSocial li { display: block;  }
ul.supportSocial li a { color: #2e414f; padding-left: 75px; line-height: 60px; font-size: 2.4em }
ul.supportSocial li a.twitter, ul.supportSocial li a.facebook, ul.supportSocial li a.insta, ul.supportSocial li a.linkedin { margin-top: 8px; background: url('../png/icon-social-tan-v.png') no-repeat; background-size: 60px 305px;  height: 60px; width: 60px; opacity: .7 }
ul.supportSocial li a.twitter { background-position: 0 0 }
ul.supportSocial li a.facebook { background-position: 0 -61px }
ul.supportSocial li a.insta { background-position: 0 -122px }
ul.supportSocial li a.linkedin { background-position: 0 -183px }
ul.supportSocial li a:hover { opacity: 1 }

.embed-container { position: relative; padding: 0 0 56.25% 0; height: 0; overflow: hidden; max-width: 100%; display: block; margin: 25px 0; width: 100% }
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100% }

#mc_embed_signup{ clear:left }
#mc_embed_signup form { padding: 0 !important }
#mc_embed_signup .mc-field-group label { font-size: 1.3em }
#mc_embed_signup h2 { font-size: 2em !important }
#mc_embed_signup .button { background-color: #FEC217 !important; color: #2e414f !important; font-family: 'Poppins', sans-serif; text-transform: uppercase; font-size: 1em !important; font-weight: normal !important; height: auto !important; line-height: 37px !important }
#mc_embed_signup .button.subtle { background-color: #dad6d2 !important }
#mc_embed_signup .button.subtle:hover { background-color: #c1bdb9 !important }



/* -----------------------------------------
   PHOTO GALLERY
----------------------------------------- */

.row.gallery { max-width: 1200px; padding: 200px 40px 0 }
.row.galleria { height: inherit; padding-top: 50px; max-width: 1200px; margin: 0 auto; margin-bottom: 100px }
div.galleria-container.notouch.galleria-theme-folio.fullscreen { z-index: 9998 !important }
.galleria-close { top: 120px !important; right: 20px !important; background: url('../png/img-close-bg.png') no-repeat; height: 40px; width: 40px; background-size: contain }
.galleria-close:hover { background-position: 0 0 }
.row.video { padding-top: 50px; max-width: 1200px; margin: 0 auto }



/* -----------------------------------------
   PAYPAL FORM PAGE
----------------------------------------- */

.row.story.paypal { max-width: 75em; padding-top: 160px }
.row.story.paypal article { margin-top: 0 }
input[type="checkbox"], input[type="radio"] { margin: 0 10px 0 0 }
input#amount { max-width: 250px; height: 50px }
form#paypal fieldset { border: 0 }
form#paypal label { font-size: 19px; line-height: 30px }
div.optionSection { padding: 0 10px }
div.optionSection div.int { padding: 10px 30px; border-bottom: 2px solid #f1aa4a; margin-bottom: 20px }
div.optionSection div.int * { color: #888; font-size: 1em !important; line-height: 1.4em }
.submit { background: #f1aa4a; padding: 10px; border: none; text-transform: uppercase; font-size: 16px; cursor: pointer }


/* -----------------------------------------
   FORMS STYLING
----------------------------------------- */

.dftop_label .dform_label { font-size: 1em; text-align: left; font-weight: normal !important; color: #4d4d4d }
.row.story ul.checkboxes { margin-left: 0 }
.dform_container h3 { text-transform: inherit !important; font-size: 1.8em; color: #988981 }
.dftop_label .dform_label { line-height: .9em !important }
ul.radios { margin-left: 20px !important }
input[type="radio"] { margin: 0 2px 0 -20px }
div#forms_field_9 .dform_label { margin-bottom: 15px !important }
.dform_container input.text { padding-left: 8px !important; margin-bottom: 0px !important }
.dform_container select { padding: 3px 0 3px 15px !important }
.dform_element.submit_button { margin-top: 30px }
fieldset legend { font-size: 1em; text-align: left; font-weight: normal !important; color: #FEC217 }
div.featureWrapperTabs.rfp ul.tabs { position: relative; border-bottom: 1px solid #DDD; margin-left: 15px; margin-top: 40px }
div.featureWrapperTabs.rfp ul.tabs .tab-title.active a { background: #FEC217 }
div.featureWrapperTabs.rfp ul.tabs .tab-title>a { background: transparent; padding: 10px 15px }
.dform_address .address_country select { margin-bottom: 0 }


/* -----------------------------------------
   FOOTER
----------------------------------------- */

#footer { background: #2e414f; padding: 40px 0 20px 0 }
#footer * { color: #f8f6f6 }
#footer .row { max-width: 75em }
#footer p, #footer ul li, #footer ol li { font-size: 1rem }
#footer .validation { float: left; width: 32%; padding: 7px }
#footer p.legal { font-size: .8rem; margin-top: 30px }
#footer img.logo { width: 127px; margin-bottom: 25px }
#footer li { text-transform: uppercase; letter-spacing: 0.05em; line-height: 1.1em; margin-bottom: 8px }
#footer h3 { font-size: 1.3em; margin-top: 0; border-bottom: 1px solid #FFFFFF50; padding-bottom: 8px; margin-bottom: 15px }
#footer li, #footer a { font-family: 'Poppins', serif; font-weight: 400; text-transform: none; text-decoration: none }
#footer a:hover { color: inherit !important; text-decoration: underline !important; text-decoration-thickness: 1px !important; text-underline-offset: 3px }
#footer .block { border-bottom: 1px solid #617F7F; padding: 24px 10px 20px }
#footer .block:last-of-type { border-bottom: 0 }
#footer .block ul, #footer .block p { margin-bottom: 0 }
#footer .menu.social { margin-bottom: 20px }
#footer .menu.social a { padding: 4px 8px; }
#footer .menu.social i { font-size: 1.8rem }

#footer input[type='text'], #footer input[type='email'] { margin-bottom: 10px; opacity: .3; color: #333 !important }
#footer input[type='text']:focus, #footer input[type='email']:focus { opacity: 1; color: #333 !important }
#footer button[type='submit'] { background: #fec217; color: #2e414f; border: 0; text-transform: uppercase; padding: 10px 25px; font-weight: 600 }


/* -----------------------------------------
   CONTACT
----------------------------------------- */

article.contact { max-width: 1500px }
article.contact h1 { text-align: center; font-size: 4em !important; margin-bottom: 100px !important }
article.contact div.contact-left { min-height: 500px; background: #2f2f3d; padding-top: 40px }
article.contact div.contact-left p, article.contact div.contact-left h4 { color: white }
article.contact div.contact-left p { font-size: 1em; line-height: 1.4em }
article.contact div.contact-left h4 { text-transform: uppercase; margin-bottom: 2px }
article.contact div.contact-left a { color: white }

article.contact-message p { margin-top: 60px; font-size: 1.2em; text-align: center }
article.contact-message p a { color: #82afa7; text-decoration: underline }
a.newsletter { background: #f2aa3f !important; letter-spacing: 0; font-size: 1em; padding: 5px 20px 4px; color: #2e414f !important; text-transform: uppercase; border-radius: 2px !important; margin-top: 8px; text-decoration: none !important;  display: inline-block !important }
a.newsletter:hover { background: white !important }


/* -----------------------------------------
   EMAIL LISTING
----------------------------------------- */

ul.emailListing { list-style: none; margin-left: 0 }
ul.emailListing li a:hover { text-decoration: underline }



/* -----------------------------------------
   OUR STORY
----------------------------------------- */

.chapterHeading h2, .chapterNext div a { color: white; font-family: 'MercuryRoman'; font-weight: 400; font-style: normal; font-size: .9em; line-height: 30px; text-transform: uppercase }
.chapterHeading h2 span, .chapterNext div a span { text-transform: lowercase; font-style: italic }
.chapterHeading h2 span.dash, .chapterNext div a span.dash { text-indent: -9999px; background: url('../png/icon-mtn-white.png') no-repeat center center; display: inline-block; position: relative; width: 30px; height: 30px; background-size: contain; margin: 0 15px }
.chapterNext div a span.dash { line-height: 55px; height: 55px; background-position: 0 15px; background-size: 24px }
.chapterNext div a { background: url('../png/img-story-chapter-arrow.png') no-repeat; background-size: 349px; color: white; line-height: 52px; height: 52px; width: 349px; text-align: left; padding-left: 20px }
.chapterNext a:hover { background-position: 0 -52px }

.chapterNext ul { list-style: none; width: 320px; margin: 0 auto }
.chapterNext ul li { color: white; font-style: italic; line-height: 2em }
.chapterNext ul li a { color: white }
.chapterNext ul li span.chapter { text-transform: uppercase; font-style: normal; font-size: .9em }
.chapterNext ul li a:hover { text-decoration: underline }
.chapterNext ul.top { margin-bottom: 40px }
.chapterNext ul.bottom { margin-top: 40px }

div.scroller { padding: 80px 0 160px; overflow: scroll }
div.scroller h3 { max-width: 800px; color: white; margin: 0 auto; text-align: center; margin-bottom: 40px }
div.scroller p { text-align: justify; margin-bottom: 3em !important }
div.scroller p, div.scroller ul { max-width: 800px; color: white; margin: 0 auto; padding: 0 30px; font-size: 1.6em; line-height: 2.6em }
div.scroller ul li { margin-left: 25px; line-height: 1.8em; margin-bottom: 20px }


/* animate */
.row.storyQuote article, .row.storyStats img { position: relative; top: 40px; opacity: 0; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out }
.row.storyQuote.animate article, .row.storyStats.animate img { /* -ms-transform: scale(1.1, 1.1); -webkit-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); */ opacity: 1; top: 0 }


/* story quote */
.row.storyQuote { background: white }
.row.storyQuote article { background: url('../png/img-story-quote.png') no-repeat center top; background-size: 30px; padding-top: 40px; max-width: 42em }
.row.storyQuote p { font-size: 1em; text-transform: uppercase; color: #444; text-align: center; font-style: italic; line-height: 2.4em }
.row.storyQuote p.attr { text-transform: none; color: #888; font-style: normal }
.row.storyQuote p.attr span { color: #2e414f }


/* photo grid */
.row.story.twoColumn.deep { max-width: none; padding-bottom: 0; padding-top: 0; border-bottom: 0 }
.row.story.twoColumn.deep .tall, .row.story.twoColumn.deep .tall .cardWrapper, .row.story.twoColumn.deep .columns.tall .card { height: 1200px }
.row.story.twoColumn.deep .medium, .row.story.twoColumn.deep .medium .cardWrapper, .row.story.twoColumn.deep .columns.medium .card { height: 800px }
.row.story.twoColumn.deep .short, .row.story.twoColumn.deep .short .cardWrapper, .row.story.twoColumn.deep .columns .card { height: 400px }


/* stats */
.row.storyStats { background: #9e9593; color: white }
.row.storyStats article { max-width: 64em; margin-top: 80px; text-align: center }
.row.storyStats article h3, .row.storyStats article p { margin-bottom: 40px; margin: 0 auto }
.row.storyStats article h3 { margin-bottom: 40px; display: inline-block; border-bottom: 1px solid }
.row.storyStats article p { font-size: 1.6em; text-transform: uppercase; max-width: 760px }
.row.storyStats article img { margin-bottom: 80px }

body.our-story div.featureTextWrapper { bottom: inherit; top: 0; position: relative }
body.our-story div.featureTextWrapper.chapterNext { bottom: inherit; top: 40% }


.row.story.twoColumn.deep .columns { position: relative }
.row.story.twoColumn.deep .columns .cardWrapper a { width: 100%; text-decoration: none !important }
.row.story.twoColumn.deep .columns .card { opacity: 0; height: 400px; width: 100%; background: rgba(237,232,217,.9); padding-top: 20px; z-index: 1; position: relative; overflow: hidden }
.row.story.twoColumn.deep .columns .card.show { opacity: 1; background: rgba(0,0,0,.5) }
.row.story.twoColumn.deep .columns .cardWrapper:hover .card, .row.story.twoColumn.deep .columns .cardWrapper.show .card { opacity: 1 }
.row.story.twoColumn.deep .columns .card * { color: white }
.row.story.twoColumn.deep .columns .cardWrapper span { color: #2e414f; background: rgba(255,255,255,.8);  text-transform: uppercase; font-size: .6em; padding: 6px 8px 4px 20px; margin-top: 20px; display: inline-block; position: absolute; z-index: 2 }
.row.story.twoColumn.deep .columns .card h3, .row.story.twoColumn.deep .columns .card p { margin-left: 40px; margin-right: 40px }
.row.story.twoColumn.deep .columns .card h3 { font-size: 2.2em; line-height: 1em; color: #2e414f }
.row.story.twoColumn.deep .columns .card p { font-size: 1.1em; line-height: 1.3em; padding: 0; color: #2e414f }


/* LOGO FIELD */
.row.logos img { width: 100% }
.row.logos .column { margin-bottom: 30px }
.grayscale { filter: grayscale(1) }
  
  

body.our-story { background-repeat: no-repeat !important; background-position: center center !important; background-attachment: fixed !important; background-size: cover !important }
body.our-story #footer { margin-top: 0 }
body.our-story .top-spacer { display: none }
body.our-story .backgroundPhoto { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-attachment: fixed; background-size: cover; z-index: -1; opacity: 0; -webkit-transition: all 800ms ease-in-out; -moz-transition: all 800ms ease-in-out; -o-transition: all 800ms ease-in-out; -ms-transition: all 800ms ease-in-out; transition: all 800ms ease-in-out }
body.our-story .backgroundPhoto.show { opacity: 1 }
p.byline { font-size: 1em !important; text-align: center !important; font-style: italic; opacity: .8 }


/* Global photos */
body.our-story.global .featureText.basic.customType { background: url('../png/img-story-global-type.png') no-repeat center center; background-size: contain }
body.our-story.global { background-image:url('../jpg/img-story-global-redcoat.jpg') !important }
body.our-story.global .backgroundPhoto.two { background-image:url('../jpg/img-story-global-child.jpg') }
body.our-story.global .backgroundPhoto.three { background-image:url('../jpg/img-story-global-twomen.jpg') }

/* Transformative photos */
body.our-story.transformative div.featureText.basic.customType { width: inherit; max-width: 750px }
body.our-story.transformative .featureText.basic.customType { background: url('../png/img-story-trans-type.png') no-repeat center center; background-size: contain }
body.our-story.transformative { background-image:url('../jpg/img-story-trans-ice.jpg') !important }
body.our-story.transformative .backgroundPhoto.two { background-image:url('../jpg/img-story-trans-greeting.jpg'); background-position: center top }
body.our-story.transformative .backgroundPhoto.three { background-image:url('../jpg/img-story-trans-trio.jpg'); background-position: center top }

/* Innovative photos */
body.our-story.innovative div.featureText.basic.customType { width: inherit; max-width: 300px }
body.our-story.innovative .featureText.basic.customType { background: url('../png/img-feat-text-25-crop.png') no-repeat center center; background-size: contain }
body.our-story.innovative { background-image:url('../jpg/img-story-inno-baby.jpg') !important }
body.our-story.innovative .backgroundPhoto.two { background-image:url('../jpg/img-story-inno-drs.jpg'); background-position: center top }
body.our-story.innovative .backgroundPhoto.three { background-image:url('../jpg/img-story-inno-running.jpg'); background-position: center top }

/* Scalable photos */
body.our-story.scalable div.featureText.basic.customType { width: inherit; max-width: 750px }
body.our-story.scalable .featureText.basic.customType { background: url('../png/img-story-scalable-type.png') no-repeat center center; background-size: contain }
body.our-story.scalable { background-image:url('../jpg/img-story-scalable-runner.jpg') !important }
body.our-story.scalable .backgroundPhoto.two { background-image:url('../jpg/img-story-scalable-greenwrap.jpg'); background-position: center top }
body.our-story.scalable .backgroundPhoto.three { background-image:url('../img-story-scalable-running.html'); background-position: center top }

/* Life-changing photos */
body.our-story.life-changing div.featureText.basic.customType { width: inherit; max-width: 400px }
body.our-story.life-changing .featureText.basic.customType { background: url('../png/img-story-life-type.png') no-repeat center center; background-size: contain }
body.our-story.life-changing { background-image:url('../jpg/img-story-life-eye.jpg') !important }
body.our-story.life-changing .backgroundPhoto.two { background-image:url('../jpg/img-story-life-threeladies.jpg'); background-position: center top }
body.our-story.life-changing .backgroundPhoto.three { background-image:url('../jpg/img-story-life-thumbsup.jpg'); background-position: center top }


/* -----------------------------------------
   60 Minutes
----------------------------------------- */

#mc_embed_signup.compact { /* background: #cdcac0;  */display: table; width: 100%; /* border-bottom: 1px solid #cdcac0; border-top: 1px solid #cdcac0; */ padding: 30px 0; margin-bottom: 40px }
#mc_embed_signup.compact h3 { margin-top: 10px }
#mc_embed_signup.compact .columns.one { padding-left: 0 }

.donateSpecial { background: #ebeae9 }
.donateSpecial .row.story article { margin: 0px auto; margin-top: 40px; margin-bottom: 60px }
.donateSpecial h3 { margin: 0 0 30px }
.donateSpecial a.button { background: #eea853; text-decoration: none; text-transform: uppercase; font-family: 'PT Sans Narrow', Arial, sans-serif; font-weight: 400; font-size: 1.4em; border-radius: 5px; padding: 10px 30px }
.donateSpecial a.button:hover { background: #cf9043; color: #2e414f }
.donateSpecial ul.tabs { margin-left: 0 !important }

.donateSpecial .tabs-content>.content { padding-bottom: 0; padding-top: 15px }
.donateSpecial .tabs-content>.content p { margin-bottom: 10px; font-size: 1.4em; line-height: 1em }


/* -----------------------------------------
   DONATE PAGE
----------------------------------------- */

.BBFormSection { margin-bottom: 40px !important }
.BBFormContainer .BBFormFieldContainer { font-family: 'Roboto', sans-serif !important; font-weight: 300 !important; }
.BBFormContainer .BBFormSectionHeading { border-color: #AAA !important; padding: 10px 2px 2px !important }
.BBFormContainer .BBFormSectionHeading label.BBFormFieldLabelEdit { font-family: 'Roboto', sans-serif; font-weight: 300; font-size: 1.1em; line-height: 1em }
label.BBFormRadioLabel { background: #d2d0c6 !important; color: #565656 !important; border: 0 !important }

label.BBFormRadioLabel:hover { background: #797667 !important; color: #FFF !important }
label.BBFormRadioLabelGivingLevelSelected { background: #2e414f !important; color: #FFF !important; border: 0 !important }
.BBFormContainer .BBFormRadioLabelGivingLevelSelected .BBFormGiftOtherAmount { margin: inherit !important }
.BBFormContainer { border-radius: 0 !important; padding: 30px !important }
.BBFormContainer .BBDFormSectionComments .BBFormTextArea, .BBFormContainer .BBDFormSectionComments .BBFormFieldLabel { margin-left: 0 !important }
.BBFormContainer .BBFormFieldRecurrenceInfo .BBFormSelectList { padding: 0 20px 0 15px !important }
.BBFormContainer .BBFormButtonRow .BBFormFieldLabel { display: none !important }

body.home .top-spacer, body.basic .top-spacer { margin-bottom: 0 }
body.donate .featureText h1, body.contact-us .featureText h1 { font-size: 3em !important; line-height: .9em; margin-bottom: .3em }
body.contact-us p { margin-bottom: 25px }
body.contact-us .row.story h2, body.contact-us .row.story h3, .sidebar h3, .story .sidebar h3 { font-weight: 400; font-style: normal; text-transform: none !important; color: #2e414f; border-bottom: 1px solid #b5b2a4; padding-bottom: 8px; font-size: 1.3em; margin-bottom: 12px; margin-top: 8px }



ul.no-bullet.more li { margin-bottom: 17px; font-size: .95rem }
ul.no-bullet.more li a { background: #FEC217; padding: 8px 14px; border-radius: 6px !important }
ul.no-bullet.more li a:hover { text-decoration: none !important; color: white !important; background: #617F7F }

ul.no-bullet.more li a.teal { background: #617F7F; color: white; padding: 14px;	display: inline-block; font-size: 1.2rem }
ul.no-bullet.more li a.teal:hover { color: #333 !important; background: #FEC217 }

.BBFormFieldContainer .BBFormFieldRecurrenceInfo { padding-left: 0 !important }


div.featureText.basic p.quote { font-size: 1.2em !important; text-transform: uppercase !important; opacity: 1; line-height: 1em; max-width: 800px; margin: 0 auto; padding: 0 20px }
div.featureText.basic p.quote span { text-transform: none; font-size: .6em }


@media only screen and (min-width: 40.063em) {
	.freeform-row .freeform-column-6 { float: left; width: 49% }
	.freeform-row .freeform-column-6:last-of-type { margin-left: 2% }
	div.featureText.basic p.quote { font-size: 2.3em !important; margin: 0 auto }
}

/* -----------------------------------------
   SUSTAINERS CIRCLE
----------------------------------------- */

body.donate.sustainers-circle {	background: #ffffff; }
body.sustainers-circle .row { max-width: 64em; }
body.sustainers-circle .row .row { max-width: 75em; margin: 0 auto; }
body.sustainers-circle div.row.fullWidth { max-width: 100%; }
body.sustainers-circle h2.sectionHeader {  text-transform: uppercase; border-bottom: 3px solid #FEC217; display: inline-block; margin-bottom: 20px; font-size: 1.6em; padding-bottom: 5px }
body.sustainers-circle #panel1 { padding-top: 60px; }
body.sustainers-circle #panel2 { padding-top: 0; }

body.sustainers-circle a.more { border: 3px solid black; background: transparent; color: black;  text-transform: uppercase; font-size: 1em; padding: 10px 20px 8px; letter-spacing: .1em }
body.sustainers-circle button.more:hover, body.sustainers-circle a.more:hover { color: white; background: rgba(0,0,0,0.1); }

div.donorProfile { padding: 20px 30px 40px; }
div.donorProfile h3 { font-size: 1.1rem; }
div.donorProfile img { display: block; margin-bottom: 20px; }

div.featureWrapperTabs { position: relative; margin: 0 auto; }
div.featureWrapperTabs ul.tabs { position: absolute; bottom: 0; left: 0; width: 100%; border-bottom: 1px solid #aea19960; padding-left: 16px }
div.featureWrapperTabs ul.tabs .tab-title>a { color: #000000; border: 0; margin-bottom: 0; padding: 15px 20px; line-height: 1; background: #00000020 }
div.featureWrapperTabs ul.tabs .tab-title.active a { border: 0; background: #617F7F; color: white }
div.featureWrapperTabs ul.tabs .tab-title.active a#tab-donate { background: #617F7F }

div.sustainerIntro { padding-bottom: 60px; }
div.sustainerIntro h2 { text-align: center; margin-bottom: 30px; color: #aea199; }
div.sustainerIntro p { font-size: 1.1em; line-height: 1.6em; }

div.sustainerBody { padding-bottom: 80px; }
div.sustainerBody li { margin-bottom: 15px; }

div.sustainerFacts { padding: 60px 0; }
div.sustainerFacts h2.sectionHeader { margin-bottom: 40px !important; }
div.sustainerFacts h3 { color: #7db7ae; line-height: .9em; }
div.sustainerFacts p { font-size: 1.4em; }

div.sustainerCta h2, div.sustainerCta2 h2,
div.sustainerCta h3, div.sustainerCta2 h3,
div.sustainerCta h4, div.sustainerCta2 h4,
div.sustainerCta h5, div.sustainerCta2 h5 { font-family: 'Roboto', sans-serif; text-rendering: optimizeLegibility; font-weight: 300; }

div.sustainerCta h2 { font-size: 28px; margin-bottom: 10px; line-height: 1.2; }
div.sustainerCta h4 { font-size: 18px; margin-bottom: 32px; line-height: 1.4; }

div.sustainerCta h2, div.sustainerCta h3, div.sustainerCta h4 { color: white; }

div.sustainerCta2 h2 { font-size: 24px; margin-bottom: 10px; line-height: 1.2; }
div.sustainerCta2 h4 { font-size: 18px; line-height: 1.4; margin-bottom: 40px; }
div.sustainerCta2 a.donate:hover { background-color: #aea199 !important; }



/* -----------------------------------------
   RFPs
----------------------------------------- */

ul.rfp { margin-top: 30px }
ul.rfp .card { background: white; padding: 30px 20px 75px; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.18); height: 100%; position: relative }

ul.rfp .card h3 { margin: 0 0 10px; font-size: 1.1em !important; line-height: 1.1em; color: #444; text-transform: none }
ul.rfp .card p { font-size: .85em; line-height: 1.4em; color: #777; margin-top: 15px }
ul.rfp .card a.button { color: #111; display: block; margin-bottom: 0; background-color: #FEC217;  font-size: .9em; line-height: 1em; text-transform: uppercase; letter-spacing: .1em; padding: 16px 24px 14px; transition: all 200ms ease-in-out; position: absolute; left: 15px; right: 15px; bottom: 20px }
ul.rfp .card a.button:hover, a.button.intake:hover { background-color: #617f7f; text-decoration: none !important; color: #111 }
h1 span.rfpTitle { font-size: .4em; display: block; color: #FEC217 }
ul li i.fa-file-alt { color: #FEC217; margin-right: 5px }
a.button.intake { color: #111; margin-bottom: 15px; background-color: #FEC217;  font-size: .9em; line-height: 1em; text-transform: uppercase; letter-spacing: .1em; padding: 16px 24px 14px; transition: all 200ms ease-in-out; text-decoration: none; display: inline-block }


/* RESEARCH */
.row.research { margin-top: 40px }
.row.research .column { margin-bottom: 30px }
.row.research .column h4 { font-size: 1.1rem; text-transform: none !important; color: #294252; display: inline; border-bottom: 1px solid transparent; margin-bottom: 25px; font-weight: 600 }
.row.research .column:hover h4 { border-bottom: 1px solid #AAA !important }
.row.research .column p { line-height: 1.3; font-size: .9rem; color: #294252 }
.row.research .column a { text-decoration: none; line-height: 1.4 }
.row.research .column a:hover { color: inherit }
.row.research .column p.pubDate { margin: 5px 0 7px; font-weight: 500; color: #294252; font-size: .75rem; margin-top: 10px }


/* COOKIES */
body.cookies h1, body.cookies a.button.delete-all { margin-bottom: 0 }
body.cookies a.button.delete-all { padding: 8px; border-radius: 3px; border: 1px solid #617f7f; background: transparent; color: #4597A4; text-transform: none; font-weight: 500; margin: 0 }
body.cookies ul#list li { border-bottom: 1px solid #DDD; padding: 8px 80px 8px 10px; position: relative; word-wrap: break-word; font-size: .85rem !important }
body.cookies ul#list li:hover { background: #F4F4F4 }
body.cookies ul#list li a { margin-left: 15px; padding: 0 8px; border-radius: 3px; border: 1px solid #617f7f; font-size: .85rem; position: absolute; right: 10px }
body.cookies ul#list li a:hover { text-decoration: none !important; background: #617f7f; color: white !important }

/* -----------------------------------------
   RESPONSIVE ADJUSTMENTS
----------------------------------------- */

/* SMALL PORTRAIT */
@media only screen and (max-width: 320px) {
/* 	HEADER */
	div#header div.row { margin-right: 5px }
	ul.action li a.donate { margin-top: 20px }
	a#logo.two { height: 45px; top: 18px }
}

/* 480px */
@media only screen and (min-width: 30em) {
	body.eye-listing div.row.eyeGrid .columns#newsListing { padding: 0 50px !important }
}

/* 640px */
@media only screen and (max-width: 40em) {
	div.featureText.basic.customType { width: 300px; height: 340px }
	.featureTextWrapper.largeType div.featureText.basic.customType { width: 300px; height: 500px }
	div.bigFeature article { padding: 1em 1.2em }
	div.bigFeature div.sectionHeader h2 { font-size: 3em; margin: 2em 0 }
	.bigQuote article p { font-size: 1.8em; line-height: 1.3em }
	a#menuBtn { margin-right: 6px }
	a#logo.two { width: 130px; top: 19px; background: url(../png/logo-header.png) no-repeat; background-size: contain }
	body.home #headerWrap { background: #FFF }
	ul.action li a.donate { margin-top: 11px }
	ul.action li { margin-right: 0 }
	div.featureTextWrapper { bottom: 75px }
	#mc_embed_signup.compact .columns.three { padding-left: 0 }
	div.sustainerFacts { padding-bottom: 0; }
	div.sustainerBody { padding-bottom: 0; }
	div.sustainerBody .columns:first-child { padding-bottom: 40px; }
	.color-bars div.administration p, .color-bars div.fundraising p { color: #2e414f; position: relative; right: -40px; display: flex }
	.color-bars div.programs p { color: white; display: flex }
	.color-bars div p span { padding-left: 10px }
	.sidebar { margin-top: 50px }
}

/* 641px */
@media only screen and (min-width: 40.063em) {
	/* body.miniNav a#logo.two { width: 150px } */
	#header { height: 100px }
	.page-header { padding-top: 0 }
	.row.hero .feature-news { background: #617f7f }
	.color-box:hover { transform: scale(1.05) }
	.color-box:hover:after { bottom: 10px; right: 15px }
	.hcp-model.map { padding: 40px 0 180px }
	body.home .top-spacer, body.basic .top-spacer { margin-bottom: 0 }
	body.causedark .top-spacer, body.partner .top-spacer, body.who-we-are .top-spacer { height: 102px }
	body.faq .top-spacer, body.financials .top-spacer { height: 120px }
	.causeSlider { padding: 80px; margin: 0 15px 60px }
	body.miniNav #headerWrap > .row { height: 100px }
	.row.hero { margin-bottom: 100px }
	.color-bars div { float: left; text-align: right; padding: 6px 13px }
	.color-bars * { color: white }
	.programs:after { content: 'Progams'; position: absolute; display: inline-block; background: #617F7F; top: -80px; transform: rotate(-90deg); right: -15px; padding: 5px 10px; font-weight: 700; font-size: 1.2em; line-height: 1 }
	.administration:after { content: 'Administration'; position: absolute; display: inline-block; background: #b54a35; top: -106px; right: -34px; transform: rotate(-90deg); padding: 5px 10px; font-weight: 700; font-size: 1.2em; line-height: 1 }
	.fundraising:after { content: 'Fundraising'; position: absolute; display: inline-block; background: #fcb040; top: -93px; right: -32px; transform: rotate(-90deg); padding: 5px 10px; font-weight: 700; font-size: 1.2em; line-height: 1 }
	.mission { border-left: 1px solid #cbb8a5 }
	.mission p, .vision p { max-width: 360px }
	.mission p { float: left }
	.vision p { float: right }
	.hcp-model { padding: 0 0 150px; margin-bottom: 0 }
	.reveal.open { top: 120px !important }
	a.donate { font-size: .9em }
	ul.action.two { margin-right: 0; margin-bottom: 0 }
	.row.discover article, .row.partner article, .row.donate article { margin-top: 180px; margin-bottom: 80px }
	article p, article ul { font-size: 18px }
	.row.map { padding: 20px 0 }
	.row.basket article p { font-size: 1.4em }
	.row.man h2 { font-size: 5em; line-height: 1.4em }
	.row.man p { font-size: 2em; line-height: 1.4em }
	.row.man { padding-top: 200px }
	.row.man article { margin-bottom: 200px }
	ul.action { display: block }
	#drawerNav ul li ul.action { display: none }
	#drawerNav { left: -1024px; padding-top: 80px }
	#drawerNav ul li.home { margin-bottom: 40px }
	a#logo { width: 275px; height: 84px; top: 10px }
	a#logo.two { right: inherit }
	.row.cta { position: absolute; bottom: -130px }
	.row.cta .row { width: 80%; margin: 0 auto; max-width: 1000px }
	.newsHeader h3 { font-size: 4em }
	.newsHeader p { font-size: 1.6em }
	.columns.itemContainer { padding-right: 10px }
	a.item .overlay h4 { font-size: 1.5em; line-height: 1.2em }
	a.item .overlay p { font-size: .9em; line-height: 1.5em }
	#footer { padding: 60px 0 20px 0 }
	div.country a.go { margin: 0 0 0 50px }
	#headerWrap { height: 100px }
	a#menuBtn { top: 40px }
	body.miniNav a#menuBtn { top: 55px }
	.involvedFeature h1 { margin-bottom: 300px }
	div.newsFeature div.textWrapper div.featureText h3 { font-size: 2.5em }
	div.storyFeature { height: 450px }
	#videoFeature #videoText { margin: 200px 60px 100px}

	#cause h3, .sustainerFacts h3 { font-size: 4em }

	.newsNav { padding-left: 20px; padding-right: 0 }
	.newsNav ul li a { font-size: .9em }
	.newsNav ul li a:after { left: 100%; top: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(136, 183, 213, 0); border-left-color: transparent; border-width: 20px; margin-top: -20px }
	div.storyFeature.bio.large { height: 800px }
	.row.aboutStory a.go.light { position: absolute; bottom: 5px; left: 35px }
	.row.aboutStory div.columns div.columns { height: 240px }
	.row.aboutStory h2.mountainText { position: absolute; bottom: 0; margin-bottom: 0 }
	.row.aboutStory img { position: absolute; bottom: 0 }
	div.colorBlocks a { padding: 80px 10px }
	#mc_embed_signup.compact .columns.four { padding-left: 0 }
	.donateSpecial { background: #ebeae9 url('../jpg/img-donate_special.jpg') no-repeat right center }
	article.contact div.contact-right { border-left: 8px solid white }
	article.contact div.contact-left { border-right: 8px solid white }
	article.contact div.contact-left { min-height: 400px }

	div.sustainerBody .medium-6:first-child { padding-right: 40px; }
	body.sustainers-circle .featureText h1 { font-size: 5em !important }

	body.work div.featureTextWrapper { bottom: 100px }
	body.work div.featureText.basic h1 { font-size: 3.2em }
	body.work div.featureText.basic .catBox { font-size: 1.2em; margin-bottom: 25px }
}

@media only screen and (min-width: 960px) {
	.row.hero .feature-news a p.desc { display: block }
	ul#mainNav { display: inline-block !important }
	a#logo.two { right: inherit }
	ul.utility { display: block }
	.newsNav ul li a { padding-left: 60px }
	#cause h3, .sustainerFacts h3 { font-size: 5em }
}

@media only screen and (min-width: 980px) {
	.addthis-smartlayers { visibility: hidden }
}

@media only screen and (min-width: 1025px) {
	div.featureText.basic { padding-left: 0 }
	body.donate .featureText h1, body.contact-us .featureText h1 { font-size: 5em !important }
	.newsNav { padding-left: 70px }
	.row.whoweare div.colorBlocks a.link, article.storyNav div.colorBlocks a.link { width: 20% }
	.row.work-nav div.colorBlocks a.link { width: 25% }
	body.work div.featureTextWrapper { bottom: 180px }
}


/* STYLING ONLY FOR DESKTOP */
@media only screen and (min-device-width: 1025px) {
	/* .row.surgeons, .row.closeup, .row.stats, .row.map, .row.support { background-attachment: fixed } */
	div.newsItem a.read { display: none }
	/* div.newsItem:hover { background: #f4f4f4 } */
	/* div.newsItem:hover h3 { color: #2e414f !important; border-bottom: 1px solid #AAA !important } */
	.row.basket article { min-height: 300px }
	a.item .overlay { opacity: 0 }
	a.item:hover .overlay { opacity: 1 }

	/* OUR STORY LANDING HOVER STATES */
	div.colorBlocks a:hover span.desc { color: rgba(255,255,255,1) !important }
	article.storyNav div.colorBlocks a.transformative:hover, article.storyNav div.colorBlocks a.transformative.active  { background: linear-gradient( rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25) ), url('../jpg/img-story-trans-ice.jpg') center center; background-size: cover }
	article.storyNav div.colorBlocks a.scalable:hover, article.storyNav div.colorBlocks a.scalable.active { background: linear-gradient( rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65) ), url('../jpg/img-story-scalable-runner.jpg') center center; background-size: cover }
	article.storyNav div.colorBlocks a.innovative:hover, article.storyNav div.colorBlocks a.innovative.active { background: linear-gradient( rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45) ), url('../jpg/img-story-inno-baby.jpg') center center; background-size: cover }
	article.storyNav div.colorBlocks a.global:hover, article.storyNav div.colorBlocks a.global.active { background: linear-gradient( rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45) ), url('../jpg/img-story-global-redcoat.jpg') center center; background-size: cover }
	article.storyNav div.colorBlocks a.life:hover, article.storyNav div.colorBlocks a.life.active { background: linear-gradient( rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25) ), url('../jpg/img-story-life-eye.jpg') center center; background-size: cover }
	.noMobile { display: block }
}


/* iPhone 6 LANDSCAPE */
@media only screen
    and (min-device-width : 375px)
    and (max-device-width : 667px)
    and (orientation : landscape)
    and (-webkit-min-device-pixel-ratio : 2) {
	div.featureTextWrapper { bottom: 100px }
	div#videoFeature { background: url('../jpg/video-hcploop-01-poster.jpg') no-repeat center center }
	#bgvid { display: none }
}

/* iPhone 6+ LANDSCAPE */
@media only screen
    and (min-device-width : 414px)
    and (max-device-width : 736px)
    and (orientation : landscape)
    and (-webkit-min-device-pixel-ratio : 3) {
	div.featureTextWrapper { bottom: 100px }
	div#videoFeature { background: url('../jpg/video-hcploop-01-poster.jpg') no-repeat center center }
	#bgvid { display: none }
}

/* iPhone 6+ PORTRAIT */
@media only screen
    and (min-device-width : 414px)
    and (max-device-width : 736px)
    and (orientation : portrait)
    and (-webkit-min-device-pixel-ratio : 3) {
	    div#videoFeature { background: url('../jpg/video-hcploop-01-poster.jpg') no-repeat center center }
	#bgvid { display: none }
}

/* min-width 1025px, large screens */
@media only screen and (min-width: 64.063em) {
	div.storyFeature { height: 600px }
	body.donate div.storyFeature { height: 380px }
	a.item .overlay h4 { font-size: 2.4em }
	a.item .overlay p { font-size: 1.1em }
	.row.interactive { display: block }
	div.row.story.eyeGrid .columns .cardWrapper.tall, div.row.story.eyeGrid .columns .cardWrapper.tall .card { height: 600px }
	div.gridExpand .cardWrapper h3 { padding: 80px 20px 20px }
}
/* max-width 1350px, very wide */
@media only screen and (max-width: 1350px) {
	.row.interactive .data#ghana-info { left: inherit; right: 630px }
	.row.interactive .data#nigeria-info { left: inherit; right: 550px }
}
/* min-width 1600px, x-large screens */
@media only screen and (min-width: 1600px) {
	.xlarge-3 { width: 25% }
}

.reveal.open { z-index: 999 !important }
div#modal-newsletter.reveal.open { z-index: 999 !important }

/* Add these styles for modal blur effect */
.reveal-overlay {
    background-color: rgba(42,65,80,.6);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

/* This ensures the modal itself isn't blurred */
.reveal {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Optional: Add a subtle transition */
.reveal-overlay {
    transition: backdrop-filter 0.3s ease-out;
    -webkit-transition: -webkit-backdrop-filter 0.3s ease-out;
}

/* Add styles for close search button */
.close-search {
    background: transparent !important;
    color: #2e414f !important;
    padding: 0 10px 0 15px;
	margin: 0;
}

.close-search i {
    font-size: 1.2rem;
}

.close-search:hover {
    color: #617f7f !important;
    background: transparent !important;
}

/* Remove default Foundation close button */
#search-modal .close-button {
    display: none;
}

/* Remove modal-specific styles */
#translate.reveal, #search-modal.reveal { max-width: 800px; padding: 50px 40px; border-radius: 23px; background: #F8F6F6 }

.slide-search { display: none }
@media only screen and (min-width: 40.063em) {
	/* Update slide-search styles */
	.slide-search {
	 position: absolute;
	 top: 5px;
	 right: -350px; /* Start off-screen (slightly more than width) */
	 width: 330px;
	 padding: 0;
	 margin: 0;
	 background: #E7DBD9 !important;
	 z-index: 100;
	 opacity: 0;
	 transition: right 0.3s ease-out, opacity 0.3s ease-out;
	 display: flex; /* Always flex, we'll animate position instead */
	 align-items: center;
	 border-radius: 5px
	 }	
}

.slide-search.open {
    right: 10px;
    opacity: 1;
}

body.miniNav .slide-search { 
    top: 32px;
}

.slide-search input[type='search'] {
    width: 100%;
    height: 35px;
    padding: 0 10px;
    border: none;
    border-radius: 5px;
    margin: 0
}

.slide-search #go-search {
    height: 30px;
    padding: 0 17px 0 13px;
    margin: 0 3px 0 0
}

.slide-search #go-search,
.slide-search input[type='search'] {
    margin-bottom: 0;
}

.btn#go-search:after,
.close-search:after {
    content: '';
}

.slide-search .close-search {
    background: transparent !important;
    color: #2e414f !important;
    padding: 0 10px 0 15px;
    margin: 0;
}

.slide-search .close-search:hover {
    color: #617f7f !important;
    background: transparent !important;
}

.slide-search .close-search i {
    font-size: 1.2rem;
}

/* Add mobile search styles */
#drawerNav .row {
    padding: 0 55px;
    margin-bottom: 30px;
}

#drawerNav input[type='search'] {
    width: 100%;
    height: 35px;
    padding: 0 10px;
    border: none;
    border-radius: 0;
    margin: 0 0 0 5px;
    background: white;
}

#drawerNav #go-search-mobile {
    height: 35px;
    padding: 0 17px 0 13px;
    margin: 0;
    background: #2e414f;
    color: #FEC217;
}

#drawerNav #go-search-mobile:hover {
    background: #FEC217;
    color: #2e414f;
}

#drawerNav .close-search {
    background: transparent !important;
    color: #2e414f !important;
    padding: 0 10px 0 15px;
    margin: 0;
}

#drawerNav .close-search:hover {
    color: #617f7f !important;
    background: transparent !important;
}

#drawerNav .btn#go-search-mobile:after {
    content: '';
}

/* Update news search form styles */
form#search-form.collapse-sides {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 600px;
}

.custom-input {
    flex: 1;
}

.custom-input input[type='search'] {
    width: 100%;
    max-width: none;
    margin: 0;
    height: 45px;
    border: 1px solid #ddd;
}

#advSearchSubmit {
    height: 45px;
    margin: 0;
    padding: 0 20px;
}