/* ===============================================
=============== TABLE OF CONTENTS ================
==================================================
BRANDING COLORS
GENERAL (Includes typography)
  • Headers and titles
    > General headers
    > title-with-line
    > light-title
  • Lists
LINKS & BUTTONS
IMAGES
HEADER BAR & MAIN MENU
GLOBAL PAGE STYLES
UTILITY STYLES
  • text-no-transform
  • is-separator / has-separator
  • hightlight-text
  • has-dark-text
HOME PAGE STYLES
BREADCRUMBS & SUBNAV
SUBPAGES
  • Two Column Template
    > Two Column w/ Art .two-column-art
      - .featured-image
      - .featured-block
SIDEBARS
ENGAGEMENT BOX
CAROUSEL
FOOTER
MODULES
  • introduction-block
  • media-list
  • pagination-with-input
  • ifc-accordion
  • light-accordion
  • media-contacts-list
  • action-area
  • language-block
  • filter-bar
  • results-paging
  • results-output
  • main-banner
  • focus-links
  • read-more
  • list-of-contents-box
  • key-messages-box
  • utility-block
  • map
  • mobile-accordion
  • hero-banner

=============================================== */


/* ===============================================
================ BRANDING COLORS =================
==================================================
lightest gray: f5f5f5;
light gray: 757575;
light blue: 00ade4;
medium blue: 263e58;
dark blue: 002f53;
darkest blue: 121f2c;
yellow: ffc72c;
=============================================== */


/* ===============================================
=================== GENERAL ===================
=============================================== */

body {
    color: #263e58;
    font-family: "Lato", sans-serif;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}



/* ---------- Headers and titles ---------- */

/* General Headers */

h1, .h1 {
    text-transform: uppercase;
}

h1, .h1, h2, .h2, h3, .h3 {
    font-weight: 700;
}

h2, .h2 {
    color: #002345;
    font-size: 40px;
    text-transform: uppercase;
}

@media screen and (max-width: 767px) {
    h2, .h2 {
        color: #002345;
        font-size: 25px;
    }
}

h3, .h3 {
    color: #00ade4;
    font-size: 30px;
    text-transform: initial;
}

@media screen and (max-width: 767px) {
    h3, .h3 {
        color: #00ade4;
        font-size: 17px;
    }
}

/* Title with line */

.title-with-line,
h2.title-with-line,
h3.title-with-line,
h4.title-with-line {
    border-bottom: 5px solid #e0e0e0;
    color: #263e58;
    font-size: 27px;
    padding-bottom: 15px;
}

/* Light title */

.light-title {
    color: #00ade4;
    font-size: 17px;
    font-weight: bold;
    margin-bottom: 15px;
    margin-top: 25px;
}

@media screen and (min-width: 768px) {
    .light-title {
        font-size: 23px;
        margin-bottom: 20px;
        margin-top: 30px;
    }
}

h2.light-title {
    text-transform: none;
}


/* Dark title */

.dark-title {
    color: #2f2f2f;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
    margin-top: 15px;
}

@media screen and (min-width: 768px) {
    .dark-title {
        font-size: 18px;
        margin-bottom: 15px;
        margin-top: 30px;
    }
}

.dark-title + .dark-title {
    margin-top: 0;
}

div[class^="col-"] > .dark-title:first-child {
    margin-top: 0;
}

h2.dark-title {
    text-transform: none;
}

.dark-title.small-title {
    font-size: 15px;
}


/* ---------- Lists ----------------------- */

ul {
    font-size: inherit;
    list-style-type: circle;
    padding-left: 1.1em;
}

/* General list - .general-list
   Generic purpose list. Has ticker
   circles in the main list than the defaults.
*/

.general-list,
.general-list ul {
    list-style-type: none;
    margin-left: 0;
    padding-left: 0;
}

    .general-list ul {
        margin-top: 12px;
    }

    .general-list li {
        margin-bottom: 12px;
        padding-left: 20px;
        position: relative;
    }

        .general-list li:before {
            border: 2px solid #002f53;
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            border-radius: 100%;
            content: "";
            display: block;
            font-size: inherit;
            height: 10px;
            left: 0;
            position: absolute;
            top: 0.5em;
            width: 10px;
        }

        .general-list li li {
            list-style-type: circle;
            margin-left: 17px;
            padding-left: 0;
        }

            .general-list li li:before {
                display: none;
            }

/* Block list - .block-list
   List items are presented has stacked blocks
   colors alternate in even and odd rows.
   Styles only affect the first <li> items. It's
   possible to add default unordered lists.
*/

.block-list {
    list-style-type: none;
    padding-left: 0;
}

    .block-list ul {
        list-style-type: circle;
        padding-left: 1.1em;
    }

    .block-list > li {
        border-top: 1px solid #d9d9d9;
        padding: 15px 5px;
    }

@media screen and (min-width: 768px) {
    .block-list > li {
        background: white;
        border-top: none;
        padding: 25px 15px;
    }
}

.block-list > li:first-child {
    border-top: none;
}

.block-list > li:nth-child(even) {
}

@media screen and (min-width: 768px) {
    .block-list > li:nth-child(even) {
        background: #f7f7f7;
    }
}

.block-list .title,
.block-list h2.title,
.block-list h3.title,
.block-list h4.title,
.block-list h5.title {
    color: #002f53;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 7px;
}


    .block-list .title a,
    .block-list h2.title a,
    .block-list h3.title a,
    .block-list h4.title a,
    .block-list h5.title a {
        color: #002f53;
        text-decoration: none;
    }

        .block-list .title a:hover,
        .block-list .title a:focus,
        .block-list .title a:active,
        .block-list h2.title a:hover,
        .block-list h2.title a:focus,
        .block-list h2.title a:active,
        .block-list h3.title a:hover,
        .block-list h3.title a:focus,
        .block-list h3.title a:active,
        .block-list h4.title a:hover,
        .block-list h4.title a:focus,
        .block-list h4.title a:active,
        .block-list h5.title a:hover
        .block-list h5.title a:focus
        .block-list h5.title a:active {
            color: #00ade4;
            text-decoration: none;
        }

.block-list .content {
    color: #757575;
    font-size: 14px;
}

.block-list strong,
.block-list em {
    color: #686868;
    font-weight: bold;
    font-style: normal;
}

.body-content > .block-list:last-child,
.body-content > .row > div[class^="col-"]:first-child > .block-list:last-child {
}


@media screen and (min-width: 992px) {
    .body-content > .block-list:last-child,
    .body-content > .row > div[class^="col-"]:first-child > .block-list:last-child {
        margin-bottom: 90px;
    }
}

/* If .has-content-bubble */

.block-list.has-content-bubble li {
    min-height: 76px;
    padding-left: 70px;
    position: relative;
}

@media screen and (min-width: 768px) {
    .block-list.has-content-bubble li {
        padding-left: 95px;
    }
}

.block-list.has-content-bubble .bubble {
    background: #00ade4;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    color: white;
    display: block;
    font: 11px 'Lato', sans-serif;
    font-weight: bold;
    height: 56px;
    left: 0;
    line-height: 1.1em;
    overflow: hidden;
    position: absolute;
    text-align: center;
    text-transform: uppercase;
    top: 10px;
    word-wrap: break-word;
    width: 56px;
}

@media screen and (min-width: 768px) {
    .block-list.has-content-bubble .bubble {
        left: 7px;
        top: 20px;
    }
}

.block-list.has-content-bubble .bubble span {
    width: 99%;
}



/* ===============================================
==================== LINKS & BUTTONS =====================
=============================================== */
a {
    color: #000;
    text-decoration: underline;
}

    a:hover {
        color: #00ade4;
    }

/*
  Supports ".text-capitalize", makes first letter uppercase, doesn't change 
  other letters. Example "my teXt" becomes "My TeXt"
  Supports ".text-no-transform", that removes the default uppercase
  transformation of the button.
*/

.btn {
    border: 3px solid transparent;
    border-radius: 0;
    font-weight: 700;
    margin-bottom: 0;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.3s ease 0s;
    white-space: initial;
}

    .btn:active, .btn:focus {
        box-shadow: none !important;
    }

    .btn .fas {
    }

        .btn .fas:first-child {
            margin-right: 10px;
        }

        .btn .fas:last-child {
            margin-left: 10px;
        }

        .btn .fas:only-child {
            margin-left: 0;
        }

#page-content .btn {
    min-width: 173px;
}

p + .btn {
    margin-top: 10px;
}

.btn-default {
    background-color: #ffc72c;
    border-color: #ffc72c;
    color: #333;
}

    .btn-default:hover {
        background-color: #00ade4;
        border-color: #00ade4;
        color: #FFF;
    }

    .btn-default.btn-hollow {
        background-color: transparent;
        color: #ffc72c;
    }

        .btn-default.btn-hollow:hover,
        .btn-default.btn-hollow:focus,
        .btn-default.btn-hollow:active {
            border-color: #263e58;
            color: #263e58;
        }

.btn-white {
    background-color: #FFF;
    border-color: #FFF;
    color: #263e58;
}

    .btn-white:hover {
        background-color: #ffc72c;
        border-color: #ffc72c;
    }

    .btn-white.btn-hollow {
        background-color: transparent;
        color: #FFF;
    }

        .btn-white.btn-hollow:hover {
            border-color: #ffc72c;
            color: #ffc72c;
        }

.btn-primary, .btn-primary:not([disabled]):not(.disabled):active {
    background-color: #263e58;
    border-color: #263e58;
    color: #FFF;
}

    .btn-primary:hover {
        background-color: #ffc72c;
        border-color: #ffc72c;
        color: #263e58;
    }

    .btn-primary.btn-hollow {
        background-color: transparent;
        color: #263e58;
    }

        .btn-primary.btn-hollow:hover {
            border-color: #263e58;
            color: #263e58;
        }

.btn-secondary {
    background-color: #00ade4;
    border-color: #00ade4;
    color: #FFF;
}

    .btn-secondary:hover {
        background-color: #ffc72c;
        border-color: #ffc72c;
        color: #263e58;
    }

    .btn-secondary.btn-hollow {
        background-color: transparent;
        color: #00ade4;
    }

        .btn-secondary.btn-hollow:hover {
            border-color: #00ade4;
            color: #263e58;
        }

.btn.expanded {
    width: 100%;
}

.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle {
    background-color: #ffc72c;
    border-color: #ffc72c;
    color: #263e58;
}

/* Button repsoniveness */
@media screen and (max-width: 767px) {
    .btn {
        font-size: 16px;
    }
}

/* ===============================================
===================== IMAGES =====================
=============================================== */
img {
    height: auto;
    max-width: 100%;
}

/* ===============================================
============ HEADER BAR & MAIN MENU ==============
=============================================== */
/* Main menu */

/* Main language dropdown 
/* Was #dropdownMenuButton */


/* Main language dropdown  - #mainLanguageDropdown
   Shows the current language from the website. This
   style assumes that there's a script that:
    • Has a list of languages an acronyms
    • Detects the language the user is using
    • Updates the language of the website when the dropdown changes (reloads current page in selected language)
    • Populates the language dropdown element (#mainLanguageDropdown) with the current language values (full language and acronym that is 3 characters wide)

   Default styling assumes there's always an acronym available,
   but also supports an exception, like in the case of arabic language.
   This exception shows the full language in mobile, but crops the overflow.
   To trigger this exception add ".has-full-name-only" to #mainLanguageDropdown
*/

#mainLanguageDropdown {
    background: white;
    border: 1px solid #b5b5b5;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    color: rgb(38, 62, 88);
    font-size: 12px !important;
    height: auto !important;
    line-height: 1em;
    margin-left: 0 !important;
    padding: 5px 5px !important;
}

@media screen and (min-width: 365px) {
    #mainLanguageDropdown {
        padding: 5px 9px !important;
    }
}

@media screen and (min-width: 768px) {
    #mainLanguageDropdown {
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        margin-left: 8px !important;
        min-height: 36px !important;
    }
}

#mainLanguageDropdown:after {
    margin-left: 0;
}

@media screen and (min-width: 333px) {
    #mainLanguageDropdown:after {
        margin-left: .255em;
    }
}

#mainLanguageDropdown:hover,
#mainLanguageDropdown:focus,
#mainLanguageDropdown:active {
    background-color: #ffc72c;
    border-color: #ffc72c;
    color: #263e58;
}

#mainLanguageDropdown span {
    display: inline-block;
    vertical-align: top;
    white-space: nowrap;
}

#mainLanguageDropdown .language {
    line-height: 0.9em;
    overflow: hidden;
    max-width: 29px;
}

@media screen and (min-width: 350px) {
    #mainLanguageDropdown .language {
        max-width: 42px;
    }
}

@media screen and (min-width: 400px) {
    #mainLanguageDropdown .language {
        max-width: 46px;
    }
}

@media screen and (min-width: 500px) {
    #mainLanguageDropdown .language {
        max-width: 58px;
    }
}

@media screen and (min-width: 768px) {
    #mainLanguageDropdown .language {
        line-height: 1em;
        max-width: 100px;
    }
}

@media screen and (min-width: 1200px) {
    #mainLanguageDropdown .language {
        max-width: 160px;
    }
}

#mainLanguageDropdown .full-name {
    display: none;
}

@media screen and (min-width: 768px) {
    #mainLanguageDropdown .full-name {
        display: block;
    }
}

#mainLanguageDropdown .acronym,
#mainLanguageDropdown .language span[aria-hidden="true"] {
    display: block;
    max-width: 50px;
}

@media screen and (min-width: 768px) {
    #mainLanguageDropdown .acronym,
    #mainLanguageDropdown .language span[aria-hidden="true"] {
        display: none;
    }
}

/* No acronym is available */
#mainLanguageDropdown.has-full-name-only {
}

    #mainLanguageDropdown.has-full-name-only .full-name,
    #mainLanguageDropdown.has-full-name-only .full-name {
        display: block;
    }


    #mainLanguageDropdown.has-full-name-only .acronym,
    #mainLanguageDropdown.has-full-name-only .language span[aria-hidden="true"] {
        display: none;
    }



/* OFF CANVAS SLIDE-IN & MOBILE MENU */

html, body, .scroller {
    height: 100%;
}

body {
}

@media screen and (max-width: 1199px) {
    body {
        height: auto;
    }
}

body.is-small-height-viewport.menu-is-open {
}

@media screen and (min-width: 1200px) {
    body.is-small-height-viewport.menu-is-open {
        height: auto;
    }
}

/* REMOVING DUE TO EXTRA SCROLL BAR IN IE
.scroller { overflow-y: scroll; } */
.scroller {
    z-index: 1;
}

.scroller, .scroller-inner {
    position: relative;
}

.mp-container {
    position: relative;
    overflow: initial;
    background: #273e59;
}

.menu-trigger {
    position: relative;
    padding-left: 60px;
    font-size: 0.9em;
}

    .menu-trigger:before {
        position: absolute;
        top: 2px;
        left: 0;
        width: 40px;
        height: 6px;
        background: #fff;
        box-shadow: 0 6px #34495e, 0 12px #fff, 0 18px #34495e, 0 24px #fff;
        content: '';
    }

.mp-pusher {
    position: relative;
    left: 0;
    height: 100%;
}

.mp-menu {
    height: 100%;
    left: 0;
    position: absolute; /* we can't use fixed here :( */
    top: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    -moz-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    width: 200px;
    z-index: 3;
}

    .mp-menu #menu-mobile {
        z-index: 5;
    }

    .mp-menu a:not(.btn) {
        color: #FFF;
        text-transform: uppercase;
        text-decoration: none;
    }

    .mp-menu a:hover {
        text-decoration: none;
    }

    .mp-menu p {
        color: #FFF;
        font-size: 13px;
    }

.mp-level {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #273e59;
    -webkit-transform: translate3d(-100%, 0, 0);
    -moz-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
}

    /* overlays for pusher and for level that gets covered */
    .mp-pusher::after,
    .mp-level::after,
    .mp-level::before {
        position: absolute;
        top: 0;
        right: 0;
        width: 0;
        height: 0;
        content: '';
        opacity: 0;
    }

    .mp-pusher::after,
    .mp-level::after {
        background: rgba(0,0,0,0.3);
        -webkit-transition: opacity 0.3s, width 0.1s 0.3s, height 0.1s 0.3s;
        -moz-transition: opacity 0.3s, width 0.1s 0.3s, height 0.1s 0.3s;
        transition: opacity 0.3s, width 0.1s 0.3s, height 0.1s 0.3s;
    }

    .mp-level::after {
        z-index: -1;
    }

    .mp-pusher.mp-pushed::after,
    .mp-level.mp-level-overlay::after {
        width: 100%;
        height: 100%;
        left: 0;
        opacity: 1;
        position: absolute;
        top: 0;
        -webkit-transition: opacity 0.3s;
        -moz-transition: opacity 0.3s;
        transition: opacity 0.3s;
        z-index: 1;
    }

    .mp-level.mp-level-overlay {
        cursor: pointer;
    }

        .mp-level.mp-level-overlay.mp-level::before {
            width: 100%;
            height: 100%;
            background: transparent;
            opacity: 1;
        }

.mp-pusher,
.mp-level {
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}

/* overlap */
.mp-overlap .mp-level.mp-level-open {
    box-shadow: 1px 0 2px rgba(0,0,0,0.2);
    -webkit-transform: translate3d(-40px, 0, 0);
    -moz-transform: translate3d(-40px, 0, 0);
    transform: translate3d(-40px, 0, 0);
    z-index: 1;
}

/* First level */
.mp-menu > .mp-level,
.mp-menu > .mp-level.mp-level-open,
.mp-menu.mp-overlap > .mp-level,
.mp-menu.mp-overlap > .mp-level.mp-level-open {
    box-shadow: none;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    z-index: 5;
}

/* cover */
.mp-cover .mp-level.mp-level-open {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    z-index: 5;
}

    .mp-cover .mp-level.mp-level-open > ul > li > .mp-level:not(.mp-level-open) {
        -webkit-transform: translate3d(-100%, 0, 0);
        -moz-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }

