#header {
    position: relative;
    background: #ffffff;

    .navbar-brand {
        height: auto;
        margin-top: 0;
        margin-left: 0;
        margin-bottom: 0;
        padding: 2.25rem 0;

        span {
            width: 0;
            display: inline-block;
            text-indent: -99999px;
        }
    }

    .navbar-toggle {
        margin-top: 58px;

        .icon-bar {
            background: $blue;
        }
    }

    .navbar {
        margin: 0;

        ul.main-nav {
            > li {

                > a {
                    color: #474849;
                    font-size: 1.1250rem;
                    padding: 7rem 2rem 4rem;

                    &:hover,
                    &:focus,
                    &:active {
                        background: none;
                        color: lighten(#474849, 20%);
                    }
                }

                &.selected {
                    box-shadow: inset 0 -6px 0 $red;
                }

                > .dropdown-menu {
                    width: 600px;
                    padding: 3rem 0;
                    margin-left: -1rem;
                    border: 1px solid #efefef;
                    background-clip: border-box;

                    > li {
                        width: 49%;
                        display: inline-block;

                        > a {
                            display: block;
                            padding-left: 3rem;
                            padding-right: 3rem;

                            &:hover,
                            &:focus,
                            &:active {
                                background: none;
                                color: lighten(#474849, 20%);
                            }

                            > small {
                                color: #626568;
                                display: block;
                                font-size: 0.75rem;
                                font-weight: normal;
                            }
                        }

                        &:nth-child(odd) {
                            border-right: 3px solid #efefef;
                        }

                        // Tertiary Navigation
                        > .dropdown-menu {
                            margin: 0;
                            width: 100%;
                            border: none;
                            box-shadow: none;
                            position: inherit;
                            padding: 0.5rem 0 1rem;
                            display: block !important;

                            > li {
                                color: #1775bb;
                                font-size: 0.875rem;
                                margin-left: 5rem;
                                list-style: square;

                                > a {
                                    padding: 0;
                                    color: #1775bb;
                                    font-size: 0.875rem;
                                    white-space: normal;

                                    &:hover,
                                    &:focus,
                                    &:active {
                                        background: none;
                                    }
                                }
                            }
                        }
                    }
                }

                &:nth-last-child(-n+2) {
                    > .dropdown-menu {
                        margin-left: 0;
                        margin-right: -1rem;
                        right: 0 !important;
                        left: auto !important;
                    }
                }
            }
        }

        ul.login-nav {
            margin-left: 20px;

            > li {
                padding: 6rem 0 3rem;

                > a {
                    color: #ffffff;
                    font-weight: bold;

                    &:hover,
                    &:focus,
                    &:active {
                        color: #ffffff;
                        background: darken($red, 10%);
                    }

                    span {
                        margin-left: 0.5rem;
                    }
                }

                .dropdown-menu {
                    top: 100%;
                    border: none;
                    padding: 1.5rem;
                    min-width: 250px;
                    margin-top: -3rem;
                    background: $blue;

                    input,
                    select {
                        margin-bottom: 1.5rem;
                    }
                }
            }
        }
    }
}

@media (max-width: $screen-md-max) {

    body.nav-open,
    body#skrollr-body.nav-open {
        overflow: visible !important;
        transform: translate(-315px) !important;

        #alert {
            display: none;
        }
    }

    #header {

        .navbar {
            margin-top: 3rem;

            .login-nav {
                display: none;
            }
        }

        .navbar-toggle.open {
            margin: 0;
            top: 2rem;
            right: 2rem;
            z-index: 101;
            position: fixed;
            transform: translate(300px);

            .icon-bar {
                background: #ffffff;
                transform: rotate(45deg);

                &:first-of-type {
                    transform: rotate(45deg);
                }

                &:nth-child(2) {
                    display: none;
                }

                &:last-of-type {
                    margin-top: -2px;
                    transform: rotate(-45deg);
                }
            }
        }

        .navbar-collapse {
            top: 0;
            right: 0;
            bottom: 0;
            width: 90%;
            z-index: 100;
            position: fixed;
            max-width: 315px;
            transition: none;
            background: $blue-light;
            transform: translate(300px);

            &.collapsing {
                -webkit-transition: none;
                transition: none;
                display: none;
            }

            ul.main-nav {
                margin-top: 7rem;

                > li {

                    &:not(:last-of-type) {
                        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
                    }

                    > a {
                        color: #ffffff;
                        padding: 1rem 2rem;

                        &:hover,
                        &:focus,
                        &:active {
                            color: #efefef;
                            background: none;
                        }
                    }

                    > ul.dropdown-menu {
                        border: none;
                        background: $blue;
                        padding: 1rem 0 1rem 2rem;

                        li {
                            width: auto;
                            display: block;

                            a {
                                color: #ffffff;
                            }
                        }
                    }
                }
            }
        }
    }
}

@media (max-width: $screen-sm-max) {
    #header {
        .navbar-brand {
            margin-left: 15px;
        }
    }
}
