@font-face{
  font-family: sans-serif;
  font-style: italic;
  font-weight: 300;
  src: local("Helvetica Neue Light Italic"),local(HelveticaNeue-LightItalic),local("Helvetica Light Oblique"),local(Helvetica-LightOblique); }
@font-face{
  font-family: sans-serif;
  font-style: italic;
  font-weight: 400;
  src: local("Helvetica Neue Italic"),local(HelveticaNeue-Italic),local("Helvetica Oblique"),local(Helvetica-Oblique); }
@font-face{
  font-family: sans-serif;
  font-style: italic;
  font-weight: 700;
  src: local("Helvetica Neue Bold Italic"),local(HelveticaNeue-BoldItalic),local("Helvetica Bold Oblique"),local(Helvetica-BoldOblique); }
@font-face{
  font-family: sans-serif;
  font-style: normal;
  font-weight: 300;
  src: local("Helvetica Neue Light"),local(HelveticaNeue-Light),local("Helvetica Light"),local(Helvetica-Light); }
@font-face{
  font-family: sans-serif;
  font-style: normal;
  font-weight: 400;
  src: local(HelveticaNeue),local(Helvetica); }
@font-face{
  font-family: sans-serif;
  font-style: normal;
  font-weight: 700;
  src: local("Helvetica Neue Bold"),local(HelveticaNeue-Bold),local("Helvetica Bold"),local(Helvetica-Bold); }
@charset "UTF-8";
/*
Settings

Weight: -3

Styleguide Core.Settings
*/
/*
Breakpoint Map

Styleguide Core.Settings.Breakpoints
*/
/*
Mixins

Weight: -2

Styleguide Core.Mixins
*/
/*
Css Triangle

Example:
.example { @include cssTriangle(5px, #fff, bottom); }

Styleguide AIA001.Mixins.CssTriangle
*/
/*
Functions

Weight: -1

Styleguide Core.Functions
*/
/*
colour-get($scheme, $tone)

Get a colour shade from the colour palette
see `construct/settings/_colours.scss`

Compatible untested.

$scheme - The major color.
$tone   - options shade.

Styleguide Core.Functions.Colour
*/
/*
typeface-get($scheme, $tone)

Get a named type size from the typeface map
see `construct/settings/_typeface.scss`

Compatible untested.

$name - The logical name

Styleguide Core.Functions.Type
*/
/*
layout-get($scheme, $tone)

Get a named type size from the layout map
see `construct/settings/_layout.scss`

Compatible untested.

$name - The logical name

Styleguide Core.Functions.Type
*/
/*
 browsers always use 16px regardless of the font-size set on the html or body elements
 - see http://www.filamentgroup.com/lab/how-we-learned-to-leave-body-font-size-alone.html
*/
/*
Components

Styleguide Core.Components
*/
/*
Site Layouts

Markup:
<div class="c-site-container" data-vue-root>
  <header class="c-site-container__header site-header">
    header
  </header>
  <main class="c-site-container__content site-content">
    main content
  </main>
  <footer class="c-site-container__footer site-footer">
    footer
  </footer>
</div>

Styleguide Core.Components.SiteLayout
*/
html, body {
  height: 100%;
  margin: 0; }

.c-site-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  min-height: 100%; }

.c-site-container__header {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto; }

.c-site-container__content {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto; }

.c-site-container__footer {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto; }

/*
Site Header

Markup:
<header class="c-site-header">
  <div class="c-navigation w-navigation" data-navigation--obscurable>
    <div class="c-navigation__container">
      <div class="c-navigation__group c-navigation__group--logo">
        <a href="#" class="c-navigation__logo-link" href="/">
          <!-- class="c-navigation__logo-image" src="//via.placeholder.com/200x100" //-->
          logo
        </a>
      </div>
      <div class="c-navigation__group c-navigation__group--navigation">
        <ul
          class="c-navigation__items c-navigation__items--contains-intersecting"
          data-navigation--visible-items>
          <li
            class="c-navigation__item c-navigation__item--level1"
            data-navigation--intersecting-item>
            <a href="#"
              class="c-navigation__link c-navigation__link--level1 has-children"
              data-navigation--toggle-megamenu>
              <span class="c-navigation__link-text">Practice</span>
              <span class="c-navigation__toggle c-navigation__toggle--level1">
                <img src="//via.placeholder.com/36x36">
              </span>
            </a>
          </li>
          <li
            class="c-navigation__item c-navigation__item--level1"
            data-navigation--intersecting-item>
            <a href="#"
              class="c-navigation__link c-navigation__link--level1 has-children"
              data-navigation--toggle-megamenu>
              <span class="c-navigation__link-text">Project</span>
              <span class="c-navigation__toggle c-navigation__toggle--level1">
                <img src="//via.placeholder.com/36x36">
              </span>
            </a>
          </li>
          <li
            class="c-navigation__item c-navigation__item--level1"
            data-navigation--intersecting-item>
            <a href="#"
              class="c-navigation__link c-navigation__link--level1 has-children"
              data-navigation--toggle-megamenu>
              <span class="c-navigation__link-text">Resource</span>
              <span class="c-navigation__toggle c-navigation__toggle--level1">
                <img src="//via.placeholder.com/36x36">
              </span>
            </a>
          </li>
          <li
            class="c-navigation__item c-navigation__item--level1"
            data-navigation--intersecting-item>
            <a href="#"
              class="c-navigation__link c-navigation__link--level1 has-children"
              data-navigation--toggle-megamenu>
              <span class="c-navigation__link-text">Notepaks</span>
              <span class="c-navigation__toggle c-navigation__toggle--level1">
                <img src="//via.placeholder.com/36x36">
              </span>
            </a>
          </li>
          <li
            class="c-navigation__item c-navigation__item--level1"
            data-navigation--intersecting-item>
            <a href="#"
              class="c-navigation__link c-navigation__link--level1 has-children"
              data-navigation--toggle-megamenu>
              <span class="c-navigation__link-text">Subscribe</span>
              <span class="c-navigation__toggle c-navigation__toggle--level1">
                <img src="//via.placeholder.com/36x36">
              </span>
            </a>
          </li>
          <li class="c-navigation__item c-navigation__item--level1 c-navigation__item--obscured-toggle"
            data-navigation--obscured-items-toggle>
            <a href="#"
              class="c-navigation__link c-navigation__link--level1">
              <span class="link-text">More…</span>
              <span class="icon-angle-down"></span>
            </a>
          </li>
        </ul>
      </div>
      <div class="c-navigation__group c-navigation__group--actions">
        <button class="c-navigation__action-button global-search-toggle-button global-search-toggle-button--dark">
          <svg
            class="global-search-toggle-button__icon global-search-toggle-button__icon--svg"
            viewBox="0 0 500 500"
            width="32px"
            height="32px">
            <path d="M485.8 450.9L363.3 339.2c28.3-34.6 45.3-78.8 45.3-126.8 0-110.7-90-200.7-200.7-200.7-110.7 0-200.7 90-200.7 200.7 0 110.7 90 200.7 200.7 200.7 47.1 0 90.3-16.4 124.6-43.6l124.2 113.3c8.8 8 22.5 7.4 30.5-1.4s7.3-22.5-1.4-30.5zM40.5 212.4C40.5 120.1 115.6 45 207.9 45s167.4 75.1 167.4 167.4-75.1 167.4-167.4 167.4S40.5 304.7 40.5 212.4z"></path>
          </svg>
        </button>
        <button class="c-navigation__action-button c-navigation__hamburger-button c-navigation-hamburger-button">
          <svg class="c-navigation-hamburger-button__icon c-navigation-hamburger-button__icon--closed"
            xmlns="http://www.w3.org/2000/svg"
            width="44"
            height="44">
            <path d="M32.5 21.5H12.3a.9.9 0 1 0 0 1.8h20.2a.9.9 0 0 0 0-1.8zm0 8.7H12.3a.9.9 0 1 0 0 1.8h20.2a.9.9 0 1 0 0-1.8zM12.3 14.5h20.2a.9.9 0 0 0 0-1.8H12.3a.9.9 0 1 0 0 1.8z" fill="#7c7871"/>
          </svg>
          <svg class="c-navigation-hamburger-button__icon c-navigation-hamburger-button__icon--open"
            xmlns="http://www.w3.org/2000/svg"
            width="44"
            height="44">
            <path d="M23.2 22l8.5-8.5a.9.9 0 1 0-1.2-1.2L22 20.8l-8.5-8.5a.9.9 0 1 0-1.2 1.2l8.5 8.5-8.5 8.5a.9.9 0 1 0 1.2 1.3l8.5-8.6 8.5 8.5a.9.9 0 0 0 1.3-1.2z" fill="#7c7871"/>
          </svg>
        </button>
      </div>
    </div>
    <div class="c-navigation__container--mobile">
      <ul class="c-navigation sub-nav-panel-trigger" data-navigation--obscured-items>
      </ul>
    </div>
  </div>
</header>

Styleguide Core.Components.SiteHeader
*/
.c-site-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse; }

