/* ===============================================
=============== 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.h2, h3.h2{ 
  font-size: 20px;
  text-transform: none;
}
  @media screen and (min-width: 768px) {
    h1.h2, h3.h2 { 
      font-size: 28px;
    }
  }

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: #263e58; font-size: 30px; text-transform: initial;}

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

.link-title{}

  .link-title a{
    text-decoration: none;
    -webkit-transition: color 0.3s ease-in;
    -moz-transition: color 0.3s ease-in;
    transition: color 0.3s ease-in;
  }

  .link-title a .fa,
  .link-title a .fas{
    color: #fecb32;
    margin-left: 20px;
  }
  
/* 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;
  }


/* ---------- Layout ----------------------- */

.is-section{
  padding-bottom: 30px;
  padding-top: 30px;
}

  @media screen and (min-width: 768px) {
    .is-section{
      padding-bottom: 60px;
      padding-top: 60px;
    }    
  }

  .is-section > h2:first-child,
  .is-section > h3:first-child,
  .is-section > .title:first-child,
  .is-section > .container > h2:first-child,
  .is-section > .container > h3:first-child,
  .is-section > .container > .title:first-child{
    margin-bottom: 20px;
    margin-top: 0;
  }

    @media screen and (min-width: 768px) {
      .is-section > h2:first-child,
      .is-section > h3:first-child,
      .is-section > .title:first-child,
      .is-section > .container > h2:first-child,
      .is-section > .container > h3:first-child,
      .is-section > .container > .title:first-child{
        margin-bottom: 40px;
      }   
    }

/* 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: #263e58;
  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: #263e58;
  -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;
}

img{
  opacity: 1;
  -webkit-transition: opacity 0.3s ease-in;
  -moz-transition: opacity 0.3s ease-in;
  transition: opacity 0.3s ease-in;
}

  a:hover img,
  a:focus img,
  a:active img{
    border: none;
    opacity: 0.8;
  }


a:hover {
  color: #00ade4;
}

.arrow-link{
  color: #002f53;
  display: inline-block;
  font: 16px 'Lato', sans-serif;
  font-weight: bold;
  margin-top: 15px;
  text-decoration: none;
}
  .arrow-link:hover,
  .arrow-link:focus,
  .arrow-link:active{
    text-decoration: none;
  }

.arrow-link:after{
  content: '\f105';
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-left: 10px;
}

/*
  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.
*/
.text-secondary {
    color: #263e58 !important;
}
.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 */
    -moz-transition: opacity .3s, left 0.4s ease-in-out;
  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: 15px 0 15px;
}

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

#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 {
  color: #ffc72c;
  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;
}
.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-xs-0{}

@media screen and (max-width: 768px) {
  .mb-xs-0{
    margin-bottom: 0 !important;
  }
}

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

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

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

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

.mt-20{
  margin-top: 40px !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;
  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(/wps/wcm/connect/852159ce-b66a-44f7-9b0e-00a209365d98/geo-background.png?MOD=AJPERES);
    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(/wps/wcm/connect/e168154d-39ce-4d06-b906-8fe395e92fd5/blue-slant-background.jpg?MOD=AJPERES);
  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;
  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,
.breadcrumbs ul,
#desktop-sub-nav ul,
.desktop-sub-nav ul{
  float: left;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

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

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

#breadcrumbs,
.breadcrumbs {
  padding: 19px 0 10px;
}

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

#breadcrumbs a,
.breadcrumbs a { text-decoration: none; }

#breadcrumbs li,
.breadcrumbs li { color: #979797; }
#breadcrumbs li a,
.breadcrumbs li a { color: #00ade4; }
#breadcrumbs a:hover,
.breadcrumbs a:hover { color: #263e58; }

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


#breadcrumbs i,
.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,
.desktop-sub-nav ul {
  border-bottom: 1px solid #757575;
  border-color: rgba(117, 117, 117, .13);
  padding: 0;
  width: 100%;
}

#desktop-sub-nav li,
.desktop-sub-nav li {}

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

#desktop-sub-nav li.active a,
.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,
  .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,
  .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,
  .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,
  .desktop-sub-nav .submenu-parent > .submenu > li.active > a{
    background: #121f2c;
    color: #00ade4;
  }

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

#desktop-sub-nav li li,
.desktop-sub-nav li li{}

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

#desktop-sub-nav a,
.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,
.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,
.desktop-sub-nav .submenu .submenu-parent > a:before {
  color: #FFF;
  content: "\f0da";
}

#desktop-sub-nav .submenu,
.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,
.desktop-sub-nav .submenu li {
  position: relative;
  width: 100%;
}

#desktop-sub-nav .submenu a,
.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,
.desktop-sub-nav li:hover a, 
.desktop-sub-nav .submenu a {
  background: #263e58;
  color: #FFF;
}

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

#desktop-sub-nav .submenu-parent:hover > .submenu,
.desktop-sub-nav .submenu-parent:hover > .submenu {
  opacity: 1;
  overflow: visible;
}

#desktop-sub-nav .submenu .submenu,
.desktop-sub-nav .submenu .submenu  {
  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,
.desktop-sub-nav .submenu .submenu li, 
.desktop-sub-nav .submenu .submenu a {
  background: #121f2c;
}

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

#desktop-sub-nav .submenu .submenu-parent:hover .submenu,
.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,
.mobile-sub-nav {
  margin-bottom: 20px;
}

#mobile-sub-nav nav,
.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,
.mobile-sub-nav a {
  color: #263e58;
  font-size: 13px;
}

#mobile-sub-nav .mobile-sub-nav-toggle,
.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{}

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

#mobile-sub-nav .nav-item a,
.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,
  .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,
  .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,
  .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,
.mobile-sub-nav .nav-item ul {
  list-style: none;
  margin-bottom: 10px;
  margin-left: 15px;
  padding-left: 0;
}


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

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

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

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

  #subnav-collapse .nav > .nav-item > a:before,
  .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;
}

#story-advanced-header-mobile .styled-list a{
  border-bottom-color: #666e79;
  color: #049dce;
}
  #story-advanced-header-mobile .styled-list a:after{
    color: white;
  }


.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 (min-width: 768px) {
    .story-advanced .story-advanced-title {
      margin: 35px 0 100px;
      padding-top: 0;
    }
  }

  @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,
.story-advanced-title .story-type{
  font-size: 1rem;
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 1rem;
  text-transform: none;
}

.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,
.annual-report .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,
.annual-report #sidebar {
  background: #ebebeb;
  color: #2f2f2f;
  font-size: 14px;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 1000;
}

  .story-advanced #sidebar .button-group .btn, 
  .annual-report #sidebar.button-group .btn{
    width: 100%;
  }

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

.story-advanced #sidebar > a:before,
.annual-report #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,
.annual-report #sidebar > a.collapsed:before {
  content: '\f077';
}

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

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

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

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

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

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

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

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

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


.story-advanced .body-copy .containers,
.annual-report .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;
}

.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;
    }
  }

.story-advanced .a2a-main .a2a_kit,
.story-advanced.annual-report .a2a-main .a2a_kit,
.annual-report .a2a-main .a2a_kit{}
  
  @media (min-width: 768px) {
    .story-advanced .a2a-main .a2a_kit,
    .story-advanced.annual-report .a2a-main .a2a_kit,
    .annual-report .a2a-main .a2a_kit{
      margin: 55px 0 0;
    }
  }

.annual-report .a2a-main .a2a_kit{}
  
  @media (min-width: 768px) {
    .annual-report .a2a-main .a2a_kit{
      margin: 55px 0 0;
    }
  }

.story-advanced .story-simple-inner .a2a-main .a2a_kit,
.story-advanced.annual-report .story-simple-inner .a2a-main .a2a_kit{}

  @media (min-width: 768px) {
    .story-advanced .story-simple-inner .a2a-main .a2a_kit,
    .story-advanced.annual-report .story-simple-inner .a2a-main .a2a_kit{
      margin: 20px 0 0;
    }
  }

.annual-report-home .a2a-main .a2a_kit{}

  @media (min-width: 768px) {
    .annual-report-home .a2a-main .a2a_kit{
      margin: 95px 0 0;
    }
  }

.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 .annual-report .a2a-main,
  .ie-11 .annual-report .a2a-main{}

      .ie-10 .story-advanced .a2a-main,
      .ie-11 .story-advanced .a2a-main,
      .ie-10 .annual-report .a2a-main,
      .ie-11 .annual-report .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,
      .ie-10 .annual-report .a2a-main.fixed,
      .ie-11 .annual-report .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,
      .ie-10 .annual-report .a2a-main.static,
      .ie-11 .annual-report .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,
.annual-report .a2a-main .subtitle{}

  @media (min-width: 768px) { 
    .story-advanced .a2a-main .subtitle,
    .annual-report .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,
  #page-content.annual-report {
    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 #sidebar #sidebar-inner,
  .annual-report #sidebar #sidebar-inner {
    width: 75%;
  }
}

@media screen and (min-width: 1200px) {
  /* Destop */
  .story-advanced #sidebar,
  .annual-report #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,
  .annual-report #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,
  .annual-report #sidebar .header {
    border-top: 10px solid #ffc72c;
    color: #ffc72c;
    font-size: 18px;
    text-transform: none;
    font-weight: bold;
    margin: 0;
    padding: 30px 0 0;
  }

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

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

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

}

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

.sidebar-item {
  background: #f4f4f4;
  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: 0; }

.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: #f4f4f4;
  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;
  }
  .no-design > a {
	  text-decoration: none;
  }

  @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;
  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 .subhead {
  color: #00ade4;
  font-size: 13px;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.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: #f4f4f4;
  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.5;
  margin-bottom: 10px;
  text-transform: none;
}

  .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.5;
  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.5;
  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: #f4f4f4;
  border-top: 6px solid #00ade4;
  color: #2f2f2f;
  font-size: 16px;
  margin-left: -15px;
  margin-right: -15px;
  margin-top: 40px;
  padding: 25px;
}
.focus-links-withoutunderline{
  background: #f4f4f4;
  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;
    }
	.focus-links-withoutunderline{
      margin-left: 0;
      margin-right: 0;
    }
  }

  @media screen and (min-width: 768px) {
    .focus-links{
      background: transparent;
      border-top: none;
      padding: 0;
    }
	.focus-links-withoutunderline{
      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: 90px;
    }
  }

.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 
   
   Supports .has-breadcrumbs (as seen in annual report results), this adds gradient in the background and
   and also allows the launch of a script that aligns the content correctly.

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

.hero-banner .read-more-hint{
  display: none;
}

  @media screen and (min-width: 768px) {
    .hero-banner .read-more-hint{
      bottom: 35px;
      display: inline-block;
      font-size: 75px;
      left: 50%;
      margin-left: -34px;
      opacity: 1;
      position: absolute;
    }
  }

 /* Has breadcrums - as seen in annual-report-results.php */ 

.hero-banner.has-breadcrumbs{
  font-size: 18px;
  letter-spacing: 0.03em;
}

  .hero-banner.has-breadcrumbs:before{
    background: rgba(0,0,0,0.2);
    content: "";
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
  }

  .hero-banner.has-breadcrumbs:after{  
    background: linear-gradient(rgba(0,0,0,.75) 0%, rgba(0,0,0,.4) 25%, rgba(0,0,0,.2) 50%, transparent);
    content: "";
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
  }

  .hero-banner.has-breadcrumbs h1,
  .hero-banner.has-breadcrumbs .h1,
  .hero-banner.has-breadcrumbs .title,
  .hero-banner.has-breadcrumbs h2.title{
    border-bottom: none;
    color: white;
    font-family: 'Minion Pro', serif;
    font-size: 34px;
    font-weight: normal;
    margin-bottom: 35px;
    text-transform: none;
  }

  .hero-banner.has-breadcrumbs .container{
    position: relative;
    z-index: 5;
  }

  .hero-banner.has-breadcrumbs #breadcrumbs li,
  .hero-banner.has-breadcrumbs #breadcrumbs li a { color: #ffc72c; }
  .hero-banner.has-breadcrumbs #breadcrumbs a:hover { color: #00ade4; }
 

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

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

/* ===============================================
================= ANNUAL REPORT  =================
=============================================== */

.annual-report-home .story-advanced .story-advanced-title{
  padding-top: 5px;
}

  @media screen and (min-width: 768px) {
    .annual-report-home .story-advanced .story-advanced-title{
      padding-top: 35px;
    }
  }

.story-advanced.annual-report .story-advanced-title{
  margin-bottom: 40px;
  padding-top: 0;
}

  @media screen and (min-width: 768px) {
    .story-advanced.annual-report .story-advanced-title{
      margin-bottom: 100px;
      padding-top: 35px;
    }
  }

.annual-report-inner {
  color: #535353;
  position: relative;
}

  .annual-report-inner h2,
  .annual-report-inner .title{
    color: #2c435c;
    font-size: 20px;
    margin-bottom: 30px;
    text-transform: none;
  }

    @media screen and (min-width: 768px) {
      .annual-report-inner h2,
      .annual-report-inner .title{
        font-size: 35px;
      }
    }
    
    .annual-report-inner h2:first-child,
    .annual-report-inner .title:first-child{
      margin-top: 0;
    }

  .annual-report-inner h3,
  .annual-report-inner .subtitle{
    color: #2c435c;
    font-size: 23px;
    text-transform: none;
  }

    @media screen and (min-width: 768px) {
      .annual-report-inner h2,
      .annual-report-inner .title{
        font-size: 28px;
      }
    }

  .annual-report-inner p + h2,
  .annual-report-inner p + .title,
  .annual-report-inner p + h3,
  .annual-report-inner p + .subtitle{
    margin-top: 70px;
  }

.annual-report-inner > div:not(#sidebar){
  margin-bottom: 1.2em;
}

  .annual-report-inner > div:not(#sidebar):last-child{
    margin-bottom: 0 ;
  }

.annual-report-inner p, 
.annual-report-inner blockquote, 
.annual-report-inner .youtube-player, 
.annual-report-inner .tube, 
.annual-report-inner .row.margin{
  margin-bottom: 1.2em;
}

  .annual-report .hero-banner{
    margin-bottom: 0;
  }

  .annual-report .hero-banner .regional-list,
  .annual-report .hero-banner p{
    font-weight: bold;
  }
  .annual-report .hero-banner p{}
    @media screen and (min-width: 768px) {
      .annual-report .hero-banner p{
        font-size: 20px;
      }
    }
  
  .annual-report p{
    margin-bottom: 35px;
  }

/* Sidebar */

.annual-report #sidebar {}

  @media screen and (min-width: 1200px) {
    /* Desktop */
        
    .annual-report #sidebar,
    .annual-report-home #sidebar,
    .annual-report-home .story-advanced #sidebar{
      width: 220px
    }
  }


.annual-report #sidebar #sidebar-inner,
.annual-report-home  #sidebar #sidebar-inner,
.annual-report-home .story-advanced #sidebar #sidebar-inner{
  width: 100%;
}

.annual-report #sidebar .header,
.annual-report-home #sidebar .header,
.annual-report-home .story-advanced #sidebar .header{
  font-size: 17px;
}

.annual-report #sidebar .btn,
.annual-report-home #sidebar .btn,
.annual-report-home .story-advanced #sidebar .btn{
  font-size: 13px;
}

.stories-block {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: #FFF;
  margin-top: 4.2839657%;
  padding: 25px 0 100px;
}
  
  .stories-block h1,
  .stories-block .h1 {
    border-bottom: none;
    font-family: 'Minion Pro', serif;
    font-size: 28px;
    font-weight: normal;
    text-transform: none;
  }


  @media screen and (min-width: 768px) {
    .stories-block h1,
    .stories-block .h1 {
      font-size: 50px;
    }
  }

  .stories-block .media-list h3,
  .stories-block .media-list h4,
  .stories-block .media-list .title {
    color: #FFF;
    font-size: 15px;
    text-transform: none;
    margin-bottom: 15px;
    min-height: 0;
  }

  .stories-block .media-list .subhead {
    margin-bottom: 5px;
  }

  .stories-block .media-list .content {
    color: #FFF;
    font-size: 14px;
    margin-bottom: 35px;
    max-height: auto;
    overflow: initial;
  }

/* Has header stories - .has-header-stories
   Adds minimal height to story advanced banner to add space for 
   hightlighted stories.
*/

.has-header-stories{} 

  @media screen and (min-width: 992px) {    
    .has-header-stories{
      min-height: 700px;
    } 
  }


  @media screen and (min-width: 1px) and (max-width: 991px) {    
    .has-header-stories{
      height: auto !important;
    } 
  }
  
  .has-header-stories .container{}

    @media screen and (min-width: 992px) {    
      .has-header-stories .container{
        min-height: 700px;
      } 
    }

.has-header-stories .story-type{
  font-size: 26px;
}

.has-header-stories .story-advanced-title{
  text-shadow: 2px 2px 2px rgba(0,0,0, .4);
}
  
/* Header stories - .header-stories
   Adds columns with highlighted stories at the bottom of the story advanced banner
*/

