/*
Theme Name: SKS-Germany beta
Theme URI: 
Author: JOM
Author URI: http://www.jomhh.de
Version: 1.0
Text Domain: jom_sks
*/

/* 1.0 Resets -------------------------------------------------*/

* { box-sizing: border-box; }

a {
    text-decoration: none;
}

    a img {
        border: none;
    }

    a:visited {
        color: #222;
    }

    a:focus {
        outline: none !important;
    }

    a:active {
        outline: none !important;
    }

h1, h2, h3 {
    font-family: "Open Sans Condensed",Arial,sans-serif;
    text-transform: uppercase;
    color: #000;
}

h1 {
    font-size: 35px;
    margin-top: 0;
    margin-bottom: 0px;
    color: #ee7203;
}

h2, .subline {
    font-size: 25px;
    text-transform: uppercase;
    font-family: 'Open Sans Condensed', Arial, sans-serif;
    font-weight: 300;
    margin-bottom: 30px;
    display: block;
}

.subline {
    margin-top: -8px;
}

@media(min-width:480px) {
    h1 {
        font-size: 36px;
    }

    h2, .subline {
        font-size: 30px;
    }
}

/* 2.0 Grundelemente ------------------------------------------------*/
html {
    -ms-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    overflow-y: scroll !important; /* zeige immer den scroll balken */
}

html.start, body.start { height: 100%; }

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    color: #222;
    background-attachment: fixed overflow-x:hidden;
    min-width: 320px;
}

.touch html.menue-offen {
    /* overflow:hidden; */
}

.touch body.menue-offen {
    /*
   overflow:hidden;  /* Wenn Schiebemenü geöffnet wird, verbiete Scrollen */
    /* height:100%;    */
}

.buehne, .buehne-abstand {
    min-width: 300px;
    /*max-width: 960px;*/
    margin: 0 auto;
    position: relative;
    padding: 0 20px;
    text-align: center;
}

@media(min-width:725px) {

    .buehne, .buehne-abstand {
        padding: 0 10px;
    }
}

.buehne.unrelativ {
    position: static;
}

.buehne-abstand {
    padding: 0 10px;
}

.inhalt {
    padding-top: 170px;
}

@media (min-width: 725px) {

    .inhalt {
        padding-top: 85px;
    }
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    margin: 0;
}

.weiterlesen-pfeil-klein {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url('images/weiterlesen-news.png');
    background-repeat: no-repeat;
    position: relative;
    top: 2px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

/* 2.1 Positionierung ----------------------------------------------------*/
@media (min-width:725px) {
    *[class*="spa"] .pos-lb {
        position: absolute;
        bottom: 0px;
        left: 10px;
    }

    *[class*="spa"] .pos-rb {
        position: absolute;
        bottom: 0px;
        right: 10px;
    }
}

/* 3.0 Hintergründe --------------------------------------------------------*/

.hg-black {
    background-color: #000;
}

/* x.0 Hintergrund  ----------------------------------------------------------*/
.hg-unterseite {
    background-color: #fff;
    background-image: url( 'images/hg-unterseite.png' );
    background-size: 100% auto;
    background-position: center 70%;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.hg-start {
    background-color: #000;
    background-image: url( 'images/hg-start-mobile.jpg' );
    /* background-size:100% auto;   */
    background-position: center 135px;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

@media (min-width: 725px) {

    .hg-start {
        /* background-attachment: scroll;  */
        background-image: url( 'images/hg-start.jpg' );
        background-position: top center;
    }
}

@media (max-height:320px) {
    .hg-start {
        background-position: center 85px;
    }
}

/* 4.0 Footer und mobiles Submenu

------------------------------------------------------------------------------*/

/* 4.1 Footer

  ----------------------------------------------------------------------------*/

#footer .buehne {
    position: static;
    padding: 0 20px !important;
}



#footer {
    background: #ee7203;
    min-height: 30px;
    margin-top: 20px;
}



    #footer ul.sitemap {
        list-style: none;
        /*text-align: center;*/
        color: #FFF;
        line-height: 32px;
        font-size: 18px;
        margin: 15px 0;
        padding: 0;
        text-transform: uppercase;
    }

    #footer ul li a {
        color: #FFF;
    }

        #footer ul li a:hover {
            color: #222;
        }

    #footer .katalog-bild, #footer .marker-bild {
        display: none;
    }


@media (min-width: 725px) {

    .mobile-haendlersuche {
        display: none;
    }

    #footer {
        background: transparent;
        height: 103px;
        position: fixed;
        z-index: 1;
        width: 100%;
        bottom: 10px;
        padding: 0;
        color: #fff;
        margin-top: 0;
        -webkit-backface-visibility: hidden;
    }

        #footer h2, h3 {
            font-family: 'Open Sans', sans-serif;
            font-weight: 300;
            font-size: 18px;
            margin-top: 0;
            margin-bottom: 5px;
        }

        #footer .hg-footer {
                height: 80px;
                position: relative;
                /*margin: 0;*/
                width: 100%;
                display: block;
                padding: 10px 10px 5px 8px;
                background-color: #FFF;
        }

        #footer .buehne:before {
            content: "";
            position: absolute;
            width: 100%;
            height: 50px;
            /*background-image: url('images/hg-fussmenue.png');
            background-repeat: repeat-x;*/
            margin-left: 10px;
        }


    body.hg-unterseite #footer:before {
        content: "";
        position: absolute;
        width: 100%;
        height: 264px;
        bottom: -20px;
        background-image: url('http://www.sks-germany.com/inhalte/themes/sks/img/hg/hg-fussmenue-weiss.png');
        pointer-events: none;
        background-repeat: repeat-x;
    }

    #footer .hg-footer:before {
        content: "";
        top: 0;
        left: -23px;
        /*position: absolute;
        background: url('images/navi-hg-footer.png');
        background-size: auto 100%;*/
        /*background-repeat: no-repeat;
        display: inline-block;
        width: 34px;
        height: 103px;*/
    }



    #footer .katalog-bild {
        display: block;
        margin-top: 0px;
        width: 50%;
        float: left;
        margin-right: 15px;
    }

    #footer .marker-bild {
        display: block;
        float: left;
        margin-right: 10px;
    }

    #footer ul.sitemap {
        margin: 0;
        font-size: 13px;
        line-height: 16px;
        /*text-align: right;*/
    }
}



