/**
 * Variables
 */

/* Breakpoints */

:root {

  /* Brand colors */

  /* Typography */ /* 32px */ /* 24px */ /* 20px */ /* 18px - Lede */ /* 16px - Body */ /* 14px */ /* 12px - Sub, Caption */ /* 48px - Headline */ /* 40px - H1 */ /* 32px - H2 */ /* 24px - H3 */ /* 18px - H4 */ /* 16px - H5 */ /* 14px - H6 */

  /* Spacing */ /* 4px */ /* 8px */ /* 16px */ /* 24px */ /* 32px */ /* 40px */ /* 48px */ /* 56px */ /* 64px */ /* 72px */ /* 80px */ /* 88px */

  /* Layout */

  /* Ratios */ /* 100%:56.25% = 16:9 */

  /* Utility */
}

@media (max-width: 719px) {
  :root { /* 24px */ /* 20px */ /* 18px */ /* 16px - Lede */ /* 14px - Body */ /* 12px */ /* 10px - Sub, Caption */ /* 36px - Headline */ /* 30px - H1 */ /* 24px - H2 */ /* 20px - H3 */ /* 18px - H4 */ /* 16px - H5 */ /* 14px - H6 */
  }
}

:root {

  /* Brand colors */

  /* Alert Colors */

  /* Design */

  /* Typography */ /* 10px */ /* 40px */

  /* Form */

  /* Header */

  /* Spacing Extra */

  /* Heading Sizes Extra */ /* 20px - H3 Tiles large to x-large */

  /* Tiles */
}

/**
 * Global Header
 *
 * Markup: global-header.twig
 *
 * Style guide: Grouped Components.global-header
 */

@media (min-width: 720px) {

.global__toggle {
    display: none
}
  }

.global__toggle__menu {
  border: 0 none;
  background-color: rgb(255, 255, 255);
}

/**
 * Logo
 *
 * Markup: logo.twig
 *
 * Style guide: Elements.logo
 */

/**
 * Primary Header
 *
 * A simple inline version of the Primary Header that contains Logo, Navigation and Search
 *
 * Markup: primary-header.twig
 *
 * Style guide: Grouped Components.global-header.primary-header
 */

.global__primary {
  background-color: rgb(255, 255, 255);
  font-size: 0.875rem;
  color: rgb(0, 0, 0)
}

@media (max-width: 719px) {

  .global__primary {
  font-size: 0.75rem
  }
}

.global__primary .section__content {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
            justify-content: space-between;
  }

.global__primary__nav {
  display: none
}

@media (min-width: 720px) {

.global__primary__nav {
    display: -webkit-box;
    display: flex
}
  }

.global__primary__nav--open {
  display: block;
  width: 100%;
}

.global__primary__search {
  margin-top: 1.5rem
}

@media (min-width: 720px) and (max-width: 945px) {

.global__primary__search {
    display: none
}
  }

@media (min-width: 720px) {

.global__primary__search {
    margin-top: 0;
    margin-left: 1.5rem
}
  }

.global__primary__search label {
    display: none;
  }

.global__primary__search__input {
  width: 100%;
}

/**
 * Primary Header Stacked
 *
 * A version of the Primary Navigation which is stacked. The Logo and Search appear in the same row and a new row is created below to contain
 * the main Navigation. Additional styles and markup allow for left and right sections of the navigation, background colour to stretch full screen and padding to suit this layout.
 *
 * Markup: primary-header--stacked.twig
 *
 * Style guide: Grouped Components.global-header.primary-header-stacked
 */

.global__primary--stacked .section__content {
    padding: 0;
  }

.global__primary--stacked .global__primary__nav-menu {
    background-color: rgb(230, 236, 241)
  }

@media (max-width: 719px) {

.global__primary--stacked .global__primary__nav-menu {
      background-color: rgb(255, 255, 255)
  }
    }

.global__primary--stacked .nav {
    padding-left: 0;
    width: 100%
  }

@media (min-width: 720px) {

.global__primary--stacked .nav {
      width: auto
  }
    }

.global__primary--stacked .nav__level-1 {
    width: 100%;
  }

.global__primary--stacked .global__primary__search {
    margin: 0.5rem 0;
  }

.global__primary__logo-search {
  -webkit-box-flex: 0;
          flex: 0 0 100%;
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
          justify-content: space-between;
  padding: 0 1.5rem
}

@media (max-width: 719px) {

.global__primary__logo-search .global__primary__nav {
      background-color: rgb(255, 255, 255);
      margin-left: -1.5rem;
      margin-right: -1.5rem;
      width: calc(100vw - 3rem);
      padding: 0 1.5rem
  }
    }

.global__primary__nav-menu {
  display: none;
  -webkit-box-flex: 0;
          flex: 0 0 100%;
  -webkit-box-pack: justify;
          justify-content: space-between;
  padding: 0.5rem 0
}

@media (min-width: 720px) {

.global__primary__nav-menu {
    display: -webkit-box;
    display: flex
}
  }

.global__primary__nav-menu.global__primary__nav--open {
    display: -webkit-box;
    display: flex;
  }

.global__primary__nav-menu .section__content {
    width: 100%;
    padding: 0 1.5rem;
  }

.global__primary__nav-menu .button {
    margin-top: 0.25rem;
  }

.global__primary__nav-menu .nav {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
            align-items: center;
    margin-top: 0
  }

@media (min-width: 720px) {

.global__primary__nav-menu .nav {
      padding-left: 0.5rem
  }
    }

.global__primary__nav-left,
.global__primary__nav-right {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  width: 100%
}

.global__primary__nav-left > *, .global__primary__nav-right > * {
    width: 100%;
  }