.header-stories {
  padding-bottom: 43px;
  text-shadow: 2px 2px 2px rgba(0,0,0, .4);
  width: 100%;
}

  @media screen and (min-width: 992px) {    
    .header-stories {
      bottom: 43px;
      padding-bottom: 0;
      position: absolute;
    }
  }
  .header-stories .header-story{
    font-size: 17px;
    padding: 10px 20px;
    position: relative;
    text-align: left;
  }
  

    .header-stories .header-story:before,
    .header-stories .header-story:after{
      content: "";
      display: block;
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
      z-index: 1;
    }


    .header-stories .header-story:before{
      background: linear-gradient(rgba(0,0,0,.45) 0%, rgba(0,0,0,.4) 25%, rgba(0,0,0,.2) 50%, transparent);
    }

    .header-stories .header-story:after{
      background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6-15 */
      background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10-25,Safari5.1-6 */
      background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    }


    .header-story .subhead {
      color: #ffc72c;
      font-size: 20px;
      font-weight: bold;
    }

    .header-story .content {
      margin-bottom: 1.2em;
    }

      @media screen and (min-width: 992px) {    
        .header-story .content {
          min-height: 153px;
        }
      }

    .header-story .wrapper{
      position: relative;
      z-index: 3;
    }

  .header-stories .btn{
    text-shadow: none;
  }

  .header-stories a:not(.btn){
    color: white;
    font-weight: bold;
    text-decoration: underline;
  }

  .header-stories a:hover:not(.btn),
  .header-stories a:focus:not(.btn),
  .header-stories a:active:not(.btn){
    color: #00ade4;
  }
/* Pattern background - .pattern-background
   Adds pattern background
*/

.pattern-background{
  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;
  background-repeat: repeat;
  color: white;
  margin-bottom: 40px;
  padding: 30px 0;
}

  @media screen and (min-width: 768px) {    
    .pattern-background{
      padding: 60px 0;
    }
  }

  .pattern-background > h2,
  .pattern-background > h3,
  .pattern-background > .container > h2,
  .pattern-background > .container > h3{
    color: white;
    font-size: 25px;
  }

  @media screen and (min-width: 768px) {    
    .pattern-background > h2,
    .pattern-background > h3,
    .pattern-background > .container > h2,
    .pattern-background > .container > h3{
      font-size: 30px;
    }
  }
  

.story-advanced >  .pattern-background:last-child,
.body-content > .pattern-background:last-child{
  margin-bottom: 0;
}

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

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


/* Perspective notes - .perspective-notes
   Adds columns with highlighted stories at the bottom of the story advanced banner
*/

.perspective-notes{
  color: white;
  font-size: 15px;
  list-style-type: none;
  overflow: hidden;
  padding: 0;
  position: relative;
}

.perspective-notes div[class^="col-"],
.perspective-notes li[class^="col-"]{
  margin-bottom: 40px;
}

  @media screen and (min-width: 992px) {    
    .perspective-notes div[class^="col-"],
    .perspective-notes li[class^="col-"]{
      margin-bottom: 0;
    }
  }

.perspective-notes .wrapper{
  position: relative;
}

.perspective-notes img{
  max-height: 383px;
  position: relative;
  width: 100%;
  z-index: 1;
}

.perspective-notes .content{
  background: #263e58;
  padding: 0;
  position: relative;
  z-index: 5;
}
  @media screen and (min-width: 576px) {    
    .perspective-notes .content{
      padding: 40px 20px 20px;
    }
  }
  .perspective-notes .content:before{
    background: -moz-linear-gradient(top, rgba(38,62,88,0) 0%, rgba(38,62,88,0) 25%, rgba(38,62,88,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(38,62,88,0) 0%,rgba(38,62,88,0) 25%,rgba(38,62,88,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(38,62,88,0) 0%,rgba(38,62,88,0) 25%,rgba(38,62,88,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    content: "";
    display: block;
    height: 100px;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: -100px;
    width: 100%;
    z-index: 3;
  }


  .perspective-notes .content p{
    min-height: 90px;
  }

.perspective-notes h3,
.perspective-notes .title{
  color: white;
  font-family: 'Minion Pro', serif;
  font-size: 19px;
  font-weight: 600;
}

  .perspective-notes h3 a,
  .perspective-notes .title a{
    color: white;
    display: block;
    padding: 10px 20px 15px;
    text-decoration: none;
  }

    @media screen and (min-width: 576px) {    
      .perspective-notes h3 a,
      .perspective-notes .title a{
        padding: 0;
      }
    }

    .perspective-notes h3 a:hover,
    .perspective-notes h3 a:focus,
    .perspective-notes h3 a:active,
    .perspective-notes .title a:hover,
    .perspective-notes .title a:focus,
    .perspective-notes .title a:active{
      text-decoration: underline;
    }

    .perspective-notes h3 a em,
    .perspective-notes .title a em{
      color: #ffc72c;
    }

      .perspective-notes h3 a:hover em,
      .perspective-notes h3 a:focus em,
      .perspective-notes h3 a:active em,
      .perspective-notes .title a:hover em,
      .perspective-notes .title a:focus em,
      .perspective-notes .title a:active em{
        color: #ffd152;
      }

    

  .perspective-notes h3 em,
  .perspective-notes .title em{
    color: #ffc72c;
    font-style: italic;
  }


/* Statistics list - .statistics-list
   As used in annual-report-home.php, 
*/

.statistics-list{
  color: #00b7f0;
  font-size: 13px;
  list-style-type: none;
  margin: 0;
  padding: 20px 0 0;
  text-align: center;
}

  @media screen and (min-width: 768px) {    
    .statistics-list{
      margin-bottom: 30px;
    }
  }

.statistics-list li,
.statistics-list > div[class^="col-"]{
  margin-bottom: 30px;
}

  @media screen and (min-width: 768px) {    
    .statistics-list li,
    .statistics-list > div[class^="col-"]{
      margin-bottom: 0;
    }
  }

.statistics-list .number{
  color: white;
  display: block;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5em;
  margin-bottom: 0;
  text-transform: uppercase;
}

.statistics-list .number em{
  display: block;
  font-size: 36px;
  font-style: normal;
  font-weight: bold;
}


/* Related links sidebar - .related-links-sidebar
   As used in annual-report-home.php, 
*/
.related-links-sidebar{
  position: fixed;
  right: 0;
  top: 40px;
}

  .related-links-sidebar ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

/* Tools block - .tools-block
*/
.tools-block{
  list-style-type: none;
  margin: 0;
  padding: 0;
}
  .tools-block li{
    margin-bottom: 20px;
  }

    @media screen and (min-width: 768px) {    
      .tools-block li{
        display: inline-block;
        margin-left: 20px;
      }
    }

  .tools-block li:first-child{}

      @media screen and (min-width: 768px) {    
        .tools-block li:first-child{
          margin-left: 0;
        }
      }

.tools-block a,
.tools-block button{
  display: block;
  vertical-align: top;
}

/* Regional list  - .regional-list
   As seen in  /annual-report-results.php
*/
.regional-list{
  color: #ffc72c;
  display: flex;
  font-size: 20px;
  justify-content: space-evenly;
  letter-spacing: 0.03em;
  list-style-type: none;
  margin: 20px 0 0;
  padding: 0;
  text-align: center;
}


.regional-list a{
  color: #ffc72c;
  display: block;
  padding: 0 0 18px;
  text-decoration: none;
}

.regional-list a:hover, 
.regional-list a:focus, 
.regional-list a:active{
  color: #00b2ef;
  text-decoration: none;
}

/* Figures 
  Styles for tables and charts 
  As seen in  /annual-report-results.php
*/
figure{
  margin-bottom: 55px;
}

.has-chart{
  overflow-x: auto;
  width: 100%;
}
  .has-chart canvas{
    height: 400px;
    width: 100%;
  }

.fig-notation{
  font-size: 12px;
  font-weight: normal;
}
.fig-notation em{
  font-style: italic;
  font-weight: bold;
}
.fig-notation p{
  margin: 0;
}

.fig-title{
  color: #2c435c;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 25px;
  text-transform: none;
}

  @media screen and (min-width: 768px) {    
    .fig-title {
      font-size: 20px;
      margin-bottom: 40px;
    }
  }

.has-chart{
  position: relative;
  text-align: center;
}
.has-chart .overlay-data {
  left: 170px;
  position: absolute;
  top: 30px;
  z-index: 100;
  }

.has-chart .overlay-data p {
  color: #333333;
  clear: left;
  display: block;
  float: left;
  font-family: Arial;
  font-size: 12px;
  line-height: 10px;
  margin-bottom: 62px;
  margin-top: -1px;
}

.has-chart .overlay-data .bottom {
  position: absolute;
  top: 35px;
  left: 0;
}

.chart-holder{
  display: inline-block;
  position: relative;
  text-align: left;
}

.chart-holder .highcharts-yaxis-labels text{
  -moz-transform: translate(-7px, 0);
  -webkit-transform: translate(-7px, 0);
  -o-transform: translate(-7px, 0);
  -ms-transform: translate(-7px, 0);
  transform: translate(-7px, 0);
}

.chart-holder .highcharts-yaxis-labels text:first-child{
  -moz-transform: translate(-3px, 0);
  -webkit-transform: translate(-3px, 0);
  -o-transform: translate(-3px, 0);
  -ms-transform: translate(-3px, 0);
  transform: translate(-3px, 0);
}

.chart-holder .highcharts-yaxis-labels text:last-child{
  -moz-transform: translate(-13px, 0);
  -webkit-transform: translate(-13px, 0);
  -o-transform: translate(-13px, 0);
  -ms-transform: translate(-13px, 0);
  transform: translate(-13px, 0);
}

.table{
  color: #516275;
  font-size: 16px;
}

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

#page-content.story-advanced .table,
#page-content.annual-report .table{
  font-size: 16px;
}

  @media screen and (min-width: 768px) {    
    #page-content.story-advanced .table,
    #page-content.annual-report .table{
      font-size: 18px;
    }
  }

.table thead th, .table thead td{
  border-top: none;
}

.table .no-top-border th,
.table .no-top-border td {
  border-top: none;
}

.table th{
  font-weight: normal;
}

.table .highlight{
  font-weight: bold;
}

.table .is-nested{
  font-size: 90%;
}
.table .is-nested th:first-child, 
.table .is-nested td:first-child{
  padding-left: 40px;
}

/* Collapsible sidebar
   As seen in  /annual-report-results.php
*/
.collapsible-sidebar, 
#collapsible-sidebar{
  bottom: 0;
  display: block;
  font-size: 14px;
  left: 0;
  margin: 0;
  margin-bottom: 0 !important; 
  overflow: hidden;
  position: fixed;
  width: 100%;
  z-index: 1200;
}
  @media screen and (min-width: 1200px) {    
    .collapsible-sidebar, 
    #collapsible-sidebar {
      display: flex;
      left: auto;
      position: absolute;
      right: 0;
      top: 0;
      width: 235px;
    }
  }

  @media screen and (min-width: 1200px) {
    .collapsible-sidebar > div,
    #collapsible-sidebar > div{
      position: absolute;
      top: 57px;
      -webkit-transition: top 0;
      -moz-transition: top 0;
      transition: top 0;
    }
  }

  .collapsible-sidebar.is-fixed > div, 
  #collapsible-sidebar.is-fixed > div{
    position: static;
    width: 100%;
  }

    @media screen and (min-width: 1200px) {
      .collapsible-sidebar.is-fixed > div, 
      #collapsible-sidebar.is-fixed > div{
        bottom: auto;
        height: 100%;
        left: auto;
        position: fixed;
        right: 0;
        top: 183px;
        width: 235px;
      }
    }


  .collapsible-sidebar.is-collapsed, 
  #collapsible-sidebar.is-collapsed{}

    @media screen and (min-width: 1200px) {
      .collapsible-sidebar.is-collapsed, 
      #collapsible-sidebar.is-collapsed{
        pointer-events: none;
      }
    }

  .collapsible-sidebar .wrapper, 
  #collapsible-sidebar .wrapper{
    background: #ebebeb;
    color: #535353;
    opacity: 1;
    overflow-y: auto;
    max-height: calc(100vh - 41px);
    position: relative;
    right: 0;
    width: 100%;
    z-index: 5;
  }
    @media screen and (max-width: 1199px) {
      .collapsible-sidebar .wrapper, 
      #collapsible-sidebar .wrapper{
        -webkit-transition: opacity 0.3s, right 0.3s, height 0.3s;
        -moz-transition: opacity 0.3s, right 0.3s, height 0.3s;
        transition: opacity 0.3s, right 0.3s, height 0.3s;
      }
    }

    @media screen and (min-width: 1200px) {
      .collapsible-sidebar .wrapper, 
      #collapsible-sidebar .wrapper{
        background: rgba(38,62,88,.9);
        color: white;
        overflow-y: hidden;
        -webkit-transition: opacity 0.3s, right 0.3s;
        -moz-transition: opacity 0.3s, right 0.3s;
        transition: opacity 0.3s, right 0.3s;
      }
    }
  
  .collapsible-sidebar .content, 
  #collapsible-sidebar .content{
    margin: 0 auto;
    max-width: 500px;
    padding: 20px 16px 25px;
    padding: 20px 1rem 25px;
  }

    @media screen and (min-width: 1200px) {
      .collapsible-sidebar .content, 
      #collapsible-sidebar .content{
        margin: 0;
        max-width: 100%;
        padding: 0 16px 25px;
        padding: 0 1rem 25px;
      }
    }

  .collapsible-sidebar .tab, 
  #collapsible-sidebar .tab{
    background: #00ade4;
    border: none;
    color: white;
    padding: 10px 6px;
    position: static;
    right: -86px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    top: 75px;
    -webkit-transition: opacity 0.3s, right 0.3s;
    -moz-transition: opacity 0.3s, right 0.3s;
    transition: opacity 0.3s, right 0.3s;
    width: 100%;
    z-index: 1;
  }

    @media screen and (min-width: 1200px) {
      .collapsible-sidebar .tab, 
      #collapsible-sidebar .tab{
        background: #263e58;
        border: 4px solid #fecb32;
        border-right-width: 0;
        opacity: 0;
        position: absolute;
        width: 86px;
      }
    }

    .collapsible-sidebar .tab:hover,
    .collapsible-sidebar .tab:focus,
    #collapsible-sidebar .tab:hover,
    #collapsible-sidebar .tab:focus{
      background: #049dce;
      cursor: pointer;
    }
      @media screen and (min-width: 1200px) {
        .collapsible-sidebar .tab:hover,
        .collapsible-sidebar .tab:focus,
        #collapsible-sidebar .tab:hover,
        #collapsible-sidebar .tab:focus{
          background: #20354b;
        }
      }

    .collapsible-sidebar.is-collapsed .tab, 
    #collapsible-sidebar.is-collapsed .tab{
      pointer-events: all;
    }

    .collapsible-sidebar .tab .fas, 
    #collapsible-sidebar .tab .fas{
      font-size: 18px;
      margin-right: 5px;
      text-transform: none;
    }

      @media screen and (min-width: 1200px) {
        .collapsible-sidebar .tab .fas, 
        #collapsible-sidebar .tab .fas{
          display: block;
          margin-bottom: 5px;
          margin-right: 0;
        }
      }

    .collapsible-sidebar .tab .fa-download,
    #collapsible-sidebar .tab .fa-download{}

    @media screen and (max-width: 1199px){
      .collapsible-sidebar .tab .fas.fa-download:before,
      #collapsible-sidebar .tab .fas.fa-download:before{
        content: '\f078';
      }
    }

    .collapsible-sidebar.is-collapsed .tab .fas.fa-download,
    #collapsible-sidebar.is-collapsed .tab .fas.fa-download{}

    @media screen and (max-width: 1199px){
      .collapsible-sidebar.is-collapsed .tab .fas.fa-download:before,
      #collapsible-sidebar.is-collapsed .tab .fas.fa-download:before{
        content: '\f077';
      }
    }

  .collapsible-sidebar .header,
  #collapsible-sidebar .header{
    color: #263e58;
    font-size: 17px;
    font-weight: bold;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
  }

    @media screen and (min-width: 1200px) {
      .collapsible-sidebar .header,
      #collapsible-sidebar .header{
        border-top: 10px solid #ffc72c;
        color: #ffc72c;
        padding: 30px 0 0;
      }
    }

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

  .collapsible-sidebar a:not(.btn), 
  #collapsible-sidebar a:not(.btn){
    color: #535353;
    display: inline-block;
    line-height: 1.2em;
    text-decoration: underline;
  }
    @media screen and (min-width: 1200px) {
      .collapsible-sidebar a:not(.btn), 
      #collapsible-sidebar a:not(.btn){
        color: white;
        text-decoration: none;
      }
    }

  .collapsible-sidebar a:not(.btn):hover, 
  .collapsible-sidebar a:not(.btn):focus,
  .collapsible-sidebar a:not(.btn):active,
  #collapsible-sidebar a:not(.btn):hover, 
  #collapsible-sidebar a:not(.btn):focus,
  #collapsible-sidebar a:not(.btn):active{
    color: #263e58;
    text-decoration: underline;
  }
    @media screen and (min-width: 1200px) {
      .collapsible-sidebar a:not(.btn):hover, 
      .collapsible-sidebar a:not(.btn):focus,
      .collapsible-sidebar a:not(.btn):active,
      #collapsible-sidebar a:not(.btn):hover, 
      #collapsible-sidebar a:not(.btn):focus,
      #collapsible-sidebar a:not(.btn):active{
        color: white;
      }
    }

  .collapsible-sidebar.is-collapsed, 
  #collapsible-sidebar.is-collapsed{}

    .collapsible-sidebar.is-collapsed .wrapper, 
    #collapsible-sidebar.is-collapsed .wrapper{
      overflow-y: hidden;
      padding: 0;
    }

      @media screen and (max-width: 1200px) {
        .collapsible-sidebar.is-collapsed .wrapper, 
        #collapsible-sidebar.is-collapsed .wrapper{
          height: 0;
        }
      }

      @media screen and (min-width: 1200px) {
        .collapsible-sidebar.is-collapsed .wrapper, 
        #collapsible-sidebar.is-collapsed .wrapper{
          opacity: 0;
          pointer-events: none;
          right: -100%;
        }
      }

    .collapsible-sidebar.is-collapsed .tab, 
    #collapsible-sidebar.is-collapsed .tab{}

      @media screen and (min-width: 1200px) {
        .collapsible-sidebar.is-collapsed .tab, 
        #collapsible-sidebar.is-collapsed .tab{
          opacity: 1;
          right: 0;
        }
      }

  .collapsible-sidebar .btn-default,
  #collapsible-sidebar .btn-default{
    color: white;
  }

  .collapsible-sidebar .btn-white.btn-hollow,
  #collapsible-sidebar .btn-white.btn-hollow{}

    @media screen and (max-width: 1199px){
      .collapsible-sidebar .btn-white.btn-hollow,
      #collapsible-sidebar .btn-white.btn-hollow{
        border-color: #263e58;
        color: #263e58;
      }
    }

    .collapsible-sidebar .btn-white.btn-hollow:hover,
    .collapsible-sidebar .btn-white.btn-hollow:focus,
    .collapsible-sidebar .btn-white.btn-hollow:active,
    #collapsible-sidebar .btn-white.btn-hollow:hover,
    #collapsible-sidebar .btn-white.btn-hollow:focus,
    #collapsible-sidebar .btn-white.btn-hollow:active{}
    
      @media screen and (max-width: 1199px){
        .collapsible-sidebar .btn-white.btn-hollow:hover,
        .collapsible-sidebar .btn-white.btn-hollow:focus,
        .collapsible-sidebar .btn-white.btn-hollow:active,
        #collapsible-sidebar .btn-white.btn-hollow:hover,
        #collapsible-sidebar .btn-white.btn-hollow:focus,
        #collapsible-sidebar .btn-white.btn-hollow:active{
          background-color: #263e58;
          color: white;
        }
      }

  .collapsible-sidebar .button-group .btn, 
  #collapsible-sidebar .button-group .btn{
    font-size: 15px;
    width: 100%;
  }

  .collapsible-sidebar .close-sidebar,
  #collapsible-sidebar .close-sidebar{
    display: none;
    font-size: 17px;
    font-weight: bold;
    margin-top: 20px;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
  }

    .collapsible-sidebar a.close-sidebar,
    #collapsible-sidebar a.close-sidebar{
      display: none;
    }

    @media screen and (min-width: 1200px){
      .collapsible-sidebar a.close-sidebar, 
      #collapsible-sidebar a.close-sidebar{
        display: block;
      }
    }

    .collapsible-sidebar a.close-sidebar:hover,
    .collapsible-sidebar a.close-sidebar:focus,
    .collapsible-sidebar a.close-sidebar:active,
    #collapsible-sidebar a.close-sidebar:hover,
    #collapsible-sidebar a.close-sidebar:focus,
    #collapsible-sidebar a.close-sidebar:active{
      color: #ffc72c;
      text-decoration: none;
    }

    .collapsible-sidebar .close-sidebar .fas,
    #collapsible-sidebar .close-sidebar .fas{
      margin-right: 5px;
    }

      @media screen and (min-width: 1200px){
        .collapsible-sidebar .close-sidebar .fas, 
        #collapsible-sidebar .close-sidebar .fas{
          margin-left: 10px;
        }
      }

