/*! 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.
 */
@import "https://api.mapbox.com/mapbox-gl-js/v0.28.0/mapbox-gl.css";
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700);
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.
 */
 {
  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 */
  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.
 */
 {
  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 {
  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 {
  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"] {
  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{
	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(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);
}
html {
  box-sizing: border-box;
  font-family: 'Whitney SSm A', 'Whitney SSm B', 'Arial';
  font-size: 100%;
  line-height: 1.8;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
body {
  background-color: #f3f3f3;
  color: #333;
  height: 100%;
}
/** 
 * Typography
 */
p {
  margin-bottom: 1em;
}
.Preamble,
.Preamble p {
  font-weight: 400;
  margin-bottom: 1.5em;
  font-size: 1.2em;
  line-height: 1.5em;
  max-width: 98%;
}
.Preamble,
  .Preamble p{
  margin-bottom: 2em;
  max-width: 90%;
}
ol,
ul,
dl {
  margin-bottom: 1em;
}
ol ol,
ol ul,
ul ol,
ul ul {
  margin-bottom: 0;
}
ul.nodiscs {
  list-style-type: none;
}
code {
  background: #dddddd;
  padding: 0 3px;
  border-radius: 4px;
}
/** 
 * Links
 */
p a,
table a,
td a,
li a {
  color: #009fdf;
}
p a:hover,
table a:hover,
td a:hover,
li a:hover {
  text-decoration: underline;
}
a {
  color: #333;
  text-decoration: none;
}
a:hover {
  color: #009fdf;
  text-decoration: underline;
}
/**
 * Elements  
 */
img {
  max-width: 100%;
  vertical-align: middle;
}
img.Rounded {
  border-radius: 50%;
}
img.smallProfilePic {
  height: 56px !important;
  width: 56px !important;
}
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ddd;
  margin: 1.25em 0;
  padding: 0;
}
figure {
  margin: 0;
}
/**
 * Tables
 */
table {
  width: 100%;
  max-width: 100%;
  margin: 0 0 1em;
  border-collapse: collapse;
}
table th,
table td {
  padding: .5em;
  vertical-align: top;
  text-align: left;
}
table th {
  border-bottom: 2px solid #eaeaea;
}
/**
 * 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;
  border: 1px solid #ddd;
  padding: 0.625em;
  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;
  box-shadow: 0 0 1px 1px #009fdf;
}
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: #f7f7f7;
  filter: alpha(opacity=80);
  color: #aaa;
  cursor: not-allowed;
}
textarea {
  height: 5.8em;
  resize: vertical;
}
label {
  display: inline-block;
}
/**
 * Form Validation
 */
/* stylelint-disable selector-class-pattern  */
.field-validation-valid,
.field-validation-error {
  display: block;
  margin-top: 0.83333333em;
  font-size: 1.25em;
}
.field-validation-valid {
  display: none;
}
.input-validation-error {
  border-color: #ff9191 !important;
}
/* stylelint-enable */
/** 
 * Print styles.
 * Inlined to avoid required HTTP connection.
 */
/*#


*/
.AspectRatio {
  position: relative;
}
.AspectRatio--1by1:before {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.AspectRatio--4by3:before {
  content: "";
  display: block;
  padding-bottom: 75%;
}
.AspectRatio--3by2:before {
  content: "";
  display: block;
  padding-bottom: 66.66%;
}
.AspectRatio--8by5:before {
  content: "";
  display: block;
  padding-bottom: 62.5%;
}
.AspectRatio--16by9:before {
  content: "";
  display: block;
  padding-bottom: 56.25%;
}
.AspectRatio--21by9:before {
  content: "";
  display: block;
  padding-bottom: 42.8571%;
}
.AspectRatio > * {
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100% !important;
  width: 100% !important;
}
/*#

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>
    
    <b>Bordered:<br></b>
    <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: #ddd;
  border: 1px solid #ddd;
  display: inline-block;
  font-size: 1.125em;
  position: relative;
  padding: 0.625em;
  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: #ddd;
  margin-left: -8px;
}
.Badge--arrowBottom {
  margin-bottom: 11px;
}
.Badge--arrowBottom:before {
  top: 100%;
  left: 50%;
  border-top-color: #ddd;
  margin-left: -8px;
}
.Badge--arrowRight {
  margin-right: 11px;
}
.Badge--arrowRight:before {
  left: 100%;
  top: 50%;
  border-left-color: #ddd;
  margin-top: -8px;
}
.Badge--arrowLeft {
  margin-left: 11px;
}
.Badge--arrowLeft:before {
  right: 100%;
  top: 50%;
  border-right-color: #ddd;
  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;
}
.BgOverlay img {
  height: auto;
  width: 100%;
}
.BgOverlay:after {
  /*mix-blend-mode: multiply;*/
  filter: alpha(opacity=80);
  box-shadow: none;
  content: '';
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}
.BgOverlay--Blue:after {
  background-color: #009fdf;
}
.BgOverlay--DarkBlue:after {
  background-color: #002d72;
}
.BgOverlay--Green:after {
  background-color: #78be20;
}
.BgOverlay--Purple:after {
  background-color: #7a4183;
}
.BgOverlay--Pink:after {
  background-color: #EA7EB4;
}
.BgOverlay--Yellow:after {
  background-color: yellow;
}
.BgOverlay--White:after {
  background-color: #ffffff;
}
.BgOverlay-opacity:after {
  mix-blend-mode: inherit;
  filter: alpha(opacity=50);
}
.BgOverlay{
  height: 100%;
}
/*#

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.

Examples:

<div>
    <button class="Button">Button</button> 
    <a href="#" class="Button">Link Button</a>
</div>

*/
.Button {
  background: #009fdf;
  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: inherit;
  line-height: 1em;
  vertical-align: middle;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  white-space: normal;
  color: #ffffff;
  padding: 1.5em 2.5em;
  border: none;
  width: 100%;
  transition: background ease-in-out 0.2s;
}
.Button:hover,
.Button.is-active {
  background: #002d72;
  text-decoration: none;
  color: #fff;
}
.Button:focus {
  outline: none;
  box-shadow: 0 0 1px 1px #009fdf;
}
.Button:disabled {
  filter: alpha(opacity=50);
}
.Button{
  width: auto;
}
.Button--full {
  padding-left: .3em;
  padding-right: .3em;
  width: 100%;
}
.Button-ghost {
  border-color: #000;
  color: #000;
  background-color: transparent;
  padding: 0.8em 1.5em;
}
.Button-ghost:hover {
  background: #002d72;
  border-color: #002d72;
  color: #fff;
}
.Button--white {
  background-color: #ffffff;
  color: #333;
}
.Button--rounded {
  border-radius: 2em;
}
.Button--border {
  border-width: 2px;
  border-style: solid;
}
.ButtonContainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.ButtonContainer.ButtonContainer--left .Button {
  -ms-flex-item-align: start;
      align-self: flex-start;
}
.ButtonContainer.ButtonContainer--center .Button {
  margin: 0 auto;
}
.ButtonContainer.ButtonContainer--right {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}
.ButtonContainer.ButtonContainer--right .Button {
  -ms-flex-item-align: end;
      align-self: flex-end;
}
.LoadMoreButton {
  display: inline-block;
}
/*.EPiServerForms .Form__NavigationBar button.Form__NavigationBar__Action{
    background: #fff !important;
    cursor: pointer!important;
    display: inline-block!important;
    margin: 0!important;
    position: relative!important;
    text-align: center!important;
    text-decoration: none!important;
    user-select: none!important;
    font-size: inherit!important;
    line-height: 1em!important; // adjusts so that link button and <button> is equal height
    vertical-align!important: middle;
    appearance: none!important;
    white-space: normal!important;

    // styling
    color: @colorBlue !important;
    padding: 1.5em 2.5em!important;
    border: none!important; // every button type have borders so that they are all in the same height
    
    -webkit-transition: background-color ease-in-out .2s;
    -moz-transition: background-color ease-in-out .2s;
    -o-transition: background-color ease-in-out .2s;
    transition: background-color ease-in-out .2s;

    &:hover, &.is-active {
        background-color: @colorDarkBlue!important;
        text-decoration: none!important;
        color: #fff!important;
    }
    
    &:focus {
        outline: none;
        box-shadow: 0 0 1px 1px @colorFocus!important;
    }
    
    &:disabled {
        opacity: 0.5!important;
    }
}*/
/*#

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 {
  filter: alpha(opacity=50);
  cursor: not-allowed;
}
.Checkbox-input {
  filter: alpha(opacity=0);
  position: absolute;
}
.Checkbox-input:checked + .Checkbox-label:after {
  -webkit-transform: scale(0.7);
      -ms-transform: scale(0.7);
          transform: scale(0.7);
  filter: alpha(opacity=100);
}
.Checkbox-input:focus + .Checkbox-label:before {
  box-shadow: 0 0 1px 1px #009fdf;
}
.Checkbox-label {
  padding-left: 1.5em;
  position: relative;
  cursor: pointer;
}
.Checkbox-label:before {
  content: " ";
  position: absolute;
  left: 0;
  top: .2em;
  width: 1em;
  height: 1em;
  display: block;
  background: white;
  border: 2px solid #ddd;
  border-radius: 3px;
}
.Checkbox-label:after {
  content: " ";
  position: absolute;
  left: 0;
  top: .2em;
  width: 1em;
  height: 1em;
  display: inline-block;
  z-index: 1;
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjE4MS4yIDI3MyAxNyAxNiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAxODEuMiAyNzMgMTcgMTYiPjxwYXRoIGQ9Ik0tMzA2LjMgNTEuMmwtMTEzLTExM2MtOC42LTguNi0yNC04LjYtMzQuMyAwbC01MDYuOSA1MDYuOS0yMTIuNC0yMTIuNGMtOC42LTguNi0yNC04LjYtMzQuMyAwbC0xMTMgMTEzYy04LjYgOC42LTguNiAyNCAwIDM0LjNsMjMxLjIgMjMxLjIgMTEzIDExM2M4LjYgOC42IDI0IDguNiAzNC4zIDBsMTEzLTExMyA1MjQtNTI0YzctMTAuMyA3LTI1LjctMS42LTM2eiIvPjxwYXRoIGZpbGw9IiMzNzM3MzciIGQ9Ik0xOTcuNiAyNzcuMmwtMS42LTEuNmMtLjEtLjEtLjMtLjEtLjUgMGwtNy40IDcuNC0zLjEtMy4xYy0uMS0uMS0uMy0uMS0uNSAwbC0xLjYgMS42Yy0uMS4xLS4xLjMgMCAuNWwzLjMgMy4zIDEuNiAxLjZjLjEuMS4zLjEuNSAwbDEuNi0xLjYgNy42LTcuNmMuMy0uMS4zLS4zLjEtLjV6Ii8+PHBhdGggZD0iTTExODcuMSAxNDMuN2wtNTYuNS01Ni41Yy01LjEtNS4xLTEyLTUuMS0xNy4xIDBsLTI1My41IDI1My41LTEwNi4yLTEwNi4yYy01LjEtNS4xLTEyLTUuMS0xNy4xIDBsLTU2LjUgNTYuNWMtNS4xIDUuMS01LjEgMTIgMCAxNy4xbDExNC43IDExNC43IDU2LjUgNTYuNWM1LjEgNS4xIDEyIDUuMSAxNy4xIDBsNTYuNS01Ni41IDI2Mi0yNjJjNS4yLTMuNCA1LjItMTIgLjEtMTcuMXpNMTYzNC4xIDE2OS40bC0zNy43LTM3LjdjLTMuNC0zLjQtOC42LTMuNC0xMiAwbC0xNjkuNSAxNjkuNS03MC4yLTcxLjljLTMuNC0zLjQtOC42LTMuNC0xMiAwbC0zNy43IDM3LjdjLTMuNCAzLjQtMy40IDguNiAwIDEybDc3LjEgNzcuMSAzNy43IDM3LjdjMy40IDMuNCA4LjYgMy40IDEyIDBsMzcuNy0zNy43IDE3NC43LTE3Ni40YzEuNi0xLjcgMS42LTYuOS0uMS0xMC4zeiIvPjwvc3ZnPg==") no-repeat center center;
  transition: all .15s ease;
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
          transform: scale(0);
  filter: alpha(opacity=0);
}
.Cite {
  display: block;
  border-left: 2px solid #009fdf;
  padding-left: 0.83333333em;
}
.Cite{
  padding-left: 3.125em;
  margin: 3.125em 0 3.125em -3.125em;
}
.Cite-text {
  font-size: 1.5em;
  line-height: 1.6em;
  font-weight: 200;
  font-style: normal;
}
.Cite-text{
  font-size: 3em;
}
.Cite-author {
  margin: 2.5em 0;
}
.Cite-author span {
  display: block;
}
.CiteAuthor-name {
  font-weight: bold;
}
/*#

<h1 class="Heading Heading--h1">Heading 1</h1>
<h2 class="Heading Heading--h2">Heading 2</h2>
<h3 class="Heading Heading--h3">Heading 3</h3>
<h4 class="Heading Heading--h4">Heading 4</h4>
<h5 class="Heading Heading--h5">Heading 5</h5>
<h6 class="Heading Heading--h6">Heading 6</h6>

*/
.Heading,
.Heading--h1,
h1,
.Heading--h2,
h2,
.Heading--h3,
h3,
.Heading--h4,
h4,
.Heading--h5,
h5,
.Heading--h6,
h6,
.Heading--h7 {
  display: block;
  margin-top: 0;
  margin-bottom: .5em;
  color: #333333;
  font-weight: bold;
  /*a:hover & {
        color: @colorLinkHover;
    }*/
}
.Heading.Heading-thin,
.Heading--h1.Heading-thin,
h1.Heading-thin,
.Heading--h2.Heading-thin,
h2.Heading-thin,
.Heading--h3.Heading-thin,
h3.Heading-thin,
.Heading--h4.Heading-thin,
h4.Heading-thin,
.Heading--h5.Heading-thin,
h5.Heading-thin,
.Heading--h6.Heading-thin,
h6.Heading-thin,
.Heading--h7.Heading-thin {
  font-weight: normal;
}
.Heading--h1,
h1 {
  font-size: 1.75em;
  line-height: 32px !important;
  font-weight: 900;
}
.Heading--h1,
  h1{
  font-size: 2.5em;
  line-height: 46px !important;
}
.Heading--h1,
  h1{
  font-size: 3.75em;
  line-height: 72px !important;
}
.Heading--h2,
h2 {
  font-size: 1.5em;
  line-height: 28px !important;
  font-weight: 900;
}
.Heading--h2,
  h2{
  font-size: 1.875em;
  line-height: 32px !important;
}
.Heading--h2,
  h2{
  font-size: 2.5em;
  line-height: 48px !important;
}
.Heading--h3,
h3 {
  font-size: 1.25em;
  line-height: 26px !important;
  font-weight: 900;
}
.Heading--h3,
  h3{
  font-size: 1.625em;
  line-height: 30px !important;
}
.Heading--h3,
  h3{
  font-size: 2em;
  line-height: 40px !important;
}
.Heading--h4,
h4 {
  font-size: 1.125em;
  line-height: 24px !important;
}
.Heading--h4,
  h4{
  font-size: 1.375em;
  line-height: 28px !important;
}
.Heading--h4,
  h4{
  font-size: 1.5em;
  line-height: 32px !important;
}
.Heading--h5,
h5 {
  font-size: 1em;
  line-height: 24px !important;
}
.Heading--h5.h5--tweaked,
h5.h5--tweaked {
  font-size: 0.8em;
  line-height: 24px;
  font-weight: 100;
  text-transform: uppercase;
}
.Heading--h5,
  h5{
  font-size: 1.125em;
  line-height: 24px !important;
}
.Heading--h5,
  h5{
  font-size: 1.125em;
  line-height: 30px !important;
}
.Heading--h5.h5--tweaked,
  h5.h5--tweaked{
  font-size: 1.25em;
}
.Heading--h6,
h6 {
  font-size: 0.875em;
  line-height: 20px !important;
}
.Heading--h6,
  h6{
  font-size: 1em;
  line-height: 20px !important;
}
.Heading--h6,
  h6{
  font-size: 1em;
  line-height: 24px !important;
}
.Heading--h7 {
  font-size: 0.75em;
  line-height: 20px !important;
}
.Heading--h7{
  font-size: 0.75em;
  line-height: 20px !important;
}
.Heading--h7{
  font-size: 0.75em;
  line-height: 18px !important;
}
.Icon {
  fill: currentColor;
  width: 1em;
  max-height: 1em;
  display: inline-block;
}
.Icon--medium {
  width: 50px;
  height: 50px;
}
/*#

Styling for lead text in an article.

Examples:

<div>
    <div class="Lead">
        <p>Lorem ipsum dolor sit amet.</p>
    </div>    
</div>

*/
.Lead {
  font-size: 1.5em;
}
/*#
<h6>.Link</h6>
<p><a href="#" class="Link">Lorem ipsum dolor sit amet</a></p>

*/
a.LongLink {
  word-break: break-all;
}
.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: .1875em .3125em;
  z-index: 1000;
}
.Link--blue {
  color: #009fdf;
}
.Link--withArrow {
  font-weight: 600;
}
/*#

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>
    
    <span class="Loading Loading--dots">
        <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>

*/
.Loading {
  display: inline-block;
  padding: 1.25em;
  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: .5em;
}
.Loading--small {
  font-size: 1.125em;
}
.Loading--large {
  font-size: 3.5em;
}
.Loading-text {
  display: block;
  font-size: 1.25em;
  margin-top: 0.83333333em;
  color: #aaa;
}
.Loading--spinning .Loading-icon {
  display: inline-block;
  height: 2em;
  width: 2em;
  border: 0.25em solid #009fdf;
  border-right-color: transparent;
  border-radius: 50%;
  -webkit-animation: rotate 0.9s infinite linear;
          animation: rotate 0.9s infinite linear;
}
.Loading--dots .Loading-icon:before,
.Loading--dots .Loading-icon:after,
.Loading--dots .Loading-icon {
  border-radius: 50%;
  width: 2em;
  height: 2em;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation: circlePulse 1.5s infinite ease-in-out;
          animation: circlePulse 1.5s infinite ease-in-out;
}
.Loading--dots .Loading-icon {
  display: inline-block;
  color: #009fdf;
  position: relative;
  top: -2em;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
          animation-delay: -0.16s;
}
.Loading--dots .Loading-icon:before {
  left: -2.5em;
  -webkit-animation-delay: -0.32s;
          animation-delay: -0.32s;
}
.Loading--dots .Loading-icon:after {
  left: 2.5em;
}
.Loading--dots .Loading-icon:before,
.Loading--dots .Loading-icon:after {
  content: "";
  position: absolute;
  top: 0;
}
@-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);
  }
}
@-webkit-keyframes circlePulse {
  0%,
  80%,
  100% {
    box-shadow: 0 2em 0 -1em;
  }
  40% {
    box-shadow: 0 2em 0 0;
  }
}
@keyframes circlePulse {
  0%,
  80%,
  100% {
    box-shadow: 0 2em 0 -1em;
  }
  40% {
    box-shadow: 0 2em 0 0;
  }
}
/*#

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 {
  filter: alpha(opacity=50);
  cursor: not-allowed;
}
.Radio-input {
  filter: alpha(opacity=0);
  position: absolute;
}
.Radio-input:focus + .Radio-label:before {
  box-shadow: 0 0 1px 1px #009fdf;
}
.Radio-input:checked:focus + .Radio-label:before {
  box-shadow: 0 0 1px 1px #009fdf, inset 0 0 0 0.2em #fff;
}
.Radio-input,
.Radio-label {
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}
.Radio-label {
  position: relative;
}
.Radio-label:before {
  content: "";
  background: #fff;
  border: 2px solid #ddd;
  display: inline-block;
  width: 1em;
  height: 1em;
  padding: .25em;
  margin-right: .3em;
  text-align: center;
  border-radius: 50%;
  vertical-align: -0.1em;
}
.Radio-input:checked + .Radio-label:before {
  background: #777777;
  box-shadow: inset 0 0 0 0.2em #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: 2px solid #ddd;
  border-radius: 3px;
}
.Select:after {
  content: "";
  position: absolute;
  width: 2.2em;
  top: 1px;
  bottom: 1px;
  right: 1px;
  background-color: #f7f7f7;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAYAAADphp8SAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAMJJREFUeNpinDRlugMDAwMIUwRYgPgBEOcDsQAlBjHl5WSCDJpIoYM2MMJYQC/eB1IKZBjyAYgNmZAEEsl0zUSQrxiRRYCuWg+kAkgw5ALQEENwGKFJJEKdSiwohAc2sijQdJAhjUQasgCo/gBWg6CGTQA5mYgALkSJfhwKCQV8I9T1+A0CKgK5aAIOQw5AXc1AjIsYoGH1AV8AE2UQ1OnomiZAXctAiotAhi0AeQXKfYAvRpmIiGZYwBeiBzAyAAgwAO6ENKpThEdEAAAAAElFTkSuQmCC");
  background-repeat: no-repeat;
  background-size: 9px 8px;
  background-position: center;
  pointer-events: none;
  z-index: 2;
}
.Select-input {
  width: 100%;
  margin: 0;
  background: none;
  border: 1px solid transparent;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  vertical-align: middle;
  padding: 0.2em 0.625em;
  padding-right: 3em;
}
.Select-input:hover {
  box-shadow: 0 0 1px 1px #b7b7b7;
}
.Select-input:focus {
  outline: none;
  box-shadow: 0 0 1px 1px #009fdf;
}
.Select-input:disabled {
  filter: alpha(opacity=50);
  cursor: not-allowed;
}
.Select-input:disabled:hover {
  box-shadow: none;
}
.is-no-appearance .Select {
  overflow: hidden;
}
.is-no-appearance .Select-input {
  width: calc(100% + 60px);
}
.Toolbar {
  position: relative;
}
.List.selectLanguage-box {
  position: absolute;
  background-color: #ffffff;
  padding: 20px;
  box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.1);
  right: 10px;
  top: 75px;
  width: 300px;
  text-align: left;
  z-index: 9999;
}
.List.selectLanguage-box .List-item {
  display: block;
}
.List.selectLanguage-box a {
  text-decoration: none;
  text-transform: capitalize;
}
/*#

Component for showing an accordion on page.
Can be used in conjunction with the "accordion" js-module.

<div class="Accordion" data-module="accordion" data-accordion="expandFirst: true">
    <h4 class="Accordion-header" data-name="panel1"><a href="#" class="Accordion-headerLink">Panel 1</a></h4>
    <div class="Accordion-panel">
        <p>
            Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
            ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
            amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
            odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
        </p>
    </div>
    <h4 class="Accordion-header" data-name="panel2"><a href="#" class="Accordion-headerLink">Panel 2</a></h4>
    <div class="Accordion-panel">
        <p>
            Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
            purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
            velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
            suscipit faucibus urna.
        </p>
    </div>
    <h4 class="Accordion-header" data-name="panel3"><a href="#" class="Accordion-headerLink">Panel 3</a></h4>
    <div class="Accordion-panel">
        <p>
            Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
            purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
            velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
            suscipit faucibus urna.
        </p>
    </div>
</div>

*/
.Accordion {
  width: 100%;
  margin-bottom: 1.25em;
}
.Accordion.js-ready .Accordion-panel {
  display: none;
}
.Accordion--readmore .Accordion-header {
  margin-bottom: 0;
  background: url('/Assets/Icons/ikon_plus.svg') 0 50% no-repeat;
}
.Accordion--readmore .Accordion-header.is-active {
  background: url('/Assets/Icons/ikon_minus.svg') 0 50% no-repeat;
}
.Accordion--readmore .Accordion-header.is-active .Accordion-headerLink {
  color: #009fdf;
  text-decoration: underline;
}
.Accordion--readmore .Accordion-headerLink {
  color: #009fdf;
  padding-left: 30px;
  text-decoration: underline;
}
.Accordion--readmore .Accordion-panel {
  margin-top: 15px;
  padding: 25px;
  border: 2px solid #009fdf;
}
.Accordion--readmore .Accordion-panel.is-active {
  background-color: white;
  margin-top: 15px;
  padding: 25px;
  border: 2px solid #009fdf;
}
.Accordion-header {
  /*margin: @spaceSmall 0 0;*/
  margin-bottom: 0;
  background: url('/Assets/Icons/chevron_down.svg') 100% 50% no-repeat;
}
.Accordion-header.is-active {
  background: url('/Assets/Icons/chevron_up.svg') 100% 50% no-repeat;
}
.Accordion-header.is-active .Accordion-headerLink {
  color: #333;
}
.Accordion-headerLink {
  /*display: block;
    padding: .2em @spaceXSmall;
    color: @colorLink;
    border: 1px solid @colorGrey;
    text-decoration: none;*/
}
.Accordion-headerLink:before {
  /*content: "+";*/
  display: inline-block;
  width: 1em;
  margin-right: .2em;
  font-size: 1.2em;
  text-align: center;
}
.is-active .Accordion-headerLink:before {
  /*content: "-";*/
}
.Accordion-headerLink:hover {
  text-decoration: none;
}
.Accordion-panel:after,
.Accordion-panel:before {
  content: "";
  display: table;
}
.Accordion-panel.is-active {
  display: block;
}
.Article-heading {
  border-bottom: 2px solid #ccc;
  margin-bottom: 10px;
}
.Article-heading{
  margin-bottom: 0;
  border: 0;
}
.Article-heading h4 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.Article-heading h4{
  white-space: normal;
  overflow: hidden;
  text-overflow: inherit;
}
.Article section {
  /*padding:25px 0;*/
}
.Article-mainImg{
  margin-left: -12.125em;
  max-width: 116%;
}
/*#
<div class="BlogSlider u-size4of5">
    <div class="BlogSlider-wrapper" data-module="Slider" data-slider="'autoPlay':false">
        <div class="BlogSlider-item">
            <div class="BlogSlider-itemWrapper">
                <img src="/Assets/Images/johanna-2.jpg" class="BlogSlider-itemImage" />
                <div class="BlogSlider-itemInfo">
                    <a href="#">
                        <p class="BlogSlider-itemTitle">Lorem ipsum dolor amhet</p>
                        <span class="BlogSlider-itemName">Karl Svenzon</span>
                    </a>
                </div>
            </div>
        </div>
        <div class="BlogSlider-item">
            <div class="BlogSlider-itemWrapper">
                <img src="/Assets/Images/johanna-2.jpg" class="BlogSlider-itemImage" />
                <div class="BlogSlider-itemInfo">
                    <a href="#">
                        <p class="BlogSlider-itemTitle">Lorem ipsum dolor amhet</p>
                        <span class="BlogSlider-itemName">Karl Svenzon</span>
                    </a>
                </div>
            </div>
        </div>
        <div class="BlogSlider-item">
            <div class="BlogSlider-itemWrapper">
                <img src="/Assets/Images/johanna-2.jpg" class="BlogSlider-itemImage" />
                <div class="BlogSlider-itemInfo">
                    <a href="#">
                        <p class="BlogSlider-itemTitle">Lorem ipsum dolor amhet</p>
                        <span class="BlogSlider-itemName">Karl Svenzon</span>
                    </a>
                </div>
            </div>
        </div>
        <div class="BlogSlider-item">
            <div class="BlogSlider-itemWrapper">
                <img src="/Assets/Images/johanna-2.jpg" class="BlogSlider-itemImage" />
                <div class="BlogSlider-itemInfo">
                    <a href="">
                        <p class="BlogSlider-itemTitle">Lorem ipsum dolor amhet</p>
                        <span class="BlogSlider-itemName">Karl Svenzon</span>
                    </a>
                </div>
            </div>
        </div>
        <div class="BlogSlider-item">
            <div class="BlogSlider-itemWrapper">
                <img src="/Assets/Images/johanna-2.jpg" class="BlogSlider-itemImage" />
                <div class="BlogSlider-itemInfo">
                    <a href="#">
                        <p class="BlogSlider-itemTitle">Lorem ipsum dolor amhet</p>
                        <span class="BlogSlider-itemName">Karl Svenzon</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <span class="BlogSlider-navigation BlogSlider-navigation--prev">PREV</span>
    <span class="BlogSlider-navigation BlogSlider-navigation--next">NEXT</span>
</div>
*/
.BlogSlider {
  display: block;
  position: relative;
  margin-right: -50px;
  margin-left: -10px;
  padding: 20px 50px 20px 10px;
  overflow-x: hidden;
}
.BlogSlider-itemInfo {
  color: #fff;
}
.BlogSlider-itemInfo a:hover {
  color: #fff;
}
.BlogSlider-item {
  position: relative;
  float: left;
  padding: 0 0.625em;
  color: #fff;
  width: 100%;
}
.BlogSlider-item{
  padding: 0 0.83333333em;
}
.BlogSlider-itemWrapper {
  height: 0;
  padding-bottom: 125%;
  overflow: hidden;
  box-shadow: inset 0px -100px 100px -40px rgba(0, 0, 0, 0.6);
  transition: box-shadow 0.3s;
}
.BlogSlider-itemWrapper:hover {
  box-shadow: inset 0px -100px 100px -40px rgba(0, 0, 0, 0.6), 0px 8px 30px -8px #000;
}
.BlogSlider-itemInfo {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 0.83333333em 1.875em;
  word-break: break-word;
}
.BlogSlider-itemTitle {
  margin: 0;
  line-height: 1.3;
  font-size: 0.9375em;
}
.BlogSlider-itemName {
  display: block;
  margin-top: 0.625em;
  line-height: 1.3;
  font-weight: 600;
}
.BlogSlider-itemImage {
  position: relative;
  z-index: -1;
}
.BlogSlider-navigation {
  width: 50px;
  height: 50px;
  line-height: 45px;
  border: 2px solid #eee;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  text-align: center;
  cursor: pointer;
  filter: alpha(opacity=0);
  visibility: hidden;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  transition: opacity 0.3s, visibility 0.3s;
}
.BlogSlider-navigation.is-active {
  filter: alpha(opacity=100);
  visibility: visible;
}
.BlogSlider-navigation.BlogSlider-navigation--prev {
  left: 0;
}
.BlogSlider-navigation.BlogSlider-navigation--next {
  right: 40px;
}
.BlogSlider .owl-wrapper-outer {
  overflow: initial;
}
/*#

Component displaying a navigation breadcrumb.

Examples:

<div>
    <div class="Breadcrumb">
        <ol class="Breadcrumb-list">
            <li class="Breadcrumb-item"><a href="#" class="Breadcrumb-itemLink">Home</a></li>
            <li class="Breadcrumb-item"><a href="#" class="Breadcrumb-itemLink">Education</a></li>
            <li class="Breadcrumb-item"><a href="#" class="Breadcrumb-itemLink">Patients</a></li>
            <li class="Breadcrumb-item"><a href="#" class="Breadcrumb-itemLink">Balloon Pump Therapy (IABP)</a></li>
            <li class="Breadcrumb-item"><a href="#" class="Breadcrumb-itemLink">Your Heart: How It Works</a></li>
        </ol>
    </div>    
</div>

*/
.Breadcrumb {
  color: #aeaeae;
  font-size: 0.875em;
  padding: 0 1.875em;
  height: 25px;
}
.Breadcrumb-list {
  max-width: 1605px;
  list-style: none;
  margin: 0 auto;
  padding: 0;
}
.Breadcrumb-item {
  margin-right: 0.4em;
  display: inline-block;
}
.Breadcrumb-item:after {
  content: "›";
  margin-left: 0.6em;
}
.Breadcrumb-item:last-child {
  margin-right: 0;
}
.Breadcrumb-item:last-child:after {
  content: none;
}
.Breadcrumb-itemLink {
  display: inline-block;
  color: #888888;
}
.Byline {
  border-top: 4px solid #ddd;
}
.Byline-author {
  border-top: 4px solid #002d72;
  box-shadow: 0px 4px 8px #ddd;
  padding: 1em 0;
}
.Byline--Green {
  border-top-color: #78be20;
}
.Byline--Blue {
  border-top-color: #009fdf;
}
.Byline--Darkblue {
  border-top-color: #002d72;
}
.Byline--Red {
  border-top-color: red;
}
.Byline--Purple {
  border-top-color: #7a4183;
}
.Byline--trafficlightYellow {
  border-top-color: #ffcd00;
}
.Byline--trafficlightRed {
  border-top-color: #a61731;
}
.Byline a {
  color: #009fdf;
}
.Byline .Button {
  width: 100%;
  color: #ffffff;
}
.Byline p {
  font-size: 0.8125em;
}
.Byline p{
  font-size: 1em;
}
.Byline p:first-child{
  margin-top: 0;
}
.Byline img {
  width: 100%;
  height: auto;
}
.Byline img.Icon {
  width: 0.8em;
  max-height: 0.8em;
}
.Byline-document img {
  width: 50%;
}
.Byline-author .Social-list {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}
.Byline-author .Social-list img {
  width: auto;
  height: auto;
}
img.Byline-author--image {
  height: 50px;
  width: 50px;
  border-radius: 5em;
}
img.Byline-author--image{
  margin-top: 20px;
  height: 112px;
  width: 112px;
  margin-bottom: 20px;
}
.Card {
  position: relative;
  background-color: #fff;
}
.Card:hover{
  box-shadow: #ccc 0 5px 10px 0px;
  cursor: pointer;
}
.Card:hover .Link--blue{
  text-decoration: underline;
}
.Card .Link--blue {
  position: absolute;
  bottom: 2em;
  width: 100%;
  left: 0;
}
.Card .Link--blue img {
  height: 12px;
  position: relative;
  top: -1px;
  left: 6px;
}
.Card a:hover {
  text-decoration: none;
  color: #333;
}
.Card-content {
  margin-bottom: 65px;
}
.Card--noHover:hover {
  box-shadow: none;
  cursor: default;
}
.Card--withBorder:after{
  content: "";
  display: block;
  height: 75%;
  width: 1px;
  position: absolute;
  right: -1em;
  top: 5%;
  background-color: #f3f3f3;
}
/*#
<div>
    <h2>CityItem--big</h2>
    <a href="#" class="CityItem CityItem--big u-md-size1of3">
        <div class="AspectRatio AspectRatio--21by9">
            <div class="CityItem-image CityItem-image--static"></div>
        </div>
        <span class="CityItem-badge">13</span>
        <h3 class="CityItem-title CityItem-title--thin">Ankeborg</h3>
    </a>
</div>
<div>
    <h2 class="u-marginTlg">CityItem--small</h2>
    <a href="#" class="CityItem CityItem--small u-md-size1of4">
        <div class="CityItem-image CityItem-image--static"></div>
        <span class="CityItem-badge">13</span>
        <h4 class="CityItem-title CityItem-title--thin">Ankeborg</h4>
    </a>
</div>
*/
.CityItem {
  display: block;
  position: relative;
}
.CityItem:hover {
  color: #333;
  text-decoration: none;
}
.CityItem-image {
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
.CityItem-image.CityItem-image--static {
  display: block;
  background-color: cadetblue;
}
.CityItem-title {
  display: inline-block;
  font-size: 1.25em;
}
.CityItem-title.CityItem-title--thin {
  font-weight: normal;
}
.CityItem-title.CityItem-title-bold {
  font-weight: bold;
}
.CityItem-info {
  font-size: 1.25em;
  margin: 0;
}
.CityItem-badge {
  border: 1px solid #ddd;
  font-size: 1.125em;
  padding-top: 3px;
  position: relative;
  display: inline-block;
  border-radius: 50%;
  height: 40px;
  width: 40px;
  text-align: center;
  font-weight: bold;
  background: #fff;
}
.CityItem.CityItem--big .CityItem-title {
  margin-top: 20px;
}
.CityItem.CityItem--big .CityItem-badge {
  margin-right: 0.83333333em;
}
.CityItem.CityItem--small .CityItem-image {
  height: 100px;
  width: 100px;
  display: inline-block;
  vertical-align: middle;
}
.CityItem.CityItem--small .CityItem-title {
  margin-left: 1.25em;
}
.CityItem.CityItem--small .CityItem-badge {
  position: absolute;
  margin-right: 0;
  margin-top: 29px;
  margin-left: -25px;
}
.CityItem.CityItem--thumbnail .CityItem-title {
  line-height: 1.5 !important;
  margin-top: 0.83333333em;
}
.CityItem.CityItem--thumbnail .CityItem-info {
  font-size: 0.9375em;
}
.CityItem.CityItem--thumbnail .CityItem-link {
  display: inline-block;
  font-weight: bold;
  margin-top: 0.83333333em;
  color: #009fdf;
  text-decoration: underline;
}
/*#
<div>
    <div class="ContactItem u-cf u-sm-size1of2">
        <div class="ContactItem-image">
            <img src="/Assets/Images/johanna-2.jpg" />
        </div>
        <div class="ContactItem-info">
            <h4 class="u-marginAz">Karl Anksson</h4>
            <p class="u-marginAz">Lorem ipsum dolor ahmet</p>
            <hr />
            <a href="#" class="Link Link--blue">karl.anksson@ankeborg.nu</a>
            <hr />
            <p>0707 7070 7070</p>
        </div>
    </div>
    <br>
    <div class="ContactItem u-cf u-sm-size1of2">
        <span class="ContactItem-image ContactItem-image--static"></span>
        <div class="ContactItem-info">
            <h4 class="u-marginAz">Karl Anksson</h4>
            <p class="u-marginAz">Lorem ipsum dolor ahmet</p>
            <hr />
            <a href="#" class="Link Link--blue">karl.anksson@ankeborg.nu</a>
            <hr />
            <p>0707 7070 7070</p>
        </div>
    </div>
</div>
*/
.ContactItem {
  display: block;
  min-height: 200px;
  text-align: center;
}
.ContactItem{
  display: inline-block;
  text-align: left;
}
.ContactItem-image {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: block;
  overflow: hidden;
  margin: 0 auto;
}
.ContactItem-image{
  float: left;
}
.ContactItem-image.ContactItem-image--static {
  background-color: cadetblue;
}
.ContactItem-info {
  margin-top: 0.83333333em;
  display: inline-block;
  width: 100%;
}
.ContactItem-info{
  display: block;
  margin-top: 0;
  margin-left: 120px;
  width: auto;
}
.ContactItem-info a {
  word-break: break-word;
}
/*#

Responsible for styling CMS content where it is not possible to add custom CSS-classes. 
For example adding styling for <p>, <ul> 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>

*/
/*#

Display a cookie consent dialog to let users know that this website is using cookies.

Examples:

<div>
    <div class="CookieConsent CookieConsent--bottomRight">
        <div class="CookieConsent-dialog">
            <span class="CookieConsent-content">
                <span class="CookieConsent-message">This website uses cookies to ensure you get the best experience on our website</span>
                <a href="/cookie-policy" class="CookieConsent-learnMore">More info</a>
            </span>
            
            <button class="Button CookieConsent-accept">Got it</button>
        </div>
    </div>    
</div>

*/
.CookieConsent {
  position: relative;
  z-index: 10000;
  width: 100%;
  height: 100%;
  background: #ffffff;
}
.allow-read .CookieConsent {
  height: 0;
}
.CookieConsent-checkboxlabel {
  margin-right: 30px;
  position: relative;
}
.CookieConsent-checkbox {
  width: 20px;
  margin-right: 6px;
  display: none;
}
.CookieConsent-checkbox + label:before {
  content: "";
  display: inline-block;
  background-color: #ffffff;
  border: solid 1px #ddd;
  width: 20px;
  height: 20px;
  position: relative;
  top: 3px;
  left: -5px;
}
.CookieConsent-checkbox:checked:disabled + label:before {
  background-color: #ddd;
}
.CookieConsent-checkbox:checked + label:before {
  background: no-repeat url('/Assets/Icons/check.svg');
  background-position: center;
  background-size: 90%;
  background-color: #009fdf;
}
.CookieConsent-checkboxcontainer {
  margin-top: 30px;
  padding-left: 6px;
}
.CookieConsent .learnMoreContainer{
  text-align: right;
  padding-right: 20px;
}
.CookieConsent-dialog {
  color: inherit;
  display: none;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1.25em;
  font-size: 0.8125em;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  position: fixed;
  bottom: 0;
  border-top: solid 4px #002d72;
  background-color: #ffffff;
}
.is-active .CookieConsent-dialog {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.CookieConsent-dialog{
  font-size: 1.25em;
}
.CookieConsent-dialog > * div {
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
}
.CookieConsent-dialog Button {
  outline: none;
  box-shadow: 0 0 1px 1px #000;
}
.CookieConsent-dialog Button.CookieConsent-dismiss {
  white-space: nowrap;
  box-shadow: none;
}
.CookieConsent-content {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  padding-right: 1.25em;
  line-height: 1.4em;
}
.CookieConsent--top {
  height: 60px;
  margin-top: -60px;
  transition: margin-top 0.8s ease-in-out;
}
.CookieConsent--top.is-active {
  margin-top: 0;
}
.CookieConsent--top.is-active .CookieConsent-dialog {
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.CookieConsent--top .CookieConsent-dialog {
  height: 60px;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  box-shadow: none;
  transition: 0.8s ease-in-out;
  transition-property: box-shadow, -webkit-transform;
  transition-property: transform, box-shadow;
  transition-property: transform, box-shadow, -webkit-transform;
}
.CookieConsent--top .CookieConsent-dialog{
  position: fixed;
  -webkit-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%);
}
.CookieConsent--bottom,
.CookieConsent--bottomRight {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  -webkit-transform: translateY(120%);
      -ms-transform: translateY(120%);
          transform: translateY(120%);
  transition: -webkit-transform 0.8s ease-in-out;
  transition: transform 0.8s ease-in-out;
  transition: transform 0.8s ease-in-out, -webkit-transform 0.8s ease-in-out;
}
.CookieConsent--bottom.is-active,
.CookieConsent--bottomRight.is-active {
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
}
.CookieConsent--bottomRight{
  left: inherit;
  right: 1.25em;
  bottom: 1.25em;
}
.CookieConsent--bottomRight .CookieConsent-dialog{
  max-width: 22em;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
.CookieConsent--bottomRight .CookieConsent-content{
  display: block;
  margin-bottom: 1em;
  padding-right: 0;
}
.CookieConsent--bottomRight .CookieConsent-dismiss{
  width: 100%;
}
.CookieConsent-learnMore {
  text-decoration: none;
}
/*#


*/
.DropdownMenu {
  position: relative;
  padding: 1.25em 0;
}
.DropdownMenu{
  padding: 0;
}
.DropdownMenu-list {
  display: none;
  position: relative;
  background-color: #ffffff;
  padding: 1.25em;
  margin: 0;
  box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.1);
  list-style-type: none;
  margin-top: 1.25em;
  z-index: 2;
}
.DropdownMenu-list{
  position: absolute;
  left: 120px;
  min-width: 400px;
  margin-top: 0;
}
.DropdownMenu-list.is-active {
  display: block;
}
.DropdownMenu-item {
  font-weight: bold;
  margin: 0.83333333em 0;
}
.DropdownMenu-image {
  float: left;
  width: 80px;
  height: 80px;
}
.DropdownMenu-title {
  display: block;
  font-size: 1.25em;
  font-weight: bold;
  margin-left: 100px;
  cursor: pointer;
  padding-right: 30px;
  background: url('/Assets/Icons/chevron_down.svg') 100% 50% no-repeat;
}
.DropdownMenu-title.is-active {
  background: url('/Assets/Icons/chevron_up_blue.svg') 100% 50% no-repeat;
  background-size: 15px;
}
.DropdownMenu-title{
  display: inline-block;
  line-height: 80px;
  margin-left: 40px;
}
.Event {
  padding-top: 2em;
}
.Event{
  padding-top: 0;
}
/*#
<div>
    <a href="#" class="EventItem u-cf u-sm-size1of2">
        <div class="EventItem-badge">
            <div class="EventItem-badgeContent">
                <span class="EventItem-badgeDay">23</span>
                <span class="EventItem-badgeMonth">Juli</span>
            </div>
        </div>
        <div class="EventItem-info">
            <h4 class="u-marginAz">Titel</h4>
            <p class="u-marginTz">Beskrivning</p>
        </div>
    </a>
</div>
 */
.EventItem {
  display: block;
}
.EventItem:hover {
  text-decoration: none;
}
.EventItem-badge {
  width: 150px;
  height: 120px;
  color: #fff;
  display: block;
  background-color: #009fdf;
}
.EventItem-badge{
  float: left;
}
.EventItem-badgeContent {
  text-align: center;
  padding-top: 0.83333333em;
}
.EventItem-badgeDay {
  display: block;
  font-size: 2.5em;
  font-weight: bold;
  line-height: 1.2;
}
.EventItem-badgeMonth {
  font-size: 1.25em;
  font-weight: bold;
}
.EventItem-info {
  margin-top: 0.83333333em;
}
.EventItem-info{
  margin-top: 0;
  margin-left: 170px;
}
/*#

Display figure captions to images and other media.

Examples:

<div>
    <figure class="Figure">
        <img src="assets/images/temp/nansen-office-flowers.jpg" class="Figure-object" />
        <figcaption class="Figure-caption">Flowers in the Nansen Chicago office.</figcaption>
    </figure>    
</div>

*/
.Figure {
  margin: 0;
  display: inline-block;
}
.Figure-caption {
  font-size: 1.125em;
  color: #aaa;
  margin: .5em 0;
}
.Figure-caption.Figure-caption--right {
  text-align: right;
}
.Figure--right {
  float: right;
  margin-left: 1.25em;
}
.Figure--left {
  float: left;
  margin-right: 1.25em;
}
/*#

Form styling.

Examples:

<div>
    <!-- replace this comment with example HTML -->    
</div>

*/
.Form {
  padding: 5%;
  position: fixed;
  height: 100%;
  width: 100%;
  overflow: auto;
  top: 0;
  left: 0;
  z-index: 99999;
  background-color: #009fdf;
  padding-bottom: 50px;
}
.Form * {
  color: #ffffff;
}
.Form ::-webkit-scrollbar {
  display: none;
}
.Form ::-webkit-input-placeholder {
  color: #ffffff !important;
}
.Form label,
.Form input {
  /*display: block;*/
  /*width: 100%;*/
}
.Form label {
  font-weight: bold;
}
.Form input {
  margin-bottom: 2.5em;
  color: #ffffff !important;
  background-color: #002d72;
  border: 0 !important;
}
.Form textarea,
.Form select {
  margin-bottom: 2.5em;
  color: #ffffff !important;
  background-color: #002d72;
  border: 0 !important;
}
.Form input[type=text],
.Form textarea {
  display: block;
  width: 100%;
  color: #000 !important;
}
.Form button {
  display: block;
  width: auto;
}
.Form-wrap {
  position: relative;
  width: 100%;
  /*height: ~"calc(100% - 65px)";*/
  margin: 0 auto;
  max-width: 1440px;
  top: 20px;
}
.Form-content {
  /*height: ~"calc(100% + 85px)"; /*less calc escaped string */
}
/*.js-form {
    display: none;

    &.is-active {
        display: block;
    }
}*/
.Form-Trigger {
  background-color: #009fdf;
  display: block;
  height: 50px;
  width: 50px;
  border-radius: 100%;
  position: fixed;
  bottom: 10px;
  right: 2%;
  z-index: 899;
  transition: background ease-in-out 0.2s;
  text-align: center;
}
.Form-Trigger img {
  position: relative;
  top: 10px;
}
.Form-Trigger:hover {
  background-color: #002d72;
}
.Form-Trigger span {
  font-weight: 800;
  position: absolute;
  top: -40px;
  left: -15px;
  line-height: 1em;
}
.Form{
  padding: 0;
}
.Form-wrap{
  height: 100%;
  top: 0;
}
.Form-content{
  position: static;
  margin-top: 10%;
}
.Form-Trigger{
  bottom: 50px;
  right: 30px;
}
/*#
  **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;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.Grid-cell {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
  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--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;
}
/** 
 * Browser fallback for Flexible Box Layout. 
 * Can also be forced using .Grid--simple. 
 */
.is-no-flexbox .Grid,
.Grid--simple {
  display: block;
  font-size: 0;
  margin: 0;
  padding: 0;
  text-align: left;
}
.is-no-flexbox .Grid > .Grid-cell,
.Grid--simple > .Grid-cell {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  box-sizing: border-box;
  display: inline-block;
  font-size: 16px;
  font-size: 16px;
  margin-right: 0;
  margin-left: 0;
  padding-right: 0;
  padding-left: 0;
  text-align: left;
  vertical-align: top;
  width: 100%;
}
.is-no-flexbox .Grid.Grid--alignCenter,
.Grid--simple.Grid--alignCenter {
  text-align: center;
}
.is-no-flexbox .Grid.Grid--alignRight,
.Grid--simple.Grid--alignRight {
  text-align: right;
}
.is-no-flexbox .Grid.Grid--alignMiddle > .Grid-cell,
.Grid--simple.Grid--alignMiddle > .Grid-cell {
  vertical-align: middle;
}
.is-no-flexbox .Grid.Grid--alignBottom > .Grid-cell,
.Grid--simple.Grid--alignBottom > .Grid-cell {
  vertical-align: bottom;
}
.is-no-flexbox .Grid.Grid--fit,
.Grid--simple.Grid--fit {
  display: table;
  table-layout: fixed;
  width: 100%;
  margin: 0 !important;
}
.is-no-flexbox .Grid.Grid--fit > .Grid-cell,
.Grid--simple.Grid--fit > .Grid-cell {
  display: table-cell;
  width: auto;
}
.is-no-flexbox .Grid.Grid--fit > .Grid-cell:first-child,
.Grid--simple.Grid--fit > .Grid-cell:first-child {
  padding-left: 0;
}
.is-no-flexbox .Grid.Grid--fit > .Grid-cell:last-child,
.Grid--simple.Grid--fit > .Grid-cell:last-child {
  padding-right: 0;
}
/**
 * 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:
 *    xs = 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: -5px;
  margin-right: -5px;
}
.Grid.Grid--gutterHxsm > .Grid-cell,
.Grid.Grid--gutterAxsm > .Grid-cell {
  padding-left: 5px;
  padding-right: 5px;
}
.Grid.Grid--gutterHsm,
.Grid.Grid--gutterAsm {
  margin-left: -6.66666667px;
  margin-right: -6.66666667px;
}
.Grid.Grid--gutterHsm > .Grid-cell,
.Grid.Grid--gutterAsm > .Grid-cell {
  padding-left: 6.66666667px;
  padding-right: 6.66666667px;
}
.Grid.Grid--gutterHmd,
.Grid.Grid--gutterAmd {
  margin-left: -10px;
  margin-right: -10px;
}
.Grid.Grid--gutterHmd > .Grid-cell,
.Grid.Grid--gutterAmd > .Grid-cell {
  padding-left: 10px;
  padding-right: 10px;
}
.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: -5px;
  margin-bottom: -5px;
}
.Grid.Grid--gutterVxsm > .Grid-cell,
.Grid.Grid--gutterAxsm > .Grid-cell {
  padding-top: 5px;
  padding-bottom: 5px;
}
.Grid.Grid--gutterVsm,
.Grid.Grid--gutterAsm {
  margin-top: -6.66666667px;
  margin-bottom: -6.66666667px;
}
.Grid.Grid--gutterVsm > .Grid-cell,
.Grid.Grid--gutterAsm > .Grid-cell {
  padding-top: 6.66666667px;
  padding-bottom: 6.66666667px;
}
.Grid.Grid--gutterVmd,
.Grid.Grid--gutterAmd {
  margin-top: -10px;
  margin-bottom: -10px;
}
.Grid.Grid--gutterVmd > .Grid-cell,
.Grid.Grid--gutterAmd > .Grid-cell {
  padding-top: 10px;
  padding-bottom: 10px;
}
.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;
}
.Grid.Grid--gutterOuter {
  margin-top: 15px;
  margin-bottom: 15px;
}
/*TWEAK FOR STARPAGE MODULES*/
.Page-main > .Page-container > .Grid--gutterA > div:first-child {
  padding-top: 0;
}
.Highcharts-container {
  padding: 1.25em 0;
}
.Highcharts-container .Heading-thin {
  font-size: 16px;
}
.Highcharts-container p {
  font-size: 12px;
}
/*#


*/
.Image {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.Image.Image--cover {
  background-size: cover;
}
.Image.Image--cover img {
  position: absolute;
  left: -9999px;
  right: -9999px;
  max-width: none;
  height: 100%;
  margin: 0 auto;
}
.Image.Image--center {
  background-position: center;
}
/*#

Group inputs together with a text label or button.

Examples:

<div>
    <div class="InputGroup u-marginBsm">
        <span class="InputGroup-addon">@</span>
        <input class="InputGroup-input" type="text" placeholder="Username" />
    </div>
    
    <div class="InputGroup u-marginBsm"> 
        <input type="text" class="InputGroup-input" placeholder="Recipient's username" /> 
        <span class="InputGroup-addon">@example.com</span> 
    </div>
</div>

*/
.InputGroup {
  background: #f1f1f1;
  border: 2px solid #ddd;
  border-radius: 4px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.InputGroup-addon {
  display: inline-block;
  padding-right: 1.25em;
  padding-left: 1.25em;
  font-size: 1.125em;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
}
.InputGroup-input {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  border: none !important;
  border-radius: 0 !important;
}
.InputGroup-addon--button {
  -ms-flex-item-align: stretch;
      -ms-grid-row-align: stretch;
      align-self: stretch;
  border: none;
  border-radius: 0;
}
.vendor-ie-9 .InputGroup,
.vendor-ie-8 .InputGroup {
  display: table !important;
  width: 100%;
}
.vendor-ie-9 .InputGroup-addon,
.vendor-ie-8 .InputGroup-addon,
.vendor-ie-9 .InputGroup-input,
.vendor-ie-8 .InputGroup-input {
  display: table-cell !important;
  width: 1%;
}
.vendor-ie-9 .InputGroup-input,
.vendor-ie-8 .InputGroup-input {
  width: 100%;
}
.Extra-padding-IntroBlock-Box{
  padding: 60px 50px !important;
  font-size: 2em !important;
}
.Extra-padding-IntroBlock-header {
  padding-top: 2.5em !important;
  padding-bottom: 2.5em !important;
}
.Extra-padding-IntroBlock-header{
  padding-top: 6.5em !important;
  padding-bottom: 2.5em !important;
}
/*#

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>
*/
 {
  padding-left: 0;
  list-style: none;
}
.Segment ul,
.Segment ol {
  padding-left: 1.25em;
}
.List-item {
  padding-top: 0.3125em;
  padding-bottom: 0.3125em;
}
.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 #ddd;
}
.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.3125em 0.625em;
}
.List--striped > .List-item:first-child .List-itemContent {
  background: #f7f7f7;
}
.List--horizontal {
  margin-left: -0.625em;
  margin-right: -0.625em;
}
.List--horizontal .List-item {
  display: inline-block;
  margin-right: -0.25em;
  padding-right: 0.625em;
  padding-left: 0.625em;
}
.List--horizontal .List-item:last-child {
  padding-right: 0;
}
.List--horizontal.List--bordered > .List-item {
  border-right: 1px solid #ddd;
  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.Toolbar .List-item {
  padding-left: 0;
}
.List--horizontal.Toolbar .List-item{
  padding-left: 0.625em;
}
.List--vertical .List-item {
  display: block;
}
/* 
    Vertical gutters (top, bottom) 
*/
.List--gutterVz > .List-item {
  padding-top: 0;
  padding-bottom: 0;
}
.List--gutterVxsm > .List-item {
  padding-top: 0.3125em;
  padding-bottom: 0.3125em;
}
.List--gutterVsm > .List-item {
  padding-top: 0.41666667em;
  padding-bottom: 0.41666667em;
}
.List--gutterVmd > .List-item {
  padding-top: 0.625em;
  padding-bottom: 0.625em;
}
.List--gutterVlg > .List-item {
  padding-top: 0.9375em;
  padding-bottom: 0.9375em;
}
.List--gutterVxlg > .List-item {
  padding-top: 1.25em;
  padding-bottom: 1.25em;
}
/* 
    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.3125em;
  margin-left: -0.3125em;
}
.List--gutterHxsm > .List-item {
  padding-right: 0.3125em;
  padding-left: 0.3125em;
}
.List--gutterHsm {
  margin-right: -0.41666667em;
  margin-left: -0.41666667em;
}
.List--gutterHsm > .List-item {
  padding-right: 0.41666667em;
  padding-left: 0.41666667em;
}
.List--gutterHmd {
  margin-right: -0.625em;
  margin-left: -0.625em;
}
.List--gutterHmd > .List-item {
  padding-right: 0.625em;
  padding-left: 0.625em;
}
.List--gutterHlg {
  margin-right: -0.9375em;
  margin-left: -0.9375em;
}
.List--gutterHlg > .List-item {
  padding-right: 0.9375em;
  padding-left: 0.9375em;
}
.List--gutterHxlg {
  margin-right: -1.25em;
  margin-left: -1.25em;
}
.List--gutterHxlg > .List-item {
  padding-right: 1.25em;
  padding-left: 1.25em;
}
/*#

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="/assets/images/temp/100.gif" />
    </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="/assets/images/temp/100.gif" />
            </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 {
  padding-right: 0;
  padding-left: 1.25em;
  display: table-cell;
}
.Media-side {
  padding-right: 1.25em;
}
.Media-side > img {
  display: block;
  max-width: none;
}
.Media-body {
  width: 100%;
}
.Media--equal .Media-body {
  width: auto;
}
/*#
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="u-linkText u-marginRmd js-close">Cancel</a>
                <a href="#" class="Button Button--wide">Send</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: #000000;
  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.is-active .Modal-dialog {
  -webkit-animation: slide-in 0.25s ease-out;
          animation: slide-in 0.25s ease-out;
}
.Modal-dialog {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  background: #fff;
  margin: auto;
  z-index: 999;
  width: 100%;
  max-width: 700px;
  padding: 1.25em;
  overflow: auto;
}
.Modal-footer {
  margin: 1.25em -1.25em -1.25em;
  padding: 1.25em;
  text-align: right;
  background: #f7f7f7;
}
.Modal-close {
  position: absolute;
  top: 0.8em;
  right: 0.8em;
  font-size: 1.6em;
  text-decoration: none;
  padding: 0 0.25em 0.05em;
  background: #ddd;
  line-height: 1em;
  border-radius: 50%;
  color: #fff;
}
.Modal-close:hover {
  background: #d0d0d0;
  color: #fff;
  text-decoration: none;
}
@-webkit-keyframes slide-in {
  0% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}
@keyframes slide-in {
  0% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}
/*#
<div>
    <article class="NewsItem">
        <div class="Grid Grid--gutterHxlg">
            <div class="Grid-cell u-size3of5">
                <a href="#" class="u-block">
                    <h5 class="NewsItem-category">Försäkringsnytt</h5>
                    <h3 class="NewsItem-title">Söderberg & Partners lanserar nytt koncept</h3>
                    <div class="u-md-block">
                        <p>
                            Bacon ipsum dolor amet shankle meatloaf jerky, capicola andouille shoulder burgdoggen pancetta.
                            Short ribs flank picanha, cow shankle chicken meatloaf rump strip steak pork belly drumstick.
                        </p>
                        <div class="NewsItem-author u-cf">
                            <div class="NewsItem-authorImage">
                                <img src="/Assets/Images/default_teaser_background.jpg" />
                            </div>
                            <div class="NewsItem-authorInfo">
                                <h6 class="u-marginAz">Karl</h6>
                                <p class="u-marginAz">Anksson</p>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="Grid-cell u-size2of5 u-marginAuto">
                <div class="NewsItem-image">
                    <div class="Image Image--cover Image--center" style="background-image: url('/Assets/Images/default_teaser_background.jpg')"></div>
                </div>
            </div>
        </div>
    </article>
</div>
 */
.NewsItem{
  padding: 2.5em 0;
}
.NewsItem:hover * {
  text-decoration: none;
}
.NewsItem-category {
  color: #009fdf;
  margin-bottom: 1.25em;
  line-height: 1.3;
}
.NewsItem-categoryList li:before {
  content: ",";
  color: #009fdf;
  display: inline-block;
  margin-right: 5px;
  position: relative;
  left: -4px;
}
.NewsItem-categoryList li:first-child:before {
  content: none;
}
.NewsItem-categoryList li a {
  display: inline-block;
  margin-bottom: 0;
}
.NewsItem-title {
  line-height: 1.5;
  word-break: break-word;
}
.NewsItem-title{
  font-size: 1.5em;
}
.NewsItem-author {
  margin-top: 1.875em;
}
.NewsItem-authorImage {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: block;
  overflow: hidden;
}
.NewsItem-authorImage{
  float: left;
}
.NewsItem-authorImage.NewsItem-authorImage--static {
  background-color: cadetblue;
}
.NewsItem-authorInfo {
  margin-top: 0.83333333em;
  display: inline-block;
}
.NewsItem-authorInfo{
  display: block;
  margin-top: 0;
  margin-left: 70px;
}
.NewsItem-image {
  width: 100%;
  max-width: 150px;
  max-height: 150px;
  position: relative;
  float: right;
}
.NewsItem-image{
  max-width: 300px;
  max-height: 300px;
}
.NewsItem-image:after {
  content: '';
  display: block;
  padding-bottom: 100%;
}
.NewsItem-image div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
}
.Newsletter {
  margin: 0 auto;
  border-top: 4px solid #009fdf;
  padding: 2.5em 0;
}
.Newsletter-form input {
  display: inline-block;
  vertical-align: middle;
  width: 100%;
  margin-bottom: 10px;
}
.Newsletter-form input{
  font-size: 1.5em;
  width: 70%;
  margin-bottom: 0;
}
.Newsletter-form Button {
  font-size: 19px;
  display: inline-block;
}
.OffCanvas {
  position: relative;
  overflow-x: hidden;
  width: 100%;
}
.OffCanvas.is-active {
  min-width: 320px;
}
.OffCanvas.is-active .OffCanvas-menu {
  -webkit-transform: translateX(270px);
      -ms-transform: translateX(270px);
          transform: translateX(270px);
}
.OffCanvas-page {
  width: 100%;
  height: 100%;
  position: relative;
  transition: .3s ease all;
}
.OffCanvas-page .Page-main,
.OffCanvas-page .Footer {
  transition: .3s opacity ease;
}
.OffCanvas-menu {
  z-index: 99999;
  width: 270px;
  min-height: 100%;
  position: fixed;
  top: 0px;
  padding-top: 25px;
  left: -270px;
  overflow: auto;
  background-color: #ffffff;
  transition: .3s ease all;
  box-shadow: 1px 6px 10px 1px rgba(0, 0, 0, 0.1);
}
.OffCanvas-menu a {
  color: #333;
  border-left: 2px solid #fff;
  padding: 5px;
}
.OffCanvas-menu a:hover {
  text-decoration: none;
}
.OffCanvas-menu a.is-active {
  border-left: 2px solid #009fdf;
}
.OffCanvas-section {
  border-bottom: 1px solid #fff;
  margin: 0;
}
.OffCanvas-searchSection {
  padding: 0.79em;
}
.OffCanvas-mainNav {
  padding: 0;
  border-bottom: none;
  position: absolute;
  overflow: scroll;
  width: 100%;
}
.OffCanvas-mainNav > .List-item > .Link {
  background: url('/Assets/Icons/chevron_down.svg') 100% 50% no-repeat;
}
.OffCanvas-mainNav > .List-item > .Link.is-active {
  background: url('/Assets/Icons/chevron_up_blue.svg') 100% 50% no-repeat;
  background-size: 15px;
}
.OffCanvas-mainNav > .List-item > .Link-noArrow {
  background: none !important;
}
.OffCanvas-mainNav .List-item {
  border-bottom: 2px solid #fff;
}
.OffCanvas-mainNav .List-item .Link {
  display: block;
  width: 100%;
}
.OffCanvas-mainNav .List-item .Link:hover {
  color: #009fdf;
}
.OffCanvas-mainNav .List-item .Link.is-selected {
  background: #fff;
}
.OffCanvas-mainNav .OffCanvas-mainNavTitle {
  display: block;
}
.OffCanvas-mainNav .OffCanvas-mainNavByline {
  text-transform: none;
  font-weight: normal;
}
.OffCanvas-menu{
  display: none;
}
.OffCanvas-page{/*-moz-transform: translateX(0) !important;
        -ms-transform: translateX(0) !important;
        -o-transform: translateX(0) !important;
        -webkit-transform: translateX(0) !important;
        transform: translateX(0) !important;*/
}
.OffCanvas-page .Page-main,
  .OffCanvas-page .Footer{
  filter: alpha(opacity=100) !important;
}
.OfficeMap {
  width: 100%;
  height: 600px;
}
.OfficeMap.OfficeMap--withMarginB {
  margin-bottom: 50px;
}
.OfficeMap .mapboxgl-popup-content {
  min-width: 180px;
  border-radius: 0;
}
.OfficeMap .mapboxgl-popup-content .mapboxgl-popup-close-button {
  display: none;
}
/*#

<div>
    <ul class="OpeningHoursList u-md-size1of3">
        <li class="OpeningHoursList-item">
            <span class="OpeningHoursList-itemDay">Idag</span>
            <span class="OpeningHoursList-itemHours" id="OpeningHoursToday">11:00 - 18:00</span>
        </li>
        <li class="OpeningHoursList-item">
            <span class="OpeningHoursList-itemDay">Idag</span>
            <span class="OpeningHoursList-itemHours" id="OpeningHoursToday">11:00 - 18:00</span>
        </li>
        <li class="OpeningHoursList-item">
            <span class="OpeningHoursList-itemDay">Idag</span>
            <span class="OpeningHoursList-itemHours" id="OpeningHoursToday">11:00 - 18:00</span>
        </li>
        <li class="OpeningHoursList-item">
            <span class="OpeningHoursList-itemDay">Idag</span>
            <span class="OpeningHoursList-itemHours" id="OpeningHoursToday">11:00 - 18:00</span>
        </li>
    </ul>
</div>

*/
.OpeningHoursList {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.OpeningHoursList-item {
  padding: 0.83333333em 0;
  border-bottom: 1px solid #ddd;
}
.OpeningHoursList-item:last-of-type {
  border: none;
}
.OpeningHoursList-itemHours {
  float: right;
}
/*#

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">Frontend Docs</a>
            </li>
            <li class="PageNav-item">
                <a href="#" class="PageNav-itemLink">Backend Docs</a>
            </li>
            <li class="PageNav-item">
                <a href="#" class="PageNav-itemLink">About Encore</a>
            </li>
        </ul>
    </nav>
    
    <h4>Vertical</h4>
    <nav class="PageNav PageNav--vertical">
        <ul class="PageNav-list">
            <li class="PageNav-item">
                <a href="#" class="PageNav-itemLink is-active">Frontend Docs</a>
            </li>
            <li class="PageNav-item">
                <a href="#" class="PageNav-itemLink">Backend Docs</a>
            </li>
            <li class="PageNav-item">
                <a href="#" class="PageNav-itemLink">About Encore</a>
            </li>
        </ul>
    </nav>
</div>

*/
.PageNav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.PageNav-item {
  padding: 0;
}
.PageNav-image {
  margin-left: 0.83333333em;
}
.PageNav-itemLink {
  color: #333;
  text-decoration: none;
  font-weight: bold;
}
.PageNav-itemLink:hover {
  color: grey;
  text-decoration: none;
}
.PageNav--horizontal {
  font-size: 1.125em;
}
.PageNav--horizontal .PageNav-item {
  display: inline-block;
  padding: 0.83333333em 0;
  margin-right: 0.625em;
}
.PageNav--horizontal .PageNav-item:last-child {
  margin-right: 0;
}
.PageNav--horizontal .PageNav-itemLink {
  padding-bottom: 0.7em;
}
.PageNav--horizontal .PageNav-itemLink.is-active,
.PageNav--horizontal .PageNav-itemLink.is-current {
  border-bottom: 4px solid #009fdf;
}
.PageNav--vertical {
  border-top: 1px solid #009fdf;
}
.PageNav--vertical .PageNav-item .PageNav-list {
  margin-left: 1.25em;
}
.PageNav--vertical .PageNav-itemLink {
  display: block;
  padding: 0.83333333em 0;
  border-bottom: 1px solid #009fdf;
}
.PageNav--vertical .PageNav-itemLink.is-active {
  font-weight: bold;
}
.PageNav-sticky {
  top: 0;
  left: 0;
  background: #fff;
  max-width: 1605px;
  margin: 0 auto;
}
.PageNav-sticky.is-fixed {
  width: 100%;
  position: fixed;
  margin: 0;
  z-index: 10000;
  max-width: 100%;
}
.PageNav-sticky .PageNav-list {
  padding-bottom: 0.83333333em;
  border-bottom: 1px solid #ddd;
  margin-bottom: -1.25em;
}
.PageNav--compact.PageNav--horizontal .PageNav-list {
  padding-bottom: 0;
}
.PageNav--compact.PageNav--horizontal .PageNav-list .PageNav-item {
  padding: 0.7em 0;
  line-height: 1;
}
.PageNav--compact.PageNav--horizontal .PageNav-list .PageNav-item .PageNav-itemLink {
  padding-bottom: 0.7em;
  display: inline-block;
}
.PageNav--compact.PageNav--horizontal.PageNav--multirow .PageNav-list .PageNav-item {
  padding: 0.7em 0;
  line-height: 1;
}
.PageNav--compact.PageNav--horizontal.PageNav--multirow .PageNav-list .PageNav-item .PageNav-itemLink {
  padding-top: 0.7em;
  display: inline-block;
}
.PageNav--large {
  font-size: 3.5em;
}
.PageNav--horizontal .PageNav-item{
  margin-right: 2.5em;
}
.PageNav-mobile {
  display: none;
  padding-left: 1.25em;
}
.PageNav-mobile.is-active {
  display: block;
}
/*#

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: #dddddd;
  cursor: default;
  font-weight: bold;
  pointer-events: none;
}
.Pagination-item--nav .Pagination-link {
  border-color: #ddd;
  padding-right: 1.25em;
  padding-left: 1.25em;
}
.Pagination-item--nav.is-disabled {
  pointer-events: none;
}
.Pagination-item--nav.is-disabled .Pagination-link {
  border-color: #dddddd;
  color: #ddd;
}
.Pagination-item--separator {
  color: #dedede;
}
.Pagination-item--text {
  color: #aaa;
  font-size: 1.25em;
  padding-right: 0.83333333em;
  padding-left: 0.83333333em;
}
.Pagination-link {
  display: inline-block;
  padding: 0.625em 0.83333333em;
  border-radius: 3px;
  color: #333;
  border: 2px solid transparent;
}
.Pagination-link:hover {
  border-color: #009fdf;
  background-color: #009fdf;
  text-decoration: none;
  color: #fff;
}
.ProgressNav {
  top: 0;
  left: 0;
  z-index: 100;
  margin: 0 -1.25em;
}
.ProgressNav{
  margin: 0;
}
.ProgressNav.is-fixed {
  width: 100%;
  position: fixed;
  margin: 0;
}
.ProgressNav-container {
  max-width: 1605px;
  background: #fff;
  position: relative;
  margin: 0 auto;
  border-bottom: 1px solid #ddd;
  /*box-shadow: 0px 18px 21px -14px rgba(0,0,0,0.55);
        -webkit-box-shadow: 0px 18px 21px -14px rgba(0,0,0,0.25);
        -moz-box-shadow: 0px 18px 21px -14px rgba(0,0,0,0.25);
        -o-box-shadow: 0px 18px 21px -14px rgba(0,0,0,0.25);*/
}
.ProgressNav-container:after {
  content: "";
  display: block;
}
.ProgressNav-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  text-align: center;
  padding: 0.83333333em 1.25em;
}
.ProgressNav-title{
  white-space: normal;
  overflow: hidden;
  text-overflow: inherit;
  text-align: left;
  padding: 0;
}
.ProgressNav-bar {
  width: 0;
  height: 4px;
  display: block;
  background: #009fdf;
}
.Push {
  width: 100%;
  height: 100%;
  /*max-height:700px;*/
  overflow: hidden;
  position: relative;
}
.Push--color .Push-content {
  color: #ffffff;
}
.Push--color .Push-content{
  margin-top: 0;
  padding: 130px 0;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.Push--color .Push-content .Heading,
.Push--color .Push-content .Heading--h1,
.Push--color .Push-content h1,
.Push--color .Push-content .Heading--h2,
.Push--color .Push-content h2,
.Push--color .Push-content .Heading--h3,
.Push--color .Push-content h3,
.Push--color .Push-content .Heading--h4,
.Push--color .Push-content h4,
.Push--color .Push-content .Heading--h5,
.Push--color .Push-content h5,
.Push--color .Push-content .Heading--h6,
.Push--color .Push-content h6,
.Push--color .Push-content .Heading--h7 {
  color: #ffffff;
}
.Push.Push--center {
  text-align: center;
}
.Push.Push--center .Push-content {
  text-align: center;
  margin-left: 0;
  padding: 6em 2em;
}
.Push--multicol {
  position: relative;
  overflow: visible;
}
.Push--multicol h2,
.Push--multicol h4 {
  text-align: center;
}
.Push--multicol h4 {
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 6px;
}
.Push--multicol .Grid-cell:first-child {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
}
.Push--multicol .Grid-cell:first-child{
  -webkit-box-ordinal-group: 1;
  -ms-flex-order: 0;
  order: 0;
}
.Push--multicol .Push-content {
  font-size: 1.125em;
  line-height: 1.25em;
  height: auto;
  position: absolute;
  bottom: auto;
  top: 30%;
  width: 100%;
  right: 0;
  padding: 1em 2em;
  background-color: #009fdf;
  color: #ffffff;
}
.Push--multicol .Push-content{
  font-size: 1.125em;
  width: 80%;
  right: 10%;
  bottom: 10%;
  top: auto;
}
.Push--multicol .Push-content{
  width: 70%;
  right: 15%;
  font-size: 1.5em;
}
.Push--multicol .Push-content span {
  font-size: 12px;
  font-weight: 300;
}
.Push--multicol .Push-content p {
  margin-bottom: 0;
}
.Push-content {
  text-align: center;
  padding: 3em;
  position: relative;
  z-index: 99;
  height: 100%;
}
.Push-content{
  padding: 6em 3em;
  text-align: left;
}
.Push-actions .Button {
  margin-right: 30px;
  color: #fff !important;
}
.Push-actions .Button:last-child {
  margin-right: 0px;
}
.Push-bgImage,
.Push-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
}
.Push-bgImage video,
.Push-overlay video,
.Push-bgImage iframe,
.Push-overlay iframe {
  min-width: 100%;
  position: absolute;
  left: -9999px;
  right: -9999px;
  top: -9999px;
  bottom: -9999px;
  margin: auto;
}
.Push-video {
  height: 100%;
}
.Push-video .Push-content {
  height: 100%;
}
.Push-video video,
.Push-video iframe {
  min-width: 100%;
  position: absolute;
  left: -9999px;
  right: -9999px;
  top: -9999px;
  bottom: -9999px;
  margin: auto;
}
.Push-video:hover * {
  text-decoration: none;
}
.Push-overlay {
  z-index: 9;
}
.Push-lead {
  width: calc(100% + 6.25em);
  /*less calc escaped string */
  max-width: none;
  margin-left: -3.125em;
  margin-bottom: 1.25em;
}
.Push-lead{
  width: 100%;
  max-width: 100%;
  margin: 0;
}
.ScrollTop {
  display: none;
  transition: all ease-in 0.5s;
}
.ScrollTop.is-sticky {
  right: 0;
}
.ScrollTop{
  display: block;
  position: fixed;
  bottom: 200px;
  right: -80px;
  background-color: #009fdf;
  height: 50px;
  width: 50px;
  border-top-left-radius: 0.8em;
  border-bottom-left-radius: 0.8em;
  cursor: pointer;
}
.ScrollTop:before{
  content: "";
  display: block;
  height: 20px;
  width: 20px;
  border-top: 3px solid #fff;
  border-left: 3px solid #fff;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: calc(50% - 5px);
  left: calc(50% - 10px);
}
.ScrollTop span {
  height: 50px;
  width: 50px;
  display: block;
  position: relative;
  z-index: 999;
}
.Search-container {
  height: 100%;
  width: 100%;
  position: fixed;
  background-color: #fff;
}
.Search {
  position: relative;
}
.Search input {
  width: 100%;
  padding: 0.625em 4em;
  border: none;
  border-bottom: 1px solid #ccc;
  border-radius: 0;
  background-image: url('/Assets/Icons/temp/SearchIcon.svg');
  background-position: 20px center;
  background-repeat: no-repeat;
}
.Search input{
  background-position: left center;
}
.Search input:focus {
  box-shadow: none;
}
.Search-close {
  position: absolute;
  height: 100%;
  width: 40px;
  top: 0;
  right: 20px;
  background-position: right top;
  background-repeat: no-repeat;
}
.Search-close{
  right: 0;
}
.Search-shortcuts a {
  font-size: 1.125em;
  font-weight: bold;
}
.Search-shortcuts a{
  font-size: 1.5em;
}
.Search-shortcuts a:hover {
  color: #333;
}
.autocomplete-suggestions {
  position: absolute;
  z-index: 9999;
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  background-color: #ffffff;
  padding-bottom: 15px;
  display: none;
}
.autocomplete-suggestions{
  overflow: hidden;
  font-size: 14px;
  border-bottom: 1px solid #eee;
  box-shadow: 0px 10px 33px -20px #cccccc;
}
.autocomplete-suggestions .List-item {
  border-bottom: 1px solid #ccc;
  padding: 1em;
}
.autocomplete-suggestions .List-item:last-child {
  padding: 1em;
}
.autocomplete-suggestions .List-item a {
  color: #333;
  font-size: 16;
}
.Search-shortcuts li:last-child{/*display: block;*/
}
.Segment {
  height: 100%;
  font-size: 12px;
  padding: 1.25em 1.875em;
  /*THEMES*/
}
.Segment{
  padding: 1.875em;
}
.Segment .Heading,
.Segment .Heading--h1,
.Segment h1,
.Segment .Heading--h2,
.Segment h2,
.Segment .Heading--h3,
.Segment h3,
.Segment .Heading--h4,
.Segment h4,
.Segment .Heading--h5,
.Segment h5,
.Segment .Heading--h6,
.Segment h6,
.Segment .Heading--h7 {
  text-align: center;
  font-weight: 900;
  text-transform: uppercase;
}
.Segment p{
  margin-top: 25px;
}
.Segment ul,
.Segment ol {
  border-top: 1px dotted #333;
  padding-top: 0.83333333em;
  margin-bottom: 0;
}
.Segment.u-colorWhite ul,
.Segment.u-colorWhite ol {
  border-color: #fff;
}
.Segment--themeCyan {
  background-color: #ccecf9;
}
.Segment--themeGreen {
  background-color: #78be20;
  color: #ffffff;
}
.Segment--themeGreenLight {
  background-color: #c9e5a6;
}
.Segment--themeRed {
  background-color: #a61731;
  color: #ffffff;
}
.Segment--themeYellow {
  background-color: #ffcd00;
}
/*#

Allows to create a slider with any type of content.

<div class="Slider owl-carousel owl-theme" data-module="slider">
    <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-item {
  position: relative;
}
.Slider-item img {
  display: block;
  height: auto;
  width: 100%;
}
.Social-list {
  margin: 0;
}
.Social-list--noBg .List-item:last-child {
  padding-right: 1.25em;
}
.Social-list--noBg .List-item:last-child{
  padding-right: 1.875em;
}
.Social-list img {
  width: 35px;
  height: 35px;
}
footer .Social-list {
  padding-left: 0;
  margin: 20px 0;
}
footer .Social-list .List-item:last-child {
  padding-right: 0.83333333em;
}
footer .Social-list img {
  width: 49px;
  height: 49px;
}
/*#
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;
  background-color: #f1f1f1;
}
.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 {
  background-color: #e2f9be;
}
.Status--info {
  background-color: #fff6cb;
}
.Status--warning {
  background-color: #ffd9c8;
}
/*# 

<table class="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</td>
            <td>Row col 2</td>
            <td>Row col 3</td>
        </tr>
        <tr>
            <td>Row col 1</td>
            <td>Row col 2</td>
            <td>Row col 3</td>
        </tr>
    </tbody>
</table>

*/
.Table--striped tbody tr:first-child {
  background-color: #f7f7f7;
}
.Table--bordered td {
  border-bottom: 1px solid #ddd;
}
.Table--alignMiddle td {
  vertical-align: middle;
}
/*#

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>

*/
.Tabs {
  margin-bottom: 1.25em;
}
.Tabs-list {
  margin: 0;
  padding-left: 0;
  width: 100%;
  text-align: left;
  border-bottom: 1px solid #ddd;
}
.Tabs-item {
  vertical-align: bottom;
  display: inline-block;
  padding: 0;
  margin: 0;
  margin-right: 1.25em;
}
.Tabs-item:before {
  content: none;
}
.Tabs-item.is-active .Tabs-link {
  color: #009fdf;
  border-bottom-color: #009fdf;
}
.Tabs-link {
  display: block;
  text-decoration: none;
  padding: 0.83333333em 0;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  word-wrap: normal !important;
  border-bottom: 3px solid transparent;
  color: #333;
}
.Tabs-link:hover {
  color: #009fdf;
  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;
}
.Teaser {
  position: relative;
  overflow: hidden;
}
.Teaser h4 {
  font-weight: bold;
}
.Teaser--small {
  height: 200px;
}
.Teaser--tall {
  height: 300px;
}
.Teaser--mobHigh {
  height: 300px;
}
.Teaser-content {
  padding: 0% 5%;
  z-index: 9;
}
.Teaser-item {
  padding: 0% 20% 0% 0% !important;
  z-index: 9;
}
.Teaser--contentBottom {
  position: absolute;
  bottom: 5px;
  z-index: 1;
  width: 100%;
}
.Teaser--contentBottom p {
  margin: 0.625em 0;
}
.Teaser--textInverted {
  color: #ffffff;
}
.Teaser--textInverted * {
  color: #ffffff;
}
.Teaser--textInverted a:hover {
  color: #ffffff;
}
.Teaser--contentMid {
  position: absolute;
  top: 20px;
  height: 100%;
}
.Teaser-social.Teaser--facebook {
  background-color: #3d5b97;
  color: #ffffff;
}
.Teaser-social.Teaser--facebook h6 {
  color: #ffffff;
}
.Teaser-social.Teaser--twitter {
  background-color: #1da1f2;
  color: #ffffff;
}
.Teaser-social.Teaser--twitter h6 {
  color: #ffffff;
}
.Teaser-social.Teaser--linkedin {
  background-color: #ffffff;
}
.Teaser-social img {
  float: left;
  margin-right: 15px;
}
.Teaser-social p {
  font-size: 1em;
}
.Teaser--lead .Teaser-content {
  padding: 5%;
  position: static;
}
.Teaser-bgImage {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
}
.Teaser-bgImage:after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 -210px 120px -70px rgba(0, 0, 0, 0.5);
  position: absolute;
  bottom: 0;
}
.Teaser-bgImage.BgOverlay:after {
  box-shadow: none;
}
.Teaser-bgImage.Teaser-bgImage--noShadow:after {
  box-shadow: none;
}
.Teaser-dateBox {
  background-color: #009fdf;
  color: #ffffff;
  text-align: center;
  padding: 5px 20px;
  margin-right: 1.25em;
}
.Teaser-dateBox span {
  display: block;
  font-size: 1em;
  font-weight: bold;
}
.Teaser-dateBox span:first-child {
  font-size: 1.5em;
}
.Teaser-category {
  height: 250px;
}
.Teaser-category .Teaser-content {
  z-index: 99;
}
.Teaser-author {
  position: absolute;
  bottom: 30px;
}
.Teaser-author .Teaser-authorImg {
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.83333333em;
}
.Teaser-author .Teaser-authorInfo {
  display: inline-block;
  vertical-align: middle;
  text-align: left;
}
.Teaser-author .Teaser-authorInfo h6 {
  margin-bottom: 0;
}
.Teaser--small{
  height: 299px;
}
.Teaser--small.Teaser-social{
  height: 269px;/*margin: 15px 0;*/
}
.Teaser--tall{
  height: 598px;
}
.Teaser-social p{
  font-size: 22px;
}
.Teaser--linkedin{
  height: 269px;
}
.Teaser-content{
  padding: 2% 5%;
}
.Teaser--contentBottom{
  bottom: 15px;
}
.Teaser-category{
  height: 340px;
}
.Teaser--contentMid{
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  padding-top: 50px;
}
.Teaser-author{
  bottom: 45px;
}
.Teaser a{
  position: relative;
  z-index: 800;
}
.Teaser a:hover .u-linkState{
  text-decoration: underline !important;
}
.Teaser > a{
  display: block;
  height: 100%;
}
.Testamonials-image {
  text-align: center;
  margin-bottom: 1.875em;
}
.Testamonials-image{
  text-align: right;
  margin-right: 1.875em;
  margin-bottom: 0;
}
.Testamonials-text {
  text-align: center;
}
.Testamonials-text{
  text-align: left;
}
/*#

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;
  filter: alpha(opacity=0);
  -webkit-animation: fade-in ease-in 0.3s 0.25s forwards;
          animation: fade-in ease-in 0.3s 0.25s forwards;
}
.Tooltip-content {
  display: block;
  font-size: 1.125em;
  color: #fff;
  background-color: #4d4d4d;
  padding: 0.625em;
}
.Tooltip-arrow {
  position: absolute;
  line-height: 0;
  border: 6px solid transparent;
}
.Tooltip--arrowN .Tooltip-arrow {
  border-bottom: 0;
  border-top-color: #4d4d4d;
  bottom: 0;
  left: 50%;
  margin-left: -5px;
}
.Tooltip--arrowS .Tooltip-arrow {
  border-bottom-color: #4d4d4d;
  border-top: 0;
  left: 50%;
  margin-left: -5px;
  top: 0;
}
.Tooltip--arrowW .Tooltip-arrow {
  border-left-color: #4d4d4d;
  border-right: 0;
  margin-top: -5px;
  right: 0;
  top: 50%;
}
.Tooltip--arrowE .Tooltip-arrow {
  border-left: 0;
  border-right-color: #4d4d4d;
  left: 0;
  margin-top: -5px;
  top: 50%;
}
.Tooltip--arrowNW .Tooltip-arrow {
  border-bottom: 0;
  border-left: 0;
  border-top-color: #4d4d4d;
  bottom: 0;
  left: 5px;
}
.Tooltip--arrowNE .Tooltip-arrow {
  border-bottom: 0;
  border-right: 0;
  border-top-color: #4d4d4d;
  bottom: 0;
  right: 5px;
}
.Tooltip--arrowSW .Tooltip-arrow {
  border-bottom-color: #4d4d4d;
  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: #4d4d4d;
  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);
    filter: alpha(opacity=0);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  to {
    filter: alpha(opacity=100);
  }
}
@keyframes fade-in {
  from {
    -webkit-transform: translateY(0.8em);
            transform: translateY(0.8em);
    filter: alpha(opacity=0);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  to {
    filter: alpha(opacity=100);
  }
}
/*#

<h4>Video</h4>
<div class="Video" data-module="Video" data-video="'videoType': 'video','videoUrl':'http://www.cloudreel.se/assets/CustomerData/Soederberg-Partners/KoncernInfo/214_HiresVideoFile_uni.mp4'">
    <div class="Video-play js-videoPlay">Play</div>
    <div class="Video-info">
        <h6>Titel</h6>
        <h3>Beskrivning</h3>
    </div>
    <div class="Video-poster">
        <div class="Video-posterImage" style="background-image: url('/Assets/Images/office-default.jpg')"></div>
    </div>
    <div class="Video-modal js-videoModal">
        <div class="Video-modalContainer">
            <div class="Video-media js-videoMedia"></div>
        </div>
    </div>
</div>
<br>
<h4>iFrame</h4>
<div class="Video" data-module="Video" data-video="'videoType': 'iframe','videoUrl':'laasoy84YLY'">
    <div class="Video-play js-videoPlay">Play</div>
    <div class="Video-info">
        <h6>Titel</h6>
        <h3>Beskrivning</h3>
    </div>
    <div class="Video-poster">
        <div class="Video-posterImage" style="background-image: url('/Assets/Images/office-default.jpg')"></div>
    </div>
    <div class="Video-modal js-videoModal">
        <div class="Video-modalContainer">
            <div class="Video-media js-videoMedia"></div>
        </div>
    </div>
</div>

*/
.Video {
  position: relative;
}
.Video.is-active .Video-modal {
  filter: alpha(opacity=100);
  visibility: visible;
}
.Video-play {
  position: absolute;
  width: 80px;
  height: 80px;
  line-height: 80px;
  border-radius: 50%;
  border: 2px solid #fff;
  text-align: center;
  background: #000000;
  color: #fff;
  cursor: pointer;
  z-index: 2;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.Video-play{
  width: 100px;
  height: 100px;
  line-height: 100px;
}
.Video-poster {
  position: relative;
}
.Video-poster:after {
  content: '';
  display: block;
  padding-bottom: 56.25%;
}
.Video-posterImage {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-size: cover;
  background-position: center;
}
.Video-info {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 0.625em 1.25em 0 1.25em;
  color: #fff;
  box-shadow: inset 0px -100px 100px -80px #000;
  z-index: 1;
}
.Video-info{
  padding: 1.875em 2.5em;
}
.Video-info * {
  font-weight: normal;
  color: #fff;
}
.Video-modal {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 9999;
  background: #000000;
  overflow: auto;
  filter: alpha(opacity=0);
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
.Video-modalContainer {
  max-width: 1605px;
  width: 100%;
  max-height: 100%;
  padding: 1.25em 3.125em;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.Video-media {
  position: absolute;
}
.Video-media{
  position: relative;
}
.Video-media:after {
  content: '';
  display: block;
  padding-bottom: 56.25%;
}
.Video-media * {
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100% !important;
  width: 100% !important;
}
.Teaser--tall .Push .Video{
  max-height: 598px;
}
.Push .Video{
  max-height: 700px;
}
aside {
  width: 100%;
}
aside{
  position: relative;
  left: 0.83333333em;
}
/*#

Component for the footer section.

Examples:

<div>
    <footer class="Footer">
        <div class="Page-container">
            <nav class="PageNav PageNav--horizontal Footer-nav">
                <ul class="PageNav-list">
                    <li class="PageNav-item">
                        <a href="#" class="PageNav-itemLink is-active">Frontend Docs</a>
                    </li>
                    <li class="PageNav-item">
                        <a href="#" class="PageNav-itemLink">Backend Docs</a>
                    </li>
                    <li class="PageNav-item">
                        <a href="#" class="PageNav-itemLink">About Encore</a>
                    </li>
                </ul>
            </nav>

            <div class="Footer-logo">
                <a href="#"><img src="/assets/images/logo/nansen-encore.png" class="Header-logoImage" width="160" /></a>
            </div>
        </div>
    </footer>  
</div>

*/
.Footer {
  background: #fff;
  border-top: 1px solid #e7e7e7;
  margin-top: 2.5em;
  text-align: center;
  padding-top: 0;
}
.Footer-primaryContent {
  max-width: 1605px;
  margin: 0 auto;
  display: block;
  text-align: center;
}
.Footer-nav {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  text-align: left;
  font-size: 1em;
}
.PageNav--horizontal.Footer-nav .PageNav-item {
  display: block;
  width: 100%;
  text-align: center;
}
.Footer{
  padding-bottom: 2.5em;
}
.Footer-primaryContent{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-top: 1px solid #d0d0d0;
  margin-top: 1.875em;
  margin-bottom: 1.875em;
  padding-top: 1.25em;
  padding-bottom: 1.25em;
  border-bottom: 1px dotted #e3e3e3;
}
.PageNav--horizontal.Footer-nav .PageNav-item{
  display: inline-block;
  text-align: left;
  width: auto;
}
.Footer-logo{
  margin-right: 1.875em;
}
.Footer-nav{
  text-align: center;
}
.Footer-nav .PageNav-item{
  display: block;
  width: 100%;
}
/*#

Component for the header section.

Examples:

<div>
    <header class="Header">
        <div class="Header-secondary">
            <div class="Page-container">
                <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">Contribute</a>
                        </li>
                        <li class="PageNav-item">
                            <a href="#" class="PageNav-itemLink">About</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>

        <div class="Header-primary">
            <div class="Page-container Header-primaryContainer">
                <div class="Header-logo">
                    <a href="#"><img src="/assets/images/logo/nansen-encore.png" class="Header-logoImage" width="160" /></a>
                </div>

                <nav class="PageNav PageNav--horizontal PageNav--large Header-primaryNav">
                    <ul class="PageNav-list">
                        <li class="PageNav-item">
                            <a href="#" class="PageNav-itemLink is-active">Frontend Docs</a>
                        </li>
                        <li class="PageNav-item">
                            <a href="#" class="PageNav-itemLink">Backend Docs</a>
                        </li>
                        <li class="PageNav-item">
                            <a href="#" class="PageNav-itemLink">About Encore</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>
</div>

*/
.Header {
  border-top: 4px solid #002d72;
  border-bottom: 1px solid #d0d0d0;
  width: 100%;
  background: #ffffff;
  position: fixed;
  display: block;
  min-height: 90px;
  z-index: 999;
}
.Header-logo {
  text-align: center;
}
.Header-secondary {
  padding: 0 1.25em;
  background: #ffffff;
  text-align: right;
}
.Header-primary {
  padding: 1.375em 1.25em;
}
.Header-primaryContainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.Header-primaryContainer{
  padding-bottom: 55px;
}
.Header-primaryContainer > * {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}
.Header-secondaryContainer.is-active {
  border-top: 1px solid #d0d0d0;
  position: fixed;
  height: 100%;
  top: 0;
  background-color: #fff;
}
.Header-secondaryContainer.is-active{
  position: absolute;
  height: calc(100% - 99px);
}
.Header-primaryNav {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  text-align: right;
  position: absolute;
  top: 80px;
  left: 0;
  right: 0;
}
.Header-secondaryNav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
.Toolbar {
  text-align: right;
}
.Toolbar-languageFlag,
.Toolbar-languageTrigger {
  display: inline-block;
}
.Toolbar-languageTrigger {
  margin-left: 5px;
  width: 15px;
  height: 8px;
  background: url('/Assets/Icons/chevron_down.svg') 0 0 no-repeat;
}
.Toolbar-languageTrigger.is-active {
  background: url('/Assets/Icons/chevron_up_blue.svg') 0 0 no-repeat;
}
.Toolbar-mobile {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.Header{
  position: relative;
  z-index: 9999;
  min-height: 100%;
}
.Header-primary{
  padding-bottom: 0;
  position: static;
  padding: 0 1.25em;
}
.Header-logo{
  text-align: left;
}
.Header-primaryContainer > *{
  -webkit-box-flex: 1;
  -ms-flex: auto;
  flex: auto;
}
.Header-secondaryContainer{
  position: absolute;
  background: #fff;
  z-index: 999;
  width: 100%;
  box-shadow: 0px 18px 15px -20px rgba(0, 0, 0, 0.55);
  -webkit-box-shadow: 0px 18px 15px -20px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0px 18px 15px -20px rgba(0, 0, 0, 0.25);
  -o-box-shadow: 0px 18px 15px -20px rgba(0, 0, 0, 0.25);
}
.Header-secondaryNav{
  max-width: 1605px;
  width: 100%;
  padding: 20px 3.125em 0;
  margin: 0 auto;
  transition: .3s opacity ease;
  filter: alpha(opacity=0);
}
.Header-secondaryNav.is-active{
  filter: alpha(opacity=100);
}
.Header-secondaryNav a{
  font-weight: bold;
}
.Header-secondaryNav a:hover{
  text-decoration: none !important;
  color: grey;
}
.Header-secondaryNav a.is-active{
  border-bottom: 4px solid #009fdf;
  padding-bottom: 2px;
}
.Header-secondaryNav h6{
  font-weight: normal;
}
.Header-primarySearch,
  .Toolbar-language{
  cursor: pointer;
}
/*#

Component for containing the entire page. Useful for setting page wide styling.  
It also has a .Page-container that is used for containing the site within the max-width.

*/
.Page {
  padding: 0;
}
.Page.is-active {
  overflow: hidden;
  position: fixed;
  width: 100%;
}
.Page-container {
  max-width: 1605px;
  margin-left: auto;
  margin-right: auto;
  background-color: #ffffff;
}
.Page-container.Page-container--small {
  max-width: 1200px;
}
.Page-container.Page-container--spacing {
  margin-bottom: 4em;
  padding-top: 0;
}
.Page-container.Page-container--spacing{
  margin-bottom: 5em;
  padding-top: 5em;
  padding-bottom: 3em;
}
.Page-main {
  padding: 0 1.25em;
  padding-top: 90px;
  background: #fff;
}
.Page-main{
  background: transparent;
  padding: 0;
}
.Page-main.is-active{
  filter: alpha(opacity=30) !important;
}
.Page-main.is-active:before{
  display: block;
  content: "";
  position: fixed;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 999;
}
/*Used outside of Page-container to flow wide*/
.Page-section {
  width: 100%;
  max-width: 1605px;
  margin-left: auto;
  margin-right: auto;
}
.Page-main{
  padding-top: 0;
}
.Header-primary .Page-container{
  padding: 0;
}
.Page-container{
  padding: 1.25em 3.125em;
}
.Page-container.Page-container--noPadding{
  padding: 0;
}
.Page-container.Page-container--noBg{
  background-color: transparent;
}
/**
 * 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-alignSelfMid {
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
}
.u-alignContentMid {
  -ms-flex-line-pack: center;
      align-content: center;
}
.u-alignItemsMid {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.u-alignJustifyMid {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.u-alignContentScatter {
  height: 100%;
  -ms-flex-line-pack: justify;
      align-content: space-between;
}
.u-outerGrid {
  margin-left: -3.125em;
  margin-right: -3.125em;
  width: 103.125%;
}
.u-breakGrid {
  margin-left: -20px;
  margin-right: -20px;
}
.u-breakGrid{
  width: calc(100% + 6.25em);/*less calc escaped string */
  max-width: none;
  margin-left: -3.125em;
  margin-right: 0;
}
.u-breakGrid--multiCol{
  width: calc(100% + 3.25em);/*less calc escaped string */
}
.u-breakRightCorner{
  position: relative;
  left: 10px;
  top: -10px;
  padding: 0 !important;
}
.u-breakRightCorner img{
  height: calc(100% + 1.25em);
  width: calc(100% + 30px);
  max-width: none;
}
/*USE WITH CAUTION*/
.u-ArticleBreakFull{
  width: calc(100% + 6.25em);
  margin-left: -3.125em;
  padding: 2.25em 0;
  background-color: #f3f3f3;
}
.u-ArticleBreakFull{
  width: calc(100% + 15.25em);
  margin-left: -12.125em;
  padding: 2.25em 0;
  background-color: #f3f3f3;
}
/**
* Add classes for common colors.
*/
.u-colorText {
  color: #333;
}
.u-colorTextLight {
  color: #aaa;
}
.u-colorBlue {
  color: #009fdf;
}
.u-colorWhite * {
  color: #fff !important;
}
.u-colorBlack * {
  color: #000 !important;
}
.u-colorBgWhite {
  background-color: #fff !important;
}
/* 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-visibilityHidden {
  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;
}
.is-no-flexbox .u-flex {
  display: inline-block !important;
}
/**
* Show/hide depending on Media Query breakpoints. 
*/
.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;
}
.is-no-flexbox .u-xsm-flex{
  display: inline-block !important;
}
.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;
}
.is-no-flexbox .u-sm-flex{
  display: inline-block !important;
}
.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;
}
.is-no-flexbox .u-md-flex{
  display: inline-block !important;
}
.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;
}
.is-no-flexbox .u-lg-flex{
  display: inline-block !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: #333;
}
.u-cursorPointer {
  cursor: pointer;
}
/* 
 * 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;
}
/**
 * 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;
}
/*
    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-sizeFull,
.u-size1of1 {
  width: 100% !important;
}
.u-sizeAuto {
  width: auto !important;
}
/**
 * Size utilities
 * .u-size1of4
 * .u-sm-size1of4
 */
