@import url(//hello.myfonts.net/count/3564a3);@import url(//hello.myfonts.net/count/3564a3);@charset "UTF-8";
/*
Settings

Weight: -3

Styleguide Core.Settings
*/
/*
Breakpoint Map

Styleguide Core.Settings.Breakpoints
*/
/**
 * Bounce Animations
 */
@-webkit-keyframes nudge-left {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); }
  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
            animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(-0.65em, 0, 0);
            transform: translate3d(-0.65em, 0, 0); }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
            animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(-0.25em, 0, 0);
            transform: translate3d(-0.25em, 0, 0); }
  90% {
    -webkit-transform: translate3d(-0.1em, 0, 0);
            transform: translate3d(-0.1em, 0, 0); } }
@keyframes nudge-left {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); }
  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
            animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(-0.65em, 0, 0);
            transform: translate3d(-0.65em, 0, 0); }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
            animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(-0.25em, 0, 0);
            transform: translate3d(-0.25em, 0, 0); }
  90% {
    -webkit-transform: translate3d(-0.1em, 0, 0);
            transform: translate3d(-0.1em, 0, 0); } }

@-webkit-keyframes nudge-right {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); }
  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
            animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0.65em, 0, 0);
            transform: translate3d(0.65em, 0, 0); }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
            animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0.25em, 0, 0);
            transform: translate3d(0.25em, 0, 0); }
  90% {
    -webkit-transform: translate3d(0.1em, 0, 0);
            transform: translate3d(0.1em, 0, 0); } }

@keyframes nudge-right {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); }
  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
            animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0.65em, 0, 0);
            transform: translate3d(0.65em, 0, 0); }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
            animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0.25em, 0, 0);
            transform: translate3d(0.25em, 0, 0); }
  90% {
    -webkit-transform: translate3d(0.1em, 0, 0);
            transform: translate3d(0.1em, 0, 0); } }

/*
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
*/
/*
Mixins

Weight: -2

Styleguide Core.Mixins
*/
/*
Css Triangle

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

Styleguide AIA001.Mixins.CssTriangle
*/
/*
Typography

    @license
    MyFonts Webfont Build ID 3499171, 2017-12-17T18:24:52-0500

    The fonts listed in this notice are subject to the End User License
    Agreement(s) entered into by the website owner. All other parties are
    explicitly restricted from using the Licensed Webfonts(s).

    You may obtain a valid license at the URLs below.

    Webfont: Adelle-Bold by TypeTogether
    URL: https://www.myfonts.com/fonts/type-together/adelle/bold/
    Copyright: Copyright (c) 2009 by TypeTogether. All rights reserved.
    Licensed pageviews: 250,000

    Webfont: Adelle-BoldItalic by TypeTogether
    URL: https://www.myfonts.com/fonts/type-together/adelle/bold-italic/
    Copyright: Copyright (c) 2009 by TypeTogether. All rights reserved.
    Licensed pageviews: 250,000

    Webfont: Adelle-Italic by TypeTogether
    URL: https://www.myfonts.com/fonts/type-together/adelle/italic/
    Copyright: Copyright (c) 2009 by TypeTogether. All rights reserved.
    Licensed pageviews: 250,000

    Webfont: Adelle-Regular by TypeTogether
    URL: https://www.myfonts.com/fonts/type-together/adelle/regular/
    Copyright: Copyright (c) 2009 by TypeTogether. All rights reserved.
    Licensed pageviews: 250,000

    Webfont: FF DIN Std Regular by FontFont
    URL: https://www.myfonts.com/fonts/fontfont/ff-din/ot-regular/
    Copyright: 2016 published by Monotype GmbH
    Licensed pageviews: 50,000

    Webfont: FF DIN Std Regular Italic by FontFont
    URL: https://www.myfonts.com/fonts/fontfont/ff-din/ot-regular-italic/
    Copyright: 2016 published by Monotype GmbH
    Licensed pageviews: 50,000

    Webfont: FF DIN Std Medium by FontFont
    URL: https://www.myfonts.com/fonts/fontfont/ff-din/ot-medium/
    Copyright: 2016 published by Monotype GmbH
    Licensed pageviews: 50,000

    Webfont: FF DIN Std Medium Italic by FontFont
    URL: https://www.myfonts.com/fonts/fontfont/ff-din/ot-medium-italic/
    Copyright: 2016 published by Monotype GmbH
    Licensed pageviews: 50,000

    Webfont: FF DIN Std Bold by FontFont
    URL: https://www.myfonts.com/fonts/fontfont/ff-din/ot-bold/
    Copyright: 2016 published by Monotype GmbH
    Licensed pageviews: 50,000

    Webfont: FF DIN Std Bold Italic by FontFont
    URL: https://www.myfonts.com/fonts/fontfont/ff-din/ot-bold-italic/
    Copyright: 2016 published by Monotype GmbH
    Licensed pageviews: 50,000

    License: https://www.myfonts.com/viewlicense?type=web&buildid=3499171

    © 2017 MyFonts Inc

Markup:
<div class="{{modifier_class}}">
  <p>Velis alis maciem inbellemque quod</p>
  <ol>
    <li>Et veni tellusque mille institerant flet</li>
    <li>Illam velamina Iuno</li>
    <li>Rigido nunc cum lente tulisse</li>
    <li>Canis tempora ter quid fit harpen opertum</li>
    <li>Monendo velavit metuque viderat forma Finis totidem</li>
    <li>Vulnere cum inobrutus amore tuta fulmina</li>
  </ol>
</div>

.f-din--normal - din normal
.f-din--bold - din bold
.f-din--500 - din 500
.f-din--italic - din italic
.f-din--bolditalic - din bold italic
.f-din--500italic - din 500 italic
.f-adelle--normal - adelle normal
.f-adelle--bold - adelle bold
.f-adelle--italic - adelle italic
.f-adelle--bolditalic - adelle bold italic

Styleguide AIA001.Global.Typography
*/
/*
Typography (paragraph)

Markup:
<p>Lorem markdownum fletus materno imitataque tibia sistraque. A natura si Mopsum
eris, fata linguam metum laevane *erat*, census fuit, ut limumque. Stabat noctes
per laceros adfecit vos, sic nullique verba iam. Doridaque ipsum sollicitive
segnem feruntur videamus simulac flendoque per quod nec Cecropide. Veras
crepuscula dure attonito extrahit in spes tamen cornua turaque!</p>

Styleguide AIA001.Global.Typography.Paragraph
*/
/*
Typography (paragraph)

Markup:
{{{markdown (filecontent "client/src/site__aia001/components/generic-page/paragraph.md") }}}

Styleguide AIA001.Global.Typography.Article
*/
/* @import must be at top of file, otherwise CSS will not work */
@font-face {
  font-family: Adelle;
  font-weight: normal;
  font-style: normal;
  src: url(/static/theme/fonts/3564A3_3_0--5bf8a06d.eot);
  src: url(/static/theme/fonts/3564A3_3_0--5bf8a06d.eot?#iefix) format("embedded-opentype"), url(/static/theme/fonts/3564A3_3_0--bc9f2aea.woff2) format("woff2"), url(/static/theme/fonts/3564A3_3_0--381fc53a.woff) format("woff"), url(/static/theme/fonts/3564A3_3_0--b05c5e5e.ttf) format("truetype"); }

@font-face {
  font-family: Adelle;
  font-weight: bold;
  font-style: normal;
  src: url(/static/theme/fonts/3564A3_0_0--a4a8f82d.eot);
  src: url(/static/theme/fonts/3564A3_0_0--a4a8f82d.eot?#iefix) format("embedded-opentype"), url(/static/theme/fonts/3564A3_0_0--56535cac.woff2) format("woff2"), url(/static/theme/fonts/3564A3_0_0--b3b39ca2.woff) format("woff"), url(/static/theme/fonts/3564A3_0_0--8686127c.ttf) format("truetype"); }

@font-face {
  font-family: Adelle;
  font-style: italic;
  font-weight: normal;
  src: url(/static/theme/fonts/3564A3_2_0--4ddffe1e.eot);
  src: url(/static/theme/fonts/3564A3_2_0--4ddffe1e.eot?#iefix) format("embedded-opentype"), url(/static/theme/fonts/3564A3_2_0--c42395d4.woff2) format("woff2"), url(/static/theme/fonts/3564A3_2_0--d7eec89a.woff) format("woff"), url(/static/theme/fonts/3564A3_2_0--f50cee17.ttf) format("truetype"); }

@font-face {
  font-family: Adelle;
  font-weight: bold;
  font-style: italic;
  src: url(/static/theme/fonts/3564A3_1_0--2034d549.eot);
  src: url(/static/theme/fonts/3564A3_1_0--2034d549.eot?#iefix) format("embedded-opentype"), url(/static/theme/fonts/3564A3_1_0--f32dc6e9.woff2) format("woff2"), url(/static/theme/fonts/3564A3_1_0--3a284161.woff) format("woff"), url(/static/theme/fonts/3564A3_1_0--d88fd57b.ttf) format("truetype"); }

@font-face {
  font-family: din;
  font-weight: normal;
  font-style: normal;
  src: url(/static/theme/fonts/3564A3_4_0--508d2e4f.eot);
  src: url(/static/theme/fonts/3564A3_4_0--054cad8c.woff2) format("woff2"), url(/static/theme/fonts/3564A3_4_0--a7a3e58a.woff) format("woff"), url(/static/theme/fonts/3564A3_4_0--97754503.ttf) format("truetype"); }

@font-face {
  font-family: din;
  font-weight: normal;
  font-style: italic;
  src: url(/static/theme/fonts/3564A3_5_0--7b3455db.eot);
  src: url(/static/theme/fonts/3564A3_5_0--7b3455db.eot?#iefix) format("embedded-opentype"), url(/static/theme/fonts/3564A3_5_0--631829ca.woff2) format("woff2"), url(/static/theme/fonts/3564A3_5_0--5eb6ad8b.woff) format("woff"), url(/static/theme/fonts/3564A3_5_0--e6d355bb.ttf) format("truetype"); }

@font-face {
  font-family: din;
  font-weight: 500;
  font-style: normal;
  src: url(/static/theme/fonts/3564A3_6_0--f60da142.eot);
  src: url(/static/theme/fonts/3564A3_6_0--f60da142.eot?#iefix) format("embedded-opentype"), url(/static/theme/fonts/3564A3_6_0--91fbf151.woff2) format("woff2"), url(/static/theme/fonts/3564A3_6_0--216bb058.woff) format("woff"), url(/static/theme/fonts/3564A3_6_0--b82e68aa.ttf) format("truetype"); }

@font-face {
  font-family: din;
  font-weight: 500;
  font-style: italic;
  src: url(/static/theme/fonts/3564A3_7_0--e54654fc.eot);
  src: url(/static/theme/fonts/3564A3_7_0--e54654fc.eot?#iefix) format("embedded-opentype"), url(/static/theme/fonts/3564A3_7_0--5c0315b1.woff2) format("woff2"), url(/static/theme/fonts/3564A3_7_0--cd8d7601.woff) format("woff"), url(/static/theme/fonts/3564A3_7_0--4c7d3a7d.ttf) format("truetype"); }

@font-face {
  font-family: din;
  font-weight: bold;
  font-style: normal;
  src: url(/static/theme/fonts/3564A3_8_0--322b39b8.eot);
  src: url(/static/theme/fonts/3564A3_8_0--322b39b8.eot?#iefix) format("embedded-opentype"), url(/static/theme/fonts/3564A3_8_0--a5b78d55.woff2) format("woff2"), url(/static/theme/fonts/3564A3_8_0--af668d57.woff) format("woff"), url(/static/theme/fonts/3564A3_8_0--944ad789.ttf) format("truetype"); }

@font-face {
  font-family: din;
  font-weight: bold;
  font-style: italic;
  src: url(/static/theme/fonts/3564A3_9_0--c96a42cf.eot);
  src: url(/static/theme/fonts/3564A3_9_0--c96a42cf.eot?#iefix) format("embedded-opentype"), url(/static/theme/fonts/3564A3_9_0--2f1077fc.woff2) format("woff2"), url(/static/theme/fonts/3564A3_9_0--61407b7b.woff) format("woff"), url(/static/theme/fonts/3564A3_9_0--27bdc911.ttf) format("truetype"); }

/*
Turn a map into a series of css `attribute: value;`
*/
.f-din--normal {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
  EditMenuName: Din Normal; }

.f-din--medium {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  EditMenuName: Din Medium; }

.f-din--bold {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-style: normal;
  EditMenuName: Din Bold; }

.f-din--italic {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-style: italic;
  EditMenuName: Din Italic; }

.f-din--bolditalic {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-style: italic;
  EditMenuName: Din Italic Bold; }

.f-din--mediumitalic {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: italic;
  EditMenuName: Din Italic Medium; }

.f-adelle--normal {
  font-family: "Adelle", Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
  EditMenuName: Adelle Normal; }

.f-adelle--bold {
  font-family: "Adelle", Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-style: normal;
  EditMenuName: Adelle Bold; }

.f-adelle--italic {
  font-family: "Adelle", Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-style: italic;
  EditMenuName: Adelle Italic; }

.f-adelle--bolditalic {
  font-family: "Adelle", Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-style: italic;
  EditMenuName: Adelle Bold Italic; }

@media (max-width: 26.5em) {
  .u-ResponsiveTable {
    border: 0; }
    .u-ResponsiveTable thead {
      display: none; }
    .u-ResponsiveTable tr {
      margin: 0; }
    .u-ResponsiveTable td {
      padding: 0;
      font-weight: normal; }
    .u-ResponsiveTable tr td:last-child {
      margin-bottom: 0.125rem; }
    .u-ResponsiveTable td:not(:first-child) {
      border-top: 0; }
    .u-ResponsiveTable td[data-row-header] {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      margin: 0; }
      .u-ResponsiveTable td[data-row-header]:before {
        -webkit-box-flex: 0;
            -ms-flex: none;
                flex: none;
        font-family: din, Helvetica, Arial, sans-serif;
        font-weight: bold;
        font-style: normal;
        text-align: left;
        width: 7.1875rem;
        padding: 1.25rem 0.75rem;
        background-color: rgba(215, 211, 205, 0.75);
        content: attr(data-row-header); }
    .u-ResponsiveTable .responsive-table__cell-value {
      padding: 1.25rem 0.75rem;
      text-align: left; } }

@media (min-width: 26.5625em) {
  .u-ResponsiveTable thead {
    display: table-header-group; }
  .u-ResponsiveTable tr td[data-row-header]:before {
    display: none; } }
@charset "UTF-8";
/*
AIA001

Styleguide AIA001
*/
/*
Settings

Weight: -3

Styleguide Core.Settings
*/
/*
Breakpoint Map

Styleguide Core.Settings.Breakpoints
*/
/**
 * Bounce Animations
 */
@-webkit-keyframes nudge-left {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); }
  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
            animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(-0.65em, 0, 0);
            transform: translate3d(-0.65em, 0, 0); }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
            animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(-0.25em, 0, 0);
            transform: translate3d(-0.25em, 0, 0); }
  90% {
    -webkit-transform: translate3d(-0.1em, 0, 0);
            transform: translate3d(-0.1em, 0, 0); } }
@keyframes nudge-left {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); }
  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
            animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(-0.65em, 0, 0);
            transform: translate3d(-0.65em, 0, 0); }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
            animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(-0.25em, 0, 0);
            transform: translate3d(-0.25em, 0, 0); }
  90% {
    -webkit-transform: translate3d(-0.1em, 0, 0);
            transform: translate3d(-0.1em, 0, 0); } }

@-webkit-keyframes nudge-right {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); }
  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
            animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0.65em, 0, 0);
            transform: translate3d(0.65em, 0, 0); }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
            animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0.25em, 0, 0);
            transform: translate3d(0.25em, 0, 0); }
  90% {
    -webkit-transform: translate3d(0.1em, 0, 0);
            transform: translate3d(0.1em, 0, 0); } }

@keyframes nudge-right {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); }
  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
            animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0.65em, 0, 0);
            transform: translate3d(0.65em, 0, 0); }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
            animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0.25em, 0, 0);
            transform: translate3d(0.25em, 0, 0); }
  90% {
    -webkit-transform: translate3d(0.1em, 0, 0);
            transform: translate3d(0.1em, 0, 0); } }

/*
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
*/
/*
Mixins

Weight: -2

Styleguide Core.Mixins
*/
/*
Css Triangle

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

Styleguide AIA001.Mixins.CssTriangle
*/
/*
Global

Styleguide AIA001.Global
 */
/*
Icons

Styleguide AIA001.Global.Icons
 */
.site-container {
  -webkit-overflow-scrolling: touch; }

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }

[data-mediaquery-sensor]:after {
  display: none;
  content: "small"; }

@media (min-width: 26.5625em) {
  [data-mediaquery-sensor]:after {
    display: none;
    content: "small medium"; } }

@media (min-width: 48em) {
  [data-mediaquery-sensor]:after {
    display: none;
    content: "small medium large"; } }

@media (min-width: 64em) {
  [data-mediaquery-sensor]:after {
    display: none;
    content: "small medium large xlarge"; } }

@media (min-width: 74.375em) {
  [data-mediaquery-sensor]:after {
    display: none;
    content: "small medium large xlarge xxlarge"; } }

/*
Typography

    @license
    MyFonts Webfont Build ID 3499171, 2017-12-17T18:24:52-0500

    The fonts listed in this notice are subject to the End User License
    Agreement(s) entered into by the website owner. All other parties are
    explicitly restricted from using the Licensed Webfonts(s).

    You may obtain a valid license at the URLs below.

    Webfont: Adelle-Bold by TypeTogether
    URL: https://www.myfonts.com/fonts/type-together/adelle/bold/
    Copyright: Copyright (c) 2009 by TypeTogether. All rights reserved.
    Licensed pageviews: 250,000

    Webfont: Adelle-BoldItalic by TypeTogether
    URL: https://www.myfonts.com/fonts/type-together/adelle/bold-italic/
    Copyright: Copyright (c) 2009 by TypeTogether. All rights reserved.
    Licensed pageviews: 250,000

    Webfont: Adelle-Italic by TypeTogether
    URL: https://www.myfonts.com/fonts/type-together/adelle/italic/
    Copyright: Copyright (c) 2009 by TypeTogether. All rights reserved.
    Licensed pageviews: 250,000

    Webfont: Adelle-Regular by TypeTogether
    URL: https://www.myfonts.com/fonts/type-together/adelle/regular/
    Copyright: Copyright (c) 2009 by TypeTogether. All rights reserved.
    Licensed pageviews: 250,000

    Webfont: FF DIN Std Regular by FontFont
    URL: https://www.myfonts.com/fonts/fontfont/ff-din/ot-regular/
    Copyright: 2016 published by Monotype GmbH
    Licensed pageviews: 50,000

    Webfont: FF DIN Std Regular Italic by FontFont
    URL: https://www.myfonts.com/fonts/fontfont/ff-din/ot-regular-italic/
    Copyright: 2016 published by Monotype GmbH
    Licensed pageviews: 50,000

    Webfont: FF DIN Std Medium by FontFont
    URL: https://www.myfonts.com/fonts/fontfont/ff-din/ot-medium/
    Copyright: 2016 published by Monotype GmbH
    Licensed pageviews: 50,000

    Webfont: FF DIN Std Medium Italic by FontFont
    URL: https://www.myfonts.com/fonts/fontfont/ff-din/ot-medium-italic/
    Copyright: 2016 published by Monotype GmbH
    Licensed pageviews: 50,000

    Webfont: FF DIN Std Bold by FontFont
    URL: https://www.myfonts.com/fonts/fontfont/ff-din/ot-bold/
    Copyright: 2016 published by Monotype GmbH
    Licensed pageviews: 50,000

    Webfont: FF DIN Std Bold Italic by FontFont
    URL: https://www.myfonts.com/fonts/fontfont/ff-din/ot-bold-italic/
    Copyright: 2016 published by Monotype GmbH
    Licensed pageviews: 50,000

    License: https://www.myfonts.com/viewlicense?type=web&buildid=3499171

    © 2017 MyFonts Inc

Markup:
<div class="{{modifier_class}}">
  <p>Velis alis maciem inbellemque quod</p>
  <ol>
    <li>Et veni tellusque mille institerant flet</li>
    <li>Illam velamina Iuno</li>
    <li>Rigido nunc cum lente tulisse</li>
    <li>Canis tempora ter quid fit harpen opertum</li>
    <li>Monendo velavit metuque viderat forma Finis totidem</li>
    <li>Vulnere cum inobrutus amore tuta fulmina</li>
  </ol>
</div>

.f-din--normal - din normal
.f-din--bold - din bold
.f-din--500 - din 500
.f-din--italic - din italic
.f-din--bolditalic - din bold italic
.f-din--500italic - din 500 italic
.f-adelle--normal - adelle normal
.f-adelle--bold - adelle bold
.f-adelle--italic - adelle italic
.f-adelle--bolditalic - adelle bold italic

Styleguide AIA001.Global.Typography
*/
/*
Typography (paragraph)

Markup:
<p>Lorem markdownum fletus materno imitataque tibia sistraque. A natura si Mopsum
eris, fata linguam metum laevane *erat*, census fuit, ut limumque. Stabat noctes
per laceros adfecit vos, sic nullique verba iam. Doridaque ipsum sollicitive
segnem feruntur videamus simulac flendoque per quod nec Cecropide. Veras
crepuscula dure attonito extrahit in spes tamen cornua turaque!</p>

Styleguide AIA001.Global.Typography.Paragraph
*/
/*
Typography (paragraph)

Markup:
{{{markdown (filecontent "client/src/site__aia001/components/generic-page/paragraph.md") }}}

Styleguide AIA001.Global.Typography.Article
*/
/* @import must be at top of file, otherwise CSS will not work */
@font-face {
  font-family: Adelle;
  font-weight: normal;
  font-style: normal;
  src: url(/static/theme/fonts/3564A3_3_0--5bf8a06d.eot);
  src: url(/static/theme/fonts/3564A3_3_0--5bf8a06d.eot?#iefix) format("embedded-opentype"), url(/static/theme/fonts/3564A3_3_0--bc9f2aea.woff2) format("woff2"), url(/static/theme/fonts/3564A3_3_0--381fc53a.woff) format("woff"), url(/static/theme/fonts/3564A3_3_0--b05c5e5e.ttf) format("truetype"); }

@font-face {
  font-family: Adelle;
  font-weight: bold;
  font-style: normal;
  src: url(/static/theme/fonts/3564A3_0_0--a4a8f82d.eot);
  src: url(/static/theme/fonts/3564A3_0_0--a4a8f82d.eot?#iefix) format("embedded-opentype"), url(/static/theme/fonts/3564A3_0_0--56535cac.woff2) format("woff2"), url(/static/theme/fonts/3564A3_0_0--b3b39ca2.woff) format("woff"), url(/static/theme/fonts/3564A3_0_0--8686127c.ttf) format("truetype"); }

@font-face {
  font-family: Adelle;
  font-style: italic;
  font-weight: normal;
  src: url(/static/theme/fonts/3564A3_2_0--4ddffe1e.eot);
  src: url(/static/theme/fonts/3564A3_2_0--4ddffe1e.eot?#iefix) format("embedded-opentype"), url(/static/theme/fonts/3564A3_2_0--c42395d4.woff2) format("woff2"), url(/static/theme/fonts/3564A3_2_0--d7eec89a.woff) format("woff"), url(/static/theme/fonts/3564A3_2_0--f50cee17.ttf) format("truetype"); }

@font-face {
  font-family: Adelle;
  font-weight: bold;
  font-style: italic;
  src: url(/static/theme/fonts/3564A3_1_0--2034d549.eot);
  src: url(/static/theme/fonts/3564A3_1_0--2034d549.eot?#iefix) format("embedded-opentype"), url(/static/theme/fonts/3564A3_1_0--f32dc6e9.woff2) format("woff2"), url(/static/theme/fonts/3564A3_1_0--3a284161.woff) format("woff"), url(/static/theme/fonts/3564A3_1_0--d88fd57b.ttf) format("truetype"); }

@font-face {
  font-family: din;
  font-weight: normal;
  font-style: normal;
  src: url(/static/theme/fonts/3564A3_4_0--508d2e4f.eot);
  src: url(/static/theme/fonts/3564A3_4_0--054cad8c.woff2) format("woff2"), url(/static/theme/fonts/3564A3_4_0--a7a3e58a.woff) format("woff"), url(/static/theme/fonts/3564A3_4_0--97754503.ttf) format("truetype"); }

@font-face {
  font-family: din;
  font-weight: normal;
  font-style: italic;
  src: url(/static/theme/fonts/3564A3_5_0--7b3455db.eot);
  src: url(/static/theme/fonts/3564A3_5_0--7b3455db.eot?#iefix) format("embedded-opentype"), url(/static/theme/fonts/3564A3_5_0--631829ca.woff2) format("woff2"), url(/static/theme/fonts/3564A3_5_0--5eb6ad8b.woff) format("woff"), url(/static/theme/fonts/3564A3_5_0--e6d355bb.ttf) format("truetype"); }

@font-face {
  font-family: din;
  font-weight: 500;
  font-style: normal;
  src: url(/static/theme/fonts/3564A3_6_0--f60da142.eot);
  src: url(/static/theme/fonts/3564A3_6_0--f60da142.eot?#iefix) format("embedded-opentype"), url(/static/theme/fonts/3564A3_6_0--91fbf151.woff2) format("woff2"), url(/static/theme/fonts/3564A3_6_0--216bb058.woff) format("woff"), url(/static/theme/fonts/3564A3_6_0--b82e68aa.ttf) format("truetype"); }

@font-face {
  font-family: din;
  font-weight: 500;
  font-style: italic;
  src: url(/static/theme/fonts/3564A3_7_0--e54654fc.eot);
  src: url(/static/theme/fonts/3564A3_7_0--e54654fc.eot?#iefix) format("embedded-opentype"), url(/static/theme/fonts/3564A3_7_0--5c0315b1.woff2) format("woff2"), url(/static/theme/fonts/3564A3_7_0--cd8d7601.woff) format("woff"), url(/static/theme/fonts/3564A3_7_0--4c7d3a7d.ttf) format("truetype"); }

@font-face {
  font-family: din;
  font-weight: bold;
  font-style: normal;
  src: url(/static/theme/fonts/3564A3_8_0--322b39b8.eot);
  src: url(/static/theme/fonts/3564A3_8_0--322b39b8.eot?#iefix) format("embedded-opentype"), url(/static/theme/fonts/3564A3_8_0--a5b78d55.woff2) format("woff2"), url(/static/theme/fonts/3564A3_8_0--af668d57.woff) format("woff"), url(/static/theme/fonts/3564A3_8_0--944ad789.ttf) format("truetype"); }

@font-face {
  font-family: din;
  font-weight: bold;
  font-style: italic;
  src: url(/static/theme/fonts/3564A3_9_0--c96a42cf.eot);
  src: url(/static/theme/fonts/3564A3_9_0--c96a42cf.eot?#iefix) format("embedded-opentype"), url(/static/theme/fonts/3564A3_9_0--2f1077fc.woff2) format("woff2"), url(/static/theme/fonts/3564A3_9_0--61407b7b.woff) format("woff"), url(/static/theme/fonts/3564A3_9_0--27bdc911.ttf) format("truetype"); }

/*
Turn a map into a series of css `attribute: value;`
*/
.f-din--normal {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
  EditMenuName: Din Normal; }

.f-din--medium {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  EditMenuName: Din Medium; }

.f-din--bold {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-style: normal;
  EditMenuName: Din Bold; }

.f-din--italic {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-style: italic;
  EditMenuName: Din Italic; }

.f-din--bolditalic {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-style: italic;
  EditMenuName: Din Italic Bold; }

.f-din--mediumitalic {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: italic;
  EditMenuName: Din Italic Medium; }

.f-adelle--normal {
  font-family: "Adelle", Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
  EditMenuName: Adelle Normal; }

.f-adelle--bold {
  font-family: "Adelle", Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-style: normal;
  EditMenuName: Adelle Bold; }

.f-adelle--italic {
  font-family: "Adelle", Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-style: italic;
  EditMenuName: Adelle Italic; }

.f-adelle--bolditalic {
  font-family: "Adelle", Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-style: italic;
  EditMenuName: Adelle Bold Italic; }

/*
Settings

Weight: -3

Styleguide Core.Settings
*/
/*
Breakpoint Map

Styleguide Core.Settings.Breakpoints
*/
/**
 * Bounce Animations
 */
@keyframes nudge-left {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); }
  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
            animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(-0.65em, 0, 0);
            transform: translate3d(-0.65em, 0, 0); }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
            animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(-0.25em, 0, 0);
            transform: translate3d(-0.25em, 0, 0); }
  90% {
    -webkit-transform: translate3d(-0.1em, 0, 0);
            transform: translate3d(-0.1em, 0, 0); } }

@keyframes nudge-right {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); }
  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
            animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0.65em, 0, 0);
            transform: translate3d(0.65em, 0, 0); }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
            animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0.25em, 0, 0);
            transform: translate3d(0.25em, 0, 0); }
  90% {
    -webkit-transform: translate3d(0.1em, 0, 0);
            transform: translate3d(0.1em, 0, 0); } }

/*
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
*/
/*
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
*/
/*
Typography

    @license
    MyFonts Webfont Build ID 3499171, 2017-12-17T18:24:52-0500

    The fonts listed in this notice are subject to the End User License
    Agreement(s) entered into by the website owner. All other parties are
    explicitly restricted from using the Licensed Webfonts(s).

    You may obtain a valid license at the URLs below.

    Webfont: Adelle-Bold by TypeTogether
    URL: https://www.myfonts.com/fonts/type-together/adelle/bold/
    Copyright: Copyright (c) 2009 by TypeTogether. All rights reserved.
    Licensed pageviews: 250,000

    Webfont: Adelle-BoldItalic by TypeTogether
    URL: https://www.myfonts.com/fonts/type-together/adelle/bold-italic/
    Copyright: Copyright (c) 2009 by TypeTogether. All rights reserved.
    Licensed pageviews: 250,000

    Webfont: Adelle-Italic by TypeTogether
    URL: https://www.myfonts.com/fonts/type-together/adelle/italic/
    Copyright: Copyright (c) 2009 by TypeTogether. All rights reserved.
    Licensed pageviews: 250,000

    Webfont: Adelle-Regular by TypeTogether
    URL: https://www.myfonts.com/fonts/type-together/adelle/regular/
    Copyright: Copyright (c) 2009 by TypeTogether. All rights reserved.
    Licensed pageviews: 250,000

    Webfont: FF DIN Std Regular by FontFont
    URL: https://www.myfonts.com/fonts/fontfont/ff-din/ot-regular/
    Copyright: 2016 published by Monotype GmbH
    Licensed pageviews: 50,000

    Webfont: FF DIN Std Regular Italic by FontFont
    URL: https://www.myfonts.com/fonts/fontfont/ff-din/ot-regular-italic/
    Copyright: 2016 published by Monotype GmbH
    Licensed pageviews: 50,000

    Webfont: FF DIN Std Medium by FontFont
    URL: https://www.myfonts.com/fonts/fontfont/ff-din/ot-medium/
    Copyright: 2016 published by Monotype GmbH
    Licensed pageviews: 50,000

    Webfont: FF DIN Std Medium Italic by FontFont
    URL: https://www.myfonts.com/fonts/fontfont/ff-din/ot-medium-italic/
    Copyright: 2016 published by Monotype GmbH
    Licensed pageviews: 50,000

    Webfont: FF DIN Std Bold by FontFont
    URL: https://www.myfonts.com/fonts/fontfont/ff-din/ot-bold/
    Copyright: 2016 published by Monotype GmbH
    Licensed pageviews: 50,000

    Webfont: FF DIN Std Bold Italic by FontFont
    URL: https://www.myfonts.com/fonts/fontfont/ff-din/ot-bold-italic/
    Copyright: 2016 published by Monotype GmbH
    Licensed pageviews: 50,000

    License: https://www.myfonts.com/viewlicense?type=web&buildid=3499171

    © 2017 MyFonts Inc

Markup:
<div class="{{modifier_class}}">
  <p>Velis alis maciem inbellemque quod</p>
  <ol>
    <li>Et veni tellusque mille institerant flet</li>
    <li>Illam velamina Iuno</li>
    <li>Rigido nunc cum lente tulisse</li>
    <li>Canis tempora ter quid fit harpen opertum</li>
    <li>Monendo velavit metuque viderat forma Finis totidem</li>
    <li>Vulnere cum inobrutus amore tuta fulmina</li>
  </ol>
</div>

.f-din--normal - din normal
.f-din--bold - din bold
.f-din--500 - din 500
.f-din--italic - din italic
.f-din--bolditalic - din bold italic
.f-din--500italic - din 500 italic
.f-adelle--normal - adelle normal
.f-adelle--bold - adelle bold
.f-adelle--italic - adelle italic
.f-adelle--bolditalic - adelle bold italic

Styleguide AIA001.Global.Typography
*/
/*
Typography (paragraph)

Markup:
<p>Lorem markdownum fletus materno imitataque tibia sistraque. A natura si Mopsum
eris, fata linguam metum laevane *erat*, census fuit, ut limumque. Stabat noctes
per laceros adfecit vos, sic nullique verba iam. Doridaque ipsum sollicitive
segnem feruntur videamus simulac flendoque per quod nec Cecropide. Veras
crepuscula dure attonito extrahit in spes tamen cornua turaque!</p>

Styleguide AIA001.Global.Typography.Paragraph
*/
/*
Typography (paragraph)

Markup:
{{{markdown (filecontent "client/src/site__aia001/components/generic-page/paragraph.md") }}}

Styleguide AIA001.Global.Typography.Article
*/
/* @import must be at top of file, otherwise CSS will not work */
@font-face {
  font-family: Adelle;
  font-weight: normal;
  font-style: normal;
  src: url(/static/theme/fonts/3564A3_3_0--5bf8a06d.eot);
  src: url(/static/theme/fonts/3564A3_3_0--5bf8a06d.eot?#iefix) format("embedded-opentype"), url(/static/theme/fonts/3564A3_3_0--bc9f2aea.woff2) format("woff2"), url(/static/theme/fonts/3564A3_3_0--381fc53a.woff) format("woff"), url(/static/theme/fonts/3564A3_3_0--b05c5e5e.ttf) format("truetype"); }

@font-face {
  font-family: Adelle;
  font-weight: bold;
  font-style: normal;
  src: url(/static/theme/fonts/3564A3_0_0--a4a8f82d.eot);
  src: url(/static/theme/fonts/3564A3_0_0--a4a8f82d.eot?#iefix) format("embedded-opentype"), url(/static/theme/fonts/3564A3_0_0--56535cac.woff2) format("woff2"), url(/static/theme/fonts/3564A3_0_0--b3b39ca2.woff) format("woff"), url(/static/theme/fonts/3564A3_0_0--8686127c.ttf) format("truetype"); }

@font-face {
  font-family: Adelle;
  font-style: italic;
  font-weight: normal;
  src: url(/static/theme/fonts/3564A3_2_0--4ddffe1e.eot);
  src: url(/static/theme/fonts/3564A3_2_0--4ddffe1e.eot?#iefix) format("embedded-opentype"), url(/static/theme/fonts/3564A3_2_0--c42395d4.woff2) format("woff2"), url(/static/theme/fonts/3564A3_2_0--d7eec89a.woff) format("woff"), url(/static/theme/fonts/3564A3_2_0--f50cee17.ttf) format("truetype"); }

@font-face {
  font-family: Adelle;
  font-weight: bold;
  font-style: italic;
  src: url(/static/theme/fonts/3564A3_1_0--2034d549.eot);
  src: url(/static/theme/fonts/3564A3_1_0--2034d549.eot?#iefix) format("embedded-opentype"), url(/static/theme/fonts/3564A3_1_0--f32dc6e9.woff2) format("woff2"), url(/static/theme/fonts/3564A3_1_0--3a284161.woff) format("woff"), url(/static/theme/fonts/3564A3_1_0--d88fd57b.ttf) format("truetype"); }

@font-face {
  font-family: din;
  font-weight: normal;
  font-style: normal;
  src: url(/static/theme/fonts/3564A3_4_0--508d2e4f.eot);
  src: url(/static/theme/fonts/3564A3_4_0--054cad8c.woff2) format("woff2"), url(/static/theme/fonts/3564A3_4_0--a7a3e58a.woff) format("woff"), url(/static/theme/fonts/3564A3_4_0--97754503.ttf) format("truetype"); }

@font-face {
  font-family: din;
  font-weight: normal;
  font-style: italic;
  src: url(/static/theme/fonts/3564A3_5_0--7b3455db.eot);
  src: url(/static/theme/fonts/3564A3_5_0--7b3455db.eot?#iefix) format("embedded-opentype"), url(/static/theme/fonts/3564A3_5_0--631829ca.woff2) format("woff2"), url(/static/theme/fonts/3564A3_5_0--5eb6ad8b.woff) format("woff"), url(/static/theme/fonts/3564A3_5_0--e6d355bb.ttf) format("truetype"); }

@font-face {
  font-family: din;
  font-weight: 500;
  font-style: normal;
  src: url(/static/theme/fonts/3564A3_6_0--f60da142.eot);
  src: url(/static/theme/fonts/3564A3_6_0--f60da142.eot?#iefix) format("embedded-opentype"), url(/static/theme/fonts/3564A3_6_0--91fbf151.woff2) format("woff2"), url(/static/theme/fonts/3564A3_6_0--216bb058.woff) format("woff"), url(/static/theme/fonts/3564A3_6_0--b82e68aa.ttf) format("truetype"); }

@font-face {
  font-family: din;
  font-weight: 500;
  font-style: italic;
  src: url(/static/theme/fonts/3564A3_7_0--e54654fc.eot);
  src: url(/static/theme/fonts/3564A3_7_0--e54654fc.eot?#iefix) format("embedded-opentype"), url(/static/theme/fonts/3564A3_7_0--5c0315b1.woff2) format("woff2"), url(/static/theme/fonts/3564A3_7_0--cd8d7601.woff) format("woff"), url(/static/theme/fonts/3564A3_7_0--4c7d3a7d.ttf) format("truetype"); }

@font-face {
  font-family: din;
  font-weight: bold;
  font-style: normal;
  src: url(/static/theme/fonts/3564A3_8_0--322b39b8.eot);
  src: url(/static/theme/fonts/3564A3_8_0--322b39b8.eot?#iefix) format("embedded-opentype"), url(/static/theme/fonts/3564A3_8_0--a5b78d55.woff2) format("woff2"), url(/static/theme/fonts/3564A3_8_0--af668d57.woff) format("woff"), url(/static/theme/fonts/3564A3_8_0--944ad789.ttf) format("truetype"); }

@font-face {
  font-family: din;
  font-weight: bold;
  font-style: italic;
  src: url(/static/theme/fonts/3564A3_9_0--c96a42cf.eot);
  src: url(/static/theme/fonts/3564A3_9_0--c96a42cf.eot?#iefix) format("embedded-opentype"), url(/static/theme/fonts/3564A3_9_0--2f1077fc.woff2) format("woff2"), url(/static/theme/fonts/3564A3_9_0--61407b7b.woff) format("woff"), url(/static/theme/fonts/3564A3_9_0--27bdc911.ttf) format("truetype"); }

/*
Turn a map into a series of css `attribute: value;`
*/
.f-din--normal {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
  EditMenuName: Din Normal; }

.f-din--medium {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  EditMenuName: Din Medium; }

.f-din--bold {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-style: normal;
  EditMenuName: Din Bold; }

.f-din--italic {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-style: italic;
  EditMenuName: Din Italic; }

.f-din--bolditalic {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-style: italic;
  EditMenuName: Din Italic Bold; }

.f-din--mediumitalic {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: italic;
  EditMenuName: Din Italic Medium; }

.f-adelle--normal {
  font-family: "Adelle", Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
  EditMenuName: Adelle Normal; }

.f-adelle--bold {
  font-family: "Adelle", Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-style: normal;
  EditMenuName: Adelle Bold; }

.f-adelle--italic {
  font-family: "Adelle", Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-style: italic;
  EditMenuName: Adelle Italic; }

.f-adelle--bolditalic {
  font-family: "Adelle", Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-style: italic;
  EditMenuName: Adelle Bold Italic; }

.plyr {
  margin: 1.875rem 0; }

.plyr__control.plyr__control--overlaid {
  width: 3.5rem;
  height: 3.5rem;
  background-color: #72d89b;
  color: #005036;
  -webkit-box-shadow: none;
          box-shadow: none; }

.plyr__progress input[type=range] {
  max-width: 100%;
  color: #72d89b; }

.plyr__volume input[type=range] {
  color: #72d89b; }

.plyr__tooltip {
  min-width: 3.75rem; }

.plyr__progress--buffer {
  max-width: 100%; }

.u-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0; }

.u-sticky:before,
.u-sticky:after {
  content: '';
  display: table; }

/*
Utilities

All these utility classes should start with `u-`

Styleguide AIA001.Utilities
*/
/*
[a11y] Focus Utility

Markup:
<a href="#" class="u-focus {{modifier_class}}">Focus styles directly on this element</a>
<a href="#" class="u-focus u-focus--on-container {{modifier_class}}" style="padding: 1rem;"><span class="u-focus__container">Focus styles on child element</span></a>
<a href="#" class="u-focus u-focus--keyboard-only {{modifier_class}}">Focuses only from keyboard</a>
<a href="#" class="u-focus u-focus--pointer-only {{modifier_class}}">Focuses only from pointer</a>

.u-focus--blue - Blue focus outline
.u-focus--green - Green focus outline
.u-focus--yellow - Yellow focus outline
.u-focus--red - Red focus outline
.u-focus--blue-light - Light blue focus outline
.u-focus--white - White focus outline
.u-focus--grey - Grey focus outline
.u-focus--sand - Sand focus outline
.u-focus--alert - Alert focus outline
.u-focus--thin.u-focus--blue - 1px outline
.u-focus--opaque.u-focus--blue - 50% transparent

Styleguide AIA001.Utilities.A11YFocus
*/
.u-focus:focus {
  outline: 0; }

.u-focus:not(.u-focus--on-container):not(.u-focus--disabled):not(.u-focus--no-position),
.u-focus:not(.u-focus--no-position):not(.u-focus--disabled),
.u-focus--on-container .u-focus__container {
  position: relative; }

.u-focus:not(.u-focus--disabled):not(.u-focus--on-container):not(.u-focus--keyboard-only):focus:before,
.u-focus:not(.u-focus--disabled):not(.u-focus--keyboard-only).u-focus--on-container:focus .u-focus__container:before,
html[data-focus-source="key"] .u-focus:not(.u-focus--disabled):not(.u-focus--on-container).u-focus--keyboard-only:focus:before,
html[data-focus-source="key"] .u-focus:not(.u-focus--disabled).u-focus--on-container.u-focus--keyboard-only:focus .u-focus__container:before {
  content: " ";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: -0.25rem;
  border-radius: inherit;
  border: 2px solid transparent; }

.u-focus--circular:not(.u-focus--disabled):not(.u-focus--on-container):not(.u-focus--keyboard-only):focus:before,
.u-focus--circular:not(.u-focus--disabled):not(.u-focus--keyboard-only).u-focus--on-container:focus .u-focus__container:before,
html[data-focus-source="key"] .u-focus--circular:not(.u-focus--disabled):not(.u-focus--on-container).u-focus--keyboard-only:focus:before,
html[data-focus-source="key"] .u-focus--circular:not(.u-focus--disabled).u-focus--on-container.u-focus--keyboard-only:focus .u-focus__container:before {
  border-radius: 1000px; }

.u-focus--rounded:not(.u-focus--disabled):not(.u-focus--on-container):not(.u-focus--keyboard-only):focus:before,
.u-focus--rounded:not(.u-focus--disabled):not(.u-focus--keyboard-only).u-focus--on-container:focus .u-focus__container:before,
html[data-focus-source="key"] .u-focus--rounded:not(.u-focus--disabled):not(.u-focus--on-container).u-focus--keyboard-only:focus:before,
html[data-focus-source="key"] .u-focus--rounded:not(.u-focus--disabled).u-focus--on-container.u-focus--keyboard-only:focus .u-focus__container:before {
  border-radius: 0.375rem; }

.u-focus--rounder:not(.u-focus--disabled):not(.u-focus--on-container):not(.u-focus--keyboard-only):focus:before,
.u-focus--rounder:not(.u-focus--disabled):not(.u-focus--keyboard-only).u-focus--on-container:focus .u-focus__container:before,
html[data-focus-source="key"] .u-focus--rounder:not(.u-focus--disabled):not(.u-focus--on-container).u-focus--keyboard-only:focus:before,
html[data-focus-source="key"] .u-focus--rounder:not(.u-focus--disabled).u-focus--on-container.u-focus--keyboard-only:focus .u-focus__container:before {
  border-radius: 0.5rem; }

.u-focus--opaque:not(.u-focus--disabled):not(.u-focus--on-container):not(.u-focus--keyboard-only):focus:before,
.u-focus--opaque:not(.u-focus--disabled):not(.u-focus--keyboard-only).u-focus--on-container:focus .u-focus__container:before,
html[data-focus-source="key"] .u-focus--opaque:not(.u-focus--disabled):not(.u-focus--on-container).u-focus--keyboard-only:focus:before,
html[data-focus-source="key"] .u-focus--opaque:not(.u-focus--disabled).u-focus--on-container.u-focus--keyboard-only:focus .u-focus__container:before {
  opacity: 0.5; }

.u-focus--blue-light:not(.u-focus--disabled):not(.u-focus--on-container):not(.u-focus--keyboard-only):focus:before,
.u-focus--blue-light:not(.u-focus--disabled):not(.u-focus--keyboard-only).u-focus--on-container:focus .u-focus__container:before,
html[data-focus-source="key"] .u-focus--blue-light:not(.u-focus--disabled):not(.u-focus--on-container).u-focus--keyboard-only:focus:before,
html[data-focus-source="key"] .u-focus--blue-light:not(.u-focus--disabled).u-focus--on-container.u-focus--keyboard-only:focus .u-focus__container:before {
  border-color: #6e74fc; }

.u-focus--white:not(.u-focus--disabled):not(.u-focus--on-container):not(.u-focus--keyboard-only):focus:before,
.u-focus--white:not(.u-focus--disabled):not(.u-focus--keyboard-only).u-focus--on-container:focus .u-focus__container:before,
html[data-focus-source="key"] .u-focus--white:not(.u-focus--disabled):not(.u-focus--on-container).u-focus--keyboard-only:focus:before,
html[data-focus-source="key"] .u-focus--white:not(.u-focus--disabled).u-focus--on-container.u-focus--keyboard-only:focus .u-focus__container:before {
  border-color: white; }

.u-focus--blue:not(.u-focus--disabled):not(.u-focus--on-container):not(.u-focus--keyboard-only):focus:before,
.u-focus--blue:not(.u-focus--disabled):not(.u-focus--keyboard-only).u-focus--on-container:focus .u-focus__container:before,
html[data-focus-source="key"] .u-focus--blue:not(.u-focus--disabled):not(.u-focus--on-container).u-focus--keyboard-only:focus:before,
html[data-focus-source="key"] .u-focus--blue:not(.u-focus--disabled).u-focus--on-container.u-focus--keyboard-only:focus .u-focus__container:before {
  border-color: #5e64f9; }

.u-focus--yellow:not(.u-focus--disabled):not(.u-focus--on-container):not(.u-focus--keyboard-only):focus:before,
.u-focus--yellow:not(.u-focus--disabled):not(.u-focus--keyboard-only).u-focus--on-container:focus .u-focus__container:before,
html[data-focus-source="key"] .u-focus--yellow:not(.u-focus--disabled):not(.u-focus--on-container).u-focus--keyboard-only:focus:before,
html[data-focus-source="key"] .u-focus--yellow:not(.u-focus--disabled).u-focus--on-container.u-focus--keyboard-only:focus .u-focus__container:before {
  border-color: #fea627; }

.u-focus--red:not(.u-focus--disabled):not(.u-focus--on-container):not(.u-focus--keyboard-only):focus:before,
.u-focus--red:not(.u-focus--disabled):not(.u-focus--keyboard-only).u-focus--on-container:focus .u-focus__container:before,
html[data-focus-source="key"] .u-focus--red:not(.u-focus--disabled):not(.u-focus--on-container).u-focus--keyboard-only:focus:before,
html[data-focus-source="key"] .u-focus--red:not(.u-focus--disabled).u-focus--on-container.u-focus--keyboard-only:focus .u-focus__container:before {
  border-color: #f15f5e; }

.u-focus--green:not(.u-focus--disabled):not(.u-focus--on-container):not(.u-focus--keyboard-only):focus:before,
.u-focus--green:not(.u-focus--disabled):not(.u-focus--keyboard-only).u-focus--on-container:focus .u-focus__container:before,
html[data-focus-source="key"] .u-focus--green:not(.u-focus--disabled):not(.u-focus--on-container).u-focus--keyboard-only:focus:before,
html[data-focus-source="key"] .u-focus--green:not(.u-focus--disabled).u-focus--on-container.u-focus--keyboard-only:focus .u-focus__container:before {
  border-color: #72d89b; }

.u-focus--teal:not(.u-focus--disabled):not(.u-focus--on-container):not(.u-focus--keyboard-only):focus:before,
.u-focus--teal:not(.u-focus--disabled):not(.u-focus--keyboard-only).u-focus--on-container:focus .u-focus__container:before,
html[data-focus-source="key"] .u-focus--teal:not(.u-focus--disabled):not(.u-focus--on-container).u-focus--keyboard-only:focus:before,
html[data-focus-source="key"] .u-focus--teal:not(.u-focus--disabled).u-focus--on-container.u-focus--keyboard-only:focus .u-focus__container:before {
  border-color: #10a3b2; }

.u-focus--grey:not(.u-focus--disabled):not(.u-focus--on-container):not(.u-focus--keyboard-only):focus:before,
.u-focus--grey:not(.u-focus--disabled):not(.u-focus--keyboard-only).u-focus--on-container:focus .u-focus__container:before,
html[data-focus-source="key"] .u-focus--grey:not(.u-focus--disabled):not(.u-focus--on-container).u-focus--keyboard-only:focus:before,
html[data-focus-source="key"] .u-focus--grey:not(.u-focus--disabled).u-focus--on-container.u-focus--keyboard-only:focus .u-focus__container:before {
  border-color: #aca8a4; }

.u-focus--sand:not(.u-focus--disabled):not(.u-focus--on-container):not(.u-focus--keyboard-only):focus:before,
.u-focus--sand:not(.u-focus--disabled):not(.u-focus--keyboard-only).u-focus--on-container:focus .u-focus__container:before,
html[data-focus-source="key"] .u-focus--sand:not(.u-focus--disabled):not(.u-focus--on-container).u-focus--keyboard-only:focus:before,
html[data-focus-source="key"] .u-focus--sand:not(.u-focus--disabled).u-focus--on-container.u-focus--keyboard-only:focus .u-focus__container:before {
  border-color: #f5ebcd; }

.u-focus--alert:not(.u-focus--disabled):not(.u-focus--on-container):not(.u-focus--keyboard-only):focus:before,
.u-focus--alert:not(.u-focus--disabled):not(.u-focus--keyboard-only).u-focus--on-container:focus .u-focus__container:before,
html[data-focus-source="key"] .u-focus--alert:not(.u-focus--disabled):not(.u-focus--on-container).u-focus--keyboard-only:focus:before,
html[data-focus-source="key"] .u-focus--alert:not(.u-focus--disabled).u-focus--on-container.u-focus--keyboard-only:focus .u-focus__container:before {
  border-color: #fb8d60; }

.u-focus--coldgrey:not(.u-focus--disabled):not(.u-focus--on-container):not(.u-focus--keyboard-only):focus:before,
.u-focus--coldgrey:not(.u-focus--disabled):not(.u-focus--keyboard-only).u-focus--on-container:focus .u-focus__container:before,
html[data-focus-source="key"] .u-focus--coldgrey:not(.u-focus--disabled):not(.u-focus--on-container).u-focus--keyboard-only:focus:before,
html[data-focus-source="key"] .u-focus--coldgrey:not(.u-focus--disabled).u-focus--on-container.u-focus--keyboard-only:focus .u-focus__container:before {
  border-color: #313236; }

/*
[a11y] Visually Hidden

Styleguide AIA001.Global.Javascript.A11YVisuallHidden
*/
.u-visually-hidden {
  position: absolute;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap; }

/*
CMS Background Image

Stylesheet block for cms defined background images.

Markup:
{{#if backgroundImage}}
<style type="text/css">
} {
  background-image: url({{{backgroundImage}}});
}
</style>
{{/if}}

id - unique id
backgroundImage - The background image url
extraSelector - extra css selector rule

Styleguide AIA001.Utilities.CmsBackgroundImage
*/
.u-cms-background {
  background-repeat: no-repeat; }

.u-cms-background--cover {
  background-size: cover; }

.u-cms-background--contain {
  background-size: contain; }

.u-cms-background--repeats {
  background-repeat: repeat; }

.u-cms-background--repeat-horizontal {
  background-repeat: repeat-x; }

.u-cms-background--repeat-vertical {
  background-repeat: repeat-y; }

.u-cms-background--top-left {
  background-position: top left; }

.u-cms-background--top-center {
  background-position: top center; }

.u-cms-background--top-right {
  background-position: top right; }

.u-cms-background--center-left {
  background-position: center left; }

.u-cms-background--center {
  background-position: center center; }

.u-cms-background--center-right {
  background-position: center right; }

.u-cms-background--bottom-left {
  background-position: bottom left; }

.u-cms-background--bottom-center {
  background-position: bottom center; }

.u-cms-background--bottom-right {
  background-position: bottom right; }

.u-cms-background--is-psuedo-before.u-cms-background:before {
  background-repeat: no-repeat; }

.u-cms-background--is-psuedo-before.u-cms-background--cover:before {
  background-size: cover; }

.u-cms-background--is-psuedo-before.u-cms-background--contain:before {
  background-size: contain; }

.u-cms-background--is-psuedo-before.u-cms-background--repeats:before {
  background-repeat: repeat; }

.u-cms-background--is-psuedo-before.u-cms-background--repeat-horizontal:before {
  background-repeat: repeat-x; }

.u-cms-background--is-psuedo-before.u-cms-background--repeat-vertical:before {
  background-repeat: repeat-y; }

.u-cms-background--is-psuedo-before.u-cms-background--top-left:before {
  background-position: top left; }

.u-cms-background--is-psuedo-before.u-cms-background--top-center:before {
  background-position: top center; }

.u-cms-background--is-psuedo-before.u-cms-background--top-right:before {
  background-position: top right; }

.u-cms-background--is-psuedo-before.u-cms-background--center-left:before {
  background-position: center left; }

.u-cms-background--is-psuedo-before.u-cms-background--center:before {
  background-position: center center; }

.u-cms-background--is-psuedo-before.u-cms-background--center-right:before {
  background-position: center right; }

.u-cms-background--is-psuedo-before.u-cms-background--bottom-left:before {
  background-position: bottom left; }

.u-cms-background--is-psuedo-before.u-cms-background--bottom-center:before {
  background-position: bottom center; }

.u-cms-background--is-psuedo-before.u-cms-background--bottom-right:before {
  background-position: bottom right; }

.u-cms-background--is-psuedo-after.u-cms-background:after {
  background-repeat: no-repeat; }

.u-cms-background--is-psuedo-after.u-cms-background--cover:after {
  background-size: cover; }

.u-cms-background--is-psuedo-after.u-cms-background--contain:after {
  background-size: contain; }

.u-cms-background--is-psuedo-after.u-cms-background--repeats:after {
  background-repeat: repeat; }

.u-cms-background--is-psuedo-after.u-cms-background--repeat-horizontal:after {
  background-repeat: repeat-x; }

.u-cms-background--is-psuedo-after.u-cms-background--repeat-vertical:after {
  background-repeat: repeat-y; }

.u-cms-background--is-psuedo-after.u-cms-background--top-left:after {
  background-position: top left; }

.u-cms-background--is-psuedo-after.u-cms-background--top-center:after {
  background-position: top center; }

.u-cms-background--is-psuedo-after.u-cms-background--top-right:after {
  background-position: top right; }

.u-cms-background--is-psuedo-after.u-cms-background--center-left:after {
  background-position: center left; }

.u-cms-background--is-psuedo-after.u-cms-background--center:after {
  background-position: center center; }

.u-cms-background--is-psuedo-after.u-cms-background--center-right:after {
  background-position: center right; }

.u-cms-background--is-psuedo-after.u-cms-background--bottom-left:after {
  background-position: bottom left; }

.u-cms-background--is-psuedo-after.u-cms-background--bottom-center:after {
  background-position: bottom center; }

.u-cms-background--is-psuedo-after.u-cms-background--bottom-right:after {
  background-position: bottom right; }

/*
Flex Alignment

Markup:
<div class="u-align u-align--wrap {{modifier_class}}" style="width: 20rem; height: 20rem; margin: 0 auto;">
  {{> Core.Styleguide.Box colour="skyblue" width="5rem" height="5rem" grow="0"}}
  {{> Core.Styleguide.Box colour="red" width="5rem" height="5rem" grow="0"}}
  {{> Core.Styleguide.Box colour="skyblue" width="5rem" height="5rem" grow="0"}}
  {{> Core.Styleguide.Box colour="red" width="5rem" height="5rem" grow="0"}}
  {{> Core.Styleguide.Box colour="skyblue" width="5rem" height="5rem" grow="0"}}
  {{> Core.Styleguide.Box colour="red" width="5rem" height="5rem" grow="0"}}
  {{> Core.Styleguide.Box colour="skyblue" width="5rem" height="5rem" grow="0"}}
  {{> Core.Styleguide.Box colour="red" width="5rem" height="5rem" grow="0"}}
  {{> Core.Styleguide.Box colour="skyblue" width="5rem" height="5rem" grow="0"}}
  {{> Core.Styleguide.Box colour="red" width="5rem" height="5rem" grow="0"}}
</div>

.u-align--horizontal - horizontal
.u-align--horizontal.u-align--vertical-center - horizontal, vertical center
.u-align--horizontal.u-align--horizontal-center.u-align--vertical-center - horizontal, horizontal center, vertical center
.u-align--horizontal.u-align--horizontal-left - horizontal, horizontal left
.u-align--horizontal.u-align--horizontal-right - horizontal, horizontal right
.u-align--horizontal.u-align--horizontal-space-between - horizontal, horizontal space between
.u-align--horizontal.u-align--vertical-space-between - horizontal, vertical space between
.u-align--vertical - vertical

Styleguide AIA001.Utilities.FlexAlignment
*/
.u-align {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

.u-align--wrap {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }

.u-align--wrap-reverse {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }

.u-align--horizontal {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row; }
  .u-align--horizontal .u-align--vertical-center, .u-align--horizontal.u-align--vertical-center {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; }
  .u-align--horizontal .u-align--horizontal-center, .u-align--horizontal.u-align--horizontal-center {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center; }
  .u-align--horizontal .u-align--horizontal-left, .u-align--horizontal.u-align--horizontal-left {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start; }
  .u-align--horizontal .u-align--horizontal-right, .u-align--horizontal.u-align--horizontal-right {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end; }
  .u-align--horizontal .u-align--horizontal-space-between, .u-align--horizontal.u-align--horizontal-space-between {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between; }
  .u-align--horizontal .u-align--vertical-space-between, .u-align--horizontal.u-align--vertical-space-between {
    -webkit-box-align: space-between;
        -ms-flex-align: space-between;
            align-items: space-between; }

.u-align--vertical {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; }
  .u-align--vertical .u-align--vertical-center, .u-align--vertical.u-align--vertical-center {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center; }
  .u-align--vertical .u-align--horizontal-center, .u-align--vertical.u-align--horizontal-center {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; }
  .u-align--vertical .u-align--horizontal-space-between, .u-align--vertical.u-align--horizontal-space-between {
    -webkit-box-align: space-between;
        -ms-flex-align: space-between;
            align-items: space-between; }
  .u-align--vertical .u-align--vertical-space-between, .u-align--vertical.u-align--vertical-space-between {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between; }

/*
CSS Columns

Markup:
<main class="u-columns {{modifier_class}}">
  {{#each (fill 43 'Link item')}}
    <section>
    <h4>{{ this }}</h4>
    {{{ markdown (default content (filecontent "client/src/site__aia001/components/generic-page/sentence.md")) }}}
    </section>
  {{/each}}
</main>

.u-columns--2 - Two columns
.u-columns--3 - Three columns
.u-columns--4 - Four columns
.u-columns--5 - Five columns
.u-columns--6 - Six columns
.u-columns--2@largeup - Two columns only @largeup
.u-columns--3@largeup - Three columns only @largeup
.u-columns--4@largeup - Four columns only @largeup
.u-columns--5@largeup - Five columns only @largeup
.u-columns--6@largeup - Six columns only @largeup

Styleguide AIA001.Utilities.Columns
*/
.u-columns {
  -webkit-column-gap: 2rem;
          column-gap: 2rem; }
  .u-columns > * {
    -webkit-column-break-inside: avoid;
            break-inside: avoid; }

.u-columns.u-columns--2 {
  -webkit-column-count: 2;
          column-count: 2; }

.u-columns.u-columns--3 {
  -webkit-column-count: 3;
          column-count: 3; }

.u-columns.u-columns--4 {
  -webkit-column-count: 4;
          column-count: 4; }

.u-columns.u-columns--5 {
  -webkit-column-count: 5;
          column-count: 5; }

.u-columns.u-columns--6 {
  -webkit-column-count: 6;
          column-count: 6; }

.canvas {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }

.canvas__container {
  max-width: page-width;
  margin: 0 0.9375rem; }

@media (min-width: 48.0625em) {
  .u-columns.u-columns--2\@largeup {
    -webkit-column-count: 2;
            column-count: 2; }
  .u-columns.u-columns--3\@largeup {
    -webkit-column-count: 3;
            column-count: 3; }
  .u-columns.u-columns--4\@largeup {
    -webkit-column-count: 4;
            column-count: 4; }
  .u-columns.u-columns--5\@largeup {
    -webkit-column-count: 5;
            column-count: 5; }
  .u-columns.u-columns--6\@largeup {
    -webkit-column-count: 6;
            column-count: 6; } }

@media (min-width: 64.0625em) {
  .u-columns.u-columns--2\@xlargeup {
    -webkit-column-count: 2;
            column-count: 2; }
  .u-columns.u-columns--3\@xlargeup {
    -webkit-column-count: 3;
            column-count: 3; }
  .u-columns.u-columns--4\@xlargeup {
    -webkit-column-count: 4;
            column-count: 4; }
  .u-columns.u-columns--5\@xlargeup {
    -webkit-column-count: 5;
            column-count: 5; }
  .u-columns.u-columns--6\@xlargeup {
    -webkit-column-count: 6;
            column-count: 6; } }

/*
Components

Styleguide AIA001.Components
*/
.wysiwyg-area h1 {
  font-size: 1.75rem; }

.wysiwyg-area h2 {
  font-size: 1.5rem; }

.wysiwyg-area h3 {
  font-size: 1.375rem; }

.wysiwyg-area h4 {
  font-size: 1.25rem; }

.wysiwyg-area h5 {
  font-size: 1.125rem; }

.wysiwyg-area h6 {
  font-size: 1rem; }

.wysiwyg-area h1, .wysiwyg-area h2, .wysiwyg-area h3, .wysiwyg-area h4, .wysiwyg-area h5, .wysiwyg-area h6 {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-style: normal;
  margin-top: 1.5em;
  margin-bottom: 0.5em; }
  .wysiwyg-area h1 + p, .wysiwyg-area h2 + p, .wysiwyg-area h3 + p, .wysiwyg-area h4 + p, .wysiwyg-area h5 + p, .wysiwyg-area h6 + p {
    margin-top: 0; }

/*
Wysiwyg: Oblique

Markup:
<div class="wysiwyg-area">
  <i>Italic</i>
</div>
<div class="wysiwyg-area">
  <i><b>Italic Bold</b></i>
</div>
<div class="wysiwyg-area">
  <b><i>Bold Italic</i></b>
</div>
<div class="wysiwyg-area">
  <i><strong>Italic Strong</strong></i>
</div>
<div class="wysiwyg-area">
  <strong><i>Strong Italic</i></strong>
</div>
<div class="wysiwyg-area">
  <oblique>oblique</oblique>
</div>

Styleguide AIA001.Wysiwyg.Rules
*/
.wysiwyg-area i, .wysiwyg-area oblique {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-style: italic; }

.wysiwyg-area i b,
.wysiwyg-area b i,
.wysiwyg-area i strong,
.wysiwyg-area strong i {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-style: italic; }

.wysiwyg-area abbr {
  text-decoration: none;
  border-bottom: 6px solid #c7efd7; }
  .wysiwyg-area abbr:hover {
    cursor: pointer; }

.wysiwyg-area ul, .wysiwyg-area ol {
  padding-left: 1.21875rem; }
  .wysiwyg-area ul li, .wysiwyg-area ol li {
    padding-left: 0; }

.wysiwyg-area a:not(.button, .c-button),
.wysiwyg-area a:link:not(.button, .c-button),
.wysiwyg-area a:active:not(.button, .c-button),
.wysiwyg-area a:visited:not(.button, .c-button) {
  color: #5e64f9; }

/*
Wysiwyg: Image

Markup:
<div class="wysiwyg-area">
<img title="{{ lipsum 64 }}"
     alt="an image from unsplash"
     src="https://source.unsplash.com/random/320x480/?sig={{default id (cuid)}}"/>
</div>

Styleguide AIA001.WysiWyg.Images
*/
.wysiwyg-area img[width][height] {
  max-width: 100%;
  height: auto; }

.wysiwyg-area img.align-left {
  display: block;
  margin: 10px 0 10px 0; }

.wysiwyg-area img.align-right {
  display: block;
  margin: 10px 0 10px 0; }

.wysiwyg-area pre,
.wysiwyg-area pre[class*="language-"] {
  border: 1px solid #e9e7e4;
  background-color: #F9F9F9;
  margin: 1rem 0;
  padding: 1rem; }

/*
Wysiwyg: Horizontal Rules

Markup:
<div class="wysiwyg-area">
  <hr class="{{default classes modifier_class}}">
</div>

Styleguide AIA001.Wysiwyg.Rules
*/
.wysiwyg-area hr {
  border-top: 2px solid #d7d3cd; }

/*
Wysiwyg: Quotes

Markup:
<div class="wysiwyg-area">
  <hr class="callout {{default classes modifier_class}}"/>
</div>

Styleguide AIA001.Wysiwyg.Rules
*/
.wysiwyg-area .callout {
  max-width: 43.5rem;
  width: 100%;
  margin: 2.8125rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center; }

/*
Wysiwyg: Tables

Markup:
<div class="wysiwyg-area">
  <table class="{{default classes modifier_class}}">
    <thead>
      <tr>
        <td>Building Delivery Method</td>
        <td>Brief and Research</td>
        <td>Schematic</td>
        <td>Estimate and Cost Plan</td>
        <td>Design Development</td>
        <td>Documentation</td>
        <td>Job Management</td>
        <td>Inspection of Work</td>
        <td>Certification of Payment</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Traditional</td>
        <td>Client, Architect</td>
        <td>Architect, Subconsultants</td>
        <td>Architect, Consultant, Quantity Surveyor</td>
        <td>Architect, Subconsultants</td>
        <td>Architect, Subconsultants, Quantity Surveyor</td>
        <td>Contractor</td>
        <td>Contractor, Architect, Subconsultants</td>
        <td>Architect, Quantity Surveyor</td>
      </tr>
      <tr>
        <td>Two-stage tendering</td>
        <td>Client, Architect</td>
        <td>Architect, Subconsultants</td>
        <td>Architect, Consultant, Quantity Surveyor</td>
        <td>Architect, Subconsultants, Builder, Subcontractors, Quantity Surveyor</td>
        <td>Architect, Subconsultants, Quantity Surveyor</td>
        <td>Contractor</td>
        <td>Builder, Architect, Subconsultants</td>
        <td>Architect, Quantity Surveyor</td>
      </tr>
      <tr>
        <td>Construction Management</td>
        <td>Client, Architect</td>
        <td>Architect, Subconsultants</td>
        <td>Architect, Consultant, Quantity Surveyor</td>
        <td>Architect, Subconsultants, Construction Manager, Contractor, Quantity Surveyor</td>
        <td>Architect, Subconsultants, Subcontractors (shop drawings)</td>
        <td>Construction Manager</td>
        <td>Construction Manager, Architect, Subconsultants</td>
        <td>Construction Manager, Quantity Surveyor</td>
      </tr>
      <tr>
        <td>Design &amp; Construct</td>
        <td>D&amp;C Manager (Client)</td>
        <td>D&amp;C Manager (Architect Sub-consultants)</td>
        <td>D&amp;C Manager</td>
        <td>D&amp;C Manager (Architect Subconsultants)</td>
        <td>D&amp;C Manager (Architect Subconsultants)</td>
        <td>D&amp;C Manager</td>
        <td>D&amp;C Manager</td>
        <td>D&amp;C Manager</td>
      </tr>
    </tbody>
  </table>
</div>

.table--responsive - Table that converts columns to rows
.table--scrolled - Table that scrolls
.table--pivot - Pivoted Table whose header row becomes a fixed header column.

Styleguide: AIA001.WysiWyg.Tables
*/
.wysiwyg-area table {
  display: table;
  table-layout: fixed;
  width: 100%;
  border: none;
  border-spacing: 0;
  margin-top: 1.875rem;
  margin-bottom: 1.875rem;
  font-family: "Adelle", Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 0.875rem;
  line-height: 1.375rem; }

.wysiwyg-area table thead,
.wysiwyg-area table thead tr {
  border-bottom: 0; }

.wysiwyg-area table tr td {
  white-space: pre-wrap;
  word-break: normal;
  border-left: 0;
  border-right: 0;
  border-bottom: 0; }

.wysiwyg-area table tr {
  -webkit-column-break-inside: avoid;
          break-inside: avoid; }
  .wysiwyg-area table tr td {
    border-top: 2px solid #d7d3cd;
    vertical-align: top;
    padding: 14px; }
  .wysiwyg-area table tr:first-child td:first-child {
    margin-top: 0; }

.wysiwyg-area table td[align=right],
.wysiwyg-area table th[align=right],
.wysiwyg-area table thead td[align=right] {
  text-align: right; }

.wysiwyg-area table td[align=left],
.wysiwyg-area table th[align=left],
.wysiwyg-area table thead td[align=left] {
  text-align: left; }

.wysiwyg-area table td[align=center],
.wysiwyg-area table th[align=center],
.wysiwyg-area table thead td[align=center] {
  text-align: center; }

.wysiwyg-area table td[align=justify],
.wysiwyg-area table th[align=justify],
.wysiwyg-area table thead td[align=justify] {
  text-align: justify; }

.wysiwyg-area table td[align=char],
.wysiwyg-area table th[align=char],
.wysiwyg-area table thead td[align=char] {
  text-align: char; }

.wysiwyg-area table:not(.table--responsive) tr td {
  text-align: left;
  vertical-align: top;
  text-align: left;
  line-height: 1.125rem;
  padding: 0.875rem; }

.wysiwyg-area table thead td {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-style: normal;
  font-size: 0.875rem;
  text-align: left;
  border-bottom: 0;
  background-color: #d7d3cd; }

.wysiwyg-area table:not(.table--pivot) thead td {
  line-height: 1.125rem;
  padding: 0.875rem; }

.wysiwyg-area .table--responsive tr td {
  border-top: 2px solid #d7d3cd; }

.wysiwyg-area .table--responsive tr td[data-row-header] {
  padding: 0; }

.wysiwyg-area .table--scrolled {
  display: block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  max-width: 100%;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch; }

/*
Wysiwyg: Captioned Images

Markup:
<div class="wysiwyg-area">
  <img title="{{ lipsum 8 }}"
      class="figure {{modifier_class}}"
      alt="an image from unsplash"
      src="https://source.unsplash.com/random/240x480/?sig={{default id (cuid)}}"/>
  <img title="{{ lipsum 8 }}"
      class="figure {{modifier_class}}"
      alt="an image from unsplash"
      src="https://source.unsplash.com/random/320x480/?sig={{default id (cuid)}}"/>
  <img title="{{ lipsum 8 }}"
      class="figure {{modifier_class}}"
      alt="an image from unsplash"
      src="https://source.unsplash.com/random/640x480/?sig={{default id (cuid)}}"/>
  <img title="{{ lipsum 8 }}"
      class="figure {{modifier_class}}"
      alt="an image from unsplash"
      src="https://source.unsplash.com/random/1920x1080/?sig={{default id (cuid)}}"/>
</div>

.figure--left - Left aligned
.figure--center - Center aligned
.figure--right - Right aligned

Styleguide AIA001.WysiWyg.CaptionedImages
*/
.wysiwyg-area img.figure {
  max-width: 100%; }

.wysiwyg-area figure {
  margin: 0;
  margin-bottom: 1.875rem; }

.wysiwyg-area figure {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start; }

.wysiwyg-area figure figcaption,
.wysiwyg-area figure .fig__caption {
  padding: 0.75rem 1.25rem;
  display: inline-block;
  background-color: #F9F9F9;
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.125rem; }

@media (min-width: 26.625em) {
  .wysiwyg-area h1 {
    font-size: 2.625rem; }
  .wysiwyg-area h2 {
    font-size: 2.25rem; }
  .wysiwyg-area h3 {
    font-size: 1.5rem; }
  .wysiwyg-area h4 {
    font-size: 1.375rem; }
  .wysiwyg-area h5 {
    font-size: 1.25rem; }
  .wysiwyg-area h6 {
    font-size: 1.125rem; }
  .wysiwyg-area table tr td {
    padding: 0.875rem; } }

@media screen and (min-width: 26.625em) {
  .wysiwyg-area .table--pivot {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    background: none;
    white-space: nowrap; }
  .wysiwyg-area .table--pivot thead {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    min-width: -webkit-min-content;
    min-width: -moz-min-content;
    min-width: min-content; }
  .wysiwyg-area .table--pivot tbody {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch; }
  .wysiwyg-area .table--pivot tr {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    min-width: -webkit-min-content;
    min-width: -moz-min-content;
    min-width: min-content;
    -ms-flex-negative: 0;
        flex-shrink: 0; }
  .wysiwyg-area .table--pivot td,
  .wysiwyg-area .table--pivot thead td {
    display: block; }
  .wysiwyg-area .table--pivot td {
    background-image: none !important;
    border-left: 0; }
  .wysiwyg-area .table--pivot thead td:not(:last-child),
  .wysiwyg-area .table--pivot td:not(:last-child) {
    border-bottom: 0; }
  .wysiwyg-area .table--responsive tr td[data-row-header] {
    padding: 14px; } }

@media (min-width: 48.0625em) {
  .wysiwyg-area img.align-left {
    display: block;
    float: left;
    margin: 5px 30px 20px 0; }
  .wysiwyg-area img.align-right {
    display: block;
    float: right;
    margin: 5px 0 20px 30px; }
  .wysiwyg-area figure.figure--left {
    float: left;
    margin: 5px 30px 20px 0; }
  .wysiwyg-area figure.figure--right {
    float: right;
    margin: 5px 0 20px 30px; }
  .wysiwyg-area img.figure--left {
    float: left;
    margin: 5px 30px 20px 0; }
  .wysiwyg-area img.figure--right {
    float: right;
    margin: 5px 0 20px 30px; }
  .wysiwyg-area figure img.figure--left {
    float: none;
    margin: 0; }
  .wysiwyg-area figure img.figure--right {
    float: none;
    margin: 0; } }

@media (min-width: 64.0625em) {
  .wysiwyg-area table {
    font-size: 1.125rem;
    line-height: 2rem; }
  .wysiwyg-area table:not(.table--responsive) tr td {
    font-size: 1.125rem;
    line-height: 2rem; }
  .wysiwyg-area table thead td {
    font-size: 1.125rem; }
  .wysiwyg-area table:not(.table--pivot) thead td {
    font-size: 1.125rem;
    line-height: 2rem; } }

/*
Forms

Weight: 20

Styleguide AIA001.Components.Forms
*/
.form {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 1rem;
  max-width: auto; }

.form__description {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 0.875rem; }

.form__description p:first-child {
  margin-top: 0; }

.form--contained {
  margin: 0;
  background-color: #F9F9F9;
  border: 1px solid #e0ddd8;
  padding: 1.25rem; }

.form--contained .field-layout__label {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 0.875rem;
  text-transform: uppercase;
  padding-bottom: 0; }

.form--contained .field-layout__element input:not([type]),
.form--contained .field-layout__element input[type="email"],
.form--contained .field-layout__element input[type="text"],
.form--contained .field-layout__element input[type="number"],
.form--contained .field-layout__element input[type="url"],
.form--contained .field-layout__element input[type="password"],
.form--contained .field-layout__element input[type="date"],
.form--contained .field-layout__element textarea {
  width: 100%;
  border-radius: 4px;
  border: 1px solid #e0ddd8; }

.form--contained .has-error .field-layout__element input:not([type]),
.form--contained .has-error .field-layout__element input[type="email"],
.form--contained .has-error .field-layout__element input[type="text"],
.form--contained .has-error .field-layout__element input[type="number"],
.form--contained .has-error .field-layout__element input[type="url"],
.form--contained .has-error .field-layout__element input[type="password"],
.form--contained .has-error .field-layout__element input[type="date"],
.form--contained .has-error .field-layout__element textarea {
  border-color: #fb8d60;
  background-color: #fff8f5; }

.form--contained .field-layout {
  padding: 0; }

.form__footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  margin-top: 2.5rem; }

.form__disclaimer {
  font-family: "Adelle", Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 0.75rem; }

/*
Form Validation Panel

Markup:
<form action="/subscribe/login/" class="form form--contained EPiServerForms" method="post">
  <div class="form__validation-panel form__validation-panel--error">
    {{> AIA001.Components.SvgSprite
        sprite="alert-500"
        classes="form__validation-panel-icon" }}
    <span class="form__validation-panel-message">The provided username or password is incorrect</span>
  </div>
</form>

Styleguide AIA001.Components.Forms.Validation
*/
.form__validation-panel {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 0.875rem;
  line-height: 1.125rem;
  border-radius: 0.625rem;
  border: 2px solid currentColor;
  color: black;
  width: 100%;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  padding: 1.125rem; }

.form__validation-panel-icon {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  width: 2rem;
  height: 2rem;
  color: inherit; }

.form__validation-panel-message {
  margin-left: 0.5rem; }

.form__validation-panel--error {
  border-color: #f15f5e; }

.form__validation-panel--error .form__validation-panel-icon {
  color: #f15f5e; }

.field-label__required {
  color: #f15f5e; }

.field-validation-error {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 0.9375rem;
  padding-left: 0;
  color: #fb8d60; }

.field-label em {
  text-transform: none;
  color: #7c7871; }

.field-layout {
  background-color: transparent;
  border-top: 0; }

.field-layout--horizontal {
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0; }

.field-input__description {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 0.875rem;
  line-height: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end; }
  .field-input__description a {
    text-decoration: none; }

/*
Button

Markup:
{{> Core.Components.Forms.Button
    modifier_class=(concat
      'button '
      (default modifier_class '')
    )
    type=(default type 'submit')
    attrs=(default attrs '')
    text=(default text "Button text")
  }}

.button--primary - Primary Button
.button--secondary - Secondary Button
.c-button--centered - Centered Button

Weight: 10

Styleguide AIA001.Components.Forms.Button
*/
.c-button,
.button {
  cursor: pointer;
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-style: normal;
  font-size: 1rem;
  text-decoration: none;
  text-align: center;
  background-color: transparent;
  color: #005036;
  border: 2px solid #72d89b;
  border-radius: 0.5rem;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  position: relative;
  min-height: 3.375rem;
  padding: 0.3125rem 1.25rem;
  width: auto; }
  .c-button:focus,
  .button:focus {
    outline: 0; }
  .c-button:not(.button--icon):hover,
  .button:not(.button--icon):hover {
    border-color: #85e6ac;
    background-color: #85e6ac; }
  .c-button:not(.button--icon):active,
  .button:not(.button--icon):active {
    border-color: #005036;
    background-color: #005036;
    color: white; }
  .c-button[disabled],
  .button[disabled] {
    cursor: not-allowed;
    background: #7c7871;
    color: #252422; }

.button--square {
  border-radius: 0; }

.button--primary {
  background: #72d89b;
  border-color: #72d89b;
  color: #005036; }
  .button--primary:hover {
    border-color: #85e6ac;
    background-color: #85e6ac; }

.button--secondary {
  background: transparent; }
  .button--secondary:hover {
    border-color: #85e6ac; }

.button--dark {
  border-color: #373533;
  color: #373533; }

.button--light {
  border-color: #d7d3cd;
  color: #d7d3cd; }

.button--icon {
  border-color: transparent; }

.button__icon {
  width: 1.75rem;
  height: 1.75rem;
  margin-right: 0.5625rem;
  margin-left: auto; }

.button__label {
  font-size: 1rem;
  margin-right: auto; }

.button__container {
  line-height: 1; }

.button--primary.button--theme-blue {
  background-color: #5e64f9;
  color: black; }
  .button--primary.button--theme-blue .button__icon {
    color: #6e74fc; }

.button--secondary.button--theme-blue {
  background-color: transparent;
  border-color: #5e64f9; }

.button--theme-blue.button--white-fg {
  color: white; }

.button--theme-blue.button--dark-fg {
  color: #292d84; }

.button--theme-blue.button--light-fg {
  color: #6e74fc; }

.button--primary.button--theme-yellow {
  background-color: #fea627;
  color: black; }
  .button--primary.button--theme-yellow .button__icon {
    color: #ffb446; }

.button--secondary.button--theme-yellow {
  background-color: transparent;
  border-color: #fea627; }

.button--theme-yellow.button--white-fg {
  color: white; }

.button--theme-yellow.button--dark-fg {
  color: #b56000; }

.button--theme-yellow.button--light-fg {
  color: #ffb446; }

.button--primary.button--theme-red {
  background-color: #f15f5e;
  color: black; }
  .button--primary.button--theme-red .button__icon {
    color: #f4706f; }

.button--secondary.button--theme-red {
  background-color: transparent;
  border-color: #f15f5e; }

.button--theme-red.button--white-fg {
  color: white; }

.button--theme-red.button--dark-fg {
  color: #ae3434; }

.button--theme-red.button--light-fg {
  color: #f4706f; }

.button--primary.button--theme-green {
  background-color: #72d89b;
  color: white; }
  .button--primary.button--theme-green .button__icon {
    color: #85e6ac; }

.button--secondary.button--theme-green {
  background-color: transparent;
  border-color: #72d89b; }

.button--theme-green.button--white-fg {
  color: white; }

.button--theme-green.button--dark-fg {
  color: #005036; }

.button--theme-green.button--light-fg {
  color: #85e6ac; }

.button--primary.button--theme-teal {
  background-color: #10a3b2;
  color: black; }
  .button--primary.button--theme-teal .button__icon {
    color: #71ebe5; }

.button--secondary.button--theme-teal {
  background-color: transparent;
  border-color: #10a3b2; }

.button--theme-teal.button--white-fg {
  color: white; }

.button--theme-teal.button--dark-fg {
  color: #006f7a; }

.button--theme-teal.button--light-fg {
  color: #71ebe5; }

.button--primary.button--theme-grey {
  background-color: #aca8a4;
  color: white; }
  .button--primary.button--theme-grey .button__icon {
    color: grey; }

.button--secondary.button--theme-grey {
  background-color: transparent;
  border-color: #aca8a4; }

.button--theme-grey.button--white-fg {
  color: white; }

.button--theme-grey.button--dark-fg {
  color: #4a4845; }

.button--theme-grey.button--light-fg {
  color: grey; }

.button--primary.button--theme-sand {
  background-color: #f5ebcd;
  color: white; }
  .button--primary.button--theme-sand .button__icon {
    color: #fff8e6; }

.button--secondary.button--theme-sand {
  background-color: transparent;
  border-color: #f5ebcd; }

.button--theme-sand.button--white-fg {
  color: white; }

.button--theme-sand.button--dark-fg {
  color: #ad944b; }

.button--theme-sand.button--light-fg {
  color: #fff8e6; }

.button--primary.button--theme-alert {
  background-color: #fb8d60;
  color: black; }
  .button--primary.button--theme-alert .button__icon {
    color: #fff8f5; }

.button--secondary.button--theme-alert {
  background-color: transparent;
  border-color: #fb8d60; }

.button--theme-alert.button--white-fg {
  color: white; }

.button--theme-alert.button--dark-fg {
  color: #b94d20; }

.button--theme-alert.button--light-fg {
  color: #fff8f5; }

.button--primary.button--theme-coldgrey {
  background-color: #313236;
  color: white; }
  .button--primary.button--theme-coldgrey .button__icon {
    color: #3a3c41; }

.button--secondary.button--theme-coldgrey {
  background-color: transparent;
  border-color: #313236; }

.button--theme-coldgrey.button--white-fg {
  color: white; }

.button--theme-coldgrey.button--dark-fg {
  color: #1d1d1f; }

.button--theme-coldgrey.button--light-fg {
  color: #3a3c41; }

/*
Option

Markup:
<div class="field-input-option {{ classes }}">
  {{#if (eq modifier_class 'radio')}}{{> AIA001.Components.Forms.RadioOption text="Radio" id=(cuid) }}{{/if}}
  {{#if (eq modifier_class 'checkbox')}}{{> AIA001.Components.Forms.CheckboxOption text="Checkbox" id=(cuid) }}{{/if}}
</div>

radio - Single choice
checkbox - Multiple choice

Weight: 10

Styleguide AIA001.Components.Forms.Option
*/
.field-input-option {
  line-height: initial;
  cursor: pointer; }

.field-input-option__label {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 1rem;
  padding: 0.5rem 0;
  padding-left: 1.75rem; }

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

/*
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"
         id="{{ default id 'radio' }}"
         type="radio"
         name="{{ default name 'radio' }}"
         {{#if value }}value="{{value}}"{{/if}}
         {{{inputAttrs}}}/>
  <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 field-input-option__text">{{ default label 'Label text' }}</span>
  </label>
</div>

Weight: 20

Styleguide AIA001.Components.Forms.RadioOption
*/
.field-input-option__faux-box--radio {
  fill: white;
  stroke: #d7d3cd;
  stroke-width: 2px; }

.field-input-option__input:checked ~ .field-input-option__label .field-input-option__faux-box--radio {
  fill: #72d89b;
  stroke: transparent; }

.field-input-option__input:checked ~ .field-input-option__label .field-input-option__faux-indicator--radio {
  stroke: #005036; }

/*
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"
         id="{{ default id 'checkbox' }}"
         type="checkbox"
         name="{{ default name 'checkbox' }}"
         {{{inputAttrs}}}/>
  <label class="c-field-input-option__label field-input-option__label"
         for="{{ default id 'checkbox' }}">
    <svg class="c-field-input-option__faux c-field-input-option__faux--checkbox field-input-option__faux 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"></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="M14.9,4.7L7,12.6l-3.1-3" stroke-linecap="round"
              stroke-width="2" stroke="currentColor" stroke-linejoin="round"/>
    </svg>
    <span class="c-field-input-option__text field-input-option__text">{{ default label 'Label text' }}</span>
  </label>
</div>


Weight: 30

Styleguide AIA001.Components.Forms.CheckboxOption
*/
.field-input-option__faux-box--checkbox {
  fill: white;
  stroke: #d7d3cd;
  stroke-width: 2px; }

.c-field-input-option__input:checked ~ .field-input-option__label .field-input-option__faux-box--checkbox {
  fill: #72d89b;
  stroke: transparent; }

.c-field-input-option__input:checked ~ .field-input-option__label .field-input-option__faux-indicator--checkbox {
  stroke: #005036; }

/*
Select

Markup:
{{> Core.Components.Forms.Select
  modifier_class=(concat
    'field-select' ' '
    (default modifier_class '')
    )
}}

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

Markup:
{{> Core.Components.Forms.SelectMultiple
  modifier_class=(concat
    'field-select' ' '
    (default modifier_class '')
  )
}}

Styleguide AIA001.Components.Forms.SelectMultiple
*/
.field-select {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 1rem;
  padding: 0.875rem;
  border-radius: 0.25rem;
  height: 3.375rem; }
  .field-select:focus {
    outline: none;
    -webkit-box-shadow: 0 0 0 2px white, 0 0 0 4px #5e64f9;
            box-shadow: 0 0 0 2px white, 0 0 0 4px #5e64f9; }

select {
  background-image: url(/static/theme/images/sprites--0f5d50d1.svg#arrow-down-500--green-usage);
  background-image: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiB2aWV3Qm94PSIwIDAgNTAwIDUwMCI+PHBhdGggZD0iTTI1MCwzNjguMDZhMzkuMzYsMzkuMzYsMCwwLDEtMjcuODktMTEuNTJsLTE0NS0xNDVhMzkuNjMsMzkuNjMsMCwwLDEsNTYtNTZMMjUwLDI3Mi40MywzNjcsMTU1LjQ3YTM5LjYzLDM5LjYzLDAsMCwxLDU2LDU2bC0xNDUsMTQ1YTM5LjQsMzkuNCwwLDAsMS0yNy44NiwxMS41N1oiIGZpbGw9IiM3MmQ4OWIiLz48L3N2Zz4=");
  background-position: right 1rem top 50%; }

@media (min-width: 48.0625em) {
  .form--contained {
    padding: 2.5rem; } }

/*
Breadcrumb

Markup:
<div class="c-breadcrumb breadcrumb">
  <div class="c-breadcrumb__container breadcrumb__container">
    <ul class="c-breadcrumb__items breadcrumb__items"
        itemscope
        itemtype="http://schema.org/BreadcrumbList">
      <li class="c-breadcrumb__item-container breadcrumb__item-container"
          itemprop="itemListElement"
          itemscope
          itemtype="http://schema.org/ListItem">
        <a class="c-breadcrumb__link breadcrumb__link"
          href="#">
          <span class="c-breadcrumb__item breadcrumb__item">
            <span class="c-breadcrumb__text breadcrumb__text">breadcrumb 1</span>
            {{> AIA001.Components.SvgSprite
                modifier_class="link-arrow-minor-500"
                classes="c-breadcrumb__icon breadcrumb__icon"}}
          </span>
        </a>
        <meta itemprop="position" content="1" />
      </li>
      <li class="c-breadcrumb__item-container breadcrumb__item-container"
          itemprop="itemListElement"
          itemscope
          itemtype="http://schema.org/ListItem">
        <a class="c-breadcrumb__link breadcrumb__link"
          href="#">
          <span class="c-breadcrumb__item breadcrumb__item">
            <span class="c-breadcrumb__text breadcrumb__text">breadcrumb 2</span>
            {{> AIA001.Components.SvgSprite
                modifier_class="link-arrow-minor-500"
                classes="c-breadcrumb__icon breadcrumb__icon"}}
          </span>
        </a>
        <meta itemprop="position" content="2" />
      </li>
      <li class="c-breadcrumb__item-container breadcrumb__item-container"
          itemprop="itemListElement"
          itemscope
          itemtype="http://schema.org/ListItem">
        <span class="c-breadcrumb__item breadcrumb__item">
          <span class="c-breadcrumb__text breadcrumb__text">breadcrumb 3</span>
          {{> AIA001.Components.SvgSprite
              modifier_class="link-arrow-minor-500"
              classes="c-breadcrumb__icon breadcrumb__icon"}}
          <button class="c-breadcrumb__toggle-button breadcrumb__toggle-button"
            data-toggle-element-classes
            data-toggle-element-classes--target="(parent) .c-breadcrumb"
            data-toggle-element-classes--to="breadcrumb--is-open">
          {{> AIA001.Components.SvgSprite
              modifier_class="plus-500"
              classes="c-breadcrumb__toggle-button-icon breadcrumb__toggle-button-icon breadcrumb__toggle-button-icon--closed"}}
          {{> AIA001.Components.SvgSprite
              modifier_class="minus-500"
              classes="c-breadcrumb__toggle-button-icon breadcrumb__toggle-button-icon breadcrumb__toggle-button-icon--opened"}}
          </button>
        </span>
        <meta itemprop="position" content="3" />
      </li>
    </ul>
  </div>
</div>

Weight: 0

Styleguide AIA001.Components.Breadcrumb
*/
.breadcrumb {
  background-color: #F9F9F9;
  min-height: 2.75rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  z-index: 100; }

.breadcrumb__container {
  position: absolute;
  left: 0;
  right: 0;
  max-width: 72.5rem;
  margin: 0;
  width: 100%; }

.breadcrumb--is-open .breadcrumb__container {
  -webkit-box-shadow: 0 5px 5px 0px rgba(0, 0, 0, 0.1);
          box-shadow: 0 5px 5px 0px rgba(0, 0, 0, 0.1); }

.breadcrumb__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0; }

.breadcrumb__item-container {
  display: none;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
  background-color: #F9F9F9;
  color: #7c7871; }

.breadcrumb__item-container:last-child {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

.breadcrumb--is-open .breadcrumb__item-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

.breadcrumb__link {
  text-decoration: none;
  color: #5e64f9;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1; }
  .breadcrumb__link:hover {
    text-decoration: underline; }

.breadcrumb__item {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 0.75rem;
  color: currentColor;
  height: 2.75rem;
  padding: 0.75rem 0;
  margin: 0 0.9375rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto; }

.breadcrumb__text {
  -ms-flex-negative: 1;
      flex-shrink: 1; }

.breadcrumb__icon {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  margin-left: 0.3125rem;
  margin-right: 0.625rem;
  width: 1.125rem;
  height: 1.125rem; }

.breadcrumb__toggle-button {
  border: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  cursor: pointer; }

.breadcrumb__toggle-button-icon {
  width: 1.5rem;
  height: 1.5rem; }

.breadcrumb__toggle-button-icon--opened {
  display: none; }

.breadcrumb__toggle-button-icon--closed {
  display: block; }

.breadcrumb--is-open .breadcrumb__toggle-button-icon--opened {
  display: block; }

.breadcrumb--is-open .breadcrumb__toggle-button-icon--closed {
  display: none; }

.breadcrumb__item-container:last-child .breadcrumb__icon {
  display: none; }

@media (min-width: 26.625em) {
  .breadcrumb__item {
    margin-left: 1.875rem; } }

@media (min-width: 48.0625em) {
  .breadcrumb__container {
    position: relative;
    margin: 0 1.875rem; }
  .breadcrumb--is-open .breadcrumb__container {
    -webkit-box-shadow: none;
            box-shadow: none; }
  .breadcrumb__items {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
  .breadcrumb__item-container {
    position: static;
    width: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
  .breadcrumb__link {
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0; }
  .breadcrumb__item {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    margin: 0;
    padding: 0.75rem 0.625rem 0.75rem 0; }
  .breadcrumb__icon {
    margin-right: 0; }
  .breadcrumb__toggle-button {
    display: none; }
  .breadcrumb__item-container:last-child .breadcrumb__icon {
    display: none; } }

/*
Pagination

Markup:
<div class="c-pagination pagination {{modifier_class}}">
  <div class="c-pagination__container pagination__container">
    <span class="c-pagination-summary pagination-summary">Page
      <strong class="c-pagination-summary__page pagination-summary__page">1</strong> of
      <strong class="c-pagination-summary__page pagination-summary__page">6</strong>
    </span>
    <ul class="c-pagination__list pagination__list">
      <li class="c-pagination-item pagination-item c-pagination-item--disabled pagination-item--disabled c-pagination-item--navigation pagination-item--navigation">
        <span class="c-pagination-item__link pagination-item__link">
          <span class="c-pagination-item__label pagination-item__label">
            {{> AIA001.Components.SvgSprite
                modifier_class="arrow-left-500"
                classes="c-pagination-item__icon pagination-item__icon" }}
          </span>
        </span>
      </li>
      <li class="c-pagination-item c-pagination-item--current c-pagination-item--page-first c-pagination-item--page pagination-item pagination-item--current pagination-item--page-first pagination-item--page">
        <a class="c-pagination-item__link pagination-item__link">
          <span class="c-pagination-item__label pagination-item__label">1</span>
        </a>
      </li>
      <li class="c-pagination-item c-pagination-item--page pagination-item pagination-item--page">
        <a class="c-pagination-item__link pagination-item__link" href="/news/?p=2">
          <span class="c-pagination-item__label pagination-item__label">2</span>
        </a>
      </li>
      <li class="c-pagination-item c-pagination-item--page pagination-item pagination-item--page">
        <a class="c-pagination-item__link pagination-item__link" href="/news/?p=3">
          <span class="c-pagination-item__label pagination-item__label">3</span>
        </a>
      </li>
      <li class="c-pagination-item c-pagination-item--page pagination-item pagination-item--page">
        <a class="c-pagination-item__link pagination-item__link"
          href="/news/?p=4">
          <span class="c-pagination-item__label pagination-item__label">4</span>
        </a>
      </li>
      <li class="c-pagination-item c-pagination-item--page c-pagination-item--page-last pagination-item pagination-item--page pagination-item--page-last">
        <a class="c-pagination-item__link pagination-item__link"
          href="/news/?p=5">
          <span class="c-pagination-item__label pagination-item__label">5</span>
        </a>
      </li>
      <li class="c-pagination-item c-pagination-item--navigation pagination-item pagination-item--navigation">
        <a class="c-pagination-item__link pagination-item__link"
          aria-label="Next"
          href="/news/?p=2"
          rel="next">
          <span class="c-pagination-item__label pagination-item__label">
            {{> AIA001.Components.SvgSprite
                modifier_class="arrow-right-500"
                classes="c-pagination-item__icon pagination-item__icon" }}
          </span>
        </a>
      </li>
    </ul>
  </div>
</div>

.pagination--outlined - page buttons are outlined
.pagination--circled - page buttons are circles
.pagination--circled.pagination--only-current - page buttons are circles (only current page)

Styleguide AIA001.Components.Pagination
*/
.pagination {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 1rem; }

.pagination__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal; }

.pagination-summary {
  margin-top: 0.9375rem;
  margin-bottom: 0.9375rem;
  font-size: 0.875rem;
  line-height: 1.3;
  width: auto; }

.pagination-summary__page {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 0.75rem; }

.pagination__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-style: normal;
  font-size: 1rem; }

.pagination-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  margin: 0;
  color: #005036; }

.pagination-item--disabled {
  color: #d7d3cd; }

.pagination-item__link {
  border-width: 2px;
  border-color: transparent;
  border-style: solid;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  text-decoration: none; }

.pagination-item__icon {
  line-height: 1.375rem;
  width: 1.6875rem;
  min-width: 1.6875rem;
  height: 1.6875rem;
  min-height: 1.6875rem; }

.pagination-item__label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-width: 2.625rem;
  height: 2.5rem;
  padding: 0.3125rem;
  border-right: 0;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }

.pagination-item--navigation {
  color: #72d89b; }
  .pagination-item--navigation .pagination-item__link {
    color: #72d89b; }
  .pagination-item--navigation.pagination-item--disabled .pagination-item__link {
    color: #d7d3cd; }
  .pagination-item--navigation:not(.pagination-item--disabled):hover .pagination-item__icon {
    color: #005036; }

/**
  Outlined Pagination
**/
.pagination--outlined .pagination-item--page .pagination-item__link {
  border-style: solid;
  border-width: 2px;
  border-color: currentColor;
  border-left-width: 0; }

.pagination--outlined .pagination-item--page-first .pagination-item__link {
  border-left-width: 2px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px; }

.pagination--outlined .pagination-item--page-last .pagination-item__link {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px; }

/**
  Circled Pagination
**/
.pagination--circled .pagination-item--page {
  margin: 0 0.3125rem; }

.pagination--circled .pagination-item--page .pagination-item__link {
  border-radius: 1000px;
  color: #005036; }

.pagination--circled.pagination--only-current .pagination-item--page.pagination-item--current .pagination-item__link {
  background-color: #d7d3cd;
  color: #4a4845; }

.pagination--circled .pagination-item--page .pagination-item__link:hover,
.pagination--circled .pagination-item--page .pagination-item__link:active,
.pagination--circled .pagination-item--page .pagination-item__link:focus {
  background-color: #c7efd7;
  color: #005036; }

.pagination--circled:not(.pagination--only-current) .pagination-item--page .pagination-item__link {
  background-color: #d7d3cd;
  color: #4a4845; }

/*
Accordion Navigation Item

Markup:
<div class="accordion-navigation-item {{modifier_class}} {{#if isCurrent }}accordion-navigation-item--is-current-page{{/if}}">
  <div class="accordion-navigation-item__container">
    <a class="accordion-navigation-item__link u-focus u-focus--blue-light u-focus--on-container"
       href="#">
      {{#if spriteName }}
      {{> AIA001.Components.SvgSprite
          modifier_class = spriteName
          classes = "accordion-navigation-item__icon" }}
      {{/if}}
      <span class="accordion-navigation-item__text u-focus__container">{{ default title (concat 'Level' (default level 1)) }}</span>
      {{> AIA001.Components.SvgSprite
          modifier_class = "link-arrow-minor-500"
          classes = "accordion-navigation-item__navigation-icon" }}
    </a>
    {{#if @partial-block}}
    <button class="accordion-navigation-item__toggle-button u-focus u-focus--blue"
            data-toggle-element-classes
            data-toggle-element-classes--target="(parent) .accordion-navigation-item"
            data-toggle-element-classes--to="accordion-navigation-item--is-open">
        {{> AIA001.Components.SvgSprite
            modifier_class="plus-500"
            classes="accordion-navigation-item__toggle-icon accordion-navigation-item__toggle-icon--open" }}
        {{> AIA001.Components.SvgSprite
            modifier_class="minus-500"
            classes="accordion-navigation-item__toggle-icon accordion-navigation-item__toggle-icon--close" }}
    </button>
    {{/if}}
  </div>
  {{#if @partial-block}}
  <div class="accordion-navigation-item__children">
    {{> @partial-block}}
  </div>
  {{/if}}
</div>

.accordion-navigation-item--as-header - item as header, always open
.accordion-navigation-item--level-1 - level 1 navigation
.accordion-navigation-item--level-2 - level 2 navigation
.accordion-navigation-item--level-3 - level 3 navigation
.accordion-navigation-item--level-4 - level 4 navigation
.accordion-navigation-item--level-5 - level 5 navigation
.accordion-navigation-item--level-6 - level 6 navigation

Styleguide AIA001.Components.AccordionNavigationItem
*/
.accordion-navigation-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
  background-color: rgba(37, 36, 34, 0.1); }

.accordion-navigation-item__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  position: relative;
  min-height: 2.75rem;
  border-bottom: 1px solid rgba(37, 36, 34, 0.1); }

.accordion-navigation-item__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  padding: 0.5rem 3rem 0.5rem 1.5rem;
  height: 100%;
  min-height: 2.75rem; }
  .accordion-navigation-item__link, .accordion-navigation-item__link:link {
    color: inherit;
    text-decoration: none; }

.accordion-navigation-item__link:focus {
  outline: 0; }

.accordion-navigation-item__text {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 0.875rem;
  color: inherit; }

.accordion-navigation-item__icon {
  width: 1.75rem;
  height: 1.75rem;
  margin-right: 0.75rem;
  color: #4a4845;
  display: none; }

.accordion-navigation-item__navigation-icon {
  width: 2rem;
  height: 2rem;
  color: #4a4845;
  display: none; }

.accordion-navigation-item__toggle-button {
  width: 2.75rem;
  min-width: 2.75rem;
  height: 100%;
  min-height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  min-height: 100%;
  border: 0;
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  background-color: transparent;
  color: inherit;
  cursor: pointer; }

.accordion-navigation-item:hover > .accordion-navigation-item__container .accordion-navigation-item__toggle-button {
  color: black; }

.accordion-navigation-item__toggle:focus {
  outline: 0; }

.accordion-navigation-item__toggle-icon {
  width: 1.75rem;
  height: 1.75rem;
  margin: 0; }

.accordion-navigation-item__toggle-icon--close {
  display: none; }

.accordion-navigation-item__toggle-icon--open {
  display: inline; }

.accordion-navigation-item--is-open > .accordion-navigation-item__container .accordion-navigation-item__toggle-icon--close {
  display: inline; }

.accordion-navigation-item--is-open > .accordion-navigation-item__container .accordion-navigation-item__toggle-icon--open {
  display: none; }

.accordion-navigation-item__children {
  display: none;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; }

.accordion-navigation-item--is-open > .accordion-navigation-item__children {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

.accordion-navigation-item--level-1 {
  border: 0; }
  .accordion-navigation-item--level-1 > .accordion-navigation-item__container .accordion-navigation-item__toggle-button {
    border-left: 0; }
  .accordion-navigation-item--level-1 > .accordion-navigation-item__container .accordion-navigation-item__icon {
    display: block; }
  .accordion-navigation-item--level-1 > .accordion-navigation-item__container .accordion-navigation-item__text {
    font-family: din, Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-style: normal;
    font-size: 1.125rem;
    text-transform: uppercase; }

.accordion-navigation-item--level-2 {
  background-color: #f4f3f1; }
  .accordion-navigation-item--level-2 > .accordion-navigation-item__container .accordion-navigation-item__toggle-button {
    color: #aca8a4; }
  .accordion-navigation-item--level-2 > .accordion-navigation-item__container .accordion-navigation-item__text {
    font-family: din, Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-style: normal;
    font-size: 1rem; }
  .accordion-navigation-item--level-2.accordion-navigation-item--is-open > .accordion-navigation-item__container .accordion-navigation-item__toggle-button {
    color: #4a4845; }

.accordion-navigation-item--level-3,
.accordion-navigation-item--level-4 {
  color: #373533;
  line-height: 1.125rem; }
  .accordion-navigation-item--level-3 > .accordion-navigation-item__container .accordion-navigation-item__toggle-button,
  .accordion-navigation-item--level-4 > .accordion-navigation-item__container .accordion-navigation-item__toggle-button {
    color: #4a4845; }
  .accordion-navigation-item--level-3 > .accordion-navigation-item__container .accordion-navigation-item__text,
  .accordion-navigation-item--level-4 > .accordion-navigation-item__container .accordion-navigation-item__text {
    font-family: din, Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 0.875rem; }
  .accordion-navigation-item--level-3.accordion-navigation-item--is-open > .accordion-navigation-item__container .accordion-navigation-item__toggle-button,
  .accordion-navigation-item--level-4.accordion-navigation-item--is-open > .accordion-navigation-item__container .accordion-navigation-item__toggle-button {
    color: black; }

.accordion-navigation-item--level-4 > .accordion-navigation-item__container .accordion-navigation-item__text {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 0.875rem; }

.accordion-navigation-item--level-5 {
  color: black; }

.accordion-navigation-item--as-header,
.accordion-navigation-item--as-header.accordion-navigation-item--is-open,
.accordion-navigation-item--as-header:not(.accordion-navigation-item--is-open) {
  background-color: transparent; }
  .accordion-navigation-item--as-header > .accordion-navigation-item__container .accordion-navigation-item__toggle-button,
  .accordion-navigation-item--as-header.accordion-navigation-item--is-open > .accordion-navigation-item__container .accordion-navigation-item__toggle-button,
  .accordion-navigation-item--as-header:not(.accordion-navigation-item--is-open) > .accordion-navigation-item__container .accordion-navigation-item__toggle-button {
    display: none; }
  .accordion-navigation-item--as-header > .accordion-navigation-item__container .accordion-navigation-item__link,
  .accordion-navigation-item--as-header.accordion-navigation-item--is-open > .accordion-navigation-item__container .accordion-navigation-item__link,
  .accordion-navigation-item--as-header:not(.accordion-navigation-item--is-open) > .accordion-navigation-item__container .accordion-navigation-item__link {
    padding-left: 0; }
  .accordion-navigation-item--as-header > .accordion-navigation-item__container .accordion-navigation-item__icon,
  .accordion-navigation-item--as-header.accordion-navigation-item--is-open > .accordion-navigation-item__container .accordion-navigation-item__icon,
  .accordion-navigation-item--as-header:not(.accordion-navigation-item--is-open) > .accordion-navigation-item__container .accordion-navigation-item__icon {
    display: block;
    width: 2.375rem;
    height: 2.375rem; }
  .accordion-navigation-item--as-header > .accordion-navigation-item__container .accordion-navigation-item__navigation-icon,
  .accordion-navigation-item--as-header.accordion-navigation-item--is-open > .accordion-navigation-item__container .accordion-navigation-item__navigation-icon,
  .accordion-navigation-item--as-header:not(.accordion-navigation-item--is-open) > .accordion-navigation-item__container .accordion-navigation-item__navigation-icon {
    display: block; }
  .accordion-navigation-item--as-header > .accordion-navigation-item__container .accordion-navigation-item__text,
  .accordion-navigation-item--as-header.accordion-navigation-item--is-open > .accordion-navigation-item__container .accordion-navigation-item__text,
  .accordion-navigation-item--as-header:not(.accordion-navigation-item--is-open) > .accordion-navigation-item__container .accordion-navigation-item__text {
    font-family: din, Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-style: normal;
    font-size: 1.5rem;
    color: #4a4845; }
  .accordion-navigation-item--as-header > .accordion-navigation-item__children,
  .accordion-navigation-item--as-header.accordion-navigation-item--is-open > .accordion-navigation-item__children,
  .accordion-navigation-item--as-header:not(.accordion-navigation-item--is-open) > .accordion-navigation-item__children {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }

.accordion-navigation-item--is-current-page:not(.accordion-navigation-item--level-1) > .accordion-navigation-item__container {
  background-color: #4a4845;
  color: white; }
  .accordion-navigation-item--is-current-page:not(.accordion-navigation-item--level-1) > .accordion-navigation-item__container .accordion-navigation-item__toggle-button {
    border-left: 0;
    color: #d7d3cd; }

.accordion-navigation-item--theme-blue.accordion-navigation-item--level-1 > .accordion-navigation-item__container {
  background-color: #292d84; }
  .accordion-navigation-item--theme-blue.accordion-navigation-item--level-1 > .accordion-navigation-item__container .accordion-navigation-item__icon,
  .accordion-navigation-item--theme-blue.accordion-navigation-item--level-1 > .accordion-navigation-item__container .accordion-navigation-item__navigation-icon {
    color: #5e64f9; }
  .accordion-navigation-item--theme-blue.accordion-navigation-item--level-1 > .accordion-navigation-item__container .accordion-navigation-item__text {
    color: white; }
  .accordion-navigation-item--theme-blue.accordion-navigation-item--level-1 > .accordion-navigation-item__container .accordion-navigation-item__toggle-button {
    color: #c9cbff;
    background-color: #232671; }

.accordion-navigation-item--theme-blue.accordion-navigation-item--as-header > .accordion-navigation-item__container {
  background-color: transparent; }
  .accordion-navigation-item--theme-blue.accordion-navigation-item--as-header > .accordion-navigation-item__container .accordion-navigation-item__text {
    color: #4a4845; }
  .accordion-navigation-item--theme-blue.accordion-navigation-item--as-header > .accordion-navigation-item__container .accordion-navigation-item__icon,
  .accordion-navigation-item--theme-blue.accordion-navigation-item--as-header > .accordion-navigation-item__container .accordion-navigation-item__navigation-icon {
    color: #5e64f9; }
  .accordion-navigation-item--theme-blue.accordion-navigation-item--as-header > .accordion-navigation-item__container .accordion-navigation-item__link:hover .accordion-navigation-item__navigation-icon,
  .accordion-navigation-item--theme-blue.accordion-navigation-item--as-header > .accordion-navigation-item__container .accordion-navigation-item__link:focus .accordion-navigation-item__navigation-icon,
  .accordion-navigation-item--theme-blue.accordion-navigation-item--as-header > .accordion-navigation-item__container .accordion-navigation-item__link:active .accordion-navigation-item__navigation-icon {
    color: #292d84; }

.accordion-navigation-item--theme-blue:hover > .accordion-navigation-item__container .accordion-navigation-item__toggle-button {
  color: white; }

.accordion-navigation-item--theme-yellow.accordion-navigation-item--level-1 > .accordion-navigation-item__container {
  background-color: #b56000; }
  .accordion-navigation-item--theme-yellow.accordion-navigation-item--level-1 > .accordion-navigation-item__container .accordion-navigation-item__icon,
  .accordion-navigation-item--theme-yellow.accordion-navigation-item--level-1 > .accordion-navigation-item__container .accordion-navigation-item__navigation-icon {
    color: #fea627; }
  .accordion-navigation-item--theme-yellow.accordion-navigation-item--level-1 > .accordion-navigation-item__container .accordion-navigation-item__text {
    color: white; }
  .accordion-navigation-item--theme-yellow.accordion-navigation-item--level-1 > .accordion-navigation-item__container .accordion-navigation-item__toggle-button {
    color: #ffefd9;
    background-color: #9c5200; }

.accordion-navigation-item--theme-yellow.accordion-navigation-item--as-header > .accordion-navigation-item__container {
  background-color: transparent; }
  .accordion-navigation-item--theme-yellow.accordion-navigation-item--as-header > .accordion-navigation-item__container .accordion-navigation-item__text {
    color: #4a4845; }
  .accordion-navigation-item--theme-yellow.accordion-navigation-item--as-header > .accordion-navigation-item__container .accordion-navigation-item__icon,
  .accordion-navigation-item--theme-yellow.accordion-navigation-item--as-header > .accordion-navigation-item__container .accordion-navigation-item__navigation-icon {
    color: #fea627; }
  .accordion-navigation-item--theme-yellow.accordion-navigation-item--as-header > .accordion-navigation-item__container .accordion-navigation-item__link:hover .accordion-navigation-item__navigation-icon,
  .accordion-navigation-item--theme-yellow.accordion-navigation-item--as-header > .accordion-navigation-item__container .accordion-navigation-item__link:focus .accordion-navigation-item__navigation-icon,
  .accordion-navigation-item--theme-yellow.accordion-navigation-item--as-header > .accordion-navigation-item__container .accordion-navigation-item__link:active .accordion-navigation-item__navigation-icon {
    color: #b56000; }

.accordion-navigation-item--theme-yellow:hover > .accordion-navigation-item__container .accordion-navigation-item__toggle-button {
  color: white; }

.accordion-navigation-item--theme-red.accordion-navigation-item--level-1 > .accordion-navigation-item__container {
  background-color: #ae3434; }
  .accordion-navigation-item--theme-red.accordion-navigation-item--level-1 > .accordion-navigation-item__container .accordion-navigation-item__icon,
  .accordion-navigation-item--theme-red.accordion-navigation-item--level-1 > .accordion-navigation-item__container .accordion-navigation-item__navigation-icon {
    color: #f15f5e; }
  .accordion-navigation-item--theme-red.accordion-navigation-item--level-1 > .accordion-navigation-item__container .accordion-navigation-item__text {
    color: white; }
  .accordion-navigation-item--theme-red.accordion-navigation-item--level-1 > .accordion-navigation-item__container .accordion-navigation-item__toggle-button {
    color: #ffd4d3;
    background-color: #9a2e2e; }

.accordion-navigation-item--theme-red.accordion-navigation-item--as-header > .accordion-navigation-item__container {
  background-color: transparent; }
  .accordion-navigation-item--theme-red.accordion-navigation-item--as-header > .accordion-navigation-item__container .accordion-navigation-item__text {
    color: #4a4845; }
  .accordion-navigation-item--theme-red.accordion-navigation-item--as-header > .accordion-navigation-item__container .accordion-navigation-item__icon,
  .accordion-navigation-item--theme-red.accordion-navigation-item--as-header > .accordion-navigation-item__container .accordion-navigation-item__navigation-icon {
    color: #f15f5e; }
  .accordion-navigation-item--theme-red.accordion-navigation-item--as-header > .accordion-navigation-item__container .accordion-navigation-item__link:hover .accordion-navigation-item__navigation-icon,
  .accordion-navigation-item--theme-red.accordion-navigation-item--as-header > .accordion-navigation-item__container .accordion-navigation-item__link:focus .accordion-navigation-item__navigation-icon,
  .accordion-navigation-item--theme-red.accordion-navigation-item--as-header > .accordion-navigation-item__container .accordion-navigation-item__link:active .accordion-navigation-item__navigation-icon {
    color: #ae3434; }

.accordion-navigation-item--theme-red:hover > .accordion-navigation-item__container .accordion-navigation-item__toggle-button {
  color: white; }

.accordion-navigation-item--theme-green.accordion-navigation-item--level-1 > .accordion-navigation-item__container {
  background-color: #005036; }
  .accordion-navigation-item--theme-green.accordion-navigation-item--level-1 > .accordion-navigation-item__container .accordion-navigation-item__icon,
  .accordion-navigation-item--theme-green.accordion-navigation-item--level-1 > .accordion-navigation-item__container .accordion-navigation-item__navigation-icon {
    color: #72d89b; }
  .accordion-navigation-item--theme-green.accordion-navigation-item--level-1 > .accordion-navigation-item__container .accordion-navigation-item__text {
    color: white; }
  .accordion-navigation-item--theme-green.accordion-navigation-item--level-1 > .accordion-navigation-item__container .accordion-navigation-item__toggle-button {
    color: #c7efd7;
    background-color: #003725; }

.accordion-navigation-item--theme-green.accordion-navigation-item--as-header > .accordion-navigation-item__container {
  background-color: transparent; }
  .accordion-navigation-item--theme-green.accordion-navigation-item--as-header > .accordion-navigation-item__container .accordion-navigation-item__text {
    color: #4a4845; }
  .accordion-navigation-item--theme-green.accordion-navigation-item--as-header > .accordion-navigation-item__container .accordion-navigation-item__icon,
  .accordion-navigation-item--theme-green.accordion-navigation-item--as-header > .accordion-navigation-item__container .accordion-navigation-item__navigation-icon {
    color: #72d89b; }
  .accordion-navigation-item--theme-green.accordion-navigation-item--as-header > .accordion-navigation-item__container .accordion-navigation-item__link:hover .accordion-navigation-item__navigation-icon,
  .accordion-navigation-item--theme-green.accordion-navigation-item--as-header > .accordion-navigation-item__container .accordion-navigation-item__link:focus .accordion-navigation-item__navigation-icon,
  .accordion-navigation-item--theme-green.accordion-navigation-item--as-header > .accordion-navigation-item__container .accordion-navigation-item__link:active .accordion-navigation-item__navigation-icon {
    color: #005036; }

.accordion-navigation-item--theme-green:hover > .accordion-navigation-item__container .accordion-navigation-item__toggle-button {
  color: white; }

.accordion-navigation-item--theme-teal.accordion-navigation-item--level-1 > .accordion-navigation-item__container {
  background-color: #006f7a; }
  .accordion-navigation-item--theme-teal.accordion-navigation-item--level-1 > .accordion-navigation-item__container .accordion-navigation-item__icon,
  .accordion-navigation-item--theme-teal.accordion-navigation-item--level-1 > .accordion-navigation-item__container .accordion-navigation-item__navigation-icon {
    color: #10a3b2; }
  .accordion-navigation-item--theme-teal.accordion-navigation-item--level-1 > .accordion-navigation-item__container .accordion-navigation-item__text {
    color: white; }
  .accordion-navigation-item--theme-teal.accordion-navigation-item--level-1 > .accordion-navigation-item__container .accordion-navigation-item__toggle-button {
    color: #ccfffe;
    background-color: #005861; }

.accordion-navigation-item--theme-teal.accordion-navigation-item--as-header > .accordion-navigation-item__container {
  background-color: transparent; }
  .accordion-navigation-item--theme-teal.accordion-navigation-item--as-header > .accordion-navigation-item__container .accordion-navigation-item__text {
    color: #4a4845; }
  .accordion-navigation-item--theme-teal.accordion-navigation-item--as-header > .accordion-navigation-item__container .accordion-navigation-item__icon,
  .accordion-navigation-item--theme-teal.accordion-navigation-item--as-header > .accordion-navigation-item__container .accordion-navigation-item__navigation-icon {
    color: #10a3b2; }
  .accordion-navigation-item--theme-teal.accordion-navigation-item--as-header > .accordion-navigation-item__container .accordion-navigation-item__link:hover .accordion-navigation-item__navigation-icon,
  .accordion-navigation-item--theme-teal.accordion-navigation-item--as-header > .accordion-navigation-item__container .accordion-navigation-item__link:focus .accordion-navigation-item__navigation-icon,
  .accordion-navigation-item--theme-teal.accordion-navigation-item--as-header > .accordion-navigation-item__container .accordion-navigation-item__link:active .accordion-navigation-item__navigation-icon {
    color: #006f7a; }

.accordion-navigation-item--theme-teal:hover > .accordion-navigation-item__container .accordion-navigation-item__toggle-button {
  color: white; }

.accordion-navigation-item--theme-grey.accordion-navigation-item--level-1 > .accordion-navigation-item__container {
  background-color: #4a4845; }
  .accordion-navigation-item--theme-grey.accordion-navigation-item--level-1 > .accordion-navigation-item__container .accordion-navigation-item__icon,
  .accordion-navigation-item--theme-grey.accordion-navigation-item--level-1 > .accordion-navigation-item__container .accordion-navigation-item__navigation-icon {
    color: #aca8a4; }
  .accordion-navigation-item--theme-grey.accordion-navigation-item--level-1 > .accordion-navigation-item__container .accordion-navigation-item__text {
    color: white; }
  .accordion-navigation-item--theme-grey.accordion-navigation-item--level-1 > .accordion-navigation-item__container .accordion-navigation-item__toggle-button {
    color: grey;
    background-color: #3d3b39; }

.accordion-navigation-item--theme-grey.accordion-navigation-item--as-header > .accordion-navigation-item__container {
  background-color: transparent; }
  .accordion-navigation-item--theme-grey.accordion-navigation-item--as-header > .accordion-navigation-item__container .accordion-navigation-item__text {
    color: #4a4845; }
  .accordion-navigation-item--theme-grey.accordion-navigation-item--as-header > .accordion-navigation-item__container .accordion-navigation-item__icon,
  .accordion-navigation-item--theme-grey.accordion-navigation-item--as-header > .accordion-navigation-item__container .accordion-navigation-item__navigation-icon {
    color: #aca8a4; }
  .accordion-navigation-item--theme-grey.accordion-navigation-item--as-header > .accordion-navigation-item__container .accordion-navigation-item__link:hover .accordion-navigation-item__navigation-icon,
  .accordion-navigation-item--theme-grey.accordion-navigation-item--as-header > .accordion-navigation-item__container .accordion-navigation-item__link:focus .accordion-navigation-item__navigation-icon,
  .accordion-navigation-item--theme-grey.accordion-navigation-item--as-header > .accordion-navigation-item__container .accordion-navigation-item__link:active .accordion-navigation-item__navigation-icon {
    color: #4a4845; }

.accordion-navigation-item--theme-grey:hover > .accordion-navigation-item__container .accordion-navigation-item__toggle-button {
  color: white; }

.accordion-navigation-item--theme-sand.accordion-navigation-item--level-1 > .accordion-navigation-item__container {
  background-color: #ad944b; }
  .accordion-navigation-item--theme-sand.accordion-navigation-item--level-1 > .accordion-navigation-item__container .accordion-navigation-item__icon,
  .accordion-navigation-item--theme-sand.accordion-navigation-item--level-1 > .accordion-navigation-item__container .accordion-navigation-item__navigation-icon {
    color: #f5ebcd; }
  .accordion-navigation-item--theme-sand.accordion-navigation-item--level-1 > .accordion-navigation-item__container .accordion-navigation-item__text {
    color: white; }
  .accordion-navigation-item--theme-sand.accordion-navigation-item--level-1 > .accordion-navigation-item__container .accordion-navigation-item__toggle-button {
    color: sand;
    background-color: #9b8543; }

.accordion-navigation-item--theme-sand.accordion-navigation-item--as-header > .accordion-navigation-item__container {
  background-color: transparent; }
  .accordion-navigation-item--theme-sand.accordion-navigation-item--as-header > .accordion-navigation-item__container .accordion-navigation-item__text {
    color: #4a4845; }
  .accordion-navigation-item--theme-sand.accordion-navigation-item--as-header > .accordion-navigation-item__container .accordion-navigation-item__icon,
  .accordion-navigation-item--theme-sand.accordion-navigation-item--as-header > .accordion-navigation-item__container .accordion-navigation-item__navigation-icon {
    color: #f5ebcd; }
  .accordion-navigation-item--theme-sand.accordion-navigation-item--as-header > .accordion-navigation-item__container .accordion-navigation-item__link:hover .accordion-navigation-item__navigation-icon,
  .accordion-navigation-item--theme-sand.accordion-navigation-item--as-header > .accordion-navigation-item__container .accordion-navigation-item__link:focus .accordion-navigation-item__navigation-icon,
  .accordion-navigation-item--theme-sand.accordion-navigation-item--as-header > .accordion-navigation-item__container .accordion-navigation-item__link:active .accordion-navigation-item__navigation-icon {
    color: #ad944b; }

.accordion-navigation-item--theme-sand:hover > .accordion-navigation-item__container .accordion-navigation-item__toggle-button {
  color: white; }

.accordion-navigation-item--theme-alert.accordion-navigation-item--level-1 > .accordion-navigation-item__container {
  background-color: #b94d20; }
  .accordion-navigation-item--theme-alert.accordion-navigation-item--level-1 > .accordion-navigation-item__container .accordion-navigation-item__icon,
  .accordion-navigation-item--theme-alert.accordion-navigation-item--level-1 > .accordion-navigation-item__container .accordion-navigation-item__navigation-icon {
    color: #fb8d60; }
  .accordion-navigation-item--theme-alert.accordion-navigation-item--level-1 > .accordion-navigation-item__container .accordion-navigation-item__text {
    color: white; }
  .accordion-navigation-item--theme-alert.accordion-navigation-item--level-1 > .accordion-navigation-item__container .accordion-navigation-item__toggle-button {
    color: alert;
    background-color: #a3441c; }

.accordion-navigation-item--theme-alert.accordion-navigation-item--as-header > .accordion-navigation-item__container {
  background-color: transparent; }
  .accordion-navigation-item--theme-alert.accordion-navigation-item--as-header > .accordion-navigation-item__container .accordion-navigation-item__text {
    color: #4a4845; }
  .accordion-navigation-item--theme-alert.accordion-navigation-item--as-header > .accordion-navigation-item__container .accordion-navigation-item__icon,
  .accordion-navigation-item--theme-alert.accordion-navigation-item--as-header > .accordion-navigation-item__container .accordion-navigation-item__navigation-icon {
    color: #fb8d60; }
  .accordion-navigation-item--theme-alert.accordion-navigation-item--as-header > .accordion-navigation-item__container .accordion-navigation-item__link:hover .accordion-navigation-item__navigation-icon,
  .accordion-navigation-item--theme-alert.accordion-navigation-item--as-header > .accordion-navigation-item__container .accordion-navigation-item__link:focus .accordion-navigation-item__navigation-icon,
  .accordion-navigation-item--theme-alert.accordion-navigation-item--as-header > .accordion-navigation-item__container .accordion-navigation-item__link:active .accordion-navigation-item__navigation-icon {
    color: #b94d20; }

.accordion-navigation-item--theme-alert:hover > .accordion-navigation-item__container .accordion-navigation-item__toggle-button {
  color: white; }

.accordion-navigation-item--theme-coldgrey.accordion-navigation-item--level-1 > .accordion-navigation-item__container {
  background-color: #1d1d1f; }
  .accordion-navigation-item--theme-coldgrey.accordion-navigation-item--level-1 > .accordion-navigation-item__container .accordion-navigation-item__icon,
  .accordion-navigation-item--theme-coldgrey.accordion-navigation-item--level-1 > .accordion-navigation-item__container .accordion-navigation-item__navigation-icon {
    color: #313236; }
  .accordion-navigation-item--theme-coldgrey.accordion-navigation-item--level-1 > .accordion-navigation-item__container .accordion-navigation-item__text {
    color: white; }
  .accordion-navigation-item--theme-coldgrey.accordion-navigation-item--level-1 > .accordion-navigation-item__container .accordion-navigation-item__toggle-button {
    color: coldgrey;
    background-color: #111112; }

.accordion-navigation-item--theme-coldgrey.accordion-navigation-item--as-header > .accordion-navigation-item__container {
  background-color: transparent; }
  .accordion-navigation-item--theme-coldgrey.accordion-navigation-item--as-header > .accordion-navigation-item__container .accordion-navigation-item__text {
    color: #4a4845; }
  .accordion-navigation-item--theme-coldgrey.accordion-navigation-item--as-header > .accordion-navigation-item__container .accordion-navigation-item__icon,
  .accordion-navigation-item--theme-coldgrey.accordion-navigation-item--as-header > .accordion-navigation-item__container .accordion-navigation-item__navigation-icon {
    color: #313236; }
  .accordion-navigation-item--theme-coldgrey.accordion-navigation-item--as-header > .accordion-navigation-item__container .accordion-navigation-item__link:hover .accordion-navigation-item__navigation-icon,
  .accordion-navigation-item--theme-coldgrey.accordion-navigation-item--as-header > .accordion-navigation-item__container .accordion-navigation-item__link:focus .accordion-navigation-item__navigation-icon,
  .accordion-navigation-item--theme-coldgrey.accordion-navigation-item--as-header > .accordion-navigation-item__container .accordion-navigation-item__link:active .accordion-navigation-item__navigation-icon {
    color: #1d1d1f; }

.accordion-navigation-item--theme-coldgrey:hover > .accordion-navigation-item__container .accordion-navigation-item__toggle-button {
  color: white; }

/*
Accordion Navigation Group

- theme class goes on the `accordion-navigation-item` not the group.

Markup:
<div class="accordion-navigation-group {{ classes }}">
  <div class="accordion-navigation-group__container">
  {{#if @partial-block}}
    {{> @partial-block}}
  {{else}}
    {{#> AIA001.Components.AccordionNavigationItem
        level = 1
        title = (default topLevelTitle "Header title" )
        spriteName = (default spriteName "practice-icon")
        modifier_class = (concat modifier_class " accordion-navigation-item--level-1") }}
      {{> AIA001.Components.AccordionNavigationItem
          level = 2
          spriteName = ""
          modifier_class="accordion-navigation-item--level-2" }}
      {{> AIA001.Components.AccordionNavigationItem
          level = 2
          spriteName = ""
          modifier_class="accordion-navigation-item--level-2" }}
      {{#> AIA001.Components.AccordionNavigationItem
          level = 2
          spriteName = ""
          modifier_class="accordion-navigation-item--level-2" }}
        {{#> AIA001.Components.AccordionNavigationItem
            level = 3
            spriteName = ""
            modifier_class="accordion-navigation-item--level-3" }}
          {{#> AIA001.Components.AccordionNavigationItem
              level = 4
              spriteName = ""
              modifier_class="accordion-navigation-item--level-4" }}
            {{#> AIA001.Components.AccordionNavigationItem
                level = 5
                spriteName = ""
                modifier_class="accordion-navigation-item--level-5" }}
            {{/AIA001.Components.AccordionNavigationItem}}
          {{/AIA001.Components.AccordionNavigationItem}}
        {{/AIA001.Components.AccordionNavigationItem}}
      {{/AIA001.Components.AccordionNavigationItem}}
    {{/AIA001.Components.AccordionNavigationItem}}
  {{/if}}
  </div>
</div>

.accordion-navigation-item--theme-blue - Blue theme
.accordion-navigation-item--theme-yellow - Yellow theme
.accordion-navigation-item--theme-red - Red theme
.accordion-navigation-item--theme-green - Green theme
.accordion-navigation-item--theme-sand - Sand theme
.accordion-navigation-item--theme-alert - Alert theme
.accordion-navigation-item--as-header - Level 1 is header
.accordion-navigation-item--as-header.accordion-navigation-item--theme-blue - Level 1 is header, Blue theme
.accordion-navigation-item--as-header.accordion-navigation-item--theme-yellow - Level 1 is header, Yellow theme
.accordion-navigation-item--as-header.accordion-navigation-item--theme-red - Level 1 is header, Red theme
.accordion-navigation-item--as-header.accordion-navigation-item--theme-green - Level 1 is header, Green theme
.accordion-navigation-item--as-header.accordion-navigation-item--theme-sand - Level 1 is header, Sand theme
.accordion-navigation-item--as-header.accordion-navigation-item--theme-alert - Level 1 is header, Alert theme

Styleguide AIA001.Components.AccordionNavigationGroup
*/
.accordion-navigation-group {
  margin-bottom: 0.3125rem;
  width: 100%; }

.accordion-navigation-group__container {
  background-color: white; }

/*
Accordion Item

Markup:
<div class="accordion-item {{modifier_class}} {{#if isCurrent }}accordion-item--is-current-page{{/if}}">
  <div class="accordion-item__container">
    <a class="accordion-item__link u-focus u-focus--blue-light u-focus--on-container"
       href="#">
      {{#if spriteName }}
      {{> AIA001.Components.SvgSprite
          modifier_class = spriteName
          classes = "accordion-item__icon" }}
      {{/if}}
      <span class="accordion-item__text u-focus__container">{{ default title (concat 'Level' (default level 1)) }}</span>
      {{> AIA001.Components.SvgSprite
          modifier_class = "link-arrow-minor-500"
          classes = "accordion-item__navigation-icon" }}
    </a>
    {{#if @partial-block}}
    <button class="accordion-item__toggle-button u-focus u-focus--blue"
            data-toggle-element-classes
            data-toggle-element-classes--target="(parent) .accordion-item"
            data-toggle-element-classes--to="accordion-item--is-open">
        {{> AIA001.Components.SvgSprite
            modifier_class="plus-500"
            classes="accordion-item__toggle-icon accordion-item__toggle-icon--open" }}
        {{> AIA001.Components.SvgSprite
            modifier_class="minus-500"
            classes="accordion-item__toggle-icon accordion-item__toggle-icon--close" }}
    </button>
    {{/if}}
  </div>
  {{#if @partial-block}}
  <div class="accordion-item__children">
    {{> @partial-block}}
  </div>
  {{/if}}
</div>

Styleguide AIA001.Components.AccordionItem
*/
.accordion-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
  background-color: #f4f3f1; }

.accordion-item__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  position: relative;
  min-height: 2.75rem;
  background-color: #d7d3cd;
  padding-left: 30px; }

.accordion-item__link:focus {
  outline: 0; }

.accordion-item__text {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-style: normal;
  font-size: 1.125rem;
  color: #4a4845;
  display: inline-block;
  padding-top: 5px; }

.accordion-item__icon {
  width: 1.75rem;
  height: 1.75rem;
  margin-right: 0.75rem;
  color: #4a4845;
  display: none; }

.accordion-item__toggle-button {
  min-width: 2.75rem;
  height: 100%;
  min-height: 100%;
  width: 100%;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  left: 0;
  min-height: 100%;
  text-align: right;
  color: #7c7871;
  border: 0;
  background-color: transparent;
  cursor: pointer; }
  [data-focus-source="pointer"] .accordion-item__toggle-button:focus {
    outline: none; }
  .accordion-item__toggle-button:hover {
    color: #252422; }

.accordion-item__toggle:focus {
  outline: 0; }

.accordion-item__toggle-icon {
  width: 1.75rem;
  height: 1.75rem;
  margin: 0; }

.accordion-item__toggle-icon--close {
  display: none; }

.accordion-item__toggle-icon--open {
  display: inline; }

.accordion-item--is-open > .accordion-item__title .accordion-item__toggle-icon--close {
  display: inline; }

.accordion-item--is-open > .accordion-item__title .accordion-item__toggle-icon--open {
  display: none; }

.accordion-item__content {
  display: none;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 25px 30px; }

.accordion-item--is-open > .accordion-item__content {
  display: block; }

.accordion-item__title .toggle__show-hide-text:before {
  content: "Show "; }

.accordion-item--is-open .accordion-item__title .toggle__show-hide-text:before {
  content: "Hide "; }

/*
Index Section Link Grid

Markup:
<div class="index-link-grid {{modifier_class}} {{classes}}"}
     data-sticky-element
     data-sticky-element--target="(children) .index-link-grid__container">
  <div class="index-link-grid__container">
    <strong class="index-link-grid__label">Jump To:</strong>
    <nav class="index-link-grid__list">
      <a class="index-link-grid__item u-focus u-focus--blue-light" href="#a">a</a>
      <a class="index-link-grid__item u-focus u-focus--blue-light" href="#b">b</a>
      <a class="index-link-grid__item u-focus u-focus--blue-light" href="#c">c</a>
      <a class="index-link-grid__item u-focus u-focus--blue-light" href="#d">d</a>
      <a class="index-link-grid__item u-focus u-focus--blue-light" href="#e">e</a>
      <a class="index-link-grid__item u-focus u-focus--blue-light" href="#f">f</a>
      <a class="index-link-grid__item u-focus u-focus--blue-light" href="#g">g</a>
      <a class="index-link-grid__item u-focus u-focus--blue-light" href="#h">h</a>
      <a class="index-link-grid__item u-focus u-focus--blue-light" href="#i">i</a>
      <a class="index-link-grid__item u-focus u-focus--blue-light" href="#j">j</a>
      <a class="index-link-grid__item u-focus u-focus--blue-light" href="#k">k</a>
      <a class="index-link-grid__item u-focus u-focus--blue-light" href="#l">l</a>
      <a class="index-link-grid__item u-focus u-focus--blue-light" href="#m">m</a>
      <a class="index-link-grid__item u-focus u-focus--blue-light" href="#n">n</a>
      <a class="index-link-grid__item u-focus u-focus--blue-light" href="#o">o</a>
      <a class="index-link-grid__item u-focus u-focus--blue-light" href="#p">p</a>
      <a class="index-link-grid__item u-focus u-focus--blue-light" href="#q">q</a>
      <a class="index-link-grid__item u-focus u-focus--blue-light" href="#r">r</a>
      <a class="index-link-grid__item u-focus u-focus--blue-light" href="#s">s</a>
      <a class="index-link-grid__item u-focus u-focus--blue-light" href="#t">t</a>
      <a class="index-link-grid__item u-focus u-focus--blue-light" href="#u">u</a>
      <a class="index-link-grid__item u-focus u-focus--blue-light" href="#v">v</a>
      <a class="index-link-grid__item u-focus u-focus--blue-light" href="#w">w</a>
      <a class="index-link-grid__item u-focus u-focus--blue-light" href="#x">x</a>
      <a class="index-link-grid__item u-focus u-focus--blue-light" href="#y">y</a>
      <a class="index-link-grid__item u-focus u-focus--blue-light" href="#z">z</a>
    </nav>
  </div>
</div>

Styleguide AIA001.Components.IndexLinkGrid
*/
.index-link-grid__container {
  max-width: 12.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; }

.index-link-grid--sticky .index-link-grid__container {
  position: fixed;
  top: 1.875rem; }

.index-link-grid__label {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-style: normal;
  font-size: 1rem;
  text-transform: uppercase;
  margin-bottom: 1.3125rem;
  border-top: 1px solid #d7d3cd;
  padding-top: 1.5rem;
  margin-top: 2.625rem; }

.index-link-grid__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none; }

.index-link-grid__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-right: 0.0625rem;
  margin-bottom: 0.0625rem;
  width: 3.125rem;
  height: 3.125rem;
  background-color: #72d89b;
  color: #005036;
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-style: normal;
  font-size: 1rem;
  text-decoration: none;
  text-transform: uppercase; }

.index-link-grid__item:hover,
.index-link-grid__item:focus {
  background-color: #85e6ac;
  outline: 0; }

.index-link-grid__item:focus {
  z-index: 10; }

.index-link-grid__item:active {
  background-color: #005036;
  color: white; }

.index-link-grid__item--is-current {
  background-color: #005036; }

/*
Anchor Jump List

Markup:
{{#> AIA001.Components.Forms.Select
  modifier_class = (concat "anchor-jump-list" " " modifier_class)
  attributes="data-anchor-navigate"}}
  <option value="a">a</option>
  <option value="b">b</option>
  <option value="c">c</option>
  <option value="d">d</option>
  <option value="e">e</option>
  <option value="f">f</option>
  <option value="g">g</option>
  <option value="h">h</option>
  <option value="i">i</option>
  <option value="j">j</option>
  <option value="k">k</option>
  <option value="l">l</option>
  <option value="m">m</option>
  <option value="n">n</option>
  <option value="o">o</option>
  <option value="p">p</option>
  <option value="q">q</option>
  <option value="r">r</option>
  <option value="s">s</option>
  <option value="t">t</option>
  <option value="u">u</option>
  <option value="v">v</option>
  <option value="w">w</option>
  <option value="x">x</option>
  <option value="y">y</option>
  <option value="z">z</option>
{{/AIA001.Components.Forms.Select}}
<script>
  (function(){
    document.querySelector('[data-anchor-navigate]')
      .addEventListener('change', function () {
        window.location.hash = this.value;
      });
  })();
</script>

Styleguide AIA001.Components.IndexLinkGrid.Dropdown
*/
select.select.anchor-jump-list {
  margin: 0 auto;
  width: 100%; }

@media (min-width: 48.0625em) {
  .index-link-grid__select {
    display: none; }
  .index-link-grid__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; } }

/*
Tag List

Markup:
<section class="tag-list {{modifier_class}} {{classes}}">
  <div class="tag-list__label">{{ default label "Tags"}}:</div>
  <nav class="tag-list__items">
  {{#if tags }}
    {{#each tags }}
    <a class="tag-list__item u-focus u-focus--blue-light u-focus--rounder" href="#">{{this}}</a>
    {{/each}}
  {{ else }}
    <a class="tag-list__item u-focus u-focus--blue-light u-focus--rounder" href="#">So</a>
    <a class="tag-list__item u-focus u-focus--blue-light u-focus--rounder" href="#">Many</a>
    <a class="tag-list__item u-focus u-focus--blue-light u-focus--rounder" href="#">Words</a>
    <a class="tag-list__item u-focus u-focus--blue-light u-focus--rounder" href="#">To</a>
    <a class="tag-list__item u-focus u-focus--blue-light u-focus--rounder" href="#">Show</a>
    <a class="tag-list__item u-focus u-focus--blue-light u-focus--rounder" href="#">You!</a>
    <a class="tag-list__item u-focus u-focus--blue-light u-focus--rounder" href="#">Look</a>
    <a class="tag-list__item u-focus u-focus--blue-light u-focus--rounder" href="#">at</a>
    <a class="tag-list__item u-focus u-focus--blue-light u-focus--rounder" href="#">all</a>
    <a class="tag-list__item u-focus u-focus--blue-light u-focus--rounder" href="#">my</a>
    <a class="tag-list__item u-focus u-focus--blue-light u-focus--rounder" href="#">words</a>
    <a class="tag-list__item u-focus u-focus--blue-light u-focus--rounder" href="#">So</a>
    <a class="tag-list__item u-focus u-focus--blue-light u-focus--rounder" href="#">Many</a>
    <a class="tag-list__item u-focus u-focus--blue-light u-focus--rounder" href="#">Words</a>
    <a class="tag-list__item u-focus u-focus--blue-light u-focus--rounder" href="#">To</a>
    <a class="tag-list__item u-focus u-focus--blue-light u-focus--rounder" href="#">Show</a>
    <a class="tag-list__item u-focus u-focus--blue-light u-focus--rounder" href="#">You!</a>
    <a class="tag-list__item u-focus u-focus--blue-light u-focus--rounder" href="#">Look</a>
    <a class="tag-list__item u-focus u-focus--blue-light u-focus--rounder" href="#">at</a>
    <a class="tag-list__item u-focus u-focus--blue-light u-focus--rounder" href="#">all</a>
    <a class="tag-list__item u-focus u-focus--blue-light u-focus--rounder" href="#">my</a>
    <a class="tag-list__item u-focus u-focus--blue-light u-focus--rounder" href="#">words</a>
    <a class="tag-list__item u-focus u-focus--blue-light u-focus--rounder" href="#">So</a>
    <a class="tag-list__item u-focus u-focus--blue-light u-focus--rounder" href="#">Many</a>
    <a class="tag-list__item u-focus u-focus--blue-light u-focus--rounder" href="#">Words</a>
    <a class="tag-list__item u-focus u-focus--blue-light u-focus--rounder" href="#">To</a>
    <a class="tag-list__item u-focus u-focus--blue-light u-focus--rounder" href="#">Show</a>
    <a class="tag-list__item u-focus u-focus--blue-light u-focus--rounder" href="#">You!</a>
    <a class="tag-list__item u-focus u-focus--blue-light u-focus--rounder" href="#">Look</a>
    <a class="tag-list__item u-focus u-focus--blue-light u-focus--rounder" href="#">at</a>
    <a class="tag-list__item u-focus u-focus--blue-light u-focus--rounder" href="#">all</a>
    <a class="tag-list__item u-focus u-focus--blue-light u-focus--rounder" href="#">my</a>
    <a class="tag-list__item u-focus u-focus--blue-light u-focus--rounder" href="#">words</a>
  {{/if}}
  </nav>
</section>

Weight: 30

Styleguide AIA001.Components.Tags
*/
.tag-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  width: 100%;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  margin-bottom: 1.5rem; }

.tag-list__label {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-style: normal;
  font-size: 0.875rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-right: 0.875rem; }

.tag-list__items {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }

.tag-list__item {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  text-decoration: none;
  font-size: 0.75rem;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  background: #e9e7e4;
  color: #4a4845;
  padding: 0.1875rem 0.625rem 0.3125rem 0.625rem;
  border-radius: 0.3125rem;
  margin: 0 0.15625rem 0.3125rem 0; }

.tag-list__item:focus,
.tag-list__item:hover {
  outline: 0;
  background: #d7d3cd; }

.tag-list__item:active {
  background: #4a4845;
  color: white; }

/*
Info Card

Markup:
<div class="info-card {{modifier_class}} {{classes}}">
  <div class="info-card__container">
    <div class="info-card__header">
      <h3 class="info-card__heading">{{title}}</h3>
    </div>
    <div class="info-card__content">
      {{> AIA001.Components.SvgSprite
          sprite=(default icon "book")
          classes="info-card__icon" }}
      <div class="info-card__body">
        {{{ markdown (filecontent "client/src/site__aia001/components/generic-page/paragraph.md") }}}
        <a class="button button--secondary info-card__cta"
          href="@Model.ActionHref">@Model.ActionLabel</a>
      </div>
    </div>
  </div>
</div>

.info-card--theme-black - Dark themed info card

Styleguide AIA001.Components.InfoCard
*/
.info-card {
  background: #f4f3f1;
  border: 1px solid #d0ccc4;
  color: #373533;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 1.875rem; }

.info-card__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin: 1.875rem; }

.info-card__header {
  border-bottom: 1px solid #d0ccc4; }

.info-card__heading {
  color: #d0ccc4;
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-style: normal;
  font-size: 1.5rem;
  margin: 0;
  padding: 0.3125rem 0; }

.info-card__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row; }

.info-card__icon {
  width: 3rem;
  height: 3rem;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  margin-top: 2.0625rem;
  margin-right: 1.5rem; }

.info-card__body {
  width: 100%;
  -webkit-box-flex: 0;
      -ms-flex: 0 1 100%;
          flex: 0 1 100%;
  margin-top: 1.375rem;
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 0.875rem; }
  .info-card__body .button {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    width: 100%;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    background: transparent;
    color: #d0ccc4;
    border: 2px solid currentColor;
    margin-top: 1.875rem; }

.info-card--theme-black {
  background: #4a4845;
  border: #4a4845; }
  .info-card--theme-black .info-card__heading {
    color: white; }
  .info-card--theme-black .info-card__icon {
    color: #aca8a4; }
  .info-card--theme-black .info-card__body {
    color: #aca8a4; }
  .info-card--theme-black .info-card__body .button {
    background: transparent;
    text-decoration: none; }
    .info-card--theme-black .info-card__body .button, .info-card--theme-black .info-card__body .button:hover, .info-card--theme-black .info-card__body .button:active {
      background: transparent; }
    .info-card--theme-black .info-card__body .button, .info-card--theme-black .info-card__body .button:active {
      color: #d7d3cd;
      border: 2px solid #d7d3cd; }

.info-card--theme-blue {
  background-color: #5e64f9;
  border-color: #292d84; }
  .info-card--theme-blue .info-card__heading {
    color: black; }
  .info-card--theme-blue .info-card__icon {
    color: #292d84; }
  .info-card--theme-blue .info-card__body {
    color: #292d84; }
  .info-card--theme-blue .info-card__body .button {
    background-color: transparent;
    text-decoration: none; }
    .info-card--theme-blue .info-card__body .button, .info-card--theme-blue .info-card__body .button:hover, .info-card--theme-blue .info-card__body .button:active {
      background-color: transparent; }
    .info-card--theme-blue .info-card__body .button, .info-card--theme-blue .info-card__body .button:active {
      color: #292d84;
      border-color: #292d84; }

.info-card--theme-yellow {
  background-color: #fea627;
  border-color: #b56000; }
  .info-card--theme-yellow .info-card__heading {
    color: black; }
  .info-card--theme-yellow .info-card__icon {
    color: #b56000; }
  .info-card--theme-yellow .info-card__body {
    color: #b56000; }
  .info-card--theme-yellow .info-card__body .button {
    background-color: transparent;
    text-decoration: none; }
    .info-card--theme-yellow .info-card__body .button, .info-card--theme-yellow .info-card__body .button:hover, .info-card--theme-yellow .info-card__body .button:active {
      background-color: transparent; }
    .info-card--theme-yellow .info-card__body .button, .info-card--theme-yellow .info-card__body .button:active {
      color: #b56000;
      border-color: #b56000; }

.info-card--theme-red {
  background-color: #f15f5e;
  border-color: #ae3434; }
  .info-card--theme-red .info-card__heading {
    color: black; }
  .info-card--theme-red .info-card__icon {
    color: #ae3434; }
  .info-card--theme-red .info-card__body {
    color: #ae3434; }
  .info-card--theme-red .info-card__body .button {
    background-color: transparent;
    text-decoration: none; }
    .info-card--theme-red .info-card__body .button, .info-card--theme-red .info-card__body .button:hover, .info-card--theme-red .info-card__body .button:active {
      background-color: transparent; }
    .info-card--theme-red .info-card__body .button, .info-card--theme-red .info-card__body .button:active {
      color: #ae3434;
      border-color: #ae3434; }

.info-card--theme-green {
  background-color: #72d89b;
  border-color: #005036; }
  .info-card--theme-green .info-card__heading {
    color: white; }
  .info-card--theme-green .info-card__icon {
    color: #85e6ac; }
  .info-card--theme-green .info-card__body {
    color: #85e6ac; }
  .info-card--theme-green .info-card__body .button {
    background-color: transparent;
    text-decoration: none; }
    .info-card--theme-green .info-card__body .button, .info-card--theme-green .info-card__body .button:hover, .info-card--theme-green .info-card__body .button:active {
      background-color: transparent; }
    .info-card--theme-green .info-card__body .button, .info-card--theme-green .info-card__body .button:active {
      color: #85e6ac;
      border-color: #85e6ac; }

.info-card--theme-teal {
  background-color: #10a3b2;
  border-color: #006f7a; }
  .info-card--theme-teal .info-card__heading {
    color: black; }
  .info-card--theme-teal .info-card__icon {
    color: #006f7a; }
  .info-card--theme-teal .info-card__body {
    color: #006f7a; }
  .info-card--theme-teal .info-card__body .button {
    background-color: transparent;
    text-decoration: none; }
    .info-card--theme-teal .info-card__body .button, .info-card--theme-teal .info-card__body .button:hover, .info-card--theme-teal .info-card__body .button:active {
      background-color: transparent; }
    .info-card--theme-teal .info-card__body .button, .info-card--theme-teal .info-card__body .button:active {
      color: #006f7a;
      border-color: #006f7a; }

.info-card--theme-grey {
  background-color: #aca8a4;
  border-color: #4a4845; }
  .info-card--theme-grey .info-card__heading {
    color: white; }
  .info-card--theme-grey .info-card__icon {
    color: grey; }
  .info-card--theme-grey .info-card__body {
    color: grey; }
  .info-card--theme-grey .info-card__body .button {
    background-color: transparent;
    text-decoration: none; }
    .info-card--theme-grey .info-card__body .button, .info-card--theme-grey .info-card__body .button:hover, .info-card--theme-grey .info-card__body .button:active {
      background-color: transparent; }
    .info-card--theme-grey .info-card__body .button, .info-card--theme-grey .info-card__body .button:active {
      color: grey;
      border-color: grey; }

.info-card--theme-sand {
  background-color: #f5ebcd;
  border-color: #ad944b; }
  .info-card--theme-sand .info-card__heading {
    color: white; }
  .info-card--theme-sand .info-card__icon {
    color: #fff8e6; }
  .info-card--theme-sand .info-card__body {
    color: #fff8e6; }
  .info-card--theme-sand .info-card__body .button {
    background-color: transparent;
    text-decoration: none; }
    .info-card--theme-sand .info-card__body .button, .info-card--theme-sand .info-card__body .button:hover, .info-card--theme-sand .info-card__body .button:active {
      background-color: transparent; }
    .info-card--theme-sand .info-card__body .button, .info-card--theme-sand .info-card__body .button:active {
      color: #fff8e6;
      border-color: #fff8e6; }

.info-card--theme-alert {
  background-color: #fb8d60;
  border-color: #b94d20; }
  .info-card--theme-alert .info-card__heading {
    color: black; }
  .info-card--theme-alert .info-card__icon {
    color: #b94d20; }
  .info-card--theme-alert .info-card__body {
    color: #b94d20; }
  .info-card--theme-alert .info-card__body .button {
    background-color: transparent;
    text-decoration: none; }
    .info-card--theme-alert .info-card__body .button, .info-card--theme-alert .info-card__body .button:hover, .info-card--theme-alert .info-card__body .button:active {
      background-color: transparent; }
    .info-card--theme-alert .info-card__body .button, .info-card--theme-alert .info-card__body .button:active {
      color: #b94d20;
      border-color: #b94d20; }

.info-card--theme-coldgrey {
  background-color: #313236;
  border-color: #1d1d1f; }
  .info-card--theme-coldgrey .info-card__heading {
    color: white; }
  .info-card--theme-coldgrey .info-card__icon {
    color: #3a3c41; }
  .info-card--theme-coldgrey .info-card__body {
    color: #3a3c41; }
  .info-card--theme-coldgrey .info-card__body .button {
    background-color: transparent;
    text-decoration: none; }
    .info-card--theme-coldgrey .info-card__body .button, .info-card--theme-coldgrey .info-card__body .button:hover, .info-card--theme-coldgrey .info-card__body .button:active {
      background-color: transparent; }
    .info-card--theme-coldgrey .info-card__body .button, .info-card--theme-coldgrey .info-card__body .button:active {
      color: #3a3c41;
      border-color: #3a3c41; }

/*
Hero Area

A space (typically at the top of the page) for a title and background image.

Sometimes filled with content(category portal pages, error pages), or widgets (homepage search)

Weight: 100

Styleguide AIA001.Components.Hero
*/
/*
Hero Block

Markup:
<div class="hero u-cms-background u-cms-background--cover {{ modifier_class}}"
     id="{{ default id 'hero__HERO_ID' }}">
  <div class="hero__container">
    {{#if @partial-block}}
      {{> @partial-block}}
    {{else}}
      {{> Core.Styleguide.Box
          modifier_class="styleguide-box--skyblue"
          width="100%"
          height="272px" }}
    {{/if}}
  </div>
</div>
{{> AIA001.Utilities.CmsBackgroundImage
  id=(default id 'hero__HERO_ID')
  backgroundImage=(concat "https://source.unsplash.com/random" "?sig=" (default id (cuid)))
}}

Styleguide AIA001.Components.Hero.Block
*/
.hero {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  min-height: 11.25rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative; }

.hero:before {
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: black;
  opacity: 0.5; }

.hero__container {
  position: relative;
  z-index: 2;
  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-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  max-width: 72.5rem;
  width: 100%;
  padding: 3.9375rem 1.875rem; }

.hero--centered
.hero__container {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }

/*
Hero Block (with content)

Markup:
{{#> AIA001.Components.Hero.Block
     modifier_class=(concat
        "hero--with-content"
        " "
        modifier_class
      )}}
  <div class="hero__heading">
    {{> AIA001.Components.SvgSprite
        classes="hero__icon"
        modifier_class=(default headingSpriteName 'practice-icon')
    }}
    <span class="hero__header">{{ default title 'Hero Header'}}</span>
  </div>
  {{#if @partial-block}}
  <div class="hero__content">
      {{> @partial-block}}
  </div>
  {{/if}}
{{/AIA001.Components.Hero.Block}}

.hero--theme-red - Red coloured Icon
.hero--theme-blue - Blue coloured icon
.hero--theme-yellow - Yellow coloured icon
.hero--theme-green - Green coloured icon
.hero--theme-sand - Sand coloured icon
.hero--theme-alert - Alert coloured icon

Styleguide AIA001.Components.Hero.WithContent
*/
.hero__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }

.hero__icon {
  width: 2.8125rem;
  height: 2.8125rem;
  margin-right: 0.9375rem;
  color: rgba(255, 255, 255, 0.75); }

.hero__heading {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-style: normal;
  margin: 0;
  font-size: 1.75rem;
  line-height: 1.75rem;
  color: white; }

.hero__content {
  width: 100%;
  margin-top: 1.5625rem;
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 1rem;
  color: white;
  line-height: 1.625rem; }
  .hero__content b, .hero__content strong {
    font-family: din, Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-style: normal; }

/*
Hero Block (with content on left side)

Markup:
{{#> AIA001.Components.Hero.WithContent
    modifier_class=(concat
      "hero--content-left"
      " "
      modifier_class
    ) }}
  <strong>We are experiencing an internal server problem.</strong>
  <p>This means we’re unable to display the page you’ve requested.
  We are working to fix the problem. Please try again later.</p>
{{/AIA001.Components.Hero.WithContent}}

.hero--theme-red - Red coloured Icon
.hero--theme-blue - Blue coloured icon
.hero--theme-yellow - Yellow coloured icon
.hero--theme-green - Green coloured icon
.hero--theme-sand - Sand coloured icon
.hero--theme-alert - Alert coloured icon

Styleguide AIA001.Components.Hero.WithContentLeft
*/
.hero {
  width: 100%;
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none; }

.hero--content-left
.hero__content {
  max-width: 21.3125rem; }

.hero--theme-blue .hero__icon {
  color: #5e64f9; }

.hero--theme-yellow .hero__icon {
  color: #fea627; }

.hero--theme-red .hero__icon {
  color: #f15f5e; }

.hero--theme-green .hero__icon {
  color: #72d89b; }

.hero--theme-teal .hero__icon {
  color: #10a3b2; }

.hero--theme-grey .hero__icon {
  color: #aca8a4; }

.hero--theme-sand .hero__icon {
  color: #f5ebcd; }

.hero--theme-alert .hero__icon {
  color: #fb8d60; }

.hero--theme-coldgrey .hero__icon {
  color: #313236; }

@media (min-width: 48.0625em) {
  .hero {
    min-height: 17rem; }
  .hero__icon {
    width: 5.3125rem;
    height: 5.3125rem;
    margin-right: 1.875rem; }
  .hero__heading {
    font-family: din, Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-style: normal;
    font-size: 2.625rem;
    line-height: 2.625rem; }
  .hero__content {
    margin-top: 1.1875rem;
    font-family: din, Helvetica, Arial, sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 1.25rem;
    line-height: 1.75rem; } }

/*
Tooltip

Markup:
<span class="tooltip {{modifier_class}} {{classes}}"
      id="tooltip__{{default id 'TOOLTIP_UNIQUE_ID'}}"
  data-anchor-element
  data-anchor-element--target="#tooltip-trigger__{{default id 'TOOLTIP_UNIQUE_ID'}}"
  data-anchor-element--placement="bottom">
  <span class="tooltip__container">
    <span class="tooltip__header">
      <span class="tooltip__heading">{{{ default title 'Tooltip Title' }}}</span>
      <button class="tooltip__close-button"
            data-remove-element-classes
            data-remove-element-classes--on="click"
            data-remove-element-classes--target="(parent) .tooltip--is-open"
            data-remove-element-classes--classes="tooltip--is-open">
      {{> AIA001.Components.SvgSprite
          classes="tooltip__close-icon"
          modifier_class="close-500" }}
      </button>
    </span>
    <span class="tooltip__content">
      {{{ markdown (default (filecontent 'client/src/site__aia001/components/generic-page/paragraph.md') (lipsum 24)) }}}
    </span>
  </span>
</span>

.tooltip--is-open - an open tooltip
.tooltip--rounded.tooltip--is-open - an open rounded tooltip

Styleguide AIA001.Components.Tooltips
*/
/*
Tooltip Trigger

Markup:
<button class="note-reference tooltip-trigger u-focus u-focus--blue-light"
        id="tooltip-trigger__{{default id 'TOOLTIP_UNIQUE_ID'}}"
        data-toggle-element-classes
        data-toggle-element-classes--on="click"
        data-toggle-element-classes--target="#tooltip__{{default id 'TOOLTIP_UNIQUE_ID'}}"
        data-toggle-element-classes--to="tooltip--is-open"
        data-toggle-element-classes--ignore-child-events="true"
        data-remove-element-classes
        data-remove-element-classes--on="click"
        data-remove-element-classes--target=".tooltip--is-open"
        data-remove-element-classes--classes="tooltip--is-open">
  {{ default title 'note reference text' }}
</button>

Styleguide AIA001.Components.Tooltips.Trigger
*/
/*
Tooltip &amp; Reference usage

Markup:
{{#> AIA001.Page.Generic
    modifier_class="note-page note-page--offcanvas-subnav@largeonly"}}
    <div class="c-page__content page__content note-page__content">
      <p>Cultural awareness in practice is relevant to all scales of practice. By undertaking cultural awareness training, individuals and practices can learn more about Aboriginal and Torres Strait Islander peoples and cultures, examples of Indigenous place-making strategies, legislation related to Indigenous place-making and gain an understanding of cultural protocols. Protocols for recognising {{> AIA001.Components.Tooltips.Trigger title="Traditional Owners" id="1"}}{{> AIA001.Components.Tooltips title="Traditional Owners" id="1"}} can be developed and implemented at a practice level for relevant architecture events and public forums.</p>
      {{{ markdown (default (filecontent 'client/src/site__aia001/components/generic-page/paragraph.md') (lipsum 24)) }}}
      {{{ markdown (default (filecontent 'client/src/site__aia001/components/generic-page/paragraph.md') (lipsum 24)) }}}
      <p>Cultural awareness in practice is relevant to all scales of practice. By undertaking cultural awareness training, individuals and practices can learn more about Aboriginal and Torres Strait Islander peoples and cultures, examples of Indigenous place-making strategies, legislation related to Indigenous place-making and gain an understanding of cultural protocols. Protocols for recognising {{> AIA001.Components.Tooltips.Trigger title="Traditional Owners" id="2"}}{{> AIA001.Components.Tooltips title="Traditional Owners" id="2"}} can be developed and implemented at a practice level for relevant architecture events and public forums.</p>
  </div>
{{/ AIA001.Page.Generic }}

Styleguide AIA001.Components.Tooltips.Usage
*/
.tooltip-trigger {
  cursor: pointer;
  position: relative;
  outline: 0;
  display: inline;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  color: inherit; }

.tooltip {
  font-family: "Adelle", Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.125rem;
  display: none;
  width: 18.75rem;
  min-height: 11.875rem;
  z-index: 600;
  cursor: default;
  position: absolute; }

.tooltip__container {
  text-align: left;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  outline: 0;
  -webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.15);
          box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.15); }

.tooltip--with-pointer .tooltip__container:before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
          transform: translateX(-50%) translateY(-50%) rotate(45deg);
  width: 0.75rem;
  height: 1rem; }

.tooltip--is-open {
  display: inline-block; }

.tooltip__heading {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-style: normal;
  font-size: 0.875rem;
  margin-bottom: 0;
  margin-right: 2rem; }

.tooltip__close-button {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: transparent;
  border: 0;
  cursor: pointer; }

.tooltip__close-icon {
  width: 1.375rem;
  height: 1.375rem; }

.tooltip__content {
  margin-top: 0.9375rem;
  margin-bottom: 0.9375rem; }
  .tooltip__content a,
  .tooltip__content a:link,
  .tooltip__content a:visited {
    color: #5e64f9;
    text-decoration: none; }
  .tooltip__content p:first-child {
    margin-top: 0; }

.tooltip__reference-link {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 0.75rem;
  color: #5e64f9; }

.tooltip--rounded .tooltip__container {
  border-radius: 8px; }

.tooltip .tooltip__container,
.tooltip--theme-sand .tooltip__container {
  background-color: #fff8e6;
  -webkit-box-shadow: 0 0 0 1px #f5ebcd, 0 15px 10px -10px rgba(0, 0, 0, 0.15);
          box-shadow: 0 0 0 1px #f5ebcd, 0 15px 10px -10px rgba(0, 0, 0, 0.15);
  padding: 1.25rem; }
  .tooltip .tooltip__container .tooltip__close-icon,
  .tooltip--theme-sand .tooltip__container .tooltip__close-icon {
    color: #ad944b; }
  .tooltip .tooltip__container:before,
  .tooltip--theme-sand .tooltip__container:before {
    background-color: #fff8e6;
    -webkit-box-shadow: -1px -1px 0 0 #f5ebcd;
            box-shadow: -1px -1px 0 0 #f5ebcd;
    z-index: 10; }

/*
Accordion Item

Markup:

<div class="c-tabs-container tabs-container">
	<ul class="c-tab-list tab-list" role="tablist">
		<li class="c-tab-list__item tab-list__item" role="presentation">
			<a class="c-tab-list__item-link tab-list__item-link" role="tab" href="#section1" id="tab1" aria-selected="true">
				<span class="c-tab-list__item-link-icon tab-list__item-link-icon">Icon</span>
				<span class="c-tab-list__item-link-label tab-list__item-link-label">Section 1</span>
			</a>
		</li>
		<li class="c-tab-list__item tab-list__item" role="presentation">
			<a class="c-tab-list__item-link tab-list__item-link" role="tab" href="#section2" id="tab2">
				<span class="c-tab-list__item-link-icon tab-list__item-link-icon">Icon</span>
				<span class="c-tab-list__item-link-label tab-list__item-link-label">Section 2</span>
			</a>
		</li>
	</ul>
	<section class="c-tab-panel tab-panel" role="tabpanel" id="section1" aria-labelledby="tab1">
		Content 1
	</section>
	<section class="c-tab-panel tab-panel" role="tabpanel" id="section2" aria-labelledby="tab2" hidden>
		content 2
	</section>
</div>

Styleguide AIA001.Components.Tabs
*/
.c-tabs-container {
  display: block;
  width: 100%; }

.c-tabs-container__label {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-style: normal;
  font-size: 1rem;
  text-transform: uppercase;
  margin-bottom: 1.3125rem;
  padding-left: 15px;
  padding-top: 1rem; }

.c-tab-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -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;
  margin: 0;
  padding: 0;
  list-style-type: none; }

.c-tab-list--2col .c-tab-list__item {
  -ms-flex-preferred-size: 50%;
      flex-basis: 50%; }

.c-tab-list__item {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  margin: 0;
  padding: 0;
  list-style-type: none; }

.c-tab-list__item-link {
  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;
  text-align: center; }

.c-tab-list__item-link-icon svg {
  width: 30px;
  height: 30px; }

.tab-list__item-link {
  position: relative;
  text-decoration: none;
  padding: 10px 10px 15px 10px;
  background-color: #f4f3f1;
  -webkit-transition: 0.2s all ease-in-out;
  transition: 0.2s all ease-in-out;
  outline: 0; }
  .tab-list__item-link:hover, .tab-list__item-link:focus {
    background-color: #e9e7e3; }

.tab-list__item-link-icon {
  fill: #aca8a4;
  color: #aca8a4; }

.tab-list__item-link-label {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 1rem;
  color: #4a4845; }

.tab-list__item-link[aria-selected="true"] {
  background-color: #72d89b; }
  .tab-list__item-link[aria-selected="true"]:after {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(114, 216, 155, 0);
    border-top-color: #72d89b;
    border-width: 14px;
    margin-left: -14px; }
  .tab-list__item-link[aria-selected="true"] .tab-list__item-link-icon {
    fill: #005036;
    color: #005036; }
  .tab-list__item-link[aria-selected="true"] .tab-list__item-link-label {
    color: #005036; }

@media (min-width: 48.0625em) {
  .c-tabs-container__label {
    padding-left: 0; }
  .c-tab-list__item-link-icon svg {
    width: 40px;
    height: 40px; }
  .tab-list__item:first-child .tab-list__item-link {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px; }
  .tab-list__item:last-child .tab-list__item-link {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px; }
  .tab-list__item-link {
    padding: 20px 10px 25px 10px; } }

.figure-block__image {
  background-color: #f2f2f2; }

.figure-block__image img {
  margin: 0;
  display: block;
  line-height: 1;
  width: 100%; }

.figure-block__caption {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 0.75rem;
  color: #4a4845;
  line-height: 1.125rem;
  background-color: #F9F9F9;
  padding: 10px 15px; }

@media (min-width: 48.0625em) {
  .figure-block {
    max-width: calc(50% - 30px); }
  .figure-block--left {
    float: left;
    margin: 5px 30px 20px 0; }
  .figure-block--right {
    float: right;
    margin: 5px 0 20px 30px; } }

/*
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 AIA001.Components.SiteLayout
*/
.site-container__content {
  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-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1; }

/*
Site Header

Markup:
<header class="c-site-header site-header">
  {{> AIA001.Components.Search.GlobalSearch
      modifier_class="global-search--moves global-search--pushes"
      id="GLOBAL_SEARCH_ID" }}
  {{> AIA001.Components.SiteHeader.Navigation obscurable=true }}
  {{> AIA001.Components.SiteHeader.SessionNavigation }}
</header>

Weight: 40

Styleguide AIA001.Components.SiteHeader
*/
/*
Site Header (logo only)

Markup:
<header class="c-site-header site-header">
  {{> AIA001.Components.SiteHeader.Navigation
      navigation=false
      session=false
      actions=false }}
</header>

Weight: 40

Styleguide AIA001.Components.SiteHeaderLogoOnly
*/
.site-header {
  z-index: 700;
  position: relative; }

.site-header__navigation {
  width: 100%; }

/*
Navigation

Markup:
<div class="c-navigation navigation"
  data-navigation-obscurable>
  <div class="c-navigation__container navigation__container">
    <div class="c-navigation__group c-navigation__group--logo navigation__group navigation__group--logo">
      <a class="c-navigation__logo-link navigation__logo-link" href="/">
      {{> AIA001.Components.SvgSprite
          classes="c-navigation__logo-image navigation__logo-image"
          modifier_class="aia-practice-notes-logo" }}
      </a>
    </div>
    {{#if (ne navigation false) }}
    <div class="c-navigation__group c-navigation__group--navigation navigation__group 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 navigation__item navigation__item--level1 navigation__item--theme-blue"
          data-navigation--intersecting-item>
          {{> AIA001.Components.SiteHeader.NavigationItem
              title="Practice"
              id="practice"
              colour="blue"
              spriteName="practice-icon"
              children=true
            }}
        </li>
        <li
          class="c-navigation__item c-navigation__item--level1 navigation__item navigation__item--level1 navigation__item--theme-red"
          data-navigation--intersecting-item>
          {{> AIA001.Components.SiteHeader.NavigationItem
              title="Project"
              id="project"
              colour="red"
              spriteName="project-icon"
              children=true}}
        </li>
        <li class="c-navigation__item c-navigation__item--level1 navigation__item navigation__item--level1 navigation__item--theme-orange"
          data-navigation--intersecting-item>
          {{> AIA001.Components.SiteHeader.NavigationItem
              title="Resource"
              id="resource"
              colour="yellow"
              spriteName="resource-icon"
              children=true}}
        </li>
        <li class="c-navigation__item c-navigation__item--level1 navigation__item navigation__item--level1 navigation__item--theme-green"
          data-navigation--intersecting-item>
          {{> AIA001.Components.SiteHeader.NavigationItem
              title="Notepacks"
              id="notepacks"
              colour="green"
              spriteName="notepak-icon"
              children=true}}
        </li>
        <li
          class="c-navigation__item c-navigation__item--level1 navigation__item navigation__item--level1"
          data-navigation--intersecting-item>
          <a href="#"
            class="c-navigation__link c-navigation__link--level1 navigation__link navigation__link--level1">
            <span class="c-navigation__link-text navigation__link-text">Subscribe</span>
            <span class="c-navigation__toggle c-navigation__toggle--level1 navigation__toggle navigation__toggle--level1">
              {{> AIA001.Components.SvgSprite
                  modifier_class="arrow-down-500"
                  classes="c-navigation__toggle-icon navigation__toggle-icon navigation__toggle-icon--open"}}
              {{> AIA001.Components.SvgSprite
                  modifier_class="close-500"
                  classes="c-navigation__toggle-icon navigation__toggle-icon navigation__toggle-icon--close"}}
            </span>
          </a>
        </li>
        <li class="c-navigation__item c-navigation__item--level1 navigation__item navigation__item--level1"
            data-navigation--obscured-items-toggle
            data-remove-element-classes
            data-remove-element-classes--target=".c-navigation__item"
            data-remove-element-classes--classes="c-navigation__item--is-active"
            data-toggle-element-classes
            data-toggle-element-classes--target="(parent) .navigation"
            data-toggle-element-classes--to="c-navigation--mobile-container--open">
          <a href="#"
            class="c-navigation__obscured-toggle c-navigation__link c-navigation__link--level1 navigation__obscured-toggle navigation__link navigation__link--level1">
            <span class="navigation__link-text">More…</span>
            <span class="navigation__link-icon">
              {{> AIA001.Components.SvgSprite
                  modifier_class="arrow-down-500"
                  classes="c-navigation__toggle-icon navigation__toggle-icon navigation__toggle-icon--open"}}
              {{> AIA001.Components.SvgSprite
                  modifier_class="close-500"
                  classes="c-navigation__toggle-icon navigation__toggle-icon navigation__toggle-icon--close"}}
            </span>
          </a>
        </li>
      </ul>
    </div>
    <div class="c-navigation__group c-navigation__group--actions navigation__group navigation__group--actions">
      {{> AIA001.Components.Search.GlobalSearchToggle
          globalSearchToggles = true
          modifier_class = "navigation__action-button navigation__action-button--toggles-global-search"}}
      {{> AIA001.Components.SiteHeader.HamburgerButton
          modifier_class = "navigation__action-button navigation__action-button--toggles-obscured-items" }}
    </div>
    {{/if}}
  </div>
  {{#if (ne navigation false) }}
  <div class="c-navigation__container c-navigation__container--mobile navigation__container--mobile">
    <ul class="c-navigation__items navigation__items"
        data-navigation--obscured-items>
    </ul>
    {{> AIA001.Components.SiteHeader.SessionNavigation }}
  </div>
  {{/if}}
</div>

Styleguide AIA001.Components.SiteHeader.Navigation
*/
/*
Navigation Item

Markup:
<a href="#"
    class="c-navigation__link c-navigation__link--level1 navigation__link navigation__link--level1 has-children"
    data-remove-element-classes
    data-remove-element-classes--on="ToggleElementClasses.before"
    data-remove-element-classes--target=".c-navigation__item,.site-header"
    data-remove-element-classes--classes="c-navigation__item--is-active,site-header--global-search-is-open"
    data-toggle-element-classes
    data-toggle-element-classes--target="(parent) .c-navigation__item"
    data-toggle-element-classes--to="c-navigation__item--is-active">
  <span class="c-navigation__link-text navigation__link-text">{{ default title 'Navigation Title'}}</span>
  <span class="c-navigation__toggle c-navigation__toggle--level1 navigation__toggle navigation__toggle--level1">
    {{> AIA001.Components.SvgSprite
        modifier_class="arrow-down-500"
        classes="c-navigation__toggle-icon navigation__toggle-icon navigation__toggle-icon--open"}}
    {{> AIA001.Components.SvgSprite
        modifier_class="close-500"
        classes="c-navigation__toggle-icon navigation__toggle-icon navigation__toggle-icon--close"}}
    {{> AIA001.Components.SvgSprite
        modifier_class="plus"
        classes="c-navigation__toggle-icon navigation__toggle-icon navigation__toggle-icon--when-obscured navigation__toggle-icon--open"}}
    {{> AIA001.Components.SvgSprite
        modifier_class="minus"
        classes="c-navigation__toggle-icon navigation__toggle-icon navigation__toggle-icon--when-obscured navigation__toggle-icon--close"}}
  </span>
</a>
{{#if children }}
{{> AIA001.Components.SiteHeader.MegaMenu
    id=(concat "MEGA_MENU_" title)
    title=(default title 'Navigation Title')
    category_sprite=(default spriteName 'practice-icon')
    modifier_class=(concat
      'c-navigation-mega--floating '
      (concat 'navigation-mega--theme-' (default colour 'blue'))
    ) }}
{{/if}}

Styleguide AIA001.Components.SiteHeader.NavigationItem
*/
.navigation {
  background-color: #4a4845;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row; }

.navigation__container {
  height: 3.25rem;
  max-width: 1160px;
  width: 100%;
  margin: 0 0 0 0.9375rem; }

.navigation__container--mobile {
  background-color: transparent;
  height: initial; }

.navigation__group--logo {
  margin-right: 1.875rem; }

.navigation__logo-link:focus {
  outline-color: orange; }

.navigation__logo-link {
  color: #d7d3cd;
  margin-left: 0; }

.navigation__logo-image {
  width: 8.0625rem;
  height: 1.6875rem; }

.navigation__tagline {
  display: none; }

.navigation__group--actions {
  margin-right: 0; }

.navigation__action-button {
  color: #7c7871; }

.navigation__action-button:hover,
.navigation__action-button:focus {
  color: white; }

.site-header--global-search-is-open
.navigation__action-button--toggles-global-search {
  color: white; }

.navigation__item {
  position: relative; }

.navigation__container--mobile .navigation__items {
  background: #4a4845; }

.navigation__link {
  text-decoration: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between; }
  .navigation__link:hover {
    text-decoration: underline; }

.navigation__link-text {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-style: normal; }

.navigation__toggle {
  display: none;
  width: 1.125rem;
  height: 1.125rem;
  margin-left: 0.25rem;
  border-bottom-width: 0.25rem;
  border-bottom-style: solid;
  border-bottom-color: transparent; }

.navigation__obscured-toggle .navigation__toggle,
.navigation__link.has-children .navigation__toggle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

.navigation__toggle-icon {
  fill: #4a4845;
  width: 1rem;
  height: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

.navigation__toggle-icon--close {
  display: none;
  color: white; }
  .c-navigation__item--is-active .navigation__toggle-icon--close,
  .c-navigation--mobile-container--open .navigation__obscured-toggle .navigation__toggle-icon--close {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }

.navigation__toggle-icon--open {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }
  .c-navigation__item--is-active .navigation__toggle-icon--open,
  .c-navigation--mobile-container--open .navigation__obscured-toggle .navigation__toggle-icon--open {
    display: none; }

.c-navigation__container:not(.c-navigation__container--mobile) .navigation__toggle-icon--when-obscured {
  display: none; }

.c-navigation__container.c-navigation__container--mobile .navigation__toggle-icon {
  display: none; }

.c-navigation__container.c-navigation__container--mobile .c-navigation__item:not(.c-navigation__item--is-active) .navigation__toggle-icon--when-obscured.navigation__toggle-icon--open {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

.c-navigation__container.c-navigation__container--mobile .c-navigation__item:not(.c-navigation__item--is-active) .navigation__toggle-icon--when-obscured.navigation__toggle-icon--close {
  display: none; }

.c-navigation__container.c-navigation__container--mobile .c-navigation__item--is-active .navigation__toggle-icon--when-obscured.navigation__toggle-icon--close {
  display: none; }

.c-navigation__container.c-navigation__container--mobile .c-navigation__item--is-active .navigation__toggle-icon--when-obscured.navigation__toggle-icon--close {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

.navigation__link--level1 {
  color: #d7d3cd;
  outline: none; }
  .navigation__link--level1:link, .navigation__link--level1:visited {
    text-decoration: none; }
  .navigation__link--level1 .navigation__link-text {
    font-size: 1.125rem;
    text-transform: uppercase;
    border-bottom-width: 0.25rem;
    border-bottom-style: solid;
    border-bottom-color: transparent; }
  .navigation__link--level1 .navigation__toggle--level1 {
    color: #7c7871; }
  .navigation__link--level1:hover .navigation__toggle--level1 {
    color: white; }
  .c-navigation__item--is-active > .navigation__link--level1 {
    color: white; }
    .navigation .c-navigation__item--is-active > .navigation__link--level1:link .navigation__link-text, .navigation .c-navigation__item--is-active > .navigation__link--level1:visited .navigation__link-text {
      border-bottom-style: solid; }
  .navigation .navigation__item--is-current > .navigation__link--level1:link .navigation__link-text, .navigation .navigation__item--is-current > .navigation__link--level1:visited .navigation__link-text {
    border-bottom-style: solid; }
  .navigation__container--mobile .navigation__item--is-current > .navigation__link--level1 .navigation__link-text {
    border-bottom-style: solid;
    text-decoration: none; }
  .navigation .navigation__link--level1 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
    .navigation .navigation__link--level1:hover {
      text-decoration: none; }
      .navigation .navigation__link--level1:hover .navigation__link-text {
        border-bottom-style: solid; }
  .navigation__container--mobile .navigation__link--level1 {
    padding: 0.625rem;
    padding-left: 1.4375rem;
    padding-right: 1rem;
    border-top: 1px solid #7c7871; }
    .navigation__container--mobile .navigation__link--level1:hover {
      text-decoration: none; }

.navigation__obscured-toggle {
  display: none; }

/*
Mega Menu

Markup:
<div class="c-navigation-mega navigation-mega {{modifier_class}} u-cms-background u-cms-background--cover u-cms-background--is-psuedo-before"
  id="{{ default id 'MEGA_MENU_ID' }}">
  <div class="c-navigation-mega__container navigation-mega__container">
    <div class="c-navigation-mega__content navigation-mega__content">
      <div class="c-navigation-mega__overview navigation-mega__overview">
        <div class="c-navigation-mega__header navigation-mega__header">
          <h2 class="c-navigation-mega__title navigation-mega__title">
            <a class="navigation-mega__title-link u-focus u-focus--white u-focus--opaque u-focus--rounded"
               href="#">
              {{> AIA001.Components.SvgSprite
                modifier_class=(default category_sprite 'practice-icon')
                classes="c-navigation-mega__title-icon navigation-mega__title-icon" }}
              <span class="navigation-mega__title-text">{{ default title 'Title' }}</span>
              {{> AIA001.Components.SvgSprite
                modifier_class='link-arrow-minor-500'
                classes="c-navigation-mega__title-navigation-icon navigation-mega__title-navigation-icon" }}
            </a>
          </h2>
        </div>
        <div class="c-navigation-mega__overview-content navigation-mega__overview-content">
          <p>Guides and advice on the day-to-day running of a successful architecture practice, from business resources to legal and ethical guides</p>
        </div>
        <div class="c-navigation-mega__action-buttons navigation-mega__action-buttons">
        </div>
      </div>
      <nav class="c-navigation-mega__links-container navigation-mega__links-container">
        <ul class="c-navigation-mega__links navigation-mega__links">
            <li class="c-navigation-mega__link-item navigation-mega__link-item">
              <a class="c-navigation-mega__link navigation-mega__link u-focus u-focus--white u-focus--opaque u-focus--rounded"
                 href="#">
                {{> AIA001.Components.SvgSprite
                  modifier_class=(default sprite 'link-arrow-minor-500')
                  classes="c-navigation-mega__link-icon navigation-mega__link-icon" }}
                 <span class="c-navigation-mega__link-text navigation-mega__link-text">Electronic document management</span>
              </a>
            </li>
            <li class="c-navigation-mega__link-item navigation-mega__link-item">
              <a class="c-navigation-mega__link navigation-mega__link u-focus u-focus--white u-focus--opaque u-focus--rounded"
                 href="#">
                {{> AIA001.Components.SvgSprite
                  modifier_class=(default sprite 'link-arrow-minor-500')
                  classes="c-navigation-mega__link-icon navigation-mega__link-icon" }}
                 <span class="c-navigation-mega__link-text navigation-mega__link-text">Electronic document management</span>
              </a>
            </li>
            <li class="c-navigation-mega__link-item navigation-mega__link-item">
              <a class="c-navigation-mega__link navigation-mega__link u-focus u-focus--white u-focus--opaque u-focus--rounded"
                 href="#">
                {{> AIA001.Components.SvgSprite
                  modifier_class=(default sprite 'link-arrow-minor-500')
                  classes="c-navigation-mega__link-icon navigation-mega__link-icon" }}
                 <span class="c-navigation-mega__link-text navigation-mega__link-text">Electronic document management</span>
              </a>
            </li>
            <li class="c-navigation-mega__link-item navigation-mega__link-item">
              <a class="c-navigation-mega__link navigation-mega__link u-focus u-focus--white u-focus--opaque u-focus--rounded"
                 href="#">
                {{> AIA001.Components.SvgSprite
                  modifier_class=(default sprite 'link-arrow-minor-500')
                  classes="c-navigation-mega__link-icon navigation-mega__link-icon" }}
                 <span class="c-navigation-mega__link-text navigation-mega__link-text">Electronic document management</span>
              </a>
            </li>
        </ul>
      </nav>
      <button class="c-navigation-mega__close navigation-mega__close"
        data-toggle-element-classes
        data-toggle-element-classes--target="}"
        data-toggle-element-classes--to="c-navigation__link--is-active">
        {{> AIA001.Components.SvgSprite
          modifier_class="close-menu"
          classes="c-navigation-mega__close-icon navigation-mega__close-icon"
        }}
      </button>
    </div>
  </div>
</div>
<style type="text/css">
}:before {
  background-image: url({{{ concat "https://source.unsplash.com/random/720x480" "?sig=" (default id 'MEGA_MENU_ID') }}});
}
</style>

.navigation-mega--theme-blue - Blue theme megamenu
.navigation-mega--theme-red - red theme megamenu
.navigation-mega--theme-green - green theme megamenu
.navigation-mega--theme-yellow - yellow theme megamenu

Styleguide AIA001.Components.SiteHeader.MegaMenu
*/
.navigation-mega {
  border-top: 6px solid #7c7871;
  background-color: #F9F9F9;
  color: #7c7871;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative; }

.navigation-mega:before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  content: ""; }

.navigation-mega__container {
  position: relative;
  z-index: 20;
  margin: 0 0.9375rem;
  max-width: 72.5rem;
  width: 100%; }

.c-navigation-mega--floating {
  -webkit-box-shadow: 0 30px 40px 0 rgba(0, 0, 0, 0.5);
          box-shadow: 0 30px 40px 0 rgba(0, 0, 0, 0.5); }

.c-navigation__item--is-active .c-navigation-mega--floating {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  z-index: 300; }

.navigation-mega__content {
  padding-bottom: 1.4375rem; }

.navigation-mega__title {
  margin-left: 0; }

.navigation-mega__title-icon {
  margin-right: 1rem; }

.navigation-mega__title-link {
  text-decoration: none;
  color: currentColor;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }

.navigation-mega__title-link:focus .navigation-mega__title-icon,
.navigation-mega__title-link:focus .navigation-mega__title-navigation-icon,
.navigation-mega__title-link:hover .navigation-mega__title-icon,
.navigation-mega__title-link:hover .navigation-mega__title-navigation-icon {
  color: white; }

.navigation-mega__title {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-style: normal;
  font-size: 1.25rem; }

.navigation-mega__overview-content {
  font-family: "Adelle", Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 1rem;
  line-height: 1.625rem; }

.navigation-mega__links-column {
  margin: 0;
  padding: 0; }

.navigation-mega__links {
  list-style-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7); }

.navigation-mega__link-item {
  margin-bottom: 0;
  padding-top: 0.3125rem;
  padding-bottom: 1.25rem;
  position: relative; }

.navigation-mega__link {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 1rem;
  margin: 0.25rem;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start; }

.navigation-mega__link:focus .navigation-mega__link-icon,
.navigation-mega__link:hover .navigation-mega__link-icon {
  color: white; }

.navigation-mega__link-text {
  color: #373533; }

.navigation-mega__link-icon {
  color: #7c7871;
  margin-top: 0.1875rem;
  -ms-flex-negative: 0;
      flex-shrink: 0; }

.navigation-mega__close {
  top: 0.9375rem;
  right: 0.9375rem; }

.navigation-mega__close-icon {
  color: #252422;
  width: 1.875rem;
  height: 1.875rem; }

.navigation-mega__link-item.has-children {
  padding-bottom: 0.3125rem;
  margin-bottom: 15px;
  background: rgba(0, 0, 0, 0.15);
  padding-right: 5px; }
  .navigation-mega__link-item.has-children .navigation-mega__link {
    padding-right: 30px; }

.navigation-mega__links--level2 {
  display: none;
  padding-left: 20px; }
  .navigation-mega__links--level2 .navigation-mega__link {
    font-family: din, Helvetica, Arial, sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 0.875rem;
    margin: 0.25rem; }
  .navigation-mega__links--level2 .navigation-mega__link-item {
    padding-bottom: 0; }

.navigation-mega__link-item--is-open .navigation-mega__links--level2 {
  display: block;
  padding-bottom: 10px; }

.navigation-mega__link-item-toggle {
  background: transparent;
  padding: 0;
  width: 26px;
  height: 26px;
  position: absolute;
  right: 6px;
  top: 6px;
  border: none;
  outline: 0; }

.link-item-toggle__icon {
  overflow: hidden; }
  .link-item-toggle__icon .open {
    display: none; }
  .link-item-toggle__icon .closed {
    display: block; }

.navigation-mega__link-item--is-open .open {
  display: block; }

.navigation-mega__link-item--is-open .closed {
  display: none; }

.navigation-mega--theme-blue {
  border-top-color: #5e64f9;
  color: white;
  background-color: #292d84; }
  .navigation-mega--theme-blue:before {
    opacity: 0.25;
    -webkit-filter: grayscale;
            filter: grayscale; }
  .navigation-mega--theme-blue .navigation-mega__link-text {
    color: white; }
  .navigation-mega--theme-blue .navigation-mega__title-icon,
  .navigation-mega--theme-blue .navigation-mega__link-icon,
  .navigation-mega--theme-blue .navigation-mega__close-icon,
  .navigation-mega--theme-blue .navigation-mega__title-navigation-icon {
    color: #5e64f9; }
  .navigation-mega--theme-blue .navigation-mega__close:focus .navigation-mega__close-icon {
    outline: dotted 2px #5e64f9; }
  .navigation-mega--theme-blue .link-item-toggle__icon {
    color: #6e74fc; }

.navigation-mega--theme-yellow {
  border-top-color: #fea627;
  color: white;
  background-color: #b56000; }
  .navigation-mega--theme-yellow:before {
    opacity: 0.25;
    -webkit-filter: grayscale;
            filter: grayscale; }
  .navigation-mega--theme-yellow .navigation-mega__link-text {
    color: white; }
  .navigation-mega--theme-yellow .navigation-mega__title-icon,
  .navigation-mega--theme-yellow .navigation-mega__link-icon,
  .navigation-mega--theme-yellow .navigation-mega__close-icon,
  .navigation-mega--theme-yellow .navigation-mega__title-navigation-icon {
    color: #fea627; }
  .navigation-mega--theme-yellow .navigation-mega__close:focus .navigation-mega__close-icon {
    outline: dotted 2px #fea627; }
  .navigation-mega--theme-yellow .link-item-toggle__icon {
    color: #ffb446; }

.navigation-mega--theme-red {
  border-top-color: #f15f5e;
  color: white;
  background-color: #ae3434; }
  .navigation-mega--theme-red:before {
    opacity: 0.25;
    -webkit-filter: grayscale;
            filter: grayscale; }
  .navigation-mega--theme-red .navigation-mega__link-text {
    color: white; }
  .navigation-mega--theme-red .navigation-mega__title-icon,
  .navigation-mega--theme-red .navigation-mega__link-icon,
  .navigation-mega--theme-red .navigation-mega__close-icon,
  .navigation-mega--theme-red .navigation-mega__title-navigation-icon {
    color: #f15f5e; }
  .navigation-mega--theme-red .navigation-mega__close:focus .navigation-mega__close-icon {
    outline: dotted 2px #f15f5e; }
  .navigation-mega--theme-red .link-item-toggle__icon {
    color: #f4706f; }

.navigation-mega--theme-green {
  border-top-color: #72d89b;
  color: white;
  background-color: #005036; }
  .navigation-mega--theme-green:before {
    opacity: 0.25;
    -webkit-filter: grayscale;
            filter: grayscale; }
  .navigation-mega--theme-green .navigation-mega__link-text {
    color: white; }
  .navigation-mega--theme-green .navigation-mega__title-icon,
  .navigation-mega--theme-green .navigation-mega__link-icon,
  .navigation-mega--theme-green .navigation-mega__close-icon,
  .navigation-mega--theme-green .navigation-mega__title-navigation-icon {
    color: #72d89b; }
  .navigation-mega--theme-green .navigation-mega__close:focus .navigation-mega__close-icon {
    outline: dotted 2px #72d89b; }
  .navigation-mega--theme-green .link-item-toggle__icon {
    color: #85e6ac; }

.navigation-mega--theme-teal {
  border-top-color: #10a3b2;
  color: white;
  background-color: #006f7a; }
  .navigation-mega--theme-teal:before {
    opacity: 0.25;
    -webkit-filter: grayscale;
            filter: grayscale; }
  .navigation-mega--theme-teal .navigation-mega__link-text {
    color: white; }
  .navigation-mega--theme-teal .navigation-mega__title-icon,
  .navigation-mega--theme-teal .navigation-mega__link-icon,
  .navigation-mega--theme-teal .navigation-mega__close-icon,
  .navigation-mega--theme-teal .navigation-mega__title-navigation-icon {
    color: #10a3b2; }
  .navigation-mega--theme-teal .navigation-mega__close:focus .navigation-mega__close-icon {
    outline: dotted 2px #10a3b2; }
  .navigation-mega--theme-teal .link-item-toggle__icon {
    color: #71ebe5; }

.navigation-mega--theme-grey {
  border-top-color: #aca8a4;
  color: white;
  background-color: #4a4845; }
  .navigation-mega--theme-grey:before {
    opacity: 0.25;
    -webkit-filter: grayscale;
            filter: grayscale; }
  .navigation-mega--theme-grey .navigation-mega__link-text {
    color: white; }
  .navigation-mega--theme-grey .navigation-mega__title-icon,
  .navigation-mega--theme-grey .navigation-mega__link-icon,
  .navigation-mega--theme-grey .navigation-mega__close-icon,
  .navigation-mega--theme-grey .navigation-mega__title-navigation-icon {
    color: #aca8a4; }
  .navigation-mega--theme-grey .navigation-mega__close:focus .navigation-mega__close-icon {
    outline: dotted 2px #aca8a4; }
  .navigation-mega--theme-grey .link-item-toggle__icon {
    color: grey; }

.navigation-mega--theme-sand {
  border-top-color: #f5ebcd;
  color: white;
  background-color: #ad944b; }
  .navigation-mega--theme-sand:before {
    opacity: 0.25;
    -webkit-filter: grayscale;
            filter: grayscale; }
  .navigation-mega--theme-sand .navigation-mega__link-text {
    color: white; }
  .navigation-mega--theme-sand .navigation-mega__title-icon,
  .navigation-mega--theme-sand .navigation-mega__link-icon,
  .navigation-mega--theme-sand .navigation-mega__close-icon,
  .navigation-mega--theme-sand .navigation-mega__title-navigation-icon {
    color: #f5ebcd; }
  .navigation-mega--theme-sand .navigation-mega__close:focus .navigation-mega__close-icon {
    outline: dotted 2px #f5ebcd; }
  .navigation-mega--theme-sand .link-item-toggle__icon {
    color: #fff8e6; }

.navigation-mega--theme-alert {
  border-top-color: #fb8d60;
  color: white;
  background-color: #b94d20; }
  .navigation-mega--theme-alert:before {
    opacity: 0.25;
    -webkit-filter: grayscale;
            filter: grayscale; }
  .navigation-mega--theme-alert .navigation-mega__link-text {
    color: white; }
  .navigation-mega--theme-alert .navigation-mega__title-icon,
  .navigation-mega--theme-alert .navigation-mega__link-icon,
  .navigation-mega--theme-alert .navigation-mega__close-icon,
  .navigation-mega--theme-alert .navigation-mega__title-navigation-icon {
    color: #fb8d60; }
  .navigation-mega--theme-alert .navigation-mega__close:focus .navigation-mega__close-icon {
    outline: dotted 2px #fb8d60; }
  .navigation-mega--theme-alert .link-item-toggle__icon {
    color: #fff8f5; }

.navigation-mega--theme-coldgrey {
  border-top-color: #313236;
  color: white;
  background-color: #1d1d1f; }
  .navigation-mega--theme-coldgrey:before {
    opacity: 0.25;
    -webkit-filter: grayscale;
            filter: grayscale; }
  .navigation-mega--theme-coldgrey .navigation-mega__link-text {
    color: white; }
  .navigation-mega--theme-coldgrey .navigation-mega__title-icon,
  .navigation-mega--theme-coldgrey .navigation-mega__link-icon,
  .navigation-mega--theme-coldgrey .navigation-mega__close-icon,
  .navigation-mega--theme-coldgrey .navigation-mega__title-navigation-icon {
    color: #313236; }
  .navigation-mega--theme-coldgrey .navigation-mega__close:focus .navigation-mega__close-icon {
    outline: dotted 2px #313236; }
  .navigation-mega--theme-coldgrey .link-item-toggle__icon {
    color: #3a3c41; }

.navigation__item .navigation__link--level1:focus .navigation__link-text, .navigation__item .navigation__link--level1:hover .navigation__link-text, .navigation__item .navigation__link--level1:active .navigation__link-text, .navigation__item .navigation__link--level1.navigation__link--is-active .navigation__link-text, .navigation__item .navigation__link--level1.navigation__link--is-current .navigation__link-text {
  border-bottom-color: #7c7871; }

.navigation__container:not(.navigation__container--mobile) .navigation__item--theme-blue.c-navigation__item--is-active > .navigation__link--level1 .navigation__link-text, .navigation__container:not(.navigation__container--mobile) .navigation__item--theme-blue.c-navigation__item--is-current > .navigation__link--level1 .navigation__link-text {
  border-bottom-color: #5e64f9; }

.navigation__item--theme-blue > .navigation__link--level1:focus .navigation__link-text, .navigation__item--theme-blue > .navigation__link--level1:hover .navigation__link-text, .navigation__item--theme-blue > .navigation__link--level1:active .navigation__link-text {
  border-bottom-color: #5e64f9; }

.navigation__container:not(.navigation__container--mobile) .navigation__item--theme-yellow.c-navigation__item--is-active > .navigation__link--level1 .navigation__link-text, .navigation__container:not(.navigation__container--mobile) .navigation__item--theme-yellow.c-navigation__item--is-current > .navigation__link--level1 .navigation__link-text {
  border-bottom-color: #fea627; }

.navigation__item--theme-yellow > .navigation__link--level1:focus .navigation__link-text, .navigation__item--theme-yellow > .navigation__link--level1:hover .navigation__link-text, .navigation__item--theme-yellow > .navigation__link--level1:active .navigation__link-text {
  border-bottom-color: #fea627; }

.navigation__container:not(.navigation__container--mobile) .navigation__item--theme-red.c-navigation__item--is-active > .navigation__link--level1 .navigation__link-text, .navigation__container:not(.navigation__container--mobile) .navigation__item--theme-red.c-navigation__item--is-current > .navigation__link--level1 .navigation__link-text {
  border-bottom-color: #f15f5e; }

.navigation__item--theme-red > .navigation__link--level1:focus .navigation__link-text, .navigation__item--theme-red > .navigation__link--level1:hover .navigation__link-text, .navigation__item--theme-red > .navigation__link--level1:active .navigation__link-text {
  border-bottom-color: #f15f5e; }

.navigation__container:not(.navigation__container--mobile) .navigation__item--theme-green.c-navigation__item--is-active > .navigation__link--level1 .navigation__link-text, .navigation__container:not(.navigation__container--mobile) .navigation__item--theme-green.c-navigation__item--is-current > .navigation__link--level1 .navigation__link-text {
  border-bottom-color: #72d89b; }

.navigation__item--theme-green > .navigation__link--level1:focus .navigation__link-text, .navigation__item--theme-green > .navigation__link--level1:hover .navigation__link-text, .navigation__item--theme-green > .navigation__link--level1:active .navigation__link-text {
  border-bottom-color: #72d89b; }

.navigation__container:not(.navigation__container--mobile) .navigation__item--theme-teal.c-navigation__item--is-active > .navigation__link--level1 .navigation__link-text, .navigation__container:not(.navigation__container--mobile) .navigation__item--theme-teal.c-navigation__item--is-current > .navigation__link--level1 .navigation__link-text {
  border-bottom-color: #10a3b2; }

.navigation__item--theme-teal > .navigation__link--level1:focus .navigation__link-text, .navigation__item--theme-teal > .navigation__link--level1:hover .navigation__link-text, .navigation__item--theme-teal > .navigation__link--level1:active .navigation__link-text {
  border-bottom-color: #10a3b2; }

.navigation__container:not(.navigation__container--mobile) .navigation__item--theme-grey.c-navigation__item--is-active > .navigation__link--level1 .navigation__link-text, .navigation__container:not(.navigation__container--mobile) .navigation__item--theme-grey.c-navigation__item--is-current > .navigation__link--level1 .navigation__link-text {
  border-bottom-color: #aca8a4; }

.navigation__item--theme-grey > .navigation__link--level1:focus .navigation__link-text, .navigation__item--theme-grey > .navigation__link--level1:hover .navigation__link-text, .navigation__item--theme-grey > .navigation__link--level1:active .navigation__link-text {
  border-bottom-color: #aca8a4; }

.navigation__container:not(.navigation__container--mobile) .navigation__item--theme-sand.c-navigation__item--is-active > .navigation__link--level1 .navigation__link-text, .navigation__container:not(.navigation__container--mobile) .navigation__item--theme-sand.c-navigation__item--is-current > .navigation__link--level1 .navigation__link-text {
  border-bottom-color: #f5ebcd; }

.navigation__item--theme-sand > .navigation__link--level1:focus .navigation__link-text, .navigation__item--theme-sand > .navigation__link--level1:hover .navigation__link-text, .navigation__item--theme-sand > .navigation__link--level1:active .navigation__link-text {
  border-bottom-color: #f5ebcd; }

.navigation__container:not(.navigation__container--mobile) .navigation__item--theme-alert.c-navigation__item--is-active > .navigation__link--level1 .navigation__link-text, .navigation__container:not(.navigation__container--mobile) .navigation__item--theme-alert.c-navigation__item--is-current > .navigation__link--level1 .navigation__link-text {
  border-bottom-color: #fb8d60; }

.navigation__item--theme-alert > .navigation__link--level1:focus .navigation__link-text, .navigation__item--theme-alert > .navigation__link--level1:hover .navigation__link-text, .navigation__item--theme-alert > .navigation__link--level1:active .navigation__link-text {
  border-bottom-color: #fb8d60; }

.navigation__container:not(.navigation__container--mobile) .navigation__item--theme-coldgrey.c-navigation__item--is-active > .navigation__link--level1 .navigation__link-text, .navigation__container:not(.navigation__container--mobile) .navigation__item--theme-coldgrey.c-navigation__item--is-current > .navigation__link--level1 .navigation__link-text {
  border-bottom-color: #313236; }

.navigation__item--theme-coldgrey > .navigation__link--level1:focus .navigation__link-text, .navigation__item--theme-coldgrey > .navigation__link--level1:hover .navigation__link-text, .navigation__item--theme-coldgrey > .navigation__link--level1:active .navigation__link-text {
  border-bottom-color: #313236; }

/*
Hamburger Button

Toggles the menu in mobile mode

Markup:
<button class="c-navigation__action-button c-navigation__hamburger-button c-navigation-hamburger-button {{modifier_class}}"
  data-toggle-element-classes
  data-toggle-element-classes--remove="site-header--global-search-is-open"
  data-toggle-element-classes--remove-from="(parent) .c-site-header"
  data-toggle-element-classes--on="click"
  data-toggle-element-classes--target="[data-navigation--obscurable]"
  data-toggle-element-classes--to="c-navigation--mobile-container--open">
  <svg class="c-navigation-hamburger-button__icon c-navigation-hamburger-button__icon--closed"
    role="img"
    aria-labelledby="title"
    focusable="false">
    <use
      xmlns:xlink="http://www.w3.org/1999/xlink"
      xlink:href="/static/theme/images/sprites.svg#hamburger-menu"></use>
  </svg>
  <svg class="c-navigation-hamburger-button__icon c-navigation-hamburger-button__icon--open"
    role="img"
    aria-labelledby="title"
    focusable="false">
    <use
      xmlns:xlink="http://www.w3.org/1999/xlink"
      xlink:href="/static/theme/images/sprites.svg#close-menu"></use>
  </svg>
</button>

Styleguide AIA001.Components.SiteHeader.HamburgerButton
*/
.navigation-hamburger-button:focus {
  outline: 0; }

.c-navigation-hamburger-button__icon {
  color: currentColor; }

.c-navigation-hamburger-button:hover .c-navigation-hamburger-button__icon {
  color: #d7d3cd; }

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

/*
Session Navigation

Markup:
<nav class="c-session-navigation session-navigation">
  <div class="c-session-navigation__container">
    <ul class="c-session-navigation__items session-navigation__items" style="list-style: none;">
      <li class="c-session-navigation__item session-navigation__item">
        <a class="c-session-navigation__link 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">
            {{> AIA001.Components.SvgSprite
                classes="c-session-navigation__icon session-navigation__icon"
                title="Hi [firstname]"
                modifier_class="user-session-nav" }}
            </svg>
            <span class="c-session-navigation__label session-navigation__label">
              <span class="c-session-navigation__label session-navigation__label--greeting">[username]</span>
              <span class="c-session-navigation__label session-navigation__label--username">[username]</span>
            </span>
          </span>
        </a>
      </li>
      <li class="c-session-navigation__item session-navigation__item">
        <a class="c-session-navigation__link 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">
            {{> AIA001.Components.SvgSprite
                classes="c-session-navigation__icon session-navigation__icon"
                title="My notes"
                modifier_class="bookmark-session-nav" }}
            <span class="c-session-navigation__label session-navigation__label">My notes</span>
            <span class="c-session-navigation__badge session-navigation__badge">199</span>
          </span>
        </a>
      </li>
      <li class="c-session-navigation__item session-navigation__item">
        <a class="c-session-navigation__link 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">
            {{> AIA001.Components.SvgSprite
                classes="c-session-navigation__icon session-navigation__icon"
                title="Logout"
                modifier_class="logout-session-nav" }}
            <span class="c-session-navigation__label session-navigation__label">Logout</span>
          </span>
        </a>
      </li>
    </ul>
  </div>
</nav>


Styleguide AIA001.Components.SiteHeader.SessionNavigation
*/
.session-navigation {
  background-color: #373533; }

.session-navigation__container {
  max-width: 72.5rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }

.session-navigation__link {
  color: #aca8a4;
  -webkit-box-flex: 0;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto; }

.session-navigation__link--theme-blue {
  background-color: #5e64f9;
  color: #292d84; }

.session-navigation__link--theme-yellow {
  background-color: #fea627;
  color: #b56000; }

.session-navigation__link--theme-red {
  background-color: #f15f5e;
  color: #ae3434; }

.session-navigation__link--theme-green {
  background-color: #72d89b;
  color: #005036; }

.session-navigation__link--theme-teal {
  background-color: #10a3b2;
  color: #006f7a; }

.session-navigation__link--theme-grey {
  background-color: #aca8a4;
  color: #4a4845; }

.session-navigation__link--theme-sand {
  background-color: #f5ebcd;
  color: #ad944b; }

.session-navigation__link--theme-alert {
  background-color: #fb8d60;
  color: #b94d20; }

.session-navigation__link--theme-coldgrey {
  background-color: #313236;
  color: #1d1d1f; }

.session-navigation__link:hover {
  color: white; }

.session-navigation__link-container {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }

.session-navigation__icon {
  width: 1.125rem;
  height: 1.125rem;
  -ms-flex-item-align: start;
      align-self: flex-start;
  margin-top: 0.3125rem;
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none; }

.session-navigation__badge {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 0.75rem;
  font-size: 0.75rem;
  color: #00412c;
  border: 1px solid #72d89b;
  border-radius: 5rem;
  background-color: #72d89b;
  padding: 0.125rem 0.3125rem; }

.session-navigation__label {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  padding: 0 0.625rem;
  -ms-flex-negative: 1;
      flex-shrink: 1; }

@media (min-width: 26.625em) {
  .site-header {
    min-height: 9.8125rem; }
  .navigation {
    min-height: 7.0625rem; }
  .navigation__container {
    margin: 0 0.9375rem; }
  .navigation__logo-link {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start; }
  .navigation__logo-image {
    width: 13.625rem;
    height: 2.9375rem; }
  .navigation__container {
    height: auto; }
  .session-navigation__container {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    margin: 0 0.9375rem; }
  .session-navigation__item:last-child .session-navigation__link:after {
    border: 0; }
  .session-navigation__link {
    position: relative;
    padding: 0.75rem; }
  .session-navigation__link-container {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; }
  .session-navigation__link:after {
    content: " ";
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    display: block;
    width: 0.0625rem;
    height: 1.625rem;
    border-right: 1px solid #615e59; }
  .session-navigation__icon {
    width: 1.375rem;
    height: 1.375rem;
    margin: 0; }
  .session-navigation__label {
    font-size: 0.875rem;
    max-width: 100%; }
  .navigation__container:not(.navigation__container--mobile) .c-navigation__item--is-active .c-navigation-mega--floating {
    position: absolute; } }

@media (min-width: 48.0625em) {
  .site-header {
    min-height: 9.8125rem; }
  .navigation__container {
    margin: 0 1.875rem; }
  .global-search-toggle-button.navigation__action-button--toggles-global-search {
    border-color: #373533; }
  .global-search-toggle-button.navigation__action-button--toggles-global-search:hover,
  .global-search-toggle-button.navigation__action-button--toggles-global-search:focus {
    border-color: #aca8a4; }
  .session-navigation__container {
    margin: 0 1.875rem; } }

@media (min-width: 64.0625em) {
  .navigation-mega__container {
    margin: 0 1.875rem; }
  .navigation-mega__content {
    padding: 1.4375rem 0; }
  .navigation-mega__close-icon {
    width: 2.8125rem;
    height: 2.8125rem; }
  .navigation__container:not(.navigation__container--mobile) .c-navigation__item--is-active .c-navigation-mega--floating {
    position: absolute; }
  .navigation__container:not(.navigation__container--mobile) .c-navigation__item--is-active .c-navigation__link--level1:after {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    content: ' ';
    background: rgba(0, 0, 0, 0.25);
    z-index: -2; }
  .navigation-mega__title-text {
    font-size: 2.625rem; }
  .navigation-mega__overview-content {
    font-size: 1.125rem;
    line-height: 2rem; }
  .navigation-mega__link-text {
    font-size: 1rem;
    font-weight: bold; }
  .navigation-mega__links-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
  .navigation-mega__links-column {
    width: 50%;
    padding-right: 20px; }
  .navigation-mega__links--level2 .navigation-mega__link-text {
    font-size: 0.875rem;
    font-weight: normal; } }

/*
Site Footer

Markup:
<footer class="c-site-footer site-footer">
  <div class="c-site-footer__container site-footer__container site-footer__container--primary">
    <div class="c-site-footer__section site-footer__section site-footer__section--primary">
      <div class="c-site-footer__group site-footer__group">
        {{#if (ne navigation false)}}
        <div class="c-site-footer-navigation-list site-footer-navigation-list site-footer-navigation-list--columns">
          <h4 class="c-site-footer-navigation-list__heading site-footer-navigation-list__heading">
            <a class="c-site-footer-navigation-list__heading-link site-footer-navigation-list__heading-link"
              href="#">Help &amp; Info</a>
          </h4>
          <ul class="c-site-footer-navigation-list__items site-footer-navigation-list__items">
            <li class="c-site-footer-navigation-list__item site-footer-navigation-list__item">
              <a class="c-site-footer-navigation-list__link site-footer-navigation-list__link"
                href="#">Author guidelines</a>
            </li>
            <li class="c-site-footer-navigation-list__item site-footer-navigation-list__item">
              <a class="c-site-footer-navigation-list__link site-footer-navigation-list__link"
                href="#">Editorial style sheet</a>
            </li>
            <li class="c-site-footer-navigation-list__item site-footer-navigation-list__item">
              <a class="c-site-footer-navigation-list__link site-footer-navigation-list__link"
                href="#">Superseded notes</a>
            </li>
            <li class="c-site-footer-navigation-list__item site-footer-navigation-list__item">
              <a class="c-site-footer-navigation-list__link site-footer-navigation-list__link"
                href="#">Useful links</a>
            </li>
          </ul>
        </div>
        <div class="c-site-footer-navigation-list site-footer-navigation-list">
          <h4 class="c-site-footer-navigation-list__heading site-footer-navigation-list__heading">
            <a class="c-site-footer-navigation-list__heading-link site-footer-navigation-list__heading-link"
              href="#">Contact &amp; Credits</a>
          </h4>
          <ul class="c-site-footer-navigation-list__items site-footer-navigation-list__items">
            <li class="c-site-footer-navigation-list__item site-footer-navigation-list__item">
              <a class="c-site-footer-navigation-list__link site-footer-navigation-list__link"
                href="#">General enquiries</a>
            </li>
            <li class="c-site-footer-navigation-list__item site-footer-navigation-list__item">
              <a class="c-site-footer-navigation-list__link site-footer-navigation-list__link"
                href="#">Acknowledgements</a>
            </li>
          </ul>
        </div>
        {{/if}}
      </div>
      <div class="c-site-footer__group site-footer__group site-footer__group--logo">
        <a class="c-site-footer__logo-link site-footer__logo-link"
          href="/">
          <svg class="c-site-footer__logo-image site-footer__logo-image"
            role="img"
            aria-labelledby="title"
            focusable="false">
            <use
              xmlns:xlink="http://www.w3.org/1999/xlink"
              xlink:href="/static/theme/images/sprites.svg#aia-logo-white"></use>
          </svg>
        </a>
      </div>
    </div>
  </div>
  <div class="c-site-footer__container site-footer__container site-footer__container--meta">
    <div class="c-site-footer__section site-footer__section site-footer__section--meta">
      <div class="c-site-footer__copyright site-footer__copyright">© 2017 The Australian Institute of Architects</div>
      <div class="c-site-footer-navigation-list site-footer-navigation-list site-footer-navigation-list--horizontal site-footer-navigation-list--horizontal-spaced">
        <ul class="c-site-footer-navigation-list__items site-footer-navigation-list__items">
          <li class="c-site-footer-navigation-list__item site-footer-navigation-list__item">
            <a class="c-site-footer-navigation-list__link site-footer-navigation-list__link"
               href="#">Privacy</a>
          </li>
          <li class="c-site-footer-navigation-list__item site-footer-navigation-list__item">
            <a class="c-site-footer-navigation-list__link site-footer-navigation-list__link"
               href="#">Disclaimer</a>
          </li>
          <li class="c-site-footer-navigation-list__item site-footer-navigation-list__item">
            <a class="c-site-footer-navigation-list__link site-footer-navigation-list__link"
               href="#">Site info</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</footer>

Weight: 50

Styleguide AIA001.Components.SiteFooter
*/
.site-footer {
  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-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-flex: 0;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto; }

.site-footer__container {
  width: 100%;
  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-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start; }

.site-footer__container--meta {
  background: #252422; }

.site-footer__container--primary {
  background: #4a4845; }

.site-footer-navigation-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
  min-width: 33%; }

.site-footer-navigation-list--columns {
  -ms-flex-preferred-size: 200%;
      flex-basis: 200%; }

.site-footer-navigation-list__heading-link {
  text-decoration: none;
  color: currentColor; }

.site-footer-navigation-list__heading-link:hover {
  color: white;
  text-decoration: underline; }

.site-footer-navigation-list__heading-link:focus {
  outline: 0;
  -webkit-box-shadow: 0 0 0 2px #4a4845, 0 0 0 4px #6e74fc;
          box-shadow: 0 0 0 2px #4a4845, 0 0 0 4px #6e74fc;
  border-radius: 0.25rem; }

.site-footer-navigation-list__items {
  list-style: none;
  padding: 0;
  margin: 0; }

.site-footer-navigation-list--columns .site-footer-navigation-list__items {
  -webkit-column-width: 16.75rem;
          column-width: 16.75rem; }

.site-footer-navigation-list__link {
  text-decoration: none;
  color: currentColor;
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-style: normal; }

.site-footer-navigation-list__link:hover {
  text-decoration: underline; }

.site-footer-navigation-list__link:focus {
  outline: 0;
  text-decoration: underline; }

.site-footer__section {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 1.875rem;
  padding: 0 1.875rem;
  max-width: 75.3125rem;
  width: 100%; }

.site-footer__section--primary {
  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-flex: 1;
      -ms-flex: 1 1 100%;
          flex: 1 1 100%; }

.site-footer__section--primary .site-footer-navigation-list__heading {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-style: normal;
  font-size: 1rem;
  color: #aca8a4;
  text-transform: uppercase;
  padding-bottom: 0.25rem;
  margin-top: 0;
  margin-bottom: 0.375rem;
  border-bottom: 2px solid rgba(255, 255, 255, 0.1); }

.site-footer__section--primary .site-footer-navigation-list:not(:last-child) {
  margin-bottom: 30px; }

.site-footer__section--primary .site-footer-navigation-list__item {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 1rem;
  line-height: 2rem;
  color: white; }

.site-footer__group--logo {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  margin-top: 2.875rem; }

.site-footer__logo-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: white; }

.site-footer__logo-image {
  max-width: 12.8125rem;
  height: 3.1875rem;
  margin: 0 0.625rem;
  color: white; }

.site-footer__section--meta {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding-top: 1.0625rem; }

.site-footer__section--meta .site-footer-navigation-list__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding-bottom: 0.5rem; }

.site-footer__section--meta .site-footer-navigation-list__item {
  display: inline;
  font-size: 0.8125rem;
  color: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  line-height: 1.125rem; }
  .site-footer__section--meta .site-footer-navigation-list__item:after {
    content: " ";
    border-right: 1px solid #7c7871;
    height: 0.6875rem; }
  .site-footer__section--meta .site-footer-navigation-list__item:last-child:after {
    display: none; }

.site-footer__section--meta .site-footer-navigation-list__link {
  padding: 0 0.5rem; }

.site-footer__copyright {
  color: #aca8a4;
  font-size: 0.8125rem;
  line-height: 1.125rem;
  padding-bottom: 0.5rem;
  width: 100%;
  text-align: center; }

html[data-focus-source="key"] .site-footer-navigation-list__link:focus {
  -webkit-box-shadow: 0 0 0 2px #4a4845, 0 0 0 4px #6e74fc;
          box-shadow: 0 0 0 2px #4a4845, 0 0 0 4px #6e74fc;
  border-radius: 0.25rem; }

html[data-focus-source="key"] .site-footer__logo-link:focus {
  -webkit-box-shadow: 0 0 0 2px #4a4845, 0 0 0 4px #6e74fc;
          box-shadow: 0 0 0 2px #4a4845, 0 0 0 4px #6e74fc;
  border-radius: 0.25rem; }

.site-footer__container\@printonly {
  display: none; }

@media (min-width: 26.625em) {
  .site-footer__section {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1; }
  .site-footer__section--primary {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    min-height: 13.5625rem; }
  .site-footer__section--primary .site-footer-navigation-list {
    margin-right: 30px; }
  .site-footer__section--primary .site-footer-navigation-list__heading {
    padding-bottom: 0.6875rem;
    margin-bottom: 1.125rem; }
  .site-footer__group {
    width: 100%; }
  .site-footer__group--logo-image {
    width: 12.75rem;
    height: 3.1875rem; }
  .site-footer__group--logo {
    margin-top: 0; }
  .site-footer__section--meta {
    -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;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start; }
  .site-footer__section--meta .site-footer__copyright {
    width: auto; }
  .site-footer__section--meta .site-footer-navigation-list {
    width: auto; }
  .site-footer__section--meta .site-footer-navigation-list__items {
    padding-bottom: 0; }
  .site-footer__section--meta .site-footer-navigation-list__item {
    margin: 0; } }

@media (min-width: 48.0625em) {
  .site-footer__section--primary .site-footer-navigation-list:not(:last-child) {
    margin-bottom: 0; }
  .site-footer__section--primary .site-footer__group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1; }
  .site-footer__section--primary .site-footer__group--logo {
    max-width: 13.875rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
  .site-footer__section--primary .site-footer-navigation-list--two-column\@largeup {
    -ms-flex-preferred-size: 200%;
        flex-basis: 200%; }
  .site-footer__section--primary .site-footer-navigation-list--two-column\@largeup .site-footer-navigation-list__items {
    -webkit-column-width: 16.75rem;
            column-width: 16.75rem;
    -webkit-column-fill: balance;
            column-fill: balance; }
  .site-footer__section--meta .site-footer__copyright {
    padding-bottom: 0; }
  .site-footer__section--meta .site-footer-navigation-list__items {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start; } }

/*
Sliding Dots

Markup:
<div class="loading-indicator loading-indicator--medium {{modifier_class}}">
  <div class="loading-indicator__dot">
    <div class="loading-indicator__dot-container"></div>
  </div>
  <div class="loading-indicator__dot">
    <div class="loading-indicator__dot-container"></div>
  </div>
  <div class="loading-indicator__dot">
    <div class="loading-indicator__dot-container"></div>
  </div>
  <div class="loading-indicator__dot">
    <div class="loading-indicator__dot-container"></div>
  </div>
  <div class="loading-indicator__dot">
    <div class="loading-indicator__dot-container"></div>
  </div>
</div>

.loading-indicator--theme-green - Green theme
.loading-indicator--theme-green-dark - Green theme
.loading-indicator--theme-red - Red theme
.loading-indicator--theme-red-dark - Red theme
.loading-indicator--theme-yellow - Yellow theme
.loading-indicator--theme-yellow-dark - Yellow theme
.loading-indicator--theme-blue - Blue theme
.loading-indicator--theme-blue-dark - Blue theme
.loading-indicator--theme-sand - Sand theme
.loading-indicator--theme-sand-dark - Sand theme


Styleguide AIA001.Components.LoadingIndicators.SlidingDots
*/
@-webkit-keyframes loading-indicator--tail {
  0%, 25% {
    left: 22px;
    -webkit-transform: scale(0);
            transform: scale(0); }
  50% {
    left: 22px;
    -webkit-transform: scale(1);
            transform: scale(1); }
  75% {
    left: calc(100% - 22px); }
  100% {
    left: calc(100% - 22px);
    -webkit-transform: scale(1);
            transform: scale(1); } }
@keyframes loading-indicator--tail {
  0%, 25% {
    left: 22px;
    -webkit-transform: scale(0);
            transform: scale(0); }
  50% {
    left: 22px;
    -webkit-transform: scale(1);
            transform: scale(1); }
  75% {
    left: calc(100% - 22px); }
  100% {
    left: calc(100% - 22px);
    -webkit-transform: scale(1);
            transform: scale(1); } }

@-webkit-keyframes loading-indicator--grow {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1); }
  25%, 100% {
    -webkit-transform: scale(0);
            transform: scale(0); } }

@keyframes loading-indicator--grow {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1); }
  25%, 100% {
    -webkit-transform: scale(0);
            transform: scale(0); } }

@-webkit-keyframes loading-indicator--slide {
  0% {
    left: 22px;
    -webkit-transform: scale(0);
            transform: scale(0); }
  25% {
    left: 22px;
    -webkit-transform: scale(1);
            transform: scale(1); }
  50% {
    left: 50%; }
  75% {
    left: calc(100% - 22px);
    -webkit-transform: scale(1);
            transform: scale(1); }
  100% {
    left: calc(100% - 22px);
    -webkit-transform: scale(0);
            transform: scale(0); } }

@keyframes loading-indicator--slide {
  0% {
    left: 22px;
    -webkit-transform: scale(0);
            transform: scale(0); }
  25% {
    left: 22px;
    -webkit-transform: scale(1);
            transform: scale(1); }
  50% {
    left: 50%; }
  75% {
    left: calc(100% - 22px);
    -webkit-transform: scale(1);
            transform: scale(1); }
  100% {
    left: calc(100% - 22px);
    -webkit-transform: scale(0);
            transform: scale(0); } }

.loading-indicator {
  position: relative; }

.loading-indicator--small {
  width: 80px;
  height: 60px; }
  .loading-indicator--small .loading-indicator__dot {
    width: 0.25rem;
    height: 0.25rem; }

.loading-indicator--medium {
  width: 120px;
  height: 80px; }
  .loading-indicator--medium .loading-indicator__dot {
    width: 0.75rem;
    height: 0.75rem; }

.loading-indicator--large {
  width: 180px;
  height: 110px; }
  .loading-indicator--large .loading-indicator__dot {
    width: 1.375rem;
    height: 1.375rem; }

.loading-indicator__dot {
  position: absolute;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }

.loading-indicator__dot-container {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #aca8a4; }

.loading-indicator__dot {
  -webkit-transform: translate(-50%, -50%) scale(1) translate(50%, 50%);
          transform: translate(-50%, -50%) scale(1) translate(50%, 50%);
  -webkit-animation: loading-indicator--slide 2s cubic-bezier(0, 0.5, 0.5, 1) infinite forwards;
          animation: loading-indicator--slide 2s cubic-bezier(0, 0.5, 0.5, 1) infinite forwards; }

.loading-indicator__dot:nth-child(2) {
  -webkit-animation-delay: -1s;
          animation-delay: -1s; }

.loading-indicator__dot:nth-child(3) {
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s; }

.loading-indicator__dot:nth-child(4) {
  -webkit-animation-delay: 0s;
          animation-delay: 0s; }

.loading-indicator--theme-blue .loading-indicator__dot-container {
  background-color: #5e64f9; }

.loading-indicator--theme-blue-dark .loading-indicator__dot-container {
  background-color: #292d84; }

.loading-indicator--theme-yellow .loading-indicator__dot-container {
  background-color: #fea627; }

.loading-indicator--theme-yellow-dark .loading-indicator__dot-container {
  background-color: #b56000; }

.loading-indicator--theme-red .loading-indicator__dot-container {
  background-color: #f15f5e; }

.loading-indicator--theme-red-dark .loading-indicator__dot-container {
  background-color: #ae3434; }

.loading-indicator--theme-green .loading-indicator__dot-container {
  background-color: #72d89b; }

.loading-indicator--theme-green-dark .loading-indicator__dot-container {
  background-color: #005036; }

.loading-indicator--theme-teal .loading-indicator__dot-container {
  background-color: #10a3b2; }

.loading-indicator--theme-teal-dark .loading-indicator__dot-container {
  background-color: #006f7a; }

.loading-indicator--theme-grey .loading-indicator__dot-container {
  background-color: #aca8a4; }

.loading-indicator--theme-grey-dark .loading-indicator__dot-container {
  background-color: #4a4845; }

.loading-indicator--theme-sand .loading-indicator__dot-container {
  background-color: #f5ebcd; }

.loading-indicator--theme-sand-dark .loading-indicator__dot-container {
  background-color: #ad944b; }

.loading-indicator--theme-alert .loading-indicator__dot-container {
  background-color: #fb8d60; }

.loading-indicator--theme-alert-dark .loading-indicator__dot-container {
  background-color: #b94d20; }

.loading-indicator--theme-coldgrey .loading-indicator__dot-container {
  background-color: #313236; }

.loading-indicator--theme-coldgrey-dark .loading-indicator__dot-container {
  background-color: #1d1d1f; }

/*
Pages

Examples of complete pages

Styleguide AIA001.Page
*/
/*
Generic Page

Markup:
<div class="c-page page {{modifier_class}} {{classes}}">
  <div class="c-page__container page__container">
    {{#if @partial-block}}
      {{> @partial-block}}
    {{else}}
      {{> Core.Styleguide.Box
          modifier_class="styleguide-box--skyblue"
          width="100%"
          height="100vh" }}
    {{/if}}
  </div>
</div>

Weight: 5

Styleguide AIA001.Page.Generic
*/
/*
Page (with content)

Markup:
{{#> AIA001.Page.Generic modifier_class="page--is-wysiwyg" }}
  <div class="c-page__content page__content">
    <!-- begin custom page content -->
    <div class="c-page__heading page__header">
      <h1 class="c-page__header page__heading">{{ default title "Page title" }}</h1>
    </div>
    <div class="c-page__body page__body wysiwyg-area">
      {{#if @partial-block}}
        {{> @partial-block}}
      {{else}}
        {{#if content }}
          {{{markdown (default content (lipsum 24)) }}}
        {{else}}
          {{{ markdown (filecontent "client/src/site__aia001/components/generic-page/content.md") }}}
        {{/if}}
      {{/if}}
    </div>
    <footer class="c-page__footer page__footer">
    </footer>
    <!-- end custom page content -->
  </div>
{{/AIA001.Page.Generic }}

Weight: 10

Styleguide AIA001.Page.GenericWithContent
*/
/*
Page (with content and aside)

Markup:
{{#> AIA001.Page.Generic
  modifier_class=(concat
    modifier_class
    " "
    "page--is-wysiwyg page--has-offcanvas-subnav@largeonly"
    ) }}
  <div class="c-page__content page__content">
    <!-- begin custom page content -->
    <header class="c-page__header page__header">
      <h1 class="c-page__heading page__heading">{{ default title "Page title" }}</h1>
    </header>
    <div class="c-page__body page__body wysiwyg-area">
      {{{ markdown (filecontent "client/src/site__aia001/components/generic-page/content.md") }}}
    </div>
    <nav class="page__aside">
      {{> Core.Styleguide.Box
          modifier_class="styleguide-box--skyblue"
          width="100%"
          height="131px" }}
      {{#> AIA001.Components.AccordionNavigationGroup }}
        <button class="page__subnav-toggle-button u-focus u-focus--blue-light"
              data-toggle-element-classes
              data-toggle-element-classes--on="click"
              data-toggle-element-classes--target=".note-page"
              data-toggle-element-classes--to="page--offcanvas-subnav-open">toggle</button>
        {{> Core.Styleguide.Box
            modifier_class="styleguide-box--green"
            width="100%"
            height="100vh" }}
      {{/AIA001.Components.AccordionNavigationGroup }}
    </nav>
    <footer class="c-page__footer page__footer">
    </footer>
    <!-- end custom page content -->
  </div>
{{/AIA001.Page.Generic }}

Weight: 10

Styleguide AIA001.Page.GenericWithContentAndAside
*/
.page {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -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; }

.page__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-flex: 0;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
  max-width: 72.5rem;
  width: 100%;
  margin: 0; }

.page__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 100%;
  margin: 0; }

.page__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 100%;
          flex: 1 0 100%;
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
  margin: 0;
  padding: 0 0.9375rem;
  margin-top: 2.375rem;
  margin-bottom: 1.875rem; }

.page--header-reversed .page__header {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse; }

.page__heading {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-style: normal;
  font-size: 1.75rem;
  color: #4a4845;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  -ms-flex-positive: 1;
      flex-grow: 1;
  margin: 0; }

.page__actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -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;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  width: 100%;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -ms-flex: 1 0 auto;
      flex: 1 0 auto;
  margin-top: 1.875rem; }

.page__heading-aside {
  max-width: 20.75rem;
  margin-left: 4rem; }

.page__action-button {
  text-decoration: none;
  color: #4a4845;
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  height: 1.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-flex: 0;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto; }

.page__action-icon {
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.5625rem;
  border-radius: 1000px;
  background-color: #72d89b;
  color: #00412c; }

.page__action-button:hover .page__action-icon {
  background-color: #005036;
  color: white; }

.page__action-label {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-style: normal;
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: normal; }

.page__body {
  font-family: "Adelle", Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 1.125rem;
  line-height: 2rem;
  word-break: break-word;
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
  width: 100%;
  margin: 0 0.9375rem;
  margin-bottom: 1.875rem; }

.page__aside {
  -webkit-box-ordinal-group: 4;
      -ms-flex-order: 3;
          order: 3;
  width: 100%; }

.page__footer {
  -webkit-box-ordinal-group: 5;
      -ms-flex-order: 4;
          order: 4;
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%; }

.page--has-offcanvas-subnav\@largeonly .page__subnav-toggle-button {
  display: none; }

.page--wrap-body .page__body {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

.page--body-horizontal .page__body {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row; }

.page--body-vertical .page__body {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; }

.page--align-start .page__body {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start; }

.page--align-end .page__body {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end; }

.page--align-center .page__body {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }

.page--space-around .page__body {
  -ms-flex-pack: distribute;
      justify-content: space-around; }

.page--space-between .page__body {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between; }

/*
WysiWyg

Generic wysiwyg (what you see is what you get) content.

- must be inside a `<div class="page__body">` that itself is inside a `<div class="page.page--is-wysiwyg">`.

Markup:
<div class="page--is-wysiwyg">
  <div class="page__body">
      {{{ markdown (filecontent "client/src/site__aia001/components/generic-page/content.md") }}}
  </div>
</div>

Styleguide AIA001.WysiWyg
*/
@media (min-width: 26.625em) {
  .page__heading {
    font-family: din, Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-style: normal;
    font-size: 2.625rem; }
  .page__aside {
    padding-bottom: 44px; } }

/* largeonly */
/* top end of medium */
/* top end of large */
@media (min-width: 48em) and (max-width: 63.9375em) {
  .page--has-offcanvas-subnav\@largeonly {
    position: relative; }
  .page--has-offcanvas-subnav\@largeonly .page__aside {
    position: absolute;
    z-index: 20;
    -webkit-box-flex: 0;
        -ms-flex: 0 1 100%;
            flex: 0 1 100%;
    margin: 0; }
  .page--has-offcanvas-subnav\@largeonly .page__aside {
    width: 20.75rem; }
  .page--has-offcanvas-subnav\@largeonly .page__aside,
  .page--has-offcanvas-subnav\@largeonly.page--aside-right .page__aside {
    right: -20.75rem; }
  .page--has-offcanvas-subnav\@largeonly.page--aside-left .page__aside {
    left: -20.75rem; }
  .page--has-offcanvas-subnav\@largeonly .page__subnav {
    -webkit-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out;
    position: relative; }
  .page--with-aside.page--has-offcanvas-subnav\@largeonly .page__body {
    padding-right: 0; }
  .page__subnav-toggle-button {
    display: none; }
  .page__subnav-toggle-button .button__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-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; }
  .page__subnav-toggle-icon {
    width: 2rem;
    height: 2rem;
    color: #005036;
    display: none; }
  .page__subnav-toggle-icon--close {
    display: block; }
  .page__subnav-toggle-icon--open {
    display: none; }
  .page--has-offcanvas-subnav\@largeonly .page__subnav-toggle-button {
    display: block;
    position: absolute;
    top: 0;
    left: -4rem;
    width: 4rem;
    height: 4rem;
    cursor: pointer;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    border: 0;
    background: #72d89b; }
  .page__subnav-toggle-button .button__container:after {
    content: "MENU";
    font-family: din, Helvetica, Arial, sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 0.6875rem;
    color: #005036; }
  .page--has-offcanvas-subnav\@largeonly.page--offcanvas-subnav-open .page__subnav {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%); }
  .page--has-offcanvas-subnav\@largeonly.page--offcanvas-subnav-open .page__subnav-toggle-icon--close {
    display: none; }
  .page--has-offcanvas-subnav\@largeonly.page--offcanvas-subnav-open .page__subnav-toggle-icon--open {
    display: block; }
  .page--has-offcanvas-mask\@largeonly .page__container:after {
    -webkit-transition: opacity ease 150ms;
    transition: opacity ease 150ms;
    pointer-events: none;
    opacity: 0; }
  .page--has-offcanvas-mask\@largeonly.page--offcanvas-subnav-open .page__container:after {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 1;
    content: " ";
    background-image: -webkit-gradient(linear, left top, left bottom, from(#d7d3cd), to(transparent));
    background-image: linear-gradient(to bottom, #d7d3cd 0%, transparent 100%);
    z-index: 10; } }

@media (min-width: 48.0625em) {
  .page__container {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    margin: 0 1.875rem; }
  .page__header {
    padding: 0;
    margin-top: 3.8125rem;
    margin-bottom: 1.625rem;
    margin-left: 0;
    margin-right: 0; }
  .page__actions {
    margin-top: 1.875rem; }
  .page__body {
    margin-left: 0;
    margin-right: 0; }
  .page--with-aside .page__body {
    padding-right: 1.875rem; }
  .page__aside {
    -webkit-box-flex: 0;
        -ms-flex: 0 1 10%;
            flex: 0 1 10%;
    margin: 0; } }

@media (min-width: 64em) {
  .page__header {
    margin-left: 0;
    margin-right: 0; }
  .page--with-aside .page__body {
    -ms-flex-preferred-size: 67%;
        flex-basis: 67%;
    width: 67%;
    max-width: calc(100% - 24.5rem); }
  .page--with-aside .page__heading {
    max-width: calc(100% - 24.5rem); }
  .page__aside {
    -ms-flex-preferred-size: 33%;
        flex-basis: 33%;
    width: 33%; }
  .page--aside-left .page__aside-container {
    padding-right: 1.875rem; }
  .page .page__aside-container,
  .page--aside-right .page__aside-container {
    padding-left: 1.875rem; } }

/*
Login Page

Markup:
{{#> AIA001.Page.Generic
  modifier_class=(concat
    modifier_class
    " page--with-aside"
    ) }}
  <div class="c-page__content page__content">
    <header class="c-page__header page__header">
      <h1 class="c-page__heading page__heading">{{ default title "Page title" }}</h1>
    </header>
    <div class="c-page__body page__body">
      <form class="form form--contained login-form EPiServerForms">
        {{#> Core.Components.Forms.FieldLayout.Input
             classes="c-field-layout--vertical"
             label="Membership Number / Contact ID / Employer ID"
             required=true }}
          {{> Core.Components.Forms.Input }}
        {{/Core.Components.Forms.FieldLayout.Input }}
        {{#> Core.Components.Forms.FieldLayout.Input
             classes="c-field-layout--vertical"
             label="Password"
             required=true }}
          {{> Core.Components.Forms.Input }}
          {{#*inline "description-block" }}
            <a href="#">forgotten password?</a>
          {{/inline}}
        {{/Core.Components.Forms.FieldLayout.Input}}
        <div class="form__footer login-form__footer">
          <span class="form__disclaimer login-form__disclaimer">
            {{{ markdown (filecontent "client/src/site__aia001/components/generic-page/paragraph.md") }}}
          </span>
          {{> Core.Components.Forms.Button
              text="Login"
              classes="button--primary c-button--centered" }}
        </div>
      </form>
    </div>
    <div class="c-page__aside page__aside login-page__aside">
      {{#> AIA001.Components.InfoCard
          title="Not a Subscriber?"
          classes="info-card--theme-grey"
          icon="book" }}
          Subscribe to Acumen today to access a wealth of practice notes and invaluable information.
      {{/ AIA001.Components.InfoCard }}
    </div>
    <footer class="c-page__footer page__footer">
    </footer>
  </div>
{{/AIA001.Page.Generic }}

Styleguide AIA001.Page.LoginPage
*/
.login-form {
  width: 100%; }

.login-form__footer {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse; }

.login-form__disclaimer {
  width: 20.0625rem;
  line-height: 1.25rem; }

.login-form__submit {
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  width: 14.25rem; }

@media (min-width: 48.0625em) {
  .login-form__footer {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row; } }

/*
Search

Weight: 60

Styleguide AIA001.Components.Search
*/
/*
Global Search Toggle Button

Toggles appearance of the global search in the site header

Markup:
<button class="c-navigation__action-button navigation__action-button site-header__action-button global-search-toggle-button {{modifier_class}}"
  {{#if targetStatic }}
  data-remove-element-classes
  data-remove-element-classes--classes="c-navigation__item--is-active,c-navigation--mobile-container--open"
  data-remove-element-classes--target=".c-navigation__item,(parent) .c-navigation"
  data-focus-element
  data-focus-element--on="click"
  data-focus-element--target=".global-search--static .global-search__field-input"
  {{ else }}
  data-remove-element-classes
  data-remove-element-classes--classes="c-navigation__item--is-active,c-navigation--mobile-container--open"
  data-remove-element-classes--target=".c-navigation__item,(parent) .c-navigation"
  data-toggle-element-classes
  data-toggle-element-classes--target=".site-header"
  data-toggle-element-classes--to="site-header--global-search-is-open"
  data-focus-element
  data-focus-element--on="click"
  data-focus-element--target=".global-search--moves .global-search__field-input"
  {{/if}}>
  {{> AIA001.Components.SvgSprite
    classes="global-search-toggle-button__icon global-search-toggle-button__icon--open"
    modifier_class="search-500" }}
  {{> AIA001.Components.SvgSprite
    classes="global-search-toggle-button__icon global-search-toggle-button__icon--closed"
    modifier_class="close-mobile-nav-500" }}
</button>

.global-search-toggle-button--light - button on light backgrounds
.global-search-toggle-button--dark - button on dark backgrounds

Styleguide AIA001.Components.Search.GlobalSearchToggle
*/
.global-search-toggle-button {
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  line-height: 1;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  outline: none;
  background: none;
  border-radius: 1000px;
  border-color: transparent;
  border-style: solid;
  border-width: 0.125rem; }

@-webkit-keyframes global-search-toggle-button--fade {
  99% {
    opacity: 0;
    height: initial; }
  100% {
    opacity: 0;
    height: 0; } }

@keyframes global-search-toggle-button--fade {
  99% {
    opacity: 0;
    height: initial; }
  100% {
    opacity: 0;
    height: 0; } }

.global-search-toggle-button__icon {
  -webkit-transition: opacity 250ms ease;
  transition: opacity 250ms ease;
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  min-height: 2rem;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  color: currentColor; }

.global-search-toggle-button__icon--open {
  display: block; }

.global-search-toggle-button__icon--closed {
  display: none; }

.site-header--global-search-is-open .global-search-toggle-button__icon--closed {
  display: block; }

.site-header--global-search-is-open .global-search-toggle-button__icon--open {
  display: none; }

/*
Global Search

Markup:
<div class="global-search {{ modifier_class }} {{classes}}" {{{ attrs }}}>
  <form class="global-search__form" autocomplete="off">
    <fieldset class="global-search__fieldset">
      <legend class="global-search__legend">
        <span class="global-search__legend-text">Site search</span>
      </legend>
      <div class="global-search__container">
        <div class="global-search__field">
          <input class="global-search__field-input"
                 id="searchterm" name="q"
                 autocomplete="{{default autocomplete 'on'}}"
                 placeholder="What can we help you find?"
                 type="text">
          <button class="c-button button c-button--centered global-search__cancel-button"
                  data-search-cancel=""
                  tabindex="-1"
                  type="button">
            <span class="c-button__container">
              {{> AIA001.Components.SvgSprite
                classes="global-search__close-icon"
                modifier_class="search-500" }}
            </span>
          </button>
          <button class="c-button button c-button--centered global-search__submit"
                  data-search-submit="/search">
            <span class="c-button__container">
              {{> AIA001.Components.SvgSprite
                  classes="global-search__submit-icon"
                  modifier_class="search-500" }}
              <span class="global-search__loading-icon"></span>
              <span class="global-search__submit-text">Search</span>
            </span>
          </button>
        </div>
        {{#if @partial-block}}
          {{> @partial-block}}
        {{/if}}
        <a class="global-search__index-link"
           href="#">
           <span class="global-search__index-link-text">View A-Z Index</span>
           {{> AIA001.Components.SvgSprite
            classes="global-search__index-link-icon"
            modifier_class="link-icon-minor" }}
        </a>
      </div>
    </fieldset>
  </form>
</div>

.global-search--static - Static on the page, doesn't move.
.global-search--moves.global-search--floats - Positioned absolutely, floating over content when active.
.global-search--moves.global-search--pushes - Positioned statically, pushes content when active.

Styleguide AIA001.Components.Search.GlobalSearch
*/
.global-search {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: #252422; }

.global-search--floats {
  -webkit-transition: -webkit-transform ease 250ms;
  transition: -webkit-transform ease 250ms;
  transition: transform ease 250ms;
  transition: transform ease 250ms, -webkit-transform ease 250ms;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
  position: absolute;
  top: 100%;
  z-index: -2;
  overflow: hidden; }

.site-header--global-search-is-open .global-search--floats,
.global-search--floats.global-search--is-open {
  -webkit-transform: translateY(0%);
          transform: translateY(0%); }

.global-search--pushes {
  height: 0;
  overflow: hidden; }

.site-header--global-search-is-open .global-search--pushes,
.global-search--pushes.global-search--is-open {
  height: initial;
  overflow: visible; }

.global-search__form {
  border: 0;
  padding: 1.5rem 0;
  margin: 0 auto;
  max-width: 72.5rem;
  width: 100%; }

.global-search--moves .global-search__form {
  min-height: 10.25rem; }

.global-search--expanded .global-search__form {
  margin: 0 1.875rem;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1; }

.global-search__fieldset {
  border: 0;
  margin: 0;
  padding: 0; }

.global-search__legend {
  display: none; }

.global-search__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-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  position: relative;
  margin: auto;
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal; }

.global-search__field {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  z-index: 800;
  font-size: 0.875rem;
  line-height: initial; }

.global-search__field-input,
input[type=text].global-search__field-input {
  display: block;
  -webkit-box-flex: 0;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
  width: 100%;
  -webkit-appearance: none;
  padding: 0.5rem;
  padding-left: 1rem;
  padding-right: 4rem;
  border: none;
  background: white;
  /*
    https://stackoverflow.com/a/15603284
    use line-height instead of height, beacuase safari.
  */
  height: 3.8125rem;
  line-height: initial;
  font-weight: inherit;
  color: #373533;
  -webkit-transition: outline-offset 150ms ease-in-out,
 outline-color 150ms ease-in-out,
 -webkit-box-shadow 200ms ease-in-out;
  transition: outline-offset 150ms ease-in-out,
 outline-color 150ms ease-in-out,
 -webkit-box-shadow 200ms ease-in-out;
  transition: box-shadow 200ms ease-in-out,
 outline-offset 150ms ease-in-out,
 outline-color 150ms ease-in-out;
  transition: box-shadow 200ms ease-in-out,
 outline-offset 150ms ease-in-out,
 outline-color 150ms ease-in-out,
 -webkit-box-shadow 200ms ease-in-out; }
  [data-focus-source="pointer"] .global-search__field-input:focus, [data-focus-source="pointer"]
  input[type=text].global-search__field-input:focus {
    outline: none; }
  .global-search--moves.global-search--is-open:not(.global-search--not-focal-point) .global-search__field-input,
  .site-header--global-search-is-open .global-search--moves:not(.global-search--not-focal-point) .global-search__field-input,
  .global-search .global-search__field-input:focus, .global-search--moves.global-search--is-open:not(.global-search--not-focal-point)
  input[type=text].global-search__field-input,
  .site-header--global-search-is-open .global-search--moves:not(.global-search--not-focal-point)
  input[type=text].global-search__field-input,
  .global-search
  input[type=text].global-search__field-input:focus {
    -webkit-box-shadow: 0 0 1000px 1000px rgba(0, 0, 0, 0.45);
            box-shadow: 0 0 1000px 1000px rgba(0, 0, 0, 0.45);
    outline-offset: 4px;
    outline-color: rgba(255, 255, 255, 0.55); }
    .global-search--moves.global-search--is-open:not(.global-search--not-focal-point) .global-search__field-input::-webkit-input-placeholder,
    .site-header--global-search-is-open .global-search--moves:not(.global-search--not-focal-point) .global-search__field-input::-webkit-input-placeholder,
    .global-search .global-search__field-input:focus::-webkit-input-placeholder, .global-search--moves.global-search--is-open:not(.global-search--not-focal-point)
    input[type=text].global-search__field-input::-webkit-input-placeholder,
    .site-header--global-search-is-open .global-search--moves:not(.global-search--not-focal-point)
    input[type=text].global-search__field-input::-webkit-input-placeholder,
    .global-search
    input[type=text].global-search__field-input:focus::-webkit-input-placeholder {
      color: #d7d3cd; }
    .global-search--moves.global-search--is-open:not(.global-search--not-focal-point) .global-search__field-input:-ms-input-placeholder,
    .site-header--global-search-is-open .global-search--moves:not(.global-search--not-focal-point) .global-search__field-input:-ms-input-placeholder,
    .global-search .global-search__field-input:focus:-ms-input-placeholder, .global-search--moves.global-search--is-open:not(.global-search--not-focal-point)
    input[type=text].global-search__field-input:-ms-input-placeholder,
    .site-header--global-search-is-open .global-search--moves:not(.global-search--not-focal-point)
    input[type=text].global-search__field-input:-ms-input-placeholder,
    .global-search
    input[type=text].global-search__field-input:focus:-ms-input-placeholder {
      color: #d7d3cd; }
    .global-search--moves.global-search--is-open:not(.global-search--not-focal-point) .global-search__field-input::-ms-input-placeholder,
    .site-header--global-search-is-open .global-search--moves:not(.global-search--not-focal-point) .global-search__field-input::-ms-input-placeholder,
    .global-search .global-search__field-input:focus::-ms-input-placeholder, .global-search--moves.global-search--is-open:not(.global-search--not-focal-point)
    input[type=text].global-search__field-input::-ms-input-placeholder,
    .site-header--global-search-is-open .global-search--moves:not(.global-search--not-focal-point)
    input[type=text].global-search__field-input::-ms-input-placeholder,
    .global-search
    input[type=text].global-search__field-input:focus::-ms-input-placeholder {
      color: #d7d3cd; }
    .global-search--moves.global-search--is-open:not(.global-search--not-focal-point) .global-search__field-input::placeholder,
    .site-header--global-search-is-open .global-search--moves:not(.global-search--not-focal-point) .global-search__field-input::placeholder,
    .global-search .global-search__field-input:focus::placeholder, .global-search--moves.global-search--is-open:not(.global-search--not-focal-point)
    input[type=text].global-search__field-input::placeholder,
    .site-header--global-search-is-open .global-search--moves:not(.global-search--not-focal-point)
    input[type=text].global-search__field-input::placeholder,
    .global-search
    input[type=text].global-search__field-input:focus::placeholder {
      color: #d7d3cd; }

.global-search--static {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  z-index: 1; }

#searchterm:-ms-clear, #searchterm::-webkit-search-cancel-button {
  appearance: none; }

.global-search__cancel-button {
  position: absolute;
  top: 50%;
  right: 4rem;
  width: 3rem;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  display: none;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  background-color: transparent; }
  .global-search__cancel-button .button__container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; }

.global-search__close-icon {
  width: 100%;
  height: 2rem;
  color: #373533;
  margin: 0 auto; }

.global-search--is-dirty .global-search__cancel-button {
  display: block;
  visibility: visible; }

.global-search__submit {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  min-width: auto;
  width: 3.125rem;
  height: 2.875rem;
  padding: 0.25rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer;
  text-align: center;
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-style: normal;
  font-size: 1rem;
  background-color: #72d89b;
  color: #005036;
  border: 0;
  border-radius: 0.5rem; }

.global-search__submit--is-active {
  visibility: inherit; }

.global-search__submit-text {
  display: none;
  text-transform: uppercase;
  line-height: 1.375rem; }

.global-search__submit-icon {
  width: 1.375rem;
  height: 1.375rem; }

.global-search__loading-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 1000px;
  border: 4px solid rgba(0, 0, 0, 0.25);
  border-left-color: rgba(0, 0, 0, 0.75); }

.global-search__submit .global-search__loading-icon {
  width: 1.125rem;
  height: 1.125rem;
  fill: currentColor;
  -webkit-animation: submite-icon-loader-spin 1s infinite linear;
          animation: submite-icon-loader-spin 1s infinite linear;
  display: none; }

.global-search--is-loading .global-search__loading-icon {
  display: block; }

.global-search--is-loading .global-search__submit-icon {
  display: none; }

.global-search--is-loading .global-search__submit-text {
  display: none; }

.global-search__index-link {
  z-index: 1;
  width: 100%;
  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;
  padding: 0.75rem 0 1rem 0;
  margin-left: auto;
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 1rem;
  text-decoration: none;
  color: #72d89b;
  -webkit-transition: background-color ease 250ms;
  transition: background-color ease 250ms;
  background-color: rgba(0, 0, 0, 0.6); }
  .global-search__index-link .global-search__index-link-icon {
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); }
  .global-search__index-link:hover, .global-search__index-link:focus {
    color: #fff; }
    .global-search__index-link:hover .global-search__index-link-icon, .global-search__index-link:focus .global-search__index-link-icon {
      -webkit-transform: translate(10px, 0);
              transform: translate(10px, 0); }

.global-search__index-link-icon {
  width: 1.375rem;
  height: 1.375rem;
  margin-left: 0.3125rem; }

.global-search__index-link-icon {
  margin-top: 0.1875rem; }

.global-search--floats .global-search__container {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; }

@-webkit-keyframes submite-icon-loader-spin {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

@keyframes submite-icon-loader-spin {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

.global-search__close {
  display: none; }

html[data-focus-source="key"] .global-search__index-link:focus {
  outline: 2px solid rgba(255, 255, 255, 0.55);
  z-index: 801; }

.site-header--global-search-is-open .global-search {
  height: 185px; }

/*
Search Result Item

Markup:
<div class="search-result-item {{modifier_class}} {{ default theme_class (sample
    'search-result-item--theme-blue'
    'search-result-item--theme-red'
    'search-result-item--theme-green'
    'search-result-item--theme-yellow'
  )}}">
  <div class="search-result-item__container">
    <div class="search-result-item__media">
    {{#if image}}
      <img class="search-result-item__image search-result-item__image--photo"
           src="{{image}}">
    {{else}}
      {{> AIA001.Components.SvgSprite
          classes="search-result-item__image search-result-item__image--sprite"
          modifier_class=(sample
            'practice-icon'
            'project-icon'
            'notepack-icon'
            'resource-icon'
          )}}
    {{/if}}
    </div>
    <div class="search-result-item__content">
    <div class="search-result-item__header">
        <span class="search-result-item__category">{{ default category 'Note Category'}}</span>
        <h4 class="search-result-item__heading">
        <a class="search-result-item__link"
        href="#">{{ default title (lipsum 24)}}</a>
        </h4>
        <span class="search-result-item__date">{{ default date '19 january 2018'}}</span>
      </div>
      <div class="search-result-item__body">
        {{{ markdown (filecontent "client/src/site__aia001/components/generic-page/paragraph.md") }}}
      </div>
    </div>
  </div>
</div>

Styleguide AIA001.Components.Search.ResultItem
*/
.search-result-item {
  position: relative;
  padding: 1.5rem;
  min-height: 13.375rem;
  background-color: white; }

.search-result-item__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row; }

.search-result-item__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; }

.search-result-item__category {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 0.875rem;
  color: #aca8a4;
  line-height: 1; }

.search-result-item__date {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 0.6875rem;
  color: #7c7871;
  margin-bottom: 0.9375rem; }

.search-result-item__date-label {
  color: #4a4845; }

.search-result-item__date-divider {
  color: #d7d3cd;
  margin: 0 5px; }

.search-result-item__heading {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 1rem;
  line-height: 1.3125rem;
  color: #5e64f9;
  width: calc(100% - 4rem);
  margin-top: 1.125rem;
  margin-bottom: 0.3125rem; }

.search-result-item__link {
  text-decoration: none;
  color: inherit; }
  .search-result-item__link:hover {
    text-decoration: underline; }

.search-result-item__media {
  position: absolute;
  top: 0;
  right: 0;
  width: 4rem;
  height: 4rem;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-bottom: 8px solid #aca8a4;
  background-color: #d7d3cd; }

.search-result-item__image {
  max-width: 100%;
  width: auto;
  height: 100%;
  overflow: hidden;
  text-align: center; }

.search-result-item__image--sprite {
  max-width: 2rem;
  height: 2rem; }

.search-result-item__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%; }

.search-result-item__body {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 1rem;
  line-height: 1.375rem;
  color: #7c7871; }

.search-result-item__body > p {
  margin-top: 0; }

.search-result-item__body-download {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  color: #4a4845; }

.search-result-item__body-download-link {
  text-decoration: none;
  display: inline-block;
  padding-top: 2px; }
  .search-result-item__body-download-link:hover {
    text-decoration: underline; }

.search-result-item__body-download-link-size {
  font-size: 0.875rem;
  color: #aca8a4;
  display: inline-block; }

.search-result-item__body-download-icon {
  width: 24px;
  height: 26px;
  margin-right: 5px; }

.search-result-item--theme-blue .search-result-item__media {
  border-bottom-color: #5e64f9;
  background-color: rgba(94, 100, 249, 0.5);
  color: white; }

.search-result-item--theme-yellow .search-result-item__media {
  border-bottom-color: #fea627;
  background-color: rgba(254, 166, 39, 0.5);
  color: white; }

.search-result-item--theme-red .search-result-item__media {
  border-bottom-color: #f15f5e;
  background-color: rgba(241, 95, 94, 0.5);
  color: white; }

.search-result-item--theme-green .search-result-item__media {
  border-bottom-color: #72d89b;
  background-color: rgba(114, 216, 155, 0.5);
  color: white; }

.search-result-item--theme-teal .search-result-item__media {
  border-bottom-color: #10a3b2;
  background-color: rgba(16, 163, 178, 0.5);
  color: white; }

.search-result-item--theme-grey .search-result-item__media {
  border-bottom-color: #aca8a4;
  background-color: rgba(172, 168, 164, 0.5);
  color: white; }

.search-result-item--theme-sand .search-result-item__media {
  border-bottom-color: #f5ebcd;
  background-color: rgba(245, 235, 205, 0.5);
  color: white; }

.search-result-item--theme-alert .search-result-item__media {
  border-bottom-color: #fb8d60;
  background-color: rgba(251, 141, 96, 0.5);
  color: white; }

.search-result-item--theme-coldgrey .search-result-item__media {
  border-bottom-color: #313236;
  background-color: rgba(49, 50, 54, 0.5);
  color: white; }

/*
Paginated Results List

Markup:
<div class="search-results-list {{ modifier_class }}">
  <div class="search-results-list__items">
    {{> AIA001.Components.Search.ResultItem
        modifier_class="search-results-list__item"
        image=(concat "https://source.unsplash.com/random" "?sig=" (default id (cuid))) }}
    {{> AIA001.Components.Search.ResultItem
        modifier_class="search-results-list__item"
        image=(concat "https://source.unsplash.com/random" "?sig=" (default id (cuid))) }}
    {{> AIA001.Components.Search.ResultItem
        modifier_class="search-results-list__item" }}
    {{> AIA001.Components.Search.ResultItem
        modifier_class="search-results-list__item" }}
    {{> AIA001.Components.Search.ResultItem
        modifier_class="search-results-list__item"
        image=(concat "https://source.unsplash.com/random" "?sig=" (default id (cuid))) }}
    {{> AIA001.Components.Search.ResultItem
        modifier_class="search-results-list__item" }}
    {{> AIA001.Components.Search.ResultItem
        modifier_class="search-results-list__item"
        image=(concat "https://source.unsplash.com/random" "?sig=" (default id (cuid))) }}
  </div>
  {{> AIA001.Components.Pagination
      modifier_class="pagination--circled pagination--only-current search-results-list__pagination" }}
</div>

Styleguide AIA001.Components.Search.ResultsList
*/
.search-results-list__item {
  margin-bottom: 1.25rem; }

.search-results-list__pagination {
  margin-top: 3.4375rem;
  margin-bottom: 5.3125rem; }

/*
Search Filter Tab Bar

Markup:
<div class="search-results-filter-tabbar">
  <div class="search-results-filter-tabbar__container">
    {{> AIA001.Components.Search.FilterTab text="All"
        modifier_class="search-results-filter-tabbar__tab search-results-filter-tab--theme-green" }}
    {{> AIA001.Components.Search.FilterTab text="Practice"
        modifier_class="search-results-filter-tabbar__tab search-results-filter-tab--theme-blue" }}
    {{> AIA001.Components.Search.FilterTab text="Project"
        modifier_class="search-results-filter-tabbar__tab search-results-filter-tab--theme-red" }}
    {{> AIA001.Components.Search.FilterTab text="Resource"
        modifier_class="search-results-filter-tabbar__tab search-results-filter-tab--theme-yellow" }}
  </div>
</div>


Styleguide AIA001.Components.Search.FilterTabBar
*/
.search-results-filter-tabbar {
  background-color: white;
  border-bottom: 2px solid #d7d3cd;
  position: relative;
  min-height: 2.875rem; }

.search-results-filter-tabbar__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
  max-width: 72.5rem;
  margin: 0 auto; }

.search-results-filter-tabbar__tab {
  width: auto;
  padding: 10px; }

/*
Search Filter Tab

Markup:
<a class="search-results-filter-tab {{ modifier_class }}"
  href="#">
  <span class="search-results-filter-tab__container">
    {{> AIA001.Components.SvgSprite
        modifier_class=(default sprite 'practice-icon')
        classes="search-results-filter-tab__icon"
      }}
    <span class="search-results-filter-tab__label">
      <span class="search-results-filter-tab__text">{{ default text 'Filter Text'}}</span>
      <span class="search-results-filter-tab__meta">({{ default count '123' }})</span>
    </span>
  </span>
</a>

.search-results-filter-tab--theme-green - Green theme
.search-results-filter-tab--theme-blue - blue theme
.search-results-filter-tab--theme-red - red theme
.search-results-filter-tab--theme-yellow - yellow theme
.search-results-filter-tab--theme-orange - orange theme

Styleguide AIA001.Components.Search.FilterTab
*/
.search-results-filter-tab {
  display: block;
  text-decoration: none;
  position: absolute;
  width: 100%;
  background-color: white;
  border-left: solid 4px transparent; }
  .search-results-filter-tab:active, .search-results-filter-tab.search-results-filter-tab--is-current {
    outline: none;
    border-left-color: #72d89b; }
    .search-results-filter-tab:active .search-results-filter-tab__text, .search-results-filter-tab.search-results-filter-tab--is-current .search-results-filter-tab__text {
      color: black; }
  .search-results-filter-tab:not(.search-results-filter-tab--is-current):hover {
    border-left-color: #c7efd7; }

.search-results-filter-tab.u-focus:not(.u-focus--no-position):not(.u-focus--disabled) {
  position: absolute;
  z-index: 1; }

.search-results-filter-tab.u-focus:not(.u-focus--no-position):not(.u-focus--disabled).search-results-filter-tab--is-current {
  z-index: 2; }

.search-results-filter-tabbar--open .search-results-filter-tab.u-focus:not(.u-focus--no-position):not(.u-focus--disabled) {
  position: static; }

.search-results-filter-tab__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -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; }

.search-results-filter-tab__label {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-style: normal;
  font-size: 0.875rem; }

.search-results-filter-tab__text {
  color: black; }

.search-results-filter-tab__icon {
  display: initial;
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 6px; }

.search-results-filter-tab__meta {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  color: #aca8a4;
  margin-left: 0.3125rem; }

.search-results-filter-tab__toggle {
  position: absolute;
  top: -1px;
  right: 0;
  z-index: 3;
  padding: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: none;
  border: none;
  background-color: transparent;
  width: 100%;
  text-align: right;
  cursor: pointer; }

.search-results-filter-tabbar--open .search-results-filter-tab__toggle {
  width: 65px; }

.search-results-filter-tab__toggle-icon {
  display: block;
  width: .7rem;
  height: .7rem;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transform-origin: 60% 60%;
          transform-origin: 60% 60%;
  border-right: solid .15rem currentColor;
  border-bottom: solid .15rem currentColor;
  margin: 1rem;
  -webkit-transition: -webkit-transform .2s ease-out;
  transition: -webkit-transform .2s ease-out;
  transition: transform .2s ease-out;
  transition: transform .2s ease-out, -webkit-transform .2s ease-out;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #72d89b;
  cursor: pointer;
  float: right;
  margin-right: 28px; }

.search-results-filter-tabbar--open .search-results-filter-tab__toggle-icon {
  -webkit-transform: rotate(225deg);
          transform: rotate(225deg); }

.search-results-filter-tab--theme-blue .search-results-filter-tab__icon {
  color: #5e64f9; }

.search-results-filter-tab--theme-yellow .search-results-filter-tab__icon {
  color: #fea627; }

.search-results-filter-tab--theme-red .search-results-filter-tab__icon {
  color: #f15f5e; }

.search-results-filter-tab--theme-green .search-results-filter-tab__icon {
  color: #72d89b; }

.search-results-filter-tab--theme-teal .search-results-filter-tab__icon {
  color: #10a3b2; }

.search-results-filter-tab--theme-grey .search-results-filter-tab__icon {
  color: #aca8a4; }

.search-results-filter-tab--theme-sand .search-results-filter-tab__icon {
  color: #f5ebcd; }

.search-results-filter-tab--theme-alert .search-results-filter-tab__icon {
  color: #fb8d60; }

.search-results-filter-tab--theme-coldgrey .search-results-filter-tab__icon {
  color: #313236; }

/*
Search Result Filter Panel

Markup:
<div class="search-results-filter-panel {{modifier_class}}">
  <div class="search-results-filter-panel__container">
    <div class="search-results-filter-panel__header">
      {{> AIA001.Components.SvgSprite
          modifier_class="filter-500"
          classes="search-results-filter-panel__heading-icon" }}
      <h4 class="search-results-filter-panel__heading">Refine</h4>
    </div>
    <div class="search-results-filter-panel__filters">
      {{> AIA001.Components.Search.ResultFilter.Group category="Note Category" open=true}}
      {{> AIA001.Components.Search.ResultFilter.Group category="Project Stage"open=true}}
      {{> AIA001.Components.Search.ResultFilter.Group category="State / Region" open=true}}
    </div>
    <div class="search-results-filter-panel__footer">
      {{> AIA001.Components.Forms.Button
          modifier_class="search-results-filter-panel__button c-button--centered"
          text="Reset"
          type="reset" }}
      {{> AIA001.Components.Forms.Button
        modifier_class="search-results-filter-panel__button c-button--primary button--primary c-button--centered"
        type="submit"
        text="Refine" }}
    </div>
  </div>
</div>

Actions:
<button
  data-toggle-element-classes
  data-toggle-element-classes--on="click"
  data-toggle-element-classes--target=".search-results-filter-panel"
  data-toggle-element-classes--to="search-results-filter-panel--is-open">toggle filter panel</button>


Styleguide AIA001.Components.Search.FilterPanel
*/
.search-results-filter-panel__container {
  width: 100%; }

.search-results-filter-panel__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #4a4845;
  display: none; }

.search-results-filter-panel__heading-icon {
  width: 1.6875rem;
  height: 1.6875rem;
  color: #7c7871;
  margin: 0.75rem; }

.search-results-filter-panel__heading {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-style: normal;
  font-size: 1rem;
  color: white;
  margin: 0; }

.search-results-filter-panel__footer {
  padding-top: 1.25rem;
  padding-bottom: 2.125rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }
  .search-results-filter-panel__footer .search-results-filter-panel__button {
    margin-right: 1.25rem;
    min-width: auto;
    height: 3.375rem;
    padding: 0; }
    .search-results-filter-panel__footer .search-results-filter-panel__button:last-of-type {
      margin: 0; }

/*
Search Result Filter Group

Markup:
<div class="search-result-filter-group {{#if open}}search-result-filter-group--is-open{{/if}}">
  <div class="search-result-filter-group__header"
    data-toggle-element-classes
    data-toggle-element-classes--on="click"
    data-toggle-element-classes--target="(parent) .search-result-filter-group"
    data-toggle-element-classes--to="search-result-filter-group--is-open">
    <h5 class="search-result-filter-group__heading">{{ default title 'Filter Group Name' }}</h5>
    {{> AIA001.Components.SvgSprite
        modifier_class="plus"
        classes="search-result-filter-group__header-icon search-result-filter-group__header-icon--open" }}
    {{> AIA001.Components.SvgSprite
        modifier_class="minus"
        classes="search-result-filter-group__header-icon search-result-filter-group__header-icon--closed" }}
  </div>
  <div class="search-result-filter-group__filters"
       data-search-filter-panel__group="Filter Group Name">
      {{> AIA001.Components.Search.ResultFilter.Item
          inputAttrs="data-search-filter-panel__choice-all "
          label="all" type="checkbox"
          value='all'
          group=(default title 'Filter Group Name') }}
      {{> AIA001.Components.Search.ResultFilter.Item
          inputAttrs="data-search-filter-panel__choice='one' "
          label="one" type="checkbox"
          value='1'
          group=(default title 'Filter Group Name') }}
      {{> AIA001.Components.Search.ResultFilter.Item
          inputAttrs="data-search-filter-panel__choice='one' "
          label="two" type="checkbox"
          value='2'
          group=(default title 'Filter Group Name') }}
      {{> AIA001.Components.Search.ResultFilter.Item
          inputAttrs="data-search-filter-panel__choice='three' "
          label="three" type="checkbox"
          value='3'
          group=(default title 'Filter Group Name') }}
      {{> AIA001.Components.Search.ResultFilter.Item
          inputAttrs="data-search-filter-panel__choice='four' "
          label="four" type="checkbox"
          value='4'
          group=(default title 'Filter Group Name') }}
      {{> AIA001.Components.Search.ResultFilter.Item
          inputAttrs="data-search-filter-panel__choice='five' "
          label="five" type="checkbox"
          value='5'
          group=(default title 'Filter Group Name') }}
      {{> AIA001.Components.Search.ResultFilter.Item
          inputAttrs="data-search-filter-panel__choice='six' "
          label="six" type="checkbox"
          value='6'
          group=(default title 'Filter Group Name') }}
      <input type="hidden" name="ty" value="" data-search-filter-panel__group-values>
  </div>
</div>

Styleguide AIA001.Components.Search.ResultFilter.Group
*/
.search-result-filter-group__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 0.6875rem 1.0625rem;
  cursor: pointer;
  background-color: #d7d3cd;
  border-top: 1px solid #c4c2bf; }

.search-result-filter-group__heading {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 1rem;
  margin: 0; }

.search-result-filter-group__header-icon {
  width: 1rem;
  height: 1rem;
  color: #7c7871; }

.search-result-filter-group__header-icon--open {
  display: inline; }

.search-result-filter-group__header-icon--closed {
  display: none; }

.search-result-filter-group--is-open .search-result-filter-group__header-icon--open {
  display: none; }

.search-result-filter-group--is-open .search-result-filter-group__header-icon--closed {
  display: inline; }

.search-result-filter-group__filters {
  padding: 1.875rem 1.125rem;
  display: none;
  background-color: #e9e7e4; }

.search-result-filter-group--is-open .search-result-filter-group__filters {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; }

/*
Search Result Filter Item

Markup:
{{> AIA001.Components.Forms.Option
    inputAttrs=(default inputAttrs '')
    classes="search-result-filter-item"
    modifier_class=(default type (sample 'radio' 'checkbox'))
    label=(default label "Some label")
    id=(default id (cuid)) }}

Styleguide AIA001.Components.Search.ResultFilter.Item
*/
.search-result-filter-item {
  margin: 0;
  margin-bottom: 0.625rem;
  position: relative; }
  .search-result-filter-item .field-input-option__label {
    cursor: pointer; }
  .search-result-filter-item .field-input-option__text {
    font-family: din, Helvetica, Arial, sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 1rem;
    color: #4a4845; }

/*
Search Result Sorting

Markup:
<div class="search-results-sorting {{modifier_class}}">
  <h2 class="search-results-sorting__heading">{{ default count "1 - 8 of 202"}} results for ‘{{ default query "Management" }}’</h2>
  <div class="search-results-sorting__actions">
    {{#> AIA001.Components.Forms.Button
        modifier_class="search-results-sorting__action search-results-sorting__action--submit c-button--primary button--primary c-button--icon button--icon button--center"
        attrs=(concat
          'data-toggle-element-classes '
          'data-toggle-element-classes--target=".search-results-page__filter-panel" '
          'data-toggle-element-classes--on="click" '
          'data-toggle-element-classes--to="search-results-filter-panel--is-open" '
          )}}
      {{> AIA001.Components.SvgSprite
          modifier_class="filter-500"
          classes="c-button__icon button__icon"
        }}
      <span class="c-button__label button__label">Refine</span>
    {{/ AIA001.Components.Forms.Button }}
    {{> AIA001.Components.Forms.Select
      modifier_class="search-results-sorting__action search-results-sorting__action--sort"
      id="search-result-header__action--sort"
      name="search-result-header__action--sort" }}
  </div>
</div>

Styleguide AIA001.Components.Search.Sorting
*/
.search-results-sorting {
  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;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  max-width: 72.5rem;
  margin: 0 auto;
  margin-top: 1.3125rem;
  margin-bottom: 2.625rem;
  padding: 0 1.25rem; }

.search-results-sorting__heading {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-style: normal;
  font-size: 1.75rem;
  text-align: left;
  margin: 0;
  width: 100%;
  color: #4a4845; }

.search-results-sorting__actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  margin-top: 1.0625rem; }

.search-results-sorting__action {
  width: 100%;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1; }
  .search-results-sorting__action:not(:last-child) {
    margin-right: 1.25rem; }

.search-results-sorting__action {
  height: 3.375rem; }

.search-results-sorting__action--submit {
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  -ms-flex-negative: 1;
      flex-shrink: 1;
  width: auto;
  text-align: center;
  min-width: 4rem;
  padding: 0; }

.search-results-sorting__action--submit .button__label {
  margin: 0 auto; }

.search-results-sorting__action--submit .button__icon {
  display: none; }

/*
Search Results

Markup:
{{> AIA001.Components.Search.FilterTabBar }}
{{#> AIA001.Page.Generic
  modifier_class="search-results-page"}}
  <div class="c-page__content page__content">
    <div class="page__body search-results-page__body">
      {{> AIA001.Components.Search.Sorting
          modifier_class="search-results-page__results-header" }}
      <div class="search-results-page__content">
        {{> AIA001.Components.Search.ResultsList
            modifier_class="search-result-page__result-list" }}
      </div>
      <div class="search-results-page__aside">
        {{> AIA001.Components.Search.FilterPanel
            modifier_class="search-results-page__filter-panel" }}
      </div>
    </div>
  </div>
{{/AIA001.Page.Generic }}

Styleguide AIA001.Page.SearchResults
*/
/*
Search Results (No Results)

Markup:
{{> AIA001.Components.Search.FilterTabBar }}
{{#> AIA001.Page.Generic
  modifier_class="search-results-page"}}
  <div class="c-page__content page__content">
    <div class="page__body search-results-page__body">
      {{> AIA001.Components.Search.Sorting
          modifier_class="search-results-page__results-header"
          count="0" }}
      <div class="search-results-page__content">
        {{> AIA001.Components.Search.ErrorCard
            modifier_class="search-results-page__error-no-results" }}
        {{#> AIA001.Components.Notes.NoteCardLayout
            modifier_class="note-card-layout--theme-white search-results-page__popular-notes" }}
          {{> AIA001.Components.Notes.CardGrid
            modifier_class="note-card-grid--tiled"
            title='Popular Notes'
            more=true
            notes=(fill 3) }}
        {{/AIA001.Components.Notes.NoteCardLayout }}
      </div>
      <div class="search-results-page__aside">
        {{> AIA001.Components.Search.FilterPanel
            modifier_class="search-results-page__filter-panel" }}
      </div>
    </div>
  </div>
{{/AIA001.Page.Generic }}

Styleguide AIA001.Page.SearchResultsEmpty
*/
.search-results-page {
  background-color: #f4f3f1; }

.search-results-page__header {
  width: 100%; }

.search-results-page__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
  max-width: 76.25rem;
  padding: 0;
  margin: 0 auto; }

.search-results-page__results-header {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1; }

.search-results-page__aside {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2; }

.search-results-page__content {
  -webkit-box-ordinal-group: 4;
      -ms-flex-order: 3;
          order: 3; }

.search-results-page__filter-panel {
  display: none; }

.search-results-page__filter-panel--is-open {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

/*
Search Result Errors

Simple cards that display an error

Markup:
<div class="search-results-error-card {{modifier_class}}">
  <div class="search-results-error-card__container">
    {{>AIA001.Components.SvgSprite
        modifier_class="question"
        classes="search-results-error-card__icon" }}
    <span class="search-results-error-card__message">{{ default message 'Sorry, there are no results for Mannnnjhera' }}</span>
  </div>
</div>

Styleguide AIA001.Components.Search.ErrorCard
*/
.search-results-error-card {
  background: white; }

.search-results-error-card__container {
  padding: 1.25rem 1.875rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start; }

.search-results-error-card__icon {
  width: 2.8125rem;
  height: 2.8125rem;
  min-width: 2.8125rem;
  min-height: 2.8125rem;
  margin-right: 0.9375rem; }

.search-results-error-card__message {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-style: normal;
  font-size: 1.375rem; }

.search-dropdown__results {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 1rem;
  color: #7c7871;
  display: none;
  background: white;
  width: 100%;
  z-index: 900;
  position: absolute;
  top: 3.875rem;
  left: 0;
  -webkit-box-shadow: 0 5px 5px 0px rgba(0, 0, 0, 0.1);
          box-shadow: 0 5px 5px 0px rgba(0, 0, 0, 0.1); }

.search-dropdown--is-open .search-dropdown__results {
  display: block; }

.search-dropdown__results-container:before {
  content: " ";
  width: 90%;
  margin: 0 auto;
  height: 1px;
  background-color: #252422; }

.search-dropdown__group {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  color: #4a4845;
  padding: 0.9375rem;
  padding-top: 0.46875rem; }

.search-dropdown__group-heading {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-style: normal;
  font-size: 0.875rem;
  color: #aca8a4;
  text-transform: uppercase; }

.search-dropdown__result-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  padding: 0.5rem 0;
  color: inherit; }
  .search-dropdown__result-item:hover {
    text-decoration: underline; }

.search-dropdown__result-item-icon {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  margin-top: 0.375rem;
  margin-right: 0.5625rem;
  width: 1rem;
  height: 1rem;
  color: #72d89b; }

.search-dropdown__result-item--autocomplete {
  text-decoration: none;
  padding: 0.5rem 0; }

.search-dropdown__result-item--related-query {
  text-decoration: none; }

.search-dropdown__group--footer {
  background: #f4f3f1;
  padding: 0.9375rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -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: start;
      -ms-flex-align: start;
          align-items: flex-start; }

.search-dropdown__action-button {
  text-decoration: none;
  color: #4a4845;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto; }

.search-dropdown__action-icon {
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.5625rem;
  border-radius: 1000px;
  background-color: #72d89b;
  color: #00412c; }

.search-dropdown__action-button:hover .search-dropdown__action-icon {
  background-color: #005036;
  color: white; }

.search-dropdown__action-label {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-style: normal;
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: normal; }

@media (max-width: 26.5em) {
  .site-header--global-search-is-open .global-search {
    height: 161px; } }

@media (min-width: 26.625em) {
  /**
 * Different active state for search button on larger screens
 */
  .global-search-toggle-button {
    width: 4rem;
    height: 4rem;
    min-width: 4rem;
    min-height: 4rem; }
  .global-search-toggle-button__icon {
    width: 2.375rem;
    height: 2.375rem;
    min-width: 2.375rem;
    min-height: 2.375rem; }
  .global-search--moves .global-search__form {
    min-height: auto; }
  .global-search__field {
    font-size: 1rem; }
  .global-search__index-link {
    font-size: 1.125rem; }
  .global-search__field-input,
  input[type=text].global-search__field-input {
    padding: 1.125rem;
    padding-left: 2rem;
    padding-right: 11.125rem;
    height: 5.1875rem; }
  .global-search__submit {
    visibility: inherit; }
  .global-search__submit {
    width: 9.5625rem;
    height: 3.1875rem;
    right: 1rem; }
  .global-search__submit-text {
    display: block; }
  .global-search__submit-icon {
    margin-right: 0.5rem; }
  .global-search--is-loading .global-search__loading-icon {
    margin-right: 0.5rem; }
  .global-search--is-loading .global-search__submit-text {
    display: block; }
  .search-results-error-card__container {
    padding: 2.5rem 3.125rem;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; }
  .search-results-error-card__icon {
    width: 4.5625rem;
    height: 4.5625rem;
    min-width: 4.5625rem;
    min-height: 4.5625rem;
    margin-right: 1.875rem; }
  .search-results-error-card__message {
    font-family: din, Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-style: normal;
    font-size: 1.5rem; }
  .search-dropdown__results {
    top: 5.25rem; }
  .search-dropdown__group {
    padding: 1.875rem;
    padding-top: 0.9375rem; }
  .search-dropdown__group--footer {
    padding: 0.9375rem;
    padding-left: 1.875rem; }
  .search-dropdown__group-heading {
    font-size: 1rem; }
  .search-dropdown__result-item--related-query {
    font-size: 1.25rem; } }

@media (min-width: 48.0625em) {
  .global-search--moves .global-search__container {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row; }
  .global-search__field {
    font-size: 1.75rem; }
  .global-search__cancel-button {
    right: 11.875rem;
    width: 2.875rem;
    height: 2.875rem;
    display: block;
    visibility: hidden; }
  .global-search__cancel-button--is-active {
    visibility: inherit; }
  .global-search__cancel-button-icon {
    fill: #aca8a4; }
  .global-search--moves .global-search__index-link {
    position: static;
    padding: 1rem 2.0625rem;
    font-size: 1.125rem;
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    margin-left: 0.625rem;
    background: transparent;
    width: auto; }
  .site-header--global-search-is-open .global-search {
    height: 131px; }
  .search-result-item {
    padding: 1.875rem 2.125rem; }
  .search-result-item__media {
    margin-right: 2rem;
    position: static;
    width: 154px;
    min-width: 9.625rem;
    min-height: 9.625rem; }
  .search-result-item__image--sprite {
    max-width: 4.8125rem;
    height: 4.8125rem; }
  .search-result-item__heading {
    margin-top: 0.9375rem;
    font-size: 1.25rem; }
  .search-results-filter-panel__header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
  .search-results-filter-panel__footer {
    padding-left: 0;
    padding-right: 0; }
  .search-results-filter-tabbar {
    border-color: #d7d3cd; }
  .search-results-filter-tabbar__container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    width: 100%;
    max-width: 72.5rem;
    margin: 0 auto;
    position: static;
    background: none; }
  .search-results-filter-tabbar__tab {
    width: auto; }
  .search-results-filter-tab {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    text-decoration: none;
    border-bottom: 4px solid transparent;
    position: relative;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-line-pack: center;
        align-content: center;
    padding: 1.25rem;
    border-left: none; }
    .search-results-filter-tab:active, .search-results-filter-tab.search-results-filter-tab--is-current {
      outline: none;
      border-bottom-color: #72d89b; }
      .search-results-filter-tab:active .search-results-filter-tab__text, .search-results-filter-tab.search-results-filter-tab--is-current .search-results-filter-tab__text {
        color: black; }
    .search-results-filter-tab:not(.search-results-filter-tab--is-current):hover {
      border-bottom-color: #c7efd7; }
  .search-results-filter-tab {
    position: relative;
    background-color: transparent; }
  .search-results-filter-tab.u-focus:not(.u-focus--no-position):not(.u-focus--disabled) {
    position: relative; }
  .search-results-filter-tab__container {
    width: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column; }
  .search-results-filter-tab__label {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 1.25rem 0;
    font-size: 0.875rem;
    padding: 0.625rem; }
  .search-results-filter-tab__icon {
    width: 2.5rem;
    height: 2.5rem; }
  .search-results-filter-tab__toggle {
    display: none; }
  .search-results-sorting {
    padding-left: 0;
    padding-right: 0; }
  .search-results-sorting__action--submit {
    min-width: 7.5rem; }
  .search-results-sorting__action--submit .c-button__container {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center; }
  .search-results-sorting__action--submit .button__icon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
  .search-results {
    padding-top: 2.5rem;
    padding-left: 7.5rem;
    padding-right: 7.5rem;
    padding-bottom: 6.25rem; }
  .search-results__heading {
    padding: 0; }
  .search-dropdown__result-item--autocomplete {
    font-size: 1.75rem; }
  .global-search--moves .search-dropdown__results {
    width: calc(100% - (126px + 86px + 10px)); } }

@media (min-width: 64.0625em) {
  .search-results-sorting {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding: 0;
    margin-top: 4.5rem;
    margin-bottom: 2.625rem; }
  .search-results-sorting__heading {
    -webkit-box-flex: 1;
        -ms-flex: 1 0 auto;
            flex: 1 0 auto;
    width: calc(100% - 180px);
    font-size: 2.625rem; }
  .search-results-sorting__actions {
    margin-top: 0; }
  .search-results-sorting__action--submit {
    display: none; }
  .search-results-sorting__action--sort {
    max-width: 11.25rem;
    width: 100%; }
  .search-results-sorting__action--submit .button__label {
    display: block; }
  .search-results-page__body {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding: 0 1.875rem; }
  .search-results-page__error-no-results {
    margin-bottom: 1.25rem; }
  .search-results-page__results-header {
    width: 100%; }
  .search-results-page__aside {
    width: 16.25rem; }
  .search-results-page__content {
    width: calc(100% - 298px); }
  .search-results-page__filter-panel {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
  .search-results-page__popular-notes {
    padding-top: 2.4375rem;
    padding-bottom: 3.75rem;
    padding-left: 1.875rem;
    padding-right: 1.875rem; }
    .search-results-page__popular-notes .note-card-grid--tiled .note-card {
      width: auto;
      -ms-flex-preferred-size: auto;
          flex-basis: auto;
      -webkit-box-flex: 1;
          -ms-flex-positive: 1;
              flex-grow: 1;
      height: 12.8125rem; } }

/*
Site Index Page

Markup:
{{#> AIA001.Page.Generic
  modifier_class=(concat
                  modifier_class
                  " "
                  "site-index-page") }}
  <div class="c-page__content page__content site-index-page__content">
    <header class="c-page__header page__header">
      <h3 class="c-page__heading page__heading">{{ default title "A-Z Index" }}</h3>
      {{> AIA001.Components.IndexLinkGrid.Dropdown
          modifier_class="site-index-page__jump-list" }}
    </header>
    <main class="c-page__body page__body site-index-page__body">
      {{> AIA001.Components.SiteIndex.Group title="A"}}
      {{> AIA001.Components.SiteIndex.Group title="B"}}
      {{> AIA001.Components.SiteIndex.Group title="C"}}
      {{> AIA001.Components.SiteIndex.Group title="D"}}
      {{> AIA001.Components.SiteIndex.Group title="E"}}
      {{> AIA001.Components.SiteIndex.Group title="F"}}
      {{> AIA001.Components.SiteIndex.Group title="G"}}
      {{> AIA001.Components.SiteIndex.Group title="H"}}
      {{> AIA001.Components.SiteIndex.Group title="I"}}
      {{> AIA001.Components.SiteIndex.Group title="J"}}
      {{> AIA001.Components.SiteIndex.Group title="K"}}
      {{> AIA001.Components.SiteIndex.Group title="L"}}
      {{> AIA001.Components.SiteIndex.Group title="M"}}
      {{> AIA001.Components.SiteIndex.Group title="N"}}
      {{> AIA001.Components.SiteIndex.Group title="O"}}
      {{> AIA001.Components.SiteIndex.Group title="P"}}
      {{> AIA001.Components.SiteIndex.Group title="Q"}}
      {{> AIA001.Components.SiteIndex.Group title="R"}}
      {{> AIA001.Components.SiteIndex.Group title="S"}}
      {{> AIA001.Components.SiteIndex.Group title="T"}}
      {{> AIA001.Components.SiteIndex.Group title="U"}}
      {{> AIA001.Components.SiteIndex.Group title="V"}}
      {{> AIA001.Components.SiteIndex.Group title="W"}}
      {{> AIA001.Components.SiteIndex.Group title="X"}}
      {{> AIA001.Components.SiteIndex.Group title="Y"}}
      {{> AIA001.Components.SiteIndex.Group title="Z"}}
    </main>
    <nav class="c-page__aside page__aside site-index-page__aside">
      {{> AIA001.Components.IndexLinkGrid }}
    </nav>
  </div>
{{/AIA001.Page.Generic }}

Styleguide AIA001.Page.SiteIndex
*/
/*
Site Index Group

Markup:
<div class="site-index-page__group">
  <div class="site-index-page__group-header">
    <h3 class="site-index-page__group-heading"><a id="{{ lowercase (default title 'A')}}">{{ default title 'A'}}</a></h3>
    <button class="site-index-page__group-toggle-button u-focus u-focus--blue"
            data-toggle-element-classes
            data-toggle-element-classes--to="site-index-page__group--is-open"
            data-toggle-element-classes--target="(parent) .site-index-page__group">
      {{> AIA001.Components.SvgSprite
          modifier_class="plus-500"
          classes="site-index-page__group-toggle-icon site-index-page__group-toggle-icon--open" }}
      {{> AIA001.Components.SvgSprite
          modifier_class="minus-500"
          classes="site-index-page__group-toggle-icon site-index-page__group-toggle-icon--close" }}
    </button>
  </div>
  <ul class="site-index-page__group-list {{#if (default columns true)}}u-columns u-columns--2@mediumup u-columns--3@largeup{{/if}}">
  {{#each (fill 300 'Link item')}}
    <li class="site-index-page__item">
      <a class="site-index-page__link"
          href="#">{{ this }}</a>
    </li>
  {{/each}}
  </ul>
</div>

Styleguide AIA001.Components.SiteIndex.Group
*/
.site-index-page .page__header .tabs-container {
  margin: 0 -15px 0 -15px;
  width: 110%; }

.site-index-page__group {
  list-style: none;
  padding: 0;
  margin-top: 0.3125rem; }

.site-index-page__group:first-child {
  margin-top: 1.875rem; }

.site-index-page__group-header {
  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;
  min-height: 2.75rem; }

.site-index-page__group--bordered .site-index-page__group-header {
  border-top: 1px solid #d7d3cd; }

.site-index-page__group-heading {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-style: normal;
  font-size: 1.5rem;
  margin: 0;
  padding: 0; }

.site-index-page__group-toggle-button {
  width: 3.25rem;
  height: 3.25rem;
  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;
  border: 0;
  background-color: transparent; }

.site-index-page__group-toggle-icon {
  width: 2rem;
  height: 2rem;
  color: #72d89b; }

.site-index-page__group-toggle-icon--close {
  display: none; }

.site-index-page__group-toggle-icon--open {
  display: block; }

.site-index-page__group--is-open .site-index-page__group-toggle-icon--close {
  display: block; }

.site-index-page__group--is-open .site-index-page__group-toggle-icon--open {
  display: none; }

.site-index-page__group-list {
  display: none;
  list-style: none;
  padding: 0; }

.site-index-page__group--is-open .site-index-page__group-list {
  display: block; }

.site-index-page__item {
  list-style: none;
  padding-bottom: 0.6875rem;
  display: block; }

.site-index-page__link {
  text-decoration: none; }

.site-index-page__link:hover {
  text-decoration: underline; }

.site-index-page__jump-list {
  display: block;
  margin: 0 auto;
  width: calc(100% - 30px); }

.site-index-page .site-index-page__aside {
  display: none;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 15.9375rem;
          flex: 1 0 15.9375rem;
  padding-left: 45px;
  margin-top: -2.625rem; }

@media (min-width: 48.0625em) {
  .index-link-grid__container {
    max-width: 20.625rem; }
  .site-index-page .page__header .tabs-container {
    margin: 0;
    width: 100%; }
  .page--with-aside .site-index-page__body {
    -ms-flex-preferred-size: 67%;
        flex-basis: 67%;
    width: 67%;
    max-width: 48.9375rem; }
  .page.site-index-page .site-index-page__aside {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
        -ms-flex: 1 0 1px;
            flex: 1 0 1px; }
    .page.site-index-page .site-index-page__aside .sticky-wrapper {
      width: 100%; }
  .site-index-page__group {
    margin-top: 3.5rem; }
  .site-index-page__group:first-child,
  .site-index-page__group--compact {
    margin-top: 0; }
  .site-index-page__group-heading {
    font-family: din, Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-style: normal;
    font-size: 1.5rem; }
  .site-index-page__group-anchor:link,
  .site-index-page__group-anchor:active,
  .site-index-page__group-anchor:visited,
  .site-index-page__group-anchor {
    font-size: 1.5rem;
    display: block;
    padding-top: 1.25rem;
    text-decoration: none;
    color: inherit; }
  .site-index-page__group-toggle-button {
    display: none; }
  .site-index-page__group-list {
    display: block; }
  .site-index-page__jump-list {
    display: none; } }

/*
Site Map Page

A single column page that contains many `flex-wrap`'d `accordion-navigation`'s

Markup:
{{#> AIA001.Page.Generic
     classes="site-map-page page--wrap-body page--body-horizontal page--space-between" }}
  <div class="c-page__content page__content">
    <div class="c-page__heading page__header">
      <h1 class="c-page__header page__heading">{{ default title "Page title" }}</h1>
      <div class="c-page__actions page__actions">
        <button class="page__action-button site-map-page__expand-all-button u-focus u-focus--blue-light u-focus--rounded"
                data-toggle-element-classes
                data-toggle-element-classes--on="click"
                data-toggle-element-classes--target=".accordion-navigation-item,.site-map-page__expand-all-button"
                data-toggle-element-classes--to="accordion-navigation-item--is-open,site-map-page__expand-all-button--open">
          {{> AIA001.Components.SvgSprite
              classes="page__action-icon"
              modifier_class="plus-small" }}
          <span class="page__action-label">Expand All</span>
        </button>
      </div>
    </div>
    <main class="c-page__body page__body site-map-page__body">
      {{> AIA001.Components.AccordionNavigationGroup
          classes = "site-map-page__accordion-navigation-group"
          modifier_class = "accordion-navigation-item--as-header accordion-navigation-item--theme-blue"
          spriteName = "practice-icon"
          topLevelTitle = "Practice" }}
      {{> AIA001.Components.AccordionNavigationGroup
          classes = "site-map-page__accordion-navigation-group"
          modifier_class = "accordion-navigation-item--as-header accordion-navigation-item--theme-red"
          spriteName = "project-icon"
          topLevelTitle = "Project" }}
      {{> AIA001.Components.AccordionNavigationGroup
          classes = "site-map-page__accordion-navigation-group"
          modifier_class = "accordion-navigation-item--as-header accordion-navigation-item--theme-yellow"
          spriteName = "resource-icon"
          topLevelTitle = "Resource" }}
      {{> AIA001.Components.AccordionNavigationGroup
          classes = "site-map-page__accordion-navigation-group"
          modifier_class = "accordion-navigation-item--as-header accordion-navigation-item--theme-green"
          spriteName = "notepack-icon"
          topLevelTitle = "Notepacks" }}
      {{> AIA001.Components.AccordionNavigationGroup
          classes = "site-map-page__accordion-navigation-group"
          modifier_class = "accordion-navigation-item--as-header accordion-navigation-item--theme-grey"
          spriteName = "help"
          topLevelTitle = "Help & Info" }}
      {{> AIA001.Components.AccordionNavigationGroup
          classes = "site-map-page__accordion-navigation-group"
          modifier_class = "accordion-navigation-item--as-header accordion-navigation-item--theme-grey"
          spriteName = "contact"
          topLevelTitle = "Contact & Legal" }}
    </main>
    <footer class="c-page__footer page__footer">
        <div class="page__actions">
          <button class="page__action-button site-map-page__expand-all-button u-focus u-focus--blue-light u-focus--rounded"
                  data-toggle-element-classes
                  data-toggle-element-classes--on="click"
                  data-toggle-element-classes--target=".accordion-navigation-item,.site-map-page__expand-all-button"
                  data-toggle-element-classes--to="accordion-navigation-item--is-open,site-map-page__expand-all-button--open">
            {{> AIA001.Components.SvgSprite
                classes="page__action-icon"
                modifier_class="plus-small" }}
            <span class="page__action-label">Expand All</span>
          </button>
        </div>
    </footer>
  </div>
{{/AIA001.Page.Generic }}


Styleguide AIA001.Page.SiteMap
*/
.site-map-page__body {
  width: 100%; }

.site-map-page__accordion-navigation-group {
  margin-bottom: 6.1875rem;
  width: 100%; }

@media (min-width: 48.5em) {
  .site-map-page__accordion-navigation-group {
    width: 22.75rem; }
  .site-map-page__body {
    max-width: 48.5rem; } }

@media (min-width: 72.75em) {
  .site-map-page__accordion-navigation-group {
    width: 22.75rem; }
  .site-map-page__body {
    max-width: 72.75rem; } }

/*
Home Page

Markup:
{{#> AIA001.Components.Page }}
  {{#> AIA001.Components.Hero.Block
       modifier_class="hero hero--centered home-page__hero u-cms-background u-cms-background--cover u-cms-background--center"
       id=(cuid)
       backgroundImage=(sample
        "/static/theme/images/aia001-homepage-banner-1.jpg"
        "/static/theme/images/aia001-homepage-banner-2.jpg"
        "/static/theme/images/aia001-homepage-banner-3.jpg"
        "/static/theme/images/aia001-homepage-banner-4.jpg"
        "/static/theme/images/aia001-homepage-banner-5.jpg"
        "/static/theme/images/aia001-homepage-banner-6.jpg"
        ) }}
    {{>AIA001.Components.Search.GlobalSearch
       modifier_class="global-search home-page__hero-global-search"
       id=(concat "hero__" (cuid)) }}
  {{/AIA001.Components.Hero.Block }}
  {{> AIA001.Components.Notes.PortalLinkLayout }}
  <div class="note-card-layout">
  {{> AIA001.Components.Notes.CardGrid
    modifier_class="note-card-grid--tiled"
    title='Popular Notes'
    more=true
    notes=(fill 5) }}
  {{> AIA001.Components.Notes.CardGrid
    modifier_class="note-card-grid--tiled"
    title='Recently Edited'
    more=true
    notes=(fill 5) }}
  </div>
  <div class="note-card-layout note-card-layout--tinted">
    {{> AIA001.Components.Notes.CardGrid
      modifier_class="note-card-grid--tiled note-card-grid--tinted"
      title='Recently Viewed'
      notes=(fill 5) }}
  </div>
{{/ AIA001.Components.Page }}

Weight: 200

Styleguide AIA001.Page.Home
*/
.home-page__hero {
  width: 100%;
  z-index: 200; }
  .home-page__hero .global-search__field-input {
    outline-offset: 0px;
    outline: 2px solid rgba(255, 255, 255, 0.01);
    -webkit-box-shadow: 0 2px 24px 0 rgba(0, 0, 0, 0.25);
            box-shadow: 0 2px 24px 0 rgba(0, 0, 0, 0.25); }

.global-search__field-input::-ms-clear {
  display: none; }

.home-page__hero-global-search {
  background: transparent;
  max-width: 47.125rem;
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none; }

@media (min-width: 48.0625em) {
  .home-page__hero {
    height: 29.6875rem; } }

/*
Notes

Weight: 50

Styleguide AIA001.Components.Notes
*/
/*
Note Article

Actual content of the note

Markup:
<article class="note-article {{modifier_class}}">
  <header class="c-page__header page__header note-article__header">
    <h2 class="c-page__heading page__heading note-article__heading">Title</h2>
    <div class="c-page__meta page__meta note-article__meta">
      <div class="note-article__published-date">Edited 26 March 2013</div>
    </div>
  </header>
  <div class="c-page__body page__body note-page__body note-article__body">
    <section class="note-article__intro wysiwyg-area">
      <img src="//placehold.it/720x480">
      <p>The introduction of the Fair Work Act 2009 saw the arrival of statutory flexible working arrangements for national system employees in Australia. At present, the right to request flexible working arrangements (such as change in working hours) under the National Employment Standards (NES) is limited to a parent for the care of their child if the child is:</p>
    </section>
    <section class="note-article__content wysiwyg-area">
      <h5>Cultural awareness in architectural practice </h5>
      <p>The following can be implemented in sole, small, medium and large practice:
      </p>
      <ul>
        <li>
          Engage directors and staff in cultural awareness training&nbsp;
          <span class="MsoHyperlink">
          </span>
        </li>
        <li>Encourage your practice to participate in {{AIA001.Components.Tooltips.Trigger id="ExampleTooltip" title="National Reconciliation Week" }}{{AIA001.Components.Tooltips id="ExampleTooltip" title="National Reconciliation Week" }} activities. Refer:
          <a href="http://www.reconciliation.org.au/nrw/" target="_blank">http://www.reconciliation.org.au/nrw/</a>
        </li>
        <li>Encourage your practice to undertake their own RAP (Reconciliation Action Plan). Refer:
          <a href="http://www.architecture.com.au/docs/default-source/vic-policy/vic_reconciliation_action_plan_v11.pdf" target="_blank">Victorian Chapter RAP</a>
          <a href="http://www.architecture.com.au/docs/default-source/vic-policy/vic_reconciliation_action_plan_v11.pdf?sfvrsn=4%20">
          </a>
          <span class="MsoHyperlink">
          </span>
        </li>
        <li>
          <span class="MsoHyperlink">
            <span style="mso-ascii-font-family:Calibri;mso-ascii-theme-font:
          minor-latin;mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin;
          mso-bidi-font-weight:bold">
              <span class="MsoHyperlink">
                <span style="mso-ascii-font-family:Calibri;mso-ascii-theme-font:
          minor-latin;mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin;
          mso-bidi-font-weight:bold">
                  <span style="mso-ascii-font-family:Calibri;
          mso-ascii-theme-font:minor-latin;mso-hansi-font-family:Calibri;mso-hansi-theme-font:
          minor-latin;mso-bidi-font-weight:bold">Encourage an understanding and respect for Aboriginal culture in daily practice:</span>
                </span>
              </span>
            </span>
          </span>
          <span class="MsoHyperlink">
          </span>
          <ul>
            <li>
              <span class="MsoHyperlink">
                <span style="mso-ascii-font-family:Calibri;mso-ascii-theme-font:
          minor-latin;mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin;
          mso-bidi-font-weight:bold">During the planning and development of a property, consider an acknowledgement of the place or land on which
                  buildings / projects are located. Most parts of Australia contain important places that are of significance
                  to Aboriginal people. This can include different types of significance, such as traditional, contemporary and
                  political. Most local councils have resources available on their website about significant Aboriginal places.</span>
              </span>
              <span class="MsoHyperlink">
                <span style="mso-ascii-font-family:Calibri;mso-ascii-theme-font:
          minor-latin;mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin;
          mso-bidi-font-weight:bold">
                </span>
              </span>
            </li>
            <li>
              <span class="MsoHyperlink">
                <span style="mso-ascii-font-family:Calibri;mso-ascii-theme-font:
          minor-latin;mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin;
          mso-bidi-font-weight:bold">
                  <span class="MsoHyperlink">Add an acknowledgment of country on your individual or practice email signature, ie
                    <i style="mso-bidi-font-style:normal">
                      - I acknowledge and pay respect to the Traditional Owners of country throughout Australia, their culture and Elders past,
                      present and future</i>
                  </span>
                </span>
              </span>
            </li>
          </ul>
          <p>
          </p>
        </li>
      </ul>
      <ul>
        <li>Increase employment opportunities for Aboriginal and Torres Strait Islander People. Refer:&nbsp;
          <a href="http://closingthegap.pmc.gov.au/" target="_blank">Closing the Gap</a>
          <span class="MsoHyperlink">
          </span>
          <ul>
            <li>
              <span class="MsoHyperlink">
                <span style="mso-ascii-font-family:Calibri;mso-ascii-theme-font:
          minor-latin;mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin;
          mso-bidi-font-weight:bold">Consider including a statement in recruitment advertisements encouraging Aboriginal and Torres Strait Islander
                  people to apply</span>
              </span>
            </li>
          </ul>
          <p>
          </p>
        </li>
        <li>
          <p>Provide mentorship opportunities for Aboriginal and Torres Strait Islander People.</p>
          <p>The Centre for Cultural Competence Australia (CCCA) provides nationally accredited courses. Refer:
            <a href="https://www.ccca.com.au/content/home" target="_blank">https://www.ccca.com.au</a>
            Check for organisations that may offer this service in your local state or territory. For example, in Victoria,
            <span style="mso-bidi-font-weight:bold">Indigenous Architecture and Design Victoria (</span>
            <span>IADV)</span>
            runs cultural awareness training specifically aimed at the architecture profession. Refer:
            <a href="http://iadv.org.au/" target="_blank">
              <span style="mso-bidi-font-weight:bold">http://iadv.org.au/</span>
            </a>
          </p>
        </li>
      </ul>
      <h5>Ten strategies for effective cross-cultural communication</h5>
      <ol>
        <li>
          <span style="mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;
          mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">Ask questions</span>
        </li>
        <li>
          <span style="mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;
          mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">Distinguish perspectives
          </span>
        </li>
        <li>
          <span style="mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;
          mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">Build self-awareness
          </span>
        </li>
        <li>
          <span style="mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;
          mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">
            <span style="mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;
          mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin;mso-bidi-font-family:
          Calibri;mso-bidi-theme-font:minor-latin">
              <span style="mso-list:Ignore">
              </span>
            </span>
            <span style="mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;
          mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">Recognise the complexity
            </span>
          </span>
        </li>
        <li>
          <span style="mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;
          mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">
            <span style="mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;
          mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">
              <span style="mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;
          mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">Avoid stereotyping
              </span>
            </span>
          </span>
        </li>
        <li>
          <span style="mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;
          mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">
            <span style="mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;
          mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">
              <span style="mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;
          mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">
                <span style="mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;
          mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">Respect differences</span>
              </span>
            </span>
          </span>
        </li>
        <li>
          <span style="mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;
          mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">
            <span style="mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;
          mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">
              <span style="mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;
          mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">
                <span style="mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;
          mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">
                  <span style="mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;
          mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">Listen actively</span>
                </span>
              </span>
            </span>
          </span>
          <span style="mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;
          mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">
            <span style="mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;
          mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">
              <span style="mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;
          mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">
                <span style="mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;
          mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">
                  <span style="mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;
          mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">
                  </span>
                </span>
              </span>
            </span>
          </span>
        </li>
        <li>
          <span style="mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;
          mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">
            <span style="mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;
          mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">
              <span style="mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;
          mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">
                <span style="mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;
          mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">
                  <span style="mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;
          mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">
                    <span style="mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;
          mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">Be honest</span>
                    &nbsp;</span>
                </span>
              </span>
            </span>
          </span>
          <span style="mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;
          mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">
            <span style="mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;
          mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">
              <span style="mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;
          mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">
                <span style="mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;
          mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">
                  <span style="mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;
          mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">
                  </span>
                </span>
              </span>
            </span>
          </span>
        </li>
        <li>
          <span style="mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;
          mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">
            <span style="mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;
          mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">
              <span style="mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;
          mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">
                <span style="mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;
          mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">
                  <span style="mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;
          mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">
                    <span style="mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;
          mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">Be flexible</span>
                  </span>
                </span>
              </span>
            </span>
          </span>
        </li>
        <li>
          <span style="mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;
          mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">
            <span style="mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;
          mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">
              <span style="mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;
          mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">
                <span style="mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;
          mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">
                </span>
              </span>
            </span>
          </span>
          <span style="mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;
          mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">
            <span style="mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;
          mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">
              <span style="mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;
          mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">
                <span style="mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;
          mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">
                  <span style="mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;
          mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">Think twice.</span>
                </span>
              </span>
            </span>
          </span>
        </li>
      </ol>
      <ul>
        <ol>
        </ol>
        <p>
        </p>
      </ul>
      <h5>
        Architecture events and public forums: protocols for recognising Traditional Owners
      </h5>
      <ul>
      </ul>
      <p>Practices can develop and implement protocols for providing an Acknowledgement of Country as applicable to events and public
        forums. Each state and territory may have its own protocols. The following material has been sourced and adapted from
        the State Government of Victoria:
        <a href="http://www.vic.gov.au/aboriginalvictoria/heritage/welcome-to-country-and-acknowledgement-of-traditional-owners"
          target="_blank">Welcome to Country and Acknowledgement of Traditional Owners</a>
      </p>
      <h6>What is an Acknowledgement of Country?
      </h6>
      <p>An Acknowledgement of Country recognises a strong and proud Aboriginal history and complex ownership and land stewardship
        systems stretching back many thousands of years. It pays respect to the Traditional Owners.</p>
      <h6>When is Acknowledgement of Country appropriate?</h6>
      <ul>
      </ul>
      <p>An Acknowledgement of Country should be given at formal events, forums and functions such as conferences, board meetings
        and official openings.</p>
      <h6>Who should give the Acknowledgement of Country?</h6>
      <p>
        The first speaker at an event or function (following the welcome or in the absence of a welcome) should give the Acknowledgment
        of Country. Subsequent speakers may also give an acknowledgement.
      </p>
      <h5>Further reading
      </h5>
      <ul>
      </ul>
      <p>Australians Together, ‘Welcome to Country and Acknowledgement of Country’,
        <a href="http://www.australianstogether.org.au/stories/detail/welcome-to-country" target="_blank">http://www.australianstogether.org.au/stories/detail/welcome-to-country</a>
      </p>
      <p>Creative Spirits, ‘Welcome to Country, Acknowledgement of Country’,
        <a href="https://www.creativespirits.info/aboriginalculture/spirituality/welcome-to-country-acknowledgement-of-country#axzz4oON5stvf"
          target="_blank">https://www.creativespirits.info/aboriginalculture/spirituality/welcome-to-country-acknowledgement-of-country</a>
      </p>
      <p>Reconciliation Australia, ‘Welcome to and Acknowledgement of Country’,
        <a href="https://www.reconciliation.org.au/wp-content/uploads/2016/05/Welcome-to-and-Acknowledgement-of-Country.pdf" target="_blank">https://www.reconciliation.org.au/wp-content/uploads/2016/05/Welcome-to-and-Acknowledgement-of-Country.pdf</a>
      </p>
      <p>
        <i style="mso-bidi-font-style:normal">The Victorian Chapter Reconciliation Action Plan (RAP) working group kindly contributed to the content of this note.</i>
      </p>
      <p>
        <i style="mso-bidi-font-style:normal">This content is provided by the Institute for general guidance only. It is not legal, financial, insurance, or other
          advice. It does not take into account your specific circumstances and should not be relied on in that way. The Institute
          endeavours to publish content that is accurate at the time it is published. The Institute does not accept responsibility
          for content that may or has become inaccurate over time.</i>
      </p>
      </li>
      </ul>
    </section>
    {{> AIA001.Components.Notes.NotePanel
        classes="note-panel--theme-alert" }}
    <section class="note-article__disclaimer">
      <h5 class="note-article__disclaimer-heading">Disclaimer</h5>
      <div class="note-article__disclaimer-content">The material contained in this publication is general comment and is not intended as advice on any particular matter. No reader should act or fail to act on the basis of any material contained herein. The material contained in this publication should not be relied on as a substitute for legal or professional advice on any particular matter. Wentworth Advantage Pty Ltd, expressly disclaim all and any liability to any persons whatsoever in respect of anything done or omitted to be done by any such person in reliance whether in whole or in part upon any of the contents of this publication. Without limiting the generality of this disclaimer, no author or editor shall have any responsibility for any other author or editor. For further information please contact Wentworth Advantage Pty Ltd. ©Wentworth Advantage Pty Ltd 2012</div>
    </section>
    {{> AIA001.Components.Tags label="Tags" tags=['something', 'something']}}
    {{> AIA001.Components.Notes.UserFeedbackMetrics
        modifier_class="note-article__user-feedback-metrics" }}
    {{> AIA001.Components.Notes.Sharing
        classes="note-article__sharing-controls@largeonly" }}
  </div>
  <nav class="c-page__aside page__aside note-page__aside">
    {{> AIA001.Components.Notes.Sharing
        classes="note-article__sharing-controls" }}
    <button class="note-page__aside-toggle-button u-focus u-focus--blue-light"
      data-toggle-element-classes
      data-toggle-element-classes--on="click"
      data-toggle-element-classes--target=".note-page"
      data-toggle-element-classes--to="note-page--offcanvas-subnav-open">
      {{> AIA001.Components.SvgSprite
          classes="note-page__aside-toggle-icon"
          modifier_class="hamburger-menu"}}
    </button>
    <aside class="note-page__aside-subnav">
      {{> AIA001.Components.AccordionNavigationGroup
          modifier_class="accordion-navigation-item--theme-blue" }}
      {{> AIA001.Components.AccordionNavigationGroup
          modifier_class="accordion-navigation-item--theme-red" }}
      {{> AIA001.Components.AccordionNavigationGroup
          modifier_class="accordion-navigation-item--theme-yellow" }}
      {{> AIA001.Components.AccordionNavigationGroup
          modifier_class="accordion-navigation-item--theme-green" }}
    </aside>
  </nav>
</article>

.note-article--obfuscated-body - Obfuscated note article. typically when a user is not subscribed.

Weight: 100

Styleguide AIA001.Components.Notes.Article
*/
.note-article {
  -webkit-box-align: initial;
      -ms-flex-align: initial;
          align-items: initial;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 100%; }

.note-article__meta {
  padding: 0.5rem 0 0.625rem 0;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  border-top: 2px solid #e9e7e4;
  border-bottom: 2px solid #e9e7e4;
  line-height: 1.3;
  word-break: normal; }

.note-article__author {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 0.875rem;
  color: #4a4845;
  padding-bottom: 0.625rem; }

.note-article__category {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 0.875rem;
  text-transform: uppercase;
  padding: 0.3125rem 0.9375rem 0.3125rem 1.75rem;
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  position: relative; }

.note-article__category-icon {
  width: 24px;
  height: 42px;
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%); }

.note-article__category-theme-blue {
  color: #5e64f9; }

.note-article__category-theme-yellow {
  color: #fea627; }

.note-article__category-theme-red {
  color: #f15f5e; }

.note-article__category-theme-green {
  color: #72d89b; }

.note-article__category-theme-teal {
  color: #10a3b2; }

.note-article__category-theme-grey {
  color: #aca8a4; }

.note-article__category-theme-sand {
  color: #f5ebcd; }

.note-article__category-theme-alert {
  color: #fb8d60; }

.note-article__category-theme-coldgrey {
  color: #313236; }

.note-article__date {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 0.875rem;
  color: #7c7871;
  padding: 0.3125rem 0.9375rem 0.3125rem 0;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1; }

.note-article__date-label {
  color: #4a4845; }

.note-article__date-divider {
  color: #d7d3cd;
  margin: 0 5px; }

.note-article__issn {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 0.75rem;
  color: #7c7871;
  padding: 0.3125rem 0 0.3125rem 0;
  -ms-flex-item-align: end;
      align-self: flex-end;
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0; }

.note-article__content {
  font-size: 1rem;
  margin-bottom: 4.375rem; }

.note-article__note-panel--subscription-cta {
  display: none; }

.note-article--obfuscated-body .note-article__intro {
  position: relative; }
  .note-article--obfuscated-body .note-article__intro:after {
    content: " ";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 8rem;
    background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(255, 255, 255, 0.75)), to(rgba(255, 255, 255, 0)));
    background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0)); }

.note-article--obfuscated-body .note-article__content {
  display: none; }

.note-article--obfuscated-body .note-article__note-panel--subscription-cta {
  display: block; }

.note-article__aside-subnav {
  width: 100%;
  max-width: 100%; }

.note-sharing-controls.note-article__note-sharing-controls {
  display: none; }

.note-article__tags {
  width: 100%;
  max-width: 100%; }

.note-article__disclaimer-heading {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-style: normal;
  font-size: 0.875rem;
  margin-bottom: 0.625rem; }

.note-article__disclaimer-content {
  font-family: "Adelle", Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.125rem; }

.note-article__taglist {
  margin-top: 3.75rem; }

.note-article__attachments {
  margin-top: 3.75rem; }

.note-article__child-notes-header {
  margin-bottom: 1.875rem; }

.note-article__child-notes-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: "Adelle", Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 1.125rem;
  line-height: 2rem; }

.note-article__child-note {
  margin-bottom: 1.125rem; }

.note-article__child-note-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-decoration: none; }
  .note-article__child-note-link:hover {
    text-decoration: underline; }

.note-article__child-note-icon {
  width: 1.75rem;
  height: 1.75rem;
  margin-right: 1.375rem;
  color: #72d89b; }

.note-reference {
  text-decoration: none;
  background: transparent;
  border: 0; }
  .note-reference:after {
    content: " ";
    display: block;
    position: absolute;
    bottom: -6px;
    height: 8px;
    width: 100%;
    background: rgba(114, 216, 155, 0.3); }
  .note-reference:hover:after {
    background: rgba(114, 216, 155, 0.75); }

.note-article__summary {
  background: #f4f3f1;
  margin-bottom: 10px; }

.note-article__download {
  background: #4a4845;
  padding: 30px 30px 30px 80px;
  position: relative;
  margin-bottom: 10px; }

.note-article__download-icon {
  line-height: 1;
  position: absolute;
  top: 25px;
  left: 20px; }

.note-article__download-icon-image {
  width: 60px;
  height: 60px; }

.note-article__download-title {
  color: #d7d3cd;
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  text-transform: uppercase;
  line-height: 1.3; }
  .note-article__download-title .file-size {
    display: block;
    font-size: 14px;
    font-weight: normal;
    padding: 0.5rem 0 1rem 0; }

.note-summary-list {
  margin: 0;
  padding: 0 10px 0 10px; }

.note-summary-list li {
  color: #4a4845;
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 14px;
  line-height: 1.125rem;
  padding: 0.625rem 1.25rem;
  display: inline-block;
  counter-increment: li;
  -webkit-column-break-inside: avoid;
          break-inside: avoid;
  width: 100%;
  list-style-type: none; }
  .note-summary-list li:before {
    display: inline-block;
    content: counter(li);
    text-align: right;
    -webkit-box-sizing: inherit;
            box-sizing: inherit;
    margin-right: .65rem;
    margin-left: -2.5em;
    width: 1.8em; }

/*
Note Page

Defines the areas for the article and subnav

Markup:
{{> AIA001.Page.GenericWithContentAndAside
    modifier_class="note-page note-page--offcanvas-subnav@largeonly"}}

Weight: 110

Styleguide AIA001.Page.Note
*/
/*
Notepacks List

Markup:
{{> AIA001.Components.Hero.WithContent
    modifier_class="hero--theme-green"
    title="Notepacks"
    headingSpriteName="notepack-icon" }}
{{> AIA001.Components.Breadcrumb }}
<div class="page notepack-landing-page">
  <div class="page__container notepack-landing-page__container">
    <div class="c-page__content page__content notepack-landing-page__content">
      <div class="page__body notepack-landing-page__body">
        <p class="callout">Notepacks collate a series of notes relating to a specific topic, so you can find everything you need in the one convenient place.</p>
      </div>
    </div>
  </div>
</div>
{{#> AIA001.Components.Notes.NoteCardLayout
     modifier_class="notepack-landing-page__note-card-layout notepack-landing-page__note-card-layout--notepack-list" }}
  {{> AIA001.Components.Notes.CardGrid
      title=false
      showMore=false
      amountOfCards=17
      cardClasses="note-card--is-notepack"
      modifier_class="note-card-grid--tiled note-card-grid--is-collection"
  }}
  {{> AIA001.Components.Pagination
      modifier_class="pagination--circled pagination--only-current" }}
{{/AIA001.Components.Notes.NoteCardLayout }}
{{#> AIA001.Components.Notes.NoteCardLayout
      modifier_class="note-card-layout--theme-grey notepack-landing-page__note-card-layout" }}
  {{> AIA001.Components.Notes.CardGrid
      title="Related Notes"
      amountOfCards=5
      modifier_class="note-card-grid--tiled"
  }}
{{/AIA001.Components.Notes.NoteCardLayout }}

Styleguide AIA001.Page.NotepackLanding
*/
/*
Notepack Page

Lists notecards curated into a notepack

Markup:
{{> AIA001.Components.Hero.WithContent
    modifier_class="hero--theme-green"
    title="Working with consultants"
    headingSpriteName="notepack-icon" }}
{{> AIA001.Components.Breadcrumb }}
<div class="c-page page">
  <div class="page__container">
    <div class="c-page__content page__content">
      <div class="page__body">
        <p class="callout">This notepack is designed to aid in working with or as a subconsultant on an architectural project. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
      </div>
    </div>
  </div>
</div>
{{#> AIA001.Components.Notes.NoteCardLayout
  modifier_class="note-card-layout--no-gutter" }}
  {{> AIA001.Components.Notes.CardGrid
      title=false
      sortable=true
      showMore=false
      amountOfCards=22
      modifier_class="note-card-grid--columns note-card-grid--is-collection"
  }}
  {{> AIA001.Components.Pagination
      modifier_class="pagination--circled pagination--only-current" }}
{{/AIA001.Components.Notes.NoteCardLayout }}
{{#> AIA001.Components.Notes.NoteCardLayout
      modifier_class="note-card-layout--theme-grey" }}
  {{> AIA001.Components.Notes.CardGrid
      title="Related Notes"
      amountOfCards=5
      modifier_class="note-card-grid--tiled"
  }}
{{/AIA001.Components.Notes.NoteCardLayout }}


Styleguide AIA001.Page.NotepackPageCurated
*/
.notepack-page .page__body {
  padding-top: 3.125rem; }

.notepack-landing-page .page__body {
  padding-top: 3.125rem; }

/*
Saved Note

Markup:
{{#> AIA001.Page.Generic
     modifier_class="saved-notes-page" }}
  {{> AIA001.Components.Notes.SavedNotesEmptyPanel }}
{{/ AIA001.Page.Generic }}

Styleguide AIA001.Page.SavedNote
*/
/*
Saved Note Empty Panel

Markup:
<div class="saved-notes-empty-panel">
  <div class="saved-notes-empty-panel__container">
    <div class="saved-notes-empty-panel__header">
      {{> AIA001.Components.SvgSprite
          classes="saved-notes-empty-panel__icon"
          modifier_class="bookmark-default-500" }}
      <div class="saved-notes-empty-panel__heading">You don’t have any saved notes yet</div>
    </div>
    <div class="saved-notes-empty-panel__content">Click or tap the “Save” button when viewing a note to save it for reading later.
All your saved notes will be displayed here. </div>
    <div class="saved-notes-empty-panel__footer">
      <div class="saved-notes-empty-panel__footer-heading">Explore our note categories</div>
      <div class="saved-notes-empty-panel__footer-actions">
        <a class="button button--primary saved-notes-empty-panel__footer-action--theme-blue button--icon saved-notes-empty-panel__footer-action u-focus u-focus--keyboard-only u-focus--blue-light">
        {{> AIA001.Components.SvgSprite
            classes="button__icon"
            modifier_class="practice-icon" }}
          <span class="button__label">Practice</span>
        </a>
        <a class="button button--primary saved-notes-empty-panel__footer-action--theme-red button--icon saved-notes-empty-panel__footer-action u-focus u-focus--keyboard-only u-focus--blue-light">
        {{> AIA001.Components.SvgSprite
            classes="button__icon"
            modifier_class="project-icon" }}
          <span class="button__label">Project</span>
        </a>
        <a class="button button--primary saved-notes-empty-panel__footer-action--theme-yellow button--icon saved-notes-empty-panel__footer-action u-focus u-focus--keyboard-only u-focus--blue-light">
        {{> AIA001.Components.SvgSprite
            classes="button__icon"
            modifier_class="resource-icon" }}
          <span class="button__label">Resource</span>
        </a>
      </div>
    </div>
  </div>
</div>

Styleguide AIA001.Components.Notes.SavedNotesEmptyPanel
*/
.saved-notes-empty-panel {
  width: 100%;
  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-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }

.saved-notes-empty-panel__container {
  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: 48rem;
  width: 100%;
  text-align: center; }

.saved-notes-empty-panel__heading {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-style: normal;
  font-size: 2.0625rem;
  line-height: 2.75rem;
  margin-top: 0.875rem;
  margin-bottom: 1.1875rem; }

.saved-notes-empty-panel__icon {
  color: #e9e7e4;
  width: 8rem;
  height: 8rem; }

.saved-notes-empty-panel__content {
  font-family: "Adelle", Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 1.125rem;
  line-height: 2rem;
  margin-bottom: 2.4375rem; }

.saved-notes-empty-panel__footer {
  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-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }

.saved-notes-empty-panel__footer-heading {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-style: normal;
  font-size: 1.375rem;
  line-height: 1.75rem;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  width: 100%;
  margin-bottom: 1.875rem; }

.saved-notes-empty-panel__footer-actions {
  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-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%; }

.saved-notes-empty-panel__footer-action {
  padding: 0.875rem;
  width: 100%;
  margin-bottom: 1.875rem;
  max-width: 18.75rem;
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-style: normal;
  font-size: 1rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }

.saved-notes-empty-panel__footer-action--theme-blue {
  background-color: #292d84;
  border: 0;
  color: white; }
  .saved-notes-empty-panel__footer-action--theme-blue .button__icon {
    color: #6e74fc; }
  .saved-notes-empty-panel__footer-action--theme-blue:hover, .saved-notes-empty-panel__footer-action--theme-blue:active {
    background-color: #000461;
    border: 0; }
    .saved-notes-empty-panel__footer-action--theme-blue:hover .button__icon, .saved-notes-empty-panel__footer-action--theme-blue:active .button__icon {
      color: white; }
  .saved-notes-empty-panel__footer-action--theme-blue:active {
    background-color: #000346; }

.saved-notes-empty-panel__footer-action--theme-yellow {
  background-color: #b56000;
  border: 0;
  color: white; }
  .saved-notes-empty-panel__footer-action--theme-yellow .button__icon {
    color: #ffb446; }
  .saved-notes-empty-panel__footer-action--theme-yellow:hover, .saved-notes-empty-panel__footer-action--theme-yellow:active {
    background-color: #a04a00;
    border: 0; }
    .saved-notes-empty-panel__footer-action--theme-yellow:hover .button__icon, .saved-notes-empty-panel__footer-action--theme-yellow:active .button__icon {
      color: white; }
  .saved-notes-empty-panel__footer-action--theme-yellow:active {
    background-color: #8f4200; }

.saved-notes-empty-panel__footer-action--theme-red {
  background-color: #ae3434;
  border: 0;
  color: white; }
  .saved-notes-empty-panel__footer-action--theme-red .button__icon {
    color: #f4706f; }
  .saved-notes-empty-panel__footer-action--theme-red:hover, .saved-notes-empty-panel__footer-action--theme-red:active {
    background-color: #990a09;
    border: 0; }
    .saved-notes-empty-panel__footer-action--theme-red:hover .button__icon, .saved-notes-empty-panel__footer-action--theme-red:active .button__icon {
      color: white; }
  .saved-notes-empty-panel__footer-action--theme-red:active {
    background-color: #900100; }

.saved-notes-empty-panel__footer-action--theme-green {
  background-color: #005036;
  border: 0;
  color: white; }
  .saved-notes-empty-panel__footer-action--theme-green .button__icon {
    color: #85e6ac; }
  .saved-notes-empty-panel__footer-action--theme-green:hover, .saved-notes-empty-panel__footer-action--theme-green:active {
    background-color: #00412c;
    border: 0; }
    .saved-notes-empty-panel__footer-action--theme-green:hover .button__icon, .saved-notes-empty-panel__footer-action--theme-green:active .button__icon {
      color: white; }
  .saved-notes-empty-panel__footer-action--theme-green:active {
    background-color: green; }

.saved-notes-empty-panel__footer-action--theme-teal {
  background-color: #006f7a;
  border: 0;
  color: white; }
  .saved-notes-empty-panel__footer-action--theme-teal .button__icon {
    color: #71ebe5; }
  .saved-notes-empty-panel__footer-action--theme-teal:hover, .saved-notes-empty-panel__footer-action--theme-teal:active {
    background-color: #01454c;
    border: 0; }
    .saved-notes-empty-panel__footer-action--theme-teal:hover .button__icon, .saved-notes-empty-panel__footer-action--theme-teal:active .button__icon {
      color: white; }
  .saved-notes-empty-panel__footer-action--theme-teal:active {
    background-color: teal; }

.saved-notes-empty-panel__footer-action--theme-grey {
  background-color: #4a4845;
  border: 0;
  color: white; }
  .saved-notes-empty-panel__footer-action--theme-grey .button__icon {
    color: grey; }
  .saved-notes-empty-panel__footer-action--theme-grey:hover, .saved-notes-empty-panel__footer-action--theme-grey:active {
    background-color: grey;
    border: 0; }
    .saved-notes-empty-panel__footer-action--theme-grey:hover .button__icon, .saved-notes-empty-panel__footer-action--theme-grey:active .button__icon {
      color: white; }
  .saved-notes-empty-panel__footer-action--theme-grey:active {
    background-color: grey; }

.saved-notes-empty-panel__footer-action--theme-sand {
  background-color: #ad944b;
  border: 0;
  color: white; }
  .saved-notes-empty-panel__footer-action--theme-sand .button__icon {
    color: #fff8e6; }
  .saved-notes-empty-panel__footer-action--theme-sand:hover, .saved-notes-empty-panel__footer-action--theme-sand:active {
    background-color: sand;
    border: 0; }
    .saved-notes-empty-panel__footer-action--theme-sand:hover .button__icon, .saved-notes-empty-panel__footer-action--theme-sand:active .button__icon {
      color: white; }
  .saved-notes-empty-panel__footer-action--theme-sand:active {
    background-color: sand; }

.saved-notes-empty-panel__footer-action--theme-alert {
  background-color: #b94d20;
  border: 0;
  color: white; }
  .saved-notes-empty-panel__footer-action--theme-alert .button__icon {
    color: #fff8f5; }
  .saved-notes-empty-panel__footer-action--theme-alert:hover, .saved-notes-empty-panel__footer-action--theme-alert:active {
    background-color: alert;
    border: 0; }
    .saved-notes-empty-panel__footer-action--theme-alert:hover .button__icon, .saved-notes-empty-panel__footer-action--theme-alert:active .button__icon {
      color: white; }
  .saved-notes-empty-panel__footer-action--theme-alert:active {
    background-color: alert; }

.saved-notes-empty-panel__footer-action--theme-coldgrey {
  background-color: #1d1d1f;
  border: 0;
  color: white; }
  .saved-notes-empty-panel__footer-action--theme-coldgrey .button__icon {
    color: #3a3c41; }
  .saved-notes-empty-panel__footer-action--theme-coldgrey:hover, .saved-notes-empty-panel__footer-action--theme-coldgrey:active {
    background-color: coldgrey;
    border: 0; }
    .saved-notes-empty-panel__footer-action--theme-coldgrey:hover .button__icon, .saved-notes-empty-panel__footer-action--theme-coldgrey:active .button__icon {
      color: white; }
  .saved-notes-empty-panel__footer-action--theme-coldgrey:active {
    background-color: coldgrey; }

/*
Note card

Markup:
<a class="note-card u-cms-background u-cms-background--cover u-cms-background--center {{modifier_class}} {{#if importance}}note-card--importance-{{importance}}{{/if}}"
	 id="{{ default id  (concat '#NOTE_CARD' )}}"
	 href='{{ default href (concat '#' (default id 'NOTE_CARD') ) }}'
	 data-element-transitions>
  <span class="note-card__container">
	<span class="note-card__header">
	  <h3 class="note-card__heading">@Model.Title</h3>
	  <span class="note-card__topic">[Model.Topic]</span>
	</span>
	<span class="note-card__footer">
	  <span class="note-card__meta">
		<span class="note-card__last-modified">[Model.lastModified]</span>
	  </span>
	</span>
  </span>
  <span class="note-card__actions">
	<button class="note-card__action note-card__action--unsave u-focus u-focus--rounded u-focus--white"
			data-toggle-element-classes
			data-toggle-element-classes--on="click"
			data-toggle-element-classes--to="note-card--confirm-remove"
			data-toggle-element-classes--target="(parent) .note-card">
	  <span class="note-card__action-container">
		{{> AIA001.Components.SvgSprite
			classes="note-card__action-icon"
			modifier_class="trash-500" }}
	  </span>
	</button>
  </span>
  <span class="note-card__overlay note-card__overlay--confirm-remove">
	<span>Remove from your saved notes?</span>
	<button class="note-card__overlay-action note-card__overlay-action--primary u-focus u-focus--red"
			data-analytics-trigger
			data-analytics-trigger--on="click"
			data-analytics-trigger--url="/api/SaveNote"
			data-analytics-trigger--noteid="NOTE_ID"
			data-add-element-classes
			data-add-element-classes--on="AnalyticsTrigger.success"
			data-add-element-classes--target="(parent) .note-card"
			data-add-element-classes--classes="note-card--hidden">
	  <span class="note-card__action-container">remove</span>
	</button>
	<button class="note-card__overlay-action u-focus u-focus--white"
			data-remove-element-classes
			data-remove-element-classes--on="click"
			data-remove-element-classes--target="(parent) .note-card"
			data-remove-element-classes--classes="note-card--confirm-remove">
	  <span class="note-card__action-container">cancel</span>
	</button>
  </span>
  <span class="note-card__overlay note-card__overlay--remove-error">
	<span>There was a problem removing this saved note. Try again later.</span>
	<button class="note-card__overlay-action note-card__overlay-action--secondary u-focus u-focus--white"
			data-remove-element-classes
			data-remove-element-classes--on="click"
			data-remove-element-classes--target="(parent) .note-card"
			data-remove-element-classes--classes="note-card--remove-error">
	  <span class="note-card__action-container">ok</span>
	</button>
  </span>
</a>
{{> AIA001.Utilities.CmsBackgroundImage
	backgroundImage=(concat "https://source.unsplash.com/random" "?sig=" (default id (cuid))) }}

Actions:
<button
  data-toggle-element-classes
  data-toggle-element-classes--on="click"
  data-toggle-element-classes--target=".note-card"
  data-toggle-element-classes--to="note-card--remove-error">Remove Error</button>
<button
  data-toggle-element-classes
  data-toggle-element-classes--on="click"
  data-toggle-element-classes--target=".note-card"
  data-toggle-element-classes--to="note-card--confirm-remove">Confirm Remove</button>
<button
  data-toggle-element-classes
  data-toggle-element-classes--on="click"
  data-toggle-element-classes--target=".note-card"
  data-toggle-element-classes--to="note-card--hidden">Remove</button>
<button
  data-toggle-element-classes
  data-toggle-element-classes--on="click"
  data-toggle-element-classes--target=".note-card"
  data-toggle-element-classes--to="note-card--212x212">212x212</button>

.note-card--is-notepack - A notepack, stacked deck of cards.
.note-card--theme-blue - Blue themed card
.note-card--theme-green - Green themed card
.note-card--theme-red - Red themed card
.note-card--theme-yellow - Yellow themed card
.note-card--saved-note.note-card--saved - A saved note, indicates that it's removeable
.note-card--saved-note - A saved note, indicates that it has been removed.

Weight: 10

Styleguide AIA001.Components.Notes.Card
*/
.note-card {
  background-color: #77736c;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: auto;
  -webkit-transition: all ease 250ms;
  transition: all ease 250ms;
  line-height: 1.375rem;
  text-decoration: none; }
  .note-card:before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.5;
    z-index: 0;
    -webkit-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out; }
  .note-card:focus {
    outline: 0; }
  .note-card:before, .note-card:active:before, .note-card:focus:before, .note-card:hover:before {
    background-color: #313236; }
  .note-card:focus:before, .note-card:hover:before {
    opacity: 0.85; }
  .note-card:active:before {
    opacity: 1; }

html[data-focus-source="key"] .note-card .note-card__container:focus {
  outline: 0; }

html[data-focus-source="key"] .note-card .note-card__container:focus:after {
  outline: 0;
  position: absolute;
  display: block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  content: " ";
  top: -6px;
  left: -6px;
  right: -6px;
  bottom: -14px;
  z-index: 2;
  border: 2px solid #6e74fc;
  border-radius: 0.25rem; }

.note-card--is-collection:before, .note-card--is-collection:active:before, .note-card--is-collection:focus:before, .note-card--is-collection:hover:before {
  background-color: #005036; }

.note-card--212x212 {
  width: 212px;
  height: 212px; }

.note-card--hidden {
  -webkit-transform: scale(0) translateX(100%) translateY(0%);
          transform: scale(0) translateX(100%) translateY(0%);
  opacity: 0;
  height: 0 !important;
  width: 0 !important;
  margin: 0 !important; }

.note-card--is-collection:hover:before,
.note-card--is-notepack:hover:before {
  background-color: rgba(0, 80, 54, 0.85); }

.note-card--is-collection:active:before, .note-card--is-collection:focus:before, .note-card--is-collection:hover:before,
.note-card--is-notepack:active:before,
.note-card--is-notepack:focus:before,
.note-card--is-notepack:hover:before {
  background-color: #005036; }

.note-card__container {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-decoration: none;
  border-bottom-width: 8px;
  border-bottom-style: solid;
  border-bottom-color: transparent;
  padding: 1.25rem 1.25rem 0.625rem 1.25rem;
  height: 100%;
  width: 100%;
  z-index: 1; }

.note-card--is-notepack {
  -webkit-box-shadow: 0 10px 0 -5px #aca8a4, 0 20px 0 -10px #d7d3cd;
          box-shadow: 0 10px 0 -5px #aca8a4, 0 20px 0 -10px #d7d3cd; }

.note-card--is-collection {
  -webkit-box-shadow: 0 10px 0 -5px #b2cbc3,
 0 20px 0 -10px #d9e5e2;
          box-shadow: 0 10px 0 -5px #b2cbc3,
 0 20px 0 -10px #d9e5e2; }

.note-card__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-transform: translateZ(0px);
          transform: translateZ(0px); }

.note-card__heading {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 1.375rem;
  margin: 0;
  color: white; }

.note-card__heading-link {
  color: currentColor;
  text-decoration: none; }

.note-card__topic {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-style: normal;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.5);
  padding-bottom: 0.625rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

.note-card__topic-link {
  color: currentColor;
  text-decoration: none; }

.note-card__topic-icon {
  display: none; }
  .note-card__topic-icon .topic-icon {
    width: 20px;
    height: 20px;
    -webkit-transition: .2s all ease-in-out;
    transition: .2s all ease-in-out; }

.note-card--is-notepack .note-card__topic-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-right: 5px; }

.note-card--is-notepack .note-card__topic-icon .topic-icon {
  fill: #fff; }

.note-card--is-collection .note-card__topic-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-right: 8px; }

.note-card--is-collection .note-card__topic-icon .topic-icon {
  fill: #72d89b; }

.note-card__footer {
  -ms-flex-negative: 1;
      flex-shrink: 1;
  -webkit-transform: translateZ(0px);
          transform: translateZ(0px); }

.note-card__last-modified {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 0.6875rem;
  color: white;
  text-transform: uppercase; }

.note-card__actions {
  position: absolute;
  top: 0.5rem;
  right: 0;
  z-index: 300; }

.note-card__action {
  border: 0;
  background: 0;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.75); }

.note-card__action:focus,
.note-card__action:hover {
  color: white; }

.note-card__action-icon {
  width: 1.75rem;
  height: 1.75rem; }

.note-card__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.875rem;
  z-index: 300;
  background-color: rgba(0, 0, 0, 0.85);
  color: white;
  display: none;
  pointer-events: none;
  -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;
  text-align: center;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-style: normal;
  font-size: 0.875rem; }

.note-card__overlay--remove-error {
  background-color: rgba(185, 77, 32, 0.85); }

.note-card__overlay-action {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-style: normal;
  font-size: 1rem;
  color: white;
  background: none;
  border: 0;
  border-radius: 8px;
  padding: 0 0.75rem;
  min-width: 7.9375rem;
  min-height: 3rem;
  cursor: pointer; }

.note-card__overlay-action {
  background-color: transparent;
  -webkit-transition: all 250ms ease;
  transition: all 250ms ease;
  margin: 1rem 0 0;
  text-decoration: underline; }

.note-card__overlay-action--primary {
  background-color: #ae3434;
  border: 1px solid transparent;
  text-decoration: none; }
  .note-card__overlay-action--primary:hover {
    border: 1px solid #ae3434;
    background-color: transparent; }

.note-card__overlay-action--secondary {
  text-decoration: none;
  border: 1px solid white;
  background-color: transparent; }

@-webkit-keyframes note-card__overlay--fadein {
  from {
    opacity: 0;
    -webkit-transform: translateY(-25%) translateX(-25%) scale(4);
            transform: translateY(-25%) translateX(-25%) scale(4); }
  to {
    opacity: 1;
    -webkit-transform: translateY(0) translateX(0) scale(1);
            transform: translateY(0) translateX(0) scale(1); } }

@keyframes note-card__overlay--fadein {
  from {
    opacity: 0;
    -webkit-transform: translateY(-25%) translateX(-25%) scale(4);
            transform: translateY(-25%) translateX(-25%) scale(4); }
  to {
    opacity: 1;
    -webkit-transform: translateY(0) translateX(0) scale(1);
            transform: translateY(0) translateX(0) scale(1); } }

.note-card--remove-error .note-card__overlay--remove-error,
.note-card--confirm-remove .note-card__overlay--confirm-remove {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  pointer-events: all;
  -webkit-animation-name: note-card__overlay--fadein;
          animation-name: note-card__overlay--fadein;
  -webkit-animation-duration: 250ms;
          animation-duration: 250ms;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-direction: normal;
          animation-direction: normal; }

.note-card--theme-blue .note-card__container {
  border-bottom: 8px solid #5e64f9; }

.note-card--theme-blue:active:before, .note-card--theme-blue:focus:before, .note-card--theme-blue:hover:before {
  background-color: #5e64f9; }

.note-card--theme-yellow .note-card__container {
  border-bottom: 8px solid #fea627; }

.note-card--theme-yellow:active:before, .note-card--theme-yellow:focus:before, .note-card--theme-yellow:hover:before {
  background-color: #fea627; }

.note-card--theme-red .note-card__container {
  border-bottom: 8px solid #f15f5e; }

.note-card--theme-red:active:before, .note-card--theme-red:focus:before, .note-card--theme-red:hover:before {
  background-color: #f15f5e; }

.note-card--theme-green .note-card__container {
  border-bottom: 8px solid #72d89b; }

.note-card--theme-green:active:before, .note-card--theme-green:focus:before, .note-card--theme-green:hover:before {
  background-color: #72d89b; }

.note-card--theme-teal .note-card__container {
  border-bottom: 8px solid #10a3b2; }

.note-card--theme-teal:active:before, .note-card--theme-teal:focus:before, .note-card--theme-teal:hover:before {
  background-color: #10a3b2; }

.note-card--theme-grey .note-card__container {
  border-bottom: 8px solid #aca8a4; }

.note-card--theme-grey:active:before, .note-card--theme-grey:focus:before, .note-card--theme-grey:hover:before {
  background-color: #aca8a4; }

.note-card--theme-sand .note-card__container {
  border-bottom: 8px solid #f5ebcd; }

.note-card--theme-sand:active:before, .note-card--theme-sand:focus:before, .note-card--theme-sand:hover:before {
  background-color: #f5ebcd; }

.note-card--theme-alert .note-card__container {
  border-bottom: 8px solid #fb8d60; }

.note-card--theme-alert:active:before, .note-card--theme-alert:focus:before, .note-card--theme-alert:hover:before {
  background-color: #fb8d60; }

.note-card--theme-coldgrey .note-card__container {
  border-bottom: 8px solid #313236; }

.note-card--theme-coldgrey:active:before, .note-card--theme-coldgrey:focus:before, .note-card--theme-coldgrey:hover:before {
  background-color: #313236; }

/*
Note Sharing

Actions:
<label> Saved Notes: <span data-saved-notes-count></span></label>

Markup:
<div class="note-sharing-controls {{classes}}">
  <div class="note-sharing-controls__container">
    {{> AIA001.Components.Notes.NoteSharingAction
      icon="print"
      label="print" }}
    <button class="note-sharing-controls__action note-sharing-controls__action--save button button--icon"
            data-analytics-trigger
            data-analytics-trigger--on="click"
            data-analytics-trigger--url="/api/SaveNote"
            data-analytics-trigger--id="NOTE_ID"
            data-analytics-trigger--foo="bar"
            data-analytics-trigger--sending-class="note-sharing-controls__action--is-processing"
            data-update-saved-notes
            data-update-saved-notes--on="AnalyticsTrigger.success"
            data-update-saved-notes--target=".session-navigation__badge"
            data-add-element-classes
            data-add-element-classes--target="(self)"
            data-add-element-classes--on="AnalyticsTrigger.success"
            data-add-element-classes--classes="note-sharing-controls__action--hidden"
            data-remove-element-classes
            data-remove-element-classes--target="(siblings) .note-sharing-controls__action--saved"
            data-remove-element-classes--on="AnalyticsTrigger.success"
            data-remove-element-classes--classes="note-sharing-controls__action--hidden">
      <span class="note-sharing-controls__action-container button__container">
        <span class="note-sharing-controls__action-icon-container">
          {{> AIA001.Components.SvgSprite
              classes="note-sharing-controls__action-icon"
              modifier_class="bookmark-default-500" }}
        </span>
        <span class="note-sharing-controls__action-label button__label">save</span>
      </span>
    </button>
    <button class="note-sharing-controls__action note-sharing-controls__action--is-active note-sharing-controls__action--saved note-sharing-controls__action--hidden button button--icon"
            data-analytics-trigger
            data-analytics-trigger--on="click"
            data-analytics-trigger--url="/api/SaveNote"
            data-analytics-trigger--id="NOTE_ID"
            data-analytics-trigger--foo="bar"
            data-analytics-trigger--sending-class="note-sharing-controls__action--is-processing"
            data-update-saved-notes
            data-update-saved-notes--on="AnalyticsTrigger.success"
            data-update-saved-notes--target=".session-navigation__badge"
            data-add-element-classes
            data-add-element-classes--target="(self)"
            data-add-element-classes--on="AnalyticsTrigger.success"
            data-add-element-classes--classes="note-sharing-controls__action--hidden"
            data-remove-element-classes
            data-remove-element-classes--target="(siblings) .note-sharing-controls__action--save"
            data-remove-element-classes--on="AnalyticsTrigger.success"
            data-remove-element-classes--classes="note-sharing-controls__action--hidden">
      <span class="note-sharing-controls__action-container button__container">
        <span class="note-sharing-controls__action-icon-container">
          {{> AIA001.Components.SvgSprite
              classes="note-sharing-controls__action-icon"
              modifier_class="bookmark-active-500" }}
        </span>
        <span class="note-sharing-controls__action-label button__label">saved</span>
      </span>
    </button>
    {{> AIA001.Components.Notes.NoteSharingAction
        classes="addthis_button"
        icon="mail-500"
        label="share" }}
    <script type="text/javascript">var addthis_config = {ui_disable: true};</script>
    <script type="text/javascript"
        src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5a79300eb845b775"></script>
  </div>
</div>

Styleguide AIA001.Components.Notes.Sharing
*/
.note-sharing-controls {
  width: 100%;
  color: #72d89b;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }

.note-sharing-controls__container {
  max-width: 20.75rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -ms-flex-line-pack: center;
      align-content: center;
  margin-bottom: 1.875rem;
  width: 100%; }

/*
Note Sharing Action

Markup:
<button class="note-sharing-controls__action button button--icon {{modifier_class}} {{classes}}" {{{attrs}}}>
  <span class="note-sharing-controls__action-container button__container">
    <span class="note-sharing-controls__action-icon-container">
      {{> AIA001.Components.SvgSprite
        classes="note-sharing-controls__action-icon"
        modifier_class=(default icon "mail-500") }}
    </span>
    <span class="note-sharing-controls__action-label button__label">{{ default label "Action Label" }}</span>
  </span>
</button>

.note-sharing-controls__action--hidden - Hidden control
.note-sharing-controls__action--is-processing - Control that has triggered a process, yet unresolved.
.note-sharing-controls__action--has-error - Control that has triggered a process that errored.

Styleguide AIA001.Components.Notes.NoteSharingAction
*/
@-webkit-keyframes sharing-action--processing {
  from {
    color: #ae3434; }
  to {
    color: #f4706f; } }
@keyframes sharing-action--processing {
  from {
    color: #ae3434; }
  to {
    color: #f4706f; } }

@keyframes sharing-action--processing {
  to {
    stroke-dash-offset: 1000;
    --o-stroke-dash-offset: 1000;
    --ms-stroke-dash-offset: 1000;
    --moz-stroke-dash-offset: 1000;
    --webkit-stroke-dash-offset: 1000; } }

.note-sharing-controls__action {
  cursor: pointer;
  padding: 0;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-flex: 0;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
  border: 0;
  background: transparent; }

.note-sharing-controls .note-sharing-controls__action,
.note-sharing-controls--three .note-sharing-controls__action {
  -ms-flex-preferred-size: 33%;
      flex-basis: 33%; }

.note-sharing-controls--two .note-sharing-controls__action {
  -ms-flex-preferred-size: 50%;
      flex-basis: 50%; }

.note-sharing-controls--four .note-sharing-controls__action {
  -ms-flex-preferred-size: 25%;
      flex-basis: 25%; }

.note-sharing-controls__action-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: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  padding: 1.875rem 0 0; }

.note-sharing-controls__action-label {
  margin: 0 auto;
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  color: #4a4845;
  font-size: 0.75rem;
  text-transform: uppercase; }

.note-sharing-controls__action-icon-container {
  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;
  width: 3rem;
  height: 3rem; }

.note-sharing-controls__action-icon {
  width: 3rem;
  height: 3rem;
  margin-bottom: 0.75rem;
  opacity: 1;
  -webkit-transition: opacity ease-in 250ms;
  transition: opacity ease-in 250ms;
  color: #72d89b; }

.note-sharing-controls__action--is-active .note-sharing-controls__action-icon {
  color: #005036; }

.note-sharing-controls__action-icon--processing {
  opacity: 0; }

.note-sharing-controls__action:hover .note-sharing-controls__action-icon,
.note-sharing-controls__action:focus .note-sharing-controls__action-icon,
.note-sharing-controls__action:active .note-sharing-controls__action-icon {
  color: #005036; }

.note-sharing-controls__action--is-processing .note-sharing-controls__action-icon {
  -webkit-animation-name: sharing-action--processing;
          animation-name: sharing-action--processing;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite; }

.note-sharing-controls__action--has-error .note-sharing-controls__action-icon {
  -webkit-animation-name: sharing-action--error;
          animation-name: sharing-action--error;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1; }

.note-sharing-controls__action--hidden {
  display: none; }

/*
Note Category Portal Link

Markup:
<a class="note-portal-link {{modifier_class}} u-cms-background u-cms-background--cover u-cms-background--psuedo-before"
  {{#if backgroundImage}}id="note-portal-link__{{ default id 'CATEGORY_ID' }}"{{/if}}
  href="#">
  <span class="note-portal-link__container">
    <span class="note-portal-link__icon">
    {{> AIA001.Components.SvgSprite classes="note-portal-link__icon-image" modifier_class=(default sprite 'practice-icon') }}
    </span>
    <span class="note-portal-link__header">
      <h3 class="note-portal-link__heading">{{ default title '@Model.Title' }}</h3>
      <span class="note-portal-link__child-count">{{ default count '@Model.ChildCount' }} notes</span>
    </span>
  </span>
</a>
{{#if backgroundImage}}
<style type="text/css">
#note-portal-link__{{ default id 'CATEGORY_ID' }}:before {
  background-image: url({{backgroundImage}});
}
</style>
{{/if}}


.note-portal-link--dark - Portal Category Link Dark

Weight: 60

Styleguide AIA001.Components.Notes.PortalLink
*/
.note-portal-link {
  position: relative;
  min-height: 5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: black;
  text-decoration: none;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out; }

.note-portal-link:focus {
  outline: 0; }

.note-portal-link:before,
.note-portal-link:after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; }

.note-portal-link:before {
  z-index: 8;
  opacity: 0.3;
  -webkit-filter: grayscale(1);
          filter: grayscale(1); }

.note-portal-link:focus:after,
.note-portal-link:hover:after {
  opacity: 0.75;
  z-index: 9; }

.note-portal-link__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -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;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  z-index: 10;
  margin-left: 3.75rem;
  height: 100%; }

.note-portal-link__icon {
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  margin-right: 0.75rem;
  min-width: 4rem; }

.note-portal-link__icon-image {
  width: 4rem;
  height: 4rem; }

.note-portal-link:focus .note-portal-link__icon-image,
.note-portal-link:hover .note-portal-link__icon-image {
  color: white; }

.note-portal-link__header {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  width: 100%; }

.note-portal-link__heading {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-style: normal;
  font-size: 1.5rem;
  text-transform: uppercase;
  color: white;
  margin: 0; }

.note-portal-link__child-count {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 0.75rem;
  color: #aca8a4;
  text-transform: uppercase; }

.note-portal-link:focus .note-portal-link__child-count,
.note-portal-link:hover .note-portal-link__child-count {
  color: white; }

.note-portal-link--theme-blue:focus, .note-portal-link--theme-blue:hover, .note-portal-link--theme-blue:focus:after, .note-portal-link--theme-blue:hover:after {
  background-color: #5e64f9; }

.note-portal-link--theme-blue .note-portal-link__icon-image {
  color: #5e64f9; }

.note-portal-link--theme-yellow:focus, .note-portal-link--theme-yellow:hover, .note-portal-link--theme-yellow:focus:after, .note-portal-link--theme-yellow:hover:after {
  background-color: #fea627; }

.note-portal-link--theme-yellow .note-portal-link__icon-image {
  color: #fea627; }

.note-portal-link--theme-red:focus, .note-portal-link--theme-red:hover, .note-portal-link--theme-red:focus:after, .note-portal-link--theme-red:hover:after {
  background-color: #f15f5e; }

.note-portal-link--theme-red .note-portal-link__icon-image {
  color: #f15f5e; }

.note-portal-link--theme-green:focus, .note-portal-link--theme-green:hover, .note-portal-link--theme-green:focus:after, .note-portal-link--theme-green:hover:after {
  background-color: #72d89b; }

.note-portal-link--theme-green .note-portal-link__icon-image {
  color: #72d89b; }

.note-portal-link--theme-teal:focus, .note-portal-link--theme-teal:hover, .note-portal-link--theme-teal:focus:after, .note-portal-link--theme-teal:hover:after {
  background-color: #10a3b2; }

.note-portal-link--theme-teal .note-portal-link__icon-image {
  color: #10a3b2; }

.note-portal-link--theme-grey:focus, .note-portal-link--theme-grey:hover, .note-portal-link--theme-grey:focus:after, .note-portal-link--theme-grey:hover:after {
  background-color: #aca8a4; }

.note-portal-link--theme-grey .note-portal-link__icon-image {
  color: #aca8a4; }

.note-portal-link--theme-sand:focus, .note-portal-link--theme-sand:hover, .note-portal-link--theme-sand:focus:after, .note-portal-link--theme-sand:hover:after {
  background-color: #f5ebcd; }

.note-portal-link--theme-sand .note-portal-link__icon-image {
  color: #f5ebcd; }

.note-portal-link--theme-alert:focus, .note-portal-link--theme-alert:hover, .note-portal-link--theme-alert:focus:after, .note-portal-link--theme-alert:hover:after {
  background-color: #fb8d60; }

.note-portal-link--theme-alert .note-portal-link__icon-image {
  color: #fb8d60; }

.note-portal-link--theme-coldgrey:focus, .note-portal-link--theme-coldgrey:hover, .note-portal-link--theme-coldgrey:focus:after, .note-portal-link--theme-coldgrey:hover:after {
  background-color: #313236; }

.note-portal-link--theme-coldgrey .note-portal-link__icon-image {
  color: #313236; }

/*
User Feedback Metrics

Markup:
<section class="user-feedback-metrics {{modifier_class}}">
	<div class="user-feedback-metrics__container">
		<h4 class="user-feedback-metrics__question">Was this note helpful?</h4>
		<div class="user-feedback-metrics__answers">
			<button class="user-feedback-metrics__answer user-feedback-metrics__answer--boolean user-feedback-metrics__answer--yes"
							data-analytics-trigger
							data-analytics-trigger--on="click"
							data-analytics-trigger--url="/api/ratenote"
							data-analytics-trigger--method="post"
							data-analytics-trigger--id="7624"
							data-analytics-trigger--rating="true"
							data-analytics-trigger--class-target="(parent) .user-feedback-metrics"
							data-analytics-trigger--error-class="user-feedback-metrics--error"
							data-analytics-trigger--success-class="user-feedback-metrics--success"
							data-analytics-trigger--sending-class="user-feedback-metrics--sending">
				{{> AIA001.Components.SvgSprite
						classes="user-feedback-metrics__answer-icon"
						modifier_class="thumbs-up" }}
			</button>
			<button class="user-feedback-metrics__answer user-feedback-metrics__answer--boolean user-feedback-metrics__answer--no"
							data-toggle-element-classes
							data-toggle-element-classes--remove="user-feedback-metrics--error"
							data-toggle-element-classes--remove-from=".user-feedback-metrics"
							data-analytics-trigger
							data-analytics-trigger--on="click"
							data-analytics-trigger--url="/api/ratenote"
							data-analytics-trigger--id="7624"
							data-analytics-trigger--rating="false"
							data-analytics-trigger--class-target="(parent) .user-feedback-metrics"
							data-analytics-trigger--error-class="user-feedback-metrics--error"
							data-analytics-trigger--success-class="user-feedback-metrics--success"
							data-analytics-trigger--sending-class="user-feedback-metrics--sending">
				{{> AIA001.Components.SvgSprite
						classes="user-feedback-metrics__answer-icon"
						modifier_class="thumbs-down" }}
			</button>
		</div>
		<div class="user-feedback-metrics__event user-feedback-metrics__event--success">
			{{> AIA001.Components.SvgSprite
					classes="user-feedback-metrics__answer-icon"
					modifier_class="success-500" }}
			<span class="user-feedback-metrics__event-message">Thank you for your feedback</span>
		</div>
		<div class="user-feedback-metrics__event user-feedback-metrics__event--error">
			{{> AIA001.Components.SvgSprite
					classes="user-feedback-metrics__answer-icon"
					modifier_class="alert-500" }}
			<span class="user-feedback-metrics__event-message">Sorry, we couldn't submit your feedback. Please try again later.</span>
		</div>
		<div class="user-feedback-metrics__results">
			<div class="styleguide-box styleguide-box--skyblue" style="min-height: 5rem;">todo: user metrics result view to be defined</div>
		</div>
	</div>
</section>

Actions:
<button
	data-toggle-element-classes
	data-toggle-element-classes--on="click"
	data-toggle-element-classes--remove="user-feedback-metrics--show-results user-feedback-metrics--error"
	data-toggle-element-classes--remove-from=".user-feedback-metrics"
	data-toggle-element-classes--target=".user-feedback-metrics"
	data-toggle-element-classes--to="user-feedback-metrics--success">api success</button>
<button
	data-toggle-element-classes
	data-toggle-element-classes--on="click"
	data-toggle-element-classes--remove="user-feedback-metrics--show-results user-feedback-metrics--success"
	data-toggle-element-classes--remove-from=".user-feedback-metrics"
	data-toggle-element-classes--target=".user-feedback-metrics"
	data-toggle-element-classes--to="user-feedback-metrics--error">api error</button>
<button
	data-toggle-element-classes
	data-toggle-element-classes--on="click"
	data-toggle-element-classes--remove="user-feedback-metrics--error user-feedback-metrics--success"
	data-toggle-element-classes--remove-from=".user-feedback-metrics"
	data-toggle-element-classes--target=".user-feedback-metrics"
	data-toggle-element-classes--to="user-feedback-metrics--show-results">showing results</button>

Api:
```json
		RateNote {
			Id<String>,
			Rating<Boolean>
		}
```

Weight: 50

Styleguide AIA001.Components.Notes.UserFeedbackMetrics
*/
.user-feedback-metrics {
  position: relative;
  width: 100%;
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-style: normal;
  font-size: 0.875rem;
  line-height: 1.125rem;
  color: #4a4845; }

.user-feedback-metrics__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.5rem 0 0.75rem 0;
  border-top: 1px solid #d7d3cd;
  border-bottom: 1px solid #d7d3cd;
  margin-bottom: -1px; }

.user-feedback-metrics
.user-feedback-metrics__container
.user-feedback-metrics__question {
  font-size: inherit;
  margin: 0;
  margin-right: 1.625rem; }

.user-feedback-metrics__answers {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }

.user-feedback-metrics__answer {
  margin-right: 1.375rem;
  cursor: pointer;
  border: 0;
  background: transparent; }

.user-feedback-metrics__answer-icon {
  width: 2rem;
  height: 2rem; }

.user-feedback-metrics__answer:hover,
.user-feedback-metrics__answer--is-selected {
  color: #005036; }

.user-feedback-metrics__answer {
  color: #72d89b; }

.user-feedback-metrics--error .user-feedback-metrics__answers,
.user-feedback-metrics--success .user-feedback-metrics__answers {
  display: none; }

.user-feedback-metrics__event {
  padding: 40px 30px 50px 30px;
  background-color: #F9F9F9;
  border: 1px solid #e0ddd8; }

.user-feedback-metrics__event-message {
  display: block; }

.user-feedback-metrics__event-icon {
  width: 3.75rem;
  height: 3.75rem;
  margin-left: 0.625rem;
  margin-right: 0.625rem;
  margin-bottom: 10px; }

.user-feedback-metrics__event--success,
.user-feedback-metrics__event--error {
  text-align: center; }
  .user-feedback-metrics__event--success .user-feedback-metrics__event-icon,
  .user-feedback-metrics__event--error .user-feedback-metrics__event-icon {
    color: #d7d3cd; }

.radio-option__input {
  position: absolute;
  top: auto;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
  white-space: nowrap;
  outline: none; }

.radio-option__label-icon-wrap {
  color: #72d89b;
  padding: 0 10px; }

.radio-option__input:checked + * .radio-option__label-icon-wrap {
  color: #005036; }

html[data-focus-source="key"] .radio-option__input:focus + * .radio-option__label-icon-wrap {
  color: #005036; }

.radio-option__label-text {
  position: absolute;
  top: auto;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
  white-space: nowrap; }

.user-feedback-metrics__form {
  display: none; }

.user-feedback-metrics--open .user-feedback-metrics__form {
  display: block; }

@-webkit-keyframes user-feedback-metrics--fadeout {
  99% {
    opacity: 0;
    height: initial; }
  100% {
    opacity: 0;
    height: 0; } }

@keyframes user-feedback-metrics--fadeout {
  99% {
    opacity: 0;
    height: initial; }
  100% {
    opacity: 0;
    height: 0; } }

.user-feedback-metrics__results {
  display: none; }

.user-feedback-metrics--show-results .user-feedback-metrics__results {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0 1.09375rem;
  width: 100%; }

.user-feedback-metrics--show-results .user-feedback-metrics__question,
.user-feedback-metrics--show-results .user-feedback-metrics__answers {
  display: none; }

.user-feedback-metrics__event--details {
  display: block;
  width: 100%; }

.feedback-form__submit {
  max-width: 11.25rem; }

.user-feedback-metrics__event-message {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 1.375rem;
  line-height: 1.4;
  color: #4a4845; }

/*
Note Category Portal Link Layout

Markup:
<div class="note-portal-link-layout {{modifier_class}}">
  <div class="note-portal-link-layout__container">
  {{> AIA001.Components.Notes.PortalLink
      id=(cuid)
      modifier_class="note-portal-link--theme-blue note-portal-link--as-block"
      sprite="practice-icon"
      title="Practice" count=347
      backgroundImage="/static/theme/images/aia001-generic1.jpg" }}
  {{> AIA001.Components.Notes.PortalLink
      id=(cuid)
      modifier_class="note-portal-link--theme-red note-portal-link--as-block"
      sprite="project-icon"
      title="Project" count=579
      backgroundImage="/static/theme/images/aia001-generic2.jpg" }}
  {{> AIA001.Components.Notes.PortalLink
      id=(cuid)
      modifier_class="note-portal-link--theme-yellow note-portal-link--as-block"
      sprite="resource-icon"
      title="Resource" count=384
      backgroundImage="/static/theme/images/aia001-generic3.jpg" }}
  </div>
</div>

.note-portal-link-layout--four-col - four columns
.note-portal-link-layout--three-col - three columns
.note-portal-link-layout--two-col - two columns
.note-portal-link-layout--four-col@largeup - four columns at largeup
.note-portal-link-layout--three-col@largeup - three columns at largeup
.note-portal-link-layout--two-col@largeup - two columns at largeup

Weight: 70

Styleguide AIA001.Components.Notes.PortalLinkLayout
*/
.note-portal-link-layout {
  width: 100%;
  background-color: #4a4845; }

.note-portal-link-layout__container,
.note-portal-link-layout__container > .epi-editContainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%; }

.note-portal-link-layout .note-portal-link {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1; }

.note-portal-link-layout--four-col .note-portal-link {
  -ms-flex-preferred-size: 25%;
      flex-basis: 25%; }

.note-portal-link-layout--three-col .note-portal-link {
  -ms-flex-preferred-size: 33.3333%;
      flex-basis: 33.3333%; }

.note-portal-link-layout--two-col .note-portal-link {
  -ms-flex-preferred-size: 50%;
      flex-basis: 50%; }

/*
Note Panel

Markup:
<section class="note-panel {{ modifier_class }} {{classes}}">
  <div class="note-panel__container">
    {{> AIA001.Components.SvgSprite
        classes="note-panel__icon"
        modifier_class="lock" }}
    <div class="note-panel__content">Was this note helpful?</div>
    <div class="note-panel__actions">
      <a href="#" class="note-panel__action c-button c-button--centered button button--primary"><span class="button__container">Become a member</span></a>
      <a href="#" class="note-panel__action c-button c-button--centered button button--secondary"><span class="button__container">Login</span></a>
    </div>
  </div>
</section>

.note-panel--theme-grey - Grey theme panel
.note-panel--theme-blue - Blue theme panel
.note-panel--theme-red - Red theme panel
.note-panel--theme-green - Green theme panel
.note-panel--theme-yellow - Yellow theme panel
.note-panel--theme-sand - Sand theme panel
.note-panel--theme-alert - Alert theme panel
.note-panel--theme-coldgrey - Cold grey theme panel

Styleguide AIA001.Components.Notes.NotePanel
*/
.note-panel {
  border-top: 3px solid #7c7871;
  width: 100%; }

.note-panel__container {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  color: #aca8a4;
  font-size: 0.875rem;
  line-height: 1.125rem;
  word-break: normal;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 1.3125rem 0; }

.note-panel__icon {
  min-width: 4rem;
  min-height: 4rem;
  max-width: 4rem;
  max-height: 4rem;
  margin-right: 1.25rem;
  width: 5.25rem;
  -ms-flex-item-align: start;
      align-self: flex-start; }

.note-panel__content {
  color: #7c7871;
  max-width: calc(100% - (84px + 48px));
  margin-right: 3rem;
  margin-top: 0.5rem;
  margin-bottom: 1.875rem; }

.note-panel__actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -ms-flex-item-align: end;
      align-self: flex-end;
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  width: 100%; }

.note-panel__action {
  margin-top: 0.625rem;
  width: 100%; }

.note-panel--theme-blue {
  border-top-color: #5e64f9; }
  .note-panel--theme-blue .note-panel__icon {
    color: #5e64f9; }

.note-panel--theme-yellow {
  border-top-color: #fea627; }
  .note-panel--theme-yellow .note-panel__icon {
    color: #fea627; }

.note-panel--theme-red {
  border-top-color: #f15f5e; }
  .note-panel--theme-red .note-panel__icon {
    color: #f15f5e; }

.note-panel--theme-green {
  border-top-color: #72d89b; }
  .note-panel--theme-green .note-panel__icon {
    color: #72d89b; }

.note-panel--theme-teal {
  border-top-color: #10a3b2; }
  .note-panel--theme-teal .note-panel__icon {
    color: #10a3b2; }

.note-panel--theme-grey {
  border-top-color: #aca8a4; }
  .note-panel--theme-grey .note-panel__icon {
    color: #aca8a4; }

.note-panel--theme-sand {
  border-top-color: #f5ebcd; }
  .note-panel--theme-sand .note-panel__icon {
    color: #f5ebcd; }

.note-panel--theme-alert {
  border-top-color: #fb8d60; }
  .note-panel--theme-alert .note-panel__icon {
    color: #fb8d60; }

.note-panel--theme-coldgrey {
  border-top-color: #313236; }
  .note-panel--theme-coldgrey .note-panel__icon {
    color: #313236; }

/*
Note Card Layout

Holds note card grids

Markup:
<div class="note-card-layout {{ default modifier_class 'note-card-layout--theme-white' }}">
  {{#if actions }}{{>actions}}{{/if}}
  {{#if @partial-block}}
    {{> @partial-block}}
  {{else}}
    {{> AIA001.Components.Notes.CardGrid
        amountOfCards=20
        modifier_class="note-card-grid--tiled"
      }}
    {{> AIA001.Components.Notes.CardGrid
        amountOfCards=17
        modifier_class="note-card-grid--columns"
      }}
    {{> AIA001.Components.Notes.CardGrid
        amountOfCards=22
        cardClasses="note-card--is-notepack"
        modifier_class="note-card-grid--tiled note-card-grid--is-collection"
      }}
  {{/if}}
</div>

.note-card-layout--theme-white - A grey bg layout
.note-card-layout--theme-grey - A white bg layout

Weight: 30

Styleguide AIA001.Components.Notes.NoteCardLayout
*/
.note-card-layout {
  padding-top: 4.5625rem;
  padding-bottom: 6.25rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -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; }

.note-card-layout__actions {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }

.note-card-layout__actions-container {
  margin: 0 1.875rem;
  max-width: 72.5rem;
  width: 100%; }

.note-card-layout__action-form {
  width: 100%; }

.note-card-layout__action-field-layout {
  background-color: transparent;
  border-color: transparent;
  padding: 0; }

.note-card-layout .note-card-grid:not(:last-child) {
  margin-bottom: 4rem; }

.note-card-layout--no-gutter {
  padding-top: 0; }

.note-card-layout--note-article-area .note-card-grid__container {
  margin: 0; }

.note-card-layout--theme-grey {
  background-color: #e9e7e4; }

.note-card-layout--theme-white {
  background-color: white; }

/*
Note Card Layout (with actions)

Markup:
{{#> AIA001.Components.Notes.NoteCardLayout }}
  {{#*inline actions}}
  <div class="note-card-layout__actions">
      <form class="c-form form note-card-layout__form" name="notesRefineForm" method="GET">
        <div class="c-field-layout field-layout note-card-grid__field-layout">
          <div class="c-field-layout__label">
            <label class="c-field-label" for="sort">
              <span class="c-field-label__text">Sort by</span>
            </label>
          </div>
          <div class="c-field-layout__element">
            <select class="c-field-select field-select" id="sort" name="sort" title="Sort by" onchange="this.form.submit();">
              <option value="" disabled="">Sort</option>
              <option value="1">Date Added</option>
              <option value="3">A to Z by Title</option>
              <option value="4">Z to A by Title</option>
            </select>
          </div>
        </div>
      </form>
    </div>
  {{/inline}}
{{/AIA001.Components.Notes.NoteCardLayout }}

Styleguide AIA001.Components.Notes.NoteCardLayoutWithActions
*/
/*
Notes Grid

Markup:
<div class="note-card-grid {{modifier_class}}">
  <div class="note-card-grid__container">
    <div class="note-card-grid__header">
      {{#if title }}
      <h2 class="note-card-grid__heading">{{ default title modifier_class }}</h2>
      {{/if}}
      <div class="note-card-grid__actions">
        {{#if sortable }}
        <form class="c-form form note-card-grid__form"
              method="post">
          {{#> Core.Components.Forms.FieldLayout.Input
              modifier_class="field-layout note-card-grid__field-layout"
              validation=""
              required=""
              description=""
              label="Sort by" }}
            {{> AIA001.Components.Forms.Select modifier_class="" }}
          {{/Core.Components.Forms.FieldLayout.Input }}
        </form>
        {{/if}}
        {{#if showMore}}
        <a class="note-card-grid__action-button"
          href="#">
          {{> AIA001.Components.SvgSprite
              classes="note-card-grid__action-icon"
              modifier_class="link-icon-major" }}
          <span class="note-card-grid__action-label">More</span>
        </a>
        {{/if}}
      </div>
    </div>
    <div class="note-card-grid__content-area">
      <!-- start example area {{cardClasses}} //-->
      {{#each (fill (default amountOfCards 5)) }}
      {{> AIA001.Components.Notes.Card
          importance=(sample 1 1 2 2 2 3 3 3 3 3 3 3 4 4 4 4 4 4 4 4 4 4 4)
          id=(concat 'note-card-' (cuid))
          modifier_class=(concat
            (default ../cardClasses '')
            ' '
            (sample
              'note-card--theme-blue'
              'note-card--theme-yellow'
              'note-card--theme-red'
              'note-card--theme-green')
            (concat ' ' cardClasses)
          )
        }}
      {{/each}}
      <!-- start example area //-->
    </div>
  </div>
</div>

.note-card-grid--tiled - Grid Layout
.note-card-grid--columns - Columns layout

Weight: 20

Styleguide AIA001.Components.Notes.CardGrid
*/
.note-card-grid {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }

.note-card-grid__container {
  margin: 0 1.875rem;
  width: 72.5rem;
  -ms-flex-negative: 1;
      flex-shrink: 1; }

.note-card-grid__header {
  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-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  margin: 0;
  margin-bottom: 0.875rem; }

.note-card-grid__heading {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 1.5rem;
  color: #4a4845;
  margin-top: 0;
  margin-bottom: 0;
  text-transform: uppercase; }

.note-card-grid__actions {
  width: 100%; }

.note-card-grid__action-button {
  text-decoration: none;
  color: #4a4845;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto; }

.note-card-grid__action-icon {
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.5625rem;
  border-radius: 1000px;
  background-color: #72d89b;
  color: #00412c; }

.note-card-grid__action-button:hover .note-card-grid__action-icon {
  background-color: #005036;
  color: white; }

.note-card-grid__action-label {
  font-family: din, Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-style: normal;
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: normal; }

.note-card-grid .note-card {
  margin: 0.75rem;
  margin-left: 0;
  margin-right: 0;
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  width: 100%;
  height: 13.25rem; }

.note-card-grid .note-card--is-notepack {
  height: 17rem; }

.note-card-grid--columns .note-card-grid__content-area {
  -webkit-column-count: 1;
          column-count: 1;
  width: 100%; }

.note-card-grid--columns .note-card-grid__content-area .note-card {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-column-break-inside: avoid;
          break-inside: avoid-column; }

.note-card-grid--tiled .note-card-grid__content-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; }

@media (min-width: 26.625em) {
  .note-article__meta {
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap; }
  .note-article__content {
    font-size: 1.125rem;
    margin-bottom: 4.875rem; }
  .note-article__note-sharing-controls {
    display: none; }
  .note-article__aside-note-sharing-controls {
    display: block; }
  .note-article__download {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 0; }
  .note-article__download-icon {
    padding: 25px 20px;
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    position: static;
    background: #373533; }
  .note-article__download-title {
    padding: 25px 0 25px 25px;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1; }
    .note-article__download-title .file-size {
      padding-bottom: 0.5rem; }
  .note-article__download-button {
    padding: 25px;
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0; }
    .note-article__download-button .button {
      padding: 0.6rem 1rem;
      line-height: 1.3;
      min-height: auto; }
  .note-summary-list {
    -webkit-column-count: 2;
            column-count: 2; }
  .note-card__heading--is-overflowing {
    font-size: calc(
 16px +
 0.72727 *
 (100vw - 320px) / (960 - 320)); }
  .note-card-grid__header {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end; }
  .note-card-grid__actions {
    width: auto; }
  .note-card-grid--tiled .note-card-grid__content-area {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
  .note-card-grid--tiled .note-card {
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    height: 13.25rem;
    width: 13.25rem;
    margin: 0.75rem; }
  .note-card-grid--tiled .note-card__heading {
    width: 10.75rem;
    height: 7.625rem; }
  .note-card-grid--is-collection .note-card {
    width: 17rem;
    height: 17rem; }
  .note-card-grid--is-collection .note-card__heading {
    width: 14.5rem;
    height: 11.375rem; }
  .note-card-grid--tiled .note-card-grid__content-area {
    margin: 0 -0.75rem; }
  .note-card-layout__action-form {
    display: inline-block;
    width: auto; }
  .note-card-layout__action-field-label {
    width: auto;
    margin-right: 1.3125rem; }
  .note-card-layout__action-field-label,
  .note-card-layout__action-field-element {
    width: auto;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
  .note-card-layout__action-field-element > select {
    width: 17.5rem; } }

@media (min-width: 39.9375em) {
  .note-card-grid--columns .note-card-grid__content-area {
    -webkit-column-count: auto;
            column-count: auto;
    -webkit-column-width: 17rem;
            column-width: 17rem;
    max-width: 35.5rem; }
  .note-card-grid--columns .note-card-grid__content-area .note-card {
    max-width: 17rem; }
  .note-card-grid--columns .note-card-grid__content-area .note-card--importance-1 {
    height: 28rem; }
  .note-card-grid--columns .note-card-grid__content-area .note-card--importance-1 .note-card__heading {
    height: 22.375rem; }
  .note-card-grid--columns .note-card-grid__content-area .note-card--importance-2 {
    height: 19.875rem; }
  .note-card-grid--columns .note-card-grid__content-area .note-card--importance-2 .note-card__heading {
    height: 14.25rem; }
  .note-portal-link-layout__container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    max-width: 90rem;
    margin: 0 auto;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
  .note-portal-link-layout--two-col\@mediumup .note-portal-link {
    -ms-flex-preferred-size: 50%;
        flex-basis: 50%; } }

@media (min-width: 48.0625em) {
  .note-page__aside-toggle-button {
    display: none; }
  .note-panel__content {
    max-width: calc(50% - (84px + 48px)); }
  .note-panel__actions {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-negative: 1;
        flex-shrink: 1;
    -ms-flex-preferred-size: auto;
        flex-basis: auto;
    width: auto;
    margin-left: auto; }
  .note-panel__action {
    margin-top: 0;
    margin-right: 0.625rem;
    width: auto; }
  .note-sharing-controls {
    border-top: 0; }
  .saved-notes-empty-panel__icon {
    width: 12.25rem;
    height: 12.25rem; }
  .saved-notes-empty-panel__footer-actions {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row; }
  .saved-notes-empty-panel__footer-action {
    max-width: 11.25rem;
    margin: 0 5px; }
  .note-portal-link {
    min-height: 7.125rem; }
  .note-portal-link__container {
    margin-left: auto;
    margin-right: auto; }
  .note-portal-link__icon-image {
    width: 4rem;
    height: 4rem; }
  .note-portal-link__heading {
    font-size: 1.875rem; }
  .note-portal-link__child-count {
    font-size: 0.875rem; }
  .note-portal-link-layout__container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    max-width: 90rem;
    margin: 0 auto;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
  .note-portal-link-layout--two-col\@mediumup .note-portal-link {
    -ms-flex-preferred-size: 50%;
        flex-basis: 50%; } }

@media (min-width: 60.25em) {
  .note-card-grid--columns .note-card-grid__content-area {
    max-width: 54.375rem; } }

@media (min-width: 48em) and (max-width: 63.9375em) {
  .note-article__sharing-controls {
    display: none; }
  .note-article__sharing-controls--\@largeonly {
    display: block; }
  .note-sharing-controls.note-article__note-sharing-controls {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
  .note-sharing-controls.note-article__aside-note-sharing-controls {
    display: none;
    margin-top: 0; } }

@media (min-width: 64em) {
  .note-sharing-controls {
    border-top: 0; }
  .note-article__aside-note-sharing-controls {
    margin-top: -7.8125rem;
    margin-bottom: 0; } }

@media (min-width: 64.0625em) {
  .note-card-grid--ghost-tiles\@largeup .note-card-grid__content-area {
    background-image: linear-gradient(45deg, #e0ddd8 45%, transparent 45%), linear-gradient(45deg, transparent 55%, #e0ddd8 55%);
    background-size: 236px 236px;
    /* change these to an even value */
    background-position: 12px -12px, -12px 12px;
    /* second position is half from the background-size */ } }

@media (min-width: 74.4375em) {
  .note-portal-link {
    min-height: 14.25rem; }
  .note-portal-link-layout__container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    max-width: 90rem;
    margin: 0 auto;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap; }
  .note-portal-link-layout--four-col\@largeup .note-portal-link {
    -ms-flex-preferred-size: 25%;
        flex-basis: 25%; }
  .note-portal-link-layout--three-col\@largeup .note-portal-link {
    -ms-flex-preferred-size: 33.3333%;
        flex-basis: 33.3333%; }
  .note-portal-link-layout--two-col\@largeup .note-portal-link {
    -ms-flex-preferred-size: 50%;
        flex-basis: 50%; } }

@media (min-width: 75.8125em) {
  .note-card-grid--columns .note-card-grid__content-area {
    max-width: 72.5rem; } }

/*
Info Card

Markup:
<div class="alert-block {{modifier_class}} {{classes}}">
  <div class="alert-block__container">
    <div class="alert-block__header">
      <h3 class="alert-block__heading">{{title}}</h3>
    </div>
    <div class="alert-block__content">
      {{> AIA001.Components.SvgSprite
          sprite=(default icon "book")
          classes="alert-block__icon" }}
      <div class="alert-block__body">
        {{{ markdown (filecontent "client/src/site__aia001/components/generic-page/paragraph.md") }}}
        <a class="button button--secondary alert-block__cta"
          href="@Model.ActionHref">@Model.ActionLabel</a>
      </div>
    </div>
  </div>
</div>

.alert-block--theme-black - Dark themed info card

Styleguide AIA001.Components.InfoCard
*/
.alert-block {
  background: #fff8f5;
  border: 1px solid #fb8d60;
  color: #373533;
  color: #b94d20;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 1.875rem;
  margin-bottom: 1.875rem;
  border-radius: 0.5rem; }

.alert-block__body {
  font-family: "Adelle", Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 1.125rem;
  line-height: 2rem;
  padding: 0 1.875rem; }

/*# sourceMappingURL=site__aia001--51d946dc.css.map*/