:root {
  --colorRed: #f05a60;
  --colorGreen: #5eb078;
  --colorBlue: #6A9AC1;
  --colorYellow: #EEBE1C;
  --colorPurple: #856A7D;
}
body, html { font-family: "bebas-neue-pro-expanded", sans-serif; font-weight: 400; font-style: normal; color: #3e516a }
body { background: #edf2f4 }
h1, h2, h3, h4, h5 { font-family: "bebas-neue-pro-expanded", sans-serif; font-weight: 600; font-style: normal }
h1 { line-height: 1 }
h2 { line-height: 1.1 }
h3 { line-height: 1; font-size: 1.55rem }
h4 { line-height: 1.1 }
p, ul li { font-size: 1.2rem; line-height: 1.3 }
p.large { font-size: 1.5rem }
p em, p i { font-family: "bebas-neue-pro-expanded", sans-serif; font-weight: 400; font-style: italic }
p.introText { font-size: 1.8rem; line-height: 1.1 }
.row { position: relative }
.spacer { display: block; height: 60px; width: 100% }
.spacer.xl { height: 100px }
img.rounded { border-radius: 12px }
.button, [type=submit] { padding: 0.65em 1em; border-radius: 10px }
.button, [type=submit] { font-size: 1.4rem; font-weight: 600; background: #5eb078; text-decoration: none }
button[type=submit] { color: white !important }
button[type=submit]:hover { background: #6A9AC1 }
.button.red { background: #f05a60 }
.button.green, .button.blue:hover { background: #5eb078 }
.button.yellow { background: #EEBE1C }
.button.blue { background: #6A9AC1 }
.button.purple, .button.red:hover { background: #856A7D }
.button:hover { background: #6a9ac2 }

a { color: #5eb078; text-decoration: underline }
a:hover { color: #f05a60 }

.breadcrumbs li { text-transform: none; font-size: .9rem }
.breadcrumbs li a { color: #5eb078; font-weight: 600 }
.breadcrumbs li a:hover { color: #f05a60 }

/* --- NAV MAIN --- */
body:not(.home) #navMain { top: 0; z-index: 1; width: 100%; left: 0; right: 0; transition: all .4s; z-index: 999; padding: 10px 30px 0; background: #5d4156; position: fixed; overflow: visible }

body:not(.home) #navMain:after { content: ''; width: 100%; height: 100%; position: absolute; background: inherit; z-index: -1; bottom: -30px; left: 0; transform-origin: left bottom; transform: skewY(-3deg) }


#navMain.sticky { position: fixed }
#navMain .row { background: transparent }
#navMain .columns { margin-bottom: 0; padding: 0 }
#navMain .logoBox a { display: inline-block }
#navMain img.logo { max-width: 160px; margin-top: 10px }

#navMain #primary { display: none }
#navMain #primary ul { list-style: none; position: relative; float: right; margin: 0; padding: 0 }
#navMain #primary ul a { display: block; color: #FEFEFE; text-decoration: none; font-size: 1.15em; line-height: 32px; padding: 0 3px; margin: 0 8px; border-bottom: 2px solid transparent }
#navMain #primary ul a:hover { border-bottom: 2px solid white }
#navMain #primary ul li { position: relative; float: left; margin: 0; padding: 0 }
#navMain #primary ul li:last-of-type { margin-right: 0 }
#navMain #primary ul li:first-of-type { margin-left: 0 }

@media only screen and (min-width: 48.0625em){
	body:not(.home) #navMain { position: relative }
	body:not(.home) #navMain:after { bottom: -70px }
	#navMain img.logo { max-width: 240px; margin-top: 0 }
}

body.home #navMain { z-index: 9; position: absolute; position: absolute; top: 0; z-index: 1; width: 100%; left: 0; right: 0; transition: all .4s; z-index: 999; padding: 10px 30px 0; }
body.home #navMain img.logo { max-width: 210px }

.utility { width: 100%; display: block }
.utility ul { margin-top: 10px; list-style: none; margin: 0 }
.utility ul li { display: inline-block }
.utility ul li a { font-size: .9rem; text-decoration: none; color: white; border-bottom: 1px solid transparent; border-right: 1px solid rgba(255,255,255,.6); padding: 0 12px 0 8px; opacity: .7 }
.utility ul li:last-of-type a { border-right: 0; padding-right: 0 }
.utility ul li a:hover { opacity: 1 }
#navMain #primary ul li.donate a { background: #f05a60; border-radius: 5px; padding: 0 10px }
#navMain #primary ul li.donate a:hover { background: #5eb078 }
#navMain #primary ul li.donate a:hover { border-bottom: 2px solid transparent }

/* --- MENU BTN --- */
a#menuBtn { position: absolute; z-index: 999; display: block; right: 20px }
.doubledouble .line { transition: all .3s }
.doubledouble { background: transparent; width: 30px; text-indent: -9999px }
.doubledouble .line { height: 2px; background-color: white; display: block; margin-bottom: 7px; position: relative }
.doubledouble .line.three { margin-bottom: 0 }

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,-11px) rotate(45deg); -webkit-transform: translate(0,-11px) rotate(45deg); transform: translate(0,-11px) rotate(45deg) }
body.drawer a#menuBtn .doubledouble .line.two { width: 0; opacity: 0 }

/* --- DRAWER --- */
body.drawer { overflow: hidden }
body.drawer #drawerNav { opacity: 1; visibility: visible }
#drawerNav { position: fixed; top: 0px; left: 0; right: 0; bottom: 0; z-index: 998; opacity: 0; visibility: hidden; background: rgba(93,65,86,.95); padding-top: 70px; }
#drawerNav ul { text-align: left; padding-bottom: 10px; list-style: none; margin-left: 0 }
#drawerNav ul li { position: relative; opacity: 0; top: -10px; transition: all .4s }
#drawerNav ul li a { color: white; line-height: 2.3em; display: block; text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,.10); padding: 0 25px; text-decoration: none }
#drawerNav ul li a:hover { background: rgba(255,255,255,.1); text-decoration: none }
#drawerNav ul li ul { border-bottom: 1px solid rgba(255,255,255,.10); padding: 10px 0; background: rgba(25,25,25,.04) }
#drawerNav ul li ul li a { line-height: 2.5em; border-bottom: 0; text-transform: none; padding-left: 40px }
#drawerNav ul li ul li a:hover { background: transparent; opacity: 1 }
ul.subMenu { display: none }
.showSub { float: right; border-bottom: 0 !important }

body.drawer #drawerNav ul li { opacity: 1; top: 0 }
#drawerNav ul li:first-of-type { transition-delay: .2s }
#drawerNav ul li:nth-of-type(2) { transition-delay: .3s }
#drawerNav ul li:nth-of-type(3) { transition-delay: .4s }
#drawerNav ul li:nth-of-type(4) { transition-delay: .5s }
#drawerNav ul li:nth-of-type(5) { transition-delay: .6s }
#drawerNav ul li:nth-of-type(6) { transition-delay: .7s }
#drawerNav ul li:nth-of-type(7) { transition-delay: .8s }
#drawerNav ul li:nth-of-type(8) { transition-delay: .9s }
#drawerNav ul li:nth-of-type(9) { transition-delay: 1s }
#drawerNav ul li:nth-of-type(10) { transition-delay: 1.1s }


footer { background: #2c4d69; margin-top: 120px; position: relative; padding: 60px 0; overflow: visible; z-index: 1; color: white }
footer a { color: white; text-decoration: none }
footer a:hover { color: white; text-decoration: underline }
footer img.logo { width: 280px }
footer .column { margin-bottom: 30px }
footer:before { content: ''; width: 100%; height: 100%; position: absolute; background: inherit; z-index: -1; top: 0; transform-origin: right top; transform: skewY(3deg) }


@media only screen and (min-width: 40.063em) {
	body.home #navMain img.logo { max-width: 320px }
	#navMain #primary { display: block }
	a#menuBtn { display: none }
	#drawerNav { width: 35%; left: auto; right: -600px; transition: all .5s }
	body.drawer #drawerNav { right: 0 }
	.padded { margin: 0 50px; padding: 0 }
}


/* HOME */
body.home { padding-top: 320px }
.row.homeFeature { color: white; min-height: 550px; position: absolute; top: 0; right: 0; left: 0 }
.row.homeFeature .row { width: 100%; z-index: 9; padding: 140px 30px 30px }
.row.homeFeature img.bg { position: absolute }
.row.homeFeature h1 { margin-bottom: 12px; font-size: 2.2rem; line-height: 1.3; margin-bottom: 20px }
.row.homeFeature h1 span.typed-text { color: #efbf19; border-bottom: 2px solid }
.row.homeFeature p { font-size: 1.6rem; line-height: 1.2 }

@media only screen and (min-width: 40.063em) {
	body.home { padding-top: 460px }
	.row.homeFeature { color: white; min-height: 650px }
	.row.homeFeature h1 { font-size: 4.5rem }
	.row.homeFeature h1 span.typed-text { border-bottom: 3px solid }
	.row.homeFeature .row { padding: 240px 30px 30px }
}


.homeCta { margin-top: 80px; padding: 0 30px }
.homeCta .column { padding: 0 }
.item-box { position: relative; border-radius: 12px; margin-bottom: 20px }
.item-box span.learn { font-weight: 600; text-decoration: underline; font-size: 1.1rem }
.item-box.event .text-box { text-align: center; padding: 0 15px; top: 55% }
.item-box.event .text-box h3 { font-size: 1.7rem }
.text-box { position: absolute; left: 50%; top: 75%; transform: translate(-50%, -50%); width: 100%; padding: 0 15px 0 30px; color: white }
.text-box h3 { line-height: 1.1; font-size: 1.6rem }
.text-box hr { border: 0; height: 0; border-top: 1px solid rgba(255, 255, 255, 1); margin-left: 3px; width: 40px }
.tint { position: absolute; background: #222; top: 0; right: 0; bottom: 0; left: 0; mix-blend-mode: multiply; transition: position .2s ease-in-out; border-radius: 12px; opacity: .35 }
.red .tint { background: #f05a60; opacity: 1 }
.green .tint { background: #5eb078; opacity: 1 }
.yellow .tint { background: #EEBE1C; opacity: 1 }
.blue .tint { background: #6A9AC1; opacity: 1 }
.purple .tint { background: #856A7D; opacity: 1 }

.img-box img { width: 100%; border-radius: 12px }
.red .img-box img, .green .img-box img, .yellow .img-box img, .blue .img-box img, .purple .img-box img { filter: grayscale(100%) contrast(60%) brightness(120%) }
span.date { position: absolute; top: 30px; left: 30px; color: white; font-weight: 400; font-size: 1.6rem; line-height: 1; border-bottom: 1px solid; padding-bottom: 18px }
span.date strong { font-weight: 600 }

/* --- LOGO GRID --- */
.logoFieldItem.gray img { -webkit-filter: grayscale(100%); filter: grayscale(100%); opacity: .6 }
.logoFieldItem.gray:hover img { -webkit-filter: grayscale(0); filter: grayscale(0); opacity: 1 }


/* --- SLICK SLIDER --- */
.zonesSlider .zones div.slick-slide { margin: 0 12px; width: 100vw; border-radius: 12px; position: relative; padding: 30px 30px 10px 0 }

.zonesSlider .zones div.slick-slide .text { display: grid; padding-left: 20px }
.zonesSlider .zones div.slick-slide img { display: none }
.zonesSlider .zones .slick-arrow { display: none !important }
.zonesSlider .column { padding: 0 }
.zonesSlider .zones h3 { line-height: 1; color: white; margin-bottom: 15px; margin-top: 10px }
.zonesSlider .zones p { color: white }
.zonesSlider div.red { background: #F15B60  }
.zonesSlider div.blue { background: #6A9AC1  }
.zonesSlider div.yellow { background: #EEBE1C  }
.zonesSlider div.purple { background: #856A7D  }
.zonesSlider div.green { background: #60B079  }
.zonesSlider .slick-dots li { display: inline-block }
.slick-dots li button:before { font-size: 56px; color: #3e516a }
.slick-dots li.slick-active button:before { color: #3e516a }
.slick-dots { bottom: -50px }

@media only screen and (min-width: 40.063em) {
	.zonesSlider .zones div.slick-slide { width: 620px; min-height: 330px }
	.zonesSlider .zones div.slick-slide img { max-width: 180px; margin-left: 30px; float: left; display: block }
	.item-box { z-index: 10 }
	.item-box.event { z-index: 11 }
	.item-box.event a { transform: scale(1.04); margin-top: -13px }
	.item-box a { display: block; transition: all .2s ease-in-out }
	.item-box a:hover { transform: scale(1.08) }
	.item-box:hover { z-index: 12 }
	blockquote { margin: 20px 50px; }
}

blockquote { color: #856a7e; font-weight: 600; font-size: 2.6em; border-left: 0; line-height: 1.1; margin: 20px; text-align: center }
blockquote hr { border: 0; height: 0; border-top: 3px solid #856a7e; width: 40px; margin-top: 60px; margin-bottom: 50px }
cite { margin-top: 20px; font-size: .5em; color: #856a7e }


/* CONTENT PAGES */
body:not(.home) .row.feature { overflow: hidden; height: inherit; width: 100%; position: relative; margin-bottom: 70px }
body:not(.home) .row.feature img { height: inherit; width: inherit; object-fit: cover; object-position: center center }
body:not(.home) .row.feature div.purple-tint { background: #856a7e; position: absolute; right: 0; bottom: 0; top: 0; left: 0; opacity: .35 }
.content h1 { font-weight: 400; font-size: 2.5rem }

.cta .column a.item { background: rgba(106,154,194,.3); padding: 30px; border-radius: 12px; display: block; text-decoration: none; color: #3e516a; text-align: center; transition: all .2s ease-in-out }
.cta .column a.item:hover { transform: scale(1.06) }
.cta .column a.item span.learn { font-weight: 500; font-size: 1.2rem; border-bottom: 1px solid }
.cta .column a.item:hover span.learn { color: #f05a60 }
.cta .column a.item i { font-size: 5rem; color: #f05a60; margin-bottom: 20px }

.sidebar h3 { margin-bottom: 20px; margin-top: 30px }
.sidebar h4 { margin-bottom: 0 }
.sidebar .button { width: 100%; margin-bottom: 20px }

@media only screen and (min-width: 40.063em) {
	.content h1 { font-size: 3.5rem }
}

/* ABOUT PAGE TIMELINE */
.section-header { text-align: center }
.section-header h2 { font-size: 28px; font-weight: 700; margin-bottom: 16px }
.section-header hr { border: 4px solid #856A7D !important; width: 56px }
.bg-gradient_solid { padding: 48px 0 }
.steps { position: relative; margin-top: 32px }
.steps::after { content: ""; position: absolute; width: 4px; background-color: #856A7D; opacity: 0.4; top: 0; bottom: 0; left: 50% }
.steps .content p { color: white; font-size: 1.5rem; margin-bottom: 0 }
.steps .content h3 { display: none }
.steps .content h2 { font-weight: 600; font-size: 2.1rem; color: white }
.steps-container { position: relative; background-color: inherit; width: calc(50% + 40px) }
.steps-container .content { padding: 70px 32px 32px; background-color: #856A7D; position: relative; border-radius: 30px }
.steps-container .content img { max-width: 290px; position: absolute; top: -30px; right: 50%;
	transform: translate(50%,-50%); }
.steps-container.yellow .content img { top: -20px; border-radius: 20px }
.steps .steps-container:nth-child(even) { left: calc(50% - 40px); flex-direction: row-reverse }
.steps-container { display: flex }
.steps .steps-container .date { font-weight: 900; font-size: 1.3rem; line-height: 1; color: #ffffff; margin-bottom: 10px; width: 80px; height: 80px; background-color: #856A7D; border-radius: 50%; flex-shrink: 0; align-items: center; display: flex; justify-content: center; z-index: 777 }
.steps-container.blue .content, .steps .steps-container.blue .date { background: #6A9AC1 }
.steps-container.red .content, .steps .steps-container.red .date { background: #F15B60 }
.steps-container.green .content, .steps .steps-container.green .date { background: #60B079 }
.steps-container.yellow .content, .steps .steps-container.yellow .date { background: #EEBE1C }
.step-line { width: 40px; background-color: #856A7D; height: 4px; margin-top: 31px; opacity: 0.4; flex-shrink: 0 }

.row .row.panel { margin-left: 0 !important; margin-right: 0 !important }

@media (max-width: 767px) {
	.steps .content h3 { display: inline-block; color: white; border-bottom: 1px solid; margin-bottom: 15px }
	.steps::after { left: 32px }
	.steps-container { left: 0; flex-direction: row-reverse; width: auto; margin-bottom: 166px }
	.steps .steps-container:nth-child(even) { left: 0 }
	.step-line, .steps .steps-container .date, .steps::after { display: none }
}

/* FORMS STYLING */
.Input { background-color: white !important }
.freeform-pages { border-bottom: 1px solid #DDD; margin-bottom: 30px !important }
.freeform-pages li { margin: 0 20px 0 0 !important; border-bottom: 4px solid #DDD; padding: 4px 8px; font-size: 1.5rem }
.freeform-pages li.active { border-bottom: 4px solid #F05A5F }
.freeform-pages li:last-of-type { border-right: 0 }
form h3 { margin-top: 30px }