@charset "utf-8";
/* CSS Document */

body {margin:0;padding:0;font-family:minion-pro, serif;}

#banner-body {position:relative;overflow:hidden;width:728px;height:90px;margin:0 auto;background-color:#fffaec;}


/* Frame 1 */

#bg-border {
	z-index:20;position:absolute;border:3px solid #f1886a;
	-webkit-animation-name:bg-border;-webkit-animation-duration:1s;-webkit-animation-delay:0s;-webkit-animation-fill-mode:both; 
	animation-name:bg-border;animation-duration:1s;animation-delay:0s;animation-fill-mode:both; 
}	
@-webkit-keyframes bg-border {
	0%{opacity:0;width:758px;height:114px;left:-15px;top:-15px;}
	100%{opacity:1;width:722px;height:84px;left:0;top:0;}
}
@keyframes bg-border {
	0%{opacity:0;width:758px;height:110px;left:-15px;top:-15px;}
	100%{opacity:1;width:722px;height:84px;left:0;top:0;}
}
#bg-1 {
	z-index:1;position:absolute;background-color:#fffaec;width:728px;height:90px;top:0;left:0;
	-webkit-animation-name:bg;-webkit-animation-duration:1s;-webkit-animation-delay:0s;-webkit-animation-fill-mode:both; 
	animation-name:bg;animation-duration:1s;animation-delay:0s;animation-fill-mode:both; 
}	
@-webkit-keyframes bg {
	0%{opacity:0;}
	100%{opacity:1;}
}
@keyframes bg {
	0%{opacity:0;}
	100%{opacity:1;}
}
#logo {
	z-index:15;opacity:1;position:absolute;width:55px;height:43px;left:15px;background-image:url("../img/logo.jpg");background-size:100% auto;background-position:center center;
	-webkit-animation-name:logo;-webkit-animation-duration:0.5s;-webkit-animation-delay:0s;-webkit-animation-fill-mode:both;
	animation-name:logo;animation-duration:0.5s;animation-delay:0s;animation-fill-mode:both;
}
@-webkit-keyframes logo {
	0%{top:-60px;}
	100%{top:3px;}
} 	
@keyframes logo {
	0%{top:-60px;}
	100%{top:3px;}
}
#img {
	z-index:2;position:absolute;width:85px;height:84px;right:80px;background-image:url("../img/img.png");background-size:100% auto;background-position:center center;
	-webkit-animation-name:img;-webkit-animation-duration:0.5s;-webkit-animation-delay:0.5s;-webkit-animation-fill-mode:both;
	animation-name:img;animation-duration:0.5s;animation-delay:0.5s;animation-fill-mode:both;
}
@-webkit-keyframes img {
	0%{opacity:0;bottom:-90px;}
	100%{opacity:1;bottom:3px;}
} 	
@keyframes img {
	0%{opacity:0;bottom:-90px;}
	100%{opacity:1;bottom:3px;}
}
#headline-orange {
	z-index:2;opacity:1;position:absolute;width:400px;height:35px;left:150px;
	-webkit-animation-name:headline-orange;-webkit-animation-duration:1s;-webkit-animation-delay:1s;-webkit-animation-fill-mode:both;
	animation-name:headline-orange;animation-duration:1s;animation-delay:1s;animation-fill-mode:both;
	font-size:35px;line-height:35px;color:#f1886a;text-align:left;font-weight:400;font-style:normal;
}
@-webkit-keyframes headline-orange {
	0%{top:-40px;}
	100%{top:15px;}
} 	
@keyframes headline-orange {
	0%{top:-40px;}
	100%{top:15px;}
}
#headline-red {
	z-index:2;opacity:1;position:absolute;width:400px;height:35px;left:230px;
	-webkit-animation-name:headline-red;-webkit-animation-duration:1s;-webkit-animation-delay:1s;-webkit-animation-fill-mode:both;
	animation-name:headline-red;animation-duration:1s;animation-delay:1s;animation-fill-mode:both;
	font-size:35px;line-height:35px;color:#ce001d;text-align:left;font-weight:400;font-style:normal;
}
@-webkit-keyframes headline-red {
	0%{bottom:-40px;}
	100%{bottom:10px;}
} 	
@keyframes headline-red {
	0%{bottom:-40px;}
	100%{bottom:10px;}
}


/* Frame 2 */

