/* ---------------------------------------------------------------------------- */
/* --- 3. HEADER
/* ----------------------------------------------------------------------------- */

#header {
	position: fixed;
    z-index: 900;
    @include box-shadow(0 0 6px 0 rgba($color-dark,0.15));
}

// Navigation Toggle

.nav-toggle {
    width: 26px;
    height: 26px;
    position: relative;
    @include transform(rotate(0deg));
    @include transition(0.5s ease-in-out)
    cursor: pointer;
    display: inline-block;

    span {
        display: block;
        position: absolute;
        height: 2px;
        width: 100%;
        background: $color-global;
        @include opacity(1);
        left: 0;
        @include border-radius(2px);
        @include transform(rotate(0deg));
        @include transition(0.25s ease-in-out);

        &:nth-child(1) {
            top: 3px;
        }

        &:nth-child(2), &:nth-child(3) {
            top: 11px;
        }

        &:nth-child(4) {
            top: 19px;
        }
    }

    &.open span {
        &:nth-child(1) {
            top: 18px;
            width: 0%;
            left: 50%;
        }

        &:nth-child(2) {
            @include transform(rotate(45deg));
        }

        &:nth-child(3) {
            @include transform(rotate(-45deg));
        }

        &:nth-child(4) {
            top: 18px;
            width: 0%;
            left: 50%;
        }
    }
}

.dark .nav-toggle span {
    background-color: #fff;
}

@import "_header/header-horizontal";
@import "_header/header-vertical";