/* NON SPECIFIC CSS BUG COLLECTION (CHECK SPECIFIC SELECTORS FOR SPECIFIC BUGS):
	
	
	SAFARI BUGS:
		
		//SAME ANIMATION NAMES IN AN ANIMATION FAILS TO TRIGGER RIGHT NUMBER OF ANIMATION_END-EVENTS (IMPORTANT FOR HOVERABLE IN SAFARI)
		EXAMPLE:
			animation: fade-in 1s 0.1s both, fade-out 1s 3s forwards, fade-in 1s 6s forwards, fade-out 1s 9s forwards, fade-in 1s 13s forwards;
		WORKAROUND:
			@keyframes fade-in1 {
				...(copy from fade-in exactly the same)
			}
			@keyframes fade-in2 {
				...(copy from fade-in exactly the same)
			}
			@keyframes fade-out1 {
				...(copy from fade-out exactly the same)
			}
			animation: fade-in 1s 0.1s both, fade-out 1s 3s forwards, fade-in1 1s 6s forwards, fade-out1 1s 9s forwards, fade-in2 1s 13s forwards;
		
		
		//A FOLLOW UP ANIMATION USING BOTH WILL ONLY TRIGGER AFTER HOVER IN SOME CASES (IF ITS THE LAST ANIMATION IN THE BANNER?) AND NOT TRIGGER ANIMATION_END-EVENTS UNTIL BANNER IS CLICKED
		EXAMPLE:
			animation: fade-in 1s 3s both, shake 2s 9s both;
		WORKAROUND:
			animation: fade-in 1s 3s both, shake 2s 9s forwards;
			
		//IMMMMMPPPPPOOOOOOOORTAAAAAAAAAAAANT!!!!!!!!!!11111ONEONEoneone; SOMETIMES THE TWO ABOVE WORKAROUNDS DO NOT HELP! SO THE NEXT SOLUTION IS TO MERGE THEY KEYFRAMES TO ONE:
		EXAMPLE:
			animation: fade-in 1s 0.1s both, fade-out 1s 3s forwards, fade-in1 1s 6s forwards, fade-out1 1s 9s forwards, fade-in2 1s 13s forwards;
		WORKAROUND:
			animation: fade-in-out 4s 0.1s both, fade-in-out2 4s 6s forwards, fade-in2 1s 13s forwards;
		
			
		
	IE BUGS:
		
		//BACKGROUND COLOR AND OPACITY BUG (opacity < 1 causes buggy border lines on overlaying elements)
		EXAMPLE:
			opacity: 0.5;
			background: #E20074;
		WORKAROUND:
			opacity: 1;
			background: rgba(226, 0, 116, 0.5);
	
		//STACKED ANIMATION TRANSFORMS CAN FAILS
		EXAMPLE:
			@keyframes move1 {
				0% {transform: translateX(0px);}
				100% {transform: translateX(100px);}
			}
			@keyframes move2 {
				0% {transform: translateX(100px); scale(1);}
				100% {transform: translateX(100px); scale(0.5);}
			}
			animation: move1 1s 1s both, move2 1s 3s forwards;
		WORKAROUND1:
			@keyframes move1 {
				0% {left: 0px;}
				100% {left: 100px;}
			}
			@keyframes move2 {
				0% {transform: scale(1);}
				100% {transform: scale(0.5);}
			}
		WORKAROUND2 (just replace most of the transform animation in IE):
			@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
				selector {
						animation: fade-in 1s 1s both, move2 1s 3s forwards;
				}
			}
			
			
	EDGE BUGS:
		
		ANIMATION NOT PAUSABLE (can't transition from value to none) 
		EXAMPLE:
			@keyframes fadeInLeft {
				from {
					transform: translate3d( -100%, 0, 0 );
				}
				to {
					transform: none;
				}
			}
			
		WORKAROUND:
			@keyframes fadeInLeft {
				from {
					transform: translate3d( -100%, 0, 0 );
				}
				to {
					transform: translate3d( 0, 0, 0 );
				}
			}
			
	
			
	CHROME BUGS:
	
		//3D ANIMATIONS SHOW ALWAYS BACKFACES IF THIS CSS IS ACTIVE
		//EVEN SETTING TO INITIAL ON 3D ELEMENTS DOESNT FIX IT (transform: none)
		div, header, span, img, p, a, button {
			-webkit-backface-visibility: hidden;
			transform: translateZ(0);
		}
		
		
	
	FIREFOX BUGS:
		;)
*/


/* --- generic telekom styles --- */

@font-face {
	font-family: TeleGroteskHeadline;
	src: url("https://rt.telekom-dienste.de/mm/TeleGroteskHeadline-Regular.woff") format("woff");
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: TeleGroteskHeadline;
	src: url("https://rt.telekom-dienste.de/mm/TeleGroteskHeadline-Ultra.woff") format("woff");
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family: TeleGrotesk;
	src: url("https://rt.telekom-dienste.de/mm/TeleGroteskNormal.woff") format("woff");
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: TeleGrotesk;
	src: url("https://rt.telekom-dienste.de/mm/TeleGroteskFett.woff") format("woff");
	font-weight: bold;
	font-style: normal;
}

body {
	color: black;
	font-family: TeleGrotesk, Arial, Helvetica;
}

.tele_headline {
	font-family: TeleGroteskHeadline, Arial, Helvetica;
	text-transform: uppercase;
	color: #E20074;
}

button {
	position: absolute;
	left: 120px;
	top: 160px;
	border-radius: 4px;
	text-align: center;
	animation: fade-in 1s 6.5s both, button-click-grey 0.3s 8s forwards;
	padding: 6px 10px;
	font-family: TeleGrotesk, Arial, Helvetica;
	font-size: 100%;
	/* REQUIRED OTHERWISE FONT SIZE DOESNT ADAPT FROM GLOBAL STAGE FONT SIZE, POSSIBLE BUG */
	margin: 0px;
	white-space: nowrap;
	opacity: 0;
}
.button_container {
	position: absolute;
	left: 120px;
	top: 160px;
	padding: 0;
}

.stage-120x600 button,
.stage-160x600 button,
.stage-200x600 button,
.stage-300x600 button,
.stage-120x600 .button_container,
.stage-160x600 .button_container,
.stage-200x600 .button_container,
.stage-300x600 .button_container {
	left: 50%;
	transform: translateX(-50%);
	top: 447px;
	animation-delay: 2.25s, 9.5s;
}
.stage-180x150 button,
.stage-180x150 .button_container {
	top: 108px;
	padding: 4px 6px;
}
.stage-300x600 button,
.stage-300x600 .button_container {
	padding: 8px 16px;
}
.stage-336x280 button,
.stage-336x280 .button_container {
	top: 172px;
}
.stage-468x60 button,
.stage-468x60 .button_container {
	top: 50%;
	transform: translateY(-50%);
	left: auto;
	right: 8px;
}
.stage-640x480 button,
.stage-800x600 button,
.stage-640x480 .button_container,
.stage-800x600 .button_container {
	top: 70px;
	left: auto;
	right: 20px;
	padding: 8px 20px;
}
.stage-728x90 button,
.stage-728x90 .button_container {
	top: 50%;
	transform: translateY(-50%);
	left: auto;
	right: 20px;
}

.stage-800x250 button,
.stage-842x250 button,
.stage-920x250 button,
.stage-970x250 button,
.stage-964x250 button, 
.stage-1200x200 button,
.stage-800x250 .button_container,
.stage-842x250 .button_container,
.stage-920x250 .button_container,
.stage-970x250 .button_container,
.stage-964x250 .button_container, 
.stage-1200x200 .button_container {
	top: 70px;
	left: auto;
	right: 20px;
	font-size: 19px;
	padding: 8px 20px;
}

.button_container button {
	top:0;
	left:0;
	right:auto;
	bottom:auto;
	transform: none;
	position: static;
}
#stage .button_container {
	padding: 0;
}



.button {
	color: black;
	border: 1px solid #ccc;
	background-color: #fff;
}

button:hover {
	color: white;
	border: 1px solid #bf0062;
	background-color: #c00063;
}

.button-grey {
	color: black;
	border: 1px solid #ccc;
	background-color: #ededed;
}

button:hover.button-grey {
	color: black;
	border: 1px solid #b1b1b1;
	background-color: #cacaca;
}

.button-magenta {
	color: white;
	border: 1px solid #cc0069;
	background: #e20074;
	animation: fade-in 1s both, button-click 0.3s both;
}

.telekom_tag {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	animation: fade-in 1s 0s both;
	transition: all 0.5s;
	pointer-events:	none;
}

.stage-180x150 .telekom_tag,
.stage-234x60 .telekom_tag,
.stage-300x150 .telekom_tag,
.stage-300x180 .telekom_tag,
.stage-300x60 .telekom_tag,
.stage-468x60 .telekom_tag,
.stage-728x90 .telekom_tag,
.stage-830x90 .telekom_tag,
.stage-970x90 .telekom_tag,
.stage-1018x80 .telekom_tag {
	top: 0;
	position: absolute;
	background: white;
	z-index: 21;
	animation: fade-in-out 3s 14.5s both;
	opacity: 0;
}

.telekom_tag path {
	fill: #E20074;
}

.t_logo {
	position: absolute;
	top: auto;
	right: auto;
	bottom: 10px;
	left: 10px;
	width: 50px;
	height: 25px;
	filter: opacity(1);
	/* hack added to prevent pixel flickering bug */
}
.stage-120x600 .t_logo,
.stage-160x600 .t_logo {
	bottom: 10px;
	left: 10px;
	width: 60px;
	height: 29px;
}
.stage-180x150 .t_logo {
	left: 10px;
	bottom: 50%;
	transform: translateY(50%);
	width: 80px;
	height: 39px;
}
.stage-234x60 .t_logo {
	bottom: 50%;
	transform: translateY(50%);
	width: 82px;
	height: 40px;
}
.stage-300x180 .t_logo {
	left: 10px;
	bottom:45%;
}
.stage-300x600 .t_logo {
	bottom: 20px;
	left: 20px;
}
.stage-300x600.stage-responsive .t_logo {
	height: 31px;
	width: 61px;
}
.stage-336x280 .t_logo {
		bottom: 10px;
	left: 10px;
	width: 44px;
	height: 22px;
}
.stage-450x450 .t_logo {
	left: 20px;
	bottom: 20px;
	width: 58px;
	height: 30px;
}
.stage-468x60 .t_logo {
	bottom: 50%;
	transform: translateY(50%);
	left: 10px;
	width: 59px;
	height: 30px;
}
.stage-640x480 .t_logo,
.stage-800x600 .t_logo {
	left: 20px;
	bottom: 20px;
	width: 74px;
	height: 38px;
}
.stage-728x90 .t_logo,
.stage-830x90 .t_logo,
.stage-970x90 .t_logo,
.stage-1018x80 .t_logo {
	bottom: 50%;
	transform: translateY(50%);
	left: 20px;
	width: 100px;
	height: 49px;
}
.stage-800x250 .t_logo,
.stage-842x250 .t_logo,
.stage-920x250 .t_logo,
.stage-970x250 .t_logo,
.stage-964x250 .t_logo,
.stage-1200x200 .t_logo {
	left: 20px;
	bottom: 20px;
	width: 65px;
	height: 32px;
}


