/***************************************
**** Animation Info Pfeile
***************************************/
@keyframes arrow_left {
	0%   { margin-left:0px; opacity:1.0; }
	60%  { margin-left:6px; opacity:0.33; }
}
#arrow_left {
	animation-name: arrow_left;
	animation-duration: 1s;
	animation-timing-function: ease;
	animation-iteration-count: infinite;
}
div.arrow_left {
	float:left;
	margin-left:5px;
	font-size:1.125rem;
	padding-top:0.5rem;
	color:#ee6600;
}

@keyframes arrow_right {
	0%   { margin-right:0px; opacity:1.0; }
	60%  { margin-right:6px; opacity:0.33; }
}
#arrow_right {
	animation-name: arrow_right;
	animation-duration: 1s;
	animation-timing-function: ease;
	animation-iteration-count: infinite;
}
div.arrow_right {
	float:right;
	margin-right:5px;
	font-size:1.125rem;
	padding-top:0.5rem;
	color:#ee6600;
}


/***************************************
**** Animation Richtige/Falsche Antwort
***************************************/
@keyframes wrong_ans {
	0%   { left: 0px; }
	25%  { left: 6px; }
	50%  { left: -4px; }
	100% { left: 0px; }
}
p.tWrongAns {
	position: relative;
	transform-origin: 0% 50%;
	animation-name: wrong_ans;
	animation-duration: 0.9s;
	animation-delay: 0.1s;
	animation-timing-function: ease;
	animation-iteration-count: 1;
}

@keyframes right_ans {
	0%   { top: 0px; }
	25%  { top: -4px; }
	50%  { top: 6px; }
	100% { top: 0px; }
}
p.tRightAns {
	position: relative;
	transform-origin: 0% 50%;
	animation-name: right_ans;
	animation-duration: 0.9s;
	animation-delay: 0.1s;
	animation-timing-function: ease;
	animation-iteration-count: 1;
}

/* Animation "Weiter" Button */
@keyframes continue {
	0%   { left: -25px; opacity: 0.0; }
	60%  { left: -25px; opacity: 0.0; }
	100% { left: 0px; opacity: 1.0; }
}
div.tContinue {
	position: relative;
	left: 0px;
	opacity: 1.0;
	margin-left: 40px;
	margin-top: 15px;
	animation-name: continue;
	animation-duration: 1.33s;
	animation-delay: 0.0s;
	animation-timing-function: ease;
	animation-iteration-count: 1;
}

@media only screen and (max-width: 760px) {
	@keyframes wrong_ans {
		0%   { left: 0px; }
		25%  { left: 12px; }
		50%  { left: -18px; }
		100% { left: 0px; }
	}
	@keyframes right_ans {
		0%   { top: 0px; }
		25%  { top: -8px; }
		50%  { top: 12px; }
		100% { top: 0px; }
	}

	div.tContinue { margin-top: 30px; }
}

/***************************************
***** Fragenauswertung
***************************************/
.qe_outer {
	transition:height 0.5s ease-in-out, opacity 0.5s linear;
	overflow:hidden;
	opacity:0.0;
}

.qe_container {
	width:100%;
	display:flex;
	flex-direction:row;
}
.qe_container_shift {
	position:relative;
	overflow:hidden;
}
.qe_container_elements {
	position:relative; 
	left:0%;
	transition:left 0.5s ease-in-out;
}
.qe_element {
	float:left;
	padding:0.5em 0.25em 0.5em 0.25em;
}

.qe_indicator {
	text-align:center;
	padding-bottom:0.6em;
	width:auto;
	margin:0 auto 0.5em auto;
}
.qe_indicator_dot {
	display:inline-block;
	width:0.5em;
	height:0.5em;
	background-color:#ddd;
	border-radius:0.25em;
	margin:0.2em 0.1em;
	transition:background-color 0.5s ease-in-out;
}

