/*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Prevent adjustments of font size after orientation changes in IE and iOS.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}
/**
 * Remove the margin in all browsers (opinionated).
 */
body {
  margin: 0;
}
/* HTML5 display definitions
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 * 2. Add the correct display in IE.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
  /* 1 */
  display: block;
}
/**
 * Add the correct display in IE 9-.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
}
/**
 * Add the correct display in iOS 4-7.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}
/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}
/**
 * Add the correct display in IE 10-.
 * 1. Add the correct display in IE.
 */
template,
[hidden] {
  display: none;
}
/* Links
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}
/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */
a:active,
a:hover {
  outline-width: 0;
}
/* Text-level semantics
   ========================================================================== */
/**
 * 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;
}
/**
 * Add the correct font style in Android 4.3-.
 */
dfn {
  font-style: italic;
}
/**
 * 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;
}
/**
 * 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
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10-.
 */
img {
  border-style: none;
}
/**
 * Hide the overflow in IE.
 */
svg:not(:root) {
  overflow: hidden;
}
/* Grouping content
   ========================================================================== */
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}
/**
 * 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 {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
}
/* Forms
   ========================================================================== */
/**
 * Change font properties to `inherit` in all browsers (opinionated).
 */
button,
input,
select,
textarea {
  font: inherit;
}
/**
 * Restore the font weight unset by the previous rule.
 */
optgroup {
  font-weight: bold;
}
/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 * 2. Show the overflow in Edge, Firefox, and IE.
 */
button,
input,
select {
  /* 2 */
  overflow: visible;
}
/**
 * Remove the margin in Safari.
 * 1. Remove the margin in Firefox and Safari.
 */
button,
input,
select,
textarea {
  /* 1 */
  margin: 0;
}
/**
 * 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;
}
/**
 * Change the cursor in all browsers (opinionated).
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  cursor: pointer;
}
/**
 * Restore the default cursor to disabled elements unset by the previous rule.
 */
[disabled] {
  cursor: default;
}
/**
 * 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.
 */
button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
}
/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
input:-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 {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */
}
/**
 * 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"] {
  -webkit-box-sizing: border-box;
          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;
}
/**
 * Correct the odd appearance of search inputs in Chrome and Safari.
 */
[type="search"] {
  -webkit-appearance: textfield;
}
/**
 * Remove the inner padding and cancel buttons in Chrome on OS X and
 * Safari on OS X.
 */
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
/* 
 *  Core Owl Carousel CSS File
 *  v1.3.3
 */
/* clearfix */
.owl-carousel .owl-wrapper:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
/* display none until init */
.owl-carousel {
  display: none;
  position: relative;
  width: 100%;
  -ms-touch-action: pan-y;
}
.owl-carousel .owl-wrapper {
  display: none;
  position: relative;
  -webkit-transform: translate3d(0px, 0px, 0px);
}
.owl-carousel .owl-wrapper-outer {
  overflow: hidden;
  position: relative;
  width: 100%;
}
.owl-carousel .owl-wrapper-outer.autoHeight {
  -webkit-transition: height 500ms ease-in-out;
  transition: height 500ms ease-in-out;
}
.owl-carousel .owl-item {
  float: left;
}
.owl-controls .owl-page,
.owl-controls .owl-buttons div {
  cursor: pointer;
}
.owl-controls {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* mouse grab icon */
.grabbing {
  cursor: url(/assets/core/images/owl-carousel/grabbing.png) 8 8, move;
}
/* fix */
.owl-carousel .owl-wrapper,
.owl-carousel .owl-item {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
}
/*
*   Owl Carousel Owl Demo Theme 
* v1.3.3
*/
/* Styling Next and Prev buttons */
.owl-theme .owl-controls .owl-buttons div {
  color: #FFF;
  display: inline-block;
  zoom: 1;
  *display: inline;
  /*IE7 life-saver */
  margin: 5px;
  padding: 3px 10px;
  font-size: 12px;
  border-radius: 30px;
  background: #869791;
  filter: alpha(opacity=50);
  /*IE7 fix*/
  opacity: 0.5;
}
/* Clickable class fix problem with hover on touch devices */
/* Use it for non-touch hover action */
.owl-theme .owl-controls.clickable .owl-buttons div:hover {
  filter: alpha(opacity=100);
  /*IE7 fix*/
  opacity: 1;
  text-decoration: none;
}
/* Styling Pagination*/
.owl-theme .owl-controls .owl-page {
  display: inline-block;
  zoom: 1;
  *display: inline;
  /*IE7 life-saver */
}
.owl-theme .owl-controls .owl-page span {
  display: block;
  width: 12px;
  height: 12px;
  margin: 5px 7px;
  border-radius: 20px;
  background: #d4cac8;
}
.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls.clickable .owl-page:hover span {
  background: #002856;
}
/* If PaginationNumbers is true */
.owl-theme .owl-controls .owl-page span.owl-numbers {
  height: auto;
  width: auto;
  color: #FFF;
  padding: 2px 10px;
  font-size: 12px;
  border-radius: 30px;
}
/* preloading images */
.owl-item.loading {
  min-height: 150px;
  background: url(/assets/core/images/owl-carousel/ajax-loader.gif) no-repeat center center;
}
.owl-theme .owl-controls .owl-page {
  height: 50px;
}
.owl-theme .owl-controls .owl-page span {
  display: block;
  margin: 17px 7px;
  border-radius: 50%;
  border: 2px solid #fff;
  width: 16px;
  height: 16px;
}
.owl-theme .owl-controls {
  position: absolute;
  width: 100%;
  text-align: center;
  margin: 0;
  height: 50px;
}
.owl-theme .owl-controls {
  text-align: center;
}
.owl-theme .owl-pagination {
  line-height: 0;
}
/*! Swipebox v1.3.0 | Constantin Saguin csag.co | MIT License | github.com/brutaldesign/swipebox */
html.swipebox-html.swipebox-touch {
  overflow: hidden !important;
}
#swipebox-overlay img {
  border: none !important;
}
#swipebox-overlay {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100 !important;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.js-swipeElement {
  display: block;
}
#swipebox-container {
  position: relative;
  width: 100%;
  height: 100%;
}
#swipebox-slider {
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
  white-space: nowrap;
  position: absolute;
  display: none;
}
#swipebox-slider .slide {
  height: 100%;
  width: 100%;
  line-height: 1px;
  text-align: center;
  display: inline-block;
  opacity: 0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
#swipebox-slider .slide.current {
  opacity: 1;
}
#swipebox-slider .slide:before {
  content: "";
  display: inline-block;
  height: 50%;
  width: 1px;
  margin-right: -1px;
}
#swipebox-slider .slide img,
#swipebox-slider .slide .swipebox-video-container,
#swipebox-slider .slide .swipebox-inline-container {
  display: inline-block;
  max-height: 70%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  width: auto;
  height: auto;
  vertical-align: middle;
}
@media screen and (max-width: 1024px) and (orientation: landscape) {
  #swipebox-slider .slide img,
  #swipebox-slider .slide .swipebox-video-container,
  #swipebox-slider .slide .swipebox-inline-container {
    max-width: 100%;
    max-height: 100%;
  }
}
#swipebox-slider .slide .swipebox-video-container {
  background: none;
  max-width: 640px;
  max-height: 100%;
  width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#swipebox-slider .slide .swipebox-video-container .swipebox-video {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
  position: relative;
}
#swipebox-slider .slide .swipebox-video-container .swipebox-video iframe {
  width: 100% !important;
  height: 100% !important;
  position: absolute;
  top: 0;
  left: 0;
}
#swipebox-bottom-bar,
#swipebox-top-bar {
  -webkit-transition: 0.5s;
  transition: 0.5s;
  position: absolute;
  left: 0;
  z-index: 100;
  height: 50px;
  width: 100%;
}
#swipebox-bottom-bar {
  bottom: 50%;
  margin-bottom: -25px;
  pointer-events: none;
}
#swipebox-top-bar {
  top: 50%;
  margin-top: 190px;
  height: auto;
}
#swipebox-title {
  color: #fff;
  display: block;
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
  text-align: left;
  vertical-align: middle;
  text-align: center;
}
#swipebox-prev,
#swipebox-next {
  border: none !important;
  text-decoration: none !important;
  cursor: pointer;
  width: 50px;
  height: 50px;
  pointer-events: auto;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCI+PHBhdGggZmlsbD0iIzAwMjg1NiIgZD0iTTMyLjkgNDQuMkwxMSAyMi41bDIyLTIwIDIgMi4yLTE5LjUgMTcuOUwzNS4xIDQyeiIvPjwvc3ZnPg==);
  background-repeat: no-repeat;
  background-size: 50px;
}
#swipebox-arrows {
  display: block;
  margin: 0 auto;
  width: 100%;
  height: 50px;
  max-width: 1400px;
  padding: 0 20px;
}
@media screen and (max-width: 1024px) {
  #swipebox-arrows {
    padding: 0 5px;
  }
}
#swipebox-prev {
  float: left;
}
#swipebox-next {
  float: right;
  -webkit-transform: scaleX(-1);
      -ms-transform: scaleX(-1);
          transform: scaleX(-1);
  -ms-filter: fliph;
}
#swipebox-prev .Icon,
#swipebox-next .Icon {
  fill: #fff;
  max-height: 50px;
  width: 50px;
}
#swipebox-close {
  border: none !important;
  text-decoration: none !important;
  cursor: pointer;
  top: 20px;
  right: 20px;
  position: absolute;
  z-index: 100;
  background-position: 15px 12px;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNi42IiBoZWlnaHQ9IjE2LjMiPjxwYXRoIGQ9Ik0uNC43bC43LS43IDE1LjUgMTUuNi0uNy43TC40Ljd6bS4zIDE1LjRsLS43LS43TDE1LjMuMWwuNy43TC43IDE2LjF6IiBmaWxsPSIjMDAyODU2Ii8+PC9zdmc+);
  background-repeat: no-repeat;
  background-size: 30px;
  height: 50px;
  width: 50px;
}
#swipebox-close .Icon {
  fill: #fff;
  max-height: 30px;
  width: 30px;
}
.swipebox-no-close-button #swipebox-close {
  display: none;
}
#swipebox-prev.disabled,
#swipebox-next.disabled {
  opacity: 0.3;
}
.swipebox-no-touch #swipebox-overlay.rightSpring #swipebox-slider {
  -webkit-animation: rightSpring 0.3s;
  animation: rightSpring 0.3s;
}
.swipebox-no-touch #swipebox-overlay.leftSpring #swipebox-slider {
  -webkit-animation: leftSpring 0.3s;
  animation: leftSpring 0.3s;
}
.swipebox-touch #swipebox-container:before,
.swipebox-touch #swipebox-container:after {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  content: ' ';
  position: absolute;
  z-index: 100;
  top: 0;
  height: 100%;
  width: 20px;
  opacity: 0;
}
.swipebox-touch #swipebox-container:before {
  left: 0;
  -webkit-box-shadow: inset 10px 0px 10px -8px #656565;
  box-shadow: inset 10px 0px 10px -8px #656565;
}
.swipebox-touch #swipebox-container:after {
  right: 0;
  -webkit-box-shadow: inset -10px 0px 10px -8px #656565;
  box-shadow: inset -10px 0px 10px -8px #656565;
}
.swipebox-touch #swipebox-overlay.leftSpringTouch #swipebox-container:before {
  opacity: 1;
}
.swipebox-touch #swipebox-overlay.rightSpringTouch #swipebox-container:after {
  opacity: 1;
}
@-webkit-keyframes rightSpring {
  0% {
    left: 0;
  }
  50% {
    left: -30px;
  }
  100% {
    left: 0;
  }
}
@keyframes rightSpring {
  0% {
    left: 0;
  }
  50% {
    left: -30px;
  }
  100% {
    left: 0;
  }
}
@-webkit-keyframes leftSpring {
  0% {
    left: 0;
  }
  50% {
    left: 30px;
  }
  100% {
    left: 0;
  }
}
@keyframes leftSpring {
  0% {
    left: 0;
  }
  50% {
    left: 30px;
  }
  100% {
    left: 0;
  }
}
@media screen and (min-width: 1024px) {
  #swipebox-close {
    right: 40px;
  }
}
@media screen and (max-width: 1024px) {
  #swipebox-top-bar {
    bottom: 50%;
    margin-bottom: 186px;
    height: auto;
  }
}
/* Skin 
--------------------------*/
#swipebox-overlay {
  background: #495a6b;
}
#swipebox-top-bar {
  display: none !important;
}
#swipebox-bottom-bar,
#swipebox-top-bar {
  opacity: 1;
}
#swipebox-top-bar h2 {
  color: #333 !important;
  line-height: 1.35em;
  padding: 1em 0;
}
.slide-title {
  color: #fff;
  line-height: 18px;
  white-space: normal;
  font-size: 12px;
  text-align: left;
  max-width: 1024px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 20px;
  display: table;
}
@media screen and (min-width: 1024px) {
  .slide-title {
    padding: 0;
    line-height: 21px;
    font-size: 16px;
  }
}
@media screen and (max-width: 1024px) and (orientation: landscape) {
  .slide-title {
    display: none;
  }
}
html {
  background: #e9e4e3;
  font-family: "AdelleSans", "Helvetica", "Arial", sans-serif;
  font-size: 16;
  line-height: 1.5;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  height: 100%;
}
@media screen and (min-width: 1600px) {
  html {
    background: #f4f2f1;
  }
}
*,
*::before,
*::after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
  /* https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
}
body {
  color: #595857;
  height: 100%;
  -webkit-font-smoothing: antialiased;
  max-width: 1600px;
  margin: auto;
}
.no-js .language-change,
.no-js .Header-navButton--language {
  display: none !important;
}
.no-js .language-change--no-js {
  display: block !important;
}
.no-js .Header-navButton--language-no-js {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.no-scroll {
  overflow: hidden !important;
}
/** 
 * Typography
 */
/* NOTE: heading stylings can be found in Heading.less */
p {
  margin-bottom: 1em;
}
ol,
ul,
dl {
  margin-bottom: 1em;
}
/* reset margin-bottom on nested combinations of "ol ul" */
ol ol,
ol ul,
ul ol,
ul ul {
  margin-bottom: 0;
}
code {
  background: rgba(233, 228, 227, 0.3);
  padding: 0 3px;
  border-radius: 4px;
}
/** 
 * Links
 */
a {
  color: #31b7bc;
  text-decoration: none;
}
a:hover {
  color: #58cdce;
  text-decoration: underline;
}
/**
 * Elements  
 */
img {
  width: 100%;
  vertical-align: middle;
}
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #e9e4e3;
  margin: 1.5625rem 0;
  padding: 0;
}
figure {
  margin: 0;
}
blockquote {
  color: #94b654;
  font-size: 1.25rem;
  padding: 1.5em 0;
  margin: 1.5em 0;
  border-top: 1px solid #bfb1ac;
  border-bottom: 1px solid #bfb1ac;
}
/**
 * Tables
 */
table {
  width: 100%;
  max-width: 100%;
  margin: 0 0 1em;
  border-collapse: collapse;
}
table th,
table td {
  padding: 0.5em;
  vertical-align: top;
  text-align: left;
}
table th {
  border-bottom: 2px solid #f4f2f1;
}
/**
 * Form  
 */
input[type=text],
input[type=password],
input[type=number],
input[type=search],
input[type=tel],
input[type=email],
input[type=url],
textarea {
  font-family: inherit;
  color: inherit;
  border: none;
  background: none;
  border-bottom: 1px solid #e9e4e3;
  padding: 0.3125rem 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
input[type=text]:focus,
input[type=password]:focus,
input[type=number]:focus,
input[type=search]:focus,
input[type=tel]:focus,
input[type=email]:focus,
input[type=url]:focus,
textarea:focus {
  outline: none;
  border-bottom: 1px solid #495a6b;
}
input[type=text]:disabled,
input[type=password]:disabled,
input[type=number]:disabled,
input[type=search]:disabled,
input[type=tel]:disabled,
input[type=email]:disabled,
input[type=url]:disabled,
textarea:disabled {
  background: #ffffff;
  opacity: 0.8;
  color: #bfb1ac;
  cursor: not-allowed;
}
input[type=text].is-populated,
input[type=password].is-populated,
input[type=number].is-populated,
input[type=search].is-populated,
input[type=tel].is-populated,
input[type=email].is-populated,
input[type=url].is-populated,
textarea.is-populated {
  border-bottom-color: #495a6b;
}
textarea {
  height: 5.8em;
  /* three rows of text */
  resize: vertical;
}
label {
  display: inline-block;
}
/**
 * Form Validation
 */
/* stylelint-disable selector-class-pattern  */
.field-validation-valid,
.field-validation-error {
  display: block;
  margin-top: 1.25rem;
  font-size: 0.875rem;
}
.field-validation-valid {
  display: none;
}
.input-validation-error {
  border-color: #e94f35 !important;
}
.validation-message {
  font-size: 0.75em;
  color: #e94f35;
}
/* stylelint-enable */
/** 
 * Print styles.
 * Inlined to avoid required HTTP connection.
 */
@media print {
  @page {
    margin: 0.5cm;
  }
  *,
  *:before,
  *:after {
    background: transparent !important;
    color: #000 !important;
    /* Black prints faster: http://www.sanbeiji.com/archives/953 */
    -webkit-box-shadow: none !important;
            box-shadow: none !important;
    text-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
  /* remove Episerver bar from print */
  #epi-quickNavigator {
    /* stylelint-disable-line */
    display: none !important;
  }
}
@font-face {
  font-family: AdelleSans;
  src: url("/assets/core/fonts/AdelleSansW01-Thin.woff2") format("woff2"), url("/assets/core/fonts/AdelleSansW01-Thin.woff") format("woff"), url("/assets/core/fonts/AdelleSansW01-Thin.ttf") format("truetype");
  font-weight: 100;
}
@font-face {
  font-family: AdelleSans;
  src: url("/assets/core/fonts/AdelleSansW01-Light.woff2") format("woff2"), url("/assets/core/fonts/AdelleSansW01-Light.woff") format("woff"), url("/assets/core/fonts/AdelleSansW01-Light.ttf") format("truetype");
  font-weight: 200;
}
@font-face {
  font-family: AdelleSans;
  src: url("/assets/core/fonts/AdelleSansW01-Regular.woff2") format("woff2"), url("/assets/core/fonts/AdelleSansW01-Regular.woff") format("woff"), url("/assets/core/fonts/AdelleSansW01-Regular.ttf") format("truetype");
  font-weight: normal;
}
@font-face {
  font-family: AdelleSans;
  src: url("/assets/core/fonts/AdelleSansW01-Bold.woff2") format("woff2"), url("/assets/core/fonts/AdelleSansW01-Bold.woff") format("woff"), url("/assets/core/fonts/AdelleSansW01-Bold.ttf") format("truetype");
  font-weight: bold;
}
/**
 * Sets font size in pixels and convert them to em with fallback for IE.
 */
/**
 * Sets font size in pixels and convert them to em with fallback for IE.
 */
/**
 * Vertical alignment utilities
 * Depends on an appropriate `display` value.
 */
.u-alignBaseline {
  vertical-align: baseline !important;
}
.u-alignBottom {
  vertical-align: bottom !important;
}
.u-alignMiddle {
  vertical-align: middle !important;
}
.u-alignTop {
  vertical-align: top !important;
}
.u-alignCenter {
  margin-left: auto !important;
  margin-right: auto !important;
}
.u-borderN {
  border: none;
}
.u-borderH {
  border-top: 1px solid #e9e4e3 !important;
  border-bottom: 1px solid #e9e4e3 !important;
}
.u-borderB {
  border-bottom: 1px solid #e9e4e3 !important;
}
.u-borderL {
  border-left: 1px solid #e9e4e3 !important;
}
.u-borderColorOat {
  border-color: #d4cac8 !important;
}
/**
* Add classes for common colors.
*/
.u-colorText {
  color: #595857;
}
.u-colorTextLight {
  color: #bfb1ac;
}
.u-colorWhite {
  color: #fff;
}
.u-colorBlue {
  color: #18274a;
}
.u-colorCliff {
  color: #8b7e79;
}
.u-colorSnow {
  color: #e9e4e3;
}
.u-colorGranite {
  color: #595857;
}
.u-colorClay {
  color: #bfb1ac;
}
.u-colorBgBlue {
  background-color: #18274a;
}
.u-colorBgClay {
  background-color: #bfb1ac;
}
.u-colorBgMidnight {
  background-color: #495a6b;
}
.u-colorBgSnow {
  background-color: #e9e4e3;
}
.u-colorBgOat {
  background-color: #d4cac8;
}
/**
 * Crop image utilities
 * Provide image cropping, base on provided ratio. 
 * DEFAULT RATIO: 66% of the element width
 * Code snipet:
 *  <div class="u-crop-image">
 *      <img src="" />
 *  </div>
*/
.u-crop-image {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 66%;
  overflow: hidden;
}
.u-crop-image img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
  min-height: 100%;
  min-width: 100%;
}
/* stylelint-disable selector-no-qualifying-type */
/**
* Display-type utilities
*/
.u-hidden,
.u-xsm-block,
.u-xsm-inline,
.u-xsm-inlineBlock,
.u-xsm-tableCell,
.u-xsm-flex,
.u-sm-block,
.u-sm-inline,
.u-sm-inlineBlock,
.u-sm-tableCell,
.u-sm-flex,
.u-md-block,
.u-md-inline,
.u-md-inlineBlock,
.u-md-tableCell,
.u-md-flex,
.u-lg-block,
.u-lg-inline,
.u-lg-inlineBlock,
.u-lg-tableCell,
.u-lg-flex,
.u-xlg-block,
.u-xlg-inline,
.u-xlg-inlineBlock,
.u-xlg-tableCell,
.u-xlg-flex {
  display: none !important;
}
.u-hiddenAlt {
  visibility: hidden !important;
}
/**
* Completely remove from the flow but leave available to screen readers.
*/
.u-hiddenVisually {
  position: absolute !important;
  overflow: hidden !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
}
.u-block {
  display: block !important;
}
.u-inline {
  display: inline !important;
}
/**
* 1. Fix for Firefox bug: an image styled `max-width:100%` within an
* inline-block will display at its default size, and not limit its width to
* 100% of an ancestral container.
*/
.u-inlineBlock {
  display: inline-block !important;
  max-width: 100%;
  /* 1 */
}
.u-table {
  display: table !important;
}
.u-tableRow {
  display: table-row !important;
}
.u-tableCell {
  display: table-cell !important;
}
.u-flex {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
}
.u-faded {
  opacity: 0.7;
}
/**
* Show/hide depending on Media Query breakpoints. 
*/
@media only screen and (min-width: 26.25em), print {
  .u-xsm-hidden {
    display: none !important;
  }
  .u-xsm-block {
    display: block !important;
  }
  .u-xsm-inline {
    display: inline !important;
  }
  .u-xsm-inlineBlock {
    display: inline-block !important;
    max-width: 100%;
    /* 1 */
  }
  .u-xsm-tableCell {
    display: table-cell !important;
  }
  .u-xsm-flex {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }
}
@media only screen and (min-width: 34em), print {
  .u-sm-hidden {
    display: none !important;
  }
  .u-sm-block {
    display: block !important;
  }
  .u-sm-inline {
    display: inline !important;
  }
  .u-sm-inlineBlock {
    display: inline-block !important;
    max-width: 100%;
    /* 1 */
  }
  .u-sm-tableCell {
    display: table-cell !important;
  }
  .u-sm-flex {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }
}
@media only screen and (min-width: 48em), print {
  .u-md-hidden {
    display: none !important;
  }
  .u-md-block {
    display: block !important;
  }
  .u-md-inline {
    display: inline !important;
  }
  .u-md-inlineBlock {
    display: inline-block !important;
    max-width: 100%;
    /* 1 */
  }
  .u-md-tableCell {
    display: table-cell !important;
  }
  .u-md-flex {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }
}
@media only screen and (min-width: 57.5em), print {
  .u-lg-hidden {
    display: none !important;
  }
  .u-lg-block {
    display: block !important;
  }
  .u-lg-inline {
    display: inline !important;
  }
  .u-lg-inlineBlock {
    display: inline-block !important;
    max-width: 100%;
    /* 1 */
  }
  .u-lg-tableCell {
    display: table-cell !important;
  }
  .u-lg-flex {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }
}
@media only screen and (min-width: 64em) {
  .u-xlg-hidden {
    display: none !important;
  }
  .u-xlg-block {
    display: block !important;
  }
  .u-xlg-inline {
    display: inline !important;
  }
  .u-xlg-inlineBlock {
    display: inline-block !important;
    max-width: 100%;
    /* 1 */
  }
  .u-xlg-tableCell {
    display: table-cell !important;
  }
  .u-xlg-flex {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }
}
/**
 * Contain floats
 *
 * Make an element expand to contain floated children.
 * Uses pseudo-elements (micro clearfix).
 *
 * 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 the
 *    element.
 * 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;
}
/**
 * New block formatting context
 *
 * This affords some useful properties to the element. It won't wrap under
 * floats. Will also contain any floated children.

 * N.B. This will clip overflow. Use the alternative method below if this is
 * problematic.
 */
.u-nbfc {
  overflow: hidden !important;
}
/**
 * Floats
 */
.u-pullLeft {
  float: left !important;
}
.u-pullRight {
  float: right !important;
}
.u-clear {
  clear: both;
}
/**
 * Clean link
 *
 * A link without any text-decoration at all.
 */
.u-linkClean,
.u-linkClean:hover,
.u-linkClean:focus,
.u-linkClean:active {
  text-decoration: none !important;
}
/**
 * Link complex
 *
 * A common pattern is to have a link with several pieces of text and/or an
 * icon, where only one piece of text should display the underline when the
 * link is the subject of user interaction.
 *
 * Example HTML:
 *
 * <a class="u-linkComplex" href="#">
 *   Link complex
 *   <span class="u-linkComplexTarget">target</span>
 * </a>
 */
.u-linkComplex,
.u-linkComplex:hover,
.u-linkComplex:focus,
.u-linkComplex:active {
  text-decoration: none !important;
}
.u-linkComplex:hover .u-linkComplexTarget,
.u-linkComplex:focus .u-linkComplexTarget,
.u-linkComplex:active .u-linkComplexTarget {
  text-decoration: underline !important;
}
/**
 * Block-level link
 *
 * Combination of traits commonly used in vertical navigation lists.
 */
