/* Von Oben in den Bildschirm reinklappen */
.rotateUnfoldTop {
	-webkit-transform-origin: 100% 0%;
	transform-origin:         100% 0%;
	-webkit-animation:        rotateUnfoldTop 1.0s both ease;
	animation:                rotateUnfoldTop 1.0s both ease;
}
@-webkit-keyframes rotateUnfoldTop {
	from { opacity: 0; -webkit-transform: rotateX(-90deg); transform: rotateX(-90deg);}
	to   { opacity: 1; -webkit-transform: rotateX(0deg);   transform: rotateX(0deg);  }
}
@keyframes rotateUnfoldTop {
	from { opacity: 0; -webkit-transform: rotateX(-90deg); transform: rotateX(-90deg);}
	to   { opacity: 1; -webkit-transform: rotateX(0deg);   transform: rotateX(0deg);  }
}

/* Von Rechts in den Bildschrim reinklappen */
.animation-rotateUnfoldLeft {
	-webkit-transform-origin: 100% 50%;
	transform-origin: 100% 50%;
	-webkit-animation: rotateUnfoldLeft 1.0s both ease;
	animation: rotateUnfoldLeft 1.0s both ease;
}
@-webkit-keyframes rotateUnfoldLeft {
	from {
		opacity: 0;
		-webkit-transform: perspective(400px) rotateY(-90deg);
		transform:         perspective(400px) rotateY(-90deg);
	}
	to {
		opacity: 1;
		-webkit-transform: perspective(400px) rotateY(0deg);
		transform:         perspective(400px) rotateY(0deg);
	}
}
@keyframes rotateUnfoldLeft {
	from {
		opacity: 0; 
		-webkit-transform: perspective(400px) rotateY(-90deg);
		transform:         perspective(400px) rotateY(-90deg);
	}
	to {
		opacity: 1;
		-webkit-transform: perspective(400px) rotateY(0deg);
		transform:         perspective(400px) rotateY(0deg);
	}
}

/* Von Rechts in den Bildschrim reinklappen */
.animation-rotateUnfoldRight {
	-webkit-transform-origin: 0% 100%;
	transform-origin: 0% 100%;
	-webkit-animation: rotateUnfoldRight 1.0s both ease;
	animation:         rotateUnfoldRight 1.0s both ease;
}
@-webkit-keyframes rotateUnfoldRight {
	from {
		opacity: 0; 
		-webkit-transform: perspective(400px) rotateY(90deg) translateX(-25%);
		transform:         perspective(400px) rotateY(90deg) translateX(-25%);
	}
	to {
		opacity: 1;
		-webkit-transform: perspective(400px) rotateY(0deg) translateX(0%);
		transform:         perspective(400px) rotateY(0deg) translateX(0%);
	}
}
@keyframes rotateUnfoldRight {
	from {
		opacity: 0; 
		-webkit-transform: perspective(400px) rotateY(90deg) translateX(-25%);
		transform:         perspective(400px) rotateY(90deg) translateX(-25%);
	}
	to {
		opacity: 1;
		-webkit-transform: perspective(400px) rotateY(0deg) translateX(0%);
		transform:         perspective(400px) rotateY(0deg) translateX(0%);
	}
}

/* Von Mitte in den Bildschrim rotieren */
.animation-rotateFromMiddle {
	-webkit-transform-origin: 50% 50%;
	transform-origin:         50% 50%;
	-webkit-animation: rotateFromMiddle 2.0s both ease;
	animation:         rotateFromMiddle 2.0s both ease;
}
@-webkit-keyframes rotateFromMiddle {
	from {
		opacity: 0; 
		-webkit-transform: perspective(1000px) rotateY(-90deg);
		transform:         perspective(1000px) rotateY(-90deg);
	}
	to {
		opacity: 1;
		-webkit-transform: perspective(1000px) rotateY(0deg);
		transform:         perspective(1000px) rotateY(0deg);
	}
}
@keyframes rotateFromMiddle {
	from {
		opacity: 0; 
		-webkit-transform: perspective(1000px) rotateY(-90deg);
		transform:         perspective(1000px) rotateY(-90deg);
	}
	to {
		opacity: 1;
		-webkit-transform: perspective(1000px) rotateY(0deg);
		transform:         perspective(1000px) rotateY(0deg);
	}
}

/* Von Rechts oben in den Bildschrim reinklappen */
.animation-rotateFoldRight {
	-webkit-transform-origin: 0% 100%;
	transform-origin: 0% 100%;
	-webkit-animation: rotateFoldRight 1.0s both ease;
	animation:         rotateFoldRight 1.0s both ease;
}
@-webkit-keyframes rotateFoldRight {
	from {
		opacity: 0; 
		-webkit-transform: perspective(1000px) rotateY(-90deg) translateX(-25%);
		transform:         perspective(1000px) rotateY(-90deg) translateX(-25%);
	}
	to {
		opacity: 1;
		-webkit-transform: perspective(1000px) rotateY(0deg) translateX(0%);
		transform:         perspective(1000px) rotateY(0deg) translateX(0%);
	}
}
@keyframes rotateFoldRight {
	from {
		opacity: 0; 
		-webkit-transform: perspective(1000px) rotateY(-90deg) translateX(-25%);
		transform:         perspective(1000px) rotateY(-90deg) translateX(-25%);
	}
	to {
		opacity: 1;
		-webkit-transform: perspective(1000px) rotateY(0deg) translateX(0%);
		transform:         perspective(1000px) rotateY(0deg) translateX(0%);
	}
}

/* Macht eine komplette Drehung mit leichtem 3d Effekt */
.animation-completeFlip {
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	-webkit-animation: completeFlip 1.0s both linear;
	animation:         completeFlip 1.0s both linear;
}
@-webkit-keyframes completeFlip {
	from {
		opacity: 1; 
		-webkit-transform: perspective(2000px) rotateY(0deg);
		transform:         perspective(2000px) rotateY(0deg);
	}
	50% {
		opacity: 0; 
		-webkit-transform: perspective(2000px) rotateY(-90deg);
		transform:         perspective(2000px) rotateY(-90deg);
	}
	51% {
		opacity: 0; 
		-webkit-transform: perspective(2000px) rotateY(90deg);
		transform:         perspective(2000px) rotateY(90deg);
	}
	to {
		opacity: 1;
		-webkit-transform: perspective(2000px) rotateY(0deg);
		transform:         perspective(2000px) rotateY(0deg);
	}
}
@keyframes completeFlip {
	from {
		opacity: 1; 
		-webkit-transform: perspective(2000px) rotateY(0deg);
		transform:         perspective(2000px) rotateY(0deg);
	}
	50% {
		opacity: 0.2; 
		-webkit-transform: perspective(2000px) rotateY(-90deg);
		transform:         perspective(2000px) rotateY(-90deg);
	}
	51% {
		opacity: 0.2; 
		-webkit-transform: perspective(2000px) rotateY(90deg);
		transform:         perspective(2000px) rotateY(90deg);
	}
	to {
		opacity: 1;
		-webkit-transform: perspective(2000px) rotateY(0deg);
		transform:         perspective(2000px) rotateY(0deg);
	}
}

/* Animation rückwerts ausführen */
.animation-reverse {
	animation-direction: reverse;
	-webkit-animation-direction: reverse;
}

div.restrict-animation-overflow-container{
	overflow:hidden; 
	margin-top: -77px; 
	padding-top:75px;
	box-sizing: border-box;
	min-height: 100%;
}