/* content style */
.mp-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mp-menu h2 {
    margin: 0;
    padding: 1em;
    color: rgba(255,255,255,0.4);
    text-shadow: 0 0 1px rgba(0,0,0,0.1);
    font-weight: 300;
    font-size: 2em;
}

.mp-menu.mp-overlap h2::before {
    position: absolute;
    top: 0;
    right: 0;
    margin-right: 8px;
    font-size: 75%;
    line-height: 1.8;
    opacity: 0;
    -webkit-transition: opacity 0.3s, -webkit-transform 0.1s 0.3s;
    -moz-transition: opacity 0.3s, -moz-transform 0.1s 0.3s;
    transition: opacity 0.3s, transform 0.1s 0.3s;
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    transform: translateX(-100%);
}

.mp-menu.mp-cover h2 {
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 1em;
}

.mp-overlap .mp-level.mp-level-overlay > h2::before {
    opacity: 1;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    -moz-transition: -moz-transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    transform: translateX(0);
}

.mp-menu ul li > a {
    display: block;
    padding: 12px 30px 12px 12px;
    outline: none;
    /*box-shadow: inset 0 -1px rgba(0,0,0,0.2);*/
    text-shadow: 0 0 1px rgba(255,255,255,0.1);
    font-size: 12px;
    -webkit-transition: background 0.3s, box-shadow 0.3s;
    -moz-transition: background 0.3s, box-shadow 0.3s;
    transition: background 0.3s, box-shadow 0.3s;
}

.mp-menu ul li::before {
    position: absolute;
    right: 10px;
    z-index: -1;
    color: rgba(255,255,255,0.2);
    line-height: 42px;
}

.mp-menu ul li a:hover,
.mp-level > ul > li:first-child > a:hover {
    background: rgba(0,0,0,0.2);
    box-shadow: inset 0 -1px rgba(0,0,0,0);
}

.mp-menu .mp-level.mp-level-overlay > ul > li > a,
.mp-level.mp-level-overlay > ul > li:first-child > a {
    box-shadow: inset 0 -1px rgba(0,0,0,0);
}

.mp-level > ul > li:first-child > a:hover,
.mp-level.mp-level-overlay > ul > li:first-child > a {
    box-shadow: inset 0 -1px rgba(0,0,0,0), inset 0 1px rgba(0,0,0,0);
}
/* seems like Chrome 34.0.1847.131 needs the second shadow otherwise the transition breaks */

.mp-sub:before {
    content: "\f054";
    font-family: "Font Awesome 5 Free";
    font-style: normal;
    font-weight: 900;
    font-variant: normal;
    speak: none;
    text-transform: none;
    line-height: 1;
    display: inline-block;
    margin-left: 0.6em;
    -webkit-font-smoothing: antialiased;
}

.mp-back {
    background: rgba(0,0,0,0.1);
    border: 1px solid rgba(0,0,0,0.2);
    border-width: 1px 0;
    outline: none;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    display: block;
    font-size: 0.8em;
    padding: 1em 1em 1em 2em;
    position: relative;
    -webkit-transition: background 0.3s;
    -moz-transition: background 0.3s;
    transition: background 0.3s;
}

    .mp-back::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        position: absolute;
        content: "\f053";
        left: 10px;
        color: rgba(255,255,255,0.3);
    }

.mp-menu .mp-level.mp-level-overlay > .mp-back,
.mp-menu .mp-level.mp-level-overlay > .mp-back::after {
    background: transparent;
    box-shadow: none;
    color: transparent;
}

/* Fallback example for browsers that don't support 3D transforms (and no JS fallback) */
/* We'll show the first level only */
.no-csstransforms3d .mp-pusher,
.no-js .mp-pusher {
    padding-left: 200px;
}

.no-csstransforms3d .mp-menu .mp-level,
.no-js .mp-menu .mp-level {
    display: none;
}

.no-csstransforms3d .mp-menu > .mp-level,
.no-js .mp-menu > .mp-level {
    display: block;
}

#menu-mobile a {
    text-transform: uppercase;
}

.mp-sub a {
    text-transform: none;
}

#menu-search {
    padding: 9px 12px;
}

    #menu-search .form-group {
        margin: 0;
    }

    #menu-search .form-control {
        background: #121f2c;
        border-radius: 0;
        border: none;
        box-shadow: none;
        color: #FFF;
        font-size: 12px;
        height: 30px;
        position: relative;
    }

    #menu-search .menu-search-submit {
        background: #121f2c !important;
        color: #FFF;
        height: 30px;
        line-height: 29px;
        position: absolute;
        right: 12px;
        text-align: center;
        top: 9px;
        vertical-align: middle;
        -webkit-appearance: initial;
        width: 30px;
    }

/* DESKTOP MENU STYLING */

/* Is desktop but window height is too small
forces mobile menu to show up  */


#mp-menu.is-small-height-viewport {
}

@media screen and (min-width: 1200px) {
    #mp-menu.is-small-height-viewport {
        overflow-y: auto;
    }
}

#mp-menu.is-small-height-viewport #menu-desktop {
}

@media screen and (min-width: 1200px) {
    #mp-menu.is-small-height-viewport #menu-desktop {
        display: none !important;
    }
}

#mp-menu.is-small-height-viewport #menu-mobile {
}

@media screen and (min-width: 1200px) {
    #mp-menu.is-small-height-viewport #menu-mobile {
        display: block !important;
    }
}

#mp-menu.is-small-height-viewport .menu-callout {
}

@media screen and (min-width: 1200px) {
    #mp-menu.is-small-height-viewport .menu-callout {
        position: auto;
    }
}

#mp-menu.is-small-height-viewport #menu-social {
}

@media screen and (min-width: 1200px) {
    #mp-menu.is-small-height-viewport #menu-social {
        padding-bottom: 17px;
        position: static;
    }
}

/* Desktop menu */

#mp-menu {
    overflow-y: auto;
}

@media screen and (min-width: 1200px) {
    #mp-menu {
        overflow-y: visible;
    }
}

#menu-desktop {
    position: relative;
    z-index: 1;
}

    #menu-desktop ul {
        list-style: none;
        margin: 0;
        padding: 0;
        z-index: 2;
    }

    #menu-desktop > li {
        background: #273e59;
        height: 38px;
        margin: 0;
        padding: 0;
        position: relative;
        z-index: 5;
    }

        #menu-desktop > li > a {
            border: none;
            border-bottom: 1px solid #4b5f75;
            height: 100%;
            position: relative;
            z-index: 5;
        }

            #menu-desktop > li > a:hover {
                border-bottom: 1px solid #4b5f75;
            }

        #menu-desktop > li:last-child > a {
            border-bottom: none;
        }

    #menu-desktop a {
        font-family: 'Lato', sans-serif;
        display: block;
        line-height: 1.2;
        padding: 12px;
        position: relative;
        text-transform: uppercase;
        z-index: 3;
    }

        #menu-desktop a:hover {
            text-decoration: none;
        }

    #menu-desktop li.active a {
        color: #ffc72c;
        font-style: italic;
    }

    #menu-desktop .submenu-parent > a:after {
        content: '\f105';
        font-family: "Font Awesome 5 Free";
        float: right;
        font-weight: 900;
    }

    #menu-desktop .submenu {
        font-size: 12px;
        height: 0;
        left: 0px;
        opacity: 0;
        overflow: hidden;
        position: absolute;
        top: 0px;
        transition: opacity .3s, left 0.4s ease-in-out;
        -webkit-transition: opacity .3s, left 0.4s ease-in-out; /* Safari */
        width: 200px;
        z-index: 1;
    }

        #menu-desktop .submenu li {
            background: #121f2c;
            position: relative;
            z-index: 3;
        }

        #menu-desktop .submenu a {
            text-transform: none;
        }

        #menu-desktop .submenu .submenu {
            z-index: 1;
        }

            #menu-desktop .submenu .submenu li {
                background: #0c151e;
            }

    #menu-desktop li:hover > .submenu,
    #menu-desktop li:hover > .wrapper > .submenu {
        height: auto;
        left: 200px;
        opacity: 1;
        overflow: visible;
        visibility: visible;
    }

    #menu-desktop li:hover > a {
        background: linear-gradient(to right, #273e59, #121f2c);
    }

    #menu-desktop .submenu li:hover > a {
        background: linear-gradient(to right, #121f2c, #0c151e);
    }

    #menu-desktop .submenu .submenu li:hover > a {
        background: rgba(0,0,0,0.4);
    }

/* MENU CALLOUT BOX */
.menu-callout {
    background: #121f2c;
    padding: 14px 12px 17px;
    text-align: center;
    z-index: 3;
}

@media screen and (min-width: 1200px) {
    .menu-callout {
        position: relative;
    }
}

.menu-callout p:last-of-type {
    margin: 0;
}

.menu-callout .btn {
    font-size: 13px;
    font-weight: bold;
    min-width: 140px;
    padding: 5px;
    text-align: center;
    text-transform: uppercase;
}

/* SOCIAL MEDIA LINKS */
#menu-social {
    background-color: #273e59;
    padding: 14px 12px 17px;
    text-align: center;
    z-index: 3;
}

@media screen and (min-width: 1200px) {
    #menu-social {
        padding-bottom: 100%;
        position: relative;
    }
}

#menu-social li, #menu-social li > a {
    display: inline;
}

#menu-social a {
    color: #00ade4;
    font-size: 30px;
    padding: 0px 1px 0px;
}

#menu-social li:hover a {
    background: transparent;
    color: #FFF;
}

/* TOP OF PAGE HEADER/LOGO BAR */
#logo-bar {
    background: #FFF;
    border-bottom: 1px solid #b4b4b4;
    padding: 20px 0 25px;
    margin-top: -2%;
}

    #logo-bar .btn {
        font-size: 14px;
        padding: 5px 15px;
        display: none;
    }

    #logo-bar .dual-btn li {
        margin-bottom: 0;
        margin-top: 0;
    }

#menuTrigger {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

@media screen and (min-width: 768px) {
    #menuTrigger {
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
    }
}

#menuTrigger i {
   
    padding-right: 10px;
}

    #menuTrigger i:first-child {
        margin-right: 0;
    }

#menuTrigger:hover i {
    color: #263e58;
}

/* Special Animate-on-hover Search Box */
.search {
    display: inline-block;
    position: relative;
    height: 28px;
    width: 28px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0px 8px 7px;
    padding: 0px 9px;
    border: 3px solid #263e58;
    border-radius: 25px;
    -webkit-transition: all 200ms ease;
    transition: all 200ms ease;
    cursor: text;
    display: none !important;
}

    .search:after {
        content: "";
        position: absolute;
        width: 3px;
        height: 16px;
        right: -5px;
        top: 17px;
        background: #263e58;
        border-radius: 3px;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        -webkit-transition: all 200ms ease;
        transition: all 200ms ease;
    }

    .search.active,
    .search:hover {
        height: 37px;
        width: 200px;
        margin-right: 0px;
    }

        .search.active:after,
        .search:hover:after {
            height: 0px;
        }

    .search input {
        width: 100%;
        border: none;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        color: inherit;
        background: transparent;
        outline-width: 0px;
        height: 28px;
        line-height: 28px;
    }

        .search input:focus {
            outline: none;
        }

/* Button repsoniveness */
@media screen and (max-width: 767px) {
    #logo-bar .btn {
        padding: 5px 9px;
    }

    #menuTrigger i {
        padding-right: 0;
    }
}

/* ===============================================
=============== GLOBAL PAGE STYLES ===============
=============================================== */
#page-content {
    background-color: #FFF;
    background-repeat: no-repeat;
    background-size: 100%;
    position: relative;
}

.row.margin {
    margin-bottom: 77px;
}

.intro hr {
    border-color: #00ade4;
    border-width: 8px;
}

.intro p {
    color: #5e5e5e;
    font-size: 20px;
    line-height: 29px;
}

.dual-btn {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .dual-btn li {
        display: inline-block;
        margin: 10px 20px 10px 0;
    }

        .dual-btn li:last-child {
            margin-right: 0;
        }

/* page styles responsive */
@media screen and (max-width: 767px) {
    .home-page .container > .row {
        text-align: center;
    }

    .row.margin {
        margin-bottom: 40px;
    }
}

@media screen and (max-width: 420px) {
    .dual-btn li {
        display: block;
        margin-right: 0;
    }

        .dual-btn li .btn {
            width: 100%;
        }
}

/* ===============================================
================= UTILITY STYLES =================
=============================================== */

.text-no-transform {
    text-transform: none !important;
}

.mb-40 {
    margin-bottom: 40px !important;
}

.mb-70 {
    margin-bottom: 70px !important;
}

.mt-40 {
    margin-top: 40px !important;
}

.mt-70 {
    margin-top: 70px !important;
}

.center-md {
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .center-md {
        text-align: center !important;
    }
}

.center-lg {
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
    .center-lg {
        text-align: center !important;
    }
}

/* Standard-dropdown -  Looks close to a standard select */
.standard-dropdown {
    background: transparent;
    border: none;
}

    .standard-dropdown .btn {
        background: white;
        border: 1px solid #b4b4b4;
        color: #263e58;
        display: block;
        padding-right: 30px;
        position: relative;
        text-align: left;
        text-transform: none;
        width: 100%;
    }

        .standard-block.dropdown .btn.active,
        .standard-block.dropdown .btn:active,
        .standard-dropdown .btn:focus {
            background: white !important;
            color: #263e58 !important;
        }

        .standard-dropdown .btn.active,
        .standard-dropdown .btn:active,
        .standard-dropdown .btn:hover,
        .standard-dropdown.show > .btn.dropdown-toggle {
            background: white !important;
            border-color: #b4b4b4 !important;
            color: #263e58 !important;
        }

        .standard-dropdown .btn:after {
            color: #ffc72c;
            position: absolute;
            right: 10px;
            top: 15px;
        }


    .standard-dropdown .dropdown-menu {
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        margin-top: -1px;
        width: 100%;
    }
/* Dropdown-menu */

.dropdown-menu a {
    text-decoration: none;
}

/* Background image zoom block */
.zoom {
    background-attachment: fixed !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: auto 100%;
    overflow: hidden !important;
}

.zoom-block {
    margin-top: 4.2839657%;
    padding-bottom: 9.7919217%;
    padding-top: 9.7919217%;
}

.zoom-block-body {
    /*background: rgba(255,255,255,.84);
  color: #121f2c;*/
    background: rgba(34,38,50,.84);
    color: #FFF;
    padding: 15px;
}

    .zoom-block-body a {
        color: #00ade4;
    }

.image-window,
.zoom-block {
    box-shadow: inset 0 0 15px 0 rgba(0,0,0,0.5);
    -webkit-box-shadow: inset 0 0 15px 0 rgba(0,0,0,0.5);
    -moz-box-shadow: inset 0 0 15px 0 rgba(0,0,0,0.5);
}

.image-window {
    background-attachment: fixed;
    background-position: center center;
    background-size: cover;
    margin-top: 4.2839657%;
    padding-top: 56.25%;
}

/* Blockquote */
blockquote {
    color: #616161;
    font-size: 18px;
    font-size: 1.375rem;
    font-style: italic;
    font-weight: normal;
    padding-left: 1.5rem;
    position: relative;
    text-align: justify;
    z-index: 1;
}

@media screen and (min-width: 768px) {
    blockquote {
        font-size: 27px;
        font-size: 1.688rem;
        padding-left: 2.5rem;
    }
}

blockquote > div:first-child:before {
    color: #243e57;
    content: "“";
}

blockquote > div:first-child:after {
    color: #243e57;
    content: "”";
}

blockquote .attribution {
    color: #243e57;
    display: block;
    font-size: 18px;
    font-size: 1.125rem;
    text-align: right;
}

@media screen and (min-width: 768px) {
    blockquote .attribution {
        font-size: 22px;
        font-size: 1.375rem;
    }
}

blockquote .attribution em {
    font-style: normal;
    font-weight: bold;
}

/* Video thumbnail swap */
.youtube-player,
#videoModal .video-container {
    position: relative;
    padding-bottom: 56.23%;
    /* Use 75% for 4:3 videos */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
    margin: 5px;
}

    .youtube-player iframe,
    #videoModal .video-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 100;
        background: transparent;
    }

    .youtube-player img {
        bottom: 0;
        display: block;
        left: 0;
        margin: auto;
        max-width: 100%;
        width: 100%;
        position: absolute;
        right: 0;
        top: 0;
        border: none;
        height: auto;
        cursor: pointer;
        -webkit-transition: .4s all;
        -moz-transition: .4s all;
        transition: .4s all;
    }

        .youtube-player img:hover {
            -webkit-filter: brightness(75%);
        }

    .youtube-player .play {
        height: 72px;
        width: 72px;
        left: 50%;
        top: 50%;
        margin-left: -36px;
        margin-top: -36px;
        position: absolute;
        background: url("//i.imgur.com/TxzC70f.png") no-repeat;
        cursor: pointer;
    }

.photo-with-caption p {
    font-size: 14px;
    line-height: 1.2;
    padding: 10px 0 0;
    text-align: left !important;
}

/* Callout Ribbon */
.callout-ribbon {
    background: #263e58;
    color: #FFF;
    margin-top: 4.2839657%;
    padding: 4.8959608% 0;
}

/* Styled List
   List that links to other sections
   Example: "More information" section in two-column.php
*/
.styled-list a {
    border-bottom: 1px solid #e2e2e2;
    color: #263e58;
    display: block;
    line-height: 1.2;
    padding: 15px 15px 15px 0;
    position: relative;
    text-decoration: none;
}

