/**
** General
** Typography
** Icon Font
** Structural Patterns
*** 3 Item Grid
** Header
*** Logo
*** Header Social Icons
*** Donate
*** Search
*** Primary Navigation
*** Mobile Menu
** Hero
** Main Content
*** Carousel
**** Controls
*** Real Change Section
*** It Takes You Section
** Footer
*** Select Location Dropdown
*** Action Item List
*** Footer Social Nav
*** Footer Nav
*** Copyright
** Media Queries
*** max-width 1220
**** Containers
**** Typography
**** Spacing
**** Carousel Spacing
*** max-width 1020
**** Containers
**** Typography
**** Spacing
**** Carousel Spacing
*** max-width 900
**** Containers
**** Typography
**** Spacing
**** Carousel Spacing
**** Sizing
*** max-width 820
**** Spacing
**** Sizing
*** max-width 767
**** Containers
**** Typography
**** Real Change Section
**** It Takes You Section
**** Footer
*** min-width 740
**** Turning mobile nav off on larger screens
*** max-width 740
**** Turning regular nav off on smaller screens
**** Mobile Menu
**** Mobile Search
**** Header
**** Content
**** Typography
*** max-width 680
**** Carousel Spacing
*** max-width 640
**** Real Change Section
**** It Takes You Section
**** Spacing
**** Carousel Spacing
*** max-width 570
*** max-width 500
**** Typography
**** Real Change Section
**** It Takes You Section
**** Carousel Spacing
*** max-width 485
**** Typography
**** Mobile Menu
**** Footer
**** Carousel Spacing
*** max-width 400 
**** It Takes You Section
**** Carousel Spacing
** Debugging
**/

/** General **/
html{
    overflow-x:hidden;
}

body {
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #222221;
}

img {
    width: 100%;
    height: auto;
}

.screen-reader-text {
    display: none;
} /* to hide screenreader text */

.element-invisible {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
} /* this is for accessibility to hide things that should be there for screenreaders, but shouldn't be seen on the screen visually */

/** Typography **/
h1 {
    font-family: 'Avenir Next LT Pro', Arial, 'Helvetica Neue', Helvetica, sans-serif; /* the Avenir font needs to be purchased and/or pulled from a webfont service */
    font-weight: 900;
    font-size: 100px;
    line-height: 80px;
    text-transform: uppercase;
    color: #ffffff;
    clear: left;
    float: left;
    max-width: 400px;
}

h1 span {
    color: #222221;
    display: block;
}

.mission-shim img {
    width: 100%;
    height: auto;
    max-width: 286px;
    margin-left: -5px;
} /* REMOVE this if using Avenir for the hero text instead of the image shim */

.action-shim img {
    width: 100%;
    height: auto;
    max-width: 256px;
    margin-top: 10px;
} /* REMOVE this if using Avenir for the hero text instead of the image shim */

h2 {
    font-weight: 700;
    font-size: 45px;
    line-height: 48px;
    margin-bottom: 6px;
}

h2 span {
    color: #fd5a1e;
}

h3 {
    font-size: 19px;
    font-weight: bold;
    line-height: 19px;
    text-transform: uppercase;
}

p {
    margin-bottom: 20px;
}

p.intro {
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 20px;
    max-width: 800px;
}

p.intro a {
    color: #fd5a1e;
    font-weight: bold;
    text-decoration: none;
    -webkit-transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
}

p.intro a:hover {
    color: #222221;
}

p.intro span.icon-carat {
    font-size: 9px;
    padding-left: 8px;
    margin-bottom: 2px;
    display: inline-block;
    vertical-align: middle;
}

