/*----------------------------------------------*\
    HEADER
	======

	@package ccr

\*----------------------------------------------*/
/*----------------------------------------------*\
    COMPONENTS
	==========

	@package ccr

\*----------------------------------------------*/
/*
 *
 * / Variables
------------------------------------------------*/
/* Colors */
/* Breakpoints */
/* 368px, bigger phones */
/* 560px */
/* 800px */
/* 1008px, tablet vertical */
/* 1200px */
/* Max Widths */
/* 1040px */
/* 672px */
/* Fonts */
/*
 *
 * / Mixins
------------------------------------------------*/
/*
 *
 * 1./ Header
------------------------------------------------*/
.site-header {
  font-size: .9em;
  display: -ms-flexbox;
  display: flex;
  border-bottom: 1px solid #444;
  margin-bottom: 1.5em;
  padding-top: 1.5em;
  padding-bottom: 1em; }

.site-title {
  font-size: 1.2em;
  font-family: proxima-nova, Arial, sans-serif;
  color: #444;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  width: 100%; }
  @media screen and (min-width: 35rem) {
    .site-title {
      text-align: left;
      width: unset; } }
  .site-title__logo {
    color: #444;
    margin-top: .15em; }
  .site-title__byline {
    font-style: italic;
    margin-top: .25em;
    font-size: .7em; }
  .site-title a {
    color: inherit;
    text-decoration: none; }

/*
 *
 * 2./ Navigation
------------------------------------------------*/
.site-navigation {
  display: -ms-flexbox;
  display: flex;
  z-index: 999;
  -ms-flex-positive: 1;
      flex-grow: 1; }
  @media screen and (min-width: 35rem) {
    .site-navigation {
      font-size: .9em;
      -ms-flex-pack: end;
          justify-content: flex-end; } }
  .site-navigation .menu-primary-menu-container {
    display: none; }
    @media screen and (min-width: 35rem) {
      .site-navigation .menu-primary-menu-container {
        display: -ms-flexbox;
        display: flex; } }
    .menu-show .site-navigation .menu-primary-menu-container {
      display: -ms-flexbox;
      display: flex; }
  .site-navigation .menu {
    display: block;
    position: absolute;
    top: 5.5em;
    right: 0;
    width: 100vw;
    background-color: white;
    -webkit-box-shadow: 0px 20px 20px rgba(0, 0, 0, 0.2);
            box-shadow: 0px 20px 20px rgba(0, 0, 0, 0.2); }
    @media screen and (min-width: 35rem) {
      .site-navigation .menu {
        display: -ms-flexbox;
        display: flex;
        position: unset;
        top: unset;
        right: unset;
        width: 100%;
        height: unset;
        z-index: unset;
        background-color: unset;
        padding-top: unset;
        -ms-flex-pack: end;
            justify-content: flex-end;
        -webkit-box-shadow: none;
                box-shadow: none; }
        .menu-show .site-navigation .menu {
          display: -ms-flexbox;
          display: flex; } }
    .site-navigation .menu .menu-item {
      position: relative; }
      .site-navigation .menu .menu-item.menu-item-has-children > a::after {
        content: '\25BC';
        font-size: 0.5em;
        padding-left: 1em;
        vertical-align: middle; }
      .site-navigation .menu .menu-item.menu-item-has-children > .menu-shown::after {
        content: '\25B2'; }
      .site-navigation .menu .menu-item > a.menu-shown {
        background-color: #fff;
        color: #444; }
    .site-navigation .menu .menu-item .sub-menu {
      min-width: 11em;
      background-color: #fff;
      z-index: 9999;
      display: none;
      min-width: 10em;
      font-size: 1.3em; }
      @media screen and (min-width: 35rem) {
        .site-navigation .menu .menu-item .sub-menu {
          font-size: .92em;
          -webkit-box-shadow: 3px 7px 10px rgba(0, 0, 0, 0.1);
                  box-shadow: 3px 7px 10px rgba(0, 0, 0, 0.1); }
          .site-navigation .menu .menu-item .sub-menu.overflow-menu {
            font-size: 1em; } }
      .site-navigation .menu .menu-item .sub-menu.show-sub-menu {
        display: block;
        position: relative;
        background-color: #fff; }
        @media screen and (min-width: 35rem) {
          .site-navigation .menu .menu-item .sub-menu.show-sub-menu {
            position: absolute; } }
        .site-navigation .menu .menu-item .sub-menu.show-sub-menu * {
          color: #65737c; }
      .site-navigation .menu .menu-item .sub-menu > .menu-item a:hover {
        background-color: #444;
        color: #fff; }

.dropdown-trigger-container {
  display: block;
  position: absolute;
  z-index: 999;
  top: 0;
  right: 0; }
  @media screen and (min-width: 35rem) {
    .dropdown-trigger-container {
      display: none; } }
  .dropdown-trigger-container .dropdown-trigger {
    position: absolute;
    top: 1em;
    right: 1em; }
    @media screen and (min-width: 35rem) {
      .dropdown-trigger-container .dropdown-trigger {
        right: 2em; } }
    .dropdown-trigger-container .dropdown-trigger svg {
      width: 2.25rem;
      height: auto;
      stroke: #444;
      fill: none;
      stroke-width: 2; }
  .menu-show .dropdown-trigger-container {
    position: fixed; }

/*
 *
 * 3./ Breadcrumb & Page Title
------------------------------------------------*/
.breadcrumb {
  padding-bottom: 1em;
  border-bottom: solid 2px #444;
  margin-bottom: 1em; }
  .breadcrumb__trail {
    display: inline-block; }
    .breadcrumb__trail * {
      display: inline-block; }
    .breadcrumb__trail li {
      font-size: .9em; }
      .breadcrumb__trail li::after {
        content: '';
        margin: 0 .5em 0 1em;
        background-image: url(../../images/separator-triangle.svg);
        background-repeat: no-repeat;
        background-size: contain;
        display: inline-block;
        height: .5em;
        width: .5em;
        position: relative;
        bottom: 1px; }
    .breadcrumb__trail a {
      text-decoration: none;
      color: #444; }
  .breadcrumb__page-title {
    font-size: .9em;
    display: inline-block;
    font-weight: bold; }

/*
 *
 * 1./ Accessible Navigation
------------------------------------------------*/
/* Only if JS is enabled ... */
.js .site-navigation {
  /* Toggle menu */
  /* Toggle submenu */ }
  @media screen and (min-width: 35rem) {
    .js .site-navigation {
      /* Show nav only when js is done with overflow menu calculations */
      /* This prevents seeing the menu overlaping anything */
      opacity: 0;
      -webkit-transition: opacity .1s;
      -o-transition: opacity .1s;
      transition: opacity .1s; }
      .nav-rendered.js .site-navigation {
        opacity: 1; } }
  .js .site-navigation .menu {
    display: none; }
    @media screen and (min-width: 35rem) {
      .js .site-navigation .menu {
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap; } }
  .js .site-navigation.toggled-on .menu {
    display: block; }
  .js .site-navigation .sub-menu {
    display: none; }
  .js .site-navigation .sub-menu-toggled-on > .sub-menu {
    display: block; }
  @media screen and (min-width: 35rem) {
    .js .site-navigation .menu-item-has-children:hover > .sub-menu {
      display: block; } }
  .js .site-navigation .menu-item:last-child:hover > .sub-menu {
    right: 0; }

.site-navigation {
  /* Toggle Link */
  /* Format Menu */
  /* Format Submenu */
  /* Format Menu items */ }
  .site-navigation button {
    cursor: default; }
    .site-navigation button::-moz-focus-inner {
      border: 0; }
  .site-navigation .menu-toggle {
    padding: 1em;
    position: absolute;
    top: 0;
    right: 0; }
    @media screen and (min-width: 35rem) {
      .site-navigation .menu-toggle {
        display: none; } }
    .site-navigation .menu-toggle:hover, .site-navigation .menu-toggle:focus {
      background-color: #f1f1f1; }
    .site-navigation .menu-toggle:focus {
      outline: dotted 1px #999; }
    .site-navigation .menu-toggle svg {
      stroke: black; }
  .site-navigation.toggled-on .menu-toggle {
    background-color: #333;
    color: #fff; }
    .site-navigation.toggled-on .menu-toggle svg {
      stroke: white; }
  .site-navigation .menu {
    border-bottom: solid 1px black; }
    @media screen and (min-width: 35rem) {
      .site-navigation .menu {
        border-bottom: 0; } }
  .site-navigation .sub-menu {
    padding-left: 1em;
    /* indent seach submenu on mobile */ }
    @media screen and (min-width: 35rem) {
      .js .site-navigation .sub-menu {
        padding-left: 0;
        position: absolute;
        min-width: 100%; } }
  .site-navigation .overflow-menu {
    /* Overflow menu needs to align differently */ }
    @media screen and (min-width: 35rem) {
      .site-navigation .overflow-menu {
        right: 0; } }
  .site-navigation .menu-item-has-children {
    position: relative; }
  .site-navigation .sub-menu .menu-item-has-children .sub-menu {
    /* All submenus but the first, alignment for dropdown */ }
    @media screen and (min-width: 35rem) {
      .site-navigation .sub-menu .menu-item-has-children .sub-menu {
        left: 100%;
        top: 25%; } }
  .site-navigation .overflow-menu .menu-item-has-children .sub-menu {
    /* Overflow menu needs to align differently */ }
    @media screen and (min-width: 35rem) {
      .site-navigation .overflow-menu .menu-item-has-children .sub-menu {
        left: auto;
        right: 100%; } }
  .site-navigation .menu-item {
    border-bottom: solid 1px black; }
    @media screen and (min-width: 35rem) {
      .site-navigation .menu-item {
        border-bottom: 0; }
        .site-navigation .menu-item:last-child:hover > .sub-menu {
          right: 0; } }
    .site-navigation .menu-item:last-child {
      border-bottom: 0; }
    .site-navigation .menu-item > a, .site-navigation .menu-item > button {
      text-decoration: none;
      color: #444;
      padding: .4em .75em;
      display: block;
      font-family: proxima-nova, Arial, sans-serif;
      font-size: 1.8rem;
      white-space: nowrap; }
      @media screen and (min-width: 35rem) {
        .site-navigation .menu-item > a, .site-navigation .menu-item > button {
          font-size: 1em; } }
      @media screen and (min-width: 63rem) {
        .site-navigation .menu-item > a, .site-navigation .menu-item > button {
          font-size: 1.1em; } }
      .site-navigation .menu-item > a:hover, .site-navigation .menu-item > a:focus, .site-navigation .menu-item > button:hover, .site-navigation .menu-item > button:focus {
        background-color: #f1f1f1; }
      @media screen and (min-width: 35rem) {
        .menu-item-has-children:hover > button {
          background-color: #f1f1f1;
          /* keeps parent menu item highlighted when mouse moves over dropdown children*/ } }
      .site-navigation .menu-item > a:focus, .site-navigation .menu-item > button:focus {
        outline: dotted 1px #999; }
    .site-navigation .menu-item > button {
      width: 100%;
      text-align: left;
      position: relative;
      padding-right: 1.25em; }
      .site-navigation .menu-item > button::after {
        content: '\25BC';
        font-size: 0.5em;
        padding-left: 1em;
        vertical-align: middle; }
    .site-navigation .menu-item.sub-menu-toggled-on > button::after {
      -webkit-transform: rotate(0deg);
          -ms-transform: rotate(0deg);
              transform: rotate(0deg); }
      @media screen and (min-width: 35rem) {
        .js .site-navigation .menu-item.sub-menu-toggled-on > button::after {
          -webkit-transform: rotate(-90deg);
              -ms-transform: rotate(-90deg);
                  transform: rotate(-90deg); } }
  @media screen and (min-width: 35rem) {
    .site-navigation .menu > .menu-item > button::after {
      /* For first-level submenu links, different rotation for arrow on desktop */ }
      .js .site-navigation .menu > .menu-item > button::after {
        -webkit-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
                transform: rotate(0deg);
        margin-top: -.15em; } }
  .site-navigation .menu-item-overflow .menu-parent {
    padding-right: 1em; }
    .site-navigation .menu-item-overflow .menu-parent:after {
      content: ''; }
    .site-navigation .menu-item-overflow .menu-parent svg {
      width: 1em; }
  .site-navigation .overflow-menu .menu-item > button {
    /* Overflow sub menu items aligns differently */ }
    @media screen and (min-width: 35rem) {
      .site-navigation .overflow-menu .menu-item > button {
        padding-right: 1em;
        padding-left: 2em; }
        .site-navigation .overflow-menu .menu-item > button::after {
          content: ''; }
        .site-navigation .overflow-menu .menu-item > button::before {
          content: '\25B2';
          position: absolute;
          -webkit-transform: rotate(-90deg);
              -ms-transform: rotate(-90deg);
                  transform: rotate(-90deg);
          left: 1.5em;
          top: 30%;
          font-size: 0.6em; } }