#mainnavigation {
    align-items: unset;
    flex-direction: column;
    text-transform: uppercase;

    >div {
        display: flex;
    }

    .nav-top {
        >.nav {
            margin: 0 $grid-gutter-width;
        }

        .nav-link {
            @include Rift-Regular;
            color: $white;
            opacity: .5;
            letter-spacing: 1.6px;
            transition: $transition-fade;

            @include hover-focus {
                opacity: 1;
            }
        }
    }

    .nav-bottom {
        .nav {
            height: fit-content;
            @include Rift-Bold;
            font-size: 22px;
            letter-spacing: 2.2px;
        }

        .nav-link {
            display: inline-block;
        }
    }

    // mobile
    @include media-breakpoint-down(md) {
        background-color: $green;
        background: $hsg-gradient;
        display: flex;
        height: calc(100vh - 100px);
        position: absolute;
        overflow: auto;
        width: 100%;
        z-index: 100;

        &:not(.show) {
            display: none;
        }

        .nav-top {
            flex-direction: column;

            #header-infopoint {
                display: none;
            }

            #header-socialmedia {
                margin: $grid-gutter-width;
            }
        }

        .nav-bottom {
            flex-direction: column;
            margin-left: $grid-gutter-width;
            order: -1;

            .nav {
                flex-direction: column;

                .nav-link {
                    color: white;
                }
            }
        }
    }

    // Desktop
    @include media-breakpoint-up(lg) {
        .nav-mobile-toggle {
            display: none;
        }

        >div {
            justify-content: space-between;
        }

        .nav-top {
            align-items: center;
            height: 50px;
        }

        .nav-bottom {
            align-items: center;
            border-top: 1px solid rgba($white, .1);
            height: 100px;

            .nav {
                align-items: center;

                @include hover-focus {
                    .nav-item .nav-link {
                        // fading out the other menu items
                        color: rgba($white, .5);

                        &-icon {
                            opacity: .5;
                        }
                    }
                }

                .nav-item {
                    position: relative;

                    &::after {
                        content: "";
                        @include position(absolute, null 1rem 0);
                        height: 3px;
                        background: $orange-gradient;
                        opacity: 0;
                        transition: $transition-fade;
                    }

                    &.active::after {
                        opacity: .8;
                    }

                    @include hover-focus {
                        &::after {
                            opacity: 1;
                        }
                    }

                    @include plain-hover-focus {
                        .nav-link {
                            color: white;
                            transition: $transition-base;

                            &-icon {
                                opacity: 1;
                                transition: $transition-base;
                            }
                        }
                    }
                }

                &:first-child {
                    margin-left: $grid-gutter-width;
                }

                &:last-child {
                    align-items: center;
                    height: 100%;
                    color: $white;
                    background-color: $orange;
                    padding: 0 $grid-gutter-width;

                    .nav-item::after {
                        display: none;
                    }
                }
            }
        }
    }

    // smaller desktop version
    @include media-breakpoint-between(lg, lg) {
        .nav-top {
            >.nav {
                margin: 0 $grid-gutter-width/2;

                .nav-link {
                    @include padding(null 10px);
                }
            }
        }

        .nav-bottom {
            .nav {
                font-size: 20px;
                letter-spacing: 2px;

                .nav-link {
                    @include padding(null 10px);
                }

                &:first-child {
                    margin-left: $grid-gutter-width/2;
                }

                &:last-child {
                    padding: 0 $grid-gutter-width/2;
                }
            }
        }
    }
}