/*! 
 *   Unlock Commerce
 *   Snippet Type: Backbone
 *   Snippet Name: OffCanvas - Menus and Filter
 *   Author: Shashank Agarwal
 */


/* +++++++++++++++++++++++++++++ Off Canvas +++++++++++++++++++++++++++++ */

@media (max-width: 991px) {
    .offcanvas-toggle.navbar-toggle {
        display: block;
    }

    .navbar-offcanvas {
        height: 100%;
        left: -250px;
        max-width: 100%;
        overflow-y: auto;
        position: fixed;
        top: 0;
        -webkit-transition: all 0.15s ease-in 0s;
        -moz-transition: all 0.15s ease-in 0s;
        transition: all 0.15s ease-in 0s;
        width: 250px;
        z-index: 999;
        margin: 0;
        background: #fff;
        text-align: left;
    }

        .navbar-offcanvas.in {
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
        }

        .navbar-offcanvas.navbar-offcanvas-fade {
            opacity: 0;
        }

            .navbar-offcanvas.navbar-offcanvas-fade.in {
                opacity: 1;
            }

        .navbar-offcanvas.offcanvas-transform.in,
        .navbar-offcanvas.in {
            -webkit-transform: translate3d(250px, 0px, 0px);
            -moz-transform: translate3d(250px, 0px, 0px);
            transform: translate3d(250px, 0px, 0px);
        }

        .navbar-offcanvas.offcanvas-position.in {
            left: 0;
        }

        .navbar-offcanvas.navbar-offcanvas-right {
            left: auto;
            right: -250px;
        }

            .navbar-offcanvas.navbar-offcanvas-right.in,
            .navbar-offcanvas.navbar-offcanvas-right.offcanvas-transform.in {
                -webkit-transform: translate3d(-250px, 0px, 0px);
                -moz-transform: translate3d(-250px, 0px, 0px);
                transform: translate3d(-250px, 0px, 0px);
            }

            .navbar-offcanvas.navbar-offcanvas-right.offcanvas-position.in {
                left: auto;
                right: 0;
            }

        .navbar-offcanvas .dropdown.shown > .dropdown-menu {
            display: block;
        }

        .navbar-offcanvas .dropdown.shown .caret,
        .navbar-offcanvas .dropdown.open .caret {
            border-bottom: 4px solid;
            border-top: 0 none;
        }

        .navbar-offcanvas .dropdown-menu {
            background: inherit;
            border: inherit;
            box-shadow: none;
            float: none;
            overflow: hidden;
            padding: 0;
            position: relative;
            -webkit-transition: all 0.15s ease-in 0s;
            -moz-transition: all 0.15s ease-in 0s;
            transition: all 0.15s ease-in 0s;
            width: 100%;
            border-radius: 0;
        }

            .navbar-offcanvas .dropdown-menu.shown {
                height: auto;
            }

            .navbar-offcanvas .dropdown-menu > li > a {
                padding: 5px 15px 5px 30px;

            }
    .navbar-offcanvas .navbar-header{float: none;
    }
}

.navbar-offcanvas .dropdown-menu.shown {
    display: block;
}

.navbar-wrap {
    padding: 0 15px;
}

.offcanvas-toggle.bars {
    left: 0;
    margin: 0;
    position: absolute;
    top: -5px;
    z-index: 1;
}

.offcanvas-toggle.offcanvas-toggle-close {
    margin-right: 0;
}

    .offcanvas-toggle.offcanvas-toggle-close .icon-bar:nth-child(1) {
        -webkit-transform: rotate(45deg) translate(5px, 4px);
        -moz-transform: rotate(45deg) translate(5px, 4px);
        transform: rotate(45deg) translate(5px, 4px);
    }

    .offcanvas-toggle.offcanvas-toggle-close .icon-bar:nth-child(2) {
        opacity: 0 !important;
    }

    .offcanvas-toggle.offcanvas-toggle-close .icon-bar:nth-child(3) {
        -webkit-transform: rotate(-45deg) translate(4px, -4px);
        -moz-transform: rotate(-45deg) translate(4px, -4px);
        transform: rotate(-45deg) translate(4px, -4px);
    }

.navbar-toggle.close-menu,
.navbar-toggle.close-menu:hover,
.navbar-toggle.close-menu:focus {
    border: 0 none;
    margin: 0;
    padding: 5px 10px;
    background: none;
}