nav a {

	color: #FFF;
	text-decoration: none;
	font-weight: bold;

}

nav a:visited {

	color: #FFF;
	text-decoration: none;
	font-weight: bold;

}


nav a:hover {
    
	background-color: #87bff3;

}

nav {
  margin: auto;
  padding: 0;
  background-color: #002f67;


}

#menu-icon {

	display: hidden;
	width: 40px;
	height: 40px;
	background: #4C8FEC url(../images/menu.jpg) center;

}

nav a:hover#menu-icon {
 
	background-color: #002f67;
	border-radius: 4px 4px 0 0;

}

ul {

 text-align: center;
  padding: 0;
  margin: 0 auto;
  list-style: none;
  position: relative;
}

li {

	display: inline-block;
	padding: 10px;
  color: #FFF;

}


/*MEDIA QUERY*/
@media only screen and (max-width : 640px) {

nav a {

	color: #002f67;
	text-decoration: none;
	font-weight: bold;

}

nav a:visited {

	color: #002f67;
	text-decoration: none;
	font-weight: bold;

}

	#menu-icon {

		display:inline-block;

	}

	nav ul, nav:active ul { 

		display: none;
		position: absolute;
		padding: 20px;
		background: #fff;
		border: 1px solid #444;
		right: 20px;
		top: 60px;
		width: 50%;
		border-radius: 4px 0 4px 4px;

	}

	nav li {

		text-align: center;
		width: 100%;
		padding: 10px 0;
		margin: 0;

	}

	nav:hover ul {

		display: block;

	}