.u-linkBlock,
.u-linkBlock:hover,
.u-linkBlock:focus,
.u-linkBlock:active {
  display: block !important;
  text-decoration: none !important;
}
/**
 * Changes a link to look like plain text.
 */
.u-linkText {
  color: #595857;
}
.u-linkOutline {
  outline: 2px solid #c8efef !important;
  outline-offset: 2px !important;
}
.u-linkTextReference {
  font-size: 0.875rem;
  vertical-align: 0.4em;
}
/* 
 * Offset Before 
 * .u-xx-before1of2 
 */
/* 
 * Offset After
 * .u-xx-after1of2 
 */
.u-posAbsolute {
  position: absolute !important;
}
/**
 * Pins to all corners by default. But when a width and/or height are
 * provided, the element will be centered in its nearest relatively-positioned
 * ancestor.
 */
.u-posAbsoluteCenter {
  bottom: 0 !important;
  left: 0 !important;
  margin: auto !important;
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
}
.u-posAbsoluteMiddle {
  bottom: 0 !important;
  margin: auto !important;
  position: absolute !important;
  top: 0 !important;
}
/**
 * 1. Make sure fixed elements are promoted into a new layer, for performance
 *    reasons.
 */
.u-posFixed {
  position: fixed !important;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  /* 1 */
}
.u-posRelative {
  position: relative !important;
}
.u-posStatic {
  position: static !important;
}
@media print {
  .u-printHidden {
    display: none !important;
  }
  .u-printSizeFull {
    width: 100% !important;
    display: block !important;
  }
}
/*
    Size Utility
    
    This generates size classes that can be used with the Grid component. 
    The classes are only active from a specified breakpoint.

    For example if you apply .u-md-size1of2 to an element
    it will get width 50% when the screen-width is larger than medium width (@bpMedium).

    Adding another class of .u-lg-size1of4 would mean the element gets 25% when @bpLarge breakpoint gets active.
*/
.u-size1of1 {
  width: 100% !important;
}
.u-sizeFullHeight {
  height: 100% !important;
}
.u-sizeAuto {
  width: auto !important;
}
.u-sizeMin40 {
  min-width: 40%;
}
/**
 * Size utilities
 * .u-size1of4
 * .u-sm-size1of4
 */
/* Intrinsic widths
   ========================================================================== */
/**
     * Make an element the width of its parent.
     */
.u-size1of1 {
  width: 100% !important;
}
/**
     * Make an element fill the remaining space.
     * N.B. This will hide overflow.
     */
.u-sizeFill {
  display: block !important;
  overflow: hidden !important;
  width: auto !important;
}
.u-sizeAuto {
  width: auto !important;
}
.u-sizeMax1of2 {
  max-width: 585px;
}
.u-sizeMax2of3 {
  max-width: 780px;
}
.u-sizeMax1of3 {
  max-width: 390px;
}
/* Proportional widths
       ========================================================================== */
/**
     * Specify the proportional width of an object.
     *
     * 1. Use `flex-basis: auto` with a width to avoid box-sizing bug in IE10/11
     *    http://git.io/vllMD
     */
[class*="u-size"] {
  -ms-flex-preferred-size: auto !important;
      flex-basis: auto !important;
  /* 1 */
}
.u-size1of4 {
  width: 25% !important;
}
.u-size1of3 {
  width: 33.3% !important;
}
.u-size1of2 {
  width: 50% !important;
}
.u-size2of3 {
  width: 66.6% !important;
}
.u-size3of4 {
  width: 75% !important;
}
@media only screen and (min-width: 26.25em), print {
  /* Intrinsic widths
   ========================================================================== */
  /**
     * Make an element the width of its parent.
     */
  .u-xsm-size1of1 {
    width: 100% !important;
  }
  /**
     * Make an element fill the remaining space.
     * N.B. This will hide overflow.
     */
  .u-xsm-sizeFill {
    display: block !important;
    overflow: hidden !important;
    width: auto !important;
  }
  .u-xsm-sizeAuto {
    width: auto !important;
  }
  .u-xsm-sizeMax1of2 {
    max-width: 585px;
  }
  .u-xsm-sizeMax2of3 {
    max-width: 780px;
  }
  .u-xsm-sizeMax1of3 {
    max-width: 390px;
  }
  /* Proportional widths
       ========================================================================== */
  /**
     * Specify the proportional width of an object.
     *
     * 1. Use `flex-basis: auto` with a width to avoid box-sizing bug in IE10/11
     *    http://git.io/vllMD
     */
  [class*="u-xsm-size"] {
    -ms-flex-preferred-size: auto !important;
        flex-basis: auto !important;
    /* 1 */
  }
  .u-xsm-size1of4 {
    width: 25% !important;
  }
  .u-xsm-size1of3 {
    width: 33.3% !important;
  }
  .u-xsm-size1of2 {
    width: 50% !important;
  }
  .u-xsm-size2of3 {
    width: 66.6% !important;
  }
  .u-xsm-size3of4 {
    width: 75% !important;
  }
}
@media only screen and (min-width: 34em), print {
  /* Intrinsic widths
   ========================================================================== */
  /**
     * Make an element the width of its parent.
     */
  .u-sm-size1of1 {
    width: 100% !important;
  }
  /**
     * Make an element fill the remaining space.
     * N.B. This will hide overflow.
     */
  .u-sm-sizeFill {
    display: block !important;
    overflow: hidden !important;
    width: auto !important;
  }
  .u-sm-sizeAuto {
    width: auto !important;
  }
  .u-sm-sizeMax1of2 {
    max-width: 585px;
  }
  .u-sm-sizeMax2of3 {
    max-width: 780px;
  }
  .u-sm-sizeMax1of3 {
    max-width: 390px;
  }
  /* Proportional widths
       ========================================================================== */
  /**
     * Specify the proportional width of an object.
     *
     * 1. Use `flex-basis: auto` with a width to avoid box-sizing bug in IE10/11
     *    http://git.io/vllMD
     */
  [class*="u-sm-size"] {
    -ms-flex-preferred-size: auto !important;
        flex-basis: auto !important;
    /* 1 */
  }
  .u-sm-size1of4 {
    width: 25% !important;
  }
  .u-sm-size1of3 {
    width: 33.3% !important;
  }
  .u-sm-size1of2 {
    width: 50% !important;
  }
  .u-sm-size2of3 {
    width: 66.6% !important;
  }
  .u-sm-size3of4 {
    width: 75% !important;
  }
}
@media only screen and (min-width: 48em), print {
  /* Intrinsic widths
   ========================================================================== */
  /**
     * Make an element the width of its parent.
     */
  .u-md-size1of1 {
    width: 100% !important;
  }
  /**
     * Make an element fill the remaining space.
     * N.B. This will hide overflow.
     */
  .u-md-sizeFill {
    display: block !important;
    overflow: hidden !important;
    width: auto !important;
  }
  .u-md-sizeAuto {
    width: auto !important;
  }
  .u-md-sizeMax1of2 {
    max-width: 585px;
  }
  .u-md-sizeMax2of3 {
    max-width: 780px;
  }
  .u-md-sizeMax1of3 {
    max-width: 390px;
  }
  /* Proportional widths
       ========================================================================== */
  /**
     * Specify the proportional width of an object.
     *
     * 1. Use `flex-basis: auto` with a width to avoid box-sizing bug in IE10/11
     *    http://git.io/vllMD
     */
  [class*="u-md-size"] {
    -ms-flex-preferred-size: auto !important;
        flex-basis: auto !important;
    /* 1 */
  }
  .u-md-size1of4 {
    width: 25% !important;
  }
  .u-md-size1of3 {
    width: 33.3% !important;
  }
  .u-md-size1of2 {
    width: 50% !important;
  }
  .u-md-size2of3 {
    width: 66.6% !important;
  }
  .u-md-size3of4 {
    width: 75% !important;
  }
}
@media only screen and (min-width: 57.5em), print {
  /* Intrinsic widths
   ========================================================================== */
  /**
     * Make an element the width of its parent.
     */
  .u-lg-size1of1 {
    width: 100% !important;
  }
  /**
     * Make an element fill the remaining space.
     * N.B. This will hide overflow.
     */
  .u-lg-sizeFill {
    display: block !important;
    overflow: hidden !important;
    width: auto !important;
  }
  .u-lg-sizeAuto {
    width: auto !important;
  }
  .u-lg-sizeMax1of2 {
    max-width: 585px;
  }
  .u-lg-sizeMax2of3 {
    max-width: 780px;
  }
  .u-lg-sizeMax1of3 {
    max-width: 390px;
  }
  /* Proportional widths
       ========================================================================== */
  /**
     * Specify the proportional width of an object.
     *
     * 1. Use `flex-basis: auto` with a width to avoid box-sizing bug in IE10/11
     *    http://git.io/vllMD
     */
  [class*="u-lg-size"] {
    -ms-flex-preferred-size: auto !important;
        flex-basis: auto !important;
    /* 1 */
  }
  .u-lg-size1of4 {
    width: 25% !important;
  }
  .u-lg-size1of3 {
    width: 33.3% !important;
  }
  .u-lg-size1of2 {
    width: 50% !important;
  }
  .u-lg-size2of3 {
    width: 66.6% !important;
  }
  .u-lg-size3of4 {
    width: 75% !important;
  }
}
/*
    Change the default spacing between and inside components.

    Example HTML: 

    <div class="u-marginTlg u-marginBmd"> 			// large margin-top and medium margin-bottom
        <h1 class="u-marginTz">Hello World</h1>		// zero margin-top
    </div>

    Directions:
        A = all
        T = top 
        B = bottom
        R = right
        L = left
        H = horizontal (right and left)
        V = vertical (top and bottom)

    Sizes:
        z  = zero
        xsm = xsmall
        sm  = small
        md  = medium
        lg  = large
        xlg = xlarge
*/
/* stylelint-disable rule-non-nested-empty-line-before */
/** 
 * Margins, .u-margin{direction}{size}
 */
