/** 
 *------------------------------------------------------------------------------
 * @package       T3 Framework for Joomla!
 *------------------------------------------------------------------------------
 * @copyright     Copyright (C) 2004-2013 JoomlArt.com. All Rights Reserved.
 * @license       GNU General Public License version 2 or later; see LICENSE.txt
 * @authors       JoomlArt, JoomlaBamboo, (contribute to this project at github 
 *                & Google group to become co-author)
 * @Google group: https://groups.google.com/forum/#!forum/t3fw
 * @Link:         http://t3-framework.org 
 *------------------------------------------------------------------------------
 */

// -------------------------------------------------------
//  DEFAULT BOOTSTRAP NAVBAR (navbars.less)
// -------------------------------------------------------
// Base Navbars
// --------------------------------------------------
.navbar {
    border: none;
    margin-bottom: 0;
    min-height: auto;
    padding-bottom: 26px;
    padding-top: 26px;
}

// Navbar toggle
// -------------
.navbar-toggle {
    padding: 5px 10px;
    display: inline-block;
    line-height: 35px;
    margin: 0;
    margin-top: 5px;
    width: 100%;
    margin-left: 0;
    .border-radius(0);
    .transition(.3s); // Bars
    .fa-bars {
        margin-right: 15px;
    }

    &:hover {
        background: @headings-color;
        color: white;
    } // Hide on breakpoint
    @media (min-width: @grid-float-breakpoint) {
        display: none;
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

.body__home {
    .stuck-container {
        background: @white;
    }
}

.header-bg {
    background: @white;
}

.stuck-container {
    padding-top: 40px;
    padding-bottom: 35px;
    position: relative;
    >.container {
        position: relative;
    }

    .t3-mainnav {
        .transition(all 0.3s ease);
    }
    &.scroll-to-fixed-fixed {
        margin-top: 0px;
        background: @white;
        z-index: 9999;
        width: 100% !important;
        .transition(0s);
        padding: 0px 0 0;
        -webkit-animation-name: fadeIn;
        animation-name: fadeIn;
        -webkit-animation-duration: 0.2s;
        animation-duration: 0.2s;
        .box-shadow(0px 6px 6px rgba(0, 0, 0, 0.3));
        @media(min-width: 768px) {}
        @media (max-width: 1200px) {
            background-attachment: scroll;
        }
        .logo {
            margin-top: 0px;
        }


        .t3-mainnav {
            padding-top: 20px;
            padding-bottom: 20px;
        }
    }
    @media (max-width: 1200px) {
        background-attachment: scroll;
    }
}


body {
    &.body__home:not(.view-article) {
        .stuck-container {
            background: none;
            &.scroll-to-fixed-fixed {
                background: @white;
            }
        }
    }
}

// -------------------------------------------------------
//  T3 MAIN MENU
// -------------------------------------------------------
.t3-mainnav {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    background-color: none;
    border-top: none;

    .t3-mainnav-wrapper {
        display: block;
        width: 100%;
        position: relative;
        z-index: 1200;
        @media(max-width: 767px) {
            display: block;
            width: 100%;
        }
    }

    .nav>li>.separator {
        cursor: default;
    } // Navbar
    // -------
    .t3-navbar {
        padding-left: 0;
        padding-right: 0;
        clear: both;
    } // Collapse Navbar
    // ---------------
    .t3-navbar-collapse {

        // Navbar nav links
        // ----------------
        .navbar-nav {
            float: none;
            text-align: right;
            li>a .fa {
                margin-right: 5px;
            }

            >li:first-child>a {
                border-top: 0;
            }

            li span {
                cursor: default;
            }

            >li>a:hover,
            >li>a:focus {
                text-decoration: none;
                background-color: transparent;
            }

            >li {
                &+li {
                    margin-left: 4.7%;
                }
            }

            >li {
                line-height: normal;
                margin-top: 0;
                float: none;
                display: inline-block;
                >a,
                >span {
                    border-top: none;
                    padding: 0;
                    color: @headings-color;
                    font: 600 12px/20px @font-family-secondary2;
                    letter-spacing: 0.1em;
                    text-transform: uppercase;
                    background: none;
                    padding: 0;
                    padding-bottom: 0px;
                    display: block;
                    position: relative;
                    &:before {
                        content: "";
                        height: 36px;
                        width: 0;
                        background: url(../images/brush_hover.png) 0% 0 no-repeat;
                        display: block;
                        position: absolute;
                        left: 50%;
                        margin-left: -59px;
                        bottom: -10px;
                        z-index: -1;
                        .transition(all 0.3s ease);
                    }
                    &:hover {
                        color: @headings-color;
                        background: none !important;
                        &:before {
                            content: "";
                            height: 36px;
                            width: 149px;
                            background: url(../images/brush_hover.png) 0% 0 no-repeat;
                            display: block;
                            position: absolute;
                            left: 50%;
                            margin-left: -59px;
                            bottom: -10px;
                            z-index: -1;
                            .transition(all 0.3s ease);
                        }
                    }
                }

                .caret {
                    font-size: 0;
                    border: none !important;
                    &:before {
                        content: '\f0d7';
                        font-family: @fa;
                        color: @headings-color;
                        font-style: normal;
                        position: absolute;
                        top: 0px;
                        right: 3px;
                        font-size: 12px;
                        line-height: 20px;
                        .transition(.3s);
                    }
                }

                &.open {
                    >a,
                    >span {
                        border-top: none;
                        color: @headings-color;
                        background: none;
                        &:before {
                            content: "";
                            height: 36px;
                            width: 149px;
                            background: url(../images/brush_hover.png) 0% 0 no-repeat;
                            display: block;
                            position: absolute;
                            left: 50%;
                            margin-left: -59px;
                            bottom: -10px;
                            z-index: -1;
                            .transition(all 0.3s ease);
                        }
                        &:hover {
                            border-top: none;
                            background-color: transparent;
                        }
                    }
                }

                &.active {
                    >a,
                    >span {
                        border-top: none;
                        color: @headings-color;
                        background: none;
                        &:before {
                            content: "";
                            height: 36px;
                            width: 149px;
                            background: url(../images/brush_hover.png) 0% 0 no-repeat;
                            display: block;
                            position: absolute;
                            left: 50%;
                            margin-left: -59px;
                            bottom: -10px;
                            z-index: -1;
                            .transition(all 0.3s ease);
                        }

                        &:hover {
                            border-top: none;
                        }
                    }

                    &.open {
                        a,
                        span {
                            border-top: none;

                            &:hover {
                                border-top: none;
                            }
                        }
                    }
                }


                &.menu-login,
                &.menu-search {
                    // margin-left: 5%;
                    >span,
                    >a {
                        &:before {
                            display: none;
                        }
                        .icon {
                            font-size: 12px;
                            color: @headings-color;
                        }
                        &:hover {
                            .icon {
                                color: @global-color;
                            }
                        }
                    }
                } // &.menu-login{
                //  margin-right: 20px;
                // }
            } // Dropdown Menu // Second level
            .open .dropdown-menu {

                li {
                    a,
                    span {
                        border-top: none;
                        background: transparent;
                        color: #000;

                        &:hover {
                            border-top: none;
                            background: transparent;
                            color: @global-color;
                        }
                    }

                    &.active {
                        a,
                        span {
                            border-top: none;
                            background: transparent;
                            color: @global-color;

                            &:hover {
                                border-top: none;
                                background: transparent;
                                color: @global-color;
                            }
                        }

                        .dropdown-menu {
                            li {
                                a {
                                    color: #000;

                                    &:hover {
                                        color: @global-color;
                                    }
                                }
                                &.current,
                                &.active {
                                    a {
                                        color: @global-color;
                                    }
                                }
                            }
                        }
                    }
                }

                >li>a,
                .dropdown-header {
                    border-top: none;
                }

                >li>a {
                    // Link states
                    &:hover,
                    &:focus {}
                }
            } // Re-Align the caret on right
            .dropdown>a,
            .dropdown>span {
                padding-right: 15px;
                .caret {
                    position: absolute;
                    top: 0;
                    right: 0;
                }
            }

            li.icon {

                >a {
                    font-size: 0px;
                    margin-right: 0px;
                    text-decoration: none!important;
                    span {
                        font-size: 18px;
                        position: relative;
                        pointer-events: none;
                    }
                }
            }

            .dropdown-submenu {
                //third level
                .nav-child {
                    margin-left: 15px;
                    margin-top: -18px;
                }

                >a {

                    &:after {
                        content: '\f105';
                        font-family: @fa;
                        color: @headings-color;
                        font-style: normal;
                        position: absolute;
                        top: 0;
                        right: 0;
                        font-size: 14px;
                        line-height: 17px;
                        border: none;
                        width: auto;
                        height: auto;
                    }
                }

                &.open {
                    >a {
                        &:after {
                            content: '\f107';
                            font-family: @fa;
                            color: @headings-color;
                            font-style: normal;
                            position: absolute;
                            top: 0;
                            right: 0;
                            font-size: 14px;
                            line-height: 17px;
                            border: none;
                            width: auto;
                            height: auto;
                        }
                    }
                }
            }
        } // End Collapse Navbar
    } // End
}

.off-canvas-toggle {
    position: fixed!important;
    left: 0px!important;
    top: 0px!important;
    height: auto!important;
}

.t3-mainnav .navbar-header {
    .newElement {
        display: none;
    }
}

// Mobile menu
@media (min-width: 320px) and (max-width: 767px) {
    .t3-wrapper {
        padding-top: 50px;
        nav#t3-mainnav {
            .navbar-header {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                height: 50px;
                padding: 0;
                margin: 0;
                z-index: 11;
                text-align: center;
                cursor: pointer;
                .navbar-toggle {
                    margin: 0;
                    width: 100%;
                    height: 50px;
                    text-align: left;
                    cursor: pointer;
                    border-bottom: 1px solid fade(@headings-color, 50%);
                }
            }

            .navbar-toggle {
                width: auto;
                float: none;
                background: #fff;
                padding-top: 2px;
                padding-bottom: 1px;
                &:hover,
                &:focus {
                    color: #fff;
                    background: @global-color;
                    border-color: @global-color;
                }
            }

            .t3-mainnav-wrapper {
                .t3-navbar.navbar-collapse {
                    position: fixed;
                    left: 0;
                    top: -150px;
                    width: 270px;
                    padding-top: 200px;
                    bottom: 0;
                    float: none;
                    border: none;
                    display: none !important;
                    background: #fff;
                    z-index: 10;
                    .transition(.3s);

                    &.collapse.in {
                        display: block!important;
                    }

                    .t3-megamenu {
                        .nav {
                            border: none;
                        }
                    }

                    .navbar-nav {
                        margin: 0px;
                        padding-top: 0px;
                        background: #fff;
                        border: 1px solid #e6e6e6;
                        border-top: none;
                        .caret {
                            right: 20px;

                            &:before {
                                color: #000;
                            }
                        }
                        >li {
                            display: block;
                            text-align: left;
                            >a,
                            >span {
                                margin: 0 0 1px 0;
                                background: none;
                                padding: 10px 15px;
                                color: #000;
                                display: block;
                                &:before {
                                    display: none !important;
                                }
                                .caret {

                                    &:before {
                                        padding: 10px 15px;
                                        content: '\f105';
                                    }
                                }

                                &:hover {
                                    color: #fff;
                                    background: @global-color !important;

                                    .caret {
                                        &:before {
                                            color: @global-color;
                                        }
                                    }
                                }
                            }
                            &.open {
                                >a,
                                >span {
                                    color: #fff;
                                    background: @global-color;

                                    .caret {

                                        &:before {
                                            color: @global-color2;
                                            content: '\f107';
                                        }
                                    }
                                }
                            }

                            &.active {
                                >a,
                                >span {
                                    color: #fff;
                                    background: @global-color;
                                }
                            }

                            +li {
                                margin-left: 0;
                            }
                        }

                        .icon {
                            padding: 0px;
                            margin: 0px;
                            position: absolute;
                            top: 6px;
                            left: 60%;
                            margin-left: 10px;
                            display: none;
                            background: #fff;
                            padding-top: 2px;
                            padding-bottom: 1px;
                            border: 1px solid #e6e6e6;
                            z-index: 111;
                            a {
                                padding: 0px;
                                margin: 0px;
                                background: none;
                                font-size: 12px;
                                font-weight: 400;
                                text-transform: capitalize;
                                span {
                                    background: none;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}