@charset "UTF-8";
/*!
 * Standard Styles v1.0.0 - (c) artif GmbH & Co. KG
 *
 * Keep the code clean:
 * - Remove unused directives and useless comments. Preserve tab indention.
 * - Think!
 * - Distinguish between block of different levels with different numbers of
 * empty lines. Mayor blocks three, inferior block two ...
 * - Document what you are doing. Comments are your friend.
 * - In general: Optimize readability for humans. Source optimization is done by
 * TYPO3 or other helpers.
 * - Prefer relative dimensions ('em' and '%') to static dimensions ('px'), but
 * think about your decision!
 * - Do not ever use IDs in your CSS
 * - Keep the selector specifity LOW! One level down maximum is preferred, e.g.
 * '.selector .selector', one selector only is best. This would be too much:
 * '.selector .selector .selector'
 * - Keep a BEM-inspired style: '.blockOne', '.blockOne__element',
 * '.blockOne--modifier' .. and JS seperate: '.js-functionality'
 * - See https://en.bem.info/methodology/ for more information
 */

/*
 * GLOBALS
 */
html {
  color: #000;
  background: #fff;
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  font-weight: 300;
  font-size: 100%;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}


/*
 * Box-model
 *
 * "Ugh. If I say the width is 200px, gosh darn it, it's gonna be a 200px wide
 * box even if I have 20px of padding." - Paul Irish
 *
 * Sources:
 * - http://www.paulirish.com/2012/box-sizing-border-box-ftw/
 * - http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
 */
html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

*, *:before, *:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}


/*
 * Headings
 *
 * When we define a headering we also define a corresponding class to go with it.
 * This allows us to apply, say, class="alpha" to a h3; a double-stranded
 * headering hierarchy.
 * Source: csswizardry.com/2012/02/pragmatic-practical-font-sizing-in-css
 */
h1, .alpha,
h2, .beta,
h3, .gamma,
h4, .delta,
h5, .epsilon,
h6, .zeta {
  color: inherit;
  line-height: 1.1;
  font-weight: 500; /* @TODO: Should be 400, but there's no difference between 300 and 400. Why? */
}

h1, .alpha {
  font-size: 2.75rem;
}

h2, .beta {
  font-size: 1.75rem;
}

h3, .gamma {
  font-size: 1.5rem;
}

h4, .delta {
  font-size: 1.25rem;
}

h5, .epsilon {
  font-size: 1rem;
}

h6, .zeta {
}


/*
 * Media
 */
img,
video {
  max-width: 100%;
  height: auto;
}

video {
  outline:none;
  cursor: pointer;
}


iframe {
  max-width: 100%;
}


/*
 * Lists
 */
ul,
.list-style-arrow {
  list-style: none;
  padding-left: 1rem;
}

ul,
.list-style-arrow--grey {
  list-style-image: url("../Images/list/list-arrow.png");
}

.color-white ul,
.color-white .list-style-arrow,
.color-white .list-style-arrow--grey,
.list-style-arrow--white {
  list-style-image: url("../Images/list/list-arrow--white.png");
}

ol {
}

li {
  padding-left: .5rem;
  margin-bottom: .5rem;
}

/* Remove unnecessary margins for nested lists */
ul ul,
ol ol {
  margin-bottom: 0;
}


/*
 * Quotes
 */
blockquote {
}

blockquote p {
}

cite {
}


/*
 * Tables
 */
table {
  margin: auto;
  border-collapse: collapse;
  overflow-x: auto;
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
}

@media (min-width: 640px) {
  table {
    display: table;
  }
}

caption {
}

tr {
}

th {
}

td {
}

.ce-uploads__table {
  width: 100%;
}

.ce-uploads__table-cell {
  border-top: 1px solid #d0dae3;
  padding: 0.5rem 0 .5rem .5rem;
  text-align: center;
  vertical-align: top;
}

.ce-uploads__table-cell:first-child {
  padding-left: 0;
}

@media (min-width: 540px) {
  .ce-uploads__table-cell {
    vertical-align: middle;
  }
}

.ce-uploads__table-cell:first-child,
.ce-uploads__table-cell:nth-child(2) {
  text-align: left;
}

.ce-uploads__table-cell:nth-child(4) {
  text-align: right;
}

.ce-uploads__table-cell--head {
  border-top: none;
}

.ce-uploads__table-body .ce-uploads__table-row:first-child .ce-uploads__table-cell {
  border-top: 2px solid #d0dae3;
}

.ce-uploads__table-row--head {
  border-top: none;
}

.ce-uploads__file-name {
  min-width: 240px;
  display: inline-block;
  word-break: break-word;
}

.ce-uploads__file-type {
  text-transform: uppercase;
}

.ce-uploads__file-size {
  white-space: nowrap;
}

.ce-uploads__image {
  min-width: 24px;
}


/*
 * Forms
 *
 * Form and inputs (text-like) elements get styled here, input[type="submit"] and
 * [type="button"] get their styles from the button class.
 */
fieldset {
}

legend {
}

label {
}

/* Placeholder */
::-webkit-input-placeholder {
  color: #888;
}
::-moz-placeholder {
  color: #888;
}
:-ms-input-placeholder {
  color: #888;
}
::-ms-input-placeholder {
  color: #888;
}
::placeholder {
  color: #888;
}

/* Global fields */
fieldset {
  padding: 0;
  border: none;
}

input,
textarea,
select {
  padding: .75em 1em;
  width: 100%;
  border-radius: 0;
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  font-weight: 300;
  -webkit-transition: border 0.32s;
  -o-transition: border 0.32s;
  transition: border 0.32s;
  border: 2px solid;
  background: #fff;
}

input,
textarea,
select,
.input--primary,
.form-style--primary input,
.form-style--primary textarea,
.form-style--primary select {
  border-color: #dcdcdc;
  color: #00305D;
}

input:focus,
textarea:focus,
select:focus,
.input--primary:focus,
.form-style--primary input:focus,
.form-style--primary textarea:focus,
.form-style--primary select:focus {
  border-color: #00305D;
  outline: 0;
}


/* Secondary fields (grey-ish) */
.input--secondary,
.form-style--secondary input,
.form-style--secondary textarea,
.form-style--secondary select {
  background: #e5e5e5;
  border: none;
  color: #00305D;
}

/* Inverted fields (colored background with white font) */
.input--inverted,
.form-style--inverted input,
.form-style--inverted textarea,
.form-style--inverted select {
  border-color: #fff;
  border-width: 1px;
  color: #fff;
  background: transparent;
}

.input--inverted:focus,
.form-style--inverted input:focus,
.form-style--inverted textarea:focus,
.form-style--inverted select:focus {
  border-color: #fff;
}

.input--inverted::-webkit-input-placeholder, .form-style--inverted input::-webkit-input-placeholder, .form-style--inverted textarea::-webkit-input-placeholder, .form-style--inverted select::-webkit-input-placeholder {
  color: #fff;
}

.input--inverted::-moz-placeholder, .form-style--inverted input::-moz-placeholder, .form-style--inverted textarea::-moz-placeholder, .form-style--inverted select::-moz-placeholder {
  color: #fff;
}

.input--inverted:-ms-input-placeholder, .form-style--inverted input:-ms-input-placeholder, .form-style--inverted textarea:-ms-input-placeholder, .form-style--inverted select:-ms-input-placeholder {
  color: #fff;
}

.input--inverted::-ms-input-placeholder, .form-style--inverted input::-ms-input-placeholder, .form-style--inverted textarea::-ms-input-placeholder, .form-style--inverted select::-ms-input-placeholder {
  color: #fff;
}

.input--inverted::placeholder,
.form-style--inverted input::placeholder,
.form-style--inverted textarea::placeholder,
.form-style--inverted select::placeholder {
  color: #fff;
}


/* Inverted secondary (light blue background) */
.input--inverted-secondary,
.form-style--inverted-secondary input,
.form-style--inverted-secondary textarea,
.form-style--inverted-secondary select {
  border: none;
  background: #ccd5de;
}

.input--inverted-secondary::-webkit-input-placeholder, .form-style--inverted-secondary input::-webkit-input-placeholder, .form-style--inverted-secondary textarea::-webkit-input-placeholder, .form-style--inverted-secondary select::-webkit-input-placeholder {
  color: #00305D;
}

.input--inverted-secondary::-moz-placeholder, .form-style--inverted-secondary input::-moz-placeholder, .form-style--inverted-secondary textarea::-moz-placeholder, .form-style--inverted-secondary select::-moz-placeholder {
  color: #00305D;
}

.input--inverted-secondary:-ms-input-placeholder, .form-style--inverted-secondary input:-ms-input-placeholder, .form-style--inverted-secondary textarea:-ms-input-placeholder, .form-style--inverted-secondary select:-ms-input-placeholder {
  color: #00305D;
}

.input--inverted-secondary::-ms-input-placeholder, .form-style--inverted-secondary input::-ms-input-placeholder, .form-style--inverted-secondary textarea::-ms-input-placeholder, .form-style--inverted-secondary select::-ms-input-placeholder {
  color: #00305D;
}

.input--inverted-secondary::placeholder,
.form-style--inverted-secondary input::placeholder,
.form-style--inverted-secondary textarea::placeholder,
.form-style--inverted-secondary select::placeholder {
  color: #00305D;
}