.u-marginAz {
  margin: 0 !important;
}
.u-marginTz {
  margin-top: 0 !important;
}
.u-marginBz {
  margin-bottom: 0 !important;
}
.u-marginRz {
  margin-right: 0 !important;
}
.u-marginLz {
  margin-left: 0 !important;
}
.u-marginHz {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.u-marginVz {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.u-marginHauto {
  margin-left: auto;
  margin-right: auto;
}
.u-marginAxsm {
  margin: 0.9375rem !important;
}
.u-marginAsm {
  margin: 1.25rem !important;
}
.u-marginAmd,
.u-marginA {
  margin: 1.5625rem !important;
}
.u-marginAlg {
  margin: 1.875rem !important;
}
.u-marginAxlg {
  margin: 2.5rem !important;
}
.u-marginHxsm {
  margin-left: 0.9375rem !important;
  margin-right: 0.9375rem !important;
}
.u-marginHsm {
  margin-left: 1.25rem !important;
  margin-right: 1.25rem !important;
}
.u-marginHmd,
.u-marginH {
  margin-left: 1.5625rem !important;
  margin-right: 1.5625rem !important;
}
.u-marginHlg {
  margin-left: 1.875rem !important;
  margin-right: 1.875rem !important;
}
.u-marginHxlg {
  margin-left: 2.5rem !important;
  margin-right: 2.5rem !important;
}
.u-marginVxsm {
  margin-top: 0.9375rem !important;
  margin-bottom: 0.9375rem !important;
}
.u-marginVsm {
  margin-top: 1.25rem !important;
  margin-bottom: 1.25rem !important;
}
.u-marginVmd,
.u-marginV {
  margin-top: 1.5625rem !important;
  margin-bottom: 1.5625rem !important;
}
.u-marginVlg {
  margin-top: 1.875rem !important;
  margin-bottom: 1.875rem !important;
}
.u-marginVxlg {
  margin-top: 2.5rem !important;
  margin-bottom: 2.5rem !important;
}
.u-marginTxsm {
  margin-top: 0.9375rem !important;
}
.u-marginTsm {
  margin-top: 1.25rem !important;
}
.u-marginTmd,
.u-marginT {
  margin-top: 1.5625rem !important;
}
.u-marginTlg {
  margin-top: 1.875rem !important;
}
.u-marginTxlg {
  margin-top: 2.5rem !important;
}
.u-marginBxsm {
  margin-bottom: 0.9375rem !important;
}
.u-marginBsm {
  margin-bottom: 1.25rem !important;
}
.u-marginBmd,
.u-marginB {
  margin-bottom: 1.5625rem !important;
}
.u-marginBlg {
  margin-bottom: 1.875rem !important;
}
.u-marginBxlg {
  margin-bottom: 2.5rem !important;
}
.u-marginRxsm {
  margin-right: 0.9375rem !important;
}
.u-marginRsm {
  margin-right: 1.25rem !important;
}
.u-marginRmd,
.u-marginR {
  margin-right: 1.5625rem !important;
}
.u-marginRlg {
  margin-right: 1.875rem !important;
}
.u-marginRxlg {
  margin-right: 2.5rem !important;
}
.u-marginLxsm {
  margin-left: 0.9375rem !important;
}
.u-marginLsm {
  margin-left: 1.25rem !important;
}
.u-marginLmd,
.u-marginL {
  margin-left: 1.5625rem !important;
}
.u-marginLlg {
  margin-left: 1.875rem !important;
}
.u-marginLxlg {
  margin-left: 2.5rem !important;
}
/** 
 * Paddings, .u-padding{direction}{size}
 */
.u-paddingAz {
  padding: 0 !important;
}
.u-paddingTz {
  padding-top: 0 !important;
}
.u-paddingBz {
  padding-bottom: 0 !important;
}
.u-paddingRz {
  padding-right: 0 !important;
}
.u-paddingLz {
  padding-left: 0 !important;
}
.u-paddingHz {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.u-paddingVz {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.u-paddingAxsm {
  padding: 0.9375rem !important;
}
.u-paddingAsm {
  padding: 1.25rem !important;
}
.u-paddingAmd,
.u-paddingA {
  padding: 1.5625rem !important;
}
.u-paddingAlg {
  padding: 1.875rem !important;
}
.u-paddingAxlg {
  padding: 2.5rem !important;
}
.u-paddingHxsm {
  padding-left: 0.9375rem !important;
  padding-right: 0.9375rem !important;
}
.u-paddingHsm {
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
}
.u-paddingHmd,
.u-paddingH {
  padding-left: 1.5625rem !important;
  padding-right: 1.5625rem !important;
}
.u-paddingHlg {
  padding-left: 1.875rem !important;
  padding-right: 1.875rem !important;
}
.u-paddingHxlg {
  padding-left: 2.5rem !important;
  padding-right: 2.5rem !important;
}
.u-paddingVxsm {
  padding-top: 0.9375rem !important;
  padding-bottom: 0.9375rem !important;
}
.u-paddingVsm {
  padding-top: 1.25rem !important;
  padding-bottom: 1.25rem !important;
}
.u-paddingVmd,
.u-paddingV {
  padding-top: 1.5625rem !important;
  padding-bottom: 1.5625rem !important;
}
.u-paddingVlg {
  padding-top: 1.875rem !important;
  padding-bottom: 1.875rem !important;
}
.u-paddingVxlg {
  padding-top: 2.5rem !important;
  padding-bottom: 2.5rem !important;
}
.u-paddingTxsm {
  padding-top: 0.9375rem !important;
}
.u-paddingTsm {
  padding-top: 1.25rem !important;
}
.u-paddingTmd,
.u-paddingT {
  padding-top: 1.5625rem !important;
}
.u-paddingTlg {
  padding-top: 1.875rem !important;
}
.u-paddingTxlg {
  padding-top: 2.5rem !important;
}
.u-paddingBxsm {
  padding-bottom: 0.9375rem !important;
}
.u-paddingBsm {
  padding-bottom: 1.25rem !important;
}
.u-paddingBmd,
.u-paddingB {
  padding-bottom: 1.5625rem !important;
}
.u-paddingBlg {
  padding-bottom: 1.875rem !important;
}
.u-paddingBxlg {
  padding-bottom: 2.5rem !important;
}
.u-paddingRxsm {
  padding-right: 0.9375rem !important;
}
.u-paddingRsm {
  padding-right: 1.25rem !important;
}
.u-paddingRmd,
.u-paddingR {
  padding-right: 1.5625rem !important;
}
.u-paddingRlg {
  padding-right: 1.875rem !important;
}
.u-paddingRxlg {
  padding-right: 2.5rem !important;
}
.u-paddingLxsm {
  padding-left: 0.9375rem !important;
}
.u-paddingLsm {
  padding-left: 1.25rem !important;
}
.u-paddingLmd,
.u-paddingL {
  padding-left: 1.5625rem !important;
}
.u-paddingLlg {
  padding-left: 1.875rem !important;
}
.u-paddingLxlg {
  padding-left: 2.5rem !important;
}
/** 
 * Collapsing margins
 * Negative margins to pull content beyond paddings, using e.g. margin-top: -1em;
 */
.u-pullHxsm {
  margin-left: -0.9375rem !important;
  margin-right: -0.9375rem !important;
}
.u-pullHsm {
  margin-left: -1.25rem !important;
  margin-right: -1.25rem !important;
}
.u-pullHmd,
.u-pullH {
  margin-left: -1.5625rem !important;
  margin-right: -1.5625rem !important;
}
.u-pullHlg {
  margin-left: -1.875rem !important;
  margin-right: -1.875rem !important;
}
.u-pullHxlg {
  margin-left: -2.5rem !important;
  margin-right: -2.5rem !important;
}
.u-pullVxsm {
  margin-top: -0.9375rem !important;
  margin-bottom: -0.9375rem !important;
}
.u-pullVsm {
  margin-top: -1.25rem !important;
  margin-bottom: -1.25rem !important;
}
.u-pullVmd,
.u-pullV {
  margin-top: -1.5625rem !important;
  margin-bottom: -1.5625rem !important;
}
.u-pullVlg {
  margin-top: -1.875rem !important;
  margin-bottom: -1.875rem !important;
}
.u-pullVxlg {
  margin-top: -2.5rem !important;
  margin-bottom: -2.5rem !important;
}
.u-pullTxsm {
  margin-top: -0.9375rem;
}
.u-pullTsm {
  margin-top: -1.25rem;
}
.u-pullTmd,
.u-pullT {
  margin-top: -1.5625rem;
}
.u-pullTlg {
  margin-top: -1.875rem;
}
.u-pullTxlg {
  margin-top: -2.5rem;
}
/**
 * Mixins used to generate classes.
 */
/* stylelint-enable */
/**
 * Text font size.
 */
.u-textXXSmall {
  font-size: 0.625rem !important;
}
.u-textXSmall {
  font-size: 0.75rem !important;
}
.u-textSmall {
  font-size: 0.875rem !important;
}
.u-textMedium,
.u-textNormal {
  font-size: 1rem !important;
}
.u-textLarge {
  font-size: 1.125rem !important;
}
.u-textXLarge {
  font-size: 1.25rem !important;
}
@media only screen and (max-width: 48em) {
  .u-textLarge-onlySm {
    font-size: 1.125rem !important;
  }
}
/**
 * Text font weights
 */
.u-textWeightThin {
  font-weight: 100 !important;
}
.u-textWeightLight {
  font-weight: 200 !important;
}
.u-textWeightNormal {
  font-weight: normal !important;
}
.u-textWeightBold {
  font-weight: bold !important;
}
/**
 * Word breaking
 *
 * Break strings when their length exceeds the width of their container.
 */
.u-textBreak {
  word-wrap: break-word !important;
}
/**
 * Horizontal text alignment
 */
.u-textCenter {
  text-align: center !important;
}
.u-textLeft {
  text-align: left !important;
}
.u-textRight {
  text-align: right !important;
}
/**
 * Prevent whitespace wrapping
 */
.u-textNoWrap {
  white-space: nowrap !important;
}
/**
 * Text truncation
 *
 * Prevent text from wrapping onto multiple lines, and truncate with an
 * ellipsis.
 *
 * 1. Ensure that the node has a maximum width after which truncation can
 *    occur.
 */
.u-textTruncate {
  max-width: 100%;
  /* 1 */
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
/*
 * Inherit the ancestor's text color.
 */
.u-textInheritColor {
  color: inherit !important;
}
.u-textLineHeightLg {
  line-height: 1.7em;
}
.u-textLineHeightReset {
  line-height: 0;
}
/*#

Display badges with optional arrow pointing in any of following directions: top, bottom, right, left. 
The badge can display borders using Badge--bordered.

Examples:

<div>
    <span class="Badge Badge--arrowTop">The content of the badge.</span>
    <span class="Badge Badge--arrowRight">The content of the badge.</span>
    <span class="Badge Badge--arrowBottom">The content of the badge.</span>
    <span class="Badge Badge--arrowLeft">The content of the badge.</span>
</div>
<div>
    <span class="Badge Badge--bordered Badge--arrowTop">The content of the badge.</span>
    <span class="Badge Badge--bordered Badge--arrowRight">The content of the badge.</span>
    <span class="Badge Badge--bordered Badge--arrowBottom">The content of the badge.</span>
    <span class="Badge Badge--bordered Badge--arrowLeft">The content of the badge.</span>
</div>

*/
.Badge {
  background: #e9e4e3;
  border: 1px solid #e9e4e3;
  display: inline-block;
  font-size: 0.75rem;
  position: relative;
  padding: 0.9375rem;
  border-radius: 3px;
}
.Badge:before {
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border: solid transparent;
  border-color: transparent;
  border-width: 8px;
}
.Badge--arrowTop {
  margin-top: 11px;
}
.Badge--arrowTop:before {
  bottom: 100%;
  left: 50%;
  border-bottom-color: #e9e4e3;
  margin-left: -8px;
}
.Badge--arrowBottom {
  margin-bottom: 11px;
}
.Badge--arrowBottom:before {
  top: 100%;
  left: 50%;
  border-top-color: #e9e4e3;
  margin-left: -8px;
}
.Badge--arrowRight {
  margin-right: 11px;
}
.Badge--arrowRight:before {
  left: 100%;
  top: 50%;
  border-left-color: #e9e4e3;
  margin-top: -8px;
}
.Badge--arrowLeft {
  margin-left: 11px;
}
.Badge--arrowLeft:before {
  right: 100%;
  top: 50%;
  border-right-color: #e9e4e3;
  margin-top: -8px;
}
.Badge--bordered {
  background: #fff;
}
.Badge--bordered:after {
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border: solid transparent;
  border-color: transparent;
  border-width: 7px;
}
.Badge--bordered.Badge--arrowTop:after {
  bottom: 100%;
  left: 50%;
  border-bottom-color: #fff;
  margin-left: -7px;
}
.Badge--bordered.Badge--arrowBottom:after {
  top: 100%;
  left: 50%;
  border-top-color: #fff;
  margin-left: -7px;
}
.Badge--bordered.Badge--arrowRight:after {
  left: 100%;
  top: 50%;
  border-left-color: #fff;
  margin-top: -7px;
}
.Badge--bordered.Badge--arrowLeft:after {
  right: 100%;
  top: 50%;
  border-right-color: #fff;
  margin-top: -7px;
}
.BlockMargin {
  margin-top: 1.5625rem;
}
@media only screen and (min-width: 73.125em) {
  .BlockMargin--medium {
    margin-top: 3.125rem;
  }
}
@media only screen and (min-width: 48em), print {
  .BlockMargin--large {
    margin-top: 3.125rem;
  }
}
@media only screen and (min-width: 73.125em) {
  .BlockMargin--large {
    margin-top: 4.6875rem;
  }
}
/*#
The button classes are best applied to links and buttons.
These components can be used in forms, as calls to action, or as part of the general UI of the site/app.
There are two themes; `Button` (default) and `Button--bordered`. Default is used as the primary button and "bordered" as secondary. 
For each of the themes there are four colors; "midnight" (default), "ocean", "sun" and "white".
- `Button--sun` is used for **contact buttons**.
- `Button--ocean` is used for **content offers**.
- `Button` is used for  **all other actions**.
- `Button--white` is used when button is on solid background together with `Button--bordered`.
<div>
    <button class="Button">Button tag</button> <a href="" class="Button">Anchor link</a> <a href="" class="Link">Link with Link component</a>
    <table class="Table">
        <thead>
            <tr>
                <th></th>
                <th>Normal</th>
                <th>Hover</th>
                <th>Active</th>
                <th>Disabled</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="5">
                    <div class="u-marginTmd u-textWeightBold">.Button (default)</div>
                </td>
            </tr>
            <tr>
                <td><i>(default)</i></td>
                <td><a href="" class="Button">Call to action</a></td>
                <td><a href="" class="Button is-hover">Call to action</a></td>
                <td><a href="" class="Button is-active">Call to action</a></td>
                <td><a href="" class="Button is-disabled">Call to action</a></td>
            </tr>
            
            <tr>
                <td><code>.Button--midnight</code></td>
                <td><a href="" class="Button Button--midnight">Call to action</a></td>
                <td><a href="" class="Button Button--midnight is-hover">Call to action</a></td>
                <td><a href="" class="Button Button--midnight is-active">Call to action</a></td>
                <td><a href="" class="Button Button--midnight is-disabled">Call to action</a></td>
            </tr>
            <tr>
                <td><code>.Button--sun</code></td>
                <td><a href="" class="Button Button--sun">Call to action</a></td>
                <td><a href="" class="Button Button--sun is-hover">Call to action</a></td>
                <td><a href="" class="Button Button--sun is-active">Call to action</a></td>
                <td><a href="" class="Button Button--sun is-disabled">Call to action</a></td>
            </tr>
            <tr>
                <td colspan="5">
                    <div class="u-marginTmd u-textWeightBold">.Button--bordered</div>
                </td>
            </tr>
            <tr>
                <td><i>(default)</i></td>
                <td><a href="" class="Button Button--bordered">Call to action</a></td>
                <td><a href="" class="Button Button--bordered is-hover">Call to action</a></td>
                <td><a href="" class="Button Button--bordered is-active">Call to action</a></td>
                <td><a href="" class="Button Button--bordered is-disabled">Call to action</a></td>
            </tr>
            
            <tr>
                <td><code>.Button--midnight</code></td>
                <td><a href="" class="Button Button--bordered Button--midnight">Call to action</a></td>
                <td><a href="" class="Button Button--bordered Button--midnight is-hover">Call to action</a></td>
                <td><a href="" class="Button Button--bordered Button--midnight is-active">Call to action</a></td>
                <td><a href="" class="Button Button--bordered Button--midnight is-disabled">Call to action</a></td>
            </tr>
            <tr>
                <td><code>.Button--sun</code></td>
                <td><a href="" class="Button Button--bordered Button--sun">Call to action</a></td>
                <td><a href="" class="Button Button--bordered Button--sun is-hover">Call to action</a></td>
                <td><a href="" class="Button Button--bordered Button--sun is-active">Call to action</a></td>
                <td><a href="" class="Button Button--bordered Button--sun is-disabled">Call to action</a></td>
            </tr>
            
            <tr class="u-colorBgBlue u-colorTextWhite">
                <td><code>.Button--white</code></td>
                <td><a href="" class="Button Button--bordered Button--white">Call to action</a></td>
                <td><a href="" class="Button Button--bordered Button--white is-hover">Call to action</a></td>
                <td><a href="" class="Button Button--bordered Button--white is-active">Call to action</a></td>
                <td><a href="" class="Button Button--bordered Button--white is-disabled">Call to action</a></td>
            </tr>
        </tbody>
    </table>
</div>
*/
.Button {
  background: #31b7bc;
  cursor: pointer;
  display: inline-block;
  margin: 0;
  position: relative;
  text-align: center;
  text-decoration: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  font-size: 0.875rem;
  line-height: 1.4em;
  /* adjusts so that link button and <button> is equal height */
  vertical-align: middle;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  white-space: normal;
  -webkit-transition: 0.15s ease-in;
  transition: 0.15s ease-in;
  -webkit-transition-property: border, color, padding, background-color;
  transition-property: border, color, padding, background-color;
  color: #fff;
  padding: 0.7em 1.3em;
  border: 1px solid #31b7bc;
  /* every button type have borders so that they are all in the same height */
}
.Button:hover,
.Button.is-hover {
  border-color: #58cdce;
  background-color: #58cdce;
  text-decoration: none;
  color: #fff;
}
.Button--wide {
  padding-left: 1.875em;
  padding-right: 1.875em;
}
.Button--tall {
  padding-top: 1.25em;
  padding-bottom: 1.25em;
}
.Button--full {
  padding-left: 0.3em;
  padding-right: 0.3em;
  width: 100%;
}
.Button--white {
  background-color: #fff;
  border-color: #fff;
  color: #595857;
}
.Button--white:hover,
.Button--white.is-hover {
  color: #fff;
  background-color: #495a6b;
  border-color: #fff;
}
.Button--midnight {
  background-color: #495a6b;
  border-color: #495a6b;
}
.Button--midnight:hover,
.Button--midnight.is-hover {
  background-color: #778390;
  border-color: #778390;
}
.Button--sun {
  background-color: #f39200;
  border-color: #f39200;
}
.Button--sun:hover,
.Button--sun.is-hover {
  background-color: #f6ad40;
  border-color: #f6ad40;
}
.Button--bordered {
  background: transparent;
  color: #31b7bc;
}
.Button--bordered:hover,
.Button--bordered.is-hover {
  color: #fff;
  border-color: #31b7bc;
  background-color: #31b7bc;
}
.Button--bordered.Button--midnight {
  color: #495a6b;
}
.Button--bordered.Button--midnight:hover,
.Button--bordered.Button--midnight.is-hover {
  color: #fff;
  background-color: #495a6b;
  border-color: #495a6b;
}
.Button--bordered.Button--sun {
  color: #f39200;
}
.Button--bordered.Button--sun:hover,
.Button--bordered.Button--sun.is-hover {
  color: #fff;
  background-color: #f39200;
  border-color: #f39200;
}
.Button--bordered.Button--white {
  color: #fff;
}
.Button--bordered.Button--white:hover,
.Button--bordered.Button--white.is-hover {
  color: #18274a;
  background-color: #fff;
  border-color: #fff;
}
.Button {
  /* stylelint-disable no-duplicate-selectors */
}
.Button:active,
.Button.is-active {
  background-color: #e9e4e3 !important;
  border-color: #e9e4e3 !important;
  color: #595857;
}
.Button:disabled,
.Button.is-disabled {
  background-color: #e9e4e3;
  border-color: #e9e4e3;
  color: #d4cac8;
  pointer-events: none;
  cursor: default;
}
.Button--icon {
  padding-left: 0.5em;
  padding-right: 0.5em;
}
.Button--transparent {
  background-color: transparent;
  border-color: transparent;
}
.Button--transparent:active,
.Button--transparent.is-active,
.Button--transparent:hover,
.Button--transparent.is-hover {
  background-color: transparent !important;
  border-color: transparent !important;
}
.Button--loadable .Loading {
  display: none;
}
.Button--loadable.is-loading .Loading {
  display: block;
}
.Button--loadable .Loading-icon {
  top: 0.8em;
  position: relative;
}
.Button--download,
.Button--meganav,
.Button--loadMore,
.Button--subscribe {
  background-color: transparent;
  border-color: #495a6b;
  color: #495a6b;
}
.Button--download:hover,
.Button--meganav:hover,
.Button--loadMore:hover,
.Button--subscribe:hover,
.Button--download.is-hover,
.Button--meganav.is-hover,
.Button--loadMore.is-hover,
.Button--subscribe.is-hover {
  background-color: #495a6b;
  border-color: #495a6b;
  color: #fff;
}
/*#

Styling for custom checkboxes. Supports focus and disabled states.

Examples:

<div>
    <span class="Checkbox u-marginRsm">
        <input id="cb11" type="checkbox" name="newsletter" class="Checkbox-input">
        <label for="cb11" class="Checkbox-label">Tech newsletter</label>
    </span>

    <span class="Checkbox u-marginRsm">
        <input id="cb33" type="checkbox" name="newsletter" class="Checkbox-input" disabled>
        <label for="cb33" class="Checkbox-label">Disabled newsletter</label>
    </span>
</div>

*/
.Checkbox {
  position: relative;
  display: inline-block;
}
.Checkbox .Checkbox-input:disabled + .Checkbox-label,
.Checkbox.is-disabled .Checkbox-label {
  opacity: 0.5;
  cursor: not-allowed;
}
.Checkbox-input {
  opacity: 0;
  position: absolute;
}
.Checkbox-input:checked + .Checkbox-label:before {
  border-color: #495a6b;
}
.Checkbox-input:checked + .Checkbox-label:after {
  -webkit-transform: scale(0.7);
      -ms-transform: scale(0.7);
          transform: scale(0.7);
  opacity: 1;
}
.Checkbox-input:focus + .Checkbox-label:before {
  -webkit-box-shadow: 0 0 1px 1px #18274a;
          box-shadow: 0 0 1px 1px #18274a;
}
.Checkbox-label {
  padding-left: 1.5em;
  position: relative;
  cursor: pointer;
}
.Checkbox-label:before {
  content: " ";
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 1.2em;
  height: 1.2em;
  display: block;
  background-color: white;
  border: 1px solid #495a6b;
}
.Checkbox-label:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 1.2em;
  height: 1.2em;
  display: inline-block;
  z-index: 1;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNC45IDExLjUiPjxwYXRoIGQ9Ik0xNC44IDEuN0wxMy4yLjFjLS4xLS4xLS4zLS4xLS41IDBMNS4zIDcuNSAyLjIgNC40Yy0uMS0uMS0uMy0uMS0uNSAwTC4xIDZjLS4xLjEtLjEuMyAwIC41bDMuMyAzLjNMNSAxMS40Yy4xLjEuMy4xLjUgMGwxLjYtMS42IDcuNi03LjZjLjMtLjEuMy0uMy4xLS41eiIgZmlsbD0iIzFkMmU1MSIvPjwvc3ZnPg==);
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-transition: all 0.15s ease;
  transition: all 0.15s ease;
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
          transform: scale(0);
  opacity: 0;
}
.Checkbox--header .Checkbox-input:checked + .Checkbox-label:before,
.Checkbox--bordered .Checkbox-input:checked + .Checkbox-label:before {
  border-color: #fff;
}
.Checkbox--header .Checkbox-label:before,
.Checkbox--bordered .Checkbox-label:before {
  background-color: transparent;
  border-color: #fff;
}
.Checkbox--header .Checkbox-label:after,
.Checkbox--bordered .Checkbox-label:after {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNC45IDExLjUiPjxwYXRoIGQ9Ik0xNC44IDEuN0wxMy4yLjFjLS4xLS4xLS4zLS4xLS41IDBMNS4zIDcuNSAyLjIgNC40Yy0uMS0uMS0uMy0uMS0uNSAwTC4xIDZjLS4xLjEtLjEuMyAwIC41bDMuMyAzLjNMNSAxMS40Yy4xLjEuMy4xLjUgMGwxLjYtMS42IDcuNi03LjZjLjMtLjEuMy0uMy4xLS41eiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==);
}
.Checkbox--transparent .Checkbox-label:before {
  background-color: transparent;
}
/*#

Custom styling for File inputs.

Examples:

<div>
    <span class="File">
        <input type="file" id="file1" class="File-input" />
        
        <label for="file1" class="File-label" data-selection="filename.jpg">
            <span class="File-button Button Button--midnight Button--bordered">Upload file</span>
        </label>
    </span>
</div>

*/
/*<span class="File-selection">filename.jpg</span>*/
.File-input {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}
.File-input:focus + .File-label .File-button {
  outline: 2px solid #778390;
  outline: -webkit-focus-ring-color auto 5px;
}
.File-label {
  cursor: pointer;
}
.File-selection {
  margin-left: 0.9375rem;
}
/*#

<h1 class="Heading Heading--largeBold">Heading large bold</h1>
<h2 class="Heading Heading--large">Heading large</h2>
<h3 class="Heading Heading--mediumBold">Heading medium bold</h3>
<h4 class="Heading Heading--medium">Heading medium</h4>
<h5 class="Heading Heading--smallBold">Heading small bold</h5>
<h6 class="Heading Heading--small">Heading small</h6>
<h6 class="Heading Heading--xSmall">Heading xSmall</h6>

*/
h1,
h2,
h3,
h4,
h5,
h6,
.Heading {
  font-size: 1.875rem;
  font-weight: bold;
  display: block;
  margin-top: 0;
  margin-bottom: 0.5em;
  color: #18274a;
  line-height: 1.25em;
}
a:hover h1,
a:hover h2,
a:hover h3,
a:hover h4,
a:hover h5,
a:hover h6,
a:hover .Heading {
  color: #58cdce;
}
.Heading--largeBold,
h1 {
  font-size: 1.875rem;
  font-weight: bold;
}
@media only screen and (min-width: 48em), print {
  .Heading--largeBold,
  h1 {
    font-size: 2.5rem;
  }
}
.Heading--large,
h2 {
  font-size: 1.875rem;
  font-weight: normal;
}
@media only screen and (min-width: 48em), print {
  .Heading--large,
  h2 {
    font-size: 2.5rem;
  }
}
.Heading--mediumBold,
h3 {
  font-size: 1.25rem;
  font-weight: bold;
}
@media only screen and (min-width: 48em), print {
  .Heading--mediumBold,
  h3 {
    font-size: 1.875rem;
  }
}
.Heading--medium,
h4 {
  font-size: 1.25rem;
  font-weight: normal;
}
@media only screen and (min-width: 48em), print {
  .Heading--medium,
  h4 {
    font-size: 1.875rem;
  }
}
.Heading--smallBold,
h5 {
  font-size: 1.125rem;
  font-weight: bold;
}
@media only screen and (min-width: 48em), print {
  .Heading--smallBold,
  h5 {
    font-size: 1.25rem;
  }
}
.Heading--small,
h6 {
  font-size: 1.125rem;
  font-weight: normal;
}
@media only screen and (min-width: 48em), print {
  .Heading--small,
  h6 {
    font-size: 1.25rem;
  }
}
.Heading--xSmall {
  font-size: 1rem;
  font-weight: bold;
}
.Heading--underline {
  padding-bottom: 0.625rem;
}
@media only screen and (min-width: 48em), print {
  .Heading--underline {
    border-bottom: 1px solid #e9e4e3;
  }
}
.Heading--strikethrough {
  margin: 0;
  text-align: center;
}
.Heading--strikethrough span {
  background-color: #fff;
  padding: 0 0.6em;
  position: relative;
  z-index: 1;
}
.Heading--strikethrough:after {
  border-bottom: 1px solid #e9e4e3;
  bottom: 0.6em;
  content: "";
  display: block;
  position: relative;
}
@media only screen and (max-width: 48em) {
  .Heading--large-onlySm {
    font-size: 1.5625em;
  }
}
.Icon {
  fill: currentColor;
  width: 1rem;
  max-height: 1rem;
  display: inline-block;
}
.Icon--altColor {
  color: #bfb1ac;
}
.Icon--small {
  width: 0.8rem;
  max-height: 0.8rem;
}
.Icon--large {
  width: 1.2rem;
  max-height: 1.2rem;
}
.Icon--xlarge {
  width: 1.5rem;
  max-height: 1.5rem;
}
.Icon--xxlarge {
  width: 2rem;
  max-height: 2rem;
}
.Icon--leftSide {
  margin-right: 0.3rem;
}
.Icon--rightSide {
  margin-left: 0.3rem;
}
.Icon--visibleActive {
  display: none;
}
.Icon--download,
.Icon--arrow {
  width: 1.3em;
  max-height: 1.25em;
  vertical-align: -0.3em;
  margin-left: 0.05rem;
}
.Icon--download {
  width: 1.5rem;
}
.Icon--external {
  width: 1.125em;
  max-height: 1.1875em;
  vertical-align: -0.25em;
  position: relative;
  top: 0;
  margin-left: 0.4em;
}
.is-active .Icon--visibleDefault {
  display: none;
}
.is-active .Icon--visibleActive {
  display: inline-block;
}
img.Image--border {
  border: 1px solid #e9e4e3;
  padding: 1em;
  display: block;
  text-align: center;
  width: auto;
  height: auto;
}
/*#
<h6>.Link</h6>
<p><a href="#" class="Link">Lorem ipsum dolor sit amet</a></p>

<div>
    <table class="Table" style="max-width: 800px;">
        <thead>
            <tr>
                <th></th>
                <th>Default</th>
                <th>Arrow Link</th>
                <th>External Link</th>
                <th>Download Link</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <i>(default color)</i>
                </td>
                <td>
                    <a href="#" class="Link">Call to action</a>
                </td>
                <td>
                    <a href="#" class="Link Link--icon">
                        Call to action
                        <svg role="presentation" aria-hidden="true" class="Icon Icon--arrow">
                            <use xlink:href="/assets/build/app.svg#arrow-thin-right"></use>
                        </svg>
                    </a>
                </td>
                <td>
                    <a href="#" class="Link Link--icon">
                        Call to action
                        <svg role="presentation" aria-hidden="true" class="Icon Icon--external">
                            <use xlink:href="/assets/build/app.svg#external"></use>
                        </svg>
                    </a>
                </td>
                <td>
                    <a href="#" class="Link Link--icon">
                        Call to action
                        <svg role="presentation" aria-hidden="true" class="Icon Icon--download">
                            <use xlink:href="/assets/build/app.svg#download"></use>
                        </svg>
                    </a>
                </td>
            </tr>
            <tr>
                <td>
                    <code>.Link--sun</code>
                </td>
                <td>
                    <a href="#" class="Link Link--sun">Call to action</a>
                </td>
                <td>
                    <a href="#" class="Link Link--sun Link--icon">
                        Call to action
                        <svg role="presentation" aria-hidden="true" class="Icon Icon--arrow">
                            <use xlink:href="/assets/build/app.svg#arrow-thin-right"></use>
                        </svg>
                    </a>
                </td>
                <td>
                    <a href="#" class="Link Link--sun Link--icon">
                        Call to action
                        <svg role="presentation" aria-hidden="true" class="Icon Icon--external">
                            <use xlink:href="/assets/build/app.svg#external"></use>
                        </svg>
                    </a>
                </td>
                <td>
                    <a href="#" class="Link Link--sun Link--icon">
                        Call to action
                        <svg role="presentation" aria-hidden="true" class="Icon Icon--download">
                            <use xlink:href="/assets/build/app.svg#download"></use>
                        </svg>
                    </a>
                </td>
            </tr>
            <tr>
                <td>
                    <code>.Link--white</code>
                </td>
                <td>
                    <a href="#" class="Link Link--white">Call to action</a>
                </td>
                <td>
                    <a href="#" class="Link Link--white Link--icon">
                        Call to action
                        <svg role="presentation" aria-hidden="true" class="Icon Icon--arrow">
                            <use xlink:href="/assets/build/app.svg#arrow-thin-right"></use>
                        </svg>
                    </a>
                </td>
                <td>
                    <a href="#" class="Link Link--white Link--icon">
                        Call to action
                        <svg role="presentation" aria-hidden="true" class="Icon Icon--external">
                            <use xlink:href="/assets/build/app.svg#external"></use>
                        </svg>
                    </a>
                </td>
                <td>
                    <a href="#" class="Link Link--white Link--icon">
                        Call to action
                        <svg role="presentation" aria-hidden="true" class="Icon Icon--download">
                            <use xlink:href="/assets/build/app.svg#download"></use>
                        </svg>
                    </a>
                </td>
            </tr>
            <tr>
                <td>
                    <code>.Link--midnight</code>
                </td>
                <td>
                    <a href="#" class="Link Link--midnight">Call to action</a>
                </td>
                <td>
                    <a href="#" class="Link Link--midnight Link--icon">
                        Call to action
                        <svg role="presentation" aria-hidden="true" class="Icon Icon--arrow">
                            <use xlink:href="/assets/build/app.svg#arrow-thin-right"></use>
                        </svg>
                    </a>
                </td>
                <td>
                    <a href="#" class="Link Link--midnight Link--icon">
                        Call to action
                        <svg role="presentation" aria-hidden="true" class="Icon Icon--external">
                            <use xlink:href="/assets/build/app.svg#external"></use>
                        </svg>
                    </a>
                </td>
                <td>
                    <a href="#" class="Link Link--midnight Link--icon">
                        Call to action
                        <svg role="presentation" aria-hidden="true" class="Icon Icon--download">
                            <use xlink:href="/assets/build/app.svg#download"></use>
                        </svg>
                    </a>
                </td>
            </tr>
            <tr>
                <td>
                    <code>.Link--blue</code>
                </td>
                <td>
                    <a href="#" class="Link Link--blue">Call to action</a>
                </td>
                <td>
                    <a href="#" class="Link Link--blue Link--icon">
                        Call to action
                        <svg role="presentation" aria-hidden="true" class="Icon Icon--arrow">
                            <use xlink:href="/assets/build/app.svg#arrow-thin-right"></use>
                        </svg>
                    </a>
                </td>
                <td>
                    <a href="#" class="Link Link--blue Link--icon">
                        Call to action
                        <svg role="presentation" aria-hidden="true" class="Icon Icon--external">
                            <use xlink:href="/assets/build/app.svg#external"></use>
                        </svg>
                    </a>
                </td>
                <td>
                    <a href="#" class="Link Link--blue Link--icon">
                        Call to action
                        <svg role="presentation" aria-hidden="true" class="Icon Icon--download">
                            <use xlink:href="/assets/build/app.svg#download"></use>
                        </svg>
                    </a>
                </td>
            </tr>
        </tbody>
    </table>
</div>
*/
.Link {
  color: #31b7bc;
  text-decoration: none;
  line-height: 1.4em;
}
.Link:hover {
  color: #58cdce;
  text-decoration: underline;
}
.Link.is-active {
  font-weight: bold;
}
/*
** Icons
*/
.Link--icon:hover {
  text-decoration: none;
}
/*
** Colors
*/
.Link--white {
  color: #fff;
}
.Link--white:hover {
  color: #e9e4e3;
}
.Link--sun {
  color: #f39200;
}
.Link--sun:hover {
  color: #f6ad40;
}
.Link--midnight,
.Link--eventCallToAction {
  color: #495a6b;
}
.Link--midnight:hover,
.Link--eventCallToAction:hover {
  color: #778390;
}
.Link--blue,
.Link--eventTitle,
.Link--newsTitle {
  color: #18274a;
}
.Link--blue:hover,
.Link--eventTitle:hover,
.Link--newsTitle:hover {
  color: #778390;
}
/*
** Skiplink
*/
.Link--skiplink {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
.Link--skiplink:focus {
  clip: auto;
  height: auto;
  margin: 0;
  width: auto;
  background: #fff;
  padding: 0.1875em 0.3125em;
  z-index: 1000;
}
.Link--chevronBottom {
  position: relative;
}
.Link--chevronBottom.is-active:after,
.Link--chevronBottom.is-active:before {
  bottom: 0;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.Link--chevronBottom.is-active:after {
  border-color: transparent;
  border-bottom-color: #18274a;
  border-width: 5px;
  margin-left: -5px;
}
.Link--chevronBottom.is-active:before {
  border-color: transparent;
  border-bottom-color: #495a6b;
  border-width: 7px;
  margin-left: -7px;
  margin-top: -2.5px;
}
/*#

Display a loading animation to let user know that something is processing in the background. 

Examples:

<div>
    <span class="Loading Loading--spinning">
        <span class="Loading-icon"></span>                        
        <span class="Loading-text">Your profile is loading...</span>
    </span>
    
    <button class="Button" data-module="toggler" data-toggler="contentElement: '.js-loading1'">
        Start loading 
        <span class="Loading Loading--spinning Loading--small Loading--fill u-hidden js-loading1">
            <span class="Loading-icon"></span>
        </span>
    </button>
</div>

*/
/* stylelint-disable time-no-imperceptible */
.Loading {
  display: inline-block;
  padding: 1.5625rem;
  text-align: center;
  vertical-align: middle;
}
.Loading--full {
  width: 100%;
}
.Loading--fill {
  position: absolute;
  background: #fff;
  padding: 0;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.Loading--compact {
  padding: 0;
}
.Loading--xsmall {
  font-size: 0.6em;
}
.Loading--small {
  font-size: 0.75rem;
}
.Loading--large {
  font-size: 1.25rem;
}
.Loading-text {
  display: block;
  font-size: 0.875rem;
  margin-top: 1.25rem;
  color: #aaa;
}
.Loading--spinning .Loading-icon {
  display: inline-block;
  height: 2em;
  width: 2em;
  border: 0.1875em solid #18274a;
  border-right-color: transparent;
  border-radius: 50%;
  -webkit-animation: rotate 0.9s infinite linear;
          animation: rotate 0.9s infinite linear;
}
.Loading--spinning.Loading--white .Loading-icon {
  border-color: #fff;
  border-right-color: transparent;
}
@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
/*#

<span class="Number"><span>1</span></span>

*/
.Number {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 50%;
  width: 2em;
  height: 2em;
  font-size: 0.8em;
  border: 1px solid #18274a;
  color: #18274a;
  vertical-align: 0.1em;
  margin-right: 0.2em;
}
.Number.is-active {
  background: #18274a;
  color: #fff;
}
.Preamble {
  font-size: 1rem;
}
@media only screen and (min-width: 48em), print {
  .Preamble {
    font-size: 1.125rem;
  }
}
@media only screen and (min-width: 64em) {
  .Preamble {
    font-size: 1.25rem;
  }
}
/*#

Custom styling for radio buttons. Supports focus and disabled states.

Examples:

<div>
    <span class="Radio u-marginRsm">
        <input id="rb1" type="radio" name="priority" class="Radio-input">
        <label for="rb1" class="Radio-label">Low Priority</label>
    </span>

    <span class="Radio u-marginRsm">
        <input id="rb2" type="radio" name="priority" class="Radio-input">
        <label for="rb2" class="Radio-label">Medium Priority</label>
    </span>

    <span class="Radio u-marginRsm">
        <input id="rb3" type="radio" name="priority" class="Radio-input">
        <label for="rb3" class="Radio-label">High Priority</label>
    </span>
</div>

*/
.Radio .Radio-input:disabled + .Radio-label,
.Radio.is-disabled .Radio-label {
  opacity: 0.5;
  cursor: not-allowed;
}
.Radio-input {
  opacity: 0;
  position: absolute;
}
.Radio-input:focus + .Radio-label:before {
  -webkit-box-shadow: 0 0 1px 1px #18274a;
          box-shadow: 0 0 1px 1px #18274a;
}
.Radio-input,
.Radio-label {
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}
.Radio-label {
  position: relative;
}
.Radio-label:before {
  content: "";
  background: #fff;
  border: 1px solid #e9e4e3;
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  padding: 0.25em;
  margin-right: 0.5em;
  text-align: center;
  border-radius: 50%;
  vertical-align: -0.25em;
}
.Radio-input:checked + .Radio-label:before {
  background: #495a6b;
  border-color: #495a6b;
  -webkit-box-shadow: inset 0 0 0 0.25em #fff;
          box-shadow: inset 0 0 0 0.25em #fff;
}
/*#

Custom styling for Select dropdowns. Supports focus and disabled states.

Examples:

<div>
    <span class="Select u-sm-size1of3X">
        <select class="Select-input">
            <option>Select an option</option>
            <option>Invoice</option>
            <option>Emergency</option>
            <option>Question</option>
            <option>A very long item is here that will never end</option>
            <option>Other</option>
        </select>
    </span>
</div>

*/
.Select {
  position: relative;
  padding: 0;
  display: inline-block;
  background: #fff;
  border-bottom: 1px solid #e9e4e3;
  padding-right: 0;
}
.Select:after {
  content: "";
  position: absolute;
  width: 1em;
  top: 1px;
  bottom: 1px;
  right: 1px;
  background-color: #fff;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAYAAADphp8SAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAMJJREFUeNpinDRlugMDAwMIUwRYgPgBEOcDsQAlBjHl5WSCDJpIoYM2MMJYQC/eB1IKZBjyAYgNmZAEEsl0zUSQrxiRRYCuWg+kAkgw5ALQEENwGKFJJEKdSiwohAc2sijQdJAhjUQasgCo/gBWg6CGTQA5mYgALkSJfhwKCQV8I9T1+A0CKgK5aAIOQw5AXc1AjIsYoGH1AV8AE2UQ1OnomiZAXctAiotAhi0AeQXKfYAvRpmIiGZYwBeiBzAyAAgwAO6ENKpThEdEAAAAAElFTkSuQmCC");
  background-repeat: no-repeat;
  background-size: 9px 8px;
  background-position: center right;
  pointer-events: none;
}
.Select-input {
  width: 100%;
  margin: 0;
  background: none;
  border: none;
  outline: none;
  color: inherit;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding: 0.3125rem 0 0.3125rem;
  padding-right: 1em;
}
.Select-input:focus {
  outline: none;
}
.Select-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.Select-input:disabled:hover {
  -webkit-box-shadow: none;
          box-shadow: none;
}
.Select--sizeSm {
  width: 90px;
}
.Select--sizeSm .Select-input {
  padding-left: 0.5em;
}
.is-no-appearance .Select {
  overflow: hidden;
}
.is-no-appearance .Select-input {
  width: calc(100% + 60px);
}
.Select--header,
.Select--blue {
  background: #18274a;
}
.Select--header:after,
.Select--blue:after {
  background-color: #18274a;
}
.Select--header option,
.Select--blue option,
.Select--header optgroup,
.Select--blue optgroup {
  background-color: #172546;
}
.Select--snow {
  background: #e9e4e3;
  border-bottom-color: #d4cac8;
}
.Select--snow:after,
.Select--snow .Select-input {
  background-color: #e9e4e3;
}
.Select--midnight {
  background-color: transparent;
}
.Select--midnight:after {
  background-color: transparent;
}
.Select--midnight .Select-input:focus {
  background-color: #495a6b;
}
.Select--midnight option,
.Select--midnight optgroup {
  background-color: #475768;
}
.Select--transparent {
  background: transparent;
  border-bottom-color: transparent;
}
.Select--transparent:after,
.Select--transparent .Select-input {
  background-color: transparent;
}
.Select--transparent .Select-input:focus {
  background-color: transparent;
}
.Select--product .Select-input:focus option {
  text-align: center;
  padding: 2px;
}
.Select--product .Select-input:focus option:nth-child(2n+1) {
  background: #e9e4e3;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .Select-input::-ms-expand {
    display: none;
  }
  .Select-input:focus::-ms-value {
    background: transparent;
    color: #595857;
  }
}
/*#
<div class="Accordion" data-module="accordion">
    <div class="Accordion-header">
        <a id="accordionHeader1" href="#" class="Accordion-headerLink" aria-controls="accordionPanel1">
            <h4 class="Heading Heading--mediumBold">Heading</h4>
            <p>Preamble</p>
        </a>
    </div>
    <div id="accordionPanel1" class="Accordion-panel" aria-labelledby="accordionHeader1">
        <div class="Column BlockMargin">
            <div class="Column-content">
                <div class="Grid Grid--gutterA">
                    <div class="Grid-cell">
                        <div class="Column-text">
                            <h2 class="Heading Heading--smallBold">Panel</h2>
                            <p>Preamble.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
*/
.Accordion {
  width: 100%;
  position: relative;
}
.Accordion-header {
  cursor: pointer;
}
.List .Accordion-header {
  padding: 0;
  margin: 0;
}
.Accordion-headerLink {
  display: block;
  text-decoration: none;
  color: #595857;
  position: relative;
  padding-right: 22px;
}
.Accordion-headerLink:hover {
  text-decoration: none;
}
.Accordion-headerLink .Heading {
  color: #18274a !important;
}
.Accordion-headerLink p {
  color: #595857 !important;
}
.Accordion-headerLink > * {
  max-width: 48rem;
}
.Accordion-headerLink :first-child {
  margin-top: 0;
}
.Accordion-headerLink :last-child {
  margin-bottom: 0;
}
.Accordion-headerLink:after {
  content: "";
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxhZ2VyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTRweCIgaGVpZ2h0PSIxNHB4IiB2aWV3Qm94PSIwIDAgMTQgMTQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE0IDE0OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGw6IzAwMjg1Njt9PC9zdHlsZT48cGF0aCBjbGFzcz0ic3QwIiBkPSJNNi42LDAuNWgwLjh2MTNINi42VjAuNXogTTAuNSw2LjZoMTN2MC44aC0xM1Y2LjZ6Ii8+PC9zdmc+);
  background-size: 100%;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  height: 22px;
  width: 22px;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
@media only screen and (min-width: 48em), print {
  .Accordion-headerLink {
    padding-right: 28px;
  }
  .Accordion-headerLink:after {
    height: 28px;
    width: 28px;
  }
}
.is-active .Accordion-headerLink:after {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxhZ2VyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTRweCIgaGVpZ2h0PSIxNHB4IiB2aWV3Qm94PSIwIDAgMTQgMTQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE0IDE0OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGw6IzAwMjg1Njt9PC9zdHlsZT48cGF0aCBjbGFzcz0ic3QwIiBkPSJNMC41LDYuNmgxM3YwLjhoLTEzVjYuNnoiLz48L3N2Zz4=);
}
.List .Accordion-headerLink {
  padding-right: calc(1.5625rem + 22px) !important;
}
@media only screen and (min-width: 48em), print {
  .List .Accordion-headerLink {
    padding-right: calc(1.5625rem + 28px) !important;
  }
}
.List .Accordion-headerLink:after {
  right: 1.5625rem;
}
.Accordion-panel {
  display: none;
  overflow: hidden;
}
.List .Accordion-panel {
  position: relative;
  top: -1px;
}
.Accordion-border {
  margin: 1.5625rem auto;
  max-width: 1170px;
  background: #e9e4e3;
  height: 1px;
  border: 0;
  padding: 0 1.5625rem;
  background-clip: content-box;
}
@media print {
  .Accordion-panel {
    display: block !important;
  }
  .Accordion-headerLink:after {
    display: none;
  }
}
.Banner {
  position: relative;
}
@media only screen and (min-width: 48em), print {
  .Banner.Banner--bgCoverContent {
    padding-left: 1.5625rem;
    padding-right: 1.5625rem;
  }
}
@media only screen and (min-width: 48em), print {
  .GridWithSideNavigation .Banner {
    padding-left: 0;
    padding-right: 0;
  }
}
.Banner.Banner--textCenter .CallToAction {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.Banner--fixed {
  background-size: cover;
}
.Banner--fixed .Banner-text {
  min-height: initial;
}
.Banner-content {
  margin-left: auto;
  margin-right: auto;
  max-width: 1220px;
}
.Banner--textCenter .Banner-content {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
}
.Banner--bgCoverContent .Banner-content {
  position: relative;
  max-width: 1170px;
}
@media only screen and (min-width: 48em), print {
  .Banner-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .Banner--textRight .Banner-content,
  .Banner--imageLeft .Banner-content {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
@media only screen and (max-width: 767px), print {
  .Banner-image {
    background-image: none !important;
  }
}
@media only screen and (min-width: 48em), print {
  .Banner-image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
  .Banner-image img {
    display: none !important;
    /* Important is for IE10 */
  }
  .Banner--imageNoCrop .Banner-image {
    background-size: contain;
  }
  .Banner--imageNoCrop.Banner--imageRight:not(.Banner--bgCoverContent) .Banner-image {
    background-position: left;
  }
  .Banner--imageNoCrop.Banner--imageLeft:not(.Banner--bgCoverContent) .Banner-image {
    background-position: right;
  }
}
.Banner--imageLeft .Banner-image {
  right: 50%;
}
.Banner--imageRight .Banner-image {
  left: 50%;
}
.Banner-image img {
  width: 100%;
}
.Banner-text {
  position: relative;
  padding: 1.5625rem;
}
@media only screen and (min-width: 48em), print {
  .Banner-text {
    width: 50%;
    min-height: 400px;
    padding: 100px 1.5625rem;
  }
  .Banner--textCenter .Banner-text {
    width: 66.66666667%;
  }
  .Banner--bgCoverContent.Banner--imageLeft:not([class*="Banner--theme"]) .Banner-text {
    padding-right: 0;
  }
  .Banner--bgCoverContent.Banner--imageRight:not([class*="Banner--theme"]) .Banner-text {
    padding-left: 0;
  }
  .Banner--textRight .Banner-text,
  .Banner--imageLeft .Banner-text {
    margin-left: 50%;
  }
}
.Banner-text > *:first-child {
  margin-top: 0;
}
.Banner-text > *:last-child {
  margin-bottom: 0;
}
/*
** Video
*/
.Banner-video {
  width: 100%;
  background-size: 100%;
  position: relative;
  /* Need to be in an after because of different browser implementation of flexbox items with padding */
}
.Banner-video:after {
  content: "";
  display: block;
  padding-bottom: 56.25%;
  height: 0;
}
.Banner-video + .Banner-text {
  width: 100%;
  padding: 1.5625rem;
  min-height: 0;
  margin-left: 0;
  max-width: 48em;
}
@media only screen and (min-width: 48em), print {
  .Banner--imageLeft .Banner-video,
  .Banner--imageRight .Banner-video,
  .Banner--imageLeft .Banner-video + .Banner-text,
  .Banner--imageRight .Banner-video + .Banner-text {
    width: 50%;
    max-width: 585px;
  }
}
@media only screen and (min-width: 48em), print {
  .Banner--imageRight .Banner-video {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
}
.Banner-videoControlls {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
}
.Banner-videoPlay {
  width: 80px;
  min-height: 80px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  cursor: pointer;
  fill: #fff;
}
.wistia_embed {
  /* stylelint-disable-line selector-class-pattern */
  position: absolute;
}
/*
** Themes
*/
/* Function that is called from each theme */
.Banner--themeSnow {
  background-color: #e9e4e3;
}
.Banner--themeSnow.Banner--bgCoverContent {
  background-color: transparent;
}
.Banner--themeSnow.Banner--bgCoverContent .Banner-content {
  background-color: #e9e4e3;
}
.Banner--themeSnow .Heading {
  color: #18274a;
}
.Banner--themeSnow .Banner-text {
  color: #595857;
}
.Banner--themeMidnight1 {
  background-color: #495a6b;
}
.Banner--themeMidnight1.Banner--bgCoverContent {
  background-color: transparent;
}
.Banner--themeMidnight1.Banner--bgCoverContent .Banner-content {
  background-color: #495a6b;
}
.Banner--themeMidnight1 .Heading {
  color: #94b654;
}
.Banner--themeMidnight1 .Banner-text {
  color: #fff;
}
.Banner--themeMidnight2,
.Banner--news {
  background-color: #495a6b;
}
.Banner--themeMidnight2.Banner--bgCoverContent,
.Banner--news.Banner--bgCoverContent {
  background-color: transparent;
}
.Banner--themeMidnight2.Banner--bgCoverContent .Banner-content,
.Banner--news.Banner--bgCoverContent .Banner-content {
  background-color: #495a6b;
}
.Banner--themeMidnight2 .Heading,
.Banner--news .Heading {
  color: #fff;
}
.Banner--themeMidnight2 .Banner-text,
.Banner--news .Banner-text {
  color: #e9e4e3;
}
.Banner--themeBlue1 {
  background-color: #18274a;
}
.Banner--themeBlue1.Banner--bgCoverContent {
  background-color: transparent;
}
.Banner--themeBlue1.Banner--bgCoverContent .Banner-content {
  background-color: #18274a;
}
.Banner--themeBlue1 .Heading {
  color: #fff;
}
.Banner--themeBlue1 .Banner-text {
  color: #fff;
}
.Banner--themeBlue2 {
  background-color: #18274a;
}
.Banner--themeBlue2.Banner--bgCoverContent {
  background-color: transparent;
}
.Banner--themeBlue2.Banner--bgCoverContent .Banner-content {
  background-color: #18274a;
}
.Banner--themeBlue2 .Heading {
  color: #f39200;
}
.Banner--themeBlue2 .Banner-text {
  color: #fff;
}
.Banner--themeClay1 {
  background-color: #bfb1ac;
}
.Banner--themeClay1.Banner--bgCoverContent {
  background-color: transparent;
}
.Banner--themeClay1.Banner--bgCoverContent .Banner-content {
  background-color: #bfb1ac;
}
.Banner--themeClay1 .Heading {
  color: #18274a;
}
.Banner--themeClay1 .Banner-text {
  color: #595857;
}
.Banner--themeClay2 {
  background-color: #bfb1ac;
}
.Banner--themeClay2.Banner--bgCoverContent {
  background-color: transparent;
}
.Banner--themeClay2.Banner--bgCoverContent .Banner-content {
  background-color: #bfb1ac;
}
.Banner--themeClay2 .Heading {
  color: #fff;
}
.Banner--themeClay2 .Banner-text {
  color: #fff;
}
.Banner--event {
  background-color: #495a6b;
}
.Banner--event.Banner--bgCoverContent {
  background-color: transparent;
}
.Banner--event.Banner--bgCoverContent .Banner-content {
  background-color: #495a6b;
}
.Banner--event .Heading {
  color: #fff;
}
.Banner--event .Banner-text {
  color: #fff;
}
/*#

Component displaying a navigation breadcrumb.

Examples:

<nav class="Breadcrumb" aria-label="Breadcrumb">
    <ol class="Breadcrumb-list">
        <li class="Breadcrumb-item"><a href="#">Solutions</a></li>
        <li class="Breadcrumb-item"><a href="#">Treat Acute Health Conditions</a></li>
        <li class="Breadcrumb-item is-active" aria-current="page"><span>Cardiac Assist</a></li>
    </ol>
</nav>

*/
.Breadcrumb {
  background: #d4cac8;
  color: #495a6b;
  font-size: 0.75rem;
  padding-top: 0.6em;
  padding-bottom: 0.6em;
  display: none;
}
@media only screen and (min-width: 34em), print {
  .Breadcrumb {
    display: block;
  }
}
.Breadcrumb-list {
  margin: 0 auto;
  max-width: 1220px;
  padding: 0 1.5625rem;
  overflow: hidden;
  list-style: none;
}
.Breadcrumb-item {
  display: inline;
  color: #495a6b;
}
.Breadcrumb-item a,
.Breadcrumb-item a:hover {
  color: #495a6b;
}
.Breadcrumb-item:after {
  content: "/";
  margin: 0 0.3em 0 0.6em;
}
.Breadcrumb-item:last-child:after {
  content: none;
}
.Breadcrumb-item.is-active {
  font-weight: bold;
}
.Breadcrumb--text {
  color: #bfb1ac;
  background: none;
  padding: 0;
}
.Breadcrumb--text .Breadcrumb-list {
  padding: 0;
}
.CallToAction {
  margin: -1.25rem -0.625rem;
  overflow: hidden;
}
@media only screen and (min-width: 48em), print {
  .CallToAction {
    margin: -0.625rem;
  }
}
.CallToAction .Link,
.CallToAction .Button {
  display: block;
  margin: 1.25rem 0.625rem;
}
@media only screen and (min-width: 48em), print {
  .CallToAction .Link,
  .CallToAction .Button {
    margin: 0.625rem;
    display: inline-block;
    vertical-align: middle;
  }
}
/*#

The Card block is used in page lists

<div class="Grid Grid--gutterHlg Grid--gutterVlg">
    <div class="Grid-cell u-md-size1of3">
        <div class="Card">
            <div class="Card-imageContainer">
                <img class="Card-image" src="http://placehold.it/750x500">
            </div>
            <h2 class="Heading Heading--smallBold u-marginBz">Lorem ipsum</h2>
            <div class="Card-bodyText">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
            <p class="CallToAction">
                <a class="Link Link--icon" href="/en/our-offices/">Read more about lorem ipsum
                    <svg role="presentation" aria-hidden="true" class="Icon Icon--arrow">
                        <use xlink:href="/Assets/build/app.svg#arrow-thin-right"></use>
                    </svg>
                </a>
            </p>
        </div>
    </div>
</div>

*/
.Card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.Card .CallToAction {
  margin-top: auto;
  text-align: center;
}
.Card .CallToAction .Link {
  display: block;
  text-align: left;
}
.Card-imageContainer {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  margin-bottom: 1em;
}
.Card-image {
  width: 100%;
}
.Card-bodyText {
  font-size: 0.875rem;
  margin-top: 0.5em;
  margin-bottom: 1em;
}
.Card-bodyText p:first-child {
  margin-top: 0;
}
.Card-bodyText p:last-child {
  margin-bottom: 0;
}
.Card--padded {
  padding: 1.25rem;
}
.Column--textCenter {
  text-align: center;
}
.Column-content {
  margin-left: auto;
  margin-right: auto;
  max-width: 1170px;
  max-width: 1220px;
  padding: 0 1.5625rem;
  overflow: hidden;
}
.Column--bgCoverContent .Column-content {
  max-width: 1170px;
}
[class*="Column--theme"]:not(.Column--bgCoverColumn):not(.Column--themeWhite) .Column-content {
  padding: 1.5625rem;
}
.GridWithSideNavigation .Column-content {
  padding: 0;
}
.Column-image img {
  width: 100%;
}
.Column-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
}
.Column-text > *:first-child,
.Column-text > p {
  margin-top: 0;
}
.Column-text .Heading,
.Column-text p {
  max-width: 48rem;
}
.Column-text > *:last-child {
  margin-bottom: 0;
}
.Column--noGutter .Column-text {
  padding: 1.5625rem;
}
.Column-text .CallToAction {
  margin-top: auto;
}
.Column--textCenter .Column-text > * {
  margin-left: auto;
  margin-right: auto;
}
.Column-image + .Column-text {
  padding-top: 1.5625rem;
}
.Column-videoLink {
  position: relative;
  display: block;
}
.Column-videoLink:after {
  content: "";
  background-color: rgba(0, 0, 0, 0.5);
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4MC41IDgwLjUiPjxwYXRoIGQ9Ik00MC4yIDBhNDAuMiA0MC4yIDAgMSAwIDQwLjIgNDAuMkM4MC40IDE4IDYyLjUgMCA0MC4yIDB6bS01LjMgNTEuOFYyOC43bDE2LjcgMTEuNi0xNi43IDExLjV6IiBmaWxsPSIjZmZmIi8+PC9zdmc+);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 60px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
}
/*
** Themes
*/
.Column--themeSnow {
  background-color: #e9e4e3;
}
.Column--themeSnow.Column--bgCoverContent {
  background-color: transparent;
}
.Column--themeSnow.Column--bgCoverContent .Column-content {
  background-color: #e9e4e3;
}
.Column--themeSnow.Column--bgCoverColumn {
  background-color: transparent;
}
.Column--themeSnow.Column--bgCoverColumn .Column-text {
  background-color: #e9e4e3;
  padding: 1.5625rem;
}
.Column--themeSnow .Column-text {
  color: #595857;
}
.Column--themeSnow .Heading {
  color: #18274a;
}
/*#

Responsible for styling CMS content where it is not possible to add custom CSS-classes. 
For example adding styling for p-tag, ul-tag etc.

Examples:

<div class="Content">
    <h2>Heading</h2>
    <p>Lorem ipsum dolor sit amet.</p>
    <ul>
        <li>List item</li>
        <li>List item</li>
    </ul>
    <img src="" />
</div>

*/
.Content img {
  height: auto;
}
.Content-container {
  max-width: 1170px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
/*#

Displays dynamic icon for a date

Examples:

<figure class="Date">
    <svg role="img" alt="Event" class="Icon Date-icon">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/build/app.svg#calendar"></use>
    </svg>
    <figcaption class="Date-label">18</figcaption>
</figure>

*/
.Date {
  color: #18274a;
  display: inline-block;
  vertical-align: middle;
  position: relative;
}
.Date-icon {
  width: 2em;
  max-height: 2em;
}
@media only screen and (min-width: 48em), print {
  .Date-icon {
    width: 3.1em;
    max-height: 3.1em;
  }
}
.Date-label {
  position: absolute;
  top: 1em;
  left: 0;
  right: 0;
  text-align: center;
  font-weight: bold;
  font-size: 0.625rem;
}
@media only screen and (min-width: 48em), print {
  .Date-label {
    font-size: 0.875rem;
    top: 1.22em;
  }
}
/*#

Event list item

*/
.Event {
  background-color: #e9e4e3;
  font-size: 0.875rem;
  padding: 1.25rem;
}
.Event--workshop {
  background-color: #18274a;
  color: #e9e4e3;
}
.Event--workshop .Date-icon,
.Event--workshop .Date-label {
  color: #e9e4e3;
}
.Event--workshop .Link--eventCallToAction {
  color: #fff;
}
.Event--workshop .Link--eventCallToAction:hover {
  color: #e9e4e3;
}
.Event-date {
  display: table-cell;
  float: left;
  font-size: 0.875rem;
  margin-right: 1em;
}
.Event-type {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.Event-type span {
  border: 1px solid;
  padding: 5px;
  margin-bottom: 15px;
}
.Filter.Filter--alphabetical {
  overflow: hidden;
}
.Filter.Filter--alphabetical .Filter-list {
  font-size: 0;
  margin: 0;
  margin-left: -10px;
  margin-right: -10px;
  padding: 0;
  text-align: justify;
}
.Filter.Filter--alphabetical .Filter-listItem {
  border-bottom: 1px solid #e9e4e3;
  display: inline-block;
  margin: 0.625rem 0;
  font-size: 1.25rem;
  line-height: 1;
  padding: 0.625rem 0.625rem 0;
  text-transform: uppercase;
}
.Filter.Filter--alphabetical .Filter-listItem:last-child {
  padding-right: 0;
}
.Filter.Filter--alphabetical .Filter-input {
  display: none;
}
.Filter.Filter--alphabetical .Filter-input:checked + .Filter-listItem .Filter-label {
  border-bottom: 3px solid #18274a;
  color: #18274a;
  font-weight: bold;
}
.Filter.Filter--alphabetical .Filter-input:checked + .Filter-listItem .Filter-label:before {
  display: none;
}
.Filter.Filter--alphabetical .Filter-input:disabled + .Filter-listItem .Filter-label {
  color: #bfb1ac;
}
.Filter.Filter--alphabetical .Filter-label {
  border-bottom: 3px solid transparent;
  bottom: -1px;
  cursor: pointer;
  padding-bottom: 0.625rem;
  position: relative;
}
.Filter.Filter--alphabetical .Filter-label:before {
  content: attr(title);
  display: inline-block;
  font-weight: bold;
  margin-left: -1px;
  visibility: hidden;
  width: 1px;
}
.Filter.Filter--alphabetical .Filter-label:hover {
  color: #18274a;
}
.Filter.Filter--alphabetical .Filter-listItem-clear {
  /* stylelint-disable-line selector-class-pattern */
  border: none;
  font-size: 0.875rem;
  float: right;
  margin-right: 0.8rem;
}
.Filter.Filter--alphabetical .Filter-listItem-clear .Button {
  padding: 0.3rem 0.8rem;
}
.Filter-section {
  border-top: 1px solid transparent;
  -ms-flex-preferred-size: 100vw !important;
      flex-basis: 100vw !important;
  margin-bottom: 1.5625rem;
  margin-left: -5px;
  margin-right: -5px;
  margin-top: -55px;
  min-width: 100%;
  padding: 0 !important;
  z-index: 4;
}
.Filter-section .Select {
  background: transparent;
  border-bottom: 1px solid #18274a;
  padding-bottom: 5px;
}
.Filter-section .Select:after {
  background-color: transparent;
}
@media only screen and (min-width: 48em), print {
  .Filter-section {
    border-left: 1px solid #e9e4e3;
    border-top: none;
    -ms-flex-preferred-size: 100% !important;
        flex-basis: 100% !important;
    margin: 0;
    min-width: 0;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
  .Filter-section .Select {
    background: #fff;
    border-bottom: none;
    padding-bottom: 0;
  }
  .Filter-section .Select:after {
    background-color: #fff;
  }
}
.Filter-handle {
  background-color: #e9e4e3;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 100%;
          flex: 1 0 100%;
  padding: 1.25rem;
}
.Filter-panel {
  background-color: #e9e4e3;
  height: calc(100vh - (61px + 66px));
  max-height: 0;
  overflow: hidden;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.Filter-panel.is-active {
  border-top: 1px solid #bfb1ac;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  max-height: 100vh;
  overflow-y: auto;
  padding-top: 1.5625rem;
}
@media only screen and (min-width: 48em), print {
  .Filter-panel,
  .Filter-panel.is-active {
    background-color: transparent;
    border: none;
    display: block;
    height: auto;
    max-height: none;
    padding: 0;
  }
}
.Filter-panel .Filter-button {
  border: none;
  margin: 0;
  outline: none;
  text-align: center;
}
.Filter-panel .Filter-button--cancel {
  background-color: #d4cac8;
  color: #595857;
}
.Filter-panel .Filter-button--apply {
  background-color: #495a6b;
  color: #fff;
}
.Filter-panel .FloatedLabel--withIcon {
  border-bottom: 1px solid #495a6b;
}
.Filter-panel .FloatedLabel--withIcon .FloatedLabel-icon {
  color: #495a6b;
}
.Filter-controls {
  margin-left: -1.25rem;
  margin-right: -1.25rem;
  padding: 0 !important;
}
.is-sticky .Filter-controls {
  margin-top: auto;
}
.Filter-list {
  color: #495a6b;
  font-size: 0.875rem;
  margin-bottom: 1.875rem;
}
.Filter-list .Filter-listItem {
  padding: 0.46875rem 0;
  position: relative;
}
.Filter-list .Filter-listItem:first-child {
  padding-top: 0;
}
.Filter-list .Filter-listItem a {
  color: #595857;
}
.Filter-list--active .Filter-listItem {
  background: #495a6b;
  color: #fff;
  padding-left: 0.9375rem;
  padding-right: 0.9375rem;
}
.Filter-list--active .Filter-listItem:first-child {
  padding-top: 0.46875rem;
}
.Filter-list--active .Filter-listItem .Icon {
  right: 10px;
}
.Filter-list--active .Filter-listItem.second-level {
  background: #d4cac8;
  color: #595857;
}
.Filter-list--active .Filter-listItem.second-level a {
  color: #595857;
}
.Filter-list--active .Filter-listItem.second-level a .Icon {
  color: #495a6b;
}
.Filter-list--active .Filter-listItem.is-current {
  background: #fff;
  color: #595857;
}
.Filter-list--active .Filter-listItem.is-current a {
  color: #595857;
}
.Filter-list--active .Filter-listItem.is-current a .Icon {
  color: #495a6b;
}
.Filter-list--active .Filter-listItem a {
  color: #fff;
  display: block;
  padding-right: 1.5em;
  position: relative;
}
@media only screen and (min-width: 48em), print {
  .Filter-list--active .Filter-listItem.is-current {
    background: #e9e4e3;
  }
  .Filter-list--active .Filter-listItem.second-level {
    background: #d4cac8;
    color: #595857;
  }
}
.Filter-toggleButton {
  background: none;
  border: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 1.3em;
  outline: none;
  position: relative;
  overflow: hidden;
  padding: 0;
  margin: 0 5px;
}
.Filter-toggleButton .Icon--visibleDefault {
  margin-right: -7px;
}
.Filter-toggleButton.is-active:after,
.Filter-toggleButton.is-active:before {
  bottom: -26px;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.Filter-toggleButton.is-active:after {
  border-color: transparent;
  border-bottom-color: #e9e4e3;
  border-width: 8px;
  margin-left: -9px;
}
.Filter-toggleButton.is-active:before {
  border-color: transparent;
  border-bottom-color: #bfb1ac;
  border-width: 10px;
  margin-left: -11px;
  margin-top: -4px;
}
.Filter-viewSummary {
  color: #18274a;
  font-size: 1.25rem;
}
.Filter-heading {
  font-size: 1.25em;
}
.Filter-resultSection {
  margin-bottom: 2em;
}
.Filter-resultSection .Filter-heading {
  color: #18274a;
  font-size: 30px;
  margin-bottom: 1em;
}
.Filter-resultSection .Grid.Grid--gutterHsm > .Grid-cell {
  padding-left: 0;
  padding-right: 0;
}
.Filter-resultSection .Grid.Grid--gutterHsm .Card {
  padding-left: 10px;
  padding-right: 10px;
  -webkit-transition: background-color 0.25s ease-out;
  transition: background-color 0.25s ease-out;
}
@media only screen and (min-width: 48em), print {
  .Filter-resultSection .Grid.Grid--gutterHsm .Card:hover {
    background-color: #e9e4e3;
  }
}
.Filter-resultSection .Grid.Grid--gutterHsm .Card a:hover {
  color: #18274a;
}
.Filter-resultSection .Grid.Grid--gutterHsm .Card a:hover h2 {
  color: #18274a;
}
.Filter-resultSection .Grid.Grid--gutterVsm .Card {
  padding-bottom: 10px;
  padding-top: 10px;
}
.Filter-resultSection.Filter--snowOnHoverCell .Grid > .Grid-cell:hover {
  background-color: #e9e4e3;
}
@media (hover: none) {
  /* Remove this because a problem with red links -- look issue https://nansen.atlassian.net/browse/ONEGET-908
    a:link {
        //color: red;
    }
    */
  .Card:hover {
    background-color: none;
  }
  .Card a:hover {
    color: none;
  }
}
/*#

Floating labels in forms.

Example:

<div data-module="FloatedLabel">
    <div class="FloatedLabel">
        <input type="email" placeholder="" class="FloatedLabel-field" />
        <label for="" class="FloatedLabel-label">E-postadress</label>
    </div>
</div>

*/
.FloatedLabel {
  position: relative;
  display: inline-block;
}
.FloatedLabel.is-active .FloatedLabel-label,
.FloatedLabel.FloatedLabel--fixed .FloatedLabel-label {
  font-size: 0.75rem;
  top: -0.8125rem;
  left: 0;
  z-index: 1;
}
.FloatedLabel-label {
  position: absolute;
  left: 0;
  top: 0.3125rem;
  color: #bfb1ac;
  font-size: 1em;
  display: inline-block;
  padding: 0;
  font-weight: normal;
  background: rgba(255, 255, 255, 0);
  pointer-events: none;
  -webkit-transition: all 0.2s, background-color 0.4s;
  transition: all 0.2s, background-color 0.4s;
}
.FloatedLabel-field {
  width: 100%;
}
.FloatedLabel--withIcon .FloatedLabel-icon {
  position: absolute;
  left: 0;
  top: 0.2em;
}
.FloatedLabel--withIcon .FloatedLabel-label {
  top: 0;
  left: 2em;
}
.FloatedLabel--withIcon.is-active .FloatedLabel-label {
  left: 2.7em;
}
.FloatedLabel--withIcon .FloatedLabel-field {
  padding-left: 2em;
}
.Form {
  margin-bottom: 1.5625rem;
  width: 100%;
}
.Form.Form--fill {
  background: #ffffff;
  padding: 1.5625rem;
}
.Form.Form--bordered {
  border: 1px solid #e9e4e3;
  border-radius: 3px;
  padding: 1.5625rem;
}
.Form-item {
  display: block;
  width: 100%;
  padding-bottom: 1.5625rem;
}
.Form-label {
  padding: 0.9375rem;
  padding-top: 0;
  padding-left: 0;
}
@media only screen and (min-width: 34em), print {
  .Form--horizontal {
    display: table;
    caption-side: bottom;
  }
  .Form--horizontal .Form-item {
    display: table-row;
    padding: 0;
  }
  .Form--horizontal .Form-item.Form-item--submit {
    display: table-caption;
    width: 100%;
    padding-top: 1.25rem;
  }
  .Form--horizontal .Form-item.Form-item--submit .Form-field {
    display: block;
    text-align: center;
  }
  .Form--horizontal .Form-label,
  .Form--horizontal .Form-field {
    display: table-cell;
    vertical-align: top;
    padding: 1.25rem 0;
  }
  .Form--horizontal .Form-label {
    padding-right: 1.5625rem;
  }
}
/*#
  **Core grid component**
 
  The Grid-cell should be combined with a utils-size class for the specific breakpoint you want to target.
  
  DO NOT apply dimension or offset utilities to the `Grid` element. All cell
  widths and offsets should be applied to child grid cells.
  
  **Example uses:**
 
  <div class="Grid Grid--withGutter [Grid--alignCenter|Grid--alignRight|Grid--withGutter]">
    <div class="Grid-cell [Grid-cell--center] u-xsm-size1of2">1of2</div>
    <div class="Grid-cell u-xsm-size1of2">1of2</div>
    <div class="Grid-cell u-xsm-size1of3">1of3</div>
    <div class="Grid-cell u-xsm-size2of3">2of3</div>
  </div>
 */
/* stylelint-disable declaration-property-unit-whitelist, no-duplicate-selectors */
.Grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.Grid-cell {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}
.Grid-cell--fit {
  -webkit-box-flex: 0 !important;
      -ms-flex: 0 0 auto !important;
          flex: 0 0 auto !important;
}
.Grid-cell--center {
  display: block !important;
  margin-right: auto !important;
  margin-left: auto !important;
}
.Grid--alignCenter {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.Grid--alignRight {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.Grid--alignMiddle {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.Grid--alignTop {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.Grid--alignBottom {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}
.Grid--fit > .Grid-cell {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0%;
          flex: 1 1 0%;
}
.Grid--equalHeight > .Grid-cell {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.Grid--reverse {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}
/**
 * Grid Gutter Sizes
 * Wrap in .Grid to increase specificity. 
 * All gutters are in Pixels to support both Flexbox and Simple mode.
 * 
 * Format: Grid--gutter[direction:A|V|H][size:xsm|sm|md|lg|xlg]
 * Examples: Grid--gutterA (All), Grid--gutterH (Horizontal), Grid--gutterHlg (large horizontal gutter)
 * 
 * Gutter directions:
 *	  A = all (right, left, top, bottom)
 *    H = horizontal (right, left)
 *    V = vertical (top, bottom)
 *
 * Gutter sizes:
 *    xsm = xsmall
 *	  s  = small
 *	  m  = medium
 *	  l  = large
 *	  xl = xlarge
 */
.Grid {
  /**
     * Horizontal gutters (left & right)
     */
  /**
     * Vertical gutters (top & bottom)
     */
}
.Grid.Grid--gutterH,
.Grid.Grid--gutterA {
  margin-left: -15px;
  margin-right: -15px;
}
.Grid.Grid--gutterH > .Grid-cell,
.Grid.Grid--gutterA > .Grid-cell {
  padding-left: 15px;
  padding-right: 15px;
}
.Grid.Grid--gutterHxsm,
.Grid.Grid--gutterAxsm {
  margin-left: -7.5px;
  margin-right: -7.5px;
}
.Grid.Grid--gutterHxsm > .Grid-cell,
.Grid.Grid--gutterAxsm > .Grid-cell {
  padding-left: 7.5px;
  padding-right: 7.5px;
}
.Grid.Grid--gutterHsm,
.Grid.Grid--gutterAsm {
  margin-left: -10px;
  margin-right: -10px;
}
.Grid.Grid--gutterHsm > .Grid-cell,
.Grid.Grid--gutterAsm > .Grid-cell {
  padding-left: 10px;
  padding-right: 10px;
}
.Grid.Grid--gutterHmd,
.Grid.Grid--gutterAmd {
  margin-left: -12.5px;
  margin-right: -12.5px;
}
.Grid.Grid--gutterHmd > .Grid-cell,
.Grid.Grid--gutterAmd > .Grid-cell {
  padding-left: 12.5px;
  padding-right: 12.5px;
}
.Grid.Grid--gutterHlg,
.Grid.Grid--gutterAlg {
  margin-left: -15px;
  margin-right: -15px;
}
.Grid.Grid--gutterHlg > .Grid-cell,
.Grid.Grid--gutterAlg > .Grid-cell {
  padding-left: 15px;
  padding-right: 15px;
}
.Grid.Grid--gutterHxlg,
.Grid.Grid--gutterAxlg {
  margin-left: -20px;
  margin-right: -20px;
}
.Grid.Grid--gutterHxlg > .Grid-cell,
.Grid.Grid--gutterAxlg > .Grid-cell {
  padding-left: 20px;
  padding-right: 20px;
}
.Grid.Grid--gutterV,
.Grid.Grid--gutterA {
  margin-top: -15px;
  margin-bottom: -15px;
}
.Grid.Grid--gutterV > .Grid-cell,
.Grid.Grid--gutterA > .Grid-cell {
  padding-top: 15px;
  padding-bottom: 15px;
}
.Grid.Grid--gutterVxsm,
.Grid.Grid--gutterAxsm {
  margin-top: -7.5px;
  margin-bottom: -7.5px;
}
.Grid.Grid--gutterVxsm > .Grid-cell,
.Grid.Grid--gutterAxsm > .Grid-cell {
  padding-top: 7.5px;
  padding-bottom: 7.5px;
}
.Grid.Grid--gutterVsm,
.Grid.Grid--gutterAsm {
  margin-top: -10px;
  margin-bottom: -10px;
}
.Grid.Grid--gutterVsm > .Grid-cell,
.Grid.Grid--gutterAsm > .Grid-cell {
  padding-top: 10px;
  padding-bottom: 10px;
}
.Grid.Grid--gutterVmd,
.Grid.Grid--gutterAmd {
  margin-top: -12.5px;
  margin-bottom: -12.5px;
}
.Grid.Grid--gutterVmd > .Grid-cell,
.Grid.Grid--gutterAmd > .Grid-cell {
  padding-top: 12.5px;
  padding-bottom: 12.5px;
}
.Grid.Grid--gutterVlg,
.Grid.Grid--gutterAlg {
  margin-top: -15px;
  margin-bottom: -15px;
}
.Grid.Grid--gutterVlg > .Grid-cell,
.Grid.Grid--gutterAlg > .Grid-cell {
  padding-top: 15px;
  padding-bottom: 15px;
}
.Grid.Grid--gutterVxlg,
.Grid.Grid--gutterAxlg {
  margin-top: -20px;
  margin-bottom: -20px;
}
.Grid.Grid--gutterVxlg > .Grid-cell,
.Grid.Grid--gutterAxlg > .Grid-cell {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media only screen and (min-width: 48em), print {
  .Grid.Grid--md-gutterHlg {
    /* stylelint-disable-line selector-class-pattern */
    margin-left: -15px;
    margin-right: -15px;
  }
  .Grid.Grid--md-gutterHlg > .Grid-cell {
    padding-left: 15px;
    padding-right: 15px;
  }
}
/*#

<div class="ImageGallery" data-module="swipebox">
    <div class="Grid Grid--gutterHxsm Grid--md-gutterHlg Grid--gutterVlg" >
        <div class="Grid-cell u-size1of2 u-md-size1of4">
            <a class="ImageGallery-link js-swipeboxItem" href="http://placehold.it/1000x1000" title=".">
                <img alt="" class="ImageGallery-image" src="http://placehold.it/100x100" />
            </a>
            <h3 class="ImageGallery-heading"></h3>
            <p class="ImageGallery-text"></p>
        </div>
        <div class="Grid-cell u-size1of2 u-md-size1of4">
            <a class="ImageGallery-link js-swipeboxItem" href="http://placehold.it/1000x1000" title=".">
                <img alt="" class="ImageGallery-image" src="http://placehold.it/100x100" />
            </a>
            <h3 class="ImageGallery-heading"></h3>
            <p class="ImageGallery-text"></p>
        </div>
    </div>
</div>
*/
.ImageGallery-link {
  display: inline-block;
  margin-bottom: 0.75em;
}
.ImageGallery-heading {
  margin: 0.5em 0;
  font-size: 0.875rem;
}
.ImageGallery-text {
  margin: 0.5em 0;
  font-size: 0.75rem;
}
.ImageGallery-text:last-of-type {
  margin-bottom: 0;
}
#swipebox-overlay a {
  -ms-touch-action: none;
      touch-action: none;
}
#swipebox-close {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNi42IiBoZWlnaHQ9IjE2LjMiPjxwYXRoIGQ9Ik0uNC43bC43LS43IDE1LjUgMTUuNi0uNy43TC40Ljd6bS4zIDE1LjRsLS43LS43TDE1LjMuMWwuNy43TC43IDE2LjF6IiBmaWxsPSIjZmZmZmZmIi8+PC9zdmc+);
}
#swipebox-prev,
#swipebox-next {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCI+PHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTMyLjkgNDQuMkwxMSAyMi41bDIyLTIwIDIgMi4yLTE5LjUgMTcuOUwzNS4xIDQyeiIvPjwvc3ZnPg==);
}
/*#

Listing content in either horizontal or vertical direction, while supporting all gutter sizes. It is often used in combination with a ``UL/OL`` tag but it is not required.

Examples:
 
<div>
    <b>List:</b>
    <ul class="List">
        <li class="List-item">Item 1</li>
        <li class="List-item">Item 2</li>
    </ul>
    
    <b>List--gutterVxlg:</b>
    <ul class="List List--gutterVxlg">
        <li class="List-item">Item 1</li>
        <li class="List-item">Item 2</li>
    </ul>
    
    <b>List-horizontal & List--center & List--bordered:</b>
    <ul class="List List--bordered List--horizontal List--center">
        <li class="List-item"><a href="#">Item 1</a></li>
        <li class="List-item"><a href="#">Item 2</a></li>
        <li class="List-item"><a href="#">Item 3</a></li>
    </ul>
</div>
*/
.List {
  padding-left: 0;
  list-style: none;
}
.List-item {
  padding-top: 0.46875rem;
  padding-bottom: 0.46875rem;
}
.List > .List-item:first-child {
  padding-top: 0;
}
.List > .List-item:last-child {
  padding-bottom: 0;
}
.List--center {
  text-align: center;
}
.List--right {
  text-align: right;
}
.List--bordered > .List-item {
  border-bottom: 1px solid #495a6b;
}
.List--bordered > .List-item:last-child {
  border-bottom: none;
}
.List--striped > .List-item {
  padding-top: 0;
  padding-bottom: 0;
}
.List--striped > .List-item .List-itemContent {
  display: block;
  padding: 0.46875rem 0.78125rem;
}
.List--striped > .List-item:nth-child(odd) .List-itemContent {
  background: #e9e4e3;
}
.List--horizontal {
  margin-left: -0.78125rem;
  margin-right: -0.78125rem;
}
.List--horizontal .List-item {
  display: inline-block;
  margin-right: -0.25em;
  padding-right: 0.78125rem;
  padding-left: 0.78125rem;
}
.List--horizontal .List-item:last-child {
  padding-right: 0;
}
.List--horizontal.List--bordered > .List-item {
  border-right: 1px solid #495a6b;
  border-bottom: none;
}
.List--horizontal.List--bordered > .List-item:last-child {
  border-right: none;
}
.List--horizontal.List--striped {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.List--horizontal.List--striped > .List-item {
  padding-left: 0;
  padding-right: 0;
}
.List--horizontal.List--nowrap {
  white-space: nowrap;
  overflow-x: auto;
}
/* 
    Vertical gutters (top, bottom) 
*/
.List--gutterVz > .List-item {
  padding-top: 0;
  padding-bottom: 0;
}
.List--gutterVxsm > .List-item {
  padding-top: 0.46875rem;
  padding-bottom: 0.46875rem;
}
.List--gutterVsm > .List-item {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.List--gutterVmd > .List-item {
  padding-top: 0.78125rem;
  padding-bottom: 0.78125rem;
}
.List--gutterVlg > .List-item {
  padding-top: 0.9375rem;
  padding-bottom: 0.9375rem;
}
.List--gutterVxlg > .List-item {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
/*
    Horizontal gutters (right, left)
*/
.List--gutterHz {
  margin-right: 0;
  margin-left: 0;
}
.List--gutterHz > .List-item {
  padding-right: 0;
  padding-left: 0;
}
.List--gutterHxsm {
  margin-right: -0.46875rem;
  margin-left: -0.46875rem;
}
.List--gutterHxsm > .List-item {
  padding-right: 0.46875rem;
  padding-left: 0.46875rem;
}
.List--gutterHsm {
  margin-right: -0.625rem;
  margin-left: -0.625rem;
}
.List--gutterHsm > .List-item {
  padding-right: 0.625rem;
  padding-left: 0.625rem;
}
.List--gutterHmd {
  margin-right: -0.78125rem;
  margin-left: -0.78125rem;
}
.List--gutterHmd > .List-item {
  padding-right: 0.78125rem;
  padding-left: 0.78125rem;
}
.List--gutterHlg {
  margin-right: -0.9375rem;
  margin-left: -0.9375rem;
}
.List--gutterHlg > .List-item {
  padding-right: 0.9375rem;
  padding-left: 0.9375rem;
}
.List--gutterHxlg {
  margin-right: -1.25rem;
  margin-left: -1.25rem;
}
.List--gutterHxlg > .List-item {
  padding-right: 1.25rem;
  padding-left: 1.25rem;
}
.List--itemList {
  margin: 0;
}
.List--itemList > .List-item {
  padding-top: 0;
  padding-bottom: 0;
}
.List--itemList > .List-item .List-itemContent {
  display: table;
  width: 100%;
  padding: 1em;
  color: #595857;
  font-size: 0.875rem;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  background: #e9e4e3;
}
.List--itemList > .List-item .List-itemContent:hover {
  text-decoration: none;
  background: #ede9e9;
}
.List--itemList .List-side,
.List--itemList .List-main {
  display: table-cell;
  padding: 0 0.6em;
  vertical-align: top;
}
.List--itemList .List-main {
  width: 100%;
}
.List--itemList .List-main.List-main--middle {
  vertical-align: middle;
}
.List--itemList .List-side {
  vertical-align: middle;
}
.List--itemList .List-side.List-side--top {
  vertical-align: top;
  padding-top: 0.1875rem;
}
.List--itemList .List-side.List-side--right .Select {
  min-width: 38px;
}
.List--itemList .List-details {
  padding: 1.5625rem;
  border: 1px solid #e9e4e3;
  border-top: none;
}
.List--itemList .List-itemHeading {
  font-size: 0.875rem;
  font-weight: bold;
  margin-bottom: 3px;
  color: #18274a;
  text-decoration: none;
}
.List--itemList .List-itemBody {
  font-size: 0.75rem;
  margin-top: 0;
}
.List--itemList .List-itemBody p {
  margin: 0;
}
.List--itemList.List--itemListSmall .List-icon {
  width: 1.8em;
  max-height: 1.8em;
}
.List--itemList.List--itemListSmall .List-main {
  padding-left: 0.5em;
  padding-right: 0.5em;
}
.List--separator {
  padding-bottom: 1em;
  border-bottom: 1px solid #e9e4e3;
}
.List--itemListCols > .List-item {
  display: block;
  width: 33%;
  padding: 0;
  -webkit-box-flex: 1;
      -ms-flex: auto 1 1;
          flex: auto 1 1;
}
.List--itemListCols > .List-item .List-item {
  display: inline-block;
}
.List-icon {
  width: 2em;
  max-height: 2em;
  color: #18274a;
  overflow: visible !important;
}
@media only screen and (min-width: 48em), print {
  .List-icon {
    width: 3.1em;
    max-height: 3em;
  }
}
.Map--small {
  height: 200px;
  width: 100%;
}
.is-inactive:hover {
  outline: 2px solid #d4cac8;
}
/*#

The Media component is used for splitting content into a fixed width column and a fluid column that works nicely with for different screen widths.

Based on the Flag object by CSS Wizardry, but renamed to Media because it's more common name for this layout.
http://csswizardry.com/2013/05/the-flag-object/

<div class="Media Media--top">
    <div class="Media-side">
        <img src="http://placehold.it/100x100" />
    </div>
    <div class="Media-body">
        <p>This is the body of the Media object. You can change the alignment of the body to be either middle (default), top or bottom.</p>
        
        <div class="Media Media--top">
            <div class="Media-side">
                <img src="http://placehold.it/100x100" />
            </div>
            <div class="Media-body">
                <p>Nested Media object works as well.</p>
            </div>
        </div>
    </div>
</div>
*/
.Media {
  display: table;
  width: 100%;
}
.Media-side,
.Media-body {
  display: table-cell;
  vertical-align: middle;
}
.Media--top .Media-side,
.Media--top .Media-body {
  vertical-align: top;
}
.Media--bottom .Media-side,
.Media--bottom .Media-body {
  vertical-align: bottom;
}
.Media--right .Media-side {
  display: table-cell;
  padding-right: 0;
  padding-left: 1.5625rem;
}
.Media-side {
  padding-right: 1.5625rem;
}
.Media-side > img {
  display: block;
  max-width: none;
}
.Media-body {
  width: 100%;
}
.Media--equal .Media-body {
  width: auto;
}
/*#

Display a mega navigation in the header. Is used in desktop and tablet view, not in mobile view.<br>
Supported navigation types: Mouse, touch and keyboard.<br>
Screen readers: Aria-controls attributes explains the logical hierarchy and aria-expanded attributes explains which items that are visible.

*/
.MegaNav {
  display: none;
  position: absolute;
  width: 100%;
  left: 0;
  top: 5.625rem;
  opacity: 0;
  -webkit-transition: opacity 150ms linear;
  transition: opacity 150ms linear;
  padding-left: 1.5625rem;
  padding-right: 1.5625rem;
  background: #e9e4e3;
  border-bottom: 0.0625rem solid #d4cac8;
  text-align: left;
}
@media only screen and (min-width: 57.5em), print {
  .MegaNav {
    top: 5rem;
  }
}
.MegaNav.is-active {
  opacity: 1;
  -webkit-transition: opacity 150ms linear;
  transition: opacity 150ms linear;
}
.MegaNav-content {
  width: 100%;
  display: table;
  margin-left: auto;
  margin-right: auto;
  max-width: 1170px;
}
.MegaNav-heading {
  font-size: 0.875rem;
  color: #18274a;
  margin-bottom: 0;
}
.MegaNav-heading .MegaNav-item {
  font-size: inherit !important;
  color: #18274a;
}
.MegaNav-heading .MegaNav-item:hover {
  color: #495a6b;
}
.MegaNav-item {
  display: block;
  color: #595857;
  font-size: 0.875rem;
}
.MegaNav-item:hover {
  color: #8b7e79;
  text-decoration: none;
}
.MegaNav-paragraph {
  color: #595857;
  font-size: 0.75rem;
}
.MegaNav-level1,
.MegaNav-level2 {
  width: 32.55205%;
  display: table-cell;
  vertical-align: top;
}
@media only screen and (min-width: 57.5em), print {
  .MegaNav-level1,
  .MegaNav-level2 {
    width: 25%;
  }
}
.MegaNav-level1 {
  border-left: 0.0625rem solid #d4cac8;
  padding: 1.875rem 0 1.875rem 1.5625rem;
  line-height: 1.25rem;
}
.MegaNav-level2 {
  border-right: 0.0625rem solid #d4cac8;
  padding: 1.25rem 0;
}
.MegaNav-level2 .MegaNav-item {
  padding: 0.9375rem 1.25rem;
  -webkit-transition: background-color 150ms linear;
  transition: background-color 150ms linear;
  margin-left: -1.5625rem;
}
@media only screen and (min-width: 73.125em) {
  .MegaNav-level2 .MegaNav-item {
    margin-left: 0;
  }
}
.MegaNav-level2 .MegaNav-item:hover {
  text-decoration: none;
}
.MegaNav-level2 .MegaNav-item[aria-expanded="true"] {
  background-color: #fff;
  color: #8b7e79;
}
.MegaNav-level2 .MegaNav-item[data-children="true"] {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTMuOHB4IiBoZWlnaHQ9IjE2LjFweCIgdmlld0JveD0iMCAwIDEzLjggMTYuMSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTMuOCAxNi4xOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSBzbGljZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGw6IzQ5NUE2Qjt9PC9zdHlsZT48cG9seWdvbiBpZD0iWE1MSURfMjhfIiBjbGFzcz0ic3QwIiBwb2ludHM9IjQuMSwwLjUgMy40LDEuMiAxMCw3LjkgMy40LDE0LjUgNC4xLDE1LjIgMTEuNCw3LjkgIi8+PC9zdmc+);
  background-repeat: no-repeat;
  background-position: right;
  border-right: 0.9375rem solid transparent;
  background-size: 1em 1em;
}
.MegaNav-level3 {
  display: none;
  padding: 1.5625rem;
  -webkit-column-count: 1;
     -moz-column-count: 1;
          column-count: 1;
  -webkit-column-fill: auto;
     -moz-column-fill: auto;
          column-fill: auto;
  vertical-align: top;
  overflow: auto;
  /* Equal height */
  /* Full screen nav for medium resolution devices (tablet) */
  /* Do not make the meganav higher than the device height */
}
@media only screen and (max-width: 57.4375rem) {
  .MegaNav-level3 {
    height: calc(100vh - 90px - 35px) !important;
  }
  .is-sticky .MegaNav-level3 {
    height: calc(100vh - 90px) !important;
  }
}
@media only screen and (min-width: 57.5em), print {
  .MegaNav-level3 {
    -webkit-column-count: 2;
       -moz-column-count: 2;
            column-count: 2;
    max-height: calc(100vh - 80px - 35px);
  }
  .is-sticky .MegaNav-level3 {
    max-height: calc(100vh - 80px);
  }
}
.MegaNav-level3.is-active {
  display: block;
}
.MegaNav-level3 .MegaNav-item {
  padding: 0.4em 0;
}
/*#
Component for showing a modal window on page.
Can be used in conjunction with the "modal" js-module.

<div>
    <p><a href="#" class="Button" data-module="modal" data-modal="contentElement: '.js-demoModal'">Open modal</a></p>
    
    <section class="Modal js-demoModal">
        <div class="Modal-dialog">
            <h3>Modal header</h3>
            <a class="Modal-close js-close" href="#">&times;</a>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean maximus eget ipsum id mattis. Aliquam nec erat sed justo ullamcorper congue eget id orci. Phasellus eleifend rhoncus lacinia.</p>
            <div class="Modal-footer">
                <a href="#" class="Button Button--wide">Send</a>
                <a href="#" class="u-linkText u-marginRmd js-close">Cancel</a>
            </div>
        </div>
    </section>
</div>
*/
.Modal {
  position: fixed;
  display: none;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  padding: 1em;
  z-index: 998;
}
.Modal:after {
  content: "";
  background: rgba(0, 0, 0, 0.33);
  position: fixed;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 998;
}
.Modal.is-active {
  display: block;
}
.Modal-dialog {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: #495a6b;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 999;
  width: 100%;
  max-width: 800px;
  padding: 1.5625rem 1.875rem;
  overflow: auto;
}
.Modal-dialog h1,
.Modal-dialog h2,
.Modal-dialog h3,
.Modal-dialog h4,
.Modal-dialog h5,
.Modal-dialog h6,
.Modal-dialog p {
  color: inherit;
}
@media only screen and (min-width: 34em), print {
  .Modal-dialog {
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    padding: 2.5rem 3.75rem;
  }
}
.Modal-logoImage {
  display: block;
  width: 160px;
  height: 26px;
  background-image: url("/assets/core/images/logo/getinge-logo-white.svg");
  background-repeat: no-repeat;
  margin-bottom: 2.5rem;
}
.Modal-content {
  font-size: 0.875rem;
  margin-bottom: 2.5rem;
  max-width: 90%;
}
.Modal-close {
  position: absolute;
  top: 0.8em;
  right: 0.8em;
  font-size: 1.6em;
  text-decoration: none;
  padding: 0 0.25em 0.05em;
  background: #e9e4e3;
  line-height: 1em;
  border-radius: 50%;
  color: #fff;
}
.Modal-close:hover {
  background: #ded6d5;
  color: #fff;
  text-decoration: none;
}
.Modal-linkWrapper {
  text-align: center;
}
@media only screen and (min-width: 48em), print {
  .Modal-linkWrapper {
    text-align: right;
  }
}
/*#

Full article view.

*/
@media only screen and (min-width: 48em), print {
  .NewsArticle,
  .NewsArticle-share {
    width: 80%;
    margin: auto;
  }
}
@media only screen and (min-width: 57.5em), print {
  .NewsArticle,
  .NewsArticle-share {
    width: 70%;
  }
}
@media only screen and (min-width: 64em) {
  .NewsArticle,
  .NewsArticle-share {
    width: 60%;
  }
}
.NewsArticle {
  overflow-x: auto;
}
.NewsArticle h2,
.NewsArticle h3,
.NewsArticle h4,
.NewsArticle h5 {
  color: #18274a;
  font-size: 1.25rem;
  font-weight: bold;
  margin-top: 1.5em;
}
.NewsArticle img {
  width: 100% !important;
  height: 100% !important;
}
.NewsArticle .List-main {
  vertical-align: middle;
}
.NewsArticle-heading {
  text-align: center;
  font-size: 1.25rem;
}
@media only screen and (min-width: 48em), print {
  .NewsArticle-heading {
    font-size: 2.5rem;
  }
}
.NewsArticle-metaData {
  font-size: 0.875rem;
  text-align: center;
  margin-bottom: 3em;
  margin-top: 1em;
}
@media only screen and (min-width: 48em), print {
  .NewsArticle-metaData {
    margin-bottom: 5em;
    margin-top: 2em;
  }
}
/*#

A sticky header used in news list and news article.

*/
.NewsHeader {
  position: relative;
  z-index: 1;
}
.NewsHeader .Button {
  white-space: nowrap;
}
.NewsHeader .Sticky-element {
  background-color: #e9e4e3;
  height: 60px;
  margin: auto;
  max-width: 1600px;
  width: 100%;
}
@media only screen and (min-width: 48em), print {
  .NewsHeader .Sticky-element {
    height: 80px;
  }
}
.NewsHeader--newsArticle .NewsHeader-heading {
  width: initial;
}
.NewsHeader--newsArticle .Sticky-element {
  background: transparent;
  -webkit-transition: background-color 500ms linear;
  transition: background-color 500ms linear;
}
.NewsHeader--newsArticle .Sticky-element.is-sticky {
  background-color: #e9e4e3;
}
.NewsHeader-heading {
  color: #18274a;
  display: table-cell;
  font-size: 1.25rem;
  text-align: left;
  vertical-align: middle;
  width: 100%;
  white-space: nowrap;
}
.NewsHeader-heading a {
  color: #18274a;
  text-decoration: none;
}
.NewsHeader-heading a .Icon {
  height: 0.7em;
  width: 0.7em;
}
/*
** Filter
*/
.NewsHeader-filterHeading {
  display: none;
}
@media only screen and (min-width: 48em), print {
  .NewsHeader-filterHeading {
    display: inline;
  }
}
.NewsHeader-filterToggler {
  display: table-cell;
  position: relative;
  text-align: center;
  vertical-align: middle;
}
@media only screen and (min-width: 48em), print {
  .NewsHeader-filterToggler {
    display: none;
  }
}
a.NewsHeader-filterTogglerLink {
  color: #18274a;
  font-size: 0.875rem;
  padding: 0 1.875rem;
  text-decoration: none;
}
a.NewsHeader-filterTogglerLink.is-active:after,
a.NewsHeader-filterTogglerLink.is-active:before {
  border: solid transparent;
  bottom: -1px;
  content: "";
  height: 0;
  left: 50%;
  pointer-events: none;
  position: absolute;
  width: 0;
  z-index: 1;
}
a.NewsHeader-filterTogglerLink.is-active:after {
  border-color: transparent;
  border-bottom-color: #e9e4e3;
  border-width: 9px;
  margin-left: -9px;
}
a.NewsHeader-filterTogglerLink.is-active:before {
  border-color: transparent;
  border-bottom-color: #18274a;
  border-width: 10px;
  margin-left: -10px;
}
.NewsHeader-filter {
  background-color: #e9e4e3;
  border-top: 1px solid #18274a;
  left: 0;
  font-size: 0.875rem;
  height: 0;
  overflow: hidden;
  padding: 0.3em 1.5625rem;
  right: 0;
  top: 59px;
  position: absolute;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  visibility: hidden;
  white-space: nowrap;
}
.NewsHeader-filter.is-active {
  height: 130px;
  visibility: visible;
}
@media only screen and (min-width: 48em), print {
  .NewsHeader-filter {
    border: none;
    background-color: transparent;
    display: table-cell;
    height: auto;
    padding: 0 2.5rem;
    position: static;
    text-align: right;
    vertical-align: middle;
    visibility: visible;
  }
}
.NewsHeader-filterCheckbox {
  display: block;
  margin: 1em 0;
}
@media only screen and (min-width: 48em), print {
  .NewsHeader-filterCheckbox {
    display: inline-block;
    margin: 0 0 0 1em;
  }
}
/*
    ** Scroll progress
*/
.NewsHeader-scrollProgressContainer {
  color: #18274a;
  display: none;
  font-weight: bold;
  opacity: 0;
  text-align: center;
  -webkit-transition: opacity 500ms ease-in-out;
  transition: opacity 500ms ease-in-out;
  vertical-align: middle;
  width: 100%;
}
@media only screen and (min-width: 26.25em), print {
  .NewsHeader-scrollProgressContainer {
    display: table-cell;
  }
}
.is-sticky .NewsHeader-scrollProgressContainer {
  opacity: 1;
}
.NewsHeader-scrollProgressHeading {
  display: none;
}
@media only screen and (min-width: 48em), print {
  .NewsHeader-scrollProgressHeading {
    display: block;
    font-size: 0.875rem;
    line-height: 1.3em;
    padding-left: 1em;
    padding-right: 1em;
  }
}
@media only screen and (min-width: 57.5em), print {
  .NewsHeader-scrollProgressHeading {
    font-size: 1rem;
    line-height: 1.4em;
  }
}
.NewsHeader-scrollProgress {
  background-color: #aaa;
  height: 5px;
  margin: auto;
  margin-top: 0.5em;
  max-width: 80%;
}
.NewsHeader-scrollProgressBar {
  background-color: #495a6b;
  height: 5px;
  width: 0;
}
/*
** Subscribe
*/
.NewsHeader-subscribeModal {
  max-width: 500px;
}
.NewsHeader-subscribeForm {
  max-width: 300px;
  margin: auto;
}
.NewsHeader-subscribeForm .NewsHeader-subscribeEmail:focus {
  border-bottom-color: #fff;
}
.NewsHeader-subscribeClose {
  height: 1em;
  position: absolute;
  right: 1em;
  top: 1em;
  width: 1em;
}
.NewsHeader-subscribeCloseIcon {
  color: #fff;
}
/*#

Listing of news, displaying a short summary for each article and a link to read more.

*/
.NewsList {
  padding: 1.5625rem;
  text-align: center;
}
.NewsList-article {
  border-bottom: 1px solid #bfb1ac;
  padding: 2.5em 0;
  text-align: left;
}
@media only screen and (min-width: 48em), print {
  .NewsList-article {
    width: 80%;
    margin: auto;
  }
}
@media only screen and (min-width: 57.5em), print {
  .NewsList-article {
    width: 70%;
  }
}
@media only screen and (min-width: 64em) {
  .NewsList-article {
    width: 60%;
  }
}
.NewsList-metaData {
  color: #bfb1ac;
  font-size: 0.75rem;
}
/*#

Listing of children pages. Every item can be displayed as a Card or List.

<div class="Grid Grid--gutterHlg Grid--gutterVlg">
    <div class="Grid-cell u-md-size1of3">
        <div class="PageList">
            <h2 class="Heading--smallBold">Heading</h2>
            <ul class="PageList-list">
                <li class="PageList-listItem PageList-listItem--odd">
                    <a class="PageList-listItemLink" href="#">
                        <span class="PageList-date">2016.12.10</span>
                        <span class="PageList-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</span>
                    </a>
                </li>
                <li class="PageList-listItem">
                    <a class="PageList-listItemLink" href="#">
                        <span class="PageList-date">2016.12.10</span>
                        <span class="PageList-text">Lorem ipsum dolor sit amet</span>
                    </a>
                </li>
                <li class="PageList-listItem PageList-listItem--odd">
                    <a class="PageList-listItemLink" href="#">
                        <span class="PageList-date">2016.12.10</span>
                        <span class="PageList-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</span>
                    </a>
                </li>
                <li class="PageList-listItem">
                    <a class="PageList-listItemLink" href="#">
                        <span class="PageList-date">2016.12.10</span>
                        <span class="PageList-text">Lorem ipsum dolor sit amet</span>
                    </a>
                </li>
                <li class="PageList-listItem PageList-listItem--odd">
                    <a class="PageList-listItemLink" href="#">
                        <span class="PageList-date">2016.12.10</span>
                        <span class="PageList-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</span>
                    </a>
                </li>
                <li class="PageList-listItem">
                    <a class="PageList-listItemLink" href="#">
                        <span class="PageList-date">2016.12.10</span>
                        <span class="PageList-text">Lorem ipsum dolor sit amet</span>
                    </a>
                </li>
            </ul>
            <p class="CallToAction">
                <a class="Link Link--icon" href="#">View all
                    <svg role="presentation" aria-hidden="true" class="Icon Icon--arrow">
                        <use xlink:href="/Assets/build/app.svg#arrow-thin-right"></use>
                    </svg>
                </a>
            </p>
        </div>
    </div>

    <div class="Grid-cell u-md-size1of3">
        <div class="Card">
            <div class="Card-imageContainer">
                <img class="Card-image" src="http://placehold.it/750x500">
            </div>
            <h2 class="Heading Heading--smallBold u-marginBz">Lorem ipsum</h2>
            <div class="Card-bodyText">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
            <p class="CallToAction">
                <a class="Link Link--icon" href="/en/our-offices/">Read more about lorem ipsum
                    <svg role="presentation" aria-hidden="true" class="Icon Icon--arrow">
                        <use xlink:href="/Assets/build/app.svg#arrow-thin-right"></use>
                    </svg>
                </a>
            </p>
        </div>
    </div>

    <div class="Grid-cell u-md-size1of3">
        <div class="Card">
            <div class="Card-imageContainer">
                <img class="Card-image" src="http://placehold.it/750x500">
            </div>
            <h2 class="Heading Heading--smallBold u-marginBz">Lorem ipsum</h2>
            <div class="Card-bodyText">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
            <p class="CallToAction">
                <a class="Link Link--icon" href="/en/our-offices/">Read more about lorem ipsum
                    <svg role="presentation" aria-hidden="true" class="Icon Icon--arrow">
                        <use xlink:href="/Assets/build/app.svg#arrow-thin-right"></use>
                    </svg>
                </a>
            </p>
        </div>
    </div>
</div>

*/
.PageList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.PageList .CallToAction {
  margin-top: auto;
}
.PageList .CallToAction .Link {
  display: block;
}
.PageList-list {
  margin: 0;
  padding: 0;
  list-style: none;
  margin-bottom: 1em;
}
.PageList-listItem {
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
}
.PageList-listItem:hover {
  background: #fbfaf9;
}
.PageList-listItem--odd {
  background-color: #e9e4e3;
}
.PageList-listItem--odd:hover {
  background: #ede9e9;
}
.PageList-listItemLink {
  color: #595857;
  padding: 1em;
  display: block;
}
.u-md-size1of4 .PageList-listItemLink {
  /* stylelint-disable-line selector-class-pattern */
}
@media only screen and (min-width: 73.125em) {
  .u-md-size1of4 .PageList-listItemLink {
    display: table;
  }
}
.u-md-size1of3 .PageList-listItemLink {
  /* stylelint-disable-line selector-class-pattern */
}
@media only screen and (min-width: 57.5em), print {
  .u-md-size1of3 .PageList-listItemLink {
    display: table;
  }
}
.PageList-listItemLink:hover {
  text-decoration: none;
  color: #595857;
}
.u-md-size1of4 .PageList-date,
.u-md-size1of4 .PageList-text {
  /* stylelint-disable-line selector-class-pattern */
}
@media only screen and (min-width: 73.125em) {
  .u-md-size1of4 .PageList-date,
  .u-md-size1of4 .PageList-text {
    display: table-cell;
  }
}
.u-md-size1of3 .PageList-date,
.u-md-size1of3 .PageList-text {
  /* stylelint-disable-line selector-class-pattern */
}
@media only screen and (min-width: 57.5em), print {
  .u-md-size1of3 .PageList-date,
  .u-md-size1of3 .PageList-text {
    display: table-cell;
  }
}
.PageList-date {
  padding-right: 0.5em;
  color: #18274a;
}
.u-md-size1of4 .PageList-date {
  /* stylelint-disable-line selector-class-pattern */
}
@media only screen and (min-width: 73.125em) {
  .u-md-size1of4 .PageList-date {
    padding-right: 1em;
  }
}
.u-md-size1of3 .PageList-date {
  /* stylelint-disable-line selector-class-pattern */
}
@media only screen and (min-width: 57.5em), print {
  .u-md-size1of3 .PageList-date {
    padding-right: 1em;
  }
}
/*#

Display a page navigation that can be used for both vertical and horizontal navigations, e.g. header nav or sidebar nav.

Examples:

<div>
    <h4>Horizontal</h4>
    <nav class="PageNav PageNav--horizontal">
        <ul class="PageNav-list">
            <li class="PageNav-item">
                <a href="#" class="PageNav-itemLink is-active">Item 1</a>
            </li>
            <li class="PageNav-item">
                <a href="#" class="PageNav-itemLink">Item 2</a>
            </li>
            <li class="PageNav-item">
                <a href="#" class="PageNav-itemLink">Item 3</a>
            </li>
        </ul>
    </nav>
</div>
<div>
    <h4>Vertical</h4>
    <nav class="PageNav PageNav--vertical">
        <ul class="PageNav-list">
            <li class="PageNav-item">
                <a href="#" class="PageNav-itemLink is-active">Item 1</a>
            </li>
            <li class="PageNav-item">
                <a href="#" class="PageNav-itemLink">Item 2</a>
            </li>
            <li class="PageNav-item">
                <a href="#" class="PageNav-itemLink">Item 3</a>
            </li>
        </ul>
    </nav>
</div>

*/
.PageNav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.PageNav-item {
  padding: 0;
}
.PageNav-itemLink {
  color: #31b7bc;
  text-decoration: none;
  position: relative;
  white-space: nowrap;
}
.PageNav-itemLink:hover {
  color: #e9e4e3;
  text-decoration: underline;
}
.PageNav-itemLink.is-active,
.PageNav-itemLink[aria-expanded=true] {
  font-weight: bold;
}
.PageNav--negative .PageNav-itemLink {
  color: #fff;
}
.PageNav--negative .PageNav-itemLink:hover {
  color: #e9e4e3;
  text-decoration: none;
}
.PageNav--horizontal .PageNav-item {
  display: inline-block;
  margin-right: 1.875rem;
}
.PageNav--horizontal .PageNav-item:last-child {
  margin-right: 0;
}
.PageNav--horizontal .PageNav-itemLink {
  margin-right: -0.1875em;
  display: inline-block;
}
.PageNav--vertical {
  border-left: 1px solid #bfb1ac;
  width: 100%;
}
.PageNav--vertical .PageNav-itemLink {
  color: #595857;
  display: block;
  padding-left: 1.5625rem;
  line-height: 1.35em;
  margin-top: 0.9em;
  font-size: 0.875rem;
  position: relative;
  white-space: normal;
}
.PageNav--vertical .PageNav-item {
  margin-top: 0.5em;
}
.PageNav--vertical .PageNav-item .PageNav-item .PageNav-itemLink {
  padding-left: 2.8125rem;
  line-height: 1.5em;
  font-size: 0.75rem;
  margin-top: 0;
}
.PageNav--vertical .PageNav-itemLink:hover:before,
.PageNav--vertical .is-active:before {
  content: "";
  width: 5px;
  height: 100%;
  background: #18274a;
  display: block;
  position: absolute;
  left: 0;
  margin-left: -3px;
}
.PageNav--vertical .PageNav-itemLink:not(.is-active):hover:before {
  width: 1px;
  margin-left: -1px;
}
.PageNav--vertical .PageNav-sticky {
  z-index: 1 !important;
}
/*#

Navigation between large data sets.

Examples:

<div>
    <ul class="Pagination">
        <li class="Pagination-item Pagination-item--nav is-disabled"><a href="#prev" class="Pagination-link">Previous</a></li>
        <li class="Pagination-item"><a href="#" class="Pagination-link">1</a></li>
        <li class="Pagination-item Pagination-item--separator">…</li>
        <li class="Pagination-item"><a href="#" class="Pagination-link">4</a></li>
        <li class="Pagination-item is-active"><a href="#" class="Pagination-link">5</a></li>
        <li class="Pagination-item"><a href="#" class="Pagination-link">6</a></li>
        <li class="Pagination-item Pagination-item--separator">…</li>
        <li class="Pagination-item"><a href="#" class="Pagination-link">14</a></li>                            
        <li class="Pagination-item Pagination-item--nav"><a href="#next" class="Pagination-link">Next</a></li>
    </ul>
</div>

*/
.Pagination {
  list-style: none;
  padding: 0;
}
.Pagination-item {
  display: inline-block;
}
.Pagination-item.is-active .Pagination-link {
  background-color: rgba(233, 228, 227, 0.5);
  cursor: default;
  font-weight: bold;
  pointer-events: none;
}
.Pagination-item--nav .Pagination-link {
  border-color: #e9e4e3;
  padding-right: 1.5625rem;
  padding-left: 1.5625rem;
}
.Pagination-item--nav.is-disabled {
  pointer-events: none;
}
.Pagination-item--nav.is-disabled .Pagination-link {
  border-color: rgba(233, 228, 227, 0.5);
  color: #e9e4e3;
}
.Pagination-item--separator {
  color: #eae5e4;
}
.Pagination-item--text {
  color: #bfb1ac;
  font-size: 0.875rem;
  padding-right: 1.25rem;
  padding-left: 1.25rem;
}
.Pagination-link {
  display: inline-block;
  padding: 0.9375rem 1.25rem;
  border-radius: 3px;
  color: #595857;
  border: 2px solid transparent;
}
.Pagination-link:hover {
  border-color: #18274a;
  background-color: #18274a;
  text-decoration: none;
  color: #fff;
}
.Promo {
  background-color: #18274a;
  height: 100%;
}
.Promo .Promo-image:after {
  border-color: #18274a;
}
.Promo .Promo-text,
.Promo .Heading {
  color: #fff;
}
.Promo-image {
  position: relative;
  padding: 0.78125rem 0;
  margin-bottom: -1.5625rem;
}
.Promo-image img {
  width: 100%;
}
.Promo-image:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  border: 1.5625rem solid;
}
.Promo-image[data-module*="video"]:after {
  background-color: rgba(0, 0, 0, 0.5);
}
.Promo-text {
  padding: 1.5625rem;
  padding-top: 0;
}
.Promo-text *:first-child {
  margin-top: 0;
}
.Promo-text *:last-child {
  margin-bottom: 0;
}
.Promo-image + .Promo-text {
  padding-top: 1.5625rem;
}
.Promo-videoLink {
  position: relative;
  display: block;
}
.Promo-videoLink:after {
  content: "";
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4MC41IDgwLjUiPjxwYXRoIGQ9Ik00MC4yIDBhNDAuMiA0MC4yIDAgMSAwIDQwLjIgNDAuMkM4MC40IDE4IDYyLjUgMCA0MC4yIDB6bS01LjMgNTEuOFYyOC43bDE2LjcgMTEuNi0xNi43IDExLjV6IiBmaWxsPSIjZmZmIi8+PC9zdmc+);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 60px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
}
/*
** Themes
*/
.Promo--themeMidnight {
  background-color: #495a6b;
}
.Promo--themeMidnight .Promo-image:after {
  border-color: #495a6b;
}
.Promo--themeMidnight .Promo-text,
.Promo--themeMidnight .Heading {
  color: #fff;
}
/*#

Let's the user select which market to read the website in.

Examples:

See Region Select template for example.

*/
.RegionSelect {
  background: #495a6b;
  color: #fff;
  overflow: hidden;
  text-align: center;
}
.RegionSelect h1,
.RegionSelect label {
  color: inherit;
}
.RegionSelect-content {
  background: url(/assets/core/images/world-map.svg) no-repeat center center;
  background-size: auto 90%;
  padding: 3em 1.5625rem;
  min-height: 70vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media only screen and (min-width: 48em), print {
  .RegionSelect-content {
    height: 80vh;
    background-size: 100% 90%;
  }
}
.RegionSelect-heading {
  font-size: 1.875rem;
  font-weight: normal;
  margin-bottom: 0;
}
@media only screen and (min-width: 34em), print {
  .RegionSelect-heading {
    font-size: 2.5rem;
  }
}
.RegionSelect-row {
  margin: 1em 0 2.5em;
}
.RegionSelect-row .Select {
  width: 100%;
  margin-bottom: 1.5625rem;
}
@media only screen and (min-width: 34em), print {
  .RegionSelect-row .Select {
    width: auto;
    margin-bottom: 0;
  }
}
.ScrollToTop {
  position: fixed;
  bottom: 1.5625rem;
  right: 1.5625rem;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transition: opacity ease-in-out 0.5s;
  transition: opacity ease-in-out 0.5s;
  visibility: hidden;
  opacity: 0;
  z-index: 3;
  background: #e9e4e3 url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTkuNCAxOC45IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxOS40IDE4Ljk7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPi5zdDB7ZmlsbDpub25lO3N0cm9rZTojMDAyODU2O3N0cm9rZS13aWR0aDoyO3N0cm9rZS1taXRlcmxpbWl0OjEwO30uc3Qxe2ZpbGw6bm9uZTtzdHJva2U6IzAwMjg1NjtzdHJva2Utd2lkdGg6MjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxMDt9PC9zdHlsZT48bGluZSBpZD0iWE1MSURfMTM3XyIgY2xhc3M9InN0MCIgeDE9IjkuNiIgeTE9IjE4LjkiIHgyPSI5LjYiIHkyPSIxLjQiLz48cG9seWxpbmUgaWQ9IlhNTElEXzI0XyIgY2xhc3M9InN0MSIgcG9pbnRzPSIxLDEwLjEgOS42LDEuNCAxOC40LDEwLjEgIi8+PC9zdmc+);
  width: 40px;
  height: 40px;
  border: 1px solid #bfb1ac;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 20px 20px;
}
.ScrollToTop.is-shown {
  visibility: visible;
  opacity: 0.5;
  -webkit-transition: opacity ease-in-out 0.2s;
  transition: opacity ease-in-out 0.2s;
}
.ScrollToTop:hover {
  opacity: 1;
}
.ScrollToTop--withinNotice {
  bottom: auto;
  position: absolute;
  top: -60px;
}
@media only screen and (min-width: 48em), print {
  .ScrollToTop--withinNotice {
    display: none;
  }
}
/*#

*/
.SearchItem {
  border-bottom: 1px solid #e9e4e3;
  padding-bottom: 0.625rem;
  margin-bottom: 1.5625rem;
}
.SearchItem-metaData {
  list-style: none;
  margin: 1em 0;
  padding: 0;
  color: #bfb1ac;
  font-size: 0.75rem;
}
.SearchItem-metaDataItem {
  display: inline-block;
  margin-right: 0.4em;
}
.SearchItem-metaDataItem:after {
  content: "|";
  margin-left: 0.5em;
  font-weight: normal;
}
.SearchItem-metaDataItem:last-child:after {
  content: none;
}
.SearchItem .Heading + p {
  margin-top: 0;
}
.SignaturePreview {
  border: 1px solid #e9e4e3;
  padding: 1.5625rem;
  margin: 1.5625rem 0;
}
.SignaturePreview img {
  max-width: 100% !important;
}
/*#

Allows to create a slider with any type of content.

<div class="Slider owl-carousel owl-theme" data-module="slider" data-slider='{"autoPlay": true, "autoplayTimeout": 7000}'>
    <div class="Slider-item"><h2 style="height: 150px; background: #eee;margin:0;padding: 1em 2em 2em;">Slide 1</h2></div>
    <div class="Slider-item"><h2 style="height: 150px; background: #ddd;margin:0;padding: 1em 2em 2em;">Slide 2</h2></div>
    <div class="Slider-item"><h2 style="height: 150px; background: #ccc;margin:0;padding: 1em 2em 2em;">Slide 3</h2></div>
</div>

*/
.Slider {
  padding-bottom: 50px;
  margin-top: 1.875rem;
  margin-bottom: 1.875rem;
}
@media only screen and (min-width: 48em), print {
  .Slider {
    margin-top: 0;
    margin-bottom: 0;
  }
}
.Slider .Slider-previousSlide,
.Slider .Slider-nextSlide {
  display: none;
}
@media only screen and (min-width: 80em) {
  .Slider .Slider-previousSlide,
  .Slider .Slider-nextSlide {
    display: block;
  }
}
@media only screen and (min-width: 80em) {
  .Slider:hover .Slider-previousSlide,
  .Slider:hover .Slider-nextSlide {
    opacity: 1;
  }
}
.Slider .Banner {
  margin: 0 !important;
}
.Slider-previousSlide,
.Slider-nextSlide {
  opacity: 0;
  cursor: pointer;
  height: 48px;
  width: 48px;
  text-indent: 48px;
  overflow: hidden;
  position: absolute;
  top: 50%;
  margin-top: -49px;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNDggNDgiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQ4IDQ4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGw6IzAwMjg1Njt9PC9zdHlsZT48ZyBpZD0iWE1MSURfNDJfIj48cG9seWdvbiBpZD0iWE1MSURfNDNfIiBjbGFzcz0ic3QwIiBwb2ludHM9IjMyLjksNDQuMiAxMSwyMi41IDMzLDIuNSAzNSw0LjcgMTUuNSwyMi42IDM1LjEsNDIgIi8+PC9nPjwvc3ZnPg==);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 48px;
}
.Slider-previousSlide {
  left: 0.5em;
}
.Slider-nextSlide {
  right: 0.5em;
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
  -ms-transform: rotate(180deg);
}
@media only screen and (min-width: 48em), print {
  .Slider--paginationOverlay {
    padding-bottom: 0;
  }
  .Slider--paginationOverlay.owl-theme .owl-controls {
    bottom: 0;
  }
}
/*#
*/
.SmallNav {
  display: block;
  position: fixed;
  background: #18274a;
  color: #fff;
  font-size: 0.875rem;
  overflow: auto;
  z-index: 1;
  top: -60px;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-overflow-scrolling: touch;
}
.SmallNav.is-active {
  visibility: visible;
  padding-top: 120px;
  height: calc(100% + 60px);
}
.SmallNav a {
  color: inherit;
}
@media only screen and (min-width: 48em), print {
  .SmallNav {
    display: none;
  }
}
.SmallNav-section {
  padding: 1.5625rem 1.5625rem 1.5625rem;
  border-bottom: 1px solid #495a6b;
}
.SmallNav-section:first-child {
  padding-top: 0;
}
.SmallNav-section:last-child {
  border-bottom: none;
}
.SmallNav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.SmallNav-item {
  position: relative;
}
.SmallNav-itemLink {
  display: block;
}
.SmallNav-itemLink:hover {
  text-decoration: none;
}
.SmallNav-itemLink.is-sticky {
  position: fixed;
  top: 60px;
  right: 0;
  left: 0;
  z-index: 1;
  padding-left: 1.5625rem !important;
  padding-right: 1.5625rem !important;
  background-position: right 2.5625rem center !important;
}
.SmallNav-itemLink.is-sticky + .SmallNav-list {
  padding-top: 51px;
}
.SmallNav-itemLink.is-sticky.is-stickyBottom {
  position: absolute;
  top: auto;
  bottom: 0;
  border-bottom: 1px solid #495a6b;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background-position: right 1rem center !important;
}
.SmallNav-itemLink.is-sticky.is-stickyBottom + .SmallNav-list {
  visibility: hidden;
}
.SmallNav-item--hasChildren > .SmallNav-itemLink {
  /* plus.svg */
  background: #18274a url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9Ii0zNyA3IDE0IDE0IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IC0zNyA3IDE0IDE0IiB4bWw6c3BhY2U9InByZXNlcnZlIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNLTMwLjQsNy41aDAuOHYxM2gtMC44VjcuNXogTS0zNi41LDEzLjZoMTN2MC44aC0xM1YxMy42eiIvPjwvc3ZnPg==) no-repeat center right 1.2em;
  background-size: 0.9375rem 0.9375rem;
}
.SmallNav-item--hasChildren .SmallNav-list {
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height 0.5s ease-in-out;
  transition: max-height 0.5s ease-in-out;
}
.SmallNav-item--hasChildren.is-active .SmallNav-list {
  max-height: 4000px;
}
.SmallNav-item--hasChildren.is-active > .SmallNav-itemLink {
  /* minus.svg */
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCAxNCAxNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTQgMTQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMC41LDYuNmgxM3YwLjhoLTEzVjYuNnoiLz48L3N2Zz4=);
  font-weight: bold;
}
.SmallNav-list--level1 {
  margin-bottom: 1.5625rem;
}
.SmallNav-list--level1 > .SmallNav-item {
  border-bottom: 1px solid #495a6b;
}
.SmallNav-list--level1 > .SmallNav-item.is-active {
  border-bottom: none;
}
.SmallNav-list--level1 > .SmallNav-item > .SmallNav-itemLink {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.SmallNav-list--level1 > .SmallNav-item > .SmallNav-itemLink .SmallNav-itemLinkInner {
  display: block;
  padding: 15px 0;
}
.SmallNav-list--level1 > .SmallNav-item.SmallNav-item--hasChildren > .SmallNav-itemLink .SmallNav-itemLinkInner {
  border-right: 1px solid #495a6b;
  margin-right: 3.6em;
}
.SmallNav-list--level2 {
  background: #e9e4e3;
  margin: 0 -1.5625rem;
  padding: 0 1.5625rem;
}
.SmallNav-list--level2 > .SmallNav-item {
  border-bottom: 1px solid #d4cac8;
  padding-bottom: 0.625rem;
  margin-bottom: 0.625rem;
}
.SmallNav-list--level2 > .SmallNav-item > .SmallNav-itemLink {
  color: #18274a;
  font-weight: bold;
  padding: 0.5em 0;
}
.SmallNav-list--level2 > .SmallNav-item:first-child {
  padding-top: 0.9375rem;
}
.SmallNav-list--level2 > .SmallNav-item:last-child {
  border-bottom: none;
  padding-bottom: 0.9375rem;
  margin-bottom: 0;
}
.SmallNav-list--level3 .SmallNav-itemLink {
  color: #595857;
  font-size: 1rem;
  font-weight: normal;
  padding: 0.6em 0;
}
.SmallNav-list--level3 .SmallNav-list {
  padding-left: 0.9375rem;
}
.SmallNav-secondaryList {
  margin: 0;
}
.SmallNav-secondaryList a {
  display: block;
}
.SmallNav-searchForm {
  padding: 1.5625rem 0;
}
.SmallNav .SmallNav-searchInput {
  /* search-white.svg */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiAgICAgdmlld0JveD0iMCAwIDM4LjkgMzkuMyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzguOSAzOS4zOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4gICAgLnN0MHtmaWxsOiNmZmY7fTwvc3R5bGU+PHBhdGggaWQ9IlhNTElEXzEwXyIgY2xhc3M9InN0MCIgZD0iTTM4LjksMzUuMUwyNy4yLDIzLjNjMS43LTIuNCwyLjYtNS4zLDIuNi04LjRDMjkuOCw2LjcsMjMuMSwwLDE0LjksMFMwLDYuNywwLDE0LjkgICAgczYuNywxNC45LDE0LjksMTQuOWMyLjksMCw1LjYtMC45LDcuOS0yLjNsMTEuOCwxMS44TDM4LjksMzUuMXogTTQsMTQuOUM0LDguOSw4LjksNCwxNC45LDRzMTAuOSw0LjksMTAuOSwxMC45ICAgIHMtNC45LDEwLjktMTAuOSwxMC45UzQsMjAuOSw0LDE0Ljl6Ii8+PC9zdmc+) no-repeat center left;
  width: 100%;
  color: #fff;
  background-size: auto 50%;
  padding-left: 2em;
  border-color: #495a6b;
}
.SmallNav .SmallNav-searchInput:focus {
  border-color: #fff;
}
/*#
Component used to display status messages.

<div class="Status"><p>This is plain status message</p></div>
<div class="Status Status--success"><p>This is a success message</p></div>
<div class="Status Status--info"><p>This is an info message</p></div>
<div class="Status Status--warning"><p>This is a warning message</p></div>
    
*/
.Status {
  padding: 0.1em 1em;
  margin: 1em 0;
  color: #fff;
  background-color: #495a6b;
}
.Status h1,
.Status h2,
.Status h3,
.Status h4,
.Status h5,
.Status h6,
.Status .Heading {
  color: inherit;
}
.Status--rounded {
  border-radius: 1em;
}
.Status--fixedBottom {
  margin: 0;
  position: fixed;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  /* 1 */
  bottom: 0;
  right: 0;
  z-index: 10;
}
.Status--center {
  text-align: center;
}
.Status--transparent {
  background-color: transparent;
}
.Status--tight {
  padding-right: 0;
  padding-left: 0;
}
.Status--condensed {
  padding-right: 0.4em;
  padding-left: 0.4em;
}
.Status--success {
  color: #595857;
  background-color: #e2f9be;
}
.Status--info {
  color: #595857;
  background-color: #fff9db;
}
.Status--warning {
  color: #595857;
  background-color: #ffd9c8;
}
.Status--warning.Status--bordered {
  background: transparent;
  color: #595857;
  border: 2px solid #ffd9c8;
}
.Status--full {
  padding-left: 0;
  padding-right: 0;
}
.Status--full .Status-content {
  margin-left: auto;
  margin-right: auto;
  max-width: 1220px;
  padding: 0 1.5625rem;
}
.Status--visitorNotice,
.Status--referenceOverlay {
  margin: 0;
  padding: 1.25rem 1.5625rem;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 0.75rem;
}
@media only screen and (min-width: 48em), print {
  .Status--visitorNotice,
  .Status--referenceOverlay {
    padding: 1.875rem 1.5625rem;
    font-size: 0.875rem;
    position: static;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
}
.Status--visitorNotice .Status-content,
.Status--referenceOverlay .Status-content {
  position: relative;
}
.Status--visitorNotice .Status-closeLink,
.Status--referenceOverlay .Status-closeLink {
  position: absolute;
  right: 0;
  top: 0;
  padding: 0.3em 0.5em;
}
.Status--visitorNotice .Status-closeLink svg,
.Status--referenceOverlay .Status-closeLink svg {
  fill: #fff;
}
.Status--visitorNotice .Status-closeLink:hover svg,
.Status--referenceOverlay .Status-closeLink:hover svg {
  fill: #d4cac8;
}
.Status--visitorNotice p,
.Status--referenceOverlay p {
  max-width: 60em;
}
.Status--visitorNotice p:last-of-type,
.Status--referenceOverlay p:last-of-type {
  margin-bottom: 0;
}
.Status--references {
  margin-top: 1.5625rem;
  margin-bottom: -1.5625rem;
}
@media only screen and (min-width: 48em), print {
  .Status--references {
    margin-top: 4.6875rem;
    margin-bottom: -4.6875rem;
  }
}
.Status--referenceOverlay {
  padding-bottom: 0.5em;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  -webkit-transform: translate3d(0, 100%, 0);
          transform: translate3d(0, 100%, 0);
  -webkit-transition: -webkit-transform 0.5s ease-in-out;
  transition: -webkit-transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
}
@media screen and (min-width: 1600px) {
  .Status--referenceOverlay {
    width: 1600px;
    left: 50%;
    margin-left: -800px;
  }
}
.Status--referenceOverlay.is-shown {
  -webkit-transform: translate3d(0, 0%, 0);
          transform: translate3d(0, 0%, 0);
}
.Status--referenceOverlay .Status-content {
  padding-right: 3em;
}
.Status--referenceOverlay p {
  margin-bottom: 1em;
}
.Sticky-element {
  -webkit-transition: -webkit-transform 0.3s 0.15s ease-in-out;
  transition: -webkit-transform 0.3s 0.15s ease-in-out;
  transition: transform 0.3s 0.15s ease-in-out;
  transition: transform 0.3s 0.15s ease-in-out, -webkit-transform 0.3s 0.15s ease-in-out;
  will-change: transform;
}
.Sticky-element.is-sticky {
  position: fixed;
  top: 0;
  left: auto;
  right: auto;
  z-index: 100;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.Sticky-element.is-stickyHidden {
  -webkit-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
          transform: translateY(-100%);
}
.Sticky-element.is-stickyBottom {
  position: absolute !important;
  top: auto !important;
  bottom: 0;
}
@media only screen and (min-width: 48em), print {
  .Sticky-element.is-stickyBottom--not-mobile {
    /* stylelint-disable-line selector-class-pattern */
    position: absolute !important;
    top: auto !important;
    bottom: 0;
  }
}
.Sticky--visibleWhenSticky .Sticky-element {
  position: fixed;
  top: 0;
  opacity: 0;
  -webkit-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
          transform: translateY(-100%);
}
.Sticky--visibleWhenSticky .Sticky-element.is-sticky {
  opacity: 1;
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
}
/*# 

<div class="Table">
    <table>
        <thead>
            <tr>
                <th>Header 1</th>
                <th>Header 2</th>
                <th><a href="#">Header 3</a></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Row_col_1_Row_col_1_Row_col_1</td>
                <td>Row_col_2_Row_col_2_Row_col_2</td>
                <td>Row_col_3_Row_col_3_Row_col_3</td>
            </tr>
            <tr>
                <td>Row col 1</td>
                <td>Row col 2</td>
                <td>Row col 3</td>
            </tr>
        </tbody>
    </table>
</div>

*/
.Table {
  overflow: auto;
  margin: 1em 0 1.5625rem;
}
.Table table {
  margin: 0;
  min-width: 100%;
}
.Table th,
.Table td {
  padding: 1em !important;
}
.Table th {
  font-size: 0.875rem;
  color: #18274a;
  border: none;
  font-weight: normal;
  padding-top: 0.75em;
  padding-bottom: 0.75em;
}
.Table td {
  font-size: 0.75rem;
  border: none !important;
}
.Table tbody tr:hover {
  background-color: #fbfaf9;
}
.Table tbody tr:nth-child(odd) {
  background-color: #e9e4e3;
}
.Table tbody tr:nth-child(odd):hover {
  background-color: #ede9e9;
}
/*#

Component for dividing content into different tab panels on page.
Uses the "tabs" js-module.

<div class="Tabs" data-module="tabs">
    <ul class="Tabs-list">
        <li class="Tabs-item" data-name="tab-one"><a href="#" class="Tabs-link">Tab 1</a></li>
        <li class="Tabs-item" data-name="tab-two"><a href="#" class="Tabs-link">Tab 2</a></li>
    </ul>

    <div class="Tabs-panel">
        Panel 1
    </div>

    <div class="Tabs-panel">
        Panel 2
    </div>
</div>

<p></p>
<p>Product page styled and scrollable</p>

<div class="Tabs Tabs--product" data-module="tabs" data-tabs='{"scrollable": true}'>
    <div class="Tabs-horizontalScroll js-tabsScroll">
        <div class="Tabs-scrollable js-tabsScrollable">
            <ul class="Tabs-list js-tabsItems">
                <li class="Tabs-item" data-name="tab-one"><a href="#" class="Tabs-link">Tab 1</a></li>
                <li class="Tabs-item" data-name="tab-two"><a href="#" class="Tabs-link">Tab 2</a></li>
                <li class="Tabs-item" data-name="tab-one"><a href="#" class="Tabs-link">The third tab has a long title</a></li>
                <li class="Tabs-item" data-name="tab-two"><a href="#" class="Tabs-link">Next to the third tab is the fourth</a></li>
            </ul>
        </div>
        <button class="Tabs-scroll Tabs-scroll--left js-tabsLeft">
            <svg class="Icon" role="img" alt="Scroll left">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/build/app.svg#arrow-medium"></use>
            </svg>
        </button>
        <button class="Tabs-scroll Tabs-scroll--right js-tabsRight">
            <svg class="Icon" role="img" alt="Scroll right">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/build/app.svg#arrow-menu"></use>
            </svg>
        </button>
    </div>

    <div class="Tabs-panel">
        Panel 1
    </div>

    <div class="Tabs-panel">
        Panel 2
    </div>
</div>

*/
.Tabs {
  background: #e9e4e3;
  padding: 1.875rem;
}
.Tabs-list {
  margin: 0;
  padding-left: 0;
  width: 100%;
  text-align: left;
  margin-bottom: 1.875rem;
}
.Tabs-item {
  vertical-align: bottom;
  display: inline-block;
  padding: 0;
  margin: 0;
  margin-right: 1.25rem;
  margin-bottom: 1.25rem;
}
.Tabs-item:before {
  content: none;
}
.Tabs-item.is-active .Number {
  background: #18274a;
  color: #fff;
}
.Tabs-link {
  text-decoration: none;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  word-wrap: normal !important;
  color: #595857;
  cursor: pointer;
  vertical-align: bottom;
}
.Tabs-link:hover {
  color: #595857;
  text-decoration: none;
}
.Tabs-panel {
  display: none;
}
.Tabs-panel.is-active {
  display: block;
}
.Tabs--equalWidth .Tabs-list {
  display: table;
  table-layout: fixed;
}
.Tabs--equalWidth .Tabs-item {
  display: table-cell;
}
.Tabs--center {
  text-align: center;
}
.Tabs--center .Tabs-list {
  display: inline-block;
  width: auto;
}
.Tabs--center .Tabs-panel {
  text-align: left;
}
.Tabs--product {
  background: none;
  padding: 0;
  -webkit-transition: all 150ms linear;
  transition: all 150ms linear;
}
.Tabs--product .Tabs-list {
  position: relative;
}
.Tabs--product .Tabs-list:after {
  background: #e9e4e3;
  bottom: 0;
  content: "";
  display: block;
  height: 1px;
  position: absolute;
  width: 100%;
}
.Tabs--product .Tabs-item {
  margin: 0;
  padding: 0 2.25rem 0 0;
  position: relative;
  z-index: 1;
}
.Tabs--product .Tabs-item:last-child {
  padding-right: 0;
}
.Tabs--product .Tabs-item.is-active .Tabs-link {
  border-bottom-color: #18274a;
  color: #18274a;
  font-weight: bold;
}
.Tabs--product .Tabs-link {
  border-bottom: 3px solid transparent;
  color: #595857;
  display: inline-block;
  padding-bottom: 1.25em;
}
.Tabs--product .Tabs-link:hover {
  border-bottom-color: #18274a;
  color: #18274a;
}
.Tabs-horizontalScroll {
  height: 47px;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  margin-bottom: 1.875rem;
  margin-left: 1.5625rem;
  margin-right: 1.5625rem;
  position: relative;
  white-space: nowrap;
}
@media only screen and (min-width: 48em), print {
  .Tabs-horizontalScroll {
    margin-bottom: 3.75rem;
    margin-left: 0;
    margin-right: 0;
  }
}
.Tabs-horizontalScroll .Tabs-scrollable {
  display: inline-block;
  max-width: 100%;
  overflow: auto;
  overflow-y: hidden;
}
.Tabs-horizontalScroll .Tabs-scroll {
  border: none;
  display: block;
  font-size: 1.125em;
  height: 47px;
  line-height: 53px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  top: 0;
  width: 2.5rem;
  z-index: 1;
}
.Tabs-horizontalScroll .Tabs-scroll--left {
  background: -webkit-gradient(linear, left top, right top, color-stop(0, rgba(255, 255, 255, 0.8)), color-stop(50%, rgba(255, 255, 255, 0.5)));
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.8) 0, rgba(255, 255, 255, 0.5) 50%);
  left: 0;
  padding-left: 0.2em;
  text-align: left;
}
.is-sticky .Tabs-horizontalScroll .Tabs-scroll--left {
  background: -webkit-gradient(linear, left top, right top, color-stop(0, rgba(255, 255, 255, 0.8)), color-stop(50%, rgba(233, 228, 227, 0.5)));
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.8) 0, rgba(233, 228, 227, 0.5) 50%);
}
.Tabs-horizontalScroll .Tabs-scroll--right {
  background: -webkit-gradient(linear, right top, left top, color-stop(0, rgba(255, 255, 255, 0.8)), color-stop(50%, rgba(255, 255, 255, 0.5)));
  background: linear-gradient(270deg, rgba(255, 255, 255, 0.8) 0, rgba(255, 255, 255, 0.5) 50%);
  padding-right: 0.2em;
  right: 0;
  text-align: right;
}
.is-sticky .Tabs-horizontalScroll .Tabs-scroll--right {
  background: -webkit-gradient(linear, right top, left top, color-stop(0, rgba(255, 255, 255, 0.8)), color-stop(50%, rgba(233, 228, 227, 0.5)));
  background: linear-gradient(270deg, rgba(255, 255, 255, 0.8) 0, rgba(233, 228, 227, 0.5) 50%);
}
@media only screen and (min-width: 48em), print {
  .Tabs-horizontalScroll .Tabs-scroll {
    display: none;
  }
}
/*#

Shows tags in a horizontal list.

Example:

<ul class="TagList">
    <li class="TagList-item">Lorem ipsum</li>
    <li class="TagList-item">Dolor sit amet</li>
</ul>

*/
.TagList {
  list-style: none;
  padding: 0;
  margin: 1em 0;
  font-size: 0.75rem;
}
.TagList-item {
  display: inline-block;
  padding: 0.2em 0.625rem;
  border: 1px solid #e9e4e3;
  margin-right: 0.3em;
}
/*#

Display tooltips

Examples:

<div class="Tooltip Tooltip--arrowE">
    <div class="Tooltip-content">
        The content of the tooltip.
    </div>
    <div class="Tooltip-arrow"></div>
</div>

*/
.Tooltip {
  max-width: 320px;
  padding: 5px;
  position: absolute;
  z-index: 1000;
  opacity: 0;
  -webkit-animation: fade-in ease-in 0.2s 0.25s forwards;
          animation: fade-in ease-in 0.2s 0.25s forwards;
}
.Tooltip-content {
  display: block;
  font-size: 0.75rem;
  color: #fff;
  background-color: #495a6b;
  padding: 8px 0.9375rem;
}
.Tooltip-arrow {
  position: absolute;
  line-height: 0;
  border: 6px solid transparent;
}
.Tooltip--arrowN .Tooltip-arrow {
  border-bottom: 0;
  border-top-color: #495a6b;
  bottom: 0;
  left: 50%;
  margin-left: -5px;
}
.Tooltip--arrowS .Tooltip-arrow {
  border-bottom-color: #495a6b;
  border-top: 0;
  left: 50%;
  margin-left: -5px;
  top: 0;
}
.Tooltip--arrowW .Tooltip-arrow {
  border-left-color: #495a6b;
  border-right: 0;
  margin-top: -5px;
  right: 0;
  top: 50%;
}
.Tooltip--arrowE .Tooltip-arrow {
  border-left: 0;
  border-right-color: #495a6b;
  left: 0;
  margin-top: -5px;
  top: 50%;
}
.Tooltip--arrowNW .Tooltip-arrow {
  border-bottom: 0;
  border-left: 0;
  border-top-color: #495a6b;
  bottom: 0;
  left: 5px;
}
.Tooltip--arrowNE .Tooltip-arrow {
  border-bottom: 0;
  border-right: 0;
  border-top-color: #495a6b;
  bottom: 0;
  right: 5px;
}
.Tooltip--arrowSW .Tooltip-arrow {
  border-bottom-color: #495a6b;
  border-bottom-style: solid;
  border-left: 0;
  border-right-color: transparent;
  border-top: 0;
  left: 5px;
  top: 0;
}
.Tooltip--arrowSE .Tooltip-arrow {
  border-bottom-color: #495a6b;
  border-bottom-style: solid;
  border-left-color: transparent;
  border-right: 0;
  border-top: 0;
  right: 5px;
  top: 0;
}
@-webkit-keyframes fade-in {
  from {
    -webkit-transform: translateY(0.8em);
            transform: translateY(0.8em);
    opacity: 0;
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  to {
    opacity: 1;
  }
}
@keyframes fade-in {
  from {
    -webkit-transform: translateY(0.8em);
            transform: translateY(0.8em);
    opacity: 0;
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  to {
    opacity: 1;
  }
}
/*#

Component for the footer section.

Examples:

<footer class="Footer Footer--primary">
    <div class="Footer-content">
        <div class="Footer-logo">
            <a href="/">
                <svg role="img" alt="Getinge logotype" class="Footer-logoImage">
                    <use xlink:href="/assets/build/app.svg#getinge-logo" />
                </svg>
            </a>
        </div>
        <nav class="Footer-nav">
            <div>
                <h3 class="Heading Heading--xSmall u-colorWhite">
                    <a href="/int/products/" class="Link Link--white">Solutions</a>
                </h3>
                <ul class="List">
                    <li class="List-item">
                        <a href="#" class="Link Link--white">Life science</a>
                    </li>
                    <li class="List-item">
                        <a href="#" class="Link Link--white">Hospital departments</a>
                    </li>
                    <li class="List-item">
                        <a href="#" class="Link Link--white">Acute care therapies</a>
                    </li>
                    <li class="List-item">
                        <a href="#" class="Link Link--white">Clinics and dental</a>
                    </li>
                    <li class="List-item">
                        <a href="#" class="Link Link--white">Planning and implementation</a>
                    </li>
                    <li class="List-item">
                        <a href="#" class="Link Link--white">Integrated workflow solutions</a>
                    </li>
                </ul>
            </div>
            <div>
                <h3 class="Heading Heading--xSmall u-colorWhite">About us</h3>
                <ul class="List">
                    <li class="List-item">
                        <a href="#" class="Link Link--white">Investors</a>
                    </li>
                    <li class="List-item">
                        <a href="#" class="Link Link--white">Careers</a>
                    </li>
                    <li class="List-item">
                        <a href="#" class="Link Link--white">Our responsibility</a>
                    </li>
                    <li class="List-item">
                        <a href="#" class="Link Link--white">Corporate governance</a>
                    </li>
                    <li class="List-item">
                        <a href="#" class="Link Link--white">Press &amp; media</a>
                    </li>
                    <li class="List-item">
                        <a href="#" class="Link Link--white">History</a>
                    </li>
                </ul>
            </div>
        </nav>
        <div class="Footer-social">
            <a class="Footer-socialLink" href="https://linkedin.com/company/getinge" target="_blank">
                <svg role="img" alt="LinkedIn logotype" class="Footer-socialImage">
                    <use xlink:href="/assets/build/app.svg#linkedin-logo" />
                </svg>
            </a>
            <a class="Footer-socialLink" href="https://www.youtube.com/channel/UCoImsHs71dZDvbKM81VCvOw" target="_blank">
                <svg role="img" alt="YouTube logotype" class="Footer-socialImage">
                    <use xlink:href="/assets/build/app.svg#youtube-logo" />
                </svg>
            </a>
        </div>
    </div>
</footer>
*/
.Footer-content {
  margin-left: auto;
  margin-right: auto;
  max-width: 1220px;
  padding: 1.5625rem;
}
.Footer--primary {
  padding: 1.25rem 0;
  background: #18274a;
  font-size: 0.875rem;
}
@media only screen and (min-width: 48em), print {
  .Footer--primary .Footer-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}
.Footer--primary .Heading {
  margin-top: 2rem;
}
@media only screen and (min-width: 48em), print {
  .Footer--primary .Heading {
    margin-top: 0;
  }
}
.Footer--secondary {
  font-size: 0.75rem;
  background: #e9e4e3;
}
@media only screen and (min-width: 48em), print {
  .Footer--secondary .Footer-content {
    overflow: hidden;
  }
}
.Footer--secondary .List {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  float: left;
  margin-top: 0;
}
.Footer--secondary .List-item {
  padding: 0;
}
.Footer--secondary .List-item:after {
  content: "|";
  margin: 0 1em;
}
.Footer--secondary .List-item:last-of-type:after {
  content: "";
  display: none;
}
@media only screen and (min-width: 48em), print {
  .Footer-logo {
    width: 25%;
  }
}
.Footer-logoImage {
  width: 10rem;
  height: 1.625rem;
  display: inline-block;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA5NDUuNzMgMTQxLjQxIj48ZGVmcz48c3R5bGU+LmF7ZmlsbDojZmZmfS5ie2ZpbGw6I2I5YjhjN308L3N0eWxlPjwvZGVmcz48cGF0aCBjbGFzcz0iYSIgZD0iTTEyOS4wNSAxMTEuNzJWMzAuOTloODEuNDNsLTcuNDcgMTMuMDJIMTQ2LjRWNjMuNGw1My43My0uMDJ2MTIuMjhsLTUzLjczLS4wMXYyMi41N2g2My45M3YxMy41aC04MS4yOHpNNjU1LjkyIDExMS43MlYzMC45OWg4MS4xN2wtNy40NiAxMy4wMmgtNTYuMzdWNjMuNGw1My43My0uMDJ2MTIuMjhsLTUzLjczLS4wMXYyMi41N2g2My45M3YxMy41aC04MS4yN3pNMjcyLjUxIDExMS43MlY0NC4wNWwtMzcuODguMDFWMzAuOTloOTMuNGwtNy40NyAxMy4wOC0zMC42OS0uMDJ2NjcuNjdoLTE3LjM2ek0zNTMuNTUgMzAuOThoMTcuMzV2ODAuNzRoLTE3LjM1ek0yMy41MyAxMTEuNzNBMjMuNTMgMjMuNTMgMCAwIDEgMCA4OC4yVjU0LjUyYTIzLjUzIDIzLjUzIDAgMCAxIDIzLjUzLTIzLjUzaDY4LjA5bC03IDEzLjA2aC01Ni41YTExIDExIDAgMCAwLTExIDExdjMyYTExLjI0IDExLjI0IDAgMCAwIDExLjI1IDExLjIxaDQzLjcyYTExLjEgMTEuMSAwIDAgMCAxMS4xLTExLjF2LTguOEg1MS43N1Y2NS4zaDQ4LjE0djIyLjlhMjMuNTMgMjMuNTMgMCAwIDEtMjMuNTQgMjMuNTNIMjMuNTN6TTU1MC4zNyAxMTEuNzNhMjMuNTMgMjMuNTMgMCAwIDEtMjMuNTMtMjMuNTNWNTQuNTJBMjMuNTMgMjMuNTMgMCAwIDEgNTUwLjM3IDMxaDY4bC03IDEzLjA4aC01Ni40YTExLjA2IDExLjA2IDAgMCAwLTExLjA2IDExdjMyLjA5YTExLjA2IDExLjA2IDAgMCAwIDExLjA2IDExLjA2aDQzLjk1YTExLjA2IDExLjA2IDAgMCAwIDExLjA2LTExLjA2di04Ljg0aC0zMS40MVY2NS4zaDQ4LjE0djIyLjlhMjMuNTMgMjMuNTMgMCAwIDEtMjMuNTMgMjMuNTNoLTUyLjgxek00ODEuNjIgMTExLjczdi01Ni45YTEwLjc3IDEwLjc3IDAgMCAwLTEwLjc3LTEwLjc1aC01MC4xMnY2Ny42N2gtMTcuMzZWMzAuOThoNzEuOWEyMy41MyAyMy41MyAwIDAgMSAyMy41MyAyMy41M3Y1Ny4yMmgtMTcuMTh6Ii8+PHBhdGggY2xhc3M9ImIiIGQ9Ik04ODUuMTYgMzIuNzlsLTYuNDEgMTEuODFoLTIxLjFWMi4wOGEyLjA5IDIuMDkgMCAwIDEgMi4wOS0yLjA5aDIzLjMzYTIuMDkgMi4wOSAwIDAgMSAyLjA5IDIuMDl2MzAuN3oiLz48cGF0aCBjbGFzcz0iYSIgZD0iTTg4NS4xNiAyNy4wOHYxMS42MWEyNy42IDI3LjYgMCAwIDEtNDEgMjQuMTVsLTIuNjYtMS41My0xLS41OC0yOC41NC0xNi40NWEyLjEgMi4xIDAgMCAxLS43Ny0yLjg3bDExLjY1LTIwLjE5YTIuMDggMi4wOCAwIDAgMSAyLjg1LS43N2wzNS4zMiAyMC4zOWExNiAxNiAwIDAgMCAyNC4xNS0xMy43NnoiLz48cGF0aCBjbGFzcz0iYiIgZD0iTTgzOC41NyA4MS42Nkw4NTIgODEuM2wxMC41OSAxOC4yNS0zNi44NSAyMS4yOGEyLjA5IDIuMDkgMCAwIDEtMi44NS0uNzZsLTExLjY2LTIwLjJBMi4xIDIuMSAwIDAgMSA4MTIgOTd6Ii8+PHBhdGggY2xhc3M9ImEiIGQ9Ik04MzMuNjQgODQuNWwzLjQ2LTIgMy4zLTEuODggMy4zMi0xLjg4YTI3LjYgMjcuNiAwIDAgMSA0MS4zOSAyMy40djM3LjE3YTIuMSAyLjEgMCAwIDEtMi4xIDIuMWgtMjMuM2EyLjA4IDIuMDggMCAwIDEtMi4wOS0yLjA4Vjk4LjU1YTE2IDE2IDAgMCAwLTIzLjk4LTE0LjA1eiIvPjxwYXRoIGNsYXNzPSJiIiBkPSJNOTA0LjI2IDk3LjU0bC03LTExLjQ1IDEwLjUxLTE4LjMgMzYuODMgMjEuMjlhMi4wOSAyLjA5IDAgMCAxIC43NiAyLjg1bC0xMS42NiAyMC4xNWEyLjA5IDIuMDkgMCAwIDEtMi44NS43NnoiLz48cGF0aCBjbGFzcz0iYSIgZD0iTTkwOS4xOSAxMDAuMzhsLTMuNDYtMi0zLjI4LTEuOTItMy4yOS0xLjkzYTI3LjYgMjcuNiAwIDAgMS0uNDMtNDcuNTRsMi42NS0xLjUzIDEtLjU4IDI4LjUzLTE2LjQ4YTIuMSAyLjEgMCAwIDEgMi44Ni43N2wxMS42NiAyMC4xOWEyLjA4IDIuMDggMCAwIDEtLjc2IDIuODVsLTM1LjMgMjAuMzlhMTYgMTYgMCAwIDAtLjE4IDI3Ljc4eiIvPjwvc3ZnPg==);
  background-repeat: no-repeat;
}
@media only screen and (min-width: 48em), print {
  .Footer-nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    width: 50%;
  }
}
@media only screen and (min-width: 48em), print {
  .Footer-social {
    width: 25%;
    text-align: right;
  }
}
.Footer-socialLink {
  margin-left: 0.625rem;
}
.Footer-socialLink:first-child {
  margin-left: 0;
}
.Footer-socialLink:hover {
  text-decoration: none;
}
.Footer-socialImage {
  fill: #fff;
  width: 1.625rem;
  max-height: 1.625rem;
}
.Footer-date {
  clear: left;
  margin-top: 0;
}
@media only screen and (min-width: 48em), print {
  .Footer-date {
    clear: none;
    float: right;
  }
}
/*#

Component for the header section.

Examples:

<div>
    <header class="Header">
        <div class="Header-primary">
            <div class="Header-primaryContent">
                <nav class="PageNav PageNav--horizontal PageNav--small Header-secondaryNav">
                    <ul class="PageNav-list">
                        <li class="PageNav-item">
                            <a href="#" class="PageNav-itemLink">About</a>
                        </li>
                        <li class="PageNav-item">
                            <a href="#" class="PageNav-itemLink">Press</a>
                        </li>
                    </ul>
                </nav>
            </div>

            <div class="Header-primaryContent">
                <div class="Header-logo">
                    <a href="#"><img src="/assets/core/images/logo/getinge-logo-white.svg" class="Header-logoImage" height="15" /></a>
                </div>

                <nav class="PageNav PageNav--horizontal PageNav--negative Header-primaryNav">
                    <ul class="PageNav-list">
                        <li class="PageNav-item">
                            <a href="#" class="PageNav-itemLink is-active">Solutions</a>
                        </li>
                        <li class="PageNav-item">
                            <a href="#" class="PageNav-itemLink">Products</a>
                        </li>
                        <li class="PageNav-item">
                            <a href="#" class="PageNav-itemLink">Insights &amp; Results</a>
                        </li>
                        <li class="PageNav-item">
                            <a href="#" class="PageNav-itemLink">Academy</a>
                        </li>
                        <li class="PageNav-item">
                            <a href="#" class="PageNav-itemLink">Blog</a>
                        </li>
                        <li class="PageNav-item">
                            <a href="#" class="PageNav-itemLink">Company</a>
                        </li>
                        <li class="PageNav-item">
                            <a href="#" class="PageNav-itemLink">Events</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>
</div>

*/
.Header {
  width: 100%;
  position: relative;
  z-index: 10;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.Header-secondary {
  border-bottom: 1px solid #495a6b;
  display: none;
  /* hide on mobile */
  height: 2.1875rem;
  line-height: 2.1875rem;
  padding: 0 1.5625rem;
  font-size: 0.75rem;
  -webkit-box-ordinal-group: 1;
      -ms-flex-order: 0;
          order: 0;
  background: #18274a;
}
@media only screen and (min-width: 48em), print {
  .Header-secondary {
    display: block;
  }
}
.Header-secondaryContent {
  width: 100%;
  display: table;
  margin-left: auto;
  margin-right: auto;
  max-width: 1170px;
}
.Header-secondaryNav {
  display: table-cell;
}
.Header-actionNav {
  display: table-cell;
  text-align: right;
}
.Header-actionNav .Icon {
  vertical-align: middle;
  margin-top: -0.1875rem;
}
.Header-stickyPrimary {
  background: #e9e4e3;
  -webkit-box-ordinal-group: 4;
      -ms-flex-order: 3;
          order: 3;
}
.Header-primary {
  padding: 0 1.5625rem;
  position: relative;
  z-index: 2;
  background: #18274a;
  color: #fff;
  border-bottom: 1px solid #495a6b;
}
@media only screen and (min-width: 48em), print {
  .Header-primary {
    padding: 0 1.5625rem;
    border-bottom: none;
  }
}
.Header-primary.is-sticky {
  left: 0;
  right: 0;
}
@media screen and (min-width: 1600px) {
  .Header-primary.is-sticky {
    width: 1600px;
    left: 50%;
    margin-left: -800px;
  }
}
.Header-primary .PageNav-item {
  margin-right: 3.41880342%;
}
.Header-primary .PageNav-itemLink {
  height: 3.0625rem;
  line-height: 3.0625rem;
}
@media only screen and (min-width: 57.5em), print {
  .Header-primary .PageNav-itemLink {
    height: 5rem;
    line-height: 5rem;
  }
}
.Header-primary .PageNav-itemLink:after {
  content: "";
  position: absolute;
  bottom: -10px;
  margin-left: -0.625rem;
  left: 50%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0.625rem 0.625rem 0.625rem;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  -webkit-transition-property: opacity, bottom;
  transition-property: opacity, bottom;
  opacity: 0;
  pointer-events: none;
  border-color: transparent transparent #e9e4e3 transparent;
}
.Header-primary .PageNav-itemLink[aria-expanded="true"]:after {
  opacity: 1;
  bottom: 0;
}
.Header-primaryContent {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  height: 3.75rem;
  margin-left: auto;
  margin-right: auto;
  max-width: 1170px;
}
@media only screen and (min-width: 48em), print {
  .Header-primaryContent {
    display: block;
    height: 5.625rem;
  }
}
@media only screen and (min-width: 57.5em), print {
  .Header-primaryContent {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height: 5rem;
  }
}
.Header--cleanLayout .Header-primaryContent {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 3.75rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.Header-logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
@media only screen and (min-width: 48em), print {
  .Header-logo {
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    padding-top: 0.9375rem;
  }
}
@media only screen and (min-width: 57.5em), print {
  .Header-logo {
    padding-top: 0;
  }
}
.Header--cleanLayout .Header-logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  padding-top: 0;
}
.Header-logoLink {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-right: 1em;
}
.Header-logoImage {
  display: block;
  width: 160px;
  height: 26px;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA5NDUuNzMgMTQxLjQxIj48ZGVmcz48c3R5bGU+LmF7ZmlsbDojZmZmfS5ie2ZpbGw6I2I5YjhjN308L3N0eWxlPjwvZGVmcz48cGF0aCBjbGFzcz0iYSIgZD0iTTEyOS4wNSAxMTEuNzJWMzAuOTloODEuNDNsLTcuNDcgMTMuMDJIMTQ2LjRWNjMuNGw1My43My0uMDJ2MTIuMjhsLTUzLjczLS4wMXYyMi41N2g2My45M3YxMy41aC04MS4yOHpNNjU1LjkyIDExMS43MlYzMC45OWg4MS4xN2wtNy40NiAxMy4wMmgtNTYuMzdWNjMuNGw1My43My0uMDJ2MTIuMjhsLTUzLjczLS4wMXYyMi41N2g2My45M3YxMy41aC04MS4yN3pNMjcyLjUxIDExMS43MlY0NC4wNWwtMzcuODguMDFWMzAuOTloOTMuNGwtNy40NyAxMy4wOC0zMC42OS0uMDJ2NjcuNjdoLTE3LjM2ek0zNTMuNTUgMzAuOThoMTcuMzV2ODAuNzRoLTE3LjM1ek0yMy41MyAxMTEuNzNBMjMuNTMgMjMuNTMgMCAwIDEgMCA4OC4yVjU0LjUyYTIzLjUzIDIzLjUzIDAgMCAxIDIzLjUzLTIzLjUzaDY4LjA5bC03IDEzLjA2aC01Ni41YTExIDExIDAgMCAwLTExIDExdjMyYTExLjI0IDExLjI0IDAgMCAwIDExLjI1IDExLjIxaDQzLjcyYTExLjEgMTEuMSAwIDAgMCAxMS4xLTExLjF2LTguOEg1MS43N1Y2NS4zaDQ4LjE0djIyLjlhMjMuNTMgMjMuNTMgMCAwIDEtMjMuNTQgMjMuNTNIMjMuNTN6TTU1MC4zNyAxMTEuNzNhMjMuNTMgMjMuNTMgMCAwIDEtMjMuNTMtMjMuNTNWNTQuNTJBMjMuNTMgMjMuNTMgMCAwIDEgNTUwLjM3IDMxaDY4bC03IDEzLjA4aC01Ni40YTExLjA2IDExLjA2IDAgMCAwLTExLjA2IDExdjMyLjA5YTExLjA2IDExLjA2IDAgMCAwIDExLjA2IDExLjA2aDQzLjk1YTExLjA2IDExLjA2IDAgMCAwIDExLjA2LTExLjA2di04Ljg0aC0zMS40MVY2NS4zaDQ4LjE0djIyLjlhMjMuNTMgMjMuNTMgMCAwIDEtMjMuNTMgMjMuNTNoLTUyLjgxek00ODEuNjIgMTExLjczdi01Ni45YTEwLjc3IDEwLjc3IDAgMCAwLTEwLjc3LTEwLjc1aC01MC4xMnY2Ny42N2gtMTcuMzZWMzAuOThoNzEuOWEyMy41MyAyMy41MyAwIDAgMSAyMy41MyAyMy41M3Y1Ny4yMmgtMTcuMTh6Ii8+PHBhdGggY2xhc3M9ImIiIGQ9Ik04ODUuMTYgMzIuNzlsLTYuNDEgMTEuODFoLTIxLjFWMi4wOGEyLjA5IDIuMDkgMCAwIDEgMi4wOS0yLjA5aDIzLjMzYTIuMDkgMi4wOSAwIDAgMSAyLjA5IDIuMDl2MzAuN3oiLz48cGF0aCBjbGFzcz0iYSIgZD0iTTg4NS4xNiAyNy4wOHYxMS42MWEyNy42IDI3LjYgMCAwIDEtNDEgMjQuMTVsLTIuNjYtMS41My0xLS41OC0yOC41NC0xNi40NWEyLjEgMi4xIDAgMCAxLS43Ny0yLjg3bDExLjY1LTIwLjE5YTIuMDggMi4wOCAwIDAgMSAyLjg1LS43N2wzNS4zMiAyMC4zOWExNiAxNiAwIDAgMCAyNC4xNS0xMy43NnoiLz48cGF0aCBjbGFzcz0iYiIgZD0iTTgzOC41NyA4MS42Nkw4NTIgODEuM2wxMC41OSAxOC4yNS0zNi44NSAyMS4yOGEyLjA5IDIuMDkgMCAwIDEtMi44NS0uNzZsLTExLjY2LTIwLjJBMi4xIDIuMSAwIDAgMSA4MTIgOTd6Ii8+PHBhdGggY2xhc3M9ImEiIGQ9Ik04MzMuNjQgODQuNWwzLjQ2LTIgMy4zLTEuODggMy4zMi0xLjg4YTI3LjYgMjcuNiAwIDAgMSA0MS4zOSAyMy40djM3LjE3YTIuMSAyLjEgMCAwIDEtMi4xIDIuMWgtMjMuM2EyLjA4IDIuMDggMCAwIDEtMi4wOS0yLjA4Vjk4LjU1YTE2IDE2IDAgMCAwLTIzLjk4LTE0LjA1eiIvPjxwYXRoIGNsYXNzPSJiIiBkPSJNOTA0LjI2IDk3LjU0bC03LTExLjQ1IDEwLjUxLTE4LjMgMzYuODMgMjEuMjlhMi4wOSAyLjA5IDAgMCAxIC43NiAyLjg1bC0xMS42NiAyMC4xNWEyLjA5IDIuMDkgMCAwIDEtMi44NS43NnoiLz48cGF0aCBjbGFzcz0iYSIgZD0iTTkwOS4xOSAxMDAuMzhsLTMuNDYtMi0zLjI4LTEuOTItMy4yOS0xLjkzYTI3LjYgMjcuNiAwIDAgMS0uNDMtNDcuNTRsMi42NS0xLjUzIDEtLjU4IDI4LjUzLTE2LjQ4YTIuMSAyLjEgMCAwIDEgMi44Ni43N2wxMS42NiAyMC4xOWEyLjA4IDIuMDggMCAwIDEtLjc2IDIuODVsLTM1LjMgMjAuMzlhMTYgMTYgMCAwIDAtLjE4IDI3Ljc4eiIvPjwvc3ZnPg==);
  background-repeat: no-repeat;
}
@media only screen and (min-width: 57.5em), print {
  .Header--wideLanguage .Header-logoImage {
    width: 131px;
    height: 20px;
  }
}
@media only screen and (min-width: 73.125em) {
  .Header--wideLanguage .Header-logoImage {
    width: 160px;
    height: 26px;
  }
}
.Header-navButton {
  position: relative;
  border: none;
  background: none;
  padding: 0 0.5em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 1.3em;
  color: #fff;
}
.Header-navButton:last-of-type {
  margin-right: -0.5em;
}
.Header-navButton:focus {
  outline: none;
}
.Header-navButton.is-active:after,
.Header-navButton.is-active:before {
  bottom: -1px;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.Header-navButton.is-active:after {
  border-color: transparent;
  border-bottom-color: #18274a;
  border-width: 8px;
  margin-left: -8px;
}
.Header-navButton.is-active:before {
  border-color: transparent;
  border-bottom-color: #495a6b;
  border-width: 10px;
  margin-left: -10px;
  margin-top: -4px;
}
.Header-navButton--language-no-js {
  height: 100%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.Header-navButton--language-no-js:hover {
  color: inherit;
}
.Header-navButton.js-regionLink svg {
  width: 1.01em;
  height: 1.01em;
  max-height: 100%;
}
@media only screen and (min-width: 48em), print {
  .Header-navButton {
    display: none;
  }
}
.Header-primaryNav {
  display: none;
}
@media only screen and (min-width: 48em), print {
  .Header-primaryNav {
    display: block;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
  }
}
@media only screen and (min-width: 57.5em), print {
  .Header-primaryNav {
    text-align: center;
  }
}
.Header-aside {
  display: none;
}
@media only screen and (min-width: 48em), print {
  .Header-aside {
    display: block;
    margin-left: 1em;
    position: absolute;
    top: 0.9375rem;
    right: 1.5625rem;
    font-size: 0.75rem;
  }
}
@media only screen and (min-width: 57.5em), print {
  .Header-aside {
    position: static;
    font-size: 1rem;
  }
}
.Header-panel {
  visibility: hidden;
  background: #18274a;
  color: #fff;
  padding: 0 1.5625rem;
  border-bottom: none;
  border-color: #495a6b;
  -webkit-box-ordinal-group: 5;
      -ms-flex-order: 4;
          order: 4;
  position: fixed;
  left: 0;
  right: 0;
  height: 0;
  top: 3.75rem;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  overflow: hidden;
  will-change: height;
}
@media only screen and (min-width: 48em), print {
  .Header-panel {
    text-align: right;
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    position: static;
  }
}
.Header-panel.is-active {
  visibility: visible;
  height: 140px;
  padding: 0.9375rem 1.5625rem;
  border-bottom: 1px solid #495a6b;
}
@media only screen and (min-width: 48em), print {
  .Header-panel.is-active {
    height: 87px;
  }
}
.Header-panelContainer {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1170px;
  position: relative;
}
.Header-region .Header-regionInput {
  display: block;
  width: 100%;
}
.Header-region .Header-regionInput.FloatedLabel {
  margin-top: 2em;
}
.Header-region .Header-regionInput .Select {
  width: 100%;
}
@media only screen and (min-width: 48em), print {
  .Header-region .Header-regionInput {
    display: inline-block;
    width: auto;
    margin: 0;
    margin-right: 1em;
    vertical-align: middle;
  }
  .Header-region .Header-regionInput:last-child {
    margin-right: 0;
  }
  .Header-region .Header-regionInput.FloatedLabel {
    margin-top: 0;
  }
  .Header-region .Header-regionInput .Select {
    width: 200px;
  }
}
.Header-region .Header-regionClose {
  position: absolute;
  top: -0.5em;
  right: -0.5em;
}
@media only screen and (min-width: 48em), print {
  .Header-region .Header-regionClose {
    position: static;
    height: 4em;
    /* prevents height difference when changing to loading icon */
    width: 2em;
  }
}
.Header-region svg {
  fill: #fff;
}
@media only screen and (min-width: 57.5em), print {
  .Header--wideLanguage .Header-primaryNav,
  .Header--wideLanguage .Header-aside {
    font-size: 0.75rem;
  }
}
@media only screen and (min-width: 73.125em) {
  .Header--wideLanguage .Header-primaryNav,
  .Header--wideLanguage .Header-aside {
    font-size: 0.875rem;
  }
}
.Header--wideLanguage .PageNav-item {
  margin-right: 2.56410256%;
}
.Main {
  background-color: #fff;
  overflow: hidden;
  padding-top: 1.5625rem;
  padding-bottom: 1.5625rem;
}
@media only screen and (min-width: 48em), print {
  .Main {
    padding-top: 3.125rem;
    padding-bottom: 3.125rem;
  }
}
@media only screen and (min-width: 73.125em) {
  .Main {
    padding-top: 4.6875rem;
    padding-bottom: 4.6875rem;
  }
}
.Main--takeover {
  min-height: 50vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-size: cover;
  background-position: center center;
}
.Main--takeover .Main-content {
  width: 100%;
}
.Main-content {
  margin-left: auto;
  margin-right: auto;
  max-width: 1220px;
  padding: 0 1.5625rem;
  overflow: hidden;
}
/*#

Component for containing the entire page. Useful for setting page wide styling.

*/