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

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

#banner-body {position:relative;overflow:hidden;width:300px;height:600px;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:620px;left:-15px;top:-15px;}
	100%{opacity:1;width:290px;height:590px;left:0;top:0;}
}
@keyframes bg {
	0%{opacity:0;width:320px;height:620px;left:-15px;top:-15px;}
	100%{opacity:1;width:290px;height:590px;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:280px;height:390px;left:10px;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:-400px;}
	100%{opacity:1;bottom:0;}
} 	
@keyframes img {
	0%{opacity:0;bottom:-400px;}
	100%{opacity:1;bottom:0;}
}
#headline-orange {
	z-index:2;opacity:1;position:absolute;width:300px;height:50px;top:90px;
	-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%{left:300px;}
	100%{left:20px;}
} 	
@keyframes headline-orange {
	0%{left:300px;}
	100%{left:20px;}
}
#headline-red {
	z-index:2;opacity:1;position:absolute;width:300px;height:50px;top:140px;
	-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:right;font-weight:400;font-style:normal;
}
@-webkit-keyframes headline-red {
	0%{right:300px;}
	100%{right:20px;}
} 	
@keyframes headline-red {
	0%{right:300px;}
	100%{right:20px;}
}


/* Frame 2 */

#bg-2 {
	z-index:5;position:absolute;background-color:#fffaec;width:290px;height:590px;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:245px;height:330px;right:15px;background-image:url("../img/book.png");background-size:100% auto;background-position:center center;
	-webkit-animation-name:img;-webkit-animation-duration:0.5s;-webkit-animation-delay:3s;-webkit-animation-fill-mode:both;
	animation-name:img;animation-duration:0.5s;animation-delay:3s;animation-fill-mode:both;
}
#copy {
	z-index:14;position:absolute;width:12px;height:400px;right:10px;bottom:22px;
	-webkit-animation-name:copy;-webkit-animation-duration:0.5s;-webkit-animation-delay:3s;-webkit-animation-fill-mode:both;
	animation-name:copy;animation-duration:0.5s;animation-delay:3s;animation-fill-mode:both;
	font-size:11px;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:75px;height:75px;left:20px;top:320px;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:200px;height:2px;top:90px;
	-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%{right:300px;}
	100%{right:50px;}
}
@keyframes border {
	0%{right:300px;}
	100%{right:50px;}
}
#quots {
	z-index:6;opacity:1;position:absolute;width:300px;height:50px;top:120px;
	-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%{left:300px;}
	100%{left:0;}
} 	
@keyframes quots {
	0%{left:300px;}
	100%{left:0;}
}
#quots2 {
	z-index:6;position:absolute;width:300px;height:20px;top:210px;
	-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:245px;height:330px;right:15px;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:0;}
	1%{opacity:1;bottom:0;}
	66%{opacity:1;bottom:0;}
	100%{opacity:1;bottom:25px;}
} 	
@keyframes book2 {
	0%{opacity:0;bottom:0;}
	1%{opacity:1;bottom:0;}
	66%{opacity:1;bottom:0;}
	100%{opacity:1;bottom:25px;}
}
#author {
	z-index:12;position:absolute;width:75px;height:75px;left:20px;
	-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:320px;}
	10%{opacity:1;top:320px;}
	66%{opacity:1;top:320px;}
	100%{opacity:1;top:300px;}
} 	
@keyframes author {
	0%{opacity:0;top:320px;}
	10%{opacity:1;top:320px;}
	66%{opacity:1;top:320px;}
	100%{opacity:1;top:300px;}
}


/* Frame 3 */

#bg-3 {
	z-index:10;position:absolute;background-color:#fffaec;width:290px;height:590px;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:300px;height:50px;top:80px;
	-webkit-animation-name:headline-orange;-webkit-animation-duration:1s;-webkit-animation-delay:7.5s;-webkit-animation-fill-mode:both;
	animation-name:headline-orange;animation-duration:1s;animation-delay:7.5s;animation-fill-mode:both;
	font-size:43px;line-height:43px;color:#f1886a;text-align:left;font-weight:400;font-style:normal;
}
#title-red {
	z-index:11;opacity:1;position:absolute;width:300px;height:50px;top:125px;
	-webkit-animation-name:headline-red;-webkit-animation-duration:1s;-webkit-animation-delay:7.5s;-webkit-animation-fill-mode:both;
	animation-name:headline-red;animation-duration:1s;animation-delay:7.5s;animation-fill-mode:both;
	font-size:43px;line-height:43px;color:#ce001d;text-align:right;font-weight:400;font-style:normal;
}
#subtitle {
	z-index:11;position:absolute;width:300px;height:20px;top:180px;
	-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:25px;line-height:27px;color:#000000;text-align:center;font-weight:400;font-style:italic;
}
#button {
	z-index:12;position:absolute;width:190px;height:40px;left:55px;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;}
}