/* ============================================================================== 
   File: animate.css
	- Stylesheet for TipTool CSS-animations
	- created: 19.SEP.2018
	- amended: 01.JAN.2019, DH: added toc_in/toc_out
	- Author: Daniel Hugentobler
   ============================================================================== 
	- body:				fade-in-full
	- cookies-info:		fade-out-full
	- help & calendar:	swirl-in/bounce_out (from left)
	- toc:				move_in/bounce_out (from left)
	- news & msg:		slide-in (from left – to prevent horiz.-scrollbar!)
	- podium:			trampolin 1x (staggered groups => wave)
	- chkBox:			slider with rotating label
*/

/* fade in whole page */
body {
	-webkit-animation: fade_in_full 3s ease-in;
	-moz-animation: fade_in_full 3s ease-in;
	-ms-animation: fade_in_full 3s ease-in;
	-o-animation: fade_in_full 3s ease-in;
	animation: fade_in_full 3s ease-in;
}
/*  MS IEx has trouble with CSS... as usual 
	body-fade-in does NOT affect header/footer/cookies => handle them here */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	header,
	footer,
	.cookies {
		animation: fade_in_full 3s ease-in;
	}
}
/*
@supports (-ms-accelerator:true) {
	header,
	footer,
	.cookies,
	#text_main {
		animation: fade_in_full 3s ease-in;
	}
}
*/

/* for initial page load (pseudo-hidden) */
.overlay_hide {
	position: fixed;
	top: 6.4rem;
	left:  -50rem;
}
.help_in,
.calendar_in,
.help_out,
.calendar_out {
	position: fixed;
}
.help_in,
.calendar_in {
	top: 6.4rem;
	-webkit-animation: swirl_in_left 0.5s forwards;
	-moz-animation: swirl_in_left 0.5s forwards;
	-ms-animation: swirl_in_left 0.5s forwards;
	-o-animation: swirl_in_left 0.5s forwards;
	animation: swirl_in_left 0.5s forwards;

}
.toc_in { /* no swirl for toc! (due to possibly long list of entries) */
	top: 6.4rem;
	-webkit-animation: move_in_left 0.5s forwards;
	-moz-animation: move_in_left 0.5s forwards;
	-ms-animation: move_in_left 0.5s forwards;
	-o-animation: move_in_left 0.5s forwards;
	animation: move_in_left 0.5s forwards;
}
.toc_out,
.help_out,
.calendar_out {
	top: 6.4rem;
	-webkit-animation: bounce_out_left 0.5s forwards;
	-moz-animation: bounce_out_left 0.5s forwards;
	-ms-animation: bounce_out_left 0.5s forwards;
	-o-animation: bounce_out_left 0.5s forwards;
	animation: bounce_out_left 0.5s forwards;
}

.cookies_out {
	z-index: 0;
	/* z-index to change slowly, else there would be a difference between cookies laid over header/main */
	-webkit-transition: z-index ease 8s;
	-moz-transition: z-index ease 8s;
	-ms-transition: z-index ease 8s;
	-o-transition: z-index ease 8s;
	transition: z-index ease 8s;
	position: fixed;
	top: 8rem;
	max-width: 100%;
	-webkit-animation: fade_out_full 4s forwards;
	-moz-animation: fade_out_full 4s forwards;
	-ms-animation: fade_out_full 4s forwards;
	-o-animation: fade_out_full 4s forwards;
	animation: fade_out_full 4s forwards;
}
/* explanation = customized tiptext */
.explain:hover .explanation,
.explain:hover .explanation_narrow {
	/* fade in, then fade out again */
	-webkit-animation: fade_in_full 1s ease-in forwards, fade_out_full 1s 5s ease-in forwards;
	-moz-animation: fade_in_full 1s ease-in forwards, fade_out_full 1s 5s ease-in forwards;
	-ms-animation: fade_in_full 1s ease-in forwards, fade_out_full 1s 5s ease-in forwards;
	-o-animation: fade_in_full 1s ease-in forwards, fade_out_full 1s 5s ease-in forwards;
	animation: fade_in_full 1s ease-in forwards, fade_out_full 1s 5s ease-in forwards;
}

