#mainnav {
    @extend %clearfix;
    display: none;
    position: absolute;
    top: 77px;
    right: 0;
    z-index: 123215;
    clear: both;
    @include box-shadow(0px 1px 1px $grey3);
    width: 100%;
    background: #FFF;

    a {
        position: relative;
        display: block;
        margin: 0 16px;
        padding: 8px 0;
        color: #000;
        border-bottom: 1px dotted #000000;

        .icon {
            position: absolute;
            top: 50%;
            right: 8px;
            width:50px;
            text-align: right;
            @include transform(translateY(-50%));
        }

        &:hover {
            color: $red;
        }
    }

    li:last-child {
        a {
            border: none;
        }
    }

    li li a {
        padding-left: 16px;
    }

    li li li a {
        padding-left: 32px;
    }

    ul ul {
        display: none;
    }

    @include breakpoint($mobile-l) {
        display: block;
        position: static;
        width: auto;
        background: $grey1;

        ul ul {
            display: block;
        }

        .inner {
            > ul {

                > li {
                    position: relative;
                    float: left;

                    > a {
                        display: block;
                        margin: 0;
                        padding: 16px;
                        color: #000;
                        border: none;
                        @include transition-property(all);
                        @include transition-duration(0.5s);

                        &:hover {
                            background: $red;
                            color: #FFF;
                        }
                    }

                    &:hover {
                        > a {
                            background: $red;
                            color: #FFF;
                        }
                    }

                    ul {
                        position: absolute;
                        z-index: -1;
                        @include opacity(0);
                    }

                    // 2. Ebene
                    > ul {
                        top: 51px;
                        left: 0;
                        border-top: 6px solid $red;
                        background: #FFF;

                        @include transition-property(all);
                        @include transition-duration(0.5s);

                        li {
                            position: relative;
                            display: block;
                            width: 280px;
                        }

                        a {
                            position: relative;
                            display: block;
                            margin: 0 16px;
                            padding: 8px 0;
                            color: #000;
                            border-bottom: 1px dotted #000000;

                            &:hover {
                                color: $red;
                            }
                        }

                        > li {
                            > ul {
                                top: 0;
                                right: 0;
                                @include transform(translateX(100%));
                                background: #FFF;

                                &.left {
                                    left: 0;
                                    right: auto;
                                    @include transform(translateX(-100%));
                                }
                            }

                            &.open, &:hover {
                                > ul {
                                    display: block;
                                    z-index: 5;
                                    @include opacity(1);
                                }
                            }
                        }
                    }

                    &.open, &:hover {
                        > ul {
                            //display: block;
                            z-index: 5;
                            @include opacity(1);
                        }
                    }

                    li:last-child > a {
                        border: none;
                    }
                }
            }
        }
    }
}