/* Text input fields */
input[type=text],
input[type=url],
input[type=tel],
input[type=number],
input[type=color],
input[type=email],
input[type=search] {
}

/* Turn off number spinners */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

/* Radio buttons and checkboxes */
input[type=radio],
input[type=checkbox] {
  border: 0 none; /* remove square arround radio/check in IE */
  width: auto;
}

/* Read-only and disabled fields */
input[readonly],
input[disabled] {
}

/* Read-only and disabled radio buttons and checkboxes */
input[type=radio][readonly],
input[type=checkbox][readonly],
input[type=radio][disabled],
input[type=checkbox][disabled] {
}

/* Textarea */
textarea {
  width: 100%;
}

/* Select */
select {
}


/*
 * Text formatting
 */
a {
  color: #00305D;
  text-decoration: none;
}

a:hover {
}


b,
strong {
}

i {
}

address {
  font-style: normal;
}


/*
 * Vertical Rhythm
 *
 * To keep a harmonic vertical rhythm, all elements placed in text/content must
 * have the same bottom margin. Also, it's good to avoid that every element
 * comes with other margin values, so we set them here - the value is always
 * base font-size * line height.
 *
 * Add all site-specific elements you want to the selector, f.e. .box, .msg or
 * similar.
 */
h1, .alpha, h2, .beta, h3, .gamma, h4, .delta, h5, .epsilon h6, .zeta,
ul, ol, dl,
blockquote, p, address,
table,
fieldset, figure,
pre, hr,
.mb-medium,
.two-column-text {
  margin: 0 0 1.5rem 0;
}

.mb-large {
  margin: 0 0 2.5rem 0;
}

.mb-xlarge {
  margin: 0 0 3rem 0;
}

.mb-xxlarge {
  margin: 0 0 4rem 0;
}

.mb-small {
  margin-bottom: .75rem;
}

.mb-none {
  margin-bottom: 0;
}


.mt-medium {
  margin-top: 1.5rem;
}

/* Padding */
.p-small {
  padding: .75rem;
}

.border-none {
  border: none;
}

/*
 * HELPER & COMPONENTS
 *
 * Helpers and components are globally available elements that only need to be
 * defined/styled on time and than may be issued where ever needed. Examples
 * would be the often used "messaging system" and our container, row and width
 * classes. See Snippets.css for further examples.
 */

/*
 * Page layout
 */