@media (min-width: 720px) {

.global__primary__nav-left,
.global__primary__nav-right {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
            flex-direction: row;
    -webkit-box-pack: center;
            justify-content: center;
    -webkit-box-align: center;
            align-items: center;
    width: auto
}

    .global__primary__nav-left > *, .global__primary__nav-right > * {
      width: auto;
    }
  }

/**
 * Secondary Header
 *
 * Markup: secondary-header.twig
 *
 * Style guide: Elements.secondary-header
 */

.global__secondary {
  background-color: rgb(10, 65, 122);
  font-size: 0.875rem;
  color: rgb(255, 255, 255)
}

@media (max-width: 719px) {

  .global__secondary {
  font-size: 0.75rem
  }
}

.global__secondary .section__content {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
            justify-content: space-between;
  }

.global__secondary a {
    color: rgb(255, 255, 255);
    text-decoration: none
  }

.global__secondary a:hover,
    .global__secondary a:focus {
      text-decoration: underline;
    }

.global__secondary__nav {
  display: none
}

@media (min-width: 720px) {

.global__secondary__nav {
    display: inline-block
}
  }

/**
 * Global Footer
 *
 * Markup: global-footer.twig
 *
 * Style guide: Grouped Components.footer
 */

.global__footer {
  background-color: rgb(10, 65, 122);
  color: rgb(255, 255, 255);
  font-size: 0.875rem
}

@media (max-width: 719px) {

  .global__footer {
  font-size: 0.75rem
  }
}

.global__footer a {
    color: rgb(255, 255, 255);
  }

@media (max-width: 719px) {

.global__footer__logo {
    margin-bottom: 4rem;
    text-align: center
}
  }

.global__footer__meta {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgb(255, 255, 255);
  text-align: center;
  line-height: 2
}

@media (min-width: 720px) {

.global__footer__meta {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
            justify-content: space-between
}
  }

@media (max-width: 719px) {

.global__footer__meta .nav--inline > ul > li {
      display: block
  }
    }

/**
 * Secondary Menu
 *
 * Markup: secondary-menu.twig
 *
 * Style guide: Components.secondary-menu
 */

.global__secondary__nav ul {
    font-size: 0.875rem;
  }

@media (max-width: 719px) {

  .global__secondary__nav ul {
    font-size: 0.75rem
  }
}

.global__secondary__nav a {
    font-size: 0.875rem;
  }

@media (max-width: 719px) {

  .global__secondary__nav a {
    font-size: 0.75rem
  }
}

@media (max-width: 945px) {
    .global__secondary__nav.nav--inline {
      display: block
    }

      .global__secondary__nav.nav--inline > ul {
        display: -webkit-box;
        display: flex;
        flex-wrap: wrap;
        -webkit-box-pack: justify;
                justify-content: space-between
      }

        .global__secondary__nav.nav--inline > ul > li {
          width: calc(50% - 0.5rem);
          margin-left: 0;
          margin-bottom: 0.5rem;
        }

      .global__secondary__nav.nav--inline a {
        border: 1px solid rgb(10, 65, 122);
        border-radius: 3px;
        height: 3.5rem;
        line-height: 1;
        display: -webkit-box;
        display: flex;
        -webkit-box-pack: center;
                justify-content: center;
        -webkit-box-align: center;
                align-items: center;
        text-align: center;
        padding: 0.5rem;
      }
  }

@media (max-width: 945px) {

.global__secondary {
    display: none;
    margin-top: 1rem;
    border-top: 1px solid rgb(194, 196, 199)
}

    .global__secondary.section--top-xs {
      padding-top: 2rem;
    }

    .global__secondary.global__secondary--show-mobile {
      display: block;
    }
  }

@media (max-width: 945px) {

.global__secondary .section__content {
      padding-left: 0.25rem;
      padding-right: 0.25rem
  }

      .global__secondary .section__content > div {
        width: 100%;
      }
    }

@media (min-width: 946px) {
      .global__secondary .section__content > *:last-child {
        margin-left: auto;
      }
    }

/* Fix for logo__search in styleguide */

.global__primary__logo-search {
  padding-top: 1rem;
  padding-bottom: 1rem
}

@media (max-width: 945px) {

.global__primary__logo-search {
    max-width: 100vw
}

    .global__primary__logo-search .global__primary__nav {
      -webkit-box-flex: 0;
              flex: 0 0 100vw;
    }
  }

@media (max-width: 539px) {
    .global__primary__logo-search .global__primary__nav {
      padding: 0;
      margin: 0;
      -webkit-box-flex: 0;
              flex: 0 0 calc(100vw - .5rem);
    }
  }

@media (max-width: 945px) {
  .global__toggle {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
            align-items: center;
  }

  .global__primary__nav-left .nav__level-1 {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    -webkit-box-pack: center;
            justify-content: center;
    -webkit-box-align: center;
            align-items: center;
    width: 100%;
  }

  .global__primary__nav-menu {
    display: none;
    padding: 0
  }

    .global__primary__nav-menu .nav {
      padding-left: 0;
    }
      .global__primary__logo-search .global__primary__nav--open .global__primary__search {
        display: block;
        width: 100%;
      }

  .global__primary__nav-left,
  .global__primary__nav-right,
  .global__primary__nav-left > *,
  .global__primary__nav-right > * {
    width: 100%;
  }
    .global__primary--stacked .global__primary__nav-menu {
      background-color: rgb(255, 255, 255);
    }
}

@media (min-width: 720px) and (max-width: 945px) {
    .global__primary__logo-search .global__primary__nav--open {
      -webkit-box-flex: 0;
              flex: 0 0 calc(100vw - 3rem);
    }
}

.global__secondary .section__content {
    max-width: calc(1180px - 3rem);
  }