@import url(http://fonts.lug.ustc.edu.cn/css?family=Open+Sans);@import url(http://weloveiconfonts.com/api/?family=entypo);
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}
*,*:before,*:after{
  box-sizing: border-box;
}
body{
  background:#36bfa6;
  text-align:center;
  font-family: 'Open Sans', sans-serif;
}

.share-button{
  position:absolute;
  height:36px;
  top:50%;
  margin-top:-17px;
  width:135px;
  left:50%;
  margin-left:-65px;
  background:#368b8b;
  border-radius:20px;
  overflow:hidden;
  line-height:36px;
  user-select: none;
}
/*----- FIX overflow + transform + border-radius ---*/
.share-button:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: '';
box-shadow: 0 0 0 50px #36bfa6;
box-sizing: content-box;
transform: translate(0,0);
border-radius: 50px;
z-index: 3;
pointer-events: none;
}
.lid{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:#fff;
  border-radius:20px;
  color:#aeaeae;
  transition: 300ms ease all;
  transform-origin: 0 0;
  cursor:default;
z-index: 4;
}
.open .lid{
  transform:rotateX(90deg);
}
.thank-you {
  position:absolute;
top: -100px;
left: 0;
width: 100%;
color: #fff;
  transition: 300ms ease all;
}
.thankyou .thank-you{
  position:absolute;
  top:0px;
}
.share-item{
  display:block;
  color:#368b8b;
  background:#fff;
  text-decoration:none;
  height:30px;
  width:30px;
  text-align:center;
  line-height:30px;  
  border-radius:50%;
  float:left;
  margin-left:3px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
  transition: 500ms ease all;
}
.share-item:active{
  background:#eb4c89;
  transition: 50ms ease all;
}
.share-item:nth-child(1){
transform: translateX(200px) rotate(180deg);
}
.share-item:nth-child(2){
transform: translateX(400px) rotate(200deg);
}
.share-item:nth-child(3){
transform: translateX(580px) rotate(220deg);
}
.share-item:nth-child(4){
transform: translateX(740px) rotate(240deg);
}
.share-item:nth-child(5){
transform: translateX(880px) rotate(260deg);
}
.share-item:nth-child(6){
transform: translateX(1000px) rotate(280deg);
}
.open .share-item{
transform: translateX(0) rotate(0);  
margin-left:3px;
}
.share-items {
position: absolute;
top: 0;
right: 0;
height: 100%;
padding: 3px 0;
width: 201px;
}
.share-items-wrapper{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;  
  width : 267px;
  left: 50%;
  margin-left:-133.5px;
}
.shared .share-item{
  transform :translateY(200px);
}
.shared .share-item:nth-child(1){
  transition: 200ms cubic-bezier(.32,-0.22,.9,.93) all;
}
.shared .share-item:nth-child(2){
  transition: 600ms cubic-bezier(.32,-0.22,.9,.93) all;
}
.shared .share-item:nth-child(3){
  transition: 1000ms cubic-bezier(.32,-0.22,.9,.93) all;
}
.shared .share-item:nth-child(4){
  transition: 1400ms cubic-bezier(.32,-0.22,.9,.93) all;
}
.shared .share-item:nth-child(5){
  transition: 1800ms cubic-bezier(.32,-0.22,.9,.93) all;
}
.shared .share-item:nth-child(6){
  transition: 2200ms cubic-bezier(.32,-0.22,.9,.93) all;
}