﻿#wrap {
    padding: 80px 0 0;
}

#header > .wrap {
    grid-template-areas: "logo nav secondary" "menu menu menu"
}

.wrap {
    margin: 0 auto;
    max-width: 1200px;
}

@media screen and (max-width:1428.57143px) {
    .wrap {
        margin: 0 8%
    }
}

#header {
    background: #fff;
    -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, .1);
    box-shadow: 0 0 15px rgba(0, 0, 0, .1);
    left: 0;
    padding: 1em 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1001;
}

body.admin-bar #header {
    border-top: 32px solid #fff;
}

@media screen and (max-width:782px) {
    body.admin-bar #header {
        border-top-width: 46px;
    }
}

#header li, #header ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#header > .wrap {
    -ms-grid-columns: auto 1fr auto;
    display: -ms-grid;
    display: grid;
    grid-template-areas: ". . links" "logo nav secondary" "menu menu menu";
    grid-template-columns: auto 1fr auto;
}

#header .logo {
    -ms-flex-item-align: center;
    align-self: center;
    grid-area: logo;
    -ms-grid-column: 2;
    -ms-grid-row: 1;
    padding: 0 1em 0 0;
}

    #header .logo img {
        display: block;
        margin-left: -20px;
        width: 170px;
    }

#header .secondary {
    -ms-flex-item-align: end;
    -ms-grid-row-align: end;
    align-self: end;
    grid-area: secondary;
    -ms-grid-column: 3;
    -ms-grid-row: 2;
    position: relative;
    top: 3px;
    white-space: nowrap;
}

#header .toggle.search {
    color: #707070;
    display: inline-block;
    font-size: .8rem;
    line-height: 1;
    margin: 0 1em 0 0;
    padding: .5em;
}

    #header .toggle.search .icon {
        display: inline-block;
        font-size: 1.2em;
        text-align: center;
        width: 1em;
    }

#header .links {
    -ms-grid-row-span: 3;
    font-size: .8rem;
    grid-area: links;
    -ms-grid-column: 3;
    -ms-grid-row: 1;
    text-align: right;
}

    #header .links a {
        font-weight: inherit;
    }

    #header .links .contact {
        display: none;
    }

#header form.search {
    -ms-flex-item-align: end;
    -ms-grid-row-align: end;
    align-self: end;
    border-bottom: 1px solid #707070;
    display: none;
    flex-wrap: nowrap;
    grid-area: nav;
    -ms-grid-column: 2;
    -ms-grid-row: 2;
    margin: 0 1em 0 0;
}

    #header form.search button {
        background: none;
        border: none;
        border-radius: 0;
        color: #000;
        margin: 0;
        padding: 0 .5em;
    }

    #header form.search input.query {
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        border: 0;
        border-radius: 0;
        flex-grow: 1;
        font-size: 16px;
        padding: 5px;
        width: 100%
    }

#header #nav {
    grid-area: nav;
    -ms-grid-column: 2;
    -ms-grid-row: 2;
}

#header .hover-menu {
    -ms-grid-column-span: 3;
    display: none;
    grid-area: menu;
    -ms-grid-column: 1;
    -ms-grid-row: 3;
}

    #header .hover-menu.on {
        display: block;
    }

#header .toggle.nav {
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
    border: 4px solid;
    border-width: 2px 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #58b871;
    display: none;
    grid-area: toggle-nav;
    height: 16px;
    margin: 0;
    position: relative;
    width: 30px;
    z-index: 1007;
}

body.has-js #header .toggle.nav {
    -webkit-transition: all .4s;
    transition: all .4s;
}

#header .toggle.nav:after {
    background: currentColor;
    content: " ";
    display: block;
    height: 2px;
    left: 0;
    position: absolute;
    top: 5px;
    width: 100%
}

#header .toggle.nav .bar {
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}

    #header .toggle.nav .bar:after, #header .toggle.nav .bar:before {
        background: currentColor;
        content: " ";
        display: block;
        height: 2px;
        left: 0;
        position: absolute;
        top: 3px;
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
        width: 100%
    }

    #header .toggle.nav .bar:after {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