.styled-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .styled-list a:hover {
        text-decoration: underline;
    }

    .styled-list a:after {
        color: #666e79;
        content: "\f054";
        display: inline-block;
        font-family: "Font Awesome 5 Free";
        font-style: normal;
        font-weight: 900;
        font-variant: normal;
        line-height: 1.2;
        margin-left: 0.6em;
        position: absolute;
        right: 0;
        speak: none;
        top: 33.3333%;
        text-decoration: none !important;
        text-transform: none;
        -webkit-font-smoothing: antialiased;
    }

    .styled-list a:hover:after {
        /* this is needed for an IE workaround */
        text-decoration: underline;
    }

    .styled-list a:hover:after {
        text-decoration: none !important;
    }

    .styled-list.is-unstyled-small {
    }

@media screen and (max-width: 991px) {
    .styled-list.is-unstyled-small {
        font-size: 15px;
        font-weight: bold;
        padding-top: 17px;
    }
}

.styled-list.is-unstyled-small li {
}

@media screen and (max-width: 991px) {
    .styled-list.is-unstyled-small li {
        margin-bottom: 20px;
    }
}

.styled-list.is-unstyled-small a {
}

@media screen and (max-width: 991px) {
    .styled-list.is-unstyled-small a {
        color: #2f2f2f;
        border-bottom: none;
        padding: 0;
    }
}

.styled-list.is-unstyled-small a:hover,
.styled-list.is-unstyled-small a:focus,
.styled-list.is-unstyled-small a:active {
}

@media screen and (max-width: 991px) {
    .styled-list.is-unstyled-small a:hover,
    .styled-list.is-unstyled-small a:focus,
    .styled-list.is-unstyled-small a:active {
        color: #263e58;
    }
}

.styled-list.is-unstyled-small a:after {
}

@media screen and (max-width: 991px) {
    .styled-list.is-unstyled-small a:after {
        content: "";
        display: none;
    }
}

/* Two Column Link List */
.two-column-link-list {
    margin: 30px 0;
}

    .two-column-link-list:last-child {
        margin-bottom: 0;
    }


/* Is separator / Has separator
   .is-separator  - In HR it adds a thick blue line for separation with a little margin
   .has-separator - Adds a top border to a block element to  resemble a separator 
*/

.is-separator,
hr.is-separator {
    background: #002f53;
    border: none;
    display: block;
    height: 4px;
    margin: 40px 0 30px;
}

.has-separator {
    border-top: 4px solid #002f53;
    margin: 40px 0 0;
    padding: 30px 0 0;
}

/* Hightlight text - .hightlight-text
   Increases the size of text in paragraphs and assigns the default color of text
   Overwrites defaults of h2 to h5, decreasing it's size and changing its colors
*/

.hightlight-text,
h2.hightlight-text,
h3.hightlight-text,
h4.hightlight-text,
h5.hightlight-text {
    color: #2f2f2f;
    font-size: 19px;
    font-weight: bold;
    line-height: 1.25em;
    margin-bottom: 25px;
    margin-top: 15px;
}

    .hightlight-text:first-child,
    h2.hightlight-text:first-child,
    h3.hightlight-text:first-child,
    h4.hightlight-text:first-child,
    h5.hightlight-text:first-child {
        margin-top: 0;
    }

h2.hightlight-text {
    text-transform: none;
}

/* Has dark text - .has-dark-text
   Adds black text as the default color of the text
*/

.has-dark-text {
    color: #2f2f2f;
}

/* UTILITY RESPONSIVE */
@media screen and (min-width: 576px) {
    /* Small Breakpoint and Up */
    .styled-list li:last-child a {
        border-bottom: none;
    }
}

@media screen and (min-width: 768px) {
    /* Tablet and Up */

    .callout-ribbon {
        font-size: 23px;
    }
}

@media screen and (min-width: 1025px) {
    /* Destop */


}

@media (max-width: 1024px) {

    .zoom {
        overflow: hidden;
    }
}


/* Vertical align
   Takes 100% height of the container and aligns
   the next item (div, span) vertically in the parent container.
   The html needs to have no space between the tags to prevent
   bug that adds about 2px in space.
   Example: Dates in press-collection.php
*/

.v-align {
    display: inline-block !important;
    height: 100%;
    margin-right: -1px;
    vertical-align: middle;
    width: 1px !important;
}

    .v-align + div,
    .v-align + span {
        display: inline-block !important;
        max-width: 98%;
        vertical-align: middle;
    }

@media screen and (min-width:0\0) {
    /* IE9 and IE10 rule sets go here */

    .v-align + div,
    .v-align + span {
        width: 98%;
    }
}




/* ===============================================
================ HOME PAGE STYLES ================
=============================================== */

/* HERO AREA */
.hero {
    color: #FFF;
    margin-bottom: 77px;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.hero-image-wrapper {
    position: relative;
}

.cm-logo {
    bottom: 0;
    position: absolute;
    right: 3%;
    width: 30%;
}

.hero-image {
    width: 100%;
}

.hero .caption {
    background: #263e58;
    padding: 25px 0;
    text-align: center;
}

    .hero .caption .row {
        margin-bottom: 0 !important;
    }

    .hero .caption h1, .hero .caption .h1 {
        font-size: 19px;
        line-height: 24px;
        margin-bottom: 0;
        margin-top: 0;
        text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.25);
    }

    .hero .caption p {
        font-weight: normal;
        font-size: 26px;
        font-style: italic;
        line-height: 30px;
        text-transform: initial;
        text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.25);
    }

/* HERO AREA RESPONSIVE */
@media screen and (min-width: 768px) {
    /* Tablet and Up */


    .hero .caption {
        background: transparent;
        left: 0;
        margin-top: 6%;
        padding: 0 15px;
        position: absolute;
        text-align: center;
        top: 0;
    }

    .cm-logo {
        width: 20%;
    }

    .hero .caption h1, .hero .caption .h1 {
        font-size: 40px;
        font-weight: 700;
        line-height: 48px;
    }
}

@media screen and (min-width: 1025px) {
    /* Destop */

    .cm-logo {
        bottom: -3%;
    }

    .hero .caption {
        text-align: left;
        width: 100%;
    }
}

/* NEW ARTICLE FEATURE */

.top-feature {
    border-top: 10px solid #c9c9c9;
    font-size: 15px;
    margin: 0 -15px 40px;
    position: relative;
}

@media screen and (min-width: 576px) {
    .top-feature {
        margin-left: 0;
        margin-right: 0;
    }
}

@media screen and (min-width: 768px) {
    .top-feature {
        border-top: none;
        margin-bottom: 60px;
        padding-left: 250px;
        padding-top: 0;
    }
}

.hero-banner + .top-feature,
.hero-banner + .container > .row > div[class*="col-"] > .top-feature {
    margin-top: -40px;
}

@media screen and (min-width: 576px) {
    .hero-banner + .top-feature,
    .hero-banner + .container > .row > div[class*="col-"] > .top-feature {
        margin-top: -5px;
    }
}

@media screen and (min-width: 768px) {
    .hero-banner + .top-feature,
    .hero-banner + .container > .row > div[class*="col-"] > .top-feature {
        margin-top: -15px;
    }
}

.top-feature h2,
.top-feature .h2,
.top-feature .title {
    font-size: 18px;
    line-height: 1.2;
    margin-top: 0;
    text-transform: none;
}

@media screen and (min-width: 768px) {
    .top-feature h2,
    .top-feature .h2,
    .top-feature .title {
        font-size: 30px;
    }
}

.top-feature .cta {
    padding-top: 10px;
    text-align: center;
}

@media screen and (min-width: 768px) {
    .top-feature .cta {
        text-align: left;
    }
}

@media screen and (min-width: 992px) {
    .top-feature .cta {
        padding-top: 30px;
        text-align: right;
    }
}

.top-feature .cta .btn {
    text-align: center;
}

.top-feature .img {
    background: #263e58;
    display: none;
    height: 130px;
    left: 0;
    overflow: hidden;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
}

@media screen and (min-width: 768px) {
    .top-feature .img {
        background: transparent;
        display: inline-block;
        height: 150px;
        text-align: left;
        width: 250px;
    }
}

.top-feature .img span {
    display: inline-block;
    height: 130px;
    overflow: hidden;
    position: relative;
    width: 100%;
    z-index: 5;
}

.top-feature .img img {
    display: inline-block;
    width: auto;
}

@media screen and (min-width: 768px) {

    .top-feature .img img {
        display: block;
        width: 100%;
    }
}

.top-feature .img:before {
    background: #ffc72c;
    bottom: 19px;
    content: "";
    display: none;
    height: 138px;
    left: 15px;
    position: absolute;
    transform: skewY(-4.2deg);
    transform-origin: 100%;
    width: 235px;
    z-index: 1;
}

@media screen and (min-width: 768px) {
    .top-feature .img:before {
        display: block;
    }
}

.top-feature .wrapper {
    background: #f1f2f2;
    color: #5e5e5e;
    min-height: 130px;
    padding: 15px;
    margin: 0;
}

@media screen and (min-width: 768px) {
    .top-feature .wrapper {
        padding: 15px 15px 11px;
    }
}

/* WORK WITH US SECTION */
ul.btn-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

    ul.btn-list li {
        margin-top: 28px;
    }

    ul.btn-list:last-child {
        margin-top: 0;
    }

    ul.btn-list a {
        background: #263e58;
        color: #FFF;
        display: block;
        font-size: 24px;
        font-weight: 700;
        line-height: 1;
        padding: 25px;
        text-decoration: none;
        transition: all 0.3s ease 0s;
        width: 100%;
    }

        ul.btn-list a:after {
            content: '\232A';
            color: #ffc72c;
            float: right;
            transition: all 0.3s ease 0s;
        }

        ul.btn-list a:hover {
            background: #ffc72c;
            color: #263e58;
        }

            ul.btn-list a:hover:after {
                color: #263e58;
            }

/* List-box */
.list-box-background {
    margin: 20px auto 0;
    max-width: 560px;
    padding: 0 22px 26px 0;
    position: relative;
}

    .list-box-background:before {
        background: url(../images/geo-background.png);
        background-position: bottom right;
        background-repeat: no-repeat;
        content: "";
        display: block;
        height: 100%;
        left: 0;
        position: absolute;
        ;
        top: 0;
        width: 100%;
        z-index: 1;
    }

.list-box {
    background: #263e58;
    color: #FFF;
    padding: 30px 32px 15px;
    position: relative;
    z-index: 5;
}

    .list-box ul {
        list-style: none;
        margin: 0 0 20px;
        padding: 0;
    }

    .list-box li {
        margin-bottom: 20px;
    }

        .list-box li:last-child {
            margin-bottom: 0;
        }

    .list-box li, .list-box a {
        color: #FFF;
        font-size: 17px;
        line-height: 1;
        text-decoration: none;
    }

        .list-box li a {
            transition: all 0.2s ease 0s;
        }

            .list-box li a:hover {
                color: #ffc72c;
            }

/* Where we work */
.where-we-work {
}

@media screen and (max-width: 1024px) {
    .where-we-work {
        padding-bottom: 15px;
    }
}

.where-we-work h2 {
    color: #00ade4;
    font-size: 30px;
    margin-bottom: 20px;
    margin-top: 0;
}

/* link-table */
/* Table of images with a short word or phrase.
   See index.php "where we work"
*/
.link-table {
    background: white;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    margin-bottom: -15px;
    position: relative;
    width: 100%;
}

@media screen and (min-width: 1025px) {
    .link-table {
        margin-bottom: 0;
    }
}

.link-table ul {
    display: inline-block;
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: left;
    vertical-align: top;
    width: 100%
}

.link-table li {
    display: inline-block;
    height: 130px;
    overflow: hidden;
    text-align: center;
    vertical-align: top;
    width: 13.7%
}

.link-table a {
    color: #fff;
    display: block;
    height: 100%;
    padding: 10px 15px;
    position: relative;
    text-decoration: none;
    width: 100%;
}

    .link-table a:hover,
    .link-table a:focus,
    .link-table a:active {
        color: #ffc72c;
        text-decoration: none;
    }

.link-table p {
    height: 100%;
    margin: 0;
    padding: 10px 15px;
    position: relative;
    width: 100%;
}

.link-table span {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    z-index: 5;
}

.link-table .img {
    background-size: cover;
    background-position: top left;
    background-repeat: no-repeat;
    position: relative;
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    -webkit-transition: transform 2s ease-in;
    -moz-transition: transform 2s ease-in;
    -ms-transition: transform 2s ease-in;
    -o-transition: transform 2s ease-in;
    transition: transform 2s ease-in;
    width: 100%;
    z-index: 1
}

.link-table a:hover .img,
.link-table a:focus .img,
.link-table a:active .img {
    -moz-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    -o-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);
}


/* RECENT STORIES ELEMENT */
.recent-stories {
    background: url(../images/blue-slant-background.jpg);
    background-position: top center;
    background-repeat: no-repeat;
    color: #FFF;
    padding: 60px 0;
}

    .recent-stories .intro hr {
        border-color: #ffc72c;
    }

    .recent-stories .intro p {
        color: #FFF;
    }

    .recent-stories h2 {
        color: #FFF;
    }

.story {
    margin: 0 auto;
}

    .story img {
        vertical-align: bottom;
        width: 100%;
    }

    .story .caption {
        font-size: 18px;
        font-style: italic;
        padding: 20px;
        text-align: center;
    }

        /*   different background colors for the caption
    Options: green, orange, red, purple, mid-green and gold
    apply the class to the .caption element
*/
        .story .caption.green {
            background-color: #006446;
        }

        .story .caption.orange {
            background-color: #e87722;
        }

        .story .caption.red {
            background-color: #9a3324;
        }

        .story .caption.purple {
            background-color: #440099;
        }

        .story .caption.mid-green {
            background-color: #006C5B;
        }

        .story .caption.gold {
            background-color: #C69214;
        }

        .story .caption .btn {
            color: #FFF;
            background-color: rgba(0,0,0,.5);
        }

            .story .caption .btn:hover {
                background-color: rgba(0,0,0,.75);
            }

.recent-stories hr {
    border-color: #e9e9e9;
    border-width: 5px;
}

/* RECENT STORIES RESPONSIVE */
@media screen and (max-width: 767px) {
    .recent-stories {
        background: #263e58;
    }

    .story {
        max-width: 310px;
    }
}

/* TABBED ELEMENT */

/* tab styles */
#postcard-tabs {
    border-top: 8px solid #dfdfdf;
    margin-bottom: 30px
}

    #postcard-tabs > li + li {
        margin-top: 0;
    }

    #postcard-tabs > li > a {
        border-bottom: 1px solid #e0e0e0;
        border-radius: 0;
        display: block;
        line-height: 1.42857143;
        margin: 0;
        padding: 20px 20px 23px 25px !important;
        position: relative;
        text-decoration: none;
        transition: all 0.3s ease 0s;
    }

        #postcard-tabs > li > a span {
            display: block;
        }

    #postcard-tabs .flag {
        border: 1px solid #bdbdbd;
    }

    #postcard-tabs .tab-head {
        color: #263e58;
        font-size: 18px;
        font-weight: 700;
    }

    #postcard-tabs .tab-subhead {
        color: #263e58;
        font-size: 15px;
        font-style: italic;
        line-height: 1.2;
        margin-bottom: 0;
    }

    #postcard-tabs > li > a.active, #postcard-tabs > li > a.active:hover {
        background: #263e58;
        border-color: transparent;
    }

        #postcard-tabs > li > a.active .tab-head,
        #postcard-tabs > li > a.active:hover .tab-head {
            color: #FFF;
        }

        #postcard-tabs > li > a.active .tab-subhead {
            color: #ffc72c;
        }

    #postcard-tabs > li > a:after {
        content: '\232A';
        color: #263e58;
        font-size: 30px;
        position: absolute;
        right: 5px;
        top: 23%;
        transition: all 0.3s ease 0s;
        width: 10px;
    }

    #postcard-tabs .nav-link:hover {
        background-color: #eee;
    }

    #postcard-tabs > li > a.active:after {
        color: #ffc72c;
    }

/* tab body styles */
#postcard-bodies .postcard-caption {
    background: #263e58;
    color: #FFF;
    font-size: 18px;
    line-height: 26px;
    padding: 30px;
}

    #postcard-bodies .postcard-caption a.btn {
        margin-top: 20px;
    }

/* TABBED ELEMENT RESPONSIVE */
@media screen and (max-width: 767px) {
    .creating-markets {
        padding-top: 60px;
    }

    #postcard-tabs {
        margin-bottom: 0;
    }

        #postcard-tabs > li > a {
            padding-right: 35px !important;
        }

            #postcard-tabs > li > a:after {
                right: 5px;
                top: 38%;
                -ms-transform: rotate(90deg); /* IE 9 */
                -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
                transform: rotate(90deg);
                width: auto;
            }

    #postcard-bodies {
        /*border-top: 8px solid #e0e0e0; DELETE-Phase 2 */
        margin-bottom: 30px;
    }
}

/* ABOUT IFC / STATS SECTION */
.rep-building {
    background: #263e58;
    color: #FFF;
    font-size: 25px;
    font-weight: 300;
    line-height: 30px;
    margin-top: 40px;
}

    .rep-building .container {
        padding-top: 0;
    }

        .rep-building .container .row {
            margin-bottom: 0 !important;
        }

.about-ifc {
    padding-bottom: 50px;
}

    .about-ifc h2, .about-ifc .h2 {
        color: #FFF;
        margin-top: 60px;
    }

    .about-ifc p {
        margin-bottom: 40px;
    }

.stats {
    background: #00ade4;
    list-style: none;
    margin: 0;
    padding: 25px 50px 75px;
    position: relative;
    text-transform: uppercase;
    z-index: 1;
}

    .stats:before {
        background: inherit;
        top: -34px;
        content: '';
        display: block;
        height: 50%;
        left: 0;
        position: absolute;
        right: 1px;
        transform: skewY(-4.2deg);
        transform-origin: 100%;
        z-index: -1;
    }

    .stats .large {
        font-size: 47px;
        font-weight: 700;
        line-height: 1;
        margin-bottom: 0;
        margin-top: 75px;
    }

    .stats .small {
        font-size: 20px;
        font-style: italic;
        font-weight: normal;
        line-height: 25px;
    }

    .stats .smallprint {
        font-size: 13px;
        margin: 40px 0 0;
    }

