#header {
    background: #fff;
    position: relative;
    z-index: 999
}

    #header #mobileMenu {
        display: none
    }

    #header .logo {
        margin: 20px 0 10px
    }

@media only screen and (min-width: 768px) and (max-width: 959px) {
    #header .logo {
        margin-top: 30px
    }
}

#header .primaryNavWrapper {
    display: flex;
    justify-content: space-between;
    align-items: center
}

@media only screen and (max-width: 767px) {
    #header .primaryNavWrapper {
        display: none !important
    }
}

#header .ultratop {
    margin: 20px 0 10px
}

@media only screen and (max-width: 767px) {
    #header .ultratop {
        display: none
    }
}

#header .ultratop > div > a, #header .ultratop > a {
    font-size: 1.5rem;
    border-radius: 5px;
    font-weight: bold;
    min-width: 180px;
    border: 2px solid transparent
}

    #header .ultratop > div > a ~ a, #header .ultratop > a ~ a {
        margin-left: 10px
    }

    #header .ultratop > div > a.find-officer, #header .ultratop > a.find-officer {
        background: #fff;
        color: #d07511;
        border: 2px solid #d07511
    }

        #header .ultratop > div > a.find-officer.active, #header .ultratop > div > a.find-officer:hover, #header .ultratop > a.find-officer.active, #header .ultratop > a.find-officer:hover {
            background: #d07511;
            color: #fff
        }

    #header .ultratop > div > a.login, #header .ultratop > a.login {
        background: #23356f
    }

        #header .ultratop > div > a.login:hover, #header .ultratop > a.login:hover {
            background: #4f5d8c
        }

#header .loanofficer-search-wrapper {
    display: inline-block;
    vertical-align: top;
    margin-right: 6px;
    position: relative
}

    #header .loanofficer-search-wrapper .togglesNext + div {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 999
    }

    #header .loanofficer-search-wrapper .togglesNext.active {
        border-radius: 5px 5px 0 0
    }

    #header .loanofficer-search-wrapper .loanofficer-search {
        width: 100%;
        border-radius: 0 0 5px 5px;
        background: #fff;
        border: 2px solid #d07511;
        text-align: center;
        padding: 10px
    }

        #header .loanofficer-search-wrapper .loanofficer-search > a {
            font-family: "Lato",Helvetica,Arial,sans-serif;
            font-size: 1.4rem;
            font-weight: 900;
            font-style: normal;
            text-transform: uppercase;
            text-decoration: none;
            line-height: 1.2;
            letter-spacing: 1px
        }

        #header .loanofficer-search-wrapper .loanofficer-search > span {
            color: #7984ab;
            display: block;
            font-weight: bold;
            margin: 5px 0
        }

        #header .loanofficer-search-wrapper .loanofficer-search form {
            width: auto
        }

            #header .loanofficer-search-wrapper .loanofficer-search form button {
                bottom: 12px;
                right: 12px
            }

#header .searchWrapper {
    position: relative;
    padding-bottom: 10px
}

    #header .searchWrapper .togglesNext {
        font-size: 16px;
        color: #d07511
    }

        #header .searchWrapper .togglesNext:hover {
            color: #a16f38
        }

        #header .searchWrapper .togglesNext i {
            display: block;
            text-align: center
        }

        #header .searchWrapper .togglesNext.active i:before {
            content: "\f00d"
        }

        #header .searchWrapper .togglesNext + div {
            display: none;
            position: absolute;
            top: 33px;
            right: 0;
            padding: 5px;
            background: #fff
        }

@media only screen and (max-width: 767px) {
    #header {
        padding: 10px 0
    }

        #header .primaryNavLink, #header .logo, #header .mobileInlineBlock {
            display: inline-block;
            vertical-align: middle;
            text-align: center
        }

        #header .primaryNavLink, #header .mobileInlineBlock {
            font-family: "Open Sans",Helvetica,Arial,sans-serif;
            font-size: 1.3rem;
            font-weight: 400;
            font-style: normal;
            text-transform: uppercase;
            color: #777;
            width: 15%;
            text-align: center;
            cursor: pointer
        }

            #header .primaryNavLink a, #header .mobileInlineBlock a {
                text-decoration: none;
                color: inherit
            }

            #header .primaryNavLink i, #header .mobileInlineBlock i {
                display: block;
                font-size: 27px
            }

        #header .logo {
            width: 60%;
            margin: 0 5%
        }
}