.claim {
	position: absolute;
	top: auto;
	left: auto;
	right: 10px;
	bottom: 14px;
	width: 128px;
	height: 11px;
	/* width AND height to prevent IE ERRORS !!! */
	filter: opacity(1);
	/* hack added to prevent pixel flickering bug */
}
.stage-120x60 .claim,
.stage-120x600 .claim,
.stage-160x600 .claim,
.stage-160x120 .claim,
.stage-180x150 .claim,
.stage-200x600 .claim,
.stage-234x60 .claim {
	display: none;
}
.stage-300x180 .claim {
	right: 10px;
	bottom: 47%;
}
.stage-300x600 .claim {
	right: 20px;
	bottom: 25px;
}
.stage-300x600.stage-responsive .claim {
	width: 139px;
	height: 12px;
}
.stage-336x280 .claim {
	bottom: 15px;
	width: 119px;
	height: 10px;
}
.stage-450x450 .claim {
	bottom: 26px;
	right: 20px;
	width: 162px;
	height: 14px;
}
.stage-468x60 .claim {
	bottom: auto;
	top: 50%;
	transform: translateY(-50%);
	right: 0;
	width: 161px;
	height: 12px;
}
.stage-640x480 .claim,
.stage-800x600 .claim {
	bottom: 25px;
	width: 199px;
	height: 18px;
		right: 20px;
}
.stage-728x90 .claim,
.stage-830x90 .claim,
.stage-970x90 .claim {
	bottom: auto;
	top: 50%;
	transform: translateY(-50%);
	right: 20px;
	width: 270px;
	height: 23px;
}
.stage-800x250 .claim,
.stage-842x250 .claim {
	bottom: 25px;
	right: 13px;
	width: 171px;
	height: 13px;
}

.stage-920x250 .claim,
.stage-964x250 .claim,
.stage-970x250 .claim,
.stage-1200x200 .claim {
	bottom: 25px;
	right: 12px;
	width: 171px;
	height: 13px;
}

/* TOP ALIGNED LOGOS 
	example: <div id="stage" class="outline bg_img stage-300x250 logo-top"> */
.logo-top .telekom_tag {
	bottom: auto;
}
.logo-top .t_logo {
	bottom: auto;
	position: relative;
	right: auto;
	top: 10px;
}
.stage-300x250.logo-top .t_logo {
	width: 46px;
	height: 22.59px;
}
.stage-300x600.logo-top .t_logo {
	top: 20px;
}
.logo-top .claim {
	bottom: -0.1em;
	width: 117px;
	height: 10.11px;
	left: auto;
	top: auto;
}
.stage-300x600.logo-top .claim {
	top: 28px;
}


/*
	DO NOT USE SUP ANYMORE!
	REMOVE SUP ASAP, USE .raised INSTEAD, 
	REASON: RENDERS DIFFERENT IN IE
*/
sup {
	font-size: 50%;
}
/* DO NOT USE SUP USE .raised INSTEAD */
.raised {
	font-size: 0.5em;
	position: relative;
	top: -0.7em;
}
/* for small font sizes like 16px or 19px */
.raised_small {
	font-size: 0.8em;
	position: relative;
	top: -0.2em;
}
/* for large font sizes like 101px */
.raised_large {
		font-size: 0.3em;
		position: relative;
		top: -1.5em;
}


.centdash {
	display: inline-block;
	margin-left: 1px;
	margin-right: 4px;
	transform: scale(1.4, 0.9);
}


/* teaser colors */

.light-blue {
	background-color: #64B9E4;
	filter: opacity(1);
	/* hack added to render antialias text and edges in FF */
}
.dark-blue {
	background-color: #427BAB;
	filter: opacity(1);
	/* hack added to render antialias text and edges in FF */
}
.light-cyan {
	background-color: #01A497;
	filter: opacity(1);
	/* hack added to render antialias text and edges in FF */
}
.dark-cyan {
	background-color: #408F9A;
	filter: opacity(1);
	/* hack added to render antialias text and edges in FF */
}
.light-green {
	background-color: #BABD5A;
	filter: opacity(1);
	/* hack added to render antialias text and edges in FF */
}
.yellow {
	background-color: #FDD167;
	filter: opacity(1);
	/* hack added to render antialias text and edges in FF */
}
.orange {
	background-color: #EDA95A;
	filter: opacity(1);
	/* hack added to render antialias text and edges in FF */
}
.purple {
	background-color: #9F4C97;
	filter: opacity(1);
	/* hack added to render antialias text and edges in FF */
}


/* -- Telekom components -- */

.h1 {
	position: absolute;
	left: 10px;
	top: 8px;
	animation: fade-in-out 5s 0.5s both;
	font-size: 27px;
}
.stage-120x600 .h1 {
	font-size: 21px;
	width: 103px;
}
.stage-180x150 .h1 {
	left: 5px;
	top: 2px;
	font-size: 24px;
	width: 173px;
	line-height: 110%;
}
.stage-300x180 .h1 {
	left: 5px;
	top: 2px;
	font-size: 24px;
	width: 173px;
	line-height: 110%;
}
.stage-300x600 .h1 {
	left: 19px;
	top: 10px;
	width: 265px;
	font-size: 36px;
}
.stage-336x280 .h1 {
	left: 9px;
	top: 5px;
	width: 320px;
	font-size: 30px;
}
.stage-468x60 .h1 {
	left: 5px;
	top: 3px;
	width: 210px;
	font-size: 18px;
}
.stage-728x90 .h1 {
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 27px;
	width: 300px;
}
.stage-728x90.stage-wp .h1 {
	left: 10px;
	top: 8px;
	transform: none;
	font-size: 31px;
	width: 570px;
}
.stage-640x480 .h1,
.stage-800x600 .h1,
.stage-800x250 .h1,
.stage-842x250 .h1 {
	left: 18px;
	top: 13px;
	font-size: 44px;
	width: 490px;
}
.stage-830x90.stage-wp .h1 {
		left: 10px;
		top: 8px;
		transform: none;
		font-size: 31px;
		width: 650px;
}



/* IMPORTANT: 
	DISPLAY:BLOCK HAS A "BUG" FILLING THE WHOLE WIDTH
	THIS CAUSES THE SUBLINE TO ALWAYS BREAK ON THE LAST LINE;
	USED CONTENT LINEBREAK TO SOLVE THIS PROBLEM
*/
.h1 strong::after {
	/*THIS WORKS IN CHROME */
	content: " ";
		white-space: normal;
		display: block;
	/*THIS DOESNT WORK IN CHROME :(
	content: "\A";
	white-space: pre;*/
}






/*	
	CALLOUT EYECATCHER TEASER
	
	example:
	<div id="eyecatcher1" class="callout_container">
		<div class="tele_headline callout pausable">
			<span>Neu:</span>
			<span>Dayflat</span>
			<span>unlimited</span>
		</div>
	</div>
	
	IE BUG NOTICE:
	IN IE THE TEASER IS SOMETIMES JUMPING AT THE END OF THE SCALING ANIMATION IF IT 
	A) INCLUDES A SPAN TAG INSIDE A STRONG TAG
	OR B) A RAISED_SMALL- OR RAISED-CLASS INSIDE A STRONG TAG
	SOLUTION + WRITING THE HOVERABLE LIKE THIS CAUSED NO PROBLEMS (note the strong inside the strong tag):
	
	<div id="eyecatcher1" class="callout_container">
		<div id="eyecatcher" class="callout pausable">
			<strong>Nur online:</strong>
			<strong>168,95 € sparen<strong class="hoverable">*</strong></strong>
		</div>
	</div>
*/

.callout_container {
	position:			absolute;
}

.callout {
	text-align:			center;
	display:			inline-block;
	font-family:		TeleGroteskHeadline, Arial, Helvetica;
	padding:			0;
	position:			relative;
	top:				0;
	left:				0;
	transform-origin:	50% 50%;
	animation:			fade-in-out 6s 11s both, shrink-in 0.5s cubic-bezier(0.595, 0.840, 0.980, 1.170) 11s forwards;
	transform:			rotate(-7.5deg);
	line-height:		1;
	/*pointer-events:	none;*/
	z-index:			20;
	color:				white;
	filter:				opacity(1);/* fixes broken fonts display */
}
.callout::before {
	content:			"";
	position:			absolute;
	width:				100%;
	padding-top:		100%;
	top:				50%;
	left:				0;
	transform-origin:	50% 50%;
	transform:			translateY(-50%) scale(1.38);
	border-radius:		50%;
	background-color:	#babd5a;
}

.callout > * {
	display:			block;
	line-height:		77%;
	transform:			translateY(3px);
	white-space:		nowrap;
}

/*
	RECOMMENDED TO STYLE FONT SIZE VARIATION LIKE THIS:
	
	CHOOSE A DEFAULT SIZE (FROM FIRST LINE OR OTHER)
	.callout {
		font-size:			14px;
	}
	OTHER LINES ADRESSED AS CHILD AND PERCENTAGE SIZE
	.callout > strong:nth-child(2) {
		font-size:			220%;
	}
*/

/*	FLIP CALLOUT - WECHSELSTROERER 3D (NEW)
	HTML:
	<div id="eyecatcher2" class="callout_container">
		<div class="tele_headline callout flip3d_callout pausable">
			<div>Neu:</div>
			<div>Dayflat</div>
			<div>unlimited</div>
		</div>
		<div class="tele_headline callout flip3d_callout pausable backside">
			<div>31 Tage</div>
			<div>inkl.</div>
		</div>
	</div>
	
	CSS:
	#stage .callout.flip3d_callout {
		animation-name: move_z_in, fade-in, flip3d_front;
		animation-delay: 4s, 4s, 7.25s;
		animation-duration: 1.5s, 1s, 0.3s;
	}
	#stage .callout.flip3d_callout.backside {
		animation: flip3d_back 0.3s linear 7.25s both;
		
	}
*/
@keyframes move_z_in {
	0% {
		transform: perspective(100px) translateZ(500px) rotateZ(-7.5deg);
	}
	100% {
		transform: perspective(100px) translateZ(0px) rotateZ(-7.5deg);
	}
}
@keyframes flip3d_front {
	0% {
		transform: perspective(100px) rotateY(0deg) rotateZ(-7.5deg);
	}
	100% {
		transform: perspective(100px) rotateY(180deg) rotateZ(-7.5deg);
	}
}
@keyframes flip3d_back {
	0% {
		transform: perspective(100px) rotateY(-180deg) rotateZ(-7.5deg);
	}
	100% {
		transform: perspective(100px) rotateY(0deg) rotateZ(-7.5deg);
	}
}
.callout.flip3d_callout {
	
	position: static;
	
	backface-visibility: hidden;
	
	tranform-origin: 50% 50% 0;
	animation: move_z_in 1.5s 2s cubic-bezier(0.595, 0.840, 0.980, 1.170) backwards, fade-in-out 5s 2s both, flip3d_front 0.3s linear 4.5s forwards;
	
}
.callout.flip3d_callout.backside {
	position: absolute;
	top: 0;
	left: 0;
	text-align: center;
	width: 100%;
	height: 100%;
	tranform-origin: 0 0 0;
	animation: flip3d_back 0.3s linear 4.5s both;
}
.callout.flip3d_callout.backside > * {
	display: inline-block;
	vertical-align: middle;
}


