	/* entire container, keeps perspective */
		.flip-container {
			float: left;
			perspective: 1000px;
			transform-style: preserve-3d;
			margin: 10px;
		}
		.front:hover {
			opacity:0.6;
			
		}	

		.flip-container, .front, .back {
			width: 220px;
			height: 220px;
			font-family: Arial;
			font-size:10pt;		
			cursor:pointer;	
		}
		
		.flip-container.flip .flipper .front {
			transform: rotateY(180deg);
		}
		
		.flip-container.flip .flipper .back {
			transform: rotateY(0deg);
		}
		
		
		audio { width: 200px; }

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

		/* hide back of pane during swap */
		.front, .back {
			-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
			-webkit-transition: 0.6s;
			transition: 0.6s;
			-webkit-transform-style: preserve-3d;
			transform-style: preserve-3d;
			position: absolute;
			top: 0;
			left: 0;
		}

		/*  UPDATED! front pane, placed above back */
		.front {
			z-index: 2;
			-webkit-transform: rotateY(0deg);
			transform: rotateY(0deg);
			
			
		}

		/* back, initially hidden pane */
		.back {
			-webkit-transform: rotateY(-180deg);
			transform: rotateY(-180deg);
			color:#000000; 
			
		}

		
		.fronttext {
	display: block;
	width: 212px;
	position: absolute;
	left: 0;
	bottom: -15px;
	background-color: #9BC9E7;
	color: #000000;
	opacity: 0.8;
	text-align: center;
	padding-top: 7px;
	padding-bottom: 7px;
	padding-left: 4px;
	padding-right: 4px;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
		}	
		.front img {
			display:block;
			margin-top:10px;
			margin-left:auto;
			margin-right:auto;
			width:200px;
			height:120px;
		}
		.backtext {
			padding:10px;
			width: 200px;
			height:200px;
			position:absolute;
			text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
		}
		.fragezeichen{
			
			color:#000000;
			font-size:2em;
			text-align: center;
			vertical-align:middle;
			/* text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2); */
			opacity:0.8;
			padding-left:4px;
			padding-top:4px;
		}
		.fragezeichenKreis{
			width:36px;
			height:36px;
			border-radius:18px;
			background-color:#ffffff;
			
		}
		.quiz {
			width:100%;
			
		}