/* Intrinsic widths
   ========================================================================== */
/**
     * Make an element the width of its parent.
     */
.u-sizeFull,
.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;
}
/* Proportional widths
       ========================================================================== */
/**
     * Specify the proportional width of an object.
     * Intentional redundancy build into each set of unit classes.
     * Supports: 2, 3, 4, 5, 6, 8, 10, 12 part
     *
     * 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-size1of12 {
  width: 8.33333333% !important;
}
.u-size1of10 {
  width: 10% !important;
}
.u-size1of8 {
  width: 12.5% !important;
}
.u-size1of6,
.u-size2of12 {
  width: 16.66666667% !important;
}
.u-size1of5,
.u-size2of10 {
  width: 20% !important;
}
.u-size1of4,
.u-size2of8,
.u-size3of12 {
  width: 25% !important;
}
.u-size3of10 {
  width: 30% !important;
}
.u-size1of3,
.u-size2of6,
.u-size4of12 {
  width: 33.33333333% !important;
}
.u-size3of8 {
  width: 37.5% !important;
}
.u-size2of5,
.u-size4of10 {
  width: 40% !important;
}
.u-size5of12 {
  width: 41.66666667% !important;
}
.u-size1of2,
.u-size2of4,
.u-size3of6,
.u-size4of8,
.u-size5of10,
.u-size6of12 {
  width: 50% !important;
}
.u-size7of12 {
  width: 58.33333333% !important;
}
.u-size3of5,
.u-size6of10 {
  width: 60% !important;
}
.u-size5of8 {
  width: 62.5% !important;
}
.u-size2of3,
.u-size4of6,
.u-size8of12 {
  width: 66.66666667% !important;
}
.u-size7of10 {
  width: 70% !important;
}
.u-size3of4,
.u-size6of8,
.u-size9of12 {
  width: 75% !important;
}
.u-size4of5,
.u-size8of10 {
  width: 80% !important;
}
.u-size5of6,
.u-size10of12 {
  width: 83.33333333% !important;
}
.u-size7of8 {
  width: 87.5% !important;
}
.u-size6of9 {
  width: 66.66666667% !important;
}
.u-size3of9 {
  width: 33.33333333% !important;
}
.u-size9of10 {
  width: 90% !important;
}
.u-size11of12 {
  width: 91.66666667% !important;
}
/* Intrinsic widths
   ========================================================================== */