/*	FLIP CALLOUT - WECHSELSTROERER 2D (OLD)
	
	example:
	<div id="eyecatcher1" class="callout_container">
		<div class="tele_headline callout flip_callout pausable">
			<span class="pausable">Neu:</span>
			<span class="pausable">Dayflat</span>
			<span class="pausable">unlimited</span>
			<div class="backside pausable">
				<span class="pausable">31 Tage</span>
				<span class="pausable">inkl.</span>
			</div>
		</div>
	</div>

*/
@keyframes flip1 {
	0% {
		transform: scaleX(1) rotateZ(-7.5deg);
	}
	100% {
		transform: scaleX(-1) rotateZ(7.5deg);
	}
}
.callout.flip_callout {
	backface-visibility: visible;
	animation: shrink-in 0.5s 2s cubic-bezier(0.595, 0.840, 0.980, 1.170) backwards, fade-in-out 5s 2s both, flip1 0.3s 4.5s linear forwards;
}
.callout.flip_callout > .backside {
	position: absolute;
	top: 50%;
	left: 50%;
	text-align: center;
	
	transform: translateX( -50% ) translateY( -50% ) scaleX(-1);
}
.callout.flip_callout .backside > * {
	display: block;
}

/* shitty way of flipping text because backface-visiblity:hidden doesnt work... */

.callout.flip_callout > * {
	animation: fade-out 0.01s 4.65s both;
}
.callout.flip_callout > .backside {
	animation-name: fade-in;
}

/* WECHSEL STOERER END */






.device {
	animation: fade-in 1s 5.5s both;
}

.device-name {
	position: absolute;
	left: 120px;
	top: 20px;
	color: #E20074;
	animation: fade-in 1s 5.5s both;
	line-height: 120%;
}
.stage-120x600 .device-name,
.stage-120x600 .price,
.stage-200x600 .device-name,
.stage-200x600 .price {
	left: 10px;
}
.stage-160x600 .device-name,
.stage-160x600 .price {
	left: 14px;
}
.stage-180x150 .device-name {
	top: 12px;
}
.stage-300x180 .device-name {
	top: 20px;
}
.stage-300x600 .device-name,
.stage-300x600 .price {
	left: 60px;
	width: 200px;
}
.stage-468x60 .device-name {
	top: 11px;
	top: calc(11px - 1px);
	width: 80px;
}
.stage-728x90 .device-name,
.stage-830x90 .device-name {
	top: 32px;
	top: calc(32px - 1px);
	line-height: 140%;
	width: 80px;
}
.stage-800x250 .device-name,
.stage-842x250 .device-name {
	left: 180px;
	top: 13px;
}
.stage-800x600 .device-name {
	left: 360px;
	top: 100px;
}


.price {
	position: absolute;
	left: 120px;
	top: 48px;
	animation: fade-in 1s 6s both;
	opacity: 0;
}
.stage-180x150 .price {
	top: 32px;
}
.stage-180x150 .price {
	top: 50%;
}
.stage-468x60 .price,
.stage-728x90 .price,
.stage-830x90 .price {
	top: 50%;
	top: calc(50% - 1px);
	transform: translateY(-50%);
}
.stage-800x250 .price {
	left: 180px;
}
.stage-800x600 .price {
		left: 360px;
		top: 165px;
}


.pre {
	display: block;
}
.stage-180x150 .pre,
.stage-300x180 .pre,
.stage-468x60 .pre,
.stage-728x90 .pre,
.stage-800x250 .pre,
.stage-830x90 .pre,
.stage-842x250 .pre {
	display: inline;
}

.price .tele_headline {
	font-size: 250%;
	color: #E20074;
}
.stage-468x60 .price .tele_headline {
	font-size: 210%;
	line-height: 90%;
}

.rate {
	display: block;
	color: black;
	line-height: 125%;
	width: 145px;
}
.stage-120x600 .rate {
	width: 105px;
}
.stage-300x600 .rate {
	width: 180px;
}
.stage-336x280 .rate {
	width: 170px;
}
.stage-468x60 .rate {
	line-height: 105%;
}
.stage-728x90 .rate,
.stage-830x90 .rate {
	width: 250px;
}
.stage-800x250 .rate,
.stage-842x250 .rate {
	width: auto;
}






/*********************************
ONLINE ADVANTAGE

ov_callout class needs to be put on callout_container
*********************************/

/* OV CALLOUT POSITION */
.ov_callout {
	left:				24px;
	top:				67px;
	pointer-events:		none;
}
.stage-120x600 .ov_callout {
	left:				50%;
	transform:			translateX(-50%);
	top:				119px;
}
.stage-160x600 .ov_callout {
	left:				50%;
	transform:			translateX(-50%);
	top:				119px;
}
.stage-180x150 .ov_callout {
	left:				15px;
	top:				23px;
}
.stage-300x600 .ov_callout {
	left:				50%;
	transform:			translateX(-50%);
	top:				110px;
}
.stage-336x280 .ov_callout {
	left:				39px;
	top:				71px;
}
.stage-468x60 .ov_callout {
	top:				50%;
	top:				calc(50% + 1px);
	transform:			translateY(-50%);
	left:				22px;
}
.stage-640x480 .ov_callout {
	top:				140px;
	transform:			translateY(-50%);
	left:				75px;
}
.stage-728x90 .ov_callout,
.stage-830x90 .ov_callout {
	top:				50%;
	top:				calc(50% + 1px);
	transform:			translateY(-50%);
	left:				40px;
}
.stage-728x90.stage-wp .ov_callout,
.stage-830x90.stage-wp .ov_callout {
	left:				139px;
}
.stage-920x250 .ov_callout,
.stage-970x250 .ov_callout,
.stage-1200x200 .ov_callout,
.stage-964x250 .ov_callout {
	top:				90px;
	transform:			translateY(-50%);
	left:				60px;
}
.stage-970x90 .ov_callout {
	top:				50%;
	top:				calc(50% + 1px);
	transform:			translateY(-50%);
	left:				100px;
}



/* OV CALLOUT FONT STYLES */
.ov_callout .callout {
	font-weight:		bold;
	font-size:			14px;
}
.stage-120x600 .ov_callout .callout {
	font-size:			15px;
}
.stage-160x600 .ov_callout .callout {
	font-size:			19px;
}
.stage-300x600 .ov_callout .callout {
	font-size:			24px;
}
.stage-640x480 .ov_callout .callout {
	font-size:			28px;
		top:								20px;
}
.stage-728x90 .ov_callout .callout,
.stage-830x90 .ov_callout .callout,
.stage-970x90 .ov_callout .callout {
	font-size:			12px;
}
.stage-800x600 .ov_callout .callout {
	font-size:			28px;
		top:								90px;
		left:							 90px;
}
.stage-920x250 .ov_callout .callout,
.stage-970x250 .ov_callout .callout,
.stage-1200x200 .ov_callout .callout,
.stage-964x250 .ov_callout .callout {
	font-size:			18px;
}


.stage-180x150 .ov_callout .callout > span,
.stage-468x60 .ov_callout .callout > span {
	transform: translateY(-1px);
}

.ov_callout .callout > span:nth-child(2) {
	font-size:			300%;
}
.stage-180x150 .ov_callout .callout > span:nth-child(2),
.stage-468x60 .ov_callout .callout > span:nth-child(2) {
	font-size:			100%;
	margin-top:			3px;
}

.stage-180x150 .ov_callout .callout::before,
.stage-468x60 .ov_callout .callout::before {
	transform:			translateY(-50%) scale(1.28);
}
.stage-336x280 .ov_callout .callout::before {
	transform:			translateY(-50%) scale(1.42);
}

/* OV TEXT */
.ov {
	animation: fade-in-out 6s 11s both;
	background: white;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	
	/* CHROME FIX */
	width: 100%;
	height: 100%;
}

.ov > div {
	position: relative;
	left: 120px;
	top: 43px;
	width: 175px;
	font-size: 30px;
	line-height: 100%;
}
.stage-120x600 .ov > div {
	left: 10px;
	top: 240px;
	width: 105px;
	font-size: 18px;
}
.stage-160x600 .ov > div {
	left: 13px;
	top: 250px;
	width: 147px;
	font-size: 25px;
}
.stage-180x150 .ov > div {
	left: 73px;
	top: 13px;
	width: 124px;
	font-size: 18px;
}
.stage-300x600 .ov > div {
	left: 70px;
	top: 270px;
	width: 200px;
	line-height: 110%;
	font-size: 32px;
}
.stage-336x280 .ov > div {
	left: 150px;
	top: 90px;
	width: 170px;
	font-size: 29px;
}
.stage-468x60 .ov > div {
	left: 85px;
	top: 50%;
	transform: translateY(-50%);
	width: auto;
	font-size: 24px;
}
.stage-640x480 .ov > div {
	left: 290px;
	top: 80px;
	width: 325px;
	font-size: 54px;
}
.stage-728x90 .ov > div {
	left: 140px;
	top: 50%;
	transform: translateY(-50%);
	width: auto;
	line-height: 85%;
	font-size: 35px;
}
.stage-728x90.stage-wp .ov > div,
.stage-830x90.stage-wp .ov > div {
	left: 240px;
}

.stage-800x250 .ov > div,
.stage-842x250 .ov > div {
	left: 185px;
	top: 50px;
	width: auto;
	font-size: 40px;
}
.stage-800x600 .ov > div {
	left: 360px;
	top: 120px;
	width: 350px;
	font-size: 57px;
}
.stage-920x250 .ov > div {
	left: 200px;
	top: 60px;
	width: auto;
	line-height: 85%;
	font-size: 44px;
}
.stage-970x90 .ov > div {
	left: 230px;
	top: 50%;
	transform: translateY(-50%);
	width: auto;
	line-height: 85%;
	font-size: 44px;
}
.stage-970x250 .ov > div,
.stage-1200x200 .ov > div,
.stage-964x250 .ov > div {
	left: 200px;
	top: 60px;
	width: auto;
	line-height: 85%;
	font-size: 44px;
}