/* ABOUT IFC / STATS SECTION RESPONSIVE */
@media screen and (max-width: 767px) {
    .rep-building {
        font-size: 16px;
        padding-bottom: 40px;
    }

    .about-ifc {
        padding-bottom: 0;
    }

        .about-ifc h2, .about-ifc .h2 {
            font-size: 25px;
            margin-top: 40px;
        }

        .about-ifc h3, .about-ifc .h3 {
            font-size: 17px;
        }

        .about-ifc p {
            line-height: 19px;
            margin-bottom: 20px;
        }

    .stats {
        background: transparent;
        margin: 0 -15px;
        padding: 5px 30px 35px;
        text-align: center;
    }

        .stats:before {
            display: none;
        }

        .stats .large {
            color: #ffc72c;
            font-size: 24px;
            margin-top: 20px;
        }

        .stats .small {
            font-size: 16px;
        }
}



/* ===============================================
============== BREADCRUMBS & SUBNAV ==============
=============================================== */

/* BREADCRUMBS */
#breadcrumbs ul, #desktop-sub-nav ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

#breadcrumbs li,
#desktop-sub-nav li {
    float: left;
}

#breadcrumbs a:hover,
#desktop-sub-nav a,
#desktop-sub-nav a:hover {
    text-decoration: none;
}

#breadcrumbs {
    padding: 25px 0;
}

    #breadcrumbs li {
        font-size: 16px;
        font-weight: bold;
        margin: 0 15px 0 0;
    }

    #breadcrumbs a {
        text-decoration: none;
    }

    #breadcrumbs li {
        color: #979797;
    }

        #breadcrumbs li a {
            color: #00ade4;
        }

    #breadcrumbs a:hover {
        color: #263e58;
    }

    #breadcrumbs.yellow li,
    #breadcrumbs.yellow li a {
        color: #ffc72c;
    }

    #breadcrumbs.yellow a:hover {
        color: #00ade4;
    }


    #breadcrumbs i {
        margin: 0;
    }

/* DESKTOP SUB NAVIGATION */
/* Add .active class to the <li> item to trigger an active 
style decoration. Style will work for 3 levels.
*/

#desktop-sub-nav ul {
    border-bottom: 1px solid #757575;
    border-color: rgba(117, 117, 117, .13);
    /*margin-bottom: 30px;*/
    padding: 0;
    width: 124%;
}

#desktop-sub-nav li {
    /*position: relative;*/
}

@media screen and (min-width: 992px) {
    #desktop-sub-nav li {
        max-width: 25%;
    }
}

#desktop-sub-nav li.active a {
    color: #00ade4;
}

#desktop-sub-nav li.active:hover > a,
#desktop-sub-nav li.active:focus > a,
#desktop-sub-nav li.active:active > a {
    background: transparent;
    color: #ffc72c;
}

#desktop-sub-nav .active.submenu-parent:hover > a,
#desktop-sub-nav .active.submenu-parent:focus > a,
#desktop-sub-nav .active.submenu-parent:active > a {
    background: #263e58;
    color: #FFF;
}

#desktop-sub-nav div[class*=' col-'] > ul:first-child > .submenu-parent > .submenu > li.active > a {
    background: #263e58;
    color: #FFF;
}

#desktop-sub-nav .submenu-parent > .submenu > li.active > a {
    background: #121f2c;
    color: #ffc72c;
}

#desktop-sub-nav .submenu-parent > .submenu .submenu > li.active > a {
    background: #080f16;
}

#desktop-sub-nav li li {
}

@media screen and (min-width: 992px) {
    #desktop-sub-nav li li {
        max-width: 100%;
    }
}

#desktop-sub-nav a {
    color: #263e58;
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    padding: 20px 15px;
}

#desktop-sub-nav .submenu-parent > a:before {
    color: #00ade4;
    content: "\f0d7";
    display: inline-block;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    float: right;
    padding-left: 10px;
}

#desktop-sub-nav .submenu .submenu-parent > a:before {
    color: #FFF;
    content: "\f0da";
}

#desktop-sub-nav .submenu {
    border: none;
    height: 0;
    margin: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    transition: opacity .3s, height 0.3s ease-in-out;
    -webkit-transition: opacity .3s, height 0.3s ease-in-out; /* Safari */
    width: 200px;
    z-index: 2;
}

    #desktop-sub-nav .submenu li {
        position: relative;
        width: 100%;
    }

    #desktop-sub-nav .submenu a {
        display: block;
        font-weight: normal;
        padding: 12px;
        text-shadow: none !important;
    }

    #desktop-sub-nav li:hover a, #desktop-sub-nav .submenu a {
        background: #263e58;
        color: #FFF;
    }

    #desktop-sub-nav .submenu li:hover > a {
        background: linear-gradient(to right, #273e59, #121f2c);
    }

#desktop-sub-nav .submenu-parent:hover > .submenu {
    /*height: 300px;*/
    opacity: 1;
    overflow: visible;
}

#desktop-sub-nav .submenu .submenu {
    /*height: auto;*/
    left: 0;
    opacity: 0;
    top: 0;
    z-index: -4;
    transition: opacity .3s, left 0.3s ease-in-out;
    -webkit-transition: opacity .3s, left 0.3s ease-in-out; /* Safari */
}

    #desktop-sub-nav .submenu .submenu li,
    #desktop-sub-nav .submenu .submenu a {
        background: #121f2c;
    }

        #desktop-sub-nav .submenu .submenu li:hover > a {
            background: rgba(0,0,0,0.4);
        }

#desktop-sub-nav .submenu .submenu-parent:hover .submenu {
    opacity: 1;
    left: 200px;
}

/* MOBILE SUB NAVIGATION */
/* Add .active class to the <li> item to trigger an active 
style decoration. Style will work for 3 levels.
*/
#mobile-sub-nav {
    margin-bottom: 20px;
}

    #mobile-sub-nav nav {
        background: #dcdada;
        border: 1px solid #757575;
        border-color: rgba(117, 117, 117, .13);
        border-width: 0 1px 1px;
        padding: 15px;
    }

    #mobile-sub-nav a {
        color: #263e58;
        font-size: 13px;
    }

    #mobile-sub-nav .mobile-sub-nav-toggle {
        cursor: pointer;
        display: block;
        font-weight: bold;
        text-transform: uppercase;
        width: 100%;
    }

    #mobile-sub-nav .nav-item {
    }

        #mobile-sub-nav .nav-item:last-child {
            border-bottom: none;
        }

        #mobile-sub-nav .nav-item a {
            border-bottom: 1px solid #eeeded;
            color: #263e58;
            display: block;
            padding: 10px 0;
            position: relative;
            text-decoration: none;
        }

#subnav-collapse .nav > .nav-item:last-child > a {
    border-bottom: none;
}

#mobile-sub-nav .nav-item a:hover,
#mobile-sub-nav .nav-item a:focus,
#mobile-sub-nav .nav-item a:active {
    color: #e0bc57;
}

#mobile-sub-nav .nav-item.active > a,
#mobile-sub-nav .nav-item.active > a:hover,
#mobile-sub-nav .nav-item.active > a:focus,
#mobile-sub-nav .nav-item.active > a:active,
#mobile-sub-nav .nav-item a.active,
#mobile-sub-nav .nav-item a.active:hover,
#mobile-sub-nav .nav-item a.active:focus,
#mobile-sub-nav .nav-item a.active:active {
    color: #00ade4;
    cursor: default;
    font-weight: bold;
}

#mobile-sub-nav .nav-item ul {
    list-style: none;
    margin-bottom: 10px;
    margin-left: 15px;
    padding-left: 0;
}


#subnav-collapse {
    border-top: 1px solid #e0e0e0;
    margin-top: 13px;
}

    #subnav-collapse .nav {
        list-style: none;
        padding-left: 0;
    }

        #subnav-collapse .nav > .nav-item > a {
            padding-left: 0;
        }

        #subnav-collapse .nav > .nav-item:first-child > a {
            padding-top: 10px;
        }

        #subnav-collapse .nav > .nav-item > a:before {
            content: "";
            display: none;
        }

/* ===============================================
===================== SUBPAGES ===================
=============================================== */
.page-wrapper {
    background: #FFF;
    padding-top: 30px;
}

.body-content {
    background: #FFF !important;
    padding-bottom: 30px;
    padding-top: 30px;
    position: relative;
}

.sub-page h1,
.sub-page .h1 {
    border-bottom: 1px solid #757575;
    border-color: rgba(117, 117, 117, .13);
    font-size: 21px;
    font-weight: 900;
    margin: 0;
    padding-bottom: 20px;
    text-transform: none;
}

/* Two Column Template */

/* A subpage that has a background image AKA: Featured Image; */
.has-featured-image .featured-image {
    background: #000;
    position: absolute;
    text-align: center;
    width: 100%;
}

    .has-featured-image .featured-image > img {
        opacity: .7;
    }

    .has-featured-image .featured-image .shadow,
    .has-featured-image .featured-block .shadow {
        background: #FFF;
    }

.has-featured-image .featured-block .shadow {
    bottom: 0;
    left: 50%;
    margin-left: -50%;
    position: absolute;
    width: 100%;
}

.has-featured-image .featured-image span.shadow {
    display: block;
}

.has-featured-image .featured-image .shadow img,
.has-featured-image .featured-block .shadow img {
    display: block;
    margin: 0 auto;
}

.has-featured-image #desktop-sub-nav a {
    color: #FFF;
}

/* Featured-block
   Has a block with solid background color when no art 
   is available but still want the story with art layout
*/

.has-featured-image > .featured-block {
    background-color: #002343;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke='%23263e58' stroke-width='1'%3E%3Cpath d='M769 229L1037 260.9M927 880L731 737 520 660 309 538 40 599 295 764 126.5 879.5 40 599-197 493 102 382-31 229 126.5 79.5-69-63'/%3E%3Cpath d='M-31 229L237 261 390 382 603 493 308.5 537.5 101.5 381.5M370 905L295 764'/%3E%3Cpath d='M520 660L578 842 731 737 840 599 603 493 520 660 295 764 309 538 390 382 539 269 769 229 577.5 41.5 370 105 295 -36 126.5 79.5 237 261 102 382 40 599 -69 737 127 880'/%3E%3Cpath d='M520-140L578.5 42.5 731-63M603 493L539 269 237 261 370 105M902 382L539 269M390 382L102 382'/%3E%3Cpath d='M-222 42L126.5 79.5 370 105 539 269 577.5 41.5 927 80 769 229 902 382 603 493 731 737M295-36L577.5 41.5M578 842L295 764M40-201L127 80M102 382L-261 269'/%3E%3C/g%3E%3Cg fill='%23263e58'%3E%3Ccircle cx='769' cy='229' r='5'/%3E%3Ccircle cx='539' cy='269' r='5'/%3E%3Ccircle cx='603' cy='493' r='5'/%3E%3Ccircle cx='731' cy='737' r='5'/%3E%3Ccircle cx='520' cy='660' r='5'/%3E%3Ccircle cx='309' cy='538' r='5'/%3E%3Ccircle cx='295' cy='764' r='5'/%3E%3Ccircle cx='40' cy='599' r='5'/%3E%3Ccircle cx='102' cy='382' r='5'/%3E%3Ccircle cx='127' cy='80' r='5'/%3E%3Ccircle cx='370' cy='105' r='5'/%3E%3Ccircle cx='578' cy='42' r='5'/%3E%3Ccircle cx='237' cy='261' r='5'/%3E%3Ccircle cx='390' cy='382' r='5'/%3E%3C/g%3E%3C/svg%3E");
    background-size: auto auto;
    background-position: center;
    left: 0;
    min-height: 475px;
    position: absolute;
    top: 0;
    width: 100%;
}

.has-featured-image > span.featured-block {
    display: block;
}


/* Advanced Story Template */
.story-advanced-inner {
    position: relative;
}

.story-advanced p,
.story-advanced blockquote,
.story-advanced .youtube-player,
.story-advanced .tube,
.story-advanced .row.margin {
    margin-bottom: 1.2em;
}

    .story-advanced p:last-child,
    .story-advanced blockquote:last-child,
    .story-advanced .youtube-player:last-child,
    .story-advanced .tube:last-child {
        margin-bottom: 0;
    }

#story-advanced-header {
    background-color: #121f2c;
    background-attachment: fixed;
    background-position: top center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    color: #FFF;
    overflow: hidden;
    text-align: center;
}

@supports (-webkit-overflow-scrolling: touch) {
    #story-advanced-header,
    .zoom {
        background-attachment: scroll !important;
        background-size: auto 100%;
    }
}


#story-advanced-header h1,
#story-advanced-header .h1,
#story-advanced-header-mobile h1,
#story-advanced-header-mobile .h1 {
    border-bottom: none;
    font-family: 'Minion Pro', serif;
    font-size: 34px;
    font-weight: normal;
    text-transform: none;
}

.background-gradient {
    background: linear-gradient(rgba(0,0,0,.75) 0%, rgba(0,0,0,.4) 25%, rgba(0,0,0,.2) 50%, transparent);
}

.background-gradient,
#story-advanced-header .container {
    height: 100%;
    position: relative;
    z-index: 15;
}

    #story-advanced-header .container.program-logo {
        height: auto;
        position: absolute;
        z-index: 10;
    }

#story-advanced-header #breadcrumbs ul {
    border-bottom: 1px solid #757575;
    border-color: rgba(117, 117, 117, .23);
    padding: 25px 0;
}

#story-advanced-header #breadcrumbs li,
#story-advanced-header #breadcrumbs li a {
    color: #ffc72c;
}

#story-advanced-header #breadcrumbs a:hover {
    color: #00ade4;
}

#story-advanced-header.no-image #breadcrumbs li {
    color: #979797;
}

    #story-advanced-header.no-image #breadcrumbs li a {
        color: #00ade4;
    }

#story-advanced-header.no-image #breadcrumbs a:hover {
    color: #263e58;
}

.story-advanced .story-advanced-title {
    padding-top: 35px;
    text-shadow: 0px 3px 5px rgba(0, 0, 0, 0.83);
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .story-advanced .story-advanced-title {
        transform: translate3d(0px, 0px, 0px) !important;
    }
}

.story-advanced .story-type {
    font-size: 1rem;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.story-advanced-caption {
    bottom: 0;
    position: absolute;
    right: 15px;
    width: 100%;
}

    .story-advanced-caption .caption-inner {
        background: rgba(0,0,0,.85);
        border-top: 2px solid #ffc72c;
        font-size: 14px;
        padding: 30px 20px;
    }

#story-advanced-header.no-image {
    background: #FFF;
    color: #263e58;
}

    #story-advanced-header.no-image .story-advanced-title {
        text-shadow: none;
    }

    #story-advanced-header.no-image .background-gradient {
        background: none;
    }

    #story-advanced-header.no-image .story-advanced-caption {
        display: none !important;
    }

#story-advanced-header-mobile {
    background: #121f2c;
    color: #FFF;
    text-align: center;
}

    #story-advanced-header-mobile h1,
    #story-advanced-header-mobile .h1 {
        font-size: 21px;
        font-weight: normal;
    }

    #story-advanced-header-mobile .language-selector {
        background: #263e58;
    }

        #story-advanced-header-mobile .language-selector .dropdown-toggle {
            color: #FFF;
            display: block;
            padding: 1rem 0;
            text-align: left;
            text-transform: uppercase;
            width: 100%;
        }

            #story-advanced-header-mobile .language-selector .dropdown-toggle span {
                color: #ffc72c;
                margin-left: 1rem;
            }

            #story-advanced-header-mobile .language-selector .dropdown-toggle::after {
                color: #ffc72c;
                float: right;
                position: relative;
                top: 10px;
            }

.story-advanced .body-copy {
    padding: 4.2839657% 0 0;
}

    .story-advanced .body-copy.top-shadow,
    .story-advanced .body-copy.top-shadow {
        position: relative;
        z-index: 2;
    }

.story-advanced #sidebar {
    background: #ebebeb;
    color: #2f2f2f;
    font-size: 14px;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 1000;
}

    .story-advanced #sidebar > a.btn,
    .story-advanced #sidebar > a.btn:hover {
        background-color: #00ade4;
        border-color: #00ade4;
        color: #FFF;
    }

    .story-advanced #sidebar > a:before {
        content: '\f078';
        font-family: "Font Awesome 5 Free";
        font-style: normal;
        font-weight: 900;
        font-variant: normal;
        speak: none;
        text-transform: none;
        line-height: 1;
        display: inline-block;
        margin-right: 0.6em;
        -webkit-font-smoothing: antialiased;
    }

    .story-advanced #sidebar > a.collapsed:before {
        content: '\f077';
    }

    .story-advanced #sidebar #sidebar-inner {
        margin: 0 auto;
        padding: 0 1rem;
        align-self: flex-start;
    }

    .story-advanced #sidebar ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .story-advanced #sidebar li {
        border-bottom: 1px solid #757575;
        border-color: rgba(117, 117, 117, .25);
        line-height: 1;
        padding: 10px 0;
    }

    .story-advanced #sidebar .header {
        border-bottom: none;
        color: #263e58;
        margin: 1rem 0 0;
        padding: 0;
        text-transform: uppercase;
        font-weight: bold;
    }

    .story-advanced #sidebar a:not(.btn) {
        color: #2f2f2f;
        display: block;
        font-size: 14px;
        line-height: 1.2;
    }

    .story-advanced #sidebar .close {
        font-size: 14px;
    }

    .story-advanced #sidebar a {
        text-decoration: none;
    }

        .story-advanced #sidebar a:not(.btn):hover {
            text-decoration: underline;
        }

    .story-advanced #sidebar li:last-child {
        border-bottom: none;
    }

.mp-pushed #sidebar,
.mp-pushed .a2a-main .a2a_kit {
    z-index: 0;
}