/* Bottom Collapsible bar
   As seen in  /annual-report-home.php
   If you don't want an icon in the CTA add .no-icon to remove them from
   the header area. 
   Create custom icons by adding a class and tweaking the value of
   the before value, follow the sample of .has-custom-icon 
   (.bottom-collapsible-bar.has-custom-icon) to create your own icons if
   you don't wan't to modify the defaults or if you want more than one.
   To choose your icons get the values from https://fontawesome.com/cheatsheet
*/
.bottom-collapsible-bar,
#bottom-collapsible-bar{
  bottom: 0;
  color: white;
  display: block;
  font-size: 14px;
  left: 0;
  margin-bottom: 0 !important;
  position: fixed;
  width: 100%;
  z-index: 1000;
}


  @media screen and (min-width: 768px) {    
    .bottom-collapsible-bar,
    #bottom-collapsible-bar{
      border: 4px solid #fecb32;
      border-bottom-width: 0;
      left: auto;
      right: 20px;
      width: 250px;
    }
  }

  .bottom-collapsible-bar h3,
  .bottom-collapsible-bar h4,
  .bottom-collapsible-bar .header,
  #bottom-collapsible-bar h3,
  #bottom-collapsible-bar h4,
  #bottom-collapsible-bar .header{
    background: #00ade4;
    color: white;
    font-size: 15px;
    font-weight: bold;
    margin: 0;
    padding: 10px 30px 10px 10px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
  }

    @media screen and (min-width: 768px) {
      .bottom-collapsible-bar h3,
      .bottom-collapsible-bar h4,
      .bottom-collapsible-bar .header,
      #bottom-collapsible-bar h3,
      #bottom-collapsible-bar h4,
      #bottom-collapsible-bar .header{
        background: #263e58;
      }
    }

    .bottom-collapsible-bar h3:hover,
    .bottom-collapsible-bar h3:focus,
    .bottom-collapsible-bar h4:hover,
    .bottom-collapsible-bar h4:focus,
    .bottom-collapsible-bar .header:hover,
    .bottom-collapsible-bar .header:focus,
    #bottom-collapsible-bar h3:hover,
    #bottom-collapsible-bar h3:focus,
    #bottom-collapsible-bar h4:hover,
    #bottom-collapsible-bar h4:focus,
    #bottom-collapsible-bar .header:hover,
    #bottom-collapsible-bar .header:focus{
      background: #049dce;
      cursor: pointer;
    }

      @media screen and (min-width: 768px) {
        .bottom-collapsible-bar h3:hover,
        .bottom-collapsible-bar h3:focus,
        .bottom-collapsible-bar h4:hover,
        .bottom-collapsible-bar h4:focus,
        .bottom-collapsible-bar .header:hover,
        .bottom-collapsible-bar .header:focus,
        #bottom-collapsible-bar h3:hover,
        #bottom-collapsible-bar h3:focus,
        #bottom-collapsible-bar h4:hover,
        #bottom-collapsible-bar h4:focus,
        #bottom-collapsible-bar .header:hover,
        #bottom-collapsible-bar .header:focus{
          background: #20354b;
        }
      }

      .bottom-collapsible-bar h3:before,
      .bottom-collapsible-bar h4:before,
      .bottom-collapsible-bar .header:before,
      #bottom-collapsible-bar h3:before,
      #bottom-collapsible-bar h4:before,
      #bottom-collapsible-bar .header:before{
        color: white;
        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;
      }
      
      .bottom-collapsible-bar.is-collapsed h3:before,
      .bottom-collapsible-bar.is-collapsed h4:before,
      .bottom-collapsible-bar.is-collapsed .header:before,
      #bottom-collapsible-bar.is-collapsed h3:before,
      #bottom-collapsible-bar.is-collapsed h4:before,
      #bottom-collapsible-bar.is-collapsed .header:before{
        content: '\f077';
      }
    
  .bottom-collapsible-bar p,
  #bottom-collapsible-bar p{
    margin-bottom: 0.5em;
  }

  .bottom-collapsible-bar p:last-child,
  #bottom-collapsible-bar p:last-child{
    margin-bottom: 0;
  }

  .bottom-collapsible-bar a:not(.btn),
  #bottom-collapsible-bar a:not(.btn){
    color: #263e58;
    text-decoration: underline;
  }

    @media screen and (min-width: 768px){
      .bottom-collapsible-bar a:not(.btn),
      #bottom-collapsible-bar a:not(.btn){
        color: #fecb32;
      }
    }

    .bottom-collapsible-bar a:not(.btn):hover,
    .bottom-collapsible-bar a:not(.btn):focus,
    .bottom-collapsible-bar a:not(.btn):active,
    #bottom-collapsible-bar a:not(.btn):hover,
    #bottom-collapsible-bar a:not(.btn):focus,
    #bottom-collapsible-bar a:not(.btn):active{
      color: #263e58;
    }
    
      @media screen and (min-width: 768px){
        .bottom-collapsible-bar a:not(.btn):hover,
        .bottom-collapsible-bar a:not(.btn):focus,
        .bottom-collapsible-bar a:not(.btn):active,
        #bottom-collapsible-bar a:not(.btn):hover,
        #bottom-collapsible-bar a:not(.btn):focus,
        #bottom-collapsible-bar a:not(.btn):active{
          color: #fecb32;
          text-decoration: none;
        }
      }

  .bottom-collapsible-bar.text-left,
  #bottom-collapsible-bar.text-left{}

    @media screen and (min-width: 768px) {    
      .bottom-collapsible-bar.text-left,
      #bottom-collapsible-bar.text-left{
        left: 50px;
        right: auto;
      }
    }

  .bottom-collapsible-bar .content,
  #bottom-collapsible-bar .content{
    background: #ebebeb;
    color: #535353;
    height: 0;
    max-height: calc(-38px + 100vh);
    overflow-y: auto;
    -webkit-transition: height 0.3s;
    -moz-transition: height 0.3s;
    text-align: center;
    transition: height 0.3s;
  }

    @media screen and (min-width: 768px) {    
      .bottom-collapsible-bar .content,
      #bottom-collapsible-bar .content{    
        background: rgba(38,62,88,.9);   
        color: white;
        overflow: hidden;
      }
    }

  .bottom-collapsible-bar .wrapper,
  #bottom-collapsible-bar .wrapper{
    padding: 15px 20px;
  }

  .bottom-collapsible-bar .button-group .btn, 
  #bottom-collapsible-bar .button-group .btn{
    font-size: 15px;
    width: 100%;
  }

  .collapsible-sidebar .btn-default,
  #collapsible-sidebar .btn-default{
    color: white;
  }

  .bottom-collapsible-bar .btn-white.btn-hollow,
  #bottom-collapsible-bar .btn-white.btn-hollow{}

    @media screen and (max-width: 768px){
      .bottom-collapsible-bar .btn-white.btn-hollow,
      #bottom-collapsible-bar .btn-white.btn-hollow{
        border-color: #263e58;
        color: #263e58;
      }
    }

  .bottom-collapsible-bar .btn-white.btn-hollow:hover,
  .bottom-collapsible-bar .btn-white.btn-hollow:focus,
  .bottom-collapsible-bar .btn-white.btn-hollow:active,
  #bottom-collapsible-bar .btn-white.btn-hollow:hover,
  #bottom-collapsible-bar .btn-white.btn-hollow:focus,
  #bottom-collapsible-bar .btn-white.btn-hollow:active{}
  
    @media screen and (max-width: 768px){
      .bottom-collapsible-bar .btn-white.btn-hollow:hover,
      .bottom-collapsible-bar .btn-white.btn-hollow:focus,
      .bottom-collapsible-bar .btn-white.btn-hollow:active,
      #bottom-collapsible-bar .btn-white.btn-hollow:hover,
      #bottom-collapsible-bar .btn-white.btn-hollow:focus,
      #bottom-collapsible-bar .btn-white.btn-hollow:active{
        background-color: #263e58;
        color: white;
      }
    }

.bottom-collapsible-bar.no-icon,
#bottom-collapsible-bar.no-icon{
  
}

.bottom-collapsible-bar.no-icon h3:before,
.bottom-collapsible-bar.no-icon h4:before,
.bottom-collapsible-bar.no-icon .header:before,
#bottom-collapsible-bar.no-icon h3:before,
#bottom-collapsible-bar.no-icon h4:before,
#bottom-collapsible-bar.no-icon .header:before{
  content: '';
}

.bottom-collapsible-bar.is-collapsed.no-icon h3:before,
.bottom-collapsible-bar.is-collapsed.no-icon h4:before,
.bottom-collapsible-bar.is-collapsed.no-icon .header:before,
#bottom-collapsible-bar.is-collapsed.no-icon h3:before,
#bottom-collapsible-bar.is-collapsed.no-icon h4:before,
#bottom-collapsible-bar.is-collapsed.no-icon .header:before{
  content: '';
}

.bottom-collapsible-bar.has-custom-icon h3:before,
.bottom-collapsible-bar.has-custom-icon h4:before,
.bottom-collapsible-bar.has-custom-icon .header:before,
#bottom-collapsible-bar.has-custom-icon h3:before,
#bottom-collapsible-bar.has-custom-icon h4:before,
#bottom-collapsible-bar.has-custom-icon .header:before{
  content: '\f068'; /* Icon that shows up when the CTA is open */
}

.bottom-collapsible-bar.is-collapsed.has-custom-icon h3:before,
.bottom-collapsible-bar.is-collapsed.has-custom-icon h4:before,
.bottom-collapsible-bar.is-collapsed.has-custom-icon .header:before,
#bottom-collapsible-bar.is-collapsed.has-custom-icon h3:before,
#bottom-collapsible-bar.is-collapsed.has-custom-icon h4:before,
#bottom-collapsible-bar.is-collapsed.has-custom-icon .header:before{
  content: '\f067'; /* Icon that shows up when the CTA is collapsed/closed */
}


/* Button-group - .button-group
   Not bootstrap's btn-group. Used in .collapsible-sidebar
*/
.header + .button-group,
h2 + .button-group,
h3 + .button-group,
h4 + .button-group{
  padding-top: 20px;
}

.button-group button + .btn,
.button-group button + button,
.button-group .btn + button,
.button-group .btn + .btn{
  margin-top: 15px;
}

.horizontal-button-group .btn,
.horizontal-button-group button{
  margin-bottom: 15px;
  margin-right: 5px;
}

  .horizontal-button-group .btn:last-child,
  .horizontal-button-group button:last-child{
    margin-right: 0;
  }

.header + .horizontal-button-group,
h2 + .horizontal-button-group,
h3 + .horizontal-button-group,
h4 + .horizontal-button-group{
  margin-top: 15px;
  padding-top: 20px;
}


/* Full page slider */
/* This slider takes 100% height of the screen and uses fullpage.js which is
added dinamically from our js folder.
In these templates the last slide is intended to have a footer, ensure that the 
last section has a .content div with a .has-footer class and follow the structure
from story-slider.php

The standard layout supports only breadcrumbs, if you desire to add subnavigation
as seen in timeline.php add ".is-timeline" or ".has-subnav" to your 
".is-fullpage-slider" div.

WARNING: 
  • For this template to work the theme needs to differ a little from its counterparts
    refer to the structure from story-slider.php
  • IDs from the slides MUST NOT be renamed, or if they are, they should not follow
    the ID structure for the bullets, this means no "page1, page2, page[n]..." also
    the ID "footer" is reserved for the bullet function
  • Breadcrumbs that are not in the first slide are removed from their ID and replaced with a class

NOTE: 
  Refer to the " Slide variations " section for instructions on setting
  up structural variations
  Refer to "Slide color variations" sections for instructions on setting 
  up color options

Options
----
To change slightly the options from your slider 
add a span or div with the ID "fullpage-slider-data" inside <body> and change the option
that you'll like. These are the options that are available:
 • data-background: Add "none" to remove the default particle background or "image" to
                    change it for an image
 • data-labels: Add a string of the label names ( the text at the side of each bullet).
                You can see a functional version of this feature in timeline-inner.php
                - Separate with a comma [,] to define each separated label.  
                - In sliders its expected to have a footer as a last slide and the label can
                  be ignored, in that case if you have 3 slides, including your
                  footer, you could ignore the last label name in the list.
                  For example:
                  <span id="fullpage-slider-data" data-labels="label1, label2" ></span>
                  Footer will have the "Footer" text pre-defined
*/

html.fp-enabled #logo-bar{
  left: 0;
  position: fixed;
  top: 0;
  -webkit-transition: top 0.3s ease-in;
  -moz-transition: top 0.3s ease-in;
  transition: top 0.3s ease-in;
  width: 100%;
}