.ov_subline {
	display: block;
	font-size: 50%;
	line-height: 120%;
}
.stage-120x600 .ov_subline {
	font-size: 70%;
}
.stage-160x600 .ov_subline {
	font-size: 59%;
}
.stage-180x150 .ov_subline {
	font-size: 66%;
}
.stage-300x600 .ov_subline {
	font-size: 62%;
}
.stage-336x280 .ov_subline {
	font-size: 51%;
}
.stage-468x60 .ov_subline,
.stage-728x90 .ov_subline,
.stage-970x90 .ov_subline,
.stage-920x250 .ov_subline,
.stage-800x250 .ov_subline,
.stage-1200x200 .ov_subline,
.stage-842x250 .ov_subline {
	font-size: 58%;
}
.stage-640x480 .ov_subline,
.stage-800x600 .ov_subline {
	font-size: 46%;
}




/*********************************
INFO TEXT
*********************************/

.infotext {
	background: white;
	opacity: 0;
	transition: all 1s ease;
	pointer-events: none;
	visibility: hidden;
	z-index: 100;
	font-size: 11px;
}

#infotext > * {
	padding: 10px;
	transition: top;
	position: absolute;
	top: 0px;
}
.stage-300x600 #infotext > *,
.stage-450x450 #infotext > *,
.stage-640x480 #infotext > *,
.stage-800x250 #infotext > *,
.stage-842x250 #infotext > *,
.stage-820x90 #infotext > *,
.stage-830x90 #infotext > *,
.stage-920x250 #infotext > *,
.stage-970x250 #infotext > *,
.stage-964x250 #infotext > *,
.stage-1200x200 #infotext > *,
.stage-1018x80 #infotext > * {
	padding: 18px 20px;
}
.stage-468x60 #infotext > * {
	padding: 5px;
}
.stage-300x180 #infotext > * {
	padding: 10px;
}


/**************************
PANELS
**************************/

.panel_container .telekom_tag path {
	fill: #FFFFFF;
}

.panel_container * {
	color: #FFFFFF;
}

.panel_container .panel_size_reference {
	position: relative;
}

.panel_container.panel_bottom .panel_size_reference {
	margin-top: -10px;
	margin-bottom: 70px;
	/* LOGO SCHUTZ ZONE */
}

.panel_container .h1 {
	margin-right: 30px;
	display: inline-block;
	/* FIXES IE DISPLAY BUG */
}
.stage-300x600 .panel_container .h1,
.stage-800x250 .panel_container .h1 {
	margin-right: 60px;
}

.panel_container {
	position: absolute;
	top: 10px;
	left: 10px;
	max-width: 90%;
	max-width: calc(100% - 20px);
	padding-bottom: 6px;
}
.stage-180x150 .panel_container {
	top: 5px;
	left: 5px;
	max-width: calc(100% - 10px);
	padding-bottom: 5px;
}
.stage-300x180 .panel_container {
	top: 5px;
	left: 20px;
	max-width: calc(100% - 10px);
	padding-bottom: 5px;
}
.stage-300x600 .panel_container {
	top: 20px;
	left: 20px;
	max-width: calc(100% - 40px);
	padding-bottom: 25px;
}
.stage-468x60 .panel_container {
	top: 5px;
	left: 5px;
	height: 50px;
	max-width: 458px;
	padding-bottom: 0;
	padding-right: 12px;
}
.stage-640x480 .panel_container {
	top: 20px;
	left: 20px;
	max-width: 620px;
	max-height: 255px;
	padding-bottom: 25px;
}
.stage-728x90 .panel_container {
	top: 10px;
	left: 10px;
	height: 70px;
	max-width: 708px;
	padding-bottom: 0;
	padding-right: 20px;
}
.stage-800x250 .panel_container {
	top: 20px;
	left: 20px;
	max-width: 700px;
	max-height: 145px;
	padding-bottom: 25px;
}
.stage-800x600 .panel_container {
	top: 20px;
	left: 20px;
	max-width: 770px;
	max-height: 280px;
	padding-bottom: 25px;
}
.stage-842x250 .panel_container {
	top: 20px;
	left: 20px;
	max-width: 742px;
	max-height: 145px;
	padding-bottom: 25px;
}
.stage-970x90 .panel_container {
		top: 10px;
	left: 10px;
	height: 70px;
	max-width: 960px;
	padding-bottom: 0;
	padding-right: 20px;
}

.stage-1018x80 .panel_container {
		top: 10px;
	left: 10px;
	height: 65px;
	max-width: 1018px;
	padding-bottom: 0;
	padding-right: 20px;
}
.panel_container.panel_bottom {
	top: auto;
	bottom: 10px;
	left: 10px;
	padding-bottom: 0;
}

.panel {
	position: absolute;
	top: 0;
	left: 0;
	transform-origin: 0 0;
	background: #E20074;
}

.panel_bottom .panel {
	top: auto;
	bottom: 0;
	left: 0;
	transform-origin: 0 100%;
	background: #E20074;
}

.panel:nth-child(1) {
	width: 90%;
	width: calc(100% - 10px);
	height: 110%;
	height: calc(100% + 10px);
}
.stage-120x600 .panel:nth-child(1),
.stage-160x600 .panel:nth-child(1) {
	width: 100%;
}
.stage-180x150 .panel:nth-child(1) {
	width: 80%;
	width: calc(100% - 10px);
	height: 103%;
	height: calc(100% + 3px);
}
.stage-300x180 .panel:nth-child(1) {
	width: 100%;
	height: 100%;
}
.stage-300x600 .panel:nth-child(1) {
	width: 100%;
	height: 100%;
}
.stage-468x60 .panel:nth-child(1) {
	width: 100%;
	max-width: 438px;
	height: 100%;
}
.stage-640x480 .panel:nth-child(1) {
	width: 100%;
	max-width: 600px;
	height: 100%;
}
.stage-728x90 .panel:nth-child(1) {
	width: 100%;
	max-width: 683px;
	height: 100%;
}
.stage-800x250 .panel:nth-child(1),
.stage-842x250 .panel:nth-child(1) {
	width: 100%;
	height: 100%;
	max-height: 130px;
}
.stage-800x600 .panel:nth-child(1) {
	width: 100%;
	max-width: 760px;
	height: 100%;
}
.stage-970x90 .panel:nth-child(1) {
	width: 100%;
	max-width: 780px;
	height: 100%;
}

.panel:nth-child(2) {
	opacity: 0.5;
	width: 100%;
	height: 120%;
	height: calc(100% + 20px);
}
.stage-120x600 .panel:nth-child(2),
.stage-160x600 .panel:nth-child(2) {
	width: 90%;
	width: calc(100% - 10px);
}
.stage-180x150 .panel:nth-child(2) {
	width: 90%;
	width: calc(100% - 5px);
	height: 108%;
	height: calc(100% + 13px);
}
.stage-300x180 .panel:nth-child(2) {
	width: 95%;
}
.stage-300x600 .panel:nth-child(2) {
	width: 95%;
}
.stage-468x60 .panel:nth-child(2) {
	width: 108%;
	width: calc(100% + 15px);
	max-width: 443px;
	height: 80%;
	height: calc(100% - 10px);
}
.stage-640x480 .panel:nth-child(2) {
	width: 105%;
	width: calc(100% + 40px);
	max-width: 740px;
	height: 105%;
	height: calc(100% + 25px);
	max-height: 265px;
}
.stage-728x90 .panel:nth-child(2) {
	width: 108%;
	width: calc(100% + 20px);
	max-width: 693px;
	height: 80%;
	height: calc(100% - 10px);
}
.stage-800x250 .panel:nth-child(2) {
	width: 105%;
	width: calc(100% + 30px);
	max-width: 740px;
	height: 105%;
	height: calc(100% + 12px);
	max-height: 145px;
}
.stage-800x600 .panel:nth-child(2) {
	width: 105%;
	width: calc(100% + 40px);
	max-width: 740px;
	height: 115%;
	height: calc(100% + 55px);
	max-height: 390px;
}
.stage-842x250 .panel:nth-child(2) {
	width: 105%;
	width: calc(100% + 30px);
	max-width: 782px;
	height: 105%;
	height: calc(100% + 12px);
	max-height: 145px;
}
.stage-970x90 .panel:nth-child(2) {
	width: 108%;
	width: calc(100% + 20px);
	max-width: 780px;
	height: 80%;
	height: calc(100% - 10px);
}

.panel:nth-child(3) {
	opacity: 0.5;
	width: 65%;
	height: 130%;
	height: calc(100% + 30px);
}
.stage-120x600 .panel:nth-child(3),
.stage-160x600 .panel:nth-child(3) {
	width: 80%;
	width: calc(100% - 20px);
}
.stage-180x150 .panel:nth-child(3) {
	width: 100%;
	height: 90%;
}
.stage-300x180 .panel:nth-child(3) {
	height: calc(100% + 40px);
}
.stage-300x600 .panel:nth-child(3) {
	height: calc(100% + 40px);
}
.stage-468x60 .panel:nth-child(3) {
	width: 120%;
	width: calc(100% + 45px);
	max-width: 458px;
	height: 90%;
	height: calc(100% - 5px);
}
.stage-640x480 .panel:nth-child(3) {
	width: 105%;
	width: calc(100% + 60px);
	max-width: 740px;
	height: 105%;
	height: calc(100% + 10px);
	max-height: 285px;
}
.stage-728x90 .panel:nth-child(3) {
	width: 120%;
	width: calc(100% + 45px);
	max-width: 708px;
	height: 90%;
	height: calc(100% - 18px);
}
.stage-800x250 .panel:nth-child(3) {
	width: 120%;
	width: calc(100% + 53px);
	max-width: 760px;
	height: 90%;
	height: calc(100% - 18px);
}
.stage-800x600 .panel:nth-child(3) {
	width: 105%;
	width: calc(100% + 60px);
	max-width: 760px;
	height: 115%;
	height: calc(100% + 30px);
	max-height: 405px;
}
.stage-842x250 .panel:nth-child(3) {
	width: 120%;
	width: calc(100% + 53px);
	max-width: 802px;
	height: 90%;
	height: calc(100% - 18px);
}
.stage-970x90 .panel:nth-child(3) {
	width: 120%;
	width: calc(100% + 45px);
	max-width: 780px;
	height: 90%;
	height: calc(100% - 18px);
}



/* PANELS GROW TO TEXTBOX SIZE AND SHRINK OUT OF EXISTENCE */

.panel_animation1 .panel {
	animation: panels-grow-shrink both;
}

.panel_animation1 .panel:nth-child(1) {
	animation-delay: 1.5s;
	animation-duration: 4.5s;
}

.panel_animation1 .panel:nth-child(2) {
	animation-delay: 1.25s;
	animation-duration: 5s;
}

.panel_animation1 .panel:nth-child(3) {
	animation-delay: 1s;
	animation-duration: 5.5s;
}

.panel_animation1 .telekom_tag {
	animation: fade-in-out 5s 1s both;
}


/* PANELS GROW TO TEXTBOX SIZE AND THEN SHRINK T-LOGO SIZE */

.stage-300x250 .panel_animation2 {
	animation: resize-300x250 1s 5s both;
}

