@charset "UTF-8";
/* ---------------------------------------------------------------------
Fonts
------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------
Dimensions used multiple times
------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------
Standard Colors
------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------
 Animation Settings
------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------
 Specific Module
------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------
Vendor prefixed properties
------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------
Animation Effects
------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------
Breakpoint Nesting
------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------
Mixins
------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------
 Global utility
------------------------------------------------------------------------ */
.isVisuallyHidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  margin: 0 !important;
  clip: rect(1px 1px 1px 1px) !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  overflow: hidden !important; }

.linkProminent {
  font-weight: bold;
  color: red;
  font-size: 18px;
  line-height: 1.4; }

.linkProminent:active,
.linkProminent:hover {
  color: maroon; }

.alignBtn {
  line-height: 37px; }

.isItalic {
  font-style: italic; }

.pushAlignBtn {
  margin-top: 10px; }

.phoneOnly {
  display: none; }
  @media screen and (max-width: 640px) {
    .phoneOnly {
      display: block; } }
  @media screen and (min-width: 641px) and (max-width: 960px) {
    .phoneOnly {
      display: none; } }

@media screen and (max-width: 640px) {
  .desktopOnly {
    display: none; } }

@media screen and (max-width: 640px) {
  .desktopLargeOnly {
    display: none; } }
@media screen and (min-width: 641px) and (max-width: 960px) {
  .desktopLargeOnly {
    display: none; } }

/* ---------------------------------------------------------------------
United Way of Greater Houston
This file imports all the shared styles
------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------
Original Author: Benjamin Bowles
Contributors: N/A

Target Browsers: IE8 Progressive, IE9/IE10/IE11, Firefox 23.0.x, Safari 6.0.x, Chrome 29.0.x
Media Type: Screen, Projection
Width: All Sizes-no mobile or print
------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------
RESET CSS (thanks Eric Meyer)
------------------------------------------------------------------------ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  vertical-align: baseline; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

:focus {
  outline: 0; }

/* Always show a vertical scrollbar, even when there is no scrolling */
html {
  overflow-y: scroll; }

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%; }

/* ---------------------------------------------------------------------
 HTML5 Block / Inline Block declarations
------------------------------------------------------------------------ */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

audio, canvas, video {
  display: inline-block; }

/* ---------------------------------------------------------------------
 Form Reset Styles
------------------------------------------------------------------------ */
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
  -webkit-appearance: none; }

input[type=search] {
  -webkit-appearance: none;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box; }

textarea {
  overflow: auto;
  vertical-align: top;
  resize: vertical; }

::-moz-focus-inner {
  border: 0;
  padding: 0; }

/* ---------------------------------------------------------------------
Fonts
------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------
Dimensions used multiple times
------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------
Standard Colors
------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------
 Animation Settings
------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------
 Specific Module
------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------
Vendor prefixed properties
------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------
Animation Effects
------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------
Breakpoint Nesting
------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------
Mixins
------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------
 Global utility
------------------------------------------------------------------------ */
.isVisuallyHidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  margin: 0 !important;
  clip: rect(1px 1px 1px 1px) !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  overflow: hidden !important; }

.linkProminent {
  font-weight: bold;
  color: red;
  font-size: 18px;
  line-height: 1.4; }

.linkProminent:active,
.linkProminent:hover {
  color: maroon; }

.alignBtn {
  line-height: 37px; }

.isItalic {
  font-style: italic; }

.pushAlignBtn {
  margin-top: 10px; }

.phoneOnly {
  display: none; }
  @media screen and (max-width: 640px) {
    .phoneOnly {
      display: block; } }
  @media screen and (min-width: 641px) and (max-width: 960px) {
    .phoneOnly {
      display: none; } }

@media screen and (max-width: 640px) {
  .desktopOnly {
    display: none; } }

@media screen and (max-width: 640px) {
  .desktopLargeOnly {
    display: none; } }
@media screen and (min-width: 641px) and (max-width: 960px) {
  .desktopLargeOnly {
    display: none; } }

@font-face {
  font-family: "DIN Next W01 Bold";
  src: url("../../fonts/b32ab78b-6c51-4bd3-bc37-4edcec0331f8.eot?#iefix");
  src: url("../../fonts/b32ab78b-6c51-4bd3-bc37-4edcec0331f8.eot?#iefix") format("eot"), url("../../fonts/9949035f-6226-4080-a14a-bf7d94ffb1e1.woff") format("woff"), url("../../fonts/6241bd09-15c2-485e-9796-9db8d0aa6974.ttf") format("truetype"), url("../../fonts/af94da3e-4232-416a-b6bc-f39f85dd5db6.svg#af94da3e-4232-416a-b6bc-f39f85dd5db6") format("svg"); }
@font-face {
  font-family: "DIN Next W01 Light";
  src: url("../../fonts/3e0b2cd7-9657-438b-b4af-e04122e8f1f7.eot?#iefix");
  src: url("../../fonts/3e0b2cd7-9657-438b-b4af-e04122e8f1f7.eot?#iefix") format("eot"), url("../../fonts/bc176270-17fa-4c78-a343-9fe52824e501.woff") format("woff"), url("../../fonts/3516f91d-ac48-42cd-acfe-1be691152cc4.ttf") format("truetype"), url("../../fonts/d1b1e866-a411-42ba-8f75-72bf28e23694.svg#d1b1e866-a411-42ba-8f75-72bf28e23694") format("svg"); }
@font-face {
  font-family: "DIN Next W01 Regular";
  src: url("../../fonts/da088ecc-a53c-4831-a95b-6fd81b5b338a.eot?#iefix");
  src: url("../../fonts/da088ecc-a53c-4831-a95b-6fd81b5b338a.eot?#iefix") format("eot"), url("../../fonts/c5a7f89e-15b6-49a9-8259-5ea665e72191.woff") format("woff"), url("../../fonts/868c94b5-ca49-46b7-b62b-297f8d861125.ttf") format("truetype"), url("../../fonts/e3145f65-29b5-4f7f-8c6e-2dc135021b6a.svg#e3145f65-29b5-4f7f-8c6e-2dc135021b6a") format("svg"); }
@font-face {
  font-family: "DIN Next W01 Medium";
  src: url("../../fonts/324dee78-6585-4c13-8ca3-5817cc600d84.eot?#iefix");
  src: url("../../fonts/324dee78-6585-4c13-8ca3-5817cc600d84.eot?#iefix") format("eot"), url("../../fonts/4bf0ead4-e61b-4992-832b-6ff05828d99f.woff") format("woff"), url("../../fonts/73713a0b-8f6a-4c4e-b8a8-7cf238e632f6.ttf") format("truetype"), url("../../fonts/b90b6bdf-15e2-4544-9fe0-92c79fff0ecd.svg#b90b6bdf-15e2-4544-9fe0-92c79fff0ecd") format("svg"); }
/* ---------------------------------------------------------------------
 Base Styles
------------------------------------------------------------------------ */
html, body {
  height: 100%; }

@media screen and (min-width: 961px) and (max-width: 1020px) {
  html {
    overflow-x: hidden; } }
@media screen and (min-width: 641px) and (max-width: 960px) {
  html {
    overflow-x: hidden; } }
@media screen and (max-width: 640px) {
  html {
    overflow-x: hidden; } }

body {
  background: white;
  font-family: "DIN Next W01 Light", helvetica, arial, sans-serif;
  font-size: 21px;
  color: #333333;
  letter-spacing: -.02em; }
  @media screen and (max-width: 640px) {
    body {
      font-size: 13px; } }

img {
  max-width: 100%;
  height: auto;
  display: block; }

a {
  color: #000099;
  text-decoration: none;
  -webkit-transition: color 0.5s ease;
  -moz-transition: color 0.5s ease;
  -o-transition: color 0.5s ease;
  transition: color 0.5s ease; }

