/*!
* Stylesheets for http://www.domain.tld/ - Built on: 2017-03-28 
* 
* @package sms_boilerplate
* @author sitegeist <extensions@sitegeist.de>
*/

@charset "UTF-8";
/*
SASS Functions, Mixins and Variables

Styleguide 1
*/
/*
Functions

Styleguide 1.1
*/
/*
Image-Url($imagePath)

Returns the path of an Image asset.

<!= type: css || isPureCode !>

Markup:
.selector {
	background-image: image-url("logo.png");
}

Styleguide 1.1.1
*/
/*
Relative Size($target-size, $context, $unit)

Calculates em's based on pixel values.

<!= type: css || isPureCode !>

Markup:
.selector {
	font-size: rs(19, 16);
}

Styleguide 1.1.2
*/
/*
Color-Adjust($color, $contrast)

Adjusts a color based on the lightness which is passed as a second parameter, this function was written by @necolas(https://github.com/necolas/).

<!= type: css || isPureCode !>

Markup:
.selector {
	background: color-adjust(#0097d7, 100%);
}

// Styleguide 1.1.3
*/
/*
Map-Fetch($map, $keys)

Navigates through nested Sass maps, this function was written by @jlong(https://github.com/jlong/)

<!= type: css || isPureCode !>

Markup:
@each $key, $value in map-get($headings, elements) {
	.selector {
	 	font-size: map-fetch($headings, elements $key font-size) +px;
	}
}

Styleguide 1.1.4
*/
/*
Map-RemoveKeys($map, $keys)

Removes multiple keys in a Sass map.

<!= type: css || isPureCode !>

Markup:
$newDecalarationsMap: map-removeKeys($declarations, font-size margin-bottom);

Styleguide 1.1.5
*/
/*
generateModifierComments($map, $keys)

Generate the modifier class comments for kss-node from a Sass map.

Markup:
generateModifierComments($brand-colors, " brand color.")
*/
/*
Mixins

Styleguide 1.2
*/
/*
High density Image-Dimensions Mixin($fileName, $width, $height)

Creates the required rules for high density optimized images.

<!= type: css || isPureCode !>

Markup:
.selector {
	@include hdpi-img('brand-logo.png');
}

Styleguide 1.2.1
*/
/*
REM Unit Mixin($property, $value)

Creates a property independent 'rem' calculation with a pixel fallback, default property is set to 'font-size'.

<!= type: css || isPureCode !>

Markup:
.selector {
	@include rem($property: font-size, $value: 18);
}

Styleguide 1.2.2
*/
/*
Font-Size Mixin($font-size, $appendVrythm)

Creates a fully formed type style (sizing and vertical rhythm) by passing in a single value.

<!= type: css || isPureCode !>

Markup:
.selector {
	@include rem($size: 16, $appendVrythm: true);
}

Styleguide 1.2.3
*/
/*
CSS Triangle Mixin($triangleSize, $triangleColor, $triangleDirection)

Creates an css arrow as per http://cssarrowplease.com/.

<!= type: css || isPureCode !>

Markup:
.selector:after {
	position: absolute;
	top: -5px;
	left: 50%;
	margin-left: -2.5px;
	@include css-triangle(5px, #fff, bottom);
}

Styleguide 1.2.4
*/
/*
Media-Query SASS Mixins($target-size, $context, $unit)

Wraps rules around the desired media query context.

<!= type: css || isPureCode !>

Markup:
@include min-screen(width) {}             - shortcut for @media screen and (min-width ...)
@include max-screen(width) {}             - shortcut for @media screen and (max-width ...)
@include screen(min-width, max-width) {}  - shortcut for @media screen and (min-width ...) and (max-width ...)
@include hdpi {}                          - devices with high-density screens

Styleguide 1.2.6
*/
/*
Generic rules

Resets and other generic stuff.
*/
/*
Head

Declarations which should be put at the top of the document e.g. @font-face declarations and CSS viewports.
*/
@import url("https://fast.fonts.net/t/1.css?apiType=css&projectid=26788506-2f2e-4568-8470-0f4be30fca67");
@font-face {
  font-family: "Neo Sans Light";
  src: url("../Webfonts/681fbcbc-1907-441a-893a-fc00ecea0267.eot?#iefix");
  src: url("../Webfonts/681fbcbc-1907-441a-893a-fc00ecea0267.eot?#iefix") format("eot"), url("../Webfonts/a21a792c-051c-4059-8719-ecc8749c99a6.woff") format("woff"), url("../Webfonts/feee8e94-28a0-416a-88d3-db3912effbc4.ttf") format("truetype"), url("../Webfonts/be444bf4-2ebe-416a-baa3-b19910fb06ba.svg#be444bf4-2ebe-416a-baa3-b19910fb06ba") format("svg");
}
@font-face {
  font-family: "Neo Sans Regular";
  src: url("../Webfonts/2959d89a-a257-4ce7-9cda-63e00f275369.eot?#iefix");
  src: url("../Webfonts/2959d89a-a257-4ce7-9cda-63e00f275369.eot?#iefix") format("eot"), url("../Webfonts/a32c3a17-3242-461c-a048-ca8e775582b1.woff") format("woff"), url("../Webfonts/97316a7d-9db1-4dc1-bd87-e24103d88a81.ttf") format("truetype"), url("../Webfonts/1287ca7a-3ce7-40b7-9612-061d4c793f04.svg#1287ca7a-3ce7-40b7-9612-061d4c793f04") format("svg");
}
@font-face {
  font-family: "Neo Sans Medium";
  src: url("../Webfonts/85c8556d-8a76-4037-a2e2-0f5fd9dabc03.eot?#iefix");
  src: url("../Webfonts/85c8556d-8a76-4037-a2e2-0f5fd9dabc03.eot?#iefix") format("eot"), url("../Webfonts/b0eddbbb-9e8e-4e08-bde1-965bb945f73a.woff") format("woff"), url("../Webfonts/b2931674-c992-42a0-aa22-e9cb15d3383d.ttf") format("truetype"), url("../Webfonts/af9d27b2-3ca0-47ca-8d5d-4c4665df6305.svg#af9d27b2-3ca0-47ca-8d5d-4c4665df6305") format("svg");
}
/* Iconfont created on fontello.com */
@font-face {
  font-family: 'fontello';
  src: url("../Iconfonts/fontello.eot?47347431");
  src: url("../Iconfonts/fontello.eot?47347431#iefix") format("embedded-opentype"), url("../Iconfonts/fontello.woff?47347431") format("woff"), url("../Iconfonts/fontello.ttf?47347431") format("truetype"), url("../Iconfonts/fontello.svg?47347431#fontello") format("svg");
  font-weight: normal;
  font-style: normal;
}
/*
Global border-box
@docs http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
*/
html {
  box-sizing: border-box;
}

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

/*
Normalize

A cut-down version of normalize.css
@author Nicolas Gallagher
@link http://necolas.github.com/normalize.css/
*/
/*
Normalize HTML5 display definitions
*/
/**
 * Corrects `block` display not defined in IE6/7/8/9 & FF3.
 */
article,
aside,
details,
figcaption,
figure,
main,
footer,
header,
hgroup,
nav,
section,
summary {
  display: block;
}

/**
 * Corrects `inline-block` display not defined in IE 8/9.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
}

/**
 * Addresses styling for `hidden` attribute not present in IE7/8/9, FF3, S4.
 * Known issue: no IE6 support.
 */
[hidden] {
  display: none;
}

/*
Normalize Base
*/
/**
 * 1. Corrects text resizing oddly in IE6/7 when body `font-size` is set using
 *    `em` units.
 * 2. Prevents iOS text size adjust after orientation change, without disabling
 *    user zoom.
 * 3. Forces vertical scrollbar to prevent jumpy page
 */
html {
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  overflow-y: scroll;
  /* 3 */
}

/*
Normalize Forms
*/
/**
 * 1. Corrects font size not being inherited in all browsers.
 * 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome.
 * 3. Improves appearance and consistency in all browsers.
 */
button,
input,
select,
textarea {
  font-size: 100%;
  /* 1 */
  margin: 0;
  /* 2 */
  vertical-align: baseline;
  /* 3 */
}

/**
 * Re-apply the `font-weight` to avoid modifying the default UX, and because
 * the default cannot be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold;
}

/**
 * Addresses FF3/4 setting `line-height` on `input` using `!important` in the
 * UA stylesheet.
 */
button,
input {
  line-height: normal;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
 * Correct `select` style inheritance in Firefox 4+ and Opera.
 */
button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Corrects inability to style clickable `input` types in iOS.
 * 3. Improves usability and consistency of cursor style between image-type
 *    `input` and others.
 * 4. Removes inner spacing in IE7 without affecting normal text inputs.
 *    Known issue: inner spacing remains in IE6.
 */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default;
}

/**
 * 1. Addresses box sizing set to content-box in IE8/9.
 * 2. Removes excess padding in IE8/9.
 * 3. Removes excess padding in IE7.
 *    Known issue: excess padding remains in IE6.
 */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * 1. Addresses `appearance` set to `searchfield` in S5, Chrome.
 * 2. Addresses `box-sizing` set to `border-box` in S5, Chrome (include `-moz`
 *    to future-proof).
 */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
}

/**
 * Removes inner padding and search cancel button in S5, Chrome on OS X.
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Removes inner padding and border in FF3+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/*
Base wrapper elements

High-level wrapper elements.
*/
body {
  /**
   * Remove default margin.
   */
  margin: 0;
  font: 400 93.75%/1.33333 "Neo Sans Regular", Arial, sans-serif;
  text-align: left;
  color: #4b4b4c;
  background: #F2F2F4;
}

.page {
  overflow: hidden;
}

.siteWrapper {
  margin-left: auto;
  margin-right: auto;
  width: 65.33333em;
  position: relative;
  background-color: transparent;
}
@media screen and (min-width: 624px) and (max-width: 1023px) {
  .siteWrapper {
    width: 41.6em;
  }
}
@media screen and (max-width: 623px) {
  .siteWrapper {
    width: 95%;
    width: 20.8em;
  }
}
.siteWrapper .siteWrapper {
  width: auto;
  width: 100%;
}

.siteWrapper--fullWidth {
  width: 100%;
  background-color: #F2F2F4;
  padding-top: 2em;
  padding-bottom: 3em;
}
.siteWrapper--fullWidth .teaser {
  background-color: #ffffff;
  min-height: 412px;
}
.siteWrapper--fullWidth .siteWrapper--fullWidth {
  padding-bottom: 1em;
}

.siteWrapper--fullWidth--zebra:nth-child(even) {
  background-color: #ffffff;
}
.siteWrapper--fullWidth--zebra:nth-child(even) .teaser {
  background-color: #F2F2F4;
}
.siteWrapper--fullWidth--zebra .siteWrapper--fullWidth--zebra {
  background-color: inherit;
}

/*
TYPO3

Styling for typo3 related classes
*/
/*
CSC-Frames
*/
.csc-frame-rulerBefore:before {
  content: '';
}

.csc-frame-rulerAfter:after {
  content: '';
}

.csc-frame-indent {
  padding: 0 10%;
}

.csc-frame-indent3366 {
  padding-left: 33.333%;
}

.csc-frame-indent6633 {
  padding-right: 33.333%;
}

div.csc-textpic-intext-left .csc-textpic-imagewrap,
div.csc-textpic-intext-left-nowrap .csc-textpic-imagewrap {
  margin-right: 1.33333em;
  max-width: 50%;
}
@media screen and (max-width: 623px) {
  div.csc-textpic-intext-left .csc-textpic-imagewrap,
  div.csc-textpic-intext-left-nowrap .csc-textpic-imagewrap {
    max-width: 100%;
  }
}

div.csc-textpic-intext-right .csc-textpic-imagewrap,
div.csc-textpic-intext-right-nowrap .csc-textpic-imagewrap {
  margin-left: 1.33333em;
  max-width: 50%;
}
@media screen and (max-width: 623px) {
  div.csc-textpic-intext-right .csc-textpic-imagewrap,
  div.csc-textpic-intext-right-nowrap .csc-textpic-imagewrap {
    max-width: 100%;
  }
}

div.csc-textpic .csc-textpic-imagewrap,
.csc-textpic-imagewrap {
  /* FIX scaling for images when figure display:table */
}
div.csc-textpic .csc-textpic-imagewrap img,
.csc-textpic-imagewrap img {
  width: 100%;
}

@media screen and (max-width: 623px) {
  div.csc-textpic-intext-right .csc-textpic-imagewrap,
  div.csc-textpic-intext-right-nowrap .csc-textpic-imagewrap {
    float: none;
    margin-left: 0;
  }
}

/*
Utilities

Utilitie classes which can be used independently from each other to create simple stylings.

Styleguide 2
*/
/*
Brand styles

Helper classes for brand related stylings.

Styleguide 2.5
*/
/*
Brand text styles

Markup:
<span class="u-brand">I am an paragraph.</span>

Styleguide 2.5.1
*/
.u-brand {
  font-family: "Neo Sans Regular", Arial, sans-serif;
  color: #00abe8;
}

/*
Brand color helpers
.u-brandColor-primary - primary brand color..u-brandColor-secondary - secondary brand color..u-brandColor-tertiary - tertiary brand color..u-brandColor-quaternary - quaternary brand color..u-brandColor-quinery - quinery brand color.

Markup:
<span class="{$modifiers}">Brand color helpers.</span>

Styleguide 2.5.2
*/
.u-brandColor-primary {
  color: #00abe8;
}

.u-brandColor-secondary {
  color: #003e6e;
}

.u-brandColor-tertiary {
  color: #4b4b4c;
}

.u-brandColor-quaternary {
  color: #838384;
}

.u-brandColor-quinery {
  color: #ffffff;
}

.u-brandColor-tertiary--light, .autosuggest-results > a {
  color: rgba(75, 75, 76, 0.69);
}

/*
Brand bg color helpers
.u-brandBgColor-primary - primary brand bg color..u-brandBgColor-secondary - secondary brand bg color..u-brandBgColor-tertiary - tertiary brand bg color..u-brandBgColor-quaternary - quaternary brand bg color..u-brandBgColor-quinary - quinary brand bg color..u-brandBgColor-senary - senary brand bg color..u-brandBgColor-septenary - septenary brand bg color.

Markup:
<span class="{$modifiers}">Brand color helpers.</span>

Styleguide 2.5.3
*/
.u-brandBgColor-primary {
  background-color: #07ace7;
}

.u-brandBgColor-secondary {
  background-color: #003e6e;
}

.u-brandBgColor-tertiary {
  background-color: #d1d1d2;
}

.u-brandBgColor-quaternary {
  background-color: #ffffff;
}

.u-brandBgColor-quinary {
  background-color: #bcbdbf;
}

.u-brandBgColor-senary {
  background-color: #4b4b4c;
}

.u-brandBgColor-septenary {
  background-color: #da3a00;
}

/*
Brand font-family helper

Markup:
<span class="u-brandFace">This text will be set in the brands font-family.</span>

Styleguide 2.5.4
*/
.u-brandFace {
  font-family: "Neo Sans Regular", Arial, sans-serif;
}

/*
Brand logos

Markup:
<img class="u-brandLogo" alt="Brand name" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="  />

Styleguide 2.5.5
*/
.u-brandLogo {
  display: inline-block;
  width: 200px;
  height: 200px;
  background: url(../Images/brandLogo.png);
}

/*
Border color helpers
.u-brandBorder-primary - primary brand border..u-brandBorder-secondary - secondary brand border..u-brandBorder-tertiary - tertiary brand border..u-brandBorder-quaternary - quaternary brand border..u-brandBorder-quinary - quinary brand border..u-brandBorder-senary - senary brand border..u-brandBorder-septenary - septenary brand border.

Markup:
<span class="{$modifiers}">Brand color helpers.</span>

Styleguide 2.5.3
*/
.u-brandBorder-primary {
  border: 2px solid #07ace7;
}

.u-brandBorder-secondary {
  border: 2px solid #003e6e;
}

.u-brandBorder-tertiary {
  border: 2px solid #d1d1d2;
}

.u-brandBorder-quaternary {
  border: 2px solid #ffffff;
}

.u-brandBorder-quinary {
  border: 2px solid #bcbdbf;
}

.u-brandBorder-senary {
  border: 2px solid #4b4b4c;
}

.u-brandBorder-septenary {
  border: 2px solid #da3a00;
}

/*
Boxshadow color helpers
.u-boxShadow-primary - primary box shadow..u-boxShadow-secondary - secondary box shadow..u-boxShadow-tertiary - tertiary box shadow..u-boxShadow-quaternary - quaternary box shadow..u-boxShadow-quinary - quinary box shadow..u-boxShadow-senary - senary box shadow..u-boxShadow-septenary - septenary box shadow.

Markup:
<span class="{$modifiers}">Brand color helpers.</span>

Styleguide 2.5.3
*/
.u-boxShadow-primary {
  box-shadow: 0 0 4px 0 #07ace7;
}

.u-boxShadow-secondary {
  box-shadow: 0 0 4px 0 #003e6e;
}

.u-boxShadow-tertiary {
  box-shadow: 0 0 4px 0 #d1d1d2;
}

.u-boxShadow-quaternary {
  box-shadow: 0 0 4px 0 #ffffff;
}

.u-boxShadow-quinary {
  box-shadow: 0 0 4px 0 #bcbdbf;
}

.u-boxShadow-senary {
  box-shadow: 0 0 4px 0 #4b4b4c;
}

.u-boxShadow-septenary {
  box-shadow: 0 0 4px 0 #da3a00;
}

/*
Display utilities

Styleguide 2.2
*/
/*
Visibillity helpers

.u-block - Display the target as an block element.
.u-hidden - Hide from both screenreaders and browsers: http://www.h5bp.com/u
.u-invisible - Hide visually and from screenreaders, but maintain layout.

Markup:
<div class="{$modifiers}">This element won't be visible.</div>

Styleguide 2.2.1
*/
.u-block {
  display: block !important;
}