body.no-particles .is-slider-page{
  background-color: #002343;
  /* Change default background image for nonanimated backgrounds */
  background-image: url("../images/blue-dot-background.jpg");
  background-size: auto;
  background-position: center;
  background-repeat: repeat;
}

.fp-enabled .is-slider-page{
  background: transparent;
}

.is-fullpage-slider{
  position: relative;
  z-index: 1;
}

.is-slider-page #logo-bar{
  position: relative;
  z-index: 5;
}

.is-slider-page .body-content{
  background: transparent !important;
}

.fp-enabled .mp-pusher:before{
  background: rgba(10,17,25,1);
  background: -moz-linear-gradient(top, rgba(10,17,25,1) 0%, rgba(31,53,74,1) 36%, rgba(31,53,74,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(10,17,25,1)), color-stop(36%, rgba(31,53,74,1)), color-stop(100%, rgba(31,53,74,1)));
  background: -webkit-linear-gradient(top, rgba(10,17,25,1) 0%, rgba(31,53,74,1) 36%, rgba(31,53,74,1) 100%);
  background: -o-linear-gradient(top, rgba(10,17,25,1) 0%, rgba(31,53,74,1) 36%, rgba(31,53,74,1) 100%);
  background: -ms-linear-gradient(top, rgba(10,17,25,1) 0%, rgba(31,53,74,1) 36%, rgba(31,53,74,1) 100%);
  background: linear-gradient(to bottom, rgba(10,17,25,1) 0%, rgba(31,53,74,1) 36%, rgba(31,53,74,1) 100%);
  content: "";
  display: block;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1;
}
/* buttons - hover fixes */
.is-fullpage-slider .btn-default.btn-hollow:hover, 
.is-fullpage-slider .btn-default.btn-hollow:focus, 
.is-fullpage-slider .btn-default.btn-hollow:active{
  border-color: #ffc72c;
  color: white;
  background-color: #ffc72c;
}
.is-fullpage-slider .btn-secondary.btn-hollow:hover,
.is-fullpage-slider .btn-secondary.btn-hollow:focus,
.is-fullpage-slider .btn-secondary.btn-hollow:active {
  border-color: #00ade4;
  color: white;
  background-color: #00ade4;
}

/* Subnavigation */
.is-slider-page #desktop-sub-nav ul,
.is-slider-page .desktop-sub-nav ul{
  border-bottom: none;
  border-top: 1px solid #3c454a;
  margin-bottom: 20px;
}

.is-slider-page #desktop-sub-nav li.active:hover > a, 
.is-slider-page #desktop-sub-nav li.active:focus > a,
.is-slider-page #desktop-sub-nav li.active:active > a,
.is-slider-page .desktop-sub-nav li.active:hover > a, 
.is-slider-page .desktop-sub-nav li.active:focus > a,
.is-slider-page .desktop-sub-nav li.active:active > a{
  color: #ffd45d;
}
.is-slider-page #desktop-sub-nav li.active > a,
.is-slider-page .desktop-sub-nav li.active > a{
  border-bottom: 2px solid #ffd45d;
  color: #ffd45d;
}
.is-slider-page #desktop-sub-nav a,
.is-slider-page .desktop-sub-nav a{
  color: white;
  padding: 20px 0 3px;
}
  .is-slider-page #desktop-sub-nav a:hover,
  .is-slider-page #desktop-sub-nav a:focus,
  .is-slider-page #desktop-sub-nav a:active,
  .is-slider-page .desktop-sub-nav a:hover,
  .is-slider-page .desktop-sub-nav a:focus,
  .is-slider-page .desktop-sub-nav a:active{
    color: #00b2f0;
  }
#desktop-sub-nav li, 
.desktop-sub-nav li{
  margin-right: 20px;
}
  #desktop-sub-nav li:last-child, 
  .desktop-sub-nav li:last-child{
    margin-right: 0;
  }

  /*#desktop-sub-nav li:hover a,
  #desktop-sub-nav .submenu a,*/
  .desktop-sub-nav li:hover a,
  .desktop-sub-nav .submenu a{
     background: transparent;
  }

/* Particle background */
#particle-background-wrapper{
  display: block;
  height: 100%;
  left: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1;
}

.particle-background{
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

/* Titles */

.is-slider-page h1.story-title[data-aos="fade-up"],
.is-slider-page h2.story-title[data-aos="fade-up"],
.is-slider-page .story-title[data-aos="fade-up"],
.is-slider-page h1.timeline-title[data-aos="fade-up"],
.is-slider-page h2.timeline-title[data-aos="fade-up"],
.is-slider-page .timeline-title[data-aos="fade-up"],
.is-slider-page h2.story-subtitle[data-aos="fade-up"], 
.is-slider-page h3.story-subtitle[data-aos="fade-up"], 
.is-slider-page .story-subtitle[data-aos="fade-up"],
.is-slider-page h2.timeline-subtitle[data-aos="fade-up"], 
.is-slider-page h3.timeline-subtitle[data-aos="fade-up"],
.is-slider-page .timeline-subtitle[data-aos="fade-up"],
.is-slider-page .description > div[data-aos="fade-up"]{
  -moz-transform: translateY(50px);
  -webkit-transform:translateY(50px);
  -o-transform: translateY(50px);
  -ms-transform: translateY(50px);
  transform: translateY(50px);
}

  .is-slider-page h1.story-title[data-aos^="fade"].aos-animate,
  .is-slider-page h2.story-title[data-aos="fade-up"].aos-animate,
  .is-slider-page .story-title[data-aos="fade-up"].aos-animate,
  .is-slider-page h1.timeline-title[data-aos="fade-up"].aos-animate,
  .is-slider-page h2.timeline-title[data-aos="fade-up"].aos-animate,
  .is-slider-page .timeline-title[data-aos="fade-up"].aos-animate,
  .is-slider-page h2.story-subtitle[data-aos="fade-up"].aos-animate, 
  .is-slider-page h3.story-subtitle[data-aos="fade-up"].aos-animate, 
  .is-slider-page .story-subtitle[data-aos="fade-up"].aos-animate,
  .is-slider-page h2.timeline-subtitle[data-aos="fade-up"].aos-animate, 
  .is-slider-page h3.timeline-subtitle[data-aos="fade-up"].aos-animate,
  .is-slider-page .timeline-subtitle[data-aos="fade-up"].aos-animate,
  .is-slider-page .description > div[data-aos="fade-up"].aos-animate{
    -moz-transform: translate(0);
    -webkit-transform:translate(0);
    -o-transform: translate(0);
    -ms-transform: translate(0);
    transform: translate(0);
  }

.is-slider-page h1.story-title,
.is-slider-page h2.story-title,
.is-slider-page .story-title{
  border: none;
  color: white;
  font: 34px 'Minion Pro', serif;
  font-weight: normal;
  margin: 0;
  padding-bottom: 20px;
  text-align: center;
  text-shadow: 1px 2px 3px rgba(0,0,0,1);
  text-transform: none;
}

  @media screen and (max-width: 991px){
    .is-slider-page h1.story-title,
    .is-slider-page h2.story-title,
    .is-slider-page .story-title{
      display: none;
    }
  }
  @media screen and (min-width: 992px){
    .is-slider-page h1.story-title,
    .is-slider-page h2.story-title,
    .is-slider-page .story-title{
      font-size: 25px;
    }
  }

  .is-slider-page .section:first-child h1.story-title,
  .is-slider-page .section:first-child h2.story-title,
  .is-slider-page .section:first-child .story-title{}

  @media screen and (max-width: 991px){
    .is-slider-page .section:first-child h1.story-title,
    .is-slider-page .section:first-child h2.story-title,
    .is-slider-page .section:first-child .story-title{
      display: block;
    }
  }

.is-slider-page h1.story-title .story-type,
.is-slider-page h2.story-title .story-type,
.is-slider-page .story-title .story-type{
  display: block;
  font: 16px "Lato", sans-serif;
  font-weight: bold;
  text-transform: uppercase;
}

  @media screen and (min-width: 992px){
    .is-slider-page h1.story-title .story-type,
    .is-slider-page h2.story-title .story-type,
    .is-slider-page .story-title .story-type{
      font-size: 20px;
    }
  }

.is-slider-page h1.timeline-title,
.is-slider-page h2.timeline-title,
.is-slider-page .timeline-title{
  border: none;
  color: white;
  font-size: 30px;
  font-weight: normal;
  padding-bottom: 20px;
  text-align: center;
  text-transform: none;
}

  @media screen and (min-width: 992px){
    .is-slider-page h1.timeline-title,
    .is-slider-page h2.timeline-title,
    .is-slider-page .timeline-title{
      font-size: 25px;
    }
  }

.is-slider-page h1.timeline-title .small,
.is-slider-page h2.timeline-title .small,
.is-slider-page .timeline-title .small{
  color: #ffd45d;
  display: block;
  font-size: 17px;
}

.is-slider-page h2.story-subtitle,
.is-slider-page h3.story-subtitle,
.is-slider-page .story-subtitle,
.is-slider-page h2.timeline-subtitle,
.is-slider-page h3.timeline-subtitle,
.is-slider-page .timeline-subtitle{
  color: white;
  font-weight: bold;
  margin: 5px 0 10px;
  padding-top: 16px;
  position: relative;
  text-shadow: 1px 2px 3px rgba(0,0,0,1);
  text-transform: none;
}

  .is-slider-page h2.story-subtitle:first-child,
  .is-slider-page h3.story-subtitle:first-child,
  .is-slider-page .story-subtitle:first-child,
  .is-slider-page h2.timeline-subtitle:first-child,
  .is-slider-page h3.timeline-subtitle:first-child,
  .is-slider-page .timeline-subtitle:first-child{
    margin-top: 0;
  }
    @media screen and (min-width: 768px){
      .is-slider-page h2.story-subtitle:first-child,
      .is-slider-page h3.story-subtitle:first-child,
      .is-slider-page .story-subtitle:first-child,
      .is-slider-page h2.timeline-subtitle:first-child,
      .is-slider-page h3.timeline-subtitle:first-child,
      .is-slider-page .timeline-subtitle:first-child{
        margin-top: 0;
      }
    }

  .is-slider-page h2.story-subtitle:before,
  .is-slider-page h3.story-subtitle:before,
  .is-slider-page .story-subtitle:before,
  .is-slider-page h2.timeline-subtitle:before,
  .is-slider-page h3.timeline-subtitle:before,
  .is-slider-page .timeline-subtitle:before{
    background: #00b2f0;
    content: "";
    display: block;
    height: 4px;
    left: 0;
    position: absolute;
    top: 0;
    width: 25px;
  }

.is-slider-page h2.story-subtitle,
.is-slider-page h3.story-subtitle,
.is-slider-page .story-subtitle{
  font: 20px "Lato", sans-serif;
}

  @media screen and (min-width: 992px){
    .is-slider-page h2.story-subtitle,
    .is-slider-page h3.story-subtitle,
    .is-slider-page .story-subtitle{
      font-size: 26px;
      margin: 15px 0 15px;
    }
  }

.is-slider-page h2.timeline-subtitle,
.is-slider-page h3.timeline-subtitle,
.is-slider-page .timeline-subtitle{
  font-size: 18px;
}

  @media screen and (min-width: 992px){
    .is-slider-page h2.timeline-subtitle,
    .is-slider-page h3.timeline-subtitle,
    .is-slider-page .timeline-subtitle{
      font-size: 18px;
      margin-bottom: 20px;
    }
  }

.is-slider-page .section h2.story-subtitle.is-big,
.is-slider-page .section h3.story-subtitle.is-big,
.is-slider-page .section .story-subtitle.is-big,
.is-slider-page .section h2.timeline-subtitle.is-big,
.is-slider-page .section h3.timeline-subtitle.is-big,
.is-slider-page .section .timeline-subtitle.is-big{
  color: #ffc72c;
  font-size: 25px;
  padding-bottom: 10px;
  padding-top: 0;
}

  @media screen and (min-width: 992px){
    .is-slider-page .section h2.story-subtitle.is-big,
    .is-slider-page .section h3.story-subtitle.is-big,
    .is-slider-page .section .story-subtitle.is-big,
    .is-slider-page .section h2.timeline-subtitle.is-big,
    .is-slider-page .section h3.timeline-subtitle.is-big,
    .is-slider-page .section .timeline-subtitle.is-big{
      font-size: 30px;
      margin-bottom: 10px;
    }
  }

.is-slider-page .section h2.story-subtitle.is-big:before,
.is-slider-page .section h3.story-subtitle.is-big:before,
.is-slider-page .section .story-subtitle.is-big:before,
.is-slider-page .section h2.timeline-subtitle.is-big:before,
.is-slider-page .section h3.timeline-subtitle.is-big:before,
.is-slider-page .section .timeline-subtitle.is-big:before{
  background: #ffc72c;
  bottom: 0;
  top: auto;
}


.is-slider-page h2.story-subtitle.is-small,
.is-slider-page h3.story-subtitle.is-small,
.is-slider-page .story-subtitle.is-small,
.is-slider-page h2.timeline-subtitle.is-small,
.is-slider-page h3.timeline-subtitle.is-small,
.is-slider-page .timeline-subtitle.is-small{
  font-size: 17px;
  font-weight: normal;
}

.is-slider-page .section h2.story-subtitle.has-no-decor,
.is-slider-page .section h3.story-subtitle.has-no-decor,
.is-slider-page .section .story-subtitle.has-no-decor,
.is-slider-page .section h2.timeline-subtitle.has-no-decor,
.is-slider-page .section h3.timeline-subtitle.has-no-decor,
.is-slider-page .section .timeline-subtitle.has-no-decor{
  margin-bottom: 10px;
  padding: 0;
}
.is-slider-page .section h2.story-subtitle.has-no-decor:before,
.is-slider-page .section h3.story-subtitle.has-no-decor:before,
.is-slider-page .section .story-subtitle.has-no-decor:before,
.is-slider-page .section h2.timeline-subtitle.has-no-decor:before,
.is-slider-page .section h3.timeline-subtitle.has-no-decor:before,
.is-slider-page .section .timeline-subtitle.has-no-decor:before{
  display: none;
}

.is-slider-page.test header{
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}

/* Navigation */
#fp-nav{
  padding: 0;
  pointer-events: none;
}

#fp-nav ul{
  overflow: hidden;
  padding: 30px 0;
  position: relative;
  top: 60px;
}

#fp-nav ul li, 
.fp-slidesNav ul li{
  height: 18px;
  padding: 0 20px 0 0;
  position: relative;
  width: auto;
}

#fp-nav ul li a, 
.fp-slidesNav ul li a{
  pointer-events: all;
  position: absolute;
  right: 0;
  top: 0;
}

  #fp-nav ul li a:before, 
  .fp-slidesNav ul li a:before{
    content: "";
    display: block;
    height: 100%;
    width: 100%;
  }

  #fp-nav ul li .fp-tooltip{
    font: 14px "Lato", sans-serif;
    font-weight: bold;
    right: 3px;
    top: 2px;
  }

  #fp-nav ul li .fp-tooltip,
  #fp-nav.fp-show-active a + .fp-tooltip{
    opacity: 1;
    position: relative;
    text-align: right;
    text-overflow: ellipsis;
    width: auto;
    z-index: 1;
  }

#fp-nav ul li a span, 
.fp-slidesNav ul li a span{
  background: transparent;
  border: 3px solid #00b2f0;
  height: 15px;
  left: auto;
  right: 0;
  top: 3px;
  width:  15px;
}
  #fp-nav ul li:hover a span, .fp-slidesNav ul li:hover a span{
    background: #00b2f0;  
    height: 15px;
    margin: 0 0 0 -3px;
    width:  15px;
  }

  #fp-nav ul li a.active span, 
  .fp-slidesNav ul li a.active span,
  #fp-nav ul li:hover a.active span, 
  .fp-slidesNav ul li:hover a.active span{
    background: #00b2f0;
    height: 15px;
    margin: 0 0 0 -2px;
    width:  15px;
  }

#fp-nav ul .fullpage-prev-slide, 
#fp-nav ul .fullpage-next-slide{
  color: #ffc72c;
  font-size: 35px;
  height: 35px;
  left: auto;
  line-height: 0;
  margin: 0;
  opacity: 1;
  padding: 0;
  pointer-events: all;
  right: -10px;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
  -webkit-transition: opacity 0.3s ease-in;
  -moz-transition: opacity 0.3s ease-in;
  transition: opacity 0.3s ease-in;
  width: 50px;
}
  #fp-nav ul .fullpage-prev-slide:hover, 
  #fp-nav ul .fullpage-next-slide:hover{
    color: #ffd45d;
    cursor: pointer;
  }
#fp-nav ul .fullpage-prev-slide{
  position: absolute;
  top: 0;
}
  .fp-viewing-page0 #fp-nav ul .fullpage-prev-slide{
    cursor: default;
    opacity: 0;
    pointer-events: none;
  }

  .fp-viewing-footer #fp-nav ul .fullpage-next-slide{
    cursor: default;
    opacity: 0;
    pointer-events: none;
  }