/* define waves for different delays & durations */
.fame_wave1 .flag,
.podium_wave1 .td_podium1 .flag {
	-webkit-animation: pirouette 7.5s 0s 1 ease;
	-moz-animation: pirouette 7.5s 0s 1 ease;
	-ms-animation: pirouette 7.5s 0s 1 ease;
	-o-animation: pirouette 7.5s 0s 1 ease;
	animation: pirouette 7.5s 0s 1 ease;
/*	-webkit-animation: trampolin 3.5s 0s 1 ease-out;
	-moz-animation: trampolin 3.5s 0s 1 ease-out;
	-ms-animation: trampolin 3.5s 0s 1 ease-out;
	-o-animation: trampolin 3.5s 0s 1 ease-out;
	animation: trampolin 3.5s 0s 1 ease-out;*/
}
.fame_wave2 .flag,
.podium_wave2 .td_podium2 .flag {
	-webkit-animation: pirouette 7.6s -0.2s 1 ease;
	-moz-animation: pirouette 7.6s -0.2s 1 ease;
	-ms-animation: pirouette 7.6s -0.2s 1 ease;
	-o-animation: pirouette 7.6s -0.2s 1 ease;
	animation: pirouette 7.6s -0.2s 1 ease;
/*	-webkit-animation: trampolin 3.6s -0.4s 1 ease-out;
	-moz-animation: trampolin 3.6s -0.4s 1 ease-out;
	-ms-animation: trampolin 3.6s -0.4s 1 ease-out;
	-o-animation: trampolin 3.6s -0.4s 1 ease-out;
	animation: trampolin 3.6s -0.4s 1 ease-out;*/
}
.fame_wave3 .flag,
.podium_wave3 .td_podium3 .flag {
	-webkit-animation: pirouette 7.7s -0.4s 1 ease;
	-moz-animation: pirouette 7.7s -0.4s 1 ease;
	-ms-animation: pirouette 7.7s -0.4s 1 ease;
	-o-animation: pirouette 7.7s -0.4s 1 ease;
	animation: pirouette 7.7s -0.4s 1 ease;
/*	-webkit-animation: trampolin 3.7s -0.8s 1 ease-out;
	-moz-animation: trampolin 3.7s -0.8s 1 ease-out;
	-ms-animation: trampolin 3.7s -0.8s 1 ease-out;
	-o-animation: trampolin 3.7s -0.8s 1 ease-out;
	animation: trampolin 3.7s -0.8s 1 ease-out;*/
}
.fame_wave4 .flag, 
.podium_wave1 .td_podium2 .flag {
	-webkit-animation: pirouette 7.8s -0.6s 1 ease;
	-moz-animation: pirouette 7.8s -0.6s 1 ease;
	-ms-animation: pirouette 7.8s -0.6s 1 ease;
	-o-animation: pirouette 7.8s -0.6s 1 ease;
	animation: pirouette 7.8s -0.6s 1 ease;
/*	-webkit-animation: trampolin 3.8s -1.2s 1 ease-out;
	-moz-animation: trampolin 3.8s -1.2s 1 ease-out;
	-ms-animation: trampolin 3.8s -1.2s 1 ease-out;
	-o-animation: trampolin 3.8s -1.2s 1 ease-out;
	animation: trampolin 3.8s -1.2s 1 ease-out;*/
}
.fame_wave5 .flag,
.podium_wave2 .td_podium3 .flag {
	-webkit-animation: pirouette 7.9s -0.8s 1 ease;
	-moz-animation: pirouette 7.9s -0.8s 1 ease;
	-ms-animation: pirouette 7.9s -0.8s 1 ease;
	-o-animation: pirouette 7.9s -0.8s 1 ease;
	animation: pirouette 7.9s -0.8s 1 ease;
/*	-webkit-animation: trampolin 3.9s -1.5s 1 ease-out;
	-moz-animation: trampolin 3.9s -1.5s 1 ease-out;
	-ms-animation: trampolin 3.9s -1.5s 1 ease-out;
	-o-animation: trampolin 3.9s -1.5s 1 ease-out;
	animation: trampolin 3.9s -1.5s 1 ease-out;*/
}
.fame_wave6 .flag,
.podium_wave3 .td_podium1 .flag {
	-webkit-animation: pirouette 8s -1s 1 ease;
	-moz-animation: pirouette 8s -1s 1 ease;
	-ms-animation: pirouette 8s -1s 1 ease;
	-o-animation: pirouette 8s -1s 1 ease;
	animation: pirouette 8s -1s 1 ease;
/*	-webkit-animation: trampolin 4s -1.8s 1 ease-out;
	-moz-animation: trampolin 4s -1.8s 1 ease-out;
	-ms-animation: trampolin 4s -1.8s 1 ease-out;
	-o-animation: trampolin 4s -1.8s 1 ease-out;
	animation: trampolin 4s -1.8s 1 ease-out;*/
}
.fame_wave7 .flag,
.podium_wave3 .td_podium2 .flag {
	-webkit-animation: pirouette 8.1s -1.2s 1 ease;
	-moz-animation: pirouette 8.1s -1.2s 1 ease;
	-ms-animation: pirouette 8.1s -1.2s 1 ease;
	-o-animation: pirouette 8.1s -1.2s 1 ease;
	animation: pirouette 8.1s -1.2s 1 ease;
/*	-webkit-animation: trampolin 4.1s -2.1s 1 ease-out;
	-moz-animation: trampolin 4.1s -2.1s 1 ease-out;
	-ms-animation: trampolin 4.1s -2.1s 1 ease-out;
	-o-animation: trampolin 4.1s -2.1s 1 ease-out;
	animation: trampolin 4.1s -2.1s 1 ease-out;*/
}
.fame_wave8 .flag,
.podium_wave2 .td_podium1 .flag {
	-webkit-animation: pirouette 8.2s -1.4s 1 ease;
	-moz-animation: pirouette 8.2s -1.4s 1 ease;
	-ms-animation: pirouette 8.2s -1.4s 1 ease;
	-o-animation: pirouette 8.2s -1.4s 1 ease;
	animation: pirouette 8.2s -1.4s 1 ease;
/*	-webkit-animation: trampolin 4.2s -2.4s 1 ease-out;
	-moz-animation: trampolin 4.2s -2.4s 1 ease-out;
	-ms-animation: trampolin 4.2s -2.4s 1 ease-out;
	-o-animation: trampolin 4.2s -2.4s 1 ease-out;
	animation: trampolin 4.2s -2.4s 1 ease-out;*/
}
.fame_wave9 .flag,
.podium_wave1 .td_podium3 .flag {
	-webkit-animation: pirouette 8.3s -1.6s 1 ease;
	-moz-animation: pirouette 8.3s -1.6s 1 ease;
	-ms-animation: pirouette 8.3s -1.6s 1 ease;
	-o-animation: pirouette 8.3s -1.6s 1 ease;
	animation: pirouette 8.3s -1.6s 1 ease;
/*	-webkit-animation: trampolin 4.3s -2.7s 1 ease-out;
	-moz-animation: trampolin 4.3s -2.7s 1 ease-out;
	-ms-animation: trampolin 4.3s -2.7s 1 ease-out;
	-o-animation: trampolin 4.3s -2.7s 1 ease-out;
	animation: trampolin 4.3s -2.7s 1 ease-out;*/
}

