.flipcard {
  margin:30px auto;
  position:relative;
  width:300px;
  height:100px;
  color:#FFF;
  text-align:center;
}

.flipcard h1 {
  font-size:30px;
  font-weight:bold;
  line-height:98px;
  margin:0;
  padding:0;
  color:#5c5c5c;
}

.flipcard h2 {
  font-size:21px;
  font-weight:bold;
  margin:0;
  text-align:center;
  position:relative;
  top:50%;
  -webkit-transform:translateY(-50%);
  -ms-transform:translateY(-50%);
  transform:translateY(-50%);
}

.flipcard p {
  font-size:13px;
  padding:5px 10px;
  margin:0;
}

.flipcard-front, .flipcard-back {
  height:100px;
  position:absolute;
  left:0;
  top:0;
  transition:transform 0.4s ease;
  transform-origin:center center -50px;
  -webkit-transform-origin:center center -50px;
  width:100%;
  border:solid 1px black;
}

.flipcard-front {
  background-color:#ffffff;
}

.flipcard-back {
  background:#2e8dc5;
}

.flipcard-rotate-top-down .flipcard-front {
  transform:perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}

.flipcard-rotate-top-down .flipcard-back {
  transform:perspective(1000px) rotateX(90deg) rotateY(0deg) rotateZ(0deg);
}

.flipcard-rotate-top-down.flipcard:hover .flipcard-front {
  transform:perspective(1000px) rotateX(-90deg) rotateY(0) rotateZ(0deg);
}

.flipcard-rotate-top-down.flipcard:hover .flipcard-back {
  z-index:99999;
  transform:perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0);
}

.flipcard-rotate-down-top .flipcard-front {
  transform:perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}

.flipcard-rotate-down-top .flipcard-back {
  transform:perspective(1000px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
}

.flipcard-rotate-down-top.flipcard:hover .flipcard-front {
  transform:perspective(1000px) rotateX(90deg) rotateY(0) rotateZ(0deg);
}

.flipcard-rotate-down-top.flipcard:hover .flipcard-back {
  z-index:99999;
  transform:perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}

.flipcard-rotate-left-right .flipcard-front {
  transform:perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}

.flipcard-rotate-left-right .flipcard-back {
  transform:perspective(9999px) rotateX(0deg) rotateY(-90deg) rotateZ(0deg);
}

.flipcard-rotate-left-right.flipcard:hover .flipcard-front {
  transform:perspective(9999px) rotateX(0deg) rotateY(90deg) rotateZ(0deg);
}

.flipcard-rotate-left-right.flipcard:hover .flipcard-back {
  z-index:99999;
  transform:perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}

.flipcard-rotate-right-left .flipcard-front {
  transform:perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}

.flipcard-rotate-right-left .flipcard-back {
  transform:perspective(9999px) rotateX(0deg) rotateY(90deg) rotateZ(0deg);
}

.flipcard-rotate-right-left.flipcard:hover .flipcard-front {
  transform:perspective(9999px) rotateX(0deg) rotateY(-90deg) rotateZ(0deg);
}

.flipcard-rotate-right-left.flipcard:hover .flipcard-back {
  z-index:99999;
  transform:perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}