@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
 *
 * Modular scale:
 * 16px @ 1.414 (http://www.modularscale.com/?1&em&1.414&web&text)
 */
body {
  background: #fff;
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  font-size: 106.25%;
  line-height: 1.414;
  margin: 0;
  padding: 0;
  -ms-overflow-style: scrollbar;
}

/*
 * 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 {
  box-sizing: border-box;
}

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

/*
 * Headings
 *
 * Modular scale:
 * 16px @ 1.414 (http://www.modularscale.com/?1&em&1.414&web&text)
 *
 * Double-stranded hierarchy:
 * 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 {
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  margin-bottom: .5em;
  line-height: 1.25;
}

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

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

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

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

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

/*
 * Vertical Rhythm
 *
 * Modular scale:
 * 16px @ 1.414 (http://www.modularscale.com/?1&em&1.414&web&text)
 *
 * 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, h2, h3, h4, h5, h6, hgroup,
ul, ol, dl,
blockquote, p, address,
fieldset, figure,
pre, hr,
table,
.logo,
.fotorama,
.article,
.section > .container > h1,
.section > .container > h2,
.section > .container > h3,
.section > .container > h4,
.section > .container > h5,
.section__header,
.media-box,
.fotorama,
.responsive-table__wrap,
.responsive-iframe__wrap,
.csc-form-element,
.pagination,
.search-result {
  margin: 0 0 1.414rem 0;
}

/*
 * Images
 */
img {
  max-width: 100%;
  height: auto;
}

/*
 * Lists
 */
ul {
}

ol {
}

li {
}

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

/*
 * Quotes
 */
blockquote {
  padding: 1.999rem 1.999rem .585rem;
}

blockquote p {
}

cite {
}

/*
 * Tables
 */
table {
  width: 100%;
  border-collapse: collapse;
}

caption {
}

tr {
}

th,
td {
  padding: 0.707rem 1.414rem;
  border-style: solid;
  border-width: 1px;
}

th {
}

td {
}

/*
 * Forms
 *
 * Form and inputs (text-like) elements get styled here, input[type="submit"] and
 * [type="button"] get their styles from the button class.
 */
fieldset {
  padding: 2.827rem 2.827rem 1.413rem;
  /* We need to compensate for the
     margin-bottom every element has, so we set 1.413rem = 2.827rem - 1.414rem */
  border-width: 1px;
  border-style: solid;
}

legend {
  display: none;
}

label {
  display: block;
  margin-bottom: .25rem;
}

/* Placeholder */
::-webkit-input-placeholder {
  color: rgba(0, 0, 0, 0.4);
  opacity: 1;
}

::placeholder {
  color: rgba(0, 0, 0, 0.4);
  opacity: 1;
}

/* Global fields */
input,
textarea,
select {
  padding: 0.5rem 0.707rem;
  border-style: solid;
  border-width: 1px;
  width: 100%;
}

/* 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 */
}

input[type=radio] {
}

input[type=checkbox] {
}