@media (min-width:810px) {

    #footer .katalog-bild {
        width: 100px;
    }
}



@media (min-width:865px) {

    #footer .katalog-bild {
        display: block;
        margin-top: -32px;
        float: left;
        width: auto;
        margin-right: 15px;
    }
}

@media (max-width: 725px) {
    .contentCss {
        margin-left: 0;
        margin-bottom: 20px;
        padding-top: 150px
    }

    .no-touch select {
        display: inline-block !important;
    }

    .no-touch .ui-selectmenu {
        display: none !important;
    }
}

@media (min-width:725px) {
    .no-touch select {
        display: none !important;
    }

    .no-touch .ui-selectmenu {
        display: inline-block !important;
    }
}


@media (max-height:320px) {
    .sub-menu-mobile {
        /* position:absolute; */
        left: 0;
        /* top:85px;     */
        /*   display:table; */ /* android fix  omg */
    }
}


/* 4.2.2 Haendlersuche-Formular im festen Footer 
    --------------------------------------------------------------------------*/

@media (min-width: 725px) {
    .sub-menu-mobile .haendler-formular {
        background: #5b5b5a;
        height: auto;
        top: auto;
        position: relative;
        padding: 0;
        display: block;
    }

    .sub-menu-mobile {
        position: static;
        background: transparent;
        height: auto;
    }

        .sub-menu-mobile .haendler-formular {
            background: transparent;
        }

    #footer .d-katalog {
        display: block;
        padding-left: 30px;
    }

    /* --- TF war am Werk --- */

    #sprachwahl-button {
        border-radius: 6px 6px 0 0;
    }

    #sprach-selektor .ui-state-active .ui-selectmenu-status {
        color: #EE7203;
    }

    #sprachwahl-menu li {
        border-top: 1px solid #FFF;
    }

    .ui-selectmenu-menu li a {
        font-weight: 600;
    }

    .ui-corner-bottom {
        border-radius: 0 0 6px 6px;
    }

    #haendlerwahl-menu li {
        border-top: 1px solid #FFF;
    }

}

/*----- 5.0 Seitenmenü / Schiebemenü -----*/
.schiebe-menue {
    background: transparent;
    position: fixed;
    width: 315px;
    height: 100%;
    top: 0;
    z-index: 99999;
    /*left: 0;*/
    -webkit-overflow-scrolling: touch;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
    transform: translateZ(0);
    height: 100%;
    margin-top: 84px; /*TODO: Löschen*/
    margin-left: 1.5%;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
    border-radius: 7px;
    max-height: 95% !important;
    overflow-y: auto;
}

.schiebe-menue > .toggler {
    -webkit-border-top-right-radius: 4px;
    -webkit-border-bottom-right-radius: 4px;
    -moz-border-radius-topright: 4px;
    -moz-border-radius-bottomright: 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.toggler {
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, .15);
    width: 20px;
    height: 48px;
    position: absolute;
    margin-left: 295px;
    padding-top: 20px;
    cursor: pointer;
    background-color: #000;
    cursor: pointer;
}
    .toggler > .glyphicon { color: #FFF;    }

.schiebe-menue .menue-offen {
    width: 320px !important;
}

.csstransforms3d .schiebe-menue.menue-offen {
    /*left:0px;*/
    left: -220px;
    transform: translateX(220px);
    -webkit-transform: translateX(220px);
    -webkit-overflow-scrolling: touch;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.schiebe-menue #scroller {
    width: 280px;
    height: 100%;
    overflow: hidden;
    z-index: 10001;
    padding-top: 20px;
}

#scroller {
    position: absolute;
    z-index: 20;
}

#scroller #scroller-inner {
    width: 100%;
    height: 100%;
    overflow: auto;
    padding-left: 20px;
}
a.startseiten-link {
    color: #ee7203 !important;
    text-decoration: none;    
    padding-bottom: 30px;
    background-color: #000;
    padding-left: 30px;
    padding-top: 30px;
}

ul#seiten-menu {
    max-width: 268px;
    overflow: hidden;
}

    ul#seiten-menu, ul#seiten-menu ul {
        list-style: none;
        padding: 0;
    }

        ul#seiten-menu a, a.startseiten-link {
            display: block;
            text-decoration: none;
            font-weight: 600;
            text-transform: uppercase;
            font-size: 17px;
        }

        ul#seiten-menu > li > ul {
            padding-left: 20px;
        }

        ul#seiten-menu > li a {
            color: #ee7203;
        }

        ul#seiten-menu > li ul li a {
            color: #fff;
        }

        ul#seiten-menu > li ul li ul li a {
            color: #999;
        }

        ul#seiten-menu > li.abstand {
            margin-bottom: 20px;
        }





        ul#seiten-menu ul {
            margin-bottom: 20px;
        }