.u-inlineBlock {
  display: inline-block !important;
}

.u-hidden {
  display: none !important;
  visibility: hidden;
}

.u-invisible {
  visibility: hidden;
}

.fa:before, .fa-bildschalter_links:before, #sb-nav-previous:before, .bx-wrapper .bx-controls-direction a.bx-prev:before, .fa-bildschalter_rechts:before, #sb-nav-next:before, .bx-wrapper .bx-controls-direction a.bx-next:before, .fa-globus:before, .languageLabel a:before, .languageLabel span.inactive:before, .fa-home:before, .flyout .nav--first-level .home a:before, .fa-lupe:before, .fa-videopfeil:before, .fa-weiterpfeil_links:before, .fa-weiterpfeil_rechts:before, .fa-mail:before, .mail:before, .fa-facebook:before, .fa-twitter:before, .fa-youtube-play:before, .fa-rss:before, .fa-user:before, .personal-page-link:before, .fa-phone:before, .phone:before, .fa-arrow-down:before, .fa-arrow-up:before, .fa-fax:before, .fax:before, .fa-pdf:before, .fa-print:before, .fa-raquo:before,
.fa:after,
.fa-minus_klein:after,
.treatment.open > h3:after,
.fa-plus_gross:after,
.fa-plus_klein:after,
.internal-link.link-with-button:after,
.treatment > h3:after,
.holder ul.grid a > .navItem--secondLevel:after,
.fa-link-intern:after,
.external-link:after,
.external-link-new-window:after,
.internal-link:after,
.fa-download:after,
.download:after {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: none;
  width: 1em;
  margin-right: .4em;
  text-align: center;
  /* opacity: .8; */
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;
  /* you can be more comfortable with increased icons size */
  font-size: 100%;
}

.fa-bildschalter_links:before, #sb-nav-previous:before, .bx-wrapper .bx-controls-direction a.bx-prev:before {
  content: '\e800';
}

.fa-bildschalter_rechts:before, #sb-nav-next:before, .bx-wrapper .bx-controls-direction a.bx-next:before {
  content: '\e801';
}

.fa-globus:before, .languageLabel a:before, .languageLabel span.inactive:before {
  content: '\e802';
}

.fa-home:before, .flyout .nav--first-level .home a:before {
  content: '\e803';
  margin-right: 0.2em;
}

.fa-lupe:before {
  content: '\e804';
}

.fa-minus_klein:after, .treatment.open > h3:after {
  content: '\e805';
}

.fa-plus_gross:after {
  content: '\e806';
  font-size: 3.5em;
}

.fa-plus_klein:after, .internal-link.link-with-button:after, .treatment > h3:after, .holder ul.grid a > .navItem--secondLevel:after {
  content: '\e807';
}

.fa-videopfeil:before {
  content: '\e808';
}

.fa-weiterpfeil_links:before {
  content: '\e809';
}

.fa-weiterpfeil_rechts:before {
  content: '\e80a';
}

.fa-mail:before, .mail:before {
  content: '\e80b';
}

.fa-link-intern:after, .external-link:after,
.external-link-new-window:after,
.internal-link:after {
  content: '\e80c';
}

.fa-facebook:before {
  content: '\e80d';
  margin-left: 0;
}

.fa-twitter:before {
  content: '\e80e';
  margin-left: 0;
}

.fa-youtube-play:before {
  content: '\e80f';
}

.fa-rss:before {
  content: '\e810';
  margin-left: 0;
}

.fa-user:before, .personal-page-link:before {
  content: '\e811';
}

.fa-phone:before, .phone:before {
  content: '\e812';
  font-size: 1.1em;
}

.fa-download:after, .download:after {
  content: '\e813';
  margin-right: 0.3em;
}

.fa-arrow-down:before {
  content: '\e814';
}

.fa-arrow-up:before {
  content: '\e815';
}

.fa-fax:before, .fax:before {
  content: '\e816';
}

.fa-pdf:before {
  content: '\e817';
}

.fa-print:before {
  content: '\e818';
}

.fa-raquo:before {
  content: '\00BB';
  position: absolute;
  top: 2px;
  left: 4px;
}

.rotate_internLink_up:after {
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  margin-left: 0.1em;
  margin-right: 0;
}

.rotate_internLink_down:after {
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  margin-left: 0.1em;
  margin-right: 0;
}

/* kleineres Plussymbol bei Tabletview z.B. Stellenangebote */
@media screen and (min-width: 624px) and (max-width: 1023px) {
  .fa-plus_gross {
    font-size: 0.6em;
  }
}
@media screen and (max-width: 623px) {
  .fa-plus_gross {
    font-size: 0.6em;
  }
}

/*
Layout utilities

Styleguide 2.1
*/
/*
Float helpers

.u-floatRight - Floats the element to the right boundary.
.u-floatLeft - Floats the element to the left boundary.

Markup:
<span class="{$modifiers}">I am an paragraph.</span>

Styleguide 2.1.1
*/
.u-floatRight {
  float: right;
}

.u-floatLeft {
  float: left;
}

/*
Float clearfix

Contain floats: http://www.h5bp.com/q

Markup:
<div class="u-cf">This element will clear any floats inside of it.</div>

Styleguide 2.1.2
*/
.u-cf:before, .dl--horizontal:before, .g:before,
.grid:before, .flyout .nav--first-level:before, .u-cf:after, .dl--horizontal:after, .g:after,
.grid:after, .flyout .nav--first-level:after,
.u-clearfix:before,
.u-clearfix:after {
  content: "";
  display: table;
}
.u-cf:after, .dl--horizontal:after, .g:after,
.grid:after, .flyout .nav--first-level:after,
.u-clearfix:after {
  clear: both;
}

/*
Spacing utilities

Margin and padding helper classes. Use these to tweak layout on a micro level.

Styleguide 2.4
*/
/*
Margin utilities

.u-m0  - Resets the margin.
.u-mt0 - Resets the top margin.
.u-mr0 - Resets the right margin.
.u-ml0 - Resets the left margin.
.u-mb0 - Resets the bottom margin.
.u-m   - Adds a basic margin.
.u-mt  - Adds a basic margin on the top.
.u-mr  - Adds a basic margin on the right.
.u-ml  - Adds a basic margin on the left.
.u-mb  - Adds a basic margin on the bottom.
.u-m0-5   - Adds a half sized margin.
.u-mt0-5  - Adds a half sized margin on the top.
.u-mr0-5  - Adds a half sized margin on the right.
.u-ml0-5  - Adds a half sized margin on the left.
.u-mb0-5  - Adds a half sized margin on the bottom.

Markup:
<p class="{$modifiers}">I am an paragraph.</p>

Styleguide 2.4.1
*/
p, menu,
ol,
ul, dl, pre, blockquote, .csc-frame-rulerBefore:before, .csc-frame-rulerAfter:after,
hr,
.u-m0 {
  margin: 0;
}

.u-mt0 {
  margin-top: 0;
}

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

.u-ml0 {
  margin-left: 0;
}

.u-mb0 {
  margin-bottom: 0;
}

.u-m {
  margin: 15px;
}

.u-mt {
  margin-top: 15px;
}

.u-mr {
  margin-right: 15px;
}

.u-ml {
  margin-left: 15px;
}

p, menu,
ol,
ul, dl, legend, pre, blockquote, .csc-frame-rulerBefore:before, .csc-frame-rulerAfter:after,
hr, iframe, video, audio, .table, .contenttable, form,
.u-mb,
.siteFooter .footerNav > li {
  margin-bottom: 15px;
}

.u-m0-5 {
  margin: 10px;
}

.u-mt0-5 {
  margin-top: 10px;
}

.u-mr0-5 {
  margin-right: 10px;
}

.u-ml0-5 {
  margin-left: 10px;
}

.u-mb0-5 {
  margin-bottom: 10px;
}

/*
Padding utilities

.u-p0  - Resets the padding.
.u-pt0 - Resets the top padding.
.u-pr0 - Resets the right padding.
.u-pl0 - Resets the left padding.
.u-pb0 - Resets the bottom padding.
.u-p   - Adds a basic padding.
.u-pt  - Adds a basic padding on the top.
.u-pr  - Adds a basic padding on the right.
.u-pl  - Adds a basic padding on the left.
.u-pb  - Adds a basic padding on the bottom.
.u-p0-5   - Adds a half sized padding.
.u-pt0-5  - Adds a half sized padding on the top.
.u-pr0-5  - Adds a half sized padding on the right.
.u-pl0-5  - Adds a half sized padding on the left.
.u-pb0-5  - Adds a half sized padding on the bottom.

Markup:
<p class="{$modifiers}">I am an paragraph.</p>

Styleguide 2.4.2
*/
.u-p0 {
  padding: 0;
}

.u-pt0 {
  padding-top: 0;
}

.u-pr0 {
  padding-right: 0;
}

.u-pl0 {
  padding-left: 0;
}

.u-pb0 {
  padding-bottom: 0;
}

.u-p {
  padding: 15px;
}

.u-pt {
  padding-top: 15px;
}

.u-pr,
.languageLabel {
  padding-right: 15px;
}

.u-pl {
  padding-left: 15px;
}

.u-pb {
  padding-bottom: 15px;
}

.u-p0-5 {
  padding: 10px;
}

.u-pt0-5 {
  padding-top: 10px;
}

.u-pr0-5 {
  padding-right: 10px;
}

.u-pl0-5 {
  padding-left: 10px;
}

.u-pb0-5 {
  padding-bottom: 10px;
}

.u-pt2 {
  padding-top: 30px;
}

.u-pt0-2 {
  padding-top: 5px;
}

/*
Typographic utilities

Styleguide 2.3
*/
/*
Text alignment

.u-alignCenter - Centers the text.
.u-alignRight - Aligns the text on it's right boundary.
.u-alignLeft - Aligns the text on it's left boundary.

Markup:
<p class="{$modifiers}">I am an paragraph.</p>

Styleguide 2.3.1
*/
.u-alignCenter, .align-center {
  text-align: center;
}

.u-alignRight, .align-right {
  text-align: right;
}

.u-alignLeft, .align-left {
  text-align: left;
}

/*
Other utilities

.u-textBreak - Break strings when their length exceeds the width of their container.

Markup:
<p class="{$modifiers}">Extralongparagraphhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</p>

Styleguide 2.3.2
*/
.dl--horizontal dt,
.u-textBreak {
  word-wrap: break-word;
  hyphens: auto;
}

/*
Other utilities

.u-textUppercase - Text to uppercase

Markup:
<p class="{$modifiers}">Text in Großbuchstaben</p>

Styleguide 2.3.3
*/
.u-textUppercase {
  text-transform: uppercase;
}

/*
Other utilities

.u-fs11 - Fontsize 11px
.u-fs13 - Fontsize 13px
.u-fs16 - Fontsize 16px
.u-fs18 - Fontsize 18px
.u-fs21 - Fontsize 21px

Markup:
<p class="{$modifiers}">Fontgrösse ändern</p>

Styleguide 2.3.3
*/
.u-fs11 {
  font-size: 0.73333em;
}

.u-fs13 {
  font-size: 0.86667em;
}

.u-fs14 {
  font-size: 0.93333em;
}

.u-fs16 {
  font-size: 1.06667em;
  line-height: 20px;
}

.u-fs18 {
  font-size: 1.2em;
}

.u-fs21 {
  font-size: 1.4em;
}

.u-fs26 {
  font-size: 1.73333em;
}

.u-fs30 {
  font-size: 2em;
}

/*------------------------------------*\
    #WIDTHS-RESPONSIVE
\*------------------------------------*/
/**
 * Responsive width classes based on your responsive settings.
 */