/** Icon Font **/
@font-face {
    font-family: 'icomoon';
    src: url('../fonts/icomoon.eot?1j00s5');
    src: url('../fonts/icomoon.eot?1j00s5#iefix') format('embedded-opentype'),
        url('../fonts/icomoon.ttf?1j00s5') format('truetype'),
        url('../fonts/icomoon.woff?1j00s5') format('woff'),
        url('../fonts/icomoon.svg?1j00s5#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    font-size:14px;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-arrow-down:before {
    content: "\e900";
}

.icon-carat-l:before {
    content: "\e901";
}

.icon-carat:before {
    content: "\e902";
}

.icon-facebook:before {
    content: "\e903";
}

.icon-twitter:before {
    content: "\e904";
}

.icon-youtube:before {
    content: "\e905";
}

/** Structural Patterns **/
.hero-region,
.footer-region {
    background: #fd5a1e;
    width: 100%;
}

.hero-region {
    padding-bottom: 146px;
}

.main {
    max-width: 1156px;
    padding: 0 0 40px;
    margin: 0 auto;
}

.hero-content {
    max-width: 1106px;
    padding-left: 50px;
    margin: 0 auto;
}

.footer-content,
section.real-change,
section.it-takes-you {
    max-width: 1056px;
    padding-left: 50px;
    padding-right: 50px;
    margin: 0 auto;
}

/*** 3 Item Grid ***/
ul.real-change-features li,
ul.it-takes-you-features li,
ul.footer-items li {
    float: left;
    width: 31.5%;
    margin-right: 2.75%;
}

ul.real-change-features li:nth-of-type(3n),
ul.it-takes-you-features li:nth-of-type(3n),
ul.footer-items li:nth-of-type(3n) {
    margin-right: 0;
}

/** Header **/
.header-left {
    width: 30%;
    float: left;
}

.header-right {
    width: 70%;
    float: right;
}

/*** Logo ***/
a.logo img {
    width: 171px;
    height: auto;
    position: relative;
    z-index: 6;
}

/*** Header Social Icons ***/
ul.social-icons {
    float: right;
}

ul.social-icons li {
    display: inline-block;
}

ul.social-icons li a {
    color: #ffffff;
    text-decoration: none;
    margin-right: 20px;
    -webkit-transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
}

ul.social-icons li a span {
    font-size: 22px;
    line-height: 32px;
}

ul.social-icons li a:hover {
    color: #222221;
}

/*** Donate ***/
a.donate {
    color: #ffffff;
    background: #222221;
    display: block;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    float: right;
    padding: 8px 18px 6px;
    -webkit-transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
}

a.donate:hover {
    color: #222221;
    background: #ffffff;
}

/*** Search ***/
.search {
    float: right;
    position: relative;
}

.search input {
    background: none;
    color: #ffffff;
    border: 1px solid rgba(250, 250, 250, 0.3);
    border-radius: 4px;
    height: 30px;
    font-size: 15px;
    padding: 0 40px 0 10px;
    width: 146px;
    margin-left: 10px;
}

.search input#searchsubmit {
    position: absolute;
    color: transparent;
    right: 10px;
    top: 6px;
    padding: 0;
    height: 18px;
    width: 18px;
    background-image: url(../images/magnifying-glass.png);
    background-repeat: no-repeat;
    background-size: 36px 18px;
    background-position: 0 0;
    border: none;
    cursor: pointer;
}

.search input#searchsubmit:hover {
    background-position: -18px 0;
    cursor: pointer;
}

/*** Primary Navigation ***/
.main-navigation {
    clear: both;
    display: block;
    float: right;
    margin-top: 17px;
}

.main-navigation ul {
    display: block;
    list-style: outside none none;
    margin: 0;
    padding-left: 0;
}

.main-navigation ul li:hover > ul, 
.main-navigation ul li.focus > ul {
    left: auto;
}

.main-navigation li {
    float: left;
    margin: 0 19px;
    position: relative;
}

.main-navigation li:first-of-type {
    margin: 0 19px 0 0;
}

.main-navigation li:last-of-type {
    margin: 0 0 0 19px;
}

.main-navigation li.search {
    margin-right: 0;
}

.main-navigation a {
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 15px;
    padding: 4px 0;
    display: block;
    border-top: 2px solid transparent;
    position: relative;
}

.main-navigation a.carat-container {
    display: none;
}

.main-navigation li:hover > a {
    border-top: 2px solid #ffffff;
    color: #ffffff;
}

.main-navigation ul ul {
    float: left;
    left: -999em;
    position: absolute;
    top: 1.4rem;
    z-index: 99999;
    padding-top: 30px;
}

.main-navigation ul li:hover ul:before,
.main-navigation ul li:hover ul:after {
    bottom: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    top: -5px;
    position: absolute;
    pointer-events: none;
}

.main-navigation ul li:hover ul:before {
    border-width: 20px;
    left: 20%;
    margin-left: -20px;
}