/* Read-only and disabled input fields */
input[type=text][readonly],
input[type=url][readonly],
input[type=tel][readonly],
input[type=number][readonly],
input[type=color][readonly],
input[type=email][readonly],
input[type=search][readonly],
input[type=text][disabled],
input[type=url][disabled],
input[type=tel][disabled],
input[type=number][disabled],
input[type=color][disabled],
input[type=email][disabled],
input[type=search][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 {
}

/* Select */
select {
}

/*
 * CSC Mailform
 * Basic styles for the default TYPO3 form
 */

/* Notice */
.csc-form-element label em {
  font-size: 14px;
  font-style: normal;
}

/* Confirmation page */
.csc-mailform-confirmation label {
  font-weight: 700;
}

/*
 * Powermail
 */
.parsley-errors-list.filled {
  margin: 0;
  padding: 0;
  color: #d60000;
  list-style-type: none;
  font-size: .9375rem;
}

.parsley-error {
  border-color: #d60000;
}

.parsley-error:focus {
  outline: none;
}

/*
 * Text formatting
 */
a {
  text-decoration: none;
}

a:hover {
}

b,
strong {
}

i {
}

address {
  font-style: normal;
}

/*
 * 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: 1156px;
  padding: 0 1.414rem;
}

/*
 * Row modification
 */
.row--big-gutter {
  margin-left: -1.999rem;
}

.row--big-gutter > .col {
  padding-left: 1.999rem;
}

.row--huge-gutter {
  margin-left: -3.998rem;
}

.row--huge-gutter > .col {
  padding-left: 3.998rem;
}

/*
 * Width classes
 *
 * These classes are examples used in our standard to control the width of the
 * column-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!
 *
 * See examples in the media query section at the end of this file.
 */
.w20p {
  width: 20%;
}

.w50p {
  width: 50%;
}

.w60p {
  width: 60%;
}

.w80p {
  width: 80%;
}

.mw960px {
  max-width: 960px;
}

/*
 * Logo
 */
.logo {
  display: inline-block;
}

.logo:hover .logo__image {
  opacity: 0.7;
}

.logo__image,
.logo > img {
  display: block;
}

/*
 * Logo (text)
 */
.logo--text {
  text-decoration: none;
  width: auto;
  font-size: 1.3em;
}

/*
 * List component
 *
 * Used for standard list styles - style the design with your own component,
 * e.g. .secondary-navigation__item { background: blue; } etc.
 *
 * Example:
 * <nav class="secondary-navigation">
 *   <ul class="secondary-navigation__list list">
 *     <li class="secondary-navigation__item">
 *       <a class="secondary-navigation__link">Our Work</a>
 *       <ul class="secondary-navigation__list secondary-navigation__list--sub list">
 *         <li class="secondary-navigation__item">
 *           <a class="secondary-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 .secondary-navigation__list--sub .secondary-navigation__link).
 * Also, it's more performant. ;)
 */
.list {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

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

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

.dropdown-item__link {
  cursor: pointer;
}

.dropdown-item:hover > .dropdown-item__list {
  display: block;
}

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

}

/* Right aligned dropdown-item */
.dropdown-item--right .dropdown-item__list {
  left: auto;
  right: 0;
}


/*
 * Dropdown component
 */
.dropdown {
  z-index: 2;
  background: #fff;
  width: 300px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
}

.dropdown__link {
  padding: .75rem 1.414rem;
  display: block;
}

.dropdown__link:hover {
  background: rgba(0, 0, 0, 0.04);
}


/*
 * 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 {
  cursor: pointer;
  display: inline-block;
  font: inherit;
  min-width: inherit;
  overflow: visible;
  padding: 0.707em 1em;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  border: 0 none;
}

.button:hover {
}

/* Primary/secondary */
.button--primary,
.button--secondary {
  color: #fff;
}

/* Framed */
.button--framed {
  border-width: 2px;
  border-style: solid;
}

.button--framed:hover {
  color: #fff;
}

/* Muted */

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

/*
 * Text helper
 */
.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

/*
 * Float helper
 */
.fl-l {
  float: left;
}

.fl-r {
  float: right;
}

.fl-n {
  float: none;
}

/*
 * Display helper
 */
.d-b {
  display: block;
}

.d-ib {
  display: inline-block;
}

.d-i {
  display: inline;
}

/*
 * Legal navigation
 */
.legal-navigation__item {
  margin-right: .707rem;
}

.legal-navigation__item--company {
  margin-right: 1.999rem;
}

/*
 * Social navigation
 */
.social-navigation__item {
  margin-right: 0.5rem;
}

.social-navigation__item:last-child {
  margin-right: 0;
}

.social-navigation__link {
  width: 42px;
  height: 42px;
  display: block;
  text-align: center;
  line-height: 42px;
  font-size: 1.414rem;
}

.social-navigation__link .fa {
  position: relative;
  top: 1px;
}

/*
 * Social navigation brand colors
 * See: http://brandcolors.net/
 */
.social-navigation__link:hover {
  color: #fff;
}

.social-navigation__link--twitter:hover {
  background: #55acee;
}

.social-navigation__link--facebook:hover {
  background: #3b5998;
}

.social-navigation__link--google-plus:hover {
  background: #dd4b39;
}

/*
 * Animated "hamburger" icon
 * Source: https://github.com/jonsuh/hamburgers
 */
.hamburger {
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, -webkit-filter;
  transition-property: opacity, filter;
  transition-property: opacity, filter, -webkit-filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible;
  padding: 9px;
}

.hamburger:hover {
  opacity: 0.7;
}

.hamburger-box {
  width: 36px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
  width: 36px;
  height: 4px;
  border-radius: 1px;
  position: absolute;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  transition-duration: 0.15s;
  transition-timing-function: ease;
}

.hamburger-inner::before,
.hamburger-inner::after {
  content: "";
  display: block;
}

.hamburger-inner::before {
  top: -10px;
}

.hamburger-inner::after {
  bottom: -10px;
}

/* White */
.index .hamburger-inner,
.index .hamburger-inner::before,
.index .hamburger-inner::after {
  background-color: #fff;
}

/* Slider */
.hamburger--slider .hamburger-inner {
  top: 2px;
}

.hamburger--slider .hamburger-inner::before {
  top: 10px;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
  transition-timing-function: ease;
  transition-duration: 0.2s;
}

.hamburger--slider .hamburger-inner::after {
  top: 20px;
}

.hamburger--slider.is-active .hamburger-inner {
  -webkit-transform: translate3d(0, 10px, 0) rotate(45deg);
  transform: translate3d(0, 10px, 0) rotate(45deg);
}

.hamburger--slider.is-active .hamburger-inner::before {
  -webkit-transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0);
  transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0);
  opacity: 0;
}