@media screen and (max-width: 623px) {
  /**
   * Whole.
   */
  [class~="u-w-phone-1/1"] {
    width: 100% !important;
  }

  /**
   * Halves.
   */
  [class~="u-w-phone-1/2"],
  [class~="u-w-phone-2/4"],
  [class~="u-w-phone-3/6"],
  [class~="u-w-phone-4/8"],
  [class~="u-w-phone-5/10"],
  [class~="u-w-phone-6/12"] {
    width: 50% !important;
  }

  /**
   * Thirds.
   */
  [class~="u-w-phone-1/3"],
  [class~="u-w-phone-2/6"],
  [class~="u-w-phone-3/9"],
  [class~="u-w-phone-4/12"] {
    width: 33.3333333% !important;
  }

  [class~="u-w-phone-2/3"],
  [class~="u-w-phone-4/6"],
  [class~="u-w-phone-6/9"],
  [class~="u-w-phone-8/12"] {
    width: 66.6666666% !important;
  }

  /**
   * Quarters.
   */
  [class~="u-w-phone-1/4"],
  [class~="u-w-phone-2/8"],
  [class~="u-w-phone-3/12"] {
    width: 25% !important;
  }

  [class~="u-w-phone-3/4"],
  [class~="u-w-phone-6/8"],
  [class~="u-w-phone-9/12"] {
    width: 75% !important;
  }

  /**
   * Fifths.
   */
  [class~="u-w-phone-1/5"],
  [class~="u-w-phone-2/10"] {
    width: 20% !important;
  }

  [class~="u-w-phone-2/5"],
  [class~="u-w-phone-4/10"] {
    width: 40% !important;
  }

  [class~="u-w-phone-3/5"],
  [class~="u-w-phone-6/10"] {
    width: 60% !important;
  }

  [class~="u-w-phone-4/5"],
  [class~="u-w-phone-8/10"] {
    width: 80% !important;
  }

  /**
   * Sixths.
   */
  [class~="u-w-phone-1/6"],
  [class~="u-w-phone-2/12"] {
    width: 16.6666666% !important;
  }

  [class~="u-w-phone-5/6"],
  [class~="u-w-phone-10/12"] {
    width: 83.3333333% !important;
  }

  /**
   * Eighths.
   */
  [class~="u-w-phone-1/8"] {
    width: 12.5% !important;
  }

  [class~="u-w-phone-3/8"] {
    width: 37.5% !important;
  }

  [class~="u-w-phone-5/8"] {
    width: 62.5% !important;
  }

  [class~="u-w-phone-7/8"] {
    width: 87.5% !important;
  }

  /**
   * Ninths.
   */
  [class~="u-w-phone-1/9"] {
    width: 11.1111111% !important;
  }

  [class~="u-w-phone-2/9"] {
    width: 22.2222222% !important;
  }

  [class~="u-w-phone-4/9"] {
    width: 44.4444444% !important;
  }

  [class~="u-w-phone-5/9"] {
    width: 55.5555555% !important;
  }

  [class~="u-w-phone-7/9"] {
    width: 77.7777777% !important;
  }

  [class~="u-w-phone-8/9"] {
    width: 88.8888888% !important;
  }

  /**
   * Tenths.
   */
  [class~="u-w-phone-1/10"] {
    width: 10% !important;
  }

  [class~="u-w-phone-3/10"] {
    width: 30% !important;
  }

  [class~="u-w-phone-7/10"] {
    width: 70% !important;
  }

  [class~="u-w-phone-9/10"] {
    width: 90% !important;
  }

  /**
   * Twelfths.
   */
  [class~="u-w-phone-1/12"] {
    width: 8.3333333% !important;
  }

  [class~="u-w-phone-5/12"] {
    width: 41.6666666% !important;
  }

  [class~="u-w-phone-7/12"] {
    width: 58.3333333% !important;
  }

  [class~="u-w-phone-11/12"] {
    width: 91.6666666% !important;
  }

  /**
   * Hidden grids
   */
  [class~="u-hide-phone"] {
    display: none;
    visibility: hidden;
  }
}
@media screen and (min-width: 624px) and (max-width: 1023px) {
  /**
   * Whole.
   */
  [class~="u-w-tablet-1/1"] {
    width: 100% !important;
  }

  /**
   * Halves.
   */
  [class~="u-w-tablet-1/2"],
  [class~="u-w-tablet-2/4"],
  [class~="u-w-tablet-3/6"],
  [class~="u-w-tablet-4/8"],
  [class~="u-w-tablet-5/10"],
  [class~="u-w-tablet-6/12"] {
    width: 50% !important;
  }

  /**
   * Thirds.
   */
  [class~="u-w-tablet-1/3"],
  [class~="u-w-tablet-2/6"],
  [class~="u-w-tablet-3/9"],
  [class~="u-w-tablet-4/12"] {
    width: 33.3333333% !important;
  }

  [class~="u-w-tablet-2/3"],
  [class~="u-w-tablet-4/6"],
  [class~="u-w-tablet-6/9"],
  [class~="u-w-tablet-8/12"] {
    width: 66.6666666% !important;
  }

  /**
   * Quarters.
   */
  [class~="u-w-tablet-1/4"],
  [class~="u-w-tablet-2/8"],
  [class~="u-w-tablet-3/12"] {
    width: 25% !important;
  }

  [class~="u-w-tablet-3/4"],
  [class~="u-w-tablet-6/8"],
  [class~="u-w-tablet-9/12"] {
    width: 75% !important;
  }

  /**
   * Fifths.
   */
  [class~="u-w-tablet-1/5"],
  [class~="u-w-tablet-2/10"] {
    width: 20% !important;
  }

  [class~="u-w-tablet-2/5"],
  [class~="u-w-tablet-4/10"] {
    width: 40% !important;
  }

  [class~="u-w-tablet-3/5"],
  [class~="u-w-tablet-6/10"] {
    width: 60% !important;
  }

  [class~="u-w-tablet-4/5"],
  [class~="u-w-tablet-8/10"] {
    width: 80% !important;
  }

  /**
   * Sixths.
   */
  [class~="u-w-tablet-1/6"],
  [class~="u-w-tablet-2/12"] {
    width: 16.6666666% !important;
  }

  [class~="u-w-tablet-5/6"],
  [class~="u-w-tablet-10/12"] {
    width: 83.3333333% !important;
  }

  /**
   * Eighths.
   */
  [class~="u-w-tablet-1/8"] {
    width: 12.5% !important;
  }

  [class~="u-w-tablet-3/8"] {
    width: 37.5% !important;
  }

  [class~="u-w-tablet-5/8"] {
    width: 62.5% !important;
  }

  [class~="u-w-tablet-7/8"] {
    width: 87.5% !important;
  }

  /**
   * Ninths.
   */
  [class~="u-w-tablet-1/9"] {
    width: 11.1111111% !important;
  }

  [class~="u-w-tablet-2/9"] {
    width: 22.2222222% !important;
  }

  [class~="u-w-tablet-4/9"] {
    width: 44.4444444% !important;
  }

  [class~="u-w-tablet-5/9"] {
    width: 55.5555555% !important;
  }

  [class~="u-w-tablet-7/9"] {
    width: 77.7777777% !important;
  }

  [class~="u-w-tablet-8/9"] {
    width: 88.8888888% !important;
  }

  /**
   * Tenths.
   */
  [class~="u-w-tablet-1/10"] {
    width: 10% !important;
  }

  [class~="u-w-tablet-3/10"] {
    width: 30% !important;
  }

  [class~="u-w-tablet-7/10"] {
    width: 70% !important;
  }

  [class~="u-w-tablet-9/10"] {
    width: 90% !important;
  }

  /**
   * Twelfths.
   */
  [class~="u-w-tablet-1/12"] {
    width: 8.3333333% !important;
  }

  [class~="u-w-tablet-5/12"] {
    width: 41.6666666% !important;
  }

  [class~="u-w-tablet-7/12"] {
    width: 58.3333333% !important;
  }

  [class~="u-w-tablet-11/12"] {
    width: 91.6666666% !important;
  }

  /**
   * Hidden grids
   */
  [class~="u-hide-tablet"] {
    display: none;
    visibility: hidden;
  }
}
@media screen and (min-width: 1023px) {
  /**
   * Whole.
   */
  [class~="u-w-desk-1/1"] {
    width: 100% !important;
  }

  /**
   * Halves.
   */
  [class~="u-w-desk-1/2"],
  [class~="u-w-desk-2/4"],
  [class~="u-w-desk-3/6"],
  [class~="u-w-desk-4/8"],
  [class~="u-w-desk-5/10"],
  [class~="u-w-desk-6/12"] {
    width: 50% !important;
  }

  /**
   * Thirds.
   */
  [class~="u-w-desk-1/3"],
  [class~="u-w-desk-2/6"],
  [class~="u-w-desk-3/9"],
  [class~="u-w-desk-4/12"] {
    width: 33.3333333% !important;
  }

  [class~="u-w-desk-2/3"],
  [class~="u-w-desk-4/6"],
  [class~="u-w-desk-6/9"],
  [class~="u-w-desk-8/12"] {
    width: 66.6666666% !important;
  }

  /**
   * Quarters.
   */
  [class~="u-w-desk-1/4"],
  [class~="u-w-desk-2/8"],
  [class~="u-w-desk-3/12"] {
    width: 25% !important;
  }

  [class~="u-w-desk-3/4"],
  [class~="u-w-desk-6/8"],
  [class~="u-w-desk-9/12"] {
    width: 75% !important;
  }

  /**
   * Fifths.
   */
  [class~="u-w-desk-1/5"],
  [class~="u-w-desk-2/10"] {
    width: 20% !important;
  }

  [class~="u-w-desk-2/5"],
  [class~="u-w-desk-4/10"] {
    width: 40% !important;
  }

  [class~="u-w-desk-3/5"],
  [class~="u-w-desk-6/10"] {
    width: 60% !important;
  }

  [class~="u-w-desk-4/5"],
  [class~="u-w-desk-8/10"] {
    width: 80% !important;
  }

  /**
   * Sixths.
   */
  [class~="u-w-desk-1/6"],
  [class~="u-w-desk-2/12"] {
    width: 16.6666666% !important;
  }

  [class~="u-w-desk-5/6"],
  [class~="u-w-desk-10/12"] {
    width: 83.3333333% !important;
  }

  /**
   * Eighths.
   */
  [class~="u-w-desk-1/8"] {
    width: 12.5% !important;
  }

  [class~="u-w-desk-3/8"] {
    width: 37.5% !important;
  }

  [class~="u-w-desk-5/8"] {
    width: 62.5% !important;
  }

  [class~="u-w-desk-7/8"] {
    width: 87.5% !important;
  }

  /**
   * Ninths.
   */
  [class~="u-w-desk-1/9"] {
    width: 11.1111111% !important;
  }

  [class~="u-w-desk-2/9"] {
    width: 22.2222222% !important;
  }

  [class~="u-w-desk-4/9"] {
    width: 44.4444444% !important;
  }

  [class~="u-w-desk-5/9"] {
    width: 55.5555555% !important;
  }

  [class~="u-w-desk-7/9"] {
    width: 77.7777777% !important;
  }

  [class~="u-w-desk-8/9"] {
    width: 88.8888888% !important;
  }

  /**
   * Tenths.
   */
  [class~="u-w-desk-1/10"] {
    width: 10% !important;
  }

  [class~="u-w-desk-3/10"] {
    width: 30% !important;
  }

  [class~="u-w-desk-7/10"] {
    width: 70% !important;
  }

  [class~="u-w-desk-9/10"] {
    width: 90% !important;
  }

  /**
   * Twelfths.
   */
  [class~="u-w-desk-1/12"] {
    width: 8.3333333% !important;
  }

  [class~="u-w-desk-5/12"] {
    width: 41.6666666% !important;
  }

  [class~="u-w-desk-7/12"] {
    width: 58.3333333% !important;
  }

  [class~="u-w-desk-11/12"] {
    width: 91.6666666% !important;
  }

  /**
   * Hidden grids
   */
  [class~="u-hide-desk"] {
    display: none;
    visibility: hidden;
  }
}
/*
Zebra

Changing background-color per row

.div--zebra - Every first childelements (can used for div, a, ..) get "odd" or "even" - style

Markup:
<div class="{$modifiers}">
	<div>
		<h2>Aktive Rehabilitation des SIG Symphyse</h2>
		<p>Theroie und Praxis der Med. Trainingstherapie MTT bei Erkrankungen des SIG Symphyse</p>
	</div>
	<div>
		<h2>Aktive Rehabilitation des SIG Symphyse</h2>
		<p>Theroie und Praxis der Med. Trainingstherapie MTT bei Erkrankungen des SIG Symphyse</p>
	</div>
	<div>
		<h2>Aktive Rehabilitation des SIG Symphyse</h2>
		<p>Theroie und Praxis der Med. Trainingstherapie MTT bei Erkrankungen des SIG Symphyse</p>
	</div>
</div>

Styleguide 4.1.6
*/
.div--zebra > *:nth-child(even) {
  background-color: #ffffff;
  background-color: #bcbdbf;
}
.div--zebra > *:nth-child(odd) {
  background-color: #ffffff;
}

/*
Atoms

Atoms are basic tags, such as form labels, inputs or buttons.

Styleguide 3
*/
/*
Heading elements

Basic styling for headings and sub-headings.

Styleguide 3.1
*/
/*
Headings

Markup:
<h1>I am an first-level heading</h1>
<h2>I am an second-level heading</h2>
<h3>I am an third-level heading</h3>
<h4>I am an fourth-level heading</h4>
<h5>I am an fifth-level heading</h5>
<h6>I am an sixth-level heading</h6>

Styleguide 3.1.1
*/
h1, h2, h3,
h4, h5, h6 {
  font-weight: 400;
  color: #00abe8;
  line-height: 1em;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 15px;
  /**
   * Optimized kerning for large font sizes
   * use this only on large font-sizes (f.e. headings) to avoid performance issues.
   */
  text-rendering: optimizeLegibility;
}

/*
Heading modifiers

.h1 - Style the `<h#>`-element like a standard `<h1>`-element.
.h2 - Style the `<h#>`-element like a standard `<h2>`-element.
.h3 - Style the `<h#>`-element like a standard `<h3>`-element.
.h4 - Style the `<h#>`-element like a standard `<h4>`-element.
.h5 - Style the `<h#>`-element like a standard `<h5>`-element.
.h6 - Style the `<h#>`-element like a standard `<h6>`-element.
.kicker - Style the `<h#>`-element with blue background/white fontColor.

Markup:
<h1 class="{$modifiers}">I am an first-level heading</h1>
<h2 class="{$modifiers}">I am an second-level heading</h2>
<h3 class="{$modifiers}">I am an third-level heading</h3>
<h4 class="{$modifiers}">I am an fourth-level heading</h4>
<h5 class="{$modifiers}">I am an fifth-level heading</h5>
<h6 class="{$modifiers}">I am an sixth-level heading</h6>

Styleguide 3.1.2
*/
h1, .h1 {
  font-family: "Neo Sans Medium", Arial, sans-serif;
  font-size: 2.66667em;
  margin-bottom: 23px;
}
@media screen and (max-width: 623px) {
  h1, .h1 {
    font-size: 1.33333em;
    margin-bottom: 15px;
  }
}

h1.h1--xxl {
  font-size: 4em;
  margin-bottom: 40px;
}
@media screen and (max-width: 623px) {
  h1.h1--xxl {
    font-size: 1.66667em;
    margin-bottom: 15px;
  }
}

h2, .h2 {
  font-family: "Neo Sans Medium", Arial, sans-serif;
  font-size: 2em;
  margin-bottom: 15px;
}
@media screen and (min-width: 624px) and (max-width: 1023px) {
  h2, .h2 {
    font-size: 1.33333em;
  }
}
@media screen and (max-width: 623px) {
  h2, .h2 {
    font-size: 1em;
  }
}

.teaserBlueBorder h2 {
  font-size: 1.73333em;
}

.h2--w-70 {
  width: 70%;
}

h3, .h3 {
  font-family: "Neo Sans Medium", Arial, sans-serif;
  margin-bottom: 10px;
}

.h3--subline {
  margin-top: -9px;
  margin-bottom: 18px;
}

.h3--teaser {
  font-size: 1.66667em;
  color: #4b4b4c;
}
.h3--teaser:hover {
  text-decoration: underline;
}

.h3--logbook {
  padding-right: 30px;
}

h4, .h4 {
  font-family: "Neo Sans Medium", Arial, sans-serif;
  color: #4b4b4c;
  margin-bottom: 10px;
}

.kicker {
  background-color: #07ace7;
  color: white;
  display: inline-block;
  padding: 5px;
}

.kicker--white {
  background-color: #ffffff;
  color: #00abe8;
  display: inline;
  padding: 3px 5px;
}

/*
Typographic elements

Basic styling for all typographic related elements.

Styleguide 3.2
*/
/*
Base paragraph

Markup:
<p>I am an paragraph.</p>

Styleguide 3.2.1
*/
/*
Bold and strong elements

Markup:
<b>This text should be displayed in a bolder font-weight than the standard one.</b>

Styleguide 3.2.2
*/
b,
strong {
  font-family: "Neo Sans Medium", Arial, sans-serif;
  font-weight: 400;
  /* Addresses style set to `bolder` in FF3+, S4/5, Chrome. */
}

/*
Small text emphasis

Markup:
<small>This text should be smaller than the standard one.</small>

Styleguide 3.2.3
*/
small {
  font-size: 80%;
}

/*
Abbreviation element

Markup:
<abbr title="The title of the abbreviation">This is an abbreviation.</abbr>

Styleguide 3.2.4
*/
abbr[title] {
  /* Addresses styling not present in IE7/8/9, S5, Chrome. */
  border-bottom: 1px dotted;
  cursor: help;
}

/*
Marked text emphasis element

Markup:
<mark>This text should be displayed in a special manner.</mark>

Styleguide 3.2.5
*/
mark {
  /* Addresses styling not present in IE6/7/8/9. */
  background: #00abe8;
  color: white;
}

/*
Definition element

Markup:
<dfn>This text represents the defining instance of a term.</dfn>

Styleguide 3.2.6
*/
dfn {
  font-style: italic;
  /* Addresses styling not present in S5, Chrome. */
}

/*
Subscript Elements

Markup:
Regular text - <sup>this will be displayed higher and smaller than the main span of text.</sup><br>
Regular text - <sub>this will be displayed lower and smaller than the main span of text.</sub>

Styleguide 3.2.7
*/
sub,
sup {
  /* Prevents `sub` and `sup` affecting `line-height` in all browsers. gist.github.com/413930 */
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/*
Text-Selection
*/
::-moz-selection,
::selection {
  background: #00abe8;
  color: white;
  text-shadow: none;
}

/*
Anchors / Link elements

Basic styling for anchor tags.

Styleguide 3.3
*/
/*
Standard anchors

Markup:
<a href="#" class="{$modifiers}">I am an anchor element.</a>

:hover   - Hover styling for anchor elements.

Styleguide 3.3.1
*/
a {
  color: #00abe8;
  text-decoration: none;
  /**
   * Remove the gray background color from active links in IE 10.
   */
  background: transparent;
}
a:hover, a:active, a:focus {
  text-decoration: none;
  color: #003e6e;
}
a:active, a:hover {
  /**
   * Improves readability when focused and also mouse hovered in all browsers.
   */
  outline: 0;
}
p a {
  /**
   * Increasing the Clickable Area of Inline Links inside a paragraph
   */
  margin: -.33em;
  padding: .33em;
  position: relative;
}

.external-link:after,
.external-link-new-window:after,
.internal-link:after {
  padding-left: 0px;
  transition: padding-left 0.3s ease 0s;
  font-size: 0.86667em;
}
.external-link:hover:after,
.external-link-new-window:hover:after,
.internal-link:hover:after {
  padding-left: 5px;
}

.external-link:after,
.external-link-new-window:after {
  transform: rotate(-29deg);
  -webkit-transform: rotate(-29deg);
  position: relative;
  bottom: 2px;
}

/* Link über den RTE zu Mitarbeiterseiten */
/* Link über den RTE mit Button rechts */
.internal-link.link-with-button:after {
  position: relative;
  top: 6px;
  font-size: 2.5em;
}
.internal-link.link-with-button:hover:after {
  padding-left: 0;
}

/* Link zu E-Mailadresse */
/* Style Telefon Textauszeichnung */
.phone:before {
  color: #00abe8;
}

/* Style Telefon Textauszeichnung */
.fax:before {
  color: #00abe8;
}

/* Link zu Downloadlinks */
.download:after {
  font-size: 0.8em;
}

.internal-link.blue {
  color: #00abe8;
}
.internal-link.blue:hover {
  color: #003e6e;
}

.reset-link {
  color: #4b4b4c;
}
.reset-link:hover {
  text-decoration: none;
}

/*
List elements

Basic styling for lists and definition elements.

Styleguide 3.5
*/
/*
Unordered- & Ordered-Lists

.reset-list - Resets the standard list styles of an `<ul>` or `<ol>` element.

Markup:
<ul class="{$modifiers}">
	<li>Unordered-List</li>
	<li>I am the first list-element.</li>
	<li>I am the second list-element.</li>
	<li>I am the third list-element.</li>
	<li>I am the fourth list-element.</li>
</ul>
<ol class="{$modifiers}">
	<li>Ordered-List</li>
	<li>I am the first list-element.</li>
	<li>I am the second list-element.</li>
	<li>I am the third list-element.</li>
	<li>I am the fourth list-element.</li>
</ol>

Styleguide 3.5.1
*/
menu,
ol,
ul {
  padding: 0 0 0 0em;
}

ol {
  padding: 0 0 0 1.53333em;
}

li > ul,
li > ol {
  /**
   * Remove vertical spacing from nested lists.
   */
  margin-bottom: 0;
}

/*
Reset-List helper class
*/
.nav,
.reset-list {
  /**
   *
   */
  list-style: none;
  margin-bottom: 0;
  padding-left: 0;
}

/*
Definitions.

.dl--horizontal - Display a definition list in a horizontal order.

Markup:
<dl class="{$modifiers}">
	<dt>Description lists</dt>
	<dd>A description list is perfect for defining terms.</dd>
	<dt>Euismod</dt>
	<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.</dd>
	<dd>Donec id elit non mi porta gravida at eget metus.</dd>
	<dt>Malesuada porta</dt>
	<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
	<dt>Felis euismod semper eget lacinia</dt>
	<dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
</dl>

Styleguide 3.5.3
*/
/*
Horizontal definition abstraction
*/
.dl--horizontal dt {
  float: left;
  width: 19%;
  overflow: hidden;
  clear: left;
  text-align: right;
}
.dl--horizontal dd {
  margin-left: 21%;
}

.siteContent ul {
  margin-left: 1.3em;
}
.siteContent ul li {
  list-style: square;
}
.siteContent ul li ul {
  margin-bottom: 0.66667em;
  padding: 0 0 0 1em;
}

/*
Form elements

Basic styling for form element labels.

Styleguide 3.6
*/
/*
Labels

Markup:
<label>I am an label</label>

Styleguide 3.6.1
*/
label {
  display: block;
  font-family: "Neo Sans Medium", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.33333;
}
label[for] {
  cursor: pointer;
}

/*
Legends

Markup:
<fieldset>
	<legend>I am an fieldset legend.</legend>
</fieldset>

Styleguide 3.6.2
*/
legend {
  display: block;
  width: 100%;
  font-size: 19px;
  color: #00abe8;
  border-bottom: 1px solid #bcbdbf;
  padding: 0;
}

/*
Form input elements

Basic styling for form inputs.

Styleguide 3.7
*/
/*
Text inputs

.textInput         - Basic styling for text input elements.
.textInput:hover   - Hover styling for basic text input elements.
.textInput:focus   - Focused styling for basic text input elements.

Markup:
<input type="text" class="{$modifiers}" /><br>
<textarea class="{$modifiers}" cols="40"></textarea>

Styleguide 3.7.1
*/
.textInput {
  height: 2.2em;
  padding: .2em .4em;
  margin-bottom: 15px;
  background: #fff;
  font-size: 14px;
  color: #585859;
}

textarea {
  height: auto;
  /* Reset height since textareas have the attribute rows="" */
  min-height: 60px;
  /* Set a min-height for textareas of 3 rows */
  padding: .2em .4em;
  resize: vertical;
  /* So users cannot expand the textarea over it's boundaries */
  overflow: auto;
  /* Removes default vertical scrollbar in IE6/7/8/9. */
  vertical-align: top;
  /* Improves readability and alignment in all browsers. */
}

.textInput,
textarea {
  border: 1px solid #bcbdbf;
  border-radius: 1px;
}
.textInput:focus,
textarea:focus {
  border-color: #4b4b4c;
}
.textInput.parsley-error,
textarea.parsley-error {
  border-color: #da3a00;
}

input::-webkit-datetime-edit {
  /**
   * A possible shadow-dom fix for webkit control spacing on input[type=time]
   */
  margin-top: -.17em;
  margin-bottom: -.17em;
}

.select--fullWidth {
  width: 100%;
}

/*
Checkboxes / Radio buttons

Markup:
<label><input type="checkbox" /> I am an checkbox</label>
<label><input type="radio" /> I am an radio button</label>

Styleguide 3.7.2
*/
input[type="checkbox"],
input[type="radio"] {
  margin-right: .35em;
  cursor: pointer;
}

/* Individual styles */
.textInput--searchForm {
  margin-top: 15px;
  border-width: 2px;
  position: relative;
  width: 300px;
  border-bottom: 0;
}
@media screen and (min-width: 624px) and (max-width: 1023px) {
  .textInput--searchForm {
    width: 100%;
  }
}
@media screen and (max-width: 623px) {
  .textInput--searchForm {
    width: 100%;
  }
}

#top-bar .tx-solr-searchbox {
  position: absolute;
  right: 76px;
  top: -10px;
  z-index: 11;
  display: none;
}
#top-bar .tx-solr-searchbox .textInput--searchForm {
  border-color: #000000;
  height: 43px;
}
#top-bar .tx-solr-searchbox .form--searchForm .fa-lupe {
  display: none;
}

