/*** General ***/

html { scroll-behavior:smooth; }

.expandableSectionHeader::before { content:'\f055'; }
.expandableSectionHeader.active::before { content:'\f056'; }

.stuck { position:fixed !important; z-index:10; max-height:100%; overflow-y:auto; }
.stickyPlaceholder.inlineBlock { display:inline-block; }

.parallax { position:relative; overflow:hidden; }
.parallax .backgroundImage { position:absolute; left:0; right:0; bottom:0; height:200%; background-repeat:no-repeat; background-position:center; background-size:cover; }

.flexTabs { display:flex; flex-wrap:wrap; }
.flexTabs .tabContent { display:none; flex: 1 0 100%; }
.flexTabs .tabContent.active { order:1; display:block; }

.mfp-content { position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); display:block; margin: 0 auto; box-sizing:border-box; max-width:800px; margin: 0 auto; padding: 1em 2em; background-color:#fff; max-height: 100vh; overflow:auto; }  /* lightbox */
.mfp-close-btn-in .mfp-close { color:inherit !important; color: #fff !important; }

.slideshow
, .slideshow .slides { position:absolute; z-index:1; width:100%; height:100%; }
.slideshow .slide { width:100% !important; height:100% !important; background-repeat:no-repeat; background-position: center top; background-size:cover; }
.slideshow .slideshowPrev
, .slideshow .slideshowNext { position:absolute; top:50%; transform: translateY(-50%); z-index:2; width:40px; line-height:60px; height:60px; text-align:center; font-size:60px; color:#fff; cursor:pointer; font-family: 'FontAwesome'; text-decoration:none; opacity:0.5; }
.slideshow .slideshowPrev { left:10px; }
.slideshow .slideshowNext { right:10px; }

/*** Sections ***/

header { display:flex; justify-content: center; width:100%; background-color:rgb(0,92,230); color:#fff; }
header .logo { flex-shrink:0; margin-left:1em; }
header .logo img { display:block; max-width: 165px; padding: 15px 0; height:auto;  }
header nav { display:flex; }
header nav a { display:flex; align-items:center; padding:1em; text-align:center; color:#ccc; font-weight:bold; text-decoration:none; transition: color 0.2s; }
header nav a:hover
, header nav a.current { color:#fff; }
#mobileMenuButton { display:none; align-items:center; padding:0.5em; text-align:center; font-size:24px; }

#headerSlideshowArea { position:relative; }
#headerSlideshow { position:relative; height:600px; }
#headerSlideshow .slideshow .title { font-size:400%; }
#headerSlideshow .slideshow .caption { font-size:300%; }

h1 { position:absolute; left:0; right:0; bottom: 0; font-size: 84px; color: #fff; z-index:1; text-align:center; letter-spacing: 0.2em; text-transform: uppercase; }
br.mobileOnly { display: none; }
h1 .impact, h1 .report, h1 .category { letter-spacing: 0em; font-size: 94px; }
h1 .impact { color:#ffd140; text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff; }
h1 .report { color:#fff; }
h1 .category { color:#fff; }


section { position:relative; background-color:#fff; background-repeat:no-repeat; background-position:center; background-size:cover; }

section .overlay { padding-top: 2em; padding-bottom: 2em; }

#testimonials { position:relative; padding-bottom:50%; }
#testimonials .slideshow { height:auto; top:0; bottom:42px; }
#testimonials .slide>div { display:flex; height:100%; }
#testimonials .image { flex-basis:40%; background-repeat:no-repeat; background-position:center; background-size:cover; }
#testimonials .textContainer { flex-basis:100%; position:relative; background-color:#37008C; text-align:center; overflow:hidden; }
#testimonials .image+.textContainer { flex-basis:60%; }
#testimonials .blurb { position:absolute; top:2%; left:8%; right:8%; bottom:10%; color:#fff; overflow:hidden; }
#testimonials .fullText { display:none; }
#testimonials .readMore { position:absolute; left:0; right:0; bottom:0; height:10%; display:flex; align-items:center; justify-content:center; background-color:inherit; color:#fff; font-size:20px; box-shadow: 0 0 10px currentColor; cursor:pointer; }
#testimonials .pager { position:absolute; left:0; right:0; bottom:0; z-index:2; padding:14px; text-align:center; }
#testimonials .pager a { display:inline-block; width:14px; height:14px; border-radius:7px; background-color:#009EFF; margin: 0 7px; font-size:0; }
#testimonials .pager a.activeSlide { background-color:#37008C; }

#thoughts { justify-content:center; margin: 0 -15px; }
#thoughts .tab { flex: 0 0 calc(26% - 30px); margin: 0 15px 2em; height:320px; position:relative; background-repeat:no-repeat; background-position:center; background-size:cover; }
#thoughts .overlay { display:none; position:absolute; top:0; left:0; right:0; bottom:0; flex-direction:column; align-items:center; justify-content:center; background-color: rgba(0,0,0,0.6); color:#fff; }
#thoughts .tab:hover .overlay { display:flex; }
#thoughts .name { font-size:larger; }
#thoughts .title { font-style:italic; }
/* Removed from WD-5550 Request
#thoughts .tab.active::after { content:'\f107'; position:absolute; top:100%; left:50%; transform: translateX(-50%); font: 48px 'FontAwesome'; color:currentColor; }
*/
#thoughts .tabContent { margin: 1em 15px; flex-basis: calc(100% - 30px) }
#thoughts .blurb[style] { padding: 1px 1em; }
#thoughts .fullText { display:none; }
#thoughts .readMore { text-align:center; }

#jccLens { text-align:center; }
#jccLens a { position:relative; display:inline-block; margin:3%; width:275px; height:275px; vertical-align:middle; border: 60px solid #fff; border-radius:50%; background-color:#fff; font-size:24px; text-decoration:none; }
#jccLens .content { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; }
#jccLens img { display:block; margin-bottom:10px; }
#jccLens a::after { content:''; position:absolute; bottom:-40px; left:50%; transform: translateX(-50%); border-top: 30px solid #fff; border-left: 15px solid transparent; border-right: 15px solid transparent; }

#slideshow { position:relative; padding-bottom:39.81%; }

#donors { text-align:center; }
#donors img { margin:30px; vertical-align:middle; }

#formLogin { margin:0 auto; padding: 20px; width:275px; color:#000; }
.memberSubmit { text-align:center; }

#backToTop { display:none; position:fixed; right:0; bottom:0; z-index:80; background-color:#000; padding:0.5em; color:#fff; opacity:0.3; }


/*** Responsive ***/

@media screen and (min-width:1025px) and (max-width:1260px) {
    header nav a { font-size:smaller; }
}


@media screen and (max-width:1024px) {
    header { flex-wrap:wrap; }
	#mobileMenuButton { display:flex !important; }
    header nav { order:3; width:100%; max-height:0; overflow:hidden; transition: all 0.2s; }
    header nav.active { max-height:300px; }
    header nav a.current::before { content: attr(department); position:absolute; left:4em; top:41px; }
	#backToTop { display:block; }
}


@media screen and (min-width:768px) and (max-width:1024px) {
	header nav { flex-wrap:wrap; justify-content:center; }
    #slideshow { height:400px; }
    
    #headerSlideshow { height: 300px; }
    
    br.mobileOnly { display: block; }
    h1 { font-size: 44px; }
    h1 .impact { font-size: 68px; }
    h1 .report { font-size: 56px; }
    h1 .category { font-size:inherit; }
}


@media screen and (max-width:767px) {
    .flexTabs { flex-flow: column nowrap; }
    .flexTabs .tab { flex-basis:auto !important; background-size:contain !important; }
    
    /* Removed from WD-5550 Request
    .flexTabs .tabContent { display:block; }
    .flexTabs .tabContent.active { order:0; }
    */

    .mfp-content { top:0; left:0; right:0; transform:none; }  /* lightbox */
    
    section .overlay { padding-top: 1em; padding-bottom: 1em; }
    
	header nav { flex-direction:column; }
	#headerSlideshow { height: 250px; }
    #slideshow .slideshow .title { font-size:200%; }
    #slideshow .slideshow .caption { font-size:150%; }
    br.mobileOnly { display: block; }
    h1 { font-size: 28px; }
    h1 .impact { font-size: 58px; }
    h1 .report { font-size: 46px; }
    h1 .category { font-size:inherit; }
    #testimonials { padding-bottom:200%; }
    #testimonials .slide>div { flex-direction:column; }
    #testimonials .image { flex-basis:60%; }
    #testimonials .textContainer { flex-basis:40%; }
    #testimonials .blurb { bottom: 22.2%; } 
    #thoughts { flex-wrap: wrap; flex-direction: row; }
    #thoughts .tab { margin-bottom: 8em; width: 40%; height: 160px; }
    #thoughts .tab .overlay { display:flex; top:100%; bottom:auto; padding:1em; background:transparent; color:#3d3d3d; }
    #thoughts .tab::after { content:none !important; }
    #jccLens a { border-width:25px; }
    #jccLens a::after { bottom:-20px; border-top-width:15px; border-left-width:7px; border-right-width:7px; }
}