body.menu-on #header {
    background-color: #fff;
}

    body.menu-on #header .toggle.nav {
        border-color: transparent;
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }

        body.menu-on #header .toggle.nav:after {
            opacity: 0;
        }

        body.menu-on #header .toggle.nav .bar {
            opacity: 1;
        }

body.search-on #header #nav {
    display: none;
}

body.search-on #header form.search {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

body.search-on #header .toggle.search .icon:before {
    content: "\f00d"
}

body.search-on #header .toggle.search .label {
    visibility: hidden;
}

.btn-wrapper.contact {
    display: inline-block;
}

@media screen and (min-width:941px) {
    #header .hover-menu {
        padding: 2em 1em;
    }

        #header .hover-menu a {
            color: inherit;
            display: block;
            font-weight: inherit;
        }

            #header .hover-menu a:hover, #header .hover-menu li.hover > a {
                color: #58b871;
            }

        #header .hover-menu li {
            margin: 0 0 .8em;
        }

        #header .hover-menu > ul {
            -webkit-box-pack: start;
            -ms-flex-pack: start;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            font-size: .8em;
            justify-content: flex-start;
            list-style: none;
            margin: 0;
            padding: 0;
            position: relative;
        }

            #header .hover-menu > ul > li {
                margin: 0 4em 0 0;
            }

                #header .hover-menu > ul > li:last-child {
                    margin-right: 0;
                }

                #header .hover-menu > ul > li.overview {
                    display: none;
                }

                #header .hover-menu > ul > li > a {
                    display: block;
                    font-size: 1.2em;
                    font-weight: 500;
                }

                    #header .hover-menu > ul > li > a:after {
                        -webkit-font-smoothing: antialiased;
                        -moz-osx-font-smoothing: grayscale;
                        color: #58b871;
                        content: "\f105";
                        display: inline;
                        font-family: FontAwesome;
                        font-weight: 400;
                        margin: 0 0 0 .5em;
                        position: absolute;
                        text-decoration: none;
                        text-rendering: auto;
                        text-transform: none !important;
                    }

                #header .hover-menu > ul > li > ul {
                    -webkit-box-sizing: border-box;
                    box-sizing: border-box;
                    display: block;
                    font-size: .9em;
                    white-space: nowrap;
                }

                    #header .hover-menu > ul > li > ul > li {
                        margin: .5em 0;
                    }

                #header .hover-menu > ul > li.hover > ul {
                    display: block;
                }

            #header .hover-menu > ul.multirow {
                -ms-flex-wrap: wrap;
                flex-wrap: wrap;
            }

                #header .hover-menu > ul.multirow > li {
                    -ms-flex-preferred-size: 20%;
                    flex-basis: 20%;
                    margin-bottom: 2em;
                }
}

@media screen and (max-width:940px) {
    #header {
        padding: .7em 0;
    }

        #header .hover-menu {
            display: none !important;
        }

        #header > .wrap {
            -ms-grid-columns: auto 1fr auto;
            grid-template-areas: "toggle-nav logo secondary" "nav nav nav" "links links links";
            grid-template-columns: auto 1fr auto;
        }

        #header .toggle.nav {
            display: block;
        }

        #header .toggle.search {
            -ms-flex-item-align: center;
            -ms-grid-row-align: center;
            align-self: center;
            font-size: 20px;
            margin: 0;
            padding: 0;
            text-align: center;
            width: 30px;
        }

            #header .toggle.search .label {
                display: none;
            }

        #header .logo {
            margin: 0 auto;
            padding: 0;
            text-align: center;
        }

            #header .logo a, #header .logo img {
                display: inline-block;
            }

            #header .logo img {
                margin: 0 auto;
            }

        #header .secondary {
            -ms-flex-item-align: center;
            -ms-grid-row-align: center;
            align-self: center;
        }

            #header .secondary .contact, a.login {
                display: none;
            }

        #header .links {
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            align-items: center;
            display: none;
            justify-content: space-between;
            margin: 0;
            text-align: center;
        }

            #header .links .contact {
                display: inline-flex;
            }

        #header form.search {
            -ms-flex-item-align: center;
            align-self: center;
            grid-area: logo;
            -ms-grid-column: 2;
            -ms-grid-row: 1;
            margin: 0 1em;
        }

        #header #nav {
            display: block;
            margin: 0;
            max-height: 0;
            overflow: hidden;
            padding: 0;
            -webkit-transition: all .4s;
            transition: all .4s;
        }

    body.search-on #header .logo {
        opacity: 0;
    }

    body.menu-on #header #nav {
        display: block;
        max-height: calc(100vh - 100px);
        overflow: scroll;
        padding-bottom: 2em;
        padding-top: 1.5em;
    }

    body.menu-on #header .links {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
}