.story-advanced .body-copy .containers {
    position: static;
}

/* Simple story template */

.story-simple-inner {
    margin-top: 30px;
    position: relative;
}

    .story-simple-inner .body-copy {
        padding: 20px 0 0;
    }

.story-title {
    padding-bottom: 30px;
}

/* ---------- Social media bar ------*/

.a2a-container {
}

.a2a_container .title,
.a2a_container h5 {
    color: #263e58;
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 0.5rem;
    margin-top: .5rem;
}

.a2a_kit {
    position: static;
    z-index: 9999995;
}

    .a2a_kit .a2a_svg {
        display: inline-block;
    }

    .a2a_kit a:hover .a2a_svg {
        opacity: 0.7;
    }

/* Fixed social nav */

.mp-pushed .a2a-main {
    opacity: 0;
    pointer-events: none;
}

    .mp-pushed .a2a-main:hover {
        cursor: default;
    }

.a2a-main {
    opacity: 1;
    z-index: 999;
}

@media (min-width: 768px) {
    .a2a-main {
        background: transparent;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        width: 48px;
        display: flex;
    }
}

.a2a-main a {
}

@media (min-width: 768px) {
    .a2a-main a {
        clear: left;
        display: block;
        overflow: hidden;
        padding: 4px;
        text-decoration: none;
    }
}

.a2a-main .a2a_kit {
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    padding: 4px;
}

@media (min-width: 768px) {
    .a2a-main .a2a_kit {
        align-self: flex-start;
        background-color: rgba(255, 255, 255, .75);
        float: left;
        margin: 225px 0 0;
        position: fixed;
        position: -webkit-sticky;
        position: sticky;
        top: 150px;
    }
}

.has-featured-image .a2a-main .a2a_kit {
}

@media (min-width: 768px) {
    .has-featured-image .a2a-main .a2a_kit {
        margin-top: 195px;
    }
}


.ie-10 .a2a-main,
.ie-11 .a2a-main {
}

@media (min-width: 768px) {
    .ie-10 .a2a-main,
    .ie-11 .a2a-main {
        position: fixed;
    }
}

.ie-10 .story-advanced .a2a-main,
.ie-11 .story-advanced .a2a-main {
}

.ie-10 .story-advanced .a2a-main,
.ie-11 .story-advanced .a2a-main {
    position: static;
}


.ie-10 .a2a-main .a2a_kit,
.ie-11 .a2a-main .a2a_kit {
}

@media (min-width: 768px) {
    .ie-10 .a2a-main .a2a_kit,
    .ie-11 .a2a-main .a2a_kit {
        position: absolute;
    }
}

.a2a-main.fixed .a2a_kit {
}

@media (min-width: 768px) {

    .ie-10 .story-advanced .a2a-main.fixed,
    .ie-11 .story-advanced .a2a-main.fixed {
        position: absolute;
    }

    .a2a-main.fixed .a2a_kit {
        position: fixed !important;
    }
}


.a2a-main.static .a2a_kit {
}

@media (min-width: 768px) {
    .ie-10 .story-advanced .a2a-main.static,
    .ie-11 .story-advanced .a2a-main.static {
        position: absolute;
    }

    .a2a-main.static .a2a_kit {
        position: static !important;
    }
}

.a2a-main .a2a_svg {
}

@media (min-width: 768px) {
    .a2a-main .a2a_svg {
        display: block;
    }
}

.story-advanced .a2a-main .subtitle {
}

@media (min-width: 768px) {
    .story-advanced .a2a-main .subtitle {
        display: none !important;
    }
}

/* SUBPAGES RESPONSIVE */


@media screen and (min-width: 768px) {
    /* Tablet and Up */
    #page-content.sub-page h1,
    #page-content.sub-page .h1 {
        font-size: 36px;
    }

    #page-content.story-advanced {
        font-size: 21px;
    }

    .has-featured-image #breadcrumbs,
    .has-featured-image h1,
    .has-featured-image #desktop-sub-nav ul li a {
        text-shadow: 0px 1px 4px rgba(0, 0, 0, 0.83);
    }

    .sub-page.has-featured-image h1,
    .sub-page.has-featured-image .h1 {
        color: #FFF;
    }

    .has-featured-image #breadcrumbs li,
    .has-featured-image #breadcrumbs li a {
        color: #ffc72c;
    }

    .has-featured-image #breadcrumbs a:hover {
        color: #00ade4;
    }

    .story-advanced .story-type {
        font-size: 26px;
    }

    #story-advanced-header h1,
    #story-advanced-header .h1 {
        font-size: 50px;
    }

    .story-title .story-type {
        font-size: 26px;
    }

    .story-advanced .story-advanced-title {
        margin: 35px 0 100px;
        padding-top: 0;
    }

    .story-advanced #sidebar #sidebar-inner {
        width: 75%;
    }
}

@media screen and (min-width: 1200px) {
    /* Destop */
    .story-advanced #sidebar {
        background: transparent;
        color: #FFF;
        font-size: 1rem;
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
        width: 235px;
        display: flex;
    }

        .story-advanced #sidebar #sidebar-inner {
            align-self: flex-start;
            background: rgba(38,62,88,.9);
            display: block !important;
            margin: 60px 0;
            padding: 0 1rem;
            position: -webkit-sticky;
            position: sticky;
            top: 150px;
            width: 235px;
            z-index: 1200;
        }

    #sidebar-inner .btn-primary {
        border-color: #FFF;
        color: #FFF;
    }

        #sidebar-inner .btn-primary:hover {
            border-color: #00ade4;
            color: #00ade4;
        }

    .story-advanced #sidebar .header {
        border-top: 10px solid #ffc72c;
        color: #ffc72c;
        font-size: 18px;
        text-transform: uppercase;
        font-weight: bold;
        margin: 0;
        padding: 30px 0 0;
    }

    .story-advanced #sidebar ul {
        list-style: none;
        margin: 0;
        padding: 0 0 20px;
    }

    .story-advanced #sidebar li {
    }

    .story-advanced #sidebar a:not(.btn) {
        color: #FFF;
        display: inline-block;
        line-height: 1.2;
    }

    .story-advanced #sidebar li:last-child a {
        border-bottom: none;
    }
}

/* ===============================================
===================== SIDEBARS ===================
=============================================== */
.sidebar {
    margin-top: 50px;
    z-index: 0;
}

.sidebar-item {
    background: #f8f8f8;
    margin-bottom: 35px;
    position: relative;
}

    .sidebar-item > p {
        font-weight: 700;
    }

        .sidebar-item > p:first-child {
            margin-top: 10px;
        }

    .sidebar-item:last-child {
        margin-bottom: 25px;
    }

.sidebar-header {
    background: #263e58;
    color: #ffc72c;
    font-family: "Lato", sans-serif;
    font-size: 21px;
    font-weight: bold;
    line-height: 1.2;
    margin-bottom: 0;
    padding: 20px 25px;
}

.sidebar-title {
    color: #263e58;
    font-size: 18px;
    font-weight: bold;
    margin-top: 0;
}

.sidebar-body {
    padding: 10px 25px;
    font-size: 15px;
}

/* Related Links */
.sidebar-item .styled-list a {
    font-weight: bold;
}

/* Related Items/Stories */
.sidebar-body .thumbnail-list a:not(.btn) {
    border-top: 1px solid #e2e2e2;
    color: #263e58;
    line-height: 1.2;
    padding: 15px 0;
    font-weight: bold;
    text-decoration: none;
}

.sidebar-body .thumbnail-list img {
    /*max-width: 76px;*/
}

.sidebar-body .thumbnail-list p {
    margin: 0;
    padding-left: 15px;
}

/* Contact Info */
.contact-info .sidebar-header {
    background: transparent;
    color: #00ade4;
    padding-bottom: 0;
}

.contact-info .sidebar-body {
    padding-top: 0;
}

.contact-list {
    border-top: 1px solid #e2e2e2;
    font-size: 15px;
    list-style: none;
    margin: 0 0 25px;
    padding: 25px 0 0;
}

    .contact-list .name {
        font-size: 17px;
        font-weight: bold;
        line-height: 17px;
    }

    .contact-list .title {
        font-style: italic;
        margin-bottom: 10px;
    }

/* Featured Quote */

.sidebar-item.quote {
    background: transparent;
    margin: 50px 0 !important;
    position: relative;
}

    .sidebar-item.quote:first-child {
        padding-top: 20px !important;
    }

    .sidebar-item.quote:last-child {
        padding-bottom: 20px !important;
    }

    .sidebar-item.quote > div {
        position: relative;
        z-index: 5;
    }

    .sidebar-item.quote:before {
        background: #00ade4;
        content: "";
        top: -9.747008547008547%;
        display: block;
        height: 110%;
        left: 0;
        margin: 0 auto;
        position: absolute;
        right: 1px;
        transform: skewY(-4.2deg);
        transform-origin: 0%;
        width: 85%;
        z-index: 1;
    }

.quote .sidebar-body {
    background: #263e58;
    padding: 35px 25px;
    position: relative;
}

.sidebar-item.quote blockquote {
    color: #FFF;
    font-size: 21px;
    margin-bottom: 0;
    padding-left: 0;
    text-align: center;
}

    .sidebar-item.quote blockquote:before {
        content: '';
    }



/* Featured program */
.featured-program {
    color: #3e3e3e;
    font-size: 17px
}

    .featured-program img {
        width: 100%;
    }

    .featured-program .image {
        border-bottom: 4px solid #ffc72c;
        max-height: 250px;
        overflow: hidden;
    }

@media screen and (min-width: 768px) {
    .featured-program .image {
        max-height: 100%;
    }
}

.featured-program .sidebar-body {
    padding-top: 15px;
}

.featured-program .image + .sidebar-body {
    padding-top: 18px;
}

/* Advertising */

.advertising {
    background-color: transparent;
    text-align: center;
}

/* Global Sidebar Styles */
.sidebar-body .thumbnail-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .sidebar-body .thumbnail-list a:first-child,
    .contact-list:first-child {
        border-top: none;
    }

    .sidebar-body .thumbnail-list a:hover {
        text-decoration: underline;
    }

/* Sidebar Responsive Styles */
@media screen and (min-width: 768px) {
    /* Tablet and Up */

}

@media screen and (min-width: 1200px) {
    /* Destop */
    .sidebar {
        margin-top: 0;
        padding-left: 40px;
    }
}


/* ===============================================
========== ENGAGEMENT BOX ============
=============================================== */

.engagement-box {
    background: #f8f8f8;
    margin-left: -15px;
    margin-right: -15px;
    padding: 0 20px 30px;
}

@media screen and (min-width: 576px) {
    .engagement-box {
        margin-left: 0;
        margin-right: 0;
    }
}

.body-content > .engagement-box:last-child,
.body-content > .row > div[class^="col-"]:first-child > .engagement-box:last-child {
}


@media screen and (min-width: 992px) {
    .body-content > .engagement-box:last-child,
    .body-content > .row > div[class^="col-"]:first-child > .engagement-box:last-child {
        margin-bottom: 90px;
    }
}

.engagement-header {
    padding-bottom: 25px;
}

    .engagement-header .btn {
        margin-top: 30px;
    }

.engagement-box h2,
.engagement-box h3,
.engagement-box .subtitle {
    color: #263e58;
    display: inline-block;
    font-size: 27px;
    padding-top: 30px;
    position: relative;
    text-transform: none;
}

    .engagement-box h2:before,
    .engagement-box h3:before,
    .engagement-box .subtitle:before {
        background: #263e58;
        content: "";
        display: block;
        height: 5px;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
    }

@media screen and (min-width: 768px) {
    .engagement-box h2:before,
    .engagement-box h3:before,
    .engagement-box .subtitle:before {
        max-width: 195px;
    }
}

@media screen and (min-width: 992px) {
    .engagement-box h2:before,
    .engagement-box h3:before,
    .engagement-box .subtitle:before {
        max-width: 170px;
    }
}

@media screen and (min-width: 1200px) {
    .engagement-box h2:before,
    .engagement-box h3:before,
    .engagement-box .subtitle:before {
        max-width: 210px;
    }
}

.engagement-box > ul {
    list-style-type: none;
    margin-bottom: 0;
    margin-top: 25px;
    padding: 0;
}

    .engagement-box > ul > li {
        margin-bottom: 50px;
    }

@media screen and (min-width: 768px) {
    .engagement-box > ul > li {
        margin-bottom: 0;
    }
}

.engagement-box > ul > li:last-child {
    margin-bottom: 0;
}

.engagement-box a {
    text-decoration: none;
}

    .engagement-box a:hover,
    .engagement-box a:focus,
    .engagement-box a:active {
        text-decoration: none;
    }

.engagement-box .thumbnail {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 310px;
    overflow: hidden;
    opacity: 1;
    position: relative;
    -webkit-transition: opacity 0.2s ease-in;
    -moz-transition: opacity 0.2s ease-in;
    -ms-transition: opacity 0.2s ease-in;
    -o-transition: opacity 0.2s ease-in;
    transition: opacity 0.2s ease-in;
    will-change: opacity;
}

.engagement-box a:hover .thumbnail,
.engagement-box a:focus .thumbnail,
.engagement-box a:active .thumbnail {
    opacity: 0.8;
}

@media screen and (min-width: 768px) {
    .engagement-box .thumbnail {
        margin-left: 0;
        max-width: 100%;
    }
}

.engagement-box .text {
    background: white;
    border: 1px solid #e2e2e2;
    color: #263e58;
    display: block;
    font-size: 13px;
    font-weight: 700;
    margin-left: auto;
    margin-right: auto;
    max-width: 310px;
    min-height: 70px;
    padding: 15px 20px;
    -webkit-transition: color 0.2s ease-in;
    -moz-transition: color 0.2s ease-in;
    -ms-transition: color 0.2s ease-in;
    -o-transition: color 0.s ease-in;
    transition: color 0.2s ease-in;
    will-change: color;
}

@media screen and (min-width: 768px) {
    .engagement-box .thumbnail {
        margin-left: 0;
        max-width: 100%;
    }
}

.engagement-box a:hover .text,
.engagement-box a:focus .text,
.engagement-box a:active .text {
    color: #00ade4;
}

.engagement-box.is-dark-layout {
    background: #182d45;
}

    .engagement-box.is-dark-layout h2,
    .engagement-box.is-dark-layout h3,
    .engagement-box.is-dark-layout .subtitle {
        color: #ffc72c;
    }

        .engagement-box.is-dark-layout h2:before,
        .engagement-box.is-dark-layout h3:before,
        .engagement-box.is-dark-layout .subtitle:before {
            background: #ffc72c;
        }

    .engagement-box.is-dark-layout .text {
        border: none;
    }

    .engagement-box.is-dark-layout a:hover .text,
    .engagement-box.is-dark-layout a:focus .text,
    .engagement-box.is-dark-layout a:active .text {
        color: #00ade4;
    }

/* Pagination - with input */

.engagement-box .pagination-with-input {
    border-top: 1px solid #e2e2e2;
    margin-bottom: 0;
}

.engagement-box.is-dark-layout .pagination-with-input {
    border-top: 2px solid #ffc72c;
    color: #ffc72c;
}

    .engagement-box.is-dark-layout .pagination-with-input > a {
        color: #ffc72c;
    }

        .engagement-box.is-dark-layout .pagination-with-input > a:hover,
        .engagement-box.is-dark-layout .pagination-with-input > a:focus,
        .engagement-box.is-dark-layout .pagination-with-input > a:active,
        .engagement-box.is-dark-layout .pagination-with-input > a.active {
            color: white;
        }

/* Pagination - Using Bootstrap's pagination format */

.engagement-box .pagination {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    border-top: 1px solid #e2e2e2;
    justify-content: center;
    margin-top: 0;
    padding-top: 30px;
}

.engagement-box nav,
.engagement-box .pagination-wrapper {
    margin-top: 30px;
}

.engagement-box .page-link {
    background: transparent;
    border: none;
    color: #263e58;
    font-weight: normal;
    padding: 0 13px;
}

.engagement-box .page-item:first-child .page-link,
.engagement-box .page-item:last-child .page-link {
    color: #263e58;
}

    .engagement-box .page-item.active:first-child .page-link,
    .engagement-box .page-item:first-child .page-link:hover,
    .engagement-box .page-item:first-child .page-link:focus,
    .engagement-box .page-item:first-child .page-link:active,
    .engagement-box .page-item.active:last-child .page-link,
    .engagement-box .page-item:last-child .page-link:hover,
    .engagement-box .page-item:last-child .page-link:focus,
    .engagement-box .page-item:last-child .page-link:active {
        color: #00ade4;
    }

.engagement-box .page-item:first-child .page-link,
.engagement-box .page-item:last-child .page-link {
    color: #263e58;
}

.engagement-box .page-item:first-child .page-link {
    padding-right: 27px;
}

.engagement-box .page-item:last-child .page-link {
    padding-left: 27px;
}

.engagement-box .page-link:hover,
.engagement-box .page-link:focus,
.engagement-box .page-link:active {
    background: transparent;
    color: #263e58;
    font-weight: bold;
    padding: 0 13px;
}

.engagement-box .page-item.active .page-link,
.engagement-box .page-link.active:hover,
.engagement-box .page-link.active:focus,
.engagement-box .page-link.active:active {
    background: transparent;
    color: #263e58;
    cursor: default;
    font-weight: bold;
    padding: 0 13px;
}

.engagement-box span.page-link:hover,
.engagement-box span.page-link:focus,
.engagement-box span.page-link:active {
    color: #263e58;
    cursor: default;
}

/* Bootstrap's Pagination - Dark layout */

.engagement-box.is-dark-layout .pagination {
    border-top: 2px solid #ffc72c;
}

.engagement-box.is-dark-layout .page-link {
    color: white;
}

