/* Flexnav Base Styles */
 .flexnav {
     margin: 0;
     padding: 0;
     -webkit-transition: none;
     -o-transition: none;
     transition: none;
     -webkit-transform-style: preserve-3d;
     overflow: hidden;
     margin: 0 auto;
     width: 100%;
     max-height: 0;
}
 .flexnav.opacity {
     opacity: 0;
}
 .flexnav.flexnav-show {
     max-height: 2000px;
     opacity: 1;
     -webkit-transition: all .5s ease-in-out;
     -o-transition: all .5s ease-in-out;
     transition: all .5s ease-in-out;
}
 .flexnav.one-page {
     position: fixed;
     top: 50px;
     right: 5%;
     max-width: 200px;
}
 .flexnav li {
     font-size: 100%;
     position: relative;
     overflow: hidden;
}
 .flexnav li a {
     position: relative;
     display: block;
     padding: 1.03em;
     z-index: 2;
     border-bottom: 1px solid rgba(0, 0, 0, 0.15);
     /*transition: color 0.4s ease-in-out;*/
}
 .flexnav li ul {
     width: 100%;
}
 .flexnav li ul li {
     font-size: 100%;
     position: relative;
     overflow: hidden;
}
 .flexnav li ul.flexnav-show li {
     overflow: visible;
}
 .flexnav .touch-button {
     position: absolute;
     z-index: 999;
     top: 0;
     right: 0;
     width: 50px;
     height: 57px;
     display: inline-block;
     background: transparent;

     text-align: center;
}
 .flexnav .touch-button:hover {
     cursor: pointer;
}
 .flexnav .touch-button .navicon {
     visibility: hidden;
}
 .menu-button {
     position: relative;
     background: #a6a6a2;
     cursor: pointer;
}
 .menu-button.one-page {
     position: fixed;
     top: 0;
     right: 5%;
     padding-right: 45px;
}
/* .menu-button .touch-button {
     background: transparent;
     position: absolute;
     z-index: 999;
     top: 0;
     right: 0;
     width: 50px;
     height: 50px;
     display: inline-block;
     text-align: center;
}
 */
 .menu-button .touch-button .navicon {
     font-size: 16px;
     position: relative;
     top: 1em;
     color: #333333;
}

/* wbox variables.less Wert @breakpoint-desktop verwenden */
 @media all and (min-width: 768px) {
     body.one-page {
         padding-top: 70px;
    }
     .flexnav {
         overflow: visible;
    }
     .flexnav.opacity {
         opacity: 1;
    }
     .flexnav.one-page {
         top: 0;
         right: auto;
         max-width: 1080px;
    }
     .flexnav li {
         position: relative;
         width: auto;
         list-style: none;
         float: left;
        display: table;
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
         display: flex;
         overflow: visible;
         -webkit-box-align: center;
         -webkit-align-items: center;
         -ms-flex-align: center;
         align-items: center;
         -webkit-align-content: center;
         -ms-flex-line-pack: center;
                 align-content: center;
    }
    .flexnav>li::after {
        content: '/';
        
        color: #004489;
  		display: table-cell;
        -webkit-align-self: center;
        -ms-flex-item-align: center;
		-ms-grid-row-align: center;
		align-self: center;
        margin-left: 10px;
        
}
    .flexnav :last-child:after {
        content: none;
    }
     .flexnav li a {
         border-bottom: none;
         padding: 0.5em 0.5em;
         font-size:1.2em;
    }
    .flexnav>li:first-child a{
        margin-left: -0.5em;
    }
    .flexnav>li:last-child a { 
        
     }
     .flexnav li > ul {
         position: absolute;
         top: 43px;
         left: 0;
         background-color: #fff;
         -webkit-box-shadow: -1px 15px 26px 0px rgba(0,0,0,0.33);
        box-shadow: -1px 15px 26px 0px rgba(0,0,0,0.33);
    }
     .flexnav li:last-child > ul {
/*         right:0;
         left:initial;*/
     }
     .flexnav li ul  {
        margin-left: 0;
        padding-left: 0;
        min-width: 250px;
        opacity: 0.9;
    }
     .flexnav li > ul li {
         width: 100%;
         overflow: visible;
    }
     .flexnav li:last-child > ul li > ul {
         right:100%;
         left: initial;
     }
     .flexnav li ul li > ul {
         margin-left: -webkit-calc(100% - 1.03em);
         margin-left: calc(100% - 1.03em);
         top: 0;
    }
     .flexnav li ul li a {
         border-bottom: none;
         font-size:1.2em;
         padding:0.4em 0.7em;
         width: 100%;
    }
     .flexnav li ul.open {
         display: block;
         opacity: 1;
         visibility: visible;
         z-index: 1;
    }
     .flexnav li ul.open li {
         overflow: visible;
         max-height: 100px;
    }
     .flexnav li ul.open ul.open {
         margin-left: 100%;
         top: 0;
    }
     .menu-button, .flexnav .touch-button {
         display: none;
    }
}
@media (max-width:1200px){
         .flexnav li a {
         border-bottom: none;
         padding: 0.5em 0.5em;
         font-size:1.1em;
    }
}
@media (min-width:1200px){
             .flexnav li ul li a {
        /* padding: 0.4em 0.9em;*/
    }
}
@media (min-width:768px) and (max-width:920px) {

    .flexnav > li::after {
    margin-left: 2px;
    }
    .flexnav li a {
    padding: 0.5em 0.25em;
    }
}

