.referenz {
   perspective: 1500; /* Hier wird die Perspektive der gesamten Szene festgelegt. Der Wert hat Auswirkung auf die Verzerrung */
   float: left;

}

.referenz:hover .turnaround { 
   transform: rotateY(180deg); /* Beim Mouse-Over wird die Szene umgedreht */ 
}

.referenz .front { 
}

.referenz .back { 
   background-color: #212d39;
}

.turnaround {
	transition: .5s /* Die Drehung soll 0,5 Sekunden dauern */;
	transform-style: preserve-3d; /* Kind-Elemente  (.front + .back) sollen ihre 3D-Eigenschaften behalten*/
	position: relative;
	height: 100%;
	color:#ffffff;
	margin: 10px;
	border-radius: 5px;
	height: 220px;
	text-align: center;
}


.front,
.back {
	backface-visibility: hidden /* Die Rückseite von Elementen soll unsichtbar sein */;
	position: absolute;
	width: 100%;
	height: 100%;
	padding:20px 10px;
}


.back {
   transform: rotateY(180deg) /* Die Rückseite des Logos wird umgedreht, um dann bei der Drehung der gesamten Szene vorne zu sein :) */;
   z-index: 1;
}

.referenz .bggruen {
	background-color:#9ac00a;
}

.referenz .bgorange{
	background-color:#de5619;
}
.referenz .bgblau{
	background-color:#009fe3;
}