.engagement-box.is-dark-layout .page-item:first-child .page-link,
.engagement-box.is-dark-layout .page-item:last-child .page-link {
    color: #ffc72c;
}

    .engagement-box.is-dark-layout .page-item.active:first-child .page-link,
    .engagement-box.is-dark-layout .page-item:first-child .page-link:hover,
    .engagement-box.is-dark-layout .page-item:first-child .page-link:focus,
    .engagement-box.is-dark-layout .page-item:first-child .page-link:active,
    .engagement-box.is-dark-layout .page-item.active:last-child .page-link,
    .engagement-box.is-dark-layout .page-item:last-child .page-link:hover,
    .engagement-box.is-dark-layout .page-item:last-child .page-link:focus,
    .engagement-box.is-dark-layout .page-item:last-child .page-link:active {
        color: white;
    }

.engagement-box.is-dark-layout .page-item:first-child .page-link,
.engagement-box.is-dark-layout .page-item:last-child .page-link {
    color: #ffc72c;
}

.engagement-box.is-dark-layout .page-link:hover,
.engagement-box.is-dark-layout .page-link:focus,
.engagement-box.is-dark-layout .page-link:active {
    color: #ffc72c;
}

.engagement-box.is-dark-layout .page-item.active .page-link,
.engagement-box.is-dark-layout .page-link.active:hover,
.engagement-box.is-dark-layout .page-link.active:focus,
.engagement-box.is-dark-layout .page-link.active:active {
    color: #ffc72c;
}

.engagement-box.is-dark-layout span.page-link:hover,
.engagement-box.is-dark-layout span.page-link:focus,
.engagement-box.is-dark-layout span.page-link:active {
    color: white;
}

/* ===============================================
==================== CAROUSEL ====================
=============================================== */
.carousel-caption {
    font-size: 12px;
    position: static;
    right: initial;
    bottom: initial;
    left: initial;
    color: #263e58;
}

@media screen and (min-width: 768px) {
    .carousel-caption {
        font-size: 18px;
    }
}

/* ===============================================
===================== FOOTER =====================
=============================================== */
.footer {
    background: none repeat scroll 0 0 #222632;
    color: #fff;
    height: auto;
    margin-top: 0;
    padding: 35px 0 25px;
}

    .footer h4 {
        font-size: 15px;
        text-transform: uppercase;
        font-weight: 900;
        font-family: "Lato", sans-serif;
    }

.copyright {
    background: #FFF;
}

    .footer ul, .copyright ul {
        list-style: outside none none;
        margin-left: 0;
        padding-left: 0;
    }


.footer .item h4 {
    color: #00ADE4;
}

.footer .item a {
    color: #fff;
    font-family: "Lato", sans-serif;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
}

    .footer .item a:hover {
        color: #00ADE4;
    }

.footer .ifc h4 {
    color: #FFF;
}

.footer .ifc a {
    color: #00ADE4 !important;
    font-size: 12px !important;
    line-height: 14px !important;
}

.copy-bottom {
    list-style: outside none none;
    margin-bottom: 0;
    padding-left: 0;
}

    .copy-bottom > li {
        display: inline;
    }

.copyright {
    padding: 15px 0;
}

.copy-bottom a {
    font-family: "Lato", sans-serif;
    font-weight: 900;
    margin-right: 4px;
    text-decoration: none;
    color: #00ADE4;
}

.copy-bottom img {
    margin-right: 15px;
}

.copy-bottom a:hover {
    color: #23527c;
}

.social-links > li {
    display: inline;
    font-size: 35px;
    list-style: outside none none;
}

.social-links a {
    color: #00ADE4;
}

    .social-links a:hover {
        color: #fff;
    }

.footer .container {
    padding-top: 0px !important;
}



/* ===============================================
================= MODULES  =======================
=============================================== */


/* INTRODUCTION BLOCK - .introduction-block */
/* 
   Big text with a light gray background, meant to
   be used as the first element of the first column of a 
   .body-content, but it can be used between 2 content sections. 

   IMPORTANT: 
   This item takes full width of the container and moves up, if it's the first child
   of body or the first child of the first column, but if it needs to be the second item for
   some reason (for example: a social bar that shows only on medium screens or less)
   and still have that style on desktop, just add '.is-full-width-xl'.
   Note that this style also includes a negative top margin that could cause overlapping
   with items on top of it.
*/

.introduction-block {
    background: #f5f5f5;
    font-size: 18px;
    font-style: italic;
    margin: 40px 0;
    padding: 20px 25px;
    text-align: center;
}

@media screen and (min-width: 768px) {
    .introduction-block {
        font-size: 24px;
        padding-left: 15px;
        padding-right: 15px;
        text-align: left;
    }
}

.introduction-block.is-first-element-xl {
    margin-top: 0;
}

@media screen and (min-width: 768px) {
    .introduction-block.is-first-element-xl {
        margin-left: -15px;
        margin-right: -15px;
        margin-top: -30px;
    }
}

.introduction-block img {
    display: block;
    margin: 0 auto 30px;
}

@media screen and (min-width: 768px) {
    .introduction-block img {
        margin-bottom: 0;
    }
}

.introduction-block strong,
.introduction-block bold,
.introduction-block em {
    font-style: normal;
}

.introduction-block em {
    font-weight: bold;
}

.body-content > .introduction-block:first-child,
.body-content > .row > div[class^="col-"] > .introduction-block:first-child {
    margin-top: 0;
}

@media screen and (min-width: 768px) {
    .body-content > .introduction-block:first-child,
    .body-content > .row > div[class^="col-"] > .introduction-block:first-child {
        margin-left: -15px;
        margin-right: -15px;
        margin-top: -30px;
    }
}

.introduction-block .col-12 + .col-12 p {
}

@media screen and (min-width: 992px) {
    .introduction-block .col-12 + .col-12 p {
        padding-right: 35px;
    }
}

/* MEDIA LIST - .media-list */
/* A list used in story collection shows a list of articles
   with an image, a title, an excerpt, a "read more" and
  "watch video" button.
   The text and the image is intended to be used surrounded
   by an <a> tag that allows you to read more on click, but
   it can be removed with no consequences regarding style
*/
.media-list {
    text-align: center;
}

@media screen and (min-width: 768px) {
    .media-list {
        text-align: left;
    }
}

.media-list .item {
    margin-bottom: 60px;
}

    .media-list .item:last-child {
        margin-bottom: 0;
    }

@media screen and (min-width: 768px) {
    .media-list .item:nth-last-child(3),
    .media-list .item:nth-last-child(2) {
        margin-bottom: 0;
    }
}

.media-list a {
    text-decoration: none;
}

    .media-list a:hover,
    .media-list:focus,
    .media-list :active {
        text-decoration: none;
    }

.media-list .youtube-player {
    margin-bottom: 20px;
}

.media-list .thumbnail {
    display: block;
    margin: 0 0 20px;
    max-height: 210px;
    overflow: hidden;
}

.media-list img {
    display: block;
}

.media-list a img {
    border: none;
    opacity: 1;
    outline: none;
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -ms-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}

.media-list a:hover img,
.media-list a:focus img,
.media-list a:active img {
    opacity: 0.9;
}

.media-list h3,
.media-list h4,
.media-list .title {
    color: #002f53;
    font-size: 18px;
}

@media screen and (min-width: 1200px) {
    .media-list h3,
    .media-list h4,
    .media-list .title {
        min-height: 45px;
        max-height: 45px;
        overflow-y: hidden;
    }
}

.media-list .title {
    font-weight: bold;
}

.media-list .content {
    color: #757575;
    margin: 0 0 35px;
}

@media screen and (min-width: 1200px) {
    .media-list .content {
        min-height: 73px;
        overflow: hidden;
    }
}

.media-list a:hover .content,
.media-list a:focus .content,
.media-list a:active .content {
    color: #00ade4;
}

.media-list .tools .btn {
}

@media screen and (min-width: 1200px) {
    .media-list .btn {
        min-width: 1px !important;
        width: 100%;
    }
}

.media-list .tools .col-12:first-child .btn {
    margin-bottom: 25px;
}

@media screen and (min-width: 1200px) {
    .media-list .tools .col-12:first-child .btn {
        margin-bottom: 0;
    }
}


/* PAGINATION WITH INPUT - .pagination-with-input */
/* First usage in story collection section; features
   a first, previous, next and last button, also an
   input to select the page you want to go to.
   CMS changes <a> for <span> if link wouldn't be
   valid, example: first button when in page 1 would be a <span>.
*/

.pagination-with-input {
    border-top: 4px solid #002f53;
    color: #465d76;
    font-size: 18px;
    margin: 40px 0 90px;
    padding: 30px 0 0;
    text-align: center;
}

    .pagination-with-input form {
        display: inline-block;
        margin: 0 10px;
    }

    .pagination-with-input > span,
    .pagination-with-input > a {
        display: inline-block;
        margin-left: 15px;
        padding: 3px 0;
        vertical-align: top;
    }

        .pagination-with-input > span:first-child,
        .pagination-with-input > a:first-child,
        .pagination-with-input > form + .pagination-with-input > span,
        .pagination-with-input > form + .pagination-with-input > a {
            margin-left: 0;
        }

    .pagination-with-input > a {
        color: #263e58;
    }

        .pagination-with-input > a:hover,
        .pagination-with-input > a:focus,
        .pagination-with-input > a:active,
        .pagination-with-input > a.active {
            color: #00ade4;
        }

    .pagination-with-input input {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background: white;
        border: 1px solid #f5f5f5;
        display: inline-block;
        font-size: 16px;
        padding: 3px 5px;
        width: 50px;
    }