.panel_animation2 .panel {
	animation: panels-grow backwards;
}

.panel_animation2 .panel:nth-child(1) {
	animation-delay: 1.5s;
	animation-duration: 1s;
}

.panel_animation2 .panel:nth-child(2) {
	animation-delay: 1.25s;
	animation-duration: 1s;
}

.panel_animation2 .panel:nth-child(3) {
	animation-delay: 1s;
	animation-duration: 1s;
}

.stage-120x250 .panel_container.panel_animation2 .telekom_tag,
.stage-160x600 .panel_container.panel_animation2 .telekom_tag,
.stage-300x250 .panel_container.panel_animation2 .telekom_tag,
.stage-300x600 .panel_container.panel_animation2 .telekom_tag,
.stage-336x280 .panel_container.panel_animation2 .telekom_tag,
.stage-800x250 .panel_container.panel_animation2 .telekom_tag,
.stage-842x250 .panel_container.panel_animation2 .telekom_tag {
	animation-delay: 2s;
	opacity: 0;
}

.stage-180x150 .panel_container .telekom_tag,
.stage-300x180 .panel_container .telekom_tag,
.stage-468x60 .panel_container .telekom_tag,
.stage-728x90 .panel_container .telekom_tag {
	background: #E20074;
}

@keyframes resize-300x250 {
	0% {
		max-height: 250px;
	}
	100% {
		max-height: 40px;
	}
}


/**********************************
FACTS
**********************************/

ul.facts {
	position: absolute;
	font-size: 120%;
	color: #E20074;
	list-style-type: none;
	margin: 0;
	padding: 0;
	line-height: 130%;
}

ul.facts > li {
	animation: fade-in-out both;
	margin-bottom: 5px;
}

ul.facts > li::before {
	content: "\2714" " ";
	margin-left: -1em;
	font-size: 90%;
}

ul.facts.digits > li::before {
	content: "\25A0" " ";
	font-size: 0.6em;
	margin-left: -1.2em;
	vertical-align: 13%;
	letter-spacing: 0.2em;
}

.facts li:nth-child(1) {
	animation-duration: 7.5s;
	animation-delay: 4.5s;
}

.facts li:nth-child(2) {
	animation-duration: 6.5s;
	animation-delay: 5.5s;
}

.facts li:nth-child(3) {
	animation-duration: 5.5s;
	animation-delay: 6.5s;
}







/* PRICE WIPE 
	REQUIRES: wipe.gif
	NOTICE: FOR LONG PRICES LOWER THE ANGLE IN #swipe and @scale animation to -16deg or lower
	SETUP EXAMPLE:
	<div class="wipeprice">169,95<img class="swipe pausable" src="wipe.gif"/></div>
*/


/* PRICE WIPE */

.wipeprice {
	position: relative;
	display: inline-block;
}

.wipeprice .swipe {
	position: absolute;
	top: auto;
	left: 0;
	bottom: 0;
	max-width: 100%;
	transform-origin: 0% 0%;
	transform: rotate(-16deg);
	animation: wipeprice_ani 1.5s 7.8s both;
}

@keyframes wipeprice_ani {
	0% {
		transform: rotate(-16deg) scale(0, 1.5);
	}
	100% {
		transform: rotate(-16deg) scale(1.05, 1.5);
	}
}

/* PRICE WIPE END */