.main-navigation ul li:hover ul:after {
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #222221;
    border-width: 19px;
    left: 20%;
    margin-left: -19px;
}

.main-navigation ul ul li {
    background: #222221;
    color: #ffffff;
    font-weight: 400;
    width: 180px;
    text-shadow: none;
    text-transform: none;
    margin: 0;
}

.main-navigation ul ul li:first-of-type,
.main-navigation ul ul li:last-of-type {
    margin: 0;
}

.main-navigation ul ul li:hover > ul, 
.main-navigation ul ul li.focus > ul {
    left: 100%;
}

.main-navigation ul ul li:first-of-type a {
    padding: 28px 36px 8px;
}

.main-navigation ul ul li:last-of-type a {
    padding: 8px 36px 28px;
}

.main-navigation ul ul a {
    border-top: none;
    background: #222221;
    color: #ffffff;
    font-weight: 400;
    padding: 8px 36px;
    width: 180px;
    text-shadow: none;
    text-transform: none;
}

.main-navigation ul ul *:hover > a, 
.main-navigation ul ul .focus > a {
    border-top: none;
    text-decoration: underline;
}

.first ul.sub-menu a:hover{
    text-decoration: none;
}

#header-wrapper {
    width: 100%;
    float: none;
    padding: 0;
    height: 60px;
}

.main-navigation.toggled {
    display: block;
    float: none;
    width: 100%;
    padding: 0;
    margin: 0;
}

.main-navigation.toggled ul {
    display: none;
    list-style: none;
    margin: 50px 0 0 0;
    padding-left: 0;
    width: 100%;
}

.main-navigation.toggled li {
    display: block;
    float: none;
    border-bottom: 1px solid rgba(68,68,68,0.5);
    position: relative;
    line-height: 60px;
    width: 100%;
    margin: 0;
    overflow: hidden;
}

.main-navigation.toggled li:hover > a {
    border-top: none;
}

.main-navigation.toggled a {
    display: block;
    text-decoration: none;
    padding: 0 5%;
    color: #fff;
    white-space: nowrap;
    border-top: none;
}

.main-navigation.toggled a.sub-parent {
    width: 90%;
    display: inline-block;
}

.main-navigation.toggled a.carat-container {
    width: 70px;
    height: 60px;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
    border-left: 1px solid rgba(68,68,68,0.5);
    text-align: center;
}

.main-navigation.toggled a.carat-container .icon-carat:before {
    display: block;
    margin-top: 22px;
    -webkit-transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
}

.main-navigation.toggled a.carat-container.toggled .icon-carat:before {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}

.main-navigation.toggled a:visited {
    color: #fff;
}

.main-navigation.toggled ul ul {
    float: none;
    position: absolute;
    top: 0;
    left: -999em;
    z-index: 99999;
    padding-top: 0;
    margin: 0;
}

.main-navigation.toggled ul ul ul {
    left: -999em;
    top: 0;
}

.main-navigation.toggled ul ul a {
    height: 30px;
    line-height: 30px;
    width: 90%;
    background: transparent;
}

.main-navigation.toggled ul ul li {
    height: 30px;
    line-height: 30px;
    background: none;
    padding: .8rem 1rem;
}

.main-navigation.toggled ul li:hover > ul {
    left: auto;
}

.main-navigation.toggled ul li:hover ul:before,
.main-navigation.toggled ul li:hover ul:after {
    content: none;
    border: none;
}

.main-navigation.toggled ul ul li:hover > ul {
    left: 100%;
}

.main-navigation.toggled ul ul li a,
.main-navigation.toggled ul ul li:first-of-type a,
.main-navigation.toggled ul ul li:last-of-type a {
    padding: 0 6%;
    text-decoration: none;
}

.main-navigation.toggled ul ul li:hover, 
.main-navigation.toggled ul ul li:focus {
    background-color: rgba(34,34,33,0.6);
    color: #fff;
}

.main-navigation.toggled ul li a:hover + ul, 
.main-navigation.toggled ul li a:focus + ul, 
.main-navigation.toggled ul li a + ul:hover, 
.main-navigation.toggled ul li a + ul:focus {
    position: static;
}

/*** Mobile Menu ***/
.menu-toggle, .main-navigation.toggled ul {
    clear: both;
    display: block;
    line-height: 50px;
}

.main-navigation.toggled ul {
    margin-top: 100px;
    background:#222221;
}

