﻿.flipper .front h1 { margin: 10px 0px; padding: 0px; width: 100%; color: #0085ca; font-size: 16px; font-weight: bold; letter-spacing: 0px; }
.flipper .back h1 { margin: 20px 0px 0px 0px; padding: 0px; width: 100%; color: #0085ca; font-size: 16px; font-weight: bold; letter-spacing: 0px; }


/* entire container, keeps perspective */
.flip-container {
	/*perspective: 1000;
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -o-perspective: 1000;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;*/
    float:left;
    margin-right: 20px;
    margin-bottom: 20px;
}

.flip-container.hover .front {
	transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
}

.flip-container.hover .back {
	transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
}

.flip-container, .front, .back {
    -webkit-transform: translateZ(1000px);
	width: 160px;
	height: 305px;
    text-align: center;
}

/* flip speed goes here */
.flipper {
	transition: 0.6s;
    -webkit-transition: 0.6s;
    -moz-transition: 0.6s;
    -o-transition: 0.6s;
	/*transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;*/
    cursor: pointer;
	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    background-color: #FFFFFF;
    transition: 0.6s;
    -webkit-transition: 0.6s;
    -moz-transition: 0.6s;
    -o-transition: 0.6s;
	/*transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;*/
  	position: absolute;
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.front {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
	transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
}

.front img { width: 170px; }
.front p { font-size:12px; }
.back p { text-align: left; padding-left: 15px; font-size: 11px; }
.back h1 { text-align: left; padding-left: 15px!important; }
.back h2 { text-align: left; padding-left: 15px!important; font-size: 14px}
