/* flexthumb gallery ==========================================*/
.galbox a[id^='x'] img {margin-bottom:5px;width:100%;}
/* default: 1 thumbs in einer zeile - der kleinste DEFAULT immer zuerst! */
.galbox div.cell { 
		float: 		left; 
		width: 		45%; 	  
		margin: 	0 1% 1% 0; 
		background: transparent; 
		text-align: left; 
		color: 		#aaa; 
		overflow:	hidden;
}

.galbox { margin: 10px 4% 10px 6%; min-height:200px;}
@media (max-width: 640px) { .galbox { margin: 10px 3% 10px 9%; } }
@media (max-width: 360px) { .galbox { margin: 10px 1% 10px 12%; } }

.textb   { 
	border:0px solid #777;
	background-color: transparent;
	color: black;
	margin:20px;
	padding:0px;
	width: calc(100% - 40px);
	position:absolute;
	top:0;
}
.galbox div.noframe { border:0; margin:0;}



@media (min-width: 750px) { .galbox div.cell { width:30%; }}  		/* 3 thumbs in einer zeile */


.galbox div.quer { width:100%;font-size:	14px;}
.quer a[id^='x'] img {margin-bottom:5px;float:right;width:30%;margin-left:15px;}
.galbox div.flat { 
	clear:both;
	overflow:hidden;
	border: 2px solid #aaa;
	background-color: #eee;
	border-radius: 5px;
	font-size:	14px;
}



/* Flipbox #########################################*/

img { width: 100%; height:auto}

.flipbox {
  perspective: 2000px; 
  max-width: 600px; 
  margin-left:auto; margin-right:auto;
  margin-top: 2em; 
}
.flipbox:hover .flipper, .flipbox.hover .flipper { 
  transform: rotateY(180deg); 
}
.flipbox, .front, .back {
  width: 270px;height: 202px; 
}

/** Für größere Viewports **/
@media (min-width: 640px) {
  .flipbox, .front, .back {
    width: 600px;height: 448px; 
  }
}

.flipper {
  position: relative;
  transition: 1s;
  transform-style: preserve-3d;
  
}

.front, .back {
  position: absolute;top: 0;left: 0;
  -webkit-backface-visibility:hidden;
  backface-visibility: hidden;
  width:100%;
}

.front {transform: rotateY(0deg);}
.back {transform: rotateY(180deg);}