.hp-ext {
	display: inline-block;
	vertical-align: top;
	text-align: center;
	width: 33%;
}
.hp-ext-inner {
	display: inline-block;
	padding: 30px;
	margin: 10px;
	position: relative;
	transition: all 400ms ease-in-out 0s;
	-moz-transition: all 400ms ease-in-out 0s;
	-webkit-transition: all 400ms ease-in-out 0s;
	-o-transition: all 400ms ease-in-out 0s;
}
.hp-ext-back {
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color:rgba(0,0,0,0.5);
	transition: all 400ms ease-in-out 0s;
	-moz-transition: all 400ms ease-in-out 0s;
	-webkit-transition: all 400ms ease-in-out 0s;
	-o-transition: all 400ms ease-in-out 0s;
}
.hp-ext-inner:hover .hp-ext-back {
	opacity: 1;
}
.hp-ext-front .hp-ext-img img {
	width: 80px;
	margin:0 0 10px;
}
.hp-ext-front h3 {
	color: #333;
	display: inline-block;
	font-size: 23px;
	margin: 7px 0;
}
.hp-ext-back h3 {
	color: #333;
	display: block;
	font-size: 26px;
	margin: 7px 0;
}
.hp-ext-info {
	color: #666;
	display: inline-block;
	margin: 7px 0 0;
	width: 100%;
}
.hp-ext-version {
	display: block;
	font-size: 17px;
}
.hp-ext-date {
	display: block;
	font-size: 12px;
	margin: -2px 0 0;
}

.hp-ext-back {
	padding:40px 0 0 0;
	font-size: 15px;
	color: #666;
}





/* entire container, keeps perspective 
.hp-ext-flip-cont {
	-webkit-perspective: 1000;
	-moz-perspective: 1000;
	-ms-perspective: 1000;
	perspective: 1000;
	-ms-transform: perspective(1000px);
	-moz-transform: perspective(1000px);
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
}*/
/* flip the pane when hovered 
.hp-ext-flip-cont:hover .hp-ext-back, .hp-ext-flip-cont.hover .hp-ext-back {
	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	-o-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	transform: rotateY(0deg);
}
.hp-ext-flip-cont:hover .hp-ext-front, .hp-ext-flip-cont.hover .hp-ext-front {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
	transform: rotateY(180deg);
}*/
/* flip speed goes here 
.hp-ext-flipper {
	-webkit-transition: 0.6s;
	-webkit-transform-style: preserve-3d;
	-ms-transition: 0.6s;
	-moz-transition: 0.6s;
	-moz-transform: perspective(1000px);
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transition: 0.6s;
	transform-style: preserve-3d;
	position: relative;
}*/
/* hide back of pane during swap 
.hp-ext-front, .hp-ext-back {
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition: 0.6s;
	-webkit-transform-style: preserve-3d;
	-webkit-transform: rotateY(0deg);
	-moz-transition: 0.6s;
	-moz-transform-style: preserve-3d;
	-moz-transform: rotateY(0deg);
	-o-transition: 0.6s;
	-o-transform-style: preserve-3d;
	-o-transform: rotateY(0deg);
	-ms-transition: 0.6s;
	-ms-transform-style: preserve-3d;
	-ms-transform: rotateY(0deg);
	transition: 0.6s;
	transform-style: preserve-3d;
	transform: rotateY(0deg);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}*/
/* front pane, placed above back 
.hp-ext-front {
	z-index: 2;
	/* for firefox 31 but may be not needed
	transform: rotateY(0deg);
	*/
	/*
	-webkit-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
}*/
/* back, initially hidden pane 
.hp-ext-back {
	-webkit-transform: rotateY(-180deg);
	-moz-transform: rotateY(-180deg);
	-o-transform: rotateY(-180deg);
	-ms-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
}*/