/******** EXPANDABLES (floorad, sky and so on) *****************
	- when the expand event happens, #stage gets added the .expanded class
	- you can simulate expanding on your local computer by adding the expanded class to the stage via firebug
	floorad:	expandable that expands vertical from bottom to top
	sky:		expandable that expands horizontal from right to left
	
	
	style example:
		#stage .device,
		#stage .price {
			display: none;
			animation: none;
		}
		#stage.expanded .device {
			display: block;
			animation: fade-in 1s 1s both, slideInLeft 2s -0.5s forwards;
		}
		#stage.expanded .price {
			display: block;
			animation: fade-in 1s 1.5s both;
			left: 280px;
			top: 91px;
		}
	
	
	floorad body example:
	<div id="stage" class="outline bg_img stage-1200x200 expandable floorad rollover">
		
		<div id="expanded_container" class="container_main">
			<img class="device pausable" src="device.png" alt="device" />
			<div class="device-name pausable">iPhone 7 32 GB</div>
			<div class="price pausable">
				<span class="pre">für </span>
				<strong class="tele_headline">99,95  €<span class="hoverable raised">*</span></strong>
				<!-- line breaks via width --><div class="rate">im&nbsp;Tarif <strong>Magenta</strong>Mobil&nbsp;L mit&nbsp;Top-Smartphone</div>
			</div>
		</div>
		
		<div id="collapsed_container" class="container_main bg_img">
			<img class="chip pausable" src="chip.png" alt="Testsieger" />
			
			
			<div class="tele_headline h1 pausable"><span class="first_line">iPhone 7</span><strong>GROSSARTIGES IM BESTEN NETZ ERLEBEN</strong></div>
			
			
			<div class="button_container">
				<button id="button" class="button-magenta pausable">Jetzt bestellen</button>
			</div>
			
			
			<div class="telekom_tag panel_size_reference pausable">
				<svg class="t_logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 491.1"><g><path d="M1000 325.9H899.6v-99.3H1000V325.9zM700.9 325.9H600.5v-99.3h100.4V325.9zM238.8 23.4v362.7c0 31.3 4.5 52.1 13.4 62.5 7.4 8.2 20.9 13 40.2 14.5h27.9v27.9h-240v-27.9l42.4-2.2c18.6-3.7 30.1-14.5 34.6-32.4 3-8.2 4.5-22.3 4.5-42.4V23.4C121.7 24.9 90 38.3 67 63.6c-23.1 25.3-36.8 63.6-41.3 115L0 174.1 4.5 0h391.7l5.6 174.1 -26.8 4.5c-4.5-51.3-17.9-89.7-40.2-115C311.8 38.3 279.8 24.9 238.8 23.4zM402.9 226.6v99.3H302.5v-99.3H402.9zM100.4 226.6v99.3H1.1v-99.3H100.4z"/></g></svg>
				<svg class="claim" xmlns="http://www.w3.org/2000/svg" viewBox="0 -15.3 1000 86.4"><g><path d="M0 57.7V0.3h36.9v10.5H12.3v12.2h22.2v10.1H12.3v14h24.6v10.5H0z"></path></g><g><path d="M47.4 57.7V0.3h22c4.8-0.3 9.5 1 13.4 3.8 3.8 2.9 5.9 7.5 5.8 12.2 0 3-0.7 6-2.2 8.6 -1.4 2.5-3.5 4.4-6.1 5.7 2.3 0.7 4.2 2.3 5.4 4.4 0.8 1.4 1.4 3 1.6 4.6 0.3 1.8 0.6 5.1 0.9 10 0.1 1.6 0.3 3.3 0.6 4.9 0.3 1.1 0.8 2.2 1.4 3.2H77.2c-0.4-0.9-0.6-1.8-0.8-2.7 0-0.8-0.2-3.5-0.6-8 -0.1-2.2-0.4-4.3-0.9-6.5 -0.3-1.3-1-2.5-1.9-3.5 -1.8-1.4-4-2-6.2-1.8h-7.1v22.5H47.4zM59.7 25.8h6.8c2.8 0.3 5.5-0.5 7.7-2.3 1.3-1.6 1.9-3.6 1.8-5.7 0.2-2.2-0.6-4.4-2.2-5.9 -2-1.5-4.5-2.3-7.1-2.2h-7V25.8L59.7 25.8z"></path></g><g><path d="M99.9 57.7V0.3h12.3V47h22.6v10.7h-34.4H99.9z"></path></g><g><path d="M144 57.7V0.3h36.6v10.5h-24.3v12.2h22.2v10.1h-22.2v14h24.8v10.5H144z"></path></g><g><path d="M191.3 57.7V0.3h20.5c2.9-0.1 5.8 0.2 8.6 0.9 2 0.5 3.9 1.4 5.5 2.8 3.1 2.5 4.9 6.4 4.7 10.4 0.1 5.5-3.4 10.5-8.6 12.3 6.5 1.6 10.9 7.5 10.6 14.1 0.3 5.6-2.4 11-7.1 14 -3.6 2.1-7.7 3.1-11.8 2.9L191.3 57.7 191.3 57.7zM203.6 23.2h5.6c2.2 0.2 4.5-0.3 6.5-1.4 1.5-1.3 2.3-3.2 2.2-5.2 0.2-2.3-1.1-4.5-3.2-5.6 -1.7-0.8-3.5-1.2-5.4-1.3h-5.5v13.7L203.6 23.2zM203.6 47.6h6.6c2.6 0.4 5.3-0.2 7.6-1.5 1.8-1.5 2.8-3.8 2.7-6.2 0.2-2.8-1.2-5.4-3.6-6.7 -2.2-0.9-4.6-1.3-7-1.1h-6.2v15.8L203.6 47.6z"></path></g><g><path d="M242.1 57.7V0.3h36.6v10.5h-24.3v12.2h22.2v10.1h-22.2v14h24.8v10.5H242.1z"></path></g><g><path d="M289.4 57.7V0.3h12.5l18 36.9V0.3h11.8v57.4h-12.3l-18.1-36.9v36.9H289.4z"></path></g><g><path d="M356.7 45.4v9.6c0.1 2.8-0.3 5.5-1.2 8.2 -0.9 2.1-2.3 3.9-4.1 5.2 -2.1 1.5-4.6 2.5-7.2 2.8v-6c3.3-0.9 5.6-4 5.3-7.4h-5.3V45.4H356.7z"></path></g><g><path d="M382.5 0.3h12.4l6.8 39.4 7.4-39.4h11.7l7.3 39.4L435 0.3h12.3l-12.9 57.4h-12.3l-7.2-39.4 -7.1 39.3h-12.5L382.5 0.3z"></path></g><g><path d="M465.6 0.3h12.6l18.2 57.4h-12.8L480 44.8h-16.4L460 57.7h-12.7L465.6 0.3zM466.3 35.6h11.1l-5.5-19.8L466.3 35.6z"></path></g><g><path d="M499.7 40.9h12.4c0.2 1.8 0.7 3.5 1.5 5 1.3 2.2 3.7 3.5 6.3 3.4 2 0.1 4-0.6 5.4-2 1.5-1.3 2.4-3.1 2.4-5.1 0-2.2-1.1-4.3-2.8-5.6 -0.7-0.6-1.5-1.1-2.4-1.5l-5.3-2c-3.7-1.1-7.1-2.8-10.3-5 -4.1-3.1-6.4-7.9-6.3-13 -0.2-4.2 1.4-8.2 4.4-11.2 3.7-3.4 8.5-5.1 13.5-4.8 4.8-0.2 9.6 1.2 13.3 4.2 3.5 3.1 5.7 7.5 6.1 12.2h-12.1c-0.1-1.8-0.8-3.5-2.1-4.8 -1.5-1.3-3.5-1.9-5.4-1.8 -1.7-0.1-3.4 0.4-4.7 1.5 -1.2 1.1-1.8 2.7-1.7 4.3 -0.1 1.9 0.7 3.7 2.2 4.8 2.7 1.7 5.6 3.1 8.6 4 4.1 1.2 7.9 3 11.3 5.5 3.8 3 6 7.6 5.8 12.5 0.2 4.8-1.8 9.4-5.3 12.7 -4.1 3.5-9.5 5.3-14.9 5.1 -6.7 0.4-13-2.9-16.6-8.6C501.3 47.7 500.1 44.3 499.7 40.9z"></path></g><g><path d="M591.6 57.7h-13.7L562.2 0.3h12.9l9.9 41.3 9.9-41.3h12.6L591.6 57.7z"></path></g><g><path d="M614.6 57.7V0.3h36.6v10.5h-24.3v12.2h22.2v10.1h-22.2v14h24.8v10.5H614.6z"></path></g><g><path d="M661.9 57.7V0.3h22c4.8-0.3 9.5 1 13.4 3.8 3.7 3 5.7 7.5 5.4 12.2 0.1 3-0.7 6-2.2 8.6 -1.4 2.5-3.5 4.4-6.1 5.7 2.3 0.7 4.2 2.3 5.4 4.4 0.8 1.4 1.4 3 1.6 4.6 0.3 1.8 0.6 5.1 0.9 10 0.1 1.6 0.3 3.3 0.6 4.9 0.3 1.1 0.8 2.2 1.4 3.2h-12.7c-0.3-0.9-0.5-1.8-0.5-2.7 0-0.8-0.2-3.5-0.6-8 -0.1-2.2-0.4-4.3-0.9-6.5 -0.3-1.3-1-2.5-1.9-3.5 -1.8-1.4-4-2-6.2-1.8h-7.6v22.5H661.9zM674.2 25.9h6.9c2.8 0.3 5.5-0.5 7.7-2.3 1.3-1.6 1.9-3.6 1.8-5.7 0.2-2.2-0.6-4.4-2.2-5.9 -2-1.5-4.5-2.3-7-2.2h-7.1V25.9z"></path></g><g><path d="M714.5 57.7V0.3H735c2.7 0 5.4 0.3 8.1 0.9 2 0.5 3.9 1.4 5.5 2.8 3.1 2.5 4.9 6.4 4.7 10.4 0.1 5.5-3.4 10.5-8.6 12.3 6.7 1.3 11.4 7.3 11.1 14.1 0.3 5.6-2.4 11-7.1 14 -3.6 2.1-7.7 3.1-11.8 2.9L714.5 57.7 714.5 57.7zM726.8 23.2h5.5c2.2 0.2 4.5-0.3 6.5-1.4 1.7-1.3 2.7-3.3 2.6-5.4 0.2-2.3-1.1-4.5-3.2-5.6 -1.8-0.8-3.9-1.1-5.9-1h-5.5v13.7V23.2zM726.8 47.6h6.6c2.6 0.2 5.1-0.4 7.3-1.7 1.6-1.5 2.5-3.7 2.3-5.9 0.2-2.8-1.2-5.4-3.6-6.7 -2.2-0.9-4.6-1.3-7-1.1h-5.7v15.8V47.6z"></path></g><g><path d="M767.4 57.7V0.3h12.3v57.4H767.4z"></path></g><g><path d="M791.3 57.7V0.3h12l18 36.9V0.3h11.8v57.4h-11.9l-17.9-36.9v36.9H791.3z"></path></g><g><path d="M845 57.7V0.3h17.7c6.7-0.4 13.3 1.8 18.3 6.2 6 5.8 9.1 14 8.6 22.3 0.5 8.2-2.3 16.2-7.7 22.3 -2.6 2.8-6 4.7-9.7 5.6 -3 0.7-6.1 1-9.1 0.9h-17.7H845zM857.3 47.2h5.5c3.4 0.3 6.8-0.7 9.4-2.9 3.4-4.3 5.1-9.8 4.6-15.3 0.3-4.8-1.1-9.6-3.9-13.6 -2.6-3.1-6.6-4.7-10.6-4.4h-5.2v36.2H857.3z"></path></g><g><path d="M898.8 57.7V0.3h36.6v10.5h-24.3v12.2h22.2v10.1h-22.2v14h24.8v10.5H898.8z"></path></g><g><path d="M956.9 57.7V10.8H943V0.3h40.2v10.5h-14v46.8H956.9L956.9 57.7z"></path></g><g><path d="M1000 45.4v12.3h-12.6V45.4H1000z"></path></g></svg>
			</div>
			
			<div class="full-size infotext" id="infotext">
				<span>* Monatlicher Grundpreis 74,95 €; bei Online-Abschluss eines Neuvertrages bis 31.03.2017 wird der monatliche Grundpreis des jeweiligen Tarifes für die ersten 24 Monate um 10% reduziert. Bereitstellungspreis 29,95 €. Mindestlaufzeit 24 Monate. Ab einem Datenvolumen von 6 GB wird die Bandbreite im jeweiligen Monat auf max. 64 kbit/s (Download) und 16 kbit/s (Upload) beschränkt. Die HotSpot Flatrate gilt für die Nutzung an inländischen HotSpots der Telekom Deutschland GmbH. Kostenloser Testmonat umfasst 31 Tage die Option DayFlat unlimited ab Tarifaktivierung. Nach Ablauf der 31 Tage gilt das Datenvolumen im jeweiligen Tarif. </span>
			</div>
			
		</div>
		
		<div id="adf_close_button_expanded" class="xo_button down">Schließen&nbsp;</div>
		<div id="adf_expand_button" class="xo_button up">Öffnen&nbsp;</div>
		<div id="close_btn" class="default_img"></div>
	</div>
	
	
	sky body example:
	<div id="stage" class="outline stage-120x600 expandable sky">
		
		<img src="bg.jpg" class="bg_img pausable" />
        
        <div class="panel_container panel_animation2 panel_bottom">
			<div class="panel"></div>
			<div class="panel"></div>
			<div class="panel"></div>
			<img class="pausable" id="device" src="device.png" />
			<div class="tele_headline h1 pausable"><strong>Für<br />alle,<br />die<br />familie<br />sind</strong></div>
			
			
			<div class="telekom_tag pausable">
				<svg class="t_logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 491.1"><g><path d="M1000 325.9H899.6v-99.3H1000V325.9zM700.9 325.9H600.5v-99.3h100.4V325.9zM238.8 23.4v362.7c0 31.3 4.5 52.1 13.4 62.5 7.4 8.2 20.9 13 40.2 14.5h27.9v27.9h-240v-27.9l42.4-2.2c18.6-3.7 30.1-14.5 34.6-32.4 3-8.2 4.5-22.3 4.5-42.4V23.4C121.7 24.9 90 38.3 67 63.6c-23.1 25.3-36.8 63.6-41.3 115L0 174.1 4.5 0h391.7l5.6 174.1 -26.8 4.5c-4.5-51.3-17.9-89.7-40.2-115C311.8 38.3 279.8 24.9 238.8 23.4zM402.9 226.6v99.3H302.5v-99.3H402.9zM100.4 226.6v99.3H1.1v-99.3H100.4z"/></g></svg>
				<svg class="claim" xmlns="http://www.w3.org/2000/svg" viewBox="0 -15.3 1000 86.4"><g><path d="M0 57.7V0.3h36.9v10.5H12.3v12.2h22.2v10.1H12.3v14h24.6v10.5H0z"></path></g><g><path d="M47.4 57.7V0.3h22c4.8-0.3 9.5 1 13.4 3.8 3.8 2.9 5.9 7.5 5.8 12.2 0 3-0.7 6-2.2 8.6 -1.4 2.5-3.5 4.4-6.1 5.7 2.3 0.7 4.2 2.3 5.4 4.4 0.8 1.4 1.4 3 1.6 4.6 0.3 1.8 0.6 5.1 0.9 10 0.1 1.6 0.3 3.3 0.6 4.9 0.3 1.1 0.8 2.2 1.4 3.2H77.2c-0.4-0.9-0.6-1.8-0.8-2.7 0-0.8-0.2-3.5-0.6-8 -0.1-2.2-0.4-4.3-0.9-6.5 -0.3-1.3-1-2.5-1.9-3.5 -1.8-1.4-4-2-6.2-1.8h-7.1v22.5H47.4zM59.7 25.8h6.8c2.8 0.3 5.5-0.5 7.7-2.3 1.3-1.6 1.9-3.6 1.8-5.7 0.2-2.2-0.6-4.4-2.2-5.9 -2-1.5-4.5-2.3-7.1-2.2h-7V25.8L59.7 25.8z"></path></g><g><path d="M99.9 57.7V0.3h12.3V47h22.6v10.7h-34.4H99.9z"></path></g><g><path d="M144 57.7V0.3h36.6v10.5h-24.3v12.2h22.2v10.1h-22.2v14h24.8v10.5H144z"></path></g><g><path d="M191.3 57.7V0.3h20.5c2.9-0.1 5.8 0.2 8.6 0.9 2 0.5 3.9 1.4 5.5 2.8 3.1 2.5 4.9 6.4 4.7 10.4 0.1 5.5-3.4 10.5-8.6 12.3 6.5 1.6 10.9 7.5 10.6 14.1 0.3 5.6-2.4 11-7.1 14 -3.6 2.1-7.7 3.1-11.8 2.9L191.3 57.7 191.3 57.7zM203.6 23.2h5.6c2.2 0.2 4.5-0.3 6.5-1.4 1.5-1.3 2.3-3.2 2.2-5.2 0.2-2.3-1.1-4.5-3.2-5.6 -1.7-0.8-3.5-1.2-5.4-1.3h-5.5v13.7L203.6 23.2zM203.6 47.6h6.6c2.6 0.4 5.3-0.2 7.6-1.5 1.8-1.5 2.8-3.8 2.7-6.2 0.2-2.8-1.2-5.4-3.6-6.7 -2.2-0.9-4.6-1.3-7-1.1h-6.2v15.8L203.6 47.6z"></path></g><g><path d="M242.1 57.7V0.3h36.6v10.5h-24.3v12.2h22.2v10.1h-22.2v14h24.8v10.5H242.1z"></path></g><g><path d="M289.4 57.7V0.3h12.5l18 36.9V0.3h11.8v57.4h-12.3l-18.1-36.9v36.9H289.4z"></path></g><g><path d="M356.7 45.4v9.6c0.1 2.8-0.3 5.5-1.2 8.2 -0.9 2.1-2.3 3.9-4.1 5.2 -2.1 1.5-4.6 2.5-7.2 2.8v-6c3.3-0.9 5.6-4 5.3-7.4h-5.3V45.4H356.7z"></path></g><g><path d="M382.5 0.3h12.4l6.8 39.4 7.4-39.4h11.7l7.3 39.4L435 0.3h12.3l-12.9 57.4h-12.3l-7.2-39.4 -7.1 39.3h-12.5L382.5 0.3z"></path></g><g><path d="M465.6 0.3h12.6l18.2 57.4h-12.8L480 44.8h-16.4L460 57.7h-12.7L465.6 0.3zM466.3 35.6h11.1l-5.5-19.8L466.3 35.6z"></path></g><g><path d="M499.7 40.9h12.4c0.2 1.8 0.7 3.5 1.5 5 1.3 2.2 3.7 3.5 6.3 3.4 2 0.1 4-0.6 5.4-2 1.5-1.3 2.4-3.1 2.4-5.1 0-2.2-1.1-4.3-2.8-5.6 -0.7-0.6-1.5-1.1-2.4-1.5l-5.3-2c-3.7-1.1-7.1-2.8-10.3-5 -4.1-3.1-6.4-7.9-6.3-13 -0.2-4.2 1.4-8.2 4.4-11.2 3.7-3.4 8.5-5.1 13.5-4.8 4.8-0.2 9.6 1.2 13.3 4.2 3.5 3.1 5.7 7.5 6.1 12.2h-12.1c-0.1-1.8-0.8-3.5-2.1-4.8 -1.5-1.3-3.5-1.9-5.4-1.8 -1.7-0.1-3.4 0.4-4.7 1.5 -1.2 1.1-1.8 2.7-1.7 4.3 -0.1 1.9 0.7 3.7 2.2 4.8 2.7 1.7 5.6 3.1 8.6 4 4.1 1.2 7.9 3 11.3 5.5 3.8 3 6 7.6 5.8 12.5 0.2 4.8-1.8 9.4-5.3 12.7 -4.1 3.5-9.5 5.3-14.9 5.1 -6.7 0.4-13-2.9-16.6-8.6C501.3 47.7 500.1 44.3 499.7 40.9z"></path></g><g><path d="M591.6 57.7h-13.7L562.2 0.3h12.9l9.9 41.3 9.9-41.3h12.6L591.6 57.7z"></path></g><g><path d="M614.6 57.7V0.3h36.6v10.5h-24.3v12.2h22.2v10.1h-22.2v14h24.8v10.5H614.6z"></path></g><g><path d="M661.9 57.7V0.3h22c4.8-0.3 9.5 1 13.4 3.8 3.7 3 5.7 7.5 5.4 12.2 0.1 3-0.7 6-2.2 8.6 -1.4 2.5-3.5 4.4-6.1 5.7 2.3 0.7 4.2 2.3 5.4 4.4 0.8 1.4 1.4 3 1.6 4.6 0.3 1.8 0.6 5.1 0.9 10 0.1 1.6 0.3 3.3 0.6 4.9 0.3 1.1 0.8 2.2 1.4 3.2h-12.7c-0.3-0.9-0.5-1.8-0.5-2.7 0-0.8-0.2-3.5-0.6-8 -0.1-2.2-0.4-4.3-0.9-6.5 -0.3-1.3-1-2.5-1.9-3.5 -1.8-1.4-4-2-6.2-1.8h-7.6v22.5H661.9zM674.2 25.9h6.9c2.8 0.3 5.5-0.5 7.7-2.3 1.3-1.6 1.9-3.6 1.8-5.7 0.2-2.2-0.6-4.4-2.2-5.9 -2-1.5-4.5-2.3-7-2.2h-7.1V25.9z"></path></g><g><path d="M714.5 57.7V0.3H735c2.7 0 5.4 0.3 8.1 0.9 2 0.5 3.9 1.4 5.5 2.8 3.1 2.5 4.9 6.4 4.7 10.4 0.1 5.5-3.4 10.5-8.6 12.3 6.7 1.3 11.4 7.3 11.1 14.1 0.3 5.6-2.4 11-7.1 14 -3.6 2.1-7.7 3.1-11.8 2.9L714.5 57.7 714.5 57.7zM726.8 23.2h5.5c2.2 0.2 4.5-0.3 6.5-1.4 1.7-1.3 2.7-3.3 2.6-5.4 0.2-2.3-1.1-4.5-3.2-5.6 -1.8-0.8-3.9-1.1-5.9-1h-5.5v13.7V23.2zM726.8 47.6h6.6c2.6 0.2 5.1-0.4 7.3-1.7 1.6-1.5 2.5-3.7 2.3-5.9 0.2-2.8-1.2-5.4-3.6-6.7 -2.2-0.9-4.6-1.3-7-1.1h-5.7v15.8V47.6z"></path></g><g><path d="M767.4 57.7V0.3h12.3v57.4H767.4z"></path></g><g><path d="M791.3 57.7V0.3h12l18 36.9V0.3h11.8v57.4h-11.9l-17.9-36.9v36.9H791.3z"></path></g><g><path d="M845 57.7V0.3h17.7c6.7-0.4 13.3 1.8 18.3 6.2 6 5.8 9.1 14 8.6 22.3 0.5 8.2-2.3 16.2-7.7 22.3 -2.6 2.8-6 4.7-9.7 5.6 -3 0.7-6.1 1-9.1 0.9h-17.7H845zM857.3 47.2h5.5c3.4 0.3 6.8-0.7 9.4-2.9 3.4-4.3 5.1-9.8 4.6-15.3 0.3-4.8-1.1-9.6-3.9-13.6 -2.6-3.1-6.6-4.7-10.6-4.4h-5.2v36.2H857.3z"></path></g><g><path d="M898.8 57.7V0.3h36.6v10.5h-24.3v12.2h22.2v10.1h-22.2v14h24.8v10.5H898.8z"></path></g><g><path d="M956.9 57.7V10.8H943V0.3h40.2v10.5h-14v46.8H956.9L956.9 57.7z"></path></g><g><path d="M1000 45.4v12.3h-12.6V45.4H1000z"></path></g></svg>
			</div>
			
			
			<div class="text pausable">Mit jeder Family Card monatlich sparen!</div>
			


			<div class="device-name leftalign pausable">Samsung Galaxy S7 (32 GB)</div>

			<div class="price leftalign pausable">
				<span class="pre">nur&nbsp;</span>
				<strong class="tele_headline">1 €<span class="hoverable raised">*</span></strong>
				<div class="rate">im&nbsp;Tarif Family Card S mit Top-Smartphone</div>
			</div>

			<button class="button-grey leftalign pausable">Jetzt zugreifen!</button>


			<div class="full-size infotext" id="infotext">
				<span>* Der Endgerätepreis gilt in Verbindung mit der Buchung einer neuen Family Card S–L mit Smartphone oder Top-Smartphone in der Zeit vom 30.01. bis 28.02.2017. Voraussetzung ist ein bestehender Telekom Mobilfunk-Laufzeitvertrag mit einem monatlichen Grundpreis von mindestens 29,95 €/Monat. Der monatliche Grundpreis beträgt aktionsweise bei Buchung bis 31.03.2017 in den ersten 24 Monaten 39,95 € (mit Top-Smartphone), ab dem 25. Monat 44,95 € (mit Top-Smartphone). Bereitstellungspreis 29,95 €. Mindestlaufzeit 24 Monate. Im monatlichen Grundpreis sind eine Telefon- und eine SMS-Flatrate in alle dt. Netze enthalten. Ab einem Datenvolumen von 1 GB wird die Bandbreite im jeweiligen Monat auf max. 64 KBit/s (Download) und 16 KBit/s (Upload) beschränkt. Die HotSpot Flatrate gilt für die Nutzung an inländischen HotSpots der Telekom Deutschland GmbH. Zudem beinhaltet der Tarif die Option All Inclusive. Bei Wegfall des Telekom Mobilfunk-Laufzeitvertrags gelten für die Family Card S (ohne Smartphone/mit Smartphone/mit Top-Smartphone) die Konditionen des Tarifs MagentaMobil S (ohne Smartphone/mit Smartphone/mit Top-Smartphone). Pro bestehenden Telekom Mobilfunk-Laufzeit vertrag dürfen max. 4 Family Cards bzw. CombiCards Data zugebucht werden ausgenommen MagentaMobil Start). Kostenloser Testmonat umfasst 31 Tage die Option DayFlat unlimited ab Tarifaktivierung. Nach Ablauf der 31 Tage gilt das Datenvolumen im jeweiligen Tarif. Kostenloser Testmonat der DayFlat unlimited gilt für Neukunden sowie für Bestandskunden bei erstmaligem Vertragsabschluss eines Family Card Tarifs.</span>
			</div>
		</div>
        
		
		
        <div class="blinkybox"><div class="arrow_left"></div></div>
		
		<div id="adf_close_button_expanded" class="xo_button right">Schließen&nbsp;</div>
		<div id="adf_expand_button" class="xo_button left">Öffnen&nbsp;</div>
    </div>
***************************************************************/

