/* Add transition to containers so they can push in and out */
.site-container,
.mobile-nav {
    -webkit-transition: all 0.1s ease-out;
    -moz-transition: all 0.1s ease-out;
    -ms-transition: all 0.1s ease-out;
    -o-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;
}



/* --------------------------
 * Main Navigation Bar Styles
 * --------------------------
*/

@media (max-width: 1023px) {


html, body {
	height: 100%;
}
.off-canvas {
	position: relative;
	overflow-y: visible;
	/*height: 100%;*/
}
.off-canvas.active {
    overflow-x: hidden; 
}
.off-canvas-inner {
	min-height: 100%;
}
.mobile-nav {
    display: block;
	clear: both;
	//overflow: hidden;
	max-width: 280px;
	min-height: 100%;
	left: -280px;
    position: absolute;
   // top: -100%;
    z-index: 1000; /* so the menu or its navicon stays above all content */
    background: #eeeeee;
    padding: 50px 0;
    -webkit-overflow-scroll: touch;
}
    .mobile-nav a {
        color: #999;
        border: none;
        white-space: normal;
        
    }


    .menu-link {
        display: none; /* show this only on small screens */
        top: 0;
       /* left: 150px;  ".mobile-nav width" */
        background: #000;
        background: rgba(0,0,0,0.7);
        font-size: 10px; /* change this value to increase/decrease button size */
        z-index: 1001;
        width: 40px;
        height: auto;
        padding: 20px 10px;
    }
	
	.mobile-menu {
		background: #719500;	
	}
	.mobile-menu .menu-link {
      	float: right;
        display: block;
		z-index: 1000;
    }


        .menu-link:hover,
        .menu-link:focus {
            background: #000;
        }

        .menu-link span {
            position: relative;
            display: block;
        }
		

        .menu-link span,
        .menu-link span:before,
        .menu-link span:after {
            background-color: #fff;
            width: 100%;
            height: .2em;
        }

            .menu-link span:before,
            .menu-link span:after {
                position: absolute;
                margin-top: -.6em;
                content: " ";
            }

            .menu-link span:after {
                margin-top: .6em;
            }

       .mobile-nav .menu-link span {
            background: transparent;
        }

        .mobile-nav .menu-link span:before {
                -webkit-transform: rotate(45deg) translate(.5em, .4em);
                   -moz-transform: rotate(45deg) translate(.5em, .4em);
                    -ms-transform: rotate(45deg) translate(.5em, .4em);
                     -o-transform: rotate(45deg) translate(.5em, .4em);
                        transform: rotate(45deg) translate(.5em, .4em);
            }

         .mobile-nav   .menu-link span:after {
                -webkit-transform: rotate(-45deg) translate(.45em, -.35em);
                   -moz-transform: rotate(-45deg) translate(.45em, -.35em);
                    -ms-transform: rotate(-45deg) translate(.45em, -.35em);
                     -o-transform: rotate(-45deg) translate(.45em, -.35em);
                        transform: rotate(-45deg) translate(.45em, -.35em);
            }

	 
    .mobile-nav .menu-link {
        display: block;
		position: absolute;
		left: 240px;
		top: 0;
		background: rgba(102,102,102,0.7);
    }	

    /* Navigation Push Styles */

	.active .off-canvas-inner{
        position: relative;
		left: 280px;
    }

    .active .mobile-nav {
        width: 280px;
		left: -280px;
		min-height: 100%;
		//top: 0;
		
    }


   
}