/*  Author:   Martin Stettler (http://dieweberei.ch/)
    Version:  01122017
*/

/*  FONTS

*/

/* ==========================================================================
   BASE STYLES
   ========================================================================== */

* {
    box-sizing: border-box; }
    
html,
body,
ul { /* ul to be help-block full left */
    margin:0;
    padding:0;
    background-color: #FFF; /* color def for form */
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 17px;
    line-height: 1.4; }

ul {
    background-color: transparent;}

li {
    list-style-type: none; } /* for text-danger in form */

img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto; }

/* ==========================================================================
   HTML-EDITOR (REDACTOR)
   ========================================================================== */

h1,
h2,
h3,
h4 {
    font-weight: normal;
    line-height: 1.4;
    margin: 0;
    padding: 0; }

h1 {
    text-transform: uppercase;
    font-size: 24px;
    text-align: center;
    border-bottom: 1px solid #000;
    padding-bottom: 25px;
    margin-bottom: 35px; }

h2 {
    font-size: 18px;
    text-transform: uppercase;
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    margin-bottom: 25px; }

h3 {
    font-size: 21px;
    text-transform: uppercase; }

p {
    margin: 0 0 20px; /* Bootstrap */
    line-height: 1.4; }

p:last-child,
.content ul:last-child {
    margin-bottom: 0; }

.home .article-small p,
.home .article-large p,
.statement {
    text-align: center; }

strong {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal; }

