/// /// Future Imperfect by HTML5 UP /// html5up.net | @ajlkn /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) ///

/* Header */

body {
        padding-top: 3.5em;
}
#header {
        @include vendor('display', 'flex');
        @include vendor('justify-content', 'space-between');
        background-color: _palette(bg);
        border-bottom: solid 1px _palette(border);
        height: 3.5em;
        left: 0;
        line-height: 3.5em;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: _misc(z-index-base);
        a {
                color: inherit;
                text-decoration: none;
        }
        ul {
                list-style: none;
                margin: 0;
                padding-left: 0;
                li {
                        display: inline-block;
                        padding-left: 0;
                }
        }
        h1 {
                height: inherit;
                line-height: inherit;
                padding: 0 0 0 1.5em;
                white-space: nowrap;
                a {
                        font-size: 0.7em;
                }
        }
        .links {
                @include vendor('flex', '1');
                border-left: solid 1px _palette(border);
                height: inherit;
                line-height: inherit;
                margin-left: 1.5em;
                overflow: hidden;
                padding-left: 1.5em;
                ul {
                        li {
                                border-left: solid 1px _palette(border);
                                line-height: 1;
                                margin-left: 1em;
                                padding-left: 1em;
                                &:first-child {
                                        border-left: 0;
                                        margin-left: 0;
                                        padding-left: 0;
                                }
                                a {
                                        border-bottom: 0;
                                        font-family: _font(family-heading);
                                        font-size: 0.7em;
                                        font-weight: _font(weight-heading);
                                        letter-spacing: _font(kerning-heading);
                                        text-transform: uppercase;
                                }
                        }
                }
        }
        .main {
                height: inherit;
                line-height: inherit;
                text-align: right;
                ul {
                        height: inherit;
                        line-height: inherit;
                        li {
                                border-left: solid 1px _palette(border);
                                height: inherit;
                                line-height: inherit;
                                white-space: nowrap;
                                > * {
                                        display: block;
                                        float: left;
                                }
                                > a {
                                        @include icon;
                                        border-bottom: 0;
                                        color: _palette(fg-light);
                                        overflow: hidden;
                                        position: relative;
                                        text-indent: 4em;
                                        width: 4em;
                                        &:before {
                                                display: block;
                                                height: inherit;
                                                left: 0;
                                                line-height: inherit;
                                                position: absolute;
                                                text-align: center;
                                                text-indent: 0;
                                                top: 0;
                                                width: inherit;
                                        }
                                }
                        }
                }
        }
        form {
                margin: 0;
                input {
                        display: inline-block;
                        height: 2.5em;
                        position: relative;
                        top: -2px;
                        vertical-align: middle;
                }
        }
        #search {
                @include vendor('transition', 'all 0.5s ease');
                max-width: 0;
                opacity: 0;
                overflow: hidden;
                padding: 0;
                white-space: nowrap;
                input {
                        width: 12em;
                }
                &.visible {
                        max-width: 12.5em;
                        opacity: 1;
                        padding: 0 0.5em 0 0;
                }
        }
        @include breakpoint(medium) {
                .links {
                        display: none;
                }
        }
        @include breakpoint(small) {
                height: 2.75em;
                line-height: 2.75em;
                h1 {
                        padding: 0 0 0 1em;
                }
                .main {
                        .search {
                                display: none;
                        }
                }
        }
}