nav 		{	top: 0; right: -16px; position: fixed; z-index: 4; display: block; height: 100%; box-shadow: 0 0 40px 0 #000; }
	nav.close	{	box-shadow: 0 0 0 0 #000; }

		nav div.scroll		{	position: absolute; top: 0; left: 0; height: 100%; width: calc(100% - 16px); padding: 80px 0 0 0; overflow: auto; -webkit-overflow-scrolling: touch; }
		
		nav ul					{	font-size: 1.00rem; /**/ font-weight: 800; }
		nav ul li				{	list-style: none; border-bottom-width: 1px; 
										background-image: 		url('../img/svg/minus-gray.svg');
										background-repeat: 		no-repeat;
										background-position:  	right 0.90rem; 
										background-size: 		1.00rem; }
		nav ul li:last-child	{	margin-bottom: 8rem; border: 0;}
		nav ul li.blank			{	background: none; }
		nav ul li a				{	display: flex; align-items: center; }
		nav ul li ul			{	height: auto; max-height: 500px; margin-bottom: 1.0rem; overflow: hidden; 
										-moz-transition: 	max-height 0.25s ease-in;
										-webkit-transition:	max-height 0.25s ease-in;
										transition: 		max-height 0.25s ease-in;}
		nav ul li ul span			{	display: block; margin-left: 3rem; font-size: 0.80rem; line-height: 1.4; margin-bottom: 0.30rem; /**/ font-weight: 200; }
		nav ul li ul span span		{	display: inline-block; width: 4rem; margin-bottom: 0; margin-left: 0; }
		nav ul li ul span a			{	display: block; border: 0; margin-bottom: 0.30rem; color: #000; }
		

			a span.icon		{	display: inline-block; width: 3rem; height: 3rem; 
									background-repeat: 		no-repeat;
									background-position: 	left center; 
									background-size: 		1.8rem; }
			
			a span.icon.kont 	{	background-image: url('../img/icon/icon-cm-kont.svg');  }
			a span.icon.open	{	background-image: url('../img/icon/icon-cm-open.svg');  }
			a span.icon.serv	{	background-image: url('../img/icon/icon-cm-serv.svg');  }
			a span.icon.about	{	background-image: url('../img/icon/icon-cm-about.svg'); }
			a span.icon.route	{	background-image: url('../img/icon/icon-cm-route.svg'); }
			a span.icon.price	{	background-image: url('../img/icon/icon-cm-price.svg'); }
			a span.icon.soko	{	background-image: url('../img/icon/icon-cm-soko.svg');  }
			a span.icon.unso	{	background-image: url('../img/icon/icon-cm-unso.svg');  }
										

					li.off 		{	background-image: url('../img/svg/plus-gray.svg'); }

					li.off > ul	{	max-height: 0px; 
									margin-bottom: 0px;
										-moz-transition: 	max-height 0.15s ease-out;
										-webkit-transition: max-height 0.15s ease-out;
										transition: 		max-height 0.15s ease-out; }
									
					

	nav div.hhm		{	position: fixed;    z-index: 2; display: block; top: 25px; right: 5%; width: 30px; height: 30px; background-color: transparent; }
	nav div.hhm a	{	position: absolute; z-index: 2; display: block; width: 30px; height: 30px; margin: 0; border: 0; background-color: transparent; }
	

		div.hhm span {
		  position: 			absolute;
		  display: 				block;
		  width: 				30px;
		  height: 				4px;
		  background-color: 	#000;
		  border-radius: 		0;
		  -webkit-transition: 	all 0.3s;
		  -moz-transition: 		all 0.3s;
		  -ms-transition: 		all 0.3s;
		  -o-transition: 		all 0.3s;
		  transition: 			all 0.3s;
		  z-index: 				-1;
		}
		
		div.hhm .top, div.hhm .bottom { top: 14px; }
		
		div.hhm .top {			/*background-color: #666;*/

		  -webkit-transform: 	rotate(45deg);
		  -moz-transform: 		rotate(45deg);
		  -ms-transform: 		rotate(45deg);
		  -o-transform: 		rotate(45deg);
		  transform: 			rotate(45deg);
		}
		
		div.hhm .bottom {	  	/*background-color: #666;*/ 

		  -webkit-transform: 	rotate(-45deg);
		  -moz-transform: 		rotate(-45deg);
		  -ms-transform: 		rotate(-45deg);
		  -o-transform: 		rotate(-45deg);
		  transform: 			rotate(-45deg);
		}
		
		div.hhm .middle {		opacity: 0; }
		
								nav.close div.hhm .top 		{ top: 	2px; background-color: #fff; }
								nav.close div.hhm .middle 	{ top: 12px; background-color: #fff; }
								nav.close div.hhm .bottom 	{ top: 22px; background-color: #fff; }
								
								nav.close div.hhm .top { 		 

								  -webkit-transform: 	rotate(0);
								  -moz-transform: 		rotate(0);
								  -ms-transform: 		rotate(0);
								  -o-transform: 		rotate(0);
								  transform: 			rotate(0);
								}
								
								nav.close div.hhm .bottom {
								  -webkit-transform: 	rotate(0);
								  -moz-transform: 		rotate(0);
								  -ms-transform: 		rotate(0);
								  -o-transform: 		rotate(0);
								  transform: 			rotate(0);
								}
								
								nav.close div.hhm .middle {	opacity: 1;	}
											
nav		{	-webkit-transition: 	right 600ms ease-in-out; 
			-moz-transition: 		right 600ms ease-in-out; 
			-o-transition: 			right 600ms ease-in-out; 
			-ms-transition: 		right 600ms ease-in-out; 
			transition: 			right 600ms ease-in-out; }

/* ======================
		Phone
========================= */

@media only screen and (min-width : 0) and (max-width : 600px)
{	
	@media only screen and (orientation : portrait)
	{		
		nav 			{	width: calc(100% + 16px); }		
		nav.close		{	right: calc(-100% - 16px); } 
		nav ul			{	width: calc(85% - 30px); margin-left: 5%; }

	}
	@media only screen and (orientation : landscape)
	{		
		nav 			{	width: calc(70% + 16px); }		
		nav.close		{	right: calc(-70% - 16px); }
		nav ul			{	width: calc(76% - 30px); ; margin-left: 8%; }
	}
}

/* ======================
		PAD
========================= */

@media only screen and (min-width : 601px) and (max-width : 1024px)
{	
	nav 			{	width: calc(50% + 16px); }		
	nav.close		{	right: calc(-50% - 16px); } 
	nav ul			{	width: 70%; margin-left: 10%; }
	
	@media only screen and (orientation : portrait)
	{		
	}
	@media only screen and (orientation : landscape)
	{		
	}
}

/* ======================
		DESKTOP
========================= */

@media only screen and (min-width : 1025px)
{		
	nav 		{	top: 110px; left: 30px; position: fixed; width: 260px; height: auto; border-radius: 4px; border-width: 1px; box-shadow: none;}

		nav div.scroll			{	 position: relative; height: auto; width: calc(100% - 28px); padding: 10px 5%; }
		
		nav ul					{	width: 100%; font-size: 0.85rem; }
		nav ul li				{		background-position:  	right 0.60rem; 
										background-size: 		0.60rem; }
		nav ul li:last-child	{	margin-bottom: 0;}
		nav ul li ul span		{	margin-left: 2.00rem; font-size: 0.85rem; line-height: 1.4; margin-bottom: 0.30rem; }
		nav ul li ul span span	{	width: 3.00rem; margin-bottom: 0; margin-left: 0; }
		nav ul li ul span a		{	margin-bottom: 0.30rem; }

			a span.icon		{	width: 2rem; height: 2rem; background-size: 1.0rem; }		

	nav div.hhm		{	display: none; }

}