.main-navigation.toggled ul ul {
    float: none;
    left: 0;
    position: relative;
    top: 0;
    padding-top: 0;
    display: none;
    margin-top: 0;
}

.main-navigation.toggled ul ul.toggled {
    display: block;
    float: none;
    left: 0;
    position: relative;
    top: 0;
    padding-top: 0;
    margin-top: 0;
    padding: 0;
}

.main-navigation button {
    border: none;
    box-shadow: none;
}

/** Hero **/
.hero-content:after,
.hero-region:after,
.hero-content header:after  {
  content: "";
  display: table;
  clear: both;
}

.hero-content h2 a {
    font-family: 'Avenir Next LT Pro', Arial, 'Helvetica Neue', Helvetica, sans-serif;
    font-size: 16px;
    line-height: 18px;
    margin-top: 12px;
    margin-left: 7px;
    text-transform: uppercase;
    text-decoration: none;
    color: #ffffff;
    clear: left;
    float: left;
    max-width: 300px;
}

.hero-region {
    background-image: url(../images/hero-bg.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 75% center;
    padding-top: 19px;
}

.hero-content header {
    margin-bottom: 32px;
}

/** Main Content **/
.main {
    margin-top: -110px;
    background: #ffffff;
}

.main:after {
  content: "";
  display: table;
  clear: both;
}

/*** Carousel ***/
.features {
    padding-left: 35px;
    padding-right: 35px;
}

.jcarousel-wrapper {
    margin: 0 auto 8px;
    position: relative;
    padding-top: 42px;
}
.jcarousel {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.jcarousel ul {
    width: 20000em;
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}

.jcarousel li {
    width: 334px;
    margin: 0 15px;
    float: left;
}

.jcarousel li a {
    color: #fd5a1e;
    font-weight: bold;
    line-height: 19px;
    text-decoration: none;
    -webkit-transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
}

.jcarousel li a:hover {
    color: #222221;
}

.jcarousel img {
    display: block;
    max-width: 100%;
    height: auto !important;
    margin-bottom: 14px;
}

/**** Controls ****/
.jcarousel-control-prev,
.jcarousel-control-next {
    position: absolute;
    width: 15px;
    height: 15px;
    text-align: center;
    text-decoration: none;
    font-size: 15px;
}

.jcarousel-control-prev {
    right: 40px;
    top: 14px;
}

.jcarousel-control-next {
    right: 12px;
    top: 14px;
}
a.jcarousel-control-prev,
a.jcarousel-control-next {
    color: #919da8;
    -webkit-transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
}

a.jcarousel-control-prev:hover,
a.jcarousel-control-next:hover {
    color: #222221;
}

/*** Real Change Section ***/
section.real-change:after {
  content: "";
  display: table;
  clear: both;
}

section.real-change {
    margin-bottom: 50px;
}

header.action-header img {
    padding-bottom: 16px;
    border-bottom: 4px solid #403d39;
}

header.action-header h3 {
    display: table-cell;
    height: 40px;
    vertical-align: bottom;
    padding-bottom: 8px;
}

footer.take-action a {
    background: #fd5a1e;
    color: #ffffff;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    padding: 5px 23px 5px 13px;
    -webkit-transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
}

footer.take-action a:hover {
    background: #222221;
}

footer.take-action a span {
    font-size: 14px;
    display: inline-block;
    width: 10px;
    margin-right: 14px;
    margin-bottom: 3px;
    vertical-align: middle;
}

/*** It Takes You Section ***/
.it-takes-you {
    clear: both;
}

ul.it-takes-you-features a {
    position: relative;
    color: #ffffff;
    background: #222221;
    display: block;
    font-weight: bold;
    line-height: 28px;
    text-transform: uppercase;
    -webkit-transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
}

ul.it-takes-you-features img {
    display: block;
}

ul.it-takes-you-features p {
    margin-bottom: 0;
    display: table-cell;
    vertical-align: middle;
    font-size: 27px;
}

ul.it-takes-you-features .label-wrap {
    position: absolute;
    display: table;
    bottom: 15px;
    left: 16px;
}

ul.it-takes-you-features a:hover img {
    opacity: 0.8;
}

ul.it-takes-you-features span.icon-carat {
    font-size: 18px;
    display: table-cell;
    vertical-align: middle;
    width: 20px;
}

/** Footer **/
.footer-region {
    clear: both;
    color: #ffffff;
    padding-top: 32px;
}

.footer-region:after {
  content: "";
  display: table;
  clear: both;
}

.footer-region h2 {
    font-size: 18px;
    line-height: 22px;
    margin-bottom: 10px;
    margin-top: 17px;
    font-weight: bold;
    text-transform: uppercase;
}

.footer-region a {
    color: #ffffff;
    text-decoration: none;
}

.footer-region a:hover {
    text-decoration: underline;
}

.footer-region p {
    margin-bottom: 6px;
}

.footer-content:after {
  content: "";
  display: table;
  clear: both;
}

/*** Mission Banner ***/
.mission-banner img {
    margin-left: -4px;
    width: 96%;
}

/*** Twitter ***/
.twitter-wrap {
    width: 96%;
}

.twitter-icon span.icon-twitter {
    font-size: 18px;
    display: block;
    margin-top: 14px;
}

/*** Select Location Dropdown ***/
.footer-region .select-a-location {
    float: none;
    margin-top: 0;
}

.footer-region .select-a-location p.location-selector {
    border: 1px solid #ffffff;
    width: 228px;
    color: #ffffff;
    text-decoration: none;
    text-transform: none;
    font-weight: 400;
    font-size: 16px;
    padding: 4px 16px;
    display: block;
    position: relative;
    margin-left: -12px;
    margin-bottom: 0;
    z-index: 2;
}

@media (min-width: 901px) {
    .footer-region .select-a-location p.location-selector {
        padding: 4px 12px;
    }
}

.footer-region .select-a-location span.icon-arrow-down {
    float: right;
    font-size: 7px;
    margin-top: 7px;
}

.select-a-location ul.is-closed,
.select-a-location ul.is-open {
    margin-left: -12px;
    margin-top: -4px;
    z-index: 4;
    position: relative;
}

.select-a-location ul.is-closed li,
.select-a-location ul.is-open li {
    width: 220px;
    padding: 0;
    margin-right: 0;
}

.select-a-location ul.is-closed li a,
.select-a-location ul.is-open li a {
    padding:8px 12px 8px 20px;
    border-left: 1px solid #ffffff;
    border-right: 1px solid #ffffff;
    display: block;
    width: 100%;
    background: #fd5a1e;
    font-size: .8rem;
}

.select-a-location ul.is-closed li:first-of-type a,
.select-a-location ul.is-open li:first-of-type a {
     padding-top:12px;
}

.select-a-location ul.is-closed li:last-of-type a,
.select-a-location ul.is-open li:last-of-type a {
    border-bottom: 1px solid #ffffff;
    border-radius: 0 0 4px 4px;
    padding-bottom:12px;
}

/*** Action Item List */
ul.action-list {
    clear: both;
    padding-top: 30px;
    padding-bottom: 50px;
}

ul.action-list li {
    float: none;
    width: 100%;
    margin-right: 0;
    margin-bottom: 13px;
    font-weight: bold;
    text-transform: uppercase;
}

.footer-region ul.action-list li {
    display: table;
}

.footer-region ul.action-list li a {
    display: table-cell;
    vertical-align: middle;
}

.footer-region ul.action-list a:hover {
    text-decoration: underline;
}

.footer-region ul.action-list span.icon-carat {
    font-size: 15px;
    margin-right: 10px;
    display: table-cell;
    vertical-align: middle;
    width: 26px;
}

/*** Footer Social Nav ***/
.footer-region ul.social-icons {
    float: left;
}

.footer-region ul.social-icons a:hover {
    text-decoration: none;
}

/*** Footer Nav ***/
.footer-region ul.footer-menu li {
    font-size: 12px;
    margin-top: 24px;
    margin-right: 0;
    width: auto;
}

.footer-region ul.footer-menu li span.dot {
    margin: 0 5px;
}

/*** Copyright ***/
p.copyright {
    font-size: 12px;
    margin-bottom: 22px;
    clear: both;
}

/** Media Queries **/
/*** max-width 1220 ***/
@media (max-width: 1220px) {
    /**** Containers ****/
    .main {
        max-width: 930px;
    }

    .hero-content {
        max-width: 880px;
    }

    /**** Typography ****/
    h1 {
        font-size: 80px;
        line-height: 65px;
    }

    h2 {
        font-size: 40px;
        line-height: 43px;
    }

    .footer-content {
        max-width: 830px;
    }

    ul.it-takes-you-features p {
        font-size: 22px;
        line-height: 22px;
    }

    ul.it-takes-you-features span.icon-carat {
        font-size: 16px;
    }

    /**** Spacing ****/
    .main-navigation li {
        margin: 0 11px;
    }

    .main-navigation li:first-of-type {
        margin: 0 11px 0 0;
    }

    /**** Carousel Spacing ****/
    .jcarousel li {
        margin: 0 11px;
    }
}

/*** max-width 1020 ***/
@media (max-width: 1020px) {
    /**** Containers ****/
    .main,
    .hero-content,
    .footer-content {
        max-width: none;
    }

    .hero-content {
        padding-right: 50px;
    }

    /**** Typography ****/
    h1 {
        font-size: 70px;
        line-height: 57px;
    }

    /**** Spacing ****/
    .footer-region h2 {
        margin-top: 10px;
    }

    /**** Carousel Spacing ****/
    .jcarousel li {
        margin: 0 12px;
    }
}

/*** max-width 900 ***/
@media (max-width: 900px) {
    /**** Containers ****/
    .header-left {
        width: 20%;
    }

    .header-right {
        width: 80%;
    }

    /**** Typography ****/
    h3 {
        font-size: 16px;
        line-height: 18px;
    }

    header.action-header h3 {
        height: 34px;
    }

    /**** Spacing ****/
    .hero-content,
    .footer-content, 
    section.real-change, 
    section.it-takes-you {
        padding-right: 30px;
        padding-left: 30px;
    }

    .footer-region .select-a-location p.location-selector,
    .select-a-location ul.is-closed li, 
    .select-a-location ul.is-open li {   
        margin-left: 0px;
        width: 200px;
    }

    .select-a-location ul.is-closed, .select-a-location ul.is-open {
        margin-left: 0;
    }

    .select-a-location ul.is-closed li:last-of-type a, 
    .select-a-location ul.is-open li:last-of-type a {
        width: 200px;
    }

    .footer-region ul.action-list a {
        display: inline-block;
    }

    .footer-region ul.action-list a::before {
        margin-left: -26px;
    }

    /**** Carousel Spacing ****/
    .features {
        padding-left: 15px;
        padding-right: 15px;
    }

    .jcarousel li {
        margin: 0 11px;
    }

    /**** Sizing ****/
    a.logo img {
        width: 151px;
        margin-top: 6px;
    }

    .mission-shim img {
        max-width: 225px;
    }
}

@media (max-width: 820px) {
    /**** Spacing ****/
    .jcarousel li {
        margin: 0 10px;
    }

    .main-navigation li {
        margin: 0 8px;
    }

    .main-navigation li:first-of-type {
        margin: 0 8px 0 0;
    }

    /**** Sizing ****/
    a.logo img {
        width: 131px;
    }
}

/*** max-width 767 ***/
@media (max-width: 767px) {
    /**** Containers ****/
    .action-content,
    footer.take-action {
        width: 57%;
        float: right;

    }

    /**** Typography ****/
    h1 {
        font-size: 50px;
        line-height: 42px;
    }

    h2 {
        font-size: 30px;
        line-height: 33px;
    }

    p.intro {
        font-size: 14px;
        line-height: 18px;
    }

    /**** Real Change Section ****/
    section.real-change {
        margin-bottom: 20px;
    }

    ul.real-change-features li {
        width: 100%;
        margin-bottom: 30px;
    }

    header.action-header img {
        width: 40%;
        margin-right: 3%;
        float: left;
        border-bottom: none;
        padding-bottom: 0;
    }

    header.action-header h3 {
        height: auto;
    }

    /**** It Takes You Section ****/
    ul.it-takes-you-features p {
        font-size: 18px;
        line-height: 18px;
    }

    ul.it-takes-you-features span.icon-carat {
        font-size: 14px;
        margin-right: 5px;
        padding-top: 1px;
    }

    /**** Footer ****/
    .footer-region .nav ul a {
        width: 180px;
    }

    .footer-region h2 {
        font-size: 16px;
        margin-top: 8px;
    }

    ul.footer-items li {
        margin-right: 2.75%;
        width: 45.5%;
    }

    ul.action-list {
        padding-bottom: 0;
    }

    ul.footer-items li:last-of-type {
        margin-right: 0;
        width: 100%;
    }

    ul.footer-items ul.action-list li,
    ul.footer-items ul.action-list li:last-of-type {
        text-align: left;
        width: 100%;
        margin-bottom: 12px;
    }

    .footer-region ul.footer-menu li:last-of-type {
        width: auto;
    }

    ul.footer-items .nav ul li {
        text-align: left;
    }

    .footer-region ul.social-icons {
        float: none;
    }

    .footer-region ul.social-icons li,
    .footer-region ul.social-icons li:last-of-type {
        float: none;
        text-align: center;
        width: 20px;
        margin-bottom: 20px;
    }

}

/*** min-width 740 ***/
@media screen and (min-width: 740px) {
    /**** Turning mobile nav off on larger screens ****/
    .menu-toggle,
    #mobile-search-bar{
        display: none;
    } 

    .first ul.sub-menu{
        background:rgba(0,0,0,0);
    }
}

/*** max-width 740 ***/
@media (max-width: 740px) {
    /**** Turning regular nav off on smaller screens ****/
    .main-navigation ul {
        display: none;
    }

    /**** Mobile Menu ****/
    .nav-toggle{
        background: rgba(255, 255, 255, 0);
        height: 45px;
        width: 45px;
        display: block;
        z-index: 102;
        position: absolute;
        top: 25px;
        right:25px;
        -webkit-transition: all 100ms ease-in-out;
        -moz-transition: all 100ms ease-in-out;
        -o-transition: all 100ms ease-in-out;
        transition: all 100ms ease-in-out;
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
    }

    .nav-toggle span,
    .nav-toggle span:before,
    .nav-toggle span:after {
        display: block;
        cursor: pointer;
        height: 4px;
        width: 30px;
        background: #fff;
        position: absolute;
        display: block;
        content: "";
        left: 0;
        -webkit-transition: all 100ms ease-in-out;
        -moz-transition: all 100ms ease-in-out;
        -o-transition: all 100ms ease-in-out;
        transition: all 100ms ease-in-out;
    }

    .nav-toggle span {
        top: 23px;
        left: 10px;
    }

    .nav-toggle span:before {
        top: -10px;
    }

    .nav-toggle span:after {
        bottom: -10px;
    }

    .nav-toggle span.open{
        background: none;
    }

    .nav-toggle span.open:before {
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
        top: 0;
        left: 0;
    }

    .nav-toggle span.open:after {
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
        bottom: 0;
        left: 0;
    }

    .toggled .menu {
        position: absolute;
        z-index: 5;
        right: 0;
        top: 0;
        width: 100%;
        background: rgba(250, 86, 0, 0.95);
    }

    .first ul.sub-menu{
        background:#444;
    }

    /**** Mobile Search ****/
    .search{
        display: none;
    }

    .search.toggled{
        display: block;
        background: #222221;
        width:100%;
        box-shadow: 0px 1px 8px #222221;
        padding-bottom: 0;
    }

    .search.toggled input{
        background: #ffffff;
        color: #222221;
        padding: 0;
        width: 80%;
        margin-left: 5%;
        padding: 0 5%;
        border:none;
        border-radius: 3px;
        height:40px;
        margin-top: 18px;
        margin-bottom: 18px;
    }

    .search.toggled input#searchsubmit{
        top:12px;
        right: 9%;
        background-position: -18px 0;
    }

    /**** Header ****/
    .header-right {
        padding-top: 35px;
    }

    ul.social-icons {
        float: left;
    }

    .header-left,
    .header-right {
        width: 100%;
        padding-top: 0;
    }

    .hero-content header {
        margin-bottom: 18px;
    }

    .hero-content h2 a {
        font-size: 14px;
        line-height: 16px;
        margin-left: 0;
        margin-top: 5px;
    }

    .hero-region {
        padding-bottom: 24px;
        background-image: none;
    }

    /**** Content ****/
    .main {
        margin-top: 0;
    }

    /**** Typography ****/
    h1 {
        font-size: 40px;
        line-height: 34px;
    }
}

