div.navbar.navbar-inverse.linz-navbar-inverse {
    background: @dark;
    transition: 300ms -webkit-transform;
    transition: 300ms -ms-transform;
    transition: 300ms -moz-transform;
    transition: 300ms -o-transform;
    transition: 300ms transform;

    a {
        color: #ffffff;
    }

    .navbar-header {
        float: left;

        button.navbar-toggle {
            display: block;
            float: left;
            margin: 9px 0 0 12px;
            border: none;
            transition: 300ms -webkit-transform;
            transition: 300ms -ms-transform;

            @media (min-width: @screen-sm-min) {
                margin: 9px 6px 0 0;
            }

            &:focus {
                background: @dark;
            }

            &:hover {
                background: darken(@dark, 5%);
            }

            &:focus:active {
                background: @dark;
            }
        }

        .navbar-brand {
            margin-left: 0px;
        }
    }

    .navbar-right {
        float: right;

        @media (max-width: @screen-xs-max) {
            .navbar-nav {
                margin: 5px -15px;
            }
        }
    }

    ul.nav li a {
        color: #b7c5dc;
    }
}

nav.linz {
    width: @nav-width;
    padding: 0;
    background: lighten(@dark, 2%);
    overflow-y: auto;

    .btn-close {
      color: #fff;
    }

    .offcanvas-header {
        height: 50px;
        padding: 15px 15px;
    }

    .offcanvas-title {
        color: #fff;
        margin-top: 0;
    }

    .offcanvas-body {
        padding: 0;
    }

    ul {
        list-style: none;
        padding: 0;

        & > li {
            position: relative;
            margin-bottom: 2px;
            font-weight: 600;

            &.active:before {
                content: ' ';
                position: absolute;
                width: 4px;
                height: 100%;
                background: #ffffff;
            }

            a {
                display: block;
                padding: 10px 6px 10px 14px;
                background: fade(#ffffff, 10%);
                color: fade(#ffffff, 90%);

                &:hover {
                    background: fade(#ffffff, 20%);
                    color: #ffffff;
                    text-decoration: underline;
                }
            }

            & > ul {
                margin-top: 2px;
                padding: 0;

                & > li {
                    font-weight: 300;

                    a {
                        padding-left: 36px;
                    }
                }
            }
        }
    }
}