.site-banner {
    @extend %clearfix;
    margin: 0 auto;
    @include constrain_wide;
    .nav-menu {
        border-top: 1px #444444 dotted;
        border-bottom: 1px #444444 dotted;
        //box-shadow: 0 3px 8px 0 #e6e6e6
        padding-left: 20px;
        padding-right: 20px;
        margin-right: -20px;
        margin-left: -20px;
        margin-top: 1em;
        padding: 0.25em 0.5em;
        a { 
            @include fontsize(15);
            text-decoration: none;
            font-weight: bold;
            color: lighten($body_font_color, 30);
        }
        ul {
            max-width: 100%;
            margin-top: 0.5em;
            margin-bottom: 0.5em !important;
            padding: 0;
            text-align: center;
            @include constrain(85%);
        }
        li {
            display: inline;
            margin: 0 0.25em;
            &:after {
                content: "\00b7";
                color: #999999;
                padding-left: 0.75em;
            }
            &:last-of-type {
                margin-right: 0;
                &:after {
                    content: " ";
                }
            }
        }
    }
    @include breakpoint(beta) {
        height: 90px;
        position: relative;
        #logo {
            float: left;
            position: absolute;
            bottom: 28%;
            text-align: left;
            a {
                width: 360px;
                &:before {
                    display: inline-block;
                    background-size: 102px;
                    //if sox
                    #background: url("img/soxlogo.svg") center bottom no-repeat;
                    #background-size: 70px;
                    height: 85px;
                    width: 105px;
                    //if sox
                    #width: 80px;
                    margin-right: 10px;
                }
            }
            .sitesubtitle { 
                margin-left: 116px;
                //if sox
                #margin-left: 90px;
                margin-top: -30px;
            }
        }
        .nav-menu {
            float: right;
            border: none;
            margin: 22px 0 0 0;
            padding: 0;
            ul {
                max-width: 50em;
                text-align: left; 
            }
        }
    }
}
.header-wrapper {
    @extend %clearfix;
    @include breakpoint(beta) {
        border-bottom: 1px darken(#fff, 10) solid;
        position: relative;
    }
    @include breakpoint(gamma) {
        max-width: $breakpoint-gamma;
        margin-left: auto;
        margin-right: auto;
    }
    @include breakpoint(delta) {
        margin-top: 1.3rem; 
        max-width: $breakpoint-delta;
    }
    @include breakpoint(epsilon) {
        margin-top: 1.3rem; 
        max-width: $max_width;
    }
}
#logo {
    a {
        @include fontsize(34);
        line-height: 1;
        text-decoration: none;
        display: block;
        font-weight: 300;
        font-family: 'carrois_gothicregular', Helvetica, sans-serif;
        text-transform: uppercase;
        color: $body_font_color;
        text-align: center;
        margin-top: 1.3rem;
        @include breakpoint(beta) {
            text-align: left;
            @include fontsize(32);
        }
    }
    .tagline {
        display: block;
        text-transform: uppercase;
        letter-spacing: 1px;
        @include fancy_sans;
        @include fontsize(13);
        font-style: normal;
        margin-left: 2px;
        text-align: center;
        @include breakpoint(beta) {
            text-align: left;
            @include fontsize(12);
        }
    }
}