.c-site-header__logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

.c-navigation {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  position: relative; }

/* whitelabel */
.w-navigation {
  background: #ccc; }

.c-navigation__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%; }

.c-navigation__group--navigation {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1; }

.c-navigation__group--actions {
  margin-right: 0.4375rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end; }

.c-navigation-hamburger-button {
  display: block; }

.c-navigation__group--logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

.c-navigation__logo-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

.c-navigation__logo-link:focus {
  outline-width: 2px;
  outline-style: dotted;
  outline-offset: 2px; }

.c-navigation__container--mobile {
  display: none;
  z-index: 6;
  position: relative;
  margin: 0;
  background-color: transparent;
  z-index: -2; }

.c-navigation__items {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  display: none; }
  .c-navigation__container--mobile .c-navigation__items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    max-width: 62.5rem;
    margin: 0 auto; }

.c-navigation--mobile-container--open .c-navigation__container--mobile {
  display: block;
  position: absolute;
  top: 100%;
  left: 0; }

.c-navigation__items--contains-intersecting {
  flex-wrap: wrap;
  -ms-flex-wrap: nowrap;
  opacity: 1;
  -webkit-transition: opacity 100ms ease;
  transition: opacity 100ms ease; }
  .c-navigation__items--contains-intersecting.testing {
    opacity: 0; }

.c-navigation__item--obscured-toggle {
  display: none; }

.c-navigation__container--mobile .c-navigation__item {
  position: relative;
  z-index: 1; }

.c-navigation__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-decoration: none;
  padding: 0.8125rem 1.5625rem; }
  .c-navigation__link:hover {
    text-decoration: underline; }

.c-navigation__toggle {
  width: 2.8125rem;
  height: 2.8125rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }

.c-navigation .c-navigation__item--level1 {
  display: inline-block;
  vertical-align: middle;
  position: static; }

.c-navigation__container--mobile .c-navigation__item--level1 {
  display: block;
  margin: 0;
  z-index: 6;
  overflow: hidden; }

.c-navigation__link--level1 {
  position: relative;
  outline: none; }
  .c-navigation__link--level1:link, .c-navigation__link--level1:visited {
    text-decoration: none; }
  .c-navigation__link--level1 .c-navigation__link-text {
    padding: 0.25rem 0; }
  .c-navigation .active > .c-navigation__link--level1:link .link-text, .c-navigation .active > .c-navigation__link--level1:visited .link-text {
    border-bottom-style: solid; }
  .c-navigation .active > .c-navigation__link--level1:after {
    position: absolute;
    top: 100%;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    pointer-events: none; }
  .c-navigation .c-navigation__link--level1 {
    display: inline-block; }
    .c-navigation .c-navigation__link--level1:hover {
      text-decoration: none; }
  .c-navigation__container--mobile .c-navigation__link--level1 {
    position: relative;
    display: block;
    width: 100%;
    z-index: 6;
    text-align: left; }
    .c-navigation__container--mobile .c-navigation__link--level1:hover {
      text-decoration: none; }

.c-navigation__toggle-icon {
  width: 1.25rem;
  height: 1.25rem; }

.c-navigation__item--level2 {
  display: block;
  width: 100%;
  margin-bottom: 0; }

.c-navigation__link--level2 {
  display: block;
  text-align: left;
  outline: none; }
  .c-navigation__link--level2 .link-text {
    display: inline-block;
    width: 80%; }

.c-navigation__toggle--level2 {
  display: none; }

.c-navigation__link--level3 {
  display: block; }

/*
Session Navigation

Markup:
<nav class="c-session-navigation">
  <ul class="c-session-navigation__items">
    <li class="c-session-navigation__item">
      <a class="c-session-navigation__link u-focus u-focus--blue u-focus--on-container"
        href="#">
        <span class="c-session-navigation__link-container session-navigation__link-container u-focus__container">
          <svg class="c-session-navigation__icon"
            role="img" aria-labelledby="title">
            <title>Hi [firstname]</title>
            <use
              xmlns:xlink="http://www.w3.org/1999/xlink"
              xlink:href="/static/theme/images/sprites.svg#user-session-nav-usage"></use>
          </svg>
          <span class="c-session-navigation__label">Hi [firstname]</span>
        </span>
      </a>
    </li>
    <li class="c-session-navigation__item">
      <a class="c-session-navigation__link u-focus u-focus--blue u-focus--on-container"
        href="#">
        <span class="c-session-navigation__link-container session-navigation__link-container u-focus__container">
          <svg class="c-session-navigation__icon"
            role="img" aria-labelledby="title">
            <title>My notes</title>
            <use
              xmlns:xlink="http://www.w3.org/1999/xlink"
              xlink:href="/static/theme/images/sprites.svg#bookmark-session-nav-usage"></use>
          </svg>
          <span class="c-session-navigation__label">My notes</span>
          <span class="c-session-navigation__badge">199</span>
        </span>
      </a>
    </li>
    <li class="c-session-navigation__item">
      <a class="c-session-navigation__link u-focus u-focus--blue u-focus--on-container"
        href="#">
        <span class="c-session-navigation__link-container session-navigation__link-container u-focus__container">
          <svg class="c-session-navigation__icon"
            role="img" aria-labelledby="title">
            <title>My notes</title>
            <use
              xmlns:xlink="http://www.w3.org/1999/xlink"
              xlink:href="/static/theme/images/sprites.svg#logout-session-nav-usage"></use>
          </svg>
          <span class="c-session-navigation__label">Logout</span>
        </span>
      </a>
    </li>
  </ul>
</nav>

Styleguide Core.Components.SiteHeader.SessionNavigation
*/
.c-session-navigation {
  display: none; }
  .c-navigation__container--mobile .c-session-navigation {
    display: block; }

