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

@font-face { font-family: 'Atma-SemiBold';
             src: url('Atma-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Roboto-Light';
             src: url('Roboto-Light.ttf') format('truetype'); }
@font-face { font-family: 'Roboto-Medium';
             src: url('Roboto-Medium.ttf') format('truetype'); }

body {margin:0;padding:0;font-family:'Roboto-Light', Arial, sans-serif;}
#banner-body {position:relative;overflow:hidden;width:320px;height:50px;margin:0 auto;background-color:#5f0c0c;}


/* Sequenz 1 */

#bg {
	z-index:1;position:absolute;width:320px;height:50px;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;}
}

#ecke1 {
	z-index:3;position:absolute;opacity:1;width:62px;height:50px;background-image:url(../img/ecke1.png);background-size:100% auto;background-position:center center;	
	-webkit-animation-name:ecke1;-webkit-animation-duration:1s;-webkit-animation-delay:0.5s;-webkit-animation-fill-mode:both; 
	animation-name:ecke1;animation-duration:1s;animation-delay:0.5s;animation-fill-mode:both; 
}	
@-webkit-keyframes ecke1 {
	0%{bottom:0px;right:-210px;}
	100%{bottom:0;right:0;}
}
@keyframes ecke1 {
	0%{bottom:0px;right:-210px;}
	100%{bottom:0;right:0;}
}

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

#hund1 {
	z-index:2;position:absolute;background-image:url(../img/hund1.png);background-size:100% auto;background-position:center center;
	-webkit-animation-name:hund1;-webkit-animation-duration:1s;-webkit-animation-delay:2s;-webkit-animation-fill-mode:both;-webkit-transition-timing-function:ease-out;
	animation-name:hund1;animation-duration:1s;animation-delay:2s;animation-fill-mode:both;transition-timing-function:ease-out;
}
@-webkit-keyframes hund1 {
	0%{opacity:0;width:0;height:0;left:175px;top:500px;}	
	100%{opacity:1;width:81px;height:103px;left:153px;top:-20px;}
} 	
@keyframes hund1 {
	0%{opacity:0;width:0;height:0;left:175px;top:500px;}	
	100%{opacity:1;width:81px;height:103px;left:153px;top:-20px;}
}

#futter-links {
	z-index:3;position:absolute;background-image:url(../img/futter-links.png);background-size:100% auto;background-position:center center;	
	-webkit-animation-name:futter-links;-webkit-animation-duration:1s;-webkit-animation-delay:3s;-webkit-animation-fill-mode:both; 
	animation-name:futter-links;animation-duration:1s;animation-delay:3s;animation-fill-mode:both; 
}	
@-webkit-keyframes futter-links {
	0%{opacity:0;width:0;height:0;top:5px;left:60px;transform: rotate(-360deg);}
	100%{opacity:1;width:56px;height:45px;top:15px;left:135px;transform:rotate(0deg);}
}
@keyframes futter-links {
	0%{opacity:0;width:0;height:0;top:5px;left:60px;transform: rotate(-360deg);}
	100%{opacity:1;width:56px;height:45px;top:15px;left:135px;transform:rotate(0deg);}
}

/* Sequenz 2 */

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

#ecke2 {
	z-index:6;position:absolute;opacity:1;width:187px;height:50px;background-image:url(../img/ecke2.png);background-size:100% auto;background-position:center center;	
	-webkit-animation-name:ecke2;-webkit-animation-duration:1.5s;-webkit-animation-delay:5s;-webkit-animation-fill-mode:both; 
	animation-name:ecke2;animation-duration:1.5s;animation-delay:5s;animation-fill-mode:both; 
}	
@-webkit-keyframes ecke2 {
	0%{bottom:0px;right:-530px;}
	100%{bottom:0;right:0;}
}
@keyframes ecke2 {
	0%{bottom:0px;right:-530px;}
	100%{bottom:0;right:0;}
}

