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: #CCC;
}

nav {
  margin: auto;
  padding: 0;
  background-color: #000;
}

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

}

nav a:hover#menu-icon {
	background-color: #000;
	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: #000;
	text-decoration: none;
	font-weight: bold;

}
nav a:visited {
	color: #000;
	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;
	}