/* slide-in news or important messages to catch the user's eye */
.newshdr,
.news {
	-webkit-animation: slide_in 2s 1s backwards;
	-moz-animation: slide_in 2s 1s backwards;
	-ms-animation: slide_in 2s 1s backwards;
	-o-animation: slide_in 2s 1s backwards;
	animation: slide_in 2s 1s backwards;
	max-width: 98%;
	width: 96%;
}
.newshdr {
/*	white-space: nowrap;*/	/* prevent weird line-break during animation */
}

/* PLANNED YET: indicate ongoing processing */
.spin_infinite {
	animation-name: clockwise_full;
	animation-duration: 3s;
	animation-iteration-count: infinite;
}
.spin_infinite_linear {
	animation-name: clockwise_full;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}


/* --------------*/
/*     SLIDE     */
/* --------------*/
@-webkit-keyframes slide_in {
	from {
/*		margin-left: -110%;*/	/* from left */
		margin-left: 110%;		/* from right => beware weird line-break */
		width: 96%;
	}
	to {
		margin-left: 0;
		width: 96%;
	}
}
@keyframes slide_in {
	from {
/*		margin-left: -110%;*/	/* from left */
		margin-left: 110%;		/* from right => beware weird line-break */
		width: 96%;
	}
	to {
		margin-left: 0;
		width: 96%;
	}
}

