@charset "UTF-8";
/*------------------------------------*	$CONTENTS
\*------------------------------------*/
/**
 * RESET...............................Set reset defaults
 * GENERIC ELEMENTS....................Variables, Mixins, Placeholder, etc.
 * GLOBAL ELEMENTS.....................Establish global styles
 * GLOBAL CLASSES......................Set reset defaults
 * LAYOUT..............................Grid & Column Designs
 * STRUCTURE...........................Page-Structure
 * COMPONENTS/MODULES..................Build the Elements / Modules
 * DEBUG...............................Debug Information
**/
/*------------------------------------*    $GENERIC ELEMENTS
\*------------------------------------*/
/*------------------------------------*    $RESET
\*------------------------------------*/
/* Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/ */

/* michroma-regular - latin */
@font-face {
    font-family: 'Michroma';
    font-style: normal;
    font-weight: 400;
    src: url('/font/michroma-v16-latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
    url('/font/michroma-v16-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/font/michroma-v16-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('/font/michroma-v16-latin-regular.woff') format('woff'), /* Modern Browsers */
    url('/font/michroma-v16-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('/font/michroma-v16-latin-regular.svg#Michroma') format('svg'); /* Legacy iOS */
}

html {
    box-sizing: border-box;
}

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

html, body, div, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, ol, ul, li, fieldset, form, legend, label, table, header, footer, nav, section, figure, picture {
    margin: 0;
    padding: 0;
}

header, footer, main, nav, section, article, hgroup, figure, picture {
    display: block;
}

fieldset, img, table {
    border: 0;
}

picture {
    line-height: 0;
}

/*------------------------------------*	$CONTENTS
\*------------------------------------*/
/**
 * ADD-ONS.............................3rd Party Core expansions
 * .....Semantic Grid Sytem Semantic.gs
 * .....Sassaparilla - Typeset/Baselinegrid
 * VARIABLES...........................Declarations of Sass variables (Colors, Typo, Layout, Breakpoints, etc.)
 * FUNCTIONS...........................Sass functions
 * MIXINS..............................Sass mixins
 * PLACEHOLDER:........................Sass placeholder
**/
/*------------------------------------*    $ADD-ONS
\*------------------------------------*/
/*------------------------------------*    $TYPESET
\*------------------------------------*/
/**
 * Compass Vertical Rhythms (Without Compass)
 *
 * This is a git repo for using Compass Vertical Rhythms (with Rem) without the Compass dependency.
 * It's an unofficial port that will only be updated from time to time.
 *
 * DOCUMENTATION:
 * Check out Compass Beta for docs on how to use this vertical rhythms.
 * http://beta.compass-style.org/reference/compass/typography/vertical_rhythm/
 *
 * Credits:
 * @Chriseppstein & Compass team for creating the awesome vertical rhythms module
 *
 * LICENSE:
 * MIT
**/
/*------------------------------------*    $VARS
\*------------------------------------*/
/*------------------------------------*    $VALIDATE_UNITS
\*------------------------------------*/
/*------------------------------------*    $FUNCTIONS
\*------------------------------------*/
/**
 * Convert any CSS <length> or <percentage> value to any another.
 *
 * @param $length
 * A css <length> or <percentage> value
 *
 * @param $to-unit
 * String matching a css unit keyword, e.g. 'em', '%', etc.
 *
 * @param $from-context
 * When converting from relative units, the absolute length (in px) to
 * which $length refers (e.g. for $lengths in em units, would normally be the
 * font-size of the current element).
 *
 * @param $to-context
 * For converting to relative units, the absolute length in px to which the
 * output value will refer. Defaults to the same as $from-context, since it is
 * rarely needed.
**/
/**
 * Calculate rhythm units.
**/
/**
 * Calculate the minimum multiple of rhythm units needed to contain the font-size.
**/
/*------------------------------------*    $MIXINS
\*------------------------------------*/
/**
 * Output a given style rule containing rem values along with an (optional)
 * fallback rule for older browsers (with rem values converted to px).
 *
 * @param $property
 * The css property name.
 *
 * @param $values
 * The value or list of values for the property.
 *
 * @param $use-px-fallback
 * [ true | false ]
**/
/**
 * @private Outputs rhythm values. For rem units, outputs pixel fallbacks
 * by default.
**/
/**
 * Adjust a block to have a different font size and line height to maintain the
 * rhythm. $lines specifies how many multiples of the baseline rhythm each line
 * of this font should use up. It does not have to be an integer, but it
 * defaults to the smallest integer that is large enough to fit the font.
 * Use $from-size to adjust from a font-size other than the base font-size.
**/
/**
 * Adjust a block to have different line height to maintain the rhythm.
 * $lines specifies how many multiples of the baseline rhythm each line of this
 * font should use up. It does not have to be an integer, but it defaults to the
 * smallest integer that is large enough to fit the font.
**/
/**
 * Apply leading whitespace. The $property can be margin or padding.
**/
/**
 * Apply leading whitespace as padding.
**/
/**
 * Apply leading whitespace as margin.
**/
/**
 * Apply trailing whitespace. The $property can be margin or padding.
**/
/**
 * Apply trailing whitespace as padding.
**/
/**
 * Apply trailing whitespace as margin.
**/
/**
 * Shorthand mixin to apply whitespace for top and bottom margins and padding.
*/
/**
 * Shorthand mixin to apply whitespace for top and bottom margins.
**/
/**
 * Shorthand mixin to apply whitespace for top and bottom padding.
**/
/*------------------------------------*    $TYPESIZES/SCALE
\*------------------------------------*/
/**
 * Greek alphabet naming system. Obscure, yet hierarchical.
 * Allows us to avoid naming based on html object.
 * Eg. A h1 can be smaller visually, than a h4.
**/
/*------------------------------------*    $TYPESET_SIZE_MODULES
\*------------------------------------*/
h1 {
    font-size: 1.75rem;
    line-height: 2.25rem;
}

caption, h2 {
    font-size: 1.5rem;
    line-height: 2.25rem;
}

h3 {
    font-size: 1.25rem;
    line-height: 1.5rem;
}

h4, .form-set .fs-head, .form-subset .fss-head {
    font-size: 1rem;
    line-height: 1.5rem;
}

h5 {
    font-size: 0.875rem;
    line-height: 1.5rem;
}

h6 {
    font-size: 0.75rem;
    line-height: 1.5rem;
}

.byline {
    font-size: 0.875rem;
    line-height: 1.5rem;
    line-height: normal;
}

.bullet-list, .decimal-list {
    font-size: 1rem;
    line-height: 1.5rem;
}

p {
    font-size: 1rem;
    line-height: 1.5rem;
}

.label-text .byline {
    font-size: 0.75rem;
    line-height: 1.5rem;
}

/*------------------------------------*    $TYPESET_RHYTHM_MATCHING
\*------------------------------------*/
h1 {
    margin-bottom: 1.875rem;
}

h2 {
    margin-bottom: 1.5rem;
}

h3 {
    margin-bottom: 1.125rem;
}

h4 {
    margin-bottom: 0.75rem;
}

h5 {
    margin-bottom: 0.375rem;
}

h6 {
    margin-bottom: 0rem;
}

p {
    margin-bottom: 1.5rem;
}

.bullet-list, .decimal-list {
    margin-bottom: 1.5rem;
}

/*------------------------------------*    $GENERIC ELEMENTS
\*------------------------------------*/
/*------------------------------------*    $VARIABLES
\*------------------------------------*/
/**
 * COLORS..............................Diverse Farbwerte
 * THEME...............................Direkte Farbzuweisung an Elemente
 * ......bg = background
 * ......fg = foreground
 * TYPO................................Typo/Webfonts/etc.
 * BREAKPOINTS.........................Breakpoints Definitionen
 * LAYOUT..............................Layout-Spezifische Angaben
 * SPACING.............................Abstände definieren
 * TRANSITIONS.........................Eigenschaften für Transitions
**/
/*------------------------------------*    $COLORS
\*------------------------------------*/
/*------------------------------------*    $THEME
\*------------------------------------*/
/*------------------------------------*    $TYPO
\*------------------------------------*/
/*------------------------------------*    $BREAKPOINTS
\*------------------------------------*/
/*------------------------------------*    $LAYOUT
\*------------------------------------*/
/*------------------------------------*    $SPACING
\*------------------------------------*/
/*------------------------------------*	$TRANSITIONS
\*------------------------------------*/
/*------------------------------------*
\*------------------------------------*/
/*------------------------------------*	$FUNCTIONS
\*------------------------------------*/
/**
 *
**/
/*------------------------------------*
\*------------------------------------*/
/**/
/*------------------------------------*
\*------------------------------------*/
/*------------------------------------*	$MIXINS
\*------------------------------------*/
/**
 * CLEARFIX............................clearfix
 * PSEUDO-ELEMENTS.....................Pseudo-Elements :after/:before
 * .....pdeuso-element-default (provides default setup for most :after/:before pseudo elements)
 * .....pdeuso-element-stretch (fits pseudo-element to parent size)
 * ELEMENT-STRETCH.....................Stretch element to parent size
 * BREAKPOINTS.........................Different Breakpoints
 * .....bp-xs
 * .....bp-s
 * .....bp-m
 * .....bp-l
 * .....bp-xl
 * .....bp-xxl
 * RWD.................................Hide/Show something on Mobile/Tablet/Desktop
 * .....hide-on-desktop
 * .....hide-on-tablet
 * .....hide-on-mobile
 * .....show-on-mobile
 * ALIGNING............................Alignment of elements
 * .....vertical-align (Align things vertically (http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/))
 * .....centered (Absolute center position)
 * BORDER-RADIUS.......................For compatibility with Android devices
 * RETINA-IMAGES.......................Image-2x
 * VISIBILTY...........................Element is visible or hidden
 * ABSOLUTE-POSITION...................Elements absolute position
 * MOVE/CHANGE-3D-POSITION.............Transform Elements position
 * LAYOUT..............................Layouting Elements
 * .....constrained....................Wrapper to constrain Elements
 * ELEMENT-DEFAULTS....................Default Element properties
 * .....element-default-spacing........Set Default Spacing Value to Elements
 * .....element-default................Default Element Properties
 * .....element-inner-default..........Nested Default Element inside Default Element
 * .....element-nested-default.........Nested Default Element inside Default Element (varied padding)
 * .....element-indent.................padding values for nested Elements, basically grid correction
 * .....indent.........................Left indention. Possible values: left, margin, padding (default)
 * FLEXBOX.............................Flex-Box default properties
**/
/*------------------------------------*	$CLEARFIX
\*------------------------------------*/
/*------------------------------------*	$PSEUDO-ELEMENTS
\*------------------------------------*/
/*------------------------------------*	$ELEMENT-STRETCH
\*------------------------------------*/
/*------------------------------------*	$BREAKPOINTS
\*------------------------------------*/
/*------------------------------------*	$RWD
\*------------------------------------*/
/*------------------------------------*	$ALIGNING
\*------------------------------------*/
/*------------------------------------*	$RETINA-IMAGES
\*------------------------------------*/
/**
 * Send path, image name, and width and height.
 * Name retina images [name]2x.
 * On retina, use image that's scaled by 2
**/
/*------------------------------------*    $VISIBILITY
\*------------------------------------*/
/*------------------------------------*	$ABSOLUTE-POSITION
\*------------------------------------*/
/*------------------------------------*	$MOVE/CHANGE-3D-POSITION
\*------------------------------------*/
/*------------------------------------*	$LAYOUT
\*------------------------------------*/
/*------------------------------------*	$ELEMENT-DEFAULTS
\*------------------------------------*/
/*------------------------------------*	$FLEXBOX
\*------------------------------------*/
/*------------------------------------*
\*------------------------------------*/
/*------------------------------------*    $PLACEHOLDER
\*------------------------------------*/
/**
 * ELEMENT_DEFAULTS....................Elements default properties
 * .....page-element-default
 * .....element-default
 * .....element-inner-default
 * .....element-nested-default
 * .....element-text-default
 * ELEMENT_EXTENSIONS..................Extended Elements properties
 * .....element-inner-content
 * .....last-child-default
 * TOGGLE_ELEMENT......................Toggle properties
 * .....toggle-subject
 * .....toggle-content
 * .....toggle-content-subject
 * HEADING.............................Headline properties
**/
/*------------------------------------*	$ELEMENT_DEFAULTS
\*------------------------------------*/
.page-header, .page-main, .page-footer {
    *zoom: 1;
    display: block;
    width: 102.083333333%;
    margin-left: -1.0416666667%;
    margin-right: -1.0416666667%;
    clear: both;
    position: relative;
}

.page-header:after, .page-main:after, .page-footer:after, .page-header:before, .page-main:before, .page-footer:before {
    content: "\0020";
    display: table;
}

.page-header:after, .page-main:after, .page-footer:after {
    clear: both;
}

form, .stage .stage-video, .stage .stage-content, .stage .stage-subcontent, .accordion, .block, #map-canvas, .nav, .stage-teaser, .tabs, .togglebox, .form-section, .form-section-l, .form-section-s, .form-section-xs, .form-text {
    *zoom: 1;
    width: 97.9166666667%;
    margin-left: 1.0416666667%;
    margin-right: 1.0416666667%;
    margin-bottom: 4.5rem;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    clear: both;
    display: block;
    position: relative;
}

form:after, .stage .stage-video:after, .stage .stage-content:after, .stage .stage-subcontent:after, .accordion:after, .block:after, #map-canvas:after, .nav:after, .stage-teaser:after, .tabs:after, .teaser:after, .togglebox:after, .form-section:after, .form-section-l:after, .form-section-s:after, .form-section-xs:after, .form-text:after, form:before, .stage .stage-video:before, .stage .stage-content:before, .stage .stage-subcontent:before, .accordion:before, .block:before, #map-canvas:before, .nav:before, .stage-teaser:before, .tabs:before, .teaser:before, .togglebox:before, .form-section:before, .form-section-l:before, .form-section-s:before, .form-section-xs:before, .form-text:before {
    content: "\0020";
    display: table;
}

form:after, .stage .stage-video:after, .stage .stage-content:after, .stage .stage-subcontent:after, .accordion:after, .block:after, #map-canvas:after, .nav:after, .stage-teaser:after, .tabs:after, .teaser:after, .togglebox:after, .form-section:after, .form-section-l:after, .form-section-s:after, .form-section-xs:after, .form-text:after {
    clear: both;
}

