/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    font-size: 14px;
    color: #4b4b4d;
}

html, body {
    font-size: 14px;
    line-height: 1.4;
    /*-webkit-font-smoothing: subpixel-antialiased;*/
    -webkit-font-smoothing: antialiased;
}
html {
    overflow-y: scroll;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */

audio,
canvas,
img,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browse Happy prompt
   ========================================================================== */

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Links
   ========================================================================== */

a, form .line > label { text-decoration:none; -webkit-transition: all 0.2s ease-out 0s; -moz-transition: all 0.2s ease-out 0s; -o-transition: all 0.2s ease-out 0s; transition: all 0.2s ease-out 0s; }
#content a { color: #4b4b4d; text-decoration: underline; }
#content a:visited { color: #4b4b4d; }
#content a:hover { color: #4b4b4d; opacity: 0.5; }
#content a:focus { color: #4b4b4d; }

/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active, a:focus { outline: 0; }

/* ==========================================================================
   Overwrite Bootstrap defaults
   ========================================================================== */

.container                                      { width: 1050px; padding-right: 34px; padding-left: 34px; }
.container .row                                 { margin-left: -34px; margin-right: -34px; }
.container .row .grid                           { padding-left: 34px; padding-right: 34px; overflow: hidden; }
.container .row.grid-bottom-padding > .grid     { padding-bottom: 10px; }

nav > ul                                        { margin: 0; padding: 0; list-style-type: none; }
nav > ul > li                                   { display: block; }
nav > ul > li > a                               { display: block; }
nav.horizontal-nav > ul > li                    { float: left; }

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/* typo */

h1, h2, h3, h4, h5, h6, p, a, li, span, td, th,
html, body                                      { margin-top: 0; font-family: 'Open Sans', Arial, sans-serif; }

h1                                              { font-size: 21px; line-height: 1.4; margin-bottom: 15px; font-weight: bold; }
h2 { font-size:18px; }
h3 { font-size:14px; font-weight:bold; }
h4                                              { font-size: 21px }
#content p, #content ul, #content ol            { margin-bottom: 14px; }
#content a                                      { color:; text-decoration: underline; }
.spacer-span                                    { display: inline-block; width:25px; }
/*
h3                                              { font-size: 15px; font-weight: bold; color: #0095e5; margin-bottom: 0; }
footer p,
#content p,
#content li,
#content td,
#content th                                     { font-size: 15px; font-weight: 300; }
#content th                                     { font-weight: bold; }
.text-wrapper                                   { padding-right: 20px; }
*/


/* layout */

body                            { background: no-repeat center top; background-attachment: fixed; }

#content                        { margin-top: 20px; }
#content > .container           { background-color: rgba(255,255,255,0.9); }
.content-side-left              { width: 749px; min-height: 400px; padding-bottom: 30px; }
.content-side-right             { width: 301px; border-left: 1px solid #1e252b; min-height: 512px; margin-bottom: 42px; }
.content-side-right img         { display: block; margin-bottom: 16px; }

/* header */

header > .container             { height: 163px; background-color: rgba(111,113,118,0.9); }
.logo                           { float: left; }
.logo a                         { display: block; height: 163px; width: 216px; background: url('../img/logo.png') no-repeat left top transparent; }

.helplinks                      { float: right; height: 52px; width: 644px; padding-top: 24px; text-align:right; padding-right: 10px; }
.helplinks a                    { font-size: 10px; text-transform: uppercase; text-decoration: none; color: #fff; }
.helplinks a:hover,
.helplinks a:active,
.helplinks a:focus              { color: #fff; text-decoration: underline; }
.trennlinie                     { display: inline-block; margin: 0 8px; height: 7px; background-color: white; width: 1px; }

.facebook-link                  {  background: url('../img/facebook_icon.jpg') no-repeat left center; padding-left: 23px; }
.linkedin-link                  {  background: url('../img/linkedin.png') no-repeat left center; padding-left: 70px; }

.link-social-media img{
    width: 20px;
}
.link-social-media{
    text-decoration: none!important;
}

#menu-icon,
#nav-mobile{
    display: none;
}

/* nav */

nav                             { clear: right; display: block; float: right; margin-top: 61px; }
nav > ul > li                   { margin-left: 25px; padding-bottom: 11px; }
nav > ul > li > a               { color: #fff; display: block; height: 21px; line-height: 21px; padding:0 10px; }
nav > ul > li:hover > a,
nav > ul > li > a.active,
nav > ul > li > a:hover,
nav > ul > li > a:focus,
nav > ul > li > a:active        { background-color: #aa022b; text-decoration: none; color: #fff; }

nav > ul > li > ul              { background-color: #1E242B; display: none; left: 0; list-style: none outside none; position: absolute; top: 145px; width: 100%; z-index: 10; }
nav > ul > li:hover > ul        { display: block; }
nav > ul > li.has-children:hover { background: url('../img/nav_li_bg.png') no-repeat center bottom; }

nav > ul > li > ul > li         { width: 25%; float: left; padding: 0 35px; }
nav > ul > li > ul > li > a     { display: block; min-height: 64px; border-bottom: 1px dotted #fff; color: #fff; text-transform: uppercase; padding-top: 19px; }

nav > ul > li > ul > li > ul    { list-style-type: none; padding: 2px 0 22px; margin: 0; }
nav > ul > li > ul > li > ul > li > a { display: block; min-height: 28px; line-height: 18px; padding: 5px 0 5px 14px; font-size: 14px; color: #fff; background: url('../img/subnav_li_bg.png') no-repeat left top; }

nav > ul > li > ul a.active,
nav > ul > li > ul a:hover,
nav > ul > li > ul a:focus,
nav > ul > li > ul a:active     { opacity: 0.6; color: #fff; text-decoration: none; }

/* breadcrumb */

.breadcrumb                     { background-color: transparent; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; margin: 18px 0 12px; padding: 0 0; font-size: 11px; text-transform: uppercase; color: #000; }
.breadcrumb > .active           { color: #000; }
#content .breadcrumb a          { text-decoration: none; }


/* form */

form                            { margin-bottom: 28px; }
form .line                      { width: 50%; padding: 0 0 14px 14px; float: left; position: relative; }
form .line:nth-child(odd)       { padding: 0 14px 14px 0; }
form .line.textarea             { width: 100%; padding: 0 0 14px 0; }
form .line.captcha              { padding: 0 14px 14px 0; }

form .line input,
form .line textarea,
form .line select               { width: 100%; padding: 9px; border: 1px solid #1f252b; height: 40px; }
form .line select               { padding: 0 0 0 9px; line-height: 38px; }
form .line textarea             { height: 190px; }
form .line > label              { display: none; }

@-moz-document url-prefix() {
    form .line select {
        padding: 9px 5px;
    }
}

div.fancy-select-container                      { background-color: #fff; cursor: pointer; border: 1px solid #1F252B; font-size: 14px; height: 40px; padding: 9px; width: 100%; position: relative; }
div.fancy-select-label                          {}
div.fancy-select-clickable                      { display: block; }
div.fancy-select-picture                        { width: 38px; height: 38px; position: absolute; top:0; right:0; line-height: 38px; text-align: center; font-size: 24px; padding-top: 9px; background-color: #ac0027; color: #fff; }
div.is-selectable                               { padding: 3px 9px; border-bottom: 1px solid #1F252B; }
div.is-selectable p                             { margin: 0 !important; }
div.is-selectable.active,
div.is-selectable:hover,
div.is-selectable:focus                         { background: #ac0027; color:#FFFFFF; cursor: pointer;}
div.fancy-select-container p                    { margin: 0; }
div.fancy-select-selectable-box                 { background: none repeat scroll 0 0 #F2F1F1; border-left: 1px solid #1F252B; border-right: 1px solid #1F252B; left: -1px; position: absolute; top: 39px; width: 327px; z-index: 6000; }

.fuer div.fancy-select-selectable-box           { width: 326px; }


/*
form .line:nth-child(odd) > label { left: 0px; }
form .line input:focus + label,
form .line textarea:focus + label { opacity: 0; }
*/

button                          { background-color: #1D252A; border: 0 none; border-radius: 0; color: #FFFFFF; display: inline-block; font-size: 14px; font-weight: bold; height: 38px; line-height: 38px; padding: 0 30px; }
.button.send                    { text-align: right; }

::-webkit-input-placeholder { color: #000; opacity: 1; }
::-moz-placeholder { color: #000; opacity: 1; }
:-ms-input-placeholder { color: #000; opacity: 1; }
input:-moz-placeholder { color: #000; opacity: 1; }


.bf_message                     { color: #FFFFFF; margin-bottom: 28px; padding: 10px; }
#content .bf_message p          { margin-bottom: 0; }
#content .bf_message ul         { margin-top: 13px; }
.bf_message.error               { background-color: #FF5454; }
.bf_message.success             { background-color: #37eb37; }

/* footer */

footer p { color: #000; font-size: 11px; text-align: right; margin-top: 5px; margin-bottom: 30px; }
footer a { color: #000; }
footer a:hover,
footer a:active,
footer a:focus { color: #000; opacity: 0.5; text-decoration: none; }


/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Allowing overflow to be displayed
 */

.overflow-visible {
    overflow: inherit !important;
}

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

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

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

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

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

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

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

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

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

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

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

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

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