.c-session-navigation__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none; }

.c-session-navigation__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: white; }

.c-session-navigation__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-decoration: none;
  color: white;
  padding: 0.75rem 1.4375rem; }

.c-session-navigation__link:focus {
  outline: 0; }

.c-session-navigation__link-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }

.c-session-navigation__label {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -ms-flex-preferred-size: auto;
      flex-basis: auto; }

.c-navigation-hamburger-button {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding: 0;
  border: 0;
  background-color: transparent; }
  .c-navigation-hamburger-button:focus {
    outline-style: dotted;
    outline-width: 1px;
    outline-offset: -1px; }

.c-navigation-hamburger-button__icon {
  display: block;
  width: 100%;
  height: 100%; }

.c-navigation-hamburger-button__icon path {
  fill: currentColor; }

.c-navigation-hamburger-button__icon--closed {
  display: block; }

.c-navigation-hamburger-button__icon--open {
  display: none; }

.c-navigation--mobile-container--open .c-navigation-hamburger-button__icon {
  color: red; }

.c-navigation--mobile-container--open .c-navigation-hamburger-button__icon--closed {
  display: none; }

.c-navigation--mobile-container--open .c-navigation-hamburger-button__icon--open {
  display: block; }

.c-navigation-mega__content {
  padding: 0.625rem;
  max-width: 75rem;
  margin: 0 auto; }

.c-navigation-mega__header {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }

.c-navigation-mega__title-icon {
  width: 2.3125rem;
  height: 2.3125rem;
  fill: currentColor; }

.c-navigation-mega__title {
  margin: 0;
  text-transform: uppercase;
  margin-left: 0.9375rem; }

.c-navigation-mega__title-navigation-icon {
  width: 2.3125rem;
  height: 2.3125rem;
  fill: currentColor; }

.c-navigation-mega__links {
  margin: 0;
  margin-top: 1rem;
  padding: 0;
  list-style: none; }

.c-navigation-mega__link-item {
  margin-bottom: 1.5rem; }

.c-navigation-mega__link {
  text-decoration: none;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }

.c-navigation-mega__link-icon {
  height: 1.125rem;
  width: 1.125rem;
  margin-right: 0.3125rem; }

.c-navigation-mega__close {
  cursor: pointer;
  border: 0;
  background-color: transparent;
  display: none;
  position: absolute;
  top: 0;
  right: 0; }

.c-navigation-mega--floating {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: -1;
  width: 100%;
  padding: 0.625rem 0;
  display: none; }
  .c-navigation__item--is-active .c-navigation-mega--floating {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    display: block; }

.c-navigation__container--mobile .c-navigation-mega__close {
  display: block; }

.c-navigation__container--mobile .c-navigation__item {
  position: relative;
  overflow: hidden; }

.c-navigation__container--mobile .c-navigation-mega--floating {
  position: static;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
  display: none; }

.c-navigation__container--mobile .c-navigation__item--is-active .c-navigation-mega--floating {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

.c-navigation-mega--transitions-fast {
  -webkit-transition: opacity 100ms ease-in-out,  -webkit-transform 400ms ease;
  transition: opacity 100ms ease-in-out,  -webkit-transform 400ms ease;
  transition: transform 400ms ease,  opacity 100ms ease-in-out;
  transition: transform 400ms ease,  opacity 100ms ease-in-out,  -webkit-transform 400ms ease; }

.c-navigation__container .c-navigation-mega__container {
  padding-top: 1.5rem;
  position: relative; }

@media (max-width: 26.5em) {
  .c-navigation {
    max-height: 3.25rem; }
  .c-navigation__container--mobile .c-navigation__link--level2 {
    padding: 0.75rem 0;
    padding-left: 1.875rem;
    font-size: 0.875rem; }
  .c-navigation__toggle--level2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    outline: none; }
  .active > .c-navigation__toggle-icon {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    fill: grey; }
  .c-navigation-sub--level2 {
    display: none; }
    .c-navigation-sub--level2.active {
      display: block; }
  .c-navigation__container--mobile .c-navigation__link--level3 {
    padding: 0.75rem 0;
    padding-left: 2.75rem;
    font-size: 0.875rem; } }

@media (min-width: 26.625em) {
  .c-navigation {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; }
  .c-navigation__items,
  .session-navigation {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
    .c-navigation__container--mobile .c-navigation__items, .c-navigation__container--mobile
    .session-navigation {
      display: none; }
  .c-navigation__items,
  .session-navigation {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
  .c-navigation__container--mobile .c-navigation__items,
  .c-navigation__container--mobile .session-navigation {
    display: none; }
  .c-navigation--mobile-container--open .c-navigation__items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
  .c-navigation--mobile-container--open .c-navigation__container--mobile {
    display: block;
    position: absolute;
    top: 100%;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%); }
  .c-navigation__items {
    width: 100%; }
  .c-navigation__hamburger-button {
    display: none; }
  .c-navigation__link--level1 {
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 1.25rem; }
    .c-navigation .c-navigation__link--level1 {
      height: 7.0625rem; }
    .c-navigation__container--mobile .c-navigation__link--level1 {
      height: auto; }
  .c-navigation__container--mobile .main-sub-navigation--level2 {
    margin-top: 1.25rem; }
  .c-navigation__item--level2 {
    width: 15rem;
    padding: 0.375rem; }
  .c-session-navigation {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-flex: 0;
        -ms-flex: 0 1 auto;
            flex: 0 1 auto;
    width: 100%; }
  .c-session-navigation__container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 0;
        -ms-flex: 0 1 auto;
            flex: 0 1 auto;
    width: 100%;
    max-width: page-width;
    margin: 0 spacing-single; }
  .c-session-navigation__items {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; }
  .c-session-navigation__item:last-child .c-session-navigation__link {
    padding-right: 0;
    margin-right: 0; }
  .c-navigation__container .c-navigation-mega__container {
    position: relative; }
  .c-navigation-mega__content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-height: 29.8125rem; }
  .c-navigation-mega__overview {
    -ms-flex-preferred-size: 45%;
        flex-basis: 45%;
    margin-right: 3.4375rem; }
  .c-navigation-mega__links-container {
    -ms-flex-preferred-size: 55%;
        flex-basis: 55%; } }

