/* entire container, keeps perspective */
		.flip-container {
			float: left;
			perspective: 1000px;
			transform-style: preserve-3d;
			margin: 10px;
			position:relative;
			z-index: 9;
		}
			

		.flip-container, .front, .back {
			width: 350px;
			height: 350px;
			font-family: Arial;
			font-size:11pt;		
		}
		
		.flip-container.flip .flipper .front {
			transform: rotateY(180deg);
		}
		
		.flip-container.flip .flipper .back {
			transform: rotateY(0deg);
		}
		
		audio { 
			width: 70%;
			position: relative;
			z-index: 99999;
			margin-left: 80px;
		}

		/* 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:#303030; 
		}
		
		.fronttext {
			display:block;
			width: 100%;
			position:absolute;
			left:0;
			bottom:0;
			background-color:rgba(0, 0, 0, 0.5);
			color:#ffffff;
			opacity: 0.5;
			text-align:center;
			padding-top:7px;
			padding-bottom:7px;
			text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
		}	
		.front img {
			display:block;
			margin-top:30px;
			margin-left:auto;
			margin-right:auto;
			/* width:150px;
			height:215px; */
		}
		.backtext {
			padding:10px;
			
			width: 330px;
			height:330px;
			position:absolute;
			z-index:999;
			/* text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4); */
		}
		.backtext audio {
			margin-bottom:17px;
		}
		.fragezeichen{
			color:#ffffff;
			font-size:200pt;
			text-align: center;
			vertical-align:middle;
			text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
		}
		
		body{
			width:100%;
			height:100%;
			background-size: cover;
		}
		
		.switcher, .switcherBack {
			width:70px;
			height:70px;
			position:absolute;
			z-index:9999;
			background: #38ada9;
			cursor: pointer;
			color:#ffffff;
			font-size: 30px;
		}
		
		.switcher:hover, .switcherBack:hover {
			opacity:.7;
		}
		.switcher {
			top:0;
			right:0;
			-webkit-border-radius: 0px 0px 0px 140px;
			-moz-border-radius: 0px 0px 0px 140px;
			border-radius: 0px 0px 0px 140px;
		}
		
		.switcherBack{
			top:0;
			left:0;
			-webkit-border-radius: 0px 0px 140px 0px;
			-moz-border-radius: 0px 0px 140px 0px;
			border-radius: 0px 0px 140px 0px;
		}
		
		.switcher i {
			position: relative;
			top:12px;
			left:30px;
		}
		.switcherBack i{
			position: relative;
			top:12px;
			left:15px;
		}