.hamburger--slider.is-active .hamburger-inner::after {
  -webkit-transform: translate3d(0, -20px, 0) rotate(-90deg);
  transform: translate3d(0, -20px, 0) rotate(-90deg);
}

/*
 * Slider
 */

/* Glide.js overrides */
.glide__track {
  padding: 0;
  margin: 0;
}

/* Default theme */
.glide__bullets {
  position: absolute;
  z-index: 2;
}

.glide--horizontal .glide__bullets {
  bottom: 3.5em;
  left: 0;
  width: 100%;
  height: 12px;
  text-align: center;
}

.glide__bullet {
  opacity: 0.3;
  background: #fff;
  border-radius: 50%;
  height: 12px;
  width: 12px;
  border: 0 none;
  margin: 0 0.3535rem;
  -webkit-appearance: none;
  padding: 0;
}

.glide__bullet.active {
  opacity: 1;
}

.glide__slide .hero__content {
  padding-bottom: 6em;
}

/*
 * Page overlay
 */
.page-overlay {
  z-index: 100;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #000;
  visibility: hidden;
  opacity: 0;
  cursor: pointer;
  -webkit-transition: visibility 0s ease, opacity .2s ease;
  -moz-transition: visibility 0s ease, opacity .2s ease;
  -o-transition: visibility 0s ease, opacity .2s ease;
  transition: visibility 0s ease, opacity .2s ease;
}

/* Open @ off canvas */
.offside-js--is-open .page-overlay {
  opacity: 0.3;
  visibility: visible;
}

/**
 * Offside modifications
 */
.offside {
  width: 260px;
}

.offside--right {
  right: -260px;
}

.offside--right.is-open,
.offside-js--is-right .offside-sliding-element {
  -webkit-transform: translate3d(-260px, 0, 0);
  -moz-transform: translate3d(-260px, 0, 0);
  -ms-transform: translate3d(-260px, 0, 0);
  -o-transform: translate3d(-260px, 0, 0);
  transform: translate3d(-260px, 0, 0);
}

/*
 * Fill space component
 * Component to create an object with fixed width and
 * an element next to it which fills up the remaining space
 *
 * Example:
 * <div class="fill-space">
 *   <div class="fill-space__fixed">
 *     I have a fixed width.
 *   </div>
 *   <div class="fill-space__fluid">
 *     <div class="fill-space_element">
 *       I'm fluid!
 *     </div>
 *   </div>
 * </div>
 */
.fill-space {
  display: table;
}

.fill-space__fixed {
  display: block;
}

.fill-space__fluid {
  display: table-cell;
  width: 100%;
}

.fill-space__fluid-element {
  width: 100%;
}

/*
 * Section component
 */
.section {
  padding: 3.998rem 0 2.584rem 0;
  border-style: solid;
  border-width: 0 0 1px 0;
}

/* .. sadly, because CMS.. */
.section__header,
.section > .container > div > h1,
.section > .container > div > h2,
.section > .container > div > h3,
.section > .container > div > h4,
.section > .container > div > h5 {
  font-size: 1.999rem;
  text-align: center;
}

/*
 * News
 */
.news--single .article__header {
  border-style: solid;
  border-width: 0 0 2px 0;
}

/*
 * Media box
 */
.media-box {
  background: #fff;
  border-style: solid;
  border-width: 1px;
}

.media-box__inner {
  padding: 0.707rem 1.414rem 0;
}

