/* ------------------------------------------------------------------------ */
/* 7.0 - Animations                                                        */
/* ------------------------------------------------------------------------ */

.animations-debug-window {
	overflow-y: auto;
	font-size: 0.5em;
	z-index: 5000;
	position: fixed;
	top: 0;
	right: 0;
	width: 20em;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.5);
	color: #fff;
	padding: 1em;
}

.animations-debug-window hr {
	margin: 0.5em 0;
}

.animations-debug-window .small {
	font-size: 0.8em;
}

.fob-animation {
	
}

/* AnimationConfig: wobble=Effect Wobble */
.fob-animation.wobble {
	-webkit-transition-timing-function: cubic-bezier(.33, .74, .49, 1.83) !important;
	transition-timing-function: cubic-bezier(.33, .74, .49, 1.83) !important;
}

/* AnimationConfig: slow=Duration Slow */
.fob-animation.slow {
	-webkit-transition-duration: 3s !important; /* Safari */
	transition-duration: 3s !important;
}

/* AnimationConfig: later=Execution later */
.fob-animation.later {
	-webkit-transition-delay: 1s !important; /* Safari */
	transition-delay: 1s !important;
}

/* Animation: slideInVertical=Vertical Slide */
.fob-animation.slideInVertical {
	-webkit-transition: opacity 1s ease 0s, top 1s ease 0s;
	transition: opacity 1s ease 0s, top 1s ease 0s;
	opacity: 1;
	position: relative;
	top: 0;
}

.fob-animation.slideInVertical-active {
	opacity: 0;
	top: 3em;
	-webkit-transition: no !important;
	transition: no !important;
}

.fob-animation.slideInVertical-active-up {
	opacity: 0;
	top: 3em;
}

.fob-animation.slideInVertical-active-down {
	opacity: 0;
	top: -3em;
}

/* Vertical Slide Wobble */
/* Nur noch aus historischen Gründen existent, soll nicht mehr wählbar sein */
.content-section.slideInVerticalWobble,
.content .slideInVerticalWobble {
	-webkit-transition: opacity 1s ease 0s, top 1s cubic-bezier(.33, .74, .49, 1.83) 0s;
	transition: opacity 1s ease 0s, top 1s cubic-bezier(.33, .74, .49, 1.83) 0s;
	opacity: 0.99;
	position: relative;
	top: 0;
}

.content-section.slideInVerticalWobble-active,
.content .slideInVerticalWobble-active {
	opacity: 0;
	top: 3em;
	-webkit-transition: no !important;
	transition: no !important;
}

.content-section.slideInVerticalWobble-active-up,
.content .slideInVerticalWobble-active-up {
	opacity: 0;
	top: 3em;
}

.content-section.slideInVerticalWobble-active-down,
.content .slideInVerticalWobble-active-down {
	opacity: 0;
	top: -3em;
}

/* Horizontal Slide */
/* Animation: slideInHorizontalFromLeft=Horizontal Slide From Left */
.fob-animation.slideInHorizontal,
.fob-animation.slideInHorizontalFromLeft {
	-webkit-transition: opacity 1s ease 0s, left 1s ease 0s;
	transition: opacity 1s ease 0s, left 1s ease 0s;
	opacity: 0.99;
	position: relative;
	left: 0;
}

.fob-animation.slideInHorizontal-active,
.fob-animation.slideInHorizontalFromLeft-active {
	opacity: 0;
	left: -100vw;
	-webkit-transition: no !important;
	transition: no !important;
}

.fob-animation.slideInHorizontal-active-up,
.fob-animation.slideInHorizontalFromLeft-active-up {
	opacity: 0;
	left: -100vw;
}

.fob-animation.slideInHorizontal-active-down,
.fob-animation.slideInHorizontalFromLeft-active-down {
	opacity: 0;
	left: -100vw;
}

/* Animation: slideInHorizontalFromRight=Horizontal Slide From Right */
.fob-animation.slideInHorizontalFromRight {
	-webkit-transition: opacity 1s ease 0s, right 1s ease 0s;
	transition: opacity 1s ease 0s, right 1s ease 0s;
	opacity: 0.99;
	position: relative;
	right: 0;
}

.fob-animation.slideInHorizontalFromRight-active {
	opacity: 0;
	right: -100vw;
	-webkit-transition: no !important;
	transition: no !important;
}

.fob-animation.slideInHorizontalFromRight-active-up {
	opacity: 0;
	right: -100vw;
}

.fob-animation.slideInHorizontalFromRight-active-down {
	opacity: 0;
	right: -100vw;
}

/* Animation: fade-in=Fade In */
/* Aus historischen Gründen gibt es hier 2 Klassen, fade is deprecated */
.fob-animation.fade-in,
.fob-animation.fade
{
	-webkit-transition: opacity 1s ease 0s;
	transition: opacity 1s ease 0s;
	opacity: 0.99;
}

.fob-animation.fade-in-active,
.fob-animation.fade-active
{
	opacity: 0;
	-webkit-transition: no !important;
	transition: no !important;
}

.fob-animation.fade-in-active-up,
.fob-animation.fade-active-up {
	opacity: 0;
}

.fob-animation.fade-in-active-down,
.fob-animation.fade-active-down {
	opacity: 0;
}

/* Animation: colorSwitch=Color Switch */
.fob-animation.colorSwitch {
	-webkit-transition: background-color 1s ease 0s, color 1s ease 0s;
	transition: background-color 1s ease 0s, background-image 1s ease 0s, color 1s ease 0s;
}

.fob-animation.colorSwitch-active {
	background-color: #000;
	color: #fff;
	-webkit-transition: no !important;
	transition: no !important;
}

.fob-animation.colorSwitch-active-up {
	background-color: #000;
	color: #fff;
}

.fob-animation.colorSwitch-active-down {
	background-color: #000;
	color: #fff;
	background-image: none;
}

/* Animation: transformX=Transform X */
.fob-animation.transformX {
	-webkit-transition: transform 1s ease 0s;
	transition: transform 1s ease 0s;
	-ms-transform: scale(1, 1); /* IE 9 */
	-webkit-transform: scale(1, 1); /* Safari */
	transform: scale(1, 1);
}

.fob-animation.transformX-active {
	-ms-transform: scale(0, 1); /* IE 9 */
	-webkit-transform: scale(0, 1); /* Safari */
	transform: scale(0, 1);
}

.fob-animation.transformX-active-up {
	-ms-transform: scale(0, 1); /* IE 9 */
	-webkit-transform: scale(0, 1); /* Safari */
	transform: scale(0, 1);
}

.fob-animation.transformX-active-down {
	-ms-transform: scale(0, 1); /* IE 9 */
	-webkit-transform: scale(0, 1); /* Safari */
	transform: scale(0, 1);
}