@charset "UTF-8";
/**
* Calculate the luminance for a color.
* See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
*/
/**
* Calculate the contrast ratio between two colors.
* See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
*/
/**
* Determine whether to use dark or light text on top of given color.
* Returns black for dark text and white for light text.
*
* Credits go to https://medium.com/dev-channel/using-sass-to-automatically-pick-text-colors-4ba7645d2796.
*/
/* Colors

## Primary
<ul class="sg-colors">
    <li class="sg-colors__item  sg-colors__item--primary--base"></li>
    <li class="sg-colors__item  sg-colors__item--primary--dark"></li>
</ul>

## Secondary
<ul class="sg-colors">
    <li class="sg-colors__item  sg-colors__item--secondary--base"></li>
    <li class="sg-colors__item  sg-colors__item--secondary--dark"></li>
</ul>

## Neutral shades
<ul class="sg-colors">
    <li class="sg-colors__item  sg-colors__item--neutral--xlight"></li>
    <li class="sg-colors__item  sg-colors__item--neutral--light"></li>
    <li class="sg-colors__item  sg-colors__item--neutral--base"></li>
    <li class="sg-colors__item  sg-colors__item--neutral--dark"></li>
    <li class="sg-colors__item  sg-colors__item--neutral--xdark"></li>
</ul>

## Additional colors
<ul class="sg-colors">
    <li class="sg-colors__item  sg-colors__item--success"></li>
    <li class="sg-colors__item  sg-colors__item--info"></li>
</ul>

Styleguide basic.1:colors
*/
/* Breakpoints / Media queries

Media queries are **only** ment for the mobile first approach; Which means you design for mobile first, then add media queries for larger screens -- Never the other way around

# These are the following breakpoints

1. `xs: 400px` - Small and up
2. `md: 720px`, - Medium and up
3. `lg: 960px`, - Large and up
4. `xl: 1240px` - Extra large and up

Styleguide basic.2:breakpoints
*/
/* Spacing

All the sizes are based on a unit. **The unit size is 6px.**

Never refer to a pixel-size for padding, margin or simular.

# Use these variables for sizes:
- <div class="sg-size  sg-size--small"></div>
  `$spacing--small` - 2 units
- <div class="sg-size  sg-size--base"></div>
  `$spacing` - 4 units
- <div class="sg-size  sg-size--large"></div>
  `$spacing--large` - 10 units
- <div class="sg-size  sg-size--xlarge"></div>
  `$spacing--xlarge` - 40 units

If you space out content it's often best to use `$indention`. This way we can create consistent aligning for texts.

Styleguide basic.3:spacing
*/
/* Vertical rhythm

In order to create a vertical rhythm it's important to stick to spacings that follows the same rhythm as the text's line height.

By default you should never specify heights without variables. If the spacing is vertical; stick to the vertical rhythm variables.

There is a system that creates proper line heights for text. **Never interfer with line-height's neither, since they are essentials to keep a good verticla rhythm.**

# Use this function for setting any vertical spacing:
- `vertical-space(2)` – Plain numbers selects that amount of vertical spaces
- `vertical-space(20px)` – **px**-numbers select the closest match above the number
- `vertical-space($spacing)` – Spacing variables is perfered over pixelvalues
- `vertical-space(20px, 1.2)` – The other argument is to add extra increment if needed _(Simular to `20px * 1.2`)_

Styleguide basic.4:vertical-rhythm
*/
/* Borders

For borders, use one of the following variables,
and prefer the ``*-style`` variables:

- `$border-width` - Default border width.
- `$border-width--small` - Small/thin border width.
- `$border-radius` - Use when setting border-radius.
- `$border-style` - Default border style. Examples:
    - ``border: $border-style;``
    - ``border-top: $border-style;``
- `$border-style` - Small/thin border style. Examples:
    - ``border: $border-style--small;``
    - ``border-top: $border-style--small;``

Styleguide basic.5:borders
*/
/*
Fonts

1. Base font: <div class="sg-font-base">Fallback: </div>
2. Header font: <div class="sg-font-header">Fallback: </div>
2. Mono font – mostly for numbers: <div class="sg-font-mono">Fallback: </div>

- Never use other fonts than these.
- Never specify `font-family` anywhere, use the include method.
- Never specify font-weight, use the include method.

Example: {syntax: scss, preview: false} Use these includes when a font is needed
    @include font(header);
    @include font(header, bold);
    @include font(base);
    @include font(base, bold);
    @include font(mono);

Styleguide type.1:fonts
*/
/* Font sizes

Font sizes should be consistent, therefor never refer to a specific
font size anywhere in the css.

# Just refer to the following sizes:

1. `xsmall` - Rare cases where the font needs tro be smaller than usual
1. `small` - The default font size
1. `medium` - For small headers and preamble text
1. `large` - For headers
1. `xlarge` - For headers
1. `xxlarge` - For headers, use with care

Styleguide type.2:font-sizes
*/
/*
Golden ratio font sizes:
http://designmodo.com/wp-content/uploads/2015/06/readymag-hint-1113x876-99041.png

18px
29px
47px
76px
*/
@font-face {
  font-family: 'Noe Text';
  src: url("../../apmedia/fonts/NoeText-Bold-Italic.eot");
  src: url("../../apmedia/fonts/NoeText-Bold-Italic.eot?#iefix") format("embedded-opentype"), url("../../apmedia/fonts/NoeText-Bold-Italic.woff") format("woff");
  font-weight: bold;
  font-style: italic; }

@font-face {
  font-family: 'Noe Text';
  src: url("../../apmedia/fonts/NoeText-Bold.eot");
  src: url("../../apmedia/fonts/NoeText-Bold.eot?#iefix") format("embedded-opentype"), url("../../apmedia/fonts/NoeText-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal; }

@font-face {
  font-family: 'Maison Neue';
  src: url("../../apmedia/fonts/MaisonNeue-Bold.woff2") format("woff2"), url("../../apmedia/fonts/MaisonNeue-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal; }

@font-face {
  font-family: 'Maison Neue';
  src: url("../../apmedia/fonts/MaisonNeue-BookItalic.woff2") format("woff2"), url("../../apmedia/fonts/MaisonNeue-BookItalic.woff") format("woff");
  font-weight: normal;
  font-style: italic; }

@font-face {
  font-family: 'Maison Neue';
  src: url("../../apmedia/fonts/MaisonNeue-Book.woff2") format("woff2"), url("../../apmedia/fonts/MaisonNeue-Book.woff") format("woff");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'Maison Neue';
  src: url("../../apmedia/fonts/MaisonNeue-BoldItalic.woff2") format("woff2"), url("../../apmedia/fonts/MaisonNeue-BoldItalic.woff") format("woff");
  font-weight: bold;
  font-style: italic; }

@font-face {
  font-family: 'Maison Neue Mono';
  src: url("../../apmedia/fonts/MaisonNeue-Mono.woff2") format("woff2"), url("../../apmedia/fonts/MaisonNeue-Mono.woff") format("woff");
  font-weight: normal;
  font-style: normal; }

/*------------------------------------*    Custom css reset so we don't got so much bloat that we have to reset again
\*------------------------------------*/
*, *:before, *:after {
  box-sizing: border-box; }

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%; }

body,
html,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
dl,
dd,
ol,
ul,
form,
fieldset,
legend,
table,
th,
td,
caption,
hr,
figure {
  margin: 0;
  padding: 0; }

legend {
  border: 0; }

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block; }

a {
  text-decoration: none;
  background: transparent; }
  a:active, a:hover {
    outline: 0; }

ul > li {
  list-style: none; }

img {
  border: 0;
  max-width: 100%; }

button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-sizing: border-box;
  border: 0;
  padding: 0;
  margin: 0;
  background: none;
  overflow: visible;
  cursor: pointer;
  font-size: inherit;
  color: inherit; }

button,
select {
  text-transform: none; }

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0; }

button[disabled],
html input[disabled] {
  cursor: default; }

input {
  line-height: normal; }

textarea,
input[type='text'],
input[type='password'],
input[type='number'],
input[type='email'],
input[type='url'],
input[type='search'],
input[type='tel'],
input[type='color'] {
  outline: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-sizing: border-box; }

textarea {
  overflow: auto;
  resize: none;
  word-wrap: break-word; }

input[type='date']::-webkit-clear-button,
input[type='date']::-webkit-inner-spin-button {
  display: none; }

input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  height: auto;
  display: none; }

input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none; }

input[type='checkbox'],
input[type='radio'] {
  box-sizing: border-box;
  padding: 0; }

input[type='range'] {
  -webkit-appearance: none;
  width: 100%;
  background: transparent; }
  input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none; }
  input[type='range']:focus {
    outline: none; }
  input[type='range']::-ms-track {
    width: 100%;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    color: transparent; }

sub,
sup {
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

svg:not(:root) {
  overflow: hidden; }

pre {
  overflow: auto; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

td,
th {
  padding: 0; }

fieldset {
  position: relative;
  display: block;
  border: 0;
  margin-top: 0; }

.radio,
.checkbox {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -moz-user-drag: none;
  user-drag: none; }

.clearfix::before, .clearfix::after,
.fieldwrapper::before,
.horizontal-fieldwrapper::before,
.fieldset::before,
.legend::before,
.image--left::before,
.image--right::before,
.userdoc-image--left::before,
.fieldwrapper::after,
.horizontal-fieldwrapper::after,
.fieldset::after,
.legend::after,
.image--left::after,
.image--right::after,
.userdoc-image--left::after {
  content: ' ';
  display: table; }

.clearfix::after,
.fieldwrapper::after,
.horizontal-fieldwrapper::after,
.fieldset::after,
.legend::after,
.image--left::after,
.image--right::after,
.userdoc-image--left::after {
  clear: both; }

.spacing-left {
  margin-left: 24px; }

[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
  display: none !important; }

/*!
 * Font Awesome Free 5.0.6 by @fontawesome - http://fontawesome.com
 * License - http://fontawesome.com/license (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 */
.fa,
.fas,
.far,
.fal,
.fab {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1; }

.fa-lg {
  font-size: 1.33333em;
  line-height: 0.75em;
  vertical-align: -.0667em; }

.fa-xs {
  font-size: .75em; }

.fa-sm {
  font-size: .875em; }

.fa-1x {
  font-size: 1em; }

.fa-2x {
  font-size: 2em; }

.fa-3x {
  font-size: 3em; }

.fa-4x {
  font-size: 4em; }

.fa-5x {
  font-size: 5em; }

.fa-6x {
  font-size: 6em; }

.fa-7x {
  font-size: 7em; }

.fa-8x {
  font-size: 8em; }

.fa-9x {
  font-size: 9em; }

.fa-10x {
  font-size: 10em; }

.fa-fw {
  text-align: center;
  width: 1.25em; }

.fa-ul {
  list-style-type: none;
  margin-left: 2.5em;
  padding-left: 0; }
  .fa-ul > li {
    position: relative; }

.fa-li {
  left: -2em;
  position: absolute;
  text-align: center;
  width: 2em;
  line-height: inherit; }

.fa-border {
  border: solid 0.08em #eee;
  border-radius: .1em;
  padding: .2em .25em .15em; }

.fa-pull-left {
  float: left; }

.fa-pull-right {
  float: right; }

.fa.fa-pull-left,
.fas.fa-pull-left,
.far.fa-pull-left,
.fal.fa-pull-left,
.fab.fa-pull-left {
  margin-right: .3em; }

.fa.fa-pull-right,
.fas.fa-pull-right,
.far.fa-pull-right,
.fal.fa-pull-right,
.fab.fa-pull-right {
  margin-left: .3em; }

.fa-spin {
  animation: fa-spin 2s infinite linear; }

.fa-pulse {
  animation: fa-spin 1s infinite steps(8); }

@keyframes fa-spin {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

.fa-rotate-90 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
  transform: rotate(90deg); }

.fa-rotate-180 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
  transform: rotate(180deg); }

.fa-rotate-270 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
  transform: rotate(270deg); }

.fa-flip-horizontal {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
  transform: scale(-1, 1); }

.fa-flip-vertical {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
  transform: scale(1, -1); }

.fa-flip-horizontal.fa-flip-vertical {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
  transform: scale(-1, -1); }

:root .fa-rotate-90,
:root .fa-rotate-180,
:root .fa-rotate-270,
:root .fa-flip-horizontal,
:root .fa-flip-vertical {
  filter: none; }

.fa-stack {
  display: inline-block;
  height: 2em;
  line-height: 2em;
  position: relative;
  vertical-align: middle;
  width: 2em; }

.fa-stack-1x,
.fa-stack-2x {
  left: 0;
  position: absolute;
  text-align: center;
  width: 100%; }

.fa-stack-1x {
  line-height: inherit; }

.fa-stack-2x {
  font-size: 2em; }

.fa-inverse {
  color: #fff; }

/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
readers do not read off random characters that represent icons */
.fa-500px:before {
  content: "\f26e"; }

.fa-accessible-icon:before {
  content: "\f368"; }

.fa-accusoft:before {
  content: "\f369"; }

.fa-address-book:before {
  content: "\f2b9"; }

.fa-address-card:before {
  content: "\f2bb"; }

.fa-adjust:before {
  content: "\f042"; }

.fa-adn:before {
  content: "\f170"; }

.fa-adversal:before {
  content: "\f36a"; }

.fa-affiliatetheme:before {
  content: "\f36b"; }

.fa-algolia:before {
  content: "\f36c"; }

.fa-align-center:before {
  content: "\f037"; }

.fa-align-justify:before {
  content: "\f039"; }

.fa-align-left:before {
  content: "\f036"; }

.fa-align-right:before {
  content: "\f038"; }

.fa-amazon:before {
  content: "\f270"; }

.fa-amazon-pay:before {
  content: "\f42c"; }

.fa-ambulance:before {
  content: "\f0f9"; }

.fa-american-sign-language-interpreting:before {
  content: "\f2a3"; }

.fa-amilia:before {
  content: "\f36d"; }

.fa-anchor:before {
  content: "\f13d"; }

.fa-android:before {
  content: "\f17b"; }

.fa-angellist:before {
  content: "\f209"; }

.fa-angle-double-down:before {
  content: "\f103"; }

.fa-angle-double-left:before {
  content: "\f100"; }

.fa-angle-double-right:before {
  content: "\f101"; }

.fa-angle-double-up:before {
  content: "\f102"; }

.fa-angle-down:before {
  content: "\f107"; }

.fa-angle-left:before {
  content: "\f104"; }

.fa-angle-right:before {
  content: "\f105"; }

.fa-angle-up:before {
  content: "\f106"; }

.fa-angrycreative:before {
  content: "\f36e"; }

.fa-angular:before {
  content: "\f420"; }

.fa-app-store:before {
  content: "\f36f"; }

.fa-app-store-ios:before {
  content: "\f370"; }

.fa-apper:before {
  content: "\f371"; }

.fa-apple:before {
  content: "\f179"; }

.fa-apple-pay:before {
  content: "\f415"; }

.fa-archive:before {
  content: "\f187"; }

.fa-arrow-alt-circle-down:before {
  content: "\f358"; }

.fa-arrow-alt-circle-left:before {
  content: "\f359"; }

.fa-arrow-alt-circle-right:before {
  content: "\f35a"; }

.fa-arrow-alt-circle-up:before {
  content: "\f35b"; }

.fa-arrow-circle-down:before {
  content: "\f0ab"; }

.fa-arrow-circle-left:before {
  content: "\f0a8"; }

.fa-arrow-circle-right:before {
  content: "\f0a9"; }

.fa-arrow-circle-up:before {
  content: "\f0aa"; }

.fa-arrow-down:before {
  content: "\f063"; }

.fa-arrow-left:before {
  content: "\f060"; }

.fa-arrow-right:before {
  content: "\f061"; }

.fa-arrow-up:before {
  content: "\f062"; }

.fa-arrows-alt:before {
  content: "\f0b2"; }

.fa-arrows-alt-h:before {
  content: "\f337"; }

.fa-arrows-alt-v:before {
  content: "\f338"; }

.fa-assistive-listening-systems:before {
  content: "\f2a2"; }

.fa-asterisk:before {
  content: "\f069"; }

.fa-asymmetrik:before {
  content: "\f372"; }

.fa-at:before {
  content: "\f1fa"; }

.fa-audible:before {
  content: "\f373"; }

.fa-audio-description:before {
  content: "\f29e"; }

.fa-autoprefixer:before {
  content: "\f41c"; }

.fa-avianex:before {
  content: "\f374"; }

.fa-aviato:before {
  content: "\f421"; }

.fa-aws:before {
  content: "\f375"; }

.fa-backward:before {
  content: "\f04a"; }

.fa-balance-scale:before {
  content: "\f24e"; }

.fa-ban:before {
  content: "\f05e"; }

.fa-bandcamp:before {
  content: "\f2d5"; }

.fa-barcode:before {
  content: "\f02a"; }

.fa-bars:before {
  content: "\f0c9"; }

.fa-baseball-ball:before {
  content: "\f433"; }

.fa-basketball-ball:before {
  content: "\f434"; }

.fa-bath:before {
  content: "\f2cd"; }

.fa-battery-empty:before {
  content: "\f244"; }

.fa-battery-full:before {
  content: "\f240"; }

.fa-battery-half:before {
  content: "\f242"; }

.fa-battery-quarter:before {
  content: "\f243"; }

.fa-battery-three-quarters:before {
  content: "\f241"; }

.fa-bed:before {
  content: "\f236"; }

.fa-beer:before {
  content: "\f0fc"; }

.fa-behance:before {
  content: "\f1b4"; }

.fa-behance-square:before {
  content: "\f1b5"; }

.fa-bell:before {
  content: "\f0f3"; }

.fa-bell-slash:before {
  content: "\f1f6"; }

.fa-bicycle:before {
  content: "\f206"; }

.fa-bimobject:before {
  content: "\f378"; }

.fa-binoculars:before {
  content: "\f1e5"; }

.fa-birthday-cake:before {
  content: "\f1fd"; }

.fa-bitbucket:before {
  content: "\f171"; }

.fa-bitcoin:before {
  content: "\f379"; }

.fa-bity:before {
  content: "\f37a"; }

.fa-black-tie:before {
  content: "\f27e"; }

.fa-blackberry:before {
  content: "\f37b"; }

.fa-blind:before {
  content: "\f29d"; }

.fa-blogger:before {
  content: "\f37c"; }

.fa-blogger-b:before {
  content: "\f37d"; }

.fa-bluetooth:before {
  content: "\f293"; }

.fa-bluetooth-b:before {
  content: "\f294"; }

.fa-bold:before {
  content: "\f032"; }

.fa-bolt:before {
  content: "\f0e7"; }

.fa-bomb:before {
  content: "\f1e2"; }

.fa-book:before {
  content: "\f02d"; }

.fa-bookmark:before {
  content: "\f02e"; }

.fa-bowling-ball:before {
  content: "\f436"; }

.fa-braille:before {
  content: "\f2a1"; }

.fa-briefcase:before {
  content: "\f0b1"; }

.fa-btc:before {
  content: "\f15a"; }

.fa-bug:before {
  content: "\f188"; }

.fa-building:before {
  content: "\f1ad"; }

.fa-bullhorn:before {
  content: "\f0a1"; }

.fa-bullseye:before {
  content: "\f140"; }

.fa-buromobelexperte:before {
  content: "\f37f"; }

.fa-bus:before {
  content: "\f207"; }

.fa-buysellads:before {
  content: "\f20d"; }

.fa-calculator:before {
  content: "\f1ec"; }

.fa-calendar:before {
  content: "\f133"; }

.fa-calendar-alt:before {
  content: "\f073"; }

.fa-calendar-check:before {
  content: "\f274"; }

.fa-calendar-minus:before {
  content: "\f272"; }

.fa-calendar-plus:before {
  content: "\f271"; }

.fa-calendar-times:before {
  content: "\f273"; }

.fa-camera:before {
  content: "\f030"; }

.fa-camera-retro:before {
  content: "\f083"; }

.fa-car:before {
  content: "\f1b9"; }

.fa-caret-down:before {
  content: "\f0d7"; }

.fa-caret-left:before {
  content: "\f0d9"; }

.fa-caret-right:before {
  content: "\f0da"; }

.fa-caret-square-down:before {
  content: "\f150"; }

.fa-caret-square-left:before {
  content: "\f191"; }

.fa-caret-square-right:before {
  content: "\f152"; }

.fa-caret-square-up:before {
  content: "\f151"; }

.fa-caret-up:before {
  content: "\f0d8"; }

.fa-cart-arrow-down:before {
  content: "\f218"; }

.fa-cart-plus:before {
  content: "\f217"; }

.fa-cc-amazon-pay:before {
  content: "\f42d"; }

.fa-cc-amex:before {
  content: "\f1f3"; }

.fa-cc-apple-pay:before {
  content: "\f416"; }

.fa-cc-diners-club:before {
  content: "\f24c"; }

.fa-cc-discover:before {
  content: "\f1f2"; }

.fa-cc-jcb:before {
  content: "\f24b"; }

.fa-cc-mastercard:before {
  content: "\f1f1"; }

.fa-cc-paypal:before {
  content: "\f1f4"; }

.fa-cc-stripe:before {
  content: "\f1f5"; }

.fa-cc-visa:before {
  content: "\f1f0"; }

.fa-centercode:before {
  content: "\f380"; }

.fa-certificate:before {
  content: "\f0a3"; }

.fa-chart-area:before {
  content: "\f1fe"; }

.fa-chart-bar:before {
  content: "\f080"; }

.fa-chart-line:before {
  content: "\f201"; }

.fa-chart-pie:before {
  content: "\f200"; }

.fa-check:before {
  content: "\f00c"; }

.fa-check-circle:before {
  content: "\f058"; }

.fa-check-square:before {
  content: "\f14a"; }

.fa-chess:before {
  content: "\f439"; }

.fa-chess-bishop:before {
  content: "\f43a"; }

.fa-chess-board:before {
  content: "\f43c"; }

.fa-chess-king:before {
  content: "\f43f"; }

.fa-chess-knight:before {
  content: "\f441"; }

.fa-chess-pawn:before {
  content: "\f443"; }

.fa-chess-queen:before {
  content: "\f445"; }

.fa-chess-rook:before {
  content: "\f447"; }

.fa-chevron-circle-down:before {
  content: "\f13a"; }

.fa-chevron-circle-left:before {
  content: "\f137"; }

.fa-chevron-circle-right:before {
  content: "\f138"; }

.fa-chevron-circle-up:before {
  content: "\f139"; }

.fa-chevron-down:before {
  content: "\f078"; }

.fa-chevron-left:before {
  content: "\f053"; }

.fa-chevron-right:before {
  content: "\f054"; }

.fa-chevron-up:before {
  content: "\f077"; }

.fa-child:before {
  content: "\f1ae"; }

.fa-chrome:before {
  content: "\f268"; }

.fa-circle:before {
  content: "\f111"; }

.fa-circle-notch:before {
  content: "\f1ce"; }

.fa-clipboard:before {
  content: "\f328"; }

.fa-clock:before {
  content: "\f017"; }

.fa-clone:before {
  content: "\f24d"; }

.fa-closed-captioning:before {
  content: "\f20a"; }

.fa-cloud:before {
  content: "\f0c2"; }

.fa-cloud-download-alt:before {
  content: "\f381"; }

.fa-cloud-upload-alt:before {
  content: "\f382"; }

.fa-cloudscale:before {
  content: "\f383"; }

.fa-cloudsmith:before {
  content: "\f384"; }

.fa-cloudversify:before {
  content: "\f385"; }

.fa-code:before {
  content: "\f121"; }

.fa-code-branch:before {
  content: "\f126"; }

.fa-codepen:before {
  content: "\f1cb"; }

.fa-codiepie:before {
  content: "\f284"; }

.fa-coffee:before {
  content: "\f0f4"; }

.fa-cog:before {
  content: "\f013"; }

.fa-cogs:before {
  content: "\f085"; }

.fa-columns:before {
  content: "\f0db"; }

.fa-comment:before {
  content: "\f075"; }

.fa-comment-alt:before {
  content: "\f27a"; }

.fa-comments:before {
  content: "\f086"; }

.fa-compass:before {
  content: "\f14e"; }

.fa-compress:before {
  content: "\f066"; }

.fa-connectdevelop:before {
  content: "\f20e"; }

.fa-contao:before {
  content: "\f26d"; }

.fa-copy:before {
  content: "\f0c5"; }

.fa-copyright:before {
  content: "\f1f9"; }

.fa-cpanel:before {
  content: "\f388"; }

.fa-creative-commons:before {
  content: "\f25e"; }

.fa-credit-card:before {
  content: "\f09d"; }

.fa-crop:before {
  content: "\f125"; }

.fa-crosshairs:before {
  content: "\f05b"; }

.fa-css3:before {
  content: "\f13c"; }

.fa-css3-alt:before {
  content: "\f38b"; }

.fa-cube:before {
  content: "\f1b2"; }

.fa-cubes:before {
  content: "\f1b3"; }

.fa-cut:before {
  content: "\f0c4"; }

.fa-cuttlefish:before {
  content: "\f38c"; }

.fa-d-and-d:before {
  content: "\f38d"; }

.fa-dashcube:before {
  content: "\f210"; }

.fa-database:before {
  content: "\f1c0"; }

.fa-deaf:before {
  content: "\f2a4"; }

.fa-delicious:before {
  content: "\f1a5"; }

.fa-deploydog:before {
  content: "\f38e"; }

.fa-deskpro:before {
  content: "\f38f"; }

.fa-desktop:before {
  content: "\f108"; }

.fa-deviantart:before {
  content: "\f1bd"; }

.fa-digg:before {
  content: "\f1a6"; }

.fa-digital-ocean:before {
  content: "\f391"; }

.fa-discord:before {
  content: "\f392"; }

.fa-discourse:before {
  content: "\f393"; }

.fa-dochub:before {
  content: "\f394"; }

.fa-docker:before {
  content: "\f395"; }

.fa-dollar-sign:before {
  content: "\f155"; }

.fa-dot-circle:before {
  content: "\f192"; }

.fa-download:before {
  content: "\f019"; }

.fa-draft2digital:before {
  content: "\f396"; }

.fa-dribbble:before {
  content: "\f17d"; }

.fa-dribbble-square:before {
  content: "\f397"; }

.fa-dropbox:before {
  content: "\f16b"; }

.fa-drupal:before {
  content: "\f1a9"; }

.fa-dyalog:before {
  content: "\f399"; }

.fa-earlybirds:before {
  content: "\f39a"; }

.fa-edge:before {
  content: "\f282"; }

.fa-edit:before {
  content: "\f044"; }

.fa-eject:before {
  content: "\f052"; }

.fa-elementor:before {
  content: "\f430"; }

.fa-ellipsis-h:before {
  content: "\f141"; }

.fa-ellipsis-v:before {
  content: "\f142"; }

.fa-ember:before {
  content: "\f423"; }

.fa-empire:before {
  content: "\f1d1"; }

.fa-envelope:before {
  content: "\f0e0"; }

.fa-envelope-open:before {
  content: "\f2b6"; }

.fa-envelope-square:before {
  content: "\f199"; }

.fa-envira:before {
  content: "\f299"; }

.fa-eraser:before {
  content: "\f12d"; }

.fa-erlang:before {
  content: "\f39d"; }

.fa-ethereum:before {
  content: "\f42e"; }

.fa-etsy:before {
  content: "\f2d7"; }

.fa-euro-sign:before {
  content: "\f153"; }

.fa-exchange-alt:before {
  content: "\f362"; }

.fa-exclamation:before {
  content: "\f12a"; }

.fa-exclamation-circle:before {
  content: "\f06a"; }

.fa-exclamation-triangle:before {
  content: "\f071"; }

.fa-expand:before {
  content: "\f065"; }

.fa-expand-arrows-alt:before {
  content: "\f31e"; }

.fa-expeditedssl:before {
  content: "\f23e"; }

.fa-external-link-alt:before {
  content: "\f35d"; }

.fa-external-link-square-alt:before {
  content: "\f360"; }

.fa-eye:before {
  content: "\f06e"; }

.fa-eye-dropper:before {
  content: "\f1fb"; }

.fa-eye-slash:before {
  content: "\f070"; }

.fa-facebook:before {
  content: "\f09a"; }

.fa-facebook-f:before {
  content: "\f39e"; }

.fa-facebook-messenger:before {
  content: "\f39f"; }

.fa-facebook-square:before {
  content: "\f082"; }

.fa-fast-backward:before {
  content: "\f049"; }

.fa-fast-forward:before {
  content: "\f050"; }

.fa-fax:before {
  content: "\f1ac"; }

.fa-female:before {
  content: "\f182"; }

.fa-fighter-jet:before {
  content: "\f0fb"; }

.fa-file:before {
  content: "\f15b"; }

.fa-file-alt:before {
  content: "\f15c"; }

.fa-file-archive:before {
  content: "\f1c6"; }

.fa-file-audio:before {
  content: "\f1c7"; }

.fa-file-code:before {
  content: "\f1c9"; }

.fa-file-excel:before {
  content: "\f1c3"; }

.fa-file-image:before {
  content: "\f1c5"; }

.fa-file-pdf:before {
  content: "\f1c1"; }

.fa-file-powerpoint:before {
  content: "\f1c4"; }

.fa-file-video:before {
  content: "\f1c8"; }

.fa-file-word:before {
  content: "\f1c2"; }

.fa-film:before {
  content: "\f008"; }

.fa-filter:before {
  content: "\f0b0"; }

.fa-fire:before {
  content: "\f06d"; }

.fa-fire-extinguisher:before {
  content: "\f134"; }

.fa-firefox:before {
  content: "\f269"; }

.fa-first-order:before {
  content: "\f2b0"; }

.fa-firstdraft:before {
  content: "\f3a1"; }

.fa-flag:before {
  content: "\f024"; }

.fa-flag-checkered:before {
  content: "\f11e"; }

.fa-flask:before {
  content: "\f0c3"; }

.fa-flickr:before {
  content: "\f16e"; }

.fa-flipboard:before {
  content: "\f44d"; }

.fa-fly:before {
  content: "\f417"; }

.fa-folder:before {
  content: "\f07b"; }

.fa-folder-open:before {
  content: "\f07c"; }

.fa-font:before {
  content: "\f031"; }

.fa-font-awesome:before {
  content: "\f2b4"; }

.fa-font-awesome-alt:before {
  content: "\f35c"; }

.fa-font-awesome-flag:before {
  content: "\f425"; }

.fa-fonticons:before {
  content: "\f280"; }

.fa-fonticons-fi:before {
  content: "\f3a2"; }

.fa-football-ball:before {
  content: "\f44e"; }

.fa-fort-awesome:before {
  content: "\f286"; }

.fa-fort-awesome-alt:before {
  content: "\f3a3"; }

.fa-forumbee:before {
  content: "\f211"; }

.fa-forward:before {
  content: "\f04e"; }

.fa-foursquare:before {
  content: "\f180"; }

.fa-free-code-camp:before {
  content: "\f2c5"; }

.fa-freebsd:before {
  content: "\f3a4"; }

.fa-frown:before {
  content: "\f119"; }

.fa-futbol:before {
  content: "\f1e3"; }

.fa-gamepad:before {
  content: "\f11b"; }

.fa-gavel:before {
  content: "\f0e3"; }

.fa-gem:before {
  content: "\f3a5"; }

.fa-genderless:before {
  content: "\f22d"; }

.fa-get-pocket:before {
  content: "\f265"; }

.fa-gg:before {
  content: "\f260"; }

.fa-gg-circle:before {
  content: "\f261"; }

.fa-gift:before {
  content: "\f06b"; }

.fa-git:before {
  content: "\f1d3"; }

.fa-git-square:before {
  content: "\f1d2"; }

.fa-github:before {
  content: "\f09b"; }

.fa-github-alt:before {
  content: "\f113"; }

.fa-github-square:before {
  content: "\f092"; }

.fa-gitkraken:before {
  content: "\f3a6"; }

.fa-gitlab:before {
  content: "\f296"; }

.fa-gitter:before {
  content: "\f426"; }

.fa-glass-martini:before {
  content: "\f000"; }

.fa-glide:before {
  content: "\f2a5"; }

.fa-glide-g:before {
  content: "\f2a6"; }

.fa-globe:before {
  content: "\f0ac"; }

.fa-gofore:before {
  content: "\f3a7"; }

.fa-golf-ball:before {
  content: "\f450"; }

.fa-goodreads:before {
  content: "\f3a8"; }

.fa-goodreads-g:before {
  content: "\f3a9"; }

.fa-google:before {
  content: "\f1a0"; }

.fa-google-drive:before {
  content: "\f3aa"; }

.fa-google-play:before {
  content: "\f3ab"; }

.fa-google-plus:before {
  content: "\f2b3"; }

.fa-google-plus-g:before {
  content: "\f0d5"; }

.fa-google-plus-square:before {
  content: "\f0d4"; }

.fa-google-wallet:before {
  content: "\f1ee"; }

.fa-graduation-cap:before {
  content: "\f19d"; }

.fa-gratipay:before {
  content: "\f184"; }

.fa-grav:before {
  content: "\f2d6"; }

.fa-gripfire:before {
  content: "\f3ac"; }

.fa-grunt:before {
  content: "\f3ad"; }

.fa-gulp:before {
  content: "\f3ae"; }

.fa-h-square:before {
  content: "\f0fd"; }

.fa-hacker-news:before {
  content: "\f1d4"; }

.fa-hacker-news-square:before {
  content: "\f3af"; }

.fa-hand-lizard:before {
  content: "\f258"; }

.fa-hand-paper:before {
  content: "\f256"; }

.fa-hand-peace:before {
  content: "\f25b"; }

.fa-hand-point-down:before {
  content: "\f0a7"; }

.fa-hand-point-left:before {
  content: "\f0a5"; }

.fa-hand-point-right:before {
  content: "\f0a4"; }

.fa-hand-point-up:before {
  content: "\f0a6"; }

.fa-hand-pointer:before {
  content: "\f25a"; }

.fa-hand-rock:before {
  content: "\f255"; }

.fa-hand-scissors:before {
  content: "\f257"; }

.fa-hand-spock:before {
  content: "\f259"; }

.fa-handshake:before {
  content: "\f2b5"; }

.fa-hashtag:before {
  content: "\f292"; }

.fa-hdd:before {
  content: "\f0a0"; }

.fa-heading:before {
  content: "\f1dc"; }

.fa-headphones:before {
  content: "\f025"; }

.fa-heart:before {
  content: "\f004"; }

.fa-heartbeat:before {
  content: "\f21e"; }

.fa-hips:before {
  content: "\f452"; }

.fa-hire-a-helper:before {
  content: "\f3b0"; }

.fa-history:before {
  content: "\f1da"; }

.fa-hockey-puck:before {
  content: "\f453"; }

.fa-home:before {
  content: "\f015"; }

.fa-hooli:before {
  content: "\f427"; }

.fa-hospital:before {
  content: "\f0f8"; }

.fa-hotjar:before {
  content: "\f3b1"; }

.fa-hourglass:before {
  content: "\f254"; }

.fa-hourglass-end:before {
  content: "\f253"; }

.fa-hourglass-half:before {
  content: "\f252"; }

.fa-hourglass-start:before {
  content: "\f251"; }

.fa-houzz:before {
  content: "\f27c"; }

.fa-html5:before {
  content: "\f13b"; }

.fa-hubspot:before {
  content: "\f3b2"; }

.fa-i-cursor:before {
  content: "\f246"; }

.fa-id-badge:before {
  content: "\f2c1"; }

.fa-id-card:before {
  content: "\f2c2"; }

.fa-image:before {
  content: "\f03e"; }

.fa-images:before {
  content: "\f302"; }

.fa-imdb:before {
  content: "\f2d8"; }

.fa-inbox:before {
  content: "\f01c"; }

.fa-indent:before {
  content: "\f03c"; }

.fa-industry:before {
  content: "\f275"; }

.fa-info:before {
  content: "\f129"; }

.fa-info-circle:before {
  content: "\f05a"; }

.fa-instagram:before {
  content: "\f16d"; }

.fa-internet-explorer:before {
  content: "\f26b"; }

.fa-ioxhost:before {
  content: "\f208"; }

.fa-italic:before {
  content: "\f033"; }

.fa-itunes:before {
  content: "\f3b4"; }

.fa-itunes-note:before {
  content: "\f3b5"; }

.fa-jenkins:before {
  content: "\f3b6"; }

.fa-joget:before {
  content: "\f3b7"; }

.fa-joomla:before {
  content: "\f1aa"; }

.fa-js:before {
  content: "\f3b8"; }

.fa-js-square:before {
  content: "\f3b9"; }

.fa-jsfiddle:before {
  content: "\f1cc"; }

.fa-key:before {
  content: "\f084"; }

.fa-keyboard:before {
  content: "\f11c"; }

.fa-keycdn:before {
  content: "\f3ba"; }

.fa-kickstarter:before {
  content: "\f3bb"; }

.fa-kickstarter-k:before {
  content: "\f3bc"; }

.fa-korvue:before {
  content: "\f42f"; }

.fa-language:before {
  content: "\f1ab"; }

.fa-laptop:before {
  content: "\f109"; }

.fa-laravel:before {
  content: "\f3bd"; }

.fa-lastfm:before {
  content: "\f202"; }

.fa-lastfm-square:before {
  content: "\f203"; }

.fa-leaf:before {
  content: "\f06c"; }

.fa-leanpub:before {
  content: "\f212"; }

.fa-lemon:before {
  content: "\f094"; }

.fa-less:before {
  content: "\f41d"; }

.fa-level-down-alt:before {
  content: "\f3be"; }

.fa-level-up-alt:before {
  content: "\f3bf"; }

.fa-life-ring:before {
  content: "\f1cd"; }

.fa-lightbulb:before {
  content: "\f0eb"; }

.fa-line:before {
  content: "\f3c0"; }

.fa-link:before {
  content: "\f0c1"; }

.fa-linkedin:before {
  content: "\f08c"; }

.fa-linkedin-in:before {
  content: "\f0e1"; }

.fa-linode:before {
  content: "\f2b8"; }

.fa-linux:before {
  content: "\f17c"; }

.fa-lira-sign:before {
  content: "\f195"; }

.fa-list:before {
  content: "\f03a"; }

.fa-list-alt:before {
  content: "\f022"; }

.fa-list-ol:before {
  content: "\f0cb"; }

.fa-list-ul:before {
  content: "\f0ca"; }

.fa-location-arrow:before {
  content: "\f124"; }

.fa-lock:before {
  content: "\f023"; }

.fa-lock-open:before {
  content: "\f3c1"; }

.fa-long-arrow-alt-down:before {
  content: "\f309"; }

.fa-long-arrow-alt-left:before {
  content: "\f30a"; }

.fa-long-arrow-alt-right:before {
  content: "\f30b"; }

.fa-long-arrow-alt-up:before {
  content: "\f30c"; }

.fa-low-vision:before {
  content: "\f2a8"; }

.fa-lyft:before {
  content: "\f3c3"; }

.fa-magento:before {
  content: "\f3c4"; }

.fa-magic:before {
  content: "\f0d0"; }

.fa-magnet:before {
  content: "\f076"; }

.fa-male:before {
  content: "\f183"; }

.fa-map:before {
  content: "\f279"; }

.fa-map-marker:before {
  content: "\f041"; }

.fa-map-marker-alt:before {
  content: "\f3c5"; }

.fa-map-pin:before {
  content: "\f276"; }

.fa-map-signs:before {
  content: "\f277"; }

.fa-mars:before {
  content: "\f222"; }

.fa-mars-double:before {
  content: "\f227"; }

.fa-mars-stroke:before {
  content: "\f229"; }

.fa-mars-stroke-h:before {
  content: "\f22b"; }

.fa-mars-stroke-v:before {
  content: "\f22a"; }

.fa-maxcdn:before {
  content: "\f136"; }

.fa-medapps:before {
  content: "\f3c6"; }

.fa-medium:before {
  content: "\f23a"; }

.fa-medium-m:before {
  content: "\f3c7"; }

.fa-medkit:before {
  content: "\f0fa"; }

.fa-medrt:before {
  content: "\f3c8"; }

.fa-meetup:before {
  content: "\f2e0"; }

.fa-meh:before {
  content: "\f11a"; }

.fa-mercury:before {
  content: "\f223"; }

.fa-microchip:before {
  content: "\f2db"; }

.fa-microphone:before {
  content: "\f130"; }

.fa-microphone-slash:before {
  content: "\f131"; }

.fa-microsoft:before {
  content: "\f3ca"; }

.fa-minus:before {
  content: "\f068"; }

.fa-minus-circle:before {
  content: "\f056"; }

.fa-minus-square:before {
  content: "\f146"; }

.fa-mix:before {
  content: "\f3cb"; }

.fa-mixcloud:before {
  content: "\f289"; }

.fa-mizuni:before {
  content: "\f3cc"; }

.fa-mobile:before {
  content: "\f10b"; }

.fa-mobile-alt:before {
  content: "\f3cd"; }

.fa-modx:before {
  content: "\f285"; }

.fa-monero:before {
  content: "\f3d0"; }

.fa-money-bill-alt:before {
  content: "\f3d1"; }

.fa-moon:before {
  content: "\f186"; }

.fa-motorcycle:before {
  content: "\f21c"; }

.fa-mouse-pointer:before {
  content: "\f245"; }

.fa-music:before {
  content: "\f001"; }

.fa-napster:before {
  content: "\f3d2"; }

.fa-neuter:before {
  content: "\f22c"; }

.fa-newspaper:before {
  content: "\f1ea"; }

.fa-nintendo-switch:before {
  content: "\f418"; }

.fa-node:before {
  content: "\f419"; }

.fa-node-js:before {
  content: "\f3d3"; }

.fa-npm:before {
  content: "\f3d4"; }

.fa-ns8:before {
  content: "\f3d5"; }

.fa-nutritionix:before {
  content: "\f3d6"; }

.fa-object-group:before {
  content: "\f247"; }

.fa-object-ungroup:before {
  content: "\f248"; }

.fa-odnoklassniki:before {
  content: "\f263"; }

.fa-odnoklassniki-square:before {
  content: "\f264"; }

.fa-opencart:before {
  content: "\f23d"; }

.fa-openid:before {
  content: "\f19b"; }

.fa-opera:before {
  content: "\f26a"; }

.fa-optin-monster:before {
  content: "\f23c"; }

.fa-osi:before {
  content: "\f41a"; }

.fa-outdent:before {
  content: "\f03b"; }

.fa-page4:before {
  content: "\f3d7"; }

.fa-pagelines:before {
  content: "\f18c"; }

.fa-paint-brush:before {
  content: "\f1fc"; }

.fa-palfed:before {
  content: "\f3d8"; }

.fa-paper-plane:before {
  content: "\f1d8"; }

.fa-paperclip:before {
  content: "\f0c6"; }

.fa-paragraph:before {
  content: "\f1dd"; }

.fa-paste:before {
  content: "\f0ea"; }

.fa-patreon:before {
  content: "\f3d9"; }

.fa-pause:before {
  content: "\f04c"; }

.fa-pause-circle:before {
  content: "\f28b"; }

.fa-paw:before {
  content: "\f1b0"; }

.fa-paypal:before {
  content: "\f1ed"; }

.fa-pen-square:before {
  content: "\f14b"; }

.fa-pencil-alt:before {
  content: "\f303"; }

.fa-percent:before {
  content: "\f295"; }

.fa-periscope:before {
  content: "\f3da"; }

.fa-phabricator:before {
  content: "\f3db"; }

.fa-phoenix-framework:before {
  content: "\f3dc"; }

.fa-phone:before {
  content: "\f095"; }

.fa-phone-square:before {
  content: "\f098"; }

.fa-phone-volume:before {
  content: "\f2a0"; }

.fa-php:before {
  content: "\f457"; }

.fa-pied-piper:before {
  content: "\f2ae"; }

.fa-pied-piper-alt:before {
  content: "\f1a8"; }

.fa-pied-piper-pp:before {
  content: "\f1a7"; }

.fa-pinterest:before {
  content: "\f0d2"; }

.fa-pinterest-p:before {
  content: "\f231"; }

.fa-pinterest-square:before {
  content: "\f0d3"; }

.fa-plane:before {
  content: "\f072"; }

.fa-play:before {
  content: "\f04b"; }

.fa-play-circle:before {
  content: "\f144"; }

.fa-playstation:before {
  content: "\f3df"; }

.fa-plug:before {
  content: "\f1e6"; }

.fa-plus:before {
  content: "\f067"; }

.fa-plus-circle:before {
  content: "\f055"; }

.fa-plus-square:before {
  content: "\f0fe"; }

.fa-podcast:before {
  content: "\f2ce"; }

.fa-pound-sign:before {
  content: "\f154"; }

.fa-power-off:before {
  content: "\f011"; }

.fa-print:before {
  content: "\f02f"; }

.fa-product-hunt:before {
  content: "\f288"; }

.fa-pushed:before {
  content: "\f3e1"; }

.fa-puzzle-piece:before {
  content: "\f12e"; }

.fa-python:before {
  content: "\f3e2"; }

.fa-qq:before {
  content: "\f1d6"; }

.fa-qrcode:before {
  content: "\f029"; }

.fa-question:before {
  content: "\f128"; }

.fa-question-circle:before {
  content: "\f059"; }

.fa-quidditch:before {
  content: "\f458"; }

.fa-quinscape:before {
  content: "\f459"; }

.fa-quora:before {
  content: "\f2c4"; }

.fa-quote-left:before {
  content: "\f10d"; }

.fa-quote-right:before {
  content: "\f10e"; }

.fa-random:before {
  content: "\f074"; }

.fa-ravelry:before {
  content: "\f2d9"; }

.fa-react:before {
  content: "\f41b"; }

.fa-rebel:before {
  content: "\f1d0"; }

.fa-recycle:before {
  content: "\f1b8"; }

.fa-red-river:before {
  content: "\f3e3"; }

.fa-reddit:before {
  content: "\f1a1"; }

.fa-reddit-alien:before {
  content: "\f281"; }

.fa-reddit-square:before {
  content: "\f1a2"; }

.fa-redo:before {
  content: "\f01e"; }

.fa-redo-alt:before {
  content: "\f2f9"; }

.fa-registered:before {
  content: "\f25d"; }

.fa-rendact:before {
  content: "\f3e4"; }

.fa-renren:before {
  content: "\f18b"; }

.fa-reply:before {
  content: "\f3e5"; }

.fa-reply-all:before {
  content: "\f122"; }

.fa-replyd:before {
  content: "\f3e6"; }

.fa-resolving:before {
  content: "\f3e7"; }

.fa-retweet:before {
  content: "\f079"; }

.fa-road:before {
  content: "\f018"; }

.fa-rocket:before {
  content: "\f135"; }

.fa-rocketchat:before {
  content: "\f3e8"; }

.fa-rockrms:before {
  content: "\f3e9"; }

.fa-rss:before {
  content: "\f09e"; }

.fa-rss-square:before {
  content: "\f143"; }

.fa-ruble-sign:before {
  content: "\f158"; }

.fa-rupee-sign:before {
  content: "\f156"; }

.fa-safari:before {
  content: "\f267"; }

.fa-sass:before {
  content: "\f41e"; }

.fa-save:before {
  content: "\f0c7"; }

.fa-schlix:before {
  content: "\f3ea"; }

.fa-scribd:before {
  content: "\f28a"; }

.fa-search:before {
  content: "\f002"; }

.fa-search-minus:before {
  content: "\f010"; }

.fa-search-plus:before {
  content: "\f00e"; }

.fa-searchengin:before {
  content: "\f3eb"; }

.fa-sellcast:before {
  content: "\f2da"; }

.fa-sellsy:before {
  content: "\f213"; }

.fa-server:before {
  content: "\f233"; }

.fa-servicestack:before {
  content: "\f3ec"; }

.fa-share:before {
  content: "\f064"; }

.fa-share-alt:before {
  content: "\f1e0"; }

.fa-share-alt-square:before {
  content: "\f1e1"; }

.fa-share-square:before {
  content: "\f14d"; }

.fa-shekel-sign:before {
  content: "\f20b"; }

.fa-shield-alt:before {
  content: "\f3ed"; }

.fa-ship:before {
  content: "\f21a"; }

.fa-shirtsinbulk:before {
  content: "\f214"; }

.fa-shopping-bag:before {
  content: "\f290"; }

.fa-shopping-basket:before {
  content: "\f291"; }

.fa-shopping-cart:before {
  content: "\f07a"; }

.fa-shower:before {
  content: "\f2cc"; }

.fa-sign-in-alt:before {
  content: "\f2f6"; }

.fa-sign-language:before {
  content: "\f2a7"; }

.fa-sign-out-alt:before {
  content: "\f2f5"; }

.fa-signal:before {
  content: "\f012"; }

.fa-simplybuilt:before {
  content: "\f215"; }

.fa-sistrix:before {
  content: "\f3ee"; }

.fa-sitemap:before {
  content: "\f0e8"; }

.fa-skyatlas:before {
  content: "\f216"; }

.fa-skype:before {
  content: "\f17e"; }

.fa-slack:before {
  content: "\f198"; }

.fa-slack-hash:before {
  content: "\f3ef"; }

.fa-sliders-h:before {
  content: "\f1de"; }

.fa-slideshare:before {
  content: "\f1e7"; }

.fa-smile:before {
  content: "\f118"; }

.fa-snapchat:before {
  content: "\f2ab"; }

.fa-snapchat-ghost:before {
  content: "\f2ac"; }

.fa-snapchat-square:before {
  content: "\f2ad"; }

.fa-snowflake:before {
  content: "\f2dc"; }

.fa-sort:before {
  content: "\f0dc"; }

.fa-sort-alpha-down:before {
  content: "\f15d"; }

.fa-sort-alpha-up:before {
  content: "\f15e"; }

.fa-sort-amount-down:before {
  content: "\f160"; }

.fa-sort-amount-up:before {
  content: "\f161"; }

.fa-sort-down:before {
  content: "\f0dd"; }

.fa-sort-numeric-down:before {
  content: "\f162"; }

.fa-sort-numeric-up:before {
  content: "\f163"; }

.fa-sort-up:before {
  content: "\f0de"; }

.fa-soundcloud:before {
  content: "\f1be"; }

.fa-space-shuttle:before {
  content: "\f197"; }

.fa-speakap:before {
  content: "\f3f3"; }

.fa-spinner:before {
  content: "\f110"; }

.fa-spotify:before {
  content: "\f1bc"; }

.fa-square:before {
  content: "\f0c8"; }

.fa-square-full:before {
  content: "\f45c"; }

.fa-stack-exchange:before {
  content: "\f18d"; }

.fa-stack-overflow:before {
  content: "\f16c"; }

.fa-star:before {
  content: "\f005"; }

.fa-star-half:before {
  content: "\f089"; }

.fa-staylinked:before {
  content: "\f3f5"; }

.fa-steam:before {
  content: "\f1b6"; }

.fa-steam-square:before {
  content: "\f1b7"; }

.fa-steam-symbol:before {
  content: "\f3f6"; }

.fa-step-backward:before {
  content: "\f048"; }

.fa-step-forward:before {
  content: "\f051"; }

.fa-stethoscope:before {
  content: "\f0f1"; }

.fa-sticker-mule:before {
  content: "\f3f7"; }

.fa-sticky-note:before {
  content: "\f249"; }

.fa-stop:before {
  content: "\f04d"; }

.fa-stop-circle:before {
  content: "\f28d"; }

.fa-stopwatch:before {
  content: "\f2f2"; }

.fa-strava:before {
  content: "\f428"; }

.fa-street-view:before {
  content: "\f21d"; }

.fa-strikethrough:before {
  content: "\f0cc"; }

.fa-stripe:before {
  content: "\f429"; }

.fa-stripe-s:before {
  content: "\f42a"; }

.fa-studiovinari:before {
  content: "\f3f8"; }

.fa-stumbleupon:before {
  content: "\f1a4"; }

.fa-stumbleupon-circle:before {
  content: "\f1a3"; }

.fa-subscript:before {
  content: "\f12c"; }

.fa-subway:before {
  content: "\f239"; }

.fa-suitcase:before {
  content: "\f0f2"; }

.fa-sun:before {
  content: "\f185"; }

.fa-superpowers:before {
  content: "\f2dd"; }

.fa-superscript:before {
  content: "\f12b"; }

.fa-supple:before {
  content: "\f3f9"; }

.fa-sync:before {
  content: "\f021"; }

.fa-sync-alt:before {
  content: "\f2f1"; }

.fa-table:before {
  content: "\f0ce"; }

.fa-table-tennis:before {
  content: "\f45d"; }

.fa-tablet:before {
  content: "\f10a"; }

.fa-tablet-alt:before {
  content: "\f3fa"; }

.fa-tachometer-alt:before {
  content: "\f3fd"; }

.fa-tag:before {
  content: "\f02b"; }

.fa-tags:before {
  content: "\f02c"; }

.fa-tasks:before {
  content: "\f0ae"; }

.fa-taxi:before {
  content: "\f1ba"; }

.fa-telegram:before {
  content: "\f2c6"; }

.fa-telegram-plane:before {
  content: "\f3fe"; }

.fa-tencent-weibo:before {
  content: "\f1d5"; }

.fa-terminal:before {
  content: "\f120"; }

.fa-text-height:before {
  content: "\f034"; }

.fa-text-width:before {
  content: "\f035"; }

.fa-th:before {
  content: "\f00a"; }

.fa-th-large:before {
  content: "\f009"; }

.fa-th-list:before {
  content: "\f00b"; }

.fa-themeisle:before {
  content: "\f2b2"; }

.fa-thermometer-empty:before {
  content: "\f2cb"; }

.fa-thermometer-full:before {
  content: "\f2c7"; }

.fa-thermometer-half:before {
  content: "\f2c9"; }

.fa-thermometer-quarter:before {
  content: "\f2ca"; }

.fa-thermometer-three-quarters:before {
  content: "\f2c8"; }

.fa-thumbs-down:before {
  content: "\f165"; }

.fa-thumbs-up:before {
  content: "\f164"; }

.fa-thumbtack:before {
  content: "\f08d"; }

.fa-ticket-alt:before {
  content: "\f3ff"; }

.fa-times:before {
  content: "\f00d"; }

.fa-times-circle:before {
  content: "\f057"; }

.fa-tint:before {
  content: "\f043"; }

.fa-toggle-off:before {
  content: "\f204"; }

.fa-toggle-on:before {
  content: "\f205"; }

.fa-trademark:before {
  content: "\f25c"; }

.fa-train:before {
  content: "\f238"; }

.fa-transgender:before {
  content: "\f224"; }

.fa-transgender-alt:before {
  content: "\f225"; }

.fa-trash:before {
  content: "\f1f8"; }

.fa-trash-alt:before {
  content: "\f2ed"; }

.fa-tree:before {
  content: "\f1bb"; }

.fa-trello:before {
  content: "\f181"; }

.fa-tripadvisor:before {
  content: "\f262"; }

.fa-trophy:before {
  content: "\f091"; }

.fa-truck:before {
  content: "\f0d1"; }

.fa-tty:before {
  content: "\f1e4"; }

.fa-tumblr:before {
  content: "\f173"; }

.fa-tumblr-square:before {
  content: "\f174"; }

.fa-tv:before {
  content: "\f26c"; }

.fa-twitch:before {
  content: "\f1e8"; }

.fa-twitter:before {
  content: "\f099"; }

.fa-twitter-square:before {
  content: "\f081"; }

.fa-typo3:before {
  content: "\f42b"; }

.fa-uber:before {
  content: "\f402"; }

.fa-uikit:before {
  content: "\f403"; }

.fa-umbrella:before {
  content: "\f0e9"; }

.fa-underline:before {
  content: "\f0cd"; }

.fa-undo:before {
  content: "\f0e2"; }

.fa-undo-alt:before {
  content: "\f2ea"; }

.fa-uniregistry:before {
  content: "\f404"; }

.fa-universal-access:before {
  content: "\f29a"; }

.fa-university:before {
  content: "\f19c"; }

.fa-unlink:before {
  content: "\f127"; }

.fa-unlock:before {
  content: "\f09c"; }

.fa-unlock-alt:before {
  content: "\f13e"; }

.fa-untappd:before {
  content: "\f405"; }

.fa-upload:before {
  content: "\f093"; }

.fa-usb:before {
  content: "\f287"; }

.fa-user:before {
  content: "\f007"; }

.fa-user-circle:before {
  content: "\f2bd"; }

.fa-user-md:before {
  content: "\f0f0"; }

.fa-user-plus:before {
  content: "\f234"; }

.fa-user-secret:before {
  content: "\f21b"; }

.fa-user-times:before {
  content: "\f235"; }

.fa-users:before {
  content: "\f0c0"; }

.fa-ussunnah:before {
  content: "\f407"; }

.fa-utensil-spoon:before {
  content: "\f2e5"; }

.fa-utensils:before {
  content: "\f2e7"; }

.fa-vaadin:before {
  content: "\f408"; }

.fa-venus:before {
  content: "\f221"; }

.fa-venus-double:before {
  content: "\f226"; }

.fa-venus-mars:before {
  content: "\f228"; }

.fa-viacoin:before {
  content: "\f237"; }

.fa-viadeo:before {
  content: "\f2a9"; }

.fa-viadeo-square:before {
  content: "\f2aa"; }

.fa-viber:before {
  content: "\f409"; }

.fa-video:before {
  content: "\f03d"; }

.fa-vimeo:before {
  content: "\f40a"; }

.fa-vimeo-square:before {
  content: "\f194"; }

.fa-vimeo-v:before {
  content: "\f27d"; }

.fa-vine:before {
  content: "\f1ca"; }

.fa-vk:before {
  content: "\f189"; }

.fa-vnv:before {
  content: "\f40b"; }

.fa-volleyball-ball:before {
  content: "\f45f"; }

.fa-volume-down:before {
  content: "\f027"; }

.fa-volume-off:before {
  content: "\f026"; }

.fa-volume-up:before {
  content: "\f028"; }

.fa-vuejs:before {
  content: "\f41f"; }

.fa-weibo:before {
  content: "\f18a"; }

.fa-weixin:before {
  content: "\f1d7"; }

.fa-whatsapp:before {
  content: "\f232"; }

.fa-whatsapp-square:before {
  content: "\f40c"; }

.fa-wheelchair:before {
  content: "\f193"; }

.fa-whmcs:before {
  content: "\f40d"; }

.fa-wifi:before {
  content: "\f1eb"; }

.fa-wikipedia-w:before {
  content: "\f266"; }

.fa-window-close:before {
  content: "\f410"; }

.fa-window-maximize:before {
  content: "\f2d0"; }

.fa-window-minimize:before {
  content: "\f2d1"; }

.fa-window-restore:before {
  content: "\f2d2"; }

.fa-windows:before {
  content: "\f17a"; }

.fa-won-sign:before {
  content: "\f159"; }

.fa-wordpress:before {
  content: "\f19a"; }

.fa-wordpress-simple:before {
  content: "\f411"; }

.fa-wpbeginner:before {
  content: "\f297"; }

.fa-wpexplorer:before {
  content: "\f2de"; }

.fa-wpforms:before {
  content: "\f298"; }

.fa-wrench:before {
  content: "\f0ad"; }

.fa-xbox:before {
  content: "\f412"; }

.fa-xing:before {
  content: "\f168"; }

.fa-xing-square:before {
  content: "\f169"; }

.fa-y-combinator:before {
  content: "\f23b"; }

.fa-yahoo:before {
  content: "\f19e"; }

.fa-yandex:before {
  content: "\f413"; }

.fa-yandex-international:before {
  content: "\f414"; }

.fa-yelp:before {
  content: "\f1e9"; }

.fa-yen-sign:before {
  content: "\f157"; }

.fa-yoast:before {
  content: "\f2b1"; }

.fa-youtube:before {
  content: "\f167"; }

.fa-youtube-square:before {
  content: "\f431"; }

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }

.sr-only-focusable:active, .sr-only-focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto; }

/*!
 * Font Awesome Free 5.0.6 by @fontawesome - http://fontawesome.com
 * License - http://fontawesome.com/license (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 */
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  src: url("/static/django_cradmin_styles/6.12.2/media/cradmin_fontawesome/webfonts/fa-solid-900.eot");
  src: url("/static/django_cradmin_styles/6.12.2/media/cradmin_fontawesome/webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("/static/django_cradmin_styles/6.12.2/media/cradmin_fontawesome/webfonts/fa-solid-900.woff2") format("woff2"), url("/static/django_cradmin_styles/6.12.2/media/cradmin_fontawesome/webfonts/fa-solid-900.woff") format("woff"), url("/static/django_cradmin_styles/6.12.2/media/cradmin_fontawesome/webfonts/fa-solid-900.ttf") format("truetype"), url("/static/django_cradmin_styles/6.12.2/media/cradmin_fontawesome/webfonts/fa-solid-900.svg#fontawesome") format("svg"); }

.fa,
.fas {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900; }

/*!
 * Font Awesome Free 5.0.6 by @fontawesome - http://fontawesome.com
 * License - http://fontawesome.com/license (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 */
@font-face {
  font-family: 'Font Awesome 5 Brands';
  font-style: normal;
  font-weight: normal;
  src: url("/static/django_cradmin_styles/6.12.2/media/cradmin_fontawesome/webfonts/fa-brands-400.eot");
  src: url("/static/django_cradmin_styles/6.12.2/media/cradmin_fontawesome/webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("/static/django_cradmin_styles/6.12.2/media/cradmin_fontawesome/webfonts/fa-brands-400.woff2") format("woff2"), url("/static/django_cradmin_styles/6.12.2/media/cradmin_fontawesome/webfonts/fa-brands-400.woff") format("woff"), url("/static/django_cradmin_styles/6.12.2/media/cradmin_fontawesome/webfonts/fa-brands-400.ttf") format("truetype"), url("/static/django_cradmin_styles/6.12.2/media/cradmin_fontawesome/webfonts/fa-brands-400.svg#fontawesome") format("svg"); }

.fab {
  font-family: 'Font Awesome 5 Brands'; }

/*
Deprecated old style icons

Warning: **This is deprecated. Use cricon instead.**

All icons come in the following colors: `dark` (default), `primary`, `secondary` and `light`.

Example: All the icons

    <!-- Ignore the ``sg-icon-*`` wrappers - they are just for the styleguide. -->
    <ul class="sg-icon-grid">
        <li class="sg-icon-grid__item">
            <span class="icon-arrow-up" aria-hidden="true"></span>
            <code>.icon-arrow-up</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-arrow-up--primary" aria-hidden="true"></span>
            <code>.icon-arrow-up--primary</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-arrow-up--secondary" aria-hidden="true"></span>
            <code>.icon-arrow-up--secondary</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-arrow-up--light" aria-hidden="true"></span>
            <code>.icon-arrow-up--light</code>
        </li>

        <li class="sg-icon-grid__item">
            <span class="icon-arrow-down" aria-hidden="true"></span>
            <code>.icon-arrow-down</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-arrow-down--primary" aria-hidden="true"></span>
            <code>.icon-arrow-down--primary</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-arrow-down--secondary" aria-hidden="true"></span>
            <code>.icon-arrow-down--secondary</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-arrow-down--light" aria-hidden="true"></span>
            <code>.icon-arrow-down--light</code>
        </li>

        <li class="sg-icon-grid__item">
            <span class="icon-arrow-right" aria-hidden="true"></span>
            <code>.icon-arrow-right</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-arrow-right--primary" aria-hidden="true"></span>
            <code>.icon-arrow-right--primary</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-arrow-right--secondary" aria-hidden="true"></span>
            <code>.icon-arrow-right--secondary</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-arrow-right--light" aria-hidden="true"></span>
            <code>.icon-arrow-right--light</code>
        </li>

        <li class="sg-icon-grid__item">
            <span class="icon-arrow-left" aria-hidden="true"></span>
            <code>.icon-arrow-left</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-arrow-left--primary" aria-hidden="true"></span>
            <code>.icon-arrow-left--primary</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-arrow-left--secondary" aria-hidden="true"></span>
            <code>.icon-arrow-left--secondary</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-arrow-left--light" aria-hidden="true"></span>
            <code>.icon-arrow-left--light</code>
        </li>

        <li class="sg-icon-grid__item">
            <span class="icon-chevron-up" aria-hidden="true"></span>
            <code>.icon-chevron-up</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-chevron-up--primary" aria-hidden="true"></span>
            <code>.icon-chevron-up--primary</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-chevron-up--secondary" aria-hidden="true"></span>
            <code>.icon-chevron-up--secondary</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-chevron-up--light" aria-hidden="true"></span>
            <code>.icon-chevron-up--light</code>
        </li>

        <li class="sg-icon-grid__item">
            <span class="icon-chevron-down" aria-hidden="true"></span>
            <code>.icon-chevron-down</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-chevron-down--primary" aria-hidden="true"></span>
            <code>.icon-chevron-down--primary</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-chevron-down--secondary" aria-hidden="true"></span>
            <code>.icon-chevron-down--secondary</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-chevron-down--light" aria-hidden="true"></span>
            <code>.icon-chevron-down--light</code>
        </li>

        <li class="sg-icon-grid__item">
            <span class="icon-chevron-right" aria-hidden="true"></span>
            <code>.icon-chevron-right</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-chevron-right--primary" aria-hidden="true"></span>
            <code>.icon-chevron-right--primary</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-chevron-right--secondary" aria-hidden="true"></span>
            <code>.icon-chevron-right--secondary</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-chevron-right--light" aria-hidden="true"></span>
            <code>.icon-chevron-right--light</code>
        </li>

        <li class="sg-icon-grid__item">
            <span class="icon-chevron-left" aria-hidden="true"></span>
            <code>.icon-chevron-left</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-chevron-left--primary" aria-hidden="true"></span>
            <code>.icon-chevron-left--primary</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-chevron-left--secondary" aria-hidden="true"></span>
            <code>.icon-chevron-left--secondary</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-chevron-left--light" aria-hidden="true"></span>
            <code>.icon-chevron-left--light</code>
        </li>

        <li class="sg-icon-grid__item">
            <span class="icon-check" aria-hidden="true"></span>
            <code>.icon-check</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-check--primary" aria-hidden="true"></span>
            <code>.icon-check--primary</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-check--secondary" aria-hidden="true"></span>
            <code>.icon-check--secondary</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-check--light" aria-hidden="true"></span>
            <code>.icon-check--light</code>
        </li>

        <li class="sg-icon-grid__item">
            <span class="icon-search" aria-hidden="true"></span>
            <code>.icon-search</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-search--primary" aria-hidden="true"></span>
            <code>.icon-search--primary</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-search--secondary" aria-hidden="true"></span>
            <code>.icon-search--secondary</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-search--light" aria-hidden="true"></span>
            <code>.icon-search--light</code>
        </li>

        <li class="sg-icon-grid__item">
            <span class="icon-close" aria-hidden="true"></span>
            <code>.icon-close</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-close--primary" aria-hidden="true"></span>
            <code>.icon-close--primary</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-close--secondary" aria-hidden="true"></span>
            <code>.icon-close--secondary</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-close--light" aria-hidden="true"></span>
            <code>.icon-close--light</code>
        </li>

        <li class="sg-icon-grid__item">
            <span class="icon-user" aria-hidden="true"></span>
            <code>.icon-user</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-user--primary" aria-hidden="true"></span>
            <code>.icon-user--primary</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-user--secondary" aria-hidden="true"></span>
            <code>.icon-user--secondary</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-user--light" aria-hidden="true"></span>
            <code>.icon-user--light</code>
        </li>

        <li class="sg-icon-grid__item">
            <span class="icon-time" aria-hidden="true"></span>
            <code>.icon-time</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-time--primary" aria-hidden="true"></span>
            <code>.icon-time--primary</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-time--secondary" aria-hidden="true"></span>
            <code>.icon-time--secondary</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-time--light" aria-hidden="true"></span>
            <code>.icon-time--light</code>
        </li>

        <li class="sg-icon-grid__item">
            <span class="icon-flag" aria-hidden="true"></span>
            <code>.icon-flag</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-flag--primary" aria-hidden="true"></span>
            <code>.icon-flag--primary</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-flag--secondary" aria-hidden="true"></span>
            <code>.icon-flag--secondary</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-flag--light" aria-hidden="true"></span>
            <code>.icon-flag--light</code>
        </li>

        <li class="sg-icon-grid__item">
            <span class="icon-more" aria-hidden="true"></span>
            <code>.icon-more</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-more--primary" aria-hidden="true"></span>
            <code>.icon-more--primary</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-more--secondary" aria-hidden="true"></span>
            <code>.icon-more--secondary</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-more--light" aria-hidden="true"></span>
            <code>.icon-more--light</code>
        </li>

        <li class="sg-icon-grid__item">
            <span class="icon-user-small" aria-hidden="true"></span>
            <code>.icon-user-small</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-user-small--primary" aria-hidden="true"></span>
            <code>.icon-user-small--primary</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-user-small--secondary" aria-hidden="true"></span>
            <code>.icon-user-small--secondary</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-user-small--light" aria-hidden="true"></span>
            <code>.icon-user-small--light</code>
        </li>

        <li class="sg-icon-grid__item">
            <span class="icon-facebook" aria-hidden="true"></span>
            <code>.icon-facebook</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-facebook--primary" aria-hidden="true"></span>
            <code>.icon-facebook--primary</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-facebook--secondary" aria-hidden="true"></span>
            <code>.icon-facebook--secondary</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-facebook--light" aria-hidden="true"></span>
            <code>.icon-facebook--light</code>
        </li>

        <li class="sg-icon-grid__item">
            <span class="icon-twitter" aria-hidden="true"></span>
            <code>.icon-twitter</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-twitter--primary" aria-hidden="true"></span>
            <code>.icon-twitter--primary</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-twitter--secondary" aria-hidden="true"></span>
            <code>.icon-twitter--secondary</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-twitter--light" aria-hidden="true"></span>
            <code>.icon-twitter--light</code>
        </li>

        <li class="sg-icon-grid__item">
            <span class="icon-email" aria-hidden="true"></span>
            <code>.icon-email</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-email--primary" aria-hidden="true"></span>
            <code>.icon-email--primary</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-email--secondary" aria-hidden="true"></span>
            <code>.icon-email--secondary</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-email--light" aria-hidden="true"></span>
            <code>.icon-email--light</code>
        </li>

        <li class="sg-icon-grid__item">
            <span class="icon-podcast" aria-hidden="true"></span>
            <code>.icon-podcast</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-podcast--primary" aria-hidden="true"></span>
            <code>.icon-podcast--primary</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-podcast--secondary" aria-hidden="true"></span>
            <code>.icon-podcast--secondary</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-podcast--light" aria-hidden="true"></span>
            <code>.icon-podcast--light</code>
        </li>

        <li class="sg-icon-grid__item">
            <span class="icon-instagram" aria-hidden="true"></span>
            <code>.icon-instagram</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-instagram--primary" aria-hidden="true"></span>
            <code>.icon-instagram--primary</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-instagram--secondary" aria-hidden="true"></span>
            <code>.icon-instagram--secondary</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-instagram--light" aria-hidden="true"></span>
            <code>.icon-instagram--light</code>
        </li>

        <li class="sg-icon-grid__item">
            <span class="icon-snapchat" aria-hidden="true"></span>
            <code>.icon-snapchat</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-snapchat--primary" aria-hidden="true"></span>
            <code>.icon-snapchat--primary</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-snapchat--secondary" aria-hidden="true"></span>
            <code>.icon-snapchat--secondary</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-snapchat--light" aria-hidden="true"></span>
            <code>.icon-snapchat--light</code>
        </li>

        <li class="sg-icon-grid__item">
            <span class="icon-blog" aria-hidden="true"></span>
            <code>.icon-blog</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-blog--primary" aria-hidden="true"></span>
            <code>.icon-blog--primary</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-blog--secondary" aria-hidden="true"></span>
            <code>.icon-blog--secondary</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-blog--light" aria-hidden="true"></span>
            <code>.icon-blog--light</code>
        </li>

        <li class="sg-icon-grid__item">
            <span class="icon-phone" aria-hidden="true"></span>
            <code>.icon-phone</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-phone--primary" aria-hidden="true"></span>
            <code>.icon-phone--primary</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-phone--secondary" aria-hidden="true"></span>
            <code>.icon-phone--secondary</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-phone--light" aria-hidden="true"></span>
            <code>.icon-phone--light</code>
        </li>

        <li class="sg-icon-grid__item">
            <span class="icon-file" aria-hidden="true"></span>
            <code>.icon-file</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-file--primary" aria-hidden="true"></span>
            <code>.icon-file--primary</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-file--secondary" aria-hidden="true"></span>
            <code>.icon-file--secondary</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-file--light" aria-hidden="true"></span>
            <code>.icon-file--light</code>
        </li>

        <li class="sg-icon-grid__item">
            <span class="icon-download" aria-hidden="true"></span>
            <code>.icon-download</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-download--primary" aria-hidden="true"></span>
            <code>.icon-download--primary</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-download--secondary" aria-hidden="true"></span>
            <code>.icon-download--secondary</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-download--light" aria-hidden="true"></span>
            <code>.icon-download--light</code>
        </li>

        <li class="sg-icon-grid__item">
            <span class="icon-address" aria-hidden="true"></span>
            <code>.icon-address</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-address--primary" aria-hidden="true"></span>
            <code>.icon-address--primary</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-address--secondary" aria-hidden="true"></span>
            <code>.icon-address--secondary</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-address--light" aria-hidden="true"></span>
            <code>.icon-address--light</code>
        </li>

        <li class="sg-icon-grid__item">
            <span class="icon-error" aria-hidden="true"></span>
            <code>.icon-error</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="icon-info" aria-hidden="true"></span>
            <code>.icon-info</code>
        </li>
        <li class="sg-icon-grid__item">
        </li>
        <li class="sg-icon-grid__item">
        </li>
    </ul>

Styleguide cricon.deprecated
*/
.icon-arrow-up {
  display: inline-block;
  vertical-align: top;
  width: 15px;
  height: 15px;
  background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
  background-position: 0px 0px;
  background-repeat: no-repeat; }
  .icon-arrow-up--light {
    display: inline-block;
    vertical-align: top;
    width: 15px;
    height: 15px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: 0px -100px;
    background-repeat: no-repeat; }
  .icon-arrow-up--primary {
    display: inline-block;
    vertical-align: top;
    width: 15px;
    height: 15px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: 0px -200px;
    background-repeat: no-repeat; }
  .icon-arrow-up--secondary {
    display: inline-block;
    vertical-align: top;
    width: 15px;
    height: 15px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: 0px -300px;
    background-repeat: no-repeat; }

.icon-arrow-right {
  display: inline-block;
  vertical-align: top;
  width: 15px;
  height: 15px;
  background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
  background-position: -100px 0px;
  background-repeat: no-repeat; }
  .icon-arrow-right--light,
  .newsletter__button:hover:before,
  .newsletter__button:focus:before,
  .find-local__link:hover:after,
  .find-local__link:focus:after {
    display: inline-block;
    vertical-align: top;
    width: 15px;
    height: 15px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -100px -100px;
    background-repeat: no-repeat; }
  .icon-arrow-right--primary, .page-list__item:before,
  .newsletter__button:before,
  .find-local__link:after {
    display: inline-block;
    vertical-align: top;
    width: 15px;
    height: 15px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -100px -200px;
    background-repeat: no-repeat; }
  .icon-arrow-right--secondary {
    display: inline-block;
    vertical-align: top;
    width: 15px;
    height: 15px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -100px -300px;
    background-repeat: no-repeat; }

.icon-arrow-down {
  display: inline-block;
  vertical-align: top;
  width: 15px;
  height: 15px;
  background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
  background-position: -200px 0px;
  background-repeat: no-repeat; }
  .icon-arrow-down--light {
    display: inline-block;
    vertical-align: top;
    width: 15px;
    height: 15px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -200px -100px;
    background-repeat: no-repeat; }
  .icon-arrow-down--primary {
    display: inline-block;
    vertical-align: top;
    width: 15px;
    height: 15px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -200px -200px;
    background-repeat: no-repeat; }
  .icon-arrow-down--secondary {
    display: inline-block;
    vertical-align: top;
    width: 15px;
    height: 15px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -200px -300px;
    background-repeat: no-repeat; }

.icon-arrow-left,
.back-nav:before {
  display: inline-block;
  vertical-align: top;
  width: 15px;
  height: 15px;
  background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
  background-position: -300px 0px;
  background-repeat: no-repeat; }
  .icon-arrow-left--light {
    display: inline-block;
    vertical-align: top;
    width: 15px;
    height: 15px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -300px -100px;
    background-repeat: no-repeat; }
  .icon-arrow-left--primary,
  .back-nav:hover:before,
  .back-nav:focus:before {
    display: inline-block;
    vertical-align: top;
    width: 15px;
    height: 15px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -300px -200px;
    background-repeat: no-repeat; }
  .icon-arrow-left--secondary {
    display: inline-block;
    vertical-align: top;
    width: 15px;
    height: 15px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -300px -300px;
    background-repeat: no-repeat; }

.icon-chevron-up {
  display: inline-block;
  vertical-align: top;
  width: 15px;
  height: 10px;
  background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
  background-position: -400px 0px;
  background-repeat: no-repeat; }
  .icon-chevron-up--light {
    display: inline-block;
    vertical-align: top;
    width: 15px;
    height: 10px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -400px -100px;
    background-repeat: no-repeat; }
  .icon-chevron-up--primary {
    display: inline-block;
    vertical-align: top;
    width: 15px;
    height: 10px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -400px -200px;
    background-repeat: no-repeat; }
  .icon-chevron-up--secondary {
    display: inline-block;
    vertical-align: top;
    width: 15px;
    height: 10px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -400px -300px;
    background-repeat: no-repeat; }

.icon-chevron-right {
  display: inline-block;
  vertical-align: top;
  width: 10px;
  height: 15px;
  background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
  background-position: -500px 0px;
  background-repeat: no-repeat; }
  .icon-chevron-right--light {
    display: inline-block;
    vertical-align: top;
    width: 10px;
    height: 15px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -500px -100px;
    background-repeat: no-repeat; }
  .icon-chevron-right--primary,
  .locals-header__separator {
    display: inline-block;
    vertical-align: top;
    width: 10px;
    height: 15px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -500px -200px;
    background-repeat: no-repeat; }
  .icon-chevron-right--secondary {
    display: inline-block;
    vertical-align: top;
    width: 10px;
    height: 15px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -500px -300px;
    background-repeat: no-repeat; }

.icon-chevron-down {
  display: inline-block;
  vertical-align: top;
  width: 15px;
  height: 10px;
  background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
  background-position: -600px 0px;
  background-repeat: no-repeat; }
  .icon-chevron-down--light,
  .people-list__toggle:before {
    display: inline-block;
    vertical-align: top;
    width: 15px;
    height: 10px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -600px -100px;
    background-repeat: no-repeat; }
  .icon-chevron-down--primary {
    display: inline-block;
    vertical-align: top;
    width: 15px;
    height: 10px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -600px -200px;
    background-repeat: no-repeat; }
  .icon-chevron-down--secondary,
  .page-section__toggle:after {
    display: inline-block;
    vertical-align: top;
    width: 15px;
    height: 10px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -600px -300px;
    background-repeat: no-repeat; }

.icon-chevron-left {
  display: inline-block;
  vertical-align: top;
  width: 10px;
  height: 15px;
  background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
  background-position: -700px 0px;
  background-repeat: no-repeat; }
  .icon-chevron-left--light {
    display: inline-block;
    vertical-align: top;
    width: 10px;
    height: 15px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -700px -100px;
    background-repeat: no-repeat; }
  .icon-chevron-left--primary {
    display: inline-block;
    vertical-align: top;
    width: 10px;
    height: 15px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -700px -200px;
    background-repeat: no-repeat; }
  .icon-chevron-left--secondary {
    display: inline-block;
    vertical-align: top;
    width: 10px;
    height: 15px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -700px -300px;
    background-repeat: no-repeat; }

.icon-check {
  display: inline-block;
  vertical-align: top;
  width: 15px;
  height: 12px;
  background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
  background-position: -900px 0px;
  background-repeat: no-repeat; }
  .icon-check--light {
    display: inline-block;
    vertical-align: top;
    width: 15px;
    height: 12px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -900px -100px;
    background-repeat: no-repeat; }
  .icon-check--primary {
    display: inline-block;
    vertical-align: top;
    width: 15px;
    height: 12px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -900px -200px;
    background-repeat: no-repeat; }
  .icon-check--secondary {
    display: inline-block;
    vertical-align: top;
    width: 15px;
    height: 12px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -900px -300px;
    background-repeat: no-repeat; }

.icon-search {
  display: inline-block;
  vertical-align: top;
  width: 19px;
  height: 19px;
  background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
  background-position: -800px 0px;
  background-repeat: no-repeat; }
  .icon-search--light,
  .inline-action--search .inline-action__action:hover:before,
  .inline-action--search .inline-action__action:focus:before,
  .inline-action--search .inline-action__action:active:before,
  .ap-search__button:hover:before,
  .ap-search__button:focus:before,
  .ap-search--focus .ap-search__button:before {
    display: inline-block;
    vertical-align: top;
    width: 19px;
    height: 19px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -800px -100px;
    background-repeat: no-repeat; }
  .icon-search--primary,
  .inline-action--search .inline-action__action:before,
  .ap-search__button:before {
    display: inline-block;
    vertical-align: top;
    width: 19px;
    height: 19px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -800px -200px;
    background-repeat: no-repeat; }
  .icon-search--secondary {
    display: inline-block;
    vertical-align: top;
    width: 19px;
    height: 19px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -800px -300px;
    background-repeat: no-repeat; }

.icon-close {
  display: inline-block;
  vertical-align: top;
  width: 15px;
  height: 15px;
  background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
  background-position: -1000px 0px;
  background-repeat: no-repeat; }
  .icon-close--light {
    display: inline-block;
    vertical-align: top;
    width: 15px;
    height: 15px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -1000px -100px;
    background-repeat: no-repeat; }
  .icon-close--primary {
    display: inline-block;
    vertical-align: top;
    width: 15px;
    height: 15px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -1000px -200px;
    background-repeat: no-repeat; }
  .icon-close--secondary {
    display: inline-block;
    vertical-align: top;
    width: 15px;
    height: 15px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -1000px -300px;
    background-repeat: no-repeat; }

.icon-user {
  display: inline-block;
  vertical-align: top;
  width: 17px;
  height: 20px;
  background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
  background-position: -1100px 0px;
  background-repeat: no-repeat; }
  .icon-user--light {
    display: inline-block;
    vertical-align: top;
    width: 17px;
    height: 20px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -1100px -100px;
    background-repeat: no-repeat; }
  .icon-user--primary {
    display: inline-block;
    vertical-align: top;
    width: 17px;
    height: 20px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -1100px -200px;
    background-repeat: no-repeat; }
  .icon-user--secondary,
  .mittap-cover__icon-user {
    display: inline-block;
    vertical-align: top;
    width: 17px;
    height: 20px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -1100px -300px;
    background-repeat: no-repeat; }

.icon-time {
  display: inline-block;
  vertical-align: top;
  width: 18px;
  height: 18px;
  background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
  background-position: -1200px 0px;
  background-repeat: no-repeat; }
  .icon-time--light {
    display: inline-block;
    vertical-align: top;
    width: 18px;
    height: 18px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -1200px -100px;
    background-repeat: no-repeat; }
  .icon-time--primary {
    display: inline-block;
    vertical-align: top;
    width: 18px;
    height: 18px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -1200px -200px;
    background-repeat: no-repeat; }
  .icon-time--secondary {
    display: inline-block;
    vertical-align: top;
    width: 18px;
    height: 18px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -1200px -300px;
    background-repeat: no-repeat; }

.icon-flag {
  display: inline-block;
  vertical-align: top;
  width: 12px;
  height: 15px;
  background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
  background-position: -1300px 0px;
  background-repeat: no-repeat; }
  .icon-flag--light {
    display: inline-block;
    vertical-align: top;
    width: 12px;
    height: 15px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -1300px -100px;
    background-repeat: no-repeat; }
  .icon-flag--primary {
    display: inline-block;
    vertical-align: top;
    width: 12px;
    height: 15px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -1300px -200px;
    background-repeat: no-repeat; }
  .icon-flag--secondary {
    display: inline-block;
    vertical-align: top;
    width: 12px;
    height: 15px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -1300px -300px;
    background-repeat: no-repeat; }

.icon-more {
  display: inline-block;
  vertical-align: top;
  width: 21px;
  height: 5px;
  background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
  background-position: -1400px 0px;
  background-repeat: no-repeat; }
  .icon-more--light {
    display: inline-block;
    vertical-align: top;
    width: 21px;
    height: 5px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -1400px -100px;
    background-repeat: no-repeat; }
  .icon-more--primary {
    display: inline-block;
    vertical-align: top;
    width: 21px;
    height: 5px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -1400px -200px;
    background-repeat: no-repeat; }
  .icon-more--secondary {
    display: inline-block;
    vertical-align: top;
    width: 21px;
    height: 5px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -1400px -300px;
    background-repeat: no-repeat; }

.icon-user-small {
  display: inline-block;
  vertical-align: top;
  width: 14px;
  height: 16px;
  background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
  background-position: -1500px 0px;
  background-repeat: no-repeat; }
  .icon-user-small--light {
    display: inline-block;
    vertical-align: top;
    width: 14px;
    height: 16px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -1500px -100px;
    background-repeat: no-repeat; }
  .icon-user-small--primary {
    display: inline-block;
    vertical-align: top;
    width: 14px;
    height: 16px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -1500px -200px;
    background-repeat: no-repeat; }
  .icon-user-small--secondary {
    display: inline-block;
    vertical-align: top;
    width: 14px;
    height: 16px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -1500px -300px;
    background-repeat: no-repeat; }

.icon-facebook {
  display: inline-block;
  vertical-align: top;
  width: 20px;
  height: 20px;
  background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
  background-position: 0px -400px;
  background-repeat: no-repeat; }
  .icon-facebook--light {
    display: inline-block;
    vertical-align: top;
    width: 20px;
    height: 20px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: 0px -500px;
    background-repeat: no-repeat; }
  .icon-facebook--primary {
    display: inline-block;
    vertical-align: top;
    width: 20px;
    height: 20px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: 0px -600px;
    background-repeat: no-repeat; }
  .icon-facebook--secondary {
    display: inline-block;
    vertical-align: top;
    width: 20px;
    height: 20px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: 0px -700px;
    background-repeat: no-repeat; }

.icon-twitter {
  display: inline-block;
  vertical-align: top;
  width: 20px;
  height: 17px;
  background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
  background-position: -100px -400px;
  background-repeat: no-repeat; }
  .icon-twitter--light {
    display: inline-block;
    vertical-align: top;
    width: 20px;
    height: 17px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -100px -500px;
    background-repeat: no-repeat; }
  .icon-twitter--primary {
    display: inline-block;
    vertical-align: top;
    width: 20px;
    height: 17px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -100px -600px;
    background-repeat: no-repeat; }
  .icon-twitter--secondary {
    display: inline-block;
    vertical-align: top;
    width: 20px;
    height: 17px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -100px -700px;
    background-repeat: no-repeat; }

.icon-email {
  display: inline-block;
  vertical-align: top;
  width: 18px;
  height: 13px;
  background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
  background-position: -200px -400px;
  background-repeat: no-repeat; }
  .icon-email--light {
    display: inline-block;
    vertical-align: top;
    width: 18px;
    height: 13px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -200px -500px;
    background-repeat: no-repeat; }
  .icon-email--primary {
    display: inline-block;
    vertical-align: top;
    width: 18px;
    height: 13px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -200px -600px;
    background-repeat: no-repeat; }
  .icon-email--secondary {
    display: inline-block;
    vertical-align: top;
    width: 18px;
    height: 13px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -200px -700px;
    background-repeat: no-repeat; }

.icon-podcast {
  display: inline-block;
  vertical-align: top;
  width: 12px;
  height: 16px;
  background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
  background-position: -300px -400px;
  background-repeat: no-repeat; }
  .icon-podcast--light {
    display: inline-block;
    vertical-align: top;
    width: 12px;
    height: 16px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -300px -500px;
    background-repeat: no-repeat; }
  .icon-podcast--primary {
    display: inline-block;
    vertical-align: top;
    width: 12px;
    height: 16px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -300px -600px;
    background-repeat: no-repeat; }
  .icon-podcast--secondary {
    display: inline-block;
    vertical-align: top;
    width: 12px;
    height: 16px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -300px -700px;
    background-repeat: no-repeat; }

.icon-instagram {
  display: inline-block;
  vertical-align: top;
  width: 20px;
  height: 17px;
  background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
  background-position: -400px -400px;
  background-repeat: no-repeat; }
  .icon-instagram--light {
    display: inline-block;
    vertical-align: top;
    width: 20px;
    height: 17px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -400px -500px;
    background-repeat: no-repeat; }
  .icon-instagram--primary {
    display: inline-block;
    vertical-align: top;
    width: 20px;
    height: 17px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -400px -600px;
    background-repeat: no-repeat; }
  .icon-instagram--secondary {
    display: inline-block;
    vertical-align: top;
    width: 20px;
    height: 17px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -400px -700px;
    background-repeat: no-repeat; }

.icon-snapchat {
  display: inline-block;
  vertical-align: top;
  width: 18px;
  height: 17px;
  background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
  background-position: -500px -400px;
  background-repeat: no-repeat; }
  .icon-snapchat--light {
    display: inline-block;
    vertical-align: top;
    width: 18px;
    height: 17px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -500px -500px;
    background-repeat: no-repeat; }
  .icon-snapchat--primary {
    display: inline-block;
    vertical-align: top;
    width: 18px;
    height: 17px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -500px -600px;
    background-repeat: no-repeat; }
  .icon-snapchat--secondary {
    display: inline-block;
    vertical-align: top;
    width: 18px;
    height: 17px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -500px -700px;
    background-repeat: no-repeat; }

.icon-blog {
  display: inline-block;
  vertical-align: top;
  width: 16px;
  height: 16px;
  background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
  background-position: -600px -400px;
  background-repeat: no-repeat; }
  .icon-blog--light {
    display: inline-block;
    vertical-align: top;
    width: 16px;
    height: 16px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -600px -500px;
    background-repeat: no-repeat; }
  .icon-blog--primary {
    display: inline-block;
    vertical-align: top;
    width: 16px;
    height: 16px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -600px -600px;
    background-repeat: no-repeat; }
  .icon-blog--secondary {
    display: inline-block;
    vertical-align: top;
    width: 16px;
    height: 16px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -600px -700px;
    background-repeat: no-repeat; }

.icon-phone {
  display: inline-block;
  vertical-align: top;
  width: 14px;
  height: 14px;
  background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
  background-position: -700px -400px;
  background-repeat: no-repeat; }
  .icon-phone--light {
    display: inline-block;
    vertical-align: top;
    width: 14px;
    height: 14px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -700px -500px;
    background-repeat: no-repeat; }
  .icon-phone--primary {
    display: inline-block;
    vertical-align: top;
    width: 14px;
    height: 14px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -700px -600px;
    background-repeat: no-repeat; }
  .icon-phone--secondary {
    display: inline-block;
    vertical-align: top;
    width: 14px;
    height: 14px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -700px -700px;
    background-repeat: no-repeat; }

.icon-file {
  display: inline-block;
  vertical-align: top;
  width: 39px;
  height: 47px;
  background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
  background-position: -800px -400px;
  background-repeat: no-repeat; }
  .icon-file--light {
    display: inline-block;
    vertical-align: top;
    width: 39px;
    height: 47px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -800px -500px;
    background-repeat: no-repeat; }
  .icon-file--primary,
  .download__file-icon {
    display: inline-block;
    vertical-align: top;
    width: 39px;
    height: 47px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -800px -600px;
    background-repeat: no-repeat; }
  .icon-file--secondary {
    display: inline-block;
    vertical-align: top;
    width: 39px;
    height: 47px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -800px -700px;
    background-repeat: no-repeat; }

.icon-download {
  display: inline-block;
  vertical-align: top;
  width: 19px;
  height: 21px;
  background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
  background-position: -900px -400px;
  background-repeat: no-repeat; }
  .icon-download--light {
    display: inline-block;
    vertical-align: top;
    width: 19px;
    height: 21px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -900px -500px;
    background-repeat: no-repeat; }
  .icon-download--primary,
  .download__download-icon {
    display: inline-block;
    vertical-align: top;
    width: 19px;
    height: 21px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -900px -600px;
    background-repeat: no-repeat; }
  .icon-download--secondary {
    display: inline-block;
    vertical-align: top;
    width: 19px;
    height: 21px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -900px -700px;
    background-repeat: no-repeat; }

.icon-address {
  display: inline-block;
  vertical-align: top;
  width: 12px;
  height: 18px;
  background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
  background-position: -1000px -400px;
  background-repeat: no-repeat; }
  .icon-address--light {
    display: inline-block;
    vertical-align: top;
    width: 12px;
    height: 18px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -1000px -500px;
    background-repeat: no-repeat; }
  .icon-address--primary {
    display: inline-block;
    vertical-align: top;
    width: 12px;
    height: 18px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -1000px -600px;
    background-repeat: no-repeat; }
  .icon-address--secondary {
    display: inline-block;
    vertical-align: top;
    width: 12px;
    height: 18px;
    background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
    background-position: -1000px -700px;
    background-repeat: no-repeat; }

.icon-error {
  display: inline-block;
  vertical-align: top;
  width: 18px;
  height: 15px;
  background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
  background-position: 0px -800px;
  background-repeat: no-repeat; }

.icon-info {
  display: inline-block;
  vertical-align: top;
  width: 14px;
  height: 14px;
  background-image: url("/static/django_cradmin_styles/6.12.2/media/images/sprite.svg");
  background-position: -100px -800px;
  background-repeat: no-repeat; }

.icon-middle {
  position: relative;
  top: -0.08em;
  vertical-align: middle; }

.icon-bottom {
  vertical-align: bottom; }

.icon-hamburger {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  width: 26px;
  margin-right: 3px;
  float: left;
  transform-origin: center center;
  transition: transform 0.3s cubic-bezier(0, 0, 0.1, 1); }
  .icon-hamburger__bar {
    display: block;
    height: 3px;
    border-radius: 5px;
    width: 100%;
    margin-bottom: 6px;
    background-color: #E01220;
    transform-origin: 55% center;
    transition: all 150ms cubic-bezier(0, 0, 0.1, 1); }
    .icon-hamburger__bar:first-child {
      transform-origin: right center; }
    .icon-hamburger__bar:last-child {
      transform-origin: right center;
      margin-bottom: 0; }
  .icon-hamburger--close .icon-hamburger__bar {
    background-color: #fff;
    transform: scale(0, 0.2); }
    .icon-hamburger--close .icon-hamburger__bar:first-child {
      opacity: 1;
      transform: rotate(-45deg); }
    .icon-hamburger--close .icon-hamburger__bar:last-child {
      opacity: 1;
      transform: rotate(45deg) translateX(0.5px); }
  .icon-hamburger--light .icon-hamburger__bar {
    background-color: #fff; }

/* Screen reader optimizations

Example: Only visible to screenreaders

    <span class="screenreader-only">
        This is only visible to screen readers.
    </span>

Styleguide screen.screenreaders
*/
.screenreader-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0; }

/* Print optimizations

Example: {type: isolated} Hidden when printing

    <span class="hidden-in-print">
        This is not visible when printing
    </span>


Example: {type: isolated} Hidden when printing complete example
    <h3>This is a print friendly page</h3>
    <p>
        Everything will be visible in the printed version except the "Print page" button.
    </p>

    <p>
        Click the "Print page" button to see a preview of the printed page.
    </p>
    <span class="hidden-in-print">
        <button class="button button-default" onClick="window.print()">
            Print page
        </button>
    </span>


Styleguide screen.print
*/
@media print {
  .hidden-in-print {
    display: none !important; } }

.visible-only-in-print {
  display: none !important; }
  @media print {
    .visible-only-in-print {
      display: block; } }

/* Animations

### TODO's
1. Maybe this should be moved somewhere else
2. Add some examples

### These are the animations:
- `.animation-fade-in`
- `.animation-fade-in-down`
- `.animation-fade-in-up`
- `.animation-fade-in-slow`
- `.animation-fade-in-extra-slow`

- `.animation-fade-out`
- `.animation-fade-out-slow`
- `.animation-fade-out-up`
- `.animation-fade-out-down`
- `.animation-fade-out-right`

Styleguide basic.6:animations
*/
.animate-end {
  transform: translate3d(0, 0, 0);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased; }

.animation-fade-in,
.modal__backdrop,
.backdrop,
.datetimepicker__backdrop,
.expandable__bodymodal-backdrop,
.page-menu__backdrop,
.expandable-menu__backdrop,
.ap-search__shade.ng-enter,
.ap-search__backdrop.ng-enter,
.mittap-cover__content {
  animation: fade-in 300ms cubic-bezier(0, 0, 0.1, 1) both; }

.animation-fade-in-down,
.ievv-designer-containeredit--expanded .ievv-designer-containeredit__addbutton {
  animation: fade-in-down 150ms cubic-bezier(0, 0, 0.1, 1) both; }

.animation-fade-in-up {
  animation: fade-in-up 200ms cubic-bezier(0, 0, 0.1, 1) both; }

.animation-fade-out,
.backdrop.ng-leave,
.ng-leave.modal__backdrop,
.ng-leave.datetimepicker__backdrop,
.ng-leave.expandable__bodymodal-backdrop,
.ng-leave.page-menu__backdrop,
.page-menu.ng-leave,
.ap-search__shade.ng-leave {
  animation: fade-out 300ms ease-in both; }

.animation-fade-out-slow {
  animation: fade-out 800ms ease-in both; }

.animation-fade-out-up,
.form__message.ng-leave {
  animation: fade-out-up 100ms ease-in both; }

.animation-fade-out-down,
.care-question__step.ng-leave {
  animation: fade-out-down 500ms ease-in forwards; }

.animation-fade-out-right {
  animation: fade-out-right 300ms ease-in both; }

.animation-fade-in-slow,
.page-footer--open .page-footer__section--contact,
.page-footer--open .page-footer__section--some {
  animation: fade-in 700ms cubic-bezier(0, 0, 0.1, 1) both; }

.animation-fade-in-extra-slow {
  animation: fade-in 2s cubic-bezier(0, 0, 0.1, 1) both; }

.animation-fall-down,
.form__message.ng-enter,
.message,
.adminui-page-section--collapsible-sm .adminui-page-section__title,
.adminui-page-section--collapsible-sm .adminui-page-section__content,
.page-section--collapsable-sm .page-section__title,
.page-section--collapsable-sm .page-section__content,
.ap-search__results.ng-enter .ap-search__item,
.ap-search__item.ng-enter,
.find-local__result.ng-enter,
.care-question__step.ng-enter > *,
.care-question__step.ng-enter .care-question__form > * .care-question__options > *,
.care-question--active.ng-animate .care-question__form > *,
.letterlist__section,
.ievv-designer-containeredit--expanded .ievv-designer-containeredit__addbuttons {
  animation: fall-down 400ms linear both; }

.animation-pop-in,
.list-section__item,
.people__item {
  animation: pop-in 600ms linear both; }

.animation-scale-in {
  animation: scale-in 500ms cubic-bezier(0, 0, 0.1, 1) both; }

@keyframes fade-in {
  from {
    opacity: 0; } }

@keyframes fade-in-down {
  0% {
    transform: translateY(-70px);
    opacity: 0; }
  60% {
    opacity: 0.3;
    transform: translateY(10px); } }

@keyframes fade-in-up {
  from {
    transform: translateY(120px);
    opacity: 0; } }

@keyframes fade-out {
  to {
    opacity: 0; } }

@keyframes fade-out-down {
  0% {
    opacity: 1; }
  30% {
    opacity: 0.05; }
  100% {
    transform: translateY(200px);
    opacity: 0; } }

@keyframes fade-out-up {
  to {
    transform: translateY(-30px);
    opacity: 0; } }

@keyframes fade-out-right {
  to {
    transform: translateX(30%);
    opacity: 0; } }

@keyframes fall-down {
  0.00% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -100, 1, 1);
    opacity: 0; }
  5.56% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -34.746, 1, 1); }
  11.11% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -3.811, 1, 1); }
  16.67% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 4.476, 1, 1); }
  22.22% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 3.784, 1, 1); }
  27.78% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1.719, 1, 1); }
  33.33% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.401, 1, 1); }
  38.89% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.06, 1, 1); }
  44.44% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.123, 1, 1); }
  50.00% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.072, 1, 1);
    opacity: 1; }
  55.56% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.025, 1, 1); }
  61.11% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.003, 1, 1); }
  66.67% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.003, 1, 1); }
  72.22% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.003, 1, 1); }
  77.78% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.001, 1, 1); }
  83.33% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 1, 1); }
  88.89% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 1, 1); }
  94.44% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 1, 1); }
  100.00% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 1, 1); } }

@keyframes move-away-up {
  0.00% {
    transform: matrix3d(1, 0, 0, 0, 0, 0.8, 0, 0, 0, 0, 1, 0, 0, 0, 1, 1); }
  3.33% {
    transform: matrix3d(1, 0, 0, 0, 0, 0.891, 0, 0, 0, 0, 1, 0, 0, -172.648, 1, 1); }
  6.67% {
    transform: matrix3d(1, 0, 0, 0, 0, 0.952, 0, 0, 0, 0, 1, 0, 0, -332.052, 1, 1); }
  10.00% {
    transform: matrix3d(1, 0, 0, 0, 0, 0.987, 0, 0, 0, 0, 1, 0, 0, -448.402, 1, 1); }
  13.33% {
    transform: matrix3d(1, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, 0, -511.214, 1, 1); }
  16.67% {
    transform: matrix3d(1, 0, 0, 0, 0, 1.007, 0, 0, 0, 0, 1, 0, 0, -536.549, 1, 1);
    opacity: 0; }
  100.00% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -499.997, 1, 1);
    opacity: 0; } }

@keyframes move-away-down {
  0% {
    margin-top: 250px;
    opacity: 1;
    transform: translateY(0); }
  15% {
    opacity: 0;
    transform: translateY(400px); }
  100% {
    margin-top: 250px;
    opacity: 0; } }

@keyframes pop-in {
  0.00% {
    transform: matrix3d(0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    opacity: 0; }
  5.56% {
    transform: matrix3d(0.803, 0, 0, 0, 0, 0.803, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  11.11% {
    transform: matrix3d(0.975, 0, 0, 0, 0, 0.975, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  16.67% {
    transform: matrix3d(1.033, 0, 0, 0, 0, 1.033, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  22.22% {
    transform: matrix3d(1.031, 0, 0, 0, 0, 1.031, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  27.78% {
    transform: matrix3d(1.016, 0, 0, 0, 0, 1.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  33.33% {
    transform: matrix3d(1.004, 0, 0, 0, 0, 1.004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  38.89% {
    transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  44.44% {
    transform: matrix3d(0.998, 0, 0, 0, 0, 0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  50.00% {
    transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    opacity: 1; }
  55.56% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  61.11% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  66.67% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  72.22% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  77.78% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  83.33% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  88.89% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  94.44% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  100.00% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } }

@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.5); } }

/* Form field wrapper

When laying out your form you have two options for spacing:

- Simple fields with just a label containing an input can use ``label label--standalone``.
- More complex fields with help text, messages and complex fields
  need to use ``fieldwrapper``.

Example: Basics

    <div class="fieldwrapper">
        <label class="label" for="id_myfield">
            Standard input
        </label>
        <input type="text" placeholder="I set the standard"
            id="id_myfield"
            class="input" />
        <p class="help-text">
            Vestibulum id ligula porta felis euismod semper.
            Nullam id dolor id nibh ultricies vehicula ut id elit.
        </p>
    </div>

    <div class="fieldwrapper">
        <label class="label">
            Standard input
            <input type="text" placeholder="I set the standard" class="input" />
        </label>
    </div>

    <div class="fieldwrapper">
        <label class="label">
            I'm a textarea
            <textarea placeholder="I more got space!" class="input"></textarea>
        </label>
        <p class="help-text ">
            Donec sed odio dui.
        </p>
    </div>

Example: {type: isolated} More complex example

    <div class="container">
        <div class="fieldwrapper">
            <p class="label">Are you good?</p>
            <label class="radio  radio--block">
                <input type="radio" name="myradio">
                <span class="radio__control-indicator"></span>
                Yes
            </label>
            <label class="radio  radio--block">
                <input type="radio" name="myradio">
                <span class="radio__control-indicator"></span>
                No
            </label>
            <label class="radio  radio--block">
                <input type="radio" name="myradio">
                <span class="radio__control-indicator"></span>
                Maybe
            </label>
            <p class="help-text ">
                Donec sed odio dui.
            </p>
        </div>

        <fieldset class="fieldset">
            <div class="fieldwrapper">
                <legend class="legend">Which of these statements are true?</legend>
                <label class="checkbox  checkbox--block">
                    <input type="checkbox" />
                    <span class="checkbox__control-indicator"></span>
                    CSS is better than SASS
                </label>
                <label class="checkbox  checkbox--block">
                    <input type="checkbox" />
                    <span class="checkbox__control-indicator"></span>
                    SASS is a superset of CSS
                </label>
                <label class="checkbox  checkbox--block">
                    <input type="checkbox" />
                    <span class="checkbox__control-indicator"></span>
                    SASS is a programming language
                </label>
                <p class="help-text ">
                    Donec sed odio dui.
                </p>
            </div>
        </fieldset>

        <div class="fieldwrapper">
            <p class="label" id="id_the_select_label">Are you good?</p>
            <label class="select  select--block">
                <select aria-labelledby="id_the_select_label">
                    <option>Yes</option>
                    <option>No</option>
                    <option>Maybe</option>
                </select>
            </label>
            <p class="help-text ">
                Donec sed odio dui.
            </p>
        </div>
    </div>


Example: --compact

    <div class="fieldwrapper  fieldwrapper--compact">
        <label class="label" for="id_myfield">
            Standard input
        </label>
        <input type="text" placeholder="I set the standard"
            id="id_myfield"
            class="input" />
        <p class="help-text">
            Vestibulum id ligula porta felis euismod semper.
            Nullam id dolor id nibh ultricies vehicula ut id elit.
        </p>
    </div>

    <div class="fieldwrapper  fieldwrapper--compact">
        <label class="label">
            Standard input
            <input type="text" placeholder="I set the standard" class="input" />
        </label>
    </div>

    <div class="fieldwrapper  fieldwrapper--compact">
        <label class="label">
            I'm a textarea
            <textarea placeholder="I more got space!" class="input"></textarea>
        </label>
        <p class="help-text ">
            Donec sed odio dui.
        </p>
    </div>


Example: {type: isolated} Multiple fieldwrappers on one line

    <div class="fieldwrapper-line">
        <div class="fieldwrapper-line__item fieldwrapper-line__item--width-small">
            <div class="fieldwrapper  fieldwrapper--compact">
                <label class="label">
                    From:
                    <input type="text" class="input input--outlined" />
                </label>
            </div>
        </div>

        <div class="fieldwrapper-line__item fieldwrapper-line__item--width-small">
            <div class="fieldwrapper  fieldwrapper--compact fieldwrapper-line__item fieldwrapper-line__item--width-small">
                <label class="label">
                    To:
                    <input type="text" class="input input--outlined" />
                </label>
                <p class="help-text ">
                    Donec sed odio dui.
                </p>
            </div>
        </div>
    </div>



Example: {type: isolated} Multiple fieldwrappers on one line - multiple sizes

    <div class="container container--wide">
        <div class="fieldwrapper-line">
            <div class="fieldwrapper-line__item fieldwrapper-line__item--width-xxsmall">
                <div class="fieldwrapper  fieldwrapper--compact">
                    <label class="label">
                        xxsmall:
                        <input type="text" class="input input--outlined" />
                    </label>
                </div>
            </div>
            <div class="fieldwrapper-line__item fieldwrapper-line__item--width-xxsmall">
                <div class="fieldwrapper  fieldwrapper--compact">
                    <label class="label">
                        xxsmall:
                        <input type="text" class="input input--outlined" />
                    </label>
                </div>
            </div>
            <div class="fieldwrapper-line__item fieldwrapper-line__item--width-small">
                <div class="fieldwrapper  fieldwrapper--compact">
                    <label class="label">
                        small:
                        <input type="text" class="input input--outlined" />
                    </label>
                </div>
            </div>
            <div class="fieldwrapper-line__item fieldwrapper-line__item--width-medium">
                <div class="fieldwrapper  fieldwrapper--compact">
                    <label class="label">
                        medium:
                        <input type="text" class="input input--outlined" />
                    </label>
                </div>
            </div>
        </div>
    </div>



Styleguide form.7:fieldwrapper
*/
.fieldwrapper {
  margin-bottom: 28px; }
  .fieldwrapper--compact {
    margin-bottom: 7px; }

.fieldwrapper-line {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; }
  .fieldwrapper-line__item {
    margin-right: 6px; }
    .fieldwrapper-line__item:last-child {
      margin-right: 0; }
    .fieldwrapper-line__item--width-xsmall {
      width: 120px;
      min-width: 30px; }
    .fieldwrapper-line__item--width-xxsmall {
      width: 96px;
      min-width: 30px; }
    .fieldwrapper-line__item--width-small {
      width: 216px;
      min-width: 30px; }
    .fieldwrapper-line__item--width-medium {
      width: 276px;
      min-width: 30px; }
    @media (min-width: 720px) {
      .fieldwrapper-line__item--vertical-center {
        display: flex;
        flex-direction: column;
        justify-content: center; } }

/* Horizontal form field wrapper

Same concept as `fieldwrapper`, but this layout puts the label and form field on the same line.

Example: {type: isolated} Basics

    <div class="horizontal-fieldwrapper">
        <div class="horizontal-fieldwrapper__label">
            <label class="label" for="id_name">
                Name
            </label>
        </div>
        <div class="horizontal-fieldwrapper__body">
            <input id="id_name" class="input"
                type="text" placeholder="I set the standard" />
            <p class="help-text">
                Vestibulum id ligula porta felis euismod semper.
                Nullam id dolor id nibh ultricies vehicula ut id elit.
            </p>
        </div>
    </div>

    <div class="horizontal-fieldwrapper">
        <div class="horizontal-fieldwrapper__label">
            <label class="label" for="id_email">
                Email
            </label>
        </div>
        <div class="horizontal-fieldwrapper__body">
            <input id="id_email" type="email" placeholder="email" class="input" />
            <p class="help-text">
                Vestibulum id ligula porta felis euismod semper.
                Nullam id dolor id nibh ultricies vehicula ut id elit.
            </p>
        </div>
    </div>


Example: {type: isolated} --compact

    <div class="horizontal-fieldwrapper horizontal-fieldwrapper--compact">
        <div class="horizontal-fieldwrapper__label">
            <label class="label">
                Name
            </label>
        </div>
        <div class="horizontal-fieldwrapper__body">
            <input type="text" placeholder="name" class="input" />
            <p class="help-text">
                Vestibulum id ligula porta felis euismod semper.
                Nullam id dolor id nibh ultricies vehicula ut id elit.
            </p>
        </div>
    </div>

    <div class="horizontal-fieldwrapper horizontal-fieldwrapper--compact">
        <div class="horizontal-fieldwrapper__label">
            <label class="label">
                Email
            </label>
        </div>
        <div class="horizontal-fieldwrapper__body">
            <input type="email" placeholder="email" class="input" />
        </div>
    </div>


Example: {type: isolated} Various input/field styles
    <div class="horizontal-fieldwrapper">
        <div class="horizontal-fieldwrapper__label">
            <label class="label">
                normal/default input
            </label>
        </div>
        <div class="horizontal-fieldwrapper__body">
            <input type="email" class="input" />
        </div>
    </div>

    <div class="horizontal-fieldwrapper">
        <div class="horizontal-fieldwrapper__label">
            <label class="label">
                input--outlined
            </label>
        </div>
        <div class="horizontal-fieldwrapper__body">
            <input type="email" class="input input--outlined" />
        </div>
    </div>

    <div class="horizontal-fieldwrapper">
        <div class="horizontal-fieldwrapper__label">
            <label class="label">
                textarea
            </label>
        </div>
        <div class="horizontal-fieldwrapper__body">
            <textarea class="input"></textarea>
        </div>
    </div>


    <div class="horizontal-fieldwrapper">
        <div class="horizontal-fieldwrapper__label horizontal-fieldwrapper__label--for-underlined">
            <label class="label">
                input--underlined
            </label>
        </div>
        <div class="horizontal-fieldwrapper__body">
            <input class="input input--underlined"
                type="text" placeholder="I set the standard" />
            <p class="help-text">
                Notice how we add --for-underlined variant for the label wrapper div.
            </p>
        </div>
    </div>

Example: {type: isolated} 20% / 80%

    <div class="horizontal-fieldwrapper horizontal-fieldwrapper--20-80">
        <div class="horizontal-fieldwrapper__label">
            <label class="label">
                Email
            </label>
        </div>
        <div class="horizontal-fieldwrapper__body">
            <input type="email" placeholder="email" class="input" />
        </div>
    </div>


Example: {type: isolated} 40% / 60%

    <div class="horizontal-fieldwrapper horizontal-fieldwrapper--40-60">
        <div class="horizontal-fieldwrapper__label">
            <label class="label">
                Email
            </label>
        </div>
        <div class="horizontal-fieldwrapper__body">
            <input type="email" placeholder="email" class="input" />
        </div>
    </div>


Example: {type: isolated} 50% / 50%

    <div class="horizontal-fieldwrapper horizontal-fieldwrapper--50-50">
        <div class="horizontal-fieldwrapper__label">
            <label class="label">
                Email
            </label>
        </div>
        <div class="horizontal-fieldwrapper__body">
            <input type="email" placeholder="email" class="input" />
        </div>
    </div>

Styleguide form.8:horizontal-fieldwrapper
*/
.horizontal-fieldwrapper {
  margin-bottom: 28px; }
  @media (min-width: 720px) {
    .horizontal-fieldwrapper {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap; } }
  @media (min-width: 720px) {
    .horizontal-fieldwrapper__label {
      width: 30%;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      text-align: left;
      align-items: center;
      box-sizing: border-box;
      padding-top: 0;
      padding-bottom: 0;
      line-height: 1.2;
      height: 52px; } }
  @media screen and (min-width: 720px) and (min-width: 440px) {
    .horizontal-fieldwrapper__label {
      padding-top: 0;
      padding-bottom: 0;
      line-height: 1.2;
      height: 52px; } }
  @media screen and (min-width: 720px) and (min-width: 720px) {
    .horizontal-fieldwrapper__label {
      padding-top: 0;
      padding-bottom: 0;
      line-height: 1.2;
      height: 56px; } }
  @media screen and (min-width: 720px) and (min-width: 960px) {
    .horizontal-fieldwrapper__label {
      padding-top: 0;
      padding-bottom: 0;
      line-height: 1.2;
      height: 56px; } }
  @media screen and (min-width: 720px) and (min-width: 1240px) {
    .horizontal-fieldwrapper__label {
      padding-top: 0;
      padding-bottom: 0;
      line-height: 1.2;
      height: 56px; } }
  @media (min-width: 720px) {
    .horizontal-fieldwrapper__label--for-underlined {
      box-sizing: border-box;
      padding-top: 0;
      padding-bottom: 0;
      line-height: 1.2;
      height: 42px; } }
  @media screen and (min-width: 720px) and (min-width: 440px) {
    .horizontal-fieldwrapper__label--for-underlined {
      padding-top: 0;
      padding-bottom: 0;
      line-height: 1.2;
      height: 42px; } }
  @media screen and (min-width: 720px) and (min-width: 720px) {
    .horizontal-fieldwrapper__label--for-underlined {
      padding-top: 0;
      padding-bottom: 0;
      line-height: 1.2;
      height: 42px; } }
  @media screen and (min-width: 720px) and (min-width: 960px) {
    .horizontal-fieldwrapper__label--for-underlined {
      padding-top: 0;
      padding-bottom: 0;
      line-height: 1.2;
      height: 42px; } }
  @media screen and (min-width: 720px) and (min-width: 1240px) {
    .horizontal-fieldwrapper__label--for-underlined {
      padding-top: 0;
      padding-bottom: 0;
      line-height: 1.2;
      height: 42px; } }
  @media (min-width: 720px) {
    .horizontal-fieldwrapper__body {
      width: 70%; } }
  .horizontal-fieldwrapper--compact {
    margin-bottom: 7px; }
  @media (min-width: 720px) {
    .horizontal-fieldwrapper--20-80 .horizontal-fieldwrapper__label {
      width: 20%; } }
  @media (min-width: 720px) {
    .horizontal-fieldwrapper--20-80 .horizontal-fieldwrapper__body {
      width: 80%; } }
  @media (min-width: 720px) {
    .horizontal-fieldwrapper--40-60 .horizontal-fieldwrapper__label {
      width: 40%; } }
  @media (min-width: 720px) {
    .horizontal-fieldwrapper--40-60 .horizontal-fieldwrapper__body {
      width: 60%; } }
  @media (min-width: 720px) {
    .horizontal-fieldwrapper--50-50 .horizontal-fieldwrapper__label {
      width: 50%; } }
  @media (min-width: 720px) {
    .horizontal-fieldwrapper--50-50 .horizontal-fieldwrapper__body {
      width: 50%; } }

body {
  font-family: "Maison Neue", Helvetica, sans-serif;
  font-weight: normal;
  font-size: 16px;
  line-height: 21px;
  position: relative;
  color: #2f2c2f;
  font-style: normal;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background-color: #f5f5f5; }
  @media screen and (min-width: 440px) {
    body {
      font-size: 19px;
      line-height: 28px; } }
  body.overlay, body.modal-open {
    overflow: hidden;
    position: fixed; }
    @media (min-width: 720px) {
      body.overlay, body.modal-open {
        position: relative; } }

html,
body {
  overflow-x: hidden; }

/*
Workaround for javascript widgets that float elements
on pages where the body is not as high as the actual
view height.

The widgets should add this class when shown, and remove it
afterwards.
 */
body.fill-view-height {
  min-height: 100vh; }

/** Fill viewport layout

A layout that ensures that we fill the entire viewport while keeping the
footer at the bottom at the screen even if the main content is not high
enough to push the footer to the bottom.

NOTE: This does not work on IE 11, but you can make it work by adding the ``ie-hack-display-flex-wrapper``
to ``body``.

Example: {type: isolated}

    <div class="fill-viewport-layout" style="background-color: blue;">
        <main class="fill-viewport-layout__content" style="background-color: green;">
            Main content
        </main>

        <footer class="fill-viewport-layout__footer" style="background-color: red;">
            The footer
        </footer>
    </div>


Example: {type: isolated} High main element

    <div class="fill-viewport-layout" style="background-color: blue;">
        <main class="fill-viewport-layout__content" style="background-color: green; min-height: 100vh;">
            <p>Main content - higher than view height!</p>

            <p>Aenean lacinia bibendum nulla sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed posuere consectetur est at lobortis. Etiam porta sem malesuada magna mollis euismod. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
        </main>

        <footer class="fill-viewport-layout__footer" style="background-color: red;">
            The footer
        </footer>
    </div>


Styleguide layout.fill-viewport-layout
 */
.fill-viewport-layout {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between; }
  .fill-viewport-layout__content {
    flex: 0 0 auto; }
  .fill-viewport-layout__footer {
    flex: 0 0 auto; }

/*
Links

__Never__ use `<span>`, `<div>` or elements without a semantic meaning as links.

Example: Link styles
    <a href="">I'm a link</a>
    <a href="" class="link link--light">I'm also link</a>

Example: Button styled as a link
    <button type="button" class="link">I'm a button!</a>
    <button type="button" class="link link--light">I'm also a button!</a>

Styleguide type.7:links
*/
a,
.link {
  display: inline;
  cursor: pointer;
  text-decoration: none;
  color: #2f2c2f;
  border-bottom: 2px solid #2f2c2f; }
  a:hover, a:focus,
  .link:hover,
  .link:focus {
    color: #ce111d;
    border-color: #ce111d; }
  a--light,
  .link--light {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.7); }
    a--light:hover, a--light:focus,
    .link--light:hover,
    .link--light:focus {
      color: #fff;
      border-color: #fff; }
  a--no-border,
  .link--no-border {
    border: none;
    text-decoration: none; }

.link--light {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.7); }
  .link--light:hover, .link--light:focus {
    color: #fff;
    border-color: #fff; }

/* Headers

Make sure headers represent semantic hierarchy of the page. For pure styling use these classes instead of ruining the hierarchy: `.h1`, `.h2`, `.h3`, `.h4`

Example: {type: isolated}
    <h1>Header 1</h1>
    <h2>Header 2</h2>
    <h3>Header 3</h3>
    <h4>Header 4</h4>


Example: {type: isolated} --spaced - for usage outside of page-sections

    <!--
    You should normally use a page-section for each heading, and have one heading
    in each page-section, but if you need to have multiple headings in a single
    container etc., use --spaced
    -->

    <h1 class="h1 h1--spaced">Header 1</h1>
    <h2 class="h2 h2--spaced">Header 2</h2>
    <h3 class="h3 h3--spaced">Header 3</h3>
    <h4 class="h4 h4--spaced">Header 4</h4>


Styleguide type.3:headers
*/
h2,
.h2,
h3,
.h3,
.adminui-page-section__toggle,
.page-menu__item--promo,
.page-section__toggle {
  font-family: "Noe Text", Helvetica, sans-serif;
  font-weight: bold;
  margin: 0;
  margin-bottom: 28px;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto; }

h1,
.h1,
.get-involved__title {
  font-family: "Noe Text", Helvetica, sans-serif;
  font-weight: bold;
  font-size: 32px;
  line-height: 35px;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto; }
  @media screen and (min-width: 440px) {
    h1,
    .h1,
    .get-involved__title {
      font-size: 38px;
      line-height: 49px; } }
  @media screen and (min-width: 720px) {
    h1,
    .h1,
    .get-involved__title {
      font-size: 49px;
      line-height: 56px; } }
  h1 strong,
  .h1 strong, .get-involved__title strong {
    font-family: "Noe Text", Helvetica, sans-serif;
    font-weight: bold;
    font-style: italic;
    white-space: nowrap; }

h2,
.h2 {
  font-size: 21px;
  line-height: 28px; }
  @media screen and (min-width: 440px) {
    h2,
    .h2 {
      font-size: 26px;
      line-height: 35px; } }
  @media screen and (min-width: 720px) {
    h2,
    .h2 {
      font-size: 27px;
      line-height: 35px; } }
  h2 strong,
  .h2 strong {
    font-family: "Noe Text", Helvetica, sans-serif;
    font-weight: bold; }

h3,
.h3,
.adminui-page-section__toggle,
.page-menu__item--promo,
.page-section__toggle {
  font-size: 19px;
  line-height: 28px;
  margin-bottom: 14px; }
  @media screen and (min-width: 440px) {
    h3,
    .h3,
    .adminui-page-section__toggle,
    .page-menu__item--promo,
    .page-section__toggle {
      font-size: 23px;
      line-height: 28px; } }
  @media (min-width: 720px) {
    h3,
    .h3,
    .adminui-page-section__toggle,
    .page-menu__item--promo,
    .page-section__toggle {
      margin-bottom: 14px; } }
  h3 strong,
  .h3 strong, .adminui-page-section__toggle strong, .page-menu__item--promo strong, .page-section__toggle strong {
    font-family: "Noe Text", Helvetica, sans-serif;
    font-weight: bold; }

h4,
.h4,
.legend {
  font-family: "Maison Neue", Helvetica, sans-serif;
  font-weight: bold;
  font-size: 16px;
  line-height: 21px;
  word-wrap: break-word;
  margin: 0;
  margin-bottom: 14px; }
  @media screen and (min-width: 440px) {
    h4,
    .h4,
    .legend {
      font-size: 19px;
      line-height: 28px; } }
  @media (min-width: 720px) {
    h4,
    .h4,
    .legend {
      margin-bottom: 14px; } }

.h1--spaced,
.h2--spaced,
.h3--spaced,
.h4--spaced {
  margin-top: 28px; }

.type-xxlarge {
  font-size: 28px;
  line-height: 35px; }
  @media screen and (min-width: 440px) {
    .type-xxlarge {
      font-size: 36px;
      line-height: 49px; } }
  @media screen and (min-width: 720px) {
    .type-xxlarge {
      font-size: 40px;
      line-height: 49px; } }

p:not(:empty) + h2,
p:not(:empty) + h3,
p:not(:empty) + h4,
ul + h2,
ul + h3,
ul + h4 {
  margin-top: 35px; }

/* Paragraphs

Example: Default paragraphs
    <p>Lorem Ipsum's father was with Lee Harvey Oswald prior to Oswald's being, you know, shot. I think the only difference between me and the other placeholder text is that I’m more honest and my words are more beautiful. An ‘extremely credible source’ has called my office and told me that Barack Obama’s placeholder text is a fraud. I’m the best thing that ever happened to placeholder text.</p>
    <p>Look at that text! Would anyone use that? Can you imagine that, the text of your next webpage?!</p>
    <p>The best taco bowls are made in Trump Tower Grill. I love Hispanics! Lorem Ispum is a choke artist. It chokes!</p>

Example: Tight paragraphs
    <p class="paragraph paragraph--tight">Lorem Ipsum's father was with Lee Harvey Oswald prior to Oswald's being, you know, shot. I think the only difference between me and the other placeholder text is that I’m more honest and my words are more beautiful. An ‘extremely credible source’ has called my office and told me that Barack Obama’s placeholder text is a fraud. I’m the best thing that ever happened to placeholder text.</p>
    <p class="paragraph paragraph--tight">Look at that text! Would anyone use that? Can you imagine that, the text of your next webpage?!</p>
    <p class="paragraph paragraph--tight">The best taco bowls are made in Trump Tower Grill. I love Hispanics! Lorem Ispum is a choke artist. It chokes!</p>

Example: Extra tight paragraphs
    <p class="paragraph paragraph--xtight">Lorem Ipsum's father was with Lee Harvey Oswald prior to Oswald's being, you know, shot. I think the only difference between me and the other placeholder text is that I’m more honest and my words are more beautiful. An ‘extremely credible source’ has called my office and told me that Barack Obama’s placeholder text is a fraud. I’m the best thing that ever happened to placeholder text.</p>
    <p class="paragraph paragraph--xtight">Look at that text! Would anyone use that? Can you imagine that, the text of your next webpage?!</p>
    <p class="paragraph paragraph--xtight">The best taco bowls are made in Trump Tower Grill. I love Hispanics! Lorem Ispum is a choke artist. It chokes!</p>

Example: Paragraphs without margin
    <p class="paragraph paragraph--no-margin">Lorem Ipsum's father was with Lee Harvey Oswald prior to Oswald's being, you know, shot. I think the only difference between me and the other placeholder text is that I’m more honest and my words are more beautiful. An ‘extremely credible source’ has called my office and told me that Barack Obama’s placeholder text is a fraud. I’m the best thing that ever happened to placeholder text.</p>
    <p class="paragraph paragraph--no-margin">Look at that text! Would anyone use that? Can you imagine that, the text of your next webpage?!</p>
    <p class="paragraph paragraph--no-margin">The best taco bowls are made in Trump Tower Grill. I love Hispanics! Lorem Ispum is a choke artist. It chokes!</p>

Example: Other elements styled as paragraphs
    <ul>
        <li class="paragraph">Lorem Ipsum's father was with Lee Harvey Oswald prior to Oswald's being, you know, shot. I think the only difference between me and the other placeholder text is that I’m more honest and my words are more beautiful. An ‘extremely credible source’ has called my office and told me that Barack Obama’s placeholder text is a fraud. I’m the best thing that ever happened to placeholder text.</li>
        <li class="paragraph">Look at that text! Would anyone use that? Can you imagine that, the text of your next webpage?!</li>
        <li class="paragraph">The best taco bowls are made in Trump Tower Grill. I love Hispanics! Lorem Ispum is a choke artist. It chokes!</li>
    </ul>

Styleguide type.4:paragraphs
*/
p,
.paragraph {
  font-family: "Maison Neue", Helvetica, sans-serif;
  font-weight: normal;
  margin-bottom: 28px; }
  p:empty,
  .paragraph:empty {
    display: none; }

.paragraph {
  display: block; }
  .paragraph--tight {
    margin-bottom: 14px; }
  .paragraph--xtight {
    margin-bottom: 7px; }
  .paragraph--no-margin {
    margin-bottom: 0; }

/** Preamble

Example: Preamble
    <p class="preamble">
        We are going to make placeholder text great again.
        Greater than ever before. Lorem Ipsum's father was
        with Lee Harvey Oswald prior to Oswald's being, you know, shot.
    </p>

Styleguide type.5:preamble
*/
.preamble {
  font-family: "Maison Neue", Helvetica, sans-serif;
  font-weight: bold; }
  .preamble:only-child {
    margin: 0; }

.normal {
  font-family: "Maison Neue", Helvetica, sans-serif;
  font-weight: normal;
  font-size: 16px;
  line-height: 21px; }
  @media screen and (min-width: 440px) {
    .normal {
      font-size: 19px;
      line-height: 28px; } }

.no-break {
  white-space: nowrap; }

/* Other type styles

Example: {type: isolated} Strong, italic, muted, alignments, small caps
    <p><strong>Strong text</strong></p>
    <p class="italic">Italic text</p>
    <p class="text-muted">Muted text.</p>
    <p class="text-center">Centered text</p>
    <p class="text-right">Right aligned text</p>
    <p><strong class="text-smallcaps">Small capsed text</strong> can be useful to introduse a paragraph sometimes</p>

Styleguide type.6:other
*/
strong,
.strong,
b {
  font-family: "Maison Neue", Helvetica, sans-serif;
  font-weight: bold; }

.italic {
  font-style: italic; }

.text-muted {
  color: #686969; }

.text-center {
  text-align: center; }

.text-left {
  text-align: left; }

.text-right {
  text-align: right; }

.text-smallcaps,
.separations__intro {
  font-family: "Maison Neue", Helvetica, sans-serif;
  font-weight: bold;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.74em;
  line-height: inherit;
  font-family: "Maison Neue", Helvetica, sans-serif;
  font-weight: bold; }
  .text-smallcaps--thin {
    font-family: "Maison Neue", Helvetica, sans-serif; }

.time-stamp {
  font-family: "Maison Neue Mono", Helvetica, sans-serif;
  font-weight: normal;
  font-size: 15px;
  line-height: 21px;
  display: block;
  color: #686969;
  margin-bottom: 14px;
  border: 0; }
  @media screen and (min-width: 720px) {
    .time-stamp {
      font-size: 16px;
      line-height: 21px; } }

/* Lists

Unordered list styles are turned of by default. You need to add classes to style it.

Example: Ordered list - Default styling
    <ol>
        <li>I'm number one!</li>
        <li>Second isn't all that bad</li>
        <li>I'm last :(</li>
    </ol>

Example: list - Default styling
    <ul class="list">
        <li>I'm number one!</li>
        <li>Second isn't all that bad</li>
        <li>I'm last :(</li>
    </ul>

Example: --no-margin
    <ul class="list list--no-margin">
        <li>I'm number one!</li>
        <li>Second isn't all that bad</li>
        <li>I'm last :(</li>
    </ul>

Example: --flat
    <ul class="list list--flat">
        <li>I'm number one!</li>
        <li>Second isn't all that bad</li>
        <li>I'm last :(</li>
    </ul>

Example: --large
    <ul class="list  list--large">
        <li>I'm number one!</li>
        <li>Second isn't all that bad</li>
        <li>I'm last :(</li>
    </ul>

Example: list--spacing-xtight
    <ul class="list list--spacing-xtight">
        <li>I'm number one!</li>
        <li>Second isn't all that bad</li>
        <li>I'm last :(</li>
    </ul>

Example: list--spacing-tight
    <ul class="list list--spacing-tight">
        <li>I'm number one!</li>
        <li>Second isn't all that bad</li>
        <li>I'm last :(</li>
    </ul>

Example: list--spacing-paragraph
    <ul class="list list--spacing-paragraph">
        <li>I'm number one!</li>
        <li>Second isn't all that bad</li>
        <li>I'm last :(</li>
    </ul>

Example: --cricon

    <ul class="list list--cricon">
        <li class="list__item">
            <span class="cricon cricon--arrow-right" aria-hidden="true"></span>
            A list item with icon
        </li>
        <li class="list__item">
            <span class="cricon cricon--arrow-right cricon--color-primary" aria-hidden="true"></span>
            A list item with primary colored icon
        </li>
        <li class="list__item">
            <span class="cricon cricon--pencil" aria-hidden="true"></span>
            Different icons align the same way
        </li>
        <li class="list__item">
            <span class="cricon cricon--text" aria-hidden="true"></span>
            Different icons align the same way example 2
        </li>
        <li class="list__item">
            <span class="cricon cricon--phone" aria-hidden="true"></span>
            Different icons align the same way example 3
        </li>
    </ul>

Example: --cricon --cricon-xsmall

    <ul class="list list--cricon list--cricon-xsmall">
        <li class="list__item">
            <span class="cricon cricon--arrow-right" aria-hidden="true"></span>
            A list item with icon
        </li>
        <li class="list__item">
            <span class="cricon cricon--arrow-right cricon--color-primary" aria-hidden="true"></span>
            A list item with primary colored icon
        </li>
        <li class="list__item">
            <span class="cricon cricon--pencil" aria-hidden="true"></span>
            Different icons align the same way
        </li>
        <li class="list__item">
            <span class="cricon cricon--text" aria-hidden="true"></span>
            Different icons align the same way example 2
        </li>
        <li class="list__item">
            <span class="cricon cricon--phone" aria-hidden="true"></span>
            Different icons align the same way example 3
        </li>
    </ul>

Example: --cricon --cricon-medium

    <ul class="list list--cricon list--cricon-medium">
        <li class="list__item">
            <span class="cricon cricon--arrow-right" aria-hidden="true"></span>
            A list item with icon
        </li>
        <li class="list__item">
            <span class="cricon cricon--arrow-right cricon--color-primary" aria-hidden="true"></span>
            A list item with primary colored icon
        </li>
        <li class="list__item">
            <span class="cricon cricon--pencil" aria-hidden="true"></span>
            Different icons align the same way
        </li>
        <li class="list__item">
            <span class="cricon cricon--text" aria-hidden="true"></span>
            Different icons align the same way example 2
        </li>
        <li class="list__item">
            <span class="cricon cricon--phone" aria-hidden="true"></span>
            Different icons align the same way example 3
        </li>
    </ul>

Example: --cricon --cricon-large

    <ul class="list list--cricon list--cricon-large">
        <li class="list__item">
            <span class="cricon cricon--arrow-right" aria-hidden="true"></span>
            A list item with icon
        </li>
        <li class="list__item">
            <span class="cricon cricon--arrow-right cricon--color-primary" aria-hidden="true"></span>
            A list item with primary colored icon
        </li>
        <li class="list__item">
            <span class="cricon cricon--pencil" aria-hidden="true"></span>
            Different icons align the same way
        </li>
        <li class="list__item">
            <span class="cricon cricon--text" aria-hidden="true"></span>
            Different icons align the same way example 2
        </li>
        <li class="list__item">
            <span class="cricon cricon--phone" aria-hidden="true"></span>
            Different icons align the same way example 3
        </li>
    </ul>

Example: --links - list of links
    <ul class="list  list--links">
        <li><a href="">I'm number one!</a></li>
        <li><a href="">Second isn't all that bad</a></li>
        <li><a href="">I'm last :(</a></li>
    </ul>

Example: --contact` - Contact list (DEPRECATED: use --cricon)
    <ul class="list  list--contact">
        <li class="list__item  list__item--phone">
            <a href="tel:12345678">123 45 678</a>
        </li>
        <li class="list__item  list__item--email">
            <a href="mailto:test@example.com">test@example.com</a>
        </li>
        <li class="list__item  list__item--address">
            <a href="https://maps.google.no/maps?f=q&source=s_q&hl=no&geocode=&q=Stortinget&aq=&sll=59.914562,10.749653&sspn=0.036099,0.077162&vpsrc=6&ie=UTF8&hq=stortingen&hnear=&ll=59.913133,10.742043&spn=0.004513,0.009645&t=m&z=17&iwloc=A&cid=18144128272286456866">Stortinget</a>
        </li>
    </ul>

Styleguide type.list
*/
ol {
  counter-reset: ol-counter;
  text-align: left;
  margin-bottom: 28px; }
  ol > li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 0;
    list-style-type: none; }
    @media (min-width: 720px) {
      ol > li {
        padding-left: 42px; } }
    ol > li:before {
      content: counter(ol-counter) ".";
      counter-increment: ol-counter;
      position: absolute;
      left: 0; }


.list,
.markdown-wrapper ul {
  margin-bottom: 28px;
  text-align: left; }
  
  .list > li, .markdown-wrapper ul > li,
  .list .list__item, .markdown-wrapper ul .list__item {
    position: relative;
    padding-left: 30px;
    margin-bottom: 0; }
    @media (min-width: 720px) {
      
      .list > li, .markdown-wrapper ul > li,
      .list .list__item, .markdown-wrapper ul .list__item {
        padding-left: 42px; } }
    
    .list > li:before, .markdown-wrapper ul > li:before,
    .list .list__item:before, .markdown-wrapper ul .list__item:before {
      content: '';
      position: absolute;
      left: 0;
      top: 0.35em;
      height: 9px;
      width: 9px;
      border-radius: 50%;
      background-color: #ce111d; }
      @media (min-width: 440px) {
        
        .list > li:before, .markdown-wrapper ul > li:before,
        .list .list__item:before, .markdown-wrapper ul .list__item:before {
          top: 0.4em; } }
  
  .list--large > li,
  .list--large .list__item {
    margin-bottom: 7px; }
    @media (min-width: 720px) {
      
      .list--large > li,
      .list--large .list__item {
        margin-bottom: 28px; } }
  
  .list--links > li,
  .list--links .list__item {
    margin-bottom: 7px; }
    
    .list--links > li:before,
    .list--links .list__item:before {
      background-color: transparent;
      border-radius: 0;
      border: 0;
      font-size: 16px;
      width: 20.8px;
      color: #E01220;
      -moz-osx-font-smoothing: grayscale;
      -webkit-font-smoothing: antialiased;
      display: inline-block;
      font-style: normal;
      font-variant: normal;
      text-rendering: auto;
      line-height: 1;
      font-weight: 900;
      font-family: 'Font Awesome 5 Free';
      content: "\f061"; }
      @media screen and (min-width: 440px) {
        
        .list--links > li:before,
        .list--links .list__item:before {
          font-size: 19px; } }
      @media (min-width: 440px) {
        
        .list--links > li:before,
        .list--links .list__item:before {
          width: 24.7px; } }
  
  .list--contact .list__item {
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    margin-bottom: 7px; }
    
    .list--contact .list__item:before {
      background-color: transparent;
      border-radius: 0;
      border: 0;
      width: 20.8px;
      color: #E01220; }
      @media (min-width: 440px) {
        
        .list--contact .list__item:before {
          width: 24.7px; } }
    
    .list--contact .list__item--email:before {
      -moz-osx-font-smoothing: grayscale;
      -webkit-font-smoothing: antialiased;
      display: inline-block;
      font-style: normal;
      font-variant: normal;
      text-rendering: auto;
      line-height: 1;
      font-weight: 900;
      font-family: 'Font Awesome 5 Free';
      content: "\f0e0"; }
    
    .list--contact .list__item--phone:before {
      -moz-osx-font-smoothing: grayscale;
      -webkit-font-smoothing: antialiased;
      display: inline-block;
      font-style: normal;
      font-variant: normal;
      text-rendering: auto;
      line-height: 1;
      font-weight: 900;
      font-family: 'Font Awesome 5 Free';
      content: "\f095"; }
    
    .list--contact .list__item--address:before {
      -moz-osx-font-smoothing: grayscale;
      -webkit-font-smoothing: antialiased;
      display: inline-block;
      font-style: normal;
      font-variant: normal;
      text-rendering: auto;
      line-height: 1;
      font-weight: 900;
      font-family: 'Font Awesome 5 Free';
      content: "\f3c5"; }
  
  .list--no-margin {
    margin-bottom: 0; }
  
  .list--flat {
    padding-left: 0;
    list-style: none; }
    
    .list--flat > li,
    .list--flat .list__item {
      padding-left: 0; }
      
      .list--flat > li:before,
      .list--flat .list__item:before {
        background-color: transparent;
        width: 0;
        height: 0;
        top: 0; }
        @media (min-width: 440px) {
          
          .list--flat > li:before,
          .list--flat .list__item:before {
            top: 0; } }
  
  .list--cricon .list__item:before {
    background-color: transparent;
    border-radius: 0;
    border: 0; }
  
  .list--cricon > li,
  .list--cricon .list__item {
    padding-left: 32.8px;
    min-height: 20.8px;
    position: relative; }
    
    .list--cricon > li .cricon,
    .list--cricon .list__item .cricon {
      position: absolute;
      top: 0;
      left: 0;
      line-height: inherit; }
      
      .list--cricon > li .cricon:before,
      .list--cricon .list__item .cricon:before {
        font-size: 16px; }
        @media screen and (min-width: 440px) {
          
          .list--cricon > li .cricon:before,
          .list--cricon .list__item .cricon:before {
            font-size: 19px; } }
  @media (min-width: 440px) {
    
    .list--cricon > li,
    .list--cricon .list__item {
      padding-left: 36.7px;
      min-height: 24.7px;
      position: relative; }
      
      .list--cricon > li .cricon,
      .list--cricon .list__item .cricon {
        position: absolute;
        top: 0;
        left: 0;
        line-height: inherit; }
        
        .list--cricon > li .cricon:before,
        .list--cricon .list__item .cricon:before {
          font-size: 16px; } }
      @media screen and (min-width: 440px) and (min-width: 440px) {
        
        .list--cricon > li .cricon:before,
        .list--cricon .list__item .cricon:before {
          font-size: 19px; } }
  
  .list--cricon-xsmall > li,
  .list--cricon-xsmall .list__item {
    padding-left: 31.5px;
    min-height: 19.5px;
    position: relative; }
    
    .list--cricon-xsmall > li .cricon,
    .list--cricon-xsmall .list__item .cricon {
      position: absolute;
      top: 0;
      left: 0;
      line-height: inherit; }
      
      .list--cricon-xsmall > li .cricon:before,
      .list--cricon-xsmall .list__item .cricon:before {
        font-size: 15px; }
        @media screen and (min-width: 720px) {
          
          .list--cricon-xsmall > li .cricon:before,
          .list--cricon-xsmall .list__item .cricon:before {
            font-size: 16px; } }
  @media (min-width: 720px) {
    
    .list--cricon-xsmall > li,
    .list--cricon-xsmall .list__item {
      padding-left: 32.8px;
      min-height: 20.8px;
      position: relative; }
      
      .list--cricon-xsmall > li .cricon,
      .list--cricon-xsmall .list__item .cricon {
        position: absolute;
        top: 0;
        left: 0;
        line-height: inherit; }
        
        .list--cricon-xsmall > li .cricon:before,
        .list--cricon-xsmall .list__item .cricon:before {
          font-size: 15px; } }
      @media screen and (min-width: 720px) and (min-width: 720px) {
        
        .list--cricon-xsmall > li .cricon:before,
        .list--cricon-xsmall .list__item .cricon:before {
          font-size: 16px; } }
  
  .list--cricon-medium > li,
  .list--cricon-medium .list__item {
    padding-left: 40.6px;
    min-height: 28.6px;
    position: relative; }
    
    .list--cricon-medium > li .cricon,
    .list--cricon-medium .list__item .cricon {
      position: absolute;
      top: 0;
      left: 0;
      line-height: inherit; }
      
      .list--cricon-medium > li .cricon:before,
      .list--cricon-medium .list__item .cricon:before {
        font-size: 22px; }
        @media screen and (min-width: 720px) {
          
          .list--cricon-medium > li .cricon:before,
          .list--cricon-medium .list__item .cricon:before {
            font-size: 24px; } }
  @media (min-width: 720px) {
    
    .list--cricon-medium > li,
    .list--cricon-medium .list__item {
      padding-left: 43.2px;
      min-height: 31.2px;
      position: relative; }
      
      .list--cricon-medium > li .cricon,
      .list--cricon-medium .list__item .cricon {
        position: absolute;
        top: 0;
        left: 0;
        line-height: inherit; }
        
        .list--cricon-medium > li .cricon:before,
        .list--cricon-medium .list__item .cricon:before {
          font-size: 22px; } }
      @media screen and (min-width: 720px) and (min-width: 720px) {
        
        .list--cricon-medium > li .cricon:before,
        .list--cricon-medium .list__item .cricon:before {
          font-size: 24px; } }
  
  .list--cricon-large > li,
  .list--cricon-large .list__item {
    padding-left: 36.7px;
    min-height: 24.7px;
    position: relative; }
    
    .list--cricon-large > li .cricon,
    .list--cricon-large .list__item .cricon {
      position: absolute;
      top: 0;
      left: 0;
      line-height: inherit; }
      
      .list--cricon-large > li .cricon:before,
      .list--cricon-large .list__item .cricon:before {
        font-size: 19px; }
        @media screen and (min-width: 440px) {
          
          .list--cricon-large > li .cricon:before,
          .list--cricon-large .list__item .cricon:before {
            font-size: 23px; } }
  @media (min-width: 440px) {
    
    .list--cricon-large > li,
    .list--cricon-large .list__item {
      padding-left: 41.9px;
      min-height: 29.9px;
      position: relative; }
      
      .list--cricon-large > li .cricon,
      .list--cricon-large .list__item .cricon {
        position: absolute;
        top: 0;
        left: 0;
        line-height: inherit; }
        
        .list--cricon-large > li .cricon:before,
        .list--cricon-large .list__item .cricon:before {
          font-size: 19px; } }
      @media screen and (min-width: 440px) and (min-width: 440px) {
        
        .list--cricon-large > li .cricon:before,
        .list--cricon-large .list__item .cricon:before {
          font-size: 23px; } }
  
  .list--spacing-xtight > li,
  .list--spacing-xtight .list__item {
    margin-bottom: 7px; }
  
  .list--spacing-tight > li,
  .list--spacing-tight .list__item {
    margin-bottom: 14px; }
  
  .list--spacing-paragraph > li,
  .list--spacing-paragraph .list__item {
    margin-bottom: 28px; }

/* Icons

Example: Arrows and chevrons

    <ul class="sg-icon-grid">
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--arrow-up" aria-hidden="true"></span>
            <code>cricon cricon--arrow-up</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--arrow-down" aria-hidden="true"></span>
            <code>cricon cricon--arrow-down</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--arrow-left" aria-hidden="true"></span>
            <code>cricon cricon--arrow-left</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--arrow-right" aria-hidden="true"></span>
            <code>cricon cricon--arrow-right</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--chevron-up" aria-hidden="true"></span>
            <code>cricon cricon--chevron-up</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--chevron-down" aria-hidden="true"></span>
            <code>cricon cricon--chevron-down</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--chevron-left" aria-hidden="true"></span>
            <code>cricon cricon--chevron-left</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--chevron-right" aria-hidden="true"></span>
            <code>cricon cricon--chevron-right</code>
        </li>
    </ul>

Example: UI

    <ul class="sg-icon-grid">
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--plus" aria-hidden="true"></span>
            <code>cricon cricon--plus</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--minus" aria-hidden="true"></span>
            <code>cricon cricon--minus</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--pencil" aria-hidden="true"></span>
            <code>cricon cricon--pencil</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--edit" aria-hidden="true"></span>
            <code>cricon cricon--edit</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--trash" aria-hidden="true"></span>
            <code>cricon cricon--trash</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--check" aria-hidden="true"></span>
            <code>cricon cricon--check</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--search" aria-hidden="true"></span>
            <code>cricon cricon--search</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--close" aria-hidden="true"></span>
            <code>cricon cricon--close</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--user" aria-hidden="true"></span>
            <code>cricon cricon--user</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--calendar" aria-hidden="true"></span>
            <code>cricon cricon--calendar</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--calendar-grid" aria-hidden="true"></span>
            <code>cricon cricon--calendar-grid</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--clock" aria-hidden="true"></span>
            <code>cricon cricon--clock</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--flag" aria-hidden="true"></span>
            <code>cricon cricon--flag</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--ellipsis-horizontal" aria-hidden="true"></span>
            <code>cricon cricon--ellipsis-horizontal</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--download" aria-hidden="true"></span>
            <code>cricon cricon--download</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--file" aria-hidden="true"></span>
            <code>cricon cricon--file</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--bars" aria-hidden="true"></span>
            <code>cricon cricon--bars</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--info" aria-hidden="true"></span>
            <code>cricon cricon--info</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--help" aria-hidden="true"></span>
            <code>cricon cricon--help</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--warning" aria-hidden="true"></span>
            <code>cricon cricon--warning</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--settings" aria-hidden="true"></span>
            <code>cricon cricon--settings</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--external-link" aria-hidden="true"></span>
            <code>cricon cricon--external-link</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--comment" aria-hidden="true"></span>
            <code>cricon cricon--comment</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--comments" aria-hidden="true"></span>
            <code>cricon cricon--comments</code>
        </li>
    </ul>

Example: Social

    <ul class="sg-icon-grid">
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--facebook" aria-hidden="true"></span>
            <code>cricon cricon--facebook</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--twitter" aria-hidden="true"></span>
            <code>cricon cricon--twitter</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--instagram" aria-hidden="true"></span>
            <code>cricon cricon--instagram</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--youtube" aria-hidden="true"></span>
            <code>cricon cricon--youtube</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--snapchat" aria-hidden="true"></span>
            <code>cricon cricon--snapchat</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--podcast" aria-hidden="true"></span>
            <code>cricon cricon--podcast</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--email" aria-hidden="true"></span>
            <code>cricon cricon--email</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--phone" aria-hidden="true"></span>
            <code>cricon cricon--phone</code>
        </li>
    </ul>

Example: Map

    <ul class="sg-icon-grid">
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--map-marker" aria-hidden="true"></span>
            <code>cricon cricon--map-marker</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--location-arrow" aria-hidden="true"></span>
            <code>cricon cricon--location-arrow</code>
        </li>
    </ul>

Example: E-commerce

    <ul class="sg-icon-grid">
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--shopping-cart" aria-hidden="true"></span>
            <code>cricon cricon--shopping-cart</code>
        </li>
    </ul>

Example: Text editing

    <ul class="sg-icon-grid">
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--list-ul" aria-hidden="true"></span>
            <code>cricon cricon--list-ul</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--list-ol" aria-hidden="true"></span>
            <code>cricon cricon--list-ol</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--bold" aria-hidden="true"></span>
            <code>cricon cricon--bold</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--italic" aria-hidden="true"></span>
            <code>cricon cricon--italic</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--image" aria-hidden="true"></span>
            <code>cricon cricon--image</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--video" aria-hidden="true"></span>
            <code>cricon cricon--video</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--text" aria-hidden="true"></span>
            <code>cricon cricon--text</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--cut" aria-hidden="true"></span>
            <code>cricon cricon--cut</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--copy" aria-hidden="true"></span>
            <code>cricon cricon--copy</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--paste" aria-hidden="true"></span>
            <code>cricon cricon--paste</code>
        </li>
    </ul>


Example: Color variants

    <ul class="sg-icon-grid">
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--arrow-right" aria-hidden="true"></span>
            <code>Default (no extra css class needed)</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--arrow-right cricon--color-primary" aria-hidden="true"></span>
            <code>cricon--color-primary</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--arrow-right cricon--color-secondary" aria-hidden="true"></span>
            <code>cricon--color-secondary</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--arrow-right cricon--color-light" aria-hidden="true"></span>
            <code>cricon--color-light</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--arrow-right cricon--color-success" aria-hidden="true"></span>
            <code>cricon--color-success</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--arrow-right cricon--color-info" aria-hidden="true"></span>
            <code>cricon--color-info</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--arrow-right cricon--color-warning" aria-hidden="true"></span>
            <code>cricon--color-warning</code>
        </li>
    </ul>



Example: {type: isolated} Size variants

    <ul class="sg-icon-grid">
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--arrow-right" aria-hidden="true"></span>
            <code>Default (no extra css class needed - same as the size of the parent element)</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--arrow-right cricon--size-xxsmall" aria-hidden="true"></span>
            <code>cricon--size-xxsmall</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--arrow-right cricon--size-xsmall" aria-hidden="true"></span>
            <code>cricon--size-xsmall</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--arrow-right cricon--size-small" aria-hidden="true"></span>
            <code>cricon--size-small</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--arrow-right cricon--size-medium" aria-hidden="true"></span>
            <code>cricon--size-medium</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--arrow-right cricon--size-large" aria-hidden="true"></span>
            <code>cricon--size-large</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--arrow-right cricon--size-xlarge" aria-hidden="true"></span>
            <code>cricon--size-xlarge</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--arrow-right cricon--size-xxlarge" aria-hidden="true"></span>
            <code>cricon--size-xxlarge</code>
        </li>
        <li class="sg-icon-grid__item">
            <span class="cricon cricon--arrow-right cricon--size-xxxlarge" aria-hidden="true"></span>
            <code>cricon--size-xxxlarge</code>
        </li>
    </ul>


Example: Fixed width

    <p>Just like the size variants, just add <code>-fw</code> at the end</p>

    <br>
    <strong>xxsmall</strong>
    <div>
        <span class="cricon cricon--warning  cricon--size-xxsmall cricon--size-xxsmall-fw" style="background:MistyRose"></span>
        <code>cricon cricon--warning  cricon--size-xxsmall cricon--size-xxsmall-fw</code>
    </div>
    <div>
        <span class="cricon cricon--info  cricon--size-xxsmall cricon--size-xxsmall-fw" style="background:MistyRose"></span>
        <code>cricon cricon--info  cricon--size-xxsmall cricon--size-xxsmall-fw</code>
    </div>
    <div>
        <span class="cricon cricon--settings  cricon--size-xxsmall cricon--size-xxsmall-fw" style="background:MistyRose"></span>
        <code>cricon cricon--settings  cricon--size-xxsmall cricon--size-xxsmall-fw</code>
    </div>

    <br>
    <strong>xsmall</strong>
    <div>
        <span class="cricon cricon--warning  cricon--size-xxsmall cricon--size-xsmall-fw" style="background:MistyRose"></span>
        <code>cricon cricon--warning  cricon--size-xxsmall cricon--size-xsmall-fw</code>
    </div>
    <div>
        <span class="cricon cricon--info  cricon--size-xxsmall cricon--size-xsmall-fw" style="background:MistyRose"></span>
        <code>cricon cricon--info  cricon--size-xxsmall cricon--size-xsmall-fw</code>
    </div>
    <div>
        <span class="cricon cricon--settings  cricon--size-xxsmall cricon--size-xsmall-fw" style="background:MistyRose"></span>
        <code>cricon cricon--settings  cricon--size-xxsmall cricon--size-xsmall-fw</code>
    </div>

    <br>
    <strong>small</strong>
    <div>
        <span class="cricon cricon--warning cricon--size-small cricon--size-small-fw" style="background:MistyRose"></span>
        <code>cricon cricon--warning cricon--size-small cricon--size-small-fw</code>
    </div>
    <div>
        <span class="cricon cricon--info cricon--size-small cricon--size-small-fw" style="background:MistyRose"></span>
        <code>cricon cricon--info cricon--size-small cricon--size-small-fw</code>
    </div>
    <div>
        <span class="cricon cricon--settings cricon--size-small cricon--size-small-fw" style="background:MistyRose"></span>
        <code>cricon cricon--settings cricon--size-small cricon--size-small-fw</code>
    </div>

    <br>
    <strong>medium</strong>
    <div>
        <span class="cricon cricon--warning cricon--size-medium cricon--size-medium-fw" style="background:MistyRose"></span>
        <code>cricon cricon--warning cricon--size-medium cricon--size-medium-fw</code>
    </div>
    <div>
        <span class="cricon cricon--info cricon--size-medium cricon--size-medium-fw" style="background:MistyRose"></span>
        <code>cricon cricon--info cricon--size-medium cricon--size-medium-fw</code>
    </div>
    <div>
        <span class="cricon cricon--settings cricon--size-medium cricon--size-medium-fw" style="background:MistyRose"></span>
        <code>cricon cricon--settings cricon--size-medium cricon--size-medium-fw</code>
    </div>

    <br>
    <strong>large</strong>
    <div>
        <span class="cricon cricon--warning cricon--size-large cricon--size-large-fw" style="background:MistyRose"></span>
        <code>cricon cricon--warning cricon--size-large cricon--size-large-fw</code>
    </div>
    <div>
        <span class="cricon cricon--info cricon--size-large cricon--size-large-fw" style="background:MistyRose"></span>
        <code>cricon cricon--info cricon--size-large cricon--size-large-fw</code>
    </div>
    <div>
        <span class="cricon cricon--settings cricon--size-large cricon--size-large-fw" style="background:MistyRose"></span>
        <code>cricon cricon--settings cricon--size-large cricon--size-large-fw</code>
    </div>

    <br>
    <strong>xlarge</strong>
    <div>
        <span class="cricon cricon--warning cricon--size-xlarge cricon--size-xlarge-fw" style="background:MistyRose"></span>
        <code>cricon cricon--warning cricon--size-xlarge cricon--size-xlarge-fw</code>
    </div>
    <div>
        <span class="cricon cricon--info cricon--size-xlarge cricon--size-xlarge-fw" style="background:MistyRose"></span>
        <code>cricon cricon--info cricon--size-xlarge cricon--size-xlarge-fw</code>
    </div>
    <div>
        <span class="cricon cricon--settings cricon--size-xlarge cricon--size-xlarge-fw" style="background:MistyRose"></span>
        <code>cricon cricon--settings cricon--size-xlarge cricon--size-xlarge-fw</code>
    </div>

    <br>
    <strong>xxlarge</strong>
    <div>
        <span class="cricon cricon--warning cricon--size-xxlarge cricon--size-xxlarge-fw" style="background:MistyRose"></span>
        <code>cricon cricon--warning cricon--size-xxlarge cricon--size-xxlarge-fw</code>
    </div>
    <div>
        <span class="cricon cricon--info cricon--size-xxlarge cricon--size-xxlarge-fw" style="background:MistyRose"></span>
        <code>cricon cricon--info cricon--size-xxlarge cricon--size-xxlarge-fw</code>
    </div>
    <div>
        <span class="cricon cricon--settings cricon--size-xxlarge cricon--size-xxlarge-fw" style="background:MistyRose"></span>
        <code>cricon cricon--settings cricon--size-xxlarge cricon--size-xxlarge-fw</code>
    </div>

    <br>
    <strong>xxxlarge</strong>
    <div>
        <span class="cricon cricon--warning cricon--size-xxxlarge cricon--size-xxxlarge-fw" style="background:MistyRose"></span>
        <code>cricon cricon--warning cricon--size-xxxlarge cricon--size-xxxlarge-fw</code>
    </div>
    <div>
        <span class="cricon cricon--info cricon--size-xxxlarge cricon--size-xxxlarge-fw" style="background:MistyRose"></span>
        <code>cricon cricon--info cricon--size-xxxlarge cricon--size-xxxlarge-fw</code>
    </div>
    <div>
        <span class="cricon cricon--settings cricon--size-xxxlarge cricon--size-xxxlarge-fw" style="background:MistyRose"></span>
        <code>cricon cricon--settings cricon--size-xxxlarge cricon--size-xxxlarge-fw</code>
    </div>

Styleguide 4:cricon
*/
.cricon--plus:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 900;
  font-family: 'Font Awesome 5 Free';
  content: "\f067"; }

.cricon--minus:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 900;
  font-family: 'Font Awesome 5 Free';
  content: "\f068"; }

.cricon--edit:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 900;
  font-family: 'Font Awesome 5 Free';
  content: "\f044"; }

.cricon--pencil:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 900;
  font-family: 'Font Awesome 5 Free';
  content: "\f303"; }

.cricon--trash:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 900;
  font-family: 'Font Awesome 5 Free';
  content: "\f1f8"; }

.cricon--arrow-up:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 900;
  font-family: 'Font Awesome 5 Free';
  content: "\f062"; }

.cricon--arrow-down:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 900;
  font-family: 'Font Awesome 5 Free';
  content: "\f063"; }

.cricon--arrow-left:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 900;
  font-family: 'Font Awesome 5 Free';
  content: "\f060"; }

.cricon--arrow-right:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 900;
  font-family: 'Font Awesome 5 Free';
  content: "\f061"; }

.cricon--chevron-up:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 900;
  font-family: 'Font Awesome 5 Free';
  content: "\f077"; }

.cricon--chevron-down:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 900;
  font-family: 'Font Awesome 5 Free';
  content: "\f078"; }

.cricon--chevron-left:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 900;
  font-family: 'Font Awesome 5 Free';
  content: "\f053"; }

.cricon--chevron-right:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 900;
  font-family: 'Font Awesome 5 Free';
  content: "\f054"; }

.cricon--check:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 900;
  font-family: 'Font Awesome 5 Free';
  content: "\f00c"; }

.cricon--search:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 900;
  font-family: 'Font Awesome 5 Free';
  content: "\f002"; }

.cricon--close:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 900;
  font-family: 'Font Awesome 5 Free';
  content: "\f00d"; }

.cricon--user:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 900;
  font-family: 'Font Awesome 5 Free';
  content: "\f007"; }

.cricon--calendar:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 900;
  font-family: 'Font Awesome 5 Free';
  content: "\f133"; }

.cricon--calendar-grid:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 900;
  font-family: 'Font Awesome 5 Free';
  content: "\f073"; }

.cricon--clock:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 900;
  font-family: 'Font Awesome 5 Free';
  content: "\f017"; }

.cricon--flag:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 900;
  font-family: 'Font Awesome 5 Free';
  content: "\f024"; }

.cricon--ellipsis-horizontal:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 900;
  font-family: 'Font Awesome 5 Free';
  content: "\f141"; }

.cricon--download:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 900;
  font-family: 'Font Awesome 5 Free';
  content: "\f019"; }

.cricon--file:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 900;
  font-family: 'Font Awesome 5 Free';
  content: "\f15b"; }

.cricon--info:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 900;
  font-family: 'Font Awesome 5 Free';
  content: "\f129"; }

.cricon--help:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 900;
  font-family: 'Font Awesome 5 Free';
  content: "\f05a"; }

.cricon--warning:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 900;
  font-family: 'Font Awesome 5 Free';
  content: "\f071"; }

.cricon--settings:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 900;
  font-family: 'Font Awesome 5 Free';
  content: "\f013"; }

.cricon--bars:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 900;
  font-family: 'Font Awesome 5 Free';
  content: "\f0c9"; }

.cricon--external-link:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 900;
  font-family: 'Font Awesome 5 Free';
  content: "\f35d"; }

.cricon--podcast:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 900;
  font-family: 'Font Awesome 5 Free';
  content: "\f2ce"; }

.cricon--email:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 900;
  font-family: 'Font Awesome 5 Free';
  content: "\f0e0"; }

.cricon--phone:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 900;
  font-family: 'Font Awesome 5 Free';
  content: "\f095"; }

.cricon--map-marker:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 900;
  font-family: 'Font Awesome 5 Free';
  content: "\f3c5"; }

.cricon--location-arrow:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 900;
  font-family: 'Font Awesome 5 Free';
  content: "\f124"; }

.cricon--list-ul:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 900;
  font-family: 'Font Awesome 5 Free';
  content: "\f0ca"; }

.cricon--list-ol:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 900;
  font-family: 'Font Awesome 5 Free';
  content: "\f0cb"; }

.cricon--bold:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 900;
  font-family: 'Font Awesome 5 Free';
  content: "\f032"; }

.cricon--italic:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 900;
  font-family: 'Font Awesome 5 Free';
  content: "\f033"; }

.cricon--image:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 900;
  font-family: 'Font Awesome 5 Free';
  content: "\f03e"; }

.cricon--video:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 900;
  font-family: 'Font Awesome 5 Free';
  content: "\f03d"; }

.cricon--text:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 900;
  font-family: 'Font Awesome 5 Free';
  content: "\f1dd"; }

.cricon--facebook:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 900;
  font-family: 'Font Awesome 5 Brands';
  content: "\f082"; }

.cricon--twitter:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 900;
  font-family: 'Font Awesome 5 Brands';
  content: "\f099"; }

.cricon--instagram:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 900;
  font-family: 'Font Awesome 5 Brands';
  content: "\f16d"; }

.cricon--youtube:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 900;
  font-family: 'Font Awesome 5 Brands';
  content: "\f167"; }

.cricon--snapchat:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 900;
  font-family: 'Font Awesome 5 Brands';
  content: "\f2ac"; }

.cricon--shopping-cart:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 900;
  font-family: 'Font Awesome 5 Free';
  content: "\f07a"; }

.cricon--comment:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 900;
  font-family: 'Font Awesome 5 Free';
  content: "\f075"; }

.cricon--comments:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 900;
  font-family: 'Font Awesome 5 Free';
  content: "\f086"; }

.cricon--cut:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 900;
  font-family: 'Font Awesome 5 Free';
  content: "\f0c4"; }

.cricon--copy:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 900;
  font-family: 'Font Awesome 5 Free';
  content: "\f0c5"; }

.cricon--paste:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 900;
  font-family: 'Font Awesome 5 Free';
  content: "\f0ea"; }

.cricon--hidden {
  visibility: hidden; }

.cricon--color-primary:before {
  color: #E01220; }

.cricon--color-secondary:before {
  color: #40AAB8; }

.cricon--color-success:before {
  color: #007f1e; }

.cricon--color-info:before {
  color: #ffce00; }

.cricon--color-warning:before {
  color: #E01220; }

.cricon--color-light:before {
  color: #fff; }

.cricon--size-xxsmall:before {
  font-size: 12px; }
  @media screen and (min-width: 720px) {
    .cricon--size-xxsmall:before {
      font-size: 13px; } }

.cricon--size-xxsmall-fw:before {
  width: 15.6px; }
  @media (min-width: 720px) {
    .cricon--size-xxsmall-fw:before {
      width: 16.9px; } }

.cricon--size-xsmall:before {
  font-size: 15px; }
  @media screen and (min-width: 720px) {
    .cricon--size-xsmall:before {
      font-size: 16px; } }

.cricon--size-xsmall-fw:before {
  width: 19.5px; }
  @media (min-width: 720px) {
    .cricon--size-xsmall-fw:before {
      width: 20.8px; } }

.cricon--size-small:before {
  font-size: 16px; }
  @media screen and (min-width: 440px) {
    .cricon--size-small:before {
      font-size: 19px; } }

.cricon--size-small-fw:before {
  width: 20.8px; }
  @media (min-width: 440px) {
    .cricon--size-small-fw:before {
      width: 24.7px; } }

.cricon--size-medium:before {
  font-size: 22px; }
  @media screen and (min-width: 720px) {
    .cricon--size-medium:before {
      font-size: 24px; } }

.cricon--size-medium-fw:before {
  width: 28.6px; }
  @media (min-width: 720px) {
    .cricon--size-medium-fw:before {
      width: 31.2px; } }

.cricon--size-large:before {
  font-size: 19px; }
  @media screen and (min-width: 440px) {
    .cricon--size-large:before {
      font-size: 23px; } }

.cricon--size-large-fw:before {
  width: 24.7px; }
  @media (min-width: 440px) {
    .cricon--size-large-fw:before {
      width: 29.9px; } }

.cricon--size-xlarge:before {
  font-size: 21px; }
  @media screen and (min-width: 440px) {
    .cricon--size-xlarge:before {
      font-size: 26px; } }
  @media screen and (min-width: 720px) {
    .cricon--size-xlarge:before {
      font-size: 27px; } }

.cricon--size-xlarge-fw:before {
  width: 27.3px; }
  @media (min-width: 440px) {
    .cricon--size-xlarge-fw:before {
      width: 33.8px; } }
  @media (min-width: 720px) {
    .cricon--size-xlarge-fw:before {
      width: 35.1px; } }

.cricon--size-xxlarge:before {
  font-size: 28px; }
  @media screen and (min-width: 440px) {
    .cricon--size-xxlarge:before {
      font-size: 36px; } }
  @media screen and (min-width: 720px) {
    .cricon--size-xxlarge:before {
      font-size: 40px; } }

.cricon--size-xxlarge-fw:before {
  width: 36.4px; }
  @media (min-width: 440px) {
    .cricon--size-xxlarge-fw:before {
      width: 46.8px; } }
  @media (min-width: 720px) {
    .cricon--size-xxlarge-fw:before {
      width: 52px; } }

.cricon--size-xxxlarge:before {
  font-size: 32px; }
  @media screen and (min-width: 440px) {
    .cricon--size-xxxlarge:before {
      font-size: 38px; } }
  @media screen and (min-width: 720px) {
    .cricon--size-xxxlarge:before {
      font-size: 49px; } }

.cricon--size-xxxlarge-fw:before {
  width: 41.6px; }
  @media (min-width: 440px) {
    .cricon--size-xxxlarge-fw:before {
      width: 49.4px; } }
  @media (min-width: 720px) {
    .cricon--size-xxxlarge-fw:before {
      width: 63.7px; } }

/* Fieldset and legend

Fieldset and legends is a bitch. For that reason we have to have a little
hacky code to fix them...

Example: Fieldset and Legend
    <fieldset class="fieldset">
        <legend class="legend">I'm a legend</legend>
    </fieldset>

Example: Extra spacing below the fieldset
    <fieldset class="fieldset  fieldset--spaced">
        <legend class="legend">I'm a legend</legend>
    </fieldset>
    This extra spacing is normally not needed because the fieldset
    will contain "fieldwrapper" or "label  label--standalone" elements
    that provide the spacing.

Styleguide form.8:fieldset
*/
.fieldset {
  padding: 28px 24px 14px;
  margin-bottom: 14px;
  border-radius: 5px;
  background-color: #fff; }
  .fieldset--subtle {
    margin-bottom: 0;
    padding: 0;
    border-radius: 0;
    background-color: transparent; }
  .fieldset--spaced {
    margin-bottom: 28px; }
  .fieldset:not(.fieldset--subtle) .legend {
    font-family: "Noe Text", Helvetica, sans-serif;
    font-weight: bold;
    font-size: 19px;
    line-height: 28px;
    width: 100%;
    float: left;
    margin-bottom: 28px; }
    @media screen and (min-width: 440px) {
      .fieldset:not(.fieldset--subtle) .legend {
        font-size: 23px;
        line-height: 28px; } }
    .fieldset:not(.fieldset--subtle) .legend + .fieldwrapper {
      margin-top: 56px; }

.legend {
  margin-bottom: 7px; }

/* Label

Add the class `.label` to style labels.

NOTE: You can wrap labels around inputs. It saves markup and make it more intuitive to read code :)

Example:
    <label class="label">
        I'm a label!
    </label>

Example: --inline
    <p>Look, <label class="label  label--inline">I'm a inline label</label>!!!</p>

Example: --spaced
    <label class="label  label--spaced">
        I have more spacing below me. The same spacing as a .fieldwrapper.
    </label>

Example: --primary
    <label class="label label--primary">
        I'm a label with the --primary style!
    </label>

Example: --strong
    <label class="label label--strong">
        I'm a label with the --strong style!
    </label>


Example: With input within the label

    <label class="label">
        Name
        <input class='input' type='text'/>
    </label>

Example: With input outside the label

    <label class="label" for='id_labelexample'>
        Name
    </label>
    <input class='input' type='text' id='id_labelexample'/>
Styleguide form.2:label
*/
.label {
  display: block;
  margin-bottom: 6px; }
  .label--inline {
    display: inline;
    margin: 0; }
  .label--spaced {
    margin-bottom: 28px; }
    .label--spaced .input, .label--spaced .dateinput__input, .label--spaced .inline-action__input, .label--spaced .newsletter__input, .label--spaced .ap-search__input, .label--spaced .find-local__input {
      margin-bottom: 0; }
  .label--strong {
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold; }
  .label--primary {
    color: #E01220; }
  .label--small {
    font-size: 15px;
    line-height: 21px; }
    @media screen and (min-width: 720px) {
      .label--small {
        font-size: 16px;
        line-height: 21px; } }
  .label--muted {
    color: #686969; }

/*
Buttons

In most cases you should not use the button class for links. Use either `<button>` or `<input type="submit" />`
when using buttons. <strong>Never</strong> use `<span>`, `<div>` or elements without a semantic meaning as buttons.

Example: The default button
    <button type="button" class="button">Button</button>
    <button type="button" class="button  button--fill">Button</button>

Example: For primary actions, use this only to separate from other actions.
    <button type="button" class="button  button--primary">Button</button>
    <button type="button" class="button  button--primary-fill">Button</button>

Example: For secondary actions, don't overuse.
    <button type="button" class="button  button--secondary">Button</button>
    <button type="button" class="button  button--secondary-fill">Button</button>

Example: For actions that need's to stand out on red or dark blue background.
    <button type="button" class="button  button--light">Button</button>
    <button type="button" class="button  button--light-fill">Button</button>

Example: Button with icon
    <button type="button" class="button">
        <span class="cricon cricon--chevron-right" aria-hidden="true"></span>
        Go forward!
    </button>

Example: Button styled as an input field
    <button type="button" class="button button--block button--input button--form-size-default">
        I am a button--input
    </button>
    <input type="text" class="input" value="I am an input!">
    <button type="button" class="button button--block button--input-outlined button--form-size-default">
        I am a button--input-outlined!
    </button>
    <input type="text" class="input input--outlined" value="I am an input--outlined!">

Example: This is some modifiers you can add (PS: Can be combined)
    <button type="button" class="button  button--block">
        Make it 100% width of whatever container
    </button>
    <button type="button" class="button  button--compact">Compact button</button>
    <br>
    <button type="button" class="button  button--wider">Wider button</button>
    <br>
    <button type="button" class="button  button--spaced">Spaced button</button>
    <br>
    <button type="button" class="button" disabled>Disabled button</button>

Example: Optimized for used along with form elements

    <p>
        <input type="text" class="input input--inline input--outlined input--size-xsmall">
        <button type="button" class="button button--form-size-xsmall">--form-size-xsmall</button>
    </p>
    <p>
        <input type="text" class="input input--inline input--outlined input--size-small">
        <button type="button" class="button button--form-size-small">--form-size-small</button>
    </p>
    <p>
        <input type="text" class="input input--inline input--outlined">
        <button type="button" class="button button--form-size-default">--form-size-default</button>
    </p>
    <p>
        <input type="text" class="input input--inline input--outlined input--size-large">
        <button type="button" class="button button--form-size-large">--form-size-large</button>
    </p>

Styleguide form.2:buttons
*/
.button, .blocklist__movebutton, .blocklist-header__action, .inline-action__action, .split__more, .care-question__button, .get-involved__button:not(.get-involved__button--donate), .get-involved__button--donate, .ievv-designer-containeredit__barbutton, .ievv-designer-containeredit__addbutton, .ievv-designer-containeredit--expanded .ievv-designer-containeredit__barbutton--toggle, .ievv-editbar__action {
  font-family: "Maison Neue", Helvetica, sans-serif;
  font-weight: bold;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: "Maison Neue", Helvetica, sans-serif;
  font-weight: bold;
  font-size: 15px;
  line-height: 21px;
  font-style: normal;
  text-align: center;
  position: relative;
  display: block;
  width: 100%;
  padding: 6px 12px;
  border-radius: 5px;
  color: #2f2c2f;
  white-space: normal;
  border: 3px solid #828383;
  background-color: transparent;
  margin-bottom: 6px; }
  @media screen and (min-width: 720px) {
    .button, .blocklist__movebutton, .blocklist-header__action, .inline-action__action, .split__more, .care-question__button, .get-involved__button:not(.get-involved__button--donate), .get-involved__button--donate, .ievv-designer-containeredit__barbutton, .ievv-designer-containeredit__addbutton, .ievv-designer-containeredit--expanded .ievv-designer-containeredit__barbutton--toggle, .ievv-editbar__action {
      font-size: 16px;
      line-height: 21px; } }
  @media (min-width: 720px) {
    .button, .blocklist__movebutton, .blocklist-header__action, .inline-action__action, .split__more, .care-question__button, .get-involved__button:not(.get-involved__button--donate), .get-involved__button--donate, .ievv-designer-containeredit__barbutton, .ievv-designer-containeredit__addbutton, .ievv-designer-containeredit--expanded .ievv-designer-containeredit__barbutton--toggle, .ievv-editbar__action {
      display: inline-block;
      white-space: nowrap;
      width: auto;
      padding: 9px 39px; } }
  .button[disabled], [disabled].blocklist__movebutton, [disabled].blocklist-header__action, [disabled].inline-action__action, [disabled].split__more, [disabled].care-question__button, [disabled].get-involved__button:not(.get-involved__button--donate), [disabled].get-involved__button--donate, [disabled].ievv-designer-containeredit__barbutton, [disabled].ievv-designer-containeredit__addbutton, .ievv-designer-containeredit--expanded [disabled].ievv-designer-containeredit__barbutton--toggle, [disabled].ievv-editbar__action {
    pointer-events: none;
    opacity: 0.4; }
  .button:hover, .blocklist__movebutton:hover, .blocklist-header__action:hover, .inline-action__action:hover, .split__more:hover, .care-question__button:hover, .get-involved__button:hover:not(.get-involved__button--donate), .get-involved__button--donate:hover, .ievv-designer-containeredit__barbutton:hover, .ievv-designer-containeredit__addbutton:hover, .ievv-designer-containeredit--expanded .ievv-designer-containeredit__barbutton--toggle:hover, .ievv-editbar__action:hover, .button:focus, .blocklist__movebutton:focus, .blocklist-header__action:focus, .inline-action__action:focus, .split__more:focus, .care-question__button:focus, .get-involved__button:focus:not(.get-involved__button--donate), .get-involved__button--donate:focus, .ievv-designer-containeredit__barbutton:focus, .ievv-designer-containeredit__addbutton:focus, .ievv-designer-containeredit--expanded .ievv-designer-containeredit__barbutton--toggle:focus, .ievv-editbar__action:focus, .button:active, .blocklist__movebutton:active, .blocklist-header__action:active, .inline-action__action:active, .split__more:active, .care-question__button:active, .get-involved__button:active:not(.get-involved__button--donate), .get-involved__button--donate:active, .ievv-designer-containeredit__barbutton:active, .ievv-designer-containeredit__addbutton:active, .ievv-designer-containeredit--expanded .ievv-designer-containeredit__barbutton--toggle:active, .ievv-editbar__action:active {
    color: #fff;
    border-color: #828383;
    background-color: #828383; }
    .button:hover .button__icon--non-hover, .blocklist__movebutton:hover .button__icon--non-hover, .blocklist-header__action:hover .button__icon--non-hover, .inline-action__action:hover .button__icon--non-hover, .split__more:hover .button__icon--non-hover, .care-question__button:hover .button__icon--non-hover, .get-involved__button:hover:not(.get-involved__button--donate) .button__icon--non-hover, .get-involved__button--donate:hover .button__icon--non-hover, .ievv-designer-containeredit__barbutton:hover .button__icon--non-hover, .ievv-designer-containeredit__addbutton:hover .button__icon--non-hover, .ievv-designer-containeredit--expanded .ievv-designer-containeredit__barbutton--toggle:hover .button__icon--non-hover, .ievv-editbar__action:hover .button__icon--non-hover, .button:focus .button__icon--non-hover, .blocklist__movebutton:focus .button__icon--non-hover, .blocklist-header__action:focus .button__icon--non-hover, .inline-action__action:focus .button__icon--non-hover, .split__more:focus .button__icon--non-hover, .care-question__button:focus .button__icon--non-hover, .get-involved__button:focus:not(.get-involved__button--donate) .button__icon--non-hover, .get-involved__button--donate:focus .button__icon--non-hover, .ievv-designer-containeredit__barbutton:focus .button__icon--non-hover, .ievv-designer-containeredit__addbutton:focus .button__icon--non-hover, .ievv-designer-containeredit--expanded .ievv-designer-containeredit__barbutton--toggle:focus .button__icon--non-hover, .ievv-editbar__action:focus .button__icon--non-hover, .button:active .button__icon--non-hover, .blocklist__movebutton:active .button__icon--non-hover, .blocklist-header__action:active .button__icon--non-hover, .inline-action__action:active .button__icon--non-hover, .split__more:active .button__icon--non-hover, .care-question__button:active .button__icon--non-hover, .get-involved__button:active:not(.get-involved__button--donate) .button__icon--non-hover, .get-involved__button--donate:active .button__icon--non-hover, .ievv-designer-containeredit__barbutton:active .button__icon--non-hover, .ievv-designer-containeredit__addbutton:active .button__icon--non-hover, .ievv-designer-containeredit--expanded .ievv-designer-containeredit__barbutton--toggle:active .button__icon--non-hover, .ievv-editbar__action:active .button__icon--non-hover {
      display: none; }
    .button:hover .button__icon--hover, .blocklist__movebutton:hover .button__icon--hover, .blocklist-header__action:hover .button__icon--hover, .inline-action__action:hover .button__icon--hover, .split__more:hover .button__icon--hover, .care-question__button:hover .button__icon--hover, .get-involved__button:hover:not(.get-involved__button--donate) .button__icon--hover, .get-involved__button--donate:hover .button__icon--hover, .ievv-designer-containeredit__barbutton:hover .button__icon--hover, .ievv-designer-containeredit__addbutton:hover .button__icon--hover, .ievv-designer-containeredit--expanded .ievv-designer-containeredit__barbutton--toggle:hover .button__icon--hover, .ievv-editbar__action:hover .button__icon--hover, .button:focus .button__icon--hover, .blocklist__movebutton:focus .button__icon--hover, .blocklist-header__action:focus .button__icon--hover, .inline-action__action:focus .button__icon--hover, .split__more:focus .button__icon--hover, .care-question__button:focus .button__icon--hover, .get-involved__button:focus:not(.get-involved__button--donate) .button__icon--hover, .get-involved__button--donate:focus .button__icon--hover, .ievv-designer-containeredit__barbutton:focus .button__icon--hover, .ievv-designer-containeredit__addbutton:focus .button__icon--hover, .ievv-designer-containeredit--expanded .ievv-designer-containeredit__barbutton--toggle:focus .button__icon--hover, .ievv-editbar__action:focus .button__icon--hover, .button:active .button__icon--hover, .blocklist__movebutton:active .button__icon--hover, .blocklist-header__action:active .button__icon--hover, .inline-action__action:active .button__icon--hover, .split__more:active .button__icon--hover, .care-question__button:active .button__icon--hover, .get-involved__button:active:not(.get-involved__button--donate) .button__icon--hover, .get-involved__button--donate:active .button__icon--hover, .ievv-designer-containeredit__barbutton:active .button__icon--hover, .ievv-designer-containeredit__addbutton:active .button__icon--hover, .ievv-designer-containeredit--expanded .ievv-designer-containeredit__barbutton--toggle:active .button__icon--hover, .ievv-editbar__action:active .button__icon--hover {
      display: inline-block; }
  .button:focus, .blocklist__movebutton:focus, .blocklist-header__action:focus, .inline-action__action:focus, .split__more:focus, .care-question__button:focus, .get-involved__button:focus:not(.get-involved__button--donate), .get-involved__button--donate:focus, .ievv-designer-containeredit__barbutton:focus, .ievv-designer-containeredit__addbutton:focus, .ievv-designer-containeredit--expanded .ievv-designer-containeredit__barbutton--toggle:focus, .ievv-editbar__action:focus {
    z-index: 2; }
  .button__icon {
    position: relative;
    vertical-align: middle;
    top: -2px;
    margin-right: 6px; }
    .button__icon--non-hover {
      display: inline-block; }
    .button__icon--hover {
      display: none; }
    .button__icon--first {
      margin-left: -6px; }
  .button--fill, .ievv-buttonbar__button--fill {
    color: #fff;
    border-color: #828383;
    background-color: #828383; }
    .button--fill:hover, .ievv-buttonbar__button--fill:hover, .button--fill:focus, .ievv-buttonbar__button--fill:focus, .button--fill:active, .ievv-buttonbar__button--fill:active {
      color: #2f2c2f;
      border-color: #828383;
      background-color: transparent; }
  .button--primary, .inline-action__action, .split__more, .care-question__button--main, .get-involved--light .get-involved__button:not(.get-involved__button--donate) {
    color: #E01220;
    border-color: #E01220;
    background-color: transparent; }
    .button--primary:hover, .inline-action__action:hover, .split__more:hover, .care-question__button--main:hover, .get-involved--light .get-involved__button:hover:not(.get-involved__button--donate), .button--primary:focus, .inline-action__action:focus, .split__more:focus, .care-question__button--main:focus, .get-involved--light .get-involved__button:focus:not(.get-involved__button--donate), .button--primary:active, .inline-action__action:active, .split__more:active, .care-question__button--main:active, .get-involved--light .get-involved__button:active:not(.get-involved__button--donate) {
      border-color: #ce111d;
      background-color: #ce111d;
      color: #fff; }
  .button--primary-fill, .get-involved__button--donate, .get-involved--light .get-involved__button--donate {
    border-color: #ce111d;
    background-color: #ce111d;
    color: #fff; }
    .button--primary-fill:hover, .get-involved__button--donate:hover, .button--primary-fill:focus, .get-involved__button--donate:focus, .button--primary-fill:active, .get-involved__button--donate:active {
      color: #E01220;
      border-color: #ce111d;
      background-color: transparent; }
  .button--secondary, .blocklist-header__action, .ievv-designer-containeredit__barbutton--toggle {
    color: #002B49;
    border-color: #002B49;
    background-color: transparent; }
    .button--secondary:hover, .blocklist-header__action:hover, .ievv-designer-containeredit__barbutton--toggle:hover, .button--secondary:focus, .blocklist-header__action:focus, .ievv-designer-containeredit__barbutton--toggle:focus, .button--secondary:active, .blocklist-header__action:active, .ievv-designer-containeredit__barbutton--toggle:active {
      border-color: #002B49;
      background-color: #002B49;
      color: #fff; }
  .button--secondary-fill, .blocklist__movebutton, .care-question__button:not(.care-question__button--main), .ievv-designer-containeredit--expanded .ievv-designer-containeredit__barbutton--toggle {
    border-color: #002B49;
    background-color: #002B49;
    color: #fff; }
    .button--secondary-fill:hover, .blocklist__movebutton:hover, .care-question__button:hover:not(.care-question__button--main), .ievv-designer-containeredit--expanded .ievv-designer-containeredit__barbutton--toggle:hover, .button--secondary-fill:focus, .blocklist__movebutton:focus, .care-question__button:focus:not(.care-question__button--main), .ievv-designer-containeredit--expanded .ievv-designer-containeredit__barbutton--toggle:focus, .button--secondary-fill:active, .blocklist__movebutton:active, .care-question__button:active:not(.care-question__button--main), .ievv-designer-containeredit--expanded .ievv-designer-containeredit__barbutton--toggle:active {
      color: #002B49;
      border-color: #002B49;
      background-color: transparent; }
  .button--light, .inline-action--light .inline-action__action, .get-involved__button:not(.get-involved__button--donate), .ievv-designer-containeredit__addbutton {
    color: #fff;
    border-color: #fff;
    background-color: transparent; }
    .button--light:hover, .inline-action--light .inline-action__action:hover, .get-involved__button:hover:not(.get-involved__button--donate), .ievv-designer-containeredit__addbutton:hover, .button--light:focus, .inline-action--light .inline-action__action:focus, .get-involved__button:focus:not(.get-involved__button--donate), .ievv-designer-containeredit__addbutton:focus, .button--light:active, .inline-action--light .inline-action__action:active, .get-involved__button:active:not(.get-involved__button--donate), .ievv-designer-containeredit__addbutton:active {
      border-color: #fff;
      background-color: #fff;
      color: #E01220; }
  .button--light-fill, .inline-action--search .inline-action__action {
    border-color: #fff;
    background-color: #fff;
    color: #E01220; }
    .button--light-fill:hover, .inline-action--search .inline-action__action:hover, .button--light-fill:focus, .inline-action--search .inline-action__action:focus, .button--light-fill:active, .inline-action--search .inline-action__action:active {
      color: #fff;
      border-color: #fff;
      background-color: transparent; }
  .button--input {
    color: #2f2c2f;
    border-color: #fff;
    background-color: #fff;
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: normal;
    font-size: 16px;
    line-height: 21px;
    text-align: left;
    letter-spacing: normal;
    text-transform: none;
    padding: 9px 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
    .button--input:hover, .button--input:focus, .button--input:active {
      border-color: #fff;
      background-color: #fff;
      border-color: #002B49;
      color: #2f2c2f; }
    @media screen and (min-width: 440px) {
      .button--input {
        font-size: 19px;
        line-height: 28px; } }
  .button--input-outlined {
    color: #2f2c2f;
    border-color: #eeeeef;
    background-color: #fff;
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: normal;
    font-size: 16px;
    line-height: 21px;
    text-align: left;
    letter-spacing: normal;
    text-transform: none;
    padding: 9px 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
    .button--input-outlined:hover, .button--input-outlined:focus, .button--input-outlined:active {
      border-color: #fff;
      background-color: #fff;
      border-color: #002B49;
      color: #2f2c2f; }
    @media screen and (min-width: 440px) {
      .button--input-outlined {
        font-size: 19px;
        line-height: 28px; } }
  .button--wider, .care-question__button {
    min-width: 180px; }
  @media (min-width: 720px) {
    .button--spaced, .care-question__button--main {
      margin-left: 12px;
      margin-right: 12px; } }
  .button--block, .get-involved__button--donate, .login__container .button, .login__container .blocklist__movebutton, .login__container .blocklist-header__action, .login__container .inline-action__action, .login__container .split__more, .login__container .care-question__button, .login__container .get-involved__button:not(.get-involved__button--donate), .login__container .get-involved__button--donate, .login__container .ievv-designer-containeredit__barbutton, .login__container .ievv-designer-containeredit__addbutton, .login__container .ievv-designer-containeredit--expanded .ievv-designer-containeredit__barbutton--toggle, .ievv-designer-containeredit--expanded .login__container .ievv-designer-containeredit__barbutton--toggle, .login__container .ievv-editbar__action {
    display: block;
    width: 100%; }
  .button--compact, .blocklist-header__action, .split__more, .ievv-designer-containeredit__barbutton, .ievv-designer-containeredit--expanded .ievv-designer-containeredit__barbutton--toggle, .ievv-editbar__action {
    font-size: 15px;
    line-height: 21px;
    padding: 6px 12px; }
    @media screen and (min-width: 720px) {
      .button--compact, .blocklist-header__action, .split__more, .ievv-designer-containeredit__barbutton, .ievv-designer-containeredit--expanded .ievv-designer-containeredit__barbutton--toggle, .ievv-editbar__action {
        font-size: 16px;
        line-height: 21px; } }
  @media print {
    .button--hidden-in-print {
      display: none; } }
  .button--form-size-xsmall {
    font-size: 12px;
    padding-left: 12px;
    padding-right: 12px;
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.2;
    height: 42px; }
    @media screen and (min-width: 720px) {
      .button--form-size-xsmall {
        font-size: 13px; } }
    @media screen and (min-width: 440px) {
      .button--form-size-xsmall {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 42px; } }
    @media screen and (min-width: 720px) {
      .button--form-size-xsmall {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 42px; } }
    @media screen and (min-width: 960px) {
      .button--form-size-xsmall {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 42px; } }
    @media screen and (min-width: 1240px) {
      .button--form-size-xsmall {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 42px; } }
  .button--form-size-small {
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.2;
    height: 48px;
    padding-left: 12px;
    padding-right: 12px; }
    @media screen and (min-width: 440px) {
      .button--form-size-small {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 48px; } }
    @media screen and (min-width: 720px) {
      .button--form-size-small {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 48px; } }
    @media screen and (min-width: 960px) {
      .button--form-size-small {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 48px; } }
    @media screen and (min-width: 1240px) {
      .button--form-size-small {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 48px; } }
  .button--form-size-default {
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.2;
    height: 52px; }
    @media screen and (min-width: 440px) {
      .button--form-size-default {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 52px; } }
    @media screen and (min-width: 720px) {
      .button--form-size-default {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 56px; } }
    @media screen and (min-width: 960px) {
      .button--form-size-default {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 56px; } }
    @media screen and (min-width: 1240px) {
      .button--form-size-default {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 56px; } }
  .button--form-size-large {
    font-size: 16px;
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.2;
    height: 62px; }
    @media screen and (min-width: 440px) {
      .button--form-size-large {
        font-size: 19px; } }
    @media screen and (min-width: 440px) {
      .button--form-size-large {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 62px; } }
    @media screen and (min-width: 720px) {
      .button--form-size-large {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 70px; } }
    @media screen and (min-width: 960px) {
      .button--form-size-large {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 70px; } }
    @media screen and (min-width: 1240px) {
      .button--form-size-large {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 70px; } }

/* Anonymous buttons

Example:

    <button type="button" class="anonymous-button">An anonymous button</button>

Example: Best suited for icons, not for text

    <button type="button" class="anonymous-button" title="Edit">
        <span class="cricon cricon--edit" aria-hidden="true"></span>
    </button>

Example: Works with links too

    <a href="#" class="anonymous-button" title="Edit">
        <span class="cricon cricon--edit" aria-hidden="true"></span>
    </a>

Example: Color variants

    <p>
        <button type="button" class="anonymous-button" title="Edit">
            <span class="cricon cricon--edit" aria-hidden="true"></span>
        </button> (default)
    </p>

    <p>
        <button type="button" class="anonymous-button anonymous-button--primary" title="Edit">
            <span class="cricon cricon--edit" aria-hidden="true"></span>
        </button> --primary
    </p>

    <p>
        <button type="button" class="anonymous-button anonymous-button--secondary" title="Edit">
            <span class="cricon cricon--edit" aria-hidden="true"></span>
        </button> --secondary
    </p>

    <p>
        <button type="button" class="anonymous-button anonymous-button--warning" title="Edit">
            <span class="cricon cricon--edit" aria-hidden="true"></span>
        </button> --warning
    </p>

    <p>
        <button type="button" class="anonymous-button anonymous-button--success" title="Edit">
            <span class="cricon cricon--edit" aria-hidden="true"></span>
        </button> --success
    </p>

Example: Multiple on one line using anonymous-button-list class

    Some cool buttons:
    <p class="anonymous-button-list">
        <button type="button" class="anonymous-button anonymous-button-list__item" title="Edit">
            <span class="cricon cricon--edit" aria-hidden="true"></span>
        </button>
        <button type="button" class="anonymous-button anonymous-button-list__item" title="Download">
            <span class="cricon cricon--download" aria-hidden="true"></span>
        </button>
        <button type="button" class="anonymous-button anonymous-button-list__item" title="Open in new tab">
            <span class="cricon cricon--external-link" aria-hidden="true"></span>
        </button>
    </p>

    Some more spaced buttons:
    <p class="anonymous-button-list">
        <button type="button" class="anonymous-button anonymous-button--spaced anonymous-button-list__item" title="Edit">
            <span class="cricon cricon--edit" aria-hidden="true"></span>
        </button>
        <button type="button" class="anonymous-button anonymous-button--spaced anonymous-button-list__item" title="Download">
            <span class="cricon cricon--download" aria-hidden="true"></span>
        </button>
        <button type="button" class="anonymous-button anonymous-button--spaced anonymous-button-list__item" title="Open in new tab">
            <span class="cricon cricon--external-link" aria-hidden="true"></span>
        </button>
    </p>

Styleguide form.buttons.anonymous
*/
.anonymous-button {
  margin-bottom: 6px;
  margin-left: 6px;
  margin-right: 6px;
  color: #2f2c2f;
  border: none;
  padding: 0; }
  .anonymous-button:focus, .anonymous-button:hover {
    color: #ce111d;
    border: none; }
  .anonymous-button--spaced {
    margin-bottom: 12px;
    margin-left: 12px;
    margin-right: 12px; }
  .anonymous-button--primary {
    color: #E01220; }
    .anonymous-button--primary:hover {
      color: #ce111d; }
  .anonymous-button--secondary {
    color: #40AAB8; }
    .anonymous-button--secondary:hover {
      color: #002B49; }
  .anonymous-button--warning {
    color: #E01220; }
    .anonymous-button--warning:hover {
      color: #b30e1a; }
  .anonymous-button--success {
    color: #007f1e; }
    .anonymous-button--success:hover {
      color: #006618; }

.anonymous-button-list__item:first-child {
  margin-left: 0; }

.anonymous-button-list__item:last-child {
  margin-right: 0; }

/*
Inputs

Use the class `.input` to add styling to input fields

Example: Standard input
    <label class="label">
        Standard input
        <input type="text" placeholder="I set the standard" class="input" />
    </label>

Example: Date input
    <label class="label">
        Standard input
        <input type="date" placeholder="I set the standard" class="input" value="2019-12-24" />
    </label>

Example: Error input
    <label class="label">
        I'm a error input!
        <input type="text" placeholder="Omg!" class="input  input--error" />
    </label>

Example: Inline input
    <label class="label">
        Look,
        <input class="input  input--inline" type="text" placeholder="I'm inline!!" />
        Wuut?
    </label>

Example: Outlined input
    <label class="label">
        Outlined input
        <input type="text" placeholder="Look at ma' outlines" class="input  input--outlined" />
    </label>

Example: Underlined input - do not combine with size adjusting variants!
    <label class="label">
        Underlined input
        <input type="text" placeholder="Look at ma' underlines" class="input  input--underlined" />
    </label>

Example: Underlined input inline - do not combine with size adjusting variants!

    And here we have an <label class="label label--inline">
        inline input
        <input type="text" placeholder="Look at ma' underlines" class="input  input--inline  input--underlined" />
    </label>

Example: Input width adjustments
    <label class="label">
        --width-xxsmall
        <input type="text" placeholder="I'm xxsmall!" class="input input--width-xxsmall" />
    </label>
    <label class="label">
        --width-xsmall
        <input type="text" placeholder="I'm xsmall!" class="input input--width-xsmall" />
    </label>
    <label class="label">
        --width-small
        <input type="text" placeholder="I'm small!" class="input input--width-small" />
    </label>

Example: Input size adjustments
    <label class="label">
        --size-xsmall
        <input type="text" placeholder="I'm xsmall!" class="input input--size-xsmall" />
    </label>
    <label class="label">
        --size-small
        <input type="text" placeholder="I'm small!" class="input input--size-small" />
    </label>
    <label class="label">
        Default size
        <input type="text" placeholder="I'm default sized!" class="input" />
    </label>
    <label class="label">
        --size-large
        <input type="text" placeholder="I'm large!" class="input input--size-large" />
    </label>

Example: Combining width adjustments and size adjustments
    <label class="label">
        Time:
        <input type="text" placeholder="Hour" class="input input--inline input--width-xxsmall input--size-small" />
        :
        <input type="text" placeholder="Minute" class="input input--inline input--width-xxsmall input--size-small" />
    </label>

Example: Standard textarea
    <label class="label">
        I'm a textarea
        <textarea placeholder="I more got space!" class="input"></textarea>
    </label>

Example: Textarea with error
    <label class="label">
        I'm a textarea with error!
        <textarea placeholder="Why? :'('" class="input  input--error"></textarea>
    </label>

Example: Textarea with outlines
    <label class="label">
        I got the outlines!
        <textarea placeholder="Look, outlines!" class="input  input--outlined"></textarea>
    </label>

Styleguide form.3:input
*/
.input, .dateinput__input, .inline-action__input, .newsletter__input, .ap-search__input, .find-local__input {
  font-family: "Maison Neue", Helvetica, sans-serif;
  font-weight: normal;
  font-size: 16px;
  display: block;
  width: 100%;
  padding: 9px 15px;
  color: #2f2c2f;
  border-radius: 5px;
  border: 3px solid #fff;
  background-color: #fff;
  margin-bottom: 6px;
  outline: none; }
  @media screen and (min-width: 440px) {
    .input, .dateinput__input, .inline-action__input, .newsletter__input, .ap-search__input, .find-local__input {
      font-size: 19px; } }
  .input:focus, .dateinput__input:focus, .inline-action__input:focus, .newsletter__input:focus, .ap-search__input:focus, .find-local__input:focus {
    border-color: #002B49; }
  .input[disabled], [disabled].dateinput__input, [disabled].inline-action__input, [disabled].newsletter__input, [disabled].ap-search__input, [disabled].find-local__input {
    background-color: #e3e4e3; }
  .input[type='date'], [type='date'].dateinput__input, [type='date'].inline-action__input, [type='date'].newsletter__input, [type='date'].ap-search__input, [type='date'].find-local__input {
    -webkit-appearance: none; }
    @supports (-webkit-overflow-scrolling: touch) {
      .input[type='date'], [type='date'].dateinput__input, [type='date'].inline-action__input, [type='date'].newsletter__input, [type='date'].ap-search__input, [type='date'].find-local__input {
        padding-top: 12px; } }
  .input:-moz-placeholder, .dateinput__input:-moz-placeholder, .inline-action__input:-moz-placeholder, .newsletter__input:-moz-placeholder, .ap-search__input:-moz-placeholder, .find-local__input:-moz-placeholder {
    color: #868787; }
  .input::-moz-placeholder, .dateinput__input::-moz-placeholder, .inline-action__input::-moz-placeholder, .newsletter__input::-moz-placeholder, .ap-search__input::-moz-placeholder, .find-local__input::-moz-placeholder {
    color: #868787; }
  .input:-ms-input-placeholder, .dateinput__input:-ms-input-placeholder, .inline-action__input:-ms-input-placeholder, .newsletter__input:-ms-input-placeholder, .ap-search__input:-ms-input-placeholder, .find-local__input:-ms-input-placeholder {
    color: #868787; }
  .input::-webkit-input-placeholder, .dateinput__input::-webkit-input-placeholder, .inline-action__input::-webkit-input-placeholder, .newsletter__input::-webkit-input-placeholder, .ap-search__input::-webkit-input-placeholder, .find-local__input::-webkit-input-placeholder {
    color: #868787; }
  .input--inline {
    font-size: 16px;
    line-height: 21px;
    display: inline-block;
    width: auto;
    min-width: 160px;
    padding: 6px 12px;
    margin: 0; }
    @media screen and (min-width: 440px) {
      .input--inline {
        font-size: 19px;
        line-height: 28px; } }
  .input--outlined, .dateinput__input, .ap-search__input, .find-local__input, .login__container .input, .login__container .dateinput__input, .login__container .inline-action__input, .login__container .newsletter__input, .login__container .ap-search__input, .login__container .find-local__input {
    border: 3px solid #eeeeef; }
  .input--error {
    border-color: #E01220; }
  .input--nomargin, .ap-search__input {
    margin: 0; }

input.input, input.dateinput__input, input.inline-action__input, input.newsletter__input, input.ap-search__input, input.find-local__input {
  box-sizing: border-box;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1.2;
  height: 52px; }
  @media screen and (min-width: 440px) {
    input.input, input.dateinput__input, input.inline-action__input, input.newsletter__input, input.ap-search__input, input.find-local__input {
      padding-top: 0;
      padding-bottom: 0;
      line-height: 1.2;
      height: 52px; } }
  @media screen and (min-width: 720px) {
    input.input, input.dateinput__input, input.inline-action__input, input.newsletter__input, input.ap-search__input, input.find-local__input {
      padding-top: 0;
      padding-bottom: 0;
      line-height: 1.2;
      height: 56px; } }
  @media screen and (min-width: 960px) {
    input.input, input.dateinput__input, input.inline-action__input, input.newsletter__input, input.ap-search__input, input.find-local__input {
      padding-top: 0;
      padding-bottom: 0;
      line-height: 1.2;
      height: 56px; } }
  @media screen and (min-width: 1240px) {
    input.input, input.dateinput__input, input.inline-action__input, input.newsletter__input, input.ap-search__input, input.find-local__input {
      padding-top: 0;
      padding-bottom: 0;
      line-height: 1.2;
      height: 56px; } }
  input.input--width-xsmall {
    width: 120px;
    min-width: 30px; }
  input.input--width-xxsmall {
    width: 96px;
    min-width: 30px; }
  input.input--width-small {
    width: 216px;
    min-width: 30px; }
  input.input--size-xsmall {
    font-size: 15px;
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.2;
    height: 42px; }
    @media screen and (min-width: 720px) {
      input.input--size-xsmall {
        font-size: 16px; } }
    @media screen and (min-width: 440px) {
      input.input--size-xsmall {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 42px; } }
    @media screen and (min-width: 720px) {
      input.input--size-xsmall {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 42px; } }
    @media screen and (min-width: 960px) {
      input.input--size-xsmall {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 42px; } }
    @media screen and (min-width: 1240px) {
      input.input--size-xsmall {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 42px; } }
  input.input--size-small {
    font-size: 16px;
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.2;
    height: 48px; }
    @media screen and (min-width: 440px) {
      input.input--size-small {
        font-size: 19px; } }
    @media screen and (min-width: 440px) {
      input.input--size-small {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 48px; } }
    @media screen and (min-width: 720px) {
      input.input--size-small {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 48px; } }
    @media screen and (min-width: 960px) {
      input.input--size-small {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 48px; } }
    @media screen and (min-width: 1240px) {
      input.input--size-small {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 48px; } }
  input.input--size-large {
    font-size: 22px;
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.2;
    height: 62px; }
    @media screen and (min-width: 720px) {
      input.input--size-large {
        font-size: 24px; } }
    @media screen and (min-width: 440px) {
      input.input--size-large {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 62px; } }
    @media screen and (min-width: 720px) {
      input.input--size-large {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 70px; } }
    @media screen and (min-width: 960px) {
      input.input--size-large {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 70px; } }
    @media screen and (min-width: 1240px) {
      input.input--size-large {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 70px; } }
  input.input--underlined {
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.2;
    height: 42px;
    border-width: 0 0 3px 0;
    border-color: #eeeeef;
    border-style: solid;
    border-radius: 0;
    background-color: transparent;
    padding: 0; }
    @media screen and (min-width: 440px) {
      input.input--underlined {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 42px; } }
    @media screen and (min-width: 720px) {
      input.input--underlined {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 42px; } }
    @media screen and (min-width: 960px) {
      input.input--underlined {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 42px; } }
    @media screen and (min-width: 1240px) {
      input.input--underlined {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 42px; } }

/*
Select

Example: Default
    <label class="select">
        <select aria-label="Category">
            <option>all categories</option>
            <option>enterprise</option>
            <option>...</option>
        </select>
    </label>

Example: Within a paragraph
    <p>
        I am within a paragraph
        <label class="select">
            <select select-autowidth aria-label="Category">
                <option>all categories</option>
                <option>enterprise</option>
                <option>...</option>
            </select>
        </label>
        ...OMG!
    </p>

Example: Block

    <label class="select  select--block">
        <select aria-label="Category">
            <option>all categories</option>
            <option>enterprise</option>
            <option>...</option>
        </select>
    </label>
    <p class="help-text">I am a help text</p>

Example: Outlined
    <label class="select  select--outlined">
        <select aria-label="Category">
            <option>all categories</option>
            <option>enterprise</option>
            <option>...</option>
        </select>
    </label>

Example: --size-*
    <div class="paragraph">
        <p class="h4">--size-xsmall:</p>
        <p class="paragraph paragraph--tight">
            <label class="select select--size-xsmall">
                <select aria-label="Category">
                    <option>all categories</option>
                    <option>enterprise</option>
                    <option>...</option>
                </select>
            </label>
        </p>
        <p class="paragraph paragraph--tight">
            <label class="select  select--outlined  select--size-xsmall">
                <select aria-label="Category">
                    <option>all categories</option>
                    <option>enterprise</option>
                    <option>...</option>
                </select>
            </label>
        </p>
        <p class="paragraph paragraph--tight">
            <label class="select  select--outlined select--block  select--size-xsmall">
                <select aria-label="Category">
                    <option>all categories</option>
                    <option>enterprise</option>
                    <option>...</option>
                </select>
            </label>
        </p>
    </div>
    <div class="paragraph">
        <p class="h4">--size-small:</p>
        <p class="paragraph paragraph--tight">
            <label class="select select--size-small">
                <select aria-label="Category">
                    <option>all categories</option>
                    <option>enterprise</option>
                    <option>...</option>
                </select>
            </label>
        </p>
        <p class="paragraph paragraph--tight">
            <label class="select  select--outlined  select--size-small">
                <select aria-label="Category">
                    <option>all categories</option>
                    <option>enterprise</option>
                    <option>...</option>
                </select>
            </label>
        </p>
        <p class="paragraph paragraph--tight">
            <label class="select  select--outlined select--block  select--size-small">
                <select aria-label="Category">
                    <option>all categories</option>
                    <option>enterprise</option>
                    <option>...</option>
                </select>
            </label>
        </p>
    </div>
    <div class="paragraph">
        <p class="h4">Default size:</p>
        <p class="paragraph paragraph--tight">
            <label class="select">
                <select aria-label="Category">
                    <option>all categories</option>
                    <option>enterprise</option>
                    <option>...</option>
                </select>
            </label>
        </p>
        <p class="paragraph paragraph--tight">
            <label class="select select--outlined">
                <select aria-label="Category">
                    <option>all categories</option>
                    <option>enterprise</option>
                    <option>...</option>
                </select>
            </label>
        </p>
        <p class="paragraph paragraph--tight">
            <label class="select  select--outlined select--block">
                <select aria-label="Category">
                    <option>all categories</option>
                    <option>enterprise</option>
                    <option>...</option>
                </select>
            </label>
        </p>
    </div>
    <div class="paragraph">
        <p class="h4">--size-large:</p>
        <p class="paragraph paragraph--tight">
            <label class="select select--size-large">
                <select aria-label="Category">
                    <option>all categories</option>
                    <option>enterprise</option>
                    <option>...</option>
                </select>
            </label>
        </p>
        <p class="paragraph paragraph--tight">
            <label class="select  select--outlined  select--size-large">
                <select aria-label="Category">
                    <option>all categories</option>
                    <option>enterprise</option>
                    <option>...</option>
                </select>
            </label>
        </p>
        <p class="paragraph paragraph--tight">
            <label class="select  select--outlined select--block  select--size-large">
                <select aria-label="Category">
                    <option>all categories</option>
                    <option>enterprise</option>
                    <option>...</option>
                </select>
            </label>
        </p>
    </div>


Example: --width-*
    <div class="paragraph">
        <p class="h4">--width-xxsmall:</p>
        <p class="paragraph paragraph--tight">
            <label class="select select--width-xxsmall">
                <select aria-label="Category">
                    <option>all categories</option>
                    <option>enterprise</option>
                    <option>...</option>
                </select>
            </label>
        </p>
        <p class="paragraph paragraph--tight">
            <label class="select  select--outlined  select--width-xxsmall">
                <select aria-label="Category">
                    <option>all categories</option>
                    <option>enterprise</option>
                    <option>...</option>
                </select>
            </label>
        </p>
        <p class="paragraph paragraph--tight">
            <label class="select  select--outlined select--block  select--width-xxsmall">
                <select aria-label="Category">
                    <option>all categories</option>
                    <option>enterprise</option>
                    <option>...</option>
                </select>
            </label>
        </p>
    </div>
    <div class="paragraph">
        <p class="h4">--width-xsmall:</p>
        <p class="paragraph paragraph--tight">
            <label class="select select--width-xsmall">
                <select aria-label="Category">
                    <option>all categories</option>
                    <option>enterprise</option>
                    <option>...</option>
                </select>
            </label>
        </p>
        <p class="paragraph paragraph--tight">
            <label class="select  select--outlined  select--width-xsmall">
                <select aria-label="Category">
                    <option>all categories</option>
                    <option>enterprise</option>
                    <option>...</option>
                </select>
            </label>
        </p>
        <p class="paragraph paragraph--tight">
            <label class="select  select--outlined select--block  select--width-xsmall">
                <select aria-label="Category">
                    <option>all categories</option>
                    <option>enterprise</option>
                    <option>...</option>
                </select>
            </label>
        </p>
    </div>
    <div class="paragraph">
        <p class="h4">--width-small:</p>
        <p class="paragraph paragraph--tight">
            <label class="select select--width-small">
                <select aria-label="Category">
                    <option>all categories</option>
                    <option>enterprise</option>
                    <option>...</option>
                </select>
            </label>
        </p>
        <p class="paragraph paragraph--tight">
            <label class="select  select--outlined  select--width-small">
                <select aria-label="Category">
                    <option>all categories</option>
                    <option>enterprise</option>
                    <option>...</option>
                </select>
            </label>
        </p>
        <p class="paragraph paragraph--tight">
            <label class="select  select--outlined select--block  select--width-small">
                <select aria-label="Category">
                    <option>all categories</option>
                    <option>enterprise</option>
                    <option>...</option>
                </select>
            </label>
        </p>
    </div>
    <div class="paragraph">
        <p class="h4">Default width (automatic for inline)</p>
        <p class="paragraph paragraph--tight">
            <label class="select">
                <select aria-label="Category">
                    <option>all categories</option>
                    <option>enterprise</option>
                    <option>...</option>
                </select>
            </label>
        </p>
        <p class="paragraph paragraph--tight">
            <label class="select  select--outlined">
                <select aria-label="Category">
                    <option>all categories</option>
                    <option>enterprise</option>
                    <option>...</option>
                </select>
            </label>
        </p>
        <p class="paragraph paragraph--tight">
            <label class="select  select--outlined select--block">
                <select aria-label="Category">
                    <option>all categories</option>
                    <option>enterprise</option>
                    <option>...</option>
                </select>
            </label>
        </p>
    </div>

Example: Light
    <div style="background-color: #000; padding: 5px;">
        <label class="select  select--light">
            <select aria-label="Category">
                <option>all categories</option>
                <option>enterprise</option>
                <option>...</option>
            </select>
        </label>
    </div>

Styleguide form.5:select
*/
.select, .dateinput__select, .find-local__select {
  position: relative;
  max-width: 100%;
  margin: 0;
  border-bottom: 3px solid #E01220;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  overflow: hidden; }
  .select select, .dateinput__select select, .find-local__select select {
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    font-size: inherit;
    line-height: 1.2;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: block;
    cursor: pointer;
    margin: 0;
    padding: 0;
    padding-right: 22px;
    width: 100%;
    border-radius: 0;
    border: 0;
    color: #2f2c2f;
    background-color: transparent;
    will-change: width;
    transition: width 100ms cubic-bezier(0, 0, 0.1, 1);
    flex: 1 1 auto;
    height: 100%; }
    .select select:focus:-moz-focusring, .dateinput__select select:focus:-moz-focusring, .find-local__select select:focus:-moz-focusring {
      color: transparent;
      text-shadow: 0 0 0 #000; }
    .select select::-ms-expand, .dateinput__select select::-ms-expand, .find-local__select select::-ms-expand {
      display: none; }
    .select select option, .dateinput__select select option, .find-local__select select option {
      font-family: "Maison Neue", Helvetica, sans-serif;
      font-weight: normal; }
  .select:before, .dateinput__select:before, .find-local__select:before {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    font-weight: 900;
    font-family: 'Font Awesome 5 Free';
    content: "\f078";
    position: absolute;
    pointer-events: none;
    top: 50%;
    margin-top: -6px;
    right: 1px;
    font-size: 16px; }
  .select--block, .find-local__select {
    display: block; }
    .select--block select, .find-local__select select {
      width: 100%; }
  .select--light {
    color: #fff;
    border-color: #fff; }
    .select--light select {
      color: #fff; }
      .select--light select:focus {
        color: #fff; }
  .select--outlined, .dateinput__select, .find-local__select {
    border-radius: 5px;
    border: 3px solid #eeeeef;
    background-color: #fff;
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.2;
    height: 52px; }
    @media screen and (min-width: 440px) {
      .select--outlined, .dateinput__select, .find-local__select {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 52px; } }
    @media screen and (min-width: 720px) {
      .select--outlined, .dateinput__select, .find-local__select {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 56px; } }
    @media screen and (min-width: 960px) {
      .select--outlined, .dateinput__select, .find-local__select {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 56px; } }
    @media screen and (min-width: 1240px) {
      .select--outlined, .dateinput__select, .find-local__select {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 56px; } }
    .select--outlined:before, .dateinput__select:before, .find-local__select:before {
      right: 12px; }
    .select--outlined select, .dateinput__select select, .find-local__select select {
      font-family: "Maison Neue", Helvetica, sans-serif;
      font-weight: normal;
      line-height: inherit;
      padding: 9px 15px;
      padding-right: 34px; }
  .select--size-xsmall {
    font-size: 15px;
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.2;
    height: 42px; }
    @media screen and (min-width: 720px) {
      .select--size-xsmall {
        font-size: 16px; } }
    @media screen and (min-width: 440px) {
      .select--size-xsmall {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 42px; } }
    @media screen and (min-width: 720px) {
      .select--size-xsmall {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 42px; } }
    @media screen and (min-width: 960px) {
      .select--size-xsmall {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 42px; } }
    @media screen and (min-width: 1240px) {
      .select--size-xsmall {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 42px; } }
  .select--size-small {
    font-size: 16px;
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.2;
    height: 48px; }
    @media screen and (min-width: 440px) {
      .select--size-small {
        font-size: 19px; } }
    @media screen and (min-width: 440px) {
      .select--size-small {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 48px; } }
    @media screen and (min-width: 720px) {
      .select--size-small {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 48px; } }
    @media screen and (min-width: 960px) {
      .select--size-small {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 48px; } }
    @media screen and (min-width: 1240px) {
      .select--size-small {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 48px; } }
  .select--size-large {
    font-size: 22px;
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.2;
    height: 62px; }
    @media screen and (min-width: 720px) {
      .select--size-large {
        font-size: 24px; } }
    @media screen and (min-width: 440px) {
      .select--size-large {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 62px; } }
    @media screen and (min-width: 720px) {
      .select--size-large {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 70px; } }
    @media screen and (min-width: 960px) {
      .select--size-large {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 70px; } }
    @media screen and (min-width: 1240px) {
      .select--size-large {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 70px; } }
  .select--width-xsmall {
    width: 120px;
    min-width: 30px; }
  .select--width-xxsmall {
    width: 96px;
    min-width: 30px; }
  .select--width-small {
    width: 216px;
    min-width: 30px; }
  .select--block, .find-local__select {
    display: flex;
    margin-bottom: 6px; }

@-moz-document url-prefix() {
  .select select, .dateinput__select select, .find-local__select select {
    text-indent: 0.01px;
    text-overflow: ''; }
  .select:after, .dateinput__select:after, .find-local__select:after {
    content: '';
    position: absolute;
    pointer-events: none;
    right: 0;
    top: 0;
    width: 40px;
    height: 100%;
    background-color: #f5f5f5; }
  .select:before, .dateinput__select:before, .find-local__select:before {
    z-index: 2; }
  .select option, .dateinput__select option, .find-local__select option {
    background-color: white; } }

/* Form layout

Example: {type: isolated}
    <form class="form">
        <div class="form__section">
            <p class="form__split">
                <label class="form__item  form__item--split">
                    First name
                    <input
                        type="text"
                        class="input  input--outlined"
                        id="first_name"
                        name="first_name"
                        required
                    />
                </label>
                <label class="form__item  form__item--split">
                    Last name
                    <input
                        type="text"
                        class="input  input--outlined"
                        id="last_name"
                        name="last_name"
                        required
                    />
                </label>
            </p>

            <label class="form__item">
                Email
                <input
                    type="email"
                    class="input  input--outlined"
                    id="email"
                    name="email"
                    required
                />
            </label>

            <label class="form__item">
                Phone
                <input
                    type="tel"
                    class="input  input--outlined  input--half"
                    id="tel"
                    name="tel"
                    required
                />
            </label>

            <label class="form__item">
                ZIP-number
                <input
                    type="text"
                    class="input  input--outlined  input--xsmall"
                    id="postal"
                    name="postal"
                    ng-model="local.postal"
                    pattern="\d{4}"
                    minlength="4"
                    maxlength="4"
                    required
                />
            </label>
        </div>

        <button type="submit" class="button  button--primary-fill  button--block">
            Join
        </button>
    </form>

Styleguide form.formlayout
*/
.form {
  margin: 0 auto;
  padding-left: 12px;
  padding-right: 12px;
  max-width: 620px;
  position: relative;
  text-align: left;
  margin-bottom: 63px;
  padding-top: 42px;
  padding-bottom: 42px;
  box-shadow: 0 0 20px rgba(30, 30, 30, 0.06);
  background-color: #fff; }
  @media (min-width: 440px) {
    .form {
      padding-left: 24px;
      padding-right: 24px; } }
  @media (min-width: 720px) {
    .form {
      padding-left: 60px;
      padding-right: 60px; } }
  @media (min-width: 720px) {
    .form {
      border-radius: 5px; } }
  .form__section {
    margin-bottom: 35px; }
  .form__title {
    font-family: "Noe Text", Helvetica, sans-serif;
    font-weight: bold;
    font-size: 21px;
    line-height: 28px;
    display: block;
    color: #E01220;
    width: 100%;
    text-align: center;
    margin-bottom: 28px; }
    @media screen and (min-width: 440px) {
      .form__title {
        font-size: 26px;
        line-height: 35px; } }
    @media screen and (min-width: 720px) {
      .form__title {
        font-size: 27px;
        line-height: 35px; } }
  .form__sub-title {
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    width: 100%;
    display: block;
    margin-bottom: 7px; }
  .form__item {
    display: block;
    width: 100%;
    margin-bottom: 28px; }
    .form__item--split {
      margin-left: 6px;
      margin-right: 6px; }
      @media (min-width: 720px) {
        .form__item--split {
          margin-left: 12px;
          margin-right: 12px; } }
      .form__item--split:first-child {
        margin-left: 0; }
      .form__item--split:last-child {
        margin-right: 0; }
  .form__split {
    display: flex;
    width: 100%;
    margin: 0; }
    .form__split--tight .form__item--split {
      margin-left: 6px;
      margin-right: 6px; }
      .form__split--tight .form__item--split:first-child {
        margin-left: 0; }
      .form__split--tight .form__item--split:last-child {
        margin-right: 0; }
  .form__message {
    border-radius: 5px;
    border: 3px solid #eeeeef;
    padding: 21px 15px 7px; }
    .form__message.ng-leave {
      position: absolute;
      width: 100%; }

hr,
.separator {
  margin: 0 0 63px;
  padding: 0;
  border: 0;
  border-top: 3px solid #cbcbca; }

.separator--light {
  border-color: #fff; }

.separator--large {
  border-top-width: 6px; }

.separator--no-space {
  margin: 0; }

/* Checkbox

### These are the modifiers:
- `inline` - Removes margin underneath so it flows better with text
- `block` - Make it 100% width
- `light` - Make it light, only use on darker backgrounds
- `spaceless` - Remove spaces to the right and underneath

Example: Checkbox default
    <label class="checkbox">
        <input type="checkbox">
        <span class="checkbox__control-indicator"></span>
        Yes
    </label>
    <label class="checkbox">
        <input type="checkbox">
        <span class="checkbox__control-indicator"></span>
        No
    </label>

Example: Checkbox light
    <label class="checkbox  checkbox--light">
        <input type="checkbox">
        <span class="checkbox__control-indicator"></span>
        Yes
    </label>
    <label class="checkbox  checkbox--light">
        <input type="checkbox">
        <span class="checkbox__control-indicator"></span>
        No
    </label>

Example: Checkbox block
    <label class="checkbox  checkbox--block">
        <input type="checkbox">
        <span class="checkbox__control-indicator"></span>
        Yes
    </label>
    <label class="checkbox  checkbox--block">
        <input type="checkbox">
        <span class="checkbox__control-indicator"></span>
        No
    </label>

Example: Checkbox inline
    <p>
        Look, I'm mixed with
        <label class="checkbox  checkbox--inline">
            <input type="checkbox">
            <span class="checkbox__control-indicator"></span>
            Yes
        </label>
        <label class="checkbox  checkbox--inline">
            <input type="checkbox">
            <span class="checkbox__control-indicator"></span>
            No
        </label>
        text
    </p>

Example: {type: isolated} In a group with label and aria
    <p class="label" id="id_label">Which of these are true?</p>
    <label class="checkbox  checkbox--block" id="id_choice1_label">
        <input type="checkbox" name="thechoices"
            aria-labelledby="id_label id_choice1_label">
        <span class="checkbox__control-indicator"></span>
        The earth is round
    </label>
    <label class="checkbox  checkbox--block" id="id_choice2_label">
        <input type="checkbox" name="thechoices"
            aria-labelledby="id_label id_choice2_label">
        <span class="checkbox__control-indicator"></span>
        The earth is a disc that rides on the back of a giant turtle
    </label>
    <label class="checkbox  checkbox--block" id="id_choice3_label">
        <input type="checkbox" name="thechoices"
            aria-labelledby="id_label id_choice3_label">
        <span class="checkbox__control-indicator"></span>
        Armageddon is coming
    </label>


Example: Disabled
    <label class="checkbox  checkbox--block">
        <input type="checkbox">
        <span class="checkbox__control-indicator"></span>
        Enabled 1
    </label>
    <label class="checkbox  checkbox--block">
        <input type="checkbox" disabled checked>
        <span class="checkbox__control-indicator"></span>
        Disabled 1
    </label>
    <label class="checkbox  checkbox--block">
        <input type="checkbox">
        <span class="checkbox__control-indicator"></span>
        Enabled 2
    </label>
    <label class="checkbox  checkbox--block">
        <input type="checkbox" disabled>
        <span class="checkbox__control-indicator"></span>
        Disabled 2
    </label>


Styleguide form.4:checkbox
*/
/* Radio

### These are the modifiers:
- `inline` - Removes margin underneath so it flows better with text
- `block` - Make it 100% width
- `light` - Make it light, only use on darker backgrounds
- `spaceless` - Remove spaces to the right and underneath

Example: Radio default
    <label class="radio">
        <input type="radio" name="styleguide">
        <span class="radio__control-indicator"></span>
        Yes
    </label>
    <label class="radio">
        <input type="radio" name="styleguide">
        <span class="radio__control-indicator"></span>
        No
    </label>

Example: Radio light
    <label class="radio  radio--light">
        <input type="radio" name="styleguide">
        <span class="radio__control-indicator"></span>
        Yes
    </label>
    <label class="radio  radio--light">
        <input type="radio" name="styleguide">
        <span class="radio__control-indicator"></span>
        No
    </label>

Example: Radio block
    <label class="radio  radio--block">
        <input type="radio" name="styleguide">
        <span class="radio__control-indicator"></span>
        Yes
    </label>
    <label class="radio  radio--block">
        <input type="radio" name="styleguide">
        <span class="radio__control-indicator"></span>
        No
    </label>

Example: Radio inline
    <p>
        Look, I'm mixed with
        <label class="radio  radio--inline">
            <input type="radio" name="styleguide">
            <span class="radio__control-indicator"></span>
            Yes
        </label>
        <label class="radio  radio--inline">
            <input type="radio" name="styleguide">
            <span class="radio__control-indicator"></span>
            No
        </label>
        text
    </p>


Example: {type: isolated} In a group with label and aria
    <div role="radiogroup" aria-describedby="id_label">
        <p class="label" id="id_label">Are you good?</p>
        <label class="radio  radio--block">
            <input type="radio" name="myradio">
            <span class="radio__control-indicator"></span>
            Yes
        </label>
        <label class="radio  radio--block">
            <input type="radio" name="myradio">
            <span class="radio__control-indicator"></span>
            No
        </label>
    </div>


Example: {type: isolated} With label and aria - without a wrapper element
    <p class="label" id="id_label">Are you good?</p>
    <label class="radio  radio--block" id="id_myradio1_label">
        <input type="radio" name="myradio"
            aria-labelledby="id_label id_myradio1_label">
        <span class="radio__control-indicator"></span>
        Yes
    </label>
    <label class="radio  radio--block" id="id_myradio2_label">
        <input type="radio" name="myradio"
            aria-labelledby="id_label id_myradio2_label">
        <span class="radio__control-indicator"></span>
        No
    </label>


Example: Disabled
    <label class="radio  radio--block">
        <input type="radio" name="styleguide">
        <span class="radio__control-indicator"></span>
        Enabled option 1
    </label>
    <label class="radio  radio--block">
        <input type="radio" name="styleguide">
        <span class="radio__control-indicator"></span>
        Enabled option 2
    </label>
    <label class="radio  radio--block">
        <input type="radio" name="styleguide" disabled>
        <span class="radio__control-indicator"></span>
        Disabled option
    </label>

Example: Radio button variant
    <div class="buttonbar">
        <label class="radio radio--button buttonbar__button buttonbar__button--primary-fill">
            <input type="radio" name="styleguide">
            Yes
        </label>
        <label class="radio radio--button buttonbar__button buttonbar__button--primary">
            <input type="radio" name="styleguide">
            maybe
        </label>
        <label class="radio radio--button buttonbar__button buttonbar__button--primary">
            <input type="radio" name="styleguide">
            No
        </label>
    </div>

Styleguide form.4:radio
*/
.radio,
.checkbox {
  position: relative;
  display: inline-block;
  padding-left: 42px;
  margin-bottom: 7px;
  margin-right: 24px;
  cursor: pointer;
  clear: left; }
  .radio input[type='radio'],
  .radio input[type='checkbox'],
  .checkbox input[type='radio'],
  .checkbox input[type='checkbox'] {
    position: absolute;
    opacity: 0;
    z-index: -1; }
    .radio input[type='radio']:checked ~ .radio__control-indicator:before,
    .radio input[type='radio']:checked ~ .checkbox__control-indicator:before,
    .radio input[type='checkbox']:checked ~ .radio__control-indicator:before,
    .radio input[type='checkbox']:checked ~ .checkbox__control-indicator:before,
    .checkbox input[type='radio']:checked ~ .radio__control-indicator:before,
    .checkbox input[type='radio']:checked ~ .checkbox__control-indicator:before,
    .checkbox input[type='checkbox']:checked ~ .radio__control-indicator:before,
    .checkbox input[type='checkbox']:checked ~ .checkbox__control-indicator:before {
      transform: scale(1);
      opacity: 1; }
    .radio input[type='radio']:focus ~ .checkbox__control-indicator,
    .radio input[type='radio']:focus ~ .radio__control-indicator,
    .radio input[type='checkbox']:focus ~ .checkbox__control-indicator,
    .radio input[type='checkbox']:focus ~ .radio__control-indicator,
    .checkbox input[type='radio']:focus ~ .checkbox__control-indicator,
    .checkbox input[type='radio']:focus ~ .radio__control-indicator,
    .checkbox input[type='checkbox']:focus ~ .checkbox__control-indicator,
    .checkbox input[type='checkbox']:focus ~ .radio__control-indicator {
      border-color: #ce111d; }
    .radio input[type='radio']:disabled ~ .radio__control-indicator,
    .radio input[type='radio']:disabled ~ .checkbox__control-indicator,
    .radio input[type='checkbox']:disabled ~ .radio__control-indicator,
    .radio input[type='checkbox']:disabled ~ .checkbox__control-indicator,
    .checkbox input[type='radio']:disabled ~ .radio__control-indicator,
    .checkbox input[type='radio']:disabled ~ .checkbox__control-indicator,
    .checkbox input[type='checkbox']:disabled ~ .radio__control-indicator,
    .checkbox input[type='checkbox']:disabled ~ .checkbox__control-indicator {
      border-color: #e3e4e3;
      background-color: #eeeeef; }
  .radio:hover .checkbox__control-indicator,
  .radio:hover .radio__control-indicator,
  .checkbox:hover .checkbox__control-indicator,
  .checkbox:hover .radio__control-indicator {
    border-color: #E01220; }
  .radio__control-indicator,
  .checkbox__control-indicator {
    position: absolute;
    display: block;
    user-select: none;
    top: -0.1em;
    left: 0;
    width: 24px;
    height: 24px;
    background-color: #fff;
    border: 3px solid #e3e4e3; }
    @media (min-width: 440px) {
      .radio__control-indicator,
      .checkbox__control-indicator {
        top: 0.05em; } }
    .radio__control-indicator:before,
    .checkbox__control-indicator:before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      opacity: 0;
      transform: scale(0);
      transition: transform 100ms cubic-bezier(0, 0, 0.1, 1); }
  .radio--inline,
  .checkbox--inline {
    margin-bottom: 0; }
  .radio--spaceless,
  .checkbox--spaceless {
    margin-right: 0;
    margin-bottom: 0; }
  .radio--light .radio__control-indicator,
  .radio--light .checkbox__control-indicator,
  .checkbox--light .radio__control-indicator,
  .checkbox--light .checkbox__control-indicator {
    border: 0;
    color: #E01220; }
  .radio--light:hover .radio__control-indicator,
  .radio--light:hover .checkbox__control-indicator,
  .checkbox--light:hover .radio__control-indicator,
  .checkbox--light:hover .checkbox__control-indicator {
    background-color: #002B49;
    color: #fff; }
  .radio--light:hover .radio__control-indicator:before,
  .checkbox--light:hover .radio__control-indicator:before {
    background-color: #fff; }
  .radio--light input[type='radio']:focus ~ .radio__control-indicator,
  .radio--light input[type='checkbox']:focus ~ .checkbox__control-indicator,
  .checkbox--light input[type='radio']:focus ~ .radio__control-indicator,
  .checkbox--light input[type='checkbox']:focus ~ .checkbox__control-indicator {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4); }
  .radio--block,
  .checkbox--block {
    display: block; }
  .radio .select, .radio .dateinput__select, .radio .find-local__select,
  .checkbox .select,
  .checkbox .dateinput__select,
  .checkbox .find-local__select {
    margin-top: -5px;
    margin-bottom: -5px; }

.checkbox {
  padding-left: 42px; }
  .checkbox__control-indicator {
    top: -0.1em;
    width: 30px;
    height: 30px;
    line-height: 1;
    border-radius: 5px;
    border: 3px solid #e3e4e3;
    background-color: #fff; }
    @media (min-width: 440px) {
      .checkbox__control-indicator {
        top: -0.1em; } }
    .checkbox__control-indicator:before {
      -moz-osx-font-smoothing: grayscale;
      -webkit-font-smoothing: antialiased;
      display: inline-block;
      font-style: normal;
      font-variant: normal;
      text-rendering: auto;
      line-height: 1;
      font-weight: 900;
      font-family: 'Font Awesome 5 Free';
      content: "\f00c";
      font-size: 14px;
      margin-top: -6px;
      margin-left: -7px; }
  .checkbox--light .checkbox__control-indicator {
    background-color: #fff; }

.radio__control-indicator {
  border-radius: 50%; }
  .radio__control-indicator:before {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    margin-left: -4px;
    margin-top: -4px;
    background-color: #002B49; }

.radio--button .radio__control-indicator {
  display: none; }

.hideme {
  display: none !important; }

/* Container

In most cases you shouldn't lett the content float to the full width, then you should use a containger.

For text-content you shouldn't use width's larger than `.container--tight`.

Example: {type: isolated} Default container
    <div class="container">
        <h2>Default container</h2>

        <p>Lorem Ipsum's father was with Lee Harvey Oswald prior to Oswald's being, you know, shot. I think the only difference between me and the other placeholder text is that I’m more honest and my words are more beautiful. An ‘extremely credible source’ has called my office and told me that Barack Obama’s placeholder text is a fraud. I’m the best thing that ever happened to placeholder text.</p>
    </div>

Example: {type: isolated} Wide container
    <div class="container  container--wide">
        <h2>Wide container</h2>

        <p>Lorem Ipsum's father was with Lee Harvey Oswald prior to Oswald's being, you know, shot. I think the only difference between me and the other placeholder text is that I’m more honest and my words are more beautiful. An ‘extremely credible source’ has called my office and told me that Barack Obama’s placeholder text is a fraud. I’m the best thing that ever happened to placeholder text.</p>
    </div>

Example: {type: isolated} Tight container
    <div class="container  container--tight">
        <h2>Tight container</h2>

        <p>Lorem Ipsum's father was with Lee Harvey Oswald prior to Oswald's being, you know, shot. I think the only difference between me and the other placeholder text is that I’m more honest and my words are more beautiful. An ‘extremely credible source’ has called my office and told me that Barack Obama’s placeholder text is a fraud. I’m the best thing that ever happened to placeholder text.</p>
    </div>

Styleguide layout.container
*/
.container {
  margin: 0 auto;
  padding-left: 12px;
  padding-right: 12px;
  max-width: 1110px; }
  @media (min-width: 440px) {
    .container {
      padding-left: 24px;
      padding-right: 24px; } }
  @media (min-width: 720px) {
    .container {
      padding-left: 60px;
      padding-right: 60px; } }
  .container--xtight {
    max-width: 620px; }
  .container--tight {
    max-width: 740px; }
  .container--wide {
    max-width: 1400px; }
  .container--xwide {
    max-width: 1640px; }
  .container .container {
    padding-left: 0;
    padding-right: 0; }

/* Messages

Example: Error
    <p class="message message--error">Look, I'm an error message!</p>

Example: Info
    <p class="message  message--info">Look, I'm an info message!</p>

Example: Success
    <p class="message  message--success">Look, I'm a success message!</p>

Example: Multiple messages
    <p class="message  message--info">Look, I'm an info message!</p>
    <p class="message  message--error">Look, I'm an error message!</p>
    <p class="message  message--info">Look, I'm another info message!</p>
    <p class="message  message--success">Look, I'm a success message!</p>

Example: Within a fieldwrapper
    <div class="fieldwrapper">
        <label class="label">
            Standard input
            <input type="text" class="input">
        </label>
        <p class="message  message--compact  message--info">Look, I'm an info message!</p>
        <p class="message  message--compact  message--error">Look, I'm an error message!</p>
    </div>
    <div class="fieldwrapper">
        <label class="label">
            Another input - this also has help-text
            <input type="text" class="input">
        </label>
        <p class="help-text">Some help text here</p>
        <p class="message  message--compact  message--error">Look, I'm an error message!</p>
    </div>

Styleguide form.6:messages
*/
.message {
  animation-delay: 150ms;
  font-family: "Maison Neue", Helvetica, sans-serif;
  font-size: 15px;
  line-height: 21px;
  padding-top: 7px;
  margin-bottom: 28px; }
  @media screen and (min-width: 720px) {
    .message {
      font-size: 16px;
      line-height: 21px; } }
  .message:before {
    width: 19.5px;
    margin-right: 6px; }
    @media (min-width: 720px) {
      .message:before {
        width: 20.8px; } }
  .message--error {
    color: #b30e1a; }
    .message--error:before {
      -moz-osx-font-smoothing: grayscale;
      -webkit-font-smoothing: antialiased;
      display: inline-block;
      font-style: normal;
      font-variant: normal;
      text-rendering: auto;
      line-height: 1;
      font-weight: 900;
      font-family: 'Font Awesome 5 Free';
      content: "\f071"; }
  .message--info {
    color: #2f2c2f; }
    .message--info:before {
      -moz-osx-font-smoothing: grayscale;
      -webkit-font-smoothing: antialiased;
      display: inline-block;
      font-style: normal;
      font-variant: normal;
      text-rendering: auto;
      line-height: 1;
      font-weight: 900;
      font-family: 'Font Awesome 5 Free';
      content: "\f129"; }
  .message--success {
    color: #006618; }
    .message--success:before {
      -moz-osx-font-smoothing: grayscale;
      -webkit-font-smoothing: antialiased;
      display: inline-block;
      font-style: normal;
      font-variant: normal;
      text-rendering: auto;
      line-height: 1;
      font-weight: 900;
      font-family: 'Font Awesome 5 Free';
      content: "\f00c"; }
  .message--compact {
    margin-bottom: 6px; }
  .message.ng-leave {
    animation: 0; }

/* Help text

Example:

    <label class="label">
        Standard input
        <input type="text" class="input" placeholder="I set the standard" />
    </label>
    <p class="help-text">
        Vestibulum id ligula porta felis euismod semper.
        Nullam id dolor id nibh ultricies vehicula ut id elit.
    </p>
Styleguide form.6:help-text
*/
.help-text {
  font-family: "Maison Neue", Helvetica, sans-serif;
  font-size: 15px;
  line-height: 21px;
  color: #686969;
  margin-top: 7px;
  margin-bottom: 7px; }
  @media screen and (min-width: 720px) {
    .help-text {
      font-size: 16px;
      line-height: 21px; } }

/**
Range input

Example:

    <input class="range-input" type="range" min="0" max="100" value="10">

Example: --large

    <input class="range-input range-input--large" type="range" min="0" max="100" value="10">


Example: --light

    <div style="background-color: #000; padding: 10px;">
        <input class="range-input range-input--light" type="range" min="0" max="100" value="10">
    </div>


Example: Within label

    <label class="label">
        Look, a range!
        <input class="range-input" type="range" min="0" max="100" value="10">
    </label>

    <label class="label">
        Look, a large range!
        <input class="range-input range-input--large" type="range" min="0" max="100" value="10">
    </label>


Example: Below a label

    <label class="label">Look, a range!</label>
    <input class="range-input" type="range" min="0" max="100" value="10">

    <label class="label">Look, a large range!</label>
    <input class="range-input range-input--large" type="range" min="0" max="100" value="10">


Example: Within a fieldwrapper

    <div class="fieldwrapper">
        <label class="label" for="id_myfield">Standard input</label>
        <input type="text" placeholder="I set the standard"
            id="id_myfield"
            class="input input--fieldwrapper-item" />
        <p class="help-text help-text--fieldwrapper-item">
            Vestibulum id ligula porta felis euismod semper.
            Nullam id dolor id nibh ultricies vehicula ut id elit.
        </p>
    </div>

    <div class="fieldwrapper">
        <label class="label">Look, a range!</label>
        <input class="range-input" type="range" min="0" max="100" value="10">
        <p class="help-text help-text--fieldwrapper-item">
            Vestibulum id ligula porta felis euismod semper.
            Nullam id dolor id nibh ultricies vehicula ut id elit.
        </p>
    </div>

    <div class="fieldwrapper">
        <label class="label">Standard input</label>
        <input type="text" placeholder="I set the standard" class="input" />
    </div>

Styleguide form.6:rangeinput
*/
.range-input {
  line-height: 1.6;
  min-height: 42px;
  display: block;
  width: 100%;
  /* WebKit/Blink - and for certain styles Edge */
  /* Firefox */
  /* IE/Edge */
  /* WebKit/Blink - and for certain styles Edge */
  /* Firefox */
  /* IE/Edge */
  /* WebKit/Blink - and for certain styles Edge */
  /* Firefox */
  /* IE/Edge */
  /* WebKit/Blink - and for certain styles Edge */
  /* Firefox */
  /* IE/Edge */
  /* WebKit/Blink - and for certain styles Edge */
  /* Firefox */
  /* IE/Edge */
  /* WebKit/Blink - and for certain styles Edge */
  /* Firefox */
  /* IE/Edge */ }
  .range-input::-webkit-slider-thumb {
    cursor: pointer; }
  .range-input::-moz-range-thumb {
    cursor: pointer; }
  .range-input::-ms-thumb {
    cursor: pointer; }
  .range-input::-webkit-slider-runnable-track {
    width: 100%;
    cursor: pointer; }
  .range-input::-moz-range-track {
    width: 100%;
    cursor: pointer; }
  .range-input::-ms-track {
    width: 100%;
    cursor: pointer; }
  .range-input::-webkit-slider-runnable-track {
    height: 7px;
    border-radius: 3.5px; }
  .range-input::-moz-range-track {
    height: 7px;
    border-radius: 3.5px; }
  .range-input::-ms-track {
    height: 7px;
    border-width: 21px 0; }
  .range-input::-ms-fill-lower {
    border-radius: 7px; }
  .range-input::-ms-fill-upper {
    border-radius: 7px; }
  .range-input::-webkit-slider-thumb {
    transition: all 50ms ease;
    height: 28px;
    width: 28px;
    border-width: 3px;
    border-radius: 50%;
    margin-top: -10.5px; }
    .range-input::-webkit-slider-thumb:hover, .range-input::-webkit-slider-thumb:active {
      margin-top: -14px;
      height: 35px;
      width: 35px; }
  .range-input::-moz-range-thumb {
    transition: all 50ms ease;
    height: 28px;
    width: 28px;
    border-width: 3px;
    border-radius: 50%; }
    .range-input::-moz-range-thumb:hover, .range-input::-moz-range-thumb:active {
      height: 35px;
      width: 35px; }
  .range-input::-ms-thumb {
    transition: all 50ms ease;
    height: 28px;
    width: 28px;
    border-width: 3px;
    border-radius: 50%;
    margin-top: 0; }
    .range-input::-ms-thumb:hover, .range-input::-ms-thumb:active {
      margin-top: -3.5px;
      height: 35px;
      width: 35px; }
  .range-input::-webkit-slider-runnable-track {
    background: #eeeeef;
    border: none; }
  .range-input::-moz-range-track {
    background: #eeeeef;
    border: none; }
  .range-input::-ms-track {
    width: 100%;
    background: transparent;
    border-color: transparent;
    color: transparent; }
  .range-input::-ms-fill-lower {
    background: #eeeeef;
    border: none; }
  .range-input::-ms-fill-upper {
    background: #eeeeef;
    border: none; }
  .range-input:focus {
    /* WebKit/Blink - and for certain styles Edge */
    /* Firefox */
    /* IE/Edge */ }
    .range-input:focus::-webkit-slider-runnable-track {
      background: #eeeeef; }
    .range-input:focus::-moz-range-track {
      background: #eeeeef; }
    .range-input:focus::-ms-fill-lower {
      background: #eeeeef; }
    .range-input:focus::-ms-fill-upper {
      background: #eeeeef; }
  .range-input::-webkit-slider-thumb {
    border-color: #828383;
    border-style: solid;
    background: #eeeeef; }
    .range-input::-webkit-slider-thumb:hover, .range-input::-webkit-slider-thumb:active {
      background: #002B49;
      border-color: #002B49; }
  .range-input::-moz-range-thumb {
    border-color: #828383;
    border-style: solid;
    background: #eeeeef; }
    .range-input::-moz-range-thumb:hover, .range-input::-moz-range-thumb:active {
      background: #002B49;
      border-color: #002B49; }
  .range-input::-ms-thumb {
    border-color: #828383;
    border-style: solid;
    background: #828383; }
    .range-input::-ms-thumb:hover, .range-input::-ms-thumb:active {
      background: #002B49;
      border-color: #002B49; }
  .range-input:focus::-webkit-slider-thumb {
    background: #002B49;
    border-color: #002B49; }
  .range-input.range-input--large {
    min-height: 49px;
    /* WebKit/Blink - and for certain styles Edge */
    /* Firefox */
    /* IE/Edge */
    /* WebKit/Blink - and for certain styles Edge */
    /* Firefox */
    /* IE/Edge */ }
    .range-input.range-input--large::-webkit-slider-runnable-track {
      height: 14px;
      border-radius: 7px; }
    .range-input.range-input--large::-moz-range-track {
      height: 14px;
      border-radius: 7px; }
    .range-input.range-input--large::-ms-track {
      height: 14px;
      border-width: 24.5px 0; }
    .range-input.range-input--large::-ms-fill-lower {
      border-radius: 14px; }
    .range-input.range-input--large::-ms-fill-upper {
      border-radius: 14px; }
    .range-input.range-input--large::-webkit-slider-thumb {
      transition: all 50ms ease;
      height: 42px;
      width: 42px;
      border-width: 3px;
      border-radius: 50%;
      margin-top: -14px; }
      .range-input.range-input--large::-webkit-slider-thumb:hover, .range-input.range-input--large::-webkit-slider-thumb:active {
        margin-top: -17.5px;
        height: 49px;
        width: 49px; }
    .range-input.range-input--large::-moz-range-thumb {
      transition: all 50ms ease;
      height: 42px;
      width: 42px;
      border-width: 3px;
      border-radius: 50%; }
      .range-input.range-input--large::-moz-range-thumb:hover, .range-input.range-input--large::-moz-range-thumb:active {
        height: 49px;
        width: 49px; }
    .range-input.range-input--large::-ms-thumb {
      transition: all 50ms ease;
      height: 42px;
      width: 42px;
      border-width: 3px;
      border-radius: 50%;
      margin-top: 0; }
      .range-input.range-input--large::-ms-thumb:hover, .range-input.range-input--large::-ms-thumb:active {
        margin-top: -3.5px;
        height: 49px;
        width: 49px; }
  .range-input.range-input--light {
    /* WebKit/Blink - and for certain styles Edge */
    /* Firefox */
    /* IE/Edge */
    /* WebKit/Blink - and for certain styles Edge */
    /* Firefox */
    /* IE/Edge */ }
    .range-input.range-input--light::-webkit-slider-runnable-track {
      background: #eeeeef;
      border: none; }
    .range-input.range-input--light::-moz-range-track {
      background: #eeeeef;
      border: none; }
    .range-input.range-input--light::-ms-track {
      width: 100%;
      background: transparent;
      border-color: transparent;
      color: transparent; }
    .range-input.range-input--light::-ms-fill-lower {
      background: #eeeeef;
      border: none; }
    .range-input.range-input--light::-ms-fill-upper {
      background: #eeeeef;
      border: none; }
    .range-input.range-input--light:focus {
      /* WebKit/Blink - and for certain styles Edge */
      /* Firefox */
      /* IE/Edge */ }
      .range-input.range-input--light:focus::-webkit-slider-runnable-track {
        background: #eeeeef; }
      .range-input.range-input--light:focus::-moz-range-track {
        background: #eeeeef; }
      .range-input.range-input--light:focus::-ms-fill-lower {
        background: #eeeeef; }
      .range-input.range-input--light:focus::-ms-fill-upper {
        background: #eeeeef; }
    .range-input.range-input--light::-webkit-slider-thumb {
      border-color: #fff;
      border-style: solid;
      background: #eeeeef; }
      .range-input.range-input--light::-webkit-slider-thumb:hover, .range-input.range-input--light::-webkit-slider-thumb:active {
        background: #fff;
        border-color: #fff; }
    .range-input.range-input--light::-moz-range-thumb {
      border-color: #fff;
      border-style: solid;
      background: #eeeeef; }
      .range-input.range-input--light::-moz-range-thumb:hover, .range-input.range-input--light::-moz-range-thumb:active {
        background: #fff;
        border-color: #fff; }
    .range-input.range-input--light::-ms-thumb {
      border-color: #fff;
      border-style: solid;
      background: #828383; }
      .range-input.range-input--light::-ms-thumb:hover, .range-input.range-input--light::-ms-thumb:active {
        background: #fff;
        border-color: #fff; }
    .range-input.range-input--light:focus::-webkit-slider-thumb {
      background: #fff;
      border-color: #fff; }

/* Global messages

Used to list multiple messages, typically save success messages, and warning messages
just below the page-cover.


Example: {type: isolated}

    <div class="global-messages" style="margin-bottom: 30px;"> <!-- the style is just for the styleguide rendering -->
        <div class="global-messages__message box box--spacing-none-sides box--warning">
            <div class="global-messages__messagecontent">Look, I'm a warning message!</div>
        </div>
        <div class="global-messages__message box box--spacing-none-sides box--success">
            <div class="global-messages__messagecontent">Look, I'm a success message!</div>
        </div>
        <div class="global-messages__message box box--spacing-none-sides box--info">
            <div class="global-messages__messagecontent">Look, I'm a info message!</div>
        </div>
    </div>

Styleguide components.global-messages
*/
.global-messages {
  padding-bottom: 24px; }
  .global-messages__messagecontent {
    margin: 0 auto;
    padding-left: 12px;
    padding-right: 12px;
    max-width: 1110px;
    max-width: 1400px; }
    @media (min-width: 440px) {
      .global-messages__messagecontent {
        padding-left: 24px;
        padding-right: 24px; } }
    @media (min-width: 720px) {
      .global-messages__messagecontent {
        padding-left: 60px;
        padding-right: 60px; } }

@media (max-width: 719px) {
  .hidden-xs {
    display: none !important; } }

@media (max-width: 959px) {
  .hidden-xs-md {
    display: none !important; } }

@media (min-width: 720px) {
  .visible-xs-only {
    display: none !important; } }

@media (min-width: 960px) {
  .visible-xs-md-only {
    display: none !important; } }

/** Max-width constraints

Useful to use on block elements that you do not want to use all the width.

This is basically a much more lightweight version of a "container". It has no
padding - and should normally be used within a "container" or something else that provides
side padding.

Example:: Setting max-width based on breakpoints

    <div class="max-width max-width--xs" style="background-color: #22447a; color: #fff">--xs</div>
    <div class="max-width max-width--md" style="background-color: #5f227a; color: #fff">--md</div>
    <div class="max-width max-width--lg" style="background-color: #7a225f; color: #fff">--lg</div>
    <div class="max-width max-width--xl" style="background-color: #227a62; color: #fff">--xl</div>

Example:: --center

    <div class="max-width max-width--center max-width--xs" style="background-color: #22447a; color: #fff">--xs</div>
    <div class="max-width max-width--center max-width--md" style="background-color: #5f227a; color: #fff">--md</div>
    <div class="max-width max-width--center max-width--lg" style="background-color: #7a225f; color: #fff">--lg</div>
    <div class="max-width max-width--center max-width--xl" style="background-color: #227a62; color: #fff">--xl</div>

Styleguide layout.max-width
 */
.max-width--xs {
  max-width: 440px; }

.max-width--md {
  max-width: 720px; }

.max-width--lg {
  max-width: 960px; }

.max-width--xl {
  max-width: 1240px; }

.max-width--center {
  margin-left: auto;
  margin-right: auto; }

/** Block

Make items become styled with ``display: block;`` or display ``inline-block``.
Can be used on any element, but it may not take if you have more explicit display
styles.

Example: block

    Some text before
    <span class="block">a span with <code>class="block"</code></span>
    some text after

Example: block block--inline

    Some text before
    <div class="block block--inline">a div with <code>class="block block--inline"</code></div>
    some text after

Styleguide layout.block
 */
.block {
  display: block; }
  .block--inline {
    display: inline-block; }

/** IE hacks/workarounds

IE 10/11 is still in use. Most of the theme works in IE 10, and even more
works in IE11. Since you may not care about perfect layout in IE, we have
selected to make some of the IE11 workarounds optional.

Styleguide ie-hacks
*/
/** Vertical centering with flexbox workaround

IE 11 can not center vertically in a flexbox layout
unless the wrapping element uses ``display: flex`` or ``display: inline-flex``.
To handle this, we provide the ``ie-hack-display-flex-wrapper`` and
``ie-hack-display-inline-flex-wrapper`` classes.

Example:: ie-hack-display-flex-wrapper

    <div class="ie-hack-display-flex-wrapper" style="background-color: blue;">
        <div style="min-height: 300px; display: flex; flex-direction: column; justify-content: center;">
            <div style="background-color: red;">Hello</div>
        </div>
    </div>

Example:: ie-hack-display-inline-flex-wrapper

    Hello
    <span class="ie-hack-display-inline-flex-wrapper" style="background-color: blue;">
        <span style="width: 200px; min-height: 120px; display: inline-flex; flex-direction: column; justify-content: center;">
            <div style="background-color: red;">cruel</div>
        </span>
    </span> world

Styleguide ie-hacks.display-flex-wrapper
*/
.ie-hack-display-flex-wrapper {
  display: flex;
  flex-direction: column; }

.ie-hack-display-inline-flex-wrapper {
  display: inline-flex;
  flex-direction: column; }

a,
.link {
  color: #2f2c2f;
  border-bottom: 2px solid #2f2c2f; }

@media print {
  @page {
    size: A4; }
  body {
    color: #000; }
  a {
    color: #000; }
  a[href^="http://"], a[href^="https://"] {
    word-wrap: break-word; }
    a[href^="http://"]:after, a[href^="https://"]:after {
      word-wrap: break-word;
      content: " (" attr(href) ")";
      font-size: 80%; } }

html {
  overflow: visible; }


.list > li, .markdown-wrapper ul > li,
.list .list__item, .markdown-wrapper ul .list__item {
  margin-bottom: 7px; }

.list--large > li, .list--large .list__item {
  margin-bottom: 7px; }
  @media (min-width: 720px) {
    .list--large > li, .list--large .list__item {
      margin-bottom: 28px; } }

.list--links > li, .list--links .list__item {
  margin-bottom: 7px; }

.list--contact .list__item {
  margin-bottom: 7px; }

@-moz-document url-prefix() {
  .select select, .dateinput__select select, .find-local__select select {
    text-indent: 0.01px;
    text-overflow: ''; }
  .select:after, .dateinput__select:after, .find-local__select:after {
    content: '';
    position: absolute;
    pointer-events: none;
    right: 0;
    top: 0;
    width: 40px;
    height: 100%;
    background: transparent; }
  .select:before, .dateinput__select:before, .find-local__select:before {
    z-index: 2; }
  .select option, .dateinput__select option, .find-local__select option {
    background-color: white; } }

/* Modal

Example: {type: isolated} Tight modal (modal--tight)

    <div class="modal modal--tight">
        <div class="modal__backdrop"></div>

        <div class="modal__content">
            <div class="modal__close">
                <button type="button" aria-title="Close">
                    <span class="cricon cricon--close" aria-hidden="true"></span>
                </button>
            </div>

            <div class="modal__title">
                <h2>The title</h2>
            </div>

            <p>
                <strong>The modal content.</strong>
                Nulla vitae elit libero, a pharetra augue. Duis mollis, est non commodo luctus,
                nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis
                consectetur purus sit amet fermentum.
            </p>
        </div>
    </div>

    <p>
        <strong>Should be behind the modal.</strong>
        Maecenas faucibus mollis interdum. Cras mattis
        consectetur purus sit amet fermentum. Morbi leo
        risus, porta ac consectetur ac, vestibulum at eros.
        Sed posuere consectetur est at lobortis. Morbi leo
        risus, porta ac consectetur ac, vestibulum at eros.
        Curabitur blandit tempus porttitor. Nullam quis
        risus eget urna mollis ornare vel eu leo.
    </p>


Example: {type: isolated} Normal/default sized modal

    <div class="modal">
        <div class="modal__backdrop"></div>

        <div class="modal__content">
            <div class="modal__close">
                <button type="button" aria-title="Close">
                    <span class="cricon cricon--close" aria-hidden="true"></span>
                </button>
            </div>

            <div class="modal__title">
                <h2>The title</h2>
            </div>

            <p>
                <strong>The modal content.</strong>
                Nulla vitae elit libero, a pharetra augue. Duis mollis, est non commodo luctus,
                nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis
                consectetur purus sit amet fermentum.
            </p>
        </div>
    </div>

    <p>
        <strong>Should be behind the modal.</strong>
        Maecenas faucibus mollis interdum. Cras mattis
        consectetur purus sit amet fermentum. Morbi leo
        risus, porta ac consectetur ac, vestibulum at eros.
        Sed posuere consectetur est at lobortis. Morbi leo
        risus, porta ac consectetur ac, vestibulum at eros.
        Curabitur blandit tempus porttitor. Nullam quis
        risus eget urna mollis ornare vel eu leo.
    </p>


Example: {type: isolated} Wide modal (modal--wide)

    <div class="modal modal--wide">
        <div class="modal__backdrop"></div>

        <div class="modal__content">
            <div class="modal__close">
                <button type="button" aria-title="Close">
                    <span class="cricon cricon--close" aria-hidden="true"></span>
                </button>
            </div>

            <div class="modal__title">
                <h2>The title</h2>
            </div>

            <p>
                <strong>The modal content.</strong>
                Nulla vitae elit libero, a pharetra augue. Duis mollis, est non commodo luctus,
                nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis
                consectetur purus sit amet fermentum.
            </p>
        </div>
    </div>

    <p>
        <strong>Should be behind the modal.</strong>
        Maecenas faucibus mollis interdum. Cras mattis
        consectetur purus sit amet fermentum. Morbi leo
        risus, porta ac consectetur ac, vestibulum at eros.
        Sed posuere consectetur est at lobortis. Morbi leo
        risus, porta ac consectetur ac, vestibulum at eros.
        Curabitur blandit tempus porttitor. Nullam quis
        risus eget urna mollis ornare vel eu leo.
    </p>


Example: {type: isolated} Extra wide modal (modal--xwide)

    <div class="modal modal--xwide">
        <div class="modal__backdrop"></div>

        <div class="modal__content">
            <div class="modal__close">
                <button type="button" aria-title="Close">
                    <span class="cricon cricon--close" aria-hidden="true"></span>
                </button>
            </div>

            <div class="modal__title">
                <h2>The title</h2>
            </div>

            <p>
                <strong>The modal content.</strong>
                Nulla vitae elit libero, a pharetra augue. Duis mollis, est non commodo luctus,
                nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis
                consectetur purus sit amet fermentum.
            </p>
        </div>
    </div>

    <p>
        <strong>Should be behind the modal.</strong>
        Maecenas faucibus mollis interdum. Cras mattis
        consectetur purus sit amet fermentum. Morbi leo
        risus, porta ac consectetur ac, vestibulum at eros.
        Sed posuere consectetur est at lobortis. Morbi leo
        risus, porta ac consectetur ac, vestibulum at eros.
        Curabitur blandit tempus porttitor. Nullam quis
        risus eget urna mollis ornare vel eu leo.
    </p>


Example: {type: isolated} (Almost) Full page width modal (modal--fullwidth)

    <div class="modal modal--fullwidth">
        <div class="modal__backdrop"></div>

        <div class="modal__content">
            <div class="modal__close">
                <button type="button" aria-title="Close">
                    <span class="cricon cricon--close" aria-hidden="true"></span>
                </button>
            </div>

            <div class="modal__title">
                <h2>The title</h2>
            </div>

            <p>
                <strong>The modal content.</strong>
                Nulla vitae elit libero, a pharetra augue. Duis mollis, est non commodo luctus,
                nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis
                consectetur purus sit amet fermentum.
            </p>
        </div>
    </div>

    <p>
        <strong>Should be behind the modal.</strong>
        Maecenas faucibus mollis interdum. Cras mattis
        consectetur purus sit amet fermentum. Morbi leo
        risus, porta ac consectetur ac, vestibulum at eros.
        Sed posuere consectetur est at lobortis. Morbi leo
        risus, porta ac consectetur ac, vestibulum at eros.
        Curabitur blandit tempus porttitor. Nullam quis
        risus eget urna mollis ornare vel eu leo.
    </p>

Styleguide components.modal
*/
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px; }
  .modal__content {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 24px;
    z-index: 40;
    top: 0;
    width: 700px;
    max-width: 100%;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(30, 30, 30, 0.3);
    background-color: #fff;
    padding: 24px;
    transform-origin: left top; }
    @media (min-width: 720px) {
      .modal__content {
        padding: 60px; } }
    .modal__content:focus {
      outline: 0; }
    .modal__content--animate {
      transition: transform 300ms cubic-bezier(0, 0, 0.1, 1), opacity 300ms cubic-bezier(0, 1, 0, 1); }
  .modal__title {
    margin-bottom: 60px; }
  .modal__close {
    position: absolute;
    top: 24px;
    right: 24px; }
  .modal--tight .modal__content {
    width: 460px; }
  .modal--wide .modal__content {
    width: 900px; }
  .modal--xwide .modal__content {
    width: 1200px; }
  .modal--fullwidth .modal__content {
    width: 98%; }

.backdrop, .modal__backdrop, .datetimepicker__backdrop, .expandable__bodymodal-backdrop, .page-menu__backdrop {
  position: fixed;
  z-index: 20;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(245, 245, 245, 0.9); }

/* Blocklist

List of block elements.


Example: Basic block list
    <ul class="blocklist">
        <li class="blocklist__item">Element 1</li>
        <li class="blocklist__item">Element 2</li>
        <li class="blocklist__item">Element 3</li>
    </ul>


Example: With headings for each element
    <div class="blocklist">
        <section class="blocklist__item">
            <h2 class="blocklist__itemtitle">Element 1</h2>
            <p>Inceptos Tristique Bibendum Parturient</p>
        </section>
        <section class="blocklist__item">
            <h2 class="blocklist__itemtitle">Element 2</h2>
            <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum.</p>
        </section>
        <section class="blocklist__item">
            <h2 class="blocklist__itemtitle">Element 3</h2>
            <p>Pellentesque Cursus Adipiscing</p>
        </section>
    </div>


Example: We have variants for heading sizes
    <div class="blocklist">
        <section class="blocklist__item">
            <h2 class="blocklist__itemtitle blocklist__itemtitle--small">Small heading</h2>
            <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum.</p>
        </section>
        <section class="blocklist__item">
            <h2 class="blocklist__itemtitle">Default heading</h2>
            <p>Inceptos Tristique Bibendum Parturient</p>
        </section>
        <section class="blocklist__item">
            <h2 class="blocklist__itemtitle blocklist__itemtitle--large">Large heading</h2>
            <p>Pellentesque Cursus Adipiscing</p>
        </section>
        <section class="blocklist__item">
            <h2 class="blocklist__itemtitle blocklist__itemtitle--xlarge">Extra large heading</h2>
            <p>Pellentesque Cursus Adipiscing</p>
        </section>
    </div>


Example: List of links
    <nav class="blocklist">
        <a class="blocklist__item blocklist__item--link">
            <h2 class="blocklist__itemtitle">Element 1</h2>
            <p>Inceptos Tristique Bibendum Parturient</p>
        </a>
        <a class="blocklist__item blocklist__item--link">
            <h2 class="blocklist__itemtitle">Element 2</h2>
            <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum.</p>
        </a>
        <a class="blocklist__item blocklist__item--link">
            <h2 class="blocklist__itemtitle">Element 3</h2>
            <p>Pellentesque Cursus Adipiscing</p>
        </a>
    </nav>


Example: With buttons
    <div class="blocklist">
        <section class="blocklist__item">
            <h2 class="blocklist__itemtitle">Element 1</h2>
            <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum.</p>
            <p>
                <button class="button  button--primary">Edit</button>
            </p>
        </section>
        <section class="blocklist__item">
            <h2 class="blocklist__itemtitle">Element 2</h2>
            <p>Pellentesque Cursus Adipiscing</p>
            <p>
                <button class="button  button--primary">Edit</button>
                <button class="button">Preview</button>
            </p>
        </section>
    </div>


Example: With tighter spacing
    <div class="blocklist blocklist--tight">
        <section class="blocklist__item">
            <h2 class="blocklist__itemtitle">Element 1</h2>
            <p>Inceptos Tristique Bibendum Parturient</p>
        </section>
        <section class="blocklist__item">
            <h2 class="blocklist__itemtitle">Element 2</h2>
            <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum.</p>
        </section>
        <section class="blocklist__item">
            <h2 class="blocklist__itemtitle">Element 3</h2>
            <p>Pellentesque Cursus Adipiscing</p>
        </section>
    </div>

Styleguide components.blocklist
*/
/* Color variants

Example: Default
    <ul class="blocklist">
        <li class="blocklist__item">Element 1</li>
        <li class="blocklist__item">Element 2</li>
        <li class="blocklist__item">Element 3</li>
    </ul>

Example: --neutral-light
    <ul class="blocklist">
        <li class="blocklist__item blocklist__item--neutral-light">Element 1</li>
        <li class="blocklist__item blocklist__item--neutral-light">Element 2</li>
        <li class="blocklist__item blocklist__item--neutral-light">Element 3</li>
    </ul>

Example: --neutral-xlight
    <ul class="blocklist">
        <li class="blocklist__item blocklist__item--neutral-xlight">Element 1</li>
        <li class="blocklist__item blocklist__item--neutral-xlight">Element 2</li>
        <li class="blocklist__item blocklist__item--neutral-xlight">Element 3</li>
    </ul>

Styleguide components.blocklist.1:colors
 */
/* Blocklist with action sidebar


Example: Various action sidebar layouts

    <div class="blocklist">
        <div class="blocklist__item  blocklist__item--with-action-sidebar">
            <div class="blocklist__action-sidebar">
                <button class="blocklist__action-button" aria-label="Delete">
                    <span class="cricon cricon--trash" aria-hidden="true"></span>
                </button>
            </div>
            <div class="blocklist__action-content">
                Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
            </div>
        </div>
        <div class="blocklist__item  blocklist__item--with-action-sidebar">
            <div class="blocklist__action-content">
                Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
            </div>
            <div class="blocklist__action-sidebar">
                <button class="blocklist__action-button" aria-label="Edit">
                    <span class="cricon cricon--pencil" aria-hidden="true"></span>
                </button>
            </div>
        </div>
        <div class="blocklist__item  blocklist__item--with-action-sidebar">
            <div class="blocklist__action-sidebar">
                <button class="blocklist__action-button" aria-label="Delete">
                    <span class="cricon cricon--trash" aria-hidden="true"></span>
                </button>
            </div>
            <div class="blocklist__action-content">
                Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
            </div>
            <div class="blocklist__action-sidebar">
                <button class="blocklist__action-button" aria-label="Edit">
                    <span class="cricon cricon--pencil" aria-hidden="true"></span>
                </button>
            </div>
        </div>
        <div class="blocklist__item  blocklist__item--with-action-sidebar">
            <div class="blocklist__action-sidebar">
                <button class="blocklist__action-button" aria-label="Edit">
                    <span class="cricon cricon--pencil" aria-hidden="true"></span>
                </button>
            </div>
            <div class="blocklist__action-sidebar">
                <button class="blocklist__action-button" aria-label="Delete">
                    <span class="cricon cricon--trash" aria-hidden="true"></span>
                </button>
            </div>
            <div class="blocklist__action-content">
                Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
            </div>
        </div>
        <div class="blocklist__item  blocklist__item--with-action-sidebar">
            <div class="blocklist__action-content">
                Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
            </div>
            <div class="blocklist__action-sidebar">
                <button class="blocklist__action-button" aria-label="Move down">
                    <span class="cricon cricon--chevron-down" aria-hidden="true"></span>
                </button>
            </div>
            <div class="blocklist__action-sidebar">
                <button class="blocklist__action-button" aria-label="Move up">
                    <span class="cricon cricon--chevron-up" aria-hidden="true"></span>
                </button>
            </div>
        </div>
        <div class="blocklist__item  blocklist__item--with-action-sidebar">
            <div class="blocklist__action-content">
                Two vertical buttons
            </div>
            <div class="blocklist__action-sidebar">
                <button class="blocklist__action-button" aria-label="Move up">
                    <span class="cricon cricon--chevron-up" aria-hidden="true"></span>
                </button>
                <button class="blocklist__action-button" aria-label="Move down">
                    <span class="cricon cricon--chevron-down" aria-hidden="true"></span>
                </button>
            </div>
        </div>
        <div class="blocklist__item  blocklist__item--with-action-sidebar">
            <a href="#" class="blocklist__action-content blocklist__action-content--link">
                Two vertical buttons with link on action-content
            </a>
            <div class="blocklist__action-sidebar">
                <button class="blocklist__action-button" aria-label="Move up">
                    <span class="cricon cricon--chevron-up" aria-hidden="true"></span>
                </button>
                <button class="blocklist__action-button" aria-label="Move down">
                    <span class="cricon cricon--chevron-down" aria-hidden="true"></span>
                </button>
            </div>
        </div>
        <div class="blocklist__item  blocklist__item--with-action-sidebar">
            <a href="#" class="blocklist__action-content blocklist__action-content--link">
                <h2 class="blocklist__itemtitle">Two vertical buttons with link on action-content</h2>
                <p>With complex content</p>
            </a>
            <div class="blocklist__action-sidebar">
                <button class="blocklist__action-button" aria-label="Move up">
                    <span class="cricon cricon--chevron-up" aria-hidden="true"></span>
                </button>
                <button class="blocklist__action-button" aria-label="Move down">
                    <span class="cricon cricon--chevron-down" aria-hidden="true"></span>
                </button>
            </div>
        </div>
        <div class="blocklist__item  blocklist__item--with-action-sidebar">
            <div class="blocklist__action-sidebar">
                <button class="blocklist__action-button" aria-label="Delete">
                    <span class="cricon cricon--trash" aria-hidden="true"></span>
                </button>
            </div>
            <a href="#" class="blocklist__action-content blocklist__action-content--link">
                LINK Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
            </a>
            <div class="blocklist__action-sidebar">
                <button class="blocklist__action-button" aria-label="Move down">
                    <span class="cricon cricon--chevron-down" aria-hidden="true"></span>
                </button>
            </div>
            <div class="blocklist__action-sidebar">
                <button class="blocklist__action-button" aria-label="Move up">
                    <span class="cricon cricon--chevron-up" aria-hidden="true"></span>
                </button>
            </div>
        </div>
        <div class="blocklist__item  blocklist__item--with-action-sidebar">
            <div class="blocklist__action-sidebar">
                <button class="blocklist__action-button" aria-label="Edit">
                    <span class="cricon cricon--pencil" aria-hidden="true"></span>
                </button>
            </div>
            <a href="#" class="blocklist__action-content blocklist__action-content--link">
                LINK Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
            </a>
        </div>
    </div>


Example: Action sidebar - button sizes

    <div class="blocklist">
        <div class="blocklist__item  blocklist__item--with-action-sidebar">
            <div class="blocklist__action-sidebar">
                <button class="blocklist__action-button blocklist__action-button--xxsmall" aria-label="Delete">
                    <span class="cricon cricon--trash" aria-hidden="true"></span>
                </button>
            </div>
            <div class="blocklist__action-content">
                blocklist__action-button--xxsmall
            </div>
        </div>
        <div class="blocklist__item  blocklist__item--with-action-sidebar">
            <div class="blocklist__action-sidebar">
                <button class="blocklist__action-button blocklist__action-button--xsmall" aria-label="Delete">
                    <span class="cricon cricon--trash" aria-hidden="true"></span>
                </button>
            </div>
            <div class="blocklist__action-content">
                blocklist__action-button--xsmall
            </div>
        </div>
        <div class="blocklist__item  blocklist__item--with-action-sidebar">
            <div class="blocklist__action-sidebar">
                <button class="blocklist__action-button" aria-label="Delete">
                    <span class="cricon cricon--trash" aria-hidden="true"></span>
                </button>
            </div>
            <div class="blocklist__action-content">
                blocklist__action-button default size
            </div>
        </div>
    </div>


Example: Action sidebar - button colors

    <div class="blocklist">
        <div class="blocklist__item  blocklist__item--with-action-sidebar">
            <div class="blocklist__action-sidebar">
                <button class="blocklist__action-button blocklist__action-button--warning" aria-label="Delete">
                    <span class="cricon cricon--trash" aria-hidden="true"></span>
                </button>
            </div>
            <div class="blocklist__action-content">
                blocklist__action-button--warning
            </div>
        </div>
        <div class="blocklist__item  blocklist__item--with-action-sidebar">
            <div class="blocklist__action-sidebar">
                <button class="blocklist__action-button blocklist__action-button--success" aria-label="Delete">
                    <span class="cricon cricon--check" aria-hidden="true"></span>
                </button>
            </div>
            <div class="blocklist__action-content">
                blocklist__action-button--success
            </div>
        </div>
        <div class="blocklist__item  blocklist__item--with-action-sidebar">
            <div class="blocklist__action-sidebar">
                <button class="blocklist__action-button" aria-label="Delete">
                    <span class="cricon cricon--pencil" aria-hidden="true"></span>
                </button>
            </div>
            <div class="blocklist__action-content">
                blocklist__action-button default color
            </div>
        </div>
    </div>


Example: Action sidebar combined with --tight

    <div class="blocklist blocklist--tight">
        <div class="blocklist__item  blocklist__item--with-action-sidebar">
            <div class="blocklist__action-sidebar">
                <button class="blocklist__action-button" aria-label="Delete">
                    <span class="cricon cricon--trash" aria-hidden="true"></span>
                </button>
            </div>
            <div class="blocklist__action-content">
                Item 1
            </div>
        </div>
        <div class="blocklist__item  blocklist__item--with-action-sidebar">
            <div class="blocklist__action-sidebar">
                <button class="blocklist__action-button" aria-label="Delete">
                    <span class="cricon cricon--trash" aria-hidden="true"></span>
                </button>
            </div>
            <div class="blocklist__action-content">
                Item 2
            </div>
        </div>
        <div class="blocklist__item  blocklist__item--with-action-sidebar">
            <div class="blocklist__action-sidebar">
                <button class="blocklist__action-button" aria-label="Delete">
                    <span class="cricon cricon--trash" aria-hidden="true"></span>
                </button>
            </div>
            <div class="blocklist__action-content">
                Item 3
            </div>
        </div>
    </div>


Styleguide components.blocklist.2:action-sidebar
*/
/* Blocklist with sidebar for moving items

WARNING: **This is deprecated.** Use _Blocklist with action sidebar_ instead.

Example:
    <div class="blocklist">
        <section class="blocklist__movable-item-wrapper">
            <div class="blocklist__item  blocklist__item--movable">
                <h2 class="blocklist__itemtitle">Element 1</h2>
                <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum.</p>
            </div>
            <div class="blocklist__movesidebar  blocklist__movesidebar--only-down">
                <button class="blocklist__movebutton" aria-label="Move Element 1 down">
                    <span class="cricon cricon--chevron-down cricon--color-light" aria-hidden="true"></span>
                </button>
            </div>
        </section>
        <section class="blocklist__movable-item-wrapper">
            <div class="blocklist__item  blocklist__item--movable">
                <h2 class="blocklist__itemtitle">Element 2</h2>
                <p>Tristique Vestibulum Purus</p>
            </div>
            <div class="blocklist__movesidebar">
                <button class="blocklist__movebutton" aria-label="Move Element 2 up">
                    <span class="cricon cricon--chevron-up cricon--color-light" aria-hidden="true">
                </button>
                <button class="blocklist__movebutton" aria-label="Move Element 2 down">
                    <span class="cricon cricon--chevron-down cricon--color-light" aria-hidden="true"></span>
                </button>
            </div>
        </section>
        <section class="blocklist__movable-item-wrapper">
            <div class="blocklist__item  blocklist__item--movable">
                Hello world
            </div>
            <div class="blocklist__movesidebar  blocklist__movesidebar--only-up">
                <button class="blocklist__movebutton" aria-label="Move Hello world up">
                    <span class="cricon cricon--chevron-up cricon--color-light" aria-hidden="true">
                </button>
            </div>
        </section>
    </div>


Styleguide components.blocklist.movable-items
*/
.blocklist__item {
  display: block;
  margin-bottom: 28px;
  padding: 28px 24px;
  border-radius: 5px;
  background-color: #fff;
  border: 2px solid #f1f1f2; }
  .blocklist__item--link {
    border: 2px solid #f1f1f2;
    color: #2f2c2f;
    text-decoration: none;
    transition: border-color 160ms; }
    .blocklist__item--link:hover, .blocklist__item--link:focus {
      color: #ce111d;
      text-decoration: none;
      border-color: #eeeeef; }
  .blocklist__item *:last-child {
    margin-bottom: 0; }
  .blocklist__item--movable {
    flex: 1 1 auto;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0; }
  .blocklist__item--neutral-xlight {
    background-color: #f5f5f5; }
  .blocklist__item--neutral-light {
    background-color: #eeeeef; }
  .blocklist__item--with-action-sidebar {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    padding: 0;
    border: none; }

.blocklist__itemtitle {
  margin-bottom: 7px;
  font-size: 22px;
  line-height: 28px; }
  .blocklist__itemtitle:last-child {
    margin-bottom: -4px; }
  @media screen and (min-width: 720px) {
    .blocklist__itemtitle {
      font-size: 24px;
      line-height: 35px; } }
  .blocklist__itemtitle--small {
    font-size: 16px;
    line-height: 21px; }
    @media screen and (min-width: 440px) {
      .blocklist__itemtitle--small {
        font-size: 19px;
        line-height: 28px; } }
  .blocklist__itemtitle--large {
    font-size: 19px;
    line-height: 28px; }
    @media screen and (min-width: 440px) {
      .blocklist__itemtitle--large {
        font-size: 23px;
        line-height: 28px; } }
  .blocklist__itemtitle--xlarge {
    font-size: 21px;
    line-height: 28px; }
    @media screen and (min-width: 440px) {
      .blocklist__itemtitle--xlarge {
        font-size: 26px;
        line-height: 35px; } }
    @media screen and (min-width: 720px) {
      .blocklist__itemtitle--xlarge {
        font-size: 27px;
        line-height: 35px; } }

.blocklist__movable-item-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: flex-start; }

.blocklist__movesidebar {
  border-radius: 0 5px 5px 0;
  overflow: hidden;
  margin-bottom: 28px;
  background-color: #002B49;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 0 0 60px;
  min-height: 100px; }
  .blocklist__movesidebar--only-down {
    justify-content: flex-end; }
  .blocklist__movesidebar--only-up {
    justify-content: flex-start; }

.blocklist__movebutton {
  border: none;
  border-radius: 0;
  padding: 10px 0;
  min-height: 50px;
  margin: 0; }
  .blocklist__movebutton:hover, .blocklist__movebutton:focus, .blocklist__movebutton:active {
    background-color: #40AAB8;
    color: #fff; }
  .blocklist__movebutton .icon {
    vertical-align: middle; }
  .blocklist__movebutton .cricon {
    vertical-align: middle; }

.blocklist__action-sidebar {
  flex: 0 0 auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-content: stretch;
  margin-right: 2px; }
  .blocklist__action-sidebar:first-child {
    border-radius: 5px 0 0 5px; }
  .blocklist__action-sidebar:last-child {
    border-radius: 0 5px 5px 0;
    margin-right: 0; }

.blocklist__action-button {
  flex: 1 0 auto;
  display: block;
  border: none;
  border-radius: 0;
  padding: 24px;
  margin: 0;
  color: #fff;
  background-color: #40AAB8; }
  .blocklist__action-button[disabled] {
    pointer-events: none;
    opacity: 0.4; }
  .blocklist__action-button:hover, .blocklist__action-button:focus, .blocklist__action-button:active {
    background-color: #002B49;
    color: #fff; }
  .blocklist__action-button--warning {
    color: #fff;
    background-color: #E01220; }
    .blocklist__action-button--warning[disabled] {
      pointer-events: none;
      opacity: 0.4; }
    .blocklist__action-button--warning:hover, .blocklist__action-button--warning:focus, .blocklist__action-button--warning:active {
      background-color: #b30e1a;
      color: #fff; }
  .blocklist__action-button--success {
    color: #fff;
    background-color: #007f1e; }
    .blocklist__action-button--success[disabled] {
      pointer-events: none;
      opacity: 0.4; }
    .blocklist__action-button--success:hover, .blocklist__action-button--success:focus, .blocklist__action-button--success:active {
      background-color: #006618;
      color: #fff; }
  .blocklist__action-button--xsmall {
    font-size: 15px;
    line-height: 21px; }
    @media screen and (min-width: 720px) {
      .blocklist__action-button--xsmall {
        font-size: 16px;
        line-height: 21px; } }
  .blocklist__action-button--xxsmall {
    font-size: 12px;
    line-height: 21px;
    padding: 18px; }
    @media screen and (min-width: 720px) {
      .blocklist__action-button--xxsmall {
        font-size: 13px;
        line-height: 21px; } }

.blocklist__action-content {
  padding: 28px 24px;
  flex: 1 1 auto;
  align-self: stretch;
  border-style: solid;
  border-width: 2px 0;
  border-color: #f1f1f2;
  display: flex;
  flex-direction: column;
  justify-content: center; }
  .blocklist__action-content:first-child {
    border-left-width: 2px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px; }
  .blocklist__action-content:last-child {
    border-right-width: 2px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px; }
  .blocklist__action-content--link {
    color: #2f2c2f;
    text-decoration: none;
    transition: border-color 160ms; }
    .blocklist__action-content--link:hover, .blocklist__action-content--link:focus {
      color: #ce111d;
      text-decoration: none;
      border-color: #eeeeef; }

.blocklist__action-sidebar + .blocklist__action-content {
  margin-left: -2px; }

.blocklist--tight .blocklist__movesidebar,
.blocklist--tight .blocklist__item {
  margin-bottom: 6px; }

.blocklist--tight .blocklist__item {
  padding: 14px 24px; }
  .blocklist--tight .blocklist__item--with-action-sidebar {
    padding: 0; }
    .blocklist--tight .blocklist__item--with-action-sidebar .blocklist__action-content {
      padding: 14px 24px; }

/* Blocklist header


Example: Basic block list
    <div class="blocklist-header">
        <h2 class="blocklist-header__title">Undersider</h2>
        <a class="blocklist-header__action">Legg til</a>
    </div>


Styleguide components.blocklist-header
*/
.blocklist-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px; }
  .blocklist-header__title {
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    font-size: 16px;
    line-height: 21px;
    margin: 0; }
    @media screen and (min-width: 440px) {
      .blocklist-header__title {
        font-size: 19px;
        line-height: 28px; } }
  .blocklist-header__action {
    font-size: 0.74em;
    margin: 0;
    width: auto; }

/* List of selectable elements

Used for components that emulate the behavior of ``<select>``,
radio button lists and checkbox button lists.

Example: {type: isolated} Basics
    <div class="container">
        <ul class="selectable-list">
            <li class="selectable-list__item" tabindex="0">
                <div class="selectable-list__itemcontent">
                    Element 1
                </div>
            </li>
            <li class="selectable-list__item" tabindex="0">
                <div class="selectable-list__itemcontent">
                    Element 2
                </div>
            </li>
            <li class="selectable-list__item" tabindex="0">
                <div class="selectable-list__itemcontent">
                    Element 3
                </div>
            </li>
        </ul>
    </div>

Example: {type: isolated} Neutral light items
    <div class="container">
        <ul class="selectable-list">
            <li class="selectable-list__item selectable-list__item--neutral-light" tabindex="0">
                <div class="selectable-list__itemcontent">
                    Element 1
                </div>
            </li>
            <li class="selectable-list__item selectable-list__item--neutral-light" tabindex="0">
                <div class="selectable-list__itemcontent">
                    Element 2
                </div>
            </li>
            <li class="selectable-list__item selectable-list__item--neutral-light" tabindex="0">
                <div class="selectable-list__itemcontent">
                    Element 3
                </div>
            </li>
        </ul>
    </div>

Example: {type: isolated} Title for each item
    <div class="container">
        <ul class="selectable-list">
            <li class="selectable-list__item" tabindex="0">
                <div class="selectable-list__itemcontent">
                    <h3 class="selectable-list__itemtitle">Element 1</h3>
                    <p>Dolor Etiam Mattis</p>
                </div>
            </li>
            <li class="selectable-list__item" tabindex="0">
                <div class="selectable-list__itemcontent">
                    <h3 class="selectable-list__itemtitle">Element 2</h3>
                    <p>Commodo Vestibulum Cras</p>
                </div>
            </li>
            <li class="selectable-list__item" tabindex="0">
                <div class="selectable-list__itemcontent">
                    <h3 class="selectable-list__itemtitle">Element 3</h3>
                    <p>Nunquam visum advena</p>
                </div>
            </li>
        </ul>
    </div>


Example: {type: isolated} With border separating items
    <div class="container">
        <ul class="selectable-list">
            <li class="selectable-list__item  selectable-list__item--bordered" tabindex="0">
                <div class="selectable-list__itemcontent">
                    Element 1
                </div>
            </li>
            <li class="selectable-list__item  selectable-list__item--bordered" tabindex="0">
                <div class="selectable-list__itemcontent">
                    Element 2
                </div>
            </li>
            <li class="selectable-list__item  selectable-list__item--bordered" tabindex="0">
                <div class="selectable-list__itemcontent">
                    Element 3
                </div>
            </li>
        </ul>
    </div>


Example: {type: isolated} Outlined with a border around each item
    <div class="container">
        <ul class="selectable-list">
            <li class="selectable-list__item  selectable-list__item--outlined" tabindex="0">
                <div class="selectable-list__itemcontent">
                    Element 1
                </div>
            </li>
            <li class="selectable-list__item  selectable-list__item--outlined" tabindex="0">
                <div class="selectable-list__itemcontent">
                    Element 2
                </div>
            </li>
            <li class="selectable-list__item  selectable-list__item--outlined" tabindex="0">
                <div class="selectable-list__itemcontent">
                    Element 3
                </div>
            </li>
        </ul>
    </div>


Example: {type: isolated} With selected items
    <div class="container">
        <ul class="selectable-list">
            <li class="selectable-list__item" tabindex="0">
                <div class="selectable-list__itemcontent">
                    Element 1
                </div>
            </li>
            <li class="selectable-list__item selectable-list__item--selected" tabindex="0">
                <div class="selectable-list__itemcontent">
                    <h3 class="selectable-list__itemtitle">Element 2</h3>
                    Aenean lacinia bibendum nulla sed consectetur.
                    Praesent commodo cursus magna, vel scelerisque nisl
                    consectetur et. Maecenas faucibus mollis interdum.
                </div>
            </li>
            <li class="selectable-list__item" tabindex="0">
                <div class="selectable-list__itemcontent">
                    Element 3
                </div>
            </li>
            <li class="selectable-list__item selectable-list__item--selected" tabindex="0">
                <div class="selectable-list__itemcontent">
                    Element 4
                </div>
            </li>
        </ul>
    </div>


Example: {type: isolated} With icon
    <div class="container">
        <ul class="selectable-list">
            <li class="selectable-list__item" tabindex="0">
                <div class="selectable-list__icon"></div>
                <div class="selectable-list__itemcontent">
                    Element 1
                </div>
            </li>
            <li class="selectable-list__item selectable-list__item--selected" tabindex="0">
                <div class="selectable-list__icon">
                    <span class="cricon cricon--check cricon--color-light"></span>
                </div>
                <div class="selectable-list__itemcontent">
                    <h3 class="selectable-list__itemtitle">Element 2</h3>
                    Aenean lacinia bibendum nulla sed consectetur.
                    Praesent commodo cursus magna, vel scelerisque nisl
                    consectetur et. Maecenas faucibus mollis interdum.
                </div>
            </li>
            <li class="selectable-list__item" tabindex="0">
                <div class="selectable-list__icon"></div>
                <div class="selectable-list__itemcontent">
                    Element 3
                </div>
            </li>
            <li class="selectable-list__item selectable-list__item--selected" tabindex="0">
                <div class="selectable-list__icon">
                    <span class="cricon cricon--check cricon--color-light"></span>
                </div>
                <div class="selectable-list__itemcontent">
                    Element 4
                </div>
            </li>
        </ul>
    </div>

Example: {type: isolated} With icon after
    <div class="container">
        <ul class="selectable-list">
            <li class="selectable-list__item" tabindex="0">
                <div class="selectable-list__itemcontent">
                    Element 1
                </div>
                <div class="selectable-list__icon"></div>
            </li>
            <li class="selectable-list__item selectable-list__item--selected" tabindex="0">
                <div class="selectable-list__itemcontent">
                    <h3 class="selectable-list__itemtitle">Element 2</h3>
                    Aenean lacinia bibendum nulla sed consectetur.
                    Praesent commodo cursus magna, vel scelerisque nisl
                    consectetur et. Maecenas faucibus mollis interdum.
                </div>
                <div class="selectable-list__icon">
                    <i class="cricon cricon--close cricon--color-light"></i>
                </div>
            </li>
            <li class="selectable-list__item" tabindex="0">
                <div class="selectable-list__itemcontent">
                    Element 3
                </div>
                <div class="selectable-list__icon"></div>
            </li>
            <li class="selectable-list__item selectable-list__item--selected" tabindex="0">
                <div class="selectable-list__itemcontent">
                    Element 4
                </div>
                <div class="selectable-list__icon">
                    <i class="cricon cricon--close cricon--color-light"></i>
                </div>
            </li>
        </ul>
    </div>

Example: {type: isolated} Inline
    <div class="container">
        <ul class="selectable-list selectable-list--inline">
            <li class="selectable-list__item" tabindex="0">
                <div class="selectable-list__itemcontent">Element 1</div>
            </li>
            <li class="selectable-list__item" tabindex="0">
                <div class="selectable-list__itemcontent">Element 2</div>
            </li>
            <li class="selectable-list__item" tabindex="0">
                <div class="selectable-list__itemcontent">Element 3</div>
            </li>
        </ul>
    </div>

Example: {type: isolated} Inline list wraps
    <div class="container">
        <ul class="selectable-list selectable-list--inline">
            <li class="selectable-list__item" tabindex="0">
                <div class="selectable-list__itemcontent">Sollicitudin Vestibulum</div>
            </li>
            <li class="selectable-list__item" tabindex="0">
                <div class="selectable-list__itemcontent">Condimentum Nullam Porta</div>
            </li>
            <li class="selectable-list__item" tabindex="0">
                <div class="selectable-list__itemcontent">Fermentum Ullamcorper Ligula</div>
            </li>
            <li class="selectable-list__item" tabindex="0">
                <div class="selectable-list__itemcontent">Nullam Quam Dolor</div>
            </li>
            <li class="selectable-list__item" tabindex="0">
                <div class="selectable-list__itemcontent">Ridiculus Quam</div>
            </li>
            <li class="selectable-list__item" tabindex="0">
                <div class="selectable-list__itemcontent">Dapibus Sem Euismod</div>
            </li>
            <li class="selectable-list__item" tabindex="0">
                <div class="selectable-list__itemcontent">Cursus Parturient Nibh</div>
            </li>
        </ul>
    </div>


Example: {type: isolated} Inline centered
    <div class="container">
        <ul class="selectable-list selectable-list--inline-center">
            <li class="selectable-list__item" tabindex="0">
                <div class="selectable-list__itemcontent">Sollicitudin Vestibulum</div>
            </li>
            <li class="selectable-list__item" tabindex="0">
                <div class="selectable-list__itemcontent">Condimentum Nullam Porta</div>
            </li>
            <li class="selectable-list__item" tabindex="0">
                <div class="selectable-list__itemcontent">Fermentum Ullamcorper Ligula</div>
            </li>
            <li class="selectable-list__item" tabindex="0">
                <div class="selectable-list__itemcontent">Nullam Quam Dolor</div>
            </li>
            <li class="selectable-list__item" tabindex="0">
                <div class="selectable-list__itemcontent">Ridiculus Quam</div>
            </li>
            <li class="selectable-list__item" tabindex="0">
                <div class="selectable-list__itemcontent">Dapibus Sem Euismod</div>
            </li>
            <li class="selectable-list__item" tabindex="0">
                <div class="selectable-list__itemcontent">Cursus Parturient Nibh</div>
            </li>
        </ul>
    </div>


Example: {type: isolated} Inline with icon
    <div class="container">
        <ul class="selectable-list selectable-list--inline">
            <li class="selectable-list__item  selectable-list__item--selected" tabindex="0">
                <div class="selectable-list__itemcontent">
                    Element 1
                </div>
                <div class="selectable-list__icon">
                    <i class="cricon cricon--close cricon--color-light"></i>
                </div>
            </li>
            <li class="selectable-list__item" tabindex="0">
                <div class="selectable-list__itemcontent">
                    Element 2
                </div>
            </li>
            <li class="selectable-list__item  selectable-list__item--selected" tabindex="0">
                <div class="selectable-list__itemcontent">
                    Element 3
                </div>
                <div class="selectable-list__icon">
                    <i class="cricon cricon--close cricon--color-light"></i>
                </div>
            </li>
        </ul>
    </div>


Example: {type: isolated} Inline outlined
    <div class="container">
        <ul class="selectable-list selectable-list--inline">
            <li class="selectable-list__item  selectable-list__item--outlined" tabindex="0">
                <div class="selectable-list__itemcontent">
                    Element 1
                </div>
            </li>
            <li class="selectable-list__item  selectable-list__item--outlined  selectable-list__item--selected" tabindex="0">
                <div class="selectable-list__itemcontent">
                    Element 2
                </div>
            </li>
            <li class="selectable-list__item  selectable-list__item--outlined" tabindex="0">
                <div class="selectable-list__itemcontent">
                    Element 3
                </div>
            </li>
        </ul>
    </div>

Example: {type: isolated} Inline item content is always single line - ellipsis for long text
    <div class="container">
        <ul class="selectable-list selectable-list--inline">
            <li class="selectable-list__item  selectable-list__item--selected" tabindex="0">
                <div class="selectable-list__itemcontent">
                    <h3 class="selectable-list__itemtitle">Element 1</h3>
                    <p>Donec ullamcorper nulla non metus auctor fringilla. Vestibulum
                    id ligula porta felis euismod semper. Curabitur blandit tempus porttitor.</p>
                </div>
                <div class="selectable-list__icon">
                    <i class="cricon cricon--close cricon--color-light"></i>
                </div>
            </li>
            <li class="selectable-list__item" tabindex="0">
                <div class="selectable-list__itemcontent">
                    <h3 class="selectable-list__itemtitle">Element 2</h3>
                </div>
            </li>
            <li class="selectable-list__item" tabindex="0">
                <div class="selectable-list__itemcontent">
                    <h3 class="selectable-list__itemtitle">Element 3</h3>
                    <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis
                    dis parturient montes, nascetur ridiculus mus.</>
                </div>
            </li>
        </ul>
    </div>

Styleguide components.selectable-list
*/
.selectable-list {
  display: flex;
  flex-direction: column;
  margin-bottom: 35px; }
  .selectable-list__item {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    margin: 0;
    border: 0;
    cursor: pointer;
    outline: none;
    border-radius: 5px;
    background-color: #fff;
    text-align: left; }
    .selectable-list__item--neutral-xlight {
      background-color: #f5f5f5; }
    .selectable-list__item--neutral-light {
      background-color: #eeeeef; }
    .selectable-list__item--bordered {
      border-radius: 0;
      border-bottom: 2px solid #2f2c2f; }
      .selectable-list__item--bordered:first-of-type {
        border-top-left-radius: 5px;
        border-top-right-radius: 5px; }
      .selectable-list__item--bordered:last-of-type {
        border: 0;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px; }
    .selectable-list__item--outlined {
      border-radius: 0;
      border: 2px solid #eeeeef;
      border-top-width: 0; }
      .selectable-list__item--outlined:first-of-type {
        border-top-width: 2px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px; }
      .selectable-list__item--outlined:last-of-type {
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px; }
    .selectable-list__item:hover, .selectable-list__item:focus {
      color: #fff;
      background-color: #ce111d; }
    .selectable-list__item--selected {
      color: #fff;
      background-color: #002B49; }
  .selectable-list__icon {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 15px;
    width: 15px;
    position: relative; }
    .selectable-list__icon:first-child {
      margin-left: 12px; }
    .selectable-list__icon:last-child {
      margin-right: 12px; }
    .selectable-list__icon .cricon:before {
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      font-size: 12px;
      margin-top: -5px; }
  .selectable-list__itemcontent {
    font-size: 15px;
    line-height: 21px;
    flex-grow: 1;
    padding: 7px 12px;
    display: block; }
    @media screen and (min-width: 720px) {
      .selectable-list__itemcontent {
        font-size: 16px;
        line-height: 21px; } }
    .selectable-list__itemcontent > *:first-child {
      margin-top: 0;
      padding-top: 0; }
    .selectable-list__itemcontent > *:last-child {
      padding-bottom: 0;
      margin-bottom: 0; }
  .selectable-list__itemtitle {
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    font-size: 15px;
    line-height: 21px;
    display: block;
    margin-bottom: 0; }
    @media screen and (min-width: 720px) {
      .selectable-list__itemtitle {
        font-size: 16px;
        line-height: 21px; } }
  @media (min-width: 720px) {
    .selectable-list--inline, .selectable-list--inline-center {
      flex-direction: row;
      flex-wrap: wrap;
      margin-bottom: 63px; }
      .selectable-list--inline .selectable-list__item, .selectable-list--inline-center .selectable-list__item {
        margin: 0 6px 6px 0; }
        .selectable-list--inline .selectable-list__item:first-child, .selectable-list--inline-center .selectable-list__item:first-child {
          margin-left: 0; }
        .selectable-list--inline .selectable-list__item--outlined, .selectable-list--inline-center .selectable-list__item--outlined {
          border: 2px solid #eeeeef;
          border-radius: 5px; }
      .selectable-list--inline .selectable-list__itemcontent, .selectable-list--inline-center .selectable-list__itemcontent,
      .selectable-list--inline .selectable-list__itemcontent > *, .selectable-list--inline-center .selectable-list__itemcontent > * {
        white-space: nowrap;
        max-width: 440px;
        overflow: hidden;
        text-overflow: ellipsis; } }
  @media (min-width: 720px) {
    .selectable-list--inline-center {
      justify-content: center; } }
  .selectable-list--nomargin {
    margin-bottom: 0; }
  .selectable-list--compact {
    margin-bottom: 7px; }

/* Tabs

http://simplyaccessible.com/article/danger-aria-tabs/

Example: {type: isolated} Simple example

    <nav class="tabs__tab-list">
        <a class="tabs__tab  tabs__tab--active"
           href="#ipa"
           id="tab-ipa"
           data-ievv-jsbase-widget="cradmin-tab-button">
            India Pale Ale (IPA)
        </a>
        <a class="tabs__tab"
           href="#gueuze"
           id="tab-gueuze"
           data-ievv-jsbase-widget="cradmin-tab-button">
            Gueuze
        </a>
        <a class="tabs__tab"
           href="#imperial-stout"
           id="tab-imperial-stout"
           data-ievv-jsbase-widget="cradmin-tab-button">
            Imperial Stout
        </a>
    </nav>

    <div class="tabs__panel"
             id="ipa"
             data-ievv-jsbase-widget="cradmin-tab-panel">
        <div class="container">
            <h2>India Pale Ale (IPA)</h2>
            ...
        </div>
    </div>
    <div class="tabs__panel"
             id="gueuze"
             data-ievv-jsbase-widget="cradmin-tab-panel">
        <div class="container">
            <h2>Gueuze</h2>
            ...
        </div>
    </div>
    <div class="tabs__panel"
             id="imperial-stout"
             data-ievv-jsbase-widget="cradmin-tab-panel">
        <div class="container">
            <h2>Imperial Stout</h2>
            ...
        </div>
    </div>


Example: {type: isolated} Styling using sections

    <div class="adminui-page-section">
        <div class="container">
            <nav class="tabs__tab-list">
                <a class="tabs__tab  tabs__tab--active"
                   href="#ipa"
                   id="tab-ipa"
                   data-ievv-jsbase-widget="cradmin-tab-button">
                    India Pale Ale (IPA)
                </a>
                <a class="tabs__tab"
                   href="#gueuze"
                   id="tab-gueuze"
                   data-ievv-jsbase-widget="cradmin-tab-button">
                    Gueuze
                </a>
                <a class="tabs__tab"
                   href="#imperial-stout"
                   id="tab-imperial-stout"
                   data-ievv-jsbase-widget="cradmin-tab-button">
                    Imperial Stout
                </a>
            </nav>
        </div>
    </div>

    <section class="adminui-page-section  tabs__panel"
             id="ipa"
             data-ievv-jsbase-widget="cradmin-tab-panel">
        <div class="container">
            <h2>India Pale Ale (IPA)</h2>
            ...
        </div>
    </section>
    <section class="adminui-page-section  tabs__panel"
             id="gueuze"
             data-ievv-jsbase-widget="cradmin-tab-panel">
        <div class="container">
            <h2>Gueuze</h2>
            ...
        </div>
    </section>
    <section class="adminui-page-section  tabs__panel"
             id="imperial-stout"
             data-ievv-jsbase-widget="cradmin-tab-panel">
        <div class="container">
            <h2>Imperial Stout</h2>
            ...
        </div>
    </section>

Styleguide components.tabs
*/
.tabs__tab-list {
  position: relative;
  display: flex;
  border-bottom: 3px solid #002B49; }
  .tabs__tab-list:after {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    content: '';
    position: absolute;
    display: block;
    height: 3px;
    bottom: -3px;
    background-color: #002B49; }

.tabs__tab {
  font-family: "Maison Neue", Helvetica, sans-serif;
  font-weight: bold;
  display: block;
  text-align: center;
  padding: 7px 24px;
  border: 0;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  margin-right: 3px; }
  .tabs__tab:hover, .tabs__tab:focus {
    color: #2f2c2f;
    background-color: #e3e4e3; }
  .tabs__tab--active, .tabs__tab--active:hover, .tabs__tab--active:focus {
    color: #fff;
    background-color: #002B49; }

.tabs__panel {
  display: none; }
  .tabs__panel--active {
    display: block; }

/* Dropdown

Example: {type: isolated}

    <div class="container">
        <input type="text" class="input input--outlined">
        <div class="dropdown">
            <div class="dropdown__content">
                Floating content here.
            </div>
        </div>
        <p>
            Just some text to ensure it is floating!
            Aenean lacinia bibendum nulla sed consectetur. Cras justo odio,
            dapibus ac facilisis in, egestas eget quam. Vivamus sagittis
            lacus vel augue laoreet rutrum faucibus dolor auctor. Donec
            id elit non mi porta gravida at eget metus. Morbi leo
            risus, porta ac consectetur ac, vestibulum at eros.
            Vestibulum id ligula porta felis euismod semper.
            Donec id elit non mi porta gravida at eget metus.
        </p>
    </div>

Example: {type: isolated} --spaced

    <div class="container">
        <input type="text" class="input input--outlined">
        <div class="dropdown">
            <div class="dropdown__content dropdown__content--spaced">
                Floating content here.
            </div>
        </div>
        <p>
            Just some text to ensure it is floating!
            Aenean lacinia bibendum nulla sed consectetur. Cras justo odio,
            dapibus ac facilisis in, egestas eget quam. Vivamus sagittis
            lacus vel augue laoreet rutrum faucibus dolor auctor. Donec
            id elit non mi porta gravida at eget metus. Morbi leo
            risus, porta ac consectetur ac, vestibulum at eros.
            Vestibulum id ligula porta felis euismod semper.
            Donec id elit non mi porta gravida at eget metus.
        </p>
    </div>

Example: {type: isolated} --spaced-sm

    <div class="container">
        <input type="text" class="input input--outlined">
        <div class="dropdown">
            <div class="dropdown__content dropdown__content--spaced-sm">
                Floating content here.
            </div>
        </div>
        <p>
            Just some text to ensure it is floating!
            Aenean lacinia bibendum nulla sed consectetur. Cras justo odio,
            dapibus ac facilisis in, egestas eget quam. Vivamus sagittis
            lacus vel augue laoreet rutrum faucibus dolor auctor. Donec
            id elit non mi porta gravida at eget metus. Morbi leo
            risus, porta ac consectetur ac, vestibulum at eros.
            Vestibulum id ligula porta felis euismod semper.
            Donec id elit non mi porta gravida at eget metus.
        </p>
    </div>

Example: {type: isolated} --spaced-lg

    <div class="container">
        <input type="text" class="input input--outlined">
        <div class="dropdown">
            <div class="dropdown__content dropdown__content--spaced-lg">
                Floating content here.
            </div>
        </div>
        <p>
            Just some text to ensure it is floating!
            Aenean lacinia bibendum nulla sed consectetur. Cras justo odio,
            dapibus ac facilisis in, egestas eget quam. Vivamus sagittis
            lacus vel augue laoreet rutrum faucibus dolor auctor. Donec
            id elit non mi porta gravida at eget metus. Morbi leo
            risus, porta ac consectetur ac, vestibulum at eros.
            Vestibulum id ligula porta felis euismod semper.
            Donec id elit non mi porta gravida at eget metus.
        </p>
    </div>

Styleguide components.dropdown
*/
.dropdown {
  position: relative;
  overflow: visible; }
  .dropdown__content {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    margin-bottom: 24px;
    border-radius: 5px;
    box-shadow: 0 2px 6px rgba(30, 30, 30, 0.3);
    background-color: #fff; }
    .dropdown__content--spaced {
      padding: 24px; }
    .dropdown__content--spaced-sm {
      padding: 12px; }
    .dropdown__content--spaced-lg {
      padding: 60px; }

/* Date and time inputs


Example: {type: isolated} Date
    <section class="adminui-page-section  adminui-page-section--tight  adminui-page-section--center">
        <h3>Pick a date</h3>

        <div class="dateinput">
            <div class="dateinput__group">
                <label class="dateinput__select">
                    <select>
                        <option value="0" disabled selected>Day</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <!-- options for the rest of the days of a month -->
                    </select>
                </label>
                <label class="dateinput__select">
                    <select>
                        <option value="0" disabled selected>Month</option>
                        <option value="1">Jan</option>
                        <option value="2">Feb</option>
                        <option value="3">Mar</option>
                        <!-- options for the rest of the months -->
                    </select>
                </label>
                <label class="dateinput__select">
                    <select>
                        <option value="0" disabled selected>Year</option>
                        <option value="1">2015</option>
                        <option value="1">2016</option>
                        <option value="1">2017</option>
                        <option value="1">2018</option>
                        <option value="1">2019</option>
                        <option value="1">2020</option>
                        <!-- options for more years -->
                    </select>
                </label>
            </div>
        </div>

    </section>

Example: {type: isolated} Datetime
    <section class="adminui-page-section  adminui-page-section--tight  adminui-page-section--center">
        <h3>Pick a date and time</h3>

        <div class="dateinput">
            <div class="dateinput__group">
                <label class="dateinput__select">
                    <select>
                        <option value="0" disabled selected>Day</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <!-- options for the rest of the days of a month -->
                    </select>
                </label>
                <label class="dateinput__select">
                    <select>
                        <option value="0" disabled selected>Month</option>
                        <option value="1">Jan</option>
                        <option value="2">Feb</option>
                        <option value="3">Mar</option>
                        <!-- options for the rest of the months -->
                    </select>
                </label>
                <label class="dateinput__select">
                    <select>
                        <option value="0" disabled selected>Year</option>
                        <option value="1">2015</option>
                        <option value="1">2016</option>
                        <option value="1">2017</option>
                        <option value="1">2018</option>
                        <option value="1">2019</option>
                        <option value="1">2020</option>
                        <!-- options for more years -->
                    </select>
                </label>
            </div>

            <label class="dateinput__group">
                <input
                    class="dateinput__input"
                    type="number"
                    min="0"
                    max="24"
                    step="1"
                    placeholder="00"
                />
                <span class="dateinput__separator">:</span>
                <input
                    class="dateinput__input"
                    type="number"
                    min="0"
                    max="59"
                    step="1"
                    placeholder="00"
                />
            </label>
        </div>

    </section>

Example: {type: isolated} --size-xsmall
    <section class="adminui-page-section  adminui-page-section--tight  adminui-page-section--center">
        <div class="dateinput dateinput--size-xsmall">
            <div class="dateinput__group">
                <label class="dateinput__select">
                    <select>
                        <option value="0" disabled selected>Day</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <!-- options for the rest of the days of a month -->
                    </select>
                </label>
                <label class="dateinput__select">
                    <select>
                        <option value="0" disabled selected>Month</option>
                        <option value="1">Jan</option>
                        <option value="2">Feb</option>
                        <option value="3">Mar</option>
                        <!-- options for the rest of the months -->
                    </select>
                </label>
                <label class="dateinput__select">
                    <select>
                        <option value="0" disabled selected>Year</option>
                        <option value="1">2015</option>
                        <option value="1">2016</option>
                        <option value="1">2017</option>
                        <option value="1">2018</option>
                        <option value="1">2019</option>
                        <option value="1">2020</option>
                        <!-- options for more years -->
                    </select>
                </label>
            </div>

            <label class="dateinput__group">
                <input
                    class="dateinput__input"
                    type="number"
                    min="0"
                    max="24"
                    step="1"
                    placeholder="00"
                />
                <span class="dateinput__separator">:</span>
                <input
                    class="dateinput__input"
                    type="number"
                    min="0"
                    max="59"
                    step="1"
                    placeholder="00"
                />
            </label>
        </div>
    </section>

Example: {type: isolated} --size-small
    <section class="adminui-page-section  adminui-page-section--tight  adminui-page-section--center">
        <div class="dateinput dateinput--size-small">
            <div class="dateinput__group">
                <label class="dateinput__select">
                    <select>
                        <option value="0" disabled selected>Day</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <!-- options for the rest of the days of a month -->
                    </select>
                </label>
                <label class="dateinput__select">
                    <select>
                        <option value="0" disabled selected>Month</option>
                        <option value="1">Jan</option>
                        <option value="2">Feb</option>
                        <option value="3">Mar</option>
                        <!-- options for the rest of the months -->
                    </select>
                </label>
                <label class="dateinput__select">
                    <select>
                        <option value="0" disabled selected>Year</option>
                        <option value="1">2015</option>
                        <option value="1">2016</option>
                        <option value="1">2017</option>
                        <option value="1">2018</option>
                        <option value="1">2019</option>
                        <option value="1">2020</option>
                        <!-- options for more years -->
                    </select>
                </label>
            </div>

            <label class="dateinput__group">
                <input
                    class="dateinput__input"
                    type="number"
                    min="0"
                    max="24"
                    step="1"
                    placeholder="00"
                />
                <span class="dateinput__separator">:</span>
                <input
                    class="dateinput__input"
                    type="number"
                    min="0"
                    max="59"
                    step="1"
                    placeholder="00"
                />
            </label>
        </div>
    </section>

Example: {type: isolated} --size-large
    <section class="adminui-page-section  adminui-page-section--tight  adminui-page-section--center">
        <div class="dateinput dateinput--size-large">
            <div class="dateinput__group">
                <label class="dateinput__select">
                    <select>
                        <option value="0" disabled selected>Day</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <!-- options for the rest of the days of a month -->
                    </select>
                </label>
                <label class="dateinput__select">
                    <select>
                        <option value="0" disabled selected>Month</option>
                        <option value="1">Jan</option>
                        <option value="2">Feb</option>
                        <option value="3">Mar</option>
                        <!-- options for the rest of the months -->
                    </select>
                </label>
                <label class="dateinput__select">
                    <select>
                        <option value="0" disabled selected>Year</option>
                        <option value="1">2015</option>
                        <option value="1">2016</option>
                        <option value="1">2017</option>
                        <option value="1">2018</option>
                        <option value="1">2019</option>
                        <option value="1">2020</option>
                        <!-- options for more years -->
                    </select>
                </label>
            </div>

            <label class="dateinput__group">
                <input
                    class="dateinput__input"
                    type="number"
                    min="0"
                    max="24"
                    step="1"
                    placeholder="00"
                />
                <span class="dateinput__separator">:</span>
                <input
                    class="dateinput__input"
                    type="number"
                    min="0"
                    max="59"
                    step="1"
                    placeholder="00"
                />
            </label>
        </div>
    </section>


Styleguide components.dateinput
*/
.dateinput {
  font-family: "Maison Neue Mono", Helvetica, sans-serif;
  margin-bottom: 7px; }
  @media (min-width: 440px) {
    .dateinput {
      display: inline-flex; } }
  .dateinput__group {
    display: flex;
    align-items: baseline;
    justify-content: center;
    margin-bottom: 14px; }
    @media (min-width: 440px) {
      .dateinput__group {
        margin-bottom: 0; }
        .dateinput__group + .dateinput__group {
          position: relative;
          margin-left: 42px; }
          .dateinput__group + .dateinput__group:before {
            content: '—';
            position: absolute;
            display: block;
            left: -42px;
            width: 42px;
            text-align: center;
            line-height: 1;
            top: 50%;
            transform: translateY(-50%); } }
  .dateinput__select {
    position: relative;
    font-family: inherit;
    border-radius: 0;
    margin: 0;
    margin-left: -1.5px;
    margin-right: -1.5px; }
    .dateinput__select:first-of-type {
      margin-left: 0;
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px; }
    .dateinput__select:last-of-type {
      margin-right: 0;
      border-top-right-radius: 5px;
      border-bottom-right-radius: 5px; }
    .dateinput__select:hover, .dateinput__select:focus {
      z-index: 2; }
    .dateinput__select select {
      font-size: inherit; }
  .dateinput__separator {
    position: relative;
    pointer-events: none;
    z-index: 2;
    width: 10px;
    margin-left: -5px;
    margin-right: -5px;
    text-align: center; }
  .dateinput__input {
    font-size: 15px;
    line-height: 21px;
    font-family: inherit;
    margin: 0;
    height: 100%;
    padding: 0 12px;
    width: 54px; }
    @media screen and (min-width: 720px) {
      .dateinput__input {
        font-size: 16px;
        line-height: 21px; } }
    .dateinput__input:first-of-type {
      border-right: 0;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      text-align: right;
      padding-left: 0; }
    .dateinput__input:last-of-type {
      border-left: 0;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      padding-right: 0; }
  .dateinput--size-xsmall .dateinput__select {
    font-size: 15px;
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.2;
    height: 42px; }
    @media screen and (min-width: 720px) {
      .dateinput--size-xsmall .dateinput__select {
        font-size: 16px; } }
    @media screen and (min-width: 440px) {
      .dateinput--size-xsmall .dateinput__select {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 42px; } }
    @media screen and (min-width: 720px) {
      .dateinput--size-xsmall .dateinput__select {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 42px; } }
    @media screen and (min-width: 960px) {
      .dateinput--size-xsmall .dateinput__select {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 42px; } }
    @media screen and (min-width: 1240px) {
      .dateinput--size-xsmall .dateinput__select {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 42px; } }
  .dateinput--size-xsmall .dateinput__input {
    font-size: 15px;
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.2;
    height: 42px; }
    @media screen and (min-width: 720px) {
      .dateinput--size-xsmall .dateinput__input {
        font-size: 16px; } }
    @media screen and (min-width: 440px) {
      .dateinput--size-xsmall .dateinput__input {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 42px; } }
    @media screen and (min-width: 720px) {
      .dateinput--size-xsmall .dateinput__input {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 42px; } }
    @media screen and (min-width: 960px) {
      .dateinput--size-xsmall .dateinput__input {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 42px; } }
    @media screen and (min-width: 1240px) {
      .dateinput--size-xsmall .dateinput__input {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 42px; } }
  .dateinput--size-small .dateinput__select {
    font-size: 16px;
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.2;
    height: 48px; }
    @media screen and (min-width: 440px) {
      .dateinput--size-small .dateinput__select {
        font-size: 19px; } }
    @media screen and (min-width: 440px) {
      .dateinput--size-small .dateinput__select {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 48px; } }
    @media screen and (min-width: 720px) {
      .dateinput--size-small .dateinput__select {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 48px; } }
    @media screen and (min-width: 960px) {
      .dateinput--size-small .dateinput__select {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 48px; } }
    @media screen and (min-width: 1240px) {
      .dateinput--size-small .dateinput__select {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 48px; } }
  .dateinput--size-small .dateinput__input {
    font-size: 16px;
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.2;
    height: 48px; }
    @media screen and (min-width: 440px) {
      .dateinput--size-small .dateinput__input {
        font-size: 19px; } }
    @media screen and (min-width: 440px) {
      .dateinput--size-small .dateinput__input {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 48px; } }
    @media screen and (min-width: 720px) {
      .dateinput--size-small .dateinput__input {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 48px; } }
    @media screen and (min-width: 960px) {
      .dateinput--size-small .dateinput__input {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 48px; } }
    @media screen and (min-width: 1240px) {
      .dateinput--size-small .dateinput__input {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 48px; } }
  .dateinput--size-large .dateinput__select {
    font-size: 22px;
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.2;
    height: 62px; }
    @media screen and (min-width: 720px) {
      .dateinput--size-large .dateinput__select {
        font-size: 24px; } }
    @media screen and (min-width: 440px) {
      .dateinput--size-large .dateinput__select {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 62px; } }
    @media screen and (min-width: 720px) {
      .dateinput--size-large .dateinput__select {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 70px; } }
    @media screen and (min-width: 960px) {
      .dateinput--size-large .dateinput__select {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 70px; } }
    @media screen and (min-width: 1240px) {
      .dateinput--size-large .dateinput__select {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 70px; } }
  .dateinput--size-large .dateinput__input {
    font-size: 22px;
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.2;
    height: 62px; }
    @media screen and (min-width: 720px) {
      .dateinput--size-large .dateinput__input {
        font-size: 24px; } }
    @media screen and (min-width: 440px) {
      .dateinput--size-large .dateinput__input {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 62px; } }
    @media screen and (min-width: 720px) {
      .dateinput--size-large .dateinput__input {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 70px; } }
    @media screen and (min-width: 960px) {
      .dateinput--size-large .dateinput__input {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 70px; } }
    @media screen and (min-width: 1240px) {
      .dateinput--size-large .dateinput__input {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2;
        height: 70px; } }

/* Breadcrumb item list

The basic components of a breadcrumb is:

```
.breadcrumb-item-list                  (the outer wrapper)
    .breadcrumb-item-list__item        (an item in the breadcrumb)
    .breadcrumb-item-list__separator   (a separator between items in the breadcrumb)
```

Example: {type: isolated} Basic example

    <nav class="breadcrumb-item-list">
        <a class="breadcrumb-item-list__item">
            First
        </a>
        <span class="breadcrumb-item-list__separator"></span>
        <a class="breadcrumb-item-list__item">
            Second
        </a>
        <span class="breadcrumb-item-list__separator"></span>
        <span class="breadcrumb-item-list__item  breadcrumb-item-list__item--active">
            Last
        </span>
    </nav>

Example: {type: isolated} Only two items - no arrow back before on mobile!

    <nav class="breadcrumb-item-list">
        <a class="breadcrumb-item-list__item">
            First
        </a>
        <span class="breadcrumb-item-list__separator"></span>
        <a class="breadcrumb-item-list__item breadcrumb-item-list__item--active">
            Second
        </a>
    </nav>

Example: {type: isolated} Expandable long item labels

    <nav class="breadcrumb-item-list">
        <a class="breadcrumb-item-list__item">
            <span class="breadcrumb-item-list__itemlabel-minimized" aria-hidden="true">
                The fi...
            </span>
            <span class="breadcrumb-item-list__itemlabel-full">
                The first item
            </span>
        </a>
        <span class="breadcrumb-item-list__separator"></span>
        <a class="breadcrumb-item-list__item">
            <span class="breadcrumb-item-list__itemlabel-minimized" aria-hidden="true">
                The se...
            </span>
            <span class="breadcrumb-item-list__itemlabel-full">
                The second item
            </span>
        </a>
        <span class="breadcrumb-item-list__separator"></span>
        <span class="breadcrumb-item-list__item  breadcrumb-item-list__item--active">
            <span class="breadcrumb-item-list__itemlabel-minimized" aria-hidden="true">
                The la...
            </span>
            <span class="breadcrumb-item-list__itemlabel-full">
                The last item
            </span>
        </span>
    </nav>

Example: {type: isolated} Content before and after

    Before the breadcrumb!
    <nav class="breadcrumb-item-list">
        <a class="breadcrumb-item-list__item">
            First
        </a>
        <span class="breadcrumb-item-list__separator"></span>
        <a class="breadcrumb-item-list__item">
            Second
        </a>
        <span class="breadcrumb-item-list__separator"></span>
        <span class="breadcrumb-item-list__item  breadcrumb-item-list__item--active">
            Last
        </span>
    </nav>
    After the breadcrumb!

Example: {type: isolated} Light variant

    <div style="background-color: #000;">
        <nav class="breadcrumb-item-list  breadcrumb-item-list--light">
            <a class="breadcrumb-item-list__item">
                First
            </a>
            <span class="breadcrumb-item-list__separator"></span>
            <a class="breadcrumb-item-list__item">
                Second
            </a>
            <span class="breadcrumb-item-list__separator"></span>
            <span class="breadcrumb-item-list__item breadcrumb-item-list__item--active">
                Last
            </span>
        </nav>
    </div>

Styleguide components.breadcrumb-item-list
*/
.breadcrumb-item-list {
  position: relative;
  font-family: "Maison Neue", Helvetica, sans-serif;
  font-weight: normal;
  font-size: 15px;
  line-height: 21px;
  display: inline-block;
  color: #2f2c2f; }
  @media screen and (min-width: 720px) {
    .breadcrumb-item-list {
      font-size: 16px;
      line-height: 21px; } }
  .breadcrumb-item-list__itemlabel-minimized {
    display: inline-block; }
  .breadcrumb-item-list__itemlabel-full {
    display: none; }
  .breadcrumb-item-list__item {
    color: inherit;
    border-color: transparent;
    text-decoration: none; }
    .breadcrumb-item-list__item:nth-last-child(3):before {
      width: 19.5px;
      -moz-osx-font-smoothing: grayscale;
      -webkit-font-smoothing: antialiased;
      display: inline-block;
      font-style: normal;
      font-variant: normal;
      text-rendering: auto;
      line-height: 1;
      font-weight: 900;
      font-family: 'Font Awesome 5 Free';
      content: "\f060"; }
      @media (min-width: 720px) {
        .breadcrumb-item-list__item:nth-last-child(3):before {
          width: 20.8px; } }
      @media (min-width: 720px) {
        .breadcrumb-item-list__item:nth-last-child(3):before {
          content: '';
          width: auto; } }
    .breadcrumb-item-list__item--active {
      font-family: "Maison Neue", Helvetica, sans-serif;
      font-weight: bold; }
    @media (min-width: 720px) {
      .breadcrumb-item-list__item:hover .breadcrumb-item-list__itemlabel-minimized {
        display: none; }
      .breadcrumb-item-list__item:hover .breadcrumb-item-list__itemlabel-full {
        display: inline-block; } }
  .breadcrumb-item-list__separator:before {
    width: 19.5px;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    font-weight: 900;
    font-family: 'Font Awesome 5 Free';
    content: "\f054"; }
    @media (min-width: 720px) {
      .breadcrumb-item-list__separator:before {
        width: 20.8px; } }
  .breadcrumb-item-list__item, .breadcrumb-item-list__separator {
    display: none; }
    .breadcrumb-item-list__item:nth-last-child(-n+3), .breadcrumb-item-list__separator:nth-last-child(-n+3) {
      display: inline-block; }
    @media (min-width: 720px) {
      .breadcrumb-item-list__item, .breadcrumb-item-list__separator {
        display: inline-block; } }
  .breadcrumb-item-list--light {
    color: #fff; }
    .breadcrumb-item-list--light .breadcrumb-item-list__item {
      color: inherit; }
    .breadcrumb-item-list--light a.breadcrumb-item-list__item:hover {
      color: #f5f5f5;
      border-color: #f5f5f5; }

/* Breadcrumb item list wrapper

Used to wrap a .breadcrumb-item-list when it is shown on a separate line.

Example: {type: isolated} Simple

    <div class="breadcrumb-item-list-wrapper">
        <div class="container container--wide">
            <nav class="breadcrumb-item-list">
                <a class="breadcrumb-item-list__item">
                    First
                </a>
                <span class="breadcrumb-item-list__separator"></span>
                <a class="breadcrumb-item-list__item">
                    Second
                </a>
                <span class="breadcrumb-item-list__separator"></span>
                <span class="breadcrumb-item-list__item  breadcrumb-item-list__item--active">
                    Last
                </span>
            </nav>
        </div>
    </div>

Example: {type: isolated} With page header and content below

    <header class="adminui-page-header">
        <div class="adminui-page-header__content">
            <a class="adminui-page-header__brand">
                <span class="adminui-page-header__brandname">My brand</span>
            </a>
        </div>
    </header>

    <div class="breadcrumb-item-list-wrapper">
        <div class="container container--wide">
            <nav class="breadcrumb-item-list">
                <a class="breadcrumb-item-list__item">
                    First
                </a>
                <span class="breadcrumb-item-list__separator"></span>
                <a class="breadcrumb-item-list__item">
                    Second
                </a>
                <span class="breadcrumb-item-list__separator"></span>
                <span class="breadcrumb-item-list__item  breadcrumb-item-list__item--active">
                    Last
                </span>
            </nav>
        </div>
    </div>
    <div class="adminui-page-section">
        <div class="container container--tight">
            <p>
                Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
            </p>
        </div>
    </div>

Styleguide components.breadcrumb-item-list.wrapper
*/
.breadcrumb-item-list-wrapper {
  background-color: #fff;
  padding-top: 12px;
  padding-bottom: 12px; }

/* AdminUI page header

The basic components of a header is:

```
.adminui-page-header  (the outer wrapper)
    .adminui-page-header__content   (wrapper around the content of the header)
        .adminui-page-header__brand   (container for a brand)
        .adminui-page-header__nav     (navigation elements)
            .adminui-page-header__navlink        (navigation element link)
            .adminui-page-header__navbutton      (navigation element button)
            .adminui-page-header__navmenutoggle  (navigation element menu toggle)
```

Example: {type: isolated} With brand

    <header class="adminui-page-header">
        <div class="adminui-page-header__content">
            <a class="adminui-page-header__brand">
                <span class="adminui-page-header__brandname">My brand</span>
            </a>
        </div>
    </header>

Example: {type: isolated} With brand and navigation
    <header class="adminui-page-header">
        <div class="adminui-page-header__content">
            <a class="adminui-page-header__brand">
                <span class="adminui-page-header__brandname">My brand</span>
            </a>
            <nav class="adminui-page-header__nav">
                <a class="adminui-page-header__navlink">About</a>
                <a class="adminui-page-header__navlink">Important stuff</a>
                <a class="adminui-page-header__navlink">Information</a>
            </nav>
        </div>
    </header>

Example: {type: isolated} Compact
    <header class="adminui-page-header  adminui-page-header--compact">
        <div class="adminui-page-header__content">
            <a class="adminui-page-header__brand">
                <span class="adminui-page-header__brandname">My brand</span>
            </a>
            <nav class="adminui-page-header__nav">
                <a class="adminui-page-header__navlink">About</a>
                <a class="adminui-page-header__navlink">Important stuff</a>
                <a class="adminui-page-header__navlink">Information</a>
            </nav>
        </div>
    </header>

Example: {type: isolated} Navigation active links
    <header class="adminui-page-header">
        <div class="adminui-page-header__content">
            <a class="adminui-page-header__brand">
                <span class="adminui-page-header__brandname">My brand</span>
            </a>
            <nav class="adminui-page-header__nav">
                <a class="adminui-page-header__navlink">Nonactive link</a>
                <a class="adminui-page-header__navlink  adminui-page-header__navlink--active">Active link</a>
                <a class="adminui-page-header__navlink  adminui-page-header__navlink--button">Nonactive button</a>
                <a class="adminui-page-header__navlink  adminui-page-header__navlink--button adminui-page-header__navlink--active">Active button</a>
            </nav>
        </div>
    </header>

Example: {type: isolated} With navigation buttons and menu toggle button
    <header class="adminui-page-header">
        <div class="adminui-page-header__content">
            <a class="adminui-page-header__brand">
                <span class="adminui-page-header__brandname">My brand</span>
            </a>
            <nav class="adminui-page-header__nav">
                <a class="adminui-page-header__navlink">About</a>
                <a class="adminui-page-header__navlink">Important stuff</a>
                <a class="adminui-page-header__navlink  adminui-page-header__navlink--button">A button</a>
                <button type="button" class="adminui-page-header__navmenutoggle">
                    <span class="adminui-page-header__navmenutoggle-icon" aria-hidden="true"></span>
                    <span class="adminui-page-header__navmenutoggle-label">Menu</span>
                </button>
            </nav>
        </div>
    </header>




Example: {type: isolated} Compact variant with navigation buttons and menu toggle button
    <header class="adminui-page-header adminui-page-header--compact">
        <div class="adminui-page-header__content">
            <a class="adminui-page-header__brand">
                <span class="adminui-page-header__brandname">My brand</span>
            </a>
            <nav class="adminui-page-header__nav">
                <a class="adminui-page-header__navlink">About</a>
                <a class="adminui-page-header__navlink">Important stuff</a>
                <a class="adminui-page-header__navlink  adminui-page-header__navlink--button-compact">A button</a>
                <button type="button" class="adminui-page-header__navmenutoggle">
                    <span class="adminui-page-header__navmenutoggle-icon" aria-hidden="true"></span>
                    <span class="adminui-page-header__navmenutoggle-label">Menu</span>
                </button>
            </nav>
        </div>
    </header>

Example: {type: isolated} With brand image (logo) menu toggle button
    <header class="adminui-page-header">
        <div class="adminui-page-header__content">
            <a class="adminui-page-header__brand">
                <img class="adminui-page-header__brandimage" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgoKPHN2ZwogICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iCiAgIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiCiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIKICAgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiCiAgIHhtbG5zOmlua3NjYXBlPSJodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy9uYW1lc3BhY2VzL2lua3NjYXBlIgogICB3aWR0aD0iNDQ5LjEwNTE2IgogICBoZWlnaHQ9IjQyNS43MTQyOSIKICAgaWQ9InN2ZzIiCiAgIHZlcnNpb249IjEuMSIKICAgaW5rc2NhcGU6dmVyc2lvbj0iMC40OC4wIHI5NjU0IgogICBzb2RpcG9kaTpkb2NuYW1lPSJzdGFyLnN2ZyI+CiAgPGRlZnMKICAgICBpZD0iZGVmczQiPgogICAgPGlua3NjYXBlOnBlcnNwZWN0aXZlCiAgICAgICBzb2RpcG9kaTp0eXBlPSJpbmtzY2FwZTpwZXJzcDNkIgogICAgICAgaW5rc2NhcGU6dnBfeD0iMCA6IDUyNi4xODEwOSA6IDEiCiAgICAgICBpbmtzY2FwZTp2cF95PSIwIDogMTAwMCA6IDAiCiAgICAgICBpbmtzY2FwZTp2cF96PSI3NDQuMDk0NDggOiA1MjYuMTgxMDkgOiAxIgogICAgICAgaW5rc2NhcGU6cGVyc3AzZC1vcmlnaW49IjM3Mi4wNDcyNCA6IDM1MC43ODczOSA6IDEiCiAgICAgICBpZD0icGVyc3BlY3RpdmUyOTg1IiAvPgogIDwvZGVmcz4KICA8c29kaXBvZGk6bmFtZWR2aWV3CiAgICAgaWQ9ImJhc2UiCiAgICAgcGFnZWNvbG9yPSIjMDAwMDAwIgogICAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IgogICAgIGJvcmRlcm9wYWNpdHk9IjEuMCIKICAgICBpbmtzY2FwZTpwYWdlb3BhY2l0eT0iMCIKICAgICBpbmtzY2FwZTpwYWdlc2hhZG93PSIyIgogICAgIGlua3NjYXBlOnpvb209IjAuMzUiCiAgICAgaW5rc2NhcGU6Y3g9Ii0yNzUuNDk2MDciCiAgICAgaW5rc2NhcGU6Y3k9IjExMS45OTI1MSIKICAgICBpbmtzY2FwZTpkb2N1bWVudC11bml0cz0icHgiCiAgICAgaW5rc2NhcGU6Y3VycmVudC1sYXllcj0ibGF5ZXIxIgogICAgIHNob3dncmlkPSJmYWxzZSIKICAgICBmaXQtbWFyZ2luLXRvcD0iMCIKICAgICBmaXQtbWFyZ2luLWxlZnQ9IjAiCiAgICAgZml0LW1hcmdpbi1yaWdodD0iMCIKICAgICBmaXQtbWFyZ2luLWJvdHRvbT0iMCIKICAgICBpbmtzY2FwZTp3aW5kb3ctd2lkdGg9IjEzMTkiCiAgICAgaW5rc2NhcGU6d2luZG93LWhlaWdodD0iNzgxIgogICAgIGlua3NjYXBlOndpbmRvdy14PSIwIgogICAgIGlua3NjYXBlOndpbmRvdy15PSIyMiIKICAgICBpbmtzY2FwZTp3aW5kb3ctbWF4aW1pemVkPSIwIiAvPgogIDxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTciPgogICAgPHJkZjpSREY+CiAgICAgIDxjYzpXb3JrCiAgICAgICAgIHJkZjphYm91dD0iIj4KICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4KICAgICAgICA8ZGM6dHlwZQogICAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+CiAgICAgIDwvY2M6V29yaz4KICAgIDwvcmRmOlJERj4KICA8L21ldGFkYXRhPgogIDxnCiAgICAgaW5rc2NhcGU6bGFiZWw9IkxheWVyIDEiCiAgICAgaW5rc2NhcGU6Z3JvdXBtb2RlPSJsYXllciIKICAgICBpZD0ibGF5ZXIxIgogICAgIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xNDQuNzgxNzgsLTIxOC42NDA0KSI+CiAgICA8cmVjdAogICAgICAgc3R5bGU9ImZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZSIKICAgICAgIGlkPSJyZWN0MzgzNCIKICAgICAgIHdpZHRoPSI0NDkuMTA1MTYiCiAgICAgICBoZWlnaHQ9IjQyNS43MTQyOSIKICAgICAgIHg9IjE0NC43ODE3OCIKICAgICAgIHk9IjIxOC42NDA0IgogICAgICAgcng9IjcuNzM2NTM4NCIKICAgICAgIHJ5PSIwIiAvPgogICAgPHBhdGgKICAgICAgIHNvZGlwb2RpOnR5cGU9InN0YXIiCiAgICAgICBzdHlsZT0iZmlsbDojZmZmZjM3O2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojZmM3NTAwO3N0cm9rZS13aWR0aDoxOTtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2Utb3BhY2l0eToxO3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2UtZGFzaG9mZnNldDowIgogICAgICAgaWQ9InBhdGgzNzc1IgogICAgICAgc29kaXBvZGk6c2lkZXM9IjUiCiAgICAgICBzb2RpcG9kaTpjeD0iMTkxLjQyODU3IgogICAgICAgc29kaXBvZGk6Y3k9IjE0Ni43MjA3OSIKICAgICAgIHNvZGlwb2RpOnIxPSIyMDYuNDI3MzQiCiAgICAgICBzb2RpcG9kaTpyMj0iOTMuMjYwNTY3IgogICAgICAgc29kaXBvZGk6YXJnMT0iLTEuNTcwNzk2MyIKICAgICAgIHNvZGlwb2RpOmFyZzI9Ii0wLjk4MDYyODQ5IgogICAgICAgaW5rc2NhcGU6ZmxhdHNpZGVkPSJmYWxzZSIKICAgICAgIGlua3NjYXBlOnJvdW5kZWQ9IjAiCiAgICAgICBpbmtzY2FwZTpyYW5kb21pemVkPSIwLjAxNSIKICAgICAgIGQ9Ik0gMTg4Ljk5NjA0LC02MS4zODQxNDUgMjQxLjc0MDIsNjcuOTU0NjU1IDM4NC45NjU3Miw4NC4yNjM1OTIgMjgxLjA5OTQ0LDE3My44MTUwNCAzMTUuMjQ0NTMsMzEzLjM3MzA5IDE5Ny44MDQ4MywyNDEuODQxMjggNzEuMDM4MDU3LDMxNS43MzE1OCAxMDMuMDI3NDEsMTc3LjM5MDA5IC0yLjE0Mzk3MTIsODIuMjcwMDIyIDEzMS44OTU0Miw3NS4zNDgxOTQgeiIKICAgICAgIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE4Mi4xNTAzMywzMDQuODQ2MzEpIgogICAgICAgaW5rc2NhcGU6dHJhbnNmb3JtLWNlbnRlci14PSIwLjAxNzcwMzI1OSIKICAgICAgIGlua3NjYXBlOnRyYW5zZm9ybS1jZW50ZXIteT0iLTE5LjU0NzA3NCIgLz4KICA8L2c+Cjwvc3ZnPgo=">
            </a>
            <nav class="adminui-page-header__nav">
                <a class="adminui-page-header__navlink">About</a>
                <a class="adminui-page-header__navlink">Important stuff</a>
                <a class="adminui-page-header__navlink  adminui-page-header__navlink--button">A button</a>
                <button type="button" class="adminui-page-header__navmenutoggle">
                    <span class="adminui-page-header__navmenutoggle-icon" aria-hidden="true"></span>
                    <span class="adminui-page-header__navmenutoggle-label">Menu</span>
                </button>
            </nav>
        </div>
    </header>

Example: {type: isolated} Sizes
    <br>
    <strong>--small:</strong>
    <header class="adminui-page-header adminui-page-header--small">
        <div class="adminui-page-header__content">
            <a class="adminui-page-header__brand">
                <span class="adminui-page-header__brandname">My brand</span>
            </a>
        </div>
    </header>
    <br>
    <strong>Default:</strong>
    <header class="adminui-page-header">
        <div class="adminui-page-header__content">
            <a class="adminui-page-header__brand">
                <span class="adminui-page-header__brandname">My brand</span>
            </a>
        </div>
    </header>
    <br>
    <strong>--large:</strong>
    <header class="adminui-page-header adminui-page-header--large">
        <div class="adminui-page-header__content">
            <a class="adminui-page-header__brand">
                <span class="adminui-page-header__brandname">My brand</span>
            </a>
        </div>
    </header>
    <br>
    <strong>--xlarge:</strong>
    <header class="adminui-page-header adminui-page-header--xlarge">
        <div class="adminui-page-header__content">
            <a class="adminui-page-header__brand">
                <span class="adminui-page-header__brandname">My brand</span>
            </a>
        </div>
    </header>
    <br>
    <strong>--xxlarge:</strong>
    <header class="adminui-page-header adminui-page-header--xxlarge">
        <div class="adminui-page-header__content">
            <a class="adminui-page-header__brand">
                <span class="adminui-page-header__brandname">My brand</span>
            </a>
        </div>
    </header>
    <br>
    <strong>--xxxlarge:</strong>
    <header class="adminui-page-header adminui-page-header--xxxlarge">
        <div class="adminui-page-header__content">
            <a class="adminui-page-header__brand">
                <span class="adminui-page-header__brandname">My brand</span>
            </a>
        </div>
    </header>


Styleguide layout.adminui-page-header
*/
.adminui-page-header {
  background-color: #E01220;
  position: relative;
  padding: 14px 0;
  width: 100%;
  color: #fff; }
  .adminui-page-header__content {
    margin: 0 auto;
    padding-left: 12px;
    padding-right: 12px;
    max-width: 1400px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px; }
    @media (min-width: 440px) {
      .adminui-page-header__content {
        padding-left: 24px;
        padding-right: 24px; } }
    @media (min-width: 720px) {
      .adminui-page-header__content {
        padding-left: 60px;
        padding-right: 60px; } }
  .adminui-page-header__brand, .adminui-page-header__nav {
    display: flex;
    flex-direction: row;
    align-items: center; }
  .adminui-page-header__brand {
    border: none;
    height: 100%;
    overflow: hidden;
    justify-content: flex-start;
    flex: 0 0 auto;
    padding: 0;
    margin: 0; }
  .adminui-page-header__brandname {
    display: inline-block;
    fill: #fff;
    color: #fff;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden; }
  .adminui-page-header__brandimage {
    display: inline-block;
    border: none;
    height: 100%;
    width: auto;
    object-position: left center;
    object-fit: contain; }
  .adminui-page-header__nav {
    position: relative;
    height: 100%;
    justify-content: flex-end; }
  .adminui-page-header__navlink {
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    font-size: 15px;
    line-height: 21px;
    position: relative;
    margin-left: 1em;
    color: #fff;
    border-bottom: 2px solid transparent;
    white-space: nowrap; }
    @media screen and (min-width: 720px) {
      .adminui-page-header__navlink {
        font-size: 16px;
        line-height: 21px; } }
    .adminui-page-header__navlink--active, .adminui-page-header__navlink:hover, .adminui-page-header__navlink:focus {
      color: #fff;
      border-color: #fff; }
    .adminui-page-header__navlink--large {
      font-size: 19px;
      line-height: 28px; }
      @media screen and (min-width: 440px) {
        .adminui-page-header__navlink--large {
          font-size: 23px;
          line-height: 28px; } }
    .adminui-page-header__navlink--button {
      font-family: "Maison Neue", Helvetica, sans-serif;
      font-weight: bold;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      font-family: "Maison Neue", Helvetica, sans-serif;
      font-weight: bold;
      font-size: 15px;
      line-height: 21px;
      font-style: normal;
      text-align: center;
      position: relative;
      display: block;
      width: 100%;
      padding: 6px 12px;
      border-radius: 5px;
      color: #2f2c2f;
      white-space: normal;
      border: 3px solid #828383;
      background-color: transparent;
      margin-bottom: 6px;
      font-size: 15px;
      line-height: 21px;
      color: #E01220;
      border-color: #fff;
      background-color: #fff;
      padding: 6px 12px;
      margin-bottom: 0; }
      @media screen and (min-width: 720px) {
        .adminui-page-header__navlink--button {
          font-size: 16px;
          line-height: 21px; } }
      .adminui-page-header__navlink--button[disabled] {
        pointer-events: none;
        opacity: 0.4; }
      .adminui-page-header__navlink--button:hover, .adminui-page-header__navlink--button:focus, .adminui-page-header__navlink--button:active {
        color: #fff;
        border-color: #828383;
        background-color: #828383; }
        .adminui-page-header__navlink--button:hover .button__icon--non-hover, .adminui-page-header__navlink--button:focus .button__icon--non-hover, .adminui-page-header__navlink--button:active .button__icon--non-hover {
          display: none; }
        .adminui-page-header__navlink--button:hover .button__icon--hover, .adminui-page-header__navlink--button:focus .button__icon--hover, .adminui-page-header__navlink--button:active .button__icon--hover {
          display: inline-block; }
      .adminui-page-header__navlink--button:focus {
        z-index: 2; }
      @media screen and (min-width: 720px) {
        .adminui-page-header__navlink--button {
          font-size: 16px;
          line-height: 21px; } }
      @media (min-width: 720px) {
        .adminui-page-header__navlink--button {
          padding: 6px 12px; } }
      .adminui-page-header__navlink--button.adminui-page-header__navlink--active, .adminui-page-header__navlink--button:hover, .adminui-page-header__navlink--button:focus, .adminui-page-header__navlink--button:active {
        color: #fff;
        background-color: transparent;
        border: 3px solid #fff; }
  .adminui-page-header__navmenutoggle {
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    font-size: 15px;
    line-height: 21px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    margin-left: 1em;
    color: #fff;
    transition: all 300ms cubic-bezier(0, 0, 0.1, 1); }
    @media screen and (min-width: 720px) {
      .adminui-page-header__navmenutoggle {
        font-size: 16px;
        line-height: 21px; } }
  .adminui-page-header__navmenutoggle-label {
    vertical-align: middle; }
  .adminui-page-header__navmenutoggle-icon {
    margin-right: 6px; }
    .adminui-page-header__navmenutoggle-icon:before {
      -moz-osx-font-smoothing: grayscale;
      -webkit-font-smoothing: antialiased;
      display: inline-block;
      font-style: normal;
      font-variant: normal;
      text-rendering: auto;
      line-height: 1;
      font-weight: 900;
      font-family: 'Font Awesome 5 Free';
      content: "\f0c9";
      font-size: 19px; }
      @media screen and (min-width: 440px) {
        .adminui-page-header__navmenutoggle-icon:before {
          font-size: 23px; } }
  .adminui-page-header--small {
    padding-top: 10px;
    padding-bottom: 10px; }
    .adminui-page-header--small .adminui-page-header__content {
      height: 28px; }
  .adminui-page-header--large .adminui-page-header__content {
    height: 56px; }
  .adminui-page-header--xlarge .adminui-page-header__content {
    height: 64px; }
  .adminui-page-header--xxlarge .adminui-page-header__content {
    height: 80px; }
  .adminui-page-header--xxxlarge .adminui-page-header__content {
    height: 100px; }

/* Expandable menu


Example: {type: isolated} Collapsed

    <header class="adminui-page-header  adminui-page-header--fill">
        <div class="adminui-page-header__content">
            <a class="adminui-page-header__brand">
                <span class="adminui-page-header__brandname">My brand</span>
            </a>
            <nav class="adminui-page-header__nav">
                <button type="button" class="adminui-page-header__navmenutoggle"
                        data-ievv-jsbase-widget="cradmin-menutoggle">
                    Menu
                    <i class="icon-hamburger" aria-hidden="true" role="presentation">
                        <span aria-hidden="true" class="icon-hamburger__bar"></span>
                        <span aria-hidden="true" class="icon-hamburger__bar"></span>
                        <span aria-hidden="true" class="icon-hamburger__bar"></span>
                    </i>
                </button>
            </nav>
        </div>
    </header>

    <div class="expandable-menu"
            data-ievv-jsbase-widget="cradmin-toggleable-menu">
        <div class="expandable-menu__backdrop"
                data-ievv-jsbase-widget="cradmin-menutoggle"></div>

        <div class="expandable-menu__content">
            <button type="button" class="expandable-menu__close"
                    data-ievv-jsbase-widget="cradmin-menutoggle">
                <i class="cricon cricon--close"
                        cradmin_menutoggle_groupid="mainmenu"
                        aria-hidden="true" role="presentation">
                </i>
                <span class="screenreader-only">Close menu</span>
            </button>

            <ul class="expandable-menu__list">
                <li class="expandable-menu__listitem">
                    <a href="#" class="expandable-menu__link">Item 1</a>
                </li>
                <li class="expandable-menu__listitem">
                    <a href="#" class="expandable-menu__link">Item 2</a>
                </li>
            </ul>
        </div>
    </div>


Example: {type: isolated} Expanded

    <header class="adminui-page-header  adminui-page-header--fill">
        <div class="adminui-page-header__content">
            <a class="adminui-page-header__brand">
                <span class="adminui-page-header__brandname">My brand</span>
            </a>
            <nav class="adminui-page-header__nav">
                <button type="button" class="adminui-page-header__navmenutoggle"
                        data-ievv-jsbase-widget="cradmin-menutoggle">
                    Menu
                    <i class="icon-hamburger" aria-hidden="true" role="presentation">
                        <span aria-hidden="true" class="icon-hamburger__bar"></span>
                        <span aria-hidden="true" class="icon-hamburger__bar"></span>
                        <span aria-hidden="true" class="icon-hamburger__bar"></span>
                    </i>
                </button>
            </nav>
        </div>
    </header>

    <div style="height: 500px"></div>

    <div class="expandable-menu expandable-menu--expanded"
            data-ievv-jsbase-widget="cradmin-toggleable-menu">
        <div class="expandable-menu__backdrop"
                data-ievv-jsbase-widget="cradmin-menutoggle"></div>

        <div class="expandable-menu__content">
            <button type="button" class="expandable-menu__close"
                    data-ievv-jsbase-widget="cradmin-menutoggle">
                <i class="cricon cricon--close"
                        cradmin_menutoggle_groupid="mainmenu"
                        aria-hidden="true" role="presentation">
                </i>
                <span class="screenreader-only">Close menu</span>
            </button>

            <ul class="expandable-menu__list">
                <li class="expandable-menu__listitem">
                    <a href="#" class="expandable-menu__link">Item 1</a>
                </li>
                <li class="expandable-menu__listitem">
                    <a href="#" class="expandable-menu__link">Item 2</a>
                </li>
            </ul>
        </div>
    </div>

Example: {type: isolated} Separator and headings

    <header class="adminui-page-header  adminui-page-header--fill">
        <div class="adminui-page-header__content">
            <a class="adminui-page-header__brand">
                <span class="adminui-page-header__brandname">My brand</span>
            </a>
            <nav class="adminui-page-header__nav">
                <button type="button" class="adminui-page-header__navmenutoggle"
                        data-ievv-jsbase-widget="cradmin-menutoggle">
                    Menu
                    <i class="icon-hamburger" aria-hidden="true" role="presentation">
                        <span aria-hidden="true" class="icon-hamburger__bar"></span>
                        <span aria-hidden="true" class="icon-hamburger__bar"></span>
                        <span aria-hidden="true" class="icon-hamburger__bar"></span>
                    </i>
                </button>
            </nav>
        </div>
    </header>

    <div style="height: 500px"></div>

    <div class="expandable-menu expandable-menu--expanded"
            data-ievv-jsbase-widget="cradmin-toggleable-menu">
        <div class="expandable-menu__backdrop"
                data-ievv-jsbase-widget="cradmin-menutoggle"></div>

        <div class="expandable-menu__content">
            <button type="button" class="expandable-menu__close"
                    data-ievv-jsbase-widget="cradmin-menutoggle">
                <i class="cricon cricon--close"
                        cradmin_menutoggle_groupid="mainmenu"
                        aria-hidden="true" role="presentation">
                </i>
                <span class="screenreader-only">Close menu</span>
            </button>

            <ul class="expandable-menu__list">
                <li class="expandable-menu__heading">
                    Some items:
                </li>
                <li class="expandable-menu__listitem">
                    <a href="#" class="expandable-menu__link">Item 1</a>
                </li>
                <li class="expandable-menu__listitem">
                    <a href="#" class="expandable-menu__link">Item 2</a>
                </li>

                <li class="expandable-menu__heading">
                    More items:
                </li>
                <li class="expandable-menu__listitem">
                    <a href="#" class="expandable-menu__link">Item 3</a>
                </li>
                <li class="expandable-menu__listitem">
                    <a href="#" class="expandable-menu__link">Item 4</a>
                </li>
                <li class="expandable-menu__separator" aria-hidden="true"></li>
                <li class="expandable-menu__listitem">
                    <a href="#" class="expandable-menu__link">Item 5</a>
                </li>
                <li class="expandable-menu__listitem">
                    <a href="#" class="expandable-menu__link">Item 6</a>
                </li>
            </ul>
        </div>
    </div>

Styleguide components.expandable-menu
*/
.expandable-menu {
  position: fixed;
  display: none;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: auto;
  z-index: 30; }
  .expandable-menu--expanded {
    display: block; }
  .expandable-menu__backdrop {
    position: fixed;
    z-index: 20;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.85); }
  .expandable-menu__close {
    position: absolute;
    top: 24px;
    right: 24px;
    min-width: 84px;
    text-align: right;
    line-height: 30px;
    color: #fff; }
    .expandable-menu__close:hover {
      color: #eeeeef; }
  .expandable-menu__content {
    animation: expandable-menu-open-keyframes 300ms cubic-bezier(0, 0, 0.1, 1) both;
    position: fixed;
    z-index: 30;
    padding-top: 80px;
    right: 0;
    top: 0;
    bottom: 0;
    width: 400px;
    max-width: 100%;
    color: #fff;
    background-color: #002B49; }
  .expandable-menu__list {
    padding: 0 28px; }
  .expandable-menu__listitem {
    animation: expandable-menu-item-open-keyframes 300ms cubic-bezier(0, 0, 0.1, 1) both;
    animation-delay: 620ms;
    margin-bottom: 7px; }
    .expandable-menu__listitem:nth-child(1) {
      animation-delay: 140ms; }
    .expandable-menu__listitem:nth-child(2) {
      animation-delay: 200ms; }
    .expandable-menu__listitem:nth-child(3) {
      animation-delay: 260ms; }
    .expandable-menu__listitem:nth-child(4) {
      animation-delay: 320ms; }
    .expandable-menu__listitem:nth-child(5) {
      animation-delay: 380ms; }
    .expandable-menu__listitem:nth-child(6) {
      animation-delay: 440ms; }
    .expandable-menu__listitem:nth-child(7) {
      animation-delay: 500ms; }
    .expandable-menu__listitem:nth-child(8) {
      animation-delay: 560ms; }
  .expandable-menu__separator {
    height: 3px;
    background-color: #40AAB8;
    margin-top: 21px;
    margin-bottom: 14px; }
  .expandable-menu__heading {
    margin-top: 21px;
    margin-bottom: 14px;
    font-size: 12px;
    line-height: 21px;
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    text-transform: uppercase; }
    @media screen and (min-width: 720px) {
      .expandable-menu__heading {
        font-size: 13px;
        line-height: 21px; } }
    .expandable-menu__heading:first-child {
      margin-top: 0; }
  .expandable-menu__link {
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    position: relative;
    margin-left: 1em;
    color: #fff;
    border-bottom: 2px solid transparent; }
    .expandable-menu__link--active, .expandable-menu__link:hover, .expandable-menu__link:focus {
      color: #fff;
      border-color: #fff; }

@keyframes expandable-menu-open-keyframes {
  from {
    transform: translateX(100%) skewX(5deg);
    opacity: 0; } }

@keyframes expandable-menu-item-open-keyframes {
  from {
    transform: translateX(100px) skewX(5deg);
    opacity: 0; } }

/* AdminUI page cover

Example: {type: isolated} Minimal example

    <header class="adminui-page-cover">
        <h1 class="adminui-page-cover__title">The title</h1>
    </header>

Example: {type: isolated} With description

    <header class="adminui-page-cover">
        <h1 class="adminui-page-cover__title">The title</h1>
        <p class="adminui-page-cover__description">The description</p>
    </header>

Example: {type: isolated} With large description

    <header class="adminui-page-cover">
        <h1 class="adminui-page-cover__title">The title</h1>
        <p class="adminui-page-cover__description  adminui-page-cover__description--large">The description</p>
    </header>

Example: {type: isolated} With inline elements in description

    <header class="adminui-page-cover">
        <h1 class="adminui-page-cover__title">The title</h1>
        <p class="adminui-page-cover__description">
            The <strong class="adminui-page-cover__strong">awesome</strong>
            <a class="adminui-page-cover__link">description</a>
        </p>
    </header>

Example: {type: isolated} Buttons

    <header class="adminui-page-cover">
        <h1 class="adminui-page-cover__title">The title</h1>

        <p>
            <button type="button" class="adminui-page-cover__button">
                Default page-cover button
            </button>
            <button type="button" class="adminui-page-cover__button adminui-page-cover__button--focus">
                --focus
            </button>
        </p>
    </header>

Styleguide layout.adminui-page-cover
*/
.adminui-page-cover {
  position: relative;
  padding-top: 24px;
  padding-bottom: 24px;
  text-align: center;
  color: #fff;
  background-color: #E01220; }
  @media print {
    .adminui-page-cover {
      background-color: transparent;
      color: #000; } }
  @media (min-width: 720px) {
    .adminui-page-cover {
      padding-top: 28px;
      padding-bottom: 28px; } }
  .adminui-page-cover__title {
    position: relative;
    margin: 0 auto;
    padding-left: 12px;
    padding-right: 12px;
    max-width: 1400px;
    z-index: 2;
    width: 100%;
    margin-bottom: 12px;
    font-size: 21px;
    line-height: 28px; }
    @media (min-width: 440px) {
      .adminui-page-cover__title {
        padding-left: 24px;
        padding-right: 24px; } }
    @media (min-width: 720px) {
      .adminui-page-cover__title {
        padding-left: 60px;
        padding-right: 60px; } }
    @media screen and (min-width: 440px) {
      .adminui-page-cover__title {
        font-size: 26px;
        line-height: 35px; } }
    @media screen and (min-width: 720px) {
      .adminui-page-cover__title {
        font-size: 27px;
        line-height: 35px; } }
    .adminui-page-cover__title--small {
      font-size: 19px;
      line-height: 28px; }
      @media screen and (min-width: 440px) {
        .adminui-page-cover__title--small {
          font-size: 23px;
          line-height: 28px; } }
    .adminui-page-cover__title:only-child {
      margin-bottom: 0; }
  .adminui-page-cover__description {
    margin: 0 auto;
    padding-left: 12px;
    padding-right: 12px;
    max-width: 740px;
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    font-size: 16px;
    line-height: 21px;
    position: relative;
    z-index: 2;
    padding: 0;
    margin-bottom: 12px; }
    @media (min-width: 440px) {
      .adminui-page-cover__description {
        padding-left: 24px;
        padding-right: 24px; } }
    @media (min-width: 720px) {
      .adminui-page-cover__description {
        padding-left: 60px;
        padding-right: 60px; } }
    @media screen and (min-width: 440px) {
      .adminui-page-cover__description {
        font-size: 19px;
        line-height: 28px; } }
    .adminui-page-cover__description--large {
      font-size: 19px;
      line-height: 28px;
      font-family: "Maison Neue", Helvetica, sans-serif;
      font-weight: bold;
      letter-spacing: 0.06em;
      text-transform: uppercase; }
      @media screen and (min-width: 440px) {
        .adminui-page-cover__description--large {
          font-size: 23px;
          line-height: 28px; } }
  .adminui-page-cover__strong {
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    display: inline-block;
    padding: 0 6px 2px;
    margin: 0 -2px;
    color: #fff;
    background-color: #ce111d; }
  .adminui-page-cover__link {
    color: #fff;
    border-color: #ce111d; }
    .adminui-page-cover__link:hover, .adminui-page-cover__link:focus {
      color: #fff;
      border-color: #fff; }
    .adminui-page-cover__link--no-border {
      border: none;
      text-decoration: none; }
      .adminui-page-cover__link--no-border:hover {
        border: none;
        text-decoration: none; }
  .adminui-page-cover__button {
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    font-size: 15px;
    line-height: 21px;
    font-style: normal;
    text-align: center;
    position: relative;
    display: block;
    width: 100%;
    padding: 6px 12px;
    border-radius: 5px;
    color: #2f2c2f;
    white-space: normal;
    border: 3px solid #828383;
    background-color: transparent;
    margin-bottom: 6px;
    color: #fff;
    border-color: #fff;
    background-color: transparent; }
    @media screen and (min-width: 720px) {
      .adminui-page-cover__button {
        font-size: 16px;
        line-height: 21px; } }
    @media (min-width: 720px) {
      .adminui-page-cover__button {
        display: inline-block;
        white-space: nowrap;
        width: auto;
        padding: 9px 39px; } }
    .adminui-page-cover__button[disabled] {
      pointer-events: none;
      opacity: 0.4; }
    .adminui-page-cover__button:hover, .adminui-page-cover__button:focus, .adminui-page-cover__button:active {
      color: #fff;
      border-color: #828383;
      background-color: #828383; }
      .adminui-page-cover__button:hover .button__icon--non-hover, .adminui-page-cover__button:focus .button__icon--non-hover, .adminui-page-cover__button:active .button__icon--non-hover {
        display: none; }
      .adminui-page-cover__button:hover .button__icon--hover, .adminui-page-cover__button:focus .button__icon--hover, .adminui-page-cover__button:active .button__icon--hover {
        display: inline-block; }
    .adminui-page-cover__button:focus {
      z-index: 2; }
    .adminui-page-cover__button:hover, .adminui-page-cover__button:focus, .adminui-page-cover__button:active {
      border-color: #fff;
      background-color: #fff;
      color: #ce111d; }
    .adminui-page-cover__button--focus {
      border-color: #fff;
      background-color: #fff;
      color: #ce111d; }
      .adminui-page-cover__button--focus:hover, .adminui-page-cover__button--focus:focus, .adminui-page-cover__button--focus:active {
        color: #fff;
        border-color: #fff;
        background-color: transparent; }

/*
AdminUI page sections

Most modifiers can be combined.
Note: Be careful with combining `tight`, don't combine it with `focus`.

Example: {type: isolated} Default page section - without any container
    <section class="adminui-page-section">
        <h2>Default page section</h2>
        <p>As you can see, the default adminui-page-section relies on a container to provide
        space on the sides, so do not use this example!</p>
    </section>

Example: {type: isolated} Default page section
    <section class="adminui-page-section">
        <div class="container  container--tight">
            <h2>Default page section</h2>
        </div>
    </section>

Example: {type: isolated} `tight` (DEPRECATED - use an inner container container
    <section class="adminui-page-section  adminui-page-section--tight">
        <h2>A tight section</h2>
        <p>Good for pure content</p>
    </section>

Example: {type: isolated} `center`
    <section class="adminui-page-section  adminui-page-section--center">
        <h2>Centered content</h2>
    </section>

Example: {type: isolated} `center-lg`
    <section class="adminui-page-section  adminui-page-section--center-lg">
        <h2>Centered content (Only for large screens)</h2>
    </section>

Example: {type: isolated} `spaced`
    <section class="adminui-page-section  adminui-page-section--spaced">
        <div class="container  container--tight">
            <h2>Spaced section</h2>
            <p>Used to give the content more air, which gives it more focus.</p>
        </div>
    </section>

Example: {type: isolated} `outlined`
    <section class="adminui-page-section  adminui-page-section--outlined">
        <div class="container  container--tight">
            <h2>Adds a line above</h2>
        </div>
    </section>

Example: {type: isolated} `last`
    <section class="adminui-page-section  adminui-page-section--last">
        <div class="container  container--tight">
            <h2>No spacing below</h2>
            <p>Used at the bottom of the page mostly</p>
        </div>
    </section>

Example: {type: isolated} Collapsible on small screens - collapsed

    <section class="adminui-page-section  adminui-page-section--collapsible-sm">
        <div class="container  container--tight">
            <h2 class="adminui-page-section__title">
                Some more stuff
            </h2>
            <!--
            You need a javascript click listener on this button that adds
             ``adminui-page-section--expanded`` class to the section.
             -->
            <button type="button" class="adminui-page-section__toggle">
                Some more stuff
            </button>
            <div class="adminui-page-section__content">
                <p>Hello world</p>
            </div>
        </div>
    </section>

Example: {type: isolated} Collapsible on small screens - expanded
    <section class="adminui-page-section  adminui-page-section--collapsible-sm  adminui-page-section--expanded">
        <div class="container  container--tight">
            <h2 class="adminui-page-section__title">
                Some more stuff
            </h2>
            <!--
            You need a javascript click listener on this button that removes
             ``adminui-page-section--expanded`` class from the section.
             -->
            <button type="button" class="adminui-page-section__toggle">
                Some more stuff
            </button>
            <div class="adminui-page-section__content">
                <p>Hello world</p>
            </div>
        </div>
    </section>


Example: {type: isolated} --focus
    <section class="adminui-page-section  adminui-page-section--focus">
        <div class="container  container--tight">
            <h2>Focus section</h2>
            <p>Used for making the content stand out slightly from the rest of the page</p>
            <p><a href="#">A link</a><p>
            <p><a href="#" class="button button--fill">A button styled link</a><p>
        </div>
    </section>


Example: {type: isolated} --primary
    <section class="adminui-page-section  adminui-page-section--primary">
        <div class="container  container--tight">
            <h2>Primary section</h2>
            <p>Used for making the content stand out slightly from the rest of the page</p>
            <p><a href="#">A link</a><p>
            <p><a href="#" class="button button--fill">A button styled link</a><p>
        </div>
    </section>


Example: {type: isolated} --secondary
    <section class="adminui-page-section  adminui-page-section--secondary">
        <div class="container  container--tight">
            <h2>Secondary section</h2>
            <p>Used for making the content stand out slightly from the rest of the page</p>
            <p><a href="#">A link</a><p>
            <p><a href="#" class="button button--fill">A button styled link</a><p>
        </div>
    </section>

Styleguide layout.adminui-page-section
*/
.adminui-page-section {
  padding-top: 21px;
  padding-bottom: 21px; }
  @media (min-width: 720px) {
    .adminui-page-section {
      padding-top: 34px;
      padding-bottom: 34px; } }
  .adminui-page-section--tight {
    margin: 0 auto;
    padding-left: 12px;
    padding-right: 12px;
    max-width: 740px; }
    @media (min-width: 440px) {
      .adminui-page-section--tight {
        padding-left: 24px;
        padding-right: 24px; } }
    @media (min-width: 720px) {
      .adminui-page-section--tight {
        padding-left: 60px;
        padding-right: 60px; } }
  .adminui-page-section--focus {
    background-color: #fff; }
  .adminui-page-section--primary {
    background-color: #ce111d; }
    .adminui-page-section--primary, .adminui-page-section--primary a:not([class]), .adminui-page-section--primary a:not([class]):hover {
      color: #fff; }
    .adminui-page-section--primary a:not([class]), .adminui-page-section--primary a:not([class]):hover {
      border-color: #fff; }
  .adminui-page-section--secondary {
    background-color: #002B49; }
    .adminui-page-section--secondary, .adminui-page-section--secondary a:not([class]), .adminui-page-section--secondary a:not([class]):hover {
      color: #fff; }
    .adminui-page-section--secondary a:not([class]), .adminui-page-section--secondary a:not([class]):hover {
      border-color: #fff; }
  .adminui-page-section--center {
    text-align: center; }
  @media (min-width: 720px) {
    .adminui-page-section--center-md {
      text-align: center; } }
  @media (min-width: 960px) {
    .adminui-page-section--center-lg {
      text-align: center; } }
  .adminui-page-section--spaced {
    padding-top: 28px;
    padding-bottom: 28px; }
    @media (min-width: 720px) {
      .adminui-page-section--spaced {
        padding-top: 56px;
        padding-bottom: 56px; } }
  .adminui-page-section--outlined {
    border-top: 3px solid #cbcbca;
    border-color: #eeeeef; }
  .adminui-page-section--last {
    margin-bottom: 0; }
    .adminui-page-section--last + .care-question {
      margin-top: 0; }
  .adminui-page-section__toggle {
    position: relative;
    display: block;
    width: 100%;
    padding-right: 24px;
    margin-bottom: 0;
    text-align: inherit; }
    .adminui-page-section__toggle:hover, .adminui-page-section__toggle:focus {
      color: #ce111d; }
    .adminui-page-section__toggle:after {
      -moz-osx-font-smoothing: grayscale;
      -webkit-font-smoothing: antialiased;
      display: inline-block;
      font-style: normal;
      font-variant: normal;
      text-rendering: auto;
      line-height: 1;
      font-weight: 900;
      font-family: 'Font Awesome 5 Free';
      content: "\f078";
      font-size: 16px;
      color: #40AAB8;
      position: absolute;
      display: block;
      right: 0;
      top: 50%;
      margin-top: -9px;
      transition: all 300ms cubic-bezier(0, 0, 0.1, 1); }
      @media screen and (min-width: 440px) {
        .adminui-page-section__toggle:after {
          font-size: 19px; } }
    @media (min-width: 720px) {
      .adminui-page-section__toggle {
        display: none; } }
  .adminui-page-section--collapsible-sm {
    border-bottom: 3px solid #cbcbca;
    border-color: #eeeeef; }
    @media (min-width: 720px) {
      .adminui-page-section--collapsible-sm {
        border-bottom: 0; } }
    .adminui-page-section--collapsible-sm .adminui-page-section__title,
    .adminui-page-section--collapsible-sm .adminui-page-section__content {
      display: none;
      margin-top: 21px; }
      @media (min-width: 720px) {
        .adminui-page-section--collapsible-sm .adminui-page-section__title,
        .adminui-page-section--collapsible-sm .adminui-page-section__content {
          display: block; } }
  .adminui-page-section--expanded .adminui-page-section__content {
    display: block; }
  .adminui-page-section--expanded .adminui-page-section__toggle:after {
    transform: rotate(-180deg); }
  .adminui-page-section--spaced {
    padding-top: 28px;
    padding-bottom: 28px; }
    @media (min-width: 720px) {
      .adminui-page-section--spaced {
        padding-top: 56px;
        padding-bottom: 56px; } }
  .adminui-page-section--spacing-sm {
    padding-top: 14px;
    padding-bottom: 14px; }
    @media (min-width: 720px) {
      .adminui-page-section--spacing-sm {
        padding-top: 28px;
        padding-bottom: 28px; } }
  .adminui-page-section > .container:last-child > p:last-child {
    margin-bottom: 0;
    padding-bottom: 0; }

/* Field row

**NOTE:** This should probably replace the splits in base.form.

Example: {type: isolated}
    <div class="container">
        <div class="fieldrow">
            <label class="fieldrow__column">
                First name
                <input type="text" class="input input--outlined">
            </label>
            <label class="fieldrow__column">
                Last name
                <input type="text" class="input input--outlined">
            </label>
        </div>
        <div class="fieldrow">
            <label class="fieldrow__column fieldrow__column--xtight">
                Postcode
                <input type="text" class="input input--outlined">
            </label>
            <label class="fieldrow__column fieldrow__column--wide">
                City
                <input type="text" class="input input--outlined">
            </label>
        </div>
        <div class="fieldrow">
            <label class="fieldrow__column fieldrow__column--xtight">
                xtight
                <input type="text" class="input input--outlined">
            </label>
            <label class="fieldrow__column fieldrow__column--tight">
                tight
                <input type="text" class="input input--outlined">
            </label>
            <label class="fieldrow__column">
                default
                <input type="text" class="input input--outlined">
            </label>
            <label class="fieldrow__column fieldrow__column--wide">
                wide
                <input type="text" class="input input--outlined">
            </label>
            <label class="fieldrow__column fieldrow__column--xwide">
                xwide
                <input type="text" class="input input--outlined">
            </label>
        </div>
    </div>

Styleguide components.fieldrow
*/
.fieldrow {
  display: block; }
  @media (min-width: 720px) {
    .fieldrow {
      display: flex;
      align-items: stretch;
      flex-flow: row;
      width: 100%; } }
  @media (min-width: 720px) {
    .fieldrow__column {
      flex: 3 3 0;
      margin-left: 12px;
      margin-right: 12px; }
      .fieldrow__column:first-child {
        margin-left: 0; }
      .fieldrow__column:last-child {
        margin-right: 0; }
      .fieldrow__column--xtight {
        flex: 1 1 0; }
      .fieldrow__column--tight {
        flex: 2 2 0; }
      .fieldrow__column--wide {
        flex: 4 4 0; }
      .fieldrow__column--xwide {
        flex: 5 5 0; } }

/** Input group


Example: Search

    <div class="input-group">
        <input type="text" placeholder="Search ..." class="input input-group__item" />
        <button class="button input-group__item">
            Search
        </button>
    </div>


Example: Search and filter

    <div class="input-group">
        <input type="text" placeholder="Search" class="input input-group__item" />
        <label class="select  select--outlined input-group__item">
            <select aria-label="Filter">
                <option>all</option>
                <option>important</option>
                <option>useless</option>
            </select>
        </label>
    </div>


Example: Search, filter and button

    <div class="input-group">
        <input type="text" placeholder="Search" class="input input-group__item" />
        <label class="select  select--outlined input-group__item">
            <select aria-label="Filter">
                <option>all</option>
                <option>important</option>
                <option>useless</option>
            </select>
        </label>
        <button class="button input-group__item">
            Search
        </button>
    </div>

Styleguide components.input-group
*/
@media (min-width: 720px) {
  .input-group {
    display: flex;
    align-items: stretch;
    flex-direction: row;
    margin-bottom: 6px; }
    .input-group .input-group__item {
      margin: 0;
      margin-right: -3px;
      border-radius: 0; }
      .input-group .input-group__item:first-child {
        border-bottom-left-radius: 5px;
        border-top-left-radius: 5px; }
      .input-group .input-group__item:last-child {
        border-bottom-right-radius: 5px;
        border-top-right-radius: 5px;
        margin-right: 0; }
      .input-group .input-group__item select {
        height: 100%; } }

.contenteditable--oneline * {
  display: inline; }

.contenteditable--no-focus-outline:focus {
  outline: none; }

/** Inline form

Example:

    This is a
    <form class="inline-form">
        <button class="button" type="button">Test</button>
    </form> of an inline form.

Styleguide components.inline-form
*/
.inline-form {
  display: inline-block;
  margin: 0;
  padding: 0; }

/* Loading indicator.

Shows a loading indicator after a 0.1 second delay.
The delay is to avoid flickering
when there is no need to show a loading indicator.

Example:
    <span class="loading-indicator">
        <span class="loading-indicator__indicator"></span>
        <span class="loading-indicator__indicator"></span>
        <span class="loading-indicator__indicator"></span>
        <span class="loading-indicator__text">
            Loading...
        </span>
    </span>

Example: Centered
    <div class="text-center">
        <span class="loading-indicator">
            <span class="loading-indicator__indicator"></span>
            <span class="loading-indicator__indicator"></span>
            <span class="loading-indicator__indicator"></span>
            <span class="loading-indicator__text">
                Loading...
            </span>
        </span>
    </div>

Example: Light
    <div class="text-center" style="background-color: #000; padding: 20px;">
        <span class="loading-indicator">
            <span class="loading-indicator__indicator loading-indicator__indicator--light"></span>
            <span class="loading-indicator__indicator loading-indicator__indicator--light"></span>
            <span class="loading-indicator__indicator loading-indicator__indicator--light"></span>
            <span class="loading-indicator__text">
                Loading...
            </span>
        </span>
    </div>


Example: With label instead of text (text is only visible to screenreaders)
    <span class="loading-indicator">
        <span class="loading-indicator__indicator"></span>
        <span class="loading-indicator__indicator"></span>
        <span class="loading-indicator__indicator"></span>
        <span class="loading-indicator__label">
            Loading...
        </span>
    </span>

Example: Centered - With label instead of text (text is only visible to screenreaders)
    <div class="text-center">
        <span class="loading-indicator">
            <span class="loading-indicator__indicator"></span>
            <span class="loading-indicator__indicator"></span>
            <span class="loading-indicator__indicator"></span>
            <span class="loading-indicator__label">
                Loading...
            </span>
        </span>
    </div>

Example: Light - With label instead of text (text is only visible to screenreaders)
    <div class="text-center" style="background-color: #000; padding: 20px;">
        <span class="loading-indicator">
            <span class="loading-indicator__indicator loading-indicator__indicator--light"></span>
            <span class="loading-indicator__indicator loading-indicator__indicator--light"></span>
            <span class="loading-indicator__indicator loading-indicator__indicator--light"></span>
            <span class="loading-indicator__label loading-indicator__label--light">
                Loading...
            </span>
        </span>
    </div>


Styleguide components.loading-indicator
*/
.loading-indicator {
  display: inline-block; }
  .loading-indicator__indicator {
    display: inline-block;
    margin-left: 6px;
    background-color: #E01220;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    opacity: 0;
    animation: loading-indicator__indicator__animation 1.8s infinite ease-in-out; }
    .loading-indicator__indicator:nth-child(1) {
      margin-left: 0;
      animation-delay: 0.1s; }
    .loading-indicator__indicator:nth-child(2) {
      animation-delay: 0.25s; }
    .loading-indicator__indicator:nth-child(3) {
      animation-delay: 0.4s; }
    .loading-indicator__indicator--light {
      background-color: #fff; }
  .loading-indicator__text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0; }
  .loading-indicator__label {
    display: block;
    margin-top: 12px;
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    font-size: 16px;
    line-height: 21px; }
    @media screen and (min-width: 440px) {
      .loading-indicator__label {
        font-size: 19px;
        line-height: 28px; } }
    .loading-indicator__label--light {
      color: #fff; }

@keyframes loading-indicator__indicator__animation {
  0%,
  80%,
  100% {
    opacity: .8; }
  40% {
    opacity: 0; } }

/* Searchinput

You will need to add javascript to actually get the clear button to clear
the field. The recommended behavior is to clear the field, and set focus
on the search input element after clearing the field.

Example:

    <div class="searchinput">
        <span class="searchinput__body">
            <input type="text" placeholder="Search ..." class="searchinput__input" />
        </span>
        <button type="button" class="searchinput__button" title="clear search input">
            <span class="searchinput__buttonicon cricon cricon--close" aria-hidden="true"></span>
        </button>
    </div>

Example: Dropdown icon

    <div class="searchinput">
        <span class="searchinput__body">
            <input type="text" placeholder="Search ..." class="searchinput__input" />
        </span>
        <button type="button" class="searchinput__button" title="Expand">
            <span class="searchinput__buttonicon cricon cricon--chevron-down" aria-hidden="true"></span>
        </button>
    </div>

Example: Multiple buttons

    <div class="searchinput">
        <span class="searchinput__body">
            <input type="text" placeholder="Search ..." class="searchinput__input" />
        </span>
        <button type="button" class="searchinput__button" title="clear search input">
            <span class="searchinput__buttonicon cricon cricon--close" aria-hidden="true"></span>
        </button>
        <button type="button" class="searchinput__button" title="Expand">
            <span class="searchinput__buttonicon cricon cricon--chevron-down" aria-hidden="true"></span>
        </button>
    </div>

Example: Within a label

    <label class="label">
        Search:
        <div class="searchinput">
            <span class="searchinput__body">
                <input type="text" placeholder="Search ..." class="searchinput__input" />
            </span>
            <button type="button" class="searchinput__button" title="clear search input">
                <span class="searchinput__buttonicon cricon cricon--close" aria-hidden="true"></span>
            </button>
        </div>
    </label>

Example: Disabled input

    <div class="searchinput">
        <span class="searchinput__body">
            <input type="text" disabled placeholder="Search ..." class="searchinput__input" />
        </span>
        <button type="button" disabled class="searchinput__button" title="clear search input">
            <span class="searchinput__buttonicon cricon cricon--close" aria-hidden="true"></span>
        </button>
    </div>


Example: With selected items

    <div class="searchinput">
        <span class="searchinput__body">
            <span class="searchinput__selected">
                <span class="searchinput__selected_preview">Animals</span>
            </span>
            <span class="searchinput__selected">
                <span class="searchinput__selected_preview">People</span>
            </span>
            <input type="text" placeholder="Search ..." class="searchinput__input" />
        </span>
        <button type="button" class="searchinput__button" title="clear search input">
            <span class="searchinput__buttonicon cricon cricon--close" aria-hidden="true"></span>
        </button>
    </div>


Example: With deselectable selected items

    <div class="searchinput">
        <span class="searchinput__body">
            <span class="searchinput__selected">
                <span class="searchinput__selected_preview searchinput__selected_preview--with-deselect">Animals</span>
                <button type="button" class="searchinput__deselect">
                    <i class="searchinput__deselect_icon cricon cricon--close cricon--color-light"></i>
                </button>
            </span>
            <span class="searchinput__selected">
                <span class="searchinput__selected_preview searchinput__selected_preview--with-deselect">People</span>
                <button type="button" class="searchinput__deselect">
                    <i class="searchinput__deselect_icon cricon cricon--close cricon--color-light"></i>
                </button>
            </span>
            <input type="text" placeholder="Search ..." class="searchinput__input" />
        </span>
        <button type="button" class="searchinput__button" title="clear search input">
            <span class="searchinput__buttonicon cricon cricon--close" aria-hidden="true"></span>
        </button>
    </div>


Example: With more than one line of selected items

    <div class="searchinput">
        <span class="searchinput__body">
            <span class="searchinput__selected">
                <span class="searchinput__selected_preview searchinput__selected_preview--with-deselect">Animals</span>
                <button type="button" class="searchinput__deselect">
                    <i class="searchinput__deselect_icon cricon cricon--close cricon--color-light"></i>
                </button>
            </span>
            <span class="searchinput__selected">
                <span class="searchinput__selected_preview searchinput__selected_preview--with-deselect">People</span>
                <button type="button" class="searchinput__deselect">
                    <i class="searchinput__deselect_icon cricon cricon--close cricon--color-light"></i>
                </button>
            </span>
            <span class="searchinput__selected">
                <span class="searchinput__selected_preview searchinput__selected_preview--with-deselect">Angry beasts</span>
                <button type="button" class="searchinput__deselect">
                    <i class="searchinput__deselect_icon cricon cricon--close cricon--color-light"></i>
                </button>
            </span>
            <span class="searchinput__selected">
                <span class="searchinput__selected_preview searchinput__selected_preview--with-deselect">Bigfoots / Yetis</span>
                <button type="button" class="searchinput__deselect">
                    <i class="searchinput__deselect_icon cricon cricon--close cricon--color-light"></i>
                </button>
            </span>
            <span class="searchinput__selected">
                <span class="searchinput__selected_preview searchinput__selected_preview--with-deselect">Magical creatures</span>
                <button type="button" class="searchinput__deselect">
                    <i class="searchinput__deselect_icon cricon cricon--close cricon--color-light"></i>
                </button>
            </span>
            <span class="searchinput__selected">
                <span class="searchinput__selected_preview searchinput__selected_preview--with-deselect">Demons / Hellspawn</span>
                <button type="button" class="searchinput__deselect">
                    <i class="searchinput__deselect_icon cricon cricon--close cricon--color-light"></i>
                </button>
            </span>
            <input type="text" placeholder="Search ..." class="searchinput__input" />
        </span>
        <button type="button" class="searchinput__button" title="clear search input">
            <span class="searchinput__buttonicon cricon cricon--close" aria-hidden="true"></span>
        </button>
        <button type="button" class="searchinput__button" title="clear search input">
            <span class="searchinput__buttonicon cricon cricon--chevron-down" aria-hidden="true"></span>
        </button>
    </div>


Example: searchinput__selected_preview as a button

    <!--
    You may want have the searchinput__selected_preview as a button
    that expands the search results and focus on the selected item,
    or perhaps popup details for the selected item.
    -->

    <div class="searchinput">
        <span class="searchinput__body">
            <span class="searchinput__selected">
                <button type="button" class="searchinput__selected_preview searchinput__selected_preview--with-deselect">Animals</button>
                <button type="button" class="searchinput__deselect">
                    <i class="searchinput__deselect_icon cricon cricon--close cricon--color-light"></i>
                </button>
            </span>
            <span class="searchinput__selected">
                <button type="button" class="searchinput__selected_preview searchinput__selected_preview--with-deselect">People</button>
                <button type="button" class="searchinput__deselect">
                    <i class="searchinput__deselect_icon cricon cricon--close cricon--color-light"></i>
                </button>
            </span>
            <input type="text" placeholder="Search ..." class="searchinput__input" />
        </span>
        <button type="button" class="searchinput__button" title="clear search input">
            <span class="searchinput__buttonicon cricon cricon--close" aria-hidden="true"></span>
        </button>
    </div>


Example: Single selected item - used when allowing to select one item via search

    <!--
    You will typically use this with javascript so that:

    - When an item is selected, you show something like the example below.
    - When no item is selected, you show a normal search field like the first
      ``searchinput`` examples.
    - The button clears the selected item (if any) or the search field.
    -->

    <div class="searchinput">
        <span class="searchinput__body">
            <span class="searchinput__selected searchinput__selected--single">
                <span class="searchinput__selected_preview">Animals</span>
            </span>
        </span>
        <button type="button" class="searchinput__button" title="deselect">
            <span class="searchinput__buttonicon cricon cricon--close" aria-hidden="true"></span>
        </button>
    </div>


Example: --inline

    <label class="label">
        Look, I
        <span class="searchinput searchinput--inline">
            <span class="searchinput__body">
                <input type="text" placeholder="Search ..." class="searchinput__input" />
            </span>
            <button type="button" class="searchinput__button" title="clear search input">
                <span class="searchinput__buttonicon cricon cricon--close" aria-hidden="true"></span>
            </button>
        </span>
        am inline!
    </label>


Example: --inline With selected items

    <label class="label">
        Look, I
        <span class="searchinput searchinput--inline">
            <span class="searchinput__body">
                <span class="searchinput__selected">
                    <span class="searchinput__selected_preview">Animals</span>
                </span>
                <span class="searchinput__selected">
                    <span class="searchinput__selected_preview">People</span>
                </span>
                <input type="text" placeholder="Search ..." class="searchinput__input" />
            </span>
            <button type="button" class="searchinput__button" title="clear search input">
                <span class="searchinput__buttonicon cricon cricon--close" aria-hidden="true"></span>
            </button>
        </span>
        am inline!
    </span>


Example: Compared with a normal input

    <input type="text" placeholder="Normal input ..." class="input" />
    <div class="searchinput">
        <span class="searchinput__body">
            <input type="text" placeholder="Search input ..." class="searchinput__input" />
        </span>
        <button type="button" class="searchinput__button" title="clear search input">
            <span class="searchinput__buttonicon cricon cricon--close" aria-hidden="true"></span>
        </button>
    </div>


Styleguide components.searchinput
*/
/* Searchinput size variants

Example: --size-xsmall

    <div class="searchinput searchinput--size-xsmall">
        <span class="searchinput__body">
            <span class="searchinput__selected">
                <span class="searchinput__selected_preview searchinput__selected_preview--with-deselect">Animals</span>
                <button type="button" class="searchinput__deselect">
                    <i class="searchinput__deselect_icon cricon cricon--close cricon--color-light"></i>
                </button>
            </span>
            <span class="searchinput__selected">
                <span class="searchinput__selected_preview">People</span>
            </span>
            <input type="text" placeholder="--size-xsmall" class="searchinput__input" />
        </span>
        <button type="button" class="searchinput__button" title="clear search input">
            <span class="searchinput__buttonicon cricon cricon--close" aria-hidden="true"></span>
        </button>
    </div>

Example: --size-small

    <div class="searchinput searchinput--size-small">
        <span class="searchinput__body">
            <span class="searchinput__selected">
                <span class="searchinput__selected_preview searchinput__selected_preview--with-deselect">Animals</span>
                <button type="button" class="searchinput__deselect">
                    <i class="searchinput__deselect_icon cricon cricon--close cricon--color-light"></i>
                </button>
            </span>
            <span class="searchinput__selected">
                <span class="searchinput__selected_preview">People</span>
            </span>
            <input type="text" placeholder="--size-small" class="searchinput__input" />
        </span>
        <button type="button" class="searchinput__button" title="clear search input">
            <span class="searchinput__buttonicon cricon cricon--close" aria-hidden="true"></span>
        </button>
    </div>

Example: Default size

    <div class="searchinput">
        <span class="searchinput__body">
            <span class="searchinput__selected">
                <span class="searchinput__selected_preview searchinput__selected_preview--with-deselect">Animals</span>
                <button type="button" class="searchinput__deselect">
                    <i class="searchinput__deselect_icon cricon cricon--close cricon--color-light"></i>
                </button>
            </span>
            <span class="searchinput__selected">
                <span class="searchinput__selected_preview">People</span>
            </span>
            <input type="text" placeholder="Default size ..." class="searchinput__input" />
        </span>
        <button type="button" class="searchinput__button" title="clear search input">
            <span class="searchinput__buttonicon cricon cricon--close" aria-hidden="true"></span>
        </button>
    </div>

Example: --size-large

    <div class="searchinput searchinput--size-large">
        <span class="searchinput__body">
            <span class="searchinput__selected">
                <span class="searchinput__selected_preview searchinput__selected_preview--with-deselect">Animals</span>
                <button type="button" class="searchinput__deselect">
                    <i class="searchinput__deselect_icon cricon cricon--close cricon--color-light"></i>
                </button>
            </span>
            <span class="searchinput__selected">
                <span class="searchinput__selected_preview">People</span>
            </span>
            <input type="text" placeholder="--size-large" class="searchinput__input" />
        </span>
        <button type="button" class="searchinput__button" title="clear search input">
            <span class="searchinput__buttonicon cricon cricon--close" aria-hidden="true"></span>
        </button>
    </div>

Styleguide components.searchinput.1:sizes
*/
/* Searchinput width variants

Notice that we do not provide the ``--xsmall`` and ``--xxsmall``
variants that we do for ``input``. This is because those sizes are so small
that they really do not make sense when you need to have place for a button.

Example: --width-small

    <div class="searchinput searchinput--width-small">
        <span class="searchinput__body">
            <input type="text" placeholder="--width-small" class="searchinput__input" />
        </span>
        <button type="button" class="searchinput__button" title="clear search input">
            <span class="searchinput__buttonicon cricon cricon--close" aria-hidden="true"></span>
        </button>
    </div>

Example: --width-small with buttons works, but is rarely a good idea

    <div class="searchinput searchinput--width-small">
        <span class="searchinput__body">
            <span class="searchinput__selected">
                <span class="searchinput__selected_preview searchinput__selected_preview--with-deselect">Animals</span>
                <button type="button" class="searchinput__deselect">
                    <i class="searchinput__deselect_icon cricon cricon--close cricon--color-light"></i>
                </button>
            </span>
            <span class="searchinput__selected">
                <span class="searchinput__selected_preview">People</span>
            </span>
            <input type="text" placeholder="--width-small" class="searchinput__input" />
        </span>
        <button type="button" class="searchinput__button" title="clear search input">
            <span class="searchinput__buttonicon cricon cricon--close" aria-hidden="true"></span>
        </button>
    </div>

Example: --width-small with single button

    <div class="searchinput searchinput--width-small">
        <span class="searchinput__body">
            <span class="searchinput__selected searchinput__selected--single">
                <span class="searchinput__selected_preview">Animals</span>
            </span>
        </span>
        <button type="button" class="searchinput__button" title="clear search input">
            <span class="searchinput__buttonicon cricon cricon--close" aria-hidden="true"></span>
        </button>
    </div>

Styleguide components.searchinput.2:widths
*/
/* Searchinput color variants


Example: --outlined

    <div class="searchinput searchinput--outlined">
        <span class="searchinput__body">
            <input type="text" placeholder="Search ..." class="searchinput__input" />
        </span>
        <button type="button" class="searchinput__button" title="clear search input">
            <span class="searchinput__buttonicon cricon cricon--close" aria-hidden="true"></span>
        </button>
    </div>


Example: --error

    <div class="searchinput searchinput--error">
        <span class="searchinput__body">
            <input type="text" placeholder="Search ..." class="searchinput__input" />
        </span>
        <button type="button" class="searchinput__button" title="clear search input">
            <span class="searchinput__buttonicon cricon cricon--close" aria-hidden="true"></span>
        </button>
    </div>


Example: Selected items --primary

    <div class="searchinput">
        <span class="searchinput__body">
            <span class="searchinput__selected">
                <span class="searchinput__selected_preview searchinput__selected_preview--primary searchinput__selected_preview--with-deselect">
                    Animals
                </span>
                <button type="button" class="searchinput__deselect searchinput__deselect--primary">
                    <i class="searchinput__deselect_icon cricon cricon--close cricon--color-light"></i>
                </button>
            </span>
            <input type="text" placeholder="Search ..." class="searchinput__input" />
        </span>
    </div>


Example: Selected items --secondary

    <div class="searchinput">
        <span class="searchinput__body">
            <span class="searchinput__selected">
                <span class="searchinput__selected_preview searchinput__selected_preview--secondary searchinput__selected_preview--with-deselect">
                    Animals
                </span>
                <button type="button" class="searchinput__deselect searchinput__deselect--secondary">
                    <i class="searchinput__deselect_icon cricon cricon--close cricon--color-light"></i>
                </button>
            </span>
            <input type="text" placeholder="Search ..." class="searchinput__input" />
        </span>
    </div>


Example: Selected items --warning

    <div class="searchinput">
        <span class="searchinput__body">
            <span class="searchinput__selected">
                <span class="searchinput__selected_preview searchinput__selected_preview--warning searchinput__selected_preview--with-deselect">
                    Animals
                </span>
                <button type="button" class="searchinput__deselect searchinput__deselect--warning">
                    <i class="searchinput__deselect_icon cricon cricon--close cricon--color-light"></i>
                </button>
            </span>
            <input type="text" placeholder="Search ..." class="searchinput__input" />
        </span>
    </div>


Example: Selected items --success

    <div class="searchinput">
        <span class="searchinput__body">
            <span class="searchinput__selected">
                <span class="searchinput__selected_preview searchinput__selected_preview--success searchinput__selected_preview--with-deselect">
                    Animals
                </span>
                <button type="button" class="searchinput__deselect searchinput__deselect--success">
                    <i class="searchinput__deselect_icon cricon cricon--close cricon--color-light"></i>
                </button>
            </span>
            <input type="text" placeholder="Search ..." class="searchinput__input" />
        </span>
    </div>


Example: Selected items --info

    <div class="searchinput">
        <span class="searchinput__body">
            <span class="searchinput__selected">
                <span class="searchinput__selected_preview searchinput__selected_preview--info searchinput__selected_preview--with-deselect">
                    Animals
                </span>
                <button type="button" class="searchinput__deselect searchinput__deselect--info">
                    <i class="searchinput__deselect_icon cricon cricon--close cricon--color-light"></i>
                </button>
            </span>
            <input type="text" placeholder="Search ..." class="searchinput__input" />
        </span>
    </div>


Styleguide components.searchinput.3:colors
*/
/* Searchinput IE 11 hacks

In IE11, searchinput does not render correctly because of a bug with min-height and
flexbox vertical centering. The workaround is to wrap the searchinput in an element
with ``display: flex`` or ``display: inline-flex``. We provide CSS classes for
this as shown below.

Example: Block

    <div class="ie-hack-display-flex-wrapper">
        <div class="searchinput">
            <span class="searchinput__body">
                <span class="searchinput__selected">
                    <span class="searchinput__selected_preview">Animals</span>
                </span>
                <span class="searchinput__selected">
                    <span class="searchinput__selected_preview">People</span>
                </span>
                <input type="text" placeholder="Search ..." class="searchinput__input" />
            </span>
            <button type="button" class="searchinput__button" title="clear search input">
                <span class="searchinput__buttonicon cricon cricon--close" aria-hidden="true"></span>
            </button>
        </div>
    </div>

Example: Inline

    <label class="label">
        Look, I
        <span class="ie-hack-display-inline-flex-wrapper">
            <span class="searchinput searchinput--inline">
                <span class="searchinput__body">
                    <input type="text" placeholder="Search ..." class="searchinput__input" />
                </span>
                <button type="button" class="searchinput__button" title="clear search input">
                    <span class="searchinput__buttonicon cricon cricon--close" aria-hidden="true"></span>
                </button>
            </span>
        </span>
        am inline!
    </label>

Styleguide components.searchinput.ie-hacks
*/
.searchinput {
  display: flex;
  padding: 9px 0 9px 15px;
  border-radius: 5px;
  border: 3px solid #fff;
  background-color: #fff;
  margin-bottom: 6px;
  font-family: "Maison Neue", Helvetica, sans-serif;
  font-weight: normal;
  font-size: 16px;
  box-sizing: border-box;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1.6;
  min-height: 52px; }
  @media screen and (min-width: 440px) {
    .searchinput {
      font-size: 19px; } }
  @media screen and (min-width: 440px) {
    .searchinput {
      padding-top: 0;
      padding-bottom: 0;
      line-height: 1.6;
      min-height: 52px; } }
  @media screen and (min-width: 720px) {
    .searchinput {
      padding-top: 0;
      padding-bottom: 0;
      line-height: 1.6;
      min-height: 56px; } }
  @media screen and (min-width: 960px) {
    .searchinput {
      padding-top: 0;
      padding-bottom: 0;
      line-height: 1.6;
      min-height: 56px; } }
  @media screen and (min-width: 1240px) {
    .searchinput {
      padding-top: 0;
      padding-bottom: 0;
      line-height: 1.6;
      min-height: 56px; } }
  .searchinput:focus-within {
    border-color: #002B49; }
  .searchinput--inline {
    display: inline-flex;
    width: auto;
    min-width: 200px;
    margin: 0; }
    .searchinput--inline .searchinput__input {
      margin: 0; }
  .searchinput--width-small {
    width: 216px;
    min-width: 30px; }
  .searchinput--size-xsmall {
    font-size: 15px;
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.6;
    min-height: 42px; }
    @media screen and (min-width: 720px) {
      .searchinput--size-xsmall {
        font-size: 16px; } }
    @media screen and (min-width: 440px) {
      .searchinput--size-xsmall {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.6;
        min-height: 42px; } }
    @media screen and (min-width: 720px) {
      .searchinput--size-xsmall {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.6;
        min-height: 42px; } }
    @media screen and (min-width: 960px) {
      .searchinput--size-xsmall {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.6;
        min-height: 42px; } }
    @media screen and (min-width: 1240px) {
      .searchinput--size-xsmall {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.6;
        min-height: 42px; } }
    .searchinput--size-xsmall .searchinput__selected {
      font-size: 12px; }
      @media screen and (min-width: 720px) {
        .searchinput--size-xsmall .searchinput__selected {
          font-size: 13px; } }
  .searchinput--size-small {
    font-size: 16px;
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.6;
    min-height: 48px; }
    @media screen and (min-width: 440px) {
      .searchinput--size-small {
        font-size: 19px; } }
    @media screen and (min-width: 440px) {
      .searchinput--size-small {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.6;
        min-height: 48px; } }
    @media screen and (min-width: 720px) {
      .searchinput--size-small {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.6;
        min-height: 48px; } }
    @media screen and (min-width: 960px) {
      .searchinput--size-small {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.6;
        min-height: 48px; } }
    @media screen and (min-width: 1240px) {
      .searchinput--size-small {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.6;
        min-height: 48px; } }
    .searchinput--size-small .searchinput__selected {
      font-size: 12px; }
      @media screen and (min-width: 720px) {
        .searchinput--size-small .searchinput__selected {
          font-size: 13px; } }
  .searchinput--size-large {
    font-size: 22px;
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.6;
    min-height: 62px; }
    @media screen and (min-width: 720px) {
      .searchinput--size-large {
        font-size: 24px; } }
    @media screen and (min-width: 440px) {
      .searchinput--size-large {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.6;
        min-height: 62px; } }
    @media screen and (min-width: 720px) {
      .searchinput--size-large {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.6;
        min-height: 70px; } }
    @media screen and (min-width: 960px) {
      .searchinput--size-large {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.6;
        min-height: 70px; } }
    @media screen and (min-width: 1240px) {
      .searchinput--size-large {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.6;
        min-height: 70px; } }
  .searchinput--outlined {
    border-color: #eeeeef; }
  .searchinput--error {
    border-color: #E01220; }
  .searchinput--nomargin {
    margin: 0; }
  .searchinput__body {
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
    width: 100%; }
  .searchinput__input {
    min-width: 96px;
    width: 120px;
    flex: 2 2 auto;
    outline: none;
    color: #2f2c2f;
    margin: 0;
    padding: 0;
    font-size: inherit;
    line-height: inherit;
    border: none;
    background-color: inherit;
    overflow: hidden; }
    .searchinput__input[disabled] {
      background-color: #e3e4e3; }
    .searchinput__input::-ms-clear {
      display: none;
      width: 0;
      height: 0; }
  .searchinput__button {
    padding: 0 15px;
    flex: 0 0 auto;
    align-items: center;
    display: flex; }
  .searchinput__buttonicon {
    flex: 1 1 auto; }
  .searchinput__selected {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    color: #fff;
    margin: 3px 6px 3px 0;
    align-items: center;
    font-size: 15px;
    overflow: hidden; }
    @media screen and (min-width: 720px) {
      .searchinput__selected {
        font-size: 16px; } }
    .searchinput__selected--single {
      width: 100%; }
  .searchinput__selected_preview {
    display: block;
    box-sizing: border-box;
    align-content: center;
    justify-content: center;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    max-width: 100%;
    text-overflow: ellipsis;
    border: 0;
    border-radius: 5px;
    background-color: #828383;
    padding: 7px 12px;
    width: 100%;
    line-height: 1.2;
    height: auto; }
    .searchinput__selected_preview--with-deselect {
      border-radius: 5px 0 0 5px; }
    .searchinput__selected_preview--small {
      max-width: 60px; }
    .searchinput__selected_preview--primary {
      background-color: #E01220; }
    .searchinput__selected_preview--secondary {
      background-color: #40AAB8; }
    .searchinput__selected_preview--warning {
      background-color: #E01220; }
    .searchinput__selected_preview--success {
      background-color: #007f1e; }
    .searchinput__selected_preview--info {
      background-color: #ffce00;
      color: #2f2c2f; }
  .searchinput__deselect {
    display: flex;
    box-sizing: border-box;
    align-items: center;
    border: 0;
    border-radius: 0 5px 5px 0;
    padding: 7px 6px;
    background: #2f2c2f;
    line-height: 1.2; }
    .searchinput__deselect--primary {
      background-color: #ce111d; }
    .searchinput__deselect--secondary {
      background-color: #002B49; }
    .searchinput__deselect--warning {
      background-color: #b30e1a; }
    .searchinput__deselect--success {
      background-color: #006618; }
    .searchinput__deselect--info {
      background-color: #cca500; }
  .searchinput__deselect_icon {
    transform: scale(0.6); }

/* Column layout

Example: {type: isolated} 1 column
    <div class="columnlayout">
        <div class="columnlayout__column">
            Pol, festus buxum! Nunquam acquirere mens. Hercle, spatii nobilis!, rumor!
            Medicinas cantare in piscinam!
        </div>
    </div>

Example: {type: isolated} 2 columns
    <div class="columnlayout">
        <div class="columnlayout__column columnlayout__column--xsmall">
            Column 1. A falsis, terror primus imber. Rusticus frondators ducunt ad abactus.
        </div>
        <div class="columnlayout__column">
            Column 2. Pol, festus buxum! Nunquam acquirere mens. Hercle, spatii nobilis!, rumor!
            Medicinas cantare in piscinam!
        </div>
    </div>

Example: {type: isolated} 3 columns
    <div class="columnlayout">
        <div class="columnlayout__column columnlayout__column--xsmall">
            Column 1. A falsis, terror primus imber. Rusticus frondators ducunt ad abactus.
        </div>
        <div class="columnlayout__column">
            Column 2. Pol, festus buxum! Nunquam acquirere mens. Hercle, spatii nobilis!, rumor!
            Medicinas cantare in piscinam!
        </div>
        <div class="columnlayout__column columnlayout__column--small">
            Column 3. Heuretes moris, tanquam castus nixus. Pol, a bene fides, epos!
        </div>
    </div>

Example: {type: isolated} 4 columns
    <div class="columnlayout">
        <div class="columnlayout__column columnlayout__column--xsmall">
            Column 1. A falsis, terror primus imber. Rusticus frondators ducunt ad abactus.
        </div>
        <div class="columnlayout__column columnlayout__column--xsmall">
            Column 2. Heu, armarium! Peritus amicitias ducunt ad ratione.
        </div>
        <div class="columnlayout__column">
            Column 3. Pol, festus buxum! Nunquam acquirere mens. Hercle, spatii nobilis!, rumor!
            Medicinas cantare in piscinam!
        </div>
        <div class="columnlayout__column columnlayout__column--small">
            Column 4. Heuretes moris, tanquam castus nixus. Pol, a bene fides, epos!
        </div>
    </div>

Example: {type: isolated} Centered vertically
    <div class="columnlayout">
        <div class="columnlayout__column columnlayout__column--xsmall">
            Column 1. A falsis, terror primus imber. Rusticus frondators ducunt ad abactus.
        </div>
        <div class="columnlayout__column columnlayout__column--vertical-center">
            Column 2. Pol, festus buxum! Nunquam acquirere mens. Hercle, spatii nobilis!, rumor!
            Medicinas cantare in piscinam!
        </div>
        <div class="columnlayout__column columnlayout__column--small">
            Column 3. Heuretes moris, tanquam castus nixus. Pol, a bene fides, epos!
        </div>
    </div>

Styleguide components.columnlayout
*/
/* Column layout - column sizes

Example: {type: isolated} --xsmall
    <div class="columnlayout">
        <div class="columnlayout__column columnlayout__column--xsmall">
            --xsmall column.
        </div>
        <div class="columnlayout__column">
            Pol, festus buxum! Nunquam acquirere mens. Hercle, spatii nobilis!, rumor!
            Medicinas cantare in piscinam!
        </div>
    </div>

Example: {type: isolated} --small
    <div class="columnlayout">
        <div class="columnlayout__column columnlayout__column--small">
            --small column.
        </div>
        <div class="columnlayout__column">
            Pol, festus buxum! Nunquam acquirere mens. Hercle, spatii nobilis!, rumor!
            Medicinas cantare in piscinam!
        </div>
    </div>

Example: {type: isolated} --large
    <div class="columnlayout">
        <div class="columnlayout__column columnlayout__column--large">
            --large column.
        </div>
        <div class="columnlayout__column">
            Pol, festus buxum! Nunquam acquirere mens. Hercle, spatii nobilis!, rumor!
            Medicinas cantare in piscinam!
        </div>
    </div>

Example: {type: isolated} --xlarge
    <div class="columnlayout">
        <div class="columnlayout__column columnlayout__column--xlarge">
            --xlarge column.
        </div>
        <div class="columnlayout__column">
            Pol, festus buxum! Nunquam acquirere mens. Hercle, spatii nobilis!, rumor!
            Medicinas cantare in piscinam!
        </div>
    </div>

Example: {type: isolated} --xxlarge
    <div class="columnlayout">
        <div class="columnlayout__column columnlayout__column--xxlarge">
            --xxlarge column.
        </div>
        <div class="columnlayout__column">
            Pol, festus buxum! Nunquam acquirere mens. Hercle, spatii nobilis!, rumor!
            Medicinas cantare in piscinam!
        </div>
    </div>

Example: {type: isolated} --xxxlarge
    <div class="columnlayout">
        <div class="columnlayout__column columnlayout__column--xxxlarge">
            --xxxlarge column.
        </div>
        <div class="columnlayout__column">
            Pol, festus buxum! Nunquam acquirere mens. Hercle, spatii nobilis!, rumor!
            Medicinas cantare in piscinam!
        </div>
    </div>

Example: {type: isolated} --half
    <div class="columnlayout">
        <div class="columnlayout__column columnlayout__column--half">
            Extums experimentum! Apolloniatess crescere in pius rugensis civitas!
            Est dexter lura, cesaris. Cum omnia velum, omnes cliniases reperire talis, fatalis barcases.
        </div>
        <div class="columnlayout__column">
            Pol, festus buxum! Nunquam acquirere mens. Hercle, spatii nobilis!, rumor!
            Medicinas cantare in piscinam!
        </div>
        <div class="columnlayout__column columnlayout__column--xsmall">
            Solems messis in dexter vierium!
        </div>
    </div>

Example: {type: isolated} --half - if you want two equally sized columns, you need to use --half on both
    <div class="columnlayout">
        <div class="columnlayout__column columnlayout__column--half">
            Extums experimentum! Apolloniatess crescere in pius rugensis civitas!
            Est dexter lura, cesaris. Cum omnia velum, omnes cliniases reperire talis, fatalis barcases.
        </div>
        <div class="columnlayout__column columnlayout__column--half">
            Pol, festus buxum! Nunquam acquirere mens. Hercle, spatii nobilis!, rumor!
            Medicinas cantare in piscinam!
        </div>
    </div>

Styleguide components.columnlayout.1:sizes
*/
/* Column layout - re-order for small displays

Available order css-classes:

- ``columnlayout__column--sm-order-1``
- ``columnlayout__column--sm-order-2``
- ``columnlayout__column--sm-order-3``
- ``columnlayout__column--sm-order-4``
- ``columnlayout__column--sm-order-5``

When using ``columnlayout__column--sm-order-X``,
columns within the same order are sorted by their order in the
DOM. The default order is 10, so using ordering css classes on some
columns will always push all the columns without an ordering
css class to the bottom.

Example: {type: isolated} Re-order for small screens
    <div class="columnlayout">
        <div class="columnlayout__column">
            First - second on mobile
        </div>
        <div class="columnlayout__column columnlayout__column--xsmall columnlayout__column--sm-order-1">
            Second - first on mobile
        </div>
    </div>

Example: {type: isolated} Re-order for small screens - advanced
    <div class="columnlayout">
        <div class="columnlayout__column columnlayout__column--xsmall columnlayout__column--sm-order-1">
            First
        </div>
        <div class="columnlayout__column columnlayout__column--xsmall columnlayout__column--sm-order-2">
            Second - third on sm
        </div>
        <div class="columnlayout__column">
            Third - fourth on sm
        </div>
        <div class="columnlayout__column columnlayout__column--small columnlayout__column--sm-order-1">
            Fourth - second on sm
        </div>
    </div>

Styleguide components.columnlayout.2:sm-order
*/
/* Column layout - Spacing

Example: {type: isolated} --spacing-none
    <div class="columnlayout columnlayout--spacing-none">
        <div class="columnlayout__column columnlayout__column--xsmall">
            Column 1. A falsis, terror primus imber. Rusticus frondators ducunt ad abactus.
        </div>
        <div class="columnlayout__column">
            Column 2. Pol, festus buxum! Nunquam acquirere mens. Hercle, spatii nobilis!, rumor!
            Medicinas cantare in piscinam!
        </div>
        <div class="columnlayout__column columnlayout__column--small">
            Column 3. Heuretes moris, tanquam castus nixus. Pol, a bene fides, epos!
        </div>
    </div>

Example: {type: isolated} --spacing-xsmall
    <div class="columnlayout columnlayout--spacing-xsmall">
        <div class="columnlayout__column columnlayout__column--xsmall">
            Column 1. A falsis, terror primus imber. Rusticus frondators ducunt ad abactus.
        </div>
        <div class="columnlayout__column">
            Column 2. Pol, festus buxum! Nunquam acquirere mens. Hercle, spatii nobilis!, rumor!
            Medicinas cantare in piscinam!
        </div>
        <div class="columnlayout__column columnlayout__column--small">
            Column 3. Heuretes moris, tanquam castus nixus. Pol, a bene fides, epos!
        </div>
    </div>

Example: {type: isolated} --spacing-small
    <div class="columnlayout columnlayout--spacing-small">
        <div class="columnlayout__column columnlayout__column--xsmall">
            Column 1. A falsis, terror primus imber. Rusticus frondators ducunt ad abactus.
        </div>
        <div class="columnlayout__column">
            Column 2. Pol, festus buxum! Nunquam acquirere mens. Hercle, spatii nobilis!, rumor!
            Medicinas cantare in piscinam!
        </div>
        <div class="columnlayout__column columnlayout__column--small">
            Column 3. Heuretes moris, tanquam castus nixus. Pol, a bene fides, epos!
        </div>
    </div>

Example: {type: isolated} Default
    <div class="columnlayout">
        <div class="columnlayout__column columnlayout__column--xsmall">
            Column 1. A falsis, terror primus imber. Rusticus frondators ducunt ad abactus.
        </div>
        <div class="columnlayout__column">
            Column 2. Pol, festus buxum! Nunquam acquirere mens. Hercle, spatii nobilis!, rumor!
            Medicinas cantare in piscinam!
        </div>
        <div class="columnlayout__column columnlayout__column--small">
            Column 3. Heuretes moris, tanquam castus nixus. Pol, a bene fides, epos!
        </div>
    </div>

Example: {type: isolated} --spacing-large
    <div class="columnlayout columnlayout--spacing-large">
        <div class="columnlayout__column columnlayout__column--xsmall">
            Column 1. A falsis, terror primus imber. Rusticus frondators ducunt ad abactus.
        </div>
        <div class="columnlayout__column">
            Column 2. Pol, festus buxum! Nunquam acquirere mens. Hercle, spatii nobilis!, rumor!
            Medicinas cantare in piscinam!
        </div>
        <div class="columnlayout__column columnlayout__column--small">
            Column 3. Heuretes moris, tanquam castus nixus. Pol, a bene fides, epos!
        </div>
    </div>


Styleguide components.columnlayout.3:spacing
*/
/* Column layout - Color variants

You can use the ``box`` component in combination with ``columnlayout__column``
to add colors. They can safely be combined, but be careful with the ``--large`` and
larger box variants when you have many columns. The padding can easily become larger
than the space available to each column.

Example: {type: isolated} Combine with box for colors
    <div class="columnlayout">
        <div class="columnlayout__column columnlayout__column--spacing-none box box--primary"></div>
        <div class="columnlayout__column columnlayout__column--spacing-none box box--secondary"></div>
        <div class="columnlayout__column columnlayout__column--spacing-none box box--info"></div>
        <div class="columnlayout__column columnlayout__column--spacing-none box box--warning"></div>
    </div>

Styleguide components.columnlayout.4:color
*/
/* Column layout - vertical separators

For separators, you create a column with with the ``--separator`` variant combined
with ``box box--spacing-none box--<somecolor>``.

Separator columns should normally use one of the ``--border-width*`` variants:

- columnlayout__column--border-width (width from the ``$border-width`` variable).
- columnlayout__column--border-width (width from the ``$border-width--small`` variable)

Separators are not visible on screens below the ``md`` breakpoint.

Example: {type: isolated}
    <div class="columnlayout">
        <div class="columnlayout__column columnlayout__column--half">
            Cras mattis consectetur purus sit amet fermentum. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod.
        </div>
        <div class="columnlayout__column columnlayout__column--separator columnlayout__column--border-width box box--neutral-dark box--spacing-none"></div>
        <div class="columnlayout__column columnlayout__column--half">
            Cras mattis consectetur purus sit amet fermentum. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod.
        </div>
    </div>

Example: {type: isolated} Tighter separator with --border-width-small
    <div class="columnlayout">
        <div class="columnlayout__column columnlayout__column--half">
            Cras mattis consectetur purus sit amet fermentum. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod.
        </div>
        <div class="columnlayout__column columnlayout__column--separator columnlayout__column--border-width-small box box--neutral-dark box--spacing-none"></div>
        <div class="columnlayout__column columnlayout__column--half">
            Cras mattis consectetur purus sit amet fermentum. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod.
        </div>
    </div>

Example: {type: isolated} Spacing like a page-section on small displays

    <!--
    You typically need this when using heading like in the example below to avoid
    that the sections are squashed together on small displays.
    -->
    <div class="columnlayout">
        <section class="columnlayout__column columnlayout__column--half">
            <h3>Hello</h3>
            <p>Cras mattis consectetur purus sit amet fermentum. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod.</p>
        </section>

        <!-- We use "columnlayout__column--separator-spacing-sm" instead of "columnlayout__column--separator" -->
        <div class="columnlayout__column columnlayout__column--separator-spacing-sm columnlayout__column--border-width box box--neutral-dark box--spacing-none"></div>

        <section class="columnlayout__column columnlayout__column--half">
            <h3>World</h3>
            <p>Cras mattis consectetur purus sit amet fermentum. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod.</p>
        </section>
    </div>


Styleguide components.columnlayout.5:separator
*/
.columnlayout {
  display: flex;
  flex-direction: column; }
  @media (min-width: 720px) {
    .columnlayout {
      flex-direction: row; } }
  .columnlayout__column {
    order: 10; }
    @media (min-width: 720px) {
      .columnlayout__column {
        flex: 1;
        margin-left: 12px;
        margin-right: 12px; } }
    @media (min-width: 720px) {
      .columnlayout__column:first-child {
        margin-left: 0; } }
    @media (min-width: 720px) {
      .columnlayout__column:last-child {
        margin-right: 0; } }
    @media (min-width: 720px) {
      .columnlayout__column--vertical-center {
        display: flex;
        flex-direction: column;
        justify-content: center; } }
    @media (min-width: 720px) {
      .columnlayout__column--border-width {
        flex: 0 0 auto;
        width: 3px; } }
    @media (min-width: 720px) {
      .columnlayout__column--border-width-small {
        flex: 0 0 auto;
        width: 2px; } }
    @media (min-width: 720px) {
      .columnlayout__column--xsmall {
        flex: 0 0 auto;
        width: 15%; } }
    @media (min-width: 720px) {
      .columnlayout__column--small {
        flex: 0 0 auto;
        width: 20%; } }
    @media (min-width: 720px) {
      .columnlayout__column--large {
        flex: 0 0 auto;
        width: 25%; } }
    @media (min-width: 720px) {
      .columnlayout__column--xlarge {
        flex: 0 0 auto;
        width: 30%; } }
    @media (min-width: 720px) {
      .columnlayout__column--xxlarge {
        flex: 0 0 auto;
        width: 35%; } }
    @media (min-width: 720px) {
      .columnlayout__column--xxxlarge {
        flex: 0 0 auto;
        width: 40%; } }
    @media (min-width: 720px) {
      .columnlayout__column--half {
        flex: 0 0 auto;
        width: 50%; } }
    @media (max-width: 719px) {
      .columnlayout__column--sm-order-1 {
        order: 1; } }
    @media (max-width: 719px) {
      .columnlayout__column--sm-order-2 {
        order: 2; } }
    @media (max-width: 719px) {
      .columnlayout__column--sm-order-3 {
        order: 3; } }
    @media (max-width: 719px) {
      .columnlayout__column--sm-order-5 {
        order: 5; } }
    @media (min-width: 720px) {
      .columnlayout__column--weight-1 {
        flex: 0 1 auto; } }
    @media (min-width: 720px) {
      .columnlayout__column--weight-2 {
        flex: 0 2 auto; } }
    @media (min-width: 720px) {
      .columnlayout__column--weight-3 {
        flex: 0 3 auto; } }
    @media (min-width: 720px) {
      .columnlayout__column--weight-4 {
        flex: 0 4 auto; } }
    .columnlayout__column--no-shrink-or-grow {
      flex: 0 0 auto; }
    .columnlayout__column--separator {
      display: none;
      overflow: hidden; }
      @media (min-width: 720px) {
        .columnlayout__column--separator {
          display: block;
          flex: 0 0 auto; } }
    .columnlayout__column--separator-spacing-sm {
      display: block;
      margin-top: 21px;
      overflow: hidden; }
      @media (min-width: 720px) {
        .columnlayout__column--separator-spacing-sm {
          margin-top: 0;
          flex: 0 0 auto; } }
  @media (min-width: 720px) {
    .columnlayout--spacing-none .columnlayout__column {
      margin-left: 0;
      margin-right: 0; } }
  @media (min-width: 720px) and (min-width: 720px) {
    .columnlayout--spacing-none .columnlayout__column:first-child {
      margin-left: 0; } }
  @media (min-width: 720px) and (min-width: 720px) {
    .columnlayout--spacing-none .columnlayout__column:last-child {
      margin-right: 0; } }
  @media (min-width: 720px) {
    .columnlayout--spacing-xsmall .columnlayout__column {
      margin-left: 6px;
      margin-right: 6px; } }
  @media (min-width: 720px) and (min-width: 720px) {
    .columnlayout--spacing-xsmall .columnlayout__column:first-child {
      margin-left: 0; } }
  @media (min-width: 720px) and (min-width: 720px) {
    .columnlayout--spacing-xsmall .columnlayout__column:last-child {
      margin-right: 0; } }
  @media (min-width: 720px) {
    .columnlayout--spacing-small .columnlayout__column {
      margin-left: 12px;
      margin-right: 12px; } }
  @media (min-width: 720px) and (min-width: 720px) {
    .columnlayout--spacing-small .columnlayout__column:first-child {
      margin-left: 0; } }
  @media (min-width: 720px) and (min-width: 720px) {
    .columnlayout--spacing-small .columnlayout__column:last-child {
      margin-right: 0; } }
  @media (min-width: 720px) {
    .columnlayout--spacing-large .columnlayout__column {
      margin-left: 24px;
      margin-right: 24px; } }
  @media (min-width: 720px) and (min-width: 720px) {
    .columnlayout--spacing-large .columnlayout__column:first-child {
      margin-left: 0; } }
  @media (min-width: 720px) and (min-width: 720px) {
    .columnlayout--spacing-large .columnlayout__column:last-child {
      margin-right: 0; } }

/* Column layout - breakpoint at "lg" screen size

When you want the breakpoint for vertical layout to be `lg` instead of `md`, use `columnlayout-lg`
instead of `columnlayout`.


Example: {type: isolated} 3 columns
    <div class="columnlayout-lg">
        <div class="columnlayout-lg__column columnlayout-lg__column--xsmall">
            Column 1. A falsis, terror primus imber. Rusticus frondators ducunt ad abactus.
        </div>
        <div class="columnlayout-lg__column">
            Column 2. Pol, festus buxum! Nunquam acquirere mens. Hercle, spatii nobilis!, rumor!
            Medicinas cantare in piscinam!
        </div>
        <div class="columnlayout-lg__column columnlayout-lg__column--small">
            Column 3. Heuretes moris, tanquam castus nixus. Pol, a bene fides, epos!
        </div>
    </div>


Styleguide components.columnlayout.6:lg
*/
.columnlayout-lg {
  display: flex;
  flex-direction: column; }
  @media (min-width: 960px) {
    .columnlayout-lg {
      flex-direction: row; } }
  .columnlayout-lg__column {
    order: 10; }
    @media (min-width: 960px) {
      .columnlayout-lg__column {
        flex: 1;
        margin-left: 12px;
        margin-right: 12px; } }
    @media (min-width: 960px) {
      .columnlayout-lg__column:first-child {
        margin-left: 0; } }
    @media (min-width: 960px) {
      .columnlayout-lg__column:last-child {
        margin-right: 0; } }
    @media (min-width: 960px) {
      .columnlayout-lg__column--vertical-center {
        display: flex;
        flex-direction: column;
        justify-content: center; } }
    @media (min-width: 960px) {
      .columnlayout-lg__column--border-width {
        flex: 0 0 auto;
        width: 3px; } }
    @media (min-width: 960px) {
      .columnlayout-lg__column--border-width-small {
        flex: 0 0 auto;
        width: 2px; } }
    @media (min-width: 960px) {
      .columnlayout-lg__column--xsmall {
        flex: 0 0 auto;
        width: 15%; } }
    @media (min-width: 960px) {
      .columnlayout-lg__column--small {
        flex: 0 0 auto;
        width: 20%; } }
    @media (min-width: 960px) {
      .columnlayout-lg__column--large {
        flex: 0 0 auto;
        width: 25%; } }
    @media (min-width: 960px) {
      .columnlayout-lg__column--xlarge {
        flex: 0 0 auto;
        width: 30%; } }
    @media (min-width: 960px) {
      .columnlayout-lg__column--xxlarge {
        flex: 0 0 auto;
        width: 35%; } }
    @media (min-width: 960px) {
      .columnlayout-lg__column--xxxlarge {
        flex: 0 0 auto;
        width: 40%; } }
    @media (min-width: 960px) {
      .columnlayout-lg__column--half {
        flex: 0 0 auto;
        width: 50%; } }
    @media (max-width: 959px) {
      .columnlayout-lg__column--sm-order-1 {
        order: 1; } }
    @media (max-width: 959px) {
      .columnlayout-lg__column--sm-order-2 {
        order: 2; } }
    @media (max-width: 959px) {
      .columnlayout-lg__column--sm-order-3 {
        order: 3; } }
    @media (max-width: 959px) {
      .columnlayout-lg__column--sm-order-5 {
        order: 5; } }
    @media (min-width: 960px) {
      .columnlayout-lg__column--weight-1 {
        flex: 0 1 auto; } }
    @media (min-width: 960px) {
      .columnlayout-lg__column--weight-2 {
        flex: 0 2 auto; } }
    @media (min-width: 960px) {
      .columnlayout-lg__column--weight-3 {
        flex: 0 3 auto; } }
    @media (min-width: 960px) {
      .columnlayout-lg__column--weight-4 {
        flex: 0 4 auto; } }
    .columnlayout-lg__column--no-shrink-or-grow {
      flex: 0 0 auto; }
    .columnlayout-lg__column--separator {
      display: none;
      overflow: hidden; }
      @media (min-width: 960px) {
        .columnlayout-lg__column--separator {
          display: block;
          flex: 0 0 auto; } }
    .columnlayout-lg__column--separator-spacing-sm {
      display: block;
      margin-top: 21px;
      overflow: hidden; }
      @media (min-width: 960px) {
        .columnlayout-lg__column--separator-spacing-sm {
          margin-top: 0;
          flex: 0 0 auto; } }
  @media (min-width: 960px) {
    .columnlayout-lg--spacing-none .columnlayout-lg__column {
      margin-left: 0;
      margin-right: 0; } }
  @media (min-width: 960px) and (min-width: 960px) {
    .columnlayout-lg--spacing-none .columnlayout-lg__column:first-child {
      margin-left: 0; } }
  @media (min-width: 960px) and (min-width: 960px) {
    .columnlayout-lg--spacing-none .columnlayout-lg__column:last-child {
      margin-right: 0; } }
  @media (min-width: 960px) {
    .columnlayout-lg--spacing-xsmall .columnlayout-lg__column {
      margin-left: 6px;
      margin-right: 6px; } }
  @media (min-width: 960px) and (min-width: 960px) {
    .columnlayout-lg--spacing-xsmall .columnlayout-lg__column:first-child {
      margin-left: 0; } }
  @media (min-width: 960px) and (min-width: 960px) {
    .columnlayout-lg--spacing-xsmall .columnlayout-lg__column:last-child {
      margin-right: 0; } }
  @media (min-width: 960px) {
    .columnlayout-lg--spacing-small .columnlayout-lg__column {
      margin-left: 12px;
      margin-right: 12px; } }
  @media (min-width: 960px) and (min-width: 960px) {
    .columnlayout-lg--spacing-small .columnlayout-lg__column:first-child {
      margin-left: 0; } }
  @media (min-width: 960px) and (min-width: 960px) {
    .columnlayout-lg--spacing-small .columnlayout-lg__column:last-child {
      margin-right: 0; } }
  @media (min-width: 960px) {
    .columnlayout-lg--spacing-large .columnlayout-lg__column {
      margin-left: 24px;
      margin-right: 24px; } }
  @media (min-width: 960px) and (min-width: 960px) {
    .columnlayout-lg--spacing-large .columnlayout-lg__column:first-child {
      margin-left: 0; } }
  @media (min-width: 960px) and (min-width: 960px) {
    .columnlayout-lg--spacing-large .columnlayout-lg__column:last-child {
      margin-right: 0; } }

/* Box

Example:
    <div class="box">
        Pol, festus buxum! Nunquam acquirere mens. Hercle, spatii nobilis!, rumor!
        Medicinas cantare in piscinam!
    </div>

Styleguide components.box
*/
/* Box - colors

Example: --focus
    <div class="box box--focus">
        Pol, festus buxum! Nunquam acquirere mens. Hercle, spatii nobilis!, rumor!
        Medicinas cantare in piscinam!
    </div>

Example: --neutral
    <div class="box box--neutral">
        Pol, festus buxum! Nunquam acquirere mens. Hercle, spatii nobilis!, rumor!
        Medicinas cantare in piscinam!
    </div>

Example: --neutral-light
    <div class="box box--neutral-light">
        Pol, festus buxum! Nunquam acquirere mens. Hercle, spatii nobilis!, rumor!
        Medicinas cantare in piscinam!
    </div>

Example: --neutral-dark
    <div class="box box--neutral-dark">
        Pol, festus buxum! Nunquam acquirere mens. Hercle, spatii nobilis!, rumor!
        Medicinas cantare in piscinam!
    </div>

Example: --neutral-xdark
    <div class="box box--neutral-xdark">
        Pol, festus buxum! Nunquam acquirere mens. Hercle, spatii nobilis!, rumor!
        Medicinas cantare in piscinam!
    </div>

Example: --primary
    <div class="box box--primary">
        Pol, festus buxum! Nunquam acquirere mens. Hercle, spatii nobilis!, rumor!
        Medicinas cantare in piscinam!
    </div>

Example: --primary-dark
    <div class="box box--primary-dark">
        Pol, festus buxum! Nunquam acquirere mens. Hercle, spatii nobilis!, rumor!
        Medicinas cantare in piscinam!
    </div>

Example: --secondary
    <div class="box box--secondary">
        Pol, festus buxum! Nunquam acquirere mens. Hercle, spatii nobilis!, rumor!
        Medicinas cantare in piscinam!
    </div>

Example: --secondary-dark
    <div class="box box--secondary-dark">
        Pol, festus buxum! Nunquam acquirere mens. Hercle, spatii nobilis!, rumor!
        Medicinas cantare in piscinam!
    </div>

Example: --info
    <div class="box box--info">
        Pol, festus buxum! Nunquam acquirere mens. Hercle, spatii nobilis!, rumor!
        Medicinas cantare in piscinam!
    </div>

Example: --success
    <div class="box box--success">
        Pol, festus buxum! Nunquam acquirere mens. Hercle, spatii nobilis!, rumor!
        Medicinas cantare in piscinam!
    </div>

Example: --warning
    <div class="box box--warning">
        Pol, festus buxum! Nunquam acquirere mens. Hercle, spatii nobilis!, rumor!
        Medicinas cantare in piscinam!
    </div>

Styleguide components.box.1:colors
*/
/* Box - spacing

We use --warning for the examples to make it easy to see the spacing.

Example: {type: isolated} Default
    <div class="box box--warning">
        Pol, festus buxum! Nunquam acquirere mens. Hercle, spatii nobilis!, rumor!
        Medicinas cantare in piscinam!
    </div>

Example: {type: isolated} --none
    <div class="box box--warning box--spacing-none">
        Pol, festus buxum! Nunquam acquirere mens. Hercle, spatii nobilis!, rumor!
        Medicinas cantare in piscinam!
    </div>

Example: {type: isolated} --small
    <div class="box box--warning box--spacing-small">
        Pol, festus buxum! Nunquam acquirere mens. Hercle, spatii nobilis!, rumor!
        Medicinas cantare in piscinam!
    </div>

Example: {type: isolated} --large
    <div class="box box--warning box--spacing-large">
        Pol, festus buxum! Nunquam acquirere mens. Hercle, spatii nobilis!, rumor!
        Medicinas cantare in piscinam!
    </div>

Example: {type: isolated} --xlarge
    <div class="box box--warning box--spacing-xlarge">
        Pol, festus buxum! Nunquam acquirere mens. Hercle, spatii nobilis!, rumor!
        Medicinas cantare in piscinam!
    </div>

Example: {type: isolated} Combine with containers
    <div class="box box--warning box--spacing-none-sides">
        <div class="container">
            Pol, festus buxum! Nunquam acquirere mens. Hercle, spatii nobilis!, rumor!
            Medicinas cantare in piscinam!
        </div>
    </div>

Example: {type: isolated} Combine with containers - --spacing-large
    <div class="box box--warning box--spacing-none-sides box--spacing-large">
        <div class="container">
            Pol, festus buxum! Nunquam acquirere mens. Hercle, spatii nobilis!, rumor!
            Medicinas cantare in piscinam!
        </div>
    </div>

Styleguide components.box.2:spacing
*/
.box {
  padding: 12px; }
  @media (min-width: 720px) {
    .box {
      padding: 24px; } }
  .box--spacing-none {
    padding: 0; }
    @media (min-width: 720px) {
      .box--spacing-none {
        padding: 0; } }
  .box--spacing-small {
    padding: 6px; }
    @media (min-width: 720px) {
      .box--spacing-small {
        padding: 12px; } }
  .box--spacing-large {
    padding: 24px; }
    @media (min-width: 720px) {
      .box--spacing-large {
        padding: 60px; } }
  .box--spacing-xlarge {
    padding: 60px; }
    @media (min-width: 720px) {
      .box--spacing-xlarge {
        padding: 240px; } }
  .box--spacing-none-sides {
    padding-left: 0;
    padding-right: 0; }
  .box--focus {
    background-color: #fff; }
  .box--neutral-xlight {
    background-color: #f5f5f5; }
  .box--neutral-light {
    background-color: #eeeeef; }
  .box--neutral-dark {
    background-color: #828383;
    color: #fff; }
    .box--neutral-dark a {
      color: #fff;
      border-color: #fff; }
      .box--neutral-dark a:hover {
        color: #fff;
        border-color: #fff; }
  .box--neutral-xdark {
    background-color: #2f2c2f;
    color: #fff; }
    .box--neutral-xdark a {
      color: #fff;
      border-color: #fff; }
      .box--neutral-xdark a:hover {
        color: #fff;
        border-color: #fff; }
  .box--primary {
    background-color: #E01220;
    color: #fff; }
    .box--primary a {
      color: #fff;
      border-color: #fff; }
      .box--primary a:hover {
        color: #fff;
        border-color: #fff; }
  .box--primary-dark {
    background-color: #ce111d;
    color: #fff; }
    .box--primary-dark a {
      color: #fff;
      border-color: #fff; }
      .box--primary-dark a:hover {
        color: #fff;
        border-color: #fff; }
  .box--secondary {
    background-color: #40AAB8;
    color: #fff; }
    .box--secondary a {
      color: #fff;
      border-color: #fff; }
      .box--secondary a:hover {
        color: #fff;
        border-color: #fff; }
  .box--secondary-dark {
    background-color: #002B49;
    color: #fff; }
    .box--secondary-dark a {
      color: #fff;
      border-color: #fff; }
      .box--secondary-dark a:hover {
        color: #fff;
        border-color: #fff; }
  .box--info {
    background-color: #f5c90f; }
  .box--success {
    background-color: #3c893c;
    color: #fff; }
    .box--success a {
      color: #fff;
      border-color: #fff; }
      .box--success a:hover {
        color: #fff;
        border-color: #fff; }
  .box--warning {
    background-color: #d53c3c;
    color: #fff; }
    .box--warning a {
      color: #fff;
      border-color: #fff; }
      .box--warning a:hover {
        color: #fff;
        border-color: #fff; }

/** Help

Example:

    <div class="help">
        <span class="help__icon" aria-hidden="true"></span>
        <div class="help__content">
            <p class="paragraph paragraph--tight">Some help here!</p>
            <p class="paragraph paragraph--tight">Can have multiple paragraphs!</p>
        </div>
    </div>

Example: --muted

    <div class="help help--muted">
        <span class="help__icon" aria-hidden="true"></span>
        <div class="help__content">
            <p class="paragraph paragraph--tight">Some help here!</p>
            <p class="paragraph paragraph--tight">Can have multiple paragraphs!</p>
        </div>
    </div>

Example: Warning icon

    <div class="help">
        <span class="help__icon help__icon--warning" aria-hidden="true"></span>
        <div class="help__content">
            <p class="paragraph paragraph--tight">Some help here!</p>
            <p class="paragraph paragraph--tight">Can have multiple paragraphs!</p>
        </div>
    </div>

Example: --large

    <div class="help help--large">
        <span class="help__icon" aria-hidden="true"></span>
        <div class="help__content">
            <p class="paragraph paragraph--tight">Some help here!</p>
            <p class="paragraph paragraph--tight">Can have multiple paragraphs!</p>
        </div>
    </div>

Example: --medium

    <div class="help help--medium">
        <span class="help__icon" aria-hidden="true"></span>
        <div class="help__content">
            <p class="paragraph paragraph--tight">Some help here!</p>
            <p class="paragraph paragraph--tight">Can have multiple paragraphs!</p>
        </div>
    </div>

Example: --small (basically force the default body font size)

    <div class="help help--small">
        <span class="help__icon" aria-hidden="true"></span>
        <div class="help__content">
            <p class="paragraph paragraph--tight">Some help here!</p>
            <p class="paragraph paragraph--tight">Can have multiple paragraphs!</p>
        </div>
    </div>

Example: --xsmall

    <div class="help help--xsmall">
        <span class="help__icon" aria-hidden="true"></span>
        <div class="help__content">
            <p class="paragraph paragraph--tight">Some help here!</p>
            <p class="paragraph paragraph--tight">Can have multiple paragraphs!</p>
        </div>
    </div>

Example: Combine with box

    <div class="box box--info box--spacing-small">
        <div class="help help--xsmall">
            <span class="help__icon" aria-hidden="true"></span>
            <div class="help__content">
                <p class="paragraph paragraph--tight">Some help here!</p>
                <p class="paragraph paragraph--no-margin">Can have multiple paragraphs!</p>
            </div>
        </div>
    </div>

Styleguide components.help
*/
.help {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap; }
  .help__icon {
    flex: 0 0 auto; }
    .help__icon:before {
      -moz-osx-font-smoothing: grayscale;
      -webkit-font-smoothing: antialiased;
      display: inline-block;
      font-style: normal;
      font-variant: normal;
      text-rendering: auto;
      line-height: 1;
      font-weight: 900;
      font-family: 'Font Awesome 5 Free';
      content: "\f05a"; }
    .help__icon--warning:before {
      color: #E01220;
      -moz-osx-font-smoothing: grayscale;
      -webkit-font-smoothing: antialiased;
      display: inline-block;
      font-style: normal;
      font-variant: normal;
      text-rendering: auto;
      line-height: 1;
      font-weight: 900;
      font-family: 'Font Awesome 5 Free';
      content: "\f071"; }
  .help__content {
    padding-left: 12px;
    flex: 0 1 auto; }
  .help--large {
    font-size: 19px;
    line-height: 28px; }
    @media screen and (min-width: 440px) {
      .help--large {
        font-size: 23px;
        line-height: 28px; } }
    .help--large .help__content {
      padding-left: 24px; }
  .help--medium {
    font-size: 22px;
    line-height: 28px; }
    @media screen and (min-width: 720px) {
      .help--medium {
        font-size: 24px;
        line-height: 35px; } }
  .help--small {
    font-size: 16px;
    line-height: 21px; }
    @media screen and (min-width: 440px) {
      .help--small {
        font-size: 19px;
        line-height: 28px; } }
  .help--xsmall {
    font-size: 15px;
    line-height: 21px; }
    @media screen and (min-width: 720px) {
      .help--xsmall {
        font-size: 16px;
        line-height: 21px; } }
  .help--muted {
    color: #686969; }

/** Paginator

Example:

    <div class="paginator">
        <button class="paginator__button" title="Previous">
            <span class="cricon cricon--chevron-left" aria-hidden="true"></span>
        </button>
        <span class="paginator__label">Page 3/9</span>
        <button class="paginator__button" title="Next">
            <span class="cricon cricon--chevron-right" aria-hidden="true"></span>
        </button>
    </div>

Example: --inline

    <div class="text-center">
        <span class="paginator paginator--inline">
            <button class="paginator__button" title="Previous">
                <span class="cricon cricon--chevron-left" aria-hidden="true"></span>
            </button>
            <span class="paginator__label">Page 3/9</span>
            <button class="paginator__button" title="Next">
                <span class="cricon cricon--chevron-right" aria-hidden="true"></span>
            </button>
        </span>
    </div>


Example: Disabled button

    <div class="paginator">
        <button class="paginator__button" title="Previous">
            <span class="cricon cricon--chevron-left" aria-hidden="true"></span>
        </button>
        <span class="paginator__label">Page 9/9</span>
        <button class="paginator__button" title="Next" disabled>
            <span class="cricon cricon--chevron-right" aria-hidden="true"></span>
        </button>
    </div>


Example: Small label

    <div class="paginator">
        <button class="paginator__button" title="Previous">
            <span class="cricon cricon--chevron-left" aria-hidden="true"></span>
        </button>
        <span class="paginator__label paginator__label--xsmall">Page 3/9</span>
        <button class="paginator__button" title="Next">
            <span class="cricon cricon--chevron-right" aria-hidden="true"></span>
        </button>
    </div>


Example: Button colors

    <div class="paginator">
        <button class="paginator__button paginator__button--primary" title="Previous">
            <span class="cricon cricon--chevron-left" aria-hidden="true"></span>
        </button>
        <span class="paginator__label">--primary</span>
        <button class="paginator__button paginator__button--primary" title="Next">
            <span class="cricon cricon--chevron-right" aria-hidden="true"></span>
        </button>
    </div>

    <div class="paginator">
        <button class="paginator__button paginator__button--secondary" title="Previous">
            <span class="cricon cricon--chevron-left" aria-hidden="true"></span>
        </button>
        <span class="paginator__label">--secondary</span>
        <button class="paginator__button paginator__button--secondary" title="Next">
            <span class="cricon cricon--chevron-right" aria-hidden="true"></span>
        </button>
    </div>


Styleguide components.paginator
*/
.paginator {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px; }
  .paginator__label--xsmall {
    font-size: 15px;
    line-height: 21px; }
    @media screen and (min-width: 720px) {
      .paginator__label--xsmall {
        font-size: 16px;
        line-height: 21px; } }
  .paginator__label, .paginator__button {
    margin-left: 6px;
    margin-right: 6px; }
    .paginator__label:last-child, .paginator__button:last-child {
      margin-right: 0; }
    .paginator__label:first-child, .paginator__button:first-child {
      margin-left: 0; }
  .paginator__button {
    border-radius: 50%;
    width: 36px;
    height: 36px;
    color: #fff;
    text-align: center;
    background-color: #e3e4e3; }
    .paginator__button:hover {
      background-color: #828383; }
    .paginator__button:disabled, .paginator__button:disabled:hover {
      background-color: #e3e4e3; }
    .paginator__button--primary {
      background-color: #E01220; }
      .paginator__button--primary:hover {
        background-color: #ce111d; }
    .paginator__button--secondary {
      background-color: #40AAB8; }
      .paginator__button--secondary:hover {
        background-color: #002B49; }
  .paginator--inline {
    display: inline-flex; }

/* Buttonbar

Example:
    <div class="buttonbar">
        <button class="buttonbar__button">
            H1
        </button>
        <button class="buttonbar__button">
            H2
        </button>
        <button class="buttonbar__button">
            <strong>B</strong>
        </button>
        <button class="buttonbar__button">
            <em>I</em>
        </button>
    </div>


Example: Multiple on one line
    <div class="buttonbar buttonbar--inline">
        <button class="buttonbar__button">
            H1
        </button>
        <button class="buttonbar__button">
            H2
        </button>
        <button class="buttonbar__button">
            <strong>B</strong>
        </button>
        <button class="buttonbar__button">
            <em>I</em>
        </button>
    </div>
    <div class="buttonbar buttonbar--inline">
        <button class="buttonbar__button">
            Left
        </button>
        <button class="buttonbar__button">
            Right
        </button>
    </div>


Example: Compact buttons
    <div class="buttonbar">
        <button class="buttonbar__button buttonbar__button--compact">
            H1
        </button>
        <button class="buttonbar__button buttonbar__button--compact">
            H2
        </button>
    </div>



Example: Single button works too!
    <div class="buttonbar">
        <button class="buttonbar__button">
            H1
        </button>
    </div>


Example: {type: isolated} Center
    <!--
    Use a wrapper with "text-center" class combined with buttonbar--inline to center
    -->
    <div class="text-center">
        <div class="buttonbar buttonbar--inline">
            <button class="buttonbar__button">
                Yes
            </button>
            <button class="buttonbar__button">
                No
            </button>
        </div>
    </div>

Example: {type: isolated} Break into multiple lines on small displays
    <!-- can also use --md --lg and --xl, or no breakpoint class at all. -->
    <div class="container container--wide">
        <label class="label">Select a date:</label>
        <div class="buttonbar">
            <div class="buttonbar__group buttonbar__group--sm">
                <button class="buttonbar__button buttonbar__button--input-outlined buttonbar__button--grow-2" style="width: 200px;">
                    Sunday, December 24, 2017 12:35 PM
                </button>
                <button class="buttonbar__button buttonbar__button--secondary-fill buttonbar__button--no-grow">
                    Now
                </button>
            </div>
            <div class="buttonbar__group buttonbar__group--sm">
                <button class="buttonbar__button">
                    Tomorrow
                </button>
            </div>
        </div>
    </div>


Styleguide components.buttonbar
*/
/** Buttonbar - button colors

Example: Default and --fill
    <div class="buttonbar">
        <button class="buttonbar__button buttonbar__button--fill">
            --fill
        </button>
        <button class="buttonbar__button buttonbar__button">
            Default
        </button>
    </div>

Example: --neutral-light and  --neutral-light-fill
    <div class="buttonbar">
        <button class="buttonbar__button buttonbar__button--neutral-light-fill">
            --fill
        </button>
        <button class="buttonbar__button buttonbar__button--neutral-light">
            Default
        </button>
    </div>

Example: --primary and --primary-fill
    <div class="buttonbar">
        <button class="buttonbar__button buttonbar__button--primary-fill">
            --primary-fill
        </button>
        <button class="buttonbar__button buttonbar__button--primary">
            --primary
        </button>
    </div>

Example: --secondary and --secondary-fill
    <div class="buttonbar">
        <button class="buttonbar__button buttonbar__button--secondary-fill">
            --secondary-fill
        </button>
        <button class="buttonbar__button buttonbar__button--secondary">
            --secondary
        </button>
    </div>

Example: --warning and --warning-fill
    <div class="buttonbar">
        <button class="buttonbar__button buttonbar__button--warning-fill">
            --warning-fill
        </button>
        <button class="buttonbar__button buttonbar__button--warning">
            --warning
        </button>
    </div>

Example: --success and --success-fill
    <div class="buttonbar">
        <button class="buttonbar__button buttonbar__button--success-fill">
            --success-fill
        </button>
        <button class="buttonbar__button buttonbar__button--success">
            --success
        </button>
    </div>

Example: --light and --light-fill
    <div style="background-color: #000; padding: 10px;">
        <div class="buttonbar">
            <button class="buttonbar__button buttonbar__button--light-fill">
                --light-fill
            </button>
            <button class="buttonbar__button buttonbar__button--light">
                --light
            </button>
        </div>
    </div>


Styleguide components.buttonbar.buttoncolor
 */
.buttonbar {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-bottom: 14px;
  align-items: stretch; }
  .buttonbar__button {
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    font-size: 15px;
    line-height: 21px;
    font-style: normal;
    text-align: center;
    position: relative;
    display: block;
    width: 100%;
    padding: 6px 12px;
    border-radius: 5px;
    color: #2f2c2f;
    white-space: normal;
    border: 3px solid #828383;
    background-color: transparent;
    margin-bottom: 6px;
    margin-right: -3px;
    margin-bottom: 0;
    border-radius: 0;
    white-space: nowrap;
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: auto;
    width: auto; }
    @media screen and (min-width: 720px) {
      .buttonbar__button {
        font-size: 16px;
        line-height: 21px; } }
    .buttonbar__button[disabled] {
      pointer-events: none;
      opacity: 0.4; }
    .buttonbar__button:hover, .buttonbar__button:focus, .buttonbar__button:active {
      color: #fff;
      border-color: #828383;
      background-color: #828383; }
      .buttonbar__button:hover .button__icon--non-hover, .buttonbar__button:focus .button__icon--non-hover, .buttonbar__button:active .button__icon--non-hover {
        display: none; }
      .buttonbar__button:hover .button__icon--hover, .buttonbar__button:focus .button__icon--hover, .buttonbar__button:active .button__icon--hover {
        display: inline-block; }
    .buttonbar__button:focus {
      z-index: 2; }
    @media (min-width: 720px) {
      .buttonbar__button {
        padding: 9px 39px; } }
    .buttonbar__button:first-child {
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px; }
    .buttonbar__button:last-child {
      border-top-right-radius: 5px;
      border-bottom-right-radius: 5px; }
    .buttonbar__button--fill {
      color: #fff;
      border-color: #828383;
      background-color: #828383; }
      .buttonbar__button--fill:hover, .buttonbar__button--fill:focus, .buttonbar__button--fill:active {
        color: #2f2c2f;
        border-color: #828383;
        background-color: transparent; }
    .buttonbar__button--neutral-light {
      color: #2f2c2f;
      border-color: #eeeeef;
      background-color: transparent; }
      .buttonbar__button--neutral-light:hover, .buttonbar__button--neutral-light:focus, .buttonbar__button--neutral-light:active {
        border-color: #eeeeef;
        background-color: #eeeeef;
        color: #2f2c2f; }
    .buttonbar__button--neutral-light-fill {
      border-color: #eeeeef;
      background-color: #eeeeef;
      color: #2f2c2f; }
      .buttonbar__button--neutral-light-fill:hover, .buttonbar__button--neutral-light-fill:focus, .buttonbar__button--neutral-light-fill:active {
        color: #2f2c2f;
        border-color: #eeeeef;
        background-color: transparent; }
    .buttonbar__button--primary {
      color: #ce111d;
      border-color: #ce111d;
      background-color: transparent; }
      .buttonbar__button--primary:hover, .buttonbar__button--primary:focus, .buttonbar__button--primary:active {
        border-color: #ce111d;
        background-color: #ce111d;
        color: #fff; }
    .buttonbar__button--primary-fill {
      border-color: #ce111d;
      background-color: #ce111d;
      color: #fff; }
      .buttonbar__button--primary-fill:hover, .buttonbar__button--primary-fill:focus, .buttonbar__button--primary-fill:active {
        color: #ce111d;
        border-color: #ce111d;
        background-color: transparent; }
    .buttonbar__button--secondary {
      color: #002B49;
      border-color: #002B49;
      background-color: transparent; }
      .buttonbar__button--secondary:hover, .buttonbar__button--secondary:focus, .buttonbar__button--secondary:active {
        border-color: #002B49;
        background-color: #002B49;
        color: #fff; }
    .buttonbar__button--secondary-fill {
      border-color: #002B49;
      background-color: #002B49;
      color: #fff; }
      .buttonbar__button--secondary-fill:hover, .buttonbar__button--secondary-fill:focus, .buttonbar__button--secondary-fill:active {
        color: #002B49;
        border-color: #002B49;
        background-color: transparent; }
    .buttonbar__button--warning {
      color: #b30e1a;
      border-color: #b30e1a;
      background-color: transparent; }
      .buttonbar__button--warning:hover, .buttonbar__button--warning:focus, .buttonbar__button--warning:active {
        border-color: #b30e1a;
        background-color: #b30e1a;
        color: #fff; }
    .buttonbar__button--warning-fill {
      border-color: #b30e1a;
      background-color: #b30e1a;
      color: #fff; }
      .buttonbar__button--warning-fill:hover, .buttonbar__button--warning-fill:focus, .buttonbar__button--warning-fill:active {
        color: #b30e1a;
        border-color: #b30e1a;
        background-color: transparent; }
    .buttonbar__button--success {
      color: #006618;
      border-color: #006618;
      background-color: transparent; }
      .buttonbar__button--success:hover, .buttonbar__button--success:focus, .buttonbar__button--success:active {
        border-color: #006618;
        background-color: #006618;
        color: #fff; }
    .buttonbar__button--success-fill {
      border-color: #006618;
      background-color: #006618;
      color: #fff; }
      .buttonbar__button--success-fill:hover, .buttonbar__button--success-fill:focus, .buttonbar__button--success-fill:active {
        color: #006618;
        border-color: #006618;
        background-color: transparent; }
    .buttonbar__button--light {
      color: #fff;
      border-color: #fff;
      background-color: transparent; }
      .buttonbar__button--light:hover, .buttonbar__button--light:focus, .buttonbar__button--light:active {
        border-color: #fff;
        background-color: #fff;
        color: #E01220; }
    .buttonbar__button--light-fill {
      border-color: #fff;
      background-color: #fff;
      color: #E01220; }
      .buttonbar__button--light-fill:hover, .buttonbar__button--light-fill:focus, .buttonbar__button--light-fill:active {
        color: #fff;
        border-color: #fff;
        background-color: transparent; }
    .buttonbar__button--primary-xlight {
      color: #E01220;
      border-color: #E01220;
      background-color: transparent; }
      .buttonbar__button--primary-xlight:hover, .buttonbar__button--primary-xlight:focus, .buttonbar__button--primary-xlight:active {
        border-color: #E01220;
        background-color: #E01220;
        color: #fff; }
    .buttonbar__button--primary-xlight-fill {
      border-color: #E01220;
      background-color: #E01220;
      color: #fff; }
      .buttonbar__button--primary-xlight-fill:hover, .buttonbar__button--primary-xlight-fill:focus, .buttonbar__button--primary-xlight-fill:active {
        color: #E01220;
        border-color: #E01220;
        background-color: transparent; }
    .buttonbar__button--grow-2 {
      flex-grow: 2; }
    .buttonbar__button--no-grow {
      flex-grow: 0; }
    .buttonbar__button--input {
      color: #2f2c2f;
      border-color: #fff;
      background-color: #fff;
      font-family: "Maison Neue", Helvetica, sans-serif;
      font-weight: normal;
      font-size: 16px;
      line-height: 21px;
      text-align: left;
      letter-spacing: normal;
      text-transform: none;
      padding: 9px 15px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis; }
      .buttonbar__button--input:hover, .buttonbar__button--input:focus, .buttonbar__button--input:active {
        border-color: #fff;
        background-color: #fff;
        border-color: #002B49;
        color: #2f2c2f; }
      @media screen and (min-width: 440px) {
        .buttonbar__button--input {
          font-size: 19px;
          line-height: 28px; } }
    .buttonbar__button--input-outlined {
      color: #2f2c2f;
      border-color: #eeeeef;
      background-color: #fff;
      font-family: "Maison Neue", Helvetica, sans-serif;
      font-weight: normal;
      font-size: 16px;
      line-height: 21px;
      text-align: left;
      letter-spacing: normal;
      text-transform: none;
      padding: 9px 15px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis; }
      .buttonbar__button--input-outlined:hover, .buttonbar__button--input-outlined:focus, .buttonbar__button--input-outlined:active {
        border-color: #fff;
        background-color: #fff;
        border-color: #002B49;
        color: #2f2c2f; }
      @media screen and (min-width: 440px) {
        .buttonbar__button--input-outlined {
          font-size: 19px;
          line-height: 28px; } }
    .buttonbar__button--compact {
      font-size: 15px;
      line-height: 21px;
      padding: 6px 12px; }
      @media screen and (min-width: 720px) {
        .buttonbar__button--compact {
          font-size: 16px;
          line-height: 21px; } }
    .buttonbar__button--form-size-xsmall {
      font-size: 12px;
      padding-left: 12px;
      padding-right: 12px;
      box-sizing: border-box;
      padding-top: 0;
      padding-bottom: 0;
      line-height: 1.2;
      height: 42px; }
      @media screen and (min-width: 720px) {
        .buttonbar__button--form-size-xsmall {
          font-size: 13px; } }
      @media screen and (min-width: 440px) {
        .buttonbar__button--form-size-xsmall {
          padding-top: 0;
          padding-bottom: 0;
          line-height: 1.2;
          height: 42px; } }
      @media screen and (min-width: 720px) {
        .buttonbar__button--form-size-xsmall {
          padding-top: 0;
          padding-bottom: 0;
          line-height: 1.2;
          height: 42px; } }
      @media screen and (min-width: 960px) {
        .buttonbar__button--form-size-xsmall {
          padding-top: 0;
          padding-bottom: 0;
          line-height: 1.2;
          height: 42px; } }
      @media screen and (min-width: 1240px) {
        .buttonbar__button--form-size-xsmall {
          padding-top: 0;
          padding-bottom: 0;
          line-height: 1.2;
          height: 42px; } }
    .buttonbar__button--form-size-small {
      box-sizing: border-box;
      padding-top: 0;
      padding-bottom: 0;
      line-height: 1.2;
      height: 48px;
      padding-left: 12px;
      padding-right: 12px; }
      @media screen and (min-width: 440px) {
        .buttonbar__button--form-size-small {
          padding-top: 0;
          padding-bottom: 0;
          line-height: 1.2;
          height: 48px; } }
      @media screen and (min-width: 720px) {
        .buttonbar__button--form-size-small {
          padding-top: 0;
          padding-bottom: 0;
          line-height: 1.2;
          height: 48px; } }
      @media screen and (min-width: 960px) {
        .buttonbar__button--form-size-small {
          padding-top: 0;
          padding-bottom: 0;
          line-height: 1.2;
          height: 48px; } }
      @media screen and (min-width: 1240px) {
        .buttonbar__button--form-size-small {
          padding-top: 0;
          padding-bottom: 0;
          line-height: 1.2;
          height: 48px; } }
    .buttonbar__button--form-size-default {
      box-sizing: border-box;
      padding-top: 0;
      padding-bottom: 0;
      line-height: 1.2;
      height: 52px; }
      @media screen and (min-width: 440px) {
        .buttonbar__button--form-size-default {
          padding-top: 0;
          padding-bottom: 0;
          line-height: 1.2;
          height: 52px; } }
      @media screen and (min-width: 720px) {
        .buttonbar__button--form-size-default {
          padding-top: 0;
          padding-bottom: 0;
          line-height: 1.2;
          height: 56px; } }
      @media screen and (min-width: 960px) {
        .buttonbar__button--form-size-default {
          padding-top: 0;
          padding-bottom: 0;
          line-height: 1.2;
          height: 56px; } }
      @media screen and (min-width: 1240px) {
        .buttonbar__button--form-size-default {
          padding-top: 0;
          padding-bottom: 0;
          line-height: 1.2;
          height: 56px; } }
    .buttonbar__button--form-size-large {
      font-size: 16px;
      box-sizing: border-box;
      padding-top: 0;
      padding-bottom: 0;
      line-height: 1.2;
      height: 62px; }
      @media screen and (min-width: 440px) {
        .buttonbar__button--form-size-large {
          font-size: 19px; } }
      @media screen and (min-width: 440px) {
        .buttonbar__button--form-size-large {
          padding-top: 0;
          padding-bottom: 0;
          line-height: 1.2;
          height: 62px; } }
      @media screen and (min-width: 720px) {
        .buttonbar__button--form-size-large {
          padding-top: 0;
          padding-bottom: 0;
          line-height: 1.2;
          height: 70px; } }
      @media screen and (min-width: 960px) {
        .buttonbar__button--form-size-large {
          padding-top: 0;
          padding-bottom: 0;
          line-height: 1.2;
          height: 70px; } }
      @media screen and (min-width: 1240px) {
        .buttonbar__button--form-size-large {
          padding-top: 0;
          padding-bottom: 0;
          line-height: 1.2;
          height: 70px; } }
    .buttonbar__button--width-xsmall {
      width: 120px;
      min-width: 30px; }
    .buttonbar__button--width-xxsmall {
      width: 96px;
      min-width: 30px; }
    .buttonbar__button--width-small {
      width: 216px;
      min-width: 30px; }
  .buttonbar__group {
    display: flex;
    justify-content: flex-start;
    flex-wrap: nowrap;
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: 100%;
    align-items: stretch; }
    .buttonbar__group .buttonbar__button {
      border-radius: 0; }
    .buttonbar__group:first-child .buttonbar__button:first-child {
      border-top-left-radius: 5px; }
    .buttonbar__group:first-child .buttonbar__button:last-child {
      border-top-right-radius: 5px; }
    .buttonbar__group:last-child .buttonbar__button:first-child {
      border-bottom-left-radius: 5px; }
    .buttonbar__group:last-child .buttonbar__button:last-child {
      border-bottom-right-radius: 5px; }
    @media (min-width: 720px) {
      .buttonbar__group--sm {
        flex-basis: auto; }
        .buttonbar__group--sm .buttonbar__button {
          border-radius: 0; }
        .buttonbar__group--sm:first-child .buttonbar__button:first-child {
          border-top-left-radius: 5px;
          border-bottom-left-radius: 5px; }
        .buttonbar__group--sm:last-child .buttonbar__button:last-child {
          border-top-right-radius: 5px;
          border-bottom-right-radius: 5px; } }
    @media (min-width: 960px) {
      .buttonbar__group--md {
        flex-basis: auto; }
        .buttonbar__group--md .buttonbar__button {
          border-radius: 0; }
        .buttonbar__group--md:first-child .buttonbar__button:first-child {
          border-top-left-radius: 5px;
          border-bottom-left-radius: 5px; }
        .buttonbar__group--md:last-child .buttonbar__button:last-child {
          border-top-right-radius: 5px;
          border-bottom-right-radius: 5px; } }
    @media (min-width: 1240px) {
      .buttonbar__group--lg {
        flex-basis: auto; }
        .buttonbar__group--lg .buttonbar__button {
          border-radius: 0; }
        .buttonbar__group--lg:first-child .buttonbar__button:first-child {
          border-top-left-radius: 5px;
          border-bottom-left-radius: 5px; }
        .buttonbar__group--lg:last-child .buttonbar__button:last-child {
          border-top-right-radius: 5px;
          border-bottom-right-radius: 5px; } }
  .buttonbar--nomargin {
    margin-bottom: 0; }
  .buttonbar--tinymargin {
    margin-bottom: 6px; }
  .buttonbar--stretch .buttonbar__button {
    flex: 1 1 auto; }
  .buttonbar--inline {
    display: inline-flex; }
  .buttonbar--center {
    justify-content: center; }

/** Calendar month

Example: {type: isolated}

    <div class="calendar-month calendar-month--sane-max-width">
        <div class="calendar-month__header">
            <div class="calendar-month__header-row">
                <div class="calendar-month__header-day">mon</div>
                <div class="calendar-month__header-day">tue</div>
                <div class="calendar-month__header-day">wed</div>
                <div class="calendar-month__header-day">thu</div>
                <div class="calendar-month__header-day">fri</div>
                <div class="calendar-month__header-day">sat</div>
                <div class="calendar-month__header-day">sun</div>
            </div>
        </div>
        <div class="calendar-month__body">
            <div class="calendar-month__week">
                <div aria-role="button" class="calendar-month__day">
                    <button class="calendar-month__daybutton calendar-month__daybutton--muted">27</button>
                </div>
                <div aria-role="button" class="calendar-month__day">
                    <button class="calendar-month__daybutton calendar-month__daybutton--muted">28</button>
                </div>
                <div aria-role="button" class="calendar-month__day">
                    <button class="calendar-month__daybutton calendar-month__daybutton--muted">29</button>
                </div>
                <div aria-role="button" class="calendar-month__day">
                    <button class="calendar-month__daybutton calendar-month__daybutton--muted">30</button>
                </div>
                <div aria-role="button" class="calendar-month__day">
                    <button class="calendar-month__daybutton calendar-month__daybutton--muted">31</button>
                </div>
                <div aria-role="button" class="calendar-month__day">
                    <button class="calendar-month__daybutton">1</button>
                </div>
                <div aria-role="button" class="calendar-month__day">
                    <button class="calendar-month__daybutton">2</button>
                </div>
            </div>
            <div class="calendar-month__week">
                <div aria-role="button" class="calendar-month__day">
                    <button class="calendar-month__daybutton">3</button>
                </div>
                <div aria-role="button" class="calendar-month__day">
                    <button class="calendar-month__daybutton">4</button>
                </div>
                <div aria-role="button" class="calendar-month__day">
                    <button class="calendar-month__daybutton">5</button>
                </div>
                <div aria-role="button" class="calendar-month__day">
                    <button class="calendar-month__daybutton">6</button>
                </div>
                <div aria-role="button" class="calendar-month__day">
                    <button class="calendar-month__daybutton">7</button>
                </div>
                <div aria-role="button" class="calendar-month__day">
                    <button class="calendar-month__daybutton">8</button>
                </div>
                <div aria-role="button" class="calendar-month__day">
                    <button class="calendar-month__daybutton">9</button>
                </div>
            </div>
            <div class="calendar-month__week">
                <div aria-role="button" class="calendar-month__day">
                    <button class="calendar-month__daybutton">10</button>
                </div>
                <div aria-role="button" class="calendar-month__day">
                    <button class="calendar-month__daybutton">11</button>
                </div>
                <div aria-role="button" class="calendar-month__day">
                    <button class="calendar-month__daybutton">12</button>
                </div>
                <div aria-role="button" class="calendar-month__day">
                    <button class="calendar-month__daybutton">13</button>
                </div>
                <div aria-role="button" class="calendar-month__day">
                    <button class="calendar-month__daybutton">14</button>
                </div>
                <div aria-role="button" class="calendar-month__day">
                    <button class="calendar-month__daybutton">15</button>
                </div>
                <div aria-role="button" class="calendar-month__day">
                    <button class="calendar-month__daybutton">16</button>
                </div>
            </div>
            <div class="calendar-month__week">
                <div aria-role="button" class="calendar-month__day">
                    <button class="calendar-month__daybutton">17</button>
                </div>
                <div aria-role="button" class="calendar-month__day">
                    <button class="calendar-month__daybutton">18</button>
                </div>
                <div aria-role="button" class="calendar-month__day">
                    <button class="calendar-month__daybutton">19</button>
                </div>
                <div aria-role="button" class="calendar-month__day">
                    <button class="calendar-month__daybutton">20</button>
                </div>
                <div aria-role="button" class="calendar-month__day">
                    <button class="calendar-month__daybutton">21</button>
                </div>
                <div aria-role="button" class="calendar-month__day">
                    <button class="calendar-month__daybutton">22</button>
                </div>
                <div aria-role="button" class="calendar-month__day">
                    <button class="calendar-month__daybutton">23</button>
                </div>
            </div>
            <div class="calendar-month__week">
                <div aria-role="button" class="calendar-month__day">
                    <button class="calendar-month__daybutton">24</button>
                </div>
                <div aria-role="button" class="calendar-month__day">
                    <button class="calendar-month__daybutton">25</button>
                </div>
                <div aria-role="button" class="calendar-month__day">
                    <button class="calendar-month__daybutton">26</button>
                </div>
                <div aria-role="button" class="calendar-month__day">
                    <button class="calendar-month__daybutton">27</button>
                </div>
                <div aria-role="button" class="calendar-month__day">
                    <button class="calendar-month__daybutton">28</button>
                </div>
                <div aria-role="button" class="calendar-month__day">
                    <button class="calendar-month__daybutton">29</button>
                </div>
                <div aria-role="button" class="calendar-month__day">
                    <button class="calendar-month__daybutton">30</button>
                </div>
            </div>
            <div class="calendar-month__week">
                <div aria-role="button" class="calendar-month__day">
                    <button class="calendar-month__daybutton calendar-month__daybutton--muted">1</button>
                </div>
                <div aria-role="button" class="calendar-month__day">
                    <button class="calendar-month__daybutton calendar-month__daybutton--muted">2</button>
                </div>
                <div aria-role="button" class="calendar-month__day">
                    <button class="calendar-month__daybutton calendar-month__daybutton--muted">3</button>
                </div>
                <div aria-role="button" class="calendar-month__day">
                    <button class="calendar-month__daybutton calendar-month__daybutton--muted">4</button>
                </div>
                <div aria-role="button" class="calendar-month__day">
                    <button class="calendar-month__daybutton calendar-month__daybutton--muted">5</button>
                </div>
                <div aria-role="button" class="calendar-month__day">
                    <button class="calendar-month__daybutton calendar-month__daybutton--muted">6</button>
                </div>
                <div aria-role="button" class="calendar-month__day">
                    <button class="calendar-month__daybutton calendar-month__daybutton--muted">7</button>
                </div>
            </div>
        </div>
    </div>

Styleguide components.calendar-month
 */
.calendar-month {
  display: table;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
  width: 100%;
  margin-bottom: 6px; }
  .calendar-month:last-child {
    margin-bottom: 0; }
  .calendar-month__header {
    display: table-header-group; }
  .calendar-month__body {
    display: table-row-group; }
  .calendar-month__week, .calendar-month__header-row {
    display: table-row; }
  .calendar-month__day, .calendar-month__header-day {
    display: table-cell;
    text-align: center;
    border: 1px solid #cbcbca; }
  .calendar-month__header-day {
    padding: 6px 0;
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    font-size: 12px;
    line-height: 21px;
    text-transform: uppercase; }
    @media screen and (min-width: 720px) {
      .calendar-month__header-day {
        font-size: 13px;
        line-height: 21px; } }
    @media (min-width: 720px) {
      .calendar-month__header-day {
        font-size: 15px;
        line-height: 21px; } }
  @media screen and (min-width: 720px) and (min-width: 720px) {
    .calendar-month__header-day {
      font-size: 16px;
      line-height: 21px; } }
  .calendar-month__daybutton {
    width: 100%;
    height: 100%;
    display: block;
    padding: 12px 0;
    cursor: pointer;
    font-family: "Maison Neue", Helvetica, sans-serif;
    color: #2f2c2f; }
    .calendar-month__daybutton:hover, .calendar-month__daybutton:focus, .calendar-month__daybutton:active, .calendar-month__daybutton--selected {
      color: #fff;
      outline: none; }
    .calendar-month__daybutton:hover {
      background-color: #40AAB8; }
    .calendar-month__daybutton--today {
      background-color: #fae487; }
    .calendar-month__daybutton:focus, .calendar-month__daybutton:active, .calendar-month__daybutton--selected {
      background-color: #002B49; }
    .calendar-month__daybutton--muted {
      color: #686969; }
    .calendar-month__daybutton[disabled], .calendar-month__daybutton[disabled]:focus, .calendar-month__daybutton[disabled]:active {
      background-color: #eeeeef;
      color: #828383;
      cursor: not-allowed; }
  .calendar-month--sane-max-width {
    max-width: 440px; }

/** Month-picker

Example: {type: isolated}
    <div class="container">
    <br>
    <div class="month-picker">
        <div class="month-picker__month">January</div>
        <div class="month-picker__month">February</div>
        <div class="month-picker__month">March</div>
        <div class="month-picker__month">April</div>
        <div class="month-picker__month">May</div>
        <div class="month-picker__month">June</div>
        <div class="month-picker__month">July</div>
        <div class="month-picker__month">August</div>
        <div class="month-picker__month">September</div>
        <div class="month-picker__month">October</div>
        <div class="month-picker__month">November</div>
        <div class="month-picker__month">December</div>
    </div>
    <br>
    </div>

Styleguide components.month-picker
 */
.month-picker {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #cbcbca; }
  @media (min-width: 320px) {
    .month-picker {
      display: flex;
      flex-wrap: wrap;
      align-content: stretch; } }
  .month-picker__month {
    display: block;
    text-align: center;
    padding: 6px 6px;
    border: 1px solid #cbcbca;
    cursor: pointer;
    box-sizing: border-box;
    font-family: "Maison Neue", Helvetica, sans-serif;
    border-bottom-width: 0;
    border-left-width: 0;
    border-right-width: 0; }
    .month-picker__month:first-child {
      border-top-width: 0; }
    @media (min-width: 320px) {
      .month-picker__month {
        flex: 1 1 auto;
        width: 50%; }
        .month-picker__month:nth-child(odd) {
          border-right-width: 1px; }
        .month-picker__month:nth-child(2) {
          border-top-width: 0; } }
    .month-picker__month:hover, .month-picker__month:focus, .month-picker__month:active, .month-picker__month--selected {
      color: #fff;
      outline: none; }
    .month-picker__month:hover {
      background-color: #40AAB8; }
    .month-picker__month:focus, .month-picker__month:active, .month-picker__month--selected {
      background-color: #002B49; }
    .month-picker__month--muted {
      color: #686969; }
  .month-picker--sane-max-width {
    max-width: 440px; }

/** Date/time picker

Uses multiple related classes to provide full datetime select
styling for various use cases.

Example: {type: isolated}

    <div class="datetimepicker datetimepicker--sane-max-width">
        <div class="datetimepicker__body datetimepicker__body--outlined">
            <div class="buttonbar buttonbar--stretch buttonbar--tinymargin">
                <button class="buttonbar__button buttonbar__button--secondary-fill" title="Date">
                    <span class="cricon cricon--calendar-grid" aria-hidden="true"></span>
                    Date
                </button>
                <button class="buttonbar__button buttonbar__button--secondary" title="Time">
                    <span class="cricon cricon--clock" aria-hidden="true"></span>
                    Time
                </button>
            </div>
            <div class="paginator">
                <button class="paginator__button" title="Previous month">
                    <span class="cricon cricon--chevron-left" aria-hidden="true"></span>
                </button>
                <div class="paginator__label paginator__label--xsmall">December 2017</div>
                <button class="paginator__button" title="Next month">
                    <span class="cricon cricon--chevron-right" aria-hidden="true"></span>
                </button>
            </div>

            <div class="calendar-month">
                <div class="calendar-month__header">
                    <div class="calendar-month__header-row">
                        <div class="calendar-month__header-day">mon</div>
                        <div class="calendar-month__header-day">tue</div>
                        <div class="calendar-month__header-day">wed</div>
                        <div class="calendar-month__header-day">thu</div>
                        <div class="calendar-month__header-day">fri</div>
                        <div class="calendar-month__header-day">sat</div>
                        <div class="calendar-month__header-day">sun</div>
                    </div>
                </div>
                <div class="calendar-month__body">
                    <div class="calendar-month__week">
                        <div tabindex="0" aria-role="button" class="calendar-month__day calendar-month__day--muted">27</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day calendar-month__day--muted">28</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day calendar-month__day--muted">29</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day calendar-month__day--muted">30</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day calendar-month__day--muted">31</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">1</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">2</div>
                    </div>
                    <div class="calendar-month__week">
                        <div tabindex="0" aria-role="button" class="calendar-month__day">3</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">4</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">5</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">6</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">7</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">8</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">9</div>
                    </div>
                    <div class="calendar-month__week">
                        <div tabindex="0" aria-role="button" class="calendar-month__day">10</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">11</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">12</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">13</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">14</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">15</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">16</div>
                    </div>
                    <div class="calendar-month__week">
                        <div tabindex="0" aria-role="button" class="calendar-month__day">17</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">18</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">19</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">20</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">21</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">22</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">23</div>
                    </div>
                    <div class="calendar-month__week">
                        <div tabindex="0" aria-role="button" class="calendar-month__day">24</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">25</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">26</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">27</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">28</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">29</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">30</div>
                    </div>
                    <div class="calendar-month__week">
                        <div tabindex="0" aria-role="button" class="calendar-month__day calendar-month__day--muted">1</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day calendar-month__day--muted">2</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day calendar-month__day--muted">3</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day calendar-month__day--muted">4</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day calendar-month__day--muted">5</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day calendar-month__day--muted">6</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day calendar-month__day--muted">7</div>
                    </div>
                </div>
            </div>
            <p class="datetimepicker__preview">
                Jun 15 2018 14:33
            </p>
        </div>
    </div>


Example: Modal
    <script>
        function showDateTimePickerModal () {
            document.getElementById('id_datetimepicker_modal').style.display = 'block';
        }
        function hideDateTimePickerModal () {
            document.getElementById('id_datetimepicker_modal').style.display = 'none';
        }
    </script>

    <label class="label">Select a date:</label>
    <div class="max-width max-width--xs">
        <div class="buttonbar">
            <button class="buttonbar__button buttonbar__button--input-outlined buttonbar__button--grow-2 buttonbar__button--width-xsmall"
                    onClick="showDateTimePickerModal()">
                <span class="cricon cricon--calendar" aria-hidden="true"></span>
                Dec 24, 2017 12:35 PM
            </button>
            <button type="button" class="buttonbar__button buttonbar__button--secondary-fill buttonbar__button--no-grow">
                Now
            </button>
        </div>
    </div>

    <div id="id_datetimepicker_modal" class="datetimepicker datetimepicker--modal" style="display: none;">
        <div class="datetimepicker__backdrop" onClick="hideDateTimePickerModal()"></div>
        <div class="datetimepicker__body datetimepicker__body--modal">
            <div class="datetimepicker__close">
                <button type="button" aria-title="Close" onClick="hideDateTimePickerModal()">
                    <span class="cricon cricon--close" aria-hidden="true"></span>
                </button>
            </div>

            <div class="datetimepicker__title">
                Select a publishing time
            </div>

            <div class="buttonbar buttonbar--stretch buttonbar--tinymargin">
                <button class="buttonbar__button buttonbar__button--secondary-fill" title="Date">
                    <span class="cricon cricon--calendar-grid" aria-hidden="true"></span>
                    Date
                </button>
                <button class="buttonbar__button buttonbar__button--secondary" title="Time">
                    <span class="cricon cricon--clock" aria-hidden="true"></span>
                    Time
                </button>
            </div>
            <div class="paginator">
                <button class="paginator__button" title="Previous month">
                    <span class="cricon cricon--chevron-left" aria-hidden="true"></span>
                </button>
                <div class="paginator__label paginator__label--xsmall">December 2017</div>
                <button class="paginator__button" title="Next month">
                    <span class="cricon cricon--chevron-right" aria-hidden="true"></span>
                </button>
            </div>

            <div class="calendar-month">
                <div class="calendar-month__header">
                    <div class="calendar-month__header-row">
                        <div class="calendar-month__header-day">mon</div>
                        <div class="calendar-month__header-day">tue</div>
                        <div class="calendar-month__header-day">wed</div>
                        <div class="calendar-month__header-day">thu</div>
                        <div class="calendar-month__header-day">fri</div>
                        <div class="calendar-month__header-day">sat</div>
                        <div class="calendar-month__header-day">sun</div>
                    </div>
                </div>
                <div class="calendar-month__body">
                    <div class="calendar-month__week">
                        <div tabindex="0" aria-role="button" class="calendar-month__day calendar-month__day--muted">27</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day calendar-month__day--muted">28</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day calendar-month__day--muted">29</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day calendar-month__day--muted">30</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day calendar-month__day--muted">31</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">1</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">2</div>
                    </div>
                    <div class="calendar-month__week">
                        <div tabindex="0" aria-role="button" class="calendar-month__day">3</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">4</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">5</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">6</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">7</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">8</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">9</div>
                    </div>
                    <div class="calendar-month__week">
                        <div tabindex="0" aria-role="button" class="calendar-month__day">10</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">11</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">12</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">13</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">14</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">15</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">16</div>
                    </div>
                    <div class="calendar-month__week">
                        <div tabindex="0" aria-role="button" class="calendar-month__day">17</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">18</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">19</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">20</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">21</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">22</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">23</div>
                    </div>
                    <div class="calendar-month__week">
                        <div tabindex="0" aria-role="button" class="calendar-month__day">24</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">25</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">26</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">27</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">28</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">29</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">30</div>
                    </div>
                    <div class="calendar-month__week">
                        <div tabindex="0" aria-role="button" class="calendar-month__day calendar-month__day--muted">1</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day calendar-month__day--muted">2</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day calendar-month__day--muted">3</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day calendar-month__day--muted">4</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day calendar-month__day--muted">5</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day calendar-month__day--muted">6</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day calendar-month__day--muted">7</div>
                    </div>
                </div>
            </div>
            <div class="buttonbar buttonbar--center">
                <button class="buttonbar__button buttonbar__button--compact">
                    Today
                </button>
            </div>
            <p class="datetimepicker__preview">
                Jun 15 2018 14:33
            </p>
            <button class="button button--primary button--block">
                Use
            </button>
        </div>
    </div>


Example: {type: isolated} Dropdown - looks exactly the same as modal on small displays
    <script>
        function showDateTimePickerDropwdown () {
            document.getElementById('id_datetimepicker_dropdown').style.display = 'block';
        }
        function hideDateTimePickerDropdown () {
            document.getElementById('id_datetimepicker_dropdown').style.display = 'none';
        }
    </script>

    <label class="label">Select a date:</label>
    <div class="max-width max-width--xs">
        <div class="buttonbar buttonbar--nomargin">
            <button class="buttonbar__button buttonbar__button--input-outlined buttonbar__button--grow-2 buttonbar__button--width-xsmall"
                    onClick="showDateTimePickerDropwdown()">
                <span class="cricon cricon--calendar" aria-hidden="true"></span>
                Dec 24, 2017 12:35 PM
            </button>
            <button type="button" class="buttonbar__button buttonbar__button--secondary-fill buttonbar__button--no-grow">
                Now
            </button>
        </div>
    </div>
    <div id="id_datetimepicker_dropdown" class="datetimepicker datetimepicker--dropdown" style="display: none;">
        <div class="datetimepicker__body datetimepicker__body--dropdown">
            <div class="datetimepicker__close">
                <button type="button" aria-title="Close" onClick="hideDateTimePickerDropdown()">
                    <span class="cricon cricon--close" aria-hidden="true"></span>
                </button>
            </div>

            <div class="datetimepicker__title">
                Select a publishing time
            </div>

            <div class="buttonbar buttonbar--stretch buttonbar--tinymargin">
                <button class="buttonbar__button buttonbar__button--secondary-fill" title="Date">
                    <span class="cricon cricon--calendar-grid" aria-hidden="true"></span>
                    Date
                </button>
                <button class="buttonbar__button buttonbar__button--secondary" title="Time">
                    <span class="cricon cricon--clock" aria-hidden="true"></span>
                    Time
                </button>
            </div>
            <div class="paginator">
                <button class="paginator__button" title="Previous month">
                    <span class="cricon cricon--chevron-left" aria-hidden="true"></span>
                </button>
                <div class="paginator__label paginator__label--xsmall">December 2017</div>
                <button class="paginator__button" title="Next month">
                    <span class="cricon cricon--chevron-right" aria-hidden="true"></span>
                </button>
            </div>

            <div class="calendar-month">
                <div class="calendar-month__header">
                    <div class="calendar-month__header-row">
                        <div class="calendar-month__header-day">mon</div>
                        <div class="calendar-month__header-day">tue</div>
                        <div class="calendar-month__header-day">wed</div>
                        <div class="calendar-month__header-day">thu</div>
                        <div class="calendar-month__header-day">fri</div>
                        <div class="calendar-month__header-day">sat</div>
                        <div class="calendar-month__header-day">sun</div>
                    </div>
                </div>
                <div class="calendar-month__body">
                    <div class="calendar-month__week">
                        <div tabindex="0" aria-role="button" class="calendar-month__day calendar-month__day--muted">27</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day calendar-month__day--muted">28</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day calendar-month__day--muted">29</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day calendar-month__day--muted">30</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day calendar-month__day--muted">31</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">1</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">2</div>
                    </div>
                    <div class="calendar-month__week">
                        <div tabindex="0" aria-role="button" class="calendar-month__day">3</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">4</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">5</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">6</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">7</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">8</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">9</div>
                    </div>
                    <div class="calendar-month__week">
                        <div tabindex="0" aria-role="button" class="calendar-month__day">10</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">11</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">12</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">13</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">14</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">15</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">16</div>
                    </div>
                    <div class="calendar-month__week">
                        <div tabindex="0" aria-role="button" class="calendar-month__day">17</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">18</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">19</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">20</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">21</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">22</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">23</div>
                    </div>
                    <div class="calendar-month__week">
                        <div tabindex="0" aria-role="button" class="calendar-month__day">24</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">25</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">26</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">27</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">28</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">29</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day">30</div>
                    </div>
                    <div class="calendar-month__week">
                        <div tabindex="0" aria-role="button" class="calendar-month__day calendar-month__day--muted">1</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day calendar-month__day--muted">2</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day calendar-month__day--muted">3</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day calendar-month__day--muted">4</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day calendar-month__day--muted">5</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day calendar-month__day--muted">6</div>
                        <div tabindex="0" aria-role="button" class="calendar-month__day calendar-month__day--muted">7</div>
                    </div>
                </div>
            </div>
            <div class="buttonbar buttonbar--center">
                <button class="buttonbar__button buttonbar__button--compact">
                    Today
                </button>
            </div>
            <p class="datetimepicker__preview">
                Jun 15 2018 14:33
            </p>
            <button class="button button--primary button--block">
                Use
            </button>
        </div>
    </div>

    <p>
        We need some content below the dropdown to allow it do grow downwards.
        This is usually not a problem if shown in the middle
        of a page etc.
    </p>
    <p>
        Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
    </p>
    <p>
        Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Donec sed odio dui. Nulla vitae elit libero, a pharetra augue.
    </p>
    <p>
        Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Donec sed odio dui. Nulla vitae elit libero, a pharetra augue.
    </p>
    <p>
        Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Donec sed odio dui. Nulla vitae elit libero, a pharetra augue.
    </p>

Styleguide components.datetimepicker
*/
.datetimepicker--modal, .datetimepicker--dropdown {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch; }

.datetimepicker--modal {
  z-index: 40; }
  @media (min-width: 720px) {
    .datetimepicker--modal {
      padding: 12px; } }

.datetimepicker--dropdown {
  z-index: 30; }
  @media (min-width: 720px) {
    .datetimepicker--dropdown {
      position: relative;
      overflow: visible; } }

.datetimepicker__body {
  width: 100%; }
  .datetimepicker__body--outlined {
    padding: 6px;
    background-color: #fff;
    border: 2px solid #cbcbca;
    border-radius: 5px; }
  .datetimepicker__body--modal, .datetimepicker__body--dropdown {
    background-color: #fff;
    position: relative;
    overflow: hidden;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    padding: 12px; }
  .datetimepicker__body--modal {
    z-index: 40; }
    @media (min-width: 720px) {
      .datetimepicker__body--modal {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 24px;
        width: 440px;
        max-width: 100%;
        height: auto;
        left: auto;
        right: auto;
        bottom: auto;
        box-shadow: 0 2px 6px rgba(30, 30, 30, 0.3); } }
  .datetimepicker__body--dropdown {
    z-index: 30; }
    @media (min-width: 720px) {
      .datetimepicker__body--dropdown {
        overflow: visible;
        position: absolute;
        bottom: auto;
        height: auto;
        width: 100%;
        max-width: 440px;
        margin-bottom: 24px;
        border-radius: 5px;
        box-shadow: 0 2px 6px rgba(30, 30, 30, 0.3); } }

.datetimepicker__title {
  margin-bottom: 24px;
  font-family: "Maison Neue", Helvetica, sans-serif;
  font-weight: bold;
  font-size: 22px;
  line-height: 28px; }
  @media screen and (min-width: 720px) {
    .datetimepicker__title {
      font-size: 24px;
      line-height: 35px; } }

.datetimepicker__close {
  position: absolute;
  top: 12px;
  right: 12px; }

.datetimepicker__preview {
  margin-top: 24px;
  margin-bottom: 12px;
  color: #686969;
  text-align: center;
  font-family: "Maison Neue", Helvetica, sans-serif;
  font-weight: bold; }
  .datetimepicker__preview:last-child {
    margin-bottom: 0; }

.datetimepicker--sane-max-width {
  max-width: 440px; }

/** Time display

Example: {type: isolated}

    <span class="timedisplay">
        <span class="timedisplay__number">
            12
        </span>
        <span class="timedisplay__separator">:</span>
        <span class="timedisplay__number">
            30
        </span>
        <span class="timedisplay__separator">:</span>
        <span class="timedisplay__number">
            56
        </span>
    </span>

Example: {type: isolated} Can be centered

    <p class="text-center">
        <span class="timedisplay">
            <span class="timedisplay__number">
                12
            </span>
            <span class="timedisplay__separator">:</span>
            <span class="timedisplay__number">
                30
            </span>
            <span class="timedisplay__separator">:</span>
            <span class="timedisplay__number">
                56
            </span>
        </span>
    </p>

Example: {type: isolated} --medium

    <span class="timedisplay timedisplay--medium">
        <span class="timedisplay__number">
            12
        </span>
        <span class="timedisplay__separator">:</span>
        <span class="timedisplay__number">
            30
        </span>
        <span class="timedisplay__separator">:</span>
        <span class="timedisplay__number">
            56
        </span>
    </span>

Example: {type: isolated} --large

    <span class="timedisplay timedisplay--large">
        <span class="timedisplay__number">
            12
        </span>
        <span class="timedisplay__separator">:</span>
        <span class="timedisplay__number">
            30
        </span>
        <span class="timedisplay__separator">:</span>
        <span class="timedisplay__number">
            56
        </span>
    </span>


Example: {type: isolated} --xlarge

    <span class="timedisplay timedisplay--xlarge">
        <span class="timedisplay__number">
            12
        </span>
        <span class="timedisplay__separator">:</span>
        <span class="timedisplay__number">
            30
        </span>
        <span class="timedisplay__separator">:</span>
        <span class="timedisplay__number">
            56
        </span>
    </span>

Example: {type: isolated} As part of a time picker

    <div style="width: 400px; max-width: 100%;">
        <div class="paragraph text-center">
            <span class="timedisplay timedisplay--xlarge">
                <span class="timedisplay__number">
                    12
                </span>
                <span class="timedisplay__separator">:</span>
                <span class="timedisplay__number">
                    30
                </span>
                <span class="timedisplay__separator">:</span>
                <span class="timedisplay__number">
                    56
                </span>
            </span>
        </div>
        <label class="label">
            Hours:
            <input class="range-input" type="range" min="0" max="23" value="12">
        </label>
        <label class="label">
            Minutes:
            <input class="range-input" type="range" min="0" max="59" value="30">
        </label>
        <label class="label">
            Seconds:
            <input class="range-input" type="range" min="0" max="59" value="56">
        </label>
    </div>

Styleguide components.timepicker
*/
.timedisplay {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  font-size: 16px;
  line-height: 21px;
  cursor: default; }
  @media screen and (min-width: 440px) {
    .timedisplay {
      font-size: 19px;
      line-height: 28px; } }
  .timedisplay__number, .timedisplay__separator {
    display: block; }
  .timedisplay__separator {
    color: #40AAB8;
    padding: 0 6px; }
  .timedisplay__number {
    background-color: #40AAB8;
    color: #fff;
    text-align: center;
    width: 40px;
    padding: 6px 0; }
  .timedisplay--medium {
    font-size: 22px;
    line-height: 28px; }
    @media screen and (min-width: 720px) {
      .timedisplay--medium {
        font-size: 24px;
        line-height: 35px; } }
    .timedisplay--medium .timedisplay__number {
      width: 50px; }
  .timedisplay--large {
    font-size: 19px;
    line-height: 28px; }
    @media screen and (min-width: 440px) {
      .timedisplay--large {
        font-size: 23px;
        line-height: 28px; } }
    .timedisplay--large .timedisplay__number {
      width: 65px; }
  .timedisplay--xlarge {
    font-size: 19px;
    line-height: 28px; }
    @media screen and (min-width: 440px) {
      .timedisplay--xlarge {
        font-size: 23px;
        line-height: 28px; } }
    @media (min-width: 720px) {
      .timedisplay--xlarge {
        font-size: 21px;
        line-height: 28px; } }
  @media screen and (min-width: 720px) and (min-width: 440px) {
    .timedisplay--xlarge {
      font-size: 26px;
      line-height: 35px; } }
  @media screen and (min-width: 720px) and (min-width: 720px) {
    .timedisplay--xlarge {
      font-size: 27px;
      line-height: 35px; } }
    .timedisplay--xlarge .timedisplay__number {
      width: 65px; }
      @media (min-width: 720px) {
        .timedisplay--xlarge .timedisplay__number {
          width: 80px; } }

/* Responsive table

Example: {type: isolated}

    <div class="container container--wide">
        <div class="responsive-table">
            <div class="responsive-table__header-row" aria-hidden="true">
                <div class="responsive-table__cell responsive-table__cell--header responsive-table__cell--medium">
                    Name
                </div>
                <div class="responsive-table__cell responsive-table__cell--header responsive-table__cell--xsmall">
                    Age
                </div>
                <div class="responsive-table__cell responsive-table__cell--header responsive-table__cell--small">
                    Joined date
                </div>
                <div class="responsive-table__cell responsive-table__cell--header">
                    Email
                </div>
                <div class="responsive-table__cell responsive-table__cell--header">
                    Address
                </div>
                <div class="responsive-table__cell responsive-table__cell--header">
                    Actions
                </div>
            </div>
            <section class="responsive-table__row">
                <div class="responsive-table__cell">
                    <h3 class="responsive-table__value responsive-table__value--title-sm">
                        Peter Pan
                    </h3>
                </div>
                <div class="responsive-table__cell">
                    <div class="responsive-table__label">
                        Age
                    </div>
                    <div class="responsive-table__value">
                        14
                    </div>
                </div>
                <div class="responsive-table__cell">
                    <div class="responsive-table__label">
                        Joined date
                    </div>
                    <div class="responsive-table__value">
                        1. jan 1902
                    </div>
                </div>
                <div class="responsive-table__cell">
                    <div class="responsive-table__label">
                        Email
                    </div>
                    <div class="responsive-table__value responsive-table__value--break-words">
                        peter@example.com
                    </div>
                </div>
                <div class="responsive-table__cell">
                    <div class="responsive-table__label">
                        Address
                    </div>
                    <div class="responsive-table__value">
                        Neverland
                    </div>
                </div>
                <div class="responsive-table__cell">
                    <div class="responsive-table__value">
                        <a href="#" class="responsive-table__action">
                            <span class="responsive-table__action-icon cricon cricon--email" aria-hidden="true"></span>
                            <span class="responsive-table__action-label">Contact</span>
                        </a>
                        <a href="#" class="responsive-table__action">
                            <span class="responsive-table__action-icon cricon cricon--edit" aria-hidden="true"></span>
                            <span class="responsive-table__action-label">Edit</span>
                        </a>
                    </div>
                </div>
            </section>

            <section class="responsive-table__row">
                <div class="responsive-table__cell">
                    <h3 class="responsive-table__value responsive-table__value--title-sm">
                        Santa Claus
                    </h3>
                </div>
                <div class="responsive-table__cell">
                    <div class="responsive-table__label">
                        Age
                    </div>
                    <div class="responsive-table__value">
                        250
                    </div>
                </div>
                <div class="responsive-table__cell">
                    <div class="responsive-table__label">
                        Joined date
                    </div>
                    <div class="responsive-table__value">
                        1. jan 1739
                    </div>
                </div>
                <div class="responsive-table__cell">
                    <div class="responsive-table__label">
                        Email
                    </div>
                    <div class="responsive-table__value responsive-table__value--break-words">
                        santa.claus.is.exceptionally.cool@example.com
                    </div>
                </div>
                <div class="responsive-table__cell">
                    <div class="responsive-table__label">
                        Address
                    </div>
                    <div class="responsive-table__value">
                        Somewhere around the North Pole, 0000 North Pole
                    </div>
                </div>
                <div class="responsive-table__cell">
                    <div class="responsive-table__value">
                        <a href="#" class="responsive-table__action">
                            <span class="responsive-table__action-icon cricon cricon--email" aria-hidden="true"></span>
                            <span class="responsive-table__action-label">Contact</span>
                        </a>
                        <a href="#" class="responsive-table__action">
                            <span class="responsive-table__action-icon cricon cricon--edit" aria-hidden="true"></span>
                            <span class="responsive-table__action-label">Edit</span>
                        </a>
                    </div>
                </div>
            </section>

            <section class="responsive-table__row">
                <div class="responsive-table__cell">
                    <h3 class="responsive-table__value responsive-table__value--title-sm">
                        John Doe
                    </h3>
                </div>
                <div class="responsive-table__cell">
                    <div class="responsive-table__label">
                        Age
                    </div>
                    <div class="responsive-table__value">
                        ?
                    </div>
                </div>
                <div class="responsive-table__cell">
                    <div class="responsive-table__label">
                        Joined date
                    </div>
                    <div class="responsive-table__value">
                        ?
                    </div>
                </div>
                <div class="responsive-table__cell">
                    <div class="responsive-table__label">
                        Email
                    </div>
                    <div class="responsive-table__value responsive-table__value--break-words">
                        johndoe@example.com
                    </div>
                </div>
                <div class="responsive-table__cell">
                    <div class="responsive-table__label">
                        Address
                    </div>
                    <div class="responsive-table__value">
                        Unknown
                    </div>
                </div>
                <div class="responsive-table__cell">
                    <div class="responsive-table__value">
                        <a href="#" class="responsive-table__action">
                            <span class="responsive-table__action-icon cricon cricon--email" aria-hidden="true"></span>
                            <span class="responsive-table__action-label">Contact</span>
                        </a>
                        <a href="#" class="responsive-table__action">
                            <span class="responsive-table__action-icon cricon cricon--edit" aria-hidden="true"></span>
                            <span class="responsive-table__action-label">Edit</span>
                        </a>
                    </div>
                </div>
            </section>
        </div>
    </div>


Example: {type: isolated} --zebra

    <div class="container container--wide">
        <div class="responsive-table responsive-table--zebra">
            <div class="responsive-table__header-row" aria-hidden="true">
                <div class="responsive-table__cell responsive-table__cell--header responsive-table__cell--medium">
                    Name
                </div>
                <div class="responsive-table__cell responsive-table__cell--header responsive-table__cell--xsmall">
                    Age
                </div>
                <div class="responsive-table__cell responsive-table__cell--header responsive-table__cell--small">
                    Joined date
                </div>
                <div class="responsive-table__cell responsive-table__cell--header">
                    Email
                </div>
                <div class="responsive-table__cell responsive-table__cell--header">
                    Address
                </div>
                <div class="responsive-table__cell responsive-table__cell--header">
                    Actions
                </div>
            </div>
            <section class="responsive-table__row">
                <div class="responsive-table__cell">
                    <h3 class="responsive-table__value responsive-table__value--title-sm">
                        Peter Pan
                    </h3>
                </div>
                <div class="responsive-table__cell">
                    <div class="responsive-table__label">
                        Age
                    </div>
                    <div class="responsive-table__value">
                        14
                    </div>
                </div>
                <div class="responsive-table__cell">
                    <div class="responsive-table__label">
                        Joined date
                    </div>
                    <div class="responsive-table__value">
                        1. jan 1902
                    </div>
                </div>
                <div class="responsive-table__cell">
                    <div class="responsive-table__label">
                        Email
                    </div>
                    <div class="responsive-table__value responsive-table__value--break-words">
                        peter@example.com
                    </div>
                </div>
                <div class="responsive-table__cell">
                    <div class="responsive-table__label">
                        Address
                    </div>
                    <div class="responsive-table__value">
                        Neverland
                    </div>
                </div>
                <div class="responsive-table__cell">
                    <div class="responsive-table__value">
                        <a href="#" class="responsive-table__action">
                            <span class="responsive-table__action-icon cricon cricon--email" aria-hidden="true"></span>
                            <span class="responsive-table__action-label">Contact</span>
                        </a>
                        <a href="#" class="responsive-table__action">
                            <span class="responsive-table__action-icon cricon cricon--edit" aria-hidden="true"></span>
                            <span class="responsive-table__action-label">Edit</span>
                        </a>
                    </div>
                </div>
            </section>

            <section class="responsive-table__row">
                <div class="responsive-table__cell">
                    <h3 class="responsive-table__value responsive-table__value--title-sm">
                        Santa Claus
                    </h3>
                </div>
                <div class="responsive-table__cell">
                    <div class="responsive-table__label">
                        Age
                    </div>
                    <div class="responsive-table__value">
                        250
                    </div>
                </div>
                <div class="responsive-table__cell">
                    <div class="responsive-table__label">
                        Joined date
                    </div>
                    <div class="responsive-table__value">
                        1. jan 1739
                    </div>
                </div>
                <div class="responsive-table__cell">
                    <div class="responsive-table__label">
                        Email
                    </div>
                    <div class="responsive-table__value responsive-table__value--break-words">
                        santa.claus.is.exceptionally.cool@example.com
                    </div>
                </div>
                <div class="responsive-table__cell">
                    <div class="responsive-table__label">
                        Address
                    </div>
                    <div class="responsive-table__value">
                        Somewhere around the North Pole, 0000 North Pole
                    </div>
                </div>
                <div class="responsive-table__cell">
                    <div class="responsive-table__value">
                        <a href="#" class="responsive-table__action">
                            <span class="responsive-table__action-icon cricon cricon--email" aria-hidden="true"></span>
                            <span class="responsive-table__action-label">Contact</span>
                        </a>
                        <a href="#" class="responsive-table__action">
                            <span class="responsive-table__action-icon cricon cricon--edit" aria-hidden="true"></span>
                            <span class="responsive-table__action-label">Edit</span>
                        </a>
                    </div>
                </div>
            </section>

            <section class="responsive-table__row">
                <div class="responsive-table__cell">
                    <h3 class="responsive-table__value responsive-table__value--title-sm">
                        John Doe
                    </h3>
                </div>
                <div class="responsive-table__cell">
                    <div class="responsive-table__label">
                        Age
                    </div>
                    <div class="responsive-table__value">
                        ?
                    </div>
                </div>
                <div class="responsive-table__cell">
                    <div class="responsive-table__label">
                        Joined date
                    </div>
                    <div class="responsive-table__value">
                        ?
                    </div>
                </div>
                <div class="responsive-table__cell">
                    <div class="responsive-table__label">
                        Email
                    </div>
                    <div class="responsive-table__value responsive-table__value--break-words">
                        johndoe@example.com
                    </div>
                </div>
                <div class="responsive-table__cell">
                    <div class="responsive-table__label">
                        Address
                    </div>
                    <div class="responsive-table__value">
                        Unknown
                    </div>
                </div>
                <div class="responsive-table__cell">
                    <div class="responsive-table__value">
                        <a href="#" class="responsive-table__action">
                            <span class="responsive-table__action-icon cricon cricon--email" aria-hidden="true"></span>
                            <span class="responsive-table__action-label">Contact</span>
                        </a>
                        <a href="#" class="responsive-table__action">
                            <span class="responsive-table__action-icon cricon cricon--edit" aria-hidden="true"></span>
                            <span class="responsive-table__action-label">Edit</span>
                        </a>
                    </div>
                </div>
            </section>
        </div>
    </div>


Example: {type: isolated} --border

    <div class="container container--wide">
        <div class="responsive-table responsive-table--border">
            <div class="responsive-table__header-row" aria-hidden="true">
                <div class="responsive-table__cell responsive-table__cell--header responsive-table__cell--medium">
                    Name
                </div>
                <div class="responsive-table__cell responsive-table__cell--header responsive-table__cell--xsmall">
                    Age
                </div>
                <div class="responsive-table__cell responsive-table__cell--header responsive-table__cell--small">
                    Joined date
                </div>
                <div class="responsive-table__cell responsive-table__cell--header">
                    Email
                </div>
                <div class="responsive-table__cell responsive-table__cell--header">
                    Address
                </div>
                <div class="responsive-table__cell responsive-table__cell--header">
                    Actions
                </div>
            </div>
            <section class="responsive-table__row">
                <div class="responsive-table__cell">
                    <h3 class="responsive-table__value responsive-table__value--title-sm">
                        Peter Pan
                    </h3>
                </div>
                <div class="responsive-table__cell">
                    <div class="responsive-table__label">
                        Age
                    </div>
                    <div class="responsive-table__value">
                        14
                    </div>
                </div>
                <div class="responsive-table__cell">
                    <div class="responsive-table__label">
                        Joined date
                    </div>
                    <div class="responsive-table__value">
                        1. jan 1902
                    </div>
                </div>
                <div class="responsive-table__cell">
                    <div class="responsive-table__label">
                        Email
                    </div>
                    <div class="responsive-table__value responsive-table__value--break-words">
                        peter@example.com
                    </div>
                </div>
                <div class="responsive-table__cell">
                    <div class="responsive-table__label">
                        Address
                    </div>
                    <div class="responsive-table__value">
                        Neverland
                    </div>
                </div>
                <div class="responsive-table__cell">
                    <div class="responsive-table__value">
                        <a href="#" class="responsive-table__action">
                            <span class="responsive-table__action-icon cricon cricon--email" aria-hidden="true"></span>
                            <span class="responsive-table__action-label">Contact</span>
                        </a>
                        <a href="#" class="responsive-table__action">
                            <span class="responsive-table__action-icon cricon cricon--edit" aria-hidden="true"></span>
                            <span class="responsive-table__action-label">Edit</span>
                        </a>
                    </div>
                </div>
            </section>

            <section class="responsive-table__row">
                <div class="responsive-table__cell">
                    <h3 class="responsive-table__value responsive-table__value--title-sm">
                        Santa Claus
                    </h3>
                </div>
                <div class="responsive-table__cell">
                    <div class="responsive-table__label">
                        Age
                    </div>
                    <div class="responsive-table__value">
                        250
                    </div>
                </div>
                <div class="responsive-table__cell">
                    <div class="responsive-table__label">
                        Joined date
                    </div>
                    <div class="responsive-table__value">
                        1. jan 1739
                    </div>
                </div>
                <div class="responsive-table__cell">
                    <div class="responsive-table__label">
                        Email
                    </div>
                    <div class="responsive-table__value responsive-table__value--break-words">
                        santa.claus.is.exceptionally.cool@example.com
                    </div>
                </div>
                <div class="responsive-table__cell">
                    <div class="responsive-table__label">
                        Address
                    </div>
                    <div class="responsive-table__value">
                        Somewhere around the North Pole, 0000 North Pole
                    </div>
                </div>
                <div class="responsive-table__cell">
                    <div class="responsive-table__value">
                        <a href="#" class="responsive-table__action">
                            <span class="responsive-table__action-icon cricon cricon--email" aria-hidden="true"></span>
                            <span class="responsive-table__action-label">Contact</span>
                        </a>
                        <a href="#" class="responsive-table__action">
                            <span class="responsive-table__action-icon cricon cricon--edit" aria-hidden="true"></span>
                            <span class="responsive-table__action-label">Edit</span>
                        </a>
                    </div>
                </div>
            </section>

            <section class="responsive-table__row">
                <div class="responsive-table__cell">
                    <h3 class="responsive-table__value responsive-table__value--title-sm">
                        John Doe
                    </h3>
                </div>
                <div class="responsive-table__cell">
                    <div class="responsive-table__label">
                        Age
                    </div>
                    <div class="responsive-table__value">
                        ?
                    </div>
                </div>
                <div class="responsive-table__cell">
                    <div class="responsive-table__label">
                        Joined date
                    </div>
                    <div class="responsive-table__value">
                        ?
                    </div>
                </div>
                <div class="responsive-table__cell">
                    <div class="responsive-table__label">
                        Email
                    </div>
                    <div class="responsive-table__value responsive-table__value--break-words">
                        johndoe@example.com
                    </div>
                </div>
                <div class="responsive-table__cell">
                    <div class="responsive-table__label">
                        Address
                    </div>
                    <div class="responsive-table__value">
                        Unknown
                    </div>
                </div>
                <div class="responsive-table__cell">
                    <div class="responsive-table__value">
                        <a href="#" class="responsive-table__action">
                            <span class="responsive-table__action-icon cricon cricon--email" aria-hidden="true"></span>
                            <span class="responsive-table__action-label">Contact</span>
                        </a>
                        <a href="#" class="responsive-table__action">
                            <span class="responsive-table__action-icon cricon cricon--edit" aria-hidden="true"></span>
                            <span class="responsive-table__action-label">Edit</span>
                        </a>
                    </div>
                </div>
            </section>
        </div>
    </div>


Example: {type: isolated} --border-sm --zebra (can use one or both at the same time, or use --border instead of --border-sm)

    <div class="container container--wide">
        <div class="responsive-table responsive-table--border-sm responsive-table--zebra">
            <div class="responsive-table__header-row" aria-hidden="true">
                <div class="responsive-table__cell responsive-table__cell--header responsive-table__cell--medium">
                    Name
                </div>
                <div class="responsive-table__cell responsive-table__cell--header responsive-table__cell--xsmall">
                    Age
                </div>
                <div class="responsive-table__cell responsive-table__cell--header responsive-table__cell--small">
                    Joined date
                </div>
                <div class="responsive-table__cell responsive-table__cell--header">
                    Email
                </div>
                <div class="responsive-table__cell responsive-table__cell--header">
                    Address
                </div>
                <div class="responsive-table__cell responsive-table__cell--header">
                    Actions
                </div>
            </div>
            <section class="responsive-table__row">
                <div class="responsive-table__cell">
                    <h3 class="responsive-table__value responsive-table__value--title-sm">
                        Peter Pan
                    </h3>
                </div>
                <div class="responsive-table__cell">
                    <div class="responsive-table__label">
                        Age
                    </div>
                    <div class="responsive-table__value">
                        14
                    </div>
                </div>
                <div class="responsive-table__cell">
                    <div class="responsive-table__label">
                        Joined date
                    </div>
                    <div class="responsive-table__value">
                        1. jan 1902
                    </div>
                </div>
                <div class="responsive-table__cell">
                    <div class="responsive-table__label">
                        Email
                    </div>
                    <div class="responsive-table__value responsive-table__value--break-words">
                        peter@example.com
                    </div>
                </div>
                <div class="responsive-table__cell">
                    <div class="responsive-table__label">
                        Address
                    </div>
                    <div class="responsive-table__value">
                        Neverland
                    </div>
                </div>
                <div class="responsive-table__cell">
                    <div class="responsive-table__value">
                        <a href="#" class="responsive-table__action">
                            <span class="responsive-table__action-icon cricon cricon--email" aria-hidden="true"></span>
                            <span class="responsive-table__action-label">Contact</span>
                        </a>
                        <a href="#" class="responsive-table__action">
                            <span class="responsive-table__action-icon cricon cricon--edit" aria-hidden="true"></span>
                            <span class="responsive-table__action-label">Edit</span>
                        </a>
                    </div>
                </div>
            </section>

            <section class="responsive-table__row">
                <div class="responsive-table__cell">
                    <h3 class="responsive-table__value responsive-table__value--title-sm">
                        Santa Claus
                    </h3>
                </div>
                <div class="responsive-table__cell">
                    <div class="responsive-table__label">
                        Age
                    </div>
                    <div class="responsive-table__value">
                        250
                    </div>
                </div>
                <div class="responsive-table__cell">
                    <div class="responsive-table__label">
                        Joined date
                    </div>
                    <div class="responsive-table__value">
                        1. jan 1739
                    </div>
                </div>
                <div class="responsive-table__cell">
                    <div class="responsive-table__label">
                        Email
                    </div>
                    <div class="responsive-table__value responsive-table__value--break-words">
                        santa.claus.is.exceptionally.cool@example.com
                    </div>
                </div>
                <div class="responsive-table__cell">
                    <div class="responsive-table__label">
                        Address
                    </div>
                    <div class="responsive-table__value">
                        Somewhere around the North Pole, 0000 North Pole
                    </div>
                </div>
                <div class="responsive-table__cell">
                    <div class="responsive-table__value">
                        <a href="#" class="responsive-table__action">
                            <span class="responsive-table__action-icon cricon cricon--email" aria-hidden="true"></span>
                            <span class="responsive-table__action-label">Contact</span>
                        </a>
                        <a href="#" class="responsive-table__action">
                            <span class="responsive-table__action-icon cricon cricon--edit" aria-hidden="true"></span>
                            <span class="responsive-table__action-label">Edit</span>
                        </a>
                    </div>
                </div>
            </section>

            <section class="responsive-table__row">
                <div class="responsive-table__cell">
                    <h3 class="responsive-table__value responsive-table__value--title-sm">
                        John Doe
                    </h3>
                </div>
                <div class="responsive-table__cell">
                    <div class="responsive-table__label">
                        Age
                    </div>
                    <div class="responsive-table__value">
                        ?
                    </div>
                </div>
                <div class="responsive-table__cell">
                    <div class="responsive-table__label">
                        Joined date
                    </div>
                    <div class="responsive-table__value">
                        ?
                    </div>
                </div>
                <div class="responsive-table__cell">
                    <div class="responsive-table__label">
                        Email
                    </div>
                    <div class="responsive-table__value responsive-table__value--break-words">
                        johndoe@example.com
                    </div>
                </div>
                <div class="responsive-table__cell">
                    <div class="responsive-table__label">
                        Address
                    </div>
                    <div class="responsive-table__value">
                        Unknown
                    </div>
                </div>
                <div class="responsive-table__cell">
                    <div class="responsive-table__value">
                        <a href="#" class="responsive-table__action">
                            <span class="responsive-table__action-icon cricon cricon--email" aria-hidden="true"></span>
                            <span class="responsive-table__action-label">Contact</span>
                        </a>
                        <a href="#" class="responsive-table__action">
                            <span class="responsive-table__action-icon cricon cricon--edit" aria-hidden="true"></span>
                            <span class="responsive-table__action-label">Edit</span>
                        </a>
                    </div>
                </div>
            </section>
        </div>
    </div>


Styleguide components.responsive-table
*/
.responsive-table {
  display: block;
  min-width: 100%;
  margin-bottom: 21px; }
  @media (min-width: 960px) {
    .responsive-table {
      display: table; } }
  .responsive-table__header-row {
    display: none;
    background-color: #002B49;
    color: #fff;
    font-size: 15px;
    line-height: 21px;
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    text-transform: uppercase; }
    @media screen and (min-width: 720px) {
      .responsive-table__header-row {
        font-size: 16px;
        line-height: 21px; } }
    @media (min-width: 960px) {
      .responsive-table__header-row {
        display: table-row; } }
  .responsive-table__row {
    display: block;
    padding: 12px 0; }
    @media (min-width: 960px) {
      .responsive-table__row {
        display: table-row;
        padding: 0;
        margin-bottom: 0; } }
  .responsive-table__cell {
    display: block;
    margin-bottom: 12px;
    text-align: left; }
    .responsive-table__cell:last-child {
      margin-bottom: 0; }
    @media (min-width: 960px) {
      .responsive-table__cell {
        display: table-cell;
        padding: 12px;
        margin-bottom: 0; } }
    @media (min-width: 960px) {
      .responsive-table__cell--text-right {
        text-align: right; } }
    .responsive-table__cell--header {
      font-weight: bold;
      padding: 12px; }
    .responsive-table__cell--xsmall {
      min-width: 80px; }
    .responsive-table__cell--small {
      min-width: 100px; }
    .responsive-table__cell--medium {
      min-width: 160px; }
  .responsive-table__label {
    font-size: 12px;
    line-height: 21px;
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    text-transform: uppercase; }
    @media screen and (min-width: 720px) {
      .responsive-table__label {
        font-size: 13px;
        line-height: 21px; } }
    .responsive-table__label:after {
      content: ":"; }
    @media (min-width: 960px) {
      .responsive-table__label {
        display: none; } }
  .responsive-table__value {
    font-size: 15px;
    line-height: 21px; }
    @media screen and (min-width: 720px) {
      .responsive-table__value {
        font-size: 16px;
        line-height: 21px; } }
    .responsive-table__value--break-words {
      word-break: break-all; }
    .responsive-table__value--title-sm {
      font-size: 22px;
      line-height: 28px;
      font-family: "Maison Neue", Helvetica, sans-serif;
      font-weight: bold; }
      @media screen and (min-width: 720px) {
        .responsive-table__value--title-sm {
          font-size: 24px;
          line-height: 35px; } }
      @media (min-width: 960px) {
        .responsive-table__value--title-sm {
          font-size: 15px;
          line-height: 21px;
          font-family: "Maison Neue", Helvetica, sans-serif;
          font-weight: normal; } }
  @media screen and (min-width: 960px) and (min-width: 720px) {
    .responsive-table__value--title-sm {
      font-size: 16px;
      line-height: 21px; } }
  .responsive-table__action {
    border: none;
    text-decoration: none;
    display: inline-block;
    margin-bottom: 6px;
    color: #2f2c2f;
    font-size: 16px;
    line-height: 21px;
    margin-right: 12px; }
    @media screen and (min-width: 440px) {
      .responsive-table__action {
        font-size: 19px;
        line-height: 28px; } }
    @media (min-width: 960px) {
      .responsive-table__action {
        font-size: 22px;
        line-height: 28px;
        margin-right: 6px; } }
  @media screen and (min-width: 960px) and (min-width: 720px) {
    .responsive-table__action {
      font-size: 24px;
      line-height: 35px; } }
    .responsive-table__action:hover {
      border: none;
      text-decoration: none;
      color: #ce111d; }
  .responsive-table__action-icon {
    display: inline-block; }
  .responsive-table__action-label {
    display: inline-block; }
    @media (min-width: 960px) {
      .responsive-table__action-label {
        display: none; } }
  .responsive-table--zebra .responsive-table__row {
    padding: 12px; }
    @media (min-width: 960px) {
      .responsive-table--zebra .responsive-table__row {
        padding: 0; } }
    .responsive-table--zebra .responsive-table__row:nth-child(even) {
      background-color: #fff; }
    .responsive-table--zebra .responsive-table__row:nth-child(odd) {
      background-color: #f5f5f5; }
  .responsive-table--border-sm .responsive-table__row {
    border-bottom: 3px solid #eeeeef; }
    .responsive-table--border-sm .responsive-table__row:last-child {
      border-bottom: none; }
    @media (min-width: 960px) {
      .responsive-table--border-sm .responsive-table__row {
        border-bottom: none; } }
  .responsive-table--border .responsive-table__row {
    border-bottom: 3px solid #eeeeef; }
    .responsive-table--border .responsive-table__row:last-child {
      border-bottom: none; }
    @media (min-width: 960px) {
      .responsive-table--border .responsive-table__row {
        border-bottom: none; } }
    @media (min-width: 960px) {
      .responsive-table--border .responsive-table__row .responsive-table__cell {
        border-bottom: 2px solid #eeeeef; } }

/** Text

Example: Colors normal focus

    <span class="text text--warning">A warning text</span><br>
    <span class="text text--success">A success text</span><br>
    <span class="text text--primary">A primary text</span><br>
    <span class="text text--secondary">A secondary text</span><br>

Example: Colors strong focus

    <strong class="text text--strong-warning">A strong warning text</strong><br>
    <strong class="text text--strong-success">A strong success text</strong><br>

Example: You can also use the normal focus colors with strong and em tags

    <strong class="text text--warning">A warning text in a strong tag</strong><br>
    <em class="text text--warning">A warning text in a em tag</em><br>

    <strong class="text text--success">A success text in a strong tag</strong><br>
    <em class="text text--success">A success text in a em tag</em><br>

Example: Colorized mixed with other text

    <p>
        Your account is <span class="text text--warning">almost empty</span>,
        but you have <strong class="text text--strong-success">a very good credit rating</strong>.
        This means that you are personally not in a good place, but the Bank is
        <strong class="text text--success">very happy</strong>.
    </p>

Example: Font sizes

    <p class="text-size text-size--xxsmall">A xxsmall text.</p>
    <p class="text-size text-size--xsmall">A xsmall text.</p>
    <p class="text-size text-size--small">A small text.</p>
    <p>Normal paragraph without any font-size adjustments. Will normally match text--small.</p>
    <p class="text-size text-size--medium">A medium text.</p>
    <p class="text-size text-size--large">A large text.</p>
    <p class="text-size text-size--xlarge">A xlarge text.</p>
    <p class="text-size text-size--xxlarge">A xxlarge text.</p>
    <p class="text-size text-size--xxxlarge">A xxxlarge text.</p>

Styleguide components.text
*/
.text {
  display: inline-block; }
  .text--warning {
    color: #b30e1a; }
    .text--warning a {
      color: #b30e1a;
      border-color: #b30e1a;
      text-decoration: underline; }
      .text--warning a:hover {
        color: #b30e1a;
        border-color: #b30e1a; }
  .text--strong-warning {
    background-color: #E01220;
    color: #fff;
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    padding: 1px 6px;
    margin-bottom: 3px;
    border-radius: 5px; }
    .text--strong-warning a {
      color: #b30e1a;
      border-color: #b30e1a; }
      .text--strong-warning a:hover {
        color: #b30e1a;
        border-color: #b30e1a; }
  .text--success {
    color: #006618; }
    .text--success a {
      color: #006618;
      border-color: #006618;
      text-decoration: underline; }
      .text--success a:hover {
        color: #006618;
        border-color: #006618; }
  .text--strong-success {
    background-color: #007f1e;
    color: #fff;
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    padding: 1px 6px;
    margin-bottom: 3px;
    border-radius: 5px; }
    .text--strong-success a {
      color: #006618;
      border-color: #006618; }
      .text--strong-success a:hover {
        color: #006618;
        border-color: #006618; }
  .text--primary {
    color: #ce111d; }
    .text--primary a {
      color: #ce111d;
      border-color: #ce111d;
      text-decoration: underline; }
      .text--primary a:hover {
        color: #ce111d;
        border-color: #ce111d; }
  .text--strong-primary {
    background-color: #E01220;
    color: #fff;
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    padding: 1px 6px;
    margin-bottom: 3px;
    border-radius: 5px; }
    .text--strong-primary a {
      color: #ce111d;
      border-color: #ce111d; }
      .text--strong-primary a:hover {
        color: #ce111d;
        border-color: #ce111d; }
  .text--secondary {
    color: #002B49; }
    .text--secondary a {
      color: #002B49;
      border-color: #002B49;
      text-decoration: underline; }
      .text--secondary a:hover {
        color: #002B49;
        border-color: #002B49; }
  .text--strong-secondary {
    background-color: #40AAB8;
    color: #fff;
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    padding: 1px 6px;
    margin-bottom: 3px;
    border-radius: 5px; }
    .text--strong-secondary a {
      color: #002B49;
      border-color: #002B49; }
      .text--strong-secondary a:hover {
        color: #002B49;
        border-color: #002B49; }

.text-size--xxsmall {
  font-size: 12px;
  line-height: 21px; }
  @media screen and (min-width: 720px) {
    .text-size--xxsmall {
      font-size: 13px;
      line-height: 21px; } }

.text-size--xsmall {
  font-size: 15px;
  line-height: 21px; }
  @media screen and (min-width: 720px) {
    .text-size--xsmall {
      font-size: 16px;
      line-height: 21px; } }

.text-size--small {
  font-size: 16px;
  line-height: 21px; }
  @media screen and (min-width: 440px) {
    .text-size--small {
      font-size: 19px;
      line-height: 28px; } }

.text-size--medium {
  font-size: 22px;
  line-height: 28px; }
  @media screen and (min-width: 720px) {
    .text-size--medium {
      font-size: 24px;
      line-height: 35px; } }

.text-size--large {
  font-size: 19px;
  line-height: 28px; }
  @media screen and (min-width: 440px) {
    .text-size--large {
      font-size: 23px;
      line-height: 28px; } }

.text-size--xlarge {
  font-size: 21px;
  line-height: 28px; }
  @media screen and (min-width: 440px) {
    .text-size--xlarge {
      font-size: 26px;
      line-height: 35px; } }
  @media screen and (min-width: 720px) {
    .text-size--xlarge {
      font-size: 27px;
      line-height: 35px; } }

.text-size--xxlarge {
  font-size: 28px;
  line-height: 35px; }
  @media screen and (min-width: 440px) {
    .text-size--xxlarge {
      font-size: 36px;
      line-height: 49px; } }
  @media screen and (min-width: 720px) {
    .text-size--xxlarge {
      font-size: 40px;
      line-height: 49px; } }

.text-size--xxxlarge {
  font-size: 32px;
  line-height: 35px; }
  @media screen and (min-width: 440px) {
    .text-size--xxxlarge {
      font-size: 38px;
      line-height: 49px; } }
  @media screen and (min-width: 720px) {
    .text-size--xxxlarge {
      font-size: 49px;
      line-height: 56px; } }

/* Expandable

Example: Collapsed

    <div class="expandable expandable--collapsed box box--focus">
        <div class="expandable__header">
            <h2 class="expandable__headertitle">Filters</h2>
        </div>
        <div class="expandable__body">
            <div class="fieldwrapper">
                <p class="label">Membership type:</p>
                <label class="select select--outlined select--block">
                    <select aria-label="Membership type">
                        <option>---</option>

                        <!--
                        These choices come from a membership-types/<node-id> API.
                        -->
                        <option>Primary</option>
                        <option>Secondary</option>
                        <option>Honorary</option>
                    </select>
                </label>
            </div>

            <div class="fieldwrapper">
                <label class="label" for="id_filter_joined_days_ago">
                    Joined in the last
                    <input id="id_filter_joined_days_ago"
                           class="input input--inline input--width-xxsmall input--size-xsmall input--outlined" type="text" placeholder="days" />
                    days
                </label>
            </div>
        </div>
        <div class="expandable__toggle">
            <button type="button" class="expandable__togglebutton">
                <span class="screenreader-only">
                    <!--
                    You will typically change this with javascript
                    (I.E.: "Expand <something>" or "Collapse <something>")
                    -->
                    Toggle
                </span>
            </button>
        </div>
    </div>

Example: Expanded

    <div class="expandable box box--focus">
        <div class="expandable__header">
            <h2 class="expandable__headertitle">Filters</h2>
        </div>
        <div class="expandable__body">
            <div class="fieldwrapper">
                <p class="label">Membership type:</p>
                <label class="select select--outlined select--block">
                    <select aria-label="Membership type">
                        <option>---</option>

                        <!--
                        These choices come from a membership-types/<node-id> API.
                        -->
                        <option>Primary</option>
                        <option>Secondary</option>
                        <option>Honorary</option>
                    </select>
                </label>
            </div>

            <div class="fieldwrapper">
                <label class="label" for="id_filter_joined_days_ago">
                    Joined in the last
                    <input id="id_filter_joined_days_ago"
                           class="input input--inline input--width-xxsmall input--size-xsmall input--outlined" type="text" placeholder="days" />
                    days
                </label>
            </div>
        </div>

        <div class="expandable__toggle">
            <button type="button" class="expandable__togglebutton">
                <span class="screenreader-only">
                    <!--
                    You will typically change this with javascript
                    (I.E.: "Expand <something>" or "Collapse <something>")
                    -->
                    Toggle
                </span>
            </button>
        </div>
    </div>


Example: {type: isolated} Expanded content modal

    <div class="expandable box box--focus">
        <div class="expandable__header">
            <h2 class="expandable__headertitle">Filters</h2>
        </div>
        <div class="expandable__body">
            <div class="expandable__bodymodal-backdrop" onclick="console.log('click backdrop')"></div>
            <div class="expandable__bodymodal">
                <div class="fieldwrapper">
                    <p class="label">Membership type:</p>
                    <label class="select select--outlined select--block">
                        <select aria-label="Membership type">
                            <option>---</option>

                            <!--
                            These choices come from a membership-types/<node-id> API.
                            -->
                            <option>Primary</option>
                            <option>Secondary</option>
                            <option>Honorary</option>
                        </select>
                    </label>
                </div>

                <div class="fieldwrapper">
                    <label class="label" for="id_filter_joined_days_ago">
                        Joined in the last
                        <input id="id_filter_joined_days_ago"
                               class="input input--inline input--width-xxsmall input--size-xsmall input--outlined" type="text" placeholder="days" />
                        days
                    </label>
                </div>
            </div>
        </div>

        <div class="expandable__toggle">
            <button type="button" class="expandable__togglebutton">
                <span class="screenreader-only">
                    <!--
                    You will typically change this with javascript
                    (I.E.: "Expand <something>" or "Collapse <something>")
                    -->
                    Toggle
                </span>
            </button>
        </div>
    </div>


Example: {type: isolated} With some simple javascript

    <script>
        function toggleExpandableExample () {
            document.getElementById('id_expandable_example').classList.toggle('expandable--collapsed');
        }
    </script>

    <div class="container">
        <div id="id_expandable_example" class="expandable box box--focus">
            <div class="expandable__header">
                <h2 class="expandable__headertitle">Filters</h2>
            </div>
            <div class="expandable__body">
                <div class="fieldwrapper">
                    <p class="label">Membership type:</p>
                    <label class="select select--outlined select--block">
                        <select aria-label="Membership type">
                            <option>---</option>

                            <!--
                            These choices come from a membership-types/<node-id> API.
                            -->
                            <option>Primary</option>
                            <option>Secondary</option>
                            <option>Honorary</option>
                        </select>
                    </label>
                </div>

                <div class="fieldwrapper">
                    <label class="label" for="id_filter_joined_days_ago">
                        Joined in the last
                        <input id="id_filter_joined_days_ago"
                               class="input input--inline input--width-xxsmall input--size-xsmall input--outlined" type="text" placeholder="days" />
                        days
                    </label>
                </div>
            </div>

            <div class="expandable__toggle">
                <button type="button" class="expandable__togglebutton" onclick="toggleExpandableExample();">
                    <span class="screenreader-only">
                        <!--
                        You will typically change this with javascript
                        (I.E.: "Expand <something>" or "Collapse <something>")
                        -->
                        Toggle
                    </span>
                </button>
            </div>
        </div>
    </div>


Example: {type: isolated} You can also make the title a toggle button

    <script>
        function toggleExpandableExample () {
            document.getElementById('id_expandable_example').classList.toggle('expandable--collapsed');
        }
    </script>

    <div class="container">
        <div id="id_expandable_example" class="expandable box box--focus">
            <div class="expandable__header expandable__header--toggle" onclick="toggleExpandableExample();">
                <h2 class="expandable__headertitle">Filters</h2>
            </div>
            <div class="expandable__body">
                <div class="fieldwrapper">
                    <p class="label">Membership type:</p>
                    <label class="select select--outlined select--block">
                        <select aria-label="Membership type">
                            <option>---</option>

                            <!--
                            These choices come from a membership-types/<node-id> API.
                            -->
                            <option>Primary</option>
                            <option>Secondary</option>
                            <option>Honorary</option>
                        </select>
                    </label>
                </div>

                <div class="fieldwrapper">
                    <label class="label" for="id_filter_joined_days_ago">
                        Joined in the last
                        <input id="id_filter_joined_days_ago"
                               class="input input--inline input--width-xxsmall input--size-xsmall input--outlined" type="text" placeholder="days" />
                        days
                    </label>
                </div>
            </div>

            <div class="expandable__toggle">
                <button type="button" class="expandable__togglebutton" onclick="toggleExpandableExample();">
                    <span class="screenreader-only">
                        <!--
                        You will typically change this with javascript
                        (I.E.: "Expand <something>" or "Collapse <something>")
                        -->
                        Toggle
                    </span>
                </button>
            </div>
        </div>
    </div>



Example: {type: isolated} Expanded header content

    <script>
        function toggleExpandableExample () {
            document.getElementById('id_expandable_example').classList.toggle('expandable--collapsed');
        }
    </script>

    <div class="container">
        <div id="id_expandable_example" class="expandable box box--focus">
            <div class="expandable__header">
                <h2 class="expandable__headertitle">Filters</h2>
                <div class="expandable__expanded-header-content">
                    Only visible when expanded!
                </div>
            </div>
            <div class="expandable__body">
                The body!
            </div>

            <div class="expandable__toggle">
                <button type="button" class="expandable__togglebutton" onclick="toggleExpandableExample();">
                    <span class="screenreader-only">
                        <!--
                        You will typically change this with javascript
                        (I.E.: "Expand <something>" or "Collapse <something>")
                        -->
                        Toggle
                    </span>
                </button>
            </div>
        </div>
    </div>


Example: {type: isolated} --outlined

    <script>
        function toggleExpandableExample () {
            document.getElementById('id_expandable_example').classList.toggle('expandable--collapsed');
        }
    </script>

    <div style="background-color: #fff; padding-top: 20px; padding-bottom: 20px;">
        <div class="container">
            <div id="id_expandable_example" class="expandable expandable--outlined box box--focus">
                <div class="expandable__header expandable__header--toggle" onclick="toggleExpandableExample();">
                    <h2 class="expandable__headertitle">Filters</h2>
                </div>
                <div class="expandable__body">
                    <div class="fieldwrapper">
                        <p class="label">Membership type:</p>
                        <label class="select select--outlined select--block">
                            <select aria-label="Membership type">
                                <option>---</option>

                                <!--
                                These choices come from a membership-types/<node-id> API.
                                -->
                                <option>Primary</option>
                                <option>Secondary</option>
                                <option>Honorary</option>
                            </select>
                        </label>
                    </div>

                    <div class="fieldwrapper">
                        <label class="label" for="id_filter_joined_days_ago">
                            Joined in the last
                            <input id="id_filter_joined_days_ago"
                                   class="input input--inline input--width-xxsmall input--size-xsmall input--outlined" type="text" placeholder="days" />
                            days
                        </label>
                    </div>
                </div>

                <div class="expandable__toggle">
                    <button type="button" class="expandable__togglebutton" onclick="toggleExpandableExample();">
                        <span class="screenreader-only">
                            <!--
                            You will typically change this with javascript
                            (I.E.: "Expand <something>" or "Collapse <something>")
                            -->
                            Toggle
                        </span>
                    </button>
                </div>
            </div>
        </div>
    </div>

Styleguide components.expandable
*/
.expandable {
  position: relative;
  border-radius: 5px; }
  .expandable__header {
    margin-bottom: 28px; }
    .expandable__header--toggle {
      user-select: none; }
      .expandable__header--toggle:hover {
        cursor: pointer;
        color: #ce111d; }
  .expandable__headertitle {
    margin: 0;
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    font-size: 16px;
    line-height: 21px; }
    @media screen and (min-width: 440px) {
      .expandable__headertitle {
        font-size: 19px;
        line-height: 28px; } }
  .expandable__expanded-header-content {
    display: block; }
  .expandable__bodymodal {
    position: relative;
    z-index: 30;
    box-shadow: 0 2px 6px rgba(30, 30, 30, 0.3);
    background-color: #fff;
    padding: 12px; }
    @media (min-width: 720px) {
      .expandable__bodymodal {
        padding: 24px; } }
  .expandable__toggle {
    margin-top: 36px; }
  .expandable__togglebutton {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    overflow: hidden;
    left: 50%;
    bottom: 7px;
    width: 36px;
    height: 36px;
    margin-left: -18px;
    border-radius: 50%;
    color: #fff;
    background-color: #002B49; }
    .expandable__togglebutton:hover, .expandable__togglebutton:focus {
      background-color: #E01220;
      color: #fff; }
    .expandable__togglebutton:before {
      font-size: 15px;
      -moz-osx-font-smoothing: grayscale;
      -webkit-font-smoothing: antialiased;
      display: inline-block;
      font-style: normal;
      font-variant: normal;
      text-rendering: auto;
      line-height: 1;
      font-weight: 900;
      font-family: 'Font Awesome 5 Free';
      content: "\f077"; }
      @media screen and (min-width: 720px) {
        .expandable__togglebutton:before {
          font-size: 16px; } }
  .expandable--collapsed .expandable__header {
    margin-bottom: 0;
    margin-right: 48px; }
    .expandable--collapsed .expandable__header > *:last-child {
      margin-bottom: 0; }
  .expandable--collapsed .expandable__expanded-header-content {
    display: none; }
  .expandable--collapsed .expandable__body {
    display: none; }
  .expandable--collapsed .expandable__toggle {
    margin: 0; }
  .expandable--collapsed .expandable__togglebutton {
    bottom: auto;
    left: auto;
    top: 50%;
    right: 12px;
    margin-left: 0;
    margin-top: -18px; }
    .expandable--collapsed .expandable__togglebutton:before {
      -moz-osx-font-smoothing: grayscale;
      -webkit-font-smoothing: antialiased;
      display: inline-block;
      font-style: normal;
      font-variant: normal;
      text-rendering: auto;
      line-height: 1;
      font-weight: 900;
      font-family: 'Font Awesome 5 Free';
      content: "\f078"; }
    @media (min-width: 720px) {
      .expandable--collapsed .expandable__togglebutton {
        right: 24px; } }
  .expandable--outlined {
    border: 3px solid #eeeeef; }

/** Definition list

Example: {type: isolated} Default style

    <dl class="definition-list">
        <dt class="definition-list__title">Email:</dt>
        <dd class="definition-list__value">peter@example.com</dd>

        <dt class="definition-list__title">Phone number:</dt>
        <dd class="definition-list__value">123 45 678</dd>

        <dt class="definition-list__title">Alternative phone number:</dt>
        <dd class="definition-list__value">-</dd>
    </dl>


Example: {type: isolated} Value and title variants

    <dl class="definition-list">
        <dt class="definition-list__title definition-list__title--anonymous">Title --anonymous</dt>
        <dd class="definition-list__value">peter@example.com</dd>

        <dt class="definition-list__title definition-list__title--anonymous-small">Title --anonymous-small:</dt>
        <dd class="definition-list__value definition-list__value--small">Value --small</dd>

        <dt class="definition-list__title">Default title:</dt>
        <dd class="definition-list__value definition-list__value--strong">Value --strong</dd>
    </dl>


Example: {type: isolated} --center  (do not combine this with --table - use --table-center for that)

    <dl class="definition-list definition-list--center">
        <dt class="definition-list__title">Email:</dt>
        <dd class="definition-list__value">peter@example.com</dd>

        <dt class="definition-list__title">Phone number:</dt>
        <dd class="definition-list__value">123 45 678</dd>

        <dt class="definition-list__title">Alternative phone number:</dt>
        <dd class="definition-list__value">-</dd>
    </dl>


Example: {type: isolated} --table variant

    <dl class="definition-list definition-list--table">
        <dt class="definition-list__title">Email:</dt>
        <dd class="definition-list__value">peter@example.com</dd>

        <dt class="definition-list__title">Phone number:</dt>
        <dd class="definition-list__value">123 45 678</dd>

        <dt class="definition-list__title">Alternative phone number:</dt>
        <dd class="definition-list__value">-</dd>
    </dl>


Example: {type: isolated} --table-center-md

    <dl class="definition-list definition-list--table definition-list--table-center-md">
        <dt class="definition-list__title">Email:</dt>
        <dd class="definition-list__value">peter@example.com</dd>

        <dt class="definition-list__title">Phone number:</dt>
        <dd class="definition-list__value">123 45 678</dd>

        <dt class="definition-list__title">Alternative phone number:</dt>
        <dd class="definition-list__value">-</dd>
    </dl>


Example: {type: isolated} --table-center

    <dl class="definition-list definition-list--table definition-list--table-center">
        <dt class="definition-list__title">Email:</dt>
        <dd class="definition-list__value">peter@example.com</dd>

        <dt class="definition-list__title">Phone number:</dt>
        <dd class="definition-list__value">123 45 678</dd>

        <dt class="definition-list__title">Alternative phone number:</dt>
        <dd class="definition-list__value">-</dd>
    </dl>


Example: {type: isolated} --table-bordered variant

    <dl class="definition-list definition-list--table definition-list--table-bordered">
        <dt class="definition-list__title">Email:</dt>
        <dd class="definition-list__value">peter@example.com</dd>

        <dt class="definition-list__title">Phone number:</dt>
        <dd class="definition-list__value">123 45 678</dd>

        <dt class="definition-list__title">Alternative phone number:</dt>
        <dd class="definition-list__value">-</dd>
    </dl>


Example: {type: isolated} --table-30-70 variant (can also be combined with --table-bordered)

    <dl class="definition-list definition-list--table definition-list--table-30-70">
        <dt class="definition-list__title">Email:</dt>
        <dd class="definition-list__value">peter@example.com</dd>

        <dt class="definition-list__title">Phone number:</dt>
        <dd class="definition-list__value">123 45 678</dd>

        <dt class="definition-list__title">Alternative phone number:</dt>
        <dd class="definition-list__value">-</dd>
    </dl>


Example: {type: isolated} --table-40-60 variant (can also be combined with --table-bordered)

    <dl class="definition-list definition-list--table definition-list--table-40-60">
        <dt class="definition-list__title">Email:</dt>
        <dd class="definition-list__value">peter@example.com</dd>

        <dt class="definition-list__title">Phone number:</dt>
        <dd class="definition-list__value">123 45 678</dd>

        <dt class="definition-list__title">Alternative phone number:</dt>
        <dd class="definition-list__value">-</dd>
    </dl>

Styleguide components.definition-list
 */
.definition-list__title {
  font-family: "Maison Neue", Helvetica, sans-serif;
  font-weight: bold;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.74em;
  line-height: inherit;
  font-family: "Maison Neue", Helvetica, sans-serif;
  font-weight: bold;
  margin-top: 12px; }
  .definition-list__title:first-child {
    margin-top: 0; }
  .definition-list__title--anonymous, .definition-list__title--anonymous-small {
    font-family: "Maison Neue", Helvetica, sans-serif;
    letter-spacing: normal;
    text-transform: none;
    font-size: 16px;
    line-height: 21px;
    font-weight: normal;
    font-style: italic; }
    @media screen and (min-width: 440px) {
      .definition-list__title--anonymous, .definition-list__title--anonymous-small {
        font-size: 19px;
        line-height: 28px; } }
  .definition-list__title--anonymous-small {
    font-size: 15px;
    line-height: 21px; }
    @media screen and (min-width: 720px) {
      .definition-list__title--anonymous-small {
        font-size: 16px;
        line-height: 21px; } }

.definition-list__value--break-words {
  word-break: break-all; }

.definition-list__value--small {
  font-size: 15px;
  line-height: 21px; }
  @media screen and (min-width: 720px) {
    .definition-list__value--small {
      font-size: 16px;
      line-height: 21px; } }

.definition-list__value--strong {
  font-family: "Maison Neue", Helvetica, sans-serif;
  font-weight: bold; }

.definition-list--center {
  text-align: center; }

@media (min-width: 720px) {
  .definition-list--table {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; } }

@media (min-width: 720px) {
  .definition-list--table .definition-list__title, .definition-list--table .definition-list__value {
    flex: 0 0 auto;
    width: 50%;
    margin-top: 12px; }
    .definition-list--table .definition-list__title:nth-child(1), .definition-list--table .definition-list__title:nth-child(2), .definition-list--table .definition-list__value:nth-child(1), .definition-list--table .definition-list__value:nth-child(2) {
      margin-top: 0; } }

@media (min-width: 720px) {
  .definition-list--table .definition-list__title {
    padding-right: 6px; } }

@media (min-width: 720px) {
  .definition-list--table .definition-list__value {
    padding-left: 6px; } }

@media (min-width: 720px) {
  .definition-list--table-bordered .definition-list__title, .definition-list--table-bordered .definition-list__value {
    border-bottom: 2px solid #eeeeef;
    padding-bottom: 6px;
    margin-top: 6px; }
    .definition-list--table-bordered .definition-list__title:nth-child(1), .definition-list--table-bordered .definition-list__title:nth-child(2), .definition-list--table-bordered .definition-list__value:nth-child(1), .definition-list--table-bordered .definition-list__value:nth-child(2) {
      margin-top: 0; } }

@media (min-width: 720px) {
  .definition-list--table-30-70 .definition-list__title {
    width: 30%; } }

@media (min-width: 720px) {
  .definition-list--table-30-70 .definition-list__value {
    width: 70%; } }

@media (min-width: 720px) {
  .definition-list--table-80-20 .definition-list__title {
    width: 80%; } }

@media (min-width: 720px) {
  .definition-list--table-80-20 .definition-list__value {
    width: 20%; } }

@media (min-width: 720px) {
  .definition-list--table-40-60 .definition-list__title {
    width: 40%; } }

@media (min-width: 720px) {
  .definition-list--table-40-60 .definition-list__value {
    width: 60%; } }

@media (min-width: 720px) {
  .definition-list--table-center-md .definition-list__title {
    text-align: right; } }

.definition-list--table-center {
  text-align: center; }
  @media (min-width: 720px) {
    .definition-list--table-center {
      text-align: left; }
      .definition-list--table-center .definition-list__title {
        text-align: right; } }

/* FactBox

Example: Basic factbox
    <div class="factbox">
        <h2 class="factbox__title">Single paragraph</h2>
        <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum.</p>

    </div>

Example: Factbox with multiple paragraphs
    <div class="factbox">
        <h2 class="factbox__title">Mulitple paragraphs</h2>
        <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum.</p>
        <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum.</p>
        <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum.</p>
    </div>

Styleguide components.factbox
 */
.factbox {
  margin: 0 auto;
  padding-left: 12px;
  padding-right: 12px;
  max-width: 740px;
  padding-top: 42px;
  padding-bottom: 42px;
  font-size: 22px;
  line-height: 28px;
  color: #fff;
  background-color: #E01220;
  margin-top: 28px;
  margin-bottom: 49px; }
  @media (min-width: 440px) {
    .factbox {
      padding-left: 24px;
      padding-right: 24px; } }
  @media (min-width: 720px) {
    .factbox {
      padding-left: 60px;
      padding-right: 60px; } }
  @media screen and (min-width: 720px) {
    .factbox {
      font-size: 24px;
      line-height: 35px; } }
  .factbox__title {
    font-size: 28px;
    line-height: 35px; }
    @media screen and (min-width: 440px) {
      .factbox__title {
        font-size: 36px;
        line-height: 49px; } }
    @media screen and (min-width: 720px) {
      .factbox__title {
        font-size: 40px;
        line-height: 49px; } }
  .factbox p:last-child {
    margin-bottom: 0; }

/* TileLayout

Example: Baisc Tile layout
    <nav class="tilelayout">
        <div class="tilelayout__content">
            <a href="" class="tilelayout__item  tilelayout__item--wide">
                <h2 class="tilelayout__title">Duis mollis, est non commodo luctus</h2>
                <p class="tilelayout__description">– Duis mollis, est non commodo luctus</p>
            </a>

            <a href="" class="tilelayout__item  tilelayout__item--large  tilelayout__item--image"
               style="background-image: url('http://media.djangopony.com/img/magic-pony-django-wallpaper.png')">
                <h2 class="tilelayout__title">luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum.</h2>
                <p class="tilelayout__description">luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit</p>
            </a>

            <a href="" class="tilelayout__item  tilelayout__item--purple">
                <h2 class="tilelayout__title">luctus, nisi erat porttitor ligula, eget lacinia odio sem nec</h2>
                <p class="tilelayout__description">luctus, nisi erat porttitor ligula, eget lacinia odio sem nec eli</p>
            </a>

            <a href="" class="tilelayout__item  tilelayout__item--green">
                <h2 class="tilelayout__title">– luctus, nisi erat porttitor l</h2>
                <p class="tilelayout__description">luctus, nisi erat portt</p>
            </a>

            <a href="" class="tilelayout__item  tilelayout__item--medium  tilelayout__item--image"
               style="background-image: url('http://media.djangopony.com/img/magic-pony-django-wallpaper.png')">
                <h2 class="tilelayout__title">– luctus, nisi erat porttitor ligula, eget</h2>
                <p class="tilelayout__description">luctus, nisi er</p>
            </a>

            <a href="" class="tilelayout__item  tilelayout__item--image"
               style="background-image: url('http://media.djangopony.com/img/magic-pony-django-wallpaper.png')">
                <h2 class="tilelayout__title">– luctus, nisi erat porttitor ligula</h2>
                <p class="tilelayout__description">luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum.</p>
            </a>

            <a href="" class="tilelayout__item  tilelayout__item--large  tilelayout__item--image"
               style="background-image: url('http://media.djangopony.com/img/magic-pony-django-wallpaper.png')">
                <h2 class="tilelayout__title">luctus, nisi erat porttitor ligula, eget lacinia odio sem nec el</h2>
                <p class="tilelayout__description">luctus, nisi erat porttitor ligul</p>
            </a>

            <a href="" class="tilelayout__item">
                <h2 class="tilelayout__title">luctus, nisi erat porttitor ligula</h2>
                <p class="tilelayout__description">luctus, nisi erat porttito</p>
            </a>

            <a href="" class="tilelayout__item tilelayout__item--blue">
                <h2 class="tilelayout__title">– luctus, nisi erat porttitor ligula</h2>
                <p class="tilelayout__description">luctus, nisi erat</p>
            </a>

            <a href="" class="tilelayout__item  tilelayout__item--green">
                <h2 class="tilelayout__title">– luctus, nisi erat porttito</h2>
                <p class="tilelayout__description">luctus, nisi erat portt</p>
            </a>
        </div>
    </nav>


Styleguide components.tilelayout
 */
.tilelayout {
  padding-top: 28px;
  padding-bottom: 28px;
  background-color: #fff; }
  @media (min-width: 720px) {
    .tilelayout {
      margin-top: 126px;
      margin-bottom: 126px;
      padding-top: 126px;
      padding-bottom: 126px; } }
  .tilelayout--no-wrapping-layout {
    padding: 0 4px;
    margin: 0; }
    @media (min-width: 720px) {
      .tilelayout--no-wrapping-layout {
        padding: 0 4px;
        margin-top: 0;
        margin-bottom: 0; } }
    .tilelayout--no-wrapping-layout .tilelayout__content {
      padding: 0;
      max-width: none; }
  .tilelayout__content {
    margin: 0 auto;
    padding-left: 12px;
    padding-right: 12px;
    max-width: 1640px;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 14px; }
    @media (min-width: 440px) {
      .tilelayout__content {
        padding-left: 24px;
        padding-right: 24px; } }
    @media (min-width: 720px) {
      .tilelayout__content {
        padding-left: 60px;
        padding-right: 60px; } }
    @media (min-width: 440px) {
      .tilelayout__content {
        padding: 0 12px; } }
    @media (min-width: 720px) {
      .tilelayout__content {
        grid-template-columns: repeat(2, 1fr);
        padding: 0 12px; } }
    @media (min-width: 960px) {
      .tilelayout__content {
        grid-template-columns: repeat(4, 1fr); } }
  .tilelayout__title {
    position: relative;
    margin: 0 0 7px; }
  .tilelayout__description {
    font-size: 16px;
    line-height: 21px;
    position: relative;
    margin: 0; }
    @media screen and (min-width: 440px) {
      .tilelayout__description {
        font-size: 19px;
        line-height: 28px; } }
  .tilelayout__item {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    min-height: 266px;
    padding: 28px;
    border: 0;
    border-radius: 5px;
    color: #fff;
    background-color: #E01220;
    overflow: hidden;
    transition: transform 100ms ease-in; }
    .tilelayout__item:hover, .tilelayout__item:focus {
      color: #fff;
      box-shadow: 0 0 20px rgba(30, 30, 30, 0.06);
      will-change: transform;
      transform: translateY(-2px);
      transition: transform 200ms cubic-bezier(0, 0, 0.1, 1); }
    .tilelayout__item:active {
      transform: none; }
    @media (min-width: 960px) {
      .tilelayout__item--wide {
        grid-column: span 4; } }
    .tilelayout__item--wide .tilelayout__title {
      max-width: 1000px;
      hyphens: none; }
      @media (min-width: 960px) {
        .tilelayout__item--wide .tilelayout__title {
          font-size: 32px;
          line-height: 35px; } }
  @media screen and (min-width: 960px) and (min-width: 440px) {
    .tilelayout__item--wide .tilelayout__title {
      font-size: 38px;
      line-height: 49px; } }
  @media screen and (min-width: 960px) and (min-width: 720px) {
    .tilelayout__item--wide .tilelayout__title {
      font-size: 49px;
      line-height: 56px; } }
    .tilelayout__item--wide .tilelayout__description {
      max-width: 1000px; }
    @media (min-width: 960px) {
      .tilelayout__item--large {
        grid-column: span 2;
        grid-row: span 2; } }
    @media (min-width: 960px) {
      .tilelayout__item--large .tilelayout__title {
        font-size: 32px;
        line-height: 35px; } }
  @media screen and (min-width: 960px) and (min-width: 440px) {
    .tilelayout__item--large .tilelayout__title {
      font-size: 38px;
      line-height: 49px; } }
  @media screen and (min-width: 960px) and (min-width: 720px) {
    .tilelayout__item--large .tilelayout__title {
      font-size: 49px;
      line-height: 56px; } }
    @media (min-width: 960px) {
      .tilelayout__item--medium {
        grid-column: span 2; } }
    .tilelayout__item--image {
      position: relative;
      background-size: cover;
      text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4); }
      .tilelayout__item--image:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0.6;
        background-image: linear-gradient(rgba(0, 0, 0, 0.6), black); }
        @supports (mix-blend-mode: multiply) {
          .tilelayout__item--image:before {
            opacity: 0.5;
            mix-blend-mode: multiply; } }
    .tilelayout__item--primary {
      background-color: #E01220; }
      .tilelayout__item--primary, .tilelayout__item--primary:hover, .tilelayout__item--primary:focus {
        color: #fff; }
    .tilelayout__item--primary-dark {
      background-color: #ce111d; }
      .tilelayout__item--primary-dark, .tilelayout__item--primary-dark:hover, .tilelayout__item--primary-dark:focus {
        color: #fff; }
    .tilelayout__item--secondary {
      background-color: #40AAB8; }
      .tilelayout__item--secondary, .tilelayout__item--secondary:hover, .tilelayout__item--secondary:focus {
        color: #2f2c2f; }
    .tilelayout__item--secondary-dark {
      background-color: #002B49; }
      .tilelayout__item--secondary-dark, .tilelayout__item--secondary-dark:hover, .tilelayout__item--secondary-dark:focus {
        color: #fff; }
    .tilelayout__item--neutral {
      background-color: #e3e4e3; }
      .tilelayout__item--neutral, .tilelayout__item--neutral:hover, .tilelayout__item--neutral:focus {
        color: #2f2c2f; }
    .tilelayout__item--neutral-dark {
      background-color: #828383; }
      .tilelayout__item--neutral-dark, .tilelayout__item--neutral-dark:hover, .tilelayout__item--neutral-dark:focus {
        color: #2f2c2f; }
    .tilelayout__item--warning {
      background-color: #E01220; }
      .tilelayout__item--warning, .tilelayout__item--warning:hover, .tilelayout__item--warning:focus {
        color: #fff; }
    .tilelayout__item--warning-dark {
      background-color: #b30e1a; }
      .tilelayout__item--warning-dark, .tilelayout__item--warning-dark:hover, .tilelayout__item--warning-dark:focus {
        color: #fff; }
    .tilelayout__item--success {
      background-color: #007f1e; }
      .tilelayout__item--success, .tilelayout__item--success:hover, .tilelayout__item--success:focus {
        color: #fff; }
    .tilelayout__item--success-dark {
      background-color: #006618; }
      .tilelayout__item--success-dark, .tilelayout__item--success-dark:hover, .tilelayout__item--success-dark:focus {
        color: #fff; }
    .tilelayout__item--info {
      background-color: #ffce00; }
      .tilelayout__item--info, .tilelayout__item--info:hover, .tilelayout__item--info:focus {
        color: #2f2c2f; }
    .tilelayout__item--info-dark {
      background-color: #cca500; }
      .tilelayout__item--info-dark, .tilelayout__item--info-dark:hover, .tilelayout__item--info-dark:focus {
        color: #2f2c2f; }
    .tilelayout__item--link {
      background-color: #2f2c2f; }
      .tilelayout__item--link, .tilelayout__item--link:hover, .tilelayout__item--link:focus {
        color: #fff; }

.tilelayout-edge-to-edge-container {
  padding: 0 12px; }

/* Images

Example: {type: isolated} Left
    <figure class="image  image--left">
        <img
            src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/Sir_Winston_Leonard_Spencer_Churchill_by_Ambrose_McEvoy.jpg/493px-Sir_Winston_Leonard_Spencer_Churchill_by_Ambrose_McEvoy.jpg"
            alt="Winston churchill"
            class="image__image"
        />
        <figcaption class="image__caption">
            <p class="image__text">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis imperdiet massa tincidunt nunc pulvinar sapien et ligula. Viverra suspendisse potenti nullam ac tortor vitae. Vestibulum lectus mauris ultrices eros in. Libero enim sed faucibus turpis in eu mi bibendum neque. Ultrices neque ornare aenean euismod elementum nisi.
            </p>
        </figcaption>
    </figure>

Example: {type: isolated} Tight
    <figure class="image  image--tight">
        <img
            src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Blenheim_Palace_from_the_Water_Terraces_October_2016.jpg/1280px-Blenheim_Palace_from_the_Water_Terraces_October_2016.jpg"
            alt="Blenheim Palace"
            class="image__image"
        />
        <figcaption class="image__caption">
            <p class="image__text">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue neque gravida in fermentum. Id leo in vitae turpis massa sed.
            </p>
        </figcaption>
    </figure>

Example: {type: isolated} Full
    <div style="min-height: 700px"> <!-- this div wrapper is just to make it render nicely in the styleguide -->
    <figure class="image  image--full">
        <img
            src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Blenheim_Palace_from_the_Water_Terraces_October_2016.jpg/1280px-Blenheim_Palace_from_the_Water_Terraces_October_2016.jpg"
            alt="Something here"
            class="image__image"
        />
        <figcaption class="image__caption">
            <p class="image__text">Quis imperdiet massa tincidunt nunc.</p>
        </figcaption>
    </figure>
    </div>

Styleguide layout.image
*/
.image__text {
  margin: 0; }

.image--tight {
  margin: 0 auto;
  padding-left: 12px;
  padding-right: 12px;
  max-width: 740px;
  margin-top: 28px;
  margin-bottom: 49px; }
  @media (min-width: 440px) {
    .image--tight {
      padding-left: 24px;
      padding-right: 24px; } }
  @media (min-width: 720px) {
    .image--tight {
      padding-left: 60px;
      padding-right: 60px; } }
  @media (min-width: 960px) {
    .image--tight .image__image {
      margin-left: -60px;
      margin-right: -60px;
      width: calc(100% + 120px);
      max-width: calc(100% + 120px); } }
  .image--tight .image__caption {
    font-size: 15px;
    line-height: 21px;
    padding-bottom: 12px;
    border-bottom: 2px solid #eeeeef; }
    @media screen and (min-width: 720px) {
      .image--tight .image__caption {
        font-size: 16px;
        line-height: 21px; } }

.image--left, .image--right {
  margin: 0 auto;
  padding-left: 12px;
  padding-right: 12px;
  max-width: 740px;
  margin-bottom: 42px; }
  @media (min-width: 440px) {
    .image--left, .image--right {
      padding-left: 24px;
      padding-right: 24px; } }
  @media (min-width: 720px) {
    .image--left, .image--right {
      padding-left: 60px;
      padding-right: 60px; } }
  .image--left .image__image, .image--right .image__image {
    max-height: 200px;
    max-width: 40%; }
  .image--left .image__text, .image--right .image__text {
    font-size: 22px;
    line-height: 28px; }
    @media screen and (min-width: 720px) {
      .image--left .image__text, .image--right .image__text {
        font-size: 24px;
        line-height: 35px; } }

.image--left .image__image {
  float: left;
  margin-right: 24px; }
  @media (min-width: 720px) {
    .image--left .image__image {
      margin-left: -60px; } }

.image--right .image__image {
  float: right;
  margin-left: 24px; }
  @media (min-width: 720px) {
    .image--right .image__image {
      margin-right: -60px; } }

.image--right .image__text {
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto; }

.image--nomargin {
  margin-bottom: 0; }

.image--full {
  position: relative;
  height: 100%;
  max-height: 70vh;
  overflow: hidden;
  margin-top: 28px;
  margin-bottom: 49px; }
  .image--full .image__image {
    display: block;
    width: 100%; }
    @supports (object-fit: cover) {
      .image--full .image__image {
        position: relative;
        height: 100%;
        object-fit: cover; } }
  .image--full .image__caption {
    position: absolute;
    width: 100%;
    bottom: 0;
    color: #fff;
    padding: 14px 12px; }
    @media (min-width: 720px) {
      .image--full .image__caption {
        padding: 28px 60px; } }
  .image--full .image__text {
    font-family: "Noe Text", Helvetica, sans-serif;
    font-size: 19px;
    line-height: 28px;
    position: relative;
    display: inline-block;
    padding: 14px 12px;
    color: #fff;
    background-color: #E01220; }
    @media screen and (min-width: 440px) {
      .image--full .image__text {
        font-size: 23px;
        line-height: 28px; } }
    @media (min-width: 720px) {
      .image--full .image__text {
        max-width: 50%;
        padding: 28px 24px;
        font-size: 28px;
        line-height: 35px; } }
  @media screen and (min-width: 720px) and (min-width: 440px) {
    .image--full .image__text {
      font-size: 36px;
      line-height: 49px; } }
  @media screen and (min-width: 720px) and (min-width: 720px) {
    .image--full .image__text {
      font-size: 40px;
      line-height: 49px; } }
    @media (min-width: 1240px) {
      .image--full .image__text {
        padding: 35px 36px; } }

/** Article

Article provides sane default styles to its child elements. It styles
elements - it DOES NOT override CSS classes.

Article is a wrapper class that is used when you want to style
some extra things that normally does not have a default style,
like <ul>.

Example:

    <section class="article">
        <p>Facilis sit laboriosam officiis sunt quidem asperiores. Id odit et sunt esse sapiente et nam occaecati a. Perferendis fugiat itaque deleniti consequatur nesciunt et explicabo quos quae. Amet itaque consequatur nobis dolor consectetur exercitationem distinctio ea tempore.</p>

        <p>A <a href="#">link here</a>, some <strong>strong text here</strong>, and some <em>emphasized text here</em></p>

        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>
                Item 3
                <ul>
                    <li>Item 3.1</li>
                    <li>Item 3.2</li>
                </ul>
            </li>
            <li>Item 4</li>
        </ul>

        <p><strong>A large list</strong> - styles are not affected since it has a css class - the inner list in item 3 is
        affected though - it has no class:</p>
        <ul class="list list--large">
            <li>Item 1</li>
            <li>Item 2</li>
            <li>
                Item 3
                <ul>
                    <li>Item 3.1</li>
                    <li>Item 3.2</li>
                </ul>
            </li>
            <li>Item 4</li>
        </ul>
    </section>

Styleguide components.article
*/
.article ul:not([class]) {
  margin-bottom: 28px;
  text-align: left; }
  .article ul:not([class]) > li, .article ul:not([class]) .list__item {
    position: relative;
    padding-left: 30px;
    margin-bottom: 0; }
    @media (min-width: 720px) {
      .article ul:not([class]) > li, .article ul:not([class]) .list__item {
        padding-left: 42px; } }
    .article ul:not([class]) > li:before, .article ul:not([class]) .list__item:before {
      content: '';
      position: absolute;
      left: 0;
      top: 0.35em;
      height: 9px;
      width: 9px;
      border-radius: 50%;
      background-color: #ce111d; }
      @media (min-width: 440px) {
        .article ul:not([class]) > li:before, .article ul:not([class]) .list__item:before {
          top: 0.4em; } }

/* Churchill footer
Example: {type: isolated} With brand text
    <footer class="churchill-footer">
        <div class="churchill-footer__content">
            <div class="churchill-footer__brand">
                <div class="churchill-footer__brandtext">
                    Brand
                </div>
            </div>
            <div class="columnlayout">
                <div class="columnlayout__column">
                    <h2 class="h4">
                        Support
                    </h2>
                    <ul class="churchill-footer__menu">
                        <li class="churchill-footer__menuitem">
                            <span class="cricon cricon--info cricon--size-xsmall-fw" aria-hidden="true"></span>
                            <a href="#">
                                Getting started guide
                            </a>
                        </li>
                        <li class="churchill-footer__menuitem">
                            <span class="cricon cricon--email cricon--size-xsmall-fw" aria-hidden="true"></span>
                            <span class="screenreader-only">Email</span>
                            <a href="mailto: adminhelp@example.com">
                                 adminhelp@example.com
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="columnlayout__column columnlayout__column--sm-order-2 columnlayout__column--separator columnlayout__column--border-width-small columnlayout__column--separator-spacing-sm churchill-footer__columnseparator"></div>
                <div class="columnlayout__column columnlayout__column--sm-order-1">
                    <h2 class="h4">Recently visited units</h2>
                    <nav class="churchill-footer__menu">
                        <div class="churchill-footer__menuitem">
                            <a href="#">Unit One</a>
                        </div>
                        <div class="churchill-footer__menuitem">
                            <a href="#">Unit Two</a>
                        </div>
                    </nav>
                </div>
            </div>
        </div>
    </footer>

Example: {type: isolated} With brand image
    <footer class="churchill-footer">
        <div class="churchill-footer__content">
            <div class="churchill-footer__brand">
                <span class="screenreader-only">Brand</span>
                <img class="churchill-footer__brandimage" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgoKPHN2ZwogICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iCiAgIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiCiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIKICAgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiCiAgIHhtbG5zOmlua3NjYXBlPSJodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy9uYW1lc3BhY2VzL2lua3NjYXBlIgogICB3aWR0aD0iNDQ5LjEwNTE2IgogICBoZWlnaHQ9IjQyNS43MTQyOSIKICAgaWQ9InN2ZzIiCiAgIHZlcnNpb249IjEuMSIKICAgaW5rc2NhcGU6dmVyc2lvbj0iMC40OC4wIHI5NjU0IgogICBzb2RpcG9kaTpkb2NuYW1lPSJzdGFyLnN2ZyI+CiAgPGRlZnMKICAgICBpZD0iZGVmczQiPgogICAgPGlua3NjYXBlOnBlcnNwZWN0aXZlCiAgICAgICBzb2RpcG9kaTp0eXBlPSJpbmtzY2FwZTpwZXJzcDNkIgogICAgICAgaW5rc2NhcGU6dnBfeD0iMCA6IDUyNi4xODEwOSA6IDEiCiAgICAgICBpbmtzY2FwZTp2cF95PSIwIDogMTAwMCA6IDAiCiAgICAgICBpbmtzY2FwZTp2cF96PSI3NDQuMDk0NDggOiA1MjYuMTgxMDkgOiAxIgogICAgICAgaW5rc2NhcGU6cGVyc3AzZC1vcmlnaW49IjM3Mi4wNDcyNCA6IDM1MC43ODczOSA6IDEiCiAgICAgICBpZD0icGVyc3BlY3RpdmUyOTg1IiAvPgogIDwvZGVmcz4KICA8c29kaXBvZGk6bmFtZWR2aWV3CiAgICAgaWQ9ImJhc2UiCiAgICAgcGFnZWNvbG9yPSIjMDAwMDAwIgogICAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IgogICAgIGJvcmRlcm9wYWNpdHk9IjEuMCIKICAgICBpbmtzY2FwZTpwYWdlb3BhY2l0eT0iMCIKICAgICBpbmtzY2FwZTpwYWdlc2hhZG93PSIyIgogICAgIGlua3NjYXBlOnpvb209IjAuMzUiCiAgICAgaW5rc2NhcGU6Y3g9Ii0yNzUuNDk2MDciCiAgICAgaW5rc2NhcGU6Y3k9IjExMS45OTI1MSIKICAgICBpbmtzY2FwZTpkb2N1bWVudC11bml0cz0icHgiCiAgICAgaW5rc2NhcGU6Y3VycmVudC1sYXllcj0ibGF5ZXIxIgogICAgIHNob3dncmlkPSJmYWxzZSIKICAgICBmaXQtbWFyZ2luLXRvcD0iMCIKICAgICBmaXQtbWFyZ2luLWxlZnQ9IjAiCiAgICAgZml0LW1hcmdpbi1yaWdodD0iMCIKICAgICBmaXQtbWFyZ2luLWJvdHRvbT0iMCIKICAgICBpbmtzY2FwZTp3aW5kb3ctd2lkdGg9IjEzMTkiCiAgICAgaW5rc2NhcGU6d2luZG93LWhlaWdodD0iNzgxIgogICAgIGlua3NjYXBlOndpbmRvdy14PSIwIgogICAgIGlua3NjYXBlOndpbmRvdy15PSIyMiIKICAgICBpbmtzY2FwZTp3aW5kb3ctbWF4aW1pemVkPSIwIiAvPgogIDxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTciPgogICAgPHJkZjpSREY+CiAgICAgIDxjYzpXb3JrCiAgICAgICAgIHJkZjphYm91dD0iIj4KICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4KICAgICAgICA8ZGM6dHlwZQogICAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+CiAgICAgIDwvY2M6V29yaz4KICAgIDwvcmRmOlJERj4KICA8L21ldGFkYXRhPgogIDxnCiAgICAgaW5rc2NhcGU6bGFiZWw9IkxheWVyIDEiCiAgICAgaW5rc2NhcGU6Z3JvdXBtb2RlPSJsYXllciIKICAgICBpZD0ibGF5ZXIxIgogICAgIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xNDQuNzgxNzgsLTIxOC42NDA0KSI+CiAgICA8cmVjdAogICAgICAgc3R5bGU9ImZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZSIKICAgICAgIGlkPSJyZWN0MzgzNCIKICAgICAgIHdpZHRoPSI0NDkuMTA1MTYiCiAgICAgICBoZWlnaHQ9IjQyNS43MTQyOSIKICAgICAgIHg9IjE0NC43ODE3OCIKICAgICAgIHk9IjIxOC42NDA0IgogICAgICAgcng9IjcuNzM2NTM4NCIKICAgICAgIHJ5PSIwIiAvPgogICAgPHBhdGgKICAgICAgIHNvZGlwb2RpOnR5cGU9InN0YXIiCiAgICAgICBzdHlsZT0iZmlsbDojZmZmZjM3O2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojZmM3NTAwO3N0cm9rZS13aWR0aDoxOTtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2Utb3BhY2l0eToxO3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2UtZGFzaG9mZnNldDowIgogICAgICAgaWQ9InBhdGgzNzc1IgogICAgICAgc29kaXBvZGk6c2lkZXM9IjUiCiAgICAgICBzb2RpcG9kaTpjeD0iMTkxLjQyODU3IgogICAgICAgc29kaXBvZGk6Y3k9IjE0Ni43MjA3OSIKICAgICAgIHNvZGlwb2RpOnIxPSIyMDYuNDI3MzQiCiAgICAgICBzb2RpcG9kaTpyMj0iOTMuMjYwNTY3IgogICAgICAgc29kaXBvZGk6YXJnMT0iLTEuNTcwNzk2MyIKICAgICAgIHNvZGlwb2RpOmFyZzI9Ii0wLjk4MDYyODQ5IgogICAgICAgaW5rc2NhcGU6ZmxhdHNpZGVkPSJmYWxzZSIKICAgICAgIGlua3NjYXBlOnJvdW5kZWQ9IjAiCiAgICAgICBpbmtzY2FwZTpyYW5kb21pemVkPSIwLjAxNSIKICAgICAgIGQ9Ik0gMTg4Ljk5NjA0LC02MS4zODQxNDUgMjQxLjc0MDIsNjcuOTU0NjU1IDM4NC45NjU3Miw4NC4yNjM1OTIgMjgxLjA5OTQ0LDE3My44MTUwNCAzMTUuMjQ0NTMsMzEzLjM3MzA5IDE5Ny44MDQ4MywyNDEuODQxMjggNzEuMDM4MDU3LDMxNS43MzE1OCAxMDMuMDI3NDEsMTc3LjM5MDA5IC0yLjE0Mzk3MTIsODIuMjcwMDIyIDEzMS44OTU0Miw3NS4zNDgxOTQgeiIKICAgICAgIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE4Mi4xNTAzMywzMDQuODQ2MzEpIgogICAgICAgaW5rc2NhcGU6dHJhbnNmb3JtLWNlbnRlci14PSIwLjAxNzcwMzI1OSIKICAgICAgIGlua3NjYXBlOnRyYW5zZm9ybS1jZW50ZXIteT0iLTE5LjU0NzA3NCIgLz4KICA8L2c+Cjwvc3ZnPgo=">
            </div>
            Hello cruel world
        </div>
    </footer>


Styleguide layout.churchill-footer
*/
.churchill-footer {
  padding-top: 21px;
  padding-bottom: 21px;
  background-color: #E01220;
  color: #fff; }
  @media (min-width: 720px) {
    .churchill-footer {
      padding-top: 28px;
      padding-bottom: 28px; } }
  .churchill-footer__content {
    margin: 0 auto;
    padding-left: 12px;
    padding-right: 12px;
    max-width: 1400px; }
    @media (min-width: 440px) {
      .churchill-footer__content {
        padding-left: 24px;
        padding-right: 24px; } }
    @media (min-width: 720px) {
      .churchill-footer__content {
        padding-left: 60px;
        padding-right: 60px; } }
  .churchill-footer__smalltext {
    font-size: 15px;
    line-height: 21px;
    margin-top: 28px;
    margin-bottom: 28px; }
    @media screen and (min-width: 720px) {
      .churchill-footer__smalltext {
        font-size: 16px;
        line-height: 21px; } }
  .churchill-footer__brand {
    margin-bottom: 21px;
    text-align: left; }
  .churchill-footer__brandtext {
    font-family: "Noe Text", Helvetica, sans-serif;
    font-size: 19px;
    line-height: 28px; }
    @media screen and (min-width: 440px) {
      .churchill-footer__brandtext {
        font-size: 23px;
        line-height: 28px; } }
  .churchill-footer__brandimage {
    width: auto;
    max-height: 60px;
    display: inline-block;
    object-position: left center;
    object-fit: contain; }
  .churchill-footer__columnseparator {
    background-color: #ce111d; }
  .churchill-footer a {
    color: #fff;
    border-color: #ce111d; }
    .churchill-footer a:hover {
      color: #fff;
      border-color: #fff; }
  .churchill-footer__menuitem {
    list-style-type: none;
    margin-bottom: 14px; }

/* Userdoc images

Usage: Have to use on of the following modifiers:

Example: {type: isolated} Left
    <figure class="userdoc-image  userdoc-image--left">
        <img
            src="https://cicilietill.files.wordpress.com/2011/12/20120531_7328-kari-bremnes.jpg"
            alt="Bremnes hereself..."
            class="userdoc-image__image"
        />
        <figcaption class="userdoc-image__caption">
            <p class="userdoc-image__text">Kari Bremnes: Sterkt uenig i partiens standpunkt til hennes plateslipp. Har ingen verdens forståelse for at dette kan ha noen innvirkning til det politiske som foregår i landet. Samtidig er hun trist for at dette først kommer til lyset nå: Dette skulle vært annonsert en god tid i forkant.</p>
        </figcaption>
    </figure>

Example: {type: isolated} Tight
    <figure class="userdoc-image  userdoc-image--tight">
        <img
            src="http://1.vgc.no/drpublish/images/article/2013/10/16/23065988/1/990/1967290.jpg"
            alt="Bremnes hereself..."
            class="userdoc-image__image"
        />
        <figcaption class="userdoc-image__caption">
            <p class="userdoc-image__text">Kari Bremnes: Rett og slett lei av de politiske prosessene.</p>
        </figcaption>
    </figure>

Example: {type: isolated} Full
    <figure class="userdoc-image  userdoc-image--full">
        <img
            src="http://arkiv.nrk.no/lydverket/wp-content/uploads/2010/05/BREMNES.jpg"
            alt="Bremnes hereself..."
            class="userdoc-image__image"
        />
        <figcaption class="userdoc-image__caption">
            <p class="userdoc-image__text">Kari Bremnes er betenkt.</p>
        </figcaption>
    </figure>

Styleguide layout.userdoc-image
*/
.userdoc-image__text {
  margin: 0; }

.userdoc-image--tight {
  margin: 0 auto;
  padding-left: 12px;
  padding-right: 12px;
  max-width: 740px;
  margin-bottom: 28px; }
  @media (min-width: 440px) {
    .userdoc-image--tight {
      padding-left: 24px;
      padding-right: 24px; } }
  @media (min-width: 720px) {
    .userdoc-image--tight {
      padding-left: 60px;
      padding-right: 60px; } }

.userdoc-image--left {
  margin: 0 auto;
  padding-left: 12px;
  padding-right: 12px;
  max-width: 740px;
  margin-bottom: 28px; }
  @media (min-width: 440px) {
    .userdoc-image--left {
      padding-left: 24px;
      padding-right: 24px; } }
  @media (min-width: 720px) {
    .userdoc-image--left {
      padding-left: 60px;
      padding-right: 60px; } }
  .userdoc-image--left .userdoc-image__image {
    max-height: 200px;
    max-width: 40%;
    float: left;
    margin-right: 24px; }

.userdoc-image--full {
  position: relative;
  height: 100%;
  max-height: 70vh;
  overflow: hidden;
  margin-bottom: 28px; }
  .userdoc-image--full .userdoc-image__image {
    display: block;
    width: 100%; }
    @supports (object-fit: cover) {
      .userdoc-image--full .userdoc-image__image {
        position: relative;
        height: 100%;
        object-fit: cover; } }
  .userdoc-image--full .userdoc-image__caption {
    position: absolute;
    width: 100%;
    bottom: 0;
    color: #fff;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.05); }
    .userdoc-image--full .userdoc-image__caption:after {
      content: '';
      display: block;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.5));
      mix-blend-mode: multiply; }
  .userdoc-image--full .userdoc-image__text {
    margin: 0 auto;
    padding-left: 12px;
    padding-right: 12px;
    max-width: 740px;
    position: relative;
    z-index: 2;
    padding-top: 56px;
    padding-bottom: 7px; }
    @media (min-width: 440px) {
      .userdoc-image--full .userdoc-image__text {
        padding-left: 24px;
        padding-right: 24px; } }
    @media (min-width: 720px) {
      .userdoc-image--full .userdoc-image__text {
        padding-left: 60px;
        padding-right: 60px; } }

/* Enlisting view

Example: {type: isolated}
    <div class="enlisting-view">
        <div class="enlisting-view__main">
            <div class="enlisting-view__pages">
                <form class="enlisting-view__page enlisting-view__page--active">
                    <div class="enlisting-view__pagecontent">
                        <div class="enlisting-view__pageheader">
                            <h2 class="enlisting-view__pagetitle">Bli medlem i AUF</h2>
                            <p class="enlisting-view__pagesubtitle">Some subtitle here</p>
                        </div>
                        <div class="enlisting-view__pagebody">
                            <div class="fieldwrapper">
                                <label class="label enlisting-view__label" for="id_name">Vervekode</label>
                                <input type="text" id="id_name" class="input input--outlined enlisting-view__input" />
                            </div>
                            <div class="fieldwrapper">
                                <p class="label enlisting-view__label">Receive notifications</p>
                                <div class='enlisting-view__radiobody'>
                                    <label class='radio'>
                                        <input
                                          required
                                          type='radio'
                                          name='notifications'>
                                        <span class='radio__control-indicator'></span>
                                        Yes
                                    </label>
                                    <label class='radio'>
                                        <input
                                          required
                                          type='radio'
                                          name='notifications'>
                                        <span class='radio__control-indicator'></span>
                                        No
                                    </label>
                                </div>
                                <p class="help-text">
                                    This is some help
                                </p>
                            </div>
                        </div>
                        <div class="enlisting-view__pagenavigation">
                            <button type="submit" class="enlisting-view__navigationbutton enlisting-view__navigationbutton--next" onclick="switchPage(event, true)">
                                Next
                            </button>
                        </div>
                    </div>
                    <div class="enlisting-view__pagemeta enlisting-view__pagemeta--top">
                        <svg width="300" height="190" class="enlisting-view__logo"><path class="cls-1" d="M97.49,90.84C100,77.75,92.41,67.62,86.74,62.59c-4-3.58-2.74-7.92-6.62-15C79.73,53.16,77.5,55,75.42,55c-4.56,0-5.94-17.52-10.51-23.31.6,6-2.71,10-6.14,9.17-6.62-1.68-14.12-14.72-13.1-22.55-6.1,8.1-.23,31-6.32,32.11-3.37.61-5.73-4.47-6.1-11-4.91,12.66,2.13,22.7,4.46,29.6,3.14,9.31,4.1,15.55,3.88,19.27-.11,6.65-4.89,3.54-9.44,2.77,4.64,2.92,6,7.28,9.61,13.91,9.24,19.94,26.06,26.55,43.05,13.73-29.43,6-38.39-11.32-39.6-32.32,10.13,22.08,28.35,17,28.35,17-17.05-3.89-29.8-18.23-29.8-40,0-6,3.38-16.43,3.66-18.58.35-2.68.33-6.64-1.67-9.91,8.27,7,7.42,17.92,7.75,27.83.32,9.43,3.37,17.71,11.34,22.07-8.74-18.24,3.42-23-6.63-37.82C71,52.57,72.39,65.87,73.83,76c1.3,9.2,5.87,11.73,7.57,10.8,5.4-2.94-2-22-6-25.93,12.07,5.24,19.07,20.06,22.09,30Z" transform="translate(-31.55 -18.35)"/><path class="cls-1" d="M81.27,100.21c1.25,1.43,2.35,7.51-.2,10-2.89,2.86-8.87,2.54-13.49,1.31.61,1,5.11,3.35,8,3.71,3.92.47,8.43-.17,11.89-4.77,5.92-7.88,7.2-9.89,6.8-13.48a22.18,22.18,0,0,0-2.64-7.28c.42,2.2-.13,6.64-1.73,8.59S83.89,100.93,81.27,100.21Z" transform="translate(-31.55 -18.35)"/><path class="cls-1" d="M148.92,97.75c2.12,0,2.7,1.35,2.7,3.28.2,6,.77,61.59,1,90.17,0,2.51-1,3.09-3.1,3.09h-16c-1.35,0-4.06,0-4.06-3.09,0,0,.39-42.86,0-72.21,0-1.35-1.93-1.74-4.25-1.74-1.15,0-3.08,1.36-3.86,2.71-10,21.81-32.63,71.24-32.63,71.24a4.58,4.58,0,0,1-4.24,3.09H69.38c-1.93,0-2.7-.77-2.7-3.09,0-1.93-.79-5.41.77-8.11,1.93-3.48,37.83-77.62,41.32-84,.76-1.54,1.73-1.35,3.28-1.35ZM202,176.14c11.59,0,16.22-8.3,16.22-18l-.39-57.34c0-3.09,2.7-3.09,4.05-3.09h16.22c2.12,0,3.09.77,3.09,3.09-.19,9.27,0,37.26,0,57.34s-12.36,38-42.09,38c-18.53,0-35.33-10-35.33-39V101.8c0-3.28,1.54-4,3.48-4h19.49v59.47C186.76,171.7,194.88,176.14,202,176.14ZM276,136.36c.2,2.9,1,3.67,3.48,3.67l31.67.19c2.12,0,3.09.78,3.09,3.1v13.51c0,2.13-1.55,2.9-3.49,2.9-13.13,0-23.16.19-32,.19a2.46,2.46,0,0,0-2.5,2.32c0,9.26-.39,22.78-.39,29,0,1.74-1,3.09-2.7,3.09H256.85c-1.35,0-4.05,0-4.05-3.09,0,0,.58-20.08.58-44.6,0-19.89-.39-44.8-.39-44.8,0-3.28,1.54-4,3.47-4,24.33,0,43.44.19,56.57.19,1.93,0,3.48.78,3.48,2.9v14.29c0,2.32-1,3.09-3.09,3.09l-34,.19c-2.51,0-3.28.77-3.48,3.67C275.77,124.59,275.77,133.67,276,136.36Z" transform="translate(-31.55 -18.35)"/></svg>
                    </div>
                </form>
                <form class="enlisting-view__page">
                    <div class="enlisting-view__pagecontent">
                        <div class="enlisting-view__pageheader">
                            <h2 class="enlisting-view__pagetitle">Personal info</h2>
                            <p class="enlisting-view__pagesubtitle">Some subtitle here</p>
                        </div>
                        <div class="enlisting-view__pagebody">
                            <div class="fieldwrapper">
                                <label class="label enlisting-view__label" for="id_name">Name</label>
                                <input type="text" id="id_name" class="input input--outlined input--error enlisting-view__input" />
                            </div>
                            <div class="fieldwrapper">
                                <label class="label enlisting-view__label" for="id_birthdate">Birth date</label>
                                <div class="searchinput searchinput--outlined">
                                    <span class="searchinput__body">
                                        <input type="date" aria-labelledby="birthdate-input-label" class="searchinput__input" value="2019-01-01">
                                    </span>
                                    <button type="button" class="searchinput__button" title="Nullstill dato">
                                        <span class="searchinput__buttonicon cricon cricon--close" aria-hidden="true"></span>
                                    </button>
                                </div>
                            </div>
                            <div class="fieldwrapper">
                                <label class="label enlisting-view__label" for="id_gender">Gender</label>
                                <label class="select select--block select--outlined enlisting-view__select">
                                    <select aria-label="Gender">
                                        <option>Male</option>
                                        <option>Female</option>
                                        <option>Other</option>
                                        <option>I do not want to provide my gender</option>
                                    </select>
                                </label>
                            </div>
                        </div>
                        <div class="enlisting-view__pagenavigation">
                            <button type="submit" class="enlisting-view__navigationbutton enlisting-view__navigationbutton--previous" onclick="switchPage(event, false)">
                                Previous
                            </button>
                            <button type="submit" class="enlisting-view__navigationbutton enlisting-view__navigationbutton--next" onclick="switchPage(event, true)">
                                Next
                            </button>
                        </div>
                    </div>
                    <div class="enlisting-view__pagemeta">
                        <svg width="300" height="190" class="enlisting-view__logo"><path class="cls-1" d="M97.49,90.84C100,77.75,92.41,67.62,86.74,62.59c-4-3.58-2.74-7.92-6.62-15C79.73,53.16,77.5,55,75.42,55c-4.56,0-5.94-17.52-10.51-23.31.6,6-2.71,10-6.14,9.17-6.62-1.68-14.12-14.72-13.1-22.55-6.1,8.1-.23,31-6.32,32.11-3.37.61-5.73-4.47-6.1-11-4.91,12.66,2.13,22.7,4.46,29.6,3.14,9.31,4.1,15.55,3.88,19.27-.11,6.65-4.89,3.54-9.44,2.77,4.64,2.92,6,7.28,9.61,13.91,9.24,19.94,26.06,26.55,43.05,13.73-29.43,6-38.39-11.32-39.6-32.32,10.13,22.08,28.35,17,28.35,17-17.05-3.89-29.8-18.23-29.8-40,0-6,3.38-16.43,3.66-18.58.35-2.68.33-6.64-1.67-9.91,8.27,7,7.42,17.92,7.75,27.83.32,9.43,3.37,17.71,11.34,22.07-8.74-18.24,3.42-23-6.63-37.82C71,52.57,72.39,65.87,73.83,76c1.3,9.2,5.87,11.73,7.57,10.8,5.4-2.94-2-22-6-25.93,12.07,5.24,19.07,20.06,22.09,30Z" transform="translate(-31.55 -18.35)"/><path class="cls-1" d="M81.27,100.21c1.25,1.43,2.35,7.51-.2,10-2.89,2.86-8.87,2.54-13.49,1.31.61,1,5.11,3.35,8,3.71,3.92.47,8.43-.17,11.89-4.77,5.92-7.88,7.2-9.89,6.8-13.48a22.18,22.18,0,0,0-2.64-7.28c.42,2.2-.13,6.64-1.73,8.59S83.89,100.93,81.27,100.21Z" transform="translate(-31.55 -18.35)"/><path class="cls-1" d="M148.92,97.75c2.12,0,2.7,1.35,2.7,3.28.2,6,.77,61.59,1,90.17,0,2.51-1,3.09-3.1,3.09h-16c-1.35,0-4.06,0-4.06-3.09,0,0,.39-42.86,0-72.21,0-1.35-1.93-1.74-4.25-1.74-1.15,0-3.08,1.36-3.86,2.71-10,21.81-32.63,71.24-32.63,71.24a4.58,4.58,0,0,1-4.24,3.09H69.38c-1.93,0-2.7-.77-2.7-3.09,0-1.93-.79-5.41.77-8.11,1.93-3.48,37.83-77.62,41.32-84,.76-1.54,1.73-1.35,3.28-1.35ZM202,176.14c11.59,0,16.22-8.3,16.22-18l-.39-57.34c0-3.09,2.7-3.09,4.05-3.09h16.22c2.12,0,3.09.77,3.09,3.09-.19,9.27,0,37.26,0,57.34s-12.36,38-42.09,38c-18.53,0-35.33-10-35.33-39V101.8c0-3.28,1.54-4,3.48-4h19.49v59.47C186.76,171.7,194.88,176.14,202,176.14ZM276,136.36c.2,2.9,1,3.67,3.48,3.67l31.67.19c2.12,0,3.09.78,3.09,3.1v13.51c0,2.13-1.55,2.9-3.49,2.9-13.13,0-23.16.19-32,.19a2.46,2.46,0,0,0-2.5,2.32c0,9.26-.39,22.78-.39,29,0,1.74-1,3.09-2.7,3.09H256.85c-1.35,0-4.05,0-4.05-3.09,0,0,.58-20.08.58-44.6,0-19.89-.39-44.8-.39-44.8,0-3.28,1.54-4,3.47-4,24.33,0,43.44.19,56.57.19,1.93,0,3.48.78,3.48,2.9v14.29c0,2.32-1,3.09-3.09,3.09l-34,.19c-2.51,0-3.28.77-3.48,3.67C275.77,124.59,275.77,133.67,276,136.36Z" transform="translate(-31.55 -18.35)"/></svg>

                        <dl class="enlisting-view__summary">
                            <dt class="enlisting-view__summarytitle">Status</dt>
                            <dd class="enlisting-view__summaryvalue">39% complete</dd>
                            <dt class="enlisting-view__summarytitle">Name</dt>
                            <dd class="enlisting-view__summaryvalue">Peter Pan</dd>
                            <dt class="enlisting-view__summarytitle">Birth date</dt>
                            <dd class="enlisting-view__summaryvalue">27.12 1955</dd>
                        </dl>
                    </div>
                </form>
                <form class="enlisting-view__page">
                    <div class="enlisting-view__pagecontent">
                        <div class="enlisting-view__pageheader">
                            <h2 class="enlisting-view__pagetitle">Address</h2>
                            <p class="enlisting-view__pagesubtitle">Some subtitle here</p>
                        </div>
                        <div class="enlisting-view__pagebody">
                            <div class="fieldwrapper">
                                <label class="label enlisting-view__label" for="id_postcode">Postcode</label>
                                <input type="text" id="id_postcode" class="input input--outlined enlisting-view__input" />
                            </div>
                            <div class="fieldwrapper">
                                <label class="label enlisting-view__label" for="id_location">City/district</label>
                                <input type="text" id="id_location" class="input input--outlined enlisting-view__input" />
                            </div>
                        </div>
                        <div class="enlisting-view__pagenavigation">
                            <button type="submit" class="enlisting-view__navigationbutton enlisting-view__navigationbutton--previous" onclick="switchPage(event, false)">
                                Previous
                            </button>
                            <button type="submit" class="enlisting-view__navigationbutton enlisting-view__navigationbutton--next" onclick="switchPage(event, true)">
                                Next
                            </button>
                        </div>
                    </div>
                    <div class="enlisting-view__pagemeta">
                        <svg width="300" height="190" class="enlisting-view__logo"><path class="cls-1" d="M97.49,90.84C100,77.75,92.41,67.62,86.74,62.59c-4-3.58-2.74-7.92-6.62-15C79.73,53.16,77.5,55,75.42,55c-4.56,0-5.94-17.52-10.51-23.31.6,6-2.71,10-6.14,9.17-6.62-1.68-14.12-14.72-13.1-22.55-6.1,8.1-.23,31-6.32,32.11-3.37.61-5.73-4.47-6.1-11-4.91,12.66,2.13,22.7,4.46,29.6,3.14,9.31,4.1,15.55,3.88,19.27-.11,6.65-4.89,3.54-9.44,2.77,4.64,2.92,6,7.28,9.61,13.91,9.24,19.94,26.06,26.55,43.05,13.73-29.43,6-38.39-11.32-39.6-32.32,10.13,22.08,28.35,17,28.35,17-17.05-3.89-29.8-18.23-29.8-40,0-6,3.38-16.43,3.66-18.58.35-2.68.33-6.64-1.67-9.91,8.27,7,7.42,17.92,7.75,27.83.32,9.43,3.37,17.71,11.34,22.07-8.74-18.24,3.42-23-6.63-37.82C71,52.57,72.39,65.87,73.83,76c1.3,9.2,5.87,11.73,7.57,10.8,5.4-2.94-2-22-6-25.93,12.07,5.24,19.07,20.06,22.09,30Z" transform="translate(-31.55 -18.35)"/><path class="cls-1" d="M81.27,100.21c1.25,1.43,2.35,7.51-.2,10-2.89,2.86-8.87,2.54-13.49,1.31.61,1,5.11,3.35,8,3.71,3.92.47,8.43-.17,11.89-4.77,5.92-7.88,7.2-9.89,6.8-13.48a22.18,22.18,0,0,0-2.64-7.28c.42,2.2-.13,6.64-1.73,8.59S83.89,100.93,81.27,100.21Z" transform="translate(-31.55 -18.35)"/><path class="cls-1" d="M148.92,97.75c2.12,0,2.7,1.35,2.7,3.28.2,6,.77,61.59,1,90.17,0,2.51-1,3.09-3.1,3.09h-16c-1.35,0-4.06,0-4.06-3.09,0,0,.39-42.86,0-72.21,0-1.35-1.93-1.74-4.25-1.74-1.15,0-3.08,1.36-3.86,2.71-10,21.81-32.63,71.24-32.63,71.24a4.58,4.58,0,0,1-4.24,3.09H69.38c-1.93,0-2.7-.77-2.7-3.09,0-1.93-.79-5.41.77-8.11,1.93-3.48,37.83-77.62,41.32-84,.76-1.54,1.73-1.35,3.28-1.35ZM202,176.14c11.59,0,16.22-8.3,16.22-18l-.39-57.34c0-3.09,2.7-3.09,4.05-3.09h16.22c2.12,0,3.09.77,3.09,3.09-.19,9.27,0,37.26,0,57.34s-12.36,38-42.09,38c-18.53,0-35.33-10-35.33-39V101.8c0-3.28,1.54-4,3.48-4h19.49v59.47C186.76,171.7,194.88,176.14,202,176.14ZM276,136.36c.2,2.9,1,3.67,3.48,3.67l31.67.19c2.12,0,3.09.78,3.09,3.1v13.51c0,2.13-1.55,2.9-3.49,2.9-13.13,0-23.16.19-32,.19a2.46,2.46,0,0,0-2.5,2.32c0,9.26-.39,22.78-.39,29,0,1.74-1,3.09-2.7,3.09H256.85c-1.35,0-4.05,0-4.05-3.09,0,0,.58-20.08.58-44.6,0-19.89-.39-44.8-.39-44.8,0-3.28,1.54-4,3.47-4,24.33,0,43.44.19,56.57.19,1.93,0,3.48.78,3.48,2.9v14.29c0,2.32-1,3.09-3.09,3.09l-34,.19c-2.51,0-3.28.77-3.48,3.67C275.77,124.59,275.77,133.67,276,136.36Z" transform="translate(-31.55 -18.35)"/></svg>
                    </div>
                </form>
                <form class="enlisting-view__page">
                    <div class="enlisting-view__pagecontent">
                        <div class="enlisting-view__pageheader">
                            <h2 class="enlisting-view__pagetitle">TODO</h2>
                            <p class="enlisting-view__pagesubtitle">Some subtitle here</p>
                        </div>
                        <div class="enlisting-view__pagebody">
                            TODO
                        </div>
                        <div class="enlisting-view__pagenavigation">
                            <button type="submit" class="enlisting-view__navigationbutton enlisting-view__navigationbutton--previous" onclick="switchPage(event, false)">
                                Previous
                            </button>
                            <button type="submit" class="enlisting-view__navigationbutton enlisting-view__navigationbutton--next" onclick="switchPage(event, true)">
                                Next
                            </button>
                        </div>
                    </div>
                    <div class="enlisting-view__pagemeta">
                        <svg width="300" height="190" class="enlisting-view__logo"><path class="cls-1" d="M97.49,90.84C100,77.75,92.41,67.62,86.74,62.59c-4-3.58-2.74-7.92-6.62-15C79.73,53.16,77.5,55,75.42,55c-4.56,0-5.94-17.52-10.51-23.31.6,6-2.71,10-6.14,9.17-6.62-1.68-14.12-14.72-13.1-22.55-6.1,8.1-.23,31-6.32,32.11-3.37.61-5.73-4.47-6.1-11-4.91,12.66,2.13,22.7,4.46,29.6,3.14,9.31,4.1,15.55,3.88,19.27-.11,6.65-4.89,3.54-9.44,2.77,4.64,2.92,6,7.28,9.61,13.91,9.24,19.94,26.06,26.55,43.05,13.73-29.43,6-38.39-11.32-39.6-32.32,10.13,22.08,28.35,17,28.35,17-17.05-3.89-29.8-18.23-29.8-40,0-6,3.38-16.43,3.66-18.58.35-2.68.33-6.64-1.67-9.91,8.27,7,7.42,17.92,7.75,27.83.32,9.43,3.37,17.71,11.34,22.07-8.74-18.24,3.42-23-6.63-37.82C71,52.57,72.39,65.87,73.83,76c1.3,9.2,5.87,11.73,7.57,10.8,5.4-2.94-2-22-6-25.93,12.07,5.24,19.07,20.06,22.09,30Z" transform="translate(-31.55 -18.35)"/><path class="cls-1" d="M81.27,100.21c1.25,1.43,2.35,7.51-.2,10-2.89,2.86-8.87,2.54-13.49,1.31.61,1,5.11,3.35,8,3.71,3.92.47,8.43-.17,11.89-4.77,5.92-7.88,7.2-9.89,6.8-13.48a22.18,22.18,0,0,0-2.64-7.28c.42,2.2-.13,6.64-1.73,8.59S83.89,100.93,81.27,100.21Z" transform="translate(-31.55 -18.35)"/><path class="cls-1" d="M148.92,97.75c2.12,0,2.7,1.35,2.7,3.28.2,6,.77,61.59,1,90.17,0,2.51-1,3.09-3.1,3.09h-16c-1.35,0-4.06,0-4.06-3.09,0,0,.39-42.86,0-72.21,0-1.35-1.93-1.74-4.25-1.74-1.15,0-3.08,1.36-3.86,2.71-10,21.81-32.63,71.24-32.63,71.24a4.58,4.58,0,0,1-4.24,3.09H69.38c-1.93,0-2.7-.77-2.7-3.09,0-1.93-.79-5.41.77-8.11,1.93-3.48,37.83-77.62,41.32-84,.76-1.54,1.73-1.35,3.28-1.35ZM202,176.14c11.59,0,16.22-8.3,16.22-18l-.39-57.34c0-3.09,2.7-3.09,4.05-3.09h16.22c2.12,0,3.09.77,3.09,3.09-.19,9.27,0,37.26,0,57.34s-12.36,38-42.09,38c-18.53,0-35.33-10-35.33-39V101.8c0-3.28,1.54-4,3.48-4h19.49v59.47C186.76,171.7,194.88,176.14,202,176.14ZM276,136.36c.2,2.9,1,3.67,3.48,3.67l31.67.19c2.12,0,3.09.78,3.09,3.1v13.51c0,2.13-1.55,2.9-3.49,2.9-13.13,0-23.16.19-32,.19a2.46,2.46,0,0,0-2.5,2.32c0,9.26-.39,22.78-.39,29,0,1.74-1,3.09-2.7,3.09H256.85c-1.35,0-4.05,0-4.05-3.09,0,0,.58-20.08.58-44.6,0-19.89-.39-44.8-.39-44.8,0-3.28,1.54-4,3.47-4,24.33,0,43.44.19,56.57.19,1.93,0,3.48.78,3.48,2.9v14.29c0,2.32-1,3.09-3.09,3.09l-34,.19c-2.51,0-3.28.77-3.48,3.67C275.77,124.59,275.77,133.67,276,136.36Z" transform="translate(-31.55 -18.35)"/></svg>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        function nextSiblingWithClassName (domElement, className, reverse) {
            var nextSibling;
            if (reverse) {
                nextSibling = domElement.previousSibling;
            } else {
                nextSibling = domElement.nextSibling;
            }
            if (!nextSibling) {
                return null;
            }
            if (nextSibling.classList && nextSibling.classList.contains('enlisting-view__page')) {
                return nextSibling;
            }
            return nextSiblingWithClassName(nextSibling, className, reverse);
        }

        function switchPage(e, next) {
            e.preventDefault();

            // Find next page DOM element
            var newActivePageElement = newActivePageElement = nextSiblingWithClassName(e.target.parentNode.parentNode.parentNode, 'enlisting-view__page', !next);

            const rootElement = e.target.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode
            rootElement.classList.remove('enlisting-view--backwards')
            if (!next) {
                rootElement.classList.add('enlisting-view--backwards')
            }

            // Deactivate active page
            var pages = Array.from(document.getElementsByClassName('enlisting-view__page'));
            var hasFoundNextActive = false;
            pages.forEach(function(pageElement){
                pageElement.classList.remove('enlisting-view__page--active');
                if (pageElement === newActivePageElement) {
                    hasFoundNextActive = true;
                }
            });

            // Activate new active page
            newActivePageElement.classList.add('enlisting-view__page--active');
        }
    </script>

Styleguide components.enlisting-view
*/
.enlisting-view {
  width: 100%;
  min-height: 100%;
  background-color: #E01220;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch; }
  @media (min-height: 820px) {
    .enlisting-view {
      height: 100vh; } }
  .enlisting-view__main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 1 auto;
    background-color: #fff;
    width: 100%; }
    @media (min-width: 720px) {
      .enlisting-view__main {
        max-width: 400px; } }
    @media (min-width: 960px) {
      .enlisting-view__main {
        max-width: 500px; } }
  @media (min-height: 820px) {
    .enlisting-view__pages {
      flex: 0 0 auto;
      max-height: 820px; } }
  .enlisting-view__page {
    padding: 24px 0;
    position: relative;
    width: 100%;
    height: 100%;
    display: none;
    flex-direction: column;
    justify-content: stretch; }
    .enlisting-view__page--active {
      display: flex; }
  .enlisting-view__pagemeta {
    order: 3;
    background-color: #E01220;
    padding: 24px;
    z-index: 2; }
    @media (min-width: 720px) {
      .enlisting-view__pagemeta {
        margin-top: 0;
        padding: 0 0 0 24px;
        position: absolute;
        right: -400px;
        width: 400px;
        height: 100%;
        z-index: 1; } }
    @media (min-width: 960px) {
      .enlisting-view__pagemeta {
        margin-top: 0;
        padding: 0 0 0 24px;
        position: absolute;
        right: -500px;
        width: 500px;
        height: 100%;
        z-index: 1; } }
    .enlisting-view__pagemeta--top {
      order: 1;
      margin-bottom: 28px; }
      @media (min-width: 720px) {
        .enlisting-view__pagemeta--top {
          order: 3;
          margin-bottom: 0; } }
  .enlisting-view__pagecontent {
    order: 2;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1 1 auto; }
  .enlisting-view__pageheader {
    padding: 0 24px;
    flex: 0 0 auto;
    margin-bottom: 24px; }
  .enlisting-view__pagetitle {
    margin-bottom: 6px;
    font-family: "Courier New", monospace; }
  .enlisting-view__pagesubtitle {
    margin-bottom: 0;
    font-family: "Courier New", monospace;
    font-size: 15px;
    line-height: 21px;
    color: #686969; }
    @media screen and (min-width: 720px) {
      .enlisting-view__pagesubtitle {
        font-size: 16px;
        line-height: 21px; } }
  .enlisting-view__pagebody {
    flex: 0 0 auto; }
  .enlisting-view__pagenavigation {
    padding: 0 24px;
    flex: 0 0 auto;
    height: 60px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    margin-bottom: 34px; }
  .enlisting-view__navigationbutton {
    display: block;
    flex: 1 1 50%;
    border: 3px solid #E01220;
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 16px;
    line-height: 21px;
    font-family: "Courier New", monospace; }
    @media screen and (min-width: 440px) {
      .enlisting-view__navigationbutton {
        font-size: 19px;
        line-height: 28px; } }
    .enlisting-view__navigationbutton--previous {
      background-color: #fff;
      border-right-width: 0;
      border-radius: 5px 0 0 5px; }
      .enlisting-view__navigationbutton--previous:last-child {
        border-right-width: 3px;
        border-radius: 5px; }
      .enlisting-view__navigationbutton--previous:hover {
        border-color: #ce111d;
        background-color: #f5f5f5; }
    .enlisting-view__navigationbutton--next {
      background-color: #E01220;
      color: #fff;
      border-left-width: 0;
      border-radius: 0 5px 5px 0; }
      .enlisting-view__navigationbutton--next:first-child {
        border-left-width: 3px;
        border-radius: 5px; }
      .enlisting-view__navigationbutton--next:hover {
        background-color: #ce111d;
        border-color: #ce111d; }
      .enlisting-view__navigationbutton--next[disabled] {
        pointer-events: none;
        opacity: 0.4; }
  .enlisting-view__logo {
    zoom: 50%; }
    .enlisting-view__logo .cls-1 {
      fill: #fff; }
  .enlisting-view__bodytext {
    font-family: "Courier New", monospace;
    padding: 0 24px; }
    .enlisting-view__bodytext p, .enlisting-view__bodytext a, .enlisting-view__bodytext strong, .enlisting-view__bodytext em {
      font-family: "Courier New", monospace; }
  .enlisting-view .label {
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.74em;
    line-height: inherit;
    font-family: "Courier New", monospace;
    font-weight: normal;
    margin-bottom: 0;
    padding: 0 24px; }
  .enlisting-view .checkbox {
    font-family: "Courier New", monospace;
    margin-left: 24px;
    margin-right: 24px; }
  .enlisting-view .help-text {
    margin-left: 24px;
    margin-right: 24px;
    font-family: "Courier New", monospace; }
  .enlisting-view .link {
    font-family: "Courier New", monospace;
    text-align: left; }
  .enlisting-view .radio {
    font-family: "Courier New", monospace;
    font-weight: 600; }
  .enlisting-view .message {
    font-family: "Courier New", monospace;
    font-weight: bold;
    padding: 0 24px; }
  .enlisting-view__input.input, .enlisting-view__input.dateinput__input, .enlisting-view__input.inline-action__input, .enlisting-view__input.newsletter__input, .enlisting-view__input.ap-search__input, .enlisting-view__input.find-local__input, .enlisting-view .searchinput, .enlisting-view__select.select, .enlisting-view__select.dateinput__select, .enlisting-view__select.find-local__select {
    background-color: #f5f5f5;
    border-radius: 0;
    border-width: 0 0 3px 0;
    font-family: "Courier New", monospace;
    border-color: #e3e4e3; }
    .enlisting-view__input.input:focus, .enlisting-view__input.dateinput__input:focus, .enlisting-view__input.inline-action__input:focus, .enlisting-view__input.newsletter__input:focus, .enlisting-view__input.ap-search__input:focus, .enlisting-view__input.find-local__input:focus, .enlisting-view .searchinput:focus, .enlisting-view__select.select:focus, .enlisting-view__select.dateinput__select:focus, .enlisting-view__select.find-local__select:focus {
      border-color: #828383; }
    .enlisting-view__input.input--error, .enlisting-view .searchinput--error, .enlisting-view__select.select--error {
      border-color: #d53c3c; }
    .enlisting-view__input.input--success, .enlisting-view .searchinput--success, .enlisting-view__select.select--success {
      border-color: #3c893c; }
    .enlisting-view__input.input[disabled], .enlisting-view__input[disabled].dateinput__input, .enlisting-view__input[disabled].inline-action__input, .enlisting-view__input[disabled].newsletter__input, .enlisting-view__input[disabled].ap-search__input, .enlisting-view__input[disabled].find-local__input, .enlisting-view .searchinput[disabled], .enlisting-view__select.select[disabled], .enlisting-view__select[disabled].dateinput__select, .enlisting-view__select[disabled].find-local__select {
      pointer-events: none;
      background-color: #e3e4e3;
      border-color: #e3e4e3; }
  .enlisting-view__input.input, .enlisting-view__input.dateinput__input, .enlisting-view__input.inline-action__input, .enlisting-view__input.newsletter__input, .enlisting-view__input.ap-search__input, .enlisting-view__input.find-local__input, .enlisting-view .searchinput {
    padding-left: 24px;
    padding-right: 24px; }
  .enlisting-view__input.input, .enlisting-view__input.dateinput__input, .enlisting-view__input.inline-action__input, .enlisting-view__input.newsletter__input, .enlisting-view__input.ap-search__input, .enlisting-view__input.find-local__input, .enlisting-view .searchinput__input, .enlisting-view__select.select select, .enlisting-view__select.dateinput__select select, .enlisting-view__select.find-local__select select {
    font-family: "Courier New", monospace;
    font-weight: bold; }
  .enlisting-view__select.select select, .enlisting-view__select.dateinput__select select, .enlisting-view__select.find-local__select select {
    padding-left: 24px;
    padding-right: 24px;
    font-family: "Courier New", monospace; }
  .enlisting-view__select.select:before, .enlisting-view__select.dateinput__select:before, .enlisting-view__select.find-local__select:before {
    right: 38px; }
  .enlisting-view__summary {
    color: #fff;
    text-align: left;
    margin-top: 12px; }
  .enlisting-view__summarytitle {
    margin: 0;
    padding: 0;
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.74em;
    line-height: inherit;
    font-family: "Courier New", monospace;
    font-weight: bold;
    opacity: 0;
    animation: enlistingViewAnimationOpacityOff 0.8s both;
    color: rgba(255, 255, 255, 0.7); }
  .enlisting-view__summaryvalue {
    font-size: 0.74em;
    line-height: inherit;
    font-family: "Courier New", monospace;
    margin: 0 0 6px 0;
    padding: 0;
    animation: enlistingViewAnimationOpacityOff 0.8s both;
    font-weight: bold; }
  .enlisting-view__summaryvalue-character {
    animation: summaryCharacterAnimation 0.1s linear; }
  .enlisting-view__radiobody {
    margin: 6px 24px 0 24px; }
  .enlisting-view__signature-container {
    border: 2px dashed #2f2c2f;
    margin: 24px;
    position: relative;
    min-height: 150px; }
  .enlisting-view__signature-clearbutton {
    display: block;
    background-color: #828383;
    border-top: 2px solid #2f2c2f;
    color: #fff;
    border-bottom: none;
    text-decoration: none;
    text-align: center;
    width: 100%;
    font-weight: bold;
    font-family: "Courier New", monospace; }
    .enlisting-view__signature-clearbutton:hover {
      color: #fff;
      background-color: #2f2c2f; }

.enlisting-view__page .enlisting-view__pagecontent {
  animation: enlistingViewAnimationSlideInRight 0.6s both; }

.enlisting-view__page .enlisting-view__logo {
  animation: enlistingViewAnimationOpacityOff 1.4s both; }

.enlisting-view__page:nth-child(1) .enlisting-view__pagecontent {
  animation: enlistingViewAnimationOpacityOff 1.4s both; }
  @media (min-width: 720px) {
    .enlisting-view__page:nth-child(1) .enlisting-view__pagecontent {
      animation: enlistingViewAnimationBounceDown 0.8s both; } }

.enlisting-view__page:nth-child(1) .enlisting-view__logo {
  animation: enlistingViewAnimationBounceDown 0.8s both; }

.enlisting-view--backwards .enlisting-view__page .enlisting-view__pagecontent {
  animation: enlistingViewAnimationSlideInLeft 0.6s both; }

@keyframes enlistingViewAnimationOpacityOff {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes enlistingViewAnimationRollIn {
  0% {
    transform: translateX(-400px) rotate(-90deg);
    opacity: 0; }
  100% {
    transform: translateX(0) rotate(0deg);
    opacity: 1; } }

@keyframes enlistingViewAnimationBounceDown {
  0% {
    transform: translateY(-500px);
    animation-timing-function: ease-in;
    opacity: 0; }
  38% {
    transform: translateY(0);
    animation-timing-function: ease-out;
    opacity: 1; }
  55% {
    transform: translateY(-65px);
    animation-timing-function: ease-in; }
  72% {
    transform: translateY(0);
    animation-timing-function: ease-out; }
  81% {
    transform: translateY(-28px);
    animation-timing-function: ease-in; }
  90% {
    transform: translateY(0);
    animation-timing-function: ease-out; }
  95% {
    transform: translateY(-8px);
    animation-timing-function: ease-in; }
  100% {
    transform: translateY(0);
    animation-timing-function: ease-out; } }

@keyframes enlistingViewAnimationSlideInRight {
  from {
    transform: translate3d(100%, 0, 0);
    visibility: visible; }
  to {
    transform: translate3d(0, 0, 0); } }

@keyframes enlistingViewAnimationSlideInLeft {
  from {
    transform: translate3d(-100%, 0, 0);
    visibility: visible; }
  to {
    transform: translate3d(0, 0, 0); } }

/* The typing effect */
@keyframes summaryCharacterAnimation {
  from {
    font-size: 2em; }
  to {
    font-size: 0.74em;
    line-height: inherit; } }

/* Signature pad

Example: {type: isolated}
    <div class="signature-pad">
        <button type="button" class="signature-pad__clearbutton" title="Clear signature">
            <span class="searchinput__buttonicon cricon cricon--close" aria-hidden="true"></span>
        </button>

        <div class="signature-pad__canvas"></div>
    </div>


Styleguide components.signature-pad
*/
.signature-pad {
  background-color: #000;
  border: 3px solid #000;
  position: relative;
  height: 100vh;
  width: 100vw; }
  .signature-pad__canvas {
    width: 100%;
    height: 100%; }
  .signature-pad__clearbutton {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 50px;
    background-color: #efefef;
    display: flex;
    flex-direction: row;
    justify-content: center; }

/* Logo

The logo can be modified by adding the class `.branding--light`.

Example: {type: isolated} Logo example
    <section class="page-section  page-section--spaced  page-section--center">
        <a href="/" class="branding">
            <svg class="branding__svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="37px" height="40px" viewBox="0 0 37 40" xml:space="preserve">
                <g class="branding__mark">
                    <path d="M22.583,8.912c0,0-8.166-12.871-17.304-7.676c-11.3,6.425-0.943,26.548-0.943,26.548S0.222,12.811,9.569,8.691 C15.65,6.01,22.583,8.912,22.583,8.912z" />
                    <path d="M17.045,0.577c0,0,22.252,4.605,19.516,18.313c-1.987,9.959-13.124,11.121-13.124,11.121s8.918-7.99,3.266-18.611 C23.116,4.66,17.045,0.577,17.045,0.577z" />
                    <path d="M34.137,27.816c0,0-11.762,17.901-21.594,10.307c-7.676-5.93-7.369-17.52-7.369-17.52s5.283,11.18,15.416,11.746 C27.89,32.755,34.137,27.816,34.137,27.816z" />
                    <path d="M11.019,25.48c0,0-9.712-9.661-0.985-14.633c6.013-3.426,14.296,0.619,14.296,0.619s-9.762-0.114-12.481,5.965 C10.062,21.428,11.019,25.48,11.019,25.48z" />
                    <path d="M15.31,15.659c0,0,10.764-6.247,11.082,2.122c0.271,7.134-5.917,12.288-5.917,12.288s5.322-6.965,1.732-11.372 C19.929,15.901,15.31,15.659,15.31,15.659z" />
                    <path d="M21.02,24.67c0,0-1.257,6.713-6.047,3.8c-3.918-2.382-2.005-9.329-2.005-9.329s0.215,5.809,4.024,7.02 C18.941,26.782,21.02,24.67,21.02,24.67z" />
                    <path d="M17.288,24.479c0,0,3.612-0.408,2.88-3.603c-0.751-3.276-6.082-3.01-6.082-3.01s3.664,1.237,4.14,3.907 C18.506,23.345,17.288,24.479,17.288,24.479z" />
                </g>
            </svg>
            <span class="branding__name">
                Arbeiderpartiet
            </span>
        </a>
    </section>


Styleguide basic.2:logo
*/
.branding {
  position: relative;
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  border: 0;
  margin-left: -3px;
  z-index: 20;
  width: 40px;
  height: 40px; }
  @media (min-width: 440px) {
    .branding {
      width: auto; } }
  @media (min-width: 720px) {
    .branding {
      margin-top: -4px; } }
  .branding__svg {
    position: relative;
    display: inline-block;
    vertical-align: top;
    z-index: 2; }
  .branding__text, .branding__mark {
    fill: #E01220; }
  .branding__name {
    display: none;
    position: relative;
    vertical-align: top;
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    font-size: 19px;
    line-height: 21px;
    color: #E01220;
    max-width: 250px;
    top: 50%;
    transform: translateY(-50%);
    letter-spacing: -0.005em; }
    @media (min-width: 720px) {
      .branding__name {
        display: inline-block; } }
  .branding--light .branding__text,
  .branding--light .branding__mark {
    fill: #fff; }
  .branding--light .branding__name {
    color: #fff; }
  .branding--footer {
    top: -9px;
    margin-top: 0;
    margin-bottom: 0; }
  .branding.ng-animate {
    animation: fade-out-in 1000ms; }

@keyframes fade-out-in {
  0% {
    opacity: 1; }
  10% {
    opacity: 0; }
  60% {
    opacity: 0; }
  100% {
    opacity: 1; } }

/* Page header

TODO: Should this be documented?

Styleguide layout.page-header
*/
.page-header {
  position: absolute;
  width: 100%;
  top: 0;
  z-index: 10;
  padding: 7px 0;
  color: #E01220; }
  @media (min-width: 720px) {
    .page-header {
      padding: 21px 0;
      height: 49px; } }
  .page-header__nav {
    position: relative;
    top: 2px;
    float: right; }
  .page-header__link {
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    font-size: 15px;
    line-height: 21px;
    display: none;
    position: relative;
    margin-left: 1em;
    color: #E01220;
    border-bottom: 2px solid transparent; }
    @media screen and (min-width: 720px) {
      .page-header__link {
        font-size: 16px;
        line-height: 21px; } }
    .page-header__link:hover, .page-header__link:focus, .page-header__link--active {
      color: #ce111d;
      border-color: #ce111d; }
    @media (min-width: 960px) {
      .page-header__link {
        display: inline; } }
    .page-header__link--mittap, .page-header__link--loggedin {
      float: right;
      margin-top: -2px;
      padding: 7px 12px 6px;
      border-radius: 5px;
      border: 0;
      color: #fff;
      background-color: #E01220; }
      @media (min-width: 960px) {
        .page-header__link--mittap, .page-header__link--loggedin {
          display: inline-block; } }
      .page-header__link--mittap:hover, .page-header__link--mittap:focus, .page-header__link--loggedin:hover, .page-header__link--loggedin:focus {
        color: #fff;
        background-color: #ce111d; }
      .page-header__link--mittap .page-header__link, .page-header__link--loggedin .page-header__link {
        color: #fff; }
        .page-header__link--mittap .page-header__link:hover, .page-header__link--mittap .page-header__link:focus, .page-header__link--loggedin .page-header__link:hover, .page-header__link--loggedin .page-header__link:focus {
          border-color: #fff; }
        .page-header__link--mittap .page-header__link:first-child, .page-header__link--loggedin .page-header__link:first-child {
          margin-left: 0; }
    .page-header__link--loggedin:hover, .page-header__link--loggedin:focus {
      background-color: #E01220; }
  .page-header__separator {
    display: inline-block;
    position: absolute;
    height: 1.2em;
    margin-left: 0.3em;
    width: 2px;
    background-color: #ce111d; }
  .page-header__menu {
    position: relative;
    top: 8px;
    float: right;
    min-width: 84px;
    line-height: 20px;
    transition: all 300ms cubic-bezier(0, 0, 0.1, 1); }
    @media (min-width: 960px) {
      .page-header__menu {
        display: none; } }
    .page-header__menu--light {
      color: #fff; }
      .page-header__menu--light .icon-hamburger__bar {
        background-color: #fff; }
  .page-header__content {
    margin: 0 auto;
    padding-left: 12px;
    padding-right: 12px;
    max-width: 1400px; }
    @media (min-width: 440px) {
      .page-header__content {
        padding-left: 24px;
        padding-right: 24px; } }
    @media (min-width: 720px) {
      .page-header__content {
        padding-left: 60px;
        padding-right: 60px; } }
  .page-header--show-menu {
    position: fixed;
    color: #fff;
    z-index: 40;
    animation: header-show-menu 500ms ease-out forwards; }
    .page-header--show-menu .branding__text,
    .page-header--show-menu .branding__mark,
    .page-header--show-menu .branding__name {
      fill: #fff;
      color: #fff; }
  .page-header--light {
    color: #fff; }
    .page-header--light .icon-hamburger__bar {
      background-color: #fff; }
    .page-header--light .page-header__separator {
      background-color: #E01220; }
    .page-header--light .page-header__link {
      color: #fff; }
      .page-header--light .page-header__link:hover, .page-header--light .page-header__link:focus, .page-header--light .page-header__link--active {
        border-color: #fff; }
      .page-header--light .page-header__link--mittap, .page-header--light .page-header__link--loggedin {
        background-color: #fff; }
        .page-header--light .page-header__link--mittap .page-header__link, .page-header--light .page-header__link--loggedin .page-header__link {
          color: #E01220; }
      .page-header--light .page-header__link--mittap {
        color: #E01220; }
        .page-header--light .page-header__link--mittap:hover, .page-header--light .page-header__link--mittap:focus {
          border-color: #E01220; }
    .page-header--light .branding__text,
    .page-header--light .branding__mark,
    .page-header--light .branding__name {
      fill: #fff;
      color: #fff; }

.page-header-wrapper {
  position: relative; }

@keyframes header-show-menu {
  99% {
    background-color: transparent; }
  100% {
    background-color: #E01220; } }

.page-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 30;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 24px; }
  @media (min-width: 720px) {
    .page-menu {
      left: 50%; } }
  .page-menu:before {
    opacity: 0;
    content: '';
    position: fixed;
    display: block;
    pointer-events: none;
    width: 100%;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #E01220; }
    @media (min-width: 720px) {
      .page-menu:before {
        width: 50%; } }
  .page-menu__content {
    position: relative;
    z-index: 2;
    color: #fff;
    max-width: 555px;
    padding-top: 49px;
    padding-left: 24px;
    padding-right: 24px; }
    @media (min-width: 960px) {
      .page-menu__content {
        padding-top: 109px;
        padding-left: 60px;
        padding-right: 60px; } }
    .page-menu__content.ng-enter {
      animation: fade-in 300ms cubic-bezier(0, 0, 0.1, 1) both; }
  .page-menu__item {
    display: inline-block;
    color: #fff;
    border-color: transparent;
    margin-right: 24px;
    margin-bottom: 24px; }
    .page-menu__item:hover, .page-menu__item:focus {
      color: #fff;
      border-color: #fff; }
    .page-menu__item--promo {
      margin: 12px 0; }
  .page-menu__promo {
    border-bottom: 3px solid #ce111d;
    padding-bottom: 48px;
    margin-bottom: 60px; }
  .page-menu__demoted {
    padding-bottom: 24px; }
  .page-menu__backdrop {
    cursor: pointer;
    display: none; }
    @media (min-width: 720px) {
      .page-menu__backdrop {
        display: block; } }
  .page-menu.ng-enter {
    animation: no-anim 650ms; }
    .page-menu.ng-enter:before {
      animation: menu-background-flip 300ms linear; }
  .page-menu--visible:before {
    opacity: 1; }

@keyframes menu-background-flip {
  0% {
    opacity: 1;
    transform: translateX(100%); }
  70% {
    transform: translateX(40%) skewX(5deg); }
  100% {
    opacity: 1;
    transform: translateX(0); } }

.page-content {
  padding-top: -11px; }
  @media (min-width: 720px) {
    .page-content {
      padding-top: 49px; } }

/*
Sections

Most modifiers can be combined.
Note: Be careful with combining `tight`, don't combine it with `focus`.

Example: {type: isolated} Default page section
    <section class="page-section">
        <div class="container  container--tight">
            <h2>Default page section</h2>
        </div>
    </section>

Example: {type: isolated} `tight`
    <section class="page-section  page-section--tight">
        <h2>A tight section</h2>
        <p>Good for pure content</p>
    </section>

Example: {type: isolated} `focus`
    <section class="page-section  page-section--focus">
        <div class="container  container--tight">
            <h2>Focus section</h2>
            <p>Used for making the content stand out slightly from the rest of the page</p>
        </div>
    </section>

Example: {type: isolated} `center`
    <section class="page-section  page-section--center">
        <h2>Centered content</h2>
    </section>

Example: {type: isolated} `center-lg`
    <section class="page-section  page-section--center-lg">
        <h2>Centered content (Only for large screens)</h2>
    </section>

Example: {type: isolated} `spaced`
    <section class="page-section  page-section--spaced">
        <div class="container  container--tight">
            <h2>Spaced section</h2>
            <p>Used to give the conent more air, which gives it more focus.</p>
        </div>
    </section>

Example: {type: isolated} `outlined`
    <section class="page-section  page-section--outlined">
        <div class="container  container--tight">
            <h2>Adds a line above</h2>
        </div>
    </section>

Example: {type: isolated} `shaded`
    <section class="page-section  page-section--shaded">
        <div class="container  container--tight">
            <h2>Becomes slightly shaded</h2>
        </div>
    </section>

Example: {type: isolated} `last`
    <section class="page-section  page-section--last">
        <div class="container  container--tight">
            <h2>No spacing below</h2>
            <p>Used at the bottom of the page mostlye</p>
        </div>
    </section>

Example: {type: isolated} ievv-designer spacing fixes
    <section class="page-section page-section--wysiwygtext">
        <div class="container  container--tight">
            <p>See this list below:</p>
        </div>
    </section>
    <section class="page-section  page-section--flatlist">
        <div class="container  container--tight">
            <ul class="list">
                <li>Example 1</li>
                <li>Example 2</li>
                <li>Example 3</li>
            </ul>
        </div>
    </section>
    <section class="page-section page-section--wysiwygtext">
        <div class="container  container--tight">
            <p>See this list over</p>
        </div>
    </section>

Styleguide layout.page-section
*/
.page-section {
  padding-top: 21px;
  padding-bottom: 21px; }
  @media (min-width: 720px) {
    .page-section {
      padding-top: 34px;
      padding-bottom: 34px; } }
  .page-section--tight {
    margin: 0 auto;
    padding-left: 12px;
    padding-right: 12px;
    max-width: 740px; }
    @media (min-width: 440px) {
      .page-section--tight {
        padding-left: 24px;
        padding-right: 24px; } }
    @media (min-width: 720px) {
      .page-section--tight {
        padding-left: 60px;
        padding-right: 60px; } }
    .page-section--tight .adminui-page-section,
    .page-section--tight .container {
      margin: 0;
      padding: 0;
      max-width: none; }
  .page-section--focus {
    background-color: #fff; }
  .page-section--center {
    text-align: center; }
  @media (min-width: 720px) {
    .page-section--center-md {
      text-align: center; } }
  @media (min-width: 960px) {
    .page-section--center-lg {
      text-align: center; } }
  .page-section--spaced {
    padding-top: 28px;
    padding-bottom: 28px; }
    @media (min-width: 720px) {
      .page-section--spaced {
        padding-top: 56px;
        padding-bottom: 56px; } }
  .page-section--spaceless {
    padding-top: 0;
    padding-bottom: 0; }
    @media (min-width: 720px) {
      .page-section--spaceless {
        padding-top: 0;
        padding-bottom: 0; } }
  .page-section--promo {
    color: #fff;
    background-color: #E01220; }
  .page-section--outlined {
    border-top: 3px solid #cbcbca;
    border-color: #eeeeef; }
  .page-section--last {
    margin-bottom: 0; }
    .page-section--last + .care-question {
      margin-top: 0; }
  .page-section--shaded {
    background-color: #eeeeef; }
  .page-section__title {
    margin: 0 auto;
    padding-left: 12px;
    padding-right: 12px;
    max-width: 740px;
    text-align: left; }
    @media (min-width: 440px) {
      .page-section__title {
        padding-left: 24px;
        padding-right: 24px; } }
    @media (min-width: 720px) {
      .page-section__title {
        padding-left: 60px;
        padding-right: 60px; } }
  .page-section__toggle {
    position: relative;
    display: block;
    width: 100%;
    padding-right: 24px;
    margin-bottom: 0;
    text-align: inherit; }
    .page-section__toggle:hover, .page-section__toggle:focus {
      color: #ce111d; }
    .page-section__toggle:after {
      content: '';
      position: absolute;
      display: block;
      right: 0;
      top: 50%;
      margin-top: -5px;
      transition: all 300ms cubic-bezier(0, 0, 0.1, 1); }
    @media (min-width: 720px) {
      .page-section__toggle {
        display: none; } }
  .page-section--collapsable-sm {
    border-bottom: 3px solid #cbcbca;
    border-color: #eeeeef; }
    @media (min-width: 720px) {
      .page-section--collapsable-sm {
        border-bottom: 0; } }
    .page-section--collapsable-sm .page-section__title,
    .page-section--collapsable-sm .page-section__content {
      display: none;
      margin-top: 21px; }
      @media (min-width: 720px) {
        .page-section--collapsable-sm .page-section__title,
        .page-section--collapsable-sm .page-section__content {
          display: block; } }
  .page-section--expanded .page-section__content {
    display: block; }
  .page-section--expanded .page-section__toggle:after {
    transform: rotate(-180deg); }

.page-section--wysiwygtext + .page-section--flatlist,
.page-section--flatlist + .page-section--wysiwygtext {
  padding-top: 0;
  margin-top: -21px;
  margin-bottom: -21px; }
  @media (min-width: 720px) {
    .page-section--wysiwygtext + .page-section--flatlist,
    .page-section--flatlist + .page-section--wysiwygtext {
      padding-top: 0;
      margin-top: -34px;
      margin-bottom: -34px; } }

/* Page cover

Example: {type: isolated} Minimal example

    <header class="page-cover">
        <h1 class="page-cover__title">The title</h1>
    </header>

Example: {type: isolated} With description

    <header class="page-cover">
        <h1 class="page-cover__title">The title</h1>
        <p class="page-cover__description">The description</p>
    </header>

Example: {type: isolated} With large description

    <header class="page-cover">
        <h1 class="page-cover__title">The title</h1>
        <p class="page-cover__description  page-cover__description--large">The description</p>
    </header>

Example: {type: isolated} With inline elements in description

    <header class="page-cover">
        <h1 class="page-cover__title">The title</h1>
        <p class="page-cover__description">
            The <strong class="page-cover__strong">awesome</strong>
            <a class="page-cover__link" href="#">description</a>
        </p>
    </header>


Example: {type: isolated} --transparent

    <header class="page-cover page-cover--transparent">
        <h1 class="page-cover__title">The title</h1>
    </header>


Example: {type: isolated} --light

    <header class="page-cover page-cover--light">
        <h1 class="page-cover__title">The title</h1>
    </header>


Styleguide layout.page-cover
*/
.page-cover {
  position: relative;
  padding-top: 84px;
  padding-bottom: 35px;
  text-align: center;
  color: #fff;
  background-color: #E01220; }
  @media print {
    .page-cover {
      background-color: transparent;
      color: #000; } }
  @media (min-width: 720px) {
    .page-cover {
      padding-top: 77px;
      padding-bottom: 84px; } }
  .page-cover__intro-title {
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    font-size: 16px;
    line-height: 21px; }
    @media screen and (min-width: 440px) {
      .page-cover__intro-title {
        font-size: 19px;
        line-height: 28px; } }
  .page-cover__title {
    margin: 0 auto;
    padding-left: 12px;
    padding-right: 12px;
    max-width: 1110px;
    position: relative;
    width: 100%;
    z-index: 2;
    margin-bottom: 7px; }
    @media (min-width: 440px) {
      .page-cover__title {
        padding-left: 24px;
        padding-right: 24px; } }
    @media (min-width: 720px) {
      .page-cover__title {
        padding-left: 60px;
        padding-right: 60px; } }
    .page-cover__title--small {
      font-size: 19px;
      line-height: 28px; }
      @media screen and (min-width: 440px) {
        .page-cover__title--small {
          font-size: 23px;
          line-height: 28px; } }
    .page-cover__title--medium {
      font-size: 28px;
      line-height: 35px; }
      @media screen and (min-width: 440px) {
        .page-cover__title--medium {
          font-size: 36px;
          line-height: 49px; } }
      @media screen and (min-width: 720px) {
        .page-cover__title--medium {
          font-size: 40px;
          line-height: 49px; } }
    .page-cover__title:only-child {
      margin-bottom: 0; }
    .page-cover__title a {
      font-style: italic;
      color: inherit;
      border-color: inherit;
      border-width: 3px; }
  .page-cover__description {
    margin: 0 auto;
    padding-left: 12px;
    padding-right: 12px;
    max-width: 740px;
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    font-size: 19px;
    line-height: 28px;
    width: 100%;
    position: relative;
    z-index: 2; }
    @media (min-width: 440px) {
      .page-cover__description {
        padding-left: 24px;
        padding-right: 24px; } }
    @media (min-width: 720px) {
      .page-cover__description {
        padding-left: 60px;
        padding-right: 60px; } }
    @media screen and (min-width: 440px) {
      .page-cover__description {
        font-size: 23px;
        line-height: 28px; } }
    .page-cover__description strong,
    .page-cover__description i,
    .page-cover__description em {
      font-family: "Noe Text", Helvetica, sans-serif;
      font-weight: bold;
      font-size: 1.07em;
      font-style: italic; }
      .page-cover__description strong.unstyled,
      .page-cover__description i.unstyled,
      .page-cover__description em.unstyled {
        font-style: inherit;
        font-weight: inherit;
        font-family: inherit;
        font-size: inherit; }
    .page-cover__description--tight {
      margin: 0 auto;
      padding-left: 12px;
      padding-right: 12px;
      max-width: 740px; }
      @media (min-width: 440px) {
        .page-cover__description--tight {
          padding-left: 24px;
          padding-right: 24px; } }
      @media (min-width: 720px) {
        .page-cover__description--tight {
          padding-left: 60px;
          padding-right: 60px; } }
    .page-cover__description--large {
      font-size: 19px;
      line-height: 28px; }
      @media screen and (min-width: 440px) {
        .page-cover__description--large {
          font-size: 23px;
          line-height: 28px; } }
    .page-cover__description--title {
      font-family: "Noe Text", Helvetica, sans-serif;
      font-size: 28px;
      line-height: 35px; }
      @media screen and (min-width: 440px) {
        .page-cover__description--title {
          font-size: 36px;
          line-height: 49px; } }
      @media screen and (min-width: 720px) {
        .page-cover__description--title {
          font-size: 40px;
          line-height: 49px; } }
  .page-cover__content {
    margin: 0 auto;
    padding-left: 12px;
    padding-right: 12px;
    max-width: 1110px;
    position: relative;
    z-index: 2; }
    @media (min-width: 440px) {
      .page-cover__content {
        padding-left: 24px;
        padding-right: 24px; } }
    @media (min-width: 720px) {
      .page-cover__content {
        padding-left: 60px;
        padding-right: 60px; } }
    .page-cover__content--tight {
      margin: 0 auto;
      padding-left: 12px;
      padding-right: 12px;
      max-width: 620px;
      text-align: left; }
      @media (min-width: 440px) {
        .page-cover__content--tight {
          padding-left: 24px;
          padding-right: 24px; } }
      @media (min-width: 720px) {
        .page-cover__content--tight {
          padding-left: 60px;
          padding-right: 60px; } }
      .page-cover__content--tight .page-cover__title,
      .page-cover__content--tight .page-cover__description {
        padding: 0;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0; }
  .page-cover__figure {
    margin: 0 auto;
    padding-left: 12px;
    padding-right: 12px;
    max-width: 740px;
    position: relative;
    max-height: 90vh;
    overflow: hidden;
    margin-top: -14px;
    margin-bottom: 14px; }
    @media (min-width: 440px) {
      .page-cover__figure {
        padding-left: 24px;
        padding-right: 24px; } }
    @media (min-width: 720px) {
      .page-cover__figure {
        padding-left: 60px;
        padding-right: 60px; } }
    @media (min-width: 720px) {
      .page-cover__figure {
        margin-top: -35px;
        margin-bottom: 28px; } }
    .page-cover__figure--full {
      max-width: none;
      padding: 0;
      height: calc((70vh / 2) + (80vw / 2));
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover; }
      .page-cover__figure--full .page-cover__image {
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; }
  .page-cover__image {
    display: block;
    max-height: 100%; }
  .page-cover__back {
    display: none; }
  .page-cover__back-link {
    display: inline-flex;
    align-items: center;
    position: relative;
    color: inherit;
    border: 0;
    margin-bottom: 21px; }
  .page-cover__back-icon {
    margin-right: 12px;
    margin-top: -0.25em; }
  .page-cover__introduction {
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 15px;
    line-height: 21px; }
    @media screen and (min-width: 720px) {
      .page-cover__introduction {
        font-size: 16px;
        line-height: 21px; } }
  .page-cover__politician-figure {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    overflow: hidden;
    justify-content: flex-end;
    margin-left: auto; }
    @media (min-width: 440px) {
      .page-cover__politician-figure {
        width: 161px;
        height: 161px; } }
    @media (min-width: 720px) {
      .page-cover__politician-figure {
        margin-right: auto;
        width: 245px;
        height: 245px; } }
    @supports (object-fit: cover) {
      .page-cover__politician-figure:not(.page-cover__politician-figure--outlined) .page-cover__politician-image {
        width: 100%;
        height: 100%;
        object-fit: cover; } }
    .page-cover__politician-figure--outlined {
      display: flex;
      align-items: flex-end;
      margin-top: -24px;
      width: 40%;
      height: auto;
      overflow: visible;
      border-radius: 0; }
  .page-cover--politician {
    padding-top: 112px;
    padding-bottom: 0;
    text-align: left; }
    @media (min-width: 960px) {
      .page-cover--politician {
        min-height: 406px; } }
    .page-cover--politician .page-cover__content {
      display: flex; }
    .page-cover--politician .page-cover__politician {
      align-self: center;
      width: 60%;
      padding-bottom: 63px; }
    .page-cover--politician .page-cover__politician-image {
      display: block;
      max-height: 343px; }
    .page-cover--politician .page-cover__title,
    .page-cover--politician .page-cover__description {
      padding: 0;
      width: auto;
      max-width: none; }
  .page-cover--full {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh; }
    .page-cover--full .page-cover__title {
      margin-top: 1vh; }
  .page-cover--transparent {
    color: #E01220;
    background-color: transparent;
    padding-bottom: 35px; }
    @media (min-width: 720px) {
      .page-cover--transparent {
        padding-top: 140px;
        padding-bottom: 28px; } }
  .page-cover--light {
    color: #E01220;
    background-color: #fff; }
    @media (min-width: 720px) {
      .page-cover--light {
        padding-top: 140px; } }
  .page-cover--article {
    padding-top: 0;
    padding-bottom: 0;
    color: #fff;
    background-color: transparent;
    text-align: left; }
    .page-cover--article .page-cover__figure {
      margin: 0; }
    .page-cover--article .page-cover__title {
      position: relative;
      z-index: 3;
      font-size: 38px;
      line-height: 42px;
      padding: 0;
      margin: 0;
      max-width: 100%;
      margin-bottom: 14px; }
      @media screen and (min-width: 720px) {
        .page-cover--article .page-cover__title {
          font-size: 64px;
          line-height: 77px; } }
    .page-cover--article .page-cover__description {
      position: relative;
      z-index: 3;
      padding: 0;
      margin: 0;
      max-width: 100%;
      margin: 0; }
    .page-cover--article .container {
      width: 100%; }
    .page-cover--article .page-cover__content-wrapper {
      position: absolute;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
      padding-bottom: 60px;
      text-shadow: 0 2px 20px rgba(0, 0, 0, 0.2); }
      .page-cover--article .page-cover__content-wrapper:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0.6;
        background-color: black; }
        @supports (mix-blend-mode: multiply) {
          .page-cover--article .page-cover__content-wrapper:before {
            opacity: 0.3;
            mix-blend-mode: multiply; } }
    @media (min-width: 720px) {
      .page-cover--article {
        padding-bottom: 0; } }
  .page-cover--arbeid, .page-cover--helse, .page-cover--klima, .page-cover--skole, .page-cover--kunnskap, .page-cover--mangfold, .page-cover--transport, .page-cover--kontor, .page-cover--klima-2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    background-repeat: no-repeat;
    background-position: 6px calc(50% + 30px);
    background-size: 90px 120px;
    padding-left: 90px; }
    @media (min-width: 440px) {
      .page-cover--arbeid, .page-cover--helse, .page-cover--klima, .page-cover--skole, .page-cover--kunnskap, .page-cover--mangfold, .page-cover--transport, .page-cover--kontor, .page-cover--klima-2 {
        background-position: 12px calc(50% + 30px);
        background-size: 120px 160px;
        padding-left: 126px; } }
    @media (min-width: 720px) {
      .page-cover--arbeid, .page-cover--helse, .page-cover--klima, .page-cover--skole, .page-cover--kunnskap, .page-cover--mangfold, .page-cover--transport, .page-cover--kontor, .page-cover--klima-2 {
        padding-left: 0;
        height: 400px;
        background-position: center bottom;
        background-size: 3678px 400px; } }
    .page-cover--arbeid .page-cover__title,
    .page-cover--arbeid .page-cover__description, .page-cover--helse .page-cover__title,
    .page-cover--helse .page-cover__description, .page-cover--klima .page-cover__title,
    .page-cover--klima .page-cover__description, .page-cover--skole .page-cover__title,
    .page-cover--skole .page-cover__description, .page-cover--kunnskap .page-cover__title,
    .page-cover--kunnskap .page-cover__description, .page-cover--mangfold .page-cover__title,
    .page-cover--mangfold .page-cover__description, .page-cover--transport .page-cover__title,
    .page-cover--transport .page-cover__description, .page-cover--kontor .page-cover__title,
    .page-cover--kontor .page-cover__description, .page-cover--klima-2 .page-cover__title,
    .page-cover--klima-2 .page-cover__description {
      width: 100%;
      padding: 0 12px;
      margin: 0 auto; }
      @media (min-width: 720px) {
        .page-cover--arbeid .page-cover__title,
        .page-cover--arbeid .page-cover__description, .page-cover--helse .page-cover__title,
        .page-cover--helse .page-cover__description, .page-cover--klima .page-cover__title,
        .page-cover--klima .page-cover__description, .page-cover--skole .page-cover__title,
        .page-cover--skole .page-cover__description, .page-cover--kunnskap .page-cover__title,
        .page-cover--kunnskap .page-cover__description, .page-cover--mangfold .page-cover__title,
        .page-cover--mangfold .page-cover__description, .page-cover--transport .page-cover__title,
        .page-cover--transport .page-cover__description, .page-cover--kontor .page-cover__title,
        .page-cover--kontor .page-cover__description, .page-cover--klima-2 .page-cover__title,
        .page-cover--klima-2 .page-cover__description {
          max-width: 440px; } }
    .page-cover--arbeid .page-cover__title, .page-cover--helse .page-cover__title, .page-cover--klima .page-cover__title, .page-cover--skole .page-cover__title, .page-cover--kunnskap .page-cover__title, .page-cover--mangfold .page-cover__title, .page-cover--transport .page-cover__title, .page-cover--kontor .page-cover__title, .page-cover--klima-2 .page-cover__title {
      font-family: "Maison Neue", Helvetica, sans-serif;
      font-weight: bold;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      font-family: "Maison Neue", Helvetica, sans-serif;
      font-weight: bold;
      font-size: 16px;
      line-height: 21px;
      margin-bottom: 7px; }
      @media screen and (min-width: 440px) {
        .page-cover--arbeid .page-cover__title, .page-cover--helse .page-cover__title, .page-cover--klima .page-cover__title, .page-cover--skole .page-cover__title, .page-cover--kunnskap .page-cover__title, .page-cover--mangfold .page-cover__title, .page-cover--transport .page-cover__title, .page-cover--kontor .page-cover__title, .page-cover--klima-2 .page-cover__title {
          font-size: 19px;
          line-height: 28px; } }
    .page-cover--arbeid .page-cover__description, .page-cover--helse .page-cover__description, .page-cover--klima .page-cover__description, .page-cover--skole .page-cover__description, .page-cover--kunnskap .page-cover__description, .page-cover--mangfold .page-cover__description, .page-cover--transport .page-cover__description, .page-cover--kontor .page-cover__description, .page-cover--klima-2 .page-cover__description {
      font-family: "Noe Text", Helvetica, sans-serif;
      font-size: 28px;
      line-height: 35px; }
      @media screen and (min-width: 440px) {
        .page-cover--arbeid .page-cover__description, .page-cover--helse .page-cover__description, .page-cover--klima .page-cover__description, .page-cover--skole .page-cover__description, .page-cover--kunnskap .page-cover__description, .page-cover--mangfold .page-cover__description, .page-cover--transport .page-cover__description, .page-cover--kontor .page-cover__description, .page-cover--klima-2 .page-cover__description {
          font-size: 36px;
          line-height: 49px; } }
      @media screen and (min-width: 720px) {
        .page-cover--arbeid .page-cover__description, .page-cover--helse .page-cover__description, .page-cover--klima .page-cover__description, .page-cover--skole .page-cover__description, .page-cover--kunnskap .page-cover__description, .page-cover--mangfold .page-cover__description, .page-cover--transport .page-cover__description, .page-cover--kontor .page-cover__description, .page-cover--klima-2 .page-cover__description {
          font-size: 40px;
          line-height: 49px; } }
  .page-cover--arbeid {
    background-image: url("../../apmedia/images/illustrations/arbeid--small.svg"); }
    @media (min-width: 720px) {
      .page-cover--arbeid {
        background-image: url("../../apmedia/images/illustrations/arbeid--large.svg"); } }
  .page-cover--helse {
    background-image: url("../../apmedia/images/illustrations/helse--small.svg"); }
    @media (min-width: 720px) {
      .page-cover--helse {
        background-image: url("../../apmedia/images/illustrations/helse--large.svg"); } }
  .page-cover--skole {
    background-image: url("../../apmedia/images/illustrations/skole--small.svg"); }
    @media (min-width: 720px) {
      .page-cover--skole {
        background-image: url("../../apmedia/images/illustrations/skole--large.svg"); } }
  .page-cover--klima {
    background-image: url("../../apmedia/images/illustrations/klima--small.svg"); }
    @media (min-width: 720px) {
      .page-cover--klima {
        height: 420px;
        padding-bottom: 104px;
        background-image: url("../../apmedia/images/illustrations/klima--large.svg"); } }
    @media (max-width: 440px) {
      .page-cover--klima .page-cover__description {
        font-size: 1.5em;
        overflow-wrap: break-word;
        word-break: break-word;
        hyphens: auto; } }
  .page-cover--kunnskap {
    background-image: url("../../apmedia/images/illustrations/kunnskap--small.svg"); }
    @media (min-width: 720px) {
      .page-cover--kunnskap {
        background-image: url("../../apmedia/images/illustrations/kunnskap--large.svg"); } }
    @media (min-width: 720px) {
      .page-cover--kunnskap .page-cover__title,
      .page-cover--kunnskap .page-cover__description {
        max-width: 470px; } }
    @media (max-width: 440px) {
      .page-cover--kunnskap .page-cover__description {
        font-size: 1.5em;
        overflow-wrap: break-word;
        word-break: break-word;
        hyphens: auto; } }
  .page-cover--mangfold {
    background-image: url("../../apmedia/images/illustrations/mangfold--small.svg"); }
    @media (min-width: 720px) {
      .page-cover--mangfold {
        background-image: url("../../apmedia/images/illustrations/mangfold--large.svg"); } }
  .page-cover--transport {
    background-image: url("../../apmedia/images/illustrations/transport--small.svg"); }
    @media (min-width: 720px) {
      .page-cover--transport {
        background-image: url("../../apmedia/images/illustrations/transport--large.svg"); } }
  .page-cover--kontor {
    background-image: url("../../apmedia/images/illustrations/kontor--small.svg"); }
    @media (min-width: 720px) {
      .page-cover--kontor {
        background-image: url("../../apmedia/images/illustrations/kontor--large.svg"); } }
  .page-cover--klima-2 {
    background-image: url("../../apmedia/images/illustrations/klima-2--small.svg"); }
    @media (min-width: 720px) {
      .page-cover--klima-2 {
        background-image: url("../../apmedia/images/illustrations/klima-2--large.svg"); } }
  .page-cover__illustrations {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 500px;
    overflow: hidden; }
  .page-cover__illustration {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 250% auto;
    background-position: bottom;
    background-repeat: no-repeat; }
    @media (min-width: 440px) {
      .page-cover__illustration {
        background-size: 200% auto; } }
    @media (min-width: 720px) {
      .page-cover__illustration {
        background-size: 150% auto; } }
    @media (min-width: 960px) {
      .page-cover__illustration {
        background-size: 100% auto; } }
  .page-cover--klima-2.0 {
    padding-top: 175px;
    min-height: 500px;
    background-color: #E01220; }

.page-footer {
  position: relative;
  padding-top: 63px;
  padding-bottom: 63px;
  color: #fff;
  background-color: #E01220; }
  .page-footer__wrapper {
    margin: 0 auto;
    padding-left: 12px;
    padding-right: 12px;
    max-width: 1400px; }
    @media (min-width: 440px) {
      .page-footer__wrapper {
        padding-left: 24px;
        padding-right: 24px; } }
    @media (min-width: 720px) {
      .page-footer__wrapper {
        padding-left: 60px;
        padding-right: 60px; } }
  .page-footer__content {
    display: flex;
    flex-wrap: wrap;
    width: 100%; }
    @media (min-width: 960px) {
      .page-footer__content {
        flex-wrap: nowrap; } }
  .page-footer__section {
    width: 100%;
    padding-top: 28px;
    padding-bottom: 28px; }
    @media (min-width: 960px) {
      .page-footer__section {
        padding-left: 42px;
        padding-right: 42px; } }
    @media (min-width: 960px) {
      .page-footer__section--nav {
        order: 2;
        border-left: 3px solid #ce111d;
        border-right: 3px solid #ce111d; } }
    @media (min-width: 960px) {
      .page-footer__section--some {
        order: 3;
        padding-right: 0; } }
    @media (min-width: 960px) {
      .page-footer__section--contact {
        order: 1;
        padding-left: 0; } }
  .page-footer__link-icon {
    vertical-align: middle;
    width: 30px; }
  .page-footer__title {
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 15px;
    line-height: 21px;
    margin-bottom: 28px; }
    @media screen and (min-width: 720px) {
      .page-footer__title {
        font-size: 16px;
        line-height: 21px; } }
  .page-footer__address {
    font-size: 15px;
    line-height: 21px;
    margin: 28px 0 0; }
    @media screen and (min-width: 720px) {
      .page-footer__address {
        font-size: 16px;
        line-height: 21px; } }
  .page-footer__pes {
    font-size: 15px;
    line-height: 21px;
    margin: 28px 0 0; }
    @media screen and (min-width: 720px) {
      .page-footer__pes {
        font-size: 16px;
        line-height: 21px; } }
  .page-footer__pesimage {
    display: inline-block;
    width: 170px;
    max-width: 100%;
    height: auto;
    background-color: #fff;
    border: 3px solid #fff; }
  .page-footer__link {
    color: #fff;
    border-color: #ce111d; }
    .page-footer__link:hover, .page-footer__link:focus {
      color: #fff;
      border-color: #fff; }
    .page-footer__link--promoted {
      font-family: "Noe Text", Helvetica, sans-serif;
      font-weight: bold;
      font-size: 19px;
      line-height: 28px;
      display: inline-block;
      margin-bottom: 7px; }
      @media screen and (min-width: 440px) {
        .page-footer__link--promoted {
          font-size: 23px;
          line-height: 28px; } }
  .page-footer__item {
    margin-bottom: 7px; }
  .page-footer__branding {
    text-align: left;
    padding-bottom: 35px; }
  .page-footer__separator {
    display: inline-block;
    position: relative;
    vertical-align: top;
    top: 0.1em;
    height: 1.5em;
    width: 3px;
    margin: 0 0.8em;
    background-color: #ce111d; }
  .page-footer--open {
    position: fixed;
    z-index: 30;
    top: 0;
    padding-top: 77px;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    border-top: 0;
    color: #fff;
    -webkit-overflow-scrolling: touch;
    -webkit-transform: translate3d(0, 0, 0);
    background-color: transparent;
    animation: footer-open-background 200ms ease-out forwards; }
    .page-footer--open:before {
      content: '';
      position: absolute;
      display: block;
      top: -95vmax;
      right: -95vmax;
      width: 200vmax;
      height: 200vmax;
      border-radius: 50%;
      background-color: #E01220;
      animation: footer-open 300ms ease-out both; }
      @media (min-width: 440px) {
        .page-footer--open:before {
          right: -95vmax; } }
      @media (min-width: 720px) {
        .page-footer--open:before {
          right: -92vmax; } }
    .page-footer--open .page-footer__branding {
      display: none; }
    .page-footer--open .page-footer__wrapper {
      position: relative;
      z-index: 2; }
    .page-footer--open .page-footer__section--nav .page-footer__item {
      animation: fadeIn 1s ease-in both; }

@keyframes footer-open {
  from {
    opacity: 0.8;
    transform: scale(0.1); } }

@keyframes footer-open-background {
  60% {
    background-color: transparent; }
  100% {
    background-color: #E01220; } }

.payments-table {
  border: 1px solid black;
  border-collapse: collapse; }
  .payments-table--header, .payments-table--data {
    border: 1px solid black;
    border-collapse: collapse;
    padding: 15px; }

.back-nav {
  font-family: "Maison Neue", Helvetica, sans-serif;
  font-weight: bold;
  font-size: 15px;
  line-height: 21px;
  display: inline-block;
  border: 0;
  color: #686969;
  margin-bottom: 28px; }
  @media screen and (min-width: 720px) {
    .back-nav {
      font-size: 16px;
      line-height: 21px; } }
  @media (min-width: 720px) {
    .back-nav {
      margin-bottom: 35px; } }
  .back-nav:before {
    content: '';
    margin-top: 1px;
    margin-right: 6px;
    transform: scale(0.8);
    opacity: 0.7; }
  .back-nav:hover, .back-nav:focus {
    color: #E01220; }
    .back-nav:hover:before, .back-nav:focus:before {
      opacity: 1; }
  .back-nav--in-page-cover {
    margin-top: 28px;
    margin-bottom: 0; }
    @media (min-width: 720px) {
      .back-nav--in-page-cover {
        margin-bottom: 0;
        margin-top: 35px; } }

/* Page list

Example: {type: isolated}
    <ul class="page-list">
        <li class="page-list__item">
            <h2 class="page-list__title">
                <a href="" class="page-list__link">Landsmøtet</a>
            </h2>
            <p class="page-list__description">Landsmøtet er partiets høyeste myndighet, og avholdes annethvert år.</p>
        </li>

        <li class="page-list__item">
            <h2 class="page-list__title">
                <a href="" class="page-list__link">Landsstyret</a>
            </h2>
            <p class="page-list__description">Landsstyret er partiets høyeste myndighet mellom landsmøtene.</p>
        </li>
    </ul>
Styleguide components.pagelist
*/
.page-list {
  margin: 0 auto;
  padding-left: 12px;
  padding-right: 12px;
  max-width: 740px;
  margin-bottom: 28px; }
  @media (min-width: 440px) {
    .page-list {
      padding-left: 24px;
      padding-right: 24px; } }
  @media (min-width: 720px) {
    .page-list {
      padding-left: 60px;
      padding-right: 60px; } }
  .page-list:empty {
    display: none; }
  .page-list__item {
    position: relative;
    width: 100%;
    padding: 14px 42px 28px;
    padding-right: 24px; }
    .page-list__item:before {
      content: '';
      position: absolute;
      margin-top: 9px;
      left: 0; }
  .page-list__title {
    font-size: 19px;
    line-height: 28px;
    margin-bottom: 7px; }
    @media screen and (min-width: 440px) {
      .page-list__title {
        font-size: 23px;
        line-height: 28px; } }
  .page-list__description {
    color: #686969;
    margin-bottom: 0; }
  .page-list__timestamp {
    font-family: "Maison Neue Mono", Helvetica, sans-serif;
    font-weight: normal;
    font-size: 15px;
    line-height: 21px;
    display: inline-block;
    color: #686969;
    margin-bottom: 6px; }
    @media screen and (min-width: 720px) {
      .page-list__timestamp {
        font-size: 16px;
        line-height: 21px; } }
  .page-list--tight .page-list__item {
    padding: 0 42px 28px; }

/* Event list

Example: {type: isolated} Default
    <div class="page-section  page-section--tight">
        <ul class="event-list">
            <li class="event-list__item">
                <time class="event-list__date">
                    <span class="event-list__day">25</span>
                    <span class="event-list__month">nov</span>
                </time>
                <div class="event-list__content">
                    <h3 class="event-list__title">
                        <a href="/event/" class="event-list__link">Utvidet styremøte</a>
                    </h3>
                    <p class="event-list__time">
                        25. mai, kl 19.00 &mdash; 21.00
                    </p>
                </div>
            </li>
            <li class="event-list__item">
                <time class="event-list__date">
                    <span class="event-list__day">26</span>
                    <span class="event-list__month">nov</span>
                </time>
                <div class="event-list__content">
                    <h3 class="event-list__title">
                        <a href="/event/" class="event-list__link">Representantskapsmøte</a>
                    </h3>
                    <p class="event-list__time">
                        26. mai, kl 13.00 &mdash; 14.00
                    </p>
                </div>
            </li>
        </ul>
    </div>

Example: {type: isolated} Small
    <div class="page-section  page-section--tight">
        <ul class="event-list  event-list--small">
            <li class="event-list__item">
                <time class="event-list__date">
                    <span class="event-list__day">25</span>
                    <span class="event-list__month">nov</span>
                </time>
                <div class="event-list__content">
                    <h3 class="event-list__title">
                        <a href="/event/" class="event-list__link">Utvidet styremøte</a>
                    </h3>
                    <p class="event-list__time">
                        25. mai, kl 19.00 &mdash; 21.00
                    </p>
                </div>
            </li>
            <li class="event-list__item">
                <time class="event-list__date">
                    <span class="event-list__day">26</span>
                    <span class="event-list__month">nov</span>
                </time>
                <div class="event-list__content">
                    <h3 class="event-list__title">
                        <a href="/event/" class="event-list__link">Representantskapsmøte</a>
                    </h3>
                    <p class="event-list__time">
                        26. mai, kl 13.00 &mdash; 14.00
                    </p>
                </div>
            </li>
        </ul>
    </div>

Example: {type: isolated} Large
    <ul class="event-list  event-list--large">
        <li class="event-list__item">
            <time class="event-list__date">
                <span class="event-list__day">3</span>
                <span class="event-list__month">mai</span>
            </time>
            <div class="event-list__content">
                <h2 class="event-list__title">
                    <a href="" class="event-list__link">Landsmøtet</a>
                </h2>
                <p class="event-list__time">
                    3. mai, kl 19.00 &mdash; 21.00
                </p>
                <p class="event-list__description">
                    It’s about making placeholder text great again. That’s what people want, they want placeholder text to be great again. My placeholder text, I think, is going to end up being very good with women.
                </p>
            </div>
        </li>

        <li class="event-list__item">
            <date class="event-list__date">
                <span class="event-list__day">23</span>
                <span class="event-list__month">mai</span>
            </date>
            <div class="event-list__content">
                <h2 class="event-list__title">
                    <a href="" class="event-list__link">Landsmøtet</a>
                </h2>
                <p class="event-list__time">
                    3. mai, kl 19.00 &mdash; 21.00
                </p>
                <p class="event-list__description">Be careful, or I will spill the beans on your placeholder text. An ‘extremely credible source’ has called my office and told me that Barack Obama’s placeholder text is a fraud.</p>
            </div>
        </li>
    </ul>


Styleguide components.events
*/
.event-list {
  margin-bottom: 56px; }
  .event-list__item {
    position: relative;
    display: flex;
    align-items: flex-start;
    width: 100%;
    margin-bottom: 21px; }
  .event-list__date {
    font-size: 21px;
    line-height: 1;
    width: 60px;
    min-width: 60px;
    padding-top: 0.25em;
    padding-bottom: 0.35em;
    margin-top: -0.21em;
    margin-right: 12px;
    text-align: center;
    color: #686969;
    border: 3px solid #E01220; }
    @media screen and (min-width: 440px) {
      .event-list__date {
        font-size: 26px; } }
    @media screen and (min-width: 720px) {
      .event-list__date {
        font-size: 27px; } }
    @media (min-width: 440px) {
      .event-list__date {
        line-height: 1.1;
        width: 78px;
        min-width: 78px; } }
  .event-list__day {
    font-family: "Noe Text", Helvetica, sans-serif;
    font-weight: bold;
    display: block;
    margin-bottom: 2px; }
  .event-list__month {
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.4em;
    display: block;
    margin-right: -0.16em; }
  .event-list__time {
    font-family: "Maison Neue Mono", Helvetica, sans-serif;
    font-weight: normal;
    font-size: 15px;
    line-height: 21px;
    color: #686969;
    margin-bottom: 0; }
    @media screen and (min-width: 720px) {
      .event-list__time {
        font-size: 16px;
        line-height: 21px; } }
  .event-list__title {
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    font-size: 16px;
    line-height: 21px;
    margin-bottom: 0; }
    @media screen and (min-width: 440px) {
      .event-list__title {
        font-size: 19px;
        line-height: 28px; } }
  .event-list__description {
    color: #686969;
    margin: 0;
    margin-top: 7px;
    margin-left: -78px; }
    @media (min-width: 720px) {
      .event-list__description {
        margin: 0; } }
  .event-list__link {
    border: 0; }
  .event-list--small {
    margin-bottom: 28px; }
    .event-list--small .event-list__title {
      font-family: "Maison Neue", Helvetica, sans-serif;
      font-weight: normal; }
    .event-list--small .event-list__link {
      border-bottom: 2px solid #2f2c2f; }
      .event-list--small .event-list__link:hover, .event-list--small .event-list__link:focus {
        border-color: #ce111d; }
  .event-list--large {
    margin: 0 auto;
    padding-left: 12px;
    padding-right: 12px;
    max-width: 740px;
    margin-bottom: 28px; }
    @media (min-width: 440px) {
      .event-list--large {
        padding-left: 24px;
        padding-right: 24px; } }
    @media (min-width: 720px) {
      .event-list--large {
        padding-left: 60px;
        padding-right: 60px; } }
    .event-list--large .event-list__item {
      margin-bottom: 56px; }
    .event-list--large .event-list__title {
      font-size: 19px;
      line-height: 28px;
      margin-bottom: 7px; }
      @media screen and (min-width: 440px) {
        .event-list--large .event-list__title {
          font-size: 23px;
          line-height: 28px; } }
    .event-list--large .event-list__time {
      margin-bottom: 7px; }
    .event-list--large .event-list__date {
      font-size: 21px;
      line-height: 1;
      width: 66px;
      min-width: 66px;
      margin-top: 0.15em; }
      @media screen and (min-width: 440px) {
        .event-list--large .event-list__date {
          font-size: 26px; } }
      @media screen and (min-width: 720px) {
        .event-list--large .event-list__date {
          font-size: 27px; } }
      @media (min-width: 720px) {
        .event-list--large .event-list__date {
          width: 78px;
          min-width: 78px;
          margin-right: 24px; } }

.inline-action {
  margin-bottom: 24px; }
  .inline-action__input {
    position: relative;
    height: 56px;
    margin: 0;
    margin-bottom: 3px;
    border: 3px solid #cbcbca;
    border-color: #fff; }
    @media (min-width: 720px) {
      .inline-action__input {
        margin-right: 3px;
        margin-bottom: 0; } }
    .inline-action__input--small {
      width: 228px; }
    .inline-action__input--medium {
      width: auto;
      flex-grow: 1; }
  .inline-action__separator {
    padding: 0 12px;
    margin-right: 3px;
    line-height: 56px; }
    .inline-action__separator--dummy {
      line-height: normal;
      visibility: hidden; }
  .inline-action__action {
    height: 56px;
    padding: 0 24px;
    margin: 0; }
  .inline-action__body, .inline-action__labels {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: stretch; }
    @media (min-width: 720px) {
      .inline-action__body, .inline-action__labels {
        flex-direction: row;
        align-items: stretch; } }
  .inline-action__label {
    display: block;
    margin-bottom: 28px; }
    .inline-action__label--small {
      display: none;
      text-align: left;
      padding: 0 15px;
      width: 228px;
      margin-bottom: 6px; }
      @media (min-width: 720px) {
        .inline-action__label--small {
          display: block; } }
  .inline-action--center .inline-action__body,
  .inline-action--center .inline-action__labels {
    align-items: center; }
    @media (min-width: 720px) {
      .inline-action--center .inline-action__body,
      .inline-action--center .inline-action__labels {
        align-items: stretch; } }
  .inline-action--search .inline-action__body {
    flex-direction: row; }
  .inline-action--search .inline-action__input {
    margin-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0; }
  .inline-action--search .inline-action__action {
    padding: 0;
    width: 72px;
    overflow: hidden;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    background-color: #fff; }
    .inline-action--search .inline-action__action:before {
      content: '';
      position: absolute;
      left: 50%;
      top: 50%;
      margin: -9px -10px; }
    .inline-action--search .inline-action__action, .inline-action--search .inline-action__action:hover, .inline-action--search .inline-action__action:focus, .inline-action--search .inline-action__action:active {
      color: transparent; }
    .inline-action--search .inline-action__action:hover, .inline-action--search .inline-action__action:focus, .inline-action--search .inline-action__action:active {
      background-color: #E01220; }
  .inline-action--outlined .inline-action__input {
    border-color: #cccdcc; }
    .inline-action--outlined .inline-action__input:focus {
      border-color: #002B49; }
  .inline-action--darken .inline-action__input,
  .inline-action--darken .inline-action__action {
    border-color: #eeeeef;
    background-color: #eeeeef; }
    .inline-action--darken .inline-action__input:focus,
    .inline-action--darken .inline-action__action:focus {
      border-color: #002B49;
      background-color: #f5f5f5; }
  .inline-action--darken .inline-action__action {
    border-color: #eeeeef;
    background-color: #eeeeef; }
    .inline-action--darken .inline-action__action:hover, .inline-action--darken .inline-action__action:focus {
      border-color: #002B49;
      background-color: #002B49; }

/* Inline links

__This is the modifiers:__
* `promo`,
* `secondary`,
* `left`.

Note: `promo` and `secondary` cannot be combined with each other.

Example: {type: isolated} Normal
    <nav class="inline-links">
        <a href="/arbeid/" class="inline-links__item">Arbeid</a>
        <a href="/helse/" class="inline-links__item">Helse</a>
        <a href="/kunnskap/" class="inline-links__item">Kunnskap</a>
        <a href="/klima/" class="inline-links__item">Klima</a>
    </nav>

Example: {type: isolated} Promo
    <nav class="inline-links  inline-links--promo">
        <a href="/arbeid/" class="inline-links__item">Arbeid</a>
        <a href="/helse/" class="inline-links__item">Helse</a>
        <a href="/kunnskap/" class="inline-links__item">Kunnskap</a>
        <a href="/klima/" class="inline-links__item">Klima</a>
    </nav>

Example: {type: isolated} Secondary
    <nav class="inline-links  inline-links--secondary">
        <a href="/arbeid/" class="inline-links__item">Arbeid</a>
        <a href="/helse/" class="inline-links__item">Helse</a>
        <a href="/kunnskap/" class="inline-links__item">Kunnskap</a>
        <a href="/klima/" class="inline-links__item">Klima</a>
    </nav>

Example: {type: isolated} Left
    <nav class="inline-links  inline-links--left">
        <a href="/arbeid/" class="inline-links__item">Arbeid</a>
        <a href="/helse/" class="inline-links__item">Helse</a>
        <a href="/kunnskap/" class="inline-links__item">Kunnskap</a>
        <a href="/klima/" class="inline-links__item">Klima</a>
    </nav>

Styleguide components.inline-links
*/
.inline-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  margin-bottom: 28px; }
  .inline-links__item {
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    border-radius: 5px;
    padding: 0 12px;
    height: 35px;
    line-height: 35px;
    border: 0;
    color: #fff;
    margin-left: 6px;
    margin-right: 6px;
    margin-bottom: 7px;
    background-color: #E01220; }
    .inline-links__item:hover, .inline-links__item:focus {
      color: #fff;
      background-color: #ce111d; }
  .inline-links--promo {
    margin-bottom: 21px; }
    @media (min-width: 720px) {
      .inline-links--promo {
        margin-bottom: 28px; } }
    .inline-links--promo .inline-links__item {
      font-family: "Noe Text", Helvetica, sans-serif;
      font-weight: bold;
      font-size: 19px;
      line-height: 28px;
      color: #E01220;
      padding: 0;
      margin: 0 12px;
      background-color: transparent;
      height: auto; }
      @media screen and (min-width: 440px) {
        .inline-links--promo .inline-links__item {
          font-size: 23px;
          line-height: 28px; } }
      .inline-links--promo .inline-links__item:hover, .inline-links--promo .inline-links__item:focus {
        color: #2f2c2f; }
  .inline-links--secondary .inline-links__item {
    background-color: #002B49; }
    .inline-links--secondary .inline-links__item:hover, .inline-links--secondary .inline-links__item:focus {
      background-color: #ce111d; }
  .inline-links--left {
    justify-content: flex-start;
    margin-left: -3px;
    margin-right: -3px; }
    .inline-links--left .inline-links__item {
      font-family: "Maison Neue", Helvetica, sans-serif;
      font-weight: normal;
      font-size: 15px;
      padding: 0 12px;
      height: 35px;
      line-height: 35px;
      margin-left: 3px;
      margin-right: 3px; }
      @media screen and (min-width: 720px) {
        .inline-links--left .inline-links__item {
          font-size: 16px; } }

/* Sharing
Example: {type: isolated}
    <section class="page-section  page-section--center  page-section--spaced">
        <h2 class="h3">Hold deg oppdatert</h2>

        <nav class="sharing">
            <a href="http://arbeiderpartiet.no/Aktuelt/Partiet/Lytt-til-Arbeiderpartiets-podkast" class="sharing__item">
                <i class="icon-podcast--secondary  icon-bottom"></i>
                <p class="sharing__text">Podcast</p>
            </a>
            <a href="https://www.facebook.com/Arbeiderpartiet/" class="sharing__item">
                <i class="icon-facebook--secondary  icon-bottom"></i>
                <p class="sharing__text">Facebook</p>
            </a>
            <a href="https://twitter.com/arbeiderpartiet" class="sharing__item">
                <i class="icon-twitter--secondary  icon-bottom"></i>
                <p class="sharing__text">Twitter</p>
            </a>
            <a href="https://www.instagram.com/arbeiderpartiet/" class="sharing__item">
                <i class="icon-instagram--secondary  icon-bottom"></i>
                <p class="sharing__text">Instagram</p>
            </a>
            <a href="https://www.snapchat.com/add/arbeiderpartiet" class="sharing__item">
                <i class="icon-snapchat--secondary  icon-bottom"></i>
                <p class="sharing__text">Snapchat</p>
            </a>
            <a href="..." class="sharing__item">
                <i class="icon-email--secondary  icon-bottom"></i>
                <p class="sharing__text">Nyhetsbrev</p>
            </a>
        </nav>
    </section>

Styleguide components.sharing
*/
.sharing {
  text-align: center;
  margin-top: 7px; }
  .sharing__item {
    font-family: "Noe Text", Helvetica, sans-serif;
    font-weight: bold;
    display: inline-block;
    border-color: transparent;
    margin-left: 18px;
    margin-right: 18px; }
  .sharing__text {
    margin: 12px 0 0; }

.sticky-nav {
  display: none;
  position: relative;
  background-color: #fff; }
  @media (min-width: 720px) {
    .sticky-nav {
      display: block; } }
  @media print and (min-width: 720px) {
    .sticky-nav {
      display: none !important; } }
  .sticky-nav__content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 42px;
    will-change: position;
    transform: translate3d(0, 0, 0);
    white-space: nowrap;
    text-align: center; }
  .sticky-nav__link {
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    font-size: 15px;
    display: inline-block;
    height: 42px;
    line-height: 42px;
    padding: 0 0.8em;
    margin-left: 0.3em;
    margin-right: 0.3em;
    color: #E01220;
    border: 0;
    transition: border-color 300ms cubic-bezier(0, 0, 0.1, 1);
    animation: fade-in 500ms ease-out both;
    animation-delay: 420ms; }
    @media screen and (min-width: 720px) {
      .sticky-nav__link {
        font-size: 16px; } }
    .sticky-nav__link:nth-child(1) {
      animation-delay: 60ms; }
    .sticky-nav__link:nth-child(2) {
      animation-delay: 120ms; }
    .sticky-nav__link:nth-child(3) {
      animation-delay: 180ms; }
    .sticky-nav__link:nth-child(4) {
      animation-delay: 240ms; }
    .sticky-nav__link:nth-child(5) {
      animation-delay: 300ms; }
    .sticky-nav__link:nth-child(6) {
      animation-delay: 360ms; }
    @media (min-width: 960px) {
      .sticky-nav__link {
        padding: 0 1.2em;
        margin-left: 0.6em;
        margin-right: 0.6em; } }
    .sticky-nav__link:hover {
      color: #002B49; }
    .sticky-nav__link--active, .sticky-nav__link--active:hover, .sticky-nav__link--active:focus {
      color: #002B49; }
  .sticky-nav--sticky .sticky-nav__content {
    position: fixed;
    background-color: #fff;
    box-shadow: 0 2px 15px rgba(30, 30, 30, 0.1);
    z-index: 30; }
  .sticky-nav--sticky .sticky-nav__link {
    box-shadow: none; }
    .sticky-nav--sticky .sticky-nav__link--active {
      color: #002B49; }
  .sticky-nav--spaced {
    margin-bottom: 56px; }

/* Newsletter

Example: {type: isolated}
    <form class="newsletter">
        <label for="newsletter_email" class="newsletter__label">Meld deg på vårt nyhetsbrev</label>

        <div class="newsletter__wrapper">
            <input
                type="email"
                class="newsletter__input"
                id="newsletter_email"
                placeholder="ola@nordmann.no"
            />

            <button type="submit" class="newsletter__button">Motta</button>
        </div>
    </form>

Styleguide components.newsletter
*/
.newsletter {
  margin-top: 14px;
  max-width: 420px; }
  .newsletter__label {
    display: block;
    margin-bottom: 7px; }
  .newsletter__wrapper {
    display: flex; }
  .newsletter__input {
    padding-top: 6px;
    padding-bottom: 6px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0; }
  .newsletter__button {
    position: relative;
    overflow: hidden;
    width: 60px;
    color: transparent;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    background-color: #fff; }
    .newsletter__button:before {
      content: '';
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%); }
    .newsletter__button:hover, .newsletter__button:focus {
      background-color: #002B49; }

.ap-search {
  position: relative;
  margin-bottom: 42px;
  outline: 0; }
  @media (min-width: 440px) {
    .ap-search {
      margin-top: 35px; } }
  @media (min-width: 720px) {
    .ap-search {
      margin-bottom: 49px; } }
  .ap-search__form {
    margin: 0 auto;
    padding-left: 12px;
    padding-right: 12px;
    max-width: 620px;
    position: relative;
    display: flex;
    z-index: 3; }
    @media (min-width: 440px) {
      .ap-search__form {
        padding-left: 24px;
        padding-right: 24px; } }
    @media (min-width: 720px) {
      .ap-search__form {
        padding-left: 60px;
        padding-right: 60px; } }
  .ap-search__input {
    height: 56px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    background-color: #eeeeef; }
    .ap-search__input:focus, .ap-search__input:hover {
      background-color: #fff;
      border-color: #eeeeef; }
  .ap-search__button {
    position: relative;
    overflow: hidden;
    width: 72px;
    color: transparent;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    background-color: #eeeeef; }
    .ap-search__button:before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); }
    .ap-search__button:hover, .ap-search__button:focus {
      background-color: #E01220; }
  .ap-search__results {
    animation: results-in 700ms linear both;
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 2;
    text-align: left;
    margin-top: -27px;
    padding: 49px 12px;
    color: #fff;
    background-color: #002B49; }
    @media (min-width: 720px) {
      .ap-search__results {
        padding: 49px 24px; } }
    .ap-search__results.ng-enter .ap-search__secondary:first-child {
      animation: secondary-left-in 250ms cubic-bezier(0, 0, 0.1, 1) both;
      animation-delay: 30ms; }
    .ap-search__results.ng-enter .ap-search__secondary:last-child {
      animation: secondary-right-in 250ms cubic-bezier(0, 0, 0.1, 1) both;
      animation-delay: 60ms; }
    .ap-search__results.ng-enter .ap-search__item {
      animation-delay: 500ms; }
      .ap-search__results.ng-enter .ap-search__item:nth-child(1) {
        animation-delay: 140ms; }
      .ap-search__results.ng-enter .ap-search__item:nth-child(2) {
        animation-delay: 180ms; }
      .ap-search__results.ng-enter .ap-search__item:nth-child(3) {
        animation-delay: 220ms; }
      .ap-search__results.ng-enter .ap-search__item:nth-child(4) {
        animation-delay: 260ms; }
      .ap-search__results.ng-enter .ap-search__item:nth-child(5) {
        animation-delay: 300ms; }
      .ap-search__results.ng-enter .ap-search__item:nth-child(6) {
        animation-delay: 340ms; }
      .ap-search__results.ng-enter .ap-search__item:nth-child(7) {
        animation-delay: 380ms; }
      .ap-search__results.ng-enter .ap-search__item:nth-child(8) {
        animation-delay: 420ms; }
      .ap-search__results.ng-enter .ap-search__item:nth-child(9) {
        animation-delay: 460ms; }
    .ap-search__results.ng-leave {
      position: absolute;
      width: 100%;
      animation: results-out 250ms linear both; }
  .ap-search__content {
    margin: 0 auto;
    max-width: 1340px;
    display: flex;
    justify-content: center; }
  .ap-search__main {
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex-shrink: 0;
    width: 548px;
    max-width: 100%;
    max-height: 322px;
    padding: 0;
    background-color: #002B49; }
    @media (min-width: 720px) {
      .ap-search__main {
        padding: 0;
        border-left: 3px solid rgba(255, 255, 255, 0.2);
        border-right: 3px solid rgba(255, 255, 255, 0.2); } }
    @media (min-width: 1120px) {
      .ap-search__main {
        display: block; } }
  .ap-search__shade {
    position: absolute;
    pointer-events: none;
    z-index: 2;
    left: 50%;
    bottom: 49px;
    height: 100px;
    width: 548px;
    max-width: 100%;
    transform: translateX(-50%); }
    .ap-search__shade--top {
      top: 48px;
      background-image: linear-gradient(to bottom, #002B49, rgba(0, 43, 73, 0)); }
    .ap-search__shade--bottom {
      bottom: 49px;
      background-image: linear-gradient(to top, #002B49, rgba(0, 43, 73, 0)); }
  .ap-search__secondary {
    display: none;
    width: 100%;
    padding: 0 30px;
    max-width: 312px;
    transition: opacity 300ms cubic-bezier(0, 0, 0.1, 1);
    will-change: transform; }
    @media (min-width: 1120px) {
      .ap-search__secondary {
        display: block; } }
    .ap-search__secondary--muted {
      opacity: 0.15; }
  .ap-search__title {
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 15px;
    line-height: 21px;
    margin-bottom: 28px; }
    @media screen and (min-width: 720px) {
      .ap-search__title {
        font-size: 16px;
        line-height: 21px; } }
  .ap-search__link {
    color: rgba(255, 255, 255, 0.8);
    border-color: transparent; }
    .ap-search__link:hover, .ap-search__link:focus {
      color: #fff;
      border-color: #fff; }
    .ap-search__link--promoted {
      font-family: "Noe Text", Helvetica, sans-serif;
      font-size: 19px;
      line-height: 28px; }
      @media screen and (min-width: 440px) {
        .ap-search__link--promoted {
          font-size: 23px;
          line-height: 28px; } }
  .ap-search__list-item {
    position: relative;
    margin-bottom: 7px; }
  .ap-search__item {
    position: relative;
    display: block;
    color: #fff;
    border: 0;
    padding: 6px 18px;
    will-change: transform, opacity; }
    @media (min-width: 720px) {
      .ap-search__item {
        padding: 9px 39px; } }
    .ap-search__item:hover, .ap-search__item:focus, .ap-search__item--active {
      z-index: 3;
      color: #fff;
      background-color: rgba(0, 0, 0, 0.3); }
    .ap-search__item.ng-enter {
      animation-delay: 135ms; }
      .ap-search__item.ng-enter:nth-child(1) {
        animation-delay: 15ms; }
      .ap-search__item.ng-enter:nth-child(2) {
        animation-delay: 30ms; }
      .ap-search__item.ng-enter:nth-child(3) {
        animation-delay: 45ms; }
      .ap-search__item.ng-enter:nth-child(4) {
        animation-delay: 60ms; }
      .ap-search__item.ng-enter:nth-child(5) {
        animation-delay: 75ms; }
      .ap-search__item.ng-enter:nth-child(6) {
        animation-delay: 90ms; }
      .ap-search__item.ng-enter:nth-child(7) {
        animation-delay: 105ms; }
      .ap-search__item.ng-enter:nth-child(8) {
        animation-delay: 120ms; }
    .ap-search__item.ng-leave {
      animation: 0; }
  .ap-search__backdrop {
    position: fixed;
    display: block;
    color: transparent;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.3); }
  .ap-search--focus {
    z-index: 40; }
    .ap-search--focus .ap-search__input {
      border-color: #E01220;
      background-color: #fff; }
    .ap-search--focus .ap-search__button {
      background-color: #E01220; }

@keyframes results-in {
  0.00% {
    transform: matrix3d(0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, -100, 1, 1);
    opacity: 0; }
  3.33% {
    transform: matrix3d(0.705, 0, 0, 0, 0, 0.705, 0, 0, 0, 0, 1, 0, 0, -45.623, 1, 1); }
  6.67% {
    transform: matrix3d(0.844, 0, 0, 0, 0, 0.844, 0, 0, 0, 0, 1, 0, 0, -16.097, 1, 1); }
  10.00% {
    transform: matrix3d(0.931, 0, 0, 0, 0, 0.931, 0, 0, 0, 0, 1, 0, 0, -2.812, 1, 1); }
  13.33% {
    transform: matrix3d(0.977, 0, 0, 0, 0, 0.977, 0, 0, 0, 0, 1, 0, 0, 1.393, 1, 1); }
  16.67% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1.989, 1, 1);
    opacity: 1; }
  20.00% {
    transform: matrix3d(1.009, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1.439, 1, 1); }
  23.33% {
    transform: matrix3d(1.01, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.807, 1, 1); }
  26.67% {
    transform: matrix3d(1.009, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.369, 1, 1); }
  30.00% {
    transform: matrix3d(1.006, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.126, 1, 1); }
  33.33% {
    transform: matrix3d(1.004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.023, 1, 1); }
  36.67% {
    transform: matrix3d(1.002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.011, 1, 1); }
  40.00% {
    transform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.016, 1, 1); }
  43.33% {
    transform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.012, 1, 1); }
  100.00% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 1, 1); } }

@keyframes results-out {
  0.00% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 1, 1); }
  11.11% {
    transform: matrix3d(0.793, 0, 0, 0, 0, 0.72, 0, 0, 0, 0, 1, 0, 0, -61.957, 1, 1); }
  22.22% {
    transform: matrix3d(0.632, 0, 0, 0, 0, 0.501, 0, 0, 0, 0, 1, 0, 0, -110.344, 1, 1); }
  33.33% {
    transform: matrix3d(0.507, 0, 0, 0, 0, 0.331, 0, 0, 0, 0, 1, 0, 0, -147.778, 1, 1); }
  44.44% {
    transform: matrix3d(0.421, 0, 0, 0, 0, 0.214, 0, 0, 0, 0, 1, 0, 0, -173.775, 1, 1); }
  55.56% {
    transform: matrix3d(0.362, 0, 0, 0, 0, 0.135, 0, 0, 0, 0, 1, 0, 0, -191.286, 1, 1); }
  66.67% {
    transform: matrix3d(0.326, 0, 0, 0, 0, 0.085, 0, 0, 0, 0, 1, 0, 0, -202.222, 1, 1);
    opacity: 0; }
  100.00% {
    transform: none;
    opacity: 0; } }

@keyframes secondary-left-in {
  0% {
    opacity: 0;
    transform: translateX(100px); }
  30% {
    opacity: 0; } }

@keyframes secondary-right-in {
  0% {
    opacity: 0;
    transform: translateX(-100px); }
  30% {
    opacity: 0; } }

/* Switch

Example: {type: isolated}
    <section class="page-section">
        <span class="switch">
            <label class="switch__item">
                <input class="switch__input" type="radio" name="sex" value="female" required />
                <span class="switch__button">
                    Kvinne
                </span>
            </label>
            <label class="switch__item">
                <input class="switch__input" type="radio" name="sex" value="male" required/>
                <span class="switch__button">
                    Mann
                </span>
            </label>
            <label class="switch__item">
                <input class="switch__input" type="radio" name="sex" value="other" required />
                <span class="switch__button">
                    Annet
                </span>
            </label>
        </span>
    </section>

Styleguide form.switch
*/
.switch {
  display: flex;
  width: 100%;
  position: relative;
  margin-bottom: 21px; }
  .switch__item {
    display: block;
    width: 100%;
    margin-right: -3px; }
    .switch__item:last-child {
      margin-right: 0; }
    .switch__item:first-child .switch__button {
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px; }
    .switch__item:last-child {
      margin-right: 0; }
      .switch__item:last-child .switch__button {
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px; }
  .switch__input {
    position: absolute;
    opacity: 0;
    z-index: -1; }
    .switch__input:checked ~ .switch__button {
      z-index: 3;
      background-color: #d5d6d5; }
  .switch__button {
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    text-align: center;
    color: #2f2c2f;
    position: relative;
    display: block;
    cursor: pointer;
    padding: 9px 6px;
    border-radius: 0;
    border: 3px solid #d5d6d5;
    width: 100%; }
    .switch__button:hover {
      z-index: 2;
      background-color: #e3e4e3; }

/* List section

Example: {type: isolated} Normal
    <div class="list-section">
        <section class="list-section__item">
            <h3 class="list-section__title">Make placeholder text great again</h3>

            <ul class="list">
                <li>Barack Obama’s placeholder text is a fraud</li>
                <li>Lorem Ipsum is unattractive, both inside and out.</li>
            </ul>
        </section>
        <section class="list-section__item">
            <h3 class="list-section__title">Make placeholder text great again</h3>

            <ul class="list">
                <li>Barack Obama’s placeholder text is a fraud</li>
                <li>Lorem Ipsum is unattractive, both inside and out.</li>
            </ul>
        </section>
        <section class="list-section__item">
            <h3 class="list-section__title">Make placeholder text great again</h3>

            <ul class="list">
                <li>Barack Obama’s placeholder text is a fraud</li>
                <li>Lorem Ipsum is unattractive, both inside and out.</li>
            </ul>
        </section>
    </div>

Example: {type: isolated} CTA
    <div class="list-section">
        <section class="list-section__item  list-section__item--cta">
            <button type="button" class="button  button--primary-fill  button--block">Make it great again</button>
            <button type="button" class="button  button--primary  button--block">Trump Tower Grill</button>
        </section>
        <section class="list-section__item">
            <h3 class="list-section__title">Make placeholder text great again</h3>

            <ul class="list">
                <li>Barack Obama’s placeholder text is a fraud</li>
                <li>Lorem Ipsum is unattractive, both inside and out.</li>
            </ul>
        </section>
    </div>

Example: {type: isolated} Combined
    <div class="list-section  list-section--combined">
        <section class="list-section__item  list-section__item--cta">
            <button type="button" class="button  button--primary-fill  button--block">Make it great again</button>
            <button type="button" class="button  button--primary  button--block">Trump Tower Grill</button>
        </section>
        <section class="list-section__item">
            <h3 class="list-section__title">Make placeholder text great again</h3>

            <ul class="list">
                <li>Barack Obama’s placeholder text is a fraud</li>
                <li>Lorem Ipsum is unattractive, both inside and out.</li>
            </ul>
        </section>
    </div>

Styleguide components.list-section
*/
.list-section {
  margin: 0 auto;
  max-width: 1340px;
  margin-bottom: 24px; }
  @media (min-width: 960px) {
    .list-section {
      display: flex;
      justify-content: center;
      flex-direction: row; } }
  .list-section__item {
    animation-delay: 300ms;
    flex-basis: 454.66667px;
    padding: 21px 24px 28px;
    border-radius: 5px;
    background-color: #fff;
    margin: 12px 0; }
    .list-section__item:nth-child(1) {
      animation-delay: 120ms; }
    .list-section__item:nth-child(2) {
      animation-delay: 180ms; }
    .list-section__item:nth-child(3) {
      animation-delay: 240ms; }
    @media (min-width: 720px) {
      .list-section__item {
        margin: 7px 6px; } }
    @media (min-width: 1240px) {
      .list-section__item {
        width: 454.66667px;
        max-width: 100%;
        padding: 28px 42px 35px; } }
    .list-section__item > *:last-child {
      margin-bottom: 0; }
    .list-section__item--cta {
      display: flex;
      justify-content: center;
      flex-direction: column; }
  .list-section__title {
    font-size: 19px;
    line-height: 28px;
    color: #E01220;
    text-align: center; }
    @media screen and (min-width: 440px) {
      .list-section__title {
        font-size: 23px;
        line-height: 28px; } }
    @media (min-width: 720px) {
      .list-section__title {
        margin-bottom: 35px; } }
  .list-section--combined .list-section__item {
    margin-left: 0;
    margin-right: 0;
    background-color: #fff; }
    @media (min-width: 1240px) {
      .list-section--combined .list-section__item {
        max-width: 460.66667px; }
        .list-section--combined .list-section__item:first-of-type {
          border-top-right-radius: 0;
          border-bottom-right-radius: 0; }
        .list-section--combined .list-section__item:last-of-type {
          border-top-left-radius: 0;
          border-bottom-left-radius: 0; } }
  .list-section--contacts {
    margin: 0 auto;
    max-width: 1580px;
    flex-wrap: wrap; }
    .list-section--contacts .list-section__item {
      margin: 3px 0; }
      @media (min-width: 720px) {
        .list-section--contacts .list-section__item {
          margin: 3px;
          padding: 28px 24px;
          flex-basis: calc(33.33333% - 6px); } }
      @media (min-width: 1400px) {
        .list-section--contacts .list-section__item {
          flex-basis: calc(20% - 6px); } }

/* People list

This is dependent on `people-item`-directive in order to collapse and expand the description

Example: {type: isolated}
    <section class="people-list">
        <ul class="people-list__list">
            <li class="people-list__item" people-item>
                <div class="people-list__info">
                    <figure class="people-list__avatar">
                        AV
                    </figure>
                    <div class="people-list__main-info">
                        <h3 class="people-list__name">Amund Vik</h3>
                        <p class="people-list__who">Leder</p>

                        <a class="people-list__contact-info" href="">
                            954 91 539
                        </a>
                        <a class="people-list__contact-info" href="">
                            24 14 40 48
                        </a>
                        <a class="people-list__contact-info" href="">
                            amund.vik@arbeiderpartiet.no
                        </a>
                    </div>
                </div>
            </li>
            <li class="people-list__item" people-item>
                <div class="people-list__info">
                    <figure class="people-list__avatar">
                        SW
                    </figure>
                    <div class="people-list__main-info">
                        <h3 class="people-list__name">Snorre Wikstrøm</h3>
                        <p class="people-list__who">Strategirådgiver</p>

                        <a class="people-list__contact-info" href="">
                            957 60 734
                        </a>
                        <a class="people-list__contact-info" href="">
                            24 14 40 65
                        </a>
                        <a class="people-list__contact-info" href="">
                            snorre.wikstrom@arbeiderpartiet.no
                        </a>
                    </div>
                </div>
                <div class="people-list__more">
                    <p class="people-list__description  people-list__description--expanded">
                        I have a 10 year old son. He has words. He is so good with these words it's unbelievable. We have so many things that we have to do better... and certainly ipsum is one of them.
                    </p>
                    <button type="button" class="people-list__toggle">Skjul</button>
                </div>
            </li>
            <li class="people-list__item" people-item>
                <div class="people-list__info">
                    <figure class="people-list__avatar">
                        <img
                            class="people-list__image"
                            src="/static/arbeiderpartiet_theme/2alpha/apmedia/images/quote-avatar-example.png"
                            alt="Øyvind Grøslie Wennesland"
                            data-object-fit="cover"
                        />
                    </figure>
                    <div class="people-list__main-info">
                        <h3 class="people-list__name">Øyvind Grøslie Wennesland</h3>
                        <p class="people-list__who">Kommunikasjonsrådgiver</p>
                    </div>
                </div>
                <div class="people-list__more">
                    <p class="people-list__description">
                        I think the only difference between me and the other placeholder text is that I’m more honest and my words are more beautiful. I will write some great placeholder text – and nobody writes better placeholder text than me, believe me – and I’ll write it very inexpensively. I will write some great, great text on your website’s Southern border, and I will make Google pay for that text. Mark my words. If Trump Ipsum weren’t my own words, perhaps I’d be dating it. Lorem Ipsum is unattractive, both inside and out. I fully understand why it’s former users left it for something else. They made a good decision. An ‘extremely credible source’ has called my office and told me that Barack Obama’s placeholder text is a fraud.
                    </p>
                    <button type="button" class="people-list__toggle">Vis mer</button>
                </div>
            </li>
        </ul>
    </section>

Styleguide components.people-list
*/
.people-list {
  margin: 0 auto;
  padding-left: 12px;
  padding-right: 12px;
  max-width: 1400px;
  margin-bottom: 56px; }
  @media (min-width: 440px) {
    .people-list {
      padding-left: 24px;
      padding-right: 24px; } }
  @media (min-width: 720px) {
    .people-list {
      padding-left: 60px;
      padding-right: 60px; } }
  .people-list__title {
    font-size: 16px;
    line-height: 21px;
    text-align: center;
    color: #686969;
    margin-bottom: 14px; }
    @media screen and (min-width: 440px) {
      .people-list__title {
        font-size: 19px;
        line-height: 28px; } }
  .people-list__list {
    display: flex;
    flex-wrap: wrap;
    margin-left: -12px;
    margin-right: -12px; }
    @media (min-width: 720px) {
      .people-list__list {
        margin-left: -6px;
        margin-right: -6px; } }
  .people-list__item {
    /*
        @extend %animation-pop-in;
        @include animation-delay(9, 30ms);
        */
    font-size: 15px;
    line-height: 21px;
    padding: 14px 24px 7px;
    background-color: #fff;
    width: 100%;
    margin-bottom: 7px;
    max-height: 294px;
    overflow: hidden;
    will-change: max-height, transform;
    transition: max-height 250ms ease-in; }
    @media screen and (min-width: 720px) {
      .people-list__item {
        font-size: 16px;
        line-height: 21px; } }
    @media (min-width: 720px) {
      .people-list__item {
        padding: 21px 24px;
        margin-bottom: 6px;
        border-radius: 5px;
        margin: 6px;
        flex: calc(50% - 12px);
        min-width: calc(50% - 12px);
        max-width: calc(50% - 12px); } }
    @media (min-width: 1240px) {
      .people-list__item {
        flex: calc(33.33333% - 12px);
        min-width: calc(33.33333% - 12px);
        max-width: calc(33.33333% - 12px); } }
    .people-list__item.ng-leave {
      animation-duration: 0s; }
    .people-list__item--collapsed .people-list__toggle {
      display: block; }
    .people-list__item--collapsed .people-list__description {
      margin-bottom: 35px; }
    .people-list__item--collapsed:after {
      pointer-events: none;
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 70px;
      border-bottom-right-radius: 5px;
      border-bottom-left-radius: 5px;
      background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8), white 90%); }
    .people-list__item--expanded {
      transition: max-height 300ms cubic-bezier(0, 0, 0.1, 1); }
      .people-list__item--expanded:after {
        display: none; }
      .people-list__item--expanded .people-list__toggle {
        transform: rotate(-180deg);
        box-shadow: none; }
    .people-list__item--active {
      box-shadow: 0 0 0 3px #40AAB8; }
  .people-list__name {
    font-family: "Noe Text", Helvetica, sans-serif;
    font-weight: bold;
    font-size: 19px;
    line-height: 28px;
    margin-bottom: 6px; }
    @media screen and (min-width: 440px) {
      .people-list__name {
        font-size: 23px;
        line-height: 28px; } }
  .people-list__who {
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    font-size: 0.85em;
    color: #686969;
    margin: 0 0 7px; }
  .people-list__description {
    padding-top: 7px;
    margin-bottom: 0;
    color: #686969; }
  .people-list__toggle {
    display: none;
    position: absolute;
    overflow: hidden;
    z-index: 2;
    left: 50%;
    bottom: 7px;
    width: 30px;
    height: 30px;
    margin-left: -15px;
    border-radius: 50%;
    color: transparent;
    background-color: #002B49;
    box-shadow: 0 0 20px 8px #fff;
    outline: 0;
    will-change: transform;
    transition: transform 300ms cubic-bezier(0, 0, 0.1, 1);
    transition-delay: 200ms; }
    .people-list__toggle:hover, .people-list__toggle:focus {
      background-color: #E01220; }
    .people-list__toggle:before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -45%); }
  .people-list__avatar {
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 16px;
    line-height: 21px;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-right: 12px;
    margin-left: -3px;
    width: 91px;
    min-width: 91px;
    height: 91px;
    border-radius: 50%;
    overflow: hidden;
    color: #ce111d;
    background-color: #E01220; }
    @media screen and (min-width: 440px) {
      .people-list__avatar {
        font-size: 19px;
        line-height: 28px; } }
    .people-list__avatar--colorless {
      color: transparent;
      background-color: transparent; }
  .people-list__image {
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover; }
  .people-list__info {
    display: flex; }
  .people-list__main-info {
    position: relative;
    overflow: hidden;
    padding-right: 12px;
    margin-right: -12px;
    width: calc(100% - 91px); }
  .people-list__contact-info {
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    display: block;
    color: #E01220;
    border: 0;
    margin-bottom: 7px; }
    .people-list__contact-info:hover, .people-list__contact-info:focus {
      color: #002B49; }

/* People

Example: {type: isolated}
    <ul class="people">
        <li class="people__item">
            <figure class="people__avatar">
                <img
                    class="people__image"
                    src="http://apps.o5.no.s3.amazonaws.com/dna/org/level1_1/level2_1_14/level3_1_14_1432/main_site/20150718101301-1500-md6q/1000.jpg"
                    alt="Helge Robert Midtbø"
                    data-object-fit="cover"
                />
            </figure>

            <div class="people__info">
                <h3 class="people__name">Helge Robert Midtbø</h3>
                <p class="people__description">Representant</p>
            </div>
        </li>
        <li class="people__item">
            <figure class="people__avatar">
                <img
                    class="people__image"
                    src="http://apps.o5.no.s3.amazonaws.com/dna/org/level1_1/level2_1_14/level3_1_14_1432/main_site/20150615152425-769-zqzl/1000.jpg"
                    alt="Kari Valle"
                    data-object-fit="cover"
                />
            </figure>

            <div class="people__info">
                <h3 class="people__name">Kari Valle</h3>
                <p class="people__description">Representant</p>
            </div>
        </li>
        <li class="people__item">
            <figure class="people__avatar">
                <img
                    class="people__image"
                    src="http://apps.o5.no.s3.amazonaws.com/dna/org/level1_1/level2_1_14/level3_1_14_1432/main_site/20141218150033-1333-2235/1000.jpg"
                    alt="Einar Solheim"
                    data-object-fit="cover"
                />
            </figure>

            <div class="people__info">
                <h3 class="people__name">Einar Solheim</h3>
                <p class="people__description">Representant</p>
            </div>
        </li>
        <li class="people__item">
            <figure class="people__avatar">
                <img
                    class="people__image"
                    src="http://apps.o5.no.s3.amazonaws.com/dna/org/level1_1/level2_1_14/level3_1_14_1432/main_site/20150806072738-667-qukz/1000.jpg"
                    alt="Ivar Svensøy"
                    data-object-fit="cover"
                />
            </figure>

            <div class="people__info">
                <h3 class="people__name">Ivar Svensøy</h3>
                <p class="people__description">Representant</p>
            </div>
        </li>
    </ul>

Styleguide components.people
*/
.people {
  margin: 0 auto;
  padding-left: 12px;
  padding-right: 12px;
  max-width: 1400px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  color: #E01220; }
  @media (min-width: 440px) {
    .people {
      padding-left: 24px;
      padding-right: 24px; } }
  @media (min-width: 720px) {
    .people {
      padding-left: 60px;
      padding-right: 60px; } }
  .people__item {
    animation-delay: 230ms;
    margin: 7px 12px;
    width: calc(50% - 24px);
    flex-shrink: 0; }
    .people__item:nth-child(1) {
      animation-delay: 70ms; }
    .people__item:nth-child(2) {
      animation-delay: 110ms; }
    .people__item:nth-child(3) {
      animation-delay: 150ms; }
    .people__item:nth-child(4) {
      animation-delay: 190ms; }
    @media (min-width: 720px) {
      .people__item {
        margin: 35px 12px; } }
    @media (min-width: 960px) {
      .people__item {
        width: calc(25% - 24px); } }
  .people__avatar {
    position: relative;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 7px;
    width: 126px;
    height: 126px; }
    @media (min-width: 720px) {
      .people__avatar {
        width: 203px;
        height: 203px; } }
  .people__image {
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; }
  .people__name {
    font-size: 21px;
    line-height: 28px;
    margin-bottom: 0; }
    @media screen and (min-width: 440px) {
      .people__name {
        font-size: 26px;
        line-height: 35px; } }
    @media screen and (min-width: 720px) {
      .people__name {
        font-size: 27px;
        line-height: 35px; } }
  .people__link {
    color: inherit;
    border-color: transparent; }
  .people__description {
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 15px;
    line-height: 21px; }
    @media screen and (min-width: 720px) {
      .people__description {
        font-size: 16px;
        line-height: 21px; } }
  .people__avatar-fallback {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #E01220; }
  .people__initials {
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 28px;
    line-height: 35px;
    margin-right: -0.16em;
    color: #ce111d; }
    @media screen and (min-width: 440px) {
      .people__initials {
        font-size: 36px;
        line-height: 49px; } }
    @media screen and (min-width: 720px) {
      .people__initials {
        font-size: 40px;
        line-height: 49px; } }

.split-list {
  margin: 0 auto;
  max-width: 1580px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-left: 2px;
  padding-right: 2px; }
  .split-list__main-title {
    text-align: center;
    margin-bottom: 14px; }
  .split-list__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    align-self: stretch;
    text-align: left;
    border: 0;
    min-height: 154px;
    margin: 2px;
    padding: 14px 12px 7px;
    border-radius: 5px;
    color: #fff;
    transition: transform 100ms ease-in;
    background-repeat: no-repeat;
    background-size: 100px 150px;
    background-position: 12px center;
    background-color: #E01220; }
    .split-list__item:hover, .split-list__item:focus {
      color: #fff;
      transform: translateY(-7px);
      box-shadow: 0 0 20px rgba(30, 30, 30, 0.06);
      transition: transform 200ms cubic-bezier(0, 0, 0.1, 1); }
    @media (min-width: 720px) {
      .split-list__item {
        justify-content: flex-start;
        width: calc(50% - 4px);
        max-width: 100%;
        padding: 28px 24px 14px; } }
    @media (min-width: 1280px) {
      .split-list__item {
        width: calc(25% - 4px); } }
    .split-list__item--arbeid {
      background-image: url("../../apmedia/images/illustrations/arbeid--small.svg");
      padding-left: 112px; }
    .split-list__item--helse {
      background-image: url("../../apmedia/images/illustrations/helse--small.svg");
      padding-left: 112px; }
    .split-list__item--klima {
      background-image: url("../../apmedia/images/illustrations/klima--small.svg");
      padding-left: 112px; }
    .split-list__item--kunnskap {
      background-image: url("../../apmedia/images/illustrations/kunnskap--small.svg");
      padding-left: 112px; }
  .split-list__title {
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 15px;
    line-height: 21px;
    position: relative;
    margin-bottom: 7px;
    max-width: 100%; }
    @media screen and (min-width: 720px) {
      .split-list__title {
        font-size: 16px;
        line-height: 21px; } }
  .split-list__description {
    font-family: "Noe Text", Helvetica, sans-serif;
    font-size: 19px;
    line-height: 28px;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    position: relative;
    margin-bottom: 0;
    max-width: 100%; }
    @media screen and (min-width: 440px) {
      .split-list__description {
        font-size: 23px;
        line-height: 28px; } }

/* Split

Example: {type: isolated}
    <div class="split">
        <section class="split__section">
            <h2 class="split__title">Arrangementer</h2>

            <ul class="event-list">
                <li class="event-list__item">
                    <time class="event-list__date">
                        <span class="event-list__day">25</span>
                        <span class="event-list__month">nov</span>
                    </time>
                    <div class="event-list__content">
                        <h3 class="event-list__title">
                            <a href="/event/" class="event-list__link">Utvidet styremøte</a>
                        </h3>
                        <p class="event-list__time">
                            25. mai, kl 19.00 &mdash; 21.00
                        </p>
                    </div>
                </li>
                <li class="event-list__item">
                    <time class="event-list__date">
                        <span class="event-list__day">26</span>
                        <span class="event-list__month">nov</span>
                    </time>
                    <div class="event-list__content">
                        <h3 class="event-list__title">
                            <a href="/event/" class="event-list__link">Representantskapsmøte</a>
                        </h3>
                        <p class="event-list__time">
                            26. mai, kl 13.00 &mdash; 14.00
                        </p>
                    </div>
                </li>
                <li class="event-list__item">
                    <time class="event-list__date">
                        <span class="event-list__day">27</span>
                        <span class="event-list__month">nov</span>
                    </time>
                    <div class="event-list__content">
                        <h3 class="event-list__title">
                            <a href="/event/" class="event-list__link">Nominasjonsmøte</a>
                        </h3>
                        <p class="event-list__time">
                            26. mai, kl 13.00 &mdash; 14.00
                        </p>
                    </div>
                </li>
            </ul>

            <a href="/arrangementer/" class="split__more">Alle arrangementer</a>
        </section>
        <section class="split__section">
            <h2 class="split__title">Aktuelt</h2>

            <ul class="list  list--links">
                <li>
                    <a href="">Arbeiderpartiet i Nord Norge samlet til møte</a>
                    <time class="time-stamp">26. september</time>
                </li>
                <li>
                    <a href="">Pliktsystemet i hvitfisknæringa under lupen</a>
                    <time class="time-stamp">30. august</time>
                </li>
                <li>
                    <a href="">Runar Sjåstad på topp</a>
                    <time class="time-stamp">28. august</time>
                </li>
            </ul>

            <a href="" class="split__more">Arkiv</a>
        </section>
    </div>

Styleguide layout.split
*/
.split {
  padding: 63px 0;
  background-color: #fff; }
  @media (min-width: 720px) {
    .split {
      display: flex;
      justify-content: center; } }
  .split__section {
    position: relative;
    width: 100%;
    padding: 35px 24px; }
    @media (min-width: 720px) {
      .split__section {
        display: flex;
        flex-direction: column;
        flex: 1 1 100%;
        max-width: 555px;
        border-left: 1.5px solid #f5f5f5;
        border-right: 1.5px solid #f5f5f5; } }
    @media (min-width: 960px) {
      .split__section {
        padding: 28px 60px; } }
    .split__section:first-child {
      border-left: 0; }
    .split__section:last-child {
      border-right: 0; }
  .split__title {
    font-size: 21px;
    line-height: 28px;
    color: #E01220;
    text-align: center; }
    @media screen and (min-width: 440px) {
      .split__title {
        font-size: 26px;
        line-height: 35px; } }
    @media screen and (min-width: 720px) {
      .split__title {
        font-size: 27px;
        line-height: 35px; } }
  .split__more {
    margin-left: auto;
    margin-right: auto;
    margin-top: auto; }

/* Seperations

Example: {type: isolated}
    <section class="separations" sticky-nav-section="Politiske forskjeller">
        <div class="separations__content">
            <h2 class="separations__main-title">Dette skiller oss fra Høyre/Frp-regjeringen</h2>

            <ul class="separations__list">
                <li class="separations__item">
                    <h3 class="separations__title">Nye arbeidsplasser</h3>

                    <p class="separations__description">Norge trenger nye arbeidsplasser for å bevare velferdsstaten og at folk skal ha arbeid.</p>

                    <div class="separations__difference">
                        <p class="separations__split  separations__split--us"><strong class="separations__intro  separations__intro--us">Arbeiderpartiet</strong> vil investere stort i <a href="http://arbeiderpartiet.no/Politikken-A-AA/Arbeid-og-naeringspolitikk/Naeringsliv">gründere</a>, <a href="http://arbeiderpartiet.no/Aktuelt/Klima-miljoe-og-energi/Vil-gjoere-Norge-ledende-paa-klimateknologi">grønn vekst</a> og gjøre Norge til en <a href="http://arbeiderpartiet.no/Aktuelt/Arbeid/Fem-punkter-for-teknologi-loeft-i-skole-og-arbeidsliv">ledende teknologinasjon</a>.</p>
                        <p class="separations__split  separations__split--them"><strong class="separations__intro  separations__intro--them">Høyre/FrP-Regjeringen</strong> vil overlate til private eiere å utvikle nye norske arbeidsplasser. De vil ikke at Staten skal ha en sentral rolle i å skape arbeidsplasser, og bruker i stedet penger på skattekutt til de som allerede har mest.</p>
                    </div>
                </li>
                <li class="separations__item">
                    <h3 class="separations__title">Arbeidsløshet</h3>

                    <p class="separations__description">Arbeidsløsheten har steget det siste året, og lå i 2. kvartal 2016 på 4,8%.</p>

                    <div class="separations__difference">
                        <p class="separations__split  separations__split--us"><strong class="separations__intro  separations__intro--us">Arbeiderpartiet</strong> foreslo høsten 2015 en tiltakspakke på om lag tre milliarder kroner mer enn regjeringen. I revidert budsjett la Ap inn 900 millioner til ekstra aktivitetsskapende tiltak, blant annet en dobling av regjeringens vedlikeholdspakke til Sør- og Vestlandet.</p>

                        <p class="separations__split  separations__split--them"><strong class="separations__intro  separations__intro--them">Høyre/FrP-Regjeringen</strong> vil hovedsakelig møte ledigheten med mindre, midlertidige tiltak og bruker i stedet penger på <a href="http://www.aftenposten.no/okonomi/Ny-rapport-Kutt-i-formuesskatten-virker-nesten-ikke-30811b.html">skattekutt som i liten grad bidrar til å skape nye arbeidsplasser</a>.</p>
                    </div>
                </li>
            </ul>
        </div>
    </section>

Styleguide components.separations
*/
.separations {
  position: relative;
  padding-top: 21px;
  padding-bottom: 21px;
  background-color: #fff; }
  @media (min-width: 720px) {
    .separations {
      padding-top: 35px;
      padding-bottom: 7px;
      padding-left: 24px;
      padding-right: 24px; } }
  .separations__content {
    position: relative; }
  .separations__list {
    margin: 0 auto;
    max-width: 1050px; }
  .separations__item {
    margin-bottom: 28px; }
    .separations__item:nth-child(even) .separations__split--them {
      z-index: 2; }
    @media (min-width: 720px) {
      .separations__item {
        margin-bottom: 63px; } }
  .separations__main-title {
    margin: 0 auto;
    padding-left: 12px;
    padding-right: 12px;
    max-width: 740px;
    margin-bottom: 28px; }
    @media (min-width: 440px) {
      .separations__main-title {
        padding-left: 24px;
        padding-right: 24px; } }
    @media (min-width: 720px) {
      .separations__main-title {
        padding-left: 60px;
        padding-right: 60px; } }
  .separations__title, .separations__description {
    margin: 0 auto;
    padding-left: 12px;
    padding-right: 12px;
    max-width: 740px; }
    @media (min-width: 440px) {
      .separations__title, .separations__description {
        padding-left: 24px;
        padding-right: 24px; } }
    @media (min-width: 720px) {
      .separations__title, .separations__description {
        padding-left: 60px;
        padding-right: 60px; } }
  .separations__description {
    color: #5e5f5f;
    margin-bottom: 21px; }
  .separations__difference {
    position: relative;
    display: flex;
    align-items: flex-start;
    margin-left: -12px;
    margin-right: -12px; }
    @media (min-width: 440px) {
      .separations__difference {
        margin-left: -15px;
        margin-right: -15px; } }
  .separations__split {
    position: relative;
    flex: 1 1 50%;
    text-align: left;
    padding: 7px 18px;
    margin: 3px 6px;
    border-radius: 5px;
    background-color: #fff;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto; }
    @media (min-width: 720px) {
      .separations__split {
        margin: 3px 6px;
        padding: 28px 42px; } }
    .separations__split--us {
      z-index: 2;
      top: -7px;
      right: -12px;
      border: 3px solid #E01220; }
      @media (max-width: 440px) {
        .separations__split--us {
          margin-left: 0;
          border-left: 0;
          border-top-left-radius: 0;
          border-bottom-left-radius: 0;
          padding-left: 12px; } }
      @media (min-width: 720px) {
        .separations__split--us {
          right: -24px; } }
    .separations__split--them {
      top: 21px;
      left: -12px;
      border: 3px solid #40AAB8;
      min-height: 153px; }
      @media (max-width: 440px) {
        .separations__split--them {
          margin-right: 0;
          border-right: 0;
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
          padding-right: 12px; } }
      @media (min-width: 720px) {
        .separations__split--them {
          left: -24px; } }
  .separations__intro--us {
    color: #ce111d; }
  .separations__intro--them {
    color: #002B49; }
  .separations--muted {
    background-color: #f5f5f5; }

/* Timeline
Example: {type: isolated}
    <div class="container  container--tight">
        <ul class="timeline">
            <li class="timeline__item">
                <h3 class="timeline__title">2016</h3>
                <p class="timeline__description">Some text...</p>
            </li>
            <li class="timeline__item">
                <h3 class="timeline__title">2015</h3>
                <p class="timeline__description">Some text...</p>
            </li>
            <li class="timeline__item">
                <h3 class="timeline__title">2014</h3>
                <p class="timeline__description">Some text...</p>
            </li>
        </ul>
    </div>
Styleguide components.timeline
*/
.timeline__item {
  position: relative;
  padding: 0 0 48px 42px; }
  .timeline__item:before, .timeline__item:after {
    content: '';
    display: block;
    position: absolute; }
  .timeline__item:before {
    left: 0;
    top: 6px;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    border: 3px solid #40AAB8; }
  .timeline__item:after {
    top: 24px;
    left: 8px;
    bottom: -7px;
    border-left: 3px solid #40AAB8; }
  .timeline__item:last-child:after {
    bottom: 51px; }

.timeline__title {
  font-family: "Maison Neue", Helvetica, sans-serif;
  font-weight: bold;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.74em;
  line-height: inherit;
  color: #ce111d;
  margin: 0; }

.timeline__description {
  margin: 0; }

/* Images

Usage: Have to use on of the following modifiers:

Example: {type: isolated} Left
    <figure class="image  image--left">
        <img
            src="https://cicilietill.files.wordpress.com/2011/12/20120531_7328-kari-bremnes.jpg"
            alt="Bremnes hereself..."
            class="image__image"
        />
        <figcaption class="image__caption">
            <p class="image__text">Kari Bremnes: Sterkt uenig i partiens standpunkt til hennes plateslipp. Har ingen verdens forståelse for at dette kan ha noen innvirkning til det politiske som foregår i landet. Samtidig er hun trist for at dette først kommer til lyset nå: Dette skulle vært annonsert en god tid i forkant.</p>
        </figcaption>
    </figure>

Example: {type: isolated} Tight
    <figure class="image  image--tight">
        <img
            src="http://1.vgc.no/drpublish/images/article/2013/10/16/23065988/1/990/1967290.jpg"
            alt="Bremnes hereself..."
            class="image__image"
        />
        <figcaption class="image__caption">
            <p class="image__text">Kari Bremnes: Rett og slett lei av de politiske prosessene.</p>
        </figcaption>
    </figure>

Example: {type: isolated} Full
    <figure class="image  image--full">
        <img
            src="http://arkiv.nrk.no/lydverket/wp-content/uploads/2010/05/BREMNES.jpg"
            alt="Bremnes hereself..."
            class="image__image"
        />
        <figcaption class="image__caption">
            <p class="image__text">Kari Bremnes er betenkt.</p>
        </figcaption>
    </figure>

StyleguideReplace layout.image
*/
.image__text {
  margin: 0; }

.image--tight {
  margin: 0 auto;
  padding-left: 12px;
  padding-right: 12px;
  max-width: 740px;
  margin-top: 28px;
  margin-bottom: 49px; }
  @media (min-width: 440px) {
    .image--tight {
      padding-left: 24px;
      padding-right: 24px; } }
  @media (min-width: 720px) {
    .image--tight {
      padding-left: 60px;
      padding-right: 60px; } }
  @media (min-width: 960px) {
    .image--tight .image__image {
      margin-left: -60px;
      margin-right: -60px;
      width: calc(100% + 120px);
      max-width: calc(100% + 120px); } }
  .image--tight .image__caption {
    font-size: 15px;
    line-height: 21px;
    padding-bottom: 12px;
    border-bottom: 2px solid #eeeeef; }
    @media screen and (min-width: 720px) {
      .image--tight .image__caption {
        font-size: 16px;
        line-height: 21px; } }

.image--left, .image--right {
  margin: 0 auto;
  padding-left: 12px;
  padding-right: 12px;
  max-width: 740px;
  margin-bottom: 42px; }
  @media (min-width: 440px) {
    .image--left, .image--right {
      padding-left: 24px;
      padding-right: 24px; } }
  @media (min-width: 720px) {
    .image--left, .image--right {
      padding-left: 60px;
      padding-right: 60px; } }
  .image--left .image__image, .image--right .image__image {
    max-height: 200px;
    max-width: 40%; }
  .image--left .image__text, .image--right .image__text {
    font-size: 22px;
    line-height: 28px; }
    @media screen and (min-width: 720px) {
      .image--left .image__text, .image--right .image__text {
        font-size: 24px;
        line-height: 35px; } }

.image--left .image__image {
  float: left;
  margin-right: 24px; }
  @media (min-width: 720px) {
    .image--left .image__image {
      margin-left: -60px; } }

.image--right .image__image {
  float: right;
  margin-left: 24px; }
  @media (min-width: 720px) {
    .image--right .image__image {
      margin-right: -60px; } }

.image--right .image__text {
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto; }

.image--float-left, .image--float-right {
  margin: 0 auto;
  padding-left: 12px;
  padding-right: 12px;
  max-width: 740px;
  margin-bottom: -42px; }
  @media (min-width: 440px) {
    .image--float-left, .image--float-right {
      padding-left: 24px;
      padding-right: 24px; } }
  @media (min-width: 720px) {
    .image--float-left, .image--float-right {
      padding-left: 60px;
      padding-right: 60px; } }
  .image--float-left .image__caption, .image--float-right .image__caption {
    font-size: 15px;
    line-height: 21px;
    padding-bottom: 12px;
    border-bottom: 2px solid #eeeeef; }
    @media screen and (min-width: 720px) {
      .image--float-left .image__caption, .image--float-right .image__caption {
        font-size: 16px;
        line-height: 21px; } }
  .image--float-left .image__float, .image--float-right .image__float {
    max-width: 40%; }
  .image--float-left .image__image, .image--float-right .image__image {
    max-height: 200px; }

.image--float-left .image__float {
  float: left;
  margin-right: 24px; }
  @media (min-width: 720px) {
    .image--float-left .image__float {
      margin-left: -60px; } }

.image--float-right .image__float {
  float: right;
  margin-left: 24px; }
  @media (min-width: 720px) {
    .image--float-right .image__float {
      margin-right: -60px; } }

.image--float-right .image__text {
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto; }

.image__admin-ui--float {
  margin-bottom: 0; }

.image--full {
  position: relative;
  height: 100%;
  max-height: 70vh;
  overflow: hidden;
  margin-top: 28px;
  margin-bottom: 49px; }
  .image--full .image__image {
    display: block;
    width: 100%; }
    @supports (object-fit: cover) {
      .image--full .image__image {
        position: relative;
        height: 100%;
        object-fit: cover; } }
  .image--full .image__caption {
    position: absolute;
    width: 100%;
    bottom: 0;
    color: #fff;
    padding: 14px 12px; }
    @media (min-width: 720px) {
      .image--full .image__caption {
        padding: 28px 60px; } }
  .image--full .image__text {
    font-family: "Noe Text", Helvetica, sans-serif;
    font-size: 19px;
    line-height: 28px;
    position: relative;
    display: inline-block;
    padding: 14px 12px;
    color: #fff;
    background-color: #E01220; }
    @media screen and (min-width: 440px) {
      .image--full .image__text {
        font-size: 23px;
        line-height: 28px; } }
    @media (min-width: 720px) {
      .image--full .image__text {
        max-width: 50%;
        padding: 28px 24px;
        font-size: 28px;
        line-height: 35px; } }
  @media screen and (min-width: 720px) and (min-width: 440px) {
    .image--full .image__text {
      font-size: 36px;
      line-height: 49px; } }
  @media screen and (min-width: 720px) and (min-width: 720px) {
    .image--full .image__text {
      font-size: 40px;
      line-height: 49px; } }
    @media (min-width: 1240px) {
      .image--full .image__text {
        padding: 35px 36px; } }

/* Download
Example: {type: isolated}
    <div class="page-section  page-section--tight">
        <a href="" class="download">
            <span class="download__file-icon">
                PDF
            </span>
            <span class="download__info">
                <strong class="download__name">Hasselhoff-secrets.pdf</strong>
                <span class="download__meta">25 MB</span>
            </span>
            <span class="download__download-icon"></span>
        </a>
    </div>

Styleguide components.download
*/
.download {
  display: flex;
  position: relative;
  width: 100%;
  padding: 7px 12px;
  background-color: #fff;
  border: 0;
  margin-bottom: 14px; }
  @media (min-width: 720px) {
    .download {
      padding: 21px 24px; } }
  .download__file-icon {
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    flex-shrink: 0;
    font-size: 0.7em;
    text-align: center;
    padding-top: 16px; }
  .download__info {
    font-family: "Maison Neue Mono", Helvetica, sans-serif;
    line-height: 1.25;
    flex-grow: 2;
    padding-left: 12px;
    padding-right: 12px; }
  .download__name {
    display: block;
    word-break: break-all; }
  .download__meta {
    font-size: 15px;
    color: #686969; }
    @media screen and (min-width: 720px) {
      .download__meta {
        font-size: 16px; } }
  .download__download-icon {
    margin-top: 12px;
    flex-shrink: 0; }

/* Quotes

Example: {type: isolated}
    <blockquote class="quote">
        <div class="quote__content">
            <p class="quote__text">Man behandler ikke næringsaktører med å finne på avgifter i siste budsjettinnspurt, uten noen foregående utredning, uten å analysere konsekvensene og uten å vurdere alternativer.</p>

            <cite class="quote__cite">
                <figure class="quote__avatar">
                    <img src="/static/arbeiderpartiet_theme/2alpha/apmedia/images/quote-avatar-example.png" alt="Trond Giske" />
                </figure>
                <a href="" class="quote__name">Trond Giske</a>,
                <span class="quote__title">nestleder i Arbeiderpartiet</span>
            </cite>
        </div>
    </blockquote>

Styleguide type.quote
*/
.quote {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  font-family: "Noe Text", Helvetica, sans-serif;
  position: relative;
  margin-bottom: 49px; }
  .quote__text {
    font-family: "Noe Text", Helvetica, sans-serif;
    font-size: 19px;
    line-height: 28px;
    letter-spacing: 0.015em;
    font-style: italic;
    margin-bottom: 14px; }
    @media screen and (min-width: 440px) {
      .quote__text {
        font-size: 23px;
        line-height: 28px; } }
  .quote__cite {
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-size: 16px;
    line-height: 21px;
    display: block;
    font-style: normal;
    color: #686969; }
    @media screen and (min-width: 440px) {
      .quote__cite {
        font-size: 19px;
        line-height: 28px; } }
  .quote__content {
    margin: 0 auto;
    padding-left: 12px;
    padding-right: 12px;
    max-width: 740px;
    position: relative; }
    @media (min-width: 440px) {
      .quote__content {
        padding-left: 24px;
        padding-right: 24px; } }
    @media (min-width: 720px) {
      .quote__content {
        padding-left: 60px;
        padding-right: 60px; } }
  .quote__avatar {
    position: relative;
    float: left;
    width: 42px;
    height: 42px;
    margin-right: 0.5em;
    margin-top: -6px;
    margin-left: -2px;
    border-radius: 50%;
    overflow: hidden; }
    @media (min-width: 960px) {
      .quote__avatar {
        position: absolute;
        float: none;
        top: 7px;
        width: 108px;
        height: 108px;
        margin: 0;
        left: -84px; } }
    .quote__avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover; }
  .quote--background-image {
    display: flex;
    align-items: flex-end;
    min-height: 60vh;
    padding-bottom: 28px;
    color: #fff;
    background-size: cover;
    margin: 0;
    margin-bottom: 49px;
    left: auto;
    right: auto;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.2); }
    .quote--background-image:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0.6;
      background-color: black; }
      @supports (mix-blend-mode: multiply) {
        .quote--background-image:before {
          opacity: 0.3;
          mix-blend-mode: multiply; } }
    .quote--background-image .quote__content {
      position: relative;
      margin: 0;
      max-width: 900px;
      width: 100%; }
    .quote--background-image .quote__text {
      font-size: 28px;
      line-height: 35px; }
      @media screen and (min-width: 440px) {
        .quote--background-image .quote__text {
          font-size: 36px;
          line-height: 49px; } }
      @media screen and (min-width: 720px) {
        .quote--background-image .quote__text {
          font-size: 40px;
          line-height: 49px; } }
    .quote--background-image .quote__cite {
      font-size: 22px;
      line-height: 28px;
      color: inherit; }
      @media screen and (min-width: 720px) {
        .quote--background-image .quote__cite {
          font-size: 24px;
          line-height: 35px; } }

.find-local {
  position: relative;
  background-color: #fff;
  padding: 35px 12px; }
  @media print {
    .find-local {
      display: none !important; } }
  @media (min-width: 960px) {
    .find-local {
      padding: 63px 60px; } }
  .find-local__title {
    text-align: center; }
  .find-local__sub-title {
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 15px;
    line-height: 21px;
    text-align: center;
    color: #686969;
    margin-bottom: 7px; }
    @media screen and (min-width: 720px) {
      .find-local__sub-title {
        font-size: 16px;
        line-height: 21px; } }
  .find-local__search {
    margin: 0 auto;
    padding-left: 12px;
    padding-right: 12px;
    max-width: 620px;
    display: flex; }
    @media (min-width: 440px) {
      .find-local__search {
        padding-left: 24px;
        padding-right: 24px; } }
    @media (min-width: 720px) {
      .find-local__search {
        padding-left: 60px;
        padding-right: 60px; } }
  .find-local__section {
    flex: 2 2 50%; }
  .find-local__separator {
    align-self: flex-end;
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 12px; }
  .find-local__label {
    padding-left: 18px; }
  .find-local__results {
    margin: 0 auto;
    padding-left: 12px;
    padding-right: 12px;
    max-width: 620px;
    margin-top: 28px; }
    @media (min-width: 440px) {
      .find-local__results {
        padding-left: 24px;
        padding-right: 24px; } }
    @media (min-width: 720px) {
      .find-local__results {
        padding-left: 60px;
        padding-right: 60px; } }
  .find-local__result-list {
    margin-bottom: 28px; }
  .find-local__result.ng-enter {
    animation-delay: 460ms; }
    .find-local__result.ng-enter:nth-child(1) {
      animation-delay: 60ms; }
    .find-local__result.ng-enter:nth-child(2) {
      animation-delay: 100ms; }
    .find-local__result.ng-enter:nth-child(3) {
      animation-delay: 140ms; }
    .find-local__result.ng-enter:nth-child(4) {
      animation-delay: 180ms; }
    .find-local__result.ng-enter:nth-child(5) {
      animation-delay: 220ms; }
    .find-local__result.ng-enter:nth-child(6) {
      animation-delay: 260ms; }
    .find-local__result.ng-enter:nth-child(7) {
      animation-delay: 300ms; }
    .find-local__result.ng-enter:nth-child(8) {
      animation-delay: 340ms; }
    .find-local__result.ng-enter:nth-child(9) {
      animation-delay: 380ms; }
    .find-local__result.ng-enter:nth-child(10) {
      animation-delay: 420ms; }
  .find-local__result.ng-leave {
    animation: fade-out-up 500ms cubic-bezier(0, 0, 0.1, 1) forwards; }
  .find-local__result:nth-child(odd) {
    border-radius: 5px;
    background-color: #f5f5f5; }
  .find-local__link {
    position: relative;
    display: block;
    border: 0;
    padding: 6px 18px;
    border-radius: 5px; }
    .find-local__link:after {
      position: absolute;
      content: '';
      top: 12px;
      right: 18px; }
    .find-local__link:hover, .find-local__link:focus {
      color: #fff;
      background-color: #E01220; }
  .find-local__spinner {
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 28px 0;
    text-align: center;
    animation: find-local-spinner 2s linear infinite; }
    .find-local__spinner.ng-leave {
      position: absolute;
      width: 100%;
      left: 0;
      animation: fade-out-up 500ms cubic-bezier(0, 0, 0.1, 1) forwards; }
  .find-local--shaded {
    background-color: #f5f5f5; }
    .find-local--shaded .find-local__result:nth-child(odd) {
      background-color: rgba(255, 255, 255, 0.5); }

@keyframes find-local-spinner {
  0% {
    opacity: 0.3; }
  50% {
    opacity: 1; }
  100% {
    opacity: 0.3; } }

.google-map {
  position: relative;
  height: 210px; }
  .google-map__bubble {
    position: absolute;
    left: 50%;
    width: 600px;
    margin-left: -300px;
    text-align: center;
    z-index: 3; }
  .google-map__bubble-text {
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    font-size: 16px;
    line-height: 21px;
    display: inline-block;
    position: relative;
    top: -65px;
    left: -2px;
    padding: 6px 24px;
    margin: 0;
    color: #fff;
    background-color: #E01220; }
    @media screen and (min-width: 440px) {
      .google-map__bubble-text {
        font-size: 19px;
        line-height: 28px; } }
    .google-map__bubble-text:after {
      content: '';
      display: block;
      position: absolute;
      width: 20px;
      height: 20px;
      left: 50%;
      bottom: -10px;
      margin-left: -10px;
      background-color: inherit;
      transform: rotate(45deg); }
  .google-map__loading {
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }
  .google-map--overlay {
    height: 420px;
    margin-top: -140px; }
    .google-map--overlay:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      height: 200px;
      width: 100%;
      z-index: 2;
      background-image: linear-gradient(to bottom, #f5f5f5 30%, rgba(245, 245, 245, 0)); }

.care-question {
  position: relative;
  overflow: hidden;
  margin-top: 28px;
  margin-bottom: 34px;
  text-align: center;
  color: #2f2c2f;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  border-top: 3px solid #cbcbca;
  border-bottom: 3px solid #cbcbca; }
  @media print {
    .care-question {
      display: none !important; } }
  .care-question__step {
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 56px;
    padding-bottom: 56px; }
    .care-question__step.ng-enter {
      animation: 1s; }
      .care-question__step.ng-enter > *,
      .care-question__step.ng-enter .care-question__form > * .care-question__options > * {
        animation-delay: 490ms; }
        .care-question__step.ng-enter > *:nth-child(1),
        .care-question__step.ng-enter .care-question__form > * .care-question__options > *:nth-child(1) {
          animation-delay: 70ms; }
        .care-question__step.ng-enter > *:nth-child(2),
        .care-question__step.ng-enter .care-question__form > * .care-question__options > *:nth-child(2) {
          animation-delay: 140ms; }
        .care-question__step.ng-enter > *:nth-child(3),
        .care-question__step.ng-enter .care-question__form > * .care-question__options > *:nth-child(3) {
          animation-delay: 210ms; }
        .care-question__step.ng-enter > *:nth-child(4),
        .care-question__step.ng-enter .care-question__form > * .care-question__options > *:nth-child(4) {
          animation-delay: 280ms; }
        .care-question__step.ng-enter > *:nth-child(5),
        .care-question__step.ng-enter .care-question__form > * .care-question__options > *:nth-child(5) {
          animation-delay: 350ms; }
        .care-question__step.ng-enter > *:nth-child(6),
        .care-question__step.ng-enter .care-question__form > * .care-question__options > *:nth-child(6) {
          animation-delay: 420ms; }
    .care-question__step.ng-leave {
      position: absolute;
      left: 0;
      top: 0;
      right: 0; }
  .care-question__title {
    font-size: 21px;
    line-height: 28px; }
    @media screen and (min-width: 440px) {
      .care-question__title {
        font-size: 26px;
        line-height: 35px; } }
    @media screen and (min-width: 720px) {
      .care-question__title {
        font-size: 27px;
        line-height: 35px; } }
    .care-question__title--main {
      margin-bottom: 60px; }
    .care-question__title--small {
      font-size: 19px;
      line-height: 28px; }
      @media screen and (min-width: 440px) {
        .care-question__title--small {
          font-size: 23px;
          line-height: 28px; } }
    .care-question__title--xsmall {
      font-family: "Maison Neue", Helvetica, sans-serif;
      font-weight: normal;
      font-size: 16px;
      line-height: 21px;
      margin-bottom: 6px; }
      @media screen and (min-width: 440px) {
        .care-question__title--xsmall {
          font-size: 19px;
          line-height: 28px; } }
  .care-question__form {
    display: block;
    max-width: 458px;
    margin: 0 auto 24px;
    padding: 0; }
    .care-question__form--wider {
      max-width: 678px; }
    .care-question__form--left {
      text-align: left; }
  .care-question__button--main {
    display: inline-block;
    max-width: calc(50% - 6px);
    min-width: 0; }
    @media (min-width: 720px) {
      .care-question__button--main {
        min-width: 180px; } }
  .care-question--footer {
    max-width: none;
    border-top: 0;
    border-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    background-color: #f5f5f5; }
  .care-question--transparent {
    background-color: transparent; }
  .care-question--active {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: none;
    color: #002B49;
    border-color: #40AAB8;
    background-color: #40AAB8; }
    .care-question--active.ng-animate {
      background: linear-gradient(-35deg, #f5f5f5 49%, #40AAB8 50.1%);
      background-size: 800% 800%;
      animation: show-focus-step 0.8s cubic-bezier(0, 0, 0.1, 1) forwards; }
      .care-question--active.ng-animate .care-question__form > * {
        animation-delay: 550ms; }
        .care-question--active.ng-animate .care-question__form > *:nth-child(1) {
          animation-delay: 250ms; }
        .care-question--active.ng-animate .care-question__form > *:nth-child(2) {
          animation-delay: 300ms; }
        .care-question--active.ng-animate .care-question__form > *:nth-child(3) {
          animation-delay: 350ms; }
        .care-question--active.ng-animate .care-question__form > *:nth-child(4) {
          animation-delay: 400ms; }
        .care-question--active.ng-animate .care-question__form > *:nth-child(5) {
          animation-delay: 450ms; }
        .care-question--active.ng-animate .care-question__form > *:nth-child(6) {
          animation-delay: 500ms; }

@keyframes show-focus-step {
  0% {
    background-position: -30% -20%; }
  100% {
    background-position: -69% -100%; } }

.promo {
  margin: 0 auto;
  max-width: 1580px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  padding: 0 2px; }
  @media (min-width: 720px) {
    .promo {
      flex-direction: row; } }
  @media (min-width: 960px) {
    .promo {
      flex-wrap: nowrap; } }
  .promo__intro-title {
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 15px;
    line-height: 21px;
    position: relative;
    margin-bottom: 7px;
    width: 100%; }
    @media screen and (min-width: 720px) {
      .promo__intro-title {
        font-size: 16px;
        line-height: 21px; } }
  .promo__title {
    font-family: "Noe Text", Helvetica, sans-serif;
    font-size: 21px;
    line-height: 28px;
    position: relative;
    margin-bottom: 0;
    width: 100%; }
    @media screen and (min-width: 440px) {
      .promo__title {
        font-size: 26px;
        line-height: 35px; } }
    @media screen and (min-width: 720px) {
      .promo__title {
        font-size: 27px;
        line-height: 35px; } }
  .promo__illustration {
    display: block;
    max-width: 120px;
    margin-top: -14px;
    margin-bottom: 28px; }
  .promo__item {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    margin: 2px;
    border-radius: 5px;
    overflow: hidden;
    border: 0;
    padding: 42px 12px 7px;
    color: #E01220;
    background-color: #eeeeef;
    transition: transform 100ms ease-in;
    will-change: transform; }
    @media (min-width: 720px) {
      .promo__item {
        width: calc(50% - 4px);
        padding: 42px 24px 14px; } }
    @media (min-width: 960px) {
      .promo__item {
        width: 22%; } }
    .promo__item:hover, .promo__item:focus {
      color: #E01220;
      transform: translateY(-7px);
      box-shadow: 0 0 20px rgba(30, 30, 30, 0.06);
      transition: transform 200ms cubic-bezier(0, 0, 0.1, 1); }
    .promo__item--large {
      min-height: 280px; }
      @media (min-width: 720px) {
        .promo__item--large {
          width: 100%; } }
      @media (min-width: 960px) {
        .promo__item--large {
          width: 56%; } }
    .promo__item--image {
      color: #fff;
      background-size: cover;
      background-position: right; }
      .promo__item--image:hover, .promo__item--image:focus {
        color: #fff; }
      .promo__item--image:before {
        content: '';
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 80%;
        background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.4));
        mix-blend-mode: multiply; }
    .promo__item--red {
      background-color: #E01220; }
      .promo__item--red, .promo__item--red:hover, .promo__item--red:focus {
        color: #fff; }
    .promo__item--purple {
      background-color: #B9A3E3; }
    .promo__item--green {
      background-color: #6ECEB2; }
    .promo__item--blue {
      background-color: #99D6EA; }
    .promo__item--purple, .promo__item--purple:hover, .promo__item--purple:focus, .promo__item--green, .promo__item--green:hover, .promo__item--green:focus, .promo__item--blue, .promo__item--blue:hover, .promo__item--blue:focus {
      color: rgba(0, 0, 0, 0.75); }

/* Letter list

Example: {type: isolated}
    <section class="page-section  page-section--last">

        <ul class="letterlist">
            <li class="letterlist__section">
                <div class="letterlist__letter">
                    <h2 class="letterlist__title">A</h2>
                </div>
                <nav class="letterlist__items">
                    <h3 class="letterlist__item">
                        <a href="http://www.ape.no" class="letterlist__link">Apekatt</a>
                    </h3>
                </nav>
            </li>
            <li class="letterlist__section">
                <div class="letterlist__letter">
                    <h2 class="letterlist__title">B</h2>
                </div>
                <nav class="letterlist__items">
                    <h3 class="letterlist__item">
                        <a href="http://www.bavian.no" class="letterlist__link">Bavian</a>
                    </h3>
                    <h3 class="letterlist__item">
                        <a href="http://www.bamse.no" class="letterlist__link">Bamse</a>
                    </h3>
                    <h3 class="letterlist__item">
                        <a href="http://www.bever.no" class="letterlist__link">Bever</a>
                    </h3>
                    <h3 class="letterlist__item">
                        <a href="http://www.bjron.no" class="letterlist__link">Bjørn</a>
                    </h3>
                </nav>
            </li>
            <li class="letterlist__section">
                <div class="letterlist__letter">
                    <h2 class="letterlist__title">E</h2>
                </div>
                <nav class="letterlist__items">
                    <h3 class="letterlist__item">
                        <a href="http://www.elg.no" class="letterlist__link">Elg</a>
                    </h3>
                </nav>
            </li>
            <li class="letterlist__section">
                <div class="letterlist__letter">
                    <h2 class="letterlist__title">S</h2>
                </div>
                <nav class="letterlist__items">
                    <h3 class="letterlist__item">
                        <a href="http://www.sau.no" class="letterlist__link">Sau</a>
                    </h3>
                </nav>
            </li>
            <li class="letterlist__section">
                <div class="letterlist__letter">
                    <h2 class="letterlist__title">U</h2>
                </div>
                <nav class="letterlist__items">
                    <h3 class="letterlist__item">
                        <a href="http://www.ulv.no" class="letterlist__link">Ulv</a>
                    </h3>
                </nav>
            </li>
        </ul>

    </section>

Styleguide components.letter-list
*/
.letterlist {
  position: relative;
  max-width: 692px;
  margin: 0 auto; }
  .letterlist__section {
    animation-delay: 330ms;
    display: flex;
    margin-bottom: 3px;
    background-color: #fff; }
    .letterlist__section:nth-child(1) {
      animation-delay: 30ms; }
    .letterlist__section:nth-child(2) {
      animation-delay: 60ms; }
    .letterlist__section:nth-child(3) {
      animation-delay: 90ms; }
    .letterlist__section:nth-child(4) {
      animation-delay: 120ms; }
    .letterlist__section:nth-child(5) {
      animation-delay: 150ms; }
    .letterlist__section:nth-child(6) {
      animation-delay: 180ms; }
    .letterlist__section:nth-child(7) {
      animation-delay: 210ms; }
    .letterlist__section:nth-child(8) {
      animation-delay: 240ms; }
    .letterlist__section:nth-child(9) {
      animation-delay: 270ms; }
    .letterlist__section:nth-child(10) {
      animation-delay: 300ms; }
    @media (min-width: 720px) {
      .letterlist__section:first-of-type {
        border-top-left-radius: 5px;
        border-top-right-radius: 5px; }
        .letterlist__section:first-of-type .letterlist__letter {
          border-top-left-radius: 5px; } }
    @media (min-width: 720px) {
      .letterlist__section:last-of-type {
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px; }
        .letterlist__section:last-of-type .letterlist__letter {
          border-bottom-left-radius: 5px; } }
    .letterlist__section.ng-leave {
      animation: fade-out 100ms cubic-bezier(0, 0, 0.1, 1); }
  .letterlist__letter {
    text-align: center;
    min-width: 36px;
    padding-top: 13px;
    padding-bottom: 13px;
    color: #fff;
    background-color: #E01220; }
    @media (min-width: 720px) {
      .letterlist__letter {
        min-width: 42px; } }
  .letterlist__items {
    padding: 7px 24px; }
  .letterlist__item {
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: normal;
    font-size: 16px;
    line-height: 21px;
    hyphens: none;
    word-wrap: normal;
    display: inline-block;
    margin-right: 30px;
    margin-top: 6px;
    margin-bottom: 6px; }
    @media screen and (min-width: 440px) {
      .letterlist__item {
        font-size: 19px;
        line-height: 28px; } }
    .letterlist__item.ng-enter {
      animation: fade-in 300ms ease-out; }
    .letterlist__item.ng-leave {
      animation: fade-out 100ms cubic-bezier(0, 0, 0.1, 1); }
  .letterlist__link {
    border-color: transparent; }
  .letterlist__title {
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    font-size: 16px;
    line-height: 21px;
    margin: 0; }
    @media screen and (min-width: 440px) {
      .letterlist__title {
        font-size: 19px;
        line-height: 28px; } }

.get-involved {
  padding-top: 35px;
  padding-bottom: 35px;
  color: #fff;
  background-color: #E01220; }
  @media print {
    .get-involved {
      display: none !important; } }
  @media (min-width: 840px) {
    .get-involved {
      flex-direction: row;
      padding-top: 63px;
      padding-bottom: 63px; } }
  .get-involved__content {
    margin: 0 auto;
    padding-left: 12px;
    padding-right: 12px;
    max-width: 1110px;
    display: flex;
    justify-content: center;
    flex-direction: column; }
    @media (min-width: 440px) {
      .get-involved__content {
        padding-left: 24px;
        padding-right: 24px; } }
    @media (min-width: 720px) {
      .get-involved__content {
        padding-left: 60px;
        padding-right: 60px; } }
    @media (min-width: 840px) {
      .get-involved__content {
        padding-left: 24px;
        padding-right: 24px;
        flex-direction: row; } }
  .get-involved__primary {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-bottom: 21px; }
    @media (min-width: 840px) {
      .get-involved__primary {
        padding-top: 28px;
        padding-bottom: 28px;
        width: 55%;
        padding-right: 60px; } }
  .get-involved__donate {
    width: 100%;
    margin: 0 auto;
    padding: 14px 18px;
    color: #2f2c2f;
    border-radius: 5px;
    background-color: #fff; }
    @media (min-width: 840px) {
      .get-involved__donate {
        width: 45%;
        margin: 0;
        padding: 28px 42px; } }
  .get-involved__intro-title {
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 15px;
    margin-top: auto;
    margin-bottom: 7px; }
    @media screen and (min-width: 720px) {
      .get-involved__intro-title {
        font-size: 16px; } }
  .get-involved__title {
    max-width: 100%;
    hyphens: none;
    overflow-wrap: none;
    word-break: none; }
    @media (min-width: 840px) {
      .get-involved__title {
        margin-bottom: 63px; } }
    @media (min-width: 960px) {
      .get-involved__title {
        font-size: 60px;
        line-height: 77px; } }
    @media (min-width: 1240px) {
      .get-involved__title {
        font-size: 76px;
        line-height: 98px; } }
  .get-involved__button-group {
    display: flex;
    margin-top: auto; }
  .get-involved__button:not(.get-involved__button--donate) {
    margin-right: 6px; }
    @media (min-width: 870px) {
      .get-involved__button:not(.get-involved__button--donate) {
        margin-right: 24px; } }
  .get-involved__button--donate {
    margin-top: 30px; }
  .get-involved__option {
    margin-bottom: 7px; }
  .get-involved--header {
    padding-top: 77px; }
    @media (min-width: 720px) {
      .get-involved--header {
        padding-top: 112px; } }
  .get-involved--light {
    color: #E01220;
    background-color: #f5f5f5; }

/* Receipt

Example: Single item without item description

    <div class="receipt">
        <section class="receipt__item">
            <div class="receipt__iteminfo">
                <h2 class="receipt__itemtitle">
                    Donasjon
                </h2>
            </div>
            <p class="receipt__itemprice">
                Kr. 500
            </p>
        </section>
        <div class="receipt__summary">
            <p class="receipt__summarymeta">
                MVA: Kr. 0 (0%)
            </p>
            <p class="receipt__summaryprice">
                Totalsum: Kr. 500
            </p>
        </div>
    </div>


Example: Single item with item description

    <div class="receipt">
        <section class="receipt__item">
            <div class="receipt__iteminfo">
                <h2 class="receipt__itemtitle">
                    Donasjon
                </h2>
                <p class="receipt__itemdescription">
                    Månedlig frem til valget
                </p>
            </div>
            <p class="receipt__itemprice">
                Kr. 500
            </p>
        </section>
        <div class="receipt__summary">
            <ul class="receipt__summarymeta">
                <li class="receipt__summarymetaitem">
                    MVA: Kr. 0 (0%)
                </li>
                <li class="receipt__summarymetaitem">
                    Org. nr.: 971 526 939
                </li>
                <li class="receipt__summarymetaitem">
                    Arbeiderpartiet
                    Postboks 8743
                    Youngstorget 0028 Oslo
                </li>
            </ul>
            <p class="receipt__summaryprice">
                Totalsum: Kr. 500
            </p>
        </div>
    </div>


Example: Multiple items

    <div class="receipt">
        <section class="receipt__item">
            <div class="receipt__iteminfo">
                <h2 class="receipt__itemtitle">
                    Order item A
                </h2>
                <p class="receipt__itemdescription">
                    Some description here
                </p>
            </div>
            <p class="receipt__itemprice">
                Kr. 800
            </p>
        </section>
        <section class="receipt__item">
            <div class="receipt__iteminfo">
                <h2 class="receipt__itemtitle">
                    Order item B
                </h2>
            </div>
            <p class="receipt__itemprice">
                Kr. 200
            </p>
        </section>
        <div class="receipt__summary">
            <ul class="receipt__summarymeta">
                <li class="receipt__summarymetaitem">
                    MVA: Kr. 0 (0%)
                </li>
                <li class="receipt__summarymetaitem">
                    Org. nr.: 971 526 939
                </li>
                <li class="receipt__summarymetaitem">
                    Arbeiderpartiet
                    Postboks 8743
                    Youngstorget 0028 Oslo
                </li>
            </ul>
            <p class="receipt__summaryprice">
                Totalsum: Kr. 1000
            </p>
        </div>
    </div>


Example: {type: isolated} Full receipt example

    <header class="page-cover">
        <h1 class="page-cover__title  page-cover__title--small">
            Din kvittering fra Arbeiderpartiet
        </h1>
        <p class="page-cover__description">
            Ordrenummer: 10, lørdag 10.08.16, 07:24
        </p>
    </header>

    <section class="page-section">
        <div class="container  container--tight">
            <div class="receipt">
                <section class="receipt__item">
                    <div class="receipt__iteminfo">
                        <h2 class="receipt__itemtitle">
                            Donasjon
                        </h2>
                        <p class="receipt__itemdescription">
                            Månedlig frem til valget
                        </p>
                    </div>
                    <p class="receipt__itemprice">
                        Kr. 500
                    </p>
                </section>
                <div class="receipt__summary">
                    <ul class="receipt__summarymeta">
                        <li class="receipt__summarymetaitem">
                            MVA: Kr. 0 (0%)
                        </li>
                        <li class="receipt__summarymetaitem">
                            Org. nr.: 971 526 939
                        </li>
                        <li class="receipt__summarymetaitem">
                            Arbeiderpartiet
                            Postboks 8743
                            Youngstorget 0028 Oslo
                        </li>
                    </ul>
                    <p class="receipt__summaryprice">
                        Totalsum: Kr. 500
                    </p>
                </div>
            </div>

            <p class="receipt__printbuttonwrapper">
                <button class="button button--hidden-in-print">
                    Skriv ut kvitteringen
                </button>
            </p>
        </div>
    </section>
Styleguide components.receipt
*/
.receipt {
  width: 100%; }
  .receipt__item {
    padding: 12px 0;
    border-bottom: 2px solid #cbcbca; }
  .receipt__itemtitle {
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: normal;
    font-size: 16px;
    line-height: 21px;
    margin: 0; }
    @media screen and (min-width: 440px) {
      .receipt__itemtitle {
        font-size: 19px;
        line-height: 28px; } }
  .receipt__itemdescription {
    font-size: 15px;
    line-height: 21px; }
    @media screen and (min-width: 720px) {
      .receipt__itemdescription {
        font-size: 16px;
        line-height: 21px; } }
  .receipt__summary {
    margin-top: 28px; }
  .receipt__summarymeta {
    margin: 0;
    font-size: 15px;
    line-height: 21px; }
    @media screen and (min-width: 720px) {
      .receipt__summarymeta {
        font-size: 16px;
        line-height: 21px; } }
  .receipt__summaryprice {
    margin: 0;
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold; }
  .receipt__printbuttonwrapper {
    margin-top: 60px;
    text-align: center; }
    @media print {
      .receipt__printbuttonwrapper {
        display: none; } }
  @media (min-width: 720px) {
    .receipt__item {
      display: flex; }
    .receipt__iteminfo {
      flex: 5 2 70%; }
    .receipt__itemprice {
      flex: 1 1 30%;
      text-align: right; }
    .receipt__summary {
      display: flex; }
    .receipt__summarymeta {
      flex: 2 1 50%; }
    .receipt__summaryprice {
      flex: 1 1 50%;
      text-align: right; } }

.mittap-cover {
  margin-top: -35px; }
  .mittap-cover__content {
    margin: 0 auto;
    padding-left: 12px;
    padding-right: 12px;
    max-width: 1110px;
    text-align: left; }
    @media (min-width: 440px) {
      .mittap-cover__content {
        padding-left: 24px;
        padding-right: 24px; } }
    @media (min-width: 720px) {
      .mittap-cover__content {
        padding-left: 60px;
        padding-right: 60px; } }
    @media (min-width: 720px) {
      .mittap-cover__content {
        display: flex;
        align-items: center;
        flex-direction: row; } }
  .mittap-cover__search, .mittap-cover__personal {
    position: relative;
    padding: 21px 24px;
    border: 3px solid #E01220;
    border-radius: 5px;
    background-color: #fff; }
    @media (min-width: 720px) {
      .mittap-cover__search, .mittap-cover__personal {
        padding: 28px 42px;
        width: 50%;
        flex-shrink: 0; } }
  .mittap-cover__search {
    animation: mittap-box-left 400ms cubic-bezier(0, 0, 0.1, 1) both;
    z-index: 2;
    margin-left: -18px;
    margin-right: -18px; }
    @media (min-width: 720px) {
      .mittap-cover__search {
        margin: 0;
        margin-right: -12px; } }
  .mittap-cover__personal {
    animation: mittap-box-right 400ms cubic-bezier(0, 0, 0.1, 1) both;
    animation-delay: 30ms;
    margin-top: -7px;
    border-color: #40AAB8; }
    @media (min-width: 720px) {
      .mittap-cover__personal {
        margin: 0;
        margin-left: -12px; } }
  .mittap-cover__name, .mittap-cover__label {
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    font-size: 21px;
    line-height: 28px;
    display: block;
    color: #2f2c2f;
    margin-bottom: 21px; }
    @media screen and (min-width: 440px) {
      .mittap-cover__name, .mittap-cover__label {
        font-size: 26px;
        line-height: 35px; } }
    @media screen and (min-width: 720px) {
      .mittap-cover__name, .mittap-cover__label {
        font-size: 27px;
        line-height: 35px; } }
  .mittap-cover__name {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%; }
  .mittap-cover__icon-user {
    position: relative;
    top: -0.1em;
    vertical-align: middle;
    margin-right: 6px; }

@keyframes mittap-box-left {
  0% {
    transform: translateX(50px); }
  50% {
    transform: translateX(-8px); } }

@keyframes mittap-box-right {
  0% {
    transform: translateX(-50px); }
  50% {
    transform: translateX(8px); } }

.locals-header {
  position: relative;
  z-index: 20;
  font-size: 15px;
  line-height: 21px;
  padding: 7px 0;
  color: #2f2c2f;
  background-color: #fff; }
  @media screen and (min-width: 720px) {
    .locals-header {
      font-size: 16px;
      line-height: 21px; } }
  .locals-header__content {
    margin: 0 auto;
    padding-left: 12px;
    padding-right: 12px;
    max-width: 1400px; }
    @media (min-width: 440px) {
      .locals-header__content {
        padding-left: 24px;
        padding-right: 24px; } }
    @media (min-width: 720px) {
      .locals-header__content {
        padding-left: 60px;
        padding-right: 60px; } }
  .locals-header__item {
    color: inherit;
    border-color: transparent; }
  .locals-header__separator {
    vertical-align: middle;
    margin: -2px 6px 0;
    transform: scale(0.7); }

.drag-and-drop-droparea {
  padding: 48px 24px;
  border: 3px dashed #e3e4e3;
  cursor: pointer; }
  .drag-and-drop-droparea--active {
    border-color: #828383; }
  .drag-and-drop-droparea--error {
    border-color: #d53c3c; }
  .drag-and-drop-droparea--disabled {
    border-color: #e3e4e3; }

.login__pagetitle {
  font-size: 28px;
  line-height: 35px;
  color: #E01220;
  text-align: center; }
  @media screen and (min-width: 440px) {
    .login__pagetitle {
      font-size: 36px;
      line-height: 49px; } }
  @media screen and (min-width: 720px) {
    .login__pagetitle {
      font-size: 40px;
      line-height: 49px; } }

.login #cradmin_authenticate_login_forgotpasswordlink {
  padding-top: 28px;
  text-align: center; }

.login__box {
  padding: 21px 24px; }
  .login__box--message {
    border: 3px solid #E01220;
    margin-bottom: 28px; }

.login__title {
  font-size: 19px;
  line-height: 28px;
  text-align: center; }
  @media screen and (min-width: 440px) {
    .login__title {
      font-size: 23px;
      line-height: 28px; } }

.login__container {
  margin: 0 auto;
  padding-left: 12px;
  padding-right: 12px;
  max-width: 620px; }
  @media (min-width: 440px) {
    .login__container {
      padding-left: 24px;
      padding-right: 24px; } }
  @media (min-width: 720px) {
    .login__container {
      padding-left: 60px;
      padding-right: 60px; } }
  .login__container .adminui-page-section--tight {
    padding: 0;
    max-width: 100%; }

.page-politics-fix .separations,
.page-politics-fix .page-section--focus {
  background-color: #f5f5f5; }

.mittap-imagebuilder-canvas--cover-photo {
  zoom: 20%; }
  @media (min-width: 550px) {
    .mittap-imagebuilder-canvas--cover-photo {
      zoom: 33%; } }
  @media (min-width: 720px) {
    .mittap-imagebuilder-canvas--cover-photo {
      zoom: 43%; } }
  @media (min-width: 960px) {
    .mittap-imagebuilder-canvas--cover-photo {
      zoom: 58%; } }

.mittap-imagebuilder-canvas--quote-poster {
  zoom: 30%; }
  @media (min-width: 550px) {
    .mittap-imagebuilder-canvas--quote-poster {
      zoom: 57%; } }
  @media (min-width: 720px) {
    .mittap-imagebuilder-canvas--quote-poster {
      zoom: 75%; } }

.mittap-imagebuilder-canvas--event-poster {
  zoom: 30%; }
  @media (min-width: 550px) {
    .mittap-imagebuilder-canvas--event-poster {
      zoom: 57%; } }
  @media (min-width: 720px) {
    .mittap-imagebuilder-canvas--event-poster {
      zoom: 75%; } }

.mittap-imagebuilder-canvas--message-poster {
  zoom: 30%; }
  @media (min-width: 550px) {
    .mittap-imagebuilder-canvas--message-poster {
      zoom: 57%; } }
  @media (min-width: 720px) {
    .mittap-imagebuilder-canvas--message-poster {
      zoom: 75%; } }

/* IEVV designer container edit

Example: {type: isolated} Unexpanded

  <div class="ievv-designer-containeredit">
    <div class="ievv-designer-containeredit__buttonbar">
        <button type="button"
                class="ievv-designer-containeredit__barbutton ievv-designer-containeredit__barbutton--icon">
            <span class="icon-chevron-down ievv-designer-containeredit__barbutton-icon"
                aria-hidden="true"></span>
        </button>
        <button type="button"
                class="ievv-designer-containeredit__barbutton ievv-designer-containeredit__barbutton--toggle">
            Add section
        </button>
    </div>
    <div class="ievv-designer-containeredit__addbuttons">
      <button type="button"
              class="ievv-designer-containeredit__addbutton">
        Text
      </button>
      <button type="button"
              class="ievv-designer-containeredit__addbutton">
        List
      </button>
    </div>
  </div>

Example: {type: isolated} Expanded
  <div style="min-height: 300px">
      <!-- we need a wrapper to ensure the body is high enough. This will normally not be needed unless you have an empty body -->
      <div class="ievv-designer-containeredit  ievv-designer-containeredit--expanded">
        <div class="ievv-designer-containeredit__buttonbar">
            <button type="button"
                    class="ievv-designer-containeredit__barbutton">
                <span class="icon-chevron-down ievv-designer-containeredit__barbutton-icon"
                    aria-hidden="true"></span>
            </button>
            <button type="button"
                    class="ievv-designer-containeredit__barbutton ievv-designer-containeredit__barbutton--toggle">
                Add section
            </button>
        </div>
        <div class="ievv-designer-containeredit__addbuttons">
          <button type="button" class="ievv-designer-containeredit__addbutton">
            Text
          </button>
          <button type="button" class="ievv-designer-containeredit__addbutton">
            List
          </button>
        </div>
      </div>
  </div>

Styleguide components.ievv-designer-containeredit
*/
.ievv-designer-containeredit {
  margin-top: 14px;
  position: relative;
  overflow: visible;
  text-align: center; }
  .ievv-designer-containeredit--top {
    margin-bottom: 0; }
  .ievv-designer-containeredit--bottom {
    margin-bottom: 0; }
  .ievv-designer-containeredit__buttonbar {
    margin: 0 auto;
    padding-left: 12px;
    padding-right: 12px;
    max-width: 1110px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap; }
    @media (min-width: 440px) {
      .ievv-designer-containeredit__buttonbar {
        padding-left: 24px;
        padding-right: 24px; } }
    @media (min-width: 720px) {
      .ievv-designer-containeredit__buttonbar {
        padding-left: 60px;
        padding-right: 60px; } }
  .ievv-designer-containeredit__barbutton {
    margin: 0 3px; }
  .ievv-designer-containeredit__barbutton-icon {
    margin-top: 5px; }
  .ievv-designer-containeredit__addbutton {
    margin: 0;
    width: 50%;
    border-radius: 0;
    margin-right: -3px;
    margin-bottom: -3px; }
    .ievv-designer-containeredit__addbutton:hover, .ievv-designer-containeredit__addbutton:focus {
      color: #002B49; }
    @media (min-width: 720px) {
      .ievv-designer-containeredit__addbutton {
        width: auto; }
        .ievv-designer-containeredit__addbutton:first-of-type {
          border-top-left-radius: 5px;
          border-bottom-left-radius: 5px; }
        .ievv-designer-containeredit__addbutton:last-of-type {
          border-top-right-radius: 5px;
          border-bottom-right-radius: 5px; } }
  .ievv-designer-containeredit__addbuttons {
    display: none;
    background-color: #002B49;
    padding-top: 28px;
    padding-bottom: 31px;
    padding-left: 24px;
    padding-right: 24px; }
    @media (min-width: 720px) {
      .ievv-designer-containeredit__addbuttons {
        padding-left: 24px;
        padding-right: 27px; } }
  .ievv-designer-containeredit--expanded .ievv-designer-containeredit__barbutton--toggle {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin: 0 3px; }
    .ievv-designer-containeredit--expanded .ievv-designer-containeredit__barbutton--toggle:hover, .ievv-designer-containeredit--expanded .ievv-designer-containeredit__barbutton--toggle:focus {
      color: #fff;
      background-color: #002B49; }
  .ievv-designer-containeredit--expanded .ievv-designer-containeredit__addbuttons {
    display: block; }
  .ievv-designer-containeredit--expanded .ievv-designer-containeredit__addbutton {
    animation-delay: 270ms; }
    .ievv-designer-containeredit--expanded .ievv-designer-containeredit__addbutton:nth-child(1) {
      animation-delay: 30ms; }
    .ievv-designer-containeredit--expanded .ievv-designer-containeredit__addbutton:nth-child(2) {
      animation-delay: 60ms; }
    .ievv-designer-containeredit--expanded .ievv-designer-containeredit__addbutton:nth-child(3) {
      animation-delay: 90ms; }
    .ievv-designer-containeredit--expanded .ievv-designer-containeredit__addbutton:nth-child(4) {
      animation-delay: 120ms; }
    .ievv-designer-containeredit--expanded .ievv-designer-containeredit__addbutton:nth-child(5) {
      animation-delay: 150ms; }
    .ievv-designer-containeredit--expanded .ievv-designer-containeredit__addbutton:nth-child(6) {
      animation-delay: 180ms; }
    .ievv-designer-containeredit--expanded .ievv-designer-containeredit__addbutton:nth-child(7) {
      animation-delay: 210ms; }
    .ievv-designer-containeredit--expanded .ievv-designer-containeredit__addbutton:nth-child(8) {
      animation-delay: 240ms; }

/* IEVV designer loading message

Example: {type: isolated}

  <div class="ievv-designer-loadingmessage">
    Loading ...
  </div>

Styleguide components.ievv-designer.loadingmessage
*/
.ievv-designer-loadingmessage {
  text-align: center;
  color: #686969; }

/* Ievv-designer editsection

Example: {type: isolated} Simple

    <div class='ievv-designer-editsection'>
        Section 1
    </div>
    <div class='ievv-designer-editsection'>
        Section 2
    </div>

Example: {type: isolated} With titles

    <div class='ievv-designer-editsection'>
        <h2 class='ievv-designer-editsection__title'>Section 1</h2>
        Some content here
    </div>
    <div class='ievv-designer-editsection'>
        <h2 class='ievv-designer-editsection__title'>Section 2</h2>
        Some content here
    </div>

Example: {type: isolated} Combined with editarea and previewarea, and with help

    <div style='padding-bottom: 40px;'> <!-- Wrapper just here to show bottom border etc. -->
        <div class='ievv-designer-editsection'>
            <h2 class='ievv-designer-editsection__title'>The title</h2>
            <div class='ievv-designer-editsection__help'>
                <p class='paragraph paragraph--xtight'>Some help here</p>
                <p class='paragraph paragraph--xtight'>
                    And some <a href='http://example.com' target='blank'>more help</a>
                </p>
            </div>
            <div class='ievv-designer-editarea'>
                <div class='ievv-designer-editarea__section'>
                    <h3 class='ievv-designer-editarea__title'>Primary stuff</h3>
                    <div class='container'>
                        <div class="fieldwrapper">
                            <label class="label" for="id_myfield">
                                Standard input
                            </label>
                            <input type="text" placeholder="I set the standard"
                                id="id_myfield"
                                class="input input--outlined" />
                            <p class="help-text">
                                Vestibulum id ligula porta felis euismod semper.
                                Nullam id dolor id nibh ultricies vehicula ut id elit.
                            </p>
                        </div>
                    </div>
                </div>
                <div class='ievv-designer-editarea__section'>
                    <h3 class='ievv-designer-editarea__title'>Other stuff</h3>
                    <div class='container'>
                        <p>Something to edit here ...</p>
                        <p>Something more to edit here ...</p>
                    </div>
                </div>
            </div>
            <div class='ievv-designer-previewarea'>
                <h3 class='ievv-designer-previewarea__title'>Preview</h3>
                <p>The preview is here to stay!</p>
            </div>
        </div>
        <div class='ievv-designer-editsection'>
            <div class='ievv-designer-editarea'>
                <div class='ievv-designer-editarea__section'>
                    <p>Something to edit here ...</p>
                </div>
            </div>
            <div class='ievv-designer-previewarea'>
                <h3 class='ievv-designer-previewarea__title'>Preview</h3>
                <p>The preview is here to stay!</p>
            </div>
        </div>
    </div>

Styleguide components.ievv-designer-editsection
*/
.ievv-designer-editsection {
  border: #044B7F solid 3px;
  margin-bottom: 24px;
  margin-left: 6px;
  margin-right: 6px;
  overflow: hidden; }
  @media (min-width: 960px) {
    .ievv-designer-editsection {
      margin-left: 12px;
      margin-right: 12px; } }
  .ievv-designer-editsection__title {
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    font-size: 16px;
    line-height: 21px;
    margin: 0;
    padding: 6px 12px;
    background-color: #044B7F;
    color: #fff;
    text-align: center; }
    @media screen and (min-width: 440px) {
      .ievv-designer-editsection__title {
        font-size: 19px;
        line-height: 28px; } }
  .ievv-designer-editsection__help {
    background-color: #fff;
    border-bottom: 3px solid #044B7F;
    color: #000;
    padding: 12px;
    text-align: center;
    margin: 0;
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-size: 15px;
    line-height: 21px; }
    @media screen and (min-width: 720px) {
      .ievv-designer-editsection__help {
        font-size: 16px;
        line-height: 21px; } }
    .ievv-designer-editsection__help *:last-child {
      margin-bottom: 0; }
    .ievv-designer-editsection__help, .ievv-designer-editsection__help a, .ievv-designer-editsection__help a:hover {
      color: #000; }
    .ievv-designer-editsection__help a, .ievv-designer-editsection__help a:hover {
      border-color: #000; }

/* Ievv-designer editarea

See the ``ievv-designer-editsection`` component for more examples.

Example: {type: isolated} Single editarea section

    <div style='padding-bottom: 40px;'> <!-- Wrapper just here to show bottom border etc. -->
        <div class='ievv-designer-editarea'>
            <div class='ievv-designer-editarea__section'>
                <div class="fieldwrapper">
                    <label class="label" for="id_myfield">
                        Standard input
                    </label>
                    <input type="text" placeholder="I set the standard"
                        id="id_myfield"
                        class="input input--outlined" />
                    <p class="help-text">
                        Vestibulum id ligula porta felis euismod semper.
                        Nullam id dolor id nibh ultricies vehicula ut id elit.
                    </p>
                </div>
            </div>
        </div>
    </div>


Example: {type: isolated} Multiple editarea sections

    <div style='padding-bottom: 40px;'> <!-- Wrapper just here to show bottom border etc. -->
        <div class='ievv-designer-editarea'>
            <div class='ievv-designer-editarea__section'>
                <h3 class='ievv-designer-editarea__title'>Primary stuff</h3>
                <div class="fieldwrapper">
                    <label class="label" for="id_myfield">
                        Standard input
                    </label>
                    <input type="text" placeholder="I set the standard"
                        id="id_myfield"
                        class="input input--outlined" />
                    <p class="help-text">
                        Vestibulum id ligula porta felis euismod semper.
                        Nullam id dolor id nibh ultricies vehicula ut id elit.
                    </p>
                </div>
            </div>
            <div class='ievv-designer-editarea__section ievv-designer-editarea__section--last'>
                <h3 class='ievv-designer-editarea__title'>Other stuff</h3>
                <p>Something to edit here ...</p>
                <p>Something more to edit here ...</p>
            </div>
        </div>

        <p>Some content below</p>
    </div>

Styleguide components.ievv-designer-editarea
*/
.ievv-designer-editarea {
  background-color: #fff; }
  .ievv-designer-editarea__section {
    padding: 6px; }
    @media (min-width: 960px) {
      .ievv-designer-editarea__section {
        padding: 12px; } }
    .ievv-designer-editarea__section *:last-child {
      margin-bottom: 0; }
    .ievv-designer-editarea__section--last {
      border-bottom: 1px solid #044B7F; }
    .ievv-designer-editarea__section--no-padding {
      padding: 0; }
      @media (min-width: 960px) {
        .ievv-designer-editarea__section--no-padding {
          padding: 0; } }
      .ievv-designer-editarea__section--no-padding .ievv-designer-editarea__title {
        margin-left: 0;
        margin-right: 0; }
  .ievv-designer-editarea__title {
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    font-size: 15px;
    line-height: 21px;
    margin: -24px -24px;
    padding: 6px 12px;
    background-color: #82a5bf;
    color: #000;
    text-align: center;
    margin-bottom: 24px; }
    @media screen and (min-width: 720px) {
      .ievv-designer-editarea__title {
        font-size: 16px;
        line-height: 21px; } }
    .ievv-designer-editarea__title:first-child {
      margin-top: -24px; }
  .ievv-designer-editarea:last-child .ievv-designer-editarea__section:last-child {
    border-bottom: none; }

/* Ievv-designer previewarea

See the ``ievv-designer-editsection`` component for examples.


Styleguide components.ievv-designer-previewarea
*/
.ievv-designer-previewarea {
  position: relative; }
  .ievv-designer-previewarea__title {
    display: block;
    text-align: center;
    padding: 5px 12px 6px 12px;
    background-color: #82a5bf;
    text-align: center;
    color: #000;
    margin: 0;
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    font-size: 15px;
    line-height: 21px; }
    @media screen and (min-width: 720px) {
      .ievv-designer-previewarea__title {
        font-size: 16px;
        line-height: 21px; } }

/* Ievv-designer flatstructure

Example: {type: isolated}

    <div class='ievv-designer-flatstructure'>
        <div class="ievv-designer-flatstructure-section">
            <div class="ievv-designer-flatstructure-section__header">
                <div class="ievv-designer-flatstructure-section__title">
                    The title
                </div>
                <div class="ievv-designer-flatstructure-section__description">
                    Some description here
                </div>
            </div>
            <div class="ievv-designer-flatstructure-section__bar">
                <button type="button" class="ievv-designer-flatstructure-section__button ievv-designer-flatstructure-section__button--down" aria-label="Move down">
                    Move down
                </button>
                <button type="button" class="ievv-designer-flatstructure-section__button ievv-designer-flatstructure-section__button--remove" aria-label="Delete section">
                    Delete section
                </button>
            </div>

            <div class="ievv-designer-flatstructure-section__content">
                <div class="container">
                    <p>Vestibulum id ligula porta felis euismod semper. Nulla vitae elit libero, a pharetra augue. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Donec sed odio dui.</p>

                    <p>Maecenas faucibus mollis interdum. Sed posuere consectetur est at lobortis. Nulla vitae elit libero, a pharetra augue. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>

                    <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla. Curabitur blandit tempus porttitor.</p>
                </div>
            </div>
        </div>

        <div class="ievv-designer-flatstructure-section">
            <div class="ievv-designer-flatstructure-section__bar">
                <button type="button" class="ievv-designer-flatstructure-section__button ievv-designer-flatstructure-section__button--up" aria-label="Move up">
                    Move up
                </button>
                <button type="button" class="ievv-designer-flatstructure-section__button ievv-designer-flatstructure-section__button--down" aria-label="Move down">
                    Move down
                </button>
                <button type="button" class="ievv-designer-flatstructure-section__button ievv-designer-flatstructure-section__button--remove" aria-label="Delete section">
                    Delete section
                </button>
            </div>

            <div class="ievv-designer-flatstructure-section__content">
                <div class="container">
                    <p>Vestibulum id ligula porta felis euismod semper. Nulla vitae elit libero, a pharetra augue. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Donec sed odio dui.</p>

                    <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla. Curabitur blandit tempus porttitor.</p>
                </div>
            </div>
        </div>
        <div class="ievv-designer-flatstructure-add">
            <p class="ievv-designer-flatstructure-add__header">
                Add more content
            </p>
            <div class="ievv-designer-flatstructure-add__buttonbar">
                <button class="ievv-designer-flatstructure-add__button">
                    <span class="ievv-designer-flatstructure-add__buttonicon">
                        <span class='cricon cricon--text' aria-hidden='true'></span>
                    </span>
                    <span class="ievv-designer-flatstructure-add__buttonlabel">Text</span>
                </button>
                <button class="ievv-designer-flatstructure-add__button">
                    <span class="ievv-designer-flatstructure-add__buttonlabel">Image</span>
                </button>
                <button class="ievv-designer-flatstructure-add__button">
                    <span class="ievv-designer-flatstructure-add__buttonlabel">Item 3</span>
                </button>
                <button class="ievv-designer-flatstructure-add__button">
                    <span class="ievv-designer-flatstructure-add__buttonlabel">Item 4 is long as **** as you can clearly see</span>
                </button>
                <button class="ievv-designer-flatstructure-add__button">
                    <span class="ievv-designer-flatstructure-add__buttonlabel">Item 5</span>
                </button>
                <button class="ievv-designer-flatstructure-add__button">
                    <span class="ievv-designer-flatstructure-add__buttonlabel">Item 6</span>
                </button>
                <button class="ievv-designer-flatstructure-add__button">
                    <span class="ievv-designer-flatstructure-add__buttonlabel">Item 7 is long too</span>
                </button>
                <button class="ievv-designer-flatstructure-add__button">
                    <span class="ievv-designer-flatstructure-add__buttonlabel">Item 8</span>
                </button>
                <button class="ievv-designer-flatstructure-add__button">
                    <span class="ievv-designer-flatstructure-add__buttonlabel">Item 9</span>
                </button>
                <button class="ievv-designer-flatstructure-add__button">
                    <span class="ievv-designer-flatstructure-add__buttonlabel">Item 10</span>
                </button>
                <button class="ievv-designer-flatstructure-add__button">
                    <span class="ievv-designer-flatstructure-add__buttonlabel">Item 11</span>
                </button>
            </div>
        </div>
    </div>


Example: {type: isolated} Add bar with --compact variant

    <div class='ievv-designer-flatstructure'>
        <div class="ievv-designer-flatstructure-section">
            <div class="ievv-designer-flatstructure-section__bar">
                <button type="button" class="ievv-designer-flatstructure-section__button ievv-designer-flatstructure-section__button--remove" aria-label="Delete section">
                    Delete section
                </button>
            </div>

            <div class="ievv-designer-flatstructure-section__content">
                <div class="container">
                    <p>Vestibulum id ligula porta felis euismod semper. Nulla vitae elit libero, a pharetra augue. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Donec sed odio dui.</p>
                </div>
            </div>
        </div>
        <div class="ievv-designer-flatstructure-add ievv-designer-flatstructure-add--compact">
            <p class="ievv-designer-flatstructure-add__header">
                Add more content
            </p>
            <div class="ievv-designer-flatstructure-add__buttonbar">
                <button class="ievv-designer-flatstructure-add__button">
                    <span class="ievv-designer-flatstructure-add__buttonlabel">Item 10</span>
                </button>
                <button class="ievv-designer-flatstructure-add__button">
                    <span class="ievv-designer-flatstructure-add__buttonlabel">Item 11</span>
                </button>
            </div>
        </div>
    </div>


Example: {type: isolated} Add bar with --anonymous variant

    <div class='ievv-designer-flatstructure'>
        <div class="ievv-designer-flatstructure-section">
            <div class="ievv-designer-flatstructure-section__bar">
                <button type="button" class="ievv-designer-flatstructure-section__button ievv-designer-flatstructure-section__button--remove" aria-label="Delete section">
                    Delete section
                </button>
            </div>

            <div class="ievv-designer-flatstructure-section__content">
                <div class="container">
                    <p>Vestibulum id ligula porta felis euismod semper. Nulla vitae elit libero, a pharetra augue. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Donec sed odio dui.</p>
                </div>
            </div>
        </div>
        <div class="ievv-designer-flatstructure-add ievv-designer-flatstructure-add--anonymous">
            <p class="ievv-designer-flatstructure-add__header">
                Add more content
            </p>
            <div class="ievv-designer-flatstructure-add__buttonbar">
                <button class="ievv-designer-flatstructure-add__button">
                    <span class="ievv-designer-flatstructure-add__buttonlabel">Item 10</span>
                </button>
                <button class="ievv-designer-flatstructure-add__button">
                    <span class="ievv-designer-flatstructure-add__buttonlabel">Item 11</span>
                </button>
            </div>
        </div>
    </div>


Styleguide components.ievv-designer-flatstructure
*/
.ievv-designer-flatstructure {
  padding: 0 6px; }
  @media (min-width: 960px) {
    .ievv-designer-flatstructure {
      padding: 0 12px; } }

.ievv-designer-flatstructure-section {
  border-style: solid;
  border-width: 3px;
  margin-bottom: 24px;
  overflow: hidden; }
  .ievv-designer-flatstructure-section__bar {
    text-align: center; }
  .ievv-designer-flatstructure-section__header {
    text-align: center;
    padding-top: 3px; }
  .ievv-designer-flatstructure-section__title {
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    padding-bottom: 9px; }
  .ievv-designer-flatstructure-section__description {
    font-size: 15px;
    line-height: 21px;
    padding-bottom: 9px; }
    @media screen and (min-width: 720px) {
      .ievv-designer-flatstructure-section__description {
        font-size: 16px;
        line-height: 21px; } }
  .ievv-designer-flatstructure-section__button {
    display: inline-flex;
    flex-direction: row;
    margin: 0 6px;
    padding: 0 15px 9px 15px;
    border-width: 0 0 3px 0;
    border-style: solid;
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    font-size: 15px;
    line-height: 21px;
    font-style: normal;
    white-space: normal; }
    @media screen and (min-width: 720px) {
      .ievv-designer-flatstructure-section__button {
        font-size: 16px;
        line-height: 21px; } }
    .ievv-designer-flatstructure-section__button--warning:hover {
      border-color: #95190C; }
      .ievv-designer-flatstructure-section__button--warning:hover .ievv-designer-flatstructure-section__icon {
        color: #95190C; }
    .ievv-designer-flatstructure-section__button:before {
      font-size: 16px;
      width: 20.8px;
      margin-right: 6px;
      display: block; }
      @media screen and (min-width: 440px) {
        .ievv-designer-flatstructure-section__button:before {
          font-size: 19px; } }
      @media (min-width: 440px) {
        .ievv-designer-flatstructure-section__button:before {
          width: 24.7px; } }
    .ievv-designer-flatstructure-section__button--up:before {
      -moz-osx-font-smoothing: grayscale;
      -webkit-font-smoothing: antialiased;
      display: inline-block;
      font-style: normal;
      font-variant: normal;
      text-rendering: auto;
      line-height: 1;
      font-weight: 900;
      font-family: 'Font Awesome 5 Free';
      content: "\f077"; }
    .ievv-designer-flatstructure-section__button--down:before {
      -moz-osx-font-smoothing: grayscale;
      -webkit-font-smoothing: antialiased;
      display: inline-block;
      font-style: normal;
      font-variant: normal;
      text-rendering: auto;
      line-height: 1;
      font-weight: 900;
      font-family: 'Font Awesome 5 Free';
      content: "\f078"; }
    .ievv-designer-flatstructure-section__button--changetype:before {
      -moz-osx-font-smoothing: grayscale;
      -webkit-font-smoothing: antialiased;
      display: inline-block;
      font-style: normal;
      font-variant: normal;
      text-rendering: auto;
      line-height: 1;
      font-weight: 900;
      font-family: 'Font Awesome 5 Free';
      content: "\f013"; }
    .ievv-designer-flatstructure-section__button--remove:before {
      -moz-osx-font-smoothing: grayscale;
      -webkit-font-smoothing: antialiased;
      display: inline-block;
      font-style: normal;
      font-variant: normal;
      text-rendering: auto;
      line-height: 1;
      font-weight: 900;
      font-family: 'Font Awesome 5 Free';
      content: "\f1f8"; }
    .ievv-designer-flatstructure-section__button--remove:hover {
      border-color: #95190C; }
      .ievv-designer-flatstructure-section__button--remove:hover:before {
        color: #95190C; }
  .ievv-designer-flatstructure-section__buttonheader {
    flex: 0 0 auto;
    display: inline-flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    text-align: center; }
  .ievv-designer-flatstructure-section__buttonlabel {
    flex: 1 1 auto;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: left;
    padding-left: 6px;
    vertical-align: center; }

.ievv-designer-flatstructure-add {
  padding: 6px;
  margin-bottom: 24px; }
  @media print {
    .ievv-designer-flatstructure-add {
      display: none !important; } }
  .ievv-designer-flatstructure-add--anonymous {
    background-color: transparent; }
    .ievv-designer-flatstructure-add--anonymous .ievv-designer-flatstructure-add__header {
      display: none; }
  .ievv-designer-flatstructure-add--compact .ievv-designer-flatstructure-add__header {
    display: none; }
  .ievv-designer-flatstructure-add--expandable .ievv-designer-flatstructure-add__header:after {
    margin-left: 6px;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    font-weight: 900;
    font-family: 'Font Awesome 5 Free';
    content: "\f078"; }
  .ievv-designer-flatstructure-add--expandable .ievv-designer-flatstructure-add__buttonbar {
    display: none; }
  .ievv-designer-flatstructure-add--expanded .ievv-designer-flatstructure-add__buttonbar {
    display: flex; }
  .ievv-designer-flatstructure-add__header {
    display: block;
    width: 100%;
    margin: 0 0 12px 0;
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    font-size: 15px;
    line-height: 21px;
    text-align: center; }
    @media screen and (min-width: 720px) {
      .ievv-designer-flatstructure-add__header {
        font-size: 16px;
        line-height: 21px; } }
  .ievv-designer-flatstructure-add__buttonbar {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: -3px;
    margin-bottom: 12px; }
    .ievv-designer-flatstructure-add__buttonbar:last-child {
      margin-bottom: 0; }
  .ievv-designer-flatstructure-add__button {
    flex: 0 0 auto;
    display: block;
    width: 130px;
    overflow: hidden;
    border-width: 3px;
    border-style: solid;
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    font-size: 15px;
    line-height: 21px;
    margin: 3px 3px 3px 3px;
    padding: 9px 15px;
    border-radius: 5px; }
    @media screen and (min-width: 720px) {
      .ievv-designer-flatstructure-add__button {
        font-size: 16px;
        line-height: 21px; } }
    @media (min-width: 720px) {
      .ievv-designer-flatstructure-add__button--primary {
        width: 160px; } }
  .ievv-designer-flatstructure-add__buttonlabel {
    display: block; }
  .ievv-designer-flatstructure-add__buttonicon {
    display: block;
    font-size: 22px;
    line-height: 28px;
    margin-bottom: 6px; }
    @media screen and (min-width: 720px) {
      .ievv-designer-flatstructure-add__buttonicon {
        font-size: 24px;
        line-height: 35px; } }

.ievv-designer-flatstructure .ievv-designer-flatstructure-section {
  border-color: #044B7F; }
  .ievv-designer-flatstructure .ievv-designer-flatstructure-section__bar {
    background: #044B7F; }
  .ievv-designer-flatstructure .ievv-designer-flatstructure-section__header {
    background: #044B7F;
    color: #fff; }
  .ievv-designer-flatstructure .ievv-designer-flatstructure-section__button {
    color: #fff;
    border-color: #044B7F; }
    .ievv-designer-flatstructure .ievv-designer-flatstructure-section__button:hover {
      border-color: #fff; }

.ievv-designer-flatstructure .ievv-designer-flatstructure-add {
  background-color: #044B7F;
  color: #fff; }
  .ievv-designer-flatstructure .ievv-designer-flatstructure-add__button {
    border-color: #044472;
    background-color: #044472;
    color: #fff; }
    .ievv-designer-flatstructure .ievv-designer-flatstructure-add__button:hover, .ievv-designer-flatstructure .ievv-designer-flatstructure-add__button:focus, .ievv-designer-flatstructure .ievv-designer-flatstructure-add__button:active {
      border-color: #fff; }

.ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-section {
  border-color: #107E7D; }
  .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-section__bar {
    background: #107E7D; }
  .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-section__header {
    background: #107E7D;
    color: #fff; }
  .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-section__button {
    color: #fff;
    border-color: #107E7D; }
    .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-section__button:hover {
      border-color: #fff; }

.ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-add {
  background-color: #107E7D;
  color: #fff; }
  .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-add__button {
    border-color: #0e7171;
    background-color: #0e7171;
    color: #fff; }
    .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-add__button:hover, .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-add__button:focus, .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-add__button:active {
      border-color: #fff; }

.ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-section {
  border-color: #610345; }
  .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-section__bar {
    background: #610345; }
  .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-section__header {
    background: #610345;
    color: #fff; }
  .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-section__button {
    color: #fff;
    border-color: #610345; }
    .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-section__button:hover {
      border-color: #fff; }

.ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-add {
  background-color: #610345;
  color: #fff; }
  .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-add__button {
    border-color: #57033e;
    background-color: #57033e;
    color: #fff; }
    .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-add__button:hover, .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-add__button:focus, .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-add__button:active {
      border-color: #fff; }

.ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-section {
  border-color: #E3B505; }
  .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-section__bar {
    background: #E3B505; }
  .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-section__header {
    background: #E3B505;
    color: #000; }
  .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-section__button {
    color: #000;
    border-color: #E3B505; }
    .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-section__button:hover {
      border-color: #000; }

.ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-add {
  background-color: #E3B505;
  color: #000; }
  .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-add__button {
    border-color: #cca305;
    background-color: #cca305;
    color: #000; }
    .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-add__button:hover, .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-add__button:focus, .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-add__button:active {
      border-color: #000; }

.ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-section {
  border-color: #044B7F; }
  .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-section__bar {
    background: #044B7F; }
  .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-section__header {
    background: #044B7F;
    color: #fff; }
  .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-section__button {
    color: #fff;
    border-color: #044B7F; }
    .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-section__button:hover {
      border-color: #fff; }

.ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-add {
  background-color: #044B7F;
  color: #fff; }
  .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-add__button {
    border-color: #044472;
    background-color: #044472;
    color: #fff; }
    .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-add__button:hover, .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-add__button:focus, .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-add__button:active {
      border-color: #fff; }

.ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-section {
  border-color: #107E7D; }
  .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-section__bar {
    background: #107E7D; }
  .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-section__header {
    background: #107E7D;
    color: #fff; }
  .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-section__button {
    color: #fff;
    border-color: #107E7D; }
    .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-section__button:hover {
      border-color: #fff; }

.ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-add {
  background-color: #107E7D;
  color: #fff; }
  .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-add__button {
    border-color: #0e7171;
    background-color: #0e7171;
    color: #fff; }
    .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-add__button:hover, .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-add__button:focus, .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-add__button:active {
      border-color: #fff; }

.ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-section {
  border-color: #610345; }
  .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-section__bar {
    background: #610345; }
  .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-section__header {
    background: #610345;
    color: #fff; }
  .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-section__button {
    color: #fff;
    border-color: #610345; }
    .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-section__button:hover {
      border-color: #fff; }

.ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-add {
  background-color: #610345;
  color: #fff; }
  .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-add__button {
    border-color: #57033e;
    background-color: #57033e;
    color: #fff; }
    .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-add__button:hover, .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-add__button:focus, .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-add__button:active {
      border-color: #fff; }

.ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-section {
  border-color: #E3B505; }
  .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-section__bar {
    background: #E3B505; }
  .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-section__header {
    background: #E3B505;
    color: #000; }
  .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-section__button {
    color: #000;
    border-color: #E3B505; }
    .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-section__button:hover {
      border-color: #000; }

.ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-add {
  background-color: #E3B505;
  color: #000; }
  .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-add__button {
    border-color: #cca305;
    background-color: #cca305;
    color: #000; }
    .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-add__button:hover, .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-add__button:focus, .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure .ievv-designer-flatstructure-add__button:active {
      border-color: #000; }

/* Ievv-designer edit + preview

Example: {type: isolated}

    Some stuff above!
    <div class="ievv-designer-edit-preview">
        <div class="ievv-designer-edit-preview__edit" style="">
            <h2>Edit stuff here</h2>
        </div>
        <div class="ievv-designer-edit-preview__preview">
            <div class="ievv-designer-edit-preview__previewcontent">
                <div id="id_red_box" style="background-color: red; height: 1600px;">The red box</div>
                <div id="id_blue_box" style="background-color: blue; height: 300px;">The blue box</div>
            </div>
        </div>
    </div>


Styleguide components.ievv-designer-edit-preview
*/
.ievv-designer-edit-preview {
  display: flex;
  flex-direction: row;
  margin-bottom: 24px; }
  .ievv-designer-edit-preview__edit {
    width: 100%; }
    @media (min-width: 1000px) {
      .ievv-designer-edit-preview__edit {
        flex: 1; } }
    .ievv-designer-edit-preview__edit > .ievv-designer-flatstructure > *:last-child {
      margin-bottom: 0; }
  .ievv-designer-edit-preview__preview-wrapper {
    position: relative;
    margin-right: 12px;
    max-height: calc(100vh - 63px);
    display: none; }
    @media (min-width: 1000px) {
      .ievv-designer-edit-preview__preview-wrapper {
        width: 400px;
        flex: 0 0 auto;
        display: block; } }
    @media (min-width: 1600px) {
      .ievv-designer-edit-preview__preview-wrapper {
        width: 500px;
        flex: 0 0 auto;
        display: block; } }
  .ievv-designer-edit-preview__preview {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border: 3px solid #191919;
    overflow: hidden; }
  .ievv-designer-edit-preview__previewheading {
    background-color: #191919;
    color: #fff;
    padding: 6px;
    text-align: center; }

/* Ievv-publish adminui static overlay bar

Example: {type: isolated} Single editarea section
    <div style='min-height: 100vh; width: 100%'>
        <p>
            Phasellus nunc tellus, tincidunt non quam ut, placerat lobortis est. Aliquam eget purus ante. Vivamus eu dapibus massa, ut porta augue. Vestibulum ac sodales mi, eget auctor mi. Vivamus vehicula sagittis ante. Curabitur id sollicitudin lorem. Phasellus ultricies consectetur felis at dignissim. Nunc blandit facilisis mi, in molestie sem sollicitudin a. Maecenas bibendum sem sit amet cursus commodo. Phasellus convallis eros ac eleifend sodales. Integer vitae tempor nulla, eu aliquam enim. Etiam libero risus, maximus a condimentum at, fringilla ut urna. Phasellus orci neque, tempor a ultrices nec, efficitur cursus neque.
        </p>

    </div>
    <!-- Need to have this spacer at the bottom of the page to avoid that the bottom
    of your content is hidden by the overlay bar.
    It just adds an empty area of the same height as the overlay bar.
    -->
    <div class='ievv-publish-adminui-overlay-bar-spacer' aria-hidden='true'>&nbsp;</div>

    <div class='ievv-publish-adminui-overlay-bar'>
        <button class='ievv-publish-adminui-overlay-bar__button ievv-publish-adminui-overlay-bar__button--primary'>
            Primary button
        </button>
        <button class='ievv-publish-adminui-overlay-bar__button'>
            A button
        </button>
        <a href='#' class='ievv-publish-adminui-overlay-bar__button'>
            A link button
        </a>
        <span class='ievv-publish-adminui-overlay-bar__text'>
            Some text
        </span>
    </div>

Styleguide components.ievv-publish-adminui-overlay-bar
*/
.ievv-publish-adminui-overlay-bar {
  width: 100%;
  max-width: 100%;
  background-color: #2f2c2f;
  padding: 12px 6px;
  z-index: 10;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap; }
  @media (min-width: 720px) {
    .ievv-publish-adminui-overlay-bar {
      position: fixed;
      bottom: 0;
      left: 0;
      flex-wrap: nowrap; } }
  .ievv-publish-adminui-overlay-bar__text, .ievv-publish-adminui-overlay-bar__button {
    margin-right: 6px;
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    font-size: 15px;
    line-height: 21px;
    display: inline-block;
    flex: 0 0 auto; }
    @media screen and (min-width: 720px) {
      .ievv-publish-adminui-overlay-bar__text, .ievv-publish-adminui-overlay-bar__button {
        font-size: 16px;
        line-height: 21px; } }
    .ievv-publish-adminui-overlay-bar__text:last-child, .ievv-publish-adminui-overlay-bar__button:last-child {
      margin-right: 0; }
  .ievv-publish-adminui-overlay-bar__text {
    color: #fff; }
  .ievv-publish-adminui-overlay-bar__button {
    padding: 6px 12px;
    color: #fff;
    border: 3px solid #2f2c2f;
    border-radius: 5px;
    text-decoration: underline;
    text-align: center; }
    .ievv-publish-adminui-overlay-bar__button:hover, .ievv-publish-adminui-overlay-bar__button:focus, .ievv-publish-adminui-overlay-bar__button:active {
      color: #2f2c2f;
      border-color: #fff;
      background-color: #fff;
      text-decoration: none; }
    .ievv-publish-adminui-overlay-bar__button--primary {
      border-color: #fff;
      text-decoration: none; }

.ievv-publish-adminui-overlay-bar-spacer {
  padding: 12px 6px;
  font-family: "Maison Neue", Helvetica, sans-serif;
  font-weight: bold;
  font-size: 15px;
  line-height: 21px;
  display: none; }
  @media screen and (min-width: 720px) {
    .ievv-publish-adminui-overlay-bar-spacer {
      font-size: 16px;
      line-height: 21px; } }
  @media (min-width: 720px) {
    .ievv-publish-adminui-overlay-bar-spacer {
      display: block; } }

/**
Superuser footer

Example: {type: isolated}

    <footer class="superuser-footer">
        <span class="superuser-footer__label">
            Superuser shortcuts:
        </span>

        <a href="#" class="superuser-footer__link">Link 1</a>
        <a href="#" class="superuser-footer__link">Link 2</a>
        <a href="#" class="superuser-footer__link">Link 3</a>
    </footer>

Styleguide components.superuser-footer
*/
.superuser-footer {
  position: fixed;
  bottom: 0;
  height: 14px;
  right: 0;
  left: 0;
  width: 200px;
  margin: 0 auto;
  overflow-x: hidden;
  z-index: 10;
  text-align: center;
  background-color: #191919;
  opacity: .5; }
  .superuser-footer__label {
    color: #eee;
    font-weight: bold;
    font-size: 10px;
    position: absolute;
    top: 2px;
    width: 100%;
    display: block;
    padding: 0;
    margin: 0;
    line-height: 10px; }
  .superuser-footer__link {
    margin: 5px 15px;
    font-size: 12px;
    color: #eee;
    border-color: #eee;
    font-weight: bold;
    display: none; }
    .superuser-footer__link:hover {
      color: #aaa;
      border-color: #aaa; }
  .superuser-footer:hover {
    overflow-x: visible;
    padding: 5px 15px;
    height: auto;
    width: 100%;
    margin: 0;
    opacity: 1; }
    .superuser-footer:hover .superuser-footer__label {
      display: none; }
    .superuser-footer:hover .superuser-footer__link {
      display: inline-block; }

/**
Calendar week

# Positioning of events
Events are positioned with absolute positioning, by percent.
The positioning of simple layouts is fairly simple. Just
calculate a top position from the number of seconds or minutes between the
time of the event and 00:00 and convert that to a percent within a 24 hour
window.

For overlapping events this is more complex. Typically calendar solutions
solve this as we show in the examples below:

- Directly overlapping events are shown side by side.
- Events that overlap with an offset large enough to hit the
  event on a touch device are just rendered with a small indentation.

Rendering events is, of course, ment to be performed in a programming
language or template language where such calculations is possible.



# Events spanning multiple days
We have a hover effect for events, but this does not work for events
spanning multiple days. You will need some javascript to handle this.
The correct way to handle hover on events spanning multiple days
is to add the ``calendar-week__event--active`` css class to the
event.


# Integration with ievv_js
The ``ievv_js`` javascript library has ReactJS components to render
calendar weeks.


Example: {type: isolated} Basic calendar layout

    <div class="calendar-week">
        <div class="calendar-week__columnheaders calendar-week__columnheaders--bordered">
            <div class="calendar-week__columnheader">Mon</div>
            <div class="calendar-week__columnheader">Tue</div>
            <div class="calendar-week__columnheader">Wed</div>
            <div class="calendar-week__columnheader">Thu</div>
            <div class="calendar-week__columnheader">Fri</div>
            <div class="calendar-week__columnheader">Sat</div>
            <div class="calendar-week__columnheader">Sun</div>
        </div>

        <div class="calendar-week__body calendar-week__body--small">
            <div class="calendar-week__days">
                <div class="calendar-week__day calendar-week__day--bordered"></div>
                <div class="calendar-week__day calendar-week__day--bordered"></div>
                <div class="calendar-week__day calendar-week__day--bordered"></div>
                <div class="calendar-week__day calendar-week__day--bordered"></div>
                <div class="calendar-week__day calendar-week__day--bordered"></div>
                <div class="calendar-week__day calendar-week__day--bordered"></div>
                <div class="calendar-week__day calendar-week__day--bordered"></div>
            </div>
        </div>
    </div>


Example: {type: isolated} Events in a responsive body

    <div class="calendar-week">
        <div class="calendar-week__columnheaders calendar-week__columnheaders--bordered">
            <div class="calendar-week__columnheader">Mon</div>
            <div class="calendar-week__columnheader">Tue</div>
            <div class="calendar-week__columnheader">Wed</div>
            <div class="calendar-week__columnheader">Thu</div>
            <div class="calendar-week__columnheader">Fri</div>
            <div class="calendar-week__columnheader">Sat</div>
            <div class="calendar-week__columnheader">Sun</div>
        </div>


        <div class="calendar-week__body calendar-week__body--responsive">
            <div class="calendar-week__days">
                <div class="calendar-week__day calendar-week__day--bordered">
                    <div class="calendar-week__events">
                        <div class="calendar-week__event calendar-week__event--primary"
                                style="top: 10%; height: 20%;">
                            Test event 1
                        </div>

                        <div class="calendar-week__event
                                    calendar-week__event--info"
                                style="top: 50%; height: 20%; width: 49%;">
                            Test event 2
                        </div>
                        <div class="calendar-week__event"
                                style="top: 50%; height: 20%; width: 49%; left: 50%;">
                            Test event 3
                        </div>

                        <div class="calendar-week__event
                                    calendar-week__event--warning"
                                style="top: 80%; height: 20%;">
                            Test event 4
                        </div>
                    </div>
                </div>

                <div class="calendar-week__day calendar-week__day--bordered">
                    <div class="calendar-week__events">
                        <div class="calendar-week__event
                                    calendar-week__event--warning"
                                style="top: 0; height: 100%;">
                            Test event 4
                        </div>
                    </div>
                </div>

                <div class="calendar-week__day calendar-week__day--bordered">
                    <div class="calendar-week__events">
                        <div class="calendar-week__event
                                    calendar-week__event--warning"
                                style="top: 0; height: 11.34%;">
                            Test event 4
                        </div>
                    </div>
                </div>

                <div class="calendar-week__day calendar-week__day--bordered"></div>

                <div class="calendar-week__day calendar-week__day--bordered">
                    <div class="calendar-week__events">
                        <div class="calendar-week__event"
                                style="top: 50%; height: 20%;">
                            Test event 5
                        </div>
                        <div class="calendar-week__event
                                    calendar-week__event--success"
                                style="top: 53%; height: 26%; width: 88%; left: 10%;">
                            Test event 6
                        </div>
                    </div>
                </div>

                <div class="calendar-week__day calendar-week__day--bordered"></div>
                <div class="calendar-week__day calendar-week__day--bordered"></div>
            </div>
        </div>
    </div>


Example: {type: isolated} Style event content

    <div class="calendar-week">
        <div class="calendar-week__columnheaders calendar-week__columnheaders--bordered">
            <div class="calendar-week__columnheader">Mon</div>
            <div class="calendar-week__columnheader">Tue</div>
            <div class="calendar-week__columnheader">Wed</div>
            <div class="calendar-week__columnheader">Thu</div>
            <div class="calendar-week__columnheader">Fri</div>
            <div class="calendar-week__columnheader">Sat</div>
            <div class="calendar-week__columnheader">Sun</div>
        </div>


        <div class="calendar-week__body calendar-week__body--responsive">
            <div class="calendar-week__days">
                <div class="calendar-week__day calendar-week__day--bordered">
                    <div class="calendar-week__events">
                        <div class="calendar-week__event calendar-week__event--primary"
                                style="top: 0%; height: 20%;">
                            <div class="calendar-week__event-prefix">
                                00:00
                            </div>
                            <div class="calendar-week__event-title">
                                Test event 1
                            </div>
                            <div class="calendar-week__event-location">
                                Oslo, Norway
                            </div>
                        </div>

                        <div class="calendar-week__event calendar-week__event--primary"
                                style="top: 50%; height: 12%;">
                            <div class="calendar-week__event-prefix">
                                12:00
                            </div>
                            <div class="calendar-week__event-title">
                                Test event 2
                            </div>
                            <div class="calendar-week__event-location">
                                London, England
                            </div>
                        </div>
                    </div>
                </div>

                <div class="calendar-week__day calendar-week__day--bordered"></div>
                <div class="calendar-week__day calendar-week__day--bordered"></div>
                <div class="calendar-week__day calendar-week__day--bordered"></div>
                <div class="calendar-week__day calendar-week__day--bordered"></div>
                <div class="calendar-week__day calendar-week__day--bordered"></div>
                <div class="calendar-week__day calendar-week__day--bordered"></div>
            </div>
        </div>
    </div>



Example: {type: isolated} Include grid and row headers

    <!--
    NOTE:
    You do not have to include both the row headers and the grid,
    and they do not have to be the same size. E.g.: you can
    have a grid of 24 items, and row headers every half hour.

    Just remember to add ``calendar-week--with-rowheaders`` if you use
    row headers.

    The row headers and grid is usually not something you setup manually.
    It should be generated by javascript or a template that can loop
    and generate them.

    Grid items are typically used as click targets to add events to the
    calendar. If you want higher granularity, simply add more items to
    the grid. We only have bordered grid items in this example, but you could
    add grid items every 15 minutes (have 96 grid items per day instead of 24),
    and just make every fourth grid item bordered.
    -->

    <div class="calendar-week calendar-week--with-rowheaders">
        <div class="calendar-week__columnheaders calendar-week__columnheaders--bordered">
            <div class="calendar-week__columnheader">Mon</div>
            <div class="calendar-week__columnheader">Tue</div>
            <div class="calendar-week__columnheader">Wed</div>
            <div class="calendar-week__columnheader">Thu</div>
            <div class="calendar-week__columnheader">Fri</div>
            <div class="calendar-week__columnheader">Sat</div>
            <div class="calendar-week__columnheader">Sun</div>
        </div>


        <div class="calendar-week__body calendar-week__body--responsive">
            <div class="calendar-week__rowheaders">
                <div class="calendar-week__rowheader">
                    <span class="calendar-week__rowheader-hour">00</span><span class="calendar-week__rowheader-minute">:00</span>
                </div>
                <div class="calendar-week__rowheader">
                    <span class="calendar-week__rowheader-hour">01</span><span class="calendar-week__rowheader-minute">:00</span>
                </div>
                <div class="calendar-week__rowheader">
                    <span class="calendar-week__rowheader-hour">02</span><span class="calendar-week__rowheader-minute">:00</span>
                </div>
                <div class="calendar-week__rowheader">
                    <span class="calendar-week__rowheader-hour">03</span><span class="calendar-week__rowheader-minute">:00</span>
                </div>
                <div class="calendar-week__rowheader">
                    <span class="calendar-week__rowheader-hour">04</span><span class="calendar-week__rowheader-minute">:00</span>
                </div>
                <div class="calendar-week__rowheader">
                    <span class="calendar-week__rowheader-hour">05</span><span class="calendar-week__rowheader-minute">:00</span>
                </div>
                <div class="calendar-week__rowheader">
                    <span class="calendar-week__rowheader-hour">06</span><span class="calendar-week__rowheader-minute">:00</span>
                </div>
                <div class="calendar-week__rowheader">
                    <span class="calendar-week__rowheader-hour">07</span><span class="calendar-week__rowheader-minute">:00</span>
                </div>
                <div class="calendar-week__rowheader">
                    <span class="calendar-week__rowheader-hour">08</span><span class="calendar-week__rowheader-minute">:00</span>
                </div>
                <div class="calendar-week__rowheader">
                    <span class="calendar-week__rowheader-hour">09</span><span class="calendar-week__rowheader-minute">:00</span>
                </div>
                <div class="calendar-week__rowheader">
                    <span class="calendar-week__rowheader-hour">10</span><span class="calendar-week__rowheader-minute">:00</span>
                </div>
                <div class="calendar-week__rowheader">
                    <span class="calendar-week__rowheader-hour">11</span><span class="calendar-week__rowheader-minute">:00</span>
                </div>
                <div class="calendar-week__rowheader">
                    <span class="calendar-week__rowheader-hour">12</span><span class="calendar-week__rowheader-minute">:00</span>
                </div>
                <div class="calendar-week__rowheader">
                    <span class="calendar-week__rowheader-hour">13</span><span class="calendar-week__rowheader-minute">:00</span>
                </div>
                <div class="calendar-week__rowheader">
                    <span class="calendar-week__rowheader-hour">14</span><span class="calendar-week__rowheader-minute">:00</span>
                </div>
                <div class="calendar-week__rowheader">
                    <span class="calendar-week__rowheader-hour">15</span><span class="calendar-week__rowheader-minute">:00</span>
                </div>
                <div class="calendar-week__rowheader">
                    <span class="calendar-week__rowheader-hour">16</span><span class="calendar-week__rowheader-minute">:00</span>
                </div>
                <div class="calendar-week__rowheader">
                    <span class="calendar-week__rowheader-hour">17</span><span class="calendar-week__rowheader-minute">:00</span>
                </div>
                <div class="calendar-week__rowheader">
                    <span class="calendar-week__rowheader-hour">18</span><span class="calendar-week__rowheader-minute">:00</span>
                </div>
                <div class="calendar-week__rowheader">
                    <span class="calendar-week__rowheader-hour">19</span><span class="calendar-week__rowheader-minute">:00</span>
                </div>
                <div class="calendar-week__rowheader">
                    <span class="calendar-week__rowheader-hour">20</span><span class="calendar-week__rowheader-minute">:00</span>
                </div>
                <div class="calendar-week__rowheader">
                    <span class="calendar-week__rowheader-hour">21</span><span class="calendar-week__rowheader-minute">:00</span>
                </div>
                <div class="calendar-week__rowheader">
                    <span class="calendar-week__rowheader-hour">22</span><span class="calendar-week__rowheader-minute">:00</span>
                </div>
                <div class="calendar-week__rowheader">
                    <span class="calendar-week__rowheader-hour">23</span><span class="calendar-week__rowheader-minute">:00</span>
                </div>
            </div>

            <div class="calendar-week__days">
                <div class="calendar-week__day calendar-week__day--bordered">
                    <div class="calendar-week__grid">
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                    </div>

                    <div class="calendar-week__events">
                        <div class="calendar-week__event calendar-week__event--primary"
                                style="top: 10%; height: 20%;">
                            Test event 1
                        </div>

                        <div class="calendar-week__event
                                    calendar-week__event--info"
                                style="top: 50%; height: 20%; width: 49%;">
                            Test event 2
                        </div>
                        <div class="calendar-week__event"
                                style="top: 50%; height: 20%; width: 49%; left: 50%;">
                            Test event 3
                        </div>

                        <div class="calendar-week__event
                                    calendar-week__event--warning"
                                style="top: 80%; height: 20%;">
                            Test event 4
                        </div>
                    </div>
                </div>

                <div class="calendar-week__day calendar-week__day--bordered">
                    <div class="calendar-week__grid">
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                    </div>

                    <div class="calendar-week__events">
                        <div class="calendar-week__event
                                    calendar-week__event--warning"
                                style="top: 0; height: 100%;">
                            Test event 4
                        </div>
                    </div>
                </div>

                <div class="calendar-week__day calendar-week__day--bordered">
                    <div class="calendar-week__grid">
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                    </div>

                    <div class="calendar-week__events">
                        <div class="calendar-week__event
                                    calendar-week__event--warning"
                                style="top: 0; height: 11.34%;">
                            Test event 4
                        </div>
                    </div>
                </div>

                <div class="calendar-week__day calendar-week__day--bordered">
                    <div class="calendar-week__grid">
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                    </div>
                </div>

                <div class="calendar-week__day calendar-week__day--bordered">
                    <div class="calendar-week__grid">
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                    </div>

                    <div class="calendar-week__events">
                        <div class="calendar-week__event"
                                style="top: 50%; height: 20%;">
                            Test event 5
                        </div>
                        <div class="calendar-week__event
                                    calendar-week__event--success"
                                style="top: 53%; height: 26%; width: 88%; left: 10%;">
                            Test event 6
                        </div>
                    </div>
                </div>

                <div class="calendar-week__day calendar-week__day--bordered">
                    <div class="calendar-week__grid">
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                    </div>
                </div>

                <div class="calendar-week__day calendar-week__day--bordered">
                    <div class="calendar-week__grid">
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                        <div class="calendar-week__griditem calendar-week__griditem--bordered"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>


Example: Compact calendar with only indicators per day

    <div class="calendar-week">
        <div class="calendar-week__columnheaders">
            <div class="calendar-week__columnheader">
                M
            </div>
            <div class="calendar-week__columnheader">
                T
            </div>
            <div class="calendar-week__columnheader">
                W
            </div>
            <div class="calendar-week__columnheader">
                T
            </div>
            <div class="calendar-week__columnheader">
                F
            </div>
            <div class="calendar-week__columnheader">
                S
            </div>
            <div class="calendar-week__columnheader">
                S
            </div>
        </div>

        <div class="calendar-week__body">
            <div class="calendar-week__days">
                <div class="calendar-week__day text-center">
                    <strong>3</strong>
                </div>
                <div class="calendar-week__day text-center">
                </div>
                <div class="calendar-week__day text-center">
                    <strong>2</strong>
                </div>
                <div class="calendar-week__day text-center"></div>
                <div class="calendar-week__day text-center"></div>
                <div class="calendar-week__day text-center"></div>
                <div class="calendar-week__day text-center"></div>
            </div>
        </div>
    </div>


Example: Header buttons - good for cases when the user clicks on the date to do something

    <div class="calendar-week">
        <div class="calendar-week__columnheaders">
            <button class="calendar-week__columnheader calendar-week__columnheader--button">
                Mon<br>
                23
            </button>
            <button class="calendar-week__columnheader calendar-week__columnheader--button">
                Tue<br>
                24
            </button>
            <button class="calendar-week__columnheader calendar-week__columnheader--button">
                Wed<br>
                25
            </button>
            <button class="calendar-week__columnheader calendar-week__columnheader--button">
                Thu<br>
                26
            </button>
            <button class="calendar-week__columnheader calendar-week__columnheader--button">
                Fri<br>
                27
            </button>
            <button class="calendar-week__columnheader calendar-week__columnheader--button">
                Sat<br>
                28
            </button>
            <button class="calendar-week__columnheader calendar-week__columnheader--button">
                Sun<br>
                29
            </button>
        </div>
    </div>

Styleguide components.calendar-week
*/
.calendar-week__grid, .calendar-week__columnheader {
  flex: 1 1 auto;
  overflow: hidden; }

.calendar-week__columnheaders {
  display: flex;
  flex-direction: row;
  position: relative; }
  .calendar-week__columnheaders--bordered {
    border-bottom: 3px solid #e3e4e3; }

.calendar-week__columnheader {
  color: #686969;
  font-size: 15px;
  line-height: 21px;
  text-align: center;
  align-self: stretch;
  display: block; }
  @media screen and (min-width: 720px) {
    .calendar-week__columnheader {
      font-size: 16px;
      line-height: 21px; } }
  .calendar-week__columnheader--button {
    cursor: pointer; }
    .calendar-week__columnheader--button:hover {
      background-color: #fff; }
  .calendar-week__columnheader--active {
    background-color: #fff; }
  .calendar-week__columnheader:disabled {
    opacity: .7;
    background-color: transparent; }
    .calendar-week__columnheader:disabled:hover {
      cursor: default;
      background-color: transparent; }

.calendar-week__body {
  display: flex;
  flex-direction: row;
  width: 100%;
  align-items: stretch; }
  .calendar-week__body--responsive {
    height: 600px; }
    @media (min-width: 720px) {
      .calendar-week__body--responsive {
        height: 700px; } }
    @media (min-width: 960px) {
      .calendar-week__body--responsive {
        height: 900px; } }
    @media (min-width: 1240px) {
      .calendar-week__body--responsive {
        height: 1100px; } }
  .calendar-week__body--small {
    height: 400px; }
  .calendar-week__body--medium {
    height: 600px; }
  .calendar-week__body--large {
    height: 800px; }
  .calendar-week__body--xlarge {
    height: 1100px; }
  .calendar-week__body--xxlarge {
    height: 1400px; }

.calendar-week__rowheaders {
  margin-top: -10px;
  margin-bottom: 12px;
  padding-right: 6px;
  display: none;
  flex-direction: column;
  height: 100%; }

.calendar-week__rowheader {
  flex: 1 1 auto;
  position: relative;
  font-size: 12px;
  line-height: 21px;
  color: #eeeeef;
  text-align: right; }
  @media screen and (min-width: 720px) {
    .calendar-week__rowheader {
      font-size: 13px;
      line-height: 21px; } }

.calendar-week__rowheader-minute {
  display: none; }
  @media (min-width: 720px) {
    .calendar-week__rowheader-minute {
      display: inline; } }

.calendar-week__days {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  flex: 1 1 auto; }

.calendar-week__day {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  height: 100%;
  position: relative; }
  .calendar-week__day--bordered {
    border-right: 1px solid #e3e4e3; }
  .calendar-week__day:last-child {
    border-right: none; }

.calendar-week__events {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%; }

.calendar-week__event {
  position: absolute;
  left: 0;
  width: 98%;
  overflow: hidden;
  opacity: 0.8;
  border-left: 3px solid #828383;
  color: #fff;
  background-color: #e3e4e3;
  padding: 3px 6px;
  font-size: 12px;
  line-height: 21px; }
  @media screen and (min-width: 720px) {
    .calendar-week__event {
      font-size: 13px;
      line-height: 21px; } }
  @media (min-width: 720px) {
    .calendar-week__event {
      border-left-width: 5px; } }
  .calendar-week__event--active, .calendar-week__event:hover {
    opacity: 1; }
  .calendar-week__event--primary {
    background-color: #E01220;
    border-left-color: #ce111d; }
  .calendar-week__event--secondary {
    background-color: #40AAB8;
    border-left-color: #002B49; }
  .calendar-week__event--light {
    background-color: #fff;
    border-left-color: #eeeeef;
    color: #2f2c2f; }
  .calendar-week__event--neutral-xlight {
    background-color: #f5f5f5;
    border-left-color: #eeeeef;
    color: #2f2c2f; }
  .calendar-week__event--warning {
    background-color: #d53c3c;
    border-left-color: #af3131; }
  .calendar-week__event--success {
    background-color: #3c893c;
    border-left-color: #317031; }
  .calendar-week__event--info {
    background-color: #f5c90f;
    border-left-color: #c9a50c; }
  .calendar-week__event--button {
    cursor: pointer; }

.calendar-week__event-prefix {
  font-style: italic; }

.calendar-week__event-title {
  font-weight: bold; }

.calendar-week__columnheader, .calendar-week__day {
  width: 14.28571%; }

.calendar-week__grid {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column; }

.calendar-week__griditem {
  flex: 1 1 auto; }
  .calendar-week__griditem--bordered {
    border-bottom: 1px solid #eeeeef; }

.calendar-week--with-rowheaders .calendar-week__columnheaders {
  margin-left: 30px; }
  @media (min-width: 720px) {
    .calendar-week--with-rowheaders .calendar-week__columnheaders {
      margin-left: 60px; } }

.calendar-week--with-rowheaders .calendar-week__rowheaders {
  display: flex;
  width: 30px; }
  @media (min-width: 720px) {
    .calendar-week--with-rowheaders .calendar-week__rowheaders {
      width: 60px; } }

/**
Calendar pager

Example: {type: isolated}

    <div class="container"> <!-- container is just here to make the example look a bit better -->
        <div class="calendar-pager">
            <div class="calendar-pager__title">
                <strong>April</strong> 2017
            </div>
            <div class="calendar-pager__buttonbar">
                <button type="button" class="calendar-pager__button">
                    <span class="calendar-pager__button-icon icon-chevron-left"></span>
                </button>
                <button type="button" class="calendar-pager__button">
                    Today
                </button>
                <button type="button" class="calendar-pager__button">
                    <span class="calendar-pager__button-icon icon-chevron-right"></span>
                </button>
            </div>
        </div>
    </div>

Example: {type: isolated} Only previous and next

    <div class="container"> <!-- container is just here to make the example look a bit better -->
        <div class="calendar-pager">
            <div class="calendar-pager__title">
                <strong>April</strong> 2017
            </div>
            <div class="calendar-pager__buttonbar">
                <button type="button" class="calendar-pager__button">
                    <span class="calendar-pager__button-icon icon-chevron-left"></span>
                </button>
                <button type="button" class="calendar-pager__button">
                    <span class="calendar-pager__button-icon icon-chevron-right"></span>
                </button>
            </div>
        </div>
    </div>

Example: {type: isolated} Compact buttons

    <div class="container"> <!-- container is just here to make the example look a bit better -->
        <div class="calendar-pager">
            <div class="calendar-pager__title">
                <strong>April</strong> 2017
            </div>
            <div class="calendar-pager__buttonbar">
                <button type="button" class="calendar-pager__button calendar-pager__button--compact">
                    <span class="calendar-pager__button-icon icon-chevron-left"></span>
                </button>
                <button type="button" class="calendar-pager__button calendar-pager__button--compact">
                    Today
                </button>
                <button type="button" class="calendar-pager__button calendar-pager__button--compact">
                    <span class="calendar-pager__button-icon icon-chevron-right"></span>
                </button>
            </div>
        </div>
    </div>

Example: {type: isolated} At top of a calendar-week

    <div class="container"> <!-- container is just here to make the example look a bit better -->
        <div class="calendar-pager">
            <div class="calendar-pager__title">
                <strong>April</strong> 2017
            </div>
            <div class="calendar-pager__buttonbar">
                <button type="button" class="calendar-pager__button">
                    <span class="calendar-pager__button-icon icon-chevron-left"></span>
                </button>
                <button type="button" class="calendar-pager__button">
                    Today
                </button>
                <button type="button" class="calendar-pager__button">
                    <span class="calendar-pager__button-icon icon-chevron-right"></span>
                </button>
            </div>
        </div>
        <div class="calendar-week">
            <div class="calendar-week__columnheaders calendar-week__columnheaders--bordered">
                <div class="calendar-week__columnheader">Mon</div>
                <div class="calendar-week__columnheader">Tue</div>
                <div class="calendar-week__columnheader">Wed</div>
                <div class="calendar-week__columnheader">Thu</div>
                <div class="calendar-week__columnheader">Fri</div>
                <div class="calendar-week__columnheader">Sat</div>
                <div class="calendar-week__columnheader">Sun</div>
            </div>

            <div class="calendar-week__body calendar-week__body--small">
                <div class="calendar-week__days">
                    <div class="calendar-week__day calendar-week__day--bordered"></div>
                    <div class="calendar-week__day calendar-week__day--bordered"></div>
                    <div class="calendar-week__day calendar-week__day--bordered"></div>
                    <div class="calendar-week__day calendar-week__day--bordered"></div>
                    <div class="calendar-week__day calendar-week__day--bordered"></div>
                    <div class="calendar-week__day calendar-week__day--bordered"></div>
                    <div class="calendar-week__day calendar-week__day--bordered"></div>
                </div>
            </div>
        </div>

    </div>



Styleguide components.calendar-pager
*/
.calendar-pager {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 7px; }
  @media (min-width: 720px) {
    .calendar-pager {
      flex-direction: row;
      margin-bottom: 21px; } }
  .calendar-pager__title {
    margin-bottom: 7px;
    padding: 0; }
    .calendar-pager__title *:last-child {
      padding-bottom: 0;
      margin-bottom: 0; }
    @media (min-width: 720px) {
      .calendar-pager__title {
        margin-bottom: 0; } }
  .calendar-pager__buttonbar {
    display: flex;
    flex-direction: row; }
  .calendar-pager__button {
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    font-size: 15px;
    line-height: 21px;
    font-style: normal;
    text-align: center;
    position: relative;
    display: block;
    width: 100%;
    padding: 6px 12px;
    border-radius: 5px;
    color: #2f2c2f;
    white-space: normal;
    border: 3px solid #828383;
    background-color: transparent;
    margin-bottom: 6px;
    margin-right: -3px;
    margin-bottom: 0;
    border-radius: 0; }
    @media screen and (min-width: 720px) {
      .calendar-pager__button {
        font-size: 16px;
        line-height: 21px; } }
    @media (min-width: 720px) {
      .calendar-pager__button {
        display: inline-block;
        white-space: nowrap;
        width: auto;
        padding: 9px 39px; } }
    .calendar-pager__button[disabled] {
      pointer-events: none;
      opacity: 0.4; }
    .calendar-pager__button:hover, .calendar-pager__button:focus, .calendar-pager__button:active {
      color: #fff;
      border-color: #828383;
      background-color: #828383; }
      .calendar-pager__button:hover .button__icon--non-hover, .calendar-pager__button:focus .button__icon--non-hover, .calendar-pager__button:active .button__icon--non-hover {
        display: none; }
      .calendar-pager__button:hover .button__icon--hover, .calendar-pager__button:focus .button__icon--hover, .calendar-pager__button:active .button__icon--hover {
        display: inline-block; }
    .calendar-pager__button:focus {
      z-index: 2; }
    .calendar-pager__button:first-child {
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px; }
    .calendar-pager__button:last-child {
      border-top-right-radius: 5px;
      border-bottom-right-radius: 5px;
      margin-right: 0; }
    .calendar-pager__button--compact {
      font-size: 15px;
      line-height: 21px;
      padding: 6px 12px; }
      @media screen and (min-width: 720px) {
        .calendar-pager__button--compact {
          font-size: 16px;
          line-height: 21px; } }
  .calendar-pager .calendar-pager__button-icon {
    position: relative;
    vertical-align: middle;
    top: -2px;
    margin-right: 6px; }
    .calendar-pager .calendar-pager__button-icon--non-hover {
      display: inline-block; }
    .calendar-pager .calendar-pager__button-icon--hover {
      display: none; }
    .calendar-pager .calendar-pager__button-icon--first {
      margin-left: -6px; }

/**
File gallery


Example: {type: isolated}

    <div class="container">
        <div class="filegallery">
            <figure class="filegallery__file filegallery__file--button">
                <img src="http://arkiv.nrk.no/lydverket/wp-content/uploads/2010/05/BREMNES.jpg"
                    alt="Bremnes hereself..."
                    class="filegallery__image">
                <figcaption class="filegallery__caption">
                    <p class="filegallery__captiontext">Kari bremnes</p>
                </figcaption>
            </figure>

            <figure class="filegallery__file filegallery__file--button">
                <h3 class="filegallery__text">
                    .txt
                </h3>
                <figcaption class="filegallery__caption">
                    <p class="filegallery__captiontext">Hello world</p>
                </figcaption>
            </figure>

            <figure class="filegallery__file filegallery__file--button">
                <img src="http://arkiv.nrk.no/lydverket/wp-content/uploads/2010/05/BREMNES.jpg"
                    alt="Bremnes hereself..."
                    class="filegallery__image">
                <figcaption class="filegallery__caption">
                    <p class="filegallery__captiontext text-muted">
                        <em>people, nrk, celebrity</em>
                    </p>
                    <p class="filegallery__captiontext">Kari bremnes 2</p>
                </figcaption>
            </figure>

            <figure class="filegallery__file filegallery__file--button">
                <img src="http://arkiv.nrk.no/lydverket/wp-content/uploads/2010/05/BREMNES.jpg"
                    alt="Bremnes hereself..."
                    class="filegallery__image">
                <figcaption class="filegallery__caption">
                    <p class="filegallery__captiontext">Kari bremnes 3</p>
                </figcaption>
            </figure>

            <figure class="filegallery__file filegallery__file--button">
                <h3 class="filegallery__text">
                    .txt
                </h3>
                <figcaption class="filegallery__caption">
                    <p class="filegallery__captiontext">Important stuff</p>
                </figcaption>
            </figure>

            <figure class="filegallery__file filegallery__file--button">
                <img src="http://arkiv.nrk.no/lydverket/wp-content/uploads/2010/05/BREMNES.jpg"
                    alt="Bremnes hereself..."
                    class="filegallery__image">
                <figcaption class="filegallery__caption">
                    <p class="filegallery__captiontext">Kari bremnes herself again and again</p>
                </figcaption>
            </figure>

            <figure class="filegallery__file filegallery__file--button">
                <h3 class="filegallery__text">
                    .txt
                </h3>
                <figcaption class="filegallery__caption">
                    <p class="filegallery__captiontext">Extra important stuff</p>
                </figcaption>
            </figure>
        </div>
    </div>


Styleguide components.filegallery
*/
.filegallery {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-start;
  width: 100%; }
  .filegallery .filegallery__file {
    text-align: center;
    background-color: #fff;
    flex: 0 1 auto;
    margin-bottom: 7px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center; }
    .filegallery .filegallery__file--button {
      cursor: pointer; }
  .filegallery .filegallery__image {
    display: block;
    max-width: 100%;
    height: auto;
    flex: 0 0 auto; }
  .filegallery .filegallery__text {
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 16px;
    line-height: 21px;
    color: #686969;
    margin-top: 12px;
    margin-bottom: 0; }
    @media screen and (min-width: 440px) {
      .filegallery .filegallery__text {
        font-size: 19px;
        line-height: 28px; } }
  .filegallery .filegallery__caption {
    width: 100%;
    word-break: break-all;
    padding-left: 12px;
    padding-right: 12px;
    margin-top: 12px; }
  .filegallery .filegallery__captiontext {
    margin-bottom: 12px; }
  @media (min-width: 440px) {
    .filegallery .filegallery__file {
      margin-bottom: 21px;
      width: 48.5%; }
      .filegallery .filegallery__file:nth-child(2n+1) {
        margin-right: 3%; } }
  @media (min-width: 720px) {
    .filegallery .filegallery__file {
      margin-bottom: 21px;
      width: 32.33333%; }
      .filegallery .filegallery__file:nth-child(2n+1) {
        margin-right: 0; }
      .filegallery .filegallery__file:nth-child(3n+1) {
        margin-right: 1.5%; }
      .filegallery .filegallery__file:nth-child(3n+2) {
        margin-right: 1.5%; } }

/* Ievv editbar

Example: {type: isolated}
    <nav class="ievv-editbar">
        <a href="" class="ievv-editbar__action  ievv-editbar__action--promoted">
            Edit
        </a>
        <a href="" class="ievv-editbar__action  ievv-editbar__action--promoted">
            Show published
        </a>
        <a href="" class="ievv-editbar__action">
            Publish
        </a>
        <a href="" class="ievv-editbar__action">
            Delete
        </a>
    </nav>


Styleguide components.ievv-editbar
*/
.ievv-editbar {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding-right: 3px;
  padding-bottom: 3px; }
  @media print {
    .ievv-editbar {
      display: none !important; } }
  .ievv-editbar__action {
    color: #fff;
    border-color: #fff;
    background-color: transparent;
    margin-right: -3px;
    margin-bottom: 3px;
    border-radius: 0;
    width: 50%; }
    .ievv-editbar__action:hover, .ievv-editbar__action:focus, .ievv-editbar__action:active {
      border-color: #fff;
      background-color: #fff;
      border-color: #fff;
      color: #E01220; }
    .ievv-editbar__action:nth-of-type(odd) {
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px; }
    .ievv-editbar__action:nth-of-type(even) {
      border-top-right-radius: 5px;
      border-bottom-right-radius: 5px; }
    @media (min-width: 720px) {
      .ievv-editbar__action {
        width: auto; }
        .ievv-editbar__action:not(:first-child) {
          border-radius: 0; }
        .ievv-editbar__action:last-child {
          border-top-right-radius: 5px;
          border-bottom-right-radius: 5px; } }
    .ievv-editbar__action--promoted {
      color: #E01220;
      border-color: #fff;
      background-color: #fff; }
      .ievv-editbar__action--promoted:hover, .ievv-editbar__action--promoted:focus, .ievv-editbar__action--promoted:active {
        border-color: transparent;
        background-color: transparent;
        border-color: #fff;
        color: #fff; }

/* Ievv buttonbar

Example: {type: isolated}
    <nav class="ievv-buttonbar">
        <button class="ievv-buttonbar__button button button--primary">
            H1
        </button>
        <button class="ievv-buttonbar__button button button--primary">
            H2
        </button>
        <button class="ievv-buttonbar__button button">
            <strong>B</strong>
        </button>
        <button class="ievv-buttonbar__button button">
            <em>I</em>
        </button>
    </nav>


Example: {type: isolated} Compact buttons
    <nav class="ievv-buttonbar">
        <button class="ievv-buttonbar__button button button--compact button--primary">
            H1
        </button>
        <button class="ievv-buttonbar__button button button--compact button--primary">
            H2
        </button>
        <button class="ievv-buttonbar__button button button--compact">
            <strong>B</strong>
        </button>
        <button class="ievv-buttonbar__button button button--compact">
            <em>I</em>
        </button>
    </nav>


Styleguide components.ievv-buttonbar
*/
.ievv-buttonbar {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding-right: 3px;
  padding-bottom: 3px;
  margin-bottom: 14px; }
  @media print {
    .ievv-buttonbar {
      display: none !important; } }
  .ievv-buttonbar__button {
    margin-right: -3px;
    margin-bottom: 3px;
    border-radius: 0; }
    .ievv-buttonbar__button:nth-of-type(odd) {
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px; }
    .ievv-buttonbar__button:nth-of-type(even) {
      border-top-right-radius: 5px;
      border-bottom-right-radius: 5px; }
    @media (min-width: 720px) {
      .ievv-buttonbar__button {
        width: auto; }
        .ievv-buttonbar__button:not(:first-child) {
          border-radius: 0; }
        .ievv-buttonbar__button:last-child {
          border-top-right-radius: 5px;
          border-bottom-right-radius: 5px; } }
  .ievv-buttonbar--nomargin {
    margin-bottom: 0; }

.drag-and-drop-droparea {
  padding: 48px 24px;
  border: 3px dashed #e3e4e3;
  cursor: pointer; }
  .drag-and-drop-droparea--active {
    border-color: #828383; }
  .drag-and-drop-droparea--error {
    border-color: #d53c3c; }
  .drag-and-drop-droparea--disabled {
    border-color: #e3e4e3; }

/* Vertical action box

Example: {type: isolated}

    <div class="vertical-action-box">
        <div class="vertical-action-box__bar">
            <div class="vertical-action-box__barcontent">
                <button type="button" class="vertical-action-box__button" aria-label="Move up">
                    <span class="vertical-action-box__buttonheader">
                        <span class="vertical-action-box__icon vertical-action-box__icon--up" aria-hidden="true"></span>
                    </span>
                    <span class="vertical-action-box__buttonlabel">
                        Move up
                    </span>
                </button>
                <button type="button" class="vertical-action-box__button" aria-label="Move down">
                    <span class="vertical-action-box__buttonheader">
                        <span class="vertical-action-box__icon vertical-action-box__icon--down" aria-hidden="true"></span>
                    </span>
                    <span class="vertical-action-box__buttonlabel">
                        Move down
                    </span>
                </button>
            </div>
        </div>

        <div class="vertical-action-box__content">
            <div class="container">
                <p>Vestibulum id ligula porta felis euismod semper. Nulla vitae elit libero, a pharetra augue. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Donec sed odio dui.</p>

                <p>Maecenas faucibus mollis interdum. Sed posuere consectetur est at lobortis. Nulla vitae elit libero, a pharetra augue. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>

                <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla. Curabitur blandit tempus porttitor.</p>
            </div>
        </div>

        <div class="vertical-action-box__bar vertical-action-box__bar">
            <div class="vertical-action-box__barcontent vertical-action-box__barcontent--right">
                <button type="button" class="vertical-action-box__button vertical-action-box__button--warning" aria-label="Delete section">
                    <span class="vertical-action-box__buttonlabel vertical-action-box__buttonlabel--right">
                        Delete section
                    </span>
                    <span class="vertical-action-box__buttonheader">
                        <span class="vertical-action-box__icon vertical-action-box__icon--remove" aria-hidden="true"></span>
                    </span>
                </button>
            </div>
        </div>
    </div>

    <div class="vertical-action-box">
        <div class="vertical-action-box__bar">
            <div class="vertical-action-box__barcontent">
                <button type="button" class="vertical-action-box__button" aria-label="Move up">
                    <span class="vertical-action-box__buttonheader">
                        <span class="vertical-action-box__icon vertical-action-box__icon--up" aria-hidden="true"></span>
                    </span>
                    <span class="vertical-action-box__buttonlabel">
                        Move up
                    </span>
                </button>
                <button type="button" class="vertical-action-box__button" aria-label="Move down">
                    <span class="vertical-action-box__buttonheader">
                        <span class="vertical-action-box__icon vertical-action-box__icon--down" aria-hidden="true"></span>
                    </span>
                    <span class="vertical-action-box__buttonlabel">
                        Move down
                    </span>
                </button>
            </div>
        </div>

        <div class="vertical-action-box__content">
            <div class="container">
                <p>Vestibulum id ligula porta felis euismod semper. Nulla vitae elit libero, a pharetra augue. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Donec sed odio dui.</p>

                <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla. Curabitur blandit tempus porttitor.</p>
            </div>
        </div>

        <div class="vertical-action-box__bar vertical-action-box__bar">
            <div class="vertical-action-box__barcontent vertical-action-box__barcontent--right">
                <button type="button" class="vertical-action-box__button vertical-action-box__button--warning" aria-label="Delete section">
                    <span class="vertical-action-box__buttonlabel vertical-action-box__buttonlabel--right">
                        Delete section
                    </span>
                    <span class="vertical-action-box__buttonheader">
                        <span class="vertical-action-box__icon vertical-action-box__icon--remove" aria-hidden="true"></span>
                    </span>
                </button>
            </div>
        </div>
    </div>


Example: {type: isolated} Bar without content

    <div class="vertical-action-box">
        <div class="vertical-action-box__bar">
            <div class="vertical-action-box__barcontent"></div>
        </div>

        <div class="vertical-action-box__content">
            <div class="container">
                <p>Vestibulum id ligula porta felis euismod semper. Nulla vitae elit libero, a pharetra augue. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Donec sed odio dui.</p>

                <p>Maecenas faucibus mollis interdum. Sed posuere consectetur est at lobortis. Nulla vitae elit libero, a pharetra augue. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>

                <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla. Curabitur blandit tempus porttitor.</p>
            </div>
        </div>

        <div class="vertical-action-box__bar vertical-action-box__bar">
            <div class="vertical-action-box__barcontent vertical-action-box__barcontent--right">
                <button type="button" class="vertical-action-box__button vertical-action-box__button--warning" aria-label="Delete section">
                    <span class="vertical-action-box__buttonlabel vertical-action-box__buttonlabel--right">
                        Delete section
                    </span>
                    <span class="vertical-action-box__buttonheader">
                        <span class="vertical-action-box__icon vertical-action-box__icon--remove" aria-hidden="true"></span>
                    </span>
                </button>
            </div>
        </div>
    </div>

Styleguide components.vertical-action-box
*/
.vertical-action-box {
  display: flex;
  flex-direction: row;
  border-color: #f1f1f2;
  border-style: solid;
  border-width: 3px 0 3px 0; }
  .vertical-action-box__bar {
    width: 36px;
    flex: 0 0 auto;
    position: relative;
    overflow: visible; }
  .vertical-action-box__barcontent {
    background-color: #f1f1f2;
    position: absolute;
    width: 36px;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    flex: 1 1 auto;
    overflow: hidden;
    z-index: 10; }
  .vertical-action-box__button {
    display: flex;
    flex-direction: row;
    width: 100%;
    margin-top: 12px;
    margin-bottom: 12px;
    padding-top: 6px;
    padding-bottom: 6px;
    background-color: #f1f1f2;
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    font-size: 15px;
    line-height: 21px;
    font-style: normal;
    color: #2f2c2f;
    white-space: normal;
    height: 36px;
    overflow: hidden; }
    @media screen and (min-width: 720px) {
      .vertical-action-box__button {
        font-size: 16px;
        line-height: 21px; } }
    .vertical-action-box__button:hover {
      background-color: #eeeeef;
      color: #2f2c2f; }
    .vertical-action-box__button--warning {
      background-color: #f1f1f2;
      color: #2f2c2f; }
      .vertical-action-box__button--warning:hover {
        background-color: #b30e1a;
        color: #fff; }
  .vertical-action-box__buttonheader {
    width: 36px;
    flex: 0 0 auto;
    display: inline-flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    text-align: center;
    height: 36px; }
  .vertical-action-box__icon:before {
    font-size: 15px;
    width: 19.5px; }
    @media screen and (min-width: 720px) {
      .vertical-action-box__icon:before {
        font-size: 16px; } }
    @media (min-width: 720px) {
      .vertical-action-box__icon:before {
        width: 20.8px; } }
  .vertical-action-box__icon--up:before {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    font-weight: 900;
    font-family: 'Font Awesome 5 Free';
    content: "\f062"; }
  .vertical-action-box__icon--down:before {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    font-weight: 900;
    font-family: 'Font Awesome 5 Free';
    content: "\f063"; }
  .vertical-action-box__icon--remove:before {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    font-weight: 900;
    font-family: 'Font Awesome 5 Free';
    content: "\f1f8"; }
  .vertical-action-box__buttonlabel {
    display: none;
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    padding-left: 6px;
    padding-right: 6px;
    height: 36px;
    vertical-align: center; }
    .vertical-action-box__buttonlabel--right {
      text-align: right; }
  .vertical-action-box__bar:hover .vertical-action-box__barcontent:not(:empty) {
    width: 250px; }
    .vertical-action-box__bar:hover .vertical-action-box__barcontent:not(:empty) .vertical-action-box__buttonlabel {
      display: inline-block; }
  .vertical-action-box__bar:hover .vertical-action-box__barcontent--right:not(:empty) {
    left: -214px; }
  .vertical-action-box__content {
    flex: 1 1 auto; }

/* Action bar

Example: {type: isolated}

    <div class="action-bar">
        <p class="text-center paragraph paragraph--tight">
            <strong>Add more content</strong>
        </p>
        <div class="action-bar__buttonbar">
            <button class="action-bar__button">
                Text
            </button>
            <button class="action-bar__button">
                Image
            </button>
        </div>
    </div>

Example: {type: isolated} With icons

    <div class="action-bar">
        <p class="text-center paragraph paragraph--tight">
            <strong>Add more content</strong>
        </p>
        <div class="action-bar__buttonbar">
            <button class="action-bar__button">
                <span class="cricon cricon--text" aria-hidden="true"></span>
                Text
            </button>
            <button class="action-bar__button">
                <span class="cricon cricon--image" aria-hidden="true"></span>
                Image
            </button>
        </div>
    </div>

Example: {type: isolated} Many items

    <div class="action-bar">
        <p class="text-center paragraph paragraph--tight">
            <strong>Add more content</strong>
        </p>
        <div class="action-bar__buttonbar">
            <button class="action-bar__button">
                Item 1
            </button>
            <button class="action-bar__button">
                Item 2
            </button>
            <button class="action-bar__button">
                Item 3
            </button>
            <button class="action-bar__button">
                Item 4 is long as **** as you can clearly see
            </button>
            <button class="action-bar__button">
                Item 5
            </button>
            <button class="action-bar__button">
                Item 6
            </button>
            <button class="action-bar__button">
                Item 7 is long too
            </button>
            <button class="action-bar__button">
                Item 8
            </button>
            <button class="action-bar__button">
                Item 9
            </button>
            <button class="action-bar__button">
                Item 10
            </button>
            <button class="action-bar__button">
                Item 11
            </button>
        </div>
    </div>

Styleguide components.action-bar
*/
.action-bar {
  background-color: #f1f1f2;
  color: #2f2c2f;
  padding: 24px 24px 18px 24px; }
  @media print {
    .action-bar {
      display: none !important; } }
  .action-bar__buttonbar {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding-right: 3px;
    padding-bottom: 3px;
    margin-bottom: 0; }
  .action-bar__button {
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    font-size: 15px;
    line-height: 21px;
    font-style: normal;
    text-align: center;
    position: relative;
    display: block;
    padding: 6px 12px;
    color: #2f2c2f;
    white-space: normal;
    border-width: 3px;
    border-style: solid;
    background-color: transparent;
    color: #2f2c2f;
    border-color: #828383;
    background-color: transparent;
    margin-left: 3px;
    margin-right: 3px;
    margin-bottom: 6px;
    border-radius: 5px; }
    @media screen and (min-width: 720px) {
      .action-bar__button {
        font-size: 16px;
        line-height: 21px; } }
    .action-bar__button:hover, .action-bar__button:focus, .action-bar__button:active {
      border-color: #828383;
      background-color: #828383;
      color: #fff; }
    @media (min-width: 720px) {
      .action-bar__button {
        padding: 9px 39px; } }

/** Promote box


Example: {type: isolated} --large

    <div class="container container--wide">
        <div class="promote-box promote-box--large">
            <div class="promote-box__heading">
                <h2>Hello heading</h2>
            </div>
            <div class="promote-box__boxlist">
                <div class="promote-box__box">
                    <div class="promote-box__boxcontent">
                        <div class="promote-box__column">
                            <div class="promote-box__image" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Blenheim_Palace_from_the_Water_Terraces_October_2016.jpg/1280px-Blenheim_Palace_from_the_Water_Terraces_October_2016.jpg')">
                                <div class="promote-box__imageribbon">
                                    <div class="promote-box__imageribbon-content">
                                        <div class="promote-box__imageribbon-text">
                                            Klassikeren!
                                        </div>
                                    </div>
                                </div>
                            </div>        
                        </div>

                        <div class="promote-box__column">
                            <div class="promote-box__description">
                                <div class="'promote-box__primary-content">
                                    Full round trip<br>
                                    <h3 class="paragraph">Bergen -> Kirkenes -> Bergen</h3>
                                    <p><strong>12 days</strong></p>
                                </div>

                                <div class="promote-box__secondary-content">
                                    <ul>
                                        <li>All the fjords in the world</li>
                                        <li>Geirangerfjorden</li>
                                        <li>Salstraumen</li>
                                        <li>Lofoton</li>
                                        <li>Geirangerfjorden</li>
                                        <li>Salstraumen</li>
                                        <li>Salstraumen</li>
                                    </ul>
                                    <p>
                                        <strong>Fra kr. 9800</strong>
                                    </p>
                                </div>
                            </div>

                            <div class="promote-box__button">
                                <a class="button button--secondary-fill" href="https://www.youtube.com">
                                    Få bookingvarsel
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


Example: {type: isolated} --medium

    <div class="container container--wide">
        <div class="promote-box promote-box--medium">
            <div class="promote-box__boxlist">
                <div class="promote-box__box">
                    <div class="promote-box__boxcontent">
                        <div class="promote-box__column">
                            <div class="promote-box__description">
                                <div class="promote-box__primary-content">
                                    <p>Nordgående</p>
                                    <strong>Halv rundreise</strong>
                                    <p class="paragraph">Bergen -> Kirkenes<p>
                                    <strong>7 dager</strong>
                                </div>

                                <div class="promote-box__image" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Blenheim_Palace_from_the_Water_Terraces_October_2016.jpg/1280px-Blenheim_Palace_from_the_Water_Terraces_October_2016.jpg')">
                                    <div class="promote-box__imageribbon">
                                        <div class="promote-box__imageribbon-content">
                                            <div class="promote-box__imageribbon-text">
                                                Popular!
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="promote-box__secondary-content">
                                    <ul>
                                        <li>Vestlandsfjordene</li>
                                        <li>Polarsirkelen</li>
                                        <li>Nordkapp</li>
                                        <li>Svolvær</li>
                                    </ul>
                                    <p>
                                        <strong>Fra kr. 5880</strong>
                                    </p>
                                </div>
                            </div>
                            <div class="promote-box__button">
                                <a class="button button--secondary-fill" href="https://www.youtube.com">
                                    Få bookingvarsel
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="promote-box__box">
                    <div class="promote-box__boxcontent">
                        <div class="promote-box__column">
                            <div class="promote-box__description">
                                <div class="'promote-box__primary-content">
                                    <p>Sørgående</p>
                                    <strong>Halv rundreise</strong>
                                    <p class="paragraph">Kirkenes -> Bergen<p>
                                    <strong>7 dager</strong>
                                </div>

                                <div class="promote-box__image" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Blenheim_Palace_from_the_Water_Terraces_October_2016.jpg/1280px-Blenheim_Palace_from_the_Water_Terraces_October_2016.jpg')"></div>

                                <div class="promote-box__secondary-content">
                                    <ul>
                                        <li>Lofoten</li>
                                        <li>Helgelandskysten</li>
                                        <li>Nidarosdomen og Trondheim</li>
                                        <li>Atlanterhavsveien</li>
                                    </ul>
                                    <p>
                                        <strong>Fra kr. 5880</strong>
                                    </p>
                                </div>
                            </div>

                            <div class="promote-box__button">
                                <a class="button button--secondary-fill" href="https://www.youtube.com">
                                    Få bookingvarsel
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="promote-box__box">
                    <div class="promote-box__boxcontent">
                        <div class="promote-box__column">
                            <div class="promote-box__description">
                                <div class="'promote-box__primary-content">
                                    <p>Sørgående</p>
                                    <strong>Halv rundreise</strong>
                                    <p class="paragraph">Kirkenes -> Bergen<p>
                                    <strong>7 dager</strong>
                                </div>

                                <div class="promote-box__image" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Blenheim_Palace_from_the_Water_Terraces_October_2016.jpg/1280px-Blenheim_Palace_from_the_Water_Terraces_October_2016.jpg')"></div>

                                <div class="promote-box__secondary-content">
                                    <ul>
                                        <li>Lofoten</li>
                                        <li>Helgelandskysten</li>
                                        <li>Nidarosdomen og Trondheim</li>
                                        <li>Atlanterhavsveien</li>
                                    </ul>
                                    <p>
                                        <strong>Fra kr. 5880</strong>
                                    </p>
                                </div>
                            </div>

                            <div class="promote-box__button">
                                <a class="button button--secondary-fill" href="https://www.youtube.com">
                                    Få bookingvarsel
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


Example: {type: isolated} --small

    <div class="container container--wide">
        <div class="promote-box promote-box--small">
            <div class="promote-box__boxlist">
                <div class="promote-box__box">
                    <div class="promote-box__boxcontent">
                        <div class="promote-box__column">
                            <div class="promote-box__description">
                                <div class="'promote-box__primary-content">
                                    <p>AAA</p>
                                </div>
                                <div class="promote-box__image" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Blenheim_Palace_from_the_Water_Terraces_October_2016.jpg/1280px-Blenheim_Palace_from_the_Water_Terraces_October_2016.jpg')">
                                    <div class="promote-box__imageribbon">
                                        <div class="promote-box__imageribbon-content">
                                            <div class="promote-box__imageribbon-text">
                                                Popular!
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="promote-box__secondary-content">
                                    <p>AAA</p>
                                </div>
                            </div>
                            <div class="promote-box__button">
                                <a class="button button--secondary-fill" href="https://www.youtube.com">
                                    Link 1
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="promote-box__box">
                    <div class="promote-box__boxcontent">
                        <div class="promote-box__column">
                            <div class="promote-box__description">
                                <div class="'promote-box__primary-content">
                                    <p>AAA</p>
                                </div>
                                <div class="promote-box__image" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Blenheim_Palace_from_the_Water_Terraces_October_2016.jpg/1280px-Blenheim_Palace_from_the_Water_Terraces_October_2016.jpg')"></div>
                                <div class="promote-box__secondary-content">
                                    <p>AAA</p>
                                </div>
                                <div class="promote-box__button">
                                    <a class="button button--secondary-fill" href="https://www.youtube.com">
                                        Link 1
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="promote-box__box">
                    <div class="promote-box__boxcontent">
                        <div class="promote-box__column">
                            <div class="promote-box__description">
                                <div class="'promote-box__primary-content">
                                    <p>AAA</p>
                                </div>
                                <div class="promote-box__image" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Blenheim_Palace_from_the_Water_Terraces_October_2016.jpg/1280px-Blenheim_Palace_from_the_Water_Terraces_October_2016.jpg')"></div>
                                <div class="promote-box__secondary-content">
                                    <p>AAA</p>
                                </div>
                                <div class="promote-box__button">
                                    <a class="button button--secondary-fill" href="https://www.youtube.com">
                                        Link 1
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="promote-box__box">
                    <div class="promote-box__boxcontent">
                        <div class="promote-box__column">
                            <div class="promote-box__description">
                                <div class="'promote-box__primary-content">
                                    <p>AAA</p>
                                </div>
                                <div class="promote-box__image" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Blenheim_Palace_from_the_Water_Terraces_October_2016.jpg/1280px-Blenheim_Palace_from_the_Water_Terraces_October_2016.jpg')"></div>
                                <div class="promote-box__secondary-content">
                                    <p>AAA</p>
                                </div>
                            </div>
                            <div class="promote-box__button">
                                <a class="button button--secondary-fill" href="https://www.youtube.com">
                                    Link 1
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


Styleguide components.promote-box
*/
.promote-box {
  width: 100%; }
  .promote-box__boxlist {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-wrap: wrap;
    margin-left: -12px;
    margin-right: -12px; }
  .promote-box__box {
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-bottom: 24px;
    margin-bottom: 28px;
    padding-left: 12px;
    padding-right: 12px; }
  .promote-box__boxcontent {
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background-color: #f5f5f5;
    padding: 24px;
    box-shadow: 0 2px 15px rgba(30, 30, 30, 0.1);
    border-radius: 5px;
    width: 100%;
    height: 100%; }
  .promote-box__column {
    flex: 0 1 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between; }
  .promote-box__image {
    flex: 0 0 auto;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    margin-bottom: 14px; }
  .promote-box__imageribbon {
    position: absolute; }
  .promote-box__imageribbon-content {
    overflow: visible;
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center;
    background-color: #ce111d;
    color: #fff;
    font-size: 15px;
    line-height: 21px;
    transform: rotate(45deg);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center; }
    @media screen and (min-width: 720px) {
      .promote-box__imageribbon-content {
        font-size: 16px;
        line-height: 21px; } }
  .promote-box__imageribbon-text {
    white-space: nowrap;
    overflow: hidden; }
  .promote-box .promote-box__imageribbon {
    top: -17.5px;
    right: -17.5px;
    height: 155px;
    width: 155px; }
  .promote-box .promote-box__imageribbon-content {
    height: 35px;
    width: 232.5px;
    margin-left: -116.25px;
    margin-top: -17.5px; }
  .promote-box__description {
    margin-bottom: 14px; }
    .promote-box__description ul li {
      padding-left: 25px;
      position: relative; }
      .promote-box__description ul li:before {
        font-size: 15px;
        width: 19.5px;
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        line-height: 1;
        font-weight: 900;
        font-family: 'Font Awesome 5 Free';
        content: "\f00c";
        position: absolute;
        top: 6px;
        left: 0; }
        @media screen and (min-width: 720px) {
          .promote-box__description ul li:before {
            font-size: 16px; } }
        @media (min-width: 720px) {
          .promote-box__description ul li:before {
            width: 20.8px; } }
    .promote-box__description p:not(:empty) + h2,
    .promote-box__description p:not(:empty) + h3,
    .promote-box__description p:not(:empty) + h4,
    .promote-box__description ul + h2,
    .promote-box__description ul + h3,
    .promote-box__description ul + h4,
    .promote-box__description ul, .promote-box__description p, .promote-box__description h2, .promote-box__description h3, .promote-box__description h4 {
      margin-bottom: 14px;
      margin-top: 0; }
    .promote-box__description h2, .promote-box__description h3, .promote-box__description h4 {
      font-family: "Maison Neue", Helvetica, sans-serif;
      font-weight: bold;
      font-size: 22px;
      line-height: 28px; }
      @media screen and (min-width: 720px) {
        .promote-box__description h2, .promote-box__description h3, .promote-box__description h4 {
          font-size: 24px;
          line-height: 35px; } }
  .promote-box__primary-content {
    flex: 0 0 auto; }
  .promote-box__secondary-content {
    flex: 0 1 auto; }
  .promote-box__button {
    flex: 0 0 auto;
    text-align: center;
    overflow: visible;
    height: 1px;
    margin-bottom: -2px; }
    .promote-box__button .button, .promote-box__button .blocklist__movebutton, .promote-box__button .blocklist-header__action, .promote-box__button .inline-action__action, .promote-box__button .split__more, .promote-box__button .care-question__button, .promote-box__button .get-involved__button:not(.get-involved__button--donate), .promote-box__button .get-involved__button--donate, .promote-box__button .ievv-designer-containeredit__barbutton, .promote-box__button .ievv-designer-containeredit__addbutton, .promote-box__button .ievv-designer-containeredit--expanded .ievv-designer-containeredit__barbutton--toggle, .ievv-designer-containeredit--expanded .promote-box__button .ievv-designer-containeredit__barbutton--toggle, .promote-box__button .ievv-editbar__action {
      margin: 0; }
  @media (min-width: 960px) {
    .promote-box--large .promote-box__imageribbon {
      top: -20px;
      right: -20px;
      height: 250px;
      width: 250px; }
    .promote-box--large .promote-box__imageribbon-content {
      height: 40px;
      width: 375px;
      margin-left: -187.5px;
      margin-top: -20px; } }
  .promote-box--large .promote-box__box {
    width: 100%; }
  .promote-box--large .promote-box__boxcontent {
    flex-direction: column; }
    @media (min-width: 960px) {
      .promote-box--large .promote-box__boxcontent {
        flex-direction: row; } }
  .promote-box--large .promote-box__column {
    flex: 0 1 auto;
    width: 100%; }
    @media (min-width: 960px) {
      .promote-box--large .promote-box__column {
        flex: 0 0 auto;
        width: 50%; }
        .promote-box--large .promote-box__column:first-child {
          padding-right: 24px; }
        .promote-box--large .promote-box__column:last-child {
          padding-left: 24px; } }
  .promote-box--large .promote-box__image {
    height: 185px; }
    @media (min-width: 440px) {
      .promote-box--large .promote-box__image {
        height: 250px; } }
    @media (min-width: 720px) {
      .promote-box--large .promote-box__image {
        height: 350px; } }
    @media (min-width: 960px) {
      .promote-box--large .promote-box__image {
        height: 100%;
        margin: 0; } }
  .promote-box--large .promote-box__button {
    text-align: center; }
    @media (min-width: 960px) {
      .promote-box--large .promote-box__button {
        text-align: left; } }
  .promote-box--medium .promote-box__boxlist {
    flex-direction: column; }
    @media (min-width: 720px) {
      .promote-box--medium .promote-box__boxlist {
        flex-direction: row; } }
  @media (min-width: 720px) {
    .promote-box--medium .promote-box__box {
      width: 50%; } }
  .promote-box--medium .promote-box__boxcontent {
    flex-direction: row; }
  .promote-box--medium .promote-box__image {
    margin-bottom: 24px;
    height: 185px; }
    @media (min-width: 440px) {
      .promote-box--medium .promote-box__image {
        height: 250px; } }
    @media (min-width: 720px) {
      .promote-box--medium .promote-box__image {
        height: 200px; } }
    @media (min-width: 960px) {
      .promote-box--medium .promote-box__image {
        height: 270px; } }
    @media (min-width: 1240px) {
      .promote-box--medium .promote-box__image {
        height: 350px; } }
  .promote-box--small .promote-box__boxlist {
    flex-direction: column; }
    @media (min-width: 720px) {
      .promote-box--small .promote-box__boxlist {
        flex-direction: row; } }
  @media (min-width: 720px) {
    .promote-box--small .promote-box__box {
      width: 33.33333%; } }
  .promote-box--small .promote-box__boxcontent {
    flex-direction: row; }
  .promote-box--small .promote-box__image {
    margin-bottom: 24px;
    height: 185px; }
    @media (min-width: 440px) {
      .promote-box--small .promote-box__image {
        height: 250px; } }
    @media (min-width: 720px) {
      .promote-box--small .promote-box__image {
        height: 150px; } }
    @media (min-width: 960px) {
      .promote-box--small .promote-box__image {
        height: 200px; } }
    @media (min-width: 1240px) {
      .promote-box--small .promote-box__image {
        height: 250px; } }

/**
Quote

Example: {type: isolated}

    <blockquote class="quote">
        <p class="quote__text">People say nothing is impossible, but I do nothing every day.</p>
        <footer class="quote__footer">
            <cite class="quote__source">
                &#8212; Winnie-the-Pooh
            </cite>
        </footer>
    </blockquote>


Styleguide components.quote
*/
.quote {
  text-align: center; }
  .quote__text {
    font-size: 21px;
    line-height: 28px;
    font-family: "Noe Text", Helvetica, sans-serif; }
    @media screen and (min-width: 440px) {
      .quote__text {
        font-size: 26px;
        line-height: 35px; } }
    @media screen and (min-width: 720px) {
      .quote__text {
        font-size: 27px;
        line-height: 35px; } }
    .quote__text:before {
      content: '\00AB'; }
    .quote__text:after {
      content: '\00BB'; }
  .quote__footer {
    margin-bottom: 0; }
  .quote__source {
    font-size: 22px;
    line-height: 28px;
    font-family: "Maison Neue", Helvetica, sans-serif; }
    @media screen and (min-width: 720px) {
      .quote__source {
        font-size: 24px;
        line-height: 35px; } }

.action-bar {
  background-color: #e3e4e3;
  color: #2f2c2f;
  padding: 24px 24px 18px 24px; }
  @media print {
    .action-bar {
      display: none !important; } }
  .action-bar__buttonbar {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding-right: 3px;
    padding-bottom: 3px;
    margin-bottom: 0; }
  .action-bar__button {
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    font-size: 15px;
    line-height: 21px;
    font-style: normal;
    text-align: center;
    position: relative;
    display: block;
    padding: 6px 12px;
    color: #2f2c2f;
    white-space: normal;
    border-width: 3px;
    border-style: solid;
    background-color: transparent;
    color: #2f2c2f;
    border-color: #002B49;
    background-color: transparent;
    margin-left: 3px;
    margin-right: 3px;
    margin-bottom: 6px;
    border-radius: 5px; }
    @media screen and (min-width: 720px) {
      .action-bar__button {
        font-size: 16px;
        line-height: 21px; } }
    .action-bar__button:hover, .action-bar__button:focus, .action-bar__button:active {
      border-color: #002B49;
      background-color: #002B49;
      color: #fff; }
    @media (min-width: 720px) {
      .action-bar__button {
        padding: 9px 39px; } }

.vertical-action-box {
  display: flex;
  flex-direction: row;
  border-color: #e3e4e3;
  border-style: solid;
  border-width: 3px 0 3px 0; }
  .vertical-action-box__bar {
    width: 36px;
    flex: 0 0 auto;
    position: relative;
    overflow: visible; }
  .vertical-action-box__barcontent {
    background-color: #e3e4e3;
    position: absolute;
    width: 36px;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    flex: 1 1 auto;
    overflow: hidden;
    z-index: 10; }
  .vertical-action-box__button {
    display: flex;
    flex-direction: row;
    width: 100%;
    margin-top: 12px;
    margin-bottom: 12px;
    padding-top: 6px;
    padding-bottom: 6px;
    background-color: #e3e4e3;
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    font-size: 15px;
    line-height: 21px;
    font-style: normal;
    color: #2f2c2f;
    white-space: normal;
    height: 36px;
    overflow: hidden; }
    @media screen and (min-width: 720px) {
      .vertical-action-box__button {
        font-size: 16px;
        line-height: 21px; } }
    .vertical-action-box__button:hover {
      background-color: #eeeeef;
      color: #2f2c2f; }
    .vertical-action-box__button--warning {
      background-color: #e3e4e3;
      color: #2f2c2f; }
      .vertical-action-box__button--warning:hover {
        background-color: #b30e1a;
        color: #fff; }
  .vertical-action-box__buttonheader {
    width: 36px;
    flex: 0 0 auto;
    display: inline-flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    text-align: center;
    height: 36px; }
  .vertical-action-box__icon:before {
    font-size: 15px;
    width: 19.5px; }
    @media screen and (min-width: 720px) {
      .vertical-action-box__icon:before {
        font-size: 16px; } }
    @media (min-width: 720px) {
      .vertical-action-box__icon:before {
        width: 20.8px; } }
  .vertical-action-box__icon--up:before {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    font-weight: 900;
    font-family: 'Font Awesome 5 Free';
    content: "\f062"; }
  .vertical-action-box__icon--down:before {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    font-weight: 900;
    font-family: 'Font Awesome 5 Free';
    content: "\f063"; }
  .vertical-action-box__icon--remove:before {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    font-weight: 900;
    font-family: 'Font Awesome 5 Free';
    content: "\f1f8"; }
  .vertical-action-box__buttonlabel {
    display: none;
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    padding-left: 6px;
    padding-right: 6px;
    height: 36px;
    vertical-align: center; }
    .vertical-action-box__buttonlabel--right {
      text-align: right; }
  .vertical-action-box__bar:hover .vertical-action-box__barcontent:not(:empty) {
    width: 250px; }
    .vertical-action-box__bar:hover .vertical-action-box__barcontent:not(:empty) .vertical-action-box__buttonlabel {
      display: inline-block; }
  .vertical-action-box__bar:hover .vertical-action-box__barcontent--right:not(:empty) {
    left: -214px; }
  .vertical-action-box__content {
    flex: 1 1 auto; }

.article {
  font-size: 22px;
  line-height: 28px; }
  @media screen and (min-width: 720px) {
    .article {
      font-size: 24px;
      line-height: 35px; } }
  .article__published {
    font-family: "Maison Neue Mono", Helvetica, sans-serif;
    font-weight: normal;
    font-size: 15px;
    line-height: 21px;
    display: block;
    color: inherit;
    text-align: center;
    padding-top: 14px; }
    @media screen and (min-width: 720px) {
      .article__published {
        font-size: 16px;
        line-height: 21px; } }
    .article__published--light {
      text-align: left;
      background-color: #fff; }
  .article .button, .article .blocklist__movebutton, .article .blocklist-header__action, .article .inline-action__action, .article .split__more, .article .care-question__button, .article .get-involved__button:not(.get-involved__button--donate), .article .get-involved__button--donate, .article .ievv-designer-containeredit__barbutton, .article .ievv-designer-containeredit__addbutton, .article .ievv-designer-containeredit--expanded .ievv-designer-containeredit__barbutton--toggle, .ievv-designer-containeredit--expanded .article .ievv-designer-containeredit__barbutton--toggle, .article .ievv-editbar__action {
    font-size: 22px;
    line-height: 28px;
    padding: 14px 60px;
    margin-bottom: 63px; }
    @media screen and (min-width: 720px) {
      .article .button, .article .blocklist__movebutton, .article .blocklist-header__action, .article .inline-action__action, .article .split__more, .article .care-question__button, .article .get-involved__button:not(.get-involved__button--donate), .article .get-involved__button--donate, .article .ievv-designer-containeredit__barbutton, .article .ievv-designer-containeredit__addbutton, .article .ievv-designer-containeredit--expanded .ievv-designer-containeredit__barbutton--toggle, .ievv-designer-containeredit--expanded .article .ievv-designer-containeredit__barbutton--toggle, .article .ievv-editbar__action {
        font-size: 24px;
        line-height: 35px; } }
  .article .page-section--wysiwygtext h2 {
    font-size: 28px;
    line-height: 35px;
    color: #E01220; }
    @media screen and (min-width: 440px) {
      .article .page-section--wysiwygtext h2 {
        font-size: 36px;
        line-height: 49px; } }
    @media screen and (min-width: 720px) {
      .article .page-section--wysiwygtext h2 {
        font-size: 40px;
        line-height: 49px; } }

.introduction {
  padding-top: 49px;
  padding-bottom: 49px;
  background-color: #fff;
  margin-bottom: 14px; }
  @media (min-width: 720px) {
    .introduction {
      padding-top: calc(8vh + 3vw);
      padding-bottom: calc(7.8vh + 3vw);
      margin-bottom: 49px; } }
  .introduction__content {
    margin: 0 auto;
    padding-left: 12px;
    padding-right: 12px;
    max-width: 740px;
    font-family: "Noe Text", Helvetica, sans-serif;
    font-size: 28px;
    line-height: 35px;
    color: #E01220;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto; }
    @media (min-width: 440px) {
      .introduction__content {
        padding-left: 24px;
        padding-right: 24px; } }
    @media (min-width: 720px) {
      .introduction__content {
        padding-left: 60px;
        padding-right: 60px; } }
    @media screen and (min-width: 440px) {
      .introduction__content {
        font-size: 36px;
        line-height: 49px; } }
    @media screen and (min-width: 720px) {
      .introduction__content {
        font-size: 40px;
        line-height: 49px; } }

.slideshow {
  position: relative;
  width: 100%;
  padding-top: 63px;
  padding-bottom: 63px;
  overflow-x: hidden; }
  .slideshow__content {
    margin: 0 auto;
    max-width: 680px;
    display: flex;
    align-items: center;
    transition: transform 300ms cubic-bezier(0, 0, 0.1, 1);
    will-change: transform; }
  .slideshow__figure {
    margin: 0 auto;
    max-width: 680px;
    width: 100%;
    margin: 0;
    flex-shrink: 0; }
  .slideshow__caption {
    visibility: hidden;
    font-size: 16px;
    line-height: 21px;
    margin-top: 28px;
    padding-left: 12px;
    padding-right: 12px; }
    @media screen and (min-width: 440px) {
      .slideshow__caption {
        font-size: 19px;
        line-height: 28px; } }
    @media (min-width: 720px) {
      .slideshow__caption {
        margin-top: 35px;
        padding-left: 0;
        padding-right: 0; } }
  .slideshow__image {
    position: relative;
    height: auto;
    width: 100%;
    margin: 0;
    opacity: 0.3;
    transform: scale(0.9);
    user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    will-change: transform, opacity;
    transition: transform 300ms cubic-bezier(0, 0, 0.1, 1), opacity 300ms ease-out; }
    @supports (object-fit: cover) {
      .slideshow__image {
        height: 500px;
        max-height: 60vh;
        object-fit: cover; } }
    .slideshow__image--offset-left {
      transform: translateX(20%); }
      .slideshow__image--offset-left.slideshow__image--distance-2 {
        transform: translateX(30%) scale(0.8); }
    .slideshow__image--offset-right {
      transform: translateX(-20%); }
      .slideshow__image--offset-right.slideshow__image--distance-2 {
        transform: translateX(-30%) scale(0.8); }
    .slideshow__image--distance-1 {
      z-index: 2; }
      @media (min-width: 720px) {
        .slideshow__image--distance-1 {
          box-shadow: 0 0 60px rgba(0, 0, 0, 0.2); } }
    .slideshow__image--distance-2 {
      opacity: 0.2; }
    .slideshow__image--distance-3, .slideshow__image--distance-4, .slideshow__image--distance-5, .slideshow__image--distance-6, .slideshow__image--distance-7, .slideshow__image--distance-8, .slideshow__image--distance-9, .slideshow__image--distance-10 {
      opacity: 0; }
    .slideshow__image:not(.slideshow__image--focus) {
      cursor: pointer; }
      .slideshow__image:not(.slideshow__image--focus):hover {
        opacity: 0.8; }
    .slideshow__image--focus {
      opacity: 1;
      z-index: 3;
      transform: scale(1.1); }
      @media (min-width: 720px) {
        .slideshow__image--focus {
          box-shadow: 0 0 60px rgba(0, 0, 0, 0.3); } }
      .slideshow__image--focus ~ .slideshow__caption {
        visibility: visible;
        animation: slideshow-caption-enter 300ms cubic-bezier(0, 0, 0.1, 1) both;
        animation-delay: 150ms; }
  .slideshow__button {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 1px;
    top: calc(45% - 19px);
    border-radius: 50%;
    width: 38px;
    height: 38px;
    background-color: rgba(0, 0, 0, 0.2);
    animation: slideshow-button-enter 300ms cubic-bezier(0, 0, 0.1, 1) both; }
    .slideshow__button--previous {
      left: 3px; }
    .slideshow__button--next {
      right: 3px; }
    @media (min-width: 720px) {
      .slideshow__button {
        display: none; } }

@keyframes slideshow-caption-enter {
  from {
    opacity: 0;
    transform: translateY(-50px); } }

@keyframes slideshow-button-enter {
  from {
    opacity: 0;
    transform: scale(0.6); } }

.chart {
  margin-top: 63px;
  margin-bottom: 63px; }
  .chart__header {
    margin: 0 auto;
    padding-left: 12px;
    padding-right: 12px;
    max-width: 740px; }
    @media (min-width: 440px) {
      .chart__header {
        padding-left: 24px;
        padding-right: 24px; } }
    @media (min-width: 720px) {
      .chart__header {
        padding-left: 60px;
        padding-right: 60px; } }
  .chart__title {
    font-size: 28px;
    line-height: 35px;
    color: #E01220;
    margin-bottom: 7px; }
    @media screen and (min-width: 440px) {
      .chart__title {
        font-size: 36px;
        line-height: 49px; } }
    @media screen and (min-width: 720px) {
      .chart__title {
        font-size: 40px;
        line-height: 49px; } }
  .chart--small .chart__container {
    margin: 0 auto;
    padding-left: 12px;
    padding-right: 12px;
    max-width: 740px; }
    @media (min-width: 440px) {
      .chart--small .chart__container {
        padding-left: 24px;
        padding-right: 24px; } }
    @media (min-width: 720px) {
      .chart--small .chart__container {
        padding-left: 60px;
        padding-right: 60px; } }

.c3-chart-arcs-title {
  dominant-baseline: middle;
  font-size: 16px;
  line-height: 21px; }
  @media screen and (min-width: 440px) {
    .c3-chart-arcs-title {
      font-size: 19px;
      line-height: 28px; } }

.c3-chart-arcs .c3-chart-arcs-background {
  fill: #f5f5f5;
  stroke: #fff; }

.c3-chart-arcs .c3-chart-arcs-gauge-unit {
  fill: #2f2c2f;
  font-size: 15px;
  line-height: 21px; }
  @media screen and (min-width: 720px) {
    .c3-chart-arcs .c3-chart-arcs-gauge-unit {
      font-size: 16px;
      line-height: 21px; } }

.c3-chart-arcs .c3-chart-arcs-gauge-max {
  fill: #e3e4e3; }

.c3-chart-arcs .c3-chart-arcs-gauge-min {
  fill: #e3e4e3; }

.c3-chart-arcs .c3-gauge-value {
  fill: #2f2c2f; }

.c3-chart-arcs.c3-target g path {
  opacity: 1; }

.c3-chart-arcs.c3-target.c3-focused g path {
  opacity: 1; }

.c3-area {
  stroke-width: 0;
  opacity: 0.3; }

.c3-bar {
  stroke-width: 0; }
  .c3-bar ._expanded_ {
    fill-opacity: 0.9; }

.c3-brush .extent {
  fill-opacity: 0.4; }

.c3 svg {
  font-family: "Maison Neue", Helvetica, sans-serif;
  font-weight: normal;
  font-size: 15px;
  line-height: 21px;
  -webkit-tap-highlight-color: transparent; }
  @media screen and (min-width: 720px) {
    .c3 svg {
      font-size: 16px;
      line-height: 21px; } }

.c3 path,
.c3 line {
  fill: none;
  stroke: #e3e4e3; }

.c3 text {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none; }

.c3-axis text {
  font-size: 12px;
  line-height: 21px; }
  @media screen and (min-width: 720px) {
    .c3-axis text {
      font-size: 13px;
      line-height: 21px; } }

.c3-legend-item-tile,
.c3-xgrid-focus,
.c3-ygrid,
.c3-event-rect,
.c3-bars path {
  shape-rendering: crispEdges; }

.c3-chart-arc path {
  stroke: #fff; }

.c3-chart-arc rect {
  stroke: white;
  stroke-width: 1; }

.c3-chart-arc text {
  fill: #fff;
  font-size: 15px;
  line-height: 21px; }
  @media screen and (min-width: 720px) {
    .c3-chart-arc text {
      font-size: 16px;
      line-height: 21px; } }

.c3-target.c3-focused {
  opacity: 1; }
  .c3-target.c3-focused path.c3-line,
  .c3-target.c3-focused path.c3-step {
    stroke-width: 5; }
  .c3-target.c3-focused circle {
    r: 7; }

.c3-target.c3-defocused {
  opacity: 0.4; }

.c3-grid line {
  stroke: #fff; }

.c3-grid text {
  fill: #fff; }

.c3-xgrid,
.c3-ygrid {
  stroke-dasharray: 3 3; }

.c3-legend-item {
  font-size: 15px;
  line-height: 21px; }
  @media screen and (min-width: 720px) {
    .c3-legend-item {
      font-size: 16px;
      line-height: 21px; } }

.c3-legend-item-hidden {
  opacity: 0.3; }

.c3-legend-background {
  opacity: 0.75;
  fill: #fff;
  stroke: #002B49;
  stroke-width: 1; }

.c3-chart-line .c3-line {
  stroke-width: 3; }

.c3-chart-line .c3-circle {
  r: 4; }

.c3-circle._expanded_ {
  stroke-width: 1;
  stroke: white; }

.c3-selected-circle {
  fill: white;
  stroke-width: 2; }

.c3-region {
  fill: #eeeeef;
  fill-opacity: 0.1; }

.c3-text.c3-empty {
  fill: #eeeeef;
  font-size: 2em; }

.c3-title {
  font-family: "Maison Neue", Helvetica, sans-serif;
  font-weight: normal;
  font-size: 15px;
  line-height: 21px; }
  @media screen and (min-width: 720px) {
    .c3-title {
      font-size: 16px;
      line-height: 21px; } }

.c3-tooltip-container {
  z-index: 10; }

.c3-tooltip {
  overflow: hidden;
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0 2px 40px rgba(0, 0, 0, 0.2); }
  .c3-tooltip td {
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: normal;
    font-size: 12px;
    line-height: 21px;
    padding: 7px 12px;
    border: 3px solid #fff; }
    @media screen and (min-width: 720px) {
      .c3-tooltip td {
        font-size: 13px;
        line-height: 21px; } }
    .c3-tooltip td.name {
      padding-right: 12px;
      white-space: nowrap; }
    .c3-tooltip td.value {
      padding-left: 12px;
      text-align: right; }
    .c3-tooltip td > span {
      position: relative;
      top: -1px;
      display: inline-block;
      vertical-align: middle;
      width: 14px;
      height: 14px;
      margin-right: 12px; }
  .c3-tooltip th {
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-weight: bold;
    font-size: 15px;
    line-height: 21px;
    padding: 7px 12px;
    text-align: left;
    color: #fff;
    border: 3px solid #002B49;
    background-color: #002B49; }
    @media screen and (min-width: 720px) {
      .c3-tooltip th {
        font-size: 16px;
        line-height: 21px; } }

.c3-drag-zoom.enabled {
  pointer-events: all;
  visibility: visible; }

.c3-drag-zoom.disabled {
  pointer-events: none;
  visibility: hidden; }

.c3-drag-zoom .extent {
  fill-opacity: .1; }

.tilelayout__item--purple {
  background-color: #B9A3E3; }
  .tilelayout__item--purple, .tilelayout__item--purple:hover, .tilelayout__item--purple:focus {
    color: #2f2c2f; }

.tilelayout__item--green {
  background-color: #6ECEB2; }
  .tilelayout__item--green, .tilelayout__item--green:hover, .tilelayout__item--green:focus {
    color: #2f2c2f; }

.tilelayout__item--blue {
  background-color: #99D6EA; }
  .tilelayout__item--blue, .tilelayout__item--blue:hover, .tilelayout__item--blue:focus {
    color: #2f2c2f; }

.tilelayout--webpage {
  margin: 0 auto;
  max-width: 1580px;
  padding: 0 4px;
  margin-top: 0;
  margin-bottom: 0; }
  @media (min-width: 720px) {
    .tilelayout--webpage {
      padding: 0 4px;
      margin-top: 0;
      margin-bottom: 0; } }
  .tilelayout--webpage .tilelayout__content {
    padding: 0; }

.tilelayout--article {
  margin: 63px 0;
  padding: 63px 0; }

/*
Minimal wrapper for tilelayout. Can use a `page-section page-section--focus` instead of this
if you need top and bottom padding.
*/
.tilelayout_wrapper {
  background-color: #fff; }

.sticky-image {
  position: relative;
  width: 100vw;
  min-height: 100vh; }
  .sticky-image__images {
    display: none;
    position: sticky;
    top: 0;
    width: 100vw;
    min-height: 100vh; }
    @supports (position: sticky) {
      .sticky-image__images {
        display: block; } }
  .sticky-image__image {
    display: block;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    transition: opacity 500ms ease-out; }
    @supports (position: sticky) {
      .sticky-image__image {
        position: absolute;
        top: 0; }
        .sticky-image__image--inactive {
          opacity: 0; } }
  .sticky-image__caption {
    position: relative;
    display: none;
    align-items: flex-start;
    justify-content: center;
    z-index: 3;
    padding: 12px;
    will-change: transform, opacity; }
    @media (min-width: 720px) {
      .sticky-image__caption {
        padding: 60px; } }
    @supports (position: sticky) {
      .sticky-image__caption {
        display: flex;
        height: 100vh;
        margin-top: 150px; } }
    .sticky-image__caption--fallback {
      display: flex;
      position: absolute;
      bottom: 0;
      width: 100%; }
      @supports (position: sticky) {
        .sticky-image__caption--fallback {
          display: none; } }
  .sticky-image__text {
    margin: 0 auto;
    padding-left: 12px;
    padding-right: 12px;
    max-width: 620px;
    font-family: "Maison Neue", Helvetica, sans-serif;
    font-size: 21px;
    line-height: 28px;
    width: 100%;
    padding: 24px;
    color: #fff;
    background-color: #E01220; }
    @media (min-width: 440px) {
      .sticky-image__text {
        padding-left: 24px;
        padding-right: 24px; } }
    @media (min-width: 720px) {
      .sticky-image__text {
        padding-left: 60px;
        padding-right: 60px; } }
    @media screen and (min-width: 440px) {
      .sticky-image__text {
        font-size: 26px;
        line-height: 35px; } }
    @media screen and (min-width: 720px) {
      .sticky-image__text {
        font-size: 27px;
        line-height: 35px; } }
    @media (min-width: 720px) {
      .sticky-image__text {
        padding: 24px; } }
  .sticky-image__fallback {
    position: relative; }
    @supports (position: sticky) {
      .sticky-image__fallback {
        display: none; } }

/* Magazine list

Example: Magazine list
  <section class="magazine-list">
    <h2 class="magazine-list__title">Medlemsmagasinet</h2>
     <a href="/magazine-list-url" class="magazine-list__item">
        <div class="magazine-list__hover magazine-list__hover--top-left"></div>
        <div class="magazine-list__hover magazine-list__hover--top-right"></div>
        <div class="magazine-list__hover magazine-list__hover--bottom-left"></div>
        <div class="magazine-list__hover magazine-list__hover--bottom-right"></div>
         <div class="magazine-list__image" style="background-image: url(http://media.djangopony.com/img/magic-pony-django-wallpaper.png); background-position: 80% 50%;"></div>
        <h3 class="magazine-list__text">Klar for valgkamp</h3>
    </a>
    <p class="magazine-list__description">Juleutgaven</p>
  </section>

Styleguide components.magazine-list
 */
.magazine-list {
  margin-bottom: 63px; }
  .magazine-list__content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; }
  .magazine-list__itemwrapper {
    display: block;
    margin: 0 6px; }
  .magazine-list__title, .magazine-list__description {
    text-align: center;
    padding-left: 12px;
    padding-right: 12px; }
  .magazine-list__description {
    margin-top: 12px; }
  .magazine-list__item {
    display: block;
    position: relative;
    width: 230px;
    border: 0;
    margin: 0 auto;
    background-color: transparent; }
    .magazine-list__item:hover .magazine-list__image {
      box-shadow: 0 0 40px rgba(0, 0, 0, 0.1); }
    .magazine-list__item:after {
      content: '';
      display: block;
      width: 100%;
      padding-bottom: 133.33333%; }
  .magazine-list__image {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-color: #2f2c2f;
    transform: perspective(50rem);
    transform-style: preserve-3d;
    transition: transform 400ms ease, box-shadow 600ms ease; }
    .magazine-list__image:before, .magazine-list__image:after {
      content: '';
      position: absolute;
      display: block;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
    .magazine-list__image:before {
      opacity: 0.6;
      z-index: 2;
      background-image: linear-gradient(rgba(0, 0, 0, 0.3), black); }
      @supports (mix-blend-mode: multiply) {
        .magazine-list__image:before {
          opacity: 0.3;
          mix-blend-mode: multiply; } }
    .magazine-list__image:after {
      opacity: 0;
      z-index: 3;
      transition: opacity 500ms ease; }
  .magazine-list__text {
    position: absolute;
    bottom: 12px;
    left: 12px;
    right: 12px;
    margin: 0;
    color: #fff;
    font-size: 2.2rem;
    line-height: 1.1;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
    hyphens: none;
    z-index: 3;
    transition: transform 300ms ease; }
  .magazine-list__hover {
    position: absolute;
    width: 50%;
    height: 50%;
    z-index: 4;
    opacity: 0; }
    .magazine-list__hover:hover {
      opacity: 1; }
    .magazine-list__hover--top-left {
      top: 0;
      left: 0; }
      .magazine-list__hover--top-left:hover ~ .magazine-list__image {
        transform: perspective(50rem) rotateX(4deg) rotateY(-4deg); }
        .magazine-list__hover--top-left:hover ~ .magazine-list__image:after {
          opacity: 0.3;
          background-image: linear-gradient(135deg, white 0%, rgba(255, 255, 255, 0) 50%); }
      .magazine-list__hover--top-left:hover ~ .magazine-list__text {
        transform: translate(2px, 2px); }
    .magazine-list__hover--top-right {
      top: 0;
      right: 0; }
      .magazine-list__hover--top-right:hover ~ .magazine-list__image {
        transform: perspective(50rem) rotateX(4deg) rotateY(4deg); }
        .magazine-list__hover--top-right:hover ~ .magazine-list__image:after {
          opacity: 0.3;
          background-image: linear-gradient(-135deg, white 0%, rgba(255, 255, 255, 0) 50%); }
      .magazine-list__hover--top-right:hover ~ .magazine-list__text {
        transform: translate(-2px, 2px); }
    .magazine-list__hover--bottom-left {
      bottom: 0;
      left: 0; }
      .magazine-list__hover--bottom-left:hover ~ .magazine-list__image {
        transform: perspective(50rem) rotateX(-4deg) rotateY(-4deg); }
        .magazine-list__hover--bottom-left:hover ~ .magazine-list__image:after {
          opacity: 0.3;
          background-image: linear-gradient(45deg, white 0%, rgba(255, 255, 255, 0) 50%); }
      .magazine-list__hover--bottom-left:hover ~ .magazine-list__text {
        transform: translate(2px, -2px); }
    .magazine-list__hover--bottom-right {
      bottom: 0;
      right: 0; }
      .magazine-list__hover--bottom-right:hover ~ .magazine-list__image {
        transform: perspective(50rem) rotateX(-4deg) rotateY(4deg); }
        .magazine-list__hover--bottom-right:hover ~ .magazine-list__image:after {
          opacity: 0.3;
          background-image: linear-gradient(-45deg, white 0%, rgba(255, 255, 255, 0) 50%); }
      .magazine-list__hover--bottom-right:hover ~ .magazine-list__text {
        transform: translate(-2px, -2px); }

.overflow-text {
  display: flex; }
  .overflow-text__content {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    margin: 0;
    margin-right: 0.25em; }
  .overflow-text__toggle {
    outline: 0;
    white-space: nowrap;
    color: #40AAB8;
    text-decoration: underline; }
    .overflow-text__toggle:hover {
      color: #002B49; }
  .overflow-text--expanded {
    display: block; }
    .overflow-text--expanded .overflow-text__content {
      display: inline;
      white-space: normal;
      overflow: visible;
      text-overflow: unset; }

.video {
  margin-top: 63px;
  margin-bottom: 63px; }
  .video__player {
    display: block;
    width: 100%; }
  .video:not(.video--large) {
    margin: 0 auto;
    padding-left: 12px;
    padding-right: 12px;
    max-width: 950px;
    margin-top: 63px;
    margin-bottom: 63px; }
    @media (min-width: 440px) {
      .video:not(.video--large) {
        padding-left: 24px;
        padding-right: 24px; } }
    @media (min-width: 720px) {
      .video:not(.video--large) {
        padding-left: 60px;
        padding-right: 60px; } }

.responsive-table--border {
  border: 2px solid #cbcbca;
  border-radius: 5px; }

.responsive-table__cell {
  display: block;
  margin-bottom: 12px;
  text-align: left; }
  .responsive-table__cell:last-child {
    margin-bottom: 0; }
  @media (min-width: 960px) {
    .responsive-table__cell {
      display: table-cell;
      padding: 12px;
      margin-bottom: 0; } }
  @media (min-width: 960px) {
    .responsive-table__cell--text-right {
      text-align: right; } }
  .responsive-table__cell--header {
    font-weight: bold;
    padding: 12px; }
  .responsive-table__cell--xsmall {
    min-width: 80px; }
    .responsive-table__cell--xsmall .responsive-table__value--truncate {
      max-width: 100px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap; }
  .responsive-table__cell--small {
    min-width: 100px; }
    .responsive-table__cell--small .responsive-table__value--truncate {
      max-width: 160px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap; }
  .responsive-table__cell--medium {
    min-width: 160px; }
    .responsive-table__cell--medium .responsive-table__value--truncate {
      max-width: 200px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap; }

.factbox__content--expandable {
  position: relative;
  padding-bottom: 35px;
  transition: max-height 300ms cubic-bezier(0, 0, 0.1, 1);
  will-change: max-height; }

.factbox__content--collapsed {
  overflow: hidden;
  max-height: 180px;
  padding-bottom: 0; }
  .factbox__content--collapsed:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 120px;
    background-image: linear-gradient(rgba(224, 18, 32, 0), #e01220); }

.factbox__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 0;
  left: calc(50% - 16px);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #fff;
  outline: 0;
  will-change: transform;
  transition: transform 300ms cubic-bezier(0, 0, 0.1, 1); }
  .factbox__toggle--expanded {
    transform: rotate(-180deg); }

.group-navigation {
  counter-reset: gn-counter;
  margin: 0;
  display: flex;
  justify-content: flex-end; }
  .group-navigation__item {
    padding: 0;
    margin: 0; }
    .group-navigation__item:before {
      display: none; }
  .group-navigation__link {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    width: 52px;
    height: 52px;
    border-radius: 5px;
    border: 3px solid #fff;
    background-color: #fff; }
    .group-navigation__link:before {
      font-family: "Noe Text", Helvetica, sans-serif;
      font-weight: bold;
      font-size: 19px;
      line-height: 28px;
      color: #E01220;
      content: counter(gn-counter);
      counter-increment: gn-counter; }
      @media screen and (min-width: 440px) {
        .group-navigation__link:before {
          font-size: 23px;
          line-height: 28px; } }
    .group-navigation__link:hover .group-navigation__title, .group-navigation__link:focus .group-navigation__title {
      display: block;
      animation: gn-tooltip 200ms cubic-bezier(0, 0, 0.1, 1) both; }
  .group-navigation__title {
    display: none;
    position: absolute;
    right: 0;
    top: 64px;
    white-space: nowrap;
    padding: 6px 12px;
    border-radius: 5px;
    color: #fff;
    background-color: #002B49;
    transform-origin: right top; }
    .group-navigation__title:before {
      content: '';
      position: absolute;
      width: 12px;
      height: 12px;
      top: -6px;
      right: 20px;
      background-color: inherit;
      transform: rotate(45deg); }

@keyframes gn-tooltip {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.2); } }

.magazine-page-header {
  position: absolute;
  width: 100%;
  top: 0;
  z-index: 10;
  padding: 7px 0;
  color: #E01220; }
  @media (min-width: 720px) {
    .magazine-page-header {
      padding: 21px 0;
      height: 49px; } }
  .magazine-page-header__nav {
    position: relative;
    top: 2px;
    float: right; }
  .magazine-page-header__content {
    padding: 0 12px; }
  .magazine-page-header--light {
    color: #fff; }
    .magazine-page-header--light .branding__text,
    .magazine-page-header--light .branding__mark,
    .magazine-page-header--light .branding__name {
      fill: #fff;
      color: #fff; }

/* Vertical spacing

Example: {type: isolated}
    <div class='vertical-spacing'>
        Look I got extra margin at bottom and top
    </div>
    <div>I don't have that extra spacing</div>

Styleguide components.vertical_spacing
*/
.vertical-spacing {
  margin-top: 28px;
  margin-bottom: 28px; }