/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/2815083
 * @preserve
 */

/**
 * @file
 * Navigation in header.
 */

/*
  Media query breakpoints.
  Processed by postcss/postcss-custom-media.
*/

/* Navigation related breakpoints */

/* Grid related breakpoints */

/* Grid shifts from 6 to 14 columns. */

/* Width of the entire grid maxes out. */

/*
  Custom CSS properties.

  These are "compiled" by postcss/postcss-custom-properties for IE11 compatibility.
*/

:root {

  /* Typography */

  /* Layout */

  /* Drupal administrative toolbar heights and width. */

  /*
    Grid helpers.

    These variables help authors apply widths and negative margins to break items out of
    the grid, while still conforming to the larger grid system.

    Note we cannot change the values of these custom properties within media queries,
    as they are processed by postcss/postcss-custom-properties (for IE11 compatibility),
    which does not support that functionality. Therefore, we need a separate custom
    property for each breakpoint. 😭
  */ /* Approximate width of a scrollbar. Doesn't have to be perfect. */

  /* Grid gap across various breakpoints. */

  /* Column counts at various breakpoints. */

  /* Count of grid-gaps at various breakpoints. */

  /* Width of the entire grid at various breakpoints. */

  /* Width of a grid column at various breakpoints */

  /* Layout helpers */ /* Black */ /* Black 1 */ /* Black 2 */ /* Black 3 */ /* Gray Dark */ /* Gray medium */ /* Gray medium 1 */ /* Gray medium 2 */ /* Black 4 */ /* Gray light */ /* Gray light 1 */ /* Gray light 2 */ /* Blue dark 2 */ /* Blue medium */ /* Blue bright */ /* Blue bright 5 */ /* White */ /* Red */ /* Gold */ /* Green */ /* middle green */ /* light green */ /* dark green */ /* text color */
  
  /*
  $middle-green: #69aa41;
  $dark-green  : #376437;
  $light-green : #BECD2D;
  $dark-grey   : #555555;

  $color-primary: #286090;
  $color-danger : #c9302c;
  $text-color: #58595b;
  */

  /* Shadows */

  /* Radius */

  /* Outlines */

  /* Header */

  /* Width of slide out navigation */

  /* Border radius */

  /* Form */
}

[dir="ltr"] .header-nav {
  right: 0
}

[dir="rtl"] .header-nav {
  left: 0
}

[dir="ltr"] .header-nav {
  padding-left: 18px
}

[dir="rtl"] .header-nav {
  padding-right: 18px
}

[dir="ltr"] .header-nav {
  padding-right: 18px
}

[dir="rtl"] .header-nav {
  padding-left: 18px
}

.header-nav {
  position: fixed;
  z-index: 5; /* appear above overlay */
  top: 0;
  visibility: hidden;
  overflow: auto;
  /* Ensure that header nav not use additional space and force
     system branding block text to unnecessarily wrap. */
  flex-basis: 0;
  flex-grow: 1; /* Necessary for IE11. */
  width: 100%;
  max-width: 500px;
  height: 100%;
  padding-top: 0;
  padding-bottom: 18px;
  transform: translateX(101%); /* LTR */
  border-top: solid #fff 54px; /* Create room for the "close" button. */
  background-color: #fff;
  box-shadow: 0 0 72px rgba(0, 0, 0, 0.1)
}

.header-nav.is-active {
    visibility: visible;
  }

@supports (flex-basis: max-content) {

.header-nav {
    flex-basis: max-content
}
  }

@media (min-width: 500px) {

.header-nav {
    border-top-width: 90px
}
  }

@media (min-width: 700px) {

[dir="ltr"] .header-nav {
    padding-left: 54px
  }

[dir="rtl"] .header-nav {
    padding-right: 54px
  }

.header-nav {
    padding-bottom: 54px;
    border-top-width: 126px
}
  }

@media (min-width: 1000px) {

.header-nav {
    -ms-grid-column: 5;
    -ms-grid-column-span: 9;
    grid-column: 5 / 14
}
  }

/*
 * Only apply transition styles when JS is loaded. This
 * works around https://bugs.chromium.org/p/chromium/issues/detail?id=332189
 */