a.login {
    font-size: .8rem;
    margin-right: .5rem;
}

#nav {
    -ms-flex-item-align: end;
    -ms-grid-row-align: end;
    align-self: end;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1;
    margin: 0 0 5px 30px;
}
.multirow i.fas {
    color: #00576f;
    margin-right: 12px;
    width: 20px;
    height: 20px;
}
#nav .icon-menu i.fas {
    color: #00576f;
    margin-right: 12px;
    width: 20px;
    height: 20px;
}
#nav .a {
    cursor: default;
}

    #nav .a, #nav a {
        color: inherit;
        font-weight: inherit;
        text-decoration: none;
    }

        #nav .a:hover, #nav a:hover, #nav li.hover > a {
            color: #58b871;
        }

@media screen and (min-width:941px) {
    #nav > ul {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

        #nav > ul > li {
            position: relative;
        }

            #nav > ul > li:before {
                color: #c1c1c1;
                content: "|";
                display: inline-block;
                margin: 0 .75em;
            }

            #nav > ul > li:first-child:before {
                display: none;
            }

            #nav > ul > li > .a, #nav > ul > li > a {
                font-weight: 500;
            }

            #nav > ul > li.hover > .a, #nav > ul > li.hover > a, #nav > ul > li.menu-ancestor > .a, #nav > ul > li.menu-ancestor > a {
                color: #58b871;
            }

            #nav > ul > li > ul {
                background: #fff;
                display: none;
                margin: .8em 0 0;
                padding: 1em 0 0;
                position: absolute;
                top: 100%;
                white-space: nowrap;
            }

                #nav > ul > li > ul li {
                    border-top: 1px solid #e6e6e6;
                }

                #nav > ul > li > ul a {
                    display: block;
                    font-weight: 500;
                    letter-spacing: 1px;
                    line-height: 1.43;
                    padding: 10px 25px;
                }

                    #nav > ul > li > ul a:hover {
                        background: #58b871;
                        color: #fff;
                    }

            #nav > ul > li.contact {
                display: none;
            }
}