ul li ul li {
    color: #fff;
}

/* Aktive Menupunkte mit Pfeil markieren */
ul#seiten-menu li.menu-item > a:hover:before,
ul#seiten-menu li.current-menu-item > a:before {
    content: "\f345";
    font-family: dashicons;
    position: absolute;
    -webkit-transform: translate(-18px,4px);
    -moz-transform: translate(-18px,4px);
    -ms-transform: translate(-18px,4px);
    -o-transform: translate(-18px,4px);
    transform: translate(-18px,4px);
    color: #FFF;
    -webkit-animation: pfeil 0.7s infinite;
    -moz-animation: pfeil 0.7s infinite;
    -ms-animation: pfeil 0.7s infinite;
    -o-animation: pfeil 0.7s infinite;
    animation: pfeil 0.7s infinite;
}

ul#seiten-menu li.menu-item > a:hover:before {
    color: #EE7203;
}

ul#seiten-menu li.current-menu-ancestor > a:before,
ul#seiten-menu li.current-page-ancestor > a:before {
    display: none;
}

ul#seiten-menu li.current-menu-ancestor > a:hover:before,
ul#seiten-menu li.current-page-ancestor > a:hover:before {
    display: block;
}

@keyframes pfeil {
    0% {
        -webkit-transform: translate(-18px,4px);
        -moz-transform: translate(-18px,4px);
        -ms-transform: translate(-18px,4px);
        -o-transform: translate(-18px,4px);
        transform: translate(-18px,4px);
    }

    50% {
        -webkit-transform: translate(-28px,4px);
        -moz-transform: translate(-28px,4px);
        -ms-transform: translate(-28px,4px);
        -o-transform: translate(-28px,4px);
        transform: translate(-28px,4px);
    }

    100% {
        -webkit-transform: translate(-18px,4px);
        -moz-transform: translate(-18px,4px);
        -ms-transform: translate(-18px,4px);
        -o-transform: translate(-18px,4px);
        transform: translate(-18px,4px);
    }
}

@-webkit-keyframes pfeil {
    0% {
        -webkit-transform: translate(-18px,4px);
        transform: translate(-18px,4px);
    }

    50% {
        -webkit-transform: translate(-28px,4px);
        transform: translate(-28px,4px);
    }

    100% {
        -webkit-transform: translate(-18px,4px);
        transform: translate(-18px,4px);
    }
}


.csstransforms3d .seiten-menu-button {
    /*
    transform:translateZ(0);
  -webkit-transform:translateZ(0);   */
}
.seiten-menu-button {
        display: none;       
    }

/* 6.0 Obere Navigation   ------------------------------------------*/
.customize-support nav#obere-navigation {
    top: 32px;
}

nav#obere-navigation {
    height: 85px;
    padding: 10px 0;
    background: #000;
    position: fixed;
    z-index: 9999;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -o-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1;
    top: -1px;
    left: 0;
    width: 100%;
    font-family: 'Open Sans Condensed', sans-serif;
}

    nav#obere-navigation > .buehne {
        padding-left: 10px;
        padding-right: 20px;
    }

    nav#obere-navigation:before {
        content: "";
        line-height: 65px;
        height: 65px;
        position: absolute;
        margin: 0;
        padding: 0;
        background: #ee7203;
        width: 50%;
        display: block;
    }

    nav#obere-navigation .hg {
        float: left;
        line-height: 65px;
        height: 65px;
        position: relative;
        margin: 0;
        padding: 0;
        background: #ee7203;
        width: 85%;
        display: block;
        margin: 0 auto;
    }

    nav#obere-navigation ul.haupt, nav#obere-navigation ul.neben {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    nav#obere-navigation ul.neben {
        margin-left: 0px;
        float: right;
    }

        nav#obere-navigation ul.haupt li, nav#obere-navigation ul.neben > li {
            float: left;
        }

            nav#obere-navigation ul.haupt li a, nav#obere-navigation ul.neben > li > a {
                color: #fff;
                text-decoration: none;
                text-transform: uppercase;
                font-size: 19px;
                font-weight: bold;
                margin: 0 10px;
            }



            nav#obere-navigation ul.haupt li:first-child a {
                margin-left: 0px;
            }

            nav#obere-navigation ul.haupt li a {
                position: relative;
            }



                nav#obere-navigation ul.haupt li a:after {
                    content: "";
                    display: block;
                    left: 50%;
                    margin-left: -5px;
                    bottom: -10px;
                    width: 16px;
                    height: 10px;
                    background: url('images/dreieck-oben.png');
                    background-position: center center;
                    background-repeat: no-repeat;
                    visibility: hidden;
                    position: absolute;
                    -webkit-transition: all ease-out 0.3s;
                    -moz-transition: all ease-out 0.3s;
                    -o-transition: all ease-out 0.3s;
                    transition: all ease-out 0.3s;
                }



            nav#obere-navigation ul.haupt li a {
                display: block;
            }



                nav#obere-navigation ul.haupt li a:hover,
                nav#obere-navigation ul.haupt li.current-menu-item a {
                    color: #222;
                }



                    nav#obere-navigation ul.haupt li.current-menu-item a:after,
                    nav#obere-navigation ul.haupt li a:hover:after {
                        content: "";
                        display: block;
                        left: 50%;
                        visibility: visible;
                        margin-left: -5px;
                        bottom: 0px;
                        width: 16px;
                        height: 10px;
                        background: url('images/dreieck-oben.png');
                        background-position: center center;
                        background-repeat: no-repeat;
                        position: absolute;
                    }

    nav#obere-navigation .hg:after {
        content: "";
        top: 0;
        right: -19px;
        position: absolute;
        background: url('images/navi-hg.png');
        clear: both;
        background-repeat: no-repeat;
        display: inline-block;
        width: 20px;
        height: 65px;
    }



