/* ---------------------------------------------------------------------
Reset Styles (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,ph
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%;
}

/* ---------------------------------------------------------------------
Base Styles
------------------------------------------------------------------------ */
html {
  filter: expression(document.execCommand("BackgroundImageCache", false, true));
}
body {
    font-family: Arial, sans-serif;
    background: #ffffff url(../../images/body-background-gradient.png) repeat-x;
    -webkit-backface-visibility: hidden; /* Fix 1px shift bug for full-width transitions in chrome */
}
body.home {background: none #cdecfb;}
p {
    font-size: 13px;
    line-height: 1.54; /* 20/13 */
    margin-bottom: 13px;
    color: #000000;
}

li {
    color: #000000;
}

a {
    color: #ce1126;
    text-decoration: none;
}

em {
    font-style: italic;
}

b {
    font-weight: bold;
}

/* ---------------------------------------------------------------------
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;
}

.copyright {
    color: #ffffff;
    font: 12px/1.84 Arial, "Helvetica Neue", Helvetica, sans-serif;
}

/* ---------------------------------------------------------------------
High Contrast
------------------------------------------------------------------------ */

body[class~="hghContrast"] {
    background-color: #1a1a1a;
    background-image: none;
}

.hghContrast p {
    color: #ffffff;
}

.hghContrast li {
    color: #ffffff;
}

/* ---------------------------------------------------------------------
Utility Classes
------------------------------------------------------------------------ */

.isHidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.bold {
    font-weight: bold;
}

.italic {
    font-style: italic;
}

.noMargin, .quarantine .noMargin {
    margin: 0;
}

.marginBot {
    margin-bottom: 27px; /* 1x gutter */
}

.marginBot_med {
    margin-bottom: 33px; /* 1x gutter */
}

.marginBot_sm {
    margin-bottom: 14px; /* .5x gutter */
}

.marginBot_lrg {
    margin-bottom: 54px; /* 2x gutter */
}

.lrgP {
    font-size: 15px;
    line-height: 1.33; /* 20px/15px */
}

.homeFbFeed {
    border: none;
    overflow: hidden;
    width: 365px;
    /*height: 596px;*/
    margin-top: 127px;
}

.hghContrast .interiorFbFeed {
    background: #ffffff;
}
.hghContrast .homeFbFeed {background: #000;}

.interiorFbFeed {
    border: none;
    overflow: hidden;
    width: 456px;
    height: 520px;
    margin-bottom: 27px;
}

.floatLeft {
    float: left;
}

.floatRight {
    float: right;
}

.floatRight_paddingTopBot {
    padding: 22px 0;
}

.floatRight_submitBtn {
    margin-right: 72px;
}

.halfWidth {
    width: 50%;
}

.shiftLeft {
    margin-left: -13px;
}

.superscript {
    vertical-align: top;
    font-size: 20px;
    line-height: 1;
}

.purple {
    color: #4f2170;
}

.hghContrast .purple {
    color: #ffffff;
}

.hiddenDiv {
    display: none;
}

.no-js .hiddenDiv {
    display: block;
}

/* ---------------------------------------------------------------------
Content Background Styles
------------------------------------------------------------------------ */
.home .contentBg,
.hghContrast .contentBg {
    display: none;
}

.contentBg {
    position: absolute;
    z-index: -1;
    height: 560px;
    width: 100%;
    margin-bottom: -100%;
    overflow: hidden;
}

.contentBg-maskContainer {
    width: 1440px;
    height: 560px;
    margin: 0 auto;
}

/* Cearfix, can't use overflow hidden */

.contentBg-maskContainer:before,
.contentBg-maskContainer:after {
    content: ' ';
    display: table;
}

.contentBg-maskContainer:after {
    clear: both;
}

.contentBg-maskContainer-mask {
    position: relative;
    background: #c7eafb;
    width: 1440px;
    height: 33px;
    margin: 512px -1px 0px; /* margin top is container height - element height: 545 - 33 = 512px*/
    filter: progid:DXImageTransform.Microsoft.Chroma(color='cyan'); /* Filters out cyan, used in conjunction with '.hroCarouselMask-wrapper' class for IE masking */
    -webkit-mask-box-image: url(../../images/contentBg-mask-webkit.png); /* Applies PNG Mask in Chrome/Safari/Opera */
    -webkit-clip-path: url(../../images/masks.svg#contentBg);
    -ms-clip-path: url(../../images/masks.svg#contentBg);
    clip-path: url(../../images/masks.svg#contentBg); /* Applies SVG Mask in FireFox */
}

.contentBg-maskContainer-mask_left {
    float: left;
    margin: 512px -2px 0 -1440px;
}

.contentBg-maskContainer-mask_right {
    float: right;
    margin: 512px -1438px 0 -2px;
}

.contentBg-cascade {
    position: absolute;
    right: 0px;
    width: 912px;
    height: 367px;
    margin-top: 140px;
    background: url(../../images/background-cascade.png);
}

/* ---------------------------------------------------------------------
Masthead Styles
------------------------------------------------------------------------ */
.masthead {
    background: #ffffff;
}

.masthead_hideRegions,
.masthead_hideAll {
    background: transparent;
}
.home .masthead_hideRegions,
.home .masthead_hideAll {
    background: #fff;
}

.masthead-top {
    position: relative;
    z-index: 2;
}

.masthead-middle {
    position: relative;
    z-index: 1;
    margin-top: -36px;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

.masthead_hideAll .masthead-middle {
    margin-top: -92px;
}

.hghContrast .masthead {
    background: #1a1a1a;
}

.hghContrast .masthead_hideRegions,
.hghContrast .masthead_hideAll {
    background: transparent;
}

/* ---------------------------------------------------------------------
Slide Panel Styles
------------------------------------------------------------------------ */

.slidePanel {
    width: 100%;
    padding-top: 32px;
    margin-bottom: 32px;
    background: #d8f8f9;
}

.slidePanel-bd {
    overflow: hidden;
    width: 1024px;
    margin: 0 auto -9px;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

.slidePanel-bd > * {
    float: right;
}

.slidePanel-maskWrap {
    position: relative;
    overflow: hidden;
    top: 0px;
    min-width: 1024px;
}

.slidePanel-maskWrap-inner {
    width: 1024px;
    margin: 0 auto;
}

.slidePanel-maskWrap-inner-mask {
    width: 1440px;
    height: 34px;
    margin: 0 -208px;
    float: left;
    /*background: #d8f8f9;*/
    -webkit-clip-path: url(../../images/masks.svg#accessibilityMask);
    -ms-clip-path: url(../../images/masks.svg#accessibilityMask);
    -o-clip-path: url(../../images/masks.svg#accessibilityMask);
    clip-path: url(../../images/masks.svg#accessibilityMask);
}

.slidePanel-maskWrap-inner-mask_left {
    float: left;
    margin-left: -1646px;
}

.slidePanel-maskWrap-inner-mask_right {
    float: right;
    margin-right: -1646px;
}

/* ------------------------------------------------------
High Contrast
-------------------------------------------------------*/
.hghContrast .slidePanel,
.hghContrast .slidePanel-maskWrap-inner-mask {
    background: #ffffff;
}

/* ------------------------------------------------------
IE 10/11
-------------------------------------------------------*/

html[data-useragent*='MSIE 10.0'] .masthead_hideAll .slidePanel-maskWrap,
html[data-useragent*='MSIE 11.0'] .masthead_hideAll .slidePanel-maskWrap {
    top: 0;
}

/* ---------------------------------------------------------------------
Grid Styles
------------------------------------------------------------------------ */

/*doc

---

title: Grid
name: grid
category: Base

---

The grid, used to position modules on the page.

```html_example
<div class="grid">
    <div class="grid-row">
        <div class="grid-row-col grid-row-col_size1of12">
            <div style="width: 100%; height: 100%; background-color: #ff0000; text-align: center; color: #ffffff; font-size: 12px;">
                <div style="padding: 6px;">1of12</div>
            </div>
        </div>
        <div class="grid-row-col grid-row-col_size5of12">
            <div style="width: 100%; height: 100%; background-color: #ff0000; text-align: center; color: #ffffff; font-size: 12px;">
                <div style="padding: 6px;">1of12</div>
            </div>
        </div>
    </div>

    <div class="grid-row">
        <div class="grid-row-col grid-row-col_size2of12">
            <div style="width: 100%; height: 100%; background-color: #ff0000; text-align: center; color: #ffffff; font-size: 12px;">
                <div style="padding: 6px;">1of12</div>
            </div>
        </div>
        <div class="grid-row-col grid-row-col_size4of12">
            <div style="width: 100%; height: 100%; background-color: #ff0000; text-align: center; color: #ffffff; font-size: 12px;">
                <div style="padding: 6px;">1of12</div>
            </div>
        </div>
    </div>

    <div class="grid-row">
        <div class="grid-row-col grid-row-col_size3of12">
            <div style="width: 100%; height: 100%; background-color: #ff0000; text-align: center; color: #ffffff; font-size: 12px;">
                <div style="padding: 6px;">1of12</div>
            </div>
        </div>
        <div class="grid-row-col grid-row-col_size3of12">
            <div style="width: 100%; height: 100%; background-color: #ff0000; text-align: center; color: #ffffff; font-size: 12px;">
                <div style="padding: 6px;">1of12</div>
            </div>
        </div>
    </div>

    <div class="grid-row">
        <div class="grid-row-col grid-row-col_size4of12">
            <div style="width: 100%; height: 100%; background-color: #ff0000; text-align: center; color: #ffffff; font-size: 12px;">
                <div style="padding: 6px;">1of12</div>
            </div>
        </div>
        <div class="grid-row-col grid-row-col_size2of12">
            <div style="width: 100%; height: 100%; background-color: #ff0000; text-align: center; color: #ffffff; font-size: 12px;">
                <div style="padding: 6px;">1of12</div>
            </div>
        </div>
    </div>

    <div class="grid-row">
        <div class="grid-row-col grid-row-col_size5of12">
            <div style="width: 100%; height: 100%; background-color: #ff0000; text-align: center; color: #ffffff; font-size: 12px;">
                <div style="padding: 6px;">1of12</div>
            </div>
        </div>
        <div class="grid-row-col grid-row-col_size1of12">
            <div style="width: 100%; height: 100%; background-color: #ff0000; text-align: center; color: #ffffff; font-size: 12px;">
                <div style="padding: 6px;">1of12</div>
            </div>
        </div>
    </div>

    <div class="grid-row">
        <div class="grid-row-col grid-row-col_size6of12">
            <div style="width: 100%; height: 100%; background-color: #ff0000; text-align: center; color: #ffffff; font-size: 12px;">
                <div style="padding: 6px;">1of12</div>
            </div>
        </div>
    </div>

    <div class="grid-row">
        <div class="grid-row-col grid-row-col_size5of12 mix-grid-row-col_push1of12">
            <div style="width: 100%; height: 100%; background-color: #ff0000; text-align: center; color: #ffffff; font-size: 12px;">
                <div style="padding: 6px;">1of12</div>
            </div>
        </div>
    </div>

    <div class="grid-row">
        <div class="grid-row-col grid-row-col_size4of12 mix-grid-row-col_push2of12">
            <div style="width: 100%; height: 100%; background-color: #ff0000; text-align: center; color: #ffffff; font-size: 12px;">
                <div style="padding: 6px;">5of12</div>
            </div>
        </div>
    </div>

    <div class="grid-row">
        <div class="grid-row-col grid-row-col_size3of12 mix-grid-row-col_push3of12">
            <div style="width: 100%; height: 100%; background-color: #ff0000; text-align: center; color: #ffffff; font-size: 12px;">
                <div style="padding: 6px;">3of12</div>
            </div>
        </div>
    </div>

    <div class="grid-row">
        <div class="grid-row-col grid-row-col_size2of12 mix-grid-row-col_push4of12">
            <div style="width: 100%; height: 100%; background-color: #ff0000; text-align: center; color: #ffffff; font-size: 12px;">
                <div style="padding: 6px;">2of12</div>
            </div>
        </div>
    </div>

    <div class="grid-row">
        <div class="grid-row-col grid-row-col_size1of12 mix-grid-row-col_push5of12">
            <div style="width: 100%; height: 100%; background-color: #ff0000; text-align: center; color: #ffffff; font-size: 12px;">
                <div style="padding: 6px;">1of12</div>
            </div>
        </div>
    </div>
</div>
```

*/

.grid {}

.grid:before,
.grid:after {
    content: ' ';
    display: table;
}

.grid:after {
    clear: both;
}

.grid-row {
    float:left;
    margin-bottom: 12px;

}

.grid-row_top {
    margin-top: 27px;
}

.grid-row:before,
.grid-row:after {
    content: " ";
    display: table;
}

.grid-row:after {
    clear: both;
}

.grid-row-col {
    float: left;
    margin-left: 28px;
}

.grid-row-col_size1of12 { width: 55px; }
.grid-row-col_size2of12 { width: 138px; }
.grid-row-col_size3of12 { width: 221px; }
.grid-row-col_size4of12 { width: 304px; }
.grid-row-col_size5of12 { width: 387px; }
.grid-row-col_size6of12 { width: 470px; }
.grid-row-col_size7of12 { width: 553px; }
.grid-row-col_size8of12 { width: 636px; }
.grid-row-col_size9of12 { width: 719px; }
.grid-row-col_size10of12 { width: 802px; }
.grid-row-col_size11of12 { width: 885px; }
.grid-row-col_size12of12 { width: 968px; }

.grid-row-col_size3of12plusHalfGut { width: 235px; } /* 221 + 14 */
.grid-row-col_size6of12plusHalfGut { width: 484px; } /* 470 + 14 */

.mix-grid-row-col_halfGutLeft { margin-left: 14px; } /* 28/2 */
.mix-grid-row-col_pushDoubleGutter { margin-left: 56px; } /* 28 + 28 */
.mix-grid-row-col_push1of12 { margin-left: 111px; } /* 55 + 28 + 28 */
.mix-grid-row-col_push2of12 { margin-left: 194px; } /* 138 + 28 + 28 */
.mix-grid-row-col_push3of12 { margin-left: 277px; } /* 221 + 28 + 28 */
.mix-grid-row-col_push4of12 { margin-left: 360px; } /* 304 + 28 + 28 */
.mix-grid-row-col_push5of12 { margin-left: 443px; } /* 387 + 28 + 28 */
.mix-grid-row-col_push6of12 { margin-left: 526px; } /* 470 + 28 + 28 */
.mix-grid-row-col_push7of12 { margin-left: 609px; } /* 553 + 28 + 28 */
.mix-grid-row-col_push8of12 { margin-left: 692px; } /* 636 + 28 + 28 */
.mix-grid-row-col_push9of12 { margin-left: 775px; } /* 719 + 28 + 28 */
.mix-grid-row-col_push10of12 { margin-left: 848px; } /*  802 + 28 + 28 */
.mix-grid-row-col_push11of12 { margin-left: 941px; } /*  885 + 28 + 28 */
.mix-grid-row-col_push12of12 { margin-left: 1024px; } /*  968 + 28 + 28 */
.mix-grid-row-col_push3of12HalfGutter { margin-left: 235px; } /* 221 + 14 */

.mix-grid-row-col_noGutter { margin-left: 0; }

.careers #phrightcolumn_0_PageTitlePanel, .careers #phrightcolumn_1_PageTitlePanel, .careers #phmaincontent_0_PageTitlePanel {
	display: none;
}
.careersWidthJobs { width: 272px; }

.mix-grid_home {
    margin-top: -64px;
    background-color: #f2fafe;
}

/* ---------------------------------------------------------------------
 Quarantine
------------------------------------------------------------------------ */

/*doc
---
title: Quarantine
name: quarantine
category: base
---

Quarantine styles applied to areas where content is dynamic and
generated by a content editor / CMS.

```html_example

<div class="quarantine">

    <h1>Heading Level 1</h1>
    <h2>Heading Level 2</h2>
    <h3>Heading Level 3</h3>
    <h4>Heading Level 4</h4>
    <h5>Heading Level 5</h5>
    <h6>Heading Level 6</h6>

    <hr />

    <p>
        Often, the first choice after deciding to start a business is deciding whether to operate the business individually or in the form of a "business entity." We are all familiar with certain types of business entities such as a corporation or partnership, but there are other types of business entities with names like "limited liability companies", "close corporations", and "limited liability partnerships". Surprisingly, one of the simplest ways to start a business is without forming a business entity. A person can always do business under his or her own name, or even a trade name, as a "sole proprietor." No matter what you do, the form you choose will have legal and tax implications which you must understand before you begin your business. While this guide can help educate you about some of the issues involved, it is always wise to have professional advice before you open the door to customers.
    </p>

    <hr />

    <img src="http://placekitten.com/200/200" alt="test" />

    <hr />

    <h4>Common Tags</h4>
    <ul>
        <li><a href="#">Anchor Tag</a></li>
        <li><i>&lt;i&gt;</i> - text in an "alternate voice", such as transliterated foreign words, technical terms, and typographically italicized text</li>
        <li><em>&lt;em&gt;</em> - text with "stress emphasis", such as something you would pronounce differently</li>
        <li><strong>&lt;strong&gt;</strong> - text with strong importance</li>
        <li><b>&lt;b&gt;</b> - "stylistically offset" text, such as keywords and typographically emboldened text</li>
    </ul>

    <h4>Less Common Tags</h4>
    <ul>
        <li><ins>&lt;ins&gt;</ins>
        <li><strike>&lt;strike&gt;</strike>
        <li><sup>&lt;sup&gt;</sup>
        <li><sub>&lt;sub&gt;</sub>
        <li><big>&lt;big&gt;</big>
        <li><small>&lt;small&gt;</small>
        <li><pre>&lt;pre&gt;</pre>
    </ul>

    <hr />

    <h4>Lists</h4>
    <ul>
        <li>This is a simple list</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi?</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, consequatur.</li>
        <li>
            <ul>
                <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi?</li>
                <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, consequatur.</li>
                <li>
                    <ul>
                        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi?</li>
                        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, consequatur.</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
    </ul>

    <ol>
        <li>This is a simple list</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi?</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, consequatur.</li>
        <li>
            <ul>
                <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi?</li>
                <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, consequatur.</li>
                <li>
                    <ul>
                        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi?</li>
                        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, consequatur.</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
    </ol>

    <hr />

    <blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto mollitia ipsum inventore vel deleniti laborum nihil iusto est quaerat rerum.</blockquote>

    <hr />

    <table>
        <tbody>
            <tr>
                <th>
                    <strong>Column One</strong>
                </th>
                <th>Column 2</th>
                <th>Column 3</th>
                <th>Column 4</th>
                <th>Column 5</th>
            </tr>
            <tr>
                <td>
                    <strong>Lorem Ipsum</strong>
                </td>
                <td>Lorem ipsum dolor</td>
                <td>XXX</td>
                <td>XXX</td>
                <td>In hac habitasse</td>
            </tr>
            <tr>
                <td>
                    <strong>Lorem Ipsum</strong>
                </td>
                <td>Lorem ipsum dolor</td>
                <td>XXX</td>
                <td>XXX</td>
                <td>In hac habitasse</td>
            </tr>
        </tbody>
    </table>

</div>

```

*/

/* ---------------------------------------------------------------------
quarantine: default
------------------------------------------------------------------------ */
.quarantine {
    font: 13px/1.23 Arial, sans-serif;
    font-weight: normal;
    font-style: normal;
    color: #000000;
}

/* ---------------------------------------------------------------------
quarantine: paragraphs
------------------------------------------------------------------------ */
.quarantine p {
    margin: 0 0 1.42857em 0;
}

/* ---------------------------------------------------------------------
quarantine: headings
------------------------------------------------------------------------ */

.quarantine h1,
.quarantine h2,
.quarantine h3,
.quarantine h4,
.quarantine h5,
.quarantine h6 {
    font-family: 'Arial Black', Gadget, sans-serif;
    color: #F95602;
    font-weight: bold;
    line-height: 1;
    text-transform: lowercase;
    margin-bottom: 12px;
}

.quarantine h1 {
    font-size: 56px;
}

.quarantine h2 {
    font-size: 36px;
}

.quarantine h3 {
    font-size: 18px; /* 18px */
    margin-bottom: 6px;
}

.quarantine h4 {
    margin-bottom: 6px;
}

.quarantine h5 {
    margin-bottom: 6px;
}

.quarantine h6 {
    margin-bottom: 6px;
}

.quarantine .hdg_4 {
    font-size: 18px;
    margin-bottom: 4px;
}

/* ---------------------------------------------------------------------
quarantine: sections
------------------------------------------------------------------------ */
.quarantine blockquote {
    color: #f95602;
    font-style: italic;
}

/* ---------------------------------------------------------------------
quarantine: anchors
------------------------------------------------------------------------ */
.quarantine a:link {
    color: #ce1126;
    text-decoration: none;
}

.quarantine a:visited {
    color: #d24622;
}

.quarantine a:focus,
.quarantine a:hover {
    color: #;
}

.quarantine a:active {

}

/* ---------------------------------------------------------------------
quarantine: text formatting
------------------------------------------------------------------------ */
.quarantine strong,
.quarantine b {
    font-weight: bold;
}

.quarantine em,
.quarantine i {
    font-style: italic;
}

.quarantine del,
.quarantine strike,
.quarantine s {
    text-decoration: line-through;
}

.quarantine u,
.quarantine ins {
    text-decoration: underline;
}

.quarantine sup {
    vertical-align: super;
    font-size: smaller;
}

.quarantine sub {
    vertical-align: sub;
    font-size: smaller;
}

.quarantine big {
    font-size: larger;
}

.quarantine small {
    font-size: smaller;
}

.quarantine abbr,
.quarantine acronym {
    border-bottom: dotted 1px;
}

.quarantine cite,
.quarantine dfn {
    font-style: italic;
}

.quarantine q {
    font-style: italic;
}

.quarantine q::before {
    content: open-quote;
}

.quarantine q::after  {
    content: close-quote;
}

.quarantine q:lang(en) {
    quotes: "\201C" "\201D" "\2018" "\2019";
}

.quarantine bdo {
    direction: rtl;
}

.quarantine blink {
    text-decoration: blink;
}

/* ---------------------------------------------------------------------
quarantine: computer output
------------------------------------------------------------------------ */
.quarantine pre {
    margin: 0 0 12px 0;
    font-family: "Lucida Console", Monaco, monospace;
    white-space: normal;
}

.quarantine code,
.quarantine samp,
.quarantine tt,
.quarantine kbd {
    font-family: "Lucida Console", Monaco, monospace;
}

.quarantine var {
    font-style: italic;
}

/* ---------------------------------------------------------------------
quarantine: lists
------------------------------------------------------------------------ */
.quarantine ul,
.quarantine ol,
.quarantine dl {
    margin-top: 0;
    margin-bottom: 13px;
}

.quarantine ul {
    list-style-type: disc;
    margin: 0 0 13px 0;
}
.prIndex .quarantine ul {list-style-type:none;}

.quarantine ol {
    list-style-type: decimal;
    margin: 0 0 13px 0;
}

.quarantine dt {
    font-weight: bold;
}

.quarantine li,
.quarantine dd {
    font-size: 13px;
    line-height: 1.54;
    margin: 0 0 0 28px;
}

/* nested lists have no top/bottom margins */
.quarantine ul ul,
.quarantine ul ol,
.quarantine ul dl,
.quarantine ol ul,
.quarantine ol ol,
.quarantine ol dl,
.quarantine dl ul,
.quarantine dl ol,
.quarantine dl dl {
    margin-top: 0;
    margin-bottom: 0;
}

/* 2 deep unordered lists use a circle */
.quarantine ol ul,
.quarantine ul ul {
    list-style-type: circle;
}

/* 3 deep (or more) unordered lists use a square */
.quarantine ol ol ul,
.quarantine ol ul ul,
.quarantine ul ol ul,
.quarantine ul ul ul {
    list-style-type: square;
}

/* ---------------------------------------------------------------------
quarantine: tables
------------------------------------------------------------------------ */
.quarantine table {
    margin: 0 0 13px 0;
    width: 100%;
    border: 1px solid #f5f5f5;
    font-size: 13px;
    text-align: center;
}

.quarantine colgroup {

}

.quarantine col {

}

.quarantine caption {
    font-size: smaller;
}

.quarantine tr {
    vertical-align: middle;
}

.quarantine tbody {
    vertical-align: middle;
}

.quarantine thead {
    vertical-align: middle;
}

.quarantine tfoot {
    vertical-align: middle;
}

.quarantine td {
    vertical-align: inherit;
    text-align: inherit;
    padding: 20px 0;
}

.quarantine td + td {
    border-left: 1px solid #e1d9a2;
}

.quarantine tr + tr {
    border-top: 1px solid #e2dfc6;
}

.quarantine th {
    vertical-align: inherit;
    text-align: inherit;
    background-color: #f95602;
    color: #ffffff;
    border-spacing: 0;
    padding: 10px 0 12px;
}

.quarantine tr:nth-child(even) td {
    background-color: #f5f5f5;
}

/* ---------------------------------------------------------------------
quarantine: horizontal rule
------------------------------------------------------------------------ */
.quarantine hr {
    margin: 0 0 13px 0;
    background: #666666;
    color: #666666;
    height: 1px;
    border: none;
    line-height: 1px;
    font-size: 1px;
}

/* ---------------------------------------------------------------------
quarantine: media
------------------------------------------------------------------------ */
.quarantine img,
.quarantine video,
.quarantine audio {
    max-width: 100% !important;
    margin-bottom: 12px;
}

.pressrelease .quarantine img {margin-bottom:0;}

/* ---------------------------------------------------------------------
quarantine: undefined elements
------------------------------------------------------------------------ */
.quarantine html,
.quarantine head,
.quarantine body,
.quarantine title,
.quarantine meta,
.quarantine link,
.quarantine style,
.quarantine script,
.quarantine noscript,
.quarantine base,
.quarantine basefont,
.quarantine div,
.quarantine span,
.quarantine header,
.quarantine hgroup,
.quarantine footer,
.quarantine main,
.quarantine section,
.quarantine article,
.quarantine aside,
.quarantine nav,
.quarantine figcaption,
.quarantine figure,
.quarantine menu,
.quarantine command,
.quarantine summary,
.quarantine details,
.quarantine canvas
.quarantine applet,
.quarantine object,
.quarantine embed,
.quarantine source,
.quarantine param,
.quarantine track,
.quarantine map,
.quarantine area
.quarantine iframe,
.quarantine frame,
.quarantine frameset,
.quarantine noframes,
.quarantine fieldset,
.quarantine legend,
.quarantine form,
.quarantine label,
.quarantine isindex,
.quarantine input,
.quarantine select,
.quarantine option,
.quarantine optgroup,
.quarantine textarea,
.quarantine button,
.quarantine datalist,
.quarantine meter,
.quarantine progress,
.quarantine output,
.quarantine keygen,
.quarantine ruby,
.quarantine rt,
.quarantine rp,
.quarantine mark,
.quarantine time,
.quarantine wbr,
.quarantine br,
.quarantine dir,
.quarantine font,
.quarantine center {
    /* nil */
}

/* ---------------------------------------------------------------------
quarantine: Mondelez Exceptions
------------------------------------------------------------------------ */
/*.quarantine*/

/* Image UL's dont' have list-styles */

.quarantine .vList_nmbr_icon,
.quarantine .vList_nmbr_orange {
    list-style: none;
}


/* ---------------------------------------------------------------------
Content Container Styles
------------------------------------------------------------------------ */

.contentContainer {
    position: relative;
    width: 1024px;
    margin: 0 auto;
}

/* ---------------------------------------------------------------------
High Contrast
------------------------------------------------------------------------ */
.hghContrast .container {
    background-color: #000000;
}

/* ---------------------------------------------------------------------
Heading Styles
------------------------------------------------------------------------ */

/*doc

---

title: Headings
name: headings
category: Base

---

Heading styles, to be applied to heading tags: h1, h2, h3, h4, h5, h6.

```html_example
<h1>Headings</h1>
<h1 class="hdg mix-hdg_lower">we create delicious moments of joy</h1>
<h1 class="hdg hdg_1 mix-hdg_orange mix-hdg_lower">our founders</h1>
<h1 class="hdg hdg_2 mix-hdg_red mix-hdg_lower">in the news</h1>
<h1 class="hdg hdg_2 mix-hdg_red mix-hdg_lower mix-hdg_icon mix-hdg_icon_red">in the news</h1>
<h1 class="hdg hdg_2-1 mix-hdg_aqua mix-hdg_lower">what's new!</h1>
<h1 class="hdg hdg_2-1 mix-hdg_yellow mix-hdg_lower mix-hdg_icon mix-hdg_icon_yellow">what's new!</h1>
<h2 class="hdg hdg_3 mix-hdg_red mix-hdg_lower">investors menu</h2>
<h2 class="hdg hdg_4 mix-hdg_blue mix-hdg_lower">Heading For Content</h2>
<h3 class="hdg hdg_5 mix-hdg_purple mix-hdg_lower">mondelez international to present at...</h3>
<h3 class="hdg hdg_6 mix-hdg_green mix-hdg_lower">chips ahoy!</h3>

<div class="hghContrast">
    <h1 class="hdg mix-hdg_lower">we create delicious moments of joy</h1>
</div>
```

*/



.hdg {
    display: block;
    color: #ffffff;
    font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;
    font-size: 56px;
    line-height: 1.2;
    text-transform: lowercase;
}

.hdg_1 {
    font-size: 36px;
    margin-bottom: 40px;
}

.hdg_2 {
    font-size: 43px;
    margin-bottom: 10px;
}

.hdg_3 {
    font-size: 28px;
    line-height: 1.3;
    margin-bottom: 20px;
}

.hdg_3sm {
    font-size: 24px;
    line-height: 1.25; /* 30/24 */
}

.hdg_4 {
    font-size: 18px;
    margin-bottom: 8px;
}

.hdg_5 {
    font-size: 15px;
}

.hdg_6 {
    font-size: 15px;
    font-family: "Arial", "Helvetica", sans-serif;
    font-weight: bold;
}

.hdg_7 {
    font-size: 13px;
    line-height: 1.56;
}

.mix-hdg_top {
    margin-top: 28px;
}

.mix-hdg_yellow {
    color: #fcd116;
}

.mix-hdg_red {
    color: #ce1126;
}

.mix-hdg_orange {
    color: #f95602;
}

.mix-hdg_green {
    color:#bac405;
}

.mix-hdg_purple {
    color: #4f2170;
}

.mix-hdg_aqua {
    color: #00b7c6;
}

.mix-hdg_blue {
    color: #0036a3;
}

.mix-hdg_bold {
    font-weight: bold;
}

.mix-hdg_lower {
    text-transform: lowercase;
}

.mix-hdg_noMargin {
    margin: 0;
}

.mix-hdg_icon:after {
    content: " ";
    display: inline-block;
    width: 46px;
    height: 31px;
    margin-left: 7px;
    vartical-align: center;
    background-image: url('../../images/tear-drop-sprite.png');
    background-repeat: no-repeat;
}

.mix-hdg_icon_red:after {
    background-position: 0 0;
}

.mix-hdg_icon_yellow:after {
    background-position: -51px 0;
}

.mix-hdg_whatsNew {
    margin-bottom: 30px;
}

.mix-hdg_3-hroBnr {
    font-weight: normal;
    line-height: 1.07142857142857;
}

.mix-hdg_subnav {
    margin-left: 27px;
}

.mix-hdg_hroCarousel {
    line-height: 1;
    margin-bottom: 17px;
}

.mix-hdg_isNormalCase {
    text-transform: none;
}

.mix-hdg_brand {
    text-transform: none;
    font-style: italic;
}

.mix-hdg_hasSuper {
    line-height: .75;
}

/*************************
High Contrast
*************************/
.hghContrast .hdg {
    color: #000000;
}

.hghContrast .mix-hdg_yellow {
    color: #fcd116;
}

.hghContrast .mix-hdg_red {
    color: #ce1126;
}

.hghContrast .mix-hdg_orange {
    color: #f95602;
}

.hghContrast .mix-hdg_green {
    color:#bac405;
}

.hghContrast .mix-hdg_purple {
    color: #4f2170;
}

.hghContrast .mix-hdg_aqua {
    color: #00b7c6;
}

.hghContrast .mix-hdg_blue {
    color: #0036a3;
}

/* ---------------------------------------------------------------------
Box Styles
------------------------------------------------------------------------ */

/*doc

---

title: Box
name: box
category: Modules

---

A box with rounded corners, a light blue stroke, light blue drop shadow, and white background

```html_example

    <div class="grid">
        <div class="grid-row">
            <div class="grid-row-col grid-row-col_size3of12">
                <div class="box">
                    <div class="box-content">
                        <p>
                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna.
                        </p>
                    </div>
                </div>
            </div>
            <div class="grid-row-col grid-row-col_size3of12">
                <div class="hghContrast">
                    <div class="box">
                        <div class="box-content">
                            <p>
                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
```

*/

.js-facebookResize:after{
    clear: both;
}

.box {
    display: block;
    background: #ffffff;
    margin-bottom: 15px;
    border: 1px solid #b2ebee;
    -webkit-box-shadow: 0 3px #b2ebee;
    -moz-box-shadow: 0 3px #b2ebee;
    -ms-box-shadow: 0 3px #b2ebee;
    -o-box-shadow: 0 3px #b2ebee;
    box-shadow: 0 3px #b2ebee;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    *zoom: 1; /* clear for lte ie7 */
}
/*------------------BRANDS SLIDER*/

.js-rightColumn{
    height: auto;
}



.box_brands{
    height: 130px;
    -webkit-border-radius: 0px 3px 3px 3px;
    -moz-border-radius: 0px 3px 3px 3px;
    -o-border-radius: 0px 3px 3px 3px;
    border-radius: 0px 3px 3px 3px;
}
#slider_brands {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  margin-bottom:25px;
}
#slider_brands .slider {
  margin: 0;
  padding: 0;
  height: 130px;
  width: 100%;
  list-style: none;
  overflow:hidden;
}
#slider_brands .slick-list {width:830px;margin-left:70px !important;}
#slider_brands .slick-slide {
  position: relative;
  display: block;
  float: left;
  margin: 35px 10px 0 0;
  padding: 0;
  width: 100px;
  height: auto;
  text-align: center;
  
}
#slider_brands .slick-slide a{
    width: 90px;
    height: 60px;
    float: left;
    margin:0 5px 0 5px; 
}
#slider_brands .slick-slide a img{
    width: 100%;
}

#slider_brands .slick-slide a:hover{
    opacity: .8;
}

.slick-prev, .slick-next {
  position: absolute;
  top: 55px;
  height: 40px;
  width: 40px;
  z-index: 999;
  display: block;
  background: #4e246e !important;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 18px;
  border:none;
  cursor: pointer;

}
.slick-prev {left:0;background: url(../../uploads/home/brands_left_arrow.png) 0 0 !important; text-indent:-9999999px;}
.slick-next {right:0;background: url(../../uploads/home/brands_right_arrow.png) 0 0 !important; text-indent:-9999999px;}
.slick-prev:hover, .slick-next:hover {
  opacity: .8;
}

/*a.bx-prev, a.bx-next {
  position: absolute;
  top: 33px;
  height: 40px;
  width: 40px;
  z-index: 999;
  display: block;
  background: #4e246e;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 18px;
  cursor: pointer;

}

a.bx-prev:hover, a.bx-next:hover {
  opacity: .8;
}
.bx-wrapper .bx-next:hover {background-position: 0 0;}

.bx-wrapper .bx-viewport {
	border:none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
	box-shadow:none;}
.bx-wrapper .bx-loading {background:none; min-height:inherit; position:static;}
.bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto {display:none;}
.bx-wrapper .bx-controls-direction a {width:40px;height:40px;}
.bx-wrapper .bx-prev {left:-50px;background: url(../../uploads/home/brands_left_arrow.png) 0 0;}
.bx-wrapper .bx-next {right:-50px;background: url(../../uploads/home/brands_right_arrow.png) 0 0;}*/



/* Box Borders */
.box:hover {
    text-decoration: none;
}

.box:before,
.box:after {
    content: " ";
    display: table;
}

.box:after {
    clear: both;
}

.box_fltLft {
    float: left;
    margin: 0 12px 12px 0;
}

.box_whatsNew {
    margin-top: -15px;
}

.box_fltRgt {
    float: right;
    margin: 0 0 12px 12px;
}

.box_icnBg {
    background: #ffffff url(../../images/box-bg.png) 0 0 no-repeat;
}

.box_noMargin {
    margin-bottom: 3px; /* 3px keeps the box-shadow intact */
}

.box-content {
    position: relative; /* Needed for child element absolute positioning, ex: heading banner; */
    padding: 10px;
}

/*PROGRAMS AND PARTNERS BOX ON WELL BEING PAGE - ADD PADDING*/
.well-being-box{
    padding: 30px 10px;
}

.box-content_sm {
    padding: 8px;
}

.box-content_hdgBnr {
    min-height: 80px;
}

.box-content-hd {
    padding: 10px 15px;
}

.box-content-ft {
    width: 100%;
    overflow: hidden;
    text-align: center;
}

.box-content-ft_stockTicker {
    /*margin-top: -20px;*/
}

.box-content-ft-content {
    float: right;
}

.box-content-ft-content_news {
    margin: 10px 16px 10px 0;
}

.box-content_wide {
    padding: 26px;
}

.box-content:before,
.box-content:after {
    content: ' ';
    display: table;
}

.box-content:after {
    clear: both;
}

.box-content img {
    max-width: 100%;
}

.box_isActive {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
}

/* ---------------------------------------------------------------------
Box Styles - High Contrast
------------------------------------------------------------------------ */
.hghContrast .box {
    color: #ffffff;
    background-color: #151515;
    border-color: #292929;
    -webkit-box-shadow: 0 3px #292929;
    -moz-box-shadow: 0 3px #292929;
    -ms-box-shadow: 0 3px #292929;
    -o-box-shadow: 0 3px #292929;
    box-shadow: 0 3px #292929;
}

/* ---------------------------------------------------------------------
Breadcrumb Styles
------------------------------------------------------------------------ */

/*doc

---

title: Breadcrumb
name: breadcrumb
category: Modules

---

The breadcrumb list for interior pages. Note: breadcrumb HTML markup is generated by SWEET.

```html_example
<div class="breadcrumbs">
    <ul>
        <li>
            <a id="phheader_1_BreadcrumbsRepeater_ctl01_LinkHyperlink" href="/">Home</a>
         </li>
        <li class="separator">&gt;</li>
        <li>
            <a id="phheader_1_BreadcrumbsRepeater_ctl01_LinkHyperlink" href="/">Careers</a>
        </li>
        <li class="separator">&gt;</li>
        <li>
            <a id="phheader_1_BreadcrumbsRepeater_ctl01_LinkHyperlink" href="/">What It's Like to Work Here</a>
        </li>
    </ul>
</div>

<div class="hghContrast">
    <div class="breadcrumbs">
        <ul>
            <li>
                <a id="phheader_1_BreadcrumbsRepeater_ctl01_LinkHyperlink" href="/">Home</a>
             </li>
            <li class="separator">&gt;</li>
            <li>
                <a id="phheader_1_BreadcrumbsRepeater_ctl01_LinkHyperlink" href="/">Careers</a>
            </li>
            <li class="separator">&gt;</li>
            <li>
                <a id="phheader_1_BreadcrumbsRepeater_ctl01_LinkHyperlink" href="/">What It's Like to Work Here</a>
            </li>
        </ul>
    </div>
</div>
```

*/

.breadcrumbs {
    overflow: hidden;
    margin: 0 auto 5px auto;
    width: 1024px; /* Must have layout styles since SWEET uses it in top level, and there's no way to wrap html around it */
}

.breadcrumbs > * {
    float: left;
    margin-left: 28px;
}

.breadcrumbs > * > * {
    float: left;
    color: #000000;
    font: 12px/1.5 Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.breadcrumbs > * > * + * {
    margin-left: 6px;
}

/* Hide the separator element that SWEET auto inserts */
.breadcrumbs > * > .separator {
    display: none;
}

.breadcrumbs > * > * > *,
.breadcrumbs > * > * > *:visited {
    color: #5f5f5f;
}

.breadcrumbs > * > *:last-child > *,
.breadcrumbs > * > *:last-child > *:visited {
    color: #000000;
}

/*
For :before to work in IE8, a <!DOCTYPE> must be declared.
*/
.breadcrumbs > * > * + *:before {
    content: "/";
    margin-right: 3px;
}

/* ---------------------------------------------------------------------
High Contrast
------------------------------------------------------------------------ */

.hghContrast .breadcrumbs > * > * {
    color: #f4f4f4;
}
.hghContrast .breadcrumbs > * > * > *,
.hghContrast .breadcrumbs > * > * > *:visited {
    color: #999999;
}

.hghContrast .breadcrumbs > * > *:last-child > *,
.hghContrast .breadcrumbs > * > *:last-child > *:visited {
    color: #e5e5e5;
}

.hghContrast .breadcrumbs > * > * + *:before {
    color: #e5e5e5;
}

/* ---------------------------------------------------------------------
Button Styles
------------------------------------------------------------------------ */

/*doc

---

title: Button
name: button
category: Base

---

Button styles: These can be applied to any tag, but works best with a and button tags.

```html_example

<div class="grid">
    <div class="grid-row">
        <div class="grid-row-col div-row-col_size4of12">
            <ul class="vList">
                <li><a href="#" class="btn">view all news</a></li>
                <li><a href="#" class="btn mix-btn_lrg">view all news</a></li>
                <li><a href="#" class="btn mix-btn_fit">view all news</a></li>

                <li><a href="#" class="btn btn_blue">view all news</a></li>
                <li><a href="#" class="btn btn_blue mix-btn_lrg">Watch</a></li>
                <li><a href="#" class="btn btn_blue mix-btn_fit">Watch</a></li>

                <li><a href="#" class="btn btn_orange">find a job with us</a></li>
                <li><a href="#" class="btn btn_orange mix-btn_lrg">find a job with us</a></li>
                <li><a href="#" class="btn btn_orange mix-btn_fit">find a job with us</a></li>

                <li><a href="#" class="btn btn_purple">watch</a></li>
                <li><a href="#" class="btn btn_purple mix-btn_lrg">watch</a></li>
                <li><a href="#" class="btn btn_purple mix-btn_fit">watch</a></li>

                <li><a href="#" class="btn btn_whiteYellow">learn more</a></li>
                <li><a href="#" class="btn btn_whiteYellow mix-btn_lrg">learn more</a></li>
                <li><a href="#" class="btn btn_whiteYellow mix-btn_fit">learn more</a></li>

                <li><a href="#" class="btn btn_whiteOrange">watch</a></li>
                <li><a href="#" class="btn btn_whiteOrange mix-btn_lrg">watch</a></li>
                <li><a href="#" class="btn btn_whiteOrange mix-btn_fit">watch</a></li>

            </ul>
        </div>

        <div class="grid-row-col div-row-col_size4of12">
            <div class="hghContrast">
                <ul class="vList">
                    <li><a href="#" class="btn">view all news</a></li>
                    <li><a href="#" class="btn mix-btn_lrg">view all news</a></li>
                    <li><a href="#" class="btn mix-btn_fit">view all news</a></li>

                    <li><a href="#" class="btn btn_blue">view all news</a></li>
                    <li><a href="#" class="btn btn_blue mix-btn_lrg">Watch</a></li>
                    <li><a href="#" class="btn btn_blue mix-btn_fit">Watch</a></li>

                    <li><a href="#" class="btn btn_orange">find a job with us</a></li>
                    <li><a href="#" class="btn btn_orange mix-btn_lrg">find a job with us</a></li>
                    <li><a href="#" class="btn btn_orange mix-btn_fit">find a job with us</a></li>

                    <li><a href="#" class="btn btn_purple">watch</a></li>
                    <li><a href="#" class="btn btn_purple mix-btn_lrg">watch</a></li>
                    <li><a href="#" class="btn btn_purple mix-btn_fit">watch</a></li>

                    <li><a href="#" class="btn btn_whiteYellow">learn more</a></li>
                    <li><a href="#" class="btn btn_whiteYellow mix-btn_lrg">learn more</a></li>
                    <li><a href="#" class="btn btn_whiteYellow mix-btn_fit">learn more</a></li>

                    <li><a href="#" class="btn btn_whiteOrange">watch</a></li>
                    <li><a href="#" class="btn btn_whiteOrange mix-btn_lrg">watch</a></li>
                    <li><a href="#" class="btn btn_whiteOrange mix-btn_fit">watch</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

```

*/

.btn, .filter-button {
    display: inline-block;
    margin: 0 0 3px 0;
    padding: 0px 14px;
    color: #ffffff;
    background-color: #d24622;
    font-size: 12px;
    font-weight: bold;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    line-height: 1.8;
    border: 1px solid #ad0014;
    -moz-box-shadow: 0 3px #ad0014;
    -webkit-box-shadow: 0 3px #ad0014;
    box-shadow: 0 3px #ad0014;
    background-color: #ce1126;
    text-align: center;
    text-transform: lowercase;
    cursor: pointer;
    text-decoration: none;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    -webkit-transition: background 0.25s ease-in-out;
    -moz-transition: background  0.25s ease-in-out;
    -ms-transition: background 0.25s ease-in-out;
    -o-transition: background 0.25s ease-in-out;
    transition: background 0.25s ease-in-out;
}

/* use the before pseudo to push down the text one pixel on click*/
.btn:before, .filter-button:before {
    content: " ";
    display: block;
    width: 1px;
    height: 0px;
}

.btn:active:before, .filter-button:active:before {
    content: " ";
    display: block;
    width: 1px;
    height: 1px;
}

.btn:link,
.btn:visited,
.filter-button:link,
.filter-button:visited {
    color: #ffffff;
}

.btn:hover, .filter-button:hover {
    background: #ee3146;
}

.btn:active, .filter-button:active {
    text-decoration: none;
    -moz-box-shadow: 0 0px #ad0014, inset 0 1px #ad0014;
    -webkit-box-shadow: 0 0px #ad0014, inset 0 1px #ad0014;
    box-shadow: 0 0px #ad0014, inset 0 1px #ad0014;
    margin-bottom: -1px; /* pull the button down to counteract the added pseudo height */
    margin-top: 3px;    /* push the button down to counteract the removal of the bottom box-shadow */
}

.btn_blue, .filter-button {
    border: 1px solid #00a2ac;
    background-color: #00b7c6;
    -moz-box-shadow: 0 3px #00a2ac;
    -webkit-box-shadow: 0 3px #00a2ac;
    box-shadow: 0 3px #00a2ac;
}

.btn_blue:hover, .filter-button:hover {
    background-color: #10c7d6;
}

.btn_blue:active, .filter-button:active {
    -moz-box-shadow: 0 1px #00a2ac inset;
    -webkit-box-shadow: 0 1px #00a2ac inset;
    box-shadow: 0 1px #00a2ac inset;
}

.btn_orange {
    padding: 0px 13px;
    border: 1px solid #af3b1d;
    -moz-box-shadow: 0 3px #af3b1d;
    -webkit-box-shadow: 0 3px #af3b1d;
    box-shadow: 0 3px #af3b1d;
    background-color: #f95602;
}

.btn_orange:hover {
    background-color: #ff7622;
}

.btn_orange:active {
    -moz-box-shadow: 0 1px #af3b1d inset;
    -webkit-box-shadow: 0 1px #af3b1d inset;
    box-shadow: 0 1px #af3b1d inset;
}

.btn_purple {
    padding: 0px 13px;
    border: 1px solid #311853;
    -moz-box-shadow: 0 3px #311853;
    -webkit-box-shadow: 0 3px #311853;
    box-shadow: 0 3px #311853;
    background-color: #4f2170;
}

.btn_purple:active {
    -moz-box-shadow: 0 1px #311853 inset;
    -webkit-box-shadow: 0 1px #311853 inset;
    box-shadow: 0 1px #311853 inset;
}

.btn_purple:hover {
    background-color: #6f4190;
}

.btn_whiteYellow {
    border: 1px solid #f3ab38;
    -moz-box-shadow: 0 3px #f3ab38;
    -webkit-box-shadow: 0 3px #f3ab38;
    box-shadow: 0 3px #f3ab38;
    color: #f3ab38;
    background-color: #ffffff;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -o-border-radius: 6px;
    border-radius: 6px;
}

.btn_whiteYellow:active {
    -moz-box-shadow: 0 1px #f3ab38 inset;
    -webkit-box-shadow: 0 1px #f3ab38 inset;
    box-shadow: 0 1px #f3ab38 inset;
}

.btn_whiteYellow:link,
.btn_whiteYellow:visited {
    color: #f3ab38;
}

.btn_whiteYellow:hover {
    background-color: #fffae0;
}

.btn_whiteOrange {
    border: 1px solid #da1d12;
    -moz-box-shadow: 0 3px #da1d12;
    -webkit-box-shadow: 0 3px #da1d12;
    box-shadow: 0 3px #da1d12;
    color: #da1d12;
    background-color: #ffffff;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -o-border-radius: 6px;
    border-radius: 6px;
}

.btn_whiteOrange:hover {
    border: 1px solid #f3ab38;
    -moz-box-shadow: 0 3px #f3ab38;
    -webkit-box-shadow: 0 3px #f3ab38;
    box-shadow: 0 3px #f3ab38;
    color: #f3ab38;
    background-color: #ffffff;
}

.btn_whiteOrange:active {
    -moz-box-shadow: 0 1px #da1d12 inset;
    -webkit-box-shadow: 0 1px #da1d12 inset;
    box-shadow: 0 1px #da1d12 inset;
    border: 1px solid #da1d12;
}

.btn_whiteOrange:link,
.btn_whiteOrange:visited {
    color: #f95602;
}
.btn_red {
    padding: 0px 13px;
    border: 1px solid #6b010c;
    -moz-box-shadow: 0 3px #6b010c;
    -webkit-box-shadow: 0 3px #6b010c;
    box-shadow: 0 3px #6b010c;
    background-color: #c0091b;
}
.btn_red.mix-btn_fit {line-height:1.5;}
.btn_red:active {
    -moz-box-shadow: 0 1px #6b010c inset;
    -webkit-box-shadow: 0 1px #6b010c inset;
    box-shadow: 0 1px #6b010c inset;
}

.btn_red:hover {
    background-color: #e50b20;
}


.btn_marginBot {
    margin-bottom: 14px;
}

.hghContrast .btn {
    color: #000000;
}

.mix-btn_lrg {
    font: 19px "Arial Black", "Arial Bold", Gadget, sans-serif;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    border-radius: 6px;
}

.mix-btn_fit {
    font: 20px/2.4 "Arial Bold", Gadget, sans-serif;
    display: block;
}

.mix-btn_fit:active {
    margin-top: 0px;
}

.mix-btn_carousel {
    position: absolute;
    top: 340px;
    padding: 8px 20px;
    -webkit-transition: all 1s ease-in-out, background 0.25s ease-in-out, margin 0.001s;
    -moz-transition: all 1s ease-in-out, background 0.25s ease-in-out, margin 0.001s;
    -ms-transition: all 1s ease-in-out, background 0.25s ease-in-out, margin 0.001s;
    -o-transition: all 1s ease-in-out, background 0.25s ease-in-out, margin 0.001s;
    transition: all 1s ease-in-out, background 0.25s ease-in-out, margin 0.001s;
    background-color: #ffffff;
}

.mix-btn_contactForm {
    float: right;
    margin-right: 71px;
}
/*.mix-btn_careers {float: right;width: 60%;padding: 12px;}
.mix-btn_careers .mix-btn_fit {font: 20px/2 "Arial Bold", Gadget, sans-serif;position: relative;right: 25%;} 
*/
.headerExtra_isYellow .mix-btn_carousel {
    border: 1px solid #f3ab38;
    -moz-box-shadow: 0 3px #f3ab38;
    -webkit-box-shadow: 0 3px #f3ab38;
    box-shadow: 0 3px #f3ab38;
    color: #f3ab38;
}

.headerExtra_isYellow .mix-btn_carousel:hover {
    background-color: #fffae0;
}

.headerExtra_isYellow .mix-btn_carousel:active {
    -moz-box-shadow: inset 0 1px #f3ab38;
    -webkit-box-shadow: inset 0 1px #f3ab38;
    box-shadow: inset 0 1px #f3ab38;
}

.headerExtra_isRed .mix-btn_carousel {
    border: 1px solid #bf091b;
    -moz-box-shadow: 0 3px #bf091b;
    -webkit-box-shadow: 0 3px #bf091b;
    box-shadow: 0 3px #bf091b;
    color: #bf091b;
}

.headerExtra_isRed .mix-btn_carousel:hover {
    background-color: #ffeeee;
}

.headerExtra_isRed .mix-btn_carousel:active {
    -moz-box-shadow: inset 0 1px #bf091b;
    -webkit-box-shadow: inset 0 1px #bf091b;
    box-shadow: inset 0 1px #bf091b;
}

.headerExtra_isGreen .mix-btn_carousel {
    border: 1px solid #9fa446;
    -moz-box-shadow: 0 3px #9fa446;
    -webkit-box-shadow: 0 3px #9fa446;
    box-shadow: 0 3px #9fa446;
    color: #9fa446;
}

.headerExtra_isGreen .mix-btn_carousel:hover {
    background-color: #eeffee;
}

.headerExtra_isGreen .mix-btn_carousel:active {
    -moz-box-shadow: inset 0 1px #9fa446;
    -webkit-box-shadow: inset 0 1px #9fa446;
    box-shadow: inset 0 1px #9fa446;
}

.headerExtra_isOrange .mix-btn_carousel {
    border: 1px solid #da1d12;
    -moz-box-shadow: 0 3px #da1d12;
    -webkit-box-shadow: 0 3px #da1d12;
    box-shadow: 0 3px #da1d12;
    color: #da1d12;
}

.headerExtra_isOrange .mix-btn_carousel:hover {
    background-color: #ffeedd;
}

.headerExtra_isOrange .mix-btn_carousel:active {
    -moz-box-shadow: inset 0 1px #da1d12;
    -webkit-box-shadow: inset 0 1px #da1d12;
    box-shadow: inset 0 1px #da1d12;
}

.headerExtra_isAqua .mix-btn_carousel {
    border: 1px solid #018b9b;
    -moz-box-shadow: 0 3px #018b9b;
    -webkit-box-shadow: 0 3px #018b9b;
    box-shadow: 0 3px #018b9b;
    color: #018b9b;
}

.headerExtra_isAqua .mix-btn_carousel:hover {
    background-color: #ddeeff;
}

.headerExtra_isAqua .mix-btn_carousel:active {
    -moz-box-shadow: inset 0 1px #018b9b;
    -webkit-box-shadow: inset 0 1px #018b9b;
    box-shadow: inset 0 1px #018b9b;
}

/*
Gallery Button
*/
.galleryDwnldBtn {
    display: inline-block;
    padding:  12px;
    width: 14px;
    height: 13px;
    background: url('../../images/download.png') no-repeat 12px 12px;
    text-indent: -9999px;
    border: 1px solid #e3f3f5;
}

/*
Accessibility Button
*/
.accessibilityBtn {
    position: relative;
    margin-left: 10px;
    padding: 8px 12px;
    font-weight: bold;
    font-size: 16px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    color: #ffffff;
    transition: background 0.25s ease-in-out;
}

.accessibilityBtn:hover {
    text-decoration: none;
}

.accessibilityBtn_md {
    padding: 6px 14px;
    font-size: 26px;
}

.accessibilityBtn_lrg {
    padding: 5px 16px;
    font-size: 34px;
}

.accessibilityBtn_drk {
    background-color: #333333;
    border: 1px solid #000000;
    -webkit-box-shadow: 0 4px #000000, 0 5px 3px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 4px #000000, 0 5px 3px rgba(0,0,0,0.5);
    -ms-box-shadow: 0 4px #000000, 0 5px 3px rgba(0,0,0,0.5);
    -o-box-shadow: 0 4px #000000, 0 5px 3px rgba(0,0,0,0.5);
    box-shadow: 0 4px #000000, 0 5px 3px rgba(0,0,0,0.5);
}

.accessibilityBtn_lght {
    padding: 8px 12px;
    border: 1px solid #999999;
    background-color: #ffffff;
    color: #333333;
    -webkit-box-shadow: 0 4px #999999, 0 5px 3px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 4px #999999, 0 5px 3px rgba(0,0,0,0.5);
    -ms-box-shadow: 0 4px #999999, 0 5px 3px rgba(0,0,0,0.5);
    -o-box-shadow: 0 4px #999999, 0 5px 3px rgba(0,0,0,0.5);
    box-shadow: 0 4px #999999, 0 5px 3px rgba(0,0,0,0.5);
}

.accessibilityBtn_drk:hover {
    background-color: #444444;
}

.accessibilityBtn_lght:hover {
    background-color: #f0f0f0;
}

.accessibilityBtn_txt {
    -webkit-box-shadow: 0 4px #af3b1d, 0 5px 3px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 4px #af3b1d, 0 5px 3px rgba(0,0,0,0.5);
    -ms-box-shadow: 0 4px #af3b1d, 0 5px 3px rgba(0,0,0,0.5);
    -o-box-shadow: 0 4px #af3b1d, 0 5px 3px rgba(0,0,0,0.5);
    box-shadow: 0 4px #af3b1d, 0 5px 3px rgba(0,0,0,0.5);
    border: 1px solid #ba3f20;
    background-color: #d24622;
}

.accessibilityBtn_txt:hover {
    background-color: #e25632;
}

.accessibilityBtn_contrast_isActive,
.accessibilityBtn_lght:active,
.accessibilityBtn_drk:active {
    -webkit-box-shadow: 0 0 #999999, inset 0 1px 1px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 0 #999999, inset 0 1px 1px rgba(0,0,0,0.5);
    -ms-box-shadow: 0 0 #999999, inset 0 1px 1px rgba(0,0,0,0.5);
    -o-box-shadow: 0 0 #999999, inset 0 1px 1px rgba(0,0,0,0.5);
    box-shadow: 0 0 #999999, inset 0 1px 1px rgba(0,0,0,0.5);
    top: 3px;
}

.accessibilityBtn_txtSize_isActive,
.accessibilityBtn_txt:active {
    -webkit-box-shadow: 0 0 #af3b1d, inset 0 1px 1px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 0 #af3b1d, inset 0 1px 1px rgba(0,0,0,0.5);
    -ms-box-shadow: 0 0 #af3b1d, inset 0 1px 1px rgba(0,0,0,0.5);
    -o-box-shadow: 0 #af3b1d, inset 0 1px 1px rgba(0,0,0,0.5);
    box-shadow: 0 0 #af3b1d, inset 0 1px 1px rgba(0,0,0,0.5);
    top: 3px;
}

.accessibilityBtn_txt:active {
    margin-bottom: -3px;
}

/* ------------------------------------------------------
High Contrast
-------------------------------------------------------*/
.hghContrast .btn {
    color: #000000;
}

.hghContrast .btn_purple {
    color: #ffffff;
}

.hghContrast .btn_whiteOrange,
.hghContrast .btn_whiteYellow {
    border-color: #000000;
    -moz-box-shadow: 0 3px #000000;
    -webkit-box-shadow: 0 3px #000000;
    box-shadow: 0 3px #000000;
}

.hghContrast .btn_whiteOrange:active,
.hghContrast .btn_whiteYellow:active {
    -moz-box-shadow: 0 1px #000000 inset;
    -webkit-box-shadow: 0 1px #000000 inset;
    box-shadow: 0 1px #000000 inset;
}

.hghContrast .hroBnr .btn_white-orange,
.hghContrast .hroBnr .btn_whiteYellow,
.hghContrast .hroBnr .btn_orange,
.hghContrast .hroBnr .btn_blue {
    background-color: #ffffff;
    border-color: #000000;
    -moz-box-shadow: 0 3px #000000;
    -webkit-box-shadow: 0 3px #000000;
    box-shadow: 0 3px #000000;
}

.hghContrast .hroBnr .btn_white-orange:active,
.hghContrast .hroBnr .btn_whiteYellow:active,
.hghContrast .hroBnr .btn_orange:active,
.hghContrast .hroBnr .btn_blue:active {
    -moz-box-shadow: 0 1px #000000 inset;
    -webkit-box-shadow: 0 1px #000000 inset;
    box-shadow: 0 1px #000000 inset;
}

/* ---------------------------------------------------------------------
Date Styles
------------------------------------------------------------------------ */

/*doc

---

title: Date
name: date
category: Modules

---

Add comments here.

```html_example
<div class="date">September 1</div>

<div class="hghContrast">
    <div class="date">September 1</div>
</div>
```

*/

.date {
    color: #999999;
    font-size: 11px;
    line-height: 1.64;
    text-transform: uppercase;
    margin-bottom: 0;
}

/*************************
High Contrast
*************************/

.hghContrast .date {
    color: #999999;
}

/* ---------------------------------------------------------------------
Feature Styles
------------------------------------------------------------------------ */

/*doc

---

title: Feature
name: feature
category: Modules

---

A feature is an image/media element followed by a title and text.

```html_example

<div class="grid">
    <div class="grid-row">
        <div class="grid-row-col grid-row-col_size3of12">
            <div class="feature">
                <div class="feature-element">
                    <div class="box">
                        <div class="box-content">
                            <img src="http://placekitten.com/197/151" class="imgFrm" alt="" />
                        </div>
                    </div>
                </div>
                <div class="feature-bd">
                    <h3 class="hdg_4 mix-hdg_bold mix-hdg_orange mix-hdg_lower">image gallery</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet neque</p>
                    <a href="#" class="link">more &raquo;</a>
                </div>
            </div>
         </div>
         <div class="grid-row-col grid-row-col_size3of12">
            <div class="hghContrast">
                <div class="feature">
                    <div class="feature-element">
                        <div class="box">
                            <div class="box-content">
                                <img src="http://placekitten.com/197/151" class="imgFrm" alt="" />
                            </div>
                        </div>
                    </div>
                    <div class="feature-bd">
                        <h3 class="hdg_4 mix-hdg_bold mix-hdg_orange mix-hdg_lower">image gallery</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet neque</p>
                        <a href="#" class="link">more &raquo;</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

```

*/

.feature {
    overflow: hidden;
}

/*.feature-element {
    margin: 10px;
    padding: 0;
    width: 197px;
}*/

/*.feature-element > * {
    border: 1px solid #5f5f5f;
}*/

.feature-bd {
    margin-top: 13px;
    color: #000000;
    line-height: 1.54;
}

/*WELL BEING PAGE*/
.well-being-img{
    margin-bottom: 10px;
}
.well-being-pillars .modal{
    height: auto !important;
}
/*WELL BEING PAGE - FOUR PILLARS TEXT COLOR / BOLD */
.safety-bd p{
    font-weight: bold;
    color: #f95602;
} 
.sustainability-bd p {
    font-weight: bold;
    color: #ce2028;
}
.community-bd p{
    font-weight: bold;
    color: #214098;
}
.snacks-bd p{
    font-weight: bold;
    color: #00b7c6;
} 
.margin-top-H4{
    margin-top: 20px;
}

.btn_community{
    background-color: #214098;
    border: 1px solid #072372;
    -moz-box-shadow: 0 3px #072372;
    -webkit-box-shadow: 0 3px #072372;
    box-shadow: 0 3px #072372;
	padding: 0px 13px;
}
.btn_community:hover {
    background-color: #436ad6 !important;
}
.btn_community:active {
    -moz-box-shadow: 0 1px #072372 inset;
    -webkit-box-shadow: 0 1px #072372 inset;
    box-shadow: 0 1px #072372 inset;
}
	
/*WELL BEING PAGE - YOUTUBE PLAYLIST CAROUSEL*/  
  .playlist-gallery:before,
  .playlist-gallery:after { content: " "; display: table; }
  .playlist-gallery:after { clear: both; }

  /* Playlist Main */
  .playlist-gallery .playlist-main { margin-right: 1%; width: 64%; float: left;}
  .playlist-gallery .playlist-main .video-wrapper { height: 0; padding-bottom: 56.25%; position: relative; }
  .playlist-gallery .playlist-main iframe { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
}

  /* Playlist Nav */
  .playlist-gallery .playlist-nav { width: 35%; float: left;}
  .playlist-nav{
    height: 260px;
    overflow: scroll;
    overflow-x: hidden;
}
  .playlist-gallery .playlist-nav .playlist-item:before,
  .playlist-gallery .playlist-nav .playlist-item:after { content: " "; display: table; }
  .playlist-gallery .playlist-nav .playlist-item:after { clear: both; }
  .playlist-gallery .playlist-nav .playlist-item { margin-bottom: 11px; *zoom: 1; cursor: pointer; }
  .playlist-gallery .playlist-nav .playlist-item img { float: left; width: 30%;}
  .playlist-gallery .playlist-nav .playlist-item p { padding-left: 12px; overflow: hidden; margin-bottom: 0; margin-top: 8px}

.playlist-item div.video-title{
    width: 10em;
    margin-left: 30%;
    text-overflow: ellipsis;
    height: 50px;
    overflow: hidden;
    padding-right: 10px;
    box-sizing: border-box;

}
.playlist-item:hover{
    background-color: #4f2170;
    -webkit-border-radius: 0 3px 3px 0;
    -moz-border-radius: 0 3px 3px 0;
    -o-border-radius: 0 3px 3px 0;
    border-radius: 0 3px 3px 0;
}
.playlist-item:hover div.video-title p{
    color: #fff;
}
.feature_link a {
    text-decoration: none;
    color: #00b7c6;
}
/* ----------------------------------------------------------
High Contrast
----------------------------------------------------------*/

.hghContrast .feature-bd {
    color: #ffffff;
}

/* ---------------------------------------------------------------------
Flex Grid Styles
------------------------------------------------------------------------ */

/*doc

---

title: Flex Grid
name: flex_grid
category: Modules

---

Flex Grid flexes to fit the size of it's content, while keeping the content centered.

```html_example
<div class="box">
    <div class="box-content">
        <div class="flexGrid">
            <div class="flexGrid-item">
                <img src="http://placekitten.com/102/68" alt="Standard & Poor" />
            </div>
            <div class="flexGrid-item flexBox-item_middle">
                <img src="http://placekitten.com/170/68" alt="Dow Jones Indecies" />
            </div>
            <div class="flexGrid-item">
                <img src="http://placekitten.com/122/68" alt="Nasdaq" />
            </div>
        </div>
    </div>
</div>
```

*/

.flexGrid {
    display: table;
    width: 100%;
}

.flexGrid-item {
    display: table-cell;
    text-align: center;
}

.flexBox-item_middle {
    border-left: 1px solid #b2ebee;
    border-right: 1px solid #b2ebee;
}

/* ---------------------------------------------------------------------
Footer Styles
------------------------------------------------------------------------ */

.footer {
    min-width: 1024px; /* Allows expansion to 100% of window while not cutting off content when < 1024px */
    overflow: hidden;
}

.footer-container {
    width: 1024px;
    margin: 0 auto;
}

.footer-container:before,
.footer-container:after {
    content: " ";
    display: table;
}

.footer-container:after {
    clear: both;
}

.footer-container-mask {
    float: left;
    width: 1440px;
    height: 233px;
    margin: 0 -208px;
    /*filter: progid:DXImageTransform.Microsoft.Chroma(color='cyan');*/ /* Filters out cyan, used in conjunction with '.headerExtraMask-wrapper' class for IE masking */
    background: #50276e url(../../images/footer-cascade-center.png) 0 -86px no-repeat;
    -webkit-mask-box-image: url(../../images/footer-mask-webkit.png);
    -webkit-clip-path: url(../../images/masks.svg#footerMask);
    -moz-clip-path: url(../../images/masks.svg#footerMask);
    -ms-clip-path: url(../../images/masks.svg#footerMask);
    -o-clip-path: url(../../images/masks.svg#footerMask);
    clip-path: url(../../images/masks.svg#footerMask);
}

.footer-container-mask_left {
    float: left;
    margin-left: -1646px;
    background: #50276e url(../../images/footer-cascade-left.png) 1169px -230px no-repeat;
}

.footer-container-mask_right {
    float: right;
    margin-right: -1646px;
    background: #50276e;
}

.footer-container-redCurve {
    position: relative;
    width: 563px;
    height: 38px;
    margin: 55px 0 -55px -150px;
    background: #c0091b; /* Fallback to a solid color if no SVG support */
    background: url(../../images/red-curve2.svg) no-repeat;
}

.footer-container-mask-wrapper {
    overflow: hidden;
}

/* ---------------------------------------------------------------------
High Contrast
------------------------------------------------------------------------ */

.hghContrast .footer-container-mask {
    background: #151515;
}

.hghContrast .footer-container-redCurve {
    display: none;
}

/* ---------------------------------------------------------------------
IE10/11
------------------------------------------------------------------------ */

html[data-useragent*='MSIE 10.0'] .footer-container-mask-wrapper,
html[data-useragent*='MSIE 11.0'] .footer-container-mask-wrapper {
    width: 100%;
    height: 100%;
    background: url(../../images/footer-mask-ie2.png) no-repeat;
}


/* ---------------------------------------------------------------------
Footer Content Styles
------------------------------------------------------------------------ */

.footerContent {
    float: left;
    width: 1440px;
    height: 50px;
    margin-top: 183px; /* top margin is parent height - height, or, 233px - 50px */
    padding-top: 15px;
    background: #411f57;
    -webkit-box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.30);
    -moz-box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.30);
    -ms-box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.30);
    -o-box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.30);
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.30);
}

/* ---------------------------------------------------------------------
High Contrast
------------------------------------------------------------------------ */

.hghContrast .footerContent {
    background: #000000;
}

/* ---------------------------------------------------------------------
Footer Navigation Styles
------------------------------------------------------------------------ */

/*doc

---

title: Footer Navigation
name: footer_nav
category: Modules

---

The navigation and copyright that goes in the footer region.

```html_example

    <span class="copyright">&copy; Mondel&#275;z International. All Rights Reserved</span>

    <ul class="ftrNav">
        <li><a href="#">Legal Notices</a></li>
        <li><a href="#">Privacy Policy</a></li>
        <li><a href="#">Site Map</a></li>
        <li><a href="#">Contact</a></li>
    </ul>

    <div class="hghContrast">
        <span class="copyright">&copy; Mondel&#275;z International. All Rights Reserved</span>

        <ul class="ftrNav">
            <li><a href="#">Legal Notices</a></li>
            <li><a href="#">Privacy Policy</a></li>
            <li><a href="#">Site Map</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
```

*/

.ftrNav {
    float: right;
    color: #ffffff;
    font: 12px/1.84 Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.ftrNav > * {
    float: left;
}

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

.ftrNav a:link,
.ftrNav a:visited {
    color: #ffffff;
    text-decoration: none;
}

.ftrNav a:hover {
    text-decoration: underline;
}

.footer .backTop {position:relative;top:-2px;}
.footer .backTop a {color:#bdc527 !important;}
.footer .backTop a span {position:relative;color:#bdc527;font-size:13px;}

/* ---------------------------------------------------------------------
High Contrast
------------------------------------------------------------------------ */
.hghContrast .ftrNav {
    color: #cccccc;
}

/* ---------------------------------------------------------------------
Blocks Styles
------------------------------------------------------------------------ */

/*doc

---

title: Blocks
name: blocks
category: Modules

---

A percentage based layout style for floating list items.

```html_example

<h2 class="hdg hdg_4 mix-hdg_blue mix-hdg_lower">blocks_2up</h2>

<ul class="blocks blocks_2up js-modalList" data-col-count="2">
    <li class="blocks-item">
        <div class="box">
            <div class="galleryItem">
                <div class="galleryItem-hd">
                    <img class="imgFrm" src="http://placekitten.com/197/151" alt="" />
                </div>
                <div class="galleryItem-bd">
                    <div class="galleryItem-bd-lft">
                        <p>Lorem ipsum dolor amet, consectetur adipiscing elit...</p>
                    </div>
                    <div class="galleryItem-bd-rght">
                        <a href="#" data-tooltip="DOWNLOAD" class="galleryDwnldBtn">Download</a>
                    </div>
                </div>

                <div class="js-fullDescription">
                    <div class="media">
                        <div class="media-element">
                            <img src="http://placekitten.com/288/199" alt="" />
                        </div>
                        <div class="media-bd">
                            <h4 class="hdg hdg_7 mix-hdg_orange">Title Text</h4>
                            <p>
                                <a class="link" href="#">Lorem ipsum dolor sit amet</a>, consectetur adipisicing elit. Veniam, sed esse fugiat neque mollitia
                                excepturi optio laudantium vel praesentium possimus.

                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque auctor tortor quis vestibulum
                                vehicula. Nam felis purus, euismod sit amet sem id, gravida faucibus elit. Cras tortor erat, porta
                                quis dapibus quis, fringilla non justo. Maecenas pellentesque suscipit ipsum a interdum. Mauris laoreet,
                                nisi nec placerat dictum, justo odio eleifend augue, et aliquam nulla metus at lacus. Phasellus eu
                                porttitor libero, vitae luctus nulla. Phasellus sit amet nunc tortor. Nullam et odio nunc. Aliquam vitae
                                pulvinar orci, eu viverra neque.<br/><br/>
                                <span class="bold">Markets:</span> Belgium, <a class="link" href="#">France</a>, Netherlands, <a class="link" href="#">United Kingdom</a>, <a class="link" href="#">United states</a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        <div>
    </li>
    <li class="blocks-item">
        <div class="box">
            <div class="galleryItem">
                <div class="galleryItem-hd">
                    <img class="imgFrm" src="http://placekitten.com/197/151" alt="" />
                </div>
                <div class="galleryItem-bd">
                    <div class="galleryItem-bd-lft">
                        <p>Lorem ipsum</p>
                    </div>
                    <div class="galleryItem-bd-rght">
                        <a href="#" data-tooltip="DOWNLOAD" class="galleryDwnldBtn">Download</a>
                    </div>
                </div>

                <div class="js-fullDescription">
                    <ul>
                        <li class="marginBot"><p><span class="txt txt_strong">1871</span> – Thomas Adams of New York receives his first chewing gum machine patent. His revolutionary machine enables him to begin mass producing his chicle based gum. ‘Adams New York No. 1’ chewing gum goes on sale in local drug stores for a penny a piece.</p></li>
                        <li class="marginBot"><p><span class="txt txt_strong">1876</span> – Adams & Sons Co. is founded by Thomas Adams. The rapidly growing company relocates to larger quarters at 58-60 Vesey Street in Manhattan, New York.</p></li>
                        <li class="marginBot"><p><span class="txt txt_strong">1879</span> – Ohio physician Dr. Edward E. Beeman manufactures a pepsin powder as a digestive aid. Beeman blends pepsin with chicle and produces a chewing gum that promises to aid digestion.</p></li>
                        <li class="marginBot"><p><span class="txt txt_strong">1884</span> – Black Jack, a licorice-flavored gum, is introduced by Adams & Sons. It is the first gum to be widely distributed in stick form.</p></li>
                        <li class="marginBot"><p><span class="txt txt_strong">1899</span> – American Chicle Company is formed by the amalgamation of the Adams & Sons Company, of Brooklyn; the Beeman Chemical Company, of Cleveland, Ohio; S. T. Britten & Co., of Toronto, Canada; W. J. White & Sons, of Cleveland, Ohio; J. P. Primley of Chicago, Illinois; and the Kisme Gum Company, of Louisville, Kentucky. The corporation is formed under the laws of New Jersey, June 3, 1899. The company controls 85 percent of the chewing gum business in the United States.</p></li>
                        <li class="marginBot"><p><span class="txt txt_strong">1905</span> – Thomas Adams Sr., 87, dies in his Brooklyn home.</p></li>
                    </ul>
                </div>
            </div>
        </div>
    </li>
    <li class="blocks-item">
        <div class="box">
            <div class="galleryItem">
                <div class="galleryItem-hd">
                    <img class="imgFrm" src="http://placekitten.com/197/151" alt="" />
                </div>
                <div class="galleryItem-bd">
                    <div class="galleryItem-bd-lft">
                        <p>Lorem ipsum</p>
                    </div>
                    <div class="galleryItem-bd-rght">
                        <a href="#" data-tooltip="DOWNLOAD" class="galleryDwnldBtn">Download</a>
                    </div>
                </div>

                <div class="js-fullDescription">
                    <ul>
                        <li class="marginBot"><p><span class="txt txt_strong">1871</span> – Thomas Adams of New York receives his first chewing gum machine patent. His revolutionary machine enables him to begin mass producing his chicle based gum. ‘Adams New York No. 1’ chewing gum goes on sale in local drug stores for a penny a piece.</p></li>
                        <li class="marginBot"><p><span class="txt txt_strong">1876</span> – Adams & Sons Co. is founded by Thomas Adams. The rapidly growing company relocates to larger quarters at 58-60 Vesey Street in Manhattan, New York.</p></li>
                        <li class="marginBot"><p><span class="txt txt_strong">1879</span> – Ohio physician Dr. Edward E. Beeman manufactures a pepsin powder as a digestive aid. Beeman blends pepsin with chicle and produces a chewing gum that promises to aid digestion.</p></li>
                        <li class="marginBot"><p><span class="txt txt_strong">1884</span> – Black Jack, a licorice-flavored gum, is introduced by Adams & Sons. It is the first gum to be widely distributed in stick form.</p></li>
                        <li class="marginBot"><p><span class="txt txt_strong">1899</span> – American Chicle Company is formed by the amalgamation of the Adams & Sons Company, of Brooklyn; the Beeman Chemical Company, of Cleveland, Ohio; S. T. Britten & Co., of Toronto, Canada; W. J. White & Sons, of Cleveland, Ohio; J. P. Primley of Chicago, Illinois; and the Kisme Gum Company, of Louisville, Kentucky. The corporation is formed under the laws of New Jersey, June 3, 1899. The company controls 85 percent of the chewing gum business in the United States.</p></li>
                        <li class="marginBot"><p><span class="txt txt_strong">1905</span> – Thomas Adams Sr., 87, dies in his Brooklyn home.</p></li>
                    </ul>
                </div>
            </div>
        </div>
    </li>
    <li class="blocks-item">
        <div class="box">
            <div class="galleryItem">
                <div class="galleryItem-hd">
                    <img class="imgFrm" src="http://placekitten.com/197/151" alt="" />
                </div>
                <div class="galleryItem-bd">
                    <div class="galleryItem-bd-lft">
                        <p>Lorem ipsum</p>
                    </div>
                    <div class="galleryItem-bd-rght">
                        <a href="#" data-tooltip="DOWNLOAD" class="galleryDwnldBtn">Download</a>
                    </div>
                </div>

                <div class="js-fullDescription">
                    <ul>
                        <li class="marginBot"><p><span class="txt txt_strong">1871</span> – Thomas Adams of New York receives his first chewing gum machine patent. His revolutionary machine enables him to begin mass producing his chicle based gum. ‘Adams New York No. 1’ chewing gum goes on sale in local drug stores for a penny a piece.</p></li>
                        <li class="marginBot"><p><span class="txt txt_strong">1876</span> – Adams & Sons Co. is founded by Thomas Adams. The rapidly growing company relocates to larger quarters at 58-60 Vesey Street in Manhattan, New York.</p></li>
                        <li class="marginBot"><p><span class="txt txt_strong">1879</span> – Ohio physician Dr. Edward E. Beeman manufactures a pepsin powder as a digestive aid. Beeman blends pepsin with chicle and produces a chewing gum that promises to aid digestion.</p></li>
                        <li class="marginBot"><p><span class="txt txt_strong">1884</span> – Black Jack, a licorice-flavored gum, is introduced by Adams & Sons. It is the first gum to be widely distributed in stick form.</p></li>
                        <li class="marginBot"><p><span class="txt txt_strong">1899</span> – American Chicle Company is formed by the amalgamation of the Adams & Sons Company, of Brooklyn; the Beeman Chemical Company, of Cleveland, Ohio; S. T. Britten & Co., of Toronto, Canada; W. J. White & Sons, of Cleveland, Ohio; J. P. Primley of Chicago, Illinois; and the Kisme Gum Company, of Louisville, Kentucky. The corporation is formed under the laws of New Jersey, June 3, 1899. The company controls 85 percent of the chewing gum business in the United States.</p></li>
                        <li class="marginBot"><p><span class="txt txt_strong">1905</span> – Thomas Adams Sr., 87, dies in his Brooklyn home.</p></li>
                    </ul>
                </div>
            </div>
        </div>
    </li>
</ul>

<h2 class="hdg hdg_4 mix-hdg_blue mix-hdg_lower">blocks_3up</h2>

<ul class="blocks blocks_3up js-modalList" data-col-count="3">
    <li class="blocks-item">
        <div class="box">
            <div class="galleryItem">
                <div class="galleryItem-hd">
                    <img class="imgFrm" src="http://placekitten.com/197/151" alt="" />
                </div>
                <div class="galleryItem-bd">
                    <div class="galleryItem-bd-lft">
                        <p>Lorem ipsum dolor amet, consectetur adipiscing elit...</p>
                    </div>
                    <div class="galleryItem-bd-rght">
                        <a href="#" data-tooltip="DOWNLOAD" class="galleryDwnldBtn">Download</a>
                    </div>
                </div>

                <div class="js-fullDescription">
                    <div class="media">
                        <div class="media-element">
                            <img src="http://placekitten.com/288/199" alt="" />
                        </div>
                        <div class="media-bd">
                            <h4 class="hdg hdg_7 mix-hdg_orange">Title Text</h4>
                            <p>
                                <a class="link" href="#">Lorem ipsum dolor sit amet</a>, consectetur adipisicing elit. Veniam, sed esse fugiat neque mollitia
                                excepturi optio laudantium vel praesentium possimus.

                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque auctor tortor quis vestibulum
                                vehicula. Nam felis purus, euismod sit amet sem id, gravida faucibus elit. Cras tortor erat, porta
                                quis dapibus quis, fringilla non justo. Maecenas pellentesque suscipit ipsum a interdum. Mauris laoreet,
                                nisi nec placerat dictum, justo odio eleifend augue, et aliquam nulla metus at lacus. Phasellus eu
                                porttitor libero, vitae luctus nulla. Phasellus sit amet nunc tortor. Nullam et odio nunc. Aliquam vitae
                                pulvinar orci, eu viverra neque.<br/><br/>
                                <span class="bold">Markets:</span> Belgium, <a class="link" href="#">France</a>, Netherlands, <a class="link" href="#">United Kingdom</a>, <a class="link" href="#">United states</a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        <div>
    </li>
    <li class="blocks-item">
        <div class="box">
            <div class="galleryItem">
                <div class="galleryItem-hd">
                    <img class="imgFrm" src="http://placekitten.com/197/151" alt="" />
                </div>
                <div class="galleryItem-bd">
                    <div class="galleryItem-bd-lft">
                        <p>Lorem ipsum</p>
                    </div>
                    <div class="galleryItem-bd-rght">
                        <a href="#" data-tooltip="DOWNLOAD" class="galleryDwnldBtn">Download</a>
                    </div>
                </div>

                <div class="js-fullDescription">
                    <ul>
                        <li class="marginBot"><p><span class="txt txt_strong">1871</span> – Thomas Adams of New York receives his first chewing gum machine patent. His revolutionary machine enables him to begin mass producing his chicle based gum. ‘Adams New York No. 1’ chewing gum goes on sale in local drug stores for a penny a piece.</p></li>
                        <li class="marginBot"><p><span class="txt txt_strong">1876</span> – Adams & Sons Co. is founded by Thomas Adams. The rapidly growing company relocates to larger quarters at 58-60 Vesey Street in Manhattan, New York.</p></li>
                        <li class="marginBot"><p><span class="txt txt_strong">1879</span> – Ohio physician Dr. Edward E. Beeman manufactures a pepsin powder as a digestive aid. Beeman blends pepsin with chicle and produces a chewing gum that promises to aid digestion.</p></li>
                        <li class="marginBot"><p><span class="txt txt_strong">1884</span> – Black Jack, a licorice-flavored gum, is introduced by Adams & Sons. It is the first gum to be widely distributed in stick form.</p></li>
                        <li class="marginBot"><p><span class="txt txt_strong">1899</span> – American Chicle Company is formed by the amalgamation of the Adams & Sons Company, of Brooklyn; the Beeman Chemical Company, of Cleveland, Ohio; S. T. Britten & Co., of Toronto, Canada; W. J. White & Sons, of Cleveland, Ohio; J. P. Primley of Chicago, Illinois; and the Kisme Gum Company, of Louisville, Kentucky. The corporation is formed under the laws of New Jersey, June 3, 1899. The company controls 85 percent of the chewing gum business in the United States.</p></li>
                        <li class="marginBot"><p><span class="txt txt_strong">1905</span> – Thomas Adams Sr., 87, dies in his Brooklyn home.</p></li>
                    </ul>
                </div>
            </div>
        </div>
    </li>
    <li class="blocks-item">
        <div class="box">
            <div class="galleryItem">
                <div class="galleryItem-hd">
                    <img class="imgFrm" src="http://placekitten.com/197/151" alt="" />
                </div>
                <div class="galleryItem-bd">
                    <div class="galleryItem-bd-lft">
                        <p>Lorem ipsum</p>
                    </div>
                    <div class="galleryItem-bd-rght">
                        <a href="#" data-tooltip="DOWNLOAD" class="galleryDwnldBtn">Download</a>
                    </div>
                </div>

                <div class="js-fullDescription">
                    <ul>
                        <li class="marginBot"><p><span class="txt txt_strong">1871</span> – Thomas Adams of New York receives his first chewing gum machine patent. His revolutionary machine enables him to begin mass producing his chicle based gum. ‘Adams New York No. 1’ chewing gum goes on sale in local drug stores for a penny a piece.</p></li>
                        <li class="marginBot"><p><span class="txt txt_strong">1876</span> – Adams & Sons Co. is founded by Thomas Adams. The rapidly growing company relocates to larger quarters at 58-60 Vesey Street in Manhattan, New York.</p></li>
                        <li class="marginBot"><p><span class="txt txt_strong">1879</span> – Ohio physician Dr. Edward E. Beeman manufactures a pepsin powder as a digestive aid. Beeman blends pepsin with chicle and produces a chewing gum that promises to aid digestion.</p></li>
                        <li class="marginBot"><p><span class="txt txt_strong">1884</span> – Black Jack, a licorice-flavored gum, is introduced by Adams & Sons. It is the first gum to be widely distributed in stick form.</p></li>
                        <li class="marginBot"><p><span class="txt txt_strong">1899</span> – American Chicle Company is formed by the amalgamation of the Adams & Sons Company, of Brooklyn; the Beeman Chemical Company, of Cleveland, Ohio; S. T. Britten & Co., of Toronto, Canada; W. J. White & Sons, of Cleveland, Ohio; J. P. Primley of Chicago, Illinois; and the Kisme Gum Company, of Louisville, Kentucky. The corporation is formed under the laws of New Jersey, June 3, 1899. The company controls 85 percent of the chewing gum business in the United States.</p></li>
                        <li class="marginBot"><p><span class="txt txt_strong">1905</span> – Thomas Adams Sr., 87, dies in his Brooklyn home.</p></li>
                    </ul>
                </div>
            </div>
        </div>
    </li>
    <li class="blocks-item">
        <div class="box">
            <div class="galleryItem">
                <div class="galleryItem-hd">
                    <img class="imgFrm" src="http://placekitten.com/197/151" alt="" />
                </div>
                <div class="galleryItem-bd">
                    <div class="galleryItem-bd-lft">
                        <p>Lorem ipsum</p>
                    </div>
                    <div class="galleryItem-bd-rght">
                        <a href="#" data-tooltip="DOWNLOAD" class="galleryDwnldBtn">Download</a>
                    </div>
                </div>

                <div class="js-fullDescription">
                    <ul>
                        <li class="marginBot"><p><span class="txt txt_strong">1871</span> – Thomas Adams of New York receives his first chewing gum machine patent. His revolutionary machine enables him to begin mass producing his chicle based gum. ‘Adams New York No. 1’ chewing gum goes on sale in local drug stores for a penny a piece.</p></li>
                        <li class="marginBot"><p><span class="txt txt_strong">1876</span> – Adams & Sons Co. is founded by Thomas Adams. The rapidly growing company relocates to larger quarters at 58-60 Vesey Street in Manhattan, New York.</p></li>
                        <li class="marginBot"><p><span class="txt txt_strong">1879</span> – Ohio physician Dr. Edward E. Beeman manufactures a pepsin powder as a digestive aid. Beeman blends pepsin with chicle and produces a chewing gum that promises to aid digestion.</p></li>
                        <li class="marginBot"><p><span class="txt txt_strong">1884</span> – Black Jack, a licorice-flavored gum, is introduced by Adams & Sons. It is the first gum to be widely distributed in stick form.</p></li>
                        <li class="marginBot"><p><span class="txt txt_strong">1899</span> – American Chicle Company is formed by the amalgamation of the Adams & Sons Company, of Brooklyn; the Beeman Chemical Company, of Cleveland, Ohio; S. T. Britten & Co., of Toronto, Canada; W. J. White & Sons, of Cleveland, Ohio; J. P. Primley of Chicago, Illinois; and the Kisme Gum Company, of Louisville, Kentucky. The corporation is formed under the laws of New Jersey, June 3, 1899. The company controls 85 percent of the chewing gum business in the United States.</p></li>
                        <li class="marginBot"><p><span class="txt txt_strong">1905</span> – Thomas Adams Sr., 87, dies in his Brooklyn home.</p></li>
                    </ul>
                </div>
            </div>
        </div>
    </li>
    <li class="blocks-item">
        <div class="box">
            <div class="galleryItem">
                <div class="galleryItem-hd">
                    <img class="imgFrm" src="http://placekitten.com/197/151" alt="" />
                </div>
                <div class="galleryItem-bd">
                    <div class="galleryItem-bd-lft">
                        <p>Lorem ipsum</p>
                    </div>
                    <div class="galleryItem-bd-rght">
                        <a href="#" data-tooltip="DOWNLOAD" class="galleryDwnldBtn">Download</a>
                    </div>
                </div>

                <div class="js-fullDescription">
                    <ul>
                        <li class="marginBot"><p><span class="txt txt_strong">1871</span> – Thomas Adams of New York receives his first chewing gum machine patent. His revolutionary machine enables him to begin mass producing his chicle based gum. ‘Adams New York No. 1’ chewing gum goes on sale in local drug stores for a penny a piece.</p></li>
                        <li class="marginBot"><p><span class="txt txt_strong">1876</span> – Adams & Sons Co. is founded by Thomas Adams. The rapidly growing company relocates to larger quarters at 58-60 Vesey Street in Manhattan, New York.</p></li>
                        <li class="marginBot"><p><span class="txt txt_strong">1879</span> – Ohio physician Dr. Edward E. Beeman manufactures a pepsin powder as a digestive aid. Beeman blends pepsin with chicle and produces a chewing gum that promises to aid digestion.</p></li>
                        <li class="marginBot"><p><span class="txt txt_strong">1884</span> – Black Jack, a licorice-flavored gum, is introduced by Adams & Sons. It is the first gum to be widely distributed in stick form.</p></li>
                        <li class="marginBot"><p><span class="txt txt_strong">1899</span> – American Chicle Company is formed by the amalgamation of the Adams & Sons Company, of Brooklyn; the Beeman Chemical Company, of Cleveland, Ohio; S. T. Britten & Co., of Toronto, Canada; W. J. White & Sons, of Cleveland, Ohio; J. P. Primley of Chicago, Illinois; and the Kisme Gum Company, of Louisville, Kentucky. The corporation is formed under the laws of New Jersey, June 3, 1899. The company controls 85 percent of the chewing gum business in the United States.</p></li>
                        <li class="marginBot"><p><span class="txt txt_strong">1905</span> – Thomas Adams Sr., 87, dies in his Brooklyn home.</p></li>
                    </ul>
                </div>
            </div>
        </div>
    </li>
    <li class="blocks-item">
        <div class="box">
            <div class="galleryItem">
                <div class="galleryItem-hd">
                    <img class="imgFrm" src="http://placekitten.com/197/151" alt="" />
                </div>
                <div class="galleryItem-bd">
                    <div class="galleryItem-bd-lft">
                        <p>Lorem ipsum</p>
                    </div>
                    <div class="galleryItem-bd-rght">
                        <a href="#" data-tooltip="DOWNLOAD" class="galleryDwnldBtn">Download</a>
                    </div>
                </div>

                <div class="js-fullDescription">
                    <ul>
                        <li class="marginBot"><p><span class="txt txt_strong">1871</span> – Thomas Adams of New York receives his first chewing gum machine patent. His revolutionary machine enables him to begin mass producing his chicle based gum. ‘Adams New York No. 1’ chewing gum goes on sale in local drug stores for a penny a piece.</p></li>
                        <li class="marginBot"><p><span class="txt txt_strong">1876</span> – Adams & Sons Co. is founded by Thomas Adams. The rapidly growing company relocates to larger quarters at 58-60 Vesey Street in Manhattan, New York.</p></li>
                        <li class="marginBot"><p><span class="txt txt_strong">1879</span> – Ohio physician Dr. Edward E. Beeman manufactures a pepsin powder as a digestive aid. Beeman blends pepsin with chicle and produces a chewing gum that promises to aid digestion.</p></li>
                        <li class="marginBot"><p><span class="txt txt_strong">1884</span> – Black Jack, a licorice-flavored gum, is introduced by Adams & Sons. It is the first gum to be widely distributed in stick form.</p></li>
                        <li class="marginBot"><p><span class="txt txt_strong">1899</span> – American Chicle Company is formed by the amalgamation of the Adams & Sons Company, of Brooklyn; the Beeman Chemical Company, of Cleveland, Ohio; S. T. Britten & Co., of Toronto, Canada; W. J. White & Sons, of Cleveland, Ohio; J. P. Primley of Chicago, Illinois; and the Kisme Gum Company, of Louisville, Kentucky. The corporation is formed under the laws of New Jersey, June 3, 1899. The company controls 85 percent of the chewing gum business in the United States.</p></li>
                        <li class="marginBot"><p><span class="txt txt_strong">1905</span> – Thomas Adams Sr., 87, dies in his Brooklyn home.</p></li>
                    </ul>
                </div>
            </div>
        </div>
    </li>
</ul>

<h2 class="hdg hdg_4 mix-hdg_blue mix-hdg_lower">blocks_4up</h2>

<ul class="blocks blocks_4up js-modalList" data-col-count="4">
    <li class="blocks-item">
        <div class="box">
            <div class="box-content">
                <div class="feature">
                    <div class="feature-element">
                        <img class="imgFrm" src="http://placekitten.com/197/151" alt="" />
                    </div>
                    <div class="feature-bd">
                        <p>Lorem ipsum dolor amet, consectetur adipiscing elit...</p>
                    </div>

                    <div class="js-fullDescription">
                        <div class="media">
                            <div class="media-element">
                                <img src="http://placekitten.com/288/199" alt="" />
                            </div>
                            <div class="media-bd">
                                <h4 class="hdg hdg_7 mix-hdg_orange">Title Text</h4>
                                <p>
                                    <a class="link" href="#">Lorem ipsum dolor sit amet</a>, consectetur adipisicing elit. Veniam, sed esse fugiat neque mollitia
                                    excepturi optio laudantium vel praesentium possimus.

                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque auctor tortor quis vestibulum
                                    vehicula. Nam felis purus, euismod sit amet sem id, gravida faucibus elit. Cras tortor erat, porta
                                    quis dapibus quis, fringilla non justo. Maecenas pellentesque suscipit ipsum a interdum. Mauris laoreet,
                                    nisi nec placerat dictum, justo odio eleifend augue, et aliquam nulla metus at lacus. Phasellus eu
                                    porttitor libero, vitae luctus nulla. Phasellus sit amet nunc tortor. Nullam et odio nunc. Aliquam vitae
                                    pulvinar orci, eu viverra neque.<br/><br/>
                                    <span class="bold">Markets:</span> Belgium, <a class="link" href="#">France</a>, Netherlands, <a class="link" href="#">United Kingdom</a>, <a class="link" href="#">United states</a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        <div>
    </li>
    <li class="blocks-item">
        <div class="box">
            <div class="box-content">
                <div class="feature">
                    <div class="feature-element">
                        <img class="imgFrm" src="http://placekitten.com/197/151" alt="" />
                    </div>
                    <div class="feature-bd">
                        <p>Lorem ipsum dolor amet, consectetur adipiscing elit...</p>
                    </div>

                    <div class="js-fullDescription">
                        <div class="media">
                            <div class="media-element">
                                <img src="http://placekitten.com/288/199" alt="" />
                            </div>
                            <div class="media-bd">
                                <h4 class="hdg hdg_7 mix-hdg_orange">Title Text</h4>
                                <p>
                                    <a class="link" href="#">Lorem ipsum dolor sit amet</a>, consectetur adipisicing elit. Veniam, sed esse fugiat neque mollitia
                                    excepturi optio laudantium vel praesentium possimus.

                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque auctor tortor quis vestibulum
                                    vehicula. Nam felis purus, euismod sit amet sem id, gravida faucibus elit. Cras tortor erat, porta
                                    quis dapibus quis, fringilla non justo. Maecenas pellentesque suscipit ipsum a interdum. Mauris laoreet,
                                    nisi nec placerat dictum, justo odio eleifend augue, et aliquam nulla metus at lacus. Phasellus eu
                                    porttitor libero, vitae luctus nulla. Phasellus sit amet nunc tortor. Nullam et odio nunc. Aliquam vitae
                                    pulvinar orci, eu viverra neque.<br/><br/>
                                    <span class="bold">Markets:</span> Belgium, <a class="link" href="#">France</a>, Netherlands, <a class="link" href="#">United Kingdom</a>, <a class="link" href="#">United states</a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        <div>
    </li>
    <li class="blocks-item">
        <div class="box">
            <div class="box-content">
                <div class="feature">
                    <div class="feature-element">
                        <img class="imgFrm" src="http://placekitten.com/197/151" alt="" />
                    </div>
                    <div class="feature-bd">
                        <p>Lorem ipsum dolor amet, consectetur adipiscing elit...</p>
                    </div>

                    <div class="js-fullDescription">
                        <div class="media">
                            <div class="media-element">
                                <img src="http://placekitten.com/288/199" alt="" />
                            </div>
                            <div class="media-bd">
                                <h4 class="hdg hdg_7 mix-hdg_orange">Title Text</h4>
                                <p>
                                    <a class="link" href="#">Lorem ipsum dolor sit amet</a>, consectetur adipisicing elit. Veniam, sed esse fugiat neque mollitia
                                    excepturi optio laudantium vel praesentium possimus.

                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque auctor tortor quis vestibulum
                                    vehicula. Nam felis purus, euismod sit amet sem id, gravida faucibus elit. Cras tortor erat, porta
                                    quis dapibus quis, fringilla non justo. Maecenas pellentesque suscipit ipsum a interdum. Mauris laoreet,
                                    nisi nec placerat dictum, justo odio eleifend augue, et aliquam nulla metus at lacus. Phasellus eu
                                    porttitor libero, vitae luctus nulla. Phasellus sit amet nunc tortor. Nullam et odio nunc. Aliquam vitae
                                    pulvinar orci, eu viverra neque.<br/><br/>
                                    <span class="bold">Markets:</span> Belgium, <a class="link" href="#">France</a>, Netherlands, <a class="link" href="#">United Kingdom</a>, <a class="link" href="#">United states</a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        <div>
    </li>
    <li class="blocks-item">
        <div class="box">
            <div class="box-content">
                <div class="feature">
                    <div class="feature-element">
                        <img class="imgFrm" src="http://placekitten.com/197/151" alt="" />
                    </div>
                    <div class="feature-bd">
                        <p>Lorem ipsum dolor amet, consectetur adipiscing elit...</p>
                    </div>

                    <div class="js-fullDescription">
                        <div class="media">
                            <div class="media-element">
                                <img src="http://placekitten.com/288/199" alt="" />
                            </div>
                            <div class="media-bd">
                                <h4 class="hdg hdg_7 mix-hdg_orange">Title Text</h4>
                                <p>
                                    <a class="link" href="#">Lorem ipsum dolor sit amet</a>, consectetur adipisicing elit. Veniam, sed esse fugiat neque mollitia
                                    excepturi optio laudantium vel praesentium possimus.

                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque auctor tortor quis vestibulum
                                    vehicula. Nam felis purus, euismod sit amet sem id, gravida faucibus elit. Cras tortor erat, porta
                                    quis dapibus quis, fringilla non justo. Maecenas pellentesque suscipit ipsum a interdum. Mauris laoreet,
                                    nisi nec placerat dictum, justo odio eleifend augue, et aliquam nulla metus at lacus. Phasellus eu
                                    porttitor libero, vitae luctus nulla. Phasellus sit amet nunc tortor. Nullam et odio nunc. Aliquam vitae
                                    pulvinar orci, eu viverra neque.<br/><br/>
                                    <span class="bold">Markets:</span> Belgium, <a class="link" href="#">France</a>, Netherlands, <a class="link" href="#">United Kingdom</a>, <a class="link" href="#">United states</a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        <div>
    </li>
    <li class="blocks-item">
        <div class="box">
            <div class="box-content">
                <div class="feature">
                    <div class="feature-element">
                        <img class="imgFrm" src="http://placekitten.com/197/151" alt="" />
                    </div>
                    <div class="feature-bd">
                        <p>Lorem ipsum dolor amet, consectetur adipiscing elit...</p>
                    </div>

                    <div class="js-fullDescription">
                        <div class="media">
                            <div class="media-element">
                                <img src="http://placekitten.com/288/199" alt="" />
                            </div>
                            <div class="media-bd">
                                <h4 class="hdg hdg_7 mix-hdg_orange">Title Text</h4>
                                <p>
                                    <a class="link" href="#">Lorem ipsum dolor sit amet</a>, consectetur adipisicing elit. Veniam, sed esse fugiat neque mollitia
                                    excepturi optio laudantium vel praesentium possimus.

                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque auctor tortor quis vestibulum
                                    vehicula. Nam felis purus, euismod sit amet sem id, gravida faucibus elit. Cras tortor erat, porta
                                    quis dapibus quis, fringilla non justo. Maecenas pellentesque suscipit ipsum a interdum. Mauris laoreet,
                                    nisi nec placerat dictum, justo odio eleifend augue, et aliquam nulla metus at lacus. Phasellus eu
                                    porttitor libero, vitae luctus nulla. Phasellus sit amet nunc tortor. Nullam et odio nunc. Aliquam vitae
                                    pulvinar orci, eu viverra neque.<br/><br/>
                                    <span class="bold">Markets:</span> Belgium, <a class="link" href="#">France</a>, Netherlands, <a class="link" href="#">United Kingdom</a>, <a class="link" href="#">United states</a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        <div>
    </li>
    <li class="blocks-item">
        <div class="box">
            <div class="box-content">
                <div class="feature">
                    <div class="feature-element">
                        <img class="imgFrm" src="http://placekitten.com/197/151" alt="" />
                    </div>
                    <div class="feature-bd">
                        <p>Lorem ipsum dolor amet, consectetur adipiscing elit...</p>
                    </div>

                    <div class="js-fullDescription">
                        <div class="media">
                            <div class="media-element">
                                <img src="http://placekitten.com/288/199" alt="" />
                            </div>
                            <div class="media-bd">
                                <h4 class="hdg hdg_7 mix-hdg_orange">Title Text</h4>
                                <p>
                                    <a class="link" href="#">Lorem ipsum dolor sit amet</a>, consectetur adipisicing elit. Veniam, sed esse fugiat neque mollitia
                                    excepturi optio laudantium vel praesentium possimus.

                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque auctor tortor quis vestibulum
                                    vehicula. Nam felis purus, euismod sit amet sem id, gravida faucibus elit. Cras tortor erat, porta
                                    quis dapibus quis, fringilla non justo. Maecenas pellentesque suscipit ipsum a interdum. Mauris laoreet,
                                    nisi nec placerat dictum, justo odio eleifend augue, et aliquam nulla metus at lacus. Phasellus eu
                                    porttitor libero, vitae luctus nulla. Phasellus sit amet nunc tortor. Nullam et odio nunc. Aliquam vitae
                                    pulvinar orci, eu viverra neque.<br/><br/>
                                    <span class="bold">Markets:</span> Belgium, <a class="link" href="#">France</a>, Netherlands, <a class="link" href="#">United Kingdom</a>, <a class="link" href="#">United states</a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        <div>
    </li>
    <li class="blocks-item">
        <div class="box">
            <div class="box-content">
                <div class="feature">
                    <div class="feature-element">
                        <img class="imgFrm" src="http://placekitten.com/197/151" alt="" />
                    </div>
                    <div class="feature-bd">
                        <p>Lorem ipsum dolor amet, consectetur adipiscing elit...</p>
                    </div>

                    <div class="js-fullDescription">
                        <div class="media">
                            <div class="media-element">
                                <img src="http://placekitten.com/288/199" alt="" />
                            </div>
                            <div class="media-bd">
                                <h4 class="hdg hdg_7 mix-hdg_orange">Title Text</h4>
                                <p>
                                    <a class="link" href="#">Lorem ipsum dolor sit amet</a>, consectetur adipisicing elit. Veniam, sed esse fugiat neque mollitia
                                    excepturi optio laudantium vel praesentium possimus.

                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque auctor tortor quis vestibulum
                                    vehicula. Nam felis purus, euismod sit amet sem id, gravida faucibus elit. Cras tortor erat, porta
                                    quis dapibus quis, fringilla non justo. Maecenas pellentesque suscipit ipsum a interdum. Mauris laoreet,
                                    nisi nec placerat dictum, justo odio eleifend augue, et aliquam nulla metus at lacus. Phasellus eu
                                    porttitor libero, vitae luctus nulla. Phasellus sit amet nunc tortor. Nullam et odio nunc. Aliquam vitae
                                    pulvinar orci, eu viverra neque.<br/><br/>
                                    <span class="bold">Markets:</span> Belgium, <a class="link" href="#">France</a>, Netherlands, <a class="link" href="#">United Kingdom</a>, <a class="link" href="#">United states</a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        <div>
    </li>
    <li class="blocks-item">
        <div class="box">
            <div class="box-content">
                <div class="feature">
                    <div class="feature-element">
                        <img class="imgFrm" src="http://placekitten.com/197/151" alt="" />
                    </div>
                    <div class="feature-bd">
                        <p>Lorem ipsum dolor amet, consectetur adipiscing elit...</p>
                    </div>

                    <div class="js-fullDescription">
                        <div class="media">
                            <div class="media-element">
                                <img src="http://placekitten.com/288/199" alt="" />
                            </div>
                            <div class="media-bd">
                                <h4 class="hdg hdg_7 mix-hdg_orange">Title Text</h4>
                                <p>
                                    <a class="link" href="#">Lorem ipsum dolor sit amet</a>, consectetur adipisicing elit. Veniam, sed esse fugiat neque mollitia
                                    excepturi optio laudantium vel praesentium possimus.

                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque auctor tortor quis vestibulum
                                    vehicula. Nam felis purus, euismod sit amet sem id, gravida faucibus elit. Cras tortor erat, porta
                                    quis dapibus quis, fringilla non justo. Maecenas pellentesque suscipit ipsum a interdum. Mauris laoreet,
                                    nisi nec placerat dictum, justo odio eleifend augue, et aliquam nulla metus at lacus. Phasellus eu
                                    porttitor libero, vitae luctus nulla. Phasellus sit amet nunc tortor. Nullam et odio nunc. Aliquam vitae
                                    pulvinar orci, eu viverra neque.<br/><br/>
                                    <span class="bold">Markets:</span> Belgium, <a class="link" href="#">France</a>, Netherlands, <a class="link" href="#">United Kingdom</a>, <a class="link" href="#">United states</a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        <div>
    </li>
</ul>
```

*/

.blocks {
    *zoom: 1; /* clear for lte ie7 */
}

.blocks:before,
.blocks:after {
    content: " ";
    display: table;
}

.blocks:after {
    clear: both;
}

.blocks-item {
    float: left;
}

/* clearfix for blocks-items to allow tooltip to break out*/
.blocks-item:before,
.blocks-item:after {
    content: " ";
    display: table;
}

.blocks-item:after {
    clear: both;
}

.blocks-item:hover {
    cursor: pointer;
}

.blocks-item:hover .box {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
}

.blocks_2up {
    margin-left: -2%;
}

.blocks_2up .blocks-item {
    width: 48%;
    margin-left: 2%;
}

.blocks_3up {
    margin-left: -2.318034333%;
}

.blocks_3up .blocks-item {
    width: 31.015299%; /* (223 / 719) * 100 */
    margin-left: 2.318034333%; /* (100 - 93.045897) / 3 */
}

.blocks_4up {
    margin-left: -2.0103093%;
}

.blocks_4up .blocks-item {
    width: 22.9896907%; /* (223 / 970) * 100 */
    margin-left: 2.0103093%; /* (100 - 91.9587628) / 4 */
}

.blocks .blocks-item_fullWidth {
    overflow: hidden;
    padding: 11px 3px 0 0;
    width: 97.4%;
}

.blocks .blocks-item_fullWidth:hover {
    cursor: default;
}

.hghContrast .blocks-item:hover .box {
    border: 1px solid #444444;
    -webkit-box-shadow: 0 3px #444444;
    -moz-box-shadow: 0 3px #444444;
    -ms-box-shadow: 0 3px #444444;
    -o-box-shadow: 0 3px #444444;
    box-shadow: 0 3px #444444;
}

/* Brand Filter 
.sticky-wrapper {height:auto !important;}
.sticky-wrapper + #AJAXHTML {float:right;margin-left:0;width:81%;}- authoring*/
.brand-filter + #AJAXHTML {float:right;margin-left:0;width:81%;} 
.brand-filter {float:left;position:relative;width:160px;padding-right:20px;}
.brand-filter h2 {font-size:16px;width:100%;color: #F95602;font-family: 'Arial Black',Gadget,sans-serif;font-weight: bold;line-height: 1;margin-bottom: 12px;text-transform: lowercase;}
.brand-filter h3 {font-size:13px;width:100%;padding-bottom:5px;border-bottom:1px solid #999;width:100%;font-weight:bold;text-transform: lowercase;}
.brand-filter .title {float:left;font-style:italic;font-size:15px;margin:13px 0 8px 0;color:#F95602;}
.brand-filter .power-brands {float:left;font-size:13px;margin:13px 0 5px 0;color:#F95602;width:100%;position:relative;}
.brand-filter .power-brands a {display:inline-block;width:90%;}
.brand-filter ul {float:left;width:100%;list-style:none;margin:0;padding:0;}
.brand-filter li {float:left;width:100%;font-size:13px;position:relative;margin-bottom:11px;}
.brand-filter li a {color:#000;display:inline-block;width:90%;}
.brand-filter .selected {margin: -4px 0 5px -6px;border:1px solid #B2EBEE;background-color:#fff;cursor:pointer;
    -webkit-box-shadow: 0 3px #b2ebee;
    -moz-box-shadow: 0 3px #b2ebee;
    -ms-box-shadow: 0 3px #b2ebee;
    -o-box-shadow: 0 3px #b2ebee;
    box-shadow: 0 3px #b2ebee;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    *zoom: 1;}
.brand-filter .power-brands.selected {margin:8px 0 0 -5px;}
.brand-filter .selected a {cursor:default;padding:4px;}
.brand-filter .selected span:after {content:'x';position:absolute;right:2px;top:2px;width:15px;padding-bottom:2px;border-radius:10px;border:1px solid #bbb; background-color:#aaa; color:#fff;font-weight:bold;text-align:center;}
.brand-filter .gray a {color:#ccc;cursor:default;}


/* ---------------------------------------------------------------------
Gallery Item Styles
------------------------------------------------------------------------ */

/*doc

---

title: Gallery Item
name: galleryItem
category: Modules

---

Gallery items displayed in a gallery - see gallery for code examples.

```html_example
<div class="grid">
    <div class="grid-row">
        <div class="grid-row-col grid-row-col_size3of12">
            <div class="galleryItem">
                <div class="galleryItem-hd">
                    <img class="imgFrm" src="http://placekitten.com/197/151" alt="" />
                </div>
                <div class="galleryItem-bd">
                    <div class="galleryItem-bd-lft">
                        <p>Lorem ipsum dolor amet, consectetur adipiscing elit...</p>
                    </div>
                    <div class="galleryItem-bd-rght tooltip_icon">
                        <a href="#" class="galleryDwnldBtn">Download</a>
                        <span class="mix-tooltip_upper">Download</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="grid-row-col grid-row-col_size3of12">
            <div class="hghContrast">
                <div class="galleryItem">
                    <div class="galleryItem-hd">
                        <img class="imgFrm" src="http://placekitten.com/197/151" alt="" />
                    </div>
                    <div class="galleryItem-bd">
                        <div class="galleryItem-bd-lft">
                            <p>Lorem ipsum dolor amet, consectetur adipiscing elit...</p>
                        </div>
                        <div class="galleryItem-bd-rght tooltip_icon">
                            <a href="#" class="galleryDwnldBtn">Download</a>
                            <span class="mix-tooltip_upper">Download</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="grid-row">
        <div class="grid-row-col grid-row-col_size3of12">
            <div class="galleryItem">
                <div class="galleryItem-hd galleryItem-hd_swoosh">
                    <img class="imgFrm" src="http://placekitten.com/197/252" alt="" />
                </div>
                <div class="galleryItem-bd">
                    <div class="galleryItem-bd-lft">
                        <p>Lorem ipsum dolor amet, consectetur adipiscing elit...</p>
                    </div>
                    <div class="galleryItem-bd-rght tooltip_icon">
                        <a href="#" class="galleryDwnldBtn">Download</a>
                        <span class="mix-tooltip_upper">Download</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="grid-row-col grid-row-col_size3of12">
            <div class="hghContrast">
                <div class="galleryItem">
                    <div class="galleryItem-hd galleryItem-hd_swoosh">
                        <img class="imgFrm" src="http://placekitten.com/197/252" alt="" />
                    </div>
                    <div class="galleryItem-bd">
                        <div class="galleryItem-bd-lft">
                            <p>Lorem ipsum dolor amet, consectetur adipiscing elit...</p>
                        </div>
                        <div class="galleryItem-bd-rght tooltip_icon">
                            <a href="#" class="galleryDwnldBtn">Download</a>
                            <span class="mix-tooltip_upper">Download</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
```

*/

.galleryItem {
    padding: 10px;
    *zoom: 1; /* clear for lte ie7 */
}

.galleryItem:before,
.galleryItem:after {
    content: " ";
    display: table;
}

.galleryItem:after {
    clear: both;
}

.galleryItem-hd {
    margin-bottom: 13px;
    padding-right: 3px;
}

.galleryItem-hd_noMargin {
    margin-bottom: 0;
}

.galleryItem-hd_swoosh {
    position: relative;
}

.galleryItem-hd_swoosh:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 16px;
    background: url('../../images/swoosh.png') no-repeat 0 0;
}

.galleryItem-hd img {
    width: 100%;
    max-width: 100%;
    z-index: 0;
}

.galleryItem-bd {
    padding-top: 13px;
    font-size: 13px;
    color: #000000;
    line-height: 1.08;
}

.galleryItem-bd_noPadding {
    padding-top: 0;
}

.galleryItem-bd:before,
.galleryItem-bd:after {
    content: " ";
    display: table;
}

.galleryItem-bd:after {
    clear: both;
}

.galleryItem-bd-lft {
    float: left;
    width: 78%;
    margin-right: 2%;
}

.galleryItem-bd-rght {
    float: right;
    width: 20%;
}

/* ---------------------------------------------------------------------
High Contrast
------------------------------------------------------------------------ */

.hghContrast .galleryItem-bd {
    color: #ffffff;
}

.hghContrast .galleryItem-hd_swoosh:after {
    background: url('../../images/swoosh_hc.png') no-repeat 0 0;
}

/* ---------------------------------------------------------------------
Header Styles
------------------------------------------------------------------------ */

.header {
    min-width: 1024px; /* Allows expansion to 100% of window while not cutting off content when < 1024px */
    overflow: hidden;
}

.header_mainNav {
    padding-bottom: 45px;
}

.header_mainNav:before {
    content: ' ';
    width: 100%;
    height: 122px;
    background: url(../../images/header-regions-open-bg.png) repeat-x;
    position: absolute;
    opacity: 0;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -ms-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}

.masthead_hideAccessibility .header_mainNav:before {
    opacity: 1;
}

.masthead_hideAll .header_mainNav:before {
    opacity: 0;
}

.home .masthead_hideAccessibility .header_mainNav:before {
    opacity: 0;
}

.hghContrast .masthead_hideAccessibility .header_mainNav:before {
    opacity: 0;
}

.masthead_hideAll .header_mainNav {
    background: inherit;
}

.home .header_mainNav {
    padding-bottom: 11px;
}

.header-container {
    width: 1024px;
    margin: 0 auto;
}

.header-container:before,
.header-container:after {
    content: " ";
    display: table;
}

.header-container:after {
    clear: both;
}

.header-container-mask {
    width: 1440px;
    height: 60px;
    margin: 0 -208px -60px;
    float: left;
    background-color: #4f2170;
    -webkit-mask-box-image: url(../../images/header-mask-webkit.png); * Applies PNG Mask in Chrome/Safari/Opera */
    -webkit-clip-path: url(../../images/masks.svg#headerMask);
    -ms-clip-path: url(../../images/masks.svg#headerMask);
    -o-clip-path: url(../../images/masks.svg#headerMask);
    clip-path: url(../../images/masks.svg#headerMask);
}

.header-container-mask_left {
    float: left;
    margin-left: -1646px;
}

.header-container-mask_right {
    float: right;
    margin-right: -1646px;
}

.header-main {
    float:left;
    width: 997px;
    margin: 6px 0 0 27px;
}

.header:before,
.header:after {
    content: " ";
    display: table;
}

.header:after {
    clear: both;
}

.logo {
    float:left;
}

.logo-link-img_hghContrast {
    display: none;
}

/* ---------------------------------------------------------------------
High Contrast
------------------------------------------------------------------------ */

.hghContrast .header-container-mask {
    background: #000000;
}

.hghContrast .logo-link-img_normal {
    display: none;
}

.hghContrast .logo-link-img_hghContrast {
    display: block;
}

/* ---------------------------------------------------------------------
IE10/11
------------------------------------------------------------------------ */
html[data-useragent*='MSIE 10.0'] .header-container-mask,
html[data-useragent*='MSIE 11.0'] .header-container-mask {
    background: none;
}

html[data-useragent*='MSIE 10.0'] .header-container-mask-wrapper,
html[data-useragent*='MSIE 11.0'] .header-container-mask-wrapper {
    width: 100%;
    height: 100%;
    background: url(../../images/header-mask-ie.png) no-repeat;
}

/* ---------------------------------------------------------------------
Heading Banner Styles
------------------------------------------------------------------------ */

/*doc

---

title: Heading Banner
name: heading_banner
category: Modules

---

A Highlight Container contains a date first followed by an optional image with a title and text next to the image side by side.
Also has a background color when hovering on it.

```html_example

<div class="box">
    <div class="box-content">
        <div class="hdgBnr hdgBnr_left">
            <div class="hdgBnr-bkgLeft">
                <div class="hdgBnr-bkgLeft-tail">
                    <div class="hdgBnr-bkgLeft-tail-top hdgBnr-bkgLeft-tail-top_green"></div>
                    <div class="hdgBnr-bkgLeft-tail-middle hdgBnr-bkgLeft-tail-middle_green"></div>
                    <div class="hdgBnr-bkgLeft-tail-bottom hdgBnr-bkgLeft-tail-bottom_green"></div>
                </div>
                <div class="hdgBnr-bkgLeft-top hdgBnr-bkgLeft-top_green"></div>
                <div class="hdgBnr-bkgLeft-middle hdgBnr-bkgLeft-middle_green">
                    <div class="hdgBnrText">
                        <h2 class="hdgBnrText-hdg">far away...</h2>
                    </div>
                </div>
                <div class="hdgBnr-bkgLeft-bottom hdgBnr-bkgLeft-bottom_green"></div>
            </div>
        </div>

        <div class="grid">
            <div class="grid-row">
                <div class="grid-row-col grid-row-col_size5of12 mix-grid-row-col_push3of12">
                    <ul class="vList">
                        <li>Product and Local News Releases</li>
                        <li>Annual Report</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="box">
    <div class="box-content">
        <div class="hdgBnr hdgBnr_left">
            <div class="hdgBnr-bkgLeft">
                <div class="hdgBnr-bkgLeft-tail">
                    <div class="hdgBnr-bkgLeft-tail-top hdgBnr-bkgLeft-tail-top_blue"></div>
                    <div class="hdgBnr-bkgLeft-tail-middle hdgBnr-bkgLeft-tail-middle_blue"></div>
                    <div class="hdgBnr-bkgLeft-tail-bottom hdgBnr-bkgLeft-tail-bottom_blue"></div>
                </div>
                <div class="hdgBnr-bkgLeft-top hdgBnr-bkgLeft-top_blue"></div>
                <div class="hdgBnr-bkgLeft-middle hdgBnr-bkgLeft-middle_blue">
                    <div class="hdgBnrText">
                        <h2 class="hdgBnrText-hdg">far away...</h2>
                    </div>
                </div>
                <div class="hdgBnr-bkgLeft-bottom hdgBnr-bkgLeft-bottom_blue"></div>
            </div>
        </div>

        <div class="grid">
            <div class="grid-row">
                <div class="grid-row-col grid-row-col_size5of12 mix-grid-row-col_push3of12">
                    <ul class="vList">
                        <li>Product and Local News Releases</li>
                        <li>Annual Report</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="box">
    <div class="box-content">
        <div class="hdgBnr hdgBnr_right">
            <div class="hdgBnr-bkgRight">
                <div class="hdgBnr-bkgRight-top hdgBnr-bkgRight-top_green"></div>
                <div class="hdgBnr-bkgRight-middle hdgBnr-bkgRight-middle_green">
                    <div class="hdgBnrText hdgBnrText_right">
                        <h2 class="hdgBnrText-hdg hdgBnrText-hdg_right">far away...</h2>
                    </div>
                </div>
                <div class="hdgBnr-bkgRight-bottom hdgBnr-bkgRight-bottom_green"></div>
                <div class="hdgBnr-bkgRight-tail">
                    <div class="hdgBnr-bkgRight-tail-top hdgBnr-bkgRight-tail-top_green"></div>
                    <div class="hdgBnr-bkgRight-tail-middle hdgBnr-bkgRight_tail-middle_green"></div>
                    <div class="hdgBnr-bkgRight-tail-bottom hdgBnr-bkgRight-tail-bottom_green"></div>
                </div>
            </div>
        </div>

        <div class="grid">
            <div class="grid-row">
                <div class="grid-row-col grid-row-col_size5of12">
                    <ul class="vList">
                        <li>Product and Local News Releases</li>
                        <li>Annual Report</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="hghContrast">
    <div class="box">
        <div class="box-content">
            <div class="hdgBnr hdgBnr_right">
                <div class="hdgBnr-bkgRight">
                    <div class="hdgBnr-bkgRight-top hdgBnr-bkgRight-top_green"></div>
                    <div class="hdgBnr-bkgRight-middle hdgBnr-bkgRight-middle_green">
                        <div class="hdgBnrText hdgBnrText_right">
                            <h2 class="hdgBnrText-hdg hdgBnrText-hdg_right">far away...</h2>
                        </div>
                    </div>
                    <div class="hdgBnr-bkgRight-bottom hdgBnr-bkgRight-bottom_green"></div>
                    <div class="hdgBnr-bkgRight-tail">
                        <div class="hdgBnr-bkgRight-tail-top hdgBnr-bkgRight-tail-top_green"></div>
                        <div class="hdgBnr-bkgRight-tail-middle hdgBnr-bkgRight-tail-middle_green"></div>
                        <div class="hdgBnr-bkgRight-tail-bottom hdgBnr-bkgRight-tail-bottom_green"></div>
                    </div>
                </div>
            </div>

            <div class="grid">
                <div class="grid-row">
                    <div class="grid-row-col grid-row-col_size5of12">
                        <ul class="vList">
                            <li>Product and Local News Releases</li>
                            <li>Annual Report</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
```
*/

.hdgBnr {
    position: absolute;
    top: 14px;
    z-index: 1;
}

.hdgBnr_left {
    margin-left: -19px;
}

.hdgBnr_right {
    right: -6px;
    right: 104px\0/; /* Needed for IE 8 & 9 to position correctly. */
}

.hdgBnr_noBox {
    top: auto;
    margin: 75px 0 40px 31px;
}

.hdgBnr-bkg {
    position: absolute;
    margin: 4px 0 0 -56px;
    padding: 12px 0 0 41px;
}

.hdgBnr-bkgLeft-tail {
    position: absolute;
    top: 3px;
    left: -16px;
    height: 100%;
    z-index: -1;
}

.hdgBnr-bkgLeft-top {
    margin-bottom: -17px;
    width: 226px;
    height: 32px;
}

.hdgBnr-bkgLeft-top_green {
    background: url('../../images/banner-sprite.png') no-repeat -26px -61px;

}

.hdgBnr-bkgLeft-top_blue {
    background: url('../../images/banner-sprite.png') no-repeat -26px 0;
}
.hdgBnr-bkgLeft-middle {
    width: 208px;
}

.hdgBnr-bkgLeft-middle_green {
    background-color: #bdc527;
}

.hdgBnr-bkgLeft-middle_blue {
    background-color: #6db4c5;
}

.hdgBnr-bkgLeft-bottom {
    margin-top: -5px;
    width: 226px;
    height: 26px;
}

.hdgBnr-bkgLeft-bottom_green {
    background: url('../../images/banner-sprite.png') no-repeat -26px -94px;
}

.hdgBnr-bkgLeft-bottom_blue  {
    background: url('../../images/banner-sprite.png') no-repeat -26px -33px;
}

.hdgBnr-bkgLeft-tail-top {
    position: absolute;
    top: 12px;
    width: 24px;
    height: 23px;
}

.hdgBnr-bkgLeft-tail-top_green {
    background: url('../../images/banner-sprite.png') no-repeat 0 -71px;
}

.hdgBnr-bkgLeft-tail-top_blue {
    background: url('../../images/banner-sprite.png') no-repeat 0 -9px;
}

.hdgBnr-bkgLeft-tail-bottom {
    position: absolute;
    bottom: 2px;
    width: 24px;
    height: 23px;
}

.hdgBnr-bkgLeft-tail-bottom_green {
    background: url('../../images/banner-sprite.png') no-repeat 0 -94px;
}

.hdgBnr-bkgLeft-tail-bottom_blue {
    background: url('../../images/banner-sprite.png') no-repeat 0 -31px;
}


.hdgBnr-bkgLeft-tail-middle {
    width: 14px;
    height: 72%;
    margin-left: 10px;
    margin-top: 12px;
}

.hdgBnr-bkgLeft-tail-middle_green {
    background-color: #a6ad23;
}

.hdgBnr-bkgLeft-tail-middle_blue {
    background-color: #619fae;
}

/*****************************************
Right Side Banner
*****************************************/

.hdgBnr-bkgRight-top {
    margin-bottom: -13px;
    width: 389px;
    height: 28px;
}

.hdgBnr-bkgRight-top_green {
    background: url('../../images/banner-right-sprite.png') no-repeat 0 0;
}

.hdgBnr-bkgRight-bottom {
    margin-top: -16px;
    width: 389px;
    height: 25px;
}

.hdgBnr-bkgRight-bottom_green {
    background: url('../../images/banner-right-sprite.png') no-repeat 0 -30px;
}

.hdgBnr-bkgRight-middle {
    width: 379px;
    margin-left: 10px;
}

.hdgBnr-bkgRight-middle_green {
    background-color: #bdc527;
}

.hdgBnr-bkgRight-tail-middle {
    width: 14px;
    height: 71%;
    margin-left: 0;
    margin-top: 12px;
}

.hdgBnr-bkgRight-tail {
    position: absolute;
    top: 10px;
    right: -9px;
    height: 100%;
    z-index: -1;
}

.hdgBnr-bkgRght-tail-middle_green {
    background-color: #a6ad23;
}

.hdgBnr-bkgRight-tail-top {
    position: absolute;
    top: 12px;
    width: 24px;
    height: 23px;
}

.hdgBnr-bkgRight-tail-top_green {
    background: url('../../images/banner-right-sprite.png') no-repeat -392px -5px;
}

.hdgBnr-bkgRight-tail-bottom {
    position: absolute;
    bottom: 2px;
    width: 24px;
    height: 23px;
}

.hdgBnr-bkgRight-tail-bottom_green {
    background: url('../../images/banner-right-sprite.png') no-repeat -392px -30px;
}

/*****************************************
Banner Text
*****************************************/

.hdgBnrText {
    padding-left: 25px;
    padding-right: 20px;
    width: 163px;
    z-index: 10;
}

.hdgBnrText-hdg {
    display: inline-block;
    width: 153px;
    padding-bottom: 6px;
    color: #ffffff;
    font-family: "Arial Black", Gadget, sans-serif;
    text-transform: lowercase;
}

.hdgBnrText-hdg:after {
    content: " ";
    position: absolute;
    display: inline-block;
    top: 46%;
    right: 26px;
    width: 22px;
    height: 15px;
    background: url('../../images/banner-icon-white.png') no-repeat 0 0;
}

.hdgBnrText-hdg_right {
    font-size: 24px;
}

.hdgBnrText-hdg_right:after {
    width: 25px;
    height: 18px;
    top: 34%;
    margin-left: 13px;
    right: auto;
    background: url('../../images/banner-icon-white.png') no-repeat -22px 0;
}

/*************************
High Contrast
*************************/
.hghContrast .hdgBnrText-hdg {
    color: #000000;
}

/* ---------------------------------------------------------------------
Hero Banner Styles
------------------------------------------------------------------------ */

/*doc

---

title: Hero Banner
name: hroBnr
category: Modules

---

A large page banner that features a video or image, heading, text block and button.  TODO: To be updated to revision 2.

```html_example

<div class="grid">
    <div class="grid-row">
        <div class="hroBnr">
            <div class="hroBnr-bd">
                <div class="hroBnr-bd-media">
                    <img class="imgFrm imgFrm_open" src="http://placekitten.com/448/274" alt="Hero Image" />
                </div>
                <div class="hroBnr-bd-content">
                    <h2 class="hdg hdg_3sm">long hero banner heading</h2>
                    <p class="hroBnr-bd-content-text">
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna.
                    </p>
                    <a href="#" class="btn btn_whiteOrange mix-btn_lrg">watch</a>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="hghContrast">
    <div class="grid">
        <div class="grid-row">
            <div class="hroBnr">
                <div class="hroBnr-bd">
                    <div class="hroBnr-bd-media">
                        <iframe class="imgFrm imgFrm_open imgFrm_round" width="448" height="274" src="//www.youtube.com/embed/zoKj7TdJk98" frameborder="0" allowfullscreen></iframe>
                    </div>
                    <div class="hroBnr-bd-content">
                        <h2 class="hdg hdg_3sm">long hero banner heading</h2>
                        <p class="hroBnr-bd-content-text">
                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna.
                        </p>
                        <a href="#" class="btn btn_whiteOrange mix-btn_lrg">watch</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
```

*/

/* TODO: is this the most updated design????; */

.hroBnr {
    width: 100%;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    background: #ff4e1b url("../../images/hero-banner-bg.png") no-repeat bottom right;
    box-shadow: 0 0 6px 2px #888888;
    margin-bottom: 27px;
}

.hroBnr-bd {
    display: table;
    padding: 33px;
}

.hroBnr-bd-media {
    display: table-cell;
    -webkit-border-radius: 3px 0 0 3px;
    -moz-border-radius: 3px 0 0 3px;
    -o-border-radius: 3px 0 0 3px;
    border-radius: 3px 0 0 3px;
}

.hroBnr-bd-media-img_hasBorder {
    border: 1px solid #666666;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;
}

.hroBnr-bd-content {
    display: table-cell;
    padding: 0 21px;
    vertical-align: middle;
}

.hroBnr-bd-content-text {
    margin: 10px 0 14px 0;
    font-size: 14px;
    line-height: 1.43; /* 20px/14px */
    color: #ffffff;
}

.hroBnr-bd-content-text a {color:#fff; text-decoration:underline;}

/*************************
High Contrast
*************************/

.hghContrast .hroBnr {
    background-image: none;
}

/* ---------------------------------------------------------------------
Hero Carousel Styles
------------------------------------------------------------------------ */

/* The Hero Carousel class uses different methods to achieve masking depending on browser. */
.hroCarousel {
}

.hroCarousel-slide {
	float:left;
	width:582px;
	margin:20px 30px 0 20px;
	display:none;
}

.hroCarousel-slide_isCurrent {
	display:block;
}

.hroCarousel-slide-img {
	width:582px;
	height:336px;
    margin-bottom: 25px;
    display:none;
}
.hroCarousel-slide_isCurrent .hroCarousel-slide-img {display:block;}
.hroCarousel-slide_isCurrent .btn.mix-btn_carousel {display:inline-block;width:50px;}

.hroCarousel-slide .contentContainer {width:100%;margin:0;}
.hroCarousel-slide .contentContainer .grid-row-col_size8of12 {width:100%;margin-left:0;}

.hroCarousel-sideFades-color:first-child {
}

/* Image Slide side fade-outs */
.hroCarousel-slide-img:before,
.hroCarousel-slide-img:after {
	    position: absolute;
    top: 0;
    content: '';
    display: block;
    width: 250px;
    height: 480px;
}

.hroCarousel-slide-img:before {
	    margin: 0 0 0 -1px;
    left: 0;
}

.hroCarousel-slide-img:after {
	    margin: 0 0 0 -1px;
    left: 0;
}


/* ---------------------------------------------------------------------
Hero Carousel Slide Body Styles
------------------------------------------------------------------------ */

.hroCarouselSldBd {
}

.hroCarouselSldBd-text {
  width: 400px;
  margin-top: -5px;
  font-size: 16px;
  font-weight: bolder;
  text-transform:lowercase;
}


/* ---------------------------------------------------------------------
Hero Carousel Controller Styles
------------------------------------------------------------------------ */

.hroCarouselCntrlr {
	float:right;
	width:330px;
	margin-top:20px;
	border-left:2px solid #f5f5f5;
}

.hroCarouselCntrlr-item {
    float: left;
	width:100%;
	height:105px;
	border: 2px solid #f5f5f5;
    border-right: none;
    display: table;
    
}
.hroCarouselCntrlr-item:first-child{
    border-top:none;
}
.hroCarouselCntrlr-item:last-child{
    border-bottom:none;
}
.hroCarouselCntrlr-item-link {
    color: #4f2070;
    font-size: 14px;
	font-weight:bold;
    height: 105px;
    width: 270px;
    padding: 0 15px;
    display: table-cell;
    vertical-align:middle;
	text-transform:lowercase;
}
.hroCarouselCntrlr-item-link:hover{
    background-color: #f5f5f5;
}
.hroCarouselCntrlr-item-link_isCurrent:hover{
    background-color: #4f2070;
}
.hroCarouselCntrlr-item-link_isCurrent {
	background-color: #4f2070;
    color: #fff;
    position: relative;
    font-weight: bold;
    
}
.hroCarouselCntrlr-item-link_isCurrent:before {content:'';position:absolute;background:url(../../uploads/home/slide-pointer.png) no-repeat center center;width:13px;height:25px;margin-left:-27px;top: 42px;}

/* ---------------------------------------------------------------------
Header Extra Styles
------------------------------------------------------------------------ */

.headerExtra {
	width:1024px;
	margin:0 auto;
}

/* These classes are seperated fo increased legibility in HTML markup */
.headerExtra-hd,
.headerExtra-bd,
.headerExtra-ft {
}

/* Use Clearfix for headerExtra-hd, -bd, and -ft */
.headerExtra-hd:before,
.headerExtra-hd:after,
.headerExtra-bd:before,
.headerExtra-bd:after,
.headerExtra-ft:before,
.headerExtra-ft:after {
   content: " ";
   display: table;
}

.headerExtra-hd:after,
.headerExtra-bd:after,
.headerExtra-ft:after {
    clear: both;
}

.headerExtra-hd {
}

.headerExtra-bd {
	float:left;
	 display: block;
}

.headerExtra-hd-cntrlr {
}

.headerExtra-ft-curveBottom {
}


/* ------------------------------------------------------
High Contrast
-------------------------------------------------------*/
.hghContrast  .headerExtra {
    background: url(../../images/headerExtra-bg.jpg) 0 -300px repeat-x;
}


/* ---------------------------------------------------------------------
Header Extra Mask Styles
------------------------------------------------------------------------ */

.headerExtraMask + .headerExtraMask + .headerExtraMask {
	float:left;
	width:630px;
}

/* Add foreground color block to minimze hard-stop */
.headerExtraMask-bd-foreground {
}

/* Continues carousel curve to the right, can be given a new BG to match post-gradient color */
.headerExtraMask_right {
	display:none;
}

/* Continues carousel curve to the left, can be given a new BG to match pre-gradient color */
.headerExtraMask_left {
	display:none;
}


/* The '.headerExtraMask-wrapper' class provides masking for IE */
.headerExtraMask-bd {
}

/* TODO - Hide SVG Gradient Images for IE10 */
.headerExtraMask-bd-gradient {
	display:none;
}

.headerExtraMask_left-gradient {
}

.chameleonCascade {display:none;}


/* ---------------------------------------------------------------------
Link Styles
------------------------------------------------------------------------ */

/*doc

---

title: Link
name: link
category: Base

---

General styling for links, apply to a tags.

```html_example
<a href="#">more &rsaquo;&rsaquo;</a>
```
*/

.link {
    text-decoration: none;
    color: #f95602;
    font-size: 12px;
}

.link_lrg {
    font-size: 15px;
    line-height: 1.33; /* 20px/15px */
}

.link:hover {
    text-decoration: underline;
}

.link:visted {
    color: #f95602;
}


/* ---------------------------------------------------------------------
hList Styles
------------------------------------------------------------------------ */

/*doc

---

title: hList
name: hList
category: Base

---

A horizontal list

```html_example

<ul class="hList">
    <li class="hList-item"><a class="hList-item-link" href="#">CORPORATE B-ROLLS</a></li>
    <li class="hList-item"><a class="hList-item-link" href="#">LOGOS</a></li>
    <li class="hList-item hList-item_last"><a class="hList-item-link" href="#">MANAGEMENT TEAM</a></li>
</ul>

```

*/

.hList {
    overflow: hidden;
}

.hList-item {
    float: left;
    font-size: 11px;
}

.hList-item:after {
    content: "|";
    margin: 0 12px;
}

.hList-item_last:after {
    content: "";
}

.hList-item-link,
.hList-item-link:visited {
    color: #4f2170;
}

.hList-item-link:hover {
    color: #bac405;
}

.hList-item-link-wellbeing,
.hList-item-link-wellbeing:visited {
    color: #4f2170;
}

.hList-item-link-wellbeing:hover {
    color: #F95602;
}

/* ---------------------------------------------------------------------
High Contrast
------------------------------------------------------------------------ */
.hghContrast .hList-item {
    color: #ffffff;
}

.hghContrast .hList-item-link,
.hghContrast .hList-item-link:visited {
    color: #ffffff;
}

.hghContrast .hList-item-link:hover {
    color: #bac405;
}
.hghContrast .hList-item-link-wellbeing,
.hghContrast .hList-item-link-wellbeing:visited {
    color: #ffffff;
}

.hghContrast .hList-item-link-wellbeing:hover {
    color: #F95602;
}

/* ---------------------------------------------------------------------
Main Navigation Styles
------------------------------------------------------------------------ */

.nrdMainNav {
    float:right;
    margin-top: 30px;
    font-family: 'Arial Black', Gadget, sans-serif;
    overflow: hidden;
}

.nrdMainNav-item {
    float: left;
    margin-left: 22px;
    font-size: 15px;
    line-height: 1.74;
}

.nrdMainNav-item-link,
.nrdMainNav-item-link:visited {
    display: block;
    color: #4f2170;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

/* Before is used for the icon on hover/active states */
.nrdMainNav-item-link:before {
    content: "";
    display: block;
    opacity: 0;
    width: 23px;
    height: 15px;
    margin: 5px auto -5px auto;
    -webkit-mask-box-image: url(../../images/navDrop-mask-webkit.png);
    -webkit-clip-path: url(../../images/masks.svg#navDrop);
    -ms-clip-path: url(../../images/masks.svg#navDrop);
    -o-clip-path: url(../../images/masks.svg#navDrop);
    clip-path: url(../../images/masks.svg#navDrop);
    /* background: url("../../images/tear-drop-sprite.png") no-repeat;
    background-position: 0px -32px; */
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}

.nrdMainNav-item-link:hover,
.nrdMainNav-item-link:visited:hover{
    color: #bac405;
    text-decoration: none;
}

.nrdMainNav-item-link:hover:before {
    background: #bac405;
    opacity: 1;
}

.nrdMainNav-item-link_isActive,
.nrdMainNav-item-link_isActive:visited {
    color: #f95602;
}

.nrdMainNav-item-link_isActive:before {
    background: #f95602;
    opacity: 1;
}

/************************************
High Contrast
************************************/
.hghContrast .nrdMainNav-item-link {
    color: #ffffff;
}

.hghContrast .nrdMainNav-item-link_isActive {
    color: #f95602;
}

.hghContrast .nrdMainNav-item-link:hover {
    color: #bac405;
}

/* ---------------------------------------------------------------------
IE10
------------------------------------------------------------------------ */

html[data-useragent*='MSIE 10.0'] .nrdMainNav-item-link:before {
    background: transparent;
}

html[data-useragent*='MSIE 10.0'] .nrdMainNav-item-link:hover:before {
    content: "  ";
    background: transparent url("../../images/tear-drop-sprite.png") no-repeat;
    background-position: 0px -32px;
}

html[data-useragent*='MSIE 10.0'] .nrdMainNav-item-link_isActive:before {
    content: "   ";
    background: transparent url("../../images/tear-drop-sprite.png") no-repeat;
    background-position: -24px -32px;
}

/* ---------------------------------------------------------------------
Media Object Module Styles
------------------------------------------------------------------------ */

/*doc

---

title: Media
name: media
category: Base

---

Media may contain an image on the left with text/content on the right.

```html_example
<div class="grid">
    <div class="grid-row">
        <div class="grid-row-col grid-row-col_size6of12">
            <div class="media">
                <div class="media-element">
                    <img src="http://placekitten.com/125/125" alt="" />
                </div>
                <div class="media-bd">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet neque in mauris sollicitudin pretium ut eget nisl.
                       Proin in cursus ante, id cursus arcu. Donec eget facilisis ipsum. Etiam ut ipsum quis odio mollis mattis lobortis id tellus. Aliquam vulputate
                       velit nisi, eu dictum tortor porta sit amet. Integer a aliquam nisl. Praesent tempor congue pretium.</p>
                </div>
            </div>
        </div>

        <div class="grid-row-col grid-row-col_size6of12">
            <div class="hghContrast">
                <div class="media">
                    <div class="media-element">
                        <img src="http://placekitten.com/125/125" alt="" />
                    </div>
                    <div class="media-bd">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet neque in mauris sollicitudin pretium ut eget nisl.
                           Proin in cursus ante, id cursus arcu. Donec eget facilisis ipsum. Etiam ut ipsum quis odio mollis mattis lobortis id tellus. Aliquam vulputate
                           velit nisi, eu dictum tortor porta sit amet. Integer a aliquam nisl. Praesent tempor congue pretium.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

```

*/

.media {
    overflow: hidden;
}

.media_table {
    display: table;
}

.media_botMargin {
    margin-bottom: 27px;
}

.media_lrgBotMargin {
    margin-bottom: 33px;
}

.media_botPad {
    padding-bottom: 13px;
}

.media_whatsNew {
    padding-top: 10px;
}

.media-element {
    float: left;
    margin: 0 10px 0 0;
}
.media-element-wellbeing {
    float: left;
    margin: 0 10px 80px 0;
}

.media-bd {
    overflow: hidden;
}

.media-bd_topMargin {
    margin-top: 10px;
}

.media-bd_topMarginHigh {
    margin-top: 40px;
}

.media-bd_stockTicker {
    /*padding-top: 20px;*/
}

.media-bd_whatsNewLeft {
    padding-top: 78px;
}

.media-ft {
    overflow: hidden;
}

.media-ft-fltRght {
    float: right;
    margin-bottom: 3px;
}

.hghContrast .media-bd {
    color: #ffffff;
}

/* ---------------------------------------------------------------------
Modal Styles
------------------------------------------------------------------------ */

/*doc

---

title: Modal
name: modal
category: Modules

---

A large page banner that features a video or image, heading, text block and button

```html_example

<ul class="blocks blocks_4up js-modalList" data-col-count="4">
    <li class="blocks-item" data-start-item="true">
        <div class="box">
            <div class="box-content">
                <div class="feature">
                    <div class="feature-element">
                        <img class="imgFrm" src="http://placekitten.com/197/151" alt="" />
                    </div>
                    <div class="feature-bd">
                        <p>Lorem ipsum dolor amet, consectetur adipiscing elit...</p>
                    </div>

                    <div class="js-fullDescription">
                        <div class="media">
                            <div class="media-element">
                                <img src="http://placekitten.com/288/199" alt="" />
                            </div>
                            <div class="media-bd">
                                <h4 class="hdg hdg_7 mix-hdg_orange">Title Text</h4>
                                <p>
                                    <a class="link" href="#">Lorem ipsum dolor sit amet</a>, consectetur adipisicing elit. Veniam, sed esse fugiat neque mollitia
                                    excepturi optio laudantium vel praesentium possimus.

                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque auctor tortor quis vestibulum
                                    vehicula. Nam felis purus, euismod sit amet sem id, gravida faucibus elit. Cras tortor erat, porta
                                    quis dapibus quis, fringilla non justo. Maecenas pellentesque suscipit ipsum a interdum. Mauris laoreet,
                                    nisi nec placerat dictum, justo odio eleifend augue, et aliquam nulla metus at lacus. Phasellus eu
                                    porttitor libero, vitae luctus nulla. Phasellus sit amet nunc tortor. Nullam et odio nunc. Aliquam vitae
                                    pulvinar orci, eu viverra neque.<br/><br/>
                                    <span class="bold">Markets:</span> Belgium, <a class="link" href="#">France</a>, Netherlands, <a class="link" href="#">United Kingdom</a>, <a class="link" href="#">United states</a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        <div>
    </li>
    <li class="blocks-item">
        <div class="box">
            <div class="box-content">
                <div class="feature">
                    <div class="feature-element">
                        <img class="imgFrm" src="http://placekitten.com/197/151" alt="" />
                    </div>
                    <div class="feature-bd">
                        <p>Lorem ipsum dolor amet, consectetur adipiscing elit...</p>
                    </div>

                    <div class="js-fullDescription">
                        <div class="media">
                            <div class="media-element">
                                <img src="http://placekitten.com/288/199" alt="" />
                            </div>
                            <div class="media-bd">
                                <h4 class="hdg hdg_7 mix-hdg_orange">Title Text</h4>
                                <p>
                                    <a class="link" href="#">Lorem ipsum dolor sit amet</a>, consectetur adipisicing elit. Veniam, sed esse fugiat neque mollitia
                                    excepturi optio laudantium vel praesentium possimus.

                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque auctor tortor quis vestibulum
                                    vehicula. Nam felis purus, euismod sit amet sem id, gravida faucibus elit. Cras tortor erat, porta
                                    quis dapibus quis, fringilla non justo. Maecenas pellentesque suscipit ipsum a interdum. Mauris laoreet,
                                    nisi nec placerat dictum, justo odio eleifend augue, et aliquam nulla metus at lacus. Phasellus eu
                                    porttitor libero, vitae luctus nulla. Phasellus sit amet nunc tortor. Nullam et odio nunc. Aliquam vitae
                                    pulvinar orci, eu viverra neque.<br/><br/>
                                    <span class="bold">Markets:</span> Belgium, <a class="link" href="#">France</a>, Netherlands, <a class="link" href="#">United Kingdom</a>, <a class="link" href="#">United states</a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        <div>
    </li>
    <li class="blocks-item">
        <div class="box">
            <div class="box-content">
                <div class="feature">
                    <div class="feature-element">
                        <img class="imgFrm" src="http://placekitten.com/197/151" alt="" />
                    </div>
                    <div class="feature-bd">
                        <p>Lorem ipsum dolor amet, consectetur adipiscing elit...</p>
                    </div>

                    <div class="js-fullDescription">
                        <div class="media">
                            <div class="media-element">
                                <img src="http://placekitten.com/288/199" alt="" />
                            </div>
                            <div class="media-bd">
                                <h4 class="hdg hdg_7 mix-hdg_orange">Title Text</h4>
                                <p>
                                    <a class="link" href="#">Lorem ipsum dolor sit amet</a>, consectetur adipisicing elit. Veniam, sed esse fugiat neque mollitia
                                    excepturi optio laudantium vel praesentium possimus.

                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque auctor tortor quis vestibulum
                                    vehicula. Nam felis purus, euismod sit amet sem id, gravida faucibus elit. Cras tortor erat, porta
                                    quis dapibus quis, fringilla non justo. Maecenas pellentesque suscipit ipsum a interdum. Mauris laoreet,
                                    nisi nec placerat dictum, justo odio eleifend augue, et aliquam nulla metus at lacus. Phasellus eu
                                    porttitor libero, vitae luctus nulla. Phasellus sit amet nunc tortor. Nullam et odio nunc. Aliquam vitae
                                    pulvinar orci, eu viverra neque.<br/><br/>
                                    <span class="bold">Markets:</span> Belgium, <a class="link" href="#">France</a>, Netherlands, <a class="link" href="#">United Kingdom</a>, <a class="link" href="#">United states</a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        <div>
    </li>
    <li class="blocks-item">
        <div class="box">
            <div class="box-content">
                <div class="feature">
                    <div class="feature-element">
                        <img class="imgFrm" src="http://placekitten.com/197/151" alt="" />
                    </div>
                    <div class="feature-bd">
                        <p>Lorem ipsum dolor amet, consectetur adipiscing elit...</p>
                    </div>

                    <div class="js-fullDescription">
                        <div class="media">
                            <div class="media-element">
                                <img src="http://placekitten.com/288/199" alt="" />
                            </div>
                            <div class="media-bd">
                                <h4 class="hdg hdg_7 mix-hdg_orange">Title Text</h4>
                                <p>
                                    <a class="link" href="#">Lorem ipsum dolor sit amet</a>, consectetur adipisicing elit. Veniam, sed esse fugiat neque mollitia
                                    excepturi optio laudantium vel praesentium possimus.

                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque auctor tortor quis vestibulum
                                    vehicula. Nam felis purus, euismod sit amet sem id, gravida faucibus elit. Cras tortor erat, porta
                                    quis dapibus quis, fringilla non justo. Maecenas pellentesque suscipit ipsum a interdum. Mauris laoreet,
                                    nisi nec placerat dictum, justo odio eleifend augue, et aliquam nulla metus at lacus. Phasellus eu
                                    porttitor libero, vitae luctus nulla. Phasellus sit amet nunc tortor. Nullam et odio nunc. Aliquam vitae
                                    pulvinar orci, eu viverra neque.<br/><br/>
                                    <span class="bold">Markets:</span> Belgium, <a class="link" href="#">France</a>, Netherlands, <a class="link" href="#">United Kingdom</a>, <a class="link" href="#">United states</a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        <div>
    </li>
    <li class="blocks-item">
        <div class="box">
            <div class="box-content">
                <div class="feature">
                    <div class="feature-element">
                        <img class="imgFrm" src="http://placekitten.com/197/151" alt="" />
                    </div>
                    <div class="feature-bd">
                        <p>Lorem ipsum dolor amet, consectetur adipiscing elit...</p>
                    </div>

                    <div class="js-fullDescription">
                        <div class="media">
                            <div class="media-element">
                                <img src="http://placekitten.com/288/199" alt="" />
                            </div>
                            <div class="media-bd">
                                <h4 class="hdg hdg_7 mix-hdg_orange">Title Text</h4>
                                <p>
                                    <a class="link" href="#">Lorem ipsum dolor sit amet</a>, consectetur adipisicing elit. Veniam, sed esse fugiat neque mollitia
                                    excepturi optio laudantium vel praesentium possimus.

                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque auctor tortor quis vestibulum
                                    vehicula. Nam felis purus, euismod sit amet sem id, gravida faucibus elit. Cras tortor erat, porta
                                    quis dapibus quis, fringilla non justo. Maecenas pellentesque suscipit ipsum a interdum. Mauris laoreet,
                                    nisi nec placerat dictum, justo odio eleifend augue, et aliquam nulla metus at lacus. Phasellus eu
                                    porttitor libero, vitae luctus nulla. Phasellus sit amet nunc tortor. Nullam et odio nunc. Aliquam vitae
                                    pulvinar orci, eu viverra neque.<br/><br/>
                                    <span class="bold">Markets:</span> Belgium, <a class="link" href="#">France</a>, Netherlands, <a class="link" href="#">United Kingdom</a>, <a class="link" href="#">United states</a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        <div>
    </li>
    <li class="blocks-item">
        <div class="box">
            <div class="box-content">
                <div class="feature">
                    <div class="feature-element">
                        <img class="imgFrm" src="http://placekitten.com/197/151" alt="" />
                    </div>
                    <div class="feature-bd">
                        <p>Lorem ipsum dolor amet, consectetur adipiscing elit...</p>
                    </div>

                    <div class="js-fullDescription">
                        <div class="media">
                            <div class="media-element">
                                <img src="http://placekitten.com/288/199" alt="" />
                            </div>
                            <div class="media-bd">
                                <h4 class="hdg hdg_7 mix-hdg_orange">Title Text</h4>
                                <p>
                                    <a class="link" href="#">Lorem ipsum dolor sit amet</a>, consectetur adipisicing elit. Veniam, sed esse fugiat neque mollitia
                                    excepturi optio laudantium vel praesentium possimus.

                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque auctor tortor quis vestibulum
                                    vehicula. Nam felis purus, euismod sit amet sem id, gravida faucibus elit. Cras tortor erat, porta
                                    quis dapibus quis, fringilla non justo. Maecenas pellentesque suscipit ipsum a interdum. Mauris laoreet,
                                    nisi nec placerat dictum, justo odio eleifend augue, et aliquam nulla metus at lacus. Phasellus eu
                                    porttitor libero, vitae luctus nulla. Phasellus sit amet nunc tortor. Nullam et odio nunc. Aliquam vitae
                                    pulvinar orci, eu viverra neque.<br/><br/>
                                    <span class="bold">Markets:</span> Belgium, <a class="link" href="#">France</a>, Netherlands, <a class="link" href="#">United Kingdom</a>, <a class="link" href="#">United states</a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        <div>
    </li>
    <li class="blocks-item">
        <div class="box">
            <div class="box-content">
                <div class="feature">
                    <div class="feature-element">
                        <img class="imgFrm" src="http://placekitten.com/197/151" alt="" />
                    </div>
                    <div class="feature-bd">
                        <p>Lorem ipsum dolor amet, consectetur adipiscing elit...</p>
                    </div>

                    <div class="js-fullDescription">
                        <div class="media">
                            <div class="media-element">
                                <img src="http://placekitten.com/288/199" alt="" />
                            </div>
                            <div class="media-bd">
                                <h4 class="hdg hdg_7 mix-hdg_orange">Title Text</h4>
                                <p>
                                    <a class="link" href="#">Lorem ipsum dolor sit amet</a>, consectetur adipisicing elit. Veniam, sed esse fugiat neque mollitia
                                    excepturi optio laudantium vel praesentium possimus.

                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque auctor tortor quis vestibulum
                                    vehicula. Nam felis purus, euismod sit amet sem id, gravida faucibus elit. Cras tortor erat, porta
                                    quis dapibus quis, fringilla non justo. Maecenas pellentesque suscipit ipsum a interdum. Mauris laoreet,
                                    nisi nec placerat dictum, justo odio eleifend augue, et aliquam nulla metus at lacus. Phasellus eu
                                    porttitor libero, vitae luctus nulla. Phasellus sit amet nunc tortor. Nullam et odio nunc. Aliquam vitae
                                    pulvinar orci, eu viverra neque.<br/><br/>
                                    <span class="bold">Markets:</span> Belgium, <a class="link" href="#">France</a>, Netherlands, <a class="link" href="#">United Kingdom</a>, <a class="link" href="#">United states</a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        <div>
    </li>
    <li class="blocks-item">
        <div class="box">
            <div class="box-content">
                <div class="feature">
                    <div class="feature-element">
                        <img class="imgFrm" src="http://placekitten.com/197/151" alt="" />
                    </div>
                    <div class="feature-bd">
                        <p>Lorem ipsum dolor amet, consectetur adipiscing elit...</p>
                    </div>

                    <div class="js-fullDescription">
                        <div class="media">
                            <div class="media-element">
                                <img src="http://placekitten.com/288/199" alt="" />
                            </div>
                            <div class="media-bd">
                                <h4 class="hdg hdg_7 mix-hdg_orange">Title Text</h4>
                                <p>
                                    <a class="link" href="#">Lorem ipsum dolor sit amet</a>, consectetur adipisicing elit. Veniam, sed esse fugiat neque mollitia
                                    excepturi optio laudantium vel praesentium possimus.

                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque auctor tortor quis vestibulum
                                    vehicula. Nam felis purus, euismod sit amet sem id, gravida faucibus elit. Cras tortor erat, porta
                                    quis dapibus quis, fringilla non justo. Maecenas pellentesque suscipit ipsum a interdum. Mauris laoreet,
                                    nisi nec placerat dictum, justo odio eleifend augue, et aliquam nulla metus at lacus. Phasellus eu
                                    porttitor libero, vitae luctus nulla. Phasellus sit amet nunc tortor. Nullam et odio nunc. Aliquam vitae
                                    pulvinar orci, eu viverra neque.<br/><br/>
                                    <span class="bold">Markets:</span> Belgium, <a class="link" href="#">France</a>, Netherlands, <a class="link" href="#">United Kingdom</a>, <a class="link" href="#">United states</a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        <div>
    </li>
</ul>

```

*/

.modal {
    position: relative;
    width: 100%;
    height: auto;
    margin-bottom: 15px;
    padding: 0;
    background: #ffffff;
    border: 1px solid #b2ebee;
    -webkit-box-shadow: 0 3px #b2ebee;
    -moz-box-shadow: 0 3px #b2ebee;
    -ms-box-shadow: 0 3px #b2ebee;
    -o-box-shadow: 0 3px #b2ebee;
    box-shadow: 0 3px #b2ebee;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;

    -webkit-transition: height .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.mix-modal_isCollapsed {
    height: 0;
}

.mix-modal_isHidden {
    display: none;
}

.modal-carat {
    position: absolute;
    top: -11px;
    left: 101px;
    width: 25px;
    height: 11px;
    background: url(../../images/modal-carat.png) no-repeat;

    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.modal-content {
    overflow: hidden;
    padding: 39px;
}

.modal-content-item {
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}
.modal-content-item p span a { font-style:italic;}
.modal-content-item_isHidden {
    display: none;
}

.modal-content-item_isInvisible {
    opacity: 0;
}

.modal-close {
    position: absolute;
    top: 5px;
    right: 5px;
    height: 26px;
    width: 38px;
    background: url(../../images/close-icon.png) no-repeat;
    text-indent: -9999px;
    opacity: 1;
}

.modal-close_isHidden {
    opacity: 0;
}

/* ---------------------------------------------------------------------
Modal Styles - High Contrast
------------------------------------------------------------------------ */

.hghContrast .modal {
    color: #ffffff;
    background-color: #151515;
    border: 1px solid #292929;
    -webkit-box-shadow: 0 3px #292929;
    -moz-box-shadow: 0 3px #292929;
    -ms-box-shadow: 0 3px #292929;
    -o-box-shadow: 0 3px #292929;
    box-shadow: 0 3px #292929;
}

.hghContrast .modal-carat {
    background: url("../../images/modal-carat_hc.png") no-repeat;
}

/* ---------------------------------------------------------------------
Mini Search Styles
------------------------------------------------------------------------ */

/*doc

---

title: Mini Search
name: miniSrch
category: Modules

---

A small search bar for searching from pages other than the search page.

```html_example
    <div class="miniSearch">
        <label for="search" class="isHidden">Search</label>
        <input class="miniSearch-input" type="text" placeholder="Search" />
        <input class="miniSearch-btn" type="submit" value="Submit" />
    </div>
```

*/

.miniSearch {
    overflow: hidden;
}

.miniSearch > * {
    margin: 0;
    padding: 0;
    border: none;
}

.miniSearch-input {
    float: left;
    width: 125px;
    height: 24px;
    padding-left: 10px;
    -webkit-border-radius: 3px 0 0 3px;
    -moz-border-radius: 3px 0 0 3px;
    -o-border-radius: 3px 0 0 3px;
    border-radius: 3px 0 0 3px;
}

.miniSearch-input::-webkit-input-placeholder {
   color: #ce1126;
   font-weight: bold;
}

.miniSearch-input:-moz-placeholder { /* Firefox 18- */
   color: #ce1126;
   font-weight: bold;
}

.miniSearch-input::-moz-placeholder {  /* Firefox 19+ */
   color: #ce1126;
   font-weight: bold;
}

.miniSearch-input:-ms-input-placeholder {
   color: #ce1126;
   font-weight: bold;
}

.miniSearch-btn {
    float: left;
    height: 24px;
    width: 28px;
    background: #d9f8f9 url(../../images/search-icon.png) no-repeat 8px 6px;
    text-indent: -9999px;
    cursor: pointer;
    -webkit-border-radius: 0 3px 3px 0;
    -moz-border-radius: 0 3px 3px 0;
    -o-border-radius: 0 3px 3px 0;
    border-radius: 0 3px 3px 0;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}

.miniSearch-btn:hover {
    background: #b2e9ee url(../../images/search-icon.png) no-repeat 8px 6px;
}

/* ---------------------------------------------------------------------
Quote Styles
------------------------------------------------------------------------ */

/*doc

---

title: Quote
name: quote
category: Base

---

A person's quote followed by their name and title.

```html_example

<div class="box">
    <div class="box-content">
        <blockquote class="quote">
            "Inspirational quote from executive about the people at Mondelez International. Lorem ipsum dolor sit amet."
            <span class="quote-sig">- Irene Reosenfeld, Chairman and Chief Executive Officer</span>
        </blockquote>
    </div>
</div>

<div class="hghContrast">
    <div class="box">
        <div class="box-content">
            <blockquote class="quote">
            "Inspirational quote from executive about the people at Mondelez International. Lorem ipsum dolor sit amet."
            <span class="quote-sig">- Irene Reosenfeld, Chairman and Chief Executive Officer</span>
        </blockquote>
        </div>
    </div>
</div>

```

*/

.quote {
    color: #f95602;
    font: italic 15px/1.6 Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.quote-sig {
    display: block;
    color: #000000;
    font-size: 11px;
    line-height: 2.19;
}

.hghContrast .quote-sig
{
    color :#ffffff;
}

/* ---------------------------------------------------------------------
Utility Navigation Styles
------------------------------------------------------------------------ */

.utlNav {
    float: right;
    margin-bottom: 23px;
    padding-top: 13px;
    overflow: hidden;
    font-family: Arial, sans-serif;
    font-size: 11px;
    line-height: 2.18; /* 24px/11px */
}

.utlNav:before {
    position: absolute;
    content: " ";
    display: block;
    height: 20px;
    width: 45px;
    top: 38px;
    left: 644px;
    opacity: 1;
    background: url(../../images/accessibility-carat.png) no-repeat;
    -webkit-transition: opacity 1s ease-in-out, left 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out, left 1s ease-in-out;
    -ms-transition: opacity 1s ease-in-out, left 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out, left 1s ease-in-out;
    transition: opacity 1s ease-in-out, left 1s ease-in-out;
}


.masthead_hideAll .utlNav:before {
    opacity: 0;
}

.masthead_hideAccessibility .utlNav:before {
    left:628px;
}

.masthead_hideRegions .utlNav:before {
    left: 520px;
}

.utlNav-item {
    float:left;
    margin-left: 24px;
}

.utlNav-item-link,
.utlNav-item-link:visited {
    color: #ffffff;
}

.utlNav-item-link:hover {
    text-decoration: none;
    color: #bac405;
}

.utlNav-item-link_isCurrent {
    color: #bac405;
    font-weight: bold;
}

.utlNav-item_short {
    margin-left: 20px;
}

.utlNav-item_fb {
    width: 52px;
    height: 24px;
    overflow: hidden;
}

.hghContrast .utlNav-item-link {
    color: #ffffff;
}

.hghContrast ::-webkit-input-placeholder { color:#000000; }
.hghContrast ::-moz-placeholder { color:#000000; } /* firefox 19+ */
.hghContrast :-ms-input-placeholder { color:#000000; } /* ie */
.hghContrast input:-moz-placeholder { color:#000000; }

.hghContrast .utlNav:before {
    background: url(../../images/accessibility-carat.png) 0 -20px no-repeat;
}

/* ---------------------------------------------------------------------
vList Styles
------------------------------------------------------------------------ */

/*doc

---

title: vList
name: vList
category: Base

---

A generic vertical list.

```html_example
<ul class="vList">
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, quo.</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, quo.</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, quo.</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, quo.</li>
</ul>

<ol class="vList vList_decimal">
    <li>Lorem ipsum...</li>
    <li>Lorem ipsum...</li>
    <li>Lorem ipsum...</li>
    <li>Lorem ipsum...</li>
</ol>

<ul class="vList vList_disc">
    <li>Lorem ipsum...</li>
    <li>Lorem ipsum...</li>
    <li>Lorem ipsum...</li>
    <li>Lorem ipsum...</li>
</ul>

<ul class="vList vList_nmbr">
    <li>Lorem ipsum...</li>
    <li>Lorem ipsum...</li>
    <li>Lorem ipsum...</li>
    <li>Lorem ipsum...</li>
</ul>

<ol class="vList vList_nmbr vList_nmbr_icon_orange">
    <li>Lorem ipsum...</li>
    <li>Lorem ipsum...</li>
    <li>Lorem ipsum...</li>
    <li>Lorem ipsum...</li>
</ol>
```

*/

.vList {
    list-style-position: inside;
}

.vList > * {
    font-size: 13px;
    line-height: 1.54; /* 20/13 */
    margin-bottom: 20px;
}

.vList > * > ul {
    padding-left: 20px;
}

.vList_disc {
    padding: 0;
    margin: 0;
}

.vList_disc > * {
    display: list-item;
    list-style-type: disc;
}

.vList_decimal {
    padding: 0;
    margin: 0;
}

.vList_decimal > * {
    display: list-item;
    list-style-type: decimal;
}

.vList_nmbr {
    padding: 0;
    margin: 0 0 0 16px;
}

.vList_nmbr > * {
    display: list-item;
    list-style-type: none;
    counter-increment: customlistcounter;
    margin-left: -1em;
}

.vList_nmbr > *:before {
    content: counter(customlistcounter) " ";
    float: left;
    width: 1em;
}

.vList_nmbr > *:first-child {
    counter-reset: customlistcounter;
}

.vList_smlIcn > * {
    background: url(../../images/list-icon-drop.png) 0 5px no-repeat;
    padding-left: 25px;
}

.vList_nmbr_icon_orange {
    margin: 0 0 0 48px;
}

.vList_nmbr_icon_orange > * {
    height: 31px;
    padding: 8px 0 0 60px;
    margin: 11px 0 0 -43px;
    background: url('../../images/tear-drop-orange.png') no-repeat 3px 1px;
    font-family: "Arial Black", Gadget, sans-serif;
 }

.vList_nmbr_icon_orange > * > * {
    font-family: "Arial", sans-serif;
}

.vList_nmbr_icon_orange > .vList-item_wraps > * {
    margin-top: -13px;
}

.vList_nmbr_icon_orange > *:before {
    width: 0;
    color: #ffffff;
    position: relative;
    left: -30px;
}

/** -------------------------------------------------------------------
Colored Small Bullets - CGN
----------------------------------------------------------------------- */
.vList_nmbr_icon_navy {
    margin: 0 0 15px 0;
}

.vList_nmbr_icon_navy > * {
    padding: 0 0 10px 30px;
    margin: 0 0 0 28px;
    background: url('../../images/tear-drop-navy-sm.png') no-repeat 3px 1px;
    font-family: "Arial", Gadget, sans-serif !important;
 }

.vList_nmbr_icon_navy > * > * {
    font-family: "Arial", sans-serif;
}

.vList_nmbr_icon_navy > .vList-item_wraps > * {
    margin-top: -13px;
}

.vList_nmbr_icon_navy > *:before {
    width: 0;
    color: #ffffff;
    position: relative;
    left: -30px;
}


.vList_nmbr_icon_dkBlue {
    margin: 0 0 15px 0;
}

.vList_nmbr_icon_dkBlue > * {
    padding: 0 0 10px 30px;
    margin: 0 0 0 28px;
    background: url('../../images/tear-drop-darkblue-sm.png') no-repeat 3px 1px;
    font-family: "Arial", Gadget, sans-serif !important;
 }

.vList_nmbr_icon_dkBlue > * > * {
    font-family: "Arial", sans-serif;
}

.vList_nmbr_icon_dkBlue > .vList-item_wraps > * {
    margin-top: -13px;
}

.vList_nmbr_icon_dkBlue > *:before {
    width: 0;
    color: #ffffff;
    position: relative;
    left: -30px;
}


.vList_nmbr_icon_ltBlue {
    margin: 0 0 15px 0;
}

.vList_nmbr_icon_ltBlue > * {
    padding: 0 0 10px 30px;
    margin: 0 0 0 28px;
    background: url('../../images/tear-drop-lightblue-sm.png') no-repeat 3px 1px;
    font-family: "Arial", Gadget, sans-serif !important;
 }

.vList_nmbr_icon_ltBlue > * > * {
    font-family: "Arial", sans-serif;
}

.vList_nmbr_icon_ltBlue > .vList-item_wraps > * {
    margin-top: -13px;
}

.vList_nmbr_icon_ltBlue > *:before {
    width: 0;
    color: #ffffff;
    position: relative;
    left: -30px;
}

.vList_nmbr_icon_green {
    margin: 0 0 15px 0;
}

.vList_nmbr_icon_green > * {
    padding: 0 0 10px 30px;
    margin: 0 0 0 28px;
    background: url('../../images/tear-drop-green-sm.png') no-repeat 3px 1px;
    font-family: "Arial", Gadget, sans-serif !important;
 }

.vList_nmbr_icon_green > * > * {
    font-family: "Arial", sans-serif;
}

.vList_nmbr_icon_green > .vList-item_wraps > * {
    margin-top: -13px;
}

.vList_nmbr_icon_green > *:before {
    width: 0;
    color: #ffffff;
    position: relative;
    left: -30px;
}


.vList_nmbr_icon_red {
    margin: 0 0 15px 0;
}

.vList_nmbr_icon_red > * {
    padding: 0 0 10px 30px;
    margin: 0 0 0 28px;
    background: url('../../images/tear-drop-red-sm.png') no-repeat 3px 1px;
    font-family: "Arial", Gadget, sans-serif !important;
 }

.vList_nmbr_icon_red > * > * {
    font-family: "Arial", sans-serif;
}

.vList_nmbr_icon_red > .vList-item_wraps > * {
    margin-top: -13px;
}

.vList_nmbr_icon_red > *:before {
    width: 0;
    color: #ffffff;
    position: relative;
    left: -30px;
}

.vList_nmbr_icon_orange2 {
    margin: 0 0 15px 0;
}

.vList_nmbr_icon_orange2 > * {
    padding: 0 0 10px 30px;
    margin: 0 0 0 28px;
    background: url('../../images/tear-drop-orange2-sm.png') no-repeat 3px 1px;
    font-family: "Arial", Gadget, sans-serif !important;
 }

.vList_nmbr_icon_orange2 > * > * {
    font-family: "Arial", sans-serif;
}

.vList_nmbr_icon_orange2 > .vList-item_wraps > * {
    margin-top: -13px;
}

.vList_nmbr_icon_orange2 > *:before {
    width: 0;
    color: #ffffff;
    position: relative;
    left: -30px;
}


/* ---------------------------------------------------------------------
Icon Button Styles
------------------------------------------------------------------------ */

/*doc

---

title: Icon Button
name: icnBtn
category: Base

---

An icon button is a link styled as a button that's extended with an icon background

```html_example

<div class="grid">
    <div class="grid-row">
        <div class="grid-row-col grid-row-col_size3of12">
            <a class="icnBtn icnBtn_mail" href="#">find a product</a>
            <a class="icnBtn icnBtn_graph" href="#">find a product</a>
            <a class="icnBtn icnBtn_calc" href="#">find a product</a>
            <a class="icnBtn icnBtn_linkedIn" href="#">find a product</a>
        </div>
        <div class="grid-row-col grid-row-col_size3of12">
            <div class="hghContrast">
                <a class="icnBtn icnBtn_mail" href="#">find a product</a>
                <a class="icnBtn icnBtn_graph" href="#">find a product</a>
                <a class="icnBtn icnBtn_calc" href="#">find a product</a>
                <a class="icnBtn icnBtn_linkedIn" href="#">find a product</a>
            </div>
        </div>
    </div>
</div>
```

*/

.icnBtn {
    display: block;
    padding: 18px 10px 18px 50px;
    font-size: 15px;
    font-weight: bold;
    line-height: 1.2;
    color: #000000;
    background: #ffffff url(../../images/iconBtnSprite.png) no-repeat 0 0;
    border: 1px solid #b2ebee;
    -webkit-box-shadow: 0 3px #b2ebee;
    -moz-box-shadow: 0 3px #b2ebee;
    -ms-box-shadow: 0 3px #b2ebee;
    -o-box-shadow: 0 3px #b2ebee;
    box-shadow: 0 3px #b2ebee;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
}

.icnBtn:hover {
    text-decoration: none;
    border: 1px solid #79e0e9;
    -webkit-box-shadow: 0 3px #79e0e9;
    -moz-box-shadow: 0 3px #79e0e9;
    -ms-box-shadow: 0 3px #79e0e9;
    -o-box-shadow: 0 3px #79e0e9;
    box-shadow: 0 3px #79e0e9;
}

/* use the before pseudo to push down the text one pixel on click*/
.icnBtn:before {
    content: " ";
    display: block;
    width: 1px;
    height: 0px;
}

.icnBtn:active:before {
    content: " ";
    display: block;
    width: 1px;
    height: 1px;
}

.icnBtn:active {
    text-decoration: none;
    -moz-box-shadow: 0 0px #79e0e9, inset 0 1px #79e0e9;
    -webkit-box-shadow: 0 0px #79e0e9, inset 0 1px #79e0e94;
    box-shadow: 0 0px #79e0e9, inset 0 1px #79e0e9;
    margin-bottom: -1px; /* pull the button down to counteract the added pseudo height */
    margin-top: 0px;    /* push the button down to counteract the removal of the bottom box-shadow */
}

.icnBtn_lineWrap {
    padding: 7px 10px 7px 50px;
}

.icnBtn_mail { background-position: 6px 8px; }
.icnBtn_mail:active { background-position: 6px 9px; }
.icnBtn_graph { background-position: 6px -45px; }
.icnBtn_graph:active { background-position: 6px -44px; }
.icnBtn_calc { background-position: 6px -110px; }
.icnBtn_calc:active { background-position: 6px -109px; }
.icnBtn_linkedIn { background-position: 6px -168px; }
.icnBtn_linkedIn:active { background-position: 6px -167px; }

/***********************************
High Contrast
************************************/
.hghContrast .icnBtn {
    color: #ffffff;
    background-color: #151515;
    border-color: #292929;
    -webkit-box-shadow: 0 3px #292929;
    -moz-box-shadow: 0 3px #292929;
    -ms-box-shadow: 0 3px #292929;
    -o-box-shadow: 0 3px #292929;
    box-shadow: 0 3px #292929;
}

/* ---------------------------------------------------------------------
Image Frame Styles
------------------------------------------------------------------------ */

/*doc

---

title: Image Frame
name: image_frame
category: Base

---

Image Frame provides a border and optional rounded corners for images. A swoosh overlay may also be added to the bottom of images.

```html_example
    <div class="grid">
        <div class="grid-row">
            <div class="grid-row-col grid-row-col_size3of12">
                <div class="box">
                    <div class="galleryItem">
                        <img class="imgFrm" src="http://placekitten.com/197/151" alt="filler" />
                    </div>
                </div>
                <div class="box">
                    <div class="galleryItem">
                        <img class="imgFrm imgFrm_round" src="http://placekitten.com/197/151" alt="filler" />
                    </div>
                </div>
                <div class="box">
                    <div class="galleryItem">
                        <div class="galleryItem-hd galleryItem-hd_swoosh">
                            <img class="imgFrm" src="http://placekitten.com/197/252" alt="" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="grid-row">
            <div class="grid-row-col grid-row-col_size3of12">
                <div class="hghContrast">
                    <div class="box">
                        <div class="galleryItem">
                            <img class="imgFrm" src="http://placekitten.com/197/151" alt="filler" />
                        </div>
                    </div>

                    <div class="box">
                        <div class="galleryItem">
                            <img class="imgFrm imgFrm_round" src="http://placekitten.com/197/151" alt="filler" />
                        </div>
                    </div>

                    <div class="box">
                        <div class="galleryItem">
                            <div class="galleryItem-hd galleryItem-hd_swoosh">
                                <img class="imgFrm" src="http://placekitten.com/197/252" alt="" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
```

*/

img.imgFrm {
    display: block;
    margin-bottom: 8px;
    border: 1px solid #666666;
}

img.imgFrm_open {
    margin: 0px; /* to override quarentined styling */
}

.imgFrm_round {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
}


/* ---------------------------------------------------------------------
Interior Carousel Styles
------------------------------------------------------------------------ */

/*doc

---

title: Interior Carousel
name: intrCarousel
category: Modules

---

A large page banner that features a video or image, heading, text block and button

```html_example

<div class="grid">
    <div class="grid-row">
        <div class="grid-row-col grid-row-col_size12of12">
            <div class="hroBnr">
                <ul class="intrCarousel">
                    <li class="intrCarousel-slide intrCarousel-slide_isNotCurrent">
                        <div class="intrCarousel-slide-bd">
                            <div class="intrCarousel-slide-bd-element">
                                <img class="imgFrm imgFrm_open imgFrm_round" src="http://placekitten.com/608/370" alt="Hero Image" />
                            </div>
                            <div class="intrCarousel-slide-bd-content">
                                <h2 class="hdg hdg_3">long hero banner heading</h2>
                                <p class="intrCarousel-slide-bd-content-text">
                                    First ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna.
                                </p>
                                <a href="#" class="btn btn_whiteOrange mix-btn_lrg">watch</a>
                            </div>
                        </div>
                    </li>

                    <li class="intrCarousel-slide intrCarousel-slide_notFirst intrCarousel-slide_isNotCurrent">
                        <div class="intrCarousel-slide-bd">
                            <div class="intrCarousel-slide-bd-element">
                                <img class="imgFrm imgFrm_open imgFrm_round" src="http://placekitten.com/608/370" alt="Hero Image" />
                            </div>
                            <div class="intrCarousel-slide-bd-content">
                                <h2 class="hdg hdg_3">long hero banner heading</h2>
                                <p class="intrCarousel-slide-bd-content-text">
                                    First ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna.
                                </p>
                                <a href="#" class="btn btn_whiteOrange mix-btn_lrg">watch</a>
                            </div>
                        </div>
                    </li>

                    <li class="intrCarousel-slide intrCarousel-slide_notFirst intrCarousel-slide_isCurrent">
                        <div class="intrCarousel-slide-bd">
                            <div class="intrCarousel-slide-bd-element">
                                <img class="imgFrm imgFrm_open imgFrm_round" src="http://placekitten.com/608/370" alt="Hero Image" />
                            </div>
                            <div class="intrCarousel-slide-bd-content">
                                <h2 class="hdg hdg_3">long hero banner heading</h2>
                                <p class="intrCarousel-slide-bd-content-text">
                                    First ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna.
                                </p>
                                <a href="#" class="btn btn_whiteOrange mix-btn_lrg">watch</a>
                            </div>
                        </div>
                    </li>

                    <li class="intrCarousel-slide intrCarousel-slide_notFirst intrCarousel-slide_isNotCurrent">
                        <div class="intrCarousel-slide-bd">
                            <div class="intrCarousel-slide-bd-element">
                                <img class="imgFrm imgFrm_open imgFrm_round" src="http://placekitten.com/608/370" alt="Hero Image" />
                            </div>
                            <div class="intrCarousel-slide-bd-content">
                                <h2 class="hdg hdg_3">long hero banner heading</h2>
                                <p class="intrCarousel-slide-bd-content-text">
                                    First ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna.
                                </p>
                                <a href="#" class="btn btn_whiteOrange mix-btn_lrg">watch</a>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
                        <!-- END .intrCarousel -->

            <ul class="intrCarouselController">
                <li class="intrCarouselController-item">
                    <a class="intrCarouselController-item-link intrCarouselController-item-link_isCurrent" href="#"></a>
                </li>
                <li class="intrCarouselController-item">
                    <a class="intrCarouselController-item-link" href="#"></a>
                </li>
                <li class="intrCarouselController-item">
                    <a class="intrCarouselController-item-link" href="#"></a>
                </li>
                <li class="intrCarouselController-item">
                    <a class="intrCarouselController-item-link" href="#"></a>
                </li>
            </ul>

            <div class="intrCarouselNavButtons">
                <a class="intrCarouselNavButtons-btn intrCarouselNavButtons-btn_left" href="#"></a>
                <a class="intrCarouselNavButtons-btn intrCarouselNavButtons-btn_right" href="#"></a>
            </div>
        </div>
    </div>
    <!-- END .grid-row -->
</div>
    <!-- END .grid -->

<div class="hghContrast">
    <div class="grid">
        <div class="grid-row">
            <div class="grid-row-col grid-row-col_size12of12">
                <div class="hroBnr">
                    <ul class="intrCarousel">
                        <li class="intrCarousel-slide intrCarousel-slide_isNotCurrent">
                            <div class="intrCarousel-slide-bd">
                                <div class="intrCarousel-slide-bd-element">
                                    <img class="imgFrm imgFrm_open imgFrm_round" src="http://placekitten.com/608/370" alt="Hero Image" />
                                </div>
                                <div class="intrCarousel-slide-bd-content">
                                    <h2 class="hdg hdg_3">long hero banner heading</h2>
                                    <p class="intrCarousel-slide-bd-content-text">
                                        First ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna.
                                    </p>
                                    <a href="#" class="btn btn_whiteOrange mix-btn_lrg">watch</a>
                                </div>
                            </div>
                        </li>

                        <li class="intrCarousel-slide intrCarousel-slide_notFirst intrCarousel-slide_isNotCurrent">
                            <div class="intrCarousel-slide-bd">
                                <div class="intrCarousel-slide-bd-element">
                                    <img class="imgFrm imgFrm_open imgFrm_round" src="http://placekitten.com/608/370" alt="Hero Image" />
                                </div>
                                <div class="intrCarousel-slide-bd-content">
                                    <h2 class="hdg hdg_3">long hero banner heading</h2>
                                    <p class="intrCarousel-slide-bd-content-text">
                                        First ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna.
                                    </p>
                                    <a href="#" class="btn btn_whiteOrange mix-btn_lrg">watch</a>
                                </div>
                            </div>
                        </li>

                        <li class="intrCarousel-slide intrCarousel-slide_notFirst intrCarousel-slide_isCurrent">
                            <div class="intrCarousel-slide-bd">
                                <div class="intrCarousel-slide-bd-element">
                                    <img class="imgFrm imgFrm_open imgFrm_round" src="http://placekitten.com/608/370" alt="Hero Image" />
                                </div>
                                <div class="intrCarousel-slide-bd-content">
                                    <h2 class="hdg hdg_3">long hero banner heading</h2>
                                    <p class="intrCarousel-slide-bd-content-text">
                                        First ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna.
                                    </p>
                                    <a href="#" class="btn btn_whiteOrange mix-btn_lrg">watch</a>
                                </div>
                            </div>
                        </li>

                        <li class="intrCarousel-slide intrCarousel-slide_notFirst intrCarousel-slide_isNotCurrent">
                            <div class="intrCarousel-slide-bd">
                                <div class="intrCarousel-slide-bd-element">
                                    <img class="imgFrm imgFrm_open imgFrm_round" src="http://placekitten.com/608/370" alt="Hero Image" />
                                </div>
                                <div class="intrCarousel-slide-bd-content">
                                    <h2 class="hdg hdg_3">long hero banner heading</h2>
                                    <p class="intrCarousel-slide-bd-content-text">
                                        First ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna.
                                    </p>
                                    <a href="#" class="btn btn_whiteOrange mix-btn_lrg">watch</a>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                            <!-- END .intrCarousel -->

                <ul class="intrCarouselController">
                    <li class="intrCarouselController-item">
                        <a class="intrCarouselController-item-link intrCarouselController-item-link_isCurrent" href="#"></a>
                    </li>
                    <li class="intrCarouselController-item">
                        <a class="intrCarouselController-item-link" href="#"></a>
                    </li>
                    <li class="intrCarouselController-item">
                        <a class="intrCarouselController-item-link" href="#"></a>
                    </li>
                    <li class="intrCarouselController-item">
                        <a class="intrCarouselController-item-link" href="#"></a>
                    </li>
                </ul>

                <div class="intrCarouselNavButtons">
                    <a class="intrCarouselNavButtons-btn intrCarouselNavButtons-btn_left" href="#"></a>
                    <a class="intrCarouselNavButtons-btn intrCarouselNavButtons-btn_right" href="#"></a>
                </div>
            </div>
        </div>
        <!-- END .grid-row -->
    </div>
    <!-- END .grid -->
</div>

```

*/

.intrCarousel {
    overflow: hidden;
    padding: 33px;
    height: 370px;
    width: 968px;
    margin-top: 27px;
}

.intrCarousel-slide {
    position: absolute;
    display: block;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    height: 370px;
    opacity: 0;
    z-index: 10;
}

.intrCarousel-slide-bd {
    width: 902px;
    display: table;
}

.intrCarousel-slide-bd-element {
    display: table-cell;
    -webkit-border-radius: 3px 0 0 3px;
    -moz-border-radius: 3px 0 0 3px;
    -o-border-radius: 3px 0 0 3px;
    border-radius: 3px 0 0 3px;
}

.intrCarousel-slide-bd-content {
    display: table-cell;
    vertical-align: middle;
    padding: 0 21px;
}

.intrCarousel-slide-bd-content-text {
    margin: 10px 0 14px 0;
    font-size: 14px;
    line-height: 1.43; /* 20px/14px */
    color: #ffffff;
}

.intrCarousel-slide_isCurrent {
    opacity: 1;
    z-index: 40;
}

.intrCarouselController {
    overflow: hidden;
    float: right;
    margin: -452px 0 0 0;
    width: 120px;
}

.intrCarouselController-item {
    float: right;
    margin-right: 8px;
}

.intrCarouselController-item-link {
    display: block;
    width: 12px;
    height: 12px;
    background: #ffffff;
    border-radius: 6px;
}

.intrCarouselController-item-link_isCurrent {
    background: #4f2170;
}

.intrCarouselNavButtons {
    position: absolute;
    width: 968px;
    height: 54px;
    margin-top: -280px;
}

.intrCarouselNavButtons-btn {
    overflow: hidden;
    width: 71px;
    height: 54px;
    opacity: 0.5;
    background: url(../../images/interior-carousel-btn-sprite.png) 0 0 no-repeat;
    -webkit-transition: all 0.15s ease-in-out;
    -moz-transition: all 0.15s ease-in-out;
    -ms-transition: all 0.15s ease-in-out;
    -o-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;
}

.intrCarouselNavButtons-btn:hover {
    opacity: 1;
}

.intrCarouselNavButtons-btn:active {
    margin-top: 2px;
}

.intrCarouselNavButtons-btn_left {
    float: left;
    margin-left: -50px;
}

.intrCarouselNavButtons-btn_right {
    float: right;
    background-position: -71px 0;
    margin-right: -50px;
}

/* ---------------------------------------------------------------------
Layout Border Styles
------------------------------------------------------------------------ */

/*doc

---

title: Layout Border
name: layout_border
category: Base

---

Border styles that can be added to a container.

```html_example

    <div class="grid">
        <div class="grid-row">
            <div class="grid-row-col grid-row-col_size1of12">
                <div class="lbrdr lbrdr_top" style="width: 100%; height: 100px;"></div>
            </div>
            <div class="grid-row-col grid-row-col_size1of12">
                <div class="lbrdr lbrdr_bottom" style="width: 100%; height: 100px;"></div>
            </div>
            <div class="grid-row-col grid-row-col_size1of12">
                <div class="lbrdr lbrdr_left" style="width: 100%; height: 100px;"></div>
            </div>
            <div class="grid-row-col grid-row-col_size1of12">
                <div class="lbrdr lbrdr_right" style="width: 100%; height: 100px;"></div>
            </div>
            <div class="grid-row-col grid-row-col_size1of12">
                <div class="lbrdr" style="width: 100%; height: 100px;"></div>
            </div>
            <div class="grid-row-col grid-row-col_size1of12">
                <div class="hghContrast">
                    <div class="lbrdr" style="width: 100%; height: 100px;"></div>
                </div>
            </div>
        </div>
    </div>

```

*/

.lbrdr {
    border-width: 1px;
    border-style: solid;
    border-color: #b2ebee;
}

.lbrdr_top { border-width: 1px 0 0; }
.lbrdr_right { border-width: 0 1px 0 0; }
.lbrdr_bottom {
    border-width: 0 0 1px;
    margin-bottom: 27px;
}
.lbrdr_left { border-width: 0 0 0 1px; }

.lbrdr_topBot {
    border-width: 1px 0;
    margin-bottom: 27px;
}

/* In some circumstances, this class needs margins to push the border out appropriately, instead of grid */
.lbrdr_halfGutRight { padding-right: 14px; } /* 28 */
.lbrdr_halfGutLeft { padding-left: 14px; } /* 28 */

/* ---------------------------------------------------------------------
High Contrast
------------------------------------------------------------------------ */
.hghContrast .lbrdr,
.hghContrast .lbrdr_top,
.hghContrast .lbrdr_right,
.hghContrast .lbrdr_bottom,
.hghContrast .lbrdr_left
{
    border-color: #454545;
}


/* ---------------------------------------------------------------------
Pagination Styles
------------------------------------------------------------------------ */

/*doc

---

title: Pagination
name: pagination
category: Modules

---

Styles the navigation container and navigation items for the main navigation. Also adds icon on :before on rollover.

```html_example
<div class="box">
    <ul class="pagination box-content">
        <li class="pagination-item"><a class="pagination-item-link" href="#">prev</a></li>
        <li class="pagination-item">1-10 of 47</li>
        <li class="pagination-item pagination-item_link"><a class="pagination-item-link" href="#">next</a></li>
    </ul>
</div>
<div class="hghContrast">
    <div class="box">
        <ul class="pagination box-content">
            <li class="pagination-item"><a class="pagination-item-link" href="#">prev</a></li>
            <li class="pagination-item">1-10 of 47</li>
            <li class="pagination-item pagination-item_link"><a class="pagination-item-link" href="#">next</a></li>
        </ul>
    </div>
</div>
```

*/

.pagination {
    font-size: 13px;
    line-height: 1.23; /* 16px/13px */
}

.pagination-item {
    display:inline;
}

.pagination-item-link {
    color: #ce1126;
}

.hghContrast .pagination-item {
    color: #ffffff;
}

/* ---------------------------------------------------------------------
Subnavigation Styles
------------------------------------------------------------------------ */

/*doc

---

title: Subnavigation
name: subnav
category: Modules

---

Subnavigation as displayed on the lefthand side

```html_example
<ul id="mluker-test-id" class="mainNav clearfix subnav">
    <li class="menu-item menu-level-0 parent-direct-selected first">
        <a id="phleftcolumn_0_ListMenu_MenuList_ctl00_Menu_hlDisplayName" title="mluker" href="/en/mluker" target="_self">
            <span>mluker</span>
        </a>

        <ul id="phleftcolumn_0_ListMenu_MenuList_ctl00_Menu_ulChildrenElement">
            <li class="menu-item menu-level-1">

                <a id="phleftcolumn_0_ListMenu_MenuList_ctl00_Menu_ctl00_MenuList_ctl00_Menu_hlDisplayName" title="jon" href="/en/mluker/john" target="_self">
                    <span>jon</span>
                </a>
            </li>

            <li class="menu-item menu-level-1 selected">
                <a id="phleftcolumn_0_ListMenu_MenuList_ctl00_Menu_ctl00_MenuList_ctl01_Menu_hlDisplayName" title="mluker-nav-display" href="/en/mluker/mluker2" target="_self">
                    <span>mluker-nav-display</span>
                </a>

                <ul id="phleftcolumn_0_ListMenu_MenuList_ctl00_Menu_ctl00_MenuList_ctl01_Menu_ulChildrenElement">
                    <li class="menu-item menu-level-2">
                        <a id="phleftcolumn_0_ListMenu_MenuList_ctl00_Menu_ctl00_MenuList_ctl01_Menu_ctl00_MenuList_ctl00_Menu_hlDisplayName" title="mike" href="/en/mluker/mluker2/mike" target="_self">
                            <span>mike</span>
                        </a>
                    </li>
                </ul>

            </li>

            <li class="menu-item menu-level-1">
                <a id="phleftcolumn_0_ListMenu_MenuList_ctl00_Menu_ctl00_MenuList_ctl02_Menu_hlDisplayName" title="steven" href="/en/mluker/steven" target="_self">
                    <span>steven</span>
                </a>
            </li>
        </ul>

    </li>
</ul>
```

*/

.subnav {
    padding-top: 26px;
    font-weight: bold;
    font-size: 12px;
    margin: 0 27px;
}

.subnav li {
    margin-bottom: 10px;
    line-height: 1.375; /* 22/16 */
}

.subnav ul {
    margin-top: 10px;
}

.subnav > * > ul {

}

.subnav > * > ul > * > ul,
.subnav > * > ul > * > ul > * > ul {
    margin-left: 11px;
}

.subnav a,
.subnav a:visited {
    color: #4f2170;
}

.subnav a:hover,
.subnav .parent-direct-selected > a:hover,
.subnav .selected > a:hover {
    color: #bac405;
}

.subnav .selected > a,
.subnav .parent-direct-selected > a,
.subnav .parent-direct-selected > a:visited,
.subnav .selected > a:visited {
    color: #ce1126;
}

.subnav .parent-direct-selected > a:after,
.subnav .selected > a:after {
    display: absolute;
    content: ">>";
    margin-left: 5px;
    margin-right: -5px;
}

.subnav > .parent-direct-selected > a,
.subnav > .selected > a {
    color: #f95602;
}

.subnav > .parent-direct-selected > a:after,
.subnav > .selected > a:after {
    content: " ";
}

.subnav > li > a,
.subnav > li > a:visited {
    font-family: "Arial Black", Gadget, sans-serif;
    font-size: 28px;
    color: #f95602;
    line-height: 1.3;
    margin-bottom: 20px;
    text-transform: lowercase;
}

.subnav > li > a:hover {
    color: #f95602;
    text-decoration: none;
}

/*************************
High Contrast
*************************/
.hghContrast .subnav > li > a,
.hghContrast .subnav > li > a:visited,
.hghContrast .subnav > li > a:hover {
    color: #f95602;
}

.hghContrast .subnav a,
.hghContrast .subnav a:visited {
    color: #ffffff;
}

.hghContrast .subnav a:hover,
.hghContrast .subnav .parent-direct-selected > a:hover,
.hghContrast .subnav .selected > a:hover {
    color: #bac405;
}

.hghContrast .subnav .parent-direct-selected > a,
.hghContrast .subnav > .selected > a {
    color: #f95602;
}

/* ---------------------------------------------------------------------
Tooltip Styles
------------------------------------------------------------------------ */

/*doc

---

title: Tooltip
name: tooltip
category: Base

---

Change the look of the tooltip when hovering.

```html_example
    <div class="grid">
        <div class="grid-row">
            <div class="grid-row-col grid-row-col_size8of12">
                <a href="#" data-tooltip="DOWNLOAD">Download</a>
            </div>
        </div>
        <div class="grid-row">
            <div class="grid-row-col grid-row-col_size8of12">
                <a class="icnBtn icnBtn_mail" data-tooltip="PRODUCTS" href="#">find a product</a>
            </div>
        </div>

        <div class="grid-row">
            <div class="grid-row-col grid-row-col_size8of12">
                <div class="hghContrast">
                    <a href="#" data-tooltip="DOWNLOAD">Download</a>
                </div>
            </div>
        </div>
        <div class="grid-row">
            <div class="grid-row-col grid-row-col_size8of12">
                <div class="hghContrast">
                    <a class="icnBtn icnBtn_mail" data-tooltip="Products" href="#">find a product</a>
                </div>
            </div>
        </div>
    </div>
```

*/

/* tooltip */
[data-tooltip]:after {
    content: attr(data-tooltip);
    max-width: 100px;
    overflow: hidden;
    position: absolute;
    padding: 4px 6px;
    font-size: 10px;
    background: #ffffff;
    color: #000000;
    font-weight: normal;
    text-indent: 0px;
    margin-top: 35px;
    text-transform: uppercase;
    border: 1px solid #cbf0f4;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -o-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 0 5px 2px #d2f2f5;
    -moz-box-shadow: 0 0 5px 2px #d2f2f5;
    -ms-box-shadow: 0 0 5px 2px #d2f2f5;
    -o-box-shadow: 0 0 5px 2px #d2f2f5;
    box-shadow: 0 0 5px 2px #d2f2f5;
    opacity: 0;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}

[data-tooltip]:hover:after {
    opacity: 1;
}

.galleryDwnldBtn[data-tooltip]:after {
    margin-left: 9913px;
}


/* ---------------------------------------------------------------------
High Contrast
------------------------------------------------------------------------ */

.hghContrast [data-tooltip]:hover:after {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
}

/* ---------------------------------------------------------------------
Highlight Container Styles
------------------------------------------------------------------------ */

/*doc

---

title: Highlight Container
name: highlight_container
category: Modules

---

A Highlight Container contains a date first followed by an optional image with a title and text next to the image side by side.
Also has a background color when hovering on it.

```html_example

    <ul class="hList">
        <li>
            <a href="#" class="hghlght">
                <div class="date">September 26, 2013</div>
                <h5 class="hdg hdg_6 mix-hdg_red">mondelez international announces region leadership changes</h5>
                <div class="hghlght-bd media-bd">
                    <p>Presenting on behalf od the company will be Cairman and CEO Irene Rosenfeld, Executive Vice President and Chief...</p>
                </div>
            </a>
        </li>
        <li>
            <a href="#" class="hghlght">
                <div class="date">September 26, 2013</div>
                <div class="media">
                    <div class="media-element"></div>
                    <div class="hdg hdg_6 mix-hdg_red">mondelez international announces region leadership changes</div>
                    <div class="hghlght-bd media-bd">
                        <p>Presenting on behalf od the company will be Cairman and CEO Irene Rosenfeld, Executive Vice President and Chief...</p>
                    </div>
                </div>
            </a>
        </li>
        <li>
            <div class="hghContrast">
                <a href="#" class="hghlght">
                    <div class="date">September 26, 2013</div>
                    <div class="media">
                        <div class="media-element"></div>
                        <div class="hdg hdg_6 mix-hdg_red">mondelez international announces region leadership changes</div>
                        <div class="hghlght-bd media-bd">
                            <p>Presenting on behalf od the company will be Cairman and CEO Irene Rosenfeld, Executive Vice President and Chief...</p>
                        </div>
                    </div>
                </a>
            </div>
        </li>
    </ul>
```

*/

.hghlght {
    overflow: hidden;
    padding: 20px 15px;
    display: block;
}

.hghlght_sm {
    padding: 10px;
}

.hghlght:hover {
    background-color: #e6f7f9;
    text-decoration: none;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
}

.hghlght > a:link,
.hghlght > a:visited {
    font-size: 13px;
    color: #000000;
}

.hghlght > a:hover {
    text-decoration: none;
}
/* ---------------------------------------------------------------------
High Contrast
------------------------------------------------------------------------ */

.hghContrast .hghlght:hover {
    background-color: #000000;
}

.hghContrast .hghlght > a:link,
.hghContrast .hghlght > a:visited {
    color: #ffffff;
}

/* ---------------------------------------------------------------------
Accessibility Styles
------------------------------------------------------------------------ */

/*doc

---

title: Accessibility
name: accessibility
category: Modules

---

Styling for the text contrast and text size switchers.

```html_example
<div class="accessibility">
    <ul class="accessibility-cntnr">
        <li>Text Contrast</li>
        <li><a href="#" class="accessibilityBtn accessibilityBtn_drk">T</a></li>
        <li><a href="#" class="accessibilityBtn accessibilityBtn_lght accessibilityBtn_contrast_isActive">T</a></li>
    </ul>
    <ul class="accessibility-cntnr accessibility-cntnr_txt">
        <li>Text Size</li>
        <li><a href="#" class="accessibilityBtn accessibilityBtn_txt">A</a></li>
        <li><a href="#" class="accessibilityBtn accessibilityBtn_txt accessibilityBtn_md accessibilityBtn_txtSize_isActive">A</a></li>
        <li><a href="#" class="accessibilityBtn accessibilityBtn_txt accessibilityBtn_lrg">A</a></li>
    </ul>
</div>
```

*/

.accessibility {
    overflow: hidden;
    color: #000000;
    font: 11px/1.8181 Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 0; /* Slide the container over the content when not selected */
    opacity: 1;
    -webkit-transition: 1s all ease-in-out;
    -moz-transition: 1s all ease-in-out;
    -ms-transition: 1s all ease-in-out;
    -o-transition: 1s all ease-in-out;
    transition: 1s all ease-in-out;
}

.masthead_hideAccessibility .accessibility,
.masthead_hideAll .accessibility {
    opacity: 0;
    margin-bottom: -81px;
}

.accessibility-cntnr {
    display: table-cell;
    padding: 10px;
    margin-left: 10px;
}

.accessibility-cntnr > * {
    display: table-cell;
    vertical-align: center;
}

.accessibility-cntnr+.accessibility-cntnr {
    padding-left: 25px;
}

/* ------------------------------------------------------
High Contrast
-------------------------------------------------------*/
.hghContrast .accessibility-cntnr > * {
    color: #000000;
}


/* ---------------------------------------------------------------------
Stock Ticker Styles
------------------------------------------------------------------------ */

/*doc

---

title: Stock Ticker
name: stckTckr
category: Base

---

An object that displays the price of mondelez's stock in a drop graphic.

```html_example

<div class="stckTckr stckTckr_lrg">
    <div class="stckTckr-bd">
        <h4 class="stckTckr-bd-hdg stckTckr-bd-hdg_stckSymbol">mdlz</h4>
        <h3 class="stckTckr-bd-hdg stckTckr-bd-hdg_price">31.42</h3>
        <p class="stckTckr-bd-change stckTckr-bd-change_pos">12.9</p>
    </div>
</div>

<div class="stckTckr stckTckr_sm">
    <div class="stckTckr-bd">
        <p class="stckTckr-bd-change stckTckr-bd-change_sm stckTckr-bd-change_pos">12.9</p>
    </div>
</div>

```

*/

.stckTckr {
    overflow: hidden;
}

.stckTckr_lrg {
    width: 149px;
    height: 232px;
    margin: 0 36px 10px 36px; /* Give left margin to fill next highest grid size. (304 - 232)/2 = 36px */
    background: url(../../images/stock-drop-lrg.png) no-repeat;
}

.stckTckr_sm {
    width: 87px;
    height: 135px;
    padding-right: 20px;
    background: url(../../images/stock-drop-sm.png) no-repeat;
}

.stckTckr-bd {
    margin-top: 20px;
    width: 100%;
}

.stckTckr-bd-hdg {
    font-family: "Arial Black", Gadget, sans-serif;
    text-align: center;
    color: #ffffff;
    margin-bottom: 8px;
}

.stckTckr-bd-hdg_stckSymbol {
    font-size: 19px;
}

.stckTckr-bd-hdg_price {
    font-size: 31px;
}

.stckTckr-bd-hdg_price:before {
    content: "$";
    position: absolute;
    font-size: 20px;
    margin: 0 0 0 -15px;
}

.stckTckr-bd-change {
    float: right;
    margin: 0 20px 0 0;
    color: #ffffff;
    font-weight: bold;
}

.stckTckr-bd-change_sm {
    margin: 8px 10px 0 0;
    font-size: 18px;
}

.stckTckr-bd-change:after {
    content: "%";
}

.stckTckr-bd-change_pos:before {
    content: "+ ";
}
.stckTckr-bd-change_neg:before {
    content: "- ";
}

/* ---------------------------------------------------------------------
SWEET Required Styles
------------------------------------------------------------------------ */

/* These styles are required for proper implementation of elements in SWEET */

#header {
    width: 100%;
}

#content {
    overflow: hidden;
    width: 1024px;
    margin: 0 auto -72px auto;
    padding-bottom: 140px;
    background: #ffffff; /* progressively enhances to transparent in modern browsers */
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid #b2ebee;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    z-index: 2;
}

#footer {
    position: relative;
    width: 100%;
    z-index: 2;
}

.content-left,
.content-right {
    float: left;
}

.content-left {
    width: 276px;
    min-height: 10px;
    margin-right: -57px;
}

.home #header {
    margin-bottom: -38px;
    position: relative;
    z-index: 3;
}

.home #content {
    padding-top: 62px;
}

.hghContrast #content {
    background: #000000;
    border: none;
}

/* This is for the inserted h1 */
#phrightcolumn_0_PageTitlePanel > h1, #phrightcolumn_1_PageTitlePanel > h1 {
    margin: 28px 0 33px 56px;
    max-width: 719px;
    text-transform: lowercase;
    color: #ce1126;
    font-family: "Arial Black", Gadget, sans-serif;
    font-size: 36px;
    line-height: 1.2;
}

/* This is for the inserted h1 */
#phrightcolumn_0_PageTitlePanel > h1, #phmiddlecontent_1_PageTitlePanel > h1 {
    margin: 28px 0 33px 56px;
    max-width: 719px;
    text-transform: lowercase;
    color: #ce1126;
    font-family: "Arial Black", Gadget, sans-serif;
    font-size: 36px;
    line-height: 1.2;
}
.contactPage #phrightcolumn_0_PageTitlePanel > h1, .contactPage #phrightcolumn_1_PageTitlePanel > h1 {
    margin: 28px 0 33px 0px;
}

.shortMargin #phrightcolumn_0_PageTitlePanel > h1, .shortMargin #phrightcolumn_1_PageTitlePanel > h1 {
    margin: 28px 0 13px 56px;
}

.hideH1 #phrightcolumn_0_PageTitlePanel, .hideH1 #phrightcolumn_1_PageTitlePanel, .hideH1 #phmaincontent_0_PageTitlePanel {
    display: none;
}

.allow-hidden .hidden, .allow-hidden .js-fullDescription {
    display: none;
}

/* Overwrite form Styles */
.scfValidatorRequired, .scfRequired {
    float: left;
    line-height: 0.6;
    margin-right: 2px;
}

.scfDropListBorder,
.scfEmailBorder,
.scfMultipleLineTextBorder,
.scfSingleLineTextBorder,
.scfPasswordBorder,
.scfNumberBorder,
.scfDatePickerBorder,
.scfDateBorder,
.scfRadioButtonListBorder,
.scfListBoxBorder,
.scfCheckBoxListBorder,
.scfFileUploadBorder,
.scfDateSelectorBorder,
.scfCreditCardBorder,
.scfConfirmPasswordBorder,
.scfCaptchaBorder,
.scfTelephoneBorder,
.scfSmsTelephoneBorder {
    display: block;
    margin: 15px 0;
    overflow: hidden;
    text-align: left;
    vertical-align: top;
    width: 100%;
}

.scfSubmitButtonBorder input[type="submit"] {
    display: none;
}

/* ---------------------------------------------------------------------
Box Form Styles
------------------------------------------------------------------------ */

.boxForm {
    float: right;
    margin: 21px 0;
}

.boxForm-label {
    font-size: 13px;
    color: #4f2170;
    font-weight: bold;
    margin-right: 10px;
}

.boxForm-input {
    height: 21px;
    border: 1px solid #e2e3e8;
    border-top: 1px solid #adadb2;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;
}

.boxForm-input_select {
    width: 277px;
    margin-right: 10px;
}

.boxForm-button {
    display: inline;
    margin: -1px 27px 1px 5px;
}

.hghContrast .boxForm-label {
    color: #ffffff;
}

/* ---------------------------------------------------------------------
Search Styles
------------------------------------------------------------------------ */

.search {
    margin: 22px 0;
}

.search > * {
    margin-bottom: 22px;
    font-size: 13px;
}

/* ---------------------------------------------------------------------
Sitemap Styles
------------------------------------------------------------------------ */

.sitemap > ul {
    padding-top: 26px;
    font-weight: bold;
    font-size: 15px;
    margin: 0 27px;
}

.sitemap > ul li {
    margin-bottom: 10px;
    line-height: 1.375; /* 22/16 */
}

.sitemap > ul ul {
    margin-top: 12px;
}

.sitemap > ul > * > ul > * > ul {
    margin-left: 11px;
}

.sitemap a,
.sitemap a:visited {
    color: #4f2170;
}

.sitemap a:hover {
    color: #bac405;
}

.hghContrast .sitemap a,
.hghContrast .sitemap a:visited {
    color: #ffffff;
}

/* ---------------------------------------------------------------------
Region Styles
------------------------------------------------------------------------ */

/*doc

---

title: Regions
name: regions
category: Modules

---

Styles the lists of regions, as well as adding hover / selected state styling.

```html_example
<div class="regions">
    <div class="grid">
        <div class="grid-row">
            <div class="grid-row-col grid-row-col_size3of12">
                <div class="region">
                    <div class="region-bd">
                        <ul class="region-bd-list region-bd-list_noBotMargin">
                            <li class="region-bd-list-item"><a class="regionLink regionLink_isActive" href="">Viewing Global</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="grid-row">
            <div class="grid-row-col grid-row-col_size3of12">
                <div class="region">
                    <div class="region-hd region-hd_oneLine">
                        <h3 class="hdg hdg_7 mix-hdg_purple mix-hdg_isNormalCase">Asia Pacific</h3>
                    </div>
                    <div class="region-bd">
                        <ul class="region-bd-list">
                            <li class="region-bd-list-item"><a class="regionLink" href="">Asia Pacific Region</a></li>
                            <li class="region-bd-list-item"><a class="regionLink" href="">Austrailia/New Zealand <span>Recipe</span></a></li>
                            <li class="region-bd-list-item"><a class="regionLink" href="">China <span>中国</span></a></li>
                            <li class="region-bd-list-item"><a class="regionLink" href="">India</a></li>
                            <li class="region-bd-list-item"><a class="regionLink" href="">Japan <span>日本</span></a></li>
                            <li class="region-bd-list-item"><a class="regionLink" href="">Malaysia</a></li>
                            <li class="region-bd-list-item"><a class="regionLink" href="">Philippines</a></li>
                            <li class="region-bd-list-item"><a class="regionLink" href="">Thailand</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="grid-row-col grid-row-col_size3of12">
                <div class="region">
                    <div class="region-hd">
                        <h3 class="hdg hdg_7 mix-hdg_purple mix-hdg_isNormalCase">Central and Eastern Europe, Middle East and Africa</h3>
                    </div>
                    <div class="region-bd">
                        <ul class="region-bd-list">
                            <li class="region-bd-list-item"><a class="regionLink" href="">Arabia <span>Recipes</span></a></li>
                            <li class="region-bd-list-item"><a class="regionLink" href="">Czech Republic <span>Ceská republika</span></a></li>
                            <li class="region-bd-list-item"><a class="regionLink" href="">Estonia <span>Eesti</span></a></li>
                            <li class="region-bd-list-item"><a class="regionLink" href="">Latvia <span>Latvija</span></a></li>
                            <li class="region-bd-list-item"><a class="regionLink" href="">Lithuania <span>Lietuva</span></a></li>
                            <li class="region-bd-list-item"><a class="regionLink" href="">Nigeria</a></li>
                            <li class="region-bd-list-item"><a class="regionLink" href="">Romania</a></li>
                            <li class="region-bd-list-item"><a class="regionLink" href="">Russia</a></li>
                            <li class="region-bd-list-item"><a class="regionLink" href="">Slovakia <span>Slovenská republika</span></a></li>
                            <li class="region-bd-list-item"><a class="regionLink" href="">Turkey</a></li>
                            <li class="region-bd-list-item"><a class="regionLink" href="">Ukraine</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="grid-row-col grid-row-col_size3of12">
                <div class="region">
                    <div class="region-hd region-hd_oneLine">
                        <h3 class="hdg hdg_7 mix-hdg_purple mix-hdg_isNormalCase mix-hdg_isNormalCase_oneLine">Europe</h3>
                    </div>
                    <div class="region-bd">
                        <ul class="region-bd-list">
                            <li class="region-bd-list-item"><a class="regionLink" href="">Europe <span>English</span></a></li>
                            <li class="region-bd-list-item"><a class="regionLink" href="">Austria <span>Österreich</span></a></li>
                            <li class="region-bd-list-item"><a class="regionLink" href="">Belgium <span>België Belgique</span></a></li>
                            <li class="region-bd-list-item"><a class="regionLink" href="">Denmark <span>Danmark</span></a></li>
                            <li class="region-bd-list-item"><a class="regionLink" href="">Finland <span>Suomi</span></a></li>
                            <li class="region-bd-list-item"><a class="regionLink" href="">France <span>Francais</span></a></li>
                            <li class="region-bd-list-item"><a class="regionLink" href="">Germany <span>Deutschland</span></a></li>
                            <li class="region-bd-list-item"><a class="regionLink" href="">Greece <span>Ελλάδα</span></a></li>
                            <li class="region-bd-list-item"><a class="regionLink" href="">Italy <span>Italia</span></a></li>
                            <li class="region-bd-list-item"><a class="regionLink" href="">Netherlands <span>Nederland</span></a></li>
                            <li class="region-bd-list-item"><a class="regionLink" href="">Norway <span>Norge</span></a></li>
                            <li class="region-bd-list-item"><a class="regionLink" href="">Portugal <span>Português</span></a></li>
                            <li class="region-bd-list-item"><a class="regionLink" href="">Spain <span>España</span></a></li>
                            <li class="region-bd-list-item"><a class="regionLink" href="">Sweden <span>Sverige</span></a></li>
                            <li class="region-bd-list-item"><a class="regionLink" href="">Switzerland of the Place where the swiss be <span><br/>Schweiz<span>/</span>Suisse<span>/</span>Svizzera</span></a></li>
                            <li class="region-bd-list-item"><a class="regionLink" href="">United Kingdom</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="grid-row-col grid-row-col_size3of12">
                <div class="region">
                    <div class="region-hd region-hd_oneLine">
                        <h3 class="hdg hdg_7 mix-hdg_purple mix-hdg_isNormalCase mix-hdg_isNormalCase_oneLine">Latin America</h3>
                    </div>
                    <div class="region-bd">
                        <ul class="region-bd-list">
                            <li class="region-bd-list-item"><a class="regionLink" href="">Argentina</a></li>
                            <li class="region-bd-list-item"><a class="regionLink" href="">Brazil <span>Brasil</span></a></li>
                            <li class="region-bd-list-item"><a class="regionLink" href="">Mexico</a></li>
                            <li class="region-bd-list-item"><a class="regionLink" href="">Puerto Rico</a></li>
                        </ul>
                    </div>
                </div>
                <div class="region">
                    <div class="region-hd region-hd_oneLine">
                        <h3 class="hdg hdg_7 mix-hdg_purple mix-hdg_isNormalCase">North America</h3>
                    </div>
                    <div class="region-bd">
                        <ul class="region-bd-list">
                            <li class="region-bd-list-item"><a class="regionLink" href="">Canada <span>English <span>/</span> French</span></a></li>
                            <li class="region-bd-list-item"><a class="regionLink" href="">United States</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
```

*/

.regions {
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 0;
    opacity: 1;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
.masthead_hideRegions .regions,
.masthead_hideAll .regions {
    opacity: 0;
    margin-top: -1200px; /* Slide the container over the content when not selected  */
}

.region-hd {
    margin-bottom: 7px;
    border-bottom: 1px solid #4f2170;
    box-shadow: 0 1px 0 0 #ffffff;
}

.region-hd_oneLine {
    margin-top: 20px;
}

.region-bd-list {
    margin: -5px 0 0 0;
}

.region-bd-list_noBotMargin {
	float: left;
    margin: -7px 0 -50px -5px;
	width: 100%;
}

.region-bd-list-item {
    float:left;
	width:25%;
	height:60px;
	margin: 5px 0 0 0;
}

.region-bd-list-item-noflag {
    float:left;
	width:25%;
	height:30px;
	margin: 5px 0 0 0;
}

.region-bd-list-item a {width:auto;margin-bottom:6px;}
.region-bd-list-item ul {position:relative;left:10px;margin:-6px 0 0 0;font-size:11px;}
.region-bd-list-item ul li {margin-bottom:-7px;}
.region-bd-list-item ul a {font-weight:normal;}

.region-bd-list-item img {float:left;margin:-2px 0 0 0;padding-right:10px;}

.regionLink {
    display: inline-block;
    color: #000000;
    text-decoration: none;
    padding: 4px 4px;
    border-radius: 4px;
}

.regionLink:hover {
    text-decoration: none;
    background: #ffffff;
    color: #d24622;
	width:auto;
}
.region-bd-list_noBotMargin .regionLink:hover {
	background:none;
}
.regionLink_isActive {
    color: #d24622;
}

.regionLink_isActive:after {
    position: absolute;
    content: '';
    height: 11px;
    width: 17px;
    margin-left: 5px;
    background: url(../../images/tear-drop-sprite.png) -70px -33px no-repeat;
}

.masthead_hideAll .regionLink_isActive:after,
.masthead_hideRegions .regionLink_isActive:after {
    opacity: 0;
}

.regionLink > * {
    font-size: 10px;
    font-weight: normal;
    margin-left: 5px;
    text-transform: uppercase;
    font-family: Arial Unicode MS, Arial, sans-serif;
}
.regionLink > * > * {
    margin: 0 5px;
}
/*
.globalLink {
    color: #000000;
    display: block;
    width: 100%;
    margin: -7px 0 -7px -10px;
    padding: 7px 10px;
    border-radius: 4px;
}

.globalLink:hover {
    text-decoration: none;
    background: rgba(255, 255, 255, 0.3);
}

.globalLink_isActive {
    color: #d24622;
}

.globalLink_isActive:after {
    position: absolute;
    content: '';
    height: 11px;
    width: 17px;
    margin-left: 5px;
    background: url(../../images/tear-drop-sprite.png) -70px -33px no-repeat;
}*/
/* ---------------------------------------------------------------------
High Contrast Region Styles
------------------------------------------------------------------------ */

.hghContrast .region-list > * > * {
    color: #ffffff;
    text-decoration: none;
}
/*#phleftcolumn_0_ListMenu_MenuList_ctl00_Menu_ulChildrenElement ul li {display:none;}
#phleftcolumn_0_ListMenu_MenuList_ctl00_Menu_ulChildrenElement li.parent-direct-selected ul li {display:block;}
#phleftcolumn_0_ListMenu_MenuList_ctl00_Menu_ulChildrenElement li.selected ul li {display:block;}
.subnav li ul.js-in-path li {display:block;}*/
/*.subnav.hidden {display:none !important;} */
.subnav li ul.hidden {display:none !important;}

/***------------------------------- SOCIAL AGGREGATOR --------------------***/
div.social ul.filter {display:none;}
div.social .showmoreContainer {display:none;}
div.popin {display:none;}
div#dvGrid {height:951px; overflow: auto;width:100%;margin-bottom:0px;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;}
.home .social-twitter {position:relative;top:-118px;left:185px;margin-bottom:-20px;}

.socialfeedbox-content {float: left;width: 92%;margin:-10px 10px 0 10px;}
.socialfeedbox-content a {color: #3b5998;}
.socialfeedbox-content .socialfeedRow {display:table;margin:20px 0;border-bottom:1px solid #e9e9e9;padding-bottom:15px;width:100%;float:left;}
.socialfeedbox-content .socialfeedRow:first-child {padding-top:15px;}
.socialfeedbox-content .socialfeedIcon {display:table-cell;padding-right:7px;width:50px;float:left;}
.socialfeedbox-content .socialfeedIcon img {vertical-align:text-top;}
.socialfeedbox-content .socialfeedContent {display:table-cell;top:-5px;position: relative;width:269px;float:left;}
.socialfeedbox-content .socialfeedContent .socialfeedImage {margin-top:10px;}
.socialfeedPost .socialfeedFeedName a {font-size:15px;font-weight:bold;line-height:1.25;color:#2a2a2a;}
.socialfeedPost .handle a{ font-weight: normal; }
.socialfeedbox-content .socialfeedTitle{font-size:13px;margin:3px 0 5px 0;word-break: break-word;word-wrap: break-word;line-height:1.3;}
.socialfeedPost .socialfeedTimeStamp {font-size:11px;color:#5a5a5a; margin-bottom: 10px; clear:left;} /* .socialfeedPost .socialfeedTimeStamp {font-size:11px;color:#5a5a5a; margin-bottom: 10px;} */
.socialfeedbox-content + .socialfeedbox-content {position:relative;top:-35px;}
/*IE10*/
@media screen and (min-width:0\0) { 
	.socialfeedbox-content + .socialfeedbox-content {position:relative;top:-35px;}
}
/*Hide the submit button after the form is submitted - Media Contacts*/

.btn.btn_blue.mix-btn_lrg.mix-btn_contactForm.hidden.js-submit-form {
    display: none;
}

/**** FEATURED NEWS ****/
.featured-news h2 {font-size:24px;font-weight:bold;margin:15px 0;}
.featured-news h3 {font-size:18px;margin:20px 0 0px 0;}
.featured-news .hghlght {padding:10px 15px;}
.featured-news .feature {margin-top:70px;}
.featured-news .feature-element {width:85%;margin-left:13px;}
.featured-news .feature-bd {margin:13px;}

/*************** PROCUREMENT **********************/
.prc_header {display:table;margin-top:30px;width:100%;color:#fff;font-weight:bold;background-color:#4F2170;}
.prc_header .col1 {display:table-cell;width:17%;padding:0 10px 5px 10px;border-bottom:1px solid #fff;}
.prc_header .col2 {display:table-cell;width:66%;border:1px solid #fff;border-top:none;padding:0 10px 5px 10px;}
.prc_header .col3 {display:table-cell;width:17%;padding:0 10px 5px 10px;border-bottom:1px solid #fff;}

.prc_table {float:left;width:100%;}
.prc_table .row1 {display:table;width:100%;background-color:#ccc;}
.prc_table .row2 {display:table;width:100%;background-color:#eee;}
.prc_table .col1 {display:table-cell;width:17%;padding:0 10px 5px 10px;}
.prc_table .col2 {display:table-cell;width:66%;border-left:1px solid #fff;border-right:1px solid #fff;padding:0 10px 5px 10px;}
.prc_table .col3 {display:table-cell;width:17%;padding:0 10px;}

.prc_red_header {display:table;margin-top:30px;width:100%;color:#fff;font-weight:bold;background-color:#CE1126;border-bottom:2px solid #fff;}
.prc_red_header .col1 {display:table-cell;width:17%;padding:0 10px 5px 10px;border-right:2px solid #fff;}
.prc_red_header .col2 {display:table-cell;width:83%; text-align:center;padding:0 10px 5px 10px;}

.prc_red_table {float:left;width:100%;}
.prc_red_table .row {display:table;width:100%;}
.prc_red_table .col1 {display:table-cell;width:16.3%;border-bottom:1px dotted #ccc;padding:0 10px 5px 10px;background-color:#eee;border-bottom:2px solid #fff; text-align:center;}
.prc_red_table .col2 {display:table-cell;width:27%;border-bottom:1px dotted #ccc;border-right:1px dotted #ccc;padding:0 10px 5px 10px;text-align:center;}
.prc_red_table .col3 {display:table-cell;width:27%;border-bottom:1px dotted #ccc;border-right:1px dotted #ccc;padding:0 10px;text-align:center;}
.prc_red_table .col4 {display:table-cell;width:27%;border-bottom:1px dotted #ccc;border-right:1px dotted #ccc;padding:0 10px;text-align:center;}

.prpHeader {float:left;width:105%;background-color:#4F2170;margin:15px 0 !important;font-weight:bold;text-align:center;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}

.prcHist {float:left;background-color:#00B7C5;margin-bottom:5px;padding:10px;width:95.5%;color:#fff;font-size:13px !important;}
.prcHist a {color:#fff;font-weight:bold;font-size:13px !important;}
.prcHist span {font-weight:bold;font-size:14px;}

.procurement div.imageBoxLeft {float: left;margin: 0;padding: 0 15px 0 0;}

.leftimgGrn {float:left;background-color:#B9C305;padding:10px;width:46.2%;margin:0 5px 5px 0;clear:none;}
.leftimgPrp {float:left;background-color:#4F2170;padding:10px;width:46%;clear:none;height:234px;}
.leftimgPrp2 {float:left;background-color:#4F2170;padding:10px;margin:0 5px 5px 0;width:46.2%;height:234px;clear:both;}
.leftimgGrn2 {float:left;background-color:#B9C305;padding:10px;margin:0 0 5px 0;width:46%;clear:none;}

.leftimgGrn ul,
.leftimgPrp ul,
.leftimgPrp2 ul,
.leftimgGrn2 ul {margin:15px 0;padding-left:130px;}

.leftimgGrn,
.leftimgPrp,
.leftimgPrp2,
.leftimgGrn2 {height:250px; color:#fff;}

.leftimgGrn .imageBoxLeft,
.leftimgPrp .imageBoxLeft,
.leftimgPrp2 .imageBoxLeft,
.leftimgGrn2 .imageBoxLeft {height:100%;}

.prcHist .imageBoxLeft img,
.leftimgGrn .imageBoxLeft img,
.leftimgPrp .imageBoxLeft img,
.leftimgPrp2 .imageBoxLeft img,
.leftimgGrn2 .imageBoxLeft img {border-right:1px solid #fff !important;}

.leftimgGrn a,
.leftimgPrp a,
.leftimgPrp2 a,
.leftimgGrn2 a {color:#fff;font-size:13px !important;}

.leftimgGrn a:hover,
.leftimgPrp a:hover,
.leftimgPrp2 a:hover,
.leftimgGrn2 a:hover {text-decoration:underline;}


.cpo .imageBoxLeft {height:100%;}

.cpo div.imageBoxLeft {padding:8px 0 0 0;}

.procurement.prhome #phrightcolumn_0_PageTitlePanel > h1, .procurement.prhome #phrightcolumn_1_PageTitlePanel > h1 {margin:0; text-indent:-9999px;}

.leftimg ul {margin:0 0 0 150px;padding:0;font-size:12px;color:#fff;}
.leftimg .textArea span {position:relative;top:-7px;right:-120px;}

.prcTitleGrn, .prcTitleGrn2 {background-color: #B9C305;margin-bottom: 15px !important;padding: 5px;height:35px;-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;}
.prcTitleGrn h1, .prcTitleGrn2 h1 {background-color: #B9C305;border: 2px solid #FFFFFF; color: #FFFFFF !important;padding: 0 0 5px 10px;}

.prcTitlePrp, .prcTitlePrp2 {background-color: #4F2170;margin-bottom: 15px !important;padding: 5px;height:35px;-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;}
.prcTitlePrp h1, .prcTitlePrp2 h1 {background-color: #4F2170;border: 2px solid #FFFFFF; color: #FFFFFF !important;padding: 0 0 5px 10px;}

.prcTitleBlu, .prcTitleBlu2 {background-color: #00B7C5;margin-bottom: 15px !important;padding: 5px;height:35px;-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;}
.prcTitleBlu h1, .prcTitleBlu2 h1 {background-color: #00B7C5;border: 2px solid #FFFFFF; color: #FFFFFF !important;padding: 0 0 5px 10px;}

.prcTitleGrn2,
.prcTitlePrp2,
.prcTitleBlu2 {height:auto;}

.content4Square .prcTitleGrn h1,
.content4Square .prcTitlePrp h1,
.content4Square .prcTitleBlu h1,
.prcTitleGrn2 h1,
.prcTitlePrp2 h1,
.prcTitleBlu2 h1 {margin:0 !important;font-size:1.357em;}







/*-------------------NEW HEADER WITH ORANGE CURVE BANNER*/

.home .hdg_BG{
    width: 190px;
    height: 50px;
    background: url(../../uploads/home/header_curve_BG.png) no-repeat;
    margin-top: 15px;
}

.home .hdg_headlines{
    margin-top: 30px;
}
.new_hdg{
    display: inline-block;
    width: 100%;
    color: #ffffff;
    font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;
    font-size: 22px;
	font-weight:bold;
    line-height: 1.2;
    text-transform: lowercase;
    margin-top: 18px;
    text-align: center;
}

/*-------------------OUR STORIES CAROUSEL*/

#story_carousel{
    height: 480px;
}


/*-------------------STOCK TICKER*/
.stock_box{
    padding:0 0 10px 35px;
}

.stock_hdg{
    font-size: 32px;
    color: #1bb0b6;
    font-weight: bolder;
    text-transform: lowercase;
    margin-top: 50px;
}

span.percentage_pos{
    font-size: 18px;
    color: #389818;
    margin-left: 135px;
}
span.percentage_neg{
    font-size: 18px;
    color: #da3030;
    margin-left: 135px;
}
span.percentage_unchg {color:#ccc;font-size:18px;margin-left:135px;}
span.percentage .arrow{
    margin:0 6px 2px 0;
}
.stock_hdg span.price{
    background-color: #1bb0b6;
    color: #fff;
    padding: 50px 20px;
    float: right;
    margin-top: -50px;
    display: block;
}

.stock_box_bottom{
    float: left;
    padding: 15px 35px 0 0;
}
.stock_box_bottom p{
    font-size: 14px;
    line-height: 18px;
}
.stock_box_bottom hr { border:1px solid #cdecfb;}
.arrow_pos{
    height: 8px;
    width: 15px;
    background-image: url(../../uploads/home/up-arrow.png);
    display: inline-block;
}
.arrow_neg{
    height: 8px;
    width: 15px;
    background-image: url(../../uploads/home/down-arrow.png);
    display: inline-block;
	margin-right:5px;
}
.arrow_unchg {background:none;color:#ccc;display:inline-block;}
.market_hdg{
    color: #aeaeae;
    font-size: 16px;
    text-transform: uppercase;
}


/*-------------------HERO IMAGE UNDER NAVIGATION*/
#banner-load {
    width: 100%;
    height: 144px;
    /*background: url(../../uploads/home/hero-img.jpg);
    background-size: cover;*/
}
#banner-load img {width:100%;height:100%;}
.fade-in {
  -webkit-animation: fade-in 2s ease;
  -moz-animation: fade-in ease-in-out 2s both;
  -ms-animation: fade-in ease-in-out 2s both;
  -o-animation: fade-in ease-in-out 2s both;
  animation: fade-in 2s ease;
  visibility: visible;
  -webkit-backface-visibility: hidden;
}

@-webkit-keyframes fade-in{0%{opacity:0;} 100%{opacity:1;}}
@-moz-keyframes fade-in{0%{opacity:0} 100%{opacity:1}}
@-o-keyframes fade-in{0%{opacity:0} 100%{opacity:1}}
@keyframes fade-in{0%{opacity:0} 100%{opacity:1}}

/*-------------------HEADLINES*/
.headlines_story{
    padding: 10px 25px 0 25px;
}
.headlines_story hr { border:1px solid #cdecfb;}
.headlines_story a { text-transform:lowercase;}
.headlines_date{
    color:#696969;
    margin-bottom: 5px;
    font-size: 16px;
	text-transform: capitalize;
}
.headlines_hdg{
    color:#2d2d2d;
    font-size: 17px;
    font-weight:bold;
    margin-bottom: 15px;
	line-height:1.5;
	text-transform: lowercase;
}
.home .js-textResize a{
    color:#4F2170;
    margin-bottom: 15px;
    font-size: 15px;
    font-weight:bold;
    float: right;
}
.home .js-textResize hr{  
    clear: both;
    margin-top: 10px;
}



/*-------------------SOCIAL FEED TABS*/
/*----- Tabs -----*/
.social_tabs {
    width:100%;
    display:inline-block;
}

/*----- Tab Links -----*/
/* Clearfix */
.tab_links:after {
    display:block;
    clear:both;
    content:'';
}
.tab_links{
    width: 100%;
    background-color:#f5f5f5;
    display: inline-block;
}
/*
 .tab_links li {
    float: left;
    width: 25%;
    background-repeat: no-repeat;
    background-position: center;
}
*/
/* Three (3) tabs implementation. 4 tabs is above */
 .tab_links li {
    float: left;
    width: 33.3%;
    background-repeat: no-repeat;
    background-position: center;
}
/**/
.tab_links li a{
    display: block;
    height: 57px;
}

.tab-links:after {
    display:block;
    clear:both;
    content:'';
}
.twitter{
    background-color: #55acee;
    background-image: url(../../uploads/home/twitter-icon.png);
}
.linkedin{
    background-color: #1177b5;
    background-image: url(../../uploads/home/linkedin-icon.png);
}
.facebook{
    background-color: #3b5998;
    background-image: url(../../uploads/home/facebook-icon.png);
}
.youtube{
    background-color: #e22c26;
    background-image: url(../../uploads/home/youtube-icon.png);
}
.tab_links:after {
    display:block;
    clear:both;
    content:'';
}
/*
.tab_links .twitter.active:before {content:'';position:absolute;width:16px;height:8px;background:url(../../uploads/home/tab-link-down-arrow.png) bottom center;margin-left: 52px;margin-top: 67px;}
.tab_links .twitter.active:after {content:'';position:absolute;width:467px;height:10px;background-color: #55acee;}
.tab_links .linkedin.active:before {content:'';position:absolute;width:16px;height:8px;background:url(../../uploads/home/tab-link-down-arrow-ln.png) bottom center;margin-left: 52px;margin-top: 67px;}
.tab_links .linkedin.active:after {content:'';position:absolute;width:468px;height:10px;background-color: #1177b5;margin-left:-117px;}
.tab_links .facebook.active:before {content:'';position:absolute;width:16px;height:8px;background:url(../../uploads/home/tab-link-down-arrow-fb.png) bottom center;margin-left: 52px;margin-top: 67px;}
.tab_links .facebook.active:after {content:'';position:absolute;width:467px;height:10px;background-color: #3b5998;margin-left:-234px;}
.tab_links .youtube.active:before {content:'';position:absolute;width:16px;height:8px;background:url(../../uploads/home/tab-link-down-arrow-yt.png) bottom center;margin-left: 52px;margin-top: 67px;}
.tab_links .youtube.active:after {content:'';position:absolute;width:468px;height:10px;background-color: #e22c26;margin-left:-351px;}
*/
/* Three (3) tabs implementation. 4 tabs is above */
.tab_links .twitter.active:before {content:'';position:absolute;width:16px;height:8px;background:url(../../uploads/home/tab-link-down-arrow.png) bottom center;margin-left: 68px;margin-top: 67px;}
.tab_links .twitter.active:after {content:'';position:absolute;width:467px;height:10px;background-color: #55acee;}
.tab_links .linkedin.active:before {content:'';position:absolute;width:16px;height:8px;background:url(../../uploads/home/tab-link-down-arrow-ln.png) bottom center;margin-left: 50px;margin-top: 67px;}
.tab_links .linkedin.active:after {content:'';position:absolute;width:468px;height:10px;background-color: #1177b5;margin-left:-117px;}
.tab_links .facebook.active:before {content:'';position:absolute;width:16px;height:8px;background:url(../../uploads/home/tab-link-down-arrow-fb.png) bottom center;margin-left: 68px;margin-top: 67px;}
.tab_links .facebook.active:after {content:'';position:absolute;width:467px;height:10px;background-color: #3b5998;margin-left:-155px;}
.tab_links .youtube.active:before {content:'';position:absolute;width:16px;height:8px;background:url(../../uploads/home/tab-link-down-arrow-yt.png) bottom center;margin-left: 68px;margin-top: 67px;}
.tab_links .youtube.active:after {content:'';position:absolute;width:468px;height:10px;background-color: #e22c26;margin-left:-312px;}
/**/
/*----- Content of Tabs -----*/
.tab_content {
}
.tab {display:none;}
.tab.active {display:block; overflow: hidden;}

/*-------------------SOCIAL FEED POST*/

.social_note{
    padding:25px 0 1px 0;
    background-color: #f0f0f0;
    text-align: center;
}
.social_note p{
    font-size: 14px;
    color: #2d2d2d;
}
.social_icon img{
    width:57px;
    height: 57px;
    margin-right: 10px;
    background-color: blue;
   float: left;
}
.socialfeedPost{
    padding: 25px 57px 0px 57px;
}
.socialfeedFeedName div.certified{
    width: 15px;
    height: 15px;
    display: inline-block;
    margin-left: 20px;
}

div.twitter-certified{
    background-image: url(../../uploads/home/twitter-certified.png);
}

div.facebook-verified{
    background-image: url(../../uploads/home/facebook-verified.png);
}
.socialfeedFollowBtn a{
    width: 68px;
    height: 15px;
    display: inline-block;
    margin-bottom: 3px;
}
.socialfeedFollowBtn div[id*="_ytsubscribe"] {
    width: 68px !important;
    height: 15px;
    display: inline-block;
    margin-bottom: 3px;
}
.socialfeedTitle{
    float: left;
    margin: 15px 0;
}
.socialfeedTitle a {color:#3b5998;}

.socialfeedTitle hr { border:1px solid #cdecfb;margin-top:20px;}

.socialfeedtitlelink{
    color: #2a2a2a;
    font-size: 14px;
    line-height: 18px;
}
.socialfeedImage img{
    width: 100%;
    margin-top: 10px;
}
.socialfeedimglink{
   width: 100%;
   display: inline-block;
   text-align: right;
   margin: 10px 0 0px 0;
   color: #5667ce;
   text-transform: lowercase;

}

.home_btn{
    border: 2px solid #00b7c6;
    padding: 15px 20px 15px 31px;
    display:inline-block;
    margin: 15px auto;
    text-transform: lowercase;
    font-weight: bold;
    color: #00b7c6;
    font-size: 15px;
    float: none;
}
.carousel_btn{
    float: right;
    margin-top: 0;
}
.home_btn:hover{
    background-color: #67e3ed;
    color: #fff;
}
.home_btn:before{
    content: "";
    position: absolute;
    width: 32px;
    height: 39px;
    background: url(../../uploads/home/btn-burst.png) no-repeat;
    margin-top: -25px;
    margin-left: -45px;

}
/*-------------------FOOTER BURST GRAPHIC*/
.footer-container .burst {
	display:none;
	position: absolute;
    margin-left:630px;
    top: -62px;
}
.home .footer-container .burst {display:block;}

/*--------------------Growth Page Grow Shadow effect */
.hvr-grow-shadow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow, transform;
  transition-property: box-shadow, transform;
}
.hvr-grow-shadow:hover, .hvr-grow-shadow:focus, .hvr-grow-shadow:active {
  box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

/*--------------------Featured Article module   */
.featured-articles {width: 100%;}
.featured-articles .img-container { position: relative; overflow: hidden; }
.featured-articles .img-container .bg-image { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-size: 100%, 100%; background-repeat: no-repeat; background-position: center center; background-blend-mode: multiply; transition: transform 2s; -webkit-transition: -webkit-transform 2s; }
.featured-articles .img-container img { display: inline-block; visibility: hidden; width: 100%; }
.featured-articles .img-container:hover .bg-image { transform: scale(1.2); -webkit-transform: scale(1.2); }
.featured-articles .horizontal-align-five { float: left; width: 20%; text-align:block; }
.featured-articles .horizontal-align-five p {line-height: 1; margin: 15px 2px 30px 2px; font-weight: bold; text-align: center;}
#phrightcolumn_1_PageHeaderPanel {display: none;}
#phmiddlecontent_1_PageHeaderPanel {display: none;}

/*--------------------Newsroom Our Stories styles   */
.resultTypeContainer {display: none;}
.searchResultsWrapper {margin-top: 5%}

#phrightcolumn_3_imgBtnFilter {
	color:#fff;}

.resultHeader {
    font-weight: 600;
    font-style: italic;
    font-size: 14px;
    padding-top:6px;
    padding-right:20px;
    padding-bottom:20px;
    padding-left:20px;
    border-bottom: 3px solid #9b9b9b;
/*	padding-top: 50px;	*/
}

body.progress #content .row.library .SearchResult {padding: 6px;}
	
body.progress #content .row.library .SearchResult .resultHeader {
    border-bottom: 3px solid #9b9b9b;
    font-weight: 700;
    padding: 1% 40% 2.5%; 
}

.resultDescription {
  font-size: 13px;
  line-height: 1.2em;
  margin-top: 1%;
}

#phrightcolumn_4_txtSearch {
    border-radius: 3px 0 0 3px;
    float: left;
    height: 20px;
    padding-left: 10px;
    width: 60%;
}

.regionSelect default  {
	width: 30%; 
	height: 20px; 
	float:left !important; 
	margin-right:10px;
}

.filter-button {
/*	margin: 0 5% 3% 3%;	  */
	margin: 0 4%;
    float: left;
    padding: 0 3% 0 3%;
}

.filter-criteria-options {float:left;}

#phrightcolumn_3_rptFilters_ddlOptions_0  {
    font-size: 14px;
    padding: 4px 10px 4px 10px;
}

/*   ----- careers landing page redesign  ---  */
.careers-hero  {
	width: 100%;
	height: 384px;
	background-image: url(../../uploads/careers/careers_hero_notext.jpg);
	background-size: cover;
	background-repeat: no-repeat;
    background-position: right 0;
	margin-bottom: 20px;
}

.careers-content { width: 50%; color:#fff; background-size: cover; background-repeat: no-repeat; }

/* BG Variations */
.careers-content.-red { background-color: #CE1126; }
.careers-content.-orange { background-color: #F95703; }
.careers-content.-toasted-yellow { background-color: #BDC527; }
.careers-content.-burst { background-image: url('../../images/bg-burst-mask-sized.png'); }

/* .careers-content children */
.careers-content .careers-padding-five { padding:5%; }
.careers-button-margin-top { margin-top: 9%; }

/*  ----  Well-being restyling   ---- */
h7 { line-height: 1.5em; }


/* Desktop */
@media (min-width: 768px) {
    .careers-text-overlay { width:44%; padding: 3%; }
    .careers-content { float: left; position: relative; padding-bottom: 37.19%; }
    .careers-content .careers-padding-five,
    .careers-content > img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-sizing: border-box; }
    .careers-content.-right { float:right; }
}

/* Mobile */
@media (max-width: 767px) {
    .careers-hero { background-image: none; background-color: #00BECC; height: auto; }
    .careers-text-overlay { padding: 5%; }
    .careers-content { width: 100%; }
}<link href="/sitecore/shell/themes/standard/default/Default.css" rel="stylesheet" />

<link href="/sitecore/shell/controls/Lib/Flexie/flex.css" rel="stylesheet" />