html.js .header-nav {
  transition: visibility 0.2s, transform 0.2s;
}

/* Toolbar is fixed, and tray is vertical. */

body.toolbar-vertical .header-nav {
  border-top-width: 93px
}

@media (min-width: 500px) {

body.toolbar-vertical .header-nav {
    border-top-width: 129px
}
  }

/* Toolbar is fixed, and tray is vertical or toolbar is horizontal and tray is closed. */

@media (min-width: 700px) {

body.toolbar-vertical .header-nav,
body.toolbar-horizontal.toolbar-fixed .header-nav {
    border-top-width: 165px
}
  }

/* Toolbar is horizontal fixed, and tray is open. */

@media (min-width: 700px) {

body.toolbar-horizontal.toolbar-fixed.toolbar-tray-open .header-nav {
    border-top-width: 205px
}
  }

@media (min-width: 1200px) {

[dir="ltr"] body:not(.is-always-mobile-nav) .header-nav {
    padding-left: 0
  }

[dir="rtl"] body:not(.is-always-mobile-nav) .header-nav {
    padding-right: 0
  }

[dir="ltr"] body:not(.is-always-mobile-nav) .header-nav {
    padding-right: 0
  }

[dir="rtl"] body:not(.is-always-mobile-nav) .header-nav {
    padding-left: 0
  }

body:not(.is-always-mobile-nav) .header-nav {
    position: static;
    display: flex;
    visibility: visible;
    overflow: visible;
    -ms-grid-column: 5;
    -ms-grid-column-span: 10;
    grid-column: 5 / 15;
    align-items: center;
    justify-content: flex-end;
    max-width: none;
    height: 108px;
    margin-top: auto;
    padding-top: 0;
    padding-bottom: 0;
    transition: transform 0.2s;
    transform: none;
    border-top: 0;
    box-shadow: none
}
  }

body.is-always-mobile-nav {
  /* Toolbar is fixed, and tray is vertical or toolbar is horizontal and tray is closed. */
}

@media (min-width: 1200px) {

body.is-always-mobile-nav.toolbar-vertical .header-nav,
  body.is-always-mobile-nav.toolbar-horizontal.toolbar-fixed .header-nav {
      border-top-width: 237px
  }
    }

body.is-always-mobile-nav {

  /* Toolbar is horizontal fixed, and tray is open. */
}

@media (min-width: 1200px) {

body.is-always-mobile-nav.toolbar-horizontal.toolbar-fixed.toolbar-tray-open .header-nav {
      border-top-width: 277px
  }
    }

@media (min-width: 1200px) {

[dir="ltr"] body.is-always-mobile-nav .header-nav {
      left: 100vw;
      right: auto
  }

[dir="rtl"] body.is-always-mobile-nav .header-nav {
      right: 100vw;
      left: auto
  }

[dir="ltr"] body.is-always-mobile-nav .header-nav {
      padding-right: 18px
  }

[dir="rtl"] body.is-always-mobile-nav .header-nav {
      padding-left: 18px
  }

body.is-always-mobile-nav .header-nav {
      overflow: auto;
      max-width: calc(7*((100vw - 645px)/14 + 36px));
      transition: transform 0.2s, visibility 0.2s;
      border-top-width: 198px
  }

      body.is-always-mobile-nav .header-nav.is-active {
        transform: translateX(-100%); /* LTR */
      }
    }

@media (min-width: 1440px) {

[dir="ltr"] body.is-always-mobile-nav .header-nav {
      padding-right: calc(100vw - 1422px)
  }

[dir="rtl"] body.is-always-mobile-nav .header-nav {
      padding-left: calc(100vw - 1422px)
  }

body.is-always-mobile-nav .header-nav {
      max-width: calc(100vw - 783px)
  }
    }

/* Necessary to override specificity of LTR and RTL compiled selectors. */

[dir] .header-nav.is-active {
  transform: translateX(0);
}

@media (min-width: 1200px) {

[dir="rtl"] body.is-always-mobile-nav .header-nav.is-active {
      transform: translateX(100%)
  }
    }

[dir="rtl"] .header-nav {
    transform: translateX(-101%);
  }