/**
     * Make an element the width of its parent.
     */
.u-xsm-sizeFull,
  .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;
}
/* Proportional widths
       ========================================================================== */
/**
     * Specify the proportional width of an object.
     * Intentional redundancy build into each set of unit classes.
     * Supports: 2, 3, 4, 5, 6, 8, 10, 12 part
     *
     * 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-size1of12{
  width: 8.33333333% !important;
}
.u-xsm-size1of10{
  width: 10% !important;
}
.u-xsm-size1of8{
  width: 12.5% !important;
}
.u-xsm-size1of6,
  .u-xsm-size2of12{
  width: 16.66666667% !important;
}
.u-xsm-size1of5,
  .u-xsm-size2of10{
  width: 20% !important;
}
.u-xsm-size1of4,
  .u-xsm-size2of8,
  .u-xsm-size3of12{
  width: 25% !important;
}
.u-xsm-size3of10{
  width: 30% !important;
}
.u-xsm-size1of3,
  .u-xsm-size2of6,
  .u-xsm-size4of12{
  width: 33.33333333% !important;
}
.u-xsm-size3of8{
  width: 37.5% !important;
}
.u-xsm-size2of5,
  .u-xsm-size4of10{
  width: 40% !important;
}
.u-xsm-size5of12{
  width: 41.66666667% !important;
}
.u-xsm-size1of2,
  .u-xsm-size2of4,
  .u-xsm-size3of6,
  .u-xsm-size4of8,
  .u-xsm-size5of10,
  .u-xsm-size6of12{
  width: 50% !important;
}
.u-xsm-size7of12{
  width: 58.33333333% !important;
}
.u-xsm-size3of5,
  .u-xsm-size6of10{
  width: 60% !important;
}
.u-xsm-size5of8{
  width: 62.5% !important;
}
.u-xsm-size2of3,
  .u-xsm-size4of6,
  .u-xsm-size8of12{
  width: 66.66666667% !important;
}
.u-xsm-size7of10{
  width: 70% !important;
}
.u-xsm-size3of4,
  .u-xsm-size6of8,
  .u-xsm-size9of12{
  width: 75% !important;
}
.u-xsm-size4of5,
  .u-xsm-size8of10{
  width: 80% !important;
}
.u-xsm-size5of6,
  .u-xsm-size10of12{
  width: 83.33333333% !important;
}
.u-xsm-size7of8{
  width: 87.5% !important;
}
.u-xsm-size6of9{
  width: 66.66666667% !important;
}
.u-xsm-size3of9{
  width: 33.33333333% !important;
}
.u-xsm-size9of10{
  width: 90% !important;
}
.u-xsm-size11of12{
  width: 91.66666667% !important;
}
/* Intrinsic widths
   ========================================================================== */