/*
 * Vertical navigation
 */
.vertical-navigation__link {
  padding: 0.707rem 1.414rem;
  display: block;
  border-style: solid;
  border-width: 0 0 1px;
}

/*
 * Margin helper
 * Helper for applying consistent margins with vertical rhythm and modular scale
 * in mind. You can add media query dependant classes with e.g. the s/m/l/xl
 * modifier classes we use, f.e. mb--m.
 *
 * Also, add what you need to have but take a look at the rhythm/scale!
 */

/* Regular margins */
.m {
  margin: 1.414rem;
}

.mr {
  margin-right: 1.414rem;
}

.ml {
  margin-left: 1.414rem;
}

.mb {
  margin-bottom: 1.414rem;
}

.mt {
  margin-top: 1.414rem;
}

.mv {
  margin-top: 1.414rem;
  margin-bottom: 1.414rem;
}

.mh {
  margin-left: 1.414rem;
  margin-right: 1.414rem;
}

.m0 {
  margin: 0;
}

/* Negative margins */
.n-mb {
  margin-bottom: -1.414rem;
}

/* Tiny margins */
.mb-tiny {
  margin-bottom: 0.354rem;
}

/* Small margins */
.mb-small {
  margin-bottom: 0.707rem;
}

/* Big margins */
.mb-big {
  margin-bottom: 1.999rem;
}

/* Huge margins */
.mb-huge {
  margin-bottom: 3.998rem;
}

/*
 * Padding helper
 *
 * Helper for applying consistent paddings with vertical rhythm and modular scale
 * in mind. You can add media query dependant classes with e.g. the s/m/l/xl
 * modifier classes we use, f.e. pb--m.
 *
 * Also, add what you need to have but take a look at the rhythm/scale!
 */

/* Regular paddings */
.p {
  padding: 1.414rem;
}

.pr {
  padding-right: 1.414rem;
}

.pl {
  padding-left: 1.414rem;
}

.pb {
  padding-bottom: 1.414rem;
}

.pt {
  padding-top: 1.414rem;
}

.pv {
  padding-top: 1.414rem;
  padding-bottom: 1.414rem;
}

.ph {
  padding-left: 1.414rem;
  padding-right: 1.414rem;
}

.p0 {
  padding: 0;
}

/* Huge paddings */
.pv-huge {
  padding-top: 3.998em;
}

/*
 * Responsive iFrame
 *
 * Example:
 * <div class="responsive-iframe__wrap">
 *   <iframe class="responsive-iframe"></iframe>
 * </div>
 */
