@charset "UTF-8";
@-webkit-keyframes bounce-right {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  15% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px); }
  25% {
    -webkit-transform: translateX(6px);
    transform: translateX(6px); }
  35% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px); }
  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); } }
@-moz-keyframes bounce-right {
  0% {
    -moz-transform: translateX(0);
    transform: translateX(0); }
  15% {
    -moz-transform: translateX(10px);
    transform: translateX(10px); }
  25% {
    -moz-transform: translateX(6px);
    transform: translateX(6px); }
  35% {
    -moz-transform: translateX(10px);
    transform: translateX(10px); }
  50% {
    -moz-transform: translateX(0);
    transform: translateX(0); }
  100% {
    -moz-transform: translateX(0);
    transform: translateX(0); } }
@-o-keyframes bounce-right {
  0% {
    -o-transform: translateX(0);
    transform: translateX(0); }
  15% {
    -o-transform: translateX(10px);
    transform: translateX(10px); }
  25% {
    -o-transform: translateX(6px);
    transform: translateX(6px); }
  35% {
    -o-transform: translateX(10px);
    transform: translateX(10px); }
  50% {
    -o-transform: translateX(0);
    transform: translateX(0); }
  100% {
    -o-transform: translateX(0);
    transform: translateX(0); } }
@keyframes bounce-right {
  0% {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0); }
  15% {
    -webkit-transform: translateX(10px);
    -moz-transform: translateX(10px);
    -o-transform: translateX(10px);
    transform: translateX(10px); }
  25% {
    -webkit-transform: translateX(6px);
    -moz-transform: translateX(6px);
    -o-transform: translateX(6px);
    transform: translateX(6px); }
  35% {
    -webkit-transform: translateX(10px);
    -moz-transform: translateX(10px);
    -o-transform: translateX(10px);
    transform: translateX(10px); }
  50% {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0); }
  100% {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0); } }
@-webkit-keyframes fadeout-fadein {
  0% {
    opacity: 0; }
  75% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@-moz-keyframes fadeout-fadein {
  0% {
    opacity: 0; }
  75% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@-o-keyframes fadeout-fadein {
  0% {
    opacity: 0; }
  75% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes fadeout-fadein {
  0% {
    opacity: 0; }
  75% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@-webkit-keyframes pan-zoom {
  0% {
    -webkit-transform: translateX(0) scale(1);
    transform: translateX(0) scale(1); }
  50% {
    -webkit-transform: translateX(4%) scale(1.1);
    transform: translateX(4%) scale(1.1); }
  100% {
    -webkit-transform: translateX(0) scale(1);
    transform: translateX(0) scale(1); } }
@-moz-keyframes pan-zoom {
  0% {
    -moz-transform: translateX(0) scale(1);
    transform: translateX(0) scale(1); }
  50% {
    -moz-transform: translateX(4%) scale(1.1);
    transform: translateX(4%) scale(1.1); }
  100% {
    -moz-transform: translateX(0) scale(1);
    transform: translateX(0) scale(1); } }
@-o-keyframes pan-zoom {
  0% {
    -o-transform: translateX(0) scale(1);
    transform: translateX(0) scale(1); }
  50% {
    -o-transform: translateX(4%) scale(1.1);
    transform: translateX(4%) scale(1.1); }
  100% {
    -o-transform: translateX(0) scale(1);
    transform: translateX(0) scale(1); } }
@keyframes pan-zoom {
  0% {
    -webkit-transform: translateX(0) scale(1);
    -moz-transform: translateX(0) scale(1);
    -o-transform: translateX(0) scale(1);
    transform: translateX(0) scale(1); }
  50% {
    -webkit-transform: translateX(4%) scale(1.1);
    -moz-transform: translateX(4%) scale(1.1);
    -o-transform: translateX(4%) scale(1.1);
    transform: translateX(4%) scale(1.1); }
  100% {
    -webkit-transform: translateX(0) scale(1);
    -moz-transform: translateX(0) scale(1);
    -o-transform: translateX(0) scale(1);
    transform: translateX(0) scale(1); } }
@-webkit-keyframes tile-active {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%); }
  25% {
    opacity: 0; }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); } }
@-moz-keyframes tile-active {
  0% {
    opacity: 0;
    -moz-transform: translateX(-100%);
    transform: translateX(-100%); }
  25% {
    opacity: 0; }
  100% {
    opacity: 1;
    -moz-transform: translateX(0);
    transform: translateX(0); } }
@-o-keyframes tile-active {
  0% {
    opacity: 0;
    -o-transform: translateX(-100%);
    transform: translateX(-100%); }
  25% {
    opacity: 0; }
  100% {
    opacity: 1;
    -o-transform: translateX(0);
    transform: translateX(0); } }
@keyframes tile-active {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%); }
  25% {
    opacity: 0; }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0); } }
@-webkit-keyframes tile-deactive {
  0% {
    opacity: 0; }
  25% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@-moz-keyframes tile-deactive {
  0% {
    opacity: 0; }
  25% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@-o-keyframes tile-deactive {
  0% {
    opacity: 0; }
  25% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes tile-deactive {
  0% {
    opacity: 0; }
  25% {
    opacity: 0; }
  100% {
    opacity: 1; } }
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */ }

/**
 * Remove default margin.
 */
body {
  margin: 0;
  font-family: "Open Sans", Arial, sans-serif;
  line-height: 1.5;
  font-size: 0.875em;
  color: #4d4f53; }
  @media (min-width: 36em) {
    body {
      font-size: 1em; } }

/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block; }

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */ }

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0; }

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none; }

/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background-color: transparent; }

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover {
  outline: 0; }

/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted; }

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
  font-weight: bold; }

/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
  font-style: italic; }

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0; }

/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000; }

/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%; }

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img {
  border: 0; }

/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
  overflow: hidden; }

/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure {
  margin: 1em 40px; }

/**
 * Address differences between Firefox and other browsers.
 */
hr {
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  height: 0; }

/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto; }

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em; }

/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  /* 1 */
  font: inherit;
  /* 2 */
  margin: 0;
  /* 3 */ }

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
  overflow: visible; }

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none; }

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */ }

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default; }

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0; }

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal; }

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type="checkbox"],
input[type="radio"] {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto; }

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *    (include `-moz` to future-proof).
 */
/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em; }

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  overflow: auto; }

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold; }

/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0; }

td,
th {
  padding: 0; }