/*** max-width 680 ***/
@media (max-width: 680px) {
    /**** Carousel Spacing ****/
    .jcarousel li {
        margin: 0 9px;
    }
}

/*** max-width 640 ***/
@media (max-width: 640px) {
    /**** Real Change Section ****/
    header.action-header img {
        margin-right: 3%;
        width: 35%;
    }

    .action-content p {
        margin-bottom: 10px;
    }

    .action-content, footer.take-action {
        width: 62%;
    }

    /**** It Takes You Section ****/
    ul.it-takes-you-features .label-wrap {
        bottom: 6px;
        left: 6px;
    }

    /**** Spacing ****/
    .hero-content,
    .footer-content, 
    section.real-change, 
    section.it-takes-you {
        padding-right: 15px;
        padding-left: 15px;
    }

    button.menu-toggle {
        right: 15px;
    }

    /**** Carousel Spacing ****/
    .features {
        padding-left: 5px;
        padding-right: 5px;
    }

    .jcarousel li {
        margin: 0 8px;
    }
}

/*** max-width 570 ***/
@media (max-width: 570px) {
    ul.it-takes-you-features .label-wrap {
        bottom: 6px;
        left: 0;
        text-align: center;
        width: 80%;
        padding: 0 10%;
    }

    ul.it-takes-you-features p {
        font-size: 15px;
        line-height: 15px;
    }

    ul.it-takes-you-features span.icon-carat {
        display: none;
    }

    footer.take-action a {
        padding: 5px 13px 5px 8px;
    }
}

