nav.primary{display: inline-block; position: relative; width: 100%; z-index: 999;}
nav.primary ul{display: flex; justify-content: flex-end; width: 100%; margin: 0; padding: 0;}
nav.primary ul li{display: inline-block; position: relative; height: 100%; transition: 0.3s;}
nav.primary ul li i{margin-left: 10px;}
nav.primary ul li a{display: block; padding: 16px 12px; font-size: 15px; text-transform: uppercase; text-align: center; transition: 0.2s ease-in;}
nav.primary ul li:hover > a{background: #f5f5f5;}

nav.primary .primary-sub-menu li{border-bottom: 1px #ddd solid;}
nav.primary .primary-sub-menu li a{display: block; background: #fff; padding: 12px 14px; font-size: 12px; text-align: left;}

nav.primary ul ul{display: none; position: absolute; width: 250px; box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.1); z-index: 5;}
nav.primary ul ul ul{position: absolute; top: 0; left: 100%; z-index: 5;}
nav.primary ul li:hover > ul{display: block; position: absolute; white-space: nowrap; z-index: 100;}
nav.primary ul ul li{display: block; position: relative; float: none; margin: 0; font-size: 12px;}

/* MOBILE NAVIGATION */

nav.mobile, #menu-button{display: none;}

@media screen and (max-width: 1310px){
	nav.primary ul li a{padding: 16px 8px; font-size: 12px;}
}
@media screen and (max-width: 1090px){
	#menu-button{display: flex; align-items: center; justify-content: flex-end; padding: 5px 0; font-size: 20px; font-weight: 600; color: #333;}
	#menu-button i{margin-right: 8px;}

	.mobile.open{box-shadow: 6px 0px 13px -5px rgba(0, 0, 0, 0.35);}
	.mobile-nav{border-top: 1px #ccc solid;}

	.mobile .mobile_top{display: flex; align-items: center; padding: 14px 20px; color: #999;}
	.mobile .menu-toggle{margin-left: auto; font-size: 20px; font-weight: 700; text-decoration: none; line-height: 1; color: #aaa;}
	.mobile .menu-toggle:hover{color: #fff !important;}
	.mobile .social-container a{margin-right: 5px; font-size: 20px; transition: all 0.3s ease-in-out;}
	.mobile .social-container a:hover{opacity: .5;}
	
	nav.primary{display: none;}
	
	nav.mobile{display: block; position: fixed; top: 0; left: -250px; width: 250px; height: 100%; background: #232323; z-index: 9999; overflow: auto;}
	nav.mobile ul{margin: 0; padding: 0; font-weight: 300; list-style: none;}
	nav.mobile ul li{position: relative; border-bottom: 1px #ccc solid;}
	nav.mobile ul ul li{position: relative;}
	nav.mobile ul li a{display: inline-flex; justify-content: space-between; position: relative; width: 100%; padding: 12px 15px; font-size: 14px; font-weight: 500; text-decoration: none; text-align: left; color: #fff; border-left: 3px #ccc solid;}
	nav.mobile ul li:hover > a{border-left: 3px #194A90 solid;}
	nav.mobile ul li li:last-child, nav.mobile ul li li li:last-child{border-bottom: none;}
	nav.mobile ul li li a{display: block; position: relative; background: #fff; font-size: 14px; color: #333;}
	nav.mobile ul li li:hover > a{background: #f5f5f5;}

	.nav-footer{position: relative; padding: 20px; font-size: 12px; text-align: center; color: #aaa;}
}
@media screen and (max-width: 768px){
	#menu-button{justify-content: center;}
}