#fp-nav ul .fullpage-next-slide{
  bottom: 0;
  position: absolute;
}

/* sections */
.is-fullpage-slider .section{
  font-size: 14px;
}

  .is-fullpage-slider .section .content{
    padding: 40px 0;
  }

    @media screen and (min-width: 992px){
      .is-fullpage-slider .section .content{  
        height: auto;
        overflow-y: hidden;
        padding: 100px 0 0;
      }
    }
  
  @media screen and (max-width: 991px){
    .is-fullpage-slider .section:not(.theme-white) + .is-fullpage-slider .section:not(.theme-white) .content{
      padding-top: 0;
    }
  }

.is-fullpage-slider .section .container{
  text-align: center;
}
.is-fullpage-slider .section .container > div{
  text-align: left;
}

.is-fullpage-slider #breadcrumbs li,
.is-fullpage-slider .breadcrumbs li{
  color: #ffc72c;
}   
  @media screen and (min-width: 768px){
    .is-fullpage-slider #breadcrumbs li,
    .is-fullpage-slider .breadcrumbs li{
      color: white;
    }
  }

/* Utils bar */
.is-fullpage-slider .section .utils-bar{}

  @media screen and (max-width: 991px){
    .is-fullpage-slider .section .utils-bar{
      display: none;
    }
  }

  @media screen and (min-width: 992px){
    .is-fullpage-slider .section .utils-bar{
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
      z-index: 5;
    }
  }
  
.is-fullpage-slider .section:first-child .utils-bar{}

  @media screen and (max-width: 991px){
    .is-fullpage-slider .section:first-child .utils-bar{
      display: block;
    }
  }

/* Breadcrumbs */

.is-fullpage-slider .section:first-child #breadcrumbs,
.is-fullpage-slider .section:first-child .breadcrumbs{}

  @media screen and (max-width: 991px){
    .is-fullpage-slider .section:first-child #breadcrumbs,
    .is-fullpage-slider .section:first-child .breadcrumbs{
      padding: 19px 0 15px;
    }
  }

.is-fullpage-slider  #breadcrumbs li a,
.is-fullpage-slider  .breadcrumbs li a{
  color: white;
  font-weight: normal;
}
  .is-fullpage-slider  #breadcrumbs li a:hover,
  .is-fullpage-slider  #breadcrumbs li a:focus,
  .is-fullpage-slider  #breadcrumbs li a:active,
  .is-fullpage-slider  .breadcrumbs li a:hover,
  .is-fullpage-slider  .breadcrumbs li a:focus,
  .is-fullpage-slider  .breadcrumbs li a:active{
    color: #00b2f0;
  }

/* lists */

.is-slider-page .section .list-unstyled strong{
  font-style: italic;
  font-weight: normal;
  font-size: 105%;
  display: inline-block;
  margin-right: 5px;
  font-weight: bold;
}

.is-slider-page .section .list-unstyled li{
  margin-bottom: 8px;
}

  .is-slider-page .section .list-unstyled li:last-child{
    margin-bottom: 0;
  }


/* wrapper */  
.is-fullpage-slider .section .wrapper{
  display: block;
  margin: 0 auto;
  padding: 0 20px 0 0;
  position: relative;
  top: 0;
  vertical-align: top;
  width: 295px;
}

  @media screen and (min-width: 992px){
    .is-fullpage-slider .section .wrapper{  
      display: inline-block;
      height: 202px;
      max-width: 400px;
      top: 20px;
      width: 49%;
    }
  }
    
  @media  screen and (min-width: 992px) and (min-height: 600px) {
    .is-fullpage-slider .section .wrapper{
      height: 300px;
    }
  }

  @media screen and (min-width: 1200px) and (min-height: 600px){
    .is-fullpage-slider .section .wrapper{    
      height: 320px;
      width: 34%;
    }
  }

  @media  screen and (min-width: 992px) and (min-height: 660px) {
    .is-fullpage-slider .section .wrapper{
      height: 340px;
    }
  }

  @media  screen and (min-width: 992px) and (min-height: 670px) {
    .is-fullpage-slider .section .wrapper{
      height: 350px;
    }
  }

    
  @media  screen and (min-width: 1200px) and (min-height: 768px) {
    .is-fullpage-slider .section .wrapper{
      height: 350px;
    }
  }

  @media  screen and (min-width: 1280px) and (min-height: 1024px) {
    .is-fullpage-slider .section .wrapper{
      height: 527px;
      width: 33%;
    }
  }

/* Wrapper Decoration */
.is-fullpage-slider .section .wrapper .decor{
  border-style: solid;
  border-width: 201px 20px 0 0;
  border-color: #0e1e2e transparent transparent transparent;
  content: "";
  display: inline-block;
  height: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 0;
}
    
  @media  screen and (min-width: 992px) and (min-height: 600px) {
    .is-fullpage-slider .section .wrapper .decor{
      border-top-width: 300px;
    }
  }
  
  @media screen and (min-width: 1200px) and (min-height: 600px){
    .is-fullpage-slider .section .wrapper .decor{
      border-top-width: 320px;
    }
  }

  @media  screen and (min-width: 992px) and (min-height: 660px) {
    .is-fullpage-slider .section .wrapper{
      border-top-width: 340px;
    }
  }

  @media  screen and (min-width: 992px) and (min-height: 670px) {
    .is-fullpage-slider .section .wrapper{
      border-top-width: 350px;
    }
  }

  @media  screen and (min-width: 1200px) and (min-height: 768px) {
    .is-fullpage-slider .section .wrapper .decor{
      border-top-width: 350px;
    }
  }

  @media  screen and (min-width: 1280px) and (min-height: 1024px) {
    .is-fullpage-slider .section .wrapper .decor{
      border-top-width: 527px;
    }
  }

/* Images */
.is-fullpage-slider  .img{
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  vertical-align: middle;
  width: 295px;
}
          
  @media screen and (min-width: 992px){
    .is-fullpage-slider .img{
      max-height: 222px;
      max-width: 50%;
      overflow: hidden;
    }
  }

  @media  screen and (min-width: 992px) and (min-height: 600px) {
    .is-fullpage-slider .img{
      max-height: 300px;
      width: 400px;
    }
  }
        
  @media screen and (min-width: 1200px) and (min-height: 600px){
    .is-fullpage-slider .img{
      max-height: 340px;
      max-width: 65%;
      width: 520px;
    }
  }

  @media  screen and (min-width: 992px) and (min-height: 660px) {
    .is-fullpage-slider .img{
      max-height: 360px;
      width: 455px;
    }
  }

  @media  screen and (min-width: 992px) and (min-height: 670px) {
    .is-fullpage-slider .img{
      max-height: 370px;
      width: 467px;
    }
  }

  @media  screen and (min-width: 992px) and (min-height: 1024px) {
    .is-fullpage-slider .img{
      max-height: 350px;
      width: 465px;
    }
  }

  @media  screen and (min-width: 1200px) and (min-height: 768px) {
    .is-fullpage-slider .img{
      max-height: 370px;
      width: 495px;
    }
  }

  @media  screen and (min-width: 992px) and (min-height: 1024px) {
    .is-fullpage-slider .img{
      max-height:
    }
  }

  @media  screen and (min-width: 1280px) and (min-height: 1024px) {
    .is-fullpage-slider .img{
      height: 547px;
      max-height: 547px;
      max-width: 66%;
      width: 730px;
    }
  }

.is-fullpage-slider .img img{
  width: 100%;
}

.is-fullpage-slider .section .description{
  background: #0e1e2e;
  color: #fffefc;
  height: 100%;
  overflow-y: auto;
  padding: 20px 15px 20px 20px;
}  

  @media screen and (min-width: 992px){
    .is-fullpage-slider .section .description{
      padding-right: 10px;
    }
  }

  .is-fullpage-slider .section.has-animation .description{
    overflow: hidden;
  }

  .is-fullpage-slider .section.has-animated .description{
    overflow-y: auto;
  }


.is-fullpage-slider .section p:last-child{
  margin-bottom: 0;
}

.is-fullpage-slider .section .wrapper a:not(.btn){
  color: #00ade4;
}

  .is-fullpage-slider .section .wrapper a:not(.btn):hover,
  .is-fullpage-slider .section .wrapper a:not(.btn):focus,
  .is-fullpage-slider .section .wrapper a:not(.btn):active{
    color: #6dd0ef;
  }

.is-fullpage-slider .section h3:first-child,
.is-fullpage-slider .section h2.title:first-child,
.is-fullpage-slider .section .title:first-child,
.is-fullpage-slider .sectionp:first-child{
  margin-top: 0;
}

.is-fullpage-slider .section .content.has-footer{
  padding-bottom: 0;
  width: 100%;
}


.is-fullpage-slider .footer-wrap{
  margin-top: 40px;
  overflow-y: hidden;
}

  @media screen and (min-width: 992px){
    .is-fullpage-slider .footer-wrap{
      margin-top: 0;
    }
  }


@media screen and (min-width: 992px){
  .is-fullpage-slider .section .footer-wrap{
    bottom: 0;
    display: block;
    left: 0;
    position: absolute;
    width: 100%;
  }
}

.is-fullpage-slider .section .footer-wrap .social-links{
  margin-bottom: 0;
}

.is-fullpage-slider .section .container{
  position: relative;
}

/* TIMELINE Layout or HAS SUBNAVIGATION aside from breadcrumbs
   Slides have smaller height to compensate the space taken by subnavigation
*/

/* Timeline Wrapper */
.is-fullpage-slider.is-timeline .section .wrapper,
.is-fullpage-slider.has-subnav .section .wrapper{}

  @media screen and (min-width: 992px){
    .is-fullpage-slider.is-timeline  .section .wrapper,
    .is-fullpage-slider.has-subnav .section .wrapper{
      height: 172px;
    }
  }
    
  @media  screen and (min-width: 992px) and (min-height: 600px) {
    .is-fullpage-slider.is-timeline  .section .wrapper,
    .is-fullpage-slider.has-subnav .section .wrapper{
      height: 250px;
    }
  }
    
  @media  screen and (min-width: 992px) and (min-height: 660px) {
    .is-fullpage-slider.is-timeline  .section .wrapper,
    .is-fullpage-slider.has-subnav .section .wrapper{
      height: 320px;
    }
  }

  @media  screen and (min-width: 1280px) and (min-height: 1024px) {
    .is-fullpage-slider.is-timeline  .section .wrapper,
    .is-fullpage-slider.has-subnav .section .wrapper{
      height: 497px;
    }
  }

/* Timeline Decoration */

.is-fullpage-slider.is-timeline .section .wrapper .decor,
.is-fullpage-slider.has-subnav .section .wrapper .decor{
  border-top-width: 171px;
}
    
  @media  screen and (min-width: 992px) and (min-height: 600px) {
    .is-fullpage-slider.is-timeline .section .wrapper .decor,
    .is-fullpage-slider.has-subnav .section .wrapper .decor{
      border-top-width: 250px;
    }
  }

  @media  screen and (min-width: 992px) and (min-height: 660px) {
    .is-fullpage-slider.is-timeline .section .wrapper .decor,
    .is-fullpage-slider.has-subnav .section .wrapper .decor{
      border-top-width: 320px;
    }
  }

  @media  screen and (min-width: 1280px) and (min-height: 1024px) {
    .is-fullpage-slider.is-timeline .section .wrapper .decor,
    .is-fullpage-slider.has-subnav .section .wrapper .decor{
      border-top-width: 497px;
    }
  }

/* Timeline Image */

.is-fullpage-slider.is-timeline  .img,
.is-fullpage-slider.has-subnav  .img{}
          
  @media screen and (min-width: 992px){
    .is-fullpage-slider.is-timeline .img,
    .is-fullpage-slider.has-subnav  .img{
      max-height: 192px;
    }
  }

  @media  screen and (min-width: 992px) and (min-height: 600px) {
    .is-fullpage-slider.is-timeline .img,
    .is-fullpage-slider.has-subnav  .img{
      max-height: 270px;
    }
  }

  @media  screen and (min-width: 992px) and (min-height: 660px) {
    .is-fullpage-slider.is-timeline .img,
    .is-fullpage-slider.has-subnav  .img{
      max-height: 340px;
    }
  }

  @media  screen and (min-width: 1200px) and (min-height: 1024px) {
    .is-fullpage-slider.is-timeline .img,
    .is-fullpage-slider.has-subnav  .img{
      height: 550px;
      width: 33%;
    }
  }

/* Slide variations */
/* 
   These show the kind of LAYOUT variations that can be applied to your slides
   Default shows an image and at the side text block, the image it's expected
   to have the following dimensions  787 x 590 pixels
   To add a variation just add the corresponding class to the .section div
   inside a Full-page slider.

   • .layout-has-wide-image - Wide image [ As seen in timeline.php#page0 ]
                              Expected image is 787 x 590
   • .layout-has-text-block - No image [ As seen in story-slider.php#page5 ]
   • .layout-has-text-block-is-small - No image and text height is smaller in large screens  [ As seen in story-slider.php#page6 ]
   • .layout-has-text-block-inv-decor - Has only text, no image. Has inverted decoration from default text-block
                                        [ As seen in timeline.php#page1 ]
   • .layout-has-two-blocks - Has side-by-side content blocks [ As seen in timeline-inner.php#page1 ]
   • .layout-has-two-blocks-is-large - Extended style from  .layout-has-two-blocks. Differs in height starting from 768px
                                       [ As seen in timeline.php#page2 ]
*/

/* .layout-has-wide-image - Has larger image than text
   Expected image is 787 x 590
   [ As seen in timeline.php#page0 ]
*/
.is-fullpage-slider .section.layout-has-wide-image{}


  @media screen and (min-width: 992px){
    .is-fullpage-slider .section.layout-has-wide-image .img{
      max-width: 59%;
      width: 500px;
    }
  }

  @media  screen and (min-width: 992px) and (min-height: 680px) {
    .is-fullpage-slider .section.layout-has-wide-image .img{
      max-height: 350px;
    }
  }

  @media  screen and (min-width: 992px) and (min-height: 768px) {
    .is-fullpage-slider .section.layout-has-wide-image .img{
      max-height: 514px;
      width: 530px
    }
  }

  @media screen and (min-width: 1200px){
    .is-fullpage-slider .section.layout-has-wide-image .img{
      max-width: 68%;
    }
  }

  @media  screen and (min-width: 1200px) and (min-height: 768px) {
    .is-fullpage-slider .section.layout-has-wide-image .img{
      max-height: 504px;
      width: 785px;
    }
  }

  @media  screen and (min-width: 1280px) and (min-height: 1024px) {
    .is-fullpage-slider .section.layout-has-wide-image .img{
      max-height: 564px;
    }
  }


.is-fullpage-slider .section.layout-has-wide-image .wrapper{}

  @media screen and (min-width: 992px){
    .is-fullpage-slider .section.layout-has-wide-image .wrapper{
      max-width: 40%;
      width: 400px;
    }
  }

  @media  screen and (min-width: 992px) and (min-height: 680px) {
    .is-fullpage-slider .section.layout-has-wide-image .wrapper{
      height: 330px;
    }
  }

  @media  screen and (min-width: 992px) and (min-height: 768px) {
    .is-fullpage-slider .section.layout-has-wide-image .wrapper{
      height: 394px;
    }
  }


  @media screen and (min-width: 1200px){  
    .is-fullpage-slider .section.layout-has-wide-image .wrapper{
      max-width: 31%;
    }
  }

  @media  screen and (min-width: 1200px) and (min-height: 768px) {
    .is-fullpage-slider .section.layout-has-wide-image .wrapper{
      height: 484px;
    }
  }


  @media  screen and (min-width: 1280px) and (min-height: 1024px) {
    .is-fullpage-slider .section.layout-has-wide-image .wrapper{
      height: 544px;
    }
  }

.is-fullpage-slider.section.layout-has-wide-image .wrapper .decor{}


  @media  screen and (min-width: 992px) and (min-height: 680px) {
    .is-fullpage-slider.section.layout-has-wide-image .wrapper .decor{
      border-top-width: 330px;
    }
  }

  @media  screen and (min-width: 992px) and (min-height: 768px) {
    .is-fullpage-slider .section.layout-has-wide-image .wrapper .decor{
      border-top-width: 394px;
    }
  }

  @media  screen and (min-width: 1200px) and (min-height: 768px) {
    .is-fullpage-slider .section.layout-has-wide-image .wrapper .decor{
      border-top-width: 484px;
    }
  }

  @media  screen and (min-width: 1280px) and (min-height: 1024px) {
    .is-fullpage-slider .section.layout-has-wide-image .wrapper .decor{
      border-top-width: 544px;
    }
  }

  /* Fullpage-slider that it's Timeline */
  .is-fullpage-slider.is-timeline .section.layout-has-wide-image .wrapper,
  .is-fullpage-slider.has-subnav .section.layout-has-wide-image .wrapper{}
 
    @media  screen and (min-width: 1200px) and (min-height: 768px) {
      .is-fullpage-slider.is-timeline .section.layout-has-wide-image .wrapper,
      .is-fullpage-slider.has-subnav .section.layout-has-wide-image .wrapper{
        height: 424px;
      }
    }

  .is-fullpage-slider.is-timeline .section.layout-has-wide-image .img,
  .is-fullpage-slider.has-subnav section.layout-has-wide-image .img{}

    @media  screen and (min-width: 1200px) and (min-height: 768px) {
      .is-fullpage-slider.is-timeline .section.layout-has-wide-image .img,
      .is-fullpage-slider.has-subnav .section.layout-has-wide-image .img{
        max-height: 444px;
      }
    }
  
  .is-fullpage-slider.is-timeline .section .wrapper .decor,
  .is-fullpage-slider.has-subnav section.layout-has-wide-image{}

    @media  screen and (min-width: 1200px) and (min-height: 768px) {
      .is-fullpage-slider.is-timeline .section .wrapper .decor,
      .is-fullpage-slider.has-subnav .section.layout-has-wide-image .decor{
        border-top-width: 424px;
      }
    }