/***************************************
***** Feuerwerk
***************************************/
#fwRamp { font-size:16px; }
.fw-sparkle {
	position:absolute;
	left:0px;
	top:0px;
	display:none;
}
.fw-xs { width:3px; height:3px; border-radius:2px; }
.fw-s  { width:4px; height:4px; border-radius:2px; }
.fw-m  { width:5px;	height:5px;	border-radius:3px; }
.fw-l  { width:6px;	height:6px;	border-radius:3px; }
.fw-xl { width:7px;	height:7px;	border-radius:4px; }
.fw-col1 { background-color:#4c4; }
.fw-col2 { background-color:#c44; }
.fw-col3 { background-color:#44c; }
.fw-col4 { background-color:#cc4; }
.fw-col5 { background-color:#4cc; }
@media only screen and (max-width: 760px) {
	/* Feuerwerk: Mobile scaling */
	#fwRamp { font-size:20px; }
	.fw-xs { width:5px;	height:5px; border-radius:0px; }
	.fw-s  { width:6px;	height:6px; border-radius:0px; }
	.fw-m  { width:7px;	height:7px; border-radius:0px; }
	.fw-l  { width:8px;	height:8px; border-radius:0px; }
	.fw-xl { width:9px;	height:9px; border-radius:0px; }
}

/***************************************
**** Zahnräder
***************************************/
#body_cogs {
	width: 230px;
	height: 200px;
	position: relative;
	margin: 0px auto;
	overflow: hidden;
	z-index: 10000;
/*	border-radius:10%; */
/*	border: solid 10px darkslategray;*/
/*	box-shadow: 0 0 30px darkslategray; */
	animation: body_cog_fade 10s infinite linear;
}

.cog_spoke {
	background-color: #ececf8;
	position: absolute;
	height: 102px;
	width:18px;
	margin-left: -9px;
	margin-top: -11px;
	left: 50%;
	border-radius: 5px;
	z-index: 10;
}

.cog_spoke + .cog_spoke {
	transform: rotateZ(45deg);
}

.cog_spoke + .cog_spoke + .cog_spoke {
	transform: rotateZ(-45deg);
}

.cog_spoke + .cog_spoke + .cog_spoke + .cog_spoke {
	transform: rotateZ(90deg);
}

.cog {
	position: absolute;
	background-color: #ececf8;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	z-index: 10;
	animation: spin_left 8s infinite linear;
	margin-top: 20px;
	margin-left: 20px;
}
.cog + .cog {
	animation-delay: .19s;
	animation: spin_right 8s infinite linear;
	margin-top: 110px;
	margin-left: 36px;
}
.cog + .cog + .cog {
	animation: spin_left 8s infinite linear;
	margin-top: 91px;
	margin-left: 126px;
}

.cog_hole {
	position: absolute;
	width: 20px;
	height: 20px;
	margin-left: 30px;
	margin-top: 30px;
	background-color: white;
	border-radius: 50%;
	border: 1px solid #e0e0ec;
	z-index: 3000;
}

@keyframes spin_right {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
@keyframes spin_left {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(-360deg); }
}
@keyframes body_cog_fade {
	0%   { opacity: 0.0; }
	40%  { opacity: 0.0; }
	55%  { opacity: 1.0; }
	85%  { opacity: 1.0; }	
	100% { opacity: 0.0; }
}


/***************************************
**** Animation Review Zitate Wechsel
***************************************/
.promo_review1,
.promo_review2,
.promo_review3 {
	position: absolute;
	display: block;
	left: 0px;
	top: 0px;
	width: 160px;
	height: 200px;
	padding: 5px;
	color: #777;
	font-size: 13px;
	line-height: 17px;
	text-align: center;
	font-style: italic;
	font-weight: normal;
	overflow: hidden;
	opacity: 0.0;
}
.promo_review1 {
	animation: p1 28s infinite linear;
}
.promo_review2 {
	animation: p2 28s infinite linear;
}
.promo_review3 {
	animation: p3 28s infinite linear;
}
@keyframes p1 {
	0%   { opacity: 0.0; }
	5%   { opacity: 0.0; }
	8%   { opacity: 1.0; }
	33%  { opacity: 1.0; }
	36%  { opacity: 0.0; }
	100% { opacity: 0.0; }
}
@keyframes p2 {
	0%   { opacity: 0.0; }
	37%  { opacity: 0.0; }
	40%  { opacity: 1.0; }
	65%  { opacity: 1.0; }
	68%  { opacity: 0.0; }
	100% { opacity: 0.0; }
}
@keyframes p3 {
	0%   { opacity: 0.0; }
	69%  { opacity: 0.0; }
	72%  { opacity: 1.0; }
	97%  { opacity: 1.0; }
	100% { opacity: 0.0; }
}


/***************************************
**** Allgemeine Animationen
***************************************/
/* FadeIn z.B. für BuyNow */
.fadeIn {
	animation-delay: 150ms;
	animation: fadeInEffect 600ms ease-in;
}
@keyframes fadeInEffect {
    0%   { opacity: 0.0; }
    100% { opacity: 1.0; }
}

.fadeSlideInTop, .fadeSlideInBottom, .fadeSlideInRight, .fadeSlideInLeft {
	position:relative;
	animation-delay: 150ms;
}
.fadeSlideInScaleLeft {
	position:relative;
	animation-delay: 200ms;
}

.fadeSlideInTop { animation: fadeSlideInTopEffect 600ms ease-out; }
@keyframes fadeSlideInTopEffect {
    0%   { opacity: 0.0; transform: translateY(-2rem); }
    100% { opacity: 1.0; transform: translateY(0); }
}

.fadeSlideInBottom { animation: fadeSlideInBottomEffect 600ms ease-out; }
@keyframes fadeSlideInBottomEffect {
    0%   { opacity: 0.0; transform: translateY(2rem); }
    100% { opacity: 1.0; transform: translateY(0); }
}

.fadeSlideInRight {	animation: fadeSlideInRightEffect 600ms ease-out; }
@keyframes fadeSlideInRightEffect {
    0%   { opacity: 0.0; transform: translateX(4rem); }
    100% { opacity: 1.0; transform: translateX(0); }
}

.fadeSlideInLeft { animation: fadeSlideInLeftEffect 600ms ease-out; }
@keyframes fadeSlideInLeftEffect {
    0%   { opacity: 0.0; transform: translateX(-4rem); }
    100% { opacity: 1.0; transform: translateX(0); }
}

.fadeSlideInScaleLeft { animation: fadeSlideInScaleLeftEffect 500ms ease-out; }
@keyframes fadeSlideInScaleLeftEffect {
	0%   { opacity: 0.0; transform: translateX(-8rem) scaleX(0.5); }
	100% { opacity: 1.0; transform: translateX(0) scaleX(1.0); }
}

.fadeSlideInX {
	position:relative;
	animation: fadeSlideInEffect1 2s ease-out;
}
.fadeSlideInX + .fadeSlideInX {
	position:relative;
	animation: fadeSlideInEffect2 2s ease-out;
}
.fadeSlideInX + .fadeSlideInX + .fadeSlideInX {
	position:relative;
	animation: fadeSlideInEffect3 2s ease-out;
}
@keyframes fadeSlideInEffect1 {
    0%   { opacity: 0.0; top:30px; display:none; }
    60%  { opacity: 0.0; top:30px; display:block; }
    80%  { opacity: 1.0; top:0px; }
    100% { opacity: 1.0; top:0px; }
}
@keyframes fadeSlideInEffect2 {
    0%   { opacity: 0.0; top:30px; display:none; }
    70%  { opacity: 0.0; top:30px; display:block; }
    90%  { opacity: 1.0; top:0px; }
    100% { opacity: 1.0; top:0px; }
}
@keyframes fadeSlideInEffect3 {
    0%   { opacity: 0.0; top:30px; display:none; }
    80%  { opacity: 0.0; top:30px; display:block; }
    100% { opacity: 1.0; top:0px; }
}


@keyframes fadeInQuest {
	0%   { opacity: 0.0; }
	25%  { opacity: 0.0; }
	100% { opacity: 1.0; }
}