@media (min-width: 48.0625em) {
  .c-navigation.sub-menu-opened .c-navigation__item--level1:not(.active) {
    opacity: 0.6; }
  .c-navigation__link--level1 {
    font-size: 1.25rem; }
    .c-navigation .active > .c-navigation__link--level1:link .link-text, .c-navigation .active > .c-navigation__link--level1:visited .link-text {
      border-bottom-width: 2px; }
    .c-navigation .active > .c-navigation__link--level1:after {
      content: "";
      display: block;
      width: 0;
      height: 0;
      border: solid 1.375rem;
      border-color: red transparent transparent transparent; }
  .c-navigation__item--level2 {
    width: 50%; }
  .c-navigation__link--level2 {
    width: 100%;
    padding: 0.5rem;
    padding-left: 1.25rem;
    min-height: 3.8rem;
    font-size: 1.25rem; }
    .c-navigation__link--level2 .link-text {
      display: block;
      width: 100%;
      padding-left: 0; }
    .c-navigation__link--level2:hover {
      text-decoration: none; }
      .c-navigation__link--level2:hover .link-text {
        text-decoration: none; }
  .c-navigation__link--level3 {
    min-height: 3.25rem;
    padding: 0.5rem;
    padding-left: 1.25rem;
    font-size: 1rem; }
  .c-navigation__container:not(.c-navigation__container--mobile) .c-navigation-mega__container {
    padding-top: 4.5rem;
    position: relative; }
  .c-navigation-mega__overview {
    max-width: 45%;
    margin-right: 6.5625rem; }
  .c-navigation-mega__title-icon {
    width: 3.75rem;
    height: 3.75rem; }
  .c-navigation-mega__title {
    font-size: 2.625rem;
    margin-left: 1.25rem; }
  .c-navigation-mega__title-navigation-icon {
    width: 3rem;
    height: 3rem; } }

@media (min-width: 64.0625em) {
  .c-main-navigation-mega__overview {
    width: 30rem; }
  .c-main-navigation-mega__links {
    width: 70%; } }

/*
Forms

Styleguide Core.Components.Forms
*/
/*
Simple Button

Markup:
<button class="c-button button {{modifier_class}} {{classes}}" {{{default attrs ''}}}>
  <span class="c-button__container"> <!-- https://github.com/philipwalton/flexbugs/issues/236 -->
  {{#if @partial-block }}
    {{> @partial-block}}
  {{ else }}
    <span class="c-button__label">{{default text 'a button'}}</span>
  {{/if}}
  </span>
</button>

.c-button--primary - Primary button
.c-button--secondary - Secondary button
.c-button--is-disabled - Icon button Disabled
.c-button--centered - Icon button Disabled

Weight: 10

Styleguide Core.Components.Forms.Button
*/
/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 * 2. Remove the inheritance of text transform in Firefox.
 */
button {
  overflow: visible;
  /* 1 */
  text-transform: none;
  /* 2 */ }

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */
button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  /* 2 */ }

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0; }

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText; }

.c-button {
  font-size: inherit;
  font-family: inherit;
  border-width: 2px;
  border-style: solid;
  border-radius: 4px;
  padding: 0;
  min-width: 10rem;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out; }

.c-button,
.c-button__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start; }

.c-button__container {
  padding: 0.75rem 0; }

.c-button--centered,
.c-button--centered .c-button__container {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center; }

/*
Button Icon

Markup:
{{#> Core.Components.Forms.Button
    modifier_class=(concat
      'c-button--icon '
      (default modifier_class '')
    ) }}
  <span class="c-button__icon">
    {{> Core.Styleguide.Box
        modifier_class="c-button__icon-image styleguide-box--blue"
        width="22px"
        height="22px"
    }}
  </span>
{{/ Core.Components.Forms.Button }}

.c-button--icon-left - button with icon on left
.c-button--icon-right - button with icon on right

Weight: 11

Styleguide Core.Components.Forms.IconButtons
*/
.c-button--icon,
.c-button--icon-left .c-button__container {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row; }

.c-button--icon-right .c-button__container {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse; }

.c-button__icon-image {
  margin-right: 0.75rem; }

.c-button--icon-right .c-button__icon-image {
  margin-left: 0.75rem; }

.c-button--icon .c-button__icon,
.c-button--icon-left .c-button__icon {
  margin-left: auto; }

.c-button--icon .c-button__label,
.c-button--icon-left .c-button__label {
  margin-right: auto; }

.c-button--icon-right .c-button__icon {
  margin-right: auto; }

.c-button--icon-right .c-button__label {
  margin-left: auto; }

.c-button--no-label .c-button__label {
  display: none; }

.c-button--primary {
  color: white;
  background-color: blue;
  border-color: blue; }

.c-button--primary:hover {
  background-color: blue;
  border-color: blue; }

.c-button--secondary {
  color: blue;
  background-color: white;
  border-color: blue; }

.c-button--secondary:hover {
  color: white;
  background-color: blue;
  border-color: blue; }

.c-button[disabled],
.c-button--is-disabled {
  pointer-events: none; }

/*
Input

Markup:
<input type="{{ default type "text" }}"
  name="Input"
  id="{{ default id "InputID" }}"
  class="c-field-input field-input FormTextbox__Input {{ modifier_class }} {{ classes }}"
  placeholder="{{ default placeholder "Placeholder text" }}"
  data-f-label="{{ default label "Label text" }}"
  data-f-datainput
  title="{{ default tooltip "Tooltip text" }}">

Styleguide Core.Components.Forms.Input
*/
/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
input {
  /* 1 */
  overflow: visible; }

input::-webkit-calendar-picker-indicator {
  display: none; }

input:not([type]),
input[type="email"],
input[type="text"],
input[type="number"],
input[type="url"],
input[type="password"],
input[type="date"] {
  font-family: inherit;
  font-size: inherit;
  border: 1px solid grey;
  background-color: white; }

input:not([type]),
input[type="email"],
input[type="text"],
input[type="number"],
input[type="url"],
input[type="password"],
input[type="date"] {
  padding-right: .625rem;
  padding-left: .625rem;
  height: 2.75rem; }

.c-field-input {
  width: 100%; }

.c-field-input__description {
  display: block;
  padding: .5rem 0 0 0;
  color: grey; }

/*
Input (File)

Markup:
<div class="js">
<input
  class="c-field-input c-field-input--file field-input field-input--file"
  name="@formElement.ElementName"
  id="inputFileID"
  type="file"
  data-multiple-caption="{count} files selected"
  multiple
   />
    <label class="c-field-input-file__label field-input-file__label"
      for="inputFileID">
      <span></span>
      <strong>
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/></svg>
        Choose a file&hellip;
      </strong>
    </label>
</div>

Styleguide Core.Components.Forms.Input-File
*/
/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
input[type="file"] {
  font-family: inherit;
  font-size: inherit;
  border: 1px solid grey;
  background-color: white; }

.js .c-field-input--file {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1; }

.c-field-input--file + label {
  max-width: 80%;
  font-size: inherit;
  /* 20px */
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  padding: 0.625rem 1.25rem;
  /* 10px 20px */ }

.no-js .c-field-input--file + label {
  display: none; }

