/* -- Flipboxen -- */
.frame-flipbox {
	float: left;
	clear: both;
	width: 100%;
    opacity: 0;
}

.frame-flipbox .row > div .frame .ce-gallery .ce-row:nth-child(2) {
	display: block;
	color: inherit
}


.frame-flipbox .row > div .frame {
	width: 32%;
	display: inline-block;
	vertical-align: top;
	float: none;
	clear: none;
	margin: 0 0 10px 0;
	overflow: visible !important;
	cursor: pointer;
}


.frame-flipbox .row > div .frame img {
	width: 100% !important;
	height: auto !important;
	transition: all .5s ease-in-out; 
}

.frame-flipbox .row > div .frame .image {
	overflow: hidden;
}

.frame-flipbox .row > div .frame .image img{
	transform: scale(0.9);
}

.frame-flipbox .row > div .frame:hover .image img {
	transform: scale(1); 
}

/* -- flipper -- */
/* entire container, keeps perspective */
.flipcontainer {
	perspective: 1000px;
}

/* flip the pane when hovered */
.flipcontainer.hover .flipper {
	transform: rotateY(180deg);
}

.flipcontainer, .front, .back {
	width: 100%;
	height: 100%;
}

/* flip speed goes here */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;
	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;

}

/* front pane, placed above back */
.front {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
	transform: rotateY(180deg);
	transition: all 0.5s ease;
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
}

.back.showback {
	z-index: 3;
	backface-visibility: visible;
	-moz-backface-visibility: visible;
	-webkit-backface-visibility: visible;
	opacity: 1;
	top: -1px;
}

.front.hidefront {	
	backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	opacity: 0;
}

@media (max-width: 900px) {
	.frame-flipbox > .rahmen {
		text-align: center;
	}
	
	.frame-flipbox .row > div .frame {
		width: 100%;
		max-width: 400px;
		clear: both;
		margin: 0 0 15px !important;
	}
}