flippy {
  float: left;
  -webkit-perspective: 600px;
  -moz-perspective: 600px;
  -ms-perspective: 600px;
  perspective: 600px;
}
flippy-front {
  position: absolute;
  z-index: 900;
  width: inherit;
  height: inherit;
  -webkit-transform: rotateX(0deg) rotateY(0deg);
  -moz-transform: rotateX(0deg) rotateY(0deg);
  -ms-transform: rotateX(0deg) rotateY(0deg);
  transform: rotateX(0deg) rotateY(0deg);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
}
flippy-back {
  position: absolute;
  z-index: 800;
  width: inherit;
  height: inherit;
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
}
flippy.flipped flippy-front {
  z-index: 900;
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
flippy.flipped flippy-back {
  z-index: 1000;
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  transform: rotateY(0deg);
}







flippy.fancy {
  float: left;
  margin: 0 10px 10px 0;
  position: relative;
  cursor: pointer;
}

flippy.fancy { 
  width: 60px;
  height: 60px;
}

flippy.fancy img {
  width:auto;
  max-width:100%;
  height:auto;
  max-height:100%;
  vertical-align: middle;
}
.cardHelper {
  display: inline-block;
  height: 100%;
  vertical-align: middle; 
}
flippy.fancy flippy-front {
  float: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 900;
  width: inherit;
  height: inherit;
  border: 1px solid #ccc;
  background: #FAE944;
  text-align: center;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.9);
}
flippy.fancy flippy-front.flipped {
  border-color: #eee;
  /*background: #333;*/
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
}
flippy.fancy flippy-back {
  float: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 800;
  width: inherit;
  height: inherit;
  border: 1px solid #ccc;
  background: white;
  text-align: center;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.9);
}
flippy.fancy flippy-back.flipped {
  /*background: #80868d;*/
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
}