.iconWrapperCenter {
  position: absolute;
  top: 40%;
  width: 100%;
  text-align: center;
}

.youtubeIcon {
  background-color: #ffffff;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 100px;
  padding: 12px 10px 10px;
  display: inline-block;
}

.topNavIcon {
  position: absolute;
  font-size: 1.3em;
  top: 11px;
  float: right;
  width: 34px;
  color: #FFFFFF;
  z-index: 10;
}

.topNavIcon__lupe {
  right: 37px;
}

/*
Buttons

Styleguide 3.8
*/
/*
Button Object

Display an anchor tag as a button.

.btn           - Display an element as an button.
.btn.btn--full - Set the button width to the width of it's parent element.
.btn:hover     - Standard hover styling for buttons.

Markup:
<button class="{$modifiers}">Send button</button>
<input type="button" class="{$modifiers}" value="Button" />
<input type="reset" class="{$modifiers}" value="Reset" />
<input type="submit" class="{$modifiers}" value="Submit" />
<a class="{$modifiers}">An anchor element.</a>

Styleguide 3.8.1
*/
.btn {
  display: inline-block;
  margin-bottom: 10px;
  /**
   * Set in em's so we can change the size of the button depending on the font-size.
   */
  padding: 1.1em 1.8em;
  border: 0;
  background: #07ace7;
  border-radius: 1px;
  cursor: pointer;
  font-size: 1em;
  /**
   * Normalize some rules accross the targeted elements (<input>, <button> and the .btn class).
   */
  font-weight: normal;
  line-height: 1;
  color: white;
  vertical-align: top;
}
.btn,
.btn:hover {
  text-decoration: none;
}

.btn--full, .holder ul.grid a > .navItem--secondLevel {
  display: block;
  text-align: center;
  /**
   * The following is so that this class works properly on inputs as well as anchor tags.
   */
  padding-right: 0;
  padding-left: 0;
  width: 100%;
}

.btn--blueBg, .holder ul.grid a > .navItem--secondLevel {
  border: 1px solid #07ace7;
  background-color: #07ace7;
  color: white;
}
.btn--blueBg.act, .holder ul.grid a > .act.navItem--secondLevel, .btn--blueBg:hover, .holder ul.grid a > .navItem--secondLevel:hover {
  background-color: #ffffff;
  color: #00abe8;
}

.btn--redBg {
  background-color: #da3a00;
}

/*
Code & pre-formatted text elements

Styleguide 3.12
*/
/*
Default styles

Markup:
<code>.css{ color: red; }</code><br>
<kbd>.css{ color: red; }</kbd><br>
<samp>.css{ color: red; }</samp><br>
<pre>.css{ color: red; }</pre>

Styleguide 3.12.1
*/
code,
kbd,
pre,
samp {
  /**
   * Corrects font family set oddly in Safari 5 and Chrome.
   */
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
  font-size: 1em;
}

pre {
  /**
   * Improves readability of pre-formatted text in all browsers.
   */
  white-space: pre-wrap;
}

/*
Quotes

Styleguide 3.11
*/
/*
Default Quote

Markup:
The following text <q>is an inline-quote</q>
<blockquote>This text is a full quotation element</blockquote>

Styleguide 3.11.1
*/
q {
  /**
   * Sets consistent quote types.
   */
  quotes: "\201C" "\201D" "\2018" "\2019";
}

/*
Rulers

Styleguide 3.10
*/
/*
Default horizontal ruler

Markup:
<hr>

Styleguide 3.10.1
*/
.csc-frame-rulerBefore:before, .csc-frame-rulerAfter:after,
hr {
  /**
  * Address differences between Firefox and other browsers.
  */
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  display: block;
  height: 0;
  border: 0;
  border-top: 1px solid #bcbdbf;
  padding: 0;
}

.hr--primary {
  border-color: #07ace7;
}

/*
Media

Basic styling for media elements.
*/
/*
Attachements & Images

Contents: 1: Make Images & Attachements responsive
					2: Styling the alt="" Text on images
						 http://csswizardry.com/2011/06/styling-alt-text-on-images/
					3: Removes border when inside `a` element in IE6/7/8/9, FF3.
					4: Remove the gap between images and the bottom of their containers:
						 h5bp.com/i/440
					5: Improves image quality when scaled in IE7.
						 code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
					6: Decrease font-size on figcaption elements
*/
embed,
iframe,
object,
img {
  /* 1 */
  border: none;
  max-width: 100%;
}

img {
  font-style: italic;
  /* 2 */
  border: 0;
  /* 3 */
  vertical-align: middle;
  /* 4 */
}
img[height] {
  /* 1 */
  height: auto;
}

figure {
  /**
   * Addresses margin not present in IE6/7/8/9, S5, O11.
   */
  margin: 1em 40px;
}

figcaption {
  /* 6 */
  font-size: 13px;
  font-family: "Neo Sans Light", Arial, sans-serif;
  letter-spacing: 0.03em;
}

/* Responsive videos via iframe */
.elasticIframeWrapper {
  width: 980px;
  max-width: 100%;
}
.elasticIframeWrapper .elasticIframeWrapper__iframeWrapper {
  position: relative;
  padding-bottom: 55%;
  padding-top: 12px;
  height: 0;
  overflow: hidden;
}
@media screen and (min-width: 624px) and (max-width: 1023px) {
  .elasticIframeWrapper .elasticIframeWrapper__iframeWrapper {
    padding-bottom: 55%;
    padding-top: 8px;
  }
}
@media screen and (max-width: 623px) {
  .elasticIframeWrapper .elasticIframeWrapper__iframeWrapper {
    padding-bottom: 53%;
    padding-top: 11px;
  }
}
.elasticIframeWrapper .elasticIframeWrapper__iframeWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.u-w-desk-2\/3 .elasticIframeWrapper .elasticIframeWrapper__iframeWrapper {
  padding-bottom: 54%;
  padding-top: 15px;
}
@media screen and (min-width: 624px) and (max-width: 1023px) {
  .u-w-desk-2\/3 .elasticIframeWrapper .elasticIframeWrapper__iframeWrapper {
    padding-bottom: 54%;
    padding-top: 14px;
  }
}
@media screen and (max-width: 623px) {
  .u-w-desk-2\/3 .elasticIframeWrapper .elasticIframeWrapper__iframeWrapper {
    padding-bottom: 54%;
    padding-top: 37px;
  }
}

/*
Multimedia elements
*/
audio {
  min-width: 65%;
}
audio:not([controls]) {
  /**
   * Prevents modern browsers from displaying `audio` without controls.
   */
  display: none;
  /**
   * Remove excess height in iOS5 devices.
   */
  height: 0;
}

/*
SVG element
*/
svg:not(:root) {
  /**
   * Corrects overflow displayed oddly in IE9.
   */
  overflow: hidden;
}

/*
Tables

Styleguide 3.9
*/
/*
Table Object

.table - Base class for all table-styles.
.table.table--bordered - Extends the base '.table' class to an basic bordered table.
.table.table--striped - Extends the base '.table' class to an clean table with borders below each row.
.table.table--condensed - Extends the base '.table' class to an condensed table.
.table.table--zebra - Extends the base '.table' class to an 'zebra'-styled table with odd & even changing background-colors.

Markup:
<table class="{$modifiers}">
	<thead>
		<tr>
			<th>Name</th>
			<th>Age</th>
			<th>Residence</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Max Mustermann</td>
			<td>20</td>
			<td>Berlin</td>
		</tr>
		<tr>
			<td>Max Mustermann</td>
			<td>20</td>
			<td>Berlin</td>
		</tr>
		<tr>
			<td>Max Mustermann</td>
			<td>20</td>
			<td>Berlin</td>
		</tr>
	</tbody>
</table>

Styleguide 3.9.1
*/
table {
  max-width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

th {
  text-align: left;
  vertical-align: bottom;
  font-family: "Neo Sans Medium", Arial, sans-serif;
  font-weight: 400;
}

td {
  vertical-align: top;
}

.table, .contenttable {
  width: 100%;
  margin-top: 0;
}
.table td, .contenttable td, .table th, .contenttable th {
  padding: 0.5em;
}

.table--bordered {
  border: 1px solid #07ace7;
  border-collapse: separate;
}
.table--bordered td, .table--bordered th {
  border-left: 1px solid #07ace7;
  border-bottom: 1px solid #07ace7;
}
.table--bordered td:first-child, .table--bordered th:first-child {
  border-left: 0;
}
.table--bordered tr:last-child > td {
  border-bottom: 0;
}

.table--striped td, .contenttable td, .table--striped th, .contenttable th {
  border-bottom: 2px solid #07ace7;
}
.table--striped th, .contenttable th {
  padding-top: 0;
}

.table--striped-- td, .table--striped-- th {
  border-width: 1px;
}

.table--condensed td, .contenttable td, .table--condensed th, .contenttable th {
  padding: 1em 0.5em;
}

.table--zebra tbody tr:nth-child(even) {
  background: #fff;
}
.table--zebra tbody tr:nth-child(odd) {
  background: #f2f2f2;
}

.contenttable {
  /* table-layout:fixed; */
}

/*
Molecules

Mlecules are groups of elements that function together as a unit. For example, a form label, search input, and button atom can combine them together to form a search form molecule.

Styleguide 4
*/
/* Accordion: classic view*/
.treatment {
  margin-bottom: 2px;
  background-color: #07ace7;
}
.treatment .siteWrapper--fullWidth {
  background-color: inherit;
}
.treatment.open {
  background-color: #ffffff;
  box-shadow: 0px 0px 6px 0px #676c7c;
  position: relative;
  margin-bottom: 0;
  margin-top: -2px;
}
.treatment.open > h3 {
  margin-bottom: 0;
  color: #00abe8;
}
.treatment.open > h3:after {
  font-size: 1.4em;
}
.treatment > h3 {
  padding: 10px;
  padding-left: 20px;
  margin-bottom: 0;
  cursor: pointer;
  color: #FFFFFF;
  font-size: 1em;
}
.treatment > h3:after {
  float: right;
  font-size: 1.4em;
}
.treatment > .panel-collapse {
  display: none;
  width: 100%;
  padding: 10px;
  padding-left: 20px;
  padding-right: 20px;
}
.treatment > .active {
  margin-bottom: 0;
}

.downloadBox div:nth-child(odd) {
  padding-left: 5px;
  padding-right: 0;
}

.downloadBox__item {
  width: 50%;
  float: left;
  padding-right: 5px;
  padding-left: 0;
  margin-bottom: 10px;
  height: 75px;
  overflow: hidden;
  position: relative;
}
.downloadBox__item img {
  height: 75px;
}
.downloadBox__item i:after {
  border-radius: 100px;
  width: 25px;
  height: 25px;
  background-color: #d1d1d2;
  padding: 9px 5px 0 5px;
}
.downloadBox__item .iconWrapperCenter {
  top: 17%;
}
.downloadBox__item .iconWrapperCenter .youtubeIcon {
  width: 50px;
  height: 50px;
}
.downloadBox__item .iconWrapperCenter .youtubeIcon .fa-videopfeil {
  font-size: 1.26667em;
}
.downloadBox__item .fa-download, .downloadBox__item .download {
  bottom: 5px;
  position: absolute;
  z-index: 10;
  right: 5px;
  color: #ffffff;
  font-size: 0.73333em;
}
.downloadBox__item:hover i:after {
  background-color: #07ace7;
}
.downloadBox__item:hover .fa-videopfeil {
  color: #00abe8;
}

.textHover {
  transition: margin-top 0.5s ease-in-out, background-color 0.5s ease-in-out;
  height: 100%;
  padding: 3px;
  margin-top: 0px;
  position: relative;
  z-index: 2;
  background-color: rgba(255, 255, 255, 0.8);
  color: #4b4b4c;
  font-size: 0.86667em;
  line-height: 1.1em;
}

.downloadBox__item:hover .textHover,
.downloadBox__item.hover .textHover {
  margin-top: -75px;
}

.eventImage {
  width: 100%;
  height: auto;
}
.eventImage figcaption {
  margin-bottom: 15px;
}

/*
Form

Styleguide 4.3
*/
/*
Form wrapper elements
*/
fieldset {
  /**
   * Reset border, margin, and padding to define a consistend style accross all browsers.
   */
  border: 0;
  margin: 0;
  padding: 0;
}

/*
Form-Inline abstraction

.form--inline - Display a `<form>` and all it's content in a horizontal order.

Markup:
<form class="{$modifiers}">
	<label>Username: </label>
	<input class="textInput" type="text" placeholder="Username...">
	<label>Password: </label>
	<input class="textInput" type="password" placeholder="Password...">
	<label class="label--checkbox">
		<input type="checkbox">Remember me
	</label>
	<button type="submit" class="btn">Sign in</button>
</form>

Styleguide 4.3.1
*/
.form--inline label {
  margin-right: .3em;
  width: 15%;
}
@media screen and (max-width: 623px) {
  .form--inline label {
    width: 100%;
  }
}
.form--inline .label--radio,
.form--inline .label--checkbox {
  margin-right: 1em;
  width: auto;
}
.form--inline .label--radio input,
.form--inline .label--checkbox input {
  margin-right: .35em;
}
.form--inline input[type=text],
.form--inline input[type=email] {
  margin-right: 1em;
  width: 320px;
}
@media screen and (max-width: 623px) {
  .form--inline input[type=text],
  .form--inline input[type=email] {
    width: 90%;
  }
}
.form--inline textarea {
  width: 320px;
}
@media screen and (max-width: 623px) {
  .form--inline textarea {
    width: 90%;
  }
}
.form--inline label,
.form--inline button,
.form--inline input,
.form--inline select,
.form--inline textarea {
  display: inline-block;
  margin-bottom: 0;
  vertical-align: top;
  margin-top: 0.4em;
}
.form--inline .powermail_fieldwrap {
  margin-bottom: 10px;
}

.form--searchForm {
  position: relative;
}
.form--searchForm .fa-lupe {
  position: absolute;
  right: 6px;
  top: 19px;
  color: #00abe8;
}

.parsley-errors-list {
  margin-bottom: 0;
}
.parsley-errors-list.filled {
  position: relative;
  padding: 5px;
  margin: 0;
  color: #ffffff;
  background: #da3a00;
  display: table-cell;
  top: 4px;
  left: 158px;
  font-size: 0.93333em;
}
@media screen and (max-width: 623px) {
  .parsley-errors-list.filled {
    left: 0;
  }
}
.parsley-errors-list.filled li {
  list-style-type: none;
}
.parsley-errors-list.filled:after {
  top: -9px;
  left: 0px;
  bottom: auto;
  left: auto;
  border-width: 9px 8px 0 0;
  border-color: transparent #da3a00;
  content: "";
  position: absolute;
  border-style: solid;
  display: block;
  width: 0;
}

.form--inline .powermail_submit {
  margin-bottom: 30px;
}

.powermail_radio_outer .parsley-errors-list.filled,
.powermail_check_outer .parsley-errors-list.filled {
  left: 0;
}

/*
Grids

Styleguide 4.1
*/
/*
Grid Object

Grid object which makes use of the generated width classes.

Markup:
<div class="g">
	<div class="gi u-w1/3">first collumn</div>
	<div class="gi u-w1/3">second collumn</div>
	<div class="gi u-w1/3">third collumn</div>
</div>

Styleguide 4.1.1
*/
.g,
.grid {
  margin-left: -10px;
  margin-right: -10px;
}

.gi,
.grid__item {
  float: left;
  padding-left: 10px;
  padding-right: 10px;
  min-height: 1px;
}

a .linkedBox p {
  color: #4b4b4c;
  vertical-align: middle;
}
a .linkedBox p i {
  color: #d1d1d2;
  transition: all .4s ease;
}
a:hover h2 {
  text-decoration: underline;
}
a:hover p i {
  color: #07ace7;
}

.mejs-offscreen {
  /* Accessibility: hide screen reader texts (and prefer "top" for RTL languages). */
  position: absolute !important;
  top: -10000px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}

.mejs-container {
  position: relative;
  background: #000;
  font-family: Helvetica, Arial;
  text-align: left;
  vertical-align: top;
  text-indent: 0;
  max-width: 100% !important;
}

.me-plugin {
  position: absolute;
}

.mejs-embed, .mejs-embed body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: #000;
  overflow: hidden;
}