.expandable {
	position:relative;
	top:	0;
	left:	0;
	right:	auto;
	bottom:	auto;
	z-index:5010;
}

/* EXPANDABLE BUTTONS */
#close_btn {
	position: absolute;
	top: 10px;
	z-index:5040;
}
#adf_expand_button {
	position: absolute;
	top: 10px;
	z-index:5030;
	
	display: block;
}
#adf_close_button_expanded {
	position: absolute;
	top: 10px;
	z-index:5020;
	
	display: none;
}
.expanded #adf_expand_button {
	display: none;
}
.expanded #adf_close_button_expanded {
	display: block;
}

#close_btn.default_img::after {
	content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAWCAYAAAAvg9c4AAAAjklEQVQ4je3VwQmAIBiG4XeADs7QCg7iyQ0c10k6BA0gdPA3vGglf3TxA4mCHlI/EnIMsCqMRTwCkBRHANgAh04csCO6ZtJEm6gFIrludYw8tyNoqVoNF/CqzlsUwJMrUr4syr3vvPNoTa1ASa6taf+LFlBt+p7+RrXgW7RXqSF0NBPV/0kf8NFxAsoH3wlx2my+ky4vYwAAAABJRU5ErkJggg==);
}
.xo_button {
	position: absolute;
	
	border-radius: 3px;
	border: 1px black solid;

	color: #000;
	width: auto;
	text-align: center;
	padding: 5px 7px;
	font-weight: bold;
	
	font-size: 14px;
	background: #FFF;
}
.xo_button:hover {
	background: #DDD;
}
.xo_button.left::after {
	content: "\2190";
}
.xo_button.up::after {
	content: "\2191";
}
.xo_button.right::after {
	content: "\2192";
}
.xo_button.down::after {
	content: "\2193";
}
.xo_button.close::after {
	content: "\2716";
}