/*** max-width 500 ***/
@media (max-width: 500px) {
    /**** Typography ****/
    h2 {
        font-size: 26px;
        line-height: 29px;
    }

    /**** Real Change Section *****/
    header.action-header img {
        display: none;
    }

    .action-content, footer.take-action {
        width: 100%;
    }

    footer.take-action a span {
        font-size: 12px;
        margin-right: 6px;
    }

    /**** It Takes You Section ****/
    ul.it-takes-you-features img {
        display: none;
    }

    ul.it-takes-you-features .label-wrap {
        position: relative;
        text-align: left;
        bottom: 0;
        left: 0;
        padding: 0;
        width: 100%;
    }

    ul.it-takes-you-features a {
        background: #fd5a1e;
        padding: 7px 13px 7px 8px;
        display: inline-block;
        font-weight: bold;
        text-decoration: none;
        text-transform: uppercase;
        -webkit-transition: all 0.2s ease 0s;
        -moz-transition: all 0.2s ease 0s;
        -o-transition: all 0.2s ease 0s;
        transition: all 0.2s ease 0s;
    }

    ul.it-takes-you-features p {
        font-size: 13px;
    }

    ul.it-takes-you-features a:hover {
        background: #222221;
    }

    ul.it-takes-you-features span.icon-carat {
        display: table-cell;
        font-size: 12px;
        margin-right: 6px;
        vertical-align: middle;
        width: 10px;
    }

    ul.it-takes-you-features li {
        display: inline-block;
        float: none;
        width: auto;
        margin-bottom: 10px;
    }

    /**** Carousel Spacing ****/
    .jcarousel li {
        margin: 0 7px;
    }

    .search input {
        margin-top: 10px;
    }

}

/*** max-width 485 ***/
@media (max-width: 485px) {
    /**** Typography ****/
    h1 {
        font-size: 30px;
        line-height: 26px;
    }

    /**** Mobile Menu ****/
    .search {
        float: none;
        padding-bottom: 10px;
    }

    .search input {
        width: calc(100% - 50px);
        margin-left: 0;
    }

    /**** Footer ****/
    .mission-banner img {
        margin-left: auto;
        margin-right: auto;
        display: block;
        width: 100%;
        max-width: 300px;
    }

    ul.footer-items li {
        width: 100%;
        margin-right: 24px;
    }

    .twitter-icon,
    .twitter-wrap {
        display: none;
    } /* hide twitter once screen gets small */

    /**** Carousel Spacing ****/
    .jcarousel li {
        margin: 0 6px;
    }
}

/*** max-width 400 ***/
@media (max-width: 400px) {
    /**** It Takes You Section ****/
    ul.it-takes-you-features li {
        display: block;
    }

    /**** Carousel Spacing ****/
    .jcarousel li {
        margin: 0;
    }

    .features {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/** Debugging **/
/* Use this for debugging, but comment this out when pushing to production. */
/*input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}*/