/* .layout-has-text-block - Has only text, no image. 
   [ As seen in story-slider.php#page5 ]
*/

.is-slider-page .section.layout-has-text-block{}

  .is-slider-page .section.layout-has-text-block .description{}

    @media screen and (min-width: 992px){
      .is-slider-page .section.layout-has-text-block .description{
        padding-left: 35px;
        padding-right: 15px;
      }
    }

  .is-slider-page .section.layout-has-text-block .wrapper{
    top: 0;
  }

  @media screen and (min-width: 992px){
    .is-slider-page .section.layout-has-text-block .wrapper{
      max-width: 80%;
      width: 750px;
    }
  }

/* .layout-has-text-block-is-small - Has only text, no image.
                                     Smaller height than 
                                     .layout-has-text-block
                                     when you reach lg desktop or above
   [ As seen in story-slider.php#page6 ]
*/

.is-slider-page .section.layout-has-text-block-is-small{}

  .is-slider-page .section.layout-has-text-block-is-small .description{}

    @media screen and (min-width: 992px){
      .is-slider-page .section.layout-has-text-block-is-small .description{
        padding-left: 35px;
        padding-right: 15px;
      }
    }

  .is-slider-page .section.layout-has-text-block-is-small .wrapper{
    top: 0;
  }

  @media screen and (min-width: 992px){
    .is-slider-page .section.layout-has-text-block-is-small .wrapper{
      max-width: 80%;
      width: 750px;
    }
  }
  @media screen and (min-width: 992px) and (min-height: 768px){
    .is-slider-page .section.layout-has-text-block-is-small .wrapper{
      height: 284px;
    }
  }
  @media screen and (min-width: 1300px) and (min-height: 768px){
    .is-slider-page .section.layout-has-text-block-is-small .wrapper{
      height: 284px;
    }
  }

  .is-fullpage-slider .section.layout-has-text-block-is-small .wrapper .decor{}

  @media screen and (min-width: 992px) and (min-height: 768px){
    .is-fullpage-slider .section.layout-has-text-block-is-small .wrapper .decor{
      border-top-width: 284px;
    }
  }

  @media screen and (min-width: 1300px) and (min-height: 768px){
    .is-fullpage-slider .section.layout-has-text-block-is-small .wrapper .decor{
      border-top-width: 284px;
    }
  }
  
/* .layout-has-text-block-inv-decor - Has only text, no image.
                                      Has inverted decoration
                                      from default text-block
   [ As seen in timeline.php#page1 ]
*/

.is-fullpage-slider .section.layout-has-text-block-inv-decor{}

    
  .is-fullpage-slider .section.layout-has-text-block-inv-decor .description{}

    @media screen and (min-width: 992px){
      .is-fullpage-slider .section.layout-has-text-block-inv-decor .description{
        padding-left: 35px;
        padding-right: 15px;
      }
    }

  .is-fullpage-slider .section.layout-has-text-block-inv-decor .wrapper{
    top: 0;
  }

    @media screen and (min-width: 992px){
      .is-fullpage-slider .section.layout-has-text-block-inv-decor .wrapper{
        max-width: 80%;
        width: 750px;
      }
    }

    @media screen and (min-width: 992px) and (min-height: 600px) {
      .is-fullpage-slider .section.layout-has-text-block-inv-decor .wrapper{
        height: 310px;
      }
    }

    @media  screen and (min-width: 992px) and (min-height: 768px) {
      .is-fullpage-slider .section.layout-has-text-block-inv-decor .wrapper{
        height: 425px;
      }
    }

    @media screen and (min-width: 1200px){
      .is-fullpage-slider .section.layout-has-text-block-inv-decor .wrapper{
        max-width: 100%;
      }
    }

  .is-fullpage-slider .section.layout-has-text-block-inv-decor .wrapper .decor{
    border-top-width: 221px;
    right: 15px;
    -ms-transform: rotate(179deg); /* IE 9 */
    -webkit-transform: rotate(179deg); /* Safari */
    transform: rotate(179deg);
  }
    @media screen and (min-width: 992px){
      .is-fullpage-slider .section.layout-has-text-block-inv-decor .wrapper .decor{
        border-top-width: 202px;
        right: 11px;
        -ms-transform: rotate(175deg); /* IE 9 */
        -webkit-transform: rotate(175deg); /* Safari */
        transform: rotate(175deg);
      }
    }

    @media  screen and (min-width: 992px) and (min-height: 600px) {
      .is-fullpage-slider .section.layout-has-text-block-inv-decor .wrapper .decor{
        border-top-width: 310px;
        -ms-transform: rotate(176deg); /* IE 9 */
        -webkit-transform: rotate(176deg); /* Safari */
        transform: rotate(176deg);
      }
    }

    @media screen and (min-width: 992px) and (min-height: 680px){
      .is-fullpage-slider .section.layout-has-text-block-inv-decor .wrapper .decor{
        -ms-transform: rotate(177deg); /* IE 9 */
        -webkit-transform: rotate(177deg); /* Safari */
        transform: rotate(177deg);
        right: 12px;
      }
    }

    @media  screen and (min-width: 992px) and (min-height: 768px) {
      .is-fullpage-slider .section.layout-has-text-block-inv-decor .wrapper .decor{
        border-top-width: 425px;
        right: 11px;
        -ms-transform: rotate(17deg); /* IE 9 */
        -webkit-transform: rotate(177deg); /* Safari */
        transform: rotate(177deg);
      }
    }


    /* Fullpage-slider that it's Timeline */

    .is-fullpage-slider.is-timeline .section.layout-has-text-block-inv-decor .wrapper,
    .is-fullpage-slider.has-subnav .section.layout-has-text-block-inv-decor .wrapper{}

      @media screen and (min-width: 992px) and (min-height: 600px){
        .is-fullpage-slider.is-timeline .section.layout-has-text-block-inv-decor .wrapper,
        .is-fullpage-slider.has-subnav .section.layout-has-text-block-inv-decor .wrapper{
          height: 270px;
        }
      }

      @media screen and (min-width: 992px) and (min-height: 660px){
        .is-fullpage-slider.is-timeline .section.layout-has-text-block-inv-decor .wrapper,
        .is-fullpage-slider.has-subnav .section.layout-has-text-block-inv-decor .wrapper{
          height: 330px;
        }
      }
      @media screen and (min-width: 992px) and (min-height: 670px){
        .is-fullpage-slider.is-timeline .section.layout-has-text-block-inv-decor .wrapper,
        .is-fullpage-slider.has-subnav .section.layout-has-text-block-inv-decor .wrapper{
          height: 340px;
        }
      }

      @media screen and (min-width: 992px) and (min-height: 680px){
        .is-fullpage-slider.is-timeline .section.layout-has-text-block-inv-decor .wrapper,
        .is-fullpage-slider.has-subnav .section.layout-has-text-block-inv-decor .wrapper{
          height: 345px;
        }
      }

      @media  screen and (min-width: 992px) and (min-height: 768px) {
        .is-fullpage-slider.is-timeline .section.layout-has-text-block-inv-decor .wrapper,
        .is-fullpage-slider.has-subnav .section.layout-has-text-block-inv-decor .wrapper{
          height: 425px;
        }
      }

    .is-fullpage-slider.is-timeline .section.layout-has-text-block-inv-decor .wrapper .decor,
    .is-fullpage-slider.has-subnav .section.layout-has-text-block-inv-decor .wrapper .decor{}

      @media screen and (min-width: 992px){
        .is-fullpage-slider.is-timeline .section.layout-has-text-block-inv-decor .wrapper .decor,
        .is-fullpage-slider.has-subnav .section.layout-has-text-block-inv-decor .wrapper .decor{
          border-top-width: 202px;
        }
      }

      @media screen and (min-width: 992px) and (min-height: 600px){
        .is-fullpage-slider.is-timeline .section.layout-has-text-block-inv-decor .wrapper .decor,
        .is-fullpage-slider.has-subnav .section.layout-has-text-block-inv-decor .wrapper .decor{
          border-top-width: 270px;
        }
      }

      @media screen and (min-width: 992px) and (min-height: 660px){
        .is-fullpage-slider.is-timeline .section.layout-has-text-block-inv-decor .wrapper .decor,
        .is-fullpage-slider.has-subnav .section.layout-has-text-block-inv-decor .wrapper .decor{
          border-top-width: 330px;
        }
      }
      @media screen and (min-width: 992px) and (min-height: 670px){
        .is-fullpage-slider.is-timeline .section.layout-has-text-block-inv-decor .wrapper .decor,
        .is-fullpage-slider.has-subnav .section.layout-has-text-block-inv-decor .wrapper .decor{
          border-top-width: 340px;
        }
      }

      @media screen and (min-width: 992px) and (min-height: 680px){
        .is-fullpage-slider.is-timeline .section.layout-has-text-block-inv-decor .wrapper .decor,
        .is-fullpage-slider.has-subnav .section.layout-has-text-block-inv-decor .wrapper .decor{
          border-top-width: 345px;
        }
      }

      @media  screen and (min-width: 992px) and (min-height: 768px) {
        .is-fullpage-slider.is-timeline .section.layout-has-text-block-inv-decor .wrapper .decor,
        .is-fullpage-slider.has-subnav .section.layout-has-text-block-inv-decor .wrapper .decor{
          border-top-width: 425px;
        }
      }

/* .layout-has-two-blocks - Has side-by-side content blocks
   [ As seen in timeline-inner.php#page1 ]
*/
.is-slider-page .section.layout-has-two-blocks{}

  .is-slider-page .section.layout-has-two-blocks .description{}

    @media screen and (min-width: 992px){
      .is-slider-page .section.layout-has-two-blocks .description,
      .is-slider-page .section.layout-has-two-blocks-is-large .description{
        padding-left: 35px;
        padding-right: 15px;
      }
    }

  .is-slider-page .section.layout-has-two-blocks h3.story-subtitle,
  .is-slider-page .section.layout-has-two-blocks h3.timeline-subtitle,
  .is-slider-page .section.layout-has-two-blocks p.story-subtitle,
  .is-slider-page .section.layout-has-two-blocks p.timeline-subtitle,
  .is-slider-page .section.layout-has-two-blocks-is-large h3.story-subtitle,
  .is-slider-page .section.layout-has-two-blocks-is-large h3.timeline-subtitle,
  .is-slider-page .section.layout-has-two-blocks-is-large p.story-subtitle,
  .is-slider-page .section.layout-has-two-blocks-is-large p.timeline-subtitle {
    color: #ffc72c;
  }

    .is-slider-page .section.layout-has-two-blocks h3.story-subtitle:before,
    .is-slider-page .section.layout-has-two-blocks h3.timeline-subtitle:before,
    .is-slider-page .section.layout-has-two-blocks p.story-subtitle:before,
    .is-slider-page .section.layout-has-two-blocks p.timeline-subtitle:before,
    .is-slider-page .section.layout-has-two-blocks-is-large h3.story-subtitle:before,
    .is-slider-page .section.layout-has-two-blocks-is-large h3.timeline-subtitle:before,
    .is-slider-page .section.layout-has-two-blocks-is-large p.story-subtitle:before,
    .is-slider-page .section.layout-has-two-blocks-is-large p.timeline-subtitle:before {
      background: #ffc72c;
    }

  .is-slider-page .section.layout-has-two-blocks .wrapper:last-child h3.story-subtitle,
  .is-slider-page .section.layout-has-two-blocks .wrapper:last-child h3.timeline-subtitle,
  .is-slider-page .section.layout-has-two-blocks .wrapper:last-child p.story-subtitle,
  .is-slider-page .section.layout-has-two-blocks .wrapper:last-child p.timeline-subtitle,
  .is-slider-page .section.layout-has-two-blocks-is-large .wrapper:last-child h3.story-subtitle,
  .is-slider-page .section.layout-has-two-blocks-is-large .wrapper:last-child h3.timeline-subtitle,
  .is-slider-page .section.layout-has-two-blocks-is-large .wrapper:last-child p.story-subtitle,
  .is-slider-page .section.layout-has-two-blocks-is-large .wrapper:last-child p.timeline-subtitle{
    color: #00b2f0;
  }

    .is-slider-page .section.layout-has-two-blocks .wrapper:last-child h3.story-subtitle:before,
    .is-slider-page .section.layout-has-two-blocks .wrapper:last-child h3.timeline-subtitle:before,
    .is-slider-page .section.layout-has-two-blocks .wrapper:last-child p.story-subtitle:before,
    .is-slider-page .section.layout-has-two-blocks .wrapper:last-child p.timeline-subtitle:before,
    .is-slider-page .section.layout-has-two-blocks-is-large .wrapper:last-child h3.story-subtitle:before,
    .is-slider-page .section.layout-has-two-blocks-is-large .wrapper:last-child h3.timeline-subtitle:before,
    .is-slider-page .section.layout-has-two-blocks-is-large .wrapper:last-child p.story-subtitle:before,
    .is-slider-page .section.layout-has-two-blocks-is-large .wrapper:last-child p.timeline-subtitle:before{
      background: #00b2f0;
    }

  .is-slider-page .section.layout-has-two-blocks .outer-wrapper,
  .is-slider-page .section.layout-has-two-blocks-is-large .outer-wrapper{
    background: white;
    display: inline-block;
  }

    @media screen and (min-width: 992px){    
      .is-slider-page .section.layout-has-two-blocks .outer-wrapper,
      .is-slider-page .section.layout-has-two-blocks-is-large .outer-wrapper{
        text-align: center;
      }
    }


  .is-slider-page .section.layout-has-two-blocks .wrapper,
  .is-slider-page .section.layout-has-two-blocks-is-large .wrapper{
    padding-right: 0;
  }

    @media screen and (min-width: 992px){
      .is-slider-page .section.layout-has-two-blocks .wrapper,
      .is-slider-page .section.layout-has-two-blocks-is-large .wrapper{
        max-width: 50%;
        padding-right: 20px;
        text-align: left;
        top: 0;
        width: 375px;
      }
    }
    .is-slider-page .section.layout-has-two-blocks .wrapper .decor,
    .is-slider-page .section.layout-has-two-blocks-is-large .wrapper .decor{
      display: none;
    }

      @media screen and (min-width: 992px){
        .is-slider-page .section.layout-has-two-blocks .wrapper .decor,
        .is-slider-page .section.layout-has-two-blocks-is-large .wrapper .decor{
          display: inline-block;
        }
      }
  
  .is-slider-page .section.layout-has-two-blocks .wrapper:last-child .description,
  .is-slider-page .section.layout-has-two-blocks-is-large .wrapper:last-child .description{
    background: white;
    color: #0d1e30;
    padding: 20px 15px;
  }

    .is-slider-page .section.layout-has-two-blocks .wrapper:last-child .decor,
    .is-slider-page .section.layout-has-two-blocks-is-large .wrapper:last-child .decor{
      display: none;
    }
      
      
      .is-slider-page .section.layout-has-two-blocks .wrapper:last-child h2.story-subtitle,
      .is-slider-page .section.layout-has-two-blocks .wrapper:last-child h3.story-subtitle,
      .is-slider-page .section.layout-has-two-blocks .wrapper:last-child .story-subtitle,
      .is-slider-page .section.layout-has-two-blocks .wrapper:last-child h2.timeline-subtitle,
      .is-slider-page .section.layout-has-two-blocks .wrapper:last-child h3.timeline-subtitle,
      .is-slider-page .section.layout-has-two-blocks .wrapper:last-child .timeline-subtitle,
      .is-slider-page .section.layout-has-two-blocks-is-large .wrapper:last-child h2.story-subtitle,
      .is-slider-page .section.layout-has-two-blocks-is-large .wrapper:last-child h3.story-subtitle,
      .is-slider-page .section.layout-has-two-blocks-is-large .wrapper:last-child .story-subtitle,
      .is-slider-page .section.layout-has-two-blocks-is-large .wrapper:last-child h2.timeline-subtitle,
      .is-slider-page .section.layout-has-two-blocks-is-large .wrapper:last-child h3.timeline-subtitle,
      .is-slider-page .section.layout-has-two-blocks-is-large .wrapper:last-child .timeline-subtitle{      
        color: #0d1e30;
        text-shadow: none;
      }

    .is-slider-page .section.layout-has-two-blocks .wrapper:last-child h2.story-subtitle.is-big,
    .is-slider-page .section.layout-has-two-blocks .wrapper:last-child h3.story-subtitle.is-big,
    .is-slider-page .section.layout-has-two-blocks .wrapper:last-child .story-subtitle.is-big,
    .is-slider-page .section.layout-has-two-blocks .wrapper:last-child h2.timeline-subtitle.is-big,
    .is-slider-page .section.layout-has-two-blocks .wrapper:last-child h3.timeline-subtitle.is-big,
    .is-slider-page .section.layout-has-two-blocks .wrapper:last-child .timeline-subtitle.is-big,
    .is-slider-page .section.layout-has-two-blocks-is-large .wrapper:last-child h2.story-subtitle.is-big,
    .is-slider-page .section.layout-has-two-blocks-is-large .wrapper:last-child h3.story-subtitle.is-big,
    .is-slider-page .section.layout-has-two-blocks-is-large .wrapper:last-child .story-subtitle.is-big,
    .is-slider-page .section.layout-has-two-blocks-is-large .wrapper:last-child h2.timeline-subtitle.is-big,
    .is-slider-page .section.layout-has-two-blocks-is-large .wrapper:last-child h3.timeline-subtitle.is-big,
    .is-slider-page .section.layout-has-two-blocks-is-large .wrapper:last-child .timeline-subtitle.is-big{}

      .is-slider-page .section.layout-has-two-blocks .wrapper:last-child h2.story-subtitle.is-big,
      .is-slider-page .section.layout-has-two-blocks .wrapper:last-child h3.story-subtitle.is-big,
      .is-slider-page .section.layout-has-two-blocks .wrapper:last-child .story-subtitle.is-big,
      .is-slider-page .section.layout-has-two-blocks .wrapper:last-child h2.timeline-subtitle.is-big,
      .is-slider-page .section.layout-has-two-blocks .wrapper:last-child h3.timeline-subtitle.is-big,
      .is-slider-page .section.layout-has-two-blocks .wrapper:last-child .timeline-subtitle.is-big,
      .is-slider-page .section.layout-has-two-blocks-is-large .wrapper:last-child h2.story-subtitle.is-big,
      .is-slider-page .section.layout-has-two-blocks-is-large .wrapper:last-child h3.story-subtitle.is-big,
      .is-slider-page .section.layout-has-two-blocks-is-large .wrapper:last-child .story-subtitle.is-big,
      .is-slider-page .section.layout-has-two-blocks-is-large .wrapper:last-child h2.timeline-subtitle.is-big,
      .is-slider-page .section.layout-has-two-blocks-is-large .wrapper:last-child h3.timeline-subtitle.is-big,
      .is-slider-page .section.layout-has-two-blocks-is-large .wrapper:last-child .timeline-subtitle.is-big{      
        color: #0d1e30;
      }

      .is-slider-page .section.layout-has-two-blocks .wrapper:last-child h2.story-subtitle:before,
      .is-slider-page .section.layout-has-two-blocks .wrapper:last-child h3.story-subtitle:before,
      .is-slider-page .section.layout-has-two-blocks .wrapper:last-child .story-subtitle:before,
      .is-slider-page .section.layout-has-two-blocks .wrapper:last-child h2.timeline-subtitle:before,
      .is-slider-page .section.layout-has-two-blocks .wrapper:last-child h3.timeline-subtitle:before,
      .is-slider-page .section.layout-has-two-blocks .wrapper:last-child .timeline-subtitle:before,
      .is-slider-page .section.layout-has-two-blocks-is-large .wrapper:last-child h2.story-subtitle:before,
      .is-slider-page .section.layout-has-two-blocks-is-large .wrapper:last-child h3.story-subtitle:before,
      .is-slider-page .section.layout-has-two-blocks-is-large .wrapper:last-child .story-subtitle:before,
      .is-slider-page .section.layout-has-two-blocks-is-large .wrapper:last-child h2.timeline-subtitle:before,
      .is-slider-page .section.layout-has-two-blocks-is-large .wrapper:last-child h3.timeline-subtitle:before,
      .is-slider-page .section.layout-has-two-blocks-is-large .wrapper:last-child .timeline-subtitle:before{
        background: #0d1e30;
      }