/* --------------*/
/*     BOUNCE    */
/* --------------*/
@-webkit-keyframes bounce_out_left {
	0% {
		left: 3.6rem;
	}
	25% {
		left: 9rem;
	}
	100% {
		left:  -50rem;
	}
}
@keyframes bounce_out_left {
	0% {
		left: 3.6rem;
	}
	25% {
		left: 9rem;
	}
	100% {
		left:  -50rem;
	}
}

@keyframes trampolin {
	0% {
		-webkit-transform: translate(0,0);
		-moz-transform: translate(0,0);
		-ms-transform: translate(0,0);
		-o-transform: translate(0,0);
		transform: translate(0,0);
	}
	7% {
		-webkit-transform: translate(-0.4rem,-1rem);
		-moz-transform: translate(-0.4rem,-1rem);
		-ms-transform: translate(-0.4rem,-1rem);
		-o-transform: translate(-0.4rem,-1rem);
		transform: translate(-0.4rem,-1rem);
		animation-timing-function: ease-out;
	}
	15% {
		-webkit-transform: translate(-0.8rem,0.2rem);
		-moz-transform: translate(-0.8rem,0.2rem);
		-ms-transform: translate(-0.8rem,0.2rem);
		-o-transform: translate(-0.8rem,0.2rem);
		transform: translate(-0.8rem,0.2rem);
	}
	25% {
		-webkit-transform: translate(0,-3rem);
		-moz-transform: translate(0,-3rem);
		-ms-transform: translate(0,-3rem);
		-o-transform: translate(0,-3rem);
		transform: translate(0,-3rem);
		animation-timing-function: ease-out;
	}
	35% {
		-webkit-transform: translate(0.8rem,0.5rem);
		-moz-transform: translate(0.8rem,0.5rem);
		-ms-transform: translate(0.8rem,0.5rem);
		-o-transform: translate(0.8rem,0.5rem);
		transform: translate(0.8rem,0.5rem);
	}
	50% {
		-webkit-transform: translate(0,-6rem);
		-moz-transform: translate(0,-6rem);
		-ms-transform: translate(0,-6rem);
		-o-transform: translate(0,-6rem);
		transform: translate(0,-6rem);
		animation-timing-function: ease-out;
	}
	65% {
		-webkit-transform: translate(-0.8rem,0.5rem);
		-moz-transform: translate(-0.8rem,0.5rem);
		-ms-transform: translate(-0.8rem,0.5rem);
		-o-transform: translate(-0.8rem,0.5rem);
		transform: translate(-0.8rem,0.5rem);
	}
	75% {
		-webkit-transform: translate(0,-3rem);
		-moz-transform: translate(0,-3rem);
		-ms-transform: translate(0,-3rem);
		-o-transform: translate(0,-3rem);
		transform: translate(0,-3rem);
		animation-timing-function: ease-out;
	}
	85% {
		-webkit-transform: translate(0.8rem,0.2rem);
		-moz-transform: translate(0.8rem,0.2rem);
		-ms-transform: translate(0.8rem,0.2rem);
		-o-transform: translate(0.8rem,0.2rem);
		transform: translate(0.8rem,0.2rem);
	}
	
	93% {
		-webkit-transform: translate(0.4rem,-1rem);
		-moz-transform: translate(0.4rem,-1rem);
		-ms-transform: translate(0.4rem,-1rem);
		-o-transform: translate(0.4rem,-1rem);
		transform: translate(0.4rem,-1rem);/* right afterwards IEx falters here: it jumps to -6rem => why ???? */
		animation-timing-function: ease-out;
	}
	100% {
		-webkit-transform: translate(0,0);
		-moz-transform: translate(0,0);
		-ms-transform: translate(0,0);
		-o-transform: translate(0,0);
		transform: translate(0,0);
	}
}


