.face-wrapper,.face-list{
  list-style:none;
  padding:0;
  margin:0;	
}
.face-wrapper{
  text-align:center;
  width:625px;
  margin:auto;
  border-radius:50%;
}
.face-list,.face-img{
  margin:auto;		
  border-radius:50%;		
}
.face-list{
  background:#000;
  display:inline-block;
  margin:auto -20px;
  overflow:hidden;
  width:150px;
  height:150px;
  line-height:220px;
  text-align:center;
  padding:10px;
}
.face-img{
  transition:all .3s, transform .3s .2s;
  -webkit-transition:all .3s, -webkit-transform .3s .2s;			
  opacity:.2;
  width:75px;
  height:75px;
}
.face-img:hover{
  opacity:1;
  width:150px;
  height:150px;
  cursor:pointer;			
}
.face-list:nth-child(odd):hover > .face-img{
  transform:rotate(45deg);
  -webkit-transform:rotate(45deg);
}
.face-list:nth-child(even):hover > .face-img{
  transform:rotate(-45deg);
  -webkit-transform:rotate(-45deg);
}
.face-list:nth-child(odd):hover > .face-img:hover{
  transform:rotate(-20deg);
  -webkit-transform:rotate(-20deg);
}
.face-list:nth-child(even):hover > .face-img:hover{
  transform:rotate(20deg);
  -webkit-transform:rotate(20deg);
}
.desc-face{
  height:100px;
  width:130px;
  border-bottom:10px solid black;
  border-right:5px solid black;
  border-top:5px solid black;
  border-radius:0 50% 50% 50%;
  padding:10px;		
  position:absolute;
  line-height:100px;
  margin-top:40px;
  transition:all .3s .2s, opacity .3s .1s;
  font-size:1.5em;
  opacity:0;
  color:white;
  text-shadow:1px 1px 1px #000;
  font-family:verdana;
  text-transform:uppercase;
  letter-spacing:3px;
  box-shadow:20px 30px 40px #000 inset;
}
.desc-face-hover{
  margin-top:110px;
  opacity:1;
}
.cred,.cred > .more-desc:before{
  background:darkred;
}
.cgreen,.cgreen > .more-desc:before{
  background:darkgreen;
}
.cblue,.cblue > .more-desc:before{
  background:teal;
}
.cbrown, .cbrown > .more-desc:before{
  background:brown;
}
.more-desc{
  padding:10px 5px 5px 30px;
  width:120px;
  top:85px;
  position:absolute;
  margin-left:70px;
  line-height:12px;
  height:auto;
  font-size:12px;
  font-family:consolas,courier;
  letter-spacing:0;
  background:yellow;
  border-radius:5px 8px 8px 20px;
  text-transform:none;
  color:black;
  text-shadow:none;
  box-shadow:5px 5px 10px #333;
  text-align:right;
  opacity:0;
  transition:all .2s .4s, opacity .3s;
  -webkit-transition:all .2s .3s,opacity .3s;
  transform-origin:0 0;
  -webkit-transform-origin:0 0;
  transform:rotate(-20deg);
  -webkit-transform:rotate(-20deg);
}
.more-desc:before{
  content:'';
  position:absolute;
  height:20px;
  width:20px;
  border-radius:50%;
  background:red;
  top:5px;
  left:5px;
  box-shadow:1px 2px 5px #000 inset;
}	
.more-desc-hover{
  opacity:1;
  transform:rotate(10deg);
  -webkit-transform:rotate(10deg);
}