#bg-2 {
	z-index:5;position:absolute;background-color:#fffaec;width:728px;height:90px;top:0;left:0;
	-webkit-animation-name:bg;-webkit-animation-duration:0.5s;-webkit-animation-delay:2.5s;-webkit-animation-fill-mode:both; 
	animation-name:bg;animation-duration:0.5s;animation-delay:2.5s;animation-fill-mode:both; 
}
#book {
	z-index:6;position:absolute;background-image:url("../img/book.png");background-size:100% auto;background-position:center center;
	-webkit-animation-name:book;-webkit-animation-duration:1s;-webkit-animation-delay:3s;-webkit-animation-fill-mode:both;
	animation-name:book;animation-duration:1s;animation-delay:3s;animation-fill-mode:both;
}
@-webkit-keyframes book {
	0%{opacity:0;width:37px;height:50px;top:1px;right:100px;}
	100%{opacity:1;width:100px;height:135px;top:-24px;right:100px;}
} 	
@keyframes book {
	0%{opacity:0;width:37px;height:50px;top:1px;right:100px;}
	100%{opacity:1;width:100px;height:135px;top:-24px;right:100px;}
}
#copy {
	z-index:14;position:absolute;width:90px;height:90px;bottom:0;transform:rotate(-90deg);
	-webkit-animation-name:copy;-webkit-animation-duration:6.5s;-webkit-animation-delay:3s;-webkit-animation-fill-mode:both;
	animation-name:copy;animation-duration:6.5s;animation-delay:3s;animation-fill-mode:both;
	font-size:9px;line-height:11px;color:#666666;text-align:center;font-weight:400;font-style:normal;
}
#copy p {
	position:absolute;margin:0;width:100%;top:0;left:0;white-space:nowrap;
}
@-webkit-keyframes copy {
	0%{opacity:0;right:15px}
	25%{opacity:1;right:15px;}
	84%{opacity:1;right:15px;}
	100%{opacity:1;right:165px;}
} 	
@keyframes copy {
	0%{opacity:0;right:15px}
	25%{opacity:1;right:15px;}
	84%{opacity:1;right:15px;}
	100%{opacity:1;right:165px;}
}
#disturber {
	z-index:6;position:absolute;width:55px;height:55px;right:185px;top:15px;background-color:#b51d28;border-radius:75px;
	-webkit-animation-name:disturber;-webkit-animation-duration:1s;-webkit-animation-delay:3.5s;-webkit-animation-fill-mode:both;
	animation-name:disturber;animation-duration:1s;animation-delay:3.5s;animation-fill-mode:both;
}
#disturber p {
	position:relative;top:18px;margin:0;padding:0;width:100%;
	font-size:20px;line-height:20px;color:#ffffff;text-align:center;font-weight:400;font-style:normal;
}
@-webkit-keyframes disturber {
	0%{opacity:0;transform:rotate(520deg);}
	100%{opacity:1;transform:rotate(-10deg);}
} 	
@keyframes disturber {
	0%{opacity:0;transform:rotate(520deg);}
	100%{opacity:1;transform:rotate(-10deg);}
}
#border {
	z-index:6;opacity:1;position:absolute;background-color:#b51d28;width:200px;height:2px;left:175px;
	-webkit-animation-name:border;-webkit-animation-duration:0.5s;-webkit-animation-delay:4s;-webkit-animation-fill-mode:both; 
	animation-name:border;animation-duration:0.5s;animation-delay:4s;animation-fill-mode:both; 
}
@-webkit-keyframes border {
	0%{top:-5px;}
	100%{top:18px;}
}
@keyframes border {
	0%{top:-5px;}
	100%{top:18px;}
}
#quots {
	z-index:6;opacity:1;position:absolute;width:550px;height:25px;left:0;
	-webkit-animation-name:quots;-webkit-animation-duration:1s;-webkit-animation-delay:4s;-webkit-animation-fill-mode:both;
	animation-name:quots;animation-duration:1s;animation-delay:4s;animation-fill-mode:both;
	font-size:20px;line-height:25px;color:#000000;text-align:center;font-weight:700;font-style:normal;
}
@-webkit-keyframes quots {
	0%{bottom:-30px;}
	100%{bottom:35px;}
} 	
@keyframes quots {
	0%{bottom:-30px;}
	100%{bottom:35px;}
}
#quots2 {
	z-index:6;position:absolute;width:550px;height:15px;bottom:15px;
	-webkit-animation-name:quots2;-webkit-animation-duration:1s;-webkit-animation-delay:5s;-webkit-animation-fill-mode:both;
	animation-name:quots2;animation-duration:1s;animation-delay:5s;animation-fill-mode:both;
	font-size:14px;line-height:14px;color:#000000;text-align:center;font-weight:400;font-style:normal;
}
@-webkit-keyframes quots2 {
	0%{opacity:0;}
	100%{opacity:1;}
} 	
@keyframes quots2 {
	0%{opacity:0;}
	100%{opacity:1;}
}


/* Frame dazwischen */

