@charset "UTF-8";
/*------------------------------------*/
/*  #FUNCTIONS
/*------------------------------------*/
/*------------------------------------*/
/*  #MEDIA-QUERIES
/*------------------------------------*/
/*------------------------------------*/
/*  #MIXINS
/*------------------------------------*/
/**
 * Word-wrap mixin that breaks words that overflow width
 * Adds manual hyphening (not supported by Blink).
 */
/**
 * Fallback when using svg view sprite in Safari, where wee need to explicitly
 * set background position in order to make it work
 */
/**
 * Minimal clearfix
 */
/*------------------------------------*\
    #ANIMATION
\*------------------------------------*/
/**
 * Various animations used on elements throughout the site
 */
.animation {
  animation-duration: 200ms;
  animation-fill-mode: both;
}

@keyframes bounce-in {
  from, 50%, to {
    animation-timing-function: cubic-bezier(1);
  }
  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
    backface-visibility: hidden;
  }
}
.animation--bounce-in {
  animation-name: bounce-in;
}

/*------------------------------------*/
/*  #Fonts
/*------------------------------------*/
/**
 * Self hosting truetype versions of our fonts since some older browsers fail
 * to utilize woff versions offered by Google Fonts ->
 * (check import statement in _global-variables.scss)
 */
/**
 * Lato
 * Used for body copy
 */
