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

@media (min-width : 1100px) {
	nav {
	  border-style: none;
	  height:98%;
	  left: 25px;
	  top: 190px;
	  z-index: 1000;
	  white-space: nowrap;
      text-align: right;
	}
	
	.menu_icon {
		display: hidden;
		width: 40px;
		height: 40px;
		background: rgba(0, 0, 0, 0.5) url(../pictures/menu-icon.png) center;
	
	}

	nav ul li {
	  display: inline-block;
	  position: relative;
	 
	}
	 
	nav li ul {
	  display: none;
	}
	 
	nav ul li a {
	  display: block;
	  text-decoration: none;
	  padding: 0px 15px 0px 15px;
	  background: rgba(0, 0, 0, 0.5);
	  color: #ffffff; 
	  border-radius: 10px;
	  margin-left: 1px;
	  white-space: nowrap;
	  text-align:center;
	 
	}
	 
	nav ul li a:link {
		color: #ffffff; 	 
	}
	
	nav ul li a:visited {
		color: #ffffff; 	 
	}

	nav ul li ul li a {	
	  border-radius: 0px;
	}
	nav ul li a:hover {
	  background: #3b3b3b;
	}
	 
	nav ul li ul li a:link {
		color: #ffffff; 	 
	}
	
	nav ul li ul li a:visited {
		color: #ffffff; 	 
	}
	 
	nav li:hover ul {
	  display: block;
	  position: absolute;
	  left:180px;
	  top:0px;
	  height:0px;
	  z-index: 10;
	}
	 
	nav li:hover li {
	  float: none;
	  font-size: 11px;
	 
	}
	 
	nav li:hover a {
	  background: #3b3b3b;
	}
	 
	nav li:hover li a:hover {
	  background: #3b3b3b;
	}
	 
	nav ul li ul li a {
	    text-align:left; /* Top-level items are centered, but nested list items are left-aligned */
	}
	 
	/* END NAV MENU */
}

@media only screen and (max-width : 1099px) {
	.menu_icon {

		display:inline-block;
		width: 40px;
		height: 40px;
		background: url(../pictures/menu-icon.png) center;

	}

	nav ul{ 

		display: none;
		padding: 20px;
		background: rgba(0, 0, 0);
		border: 5px solid #444;
		top: 60px;
		width: 172px;
		border-radius: 4px 0 4px 4px;
	    font-family: Arial, Verdana;
	    font-size: 20px;
	    margin: 0;
	    padding: 0;
	}
	
	nav ul ul { 

		border: none;
		font-style: italic;
		text-align: right;
		font-size: 18px;

	}
	
	nav ul li a {
	  text-decoration: none;
	  padding: 5px 15px 3px 15px;
	  background: rgba(0, 0, 0);
	  color: #ffffff; 
	  margin-left: 1px;
	  white-space: nowrap;
	  height:30px; /* Width and height of top-level nav items */
	  width:130px;
	 
	}
	
	nav li {

		width: 100%;
		padding: 5px 0;
		margin: 0;

	}
	
	nav {
	  border-style: none;
	  height:100%;
	  right: 0px;
	  position: fixed;
	  overflow:scroll;
	  top: 0px;
	  z-index: 1000;
	  white-space: nowrap;
      text-align: right;
	}
	
	nav::-webkit-scrollbar {
		display: none;
	} 
	 
	nav ul li {
	  position:static;
	 
	}
	 	 		 
	 
	nav li:hover a {
	  background: #3A464F;
	  height:30px; /* Height of lower-level nav items is shorter than main level */
	}
}

.active a {
	font-weight: bold;
	font-style: italic;
}