.is-fullpage-slider .section.layout-has-two-blocks .wrapper{}
      
  @media  screen and (min-width: 992px) and (min-height: 768px) {
    .is-fullpage-slider .section.layout-has-two-blocks .wrapper{
      font-size: 19px;
      height: 430px;
    }
  }

.is-fullpage-slider .section.layout-has-two-blocks .wrapper .decor{}

    @media  screen and (min-width: 992px) and (min-height: 660px) {
      .is-fullpage-slider .section.layout-has-two-blocks .wrapper .decor{
        border-top-width: 340px;
      }
    }

    @media  screen and (min-width: 992px) and (min-height: 670px) {
      .is-fullpage-slider .section.layout-has-two-blocks .wrapper .decor{
        border-top-width: 350px;
      }
    }
    
    @media  screen and (min-width: 992px) and (min-height: 768px) {
      .is-fullpage-slider .section.layout-has-two-blocks .wrapper .decor{
        border-top-width: 430px;
      }
    }
  
/* .layout-has-two-blocks-is-large - Has side-by-side content blocks, extended style from 
                                     .layout-has-two-blocks.
                                     Differs in height starting from 768px
   [ As seen in timeline.php#page2 ]
*/

.layout-has-two-blocks-is-large{}

.is-fullpage-slider .section.layout-has-two-blocks-is-large .wrapper{}

  @media screen and (min-width: 992px) and (min-height: 768px){
    .is-fullpage-slider .section.layout-has-two-blocks-is-large .wrapper{
      height: 450px;
    }
  }

  @media screen and (min-width: 992px) and (min-height: 800px){
    .is-fullpage-slider .section.layout-has-two-blocks-is-large .wrapper{
      height: 470px;
    }
  }


.is-fullpage-slider .section.layout-has-two-blocks-is-large .wrapper .decor{}
  @media screen and (min-width: 992px) and (min-height: 768px){
    .is-fullpage-slider .section.layout-has-two-blocks-is-large .wrapper .decor{
      border-top-width: 450px;
    }
  }

  @media screen and (min-width: 992px) and (min-height: 800px){
    .is-fullpage-slider .section.layout-has-two-blocks-is-large .wrapper .decor{
      border-top-width: 470px;
    }
  }


.is-fullpage-slider .section.layout-has-two-blocks-is-large .wrapper .decor{
  border-top-width: 171px;
}
    
  @media  screen and (min-width: 992px) and (min-height: 600px) {
    .is-fullpage-slider .section.layout-has-two-blocks-is-large .wrapper .decor{
      border-top-width: 250px;
    }
  }

  @media  screen and (min-width: 992px) and (min-height: 660px) {
    .is-fullpage-slider .section.layout-has-two-blocks-is-large .wrapper .decor{
      border-top-width: 320px;
    }
  }

  @media  screen and (min-width: 992px) and (min-height: 680px) {
    .is-fullpage-slider .section.layout-has-two-blocks-is-large .wrapper .decor{
      border-top-width: 350px;
    }
  }

  @media  screen and (min-width: 992px) and (min-height: 768px) {
    .is-fullpage-slider .section.layout-has-two-blocks-is-large .wrapper .decor{
      border-top-width: 450px;
    }
  }


  @media  screen and (min-width: 1280px) and (min-height: 1024px) {
    .is-fullpage-slider .section.layout-has-two-blocks-is-large .wrapper .decor{
      border-top-width: 497px;
    }
  }

/* Fullpage.js - Slide color variations */
/* It's possible to change the COLOR of your slides in a fullpage
   section. You just need to add the relevant modifier to the .section div
   You can change the color of the slide THEME or the color or the color
   of the TEXT-BLOCK.

   To change the color of the THEME the options are as follow:
   • Dark theme - The dark theme requires no setup, it's a default value
                  and includes a solid dark blue text block
   • .theme-light - Adding this class to the .section element
                    will change it to a white background with a dark blue text block
                    [As seen in story-slider.php#page11 ]
   • .theme-white - Has solid white background
                    [As seen in story-slider.php#page16 ]
   • .theme-alpha-white - Has white background with light transparency
                    [As seen in story-slider.php#page17 ]
   • .theme-black -  Has solid black background
                    [As seen in story-slider.php#page18 ]
   • .theme-alpha-black - Has black background with light transparency
                    [As seen in story-slider.php#page19 ]

  NOTE: If only solid colors are used, like theme-white and theme-black,
        it's advised to disable the animated background by adding the
        data-background="none" attribute to a #fullpage-slider-data element.
        This will allow you to save resources, since the background won't be visible.

   If you need to change the color of the TEXT-BLOCK in the slide add 
   one of the following classes to the .section slide. 

   • textblock-is-lightblue - Light blue /grayish block with dark blue text
                              [ As seen in story-slider.php#page8 and story-slider.php#page13 ]
   • textblock-is-yellow - Yellow block with dark blue text
                           [As seen in story-slider.php#page7 and story-slider.php#page12]
   • textblock-is-white - White block with dark blue text
                          [ As seen in story-slider.php#page9 and story-slider.php#page14 ]
   • textblock-is-gray - Gray background with dark blue subtitle and white text
                         [As seen in story-slider.php#page10 and story-slider.php#page15]
   
   NOTE: Light and dark themes have a dark-blue background in their text-box
   by default, that textbox doesn't require a class.
*/

/* THEME */

/* Theme light 
  [As seen in story-slider.php#page11 ]
*/

.is-fullpage-slider .section.theme-light{
  background: rgba(234, 235, 237, 0.8);
  background: -moz-linear-gradient(top, rgba(57, 105, 125, 1) 0%, rgba(234, 235, 237, 0.8) 45%, rgba(234, 235, 237, 0.8) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(57, 105, 125, 1)), color-stop(45%, rgba(234, 235, 237, 0.8)), color-stop(100%, rgba(234, 235, 237, 0.8)));
  background: -webkit-linear-gradient(top, rgba(57, 105, 125, 1) 0%, rgba(234, 235, 237, 0.8) 45%, rgba(234, 235, 237, 0.8) 100%);
  background: -o-linear-gradient(top, rgba(57, 105, 125, 1) 0%, rgba(234, 235, 237, 0.8) 45%, rgba(234, 235, 237, 0.8) 100%);
  background: -ms-linear-gradient(top, rgba(57, 105, 125, 1) 0%, rgba(234, 235, 237, 0.8) 45%, rgba(234, 235, 237, 0.8) 100%);
  background: linear-gradient(to bottom, rgba(57, 105, 125, 1) 0%, rgba(234, 235, 237, 0.8) 45%, rgba(234, 235, 237, 0.8) 100%);
}

  @media screen and (max-width: 991px){
    .is-fullpage-slider .section.theme-light + .section.theme-light{
      background: rgba(234, 235, 237, 0.8);
    } 
  }

  .is-fullpage-slider .section.theme-light h1.story-title,
  .is-fullpage-slider .section.theme-light h2.story-title,
  .is-fullpage-slider .section.theme-light .story-title{
    color: #263e58;
    text-shadow: none;
  }

  .is-fullpage-slider .section.theme-light h1.story-title .story-type,
  .is-fullpage-slider .section.theme-light h2.story-title .story-type,
  .is-fullpage-slider .section.theme-light .story-title .story-type{
    color: #263e58;
  }

  .is-fullpage-slider .section.theme-light #breadcrumbs, 
  .is-fullpage-slider .section.theme-light .breadcrumbs{
    text-shadow: 2px 1px 2px rgba(0,0,0, 0.5);
  }

  .is-fullpage-slider .section.theme-light #breadcrumbs li,
  .is-fullpage-slider .section.theme-light .breadcrumbs li{
    color: #263e58;
  }   
    @media screen and (min-width: 768px){
      .is-fullpage-slider .section.theme-light #breadcrumbs li,
      .is-fullpage-slider .section.theme-light .breadcrumbs li{
        color: white;
      }
    }

  .is-fullpage-slider .section.theme-light #breadcrumbs li a,
  .is-fullpage-slider .section.theme-light .breadcrumbs li a{
    color: white;
    font-weight: normal;
  }
    .is-fullpage-slider .section.theme-light #breadcrumbs li a:hover,
    .is-fullpage-slider .section.theme-light #breadcrumbs li a:focus,
    .is-fullpage-slider .section.theme-light #breadcrumbs li a:active,
    .is-fullpage-slider .section.theme-light .breadcrumbs li a:hover,
    .is-fullpage-slider .section.theme-light .breadcrumbs li a:focus,
    .is-fullpage-slider .section.theme-light .breadcrumbs li a:active{
      color: #00b2f0;
    }

  .is-fullpage-slider .section.theme-light .wrapper a:not(.btn){
    color: black;
  }

    .is-fullpage-slider .section.theme-light .wrapper a:not(.btn):hover,
    .is-fullpage-slider .section.theme-light .wrapper a:not(.btn):focus,
    .is-fullpage-slider .section.theme-light .wrapper a:not(.btn):active{
      color: #00ade4;
    }

/* Theme white */
.is-fullpage-slider .section.theme-white{
  background: rgba(250,251,254, 1);
}

  .is-fullpage-slider .section.theme-white h1.story-title,
  .is-fullpage-slider .section.theme-white h2.story-title,
  .is-fullpage-slider .section.theme-white .story-title,
  .is-fullpage-slider .section.theme-alpha-white h1.story-title,
  .is-fullpage-slider .section.theme-alpha-white h2.story-title,
  .is-fullpage-slider .section.theme-alpha-white .story-title{
    color: #263e58;
    text-shadow: none;
  }

  .is-fullpage-slider .section.theme-white h1.story-title .story-type,
  .is-fullpage-slider .section.theme-white h2.story-title .story-type,
  .is-fullpage-slider .section.theme-white .story-title .story-type,
  .is-fullpage-slider .section.theme-alpha-white h1.story-title .story-type,
  .is-fullpage-slider .section.theme-alpha-white h2.story-title .story-type,
  .is-fullpage-slider .section.theme-alpha-white .story-title .story-type{
    color: #263e58;
  }


  .is-fullpage-slider .section.theme-white h2.story-subtitle, 
  .is-fullpage-slider .section.theme-white h3.story-subtitle, 
  .is-fullpage-slider .section.theme-white .story-subtitle,
  .is-fullpage-slider .section.theme-alpha-white h2.story-subtitle, 
  .is-fullpage-slider .section.theme-alpha-white h3.story-subtitle, 
  .is-fullpage-slider .section.theme-alpha-white .story-subtitle{
    color: #222632;
    text-shadow: none;
  }

  .is-fullpage-slider .section.theme-white h2.story-subtitle:before, 
  .is-fullpage-slider .section.theme-white h3.story-subtitle:before, 
  .is-fullpage-slider .section.theme-white .story-subtitle:before,
  .is-fullpage-slider .section.theme-alpha-white h2.story-subtitle:before, 
  .is-fullpage-slider .section.theme-alpha-white h3.story-subtitle:before, 
  .is-fullpage-slider .section.theme-alpha-white .story-subtitle:before{
      background: #ffc72c;
    }

  .is-fullpage-slider .section.theme-white .description,
  .is-fullpage-slider .section.theme-alpha-white .description{
    background-color: #bfcdd6;
    color: #263e58;
  }

  .is-fullpage-slider .section.theme-white .wrapper .decor,
  .is-fullpage-slider .section.theme-alpha-white .wrapper .decor{
    border-top-color: #bfcdd6;
  }


  .is-fullpage-slider .section.theme-white #breadcrumbs li,
  .is-fullpage-slider .section.theme-white .breadcrumbs li,
  .is-fullpage-slider .section.theme-alpha-white #breadcrumbs li,
  .is-fullpage-slider .section.theme-alpha-white .breadcrumbs li{
    color: #263e58;
  }   
    @media screen and (min-width: 768px){
      .is-fullpage-slider .section.theme-white #breadcrumbs li,
      .is-fullpage-slider .section.theme-white .breadcrumbs li,
      .is-fullpage-slider .section.theme-alpha-white #breadcrumbs li,
      .is-fullpage-slider .section.theme-alpha-white .breadcrumbs li{
        color: #263e58;
      }
    }

  .is-fullpage-slider .section.theme-white #breadcrumbs li a,
  .is-fullpage-slider .section.theme-white .breadcrumbs li a,
  .is-fullpage-slider .section.theme-alpha-white #breadcrumbs li a,
  .is-fullpage-slider .section.theme-alpha-white .breadcrumbs li a{
    color: #263e58;
    font-weight: normal;
  }
    .is-fullpage-slider .section.theme-white #breadcrumbs li a:hover,
    .is-fullpage-slider .section.theme-white #breadcrumbs li a:focus,
    .is-fullpage-slider .section.theme-white #breadcrumbs li a:active,
    .is-fullpage-slider .section.theme-white .breadcrumbs li a:hover,
    .is-fullpage-slider .section.theme-white .breadcrumbs li a:focus,
    .is-fullpage-slider .section.theme-white .breadcrumbs li a:active,
    .is-fullpage-slider .section.theme-alpha-white #breadcrumbs li a:hover,
    .is-fullpage-slider .section.theme-alpha-white #breadcrumbs li a:focus,
    .is-fullpage-slider .section.theme-alpha-white #breadcrumbs li a:active,
    .is-fullpage-slider .section.theme-alpha-white .breadcrumbs li a:hover,
    .is-fullpage-slider .section.theme-alpha-white .breadcrumbs li a:focus,
    .is-fullpage-slider .section.theme-alpha-white .breadcrumbs li a:active{
      color: #00b2f0;
    }