@font-face {
  font-family: "Lato";
  src: url(../fonts/Lato-Regular.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Lato";
  src: url(../fonts/Lato-Italic.ttf) format("truetype");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "Lato";
  src: url(../fonts/Lato-Bold.ttf) format("truetype");
  font-weight: 700;
  font-style: normal;
}
/**
 * Arvo
 * Used for headings
 */
@font-face {
  font-family: "Arvo";
  src: url(../fonts/Arvo-Regular.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Arvo";
  src: url(../fonts/Arvo-Bold.ttf) format("truetype");
  font-weight: 700;
  font-style: normal;
}
/*! normalize.css v4.2.0 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Correct the line height in all browsers.
 * 3. Prevent adjustments of font size after orientation changes in IE and iOS.
 */
/* Document
   ========================================================================== */
html {
  font-family: sans-serif; /* 1 */
  line-height: 1.15; /* 2 */
  -ms-text-size-adjust: 100%; /* 3 */
  -webkit-text-size-adjust: 100%; /* 3 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers (opinionated).
 */
body {
  margin: 0;
}

/**
 * Add the correct display in IE 9-.
 */
article,
aside,
footer,
header,
nav,
section {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */
figcaption,
figure,
main { /* 1 */
  display: block;
}

/**
 * Add the correct margin in IE 8.
 */
figure {
  margin: 1em 40px;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */
a {
  background-color: transparent; /* 1 */
  -webkit-text-decoration-skip: objects; /* 2 */
}

/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */
a:active,
a:hover {
  outline-width: 0;
}

/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */
b,
strong {
  font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font style in Android 4.3-.
 */
dfn {
  font-style: italic;
}

/**
 * Add the correct background and color in IE 9-.
 */
mark {
  background-color: #ff0;
  color: #000;
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
audio,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Remove the border on images inside links in IE 10-.
 */
img {
  border-style: none;
}

/**
 * Hide the overflow in IE.
 */
svg:not(:root) {
  overflow: hidden;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select { /* 1 */
  text-transform: none;
}

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

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

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

/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */
[type=checkbox],
[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
 */
[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */
details,
menu {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Scripting
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
canvas {
  display: inline-block;
}

/**
 * Add the correct display in IE.
 */
template {
  display: none;
}

/* Hidden
   ========================================================================== */
/**
 * Add the correct display in IE 10-.
 */
[hidden] {
  display: none;
}

/* From patternlab
   ========================================================================== */
* {
  box-sizing: border-box;
}

.svg-bullett, .list--unordered li::before, .editor-styles > ul li::before, .list--ordered ul li::before, .editor-styles > ol ul li::before {
  background: url("../images/sprite.svg?v=1742382391497") no-repeat;
  background-size: 849px 479px;
  background-position: 0 0;
  width: 14px;
  height: 14px;
}

.svg-cvrn-expand, .icn-button--prev::after, .icn-button--next::after, .icn-button--menu-toggle::before, .icn-button--menu-toggle::after, .accordion__header button span::before {
  background: url("../images/sprite.svg?v=1742382391497") no-repeat;
  background-size: 849px 479px;
  background-position: -14px -14px;
  width: 16px;
  height: 10px;
}

.svg-cvrn-expand-disabled {
  background: url("../images/sprite.svg?v=1742382391497") no-repeat;
  background-size: 849px 479px;
  background-position: -30px -24px;
  width: 16px;
  height: 10px;
}

.svg-cvrn-hover {
  background: url("../images/sprite.svg?v=1742382391497") no-repeat;
  background-size: 849px 479px;
  background-position: -46px -34px;
  width: 20px;
  height: 12px;
}

.svg-facebook, .icn-button--facebook {
  background: url("../images/sprite.svg?v=1742382391497") no-repeat;
  background-size: 849px 479px;
  background-position: -66px -46px;
  width: 28px;
  height: 28px;
}

.svg-hvl-logo-no {
  background: url("../images/sprite.svg?v=1742382391497") no-repeat;
  background-size: 849px 479px;
  background-position: -94px -74px;
  width: 130px;
  height: 38px;
}

.svg-hvl-logo-no-mobile {
  background: url("../images/sprite.svg?v=1742382391497") no-repeat;
  background-size: 849px 479px;
  background-position: -224px -112px;
  width: 130px;
  height: 38px;
}

.svg-icn-gallery, .button--expand-carousel .button__expand-label::before {
  background: url("../images/sprite.svg?v=1742382391497") no-repeat;
  background-size: 849px 479px;
  background-position: -354px -150px;
  width: 17px;
  height: 16px;
}

.svg-icn-pin, .event__location::before {
  background: url("../images/sprite.svg?v=1742382391497") no-repeat;
  background-size: 849px 479px;
  background-position: -371px -166px;
  width: 16px;
  height: 20px;
}

.svg-icn-pluss, .icn-button--close::after, .button--expand-carousel::after {
  background: url("../images/sprite.svg?v=1742382391497") no-repeat;
  background-size: 849px 479px;
  background-position: -387px -186px;
  width: 16px;
  height: 16px;
}

.svg-icn-search, .icn-button--search-2 .button_icon, .icn-button--search {
  background: url("../images/sprite.svg?v=1742382391497") no-repeat;
  background-size: 849px 479px;
  background-position: -403px -202px;
  width: 20px;
  height: 20px;
}

.svg-icn-search-active, input.has-content + .icn-button--search-2 .button_icon {
  background: url("../images/sprite.svg?v=1742382391497") no-repeat;
  background-size: 849px 479px;
  background-position: -423px -222px;
  width: 20px;
  height: 20px;
}

.svg-lenke-glyph, .list--link-collection li::before, .link--next::after, .link--previous::before, .link--arrow::before, .link--arrow-inverted::before, .button--primary::before {
  background: url("../images/sprite.svg?v=1742382391497") no-repeat;
  background-size: 849px 479px;
  background-position: -443px -242px;
  width: 16px;
  height: 15px;
}

.svg-lenke-glyph-aktiv {
  background: url("../images/sprite.svg?v=1742382391497") no-repeat;
  background-size: 849px 479px;
  background-position: -459px -257px;
  width: 16px;
  height: 8px;
}

.svg-lenke-glyph-hvit, .link--arrow-inverted::before {
  background: url("../images/sprite.svg?v=1742382391497") no-repeat;
  background-size: 849px 479px;
  background-position: -475px -265px;
  width: 16px;
  height: 15px;
}

.svg-logo, .icn-button--logo {
  background: url("../images/sprite.svg?v=1742382391497") no-repeat;
  background-size: 849px 479px;
  background-position: -491px -280px;
  width: 170px;
  height: 99px;
}

.svg-logo-mhfa, .icn-button--logo-mhfa {
  background: url("../images/sprite.svg?v=1742382391497") no-repeat;
  background-size: 849px 479px;
  background-position: -661px -379px;
  width: 136px;
  height: 52px;
}

.svg-sitat, .quote::before {
  background: url("../images/sprite.svg?v=1742382391497") no-repeat;
  background-size: 849px 479px;
  background-position: -797px -431px;
  width: 52px;
  height: 48px;
}

body {
  background: #fbfbfb;
  overflow-x: hidden;
}

hr {
  border: 1px solid #c2ebff;
  border-bottom-color: transparent;
  margin: 24px 0;
}

:focus-visible {
  outline: 2px solid #006e94;
}
.footer :focus-visible {
  outline-color: #fff;
}

/*------------------------------------*\
    #FORMS
\*------------------------------------*/
fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}

label, .label {
  display: block;
  padding-bottom: 0.5rem;
}

input,
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding: 0.5rem 0.65rem;
  border: 1px solid #c2ebff;
  border-radius: 3px;
  transition: border 250ms;
  color: #2e3a3d;
  background: rgba(226, 232, 235, 0.32);
  transition: all 250ms;
  font-family: "Lato", sans-serif;
}
input:focus,
textarea:focus {
  border: 1px solid #5cc9ff;
  box-shadow: inset 0 2px 3px 0 rgba(0, 0, 0, 0.12);
  background: #fff;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: rgba(82, 95, 102, 0.4);
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: italic;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
  color: rgba(82, 95, 102, 0.4);
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: italic;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  color: rgba(82, 95, 102, 0.4);
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: italic;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: rgba(82, 95, 102, 0.4);
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: italic;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
}
button:focus-visible {
  outline: 2px solid #006e94;
}

/*------------------------------------*\
    #IMAGES
\*------------------------------------*/
figure {
  margin: 0;
}
svg,
img {
  max-width: 100%;
}

/*------------------------------------*\
    #LISTS
\*------------------------------------*/
dl dd {
  margin: 0;
}

/*------------------------------------*\
    #TABLES
\*------------------------------------*/
/*------------------------------------*\
    #TYPOGRAPHY
\*------------------------------------*/
body {
  font-family: "Lato", sans-serif;
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing: 0.2px;
  color: #2e3a3d;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media screen and (min-width: 768px) {
  body {
    font-size: 1.0625rem;
    line-height: 1.4;
  }
}

::-moz-selection {
  color: #fff;
  background: #245066;
}

::selection {
  color: #fff;
  background: #245066;
}

h1,
h2,
h3,
h4,
h5,
.h6-heading,
h6,
.h1-heading,
.h2-heading,
.h3-heading,
.h4-heading,
.h5-heading {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -webkit-hyphens: manual;
          hyphens: manual;
  margin: 32px 0 8px;
  font-family: "Arvo", sans-serif;
  font-weight: 400;
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a,
.h1-heading a,
.h2-heading a,
.h3-heading a,
.h4-heading a,
.h5-heading a,
.h6-heading a {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}
h1 a:focus, h1 a:hover,
h2 a:focus,
h2 a:hover,
h3 a:focus,
h3 a:hover,
h4 a:focus,
h4 a:hover,
h5 a:focus,
h5 a:hover,
h6 a:focus,
h6 a:hover,
.h1-heading a:focus,
.h1-heading a:hover,
.h2-heading a:focus,
.h2-heading a:hover,
.h3-heading a:focus,
.h3-heading a:hover,
.h4-heading a:focus,
.h4-heading a:hover,
.h5-heading a:focus,
.h5-heading a:hover,
.h6-heading a:focus,
.h6-heading a:hover {
  text-decoration: underline;
}
h1 strong,
h2 strong,
h3 strong,
h4 strong,
h5 strong,
h6 strong,
.h1-heading strong,
.h2-heading strong,
.h3-heading strong,
.h4-heading strong,
.h5-heading strong,
.h6-heading strong {
  font-weight: normal;
  font-style: italic;
  color: #408cb3;
}

h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child,
.h2-heading:first-child,
.h3-heading:first-child,
.h4-heading:first-child,
.h5-heading:first-child,
.h6-heading:first-child {
  margin-top: 0;
}

h1,
.h1-heading {
  margin-top: 8px;
  margin-bottom: 16px;
  font-size: 2rem;
  line-height: 1.16;
  font-weight: 700;
}
@media screen and (min-width: 768px) {
  h1,
  .h1-heading {
    margin-top: 16px;
    font-size: 2.5rem;
    line-height: 1.15;
    text-align: center;
  }
}
@media screen and (min-width: 1024px) {
  h1,
  .h1-heading {
    margin-top: 56px;
  }
}

h2,
.h2-heading {
  font-size: 1.875rem;
  line-height: 1.2;
}
@media screen and (min-width: 768px) {
  h2,
  .h2-heading {
    font-size: 2.25rem;
    line-height: 1.14;
  }
}

h3,
.h3-heading {
  font-size: 1.6875rem;
  line-height: 1.19;
}
@media screen and (min-width: 768px) {
  h3,
  .h3-heading {
    font-size: 1.875rem;
    line-height: 1.17;
  }
}

h4,
.h4-heading {
  font-size: 1.5rem;
  line-height: 1.33;
}
@media screen and (min-width: 768px) {
  h4,
  .h4-heading {
    font-size: 1.5625rem;
    line-height: 1.24;
  }
}

h5, h6,
.h6-heading,
.h5-heading {
  font-size: 1.3125rem;
  line-height: 1.29;
}
@media screen and (min-width: 768px) {
  h5, h6,
  .h6-heading,
  .h5-heading {
    font-size: 1.3125rem;
    line-height: 1.29;
  }
}

.heading--first-element {
  margin: 24px 0;
}

.heading--center {
  text-align: center;
}

p {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -webkit-hyphens: manual;
          hyphens: manual;
  max-width: 736px;
  margin: 0 0 24px;
}

a {
  color: #20729B;
  text-decoration: underline;
  transition: all 300ms, color 150ms, background 150ms;
}
a:focus-visible {
  outline: 2px solid #006e94;
}

/*------------------------------------*/
/*  #L-CONTAINER
/*------------------------------------*/
/**
 * Styles for layout containers
 */
/**
 * (1) This way we don't have to consider padding when setting max-width
 */
.l-container {
  box-sizing: content-box;
  max-width: 1120px;
  padding: 0 10px;
  transition: all 250ms;
}
@media screen and (min-width: 768px) {
  .l-container {
    padding: 0 16px;
  }
}
@media screen and (min-width: 1024px) {
  .l-container {
    padding: 0 48px;
  }
}
.l-container__child {
  max-width: 928px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
.l-container__child--lead {
  max-width: 800px;
}
.l-container__child--body {
  max-width: 736px;
}
.l-container--centered {
  margin-left: auto;
  margin-right: auto;
}
.l-container--nopad {
  padding-left: 0;
  padding-right: 0;
}
@media screen and (max-width: 1023px) {
  .l-container--nopad\@l-down {
    padding-left: 0;
    padding-right: 0;
  }
}
.l-container--full-width {
  padding-left: 0;
  padding-right: 0;
  max-width: none;
  transition: none;
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
.l-container--full-width\@m-up {
  padding-left: 0;
  padding-right: 0;
  max-width: none;
}
@media screen and (min-width: 768px) {
  .l-container--full-width\@m-up {
    transition: none;
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
  }
}
.l-container--full-width\@l-up {
  padding-left: 0;
  padding-right: 0;
  max-width: none;
}
@media screen and (min-width: 1024px) {
  .l-container--full-width\@l-up {
    transition: none;
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
  }
}
.l-container--full-width\@xl-up {
  padding-left: 0;
  padding-right: 0;
  max-width: none;
}
@media screen and (min-width: 1280px) {
  .l-container--full-width\@xl-up {
    transition: none;
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
  }
}

/*------------------------------------*/
/*  #L-GRID
/*------------------------------------*/
/**
 * Styles for columned layout. Used in conjuction with utility classes to
 * set column width at different breakpoints. Idea taken from the Inuit CSS
 * framework: https://github.com/inuitcss/inuitcss/blob/develop/objects/_objects.layout.scss
 */
.l-grid {
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  margin-left: -32px;
}
.l-grid__item {
  width: 100%;
  padding-left: 32px;
}
.l-grid--overflow {
  overflow: visible;
}

/*------------------------------------*\
    #L-SITE
\*------------------------------------*/
/**
 * The highest level layout rules. Only considers the relationship between
 * html-element, body-element, global header, main content, and global footer
 */
.l-site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  overflow-x: hidden;
}
.l-site__main-content {
  flex-grow: 1;
  position: relative;
}

/*------------------------------------*/
/*  #O-LIST-INLINE
/*------------------------------------*/
/**
 * Styles for horizontal list
 */
.o-list-inline {
  list-style: none;
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
  display: flex;
  margin: 0 -10px;
}
@media screen and (min-width: 768px) {
  .o-list-inline {
    margin: 0 -16px;
  }
}
.o-list-inline p:last-of-type {
  margin-bottom: 20px; /* 20px */
}
.o-list-inline p:last-child {
  margin-bottom: 0;
}
.o-list-inline li {
  padding: 0 10px;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .o-list-inline li {
    padding: 0 16px;
  }
}
.o-list-inline--wrap {
  flex-wrap: wrap;
}
.o-list-inline--2col li {
  width: 50%;
}
.o-list-inline--2col\@m-up, .o-list-inline--2col\@l-up {
  flex-wrap: wrap;
}
.o-list-inline--2col\@m-up li, .o-list-inline--2col\@l-up li {
  margin-bottom: 32px;
  /**
   * Remove bottom margin from last child,
   * and second to last child if the list is even numbered (the two bottom li's)
   */
}
.o-list-inline--2col\@m-up li:last-child, .o-list-inline--2col\@l-up li:last-child {
  margin-bottom: 0;
}
@media screen and (min-width: 768px) {
  .o-list-inline--2col\@m-up li {
    width: 50%;
  }
  .o-list-inline--2col\@m-up li:nth-last-child(2):nth-child(odd) {
    margin-bottom: 0;
  }
}
@media screen and (min-width: 1024px) {
  .o-list-inline--2col\@l-up li {
    width: 50%;
  }
  .o-list-inline--2col\@l-up li:nth-last-child(2):nth-child(odd) {
    margin-bottom: 0;
  }
}

/*------------------------------------*/
/*  #O-LIST
/*------------------------------------*/
/**
 * Styles for vertical list
 */
.o-list {
  list-style: none;
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
  margin: 24px 0;
}
.o-list li {
  margin-bottom: 24px;
}

/*------------------------------------*/
/*  #ACCORDION
/*------------------------------------*/
/**
 * Accordion stylez
 */
.accordion {
  margin-bottom: 16px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.08);
  border-radius: 3px;
}
.accordion:last-of-type {
  margin-bottom: 24px;
}
.accordion__header button {
  cursor: pointer;
  font: inherit;
  display: block;
  width: 100%;
  height: 100%;
  padding: 8px 16px;
  background: #fff;
  border: 1px solid transparent;
  border-bottom: 1px solid #c2ebff;
  border-radius: 3px;
  transition: border 500ms;
  text-align: left;
}
@media screen and (min-width: 768px) {
  .accordion__header button {
    padding: 8px 24px;
  }
}
.accordion__header button:hover, .accordion__header button:focus {
  border-color: #5cc9ff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.16);
}
.accordion__header button span {
  display: flex;
  align-items: center;
}
.accordion__header button span::before {
  content: "";
  display: inline-block;
  position: relative;
  z-index: 1;
  transition: transform 250ms;
  margin-right: 16px;
  flex-shrink: 0;
}
.accordion__header button:hover span::before {
  transform: scale(1.25);
}
.accordion__header.is-active button {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.accordion__header.is-active button span::before {
  transform: rotate(-180deg);
}
.accordion__header.is-active button:hover span::before {
  transform: rotate(-180deg) scale(1.25);
}
.accordion__heading {
  margin: 0;
}
.accordion__body {
  display: none;
  padding: 16px 16px 24px;
  background: #fff;
}
.accordion__body > *:last-child {
  margin-bottom: 0;
}
@media screen and (min-width: 768px) {
  .accordion__body {
    padding: 16px 24px 24px;
  }
}

/*------------------------------------*/
/*  #BUTTON
/*------------------------------------*/
/**
 * Various button styles
 */
.button {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  transition: all 250ms;
  text-decoration: none;
}
.button__hidden-label {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
}
.button--primary {
  padding: 4px 20px 6px 12px;
  border: 1px solid #c2ebff;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.08);
  color: #245066;
  font-size: 1.125rem;
  line-height: 1.44;
  transition: all 250ms;
}
@media screen and (min-width: 768px) {
  .button--primary {
    font-size: 1.1875rem;
    line-height: 1.32;
  }
}
.button--primary::before {
  content: "";
  display: inline-block;
  margin: 2px 8px 0 0;
  position: relative;
  left: 0;
  transition: all 100ms;
}
.button--primary:focus, .button--primary:hover {
  border-radius: 3px;
  border: 1px solid #5cc9ff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.16);
}
.button--primary:focus::before, .button--primary:hover::before {
  left: 2px;
}
.button--primary-nav {
  padding: 7px 12px;
  border-radius: 3px;
  background-color: #fff;
  background-image: linear-gradient(to top, rgba(194, 235, 255, 0.4), rgba(215, 235, 245, 0.4));
  color: #2e3a3d;
  text-align: center;
  font-size: 0.75rem;
  line-height: 1.4;
  text-transform: uppercase;
}
@media screen and (min-width: 1024px) {
  .button--primary-nav {
    padding: 7px 24px;
    border-radius: 16px;
    font-size: 0.8125rem;
    line-height: 1.4;
  }
}
@media screen and (min-width: 1280px) {
  .button--primary-nav {
    font-size: 0.9375rem;
  }
}
.button--primary-nav:focus:not(.is-active), .button--primary-nav:hover:not(.is-active) {
  border-radius: 3px;
  background-image: linear-gradient(to top, #c2ebff, #c2ebff);
}
.button--primary-nav.is-active {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  background: #245066 url("../images/bg/min/icn-ripple.svg") repeat-x 0 100%;
  color: #fff;
}
@media screen and (min-width: 768px) {
  .button--primary-nav.is-active {
    height: 2.25rem;
  }
}
.button--expand-carousel {
  height: 1.75rem;
  font-size: 0.75rem;
  background-color: #f3fbff;
  border: 1px solid #5cc9ff;
  border-radius: 14px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.16);
  padding: 4px 0;
  /**
   * 1. For some reason Safari won't vertically center this icon
   *    so we need to help it a little bit :-S
   */
}
.button--expand-carousel::after {
  content: "";
  display: inline-block;
  margin: 0 7px;
  /* 1 */
}
.is-safari .button--expand-carousel::after {
  margin-top: 1px;
}
.button--expand-carousel .button__expand-label {
  margin: 0 8px 0 0;
  display: inline-flex;
  align-items: center;
}
.button--expand-carousel .button__expand-label::before {
  content: "";
  display: inline-block;
  margin: 0 8.5px 0 9px;
}
.button--large {
  font-size: 1.25rem;
}
@media screen and (min-width: 768px) {
  .button--large {
    font-size: 1.3125rem;
  }
}

.carousel {
  position: relative;
  margin-bottom: 32px;
  /**
   * 1. Make sure component clears other floated elements
   *    (including instances of itself)
   */
}
@media screen and (min-width: 768px) {
  .carousel {
    margin-left: 32px;
    max-width: 224px;
    float: right;
    transition: max-width 250ms ease;
    clear: right; /* 1 */
  }
}
.carousel__list img {
  width: 100%;
}
.carousel__item {
  display: none;
  line-height: 0;
  /**
   * 1. Slick calculations is sometimes of, cutting of the
   *    bottom border of the caption, this extra margin prevents
   *    this from happening.
   */
}
.carousel__item:first-child {
  display: block;
}
.carousel__item-caption {
  background: linear-gradient(rgba(194, 235, 255, 0.16), rgba(194, 235, 255, 0.16)), linear-gradient(#fff, #fff);
  border: 1px solid #5cc9ff;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  padding: 16px 24px;
  font-size: 0.75rem;
  line-height: 1.43;
  letter-spacing: 0.2px;
  color: #2e3a3d;
  margin-bottom: 1px; /* 1 */
}
@media screen and (min-width: 768px) {
  .carousel__item-caption {
    display: none;
  }
}
.carousel__item-caption > *:last-child {
  margin-bottom: 0;
}
.carousel .icn-button--next,
.carousel .icn-button--prev {
  display: none;
}
.carousel .icn-button--close {
  display: none;
  position: absolute;
  top: -10px;
  right: -8px;
}
@media screen and (min-width: 768px) {
  .carousel .button--expand-carousel {
    position: absolute;
    top: -10px;
    right: -8px;
  }
}
@media screen and (min-width: 768px) {
  .carousel.is-open {
    max-width: 100%;
    margin-left: 0;
  }
  .carousel.is-open .carousel__item-caption {
    display: block;
  }
  .carousel.is-open .icn-button--close {
    display: inline-flex;
  }
}
.carousel.is-open .button--expand-carousel {
  display: none;
}
@media screen and (min-width: 1024px) {
  .carousel.is-running .icn-button--next,
  .carousel.is-running .icn-button--prev {
    display: block;
  }
}

.slick-initialized .carousel__item {
  display: block;
}
.slick-initialized .carousel__item-caption {
  display: block;
}

/*------------------------------------*/
/*  #CONTEXT-MENU
/*------------------------------------*/
/**
 * Secondary page navigation that collapses and sticks to the top on mobile
 */
.context-menu {
  border: 1px solid #c2ebff;
  border-radius: 3px;
  background: #fff;
  overflow: hidden;
}
.context-menu * {
  transition: all 100ms;
}
.context-menu__header, .context-menu__body, .context-menu__footer {
  padding: 12px 16px;
}
@media screen and (min-width: 768px) {
  .context-menu__header, .context-menu__body, .context-menu__footer {
    padding: 16px 24px;
  }
}
@media screen and (min-width: 1280px) {
  .context-menu__header, .context-menu__body, .context-menu__footer {
    padding: 16px 32px;
  }
}
.context-menu__header {
  border-bottom: 1px solid #c2ebff;
  transition: all 250ms;
}
.context-menu__header > *:last-child {
  margin-bottom: 0;
}
.is-collapsed .context-menu__header {
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
  border: 0;
  opacity: 0;
  height: 0 !important;
}
.context-menu__heading {
  font-size: 1.125rem;
}
@media screen and (min-width: 768px) {
  .context-menu__heading {
    font-size: 1.1875rem;
  }
}
.context-menu__heading a {
  text-decoration: none;
}
.context-menu__heading a:focus, .context-menu__heading a:hover {
  text-decoration: underline;
}
.context-menu__sub-heading {
  margin-bottom: 8px;
}
.context-menu__body {
  position: relative;
  transition: all 250ms;
}
@media screen and (max-width: 767px) {
  .context-menu__body:not(.is-visible) {
    padding-top: 0;
    padding-bottom: 0;
  }
}
@media screen and (min-width: 768px) {
  .context-menu__body:not(.is-visible) li.is-active {
    background-color: #c2ebff;
    box-shadow: 0 0 0 100vmax #c2ebff;
    -webkit-clip-path: inset(-4px -100vmax);
            clip-path: inset(-4px -100vmax);
  }
}
@media screen and (max-width: 767px) {
  .context-menu__body:not(.is-visible) li.is-active {
    margin: 5px 0;
  }
}
@media screen and (max-width: 767px) {
  .context-menu__body:not(.is-visible) li:not(.is-active) {
    display: none;
    overflow: hidden;
    height: 0;
    min-height: 0;
    margin: 0;
  }
}
.context-menu__toggle {
  position: absolute;
  z-index: 1;
  top: -6px;
  right: 0;
  padding: 0 16px;
}
@media screen and (min-width: 768px) {
  .context-menu__toggle {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  *:not(.is-visible) + .context-menu__footer {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  .context-menu.is-fixed {
    position: fixed;
    top: 0;
    left: 10px;
    right: 10px;
  }
}
.context-menu.is-sticky, .context-menu.is-fixed {
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.08);
}

/*------------------------------------*/
/*  #COURSE-OVERVIEW
/*------------------------------------*/
/**
 * Styles for the course overview.
 * This component is mainly built by other compontent (wave component and grid),
 * so the following styles are only meant to supplement.
 */
.course-overview__header {
  margin-bottom: 16px;
  margin-top: 60px;
}
.course-overview__heading {
  margin-bottom: 12px;
}
@media screen and (min-width: 768px) {
  .course-overview__heading {
    margin-bottom: 20px;
    text-align: center;
  }
}
.course-overview__lead {
  margin-left: auto;
  margin-right: auto;
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .course-overview {
    padding: 0 32px; /* 32px */
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .course-overview__section {
    display: flex;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .course-overview__section-element:first-child {
    margin-right: 64px; /* 64px */
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  nav.course-overview__section-element {
    min-width: 256px; /* 256px */
    width: 256px; /* 256px */
  }
}

.course-overview--stacked .course-overview__section {
  display: block;
  margin-top: 32px;
}
.course-overview--stacked .list--border-wave > li:not(:last-child) > .course-overview__section {
  margin-bottom: 24px;
}
@media screen and (min-width: 768px) {
  .course-overview--stacked .course-overview__section-heading {
    margin-bottom: 12px;
  }
}
.course-overview--stacked .course-overview__section-list {
  margin-bottom: 24px;
}
.course-overview--stacked .course-overview__section-list:last-child {
  margin-bottom: 0;
}
@media screen and (min-width: 768px) {
  .course-overview--stacked .course-overview__section-list {
    margin-bottom: 0;
  }
}

/*------------------------------------*\
    #EMBED-BLOCK
\*------------------------------------*/
/**
 * Block that holds social media posts and feeds from Instagram and Twitter, also embeded video
 */
.embed-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 24px;
}
.embed-block--video {
  position: relative;
  height: 0;
  padding-bottom: 56.25%;
}
.embed-block--video > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.embed-block--video .cookieconsent-optout-marketing {
  background-color: #e2e8eb;
  height: 100%;
  padding-block: 25%;
  padding-inline: 24px;
  text-align: center;
  width: 100%;
}
.embed-block--video .cookieconsent-optout-marketing a {
  color: #245066;
}
.embed-block > * {
  width: 100%;
}
.embed-block > *:last-child {
  margin-bottom: 0;
}

/*------------------------------------*/
/*  #EVENT-LIST
/*------------------------------------*/
/**
 * A list of events
 */
.event-list li {
  margin-bottom: 32px;
}
.event-list__date-title {
  font-size: 0.75rem;
  font-family: "Lato", sans-serif;
  line-height: 1.43;
  text-transform: uppercase;
}
.event-list__date-title time {
  display: inline-block;
  padding: 4px 16px;
  border: 1px solid #c2ebff;
  border-radius: 16px;
  color: #2e3a3d;
}
@media screen and (min-width: 768px) {
  .event-list__date-title {
    font-size: 0.875rem;
    line-height: 1.5;
  }
}

/*------------------------------------*/
/*  #EVENT
/*------------------------------------*/
/**
 * A single event element
 */
.event {
  /**
   * ATTN! .highligted is used to style the frame of this component
   */
}
.event__description {
  margin-bottom: 12px;
}
.event__description > *:last-child {
  margin-bottom: 0;
}
.event__location {
  position: relative;
  padding-left: 20px;
  margin: 16px 0 0;
  color: #245066;
  font-size: 1.125rem;
}
@media screen and (min-width: 768px) {
  .event__location {
    font-size: 1.1875rem;
  }
}
.event__location::before {
  content: "";
  display: inline-block;
  position: absolute;
  left: 0;
  top: 4px;
}

/*------------------------------------*\
    #FEATURED-BLOCK
\*------------------------------------*/
/**
 * A block containing an image and a content area.
 * On larger screens the image can be placed either left or right
 * relative to the content area
 */
.featured-block {
  margin-bottom: 40px;
}
@media screen and (min-width: 1024px) {
  .featured-block {
    display: flex;
    align-items: center;
  }
}
@media screen and (min-width: 1024px) {
  .featured-block__img-wrapper {
    width: 80%;
    margin-right: -265px;
  }
}
.featured-block__img {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 0;
  padding-bottom: 35.7333333333%;
  background: #def3fd;
}
.featured-block__img img {
  position: absolute;
  bottom: 0;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@supports ((-o-object-fit: cover) or (object-fit: cover)) {
  .featured-block__img img {
    height: 100%;
  }
}
@media screen and (min-width: 768px) {
  .featured-block__content {
    margin-top: -24px;
    padding: 0 24px;
  }
}
@media screen and (min-width: 1024px) {
  .featured-block__content {
    margin: 0;
    padding: 0;
    min-width: 544px;
    width: 544px;
  }
}
.featured-block--img-right {
  /**
   * 1. Ensures that element stays on top of image
   */
}
@media screen and (min-width: 1024px) {
  .featured-block--img-right .featured-block__img-wrapper {
    width: 80%;
    margin-right: 0;
    margin-left: -265px;
  }
}
@media screen and (min-width: 1024px) {
  .featured-block--img-right .featured-block__content {
    order: -1;
    z-index: 1; /* 1 */
  }
}
@media screen and (max-width: 767px) {
  .l-container .featured-block {
    margin-left: -10px;
    margin-right: -10px;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1279px) {
  .l-container .featured-block {
    margin-left: -48px;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1279px) {
  .l-container .featured-block--img-right {
    margin-left: 0;
    margin-right: -48px;
  }
}

/*------------------------------------*\
    #FEATURED-IMG
\*------------------------------------*/
/**
 * Featured image used on information pages.
 * There can only be 1 featured image per page.
 */
.featured-img {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 0;
  padding-bottom: 35.7142857143%;
  background: #def3fd;
  margin-bottom: 24px;
}
.featured-img img {
  position: absolute;
  bottom: 0;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@supports ((-o-object-fit: cover) or (object-fit: cover)) {
  .featured-img img {
    height: 100%;
  }
}
@media screen and (min-width: 768px) {
  .featured-img {
    margin-bottom: 40px;
  }
}
.featured-img::after {
  /**
   * (1) Fix for iOS Safari <= 8.X which injects a pixel gap between each tiled
   *     SVG image😡
   */
}
@media screen and (min-width: 768px) {
  .featured-img::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 20px;
    width: 100%;
    background-image: url("../images/bg/min/wave-white.svg"), linear-gradient(to top, #fbfbfb 10px, transparent 10px);
    background-position: center, bottom;
    background-repeat: repeat-x;
  }
}

/*------------------------------------*/
/*  #FOOTER
/*------------------------------------*/
/**
 * Styling of the global footer containing footer-nav
 */
.footer {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  padding: 24px 0 40px;
  margin-top: 128px;
  color: #fff;
  background-image: linear-gradient(to bottom, #515f66, #2e3a3d);
  font-size: 1.0625rem;
  /**
   * 1. Adjust general link color for darker bg
   * 2. Since we want the underline to be a different color than
   *    the text, we use a background image instead of text decoration.
   */
}
@keyframes animatedBackgroundWave {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 80px 0;
  }
}
@keyframes animatedForegroundWave {
  0% {
    background-position: 10px 0;
  }
  100% {
    background-position: -70px 0;
  }
}
.footer::before, .footer::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 20px;
  background-size: 80px 20px;
  background-repeat: repeat-x;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-duration: 10s;
}
@media (prefers-reduced-motion) {
  .footer::before, .footer::after {
    animation-duration: 0s !important;
  }
}
.footer::before {
  top: -24px;
  background-image: url("../images/bg/min/wave-blue-darker.svg");
  background-position: 0 0;
  animation-name: animatedBackgroundWave;
}
.footer::after {
  top: -20px;
  background-image: url("../images/bg/min/wave-dark.svg"), linear-gradient(to top, #515f66 10px, transparent 10px);
  background-position: 50% 0;
  animation-name: animatedForegroundWave;
}
.footer__link {
  color: #c2ebff; /* 1 */
  text-decoration: none; /* 2 */
  background: linear-gradient(#fff, #fff) no-repeat; /* 2 */
  background-size: 100% 1px; /* 2 */
  background-position: 0 1.2em; /* 2 */
}
.footer__nav-list, .footer__nav-list ul {
  list-style: none;
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer__nav-list {
  padding: 0 24px; /* 24px */
}
@media screen and (max-width: 767px) {
  .footer__nav-list {
    flex-direction: column;
  }
}
@media screen and (min-width: 768px) {
  .footer__nav-list {
    padding: 0 16px; /* 16px */
  }
}
@media screen and (max-width: 767px) {
  .footer__nav-list > *:first-child {
    margin-bottom: 48px; /* 48px */
  }
}
@media screen and (max-width: 1023px) {
  .footer__nav-list ul li:not(:last-child) {
    margin-right: 16px;
  }
}
.footer__nav-list > li {
  width: 100%;
  /**
   * Last child takes the width of content, slightly hacky :S
   */
}
@media screen and (min-width: 768px) {
  .footer__nav-list > li {
    max-width: 480px;
  }
}
.footer__nav-list > li:last-child {
  width: auto;
}

/*------------------------------------*/
/*  #FULL-WIDTH-SEARCH
/*------------------------------------*/
/**
 * A search input area that occupies 100% of available width
 */
.full-width-search {
  padding: 16px 0 12px;
  border-bottom: 1px solid #c2ebff;
  background-image: linear-gradient(to bottom, #fbfbfb, #fff);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.08);
  transition: all 250ms;
  /**
    * 1. Additional padding so that the icon lines up with the close search
    *    icon
    */
}
@media screen and (min-width: 768px) {
  .full-width-search {
    border-top: 1px solid #c2ebff;
  }
}
.full-width-search .l-container {
  position: relative;
}
.full-width-search--hidden {
  height: 0;
  padding: 0;
  opacity: 0;
  display: none;
}
.full-width-search.is-visible {
  opacity: 1;
  height: auto;
  padding: 11.5px 0;
  margin: 0;
  visibility: visible;
  display: block;
}
@media screen and (min-width: 768px) {
  .full-width-search.is-visible {
    margin: 10px 0 0;
  }
}
.full-width-search.is-visible input {
  padding-right: 35px;
}
@media screen and (min-width: 768px) {
  .full-width-search.is-visible input {
    padding-left: 0;
    padding-right: 45px;
  }
}
.full-width-search .icn-button {
  position: absolute;
  top: 50%;
  right: 26px;
  padding: 0;
  transform: translateY(-50%);
}
@media screen and (min-width: 768px) {
  .full-width-search .icn-button {
    right: 22px; /* 1 */
  }
}
@media screen and (min-width: 1024px) {
  .full-width-search .icn-button {
    right: 54px; /* 1 */
  }
}

/*------------------------------------*/
/*  #HEADER
/*------------------------------------*/
/**
 * Styling of the global header containing primary-nav and search
 */
.header {
  padding: 24px 0 0;
  margin-bottom: 16px;
}
@media screen and (min-width: 768px) {
  .header {
    margin-bottom: 24px;
  }
}
.header__inner {
  position: relative;
}
@media screen and (min-width: 768px) {
  .header__inner {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
  }
}
.header__controls {
  display: none;
}
@media screen and (min-width: 768px) {
  .header__controls {
    display: flex;
  }
}
@media screen and (max-width: 767px) {
  .header__logo {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
  }
}
.header__search {
  position: absolute;
  top: 0;
  right: 0;
  /**
   * If the search is open hide the close button on mobile
   */
}
@media screen and (min-width: 768px) {
  .header__search {
    position: static;
  }
}
@media screen and (max-width: 767px) {
  .header__search .icn-button.is-active {
    display: none;
  }
}

/*------------------------------------*/
/*  #HEADING
/*------------------------------------*/
/**
 * Various heading styles
 */
.heading--centered {
  text-align: center;
}

/*------------------------------------*/
/*  #HERO
/*------------------------------------*/
/**
 * The hero is a highlighted section with a large background picture and text
 */
.hero {
  padding-bottom: 56px;
  background-image: url("../images/bg/min/hero-home.jpg");
  background-position: top;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-color: #2D4A80;
  max-width: 1280px;
  margin: 0 auto;
  /**
   * Reusing the hero pattern for the image used on the 404-page.
   * This changes the background image, and does not have text content on top
   * of the image.
   */
}
.hero::before {
  content: "";
  display: block;
  width: 100%;
  height: 0;
  padding-top: 32%;
}
.hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.hero__content p:last-of-type {
  margin-bottom: 20px; /* 20px */
}
.hero__content p:last-child {
  margin-bottom: 0;
}
.hero__content > *:last-child {
  margin-bottom: 0;
}
.hero__content--light,
.hero__content--light p {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #fff;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}
.hero__content--light a {
  text-shadow: none;
}
.hero--404 {
  background-image: url("../images/bg/min/side-ikke-funnet.jpg");
  margin-bottom: 32px;
  padding: 0;
}
.hero--404::before {
  padding-top: 43.75%;
}

/*------------------------------------*/
/*  #HIGHLIGHTED
/*------------------------------------*/
/**
 * A highlighted element is a content area that breaks out of the regular flow
 * of content for instance by changing background color, border, shadow, size,
 * shape and/or size
 */
.highlighted {
  position: relative;
  margin: 0 0 24px;
}
.highlighted > *:last-child {
  margin-bottom: 0;
}
@media screen and (min-width: 768px) {
  .highlighted {
    border-radius: 3px;
  }
}
.highlighted__inner {
  padding: 16px 10px 24px;
}
.highlighted__inner > *:last-child {
  margin-bottom: 0;
}
@media screen and (min-width: 768px) {
  .highlighted__inner {
    padding: 16px 16px 24px;
  }
}
@media screen and (min-width: 1024px) {
  .highlighted__inner {
    padding: 16px 24px 24px;
  }
}
.highlighted__inner p:last-of-type {
  margin-bottom: 20px; /* 20px */
}
.highlighted__inner p:last-child {
  margin-bottom: 0;
}
.highlighted__inner--equal-padding {
  padding: 24px 10px;
}
@media screen and (min-width: 768px) {
  .highlighted__inner--equal-padding {
    padding: 16px 16px;
  }
}
@media screen and (min-width: 1024px) {
  .highlighted__inner--equal-padding {
    padding: 16px 24px;
  }
}
.l-container .highlighted {
  margin: 0 -10px 24px;
}
@media screen and (min-width: 768px) {
  .l-container .highlighted {
    margin: 0 -16px 24px;
  }
}
@media screen and (min-width: 1024px) {
  .l-container .highlighted {
    margin: 0 -24px 24px;
  }
}
@media screen and (min-width: 1024px) {
  .l-container--full-width\@l-up .highlighted {
    margin-left: 0;
    margin-right: 0;
  }
}
.highlighted--reset-margins {
  margin: 0;
}
.highlighted--card {
  background: #fff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid #c2ebff;
}
.highlighted--list-item {
  margin-bottom: 12px;
}

/*------------------------------------*/
/*  #HORIZONTAL-RULE
/*------------------------------------*/
/**
 * Different horizontal rule styles
 */
.hr, .editor-styles hr {
  border: none;
  margin: 24px 0;
}
.hr--wave, .editor-styles hr {
  height: 11px;
  background-image: url("../images/bg/min/wavearator-blue.svg");
  background-position: center;
  background-repeat: repeat-x;
}
.hr--full-width {
  height: 64px;
  margin: 16px 0 48px; /* 16px 0 48px */
  background-image: linear-gradient(to bottom, #fbfbfb, #fff);
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid #c2ebff;
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/*------------------------------------*/
/*  #BUTTON
/*------------------------------------*/
/**
 * Buttons without visible text only containing graphics
 */
.icn-button {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  transition: all 250ms;
}
.icn-button__label {
  font-size: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
}
.icn-button--logo {
  display: block;
}
@media screen and (max-width: 767px) {
  .icn-button--logo {
    background-size: 585px 330px;
    background-position: -338px -193px;
    width: 117px;
    height: 68px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .icn-button--logo {
    background-size: 640px 361px;
    background-position: -370px -211px;
    width: 128px;
    height: 74px;
  }
}
.icn-button--logo-mhfa {
  display: block;
}
.icn-button--open-search {
  width: 48px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff url("../images/bg/min/icn-search.svg") no-repeat center;
  border-radius: 18px;
  border: 1px solid #c2ebff;
  transition: background-color 250ms;
}
@media screen and (min-width: 1024px) {
  .icn-button--open-search {
    width: 48px;
    height: 34px;
  }
}
.icn-button--open-search:hover, .icn-button--open-search:focus {
  border-color: transparent;
  background: #245066 url("../images/bg/min/icn-search-white.svg") no-repeat center;
}
.icn-button--open-search.is-active, .icn-button--open-search.is-active:focus, .icn-button--open-search.is-active:hover {
  width: 48px;
  height: 36px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  z-index: 0;
  position: relative;
  overflow: hidden;
  padding-bottom: 16px;
  border: none;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  background: url("../images/bg/min/icn-search-active.svg") no-repeat center, url("../images/bg/min/icn-ripple.svg") repeat-x 0 100%;
  background-color: #245066;
}
.icn-button--menu-toggle {
  position: relative;
  background: transparent;
  height: 100%;
  display: block;
}
.icn-button--menu-toggle::before, .icn-button--menu-toggle::after {
  content: "";
  display: inline-block;
  transition: all 250ms;
}
.icn-button--menu-toggle::before {
  position: relative;
  top: 0;
  transform: rotate(180deg);
  margin-bottom: -5px;
}
.is-visible .icn-button--menu-toggle::before {
  transform: rotate(180deg) scale(1.25);
  top: 12px;
}
.is-visible .icn-button--menu-toggle::after {
  opacity: 0;
  height: 0;
}
.icn-button--search-2 {
  background: transparent;
}
.icn-button--search-2 .button__label {
  display: none;
}
@media screen and (min-width: 768px) {
  .icn-button--search-2 .button_icon {
    background-size: 1529px 863px;
    background-position: -726px -364px;
    width: 36px;
    height: 36px;
  }
}
@media screen and (min-width: 768px) {
  input.has-content + .icn-button--search-2 .button_icon {
    background-size: 1529px 863px;
    background-position: -762px -400px;
    width: 36px;
    height: 36px;
  }
}
.icn-button--prev, .icn-button--next, .icn-button--close {
  position: relative;
  width: 28px;
  height: 28px;
  border: 1px solid #5cc9ff;
  background-color: #f3fbff;
  border-radius: 50%;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.16);
}
.icn-button--prev::after, .icn-button--next::after {
  content: "";
  position: absolute;
  background-size: 956px 539px;
  background-position: -16px -16px;
  width: 18px;
  height: 11px;
  transform: rotate(90deg);
}
.icn-button--prev:disabled::after, .icn-button--prev.slick-disabled::after, .icn-button--next:disabled::after, .icn-button--next.slick-disabled::after {
  background-size: 956px 539px;
  background-position: -34px -27px;
  width: 18px;
  height: 11px;
}
.icn-button--prev::after {
  left: 3px;
  top: 8px;
  transform: rotate(90deg);
}
.icn-button--next::after {
  left: 5px;
  top: 8px;
  transform: rotate(-90deg);
}
.icn-button--close::after {
  content: "";
  display: inline-block;
  border-color: #fff;
  transform: rotate(45deg);
}

/*------------------------------------*/
/*  #INFO-BOX
/*------------------------------------*/
/**
 * Block element for suplementary information
 */
/**
 * 1. Required to make the element wrap floated elements
 */
.info-box {
  display: flex; /* 1 */
  flex-direction: column; /* 1 */
  padding: 12px 16px;
  border: 1px solid #5cc9ff;
  border-radius: 3px;
  background: #F5FCFF;
  margin: 16px 0 24px;
}
.info-box > *:last-child {
  margin-bottom: 0;
}
@media screen and (min-width: 768px) {
  .info-box {
    padding: 16px 24px;
  }
}
.info-box:first-child {
  margin-top: 0;
}

/* Fix for screenreaders (VoiceOver) for <p>-tags. It was not happy with a <p>-tag being a flex-container. */
p.info-box {
  display: block;
  flex-direction: initial;
}

/*------------------------------------*/
/*  #INPUT
/*------------------------------------*/
/**
 * Various input styles
 */
.input--large {
  font-size: 1.125rem;
}
@media screen and (min-width: 768px) {
  .input--large {
    font-size: 21px;
  }
}
.input--search, .input--search:focus {
  font-size: 1.125rem;
  background: transparent;
}
@media screen and (min-width: 768px) {
  .input--search, .input--search:focus {
    font-size: 2.5rem;
    letter-spacing: 0.2px;
    border: none;
    box-shadow: none;
  }
  .input--search::-webkit-input-placeholder, .input--search:focus::-webkit-input-placeholder {
    color: rgba(82, 95, 102, 0.4);
    font-family: inherit;
    font-size: 2.5rem;
    font-weight: inherit;
    font-style: italic;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .input--search:-moz-placeholder, .input--search:focus:-moz-placeholder {
    color: rgba(82, 95, 102, 0.4);
    font-family: inherit;
    font-size: 2.5rem;
    font-weight: inherit;
    font-style: italic;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .input--search::-moz-placeholder, .input--search:focus::-moz-placeholder {
    color: rgba(82, 95, 102, 0.4);
    font-family: inherit;
    font-size: 2.5rem;
    font-weight: inherit;
    font-style: italic;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .input--search:-ms-input-placeholder, .input--search:focus:-ms-input-placeholder {
    color: rgba(82, 95, 102, 0.4);
    font-family: inherit;
    font-size: 2.5rem;
    font-weight: inherit;
    font-style: italic;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}
.input--block {
  display: block;
  width: 100%;
}

/*------------------------------------*/
/*  #LABEL
/*------------------------------------*/
/**
 * Various label styles
 */
.label--hidden {
  font-size: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
}

/*------------------------------------*/
/*  #LEAD
/*------------------------------------*/
/**
 * Styling for lead paragraph
 */
.lead {
  max-width: 800px;
  margin-bottom: 32px;
  color: #245066;
  font-size: 1.125rem;
  line-height: 1.44;
}
@media screen and (min-width: 768px) {
  .lead {
    font-size: 1.1875rem;
    line-height: 1.32;
  }
}

/*------------------------------------*/
/*  #LINK
/*------------------------------------*/
/**
 * Various link styles
 */
.link {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  transition: all 250ms;
  /**
   * 1. Since we want the underline to be a different color than
   *    the text, we use a background image instead of text decoration.
   * 2. Position x-coordinate has to take into consideration the width
   *    of the icon we're using as a :before-element inside the element.
   */
}
.link--arrow::before, .link--arrow-inverted::before {
  content: "";
  display: inline-block;
  margin: 0 12px 0 0;
  position: relative;
  left: 0;
  transition: all 250ms;
}
.link--arrow:focus::before, .link--arrow-inverted:focus::before, .link--arrow:hover::before, .link--arrow-inverted:hover::before {
  left: 3px;
}
.link--arrow-inverted {
  color: #c2ebff;
  text-decoration: none; /* 1 */
  background: linear-gradient(#fff, #fff) no-repeat; /* 1 */
  background-size: 100% 1px; /* 1 */
  background-position: 26px 1.25em; /* 2 */
}
.link--arrow-inverted::before {
  content: "";
  display: inline-block;
  margin: 0 12px 0 0;
}
.link--previous, .link--next {
  text-decoration: none;
  color: #245066;
  font-size: 1.125rem;
}
@media screen and (min-width: 768px) {
  .link--previous, .link--next {
    font-size: 1.1875rem;
  }
}
.link--previous:focus, .link--previous:hover, .link--next:focus, .link--next:hover {
  text-decoration: underline;
}
.link--previous::before {
  content: "";
  display: inline-block;
  margin: 0 12px 0 0;
  transform: rotate(180deg);
  position: relative;
  left: 0;
  transition: all 250ms;
}
.link--previous:focus::before, .link--previous:hover::before {
  left: -3px;
}
.link--next::after {
  content: "";
  display: inline-block;
  margin: 0 0 0 12px;
  position: relative;
  left: 0;
  transition: all 250ms;
}
.link--next:focus::after, .link--next:hover::after {
  left: 3px;
}

/*------------------------------------*/
/*  #LIST
/*------------------------------------*/
/**
 * Decorated list styles
 */
.list, .editor-styles > ol, .editor-styles > ul {
  list-style: none;
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
}
.list--border-wave {
  /**
   * Remove border from second last li in 2-col inline list if number of items
   * is an even number, except for mobile, where the list is stacked
   */
}
.list--border-wave > li:not(:last-child) {
  display: flex;
  flex-direction: column;
}
.list--border-wave > li:not(:last-child)::after {
  content: "";
  display: block;
  margin-top: auto;
  height: 11px;
  background-image: url("../images/bg/min/wavearator-blue.svg");
  background-position: center;
  background-repeat: repeat-x;
}
.list--border-wave > li:not(:last-child) > *:last-child {
  margin-bottom: 32px;
}
.list--border-wave.list--border-wave-white > li::after {
  background-image: url("../images/bg/min/wavearator-white.svg");
}
@media screen and (min-width: 1024px) {
  .list--border-wave.o-list-inline--2col\@l-up li:nth-last-child(2):nth-child(odd) > *:last-child {
    margin-bottom: 0;
  }
}
@media screen and (min-width: 1024px) {
  .list--border-wave.o-list-inline--2col\@l-up li:nth-last-child(2):nth-child(odd)::after {
    display: none;
  }
}
.list--border-wave.o-list li > *:last-child {
  margin-bottom: 24px;
}
.list--unordered, .editor-styles > ul, .editor-styles > ul ol ul, .list--ordered ul, .editor-styles > ol ul, .list--unordered ol ul, .list--ordered, .editor-styles > ol, .editor-styles > ol ul ol, .list--unordered ol, .editor-styles > ul ol, .list--ordered ul ol, .list--unordered ol ul ol, .list--link-collection {
  margin-bottom: 24px;
}
.list--unordered > *:last-child, .editor-styles > ul > *:last-child, .editor-styles > ul ol ul > *:last-child, .editor-styles > ul ol ul ol ul > *:last-child, .list--ordered ul > *:last-child, .editor-styles > ol ul > *:last-child, .editor-styles > ol ul ol ul > *:last-child, .list--unordered ol ul > *:last-child, .editor-styles > ul ol ul ol ul ol ul > *:last-child, .list--ordered ul ol ul > *:last-child, .editor-styles > ol ul ol ul ol ul > *:last-child, .list--unordered ol ul ol ul > *:last-child, .editor-styles > ul ol ul ol ul ol ul ol ul > *:last-child, .list--ordered > *:last-child, .editor-styles > ol > *:last-child, .editor-styles > ol ul ol > *:last-child, .list--unordered ol > *:last-child, .editor-styles > ul ol > *:last-child, .editor-styles > ul ol ul ol > *:last-child, .editor-styles > ul ol ul ol ul ol > *:last-child, .list--ordered ul ol > *:last-child, .editor-styles > ol ul ol ul ol > *:last-child, .list--unordered ol ul ol > *:last-child, .editor-styles > ul ol ul ol ul ol ul ol > *:last-child, .list--ordered ul ol ul ol > *:last-child, .editor-styles > ol ul ol ul ol ul ol > *:last-child, .list--unordered ol ul ol ul ol > *:last-child, .editor-styles > ul ol ul ol ul ol ul ol ul ol > *:last-child, .list--link-collection > *:last-child {
  margin-bottom: 0;
}
.list--unordered li, .editor-styles > ul li, .list--ordered li, .editor-styles > ol li, .list--unordered ol li, .list--link-collection li {
  position: relative;
  padding: 0 0 0 1.6470588235em;
  margin-bottom: 12px;
}
.list--unordered li::before, .editor-styles > ul li::before, .list--ordered li::before, .editor-styles > ol li::before, .list--link-collection li::before {
  position: absolute;
  left: 0;
}
.list--unordered ul, .editor-styles > ul ul,
.list--unordered ol,
.editor-styles > ul ol, .list--ordered ul, .editor-styles > ol ul, .list--unordered ol ul,
.list--ordered ol,
.editor-styles > ol ol,
.list--unordered ol ol, .list--link-collection ul,
.list--link-collection ol {
  padding-left: 0;
  margin-bottom: 0;
}
.list--unordered ul li, .editor-styles > ul ul li,
.list--unordered ol li,
.editor-styles > ul ol li, .list--ordered ul li, .editor-styles > ol ul li,
.list--ordered ol li,
.editor-styles > ol ol li, .list--link-collection ul li,
.list--link-collection ol li {
  list-style: none;
}
.list--unordered p + ul, .editor-styles > ul p + ul, .list--unordered p + ol, .editor-styles > ul p + ol, .list--ordered p + ul, .editor-styles > ol p + ul, .list--ordered p + ol, .editor-styles > ol p + ol, .list--link-collection p + ul, .list--link-collection p + ol {
  margin-top: -12px;
}
.list--unordered li::before, .editor-styles > ul li::before, .list--ordered ul li::before, .editor-styles > ol ul li::before {
  content: "";
  display: inline-block;
  top: 0.35em;
}
.list--unordered ol, .editor-styles > ul ol, .list--ordered ul ol, .editor-styles > ol ul ol, .list--unordered ol ul ol {
  /**
   *  1. Top adjustment for ordered list items
   *  2. Make sure that nested ordered list items do not get default
   *     unordered list styling.
   */
}
.list--unordered ol li::before, .editor-styles > ul ol li::before, .list--ordered ul ol li::before, .editor-styles > ol ul ol li::before {
  top: 0.05em; /* 1 */
  background: none; /* 2 */
}
.list--ordered, .editor-styles > ol, .editor-styles > ol ul ol, .list--unordered ol, .editor-styles > ul ol, .list--ordered ul ol, .list--unordered ol ul ol {
  counter-reset: list-counter;
}
.list--ordered li::before, .editor-styles > ol li::before, .list--unordered ol li::before, .editor-styles > ul ol li::before {
  top: 0.05em;
  content: counter(list-counter) ".";
  counter-increment: list-counter;
  font-family: "Arvo", sans-serif;
}
.list--ordered ul, .editor-styles > ol ul, .list--unordered ol ul, .editor-styles > ul ol ul {
  /**
   *  1. Use a bogus counter so that the list items don't affect the parent's
   *     ordered list items.
   */
  /* 1 */
}
.list--ordered ul li::before, .editor-styles > ol ul li::before, .list--unordered ol ul li::before, .editor-styles > ul ol ul li::before {
  counter-increment: non-counter;
}
.list--ordered ol, .editor-styles > ol ol, .list--unordered ol ol, .editor-styles > ul ol ol {
  counter-reset: child-counter;
}
.list--ordered ol li::before, .editor-styles > ol ol li::before, .list--unordered ol ol li::before, .editor-styles > ul ol ol li::before {
  content: counter(child-counter) ".";
  counter-increment: child-counter;
}
.list--link-collection {
  font-size: 1.125rem;
}
@media screen and (min-width: 768px) {
  .list--link-collection {
    font-size: 1.1875rem;
  }
}
.list--link-collection li::before {
  content: "";
  display: inline-block;
  top: 0.35em;
}
.list--link-collection li a {
  position: relative;
  display: inline-block;
  color: #245066;
  text-decoration: none;
  padding-bottom: 1px;
  transition: all 250ms;
}
.list--link-collection li a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: #5cc9ff;
  transition: all 500ms;
}
.list--link-collection li a:focus, .list--link-collection li a:hover {
  color: #387c9f;
}
.list--link-collection li a:focus::after, .list--link-collection li a:hover::after {
  background: #10b0ff;
}

.mobile-nav {
  position: relative;
}
@media screen and (min-width: 768px) {
  .mobile-nav {
    display: none;
  }
}
.mobile-nav__header {
  position: relative;
  color: #2e3a3d;
  text-decoration: none;
  font-size: 1.125rem;
  line-height: 1.5rem;
  display: block;
  border-radius: 2em;
  border: 1px solid #c2ebff;
  background-color: #d7ebf5;
  padding: 6px 24px;
  -webkit-tap-highlight-color: transparent;
  transition: all 250ms ease;
}
.mobile-nav__header::before {
  content: attr(data-title-minimized);
}
.is-visible .mobile-nav__header {
  border-radius: 0;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  background-color: #c2ebff;
}
.is-visible .mobile-nav__header::before {
  content: attr(data-title-expanded);
}
.mobile-nav__hamburger {
  position: absolute;
  right: 24px;
  width: 24px;
  height: 2px;
  top: 50%;
  transform: translateY(-50%);
  background-color: #2e3a3d;
}
.mobile-nav__hamburger::before, .mobile-nav__hamburger::after {
  content: "";
  width: 24px;
  height: 2px;
  left: 0;
  background-color: #2e3a3d;
  position: absolute;
  transition: transform 250ms ease;
}
.mobile-nav__hamburger::before {
  transform: translateY(-6px);
}
.mobile-nav__hamburger::after {
  transform: translateY(6px);
}
.is-visible .mobile-nav__hamburger {
  background-color: transparent;
}
.is-visible .mobile-nav__hamburger::before {
  transform: translateY(0) rotate(45deg);
  background-color: #408cb3;
}
.is-visible .mobile-nav__hamburger::after {
  transform: translateY(0) rotate(-45deg);
  background-color: #408cb3;
}
.mobile-nav__list {
  background-color: rgba(215, 235, 245, 0.4);
  background-color: #eff7fb;
  list-style: none;
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
  list-style: none;
  display: none;
  border: 1px solid #c2ebff;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  z-index: 9;
  width: 100%;
}
.is-visible .mobile-nav__list {
  display: flex;
  flex-direction: column;
}
.mobile-nav .mobile-nav__item + .mobile-nav__item {
  border-top: 1px solid #c2ebff;
}
.mobile-nav__item {
  padding: 10px 0;
  margin-left: 24px;
  margin-right: 24px;
  position: relative;
}
.mobile-nav__item::after {
  content: "";
  position: absolute;
  background-image: url("../images/bg/min/lenke-glyph.svg");
  background-repeat: no-repeat;
  width: 16px;
  height: 16px;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.mobile-nav__item:first-child {
  margin-top: 8px;
}
.mobile-nav__item.is-active {
  background-color: #245066;
  margin-left: 8px;
  margin-right: 8px;
  padding-left: 16px;
  padding-right: 16px;
  border-radius: 4px;
  border-top: none !important;
}
.mobile-nav__item.is-active::after {
  content: none;
}
.mobile-nav__item.is-active a {
  color: white;
}
.mobile-nav__link {
  color: #2e3a3d;
  text-decoration: none;
  font-size: 1.125rem;
  line-height: 1.5rem;
  display: block;
}
.mobile-nav .mobile-search {
  margin: 13px 8px 8px 8px;
  position: relative;
}
.mobile-nav .mobile-search input {
  border-radius: 2em;
  box-shadow: inset 0 2px 3px 0 rgba(0, 0, 0, 0.12);
  background-color: white;
}
.mobile-nav .mobile-search button {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}

/*------------------------------------*/
/*  #PAGINATION
/*------------------------------------*/
/**
 * Nav element used to navigate back and forth between swimming excercises
 */
.pagination {
  position: relative;
  margin: 96px 0 80px;
  background: linear-gradient(to bottom, #fbfbfb, #fff);
  padding: 16px 10px;
  border-top: 1px solid #c2ebff;
  border-bottom: 1px solid #c2ebff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.08);
}
@media screen and (min-width: 768px) {
  .pagination {
    padding: 16px 16px;
  }
}
.pagination::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: calc(100% - 20px);
  width: 1px;
  background: #c2ebff;
  opacity: 0.4;
}
@media screen and (min-width: 768px) {
  .pagination::before {
    display: none;
  }
}
@media screen and (min-width: 768px) {
  .pagination {
    border-top: none;
  }
}
@media screen and (min-width: 1024px) {
  .pagination {
    padding: 24px 48px;
  }
}
.pagination__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pagination__heading {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (min-width: 768px) {
  .pagination__heading {
    bottom: auto;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
@media screen and (max-width: 767px) {
  .pagination__previous, .pagination__next {
    font-size: 0;
  }
}
.pagination__previous {
  margin-right: auto;
}
@media screen and (max-width: 767px) {
  .pagination__previous::after {
    content: "Forrige";
    font-size: 1.125rem;
  }
}
.pagination__next {
  margin-left: auto;
}
@media screen and (max-width: 767px) {
  .pagination__next::before {
    content: "Neste";
    font-size: 1.125rem;
  }
}

.pill {
  display: inline-block;
  font-size: 0.875rem;
  line-height: 1.43;
  border-radius: 99em;
  border: 1px solid #c2ebff;
  background: #fff;
  color: #2e3a3d;
  padding: 4px 16px;
}

/*------------------------------------*/
/*  #PRIMARY-NAV
/*------------------------------------*/
/**
 * Nav element that is part of the global header
 */
.primary-nav__list {
  list-style: none;
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
  display: flex;
  justify-content: center;
}
@media screen and (min-width: 768px) {
  .primary-nav__list {
    justify-content: flex-start;
  }
}
.primary-nav__list li {
  margin-right: 4px;
  /**
   * 1. Make buttons equal height on mobile browsers in case text within
   *    them wraps over two lines
   */
}
@media screen and (max-width: 767px) {
  .primary-nav__list li {
    display: flex; /* 1 */
  }
}
@media screen and (min-width: 768px) {
  .primary-nav__list li {
    margin-right: 8px;
  }
}
.primary-nav__list li:last-of-type {
  margin-right: 16px;
}
@media screen and (max-width: 767px) {
  .primary-nav__list li:last-of-type {
    margin: 0;
  }
}

/*------------------------------------*/
/*  #PROGRESS-LIST
/*------------------------------------*/
/**
 * A numbered list showing the progression within a topic/theme
 */
.progress-list {
  list-style: none;
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
  counter-reset: progress-list-counter;
  position: relative;
  list-style: none;
  /**
   * Pluss sign for last item in list (given it has the progress-list__supplement class),
   * except if list is a teaser
   */
}
.progress-list::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 16px;
  width: 2px;
  background-size: 2px 4px;
  background-repeat: repeat-y;
  background-image: url("../images/bg/min/dot.svg");
}
.progress-list li {
  position: relative;
  display: flex;
  align-items: center;
  margin-right: auto;
  min-height: 34px;
  padding: 0 0 0 48px;
  margin-bottom: 12px;
  /**
     * When the progress list is used in the context of the
     * wave component, we need to ensure that the dots don't
     * extend beyoynd the last bullet point in cases where
     * the text of the last li breaks over multiple lines
     *
     * 1. Same width as li padding
     * 2. Same bg-color as .waves component
     */
}
.progress-list li a {
  color: #20729B;
}
.waves .progress-list li a {
  color: #245066;
}
.progress-list li a:hover {
  text-decoration: none;
  color: #245066;
}
.waves .progress-list li a:hover {
  text-decoration: underline;
}
.progress-list li a::before {
  content: counter(progress-list-counter);
  counter-increment: progress-list-counter;
  width: 32px;
  height: 32px;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #c2ebff;
  border-radius: 50%;
  background-color: #fff;
  background-image: url("../images/bg/min/lenke-glyph.svg");
  background-repeat: no-repeat;
  background-position: -15px center;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.08);
  font-family: "Arvo", sans-serif;
  font-size: 0.75rem;
  line-height: 1;
  color: #245066;
  transition: all 250ms;
}
.progress-list li a:hover::before {
  color: transparent;
  background-position: center;
  background-color: #f3fbff;
}
.progress-list li.is-active a {
  font-weight: 700;
  color: #515f66;
}
.progress-list li.is-active a::before {
  border-color: #408cb3;
  background-color: #def3fd;
  font-weight: 400;
}
.waves .progress-list li:last-child {
  position: relative;
}
.waves .progress-list li:last-child::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  height: 100%;
  width: 48px; /* 1 */
  background: #def3fd; /* 2 */
}
.progress-list:not(.progress-list--teaser) .progress-list__supplement {
  margin: 16px 0 0;
  /**
   * 1. Because of the font the pluss sign is slightly of center.
   *    This is a slightly hacky way to fix it.
   */
}
.progress-list:not(.progress-list--teaser) .progress-list__supplement a::before {
  content: "+";
  font-size: 1.3em;
  text-indent: 1px; /* 1 */
  background-color: #c2ebff;
  border-color: #fff;
}
.progress-list.progress-list--alt .progress-list__supplement {
  margin: 0;
}
.progress-list.progress-list--alt .progress-list__supplement a::before {
  background-color: #fff;
  border: 1px solid #c2ebff;
}
.progress-list a {
  color: #245066;
  text-decoration: none;
}
.progress-list a:hover {
  text-decoration: underline;
}
.progress-list--teaser {
  padding-bottom: 8px;
}
.progress-list--teaser li:last-child {
  margin: 0;
}
.progress-list--alt {
  padding-bottom: 8px;
}
@media screen and (max-width: 767px) {
  .progress-list--alt {
    padding-bottom: 0;
  }
  .is-visible .progress-list--alt {
    padding-bottom: 8px;
  }
}
.progress-list--unordered::before {
  content: none;
}
.progress-list--unordered li a::before {
  content: "";
  background-position: center;
}
.progress-list--unordered li.is-active a::before {
  background-image: url("../images/bg/min/lenke-glyph-aktiv.svg");
}

/*------------------------------------*/
/*  #QUOTE
/*------------------------------------*/
/**
 * Styles for quotes
 */
.quote {
  position: relative;
  margin: 0 0 24px 0;
}
@media screen and (max-width: 1023px) {
  .quote {
    padding-left: 48px;
  }
}
@media screen and (min-width: 1024px) {
  .quote {
    width: 840px;
  }
}
@media screen and (min-width: 1280px) {
  .quote {
    width: 976px;
  }
}
.quote::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 6px;
  left: 0;
}
@media screen and (max-width: 1023px) {
  .quote::before {
    background-size: 556px 314px;
    background-position: -522px -282px;
    width: 34px;
    height: 31px;
  }
}
@media screen and (min-width: 1024px) {
  .quote::before {
    left: -76px;
  }
}
.quote__text {
  margin-bottom: 8px;
}
.quote__text > *:last-child {
  margin-bottom: 0;
}
.quote__source::before {
  content: "– ";
}

.search-result-item {
  margin-bottom: 24px !important;
}
.search-result-item__title {
  font-size: 1.3125rem;
  line-height: 1.29;
  letter-spacing: 0.2px;
  color: #20729B;
  font-weight: normal;
  text-align: left;
  margin: 0 0 8px;
}
.search-result-item__date {
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: 0.2px;
}
@media screen and (min-width: 768px) {
  .search-result-item__date {
    font-size: 0.875rem;
    line-height: 1.43;
  }
}
.search-result-item p {
  margin-bottom: 12px;
}

.search-sorter {
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media screen and (min-width: 768px) {
  .search-sorter {
    flex-direction: row;
    justify-content: space-between;
  }
}
.search-sorter__wrapper {
  margin-bottom: 48px;
}
.search-sorter__legend {
  font-size: 1.1875rem;
  color: #245066;
  padding-bottom: 16px;
}
@media screen and (min-width: 768px) {
  .search-sorter__legend {
    padding-bottom: 0;
  }
}
.search-sorter__selection-list {
  display: flex;
  flex-direction: row;
}
.search-sorter__selection {
  opacity: 0;
  position: absolute;
}
.search-sorter__label {
  padding: 4.5px 20px;
  margin-right: 8px;
  border: solid 1px rgba(225, 231, 235, 0.5);
  border-radius: 18px;
  font-size: 1.1875rem;
  line-height: 1.32;
  letter-spacing: 0.2px;
  color: #20729B;
  background-color: #fff;
  cursor: pointer;
  transition: 250ms;
}
input:focus + .search-sorter__label, .search-sorter__label:hover {
  border-radius: 3px !important;
  border: 1px solid #5cc9ff;
}
.search-sorter__label:last-child {
  margin-right: 0;
}
.search-sorter__selection:checked + .search-sorter__label {
  border: 1px solid #5cc9ff;
  color: #245066;
}

.search__summary {
  margin: 24px 0;
}
.search__pagination {
  display: flex;
  justify-content: space-between;
  margin-top: 45px;
}
.search__pagination__link {
  display: flex;
  font-weight: bold;
  align-items: center;
}

.skip-link {
  position: absolute;
  display: block;
  width: 100%;
  top: 0;
  left: -9999px;
  padding: 8px;
  background-color: #2e3a3d;
  color: #fff;
  text-decoration-color: #fff;
  text-align: left;
  z-index: 13;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.skip-link:focus {
  left: 0;
  opacity: 1;
  color: #fff;
  text-decoration-color: #fff;
  -webkit-focus-ring: none;
  outline: none;
}
.skip-link:hover {
  color: #fff;
  text-decoration-color: #fff;
}

/* Slider */
.slick-loading .slick-list {
  background: url("../images/bg/min/ajax-loader.gif") center center no-repeat #fff;
}

/* Arrows */
.carousel .icn-button--prev,
.carousel .icn-button--next {
  position: absolute;
  display: none;
  top: calc(50% - 28px);
}
.carousel .icn-button--prev {
  left: -44px;
}
.carousel .icn-button--next {
  right: -44px;
}

/* Dots */
.slick-dotted.slick-slider {
  margin-bottom: 8px;
}

.slick-dots {
  list-style: none;
  display: block;
  text-align: center;
  margin: 0;
  width: 100%;
  padding: 13px 0 0;
  height: 10px;
  box-sizing: content-box;
}
.slick-dots li {
  display: inline-block;
  width: 8px;
  margin: 0 4px;
  padding: 0;
  cursor: pointer;
}
.slick-dots li button {
  border: 0;
  background: transparent;
  display: block;
  line-height: 0px;
  font-size: 0px;
  color: transparent;
  padding: 0;
  cursor: pointer;
}
.slick-dots li button:before {
  content: "•";
  font-size: 38px;
  line-height: 0.75rem;
  text-align: center;
  color: #5cc9ff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before {
  color: #408cb3;
}

/* Slider */
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
}
.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
}
.slick-track:before, .slick-track:after {
  content: "";
  display: table;
}
.slick-track:after {
  clear: both;
}
.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none;
}
[dir=rtl] .slick-slide {
  float: right;
}
.slick-slide img {
  display: block;
}
.slick-slide.slick-loading img {
  display: none;
}
.slick-slide.dragging img {
  pointer-events: none;
}
.slick-initialized .slick-slide {
  display: block;
}
.slick-loading .slick-slide {
  visibility: hidden;
}
.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}

/*------------------------------------*/
/*  #TEXT
/*------------------------------------*/
/**
 * Various text styles
 */
.text-blockquote {
  max-width: none;
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.3;
  color: #245066;
}
@media screen and (min-width: 768px) {
  .text-blockquote {
    font-size: 1.3125rem;
    line-height: 1.33;
  }
}

.text-supplement {
  font-size: 0.75rem;
  line-height: 1.5;
}
@media screen and (min-width: 768px) {
  .text-supplement {
    font-size: 0.875rem;
    line-height: 1.43;
  }
}

.text-lead {
  font-size: 1.125rem;
  line-height: 1.44;
  color: #245066;
}
@media screen and (min-width: 768px) {
  .text-lead {
    font-size: 1.1875rem;
    line-height: 1.32;
  }
}

/*------------------------------------*/
/*  #WAVES
/*------------------------------------*/
/**
 * Blue colored section with waves on top and bottom
 */
.waves {
  padding-top: 24px;
  padding-bottom: 28px;
  margin-bottom: 80px;
  background-color: #def3fd;
  position: relative;
  /**
   * 1. Fix for iOS Safari <= 8.X which injects a pixel gap between each tiled
   *    SVG image😡
   */
}
.waves::before, .waves::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 20px;
  background-image: url("../images/bg/min/wave-blue.svg"), linear-gradient(to top, #def3fd 10px, transparent 10px); /* 1 */
  background-position: center;
  background-repeat: repeat-x;
}
.waves::before {
  bottom: 100%;
}
.waves::after {
  top: 100%;
  transform: rotate(180deg);
}

/*------------------------------------*/
/*  #EDITOR-STYLES
/*------------------------------------*/
/**
 * Styling contents of WYSIWIG editor that are wrapped by the selector
 */
.editor-styles {
  /**
    * For modern browsers
    * 1. The space content is one way to avoid an Opera bug when the
    *    contenteditable attribute is included anywhere else in the document.
    *    Otherwise it causes space to appear at the top and bottom of elements
    *    that are clearfixed.
    * 2. The use of `table` rather than `block` is only necessary if using
    *    `:before` to contain the top-margins of child elements.
    */
}
.editor-styles::before, .editor-styles::after {
  content: " "; /* 1 */
  display: table; /* 2 */
}
.editor-styles::after {
  clear: both;
}
.editor-styles .button--primary {
  margin-bottom: 24px;
}
.editor-styles p {
  /**
   * 1. Force the button to clear text if used inline (inside paragraph).
   * 2. If used inline we need to specify top margin so that we get some
   *    air between text and button
   */
}
.editor-styles p .button--primary {
  display: table; /* 1 */
  margin-top: 24px; /* 2 */
}
.editor-styles > *:last-child {
  margin-bottom: 0;
}

/*------------------------------------*/
/*  #OVERRIDES
/*------------------------------------*/
/**
 * Classes that need higher specificity than regular components
 */
.compat-object-fit {
  background-size: cover;
  background-position: center center;
}
.compat-object-fit img {
  opacity: 0;
}

/*------------------------------------*/
/*  #SHAME
/*------------------------------------*/
/**
 * The thing that should not be.
 * Your 1-stop place for all nasty hacks and overrides that are
 * sometimes necessary for the greater good.
 *
 * This file should be as small as possible and should be routinely reviewed
 * in order to refactor out unecessary hacks.
 */
/*------------------------------------*/
/*  #UTILITY-CLASSES
/*------------------------------------*/
/**
 * Single utility classes. Prefixed with "u-"
 */
/**
 * Margin utility
 */
.u-mg-bottom-1 {
  margin-bottom: 8px;
}

.u-mg-bottom-2 {
  margin-bottom: 16px;
}

.u-mg-bottom-3 {
  margin-bottom: 24px;
}

.u-mg-bottom-4 {
  margin-bottom: 32px;
}

.u-mg-bottom-5 {
  margin-bottom: 40px;
}

.u-mg-bottom-6 {
  margin-bottom: 48px;
}

.u-mg-bottom-7 {
  margin-bottom: 56px;
}

.u-mg-bottom-8 {
  margin-bottom: 64px;
}

.u-mg-bottom-9 {
  margin-bottom: 72px;
}

.u-mg-bottom-10 {
  margin-bottom: 80px;
}

.u-mg-bottom-none {
  margin-bottom: 0;
}
@media screen and (min-width: 768px) {
  .u-mg-bottom-none\@m-up {
    margin-bottom: 0;
  }
}
@media screen and (min-width: 1024px) {
  .u-mg-bottom-none\@l-up {
    margin-bottom: 0;
  }
}
@media screen and (min-width: 1280px) {
  .u-mg-bottom-none\@xl-up {
    margin-bottom: 0;
  }
}

.u-mg-top-1 {
  margin-top: 8px;
}

.u-mg-top-2 {
  margin-top: 16px;
}

.u-mg-top-3 {
  margin-top: 24px;
}

.u-mg-top-4 {
  margin-top: 32px;
}

.u-mg-top-5 {
  margin-top: 40px;
}

.u-mg-top-6 {
  margin-top: 48px;
}

.u-mg-top-7 {
  margin-top: 56px;
}

.u-mg-top-8 {
  margin-top: 64px;
}

.u-mg-top-9 {
  margin-top: 72px;
}

.u-mg-top-10 {
  margin-top: 80px;
}

@media screen and (min-width: 1024px) {
  .u-mg-top-1\@l-up {
    margin-top: 8px;
  }
}

@media screen and (min-width: 1024px) {
  .u-mg-top-2\@l-up {
    margin-top: 16px;
  }
}

@media screen and (min-width: 1024px) {
  .u-mg-top-3\@l-up {
    margin-top: 24px;
  }
}

@media screen and (min-width: 1024px) {
  .u-mg-top-4\@l-up {
    margin-top: 32px;
  }
}

@media screen and (min-width: 1024px) {
  .u-mg-top-5\@l-up {
    margin-top: 40px;
  }
}

@media screen and (min-width: 1024px) {
  .u-mg-top-6\@l-up {
    margin-top: 48px;
  }
}

@media screen and (min-width: 1024px) {
  .u-mg-top-7\@l-up {
    margin-top: 56px;
  }
}

@media screen and (min-width: 1024px) {
  .u-mg-top-8\@l-up {
    margin-top: 64px;
  }
}

@media screen and (min-width: 1024px) {
  .u-mg-top-9\@l-up {
    margin-top: 72px;
  }
}

@media screen and (min-width: 1024px) {
  .u-mg-top-10\@l-up {
    margin-top: 80px;
  }
}

.u-mg-top-none {
  margin-top: 0;
}
@media screen and (min-width: 768px) {
  .u-mg-top-none\@m-up {
    margin-top: 0;
  }
}
@media screen and (min-width: 1024px) {
  .u-mg-top-none\@l-up {
    margin-top: 0;
  }
}
@media screen and (min-width: 1280px) {
  .u-mg-top-none\@xl-up {
    margin-top: 0;
  }
}

/**
 * Width utility
 */
.u-1 {
  width: 100%;
}

.u-1of2 {
  width: 50%;
}

.u-1of3 {
  width: 33.3333333333%;
}

.u-2of3 {
  width: 66.6666666667%;
}

.u-1of4 {
  width: 25%;
}

.u-3of4 {
  width: 75%;
}

.u-1of5 {
  width: 20%;
}

.u-2of5 {
  width: 40%;
}

.u-3of5 {
  width: 60%;
}

.u-4of5 {
  width: 80%;
}

@media screen and (min-width: 768px) {
  .u-1\@m-up {
    width: 100%;
  }
}

@media screen and (min-width: 768px) {
  .u-1of2\@m-up {
    width: 50%;
  }
}

@media screen and (min-width: 768px) {
  .u-1of3\@m-up {
    width: 33.3333333333%;
  }
}

@media screen and (min-width: 768px) {
  .u-2of3\@m-up {
    width: 66.6666666667%;
  }
}

@media screen and (min-width: 768px) {
  .u-1of4\@m-up {
    width: 25%;
  }
}

@media screen and (min-width: 768px) {
  .u-3of4\@m-up {
    width: 75%;
  }
}

@media screen and (min-width: 768px) {
  .u-1of5\@m-up {
    width: 20%;
  }
}

@media screen and (min-width: 768px) {
  .u-2of5\@m-up {
    width: 40%;
  }
}

@media screen and (min-width: 768px) {
  .u-3of5\@m-up {
    width: 60%;
  }
}

@media screen and (min-width: 768px) {
  .u-4of5\@m-up {
    width: 80%;
  }
}

@media screen and (min-width: 1024px) {
  .u-1\@l-up {
    width: 100%;
  }
}

@media screen and (min-width: 1024px) {
  .u-1of2\@l-up {
    width: 50%;
  }
}

@media screen and (min-width: 1024px) {
  .u-1of3\@l-up {
    width: 33.3333333333%;
  }
}

@media screen and (min-width: 1024px) {
  .u-2of3\@l-up {
    width: 66.6666666667%;
  }
}

@media screen and (min-width: 1024px) {
  .u-1of4\@l-up {
    width: 25%;
  }
}

@media screen and (min-width: 1024px) {
  .u-3of4\@l-up {
    width: 75%;
  }
}

@media screen and (min-width: 1024px) {
  .u-1of5\@l-up {
    width: 20%;
  }
}

@media screen and (min-width: 1024px) {
  .u-2of5\@l-up {
    width: 40%;
  }
}

@media screen and (min-width: 1024px) {
  .u-3of5\@l-up {
    width: 60%;
  }
}

@media screen and (min-width: 1024px) {
  .u-4of5\@l-up {
    width: 80%;
  }
}

@media screen and (min-width: 1280px) {
  .u-1\@xl-up {
    width: 100%;
  }
}

@media screen and (min-width: 1280px) {
  .u-1of2\@xl-up {
    width: 50%;
  }
}

@media screen and (min-width: 1280px) {
  .u-1of3\@xl-up {
    width: 33.3333333333%;
  }
}

@media screen and (min-width: 1280px) {
  .u-2of3\@xl-up {
    width: 66.6666666667%;
  }
}

@media screen and (min-width: 1280px) {
  .u-1of4\@xl-up {
    width: 25%;
  }
}

@media screen and (min-width: 1280px) {
  .u-3of4\@xl-up {
    width: 75%;
  }
}

@media screen and (min-width: 1280px) {
  .u-1of5\@xl-up {
    width: 20%;
  }
}

@media screen and (min-width: 1280px) {
  .u-2of5\@xl-up {
    width: 40%;
  }
}

@media screen and (min-width: 1280px) {
  .u-3of5\@xl-up {
    width: 60%;
  }
}

@media screen and (min-width: 1280px) {
  .u-4of5\@xl-up {
    width: 80%;
  }
}

/**
 * Text utility
 */
.u-text-center {
  text-align: center !important;
}

.u-text-left {
  text-align: left !important;
}

@media screen and (max-width: 767px) {
  .u-sticky\@s-only {
    position: sticky;
    z-index: 1;
    top: 0;
  }
}

.u-cf {
  /**
    * For modern browsers
    * 1. The space content is one way to avoid an Opera bug when the
    *    contenteditable attribute is included anywhere else in the document.
    *    Otherwise it causes space to appear at the top and bottom of elements
    *    that are clearfixed.
    * 2. The use of `table` rather than `block` is only necessary if using
    *    `:before` to contain the top-margins of child elements.
    */
}
.u-cf::before, .u-cf::after {
  content: " "; /* 1 */
  display: table; /* 2 */
}
.u-cf::after {
  clear: both;
}

/**
 * Alignemt utilities
 */
.u-center-content-horz {
  display: flex;
  justify-content: center;
}

.u-center-content-vert {
  display: flex;
  align-items: center;
  align-content: center;
}
/*# sourceMappingURL=source\css\style.css.map */