/*doc
---
title: Heading
name: heading
category: Element 
  - Typography
---

On a page headings is used to create hierachy. Headings should nest from top to bottom. For example, a `<h2>` element can nest inside a `<h1>`, but not the other way arround. 

To create a visual hiarachy classes of `.h1`, `.h2`, `.h3` and so on can be used.

```html_example
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
``` 
*/
h1, .h1,
h2, .h2, .section__title,
h3, .h3, blockquote p, .ingres, .tile__title, .teaser__title, .teaser-img .teaser__title, .teaser-img--overlay .teaser__title,
h4, .h4, blockquote cite, .teaser-quote .citation,
h5, .h5, label,
h6, .h6 {
  margin: 1em 0 .1em;
  color: #333333; }

h1, .h1 {
  font-size: 1.77689em;
  line-height: 1.15; }
  @media (min-width: 36em) {
    h1, .h1 {
      font-size: 3.15733em;
      line-height: 1.1; } }

h2, .h2, .section__title {
  font-size: 1.333em;
  line-height: 1.3; }
  @media (min-width: 36em) {
    h2, .h2, .section__title {
      font-size: 1.77689em;
      line-height: 1.4; } }

h3, .h3, blockquote p, .ingres, .tile__title, .teaser__title, .teaser-img .teaser__title, .teaser-img--overlay .teaser__title {
  font-size: 1.1997em;
  line-height: 1.4; }
  @media (min-width: 36em) {
    h3, .h3, blockquote p, .ingres, .tile__title, .teaser__title, .teaser-img .teaser__title, .teaser-img--overlay .teaser__title {
      font-size: 1.333em;
      line-height: 1.3; } }

h4, .h4, blockquote cite, .teaser-quote .citation {
  font-size: 1em;
  line-height: 1.2; }

h5, .h5, label {
  font-size: 0.75em;
  line-height: 1.3; }

h6, .h6 {
  font-size: 0.563em;
  line-height: 1.3; }

/*doc
---
title: Paragraph
name: paragraph
category: Element
  - Typography
---

```html_example
<p>Norge ligger langt fremme  på verdensbasis, og Regjeringen har som mål at vi skal være blant de fremste landene i verden innenfor ny teknologi, kompetanse og kunnskap.</p>
```
*/
p {
  margin: 0 0 .75em; }

/*doc
---
title: Link
name: link
category: Element
  - Typography
---

```html_example
<a href="">Simple link</a>
```
*/
a {
  text-decoration: none;
  color: #4A9AB0;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out; }
  a:hover, a:focus {
    text-decoration: underline;
    color: #66b8cf; }

/*doc
---
title: Quote
name: quot
category: Element
  - Typography
---

Basic blockquote.

```html_example
<blockquote>
  <p>Det er viktig for meg at arbeidet er samfunnsnyttig, og at jeg får være ute og se direkte resultat av det vi jobber med.</p>
</blockquote>
```
*/
/*doc
---
title: Quote citation
name: quote-citation
category: Component - Typography

---

Description.

```html_example
<blockquote>
  <p>Det er viktig for meg at arbeidet er samfunnsnyttig, og at jeg får være ute og se direkte resultat av det vi jobber med.</p>
  <cite class="citation">Annette Lund Lillegaard <span class="position">UX Leder</span></cite>
</blockquote>
```
*/
blockquote {
  margin: 1.5em 0 1.5em 2em; }
  blockquote p {
    font-family: "Droid Serif", Georgia, serif;
    line-height: 1.5;
    font-weight: 400;
    font-style: italic;
    color: #4d4f53; }
  blockquote cite {
    font-style: normal;
    text-align: right;
    display: block;
    margin-top: 0; }
  blockquote .position {
    font-weight: 700;
    font-size: .7em;
    display: block; }

.ingres {
  font-weight: 400;
  line-height: 1.5; }

/*doc
---
title: Image
name: image
category: Element
  - Media
---

Images expands 100% of it's container if the container is smaller then the 
image original size.

```html_example
<div style="width: 50%">
  <img src="http://placehold.it/500x300" alt="">
</div>
```
*/
img {
  max-width: 100%; }

/*doc
---
title: Frame
name: frame
category: Element
  - Media
---

Apply frame on a image with `frame`. Can also be used on other media like video 
containers.

```html_example
<img class="frame" src="http://placehold.it/250x200" alt="">
```
*/
.frame, .teaser__img {
  border: 2px solid #e1e9eb; }
  .frame img, .teaser__img img {
    width: 100%; }

figure {
  margin: 0 0 .75em; }

figcaption {
  font-size: 0.875em;
  line-height: 1.3; }
  .frame figcaption, .teaser__img figcaption {
    margin: 7.5px 15px 9.9999px; }

/*doc
---
title: Video
name: video
category: Element
  - Media
---

FitVids is configured to responsivly scale embedded videos to it's continer 
width if the container have the class `video`.

By including `?color=white&theme=light&rel=0&amp;showinfo=0` after the embedded 
youtube id, it displays without title, does not show related videos after it's 
played and uses a light control panel. More settings can be found at 
[YouTube dev pages](https://developers.google.com/youtube/youtube_player_demo)

```html_example
<div class="video">
  <iframe class="" width="560" height="315" src="//www.youtube.com/embed/t3GusBsDZM4?color=white&theme=light&rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
```
*/
.cinema .fluid-width-video-wrapper {
  padding-top: 45.78454% !important; }

/*doc
---
title: Container
name: container
category: Container
  - Layout
---

Container to set with limit on a grid or gallery. Most commonly it's between a `section-row` and a `grid`.

Class|Description
:--|:--
`container`|Set a max-width to 60em (* 16px = 960px)
`container--narrow`|Set a max-width to 40em (* 16px = 640px). Used on article template.

```html_example
<div>
  d
</div>
```
*/
.container, .container--narrow {
  padding-left: 2.63158%;
  padding-right: 2.63158%; }
  @media (min-width: 19em) {
    .container, .container--narrow {
      max-width: 60em;
      margin-left: auto;
      margin-right: auto; }
      .container:after, .container--narrow:after {
        content: " ";
        display: block;
        clear: both; } }

@media (min-width: 19em) {
  .container--narrow {
    max-width: 40em;
    margin-left: auto;
    margin-right: auto; }
    .container--narrow:after {
      content: " ";
      display: block;
      clear: both; } }

/*doc
---
title: Float
name: float
category: Element
  - Helper class
---

Position element right or left. Can be used on media and other elements that a editor would like to position in a article. 

Class|Description
:--|:--
`.l-left`|Floats a element to the left with a gutter width on right side.
`.l-right`|Floats a element to the right with a gutter width on left side.

```html_example
<figure class="frame l-right">
  <img src="http://placehold.it/150x100" alt="">
  <figcaption>Forklaring til bilde. Vi har gode betingelser og gir våre medarbeidere mulighet til karriere og selvrealisering.Vi legger stor vekt på faglig utvikling i DIPS og bruker mye ressurser på å bygge opp og opprettholde vår kompetanse.</figcaption>
</figure>
```
*/
@media (min-width: 19em) {
  .l-left {
    width: 47.36842%;
    float: left;
    margin-right: 5.26316%; } }
@media (min-width: 36em) {
  .l-left {
    width: 47.82609%;
    float: left;
    margin-right: 4.34783%; } }
@media (min-width: 50em) {
  .l-left {
    width: 40%;
    float: left;
    margin-right: 2.85714%; } }

@media (min-width: 19em) {
  .l-right {
    margin-left: 5.26316%;
    width: 47.36842%;
    float: right;
    margin-right: 0; } }
@media (min-width: 36em) {
  .l-right {
    margin-left: 4.34783%;
    width: 47.82609%; } }
@media (min-width: 50em) {
  .l-right {
    margin-left: 2.85714%;
    width: 40%; } }

/*doc
---
title: Three
name: three
category: Container
  - Grid
---

Goes from one `grid__item` on small screens to three `grid__item`'s on larger screens.

```html_example
<div class="grid--three">
  <div class="grid__item">Grid column 1. Example text to show how the coluns breaks on smaller screens.</div>
  <div class="grid__item">Grid column 2. Example text to show how the coluns breaks on smaller screens.</div>
  <div class="grid__item">Grid column 3. Example text to show how the coluns breaks on smaller screens.</div>
</div>

```
*/
.grid--three .grid__item + .grid__item {
  margin-top: 5.26316%; }
@media (min-width: 36em) and (max-width: 50em) {
  .grid--three .grid__item {
    width: 65.21739%;
    float: left;
    margin-right: 4.34783%;
    margin-left: 17.3913%; }
    .grid--three .grid__item + .grid__item {
      margin-top: 4.34783%; } }
@media (min-width: 50em) {
  .grid--three .grid__item {
    width: 31.42857%;
    float: left;
    margin-right: 2.85714%;
    margin-top: 0 !important; }
    .grid--three .grid__item:nth-child(3) {
      float: right;
      margin-right: 0; } }

/*doc
---
title: Three no gutter
name: three-no-gutter
category: Container
  - Grid
---

Similar to three column grid, but without gutter and space on all sizes except 
really small displays.


```html_example
<div class="grid--three--nogutter">
  <div class="grid__item">Grid column 1. Example text to show how the coluns breaks on smaller screens.</div>
  <div class="grid__item">Grid column 2. Example text to show how the coluns breaks on smaller screens.</div>
  <div class="grid__item">Grid column 3. Example text to show how the coluns breaks on smaller screens.</div>
</div>
```
*/
.grid--split--nogutter .grid__item {
  margin-top: 5.26316%; }
  @media (min-width: 19em) {
    .grid--split--nogutter .grid__item {
      margin-top: 0; } }
  @media (min-width: 29em) {
    .grid--split--nogutter .grid__item {
      width: 50%;
      float: left; } }

.grid--four--nogutter .grid__item {
  width: 25%;
  float: left; }

/*doc
---
title: Two
name: two
category: Container
  - Grid
---

Two column grid that breaks down to one column on smaller sceens

```html_example
<div class="grid--two">
  <div class="grid__item">Grid column 1. Example text to show how the coluns breaks on smaller screens.</div>
  <div class="grid__item">Grid column 2. Example text to show how the coluns breaks on smaller screens.</div>
</div>
```
*/
.grid--two .grid__item {
  margin-top: 5.26316%; }
  @media (min-width: 36em) {
    .grid--two .grid__item {
      width: 47.82609%;
      float: left;
      margin-right: 4.34783%;
      margin-top: 0; }
      .grid--two .grid__item:nth-child(2n) {
        margin-right: 0; } }
  @media (min-width: 50em) {
    .grid--two .grid__item {
      width: 48.57143%;
      float: left;
      margin-right: 2.85714%; } }

.grid--four .grid__item {
  margin-top: 5.26316%; }
  @media (min-width: 19em) and (max-width: 50em) {
    .grid--four .grid__item {
      width: 47.36842%;
      float: left;
      margin-right: 5.26316%; }
      .grid--four .grid__item:nth-child(2n) {
        margin-right: 0; }
      .grid--four .grid__item:nth-child(-n+2) {
        margin-top: 0; } }
  @media (min-width: 36em) and (max-width: 50em) {
    .grid--four .grid__item {
      width: 47.82609%;
      float: left;
      margin-right: 4.34783%;
      margin-top: 4.34783%; } }
  @media (min-width: 50em) {
    .grid--four .grid__item {
      width: 22.85714%;
      float: left;
      margin-right: 2.85714%;
      margin-top: 0; }
      .grid--four .grid__item:nth-child(4) {
        margin-right: 0; } }

/*doc
---
title: Two plus one
name: two-one
category: Container
  - Grid
---

Description.

```html_example
<div class="grid--two-one">
  <main class="grid__item">Grid column 1. Example text to show how the coluns breaks on smaller screens.</main>
  <aside class="grid__item">Grid column 2. Example text to show how the coluns breaks on smaller screens.</aside>
</div>
```
*/
.grid--two-one .grid__item + .grid__item {
  margin-top: 5.26316%; }
@media (min-width: 36em) {
  .grid--two-one .grid__item {
    margin-top: 0 !important; } }
@media (min-width: 36em) {
  .grid--two-one .grid__item:nth-child(2n + 1) {
    width: 65.21739%;
    float: left;
    margin-right: 4.34783%; } }
@media (min-width: 50em) {
  .grid--two-one .grid__item:nth-child(2n + 1) {
    width: 57.14286%;
    float: left;
    margin-right: 2.85714%; } }
@media (min-width: 36em) {
  .grid--two-one .grid__item:nth-child(2n) {
    width: 30.43478%;
    float: right;
    margin-right: 0; } }
@media (min-width: 50em) {
  .grid--two-one .grid__item:nth-child(2n) {
    width: 40%;
    float: right;
    margin-right: 0; } }

/*doc
---
title: One plus two
name: one-two
category: Container
  - Grid
---

Description.

```html_example
<div class="grid--one-two">
  <main class="grid__item">Grid column 1. Example text to show how the coluns breaks on smaller screens.</main>
  <aside class="grid__item">Grid column 2. Example text to show how the coluns breaks on smaller screens.</aside>
</div>
```
*/
.grid--one-two .grid__item + .grid__item {
  margin-top: 5.26316%; }
@media (min-width: 36em) {
  .grid--one-two .grid__item {
    margin-top: 0 !important; } }
@media (min-width: 36em) {
  .grid--one-two .grid__item:nth-child(2n + 1) {
    width: 30.43478%;
    float: left;
    margin-right: 4.34783%; } }
@media (min-width: 50em) {
  .grid--one-two .grid__item:nth-child(2n + 1) {
    width: 40%;
    float: left;
    margin-right: 2.85714%; } }
@media (min-width: 36em) {
  .grid--one-two .grid__item:nth-child(2n) {
    width: 65.21739%;
    float: right;
    margin-right: 0; } }
@media (min-width: 50em) {
  .grid--one-two .grid__item:nth-child(2n) {
    width: 57.14286%;
    float: right;
    margin-right: 0; } }

/*doc
---
title: Tile grid
name: tile-grid
category: Container
  - Grid
---

Special grid for three tiles on one row.

```html_example
<div class="container grid-tile">
  <div class="section__main tile-wrapper">
    <article class="tile green grid__item">
      Tile one
    </article>
    <article class="tile green grid__item">
      Tile two
    </article>
    <article class="tile green grid__item">
      Tile three
    </article>
  </div>
</div>
```
*/
.grid-tile {
  overflow: hidden; }
  .grid-tile .grid__item + .grid__item {
    margin-top: 5.26316%; }
  @media (min-width: 36em) {
    .grid-tile .grid__item {
      width: 65.21739%;
      margin-left: 17.3913%;
      float: left; }
      .grid-tile .grid__item + .grid__item {
        margin-top: 4.34783%; } }
  @media (min-width: 50em) {
    .grid-tile .grid__item {
      width: 31.42857%;
      margin-left: 0; }
      .grid-tile .grid__item + .grid__item {
        margin-top: 0; }
      .grid-tile .grid__item:nth-child(n+2) {
        margin-left: 2.85714%; }
    .grid-tile .is-active-trail .grid__item {
      margin-left: 68.57143%; }
      .grid-tile .is-active-trail .grid__item + .grid__item {
        margin-top: 2.85714%; } }

.gallery--two .gallery__item {
  margin-bottom: 2.63158%; }
  @media (min-width: 36em) {
    .gallery--two .gallery__item {
      width: 43.75%;
      float: left;
      margin-bottom: 2.17391%; }
      .gallery--two .gallery__item:nth-child(2n + 1) {
        margin-left: 0;
        margin-right: -100%;
        clear: both;
        margin-left: 0; }
      .gallery--two .gallery__item:nth-child(2n + 2) {
        margin-left: 56.25%;
        margin-right: -100%;
        clear: none; } }
  @media (min-width: 50em) {
    .gallery--two .gallery__item {
      margin-bottom: 2.85714%; } }

/*doc
---
title: Gallery three 
name: gallery-three
category: Container
  - Gallery
---

Gallery that goes from one column to three columns based on browser window width. 

Class | Description
:-- | :--
`gallery--three` | Used on parent element
`gallery__item` | Used on each individual child element of `gallery--three`

```html_example
<div class="gallery--three">
  <div class="gallery__item"><img src="http://placehold.it/600x300" alt=""></div>
  <div class="gallery__item"><img src="http://placehold.it/600x300" alt=""></div>
  <div class="gallery__item"><img src="http://placehold.it/600x300" alt=""></div>
  <div class="gallery__item"><img src="http://placehold.it/600x300" alt=""></div>
  <div class="gallery__item"><img src="http://placehold.it/600x300" alt=""></div>
  <div class="gallery__item"><img src="http://placehold.it/600x300" alt=""></div>
</div>
```
*/
.gallery--three .gallery__item {
  margin-bottom: 5.26316%; }
  @media (min-width: 36em) {
    .gallery--three .gallery__item {
      width: 47.82609%;
      float: left;
      margin-bottom: 4.34783%; }
      .gallery--three .gallery__item:nth-child(2n + 1) {
        margin-left: 0;
        margin-right: -100%;
        clear: both;
        margin-left: 0; }
      .gallery--three .gallery__item:nth-child(2n + 2) {
        margin-left: 52.17391%;
        margin-right: -100%;
        clear: none; } }
  @media (min-width: 50em) {
    .gallery--three .gallery__item {
      width: 31.42857%;
      float: left;
      margin-bottom: 2.85714%; }
      .gallery--three .gallery__item:nth-child(3n + 1) {
        margin-left: 0;
        margin-right: -100%;
        clear: both;
        margin-left: 0; }
      .gallery--three .gallery__item:nth-child(3n + 2) {
        margin-left: 34.28571%;
        margin-right: -100%;
        clear: none; }
      .gallery--three .gallery__item:nth-child(3n + 3) {
        margin-left: 68.57143%;
        margin-right: -100%;
        clear: none; } }

/*doc
---
title: Gallery four 
name: gallery-four
category: Container
  - Gallery
---

Gallery that goes from one column to four columns based on browser window width. 

Class | Description
:-- | :--
`gallery--four` | Used on parent element
`gallery__item` | Used on each individual child element of `gallery--three`

```html_example
<div class="gallery--four">
  <div class="gallery__item"><img src="http://placehold.it/600x300" alt=""></div>
  <div class="gallery__item"><img src="http://placehold.it/600x300" alt=""></div>
  <div class="gallery__item"><img src="http://placehold.it/600x300" alt=""></div>
  <div class="gallery__item"><img src="http://placehold.it/600x300" alt=""></div>
  <div class="gallery__item"><img src="http://placehold.it/600x300" alt=""></div>
  <div class="gallery__item"><img src="http://placehold.it/600x300" alt=""></div>
</div>
```
*/
.gallery--four .gallery__item {
  margin-bottom: 5.26316%; }
  @media (min-width: 36em) {
    .gallery--four .gallery__item {
      width: 30.43478%;
      float: left;
      margin-bottom: 4.34783%; }
      .gallery--four .gallery__item:nth-child(3n + 1) {
        margin-left: 0;
        margin-right: -100%;
        clear: both;
        margin-left: 0; }
      .gallery--four .gallery__item:nth-child(3n + 2) {
        margin-left: 34.78261%;
        margin-right: -100%;
        clear: none; }
      .gallery--four .gallery__item:nth-child(3n + 3) {
        margin-left: 69.56522%;
        margin-right: -100%;
        clear: none; } }
  @media (min-width: 50em) {
    .gallery--four .gallery__item {
      width: 22.85714%;
      float: left;
      margin-bottom: 2.85714%; }
      .gallery--four .gallery__item:nth-child(4n + 1) {
        margin-left: 0;
        margin-right: -100%;
        clear: both;
        margin-left: 0; }
      .gallery--four .gallery__item:nth-child(4n + 2) {
        margin-left: 25.71429%;
        margin-right: -100%;
        clear: none; }
      .gallery--four .gallery__item:nth-child(4n + 3) {
        margin-left: 51.42857%;
        margin-right: -100%;
        clear: none; }
      .gallery--four .gallery__item:nth-child(4n + 4) {
        margin-left: 77.14286%;
        margin-right: -100%;
        clear: none; } }

/*doc
---
title: Hide elements
name: hide-elements
category: Element
  - Helper class
---

Different ways to hide elements.

```html_example
<a href="" class="visuallyhidden">Example hidden link</a>
<a href="" class="visuallyhidden focusable">Example hidden link</a>
<a href="" class="invisible">Example hidden link</a>
```

Class name | Comment
:---|:---
`visuallyhidden` | Visually hide elements, but have them available for screen readers.
`focusable` | By also adding this, a link would be shown on focus.
`invisible` | Hide visually and from screenreaders, but maintain layout.
*/
.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }
  .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto; }

.invisible {
  visibility: hidden; }

/*doc
---
title: Clearfix
name: clearfix
category: Element
  - Helper class
---

`clearfix` can be applied on a container that breaks because of floating elements inside it. 

```html_example
<div class="clearfix" style="border: 1px solid black;">
  <img src="http://placehold.it/200x300" alt="" style="float: right;">
</div>
```
*/
.grid--three:before, .clearfix:before, .list--chevron:before,
.list--check:before, .nav ul:before, .section__main:before, .tile__link:before, .teaser-quote:before, .grid--three:after, .clearfix:after, .list--chevron:after,
.list--check:after, .nav ul:after, .section__main:after, .tile__link:after, .teaser-quote:after {
  content: " ";
  display: table; }
.grid--three:after, .clearfix:after, .list--chevron:after,
.list--check:after, .nav ul:after, .section__main:after, .tile__link:after, .teaser-quote:after {
  clear: both; }

/*doc
---
title: Alignment
name: alignment
category: Element
  - Helper class
---

Description.

```html_example
<p>Example</p>
```
*/
.left {
  text-align: left; }

.center {
  text-align: center; }

.right {
  text-align: right; }

/*doc
---
title: Box display
name: block-display
category: Element
  - Helper class
---

Helper class to change a default inline element to a block element, or the other way arround. Illustrated in the example where a label changes from inline to block when adding the class `block`.

```html_example
<label for="example-inline">Inline label <small>(default)</small></label>
<input type="text" id="example-inline">

<label for="example-block" class="block">Block label</label>
<input type="text" id="example-block">
```

Class name | Comment 
:--- | :---
`block` | Change display to block
`inline` | Change display to inline

*/
.block {
  display: block !important; }

.inline {
  display: inline-block !important; }

/*doc
---
title: Space
name: space
category: Element
  - Helper class
---

Add space to a element. 30px are added on smaller screens and it expands to 60px on larger screens. A background is added in the example to better illustrate the space. 

Class | Description
:--- | :---
`space-top` | Add space on top of a element
`space-top-half` | Add space on top, but half of `space-top`
`space-bottom` | Add space on bottom of a element
`space-top-bottom` | Add space on top and bottom of a element

```html_example
<div class="container space-top bg-light">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat.</p>
</div>  
```
*/
.space-top {
  padding-top: 30px; }
  @media (min-width: 50em) {
    .space-top {
      padding-top: 60px; } }
.space-top-half {
  padding-top: 15px; }
  @media (min-width: 50em) {
    .space-top-half {
      padding-top: 30px; } }

.space-bottom {
  padding-bottom: 30px; }
  @media (min-width: 50em) {
    .space-bottom {
      padding-bottom: 60px; } }

.space-top-bottom {
  padding-top: 30px;
  padding-bottom: 30px; }
  @media (min-width: 50em) {
    .space-top-bottom {
      padding-top: 60px;
      padding-bottom: 60px; } }

/*doc
---
title: No-space
name: no-space
category: Element
  - Helper class
---

Remove space on a element.

Class | Description
:-- | :--
`nospace` | Remove space arround all edges of a element
`nospace-top` | Remove space on top of a element
`nospace-bottom` | Remove space on bottom of a element

*/
.nospace {
  padding: 0 !important; }

.nospace-top {
  padding-top: 0 !important; }

.nospace-bottom {
  padding-bottom: 0 !important; }

.icon, .list--chevron li:before, .list--check li:before, .page-search-above .page-search__exit, .breadcrumb li + li, .breadcrumb li.first a, a.teaser__link:before,
a .teaser__link:before, .teaser-quote .teaser__title:before, .teaser-quote .citation:before {
  font-size: 16px; }

.icon:before, .list--chevron li:before, .list--check li:before, .page-search-above .page-search__exit:before, .breadcrumb li + li:before, .breadcrumb li.first a:before, a.teaser__link:before,
a .teaser__link:before, .teaser-quote .teaser__title:before, .teaser-quote .citation:before {
  content: ' ';
  vertical-align: middle;
  display: inline-block;
  background-image: url("../img/sprite/export/sprite.svg");
  background-repeat: no-repeat;
  -webkit-background-size: 9.5em 95.625em;
  background-size: 9.5em 95.625em; }

.no-svg .icon:before, .no-svg .list--chevron li:before, .list--chevron .no-svg li:before, .no-svg .list--check li:before, .list--check .no-svg li:before, .no-svg .page-search-above .page-search__exit:before, .page-search-above .no-svg .page-search__exit:before, .no-svg .breadcrumb li + li:before, .breadcrumb .no-svg li + li:before, .no-svg .breadcrumb li.first a:before, .breadcrumb li.first .no-svg a:before, .no-svg a.teaser__link:before,
.no-svg a .teaser__link:before,
a .no-svg .teaser__link:before, .no-svg .teaser-quote .teaser__title:before, .teaser-quote .no-svg .teaser__title:before, .no-svg .teaser-quote .citation:before, .teaser-quote .no-svg .citation:before {
  background-image: url("../img/sprite/export/sprite.png"); }

.icon.icon-arrow-chrumb:before, .list--chevron li.icon-arrow-chrumb:before, .breadcrumb .list--chevron li + li:before, .list--check li.icon-arrow-chrumb:before, .breadcrumb .list--check li + li:before, .page-search-above .icon-arrow-chrumb.page-search__exit:before, .page-search-above .breadcrumb li + li.page-search__exit:before, .breadcrumb .page-search-above li + li.page-search__exit:before, .breadcrumb li + li:before, .breadcrumb li.first a.icon-arrow-chrumb:before, a.icon-arrow-chrumb.teaser__link:before,
a .icon-arrow-chrumb.teaser__link:before,
.breadcrumb a li + li.teaser__link:before, .teaser-quote .icon-arrow-chrumb.teaser__title:before, .teaser-quote .breadcrumb li + li.teaser__title:before, .breadcrumb .teaser-quote li + li.teaser__title:before, .teaser-quote .icon-arrow-chrumb.citation:before, .teaser-quote .breadcrumb li + li.citation:before, .breadcrumb .teaser-quote li + li.citation:before {
  background-position: -0.3125em -0.3125em;
  width: 1.375em;
  height: 9.25em; }

.icon.icon-arrow-right:before, .list--chevron li.icon-arrow-right:before, .list--check li.icon-arrow-right:before, .page-search-above .icon-arrow-right.page-search__exit:before, .breadcrumb li + li.icon-arrow-right:before, .breadcrumb li.first a.icon-arrow-right:before, a.icon-arrow-right.teaser__link:before,
a .icon-arrow-right.teaser__link:before, .teaser-quote .icon-arrow-right.teaser__title:before, .teaser-quote .icon-arrow-right.citation:before {
  background-position: -0.3125em -10.1875em;
  width: 1.5em;
  height: 1.5em; }

.icon.icon-arrow-right-blue:before, .list--chevron li.icon-arrow-right-blue:before, .list--check li.icon-arrow-right-blue:before, .page-search-above .icon-arrow-right-blue.page-search__exit:before, .page-search-above a.page-search__exit.teaser__link:before,
.page-search-above a .page-search__exit.teaser__link:before,
a .page-search-above .page-search__exit.teaser__link:before, .breadcrumb li + li.icon-arrow-right-blue:before, .breadcrumb li.first a.icon-arrow-right-blue:before, .breadcrumb li.first a.teaser__link:before, .breadcrumb li.first .teaser-quote a.citation:before, .teaser-quote .breadcrumb li.first a.citation:before, a.teaser__link:before,
a .teaser__link:before, .teaser-quote .icon-arrow-right-blue.teaser__title:before, .teaser-quote a.teaser__title.teaser__link:before,
.teaser-quote a .teaser__title.teaser__link:before,
a .teaser-quote .teaser__title.teaser__link:before, .teaser-quote .citation:before {
  background-position: -0.3125em -12.3125em;
  width: 1.5em;
  height: 1.5em; }

.icon.icon-arrow-right-white:before, .list--chevron li.icon-arrow-right-white:before, .list--check li.icon-arrow-right-white:before, .page-search-above .icon-arrow-right-white.page-search__exit:before, .breadcrumb li + li.icon-arrow-right-white:before, .breadcrumb li.first a.icon-arrow-right-white:before, a.icon-arrow-right-white.teaser__link:before,
a .icon-arrow-right-white.teaser__link:before, .teaser-quote .icon-arrow-right-white.teaser__title:before, .teaser-quote .icon-arrow-right-white.citation:before {
  background-position: -0.3125em -14.4375em;
  width: 1.5em;
  height: 1.5em; }

.icon.icon-arrow-small-blue:before, .list--chevron li.icon-arrow-small-blue:before, .list--check li.icon-arrow-small-blue:before, .page-search-above .icon-arrow-small-blue.page-search__exit:before, .breadcrumb li + li.icon-arrow-small-blue:before, .breadcrumb li.first a.icon-arrow-small-blue:before, a.icon-arrow-small-blue.teaser__link:before,
a .icon-arrow-small-blue.teaser__link:before, .teaser-quote .icon-arrow-small-blue.teaser__title:before, .teaser-quote .icon-arrow-small-blue.citation:before {
  background-position: -0.3125em -16.5625em;
  width: 1em;
  height: 0.75em; }

.icon.icon-check:before, .list--chevron li.icon-check:before, .list--check li.icon-check:before, .page-search-above .icon-check.page-search__exit:before, .breadcrumb li + li.icon-check:before, .breadcrumb li.first a.icon-check:before, a.icon-check.teaser__link:before,
a .icon-check.teaser__link:before, .teaser-quote .icon-check.teaser__title:before, .teaser-quote .icon-check.citation:before {
  background-position: -0.3125em -17.9375em;
  width: 1.5em;
  height: 1.5em; }

.icon.icon-check-blue:before, .list--chevron li.icon-check-blue:before, .list--check li:before, .page-search-above .icon-check-blue.page-search__exit:before, .page-search-above .list--check li.page-search__exit:before, .list--check .page-search-above li.page-search__exit:before, .breadcrumb li + li.icon-check-blue:before, .breadcrumb li.first a.icon-check-blue:before, a.icon-check-blue.teaser__link:before,
a .icon-check-blue.teaser__link:before, .teaser-quote .icon-check-blue.teaser__title:before, .teaser-quote .list--check li.teaser__title:before, .list--check .teaser-quote li.teaser__title:before, .teaser-quote .icon-check-blue.citation:before, .teaser-quote .list--check li.citation:before, .list--check .teaser-quote li.citation:before {
  background-position: -0.3125em -20.0625em;
  width: 1.5em;
  height: 1.5em; }

.icon.icon-check-white:before, .list--chevron li.icon-check-white:before, .list--check li.icon-check-white:before, .page-search-above .icon-check-white.page-search__exit:before, .breadcrumb li + li.icon-check-white:before, .breadcrumb li.first a.icon-check-white:before, a.icon-check-white.teaser__link:before,
a .icon-check-white.teaser__link:before, .teaser-quote .icon-check-white.teaser__title:before, .teaser-quote .icon-check-white.citation:before {
  background-position: -0.3125em -22.1875em;
  width: 1.5em;
  height: 1.5em; }

.icon.icon-chevron-right:before, .list--chevron li.icon-chevron-right:before, .list--check li.icon-chevron-right:before, .page-search-above .icon-chevron-right.page-search__exit:before, .breadcrumb li + li.icon-chevron-right:before, .breadcrumb li.first a.icon-chevron-right:before, a.icon-chevron-right.teaser__link:before,
a .icon-chevron-right.teaser__link:before, .teaser-quote .icon-chevron-right.teaser__title:before, .teaser-quote .icon-chevron-right.citation:before {
  background-position: -0.3125em -24.3125em;
  width: 1.5em;
  height: 1.5em; }

.icon.icon-chevron-right-orange:before, .list--chevron li:before, .list--check li.icon-chevron-right-orange:before, .page-search-above .icon-chevron-right-orange.page-search__exit:before, .page-search-above .list--chevron li.page-search__exit:before, .list--chevron .page-search-above li.page-search__exit:before, .breadcrumb li + li.icon-chevron-right-orange:before, .breadcrumb li.first a.icon-chevron-right-orange:before, a.icon-chevron-right-orange.teaser__link:before,
a .icon-chevron-right-orange.teaser__link:before, .teaser-quote .icon-chevron-right-orange.teaser__title:before, .teaser-quote .list--chevron li.teaser__title:before, .list--chevron .teaser-quote li.teaser__title:before, .teaser-quote .icon-chevron-right-orange.citation:before, .teaser-quote .list--chevron li.citation:before, .list--chevron .teaser-quote li.citation:before {
  background-position: -0.3125em -26.4375em;
  width: 1.5em;
  height: 1.5em; }

.icon.icon-chevron-right-white:before, .list--chevron li.icon-chevron-right-white:before, .list--check li.icon-chevron-right-white:before, .page-search-above .icon-chevron-right-white.page-search__exit:before, .breadcrumb li + li.icon-chevron-right-white:before, .breadcrumb li.first a.icon-chevron-right-white:before, a.icon-chevron-right-white.teaser__link:before,
a .icon-chevron-right-white.teaser__link:before, .teaser-quote .icon-chevron-right-white.teaser__title:before, .teaser-quote .icon-chevron-right-white.citation:before {
  background-position: -0.3125em -28.5625em;
  width: 1.5em;
  height: 1.5em; }

.icon.icon-cross:before, .list--chevron li.icon-cross:before, .list--check li.icon-cross:before, .page-search-above .icon-cross.page-search__exit:before, .breadcrumb li + li.icon-cross:before, .breadcrumb li.first a.icon-cross:before, a.icon-cross.teaser__link:before,
a .icon-cross.teaser__link:before, .teaser-quote .icon-cross.teaser__title:before, .teaser-quote .icon-cross.citation:before {
  background-position: -0.3125em -30.6875em;
  width: 1.5em;
  height: 1.5em; }

.icon.icon-cross-white:before, .list--chevron li.icon-cross-white:before, .list--check li.icon-cross-white:before, .page-search-above .page-search__exit:before, .breadcrumb li + li.icon-cross-white:before, .breadcrumb li.first a.icon-cross-white:before, .breadcrumb li.first .page-search-above a.page-search__exit:before, .page-search-above .breadcrumb li.first a.page-search__exit:before, a.icon-cross-white.teaser__link:before,
a .icon-cross-white.teaser__link:before, .teaser-quote .icon-cross-white.teaser__title:before, .teaser-quote .icon-cross-white.citation:before {
  background-position: -0.3125em -32.8125em;
  width: 1.5em;
  height: 1.5em; }

.icon.icon-envelope:before, .list--chevron li.icon-envelope:before, .list--check li.icon-envelope:before, .page-search-above .icon-envelope.page-search__exit:before, .breadcrumb li + li.icon-envelope:before, .breadcrumb li.first a.icon-envelope:before, a.icon-envelope.teaser__link:before,
a .icon-envelope.teaser__link:before, .teaser-quote .icon-envelope.teaser__title:before, .teaser-quote .icon-envelope.citation:before {
  background-position: -0.3125em -34.9375em;
  width: 1.5em;
  height: 1.5em; }

.icon.icon-envelope-white:before, .list--chevron li.icon-envelope-white:before, .list--check li.icon-envelope-white:before, .page-search-above .icon-envelope-white.page-search__exit:before, .breadcrumb li + li.icon-envelope-white:before, .breadcrumb li.first a.icon-envelope-white:before, a.icon-envelope-white.teaser__link:before,
a .icon-envelope-white.teaser__link:before, .teaser-quote .icon-envelope-white.teaser__title:before, .teaser-quote .icon-envelope-white.citation:before {
  background-position: -0.3125em -37.0625em;
  width: 1.5em;
  height: 1.5em; }

.icon.icon-group-plus:before, .list--chevron li.icon-group-plus:before, .list--check li.icon-group-plus:before, .page-search-above .icon-group-plus.page-search__exit:before, .breadcrumb li + li.icon-group-plus:before, .breadcrumb li.first a.icon-group-plus:before, a.icon-group-plus.teaser__link:before,
a .icon-group-plus.teaser__link:before, .teaser-quote .icon-group-plus.teaser__title:before, .teaser-quote .icon-group-plus.citation:before {
  background-position: -0.3125em -39.1875em;
  width: 1.5em;
  height: 1.5em; }

.icon.icon-group-plus-white:before, .list--chevron li.icon-group-plus-white:before, .list--check li.icon-group-plus-white:before, .page-search-above .icon-group-plus-white.page-search__exit:before, .breadcrumb li + li.icon-group-plus-white:before, .breadcrumb li.first a.icon-group-plus-white:before, a.icon-group-plus-white.teaser__link:before,
a .icon-group-plus-white.teaser__link:before, .teaser-quote .icon-group-plus-white.teaser__title:before, .teaser-quote .icon-group-plus-white.citation:before {
  background-position: -0.3125em -41.3125em;
  width: 1.5em;
  height: 1.5em; }

.icon.icon-journal:before, .list--chevron li.icon-journal:before, .list--check li.icon-journal:before, .page-search-above .icon-journal.page-search__exit:before, .breadcrumb li + li.icon-journal:before, .breadcrumb li.first a.icon-journal:before, a.icon-journal.teaser__link:before,
a .icon-journal.teaser__link:before, .teaser-quote .icon-journal.teaser__title:before, .teaser-quote .icon-journal.citation:before {
  background-position: -0.3125em -43.4375em;
  width: 1.5em;
  height: 1.5em; }

.icon.icon-journal-white:before, .list--chevron li.icon-journal-white:before, .list--check li.icon-journal-white:before, .page-search-above .icon-journal-white.page-search__exit:before, .breadcrumb li + li.icon-journal-white:before, .breadcrumb li.first a.icon-journal-white:before, a.icon-journal-white.teaser__link:before,
a .icon-journal-white.teaser__link:before, .teaser-quote .icon-journal-white.teaser__title:before, .teaser-quote .icon-journal-white.citation:before {
  background-position: -0.3125em -45.5625em;
  width: 1.5em;
  height: 1.5em; }

.icon.icon-linkedin:before, .list--chevron li.icon-linkedin:before, .list--check li.icon-linkedin:before, .page-search-above .icon-linkedin.page-search__exit:before, .breadcrumb li + li.icon-linkedin:before, .breadcrumb li.first a.icon-linkedin:before, a.icon-linkedin.teaser__link:before,
a .icon-linkedin.teaser__link:before, .teaser-quote .icon-linkedin.teaser__title:before, .teaser-quote .icon-linkedin.citation:before {
  background-position: -0.3125em -47.6875em;
  width: 1.5em;
  height: 1.5em; }

.icon.icon-linkedin-white:before, .list--chevron li.icon-linkedin-white:before, .list--check li.icon-linkedin-white:before, .page-search-above .icon-linkedin-white.page-search__exit:before, .breadcrumb li + li.icon-linkedin-white:before, .breadcrumb li.first a.icon-linkedin-white:before, a.icon-linkedin-white.teaser__link:before,
a .icon-linkedin-white.teaser__link:before, .teaser-quote .icon-linkedin-white.teaser__title:before, .teaser-quote .icon-linkedin-white.citation:before {
  background-position: -0.3125em -49.8125em;
  width: 1.5em;
  height: 1.5em; }

.icon.icon-lock:before, .list--chevron li.icon-lock:before, .list--check li.icon-lock:before, .page-search-above .icon-lock.page-search__exit:before, .breadcrumb li + li.icon-lock:before, .breadcrumb li.first a.icon-lock:before, a.icon-lock.teaser__link:before,
a .icon-lock.teaser__link:before, .teaser-quote .icon-lock.teaser__title:before, .teaser-quote .icon-lock.citation:before {
  background-position: -0.3125em -51.9375em;
  width: 4em;
  height: 3.3125em; }

.icon.icon-lock-open:before, .list--chevron li.icon-lock-open:before, .list--check li.icon-lock-open:before, .page-search-above .icon-lock-open.page-search__exit:before, .breadcrumb li + li.icon-lock-open:before, .breadcrumb li.first a.icon-lock-open:before, a.icon-lock-open.teaser__link:before,
a .icon-lock-open.teaser__link:before, .teaser-quote .icon-lock-open.teaser__title:before, .teaser-quote .icon-lock-open.citation:before {
  background-position: -0.3125em -55.875em;
  width: 1.5em;
  height: 1.5em; }

.icon.icon-lock-open-white:before, .list--chevron li.icon-lock-open-white:before, .list--check li.icon-lock-open-white:before, .page-search-above .icon-lock-open-white.page-search__exit:before, .breadcrumb li + li.icon-lock-open-white:before, .breadcrumb li.first a.icon-lock-open-white:before, a.icon-lock-open-white.teaser__link:before,
a .icon-lock-open-white.teaser__link:before, .teaser-quote .icon-lock-open-white.teaser__title:before, .teaser-quote .icon-lock-open-white.citation:before {
  background-position: -0.3125em -58em;
  width: 1.5em;
  height: 1.5em; }

.icon.icon-logo-dips:before, .list--chevron li.icon-logo-dips:before, .list--check li.icon-logo-dips:before, .page-search-above .icon-logo-dips.page-search__exit:before, .breadcrumb li + li.icon-logo-dips:before, .breadcrumb li.first a.icon-logo-dips:before, a.icon-logo-dips.teaser__link:before,
a .icon-logo-dips.teaser__link:before, .teaser-quote .icon-logo-dips.teaser__title:before, .teaser-quote .icon-logo-dips.citation:before {
  background-position: -0.3125em -60.125em;
  width: 8.875em;
  height: 2.9375em; }

.icon.icon-logo-symbol:before, .list--chevron li.icon-logo-symbol:before, .list--check li.icon-logo-symbol:before, .page-search-above .icon-logo-symbol.page-search__exit:before, .breadcrumb li + li.icon-logo-symbol:before, .breadcrumb li.first a.icon-logo-symbol:before, a.icon-logo-symbol.teaser__link:before,
a .icon-logo-symbol.teaser__link:before, .teaser-quote .icon-logo-symbol.teaser__title:before, .teaser-quote .icon-logo-symbol.citation:before {
  background-position: -0.3125em -63.6875em;
  width: 3.4375em;
  height: 4em; }

.icon.icon-magnify:before, .list--chevron li.icon-magnify:before, .list--check li.icon-magnify:before, .page-search-above .icon-magnify.page-search__exit:before, .breadcrumb li + li.icon-magnify:before, .breadcrumb li.first a.icon-magnify:before, a.icon-magnify.teaser__link:before,
a .icon-magnify.teaser__link:before, .teaser-quote .icon-magnify.teaser__title:before, .teaser-quote .icon-magnify.citation:before {
  background-position: -0.3125em -68.3125em;
  width: 1.5em;
  height: 1.5em; }

.icon.icon-magnify-white:before, .list--chevron li.icon-magnify-white:before, .list--check li.icon-magnify-white:before, .page-search-above .icon-magnify-white.page-search__exit:before, .breadcrumb li + li.icon-magnify-white:before, .breadcrumb li.first a.icon-magnify-white:before, a.icon-magnify-white.teaser__link:before,
a .icon-magnify-white.teaser__link:before, .teaser-quote .icon-magnify-white.teaser__title:before, .teaser-quote .icon-magnify-white.citation:before {
  background-position: -0.3125em -70.4375em;
  width: 1.5em;
  height: 1.5em; }

.icon.icon-paper-text:before, .list--chevron li.icon-paper-text:before, .list--check li.icon-paper-text:before, .page-search-above .icon-paper-text.page-search__exit:before, .breadcrumb li + li.icon-paper-text:before, .breadcrumb li.first a.icon-paper-text:before, a.icon-paper-text.teaser__link:before,
a .icon-paper-text.teaser__link:before, .teaser-quote .icon-paper-text.teaser__title:before, .teaser-quote .icon-paper-text.citation:before {
  background-position: -0.3125em -72.5625em;
  width: 1.5em;
  height: 1.5em; }

.icon.icon-paper-text-white:before, .list--chevron li.icon-paper-text-white:before, .list--check li.icon-paper-text-white:before, .page-search-above .icon-paper-text-white.page-search__exit:before, .breadcrumb li + li.icon-paper-text-white:before, .breadcrumb li.first a.icon-paper-text-white:before, a.icon-paper-text-white.teaser__link:before,
a .icon-paper-text-white.teaser__link:before, .teaser-quote .icon-paper-text-white.teaser__title:before, .teaser-quote .icon-paper-text-white.citation:before {
  background-position: -0.3125em -74.6875em;
  width: 1.5em;
  height: 1.5em; }

.icon.icon-puls:before, .list--chevron li.icon-puls:before, .list--check li.icon-puls:before, .page-search-above .icon-puls.page-search__exit:before, .breadcrumb li + li.icon-puls:before, .breadcrumb li.first a.icon-puls:before, a.icon-puls.teaser__link:before,
a .icon-puls.teaser__link:before, .teaser-quote .icon-puls.teaser__title:before, .teaser-quote .icon-puls.citation:before {
  background-position: -0.3125em -76.8125em;
  width: 1.5em;
  height: 1.5em; }

.icon.icon-puls-white:before, .list--chevron li.icon-puls-white:before, .list--check li.icon-puls-white:before, .page-search-above .icon-puls-white.page-search__exit:before, .breadcrumb li + li.icon-puls-white:before, .breadcrumb li.first a.icon-puls-white:before, a.icon-puls-white.teaser__link:before,
a .icon-puls-white.teaser__link:before, .teaser-quote .icon-puls-white.teaser__title:before, .teaser-quote .icon-puls-white.citation:before {
  background-position: -0.3125em -78.9375em;
  width: 1.5em;
  height: 1.5em; }

.icon.icon-quote:before, .list--chevron li.icon-quote:before, .list--check li.icon-quote:before, .page-search-above .icon-quote.page-search__exit:before, .breadcrumb li + li.icon-quote:before, .breadcrumb li.first a.icon-quote:before, a.icon-quote.teaser__link:before,
a .icon-quote.teaser__link:before, .teaser-quote .icon-quote.teaser__title:before, .teaser-quote .icon-quote.citation:before {
  background-position: -0.3125em -81.0625em;
  width: 1.5em;
  height: 1.5em; }

.icon.icon-quote-gray:before, .list--chevron li.icon-quote-gray:before, .list--check li.icon-quote-gray:before, .page-search-above .icon-quote-gray.page-search__exit:before, .breadcrumb li + li.icon-quote-gray:before, .breadcrumb li.first a.icon-quote-gray:before, .breadcrumb li.first .teaser-quote a.teaser__title:before, .teaser-quote .breadcrumb li.first a.teaser__title:before, a.icon-quote-gray.teaser__link:before,
a .icon-quote-gray.teaser__link:before, .teaser-quote .teaser__title:before, .teaser-quote .icon-quote-gray.citation:before {
  background-position: -0.3125em -83.1875em;
  width: 1.5em;
  height: 1.5em; }

.icon.icon-quote-white:before, .list--chevron li.icon-quote-white:before, .list--check li.icon-quote-white:before, .page-search-above .icon-quote-white.page-search__exit:before, .breadcrumb li + li.icon-quote-white:before, .breadcrumb li.first a.icon-quote-white:before, a.icon-quote-white.teaser__link:before,
a .icon-quote-white.teaser__link:before, .teaser-quote .icon-quote-white.teaser__title:before, .teaser-quote .icon-quote-white.citation:before {
  background-position: -0.3125em -85.3125em;
  width: 1.5em;
  height: 1.5em; }

.icon.icon-sail-color:before, .list--chevron li.icon-sail-color:before, .list--check li.icon-sail-color:before, .page-search-above .icon-sail-color.page-search__exit:before, .breadcrumb li + li.icon-sail-color:before, .breadcrumb li.first a.icon-sail-color:before, .fixed .breadcrumb li.first a:before, a.icon-sail-color.teaser__link:before,
a .icon-sail-color.teaser__link:before, .teaser-quote .icon-sail-color.teaser__title:before, .teaser-quote .icon-sail-color.citation:before {
  background-position: -0.3125em -87.4375em;
  width: 1.5em;
  height: 1.5em; }

.icon.icon-sail-gray:before, .list--chevron li.icon-sail-gray:before, .list--check li.icon-sail-gray:before, .page-search-above .icon-sail-gray.page-search__exit:before, .breadcrumb li + li.icon-sail-gray:before, .breadcrumb li.first a:before, a.icon-sail-gray.teaser__link:before,
a .icon-sail-gray.teaser__link:before, .teaser-quote .icon-sail-gray.teaser__title:before, .teaser-quote .icon-sail-gray.citation:before {
  background-position: -0.3125em -89.5625em;
  width: 1.5em;
  height: 1.5em; }

.icon.icon-sharethis:before, .list--chevron li.icon-sharethis:before, .list--check li.icon-sharethis:before, .page-search-above .icon-sharethis.page-search__exit:before, .breadcrumb li + li.icon-sharethis:before, .breadcrumb li.first a.icon-sharethis:before, a.icon-sharethis.teaser__link:before,
a .icon-sharethis.teaser__link:before, .teaser-quote .icon-sharethis.teaser__title:before, .teaser-quote .icon-sharethis.citation:before {
  background-position: -0.3125em -91.6875em;
  width: 1.5em;
  height: 1.5em; }

.icon.icon-sharethis-white:before, .list--chevron li.icon-sharethis-white:before, .list--check li.icon-sharethis-white:before, .page-search-above .icon-sharethis-white.page-search__exit:before, .breadcrumb li + li.icon-sharethis-white:before, .breadcrumb li.first a.icon-sharethis-white:before, a.icon-sharethis-white.teaser__link:before,
a .icon-sharethis-white.teaser__link:before, .teaser-quote .icon-sharethis-white.teaser__title:before, .teaser-quote .icon-sharethis-white.citation:before {
  background-position: -0.3125em -93.8125em;
  width: 1.5em;
  height: 1.5em; }

/*doc
---
title: Icon
name: icon
category: Element
  - Icon
---

Most of icons in use are from [Modern UI Icons](http://modernuiicons.com/). They are set up in a 24x24 square with some underlaying guidelies to how they should be positioned in the content area. ![content area](../../assets/img/icon-guide.png)  

To use the icons in html, the class `icon` together with `icon-[icon-name]` must be added to the html tag. 

If you want to add a icon in css, it can be added with sass `@extend`. You'll need to extend both icon `@extend .icon` and the icon you want to use `@extend .icon-[icon-name]`.

Below are all the available icons. When adding more icons, make sure it follows the guidelines, add it to the folder `source/images/sprite` and run `gulp sprite`. This task generates a `.svg` sprite with `.png` fallback.


```html_example
<div class="gallery--four">
    <div class="gallery__item">
        <div class="icon icon-sail-color">sail</div>
        <div class="icon icon-sail-gray">sail</div>
    </div>
    <div class="gallery__item">
        <div class="icon icon-puls">puls</div>
        <div class="icon icon-puls-white">puls-white</div>
    </div>
    <div class="gallery__item">
        <div class="icon icon-journal">journal</div>
        <div class="icon icon-journal-white">journal-white</div>
    </div>   
    <div class="gallery__item">
        <div class="icon icon-lock-open">lock-open</div>
        <div class="icon icon-lock-open-white">lock-open-white</div>
    </div>
    <div class="gallery__item">
        <div class="icon icon-chevron-right">chevron-right</div>
        <div class="icon icon-chevron-right-orange">chevron-right-orange</div>
        <div class="icon icon-chevron-right-white">chevron-right-white</div>
    </div>
    <div class="gallery__item">
        <div class="icon icon-arrow-right">arrow-right</div>
        <div class="icon icon-arrow-right-blue">arrow-right-blue</div>
        <div class="icon icon-arrow-right-white">arrow-right-white</div>
    </div>
    <div class="gallery__item">
        <div class="icon icon-check">check</div>
        <div class="icon icon-check-blue">check-blue</div>
        <div class="icon icon-check-white">check-white</div>
    </div>
    <div class="gallery__item">
        <div class="icon icon-quote">quote</div>
        <div class="icon icon-quote-gray">quote-gray</div>
        <div class="icon icon-quote-white">quote-white</div>
    </div>
    <div class="gallery__item">
        <div class="icon icon-magnify">magnify</div>
        <div class="icon icon-magnify-white">magnify-white</div>
    </div>
    <div class="gallery__item">
        <div class="icon icon-group-plus">group-plus</div>
        <div class="icon icon-group-plus-white">group-plus-white</div>
    </div>
    <div class="gallery__item">
        <div class="icon icon-envelope">envelope</div>
        <div class="icon icon-envelope-white">envelope-white</div>
    </div>
    <div class="gallery__item">
        <div class="icon icon-linkedin">linkedin</div>
        <div class="icon icon-linkedin-white">linkedin-white</div>
    </div>
    <div class="gallery__item">
        <div class="icon icon-paper-text">paper-text</div>
        <div class="icon icon-paper-text-white">paper-text-white</div>
    </div>
    <div class="gallery__item">
        <div class="icon icon-sharethis">sharethis</div>
        <div class="icon icon-sharethis-white">sharethis-white</div>
    </div>
</div>
```
*/
/*doc
---
parent: icon
title: Icon size
name: icon-size
---

Sizes can be applied to any icon. In html, just include one of the classes together with `icon`.

If you want to apply it in css, the mixin `@include icon-size([size])` can be used. Replace `[size]` with one of the class names. 

```html_example
<p class="icon icon-sail-color small">Small size</p>
<p class="icon icon-sail-color">Normal size</p>
<p class="icon icon-sail-color large">Large size</p>
<p class="icon icon-sail-color xlarge">Xlarge size</p>

```
Class name|Comment
:--|:--
`small`|Small icon
`large`|Large icon
`xlarge`|Extra large icon
*/
.icon.small:before, .list--chevron li.small:before, .list--check li.small:before, .page-search-above .small.page-search__exit:before, .breadcrumb li + li.small:before, .breadcrumb li.first a.small:before, a.small.teaser__link:before,
a .small.teaser__link:before, .teaser-quote .small.teaser__title:before, .teaser-quote .small.citation:before {
  font-size: 12.8px; }
.icon.large:before, .list--chevron li.large:before, .list--check li.large:before, .page-search-above .large.page-search__exit:before, .breadcrumb li + li.large:before, .breadcrumb li.first a.large:before, a.large.teaser__link:before,
a .large.teaser__link:before, .teaser-quote .large.teaser__title:before, .teaser-quote .large.citation:before {
  font-size: 32px; }
.icon.xlarge:before, .list--chevron li.xlarge:before, .list--check li.xlarge:before, .page-search-above .xlarge.page-search__exit:before, .breadcrumb li + li.xlarge:before, .breadcrumb li.first a.xlarge:before, a.xlarge.teaser__link:before,
a .xlarge.teaser__link:before, .teaser-quote .xlarge.teaser__title:before, .teaser-quote .xlarge.citation:before {
  font-size: 48px; }

/*doc
---
title: Button
name: button
category: Element
  - Button
---

Style `<a>`, `<button>` and `<input type="subtmit">` elements by adding the 
class `btn`. Different variants are also available.

```html_example
<a href="" class="btn">Anchor element</a>
<button>Button element</button>
<input type="submit" class="btn" value="Submit element">
```
*/
button, .btn {
  border: none;
  cursor: pointer;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
  position: relative;
  text-decoration: none;
  text-align: center;
  display: inline-block;
  padding: .5em 1em;
  font-size: 1em;
  background-color: #4A9AB0;
  border-color: #007095;
  color: #fff;
  -webkit-appearance: none;
  -webkit-border-radius: 0;
  border-radius: 0;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out; }
  button:hover, button:focus, .btn:hover, .btn:focus {
    color: #fff;
    text-decoration: none;
    background-color: #5aa5ba; }

/*doc
---
title: Button styles
name: button-styles
category: Element
  - Button
---

Option to change color and style.

```html_example
<a href="" class="btn cta">Call to action</a> 
<a href="" class="btn outline">Outline</a>
<a href="" class="btn link">Link</a>
```
*/
button.cta, .btn.cta {
  background-color: #C42B2B; }
  button.cta:hover, button.cta:focus, .btn.cta:hover, .btn.cta:focus {
    background-color: #d33737; }

button.outline, .btn.outline {
  background-color: transparent;
  border-style: solid;
  border-width: 1px;
  color: #4A9AB0; }
  button.outline:hover, button.outline:focus, .btn.outline:hover, .btn.outline:focus {
    color: #66b8cf;
    border-color: #66b8cf; }

button.link, .btn.link {
  background-color: transparent;
  color: #4A9AB0; }
  button.link:hover, button.link:focus, .btn.link:hover, .btn.link:focus {
    color: #66b8cf; }

/*doc
---
title: Button sizes
name: button-sizes
category: Element
  - Button
---

Option to increase button size

```html_example
<a href="" class="btn large">Large button</a>
```
*/
button.large, .btn.large {
  font-size: 1.333em; }

/*doc
---
title: Emphasized lists
name: emphasized-list
category: Component
  - List
---

Description.

```html_example
<ul class="list">
  <li class="list__item">Effektiv drift som frigir ressurser og penger til andre oppgaver</li>
  <li class="list__item">Helsepersonellets hverdag i sentrum</li>
  <li class="list__item">Elektronisk arbeidsflyt erstatter papirstabler og muntlige beskjeder</li>
</ul>

<ul class="list list--chevron">
  <li class="list__item">Effektiv drift som frigir ressurser og penger til andre oppgaver</li>
  <li class="list__item">Helsepersonellets hverdag i sentrum</li>
  <li class="list__item">Elektronisk arbeidsflyt erstatter papirstabler og muntlige beskjeder</li>
</ul>

<ul class="list list--check">
  <li class="list__item">Effektiv drift som frigir ressurser og penger til andre oppgaver</li>
  <li class="list__item">Helsepersonellets hverdag i sentrum</li>
  <li class="list__item">Elektronisk arbeidsflyt erstatter papirstabler og muntlige beskjeder</li>
</ul>
```
*/
.list--chevron,
.list--check {
  list-style: none; }
  .list--chevron li,
  .list--check li {
    position: relative; }
  .list--chevron li:before,
  .list--check li:before {
    position: absolute;
    right: 100%;
    margin-right: 5px;
    top: 50%;
    margin-top: -12px; }
    @media (min-width: 36em) {
      .list--chevron li:before,
      .list--check li:before {
        margin-right: 15px; } }

@media (min-width: 50em) {
  .list--chevron li:before {
    margin-right: 30px; } }

@media (min-width: 50em) {
  .list--check {
    font-size: 1.333em; } }

/*doc
---
title: Basic form
name: basic-form
category: Element
  - Form
---

Description.

```html_example
<form action="">
  <label for="example-name">Name</label>
  <input type="text" id="example-name">
  <label for="example-last-name">Last name</label>
  <input type="text" id="example-last-name">
  <input type="submit" class="btn">
</form>
```

Class name|Description
:--|:--
`large`|Makses input field larger, similar to what it does on a button.
*/
label {
  color: #4D4D4D;
  line-height: 1.5;
  margin-bottom: 0; }
  label.large {
    font-size: 1.333em !important; }
  label.cta:after {
    background-color: #C42B2B !important; }

input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
input[type="color"],
textarea {
  display: block;
  width: 100%;
  padding: .5em 1em;
  color: #555;
  background-color: #e2e4e6;
  background-image: none;
  margin-bottom: 15px;
  -webkit-appearance: none;
  -webkit-border-radius: 0;
  border-radius: 0;
  border: 1px solid #9ea5ab; }
  input[type="text"].large,
  input[type="password"].large,
  input[type="date"].large,
  input[type="datetime"].large,
  input[type="datetime-local"].large,
  input[type="month"].large,
  input[type="week"].large,
  input[type="email"].large,
  input[type="number"].large,
  input[type="search"].large,
  input[type="tel"].large,
  input[type="time"].large,
  input[type="url"].large,
  input[type="color"].large,
  textarea.large {
    font-size: 1.333em; }

/*doc
---
title: Split input
name: split-input
category: Component
  - Form
---

Combining a input text field with a button. Used on newsletter signup. Works 
with adding `large` class on text input and button element, but remember to add 
it on both.

```html_example
<form action="">
  <div class="input-split">
    <label for="search" class="visuallyhidden">Nyhetsbrev</label>
    <input class="" type="email" id="search" placeholder="Søk på dips.no">
    <button type="submit" class="">Søk</button>
  </div>
</form>
```
*/
.input-split, .input-split--block {
  position: relative; }
  .input-split input[type="text"], .input-split--block input[type="text"],
  .input-split input[type="password"],
  .input-split--block input[type="password"],
  .input-split input[type="date"],
  .input-split--block input[type="date"],
  .input-split input[type="datetime"],
  .input-split--block input[type="datetime"],
  .input-split input[type="datetime-local"],
  .input-split--block input[type="datetime-local"],
  .input-split input[type="month"],
  .input-split--block input[type="month"],
  .input-split input[type="week"],
  .input-split--block input[type="week"],
  .input-split input[type="email"],
  .input-split--block input[type="email"],
  .input-split input[type="number"],
  .input-split--block input[type="number"],
  .input-split input[type="search"],
  .input-split--block input[type="search"],
  .input-split input[type="tel"],
  .input-split--block input[type="tel"],
  .input-split input[type="time"],
  .input-split--block input[type="time"],
  .input-split input[type="url"],
  .input-split--block input[type="url"],
  .input-split input[type="color"],
  .input-split--block input[type="color"] {
    margin-bottom: 4px; }
  .input-split button, .input-split--block button, .input-split .btn, .input-split--block .btn {
    position: absolute;
    right: 0;
    top: 0;
    width: auto; }

/*doc
---
parent: split-input
title: Split input block
name: split-input-block
---

Same as split input, but on smaller screens the button get below the input field.

```html_example
<form action="">
  <div class="input-split--block">
    <label for="newsletter" class="visuallyhidden">Nyhetsbrev</label>
    <input class="" type="email" id="newsletter" placeholder="Skriv inn epost...">
    <button type="submit" class="cta">Hold meg oppdatert</button>
  </div>
</form>
```
*/
@media (max-width: 19em) {
  .input-split--block button, .input-split--block .btn {
    position: static;
    display: block;
    width: 100%; } }

/*doc
---
title: Label overlay
name: label-overlay
category: Element
  - Form
---

Overlay label above input field. Optionally add `large` on input and label plus 
`cta` on label.

```html_example
<div class="slide-up">
  <input class="large" id="expires" type="text" placeholder="Skriv inn epost..." />
  <label class="large cta" for="expires">Hold meg oppdatert</label>
</div>
```
*/
.slide-up {
  position: relative; }
  .slide-up input {
    display: inline-block;
    font-family: "Open Sans", sans;
    font-weight: 400;
    outline: 0;
    text-align: right;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out; }
    .slide-up input::-webkit-input-placeholder {
      color: #e2e4e6;
      text-indent: 0;
      font-weight: 300; }
    .slide-up input + label {
      display: inline-block;
      position: absolute;
      -webkit-transform: translateX(0);
      -moz-transform: translateX(0);
      -ms-transform: translateX(0);
      -o-transform: translateX(0);
      transform: translateX(0);
      top: 0;
      left: 0;
      padding: .5em 1em;
      text-shadow: 0 1px 0 rgba(19, 74, 70, 0.4);
      -webkit-transition: all .3s ease-in-out;
      -moz-transition: all .3s ease-in-out;
      -o-transition: all .3s ease-in-out;
      transition: all .3s ease-in-out;
      -webkit-border-top-left-radius: 3px;
      border-top-left-radius: 3px;
      -webkit-border-bottom-left-radius: 3px;
      border-bottom-left-radius: 3px;
      overflow: hidden;
      margin-top: 0;
      color: white;
      font-size: 1em; }
      .slide-up input + label:before, .slide-up input + label:after {
        content: "";
        position: absolute;
        right: 0;
        left: 0;
        z-index: -1;
        -webkit-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out; }
      .slide-up input + label:before {
        top: 6px;
        left: 5px;
        right: 5px;
        bottom: 6px;
        background: #5aa5ba; }
      .slide-up input + label:after {
        top: 0;
        bottom: 0;
        background: #4A9AB0; }

.slide-up input:focus,
.slide-up input:active {
  color: #4d4f53;
  text-indent: 0;
  background: #fff;
  text-align: left; }
  .slide-up input:focus::-webkit-input-placeholder,
  .slide-up input:active::-webkit-input-placeholder {
    color: #aaa; }
  .slide-up input:focus + label,
  .slide-up input:active + label {
    font-size: .8em !important;
    color: #4d4f53;
    padding-left: 0;
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%); }
    .slide-up input:focus + label:before,
    .slide-up input:active + label:before {
      background: none; }
    .slide-up input:focus + label:after,
    .slide-up input:active + label:after {
      background-color: transparent;
      -webkit-transform: translateY(100%);
      -moz-transform: translateY(100%);
      -ms-transform: translateY(100%);
      -o-transform: translateY(100%);
      transform: translateY(100%); }

.page-search-wrapper {
  background-color: #4d4f53;
  padding: 15px 0; }
  .js .page-search-wrapper {
    display: none; }
  .page-search-wrapper.is-active {
    display: block; }

.page-search-above {
  position: relative; }
  .page-search-above input[type="search"] {
    margin-bottom: 0;
    background-color: transparent;
    border: 0;
    color: white;
    font-style: italic; }
    .page-search-above input[type="search"]:focus {
      outline: none; }
  .page-search-above .page-search__exit {
    position: absolute;
    right: 0;
    top: -12px;
    margin-bottom: 0;
    background-color: transparent;
    opacity: .8;
    padding: 1em; }
    @media (min-width: 36em) {
      .page-search-above .page-search__exit {
        top: -10px; } }
    .page-search-above .page-search__exit:hover, .page-search-above .page-search__exit:focus {
      opacity: 1; }

.page-search {
  margin: 7.5px 0; }
  @media (min-width: 25em) {
    .page-search {
      margin: 0; } }
  .page-search .page-search__text {
    background-color: white;
    border-color: #ccc; }
  .js .page-search {
    opacity: 0;
    z-index: -1;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    display: none; }
    @media (min-width: 25em) {
      .js .page-search {
        position: absolute;
        top: 0;
        right: 0;
        min-width: 65%; } }
    @media (min-width: 50em) {
      .js .page-search {
        min-width: 40%; } }
  .page-search.is-active {
    opacity: 1;
    z-index: 5;
    display: block; }

/*doc
---
title: Table
name: table
category: Element
  - Table
---

Default table

```html_example
<table class="">
      <caption>Optional table caption.</caption>
      <thead>
        <tr>
          <th>#</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Username</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
        <tr>
          <td>3</td>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
        </tr>
      </tbody>
    </table>
```
*/
table {
  background: #FFFFFF;
  margin-bottom: 1.25rem;
  border: solid 1px #F0F4F5;
  table-layout: auto;
  width: 100%; }
  table caption {
    background: transparent;
    color: #222222;
    font-size: 1rem;
    font-weight: bold; }
  table thead {
    background: #F0F4F5; }
    table thead tr th,
    table thead tr td {
      padding: 0.5rem 0.625rem 0.625rem;
      font-size: 0.875rem;
      font-weight: bold;
      color: #222222; }
  table tfoot {
    background: #F5F5F5; }
    table tfoot tr th,
    table tfoot tr td {
      padding: 0.5rem 0.625rem 0.625rem;
      font-size: 0.875rem;
      font-weight: bold;
      color: #222222; }
  table tr th,
  table tr td {
    padding: 0.5625rem 0.625rem;
    font-size: 0.875rem;
    color: #222222;
    text-align: left; }
  table tr.even,
  table tr.alt,
  table tr:nth-of-type(even) {
    background: #f7fafa; }
  table thead tr th,
  table tfoot tr th,
  table tfoot tr td,
  table tbody tr th,
  table tbody tr td,
  table tr td {
    display: table-cell;
    line-height: 1.125rem; }

/*doc
---
title: Bounce right
name: bounce-right
category: Element
  - Animation
---

Bounce a element to the right. Use the class `bounce-right`

The animation is also available to use in the css 
`a { animation: bounce-right }`

```html_example
<img src="http://placehold.it/30x30" class="bounce-right">
```
*/
.bounce-right {
  -webkit-animation: bounce-right 1.5s infinite ease-in-out;
  -moz-animation: bounce-right 1.5s infinite ease-in-out;
  -o-animation: bounce-right 1.5s infinite ease-in-out;
  animation: bounce-right 1.5s infinite ease-in-out; }

/*doc
---
title: Background color
name: background-color
category: Element
  - Background
---

By applying a class of `bg-light` or `bg-dark`, you will get a colored background. This was made for use on section-row.
Text and headings inside `bg-dark` is set to white.

```html_example
<div class="bg-light">
  <h1 class="h3">Light background</h1>
  <p>Norge ligger langt fremme på verdensbasis, og Regjeringen har som mål at vi skal være blant de fremste landene i verden innenfor ny teknologi, kompetanse og kunnskap.</p>
</div>

<div class="bg-dark">
  <h1 class="h3">Dark background</h1>
  <p>Norge ligger langt fremme på verdensbasis, og Regjeringen har som mål at vi skal være blant de fremste landene i verden innenfor ny teknologi, kompetanse og kunnskap.</p>
</div>
```
*/
.bg-light {
  background-color: #F0F4F5; }
.bg-dark, .bg-dark--hostpital, .bg-dark--open-office-landscape {
  background-color: #4d4f53; }

.bg-light .frame, .bg-light .teaser__img {
  border-color: white; }

.bg-dark, .bg-dark--hostpital, .bg-dark--open-office-landscape {
  color: white; }
  .bg-dark h1, .bg-dark--hostpital h1, .bg-dark--open-office-landscape h1, .bg-dark h2, .bg-dark--hostpital h2, .bg-dark--open-office-landscape h2, .bg-dark h3, .bg-dark--hostpital h3, .bg-dark--open-office-landscape h3, .bg-dark h4, .bg-dark--hostpital h4, .bg-dark--open-office-landscape h4, .bg-dark h5, .bg-dark--hostpital h5, .bg-dark--open-office-landscape h5, .bg-dark h6, .bg-dark--hostpital h6, .bg-dark--open-office-landscape h6 {
    color: inherit; }
  .bg-dark button, .bg-dark--hostpital button, .bg-dark--open-office-landscape button, .bg-dark .btn, .bg-dark--hostpital .btn, .bg-dark--open-office-landscape .btn, .bg-dark a, .bg-dark--hostpital a, .bg-dark--open-office-landscape a {
    color: white;
    color: rgba(255, 255, 255, 0.8);
    border-color: white;
    border-color: rgba(255, 255, 255, 0.8); }
    .bg-dark button:hover, .bg-dark--hostpital button:hover, .bg-dark--open-office-landscape button:hover, .bg-dark button:focus, .bg-dark--hostpital button:focus, .bg-dark--open-office-landscape button:focus, .bg-dark .btn:hover, .bg-dark--hostpital .btn:hover, .bg-dark--open-office-landscape .btn:hover, .bg-dark .btn:focus, .bg-dark--hostpital .btn:focus, .bg-dark--open-office-landscape .btn:focus, .bg-dark a:hover, .bg-dark--hostpital a:hover, .bg-dark--open-office-landscape a:hover, .bg-dark a:focus, .bg-dark--hostpital a:focus, .bg-dark--open-office-landscape a:focus {
      color: inherit;
      border-color: inherit; }
  .bg-dark .teaser--block, .bg-dark--hostpital .teaser--block, .bg-dark--open-office-landscape .teaser--block {
    color: white; }

/*doc
---
title: Background image
name: background-image
category: Element
  - Background
---

Custom background images. Example usages on `section-row` 

```html_example
<section class="section-row bg-dark--hostpital">
  <div class="container">
    <h1 class="section__title">Section title</h1>
    <div class="section__main">
      <p>Section text content</p>
    </div>
  </div>
</section>
```
Class|Description
:--|:--
`bg-dark--hostpital` | Dark image of nurse and patient
`bg-dark--open-office-landscape` | Dark image of office landscape
*/
.bg-dark--hostpital, .bg-dark--open-office-landscape {
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: center center; }

.bg-dark--hostpital {
  background-image: url(/assets/img/dark-bg.jpg); }

.bg-dark--open-office-landscape {
  background-image: url(/assets/img/office-open-landscape.jpg); }

.nav ul {
  list-style: none;
  margin: 0;
  padding: 0; }

.menu__item {
  display: block;
  text-align: center; }
  @media (min-width: 19em) and (max-width: 36em) {
    .menu__item {
      width: 33.33333%;
      float: left; } }
  @media (min-width: 36em) {
    .menu__item {
      display: inline-block; }
      .menu__item + .menu__item {
        margin-left: 30px; } }
  .menu__item a {
    display: block;
    line-height: 2.5; }

/*doc
---
title: Main navigation
name: nav-main
category: Component
  - Navigation
---


```html_example
<nav class="nav nav--main">
  <ul class="menu" role="navigation">
    <li class="menu__item"><a href="">Løsninger</a></li>
    <li class="menu__item"><a href="">eHelse</a></li>
    <li class="menu__item"><a href="">Karriere</a></li>
  </ul>
</nav>
```
*/
.nav--main a {
  color: inherit; }
@media (min-width: 25em) {
  .js .nav--main .menu {
    padding-right: 30px; } }
@media (min-width: 36em) {
  .js .nav--main .menu {
    padding-right: 19.9998px;
    display: inline-block; } }
.nav--main .btn-search {
  display: none; }
  .js .nav--main .btn-search {
    position: absolute;
    top: -9.9999px;
    right: 0;
    padding: 7.5px;
    display: inline-block; }
    @media (min-width: 19em) {
      .js .nav--main .btn-search {
        padding: 15px; } }
    @media (min-width: 36em) {
      .js .nav--main .btn-search {
        position: static;
        padding: 0; } }

.nav--footer {
  color: inherit; }
  @media (min-width: 50em) {
    .nav--footer {
      font-size: 1.333em; } }

.page-header {
  padding: 10px 0; }
  @media (min-width: 36em) {
    .page-header {
      padding: 30px 0; } }
  .page-header .container, .page-header .container--narrow {
    position: relative; }

.page-logo {
  display: block;
  width: 80px;
  text-align: center;
  margin-left: auto;
  margin-right: auto; }
  .page-logo img {
    display: block; }
    @media (max-width: 25em) {
      .page-logo img {
        margin-left: -5.26316%; } }
  @media (min-width: 19em) {
    .page-logo {
      width: 47.36842%;
      float: left;
      margin-right: 5.26316%;
      margin-left: 26.31579%; } }
  @media (min-width: 25em) {
    .page-logo {
      width: 31.03448%;
      float: left;
      margin-right: 3.44828%;
      margin-left: 0;
      text-align: left;
      max-width: 142px; } }

.page-header .nav {
  text-align: center; }
  @media (min-width: 19em) {
    .page-header .nav {
      width: 100%;
      float: left;
      margin-left: 0;
      margin-right: 0; } }
  @media (min-width: 25em) {
    .page-header .nav {
      width: 65.51724%;
      float: right;
      margin-right: 0;
      text-align: right; } }

.page-footer {
  padding: 15px 0;
  background-color: #4d4f53;
  color: #ccc;
  text-align: center; }
  .page-footer a {
    color: inherit; }
    .page-footer a:hover, .page-footer a:focus {
      color: white; }

.footer-info {
  clear: both;
  margin-top: 30px; }
  @media (min-width: 50em) {
    .footer-info {
      margin-top: 90px; } }

/*doc
---
title: Breadcrumb
name: breadcrumb
category: Component
  - Breadcrumb
---



```html_example
<ul class="breadcrumb">
  <li class="first"><a href="index.html">Dips</a></li>
  <li><a href="">Karriere</a></li>
  <li class="last"><a>Felleskap</a></li>
</ul>
```
*/
.breadcrumb-nav {
  background-color: white;
  overflow: hidden;
  border-bottom: 1px solid #ccc;
  white-space: nowrap;
  overflow-x: auto; }
  @media only all {
    .breadcrumb-nav.fixed {
      position: fixed;
      top: 0;
      width: 100%; } }

.breadcrumb {
  margin: 0;
  padding: 0;
  line-height: 45px; }
  .breadcrumb li {
    display: inline-block;
    position: relative; }
    .breadcrumb li + li:before {
      content: "";
      position: absolute;
      right: 100%;
      top: -50px;
      opacity: .1; }
    .breadcrumb li.first a {
      padding-left: 0; }
  .breadcrumb a,
  .breadcrumb .breadcrumb__active {
    font-size: 0.875em;
    display: inline-block;
    padding: 0 15px;
    color: #9ea5ab; }

.social-sharing-container {
  position: relative;
  height: 10px;
  margin-bottom: 10px; }
  .social-sharing-container .section__title {
    margin-bottom: 50px; }
  .social-sharing-container.active {
    height: 300px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out; }
    .social-sharing-container.active.passive {
      height: 10px;
      margin-bottom: 10px;
      -webkit-transition: all 0.5s ease-in-out;
      -moz-transition: all 0.5s ease-in-out;
      -o-transition: all 0.5s ease-in-out;
      transition: all 0.5s ease-in-out; }

.absolute-center, .menu-social, .menu-social .btn .fa, .menu-social .btn.trigger .line {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%); }

.menu-social {
  width: 5em;
  height: 5em; }
  .menu-social .btn {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.15);
    opacity: 0;
    z-index: -10;
    cursor: pointer;
    -webkit-transition: opacity 1s, z-index 0.3s, -webkit-transform 1s;
    -moz-transition: opacity 1s, z-index 0.3s, -moz-transform 1s;
    -o-transition: opacity 1s, z-index 0.3s, -o-transform 1s;
    transition: opacity 1s, z-index 0.3s, transform 1s;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0); }
    .menu-social .btn .fa {
      font-size: 3em;
      -webkit-transition: color 0.3s;
      -moz-transition: color 0.3s;
      -o-transition: color 0.3s;
      transition: color 0.3s;
      color: black; }
    .menu-social .btn:hover .fa {
      color: rgba(255, 255, 255, 0.7); }
    .menu-social .btn.trigger {
      opacity: 1;
      z-index: 100;
      cursor: pointer;
      -webkit-transition: -webkit-transform 0.3s;
      -moz-transition: -moz-transform 0.3s;
      -o-transition: -o-transform 0.3s;
      transition: transform 0.3s; }
      .menu-social .btn.trigger:before {
        margin-left: -6px;
        margin-top: 6px; }
      .menu-social .btn.trigger:hover, .menu-social .btn.trigger:focus {
        -webkit-transform: scale(1.2);
        -moz-transform: scale(1.2);
        -ms-transform: scale(1.2);
        -o-transform: scale(1.2);
        transform: scale(1.2); }
        .menu-social .btn.trigger:hover .line, .menu-social .btn.trigger:focus .line {
          background-color: rgba(255, 255, 255, 0.7); }
          .menu-social .btn.trigger:hover .line:before, .menu-social .btn.trigger:hover .line:after, .menu-social .btn.trigger:focus .line:before, .menu-social .btn.trigger:focus .line:after {
            background-color: rgba(255, 255, 255, 0.7); }
      .menu-social .btn.trigger .line {
        width: 60%;
        height: 6px;
        background: #000;
        -webkit-border-radius: 6px;
        border-radius: 6px;
        -webkit-transition: background-color 0.3s, height 0.3s, top 0.3s;
        -moz-transition: background-color 0.3s, height 0.3s, top 0.3s;
        -o-transition: background-color 0.3s, height 0.3s, top 0.3s;
        transition: background-color 0.3s, height 0.3s, top 0.3s; }
        .menu-social .btn.trigger .line:before, .menu-social .btn.trigger .line:after {
          content: "";
          display: block;
          position: absolute;
          left: 0;
          width: 100%;
          height: 6px;
          background: #000;
          -webkit-border-radius: 6px;
          border-radius: 6px;
          -webkit-transition: background-color 0.3s, -webkit-transform 0.3s;
          -moz-transition: background-color 0.3s, -moz-transform 0.3s;
          -o-transition: background-color 0.3s, -o-transform 0.3s;
          transition: background-color 0.3s, transform 0.3s; }
        .menu-social .btn.trigger .line:before {
          top: -12px;
          -webkit-transform-origin: 15% 100%;
          -moz-transform-origin: 15% 100%;
          -ms-transform-origin: 15% 100%;
          -o-transform-origin: 15% 100%;
          transform-origin: 15% 100%; }
        .menu-social .btn.trigger .line:after {
          top: 12px;
          -webkit-transform-origin: 25% 30%;
          -moz-transform-origin: 25% 30%;
          -ms-transform-origin: 25% 30%;
          -o-transform-origin: 25% 30%;
          transform-origin: 25% 30%; }
  .menu-social .rotater {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%; }
  .menu-social.active .btn-icon {
    opacity: 1;
    z-index: 50; }
  .menu-social.active .trigger .line {
    height: 0px;
    top: 45%; }
    .menu-social.active .trigger .line:before {
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      transform: rotate(45deg);
      width: 110%; }
    .menu-social.active .trigger .line:after {
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
      transform: rotate(-45deg);
      width: 110%; }

/* horrible things are happening here
for some reason nth-child(1) is always busy and elements starting from 2 */
.rotater:nth-child(1) {
  -webkit-transform: rotate(-22.5deg);
  -moz-transform: rotate(-22.5deg);
  -ms-transform: rotate(-22.5deg);
  -o-transform: rotate(-22.5deg);
  transform: rotate(-22.5deg); }

.menu-social.active .rotater:nth-child(1) .btn-icon {
  -webkit-transform: translateX(-10em) rotate(22.5deg);
  -moz-transform: translateX(-10em) rotate(22.5deg);
  -ms-transform: translateX(-10em) rotate(22.5deg);
  -o-transform: translateX(-10em) rotate(22.5deg);
  transform: translateX(-10em) rotate(22.5deg); }

.rotater:nth-child(2) {
  -webkit-transform: rotate(22.5deg);
  -moz-transform: rotate(22.5deg);
  -ms-transform: rotate(22.5deg);
  -o-transform: rotate(22.5deg);
  transform: rotate(22.5deg); }

.menu-social.active .rotater:nth-child(2) .btn-icon {
  -webkit-transform: translateX(-10em) rotate(-22.5deg);
  -moz-transform: translateX(-10em) rotate(-22.5deg);
  -ms-transform: translateX(-10em) rotate(-22.5deg);
  -o-transform: translateX(-10em) rotate(-22.5deg);
  transform: translateX(-10em) rotate(-22.5deg); }

.rotater:nth-child(3) {
  -webkit-transform: rotate(67.5deg);
  -moz-transform: rotate(67.5deg);
  -ms-transform: rotate(67.5deg);
  -o-transform: rotate(67.5deg);
  transform: rotate(67.5deg); }

.menu-social.active .rotater:nth-child(3) .btn-icon {
  -webkit-transform: translateX(-10em) rotate(-67.5deg);
  -moz-transform: translateX(-10em) rotate(-67.5deg);
  -ms-transform: translateX(-10em) rotate(-67.5deg);
  -o-transform: translateX(-10em) rotate(-67.5deg);
  transform: translateX(-10em) rotate(-67.5deg); }

.rotater:nth-child(4) {
  -webkit-transform: rotate(112.5deg);
  -moz-transform: rotate(112.5deg);
  -ms-transform: rotate(112.5deg);
  -o-transform: rotate(112.5deg);
  transform: rotate(112.5deg); }

.menu-social.active .rotater:nth-child(4) .btn-icon {
  -webkit-transform: translateX(-10em) rotate(-112.5deg);
  -moz-transform: translateX(-10em) rotate(-112.5deg);
  -ms-transform: translateX(-10em) rotate(-112.5deg);
  -o-transform: translateX(-10em) rotate(-112.5deg);
  transform: translateX(-10em) rotate(-112.5deg); }

.rotater:nth-child(5) {
  -webkit-transform: rotate(157.5deg);
  -moz-transform: rotate(157.5deg);
  -ms-transform: rotate(157.5deg);
  -o-transform: rotate(157.5deg);
  transform: rotate(157.5deg); }

.menu-social.active .rotater:nth-child(5) .btn-icon {
  -webkit-transform: translateX(-10em) rotate(-157.5deg);
  -moz-transform: translateX(-10em) rotate(-157.5deg);
  -ms-transform: translateX(-10em) rotate(-157.5deg);
  -o-transform: translateX(-10em) rotate(-157.5deg);
  transform: translateX(-10em) rotate(-157.5deg); }

.rotater:nth-child(6) {
  -webkit-transform: rotate(202.5deg);
  -moz-transform: rotate(202.5deg);
  -ms-transform: rotate(202.5deg);
  -o-transform: rotate(202.5deg);
  transform: rotate(202.5deg); }

.menu-social.active .rotater:nth-child(6) .btn-icon {
  -webkit-transform: translateX(-10em) rotate(-202.5deg);
  -moz-transform: translateX(-10em) rotate(-202.5deg);
  -ms-transform: translateX(-10em) rotate(-202.5deg);
  -o-transform: translateX(-10em) rotate(-202.5deg);
  transform: translateX(-10em) rotate(-202.5deg); }

.rotater:nth-child(7) {
  -webkit-transform: rotate(247.5deg);
  -moz-transform: rotate(247.5deg);
  -ms-transform: rotate(247.5deg);
  -o-transform: rotate(247.5deg);
  transform: rotate(247.5deg); }

.menu-social.active .rotater:nth-child(7) .btn-icon {
  -webkit-transform: translateX(-10em) rotate(-247.5deg);
  -moz-transform: translateX(-10em) rotate(-247.5deg);
  -ms-transform: translateX(-10em) rotate(-247.5deg);
  -o-transform: translateX(-10em) rotate(-247.5deg);
  transform: translateX(-10em) rotate(-247.5deg); }

.rotater:nth-child(8) {
  -webkit-transform: rotate(292.5deg);
  -moz-transform: rotate(292.5deg);
  -ms-transform: rotate(292.5deg);
  -o-transform: rotate(292.5deg);
  transform: rotate(292.5deg); }

.menu-social.active .rotater:nth-child(8) .btn-icon {
  -webkit-transform: translateX(-10em) rotate(-292.5deg);
  -moz-transform: translateX(-10em) rotate(-292.5deg);
  -ms-transform: translateX(-10em) rotate(-292.5deg);
  -o-transform: translateX(-10em) rotate(-292.5deg);
  transform: translateX(-10em) rotate(-292.5deg); }

.rotater:nth-child(9) {
  -webkit-transform: rotate(337.5deg);
  -moz-transform: rotate(337.5deg);
  -ms-transform: rotate(337.5deg);
  -o-transform: rotate(337.5deg);
  transform: rotate(337.5deg); }

.menu-social.active .rotater:nth-child(9) .btn-icon {
  -webkit-transform: translateX(-10em) rotate(-337.5deg);
  -moz-transform: translateX(-10em) rotate(-337.5deg);
  -ms-transform: translateX(-10em) rotate(-337.5deg);
  -o-transform: translateX(-10em) rotate(-337.5deg);
  transform: translateX(-10em) rotate(-337.5deg); }

.circle-photo {
  width: 300px;
  height: 300px;
  border-radius: 150px;
  -webkit-border-radius: 150px;
  -moz-border-radius: 150px;
  margin: 1em auto;
  -webkit-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-border-radius: 99em;
  border-radius: 99em;
  border: 5px solid white;
  -webkit-box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.8);
  box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.8); }

.hero {
  color: white;
  text-align: center;
  position: relative;
  overflow: hidden; }
  @media (min-width: 50em) {
    .hero {
      min-height: 370px; } }

.hero__overlay {
  padding: 30px 0;
  position: relative;
  width: 100%; }
  @media (min-width: 36em) {
    .hero__overlay {
      padding: 120px 0 60px; } }

.hero__title,
.hero__sub-title {
  color: inherit;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
  margin: 0; }

.hero__title {
  font-size: 2.05227em; }
  @media (min-width: 36em) {
    .hero__title {
      font-size: 3.15733em; } }

.hero__sub-title {
  font-size: 1.53959em;
  font-weight: 300; }
  @media (min-width: 36em) {
    .hero__sub-title {
      font-size: 2.36859em; } }

.hero .btn {
  margin: 15px 0 0;
  -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3); }
  @media (min-width: 36em) {
    .hero .btn {
      margin-top: 30px; } }

.hero__media {
  min-height: 100%;
  position: absolute;
  max-width: none;
  right: 0;
  left: 0;
  top: 0;
  min-width: 100%;
  border: 0; }

/*doc
---
title: Section row
name: section-row
category: Container
  - Section
---

A building block for most pages, containing different type of content.

```html_example
<section class="section-row">
  <div class="container">
    <h1 class="section__title">Hovedutfordringer innenfor eHelse</h1>
    <div class="section__main">
      <ul>
        <li>Effektiv drift som frigir ressurser og penger til andre oppgaver</li>
        <li>Helsepersonellets hverdag i sentrum</li>
        <li>Elektronisk arbeidsflyt erstatter papirstabler og muntlige beskjeder</li>
        <li>Livreddende kode som gir personellet de beste forutsetningene for livsviktige avgjørelser</li>
        <li>Sikkerhet for pasientene</li>
        <li>Enklere tilgang til sin journal for all pasientene</li>
      </ul>
    </div>
    <footer class="section__footer">
      <a class="btn" href="">Flere utfordringen innen eHelse</a>
    </footer>
  </div>
</section>
```
*/
.section-row, .section-row--connect-top {
  padding: 30px 0; }
  @media (min-width: 50em) {
    .section-row, .section-row--connect-top {
      padding: 60px 0; } }

.section__title {
  font-weight: 300;
  text-align: center;
  margin: 0 0 15px; }
  @media (min-width: 19em) {
    .section__title {
      max-width: 24em;
      margin-left: auto;
      margin-right: auto; } }
  @media (min-width: 50em) {
    .section__title {
      margin-bottom: 30px; } }

.section__main > :first-child,
.section__main > .grid__item > :first-child {
  margin-top: 0; }

.section__footer {
  margin-top: 30px; }

/*doc
---
title: Section row connect top
name: section-row-connect-top
category: Container
  - Section
---

Same as `section-row`, but without any space on top on larger screens. The 
example includes a background to better illustrate it.

```html_example
<section class="section-row--connect-top bg-light">
  <div class="container">
    <h1 class="section__title visuallyhidden">Tittel</h1>
    <div class="section__main">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat.</p>
    </div>
  </div>
</section>
```
*/
@media (min-width: 50em) {
  .section-row--connect-top {
    padding-top: 0; } }

/*doc
---
title: Tile
name: tile
category: Module
  - Tile
---

Class|Description
:--|:--
`blue`|Blue color on tile
`orange`|Orange ocean color on tile
`gray`|Dark gray color on tile
`red`|Red color on tile

```html_example
<div class="container grid-tile">
  <div class="section__main tile-wrapper">
    <article class="tile blue grid__item">
      <a href="" class="tile__link">
        <span class="tile__icon icon icon-journal-white"></span>
        <h1 class="tile__title">Èn pasient – en journal</h1>
        <p class="tile__desc">Sammen skaper vi pasientenes helsetjeneste</p>
      </a>
      <footer class="tile__footer">
        <p>Hverdagen til en helsearbeider er ofte preget av at informasjon som man trenger er fragmentert over mange ulike systemer</p>
        <p>Hva hvis vi kunne lage et system med fokus på lett tilgang på et sted?</p>
        <p>Dette kommer godt frem i Stortingsmelding nr. 9 som uttrykker en visjon vi er svært enige i: “Én Innbygger - én Journal”.</p>
        <h2 class="h4">Artikler om dette temaet</h2>
        <ul>
          <li><a href="#">Artikkel 1</a></li>
          <li><a href="#">Artikkel 1</a></li>
          <li><a href="#">Artikkel 1</a></li>
        </ul>
      </footer>
    </article>
  </div>
</div>
```
*/
.tile-wrapper {
  position: relative; }

.tile {
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  transition: none; }
  @media (min-width: 50em) {
    .tile.is-active {
      width: 100%;
      z-index: 10; }
    .tile.is-inactive {
      display: none; } }

.tile__link {
  color: white;
  background-color: #4A9AB0;
  padding: 30px 15px;
  display: block;
  position: relative; }
  @media (min-width: 36em) {
    .tile__link {
      text-align: center; } }
  @media (min-width: 50em) {
    .tile__link {
      padding-top: 40px;
      min-height: 285px; }
      .is-active .tile__link {
        width: 31.42857%;
        float: left;
        -webkit-transform: scale(1.05);
        -moz-transform: scale(1.05);
        -ms-transform: scale(1.05);
        -o-transform: scale(1.05);
        transform: scale(1.05); } }

.tile__footer {
  background-color: white;
  padding: 15px;
  border-left: 4px solid; }
  .js .tile__footer {
    display: none; }
  .is-active .tile__footer {
    display: block; }
  @media (min-width: 50em) {
    .tile__footer {
      padding: 30px; }
      .is-active .tile__footer {
        width: 65.71429%;
        position: absolute;
        left: 0;
        top: 0; } }

.tile__icon {
  width: 21.05263%;
  float: left;
  margin-right: 5.26316%;
  text-align: center;
  font-size: 48px; }
  @media (min-width: 36em) {
    .tile__icon {
      width: 100%;
      float: left;
      margin-left: 0;
      margin-right: 0; } }

.tile__title {
  margin-top: 0;
  color: inherit;
  width: 73.68421%;
  float: right;
  margin-right: 0; }
  @media (min-width: 36em) {
    .tile__title {
      margin-top: 15px;
      width: 100%;
      float: left;
      margin-left: 0;
      margin-right: 0; } }

.tile__desc,
.tile__icon {
  opacity: .8; }
  a:hover .tile__desc, a:focus .tile__desc, a:hover
  .tile__icon, a:focus
  .tile__icon {
    opacity: 1; }

.tile__desc {
  font-weight: 600;
  width: 73.68421%;
  float: right;
  margin-right: 0; }
  @media (min-width: 36em) {
    .tile__desc {
      width: 100%;
      float: left;
      margin-left: 0;
      margin-right: 0; } }

.blue .tile__link {
  background-color: #4A9AB0; }
  .blue .tile__link:hover, .blue .tile__link:focus {
    background-color: #51a0b6; }
.orange .tile__link {
  background-color: #BF7C00; }
  .orange .tile__link:hover, .orange .tile__link:focus {
    background-color: #cf8600; }
.gray .tile__link {
  background-color: #4d4f53; }
  .gray .tile__link:hover, .gray .tile__link:focus {
    background-color: #55585c; }
.red .tile__link {
  background-color: #C42B2B; }
  .red .tile__link:hover, .red .tile__link:focus {
    background-color: #cf2d2d; }
.tile__link:hover, .tile__link:focus {
  color: white; }
@media (min-width: 50em) {
  .is-active-trail .tile__link {
    -webkit-animation: tile-active .2s 1 ease-in-out;
    -moz-animation: tile-active .2s 1 ease-in-out;
    -o-animation: tile-active .2s 1 ease-in-out;
    animation: tile-active .2s 1 ease-in-out; }
  .not-active-trail .tile__link {
    -webkit-animation: tile-deactive .5s 1 ease-in-out;
    -moz-animation: tile-deactive .5s 1 ease-in-out;
    -o-animation: tile-deactive .5s 1 ease-in-out;
    animation: tile-deactive .5s 1 ease-in-out; } }

.blue .tile__footer {
  border-color: #51a0b6; }
.orange .tile__footer {
  border-color: #cf8600; }
.gray .tile__footer {
  border-color: #55585c; }
.red .tile__footer {
  border-color: #cf2d2d; }
.is-active-trail .tile__footer {
  -webkit-animation: tile-active .5s 1 ease-in-out;
  -moz-animation: tile-active .5s 1 ease-in-out;
  -o-animation: tile-active .5s 1 ease-in-out;
  animation: tile-active .5s 1 ease-in-out; }

/*doc
---
title: Teaser
name: teaser
category: Module
  - Teaser
---

Teaser usally have title, text and link. It could also include icon on 
top. It should live in a narrow container.

```html_example
<div class="grid--three bg-light">
  <article class="grid__item teaser">
    <span class="icon icon-logo-symbol teaser__icon"></span>
    <h1 class="teaser__title">Ledige stillinger</h1>
    <p class="teaser__text">Søk på konkrete stillinger vi ønsker å fylle</p>
    <a href="" class="btn teaser__btn outline">Se ledige stillinger</a>
  </article>
  <article class="grid__item teaser">
    <a href="">
      <span class="icon icon-logo-symbol teaser__icon"></span>
      <h1 class="teaser__title">Ledige stillinger</h1>
      <p class="teaser__text">Søk på konkrete stillinger vi ønsker å fylle</p>
      <footer class="teaser__footer">
        <span class="teaser__link">Se ledige stillinger</span>
      </footer>
    </a>
  </article>
</div>
```
*/
.teaser {
  text-align: center; }
  .teaser > a {
    text-decoration: none;
    color: inherit; }

.teaser__icon {
  padding: 15px;
  display: inline-block; }

.teaser__title {
  margin-top: 0; }

.teaser__btn {
  margin-top: 15px; }

a.teaser__link,
a .teaser__link {
  display: inline-block;
  position: relative;
  margin-bottom: 0;
  color: #4A9AB0; }
  a.teaser__link:before,
  a .teaser__link:before {
    position: absolute;
    top: 3px;
    left: 100%;
    margin-left: 8px;
    font-size: 12.8px; }
a:hover.teaser__link, a:hover .teaser__link, a:focus.teaser__link, a:focus .teaser__link {
  text-decoration: underline; }
  a:hover.teaser__link:before, a:hover .teaser__link:before, a:focus.teaser__link:before, a:focus .teaser__link:before {
    -webkit-animation: bounce-right 1.5s infinite ease-in-out;
    -moz-animation: bounce-right 1.5s infinite ease-in-out;
    -o-animation: bounce-right 1.5s infinite ease-in-out;
    animation: bounce-right 1.5s infinite ease-in-out; }

@media (min-width: 36em) {
  .teaser__footer {
    margin-top: 2.17391%; } }
@media (min-width: 50em) {
  .teaser__footer {
    margin-top: 2.85714%; } }

/*doc
---
title: Teaser quote
name: teaser-quote
category: Module
  - Teaser
---

Quote style for teaser. Used on news and employee stories. Can be used with title or blockquote.

```html_example
<div class="grid--three">
  <article class="grid__item teaser-quote">
    <a href="">
      <h2 class="teaser__title">Sykehus med elektronisk pasientjournal 80% mer effektive ifølge ny rapport</h2>
      <p class="teaser__link">Les hele saken på D:mag</p>
    </a>  
  </article>
  <a href="" class="grid__item teaser-quote">
    <blockquote>
      <p class="teaser__title">Arbeidet er samfunnsnyttig, og at jeg får se resultat</p>
      <cite class="citation">Annette Lund Lillegaard <span class="position">UX Leder</span></cite>
    </blockquote>
  </a>
</div>
```
*/
.teaser-quote {
  text-align: center;
  position: relative;
  display: block; }
  .grid--three .teaser-quote + .teaser--quote {
    margin-top: 15px; }
    @media (min-width: 50em) {
      .grid--three .teaser-quote + .teaser--quote {
        margin-top: 0; } }
  .teaser-quote blockquote {
    margin: 0;
    position: relative; }
  .teaser-quote .teaser__title {
    font-family: "Droid Serif", Georgia, serif;
    line-height: 1.4;
    font-style: italic;
    font-weight: 400;
    margin-top: 27px;
    position: relative; }
    @media (min-width: 50em) {
      .teaser-quote .teaser__title {
        margin-top: 33px; } }
    .teaser-quote .teaser__title:before {
      bottom: 100%;
      left: 50%;
      position: absolute;
      margin-left: -15px;
      margin-bottom: 7.5px; }
      @media (min-width: 50em) {
        .teaser-quote .teaser__title:before {
          margin-bottom: 15px; } }
  .teaser-quote .citation {
    margin-top: 0;
    text-align: center;
    display: inline-block;
    position: relative; }
    .teaser-quote .citation:before {
      font-size: 12.8px;
      position: absolute;
      left: 100%;
      bottom: 0;
      margin-left: 7.5px;
      margin-bottom: 7.5px; }
  .teaser-quote a {
    display: block; }
  .teaser-quote:hover, .teaser-quote:focus,
  .teaser-quote a:hover,
  .teaser-quote a:focus {
    text-decoration: none; }
    .teaser-quote:hover .citation:before, .teaser-quote:focus .citation:before,
    .teaser-quote a:hover .citation:before,
    .teaser-quote a:focus .citation:before {
      -webkit-transition: all 0.2s ease-in-out;
      -moz-transition: all 0.2s ease-in-out;
      -o-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out;
      -webkit-animation: bounce-right 1.5s infinite ease-in-out;
      -moz-animation: bounce-right 1.5s infinite ease-in-out;
      -o-animation: bounce-right 1.5s infinite ease-in-out;
      animation: bounce-right 1.5s infinite ease-in-out; }

/*doc
---
title: Teaser img
name: teaser-img
category: Module
  - Teaser
---

Teaser with image. The image scales on :hover and :focus to make a similar effect as hero banner. Optionally add content in a `<a>` tag.

```html_example
<div class="grid--four">
  <article class="teaser-img grid__item">
    <a href="">
      <div class="teaser__img"><img class="" src="http://placehold.it/400x250" alt=""></div>
      <div class="teaser__text-wrapper">
        <h1 class="teaser__title">Arbeidssted &amp; Moderne kontorer</h1>
      </div>
    </a>
  </article>
  <article class="teaser-img grid__item">
    <div class="teaser__img"><img class="" src="http://placehold.it/400x250" alt=""></div>
    <div class="teaser__text-wrapper">
      <h1 class="teaser__title">Arbeidssted &amp; Moderne kontorer</h1>
    </div>
  </article>
</div>
```
*/
.teaser-img, .teaser-img--overlay {
  color: #4d4f53;
  position: relative;
  display: block;
  text-align: left; }
  .teaser-img > a, .teaser-img--overlay > a {
    color: inherit; }
    .teaser-img > a .teaser__img img, .teaser-img--overlay > a .teaser__img img {
      -webkit-animation: pan-zoom 20s infinite linear;
      -moz-animation: pan-zoom 20s infinite linear;
      -o-animation: pan-zoom 20s infinite linear;
      animation: pan-zoom 20s infinite linear;
      -webkit-animation-play-state: paused;
      -moz-animation-play-state: paused;
      -o-animation-play-state: paused;
      animation-play-state: paused; }
  .teaser-img .teaser__title, .teaser-img--overlay .teaser__title {
    font-weight: 300;
    color: inherit;
    line-height: 1.2;
    margin-top: .3em; }
  .teaser-img .teaser__text, .teaser-img--overlay .teaser__text {
    color: inherit;
    margin-bottom: 0;
    font-size: 0.875em; }
  .teaser-img a:hover, .teaser-img--overlay a:hover,
  .teaser-img a:focus,
  .teaser-img--overlay a:focus {
    text-decoration: none;
    color: inherit; }
    .teaser-img a:hover .teaser__img img, .teaser-img--overlay a:hover .teaser__img img,
    .teaser-img a:focus .teaser__img img,
    .teaser-img--overlay a:focus .teaser__img img {
      -webkit-animation-play-state: running;
      -moz-animation-play-state: running;
      -o-animation-play-state: running;
      animation-play-state: running; }
    .teaser-img a:hover .teaser__title, .teaser-img--overlay a:hover .teaser__title,
    .teaser-img a:focus .teaser__title,
    .teaser-img--overlay a:focus .teaser__title {
      text-decoration: underline; }

/*doc
---
parent: teaser-img
title: Teaser img overlay
name: teaser-img-overlay
---

Similar to Teaser img, but with text above the image.

```html_example
<div class="grid--three">
  <article class="teaser-img--overlay grid__item">
    <a href="">
      <div class="teaser__img"><img class="" src="http://placehold.it/400x250" alt=""></div>
      <div class="teaser__text-wrapper">
        <h1 class="teaser__title">For ambisiøse utviklere</h1>
        <p class="teaser__text">Vi trenger utviklere som vil <span class="highlight">erobre verden</span></p>
      </div>
    </a>
  </article>
  <article class="teaser-img--overlay grid__item">
    <a href="">
      <div class="teaser__img"><img class="" src="http://placehold.it/400x400" alt=""></div>
      <div class="teaser__text-wrapper">
        <h1 class="teaser__title">For ambisiøse utviklere</h1>
        <p class="teaser__text">Vi trenger utviklere som vil <span class="highlight">erobre verden</span></p>
      </div>
    </a>
  </article>
</div>
```
*/
.teaser-img--overlay {
  overflow: hidden; }
  @media (min-width: 19em) {
    .teaser-img--overlay {
      color: white; } }
  .teaser-img--overlay:hover, .teaser-img--overlay:focus {
    text-decoration: none;
    color: inherit; }
    @media (min-width: 19em) {
      .teaser-img--overlay:hover, .teaser-img--overlay:focus {
        color: white; } }
  .teaser-img--overlay .teaser__text {
    color: inherit;
    margin-bottom: 0;
    font-size: 0.875em; }
  .teaser-img--overlay .teaser__text-wrapper {
    display: block; }
    @media (min-width: 19em) {
      .teaser-img--overlay .teaser__text-wrapper {
        background: #4d4f53;
        background: rgba(0, 0, 0, 0.7);
        background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, rgba(0, 0, 0, 0.7)));
        background: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.7) 50%);
        background: -moz-linear-gradient(top, transparent, rgba(0, 0, 0, 0.7) 50%);
        background: -o-linear-gradient(top, transparent, rgba(0, 0, 0, 0.7) 50%);
        background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.7) 50%);
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 30px 15px 19.9998px;
        margin: 0 1px 1px;
        z-index: 5; } }

.teaser__img {
  border-width: 1px;
  overflow: hidden; }
  .teaser__img img {
    display: block;
    width: 100%;
    max-width: none; }

/*doc
---
title: Signup
name: signup
category: Module
  - Signup
---

Custom adjust to signup section. Modification class `signup`

```html_example
<section class="section-row signup">
  <div class="container grid--one-two">
    <h1 class="section__title">Hold deg oppdatert på eHelse</h1>
    <div class="section__main">
      <ul class="list list--check grid__item">
        <li class="list__item">Motta siste nytt om eHelse</li>
        <li class="list__item">Ca 4 nyhetsbrev i året</li>
        <li class="list__item">Meld deg av når som helst</li>
      </ul>
      <form action="" class="grid__item">
        <div class="input-split">
          <label for="newsletter" class="visuallyhidden">Nyhetsbrev</label>
          <input type="email" id="newsletter" placeholder="Skriv inn epost...">
          <button type="submit" class="btn cta">Hold meg oppdatert</button>
        </div>
      </form>
    </div>
  </div>
</section>
```
*/
@media (min-width: 19em) and (max-width: 36em) {
  .signup .list {
    padding-right: 40px; }
    .signup .list li {
      text-align: center; } }
@media (min-width: 36em) {
  .signup .signup__form {
    -webkit-transform: translateY(35%);
    -moz-transform: translateY(35%);
    -ms-transform: translateY(35%);
    -o-transform: translateY(35%);
    transform: translateY(35%); } }