/* 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%;
}
 .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;
     list-style-type: none;
}
 .flexnav li a {
     position: relative;
     display: block;
     padding: 1.03em;
     z-index: 2;
     border-bottom: 1px solid rgba(0, 0, 0, 0.15);
     -webkit-transition: color 0.4s ease-in-out;
     -o-transition: color 0.4s ease-in-out;
     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: 62px;
     height: 62px;
     display: inline-block;
     background: #acaca1;
     background: rgba(0, 0, 0, 0.075);
     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: block;
         overflow: visible;
    }
     .flexnav > li {
         /*padding: 0 0.5em;*/
     }
     .flexnav li a {
         border-bottom: none;
             padding: 0.2em 0.5em 0.2em;
         font-size:1.2em;
    }
     .flexnav > li > a {
         border-bottom: 5px solid transparent;
     }

     .flexnav > li.nav-selected > a,
     .flexnav > li.nav-path-selected > a {
         /*color: #333;*/
         box-shadow: 0px 0px 2px  rgba(0,0,0,0.15);
         padding: 0.2em 0.5em 0.2em;
     }

    .flexnav>li:last-child { 
        /*padding-right: 0;*/
     }
     .flexnav li > ul {
         position: absolute;
         top: auto;
         left: 0;
         display: none;
    }
     .flexnav li:last-child > ul {
         right:0;
         left:initial;
     }
     .flexnav li:last-child > ul li {
         padding-right: 0;
     }
     .flexnav li ul  {
        margin-left: 0px;
        margin-top: 1px;
        min-width: 200px;
        padding: 0;
    }
     .flexnav li > ul li {
         width: 100%;
         overflow: visible;
    }
     .flexnav > li > ul > li {
          background: rgba(255,255,255,0.9);
     }
     .flexnav li:last-child > ul li > ul {
         right:100%;
         left: initial;
     }
     .flexnav li ul li > ul {
         margin-left: -webkit-calc(100% - 27px);
         margin-left: calc(100% - 27px);
         top: 5px;
    }
     .flexnav li ul li a {
         border-bottom: none;
         font-size:1.05em;
         padding: 0.2em 0.5em 0.2em;
    }
     .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;
    }
     ul.flexnav-show { z-index: 50; }
     .menu-button, .flexnav .touch-button {
         display: none;
    }
}
@media (max-width:1200px){
         .flexnav li a {
         font-size:1.2em;
    }
}
@media (min-width:1200px){
             .flexnav li ul li a {
             padding: 0.2em 0.5em 0.2em;
    }
}

/* 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:992px){
     .flexnav {
/*        position: absolute;*/
        background: #ffffff;
/*        top: 60px;*/
     }
     .flexnav li ul {
         margin-left: 0;
         padding-left: 0;
     }
     
     .flexnav li a {
         
         font-size:1.2em;
    }
    /*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: #333333;
        position: absolute;
        top: 50%;
        left: 20px;  
        content: '';
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        -webkit-transition: -webkit-transform 0.5s;
        transition: -webkit-transform 0.5s;
        -o-transition: 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(10px) 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(10px) 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;
    }
}