/**
     * Make an element the width of its parent.
     */
.u-sm-sizeFull,
  .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;
}
/* Proportional widths
       ========================================================================== */
/**
     * Specify the proportional width of an object.
     * Intentional redundancy build into each set of unit classes.
     * Supports: 2, 3, 4, 5, 6, 8, 10, 12 part
     *
     * 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-size1of12{
  width: 8.33333333% !important;
}
.u-sm-size1of10{
  width: 10% !important;
}
.u-sm-size1of8{
  width: 12.5% !important;
}
.u-sm-size1of6,
  .u-sm-size2of12{
  width: 16.66666667% !important;
}
.u-sm-size1of5,
  .u-sm-size2of10{
  width: 20% !important;
}
.u-sm-size1of4,
  .u-sm-size2of8,
  .u-sm-size3of12{
  width: 25% !important;
}
.u-sm-size3of10{
  width: 30% !important;
}
.u-sm-size1of3,
  .u-sm-size2of6,
  .u-sm-size4of12{
  width: 33.33333333% !important;
}
.u-sm-size3of8{
  width: 37.5% !important;
}
.u-sm-size2of5,
  .u-sm-size4of10{
  width: 40% !important;
}
.u-sm-size5of12{
  width: 41.66666667% !important;
}
.u-sm-size1of2,
  .u-sm-size2of4,
  .u-sm-size3of6,
  .u-sm-size4of8,
  .u-sm-size5of10,
  .u-sm-size6of12{
  width: 50% !important;
}
.u-sm-size7of12{
  width: 58.33333333% !important;
}
.u-sm-size3of5,
  .u-sm-size6of10{
  width: 60% !important;
}
.u-sm-size5of8{
  width: 62.5% !important;
}
.u-sm-size2of3,
  .u-sm-size4of6,
  .u-sm-size8of12{
  width: 66.66666667% !important;
}
.u-sm-size7of10{
  width: 70% !important;
}
.u-sm-size3of4,
  .u-sm-size6of8,
  .u-sm-size9of12{
  width: 75% !important;
}
.u-sm-size4of5,
  .u-sm-size8of10{
  width: 80% !important;
}
.u-sm-size5of6,
  .u-sm-size10of12{
  width: 83.33333333% !important;
}
.u-sm-size7of8{
  width: 87.5% !important;
}
.u-sm-size6of9{
  width: 66.66666667% !important;
}
.u-sm-size3of9{
  width: 33.33333333% !important;
}
.u-sm-size9of10{
  width: 90% !important;
}
.u-sm-size11of12{
  width: 91.66666667% !important;
}
/* Intrinsic widths
   ========================================================================== */