#sks-logo {
    float: left;
    margin-left: 26px;
}



@media (min-width:320px) {    
    #sks-logo {     margin-left: 32px;    }
}

@media (min-width:400px) {
    #sks-logo { margin-left: 42px; }
}

nav#obere-navigation ul.neben > li > a.share {
    height: 65px;
    background-image: url('images/share-button-mobile.png');
    background-position: center center;
    background-repeat: no-repeat;
    width: 30px;
    display: inline-block;
    background-size: 100% auto;
}


a.facebook.fixed-button, a.youtube.fixed-button {
    display: none;
}

@media (min-width:1080px) {
    nav#obere-navigation ul.neben > li > a.share.desktop {
        display: none;
    }

    a.facebook.fixed-button, a.youtube.fixed-button {
        display: block;
        left: 0;
        z-index: 9;
        top: 230px;
        width: 48px;
        height: 52px;
        background-image: url('images/facebook-button.png');
        background-position: center center;
        background-repeat: no-repeat;
        margin: 0;
    }

    a.youtube.fixed-button {
        top: 290px;
        background-image: url('images/yt-button.png');
    }



    .fixed-button {
        position: fixed;
        -webkit-backface-visibility: hidden;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        transform: translateX(0);
    }



    nav#obere-navigation ul.haupt li a, nav#obere-navigation ul.neben > li > a {
        margin: 0 20px;
    }
}



.claim {
    color: #fff;
    font-weight: bold;
    font-size: 24px;
    text-transform: uppercase;
    width: 100%;
    max-width: 960px;
}

.claim-unten {
    text-align: center;
    color: #fff;
    position: relative;
    font-size: 30px;
    display: block;
    margin: 20px;
    margin-left: -150px;
    text-shadow: 0 0 10px #000000, 0 0 20px #000000, 0 0 30px #000000, 0 0 40px #000000, 0 0 70px #000000, 0 0 80px #000000;
}

@media (min-width: 725px) {

    .claim {
        display: inline-block;
        margin-left: 50px;
        float: left;
        width: 60%;
    }

    .claim-unten {
        visibility: hidden;
        text-shadow: 0 0 10px #000000, 0 0 20px #000000, 0 0 30px #000000, 0 0 40px #000000, 0 0 70px #000000, 0 0 80px #000000;
        font-size: 36px;
    }



    ul.neben {
        float: right;
    }
}


@media (min-width: 1080px) {

    .claim {
        display: none;
    }

    .claim-unten {
        display: block;
        visibility: visible;
        top: -50px;
    }

    li.sprache {
        float: right;
        margin-right: 20px;
    }
    .navbar-collapse.collapse {
         overflow: auto !important; 
    }
}


@media (min-height:750px) and (min-width:1024px) {
    .claim-unten {
        top: -20px !important;
    }
}











/* Desktop */

nav#obere-navigation .hg ul.haupt {
    display: block;
}


/* Tablet */
@media (max-width: 1079px) {
    nav#obere-navigation .hg ul.haupt {
        display: none;
    }

    nav#obere-navigation .hg {
        width: 75%;
    }
}

@media (max-width:570px) {
    nav#obere-navigation .hg {
        width: 60%;
    }
}



@media (max-width:340px) {
    nav#obere-navigation .hg {
        width: 60%;
    }
}

.suche-button {
    cursor: pointer;
    display: inline-block;
    background-image: url('images/lupe.png');
    background-position: center center;
    width: 20px;
    height: 66px;
    background-repeat: no-repeat;
}

#suchfeld-buehne {
    display: none;
    position: fixed;
    top: 74px;
    width: 100%;
    z-index: 9999;
    background: #666;
    border-top: 10px solid #000;
}

