/* flip stuff: http://davidwalsh.name/css-flip */

.flip-container {
	perspective: 1000;
  /* because the flippers are absolute? - might need a height */
}
.flip-container:hover .back, .flip-container.hover .back {
  -webkit-transform: rotateY(0deg); /* required */
  -moz-transform:    rotateY(0deg);
  -o-transform:      rotateY(0deg);
  -ms-transform:     rotateY(0deg);
  transform:         rotateY(0deg);
}

.flip-container:hover .front, .flip-container.hover .front {
  -webkit-transform: rotateY(180deg); /* required */
  -moz-transform:    rotateY(180deg);
  -o-transform:      rotateY(180deg);
  transform:         rotateY(180deg);
}

.flip-container, .front, .back {
}

.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;
  width:    256px;
  height:   256px;
	position: relative;
}

.front, .back {
	-webkit-backface-visibility: hidden; /* required */
	-moz-backface-visibility:    hidden;
	-ms-backface-visibility:     hidden;
	backface-visibility:         hidden;
  
  transition:      0.6s;
  transform-style: preserve-3d;
  transform:       rotateY(0deg);
}
.front, .back {
	position: absolute; /* w/o this, the back one ends up below */
	top:  0;
	left: 0;
}

.front {
	-webkit-transform: rotateY(0deg);
	-ms-transform:     rotateY(0deg);
	z-index:           2;
}

.back {
  -webkit-transform: rotateY(-180deg); /* this is required?! */
  -moz-transform:    rotateY(-180deg);
  -o-transform:      rotateY(-180deg);
  -ms-transform:     rotateY(-180deg);
  transform:         rotateY(-180deg);
}