.social {
  width: 400px;
  height: 220px;
  position: fixed;
  margin-top: 80px;
  perspective: 1000px;
  z-index:9999;
	list-style-type: none;
}

.social li a {
  display: block;
  height: 40px;
  width: 40px;
  background: #008998;
  color:#FFF;
  -webkit-font-smoothing: antialiased;
  padding: 10px;
  text-decoration: none;
  text-align: center;
  vertical-align:central;
  transition: background .5s ease .300ms
}

.social li:first-child  a:hover { background: #00AF9D }
.social li:nth-child(2) a:hover { background: #8FD400 }


.social li:first-child a { border-radius: 0 5px 0 0 }
.social li:last-child  a { border-radius: 0 0 5px 0 }
    
.social li a span {
  width: 200px;
  float: left;
  text-align: center;
  background: #222;
  color: #fff;
  margin: -25px 35px;
  padding: 8px;
  transform-origin: 0;
  visibility: hidden;
  opacity: 0;
  transform: rotateY(45deg);
  border-radius: 8px;
  transition: all .5s ease .300ms;
  font-family: "Montserrat";
}

.social li span:after {

  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: -40px;
  top: 7px;
  border: 10px solid transparent;
  border-right: 10px solid #222;
}

.social li a:hover span {
  visibility: visible;
  opacity: 1;
  transform: rotateY(0)
}