/* Menu
 * ------------ */


#menu{
position: fixed;
float:left;
top:1.5em;
width: 80%;
margin-left:10%;
text align: center;
z-index:5;
}

#menu ul{
	list-style-type: none;
	text-align:center;
}

#menu li{
display: inline-block;
cursor:pointer;
margin-left:0.5em;
margin-right:0.5em;
}


#menu li a{
float:left;
display:inline-block;
text-align:center;
width:50px;
height:50px;
background-color: #fff;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
-moz-box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.4);
box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.4);
}


#menu li .label{
  position: absolute;
  margin-top: 4em;
  display:block;
  text-align:center;
  color: #ccc;
  opacity: 0;	
}
#menu li:hover .label {
  opacity: 1;
}
#menu li a.active{	
-ms-filter: grayscale(1) brightness(110%);
-webkit-filter: grayscale(1) brightness(110%);
-moz-filter: grayscale(1) brightness(110%);
-o-filter: grayscale(1) brightness(110%);
filter: grayscale(1) brightness(110%);
}


#menu img{width:50px;}
#menu img:hover{transition:.5s ease;}


@media (max-width: 640px) {
#menu{width: 100%; margin-left:0;}
}

@media (max-width: 480px) {
#menu li{margin-left:0.2em;margin-right:0.2em; display:none;}
#menu li:hover .label {opacity: 0;}
}