.container {
  max-width: 1500px;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.container--small {
  max-width: 1024px;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

@media (min-width: 1024px) {
  .container--small {
    padding-left: 0;
    padding-right: 0;
  }
}


/*
 * Width classes
 *
 * Define them suited to your project, like so:
 * .w[num]p := [num]% (preferred)
 * .w[num]px := [num]px
 *
 * Append size modifiers to your width-classes like shown and define media query
 * sizes like "--xl", "--l", "--m", "--s", "--xs"! With this scheme you're able
 * to switch widths based on media queries, i.e. a four column row gets a two
 * column and later a one column row. Only add things needed!
 */
.w20p {
  width: 20%;
}

.w25p {
  width: 25%;
}

.w33p {
  width: 33%;
}

.w50p {
  width: 50%;
}

.w60p {
  width: 60%;
}

.mxw60p {
  max-width: 60%;
}

.w75p {
  width: 75%;
}

.w80p {
  width: 80%;
}

.w100p {
  width: 100%;
}

.w-auto {
  width: auto;
}


/* Height classes */
.h100p {
  height: 100%;
}


/*
 * Flex basis classes
 *
 * These classes are used with the .flex-row and .flex-col classes, just like
 * with the standard width classes, but with `flex-basis` values and
 * `.f[number](px|%)` classes.
 */
.f200px {
  -ms-flex-preferred-size: 200px;
  flex-basis: 200px;
}

.f20p {
  -ms-flex-preferred-size: 20%;
  flex-basis: 20%;
}

.f25p {
  -ms-flex-preferred-size: 25%;
  flex-basis: 25%;
}

.f33p {
  -ms-flex-preferred-size: 33.3333333333%;
  flex-basis: 33.3333333333%;
}

.f40p {
  -ms-flex-preferred-size: 40%;
  flex-basis: 40%;
}

.f50p {
  -ms-flex-preferred-size: 50%;
  flex-basis: 50%;
}

.f60p {
  -ms-flex-preferred-size: 60%;
  flex-basis: 60%;
}

.f66p {
  -ms-flex-preferred-size: 66.6666666666%;
  flex-basis: 66.6666666666%;
}

.f75p {
  -ms-flex-preferred-size: 75%;
  flex-basis: 75%;
}

.f80p {
  -ms-flex-preferred-size: 80%;
  flex-basis: 80%;
}

.f100p {
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
}


/*
 * Gutters
 */
.flex-row-gutter--small,
.row-gutter--small {
  margin-left: -.75rem;
}

.flex-row-gutter--small > .flex-col,
.row-gutter--small > .col {
  padding-left: .75rem;
}

.flex-row-gutter--xlarge,
.row-gutter--xlarge {
  margin-left: -3rem;
}

.flex-row-gutter--xlarge > .flex-col,
.row-gutter--xlarge > .col {
  padding-left: 3rem;
}


/*
 * Button component
 *
 * Allows us to style everything as buttons. We also use them
 * for input[type=submit]'s and input[type=buttons] as we don't want to
 * define button styles multiple times.
 *
 * Adjust and add design-stuff and modifiers like .button--full to your project
 * needs. Modifiers always complement the base class.
 *
 * Example:
 * <a class="button" href="#">...</a>
 * <a class="button button--full" href="#">...</a>
 */
.button {
  border: 0 none;
  display: inline-block;
  font: inherit;
  min-width: inherit;
  overflow: visible;
  text-decoration: none;
  padding: .75em 1em;
  line-height: 1.15;
  vertical-align: middle;
  border-radius: 0;
  width: auto;
  -webkit-transition: background ease .3s;
  -o-transition: background ease .3s;
  transition: background ease .3s;
}

.button:hover {
  cursor: pointer;
}

.button + .button {
  margin-left: 1em;
}

/* Primary (blue background, white font) */
.button--primary.button--primary {
  color: #fff;
  background-color: #00305D;
}

/* Secondary (white background, blue font) */
.button--secondary.button--secondary,
.color-white .button--secondary.button--secondary {
  color: #00305D;
  background-color: #fff;
}

/* Tertiary (grey-ish) */
.button--tertiary.button--tertiary,
.color-white .button--tertiary.button--tertiary {
  background: #e5e5e5;
  color: #00305D;
}

.button--tertiary.button--tertiary:hover,
.color-white .button--tertiary.button--tertiary:hover {
  background: #00305D;
  color: #fff;
}

/* Inverted (no background, white font) */
.button--inverted.button--inverted {
  color: #fff;
  background-color: transparent;
  border: 1px solid #fff;
}

.button--inverted.button--inverted:hover,
.color-white .button--inverted.button--inverted:hover {
  background: #fff;
  color: #00305D;
}

/* Inverted secondary (light blue background) */
.button--inverted-secondary.button--inverted-secondary,
.color-white .button--inverted-secondary.button--inverted-secondary {
  color: #00305D;
  background-color: #ccd5de;
  border: none;
}

/* Download */
.button--download {
  display: inline-block;
  padding-left: 5rem;
  padding-right: 1.5rem;
  white-space: nowrap;
  position: relative;
  min-width: 235px;
  color: #00305d; /* color-default */
  background-color: #ccd5de; /* bg20-default */
  /* Manual set color and backgrounds are exceptions(!!!) here. We
  had to do it this way because CKEditor somehow didn't show any download button
  stylesSets as soon as we added multiple classes
  (e.g. button--download + bg + color class) */
}

.button--download::before {
  position: absolute;
  content: url("../Images/download-button/download-icon.svg");
  height: 3rem;
  width: 3rem;
  left: 1rem;
  top: 40%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.button--download-secondary {
  background: #fff; /* bg-white */
}

/* Full width */
.button--full {
  width: 100%;
  text-align: center;
}

/* Invisible */
.button--invisible {
  color: inherit;
  background: none;
  border: none;
}


/*
 * List component
 *
 * Used for standard list styles - style the design with your own component,
 * e.g. .main-navigation__item { background: blue; } etc.
 *
 * Example:
 * <nav class="main-navigation">
 *   <ul class="main-navigation__list list">
 *     <li class="main-navigation__item">
 *       <a class="main-navigation__link">Our Work</a>
 *       <ul class="main-navigation__list main-navigation__list--sub list">
 *         <li class="main-navigation__item">
 *           <a class="main-navigation__link">Example</a>
 *         </li>
 *       </ul>
 *     </li>
 *   </ul>
 * </nav>
 *
 * In the end we might have more classes, but less CSS lines as we don't have to bother
 * with long, nested selectors (.nav > li > ul > li > a becomes .main-navigation__list--sub .main-navigation__link).
 * Also, it's more performant. ;)
 */
.list {
  margin: 0;
  padding: 0;
}

.list > li {
  margin-bottom: 0;
  display: inline-block;
}

/* Stacked list */
.list--stacked > li {
  display: block;
}

/* Flex list */
.list--flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.list--flex > li {
  display: block;
}


/*
 * Dropdown component
 *
 * Example:
 * <ul>
 *   <li class="dropdown">
 *     <!-- Alternative: <a class="dropdown__link">Hover me.</a> -->
 *     <span class="dropdown__link">Hover me.</span>
 *     <ul class="dropdown__object">
 *       <li>
 *         <a href="">This is a dropdown. Madness!</a>
 *       </li>
 *     </ul>
 *   </li>
 * </ul>
 */
.dropdown,
.js-dropdown {
  position: relative;
}

.dropdown__link {
  cursor: pointer;
}

.dropdown__object {
  display: none;
  position: absolute;
  left: 0;
  /* Set your own z-index as needed. */
}

.dropdown:hover > .dropdown__object,
.js-dropdown.is-active > .dropdown__object {
  display: block;
}

/* Right aligned dropdown */
.dropdown--right > .dropdown__object {
  left: auto;
  right: 0;
}

/*
 * Powermail styling
 */
.powermail_fieldwrap {
  margin-bottom: 1.5rem;
}

.powermail_file {
  cursor: pointer;
  border: 1px solid #00305D;
}

.powermail_input.powermail_field_error,
.powermail_textarea.powermail_field_error,
.radio.powermail_field_error, .powermail_checkbox.powermail_field_error {
  border-color: #f00;
}

.powermail-errors-list.filled {
  color: #fff;
  list-style: none;
  margin: 0;
  font-size: 0.95rem;
  display: block;
  width: auto;
  float: left;
  padding: 0.15rem 0.5rem;
  background: #f00;
}

/*
 * Styled select
 *
 * Use together with bg and color classes, e.g.
 * `.styled-select.bg-default.color-white` to decide background color and text
 * color.
 */
.styled-select {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.styled-select::after {
  font-family: 'Font Awesome 5 Pro';
  vertical-align: middle;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
  padding: 0 0.5rem;
  pointer-events: none;
  margin-left: -2rem;
  content: '\f078';
  color: inherit;
}

.styled-select__input {
  background: inherit;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.5rem;
  border: 0 none;
  color: inherit;
}


/*
 * Z-Index
 */
.z-0 {
  z-index: 0;
}

.z-1 {
  z-index: 10;
}

.z-2 {
  z-index: 20;
}

.z-3 {
  z-index: 30;
}

.z-4 {
  z-index: 40;
}

.z-5 {
  z-index: 50;
}


/*
 * Rotation
 */
.rotate90 {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.rotate-45 {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/*
 * Multi column text
 */
.two-column-text {
  -webkit-column-gap: 1em;
  -moz-column-gap: 1em;
  column-gap: 1em;
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
}


/*
 * Logo
 */
.logo,
.logo__image {
  display: block;
  max-width: 120px;
  height: auto;
}

/*
 * Boxed header
 * Add background (.bg-xy) and color (.color-xy) classes!
 */
.boxed-header {
  display: block;
  padding: .25em .4em;
}

.boxed-header--small-text {
  padding: .5em .75em;
}

.boxed-header--inline {
  display: inline-block;
}


/*
 * Border wrapped elements
 *
 * Default color only. If more colors are needed later, create .border-* classes.
 * See GlobalColors.css for a template.
 *
 * Also applies to default FSC elements via .frame-layout--borderTop/Bottom/Both
 */
.border-wrap,
.frame-layout--borderBottom,
.frame-layout--borderTop,
.frame-layout--borderBoth {
  border-color: #00305d;
  border-top: 1px solid #00305d;
  border-bottom: 1px solid #00305d;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.border-wrap--top,
.frame-layout--borderTop {
  border-width: 1px 0 0 0;
  padding-bottom: 0;
}

.border-wrap--top, .frame-layout--borderTop {
  padding-bottom: 1rem;
}

.frame-layout--borderTop.mb-medium {
  /*padding-top: 3rem;*/
}

[class*="frame-layout--border"] .ce-bodytext {
  margin-bottom: -1.5rem;
}

.border-wrap--bottom,
.frame-layout--borderBottom {
  border-width: 0 0 1px 0;
  padding-top: 0;
  padding-top: 1rem;
}

.border-wrap--bottom, .frame-layout--borderBottom {

}

.border-wrap--bottom:first-of-type {
  padding-top: 0;
}

.side-menu-content__inner.border-wrap--bottom:first-of-type {
  padding-top: 1.5rem;
}

[class*="frame-layout--border"] .ce-textpic.ce-below .ce-gallery {
  padding-top: 1.5rem;
}


/*
 * Layout for modals
 */
.modal {
  display: none;
}

.modal.is-open {
  display: block;
}

.modal__overlay {
  background: rgba(0, 0, 0, 0.2);
  position: fixed;
  top: 0;
  left: 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;
}

.modal__container {
  padding: 2rem;
}

.modal__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: .5rem;
}

.modal__close {
  margin-left: auto;
  position: relative;
  font-size: 0.75em;
  cursor: pointer;
}

[data-micromodal-trigger] {
  cursor: pointer;
}

/* Language nav modal */
.modal--language .modal__container {
  text-align: center;
  min-width: 350px;
}

.language-nav__list .language-nav__item, .language-nav__link {
  outline: 0;
}



/*
 * Slider
 */

/* Global */

.slider__header {
  font-size: 2rem;
  line-height: 1.1;
  font-weight: 500;
  margin: 0 0 1.5rem 0;
}

.slider__sub-header {
  font-size: .75rem;
}

@media (min-width: 768px) {
  .slider__header {
    font-size: 3.125rem;
  }

  .slider__sub-header {
    font-size: 1rem;
  }
}

/* Global pagination */
.slider__pagination {
  margin-bottom: 1.5rem;
  font-size: .9rem;
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 5;
  text-align: center;
}

@media (min-width: 768px) {
  .slider__pagination {
    font-size: 1rem;
  }
}

.slider__bullet {
  width: auto;
  height: auto;
  display: inline-block;
  border-radius: unset;
  background: transparent;
  opacity: 1;
  color: #fff;
  margin: 0 0.25rem;
}

.slider__bullet.is-active {
  opacity: 1;
  background: transparent;
}

.slider__bullet.is-active .slider__bullet-icon::before {
  content: '\f192';
  font-weight: 400;
}

/* Global arrows */
.slider-arrow {
  font-size: 3rem;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 3;
  cursor: pointer;
  display: none;
  opacity: 1;
  -webkit-transition: opacity 200ms;
  -o-transition: opacity 200ms;
  transition: opacity 200ms;
  visibility: visible;
}

.slider-arrow--next {
  right: 1.5rem;
}

.slider-arrow--prev {
  left: 1.5rem;
}

.slider-arrow.is-disabled {
  opacity: 0;
  pointer-events: none;
}

@media (min-width: 768px) {
  .slider-arrow {
    display: block;
  }
}

/* Global video */
.slider__item--video {
  position: relative;
  background: #222;
}

.slider__item--video .slider__container {
  position: relative;
}

.slider__item--video .slider__video {
  position: absolute;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}


/* Default */
.slider__item {
  display: block;
  height: 50vh;
  max-height: 1080px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

@media (min-width: 768px) {
  .slider--default .slider__item {
    height: 100vh;
  }
}

.slider--default .slider__container {
  height: 100%;
  padding-left: 6rem;
  padding-right: 6rem;
}

.slider--default .slider__header {
  margin-bottom: .3em;
}

.slider--default .slider__sub-header {
  display: inline-block;
}

/* Content slider */
.slider--content {
  position: relative;
}

.slider--content .swiper-container {
  margin: 0 4rem;
}

/* Content slider - Equalize mediabox heights */
.slider--content .swiper-slide {
  height: auto;
}

.slider--content .swiper-slide .media-box,
.slider--content .swiper-slide .media-box .media-box__content {
  height: 100%;
}

.swiper-slide .media-box .media-box__content,
.swiper-slide .media-box .media-box__content.f-align-items-center {
  align-items: normal;
  -webkit-box-align: start;
  -ms-flex-align: unset;
}

@media (min-width: 1616px) {
  .slider--content .swiper-container {
    margin: 0;
  }

  .slider--content .slider-arrow--next {
    right: -2.5rem;
  }

  .slider--content .slider-arrow--prev {
    left: -2.5rem;
  }
}


/*
 * Search
 */

/* Form */
.search-form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.search-form__input {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -webkit-appearance: none;
}

.search-form__submit {
  font-size: 1.25em;
}

/* Results list: Pagination */
.pagination__list {
  margin-left: -.35rem;
}

.pagination__item {
  margin-left: .35rem;
}

.pagination__link--active,
.pagination__link:hover {
  font-weight: 500;
  color: #00305D;
}

.search-result .hit {
  color: #00305D;
  font-style: italic;
  font-weight: 400;
}


/*
 * Social nav
 */
.social-nav {
  margin-bottom: 1rem;
}

.social-nav__list {
  margin-left: -.5rem;
}

.social-nav__item.social-nav__item {
  padding-left: .5rem;
}

.social-nav__link {
  display: block;
  padding: .5rem .75rem;
  border: none;
}


/*
 * Language nav
 */
.language-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.language-nav__list {
  margin-left: auto;
  margin-right: auto;
}

.language-nav__link {
  display: block;
  padding: .25em .5em;
  border: 1px solid transparent;
  margin-bottom: .5em;
}

.language-nav__link.is-active,
.language-nav__link:hover {
  border: 1px solid #00305d;
}

.language-nav__flag {
  margin-right: .25em;
  position: relative;
  top: .02em;
}

/* Mobile */
.language-nav--mobile .language-nav__list {
  display: table;
  border-collapse: collapse;
  width: 100%;
}

.language-nav--mobile .language-nav__item {
  display: table-cell;
  border: 2px solid #fff;
  text-align: center;
  padding-left: 0;
}

.language-nav--mobile .language-nav__link {
  border: none;
  margin-bottom: 0;
  padding: .5em 1em;
}

.language-nav--mobile .language-nav__link.is-active,
.language-nav--mobile .language-nav__link:hover {
  background: #fff;
  color: #00305d;
}


/*
 * SIDE MENU
 */
.side-menu {
  position: absolute;
  right: 0;
  color: #000;
  font-size: .8125rem;
  display: none;
}

@media (min-width: 1200px) AND (min-height: 815px) {
  body {
    overflow-x: hidden;
  }

  .side-menu {
    display: block;
  }
}

/* Navigation */
.side-menu-nav {
  top: 10rem;
  position: absolute;
  right: 0;
}

.side-menu-nav__item {
  background-color: #fff;
  padding: .2rem .5rem;
  font-size: 1.25rem;
  text-align: center;
  cursor: pointer;
  -webkit-transition: background-color ease .3s;
  -o-transition: background-color ease .3s;
  transition: background-color ease .3s;
  margin-bottom: -1px;
}

.side-menu-nav__item:hover,
.side-menu-content__close-button:hover {
  background-color: #cce1f0;
}

/* sidemenu nav Icons */
.side-menu-nav__item-image {
  height: 28px;
  width: auto;
  display: block;
}

.side-menu-nav__item-icon {
  height: auto;
  width: 24px;
  display: block;
  fill: #7f97ae;
  margin: .25rem 0;
}

[data-item="search"] .side-menu-nav__item-image {
  height: auto;
}

/* Content */
.side-menu-content {
  height: 100vh;
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  -webkit-transition: -webkit-transform .25s ease;
  transition: -webkit-transform .25s ease;
  -o-transition: transform .25s ease;
  transition: transform .25s ease;
  transition: transform .25s ease, -webkit-transform .25s ease;
  position: relative;
}

.side-menu-content__item {
  position: relative;
}

.side-menu-content__inner {
  padding: 1.5rem 0;
  margin: 0 1.5rem;
}

.side-menu-content__close-button {
  position: absolute;
  -webkit-transform: translate(-100%, -100%);
  -ms-transform: translate(-100%, -100%);
  transform: translate(-100%, -100%);
  cursor: pointer;
  display: none;
  font-size: 24px;
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  -webkit-transition: background-color ease .3s;
  -o-transition: background-color ease .3s;
  transition: background-color ease .3s;
}

.is-active .side-menu-content__close-button {
  display: block;
}

.side-menu-content__item.is-selected {
  background-color: #cce1f0;
}

.side-menu-content__item.is-selected .side-menu-content__inner {
  border: none;
}

.side-menu-content__item.is-before-selected .side-menu-content__inner {
  border: none;
}

/* Content modification */
.side-menu-content__item h1, .side-menu-content__item .alpha,
.side-menu-content__item h2, .side-menu-content__item .beta,
.side-menu-content__item h3, .side-menu-content__item .gamma,
.side-menu-content__item h4, .side-menu-content__item .delta,
.side-menu-content__item h5, .side-menu-content__item .epsilon,
.side-menu-content__item h6, .side-menu-content__item .zeta {
  margin-bottom: .75rem;
}

.side-menu-content__item p:last-of-type,
.side-menu-content__item ul,
.side-menu-content__item ol,
.side-menu-content__item address,
.side-menu-content__item fieldset,
.side-menu-content__item .powermail_fieldwrap {
  margin-bottom: 0;
}

.side-menu-content__item p:first-of-type {
  margin-bottom: 1.5rem;
}

.side-menu-content__item a {
  color: #000;
}

.side-menu-content__item .social-nav {
  margin-bottom: 0;
}

/* Content modification when selected */
.side-menu-content__item.is-selected .social-nav__link,
.side-menu-content__item.is-selected .search-form__input,
.side-menu-content__item.is-selected .powermail_input {
  background: #fff;
}


.side-menu-content__item.is-selected .social-nav__link {
  color: #00305d;
}

.side-menu-content__item.is-selected .social-nav__link:hover {
  background: #00305d;
  color: #fff;
}

/* JavaScript */
.js-side-menu-content.is-active {
  -webkit-transform: translateX(0%);
  -ms-transform: translateX(0%);
  transform: translateX(0%);
}


/*
 * HEAD
 */
.header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  width: 100%;
}

@media (min-width: 1024px) {
  .header__bar {
    padding: .75rem 0;
  }
}

/* Logo */
.header .logo {
  position: relative;
  top: 5px;
}

.header .logo,
.header .logo__image {
  width: 90px;
}

.header .logo-svg__thermal-systems {
  display: none;
}

@media (min-width: 1024px) {
  .header .logo {
    position: static;
  }

  .header .logo,
  .header .logo__image {
    width: 120px;
  }

  .header .logo-svg__thermal-systems {
    display: inherit;
  }
}

/*
 * Main nav
 */
.main-nav__item {
  padding-left: 0;
}

.main-nav__link {
  padding: 0 0.5rem;
  cursor: pointer;
}

.main-nav__link:hover,
.main-nav__link.is-active {
  font-weight: 700;
}

.main-nav__item:first-child .main-nav__link {
  margin-left: -.5rem;
}

@media (min-width: 1024px) {
  .main-nav__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
}


/*
 * Sub nav
 */
.sub-nav {
  border-top: 1px solid;
  border-bottom: 1px solid;
}

.sub-nav__container {
  display: block;
}

/* Parent link */
.sub-nav__parent {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 0;
}

.sub-nav__parent-text {
  font-weight: 700;
}

.sub-nav__parent-arrow {
  margin-left: auto;
  padding: .75rem 1rem;
  margin-right: -1rem;
  display: block;
  font-size: 1.25em;
}

.sub-nav__parent-icon {
  width: 2.5rem;
  height: 2.5rem;
  /* Makes the white space around the icon (that is usually the background) disappear */
  margin: -0.375em calc(-0.375em + .75em) -0.375em -0.375em;
}

.sub-nav__parent-icon path:first-child {
  fill: transparent;
}

.sub-nav__parent-icon path:last-child {
  fill: #00305D;
}

/* Link */
.sub-nav__link {
  padding: .75rem 0;
  display: block;
  border-bottom: 1px solid;
}

.sub-nav__link.is-active {
  font-weight: 700;
  border-bottom: 1px solid;
}

/* Inner */
.sub-nav__inner {
  position: static;
  text-align: left;
  overflow: auto;
}

/* List */
.sub-nav__item {
  display: block;
}

.sub-nav__item:last-child .sub-nav__link {
  border-bottom: none;
}

/* JS */
.js-mobile-nav-is-open .sub-nav {
  display: none;
}

.js-sub-nav-dropdown {
  display: none;
}

.js-sub-nav-dropdown.is-active {
  display: block;
}


@media (min-width: 1024px) {
  .js-mobile-nav-is-open .sub-nav {
    display: block;
  }

  .sub-nav__container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .sub-nav__inner {
    position: relative;
    text-align: center;
    overflow: hidden;
  }

  .sub-nav__inner.js-sub-nav-dropdown {
    display: block;
  }

  .sub-nav__item.sub-nav__item {
    padding-left: 2rem;
    display: inline-block;
  }

  .sub-nav__link {
    border-bottom: none;
  }

  .sub-nav__link:hover {
    font-weight: 700;
  }

  .sub-nav__link.is-active {
    border-bottom: none;
  }

  .sub-nav__parent {
    padding: .75rem 2rem .75rem 0;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }

  .sub-nav__parent.is-active {
    font-weight: 700;
    border-bottom: none;
  }
}


/* Search modal */
.search-modal-toggle {
  margin-right: 1rem;
}

.modal--search .search-form__input {
  border: 1px solid #00305d;
}

.modal--search .modal__container {
  min-width: 300px;
}

@media (min-width: 640px) {
  .modal--search .modal__container {
    min-width: 500px;
  }
}

/*
 * Icon nav
 */
.icon-nav {
  position: absolute;
  left: 0;
  width: 100%;
  font-size: 0.9em;
}

@media (min-width: 1200px) {
  .icon-nav {
    font-size: 1rem;
  }
}

.icon-nav__container {
  position: relative;
  padding: 0;
}

.icon-nav__inner {
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  scroll-snap-type: x proximity;
}

@media (min-width: 1200px) {
  .icon-nav__inner {
    overflow-x: initial;
    overflow-y: initial;
    white-space: initial;
  }
}

.icon-nav__list {
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  margin-left: -2px;
  min-width: 1200px;
}

.icon-nav__item {
  -ms-flex-preferred-size: 50%;
  flex-basis: 50%;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  padding-left: 2px;
  scroll-snap-align: center;
}

.icon-nav__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 1em 0.25em;
  height: 100%;
  text-align: center;
}

.icon-nav__icon {
  width: 4em;
  height: 4em;
  margin-bottom: .5em;
}

.icon-nav__text {
  font-size: 0.9em;
}

.icon-nav__arrow {
  position: absolute;
  top: 50%;
  font-size: 1.5em;
  line-height: 1;
  -webkit-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%);
  pointer-events: none;
}


.icon-nav__arrow--prev {
  left: 1em;
}

.icon-nav__arrow--next {
  right: 1em;
}

@media (min-width: 1200px) {
  .icon-nav__arrow {
    display: none;
  }
}

/* JS */
.js-icon-nav {
  display: none;
}

.js-icon-nav.is-active {
  display: block;
}


/*
 * MOBILE NAV
 */

/* Toggle */
.mobile-nav-toggle {
  font-size: 2rem;
  padding: .5rem 1.5rem;
  margin-left: -1.5rem;
  display: block;
}

.mobile-nav-toggle.is-active {
}

/* Navigation */
.mobile-nav {
  position: fixed;
  width: 100%;
  background: #fff;
}

.mobile-nav__list {
  margin-bottom: 1rem;
}

.mobile-nav__item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.mobile-nav__item:last-child {
  border-bottom: 0;
}

.mobile-nav__link-wrap {
  display: block;
}

.mobile-nav__sub-toggle {
  display: block;
  padding: 1rem 1rem;
  cursor: pointer;
}

.mobile-nav__sub-toggle.is-active {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.mobile-nav__link {
  color: inherit;
  display: block;
  padding: 1rem 0;
  font-weight: 700;
}

/* Sub navigation */
.mobile-nav__list--sub {
  display: none;
  padding-left: 2rem;
  font-size: 0.9em;
}

.mobile-nav__list--sub.is-active {
  display: block;
}

.mobile-nav__list--sub .mobile-nav__item {
  border-bottom: 0;
}

.mobile-nav__list--sub .mobile-nav__link {
  font-weight: 400;
}


/* JS */
.js-mobile-nav {
  display: none;
}

.js-mobile-nav.is-active {
  display: block;
}

@media (min-width: 1024px) {
  .mobile-nav.mobile-nav {
    display: none;
  }
}

.js-mobile-nav-is-open {
  overflow: hidden;
  height: 100%;
}

.js-mobile-nav-is-open .js-mobile-nav {
  overflow-y: scroll;
  height: 100%;
}


/*
 * TEASER
 */


/*
 * LEFT SIDEBAR
 */
.sidebar--left {
}


/*
 * MAIN AREA
 */
.main {
}


/*
 * Section
 */
.section {
  padding: 3.125rem 0;
}

.section__header-wrap {
  margin-bottom: 2.25rem;
}

.featured-media__header-wrap {
  position: -webkit-sticky;
  position: sticky;
  top: 12rem;
}

.section__content .featured-media__header-wrap {
  position: relative;
  top: auto;
}

.section__header,
.section__sub-header {
  display: block;
  margin-bottom: 0;
  margin-top: 1rem;
}

.section__sub-header {
  font-weight: 300;
}

/* Background */
.section--background-image {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  min-height: 70vh;
  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;
  background-attachment: fixed;
}

.section--background-image .container {
  width: 100%;
}

.section--background-image .section__content {
  background: #fff;
  padding: 2rem 2rem .5rem;
}

.section--background-image .section__content-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

/* Align left / right */
.section--align-left .section__content-wrap {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.section--align-left .section__content {
  max-width: 400px;
}

.section--align-right .section__content-wrap {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.section--align-right .section__content {
  max-width: 400px;
}


/*
 * Featured media
 */
.featured-media {
  height: 75vh;
  max-height: 700px;
}

/* General */
.featured-media__section {
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: scroll;
  height: 100%;
}

@media (min-width: 1024px) {
  .featured-media__section {
    background-attachment: fixed;
  }
}

@media (min-width: 1200px) {
  .teaser .featured-media {
    max-height: 585px;
  }

  .teaser .featured-media__section {
    background-size: auto;
    background-position: center 8.5rem;
  }
}


.flex-row .featured-media__section,
.grid .featured-media__section {
  background-attachment: scroll;
  word-break: break-word;
}

.flex-row .featured-media,
.grid .featured-media {
  max-height: none;
  height: 100%;
}

/* With video */
.featured-media--video {
  position: relative;
}

.featured-media--video .featured-media__video {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.featured-media--video .featured-media__section {
  position: relative;
  height: auto;
}

.section__content .featured-media--video .featured-media__video {
  position: relative;
}

.section__content .featured-media--video .featured-media__section {
  margin-top: -106%;
  height: auto;
}


/* Boxed header layout */
.featured-media__header-wrap--boxed .featured-media__header {
  margin-bottom: .3em;
}

.featured-media__header-wrap--boxed .featured-media__header,
.featured-media__header-wrap--boxed .featured-media__subheader {
  display: inline-block;
}

/* Modifications based on element location */
.cell .featured-media--square {
  max-height: none;
}

.cell > .featured-media .featured-media__header-wrap,
.flex-col > .featured-media .featured-media__header-wrap,
.cell > .featured-linked .featured-media .featured-media__header-wrap,
.flex-col > .featured-linked .featured-media .featured-media__header-wrap {
  padding: 0 3rem;
}


/*
 * Featured icon element
 */
.featured-icon {
  padding: 2rem;
  margin-bottom: 1.5rem;
}

/* Make featured icons height equal when in gridelements */
.flex-col .featured-icon {
  height: calc(100% - 1.5rem);
}


.featured-icon__icon {
  width: 6rem;
  height: 6rem;
  margin-bottom: 2rem;
}

.featured-icon__header {
  margin-bottom: .5rem;
}

.featured-icon__text {
  margin-bottom: -1.5rem;
}


/*
 * Mediabox
 *
 * Default:
 * Various available options, e.g. horizontal (image left/right), vertical,
 * with and without arrow.
 *
 * Mini:
 * Only header, link, image, bodytext.
 */

/* Default */
.media-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.media-box__media,
.media-box__content {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
}

.media-box__media {
  position: relative;
}

.media-box__media-header {
  position: absolute;
}

.media-box__image {
  -o-object-fit: cover;
  object-fit: cover;
  display: block;
  width: 100%;
  height: 100%;
}

.media-box__video {
  width: 100%;
  display: block;
}

.media-box__content {
  padding: 3.125rem 3rem 3.125rem;
  overflow: hidden;
}

/* Arrow */
.media-box__arrow {
  position: absolute;
  display: none;
}

/* Bottom & top */
.media-box__arrow--bottom,
.media-box__arrow--top {
  left: 50%;
  margin-left: -30px;
  width: 60px;
}

.media-box__arrow--bottom {
  top: 0;
}

.media-box__arrow--top {
  bottom: 0;
}

/* Left & right */
.media-box__arrow--left,
.media-box__arrow--right {
  top: 50%;
  margin-top: -30px;
  width: 30px;
}

.media-box__arrow--left {
  right: 0;
}

.media-box__arrow--right {
  left: 0;
}

/* Arrow: image first */
.media-box--arrow.media-box--image-first .media-box__arrow--top {
  display: block;
}

@media (min-width: 1200px) {
  .media-box--arrow.media-box--image-first .media-box__arrow--top {
    display: none;
  }

  .media-box--arrow.media-box--image-first .media-box__arrow--left {
    display: block;
  }
}

.media-box--image-first .media-box__media-header {
  right: 10%;
  top: 15%;
}

/* Arrow: image last */
.media-box--arrow.media-box--image-last .media-box__arrow--bottom {
  display: block;
}

@media (min-width: 1200px) {
  .media-box--arrow.media-box--image-last .media-box__arrow--bottom {
    display: none;
  }

  .media-box--arrow.media-box--image-last .media-box__arrow--right {
    display: block;
  }
}

.media-box--image-last .media-box__media-header {
  right: 10%;
  left: 15%;
}

/* Arrow: vertical/vertical-50-50 + image first */
.media-box--arrow.media-box--vertical.media-box--image-first .media-box__arrow,
.media-box--arrow.media-box--vertical-50-50.media-box--image-first .media-box__arrow {
  display: none;
}

.media-box--arrow.media-box--vertical.media-box--image-first .media-box__arrow--top,
.media-box--arrow.media-box--vertical-50-50.media-box--image-first .media-box__arrow--top {
  display: block;
}

/* Arrow: vertical/vertical-50-50 + image last */
.media-box--arrow.media-box--vertical.media-box--image-last .media-box__arrow,
.media-box--arrow.media-box--vertical-50-50.media-box--image-last .media-box__arrow {
  display: none;
}

.media-box--arrow.media-box--vertical.media-box--image-last .media-box__arrow--bottom,
.media-box--arrow.media-box--vertical-50-50.media-box--image-last .media-box__arrow--bottom {
  display: block;
}

/* Horizontal + vertical + vertical-50-50 */
.media-box--horizontal,
.media-box--vertical,
.media-box--vertical-50-50 {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

@media (min-width: 1200px) {
  .media-box--horizontal {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }

  .media-box--horizontal .media-box__image {
    height: 100%;
  }
}

.media-box--horizontal .media-box__video,
.media-box--vertical-50-50 .media-box__video {
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

/* Horizontal */


/* Vertical */
.media-box--vertical .media-box__content {
  overflow: initial;
}

.media-box--vertical .media-box__media {
  -ms-flex-negative: 1;
  flex-shrink: 1;
}

/*
 * Vertical + Vertical 50/50
 *
 * We target .image for --vertical and .media for --vertical-50-50 because
 * otherwise, the construct doesnt work. This is intentional.
 */
.media-box--vertical .media-box__image,
.media-box--vertical-50-50 .media-box__media {
  /*min-height: 400px;*/
}

.media-box--vertical-50-50 .media-box__media {
  min-height: 300px;
}

@media (min-width: 1500px) {
  .media-box--vertical-50-50 .media-box__media {
    min-height: calc(300px + 75px);
  }
}

/* Vertical 50/50 */
.media-box--vertical-50-50 .media-box__content {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

.media-box--vertical-50-50 .media-box__video {
  position: absolute;
}

/* Image first */
.media-box--image-first .media-box__media {
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
  order: 1;
}

.media-box--image-first .media-box__content {
  -webkit-box-ordinal-group: 3;
  -ms-flex-order: 2;
  order: 2;
}

/* Image last */
.media-box--image-last .media-box__media {
  -webkit-box-ordinal-group: 3;
  -ms-flex-order: 2;
  order: 2;
}

.media-box--image-last .media-box__content {
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
  order: 1;
}

/* Is linked */
.media-box--is-linked {
  text-decoration: none !important;
}

.media-box--is-linked .media-box__content {
  position: relative;
}

.media-box__link-icon {
  position: absolute;
  top: .75rem;
  right: .75rem;
  font-size: .70rem;
}

@media (min-width: 1200px) {
  .media-box__link-icon {
    font-size: .80rem;
  }
}

/* Mini */
.media-box--mini {
  display: block;
}

.flex-col > .media-box--mini {
  height: 100%;
}

.media-box--mini .media-box__header {
  margin-bottom: 0;
}

.media-box--mini .media-box__media {
  -webkit-box-flex: 1;
  -ms-flex: auto;
  flex: auto;
}

.media-box--mini .media-box__image {
  -o-object-fit: initial;
  object-fit: initial;
  height: auto;
}

.media-box--mini .media-box__content {
  -webkit-box-flex: 1;
  -ms-flex: auto;
  flex: auto;
  padding: .75rem 1.5rem;
}

.media-box__content-inner {
  margin-bottom: -1.5rem;
}

.media-box--mini .media-box__link-icon {
  position: static;
  font-size: 1.75em;
}


/*
 * Sales & service
 */

/* Filter */
.sales-service-filter {
  margin-bottom: 4rem;
}

.sales-service-filter .styled-select__input {
  height: 3rem;
}

.sales-service-filter input {
  border-color: #cce1f0;
}

.sales-service-filter input::-webkit-input-placeholder {
  color: #00305d;
}
.sales-service-filter input::-moz-placeholder {
  color: #00305d;
}
.sales-service-filter input:-ms-input-placeholder {
  color: #00305d;
}
.sales-service-filter input::-ms-input-placeholder {
  color: #00305d;
}
.sales-service-filter input::placeholder {
  color: #00305d;
}

.sales-service-filter .button--primary.button--primary {
  border: 2px solid #00305D;
}

/* List */

/* Contact */
.contact {
  margin-bottom: 1.5rem;
}

.contact__image {
  margin-bottom: 1.25rem;
  display: block;
}

@media (min-width: 480px) {
  .contact__image {
    margin-bottom: 0;
  }
}

/*
 * Partner map
 */
.partner-map {
  height: 768px;
}

/* Info bubble */
.partner-map__info-bubble {
  color: #000;
  background: #fff;
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
  padding: 0;
  min-width: 300px;
}

.partner-map__info-bubble-header {
  padding: 0.5rem 1.25rem;
  font-size: 1.1em;
}

.partner-map__info-bubble-inner {
  padding: 1rem 1.25rem;
  font-size: 0.9em;
}

/*
 * User feedback message
 */
.message {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 1rem 1.5rem;
  background: #fff;
  color: #00305d;
  font-size: 0.95rem;
  margin: 0 auto;
}

@media (min-width: 640px) {
  .message {
    max-width: 80%;
  }
}

.message__icon {
  margin-right: 1rem;
  font-size: 1.5em;
}

/*
 * Pagination
 */
.page-navigation {
  font-weight: 500;
}

.page-navigation__item--prev {
  margin-right: 1rem;
}

.page-navigation__item--next {
  margin-left: 1rem;
}


/*
 * News system
 */

/* Latest */
.frame.color-white .news-latest {
  text-decoration: none;
}

.frame.color-white .news-latest a {
  text-decoration: none;
}

.frame.color-white .news-latest a:hover {
  text-decoration: none;
}

.color-default .news-latest .media-box__content {
  color: #000;
}

.news-latest .news-item {
  margin-bottom: 0;
}

.news-item {
  margin-bottom: 1.5rem;
}


/* Date menu */
.news-datemenu {
  display: inline-block;
  position: relative;
}

.news-datemenu__button {
  padding: 12px 16px;
  border: none;
  cursor: pointer;
}

.news-datemenu__options {
  display: none;
  position: absolute;
  z-index: 1;
}

.news-datemenu:hover .news-datemenu__options {
  display: block;
}

.news-datemenu__option {
  padding: 6px 16px;
  text-decoration: none;
  display: block;
  width: 94px;
  text-align: left;
}

.news-datemenu:hover .news-datemenu__option:hover {
  background-color: #007aff;
}


/* List */
.news-list .news-item__image {
  width: 100%;
  display: block;
}

.news-list .page-navigation {
  margin-bottom: 1.5rem;
}

.news-list .page-navigation--below {
  text-align: right;
}

.news-list .page-navigation__row {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.news-list .page-navigation__col-navigation {
  margin-left: auto;
}

/* Detail */

.news-detail .news-item__meta-item {
  margin-right: 1rem;
}

.news-detail .news-item__meta-item:last-child {
  margin-right: 0;
}

.news-detail .news-img-wrap .mediaelement-image img {
  margin-bottom: .5rem;
  width: 100%;
}

.news-detail .news-item__content {
  overflow: hidden;
}

.news-detail .news-item__teaser {
  font-weight: 400;
}

.news-detail .news-item__media {
  margin-bottom: 1.5rem;
}

@media (min-width: 640px) {
  .news-detail .news-item__media {
    float: right;
    margin-left: 1.5rem;
  }
}

.news-detail .news-item__media-item {
  margin-bottom: 1.5rem;
}

.news-detail .news-item__media-item:last-child {
  margin-bottom: 0;
}

/* Related files */
.news-detail .news-item__related {
  margin-top: 1.5rem;
}

.news-detail .news-item__file-size {
  font-size: 0.8rem;
}

/*
 * News month filter
 */
.news-month-filter {
  overflow-x: scroll;
  overflow-y: hidden;
}

@media (min-width: 700px) {
  .news-month-filter {
    overflow: visible;
  }
}

.news-month-filter__month {
  position: relative;
  font-weight: 500;
  padding: .75rem;
}

.news-month-filter__month.button + .news-month-filter__month.button {
  margin-left: 0;
}

.news-month-filter__arrow {
  width: 3rem;
  height: 1rem;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  bottom: -1rem;
}


/*
 * Events (tx_eventnews)
 */

/* General */
.event-item__header, .job-item__header {
  font-weight: 500;
}


.event-item__ics-icon, .job-item__user-icon {
  margin-right: .75rem;
  font-size: 1.5em;
}

/* List */
.event-list__inner {
  padding: 3rem 2rem 2.5rem;
}

@media (min-width: 1200px) {
  .event-list__inner {
    padding: 4rem 5rem 2.5rem;
  }
}

.event-list .event-item__date {
  display: block;
}

.event-list .media-box__content {
  padding: 1.75rem 2rem;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.event-list .media-box__image {
  height: 100%;
  min-height: auto;
}

@media (min-width: 1200px) {
  .event-list .media-box__media {
    max-height: 300px;
  }
}

.event-list .event-item__teaser {
  margin-bottom: 1.5rem;
}


/* Latest | Events & Stellenanzeigen*/
.event-latest, .job-latest {
  padding: 3rem 3rem 3rem;
}

@media (min-width: 1200px) {
  .event-latest, .job-latest {
    padding: 3rem 8rem 3.125rem;
  }
}

.event-latest__header, .job-latest__header {
  margin-bottom: 3.5rem;
}

.event-latest .event-item, .job-latest .job-item {
  padding-bottom: 1.25rem;
  margin-bottom: 1.25rem;
}

.event-latest .event-item.border-wrap--bottom,
.bite-jobs-latest .bite-jobs-latest__item.border-wrap--bottom {
  padding-top: 0;
}

.event-latest .event-item__teaser, .job-latest .job-item__teaser {
  margin-bottom: -.5rem;
}

.event-latest__footer .button, .job-latest__footer .button {
  margin-right: .5rem;
}

.event-latest__footer .button:last-child, .job-latest__footer .button:last-child {
  margin-right: .5rem;
}


/*
 * Grid
 * CSS for our css grid system and special full height grids
 */
.grid {
  display: -ms-grid;
  display: grid;
}

.grid--template {
  grid-template-areas: "a" "b" "c" "d" "e" "f" "g" "h";
}

.cell-a {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: a;
}

.cell-b {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  grid-area: b;
}

.cell-c {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  grid-area: c;
}

.cell-d {
  -ms-grid-row: 4;
  -ms-grid-column: 1;
  grid-area: d;
}

.cell-e {
  -ms-grid-row: 5;
  -ms-grid-column: 1;
  grid-area: e;
}

.cell-f {
  -ms-grid-row: 6;
  -ms-grid-column: 1;
  grid-area: f;
}

.cell-g {
  -ms-grid-row: 7;
  -ms-grid-column: 1;
  grid-area: g;
}

.cell-h {
  -ms-grid-row: 8;
  -ms-grid-column: 1;
  grid-area: h;
}

@media (min-width: 768px) {
  .grid--template-1--m {
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    -ms-grid-rows: auto auto auto;
    grid-template-rows: auto auto auto;
    grid-template-areas: "a b" "a b" "c c";
  }

  .grid--template-2--m {
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    -ms-grid-rows: min-content max-content;
    grid-template-rows: min-content max-content;
    grid-template-areas: "a b" "c b";
  }

  .cell > * {
    height: 100%;
  }
}

@media (min-width: 768px){
  .grid--template-1--m > .cell-a {
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
    -ms-grid-column: 1;
  }

  .grid--template-2--m > .cell-a {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
  }
  .grid--template-1--m > .cell-b {
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
    -ms-grid-column: 2;
  }

  .grid--template-2--m > .cell-b {
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
    -ms-grid-column: 2;
  }
  .grid--template-1--m > .cell-c {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
  }

  .grid--template-2--m > .cell-c {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }
}


/*
 * RIGHT SIDEBAR
 */
.sidebar--right {
}


/*
 * FOOTER
 */
.footer {
  padding: 5rem 0 4rem;
}

.footer a {
  color: inherit;
}

/* Footer "item" (border + padding) */
.footer__item {
  border: 1px solid;
  border-left: none;
  border-right: none;
  padding: 1rem 0;
}

/* Footer nav */
.footer-nav__link {
  display: block;
  padding: 1rem 0;
  border-bottom: none;
}

/*
 * Sort out the border-story in various viewports
 *
 * We always start with doing that via the footer nav (because it's the thing in
 * the middle) and if that is not sufficient, we change the other items
 * (address, newsletter). Works good so far.
 *
 * I found that it was much more complicated when doing it in another way, but
 * it's obviously still not a very modular solution and relies on the order of
 * the items. I'd love to upgrade this to a better solution if you have one!
 */
.footer-nav--first .footer-nav__item:first-child .footer-nav__link {
  border-top: 0;
}

@media (min-width: 480px) {
  .footer-nav--last .footer-nav__item:first-child .footer-nav__link {
    border-top: 0;
  }
}

@media (min-width: 640px) {
  .footer-nav .footer-nav__item:first-child .footer-nav__link {
    border-top: 1px solid;
  }

  .footer__address {
    border-bottom: 0;
  }
}

@media (min-width: 1024px) {
  .footer__address {
    border-bottom: 1px solid;
  }

  .footer-nav .footer-nav__item:last-child .footer-nav__link {
    border-bottom: 1px solid;
  }
}

/* Newsletter registration form */
.footer .newsletter-registration-form {
  margin-bottom: -1.5rem;
}


/*
 * HIDDEN & VISIBLE
 *
 * Must be last as it has to overwrite other display-rules.
 */
.hidden {
  display: none;
}

.invisible {
  visibility: hidden;
}

.visible {
  display: block;
}

.visible--inline {
  display: inline;
}


/*
 * MEDIA QUERY - XS
 */
@media (min-width: 480px) {
  /*
   * HELPER & COMPONENTS
   */
  /*
   * Width classes
   */
  .w20p--xs {
    width: 20%;
  }

  .w25p--xs {
    width: 25%;
  }

  .w33p--xs {
    width: 33%;
  }

  .w50p--xs {
    width: 50%;
  }

  .w60p--xs {
    width: 60%;
  }

  .w75p--xs {
    width: 75%;
  }

  .w80p--xs {
    width: 80%;
  }

  .w100p--xs {
    width: 100%;
  }

  /*
   * Flex basis classes
   */
  .f20p--xs {
    -ms-flex-preferred-size: 20%;
    flex-basis: 20%;
  }

  .f25p--xs {
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
  }

  .f25p--xs {
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
  }

  .f33p--xs {
    -ms-flex-preferred-size: 33%;
    flex-basis: 33%;
  }

  .f50p--xs {
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
  }

  .f60p--xs {
    -ms-flex-preferred-size: 60%;
    flex-basis: 60%;
  }

  .f75p--xs {
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
  }

  .f80p--xs {
    -ms-flex-preferred-size: 80%;
    flex-basis: 80%;
  }

  .f100p--xs {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
  }


  /*
   * Flexbox modifiers
   */
  .f-direction-column--xs {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .f-direction-row--xs {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }

  .f-direction-column-reverse--xs {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }

  .f-align-items-center--xs {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .f-push-left--xs {
    margin-left: auto;
  }


  /*
   * HIDDEN & VISIBLE
   */
  .hidden--xs {
    display: none;
  }

  .visible--xs {
    display: block;
  }
}


/*
 * MEDIA QUERY - S
 */
@media (min-width: 640px) {
  /*
   * HELPER & COMPONENTS
   */
  /*
   * Width classes
   */
  .w20p--s {
    width: 20%;
  }

  .w25p--s {
    width: 25%;
  }

  .w33p--s {
    width: 33%;
  }

  .w50p--s {
    width: 50%;
  }

  .w60p--s {
    width: 60%;
  }

  .w75p--s {
    width: 75%;
  }

  .w80p--s {
    width: 80%;
  }

  .w100p--s {
    width: 100%;
  }


  /*
   * Flex basis classes
   */
  .f20p--s {
    -ms-flex-preferred-size: 20%;
    flex-basis: 20%;
  }

  .f25p--s {
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
  }

  .f25p--s {
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
  }

  .f33p--s {
    -ms-flex-preferred-size: 33%;
    flex-basis: 33%;
  }

  .f50p--s {
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
  }

  .f60p--s {
    -ms-flex-preferred-size: 60%;
    flex-basis: 60%;
  }

  .f75p--s {
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
  }

  .f80p--s {
    -ms-flex-preferred-size: 80%;
    flex-basis: 80%;
  }

  .f100p--s {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
  }


  /*
   * Flexbox modifiers
   */
  .f-direction-column--s {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .f-direction-row--s {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }

  .f-direction-column-reverse--s {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }

  .f-push-left--s {
    margin-left: auto;
  }


  /*
   * HIDDEN & VISIBLE
   */
  .hidden--s {
    display: none;
  }

  .visible--s {
    display: block;
  }
}


/*
 * MEDIA QUERY - M
 */
@media (min-width: 768px) {
  /*
   * HELPER & COMPONENTS
   */
  /*
   * Width classes
   */
  .w20p--m {
    width: 20%;
  }

  .w25p--m {
    width: 25%;
  }

  .w33p--m {
    width: 33.3333333333%;
  }

  .w50p--m {
    width: 50%;
  }

  .w60p--m {
    width: 60%;
  }

  .w66p--m {
    width: 66.6666666666%;
  }

  .w75p--m {
    width: 75%;
  }

  .w80p--m {
    width: 80%;
  }

  .w100p--m {
    width: 100%;
  }


  /*
   * Flex basis classes
   */
  .f20p--m {
    -ms-flex-preferred-size: 20%;
    flex-basis: 20%;
  }

  .f25p--m {
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
  }

  .f25p--m {
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
  }

  .f33p--m {
    -ms-flex-preferred-size: 33%;
    flex-basis: 33%;
  }

  .f50p--m {
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
  }

  .f60p--m {
    -ms-flex-preferred-size: 60%;
    flex-basis: 60%;
  }

  .f75p--m {
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
  }

  .f80p--m {
    -ms-flex-preferred-size: 80%;
    flex-basis: 80%;
  }

  .f100p--m {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
  }

  .f-auto--m {
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
  }


  /*
   * Flexbox modifiers
   */
  .f-direction-column--m {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .f-direction-row--m {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }

  .f-direction-column-reverse--m {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }

  .f-align-items-center--m {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .f-grow-0--m {
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
  }


  /*
   * HIDDEN & VISIBLE
   */
  .hidden--m {
    display: none;
  }

  .visible--m {
    display: block;
  }
}


/*
 * MEDIA QUERY - L
 */
@media (min-width: 1024px) {
  /*
   * HELPER & COMPONENTS
   */
  /*
   * Width classes
   */
  .w20p--l {
    width: 20%;
  }

  .w25p--l {
    width: 25%;
  }

  .w33p--l {
    width: 33%;
  }

  .w50p--l {
    width: 50%;
  }

  .w60p--l {
    width: 60%;
  }

  .w75p--l {
    width: 75%;
  }

  .w80p--l {
    width: 80%;
  }

  .w100p--l {
    width: 100%;
  }


  /*
   * Flex basis classes
   */
  .f20p--l {
    -ms-flex-preferred-size: 20%;
    flex-basis: 20%;
  }

  .f25p--l {
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
  }

  .f25p--l {
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
  }

  .f33p--l {
    -ms-flex-preferred-size: 33%;
    flex-basis: 33%;
  }

  .f50p--l {
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
  }

  .f60p--l {
    -ms-flex-preferred-size: 60%;
    flex-basis: 60%;
  }

  .f75p--l {
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
  }

  .f80p--l {
    -ms-flex-preferred-size: 80%;
    flex-basis: 80%;
  }

  .f100p--l {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
  }


  /*
   * Flexbox modifiers
   */
  .f-direction-column--l {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .f-direction-row--l {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }

  .f-direction-column-reverse--l {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }

  .f-1--l {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
  }


  /*
   * HIDDEN & VISIBLE
   */
  .hidden--l {
    display: none;
  }

  .visible--l {
    display: block;
  }

  .visible-flex--l {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}


/*
 * MEDIA QUERY - XL
 */
@media (min-width: 1200px) {
  /*
   * HELPER & COMPONENTS
   */
  /*
   * Width classes
   */
  .w20p--xl {
    width: 20%;
  }

  .w25p--xl {
    width: 25%;
  }

  .w33p--xl {
    width: 33%;
  }

  .w50p--xl {
    width: 50%;
  }

  .w60p--xl {
    width: 60%;
  }

  .w75p--xl {
    width: 75%;
  }

  .w80p--xl {
    width: 80%;
  }

  .w100p--xl {
    width: 100%;
  }


  /*
   * Flex basis classes
   */
  .f-0--xl {
    -webkit-box-flex: 0;
    -ms-flex: 0;
    flex: 0;
  }

  .f20p--xl {
    -ms-flex-preferred-size: 20%;
    flex-basis: 20%;
  }

  .f25p--xl {
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
  }

  .f25p--xl {
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
  }

  .f33p--xl {
    -ms-flex-preferred-size: 33%;
    flex-basis: 33%;
  }

  .f50p--xl {
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
  }

  .f60p--xl {
    -ms-flex-preferred-size: 60%;
    flex-basis: 60%;
  }

  .f75p--xl {
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
  }

  .f80p--xl {
    -ms-flex-preferred-size: 80%;
    flex-basis: 80%;
  }

  .f100p--xl {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
  }


  /*
   * Flexbox modifiers
   */
  .f-direction-column--xl {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .f-direction-row--xl {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }

  .f-direction-column-reverse--xl {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }

  .f-justify-content-space-between--xl {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }

  .f-auto--xl {
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
  }

  .flex-auto--xl {
    -ms-flex-preferred-size: auto;
    flex: auto;
  }


  /*
   * HIDDEN & VISIBLE
   */
  .hidden--xl {
    display: none;
  }

  .visible--xl {
    display: block;
  }
}


/*
 * MEDIA QUERY - XXL
 */
@media (min-width: 1500px) {
  /*
   * HELPER & COMPONENTS
   */
  /*
   * Page layout
   */
  .container {
    padding-left: 0;
    padding-right: 0;
  }


  /*
   * Width classes
   */
  .w20p--xxl {
    width: 20%;
  }

  .w25p--xxl {
    width: 25%;
  }

  .w33p--xxl {
    width: 33%;
  }

  .w50p--xxl {
    width: 50%;
  }

  .w60p--xxl {
    width: 60%;
  }

  .w75p--xxl {
    width: 75%;
  }

  .w80p--xxl {
    width: 80%;
  }

  .w100p--xxl {
    width: 100%;
  }


  /*
   * Flex basis classes
   */
  .f20p--xxl {
    -ms-flex-preferred-size: 20%;
    flex-basis: 20%;
  }

  .f25p--xxl {
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
  }

  .f33p--xxl {
    -ms-flex-preferred-size: 33%;
    flex-basis: 33%;
  }

  .f50p--xxl {
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
  }

  .f60p--xxl {
    -ms-flex-preferred-size: 60%;
    flex-basis: 60%;
  }

  .f75p--xxl {
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
  }

  .f80p--xxl {
    -ms-flex-preferred-size: 80%;
    flex-basis: 80%;
  }

  .f100p--xxl {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
  }


  /*
   * Flexbox modifiers
   */
  .f-direction-column--xxl {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .f-direction-row--xxl {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }

  .f-direction-column-reverse--xxl {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }


  /*
   * HIDDEN & VISIBLE
   */
  .hidden--xxl {
    display: none;
  }

  .visible--xxl {
    display: block;
  }
}


/*
 * PRINT
 */
@media print {
  /*
   * GENERAL
   */
  html {
    color: #000; /* Saves ink. */
  }
}


/*
 * IE & Edge Compatibility
 */

@media all and (-ms-high-contrast:none) {
  html{
    height: 100%;
  }

  body{
    height: 100%;
    position: relative;
  }

  body{
    margin-top: 0!important;
  }

  ::-webkit-scrollbar {
    position: fixed;
    right: 0;
  }

  .header {
    min-width: 1500px;
  }

  .mxw60p {
    width: 60%;
  }

  .logo__image {
    max-height: 63px;
  }

  .slider__item--video .slider__video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: auto;
    width: 100%;
  }

  .media-box--horizontal .media-box__content {
    max-width: 100%;
  }

  .slider--content .swiper-slide .media-box, .slider--content .swiper-slide .media-box .media-box__content {
    display: inline-block;
    position: relative;

  }

  .page--standard .teaser {
    margin-top: 136px;
  }

  .slider--content {
    min-width: 1100px;
    max-width: 1200px;
    margin: 0 auto;
  }

  .swiper-slide .media-box--vertical.media-box--image-first .media-box__imageu {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: auto;
    width: 100%;
  }

  .swiper-slide .media-box--vertical.media-box--image-first .media-box__image {
    position: relative;
    width: 100%;
    height: auto;
  }

  .swiper-slide .media-box--vertical.media-box--image-first .media-box__media {

  }

  .swiper-slide .ie-md-media {
    padding-bottom: 60% !important;
  }

  .swiper-slide .media-box--vertical.media-box--image-first .media-box__content {
    -ms-flex-align: start;
    /*min-height: 280px;*/
  }

  .swiper-slide .media-box__content-inner {
    min-width: 252px;
  }

  .page--start .swiper-slide .media-box--vertical.media-box--image-first .media-box__content {
    min-height: 60px;
  }


  .swiper-slide .media-box--vertical.media-box--image-first .media-box__arrow--top {
    top: -8%;
  }

  .media-box--vertical-50-50 .media-box__content.flex.f-align-items-center{
    display: block;
  }

  /* Bottom & top */
  .media-box__arrow--bottom,
  .media-box__arrow--top {
    left: 50%;
  }

  .media-box__arrow--top {
    top: 47%;
  }

  /* Left & right */
  .media-box__arrow--left,
  .media-box__arrow--right {
    top: 10%;
  }

  .media-box__arrow--left {
    right: -1px;
  }

  .slider--content .media-box__arrow {
    display: none!important;
  }

  /*media all*/
  .ce-intext .ce-column, .ce-intext .ce-gallery .image, .ce-intext .ce-gallery .image-embed-item {
    max-width: 320px;
  }

  .styled-select__input::-ms-expand {
    display: none;
  }

  .styled-select__input {
    background: #cce1f0;
  }

  .news-year-filter .styled-select__input {
    background: #00305d;
  }

  .event-list .media-box__content  {
    min-height: 317px;
  }

  .event-list .media-box__media {
    min-height: 275px;
  }

  .event-list .media-box__media .media-box__arrow--bottom {
    top: -45%;
  }

  .event-list .media-box__media .media-box__image{
    height: 300px;
  }


}


@media (min-width: 768px) and (-ms-high-contrast:none) {
  .slider--default .slider__item {
    min-height: 100vh;
  }
}

@media (min-width: 0px) and (-ms-high-contrast:none) {
  body {
    min-width: 1500px;
  }

    .media-box--arrow.media-box--image-first .media-box__arrow--top {
      display: none;
    }

    .media-box--arrow.media-box--image-first .media-box__arrow--left {
      display: block;
    }

  .media-box--arrow.media-box--image-last .media-box__arrow--bottom {
    display: none;
  }

  .media-box--arrow.media-box--image-last .media-box__arrow--right {
    display: block;
  }

  .media-box--horizontal {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }

  .media-box--horizontal .media-box__image {
    height: 100%;
  }

  .media-box--horizontal .media-box__content {
    max-width: 50%;
  }

  .media-box__link-icon {
    font-size: .80rem;
  }

  .event-list__inner {
    padding: 4rem 5rem 2.5rem;
  }

  .event-list .media-box__media {
    max-height: 300px;
  }

  .event-latest, .job-latest {
    padding: 3rem 8rem 3.125rem;
  }
}

@media (min-width: 1500px) and (-ms-high-contrast:none) {
  html{
    height: 100%;
    overflow-y: hidden;
  }

  body{
    height: 100%;
    position: relative;
    overflow-y: auto;
  }

  body{
    margin-top: 0!important;
  }

  .header {
    position: fixed;
    right: 16px;
  }
}

/* EDGE */
@supports (-ms-ime-align:auto) {
  .slider__item--video .slider__video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: auto;
    width: 100%;
  }
}