.mejs-fullscreen {
  /* set it to not show scroll bars so 100% will work */
  overflow: hidden !important;
}

.mejs-container-fullscreen {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  z-index: 1000;
}

.mejs-container-fullscreen .mejs-mediaelement,
.mejs-container-fullscreen video {
  width: 100%;
  height: 100%;
}

.mejs-clear {
  clear: both;
}

/* Start: LAYERS */
.mejs-background {
  position: absolute;
  top: 0;
  left: 0;
}

.mejs-mediaelement {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.mejs-poster {
  position: absolute;
  top: 0;
  left: 0;
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

:root .mejs-poster img {
  display: none;
}

.mejs-poster img {
  border: 0;
  padding: 0;
  border: 0;
}

.mejs-overlay {
  position: absolute;
  top: 0;
  left: 0;
}

.mejs-overlay-play {
  cursor: pointer;
}

.mejs-overlay-button {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin: -50px 0 0 -50px;
  background: url(../Images/bigplay.svg) no-repeat;
}

.no-svg .mejs-overlay-button {
  background-image: url(../Images/bigplay.png);
}

.mejs-overlay:hover .mejs-overlay-button {
  background-position: 0 -100px;
}

.mejs-overlay-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  margin: -40px 0 0 -40px;
  background: #333;
  background: url(../Images/background.png);
  background: rgba(0, 0, 0, 0.9);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(50, 50, 50, 0.9)), to(rgba(0, 0, 0, 0.9)));
  background: -webkit-linear-gradient(top, rgba(50, 50, 50, 0.9), rgba(0, 0, 0, 0.9));
  background: -moz-linear-gradient(top, rgba(50, 50, 50, 0.9), rgba(0, 0, 0, 0.9));
  background: -o-linear-gradient(top, rgba(50, 50, 50, 0.9), rgba(0, 0, 0, 0.9));
  background: -ms-linear-gradient(top, rgba(50, 50, 50, 0.9), rgba(0, 0, 0, 0.9));
  background: linear-gradient(rgba(50, 50, 50, 0.9), rgba(0, 0, 0, 0.9));
}

.mejs-overlay-loading span {
  display: block;
  width: 80px;
  height: 80px;
  background: transparent url(../Images/loading.gif) 50% 50% no-repeat;
}

/* End: LAYERS */
/* Start: CONTROL BAR */
.mejs-container .mejs-controls {
  position: absolute;
  list-style-type: none;
  margin: 0;
  padding: 0;
  bottom: 0;
  left: 0;
  background: url(../Images/background.png);
  background: rgba(0, 0, 0, 0.7);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(50, 50, 50, 0.7)), to(rgba(0, 0, 0, 0.7)));
  background: -webkit-linear-gradient(top, rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
  background: -moz-linear-gradient(top, rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
  background: -o-linear-gradient(top, rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
  background: -ms-linear-gradient(top, rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
  background: linear-gradient(rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
  height: 30px;
  width: 100%;
}

.mejs-container .mejs-controls div {
  list-style-type: none;
  background-image: none;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  width: 26px;
  height: 26px;
  font-size: 11px;
  line-height: 11px;
  font-family: Helvetica, Arial;
  border: 0;
}

.mejs-controls .mejs-button button {
  cursor: pointer;
  display: block;
  font-size: 0;
  line-height: 0;
  text-decoration: none;
  margin: 7px 5px;
  padding: 0;
  position: absolute;
  height: 16px;
  width: 16px;
  border: 0;
  background: transparent url(../Images/controls.svg) no-repeat;
}

.no-svg .mejs-controls .mejs-button button {
  background-image: url(../Images/controls.png);
}

/* :focus for accessibility */
.mejs-controls .mejs-button button:focus {
  outline: dotted 1px #999;
}

/* End: CONTROL BAR */
/* Start: Time (Current / Duration) */
.mejs-container .mejs-controls .mejs-time {
  color: #fff;
  display: block;
  height: 17px;
  width: auto;
  padding: 10px 3px 0 3px;
  overflow: hidden;
  text-align: center;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

.mejs-container .mejs-controls .mejs-time a {
  color: #fff;
  font-size: 11px;
  line-height: 12px;
  display: block;
  float: left;
  margin: 1px 2px 0 0;
  width: auto;
}

/* End: Time (Current / Duration) */
/* Start: Play/Pause/Stop */
.mejs-controls .mejs-play button {
  background-position: 0 0;
}

.mejs-controls .mejs-pause button {
  background-position: 0 -16px;
}

.mejs-controls .mejs-stop button {
  background-position: -112px 0;
}

/* Start: Play/Pause/Stop */
/* Start: Progress Bar */
.mejs-controls div.mejs-time-rail {
  direction: ltr;
  width: 200px;
  padding-top: 5px;
}

.mejs-controls .mejs-time-rail span, .mejs-controls .mejs-time-rail a {
  display: block;
  position: absolute;
  width: 180px;
  height: 10px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  cursor: pointer;
}

.mejs-controls .mejs-time-rail .mejs-time-total {
  margin: 5px;
  background: #333;
  background: rgba(50, 50, 50, 0.8);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(30, 30, 30, 0.8)), to(rgba(60, 60, 60, 0.8)));
  background: -webkit-linear-gradient(top, rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8));
  background: -moz-linear-gradient(top, rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8));
  background: -o-linear-gradient(top, rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8));
  background: -ms-linear-gradient(top, rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8));
  background: linear-gradient(rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8));
}

.mejs-controls .mejs-time-rail .mejs-time-buffering {
  width: 100%;
  background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
  background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  -webkit-background-size: 15px 15px;
  -moz-background-size: 15px 15px;
  -o-background-size: 15px 15px;
  background-size: 15px 15px;
  -webkit-animation: buffering-stripes 2s linear infinite;
  -moz-animation: buffering-stripes 2s linear infinite;
  -ms-animation: buffering-stripes 2s linear infinite;
  -o-animation: buffering-stripes 2s linear infinite;
  animation: buffering-stripes 2s linear infinite;
}

@-webkit-keyframes buffering-stripes {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 30px 0;
  }
}
@-moz-keyframes buffering-stripes {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 30px 0;
  }
}
@-ms-keyframes buffering-stripes {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 30px 0;
  }
}
@-o-keyframes buffering-stripes {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 30px 0;
  }
}
@keyframes buffering-stripes {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 30px 0;
  }
}
.mejs-controls .mejs-time-rail .mejs-time-loaded {
  background: #3caac8;
  background: rgba(60, 170, 200, 0.8);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(44, 124, 145, 0.8)), to(rgba(78, 183, 212, 0.8)));
  background: -webkit-linear-gradient(top, rgba(44, 124, 145, 0.8), rgba(78, 183, 212, 0.8));
  background: -moz-linear-gradient(top, rgba(44, 124, 145, 0.8), rgba(78, 183, 212, 0.8));
  background: -o-linear-gradient(top, rgba(44, 124, 145, 0.8), rgba(78, 183, 212, 0.8));
  background: -ms-linear-gradient(top, rgba(44, 124, 145, 0.8), rgba(78, 183, 212, 0.8));
  background: linear-gradient(rgba(44, 124, 145, 0.8), rgba(78, 183, 212, 0.8));
  width: 0;
}

.mejs-controls .mejs-time-rail .mejs-time-current {
  background: #fff;
  background: rgba(255, 255, 255, 0.8);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0.9)), to(rgba(200, 200, 200, 0.8)));
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8));
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8));
  background: -o-linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8));
  background: -ms-linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8));
  background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8));
  width: 0;
}

.mejs-controls .mejs-time-rail .mejs-time-handle {
  display: none;
  position: absolute;
  margin: 0;
  width: 10px;
  background: #fff;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  cursor: pointer;
  border: solid 2px #333;
  top: -2px;
  text-align: center;
}

.mejs-controls .mejs-time-rail .mejs-time-float {
  position: absolute;
  display: none;
  background: #eee;
  width: 36px;
  height: 17px;
  border: solid 1px #333;
  top: -26px;
  margin-left: -18px;
  text-align: center;
  color: #111;
}

.mejs-controls .mejs-time-rail .mejs-time-float-current {
  margin: 2px;
  width: 30px;
  display: block;
  text-align: center;
  left: 0;
}

.mejs-controls .mejs-time-rail .mejs-time-float-corner {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  line-height: 0;
  border: solid 5px #eee;
  border-color: #eee transparent transparent transparent;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  top: 15px;
  left: 13px;
}

.mejs-long-video .mejs-controls .mejs-time-rail .mejs-time-float {
  width: 48px;
}

.mejs-long-video .mejs-controls .mejs-time-rail .mejs-time-float-current {
  width: 44px;
}

.mejs-long-video .mejs-controls .mejs-time-rail .mejs-time-float-corner {
  left: 18px;
}

/*
.mejs-controls .mejs-time-rail:hover .mejs-time-handle {
	visibility:visible;
}
*/
/* End: Progress Bar */
/* Start: Fullscreen */
.mejs-controls .mejs-fullscreen-button button {
  background-position: -32px 0;
}

.mejs-controls .mejs-unfullscreen button {
  background-position: -32px -16px;
}

/* End: Fullscreen */
/* Start: Mute/Volume */
.mejs-controls .mejs-mute button {
  background-position: -16px -16px;
}

.mejs-controls .mejs-unmute button {
  background-position: -16px 0;
}

.mejs-controls .mejs-volume-button {
  position: relative;
}

.mejs-controls .mejs-volume-button .mejs-volume-slider {
  display: none;
  height: 115px;
  width: 25px;
  background: url(../Images/background.png);
  background: rgba(50, 50, 50, 0.7);
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  top: -115px;
  left: 0;
  z-index: 1;
  position: absolute;
  margin: 0;
}

.mejs-controls .mejs-volume-button:hover {
  -webkit-border-radius: 0 0 4px 4px;
  -moz-border-radius: 0 0 4px 4px;
  border-radius: 0 0 4px 4px;
}

/*
.mejs-controls .mejs-volume-button:hover .mejs-volume-slider {
	display: block;
}
*/
.mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-total {
  position: absolute;
  left: 11px;
  top: 8px;
  width: 2px;
  height: 100px;
  background: #ddd;
  background: rgba(255, 255, 255, 0.5);
  margin: 0;
}

.mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-current {
  position: absolute;
  left: 11px;
  top: 8px;
  width: 2px;
  height: 100px;
  background: #ddd;
  background: rgba(255, 255, 255, 0.9);
  margin: 0;
}

.mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-handle {
  position: absolute;
  left: 4px;
  top: -3px;
  width: 16px;
  height: 6px;
  background: #ddd;
  background: rgba(255, 255, 255, 0.9);
  cursor: N-resize;
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  border-radius: 1px;
  margin: 0;
}

/* horizontal version */
.mejs-controls a.mejs-horizontal-volume-slider {
  height: 26px;
  width: 56px;
  position: relative;
  display: block;
  float: left;
  vertical-align: middle;
}

.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
  position: absolute;
  left: 0;
  top: 11px;
  width: 50px;
  height: 8px;
  margin: 0;
  padding: 0;
  font-size: 1px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  background: #333;
  background: rgba(50, 50, 50, 0.8);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(30, 30, 30, 0.8)), to(rgba(60, 60, 60, 0.8)));
  background: -webkit-linear-gradient(top, rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8));
  background: -moz-linear-gradient(top, rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8));
  background: -o-linear-gradient(top, rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8));
  background: -ms-linear-gradient(top, rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8));
  background: linear-gradient(rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8));
}

.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
  position: absolute;
  left: 0;
  top: 11px;
  width: 50px;
  height: 8px;
  margin: 0;
  padding: 0;
  font-size: 1px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  background: #fff;
  background: rgba(255, 255, 255, 0.8);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0.9)), to(rgba(200, 200, 200, 0.8)));
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8));
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8));
  background: -o-linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8));
  background: -ms-linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8));
  background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8));
}

.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle {
  display: none;
}

/* End: Mute/Volume */
/* Start: Track (Captions and Chapters) */
.mejs-controls .mejs-captions-button {
  position: relative;
}

.mejs-controls .mejs-captions-button button {
  background-position: -48px 0;
}

.mejs-controls .mejs-captions-button .mejs-captions-selector {
  visibility: hidden;
  position: absolute;
  bottom: 26px;
  right: -51px;
  width: 85px;
  height: 100px;
  background: url(../Images/background.png);
  background: rgba(50, 50, 50, 0.7);
  border: solid 1px transparent;
  padding: 10px 10px 0 10px;
  overflow: hidden;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}

/*
.mejs-controls .mejs-captions-button:hover  .mejs-captions-selector {
	visibility: visible;
}
*/
.mejs-controls .mejs-captions-button .mejs-captions-selector ul {
  margin: 0;
  padding: 0;
  display: block;
  list-style-type: none !important;
  overflow: hidden;
}

.mejs-controls .mejs-captions-button .mejs-captions-selector ul li {
  margin: 0 0 6px 0;
  padding: 0;
  list-style-type: none !important;
  display: block;
  color: #fff;
  overflow: hidden;
}

.mejs-controls .mejs-captions-button .mejs-captions-selector ul li input {
  clear: both;
  float: left;
  margin: 3px 3px 0 5px;
}

.mejs-controls .mejs-captions-button .mejs-captions-selector ul li label {
  width: 55px;
  float: left;
  padding: 4px 0 0 0;
  line-height: 15px;
  font-family: helvetica, arial;
  font-size: 10px;
}

.mejs-controls .mejs-captions-button .mejs-captions-translations {
  font-size: 10px;
  margin: 0 0 5px 0;
}

.mejs-chapters {
  position: absolute;
  top: 0;
  left: 0;
  -xborder-right: solid 1px #fff;
  width: 10000px;
  z-index: 1;
}