#futter1 {
	z-index:8;position:absolute;opacity:1;width:27px;height:59px;right:172px;background-image:url("../img/futter1.png");background-size:100% auto;background-position:center center;
	-webkit-animation-name:futter1;-webkit-animation-duration:1s;-webkit-animation-delay:7s;-webkit-animation-fill-mode:both; 
	animation-name:futter1;animation-duration:1s;animation-delay:7s;animation-fill-mode:both; 
}	
@-webkit-keyframes futter1 {
	0%{top:-250px;}
	100%{top:1px;}
}
@keyframes futter1 {
	0%{top:-250px;}
	100%{top:3px;}
}
#futter2 {
	z-index:7;position:absolute;opacity:1;width:27px;height:59px;left:90px;background-image:url("../img/futter2.png");background-size:100% auto;background-position:center center;
	-webkit-animation-name:futter2;-webkit-animation-duration:1s;-webkit-animation-delay:7.5s;-webkit-animation-fill-mode:both; 
	animation-name:futter2;animation-duration:1s;animation-delay:7.5s;animation-fill-mode:both; 
}	
@-webkit-keyframes futter2 {
	0%{top:-250px;}
	100%{top:3px;}
}
@keyframes futter2 {
	0%{top:-250px;}
	100%{top:3px;}
}
#futter3 {
	z-index:8;position:absolute;opacity:1;width:27px;height:59px;right:182px;background-image:url("../img/futter3.png");background-size:100% auto;background-position:center center;
	-webkit-animation-name:futter3;-webkit-animation-duration:1s;-webkit-animation-delay:8s;-webkit-animation-fill-mode:both; 
	animation-name:futter3;animation-duration:1s;animation-delay:8s;animation-fill-mode:both; 
}	
@-webkit-keyframes futter3 {
	0%{top:-250px;}
	100%{top:9px;}
}
@keyframes futter3 {
	0%{top:-250px;}
	100%{top:9px;}
}
#futter4 {
	z-index:8;position:absolute;opacity:1;width:27px;height:59px;left:101px;background-image:url("../img/futter4.png");background-size:100% auto;background-position:center center;
	-webkit-animation-name:futter4;-webkit-animation-duration:1s;-webkit-animation-delay:8.5s;-webkit-animation-fill-mode:both; 
	animation-name:futter4;animation-duration:1s;animation-delay:8.5s;animation-fill-mode:both; 
}	
@-webkit-keyframes futter4 {
	0%{top:-250px;}
	100%{top:14px;}
}
@keyframes futter4 {
	0%{top:-250px;}
	100%{top:14px;}
}

#kostenlos {
	z-index:9;position:absolute;width:300px;height:50px;bottom:-8px;
	-webkit-animation-name:kostenlos;-webkit-animation-duration:2s;-webkit-animation-delay:10s;-webkit-animation-fill-mode:both; 
	animation-name:kostenlos;animation-duration:2s;animation-delay:10s;animation-fill-mode:both; 
}	
#kostenlos p {position:relative;top:5px;margin:0 auto;font-family:'Atma-SemiBold', Arial, sans-serif;font-size:22px;line-height:25px;color:#000000;text-align:center;}

@-webkit-keyframes kostenlos {
	0%{opacity:1;right:-230px;}
	50%{opacity:1;right:-63px;}
	95%{opacity:1;right:-63px;}
	100%{opacity:0;right:-63px;}
}
@keyframes kostenlos {
	0%{opacity:1;right:-230px;}
	50%{opacity:1;right:-63px;}
	95%{opacity:1;right:-63px;}
	100%{opacity:0;right:-63px;}
}

#text {
	z-index:13;position:absolute;width:300px;height:75px; bottom:-19px;
	-webkit-animation-name:text;-webkit-animation-duration:2s;-webkit-animation-delay:12s;-webkit-animation-fill-mode:both; 
	animation-name:text;animation-duration:2s;animation-delay:12s;animation-fill-mode:both; 
}	

#text p {
	position:relative;top:10px;margin:0 auto;font-family:'Roboto-Light', Arial, sans-serif;font-size:15px;line-height:20px;color:#000000;text-align:center;}
#text span {font-family:'Roboto-Medium', Arial, sans-serif;}

@-webkit-keyframes text {
	0%{opacity:1;right:-225px;}
	50%{opacity:1;right:-64px;}
	100%{opacity:1;right:-64px;}
}
@keyframes text {
	0%{opacity:1;right:-225px;}
	50%{opacity:1;right:-64px;}
	100%{opacity:1;right:-64px;}
}