.c-field-input--file:focus + label,
.c-field-input--file.has-focus + label {
  outline: 1px dotted #000;
  outline: -webkit-focus-ring-color auto 5px; }

.c-field-input--file + label * {
  /* pointer-events: none; */
  /* in case of FastClick lib use */ }

.c-field-input--file + label svg {
  width: 1em;
  height: 1em;
  vertical-align: middle;
  fill: currentColor;
  margin-top: -0.25em;
  /* 4px */
  margin-right: 0.25em;
  /* 4px */ }

/* style 1 */
.c-field-input--file.c-field-input--file-theme-1 + label {
  color: #f1e5e6;
  background-color: #d3394c; }

.c-field-input--file.c-field-input--file-theme-1:focus + label,
.c-field-input--file.c-field-input--file-theme-1.has-focus + label,
.c-field-input--file.c-field-input--file-theme-1 + label:hover {
  background-color: #722040; }

/* style 2 */
.c-field-input--file.c-field-input--file-theme-2 + label {
  color: #d3394c;
  border: 2px solid currentColor; }

.c-field-input--file.c-field-input--file-theme-2:focus + label,
.c-field-input--file.c-field-input--file-theme-2.has-focus + label,
.c-field-input--file.c-field-input--file-theme-2 + label:hover {
  color: #722040; }

/* style 3 */
.c-field-input--file.c-field-input--file-theme-3 + label {
  color: #d3394c; }

.c-field-input--file.c-field-input--file-theme-3:focus + label,
.c-field-input--file.c-field-input--file-theme-3.has-focus + label,
.c-field-input--file.c-field-input--file-theme-3 + label:hover {
  color: #722040; }

/* style 4 */
.c-field-input--file.c-field-input--file-theme-4 + label {
  color: #d3394c; }

.c-field-input--file.c-field-input--file-theme-4:focus + label,
.c-field-input--file.c-field-input--file-theme-4.has-focus + label,
.c-field-input--file.c-field-input--file-theme-4 + label:hover {
  color: #722040; }

.c-field-input--file.c-field-input--file-theme-4 + label figure {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #d3394c;
  display: block;
  padding: 20px;
  margin: 0 auto 10px; }

.c-field-input--file.c-field-input--file-theme-4:focus + label figure,
.c-field-input--file.c-field-input--file-theme-4.has-focus + label figure,
.c-field-input--file.c-field-input--file-theme-4 + label:hover figure {
  background-color: #722040; }

.c-field-input--file.c-field-input--file-theme-4 + label svg {
  width: 100%;
  height: 100%;
  fill: #f1e5e6; }

/* style 5 */
.c-field-input--file.c-field-input--file-theme-5 + label {
  color: #d3394c; }

.c-field-input--file.c-field-input--file-theme-5:focus + label,
.c-field-input--file.c-field-input--file-theme-5.has-focus + label,
.c-field-input--file.c-field-input--file-theme-5 + label:hover {
  color: #722040; }

.c-field-input--file.c-field-input--file-theme-5 + label figure {
  width: 100px;
  height: 135px;
  background-color: #d3394c;
  display: block;
  position: relative;
  padding: 30px;
  margin: 0 auto 10px; }

.c-field-input--file.c-field-input--file-theme-5:focus + label figure,
.c-field-input--file.c-field-input--file-theme-5.has-focus + label figure,
.c-field-input--file.c-field-input--file-theme-5 + label:hover figure {
  background-color: #722040; }

.c-field-input--file.c-field-input--file-theme-5 + label figure::before,
.c-field-input--file.c-field-input--file-theme-5 + label figure::after {
  width: 0;
  height: 0;
  content: '';
  position: absolute;
  top: 0;
  right: 0; }

.c-field-input--file.c-field-input--file-theme-5 + label figure::before {
  border-top: 20px solid #dfc8ca;
  border-left: 20px solid transparent; }

.c-field-input--file.c-field-input--file-theme-5 + label figure::after {
  border-bottom: 20px solid #722040;
  border-right: 20px solid transparent; }

.c-field-input--file.c-field-input--file-theme-5:focus + label figure::after,
.c-field-input--file.c-field-input--file-theme-5.has-focus + label figure::after,
.c-field-input--file.c-field-input--file-theme-5 + label:hover figure::after {
  border-bottom-color: #d3394c; }

.c-field-input--file.c-field-input--file-theme-5 + label svg {
  width: 100%;
  height: 100%;
  fill: #f1e5e6; }

/* style 6 */
.c-field-input--file.c-field-input--file-theme-6 + label {
  color: grey; }

.c-field-input--file.c-field-input--file-theme-6 + label {
  border: 1px solid grey;
  background-color: white;
  padding: 0; }

.c-field-input--file.c-field-input--file-theme-6:focus + label,
.c-field-input--file.c-field-input--file-theme-6.has-focus + label,
.c-field-input--file.c-field-input--file-theme-6 + label:hover {
  border-color: grey; }

.c-field-input--file.c-field-input--file-theme-6 + label span,
.c-field-input--file.c-field-input--file-theme-6 + label strong {
  padding: 0.625rem 1.25rem;
  /* 10px 20px */ }

.c-field-input--file.c-field-input--file-theme-6 + label span {
  width: 200px;
  min-height: 2em;
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  vertical-align: top; }

.c-field-input--file.c-field-input--file-theme-6 + label strong {
  height: 100%;
  color: white;
  background-color: grey;
  display: inline-block; }

.c-field-input--file.c-field-input--file-theme-6:focus + label strong,
.c-field-input--file.c-field-input--file-theme-6.has-focus + label strong,
.c-field-input--file.c-field-input--file-theme-6 + label:hover strong {
  background-color: grey; }

.c-field-input-option__label {
  position: relative;
  display: inline-block;
  padding: 0.5rem 0;
  padding-left: 1.7rem; }

.c-field-input-option__input--hidden {
  position: absolute;
  top: auto;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px 1px 1px 1px);
  white-space: nowrap;
  margin: 0; }

.c-field-input-option__faux {
  position: absolute;
  top: 0.5rem; }

/*
Input option (Checkbox)

Markup:
<div class="c-field-input-option field-input-option">
  <input class="c-field-input-option__input c-field-input-option__input--hidden field-input-option__input field-input-option__input--hidden"
         id="{{ default id 'checkbox' }}"
         type="checkbox"
         name="{{ default name 'checkbox' }}" />
  <label class="c-field-input-option__label field-input-option__label"
         for="{{ default id 'checkbox' }}">
    <svg class="c-field-input-option__faux-checkbox field-input-option__faux-checkbox"
         width="18"
         height="18"
         viewBox="0 0 18 18">
        <rect class="c-field-input-option__faux-box c-field-input-option__faux-box--checkbox field-input-option__faux-box field-input-option__faux-box--checkbox"
          fill="#fff" stroke="currentColor"
          stroke-width="1" x=".5" y=".5" width="17" height="17" rx="3"></rect>
        <path class="c-field-input-option__faux-indicator c-field-input-option__faux-indicator--checkbox field-input-option__faux-indicator field-input-option__faux-indicator--checkbox"
          fill="none" d="M 5 9.5 L 7.5 12 L 13 5" stroke-linecap="round"
          stroke-width="2" stroke="currentColor" stroke-linejoin="round"></path>
    </svg>
    <span class="c-field-input-option__text field-input-option__text">{{ default label 'Label text' }}</span>
  </label>
</div>

Weight: 10

Styleguide Core.Components.Forms.InputOptionCheckbox
*/
.c-field-input-option__faux--checkbox {
  position: absolute;
  left: 0;
  vertical-align: middle; }
  .c-field-input-option__faux--checkbox .c-field-input-option__faux-indicator--checkbox {
    -webkit-transition: stroke-dashoffset 0.2s ease-in-out;
    transition: stroke-dashoffset 0.2s ease-in-out;
    opacity: 0;
    stroke-dasharray: 50;
    stroke-dashoffset: -50;
    color: blue; }

.c-field-input-option__input:checked ~ .c-field-input-option__label .c-field-input-option__faux-indicator--checkbox {
  stroke-dashoffset: 0;
  opacity: 1; }

/*
Input option (Radio)

Markup:
<div class="c-field-input-option field-input-option">
  <input class="c-field-input-option__input c-field-input-option__input--hidden field-input-option__input field-input-option__input--hidden"
         id="{{ default id 'radio' }}"
        type="radio"
        name="{{ default name 'radio' }}" />
  <label class="c-field-input-option__label field-input-option__label" for="{{ default id 'radio' }}">
    <svg class="c-field-input-option__faux c-field-input-option__faux--radio field-input-option__faux field-input-option__faux--radio"
         width="18" height="18" viewBox="0 0 18 18">
        <circle class="c-field-input-option__faux-box c-field-input-option__faux-box--radio field-input-option__faux-box field-input-option__faux-box--radio"
                cx="9" cy="9" r="8.5" fill="#fff" stroke="currentColor" stroke-width="1"/>
        <line class="c-field-input-option__faux-indicator c-field-input-option__faux-indicator--radio field-input-option__faux-indicator field-input-option__faux-indicator--radio"
              x1="9" y1="9" x2="9" y2="9" stroke="currentColor" stroke-width="0"/>
    </svg>
    <span class="c-field-input-option__text">{{ default label 'Label text' }}</span>
  </label>
</div>

Weight: 11

Styleguide Core.Components.Forms.InputOptionRadio
*/
.c-field-input-option__faux--radio {
  position: absolute;
  left: 0;
  vertical-align: middle; }

.c-field-input-option__faux-box--radio {
  fill: white; }

.c-field-input-option__faux-indicator--radio {
  fill: grey;
  stroke-linecap: round;
  -webkit-transition: stroke-width 0.2s ease-in-out;
  transition: stroke-width 0.2s ease-in-out; }

.c-field-input-option__input:checked ~ .c-field-input-option__label .c-field-input-option__faux-indicator--radio {
  stroke-width: 10; }

/*
Input option list

Markup:
<fieldset class="c-fieldset fieldset">
    <legend class="c-fieldset__legend fieldset__legend">Legend</legend>
    <div class="c-field-layout__element field-layout__element">
      <!-- c-field-input-option goes here -->
      {{#if (eq modifier_class 'checkbox')}}
      {{> Core.Components.Forms.InputOptionCheckbox id="checkbox1" name="checkbox" }}
      {{> Core.Components.Forms.InputOptionCheckbox id="checkbox2" name="checkbox" }}
      {{/if}}
      {{#if (eq modifier_class 'radio')}}
      {{> Core.Components.Forms.InputOptionRadio id="radio1" name="radio" }}
      {{> Core.Components.Forms.InputOptionRadio id="radio2" name="radio" }}
      {{/if}}
    </div>
</fieldset>

checkbox - checkboxes
radio - radioes

Weight: 20

Styleguide Core.Components.Forms.InputOptionList
*/
.c-fieldset {
  border: none;
  margin: 0;
  padding: 0; }

.c-fieldset__legend {
  padding: 0; }

/*
Input option list - label left

Layout variant for wider screens. Legend text appears the left with inputs to the right.

Actual legend element is visually hidden, substituted visually with an aria-hidden duplicate.

Markup:
<fieldset class="c-fieldset fieldset">
    <legend class="c-fieldset__legend fieldset__legend">
      <span class="c-fieldset__legend-text c-fieldset__legend-text--hidden fieldset__legend-text fieldset__legend-text--hidden">Group label is long and may need to wrap to a height taller than form elements</span>
    </legend>
    <div class="c-field-layout field-layout">
        <div class="c-field-layout__label field-layout__label">
            <span class="c-field-label field-label" aria-hidden="true">Group label is long and may need to wrap to a height taller than form elements</span>
        </div>
        <div class="c-field-layout__element field-layout__element">
          <!-- c-field-input-option goes here -->
          {{#if (eq modifier_class 'checkbox')}}
          {{> Core.Components.Forms.InputOptionCheckbox id="checkbox3" name="checkbox" }}
          {{> Core.Components.Forms.InputOptionCheckbox id="checkbox4" name="checkbox" }}
          {{/if}}
          {{#if (eq modifier_class 'radio')}}
          {{> Core.Components.Forms.InputOptionRadio id="radio3" name="radio" }}
          {{> Core.Components.Forms.InputOptionRadio id="radio4" name="radio" }}
          {{/if}}
        </div>
    </div>
</fieldset>

checkbox - checkboxes
radio - radioes

Weight: 21

Styleguide Core.Components.Forms.InputOptionListRadioLabelLeft
*/
.c-fieldset__legend-text--hidden {
  position: absolute;
  top: auto;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
  white-space: nowrap; }

/*
Input (Range)

Markup:
<span class="c-field-input-range__min field-input-range__min">0</span>
<input
  class="c-field-input-range field-input-range"
  type="range"
  name="rangeInputName"
  id="rangeInputId"
  value="24"
  min="1"
  max="100"
  oninput="rangeOutputId.value = rangeInputId.value"
  list="inputOptions">
<span class="c-field-input-range__max field-input-range__max">100</span>
<output
  class="c-field-input-range__output field-input-range__output"
  name="rangeOutputName"
  id="rangeOutputId">24</output>
<datalist id="inputOptions">
  <option value="0" label="0%">
  <option value="10">
  <option value="20">
  <option value="30">
  <option value="40">
  <option value="50" label="50%">
  <option value="60">
  <option value="70">
  <option value="80">
  <option value="90">
  <option value="100" label="100%">
</datalist>

Styleguide Core.Components.Forms.Input-Range
*/
input[type="range"] {
  font-family: inherit;
  font-size: inherit;
  vertical-align: middle;
  display: inline;
  max-width: 50%; }

.c-field-input-range__min,
.c-field-input-range__max {
  display: inline-block;
  font-size: inherit;
  color: grey;
  padding: 0.25rem 0.5rem;
  vertical-align: middle; }

.c-field-input-range__output {
  display: inline-block;
  text-align: center;
  min-width: 4em;
  padding: 0.25rem 0.25rem;
  margin-left: 1rem;
  background-color: white;
  vertical-align: middle;
  border: 1px solid grey; }

[type='range'] {
  -webkit-appearance: none;
  margin: 12px 0;
  width: 100%; }
  [type='range']:focus {
    outline: 0; }
    [type='range']:focus::-webkit-slider-runnable-track {
      background-color: white; }
    [type='range']:focus::-ms-fill-lower {
      background-color: white; }
    [type='range']:focus::-ms-fill-upper {
      background-color: white; }
  [type='range']::-webkit-slider-runnable-track {
    cursor: pointer;
    height: 8px;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
    width: 100%;
    -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2), 0 0 1px rgba(13, 13, 13, 0.2);
            box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2), 0 0 1px rgba(13, 13, 13, 0.2);
    background-color: white;
    border: 2px solid grey;
    border-radius: 5px; }
  [type='range']::-webkit-slider-thumb {
    -webkit-box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2), 0 0 4px rgba(13, 13, 13, 0.2);
            box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2), 0 0 4px rgba(13, 13, 13, 0.2);
    background-color: blue;
    border: 2px solid grey;
    border-radius: 12px;
    cursor: pointer;
    height: 24px;
    width: 24px;
    -webkit-appearance: none;
    margin-top: -10px; }
  [type='range']::-moz-range-track {
    cursor: pointer;
    height: 8px;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
    width: 100%;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2), 0 0 1px rgba(13, 13, 13, 0.2);
    background-color: white;
    border: 2px solid grey;
    border-radius: 5px; }
  [type='range']::-moz-range-thumb {
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2), 0 0 4px rgba(13, 13, 13, 0.2);
    background-color: blue;
    border: 2px solid grey;
    border-radius: 12px;
    cursor: pointer;
    height: 24px;
    width: 24px; }
  [type='range']::-ms-track {
    cursor: pointer;
    height: 8px;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
    width: 100%;
    background-color: transparent;
    border-color: transparent;
    border-width: 12px 0;
    color: transparent; }
  [type='range']::-ms-fill-lower {
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2), 0 0 1px rgba(13, 13, 13, 0.2);
    background-color: #f2f2f2;
    border: 2px solid grey;
    border-radius: 10px; }
  [type='range']::-ms-fill-upper {
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2), 0 0 1px rgba(13, 13, 13, 0.2);
    background-color: white;
    border: 2px solid grey;
    border-radius: 10px; }
  [type='range']::-ms-thumb {
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2), 0 0 4px rgba(13, 13, 13, 0.2);
    background-color: blue;
    border: 2px solid grey;
    border-radius: 12px;
    cursor: pointer;
    height: 24px;
    width: 24px;
    margin-top: 0; }

/*
Select

Markup:
<select
  class="c-field-select field-select {{modifier_class}}"
  name="{{default name 'SelectName'}}"
  id="{{default id 'SelectNameID'}}"
  title="{{default tooltip 'Tooltip text'}}" {{{ default attributes '' }}}>
  {{#if @partial-block}}
    {{> @partial-block}}
  {{else}}
    <option disabled selected value="1">{{ default placeholder "Please select..." }}</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  {{/if}}
</select>

.c-field-select--width-small - small width
.c-field-select--width-auto - Auto width

Styleguide Core.Components.Forms.Select
*/
/*
Select (Multiple)

Markup:
<select
  class="c-field-select field-select {{modifier_class}}"
  name="{{default name 'SelectMultimpleName'}}"
  id="{{default id 'SelectMultimpleNameID'}}"
  multiple=""
  title="{{default tooltip 'Tooltip text'}}">
    <option disabled="disabled" value="">-- Select options --</option>
    <option value="1" data-f-datainput="">One</option>
    <option value="2" selected="" data-f-default-value="&quot;true&quot;" data-f-datainput="">Two</option>
    <option value="3" data-f-datainput="">Three</option>
    <option value="4" data-f-datainput="">Four</option>
    <option value="5" data-f-datainput="">Five</option>
    <option value="6" data-f-datainput="">Six</option>
</select>

.c-field-select--width-small - small width
.c-field-select--width-auto - Auto width

Styleguide Core.Components.Forms.SelectMultiple
*/
/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 * 2. Remove the margin in Firefox and Safari.
 */
select {
  text-transform: none;
  /* 1 */
  margin: 0;
  /* 2 */ }

select {
  font-family: inherit;
  font-size: inherit;
  border: 1px solid grey;
  background-color: #fff;
  padding-right: .625rem;
  padding-left: .625rem;
  margin: 0;
  padding: .625rem;
  height: 2.75rem;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  /* 1 */
  /* 3 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpolyline points='1.742 2.871 4 5.137 6.266 2.871' fill='none' stroke='%23515356' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.351'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem top 0.8rem;
  background-size: 1rem 1rem; }
  select::-ms-expand {
    display: none;
    /* 2 */ }

select[multiple] {
  height: auto;
  padding: 0;
  background-image: none; }

select[multiple] option {
  padding: .625rem; }

.c-field-select {
  width: 100%; }

/*
Textarea

Markup:
<textarea
  name="TextArea"
  id="TextAreaID"
  class="c-field-textarea field-textarea"
  placeholder="Placeholder text"
  data-f-label="Label text"
  data-f-datainput
  title="Tooltip text"></textarea>

Styleguide Core.Components.Forms.Textarea
*/
/**
 * Remove the default vertical scrollbar in IE.
 */
textarea {
  overflow: auto; }

textarea {
  display: block;
  font-family: inherit;
  font-size: inherit;
  padding: .625rem;
  margin: 0;
  height: 10rem;
  min-height: 50px;
  width: 100%;
  border: 1px solid grey;
  background-color: white; }

.c-field-validation-error {
  position: relative;
  padding-left: 0.9375rem;
  margin-top: 0.3125rem;
  display: block;
  text-align: left;
  color: red; }
  .c-field-validation-error:before {
    position: absolute;
    left: 0;
    top: 0; }

.form-message {
  margin: 1.5em 0;
  padding: 0.75rem 1.125rem; }
  .form-message .icon:before {
    font-size: 1.125rem; }

.Form__RequiredNotice {
  text-align: right; }

/*
Field Layout

Markup:
<div class="c-field-layout field-layout {{modifier_class}} {{classes}}">
    <div class="c-field-layout__label field-layout__label">
      <label class="c-field-label field-label"
             for="element">
        <span class="c-field-label__text field-label__text">{{ default label "Label text" }}</span>
        {{#if required }}
        <span class="c-field-label__required field-label__required">*</span>
        {{/if}}
      </label>
    </div>
    <div class="c-field-layout__element field-layout__element">
      {{#if @partial-block}}
        {{> @partial-block}}
      {{else}}
      {{> Core.Components.Forms.Input }}
      {{/if}}
      <span class="c-field-input__description field-input__description"
            id="input_description">
          {{#> description-block }}{{/description-block}}
      </span>
      {{#if validation }}
      <span class="c-field-validation-error field-validation-error" hidden>Validation message</span>
      {{/if}}
    </div>
</div>

.c-field-layout--vertical - Label and field arranged vertically
.c-field-layout--horizontal - Label and field arranged horizontally

Styleguide Core.Components.Forms.FieldLayout.Input
*/
.c-field-layout {
  border-top: 2px solid #ccc;
  background-color: #eee;
  padding: 1.5rem 1rem;
  margin: 0; }

.c-field-layout--vertical {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; }

.c-field-layout__label {
  padding: 0.25rem 0; }

.c-field-label {
  padding-right: 0.625rem; }

.c-field-label__text {
  display: inline-block; }

.c-field-label__required {
  color: red; }

.c-field-layout__element {
  padding: 0.5rem 0; }

.c-field-layout__text {
  padding: 0; }

.c-field-layout__text h3 {
  margin-top: 0; }

.c-field-layout__text p:last-child {
  margin-bottom: 0; }

.EPiServerForms {
  margin: 0 auto; }

.EPiServerForms .required {
  color: red; }

.EPiServerForms .Form__Element__ValidationError {
  color: red;
  font-size: 80%;
  display: inline-block;
  padding-top: 0.25rem; }

.EPiServerForms .Form__Element {
  margin: 0 !important; }

.EPiServerForms .FormCaptcha__Image {
  margin: 0.5rem 0; }

.EPiServerForms .FormDateTimeRange .FormDateTimeRange__Start,
.EPiServerForms .FormDateTimeRange .FormDateTimeRange__End {
  width: 6rem; }

.EPiServerForms .FormDateTimeRange_Seperator {
  line-height: 2.25rem;
  color: grey; }

.EPiServerForms .FormSubmitButton {
  display: block;
  padding: 0.84375rem 0.8125rem;
  max-width: 17.5rem;
  min-width: 9.375rem;
  margin: auto;
  margin-top: 0.75rem;
  vertical-align: middle;
  text-align: center; }
  .EPiServerForms .FormSubmitButton.link-button--expanding {
    width: 100%;
    min-width: 0;
    max-width: none;
    padding-left: 0.375rem;
    padding-right: 0.375rem; }
  .wysiwyg .EPiServerForms .FormSubmitButton {
    margin-top: 1rem;
    margin-bottom: 1rem; }

.EPiServerForms .FormImageSubmitButton {
  width: auto !important;
  height: auto !important; }
  .EPiServerForms .FormImageSubmitButton img {
    display: block; }

.EPiServerForms .Form__Element__ValidationError {
  position: relative;
  padding-left: 0.9375rem;
  margin-top: 0.3125rem;
  display: block;
  text-align: left; }
  .EPiServerForms .Form__Element__ValidationError:before {
    position: absolute;
    left: 0;
    top: 0; }

.EPiServerForms .Form__NavigationBar {
  padding: 3.5rem 1rem; }

.EPiServerForms .Form__NavigationBar .Form__NavigationBar__ProgressBar {
  display: block;
  width: 100% !important;
  margin-bottom: 1.5rem; }

.EPiServerForms .Form__NavigationBar .btnPrev {
  float: left;
  margin-bottom: 1rem;
  min-width: 100%; }

.EPiServerForms .Form__NavigationBar .btnNext {
  float: right;
  margin-bottom: 1rem;
  min-width: 100%; }

@media (min-width: 26.625em) {
  .c-field-input {
    width: 24rem; }
  .c-field-input--width-auto {
    width: 100%; }
  .c-field-input--width-small {
    width: 8rem; }
  .c-field-layout {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
  .c-field-layout--indent {
    padding-left: 200px; }
  .c-field-layout--align-left {
    text-align: left; }
  .c-field-layout--align-right {
    text-align: right; }
  .c-field-layout__label {
    width: 180px;
    padding: 0.75rem 0; }
  .c-field-layout--vertical .c-field-layout__label {
    width: 100%; }
  .c-field-layout--vertical .c-field-layout__element {
    width: 100%; }
  .c-field-layout__element,
  .c-field-layout__text {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1; }
  .Form__RequiredNotice {
    padding-top: 1.6rem; }
  .c-field-select {
    width: 24rem; }
  .c-field-select--width-auto {
    width: 100%; }
  .c-field-select--width-small {
    width: 8rem; }
  .c-field-textarea {
    width: 24rem; }
  .c-field-textarea {
    width: 24rem; }
  .EPiServerForms .Form__NavigationBar .btnPrev,
  .EPiServerForms .Form__NavigationBar .btnNext {
    min-width: 10rem; } }

/*
Styleguide Helpers

Markup:
<div class="styleguide-box {{modifier_class}} {{#if colour}}styleguide-box--{{colour}}{{/if}}"
  style="width:{{ default width '10rem'}};height:{{ default height '10rem'}};flex-grow: {{default grow 1}}">
  {{#if @partial-block}}
    {{> @partial-block}}
  {{/if}}
</div>

.styleguide-box--blue - blue
.styleguide-box--skyblue - skyblue
.styleguide-box--red - red
.styleguide-box--pink - pink
.styleguide-box--green - green
.styleguide-box--lime - lime
.styleguide-box--yellow - yellow
.styleguide-box--orange - orange
.styleguide-box--purple - purple
.styleguide-box--grey - grey
.styleguide-box--silver - silver
.styleguide-box--white - white
.styleguide-box--smokewhite - smokewhite
.styleguide-box--brown - brown

Styleguide Core.Styleguide.Box
*/
.styleguide-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  width: 100%;
  height: 100%;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-family: sans-serif;
  font-size: 0.75rem;
  outline: 1px dotted silver;
  outline-offset: 2px; }

.styleguide-box--blue {
  background: blue;
  color: skyblue;
  outline-color: blue; }

.styleguide-box--skyblue {
  outline-color: skyblue;
  background: skyblue;
  color: #00557d; }

.styleguide-box--red {
  outline-color: red;
  background: red;
  color: pink; }

.styleguide-box--pink {
  outline-color: pink;
  background: pink;
  color: darkred; }

.styleguide-box--green {
  outline-color: green;
  background: green;
  color: palegreen; }

.styleguide-box--lime {
  outline-color: lime;
  background: lime;
  color: darkgreen; }

.styleguide-box--yellow {
  outline-color: yellow;
  background: yellow;
  color: darkgoldenrod; }

.styleguide-box--orange {
  outline-color: orange;
  background: orange;
  color: brown; }

.styleguide-box--purple {
  outline-color: purple;
  background: purple;
  color: lightpink; }

.styleguide-box--grey {
  outline-color: grey;
  background: grey;
  color: #333; }

.styleguide-box--silver {
  outline-color: silver;
  background: silver;
  color: #333; }

.styleguide-box--white {
  outline-color: white;
  background: white;
  color: #333; }

.styleguide-box--smokewhite {
  outline-color: whitesmoke;
  background: whitesmoke;
  color: #666; }

.styleguide-box--brown {
  outline-color: brown;
  background: brown;
  color: lightcoral; }

/*# sourceMappingURL=core--1f329f6a.css.map*/