#book2 {
	z-index:11;opacity:1;position:absolute;width:100px;height:135px;top:-24px;background-image:url("../img/book.png");background-size:100% auto;background-position:center center;
	-webkit-animation-name:book2;-webkit-animation-duration:3s;-webkit-animation-delay:6.5s;-webkit-animation-fill-mode:both;
	animation-name:book2;animation-duration:3s;animation-delay:6.5s;animation-fill-mode:both;
}
@-webkit-keyframes book2 {
	0%{opacity:0;right:100px;}
	1%{opacity:1;right:100px;}
	66%{opacity:1;right:100px;}
	100%{opacity:1;right:250px;}
} 	
@keyframes book2 {
	0%{opacity:0;right:100px;}
	1%{opacity:1;right:100px;}
	66%{opacity:1;right:100px;}
	100%{opacity:1;right:250px;}
}
#author {
	z-index:12;position:absolute;width:55px;height:55px;top:15px;
	-webkit-animation-name:author;-webkit-animation-duration:3s;-webkit-animation-delay:6.5s;-webkit-animation-fill-mode:both;
	animation-name:author;animation-duration:3s;animation-delay:6.5s;animation-fill-mode:both;
}
@-webkit-keyframes author {
	0%{opacity:0;right:185px;}
	10%{opacity:1;right:185px;}
	66%{opacity:1;right:185px;}
	100%{opacity:1;right:335px;}
} 	
@keyframes author {
	0%{opacity:0;right:185px;}
	10%{opacity:1;right:185px;}
	66%{opacity:1;right:185px;}
	100%{opacity:1;right:335px;}
}

/* Frame 3 */

#bg-3 {
	z-index:10;position:absolute;background-color:#fffaec;width:728px;height:90px;top:0;left:0;
	-webkit-animation-name:bg;-webkit-animation-duration:0.5s;-webkit-animation-delay:7s;-webkit-animation-fill-mode:both; 
	animation-name:bg;animation-duration:0.5s;animation-delay:7s;animation-fill-mode:both; 
}
#title-orange {
	z-index:12;position:absolute;width:400px;height:35px;left:150px;
	-webkit-animation-name:title-orange;-webkit-animation-duration:2s;-webkit-animation-delay:7.5s;-webkit-animation-fill-mode:both;
	animation-name:title-orange;animation-duration:2s;animation-delay:7.5s;animation-fill-mode:both;
	font-size:35px;line-height:35px;color:#f1886a;text-align:left;font-weight:400;font-style:normal;
}
@-webkit-keyframes title-orange {
	0%{opacity:1;top:-40px;}
	33%{opacity:1;top:15px;}
	66%{opacity:1;top:15px;}
	100%{opacity:0;top:15px;}
} 	
@keyframes title-orange {
	0%{opacity:1;top:-40px;}
	33%{opacity:1;top:15px;}
	66%{opacity:1;top:15px;}
	100%{opacity:0;top:15px;}
}
#title-red {
	z-index:12;position:absolute;width:400px;height:35px;left:230px;
	-webkit-animation-name:title-red;-webkit-animation-duration:2s;-webkit-animation-delay:7.5s;-webkit-animation-fill-mode:both;
	animation-name:title-red;animation-duration:2s;animation-delay:7.5s;animation-fill-mode:both;
	font-size:35px;line-height:35px;color:#ce001d;text-align:left;font-weight:400;font-style:normal;
}
@-webkit-keyframes title-red {
	0%{opacity:1;bottom:-40px;}
	33%{opacity:1;bottom:10px;}
	66%{opacity:1;bottom:10px;}
	100%{opacity:0;bottom:10px;}
} 	
@keyframes title-red {
	0%{opacity:1;bottom:-40px;}
	33%{opacity:1;bottom:10px;}
	66%{opacity:1;bottom:10px;}
	100%{opacity:0;bottom:10px;}
}
#subtitle {
	z-index:11;position:absolute;width:400px;height:20px;top:15px;
	-webkit-animation-name:quots2;-webkit-animation-duration:1s;-webkit-animation-delay:9s;-webkit-animation-fill-mode:both;
	animation-name:quots2;animation-duration:1s;animation-delay:9s;animation-fill-mode:both;
	font-size:25px;line-height:30px;color:#000000;text-align:center;font-weight:400;font-style:italic;
}
#button {
	z-index:12;position:absolute;width:160px;height:40px;right:25px;bottom:25px;background-color:#b51d28;
	-webkit-animation-name:button;-webkit-animation-duration:3s;-webkit-animation-delay:10s;-webkit-animation-fill-mode:both;
	animation-name:button;animation-duration:3s;animation-delay:10s;animation-fill-mode:both;
}
#button p {
	position:absolute;top:10px;left:12px;margin:0;padding:0;width:100%;
	font-size:18px;line-height:20px;color:#ffffff;text-align:center;font-weight:400;font-style:normal;
}
#button img {
	position:absolute;top:10px;left:13px;
}
@-webkit-keyframes button {
	0%{opacity:0;}
	20%{opacity:1;}
	60%{opacity:1;}
	80%{opacity:0;}
	100%{opacity:1;}
} 	
@keyframes button {
	0%{opacity:0;}
	20%{opacity:1;}
	60%{opacity:1;}
	80%{opacity:0;}
	100%{opacity:1;}
}