.allcard {
	perspective: 1000px;
	-webkit-perspective: 1000px;
	-moz-perspective: 1000px;
	-o-perspective: 1000px;
	-ms-perspective: 1000px;
	width:90%;
	height:313px;
	vertical-align:top;
	position:absolute;
	display:block;
    font-weight:bold;
}

.allcard .content {
	transition: 0.5s ease-out;
	-webkit-transition: 0.5s ease-out;
	-moz-transition: 0.5s ease-out;
	-o-transition: 0.5s ease-out;
	-ms-transition: 0.5s ease-out;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;

	/* content backface is visible so that static content still appears */
	backface-visibility: visible;
	-webkit-backface-visibility: visible;
	-moz-backface-visibility: visible;
	-o-backface-visibility: visible;
	-ms-backface-visibility: visible;


	position:relative;
	width: 100%;
	height: 100%;
	
}
.allcard.applyflip .content {
	transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
	-ms-transform: rotateY(180deg);
}


.allcard .content .allcardStatic {
	/* Half way through the allcard flip, rotate static content to 0 degrees */
	transition: 0s linear 0.17s;
	-webkit-transition: 0s linear 0.17s;
	-moz-transition: 0s linear 0.17s;
	-o-transition: 0s linear 0.17s;
	-ms-transition: 0s linear 0.17s;
	transform: rotateY(0deg);
	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	-o-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);

	text-align: center;
	position: absolute;
	top: 0;
	left: 0;
	height: 0;
	width: 100%;
}

.allcard.applyflip .content .allcardStatic {
	/* Half way through the allcard flip, rotate static content to -180 degrees -- to negate the flip and unmirror the static content */
	transition: 0s linear 0.17s;
	-webkit-transition: 0s linear 0.17s;
	-moz-transition: 0s linear 0.17s;
	-o-transition: 0s linear 0.17s;
	-ms-transition: 0s linear 0.17s;
	transform: rotateY(-180deg);
	-webkit-transform: rotateY(-180deg);
	-moz-transform: rotateY(-180deg);
	-o-transform: rotateY(-180deg);
	-ms-transform: rotateY(-180deg);
}

.allcard .content .allcardFront {
    /*background-color: skyblue;
    color: tomato;*/
}

.allcard .content .allcardBack {
    /*background-color: tomato;
    color: skyblue;*/
}

.allcard .content .allcardFront, .allcard .content .allcardBack {
	/* Backface visibility works great for all but IE. As such, we mark the backface visible in IE and manage visibility ourselves */
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	-ms-backface-visibility: visible;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	text-align: center;
}
.allcard .content .allcardFront, .allcard.applyflip .content .allcardFront {
	transform: rotateY(0deg);
	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	-o-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
}

.allcard .content .allcardBack, .allcard.applyflip .content .allcardBack {
	transform: rotateY(-180deg);
	-webkit-transform: rotateY(-180deg);
	-moz-transform: rotateY(-180deg);
	-o-transform: rotateY(-180deg);
	-ms-transform: rotateY(-180deg);
}

.allcard .content .allcardFront, .allcard.applyflip .content .allcardBack {
	/* IE Hack. Halfway through the allcard flip, set visibility. Keep other browsers visible throughout the allcard flip. */
	animation: stayvisible 0.5s both;
	-webkit-animation: stayvisible 0.5s both;
	-moz-animation: stayvisible 0.5s both;
	-o-animation: stayvisible 0.5s both;
	-ms-animation: donothing 0.5s;
	-ms-transition: visibility 0s linear 0.17s;
	visibility: visible;
}
.allcard.applyflip .content .allcardFront, .allcard .content .allcardBack {
	/* IE Hack. Halfway through the allcard flip, set visibility. Keep other browsers visible throughout the allcard flip. */
	animation: stayvisible 0.5s both;
	-webkit-animation: stayvisible 0.5s both;
	-moz-animation: stayvisible 0.5s both;
	-o-animation: stayvisible 0.5s both;
	-ms-animation: donothing 0.5s;
	-ms-transition: visibility 0s linear 0.17s;
	visibility: hidden;
}
@keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
@-webkit-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
@-moz-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
@-o-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
@-ms-keyframes donothing { 0% { } 100% { } }