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

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


/* Sequenz 1 */

#bg {
	z-index:1;position:absolute;width:300px;height:250px;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:165px;height:60px;right: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:165px;height:60px;top:0;right: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:20px;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:-20px;}	
	100%{opacity:0.75;bottom:0;}
} 	
@keyframes box-url {
	0%{opacity:0;bottom:-20px;}	
	100%{opacity:0.75;bottom:0;}
}

#url {
	z-index:25;position:absolute;opacity:1;width:300px;height:15px;bottom:0;
	-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:14px;line-height:15px;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:90px;bottom:60px;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:90px;top:115px;
	-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:35px;line-height:30px;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:250px;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;top:15px;left: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:97px;height:97px;transform:rotate(720deg);}
}
@keyframes stoerer {
	0%{opacity:0;width:0;height:0;transform:rotate(0deg);}
	100%{opacity:1;width:97px;height:97px;transform:rotate(720deg);}
}

#button {
	z-index:15;position:absolute;width:190px;height:45px;bottom:25px;left:55px;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;}
}