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

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

#banner-body {position:relative;overflow:hidden;width:160px;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:180px;height:620px;left:-15px;top:-15px;}
	100%{opacity:1;width:150px;height:590px;left:0;top:0;}
}
@keyframes bg {
	0%{opacity:0;width:180px;height:620px;left:-15px;top:-15px;}
	100%{opacity:1;width:150px;height:590px;left:0;top:0;}
}
#logo {
	z-index:15;opacity:1;position:absolute;width:52px;height:40px;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:-50px;}
	100%{top:5px;}
} 	
@keyframes logo {
	0%{top:-50px;}
	100%{top:5px;}
}
#img {
	z-index:2;position:absolute;width:150px;height:365px;left: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:-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:160px;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:30px;line-height:35px;color:#f1886a;text-align:center;font-weight:400;font-style:normal;
}
@-webkit-keyframes headline-orange {
	0%{left:160px;}
	100%{left:0;}
} 	
@keyframes headline-orange {
	0%{left:160px;}
	100%{left:0;}
}
#headline-red {
	z-index:2;opacity:1;position:absolute;width:160px;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:30px;line-height:35px;color:#ce001d;text-align:center;font-weight:400;font-style:normal;
}
@-webkit-keyframes headline-red {
	0%{right:160px;}
	100%{right:0;}
} 	
@keyframes headline-red {
	0%{right:160px;}
	100%{right:0;}
}


/* Frame 2 */

#bg-2 {
	z-index:5;position:absolute;background-color:#fffaec;width:150px;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:150px;height:220px;right:5px;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;bottom:-250px;}
	100%{opacity:1;bottom:60px;}
} 	
@keyframes book {
	0%{opacity:0;bottom:-250px;}
	100%{opacity:1;bottom:60px;}
}
#copy {
	z-index:14;position:absolute;width:300px;height:160px;right:-213px;bottom:120px;transform:rotate(-90deg);
	-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:9px;line-height:10px;color:#666666;text-align:center;font-weight:400;font-style:normal;
}
#copy p {
	position:absolute;margin:0;width:100%;top:0;left:0;
}
@-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;right:20px;top:275px;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:100px;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:165px;}
	100%{right:30px;}
}
@keyframes border {
	0%{right:165px;}
	100%{right:30px;}
}
#quots {
	z-index:6;opacity:1;position:absolute;width:160px;height:150px;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:22px;line-height:25px;color:#000000;text-align:center;font-weight:700;font-style:normal;
}
@-webkit-keyframes quots {
	0%{left:165px;}
	100%{left:0;}
} 	
@keyframes quots {
	0%{left:165px;}
	100%{left:0;}
}
#quots2 {
	z-index:6;position:absolute;width:160px;height:20px;top:210px;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:18px;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:150px;height:220px;right:5px;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:60px;}
	1%{opacity:1;bottom:60px;}
	66%{opacity:1;bottom:60px;}
	100%{opacity:1;bottom:90px;}
} 	
@keyframes book2 {
	0%{opacity:0;bottom:60px;}
	1%{opacity:1;bottom:60px;}
	66%{opacity:1;bottom:60px;}
	100%{opacity:1;bottom:90px;}
}
#author {
	z-index:12;position:absolute;width:75px;height:75px;right:25px;
	-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:275px;}
	10%{opacity:1;top:275px;}
	66%{opacity:1;top:275px;}
	100%{opacity:1;top:240px;}
} 	
@keyframes author {
	0%{opacity:0;top:275px;}
	10%{opacity:1;top:275px;}
	66%{opacity:1;top:275px;}
	100%{opacity:1;top:240px;}
}


/* Frame 3 */

#bg-3 {
	z-index:10;position:absolute;background-color:#fffaec;width:150px;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:150px;height:50px;top:80px;
	-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:30px;line-height:35px;color:#f1886a;text-align:left;font-weight:400;font-style:normal;
}
@-webkit-keyframes title-orange {
	0%{left:165px;}
	100%{left:10px;}
} 	
@keyframes title-orange {
	0%{left:165px;}
	100%{left:10px;}
}
#title-red {
	z-index:11;opacity:1;position:absolute;width:150px;height:50px;top:115px;
	-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:30px;line-height:35px;color:#ce001d;text-align:right;font-weight:400;font-style:normal;
}
@-webkit-keyframes title-red {
	0%{right:165px;}
	100%{right:10px;}
} 	
@keyframes title-red {
	0%{right:165px;}
	100%{right:10px;}
}
#subtitle {
	z-index:11;position:absolute;width:160px;height:20px;top:170px;
	-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:17px;line-height:20px;color:#000000;text-align:center;font-weight:400;font-style:italic;
}
#button {
	z-index:12;position:absolute;width:140px;height:30px;left:10px;bottom:20px;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;}
}