.panel {
		float: left;
		width: 100%;
		height: auto;
max-widths: 300px;
max-heights: 316px;
		margins: 20px;
		position: relative;
		font-size: .8em;
-webkit-perspective: 600px;
		-moz-perspective: 600px;
		perspective: 600px;
	}

		
	/* -- make sure to declare a default for every property that you want animated -- */
	/* -- general styles, including Y axis rotation -- */
	.panel .front {
		float: none;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 900;
		width: inherit;
		height: inherit;
		border: 1px solid #ccc;
		background: #6b7077;
		text-align: center;


		-webkit-transform: rotateX(0deg) rotateY(0deg);
			 -moz-transform: rotateX(0deg) rotateY(0deg);
						transform: rotateX(0deg) rotateY(0deg);

		-webkit-transform-style: preserve-3d;
			 -moz-transform-style: preserve-3d;
						transform-style: preserve-3d;

		-webkit-backface-visibility: hidden;
			 -moz-backface-visibility: hidden;
						backface-visibility: hidden;

		/* -- transition is the magic sauce for animation -- */
		-webkit-transition: all .4s ease-in-out;
						transition: all .4s ease-in-out;
	}
	.panel.flip .front {
		z-index: 900;
		border-color: #eee;
		background: #333;

		-webkit-transform: rotateY(180deg);
			 -moz-transform: rotateY(180deg);
						transform: rotateY(180deg);
	}

	.panel .back {
		float: none;
		position: relative;
		top: 0;
		left: 0;
		z-index: 800;
		width: inherit;
		height: inherit;
		border: 1px solid #ccc;
		background: #333;
height: auto;
		-webkit-transform: rotateY(-180deg);
			 -moz-transform: rotateY(-179deg); /* setting to 180 causes an unnatural-looking half-flip */
						transform: rotateY(-179deg);

		-webkit-transform-style: preserve-3d;
			 -moz-transform-style: preserve-3d;
						transform-style: preserve-3d;

		-webkit-backface-visibility: hidden;
			 -moz-backface-visibility: hidden;
						backface-visibility: hidden;

		/* -- transition is the magic sauce for animation -- */
		-webkit-transition: all .4s ease-in-out;
						transition: all .4s ease-in-out;
	}

	.panel.flip .back {
		z-index: 1000;
		background: #80868d;

		-webkit-transform: rotateX(0deg) rotateY(0deg);
			 -moz-transform: rotateX(0deg) rotateY(0deg);
						transform: rotateX(0deg) rotateY(0deg);


	}

	/* -- X axis rotation for click panel -- */
	.click .front {
		cursor: pointer;
		-webkit-transform: rotateY(0deg);
			 -moz-transform: rotateY(0deg);
						transform: rotateY(0deg);
	}
	.click.flip .front {
		-webkit-transform: rotateY(180deg);
			 -moz-transform: rotateY(180deg);
						transform: rotateY(180deg);
	}
	.click .back {
		cursor: pointer;
		-webkit-transform: rotateY(-180deg);
			 -moz-transform: rotateY(-180deg);
						transform: rotateY(-180deg);
	}
	.click.flip .back {
		-webkit-transform: rotateY(0deg);
			 -moz-transform: rotateY(0deg);
						transform: rotateY(0deg);
	}

 


	/* -- cosmetics -- */
	.panel .pad {padding: 0 15px; }
	.panel.flip .action {display: none; }
	.block ol li {text-align: left; margin: 0 0 0 28px; }
	.block .action {display: block; padding: 3px; background: #333; text-align: right; font-size: .8em; opacity: 0; positions: absolute; cursor: pointer; -webkit-transition: opacity .2s linear; }
	.block:hover .action {opacity: .7; }
	.circle div h2 { text-align: left;  color: #ffffff; font-size: 1.0rem !important; line-height: 1.5rem !important;}
        .circle div p.flip-sub {text-align: left; color: #ffffff; font-size: 0.8rem !important; line-height: 1.1rem !important; margin-top: 10px; margin-bottom: 0.5rem !important;}
.circle div p.flip-link {text-align: left; color: #ffffff; font-weight: 600; font-size: 0.8rem !important; line-height: 1.1rem !important; }

#innerplatzhalter {position: absolute; top:0; left:0; margin: 10%;}