@media only screen and (min-width: 768px) {
    .primaryNav {
        flex: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-left: 20px;
        z-index: 2
    }

        .primaryNav > li {
            flex: 1 1 auto
        }

            .primaryNav > li > ul {
                display: none;
                position: absolute;
                top: 100%;
                left: 0;
                width: 960px;
                z-index: 999;
                min-height: 390px;
                padding: 3em 0 2em
            }

                .primaryNav > li > ul:after {
                    content: "";
                    display: block;
                    height: 0;
                    clear: both
                }

                .primaryNav > li > ul:before {
                    content: "";
                    position: absolute;
                    width: 100vw;
                    left: calc(-50vw + (960px/2));
                    height: 100%;
                    top: 0;
                    z-index: -1;
                    background: #dfdfdf
                }
}

@media only screen and (min-width: 768px) and (min-width: 768px) and (max-width: 959px) {
    .primaryNav > li > ul:before {
        left: calc(-50vw + (768px/2))
    }
}

@media only screen and (min-width: 768px) and (min-width: 420px) and (max-width: 767px) {
    .primaryNav > li > ul:before {
        left: calc(-50vw + (420px/2))
    }
}

@media only screen and (min-width: 768px) and (max-width: 419px) {
    .primaryNav > li > ul:before {
        left: calc(-50vw + (300px/2))
    }
}

@media only screen and (min-width: 768px) {
    .primaryNav > li > ul > li {
        display: inline-block;
        vertical-align: top;
        width: calc(90% / 3);
        margin-right: calc(10% / 3)
    }

        .primaryNav > li > ul > li.haschildren {
            float: left
        }

            .primaryNav > li > ul > li.haschildren:nth-child(5) {
                clear: left
            }

    .primaryNav > li.fidelity-bank > ul > li {
        width: calc(90% / 4);
        margin-right: calc(10% / 4)
    }
}

.primaryNav > li {
    font-family: "Open Sans",Helvetica,Arial,sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    font-style: normal;
    text-align: center
}

@media only screen and (max-width: 959px) {
    .primaryNav > li {
        font-size: 1.4rem
    }
}

@media only screen and (max-width: 767px) {
    .primaryNav > li {
        font-size: 1.5rem
    }
}

.primaryNav > li > a {
    display: inline-block;
    color: #23356f;
    text-decoration: none;
    text-transform: uppercase;
    position: relative;
    padding: 5px 0 17px
}

    .primaryNav > li > a:hover {
        color: #7984ab
    }

    .primaryNav > li > a.active:after {
        content: "";
        position: absolute;
        left: 50%;
        margin-left: -10px;
        width: 0;
        height: 0;
        border-width: 0 13px 10px 13px;
        border-style: solid;
        border-color: transparent transparent #dfdfdf;
        bottom: 0
    }

    .primaryNav > li.inPath > a:not(.inactive):before, .primaryNav > li.inPath > a.inactive.landed:before, .primaryNav > li > a.active:before, .primaryNav > li.active > a:before {
        content: '';
        height: 2px;
        width: 100%;
        background: #a16f38;
        position: absolute;
        bottom: 15px;
        left: 0
    }

@media only screen and (max-width: 767px) {
    .primaryNav > li.inPath > a:not(.inactive):before, .primaryNav > li.inPath > a.inactive.landed:before, .primaryNav > li > a.active:before, .primaryNav > li.active > a:before {
        display: none !important
    }
}

.primaryNav > li > ul {
    text-align: left
}

    .primaryNav > li > ul > li {
        margin-top: 1em;
        padding-bottom: 10px;
        border-bottom: 1px solid #7984ab;
        text-align: left
    }

        .primaryNav > li > ul > li > a {
            font-family: "Open Sans",Helvetica,Arial,sans-serif;
            font-size: 1.8rem;
            font-weight: 400;
            font-style: normal;
            color: #23356f;
            text-decoration: none;
            display: block;
            position: relative;
            padding-left: 17px;
            line-height: 1.1
        }

            .primaryNav > li > ul > li > a:hover {
                color: #7984ab
            }

            .primaryNav > li > ul > li > a:before {
                content: "";
                font-family: FontAwesome;
                font-weight: normal;
                font-style: normal;
                text-decoration: inherit;
                -webkit-font-smoothing: antialiased;
                display: inline-block;
                vertical-align: text-bottom;
                font-size: 16px;
                position: absolute;
                left: 1px;
                top: 1px
            }

            .primaryNav > li > ul > li > a.haschildren:before {
                transform: rotate(90deg)
            }

        .primaryNav > li > ul > li > ul {
            margin-top: 10px;
            padding-left: 17px
        }

            .primaryNav > li > ul > li > ul > li {
                margin: 0 0 5px;
                line-height: 1.25
            }

                .primaryNav > li > ul > li > ul > li > a {
                    font-size: 1.3rem;
                    font-weight: 400;
                    color: #333;
                    text-decoration: none
                }

                    .primaryNav > li > ul > li > ul > li > a:hover {
                        text-decoration: underline
                    }

                .primaryNav > li > ul > li > ul > li.inPath > a {
                    text-decoration: underline
                }