/* no break mainnav > tablet
 tablet landscape styling*/
/*
@media (min-width: 768px) and (max-width: 991px) {
    .flexnav li a {
        padding: 0.4em 0.4em 0.4em 0.4em;
        font-size: 0.8em;   
    }
    .flexnav li ul li a {
         padding: 0.4em 0.4em;
    }

}
*/

/* wbox variables.less Wert @breakpoint-mobile verwenden */
 @media all and (max-width:767px){
     .flexnav {
        position: absolute;
        background: #004489;
     }
     .flexnav li ul {
         margin-left: 0;
         padding-left: 0;
         /*border-top: 1px dashed #fff;
         border-bottom: 1px dashed #fff;*/
     }
     .flexnav > li > ul >li:first-of-type a:before {
         content: '';
         width: 90%;
         height: 20px;
         border-top: 1px dashed #fff;
         position: absolute;
         top:0;
         left: 15px;
     }
          .flexnav > li > ul >li:last-of-type a:after {
         content: '';
         width: 90%;
         height: 20px;
         border-top: 1px dashed #fff;
         position: absolute;
         bottom:-18px;
         left: 15px;
     }
/*     .flexnav li ul li:first-of-type a {
        border-top: 1px dashed #fff;
        width: 80%;

     }*/
     .flexnav li a {
         /*border-bottom: 1px solid #999999;*/
         padding: 0.9em;
         font-size:1.2em;
         font-weight: 200;
         color:#fff;
    }
    .flexnav li ul li a {
        font-size:0.9em;
    }
    .flexnav li a.nav-selected, .flexnav li a.nav-path-selected {
    font-weight: 400;
    color: #fff;}
/*.flexnav ul li .nav-selected, .flexnav ul li a.nav-path-selected{
    color: @third-brand-color;

}*/
    /*Zweite Stufe*/
     .flexnav > li > ul > li > a {
         padding-left:-webkit-calc(1.03em + 10px);
         padding-left:calc(1.03em + 10px);
    }
     .flexnav > li > ul > li > ul > li > a {
         padding-left:-webkit-calc(1.03em + 20px);
         padding-left:calc(1.03em + 20px);
    }
     
    .flexnav .touch-button:after,
    .flexnav .touch-button:before{
        width: 15px;
        height: 2px;
        background-color: #fff;
        position: absolute;
        top: 50%;
        left: 13px;  
        content: '';
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        -webkit-transition: -webkit-transform 0.5s;
        -o-transition: transform 0.5s;
        transition: -webkit-transform 0.5s;
        transition: transform 0.5s;
        transition: transform 0.5s, -webkit-transform 0.5s;    
    }
    .flexnav .touch-button:before{
        -webkit-transform: translate(11px) rotate(-45deg);
        -ms-transform: translate(11px) rotate(-45deg);
        transform: translate(10px) rotate(-45deg);    
    }
    .flexnav  .touch-button.active:after{
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);  
    }
    .flexnav  .touch-button.active:before{
        -webkit-transform: translate(11px) rotate(45deg);
        -ms-transform: translate(11px) rotate(45deg);
        transform: translate(10px) rotate(45deg);
    } 
}

/* Flexnav Fix for MS Edge and Windows Phone */
 @media screen (-ms-high-contrast: active) and (-ms-high-contrast: none) {
     .flexnav li a {
         overflow:hidden;
    }
}