a {
    color: #9f9590; }

.company a,
.people a,
.cp a {
    color: #000; }

a:hover {
    color: #000; }

a,
a:hover,
.navbar,
.navbar.shrink,
a.navbar-brand span,
a.navbar-brand.shrink span {
    text-decoration: none;
    -webkit-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -moz-transition: all 0.5s;
        transition: all 0.5s; }

.content ul {
    margin: 0 0 20px; }

.content li {
    font-size: 16px;
    list-style: none;
    padding-left: 15px; }

.content li:before {
    position: relative;
    top: 0;
    left: -15px;
    height: 0;
    display: block;
    content: "•";
    color: #000; }

/* ARTICLES */
.article-large {
    margin-bottom: 40px; }

.article-small em,
.article-large em {
    font-style: normal;
    text-transform: uppercase; }

.article-small img,
.article-large img {
    margin-bottom: 25px; }

.home .article-small.company h2,
.home .article-small.people h2,
.home .article-small.cp h2 {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    text-align: center;
    font-size: 24px;
    line-height: 1.2;
    margin-bottom: 35px;
    text-transform: uppercase; }

.home .article-small.company h2:before,
.home .article-small.people h2:before,
.home .article-small.cp h2:before,
.braun .statement-container:before,
.blau .statement-container:before,
.gruen .statement-container:before {
    content: '';
    display: block;
    margin: 0 auto;
    margin-bottom: 25px;
    width: 60px;
    height: 58px;
    background-size: 60px 58px;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIyLjAuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA2MCA1OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNjAgNTg7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMl8pO2ZpbGw6I0IxQTdBMjt9Cgkuc3Qxe2NsaXAtcGF0aDp1cmwoI1NWR0lEXzJfKTtmaWxsOm5vbmU7c3Ryb2tlOiMxQTE3MUI7c3Ryb2tlLXdpZHRoOjEuNTA1O3N0cm9rZS1taXRlcmxpbWl0OjEwO30KPC9zdHlsZT4KPGc+Cgk8ZGVmcz4KCQk8cmVjdCBpZD0iU1ZHSURfMV8iIHg9IjEiIHk9IjEuMyIgd2lkdGg9IjU4IiBoZWlnaHQ9IjU1LjMiLz4KCTwvZGVmcz4KCTxjbGlwUGF0aCBpZD0iU1ZHSURfMl8iPgoJCTx1c2UgeGxpbms6aHJlZj0iI1NWR0lEXzFfIiAgc3R5bGU9Im92ZXJmbG93OnZpc2libGU7Ii8+Cgk8L2NsaXBQYXRoPgoJPHBhdGggY2xhc3M9InN0MCIgZD0iTTI1LjgsMi4yYzE0LjctMS41LDI3LjksOS4xLDI5LjUsMjMuOWMwLjcsNi41LTEsMTIuOC00LjQsMTcuOGMtMC45LDEuMy0xLjQsNSw3LjMsMTEuOQoJCWMxLjMsMS4xLTEyLjctNS45LTE0LjEtNC45Yy0zLjYsMi42LTcuOSw0LjItMTIuNiw0LjdjLTE0LjcsMS41LTI4LTkuMS0yOS41LTIzLjlDMC40LDE3LDExLDMuOCwyNS44LDIuMiIvPgoJPHBhdGggY2xhc3M9InN0MSIgZD0iTTI1LjgsMi4yYzE0LjctMS41LDI3LjksOS4xLDI5LjUsMjMuOWMwLjcsNi41LTEsMTIuOC00LjQsMTcuOGMtMC45LDEuMy0xLjQsNSw3LjMsMTEuOQoJCWMxLjMsMS4xLTEyLjctNS45LTE0LjEtNC45Yy0zLjYsMi42LTcuOSw0LjItMTIuNiw0LjdjLTE0LjcsMS41LTI4LTkuMS0yOS41LTIzLjlDMC40LDE3LDExLDMuOCwyNS44LDIuMnoiLz4KPC9nPgo8L3N2Zz4K"); }

.home .article-small.people h2:before,
.blau .statement-container:before {
    width: 60px;
    height: 58px;
    background-size: 60px 58px;
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIyLjAuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA2MCA1OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNjAgNTg7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMl8pO2ZpbGw6I0EyQzVEMzt9Cgkuc3Qxe2NsaXAtcGF0aDp1cmwoI1NWR0lEXzJfKTtmaWxsOm5vbmU7c3Ryb2tlOiMxQTE3MUI7c3Ryb2tlLXdpZHRoOjEuNTA1O3N0cm9rZS1taXRlcmxpbWl0OjEwO30KPC9zdHlsZT4KPGc+Cgk8ZGVmcz4KCQk8cmVjdCBpZD0iU1ZHSURfMV8iIHg9IjEiIHk9IjEuMyIgd2lkdGg9IjU4IiBoZWlnaHQ9IjU1LjMiLz4KCTwvZGVmcz4KCTxjbGlwUGF0aCBpZD0iU1ZHSURfMl8iPgoJCTx1c2UgeGxpbms6aHJlZj0iI1NWR0lEXzFfIiAgc3R5bGU9Im92ZXJmbG93OnZpc2libGU7Ii8+Cgk8L2NsaXBQYXRoPgoJPHBhdGggY2xhc3M9InN0MCIgZD0iTTI1LjgsMi4yYzE0LjctMS41LDI3LjksOS4xLDI5LjUsMjMuOWMwLjcsNi41LTEsMTIuOC00LjQsMTcuOGMtMC45LDEuMy0xLjQsNSw3LjMsMTEuOQoJCWMxLjMsMS4xLTEyLjctNS45LTE0LjEtNC45Yy0zLjYsMi42LTcuOSw0LjItMTIuNiw0LjdjLTE0LjcsMS41LTI4LTkuMS0yOS41LTIzLjlDMC40LDE3LDExLDMuOCwyNS44LDIuMiIvPgoJPHBhdGggY2xhc3M9InN0MSIgZD0iTTI1LjgsMi4yYzE0LjctMS41LDI3LjksOS4xLDI5LjUsMjMuOWMwLjcsNi41LTEsMTIuOC00LjQsMTcuOGMtMC45LDEuMy0xLjQsNSw3LjMsMTEuOQoJCWMxLjMsMS4xLTEyLjctNS45LTE0LjEtNC45Yy0zLjYsMi42LTcuOSw0LjItMTIuNiw0LjdjLTE0LjcsMS41LTI4LTkuMS0yOS41LTIzLjlDMC40LDE3LDExLDMuOCwyNS44LDIuMnoiLz4KPC9nPgo8L3N2Zz4K"); }

.home .article-small.cp h2:before,
.gruen .statement-container:before {
    width: 60px;
    height: 58px;
    background-size: 60px 58px;
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIyLjAuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA2MCA1OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNjAgNTg7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMl8pO2ZpbGw6I0EyQzVEMzt9Cgkuc3Qxe2NsaXAtcGF0aDp1cmwoI1NWR0lEXzJfKTtmaWxsOm5vbmU7c3Ryb2tlOiMxQTE3MUI7c3Ryb2tlLXdpZHRoOjEuNTA1O3N0cm9rZS1taXRlcmxpbWl0OjEwO30KCS5zdDJ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNF8pO2ZpbGw6I0E4QUQwMDt9Cgkuc3Qze2NsaXAtcGF0aDp1cmwoI1NWR0lEXzRfKTtmaWxsOm5vbmU7c3Ryb2tlOiMxQTE3MUI7c3Ryb2tlLXdpZHRoOjEuNTA1O3N0cm9rZS1taXRlcmxpbWl0OjEwO30KPC9zdHlsZT4KPGc+Cgk8ZGVmcz4KCQk8cmVjdCBpZD0iU1ZHSURfMV8iIHg9IjEiIHk9IjEuMyIgd2lkdGg9IjU4IiBoZWlnaHQ9IjU1LjMiLz4KCTwvZGVmcz4KCTxjbGlwUGF0aCBpZD0iU1ZHSURfMl8iPgoJCTx1c2UgeGxpbms6aHJlZj0iI1NWR0lEXzFfIiAgc3R5bGU9Im92ZXJmbG93OnZpc2libGU7Ii8+Cgk8L2NsaXBQYXRoPgoJPHBhdGggY2xhc3M9InN0MCIgZD0iTTI1LjgsMi4yYzE0LjctMS41LDI3LjksOS4xLDI5LjUsMjMuOWMwLjcsNi41LTEsMTIuOC00LjQsMTcuOGMtMC45LDEuMy0xLjQsNSw3LjMsMTEuOQoJCWMxLjMsMS4xLTEyLjctNS45LTE0LjEtNC45Yy0zLjYsMi42LTcuOSw0LjItMTIuNiw0LjdjLTE0LjcsMS41LTI4LTkuMS0yOS41LTIzLjlDMC40LDE3LDExLDMuOCwyNS44LDIuMiIvPgoJPHBhdGggY2xhc3M9InN0MSIgZD0iTTI1LjgsMi4yYzE0LjctMS41LDI3LjksOS4xLDI5LjUsMjMuOWMwLjcsNi41LTEsMTIuOC00LjQsMTcuOGMtMC45LDEuMy0xLjQsNSw3LjMsMTEuOQoJCWMxLjMsMS4xLTEyLjctNS45LTE0LjEtNC45Yy0zLjYsMi42LTcuOSw0LjItMTIuNiw0LjdjLTE0LjcsMS41LTI4LTkuMS0yOS41LTIzLjlDMC40LDE3LDExLDMuOCwyNS44LDIuMnoiLz4KPC9nPgo8Zz4KCTxkZWZzPgoJCTxyZWN0IGlkPSJTVkdJRF8zXyIgeD0iMSIgeT0iMS44IiB3aWR0aD0iNTcuOSIgaGVpZ2h0PSI1NS4yIi8+Cgk8L2RlZnM+Cgk8Y2xpcFBhdGggaWQ9IlNWR0lEXzRfIj4KCQk8dXNlIHhsaW5rOmhyZWY9IiNTVkdJRF8zXyIgIHN0eWxlPSJvdmVyZmxvdzp2aXNpYmxlOyIvPgoJPC9jbGlwUGF0aD4KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0yNS43LDIuN2MxNC43LTEuNSwyNy45LDkuMSwyOS40LDIzLjhjMC43LDYuNS0xLDEyLjctNC40LDE3LjhjLTAuOSwxLjMtMS40LDUsNy4zLDExLjkKCQljMS4zLDEuMS0xMi43LTUuOS0xNC4xLTQuOWMtMy42LDIuNS03LjksNC4yLTEyLjYsNC43QzE2LjYsNTcuNSwzLjQsNDYuOCwxLjksMzIuMUMwLjQsMTcuNCwxMSw0LjIsMjUuNywyLjciLz4KCTxwYXRoIGNsYXNzPSJzdDMiIGQ9Ik0yNS43LDIuN2MxNC43LTEuNSwyNy45LDkuMSwyOS40LDIzLjhjMC43LDYuNS0xLDEyLjctNC40LDE3LjhjLTAuOSwxLjMtMS40LDUsNy4zLDExLjkKCQljMS4zLDEuMS0xMi43LTUuOS0xNC4xLTQuOWMtMy42LDIuNS03LjksNC4yLTEyLjYsNC43QzE2LjYsNTcuNSwzLjQsNDYuOCwxLjksMzIuMUMwLjQsMTcuNCwxMSw0LjIsMjUuNywyLjd6Ii8+CjwvZz4KPC9zdmc+Cg=="); }

@media only screen and (min-width: 768px) {
    .braun .statement-container:before,
    .blau .statement-container:before,
    .gruen .statement-container:before {
        position: absolute;
        display: block; /* display: inline-block; */
        margin: -40px 20px 0 0; }
}

/* COLORS */
/* Home/Company */
.braun a
.braun a,
.braun h2 {
    color: #9f9590; }

.braun .header-graphic {
    background: #9f9590; }

/* People */
.blau h2,
.blau a {
    color: #96b9c9; }

.blau .header-graphic {
    background: #96b9c9; }

/* CP */
.gruen h2,
.gruen a {
    color: #969e00; }

.gruen .header-graphic {
    background: #969e00; }

/* ==========================================================================
   Browse Happy prompt lte IE 7
   ========================================================================== */

.browsehappy {
    margin: 3px 0;
    background: #CC0033;
    color: #FFF;
    padding: 8px; }

.browsehappy a {
    color: #FFF;
    text-decoration: underline; }

.browsehappy a:hover {
    text-decoration: none; }

/* ==========================================================================
   HEADER (Navigation containers & Logo)
   ========================================================================== */

/* Header background full-width */
.navbar {
    background: transparent;
    border-bottom: 0;
    height: 176px; }

.navbar.shrink {
        height: 0px; }

.navbar-header {
    float: left;
    background: transparent;
    padding: 0;
    margin: 0;
    margin-top: 15px;
    height: auto; }

.navbar-header.shrink {
        height: 0px; }

@media only screen and (min-width: 768px) { 
    .navbar.shrink {
        height: 52px;
        background-color: rgba(255,255,255,0.65);
        -webkit-transition: all 0.25s;
        -moz-transition: all 0.25s;
        -ms-transition: all 0.25s;
            transition: all 0.25s;
        -webkit-box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.15);
        -moz-box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.15);
            box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.15); }

    .navbar-header.shrink {
        height: 52px;
        margin-top: 12px;
        -webkit-transition: all 0.25s;
        -moz-transition: all 0.25s;
        -ms-transition: all 0.25s;
            transition: all 0.25s; }
}

/* Logo */
.logo { 
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    margin-top: 15px;
    width: 120px;
    height: 83px; }

.logo.shrink {
    height: 45px; }

.logo.title-only {
    margin-top: 50px;
    width: 182px;
    height: 46px; }

.navbar-brand {
    height: auto;
    padding: 0;
    color: #FFF; }

a.navbar-brand span.ja-icon {
    display: block;
    margin: 0 auto;
    margin-bottom: 14px;
    width: 38px;
    height: 36px;
    background-image: url(../graphics/ja-icon.svg);
    background-size: 38px 36px; }

a.navbar-brand span.ja-title {
    display: block;
    text-indent: -9999px;
    width: 120px;
    height: 30px;
    background-image: url(../graphics/ja-title.svg);
    background-size: 120px 30px; }

.logo.title-only a.navbar-brand span.ja-title {
        width: 182px;
        height: 46px;
        background-image: url(../graphics/ja-title.svg);
        background-size: 182px 46px; }

.logo.shrink {
    -webkit-transform: translateY(-125px);
    -moz-transform: translateY(-125px);
        -ms-transform: translateY(-125px)
        transform: translateY(-125px);
    -webkit-transition: transform 0.5s;
    -moz-transition: transform 0.5s;
        -ms-transition: transform 0.5s;
        transition: transform 0.5s; } 

.logo.shrink a.navbar-brand span.ja-icon {
    width: 40px;
    height: 39px;
    background-image: url(../graphics/ja-icon.svg);
    background-size: 40px 39px; }

.braun a.navbar-brand span.ja-icon,
.blau a.navbar-brand span.ja-icon,
.gruen a.navbar-brand span.ja-icon {
    display: none; }

.gruen.has-image a.navbar-brand span.ja-icon {
    display: block; }

.braun .logo.shrink a.navbar-brand span.ja-icon,
.blau .logo.shrink a.navbar-brand span.ja-icon,
.gruen .logo.shrink a.navbar-brand span.ja-icon {
    display: none; }

.logo.shrink a.navbar-brand span.ja-title {
    opacity: 0;
    height: 0;
    -webkit-transition: transform 0.5s;
    -moz-transition: transform 0.5s;
    -ms-transition: transform 0.5s;
        transition: transform 0.5s; }

@media only screen and (min-width: 768px) {
    .navbar-header {
        margin-top: 130px; }

    .navbar-brand {
        padding: 0 15px; }

    .navbar-brand.shrink {
        height: 45px; }

    .logo { 
        margin-top: 50px;
        width: 182px;
        height: 126px; }

    .logo.shrink {
        margin-top: 5px;
        height: 45px;
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
            transform: translateY(0px);
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -ms-transition: all 0.5s;
            transition: all 0.5s; }

    a.navbar-brand span.ja-icon {
        margin-bottom: 24px;
        width: 58px;
        height: 56px;
        background-image: url(../graphics/ja-icon.svg);
        background-size: 58px 56px; }

    .braun .logo.shrink a.navbar-brand span.ja-icon,
    .blau .logo.shrink a.navbar-brand span.ja-icon,
    .gruen .logo.shrink a.navbar-brand span.ja-icon {
        display: block; }

    a.navbar-brand span.ja-title {
        width: 182px;
        height: 46px;
        background-image: url(../graphics/ja-title.svg);
        background-size: 182px 46px; }
}

/* ==========================================================================
   NAVIGATION
   ========================================================================== */

/* Navigation container */
.navbar-nav {
    width: 100%;
    margin: 0;
    margin-top: 35px; } 

/* Mobile navigation */
.navbar-default .navbar-toggle {
    float: left !important;
    display: block; /* for visibility above 768px */
    z-index: 1000;
    background: transparent !important;
    padding: 0;
    margin: 0 0 0 15px;
    border: 0; }

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: transparent; }

.navbar-default .navbar-toggle .icon-bar {
    width: 40px;
    height: 6px;
    background-color: #000;
    border-radius: 6px; }

/* Offcanvas */
.offcanvas-toggle,
.navbar-toggle:hover {
    background: transparent !important;
    border-radius: 0;
    border: 0; }

.offcanvas-toggle .icon-bar {
    background: #000;
    -webkit-transition: all .25s ease-in-out;
        -ms-transition: all .25s ease-in-out;
            transition: all .25s ease-in-out; }

.offcanvas-toggle.is-open .icon-bar:nth-child(1) {
    -webkit-transform: rotate(45deg) translate(8px, 6px);
        -ms-transform: rotate(45deg) translate(8px, 6px);
            transform: rotate(45deg) translate(8px, 6px); }

.offcanvas-toggle.is-open .icon-bar:nth-child(2) {
    opacity: 0; }

.offcanvas-toggle.is-open .icon-bar:nth-child(3) {
    -webkit-transform: rotate(-45deg) translate(8px, -6px);
        -ms-transform: rotate(-45deg) translate(8px, -6px);
            transform: rotate(-45deg) translate(8px, -6px); }

.navbar-default .navbar-nav > li {
    width: 100% !important; }

.navbar-default .navbar-offcanvas {
    background-color: transparent;
    margin-top: 15px;
    height: auto !important; }

.navbar-default.shrink .navbar-offcanvas {
    margin-top: 15px; }

.navbar-inverse .navbar-offcanvas {
    background-color: #222; }

.navbar-offcanvas {
    position: fixed;
    height: auto;
    width: 100%;
    max-width: 220px;
    left: -10px;
    top: 0;
    padding-left: 0;
    padding-right: 0; /* 15px; */
    z-index: 999;
    overflow: auto; /* scroll */
    opacity: 0;
    -webkit-overflow-scrolling: touch;
    -webkit-transition: all 0.15s ease-in;
            transition: all 0.15s ease-in; }

.navbar-offcanvas.in {
    box-shadow: none; }

.navbar-offcanvas.navbar-offcanvas-fade {
    opacity: 0; }

.navbar-offcanvas.navbar-offcanvas-fade.in {
    opacity: 1; }

.navbar-offcanvas.offcanvas-transform.in {
    -webkit-transform: translateX(0px);
        -ms-transform: translateX(0px);
            transform: translateX(0px); }

.navbar-offcanvas.offcanvas-position.in {
    left: 0; }


@media only screen and (min-width: 768px) {

    .navbar-default .navbar-toggle {
        margin-left: 80px; }

    .navbar-default .navbar-offcanvas {
    background-color: transparent;
    margin-top: 130px;
    height: auto !important; }

    .navbar-offcanvas.offcanvas-transform.in {
    -webkit-transform: translateX(80px);
        -ms-transform: translateX(80px);
            transform: translateX(80px); }

}

/* Navigation colors */
.navbar-default .navbar-nav > li > a {
    font-size: 15px;
    padding: 4px 30px 2px 30px;
    margin: 2px 0;
    color: #000;
    background-color: transparent;
    border-radius: 12px;
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
    line-height: 1.4 !important; }

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.home .navbar-default .navbar-nav > li > a:hover,
.has-image .navbar-default .navbar-nav > li > a:hover,
.home .navbar-default .navbar-nav > li > a:focus,
.has-image .navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
    color: #000;
    background-color: rgba(255,255,255,0.5); }

.navbar-default .navbar-nav.shrink > li > a {
    color: #000;
    background-color: rgba(160,150,144,0.85); }

.navbar-default .navbar-nav.shrink > li > a:hover,
.navbar-default .navbar-nav.shrink > .active > a,
.navbar-default .navbar-nav.shrink > .open > a {
    color: #FFF;
    background-color: rgba(160,150,144,0.85); }

@media only screen and (max-width: 767px) {

    .braun .navbar-default .navbar-nav > li > a:hover,
    .blau .navbar-default .navbar-nav > li > a:hover,
    .gruen .navbar-default .navbar-nav > li > a:hover {
        color: #FFF;
        background-color: rgba(160,150,144,0.85); }

    .braun .navbar-default .navbar-nav > li > a,
    .blau .navbar-default .navbar-nav > li > a,
    .gruen .navbar-default .navbar-nav > li > a {
        color: #000;
        background-color: rgba(255,255,255,0.5); }

    .braun .navbar-default .navbar-nav.shrink > li > a,
    .blau .navbar-default .navbar-nav.shrink > li > a,
    .gruen .navbar-default .navbar-nav.shrink > li > a {
        color: #000;
        background-color: rgba(160,150,144,0.85); }

    .braun .navbar-default .navbar-nav > .active > a,
    .blau .navbar-default .navbar-nav > .active > a,
    .gruen .navbar-default .navbar-nav > .active > a,
    .braun .navbar-default .navbar-nav.shrink > li > a:hover,
    .blau .navbar-default .navbar-nav.shrink > li > a:hover,
    .gruen .navbar-default .navbar-nav.shrink > li > a:hover,
    .braun .navbar-default .navbar-nav.shrink > .active > a,
    .blau .navbar-default .navbar-nav.shrink > .active > a,
    .gruen .navbar-default .navbar-nav.shrink > .active > a {
        color: #FFF;
        background-color: rgba(160,150,144,0.85); }

}

@media only screen and (max-width: 767px) {
    .home .navbar-default .navbar-nav > li > a,
    .has-image .navbar-default .navbar-nav > li > a {
        color: #000;
        background-color: rgba(160,150,144,0.85); }    
}

/* ==========================================================================
   CONTENT
   ========================================================================== */
/*
section {
    border: 1px dashed black; }

.row {
  border: 1px dashed blue; }

.col-sm-12,
.col-sm-8,
.col-sm-4 {
  border: 1px dashed red; }*/

.header-image .container-fluid,
.header-graphic {
    padding: 0;
    margin-bottom: 50px; }

.header-image img {
    width: 100%;
    height: auto; }

.header-graphic {
    height: 300px; }

.header-graphic span {
    display: block;
    margin: 0 auto;
    margin-top: 130px;
    width: 152px;
    height: 145px;
    background-image: url(../graphics/ja-graphic.svg);
    background-size: 152px 145px; }

@media only screen and (min-width: 768px) {
    .article-container {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
            flex-wrap: wrap; }

    /* for Safari to wrap elements correctly */
        .article-container:before,
        .article-container:after {
            content: normal; }

    .ie9 .article-container {
        display: table-cell; }
}

.article-small,
.article-large {
    margin-bottom: 35px; }

.divider {
    border-bottom: 1px solid #000;
    margin-bottom: 50px; }

.aligner,
.statement-container {
    padding: 0 15px; }

.statement-container {
    position: relative;
    padding-top: 0; }

@media only screen and (min-width: 768px) {
    .statement-container {
        padding-top: 50px; }
}

/* ==========================================================================
   CAROUSEL
   ========================================================================== */

.carousel {
    position: relative; }

.carousel-inner img {
    width: 100%;
    height: auto; }

/* Shadows */
.carousel-control.left,
.carousel-control.right {
    background-image: none;
    -webkit-transition: all 0.45s;
        -moz-transition: all 0.45s;
        -ms-transition: all 0.45s;
        -o-transition: all 0.45s;
        transition: all 0.45s; } 

/* Controls */
.carousel-control {
    display: none; }

/* Fading: just change the slide attribute to fade */
.carousel.fade {
  opacity: 1; }

.carousel.fade .item {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  display: block;
  opacity: 0;
  transition: opacity ease-out 2.5s; }

.carousel.fade .item:first-child {
  position: relative;
  top: auto;
  opacity: 1; }

.carousel.fade .item.active {
  opacity: 1; }

.@media all and (transform-3d), (-webkit-transform-3d) {   
    .carousel-inner > .item {       
        transition: transform 2500 ease-in-out;
    }    
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

/* Footer always at the bottom */
html,
body { height: 100%; }

body {
  display: table;
  width: 100%; }

.footer {
  display: table-row;
  height: 1px; }

footer {
    background: #9f9590;
    color: #000;
    text-align: center; }

.footer-inner {
    padding-top: 10px;
    padding-bottom: 10px; }

.address {
    background: #FFF; }

.vcard {
    padding: 60px 0 20px 0; }

footer p {
    color: #000; }

footer i {
    font-style: normal;
    white-space: nowrap; }

footer a {
    color: #000 !important; }

footer a:hover {
    color: #9f9590 !important; }

footer .org,
footer .adr {
    display: block; }

footer .org {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase; }

.imprint {
    background: transparent; }

.imprint li {
    display: inline-block;
    list-style: none;
    padding-right: 12px;
    font-size: 15px; }

.imprint li:after {
    position: relative;
    top: 0;
    right: -8px;
    height: 0;
    content: "|";
    color: #000; }

.imprint li:last-child:after {
    content: ""; }

.imprint li a {
    color: #000 !important; }


footer .imprint a:hover {
    color: #FFF !important;
    text-decoration: none; }

/* ==========================================================================
   SELECTION
   ========================================================================== */

::-moz-selection {
    text-shadow: none;
    background: #333;
    color: #FFF; }

::selection {
    text-shadow: none;
    background: #333;
    color: #FFF; }

img::selection {
    background: 0 0; }

img::-moz-selection {
    background: 0 0; }

body {
    webkit-tap-highlight-color: #333; }

a[href^="tel"], 
a[href^="sms"]{
    color:inherit; 
    cursor:default; 
    text-decoration:none; }