.mejs-chapters .mejs-chapter {
  position: absolute;
  float: left;
  background: #222;
  background: rgba(0, 0, 0, 0.7);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(50, 50, 50, 0.7)), to(rgba(0, 0, 0, 0.7)));
  background: -webkit-linear-gradient(top, rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
  background: -moz-linear-gradient(top, rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
  background: -o-linear-gradient(top, rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
  background: -ms-linear-gradient(top, rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
  background: linear-gradient(rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
  filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#323232,endColorstr=#000000);
  overflow: hidden;
  border: 0;
}

.mejs-chapters .mejs-chapter .mejs-chapter-block {
  font-size: 11px;
  color: #fff;
  padding: 5px;
  display: block;
  border-right: solid 1px #333;
  border-bottom: solid 1px #333;
  cursor: pointer;
}

.mejs-chapters .mejs-chapter .mejs-chapter-block-last {
  border-right: none;
}

.mejs-chapters .mejs-chapter .mejs-chapter-block:hover {
  background: #666;
  background: rgba(102, 102, 102, 0.7);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(102, 102, 102, 0.7)), to(rgba(50, 50, 50, 0.6)));
  background: -webkit-linear-gradient(top, rgba(102, 102, 102, 0.7), rgba(50, 50, 50, 0.6));
  background: -moz-linear-gradient(top, rgba(102, 102, 102, 0.7), rgba(50, 50, 50, 0.6));
  background: -o-linear-gradient(top, rgba(102, 102, 102, 0.7), rgba(50, 50, 50, 0.6));
  background: -ms-linear-gradient(top, rgba(102, 102, 102, 0.7), rgba(50, 50, 50, 0.6));
  background: linear-gradient(rgba(102, 102, 102, 0.7), rgba(50, 50, 50, 0.6));
  filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#666666,endColorstr=#323232);
}

.mejs-chapters .mejs-chapter .mejs-chapter-block .ch-title {
  font-size: 12px;
  font-weight: bold;
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin: 0 0 3px 0;
  line-height: 12px;
}

.mejs-chapters .mejs-chapter .mejs-chapter-block .ch-timespan {
  font-size: 12px;
  line-height: 12px;
  margin: 3px 0 4px 0;
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mejs-captions-layer {
  position: absolute;
  bottom: 0;
  left: 0;
  text-align: center;
  line-height: 20px;
  font-size: 16px;
  color: #fff;
}

.mejs-captions-layer a {
  color: #fff;
  text-decoration: underline;
}

.mejs-captions-layer[lang=ar] {
  font-size: 20px;
  font-weight: normal;
}

.mejs-captions-position {
  position: absolute;
  width: 100%;
  bottom: 15px;
  left: 0;
}

.mejs-captions-position-hover {
  bottom: 35px;
}

.mejs-captions-text {
  padding: 3px 5px;
  background: url(../Images/background.png);
  background: rgba(20, 20, 20, 0.5);
  white-space: pre-wrap;
}

/* End: Track (Captions and Chapters) */
/* Start: Error */
.me-cannotplay a {
  color: #fff;
  font-weight: bold;
}

.me-cannotplay span {
  padding: 15px;
  display: block;
}

/* End: Error */
/* Start: Loop */
.mejs-controls .mejs-loop-off button {
  background-position: -64px -16px;
}

.mejs-controls .mejs-loop-on button {
  background-position: -64px 0;
}

/* End: Loop */
/* Start: backlight */
.mejs-controls .mejs-backlight-off button {
  background-position: -80px -16px;
}

.mejs-controls .mejs-backlight-on button {
  background-position: -80px 0;
}

/* End: backlight */
/* Start: Picture Controls */
.mejs-controls .mejs-picturecontrols-button {
  background-position: -96px 0;
}

/* End: Picture Controls */
/* context menu */
.mejs-contextmenu {
  position: absolute;
  width: 150px;
  padding: 10px;
  border-radius: 4px;
  top: 0;
  left: 0;
  background: #fff;
  border: solid 1px #999;
  z-index: 1001;
  /* make sure it shows on fullscreen */
}

.mejs-contextmenu .mejs-contextmenu-separator {
  height: 1px;
  font-size: 0;
  margin: 5px 6px;
  background: #333;
}

.mejs-contextmenu .mejs-contextmenu-item {
  font-family: Helvetica, Arial;
  font-size: 12px;
  padding: 4px 6px;
  cursor: pointer;
  color: #333;
}

.mejs-contextmenu .mejs-contextmenu-item:hover {
  background: #2C7C91;
  color: #fff;
}

/* Start: Source Chooser */
.mejs-controls .mejs-sourcechooser-button {
  position: relative;
}

.mejs-controls .mejs-sourcechooser-button button {
  background-position: -128px 0;
}

.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector {
  visibility: hidden;
  position: absolute;
  bottom: 26px;
  right: -10px;
  width: 130px;
  height: 100px;
  background: url(../Images/background.png);
  background: rgba(50, 50, 50, 0.7);
  border: solid 1px transparent;
  padding: 10px;
  overflow: hidden;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}

.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul {
  margin: 0;
  padding: 0;
  display: block;
  list-style-type: none !important;
  overflow: hidden;
}

.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li {
  margin: 0 0 6px 0;
  padding: 0;
  list-style-type: none !important;
  display: block;
  color: #fff;
  overflow: hidden;
}

.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li input {
  clear: both;
  float: left;
  margin: 3px 3px 0 5px;
}

.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li label {
  width: 100px;
  float: left;
  padding: 4px 0 0 0;
  line-height: 15px;
  font-family: helvetica, arial;
  font-size: 10px;
}

/* End: Source Chooser */
/* Start: Postroll */
.mejs-postroll-layer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../Images/background.png);
  background: rgba(50, 50, 50, 0.7);
  z-index: 1000;
  overflow: hidden;
}

.mejs-postroll-layer-content {
  width: 100%;
  height: 100%;
}

.mejs-postroll-close {
  position: absolute;
  right: 0;
  top: 0;
  background: url(../Images/background.png);
  background: rgba(50, 50, 50, 0.7);
  color: #fff;
  padding: 4px;
  z-index: 100;
  cursor: pointer;
}

/* End: Postroll */
/* Start: Speed */
div.mejs-speed-button {
  width: 46px !important;
  position: relative;
}

.mejs-controls .mejs-button.mejs-speed-button button {
  background: transparent;
  width: 36px;
  font-size: 11px;
  line-height: normal;
  color: #ffffff;
}

.mejs-controls .mejs-speed-button .mejs-speed-selector {
  visibility: hidden;
  position: absolute;
  top: -100px;
  left: -10px;
  width: 60px;
  height: 100px;
  background: url(../Images/background.png);
  background: rgba(50, 50, 50, 0.7);
  border: solid 1px transparent;
  padding: 0;
  overflow: hidden;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}

.mejs-controls .mejs-speed-button:hover > .mejs-speed-selector {
  visibility: visible;
}

.mejs-controls .mejs-speed-button .mejs-speed-selector ul li label.mejs-speed-selected {
  color: #21f8f8;
}

.mejs-controls .mejs-speed-button .mejs-speed-selector ul {
  margin: 0;
  padding: 0;
  display: block;
  list-style-type: none !important;
  overflow: hidden;
}

.mejs-controls .mejs-speed-button .mejs-speed-selector ul li {
  margin: 0 0 6px 0;
  padding: 0 10px;
  list-style-type: none !important;
  display: block;
  color: #fff;
  overflow: hidden;
}

.mejs-controls .mejs-speed-button .mejs-speed-selector ul li input {
  clear: both;
  float: left;
  margin: 3px 3px 0 5px;
  display: none;
}

.mejs-controls .mejs-speed-button .mejs-speed-selector ul li label {
  width: 60px;
  float: left;
  padding: 4px 0 0 0;
  line-height: 15px;
  font-family: helvetica, arial;
  font-size: 11.5px;
  color: white;
  margin-left: 5px;
  cursor: pointer;
}

.mejs-controls .mejs-speed-button .mejs-speed-selector ul li:hover {
  background-color: #c8c8c8 !important;
  background-color: rgba(255, 255, 255, 0.4) !important;
}

/* End: Speed */
/* Start: Skip Back */
.mejs-controls .mejs-button.mejs-skip-back-button {
  background: transparent url(../Images/skipback.png) no-repeat;
  background-position: 3px 3px;
}

.mejs-controls .mejs-button.mejs-skip-back-button button {
  background: transparent;
  font-size: 9px;
  line-height: normal;
  color: #ffffff;
}

/* End: Skip Back */
body.no-scroll-x {
  overflow: auto;
}

.page {
  position: relative;
  width: 100%;
  z-index: 10;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}

.page.navigating {
  margin-right: 85%;
  margin-left: 85%;
}

@media (max-width: 1023px) {
  /* Breite beträgt höchstens 70em */
  .page .siteHeader {
    padding-top: 63px;
    /* nav-bar */
  }
}
.top-bar {
  position: fixed;
  width: 100%;
  background-color: #222223;
  z-index: 1000;
  border-bottom: 3px solid #003e6e;
}

.top-bar-vertical {
  width: 85%;
  height: 100%;
  z-index: 1;
  overflow: auto;
  display: none;
}
.top-bar-vertical.expanded {
  display: block;
}

/* Menu Button */
.toggle-nav {
  display: inline-block;
  height: 51px;
  overflow: hidden;
}

.top-bar .toggle-topbar.menu-button {
  padding: 0;
  width: 2.5em;
  border: none;
  font-size: 1.5em;
  color: transparent;
  background: transparent;
  right: auto;
  float: left;
  position: relative;
  z-index: 10;
}

.top-bar .toggle-topbar.menu-button:before {
  position: absolute;
  top: 0.5em;
  bottom: 0.5em;
  left: 0.5em;
  background: linear-gradient(#ffffff 20%, transparent 20%, transparent 40%, #ffffff 40%, #ffffff 60%, transparent 60%, transparent 80%, #ffffff 80%);
  background: -webkit-linear-gradient(#ffffff 20%, transparent 20%, transparent 40%, #ffffff 40%, #ffffff 60%, transparent 60%, transparent 80%, #ffffff 80%);
  content: '';
  width: 36px;
  height: 29px;
}

.top-bar.expanded {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.top-bar-horizontal.expanded .top-bar-section {
  display: none;
}

/* Navigation */
.navgoco {
  overflow: auto;
  box-shadow: 0px 0px 5px 6px #000000;
}

.navgoco li {
  display: block;
  padding: 0;
  border-bottom: 1px solid #6b6b6b;
}

.navgoco li:last-child {
  border-bottom: 0;
}

.navgoco > li {
  background-color: #222223;
}

.navgoco > li > ul > li {
  background-color: #303030;
}

.navgoco li > ul > li > ul > li {
  background-color: #404040;
}

.navgoco li ul li ul li ul li {
  background-color: #525252;
}

.navgoco li ul li ul li ul li ul li {
  background-color: #616161;
}

.navgoco li ul li ul li ul li ul li ul li {
  background-color: #707070;
}

.navgoco > li > ul > li a {
  padding-left: 20px;
}

.navgoco li > ul > li > ul > li a {
  padding-left: 30px;
}

.navgoco li ul li ul li ul li a {
  padding-left: 40px;
}

.navgoco li ul li ul li ul li ul li a {
  padding-left: 50px;
}

.navgoco li ul li ul li ul li ul li ul li a {
  padding-left: 60px;
}

.navgoco a {
  color: #fff;
  display: block;
  outline: none;
  text-decoration: none;
  position: relative;
}

.navgoco li > a > span {
  font-size: 19px;
  font-weight: bolder;
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  position: absolute;
  right: 10px;
  width: 30px;
  height: 30px;
  display: block;
  top: 3px;
}

.navgoco li > a > span:after {
  content: "";
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  font-size: 100%;
  padding: 0 0 0 10px;
  position: relative;
  top: 4px;
}

.navgoco li.open > a > span {
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
}

.navgoco li.act > a {
  color: #00abe8;
}

.navgoco li a {
  font-size: 20px;
  line-height: 30px;
  padding: 8px 13px 8px 10px;
}

.navgoco .li--headline {
  padding: 4px 10px 4px 30px;
  border-bottom: 0;
  color: #fff;
  margin-top: -1px;
  text-transform: uppercase;
  font-family: "Neo Sans Light";
  background-color: #07ace7;
}

/*
Navigations

Styleguide 4.2
*/
/*
Nav Object

A modified version of the navigation object from inuit.css.

.nav - Throws a list into horizontal mode.
.nav.nav--stacked - Throws a list into vertical mode.
.nav.nav--fit - Forces a list to occupy 100% of the available width of it's parent.

Markup:
<ul class="{$modifiers}">
	<li><a href="">Home</a></li>
	<li><a href="">About</a></li>
	<li><a href="">Products</a></li>
	<li><a href="">Contact</a></li>
</ul>

Styleguide 4.2.1
*/
.nav li {
  display: inline-block;
}
.nav a {
  display: inline-block;
}

.nav--stacked li {
  display: list-item;
  position: relative;
}

.nav--fit {
  display: table;
  width: 100%;
}
.nav--fit > li {
  display: table-cell;
}

/* used for Topnavi with pipe-symbol for the last li-element */
.nav--separate > li {
  position: relative;
  padding: 0 8px;
}
.nav--separate > li:after {
  display: block;
  content: '\007C';
  position: absolute;
  right: 0;
  top: 0;
}

.nav--separate--lastNoPipe > li:last-child:after {
  content: '';
}

.nav--bordered > li {
  border: 2px solid #838384;
  margin-right: 5px;
}
.nav--bordered > li a {
  color: #838384;
  padding: 3px 15px;
  font-size: 1.13333em;
}
.nav--bordered > li a.act {
  color: #00abe8;
}
.nav--bordered > li.act, .nav--bordered > li:hover {
  border-color: #00abe8;
}
.nav--bordered > li.act a, .nav--bordered > li:hover a {
  color: #00abe8;
}

.nav--topNav a:hover {
  color: #00abe8;
}

.nav--breadcrumb {
  padding-top: 1em;
}
.nav--breadcrumb li {
  margin: 0 3px;
  text-transform: uppercase;
  font-size: 0.8em;
}
.nav--breadcrumb li a {
  color: #4b4b4c;
}
.nav--breadcrumb li a:hover {
  color: #003e6e;
}
.nav--breadcrumb li:first-child {
  margin-left: 0;
}
.nav--breadcrumb li:last-child {
  color: #00abe8;
}

/* Flyout erste Ebene */
.flyout .nav--first-level {
  position: relative;
  z-index: 101;
  background: #07ace7;
  /* special style for menuItem home */
}
.flyout .nav--first-level.sticky {
  position: fixed;
  top: 0;
  background: rgba(7, 172, 231, 0.85);
  transition: all 1s ease 1s;
  transform: translateX(0%);
}
.flyout .nav--first-level.sticky > ul > li:last-child {
  background-color: rgba(0, 62, 110, 0.85);
}
.flyout .nav--first-level .home {
  display: block;
  float: left;
  background-image: url(../Images/navigation-bg.png);
  background-position: right;
  background-repeat: no-repeat;
}
.flyout .nav--first-level .home a {
  font-size: 0px;
  padding-left: 17px;
  padding: 2px 16px 15px 18px;
  margin-left: -3px;
}
.flyout .nav--first-level .home a:before {
  font-size: 17px;
  width: 12px;
  line-height: 1.1em;
  padding-top: 15px;
  color: #ffffff;
}
.flyout .nav--first-level .home.act, .flyout .nav--first-level .home:hover {
  background-color: #ffffff;
}
.flyout .nav--first-level .home.act a:before, .flyout .nav--first-level .home:hover a:before {
  color: #00abe8;
}
.flyout .nav--first-level > ul {
  width: 930px;
  table-layout: fixed;
  float: right;
}
.flyout .nav--first-level > ul > li {
  text-align: left;
  padding: 0;
  background-image: url(../Images/navigation-bg.png);
  background-position: right;
  background-repeat: no-repeat;
  /* special style for menuItem Forschung and button inside holder*/
}
.flyout .nav--first-level > ul > li.act > a {
  background: #07ace7;
  padding-right: 1px;
  box-shadow: 0px 3px 6px -1px #676c7c;
  color: #00abe8;
  position: relative;
  background-color: #ffffff;
}
.flyout .nav--first-level > ul > li:nth-child(5n) {
  background-image: none;
}
.flyout .nav--first-level > ul > li:last-child {
  background-color: #003e6e;
  border-left: 1px solid white;
  background-image: none;
}
.flyout .nav--first-level > ul > li:last-child a:hover, .flyout .nav--first-level > ul > li:last-child.act a {
  color: #003e6e;
}
.flyout .nav--first-level > ul > li:last-child .holder .hideNextLevel ul {
  display: none;
}
.flyout .nav--first-level > ul > li:last-child .holder ul.grid a > .navItem--secondLevel {
  background-color: #003e6e;
  border: 1px solid #003e6e;
}
.flyout .nav--first-level > ul > li:last-child .holder ul.grid a > .navItem--secondLevel:hover {
  background-color: #ffffff;
  color: #003e6e;
}
.flyout .nav--first-level > ul > li:last-child .holder > ul > li.act span.navItem--secondLevel {
  background-color: #ffffff;
  color: #003e6e;
}
.flyout .nav--first-level > ul > li:last-child .navItem--secondLevel__image .navItem--secondLevel {
  background: #003e6e;
}
.flyout .nav--first-level > ul > li:last-child .navItem--secondLevel__image .navItem--secondLevel.act {
  background: rgba(255, 255, 255, 0.9);
  color: #003e6e;
}
.flyout .nav--first-level > ul > li:last-child .navItem--secondLevel__image:hover .navItem--secondLevel {
  background: rgba(255, 255, 255, 0.9);
  color: #003e6e;
}
.flyout .nav--first-level > ul > li:hover {
  box-shadow: 0px 3px 6px -1px #676c7c;
}
.flyout .nav--first-level > ul > li:hover > a {
  padding-bottom: -11px;
  position: relative;
  z-index: 4;
  color: #00abe8;
  text-decoration: none;
  background-color: #ffffff;
}
.flyout .nav--first-level > ul > li:hover > a.act {
  box-shadow: 0 0 0 0;
}
.flyout .nav--first-level > ul > li:hover .holder {
  transition: visibility 50ms ease;
  transition-delay: 200ms;
  visibility: visible;
}
.flyout .nav--first-level > ul > li > a {
  color: #ffffff;
  padding-top: 17px;
  padding-left: 13px;
  width: 100%;
  display: block;
  font-family: "Neo Sans Regular", Arial, sans-serif;
  font-size: 1.13333em;
  line-height: 1em;
  height: 50px;
  text-transform: uppercase;
  text-decoration: none;
}
.flyout .nav--first-level > ul > li > a.act {
  background: #07ace7;
  padding-right: 1px;
  box-shadow: 0px 3px 6px -1px #676c7c;
  color: #00abe8;
  position: relative;
  background-color: #ffffff;
}
.flyout .nav--first-level > ul > li .holder {
  transition: visibility 200ms ease;
  transition-delay: 0ms;
  visibility: hidden;
}

.navItem {
  padding: 5px 5px 5px 8px;
  font-size: 0.86667em;
}

/* Styling of column 1-5/6 image with title */
.navItem--secondLevel__image {
  position: relative;
  width: 140px;
  height: 118px;
}
.navItem--secondLevel__image .navItem--secondLevel {
  background: #07ace7;
  display: block;
  position: absolute;
  bottom: 0;
  color: #ffffff;
  font-family: "Neo Sans Medium", Arial, sans-serif;
  width: 100%;
  text-align: left;
}
.navItem--secondLevel__image .navItem--secondLevel.act {
  background: rgba(255, 255, 255, 0.9);
  color: #00abe8;
}
.navItem--secondLevel__image:hover .navItem--secondLevel {
  background: rgba(255, 255, 255, 0.9);
  color: #00abe8;
}

.holder > ul > li.act span.navItem--secondLevel {
  background: rgba(255, 255, 255, 0.9);
  color: #00abe8;
}

/* Styling navItem in third Level */
.navItem--thirdLevel {
  color: #4b4b4c;
}
.navItem--thirdLevel:hover, .navItem--thirdLevel.act {
  color: #00abe8;
}

/* Subnavigation auf Unterseiten */
.mainMenu2 {
  height: 30px;
}
.mainMenu2 > nav > ul > li .holder {
  transition: visibility 200ms ease;
  transition-delay: 0ms;
  visibility: hidden;
}
.mainMenu2 > nav > ul > li.hasSub:hover a {
  position: relative;
  z-index: 3;
  background-color: #ffffff;
  padding-bottom: 12px;
}
.mainMenu2 > nav > ul > li:hover .holder {
  transition: visibility 50ms ease;
  transition-delay: 200ms;
  visibility: visible;
}
.mainMenu2 > nav > ul > li .holder--flyout2 ul li {
  width: 50%;
}
.mainMenu2 > nav > ul > li .holder--flyout2 ul li a {
  font-size: 0.93333em;
  font-family: "Neo Sans Medium", Arial, sans-serif;
}

/* supafly layer and content */
.holder {
  z-index: 2;
  margin: 0;
  overflow: hidden;
  position: absolute;
  left: 0px;
  top: 49px;
  box-shadow: 0px 0px 6px -1px #676c7c;
  background-color: #ffffff;
  width: 65.33333em;
}
.holder ul.grid {
  padding: 0;
  /* fixed correct floating of right navItems in column 6 */
  /* right navItem in buttonstyle */
}
.holder ul.grid > li {
  margin-bottom: 13px;
}
.holder ul.grid li > ul {
  min-height: 100px;
}
.holder ul.grid a {
  display: block;
}
.holder ul.grid a > .navItem--secondLevel {
  text-align: left;
  font-family: "Neo Sans Medium", Arial, sans-serif;
  padding: 10px 15px 10px 10px;
  position: relative;
  line-height: 1.2em;
  height: 53px;
}
.holder ul.grid a > .navItem--secondLevel:after {
  font-size: 1.8em;
  position: absolute;
  right: 1px;
  top: 13px;
}
.holder ul.grid a:hover {
  text-decoration: none;
}

/* holder for flyout 2 in subsites */
.holder--flyout2 {
  top: 37px;
  box-shadow: 0 0 0 0;
  border: 2px solid #07ace7;
}

/* pressemenu */
.siteContent ul.pressMenu {
  margin-left: 0;
}

.logbook__item {
  margin-bottom: 30px;
}
.logbook__item .kicker {
  margin-right: 40px;
}

.organigramm .g {
  margin-left: -3px;
  margin-right: -3px;
}
.organigramm .gi {
  padding-left: 3px;
  padding-right: 3px;
}
.organigramm .organigramm__box {
  border: 1px solid #bcbdbf;
  text-align: center;
  margin-bottom: 5px;
  overflow: hidden;
  background-color: #ffffff;
  width: 100%;
}
.organigramm .organigramm__box.organigramm__box--101 {
  height: 90px;
}
.organigramm .organigramm__box.organigramm__box--102 {
  height: 60px;
}
.organigramm .organigramm__box.organigramm__box--103 {
  height: 43px;
}
.organigramm .organigramm__box p {
  margin: 3px 0 2px 0;
  font-size: 0.86667em;
}
.organigramm .organigramm__box td {
  font-size: 0.86667em;
  padding-top: 1px;
  text-align: left;
}
.organigramm .organigramm__box a {
  color: inherit;
}
.organigramm .organigramm__box a:after {
  display: none;
}
.organigramm .siteWrapper--fullWidth {
  padding: 0;
}
.organigramm .gi--headline > div {
  background-color: #bcbdbf;
  text-align: center;
}
.organigramm .gi--headline > div h3 {
  font-size: 1.06667em;
  padding: 11px;
  display: block;
  color: #00abe8;
  font-family: "Neo Sans Regular", Arial, sans-serif;
}

/* wird benoetigt, um in der ersten Zeile die Reihenfolge anders darzustellen */
@media screen and (min-width: 1023px) {
  .u-w-desk--middle {
    margin-left: 25%;
  }
}

@media screen and (min-width: 1023px) {
  .u-w-desk--first {
    margin-left: -75%;
  }
}

.hr--small {
  width: 50%;
  margin: 9px 25%;
}

ul.f3-widget-paginator li {
  display: inline-block;
  margin-right: 0px;
  padding: 2px 8px;
  color: #FFFFFF;
}
ul.f3-widget-paginator li.previous a, ul.f3-widget-paginator li.next a {
  padding: 0;
  color: rgba(75, 75, 76, 0.75);
  background-color: transparent;
  transition: all .4s ease;
}
ul.f3-widget-paginator li.previous a:hover, ul.f3-widget-paginator li.previous a:focus, ul.f3-widget-paginator li.previous a:active, ul.f3-widget-paginator li.next a:hover, ul.f3-widget-paginator li.next a:focus, ul.f3-widget-paginator li.next a:active {
  color: rgba(75, 75, 76, 0.89);
  background-color: transparent;
}
ul.f3-widget-paginator li.previous i, ul.f3-widget-paginator li.next i {
  position: relative;
  top: 1px;
  font-size: 1.5em;
  line-height: 14px;
}
ul.f3-widget-paginator li.previous i:after {
  transform: rotate(177deg);
  -webkit-transform: rotate(177deg);
}
ul.f3-widget-paginator li.current {
  background-color: rgba(7, 172, 231, 0.89);
  margin-right: 8px;
  margin-left: 8px;
}
ul.f3-widget-paginator li > a {
  color: #ffffff;
  text-decoration: none;
  padding: 2px 8px;
  transition: all .4s ease;
  background-color: rgba(75, 75, 76, 0.89);
}
ul.f3-widget-paginator li > a:hover {
  background-color: rgba(7, 172, 231, 0.89);
}

/**
 * CSS styles for Shadowbox.
 */
/* typography */
#sb-title-inner, #sb-info-inner, #sb-loading-inner, div.sb-message {
  color: #fff;
}

/* container, overlay, & wrapper */
#sb-container {
  position: fixed;
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
  z-index: 999;
  text-align: left;
  visibility: hidden;
  display: none;
}

#sb-overlay {
  position: relative;
  height: 100%;
  width: 100%;
}

#sb-wrapper {
  position: absolute;
  visibility: hidden;
  width: 100px;
  /* explicit width helps offset children calculate their width */
}