#suchfeld-eingabe {
    width: 100%;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    padding: 6px 0;
}

    #suchfeld-eingabe input {
        border: none;
        width: 58%;
        padding: 8px 8px;
        font-family: 'Open Sans Condensed',Arial, sans-serif;
        font-size: 1.2em;
        font-weight: 600;
        text-transform: uppercase;
        color: #666;
        background: #FFF;
        margin-right: 10px;
        border: 2px solid #666;
        background-clip: border-box;
        -webkit-border-radius: 7px;
        -moz-border-radius: 7px;
        -ms-border-radius: 7px;
        -o-border-radius: 7px;
        border-radius: 7px;
        -webkit-transition: 0.3s border;
        -moz-transition: 0.3s border;
        -ms-transition: 0.3s border;
        -o-transition: 0.3s border;
        transition: 0.3s border;
    }

        #suchfeld-eingabe input:focus,
        #suchfeld-eingabe input:hover {
            border: 2px solid #EE7203;
            -webkit-transition: 0.3s border;
            -moz-transition: 0.3s border;
            -ms-transition: 0.3s border;
            -o-transition: 0.3s border;
            transition: 0.3s border;
        }

        #suchfeld-eingabe input[type='submit'] {
            border: 1px solid #555;
            max-width: 100px;
            height: 44px;
            font-weight: 600;
            color: #FFF;
            background: #444;
            text-transform: uppercase;
            margin: 0;
            padding: 0;
            cursor: pointer;
            margin-right: 0;
            -webkit-transition: 0.3s background;
            -moz-transition: 0.3s background;
            -ms-transition: 0.3s background;
            -o-transition: 0.3s background;
            transition: 0.3s background;
        }

            #suchfeld-eingabe input[type='submit']:hover {
                background: #000;
                -webkit-transition: 0.3s background;
                -moz-transition: 0.3s background;
                -ms-transition: 0.3s background;
                -o-transition: 0.3s background;
                transition: 0.3s background;
            }


/* 7.0 12-Spalten Raster
------------------------------------------------------------------------------*/


/* 7.1 12-Spalten Raster  - Zeilen
----------------------------------------------------------------------------*/

.z:before,
.z:after {
    content: " ";
    display: table;
}

.z:after {
    clear: both;
}

.z {
    margin: 0 -10px;
    padding: 10px;
}



/* 7.2 12-Spalten Raster  - Spaleten mit Breakpoints

  ----------------------------------------------------------------------------*/



/* 7.2.1 Breakpoint-0    (0 - 480px)

    --------------------------------------------------------------------------*/

.spa-br0-1, .spa-br0-2, .spa-br0-3, .spa-br0-4, .spa-br0-5,
.spa-br0-6, .spa-br0-7, .spa-br0-8, .spa-br0-9, .spa-br0-10,
.spa-br0-11, .spa-br0-12 {
    position: relative;
    min-height: 1px;
    padding-left: 10px;
    padding-right: 10px;
    float: left;
}



.spa-br0-12 {
    width: 100%;
}

.spa-br0-11 {
    width: 91.66666667%;
}

.spa-br0-10 {
    width: 83.33333333%;
}

.spa-br0-9 {
    width: 75%;
}

.spa-br0-8 {
    width: 66.66666667%;
}

.spa-br0-7 {
    width: 58.33333333%;
}

.spa-br0-6 {
    width: 50%;
}

.spa-br0-5 {
    width: 41.66666667%;
}

.spa-br0-4 {
    width: 33.33333333%;
}

.spa-br0-3 {
    width: 25%;
}

.spa-br0-2 {
    width: 16.66666667%;
}

.spa-br0-1 {
    width: 8.33333333%;
}





/* 7.2.1 Breakpoint-10    ( >=480 )

    --------------------------------------------------------------------------*/

@media (min-width: 480px) {

    .spa-br10-1, .spa-br10-2, .spa-br10-3, .spa-br10-4, .spa-br10-5,
    .spa-br10-6, .spa-br10-7, .spa-br10-8, .spa-br10-9, .spa-br10-10,
    .spa-br10-11, .spa-br10-12 {
        float: left;
    }

    .z {
        margin: 0 -10px;
    }



    .spa-br10-1, .spa-br10-2, .spa-br10-3, .spa-br10-4, .spa-br10-5,
    .spa-br10-6, .spa-br10-7, .spa-br10-8, .spa-br10-9, .spa-br10-10,
    .spa-br10-11, .spa-br10-12 {
        position: relative;
        min-height: 1px;
        padding-left: 10px;
        padding-right: 10px;
    }



    .z-s-padding {
        margin: 0 -7px;
    }

    .s-padding {
        padding-left: 7px;
        padding-right: 7px;
    }



    .spa-br10-12 {
        width: 100%;
    }

    .spa-br10-11 {
        width: 91.66666667%;
    }

    .spa-br10-10 {
        width: 83.33333333%;
    }

    .spa-br10-9 {
        width: 75%;
    }

    .spa-br10-8 {
        width: 66.66666667%;
    }

    .spa-br10-7 {
        width: 58.33333333%;
    }

    .spa-br10-6 {
        width: 50%;
    }

    .spa-br10-5 {
        width: 41.66666667%;
    }

    .spa-br10-4 {
        width: 33.33333333%;
    }

    .spa-br10-3 {
        width: 25%;
    }

    .spa-br10-2 {
        width: 16.66666667%;
    }

    .spa-br10-1 {
        width: 8.33333333%;
    }
}





/* 7.2.1 Breakpoint-20    ( >= 660px)

    --------------------------------------------------------------------------*/