/* Sequenz 3 */

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

#ecke3 {
	z-index:16;position:absolute;width:187px;height:50px;right:0;background-image:url(../img/ecke2.png);background-size:100% auto;background-position:center center;	
	-webkit-animation-name:ecke3;-webkit-animation-duration:1.5s;-webkit-animation-delay:14s;-webkit-animation-fill-mode:both; 
	animation-name:ecke3;animation-duration:1.5s;animation-delay:14s;animation-fill-mode:both; 
}	
@-webkit-keyframes ecke3 {
	0%{opacity:0;bottom:0;}
	5%{opacity:1;bottom:0;}
	100%{opacity:1;bottom:0;}
}
@keyframes ecke3 {
	0%{opacity:0;bottom:0;}
	5%{opacity:1;bottom:0;}
	100%{opacity:1;bottom:0;}
}

#hund2 {
	z-index:17;position:absolute;background-image:url(../img/hund2.png);background-size:100% auto;background-position:center center;
	-webkit-animation-name:hund2;-webkit-animation-duration:1s;-webkit-animation-delay:16s;-webkit-animation-fill-mode:both;-webkit-transition-timing-function:ease-out;
	animation-name:hund2;animation-duration:1s;animation-delay:16s;animation-fill-mode:both;transition-timing-function:ease-out;
}
@-webkit-keyframes hund2 {
	0%{opacity:0;width:0;height:0;left:100px;top:230px;}	
	100%{opacity:1;width:60px;height:69px;left:78px;top:-5px;}
} 	
@keyframes hund2 {
	0%{opacity:0;width:0;height:0;left:100px;top:225px;}	
	100%{opacity:1;width:60px;height:69px;left:78px;top:-5px;}
}

#futter-rechts {
	z-index:18;position:absolute;left:115px;top:10px;background-image:url(../img/futter-rechts.png);background-size:100% auto;background-position:center center;	
	-webkit-animation-name:futter-rechts;-webkit-animation-duration:1s;-webkit-animation-delay:16.5s;-webkit-animation-fill-mode:both; 
	animation-name:futter-rechts;animation-duration:1s;animation-delay:16.5s;animation-fill-mode:both; 
}	
@-webkit-keyframes futter-rechts {
	0%{opacity:0;width:0;height:0;transform: rotate(360deg);}
	50%{opacity:1;width:61px;height:43px;transform:rotate(0deg);}
	100%{opacity:1;width:61px;height:43px;transform:rotate(0deg);}
}
@keyframes futter-rechts {
	0%{opacity:0;width:0;height:0;transform: rotate(360deg);}
	50%{opacity:1;width:61px;height:43px;transform:rotate(0deg);}
	100%{opacity:1;width:61px;height:43px;transform:rotate(0deg);}
}

#button {
	z-index:17;position:absolute;background-image:url(../img/button.jpg);background-size:100% 100%;background-position:center center;
	-webkit-animation-name:button;-webkit-animation-duration:4s;-webkit-animation-delay:14.5s;-webkit-animation-fill-mode:both; 
	animation-name:button;animation-duration:4s;animation-delay:14.5s;animation-fill-mode:both; 
}
@-webkit-keyframes button {
	0%{opacity:0;width:0;height:0;bottom:14px;right:71px;}
	25%{opacity:1;width:127px;height:33px;bottom:9px;right:8px;}
	90%{opacity:1;width:127px;height:33px;bottom:9px;right:8px;}
	95%{opacity:0;width:127px;height:33px;bottom:9px;right:8px;}
	100%{opacity:1;width:127px;height:33px;bottom:9px;right:8px;}
}
@keyframes button {
	0%{opacity:0;width:0;height:0;bottom:14px;right:71px;}
	25%{opacity:1;width:127px;height:33px;bottom:9px;right:8px;}
	90%{opacity:1;width:127px;height:33px;bottom:9px;right:8px;}
	95%{opacity:0;width:127px;height:33px;bottom:9px;right:8px;}
	100%{opacity:1;width:127px;height:33px;bottom:9px;right:8px;}
}