/* HEADER */
.header { position: fixed; top: 0px; left: 0px; width: 100%; z-index: 200;  }
.header--mirror { position: relative; top: auto; left: auto; width: 100%; z-index: 200;  visibility: hidden;  }
.header__inner { display: block; margin: 0 auto !important; width: 100%; max-width: 1248px; padding: 0px 0px;  position: relative;  font-size: 0px; line-height: 0px;  }

/* HEADER  MENU */
.header__upper { position: relative; width: 100%; background-color: #FFFFFF; z-index: 208; }
.header__menu { position: relative; display: inline-block; width: 100%;  font-size: 0;  padding: 8px 16px 8px 180px;    }
.menu__item { position: relative; display: inline-block; font-size: 16px; line-height: 34px;  color: #15601a;  padding: 4px 0px 3px; font-family: "futura-pt-bold", sans-serif; vertical-align: top;  text-align: center;  }
.header__menu--1 .menu__item { width: 100%;   }
.header__menu--2 .menu__item { width: calc((100% / 2) - (1px / 2));   }
.header__menu--3 .menu__item { width: calc((100% / 3) - (2px / 3));   }
.header__menu--4 .menu__item { width: calc((100% / 4) - (3px / 4));   }
.header__menu--5 .menu__item { width: calc((100% / 5) - (4px / 5));   }
.header__menu--6 .menu__item { width: calc((100% / 6) - (5px / 6));   }
.header__menu--7 .menu__item { width: calc((100% / 7) - (7px / 7));   }
.header__menu--8 .menu__item { width: calc((100% / 8) - (8px / 8));   }
.menu__divider { position: relative; display: inline-block; font-size: 0px; line-height: 0px; height: 44px; background-color: #6bbc46; width: 1px; vertical-align: top;   }
.menu__divider--hidden { display: none;    }
.menu__item a { display: inline-block;  color: inherit; font-size: inherit; line-height: inherit; border: 2px solid transparent; }
/* .menu__item a:focus {  border: 2px solid transparent;  } */
.menu__item a span { display: inline-block; border-bottom: 4px solid transparent; margin-bottom: -2px;  }
.menu__item a:hover, .menu__item.selected a { color: #414042;   }
.menu__item a:hover span, .menu__item.selected a span { display: inline-block;  border-bottom: 4px solid #414042;    }

/* HEADER TWITTER */
.header__lower { position: relative; width: 100%; background-color: #e8fdc9; z-index: 208;  overflow: hidden; height: 43px;   }
.header__lower--put-away {  height: 5px;    }
.header__tweet {  position: relative; display: block; width: 100%;  font-size: 16px; line-height: 25px; color: #414042;  padding: 9px 16px 9px 204px; text-align: left;  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 1; transition: opacity 1s; }
.header__lower--put-away .header__tweet { opacity: 0; transition: opacity 1s;  }
.header--generic .header__lower {  height: 5px;  }
.header--generic .header__tweet { display: none;   }
.header_twitter_icon { display: inline-block; width: 20px; margin-right: 12px; margin-top: 4px; vertical-align: top;  }
.header__tweet a {  font-family: "futura-pt-bold", sans-serif; font-weight: 700; color: #15601a }

.header--home .header__lower--mirror {  height: 43px !important;   }


/* HEADER LOGO & CALL TO ACTIONS */
.header__logo a { display: block; border: 2px solid transparent;  }
/* .header__logo a:focus { border: 2px solid transparent;  } */
.header__logo-cta {  position: absolute; height: 0px; top: 0px; left: 0px; width: 100%;  }
.header__logo-cta .header__inner {  height: 0px;  }
.header__logo-cta__inner { position: relative; display: block; width: 164px;  padding: 0px 4px 0px;     }
.header__logo-cta__inner__bg { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px;  background-color: #c2e989; z-index: 206; border-radius: 0px 0px 82px 82px; }

.header__cta__outer { position: relative; display: block;  padding: 8px 16px 12px; z-index: 210;  }

.header__cta { position: relative; display: block;  padding: 8px 0px; width: 100%;  }
.header__cta__a { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center;  white-space: normal;  width: 100%; height: 124px; border-radius: 62px; border: 4px solid #6bbc46; background-color: #FFFFFF; color: #15601a; text-transform: uppercase;  font-family: "futura-pt-bold", sans-serif; font-size: 16px; line-height: 18px; padding: 32px 16px; background-position: 50% 72px; background-repeat: no-repeat; background-size: calc(100% - 16px); }

/* begin - fix for IE11 */
_:-ms-fullscreen, :root .header__cta__a {
  background-position: -20px;
}
/* end - fix for IE11 */

.header__cta__a:hover { color: #414042;  }
.header__cta__a:before { content: ""; position: absolute; left: 0px; top: 0px; border: 4px solid white; border-radius: 58px; width: 100%; height: 100%; z-index: 206;   }
.header__cta__a .cta__leaves { content: ""; position: absolute; top: 72px; width: 100%; left: 0px; background-position: 0px 0px; height: 50px;  background-repeat: no-repeat; background-size: 100%; z-index: 205; }
.header__cta__a--pledge .cta__leaves { background-image: url('../img/cta_leaves--pledge.svg');     }
.header__cta__a--involved .cta__leaves { background-image: url('../img/cta_leaves--involved.svg');   }
.header__cta__a--contact .cta__leaves { background-image: url('../img/cta_leaves--contact.svg');  }
.header__cta__a__text { padding: 2px 0px 16px;   }

.header__logo { position: relative;  width: 100%;  height: auto;  padding: 14px;  background-color: #FFFFFF; border-radius: 0px 0px 50% 50%; z-index: 210; }
.header__logo__svg { display: block; position: relative; width: 100%;  height: 132px;  }


.header--generic .header__cta__outer  {  padding: 2px 0px 2px 0px !important;  }
.header--generic .header__cta__a { height: 36px !important; border-width: 3px !important;    }
.header--generic .header__cta { padding: 2px 0px !important;    }
.header--generic .header__cta__a__text { padding-bottom: 0px !important;  }
.header--generic .header__logo-cta__inner__bg { bottom: 0px;  border-radius: 0px 0px 18px 18px !important;  }
.header--generic .header__cta__a {  border-radius: 18px !important; padding-top: 6px !important; padding-bottom: 6px !important; font-size: 14px !important; height: 36px !important; background-image: none;   }


/***** START OF MEDIA QUERIES *******/
@media only screen and (max-width: 501px) { /* CYAN */
  .header__upper .header__inner { height: 74px; display: flex; flex-direction: row; align-content: center; align-items: center; justify-content: center;   }
  .header__tweet { display: none;  }
  .header__lower { height: 5px !important;  }
  .header--home .header__lower--mirror { height: 5px !important;  }
  .header__menu {  padding: 8px 8px 6px 8px;  }
  .menu__item { font-size: 13px; line-height: 16px; width: auto !important; padding: 0px 4px; }
  .menu__item a span { border-bottom: 0px !important; }
  .menu__item a:hover span, .menu__item.selected a span {  border-bottom: 0px !important;  }
  .menu__divider {  width: 2px; height: 14px; margin-top: 3px; }
  
  .header__logo-cta { position: relative; top: -5px; height: auto; margin-bottom: -21px;  }
  .header__logo-cta .header__inner {  padding: 0px 0px;    }
  .header__logo-cta__inner { width: 100%;  padding: 0px 16px 0px  !important;    }
  .header__logo-cta__inner__bg { bottom: 16px; border-radius: 0px 0px 0px 0px !important; }
  .header--generic .header__logo-cta__inner__bg { bottom: 16px; border-radius: 0px 0px 0px 0px !important; }
  .header__logo { display: inline-block; width: 155px;  vertical-align: top; padding-top: 0px;   }
  .header__logo__svg { height: 83px;  }
  /* .header__cta__outer  {  display: inline-block;  width: calc(100% - 155px); vertical-align: top; padding: 7px 0px 2px 16px !important;  } */
  .header__cta { padding: 2px 0px !important;  }
  .header__cta:nth-of-type(3) { display: none;  } 
  .header__cta__a { border-radius: 12px !important;   padding: 0px 2px 2px 2px !important; font-size: 12px !important; height: 14px !important; background-image: none; height: 24px !important;  border-width: 2px !important;  }
  .header__cta__a__text { padding-bottom: 0px !important;  }
  .header__cta__a::before { display: none;  }
  .header__cta__outer  {  padding: 2px 0px 0px 0px !important;  }
  
  /* ALT STYLES */
  .header__logo { width: 110px;  top: -8px; padding: 14px 14px 14px 14px; border-radius: 55px 55px 55px 55px; margin-bottom: -8px;  } 
  .header__menu { padding-left: 126px; border: 0px solid red;   }
  .header__logo-cta { position: absolute; top: 0px; height: 0px;  margin-bottom: 0px;  }
  .header__logo-cta .header__inner {  padding: 0px 8px;     }
  .header__logo-cta__inner { width: 120px; border: 0px solid blue; padding: 0px 5px 5px !important;   }
  .header__logo-cta__inner__bg { bottom: 0px; border-radius: 0px 0px 14px 14px !important;  }
  /* .header--generic .header__cta__outer { display: none;  display: block; left: 100%; top: 80px; position: absolute; width: calc(100vw - 155px);  padding: 7px 16px 2px 16px !important; } */

  .header--generic .header__logo-cta__inner__bg { bottom: 0px;  border-radius: 0px 0px 12px 12px !important;  }
  .header--generic .header__cta__a {  border-radius: 12px !important; padding-top: 0px !important; padding-bottom: 2px !important; font-size: 12px !important; line-height: 14px; height: 24px !important; background-image: none; border-width: 2px !important;  }
  
.header--generic .header__cta__outer  {  padding: 2px 0px 0px 0px !important;  }
.header--generic .header__cta__a::before { display: none;  }
}

@media only screen and (max-width: 360px) { 
  /*
  .header__logo { width: 140px;  }
  .header__cta__outer  { width: calc(100% - 140px);  }
  .header__cta__a { font-size: 12px !important; height: 30px !important; border-radius: 15px !important; padding: 1px 2px 3px 2px !important;  }
  */
}

@media only screen and (min-width: 502px) and (max-width: 580px) { /* BLUE */  
  .header__upper .header__inner { height: 64px; display: flex; flex-direction: row; align-content: center; align-items: center; justify-content: center;   }
  .header__logo-cta .header__inner { padding-left: 16px; }
  
  .header__tweet { display: none;  }
  .header__lower { height: 5px !important;  }
  .header--home .header__lower--mirror { height: 5px !important;  }
  
  .header__menu {  padding: 8px 16px 8px 151px; }
  .menu__item { font-size: 14px; line-height: 17px; width: auto !important; padding: 0px 6px;  }
  .menu__item span { border-bottom: 3px solid transparent; }
  
  .menu__item a:hover span, .menu__item.selected a span {  border-bottom: 3px solid #414042;  }
  .menu__divider {  width: 2px; height: 20px; margin-top: 2px; }
  
  .header__logo-cta__inner {  width: 135px;  padding: 0px 5px 0px  !important;    }
  .header__logo-cta__inner__bg { bottom: 0px;  border-radius: 0px 0px 18px 18px !important;}
  .header__logo { width: 125px; padding-top: 8px; }
  .header__logo__svg { height: 99px;  }
  .header__cta__outer  {  padding: 2px 0px 5px 0px !important;  }
  .header__cta { padding: 2px 0px !important;  }

  .header__cta__a { border-radius: 12px !important;  padding: 0px 2px 2px 2px !important; font-size: 12px !important; line-height: 14px; height: 24px !important; background-image: none; border-width: 2px !important; }
  .header__cta__a__text { padding-bottom: 0px !important;  }
  
  .header--generic .header__cta__outer  {  padding: 2px 0px 4px 0px !important;  }
  .header--generic .header__cta { padding: 2px 0px !important;    }
  .header--generic .header__cta__a__text { padding-bottom: 0px !important;  }
  .header--generic .header__logo-cta__inner__bg { bottom: 0px;  border-radius: 0px 0px 12px 12px !important;  }
  .header--generic .header__cta__a {  border-radius: 12px !important;  padding: 0px 2px 2px 2px !important; font-size: 12px !important; line-height: 14px; height: 24px !important; background-image: none; border-width: 2px !important;  }
}

@media only screen and (min-width: 581px) and (max-width: 767px) { /* RED */
  .header__upper .header__inner { height: 64px; display: flex; flex-direction: row; align-content: center; align-items: center; justify-content: center;   }
  .header__logo-cta .header__inner { padding-left: 16px; }
  .header__menu { padding: 8px 16px 8px 188px; }
  .menu__item { font-size: 14px; line-height: 17px; width: auto !important; padding: 0px 6px;  }
  .menu__item span { border-bottom: 3px solid transparent; }
  .menu__item a:hover span, .menu__item.selected a span {  border-bottom: 3px solid #414042;  }
  .menu__divider {  width: 2px; height: 20px; margin-top: 1px; }
  
  .header__logo-cta__inner { width: 156px;  padding: 0px 8px 0px  !important;    }
  .header__logo-cta__inner__bg { bottom: 0px; border-radius: 0px 0px 8px 8px !important; }
  .header__logo { width: 140px; padding-top: 8px; }
  .header__logo__svg { height: 115px;  }
  .header__cta__outer  {  padding: 2px 0px 8px 0px !important;  }
  .header__cta { padding: 2px 0px !important;  }
  .header__cta__a { border-radius: 16px !important; padding: 3px 2px 5px 2px !important; font-size: 14px !important; line-height: 16px;  height: 32px !important; background-image: none; border-width: 2px !important; }
  .header__cta__a__text { padding-bottom: 0px !important;  }
  
  .header--generic .header__cta__outer  {  padding: 2px 0px 6px 0px !important;  }
  .header--generic .header__cta { padding: 2px 0px !important;    }
  .header--generic .header__cta__a__text { padding-bottom: 0px !important;  }
  .header--generic .header__logo-cta__inner__bg { bottom: 0px;  border-radius: 0px 0px 16px 16px !important;  }
  .header--generic .header__cta__a {  border-radius: 16px !important; padding: 3px 2px 5px 2px !important; font-size: 14px !important; line-height: 16px;  height: 32px !important; background-image: none; border-width: 3px !important;  }
.header--generic .header__cta__a::before { display: none;  }

.header__tweet {  font-size: 14px; line-height: 20px; color: #414042;  padding: 5px 16px 5px 180px; }
.header_twitter_icon { display: inline-block; width: 16px; margin-right: 4px; margin-top: 4px; vertical-align: top;  }
.header__lower { max-height: 30px !important;   }
.header--home .header__lower--mirror {  max-height: 30px !important;   }
}

@media only screen and (max-width: 767px) and (orientation: landscape) {
  
}

/********  Tablet Portrait   **********/
@media only screen and (min-width:  768px) and (max-width: 840px)   { /* PINK */
  .header__logo-cta .header__inner { padding-left: 16px; }
  .menu__item { font-size: 16px; line-height: 24px; width: auto !important; padding: 0px 10px; }
  .menu__item span { border-bottom: 3px solid transparent;  }
  .menu__item a:hover span, .menu__item.selected a span {  border-bottom: 3px solid #414042;  }
  .menu__divider {  width: 2px; height: 24px; margin-top: 2px; }
  
  .header__logo-cta__inner {   padding: 0px 4px 0px  !important;    }
  .header__logo-cta__inner__bg { bottom: 0px; border-radius: 0px 0px 18px 18px !important; }
  .header__logo { width: 154px;  padding-top: 8px; }
  .header__logo__svg { height: 130px;  }
  .header__cta__outer  {  padding: 2px 0px 2px 0px !important;  }
  .header__cta { padding: 2px 0px !important;  }
  .header__cta__a { border-radius: 16px !important; padding-top: 4px !important; padding-bottom: 4px !important; font-size: 14px !important; height: 32px !important; background-image: none; border-width: 3px !important; }
  .header__cta__a__text { padding-bottom: 0px !important;  }
  
  .header--generic .header__cta__outer  {  padding: 2px 0px 2px 0px !important;  }
  .header--generic .header__cta { padding: 2px 0px !important;    }
  .header--generic .header__cta__a__text { padding-bottom: 0px !important;  }
  .header--generic .header__logo-cta__inner__bg { bottom: 0px;  border-radius: 0px 0px 16px 16px !important;  }
  .header--generic .header__cta__a {  border-radius: 16px !important; padding-top: 4px !important; padding-bottom: 4px !important; font-size: 14px !important; height: 32px !important; background-image: none; border-width: 3px !important;  }

  .header__tweet {  font-size: 14px; line-height: 20px; color: #414042;  padding: 5px 16px 5px 204px; }
  .header_twitter_icon { display: inline-block; width: 16px; margin-right: 4px; margin-top: 4px; vertical-align: top;  }
  .header__lower { max-height: 30px !important;   }
  .header--home .header__lower--mirror {  max-height: 30px !important;   }

}

@media only screen  and (min-width: 841px) and (max-width: 1000px)  { /* YELLOW */
    .header__logo-cta .header__inner { padding-left: 16px; }
    .header__logo { padding-top: 8px;  }
    .menu__item { padding: 0px 6px; font-size: 16px; line-height: 30px;  }
    .menu__divider {  width: 1px; height: 30px; margin-top: 2px;  }
}

@media only screen  and (min-width: 1001px) and (max-width: 1280px)  { /* BLACK */
.header__logo-cta .header__inner { padding-left: 16px; }
.menu__item { padding-top: 7px;  font-size: 16px; line-height: 30px;  }
}