/**
     * Make an element the width of its parent.
     */
.u-md-sizeFull,
  .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;
}
/* Proportional widths
       ========================================================================== */
/**
     * Specify the proportional width of an object.
     * Intentional redundancy build into each set of unit classes.
     * Supports: 2, 3, 4, 5, 6, 8, 10, 12 part
     *
     * 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-size1of12{
  width: 8.33333333% !important;
}
.u-md-size1of10{
  width: 10% !important;
}
.u-md-size1of8{
  width: 12.5% !important;
}
.u-md-size1of6,
  .u-md-size2of12{
  width: 16.66666667% !important;
}
.u-md-size1of5,
  .u-md-size2of10{
  width: 20% !important;
}
.u-md-size1of4,
  .u-md-size2of8,
  .u-md-size3of12{
  width: 25% !important;
}
.u-md-size3of10{
  width: 30% !important;
}
.u-md-size1of3,
  .u-md-size2of6,
  .u-md-size4of12{
  width: 33.33333333% !important;
}
.u-md-size3of8{
  width: 37.5% !important;
}
.u-md-size2of5,
  .u-md-size4of10{
  width: 40% !important;
}
.u-md-size5of12{
  width: 41.66666667% !important;
}
.u-md-size1of2,
  .u-md-size2of4,
  .u-md-size3of6,
  .u-md-size4of8,
  .u-md-size5of10,
  .u-md-size6of12{
  width: 50% !important;
}
.u-md-size7of12{
  width: 58.33333333% !important;
}
.u-md-size3of5,
  .u-md-size6of10{
  width: 60% !important;
}
.u-md-size5of8{
  width: 62.5% !important;
}
.u-md-size2of3,
  .u-md-size4of6,
  .u-md-size8of12{
  width: 66.66666667% !important;
}
.u-md-size7of10{
  width: 70% !important;
}
.u-md-size3of4,
  .u-md-size6of8,
  .u-md-size9of12{
  width: 75% !important;
}
.u-md-size4of5,
  .u-md-size8of10{
  width: 80% !important;
}
.u-md-size5of6,
  .u-md-size10of12{
  width: 83.33333333% !important;
}
.u-md-size7of8{
  width: 87.5% !important;
}
.u-md-size6of9{
  width: 66.66666667% !important;
}
.u-md-size3of9{
  width: 33.33333333% !important;
}
.u-md-size9of10{
  width: 90% !important;
}
.u-md-size11of12{
  width: 91.66666667% !important;
}
/* Intrinsic widths
   ========================================================================== */