@media (min-width: 660px) {

    .spa-br20-1, .spa-br20-2, .spa-br20-3, .spa-br20-4, .spa-br20-5,
    .spa-br20-6, .spa-br20-7, .spa-br20-8, .spa-br20-9, .spa-br20-10,
    .spa-br20-11, .spa-br20-12 {
        float: left;
    }

    .z {
        margin: 0 -10px;
    }



    .spa-br20-1, .spa-br20-2, .spa-br20-3, .spa-br20-4, .spa-br20-5,
    .spa-br20-6, .spa-br20-7, .spa-br20-8, .spa-br20-9, .spa-br20-10,
    .spa-br20-11, .spa-br20-12 {
        position: relative;
        min-height: 1px;
        padding-left: 10px;
        padding-right: 10px;
    }



    .z-s-padding {
        margin: 0 -7px;
    }

    .s-padding {
        padding-left: 7px;
        padding-right: 7px;
    }



    .spa-br20-12 {
        width: 100%;
    }

    .spa-br20-11 {
        width: 91.66666667%;
    }

    .spa-br20-10 {
        width: 83.33333333%;
    }

    .spa-br20-9 {
        width: 75%;
    }

    .spa-br20-8 {
        width: 66.66666667%;
    }

    .spa-br20-7 {
        width: 58.33333333%;
    }

    .spa-br20-6 {
        width: 50%;
    }

    .spa-br20-5 {
        width: 41.66666667%;
    }

    .spa-br20-4 {
        width: 33.33333333%;
    }

    .spa-br20-3 {
        width: 25%;
    }

    .spa-br20-2 {
        width: 16.66666667%;
    }

    .spa-br20-1 {
        width: 8.33333333%;
    }
}

/* 7.2.1 Breakpoint-30    ( >= 725px) -------------------------------------- */

@media (min-width: 725px) {
    .spa-br30-1, .spa-br30-2, .spa-br30-3, .spa-br30-4, .spa-br30-5,
    .spa-br30-6, .spa-br30-7, .spa-br30-8, .spa-br30-9, .spa-br30-10,
    .spa-br30-11, .spa-br30-12 {
        float: left;
    }

    .z { margin: 0 -10px; }

    .spa-br30-1, .spa-br30-2, .spa-br30-3, .spa-br30-4, .spa-br30-5,
    .spa-br30-6, .spa-br30-7, .spa-br30-8, .spa-br30-9, .spa-br30-10,
    .spa-br30-11, .spa-br30-12 {
        position: relative;
        min-height: 1px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .spa-br30-12 {         width: 100%;    }

    .spa-br30-11 {         width: 91.66666667%;    }

    .spa-br30-10 {
        width: 83.33333333%;
    }

    .spa-br30-9 {
        width: 75%;
    }

    .spa-br30-8 {
        width: 66.66666667%;
    }

    .spa-br30-7 {
        width: 58.33333333%;
    }

    .spa-br30-6 {
        width: 50%;
    }

    .spa-br30-5 {
        width: 41.66666667%;
    }

    .spa-br30-4 {
        width: 33.33333333%;
    }

    .spa-br30-3 {
        width: 25%;
    }

    .spa-br30-2 {
        width: 16.66666667%;
    }

    .spa-br30-1 {
        width: 8.33333333%;
    }

    .push-br30-6 {
        left: 50%;
    }

    .pull-br30-6 {
        right: 50%;
    }



    .push-br30-5 {
        left: 41.66666667%;
    }

    .pull-br30-5 {
        right: 41.66666667%;
    }





    .push-br30-7 {
        left: 58.33333333%;
    }

    .pull-br30-7 {
        right: 58.33333333%;
    }
}







/* 7.2.1 Breakpoint-40    ( >= 865px)

    --------------------------------------------------------------------------*/

@media (min-width: 865px) {

    .spa-br40-1, .spa-br40-2, .spa-br40-3, .spa-br40-4, .spa-br40-5,
    .spa-br40-6, .spa-br40-7, .spa-br40-8, .spa-br40-9, .spa-br40-10,
    .spa-br40-11, .spa-br40-12 {
        float: left;
    }


    .z {
        margin: 0 -10px;
    }

    .spa-br40-1, .spa-br40-2, .spa-br40-3, .spa-br40-4, .spa-br40-5,
    .spa-br40-6, .spa-br40-7, .spa-br40-8, .spa-br40-9, .spa-br40-10,
    .spa-br40-11, .spa-br40-12 {
        position: relative;
        min-height: 1px;
        padding-left: 10px;
        padding-right: 10px;
    }



    .z-s-padding {
        margin: 0 -7px;
    }

    .s-padding {
        padding-left: 7px;
        padding-right: 7px;
    }



    .spa-br40-12 {
        width: 100%;
    }

    .spa-br40-11 {
        width: 91.66666667%;
    }

    .spa-br40-10 {
        width: 83.33333333%;
    }

    .spa-br40-9 {
        width: 75%;
    }

    .spa-br40-8 {
        width: 66.66666667%;
    }

    .spa-br40-7 {
        width: 58.33333333%;
    }

    .spa-br40-6 {
        width: 50%;
    }

    .spa-br40-5 {
        width: 41.66666667%;
    }

    .spa-br40-4 {
        width: 33.33333333%;
    }

    .spa-br40-3 {
        width: 25%;
    }

    .spa-br40-2 {
        width: 16.66666667%;
    }

    .spa-br40-1 {
        width: 8.33333333%;
    }



    .push-br40-6 {
        left: 50%;
    }

    .pull-br40-6 {
        right: 50%;
    }
}



/* 8.0 Breadcrumb

------------------------------------------------------------------------------*/





#breadcrumb a, .breadcrumb_last {
    text-transform: uppercase;
    font-size: 12px;
    color: #000;
    text-decoration: none;
    font-weight: 600;
}





    #breadcrumb a:first-child {
        color: #ee7203;
    }

    #breadcrumb a:hover {
        color: #ee7203;
    }

    #breadcrumb a:after {
        content: "\00a0// ";
    }

