.offcanvas-container,
.offcanvas-pusher,
.offcanvas-content {
    height : 100%;
    }

.offcanvas-content {
    overflow-y : scroll;
    background : #F3EFE0;
    }

.offcanvas-content,
.offcanvas-content-inner {
    position : relative;
    }

.offcanvas-container {
    position : relative;
    overflow : hidden;
    }

.offcanvas-pusher {
    position           : relative;
    left               : 0;
    z-index            : 99;
    height             : 100%;
    -webkit-transition : -webkit-transform 0.5s;
    transition         : transform 0.5s;
    }

.offcanvas-pusher::after {
    position           : absolute;
    top                : 0;
    right              : 0;
    width              : 0;
    height             : 0;
    background         : rgba(0, 0, 0, 0.2);
    content            : '';
    opacity            : 0;
    -webkit-transition : opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
    transition         : opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
    }

.offcanvas-menu-open .offcanvas-pusher::after {
    width              : 100%;
    height             : 100%;
    opacity            : 1;
    -webkit-transition : opacity 0.5s;
    transition         : opacity 0.5s;
    }

.offcanvas-menu {
    position           : absolute;
    top                : 0;
    left               : 0;
    z-index            : 100;
    visibility         : hidden;
    width              : 300px;
    height             : 100%;
    background         : #f3f3f3;
    -webkit-transition : all 0.5s;
    transition         : all 0.5s;
    }

.offcanvas-menu::after {
    position           : absolute;
    top                : 0;
    right              : 0;
    width              : 100%;
    height             : 100%;
    background         : rgba(0, 0, 0, 0.2);
    content            : '';
    opacity            : 1;
    -webkit-transition : opacity 0.5s;
    transition         : opacity 0.5s;
    }

.offcanvas-menu-open .offcanvas-menu::after {
    width              : 0;
    height             : 0;
    opacity            : 0;
    -webkit-transition : opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
    transition         : opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
    }

/* SIDEBAR MANU ICON
   ------------------*/
.offcanvas-menu ul li a i {
    margin-right : 7px;
    }

/* SIDEBAR CLOSE ICON
   -------------------*/
.offcanvas-menu .close {
    position           : absolute;
    right              : 0;
    top                : 0;
    color              : #FFFFFF;
    padding            : .66em .9em;
    opacity            : .5;
    background         : rgba(0, 0, 0, .3);
    -webkit-transition : background .3s;
    -moz-transition    : background .3s;
    transition         : background .3s;
    }

.offcanvas-menu .close:hover {
    background : #B98C49;;
    opacity    : 1;
    }

/* SIDEBAR MANU LIST STYLE
   ------------------------*/

.offcanvas-menu ul {
    margin     : 0;
    padding    : 0;
    list-style : none;
    }

.offcanvas-menu h2 {
    font-family    : 'Roboto', sans-serif;
    font-size      : 16px;
    text-transform : capitalize;
    color          : #FFFFFF;
    font-weight    : 700;
    background     : rgba(0, 0, 0, 0.25);
    padding        : 1em 1em 1em 1.2em;
    text-shadow    : 0 0 1px rgba(0, 0, 0, 0.1);
    }

.offcanvas-menu ul li a {
font-size: 13px;
    display: block;
    padding: 1em 1em 1em 2.5em;
    outline: none;
    box-shadow: inset 0 -1px rgba(0, 0, 0, 0.2);
    color: #000;
    text-transform: capitalize;
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.1);
    letter-spacing: 1px;
    font-weight: 500;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
    background: #f3f3f3;
   }


.offcanvas-menu ul li li a {
    font-size   : 12px;
    font-weight : 400;
    }

.offcanvas-menu ul li:first-child a {}
.offcanvas-menu ul li a:hover {
	background: rgba(243, 243, 243, 0.2);
    box-shadow: inset 0 -1px rgb(164, 70, 7);
    color: #462616;
    padding: 1em 1em 1em 3.5em;	
    }

/* Individual effects */

/* Effect 9: Scale down pusher */

.offcanvas-effect.offcanvas-container {
    -webkit-perspective : 1500px;
    perspective         : 1500px;
    }

.offcanvas-effect .offcanvas-pusher {
    -webkit-transform-style : preserve-3d;
    transform-style         : preserve-3d;
    }

.offcanvas-effect.offcanvas-menu-open .offcanvas-pusher {
    -webkit-transform : translate3d(0, 0, 0px);
    transform         : translate3d(0, 0, 0px);
    }

.offcanvas-effect.offcanvas-menu {
    opacity           : 1;
    -webkit-transform : translate3d(-100%, 0, 0);
    transform         : translate3d(-100%, 0, 0);
    }

.offcanvas-effect.offcanvas-menu-open .offcanvas-effect.offcanvas-menu {
    visibility         : visible;
    -webkit-transition : -webkit-transform 0.5s;
    transition         : transform 0.5s;
    -webkit-transform  : translate3d(0, 0, 0);
    transform          : translate3d(0, 0, 0);
    }

.offcanvas-effect.offcanvas-menu::after {
    display : none;
    }

/* Fallback example for browsers that don't support 3D transforms (and no JS fallback) */
.no-csstransforms3d .offcanvas-pusher,
.no-js .offcanvas-pusher {

    }

.offcanvas-menu  li.nav-mobile {    
	font-size: 13px;
	display: block;
	padding: 5px 10px;
	outline: none;
	box-shadow: inset 0 -1px rgba(0, 0, 0, 0.2);
	color: #FFEB3B;
	text-transform: uppercase;
	text-shadow: 0 0 1px rgba(255, 255, 255, 0.1);
	letter-spacing: 1px;
	font-weight: 500;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transition: all 0.5s;
	background: rgb(164, 70, 7);
}