@mixin mobile-navigation{
	#primary-menu{
			position: fixed;
			overflow: auto;
			height: 100%;
			top: 0;
			right: 0;
			width:100%;
			max-width: 300px;
			
			padding-bottom: 30px;
			padding-left: 20px;
			
			ul{
				text-align: left;
				padding-bottom: 0;
				padding-top: 10px;
				right:0;
				top: 0;
				width: 100%;
				max-width: 300px;
				height: 100%;
				padding-left: 20px;
				box-sizing: border-box;
			}
			li{
				display: block;
				clear: both;
				text-align: left;
				padding: 0 0 16px 0;
				box-sizing: border-box;
			}
			a{
				padding-top: 2px;
				padding-bottom: 2px;
				color: #000;
			}
			
			

			.sub-menu li{
				float: none;
			}
		}
		
		
		.main-navigation{
			li a{
				height: auto;
			}
			ul ul li{
				border: 0;
			}	
			.sub-menu{
				display: none;
				position: relative;
				float: none;
				left: 0;
			}
			ul ul li:hover > ul,
			ul ul li.focus > ul {
				left: 0;
			}
			
		}
}