.droplet {
  color: #D5EBF4 !important;
}
.eucalyptus {
  color: #336667 !important;
}
.sunshine {
  color: #FFD664 !important;
}
.dawn {
  color: #8F6171 !important;
}
.raven {
  color: #151515 !important;
}
.beak {
  color: #1C2F3A !important;
}
.snow {
  color: #FFFFFF !important;
}
.night {
  color: #2D4351 !important;
}
.lake {
  color: #006799 !important;
}
.dove {
  color: #698099 !important;
}
.egret {
  color: #CBCBCA !important;
}
.twilight {
  color: #29253D !important;
}
.storm {
  color: #5C6575 !important;
}
.daisy {
  color: #FFF1CB !important;
}
.teal {
  color: #339999 !important;
}
.bg-droplet {
  background-color: #D5EBF4 !important;
}
.bg-eucalyptus {
  background-color: #336667 !important;
}
.bg-sunshine {
  background-color: #FFD664 !important;
}
.bg-dawn {
  background-color: #8F6171 !important;
}
.bg-raven {
  background-color: #151515 !important;
}
.bg-beak {
  background-color: #1C2F3A !important;
}
.bg-snow {
  background-color: #FFFFFF !important;
}
.bg-night {
  background-color: #2D4351 !important;
}
.bg-lake {
  background-color: #006799 !important;
}
.bg-dove {
  background-color: #698099 !important;
}
.bg-egret {
  background-color: #CBCBCA !important;
}
.bg-twilight {
  background-color: #29253D !important;
}
.bg-storm {
  background-color: #5C6575 !important;
}
.bg-daisy {
  background-color: #FFF1CB !important;
}
.bg-teal {
  background-color: #339999 !important;
}
* {
  box-sizing: border-box;
}
html {
  font-size: 15px;
  font-family: Lato, sans-serif;
}
.container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}
header {
  background-color: #D5EBF4;
  padding: 1rem 2rem;
  position: fixed;
  z-index: 100;
  left: 0;
  right: 0;
}
header .nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
header .nav .hamburger {
  display: block;
  color: #1C2F3A;
  font-size: 32px;
  cursor: pointer;
}
header .nav nav {
  display: none;
}
header .nav nav a {
  text-transform: uppercase;
  font-size: 14px;
  color: #1C2F3A;
  text-decoration: none;
  margin-right: 48px;
}
header .nav nav a:last-child {
  margin-right: 0;
}
header .nav nav a.active {
  color: #006799;
  text-decoration: underline;
}
header .nav nav a:hover {
  color: #006799;
}
header .nav nav.mobile {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 63px;
  right: -30px;
  background-color: #2D4351;
  z-index: 2000;
}
header .nav nav.mobile a {
  color: white;
  padding: 20px 56px 20px 30px;
  border-bottom: 1px solid #006799;
  margin-right: 0;
}
main {
  padding-top: 101px;
}
.jumbo {
  min-height: 690px;
  background-image: url(../img/home.jpg);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 4rem 5rem;
}
.jumbo h1 {
  font-size: 56px;
  line-height: 1;
  color: white;
  font-weight: normal;
  display: block;
  width: 100%;
}
.jumbo h2 {
  font-size: 24px;
  color: white;
  font-weight: normal;
}
.jumbo h3 {
  font-size: 30px;
  color: white;
  font-weight: normal;
  line-height: 1.15;
}
.jumbo p {
  line-height: 1.15;
}
.reveals {
  background-color: rgba(213, 235, 244, 0.5);
}
.reveals .grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1px;
}
.reveals .grid .item {
  height: 356px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  cursor: pointer;
  transition: all .5s;
}
.reveals .grid .item .item-image {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  flex: 3;
}
.reveals .grid .item span {
  background: #4A4758;
  color: #6A7E99;
  padding: 20px;
  text-align: center;
  font-size: 18px;
  transition: all .5s;
  flex: 1;
}
.reveals .grid .item.active span {
  background: #FFD664;
  color: black;
}
.reveals .grid .item#item_1 .item-image {
  background-image: url(../img/reveals/1.jpg);
}
.reveals .grid .item#item_1.active .item-image {
  background-image: url(../img/reveals/1_on.jpg);
}
.reveals .grid .item#item_2 .item-image {
  background-image: url(../img/reveals/2.jpg);
}
.reveals .grid .item#item_2.active .item-image {
  background-image: url(../img/reveals/2_on.jpg);
}
.reveals .grid .item#item_3 .item-image {
  background-image: url(../img/reveals/3.jpg);
}
.reveals .grid .item#item_3.active .item-image {
  background-image: url(../img/reveals/3_on.jpg);
}
.reveals .grid .item#item_4 .item-image {
  background-image: url(../img/reveals/4.jpg);
}
.reveals .grid .item#item_4.active .item-image {
  background-image: url(../img/reveals/4_on.jpg);
}
.reveals .grid .item#item_5 .item-image {
  background-image: url(../img/reveals/5.jpg);
}
.reveals .grid .item#item_5.active .item-image {
  background-image: url(../img/reveals/5_on.jpg);
}
.reveals .grid .item#item_6 .item-image {
  background-image: url(../img/reveals/6.jpg);
}
.reveals .grid .item#item_6.active .item-image {
  background-image: url(../img/reveals/6_on.jpg);
}
.reveals .grid .item#item_7 .item-image {
  background-image: url(../img/reveals/7.jpg);
}
.reveals .grid .item#item_7.active .item-image {
  background-image: url(../img/reveals/7_on.jpg);
}
.reveals .grid .item#item_8 .item-image {
  background-image: url(../img/reveals/8.jpg);
}
.reveals .grid .item#item_8.active .item-image {
  background-image: url(../img/reveals/8_on.jpg);
}
.cause .caption {
  padding: 20px 50px;
}
.cause .caption.caption1 {
  background: #29253D;
  color: white;
  font-size: 24px;
  line-height: 1.4;
  text-align: center;
}
.cause .caption.caption2 {
  background: #FFD664;
  color: #151515;
  font-size: 18px;
  line-height: 1.4;
}
.cause h1 {
  display: block;
  border-top: 1px solid #5C6575;
  padding-top: 24px;
  color: #5C6575;
  font-size: 30px;
}
.cause h4 {
  font-weight: normal;
  display: block;
  padding-bottom: 24px;
  margin-top: 20px;
  color: #5C6575;
  font-size: 24px;
  line-height: 1.15;
}
.cause p {
  color: #5C6575;
  font-size: 15px;
  line-height: 1.25;
  margin-bottom: 20px;
}
.cause p a {
  color: #5C6575 !important;
  font-size: 12px;
}
.cause ul {
  padding-left: 20px;
}
.cause ul li {
  color: #5C6575;
  margin-bottom: 5px;
}
.stats {
  background-image: url(../img/home-river.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 100%;
  color: white;
}
.stats h1 {
  text-align: center;
  font-size: 56px;
  font-weight: normal;
}
.stats .stat-holder .stat {
  font-size: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
}
.stats .stat-holder .stat .number {
  font-size: 56px;
}
.stats .path-holder .details {
  flex: 1;
  font-size: 15px;
  line-height: 1.5;
}
.stats .path-holder .details h4 {
  color: #FFD664;
}
.stats .path-holder .middle {
  flex: 2;
  text-align: center;
  padding: 0 3rem;
}
.stats .path-holder .middle h2 {
  font-size: 30px;
  font-weight: normal;
}
.stats .path-holder .middle p {
  font-size: 24px;
  margin-top: 24px;
}
.action-plan {
  background: #D5EBF4;
}
.action-plan h1 {
  text-align: center;
  color: #5C6575;
  font-size: 46px;
  font-weight: normal;
}
.action-plan h2 {
  text-align: center;
  color: #5C6575;
  font-size: 30px;
  font-weight: normal;
}
.action-plan .shoutout {
  width: 100%;
  text-align: center;
  background: white;
  color: #1C2F3A;
  font-size: 24px;
}
.action-plan .actions {
  display: grid;
  grid-gap: 40px;
  grid-template-columns: 1fr;
}
.action-plan .actions .action h3 {
  font-size: 24px;
  font-weight: normal;
}
.action-plan .actions .action img {
  width: 100%;
  height: auto;
  margin: 1rem 0;
}
.action-plan .actions .action ul {
  padding-left: 20px;
}
.action-plan .actions .action ul li {
  font-size: 18px;
  line-height: 1.5;
}
.action-plan .actions .action ul li a {
  color: #006799;
}
.upstream h1 {
  text-align: center;
  color: #5C6575;
  font-size: 46px;
  font-weight: normal;
}
.upstream h3 {
  text-align: center;
  color: #5C6575;
  font-size: 24px;
  font-weight: normal;
}
.upstream .comparison .clean {
  width: 100%;
  background: #D5EBF4;
}
.upstream .comparison .clean .words {
  font-size: 24px;
}
.upstream .comparison .clean .words ul li {
  margin-bottom: 20px;
}
.upstream .comparison .contaminated {
  width: 100%;
  background: #D1D1D1;
}
.upstream .comparison .contaminated .words {
  font-size: 24px;
}
.upstream .comparison .contaminated .words ul li {
  margin-bottom: 20px;
}
.best {
  background-image: url(../img/inform_water.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 100%;
  color: white;
}
.best h1 {
  text-align: center;
  font-size: 56px;
  font-weight: normal;
}
.best h2 {
  text-align: center;
  font-size: 30px;
  color: white;
  font-weight: normal;
}
.best .column {
  width: 100%;
}
.best .column .lead {
  padding-top: 1rem;
  border-top: 3px solid #90A6B4;
  font-size: 24px;
}
.best .column p {
  font-size: 15px;
  line-height: 1.25;
}
.septic {
  color: #5C6575;
}
.septic h1 {
  font-size: 46px;
  font-weight: normal;
}
.septic h2 {
  font-size: 30px;
  font-weight: normal;
}
.septic p {
  font-size: 15px;
}
.septic .column {
  width: 100%;
}
.septic .column .caption {
  color: #1C2F3A;
  font-size: 15px;
}
.septic .column .caption.lead {
  font-size: 18px;
}
.resources {
  color: #5C6575;
}
.resources .column {
  width: 100%;
}
.resources .column h1 {
  font-size: 30px;
}
.resources .column.one {
  background: #f3f3f3;
}
.resources .column.one .caption {
  font-size: 13px;
}
.resources .column.two > div {
  background: #eff7fb;
}
.resources .column.three .thanks {
  background: #e9e8eb;
}
.resources .column.three .thanks h1 {
  color: #8F6171;
}
.connect .instructions {
  color: #5C6575;
}
.connect .form {
  background-image: url(../img/beach.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}
.connect .form .fader {
  background: rgba(255, 255, 255, 0.5);
}
.connect .form .fader .col {
  text-align: left;
  width: 100%;
}
.connect .form .fader .col .form-group {
  margin-bottom: 15px;
  width: 100%;
}
.connect .form .fader .col .form-group label {
  text-transform: uppercase;
  font-weight: 300;
  display: block;
  margin-bottom: 6px;
}
.connect .form .fader .col .form-group input {
  width: 100%;
  padding: 6px;
  background-color: white;
  border: none;
  outline: none;
  font-size: 14px;
  font-family: Lato, sans-serif;
}
.connect .form .fader .col .form-group textarea {
  width: 100%;
  padding: 6px;
  border: none;
  outline: none;
  color: #5C6575;
  font-size: 14px;
  font-family: Lato, sans-serif;
}
footer {
  border-top: 3px #006799 solid;
}
footer h4 {
  text-transform: uppercase;
  color: #5C6575;
  font-size: 14px;
  font-weight: normal;
  margin: 0 0 4px 0;
}
footer .partners {
  flex: 2;
}
footer .partners .logos {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
footer .partners .logos .logo {
  margin: 0 6px;
}
footer .spacer {
  height: 46px;
  width: 80px;
}
footer .towns {
  flex: 1;
  text-align: center;
  color: #698099;
  font-size: 12px;
}
footer .right {
  flex: 2;
}
footer .right .optin {
  flex: 1;
}
footer .right .optin form {
  border: 2px solid rgba(105, 128, 153, 0.5);
  display: flex;
  justify-content: space-between;
}
footer .right .optin form input[type=email] {
  flex: 1;
  color: #5C6575;
  border: none;
  outline: none;
  padding: 4px;
  font-family: Lato, sans-serif;
}
footer .right .optin form input[type=email]::placeholder {
  color: #5C6575;
}
footer .right .optin form input[type=submit] {
  color: white;
  background-color: #B4BECC;
  font-family: Lato, sans-serif;
  text-transform: uppercase;
  border: none;
  outline: none;
  padding: 0 15px;
}
footer .right .social {
  display: flex;
}
footer .right .social a {
  margin-left: 20px;
}
footer .right .copyright {
  text-align: right;
}
footer .right .copyright span {
  color: #698099;
  font-size: 11px;
}
.disclaimer {
  text-align: center;
  padding: 0 20px 10px 20px;
  color: #698099;
  font-size: 11px;
}
.btn,
button {
  background-color: #FFD664;
  padding: 12px 24px;
  color: black;
  text-decoration: none;
  font-weight: 300;
}
.ie_warning {
  position: absolute;
  top: 100px;
  left: 0;
  right: 0;
  width: 300px;
  padding: 20px;
  border: 4px solid #8F6171;
  color: #8F6171;
  background-color: white;
  font-size: 1rem;
}
.ie_warning p {
  margin: 0;
}
/*# sourceMappingURL=app.css.map */