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

/* Header */

#header {
        @include padding(5em, 0, (3em, 0, -5em, 0));
        .logo {
                display: block;
                border-bottom: 0;
                color: inherit;
                font-weight: _font(weight-bold);
                letter-spacing: _font(letter-spacing);
                margin: 0 0 (_size(element-margin) * 1.25) 0;
                text-decoration: none;
                text-transform: uppercase;
                display: inline-block;
                > * {
                        display: inline-block;
                        vertical-align: middle;
                }
                .symbol {
                        margin-right: 0.65em;
                        img {
                                display: block;
                                width: 2em;
                                height: 2em;
                        }
                }
        }
        nav {
                position: fixed;
                right: 2em;
                top: 2em;
                z-index: _misc(z-index-base);
                ul {
                        @include vendor('display', 'flex');
                        @include vendor('align-items', 'center');
                        list-style: none;
                        margin: 0;
                        padding: 0;
                        li {
                                display: block;
                                padding: 0;
                                a {
                                        display: block;
                                        position: relative;
                                        height: 3em;
                                        line-height: 3em;
                                        padding: 0 1.5em;
                                        background-color: transparentize(_palette(bg), 0.5);
                                        border-radius: _size(border-radius);
                                        border: 0;
                                        font-size: 0.8em;
                                        font-weight: _font(weight-bold);
                                        letter-spacing: _font(letter-spacing);
                                        text-transform: uppercase;
                                }
                                a[href="#menu"] {
                                        -webkit-tap-highlight-color: transparent;
                                        width: 4em;
                                        text-indent: 4em;
                                        font-size: 1em;
                                        overflow: hidden;
                                        padding: 0;
                                        white-space: nowrap;
                                        &:before, &:after {
                                                @include vendor('transition', 'opacity #{_duration(transition)} ease');
                                                content: '';
                                                display: block;
                                                position: absolute;
                                                top: 0;
                                                left: 0;
                                                width: 100%;
                                                height: 100%;
                                                background-position: center;
                                                background-repeat: no-repeat;
                                                background-size: 2em 2em;
                                        }
                                        &:before {
                                                background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" preserveAspectRatio="none"><style>line { stroke-width: 8px; stroke: #{_palette(accent1)}; }</style><line x1="0" y1="25" x2="100" y2="25" /><line x1="0" y1="50" x2="100" y2="50" /><line x1="0" y1="75" x2="100" y2="75" /></svg>');
                                                opacity: 0;
                                        }
                                        &:after {
                                                background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" preserveAspectRatio="none"><style>line { stroke-width: 8px; stroke: #{_palette(fg)}; }</style><line x1="0" y1="25" x2="100" y2="25" /><line x1="0" y1="50" x2="100" y2="50" /><line x1="0" y1="75" x2="100" y2="75" /></svg>');
                                                opacity: 1;
                                        }
                                        &:hover {
                                                &:before {
                                                        opacity: 1;
                                                }
                                                &:after {
                                                        opacity: 0;
                                                }
                                        }
                                }
                        }
                }
        }
        @include breakpoint(small) {
                @include padding(3em, 0, (1em, 0, -3em, 0));
                nav {
                        right: 0.5em;
                        top: 0.5em;
                        ul {
                                li {
                                        a[href="#menu"] {
                                                &:before, &:after {
                                                        background-size: 1.5em 1.5em;
                                                }
                                        }
                                }
                        }
                }
        }
}