/* ------------- Navigation Code Starts Here ----------------------- */

nav{
	
	width:100%;
	height:50px;
	margin: 0 auto;
	margin-bottom:15px;
	position:relative;
	z-index:15;
	/* border-top: 3px solid #333333; */
	padding-top:5px;
	display:flex;
	
}

nav h2{
	color:black;
	padding: 6px 15px;
}

.menu,
.menu ul,
.menu li,
.menu a {
	/* margin:0;
	padding:0; */
	border:none;
	outline:none;
}



.menu {
	height:40px;
	width: auto;
	display:flex;
	margin:0;
	justify-content: space-around;
}

	

.menu li {
	list-style: none;
	height: 40px;
	flex-basis:auto;
	flex-grow:1;
	flex-shrink:1;
}



		.menu li:hover > ul { 
			opacity: 1;
			box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
			z-index: 7;
		}
		
			.menu li:hover > ul li {
				height: 36px;
				overflow: visible;
				padding: 0;
		
		
			}

		.menu ul li {
			height:0;
			overflow: hidden;
			padding: 0;
			float:left;
			
			
			
			-webkit-transition: height .25s ease .1s;
			-moz-transition: height .25s ease .1s;
			-o-transition: height .25s ease .1s;
			-ms-transition: height .25s ease .1s;
			transition: height .25s ease .1s;
		}

		.menu ul li a {
			width: 220px;
			padding: 4px 0 4px 4px;
			margin:0;
			color:#666;
			border:none;
			border-bottom: 1px solid #B0C4DE;
			
			
			
		}

			.menu li ul li a {
				color: #FFF; 
				background:#616161;	
				
				-webkit-transition-property: color, background;
				-webkit-transition-duration:.2s, .2s;
				-webkit-transition-timing-function:ease-in-out;
			}

			.menu li ul li:hover > a{
				background:#ccc;
				color:#000;
			}

		.menu ul li:last-child a {border:none;}

.menu li a {
	display: inline-block;
	padding: 6px 14px;
	margin: 0 0;
	line-height:28px;
	text-decoration: none;
	
	
	font-weight: bold;
	font-size: 18px;
	
	color: black;
	text-shadow: 1px 1px 1px rgba(255,255,255,.4);
	
	
	
	transition: color .2s ease-in-out;
	
	transition-property: color, background;
	transition-duration:.2s, .2s;
	transition-timing-function:ease-in-out;
}

.menu li:first-child a { border-left: none;}
.menu li:last-child a { border-right: none;}

.menu li:hover > a { 
	color: #000; 
	background:#ccc;
	}

/* ------------- Navigation Code Ends Here ----------------------- */