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

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

#banner-body {position:relative;overflow:hidden;width:970px;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:990px;height:270px;left:-15px;top:-15px;}
	100%{opacity:1;width:960px;height:240px;left:0;top:0;}
}
@keyframes bg {
	0%{opacity:0;width:990px;height:270px;left:-15px;top:-15px;}
	100%{opacity:1;width:960px;height:240px;left:0;top:0;}
}
#logo {
	z-index:15;opacity:1;position:absolute;width:67px;height:52px;left:25px;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:-100px;}
	100%{top:5px;}
} 	
@keyframes logo {
	0%{top:-100px;}
	100%{top:5px;}
}
#img {
	z-index:2;position:absolute;width:200px;height:245px;right:75px;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:-260px;}
	100%{opacity:1;bottom:5px;}
} 	
@keyframes img {
	0%{opacity:0;bottom:-260px;}
	100%{opacity:1;bottom:5px;}
}
#headline-orange {
	z-index:2;opacity:1;position:absolute;width:400px;height:65px;left:130px;
	-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:65px;line-height:65px;color:#f1886a;text-align:left;font-weight:400;font-style:normal;
}
@-webkit-keyframes headline-orange {
	0%{top:-70px;}
	100%{top:55px;}
} 	
@keyframes headline-orange {
	0%{top:-70px;}
	100%{top:55px;}
}
#headline-red {
	z-index:2;opacity:1;position:absolute;width:400px;height:65px;left:170px;
	-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:65px;line-height:65px;color:#ce001d;text-align:left;font-weight:400;font-style:normal;
}
@-webkit-keyframes headline-red {
	0%{bottom:-70px;}
	100%{bottom:55px;}
} 	
@keyframes headline-red {
	0%{bottom:-70px;}
	100%{bottom:55px;}
}


/* Frame 2 */

#bg-2 {
	z-index:5;position:absolute;background-color:#fffaec;width:960px;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:175px;height:250px;top:0;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:-180px;}
	100%{opacity:1;right:120px;}
} 	
@keyframes book {
	0%{opacity:0;right:-180px;}
	100%{opacity:1;right:120px;}
}
#copy {
	z-index:14;position:absolute;width:20px;height:250px;bottom:35px;
	-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:11px;line-height:11px;color:#666666;text-align:center;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;right:110px}
	25%{opacity:1;right:110px;}
	84%{opacity:1;right:110px;}
	100%{opacity:1;right:240px;}
} 	
@keyframes copy {
	0%{opacity:0;right:110px}
	25%{opacity:1;right:110px;}
	84%{opacity:1;right:110px;}
	100%{opacity:1;right:240px;}
}
#disturber {
	z-index:6;position:absolute;width:75px;height:75px;right:270px;top:50px;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:25px;margin:0;padding:0;width:100%;
	font-size:25px;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:250px;height:2px;left:200px;
	-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:85px;}
}
@keyframes border {
	0%{top:-5px;}
	100%{top:85px;}
}
#quots {
	z-index:6;opacity:1;position:absolute;width:650px;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:30px;line-height:35px;color:#000000;text-align:center;font-weight:700;font-style:normal;
}
@-webkit-keyframes quots {
	0%{bottom:-60px;}
	100%{bottom:90px;}
} 	
@keyframes quots {
	0%{bottom:-60px;}
	100%{bottom:90px;}
}
#quots2 {
	z-index:6;position:absolute;width:650px;height:20px;bottom:70px;
	-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:20px;line-height:20px;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:175px;height:250px;top:0;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:120px;}
	1%{opacity:1;right:120px;}
	66%{opacity:1;right:120px;}
	100%{opacity:1;right:250px;}
} 	
@keyframes book2 {
	0%{opacity:0;right:120px;}
	1%{opacity:1;right:120px;}
	66%{opacity:1;right:120px;}
	100%{opacity:1;right:250px;}
}
#author {
	z-index:12;position:absolute;width:75px;height:75px;top:50px;
	-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:270px;}
	10%{opacity:1;right:270px;}
	66%{opacity:1;right:270px;}
	100%{opacity:1;right:390px;}
} 	
@keyframes author {
	0%{opacity:0;right:270px;}
	10%{opacity:1;right:270px;}
	66%{opacity:1;right:270px;}
	100%{opacity:1;right:390px;}
}

/* Frame 3 */

#bg-3 {
	z-index:10;position:absolute;background-color:#fffaec;width:960px;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; 
}
#title-orange {
	z-index:11;opacity:1;position:absolute;width:400px;height:50px;left:130px;
	-webkit-animation-name:title-orange;-webkit-animation-duration:1s;-webkit-animation-delay:7.5s;-webkit-animation-fill-mode:both;
	animation-name:title-orange;animation-duration:1s;animation-delay:7.5s;animation-fill-mode:both;
	font-size:50px;line-height:50px;color:#f1886a;text-align:left;font-weight:400;font-style:normal;
}
@-webkit-keyframes title-orange {
	0%{top:-70px;}
	100%{top:55px;}
} 	
@keyframes title-orange {
	0%{top:-70px;}
	100%{top:55px;}
}
#title-red {
	z-index:11;opacity:1;position:absolute;width:400px;height:50px;left:245px;
	-webkit-animation-name:title-red;-webkit-animation-duration:1s;-webkit-animation-delay:7.5s;-webkit-animation-fill-mode:both;
	animation-name:title-red;animation-duration:1s;animation-delay:7.5s;animation-fill-mode:both;
	font-size:50px;line-height:50px;color:#ce001d;text-align:left;font-weight:400;font-style:normal;
}
@-webkit-keyframes title-red {
	0%{bottom:-70px;}
	100%{bottom:85px;}
} 	
@keyframes title-red {
	0%{bottom:-70px;}
	100%{bottom:85px;}
}
#subtitle {
	z-index:11;position:absolute;width:570px;height:20px;bottom:45px;
	-webkit-animation-name:quots2;-webkit-animation-duration:1s;-webkit-animation-delay:8s;-webkit-animation-fill-mode:both;
	animation-name:quots2;animation-duration:1s;animation-delay:8s;animation-fill-mode:both;
	font-size:30px;line-height:30px;color:#000000;text-align:center;font-weight:400;font-style:italic;
}
#button {
	z-index:12;position:absolute;width:190px;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:20px;line-height:20px;color:#ffffff;text-align:center;font-weight:400;font-style:normal;
}
#button img {
	position:absolute;top:10px;left:15px;
}
@-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;}
}