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

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

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


/* Frame 1 */

#bg-1 {
	z-index:1;position:absolute;background-color:#fffaec;border:5px solid #f1886a;
	-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;width:320px;height:270px;left:-15px;top:-15px;}
	100%{opacity:1;width:290px;height:240px;left:0;top:0;}
}
@keyframes bg {
	0%{opacity:0;width:320px;height:270px;left:-15px;top:-15px;}
	100%{opacity:1;width:290px;height:240px;left:0;top:0;}
}
#logo {
	z-index:15;opacity:1;position:absolute;width:40px;height:32px;left:20px;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:-40px;}
	100%{top:5px;}
} 	
@keyframes logo {
	0%{top:-40px;}
	100%{top:5px;}
}
#img {
	z-index:2;position:absolute;width:155px;height:195px;right:5px;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:-200px;}
	100%{opacity:1;bottom:5px;}
} 	
@keyframes img {
	0%{opacity:0;bottom:-200px;}
	100%{opacity:1;bottom:5px;}
}
#headline-orange {
	z-index:2;opacity:1;position:absolute;width:150px;height:50px;top:60px;
	-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:30px;line-height:35px;color:#f1886a;text-align:center;font-weight:400;font-style:normal;
}
@-webkit-keyframes headline-orange {
	0%{left:-160px;}
	100%{left:5px;}
} 	
@keyframes headline-orange {
	0%{left:-160px;}
	100%{left:5px;}
}
#headline-red {
	z-index:2;position:absolute;width:160px;height:50px;top:100px;
	-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:30px;line-height:35px;color:#ce001d;text-align:center;font-weight:400;font-style:normal;
}
@-webkit-keyframes headline-red {
	0%{opacity:0;left:300px;}
	100%{opacity:1;left:5px;}
} 	
@keyframes headline-red {
	0%{opacity:0;left:300px;}
	100%{opacity:1;left:5px;}
}


/* Frame 2 */

#bg-2 {
	z-index:5;position:absolute;background-color:#fffaec;width:290px;height:240px;left:0;top:0;border:5px solid #f1886a;
	-webkit-animation-name:bg2;-webkit-animation-duration:0.5s;-webkit-animation-delay:2.5s;-webkit-animation-fill-mode:both; 
	animation-name:bg2;animation-duration:0.5s;animation-delay:2.5s;animation-fill-mode:both; 
}
@-webkit-keyframes bg2 {
	0%{opacity:0;}
	100%{opacity:1;}
}
@keyframes bg2 {
	0%{opacity:0;}
	100%{opacity:1;}
}
#book {
	z-index:6;position:absolute;width:145px;height:205px;bottom:10px; background-image:url("../img/book.png");background-size:100% auto;background-position:center center;
	-webkit-animation-name:book;-webkit-animation-duration:0.5s;-webkit-animation-delay:3s;-webkit-animation-fill-mode:both;
	animation-name:book;animation-duration:0.5s;animation-delay:3s;animation-fill-mode:both;
}
@-webkit-keyframes book {
	0%{opacity:0;right:-150px;}
	100%{opacity:1;right:10px;}
} 	
@keyframes book {
	0%{opacity:0;right:-150px;}
	100%{opacity:1;right:10px;}
}
#copy {
	z-index:14;position:absolute;width:15px;height:300px;right:5px;bottom:13px;
	-webkit-animation-name:copy;-webkit-animation-duration:0.5s;-webkit-animation-delay:3.5s;-webkit-animation-fill-mode:both;
	animation-name:copy;animation-duration:0.5s;animation-delay:3.5s;animation-fill-mode:both;
	font-size:8px;line-height:11px;color:#666666;text-align:left;font-weight:400;font-style:normal;
}
#copy p {
	position:absolute;margin:0;width:100%;bottom:0;left:0;transform:rotate(-90deg);white-space:nowrap;
}
@-webkit-keyframes copy {
	0%{opacity:0;}
	100%{opacity:1;}
} 	
@keyframes copy {
	0%{opacity:0;}
	100%{opacity:1;}
}
#disturber {
	z-index:7;position:absolute;width:70px;height:70px;right:110px;top:30px;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:23px;margin:0;padding:0;width:100%;
	font-size:22px;line-height:25px;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:100px;height:2px;top:120px;
	-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%{left:-105px;}
	100%{left:30px;}
}
@keyframes border {
	0%{left:-105px;}
	100%{left:30px;}
}
#quots {
	z-index:6;opacity:1;position:absolute;width:160px;height:50px;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:18px;line-height:22px;color:#000000;text-align:center;font-weight:700;font-style:normal;
}
@-webkit-keyframes quots {
	0%{bottom:-55px;}
	100%{bottom:60px;}
} 	
@keyframes quots {
	0%{bottom:-55px;}
	100%{bottom:60px;}
}
#quots2 {
	z-index:6;position:absolute;width:160px;height:20px;bottom:30px;left:0;
	-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:18px;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:145px;height:205px;right:10px;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;bottom:10px;}
	10%{opacity:1;bottom:10px;}
	66%{opacity:1;bottom:10px;}
	100%{opacity:1;bottom:35px;}
} 	
@keyframes book2 {
	0%{opacity:0;bottom:10px;}
	10%{opacity:1;bottom:10px;}
	66%{opacity:1;bottom:10px;}
	100%{opacity:1;bottom:35px;}
}
#author {
	z-index:12;position:absolute;width:70px;height:70px;right:110px;
	-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;top:30px;}
	10%{opacity:1;top:30px;}
	66%{opacity:1;top:30px;}
	100%{opacity:1;top:20px;}
} 	
@keyframes author {
	0%{opacity:0;top:30px;}
	10%{opacity:1;top:30px;}
	66%{opacity:1;top:30px;}
	100%{opacity:1;top:20px;}
}


/* Frame 3 */

#bg-3 {
	z-index:10;position:absolute;background-color:#fffaec;width:290px;height:240px;left:0;top:0;border:5px solid #f1886a;
	-webkit-animation-name:bg2;-webkit-animation-duration:0.5s;-webkit-animation-delay:7s;-webkit-animation-fill-mode:both; 
	animation-name:bg2;animation-duration:0.5s;animation-delay:7s;animation-fill-mode:both; 
}
#subtitle {
	z-index:11;opacity:1;position:absolute;width:140px;height:130px;top:60px;
	-webkit-animation-name:subtitle;-webkit-animation-duration:1s;-webkit-animation-delay:8s;-webkit-animation-fill-mode:both;
	animation-name:subtitle;animation-duration:1s;animation-delay:8s;animation-fill-mode:both;
	font-size:25px;line-height:30px;color:#000000;text-align:lefz;font-weight:400;font-style:italic;
}
@-webkit-keyframes subtitle {
	0%{left:-150px;}
	100%{left:20px;}
} 	
@keyframes subtitle {
	0%{left:-150px;}
	100%{left:20px;}
}
#button {
	z-index:12;position:absolute;width:140px;height:30px;left:80px;bottom:15px;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:9px;left:10px;margin:0;padding:0;width:100%;
	font-size:14px;line-height:14px;color:#ffffff;text-align:center;font-weight:400;font-style:normal;
}
#button img {
	position:absolute;top:8px;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;}
}