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

                    NAVIGATION

----------------------------------------------------------- */
.mobile-nav{display: none;}
.menu--mainnav{
    margin-left: 2rem;
}
@media screen and (max-width: 1280px){
    .menu--mainnav{
        margin-left: 0;
    }
}
.navigation{display: table;width: 100%;}
.menu{float: right;margin-top: 2.8rem;transition: 0.5s ease-out}
.menu li{float: left;}
.menu > li > a{
    padding: 0 1rem;
    line-height: 44px;
    display: block;
    color: #575756;
    transition: 0.3s ease;
    font-size: 1.5rem;
}
.menu a:hover,
.menu .active{color: #8fad25;}
.menu .active > a{color: #8fad25;}
.menu .active .sub--trigger,
.menu .active .sub--sub-trigger{color: #fff;}
.navigation a:hover,
.navigation a:active{}


@media screen and (max-width: 853px){
    
    .navigation a{padding: 0 0.75em;}
}

@media screen and (max-width: 620px){
    .mobile-nav{display: table;}
    .tile .off-canvas,
    .full-width .off-canvas{
        position: fixed;
        top: 80px;
        left: 5%;
        width: 90%;
        height: 70vh;
        display: block;
        z-index:666;
        background: rgba(255,255,255,0.95);
        opacity: 0;
        transform: scale(0.5);
        -webkit-transition: 0.4s ease-out;
        -moz-transition: 0.4s ease-out;
        transition: 0.4s ease-out;
        visibility: hidden;
    }
    .off-canvas-in .wrapper{
        position: fixed;
        width: 100%;
        height: 100vh;
        overflow: hidden;
    }
    .off-canvas-in .off-canvas{
        visibility: visible;
        opacity: 1;
        transform: scale(1);
    }
    .off-canvas .container{
        height: 100%;
        /*overflow-y: scroll; */
    }
    .off-canvas .container > div{
        padding: 0;
        height: 100%;
        position: relative;
        /*overflow: hidden;*/
    }
    .off-canvas ul{
        width: 100%;
        margin: 2rem 0;
        float: none;
        transition: 0.3s ease;
    }
    .off-canvas li{
        display: block;
        width: 100%;
    }
    .off-canvas .hasSub{
        display: table;
        display: flex;
        position: static;
    }
    .hasSub > a{width: 70%;}
    .hasSub .sub--trigger,
    .hasSub .sub--sub-trigger{width: 20%;padding: 0;border: 0;}
    .hasSub > .sub--menu{
        position: absolute;
        top: 0;
        left: 15%;
        width: 85%;
        height: 70vh;
        background: transparent;
        -webkit-transform: translate(100%,0);
        -moz-transform: translate(100%,0);
        transform: translate(100%,0);
    }
    .menu--mainnav{margin-left: 0;-webkit-transition: 0.3s ease-out;transition: 0.3s ease-out;padding-top: 1.5rem;}
    .sub--menu{padding: 0;}
    /*
    .sub--open .sub--menu{
        -webkit-transform: translate(117.5%,0);
        -moz-transform: translate(117.5%,0);
        transform: translate(117.5%,0);
    }
    */
    .sub--open .sub--menu{
        -webkit-transform: translate(100%,0);
        -moz-transform: translate(100%,0);
        transform: translate(100%,0);
    }
    .menu.sub--child-visible{
        -webkit-transform: translate(-85%,0);
        -moz-transform: translate(-85%,0);
        transform: translate(-85%,0);    
    }
    .off-canvas a{
        text-align: left;
    }
    .off-canvas-trigger{float: right;}
    .sub--menu .sub--closer, .sub--sub-menu .sub--sub-closer{display: block;}
}




/*

        NAVIGATION SKIN material design

*/
@media screen and (max-width: 620px){
    .menu{overflow: hidden;}
    .sub--child-visible{overflow: inherit;}
    .off-canvas li{
        background: transparent;
        text-align: center;
        line-height: 52px;
    }
    .off-canvas a{
        box-sizing: border-box;
        color: #dedede;
        font-weight: 400;
        text-align: center;
    }
    .hasSub > a{width: 80%;}
    .hasSub .sub--trigger{
        height: 44px;
        background: transparent;
        position: static;
        border-left: 0;
        color: #dedede;
        font-size: 20px;
        text-align: center;
        line-height: 42px;
    }
    .sub--trigger-icon{
        display: block;
        transition: 0.5s ease-out;
    }
    .clicked .sub--trigger-icon{
        -webkit-transform: rotate(225deg);
        -moz-transform: rotate(225deg);
        transform: rotate(225deg);
    }
    .off-canvas .sub--open{background: #8fae12;}
    .sub--open .sub--menu{
        box-shadow: -1px 0 3px rgba(0,0,0,0.4);
        height: calc(100vh - 117px);
    }
    .sub--menu li{
        border-top: 0px solid #f7f7f7;
        border-bottom: 0px solid #c8c8c8;
        background: transparent;
    }
    
    .sub--closer button,
    .sub--sub-closer button{
        height: 44px;
        width: 100%;
        display: block;
        box-sizing: border-box;
        border: 0px;
        background: transparent;
    }
        
    .sub--menu a{
        text-overflow: ellipsis;
        overflow: hidden;
        color: #535353;
        line-height: 44px;
        display: block;
        text-indent: 1rem;
    }
    .icon--Leistungen .sub--menu li a:hover
    .icon--Leistungen .sub--menu li.active a{background: transparent; padding-left: 0.5rem;}






}