.page-constrained-section form, .page-constrained-section .stage .stage-video, .stage .page-constrained-section .stage-video, .page-constrained-section .stage .stage-content, .stage .page-constrained-section .stage-content, .page-constrained-section .stage .stage-subcontent, .stage .page-constrained-section .stage-subcontent, .page-constrained-section .accordion, .page-constrained-section .block, .page-constrained-section #map-canvas, .page-constrained-section .nav, .page-constrained-section .stage-teaser, .page-constrained-section .tabs, .page-constrained-section .teaser, .page-constrained-section .togglebox, .page-constrained-section .form-section, .page-constrained-section .form-section-l, .page-constrained-section .form-section-s, .page-constrained-section .form-section-xs, .page-constrained-section .form-text {
    margin-bottom: 0;
}

.legal .copyright, .legal .imprint, .tabs > .tab, .teaser .t-inner {
    padding: 0.75rem 1rem;
    margin-left: 0 !important;
    margin-right: 0 !important;
    position: relative;
}

@media screen and (min-width: 48em) {
    .legal .copyright, .legal .imprint, .tabs > .tab, .teaser .t-inner {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

@media screen and (min-width: 60em) {
    .legal .copyright, .legal .imprint, .tabs > .tab, .teaser .t-inner {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

.accordion .acc-handle, .togglebox .tb-subject, .lang-switcher .ls-switch, .lang-switcher .ls-switched, .tabs > .tab-content {
    padding: 0.75rem 1rem;
    margin-left: 0 !important;
    margin-right: 0 !important;
    position: relative;
    padding-bottom: 0.375rem;
    padding-top: 0.375rem;
}

@media screen and (min-width: 48em) {
    .accordion .acc-handle, .togglebox .tb-subject, .lang-switcher .ls-switch, .lang-switcher .ls-switched, .tabs > .tab-content {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media screen and (min-width: 60em) {
    .accordion .acc-handle, .togglebox .tb-subject, .lang-switcher .ls-switch, .lang-switcher .ls-switched, .tabs > .tab-content {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

.page-constrained > caption, .page-constrained > h1, .page-constrained > h2, .page-constrained > h3, .page-constrained > h4, .page-constrained > h5, .page-constrained > h6, .page-constrained > p, .page-constrained > .bullet-list, .page-constrained > .decimal-list,
.acc-panel > caption,
.acc-panel > h1,
.acc-panel > h2,
.acc-panel > h3,
.acc-panel > h4,
.acc-panel > h5,
.acc-panel > h6,
.acc-panel > p,
.acc-panel > .bullet-list,
.acc-panel > .decimal-list,
.tb-content > caption,
.tb-content > h1,
.tb-content > h2,
.tb-content > h3,
.tb-content > h4,
.tb-content > h5,
.tb-content > h6,
.tb-content > p,
.tb-content > .bullet-list,
.tb-content > .decimal-list,
.tab-content > caption,
.tab-content > h1,
.tab-content > h2,
.tab-content > h3,
.tab-content > h4,
.tab-content > h5,
.tab-content > h6,
.tab-content > p,
.tab-content > .bullet-list,
.tab-content > .decimal-list {
    width: 97.9166666667%;
    margin-left: 1.0416666667%;
    margin-right: 1.0416666667%;
    padding: 0.75rem 1rem;
    margin-left: 0 !important;
    margin-right: 0 !important;
    position: relative;
    padding-bottom: 0.375rem;
    padding-top: 0.375rem;
    float: none;
    padding-bottom: 0;
    padding-top: 0;
}

@media screen and (min-width: 48em) {
    .page-constrained > caption, .page-constrained > h1, .page-constrained > h2, .page-constrained > h3, .page-constrained > h4, .page-constrained > h5, .page-constrained > h6, .page-constrained > p, .page-constrained > .bullet-list, .page-constrained > .decimal-list,
    .acc-panel > caption,
    .acc-panel > h1,
    .acc-panel > h2,
    .acc-panel > h3,
    .acc-panel > h4,
    .acc-panel > h5,
    .acc-panel > h6,
    .acc-panel > p,
    .acc-panel > .bullet-list,
    .acc-panel > .decimal-list,
    .tb-content > caption,
    .tb-content > h1,
    .tb-content > h2,
    .tb-content > h3,
    .tb-content > h4,
    .tb-content > h5,
    .tb-content > h6,
    .tb-content > p,
    .tb-content > .bullet-list,
    .tb-content > .decimal-list,
    .tab-content > caption,
    .tab-content > h1,
    .tab-content > h2,
    .tab-content > h3,
    .tab-content > h4,
    .tab-content > h5,
    .tab-content > h6,
    .tab-content > p,
    .tab-content > .bullet-list,
    .tab-content > .decimal-list {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media screen and (min-width: 60em) {
    .page-constrained > caption, .page-constrained > h1, .page-constrained > h2, .page-constrained > h3, .page-constrained > h4, .page-constrained > h5, .page-constrained > h6, .page-constrained > p, .page-constrained > .bullet-list, .page-constrained > .decimal-list,
    .acc-panel > caption,
    .acc-panel > h1,
    .acc-panel > h2,
    .acc-panel > h3,
    .acc-panel > h4,
    .acc-panel > h5,
    .acc-panel > h6,
    .acc-panel > p,
    .acc-panel > .bullet-list,
    .acc-panel > .decimal-list,
    .tb-content > caption,
    .tb-content > h1,
    .tb-content > h2,
    .tb-content > h3,
    .tb-content > h4,
    .tb-content > h5,
    .tb-content > h6,
    .tb-content > p,
    .tb-content > .bullet-list,
    .tb-content > .decimal-list,
    .tab-content > caption,
    .tab-content > h1,
    .tab-content > h2,
    .tab-content > h3,
    .tab-content > h4,
    .tab-content > h5,
    .tab-content > h6,
    .tab-content > p,
    .tab-content > .bullet-list,
    .tab-content > .decimal-list {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media screen and (min-width: 48em) {
    .page-constrained > caption, .page-constrained > h1, .page-constrained > h2, .page-constrained > h3, .page-constrained > h4, .page-constrained > h5, .page-constrained > h6, .page-constrained > p, .page-constrained > .bullet-list, .page-constrained > .decimal-list,
    .acc-panel > caption,
    .acc-panel > h1,
    .acc-panel > h2,
    .acc-panel > h3,
    .acc-panel > h4,
    .acc-panel > h5,
    .acc-panel > h6,
    .acc-panel > p,
    .acc-panel > .bullet-list,
    .acc-panel > .decimal-list,
    .tb-content > caption,
    .tb-content > h1,
    .tb-content > h2,
    .tb-content > h3,
    .tb-content > h4,
    .tb-content > h5,
    .tb-content > h6,
    .tb-content > p,
    .tb-content > .bullet-list,
    .tb-content > .decimal-list,
    .tab-content > caption,
    .tab-content > h1,
    .tab-content > h2,
    .tab-content > h3,
    .tab-content > h4,
    .tab-content > h5,
    .tab-content > h6,
    .tab-content > p,
    .tab-content > .bullet-list,
    .tab-content > .decimal-list {
        width: 81.25%;
        margin-left: 1.0416666667%;
        margin-right: 1.0416666667%;
        clear: none;
        float: left;
        padding: 0.75rem 1rem;
        margin-left: 0 !important;
        margin-right: 0 !important;
        position: relative;
        padding-bottom: 0.375rem;
        padding-top: 0.375rem;
        float: none;
        padding-bottom: 0;
        padding-top: 0;
    }
}

@media screen and (min-width: 48em) and (min-width: 48em) {
    .page-constrained > caption, .page-constrained > h1, .page-constrained > h2, .page-constrained > h3, .page-constrained > h4, .page-constrained > h5, .page-constrained > h6, .page-constrained > p, .page-constrained > .bullet-list, .page-constrained > .decimal-list,
    .acc-panel > caption,
    .acc-panel > h1,
    .acc-panel > h2,
    .acc-panel > h3,
    .acc-panel > h4,
    .acc-panel > h5,
    .acc-panel > h6,
    .acc-panel > p,
    .acc-panel > .bullet-list,
    .acc-panel > .decimal-list,
    .tb-content > caption,
    .tb-content > h1,
    .tb-content > h2,
    .tb-content > h3,
    .tb-content > h4,
    .tb-content > h5,
    .tb-content > h6,
    .tb-content > p,
    .tb-content > .bullet-list,
    .tb-content > .decimal-list,
    .tab-content > caption,
    .tab-content > h1,
    .tab-content > h2,
    .tab-content > h3,
    .tab-content > h4,
    .tab-content > h5,
    .tab-content > h6,
    .tab-content > p,
    .tab-content > .bullet-list,
    .tab-content > .decimal-list {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media screen and (min-width: 48em) and (min-width: 60em) {
    .page-constrained > caption, .page-constrained > h1, .page-constrained > h2, .page-constrained > h3, .page-constrained > h4, .page-constrained > h5, .page-constrained > h6, .page-constrained > p, .page-constrained > .bullet-list, .page-constrained > .decimal-list,
    .acc-panel > caption,
    .acc-panel > h1,
    .acc-panel > h2,
    .acc-panel > h3,
    .acc-panel > h4,
    .acc-panel > h5,
    .acc-panel > h6,
    .acc-panel > p,
    .acc-panel > .bullet-list,
    .acc-panel > .decimal-list,
    .tb-content > caption,
    .tb-content > h1,
    .tb-content > h2,
    .tb-content > h3,
    .tb-content > h4,
    .tb-content > h5,
    .tb-content > h6,
    .tb-content > p,
    .tb-content > .bullet-list,
    .tb-content > .decimal-list,
    .tab-content > caption,
    .tab-content > h1,
    .tab-content > h2,
    .tab-content > h3,
    .tab-content > h4,
    .tab-content > h5,
    .tab-content > h6,
    .tab-content > p,
    .tab-content > .bullet-list,
    .tab-content > .decimal-list {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media screen and (min-width: 60em) {
    .page-constrained > caption, .page-constrained > h1, .page-constrained > h2, .page-constrained > h3, .page-constrained > h4, .page-constrained > h5, .page-constrained > h6, .page-constrained > p, .page-constrained > .bullet-list, .page-constrained > .decimal-list,
    .acc-panel > caption,
    .acc-panel > h1,
    .acc-panel > h2,
    .acc-panel > h3,
    .acc-panel > h4,
    .acc-panel > h5,
    .acc-panel > h6,
    .acc-panel > p,
    .acc-panel > .bullet-list,
    .acc-panel > .decimal-list,
    .tb-content > caption,
    .tb-content > h1,
    .tb-content > h2,
    .tb-content > h3,
    .tb-content > h4,
    .tb-content > h5,
    .tb-content > h6,
    .tb-content > p,
    .tb-content > .bullet-list,
    .tb-content > .decimal-list,
    .tab-content > caption,
    .tab-content > h1,
    .tab-content > h2,
    .tab-content > h3,
    .tab-content > h4,
    .tab-content > h5,
    .tab-content > h6,
    .tab-content > p,
    .tab-content > .bullet-list,
    .tab-content > .decimal-list {
        width: 64.5833333333%;
        margin-left: 1.0416666667%;
        margin-right: 1.0416666667%;
        clear: none;
        float: left;
        padding: 0.75rem 1rem;
        margin-left: 0 !important;
        margin-right: 0 !important;
        position: relative;
        padding-bottom: 0.375rem;
        padding-top: 0.375rem;
        float: none;
        padding-bottom: 0;
        padding-top: 0;
    }
}

@media screen and (min-width: 60em) and (min-width: 48em) {
    .page-constrained > caption, .page-constrained > h1, .page-constrained > h2, .page-constrained > h3, .page-constrained > h4, .page-constrained > h5, .page-constrained > h6, .page-constrained > p, .page-constrained > .bullet-list, .page-constrained > .decimal-list,
    .acc-panel > caption,
    .acc-panel > h1,
    .acc-panel > h2,
    .acc-panel > h3,
    .acc-panel > h4,
    .acc-panel > h5,
    .acc-panel > h6,
    .acc-panel > p,
    .acc-panel > .bullet-list,
    .acc-panel > .decimal-list,
    .tb-content > caption,
    .tb-content > h1,
    .tb-content > h2,
    .tb-content > h3,
    .tb-content > h4,
    .tb-content > h5,
    .tb-content > h6,
    .tb-content > p,
    .tb-content > .bullet-list,
    .tb-content > .decimal-list,
    .tab-content > caption,
    .tab-content > h1,
    .tab-content > h2,
    .tab-content > h3,
    .tab-content > h4,
    .tab-content > h5,
    .tab-content > h6,
    .tab-content > p,
    .tab-content > .bullet-list,
    .tab-content > .decimal-list {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media screen and (min-width: 60em) and (min-width: 60em) {
    .page-constrained > caption, .page-constrained > h1, .page-constrained > h2, .page-constrained > h3, .page-constrained > h4, .page-constrained > h5, .page-constrained > h6, .page-constrained > p, .page-constrained > .bullet-list, .page-constrained > .decimal-list,
    .acc-panel > caption,
    .acc-panel > h1,
    .acc-panel > h2,
    .acc-panel > h3,
    .acc-panel > h4,
    .acc-panel > h5,
    .acc-panel > h6,
    .acc-panel > p,
    .acc-panel > .bullet-list,
    .acc-panel > .decimal-list,
    .tb-content > caption,
    .tb-content > h1,
    .tb-content > h2,
    .tb-content > h3,
    .tb-content > h4,
    .tb-content > h5,
    .tb-content > h6,
    .tb-content > p,
    .tb-content > .bullet-list,
    .tb-content > .decimal-list,
    .tab-content > caption,
    .tab-content > h1,
    .tab-content > h2,
    .tab-content > h3,
    .tab-content > h4,
    .tab-content > h5,
    .tab-content > h6,
    .tab-content > p,
    .tab-content > .bullet-list,
    .tab-content > .decimal-list {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/*------------------------------------*	$ELEMENT_EXTENSIONS
\*------------------------------------*/
p:last-child, .bullet-list:last-child, .decimal-list:last-child, .list-item:last-child {
    margin-bottom: 0;
}

/*------------------------------------*	$HEADING
\*------------------------------------*/
caption, h1, h2, h3, h4, h5, h6 {
    color: #007bbb;
    font-family: "Michroma", "Helvetica", "Arial", sans-serif;
    font-weight: normal;
}

/*------------------------------------*	TOGGLE_ELEMENT
\*------------------------------------*/
.accordion .acc-handle, .togglebox .tb-subject {
    display: block;
    padding-left: 3.25rem;
    position: relative;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.accordion .acc-handle:after, .togglebox .tb-subject:after {
    content: "";
    display: block;
    position: absolute;
    position: absolute;
    top: 0.984375rem;
    left: 0.84375rem;
    border-left: 0.3214285714rem solid transparent;
    border-right: 0.3214285714rem solid transparent;
    border-top: 0.3214285714rem solid #fff;
    height: 0;
    line-height: 0;
    transition: border 0.3s ease-in-out;
    width: 0;
}

.accordion .acc-handle:before, .togglebox .tb-subject:before {
    content: "";
    display: block;
    position: absolute;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    transition: background .3s ease;
    width: 2.25rem;
}

.accordion .show > .acc-handle:after, .togglebox > .show > .tb-subject:after {
    border-bottom: 0.3214285714rem solid #fff;
    border-top: 0;
}

.accordion .acc-panel, .togglebox .tb-content {
    height: 0;
    opacity: 0;
    overflow: hidden;
    transition: height .3s ease,
    opacity .3s ease;
}

.accordion .show > .acc-panel, .togglebox > .show > .tb-content {
    height: auto;
    min-height: 1rem;
    opacity: 1;
    padding-bottom: 1.5rem;
    padding-top: 0.75rem;
}

@media screen and (min-width: 48em) {
    .accordion .show > .acc-panel, .togglebox > .show > .tb-content {
        padding-left: 2.25rem;
    }
}

@media screen and (min-width: 48em) and (min-width: 48em) {
    .accordion .show > .acc-panel, .togglebox > .show > .tb-content {
        padding-left: 2.25rem;
    }
}

@media screen and (min-width: 48em) and (min-width: 60em) {
    .accordion .show > .acc-panel, .togglebox > .show > .tb-content {
        padding-left: 3.375rem;
    }
}

@media screen and (min-width: 60em) {
    .accordion .show > .acc-panel, .togglebox > .show > .tb-content {
        padding-left: 1.25rem;
    }
}

@media screen and (min-width: 60em) and (min-width: 48em) {
    .accordion .show > .acc-panel, .togglebox > .show > .tb-content {
        padding-left: 1.25rem;
    }
}

@media screen and (min-width: 60em) and (min-width: 60em) {
    .accordion .show > .acc-panel, .togglebox > .show > .tb-content {
        padding-left: 1.875rem;
    }
}

/*------------------------------------*
\*------------------------------------*/
/*------------------------------------*
\*------------------------------------*/
/*------------------------------------*    $STATE_INDICATOR
\*------------------------------------*/
/**
 * Device State Detection with CSS Media Queries and JavaScript
 * http://davidwalsh.name/device-state-detection-css-media-queries-javascript
**/
.state-indicator {
    position: absolute;
    top: -999em;
    left: -999em;
}

.state-indicator:before {
    content: "bp-xl";
}

@media all and (max-width: 60em) {
    .state-indicator:before {
        content: "bp-l";
    }
}

@media all and (max-width: 48em) {
    .state-indicator:before {
        content: "bp-m";
    }
}

@media all and (max-width: 29.75em) {
    .state-indicator:before {
        content: "bp-s";
    }
}

@media all and (max-width: 22em) {
    .state-indicator:before {
        content: "bp-xs";
    }
}

/*------------------------------------*
\*------------------------------------*/
/*------------------------------------*    $GLOBAL ELEMENTS
\*------------------------------------*/
/*------------------------------------*    $FONTS
\*------------------------------------*/
/**
 * ARIAL_NARROW........................Arial Narrow Local Webfont
 * MICHROMA............................Michroma Google Webfont
**/
/*------------------------------------*    $ARIAL_NARROW
\*------------------------------------*/
@font-face {
    font-family: "ArialNarrow";
    src: url("/font/ArialNarrow.eot");
    src: local("ArialNarrow"), url("/font/ArialNarrow.woff") format("woff"), url("/font/ArialNarrow.ttf") format("truetype");
}

/*------------------------------------*    $MICHROMA
\*------------------------------------*/
/*------------------------------------*
\*------------------------------------*/
/*------------------------------------*    $TABLES
\*------------------------------------*/
/**
 * GENERIC.............................Variables/Placeholder
 * .....Table-Width (Set table width to 100%)
 * .....<td>
 * .....<th>
 * CAPTION.............................Basic Styling for Table Headline <caption> Element
 * COL.................................Equal widths to each column
 * TABLE...............................Basic Styling for <table> Element
 * TABLE_CELLS.........................Basic Styling for <td>/<th> Element
 * TABLE_FOOTER........................Basic Styling for <tfoot> Element
 * DEFAULT_TABLE.......................Default Table Stying
 * NESTED_TABLE........................Nested Tables Styling
**/
/*------------------------------------*    $GENERIC
\*------------------------------------*/
caption, td, th {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #fff;
    color: #fff;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

@media screen and (min-width: 48em) {
    caption, td, th {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media screen and (min-width: 60em) {
    caption, td, th {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

caption:last-child[colspan], td:last-child[colspan], th:last-child[colspan] {
    background-color: #fff;
    color: #000;
}

/*------------------------------------*    $CAPTION
\*------------------------------------*/
caption {
    color: #007bbb;
    text-align: left;
}

/*------------------------------------*    $COL
\*------------------------------------*/
col:nth-child(1):nth-last-child(1) {
    width: 100%;
}

col:nth-child(1):nth-last-child(2), col:nth-child(2):nth-last-child(1) {
    width: 50%;
}

col:nth-child(1):nth-last-child(3), col:nth-child(2):nth-last-child(2), col:nth-child(3):nth-last-child(1) {
    width: 33.3333333333%;
}

col:nth-child(1):nth-last-child(4), col:nth-child(2):nth-last-child(3), col:nth-child(3):nth-last-child(2), col:nth-child(4):nth-last-child(1) {
    width: 25%;
}

col:nth-child(1):nth-last-child(5), col:nth-child(2):nth-last-child(4), col:nth-child(3):nth-last-child(3), col:nth-child(4):nth-last-child(2), col:nth-child(5):nth-last-child(1) {
    width: 20%;
}

col:nth-child(1):nth-last-child(6), col:nth-child(2):nth-last-child(5), col:nth-child(3):nth-last-child(4), col:nth-child(4):nth-last-child(3), col:nth-child(5):nth-last-child(2), col:nth-child(6):nth-last-child(1) {
    width: 16.6666666667%;
}

col:nth-child(1) {
    background-color: #333;
}

col:nth-child(2) {
    background-color: #666;
}

col:nth-child(3) {
    background-color: #a0a0a0;
}

col:nth-child(4) {
    background-color: #bdbdbd;
}

col:nth-child(5) {
    background-color: #cdcdcd;
}

col:nth-child(6) {
    background-color: #e3e3e3;
}

col:nth-child(7) {
    background-color: #f3f5f7;
}

/*------------------------------------*    $TABLE
\*------------------------------------*/
table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}

table sub, table sup {
    line-height: 0;
}

/*------------------------------------*    TABLE_CELLS
\*------------------------------------*/
th {
    font-family: "Michroma", "Helvetica", "Arial", sans-serif;
    font-weight: normal;
}

/*------------------------------------*    $TABLE_FOOTER
\*------------------------------------*/
tfoot td {
    text-align: left;
}

/*------------------------------------*    $DEFAULT_TABLE
\*------------------------------------*/
.default-table td:first-child, .default-table th:first-child {
    text-align: left;
}

.default-table td:first-child:last-child[colspan], .default-table th:first-child:last-child[colspan] {
    background-color: #fff;
    color: #000;
}

.default-table td:nth-child(n+3), .default-table th:nth-child(n+3) {
    color: #000;
}

/*------------------------------------*    $NESTED_TABLE
\*------------------------------------*/
.nested-table > tbody > tr > td {
    padding: 0;
    vertical-align: top;
}

.nested-table > tbody > tr > td:nth-child(n+3) td,
.nested-table > tbody > tr > td:nth-child(n+3) th {
    color: #000;
}

.nested-table thead > tr:first-child > th {
    background-color: #fff;
}

/*------------------------------------*
\*------------------------------------*/
/*------------------------------------*    $FORMS
\*------------------------------------*/
/**
 * GENERIC.............................Variables/Placeholder
 * .....%form-element-default
 * .....%form-element-button
 * .....%form-element-input
 * .....%form-element-option
 * BUTTON..............................<button>
 * FIELDSET............................<fieldset>
 * FORM................................<form>
 * INPUT...............................<input>
 * .....checkbox
 * .....file
 * .....radio
 * .....submit
 * LABEL...............................<label>
 * LEGEND..............................<legend>
 * OPTION..............................<option>
 * SELECT..............................<select>
 * TEXTAREA............................<textarea>
**/
/*------------------------------------*    $GENERIC
\*------------------------------------*/
button, input, select, textarea {
    font-family: inherit;
    font-size: 100%;
    margin: 0;
}

button, input[type="submit"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 0;
    cursor: pointer;
    -webkit-border-radius: 0;
}

input[type="email"], input[type="file"], input[type="password"], input[type="tel"], input[type="text"], select, textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
    border: 1px solid #fff;
    color: #000;
    height: 2.75rem;
    max-width: 100%;
    min-width: 100%;
    outline: none;
    padding: 0 0.75rem;
    transition: border-color 0.3s ease-in-out;
    width: 100%;
    -webkit-border-radius: 0;
    -webkit-tap-highlight-color: transparent;
}

input[type="email"]:focus, input[type="file"]:focus, input[type="password"]:focus, input[type="tel"]:focus, input[type="text"]:focus, select:focus, textarea:focus {
    border-color: #e1b500;
}

input[type="checkbox"], input[type="radio"] {
    float: left;
    margin: 0.375rem 0.5rem 0 0;
}

/*------------------------------------*    $BUTTON
\*------------------------------------*/
/*------------------------------------*    $FIELDSET
\*------------------------------------*/
fieldset {
    /**/
}

/*------------------------------------*    $FORM
\*------------------------------------*/
/*------------------------------------*    $INPUT
\*------------------------------------*/
input[type="file"] {
    cursor: pointer;
    width: 100%;
}

/*------------------------------------*    $LABEL
\*------------------------------------*/
label {
    cursor: pointer;
    display: block;
    font-family: "ArialNarrow", "Helvetica", "Arial", sans-serif;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/*------------------------------------*    $LEGEND
\*------------------------------------*/
legend {
    /**/
}

/*------------------------------------*    $OPTION
\*------------------------------------*/
option {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

/*------------------------------------*    $SELECT
\*------------------------------------*/
select {
    cursor: pointer;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}

/*------------------------------------*    $TEXTAREA
\*------------------------------------*/
textarea {
    resize: none;
    -webkit-appearance: none;
}

/*------------------------------------*
\*------------------------------------*/
/*------------------------------------*    $HEADINGS
\*------------------------------------*/
/*------------------------------------*
\*------------------------------------*/
/*------------------------------------*    $LINKS
\*------------------------------------*/
/**
 * ANCHOR..............................HTML <a> Element
 * LINK................................Textlink
**/
/*------------------------------------*    $ANCHOR
\*------------------------------------*/
a {
    color: inherit;
    cursor: pointer;
    outline: 0;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

/*------------------------------------*    $LINK
\*------------------------------------*/
.link {
    color: #007bbb;
    transition: color 0.3s ease-in-out;
}

.link:focus, .link:hover {
    color: #876;
    text-decoration: underline;
}

/*------------------------------------*
\*------------------------------------*/
/*------------------------------------*    $LISTS
\*------------------------------------*/
/**
 * GENERIC.............................Variables/Placeholder
 * LIST_ITEM...........................List Item <li>
 * UNORDERED_LIST......................Unordered List <ul>
**/
/*------------------------------------*    $GENERIC
\*------------------------------------*/
ul {
    list-style: none;
    list-style-position: outside;
}

/*------------------------------------*    $LIST_ITEM
\*------------------------------------*/
li {
    /**/
}

/*------------------------------------*    $UNORDERED_LIST
\*------------------------------------*/
/*------------------------------------*
\*------------------------------------*/
/*------------------------------------*    $MAIN
\*------------------------------------*/
/**
 * TEXT_SELECTION......................Background & Text color of selected Text
 * HTML................................The <html> Element
 * BODY................................The <body> Element
 * PAGE_WRAPPER........................Page Wrapper
**/
/*------------------------------------*    $TEXT_SELECTION
\*------------------------------------*/
::-moz-selection {
    background: #046;
    color: #fff;
    text-shadow: none;
}

::selection {
    background: #046;
    color: #fff;
    text-shadow: none;
}

/*------------------------------------*    $HTML
\*------------------------------------*/
html {
    background-color: #fff;
    color: #333;
    font: 100 100%/1.5 "ArialNarrow", "Helvetica", "Arial", sans-serif;
    overflow-y: scroll;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

/*------------------------------------*    $BODY
\*------------------------------------*/
body {
    position: relative;
    width: 100%;
}

@media print {
    body {
        line-height: 3rem;
        font-size: 62.5%;
    }
}

/*------------------------------------*    $PAGE_WRAPPER
\*------------------------------------*/
.page {
    background-color: #fff;
    color: #333;
    overflow: hidden;
}

.table-page {
    width: 97.9166666667%;
    margin-left: 1.0416666667%;
    margin-right: 1.0416666667%;
    background-color: #fff;
    color: #333;
    min-height: 100vh;
}

/*------------------------------------*
\*------------------------------------*/
/*------------------------------------*    $MEDIA ELEMENTS
\*------------------------------------*/
/**
 * Flexible Media.......................Fluid Media Elements
 * .....img
 * .....object
 * .....video
 * Video...............................Video Element
**/
/*------------------------------------*    $FLEXIBLE_MEDIA
\*------------------------------------*/
img, object, video {
    height: auto;
    max-width: 100%;
}

/*------------------------------------*    $VIDEO
\*------------------------------------*/
video {
    display: block;
}

/*------------------------------------*
\*------------------------------------*/
/*------------------------------------*    $TEXT_ELEMENTS
\*------------------------------------*/
/**
 * ADDRESS.............................<address>
 * HORIZONTAL_RULE.....................<hr />
 * PARAGRAPH...........................<p>
**/
/*------------------------------------*    $ADDRESS
\*------------------------------------*/
address {
    font-style: inherit;
}

/*------------------------------------*    $PARAGRAPH
\*------------------------------------*/
/*------------------------------------*
\*------------------------------------*/
/*------------------------------------*    $GLOBAL CLASSES
\*------------------------------------*/
/**
 * JS/NOJS.............................JS/NOJS Elements
 * .....js-element
 * .....nojs-element
 * COVER...............................Stretch Element
 * .....cover-img (stretch all images)
 * .....parallax override (stretch all parallax elements)
 * OVERLAPPING.........................Overlapping Elements
 * .....overlapped
 * .....to-overlap
 * SPACER..............................Element Default Spacing
 * VISIBILITY/DISPLAY..................Visibility/Display Stats of Elements
 * .....is-hidden
 * .....is-visible
 * .....is-vishidden
**/
/*------------------------------------*    $JS/NOJS
\*------------------------------------*/
.js-element {
    /**/
}

.nojs-element {
    display: none;
}

/*------------------------------------*    $COVER
\*------------------------------------*/
.cover {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 100%;
}

.cover .cover-img {
    max-width: none;
    min-height: 100%;
    min-width: 100%;
}

.cover .parallax,
.cover .parallax-img,
.cover .parallax-inner {
    height: inherit;
    width: inherit;
}

/*------------------------------------*    $OVERLAPPING
\*------------------------------------*/
.overlapping {
    position: relative;
}

.overlapping .overlapped {
    /**/
}

.overlapping .to-overlap {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    visibility: hidden;
}

.overlapping .to-overlap.show {
    visibility: visible;
}

/*------------------------------------*    $SPACER
\*------------------------------------*/
.need-space {
    margin-bottom: 4.5rem;
}

.reduce-space {
    margin-bottom: 1.5rem;
}

/*------------------------------------*    $VISIBILITY/DISPLAY
\*------------------------------------*/
.is-hidden {
    display: none;
    visibility: hidden;
}

.is-visible {
    display: block;
    visibility: visible;
}

.is-vishidden {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
}

/*------------------------------------*
\*------------------------------------*/
/*------------------------------------*	$ANIMATION
\*------------------------------------*/
/**
 * GENERIC.............................Variables/Placeholder
 * .....Mixin animation
 * .....Mixin keyframes
 * .....Placeholder Fade
 * FADE................................Fade Element
 * .....fade-in (Fade-In/Out)
 * PARALLAX............................Container Properties for Parallax Elements
 * .....parallax-img					- Parallax-Image
 * .....parallax-inner-container		- Parallax-Element Container
 * .....parallax-layer					- Add more Layers to Parallax Element
 * SCROLL-ANIM.........................Scroll-Animation
 * SLIDE...............................Slide Element
 * .....btt (bottom-to-top)
 * .....ltr (left-to-right)
 * .....rtl (right-to-left)
 * .....ttb (top-to-bottom)
 * SMOOTH..............................Smooth moving Element
 * .....down
 * .....left
 * .....right
 * .....up
**/
/*------------------------------------*	$GENERIC
\*------------------------------------*/
.fade, .smooth-down, .smooth-left, .smooth-right, .smooth-up {
    opacity: 0;
    transition: opacity .6s linear;
}

.show.fade, .show.smooth-down, .show.smooth-left, .show.smooth-right, .show.smooth-up {
    opacity: 1;
}

/*------------------------------------*	$FADE
\*------------------------------------*/
/*------------------------------------*	$PARALLAX
\*------------------------------------*/
.parallax {
    overflow: hidden;
    position: relative;
}

.parallax .parallax-img {
    display: block;
    margin: 0 auto;
}

@media screen and (min-width: 48em) {
    .parallax .parallax-img {
        margin: -5% auto;
    }
}

@media screen and (min-width: 60em) {
    .parallax .parallax-img {
        margin: -12% auto;
    }
}

@media screen and (min-width: 73em) {
    .parallax .parallax-img {
        margin: -15% auto;
    }
}

@media screen and (min-width: 82em) {
    .parallax .parallax-img {
        margin: -16% auto;
    }
}

.parallax .parallax-inner {
    position: relative;
}

.parallax .parallax-layer {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

/*------------------------------------*	$SCROLL-ANIM
\*------------------------------------*/
.scroll-anim {
    position: absolute;
    z-index: 999;
}

/*------------------------------------*	$SLIDE
\*------------------------------------*/
.slide-btt, .slide-ltr, .slide-rtl, .slide-ttb {
    -webkit-transform: transition .9s linear;
    transform: transition .9s linear;
}

.show.slide-btt, .show.slide-ltr, .show.slide-rtl, .show.slide-ttb {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.slide-btt {
    -webkit-transform: translate3d(0, 300%, 0);
    transform: translate3d(0, 300%, 0);
}

.slide-ltr {
    -webkit-transform: translate3d(-200%, 0, 0);
    transform: translate3d(-200%, 0, 0);
}

.slide-rtl {
    -webkit-transform: translate3d(200%, 0, 0);
    transform: translate3d(200%, 0, 0);
}

.slide-ttb {
    -webkit-transform: translate3d(0, -300%, 0);
    transform: translate3d(0, -300%, 0);
}

/*------------------------------------*	$SMOOTH
\*------------------------------------*/
@-webkit-keyframes smoothDown {
    0% {
        -webkit-transform: translate3d(0, -5%, 0);
        transform: translate3d(0, -5%, 0);
    }
    100% {
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes smoothDown {
    0% {
        -webkit-transform: translate3d(0, -5%, 0);
        transform: translate3d(0, -5%, 0);
    }
    100% {
        -webkit-transform: none;
        transform: none;
    }
}

@-webkit-keyframes smoothLeft {
    0% {
        -webkit-transform: translate3d(1.5%, 0, 0);
        transform: translate3d(1.5%, 0, 0);
    }
    100% {
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes smoothLeft {
    0% {
        -webkit-transform: translate3d(1.5%, 0, 0);
        transform: translate3d(1.5%, 0, 0);
    }
    100% {
        -webkit-transform: none;
        transform: none;
    }
}

@-webkit-keyframes smoothRight {
    0% {
        -webkit-transform: translate3d(-1.5%, 0, 0);
        transform: translate3d(-1.5%, 0, 0);
    }
    100% {
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes smoothRight {
    0% {
        -webkit-transform: translate3d(-1.5%, 0, 0);
        transform: translate3d(-1.5%, 0, 0);
    }
    100% {
        -webkit-transform: none;
        transform: none;
    }
}

@-webkit-keyframes smoothUp {
    0% {
        -webkit-transform: translate3d(0, 5%, 0);
        transform: translate3d(0, 5%, 0);
    }
    100% {
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes smoothUp {
    0% {
        -webkit-transform: translate3d(0, 5%, 0);
        transform: translate3d(0, 5%, 0);
    }
    100% {
        -webkit-transform: none;
        transform: none;
    }
}

.smooth-down.show {
    -webkit-animation: smoothDown 1s both;
    animation: smoothDown 1s both;
}

.smooth-left.show {
    -webkit-animation: smoothLeft 1s both;
    animation: smoothLeft 1s both;
}

.smooth-right.show {
    -webkit-animation: smoothRight 1s both;
    animation: smoothRight 1s both;
}

.smooth-up.show {
    -webkit-animation: smoothUp 1s both;
    animation: smoothUp 1s both;
}

/*------------------------------------*
\*------------------------------------*/
/*------------------------------------*    $LAYOUT
\*------------------------------------*/
/*------------------------------------*    $GRID SYSTEM
\*------------------------------------*/
/**
 * Simple Grid System
 *
 * Usage:
 * <div class="row">
 *   <div class="column column--12 column--bp-m--6">...</div>
 *   <div class="column column--12 column--bp-m--6">...</div>
 * </div>
 */

/* Row Container */
.row {
    display: flex;
    flex-wrap: wrap;
}

/* Column Base */
.column {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* Column Widths (Mobile First - Default) */
.column--1 { width: 8.3333333333%; }
.column--2 { width: 16.6666666667%; }
.column--3 { width: 25%; }
.column--4 { width: 33.3333333333%; }
.column--5 { width: 41.6666666667%; }
.column--6 { width: 50%; }
.column--7 { width: 58.3333333333%; }
.column--8 { width: 66.6666666667%; }
.column--9 { width: 75%; }
.column--10 { width: 83.3333333333%; }
.column--11 { width: 91.6666666667%; }
.column--12 { width: 100%; }

/* Breakpoint Small (bp-s) - 22em+ */
@media screen and (min-width: 22em) {
    .column--bp-s--1 { width: 8.3333333333%; }
    .column--bp-s--2 { width: 16.6666666667%; }
    .column--bp-s--3 { width: 25%; }
    .column--bp-s--4 { width: 33.3333333333%; }
    .column--bp-s--5 { width: 41.6666666667%; }
    .column--bp-s--6 { width: 50%; }
    .column--bp-s--7 { width: 58.3333333333%; }
    .column--bp-s--8 { width: 66.6666666667%; }
    .column--bp-s--9 { width: 75%; }
    .column--bp-s--10 { width: 83.3333333333%; }
    .column--bp-s--11 { width: 91.6666666667%; }
    .column--bp-s--12 { width: 100%; }
}

/* Breakpoint Medium (bp-m) - 48em+ */
@media screen and (min-width: 48em) {
    .column--bp-m--1 { width: 8.3333333333%; }
    .column--bp-m--2 { width: 16.6666666667%; }
    .column--bp-m--3 { width: 25%; }
    .column--bp-m--4 { width: 33.3333333333%; }
    .column--bp-m--5 { width: 41.6666666667%; }
    .column--bp-m--6 { width: 50%; }
    .column--bp-m--7 { width: 58.3333333333%; }
    .column--bp-m--8 { width: 66.6666666667%; }
    .column--bp-m--9 { width: 75%; }
    .column--bp-m--10 { width: 83.3333333333%; }
    .column--bp-m--11 { width: 91.6666666667%; }
    .column--bp-m--12 { width: 100%; }
}

/* Breakpoint Large (bp-l) - 60em+ */
@media screen and (min-width: 60em) {
    .column--bp-l--1 { width: 8.3333333333%; }
    .column--bp-l--2 { width: 16.6666666667%; }
    .column--bp-l--3 { width: 25%; }
    .column--bp-l--4 { width: 33.3333333333%; }
    .column--bp-l--5 { width: 41.6666666667%; }
    .column--bp-l--6 { width: 50%; }
    .column--bp-l--7 { width: 58.3333333333%; }
    .column--bp-l--8 { width: 66.6666666667%; }
    .column--bp-l--9 { width: 75%; }
    .column--bp-l--10 { width: 83.3333333333%; }
    .column--bp-l--11 { width: 91.6666666667%; }
    .column--bp-l--12 { width: 100%; }
}

/* Breakpoint Extra Large (bp-xl) - 80em+ */
@media screen and (min-width: 80em) {
    .column--bp-xl--1 { width: 8.3333333333%; }
    .column--bp-xl--2 { width: 16.6666666667%; }
    .column--bp-xl--3 { width: 25%; }
    .column--bp-xl--4 { width: 33.3333333333%; }
    .column--bp-xl--5 { width: 41.6666666667%; }
    .column--bp-xl--6 { width: 50%; }
    .column--bp-xl--7 { width: 58.3333333333%; }
    .column--bp-xl--8 { width: 66.6666666667%; }
    .column--bp-xl--9 { width: 75%; }
    .column--bp-xl--10 { width: 83.3333333333%; }
    .column--bp-xl--11 { width: 91.6666666667%; }
    .column--bp-xl--12 { width: 100%; }
}

/* Margin Bottom Utilities */
.margin-bottom--0 { margin-bottom: 0; }
.margin-bottom--1 { margin-bottom: 0.375rem; }
.margin-bottom--2 { margin-bottom: 0.75rem; }
.margin-bottom--3 { margin-bottom: 1.125rem; }
.margin-bottom--4 { margin-bottom: 1.5rem; }
.margin-bottom--5 { margin-bottom: 1.875rem; }
.margin-bottom--6 { margin-bottom: 3rem; }
.margin-bottom--7 { margin-bottom: 4.5rem; }
.margin-bottom--8 { margin-bottom: 6rem; }

/*------------------------------------*    $STRUCTURE
\*------------------------------------*/
/*------------------------------------*    $HEADER_SECTION
\*------------------------------------*/
/**
 * .page-header........................HTML <header> Section
 * .lang-switcher......................Switch Language
 * .logo...............................Site-Logo
 * .slogan.............................Site Slogan
**/
/*------------------------------------*    <header>
\*------------------------------------*/
.page-header {
    margin-top: 1.125rem;
    position: relative;
}

.page-header .nav.show-menu .lang-switcher {
    display: block;
}

/*------------------------------------*    LANG_SWITCHER
\*------------------------------------*/
.lang-switcher {
    clear: both;
    display: none;
}

@media screen and (min-width: 60em) {
    .lang-switcher {
        position: absolute;
        top: -8rem;
        *zoom: 1;
        display: block;
        width: 108.333333333%;
        margin-left: -4.1666666667%;
        margin-right: -4.1666666667%;
        margin-left: 67.7083333333%;
        clear: both;
        display: block;
    }

    .lang-switcher:after, .lang-switcher:before {
        content: "\0020";
        display: table;
    }

    .lang-switcher:after {
        clear: both;
    }
}

.lang-switcher .ls-switch, .lang-switcher .ls-switched {
    display: block;
    float: left;
    font-family: "Michroma", "Helvetica", "Arial", sans-serif;
    font-size: 12px;
    padding-bottom: 0.25rem;
    padding-top: 0.25rem;
    text-align: center;
    transition: background-color 0.3s ease-in-out;
    width: 50%;
}

@media screen and (min-width: 60em) {
    .lang-switcher .ls-switch, .lang-switcher .ls-switched {
        width: 14.5833333333%;
        margin-left: 1.0416666667%;
        margin-right: 1.0416666667%;
        clear: none;
        float: left;
    }
}

.lang-switcher .ls-item {
    /**/
}

.lang-switcher .ls-switch {
    background-color: #009ee3;
    color: #fff;
}

.lang-switcher .ls-switch:hover {
    background-color: #66c6ee;
}

.lang-switcher .ls-switched {
    background-color: #d6e6ee;
    color: #046;
}

/*------------------------------------*    LOGO
\*------------------------------------*/
.logo {
    padding-left: 1rem;
    display: block;
    float: left;
    margin-bottom: 1.125rem;
    position: relative;
    z-index: 1;
}

@media screen and (min-width: 48em) {
    .logo {
        padding-left: 1rem;
    }
}

@media screen and (min-width: 60em) {
    .logo {
        padding-left: 1.5rem;
    }
}

@media screen and (min-width: 48em) {
    .logo {
        margin-right: 1.0416666667%;
    }
}

@media screen and (min-width: 60em) {
    .logo {
        margin-left: 0;
    }
}

/*------------------------------------*    SLOGAN
\*------------------------------------*/
.slogan {
    display: none;
    clear: right;
    color: #007bbb;
    font-family: "Michroma", "Helvetica", "Arial", sans-serif;
    font-size: 10px;
    text-transform: uppercase;
    white-space: nowrap;
}

@media screen and (min-width: 48em) {
    .slogan {
        display: block;
        margin-top: 0.75rem;
    }
}

@media screen and (min-width: 60em) {
    .slogan {
        margin-top: 4.5rem;
    }
}

.slogan .byline {
    font-size: 14px;
}

/*------------------------------------*
\*------------------------------------*/
/*------------------------------------*    $MAIN_CONTENT_AREA
\*------------------------------------*/
/**
 * CONSTRAINED_SECTION.................Content Wrapper Section
 * CONSTRAINED_WRAPPER.................Content Wrapper
 * MAIN................................HTML <main> Section
 * SECTIONS............................Content-Container/Column-Wrapper
 * .....section........................Regular
 * .....section-onepage................OnePager
 * STAGE...............................Intro-Element
**/
/*------------------------------------*    $CONSTRAINED_SECTION
\*------------------------------------*/
.page-constrained-section {
    margin-bottom: 4.5rem;
    background-color: #f3f5f7;
    padding-bottom: 1.5rem;
    padding-top: 1.5rem;
}

@media screen and (min-width: 48em) {
    .page-constrained-section {
        padding-bottom: 1.5rem;
        padding-top: 2.25rem;
    }
}

/*------------------------------------*    $CONSTRAINED_WRAPPER
\*------------------------------------*/
.page-constrained {
    *zoom: 1;
    width: 97.9166666667%;
    margin-left: 1.0416666667%;
    margin-right: 1.0416666667%;
    margin: 0 auto;
    max-width: 80rem;
    position: relative;
}

.page-constrained:after, .page-constrained:before {
    content: "\0020";
    display: table;
}

.page-constrained:after {
    clear: both;
}

/*------------------------------------*    $MAIN
\*------------------------------------*/
.page-main > .page-constrained {
    margin: 0 auto;
    padding: 0.75rem 1rem;
}

@media screen and (min-width: 48em) {
    .page-main > .page-constrained {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media screen and (min-width: 60em) {
    .page-main > .page-constrained {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/*------------------------------------*    $SECTIONS
\*------------------------------------*/
.section, .stage {
    *zoom: 1;
    clear: both;
    overflow: hidden;
    position: relative;
}

.section:after, .stage:after, .section:before, .stage:before {
    content: "\0020";
    display: table;
}

.section:after, .stage:after {
    clear: both;
}

/*------------------------------------*    $STAGE
\*------------------------------------*/
@media screen and (min-width: 60em) {
    .stage .stage-video {
        width: 64.5833333333%;
        margin-left: 1.0416666667%;
        margin-right: 1.0416666667%;
        clear: none;
        float: left;
    }
}

.stage .stage-content {
    padding: 0.75rem 1rem;
}

@media screen and (min-width: 48em) {
    .stage .stage-content {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media screen and (min-width: 60em) {
    .stage .stage-content {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media screen and (min-width: 48em) {
    .stage .stage-content {
        width: 47.9166666667%;
        margin-left: 1.0416666667%;
        margin-right: 1.0416666667%;
        clear: none;
        float: left;
    }
}

@media screen and (min-width: 60em) {
    .stage .stage-content {
        width: 31.25%;
        margin-left: 1.0416666667%;
        margin-right: 1.0416666667%;
        clear: none;
        float: left;
        padding-bottom: 1.5rem;
    }
}

@media screen and (min-width: 73em) {
    .stage .stage-content {
        padding-top: 3rem;
    }
}

.stage .stage-subcontent {
    padding: 0.75rem 1rem;
    background-color: #f2eee2;
}

@media screen and (min-width: 48em) {
    .stage .stage-subcontent {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media screen and (min-width: 60em) {
    .stage .stage-subcontent {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media screen and (min-width: 48em) {
    .stage .stage-subcontent {
        width: 47.9166666667%;
        margin-left: 1.0416666667%;
        margin-right: 1.0416666667%;
        clear: none;
        float: left;
        bottom: 0;
        position: absolute;
        right: 0;
    }
}

@media screen and (min-width: 60em) {
    .stage .stage-subcontent {
        width: 31.25%;
        margin-left: 1.0416666667%;
        margin-right: 1.0416666667%;
        clear: none;
        float: left;
    }
}

/*------------------------------------*
\*------------------------------------*/
/*------------------------------------*    $FOOTER_SECTION
\*------------------------------------*/
/**
 * $FOOTER.............................HTML <footer> Section
 * $LEGAL..............................Legal Information
 * .....Copyright
 * .....Imprint
**/
/*------------------------------------*    $FOOTER
\*------------------------------------*/
.page-footer {
    background: transparent url("/img/page-footer.jpg") no-repeat scroll center 0;
    background-size: cover;
    color: #fff;
    padding-bottom: 0.75rem;
    padding-top: 0.75rem;
}

.page-footer .link {
    color: inherit;
}

.page-footer .link:hover {
    text-decoration: underline;
}

.page-footer .footer-text {
    background: rgba(0, 0, 0, 0.5);
    color: #a0a1a4;
    padding-bottom: 0.75rem;
    padding-top: 0.75rem;
    width: auto;
}

/*------------------------------------*    $LEGAL
\*------------------------------------*/
.legal .copyright {
    width: 39.5833333333%;
    margin-left: 1.0416666667%;
    margin-right: 1.0416666667%;
    clear: none;
    float: left;
    text-align: right;
}

.legal .imprint {
    width: 56.25%;
    margin-left: 1.0416666667%;
    margin-right: 1.0416666667%;
    clear: none;
    float: left;
}

/*------------------------------------*
\*------------------------------------*/
/*------------------------------------*    $COMPONENTS/$MODULES
\*------------------------------------*/
/*------------------------------------*	$BUTTONS
\*------------------------------------*/
/**
* GENERIC.............................Variables/Placeholder
* BTN.................................Simple Button
* CTA.................................Call-To-Action
**/
/*------------------------------------*	$GENERIC
\*------------------------------------*/
.btn, .cta {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 2px solid;
    border-radius: 5px;
    cursor: pointer;
    display: block;
    font-family: "Michroma", "Helvetica", "Arial", sans-serif;
    font-size: 14px;
    min-height: 2.75rem;
    overflow: hidden;
    padding: 0.375rem 1rem;
    position: relative;
    text-align: center;
    text-decoration: none;
    transition: background-color .3s ease-out,
    border-color .3s ease-out;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    white-space: nowrap;
    width: 100%;
}

/*------------------------------------*	$BTN
\*------------------------------------*/
.btn {
    background-color: #fff;
    border-color: #009ee3;
    color: #009ee3;
}

.btn:active, .btn:hover {
    background-color: #009ee3;
    color: #fff;
}

/*------------------------------------*	$CTA
\*------------------------------------*/
.cta {
    background-color: #009ee3;
    border-color: #009ee3;
    color: #fff;
}

.cta:active, .cta:hover {
    background-color: #007bbb;
    border-color: #007bbb;
    color: #fff;
}

/*------------------------------------*
\*------------------------------------*/
/*------------------------------------*    $LISTS
\*------------------------------------*/
/**
 * GENERIC.............................Variables/Placeholder
 * .....List
 * .....List-Item Unordered List
 * .....List-Item Ordered List
 * LIST-ITEM...........................List-Item
 * BULLET-LIST.........................Bullets
 * DECIMAL-LIST........................Numbers
**/
/*------------------------------------*    $GENERIC
\*------------------------------------*/
.bullet-list .list-item {
    padding-left: 1rem;
}

.decimal-list .list-item {
    margin-left: 1.5rem;
}

/*------------------------------------*    $LIST-ITEM
\*------------------------------------*/
.list-item {
    margin-bottom: 0.375rem;
    position: relative;
}

/*------------------------------------*    $BULLET-LIST
\*------------------------------------*/
.bullet-list .list-item:before {
    content: "";
    display: block;
    position: absolute;
    content: "\2022";
    left: 0;
}

/*------------------------------------*    $DECIMAL-LIST
\*------------------------------------*/
.decimal-list {
    list-style-type: decimal-leading-zero;
}

/*------------------------------------*
\*------------------------------------*/
/*------------------------------------*    $TEXT
\*------------------------------------*/
/**
 * BYLINE..............................Attendant Textline
 * PRICE...............................Pricing
**/
/*------------------------------------*    $BYLINE
\*------------------------------------*/
.byline {
    display: block;
}

/*------------------------------------*    $PRICE
\*------------------------------------*/
.price {
    color: #333;
    display: block;
}

/*------------------------------------*
\*------------------------------------*/
/*------------------------------------*    $VIDEO ELEMENTS
\*------------------------------------*/
/**
 * GENERIC.............................Variables/Placeholder
 * BACKGROUND_VIDEO....................Like background-image
 * CONTROLLED_VIDEO....................JS Controlled Video - Plays/Stops Video inside/outside viewport
**/
/*------------------------------------*    $GENERIC
\*------------------------------------*/
/*------------------------------------*    $BACKGROUND_VIDEO
\*------------------------------------*/
.video-bg .vjs-tech {
    height: auto !important;
    position: relative !important;
}

/*------------------------------------*    CONTROLLED_VIDEO
\*------------------------------------*/
.video-controlled .vjs-tech {
    height: auto !important;
    position: relative !important;
}

/*------------------------------------*
\*------------------------------------*/
/*------------------------------------*    $ACCORDION
\*------------------------------------*/
/**
 * Gestapelte Toggle-Elemente mit Ziehharmonika Effekt.
 *
	<div class="accordion">
		<ul class="acc-group">
			<li class="acc-item">
				<a data-jmname="accordionbox" href="#" class="acc-handle">$accordion-item$</a>
				<div class="acc-panel">
					<p>$accordion-content$</p>
				</div>
			</li>
			<li class="acc-item">
				<a data-jmname="accordionbox" href="#" class="acc-handle">$accordion-item$</a>
				<div class="acc-panel">
					<p>$accordion-content$</p>
				</div>
			</li>
			<li class="acc-item">
				<a data-jmname="accordionbox" href="#" class="acc-handle">$accordion-item$</a>
				<div class="acc-panel">
					<p>$accordion-content$</p>
				</div>
			</li>
		</ul>
	</div>
 *
**/
.accordion {
    background-color: transparent;
    color: #000;
}

.accordion .acc-group {
    /**/
}

.accordion .acc-handle {
    background-color: #046;
    color: #fff;
    display: block;
    font-family: "Michroma", "Helvetica", "Arial", sans-serif;
    margin-bottom: 3px;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.accordion .acc-handle:before {
    background-color: #007bbb;
}

.accordion .acc-handle:hover {
    background-color: #ba8;
    color: #fff;
}

.accordion .acc-handle:hover:before {
    background-color: #876;
}

.accordion .acc-item {
    /**/
}

.accordion .acc-panel {
    background-color: #f2eee2;
}

.accordion .show > .acc-handle {
    background-color: #ba8;
    color: #fff;
}

.accordion .show > .acc-handle:before {
    background-color: #876;
}

/*------------------------------------*
\*------------------------------------*/
/*------------------------------------*    $BACK-TO-TOP
\*------------------------------------*/
.back-to-top {
    background: transparent url("data:image/png;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAGCAYAAAD68A/GAAAACXBIWXMAAAsTAAALEwEAmpwYAAAKT2lDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVNnVFPpFj333vRCS4iAlEtvUhUIIFJCi4AUkSYqIQkQSoghodkVUcERRUUEG8igiAOOjoCMFVEsDIoK2AfkIaKOg6OIisr74Xuja9a89+bN/rXXPues852zzwfACAyWSDNRNYAMqUIeEeCDx8TG4eQuQIEKJHAAEAizZCFz/SMBAPh+PDwrIsAHvgABeNMLCADATZvAMByH/w/qQplcAYCEAcB0kThLCIAUAEB6jkKmAEBGAYCdmCZTAKAEAGDLY2LjAFAtAGAnf+bTAICd+Jl7AQBblCEVAaCRACATZYhEAGg7AKzPVopFAFgwABRmS8Q5ANgtADBJV2ZIALC3AMDOEAuyAAgMADBRiIUpAAR7AGDIIyN4AISZABRG8lc88SuuEOcqAAB4mbI8uSQ5RYFbCC1xB1dXLh4ozkkXKxQ2YQJhmkAuwnmZGTKBNA/g88wAAKCRFRHgg/P9eM4Ors7ONo62Dl8t6r8G/yJiYuP+5c+rcEAAAOF0ftH+LC+zGoA7BoBt/qIl7gRoXgugdfeLZrIPQLUAoOnaV/Nw+H48PEWhkLnZ2eXk5NhKxEJbYcpXff5nwl/AV/1s+X48/Pf14L7iJIEyXYFHBPjgwsz0TKUcz5IJhGLc5o9H/LcL//wd0yLESWK5WCoU41EScY5EmozzMqUiiUKSKcUl0v9k4t8s+wM+3zUAsGo+AXuRLahdYwP2SycQWHTA4vcAAPK7b8HUKAgDgGiD4c93/+8//UegJQCAZkmScQAAXkQkLlTKsz/HCAAARKCBKrBBG/TBGCzABhzBBdzBC/xgNoRCJMTCQhBCCmSAHHJgKayCQiiGzbAdKmAv1EAdNMBRaIaTcA4uwlW4Dj1wD/phCJ7BKLyBCQRByAgTYSHaiAFiilgjjggXmYX4IcFIBBKLJCDJiBRRIkuRNUgxUopUIFVIHfI9cgI5h1xGupE7yAAygvyGvEcxlIGyUT3UDLVDuag3GoRGogvQZHQxmo8WoJvQcrQaPYw2oefQq2gP2o8+Q8cwwOgYBzPEbDAuxsNCsTgsCZNjy7EirAyrxhqwVqwDu4n1Y8+xdwQSgUXACTYEd0IgYR5BSFhMWE7YSKggHCQ0EdoJNwkDhFHCJyKTqEu0JroR+cQYYjIxh1hILCPWEo8TLxB7iEPENyQSiUMyJ7mQAkmxpFTSEtJG0m5SI+ksqZs0SBojk8naZGuyBzmULCAryIXkneTD5DPkG+Qh8lsKnWJAcaT4U+IoUspqShnlEOU05QZlmDJBVaOaUt2ooVQRNY9aQq2htlKvUYeoEzR1mjnNgxZJS6WtopXTGmgXaPdpr+h0uhHdlR5Ol9BX0svpR+iX6AP0dwwNhhWDx4hnKBmbGAcYZxl3GK+YTKYZ04sZx1QwNzHrmOeZD5lvVVgqtip8FZHKCpVKlSaVGyovVKmqpqreqgtV81XLVI+pXlN9rkZVM1PjqQnUlqtVqp1Q61MbU2epO6iHqmeob1Q/pH5Z/YkGWcNMw09DpFGgsV/jvMYgC2MZs3gsIWsNq4Z1gTXEJrHN2Xx2KruY/R27iz2qqaE5QzNKM1ezUvOUZj8H45hx+Jx0TgnnKKeX836K3hTvKeIpG6Y0TLkxZVxrqpaXllirSKtRq0frvTau7aedpr1Fu1n7gQ5Bx0onXCdHZ4/OBZ3nU9lT3acKpxZNPTr1ri6qa6UbobtEd79up+6Ynr5egJ5Mb6feeb3n+hx9L/1U/W36p/VHDFgGswwkBtsMzhg8xTVxbzwdL8fb8VFDXcNAQ6VhlWGX4YSRudE8o9VGjUYPjGnGXOMk423GbcajJgYmISZLTepN7ppSTbmmKaY7TDtMx83MzaLN1pk1mz0x1zLnm+eb15vft2BaeFostqi2uGVJsuRaplnutrxuhVo5WaVYVVpds0atna0l1rutu6cRp7lOk06rntZnw7Dxtsm2qbcZsOXYBtuutm22fWFnYhdnt8Wuw+6TvZN9un2N/T0HDYfZDqsdWh1+c7RyFDpWOt6azpzuP33F9JbpL2dYzxDP2DPjthPLKcRpnVOb00dnF2e5c4PziIuJS4LLLpc+Lpsbxt3IveRKdPVxXeF60vWdm7Obwu2o26/uNu5p7ofcn8w0nymeWTNz0MPIQ+BR5dE/C5+VMGvfrH5PQ0+BZ7XnIy9jL5FXrdewt6V3qvdh7xc+9j5yn+M+4zw33jLeWV/MN8C3yLfLT8Nvnl+F30N/I/9k/3r/0QCngCUBZwOJgUGBWwL7+Hp8Ib+OPzrbZfay2e1BjKC5QRVBj4KtguXBrSFoyOyQrSH355jOkc5pDoVQfujW0Adh5mGLw34MJ4WHhVeGP45wiFga0TGXNXfR3ENz30T6RJZE3ptnMU85ry1KNSo+qi5qPNo3ujS6P8YuZlnM1VidWElsSxw5LiquNm5svt/87fOH4p3iC+N7F5gvyF1weaHOwvSFpxapLhIsOpZATIhOOJTwQRAqqBaMJfITdyWOCnnCHcJnIi/RNtGI2ENcKh5O8kgqTXqS7JG8NXkkxTOlLOW5hCepkLxMDUzdmzqeFpp2IG0yPTq9MYOSkZBxQqohTZO2Z+pn5mZ2y6xlhbL+xW6Lty8elQfJa7OQrAVZLQq2QqboVFoo1yoHsmdlV2a/zYnKOZarnivN7cyzytuQN5zvn//tEsIS4ZK2pYZLVy0dWOa9rGo5sjxxedsK4xUFK4ZWBqw8uIq2Km3VT6vtV5eufr0mek1rgV7ByoLBtQFr6wtVCuWFfevc1+1dT1gvWd+1YfqGnRs+FYmKrhTbF5cVf9go3HjlG4dvyr+Z3JS0qavEuWTPZtJm6ebeLZ5bDpaql+aXDm4N2dq0Dd9WtO319kXbL5fNKNu7g7ZDuaO/PLi8ZafJzs07P1SkVPRU+lQ27tLdtWHX+G7R7ht7vPY07NXbW7z3/T7JvttVAVVN1WbVZftJ+7P3P66Jqun4lvttXa1ObXHtxwPSA/0HIw6217nU1R3SPVRSj9Yr60cOxx++/p3vdy0NNg1VjZzG4iNwRHnk6fcJ3/ceDTradox7rOEH0x92HWcdL2pCmvKaRptTmvtbYlu6T8w+0dbq3nr8R9sfD5w0PFl5SvNUyWna6YLTk2fyz4ydlZ19fi753GDborZ752PO32oPb++6EHTh0kX/i+c7vDvOXPK4dPKy2+UTV7hXmq86X23qdOo8/pPTT8e7nLuarrlca7nuer21e2b36RueN87d9L158Rb/1tWeOT3dvfN6b/fF9/XfFt1+cif9zsu72Xcn7q28T7xf9EDtQdlD3YfVP1v+3Njv3H9qwHeg89HcR/cGhYPP/pH1jw9DBY+Zj8uGDYbrnjg+OTniP3L96fynQ89kzyaeF/6i/suuFxYvfvjV69fO0ZjRoZfyl5O/bXyl/erA6xmv28bCxh6+yXgzMV70VvvtwXfcdx3vo98PT+R8IH8o/2j5sfVT0Kf7kxmTk/8EA5jz/GMzLdsAAAAgY0hSTQAAeiUAAICDAAD5/wAAgOkAAHUwAADqYAAAOpgAABdvkl/FRgAAADNJREFUeNpiYEAD/xGAASf4jwnwKmKAYkzFWBRhKsamCKoZRTEDNkVINsEVAwAAAP//AwCInYt1wXjidQAAAABJRU5ErkJggg==") no-repeat scroll 1.5rem center;
    display: inline-block;
    left: 50%;
    margin-bottom: 0.75rem;
    padding: 0.75rem 1.5rem 0.75rem 3rem;
    position: relative;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    transition: background-color .3s ease;
}

.back-to-top:active, .back-to-top:focus, .back-to-top:hover {
    text-decoration: underline;
}

/*------------------------------------*
\*------------------------------------*/
/*------------------------------------*    $BLOCK
\*------------------------------------*/
/*------------------------------------*    $GENERIC
\*------------------------------------*/
.block .block-content, .block .block-figure, .block .block-header {
    padding: 0.75rem 1rem;
    margin-left: 0 !important;
    margin-right: 0 !important;
    position: relative;
    padding-bottom: 0.375rem;
    padding-top: 0.375rem;
}

@media screen and (min-width: 48em) {
    .block .block-content, .block .block-figure, .block .block-header {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media screen and (min-width: 60em) {
    .block .block-content, .block .block-figure, .block .block-header {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media screen and (min-width: 60em) {
    .block .block-content, .block .block-figure, .block .block-header {
        width: 64.5833333333%;
        margin-left: 1.0416666667%;
        margin-right: 1.0416666667%;
        clear: none;
        float: left;
    }
}

@media screen and (min-width: 48em) {
    .block.img-left .block-content, .block.img-right .block-content {
        width: 47.9166666667%;
        margin-left: 1.0416666667%;
        margin-right: 1.0416666667%;
        clear: none;
        float: left;
    }

    .block.img-left .block-figure, .block.img-right .block-figure {
        width: 47.9166666667%;
        margin-left: 1.0416666667%;
        margin-right: 1.0416666667%;
        clear: none;
        float: left;
        margin-top: 0.375rem;
    }
}

.block.img-bottom, .block.img-top {
    /**/
}

/*------------------------------------*    $BLOCK
\*------------------------------------*/
@media screen and (min-width: 48em) {
    .section .block:nth-of-type(1):nth-last-of-type(2), .stage .block:nth-of-type(1):nth-last-of-type(2), .section .block:nth-of-type(2):nth-last-of-type(1), .stage .block:nth-of-type(2):nth-last-of-type(1) {
        width: 47.9166666667%;
        margin-left: 1.0416666667%;
        margin-right: 1.0416666667%;
        clear: none;
        float: left;
        clear: none;
    }

    .section .block:nth-of-type(1):nth-last-of-type(2) .block-content, .stage .block:nth-of-type(1):nth-last-of-type(2) .block-content,
    .section .block:nth-of-type(1):nth-last-of-type(2) .block-figure, .stage .block:nth-of-type(1):nth-last-of-type(2) .block-figure,
    .section .block:nth-of-type(1):nth-last-of-type(2) .block-header, .stage .block:nth-of-type(1):nth-last-of-type(2) .block-header, .section .block:nth-of-type(2):nth-last-of-type(1) .block-content, .stage .block:nth-of-type(2):nth-last-of-type(1) .block-content,
    .section .block:nth-of-type(2):nth-last-of-type(1) .block-figure, .stage .block:nth-of-type(2):nth-last-of-type(1) .block-figure,
    .section .block:nth-of-type(2):nth-last-of-type(1) .block-header, .stage .block:nth-of-type(2):nth-last-of-type(1) .block-header {
        width: 97.9166666667%;
        margin-left: 1.0416666667%;
        margin-right: 1.0416666667%;
    }
}

@media screen and (min-width: 60em) {
    .section .block:nth-of-type(1):nth-last-of-type(2), .stage .block:nth-of-type(1):nth-last-of-type(2), .section .block:nth-of-type(2):nth-last-of-type(1), .stage .block:nth-of-type(2):nth-last-of-type(1) {
        width: 47.9166666667%;
        margin-left: 1.0416666667%;
        margin-right: 1.0416666667%;
        clear: none;
        float: left;
    }
}

.block .block-figure {
    padding-bottom: 0;
    padding-top: 0;
}

.block .block-head {
    margin-bottom: 0;
}

@media screen and (min-width: 48em) {
    .block.img-left .block-content {
        float: right;
    }
}

@media screen and (min-width: 48em) {
    .block.img-right .block-figure {
        float: right;
    }
}

/*------------------------------------*
\*------------------------------------*/
/*------------------------------------*    $GOOGLE_MAPS
\*------------------------------------*/
#map-canvas {
    width: 97.9166666667%;
    margin-left: 1.0416666667%;
    margin-right: 1.0416666667%;
    height: 250px;
}

@media screen and (min-width: 48em) {
    #map-canvas {
        height: 400px;
    }
}

@media screen and (min-width: 60em) {
    #map-canvas {
        height: 400px;
    }
}

@media screen and (min-width: 73em) {
    #map-canvas {
        height: 500px;
    }
}

#map-canvas img {
    max-width: none;
}

#map-canvas .maps-infowindow {
    min-height: 140px;
}

/*------------------------------------*
\*------------------------------------*/
/*------------------------------------*    $MODAL
\*------------------------------------*/
/**
 * GENERIC.............................Variables/Placeholder
 * MASK................................Modals Background Container
 * MODAL...............................Modal Container
 * .....modal-dialog
 * MODAL-BAR...........................Modal Container Header
**/
/*------------------------------------*    $GENERIC
\*------------------------------------*/
/*------------------------------------*    $MASK
\*------------------------------------*/
.mask {
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(51, 51, 51, 0.9);
    height: auto !important;
    min-height: 100%;
    opacity: 0;
    transition: opacity .5s,
    visibility 0s .5s;
    visibility: hidden;
    width: 100%;
    z-index: 9999;
}

@media screen and (min-width: 60em) {
    .mask {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
}

.mask.open {
    opacity: 1;
    transition: opacity .5s;
    visibility: visible;
}

.mask.open .modal-dialog {
    opacity: 1;
}

.mask.close {
    opacity: 0;
    transition: opacity .8s,
    visibility 0s .8s;
}

.mask.close .modal-dialog {
    -webkit-transform: translateY(25%) rotateX(-15deg);
    transform: translateY(25%) rotateX(-15deg);
}

/*------------------------------------*    $MODAL
\*------------------------------------*/
.modal {
    background-color: rgba(255, 255, 255, 0.9);
    margin: 0 auto;
    max-width: 80rem;
    min-height: 100%;
    -webkit-perspective: 1200px;
    perspective: 1200px;
    position: relative;
}

.modal .modal-dialog {
    opacity: .4;
    padding: 6rem 1rem;
    transition: -webkit-transform .5s,
    opacity .5s;
    transition: transform .5s,
    opacity .5s;
}

@media screen and (min-width: 48em) {
    .modal {
        width: 81.25%;
        margin-left: 1.0416666667%;
        margin-right: 1.0416666667%;
        clear: none;
        float: left;
        display: block;
        float: none;
        margin: 0 auto;
        max-width: 800px;
    }
}

/*------------------------------------*    $MODAL-BAR
\*------------------------------------*/
.modal-bar {
    background-color: rgba(102, 102, 102, 0.9);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 99999;
}

@media screen and (min-width: 60em) {
    .modal-bar {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
}

.modal-bar .modal-close {
    background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6AQMAAADbddhrAAAABlBMVEX///////9VfPVsAAAAAXRSTlMAQObYZgAAAJ5JREFUeF49kcEJw0AQAyfk4Z8rOEgbC2kmJTgdpDSXcqUEhBg/jLjbm92V8PtEcHNFPG4m4vljRRxwRpzRwMotMKmHvN30d9HjoYUrmCAKO4Lp/bRxR9hlcZXOtB8rmECCgSOYgIZuEAywd8X3rnj/Kl5UBOOJNb6SI9lednceJ3Rmt3AvN3V33dAfHdNDXdVnnTcL0zEvEzRTUzb3P1RAKkF6ZufmAAAAAElFTkSuQmCC") no-repeat center center;
    color: transparent;
    cursor: pointer;
    float: right;
    height: 2rem;
    margin: 1rem;
    overflow: hidden;
    text-indent: 200%;
    width: 2rem;
}

/*------------------------------------*
\*------------------------------------*/
/*------------------------------------*    $NAVIGATION
\*------------------------------------*/
/**
 * GENERIC.............................Variables/Placeholder
 * NAV.................................Navigation
 * MENU................................Mobile Navigation
 *
**/
/**
 * Navigation mit Menu-Button für mobile Darstellung
 *
	<nav class="nav" id="nav" role="navigation">
		<a class="menu-btn" href="#nav" data-jmname="nav">Menu</a>
		<ul class="nav-items">
			<li class="nav-item"><a class="nav-link" href="#/Item-1">Item 1</a></li>
		</ul>
	</nav>
 *
**/
/*------------------------------------*    $GENERIC
\*------------------------------------*/
/*------------------------------------*    $NAV
\*------------------------------------*/
.nav {
    clear: none;
    font-family: "Michroma", "Helvetica", "Arial", sans-serif;
    font-size: 12px;
    margin-bottom: 0;
}

@media screen and (min-width: 60em) {
    .nav {
        background-color: #e3e3e3;
        clear: both;
        color: #046;
        margin-bottom: 1.125rem;
        position: static;
    }
}

.nav .nav-items {
    background-color: #e3e3e3;
    clear: both;
}

@media screen and (min-width: 60em) {
    .nav .nav-items {
        background-color: inherit;
        margin: 0 auto;
        position: relative;
    }
}

.nav .nav-item {
    -webkit-transform: translate3d(1000em, 0, 0);
    transform: translate3d(1000em, 0, 0);
    position: absolute;
    background-color: #e3e3e3;
    border-bottom: 1px solid #cdcdcd;
    transition: background-color .15s linear;
    z-index: 1;
}

@media screen and (min-width: 60em) {
    .nav .nav-item {
        border-bottom: 1px solid #e3e3e3;
        float: left;
        position: relative;
        -webkit-transform: none;
        transform: none;
    }

    .nav .nav-item:before {
        content: "";
        display: block;
        position: absolute;
        background-color: #cdcdcd;
        bottom: 0.75rem;
        top: 0.75rem;
        transition: bottom .15s linear,
        top .15s linear;
        width: 0px;
    }

    .nav .nav-item:first-child:before {
        background-color: inherit;
    }
}

.nav .nav-item:hover {
    background-color: #cdcdcd;
}

@media screen and (min-width: 60em) {
    .nav .nav-item:hover + .nav-item:before {
        bottom: 0;
        top: 0;
    }
}

.nav .nav-item.active .nav-link {
    color: #009ee3;
}

.nav .nav-link {
    padding: 0.75rem 1rem;
    color: #046;
    display: block;
    position: relative;
}

@media screen and (min-width: 48em) {
    .nav .nav-link {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media screen and (min-width: 60em) {
    .nav .nav-link {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

.nav.show-menu .nav-item {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    position: absolute;
    position: initial;
}

/*------------------------------------*    $MENU
\*------------------------------------*/
.menu-btn, .menu-close-btn, .nav.show-menu .menu-btn {
    position: absolute;
    top: -5rem;
    right: 1.0416666667%;
    color: #000;
    display: block;
    font-family: "Michroma", "Helvetica", "Arial", sans-serif;
    height: 2.5rem;
    line-height: 2.4rem;
    text-indent: -2.5rem;
    width: 2.5rem;
    z-index: 1;
}

@media screen and (min-width: 60em) {
    .menu-btn, .menu-close-btn, .nav.show-menu .menu-btn {
        display: none;
    }
}

.menu-btn:before, .menu-close-btn:before, .nav.show-menu .menu-btn:before {
    content: "";
    display: block;
    position: absolute;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    position: absolute;
    left: 50%;
    top: 50%;
    box-shadow: 0 0 0 2px #000, 0 8px 0 2px #000, 0 16px 0 2px #000;
    height: 0;
    width: 1rem;
    top: 30%;
}

.menu-close-btn:after, .nav.show-menu .menu-btn:after, .nav.show-menu .menu-close-btn:after, .menu-close-btn:before, .nav.show-menu .menu-btn:before, .nav.show-menu .menu-close-btn:before {
    content: "";
    display: block;
    position: absolute;
    background-color: #000;
    box-shadow: none;
    height: 3px;
    left: .5rem;
    right: .5rem;
    top: 45%;
    width: 60%;
}

.menu-close-btn:after, .nav.show-menu .menu-btn:after, .nav.show-menu .menu-close-btn:after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.menu-close-btn:before, .nav.show-menu .menu-btn:before, .nav.show-menu .menu-close-btn:before {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

/*------------------------------------*
\*------------------------------------*/
/*------------------------------------*    $STAGE-TEASER
\*------------------------------------*/
/**
 * GENERIC.............................Variables/Placeholder
 * STAGE-TEASER........................Stage-Teaser Element
**/
/**
 * Der "stage-teaser" findet sich als einleitendes Element einer Seite.
 * Innerhalb "stage-teaser" gibt es drei Elemente: "stage-teaser-img", "stage-teaser-head" und "stage-teaser-content".
 * "stage-teaser-img" ist das Keyvisual.
 * "stage-teaser-head" ist die Headline.
 * "stage-teaser-content" umfasst den restlichen Inhalt.
 *
	<div class="stage-teaser">
    </div>
 *
**/
/*------------------------------------*    $STAGE-TEASER
\*------------------------------------*/
.stage-teaser {
    /*overflow: hidden;*/
}

.stage-teaser .st-figure {
    /**/
}

@media screen and (min-width: 48em) {
    .stage-teaser .st-footer {
        position: absolute;
        bottom: 0.75rem;
    }
}

@media screen and (min-width: 60em) {
    .stage-teaser .st-head {
        margin-bottom: 0.75rem;
    }
}

.stage-teaser .st-header {
    /**/
}

.stage-teaser .st-inner {
    padding: 0.75rem 1rem;
}

@media screen and (min-width: 48em) {
    .stage-teaser .st-inner {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media screen and (min-width: 60em) {
    .stage-teaser .st-inner {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media screen and (min-width: 48em) {
    .stage-teaser .st-inner {
        position: absolute;
        top: 0;
        left: 0;
        width: 81.25%;
        margin-left: 1.0416666667%;
        margin-right: 1.0416666667%;
        clear: none;
        float: left;
        background-color: rgba(255, 255, 255, 0.75);
        margin: 1.5rem 1.5rem;
        padding: 1.5rem 1.5rem;
    }
}

@media screen and (min-width: 60em) {
    .stage-teaser .st-inner {
        width: 64.5833333333%;
        margin-left: 1.0416666667%;
        margin-right: 1.0416666667%;
        clear: none;
        float: left;
        margin: 1.5rem 1.5rem;
        padding: 0.75rem 1.5rem;
    }
}

@media screen and (min-width: 73em) {
    .stage-teaser .st-inner {
        width: 47.9166666667%;
        margin-left: 1.0416666667%;
        margin-right: 1.0416666667%;
        clear: none;
        float: left;
        margin: 1.5rem 1.5rem;
        padding: 0.75rem 1.5rem;
    }
}

.stage-teaser .st-main > p {
    margin-bottom: 0.375rem;
}

.stage-teaser .st-main > p:last-child {
    margin-bottom: 0;
}

/*------------------------------------*
\*------------------------------------*/
/*------------------------------------*	$TABS
\*------------------------------------*/
/**
 * GENERIC.............................Variables/Placeholder
 * .....%tab-active
 * .....%tab-control-checked
 * .....@for... (%tab-control-checked)
 * TABS................................Tab-Navigation
**/
/**
 * Registerkarten-Navigation
 *
	<div class="tabs">
		<input type="radio" id="tab1" name="tab" class="tab-control" checked />
		<label for="tab1" class="tab">$tab-label$</label>
		<input type="radio" id="tab2" name="tab" class="tab-control" />
		<label for="tab2" class="tab">$tab-label</label>
		<div class="tab-content">
			$tab-content$
		</div>
		<div class="tab-content">
			$tab-content$
		</div>
	</div>
 *
**/
/*------------------------------------*	$GENERIC
\*------------------------------------*/
.tabs > .tab:hover, .tabs > .tab-control:checked + .tab {
    bottom: 0;
}

.tab-control:nth-of-type(1):checked ~ .tab-content:nth-of-type(1) {
    display: block;
}

.tab-control:nth-of-type(2):checked ~ .tab-content:nth-of-type(2) {
    display: block;
}

.tab-control:nth-of-type(3):checked ~ .tab-content:nth-of-type(3) {
    display: block;
}

.tab-control:nth-of-type(4):checked ~ .tab-content:nth-of-type(4) {
    display: block;
}

.tab-control:nth-of-type(5):checked ~ .tab-content:nth-of-type(5) {
    display: block;
}

/*------------------------------------*	$TABS
\*------------------------------------*/
.tabs {
    background-color: #d6e6ee;
    border: 1px solid #d6e6ee;
    border-top: 0;
    padding-top: 0.375rem;
}

.tabs > .tab {
    background-color: #046;
    border-bottom: 1px solid #d6e6ee;
    color: #fff;
    position: relative;
    text-align: center;
    white-space: nowrap;
}

@media screen and (min-width: 48em) {
    .tabs > .tab {
        border: 0;
        bottom: -0.75rem;
        margin-left: 1px !important;
        margin-right: 0 !important;
        padding-bottom: 1.5rem;
        transition: bottom .3s ease-out;
    }
}

@media screen and (min-width: 29.75em) {
    .tabs > .tab:nth-of-type(1):nth-last-of-type(2), .tabs > .tab:nth-of-type(2):nth-last-of-type(1) {
        width: 47.9166666667%;
        margin-left: 1.0416666667%;
        margin-right: 1.0416666667%;
        clear: none;
        float: left;
    }
}

@media screen and (min-width: 48em) {
    .tabs > .tab:nth-of-type(1):nth-last-of-type(2), .tabs > .tab:nth-of-type(2):nth-last-of-type(1) {
        width: 39.5833333333%;
        margin-left: 1.0416666667%;
        margin-right: 1.0416666667%;
        clear: none;
        float: left;
    }
}

@media screen and (min-width: 60em) {
    .tabs > .tab:nth-of-type(1):nth-last-of-type(2), .tabs > .tab:nth-of-type(2):nth-last-of-type(1) {
        width: 31.25%;
        margin-left: 1.0416666667%;
        margin-right: 1.0416666667%;
        clear: none;
        float: left;
    }
}

@media screen and (min-width: 48em) {
    .tabs > .tab:nth-of-type(1):nth-last-of-type(3), .tabs > .tab:nth-of-type(2):nth-last-of-type(2), .tabs > .tab:nth-of-type(3):nth-last-of-type(1) {
        width: 31.25%;
        margin-left: 1.0416666667%;
        margin-right: 1.0416666667%;
        clear: none;
        float: left;
    }
}

@media screen and (min-width: 60em) {
    .tabs > .tab:nth-of-type(1):nth-last-of-type(3), .tabs > .tab:nth-of-type(2):nth-last-of-type(2), .tabs > .tab:nth-of-type(3):nth-last-of-type(1) {
        width: 31.25%;
        margin-left: 1.0416666667%;
        margin-right: 1.0416666667%;
        clear: none;
        float: left;
    }
}

@media screen and (min-width: 48em) {
    .tabs > .tab:nth-of-type(1):nth-last-of-type(4), .tabs > .tab:nth-of-type(2):nth-last-of-type(3), .tabs > .tab:nth-of-type(3):nth-last-of-type(2), .tabs > .tab:nth-of-type(4):nth-last-of-type(1) {
        width: 22.9166666667%;
        margin-left: 1.0416666667%;
        margin-right: 1.0416666667%;
        clear: none;
        float: left;
    }
}

@media screen and (min-width: 60em) {
    .tabs > .tab:nth-of-type(1):nth-last-of-type(4), .tabs > .tab:nth-of-type(2):nth-last-of-type(3), .tabs > .tab:nth-of-type(3):nth-last-of-type(2), .tabs > .tab:nth-of-type(4):nth-last-of-type(1) {
        width: 22.9166666667%;
        margin-left: 1.0416666667%;
        margin-right: 1.0416666667%;
        clear: none;
        float: left;
    }
}

@media screen and (min-width: 48em) {
    .tabs > .tab:nth-of-type(1):nth-last-of-type(5), .tabs > .tab:nth-of-type(2):nth-last-of-type(4), .tabs > .tab:nth-of-type(3):nth-last-of-type(3), .tabs > .tab:nth-of-type(4):nth-last-of-type(2), .tabs > .tab:nth-of-type(5):nth-last-of-type(1) {
        width: 18.75%;
        margin-left: 1.0416666667%;
        margin-right: 1.0416666667%;
        clear: none;
        float: left;
    }
}

.tabs > .tab:hover {
    background-color: #007bbb;
    color: #fff;
}

@media screen and (min-width: 48em) {
    .tabs > .tab:first-of-type {
        margin-left: 1.0416666667% !important;
    }
}

.tabs > .tab-content {
    background-color: #fff;
    clear: both;
    color: #333;
    display: none;
    padding-bottom: 0.75rem;
    padding-top: 0.75rem;
    position: relative;
}

.tabs > .tab-control {
    display: none;
}

.tabs > .tab-control:checked + .tab {
    background-color: #fff;
    color: #000;
}

/*------------------------------------*
\*------------------------------------*/
/*------------------------------------*    $TOGGLEBOX
\*------------------------------------*/
/**
 * Ein-/Auf-/Zuklapp Element
 *
	<div class="togglebox">
		<a class="tb-subject" data-jmname="togglebox">$toggletitle$</a>
		<div class="tb-content">
			$togglecontent$
		</div>
	</div>
 *
 * Die Togglebox wird mit einem umschließenden <div class="togglebox"> eingeleitet.
 * Innerhalb <div class="togglebox"> liegen auf gleicher Ebene zwei Elemente:
 *
 * <a class="tb-subject" data-jmname="togglebox">$toggletitle$</a>
 * Beschreibt den Titel der Togglebox bzw. den Link.
 * data-jmname="togglebox" weist das javascript an, das <div class="togglebox"> um die Klasse "show" zu erweitern
 * und somit den Inhalt zu <div class="tb-content"> ein- bzw. auszublenden.
 *
 * <div class="tb-content">
 * Alles was zum Content der Togglebox gehört wird hier eingefügt.
 *
**/
.togglebox .tb-content {
    background-color: #f2eee2;
    color: #000;
}

.togglebox .tb-subject {
    background-color: #046;
    color: #fff;
}

.togglebox .tb-subject:before {
    background-color: #007bbb;
}

.togglebox > .show > .tb-content {
    padding-bottom: 1.5rem;
    padding-top: 1.5rem;
}

.togglebox > .show > .tb-subject {
    background-color: #ba8;
    color: #fff;
}

.togglebox > .show > .tb-subject:before {
    background-color: #876;
}

/*------------------------------------*
\*------------------------------------*/
/*------------------------------------*	$FORM
\*------------------------------------*/
/**
 * FORM_GROUP..........................Groups "form-section"
 * FORM_SECTION........................Groups <label> & <input>
 * FORM_SET............................<fieldset class="form-set">
 * FORM_TEXT...........................Well-formed <p>
 * INPUT_GROUP.........................Group of Inputs
 * LABEL_TEXT..........................<label class="label-text">
 *
 	<form class="form">
 		<fieldset class="form-set">
			<header class="fs-header">
				<legend class="fs-head">Fieldset Headline</legend>
				<p class="byline">Fieldset Headline Byline</p>
			</header>
 			<div class="form-group">
 				<div class="form-section">
 					<label class="label-text">Input</label>
 					<input class="input-text" id="input" type="text" z-index="1" />
 				</div>
 			</div>
			<footer class="fs-footer">
				<button class="cta" type="submit" z-index="2">Submit</button>
			</footer>
 		</fieldset>
 	</form>
 *
**/
/*------------------------------------*	$FORM_GROUP
\*------------------------------------*/
.form-group {
    *zoom: 1;
    display: block;
    width: 102.083333333%;
    margin-left: -1.0416666667%;
    margin-right: -1.0416666667%;
    padding: 0.75rem 1rem;
    padding-bottom: 0;
    padding-top: 0;
}

.form-group:after, .form-group:before {
    content: "\0020";
    display: table;
}

.form-group:after {
    clear: both;
}

@media screen and (min-width: 48em) {
    .form-group {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media screen and (min-width: 60em) {
    .form-group {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media screen and (min-width: 60em) {
    .form-group {
        padding-left: 0;
        padding-right: 0;
    }
}

/*------------------------------------*	$FORM_SECTION
\*------------------------------------*/
.form-section, .form-section-l, .form-section-s, .form-section-xs, .form-text {
    margin-bottom: 0.75rem;
}

@media screen and (min-width: 60em) {
    .form-section, .form-section-l, .form-section-s, .form-section-xs, .form-text {
        width: 72.9166666667%;
        margin-left: 1.0416666667%;
        margin-right: 1.0416666667%;
        clear: none;
        float: left;
    }
}

.form-section {
    width: 97.9166666667%;
    margin-left: 1.0416666667%;
    margin-right: 1.0416666667%;
}

@media screen and (min-width: 60em) {
    .form-section {
        width: 72.9166666667%;
        margin-left: 1.0416666667%;
        margin-right: 1.0416666667%;
        clear: none;
        float: left;
    }
}

@media screen and (min-width: 48em) {
    .form-section:nth-of-type(1):nth-last-of-type(2), .form-section:nth-of-type(2):nth-last-of-type(1) {
        width: 47.9166666667%;
        margin-left: 1.0416666667%;
        margin-right: 1.0416666667%;
        clear: none;
        float: left;
    }
}

@media screen and (min-width: 60em) {
    .form-section:nth-of-type(1):nth-last-of-type(2), .form-section:nth-of-type(2):nth-last-of-type(1) {
        width: 35.4166666667%;
        margin-left: 1.0416666667%;
        margin-right: 1.0416666667%;
        clear: none;
        float: left;
    }
}

@media screen and (min-width: 60em) {
    .form-section:nth-of-type(1):nth-last-of-type(3), .form-section:nth-of-type(2):nth-last-of-type(2), .form-section:nth-of-type(3):nth-last-of-type(1) {
        width: 22.9166666667%;
        margin-left: 1.0416666667%;
        margin-right: 1.0416666667%;
        clear: none;
        float: left;
    }
}

@media screen and (min-width: 60em) {
    .form-section:nth-of-type(1):nth-last-of-type(4), .form-section:nth-of-type(2):nth-last-of-type(3), .form-section:nth-of-type(3):nth-last-of-type(2), .form-section:nth-of-type(4):nth-last-of-type(1) {
        width: 16.6666666667%;
        margin-left: 1.0416666667%;
        margin-right: 1.0416666667%;
        clear: none;
        float: left;
    }
}

@media screen and (min-width: 48em) {
    .form-section-l {
        width: 64.5833333333%;
        margin-left: 1.0416666667%;
        margin-right: 1.0416666667%;
        clear: none;
        float: left;
    }
}

@media screen and (min-width: 60em) {
    .form-section-l {
        width: 47.9166666667%;
        margin-left: 1.0416666667%;
        margin-right: 1.0416666667%;
        clear: none;
        float: left;
    }
}

@media screen and (min-width: 48em) {
    .form-section-s {
        width: 31.25%;
        margin-left: 1.0416666667%;
        margin-right: 1.0416666667%;
        clear: none;
        float: left;
    }
}

@media screen and (min-width: 60em) {
    .form-section-s {
        width: 22.9166666667%;
        margin-left: 1.0416666667%;
        margin-right: 1.0416666667%;
        clear: none;
        float: left;
    }
}

.form-section-xs {
    width: 47.9166666667%;
    margin-left: 1.0416666667%;
    margin-right: 1.0416666667%;
    clear: none;
    float: left;
}

@media screen and (min-width: 48em) {
    .form-section-xs {
        width: 22.9166666667%;
        margin-left: 1.0416666667%;
        margin-right: 1.0416666667%;
        clear: none;
        float: left;
    }
}

@media screen and (min-width: 60em) {
    .form-section-xs {
        width: 16.6666666667%;
        margin-left: 1.0416666667%;
        margin-right: 1.0416666667%;
        clear: none;
        float: left;
    }
}

/*------------------------------------*	$FORM_SET
\*------------------------------------*/
.form-set {
    *zoom: 1;
    background-color: #f2eee2;
    color: #000;
    position: relative;
}

.form-set:after, .form-set:before {
    content: "\0020";
    display: table;
}

.form-set:after {
    clear: both;
}

.form-set .fs-footer {
    padding: 0.75rem 1rem;
    clear: both;
    padding-bottom: 1.5rem;
}

@media screen and (min-width: 48em) {
    .form-set .fs-footer {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media screen and (min-width: 60em) {
    .form-set .fs-footer {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media screen and (min-width: 60em) {
    .form-set .fs-footer {
        width: 72.9166666667%;
        margin-left: 1.0416666667%;
        margin-right: 1.0416666667%;
        clear: none;
        float: left;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
    }

    .form-set .fs-footer .cta {
        width: auto;
    }
}

.form-set .fs-head {
    font-family: "Michroma", "Helvetica", "Arial", sans-serif;
}

.form-set .fs-header {
    padding: 0.75rem 1rem;
    background-color: #ba8;
    clear: both;
    color: #fff;
    margin-bottom: 1.125rem;
    width: 100%;
}

@media screen and (min-width: 48em) {
    .form-set .fs-header {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media screen and (min-width: 60em) {
    .form-set .fs-header {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media screen and (min-width: 48em) {
    .form-set .fs-header {
        padding-left: 1.75rem;
    }
}

@media screen and (min-width: 48em) and (min-width: 48em) {
    .form-set .fs-header {
        padding-left: 1.75rem;
    }
}

@media screen and (min-width: 48em) and (min-width: 60em) {
    .form-set .fs-header {
        padding-left: 2.625rem;
    }
}

@media screen and (min-width: 60em) {
    .form-set .fs-header {
        padding-left: 2rem;
    }
}

@media screen and (min-width: 60em) and (min-width: 48em) {
    .form-set .fs-header {
        padding-left: 2rem;
    }
}

@media screen and (min-width: 60em) and (min-width: 60em) {
    .form-set .fs-header {
        padding-left: 3rem;
    }
}

.form-set .fs-input {
    -webkit-transform: translate3d(0, 50%, 0);
    transform: translate3d(0, 50%, 0);
    position: relative;
}

.form-subset {
    border-bottom: 2px solid #fff;
    padding: 0.75rem 0 0.75rem;
}

.form-subset:first-of-type .fss-head {
    padding-top: 0.375rem;
}

.form-subset .fss-head {
    padding-left: 1.5rem;
    padding-bottom: 0;
    padding-top: 1.125rem;
}

@media screen and (min-width: 48em) {
    .form-subset .fss-head {
        padding-left: 1.5rem;
    }
}

@media screen and (min-width: 60em) {
    .form-subset .fss-head {
        padding-left: 2.25rem;
    }
}

/*------------------------------------*\s
	$FORM_TEXT
\*------------------------------------*/
.form-text {
    padding: 0.75rem 1rem;
    margin-left: 0 !important;
    margin-right: 0 !important;
    position: relative;
    clear: both;
    float: none;
    margin-bottom: 0;
    padding-top: 0;
}

@media screen and (min-width: 48em) {
    .form-text {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media screen and (min-width: 60em) {
    .form-text {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/*------------------------------------*	$INPUT_GROUP
\*------------------------------------*/
.input-group:nth-child(n+2) {
    border-top: 2px solid transparent;
    padding-top: 1.5rem;
}

/*------------------------------------*	$LABEL_TEXT
\*------------------------------------*/
.label-text {
    border: 1px solid transparent;
    padding-left: 0.75rem;
}

@media screen and (min-width: 48em) {
    .label-text .byline {
        display: inline;
    }
}

/*------------------------------------*
\*------------------------------------*/
/*------------------------------------*	$INPUT
\*------------------------------------*/
/**
 * GENERIC.............................Variables/Placeholder
 * INPUT_SELECT........................<select class="input-selct">
 * INPUT_TEXT..........................<input class="input-text" />
 * INPUT_TEXTAREA......................<textarea class="input-textarea">
**/
/*------------------------------------*	$GENERIC
\*------------------------------------*/
.error.input-select, .error.input-text, .error.input-textarea {
    border-color: #f00;
}

.valid.input-select, .valid.input-text, .valid.input-textarea {
    border-color: #00b900;
}

/*------------------------------------*	$INPUT_SELECT
\*------------------------------------*/
/*------------------------------------*	$INPUT_TEXT
\*------------------------------------*/
/*------------------------------------*	$INPUT_TEXTAREA
\*------------------------------------*/
.input-textarea {
    height: auto;
    padding-bottom: 0.375rem;
    padding-top: 0.375rem;
}

@media screen and (min-width: 48em) {
    .input-textarea {
        padding-right: 2rem;
    }
}

/*------------------------------------*
\*------------------------------------*/
/*------------------------------------*    $INPUT_OPTIONS
\*------------------------------------*/
/**
 * GENERIC.............................Variables/Placeholder
 * .....%label-option
 * INPUT_OPTION........................<input type="checkbox/radio" />
 * INPUT_CHECKBOX......................Custom Checkbox
 * .....checkbox
 * .....checkbox-stable
 * INPUT_RADIO.........................Custom Radiobutton
 * .....radiobutton
 * .....radiobutton-stable
**/
/*------------------------------------*    $GENERIC
\*------------------------------------*/
.checkbox .error-msg, .checkbox-stable .error-msg, .radiobutton .error-msg, .radiobutton-stable .error-msg {
    position: absolute;
    bottom: 0;
    left: -0.5rem;
}

.checkbox .error-msg + .label-text, .checkbox-stable .error-msg + .label-text, .radiobutton .error-msg + .label-text, .radiobutton-stable .error-msg + .label-text {
    margin-bottom: 1.5rem;
}

/*------------------------------------*    $INPUT_OPTION
\*------------------------------------*/
.input-option {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    outline: 0;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
}

.input-option ~ .label-text {
    min-height: 3.2352941176rem;
    padding: 0.8744038156rem 0 0 2.6531141869rem;
}

.input-option ~ .label-text:after {
    content: "";
    display: block;
    position: absolute;
    top: 1.0579075921rem;
    left: 0.3918176267rem;
    background-color: #fff;
    border: 1px solid #fff;
    height: 1.1194789334rem;
    transition: background-color 0.3s ease-in-out;
    width: 1.1194789334rem;
}

.input-option ~ .label-text:before {
    content: "";
    display: block;
    position: absolute;
    top: 0.6660899654rem;
    left: 0;
    background-color: #fff;
    border: 1px solid #fff;
    height: 1.9031141869rem;
    transition: border-color 0.3s ease-in-out;
    width: 1.9031141869rem;
}

.input-option:focus ~ .label-text:before {
    border-color: #e1b500;
}

/*------------------------------------*    $CHECKBOX
\*------------------------------------*/
.checkbox .input-option:checked ~ .label-text:after, .checkbox-stable .input-option:checked ~ .label-text:after {
    background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAJCAYAAAALpr0TAAAAJElEQVQYlWNgIA78J1YRQYU0VoQugNMkZAmC1v0nRhEuJ6AAAPkhE+0fnheMAAAAAElFTkSuQmCC") no-repeat scroll center center;
}

.checkbox-stable {
    cursor: initial;
    position: relative;
}

/*------------------------------------*    $RADIOBUTTON
\*------------------------------------*/
.radiobutton .label-text:after, .radiobutton-stable .label-text:after {
    border-radius: 50%;
}

.radiobutton .label-text:before, .radiobutton-stable .label-text:before {
    border-radius: 50%;
}

.radiobutton .input-option:checked ~ .label-text:after, .radiobutton-stable .input-option:checked ~ .label-text:after {
    background-color: #000;
}

.radiobutton-stable {
    cursor: initial;
    position: relative;
}

/*------------------------------------*
\*------------------------------------*/
/*------------------------------------*	$VALIDATION
\*------------------------------------*/
/**
 * Error...............................Display Errors
 * .....error-msg
**/
/*------------------------------------*	$ERROR
\*------------------------------------*/
.error-msg {
    color: #f00;
    padding-left: 0.75rem;
}

/*------------------------------------*
\*------------------------------------*/
/*------------------------------------*    $DEBUG
\*------------------------------------*/
/*------------------------------------*
\*------------------------------------*/
/*# sourceMappingURL=style.css.map */



#cookie {
    box-sizing: border-box;
}

.cookie-mask {
    z-index: 10;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(51,51,51,.9);
}
.cookie {
    position: relative;
    max-width: 80%;
    margin: 0 auto;
    width: 100%;
    padding: 32px;
    color: #000;
    background-color: #fff;
}

.cookies-content {
    display: block;
    position: relative;
    margin: 0 auto;
    max-width: 800px;
}

.text {
    margin-bottom: 8px;
}

.cookie > .btn {
    width: 120px;
    margin: 32px auto 16px;
}

.cookie h2 {
    text-align: center;
}

@media (max-width: 1200px) {
  .cookie {
    padding-top: 30px;
    padding-bottom: 30px;
    line-height: inherit;
    height: auto;
  }
  .cookie #description {
    width: 100%;
  }

  .cookie #accept {
    width: 100%;
    margin-top: 15px;
  }
}

.image-teaser {
    max-height: 280px;
}

.image-teaser-alt {
    max-height: 150px;
}

.cert-image {
    border: 1px solid black;
    max-height: 275px;
}

.button-group {
    display: flex;
}

.button-group > .btn {
    width: 160px;
    margin: 32px auto 16px;
}

.award-section {
    background-color: #D6E6EE;
    padding: 2rem 0;
    margin-bottom: 4.5rem;
}

.awards {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    padding: 0 1.5rem;

    @media screen and (min-width: 650px) {
        gap: 3rem;
    }
}

.awards .a-item {
    width: calc(50% - 1rem);

    @media screen and (min-width: 650px) {
        width: calc(20% - 3rem);
    }
}

.awards .a-item img {
    width: 100%;
}

.teaser-intro > .t-figure{
    text-align: left;
}

.teaser-intro > .t-inner > .t-caption {
    font-size: 11px;
    color: #007bbb
}

.teaser-intro > .t-inner > .t-header {
    font-size: 18px;
    color: #007bbb;
    line-height: 20px;
}

.teaser-intro > .t-inner > .t-content-header {
    font-size: 14px;
    color: #007bbb;
    font-weight: 700;
}

.teaser-intro > .t-inner > .t-content {
    font-size: 13px;
}

.page-constrained-section-bg-blue {
    background-color: #D6E6EE;
}

.teaser .t-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.teaser {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.teaser .t-figure {
    text-align: center;
}

.teaser .t-main {
    flex: 1 1 auto;
}

.teaser .t-footer {
    margin-top: 1.5rem;
}

.highlights {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 3.5rem;
}

.highlights .teaser {
    width: 100%;
    margin-bottom: 2.5rem;

    @media screen and (min-width: 375px) {
        width: calc((100% / 2) - 1.5rem);
    }

    @media screen and (min-width: 768px) {
        width: calc((100% / 5) - 1.5rem);
    }
}