#breadcrumb .breadcrumb_last {
    text-decoration: underline;
}

    #breadcrumb .breadcrumb_last:hover {
        color: #000;
    }

    #breadcrumb .breadcrumb_last:after {
        content: "";
    }

#breadcrumb {
    margin: 0;
    margin-bottom: 10px;
}











@media (min-width:725px) {

    #breadcrumb {
        margin: 30px 0;
        margin-bottom: 20px;
    }



    .inhalts-box #breadcrumb {
        margin: 0;
        margin-bottom: 10px;
    }
}





/* 9.0 Upgrade Screen für alte Browser

------------------------------------------------------------------------------*/

#upgrade-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    color: #fff;
    padding-top: 100px;
    text-align: center;
}









/* x.3.1  Boxen mit transparenten Hintergrund

  ----------------------------------------------------------------------------*/

.inhalts-box {
    width: 100%;
    background: url('images/60opacity.png');
    background: rgba(255,255,255,.6);
    border-radius: 10px;
    padding: 10px;
    position: relative;
}



.inhalts-box-innen {
    border-radius: 10px;
    width: 100%;
    height: 100%;
    background: url('images/70opacity.png');
    background: rgba(255,255,255,.7);
    font-size: 14px;
    position: relative;
}

    .inhalts-box-innen > .z {
        padding: 20px;
    }

    .inhalts-box-innen > #breadcrumb.z {
        padding: 20px 0;
    }

    .inhalts-box-innen::before, .inhalts-box-innen::after {
        content: " ";
        display: table;
    }



    .inhalts-box-innen h2 {
        font-family: 'Open Sans Condensed', sans-serif;
        font-weight: 700;
        color: #ee7203;
        margin: 0px;
        margin-bottom: 25px;
    }



.tooltip:after {
    content: attr(data-tooltip);
    position: absolute;
    background: #ee7203;
    padding: 10px 25px;
    font-size: 14px;
    color: #FFF;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
    border-radius: 7px;
    display: none;
    text-decoration: none;
}

.tooltip:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-top: 10px solid #ee7203;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    display: none;
}

.tooltip:hover:after {
}

.tooltip:hover:before {
}

.tooltip:hover:before, .tooltip:hover:after {
    display: block;
}

@media(max-width: 750px ) {
    .touch .tooltip:before, .touch .tooltip:after,
    .tooltip:before, .tooltip:after,
    .tooltip:hover:before, .tooltip:hover:after {
        display: none;
    }
}


/** lade balken für ajax **/

#loader-screen {
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.6);
    position: fixed;
    z-index: 2;
    display: block;
    top: 0;
    left: 0;
    display: none;
}

#loader {
}

.loading {
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -25px;
    margin-left: -25px;
    left: 50%;
    border-width: 5px;
    border-radius: 50%;
    -webkit-animation: spin 1s linear infinite;
    -moz-animation: spin 1s linear infinite;
    -o-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
}

.style-1 {
    border-style: solid;
    border-color: #444 transparent;
}

.style-2 {
    border-style: double;
    border-color: #444 transparent;
}

.circle {
    border-style: solid;
    border-color: #000 #EE7203 #EE7203;
    width: 50px;
    height: 50px;
}

@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(359deg);
    }
}

@-moz-keyframes spin {
    100% {
        -moz-transform: rotate(359deg);
    }
}

@-o-keyframes spin {
    100% {
        -moz-transform: rotate(359deg);
    }
}

@keyframes spin {
    100% {
        transform: rotate(359deg);
    }
}


/* =WordPress Core - (Artikel/Beitraege) -------------------------------------------------------------- */

.post img {
    max-width: 100%;
    height: auto;
}

.post p a {
    color: #EE7203;
    font-weight: 600;
    text-decoration: underline;
}

    .post p a:hover {
        color: #222;
    }

.post ul {
    padding-left: 10px;
}

.post li {
    padding-left: 15px;
}

img.alignnone,
a img.alignnone,
p img.alignnone {
    margin: 5px 0 20px 0;
}

img.aligncenter,
a img.aligncenter,
p img.aligncenter,
div.aligncenter {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 5px auto 5px auto;
}

img.alignright,
a img.alignright,
p img.alignright {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 0 10px 0;
}

img.alignleft,
a img.alignleft,
p img.alignleft {
    display: block;
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
}


@media(min-width: 750px ) {

    img.alignleft,
    a img.alignleft,
    p img.alignleft {
        float: left;
        margin: 5px 20px 20px 0;
        max-width: 45%;
    }

    img.alignright,
    a img.alignright,
    p img.alignright {
        float: right;
        margin: 5px 0 20px 20px;
        max-width: 45%;
    }
}

.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}

    .wp-caption.alignnone {
        margin: 5px 20px 20px 0;
    }

    .wp-caption.alignleft {
        margin: 5px 20px 20px 0;
    }

    .wp-caption.alignright {
        margin: 5px 0 20px 20px;
    }

    .wp-caption img {
        border: 0 none;
        height: auto;
        margin: 0;
        max-width: 98.5%;
        padding: 0;
        width: auto;
    }

    .wp-caption p.wp-caption-text {
        font-size: 11px;
        line-height: 17px;
        margin: 0;
        padding: 0 4px 5px;
    }

/* Text meant only for screen readers. */

