/* =============================================================================
   Mobile Menu Styles                                                           
============================================================================= */

#mobile_toggle_close.close, .mobile.button, .off_canvas, #mobile_toggle_close { display: none; }

/* Tablet View */
@media only screen and (max-width: 768px) and (max-height: 1024px), (max-width: 1024px) and (max-height: 768px) {

	.position_left, .position_right { max-width: 480px; }

}

@media only screen and (max-width: 900px), (max-width: 768px) and (max-height: 1024px), (max-width: 1024px) and (max-height: 768px) {

	/***** Mobile Menu Toggle *****/
	.off-canvas-container { 
		position: relative; 
		min-height: 100vh;	
	}
	.off-canvas-inner {
	    position: relative;
		width: 100%;
		display: block;
		overflow:hidden;
	}
	.off_canvas {
		position: relative;
		height: 100%;
		background: #fff;
		position: fixed;
		overflow-x:hidden;
		top: 0;
		z-index: 1;
	}
	.position_left, .position_right {
		width: 100%;
		overflow-x: hidden;
	}
	.position_left {
		transform: translateX(-100%);
		left: 0	
	}
	.position_right {
		transform: translateX(100%);
		right: 0;	
	}
	.position_left.is_open, .position_right.is_open {
		transform: translateX(0px);
		z-index: 9999999;
	}
	.off_canvas_content, .off_canvas_content.is_open, .position_left, .position_left.is_open, #off_canvas_cover.is_open, #off_canvas_cover, .position_right.is_open, .position_right {
		-webkit-transition: all 0.35s ease;
		-moz-transition: all 0.35s ease;
		-o-transition: all 0.35s ease;
		transition: all 0.35s ease;		
	}
	.off_canvas::-webkit-scrollbar-track, .off_canvas::-webkit-scrollbar, .off_canvas::-webkit-scrollbar-thumb { width: 0px; }
	.off_canvas::-webkit-scrollbar-thumb { background-color: transparent; }

	body.mm_open { overflow: hidden; }
	#off_canvas_cover {
		visibility: hidden;
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index:-1;
		background: rgba(255,255,255,0);
	}
	#off_canvas_cover.is_open {
		background: rgba(40,40,40,.75);
		visibility:visible;
		z-index:99999;
	}
	.off_canvas, .mobile.button { display: block; }
	.mobile.button, #mobile_toggle_close.close {
		background: #f5f5f5;
	    padding: 0;
	    margin: 0;
	    line-height: 0;
	    border: none;
	    color: transparent !important;
	    border-radius: 50%;
	    width: 50px;
	    height: 50px;
	}
	.mobile.button svg {
		fill: #333;
	    width: 22px;
	    height: 18px;
	}
	.mobile.button svg rect {
		width: 22px;
		height: 2.5px;
		rx: 2px;
		ry: 2px;
	}

	/***** Mobile Nav Header *****/
	.mobile-nav .mobile-nav_header {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 8px 10px;
	}
	#mobile_toggle_close.close { display: none; }

	#mobile_toggle_close.close svg {
		fill: #333;
		width: 18px;
		height: 18px;
	}
	#mobile_toggle_close.close .close:hover { cursor:pointer; }

  	/***** Mobile Menu *****/
	.off_canvas header {
		display: block;
		background: transparent;
		padding: 0px;
		position: relative;
		border:none;		
		top: 0;
		border-top: 1px solid #eee;
	}
	.off_canvas header .mobile-menu-main-container { padding: 0 2rem; }
	.off_canvas header .mobile-add-con { margin: .5rem 1rem 2rem; }
	.off_canvas header .mobile-add-con:last-child { padding-bottom: 50px; }

	.mobile-nav #mobile-menu-main li { width: 100%; position: relative;	}
	.mobile-nav #mobile-menu-main a {
		width: 100%;
		color: #666;
		display: flex;
		align-items: center;
		text-decoration: none;
		position: relative;
		font-size: 16px;
		font-weight: 600;
		cursor: default;
	}
	.mobile-nav #mobile-menu-main a, .mobile-nav li .mobile_btn { height: 50px; }
	.mobile-nav #mobile-menu-main li a:hover { color: #666; }

	/***** Mobile Sub-Menu *****/
	.mobile-nav #mobile-menu-main ul {
		position: relative;
		z-index: initial;
		left: 0;
		text-align: left;
		max-width: 100%;
		padding: 0px;
		display: none;
	    background: #f5f5f5;
	    padding: .25rem 1rem;
	    border-radius: 3px;
	}
	.mobile-nav #mobile-menu-main ul li a {
		font-size: 15px;
		height: 40px;
		padding: 0;
		font-weight: 400;
	}
	.mobile-nav #mobile-menu-main ul li .mobile_btn { height: 35px; margin: 0; }
	.mobile-nav #mobile-menu-main ul li ul { 
		margin: 0;
		padding: 0;
		border: none;
	}
	
	/* 1st & 2nd Dropdown */ .mobile-nav #mobile-menu-main > li li:hover > ul , .mobile-nav #mobile-menu-main > li > .sub-menu{ left: 0; margin: 0; }
	/* 3rd Dropdown */ .mobile-nav #mobile-menu-main > li > .sub-menu > li > ul.sub-menu { margin: 0 3%; }
	/* 4th Dropdown */ .mobile-nav #mobile-menu-main > li > .sub-menu > li > ul.sub-menu > li > ul.sub-menu { margin: 0 6%; }
	/* 5th Dropdown */ .mobile-nav #mobile-menu-main > li > .sub-menu > li > ul.sub-menu > li > ul.sub-menu > li > ul.sub-menu { margin: 0 9%; }

	/***** Mobile Dropdown Btn *****/
	.mobile-nav li .mobile_btn, .mobile-nav li .mobile_btn:focus {
		position: absolute;
		top: 0;
		right: 0;
		border: none;
		border-radius:0;
		z-index: 9999999;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	    width: 50%;
	    outline: transparent;
	}
	.mobile-nav li .mobile_btn svg {
		fill: #666;
		height: 15px;
		width: 20px;
	}
	.mobile-nav li .mobile_btn.active svg {
		-webkit-transform: rotateX(180deg);
		-moz-transform: rotateX(180deg);
		-ms-transform: rotateX(180deg);
		-o-transform: rotateX(180deg);
		transform: rotateX(180deg);
	}

}