/************************************************
*
*  Allgemeines 
* 
*/
body {
	font-family: sans-serif, Arial;
	color: #ffffff;
	background-color: #000;
}

h2 {
	background-color: transparent;
	color: rgb(220,220,220);
}

.footer {
	font-family: sans-serif, Arial;
	font-size: medium;
	color: rgb(129, 128, 128);
	background-color: rgb(0,0,0);
}

/************************************************
*
* CONTAINER
* 
*/
.wwzd-flex-container {
	display: flex;
	flex-wrap: wrap;
	justify-content:center;
}



/************************************************
*
* FLIP-CARD 
* Darstellung als Medaillie, die vorne ein Image und hinten einen Text anzeigt
* 
*/
.wwzd-flip-card {
	background-color: transparent;
	width: 200px;
	height: 200px;
	perspective: 1000px; /* Remove this if you don't want the 3D effect */
	margin-right: 10px;
	margin-left: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
}


/* This container is needed to position the front and back side */
.wwzd-flip-card-inner {
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;
	transition: transform 0.8s;
	transform-style: preserve-3d;
}
  
/* Do an horizontal flip when you move the mouse over the flip box container */
.wwzd-flip-card:hover 
.wwzd-flip-card-inner {
	transform: rotateY(180deg);
}


/* Position the front and back side */
.wwzd-flip-card-front, 
.wwzd-flip-card-back {
	position: absolute;
	width: 200px;
	height: 200px;
	-webkit-backface-visibility: hidden; /* Safari */
	backface-visibility: hidden;
	border-radius: 50%;
}
  
/* Style the front side (fallback if image is missing) */
.wwzd-flip-card-front {
	background-color: #bbb;
	color: black;
}
  
/* Style the back side */
.wwzd-flip-card-back {
	background-color:#000;
	color: white;
	transform: rotateY(180deg);
	border-radius: 200em;
	border-style: dotted;
}