/* CONTACTS ACCORDION - .ifc-accordion */
/* Styles a standard bootstrap accordion to lined it up with the brand */
.ifc-accordion .card {
    border: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

.ifc-accordion .card-header {
    background: transparent;
    border-bottom-color: #768694;
    color: #ffc72c;
    padding: 0;
    text-transform: uppercase;
}

    .ifc-accordion .card-header:first-child {
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
    }

.ifc-accordion .btn-link {
    background: #263e58;
    color: #ffc72c;
    display: block;
    padding: 0.75rem 2.6rem 0.75rem 1.25rem;
    position: relative;
    text-align: left;
    width: 100%;
}

.ifc-accordion .btn-link {
    min-width: 1px !important;
}

    .ifc-accordion .btn-link:hover,
    .ifc-accordion .btn-link:focus,
    .ifc-accordion .btn-link:active {
        color: white;
        text-decoration: none;
    }


    .ifc-accordion .btn-link[aria-expanded="true"]:hover,
    .ifc-accordion .btn-link[aria-expanded="true"]:active {
        color: #ffc72c;
        cursor: default;
    }

    .ifc-accordion .btn-link[aria-expanded="true"]:focus,
    .ifc-accordion .btn-link[aria-expanded="true"].focus {
        color: #ffc72c;
    }

    .ifc-accordion .btn-link .fas {
        display: inline-block;
        font-size: 20px;
        position: absolute;
        top: 15px;
        right: 15px;
    }

        .ifc-accordion .btn-link .fas:before {
            content: "\f067";
        }

    .ifc-accordion .btn-link[aria-expanded="true"] .fas:before {
        content: "\f068"
    }


.ifc-accordion .ifc-accordion .card-header,
.light-accordion .ifc-accordion .card-header {
    text-transform: none;
}

.ifc-accordion .ifc-accordion .btn-link,
.light-accordion .ifc-accordion .btn-link {
    background: transparent;
    color: #263e58;
    padding-left: 0;
    text-transform: none;
}

    .ifc-accordion .ifc-accordion .btn-link:hover,
    .ifc-accordion .ifc-accordion .btn-link:focus,
    .ifc-accordion .ifc-accordion .btn-link:active,
    .light-accordion .ifc-accordion .btn-link:hover,
    .light-accordion .ifc-accordion .btn-link:focus,
    .light-accordion .ifc-accordion .btn-link:active {
        color: #ffc72c;
    }

    .ifc-accordion .ifc-accordion .btn-link .fas,
    .light-accordion .ifc-accordion .btn-link .fas {
        font-size: 15px;
        top: 3px;
    }

/* Light accordion - .light-accordion */
/* Styles a standard bootstrap accordion to fit subtle situations,
   still features icons for collapsed and extended states
   Example: faq.php
*/

.light-accordion {
    color: #787777;
}

    .light-accordion .card {
        border: none;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
    }

    .light-accordion .card-header {
        background: transparent;
        border-bottom: none;
        color: #ffc72c;
        margin-bottom: 15px;
        padding: 0;
        text-transform: uppercase;
    }

        .light-accordion .card-header:first-child {
            -webkit-border-radius: 0;
            -moz-border-radius: 0;
            border-radius: 0;
        }

    .light-accordion .card-body {
        padding-top: 0;
    }

    .light-accordion a {
        color: #00ade4;
    }

        .light-accordion a:hover,
        .light-accordion a:focus,
        .light-accordion a:active {
            color: #0056b3;
        }

    .light-accordion .btn-link {
        background: #f8f8f8;
        color: #263e58;
        display: block;
        padding: 0.75rem 2.6rem 0.75rem 1.25rem;
        position: relative;
        text-align: left;
        width: 100%;
    }

    .light-accordion .btn-link {
        min-width: 1px !important;
    }

        .light-accordion .btn-link:hover,
        .light-accordion .btn-link:focus,
        .light-accordion .btn-link:active {
            color: #00ade4;
            text-decoration: none;
        }


        .light-accordion .btn-link[aria-expanded="true"]:hover,
        .light-accordion .btn-link[aria-expanded="true"]:active {
            color: #00ade4;
            cursor: default;
        }

        .light-accordion .btn-link[aria-expanded="true"]:focus,
        .light-accordion .btn-link[aria-expanded="true"].focus {
            color: #00ade4;
        }

        .light-accordion .btn-link .fas {
            display: inline-block;
            font-size: 20px;
            position: absolute;
            top: 15px;
            right: 15px;
        }

            .light-accordion .btn-link .fas:before {
                content: "\f067";
            }

        .light-accordion .btn-link[aria-expanded="true"] .fas:before {
            content: "\f068"
        }

    .light-accordion .light-accordion .card-header,
    .ifc-accordion .light-accordion .card-header {
        border-bottom: 1px solid #e3e3e3;
    }

    .light-accordion .light-accordion .card-header,
    .ifc-accordion .light-accordion .card-header {
        text-transform: none;
    }

    .light-accordion .light-accordion .btn-link,
    .ifc-accordion .light-accordion .btn-link {
        background: transparent;
        color: #787777;
        font-weight: bold;
        padding-left: 0;
        padding-top: 0;
        text-transform: none;
    }

        .light-accordion .light-accordion .btn-link .fas,
        .ifc-accordion .light-accordion .btn-link .fas {
            font-size: 15px;
            top: 3px;
        }

/* MEDIA CONTACTS LIST - .media-contacts-list */
/* Originally used in the media contacts page, but can be used elsewhere.
   Styles a list with contact items, width is given by bootstrap's
   row-column system.
*/

.media-contacts-list .item {
    margin-bottom: 40px;
}

    .media-contacts-list .item:last-child {
        margin-bottom: 0;
    }

@media screen and (min-width: 576px) {
    .media-contacts-list .item:nth-last-child(2) {
        margin-bottom: 0;
    }
}

@media screen and (min-width: 992px) {
    .media-contacts-list .item:nth-last-child(3),
    .media-contacts-list .item:nth-last-child(4) {
        margin-bottom: 0;
    }
}

.media-contacts-list .header {
    display: block;
    margin-bottom: 15px;
}

.media-contacts-list .title {
    color: #002f53;
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}

.media-contacts-list .name,
.media-contacts-list h3,
.media-contacts-list h4 {
    color: black;
    font-size: 14px;
    font-weight: normal;
    margin: 0;
}

.media-contacts-list a {
    text-decoration: underline;
}

.media-contacts-list .fas {
    display: inline-block;
    margin-right: 15px;
    text-decoration: none;
}

.media-contacts-list .contact-info a:hover .fas,
.media-contacts-list .contact-info a:focus .fas,
.media-contacts-list .contact-info a:active .fas {
    color: #002f53;
}

.media-contacts-list .contact-info a {
    color: #002f53;
}

    .media-contacts-list .contact-info a:hover,
    .media-contacts-list .contact-info a:focus,
    .media-contacts-list .contact-info a:active {
        color: #00ade4;
    }

/* ACTION AREA - .action-area */
/* An area to add several action buttons, the style
   adds a separation between them.
   Can be combined with .has-separator to add a line that separates
   it with elements on top, or with alignment classes in bootstrap
   default is centered text
*/
.action-area {
    text-align: center;
}

    .action-area .btn {
        display: block;
        margin: 0 auto 20px;
        max-width: 190px;
        vertical-align: top;
    }

@media screen and (min-width: 576px) {
    .action-area .btn {
        display: inline-block;
        max-width: 100%;
    }
}

.action-area .btn:last-child {
    margin-bottom: 0;
}

@media screen and (min-width: 576px) {
    .action-area .btn:first-child {
        margin-left: 0;
    }
}

.action-area .btn + .btn {
}

@media screen and (min-width: 576px) {
    .action-area .btn + .btn {
        margin-left: 15px;
    }
}


/* LANGUAGE BLOCK - .language-block */
/* Shows a block where you can select a list of language,
   each one displayed as a button.
   Intended to be used as the first element of the first
   column of a .body-content, but can be used elsewhere

   IMPORTANT: 
   This item takes full width of the container and moves up, if it's the first child
   of body or the first child of the first column, but if it needs to be the second item for
   some reason (for example: a social bar that shows only on medium screens or less)
   and still have that style on desktop, just add '.is-full-width-xl'.
   Note that this style also includes a negative top margin that could cause overlapping
   with items on top of it.
*/

.language-block {
    background: #263e58;
    margin: 40px 0;
    padding: 20px 0;
}

@media screen and (min-width: 768px) {
    .language-block {
        background: #f5f5f5;
        padding-left: 0;
        padding-right: 0;
    }
}

.body-content > .language-block:first-child,
.body-content > .row > div[class^="col-"] > .language-block:first-child {
}

@media screen and (min-width: 768px) {
    .body-content > .language-block:first-child,
    .body-content > .row > div[class^="col-"] > .language-block:first-child {
        margin-top: 0;
    }
}

.has-featured-image .body-content > .language-block:first-child,
.has-featured-image .body-content > .row > div[class^="col-"] > .language-block:first-child {
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
}

@media screen and (min-width: 768px) {
    .has-featured-image .body-content > .language-block:first-child,
    .has-featured-image .body-content > .row > div[class^="col-"] > .language-block:first-child {
        margin-left: -15px;
        margin-right: -15px;
        margin-top: -30px;
    }
}

.language-block.is-full-width-xl {
}

@media screen and (min-width: 768px) {
    .language-block.is-full-width-xl {
        margin-top: 0;
    }
}

.has-featured-image .language-block.is-full-width-xl {
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
}

@media screen and (min-width: 768px) {
    .has-featured-image .language-block.is-full-width-xl {
        margin-left: -15px;
        margin-right: -15px;
        margin-top: -30px;
    }
}

.language-block .dropdown-area {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
}

@media screen and (min-width: 401px) {
    .language-block .dropdown-area {
        margin-left: 15px;
        width: 64%;
    }
}

@media screen and (min-width: 768px) {
    .language-block .dropdown-area {
        display: none;
    }
}

.language-block .dropdown {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
}

    .language-block .dropdown .btn {
        background: transparent;
        border-color: #263e58;
        color: #ffc72c;
        font-weight: normal;
        padding-left: 0;
        position: relative;
        text-align: left;
        text-transform: none;
        width: 100%;
    }

        .language-block .dropdown .btn.active,
        .language-block .dropdown .btn:active {
            background: transparent;
            border-color: transparent;
            color: #ffc72c;
        }

        .language-block .dropdown .btn:after {
            position: absolute;
            right: 0;
            top: 15px;
        }

.language-block .dropdown-menu {
    width: 100%;
}

.language-block .list-area {
    display: none;
    vertical-align: middle;
}

@media screen and (min-width: 768px) {
    .language-block .list-area {
        display: inline-block;
    }
}

.language-block .title,
.language-block h4,
.language-block h5 {
    color: white;
    display: inline-block;
    font-size: 17px;
    font-weight: normal;
    margin: 0;
    text-transform: uppercase;
    vertical-align: middle;
}

@media screen and (min-width: 768px) {
    .language-block .title,
    .language-block h4,
    .language-block h5 {
        color: #263e58;
    }
}

.language-block ul {
    display: inline-block;
    margin: 0;
    vertical-align: middle;
}

.language-block li {
    display: inline-block;
    margin-bottom: 15px;
    margin-left: 15px;
    vertical-align: top;
}

@media screen and (min-width: 992px) {
    .language-block li {
        margin-bottom: 0;
    }
}

.language-block li:first-child {
    margin-left: 0;
}

@media screen and (min-width: 992px) {
    .language-block li:first-child {
        margin-left: 20px;
    }
}

.language-block .list-area .btn {
    background-color: transparent;
    border-color: #263e58;
    color: #263e58;
    font-weight: normal;
    min-width: 90px !important;
    padding-bottom: 3px;
    padding-top: 3px;
}

    .language-block .list-area .btn:hover,
    .language-block .list-area .btn:focus,
    .language-block .list-area .btn:active,
    .language-block .list-area .btn.active,
    .language-block .list-area .active .btn {
        background-color: #ffc72c;
        border-color: #ffc72c;
        color: #333;
    }

.language-block .list-area .more .btn {
    border-color: #00ade4;
    color: #00ade4;
}

    .language-block .list-area .more .btn:hover,
    .language-block .list-area .more .btn:focus,
    .language-block .list-area .more .btn:active,
    .language-block .list-area .more .btn.active,
    .language-block .list-area .more .active .btn {
        border-color: #ffc72c;
        color: #333;
    }


/* Filter Bar - .filter-bar */
/* Used primarily at the top of a page as a way to filter a set of entries.
   Can be added as a block in the content.

   IMPORTANT: 
   This item takes full width of the container and moves up, if it's the first child
   of body or the first child of the first column, but if it needs to be the second item for
   some reason (for example: a social bar that shows only on medium screens or less)
   and still have that style on desktop, just add '.is-full-width-xl'.
   Note that this style also includes a negative top margin that could cause overlapping
   with items on top of it.
*/

.filter-bar {
    background-color: #f5f5f5;
    margin: 40px 0;
    padding: 25px 15px;
    position: relative;
}

.body-content > .filter-bar:first-child,
.body-content > .row > div[class^="col-"] > .filter-bar:first-child {
    margin-top: 0;
}

@media screen and (min-width: 768px) {
    .body-content > .filter-bar:first-child,
    .body-content > .row > div[class^="col-"] > .filter-bar:first-child {
        margin-left: -15px;
        margin-right: -15px;
        margin-top: -30px;
    }
}

.filter-bar.is-full-width-xl {
    margin-top: 0;
}

@media screen and (min-width: 768px) {
    .filter-bar.is-full-width-xl {
        margin-left: -15px;
        margin-right: -15px;
        margin-top: -30px;
    }
}

.filter-bar label {
    font-size: 18px;
    font-weight: 700;
}

.filter-bar .btn i {
    color: #ffc72c;
    margin-right: 5px;
}

.filter-bar .btn:hover i,
.filter-bar .btn:focus i,
.filter-bar .btn:active i {
    color: #263e58;
}

/* Results Paging - .results-paging */
/* Used under the .filter-bar element as a way to show the 
   current results of the filter.
*/

.results-paging {
    border-bottom: 1px solid #e2e2e2;
    font-size: 18px;
}

    .results-paging b {
        font-weight: 700;
    }

    .results-paging .list-inline-item a {
        background: white;
        color: #263e58;
        display: block;
        line-height: 1;
        margin: -8px -10px;
        padding: 8px 10px;
        text-decoration: none;
    }

    .results-paging a:hover,
    .results-paging a:focus,
    .results-paging a:active {
        background: #f5f5f5;
    }

    .results-paging .list-inline-item {
        background: #263e58;
        color: #ffc72c;
        font-weight: 700;
        padding: 2px 10px;
    }

        .results-paging .list-inline-item.is-label {
            background: transparent;
            color: #263e58;
            padding: 0;
            font-weight: 700;
        }

/* Results Output - .results-output */
/* This is a stacked list of entries. Example: Publications page*/

.results-output a.result {
    border-bottom: 1px solid #e2e2e2;
    color: #757575;
    display: block;
    font-size: 13px;
    padding: 20px 16px 20px 16px;
    position: relative;
    text-decoration: none;
}

    .results-output a.result:hover,
    .results-output a.result:focus,
    .results-output a.result:active {
        background: #263e58;
        color: #FFF;
    }

    .results-output a.result:last-child {
        border-bottom: none;
    }

@media screen and (min-width: 992px) {
    .results-output a.result {
        padding-right: 50px;
    }

        .results-output a.result:hover:after,
        .results-output a.result:focus:after,
        .results-output a.result:active:after {
            color: #ffc72c;
            content: '\f054';
            display: -ms-flexbox;
            display: flex;
            font-family: "Font Awesome 5 Free";
            font-size: 30px;
            font-weight: 900;
            position: absolute;
            bottom: 0px;
            top: 0px;
            right: 20px;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
        }
}

.results-output a.result .date {
    color: #4d4d4d;
    line-height: 1;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.results-output a.result:hover .date,
.results-output a.result:focus .date,
.results-output a.result:active .date {
    color: #FFF;
}

.results-output a.result .title {
    color: #263e58;
    font-size: 18px;
    line-height: 1;
    margin-bottom: 10px;
    text-transform: none;
}

.results-output a.result:hover .title,
.results-output a.result:focus .title,
.results-output a.result:active .title {
    color: #ffc72c;
}

.results-output a.result .info {
    color: #000000;
    line-height: 1;
    margin-bottom: 0;
}

.results-output a.result:hover .info,
.results-output a.result:focus .info,
.results-output a.result:active .info {
    color: #FFF;
}

.results-output + .pagination-with-input {
    margin-top: 7px;
}



/* Main banner - .main-banner */
/* Used as a full width banner on top of content, features a blue box
   where you can add quotes, review excerpts, etc. 
   Example: Top level category page  */
.main-banner {
    font-size: 16px;
}

@media screen and (min-width: 768px) {
    .main-banner blockquote {
        font-size: 22px;
    }
}

.main-banner .carousel-control-next,
.main-banner .carousel-control-prev {
    align-items: flex-start;
}

@media screen and (min-width: 768px) {
    .main-banner .carousel-control-next,
    .main-banner .carousel-control-prev {
        align-items: center;
    }
}

.main-banner .carousel-control-next-icon,
.main-banner .carousel-control-prev-icon {
    margin-top: 70px;
}

@media screen and (min-width: 500px) {
    .main-banner .carousel-control-next-icon,
    .main-banner .carousel-control-prev-icon {
        margin-top: 90px;
    }
}

@media screen and (min-width: 650px) {
    .main-banner .carousel-control-next-icon,
    .main-banner .carousel-control-prev-icon {
        margin-top: 120px;
    }
}

@media screen and (min-width: 768px) {
    .main-banner .carousel-control-next-icon,
    .main-banner .carousel-control-prev-icon {
        margin-top: 0;
    }
}

.main-banner .carousel-item {
    overflow: hidden;
}

@media screen and (min-width: 768px) {
    .main-banner .carousel-item {
        max-height: 590px;
    }
}

.main-banner .background {
    max-height: 250px;
    overflow: hidden;
    width: 100%;
}

@media screen and (min-width: 768px) {
    .main-banner .background {
        max-height: 100%;
    }
}

.main-banner blockquote {
    font-size: 16px;
    margin: 0;
    padding: 25px 15px;
}


@media screen and (min-width: 576px) {
    .main-banner blockquote {
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media screen and (min-width: 768px) {
    .main-banner blockquote {
        font-size: 22px;
        padding-left: 25px;
        padding-right: 25px;
    }
}

.main-banner blockquote:before {
    content: "";
}

.main-banner p,
.main-banner .content {
    margin: 0;
    padding: 25px 15px;
}

@media screen and (min-width: 576px) {
    .main-banner p,
    .main-banner .content {
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media screen and (min-width: 768px) {
    .main-banner p,
    .main-banner .content {
        padding-left: 25px;
        padding-right: 25px;
    }
}

.main-banner .content {
    display: block;
}

.main-banner .caption {
    background: rgba(0,47,83, 1);
    bottom: 10px;
    color: white;
    font-size: 16px;
    font-style: italic;
    width: 100%;
}

@media screen and (min-width: 768px) {
    .main-banner .caption {
        background: rgba(0,47,83,0.9);
        font-size: 22px;
        left: 50%;
        margin-left: -135px;
        max-height: 90%;
        position: absolute;
        width: 480px;
    }
}

@media screen and (min-width: 992px) {
    .main-banner .caption {
        bottom: 25px;
        margin-left: -15px;
    }
}

@media screen and (min-width: 1200px) {
    .main-banner .caption {
        margin-left: 75px;
    }
}

.main-banner em {
    font-style: italic;
    font-weight: bold;
}

.main-banner .attribution {
    display: block;
    font-size: 14px;
    font-weight: bold;
    margin: 25px 0 0;
}

@media screen and (min-width: 768px) {
    .main-banner .attribution {
        font-size: 20px;
    }
}

.main-banner .attribution em,
.main-banner .attribution strong,
.main-banner .attribution b,
.main-banner .attribution .author,
.main-banner .caption a .attribution em,
.main-banner .caption a .attribution strong,
.main-banner .caption a .attribution b,
.main-banner .caption a .attribution .author {
    color: #ffc72c;
    font-style: normal;
}

.main-banner .caption a:hover .attribution em,
.main-banner .caption a:focus .attribution em,
.main-banner .caption a:active .attribution em,
.main-banner .caption a:hover .attribution strong,
.main-banner .caption a:focus .attribution strong,
.main-banner .caption a:active .attribution strong,
.main-banner .caption a:hover .attribution b,
.main-banner .caption a:focus .attribution b,
.main-banner .caption a:active .attribution b,
.main-banner .caption a:hover .attribution .author,
.main-banner .caption a:focus .attribution .author,
.main-banner .caption a:active .attribution .author {
    color: #ffc72c;
}

.main-banner .caption a {
    background-color: transparent;
    color: white;
    display: block;
    padding: 25px 15px;
    text-decoration: none;
    -webkit-transition: all 0.4s ease-in;
    -moz-transition: all 0.4s ease-in;
    -ms-transition: all 0.4s ease-in;
    -o-transition: all 0.4s ease-in;
    transition: all 0.4s ease-in;
}

@media screen and (min-width: 576px) {
    .main-banner .caption a {
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media screen and (min-width: 768px) {
    .main-banner .caption a {
        padding-left: 25px;
        padding-right: 25px;
    }
}

.main-banner .caption a:hover,
.main-banner .caption a:focus,
.main-banner .caption a:active {
    background: rgba(0,47,83,1);
    color: white;
    text-decoration: none;
}

.main-banner .caption > blockquote > a,
.main-banner .caption > p > a,
.main-banner .caption > .content > a {
    margin: -25px -15px;
}


@media screen and (min-width: 576px) {
    .main-banner .caption > blockquote > a,
    .main-banner .caption > p > a,
    .main-banner .caption > .content > a {
        margin-left: -40px;
        margin-right: -40px;
    }
}

@media screen and (min-width: 768px) {
    .main-banner .caption > blockquote > a,
    .main-banner .caption > p > a,
    .main-banner .caption > .content > a {
        margin-left: -25px;
        margin-right: -25px;
    }
}


.main-banner .caption a p,
.main-banner .caption a blockquote,
.main-banner .caption a .content {
    padding: 0;
}



/* Focus links - .focus-links */
/* List of focus actions. Has a thumbnail, title, description
   and an outline button.
   Used in focus-links.php
*/

.focus-links {
    background: #f8f8f8;
    border-top: 6px solid #00ade4;
    color: #2f2f2f;
    font-size: 16px;
    margin-left: -15px;
    margin-right: -15px;
    margin-top: 40px;
    padding: 25px;
}

@media screen and (min-width: 576px) {
    .focus-links {
        margin-left: 0;
        margin-right: 0;
    }
}

@media screen and (min-width: 768px) {
    .focus-links {
        background: transparent;
        border-top: none;
        padding: 0;
    }
}

.focus-links ul {
    margin: 0;
    padding: 0;
}

.focus-links li {
    margin-bottom: 50px;
}

@media screen and (min-width: 768px) {
    .focus-links li {
        margin-bottom: 45px;
    }
}

.focus-links h2,
.focus-links h3,
.focus-links h4,
.focus-links h5 {
}

@media screen and (min-width: 768px) {
    .focus-links h2,
    .focus-links h3,
    .focus-links h4,
    .focus-links h5 {
        border-bottom: 6px solid #f3f3f3;
        margin-bottom: 30px;
        padding-bottom: 20px;
    }
}

.focus-links h2:first-child,
.focus-links h3:first-child,
.focus-links h4:first-child,
.focus-links h5:first-child {
    margin-top: 0;
}

.focus-links .subtitle {
    color: #263e58;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
}

@media screen and (min-width: 768px) {
    .focus-links .subtitle,
    .focus-links h3.subtitle,
    .focus-links h4.subtitle,
    .focus-links h5.subtitle {
        border-bottom: none;
        margin-bottom: 15px;
        padding-bottom: 0;
    }
}

.focus-links .thumbnail,
.focus-links img {
    display: block;
    margin-bottom: 20px;
}

@media screen and (min-width: 768px) {
    .focus-links .thumbnail,
    .focus-links img {
        margin-bottom: 0;
    }
}

.focus-links .thumbnail {
    max-height: 150px;
    overflow: hidden;
}

@media screen and (min-width: 768px) {
    .focus-links .thumbnail {
        max-height: 180px;
    }
}

.focus-links .thumbnail > img {
    margin-bottom: 0;
    width: 100%;
}


.body-content > .focus-links:last-child,
.body-content > .row > div[class^="col-"]:first-child > .focus-links:last-child {
}


@media screen and (min-width: 992px) {
    .body-content > .focus-links:last-child,
    .body-content > .row > div[class^="col-"]:first-child > .focus-links:last-child {
        margin-bottom: 90px;
    }
}


/* Read more - .read-more */
/* Style for set of collapsible buttons and content.
   Makes a trigger button dissapear and appear
   Example: focus-links.php
*/


.read-more {
}

.read-more-trigger.collapse .btn,
.read-more-trigger.collapsing .btn {
    opacity: 0;
    -webkit-transition: opacity 0.1s ease-out;
    -moz-transition: opacity 0.1s ease-out;
    -ms-transition: opacity 0.1s ease-out;
    -o-transition: opacity 0.1s ease-out;
    transition: opacity 0.1s ease-out;
}

.read-more-trigger.collapse.show .btn {
    opacity: 1;
}

/* List of contents box - .list-of-contents-box */
/* Styles images and content of a list of contents 
   Example: basic-publications.php
*/

.list-of-contents-box {
    border-top: 2px solid #f3f3f3;
    margin: 175px -15px 40px;
    padding-left: 15px;
    padding-right: 15px;
}

@media screen and (min-width: 576px) {
    .list-of-contents-box {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }
}

@media screen and (min-width: 768px) {
    .list-of-contents-box {
        border-width: 6px;
        margin-bottom: 70px;
        margin-top: 30px;
        padding-top: 30px;
    }
}


.list-of-contents-box h2,
.list-of-contents-box h3,
.list-of-contents-box h4,
.list-of-contents-box h5 {
    font-size: 20px;
}

.list-of-contents-box a {
    display: inline-block;
}

.list-of-contents-box .img-wrapper {
    display: block;
}

    .list-of-contents-box .img-wrapper img {
        border: none;
        -webkit-box-shadow: 1px 0px 6px 0px rgba(50, 50, 50, 0.15);
        -moz-box-shadow: 1px 0px 6px 0px rgba(50, 50, 50, 0.15);
        box-shadow: 1px 0px 6px 0px rgba(50, 50, 50, 0.15);
        display: block;
        margin: -145px 0 45px;
        -webkit-transition: opacity 0.4s ease-in;
        -moz-transition: opacity 0.4s ease-in;
        -ms-transition: opacity 0.4s ease-in;
        -o-transition: opacity 0.4s ease-in;
        transition: opacity 0.4s ease-in;
    }

@media screen and (min-width: 576px) {
    .list-of-contents-box .img-wrapper img {
        margin-left: auto;
        margin-right: auto;
    }
}


@media screen and (min-width: 768px) {
    .list-of-contents-box .img-wrapper img {
        margin: 0;
    }
}

.list-of-contents-box a.img-wrapper:hover img,
.list-of-contents-box a.img-wrapper:focus img,
.list-of-contents-box a.img-wrapper:active img {
    opacity: 0.8;
}

.list-of-contents-box ul a {
    color: #263e58;
    display: inline;
    text-decoration: none;
}

    .list-of-contents-box ul a:hover,
    .list-of-contents-box ul a:focus,
    .list-of-contents-box ul a:active {
        color: #00ade4;
        text-decoration: none;
    }

.list-of-contents-box .general-list li {
    margin-bottom: 7px;
}

.list-of-contents-box .general-list ul {
    margin-top: 7px;
}

/* Key messages block - .key-messages-block */
/* Adds special decoration to a div, styles inner unordered list
   Example: basic-publications.php
*/

.key-messages-block {
    border-top: 6px solid #e8e8e8;
    color: #2f2f2f;
    margin-left: -15px;
    margin-right: -15px;
    margin-top: 40px;
    padding: 25px;
}

@media screen and (min-width: 576px) {
    .key-messages-block {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }
}

@media screen and (min-width: 768px) {
    .key-messages-block {
        background: transparent;
        border-top: none;
        padding: 0;
    }
}

.key-messages-block h2,
.key-messages-block h3,
.key-messages-block h4,
.key-messages-block h5 {
    font-size: 24px;
    margin-bottom: 35px;
}

@media screen and (min-width: 768px) {
    .key-messages-block h2,
    .key-messages-block h3,
    .key-messages-block h4,
    .key-messages-block h5 {
        border-bottom: 6px solid #f3f3f3;
        font-size: 22px;
        margin-bottom: 0;
        padding-bottom: 20px;
    }
}

.key-messages-block h2:first-child,
.key-messages-block h3:first-child,
.key-messages-block h4:first-child,
.key-messages-block h5:first-child {
    margin-top: 0;
}

.key-messages-block .block-list {
    margin-top: 0;
}

    .key-messages-block .block-list > li {
        background: transparent;
        border: none;
        margin-bottom: 25px;
        padding: 0 0 0 30px;
        position: relative;
    }

@media screen and (min-width: 768px) {
    .key-messages-block .block-list > li {
        background: white;
        margin-bottom: 0;
        padding: 15px 5px 15px 30px;
    }
}

.key-messages-block .block-list > li:before {
    border: 2px solid #002f53;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    content: "";
    display: block;
    font-size: inherit;
    height: 10px;
    left: 0;
    position: absolute;
    top: 0.5em;
    width: 10px;
}

@media screen and (min-width: 768px) {
    .key-messages-block .block-list > li:before {
        left: 5px;
        top: 22px;
    }
}

.key-messages-block .block-list > li:nth-child(even) {
    background: transparent;
}

@media screen and (min-width: 768px) {
    .key-messages-block .block-list > li:nth-child(even) {
        background: #f7f7f7;
    }
}

.body-content > .key-messages-block:last-child,
.body-content > .row > div[class^="col-"]:first-child > .key-messages-block:last-child {
}


@media screen and (min-width: 992px) {
    .body-content > .key-messages-block:last-child,
    .body-content > .row > div[class^="col-"]:first-child > .key-messages-block:last-child {
        margin-bottom: 90px;
    }
}


/* Utility block - .utility-block */
/* Used to display dropdowns and buttons on top of lists
   Example: press-collection.php
*/

.utility-block {
    background: #263e58;
    color: white;
    padding: 13px 15px;
}

    .utility-block .btn {
        margin-bottom: 15px;
        width: 100%;
    }

@media screen and (min-width: 992px) {
    .utility-block .btn {
        margin-bottom: 0;
        margin-left: 35px;
        width: auto;
    }
}

.utility-block .btn:first-child {
}

@media screen and (min-width: 992px) {
    .utility-block .btn:first-child {
        margin-left: 0;
    }
}



.utility-block .btn-default.btn-hollow {
}

    .utility-block .btn-default.btn-hollow:hover,
    .utility-block .btn-default.btn-hollow:focus,
    .utility-block .btn-default.btn-hollow:active {
        border-color: white;
        color: white;
    }

.utility-block .language-area {
    font-size: 14px;
    line-height: 1em;
    padding: 20px 15px 0;
    margin: 0 -15px 13px;
    text-transform: uppercase;
}

@media screen and (min-width: 992px) {
    .utility-block .language-area {
        background: #1a2b3d;
        display: inline-block;
        margin-bottom: -13px;
        margin-top: -13px;
        min-height: 65px;
        padding-bottom: 13px;
    }
}

.utility-block .language-area:first-child {
    margin-top: -13px;
}

.utility-block .language-area label,
.utility-block .language-area .label {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
}

.utility-block .language-area .dropdown {
    display: inline-block;
    line-height: 1em;
    margin-left: 10px;
    vertical-align: middle;
}

.utility-block .language-area .btn {
    background: transparent;
    border: none;
    color: #ffc72c;
    font-size: 14px;
    font-style: italic;
    font-weight: normal;
    margin-bottom: 0;
    min-width: 1px !important;
    padding: 0;
    text-transform: none;
    width: auto;
}

@media screen and (min-width: 992px) {
    .utility-block .language-area .btn {
        color: white;
    }
}

.utility-block .language-area .dropdown-toggle:after {
    color: #ffc72c;
}

.utility-block .btn {
    font-size: 14px;
}

.utility-block .text-right {
}

@media screen and (max-width: 991px) {
    .utility-block .text-right {
        text-align: left !important;
    }
}


/* Map - .map */
/* Creates a wrapper for an iframe google map
   Example: contact.php
*/

.map {
    background: #f2f2f2;
    height: 490px;
    width: 100%;
}

    .map iframe {
        border: none;
        outline: none;
    }

/* Mobile accordion - .mobile-accordion */
/* Resembles an accordion on xs, sm and md. Defaults to a list
   with arrows on lg and xl. 
   Example: contact.php
*/

.mobile-accordion {
    list-style-type: none;
    margin-top: 50px;
    padding: 0;
}

    .mobile-accordion .collapse {
    }

@media screen and (min-width: 992px) {
    .mobile-accordion .collapse,
    .mobile-accordion .collapsing {
        display: block !important;
        height: auto !important;
        position: static !important;
    }
}

.mobile-accordion > div[class^="col-"]:first-child h2,
.mobile-accordion > li:first-child h2,
.mobile-accordion > div[class^="col-"]:first-child h3,
.mobile-accordion > li:first-child h3,
.mobile-accordion > div[class^="col-"]:first-child .title,
.mobile-accordion > li:first-child .title {
    border-top: none;
}

.mobile-accordion > div[class^="col-"],
.mobile-accordion > li {
    padding-bottom: 17px;
}

.mobile-accordion h2,
.mobile-accordion h3,
.mobile-accordion .title {
    border-top: 1px solid #e3e3e3;
    color: #00ade4;
    font-size: 20px;
}

@media screen and (min-width: 992px) {
    .mobile-accordion h2,
    .mobile-accordion h3,
    .mobile-accordion .title {
        border-top: none;
    }
}

.mobile-accordion h2 a,
.mobile-accordion h3 a,
.mobile-accordion .title a {
    color: #00ade4;
    display: block;
    min-height: 41px;
    padding: 17px 20px 0 0;
    position: relative;
    text-decoration: none;
}

@media screen and (min-width: 992px) {
    .mobile-accordion h2 a,
    .mobile-accordion h3 a,
    .mobile-accordion .title a {
        display: inline-block;
        min-height: 1px;
        padding: 0;
    }
}

.mobile-accordion h2 a:hover,
.mobile-accordion h2 a:focus,
.mobile-accordion h2 a:active,
.mobile-accordion h3 a:hover,
.mobile-accordion h3 a:focus,
.mobile-accordion h3 a:active,
.mobile-accordion .title a:hover,
.mobile-accordion .title a:focus,
.mobile-accordion .title a:active {
    color: #ffc72c;
    text-decoration: none;
}

@media screen and (min-width: 992px) {
    .mobile-accordion h2 a:hover,
    .mobile-accordion h2 a:focus,
    .mobile-accordion h2 a:active,
    .mobile-accordion h3 a:hover,
    .mobile-accordion h3 a:focus,
    .mobile-accordion h3 a:active,
    .mobile-accordion .title a:hover,
    .mobile-accordion .title a:focus,
    .mobile-accordion .title a:active {
        color: #00ade4;
        cursor: default;
    }
}

.mobile-accordion h2 a:after,
.mobile-accordion h3 a:after,
.mobile-accordion .title a:after {
    content: "\f067";
    display: inline-block;
    font-family: "Font Awesome 5 Free";
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-variant: normal;
    font-weight: 900;
    line-height: 1.2;
    position: absolute;
    right: 0;
    speak: none;
    top: 20px;
    text-decoration: none !important;
    text-transform: none;
}

.mobile-accordion h2 a[aria-expanded=true]:after,
.mobile-accordion h3 a[aria-expanded=true]:after,
.mobile-accordion .title a[aria-expanded=true]:after {
    content: "\f068";
}

@media screen and (min-width: 992px) {
    .mobile-accordion h2 a[aria-expanded=true]:after,
    .mobile-accordion h3 a[aria-expanded=true]:after,
    .mobile-accordion .title a[aria-expanded=true]:after,
    .mobile-accordion h2 a:after,
    .mobile-accordion h3 a:after,
    .mobile-accordion .title a:after {
        content: "";
        display: none;
    }
}


.body-content > .mobile-accordion:last-child,
.body-content > .row > div[class^="col-"]:first-child > .mobile-accordion:last-child {
}

@media screen and (min-width: 992px) {
    .body-content > .mobile-accordion:last-child,
    .body-content > .row > div[class^="col-"]:first-child > .mobile-accordion:last-child {
        margin-bottom: 90px;
    }
}


/* Program logo - .has-program-logo */
/* Allows a background cover image to have a logo of your choosing in
   watermark-like fashion, positioned over the image tag. It's possible
   to add .container to .program-logo to fit the alignment of the website (index.php) if it's
   an element that is not already nested in a .container (like in story-simple.php).

   !important - In our setup it could cause overlap if the image is not tall enough 
   (the image is the one that provides the height and thus, overlap odds).

   If there's a setup where the background image is an actual background, we
   can prevent overlapping by adding .image-is-background to .has-program-logo.
   This will add a padding on the bottom, allowing always extra space at the bottom
   for the logo.

   Supports bootstrap's ".text-left" alignment in .program-logo

   Can add ".is-visible-xs" to .program-logo if you want to always show the logo. 
   Also ".is-visible-sm", ".is-visible-md" are available to establish minimal width to display the logo
   Default behavior is hidden in mobile.

   Example: index.php, story-simple.php
*/

.has-program-logo {
    position: relative;
}

    .has-program-logo.image-is-background {
        padding-bottom: 70px;
    }

@media screen and (min-width: 992px) {
    .has-program-logo.image-is-background {
        padding-bottom: 100px;
    }
}

.program-logo {
    bottom: 25px;
    display: none;
    pointer-events: none;
    position: absolute;
    right: 25px;
    text-align: right;
    z-index: 10;
}

@media screen and (min-width: 992px) {
    .program-logo {
        display: inline-block;
    }
}

.program-logo.text-left {
    left: 25px;
    right: auto;
}

@media screen and (min-width: 992px) {
    .program-logo {
        display: inline-block;
    }
}

.program-logo.is-visible-xs {
    display: inline-block;
}

.program-logo.is-visible-sm {
}

@media screen and (min-width: 576px) {
    .program-logo.is-visible-sm {
        display: inline-block;
    }
}

.program-logo.is-visible-md {
}

@media screen and (min-width: 768px) {
    .program-logo.is-visible-md {
        display: inline-block;
    }
}

.program-logo img {
    max-height: 40px;
}

@media screen and (min-width: 992px) {
    .program-logo img {
        max-height: 70px;
    }
}

.program-logo.container {
    left: 50%;
    margin-left: -50%;
    right: auto;
}

@media screen and (min-width: 576px) {
    .program-logo.container {
        margin-left: -270px;
    }
}

@media screen and (min-width: 768px) {
    .program-logo.container {
        margin-left: -360px;
    }
}

@media screen and (min-width: 992px) {
    .program-logo.container {
        margin-left: -480px;
    }
}

@media screen and (min-width: 1200px) {
    .program-logo.container {
        margin-left: -570px;
    }
}

.program-logo.container.text-left {
    left: 50%;
    right: auto;
}

/* Hero banner - .hero-banner */
/* Height is equal to viewport height
   Will hide overflow, default position of text is center-left
   Supports .text-left, .text-right, .text-top, .text-bottom. Remove text-top, .text-bottom to center vertically 

   Compatible with  .program-logo. It will be aligned in the mirror position of it's holder
   if .hero-banner has .text-left.text-top .program logo will align itself to the right and bottom,
   if .hero-banner has .text-right.text-bottom .program logo will align itself to the left and top.
   If you wish to align the logo to the left or right, it's still posible to use .text-right and .text-left to .program-logo
   Used in index.php
*/

.hero-banner {
    background-color: #121f2c;
    background-attachment: fixed;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    color: white;
    font-size: 15px;
    font-weight: normal;
    overflow: hidden;
    line-height: 1em;
    margin-bottom: 40px;
    position: relative;
    text-align: center;
    text-shadow: 0px 3px 5px rgba(0, 0, 0, 0.83);
}

@media screen and (min-width: 768px) {
    .hero-banner {
        font-size: 26px;
        line-height: 30px;
        margin-bottom: 77px;
    }
}

.hero-banner.text-left {
    text-align: center !important;
}

    .hero-banner.text-left .content {
        text-align: left;
    }

    .hero-banner.text-left .program-logo {
        left: auto;
        right: 25px;
        text-align: right;
    }

        .hero-banner.text-left .program-logo.container {
            left: 50%;
            right: auto;
        }

        .hero-banner.text-left .program-logo.text-left {
            left: 25px;
            right: auto;
        }

        .hero-banner.text-left .program-logo.container.text-left {
            left: 50%;
            right: auto;
            text-align: left;
        }


.hero-banner.text-right {
    text-align: center !important;
}

    .hero-banner.text-right .content {
        text-align: right;
    }

    .hero-banner.text-right .program-logo {
        left: 25px;
        right: auto;
        text-align: left;
    }

        .hero-banner.text-right .program-logo.container {
            left: 50%;
            right: auto;
        }

        .hero-banner.text-right .program-logo.text-right {
            left: auto;
            right: 25px;
        }

        .hero-banner.text-right .program-logo.container.text-right {
            left: 50%;
            right: auto;
            text-align: right;
        }

    .hero-banner.text-right .row {
        -webkit-box-pack: end !important;
        -ms-flex-pack: end !important;
        justify-content: flex-end !important;
    }

.hero-banner.text-bottom .content {
    vertical-align: bottom;
}

.hero-banner.text-top .content {
    vertical-align: top;
}

.hero-banner.text-bottom .program-logo {
    bottom: auto;
    top: 25px;
}

.hero-banner.text-center {
    align-content: center;
    text-align: center !important;
}

    .hero-banner.text-center .content {
        text-align: center;
    }

    .hero-banner.text-center .row {
        -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
        justify-content: center !important;
    }


.hero-banner .content {
    padding: 10px 0 15px;
    position: relative;
    text-align: left;
    z-index: 5;
}

.hero-banner.text-bottom .rellax.rellax-active.content {
    margin-bottom: 70px;
}

.hero-banner h1,
.hero-banner .title
.hero-banner h2.title {
    font-size: 19px;
    line-height: 24px;
    margin: 0;
    text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.25);
}

@media screen and (min-width: 768px) {
    .hero-banner h1,
    .hero-banner .title
    .hero-banner h2.title {
        font-size: 40px;
        font-weight: 700;
        line-height: 48px;
    }
}

.hero-banner .caption {
    font-style: italic;
}

.hero-banner .btn {
    text-shadow: none;
}

.hero-banner .program-logo {
    z-index: 1;
}

.hero-banner .rellax.rellax-active.program-logo {
    bottom: 75px;
}

.hero-banner.text-bottom .rellax.rellax-active.program-logo {
    bottom: auto;
}

/* Banner - .banner */
/* A block with an image that takes 100% of it's holder. 
   Supports a caption. 
   Used in /ar/index.php, with a figure element, could be used with regular divs
*/

.banner {
    font-size: 18px;
    line-height: 1.2em;
    margin: 0 0 5rem;
}

    .banner figcaption,
    .banner .caption {
        display: block;
        padding: 20px 0 0;
    }

/* Has zoom background - .has-zoom-background 
   Trigger zooming of the background image, refer to redesign.js for updating
   max-default zoom or general usage instructions.

   To add a new max zoom, include it in the div with the background via data-zoom,
   should be a percentage
   example: data-zoom="180" for 180% of max zoom
*/

.has-zoom-background {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Modal */
/* Fixes for bootstrap's modal */

.modal-header {
    border-bottom: none;
    padding-bottom: 0;
}

    .modal-header + .modal-body {
        padding-top: 0;
    }

#menuTrigger i {
   color:white;
}