a:active,
a:hover {
  color: #0099cc; }

a > strong,
a > b {
  color: black; }

p {
  font-size: 21px;
  line-height: 1.33;
  color: #333333; }
  @media screen and (max-width: 640px) {
    p {
      font-size: 13px; } }

b,
strong {
  font-family: "DIN Next W01 Medium", helvetica, arial, sans-serif; }

/*doc
---
title: Page
name: page
category: container
---

The page class defines a container for a section of content that has page layout and
requires max-width as well as centering within the browser window. Extension can be
used modify the layout dimensions, if needed.

```html_example

    <div class="page">
        <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
    </div>

```
*/
/* ---------------------------------------------------------------------
.page
------------------------------------------------------------------------ */
.page {
  max-width: 1020px;
  margin: 0 auto; }

/*doc
---
title: Banner
name: banner
category: container
---

The banner class defines a container for a section of content that has banner layout and
requires max-width as well as centering within the browser window. Extension can be
used modify the layout dimensions, if needed.

```html_example

    <header class="banner" role="banner">
        <div class="split">
            <div class="split-left mix-split_bannerLeft">
                <div class="brandingBanner">
                    <h1 class="brandingBanner-hd">
                        <a href="#" alt="United Way of Greater Houston" /><img src="../assets/images/unitedway-logo.png" /></a>
                    </h1>
                </div>
            </div>
            <div class="split-right mix-split_bannerRight">
                <nav class="navGlobal" role="navigation">                    
                    <ul id="nav-sub" class="navGlobal-list navGlobal-list_a">
                        <li class="level-1 first" id="nav-sub-about"><a herf="#">About</a>
                            <ul>
                                <li class="level-2 first" id="nav-sub-about-our-mission"><a herf="#">Our Mission</a></li>
                                <li class="level-2" id="nav-sub-about-board-and-leadership"><a herf="#">Board and Leadership</a></li>
                                <li class="level-2" id="nav-sub-about-financials"><a herf="#">Financials</a></li>
                                <li class="level-2" id="nav-sub-about-community-investment"><a herf="#">Community Investment</a></li>
                                <li class="level-2" id="nav-sub-about-united-way-agencies-grantees"><a herf="#">United Way Agencies &amp; Grantees</a></li>
                                <li class="level-2" id="nav-sub-about-special-grants"><a herf="#">Special Grants</a></li>
                                <li class="level-2" id="nav-sub-about-service-centers"><a herf="#">Service Centers</a></li>
                                <li class="level-2" id="nav-sub-about-community-resource-center"><a herf="#">Community Resource Center</a></li>
                                <li class="level-2" id="nav-sub-about-volunteers"><a herf="#">Volunteers</a></li>
                                <li class="level-2" id="nav-sub-about-careers"><a herf="#">Careers</a></li>
                                <li class="level-2 last" id="nav-sub-about-contact-us"><a herf="#">Contact Us</a></li>
                            </ul>
                        </li>
                        <li class="level-1" id="nav-sub-job-bank"><a herf="#">Job Bank</a></li>
                        <li class="level-1" id="nav-sub-news"><a herf="#">News</a></li>
                        <li class="level-1" id="nav-sub-non-profit-connection"><a herf="#">Non-Profit Connection</a></li>
                        <li class="level-1 last" id="nav-sub-our-211-helpline"><a herf="#">Our 211 Helpline</a></li></li>
                    </ul>
                    <ul id="nav-sub" class="navGlobal-list navGlobal-list_b">
                        <li class="level-1" id="nav-why-united-way"><a herf="#">Why United Way?</a></li>
                        <li class="level-1 first" id="nav-sub-our-work"><a herf="#">Our Work</a>
                            <ul>
                                <li class="level-2 first" id="nav-sub-about-our-mission"><a herf="#">Our Mission</a></li>
                                <li class="level-2" id="nav-sub-about-board-and-leadership"><a herf="#">Board and Leadership</a></li>
                                <li class="level-2" id="nav-sub-about-financials"><a herf="#">Financials</a></li>
                                <li class="level-2" id="nav-sub-about-community-investment"><a herf="#">Community Investment</a></li>
                                <li class="level-2" id="nav-sub-about-united-way-agencies-grantees"><a herf="#">United Way Agencies &amp; Grantees</a></li>
                                <li class="level-2" id="nav-sub-about-special-grants"><a herf="#">Special Grants</a></li>
                                <li class="level-2" id="nav-sub-about-service-centers"><a herf="#">Service Centers</a></li>
                                <li class="level-2" id="nav-sub-about-community-resource-center"><a herf="#">Community Resource Center</a></li>
                                <li class="level-2" id="nav-sub-about-volunteers"><a herf="#">Volunteers</a></li>
                                <li class="level-2" id="nav-sub-about-careers"><a herf="#">Careers</a></li>
                                <li class="level-2 last" id="nav-sub-about-contact-us"><a herf="#">Contact Us</a></li>
                            </ul>
                        </li>
                        <li class="level-1" id="nav-sub-your-campaign"><a herf="#">Your Campaign</a></li>
                        <li class="level-1 parent-navGlobal-item_isActive" id="nav-sub-donor-groups"><a herf="#">Donor Groups</a></li>
                        <li class="level-1 last" id="nav-sub-donate"><a herf="#">Donate</a></li>
                    </ul>
                </nav>
                
                <div class="search search_banner">
                    <form class="search-form">
                        <input type="text" value="" placeholder="Search" class="search-input search-input_sm" />
                        <input type="submit" value="Search" class="search-button search-button_sm" />
                    </form>
                </div>
            </div>
        </div>
    
        <div class="navHamburger-btn js-mobile-navButton">
            <div class="navHamburger-btn-open">
                <span class="navHamburger-btn-open-text">Menu</span>
                <span class="navHamburger-btn-open-icon">
                    <i class="navHamburger-btn-open-icon-bar"></i>
                    <i class="navHamburger-btn-open-icon-bar"></i>
                    <i class="navHamburger-btn-open-icon-bar"></i>
                </span>
            </div>
            <div class="navHamburger-btn-close">
                <i class="icon icon_close"></i>
            </div>
        </div>
        <div class="navHamburger">
            <a herf="#" class="navHamburger-banner">Donate</a>
            
            <ul class="navHamburger-list">
                <li class="level-1 first" id="nav-sub-why-united-way"><a herf="#">Why United Way?</a></li>
                <li class="level-1" id="nav-sub-our-work"><a herf="#">Our Work</a></li>
                <li class="level-1" id="nav-sub-your-campaign"><a herf="#">Your Campaign</a></li>
                <li class="level-1 parent-navhamburger-list-item_isActive" id="nav-sub-donor-groups"><a herf="#">Donor Groups</a></li>
                <li class="level-1" id="nav-sub-about"><a herf="#">About</a></li>
                <li class="level-1" id="nav-sub-job-bank"><a herf="#">Job Bank</a></li>
                <li class="level-1" id="nav-sub-news"><a herf="#">News</a></li>
                <li class="level-1" id="nav-sub-non-profit-connection"><a herf="#">Non-Profit Connection</a></li>
                <li class="level-1" id="nav-sub-our-211-helpline"><a herf="#">Our 211 Helpline</a></li>
                <li class="level-1 last" id="nav-sub-donate"><a herf="#">Donate</a></li>    
                <li class="navHamburger-list-item navHamburger-list-item_search">
                    <div class="search">
                        <form class="search-form">
                            <input type="text" value="" placeholder="Search" class="search-input search-input_sm" />
                            <input type="submit" value="Search" class="search-button search-button_sm" />
                        </form>
                    </div>
                </li>
            </ul>
        </div>
    </header>

```
*/
/* ---------------------------------------------------------------------
Banner
------------------------------------------------------------------------ */
.banner {
  max-width: 1020px;
  position: relative;
  margin: 0 auto;
  padding: 22px 0 0 0;
  margin-bottom: 60px; }
  @media screen and (min-width: 961px) and (max-width: 1020px) {
    .banner {
      margin-left: 40px;
      margin-right: 40px; } }
  @media screen and (min-width: 641px) and (max-width: 960px) {
    .banner {
      margin: 0 3.125% 40px; } }
  @media screen and (max-width: 640px) {
    .banner {
      margin-bottom: 0; } }

/*doc
---
title: Footer
name: footer
category: container
---

The footer class defines a container for a section of content that has footer layout and
requires max-width as well as centering within the browser window. Extension can be
used modify the layout dimensions, if needed.

```html_example

    <footer class="footer">
        <div class="footer-constrained">
            <div class="grid">
                <div class="grid-col grid-col_8of12">
                    <nav class="navMeta">
                        <div class="grid">
                            <div class="grid-col grid-col_3of12">
                                <ul class="navMeta-list">
                                    <li class="first"><a herf="#">Why United Way?</a></li>
                                    <li><a herf="#">Our Work</a>
                                        <ul>
                                            <li class="first"><a herf="#">Academic Success</a></li>
                                            <li><a herf="#">Family Stability</a></li>
                                            <li><a herf="#">Safety Net</a></li>
                                            <li class="last"><a herf="#">2-1-1  Texas/United Way HELPLINE</a></li>
                                        </ul>
                                    </li>
                                    <li class="parent-here last"><a herf="#">Donor Groups</a>
                                        <ul>
                                            <li class="first"><a herf="#">Become a United Way Donor</a></li>
                                            <li><a herf="#">LINC</a></li>
                                            <li class="here"><a herf="#">Young Leaders</a></li>
                                            <li><a herf="#">Women's Initiative</a></li>
                                            <li><a herf="#">Chairman's Club</a></li>
                                            <li><a herf="#">Impact Circle</a></li>
                                            <li><a herf="#">Leadership Circle</a></li>
                                            <li><a herf="#">Alexis de Tocqueville Society</a></li>
                                            <li><a herf="#">Diamond Donors</a></li>
                                            <li class="last"><a herf="#">Photo Gallery</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                            <div class="grid-col grid-col_3of12">
                                <ul class="navMeta-list">
                                    <li class="first"><a herf="#">Your Campaign</a>
                                        <ul>
                                            <li class="first"><a herf="#">How to Run a Campaign</a></li>
                                            <li><a herf="#">Campaign Toolbox</a></li>
                                            <li><a herf="#">Campaign Events</a></li>
                                            <li><a herf="#">Campaign Newsletter</a></li>
                                            <li class="last"><a herf="#">Days of Caring</a></li>
                                        </ul>
                                    </li>
                                    <li class="last"><a herf="#">About</a>
                                        <ul>
                                            <li class="first"><a herf="#">Our Mission</a></li>
                                            <li><a herf="#">Board and Leadership</a></li>
                                            <li><a herf="#">Financials</a></li>
                                            <li><a herf="#">Community Investment</a></li>
                                            <li><a herf="#">United Way Agencies &amp; Grantees</a></li>
                                            <li><a herf="#">Special Grants</a></li>
                                            <li><a herf="#">Service Centers</a></li>
                                            <li><a herf="#">Community Resource Center</a></li>
                                            <li><a herf="#">Volunteers</a></li>
                                            <li><a herf="#">Careers</a></li>
                                            <li class="last"><a herf="#">Contact Us</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                            <div class="grid-col grid-col_3of12">
                                <ul class="navMeta-list">
                                    <li class="first last"><a herf="#">Non-Profit Connection</a>
                                        <ul>
                                            <li class="first"><a herf="#">Workshop &amp; Webminars</a></li>
                                            <li><a herf="#">Computer Classes</a></li>
                                            <li><a herf="#">Management Consulting</a></li>
                                            <li><a herf="#">Leadership Development</a></li>
                                            <li><a herf="#">Board Development</a></li>
                                            <li><a herf="#">Inter-Agency Meetings</a></li>
                                            <li><a herf="#">CPR Meeting Space</a></li>
                                            <li class="last"><a herf="#">Grant Opportunities</a></li>
                                        </ul>
                                    </li>
                                    <li class="first"><a herf="#">Job Bank</a></li>
                                    <li class="last"><a herf="#">News</a>
                                        <ul>
                                            <li class="first"><a herf="#">Media Clips</a></li>
                                            <li><a herf="#">Press Releases</a></li>
                                            <li class="last"><a herf="#">Publications</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                            <div class="grid-col grid-col_3of12">
                                <ul class="navMeta-list">
                                    <li class="first"><a herf="#">Our 211 Helpline</a></li>
                                    <li class="last"><a herf="#">Donate</a></li>
                                </ul>
                            </div>
                        </div>
                    </nav>
                </div><!-- end .grid-col -->
    
                <div class="grid-col grid-col_3of12 mix-grid-col_push1of12">
                    <div class="newsletter">
                        <form>
                            <div class="newsletter-label">
                                <label class="hdg hdg_7 mix-hdg_heavy" for="footer-newsletter-signup">Newsletter Signup</label>
                            </div>
                            <div class="newsletter-row">
                                <input type="text" name="newsletter-signup" value="" placeholder="email address" class="newsletter-input" id="footer-newsletter-signup" />
                                <input type="submit" value="Submit" class="newsletter-button" />
                            </div>
                        </form>
                    </div>
    
                    <div class="infoMeta vcard" role="contentinfo">
                        <h4 class="hdg hdg_7 mix-hdg_heavy"><span class="infoMeta-org org">United Way of Greater Houston</span></h4>
                        <h5 class="hdg hdg_7">
                            <span class="infoMeta-contact">
                                <span class="adr">
                                    <span class="street-address">50 Waugh Drive</span><br/>
                                    <span class="locality">Houston</span>, 
                                    <span class="region">Texas</span> 
                                    <span class="postal-code">77007</span><br/>
                                </span>
                                <span class="tel">713-685-2300</span><br/>
                            </span>
                        </h5>
                    </div>
    
                    <div class="linksSocial">
                        <ul class="hList hList_sm">
                            <li>
                                <a herf="#"><i class="icon icon_youtube">Subscribe on YouTube</i></a>
                            </li>
                            <li>
                                <a herf="#"><i class="icon icon_facebookBW">Join Us on Facebook</i></a>
                            </li>
                            <li>
                                <a herf="#"><i class="icon icon_rss">Subscribe to RSS</i></a>
                            </li>
                        </ul>
                    </div>
                </div><!-- end .grid-col -->
            </div><!-- end .grid -->
        </div>
    </footer>
    
    <div class="copyright" role="contentinfo">
        <p>&copy; Copyright 2014 &ndash; United Way of Greater Houston</p>
    </div>

```
*/
/* ---------------------------------------------------------------------
Footer
------------------------------------------------------------------------ */
.footer {
  height: auto;
  max-width: 1020px;
  padding: 42px 0 17px 0;
  margin: 65px auto 0;
  overflow: hidden;
  background-color: #c1c5c7;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }
  @media screen and (max-width: 640px) {
    .footer {
      margin-top: 25px; } }

.footer-constrained {
  max-width: 920px;
  margin: 0 auto; }
  @media screen and (min-width: 641px) and (max-width: 960px) {
    .footer-constrained {
      padding-left: 3.125%;
      padding-right: 3.125%; } }
  @media screen and (max-width: 640px) {
    .footer-constrained {
      padding-left: 6.25%;
      padding-right: 6.25%; } }

/* ---------------------------------------------------------------------
Footer Copyright
------------------------------------------------------------------------ */
.copyright > p {
  max-width: 1020px;
  margin: 0 auto;
  padding: 15px 0;
  font-family: "DIN Next W01 Regular", helvetica, arial, sans-serif;
  font-size: 12px; }
  @media screen and (min-width: 961px) and (max-width: 1020px) {
    .copyright > p {
      max-width: 920px; } }
  @media screen and (min-width: 641px) and (max-width: 960px) {
    .copyright > p {
      padding-left: 3.125%;
      padding-right: 3.125%; } }
  @media screen and (max-width: 640px) {
    .copyright > p {
      padding: 12px 6.25% 10px; } }

/*doc
---
title: Form
name: Form
category: layout
---


```html_example

<form class="form">
    <ul class="formList">
        <li>
            <ul class="blocks blocks_2up">
                <li class="form-error">
                    <label for="contact-fn" class="label label_required">First Name*</label>
                    <input id="contact-fn" type="text" class="input input_txt mix-input_full" />
                    <div class="form-error-message">
                        Error Message text here
                    </div>
                </li>
                <li>
                    <label for="contact-ln" class="label label_required">Last Name*</label>
                    <input id="contact-ln" type="text" class="input input_txt mix-input_full" />
                </li>
            </ul>
        </li>

        <li>
            <ul class="blocks blocks_2up">
                <li>
                    <label for="contact-email" class="label label_required">Email Address*</label>
                    <input id="contact-email" type="email" class="input input_txt mix-input_full" />
                </li>
                <li>
                <li>
                    <label for="contact-phone-area" class="label">Phone Number</label>
                    <ul class="hList hList_sm">
                        <li>
                            <input id="contact-phone-area" type="email" class="input input_txt mix-input_tiny" />
                            <div class="form--listhelp">Area Code</div>
                        </li>
                        <li>
                            <input id="contact-phone-area" type="email" class="input input_txt mix-input_md" />
                            <div class="form-list-help">Phone Number</div>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</form>

<div class="form">
    <ul class="form-list">
        <li class="form-list-item form-list-item_pushBottom_lg">
            <label for="" class="isVisuallyHidden">Amount</label>
            <input type="text" value="" placeholder="$2500" class="donateForm-input donateForm-input_solid" />
            <label class="hdg hdg_5 mix-hdg_light">Join a donor group when you donate at <a href="#">these levels</a></label>
        </li>
        <li class="form-list-item form-list-item_flushBottom">
            <div class="radioGroup">
                <div class="hdg hdg_5 mix-hdg_light">
                    <label class="radio">
                        <input type="radio" id="radio1" name="radio" class="radio-input">
                        <span class="radio-indicator"></span>
                        In honor of
                    </label>
                    
                    <label class="radio">
                        <input type="radio" id="radio1" name="radio" class="radio-input">
                        <span class="radio-indicator"></span>
                        In memory of
                    </label>
                </div>
            </div>
        </li>
        <li class="form-list-item">
            <label for="" class="isVisuallyHidden">Name</label>
            <input type="text" value="" placeholder="Name" class="input input_basic" />
        </li>
        <li class="donateForm-list-item">
            <div class="hdg hdg_5 mix-hdg_light">
                <label class="checkbox">
                    <input type="checkbox" id="radio1" name="checkbox" class="checkbox-input">
                    <span class="checkbox-indicator"></span>
                    I want to find out about leaving a planned gift
                </label>
            </div>
        </li>
        <li class="form-list-item">
            <div class="form-actions">
                <button class="btn btn_form">
                    Continue
                    <i class="icon icon_arrowRight icon_arrowRight_white"></i>
                </button>
            </div>
        </li>
    </ul>
</div>

```
*/
/* ---------------------------------------------------------------------
 Form Object
------------------------------------------------------------------------ */
.form-list:before, .form-list:after {
  content: "";
  display: table; }
.form-list:after {
  clear: both; }

.form-list > li {
  margin-bottom: 15px; }

.form-list-item:before, .form-list-item:after {
  content: "";
  display: table; }
.form-list-item:after {
  clear: both; }

.form-list > li.form-list-item_pushBottom_sm {
  margin-bottom: 5px; }

.form-list > li.form-list-item_pushBottom_md {
  margin-bottom: 15px; }
  @media screen and (max-width: 640px) {
    .form-list > li.form-list-item_pushBottom_md {
      margin-bottom: 25px; } }

.form-list > li.form-list-item_pushBottom_lg {
  margin-bottom: 60px; }
  @media screen and (max-width: 640px) {
    .form-list > li.form-list-item_pushBottom_lg {
      margin-bottom: 25px; } }

.form-list > li.form-list-item_flushBottom {
  margin-bottom: 0; }

.form-list-item-col {
  position: relative;
  float: left; }

.form-list-item-col + .form-list-item-col {
  margin-left: 1.6326530612245%; }

.form-list-item_1of4 {
  width: 47.244897959184%; }

.form-list-item_2of4 {
  width: 49.183673469388%; }

.form-list-item_3of4 {
  width: 51.122448979592%; }

.form-list-item_4of4 {
  width: 100%; }

.form-list-alignInput {
  margin-top: 12px; }

.form-list-help {
  font-size: 12px;
  margin-top: 3px;
  display: block; }

.form-footnote {
  font-weight: bold; }

.form-actions {
  overflow: hidden; }

.form-actions > * {
  float: right; }

.form-error label {
  color: red; }

.form-error input {
  border-color: red; }

.form-error-message {
  color: red;
  margin-top: 5px;
  font-size: 16px; }

.form-error-message_pushButtom {
  margin-bottom: 20px; }

.form-success-message {
  color: green;
  margin-top: 5px;
  font-size: 16px; }

.form-success-message_pushButtom {
  margin-bottom: 20px; }

/*doc
---
title: Form Inputs
name: formInputs
category: content
---

Form elements

```html_example

    <input type="text" class="input input_txt_adj" placeholder="Text input" />

    <ul class="formList">
        <li>
            <label class="label">Form Label</label>
            <input type="text" class="input input_txt" placeholder="Text input" />
        </li>
        <li>
          <label class="label">Small input/100px/.mix-input_sm</label>
            <input type="text" class="input input_txt mix-input_sm"  />
        </li>
        <li>
            <label class="label">Small .mix-input_md <span class="form-note">(Optional)</span></label>
            <input type="text" class="input input_txt mix-input_md"  />
        </li>
        <li class="hasError">
            <label class="label">Small input/440px/.mix-input_lg <span class="form-note">(Optional)</span></label>
            <input type="text" class="input input_txt mix-input_lg"  />
            <div class="error">Fill in this field please</div>
        </li>
        <li class="form-list-item form-list-item_pushBottom_lg">
            <label for="" class="isVisuallyHidden">Amount</label>
            <input type="text" value="" placeholder="$2500" class="input input_solid input_solid_full" />
            <label class="hdg hdg_5 mix-hdg_light">Join a donor group when you donate at <a href="#">these levels</a></label>
        </li>
        <li class="form-list-item form-list-item_flushBottom">
            <div class="radioGroup">
                <div class="hdg hdg_5 mix-hdg_light">
                    <label class="radio">
                        <input type="radio" id="radio1" name="radio" class="radio-input">
                        <span class="radio-indicator"></span>
                        In honor of
                    </label>

                    <label class="radio">
                        <input type="radio" id="radio1" name="radio" class="radio-input">
                        <span class="radio-indicator"></span>
                        In memory of
                    </label>
                </div>
            </div>
        </li>
    </ul>

```
*/
/* ---------------------------------------------------------------------
Form label Styles
------------------------------------------------------------------------ */
label > a {
  text-decoration: underline; }

label > a:hover {
  text-decoration: none; }

label,
.label {
  display: block; }

.label {
  margin-bottom: 3px; }

.label_required {
  font-weight: bold; }

/* ---------------------------------------------------------------------
Text inputs
------------------------------------------------------------------------ */
input {
  font-family: "DIN Next W01 Light", helvetica, arial, sans-serif;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0; }

.input {
  padding: 9px 6px;
  border: 1px solid #ebebe2;
  font-size: 14px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: color 0.5s ease;
  -moz-transition: color 0.5s ease;
  -o-transition: color 0.5s ease;
  transition: color 0.5s ease; }
  .input::-webkit-input-placeholder {
    color: #9b9b95; }
  .input:-moz-placeholder {
    color: #9b9b95; }
  .input::-moz-placeholder {
    color: #9b9b95; }
  .input:-ms-input-placeholder {
    color: #9b9b95; }
  .input.hasPlaceholderText {
    color: #9b9b95; }

input[type="checkbox"] {
  display: inline-block;
  vertical-align: top; }

.input_txt {
  border: 1px solid #e3e3da; }

.input_basic, .select2 {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  padding: 6px 0 3px;
  border: none;
  color: #9ec5fe;
  font-size: 30px;
  border: none;
  border-bottom: 1px solid black;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }
  @media screen and (max-width: 640px) {
    .input_basic {
      font-size: 18px; } }

.input_solid {
  width: 50%;
  margin-bottom: 10px;
  padding: 10px 15px 7px;
  background: #9ec5fe;
  font-size: 30px;
  color: white;
  border: none; }
  .input_solid::-webkit-input-placeholder {
    color: white; }
  .input_solid:-moz-placeholder {
    color: white; }
  .input_solid::-moz-placeholder {
    color: white; }
  .input_solid:-ms-input-placeholder {
    color: white; }
  .input_solid.hasPlaceholderText {
    color: white; }
  @media screen and (max-width: 640px) {
    .input_solid {
      font-size: 18px; } }

@media screen and (max-width: 640px) {
  .input_solid_full {
    width: 100%; } }

.input_textarea {
  height: 150px; }

.input_required_special {
  display: none; }

.mix-input_tiny {
  width: 60px; }

.mix-input_sm {
  width: 88px; }

.mix-input_smmd {
  width: 140px; }

.mix-input_md {
  width: 200px; }

.mix-input_lg {
  width: 350px; }

.mix-input_huge {
  width: 425px; }

.input[type="email"] {
  font-family: helvetica, arial, sans-serif; }

.mix-input_full {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%; }

.mix-input_half {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 50%; }

/* ---------------------------------------------------------------------
Radio / Checkbox inputs
------------------------------------------------------------------------ */
.radioGroup:before, .radioGroup:after,
.checkbox:before,
.checkbox:after {
  content: "";
  display: table; }
.radioGroup:after,
.checkbox:after {
  clear: both; }

.radioGroup_pushBottom {
  margin-bottom: 10px; }

.checkbox,
.radio {
  display: block;
  position: relative;
  float: left;
  padding: 10px 25px 3px 23px; }

.checkbox-input,
.checkbox-input[type="checkbox"],
.radio-input {
  display: none;
  vertical-align: middle;
  overflow: hidden;
  margin-right: 5px;
  margin-left: -23px; }

.checkbox-indicator,
.radio-indicator {
  display: block;
  width: 13px;
  height: 13px;
  position: absolute;
  top: 5px;
  left: -6px;
  background: #bcbdc0;
  line-height: 1;
  border: 5px solid black;
  -webkit-border-radius: 18px;
  -moz-border-radius: 18px;
  border-radius: 18px; }

.checkbox-indicator:after,
.radio-indicator:after {
  content: " ";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: -3px;
  left: -3px;
  border: 3px solid white;
  -webkit-border-radius: 18px;
  -moz-border-radius: 18px;
  border-radius: 18px; }

.checkbox-input:checked ~ .checkbox-indicator,
.radio-input:checked ~ .radio-indicator {
  background: #9ec5fe; }

/* ---------------------------------------------------------------------
Select inputs
------------------------------------------------------------------------ */
/*
.select-input {
    display: inline-block;
    background: $input-SELECT_COLOR;
    background-size: 16px 14px;
    width: auto;
    margin: 0 10px 5px 0;
    padding: 6px 5px 3px;
    font-size: 18px;
    color: $COLOR_BLACK;
    border: 0;
    @include borderRadius(0);

    @include breakpoint(sm) {
        font-size: 18px;
    }
}

// Checking based on textshadow for custom select support
.textshadow .select-input {
    padding-right: 45px;
    background-image: url(../../images/icons/icon-arrow-down.png);
    background-repeat: no-repeat;
    background-position:  93% 50%;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
}

.textshadow .select-input::-ms-expand{
    display:none;
}
*/
/*
.select {
    position: relative;
    display: inline-block;
    background: $input-SELECT_COLOR;
    margin-bottom: 5px;
}

.select .select-input {
    display: inline-block;
    //margin: 0;
    //padding: .5rem 2.25rem .5rem 1rem;
    margin: 0 10px 0 0;
    padding: 6px 20px 3px 10px;
    
    font-size: 18px;
    color: $COLOR_BLACK;
    
    //line-height: 1.5;
    //color: #555;
    background-color: $input-SELECT_COLOR;
    border: 0;
    @include borderRadius(0);
    cursor: pointer;
    outline: 0;
    -webkit-appearance: none;
    -moz-appearance:    none;
    appearance:         none;
}

.select .select-input:focus:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 $COLOR_BLACK;
}

.select:after {
    position: absolute;
    top: 50%;
    right: 13px;
    display: inline-block;
    content: "";
    width: 0;
    height: 0;
    margin-top: -.15rem;
    pointer-events: none;
    border-top: .35rem solid;
    border-right: .35rem solid transparent;
    border-bottom: .35rem solid transparent;
    border-left: .35rem solid transparent;
}


.select .select-input:focus {
    box-shadow: none;
}

.select .select-input::-ms-expand {
    display: none;
}

@-moz-document url-prefix() {
    .select .select-input {
        text-indent: 0.01px;
        text-overflow: '';
        padding-right: 1rem;
    }
    
    .select option {
        background-color: white;
    }
}

@media screen and (min-width:0\0) {
    .select .select-input {
        z-index: 1;
        padding: 6px 20px 3px 10px;
    }

    .select:after {
        z-index: 5;
    }
    
    .select:before {
        position: absolute;
        top: 0;
        right: 20px;
        bottom: 0;
        z-index: 2;
        content: "";
        display: block;
        width: 30px;
        background-color: $input-SELECT_COLOR;
    }
}
*/
.cfe-select {
  display: inline-block;
  overflow: hidden;
  position: absolute;
  background: #cccccc;
  margin-bottom: 5px;
  padding: 6px 40px 2px 10px;
  color: black;
  font-size: 18px;
  cursor: pointer; }

#cfe-card_exp_m {
  min-width: 80px; }

.cfe-select:after {
  content: " ";
  width: 24px;
  height: 20px;
  background: url(../../images/icons/icon-arrow-down.png) 50% 50% no-repeat;
  background-size: 50% 50%;
  position: absolute;
  top: 50%;
  right: 5px;
  margin-top: -10px; }

.cfe-styled {
  display: inline-block !important;
  position: relative;
  min-width: 140px;
  margin-bottom: 10px;
  margin-right: 5px; }

.select-input_sm {
  min-width: 130px; }

/* Disabled style */
.cfe-disabled,
.cfe-readonly {
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  /* IE 5-7 */
  filter: alpha(opacity=50);
  /* CSS3 */
  opacity: 0.5; }

/* ---------------------------------------------------------------------
Form Message Styles
------------------------------------------------------------------------ */
.msg {
  margin-top: 12px;
  font-size: 16px; }

.msg_error {
  display: none;
  color: red; }

/* ---------------------------------------------------------------------
Form Loading Styles
------------------------------------------------------------------------ */
.loadingIndicator {
  display: block;
  width: 128px;
  height: 15px;
  background: url(../../images/loading.gif) no-repeat 0 0;
  text-indent: -9999px; }

/*doc
---
title: Action Link
name: actionLink
category: content
---


```html_example

<p><a class="actionLink">Link content </a></p>
<p><a class="actionLink actionLink_donate">Link content </a></p>

```
*/
/* ---------------------------------------------------------------------
 Action Link
------------------------------------------------------------------------ */
.actionLink {
  display: inline-block;
  text-transform: uppercase; }

.actionLink_donate {
  margin-top: 10px;
  font-size: 16px;
  font-family: "DIN Next W01 Regular", helvetica, arial, sans-serif; }
  @media screen and (min-width: 641px) and (max-width: 960px) {
    .actionLink_donate {
      float: right;
      margin-bottom: 20px; } }
  @media screen and (max-width: 640px) {
    .actionLink_donate {
      float: right;
      margin-bottom: 20px; } }

/*doc
---
title: Blocks
name: blocks
category: layout
---

Blocks are used to put content along each other with equal widths and distance between.  Styleguide-box is for the styleguide purposes only and shouldn't be used in production code.

```html_example

    <ul class="blocks">
        <li class="styleguide-box">Block 1</li>
        <li class="styleguide-box">Block 2</li>
    </ul>

    <ul class="blocks blocks_3up">
        <li class="styleguide-box">Block 1</li>
        <li class="styleguide-box">Block 2</li>
        <li class="styleguide-box">Block 3</li>
    </ul>
    <ul class="blocks blocks_4up">
        <li class="styleguide-box">Block 1</li>
        <li class="styleguide-box">Block 2</li>
        <li class="styleguide-box">Block 3</li>
        <li class="styleguide-box">Block 4</li>
    </ul>

    <ul class="blocks blocks_4up mix-blocks_variableHeight">
        <li class="styleguide-box">Block 1 - Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac.</li>
        <li class="styleguide-box">Block 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
        <li class="styleguide-box">Block 3</li>
        <li class="styleguide-box">Block 4</li>
        <li class="styleguide-box">Block 1</li>
        <li class="styleguide-box">Block 2</li>
        <li class="styleguide-box">Block 3</li>
        <li class="styleguide-box">Block 4</li>
    </ul>


```
*/
/* ---------------------------------------------------------------------
 Blocks
------------------------------------------------------------------------ */
.blocks {
  margin-left: -3%; }
  .blocks:before, .blocks:after {
    content: "";
    display: table; }
  .blocks:after {
    clear: both; }

.blocks > * {
  float: left;
  width: 47%; }

.blocks > * {
  margin-left: 3%; }

.mix-blocks_variableHeight > * {
  vertical-align: top;
  margin: 0 -4px 15px 3%;
  display: inline-block;
  float: none; }

/* ---------------------------------------------------------------------
 Blocks (3 up)
------------------------------------------------------------------------ */
.blocks_3up > * {
  width: 30.333%; }

/* ---------------------------------------------------------------------
 Blocks (4 up)
------------------------------------------------------------------------ */
.blocks_4up > * {
  width: 22%; }

/* ---------------------------------------------------------------------
 Blocks (Multi Row)
------------------------------------------------------------------------ */
.blocks_multiRow > * {
  margin-bottom: 20px; }

/*doc
---
title: Box
name: box
category: content
---

Box is for independent content snippets that generally appear as boxes

```html_example

    <div class="box">
        <div class="box-hd">
            <h2 class="hdg hdg_3 mix-hdg_caps">Listing Title</h2>
        </div>

        <div class="box-bd">
            <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
            Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod.
            Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula porta felis euismod semper.
            Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac
            consectetur ac, vestibulum at eros.</p>
        </div>
    </div>

```
*/
.box-hd {
  margin-bottom: 15px; }
  @media screen and (max-width: 640px) {
    .box-hd {
      margin-bottom: 7px; } }

/*doc
---
title: Branding Banner
name: brandingBanner
category: content
---

Quick object to support the branding in the banner area of the site.

```html_example

    <div class="brandingBanner">
        <h1 class="brandingBanner-hdg"><a href="#"><img src="../assets/images/unitedway-logo.png" alt="United Way of Greater Houston" /></a></h1>
    </div>

```
*/
/* ---------------------------------------------------------------------
Branding Banner
------------------------------------------------------------------------ */
.brandingBanner {
  width: 75.661375661376%;
  padding-right: 24.338624338624%; }
  @media screen and (max-width: 640px) {
    .brandingBanner {
      width: 110px;
      padding-right: 0;
      margin: 0 auto; } }

/*doc
---
title: Button
name: btn
category: content
---

Below are the standard button used on the site.  Add btn_full class to a btn will change it to occupy 100% of its container.
 Green buttons are used for form submission. Orange buttons are your standard action buttons

```html_example

<ul class="vList">
    <li><a href="#" class="btn">Standard Button</a></li>
    <li><a href="#" class="btn btn_secondary">Secondary Button</a></li>
    <li><a href="#" class="btn mix-btn_chunky">Chunky Button</a></li>
    <li><a href="#" class="btn btn_form ">Form Button</a></li>
    <li><a class="btn btn_donate btn_secondary" href="#"><span class="btn-icon iconFont_heart"></span>Donate</a></li>
</ul>

```
*/
/* ---------------------------------------------------------------------
 Standard Buttons
------------------------------------------------------------------------ */
button {
  margin: 0;
  border: none;
  cursor: pointer; }

.btn {
  text-align: center;
  display: inline-block;
  margin-right: 10px;
  font-size: 21px;
  font-family: "DIN Next W01 Regular", helvetica, arial, sans-serif;
  text-transform: uppercase;
  color: black;
  padding: 7px 14px 4px 14px;
  background-color: #9ec5fe;
  border-bottom: none;
  border-top: none;
  border-left: none;
  border-right: none;
  -webkit-transition: color 0.5s ease, background 0.5s ease;
  -moz-transition: color 0.5s ease, background 0.5s ease;
  -o-transition: color 0.5s ease, background 0.5s ease;
  transition: color 0.5s ease, background 0.5s ease;
  line-height: 1;
  -webkit-appearance: none;
  border-radius: 0; }
  @media screen and (max-width: 640px) {
    .btn {
      font-size: 16px; } }

.btn:hover,
.btn:active {
  color: white;
  border-bottom-color: transparent;
  background-color: #0059ad;
  cursor: pointer; }

/* ---------------------------------------------------------------------
Btn Secondary
------------------------------------------------------------------------ */
.btn_secondary {
  background: red;
  border-bottom: 3px solid #990000; }

.btn_secondary:hover {
  background-color: maroon; }

/* ---------------------------------------------------------------------
Form Button
------------------------------------------------------------------------ */
.btn_form {
  margin-right: 0;
  padding-top: 12px;
  padding-bottom: 9px;
  background: #9ec5fe;
  color: white; }
  @media screen and (max-width: 640px) {
    .btn_form {
      display: block;
      width: 100%; } }

.btn_form:hover,
.btn_form:active {
  background-color: #0059ad; }

/* ---------------------------------------------------------------------
Chunky Btn
------------------------------------------------------------------------ */
.mix-btn_chunky {
  padding: 16px 20px;
  font-size: 16px; }

.mix-btn_wide {
  min-width: 100px; }

/* ---------------------------------------------------------------------
Btn Icon
------------------------------------------------------------------------ */
.btn-icon {
  margin-right: 10px;
  font-size: 16px; }

/* ---------------------------------------------------------------------
Btn Group
------------------------------------------------------------------------ */
.btnGroup .btn {
  margin-bottom: 10px; }

/*doc
---
title: Carousel
name: carousel
category: content
---

A text carousel with next and previous buttons

```html_example

    <div class="carousel">
        <div class="carousel-wrapper">
            <ul class="hList hList_bulleted hList_md">
                <li>ExxonMobil</li>
                <li>Shell Oil Company and Motiva Enterprises LLC</li>
                <li>ConocoPhillips</li>
                <li>Anadarko</li>
                <li>ExxonMobil</li>
                <li>Shell Oil Company and Motiva Enterprises LLC</li>
                <li>ConocoPhillips</li>
                <li>Anadarko</li>
                <li>ExxonMobil</li>
                <li>Shell Oil Company and Motiva Enterprises LLC</li>
                <li>ConocoPhillips</li>
                <li>Anadarko</li>
            </ul>
        </div>
        
        <a href="#" class="carousel-next">Next</a>
        <a href="#" class="carousel-prev">Previous</i></a>
    </div>

```
*/
/* ---------------------------------------------------------------------
 Carousel
------------------------------------------------------------------------ */
.carousel {
  width: 1020px;
  position: relative;
  background: #999999;
  margin-left: -50px;
  margin-bottom: 50px; }

.carousel-wrapper {
  position: relative;
  overflow: hidden;
  margin: 0 90px;
  padding: 20px 0 16px 0; }

.carousel-wrapper ul {
  width: 4000px; }

.carousel-wrapper ul > li {
  color: white; }

/* ---------------------------------------------------------------------
 Carousel Controls
------------------------------------------------------------------------ */
.carousel-next,
.carousel-prev {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  margin-top: -8px;
  text-indent: -9999px; }

.carousel-next {
  right: 35px;
  background: url("../../images/icons/icon-arrow-right.png") no-repeat 0 0; }

.carousel-prev {
  left: 35px;
  background: url("../../images/icons/icon-arrow-left.png") no-repeat 0 0; }

.carousel-next:hover,
.carousel-prev:hover {
  background-position: -40px 0; }

/*doc
---
title: Callout Listing
name: calloutListing
category: content
---

Callout object styles in listing grid format.

```html_example

    <div class="calloutListing calloutListing">
        <h2 class="hdg hdg_2">Callout 1</h2>
    </div>

    <div class="blocks blocks_3up">
        <div class="calloutListing calloutListing_sm">
            <h2 class="hdg hdg_2">Callout 2</h2>
        </div>
    </div>
```
*/
/* ---------------------------------------------------------------------
 Callout Listing Object
------------------------------------------------------------------------ */
.calloutListing {
  margin-bottom: 50px;
  overflow: visible; }
  @media screen and (max-width: 640px) {
    .calloutListing {
      margin-bottom: 10px; }
      .calloutListing:last-child {
        margin-bottom: 25px; } }

.calloutListing_sm {
  margin-bottom: 35px; }
  @media screen and (max-width: 640px) {
    .calloutListing_sm {
      margin-bottom: 12px; }
      .calloutListing_sm:last-child {
        margin-bottom: 20px; } }

/*doc
---
title: Content
name: content
category: container
---

Constrains content in areas in which the content width is narrower than the layout max midth.

```html_example

    <div class="content">
        <div class="content-contrained">
            <div class="content-intro">
                <p>Content Intro. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
            </div>

            <div class="content-hd">
                <h1 class="hdg hdg_1">Page Title</h2>
                <h1 class="hdg hdg_2">Page Sub Title</h2>
            </div>

            <div class="content-bd">
                <p>Content Body. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
            </div>

            <div class="content-ft">
                <p>Content Footer</p>
            </div>
        </div>
    </div>

```
*/
/* ---------------------------------------------------------------------
Content
------------------------------------------------------------------------ */
.content-constrained {
  max-width: 920px;
  margin: 0 auto; }

.content-intro {
  margin-bottom: 30px; }

.content-hd {
  margin-bottom: 30px; }

.content-hd_pullBottom {
  position: relative;
  bottom: -15px; }

.content-bd {
  margin-bottom: 33px; }

.content-hd_flushBottom,
.content-bd_flushBottom {
  margin-bottom: 0; }

.content-ft {
  margin-bottom: 30px; }

/*doc
---
title: Call To Action
name: Call To Action
category: content
---

Call to action object styles a headline, button and share link.

```html_example

    <div class="cta">
        <div class="cta-fb">
            <div class="cta-fb-link">
                <a href="#" class="hdg hdg_6"><i class="icon icon_facebook icon_suffix"></i> See You Leaders in Action</a>
            </div>
        </div>

        <div class="cta-hr"></div>

        <div class="split">
            <div class="split-left mix-split_7_10">
                <div class="cta-hd">
                    <p>Do you like how we provide safety net for Houstonians?</p>
                </div>

                <div class="cta-btn">
                    <div class="btnGroup">
                        <a href="#" class="btn">Donate</a>
                        <a href="#" class="btn">Search</a>
                        <a href="#" class="btn">Dial 2-1-1</a>
                    </div>
                </div>
            </div>
            <div class="split-right mix-split_3_10">
                <div class="cta-share">
                    <ul class="dropdown">
                        <li class="dropdown-item">
                            <a href="#" class="dropdown-link">
                                <span class="icon icon_share"></span> Share this Page
                            </a>

                            <ul class="dropdown-menu">
                                <li class="dropdown-menu-item">
                                    <a href="#" class="dropdown-menu-item-link">Email</a>
                                </li>
                                <li class="dropdown-menu-item">
                                    <a href="#" class="dropdown-menu-item-link">Facebook</a>
                                </li>
                                <li class="dropdown-menu-item">
                                    <a href="#" class="dropdown-menu-item-link">Twitter</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

```
*/
/* ---------------------------------------------------------------------
 Call To Action Object
------------------------------------------------------------------------ */
.cta {
  margin: 20px 0; }

.cta-fb {
  margin-bottom: 35px; }

.cta-fb-link {
  margin-bottom: 5px; }

.cta-hr {
  width: 50%;
  height: 1px;
  background: black;
  margin: 0 0 20px; }

.cta-hd {
  width: 70%;
  margin-bottom: 10px; }

.cta-hd > p {
  font-family: "DIN Next W01 Light", helvetica, arial, sans-serif;
  font-size: 28px;
  line-height: 1.1; }

.cta-share {
  float: right; }

/*doc
---
title: Donate Form
name: donateForm
category: content
---

A specialized form for donations with a large background image.


```html_example

<div class="donateForm">
    <div class="donateForm-image">
        <img src="test-images/image-920x750.gif" />
    </div>
    
    <div class="donateForm-wrapper">
        <div class="donateForm-progress">
            <ol>
               <li>1. Donation Amount</li>
               <li class="donateForm-progress-item_isActive">2. Your Information</li>
               <li>3. Payment</li> 
            </ol>
        </div>
        
        
        <div class="donateForm-step">
            <div class="donateForm-step-hd">
                <h3 class="hdg hdg_1 mix-hdg_caps">1. Donation Amount</h3>
            </div>
            
            <div class="donateForm-step-bd">
                <div class="form">
                    <ul class="form-list">
                        <li class="form-list-item form-list-item_pushBottom_lg">
                            <label for="" class="isVisuallyHidden">Amount</label>
                            <input type="text" value="" placeholder="$2500" class="input input_solid input_solid_full" />
                            <label class="hdg hdg_5 mix-hdg_light">Join a donor group when you donate at <a href="#">these levels</a></label>
                        </li>
                        <li class="form-list-item form-list-item_flushBottom">
                            <div class="radioGroup">
                                <div class="hdg hdg_5 mix-hdg_light">
                                    <label class="radio">
                                        <input type="radio" id="radio1" name="radio" class="radio-input">
                                        <span class="radio-indicator"></span>
                                        In honor of
                                    </label>
                                    
                                    <label class="radio">
                                        <input type="radio" id="radio1" name="radio" class="radio-input">
                                        <span class="radio-indicator"></span>
                                        In memory of
                                    </label>
                                </div>
                            </div>
                        </li>
                        <li class="form-list-item">
                            <label for="" class="isVisuallyHidden">Name</label>
                            <input type="text" value="" placeholder="Name" class="input input_basic" />
                        </li>
                        <li class="form-list-item">
                            <div class="hdg hdg_5 mix-hdg_light">
                                <label class="checkbox">
                                    <input type="checkbox" id="radio1" name="checkbox" class="checkbox-input">
                                    <span class="checkbox-indicator"></span>
                                    I want to find out about leaving a planned gift
                                </label>
                            </div>
                        </li>
                        <li class="form-list-item form-list-item_submit">
                            <div class="form-actions">
                                <button class="btn btn_form">
                                    Continue
                                    <i class="icon icon_arrowRight icon_arrowRight_white"></i>
                                </button>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        
        <div class="donateForm-step donateForm-step_isActive">
            <div class="donateForm-step-hd">
                <h3 class="hdg hdg_1 mix-hdg_caps">2. Your Information</h3>
            </div>
            
            <div class="donateForm-step-bd">
                <div class="form">
                    <ul class="form-list">
                        <li class="form-list-item form-list-item_pushBottom_sm">
                            <label for="" class="isVisuallyHidden">First Name</label>
                            <input type="text" value="" placeholder="First Name" class="input input_basic" />
                        </li>
                        <li class="form-list-item form-list-item_pushBottom_sm">
                            <label for="" class="isVisuallyHidden">Last Name</label>
                            <input type="text" value="" placeholder="Last Name" class="input input_basic" />
                        </li>
                        <li class="form-list-item form-list-item_pushBottom_lg">
                            <label for="" class="isVisuallyHidden">Email</label>
                            <input type="text" value="" placeholder="Email" class="input input_basic" />
                            <label class="hdg hdg_5 mix-hdg_light">Your donation receipt will be sent to this address</label>
                        </li>
                        <li class="form-list-item">
                            <div class="phoneOnly">
                                <div class="label">
                                    <label class="hdg hdg_5 mix-hdg_light">Your birthday (optional)</label>
                                </div>
                            </div>
                            
                            <label for="" class="isVisuallyHidden">Birthday Month</label>
                            <select class="select-input">
                                <option value="">Month</option>
                                <option value="">01</option>
                                <option value="">02</option>
                            </select>
                        
                            <label for="" class="isVisuallyHidden">Birthday Year</label>
                            <select class="select-input">
                                <option value="">Year</option>
                                <option value="">2014</option>
                                <option value="">2015</option>
                            </select>
                            <div class="desktopOnly">
                                <label class="hdg hdg_5 mix-hdg_light">Your birthday (optional)</label>
                            </div>
                        </li>
                        <li class="form-list-item form-list-item_submit">
                            <div class="form-actions">
                                <button class="btn btn_form">
                                    Continue
                                    <i class="icon icon_arrowRight icon_arrowRight_white"></i>
                                </button>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    
    <div class="donateForm-popup">
        <div class="donateForm-popup-wrapper">
            <div class="box">
                <div class="box-hd">
                    <h3 class="hdg hdg_3 mix-hdg_caps">Donor Groups Giving Guide</h3>
                </div>
                
                <ul class="vList vList_tiny">
                    <li class="hdg hdg_5">LINC (age 30 or under) — $250 or more annually</li>
                    <li class="hdg hdg_5">Young Leaders (age 45 or under) — $1,000 or more annually</li>
                    <li class="hdg hdg_5">Women’s Initiative — $2,500 or more annually</li>
                </ul>
                
                <ul class="vList vList_tiny">
                    <li class="hdg hdg_5">Chairman’s Club — $1,000 - $2,499 annually</li>
                    <li class="hdg hdg_6 mix-hdg_light">Bronze - $1,000 - $1,499</li>
                    <li class="hdg hdg_6 mix-hdg_light">Silver - $1,500 - $2,499</li>
                </ul>
                
                <ul class="vList vList_tiny">
                    <li class="hdg hdg_5">Impact Circle — $2,500 - $4,999 annually</li>
                    <li class="hdg hdg_6 mix-hdg_light">Leadership Circle — $5,000 - $9,999 annually</li>
                    <li class="hdg hdg_6 mix-hdg_light">Platinum $5,000 - $7,499</li>
                    <li class="hdg hdg_6 mix-hdg_light">Diamond $7,500 - $9,999</li>
                </ul>
                
                <ul class="vList vList_tiny">
                    <li class="hdg hdg_5">Alexis de Tocqueville Society — $10,000 or more annually</li>
                    <li class="hdg hdg_6 mix-hdg_light">Members $10,000 - $14,999</li>
                    <li class="hdg hdg_6 mix-hdg_light">Pillars $15,000 - $24,999</li>
                    <li class="hdg hdg_6 mix-hdg_light">Sponsors $25,000 - $49,999</li>
                    <li class="hdg hdg_6 mix-hdg_light">Patrons $50,000 - $74,999</li>
                    <li class="hdg hdg_6 mix-hdg_light">Emissaries $75,000 - $99,999</li>
                    <li class="hdg hdg_6 mix-hdg_light">Benefactors $100,000 - $199,999</li>
                    <li class="hdg hdg_6 mix-hdg_light">Visionaries $200,000 and above</li>
                </ul>
            </div>
        </div>
        
        <span class="donateForm-popup-close">Close</span>
    </div>
</div>


```
*/
/* ---------------------------------------------------------------------
 Donate Object
------------------------------------------------------------------------ */
.donateForm {
  position: relative;
  overflow: hidden; }

.donateForm-wrapper {
  width: 63%;
  position: absolute;
  top: 45px;
  right: 45px;
  padding: 40px 35px;
  background: white; }

/* ---------------------------------------------------------------------
 Donate Step
------------------------------------------------------------------------ */
.donateForm-step {
  display: none; }

.donateForm-step_isActive {
  display: block; }

.donateForm-step_pushBottom {
  margin-bottom: 35px; }

.donateForm-step-hd {
  display: none; }

.donateForm-step-hd_isActive {
  display: block;
  margin-bottom: 10px; }

/* ---------------------------------------------------------------------
 Donate Progress Object
------------------------------------------------------------------------ */
.donateForm-progress {
  margin-bottom: 35px; }

.donateForm-progress ol > li {
  display: inline;
  margin-right: 25px;
  color: #999999;
  text-transform: uppercase; }

.donateForm-progress ol > li.donateForm-progress-item_isActive {
  color: black; }

.donateForm-progress ol > li:last-child {
  margin-right: 0; }

/* ---------------------------------------------------------------------
 Donate Pop Up
------------------------------------------------------------------------ */
.donateForm-popup {
  display: none;
  width: 100%;
  position: absolute;
  top: 0;
  right: 0;
  overflow: auto;
  padding: 0;
  background: #9ec5fe; }

.donateForm-popup-wrapper {
  padding: 40px 35px 45px; }

.donateForm-popup-close {
  width: 48px;
  height: 48px;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  cursor: pointer;
  background: url("../../images/modal/btn-modal-close.png") no-repeat 0 0;
  text-indent: -9999px; }

/*doc
---
title: Dropdown
name: dropdown
category: content
---

A basic drop down menu

```html_example

    <ul class="dropdown">
        <li class="dropdown-item">
            <a href="#" class="dropdown-link">
                <i class="icon icon_share"></i> Share this Page
            </a>

            <ul class="dropdown-menu">
                <li class="dropdown-menu-item">
                    <a href="#" class="dropdown-menu-item-link">Email</a>
                </li>
                <li class="dropdown-menu-item">
                    <a href="#" class="dropdown-menu-item-link">Facebook</a>
                </li>
                <li class="dropdown-menu-item">
                    <a href="#" class="dropdown-menu-item-link">Twitter</a>
                </li>
            </ul>
        </li>
    </ul>

```
*/
/* ---------------------------------------------------------------------
 Dropdown Object
------------------------------------------------------------------------ */
.dropdown {
  display: inline-block; }

.dropdown-item {
  position: relative; }

.dropdown-link {
  display: block;
  position: relative;
  font-size: 16px;
  font-weight: 600;
  font-family: "DIN Next W01 Light", helvetica, arial, sans-serif;
  color: #666666;
  text-transform: uppercase; }
  @media screen and (max-width: 640px) {
    .dropdown-link {
      font-size: 14px; } }

.dropdown-item:hover .dropdown-link {
  color: #0099cc; }

.dropdown-item:hover .dropdown-link .icon {
  background-position: -20px 0; }

.dropdown-menu {
  width: 100%;
  min-width: 150px;
  position: absolute;
  left: -9999px;
  top: 100%;
  z-index: 1000;
  margin: 6px 0 0;
  background: white;
  border-top: 3px solid #0099cc;
  border-bottom: 3px solid #0099cc; }

.dropdown-menu:before {
  content: " ";
  width: 100%;
  height: 6px;
  position: absolute;
  top: -9px;
  left: 0; }

.dropdown-menu_lg {
  margin-top: 14px; }
  @media screen and (max-width: 640px) {
    .dropdown-menu_lg {
      margin-top: 7px; } }

.dropdown-menu_lg:before {
  height: 14px;
  top: -17px; }

.dropdown-menu_w288 {
  min-width: 288px; }

.dropdown-menu_w300 {
  min-width: 300px; }

.dropdown-item:hover .dropdown-menu {
  left: 0; }

.dropdown-item:hover .dropdown-menu_right {
  left: auto;
  right: 0; }

.dropdown-menu-item-link {
  display: block;
  margin: 10px 0;
  padding: 0 26px;
  font-size: 16px;
  font-weight: 600;
  font-family: "DIN Next W01 Light", helvetica, arial, sans-serif;
  color: #666666;
  text-transform: uppercase; }

.dropdown-menu-item-link_flush {
  padding: 0; }

.dropdown-menu-item-link_softSide {
  padding-left: 10px;
  padding-right: 10px; }

/*doc
---
title: Gallery
name: gallery
category: content
---

A gallery carousel with thumbnail pagination.

```html_example

    <div class="gallery">
        <div class="gallery-hd">
            <h2 class="hdg hdg_6">United Way Young Leaders</h2>
            <h3 class="hdg hdg_6 mix-hdg_light">September 10th, Kickoff</h3>
        </div>
        
        <div class="gallery-bd">
            <div class="gallery-wrapper">
                <ul class="gallery-list">
                    <li class="gallery-list-slide">
                        <img src="test-images/image-920x500.gif" />
                    </li>
                    <li class="gallery-list-slide">
                        <img src="test-images/image-920x500.gif" />
                    </li>
                    <li class="gallery-list-slide">
                        <img src="test-images/image-920x500.gif" />
                    </li>
                    <li class="gallery-list-slide">
                        <img src="test-images/image-920x500.gif" />
                    </li>
                    <li class="gallery-list-slide">
                        <img src="test-images/image-920x500.gif" />
                    </li>
                    <li class="gallery-list-slide">
                        <img src="test-images/image-920x500.gif" />
                    </li>
                </ul>
            </div><!-- end .gallery-wrapper -->
        </div>
        
        <div class="gallery-ft">
            <div class="gallery-nav">
                <div class="gallery-nav-wrapper">
                    <ul class="gallery-nav-paginate">
                        <li class="gallery-nav-paginate-slide gallery-nav-paginate-slide_isActive">
                            <img src="test-images/image-140x95.gif" />
                        </li>
                        <li class="gallery-nav-paginate-slide">
                            <img src="test-images/image-140x95.gif" />
                        </li>
                        <li class="gallery-nav-paginate-slide">
                            <img src="test-images/image-140x95.gif" />
                        </li>
                        <li class="gallery-nav-paginate-slide">
                            <img src="test-images/image-140x95.gif" />
                        </li>
                        <li class="gallery-nav-paginate-slide">
                            <img src="test-images/image-140x95.gif" />
                        </li>
                        <li class="gallery-nav-paginate-slide">
                            <img src="test-images/image-140x95.gif" />
                        </li>
                    </ul>
                </div>
                
                <a href="#" class="gallery-nav-control gallery-nav-control_prev js-control_prev">Previous</a>
                <a href="#" class="gallery-nav-control gallery-nav-control_next js-control_next">Next</a>
            </div><!-- end .gallery-nav -->
        </div>
    </div><!-- end .gallery -->

```
*/
/* ---------------------------------------------------------------------
 Gallery Object
------------------------------------------------------------------------ */
.gallery {
  margin-bottom: 25px; }

.gallery-hd {
  margin-bottom: 25px; }

.gallery-bd {
  position: relative; }

/* ---------------------------------------------------------------------
 Gallery List Object
------------------------------------------------------------------------ */
.gallery-wrapper {
  overflow: hidden;
  position: relative;
  background: #999999;
  border: 2px solid #999999;
  border-bottom: none; }

.gallery-list {
  width: 7080px;
  position: relative;
  font-size: 0; }

.gallery-list-slide {
  width: 100%;
  max-width: 920px;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  line-height: 0;
  font-size: 0; }

.gallery-list-control {
  height: 34px;
  width: 34px;
  position: absolute;
  top: 50%;
  z-index: 2;
  margin-top: -17px;
  display: none;
  overflow: hidden;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center center;
  border: 0;
  direction: ltr;
  text-align: left;
  text-indent: -999em;
  background-image: url(../../images/hero/btn-hero-controls.png);
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  /* Netscape */
  -moz-opacity: 0.5;
  /* Safari 1.x */
  -khtml-opacity: 0.5;
  /* Good browsers */
  opacity: 0.5;
  -webkit-transition: opacity 0.5s ease;
  -moz-transition: opacity 0.5s ease;
  -o-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease; }
  @media screen and (max-width: 640px) {
    .gallery-list-control {
      display: block; } }

.gallery-list-control:hover {
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  /* Netscape */
  -moz-opacity: 1;
  /* Safari 1.x */
  -khtml-opacity: 1;
  /* Good browsers */
  opacity: 1;
  cursor: pointer; }

.gallery-list-control_prev {
  left: 0;
  background-position: 0px 0px; }

.gallery-list-control_next {
  right: 13.75%;
  background-position: -34px 0px; }

/* ---------------------------------------------------------------------
 Gallery Nav Object
------------------------------------------------------------------------ */
.gallery-nav {
  position: relative;
  background: #231f20; }

.gallery-nav-wrapper {
  overflow: hidden;
  position: relative;
  margin: 0 80px;
  padding: 15px 0; }

.gallery-nav-paginate {
  width: 7080px;
  font-size: 0; }

.gallery-nav-paginate-slide {
  display: inline-block;
  width: 100%;
  max-width: 140px;
  position: relative;
  margin-right: 15px; }

.gallery-nav-paginate-slide:hover {
  cursor: pointer; }

.gallery-nav-paginate-slide:after {
  content: " ";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  border: 1px solid transparent;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

.gallery-nav-paginate-slide:hover:after {
  border-color: white; }

.gallery-nav-paginate-slide_isActive:before {
  content: " ";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: white;
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
  /* Netscape */
  -moz-opacity: 0.2;
  /* Safari 1.x */
  -khtml-opacity: 0.2;
  /* Good browsers */
  opacity: 0.2;
  -webkit-transition: opacity 0.5s ease;
  -moz-transition: opacity 0.5s ease;
  -o-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease; }

.gallery-nav-paginate-slide_isActive:hover:after {
  border-color: transparent; }

/* ---------------------------------------------------------------------
 Gallery Controls Object
------------------------------------------------------------------------ */
.gallery-nav-control {
  width: 28px;
  height: 44px;
  position: absolute;
  top: 50%;
  z-index: 2;
  margin-top: -22px;
  text-indent: -9999px; }

.gallery-nav-control_prev {
  left: 25px;
  background: url("../../images/gallery/btn-gallery-prev.png") no-repeat 0 0; }

.gallery-nav-control_next {
  right: 25px;
  background: url("../../images/gallery/btn-gallery-next.png") no-repeat 0 0; }

.gallery-nav-control_prev:hover,
.gallery-nav-control_next:hover {
  background-position: -28px 0; }

/*doc
---
title: Grid
name: grid
category: layout
---

The Grid object is a layout object that organizes content into rows. Any combination of 12 columns can be used in a single row, and the grid is percentage based so the content within it will automatically flex at different window/device widths.

```html_example

<!-- Simple Example -->
<h2 class="hdg hdg_h2">Basic Grid</h2>
<div class="grid">
	<div class="grid-col grid-col_9of12">
	
		<div class="demoBox">
			<span>Grid Col 9</span>
		</div>
	</div>
	<div class="grid-col grid-col_3of12">
		<div class="demoBox">
			<span>Grid Col 3</span>
		</div>
	</div>
</div>

<!-- With Mix Class -->
<h2 class="hdg hdg_h2">With Mixin Class</h2>
<div class="grid">
	<div class="grid-col grid-col_7of12 mix-grid-col_prefix1of12">
		<div class="demoBox">
			<span>Grid Col 7</span>
		</div>
	</div>
	<div class="grid-col grid-col_3of12">
		<div class="demoBox">
			<span>Grid Col 3</span>
		</div>
	</div>
</div>

```
*/
/* ---------------------------------------------------------------------
 Grid

 cssgrid --units=percent --cols=12 --col-width=67 --gutter=16 --max-width=980

 ============================================
 Formulas used for calculation of grid values
 ============================================
 gutter      = (gutter / max-width) * 100
 col-width   = (((col-width * col-index) + (gutter * (col-index - 1)) / max-width) * 100
 col-push    = (((col-width * col-index) + (gutter * col-index)) / max-width) * 100
 col-pull    = (((col-width * col-index) + (gutter * col-index)) / max-width) * 100 * -1
 col-prefix  = (((col-width * col-index) + (gutter * col-index)) / max-width) * 100
 col-suffix  = (((col-width * col-index) + (gutter * col-index)) / max-width) * 100 * -1
------------------------------------------------------------------------ */
.grid:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden; }

.grid-col {
  position: relative;
  float: left; }

.grid-col + .grid-col {
  margin-left: 1.6326530612245%; }

.grid-col_1of12 {
  width: 6.8367346938776%; }

.grid-col_2of12 {
  width: 15.30612244898%; }

.grid-col_3of12 {
  width: 23.775510204082%; }

.grid-col_4of12 {
  width: 32.244897959184%; }

.grid-col_5of12 {
  width: 40.714285714286%; }

.grid-col_6of12 {
  width: 49.183673469388%; }

.grid-col_7of12 {
  width: 57.65306122449%; }

.grid-col_8of12 {
  width: 66.122448979592%; }

.grid-col_9of12 {
  width: 74.591836734694%; }

.grid-col_10of12 {
  width: 83.061224489796%; }

.grid-col_11of12 {
  width: 91.530612244898%; }

.grid-col_12of12 {
  width: 100%; }

.mix-grid-col_push1of12 {
  left: 8.469387755102%; }

.mix-grid-col_push2of12 {
  left: 16.938775510204%; }

.mix-grid-col_push3of12 {
  left: 25.408163265306%; }

.mix-grid-col_push4of12 {
  left: 33.877551020408%; }

.mix-grid-col_push5of12 {
  left: 42.34693877551%; }

.mix-grid-col_push6of12 {
  left: 50.816326530612%; }

.mix-grid-col_push7of12 {
  left: 59.285714285714%; }

.mix-grid-col_push8of12 {
  left: 67.755102040816%; }

.mix-grid-col_push9of12 {
  left: 76.224489795918%; }

.mix-grid-col_push10of12 {
  left: 84.69387755102%; }

.mix-grid-col_push11of12 {
  left: 93.163265306122%; }

.mix-grid-col_push12of12 {
  left: 100%; }

.mix-grid-col_pull1of12 {
  left: -8.469387755102%; }

.mix-grid-col_pull2of12 {
  left: -16.938775510204%; }

.mix-grid-col_pull3of12 {
  left: -25.408163265306%; }

.mix-grid-col_pull4of12 {
  left: -33.877551020408%; }

.mix-grid-col_pull5of12 {
  left: -42.34693877551%; }

.mix-grid-col_pull6of12 {
  left: -50.816326530612%; }

.mix-grid-col_pull7of12 {
  left: -59.285714285714%; }

.mix-grid-col_pull8of12 {
  left: -67.755102040816%; }

.mix-grid-col_pull9of12 {
  left: -76.224489795918%; }

.mix-grid-col_pull10of12 {
  left: -84.69387755102%; }

.mix-grid-col_pull11of12 {
  left: -93.163265306122%; }

.mix-grid-col_pull12of12 {
  left: -100%; }

.mix-grid-col_prefix1of12 {
  margin-left: 8.469387755102%; }

.mix-grid-col_prefix2of12 {
  margin-left: 16.938775510204%; }

.mix-grid-col_prefix3of12 {
  margin-left: 25.408163265306%; }

.mix-grid-col_prefix4of12 {
  margin-left: 33.877551020408%; }

.mix-grid-col_prefix5of12 {
  margin-left: 42.34693877551%; }

.mix-grid-col_prefix6of12 {
  margin-left: 50.816326530612%; }

.mix-grid-col_prefix7of12 {
  margin-left: 59.285714285714%; }

.mix-grid-col_prefix8of12 {
  margin-left: 67.755102040816%; }

.mix-grid-col_prefix9of12 {
  margin-left: 76.224489795918%; }

.mix-grid-col_prefix10of12 {
  margin-left: 84.69387755102%; }

.mix-grid-col_prefix11of12 {
  margin-left: 93.163265306122%; }

.mix-grid-col_prefix12of12 {
  margin-left: 100%; }

.mix-grid-col_suffix1of12 {
  margin-right: 8.469387755102%; }

.mix-grid-col_suffix2of12 {
  margin-right: 16.938775510204%; }

.mix-grid-col_suffix3of12 {
  margin-right: 25.408163265306%; }

.mix-grid-col_suffix4of12 {
  margin-right: 33.877551020408%; }

.mix-grid-col_suffix5of12 {
  margin-right: 42.34693877551%; }

.mix-grid-col_suffix6of12 {
  margin-right: 50.816326530612%; }

.mix-grid-col_suffix7of12 {
  margin-right: 59.285714285714%; }

.mix-grid-col_suffix8of12 {
  margin-right: 67.755102040816%; }

.mix-grid-col_suffix9of12 {
  margin-right: 76.224489795918%; }

.mix-grid-col_suffix10of12 {
  margin-right: 84.69387755102%; }

.mix-grid-col_suffix11of12 {
  margin-right: 93.163265306122%; }

.mix-grid-col_suffix12of12 {
  margin-right: 100%; }

/*doc
---
title: Headings
name: headings
category: content
---

These are the standard headings used throughout the site. The numbering does not determine which heading level it should be applied to. That should be determined by the doc outline. Each heading can have one of three standard mix-in classes to add margin-bottom if needed: mix-hdg_sm, mix_hdg_md, mix_hdg_lg which give 10, 15, 25px space underneath.

Headings should be caps when they are topic or section headers and might be lowercase in some more wysiwyg style instances or when the headings overpower.

```html_example

    <h1 class="hdg hdg_1">Heading 1</h1>
    <h1 class="hdg hdg_2">Heading 2</h1>
    <h1 class="hdg hdg_3">Heading 3</h1>
    <h1 class="hdg hdg_4">Heading 4</h1>
    <h1 class="hdg hdg_5">Heading 5</h1>
    <h1 class="hdg hdg_6">Heading 6</h1>
    <h1 class="hdg hdg_7">Heading 7</h1>

    <h1 class="hdg hdg_hero">Heading Hero</h1>
    <h1 class="hdg hdg_infographs">Heading Infograph</h1>

    <h1 class="hdg hdg_1 mix-hdg_darkGrey">Heading 1 - Grey</h1>
    <h1 class="hdg hdg_1 mix-hdg_blue">Heading 1 - Blue</h1>
    <h1 class="hdg hdg_1 mix-hdg_heavy">Heading 1 - Heavy</h1>
    <h1 class="hdg hdg_1 mix-hdg_bold">Heading 1 - Bold</h1>
    <h1 class="hdg hdg_1 mix-hdg_light">Heading 1 - Lights</h1>
    <h1 class="hdg hdg_1 mix-hdg_caps">Heading 1 - Caps</h1>
```
*/
/* ---------------------------------------------------------------------
 Headings
------------------------------------------------------------------------ */
.hdg {
  font-family: "DIN Next W01 Regular", helvetica, arial, sans-serif;
  color: black;
  -webkit-font-smoothing: antialiased; }

.hdg > a {
  color: black;
  -webkit-transition: color 0.5s ease;
  -moz-transition: color 0.5s ease;
  -o-transition: color 0.5s ease;
  transition: color 0.5s ease; }

.hdg > a:active,
.hdg > a:hover {
  color: #0099cc; }

.hdg > a:active > .icon_arrowRight,
.hdg > a:hover > .icon_arrowRight {
  background-position: -20px 0; }

.hdg_error {
  color: #ff0000; }

.hdg_1 {
  font-family: "DIN Next W01 Medium", helvetica, arial, sans-serif;
  font-size: 36px;
  line-height: 1.1;
  text-transform: uppercase; }

.hdg_2 {
  font-size: 28px;
  line-height: 1.1; }

.hdg_3 {
  font-size: 24px; }

.hdg_4 {
  font-size: 21px; }

.hdg_5 {
  font-size: 18px;
  line-height: 1; }

.hdg_6 {
  font-size: 16px; }

.hdg_7 {
  font-size: 12px;
  line-height: 1.25; }

.hdg_hero {
  color: white;
  font-size: 50px;
  font-family: "DIN Next W01 Medium", helvetica, arial, sans-serif;
  text-shadow: 0px 1px 3px rgba(150, 150, 150, 0.2); }

.hdg_infographs {
  color: black;
  font-size: 50px;
  line-height: 1;
  font-family: "DIN Next W01 Light", helvetica, arial, sans-serif; }

.mix-hdg_darkGrey,
.mix-hdg_darkGrey > a {
  color: #333333; }

.mix-hdg_lightGrey,
.mix-hdg_lightGrey > a {
  color: #999999; }

.mix-hdg_blue,
.mix-hdg_blue > a {
  color: #0099cc; }

.mix-hdg_white,
.mix-hdg_white > a {
  color: white; }

.mix-hdg_heavy {
  font-family: "DIN Next W01 Bold", helvetica, arial, sans-serif; }

.mix-hdg_bold {
  font-family: "DIN Next W01 Medium", helvetica, arial, sans-serif; }

.mix-hdg_light {
  font-family: "DIN Next W01 Light", helvetica, arial, sans-serif; }

.mix-hdg_caps {
  text-transform: uppercase; }

.mix-hdg_flush {
  margin-bottom: 0; }

.mix-hdg_lower {
  line-height: 1.3;
  text-transform: none; }

/*doc
---
title: Hero
name: hero
category: content
---

Floats blocks of content left and right and clears it.

```html_example

    <div class="hero">
        <ul class="hero-slides js-hero">
            <li class="hero-slide">
                <div class="hero-slide-img">
                    <a href="#" class="hero-slide-img-video">
                        <i class="hero-slide-img-video-icon">Play</i>
                    </a>
                    <img src="../assets/images/hero/girl-reading-01.jpg" alt="" class="hero-img" />
                </div>
                <div class="hero-slide-hd">
                    <h1 class="hdg hdg_hero">Helping Kids Read Better</h1>
                </div>
            </li>
            <li class="hero-slide">
                <div class="hero-slide-img">
                    <img src="http://placehold.it/1020x360/" alt="" class="hero-img" />
                </div>
                <div class="hero-slide-hd">
                    <h1 class="hdg hdg_hero">Sample Title for Hero</h1>
                </div>
            </li>
            <li class="hero-slide">
                <div class="hero-slide-img">
                    <img src="../assets/images/hero/girl-reading-01.jpg" alt="" class="hero-img" />
                </div>
                <div class="hero-slide-hd">
                    <h1 class="hdg hdg_hero">Helping Kids Read Better</h1>
                </div>
            </li>
            <li class="hero-slide">
                <div class="hero-slide-img">
                    <img src="http://placehold.it/1020x360/" alt="" class="hero-img" />
                </div>
                <div class="hero-slide-hd">
                    <h1 class="hdg hdg_hero">Hero Sample Title</h1>
                </div>
            </li>
        </ul>
        <div class="hero-controls">
            <a class="hero-control hero-control_prev">Prev</a>
            <a class="hero-control hero-control_next">Next</a>
        </div>
    </div>

```
*/
/* ---------------------------------------------------------------------
 Hero Object
------------------------------------------------------------------------ */
.hero {
  overflow: hidden;
  position: relative;
  margin-bottom: 15px; }

.hero-slides {
  width: 4080px; }

.hero-slide {
  width: 100%;
  max-width: 1020px;
  position: relative;
  float: left;
  -moz-box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.8);
  -webkit-box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.8);
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.8); }

.hero-slide-hd {
  height: 140px;
  max-width: 365px;
  position: absolute;
  bottom: 12.5%;
  left: 8.627450980392%;
  z-index: 1; }

.hero-slide-overlay {
  position: absolute;
  top: 0px; }

.hero-slide-img-video {
  display: block;
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px; }

.hero-slide-img-video-icon {
  display: block;
  width: 100px;
  height: 100px;
  overflow: hidden;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center center;
  border: 0;
  direction: ltr;
  text-align: left;
  text-indent: -999em;
  background-image: url(../../images/hero/btn-hero-play.png);
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  /* Netscape */
  -moz-opacity: 0.5;
  /* Safari 1.x */
  -khtml-opacity: 0.5;
  /* Good browsers */
  opacity: 0.5;
  -webkit-transition: opacity 0.5s ease;
  -moz-transition: opacity 0.5s ease;
  -o-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease; }

.hero-slide-img-video-icon:hover {
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  /* Netscape */
  -moz-opacity: 1;
  /* Safari 1.x */
  -khtml-opacity: 1;
  /* Good browsers */
  opacity: 1; }

.hero-control {
  height: 34px;
  width: 34px;
  position: absolute;
  top: 50%;
  z-index: 2;
  margin-top: -17px;
  display: block;
  overflow: hidden;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center center;
  border: 0;
  direction: ltr;
  text-align: left;
  text-indent: -999em;
  background-image: url(../../images/hero/btn-hero-controls.png);
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  /* Netscape */
  -moz-opacity: 0.5;
  /* Safari 1.x */
  -khtml-opacity: 0.5;
  /* Good browsers */
  opacity: 0.5;
  -webkit-transition: opacity 0.5s ease;
  -moz-transition: opacity 0.5s ease;
  -o-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease; }

.hero-control:hover {
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  /* Netscape */
  -moz-opacity: 1;
  /* Safari 1.x */
  -khtml-opacity: 1;
  /* Good browsers */
  opacity: 1;
  cursor: pointer; }

.hero-control_prev {
  left: 1.764705882353%;
  background-position: 0px 0px; }

.hero-control_next {
  right: 1.764705882353%;
  background-position: -34px 0px; }

/*doc
---
title: Horizontal Lists
name:  hList
category: layout
---

Horizontal lists are used to space elements horizontally on the page

```html_example

    hList
    <ul class="hList">
        <li>Line Item 2</li>
        <li>Line Item 3</li>
        <li>Line Item 4</li>
    </ul>

    <br />
       hList Tiny
     <ul class="hList hList_tiny">
        <li>Line Item 2</li>
        <li>Line Item 3</li>
        <li>Line Item 4</li>
    </ul>

     <br />
       hList Small
     <ul class="hList hList_sm">
        <li>Line Item 2</li>
        <li>Line Item 3</li>
        <li>Line Item 4</li>
    </ul>

   <br />
       hList Medium
     <ul class="hList hList_md">
        <li>Line Item 2</li>
        <li>Line Item 3</li>
        <li>Line Item 4</li>
    </ul>

    <br />
       hList Large
     <ul class="hList hList_lg">
        <li>Line Item 2</li>
        <li>Line Item 3</li>
        <li>Line Item 4</li>
    </ul>
       hList Separated
    <ul class="hList hList_separated">
        <li>Line Item 2</li>
        <li>Line Item 3</li>
        <li>Line Item 4</li>
    </ul>

    <ul class="hList hList_bulleted hList_md">
        <li>Line Item 2</li>
        <li>Line Item 3</li>
        <li>Line Item 4</li>
    </ul>

```
*/
.hList:before, .hList:after {
  content: "";
  display: table; }
.hList:after {
  clear: both; }

.hList > * {
  float: left; }

.hList_tiny > * + * {
  margin-left: 10px; }

.hList_sm > * + * {
  margin-left: 15px; }

.hList_md > * + * {
  margin-left: 30px; }

.hList_lg > * + * {
  margin-left: 42px; }

.hList_exLg > * + * {
  margin-left: 75px; }

.hList_separated > * + * {
  line-height: 1;
  border-left: 1px solid;
  margin-left: 12px;
  padding-left: 12px; }

.hList_bulleted > * + * {
  line-height: 1; }

.hList_bulleted > * {
  position: relative; }

.hList_bulleted > *:before {
  content: "\2022\A0";
  width: 10px;
  height: 10px;
  position: absolute;
  top: -3px;
  left: -20px;
  font-size: 28px; }
  @media screen and (max-width: 640px) {
    .hList_bulleted > *:before {
      font-size: 21px;
      top: -5px;
      left: -19px; } }

.hList_bulleted > *:first-child:before {
  display: none; }

/*doc
---
title: Icons
name: icons
category: content
---

A list of icons to use within the site

```html_example

    <i class="icon icon_share"></i><br /><br />
    <i class="icon icon_arrowLeft"></i><br /><br />
    <i class="icon icon_arrowRight"></i><br /><br />
    <i class="icon icon_play"></i><br /><br />
    <i class="icon icon_doSomething"></i><br /><br />
    <i class="icon icon_facebook"></i><br /><br />
    <i class="icon icon_facebookBW"></i><br /><br />
    <i class="icon icon_youtube"></i><br /><br />
    <i class="icon icon_rss"></i>

```
*/
/* ---------------------------------------------------------------------
 Icon Object
------------------------------------------------------------------------ */
.icon {
  display: inline-block;
  vertical-align: middle;
  text-indent: -9999px; }

.mix-icon_prefix {
  margin-left: 15px; }

.mix-icon_suffix {
  margin-right: 5px; }

.icon_share {
  width: 20px;
  height: 20px;
  background: url("../../images/icons/icon-share.png") no-repeat 0 0; }

.icon_arrowLeft {
  width: 20px;
  height: 20px;
  background: url("../../images/icons/icon-arrow-left.png") no-repeat 0 0; }

.icon_arrowLeft_white {
  background-position: -40px 0; }

.icon_arrowRight {
  width: 20px;
  height: 20px;
  background: url("../../images/icons/icon-arrow-right.png") no-repeat 0 0; }

.icon_arrowRight_white {
  background-position: -40px 0; }

.icon_gallery {
  width: 32px;
  height: 25px;
  margin-top: -4px;
  background: url("../../images/icons/icon-gallery.png") no-repeat 0 0; }

.icon_play {
  width: 60px;
  height: 60px;
  background: url("../../images/icons/icon-play.png") no-repeat 0 0; }

.icon_close {
  width: 33px;
  height: 33px;
  background: url("../../images/icons/icon-close.png") no-repeat 0 0;
  background-size: 66px 33px; }

.icon_facebook {
  width: 32px;
  height: 32px;
  background: url("../../images/icons/icon-facebook.png") no-repeat 0 0; }

.icon_facebookBW {
  width: 32px;
  height: 32px;
  background: url("../../images/icons/icon-facebook-bw.png") no-repeat 0 0; }

.icon_youtube {
  width: 70px;
  height: 32px;
  background: url("../../images/icons/icon-youtube.png") no-repeat 0 0; }

.icon_rss {
  width: 32px;
  height: 32px;
  background: url("../../images/icons/icon-rss.png") no-repeat 0 0; }

.icon_doSomething {
  width: 128px;
  height: 128px;
  background: url("../../images/icons/icon-do-something.png") no-repeat 0 0; }

/*doc
---
title: Infographs
name: infographs
category: content
---


```html_example

    <div class="infographs">
        <div class="infographs-cell infographs-cell_first">
            <div class="infographs-item infographs-item_first">
                <img src="test-images/image-560x280.gif" />
            </div>
        </div>
        <div class="infographs-cell">
            <div class="infographs-item">
                <img src="test-images/image-560x280.gif" />
            </div>
        </div>
        <div class="infographs-cell infographs-cell_last">
            <div class="infographs-item infographs-item_last">
                <img src="test-images/image-560x280.gif" />
            </div>
        </div>
    </div><!-- end .infographs -->

```
*/
/* ---------------------------------------------------------------------
 Infographs Object
------------------------------------------------------------------------ */
.infographs {
  width: 100%;
  margin: 0 0 50px;
  padding: 25px 0;
  border-top: 1px solid black;
  border-bottom: 1px solid black; }
  .infographs:before, .infographs:after {
    content: "";
    display: table; }
  .infographs:after {
    clear: both; }

.infographs-cell {
  float: left; }

.infographs-cell + .infographs-cell {
  border-left: 1px dotted black; }

.infographs-cell {
  width: 30.33%;
  padding: 15px 2.15% 15px; }

.infographs-cell_first {
  padding-left: 0; }

.infographs-cell_last {
  padding-right: 0; }

.infographs-item-image {
  width: 100%; }

/*doc
---
title: Info Meta
name:  infoMeta
category: content
---


```html_example

    <div class="infoMeta">
        <p>Info meta</p>
    </div>

```
*/
.infoMeta {
  margin-bottom: 35px; }
  @media screen and (max-width: 640px) {
    .infoMeta {
      margin-bottom: 27px; } }

/*doc
---
title: Intro
name: intro
category: content
---


```html_example

    <div class="intro intro_removeBorder">
        <div class="intro-bd">
            <p>We transform individual lives and bring long-lasting, 
            systemic change to tough issues, like family financial stability and academic success.</p>
        </div>
        <div class="intro-md">
            <a href="" class="intro-cta"><i class="icon icon_doSomething">Do Something About It</i></a>
        </div>
    </div><!-- end .intro -->

    <div class="intro">
        <div class="intro-bd">
            <p>This is intro to page 7-1 and says something brief about United Way.</p>
        </div>

        <div class="intro-md">
            <a href="" class="intro-cta"><i class="icon icon_doSomething">Do Something About It</i></a>
        </div>
    </div><!-- end .intro -->

```
*/
/* ---------------------------------------------------------------------
 Intro
------------------------------------------------------------------------ */
.intro {
  display: table;
  width: 100%;
  padding-bottom: 15px;
  border-bottom: 1px solid black; }

.intro_removeBorder {
  border: none; }

.intro_softBottom {
  padding-bottom: 5px; }

.intro-bd,
.intro-md {
  display: table-cell;
  vertical-align: middle; }

.intro-bd {
  width: 75%;
  overflow: hidden; }

.intro-bd > p {
  font-size: 30px;
  line-height: 1.16;
  color: #666666;
  margin-bottom: 0;
  font-family: "DIN Next W01 Light", helvetica, arial, sans-serif; }
  @media screen and (max-width: 640px) {
    .intro-bd > p {
      font-size: 15px;
      line-height: 1.3; } }

.intro-md {
  width: 25%; }

.intro-cta {
  float: right; }

/*doc
---
title: Links Social
name: linkssocial
category: content
---

A specialied breakpoint for social icon links


```html_example

<div class="linksSocial">
    <ul class="hList hList_sm">
        <li class="linksSocial-item">
            <a herf="#" class="linksSocial-item-link linksSocial-item-link_youtube"><i class="icon icon_youtube">Subscribe on YouTube</i></a>
        </li>
        <li class="linksSocial-item">
            <a herf="#" class="linksSocial-item-link linksSocial-item-link_facebook"><i class="icon icon_facebookBW">Join Us on Facebook</i></a>
        </li>
        <li class="linksSocial-item">
            <a herf="#" class="linksSocial-item-link linksSocial-item-link_rss"><i class="icon icon_rss">Subscribe to RSS</i></a>
        </li>
    </ul>
</div>

```
*/
/* ---------------------------------------------------------------------
 Links Social
------------------------------------------------------------------------ */
@media screen and (min-width: 641px) and (max-width: 960px) {
  .linksSocial ul li:last-child {
    display: block;
    float: none;
    clear: both;
    margin: 0;
    padding: 15px 0 0; } }
.linksSocial-item-link_youtube:hover i {
  background-position: -70px 0; }

.linksSocial-item-link_facebook:hover i {
  background-position: -32px 0; }

.linksSocial-item-link_rss:hover i {
  background-position: -32px 0; }

.touch .linksSocial-item-link_youtube:hover i,
.touch .linksSocial-item-link_facebook:hover i,
.touch .linksSocial-item-link_rss:hover i {
  background-position: 0 0; }

/*doc
---
title: Media Object
name: media
category: layout
---

Places image along side block of text

```html_example

    <div class="blocks blocks_3up">
        <div class="calloutListing calloutListing_sm">
            <div class="media media_stacked">
                <div class="media-hd mix-media-hd_borderTop mix-media-hd_borderTop_tight">
                    <div class="media-hd-ellipsis">
                        <h2 class="hdg hdg_4 mix-hdg_caps">
                            <a href="">Why United Way <span class="icon icon_arrowRight"></span></a>
                        </h2>
                    </div>
                </div>
                <div class="media-img">
                    <a href="#" class="media-img-link">
                        <img src="test-images/image-560x280.gif" alt="" />
                    </a>
                </div>
            </div>
        </div>
    </div><!-- end .blocks -->
    
    <div class="blocks blocks_3up">    
        <div class="calloutListing">
            <div class="media media_stacked">
                <div class="media-hd mix-media-hd_borderTop mix-media-hd_borderTop_tight">
                    <div class="media-hd-ellipsis">
                        <h2 class="hdg hdg_6 mix-hdg_caps">
                            <a href="">This Just In <span class="icon icon_arrowRight"></span></a>
                        </h2>
                    </div>
                </div>
                <div class="media-bd">
                    <p>Lorem ipsum intro goes here and leads to an individual page &rsaquo;</p>
                </div>
            </div>
        </div>
    </div><!-- end .blocks -->
    
    <div class="blocks blocks_3up">
        <div class="calloutListing">
            <div class="media media_stacked">
                <div class="media-hd mix-media-hd_borderTop mix-media-hd_borderTop_tight">
                    <div class="media-hd-ellipsis">
                        <h2 class="hdg hdg_6 mix-hdg_caps">
                            <a href="" class="media-hd-ellipsis-link">
                                <span class="media-hd-ellipsis-link-text">Why United Way</span>
                                <i class="icon icon_arrowRight icon_prefix"></i>
                            </a>
                        </h2>
                        <span class="hdg hdg_6 mix-hdg_light">Great start for at-risk kids</span>
                    </div>
                </div>
                <div class="media-img">
                    <a href="#" class="media-img-link">
                        <img src="test-images/image-560x280.gif" alt="" />
                    </a>
                </div>
            </div>
        </div>
    </div><!-- end .blocks -->
    
    <div class="blocks blocks_3up">
        <div class="calloutListing">
            <div class="media media_stacked">
                <div class="media-hd mix-media-hd_borderTop mix-media-hd_borderTop_tight">
                    <div class="media-hd-ellipsis">
                        <h2 class="hdg hdg_6 mix-hdg_caps">
                            <a href="" class="media-hd-ellipsis-link">
                                <span class="media-hd-ellipsis-link-text">Why United Way Why United Way Why United Way</span>
                                <i class="icon icon_arrowRight icon_prefix"></i>
                            </a>
                        </h2>
                        <span class="hdg hdg_6 mix-hdg_light">Great start for at-risk kids</span>
                    </div>
                </div>
                <div class="media-img">
                    <a href="#" class="media-img-link">
                        <img src="test-images/image-560x280.gif" alt="" />
                    </a>
                </div>
            </div>
        </div>
    </div><!-- end .blocks -->
    
    <div class="blocks blocks_3up">
        <div class="calloutListing">
            <div class="media media_stacked">
                <div class="media-hd mix-media-hd_borderBottom">
                    <div class="media-hd-left">
                        <div class="media-hd-ellipsis">
                            <h2 class="hdg hdg_6 mix-hdg_caps">
                                <a href="">United Way Guide</a>
                            </h2>
                            <span class="hdg hdg_6 mix-hdg_light">Some kind of sub information</span>
                        </div>
                    </div>
                    <div class="media-hd-right">
                        <div class="media-share">
                        </div><!-- end .media-share -->
                    </div>
                </div>
                <div class="media-img">
                    <a href="#" class="media-img-link">
                        <img src="test-images/image-560x280.gif" alt="" />
                    </a>
                </div>
            </div>
        </div>
    </div><!-- end .blocks -->
    
    <div class="blocks blocks_3up">
        <div class="calloutListing">
            <div class="media media_stacked">
                <div class="media-hd mix-media-hd_borderBottom">
                    <div class="split">
                        <div class="media-hd-left">
                            <div class="media-hd-ellipsis">
                                <h2 class="hdg hdg_6 mix-hdg_caps">
                                    <a href="">United Way Guide United Way Guide </a>
                                </h2>
                                <span class="hdg hdg_6 mix-hdg_light">Some kind of sub information Some kind offff</span>
                            </div>
                        </div>
                        <div class="media-hd-right">
                            <div class="media-share" data-controller="shareController">
                                <ul class="dropdown">
                                    <li class="dropdown-item">
                                        <a href="#" class="dropdown-link">
                                            <i class="icon icon_share"></i> Share
                                        </a>
    
                                        <ul class="dropdown-menu dropdown-menu_lg dropdown-menu_right">
                                            <li class="dropdown-menu-item">
                                                <a href="#" class="dropdown-menu-item-link dropdown-menu-item-link_flush">Email</a>
                                            </li>
                                            <li class="dropdown-menu-item">
                                                <a href="#" class="dropdown-menu-item-link dropdown-menu-item-link_flush">Facebook</a>
                                            </li>
                                            <li class="dropdown-menu-item">
                                                <a href="#" class="dropdown-menu-item-link dropdown-menu-item-link_flush">Twitter</a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </div><!-- end .media-share -->
                        </div>
                   </div>
                </div>
                <div class="media-img">
                    <a href="#" class="media-img-link">
                        <img src="test-images/image-560x280.gif" alt="" />
                    </a>
                </div>
            </div>
        </div>
    </div><!-- end .blocks -->
    
    <div class="blocks blocks_3up">
        <div class="calloutListing">
            <div class="media media_stacked">
                <div class="media-hd mix-media-hd_borderBottom">
                    <div class="split">
                        <div class="media-hd-left">
                            <div class="media-hd-ellipsis">
                                <h2 class="hdg hdg_6 mix-hdg_caps">
                                    <a href="">United Way Guide United Way Guide </a>
                                </h2>
                            </div>
                        </div>
                        <div class="media-hd-right">
                            <div class="media-share media-share_flushTop" data-controller="shareController">
                                <ul class="dropdown">
                                    <li class="dropdown-item">
                                        <a href="#" class="dropdown-link">
                                            <i class="icon icon_share"></i> Share
                                        </a>
    
                                        <ul class="dropdown-menu dropdown-menu_lg dropdown-menu_right">
                                            <li class="dropdown-menu-item">
                                                <a href="#" class="dropdown-menu-item-link dropdown-menu-item-link_flush">Email</a>
                                            </li>
                                            <li class="dropdown-menu-item">
                                                <a href="#" class="dropdown-menu-item-link dropdown-menu-item-link_flush">Facebook</a>
                                            </li>
                                            <li class="dropdown-menu-item">
                                                <a href="#" class="dropdown-menu-item-link dropdown-menu-item-link_flush">Twitter</a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </div><!-- end .media-share -->
                        </div>
                   </div>
                </div>
                <div class="media-img">
                    <a href="#" class="media-img-link">
                        <img src="test-images/image-560x280.gif" alt="" />
                    </a>
                </div>
            </div>
        </div>
    </div><!-- end .blocks -->
    
    <div class="blocks blocks_3up">
        <div class="calloutListing">
            <div class="media media_stacked">
                <div class="media-hd mix-media-hd_positionOverImg">
                    <div class="media-hd-wrapper">
                        <h2 class="hdg hdg_3 mix-hdg_white">
                            <a href="">Running Your Campaign</a>
                        </h2>
                    </div>
                </div>
                <div class="media-img">
                    <a href="#" class="media-img-link">
                        <img src="test-images/image-560x280.gif" alt="" />
                    </a>
                </div>
            </div>
        </div>
    </div>

        
```
*/
/* ---------------------------------------------------------------------
 Media Object
------------------------------------------------------------------------ */
.media {
  position: relative; }

.media,
.media-bd {
  display: block; }

.media-hd {
  margin-bottom: 11px; }
  .media-hd:before, .media-hd:after {
    content: "";
    display: table; }
  .media-hd:after {
    clear: both; }

.mix-media-hd_borderTop {
  padding-top: 17px;
  border-top: 1px solid black; }

.mix-media-hd_borderTop_tight {
  padding-top: 12px;
  margin-bottom: 9px; }

.mix-media-hd_borderBottom {
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid black; }

.mix-media-hd_positionOverImg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2; }

.media-hd-wrapper {
  display: block;
  padding: 30px 25px; }

.media-hd-ellipsis,
.media-hd-ellipsis > * {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }

.media-hd-ellipsis-link {
  display: block;
  padding-right: 20px; }

.media-hd-ellipsis-link_prefix {
  padding-right: 35px; }

.media-hd-ellipsis-link-text {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle; }

.media-hd-left {
  float: left;
  width: 70%; }

.media-hd-right {
  float: right;
  width: 30%; }

.media-bd > p {
  font-size: 18px;
  line-height: 1.16; }

.media-img {
  float: left;
  margin-right: 30px; }

.media-img_tight {
  margin-right: 15px; }

.media-imgFlip {
  float: right;
  margin-left: 45px; }

.media_stacked > .media-img {
  float: none;
  margin-right: 0; }

.media-img-link {
  display: block;
  position: relative; }

.media-video-icon {
  height: 60px;
  width: 60px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -30px;
  margin-left: -30px; }

.media-share {
  margin: 17px 0 0; }

.media-share_flushTop {
  margin-top: 0; }

.media-share > * {
  float: right; }

/*doc
---
title: Modal
name: modal
category: container
---


```html_example

    <div class="modal js-modal" data-controller="modalController">
        <div class="modal-wrapper">
            <div class="modal-wrapper-holder">
                <div class="modal-wrapper-holder-content">
                    <iframe width="1020" height="574" src="//www.youtube.com/embed/E1jI1izaego" frameborder="0" allowfullscreen></iframe>
    
                    <p>Aenean lacinia bibendum nulla sed consectetur. Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum.</p>
    
                    <p>Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
    
                    <p>Aenean lacinia bibendum nulla sed consectetur. Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum.</p>
    
                    <span class="modal-wrapper-holder-content-close">Close</span>
                </div>
            </div>
        </div>
    </div>
    <div class="sneezeGaurd js-modal-background"></div>


    <a href="#" class="btn">Open Modal</a>
```
*/
/* ---------------------------------------------------------------------
 Modal Object
------------------------------------------------------------------------ */
/* Make sure to add class to body when modal is open */
.isLocked {
  overflow: hidden; }

.modal,
.sneezeGaurd {
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0; }
  @media screen and (max-width: 640px) {
    .modal,
    .sneezeGaurd {
      display: none !important; } }

.sneezeGaurd {
  z-index: 1;
  background: white;
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  /* Netscape */
  -moz-opacity: 0.7;
  /* Safari 1.x */
  -khtml-opacity: 0.7;
  /* Good browsers */
  opacity: 0.7; }

.modal {
  z-index: 100001;
  overflow-y: auto;
  overflow-x: hidden; }

.modal-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0; }

.modal-wrapper-holder {
  display: inline-block;
  width: 100%;
  position: relative;
  vertical-align: middle;
  margin: 0 auto; }

.modal-wrapper-holder-content {
  max-width: 1020px;
  position: relative;
  z-index: 3;
  margin: 68px auto 20px; }

.modal-wrapper-holder-content-close {
  width: 48px;
  height: 48px;
  position: absolute;
  top: -58px;
  right: 0;
  z-index: 4;
  cursor: pointer;
  background: url("../../images/modal/btn-modal-close.png") no-repeat 0 0;
  text-indent: -9999px; }

.modal-wrapper-holder-content-close:hover {
  background-position: -48px 0; }

/*doc
---
title: Navigation Global
name: navGlobal
category: content
---

Floats blocks of content left and right and clears it.

```html_example

    <nav class="navGlobal" role="navigation">                    
        <ul id="nav-sub" class="navGlobal-list navGlobal-list_a">
            <li class="level-1 first" id="nav-sub-about"><a herf="#">About</a>
                <ul>
                    <li class="level-2 first" id="nav-sub-about-our-mission"><a herf="#">Our Mission</a></li>
                    <li class="level-2" id="nav-sub-about-board-and-leadership"><a herf="#">Board and Leadership</a></li>
                    <li class="level-2" id="nav-sub-about-financials"><a herf="#">Financials</a></li>
                    <li class="level-2" id="nav-sub-about-community-investment"><a herf="#">Community Investment</a></li>
                    <li class="level-2" id="nav-sub-about-united-way-agencies-grantees"><a herf="#">United Way Agencies &amp; Grantees</a></li>
                    <li class="level-2" id="nav-sub-about-special-grants"><a herf="#">Special Grants</a></li>
                    <li class="level-2" id="nav-sub-about-service-centers"><a herf="#">Service Centers</a></li>
                    <li class="level-2" id="nav-sub-about-community-resource-center"><a herf="#">Community Resource Center</a></li>
                    <li class="level-2" id="nav-sub-about-volunteers"><a herf="#">Volunteers</a></li>
                    <li class="level-2" id="nav-sub-about-careers"><a herf="#">Careers</a></li>
                    <li class="level-2 last" id="nav-sub-about-contact-us"><a herf="#">Contact Us</a></li>
                </ul>
            </li>
            <li class="level-1" id="nav-sub-job-bank"><a herf="#">Job Bank</a></li>
            <li class="level-1" id="nav-sub-news"><a herf="#">News</a></li>
            <li class="level-1" id="nav-sub-non-profit-connection"><a herf="#">Non-Profit Connection</a></li>
            <li class="level-1 last" id="nav-sub-our-211-helpline"><a herf="#">Our 211 Helpline</a></li></li>
        </ul>
        <ul id="nav-sub" class="navGlobal-list navGlobal-list_b">
            <li class="level-1" id="nav-why-united-way"><a herf="#">Why United Way?</a></li>
            <li class="level-1 first" id="nav-sub-our-work"><a herf="#">Our Work</a>
                <ul>
                    <li class="level-2 first" id="nav-sub-about-our-mission"><a herf="#">Our Mission</a></li>
                    <li class="level-2" id="nav-sub-about-board-and-leadership"><a herf="#">Board and Leadership</a></li>
                    <li class="level-2" id="nav-sub-about-financials"><a herf="#">Financials</a></li>
                    <li class="level-2" id="nav-sub-about-community-investment"><a herf="#">Community Investment</a></li>
                    <li class="level-2" id="nav-sub-about-united-way-agencies-grantees"><a herf="#">United Way Agencies &amp; Grantees</a></li>
                    <li class="level-2" id="nav-sub-about-special-grants"><a herf="#">Special Grants</a></li>
                    <li class="level-2" id="nav-sub-about-service-centers"><a herf="#">Service Centers</a></li>
                    <li class="level-2" id="nav-sub-about-community-resource-center"><a herf="#">Community Resource Center</a></li>
                    <li class="level-2" id="nav-sub-about-volunteers"><a herf="#">Volunteers</a></li>
                    <li class="level-2" id="nav-sub-about-careers"><a herf="#">Careers</a></li>
                    <li class="level-2 last" id="nav-sub-about-contact-us"><a herf="#">Contact Us</a></li>
                </ul>
            </li>
            <li class="level-1" id="nav-sub-your-campaign"><a herf="#">Your Campaign</a></li>
            <li class="level-1 parent-navGlobal-item_isActive" id="nav-sub-donor-groups"><a herf="#">Donor Groups</a></li>
            <li class="level-1 last" id="nav-sub-donate"><a herf="#">Donate</a></li>
        </ul>
    </nav>

```
*/
/* ---------------------------------------------------------------------
 Global Nav Object
------------------------------------------------------------------------ */
.navGlobal-list:before, .navGlobal-list:after {
  content: "";
  display: table; }
.navGlobal-list:after {
  clear: both; }

.navGlobal-list > li {
  position: relative;
  float: left;
  margin-right: 3.5%; }

.navGlobal-list li.last {
  margin-right: 0; }

.navGlobal-list li > a {
  padding: 5px 0px 5px 0px;
  display: block;
  position: relative;
  color: black;
  font-size: 21px;
  text-transform: uppercase;
  font-family: "DIN Next W01 Regular", helvetica, arial, sans-serif;
  -webkit-transition: color 0.5s ease;
  -moz-transition: color 0.5s ease;
  -o-transition: color 0.5s ease;
  transition: color 0.5s ease; }

.navGlobal-list li.navGlobal-item_isActive > a,
.navGlobal-list li.parent-navGlobal-item_isActive > a,
.navGlobal-list li > a:hover,
.navGlobal-list li > a:active,
.navGlobal-list li.navGlobal-item_isOpen > a {
  color: #0099cc; }

.navGlobal-list_a > li.navGlobal-item_isActive > a:before,
.navGlobal-list_b > li.navGlobal-item_isActive > a:before,
.navGlobal-list_a > li.parent-navGlobal-item_isActive > a:before,
.navGlobal-list_b > li.parent-navGlobal-item_isActive > a:before,
.navGlobal-list_a > li > a:before,
.navGlobal-list_b > li > a:before,
.navGlobal-list_a > li.navGlobal-item_isOpen > a:before,
.navGlobal-list_b > li.navGlobal-item_isOpen > a:before {
  content: " ";
  width: 100%;
  height: 0px;
  position: absolute;
  top: -7px;
  left: 0;
  background: transparent;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease; }

.navGlobal-list_a > li.navGlobal-item_isActive > a:before,
.navGlobal-list_b > li.navGlobal-item_isActive > a:before,
.navGlobal-list_a > li.parent-navGlobal-item_isActive > a:before,
.navGlobal-list_b > li.parent-navGlobal-item_isActive > a:before,
.navGlobal-list_a > li:hover > a:before,
.navGlobal-list_b > li:hover > a:before,
.navGlobal-list_a > li.navGlobal-item_isOpen > a:before,
.navGlobal-list_b > li.navGlobal-item_isOpen > a:before {
  height: 3px;
  background: #0099cc; }

.navGlobal-list_a > li:hover > a,
.navGlobal-list_b > li:hover > a {
  color: #0099cc; }

.navGlobal-list_a {
  padding-top: 5px;
  padding-bottom: 11px;
  padding-right: 35%; }

.navGlobal-list_a li {
  margin-right: 4.75%; }

.navGlobal-list_a li > a {
  font-size: 14px; }

.navGlobal-list_b {
  padding-top: 5px;
  border-top: 1px solid black; }

.navGlobal-list_b li > a {
  padding-top: 12px; }

.navGlobal-list_a li > ul,
.navGlobal-list_b li > ul {
  width: 100%;
  min-width: 250px;
  position: absolute;
  top: 100%;
  left: -9999px;
  z-index: 1000;
  padding: 10px 0;
  background: white;
  border-top: 3px solid #0099cc;
  border-bottom: 3px solid #0099cc; }

.navGlobal-list_b li > ul {
  min-width: 290px;
  padding: 12px 0; }

.navGlobal-list_a li:hover > ul,
.navGlobal-list_b li:hover > ul,
.navGlobal-list_a li.navGlobal-item_isOpen > ul,
.navGlobal-list_b li.navGlobal-item_isOpen > ul {
  left: 0; }

.navGlobal-list_a li > ul > li,
.navGlobal-list_b li > ul > li {
  display: block;
  margin: 5px 0; }

.navGlobal-list_a li > ul > li > a,
.navGlobal-list_b li > ul > li > a {
  padding: 4px 20px;
  color: #4b4a4a;
  text-transform: none; }

.navGlobal-list_a li > ul > li > a {
  padding-top: 3px;
  padding-bottom: 3px; }

.navGlobal-list_a li > ul > li > a:hover,
.navGlobal-list_b li > ul > li > a:hover {
  color: #0099cc; }

/* Static Widths */
.navGlobal-list #nav-sub-why-united-way {
  width: 20.75%; }

.navGlobal-list #nav-sub-our-work {
  width: 12.25%; }

.navGlobal-list #nav-sub-your-campaign {
  width: 18.75%; }

.navGlobal-list #nav-sub-donor-groups {
  width: 18.25%; }

.navGlobal-list #nav-sub-donate {
  width: 15.5%; }

/*
.navGlobal-list #nav-sub-why-united-way {
    width: 20.25%;
}

.navGlobal-list #nav-sub-our-work {
    width: 11.75%;
}

.navGlobal-list #nav-sub-your-campaign {
    width: 18.5%;
}

.navGlobal-list #nav-sub-donor-groups {
    width: 17.5%;
}

.navGlobal-list #nav-sub-donate {
    width: 16%;
}
*/
/* Donation Button */
.navGlobal-list #nav-sub-donate > a {
  display: block;
  font-size: 21px;
  font-family: "DIN Next W01 Regular", helvetica, arial, sans-serif;
  text-transform: uppercase;
  color: black;
  margin-top: 6px;
  padding: 6px 14px 3px 14px;
  background-color: #9ec5fe;
  border-bottom: none;
  border-top: none;
  border-left: none;
  border-right: none;
  -webkit-transition: color 0.5s ease, background 0.5s ease;
  -moz-transition: color 0.5s ease, background 0.5s ease;
  -o-transition: color 0.5s ease, background 0.5s ease;
  transition: color 0.5s ease, background 0.5s ease;
  line-height: 1; }

.navGlobal-list #nav-sub-donate > a:hover,
.navGlobal-list #nav-sub-donate > a:active {
  color: white;
  border-bottom-color: transparent;
  background-color: #0059ad; }

.navGlobal-list_a > #nav-sub-donate.navGlobal-item_isActive > a:before,
.navGlobal-list_b > #nav-sub-donate.navGlobal-item_isActive > a:before,
.navGlobal-list_a > #nav-sub-donate.parent-navGlobal-item_isActive > a:before,
.navGlobal-list_b > #nav-sub-donate.parent-navGlobal-item_isActive > a:before,
.navGlobal-list_a > #nav-sub-donate:hover > a:before,
.navGlobal-list_b > #nav-sub-donate:hover > a:before,
.navGlobal-list_a > #nav-sub-donate.navGlobal-item_isOpen > a:before,
.navGlobal-list_b > #nav-sub-donate.navGlobal-item_isOpen > a:before {
  height: 1px;
  background: transparent; }

/*doc
---
title: Nav Hamburger
name:  navHamburger
category: content
---


```html_example

    <header class="banner" role="banner">
        <div class="split">
            <div class="split-left mix-split_bannerLeft">
                <div class="brandingBanner">
                    <h1 class="brandingBanner-hd">
                        <a href="#" alt="United Way of Greater Houston" /><img src="../assets/images/unitedway-logo.png" /></a>
                    </h1>
                </div>
            </div>
        </div>        
        
        <div class="navHamburger-btn js-mobile-navButton">
            <div class="navHamburger-btn-open">
                <span class="navHamburger-btn-open-text">Menu</span>
                <span class="navHamburger-btn-open-icon">
                    <i class="navHamburger-btn-open-icon-bar"></i>
                    <i class="navHamburger-btn-open-icon-bar"></i>
                    <i class="navHamburger-btn-open-icon-bar"></i>
                </span>
            </div>
            <div class="navHamburger-btn-close">
                <i class="icon icon_close"></i>
            </div>
        </div>
        <div class="navHamburger">
            <a herf="#" class="navHamburger-banner">Donate</a>
            
            <ul class="navHamburger-list">
                <li class="level-1 first" id="nav-sub-why-united-way"><a herf="#">Why United Way?</a></li>
                <li class="level-1" id="nav-sub-our-work"><a herf="#">Our Work</a></li>
                <li class="level-1" id="nav-sub-your-campaign"><a herf="#">Your Campaign</a></li>
                <li class="level-1 parent-navhamburger-list-item_isActive" id="nav-sub-donor-groups"><a herf="#">Donor Groups</a></li>
                <li class="level-1" id="nav-sub-about"><a herf="#">About</a></li>
                <li class="level-1" id="nav-sub-job-bank"><a herf="#">Job Bank</a></li>
                <li class="level-1" id="nav-sub-news"><a herf="#">News</a></li>
                <li class="level-1" id="nav-sub-non-profit-connection"><a herf="#">Non-Profit Connection</a></li>
                <li class="level-1" id="nav-sub-our-211-helpline"><a herf="#">Our 211 Helpline</a></li>
                <li class="level-1 last" id="nav-sub-donate"><a herf="#">Donate</a></li>    
                <li class="navHamburger-list-item navHamburger-list-item_search">
                    <div class="search">
                        <form class="search-form">
                            <input type="text" value="" placeholder="Search" class="search-input search-input_sm" />
                            <input type="submit" value="Search" class="search-button search-button_sm" />
                        </form>
                    </div>
                </li>
            </ul>
        </div>
    </header>
    
```
*/
.navHamburger,
.navHamburger-btn {
  display: none; }

@media screen and (max-width: 640px) {
  .navHamburger {
    display: block;
    position: relative;
    margin: 15px 0 0; }

  .navHamburger-btn {
    display: inline-block;
    position: absolute;
    top: 22px;
    right: 6.25%; }

  .navHamburger-btn-open,
  .navHamburger-btn-close {
    cursor: pointer; }

  .navHamburger-btn_isActive .navHamburger-btn-open {
    display: none; }

  .navHamburger-btn-open-text {
    display: block;
    margin-bottom: 2px;
    font-size: 13px;
    line-height: 1;
    font-family: "DIN Next W01 Medium", helvetica, arial, sans-serif;
    color: black;
    text-transform: uppercase;
    -webkit-transition: color 0.5s ease;
    -moz-transition: color 0.5s ease;
    -o-transition: color 0.5s ease;
    transition: color 0.5s ease; }

  .navHamburger-btn-open:hover .navHamburger-btn-open-text {
    color: #0099cc; }

  .navHamburger-btn-open-icon {
    display: block; }

  .navHamburger-btn-open-icon-bar {
    display: block;
    width: 100%;
    height: 5px;
    background: black;
    -webkit-transition: background 0.5s ease;
    -moz-transition: background 0.5s ease;
    -o-transition: background 0.5s ease;
    transition: background 0.5s ease; }

  .navHamburger-btn-open:hover .navHamburger-btn-open-icon-bar {
    background: #0099cc; }

  .navHamburger-btn-open-icon-bar + .navHamburger-btn-open-icon-bar {
    margin-top: 4px; }

  .navHamburger-btn-close {
    display: none; }

  .navHamburger-btn-close:hover .icon {
    background-position: -33px 0; }

  .navHamburger-btn_isActive .navHamburger-btn-close {
    display: block; }

  .navHamburger-banner {
    text-align: center;
    display: block;
    font-size: 17px;
    font-family: "DIN Next W01 Regular", helvetica, arial, sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    color: black;
    padding: 10px 14px 7px;
    background-color: #9ec5fe;
    border-bottom: none;
    border-top: none;
    border-left: none;
    border-right: none;
    -webkit-transition: color 0.5s ease, background 0.5s ease;
    -moz-transition: color 0.5s ease, background 0.5s ease;
    -o-transition: color 0.5s ease, background 0.5s ease;
    transition: color 0.5s ease, background 0.5s ease;
    line-height: 1; }

  .navHamburger-banner:hover {
    background: #0059ad;
    color: white; }

  .navHamburger-list {
    display: none;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10000;
    background: white;
    border-top: 2px solid #0099cc; }

  .navHamburger-list_isActive {
    display: block; }

  .navHamburger-list > li {
    margin: 0 10px;
    text-align: center;
    border-bottom: 1px solid black; }

  .navHamburger-list > li.navhamburger-list-item_isActive,
  .navHamburger-list > li.parent-navhamburger-list-item_isActive {
    color: #000099;
    border-collapse: #0099cc; }

  .navHamburger-list > .navHamburger-list-item_search {
    background: #0059ad;
    margin: 0;
    padding: 12px 10px; }

  .navHamburger-list > li:last-child,
  .navHamburger-list > li:nth-last-child(2),
  .navHamburger-list > li:nth-last-child(3) {
    border-bottom: none; }

  .navHamburger-list > li > a {
    display: block;
    padding: 13px 0 11px;
    font-size: 17px;
    line-height: 1;
    font-family: "DIN Next W01 Regular", helvetica, arial, sans-serif;
    color: black;
    text-transform: uppercase; }

  .navHamburger-list #nav-sub-donate {
    background: #9ec5fe;
    margin: 0; } }
/*doc
---
title: Nav Meta
name:  navMeta
category: content
---


```html_example

    <ul class="navMeta-list">
        <li class="first"><a herf="#">Your Campaign</a>
            <ul>
                <li class="first"><a herf="#">How to Run a Campaign</a></li>
                <li><a herf="#">Campaign Toolbox</a></li>
                <li><a herf="#">Campaign Events</a></li>
                <li><a herf="#">Campaign Newsletter</a></li>
                <li class="last"><a herf="#">Days of Caring</a></li>
            </ul>
        </li>
        <li class="last"><a herf="#">About</a>
            <ul>
                <li class="first"><a herf="#">Our Mission</a></li>
                <li><a herf="#">Board and Leadership</a></li>
                <li><a herf="#">Financials</a></li>
                <li><a herf="#">Community Investment</a></li>
                <li><a herf="#">United Way Agencies &amp; Grantees</a></li>
                <li><a herf="#">Special Grants</a></li>
                <li><a herf="#">Service Centers</a></li>
                <li><a herf="#">Community Resource Center</a></li>
                <li><a herf="#">Volunteers</a></li>
                <li><a herf="#">Careers</a></li>
                <li class="last"><a herf="#">Contact Us</a></li>
            </ul>
        </li>
    </ul>

```
*/
/* ---------------------------------------------------------------------
 Nav Meta Object
------------------------------------------------------------------------ */
@media screen and (max-width: 640px) {
  .navMeta {
    margin-bottom: 27px; } }

.navMeta-list {
  max-width: 125px; }
  @media screen and (min-width: 641px) and (max-width: 960px) {
    .navMeta-list {
      margin-right: 10px; } }

.navMeta-list li {
  font-size: 12px;
  line-height: 1.25; }

.navMeta-list > li {
  margin: 0 0 25px; }
  @media screen and (max-width: 640px) {
    .navMeta-list > li {
      margin-bottom: 6px; } }

.navMeta-list > li a {
  font-family: "DIN Next W01 Regular", helvetica, arial, sans-serif;
  font-size: 12px;
  line-height: 1.25;
  color: black; }

.navMeta-list > li a:hover {
  color: white; }

.navMeta-list > li > a {
  font-family: "DIN Next W01 Bold", helvetica, arial, sans-serif; }

.navMeta-list > li > ul {
  margin: 3px 0 0; }
  @media screen and (max-width: 640px) {
    .navMeta-list > li > ul {
      display: none; } }

.navMeta-list > li > ul li {
  margin: 0 0 3px; }

.navMeta-list > li > ul li:last-child {
  margin-bottom: 0; }

/*doc
---
title: Nav Sub
name:  navSub
category: content
---


```html_example

    <ul class="navSub navSub_hList">
        <li><a href="#">Overview</a></li>
        <li><a href="#">Activites</a></li>
        <li><a href="#">Leadership of this Group</a></li>
        <li class="navSub-item_isActive"><a href="#">Join</a></li>
    </ul>

    <br /><br /><br />

    <ul class="navSub navSub_dropdown">
        <li>
            <a href="#">
                Stories &amp; Videos <i class="icon icon_arrowRight icon_marginLeft"></i>
            </a>

            <ul class="navSub-menu">
                <li><a href="#">All Donor Groups</a></li>
                <li><a href="#">LINC</a></li>
                <li><a href="#">Young Leaders</a></li>
                <li><a href="#">Women's Initiative</a></li>
                <li><a href="#">Chairman's Club</a></li>
                <li><a href="#">Impact Circle</a></li>
                <li><a href="#">Impact Circle</a></li>
                <li><a href="#">Leadership Circle</a></li>
                <li><a href="#">Alexis De Tocqueville Society</a></li>
                <li><a href="#">Diamond Donors</a></li>
            </ul>
        </li>
    </ul>

```
*/
/* ---------------------------------------------------------------------
 Nav Sub
------------------------------------------------------------------------ */
.navSub {
  margin-bottom: 30px; }

.navSub > li {
  position: relative; }

.navSub > li > a {
  display: inline-block;
  position: relative;
  font-size: 16px;
  font-family: "DIN Next W01 Regular", helvetica, arial, sans-serif;
  color: #666666;
  text-transform: uppercase;
  -webkit-transition: color 0.5s ease;
  -moz-transition: color 0.5s ease;
  -o-transition: color 0.5s ease;
  transition: color 0.5s ease; }

.navSub > li.navSub-item_isActive > a,
.navSub > li.parent-navSub-item_isActive > a,
.navSub_dropdown .navSub-menu > li.navSub-item_isActive a,
.navSub > li:hover > a {
  color: #0099cc; }

.navSub > li:before {
  content: " ";
  width: 100%;
  height: 0;
  position: absolute;
  top: -2px;
  left: 0;
  background: #0099cc;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease; }

.navSub > li.navSub-item_isActive:before,
.navSub > li.parent-navSub-item_isActive:before,
.navSub > li:hover:before {
  height: 3px;
  background: #0099cc; }

.navSub_hList > li {
  display: inline-block;
  margin: 0 10px; }

.navSub_hList > li > a {
  padding: 10px 0 6px; }

.navSub_hList > li:first-child {
  margin-left: 0; }

.navSub_hList > li:last-child {
  margin-right: 0; }

.navSub_hList > li > a {
  display: inline-block; }

.navSub_dropdown {
  display: inline-block;
  min-width: 300px; }

.navSub_dropdown > li:before {
  -webkit-transition: none 0.5s ease;
  -moz-transition: none 0.5s ease;
  -o-transition: none 0.5s ease;
  transition: none 0.5s ease; }

.navSub_dropdown > li > a {
  padding: 8px 0 6px; }

.navSub_dropdown .navSub-menu {
  width: 100%;
  position: absolute;
  left: -9999px;
  top: 34px;
  z-index: 1000;
  background: white;
  border-top: 3px solid #0099cc;
  border-bottom: 3px solid #0099cc; }

.navSub_dropdown .navSub-menu .navSub-item_isActive {
  display: none; }

.navSub_dropdown .navSub-menu > li a {
  display: block;
  margin: 10px 0;
  padding: 0 10px;
  font-size: 16px;
  font-weight: 600;
  font-family: "DIN Next W01 Regular", helvetica, arial, sans-serif;
  color: #666666;
  text-transform: uppercase; }

.navSub_dropdown .navSub-menu > li a:hover {
  color: #0099cc; }

.navSub_dropdown > li:hover > a {
  color: #0099cc; }

.navSub_dropdown > li:hover:before {
  content: " ";
  width: 100%;
  height: 3px;
  position: absolute;
  top: -2px;
  left: 0;
  background: #0099cc; }

.navSub_dropdown > li:hover .icon {
  background-position: -20px 0; }

.navSub_dropdown > li:hover .navSub-menu {
  left: 0; }

/*doc
---
title: Newsletter
name: Newsletter
category: content
---

Newsletter sign up form

```html_example

    <div class="newsletter">
        <form>
            <div class="newsletter-label">
                <label class="hdg hdg_7" for="footer-newsletter-signup">Newsletter Signup</label>
            </div>
            <div class="newsletter-row">
                <input type="text" name="newsletter-signup" value="" placeholder="email address" class="newsletter-input" id="footer-newsletter-signup" />
                <input type="submit" value="Submit" class="newsletter-button" />
            </div>
        </form>
    </div>

```
*/
/* ---------------------------------------------------------------------
 Newsletter Object
------------------------------------------------------------------------ */
.newsletter {
  margin-bottom: 35px; }
  @media screen and (max-width: 640px) {
    .newsletter {
      margin-bottom: 27px; } }

.newsletter-label {
  margin-bottom: 8px;
  font-size: 12px;
  line-height: 1.25; }

.newsletter-row {
  margin-left: -6px; }
  .newsletter-row:before, .newsletter-row:after {
    content: "";
    display: table; }
  .newsletter-row:after {
    clear: both; }

.newsletter-input,
.newsletter-button {
  display: block;
  float: left;
  margin: 0; }

.newsletter-input {
  width: 74%;
  padding: 4px 6px;
  font-size: 12px;
  line-height: 1;
  color: #5b5959;
  border: none;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }
  .newsletter-input::-webkit-input-placeholder {
    color: #5b5959;
    line-height: 1.25; }
  .newsletter-input:-moz-placeholder {
    color: #5b5959;
    line-height: 1.25; }
  .newsletter-input::-moz-placeholder {
    color: #5b5959;
    line-height: 1.25; }
  .newsletter-input:-ms-input-placeholder {
    color: #5b5959;
    line-height: 1.25; }
  .newsletter-input.hasPlaceholderText {
    color: #5b5959;
    line-height: 1.25; }
  @media screen and (min-width: 641px) and (max-width: 960px) {
    .newsletter-input {
      width: 68%; } }
  @media screen and (max-width: 640px) {
    .newsletter-input {
      width: 84%; } }

.newsletter-button {
  width: 26%;
  min-width: 50px;
  max-width: 56px;
  text-align: center;
  font-size: 12px;
  font-family: "DIN Next W01 Medium", helvetica, arial, sans-serif;
  color: white;
  margin-left: -5px;
  padding: 4px 6px;
  background-color: #333333;
  border-bottom: none;
  border-top: none;
  border-left: none;
  border-right: none;
  -webkit-transition: color 0.5s ease, background 0.5s ease;
  -moz-transition: color 0.5s ease, background 0.5s ease;
  -o-transition: color 0.5s ease, background 0.5s ease;
  transition: color 0.5s ease, background 0.5s ease;
  line-height: 1.2;
  cursor: pointer;
  -webkit-appearance: none;
  border-radius: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }
  @media screen and (min-width: 641px) and (max-width: 960px) {
    .newsletter-button {
      width: 32%; } }
  @media screen and (max-width: 640px) {
    .newsletter-button {
      width: 15%;
      max-width: none; } }

.newsletter-button:hover {
  background: #0059ad; }

/*doc
---
title: Paginate
name: paginate
category: content
---

Pagiante index of pages.

```html_example

    <div class="paginate">
        <ol class="hList hList_tiny">
            <li><a href="#" class="paginate-item-link_isActive">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
        </ol>
    </div>

    <br /><br />

```
*/
.paginate {
  margin-top: 10px; }
  @media screen and (max-width: 640px) {
    .paginate {
      margin-bottom: 25px; } }

.paginate > ol > li > a {
  font-size: 16px;
  color: #666666;
  text-decoration: underline; }

.paginate > ol > li > a:hover,
.paginate > ol > li > .paginate-item-link_isActive {
  color: #0099cc;
  text-decoration: none; }

/*doc
---
title: Search
name: search
category: content
---

Floats blocks of content left and right and clears it.

```html_example

    <div class="search">
        <form class="search-form">
            <input type="text" value="" placeholder="Search" class="search-input" />
            <input type="submit" value="Search" class="search-button" />
        </form>
    </div>

    <br /><br />

    <div class="search">
        <form class="search-form">
            <input type="text" value="" placeholder="Search" class="search-input search-input_sm" />
            <input type="submit" value="Search" class="search-button search-button_sm" />
        </form>
    </div>

```
*/
/* ---------------------------------------------------------------------
 Search Object
------------------------------------------------------------------------ */
.search_banner {
  position: absolute;
  top: 3px;
  right: 0px; }

.search-form {
  width: 100%;
  display: inline-block;
  position: relative; }

.search-input {
  width: 100%;
  margin: 0;
  padding: 6px 14px 3px;
  background-color: #cccccc;
  border: none;
  color: #666666;
  font-size: 21px;
  text-transform: uppercase;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }
  .search-input::-webkit-input-placeholder {
    color: #666666; }
  .search-input:-moz-placeholder {
    color: #666666; }
  .search-input::-moz-placeholder {
    color: #666666; }
  .search-input:-ms-input-placeholder {
    color: #666666; }
  .search-input.hasPlaceholderText {
    color: #666666; }

.search-input_sm {
  width: 270px;
  padding: 2px 5px 1px 5px;
  font-size: 14px; }

.search-button {
  width: 34px;
  height: 34px;
  position: absolute;
  top: 0;
  right: 4px;
  background: url("../../images/icons/icon-search-lg.png") no-repeat 0 0;
  text-indent: -9999px;
  border: none;
  cursor: pointer; }

.search-button:hover {
  background-position: -34px 0; }

.search-button_sm {
  width: 20px;
  height: 24px;
  background: url("../../images/icons/icon-search-sm.png") no-repeat 0 2px; }

.search-button_sm:hover {
  background-position: -20px 2px; }

/*doc
---
title: Split
name: split
category: layout
---

Floats blocks of content left and right and clears it.

```html_example

    <div class="split">
        <div class="split-left">
            Left Text
        </div>
        <div class="split-right">
            Right Text
        </div>
   </div>

```
*/
/* ---------------------------------------------------------------------
 Split Object
------------------------------------------------------------------------ */
.split:before, .split:after {
  content: "";
  display: table; }
.split:after {
  clear: both; }

.split-left {
  float: left; }

.split-right {
  float: right; }

.mix-split_2_10 {
  width: 20%; }

.mix-split_3_10 {
  width: 30%; }

.mix-split_4_10 {
  width: 40%; }

.mix-split_6_10 {
  width: 60%; }

.mix-split_7_10 {
  width: 70%; }

.mix-split_8_10 {
  width: 80%; }

@media screen and (max-width: 640px) {
  .split-left,
  .split-right {
    width: 100%;
    float: none; }
    .split-left:before, .split-left:after,
    .split-right:before,
    .split-right:after {
      content: "";
      display: table; }
    .split-left:after,
    .split-right:after {
      clear: both; }

  .mix-split_2_10,
  .mix-split_3_10,
  .mix-split_4_10,
  .mix-split_6_10,
  .mix-split_7_10,
  .mix-split_8_10 {
    width: 100%; } }
@media screen and (min-width: 641px) and (max-width: 960px) {
  .split-left,
  .split-right {
    width: 100%;
    float: none; }
    .split-left:before, .split-left:after,
    .split-right:before,
    .split-right:after {
      content: "";
      display: table; }
    .split-left:after,
    .split-right:after {
      clear: both; }

  .mix-split_2_10,
  .mix-split_3_10,
  .mix-split_4_10,
  .mix-split_6_10,
  .mix-split_7_10,
  .mix-split_8_10 {
    width: 100%; } }
.mix-split_ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }

.mix-split_bannerLeft {
  width: 18.529411764706%; }
  @media screen and (max-width: 640px) {
    .mix-split_bannerLeft {
      width: 100%; } }
  @media screen and (min-width: 641px) and (max-width: 960px) {
    .mix-split_bannerLeft {
      width: 18.529411764706%;
      float: left; } }

.mix-split_bannerRight {
  width: 81.470588235294%;
  position: relative; }
  @media screen and (max-width: 640px) {
    .mix-split_bannerRight {
      display: none; } }
  @media screen and (min-width: 641px) and (max-width: 960px) {
    .mix-split_bannerRight {
      width: 81.470588235294%;
      float: right; } }

/*doc
---
title: Video Fluid
name: videoFluid
category: content
---



```html_example



```
*/
video {
  width: 100%    !important;
  height: auto   !important; }

/*
.videoFluid {
    position: relative;
	padding-bottom: 56.25%;  //16:9
	padding-top: 25px;
	height: 0;
}

.videoFluid iframe,
.videoWrapper object,
.videoWrapper embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
*/
/*doc
---
title: Vertical Lists
name:  vlist
category: layout
---

Vertical lists are used to space elements vertically on the page

```html_example

    <ul class="vList">
        <li><a href="../styleguide">Styleguide</a></li>
        <li>Line Item 2</li>
        <li>Line Item 3</li>
        <li>Line Item 4</li>
    </ul>

    <ul class="vList vList_tiny">
        <li><a href="../styleguide">Styleguide</a></li>
        <li>Line Item 2</li>
        <li>Line Item 3</li>
        <li>Line Item 4</li>
    </ul>


    <ul class="vList vList_sm">
        <li><a href="../styleguide">Styleguide</a></li>
        <li>Line Item 2</li>
        <li>Line Item 3</li>
        <li>Line Item 4</li>
    </ul>


    <ul class="vList vList_md">
        <li><a href="../styleguide">Styleguide</a></li>
        <li>Line Item 2</li>
        <li>Line Item 3</li>
        <li>Line Item 4</li>
    </ul>


    <ul class="vList vList_lg">
        <li><a href="../styleguide">Styleguide</a></li>
        <li>Line Item 2</li>
        <li>Line Item 3</li>
        <li>Line Item 4</li>
    </ul>


    <ul class="vList vList_exLg">
        <li><a href="../styleguide">Styleguide</a></li>
        <li>Line Item 2</li>
        <li>Line Item 3</li>
        <li>Line Item 4</li>
    </ul>


    <ul class="vList vList_piped">
        <li><a href="../styleguide">Styleguide</a></li>
        <li>Line Item 2</li>
        <li>Line Item 3</li>
        <li>Line Item 4</li>
    </ul>

    <ul class="vList vList_bullets">
        <li><a href="../styleguide">Styleguide</a></li>
        <li>Line Item 2</li>
        <li>Line Item 3</li>
        <li>Line Item 4</li>
    </ul>

```
*/
.vList {
  margin-bottom: 30px; }

.vList > * {
  margin-top: 8px;
  display: block; }

.vList > :first-child {
  margin: 0; }

.vList_tiny > * + * {
  margin-top: 6px; }

.vList_sm > * + * {
  margin-top: 10px; }

.vList_md > * + * {
  margin-top: 15px; }

.vList_lg > * + * {
  margin-top: 20px; }

.vList_exLg > * + * {
  margin-top: 30px; }

.vList_piped > * {
  margin-top: 20px;
  border-bottom: 1px solid #e5e0de;
  padding-bottom: 20px; }

/*doc
---
title: Wysiwyg
name: wysiwyg
category: content
---

Wysiwyg styles are used to style basic elements added via a wysiwyg editor. The wysiwyg class will need to be on the parent element of any area designated as user-generated content.

```html_example

    <div class="wysiwyg">
        <ul>
            <li>Line Item 1
               <ol>
                  <li>Nest 1</li>
                  <li>Nest 1</li>
                  <li>Nest 1</li>
                </ol>
            </li>
            <li>Line Item 2</li>
            <li>Line Item 3</li>
            <li>Line Item 4</li>
        </ul>
        <ol>
            <li>Line Item 1
                <ul>
                  <li>Nest 1</li>
                  <li>Nest 1</li>
                  <li>Nest 1</li>
                </ul>
            </li>
            <li>Line Item 2</li>
            <li>Line Item 3</li>
            <li>Line Item 4</li>
        </ol>
        <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</p>
<h2>Second-level Heading</h2>
<p>Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter purslane fennel azuki bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley jícama salsify.</p>
        <blockquote>Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter purslane fennel azuki bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley jícama salsify.</blockquote>
<h3>Tertiary Heading</h3>
<p>Celery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. Grape wattle seed kombu beetroot horseradish carrot squash brussels sprout chard.</p>

<img src="http://placehold.it/300x109" class="floatLeft" />

<h4>Fourth Level Heading</h4>
    <img src="http://placehold.it/350x150">
    <a href="">This is a link</a>
    <img src="http://placehold.it/300x100" class="floatRight" />
    <p>the nation’s <b>Bold text</b> and water <i> italics text</i> as well. and<sub>a</sub> water quality<sup>a</sup> as well.</p>
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    <h6>Heading 6</h6>

     <ol>
       <li>Preheat oven to 350 degrees. Grease a cookie sheet and set aside.</li>
       <li>Beat the egg and mix well with the buttermilk</li>
       <li>Add the canola oil and orange zest and mix to combine</li>
       <li>On a large bowl, mix together the oats, flours, sugar, baking powder, and salt</li>
       <li> Stir the buttermilk mixture into the dry ingredients and mix until the dough just comes together. Do not over mix.</li>
       <li> Fold in the fruit.</li>
       <li>Scoop scones into the prepared cookie sheet and bake 10 minutes or until slightly golden on top.</li>
   </ol>

    <table>
        <thead>
            <tr>
                <th>table heading</th>
                <th>table heading</th>
                <th>table heading</th>
                <th>table heading</th>
                <th>table heading</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>First Lastname</td>
                <td>Cheyenne, Kit <br />
                    Carson, Lincoln, <br />
                    Yuma</td>
                <td>CO</td>
                <td>firstname at <br />
                    test.org</td>
                <td>888-888-888</td>
            </tr>
            <tr>
                <td>First Lastname</td>
                <td>Cheyenne, Kit <br />
                    Carson, Lincoln, <br />
                    Yuma</td>
                <td>CO</td>
                <td>firstname at <br />
                    test.org</td>
                <td>888-888-888</td>
            </tr>
            <tr>
                <td>First Lastname</td>
                <td>Cheyenne, Kit <br />
                    Carson, Lincoln, <br />
                    Yuma</td>
                <td>CO</td>
                <td>firstname at <br />
                    test.org</td>
                <td>888-888-888</td>
            </tr>
            <tr>
                <td>First Lastname</td>
                <td>Cheyenne, Kit <br />
                    Yuma</td>
                <td>CO</td>
                <td>firstname at <br />
                    test.org</td>
                <td>888-888-888</td>
            </tr>
        </tbody>
    </table>
   </div>

```
*/
/* ---------------------------------------------------------------------
 Wysiwyg
------------------------------------------------------------------------ */
.wysiwyg {
  overflow: hidden;
  font-size: 22px;
  max-width: 900px; }

.wysiwyg img {
  margin: 0 20px 20px 0; }

.wysiwyg p {
  margin-bottom: 22px;
  line-height: 1.44; }
  @media screen and (max-width: 640px) {
    .wysiwyg p {
      margin-bottom: 16px; } }

.wysiwyg a {
  text-decoration: underline; }

.wysiwyg ul {
  list-style: disc; }

.wysiwyg ol {
  list-style: decimal; }

.wysiwyg ol,
.wysiwyg ul {
  margin-bottom: 32px;
  margin-left: 50px;
  font-size: 21px; }
  @media screen and (max-width: 640px) {
    .wysiwyg ol,
    .wysiwyg ul {
      margin-bottom: 20px;
      margin-left: 31px;
      font-size: 13px; } }

.wysiwyg li {
  margin-bottom: 12px;
  padding-left: 0px;
  line-height: 1.2; }
  @media screen and (max-width: 640px) {
    .wysiwyg li {
      margin-bottom: 8px; } }

.wysiwyg li > ol,
.wysiwyg li > ul {
  margin: 20px 20px 20px 24px; }

.wysiwyg li > ol {
  margin-left: 29px; }

.wysiwyg li > ul {
  list-style: circle; }

.wysiwyg img {
  display: block;
  max-width: 100%;
  margin-bottom: 22px; }

.wysiwyg .floatLeft {
  float: left;
  margin: 0 32px 24px 0; }

.wysiwyg .floatRight {
  float: right;
  margin: 0 0 24px 32px; }

.wysiwyg b {
  font-family: "DIN Next W01 Medium", helvetica, arial, sans-serif; }

.wysiwyg i {
  font-style: italic; }

.wysiwyg sup {
  vertical-align: super; }

.wysiwyg sub {
  vertical-align: sub; }

.wysiwyg h1,
.wysiwyg h2,
.wysiwyg h3,
.wysiwyg h4,
.wysiwyg h5,
.wysiwyg h6 {
  font-family: "DIN Next W01 Regular", helvetica, arial, sans-serif;
  margin-bottom: 20px; }

.wysiwyg h1 {
  font-size: 36px;
  line-height: 1.1;
  font-family: "DIN Next W01 Medium", helvetica, arial, sans-serif;
  color: black;
  text-transform: uppercase; }

.wysiwyg h2 {
  font-size: 28px;
  line-height: 1.1;
  color: #333333; }

.wysiwyg h3 {
  font-size: 24px; }

.wysiwyg h4 {
  font-size: 18px; }

.wysiwyg h5 {
  font-size: 16px; }

.wysiwyg h6 {
  font-size: 14px; }

.wysiwyg blockquote {
  font-size: 18px;
  line-height: 1.2;
  font-style: italic;
  padding-bottom: 25px;
  border-bottom: 1px solid black;
  border-top: 1px solid black;
  margin: 10px 10.57% 30px;
  padding-top: 20px;
  position: relative; }

.wysiwyg blockquote:after {
  content: "\201C";
  display: block;
  padding-right: 8px;
  background: grey;
  width: 32px;
  height: 40px;
  border-radius: 40px;
  text-align: center;
  color: #ffffff;
  font-size: 60px;
  font-family: Georgia, serif;
  line-height: 68px;
  position: absolute;
  left: 50%;
  top: -20px;
  margin-left: -20px; }

.wysiwyg blockquote p:last-child {
  margin-bottom: 0; }

.wysiwyg table {
  width: 100%;
  margin-bottom: 22px;
  border-bottom: 1px solid black; }

.wysiwyg table th,
.wysiwyg table td {
  min-width: 10%;
  padding: 15px;
  font-size: 21px;
  color: black;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid black;
  border-left: 1px solid black; }
  @media screen and (max-width: 640px) {
    .wysiwyg table th,
    .wysiwyg table td {
      padding: 7px;
      font-size: 13px; } }

.wysiwyg table th:first-child,
.wysiwyg table td:first-child {
  padding-left: 0;
  border-left: 0; }

.wysiwyg table th {
  font-family: "DIN Next W01 Medium", helvetica, arial, sans-serif; }

.wysiwyg table[border='0'],
.wysiwyg table[border='0'] td,
.wysiwyg table[border='0'] th {
  border: 0; }

/* commenting this as it was causing odd double margins in places
.wysiwyg > :last-child {
    margin-bottom: 0; //whatever the last child is we don't want it having margin on the bottom
}

.wysiwyg > :first-child {
    margin-bottom: 22px; //overriding last child if first-child is last-child
}
*/
@media screen and (min-width: 961px) and (max-width: 1020px) {
  /* ---------------------------------------------------------------------
  Target Browsers: All
  Media Type: Screen, Projection
  Width: Min-Width $MEDIA_WIDTH_MD+1, Max-Width: $MEDIA_WIDTH_LG
  ------------------------------------------------------------------------ */
  /* ---------------------------------------------------------------------
   Global Nav Object
  ------------------------------------------------------------------------ */
  .navGlobal-list_a {
    padding-bottom: 5px;
    padding-right: 27%; }

  /* Static Widths */
  .navGlobal-list #nav-sub-why-united-way {
    width: 18.5%; }

  .navGlobal-list #nav-sub-our-work {
    width: 10.25%; }

  .navGlobal-list #nav-sub-your-campaign {
    width: 16.5%; }

  .navGlobal-list #nav-sub-donor-groups {
    width: 16%; }

  .navGlobal-list #nav-sub-donate {
    width: 22.75%; }

  /* ---------------------------------------------------------------------
   Search Object
  ------------------------------------------------------------------------ */
  .search_banner {
    width: 24%; }

  .search-form {
    width: 100%; }

  .search-input_sm {
    width: 100%; } }
@media screen and (min-width: 641px) and (max-width: 960px) {
  /* ---------------------------------------------------------------------
  Target Browsers: All
  Media Type: Screen, Projection
  Width: Min-Width $MEDIA_WIDTH_SM+1, Max-Width: $MEDIA_WIDTH_MD
  ------------------------------------------------------------------------ */
  .form-list-item_2of4 {
    width: 100%; }

  .form-list-item_2of4 + .form-list-item_2of4 {
    margin-left: 0; }

  /* ---------------------------------------------------------------------
  Carousel
  ------------------------------------------------------------------------ */
  .carousel {
    width: 108.25%;
    margin-left: -4.125%;
    margin-bottom: 35px; }

  .carousel-wrapper {
    margin: 0 60px; }

  .carousel-next {
    right: 3.125%; }

  .carousel-prev {
    left: 3.125%; }

  /* ---------------------------------------------------------------------
  Content
  ------------------------------------------------------------------------ */
  .content-constrained {
    margin-left: 3.125%;
    margin-right: 3.125%; }

  /* ---------------------------------------------------------------------
   Call To Action Object
  ------------------------------------------------------------------------ */
  .cta-hd {
    width: 100%; }

  .cta-btn {
    margin-bottom: 20px; }

  .cta-share {
    margin-bottom: 10px;
    float: none; }

  /* ---------------------------------------------------------------------
   Donate Object
  ------------------------------------------------------------------------ */
  .donateForm-wrapper {
    width: 73%; }

  .donateForm-image > img {
    max-width: auto;
    height: 1050px; }

  /*
  .donateForm {
      overflow: visible;
  }
  
  .donateForm-wrapper {
      width: 100%;
      position: relative;
      top: auto;
      right: auto;
      padding: 0;
  }
  
  .donateForm-step-hd {
      display: block;
      margin-bottom: 15px;   
  }
  
  .donateForm-step-bd {
      margin-bottom: 50px;
  }
  
  .donateForm-step-bd_last {
      margin-bottom: 0;
  }
  
  .donateForm-image {
      width: (100 + ($MEDIA_MARGIN_MD * 2) + 2);
      margin-left: -($MEDIA_MARGIN_MD + 1);
      margin-bottom: 35px;
  }
  
  .donateForm-image img {
      width: 100%;
  }
  */
  /* ---------------------------------------------------------------------
   Donate Step
  ------------------------------------------------------------------------ */
  /*
  .donateForm-step {
      display: block !important; //override JS
  }
  */
  /* ---------------------------------------------------------------------
   Donate Progress Object
  ------------------------------------------------------------------------ */
  .donateForm-progress {
    margin-bottom: 20px; }

  .donateForm-progress ol > li {
    display: block;
    margin-bottom: 5px; }

  /*
  .donateForm-progress {
      display: none;
  }
  */
  /* ---------------------------------------------------------------------
   Donate Inputs Object
  ------------------------------------------------------------------------ */
  /*
  .donateForm-input_solid {
      width: 100%;
  }
  */
  /* ---------------------------------------------------------------------
   Hero Object
  ------------------------------------------------------------------------ */
  .hero-slides {
    width: 100%; }

  .hero-slide-hd {
    height: auto;
    max-width: 100%;
    position: relative;
    bottom: auto;
    left: auto;
    padding: 15px 20px 10px;
    background: black;
    text-align: center; }

  .hero-slide-img {
    position: relative; }

  .hero-control {
    top: auto;
    bottom: 19%;
    margin-top: 0;
    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    /* Netscape */
    -moz-opacity: 1;
    /* Safari 1.x */
    -khtml-opacity: 1;
    /* Good browsers */
    opacity: 1; }

  .mix-hero-control_vMiddle {
    top: 50%;
    bottom: auto;
    margin-top: -16px; }

  .hero-control_prev {
    left: 3.125%; }

  .hero-control_next {
    right: 3.125%; }

  /* ---------------------------------------------------------------------
   Media Object
  ------------------------------------------------------------------------ */
  .media-hd-wrapper {
    padding-top: 18px;
    padding-bottom: 18px; }

  .media-share {
    margin-top: 2px; }

  .media-share_flushTop {
    margin-top: 0; }

  .media-share .dropdown-link {
    font-family: "DIN Next W01 Regular", helvetica, arial, sans-serif;
    font-size: 13px;
    text-align: right; }

  .media-share .icon_share {
    display: block;
    margin: 0 0 2px 22px; }

  /* ---------------------------------------------------------------------
   Modal Object
  ------------------------------------------------------------------------ */
  .modal-wrapper {
    padding-left: 0;
    padding-right: 0; }

  .modal-wrapper-holder-content {
    max-width: 960px;
    margin-left: 3.125%;
    margin-right: 3.125%; }

  /* ---------------------------------------------------------------------
   Global Nav Object
  ------------------------------------------------------------------------ */
  .navGlobal-list_a > li {
    margin-right: 3.75%;
    margin-right: 7.5%; }

  .navGlobal-list_a > li.navGlobal-item_isActive > a:before,
  .navGlobal-list_a > li.parent-navGlobal-item_isActive > a:before,
  .navGlobal-list_a > li > a:before,
  .navGlobal-list_a > li.navGlobal-item_isOpen > a:before {
    top: -3px; }

  .navGlobal-list_b li > a {
    font-size: 18px; }

  .navGlobal-list_b > li.navGlobal-item_isActive > a:before,
  .navGlobal-list_b > li.parent-navGlobal-item_isActive > a:before,
  .navGlobal-list_b > li > a:before,
  .navGlobal-list_b > li.navGlobal-item_isOpen > a:before {
    top: -7px; }

  .navGlobal-list #nav-sub-donate > a {
    padding-left: 3px;
    padding-right: 3px;
    font-size: 18px; }

  /* ---------------------------------------------------------------------
   Nav Sub
  ------------------------------------------------------------------------ */
  .navSub {
    width: 108.25%;
    margin-left: -4.125%; }

  .navSub > li {
    position: relative; }

  .navSub > li > a {
    display: block; }

  .navSub > li.navSub-item_isActive:before,
  .navSub > li.parent-navSub-item_isActive:before,
  .navSub > li:hover:before {
    display: none; }

  .navSub_hList > li {
    display: block;
    margin: 0; }

  .navSub_hList > li > a,
  .navSub_dropdown > li > a,
  .navSub_dropdown > li > .navSub-menu > li > a {
    margin: 0;
    padding: 12px 6.25% 10px;
    text-align: center;
    border-top: 1px solid black; }

  .navSub_hList > li:last-child > a,
  .navSub_dropdown > li > .navSub-menu > li:last-child > a {
    border-bottom: 1px solid black; }

  .navSub > li.navSub-item_isActive > a,
  .navSub_hList > li > a:hover,
  .navSub_dropdown > li > a,
  .navSub_dropdown > li > .navSub-menu > li > a:hover,
  .navSub_dropdown > li > .navSub-menu > li.navSub-item_isActive > a,
  .navSub > li.parent-navSub-item_isActive > a {
    color: #0099cc;
    border-color-top: #0099cc; }

  .navSub_dropdown > li > a {
    display: none; }

  .navSub_dropdown .navSub-menu .navSub-item_isActive {
    display: block; }

  .navSub_dropdown {
    display: block; }

  .navSub_dropdown .navSub-menu {
    position: relative;
    top: auto;
    left: auto;
    border: none; }

  .navSub_dropdown > li:hover:before {
    display: none; }

  /* ---------------------------------------------------------------------
   Search Object
  ------------------------------------------------------------------------ */
  .search_banner {
    width: 30%; }

  .search-form {
    width: 100%; }

  .search-input_sm {
    width: 100%; } }
@media screen and (max-width: 640px) {
  /* ---------------------------------------------------------------------
  Target Browsers: All
  Media Type: Screen, Projection
  Width: Min-Width $MEDIA_WIDTH_SM
  ------------------------------------------------------------------------ */
  /* ---------------------------------------------------------------------
   Blocks
  ------------------------------------------------------------------------ */
  .blocks {
    margin-left: 0; }

  .blocks > *,
  .mix-blocks_variableHeight > * {
    margin-left: 0;
    margin-right: 0; }

  /* ---------------------------------------------------------------------
   Blocks (3 up) & (4 up)
  ------------------------------------------------------------------------ */
  .blocks_3up > *,
  .blocks_4up > * {
    width: 100%; }

  /* ---------------------------------------------------------------------
   Carousel
  ------------------------------------------------------------------------ */
  .carousel {
    width: 114.5%;
    margin-left: -7.25%;
    margin-bottom: 25px; }

  .carousel-wrapper {
    margin: 0 60px;
    padding-top: 16px;
    padding-bottom: 12px; }

  .carousel-next {
    right: 6.25%; }

  .carousel-prev {
    left: 6.25%; }

  /* ---------------------------------------------------------------------
  Content
  ------------------------------------------------------------------------ */
  .content-constrained {
    margin-left: 6.25%;
    margin-right: 6.25%; }

  .content-intro {
    margin-bottom: 8px; }

  .content-intro_pushTop {
    margin-top: 15px; }

  .content-hd {
    margin-top: 15px;
    margin-bottom: 12px; }

  .content-hd_pullBottom {
    bottom: auto; }

  .content-bd {
    margin-bottom: 0; }

  .content-ft {
    margin-bottom: 0; }

  /* ---------------------------------------------------------------------
   Call To Action Object
  ------------------------------------------------------------------------ */
  .cta {
    margin-top: 10px;
    margin-bottom: 10px; }

  .cta-hr {
    margin-bottom: 10px; }

  .cta-hd {
    width: 100%; }

  .cta-hd > p {
    font-size: 18px; }

  .cta-btn {
    margin-bottom: 20px; }

  .cta-share {
    margin-bottom: 10px;
    float: none; }

  /* ---------------------------------------------------------------------
   Donate Object
  ------------------------------------------------------------------------ */
  .donateForm {
    overflow: visible; }

  .donateForm-wrapper {
    width: 100%;
    position: relative;
    top: auto;
    right: auto;
    padding: 0; }

  .donateForm-step-hd {
    display: block;
    margin-bottom: 15px; }

  .donateForm-step-bd {
    margin-bottom: 50px; }

  .donateForm-step-bd_last {
    margin-bottom: 0; }

  .donateForm-image {
    width: 114.5%;
    margin-left: -7.25%;
    margin-bottom: 35px; }

  .donateForm-image img {
    width: 100%; }

  /* ---------------------------------------------------------------------
   Donate Step
  ------------------------------------------------------------------------ */
  .donateForm-step {
    display: block !important; }

  /* ---------------------------------------------------------------------
   Donate Progress Object
  ------------------------------------------------------------------------ */
  .donateForm-progress {
    display: none; }

  /* ---------------------------------------------------------------------
   Donate Inputs Object
  ------------------------------------------------------------------------ */
  .donateForm-input_solid {
    width: 100%; }

  /* ---------------------------------------------------------------------
   Gallery Object
  ------------------------------------------------------------------------ */
  /* ---------------------------------------------------------------------
   Gallery List Object
  ------------------------------------------------------------------------ */
  .gallery-wrapper {
    width: 115%;
    margin-left: -7.5%;
    border: none; } }
@media screen and (max-width: 640px) and (max-width: 640px) {
  .gallery-list-control {
    display: block; } }

@media screen and (max-width: 640px) {
  /* ---------------------------------------------------------------------
   Gallery Nav Object
  ------------------------------------------------------------------------ */
  .gallery-nav {
    display: none; }

  /* ---------------------------------------------------------------------
   Grid
  ------------------------------------------------------------------------ */
  .grid-col + .grid-col {
    margin-left: 0; }

  .grid-col_1of12,
  .grid-col_2of12,
  .grid-col_3of12,
  .grid-col_4of12,
  .grid-col_5of12,
  .grid-col_6of12,
  .grid-col_7of12,
  .grid-col_8of12,
  .grid-col_9of12,
  .grid-col_10of12,
  .grid-col_11of12,
  .grid-col_12of12 {
    width: 100%; }

  .mix-grid-col_push1of12,
  .mix-grid-col_push2of12,
  .mix-grid-col_push3of12,
  .mix-grid-col_push4of12,
  .mix-grid-col_push5of12,
  .mix-grid-col_push6of12,
  .mix-grid-col_push7of12,
  .mix-grid-col_push8of12,
  .mix-grid-col_push9of12,
  .mix-grid-col_push10of12,
  .mix-grid-col_push11of12,
  .mix-grid-col_push12of12,
  .mix-grid-col_pull1of12,
  .mix-grid-col_pull2of12,
  .mix-grid-col_pull3of12,
  .mix-grid-col_pull4of12,
  .mix-grid-col_pull5of12,
  .mix-grid-col_pull6of12,
  .mix-grid-col_pull7of12,
  .mix-grid-col_pull8of12,
  .mix-grid-col_pull9of12,
  .mix-grid-col_pull10of12,
  .mix-grid-col_pull11of12,
  .mix-grid-col_pull12of12 {
    left: 0%; }

  .mix-grid-col_prefix1of12,
  .mix-grid-col_prefix2of12,
  .mix-grid-col_prefix3of12,
  .mix-grid-col_prefix4of12,
  .mix-grid-col_prefix5of12,
  .mix-grid-col_prefix6of12,
  .mix-grid-col_prefix7of12,
  .mix-grid-col_prefix8of12,
  .mix-grid-col_prefix9of12,
  .mix-grid-col_prefix10of12,
  .mix-grid-col_prefix11of12,
  .mix-grid-col_prefix12of12,
  .mix-grid-col_suffix1of12,
  .mix-grid-col_suffix2of12,
  .mix-grid-col_suffix3of12,
  .mix-grid-col_suffix4of12,
  .mix-grid-col_suffix5of12,
  .mix-grid-col_suffix6of12,
  .mix-grid-col_suffix7of12,
  .mix-grid-col_suffix8of12,
  .mix-grid-col_suffix9of12,
  .mix-grid-col_suffix10of12,
  .mix-grid-col_suffix11of12,
  .mix-grid-col_suffix12of12 {
    margin-left: 0;
    margin-right: 0; }

  /* ---------------------------------------------------------------------
   Headings
  ------------------------------------------------------------------------ */
  .hdg > a:active > .icon_arrowRight,
  .hdg > a:hover > .icon_arrowRight {
    background-position: -15px -1px; }

  .hdg_1 {
    font-size: 25px; }

  .hdg_2 {
    font-size: 22px; }

  .hdg_4 {
    font-size: 18px; }

  .hdg_5 {
    font-size: 15px; }

  .hdg_6 {
    font-size: 13px; }

  .hdg_hero {
    font-size: 17px;
    line-height: 1.06; }

  .hdg_infographs {
    font-size: 35px; }

  /* ---------------------------------------------------------------------
   Hero Object
  ------------------------------------------------------------------------ */
  .hero-slides {
    width: 100%; }

  .hero-slide-hd {
    height: auto;
    max-width: 100%;
    position: relative;
    bottom: auto;
    left: auto;
    padding: 10px 20px;
    background: black;
    text-align: center; }

  .hero-slide-img {
    position: relative; }

  .hero-slide-img-video {
    width: 50px;
    height: 50px;
    margin-top: -25px;
    margin-left: -25px; }

  .hero-slide-img-video-icon {
    width: 50px;
    height: 50px;
    background-size: 50px 50px; }

  .hero-control {
    top: auto;
    bottom: 13%;
    margin-top: 0; }

  .hero-control {
    height: 25px;
    width: 25px;
    margin-top: -12.5px;
    background-size: 51px 25px;
    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    /* Netscape */
    -moz-opacity: 1;
    /* Safari 1.x */
    -khtml-opacity: 1;
    /* Good browsers */
    opacity: 1; }

  .hero-control_prev {
    left: 6.25%; }

  .hero-control_next {
    right: 6.25%;
    background-position: -26px 0; }

  /* ---------------------------------------------------------------------
   Icon Object
  ------------------------------------------------------------------------ */
  .mix-icon_prefix {
    margin-left: 7px; }

  .mix-icon_arrowLeft {
    width: 15px;
    height: 15px;
    background-size: 45px 15px; }

  .icon_arrowLeft_white {
    background-position: -30px 0;
    margin-top: 2px; }

  .icon_arrowRight {
    width: 15px;
    height: 15px;
    background-position: 0 -1px;
    background-size: 45px 15px;
    margin-top: -1px; }

  .icon_arrowRight_white {
    background-position: -30px 0;
    margin-top: 2px; }

  .icon_doSomething {
    width: 64px;
    height: 64px;
    background-size: 64px 64px; }

  /* ---------------------------------------------------------------------
   Infographs Object
  ------------------------------------------------------------------------ */
  .infographs {
    display: block;
    margin-bottom: 20px;
    padding: 0;
    border-bottom: none; }

  .infographs-cell {
    display: block;
    width: 100%; }

  .infographs-cell + .infographs-cell {
    border-top: 1px dotted black;
    border-left: none; }

  .infographs-cell {
    padding: 10px 0; }

  .infographs-item-bd > p {
    font-size: 15px; }

  /* ---------------------------------------------------------------------
   Media Object
  ------------------------------------------------------------------------ */
  .media-hd {
    margin-bottom: 4px; }

  .media-hd_borderTop {
    padding-top: 11px; }

  .mix-media-hd_borderTop {
    padding-top: 8px; }

  .mix-media-hd_borderTop_tight {
    padding-top: 9px;
    margin-bottom: 6px; }

  .mix-media-hd_borderBottom {
    margin-bottom: 7px;
    padding-top: 11px;
    padding-bottom: 0;
    border-top: 1px solid black;
    border-bottom: none; }

  .media-hd_borderBottom {
    margin-bottom: 9px;
    padding-bottom: 9px; }

  .media-bd > p {
    font-size: 11px; }

  .media-share {
    margin-top: 6px; }

  .media-share_flushTop {
    margin-top: 0; }

  /* ---------------------------------------------------------------------
   Nav Sub
  ------------------------------------------------------------------------ */
  .navSub {
    width: 114.5%;
    margin-left: -7.25%;
    margin-bottom: 20px; }

  .navSub > li {
    position: relative; }

  .navSub > li > a {
    display: block; }

  .navSub > li.navSub-item_isActive:before,
  .navSub > li.parent-navSub-item_isActive:before,
  .navSub > li:hover:before {
    display: none; }

  .navSub_hList > li {
    display: block;
    margin: 0; }

  .navSub_hList > li > a,
  .navSub_dropdown > li > a,
  .navSub_dropdown > li > .navSub-menu > li > a {
    margin: 0;
    padding: 12px 6.25% 10px;
    text-align: center;
    border-top: 1px solid black; }

  .navSub_hList > li:last-child > a,
  .navSub_dropdown > li > .navSub-menu > li:last-child > a {
    border-bottom: 1px solid black; }

  .navSub > li.navSub-item_isActive > a,
  .navSub_hList > li > a:hover,
  .navSub_dropdown > li > a,
  .navSub_dropdown > li > .navSub-menu > li > a:hover,
  .navSub_dropdown > li > .navSub-menu > li.navSub-item_isActive > a,
  .navSub > li.parent-navSub-item_isActive > a {
    color: #0099cc;
    border-top-color: #0099cc; }

  .navSub_dropdown > li > a {
    display: none; }

  .navSub_dropdown .navSub-menu .navSub-item_isActive {
    display: block; }

  .navSub_dropdown {
    display: block; }

  .navSub_dropdown .navSub-menu {
    position: relative;
    top: auto;
    left: auto;
    border: none; }

  .navSub_dropdown > li:hover:before {
    display: none; }

  /* ---------------------------------------------------------------------
   Search Object
  ------------------------------------------------------------------------ */
  .search-form {
    display: block; }

  .search-input {
    width: 100%;
    font-size: 13px; }

  .search-input_sm {
    width: 100%; }

  .search-button {
    height: 25px;
    top: -4px; }

  .search-button_sm {
    top: 0;
    background-position: 0 0; }

  .search-button_sm:hover {
    background-position: -20px 0; }

  /* ---------------------------------------------------------------------
   Search Results
  ------------------------------------------------------------------------ */
  .searchResults {
    margin-bottom: 35px; } }