@charset "UTF-8";

.zp_flipbutton {
	position: relative;
	z-index: 0;
	display: block;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	float: none !important;
	margin-left: 0px;
	margin-right: 0px;
	padding-left: 0px;
	padding-right: 0px;

	width: 100%;

	text-align: center;
	background: #000000;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-o-border-radius: 4px;
	-webkit-border-radius: 4px;
	perspective: 600px;
	font-size: 20px;
	box-shadow: inset 0 1px 2px rgba(0,0,0,.2), inset 0 .25rem 1rem rgba(0,0,0,.1);
	-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2), inset 0 .25rem 1rem rgba(0,0,0,.1);
	-moz-box-shadow:  inset 0 1px 2px rgba(0,0,0,.2), inset 0 .25rem 1rem rgba(0,0,0,.1);
	-o-box-shadow:   inset 0 1px 2px rgba(0,0,0,.2), inset 0 .25rem 1rem rgba(0,0,0,.1);
}

.zp_flipbutton .link {
	padding: 0px;
	display: block;
}

.zp_flipbutton, .zp_flipbutton div {
	transition-duration: .6s;
	-webkit-transition-duration: .6s;
	-o-transition-duration: .6s;
	-moz-transition-duration: .6s;
	position: relative;
}

.zp_flipbutton, .zp_flipbutton .button {
	transition-timing-function: ease;
	-webkit-transition-timing-function: ease;
	-moz-transition-timing-function: ease;
	-o-transition-timing-function: ease;
}

.zp_flipbutton a,
.zp_flipbuttonn a:hover {
	display: block;
	padding: 20px;
	color: #000000;
}

.zp_flipbutton .button {
	opacity: 0;
}

.zp_flipbutton .cover {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	transform-origin: center bottom;
	-webkit-transform-origin: center-bottom;
	-moz-transform-origin: center bottom;
	-o-transform-origin: center bottom;
	-ms-transform-origin: center bottom;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	color: #ffffff;
	text-align: center;
	pointer-events: none;
	z-index: 100;
	backface-visibility: visible;
	-webkit-backface-visibility: visible;
	-moz-backface-visibility: visible;
}

.zp_flipbutton .innie, .zp_flipbutton .outie, .zp_flipbutton .shadow {
	position: absolute; width: 100%;
}

.zp_flipbutton .innie, .zp_flipbutton .outie {
	height: 100%;
	background-image: -webkit-linear-gradient(top, transparent 0%, rgba(0,0,0,.1) 100%);
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	backface-visibility: visible !important;
	-webkit-backface-visibility: visible !important;
	-moz-backface-visibility: visible !important;
}

.zp_flipbutton .innie {
	background-color: #000000;
}

.zp_flipbutton .shadow {
	left: 0;
	height: 100%;
	transform-origin: center top;
	-webkit-transform-origin: center top;
	-moz-transform-origin: center top;
	-o-transform-origin: center top;
	-ms-transform-origin: center top;
	transform: rotateX(90deg);
	-webkit-transform: rotateX(90deg);
	-ms-transform: rotateX(90deg);
	-moz-transform: rotateX(90deg);
	-o-transform: rotateX(90deg);
	opacity: 0;
	z-index: 0;
	background-image: -webkit-linear-gradient(top, rgba(0,0,0,.6) 0%, transparent 100%);
	background-image: linear-gradient(to bottom, rgba(0,0,0,.6) 0%, transparent 100%);
	border-radius: .4rem;

}

.zp_flipbutton .outie {
	position: relative;
	background-color: #000000;
	transform: translateZ(.25rem);
	-webkit-transform: translateZ(.25rem);
	-moz-transform: translateZ(.25rem);
	-o-transform: translateZ(.25rem);
	-ms-transform: translateZ(.25rem);
}

.zp_flipbutton .outie .title {
	position: relative;
	display: block;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
}

.zp_flipbutton .link .title {
	padding: 20px;
	display: block;
}

.zp_flipbutton:hover {
	background: #ffffff;
}

.zp_flipbutton:hover .button {
	opacity: 1;
}

.zp_flipbutton:hover .cover, .zp_flipbutton:hover .innie, .zp_flipbutton:hover .outie {
	transition-timing-function: cubic-bezier(.2,.7,.1,1.1);
	-webkit-transition-timing-function: cubic-bezier(.2,.7,.1,1.1);
	-moz-transition-timing-function: cubic-bezier(.2,.7,.1,1.1);
	-o-transition-timing-function: cubic-bezier(.2,.7,.1,1.1);
}

.zp_flipbutton:hover .cover {
	transform: rotateX(-120deg); -webkit-transform: rotateX(-120deg); -moz-transform: rotateX(-120deg); -o-transform: rotateX(-120deg); -ms-transform: rotateX(-120deg);
}

.zp_flipbutton:hover .innie {
	background-color: #666666;
}

.zp_flipbutton:hover .outie {
	background-color: #333333; color: rgba(255,255,255,0);
}

.zp_flipbutton:hover .shadow {
	opacity: 1;
	transform: rotateX(00deg) scale(.95, 1.1);
	-webkit-transform: rotateX(0deg) scale(.95, 1.1);
	-moz-transform: rotateX(45deg) scale(.95, 1.1);
	-o-transform: rotateX(45deg) scale(.95, 1.1);
	-ms-transform: rotateX(45deg) scale(.95, 1.1);
}