/**
     * Make an element the width of its parent.
     */
.u-lg-sizeFull,
  .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;
}
/* Proportional widths
       ========================================================================== */
/**
     * Specify the proportional width of an object.
     * Intentional redundancy build into each set of unit classes.
     * Supports: 2, 3, 4, 5, 6, 8, 10, 12 part
     *
     * 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-size1of12{
  width: 8.33333333% !important;
}
.u-lg-size1of10{
  width: 10% !important;
}
.u-lg-size1of8{
  width: 12.5% !important;
}
.u-lg-size1of6,
  .u-lg-size2of12{
  width: 16.66666667% !important;
}
.u-lg-size1of5,
  .u-lg-size2of10{
  width: 20% !important;
}
.u-lg-size1of4,
  .u-lg-size2of8,
  .u-lg-size3of12{
  width: 25% !important;
}
.u-lg-size3of10{
  width: 30% !important;
}
.u-lg-size1of3,
  .u-lg-size2of6,
  .u-lg-size4of12{
  width: 33.33333333% !important;
}
.u-lg-size3of8{
  width: 37.5% !important;
}
.u-lg-size2of5,
  .u-lg-size4of10{
  width: 40% !important;
}
.u-lg-size5of12{
  width: 41.66666667% !important;
}
.u-lg-size1of2,
  .u-lg-size2of4,
  .u-lg-size3of6,
  .u-lg-size4of8,
  .u-lg-size5of10,
  .u-lg-size6of12{
  width: 50% !important;
}
.u-lg-size7of12{
  width: 58.33333333% !important;
}
.u-lg-size3of5,
  .u-lg-size6of10{
  width: 60% !important;
}
.u-lg-size5of8{
  width: 62.5% !important;
}
.u-lg-size2of3,
  .u-lg-size4of6,
  .u-lg-size8of12{
  width: 66.66666667% !important;
}
.u-lg-size7of10{
  width: 70% !important;
}
.u-lg-size3of4,
  .u-lg-size6of8,
  .u-lg-size9of12{
  width: 75% !important;
}
.u-lg-size4of5,
  .u-lg-size8of10{
  width: 80% !important;
}
.u-lg-size5of6,
  .u-lg-size10of12{
  width: 83.33333333% !important;
}
.u-lg-size7of8{
  width: 87.5% !important;
}
.u-lg-size6of9{
  width: 66.66666667% !important;
}
.u-lg-size3of9{
  width: 33.33333333% !important;
}
.u-lg-size9of10{
  width: 90% !important;
}
.u-lg-size11of12{
  width: 91.66666667% !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-marginAuto {
  margin: auto !important;
}
.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-marginAxsm {
  margin: 0.625em !important;
}
.u-marginAsm {
  margin: 0.83333333em !important;
}
.u-marginAmd,
.u-marginA {
  margin: 1.25em !important;
}
.u-marginAlg {
  margin: 1.875em !important;
}
.u-marginAxlg {
  margin: 2.5em !important;
}
.u-marginHxsm {
  margin-left: 0.625em !important;
  margin-right: 0.625em !important;
}
.u-marginHsm {
  margin-left: 0.83333333em !important;
  margin-right: 0.83333333em !important;
}
.u-marginHmd,
.u-marginH {
  margin-left: 1.25em !important;
  margin-right: 1.25em !important;
}
.u-marginHlg {
  margin-left: 1.875em !important;
  margin-right: 1.875em !important;
}
.u-marginHxlg {
  margin-left: 2.5em !important;
  margin-right: 2.5em !important;
}
.u-marginVxsm {
  margin-top: 0.625em !important;
  margin-bottom: 0.625em !important;
}
.u-marginVsm {
  margin-top: 0.83333333em !important;
  margin-bottom: 0.83333333em !important;
}
.u-marginVmd,
.u-marginV {
  margin-top: 1.25em !important;
  margin-bottom: 1.25em !important;
}
.u-marginVlg {
  margin-top: 1.875em !important;
  margin-bottom: 1.875em !important;
}
.u-marginVxlg {
  margin-top: 2.5em !important;
  margin-bottom: 2.5em !important;
}
.u-marginTxsm {
  margin-top: 0.625em !important;
}
.u-marginTsm {
  margin-top: 0.83333333em !important;
}
.u-marginTmd,
.u-marginT {
  margin-top: 1.25em !important;
}
.u-marginTlg {
  margin-top: 1.875em !important;
}
.u-marginTxlg {
  margin-top: 2.5em !important;
}
.u-marginBxsm {
  margin-bottom: 0.625em !important;
}
.u-marginBsm {
  margin-bottom: 0.83333333em !important;
}
.u-marginBmd,
.u-marginB {
  margin-bottom: 1.25em !important;
}
.u-marginBlg {
  margin-bottom: 1.875em !important;
}
.u-marginBxlg {
  margin-bottom: 2.5em !important;
}
.u-marginRxsm {
  margin-right: 0.625em !important;
}
.u-marginRsm {
  margin-right: 0.83333333em !important;
}
.u-marginRmd,
.u-marginR {
  margin-right: 1.25em !important;
}
.u-marginRlg {
  margin-right: 1.875em !important;
}
.u-marginRxlg {
  margin-right: 2.5em !important;
}
.u-marginLxsm {
  margin-left: 0.625em !important;
}
.u-marginLsm {
  margin-left: 0.83333333em !important;
}
.u-marginLmd,
.u-marginL {
  margin-left: 1.25em !important;
}
.u-marginLlg {
  margin-left: 1.875em !important;
}
.u-marginLxlg {
  margin-left: 2.5em !important;
}
/** 
 * Paddings, .u-padding{direction}{size}
 */
