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

body {margin:0;padding:0;}
#banner-body {position:relative;overflow:hidden;width:298px;height:598px;margin:0 auto;background-color:#181615;border:1px solid #cccccc;}


/* Sequenz 1 */

#bg {
	z-index:1;position:absolute;width:300px;height:600px;left:0;top:0;background-image:url(../img/bg.jpg);background-size:100% auto;background-position:center center;	
	-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;}
}

#box-logo {
	z-index:20;position:absolute;width:300px;height:85px;left:0;background-color:#ffffff;
	-webkit-animation-name:box-logo;-webkit-animation-duration:1s;-webkit-animation-delay:1s;-webkit-animation-fill-mode:both;
	animation-name:box-logo;animation-duration:1s;animation-delay:1s;animation-fill-mode:both;
}
@-webkit-keyframes box-logo {
	0%{opacity:0;top:-85px;}	
	100%{opacity:0.75;top:0;}
} 	
@keyframes box-logo {
	0%{opacity:0;top:-85px;}	
	100%{opacity:0.75;top:0;}
}

#logo {
	z-index:25;position:absolute;width:300px;height:85px;top:0;left:0;background-image:url(../img/logo.png);background-size:100% auto;background-position:center center;
	-webkit-animation-name:logo;-webkit-animation-duration:1s;-webkit-animation-delay:1.5s;-webkit-animation-fill-mode:both;
	animation-name:logo;animation-duration:1s;animation-delay:1.5s;animation-fill-mode:both;
}
@-webkit-keyframes logo {
	0%{opacity:0;}	
	100%{opacity:1;}
} 	
@keyframes logo {
	0%{opacity:0;}	
	100%{opacity:1;}
}

#box-url {
	z-index:20;position:absolute;width:300px;height:35px;left:0;background-color:#ffffff;
	-webkit-animation-name:box-url;-webkit-animation-duration:1s;-webkit-animation-delay:1s;-webkit-animation-fill-mode:both;
	animation-name:box-url;animation-duration:1s;animation-delay:1s;animation-fill-mode:both;
}
@-webkit-keyframes box-url {
	0%{opacity:0;bottom:-40px;}	
	100%{opacity:0.75;bottom:0;}
} 	
@keyframes box-url {
	0%{opacity:0;bottom:-40px;}	
	100%{opacity:0.75;bottom:0;}
}

#url {
	z-index:25;position:absolute;opacity:1;width:300px;height:20px;bottom:5px;
	-webkit-animation-name:url;-webkit-animation-duration:1s;-webkit-animation-delay:1.5s;-webkit-animation-fill-mode:both;
	animation-name:url;animation-duration:1s;animation-delay:1.5s;animation-fill-mode:both;
	font-family:'Quattrocento Sans', sans-serif;font-weight:bold;font-size:18px;line-height:20px;text-align:center;color:#a6093d;
}
@-webkit-keyframes url {
	0%{left:300px;}	
	100%{left:0;}
} 	
@keyframes url {
	0%{left:300px;}	
	100%{left:0;}
}

/* Sequenz 2 */

#box-text1 {
	z-index:10;position:absolute;opacity:0.80;width:300px;height:135px;bottom:95px;background-color:#ffffff;
	-webkit-animation-name:box-text;-webkit-animation-duration:1s;-webkit-animation-delay:3.5s;-webkit-animation-fill-mode:both; 
	animation-name:box-text;animation-duration:1s;animation-delay:3.5s;animation-fill-mode:both;}

@-webkit-keyframes box-text {
	0%{left:-300px;}
	100%{left:0;}
}
@keyframes box-text {
	0%{left:-300px;}
	100%{left:0;}
}

#text1 {
	z-index:15;position:absolute;width:300px;height:135px;top:400px;
	-webkit-animation-name:text1;-webkit-animation-duration:4s;-webkit-animation-delay:4s;-webkit-animation-fill-mode:both; 
	animation-name:text1;animation-duration:4s;animation-delay:4s;animation-fill-mode:both;
	font-family:'Parisienne', cursive;font-size:40px;line-height:35px;text-align:center;color:#a6093d;text-shadow:1px 1px 1px #ffffff;
}
@-webkit-keyframes text1 {
	0%{opacity:1;left:300px;}
	20%{opacity:1;left:0;}
	100%{opacity:1;left:0;}
}
@keyframes text1 {
	0%{opacity:1;left:300px;}
	20%{opacity:1;left:0;}
	100%{opacity:1;left:0;}
}

/* Sequenz 3 */

#bg2 {
	z-index:1;position:absolute;width:300px;height:600px;left:0;top:0;background-image:url(../img/bg2.jpg);background-size:100% auto;background-position:center center;	
	-webkit-animation-name:bg;-webkit-animation-duration:1s;-webkit-animation-delay:7s;-webkit-animation-fill-mode:both; 
	animation-name:bg2;animation-duration:1s;animation-delay:7s;animation-fill-mode:both; 
}	
@-webkit-keyframes bg2 {
	0%{opacity:0;}
	100%{opacity:1;}
}
@keyframes bg2 {
	0%{opacity:0;}
	100%{opacity:1;}
}

#stoerer {
	z-index:15;position:absolute;bottom:210px;right:10px;background-image:url("../img/stoerer.png");background-size:100% 100%;background-position:center center;
	-webkit-animation-name:stoerer;-webkit-animation-duration:1s;-webkit-animation-delay:9s;-webkit-animation-fill-mode:both; 
	animation-name:stoerer;animation-duration:1s;animation-delay:9s;animation-fill-mode:both; 
}
@-webkit-keyframes stoerer {
	0%{opacity:0;width:0;height:0;transform:rotate(0deg);}
	100%{opacity:1;width:135px;height:135px;transform:rotate(720deg);}
}
@keyframes stoerer {
	0%{opacity:0;width:0;height:0;transform:rotate(0deg);}
	100%{opacity:1;width:135px;height:135px;transform:rotate(720deg);}
}

#button {
	z-index:15;position:absolute;width:245px;height:60px;bottom:50px;left:27px;background-image:url(../img/button.png);background-size:100% 100%;background-position:center center;
	-webkit-animation-name:button;-webkit-animation-duration:3s;-webkit-animation-delay:11s;-webkit-animation-fill-mode:both; 
	animation-name:button;animation-duration:3s;animation-delay:11s;animation-fill-mode:both; 
}
@-webkit-keyframes button {
	0%{opacity:0;}
	20%{opacity:1;}
	50%{opacity:1;}
	60%{opacity:0;}
	70%{opacity:1;}
	100%{opacity:1;}
}
@keyframes button {
	0%{opacity:0;}
	20%{opacity:1;}
	50%{opacity:1;}
	60%{opacity:0;}
	70%{opacity:1;}
	100%{opacity:1;}
}