/*** FLOOR AD SPECIFIC ***/
#stage.floorad {
	transition: height 1s linear;
	top: auto;
	bottom: 0;
}
/* CHANGE THIS INLINE FOR CUSTOM HEIGHT */
#stage.floorad.expanded {
	height: 400px;
}
#stage.expandable.floorad {
	width:	100%;
	bottom:	0;
}
#stage.expandable.floorad::before {
	border-left:	none;
	border-right:	none;
	border-bottom:	none;
}
.floorad #close_btn {
	left: 50%;
	right: auto;
	transform: translateX( 570px );
}
.floorad #adf_expand_button,
.floorad #adf_close_button_expanded {
	left: auto;
	right: 50%;
	transform: translateX( 560px );
}
.floorad.rollover #adf_expand_button,
.floorad.rollover #adf_close_button_expanded {
	display: none;
}


/* OPTIONAL */
.floorad .container_main {
	width: 800px;
	height: 200px;
	
	position: absolute;
	
	left: 50%;
	transform: translateX(-50%);
}
.floorad .claim {
	bottom: 17px;
	right: 12px;
	width: 202px;
	height: 19px;
}
.floorad .t_logo {
	left: 20px;
	bottom: 12px;
	width: 76px;
	height: 38px;
}
.floorad #collapsed_container {
	bottom: 0px;
	background-color: #FFF;
}
.floorad #expanded_container {
	top: 0px;
}




/*** SKY SPECIFIC ***/
#stage.sky {
	transition: width 1s linear;
	left: auto;
	right: 0;
}
/* CHANGE THIS INLINE FOR CUSTOM HEIGHT */
#stage.sky.expanded {
	width: 560px;
}
.sky #close_btn {
	display: none;
}
.sky #adf_expand_button,
.sky #adf_close_button_expanded {
	left: auto;
	right: 10px;
}
.sky.rollover #adf_expand_button,
.sky.rollover #adf_close_button_expanded {
	display: none;
}



/******************************************************************
	EXPANDABLES - END
******************************************************************/













/* MICROSOFT EDGE ANIMATION SKIP BUG FIX */
.hoverable {
	display: inline-block;
	pointer-events: visible !important;/* useful when you want to turn of pointer events for everything else around it */
}
/* MICROSOFT EDGE ANIMATION SKIP BUG FIX END */

.pausable {}

.pausable.paused {
	animation-play-state: paused !important;
}




/* APPLE BANNER EXTRAS */

.stage-468x60.apple .telekom_tag,
.stage-728x90.apple .telekom_tag {
	animation: none;
	opacity: 1;
	background-color: transparent;
}
.stage-728x90.apple .t_logo {
	top: 0px;
	width: 90px;
	height: 45px;
}
.stage-468x60.apple .claim,
.stage-728x90.apple .claim {
	display: none;
}





/* --- generic telekom animations --- */

@keyframes button-click {
	50% {
		background-color: #c00063;
	}
}

@keyframes button-click-grey {
	50% {
		background-color: #cacaca;
	}
}


@keyframes shrink-in {
	0% {
		transform: scale(10) rotate(10deg);
		/*opacity: 0; conflicts with fade-in-out*/
	}
	100% {
		transform: scale(1) rotate(-7.5deg);
		/*opacity: 1; conflicts with fade-in-out*/
	}
}

@keyframes panels-grow-shrink {
	from,
	to {
		transform: scale(0);
	}
	20%,
	80% {
		transform: scale(1);
	}
}

@keyframes panels-grow {
	from {
		transform: scale(0);
	}
	to {
		transform: scale(1);
	}
}

@keyframes panels-shrink {
	from {
		transform: scale(1);
	}
	to {
		transform: scale(0);
	}
}

@keyframes callout-grow {
	from {
		transform: scale(0) rotate(-7.5deg);
	}
	to {
		transform: scale(1) rotate(-7.5deg);
	}
}

@keyframes callout-shrink {
	from {
		transform: scale(1) rotate(-7.5deg);
	}
	to {
		transform: scale(0) rotate(-7.5deg);
	}
}

@keyframes fade-in {
	from {
		opacity: 0;
		visibility: hidden;
	}
	to {
		opacity: 1;
		visibility: visible;
	}
}

@keyframes fade-out {
	from {
		visibility: visible;
		opacity: 1;
	}
	to {
		visibility: hidden;
		opacity: 0;
	}
}


/*
EDGE BUG NOTICE: FADE IN OUT
IN EDGE THE FADE-IN-OUT SOMETIMES IS BUGGED ( LAST STATE IS NOT PAUSABLE, KEEPS PLAYING TOWARDS LAST STATE EVEN WHEN PAUSED )
IN THAT CASE REPLACE FADE-IN-OUT 
for example:
fade-in-out 6s 8s both
BY:
fade-in 1s 8s both, fade-out 1s 13s
NOTE: fade-in is easy, just same delay as fade-in-out and a standard 1s. fade-out you have to calculate the delay with this formula:
fade-in-out-delay (+8) +fade-in-out-duration (+6) -fade-out-duration (-1)
*/

@keyframes fade-in-out {
	from,
	to {
		opacity: 0;
		visibility: hidden;
	}
	10%,
	90% {
		opacity: 1;
		visibility: visible;
	}
}


/*
EDGE BUG NOTICE: FADE IN OUT END
*/

@keyframes fade-out-in {
	from,
	to {
		opacity: 1;
		visibility: visible;
	}
	10%,
	90% {
		opacity: 0;
		visibility: hidden;
	}
}

@keyframes slideInLeft {
	from {
		transform: translate(-200%, 0);
	}
	to {
		transform: translate(0, 0);
	}
}

@keyframes slideOutLeft {
	from {
		transform: translate(0, 0);
	}
	to {
		transform: translate(-200%, 0);
	}
}

@keyframes slideInRight {
	from {
		transform: translate(200%, 0);
	}
	to {
		transform: translate(0, 0);
	}
}

@keyframes slideOutRight {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(200%, 0, 0);
	}
}

@keyframes slideInBottom {
	from {
		transform: translate3d(0, 100vh, 0);
	}
	to {
		transform: translate3d(0, 0, 0);
	}
}

@keyframes slideOutBottom {
	from {
		transform: translate3d(0, 0%, 0);
	}
	to {
		transform: translate3d(0, 200%, 0);
	}
}

@keyframes bounceIn {
	from,
	20%,
	40%,
	60%,
	80%,
	to {
		animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	}
	0% {
		opacity: 0;
		transform: scale3d(.3, .3, .3);
	}
	20% {
		transform: scale3d(1.1, 1.1, 1.1);
	}
	40% {
		transform: scale3d(.9, .9, .9);
	}
	60% {
		opacity: 1;
		transform: scale3d(1.03, 1.03, 1.03);
	}
	80% {
		transform: scale3d(.97, .97, .97);
	}
	to {
		opacity: 1;
		transform: scale3d(1, 1, 1);
	}
}

@keyframes puffIn {
	0% {
		opacity: 0;
		transform: scale(2, 2);
		filter: blur(2px);
	}
	100% {
		opacity: 1;
		transform: scale(1, 1);
		filter: blur(0px);
	}
}

@keyframes puffOut {
	0% {
		opacity: 1;
		transform-origin: 50% 50%;
		transform: scale(1,1);
		filter: blur(0px);
	}
	
	100% {
		opacity: 0;
		transform-origin: 50% 50%;
		transform: scale(2,2);
		filter: blur(2px);
	}
}


@keyframes tinDownIn {
	0% {
	opacity: 0;
	transform: scale(1, 1) translateY(900%);
	}

	50%, 70%, 90% {
	opacity: 1;
	transform: scale(1.1, 1.1) translateY(0);
	}

	60%, 80%, 100% {
	opacity: 1;
	transform: scale(1, 1) translateY(0);
	}
}


@keyframes spaceInRight {
	0% {
		opacity: 0;
		transform-origin: 100% 50%;
		transform: scale(0.2) translate(200%, 0%);
	}

	100% {
		opacity: 1;
		transform-origin: 100% 50%;
		transform: scale(1) translate(0%, 0%);
	}
}

@keyframes tinUpIn {
	0% {
		opacity: 0;
		transform: scale(1, 1) translateY(-900%);
	}

	50%, 70%, 90% {
		opacity: 1;
		transform: scale(1.1, 1.1) translateY(0);
	}

	60%, 80%, 100% {
		opacity: 1;
		transform: scale(1, 1) translateY(0);
	}
}




@keyframes fadeInLeft {
	from {
		opacity: 0;
		transform: translate3d(-100%, 0, 0);
	}

	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}




@keyframes fadeInRight {
	from {
	opacity: 0;
	transform: translate3d(180%, 0, 0);
	}

	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}



@keyframes shake {
	from, to {
		transform: translate3d(0, 0, 0);
	}

	10%, 30%, 50%, 70%, 90% {
		transform: translate3d(-3px, 0, 0);
	}

	20%, 40%, 60%, 80% {
		transform: translate3d(3px, 0, 0);
	}
}












/*******************************************************************
	CHROME FIXES:
*******************************************************************/

/* Chrome 29+ */
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm) {
	
	/*
		BLUR IS SET TO WEBKIT BECAUSE IT HAS TO BE APPLIED
		ONLY FOR WEBKIT BROWSER BECAUSE OF ROUNDED BORDER PIXEL BUG 
	*/
	.callout::before {
		-webkit-filter:	blur(0.01px);
	}
}
/* Chrome 22-28 */
/* REMOVE BECAUSE NODEJS CANT BUILD (q_q)
@media screen and(-webkit-min-device-pixel-ratio:0) {
	.callout::before {-chrome-:only(; 
		-webkit-filter:	blur(0.01px);
	);} 
}*/


/********************************************************************
	IE 10+ FIXES:
********************************************************************/

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	
	.callout.flip_callout > .backside {
		transform: translateX( -50% ) translateY( -50% ) scale(-1);/* THIS PROBLEM IS ONLY VISIBLE AFTER BUILDING!!!!!!!!*/
	}
	
	/* REQUIRED FOR 3D FLIP TEASER */
	div, header, span, img, p, a, button {
		-webkit-backface-visibility: hidden;
		transform: translateZ(0);
	}

}
/********************************************************************
	EDGE SPECIFIC: (WORKS ONLY WITH CSSLINTIGNORE)
********************************************************************/
/*
@supports (-ms-ime-align:auto) {
	.canvas_hull { background: #000; }
}
@supports (-ms-accelerator:true) {
	.canvas_hull { background: #000; }
}
*/
/********************************************************************
	SAFARI FIXES:(WORKS ONLY WITH CSSLINTIGNORE)
********************************************************************/
/* Safari 6.1+ (10.0 is the latest version of Safari at this time) */
/*
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0){ @media {
		.hoverable {
		pointer-events:	none;
		\* for testing: 
				color:#0000FF;
				background-color:#FFCC00;
		 for testing end *\
		}
	.hoverable.safari {
		pointer-events:	visible;
		\* for testing: 
				color:#FF00CC;
				background-color:#00CCFF;
		 for testing end *\
	}
}}
*/
/* Safari 10.0+ 

_::-webkit-:host:not(:root:root), .safari_only {

	color:#0000FF; 
	background-color:#CCCCCC; 

}
*/