/*=========================
    04. NAVIGATION MENU
===========================*/

nav {
    float: right;
    position: relative;
    z-index: 2;
}

nav a {
    font-size: 1.6rem;
    font-weight: 700;
}

.main-nav {
    ul {
        border-radius: 3px;
        @extend .pre-shadow;
    }

    li {
        list-style-type: none;
    }

    >li {
        float: left;

        >a {
            color: $dark-color;
            display: block;
            padding: 2.4rem 1.6rem;
        }
        a:hover {
            color: $primary-color;
        }
    }

    >.menu-item-has-children {
        >ul {
            background-color: $white-color;
            position: absolute;
            padding: 1.6rem 2.4rem;
            width: 220px;

            opacity: 0;
            visibility: hidden;

            -webkit-transition: all .3s;
            -moz-transition: all .3s;
            -o-transition: all .3s;
            transition: all .3s;
        }

        &:hover,
        &:focus {
            >ul {
                opacity: 1;
                visibility: visible;
                @include transform( translateY(-10px) );
            }
        }

        li>a {
            &::after {
                margin-top: 7px;
            }
        }

        >a {
            &::after {
                content: "\f107";
                padding-left: $smaller-padding;
                font: normal normal normal 18px/1 FontAwesome;
            }
        }

       >ul>.menu-item-has-children {
            >ul {
                left: 85%;
                opacity: 0;
                visibility: hidden;
            }

            &:hover,
            &:focus {
                >ul {
                    opacity: 1;
                    visibility: visible;
                    @include transform( translate( -10px, -2.4rem ) );
                }
            }

            >a {
                &::after {
                    content: "\f105";
                    display: inline-block;

                    font: normal normal normal 1.8rem/1 FontAwesome;

                    right: 0;
                    padding-top: 2px;
                    position: absolute;
                }
            }
        }
    }

    .menu-item-has-children {
        position: relative;

        li {
            line-height: 2.2;
        }

        &:hover,
        &:focus {
            >a {
                &::after {
                    color: $primary-color;
                }
            }
        }

        >ul {
            position: absolute;
            top: 125%;
            left: 50%;

            background-color: $white-color;
            margin-left: -1.1rem;
            padding: 1.6rem 2.4rem;
            width: 220px;

            @include transform( translateY(-2.4rem) );
            @include transition( all .2s );
        }

        .to-left {
            left: unset;
            right: 25%;
        }

        &:hover,
        &:focus {
            >ul {
                left: 50%;
                @include transform( translate( -10px, -2.4rem ) );
            }

            >a {
                &::after {
                    color: $primary-color;
                }
            }
        }
    }

    li ul li a {
        color: $dark-color;
    }
    .menu-item-has-children {
        .sub-menu {
            li {
                a:hover,
                a:focus {
                        color: $primary-color;
                    }

                a {
                    color:$secondary-color;
                }
            }
        }
    }
}

/* Mobile Navigation Menu */

.nav-menu {
    position: relative;
}

.mobile-menu-container {
    position: absolute;
    top: 0;
    right: 3.2rem;
}

.menubar-right,
.menubar-close {
    cursor: pointer;
    position: absolute;
    font-size: 2.7rem;

    right: 0;
    top: 2.4rem;
    z-index: 2;
}

.menubar-close {
    right: 3.2rem;
}

.menubar-right {
    padding-right: 15px;
    top: 50%;
    @include transform( translateY( -50% ) );
}

.dropdown-toggle {
    cursor: pointer;
    font-size: 2.2rem;

    margin-top: .2rem;
    position: absolute;
    top: 1rem;
    right: 0;
    padding: 0 !important; // Override for parent padding
    line-height: 1;

    -webkit-transition: -webkit-transform .2s ease-out;
    -moz-transition: -moz-transform .2s ease-out;
    -o-transition: -o-transform .2s ease-out;
    transition: transform .2s ease-out;
}

.mobile-menu-overlay {
    background-color: rgba(0,0,0,.5);

    position: fixed;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;

    z-index: 9901;

    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}

.mobile-menu-active {
    opacity: 1;
    visibility: visible;
}

.nav-parent {
    background-color: #fff;
    border-left: 1px solid #e3e3e3;

    padding: 4rem;
    position: fixed;
    overflow-y: scroll;

    top: 0;
    right: 0;
    bottom: 0;

    max-width: 30rem;
    width: 100%;

    z-index: 9902;

    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s ease;

    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
}

.mobile-menu-open {
    -webkit-transform: translate3d(0, 0, 0) !important;
    transform: translate3d(0, 0, 0) !important;
}

.mobile-nav li {
    position: relative;
    list-style-type: none;
}

.mobile-nav>li {
    border-bottom: 1px solid #e3e3e3;
}

.mobile-nav>li:last-child {
    border-bottom: none;
}

.mobile-nav li a {
    padding: 1rem;
    display: block;
}

.mobile-nav li ul li ul a,
.mobile-nav li ul a {
    display: block;
}

.mobile-nav>li>ul {
    display: none;
    padding-left: 1.6rem;
}

.mobile-nav>li>ul>li>ul {
    display: none;
    padding-left: 1.6rem;
}

.toggled {
    -o-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

/**
 *
 * #.# Media Queries
 *
 */

/* Larger than tablet */
@media (min-width: 768px) {
    .mobile-navigation,
    .menubar-right {
        display: none !important;
    }
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 767.98px) {
    .main-nav,
    .nav-button,
    .header-navigation {
        display: none;
    }
}

.sticky-header {
    position:fixed;
    top: 0;
    left: 0;
    max-width: 100%;
    z-index: 9;
    background: $white-color;

    @extend .pre-shadow;
}

.nav-button {
    margin: 0 1.6rem;
}

.main-nav > .menu-item-has-children > .is-focused,
.main-nav > .menu-item-has-children > .is-focused > .menu-item-has-children > .is-focused {
    left: 50%;
    opacity: 1;
    visibility: visible;
}