@import url(https://fonts.googleapis.com/css?family=Roboto:400,300);
#icons > div {
  display: inline-block;
  margin: 10px;
}

.flip-container {
  width: 40px;
  height: 40px;
}

#flip, #flip-circle, #flip-reversed, #flip-circle-reversed {
  width: 40px;
  height: 40px;
  position: relative;
  -webkit-transition: all 0.275s ease-out;
  transition: all 0.275s ease-out;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.flip-container:hover #flip, .flip-container:hover #flip-circle, .flip-container:hover #flip-reversed, .flip-container:hover #flip-circle-reversed {
  -webkit-transform: rotateX(180deg);
          transform: rotateX(180deg);
}

#flip i, #flip-circle i, #flip-reversed i, #flip-circle-reversed i {
  border: 2px solid white;
  line-height: 40px;
  font-size: 1.8em;
  display: inline-block;
  width: 100%;
  height: 100%;
  text-align: center;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

#flip i:first-of-type, #flip-circle i:first-of-type, #flip-reversed i:first-of-type, #flip-circle-reversed i:first-of-type {
  z-index: 100;
}

#flip i:last-of-type, #flip-circle i:last-of-type, #flip-reversed i:last-of-type, #flip-circle-reversed i:last-of-type {
  -webkit-transform: rotateX(180deg);
          transform: rotateX(180deg);
  color: white;
  background: white;
  border-color: white;
}

#flip-circle i, #flip-circle-reversed i {
  border-radius: 100%;
}

.flip-container:hover #flip-reversed, .flip-container:hover #flip-circle-reversed {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}

#flip-reversed i:last-of-type, #flip-circle-reversed i:last-of-type {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
/*# sourceMappingURL=social.css.map */