/* ==========================================================================
   Navigation Styles
   ========================================================================== */

nav {
	margin: 24px 0 0 200px;
	float: left;	
}

nav ul ul {
	display: none;
}

	nav ul li:hover > ul {
		display: block;
	}


nav ul {
	margin: 0;
	padding: 0;  
	list-style: none;
	position: relative;
	display: block;
}
	nav ul:after {
		content: ""; clear: both; display: block;
	}

	nav ul li {
		float: left;
		position: relative;
	}
		
		nav ul li a {
			float: left;
			color: #7c7c7c;
			font-size: 14px;
			font-weight: bold;
			text-decoration: none;
			padding: 10px 15px;
		}
		
		nav ul li a:hover {
			color: #7b2682;
		}
			
		
	nav ul ul {
		background: #fff; border-radius: 0 0 4px 4px; padding: 10px 0;
		position: absolute; top: 42px; left: -5px; min-width: 300px;
		-webkit-box-shadow:  0px 4px 6px 0px rgba(0, 0, 0, 0.2);
        box-shadow:  0px 4px 6px 0px rgba(0, 0, 0, 0.2);
	}
		nav ul ul li {
			float: none; 
			position: relative;
		}
			nav ul ul li a {
				float: none;
				display: block;
				padding: 2px 20px;
				color: #7c7c7c;
			}
		
	nav ul ul ul {
		position: absolute; left: 100%; top:0;
	}
	
nav li a, nav ul ul {
  -webkit-transform: translateZ(0);  
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.selectnav { display: none; padding: 5px}

@media screen and (max-width: 767px) {
	nav {float: right; margin: 20px 0 20px;}
	.js #nav { display: none; }
	.js .selectnav { display: block; margin-left:100px!important;}
}

@media only screen and (min-width: 768px) and (max-width: 1200px) {
 
  nav {
		margin: 24px 0 0 175px;
	}
	
	nav ul li a {
		padding: 10px 8px;	
	}
}
	
	@media screen and (max-width: 400px) {
	.js .selectnav { display: block; margin-left:100px!important;
	                 
	                 width:140px;
	                 }
	

}