@charset "UTF-8";

#menu {
  padding-left:80px;
  width:100%;
  perspective:1000px;
  display:inline-block;
  margin:50px auto;
  text-align:center;
  transition:.3s transform ease;
}

#menu li {
  display:inline-block;
  position:relative;
  list-style-type:none;
  transition:.3s transform ease;
  box-shadow:0 0 10px rgba(0,0,0,.4);
}

#menu li.highlighted {
  transform:rotate(0) translateX(0)!important;
  z-index:99!important;
  box-shadow:0 0 80px rgba(0,0,0,.8);
}

#menu li.highlighted a {
  transform:scale(1.3);
}

#menu li a {
  position:relative;
  display:block;
  height:120px;
  width:120px;
  background:transparent url(https://ununsplash.imgix.net/uploads/1413259835094dcdeb9d3/6e609595?auto=format&fit=crop&fm=jpg&h=225&q=75&w=350) no-repeat center;
  background-size:cover;
  color:white;
  font-size:30px;
  border-top:solid 1px rgba(255,255,255,.2);
}

ul#menu li:after {
  content:"";
  width:100%;
  height:20px;
  background:rgba(255,255,255,.5);
  position:absolute;
  bottom:-20px;
  left:0;
  -webkit-mask-image:-webkit-gradient(linear,left 10%,left bottom,from(rgba(0,0,0,.2)),to(rgba(0,0,0,0)));
  z-index:-1;
}

/* housekeeping */
body {
  background-color:rgba(0,0,0,.5);
}