.responsive-iframe__wrap {
  position: relative;
  padding-bottom: 56%;
  height: 0;
  overflow: hidden;
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*
 * HEADER
 */
.header {
  border-width: 0 0 1px 0;
  border-style: solid;
}

.header .logo {
  margin-bottom: 0;
  margin-right: auto;
}

.page--index .header {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  border: 0 none;
  z-index: 20;
}

/* Navigation */
.main-navigation {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.main-navigation--below-hero {
  display: none;
}

@media (min-width: 768px) {
  .main-navigation--below-hero {
    display: block;
    padding: 1rem 0;
    border-width: 0 0 1px 0;
    border-style: solid;
    margin-bottom: 3.998rem;
  }
}




/*
 * Navigation toggle
 */
.navigation-toggle {
  color: #fff;
}


/*
 * Header meta area
 */
.header__meta {
  margin-left: auto;
  display: flex;
  align-items: center;
}

@media (min-width: 768px) {
  .header__meta {
    border-left: 1px solid rgba(0, 0, 0, 0.2);
    padding-left: 1rem;
    margin-left: 1rem;
  }

  .page--index .header__meta {
    border-left: 1px solid rgba(255, 255, 255, 0.5);
  }
}

.header__meta-item {
  margin-left: .5rem;
}

.header__meta-item:first-child {
  margin-left: 0;
}

/*
 * Search dropdown
 */
.search-dropdown .search-form__input {
  border: none;
  width: 100%;
  padding: .75rem 1.414rem;
}

/*
 * Language dropdown
 */
.language-menu {
  position: relative;
}

.language-menu .header__dropdown-toggle {
  padding: .5rem .75rem;
}

@media (min-width: 768px) {
  .language-menu {
    position: static;
  }
}

.language-menu__link {
  display: flex;
  align-items: center;
  align-content: center;
}

.language-menu__link--not-available {
  background: rgba(0, 0, 0, 0.04);
  color: #9c9c9c;
}

.language-menu__link--not-available .language-menu__flag-image {
  filter: grayscale(100%);
}

.language-menu__flag {
  flex: 0 0 auto;
  margin-right: .5rem;
  display: block;
}

.language-menu__flag-image {
  display: block;
}

.language-menu__title {
  flex: 1 1 auto;
}


/*
 * Dropdown toggle
 */
.header__dropdown-toggle {
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.header__dropdown-toggle:hover,
.js-dropdown-item--is-active .header__dropdown-toggle {
  background: rgba(255, 255, 255, 0.15);
}

.header__dropdown-toggle .header__dropdown-icon {
  position: static;
  margin-right: .25rem;
}

@media (min-width: 768px) {
  .header__dropdown-toggle {
    padding: .75rem 1.5rem;
    height: 40px;
    width: auto;
    display: flex;
    font-size: 1rem;
  }
}

.page--index .header__dropdown-toggle {
  color: #fff;
}

/* Dropdown */
.header__dropdown {
  max-width: 200px;
  right: 0;
  left: auto;
}




/*
 *
 */

/*
 * HERO
 */
.hero__background,
.hero--background {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  min-height: 300px;
}

.page--index .hero__background,
.page--index .hero--background {
  min-height: 650px;
}

.hero--background-tint {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.15);
  top: 0;
  left: 0;
}

.page--index .hero {
  position: relative;
}

/* Hero content */
.hero__content,
.hero__content h1 {
  color: #fff;
}

.hero__content {
  max-width: 80%;
  margin: 0 auto;
  position: relative;
}

.page--index .hero__content {
  padding-top: 12rem; /* Careful, magic number. */
}

/* Slider */
.page--index .hero {
}

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

/*
 * MAIN AREA
 */
.main {
  padding-top: 3.998rem;
}


/*
 * Pagination & tx-indexed-serach-browsebox
 *
 * .. because the indexed_search pagination is standard in NO FREAKING WAY.
 */
.pagination__item,
.tx-indexedsearch-browsebox li {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 100%;
  flex: 1 1 100%;
  text-align: center;
}

.pagination__link,
.tx-indexedsearch-browsebox a,
.tx-indexedsearch-browselist-currentPage a {
  padding: .75rem 0;
  width: 100%;
  text-align: center;
  border: 1px solid #e6e8ea;
  border-left-width: 0;
  text-decoration: none;
}

.pagination__item:first-child .pagination__link,
.tx-indexedsearch-browsebox li:first-child a {
  border-left-width: 1px;
}

.pagination__link:hover,
.tx-indexedsearch-browsebox a:hover {
  background: #f4f5f6;
}

.pagination__link.is-active,
.pagination__link.is-active:hover,
.tx-indexedsearch-browselist-currentPage a,
.tx-indexedsearch-browselist-currentPage a:hover {
  color: #fff;
  background: #3575b6;
  border: 1px solid #3575b6;
}

/* Indexed search browsebox specifics */
.tx-indexedsearch-browsebox {
  list-style: none;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.tx-indexedsearch-browsebox li {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.tx-indexedsearch-browsebox a,
.tx-indexedsearch-browselist-currentPage strong {
  display: block;
  width: 100%;
}


/*
 * Search & results
 */
.search-result {
  border-style: solid;
  border-width: 1px;
  padding: 1.45rem;
  margin-bottom: 2.103em;
}

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

/*
 * FOOTER
 */
.footer {
}

.footer__main {
}

.footer__legal {
  text-transform: uppercase;
  font-size: 0.9375rem;
}

/*
 * MISC
 */
.wf-loading .fa {
  display: none;
}

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

.visible {
  display: block !important;
}

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

/*
 * MEDIA QUERY - XS
 */
@media (min-width: 480px) {
  /*
     * GLOBAL
     */
  /*
     * HELPER & COMPONENTS
     */
  /*
     * Margin helper
     */
  .mr--xs {
    margin-right: 1.414rem;
  }

  .n-mb--xs {
    margin-bottom: -1.414rem;
  }

  /* Small */
  .mb-small--xs {
    margin-bottom: 0.707rem;
  }

  /*
     * Float helper
     */
  .fl-l--xs {
    float: left;
  }

  /*
     * HEADER
     */
  .header {
  }

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

  /*
    * MAIN AREA
    */
  .main {
  }

  /*
   * Pagination
   */
  .pagination__link,
  .tx-indexedsearch-browsebox a {
    padding: 1rem 0;
  }

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

  /*
     * FOOTER
     */
  .footer {
  }
}

/*
 * MEDIA QUERY - M
 */
  @media (min-width: 768px) {
  /*
     * GLOBAL
     */
  /*
     * Forms
     */
  input,
  textarea,
  select {
    width: 80%;
  }

  /* Buttons */
  input[type="submit"],
  input[type="button"],
  button {
    width: auto;
  }

  /*
     * HELPER & COMPONENTS
     */
  /*
     * Width classes
     */
  .w25p--m {
    width: 25%;
  }

  .w33p--m {
    width: 33.3333333333%
  }

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

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

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

  /*
     * Push & pull
     */
  .push25p--m {
    left: 25%;
  }

  .pull75p--m {
    left: -75%;
  }

  /*
     * Margin helper
     */
  .mb--m {
    margin-bottom: 1.414rem;
  }

  .mr0--m {
    margin-right: 0;
  }

  /* Small */
  .mb-small--m {
    margin-bottom: 0.707rem;
  }

  /*
   * Float helper
   */
  .fl-r--m {
    float: right;
  }

  .fl-n--m {
    float: none;
  }

  /*
   * Main navigation
   */
  .main-navigation__link {
    display: block;
  }

  .main-navigation__list--first > .main-navigation__item > .main-navigation__link {
    padding: .75rem .5rem;
  }

  .main-navigation__list {
  }

  .page--index .main-navigation__link {
    color: #fff;
  }

  .page--index .main-navigation__list--sub .main-navigation__item:hover {
    background: rgba(0, 0, 0, 0.04);
  }

  .page--index .main-navigation__item:hover > .main-navigation__link {
    background: rgba(255, 255, 255, 0.15);
  }

  .main-navigation__link.is-active {
    border-style: solid;
    border-width: 0 0 2px;
  }

  .main-navigation__dropdown-icon {
    position: relative;
    top: 1px;
    margin-left: 0.35rem;
  }

  /* Sub navigation (dropdown) */
  .main-navigation__list--sub .main-navigation__list--sub.dropdown-item__list {
    left: 100%;
    top: 0;
  }

  .main-navigation__list--sub .main-navigation__link.is-active {
    border: 0 none;
  }



  /*
     * HEADER
     */
  .header {
  }


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

  /*
     * MAIN AREA
     */
  .main {
  }

  /*
   * Pagination
   */
  .pagination__item,
  .tx-indexedsearch-browsebox li {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }

  .pagination__link,
  .tx-indexedsearch-browsebox a {
    padding: .75rem 1.25rem;
  }

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

  /*
     * FOOTER
     */
  .footer {
  }

  /*
     * HIDDEN & VISIBLE
     */
  .hidden--m,
  .navigation-toggle.navigation-toggle {
    display: none !important;
  }

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

/*
 * MEDIA QUERY - SPECIAL
 */
@media (min-width: 840px) {
  .main-navigation__list--first > .main-navigation__item > .main-navigation__link {
    padding: .75rem .75rem;
  }
}

/*
 * MEDIA QUERY - REVERSE M
 */
@media (max-width: 768px) {
  /*
     * HELPER & COMPONENTS
     */
  /*
     * Responsive table (simple)
     */
  .responsive-table__wrap {
    position: relative;
  }

  .responsive-table {
    width: 100%;
    overflow-y: auto;
  }
}

/*
 * MEDIA QUERY - L
 */
@media (min-width: 1024px) {
  /*
     * HELPER & COMPONENTS
     */
  /*
     * List component
     */
  .list--l {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .list--l > li {
    display: inline-block;
  }

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

  /*
   * Float helper
   */
  .fl-l--l {
    float: left;
  }

  .fl-r--l {
    float: right;
  }

  .fl-n--l {
    float: none;
  }

  /*
    * Margin helper
    */
  /* Regular margins */
  .m--l {
    margin: 1.414rem;
  }

  .mr--l {
    margin-right: 1.414rem;
  }

  .ml--l {
    margin-left: 1.414rem;
  }

  .mb--l {
    margin-bottom: 1.414rem;
  }

  .mt--l {
    margin-top: 1.414rem;
  }

  .mh--l {
    margin-top: 1.414rem;
    margin-bottom: 1.414rem;
  }

  .mv--l {
    margin-left: 1.414rem;
    margin-right: 1.414rem;
  }

  .m0--l {
    margin: 0;
  }

  /*
   * Padding helper
   */
  /* Regular paddings */
  .p--l {
    padding: 1.414rem;
  }

  .pr--l {
    padding-right: 1.414rem;
  }

  .pl--l {
    padding-left: 1.414rem;
  }

  .pb--l {
    padding-bottom: 1.414rem;
  }

  .pt--l {
    padding-top: 1.414rem;
  }

  .pv--l {
    padding-top: 1.414rem;
    padding-bottom: 1.414rem;
  }

  .ph--l {
    padding-left: 1.414rem;
    padding-right: 1.414rem;
  }

  .p0--l {
    padding: 0;
  }


  /*
   * HEAD
   */
  .header__meta {
    padding-left: 1.5rem;
  }

  /*
   * Main navigation
   */
  .main-navigation__list--first > .main-navigation__item > .main-navigation__link {
    padding: .75rem 1.5rem;
  }
}

/*
 * PRINT
 */
@media print {
  /*
     * GLOBAL
     */
  /*
     * HELPER & COMPONENTS
     */
  /*
     * HEADER
     */
  /*
    * LEFT SIDEBAR
    */
  .sidebar--left {
  }

  /*
    * MAIN AREA
    */
  .main {
  }

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

  /*
     * FOOTER
     */
  .footer {
  }
}


/*
 * JS Dropdown component
 *
 * It's different to the regular 'dropdown' component in that it just opens when
 * the active class is triggered by JS. Used together with the 'Dropdown' JS class.
*/
.js-dropdown-item {
  position: relative;
}

.js-dropdown-item__link {
  cursor: pointer;
}

.js-dropdown-item--is-active > .js-dropdown-item__list {
  display: block;
}

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

/* Static positioned dropdown */
.js-dropdown-item--static {
  position: static;
}

.js-dropdown-item--static > .js-dropdown-item__list {
  position: static;
  left: auto;
}

/* Right aligned dropdown-item */
.js-dropdown-item--right .js-dropdown-item__list {
  left: auto;
  right: 0;
}

/*
 * Off canvas navigation
 */
.off-canvas-navigation {
}

/* Link and link with icon */
.off-canvas-navigation__link,
.off-canvas-navigation__link--icon .off-canvas-navigation__link-text {
  padding: 1rem 1.5rem;
}

/* Link */
.off-canvas-navigation__link {
  display: block;
  text-decoration: none;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

/* Link with icon */
.off-canvas-navigation__link--icon {
  display: flex;
  align-items: center;
  padding: 0;
}

.off-canvas-navigation__link--icon .off-canvas-navigation__link-text {
  flex: 1 1 auto;
}

.off-canvas-navigation__link-icon {
  flex: 0 0 auto;
  font-size: 1.5rem;
  align-self: stretch;
  align-items: center;
  justify-content: center;
  display: flex;
  width: 56px;
  padding: 0;
}

.off-canvas-navigation__link-icon .fa {
  transition: transform 100ms ease;
}

.off-canvas-nav .js-dropdown-item--is-active > .off-canvas-navigation__link > .off-canvas-navigation__link-icon .fa {
  transform: rotate(90deg);
}

/*
 * Second level
 */
.off-canvas-navigation__list--sub-2 {
  border-left-width: 8px;
  border-left-style: solid;
}

/* Link */
.off-canvas-navigation__list--sub-2 .off-canvas-navigation__link,
.off-canvas-navigation__list--sub-2 .off-canvas-navigation__link--icon .off-canvas-navigation__link-text {
  padding-left: 2rem;
  font-size: .94117647058rem;
}

.off-canvas-navigation__list--sub-2 .off-canvas-navigation__link--icon {
  padding-left: 0;
}

.off-canvas-navigation__list--sub-2 .off-canvas-navigation__link.is-active {
  background: #fff;
}

/*
 * Third level
 */
.off-canvas-navigation__list--sub-3 {
  font-size: 15px;
}

/* Link and link with icon */
.off-canvas-navigation__list--sub-3 .off-canvas-navigation__link,
.off-canvas-navigation__list--sub-3 .off-canvas-navigation__link--icon .off-canvas-navigation__link-text {
  padding-left: 3rem;
}

.off-canvas-navigation__list--sub-3 .off-canvas-navigation__link--icon {
  padding-left: 0;
}