.u-paddingSpTeaser {
  padding: 5%;
}
.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.625em !important;
}
.u-paddingAsm {
  padding: 0.83333333em !important;
}
.u-paddingAmd,
.u-paddingA {
  padding: 1.25em !important;
}
.u-paddingAlg {
  padding: 1.875em !important;
}
.u-paddingAxlg {
  padding: 2.5em !important;
}
.u-paddingHxsm {
  padding-left: 0.625em !important;
  padding-right: 0.625em !important;
}
.u-paddingHsm {
  padding-left: 0.83333333em !important;
  padding-right: 0.83333333em !important;
}
.u-paddingHmd,
.u-paddingH {
  padding-left: 1.25em !important;
  padding-right: 1.25em !important;
}
.u-paddingHlg {
  padding-left: 1.875em !important;
  padding-right: 1.875em !important;
}
.u-paddingHxlg {
  padding-left: 2.5em !important;
  padding-right: 2.5em !important;
}
.u-paddingVxsm {
  padding-top: 0.625em !important;
  padding-bottom: 0.625em !important;
}
.u-paddingVsm {
  padding-top: 0.83333333em !important;
  padding-bottom: 0.83333333em !important;
}
.u-paddingVmd,
.u-paddingV {
  padding-top: 1.25em !important;
  padding-bottom: 1.25em !important;
}
.u-paddingVlg {
  padding-top: 1.875em !important;
  padding-bottom: 1.875em !important;
}
.u-paddingVxlg {
  padding-top: 2.5em !important;
  padding-bottom: 2.5em !important;
}
.u-paddingTxsm {
  padding-top: 0.625em !important;
}
.u-paddingTsm {
  padding-top: 0.83333333em !important;
}
.u-paddingTmd,
.u-paddingT {
  padding-top: 1.25em !important;
}
.u-paddingTlg {
  padding-top: 1.875em !important;
}
.u-paddingTxlg {
  padding-top: 2.5em !important;
}
.u-paddingBxsm {
  padding-bottom: 0.625em !important;
}
.u-paddingBsm {
  padding-bottom: 0.83333333em !important;
}
.u-paddingBmd,
.u-paddingB {
  padding-bottom: 1.25em !important;
}
.u-paddingBlg {
  padding-bottom: 1.875em !important;
}
.u-paddingBxlg {
  padding-bottom: 2.5em !important;
}
.u-paddingRxsm {
  padding-right: 0.625em !important;
}
.u-paddingRsm {
  padding-right: 0.83333333em !important;
}
.u-paddingRmd,
.u-paddingR {
  padding-right: 1.25em !important;
}
.u-paddingRlg {
  padding-right: 1.875em !important;
}
.u-paddingRxlg {
  padding-right: 2.5em !important;
}
.u-paddingLxsm {
  padding-left: 0.625em !important;
}
.u-paddingLsm {
  padding-left: 0.83333333em !important;
}
.u-paddingLmd,
.u-paddingL {
  padding-left: 1.25em !important;
}
.u-paddingLlg {
  padding-left: 1.875em !important;
}
.u-paddingLxlg {
  padding-left: 2.5em !important;
}
/** 
 * Collapsing margins
 * Negative margins to pull content beyond paddings, using e.g. margin-top: -1em;
 */