@media screen and (max-width:940px) {
    #nav > ul > li {
        margin: 0 0 1.5em;
        position: relative;
    }

        #nav > ul > li:after {
            background: #e4e4e4;
            content: " ";
            display: block;
            height: 1px;
            left: 0;
            margin: 1.5em 0 0;
            position: relative;
            width: 100%
        }

        #nav > ul > li:before {
            background: #58b871;
            border-radius: 50%;
            color: #fff;
            content: " ";
            display: block;
            height: 20px;
            left: 0;
            margin: -1px 0 0;
            position: absolute;
            top: 0;
            width: 20px;
        }

        #nav > ul > li > .a, #nav > ul > li > a {
            display: block;
            font-size: 1.2em;
            font-weight: 500;
            padding: 0 0 0 1.5em;
            position: relative;
        }

            #nav > ul > li > .a:after, #nav > ul > li > .a:before, #nav > ul > li > a:after, #nav > ul > li > a:before {
                background: #fff;
                content: " ";
                display: block;
                height: 2px;
                left: 4px;
                position: absolute;
                top: 8px;
                -webkit-transition: all .4s;
                transition: all .4s;
                width: 12px;
            }

            #nav > ul > li > .a:before, #nav > ul > li > a:before {
                height: 12px;
                left: 9px;
                top: 3px;
                width: 2px;
            }

        #nav > ul > li > ul {
            max-height: 0;
            overflow: hidden;
            -webkit-transition: all .4s;
            transition: all .4s;
        }

            #nav > ul > li > ul > li {
                margin: 1.5em 0 0;
            }

                #nav > ul > li > ul > li.overview {
                    display: block;
                }

                #nav > ul > li > ul > li > a {
                    display: block;
                    font-size: 1.2em;
                    font-weight: 500;
                    position: relative;
                }

                    #nav > ul > li > ul > li > a:after {
                        -webkit-font-smoothing: antialiased;
                        -moz-osx-font-smoothing: grayscale;
                        color: #58b871;
                        content: "\f105";
                        display: inline;
                        font-family: FontAwesome;
                        font-weight: 400;
                        margin: 0 0 0 .5em;
                        position: absolute;
                        text-decoration: none;
                        text-rendering: auto;
                        text-transform: none !important;
                        display:none;
                    }

                #nav > ul > li > ul > li > ul {
                    margin: 0;
                }

                    #nav > ul > li > ul > li > ul > li {
                        margin: .8em 0;
                    }

        #nav > ul > li.capabilities > ul {
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            justify-content: space-between;
        }

            #nav > ul > li.capabilities > ul > li {
                -ms-flex-preferred-size: 48%;
                flex-basis: 48%
            }

                #nav > ul > li.capabilities > ul > li.overview {
                    -ms-flex-preferred-size: 100%;
                    flex-basis: 100%
                }

        #nav > ul > li.on > .a:before, #nav > ul > li.on > a:before {
            opacity: 0;
        }

        #nav > ul > li.on > .a:after, #nav > ul > li.on > .a:before, #nav > ul > li.on > a:after, #nav > ul > li.on > a:before {
            -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
        }

        #nav > ul > li.on > ul {
            max-height: 100vh;
        }
}

@media screen and (min-width:941px) {
    #header .hover-menu {
        padding-left: 0;
        padding-right: 0;
    }

        #header .hover-menu > ul.multirow {
            align-items: center;
            -moz-column-count: 3;
            column-count: 3;
            -moz-column-gap: 4em;
            column-gap: 4em;
            display: block;
            max-width: 1024px;
            position: relative;
        }

            #header .hover-menu > ul.multirow:before {
                border: 1px solid #d9d9d9;
                border-width: 0 1px;
                content: " ";
                display: block;
                height: 100%;
                left: 50%;
                position: absolute;
                transform: translate(-50%);
                width: 35%
            }

            #header .hover-menu > ul.multirow > li {
                -moz-column-break-inside: avoid;
                break-inside: avoid;
                margin-bottom: 1em;
                margin-right: 0;
                position: relative;
                z-index: 1;
            }

                #header .hover-menu > ul.multirow > li > a {
                    align-items: center;
                    display: flex;
                    font-size: 14.5px;
                }

                    #header .hover-menu > ul.multirow > li > a img {
                        display: block;
                        height: 20px;
                        margin: 0 12px 0 0;
                        width: 20px;
                    }

                    #header .hover-menu > ul.multirow > li > a:after {
                        background: url(../images/arrow.svg) no-repeat 100% 50%;
                        background-size: contain;
                        content: " ";
                        display: block;
                        flex-grow: 1;
                        height: 10px;
                        position: relative;
                        width: 15px;
                        display:none;
                    }

        #header .hover-menu#menu-1 > ul.multirow, #header .hover-menu#menu-2 > ul.multirow {
            -moz-column-gap: 5em;
            column-gap: 5em;
            max-width: 700px;
        }
}

@media screen and (max-width:940px) {
    #header .icon-menu > li > a {
        align-items: center;
        display: flex;
    }

        #header .icon-menu > li > a img {
            display: inline-block;
            height: 20px;
            margin: 0 12px 0 0;
            width: 20px;
        }

        #header .icon-menu > li > a:after {
            position: relative;
        }
}
