.flip {
	-webkit-perspective: 800;
	perspective: 800;
	position: relative;
	text-align: center;
}

	.flip .card.flipped {
		-webkit-transform: rotateY(-180deg);
		transform: rotateY(-180deg);
	}

	.flip .card {
		width: 100%;
		height: 178px;
		-webkit-transform-style: preserve-3d;
		-webkit-transition: 0.5s;
		transform-style: preserve-3d;
		transition: 0.5s;
		background-color: #222;
		color: #fff;
		margin-bottom: 15px;
		margin-top: 15px;
		font-size: 24px;
		box-shadow: 0 10px 10px rgba(0,0,0,0.5);
		-moz-box-shadow: 0 10px 10px rgba(0,0,0,0.5);
		-webkit-box-shadow: 0 10px 10px rgba(0,0,0,0.5);
	}

		.flip .card .face {
			-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
			z-index: 2;
			overflow: hidden;
		}

		.flip .card .front {
			position: absolute;
			width: 100%;
			z-index: 1;
			overflow: hidden;
			background-color: #888;
		}

			.flip .card .front img {
				width: auto; /*100%;*/
				height: 128px; /*100%;*/
			}

		.flip .card .img {
			position: relative;
			/*width: 270px;*/
			height: 128px; /*178px;*/
			z-index: 1;
			border: none;
		}

		.flip .card .back {
			width: 100%;
			-webkit-transform: rotateY(-180deg);
			transform: rotateY(-180deg);
			position: absolute;
			transition-delay: 0.5s;
		}

.inner {
	margin: 0px !important;
	width: 100%;
	display: table;
}

	.inner span {
		display: table-cell;
		vertical-align: middle;
		height: 178px;
		width: 100%;
		text-align: center;
		padding: 15px;
	}

.bg-pink {
	background-color: #ca0050;
}

.bg-green {
	background-color: #056000;
}

.bg-purple {
	background-color: #6030a0;
}

.bg-orange {
	background-color: #e65100;
}

.bg-crimson {
	background-color: #d50000;
}

.bg-mustard {
	background-color: #ffd600;
}

.bg-indigo {
	background-color: #283593;
}

.bg-brown {
	background-color: #4e342e;
}

.bg-teal {
	background-color: #006060;
}