.u-pullHxsm {
  margin-left: -0.625em !important;
  margin-right: -0.625em !important;
}
.u-pullHsm {
  margin-left: -0.83333333em !important;
  margin-right: -0.83333333em !important;
}
.u-pullHmd,
.u-pullH {
  margin-left: -1.25em !important;
  margin-right: -1.25em !important;
}
.u-pullHlg {
  margin-left: -1.875em !important;
  margin-right: -1.875em !important;
}
.u-pullHxlg {
  margin-left: -2.5em !important;
  margin-right: -2.5em !important;
}
.u-pullVxsm {
  margin-top: -0.625em !important;
  margin-bottom: -0.625em !important;
}
.u-pullVsm {
  margin-top: -0.83333333em !important;
  margin-bottom: -0.83333333em !important;
}
.u-pullVmd,
.u-pullV {
  margin-top: -1.25em !important;
  margin-bottom: -1.25em !important;
}
.u-pullVlg {
  margin-top: -1.875em !important;
  margin-bottom: -1.875em !important;
}
.u-pullVxlg {
  margin-top: -2.5em !important;
  margin-bottom: -2.5em !important;
}
.u-pullTxsm {
  margin-top: -0.625em;
}
.u-pullTsm {
  margin-top: -0.83333333em;
}
.u-pullTmd,
.u-pullT {
  margin-top: -1.25em;
}
.u-pullTlg {
  margin-top: -1.875em;
}
.u-pullTxlg {
  margin-top: -2.5em;
}
/**
 * Mixins used to generate classes.
 */
/* stylelint-enable */
/**
 * Text font size.
 */
.u-textXSmall {
  font-size: 1.125em !important;
}
.u-textSmall {
  font-size: 1.25em !important;
}
.u-textMedium,
.u-textNormal {
  font-size: 2em !important;
}
.u-textLarge {
  font-size: 2.5em !important;
}
.u-textXLarge {
  font-size: 3.5em !important;
}
/**
 * Text font weights
 */
.u-textWeightThin {
  font-weight: 100 !important;
}
.u-textWeightLight {
  font-weight: 200 !important;
}
.u-textWeightNormal {
  font-weight: normal !important;
}
.u-textWeightMedium {
  font-weight: 500 !important;
}
.u-textWeightHeavy {
  font-weight: 600 !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-textCenter ul li {
  text-align: left;
}
.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.
 * 2. Fix for IE 8/9 if `word-wrap: break-word` is in effect on ancestor
 *    nodes.
 */
.u-textTruncate {
  max-width: 100%;
  /* 1 */
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  word-wrap: normal !important;
  /* 2 */
}
/*
 * Inherit the ancestor's text color.
 */
.u-textInheritColor {
  color: inherit !important;
}
.u-border {
  border: 1px solid #dddddd;
}
.u-textUppercase {
  text-transform: uppercase;
}
.u-textNoUnderline:hover {
  text-decoration: none;
}
.u-textLargeNum {
  font-size: 68px;
  font-weight: 900;
}
/**
 * Vertical alignment utilities
 * Depends on an appropriate `display` value.
 */
.u-showHide {
  display: none !important;
}
.u-showHide.is-active {
  display: block !important;
}