.is-fullpage-slider .section.theme-white .btn,
.is-fullpage-slider .section.theme-alpha-white .btn,
.is-fullpage-slider .section.theme-black.btn,
.is-fullpage-slider .section.theme-alpha-black .btn{
  text-shadow: none;
}

.is-fullpage-slider .section.theme-white .btn-white,
.is-fullpage-slider .section.theme-alpha-white .btn-white,
.is-fullpage-slider .section.theme-black .btn-white,
.is-fullpage-slider .section.theme-alpha-black .btn-white{}

  .is-fullpage-slider .section.theme-white .btn-white:hover,
  .is-fullpage-slider .section.theme-white .btn-white:focus,
  .is-fullpage-slider .section.theme-white .btn-white:active,
  .is-fullpage-slider .section.theme-alpha-white .btn-white:hover,
  .is-fullpage-slider .section.theme-alpha-white .btn-white:focus,
  .is-fullpage-slider .section.theme-alpha-white .btn-white:active,
  .is-fullpage-slider .section.theme-black .btn-white:hover,
  .is-fullpage-slider .section.theme-black .btn-white:focus,
  .is-fullpage-slider .section.theme-black .btn-white:active,
  .is-fullpage-slider .section.theme-alpha-black .btn-white:hover,
  .is-fullpage-slider .section.theme-alpha-black .btn-white:focus,
  .is-fullpage-slider .section.theme-alpha-black .btn-white:active{
    background: #263e58;
    color: white;
    border-color: #263e58;
  }

.is-fullpage-slider .section.theme-alpha-white .btn-white.btn-hollow,
.is-fullpage-slider .section.theme-white .btn-white.btn-hollow,
.is-fullpage-slider .section.theme-alpha-black .btn-white.btn-hollow,
.is-fullpage-slider .section.theme-black .btn-white.btn-hollow{
  color: #263e58;
}

  .is-fullpage-slider .section.theme-white .btn-white.btn-hollow:hover,
  .is-fullpage-slider .section.theme-white .btn-white.btn-hollow:focus,
  .is-fullpage-slider .section.theme-white .btn-white.btn-hollow:active,
  .is-fullpage-slider .section.theme-alpha-white .btn-white.btn-hollow:hover,
  .is-fullpage-slider .section.theme-alpha-white .btn-white.btn-hollow:focus,
  .is-fullpage-slider .section.theme-alpha-white .btn-white.btn-hollow:active,
  .is-fullpage-slider .section.theme-black .btn-white.btn-hollow:hover,
  .is-fullpage-slider .section.theme-black .btn-white.btn-hollow:focus,
  .is-fullpage-slider .section.theme-black .btn-white.btn-hollow:active,
  .is-fullpage-slider .section.theme-alpha-black .btn-white.btn-hollow:hover,
  .is-fullpage-slider .section.theme-alpha-black .btn-white.btn-hollow:focus,
  .is-fullpage-slider .section.theme-alpha-black .btn-white.btn-hollow:active{
    background: #263e58;
    border-color: #263e58;
    color: white;
  }


/* Theme alpha white */
.is-fullpage-slider .section.theme-alpha-white{
  background: rgba(255,255,255,.9);
}


/* Theme  black */
.is-fullpage-slider .section.theme-black{
  background: rgba(32,32,32,1);
}

.is-fullpage-slider .section.theme-black h2.story-subtitle, 
.is-fullpage-slider .section.theme-black h3.story-subtitle, 
.is-fullpage-slider .section.theme-black .story-subtitle,
.is-fullpage-slider .section.theme-alpha-black h2.story-subtitle, 
.is-fullpage-slider .section.theme-alpha-black h3.story-subtitle, 
.is-fullpage-slider .section.theme-alpha-black .story-subtitle{
  color: #222632;
  text-shadow: none;
}

  .is-fullpage-slider .section.theme-black h2.story-subtitle:before, 
  .is-fullpage-slider .section.theme-black h2.story-subtitle:before, 
  .is-fullpage-slider .section.theme-black h3.story-subtitle:before, 
  .is-fullpage-slider .section.theme-black .story-subtitle:before,
  .is-fullpage-slider .section.theme-alpha-black h2.story-subtitle:before, 
  .is-fullpage-slider .section.theme-alpha-black h3.story-subtitle:before, 
  .is-fullpage-slider .section.theme-alpha-black .story-subtitle:before{
    background: #ffc72c;
  }

.is-fullpage-slider .section.theme-black .description,
.is-fullpage-slider .section.theme-alpha-black .description{
  background-color: #859298;
  color: white;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.is-fullpage-slider .section.theme-black.textblock-is-lightblue .description,
.is-fullpage-slider .section.theme-black.textblock-is-yellow .description,
.is-fullpage-slider .section.theme-black.textblock-is-white .description,
.is-fullpage-slider .section.theme-alpha-black.textblock-is-lightblue .description,
.is-fullpage-slider .section.theme-alpha-black.textblock-is-yellow .description,
.is-fullpage-slider .section.theme-alpha-black.textblock-is-white .description{
  text-shadow: none; 
}

.is-fullpage-slider .section.theme-black .wrapper .decor,
.is-fullpage-slider .section.theme-alpha-black .wrapper .decor{
  border-top-color: #859298;
}


/* Theme alpha black */
.is-fullpage-slider .section.theme-alpha-black{
  background: rgba(32,32,32,.9);
}

/* TEXT BLOCK */

/* Light blue / grayish blue 
   As seen in story-slider.php#page8 and story-slider.php#page13
*/

.is-fullpage-slider .section.textblock-is-lightblue h2.story-subtitle, 
.is-fullpage-slider .section.textblock-is-lightblue h3.story-subtitle, 
.is-fullpage-slider .section.textblock-is-lightblue .story-subtitle{
  color: #263e58;
  text-shadow: none;
}

  .is-fullpage-slider .section.textblock-is-lightblue h2.story-subtitle:before, 
  .is-fullpage-slider .section.textblock-is-lightblue h3.story-subtitle:before, 
  .is-fullpage-slider .section.textblock-is-lightblue .story-subtitle:before{
    background: #263e58;
  }

.is-fullpage-slider .section.textblock-is-lightblue .description{
  background-color: #bfcdd6;
  color: #263e58;
}

.is-fullpage-slider .section.textblock-is-lightblue .wrapper .decor{
  border-top-color: #bfcdd6;
}

.is-fullpage-slider .section.textblock-is-lightblue .btn-white{}

  .is-fullpage-slider .section.textblock-is-lightblue .btn-white:hover,
  .is-fullpage-slider .section.textblock-is-lightblue .btn-white:focus,
  .is-fullpage-slider .section.textblock-is-lightblue .btn-white:active{
    background: #263e58;
    color: white;
    border-color: #263e58;
  }

.is-fullpage-slider .section.textblock-is-lightblue .btn-white.btn-hollow{
  color: #263e58;
}

  .is-fullpage-slider .section.textblock-is-lightblue .btn-white.btn-hollow:hover,
  .is-fullpage-slider .section.textblock-is-lightblue .btn-white.btn-hollow:focus,
  .is-fullpage-slider .section.textblock-is-lightblue .btn-white.btn-hollow:active{
    background: #263e58;
    border-color: #263e58;
    color: white;
  }

/* Yellow 
   As seen in story-slider.php#page7 and story-slider.php#page12
*/

.is-fullpage-slider .section.textblock-is-yellow h2.story-subtitle, 
.is-fullpage-slider .section.textblock-is-yellow h3.story-subtitle, 
.is-fullpage-slider .section.textblock-is-yellow .story-subtitle{
  color: #263e58;
  text-shadow: none;
}

  .is-slider-page .section.textblock-is-yellow h2.story-subtitle.is-big:before, 
  .is-slider-page .section.textblock-is-yellow h3.story-subtitle.is-big:before, 
  .is-slider-page .section.textblock-is-yellow .story-subtitle.is-big:before, 
  .is-slider-page .section.textblock-is-yellow h2.timeline-subtitle.is-big:before, 
  .is-slider-page .section.textblock-is-yellow h3.timeline-subtitle.is-big:before,
  .is-slider-page .section.textblock-is-yellow .timeline-subtitle.is-big:before {
    background: #00b2f0;
  }

.is-fullpage-slider .section.textblock-is-yellow .description{
  background-color: #ffc72c;
  color: #263e58;
}

.is-fullpage-slider .section.textblock-is-yellow .wrapper .decor{
  border-top-color: #ffc72c;
}

.is-fullpage-slider .section.textblock-is-yellow .btn-white:hover,
.is-fullpage-slider .section.textblock-is-yellow .btn-white:focus,
.is-fullpage-slider .section.textblock-is-yellow .btn-white:active{
  background-color: #00ade4;
  border-color: #00ade4;
  color: white;
}

.is-fullpage-slider .section.textblock-is-yellow .btn-white.btn-hollow:hover,
.is-fullpage-slider .section.textblock-is-yellow .btn-white.btn-hollow:focus,
.is-fullpage-slider .section.textblock-is-yellow .btn-white.btn-hollow:active{
  background-color: transparent;
  border-color: #00ade4;
  color: #00ade4;
}

.is-fullpage-slider .section.textblock-is-yellow .btn-primary{}

  .is-fullpage-slider .section.textblock-is-yellow .btn-primary:hover,
  .is-fullpage-slider .section.textblock-is-yellow .btn-primary:focus,
  .is-fullpage-slider .section.textblock-is-yellow .btn-primary:active{
    background: #00ade4;
    color: white;
    border-color: #00ade4;
  }

.is-fullpage-slider .section.textblock-is-yellow .btn-primary.btn-hollow{}

  .is-fullpage-slider .section.textblock-is-yellow .btn-primary.btn-hollow:hover,
  .is-fullpage-slider .section.textblock-is-yellow .btn-primary.btn-hollow:focus,
  .is-fullpage-slider .section.textblock-is-yellow .btn-primary.btn-hollow:active{
    background: #00ade4;
    border-color: #00ade4;
    color: white;
  }


/* White 
   As seen in story-slider.php#page9 and story-slider.php#page14
*/

.is-fullpage-slider .section.textblock-is-white h2.story-subtitle, 
.is-fullpage-slider .section.textblock-is-white h3.story-subtitle, 
.is-fullpage-slider .section.textblock-is-white .story-subtitle{
  color: #263e58;
  text-shadow: none;
}

.is-fullpage-slider .section.textblock-is-white .description{
  background-color: #f1f2f2;
  color: #5e5e5e;
}

.is-fullpage-slider .section.textblock-is-white .wrapper .decor{
  border-top-color: #f1f2f2;
}

/* Gray 
   As seen in story-slider.php#page10 and story-slider.php#page15
*/

.is-fullpage-slider .section.textblock-is-gray h2.story-subtitle, 
.is-fullpage-slider .section.textblock-is-gray h3.story-subtitle, 
.is-fullpage-slider .section.textblock-is-gray .story-subtitle{
  color: #222632;
  text-shadow: none;
}

  .is-fullpage-slider .section.textblock-is-gray h2.story-subtitle:before, 
  .is-fullpage-slider .section.textblock-is-gray h3.story-subtitle:before, 
  .is-fullpage-slider .section.textblock-is-gray .story-subtitle:before{
    background: #ffc72c;
  }

.is-fullpage-slider .section.textblock-is-gray .description{
  background-color: #859298;
  color: white;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.is-fullpage-slider .section.textblock-is-gray .wrapper .decor{
  border-top-color: #859298;
}

.is-fullpage-slider .section.textblock-is-gray .btn{
  text-shadow: none;
}

.is-fullpage-slider .section.textblock-is-gray .btn-white{}

  .is-fullpage-slider .section.textblock-is-gray .btn-white:hover,
  .is-fullpage-slider .section.textblock-is-gray .btn-white:focus,
  .is-fullpage-slider .section.textblock-is-gray .btn-white:active{
    background: #263e58;
    color: white;
    border-color: #263e58;
  }

.is-fullpage-slider .section.textblock-is-gray .btn-white.btn-hollow{
  color: #263e58;
}

  .is-fullpage-slider .section.textblock-is-gray .btn-white.btn-hollow:hover,
  .is-fullpage-slider .section.textblock-is-gray .btn-white.btn-hollow:focus,
  .is-fullpage-slider .section.textblock-is-gray .btn-white.btn-hollow:active{
    background: #263e58;
    border-color: #263e58;
    color: white;
  }

  .is-fullpage-slider .section.theme-light.textblock-is-gray .btn-white.btn-hollow{
    color: white;
  }




/* link group */ 

.link-group{
  list-style-type: none;
  margin: 20px 0;
  padding: 0;
}

  .link-group li{
    min-height: 24px;    
  }

  @media screen and (min-width: 992px){
    .link-group li:nth-child(even):before{
      background: #364252;
      content: "";
      display: block;
      height: 24px;
      left: 0;
      position: absolute;
      top: 0;
      width: 1px;
    }
  }


/* Global alert bar */
.global-alert-bar{
  background: #1c2e44;
  border: none;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  color: white;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: 100%;
  z-index: 10;
}

  .global-alert-bar:before{
    background: #2fa7e6;
    content: "";
    display: block;
    left: 0;
    position: absolute;
    top: 0;
    z-index: 1;
  }


    @media  screen and (min-width: 992px){       
      .global-alert-bar:before{
        height: 100%;
        margin-left: -50%;
        width: 100%;
      }
    }


.global-alert-bar .container{}

    @media  screen and (min-width: 992px){
      .global-alert-bar .container{
        padding-right: 40px;
      }
    }
    

.global-alert-bar .row{
  position: relative;
  z-index: 5;
}
.global-alert-bar .col-12{
  background: #1c2e44;
}

.global-alert-bar .col-12.title{
  align-self: center;
  color: #2fa7e6;
  font-size: 18px;
  font-weight: bold;
  padding-right: 30px;
}

  @media  screen and (min-width: 992px){       
    .global-alert-bar .col-12.title{
      background: #2fa7e6;
      color: white;
      padding-right: 40px;
    }
  }
  
  .global-alert-bar .col-12.title p{
    margin: 0;
    padding-top: 10px;
  }

    @media  screen and (min-width: 992px){       
      .global-alert-bar .col-12.title p{
        padding-top: 0;
      }
    }
    @media  screen and (min-width: 992px){    
      .ie-10 .global-alert-bar .col-12.title p{
        padding-top: 10px;
      }
    }

.global-alert-bar .wrapper{
  padding-bottom: 20px;
}
@media  screen and (min-width: 992px){  

  .global-alert-bar .wrapper{
    padding-bottom: 0;
  }
}

.global-alert-bar .text{
  display: inline-block;
  vertical-align: middle;
}

@media  screen and (min-width: 768px){       
    .global-alert-bar .text{
      max-width: 70%;
    }
  }

  @media  screen and (min-width: 992px){       
    .global-alert-bar .text{
      padding: 10px 0 0;
    }
  }

.global-alert-bar .cta-button{
  display: inline-block;
  vertical-align: middle;
}

.global-alert-bar a:not(.btn){
  color: #ffc72c;
}

.global-alert-bar a:not(.btn):hover,
.global-alert-bar a:not(.btn):focus,
.global-alert-bar a:not(.btn):active{
  color: #2fa7e6;
}

.global-alert-bar .close-btn{
  color: #ffc72c;
  opacity: 1;
  padding: 0;
  position: absolute;
  right: 15px;
  text-shadow: none;
  top: 10px;
}

  @media  screen and (min-width: 992px){       
    .global-alert-bar .close-btn{
      right: -10px;
    }
  }
  .global-alert-bar .close-btn:hover,
  .global-alert-bar .close-btn:focus,
  .global-alert-bar .close-btn:active{
    color: #2fa7e6;
  }
  /* Box Design from legacy css */
/* ==================================================== */
.box {
    background: none repeat scroll 0 0 #305572;
    color: white;
    font-family: lato;
    padding: 20px;
}
.box > h3 {
    margin-top: 0;
    text-transform: uppercase;
    font-size: 30px;
}
.box > p {
    font-family: lato;
    font-size: 17px;
}
/* This design is for custom videos */
/*========================================= */
.modal-backdrop {
  display: none;
}

.modal {
  background: rgba(0,0,0,0.5);
}
@media only screen and (max-width: 600px) {
 .popupBoxWrapper{
     width:100%;
  }
}