body {
	z-index: -1;
}
i {
	color: #0AB2EA;
}
#invitation {
	height: 520px;
	top: 10px;
	display: block;
	position: inherit;
	-webkit-perspective: 3000px;
	-moz-perspective: 3000px;
	-o-perspective: 3000px;
	perspective: 3000px;
	text-align: center;
}
.greyBg {
	background-color: #F0F0F0;
	color: #5E5E5E;
	padding: 10px;
	line-height: 1.2em;
}
.whiteBg {
	background-color: white;
	color: #5E5E5E;
	padding: 10px;
	line-height: 1.2em;
	border: #F0F0F0 solid 3px;
}
.whiteBg hr {
	width: 90%;
	border-width: 2px;
	border-color: #F0F0F0;
	margin-bottom: 10px;
}
.greyBg hr {
	width: 90%;
	border-width: 2px;
	border-color: white;
	margin-bottom: 10px;
}
.vertical-text {
	position: relative;
	font-size: 1.5em;
	color: #0AB2EA;
	padding-top: 15px;

	-webkit-transform: rotate(270deg);
	-webkit-transform-origin: 0px 0px 0px;

	-ms-transform: rotate(270deg);
	-ms-transform-origin: 0px 0px 0px;

	transform: rotate(270deg);
	transform-origin: 0px 0px 0px;

	width: 490px;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
}
.card {
	width: 100%;
	height: 100%;
	position: absolute;

	-webkit-transform-style: preserve-3d;
	-webkit-transition: -webkit-transform 1s;
	-webkit-transform-origin: 0px 0px 0px;

	-ms-transform-style: preserve-3d;
	-ms-transition: transform 1s;
	-ms-transform-origin: 0px 0px 0px;

	transform-style: preserve-3d;
	transition: transform 1s;
	transform-origin: 0px 0px 0px;

	font-size: 1.0em;
	font-weight: normal;
	line-height: 1.0em;
}
.card h3 {
	margin-top: 15px;
	font-size: 20px;
}
.card > div {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	cursor: pointer;
}
.card .back2 {
	-webkit-transform: rotateY(-180deg);
	-webkit-transform-origin: 0px 0px 0px;

	-ms-transform: rotateY(-180deg);
	-ms-transform-origin: 0px 0px 0px;

	transform: rotateY(-180deg);
	transform-origin: 0px 0px 0px;
}
.card.flipping {
	-webkit-transform: rotateY(-180deg);
	-ms-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
}
.card .front2 div:first-of-type {
	height: 100%;
}
.back2, .front2 {
	-webkit-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
	border-radius: 25px;
}
.flipped .back2 {
	-webkit-backface-visibility: visible;
	-ms-backface-visibility: visible;
	backface-visibility: visible;
}

/* Seite 1 */
#p1 {
	width: 420px;
}
#p1, #p1 .front2 {
	z-index: 7;
}
#p1.flipped, #p1.flipped .back2 {
	z-index: 1;
}
#p1.flipped .front2, #p1 .back2 {
	z-index: 0;
}
#p1 .back2 {
	left: 420px;
}

/* Seite 2 */
#p2 {
	width: 420px;
}
#p2, #p2 .front2 {
	z-index: 6;
}
#p2.flipped .front2 {
	display: none;
}
#p2.flipped, #p2.flipped .back2 {
	z-index: 2;
}
#p2.flipped .front2, #p2 .back2 {
	z-index: 0;
}
#p2 .back2 {
	left: 420px;
}
#p2 .front2 {
	width: 460px;
}
#p2 .vertical-text {
	left: 405px;
	background-color: white;
}
#p2 .front2 img {
	margin-top: 26%;
}

/* Seite 3 */
#p3 {
	width: 420px;
}
#p3, #p3 .front2 {
	z-index: 5;
}
#p3.flipped .front2 {
	display: none;
}
#p3.flipped, #p3.flipped .back2 {
	z-index: 3;
}
#p3.flipped .front2, #p3 .back2 {
	z-index: 0;
}
#p3 .back2 {
	left: 420px;
}
#p3 .front2 {
	width: 495px;
}
#p3 .vertical-text {
	left: 445px;
	background-color: #F0F0F0;
}
#p3 .front2 img {
	margin-top: 25%;
}

/* Seite 4 */
#p4 {
	width: 420px;
}
#p4, #p4 .front2 {
	z-index: 4;
}
#p4.flipped .front2 {
	display: none;
}
#p4.flipped, #p4.flipped .back2 {
	z-index: 4;
}
#p4.flipped .front2, #p4 .back2 {
	z-index: 0;
}
#p4 .back2 {
	left: 420px;
}
#p4 .front2 {
	width: 535px;
}
#p4 .vertical-text {
	left: 480px;
	background-color: white;
}
#p4 .front2 img {
	margin-top: 15%;
}

/* Seite 5 */
#p5 {
	width: 420px;
}
#p5, #p5 .front2 {
	z-index: 3;
}
#p5.flipped .front2 {
	display: none;
}
#p5.flipped, #p5.flipped .back2 {
	z-index: 5;
}
#p5.flipped .front2, #p5 .back2 {
	z-index: 0;
}
#p5 .back2 {
	left: 420px;
}
#p5 .front2 {
	width: 570px;
}
#p5 .vertical-text {
	left: 520px;
	background-color: #F0F0F0;
}
#p5 .front2 img {
	margin-top: 14%;
}

/* Seite 6 */
#p6 {
	width: 420px;
}
#p6, #p6 .front2 {
	z-index: 2;
}
#p6.flipped .front2 {
	display: none;
}
#p6.flipped, #p6.flipped .back2 {
	z-index: 6;
}
#p6.flipped .front2, #p6 .back2 {
	z-index: 0;
}
#p6 .back2 {
	left: 420px;
}
#p6 .front2 {
	width: 610px;
}
#p6 .vertical-text {
	left: 555px;
	background-color: white;
}
#p6 .front2 img {
	margin-top: 13%;
}

/* Seite 7 */
#p7 {
	width: 420px;
}
#p7, #p7 .front2 {
	z-index: 1;
}
#p7.flipped .front2 {
	display: none;
}
#p7.flipped, #p7.flipped .back2 {
	z-index: 7;
}
#p7.flipped .front2, #p7 .back2 {
	z-index: 0;
}
#p7 .back2 {
	left: 420px;
}
#p7 .front2 {
	width: 645px;
}
#p7 .vertical-text {
	left: 595px;
	background-color: #F0F0F0;
}
#p7 .front2 img {
	margin-top: 10%;
}