@media only screen and (min-width: 768px) and (max-width: 959px) {
    .primaryNav > li > ul {
        width: 768px
    }
}

@media only screen and (min-width: 768px) and (max-width: 959px) {
    .primaryNav {
        margin-left: 0;
        margin-right: 5px
    }
}

.primaryNav .close {
    cursor: pointer;
    position: absolute;
    top: 0;
    width: 100%;
    text-align: right;
    left: 0;
    color: #23356f;
    font-size: 1.3rem;
    text-transform: uppercase;
    padding: 1.5em 0 0
}

@media only screen and (max-width: 767px) {
    #header #mobileMenu {
        background: linear-gradient(to bottom, #4f5d8c 60px, #fff 60px);
        position: fixed;
        top: 0;
        left: 0;
        display: block;
        height: 0;
        overflow: hidden;
        width: 100%;
        min-width: 300px;
        z-index: 900;
        transition: all 0.5s
    }

        #header #mobileMenu.show-menu {
            overflow: auto;
            height: 100%
        }

        #header #mobileMenu .close {
            cursor: pointer;
            position: absolute;
            top: 20px;
            text-align: right;
            right: 15px;
            font-size: 1.3rem;
            color: #fff;
            text-transform: uppercase
        }

        #header #mobileMenu .site-search {
            margin-left: 15px;
            margin-top: 5px
        }

        #header #mobileMenu .ultratop {
            display: block;
            margin-left: 15px
        }

            #header #mobileMenu .ultratop > a {
                display: block;
                width: 260px
            }

                #header #mobileMenu .ultratop > a ~ a {
                    margin-left: 0;
                    margin-top: 10px
                }

            #header #mobileMenu .ultratop .loanofficer-search-wrapper {
                margin-bottom: 10px;
                display: block;
                width: 260px
            }

                #header #mobileMenu .ultratop .loanofficer-search-wrapper > a {
                    display: block
                }

        #header #mobileMenu .primaryNav {
            padding-top: 10px;
            clear: both
        }

            #header #mobileMenu .primaryNav > li {
                background: #dfdfdf;
                padding: 0;
                position: relative;
                text-align: left
            }

                #header #mobileMenu .primaryNav > li:after {
                    content: "";
                    position: absolute;
                    left: 2.5%;
                    width: 95%;
                    bottom: 0;
                    height: 1px;
                    background: #4f5d8c
                }

                #header #mobileMenu .primaryNav > li.active:after, #header #mobileMenu .primaryNav > li:last-of-type:after {
                    display: none
                }

                #header #mobileMenu .primaryNav > li.inPath, #header #mobileMenu .primaryNav > li.active {
                    background: #fff
                }

                    #header #mobileMenu .primaryNav > li.inPath > a, #header #mobileMenu .primaryNav > li.active > a {
                        border-bottom: none
                    }

                #header #mobileMenu .primaryNav > li > a {
                    padding: 10px 20px
                }

                #header #mobileMenu .primaryNav > li > ul {
                    padding: 0 20px;
                    background: #fff
                }

                    #header #mobileMenu .primaryNav > li > ul ul {
                        display: none !important
                    }

                    #header #mobileMenu .primaryNav > li > ul > li {
                        padding-left: 20px;
                        border-bottom: none;
                        margin: 0;
                        padding-bottom: 20px
                    }

                        #header #mobileMenu .primaryNav > li > ul > li:not(.inPath) > a.haschildren:before {
                            transform: none
                        }

                        #header #mobileMenu .primaryNav > li > ul > li.inPath > ul {
                            display: block !important
                        }

                        #header #mobileMenu .primaryNav > li > ul > li:last-of-type {
                            border-bottom: none
                        }

            #header #mobileMenu .primaryNav .nthTier-2 {
                max-height: 0;
                overflow: hidden;
                transition: max-height .3s, margin .3s, padding .3s
            }

            #header #mobileMenu .primaryNav .active > ul {
                max-height: 1000px
            }

            #header #mobileMenu .primaryNav .inactive > ul {
                margin-top: 0;
                margin-bottom: 0;
                padding-top: 0;
                padding-bottom: 0
            }
}
/*# sourceMappingURL=header.css.map */