#sb-wrapper-inner {
  position: relative;
  border: 1px solid #303030;
  overflow: hidden;
  height: 100px;
  /* explicit height helps offset children calculate their height */
}

/* body */
#sb-body {
  position: relative;
  height: 100%;
}

#sb-body-inner {
  position: absolute;
  height: 100%;
  width: 100%;
}

#sb-player.html {
  height: 100%;
  overflow: auto;
  /* make html content scrollable */
}

#sb-body img {
  border: none;
}

/* loading */
#sb-loading {
  position: relative;
  height: 100%;
}

#sb-loading-inner {
  position: absolute;
  font-size: 14px;
  line-height: 24px;
  height: 24px;
  top: 50%;
  margin-top: -12px;
  width: 100%;
  text-align: center;
}

#sb-loading-inner span {
  background: url(../Images/loading.gif) no-repeat;
  padding-left: 34px;
  display: inline-block;
}

#sb-body, #sb-loading {
  background-color: #060606;
  /* should match loading image background color */
}

/* title & info */
#sb-title-wrapper {
  height: 109px;
}
@media screen and (max-width: 623px) {
  #sb-title-wrapper {
    height: 50px;
  }
}

#sb-title, #sb-info {
  position: relative;
  margin: 0;
  /* these must have no vertical margin or padding */
  padding: 0;
  overflow: hidden;
}

#sb-title-inner {
  font-size: 16px;
  padding-bottom: 4px;
}
@media screen and (max-width: 623px) {
  #sb-title-inner {
    font-size: 10px;
  }
}

#sb-info, #sb-info-inner {
  height: 24px;
  line-height: 15px;
}

#sb-info-inner {
  font-size: 13px;
}

/* nav */
#sb-nav a {
  display: block;
  float: right;
  margin-left: 3px;
  cursor: pointer;
  background-repeat: no-repeat;
}

#sb-nav-close {
  background-image: url(../Images/close.png);
  position: absolute;
  right: 0;
  bottom: 5px;
  width: 16px;
  height: 16px;
}

#sb-nav-next,
#sb-nav-previous {
  position: absolute;
  width: 20%;
  height: 100%;
  top: 0;
  opacity: 1;
  z-index: 30;
}

#sb-nav-next:hover,
#sb-nav-previous:hover {
  opacity: 1;
  transition: opacity 1s;
}

#sb-nav-next {
  right: 2em;
}

#sb-nav-previous {
  left: 2em;
}

#sb-nav-next:before,
#sb-nav-previous:before {
  color: #838384;
  font-size: 30px;
  top: 45%;
  position: relative;
}

#sb-nav-next:before {
  float: right;
}

#sb-nav-previous:before {
  float: left;
}

/* counter */
#sb-counter {
  float: left;
  width: 45%;
  position: absolute;
  bottom: 5px;
}

#sb-counter a {
  padding: 0 4px 0 0;
  text-decoration: none;
  cursor: pointer;
  color: #fff;
}

#sb-counter a.sb-counter-current {
  text-decoration: underline;
}

#sb-nav-download {
  background-size: cover;
  width: 14px;
  position: absolute;
  height: 44px;
  line-height: 44px;
  z-index: 10;
  top: -1px;
  right: 25px;
  opacity: 0.65;
}

#sb-nav-download:hover,
#sb-nav-download:focus {
  opacity: 1;
}

.mfp-image-holder .mfp-close {
  width: 28px;
}

/* messages */
div.sb-message {
  font-size: 12px;
  padding: 10px;
  text-align: center;
}

div.sb-message a:link, div.sb-message a:visited {
  color: #fff;
  text-decoration: underline;
}

.mfp-bg {
  background: #000000;
  opacity: 0.85;
}

.mfp-bottom-bar .mfp-title {
  font-family: "Neo Sans Regular", Arial, sans-serif;
}

/**
 * BxSlider v4.1.2 - Fully loaded, responsive content slider
 * http://bxslider.com
 *
 * Written by: Steven Wanderski, 2014
 * http://stevenwanderski.com
 * (while drinking Belgian ales and listening to jazz)
 *
 * CEO and founder of bxCreative, LTD
 * http://bxcreative.com
 */
/** RESET AND LAYOUT
===================================*/
.bx-wrapper {
  position: relative;
  margin: 0 !important;
  padding: 0;
  *zoom: 1;
  /* PAGER */
  /* DIRECTION CONTROLS (NEXT / PREV) */
}
.bx-wrapper img {
  max-width: 100%;
  display: block;
}
.bx-wrapper ul.bxslider {
  margin: 0;
  padding: 0;
}
.bx-wrapper ul.bxslider li a {
  display: block;
}
.bx-wrapper .bx-viewport {
  /*fix other elements on the page moving (on Chrome)*/
  -webkit-transform: translatez(0);
  -moz-transform: translatez(0);
  -ms-transform: translatez(0);
  -o-transform: translatez(0);
  transform: translatez(0);
}
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
  position: absolute;
}
.bx-wrapper .bx-pager {
  padding-top: 20px;
  bottom: 28%;
  left: 66.5%;
}
.bx-wrapper .bx-pager .bx-pager-item,
.bx-wrapper .bx-pager .bx-controls-auto .bx-controls-auto-item {
  display: inline-block;
  *zoom: 1;
  *display: inline;
}
.bx-wrapper .bx-pager.bx-default-pager a {
  background: rgba(255, 255, 255, 0.75);
  text-indent: -9999px;
  display: block;
  width: 25px;
  height: 25px;
  margin: 0 5px;
  outline: 0;
  border: 2px solid #ffffff;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active {
  background: #07ace7;
}
@media screen and (min-width: 624px) and (max-width: 1023px) {
  .bx-wrapper .bx-pager {
    display: none;
  }
}
@media screen and (max-width: 623px) {
  .bx-wrapper .bx-pager {
    display: none;
  }
}
.bx-wrapper .bxslider__teaser {
  position: absolute;
  top: 11%;
  right: 0;
  background: rgba(255, 255, 255, 0.75);
  width: 33%;
  color: #4b4b4c;
  display: block;
  padding: 1.33333em;
  height: 53%;
  line-height: 1.2em;
}
@media screen and (min-width: 624px) and (max-width: 1023px) {
  .bx-wrapper .bxslider__teaser {
    padding: 10px 10px 0 10px;
    top: auto;
    bottom: 0;
    width: 100%;
    height: 96px;
  }
}
@media screen and (max-width: 623px) {
  .bx-wrapper .bxslider__teaser {
    padding: 10px 10px 0 10px;
    top: auto;
    bottom: 0;
    width: 100%;
    height: 40px;
  }
}
.bx-wrapper .bxslider__teaser h2 {
  margin-bottom: 50px;
}
@media screen and (min-width: 624px) and (max-width: 1023px) {
  .bx-wrapper .bxslider__teaser h2 {
    margin-bottom: 10px;
  }
}
@media screen and (max-width: 623px) {
  .bx-wrapper .bxslider__teaser h2 {
    margin-bottom: 10px;
  }
}
@media screen and (max-width: 623px) {
  .bx-wrapper .bxslider__teaser p {
    display: none;
  }
}
.bx-wrapper .bx-controls-direction a {
  position: absolute;
  top: 78%;
  outline: 0;
  border-radius: 100px;
  width: 80px;
  height: 80px;
  z-index: 10;
  font-size: 0;
  background: rgba(255, 255, 255, 0.9);
}
@media screen and (min-width: 624px) and (max-width: 1023px) {
  .bx-wrapper .bx-controls-direction a {
    top: 33%;
  }
}
@media screen and (max-width: 623px) {
  .bx-wrapper .bx-controls-direction a {
    top: 26%;
    width: 50px;
    height: 50px;
  }
}
.bx-wrapper .bx-controls-direction a.disabled {
  display: none;
}
.bx-wrapper .bx-controls-direction a:hover {
  transition: background 0.7s ease 0s;
  background: white;
}
.bx-wrapper .bx-controls-direction a.bx-prev:before, .bx-wrapper .bx-controls-direction a.bx-next:before {
  color: #D1D1D2;
  font-size: 25px;
  position: relative;
  top: 27px;
}
@media screen and (max-width: 623px) {
  .bx-wrapper .bx-controls-direction a.bx-prev:before, .bx-wrapper .bx-controls-direction a.bx-next:before {
    top: 13px;
    width: 50px;
    height: 50px;
  }
}
.bx-wrapper .bx-controls-direction a.bx-prev:hover:before, .bx-wrapper .bx-controls-direction a.bx-next:hover:before {
  transition: color 0.7s ease 0s;
  color: #00abe8;
}
.bx-wrapper .bx-controls-direction a.bx-prev {
  left: -38px;
}
@media screen and (max-width: 623px) {
  .bx-wrapper .bx-controls-direction a.bx-prev {
    left: -25px;
  }
}
.bx-wrapper .bx-controls-direction a.bx-prev:before {
  right: -19px;
}
@media screen and (max-width: 623px) {
  .bx-wrapper .bx-controls-direction a.bx-prev:before {
    right: 6px;
  }
}
.bx-wrapper .bx-controls-direction a.bx-next {
  right: -38px;
}
@media screen and (max-width: 623px) {
  .bx-wrapper .bx-controls-direction a.bx-next {
    right: -24px;
  }
}
.bx-wrapper .bx-controls-direction a.bx-next:before {
  right: -24px;
}
@media screen and (max-width: 623px) {
  .bx-wrapper .bx-controls-direction a.bx-next:before {
    right: 3px;
  }
}
.bx-wrapper .bx-controls-auto {
  text-align: center;
}
.bx-wrapper .bx-controls-auto .bx-start {
  display: block;
  text-indent: -9999px;
  width: 10px;
  height: 11px;
  outline: 0;
  background: url(images/controls.png) -86px -11px no-repeat;
  margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-start:hover, .bx-wrapper .bx-controls-auto .bx-start.active {
  background-position: -86px 0;
}
.bx-wrapper .bx-controls-auto .bx-stop {
  display: block;
  text-indent: -9999px;
  width: 9px;
  height: 11px;
  outline: 0;
  background: url(images/controls.png) -86px -44px no-repeat;
  margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-stop:hover, .bx-wrapper .bx-controls-auto .bx-stop.active {
  background-position: -86px -33px;
}
.bx-wrapper ul.bxslider-thumbs {
  overflow: auto;
  margin-top: 11px;
}
.bx-wrapper ul.bxslider-thumbs li {
  padding-bottom: 30px;
}
.bx-wrapper ul.bxslider-thumbs a {
  display: inline-block;
  opacity: 0.5;
}
.bx-wrapper ul.bxslider-thumbs a img {
  padding-bottom: 2px;
}
.bx-wrapper ul.bxslider-thumbs a .iconWrapperCenter {
  top: 33px;
}
.bx-wrapper ul.bxslider-thumbs a .iconWrapperCenter .youtubeIcon {
  padding: 17px 12px;
  width: 60px;
  height: 60px;
}
.bx-wrapper ul.bxslider-thumbs a .iconWrapperCenter .youtubeIcon .fa-videopfeil {
  font-size: 1.4em;
  margin-left: 5px;
  color: #07ace7;
}
.bx-wrapper ul.bxslider-thumbs a.active img {
  border-bottom: 6px solid #07ace7;
}
.bx-wrapper ul.bxslider-thumbs a:hover, .bx-wrapper ul.bxslider-thumbs a.active {
  opacity: 1;
}

/* LOADER */
.bx-wrapper .bx-loading {
  display: none;
  min-height: 50px;
  /*background: url(images/bx_loader.gif) center center no-repeat #fff;*/
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2000;
}

/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
  text-align: left;
  width: 80%;
}

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
  right: 0;
  width: 35px;
}

.bx-caption {
  display: none;
}

/* Slideshow */
.slideshow .bx-controls-direction a {
  top: 25%;
}
.slideshow .bxslider__teaser {
  top: inherit;
  bottom: 5%;
  left: 3%;
  right: inherit;
  width: 94%;
  height: inherit;
  padding: 0.66667em;
}
.slideshow .bxslider__teaser p {
  margin-bottom: 0;
}
@media screen and (max-width: 623px) {
  .slideshow .bxslider__teaser p {
    display: block;
  }
}