.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

    .screen-reader-text:focus {
        background-color: #f1f1f1;
        border-radius: 3px;
        box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
        clip: auto !important;
        color: #21759b;
        display: block;
        font-size: 14px;
        font-size: 0.875rem;
        font-weight: bold;
        height: auto;
        left: 5px;
        line-height: normal;
        padding: 15px 23px 14px;
        text-decoration: none;
        top: 5px;
        width: auto;
        z-index: 100000; /* Above WP toolbar. */
    }



/* WP Page Navi - Seitennavigation in News (<- 1 2 3 ->) */

.wp-pagenavi {
    position: relative;
    font-size: 18px;
    font-weight: 600;
    color: #EE7203;
    text-align: right;
}

.vor-zurueck {
    margin-top: 45px;
}

.wp-pagenav:after {
    clear: both;
}

.wp-pagenavi .current {
    position: relative;
    display: inline-block;
    width: 45px;
    height: 52px;
    background: url(images/schaltflaechen-page-navi-bubble-aktiv.png) center center no-repeat;
    vertical-align: middle;
    line-height: 52px;
    text-align: center;
}

.wp-pagenavi a {
    display: inline-block;
    width: 52px;
    height: 52px;
    background: url(images/schaltflaechen-page-navi-bubble.png) center center no-repeat;
    vertical-align: middle;
    text-align: center;
    margin: 0;
    padding: 0;
    color: #FFF;
    line-height: 52px;
    text-decoration: none;
}

    .wp-pagenavi a.page {
        background: url(images/schaltflaechen-page-navi-bubble.png) center center no-repeat;
    }

        .wp-pagenavi a.page:hover {
            background: url(images/schaltflaechen-page-navi-bubble-aktiv.png) center center no-repeat;
            color: #EE7203;
        }

.wp-pagenavi .vor,
.wp-pagenavi .zurueck {
    display: inline-block;
    margin-bottom: 5px;
}

    .wp-pagenavi .vor a,
    .wp-pagenavi .zurueck a,
    .wp-pagenavi a.first,
    .wp-pagenavi a.last,
    .wp-pagenavi a.previouspostslink,
    .wp-pagenavi a.nextpostslink {
        width: 55px;
        font-size: 28px;
        line-height: 47px;
    }

.wp-pagenavi a.first,
.wp-pagenavi a.last {
    font-size: 24px;
    line-height: 47px;
}

.wp-pagenavi .zurueck a,
.wp-pagenavi a.first,
.wp-pagenavi a.previouspostslink {
    background: url(images/schaltflaechen-page-navi-links.png) center center no-repeat;
}

.wp-pagenavi .vor a,
.wp-pagenavi a.last,
.wp-pagenavi a.nextpostslink {
    background: url(images/schaltflaechen-page-navi-rechts.png) center center no-repeat;
}

@media (max-width: 853px) {

    .wp-pagenavi .page,
    .wp-pagenavi .extend {
    }

    .wp-pagenavi .vor a,
    .wp-pagenavi .zurueck a,
    .wp-pagenavi a.first,
    .wp-pagenavi a.last,
    .wp-pagenavi a.previouspostslink,
    .wp-pagenavi a.nextpostslink {
        width: 44px;
        background-size: 100% auto;
    }
}

@media (max-width: 750px) {

    .wp-pagenavi {
        text-align: center;
    }

        .wp-pagenavi .page,
        .wp-pagenavi .extend {
            display: none;
        }

        .wp-pagenavi .vor a,
        .wp-pagenavi .zurueck a,
        .wp-pagenavi a.first,
        .wp-pagenavi a.last,
        .wp-pagenavi a.previouspostslink,
        .wp-pagenavi a.nextpostslink {
            width: 48px;
            background-size: 100% auto;
        }
}


.socialmedia-tooltip {
    z-index: 1001;
    position: fixed;
    top: 0px;
    width: 100%;
    padding: 0 20px;
    height: 64px;
    line-height: 30px;
    font-family: "Open Sans Condensed",sans-serif;
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
    color: #fff;
    background: #222;
    left: 0;
    transition: all.25s ease-in-out;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    overflow: hidden;
}

    .socialmedia-tooltip.aktiv {
        display: block;
        top: 80px;
    }

    .socialmedia-tooltip .facebook-s {
        display: block;
        float: left;
        width: 30px;
        height: 64px;
        margin-right: 10px;
        background-image: url('images/facebook-button-s.png');
        background-position: center;
        background-repeat: no-repeat;
    }

    .socialmedia-tooltip .yt-s {
        display: block;
        float: left;
        width: 30px;
        height: 64px;
        margin-right: 10px;
        background-image: url('images/yt-button-s.png');
        background-position: center;
        background-repeat: no-repeat;
    }

    .socialmedia-tooltip .text {
        display: block;
        float: left;
        height: 64px;
        line-height: 64px;
        margin-right: 15px;
    }

@media( min-width:1080px ) {
    
    .socialmedia-tooltip {
        display: none;
    }

    .socialmedia-tooltip.aktiv {
        display: none;
    }
}


@media (max-width: 1190px) {
    .seiten-menu-button {
        display: block;
        /*background-image: url('images/menu-button.png');*/
        background-repeat: no-repeat;
        z-index: 999;
        top: 25px;
        cursor: pointer;
        width: 94px;
        height: 114px;
        position: relative;
    }
}

@media screen and (max-height: 600px) {
    .schiebe-menue {
        background-color: #000000;
        max-height: 70% !important;
        overflow: scroll !important;
    }
    .navbar-collapse.collapse {
        overflow: scroll !important;
    }
}