/* --------------*/
/*      FADE     */
/* --------------*/
@-webkit-keyframes fade_in_full {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@keyframes fade_in_full {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@-webkit-keyframes fade_out_full {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}
@keyframes fade_out_full {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}
@-webkit-keyframes fade_in_part {
	from {
		opacity: 0.5;
	}
	to {
		opacity: 1;
	}
}
@keyframes fade_in_part {
	from {
		opacity: 0.5;
	}
	to {
		opacity: 1;
	}
}
@-webkit-keyframes fade_out_part {
	from {
		opacity: 1;
	}
	to {
		opacity: 0.5;
	}
}
@keyframes fade_out_part {
	from {
		opacity: 1;
	}
	to {
		opacity: 0.5;
	}
}

/* --------------*/
/*     ROTATE    */
/* --------------*/
@-webkit-keyframes pirouette {
    from {
        -webkit-transform: rotate3d(0, 1, 0, -720deg);
        -moz-transform: rotate3d(0, 1, 0, -720deg);
        -ms-transform: rotate3d(0, 1, 0, -720deg);
        -o-transform: rotate3d(0, 1, 0, -720deg);
        transform: rotate3d(0, 1, 0, -720deg);
    }
 
    to {
        -webkit-transform: rotate3d(0, 1, 0, 720deg);
        -moz-transform: rotate3d(0, 1, 0, 720deg);
        -ms-transform: rotate3d(0, 1, 0, 720deg);
        -o-transform: rotate3d(0, 1, 0, 720deg);
        transform: rotate3d(0, 1, 0, 720deg);
    }
}
@keyframes pirouette {
    from {
        -webkit-transform: rotate3d(0, 1, 0, -720deg);
        -moz-transform: rotate3d(0, 1, 0, -720deg);
        -ms-transform: rotate3d(0, 1, 0, -720deg);
        -o-transform: rotate3d(0, 1, 0, -720deg);
        transform: rotate3d(0, 1, 0, -720deg);
    }
    to {
        -webkit-transform: rotate3d(0, 1, 0, 720deg);
        -moz-transform: rotate3d(0, 1, 0, 720deg);
        -ms-transform: rotate3d(0, 1, 0, 720deg);
        -o-transform: rotate3d(0, 1, 0, 720deg);
        transform: rotate3d(0, 1, 0, 720deg);
    }
}

@-webkit-keyframes clockwise_full {
	from {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@keyframes clockwise_full {
	from {
		-ms-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	to {
		-ms-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-webkit-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@-webkit-keyframes counterclockwise_full {
	from {
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
	to {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
}
@keyframes counterclockwise_full {
	from {
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
	to {
		-ms-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
}
@-webkit-keyframes swirl_in_left {
	from {
		left:  -50rem;
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	to {
		left: 3.6rem; 
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@keyframes move_in_left {
	from {
		left:  -50rem;
	}
	to {
		left: 3.6rem;
	}
}
@-webkit-keyframes move_in_left {
	from {
		left:  -50rem;
	}
	to {
		left: 3.6rem;
	}
}
@keyframes swirl_in_left {
	from {
		left:  -50rem;
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	to {
		left: 3.6rem;
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@-webkit-keyframes swirl_out_left {
	from {
		left: 3.6rem; 
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
	to {
		left:  -50rem;
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
}
@keyframes swirl_out_left {
	from {
		left: 3.6rem;
		-ms-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-webkit-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
	to {
		left:  -50rem;
		-ms-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
}