/* ContentSlider */
.contentSlider {
  /* DIRECTION CONTROLS (NEXT / PREV) */
  margin-bottom: 30px;
}
.contentSlider .bx-controls-direction a {
  top: 25%;
}
.contentSlider .bx-wrapper .bx-pager {
  padding: 0;
  right: -4px;
  left: inherit;
  height: 27px;
  bottom: -7%;
}
@media screen and (min-width: 624px) and (max-width: 1023px) {
  .contentSlider .bx-wrapper .bx-pager {
    display: block;
  }
}
@media screen and (max-width: 623px) {
  .contentSlider .bx-wrapper .bx-pager {
    display: block;
  }
}
.contentSlider .bx-wrapper .bx-pager .bx-pager-link {
  background: #4b4b4c;
  border: 0;
  width: 21px;
  height: 21px;
}
@media screen and (min-width: 624px) and (max-width: 1023px) {
  .contentSlider .bx-wrapper .bx-pager .bx-pager-link {
    width: 19px;
    height: 19px;
  }
}
@media screen and (max-width: 623px) {
  .contentSlider .bx-wrapper .bx-pager .bx-pager-link {
    width: 14px;
    height: 14px;
    margin: 0 2px;
  }
}
.contentSlider ul.bxslider-thumbs a {
  opacity: 1;
}
.contentSlider li:hover img {
  opacity: 0.3;
}
.contentSlider li:hover .fa-plus_gross {
  opacity: 1;
}
.contentSlider li:hover span {
  color: #07ace7;
}
.contentSlider .fa-plus_gross {
  display: block;
  opacity: 0;
  top: 28%;
  position: absolute;
  left: 39%;
  color: #07ace7;
}

.contentSlider__title {
  position: absolute;
  left: 6%;
  bottom: 34px;
  padding: 5px;
  background: white;
  width: 70%;
}

/* PresseSlider auf Pressedetailseite */
.presseSlider .bx-wrapper {
  margin: 0 !important;
}
.presseSlider .bx-wrapper ul.bxslider-thumbs a {
  opacity: 1;
}
.presseSlider .bx-wrapper ul.bxslider-thumbs a:hover {
  opacity: 0.5;
}
.presseSlider .bx-controls-direction a {
  top: 21%;
  width: 70px;
  height: 70px;
}
.presseSlider .bx-controls-direction a.bx-prev:before, .presseSlider .bx-controls-direction a.bx-next:before {
  top: 24px;
}
.presseSlider .bx-controls-direction a.bx-prev {
  left: -33px;
}
.presseSlider .bx-controls-direction a.bx-prev:before {
  right: -14px;
}
@media screen and (max-width: 623px) {
  .presseSlider .bx-controls-direction a.bx-prev:before {
    right: -3px;
  }
}
.presseSlider .bx-controls-direction a.bx-next {
  right: -33px;
}
.presseSlider .bx-controls-direction a.bx-next:before {
  right: -18px;
}
@media screen and (max-width: 623px) {
  .presseSlider .bx-controls-direction a.bx-next:before {
    right: -6px;
  }
}

/* Logbuch */
.logbook .bx-wrapper .bx-controls-direction a {
  bottom: 4px;
  top: auto;
  background: #d1d1d2;
  width: 40px;
  height: 40px;
}
.logbook .bx-wrapper .bx-controls-direction a:hover {
  background: #07ace7;
}
.logbook .bx-wrapper .bx-controls-direction a:hover:before {
  color: #ffffff;
}
.logbook .bx-wrapper .bx-controls-direction a:before {
  font-size: 15px;
  color: #ffffff;
  top: 12px;
}
.logbook .bx-wrapper .bx-controls-direction a.bx-next {
  right: 4px;
}
.logbook .bx-wrapper .bx-controls-direction a.bx-next:before {
  right: -12px;
}
@media screen and (max-width: 623px) {
  .logbook .bx-wrapper .bx-controls-direction a.bx-next:before {
    right: 6px;
  }
}
.logbook .bx-wrapper .bx-controls-direction a.bx-prev {
  left: 4px;
}
.logbook .bx-wrapper .bx-controls-direction a.bx-prev:before {
  right: -8px;
}
@media screen and (max-width: 623px) {
  .logbook .bx-wrapper .bx-controls-direction a.bx-prev:before {
    right: 8px;
  }
}
.logbook .logbook__item:last-child {
  padding-bottom: 40px;
}

/* CSS Optimizing for faster deliver first view of page */
ul.bxslider li {
  float: left;
  list-style: none;
  position: relative;
}

.tx-sms-stage ul.bxslider li {
  width: 980px;
}

.contentSlider ul.bxslider li {
  width: 313px;
}

/* Social Media Navigation Facebook/Youtube/Twitter/RSS */
.socialMenu {
  width: 377px;
}
@media screen and (max-width: 623px) {
  .socialMenu {
    width: 313px;
  }
}
.socialMenu li {
  text-align: right;
}
.socialMenu i:before {
  margin-right: 0;
}
.socialMenu i:hover {
  color: #003e6e;
}

@media screen and (min-width: 624px) and (max-width: 1023px) {
  .tx-solr-searchbox {
    width: 80%;
  }
}
@media screen and (max-width: 623px) {
  .tx-solr-searchbox {
    width: 66.6%;
  }
}

.tx-solrSearchForm__input {
  width: 81%;
  margin-right: 1% !important;
  border-width: 2px;
}
@media screen and (max-width: 623px) {
  .tx-solrSearchForm__input {
    width: 75%;
  }
}

.tx-solrSearchForm__submit {
  width: 17%;
  padding: 7px;
  margin-bottom: 0;
}
@media screen and (max-width: 623px) {
  .tx-solrSearchForm__submit {
    width: 22%;
  }
}

.tx-solrResultList > .tx-solrResultList__item {
  border-bottom: 1px solid #bcbdbf;
  margin-bottom: 21px;
}
.tx-solrResultList > .tx-solrResultList__item:first-of-type {
  border-top: 1px solid #bcbdbf;
  padding-top: 21px;
}

.tx-solr-search-word,
.results-highlight {
  font-family: "Neo Sans Medium", Arial, sans-serif;
}

/* ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- */
/* relevance */
.tx-solrResultList__relevance {
  font-size: 85%;
  margin-bottom: .3em;
  margin-top: .1em;
  height: 20px;
}

.tx-solrResultList__label,
.tx-solrResultList__bar,
.tx-solrResultList__percent {
  float: left;
  margin-right: 11px;
  padding-top: 1px;
  text-transform: uppercase;
}

.tx-solrResultList__bar {
  height: 20px;
  padding-top: 3px;
}

.tx-solr-relevance-bar {
  width: 100px;
  height: 12px;
}

.tx-solr-relevance,
.tx-solr-relevance-fill {
  margin-right: 0px !important;
  height: 12px;
  padding: 0px;
  float: left;
}

.tx-solr-relevance {
  background-color: #07ace7;
}

.tx-solr-relevance-fill {
  background-color: rgba(0, 0, 0, 0.1);
}

/*
	Tx Solr Autocomplete
*/
.autosuggest-results {
  width: 300px;
  background: #ffffff;
  z-index: 1000;
  border: 2px solid #bcbdbf;
  border-top: 0;
  position: absolute;
  right: 0;
  margin-top: -15px;
  margin-bottom: 2px;
  text-align: left;
}
@media screen and (min-width: 624px) and (max-width: 1023px) {
  .autosuggest-results {
    right: auto;
  }
}
@media screen and (max-width: 623px) {
  .autosuggest-results {
    width: 234px;
    right: auto;
  }
}
.autosuggest-results > a {
  border-bottom: 1px solid #F1F1F1;
  display: block;
  cursor: pointer;
  padding: 8px 10px 8px 6px;
  font-size: 13px;
}
.autosuggest-results > a:first-child {
  border-top: 1px solid #F1F1F1;
}
.autosuggest-results > a:hover {
  background: #00abe8;
  color: #fff;
}
.autosuggest-results > a:last-child {
  border-bottom: 0;
}

.autosuggest-results__left {
  right: auto;
  z-index: 2;
  margin-top: -16px;
}

#top-bar .autosuggest-results {
  border-color: #000;
  width: 100%;
}

/*
 CSS setup for jQuery Responsive Tabs
*/
.responsive-tabs {
  background: #ffffff;
  border-top: none;
}
.responsive-tabs ul.r-tabs-nav {
  height: 46px;
  margin: 0;
}
.responsive-tabs ul.r-tabs-nav li {
  list-style: none;
  width: 25%;
}
.responsive-tabs ul.r-tabs-nav li.r-tabs-state-default {
  background: #00abe8;
  border-bottom: 2px solid #00abe8;
}
.responsive-tabs ul.r-tabs-nav li.r-tabs-state-default a {
  border: 2px solid #ffffff;
  border-top: none;
  color: #ffffff;
}
.responsive-tabs ul.r-tabs-nav li.r-tabs-state-active {
  background: transparent;
  border: 2px solid #00abe8;
  border-bottom: none;
}
.responsive-tabs ul.r-tabs-nav li.first.r-tabs-state-default a {
  border-left: none;
}
.responsive-tabs ul.r-tabs-nav li.last.r-tabs-state-default a {
  border-right: none;
}
.responsive-tabs ul.r-tabs-nav li a {
  display: block;
  height: 46px;
  padding: 12px 0 0 0;
  text-align: center;
}
.responsive-tabs .tab-container {
  border: 2px solid #00abe8;
  border-top: none;
}
.responsive-tabs .tab-container .r-tabs-accordion-title {
  display: none;
}
.responsive-tabs .tab-container .r-tabs-panel {
  display: none;
  padding-top: 20px;
}
.responsive-tabs .tab-container img.max-width-110 {
  max-width: 110px;
}

.tx-sms-location-map .info-windows {
  display: none;
}
.tx-sms-location-map .google-map {
  width: 100%;
  height: 500px;
}
.tx-sms-location-map .google-map img {
  max-width: 1600px;
}
.tx-sms-location-map #category-filter {
  margin-bottom: 20px;
}
.tx-sms-location-map .infowindow {
  overflow: hidden;
  font-family: "Neo Sans Regular", Arial, sans-serif;
  max-width: 540px;
}
.tx-sms-location-map .infowindow h2, .tx-sms-location-map .infowindow .h2 {
  margin-bottom: 0;
  font-size: 20px;
}
.tx-sms-location-map .infowindow img {
  width: 100%;
}
.tx-sms-location-map .infowindow .links {
  width: 100%;
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.teaser {
  position: relative;
}
.teaser .teaser__image {
  position: relative;
  margin-bottom: 1em;
}
.teaser .teaser__image .kicker--white {
  position: absolute;
  bottom: 17px;
  left: 15px;
}
.teaser .teaser__textWrapper {
  margin-left: 15px;
  margin-right: 15px;
}
.teaser .teaser__textWrapper h3 {
  margin-bottom: 2em;
}
.teaser .teaser__textWrapper .teaser__wrapper__text {
  position: relative;
  padding-bottom: 2px;
}
.teaser .teaser__textWrapper .teaser__wrapper__text p {
  width: 62%;
  line-height: 1.2em;
}
.teaser:hover h3 {
  text-decoration: underline;
}
.teaser:hover p {
  color: #4b4b4c;
}
.teaser:hover i.fa-plus_gross:after {
  transition: color 0.5s ease 0s;
  color: #07ace7;
}
.teaser i.fa-plus_gross:after {
  color: #d1d1d2;
  bottom: 15px;
  position: absolute;
  right: 0px;
}

/* wird benötigt für die Positionierung des Video-Playbuttons / Plusbuttons */
.teaser__image {
  position: relative;
  z-index: 1;
}
.teaser__image img {
  height: auto;
}

/* Teaser nur Image und Kicker */
.teaserWithKicker .kicker--white-position {
  position: relative;
  bottom: 3em;
  left: 2em;
}
.teaserWithKicker .fa-plus_gross {
  visibility: hidden;
}
.teaserWithKicker:hover .fa-plus_gross {
  visibility: visible;
  transition: visible 50ms ease;
  transition-delay: 150ms;
}

/*
Organisms

Organisms are groups of molecules (and possibly atoms) joined together to form distinct section of an interface.
*/
/*
Site Header
*/
.siteHeader {
  background-color: #F2F2F4;
  /* used for clickable svg logo */
  /* Styling Logo / Text */
}
.siteHeader object {
  pointer-events: none;
}
.siteHeader .logoDesktop {
  padding: 30px 11px 0 21px;
}
.siteHeader .logoText {
  padding-top: 41px;
}

/* also used for footer logo */
.logoText {
  color: #4b4b4c;
}

/* styling languages label Desktop */
.languageLabel {
  padding-top: 2px;
}
.languageLabel a {
  color: #4b4b4c;
  margin-right: 0;
  padding-right: 0;
}
.languageLabel a:hover {
  color: #00abe8;
}
.languageLabel a:before {
  font-size: 1.33333em;
}
.languageLabel span.inactive {
  opacity: 0.3;
}
.languageLabel span.inactive:before {
  font-size: 1.33333em;
}

/* styling languages label mobile */
.languageLabel--mobile {
  position: absolute;
  right: 4px;
  width: 27px;
  top: 0;
}
.languageLabel--mobile span.inactive,
.languageLabel--mobile a {
  color: #ffffff;
  margin: 0;
  padding: 0;
  position: relative;
  top: 9px;
  font-size: 13px;
  right: 0px;
}
.languageLabel--mobile span.inactive:before,
.languageLabel--mobile a:before {
  position: relative;
  font-size: 20px;
  right: 7px;
  top: 3px;
}

/*
Site Footer
*/
.siteFooter {
  padding-top: 100px;
  background-color: #F2F2F4;
  /* used for clickable svg logos */
  /* default fontsize for all footer-a-tags in ul */
  /* space to left in mainNavi li for positioning the raquo-icon before */
  /* more space between mainNavi and contact-links */
  /* main navi footer: generating correct linebreak for viewport 2+3*/
}
.siteFooter object {
  pointer-events: none;
}
.siteFooter ul a {
  font-size: 0.86667em;
}
.siteFooter .nav--stacked li {
  padding-left: 22px;
}
.siteFooter .footerSpace {
  padding-bottom: 4.33333em;
}
@media screen and (min-width: 624px) and (max-width: 1023px) {
  .siteFooter .footerNav > li:nth-child(5) {
    clear: left;
  }
}
@media screen and (max-width: 623px) {
  .siteFooter .footerNav > li:nth-child(3),
  .siteFooter .footerNav > li:nth-child(5) {
    clear: left;
  }
}

/*
Templates
*/
@media print {
  * {
    background: transparent !important;
    /**
     * Black prints faster: h5bp.com/s
     */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  body,
  p {
    font-size: 12px;
  }

  .siteWrapper--fullWidth,
  .siteWrapper {
    width: 620px;
    padding: 10px;
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  thead {
    /**
     * h5bp.com/t
     */
    display: table-header-group;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  h1.h1--xxl,
  h1 {
    font-size: 22px;
    margin-bottom: 20px;
  }

  h2 {
    font-size: 18px;
  }

  h3,
  .h3--teaser {
    font-size: 14px;
  }

  .kicker {
    padding-left: 0;
  }

  p, h2, h3 {
    orphans: 3;
    widows: 3;
  }

  h2, h3 {
    page-break-after: avoid;
  }

  abbr[title]:after {
    content: " (" attr(title) ")";
  }

  .print-hidden,
  *:after,
  iframe,
  .slideshow,
  .contentSlider,
  .textHover {
    display: none !important;
  }
}
@media print and (max-width: 1023px) {
  .page .siteHeader {
    padding-top: 10px;
  }
}
@media print {
  .page .siteHeader {
    margin-top: 10px;
  }

  .siteFooter {
    clear: both;
  }

  /* Contentanpassungen */
  .u-w-desk-3\/10 .u-brandBorder-primary {
    border: 0;
  }

  .teaser .teaser__textWrapper {
    margin-left: 0;
  }

  .teaser .teaser__textWrapper h3 {
    margin-bottom: 10px;
  }

  .siteWrapper--fullWidth .teaser {
    min-height: 280px;
  }

  .siteHeader .logoDesktop {
    padding-top: 0;
    margin-bottom: 20px;
    padding-left: 0;
    margin-left: -13px;
  }

  .siteHeader .logoText {
    padding-top: 10px;
  }

  .downloadBox__item,
  .downloadBox__item img {
    height: auto;
  }

  .downloadBox {
    overflow: hidden;
  }

  /* Rasterelemente auf 100% */
  [class~="u-w-desk-1/2"],
  [class~="u-w-desk-1/1"] {
    width: 100%;
  }

  [class~="u-w-desk-1/3"] {
    width: 33%;
  }

  [class~="u-w-desk-3/10"] {
    width: 30%;
  }

  [class~="u-w-desk-7/10"] {
    width: 70%;
  }

  .organigramm .u-w-desk--middle {
    margin-left: 25%;
  }
  .organigramm .u-w-desk--first {
    margin-left: -75%;
  }
  .organigramm [class~="u-w-desk-1/2"] {
    width: 50%;
  }
  .organigramm [class~="u-w-desk-1/4"] {
    width: 25%;
  }
  .organigramm [class~="u-w-desk-1/5"] {
    width: 20%;
  }
  .organigramm [class~="u-w-desk-3/4"] {
    width: 100%;
  }
  .organigramm .siteWrapper--fullWidth {
    width: 100%;
  }
  .organigramm .contenttable td {
    border: 0;
  }
  .organigramm .secondRow .organigramm__box p {
    font-size: 8px !important;
  }
  .organigramm .secondRow .organigramm__box--103 {
    height: 35px;
  }

  /* Accordion mehr Informationen */
  .panel-collapse.collapse.in,
  .panel-collapse {
    display: block !important;
  }

  .treatment > .panel-collapse,
  .treatment > h3 {
    padding-left: 0;
  }

  /* Teaser / mit aufklappbarem Text */
  #TSFE_ADMIN_PANEL_FORM {
    display: none;
  }
}
/* IE 11 hack for positioning main navigation */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .flyout .nav--first-level > ul {
    width: 920px;
  }
}

/*# sourceMappingURL=Main.css.map */