@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:300px;height:250px;margin:0 auto;background-color:#5f0c0c;}



/* 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;}
}

#ecke1 {
	z-index:3;position:absolute;opacity:1;width:300px;height:93px;left:0;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:-120px;}
	100%{bottom:0;}
}
@keyframes ecke1 {
	0%{bottom:-120px;}
	100%{bottom:0;}
}

#logo {
	z-index:30;position:absolute;width:97px;height:35px;left:14px;top:9px;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:185px;height:239px;left:119px;top:-2px;}
} 	
@keyframes hund1 {
	0%{opacity:0;width:0;height:0;left:175px;top:500px;}	
	100%{opacity:1;width:185px;height:239px;left:119px;top:-2px;}
}

#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:192px;height:262px;left:125px;top:50px;transform: rotate(-360deg);}
	100%{opacity:1;width:96px;height:131px;left:125px;top:120px;transform:rotate(0deg);}
}
@keyframes futter-links {
	0%{opacity:0;width:192px;height:262px;left:125px;top:50px;transform: rotate(-360deg);}
	100%{opacity:1;width:96px;height:131px;left:125px;top:120px;transform:rotate(0deg);}
}

/* Sequenz 2 */

#bg2 {
	z-index:5;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:bg2;-webkit-animation-duration:1s;-webkit-animation-delay:4.5s;-webkit-animation-fill-mode:both; 
	animation-name:bg2;animation-duration:1s;animation-delay:4.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:300px;height:173px;left:0;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:5.5s;-webkit-animation-fill-mode:both; 
	animation-name:ecke2;animation-duration:1.5s;animation-delay:5.5s;animation-fill-mode:both; 
}	
@-webkit-keyframes ecke2 {
	0%{bottom:-365px;}
	100%{bottom:0;}
}
@keyframes ecke2 {
	0%{bottom:-365px;}
	100%{bottom:0;}
}

#futter1 {
	z-index:7;position:absolute;opacity:1;width:50px;height:113px;right:12px;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:88px;}
}
@keyframes futter1 {
	0%{top:-250px;}
	100%{top:88px;}
}
#futter2 {
	z-index:7;position:absolute;opacity:1;width:50px;height:113px;left:182px;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:88px;}
}
@keyframes futter2 {
	0%{top:-250px;}
	100%{top:88px;}
}
#futter3 {
	z-index:8;position:absolute;opacity:1;width:50px;height:113px;right:30px;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:98px;}
}
@keyframes futter3 {
	0%{top:-250px;}
	100%{top:98px;}
}
#futter4 {
	z-index:9;position:absolute;opacity:1;width:50px;height:113px;left:198px;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:109px;}
}
@keyframes futter4 {
	0%{top:-250px;}
	100%{top:109px;}
}

#kostenlos {
	z-index:14;position:absolute;opacity:1;width:300px;height:50px;bottom:99px;
	-webkit-animation-name:kostenlos;-webkit-animation-duration:0.5s;-webkit-animation-delay:10s;-webkit-animation-fill-mode:both; 
	animation-name:kostenlos;animation-duration:0.5s;animation-delay:10s;animation-fill-mode:both; 
}	
#kostenlos p {position:relative;top:10px;margin:0 auto;font-family:'Atma-SemiBold', Arial, sans-serif;font-size:20px;line-height:25px;color:#000000;text-align:left;}

@-webkit-keyframes kostenlos {
	0%{right:-300px;}
	100%{right:-14px;}
}
@keyframes kostenlos {
	0%{right:-300px;}
	100%{right:-14px;}
}

#text {
	z-index:14;position:absolute;opacity:1;width:300px;height:75px;bottom:37px;
	-webkit-animation-name:text;-webkit-animation-duration:0.5s;-webkit-animation-delay:10.5s;-webkit-animation-fill-mode:both; 
	animation-name:text;animation-duration:0.5s;animation-delay:10.5s;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:18px;color:#000000;text-align:left;}
#text span {font-family:'Roboto-Medium', Arial, sans-serif;}

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

#button {
	z-index:7;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:11s;-webkit-animation-fill-mode:both; 
	animation-name:button;animation-duration:4s;animation-delay:11s;animation-fill-mode:both; 
}
@-webkit-keyframes button {
	0%{opacity:0;width:0;height:0;bottom:35px;left:86px;}
	30%{opacity:1;width:145px;height:40px;bottom:14px;left:14px;}
	80%{opacity:1;width:145px;height:40px;bottom:14px;left:14px;}
	90%{opacity:0;width:145px;height:40px;bottom:14px;left:14px;}
	100%{opacity:1;width:145px;height:40px;bottom:14px;left:14px;}
}
@keyframes button {
	0%{opacity:0;width:0;height:0;bottom:35px;left:86px;}
	30%{opacity:1;width:145px;height:40px;bottom:14px;left:14px;}
	80%{opacity:1;width:145px;height:40px;bottom:14px;left:14px;}
	90%{opacity:0;width:145px;height:40px;bottom:14px;left:14px;}
	100%{opacity:1;width:145px;height:40px;bottom:14px;left:14px;}
}

/* Sequenz 3 */

#bg3 {
	z-index:10;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:bg3;-webkit-animation-duration:0.5s;-webkit-animation-delay:17s;-webkit-animation-fill-mode:both; 
	animation-name:bg3;animation-duration:0.5s;animation-delay:17s;animation-fill-mode:both; 
}	
@-webkit-keyframes bg3 {
	0%{opacity:0;}
	100%{opacity:1;}
}
@keyframes bg3 {
	0%{opacity:0;}
	100%{opacity:1;}
}

#ecke3 {
	z-index:12;position:absolute;width:300px;height:173px;left: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:17s;-webkit-animation-fill-mode:both; 
	animation-name:ecke3;animation-duration:1.5s;animation-delay:17s;animation-fill-mode:both; 
}	
@-webkit-keyframes ecke3 {
	0%{opacity:0;bottom:0;}
	5%{opacity:1;bottom:0;}
	100%{opacity:1;bottom:0px;}
}
@keyframes ecke3 {
	0%{opacity:0;bottom:0;}
	5%{opacity:1;bottom:0;}
	100%{opacity:1;bottom:0px;}
}

#futter-ganz2 {
	z-index:13;position:absolute;background-image:url(../img/futter-ganz2.png);background-size:100% auto;background-position:center center;	
	-webkit-animation-name:futter-ganz2;-webkit-animation-duration:1.5s;-webkit-animation-delay:16.5s;-webkit-animation-fill-mode:both; 
	animation-name:futter-ganz2;animation-duration:1.5s;animation-delay:16.5s;animation-fill-mode:both; 
}	
@-webkit-keyframes futter-ganz2 {
	0%{opacity:0;width:136px;height:134px;top:88px;left:181px}
	100%{opacity:1;width:136px;height:134px;top:110px;left:181px;}
}
@keyframes futter-ganz2 {
	0%{opacity:0;width:136px;height:134px;top:88px;left:181px}
	100%{opacity:1;width:136px;height:134px;top:110px;left:181px;}
}

#button2 {
	z-index:12;position:absolute;background-image:url(../img/button.jpg);background-size:100% 100%;background-position:center center;
	-webkit-animation-name:button2;-webkit-animation-duration:8s;-webkit-animation-delay:16.5s;-webkit-animation-fill-mode:both; 
	animation-name:button2;animation-duration:8s;animation-delay:16.5s;animation-fill-mode:both; 
}
@-webkit-keyframes button2 {
	0%{opacity:0;width:145px;height:40px;bottom:14px;left:14px;}
	5%{opacity:1;width:145px;height:40px;bottom:14px;left:14px;}
	90%{opacity:1;width:145px;height:40px;bottom:14px;left:14px;}
	95%{opacity:0;width:145px;height:40px;bottom:14px;left:14px;}
	100%{opacity:1;width:145px;height:40px;bottom:14px;left:14px;}
}
@keyframes button2 {
	0%{opacity:0;width:145px;height:40px;bottom:14px;left:14px;}
	5%{opacity:1;width:145px;height:40px;bottom:14px;left:14px;}
	90%{opacity:1;width:145px;height:40px;bottom:14px;left:14px;}
	95%{opacity:0;width:145px;height:40px;bottom:14px;left:14px;}
	100%{opacity:1;width:145px;height:40px;bottom:14px;left:14px;}
}

#mig {
	z-index:13;position:absolute;width:56px;height:29px;left:124px;top:12px;background-image:url(../img/mig.png);background-size:100% auto;background-position:center center;	
	-webkit-animation-name:mig;-webkit-animation-duration:1s;-webkit-animation-delay:18.5s;-webkit-animation-fill-mode:both; 
	animation-name:mig;animation-duration:1s;animation-delay:18.5s;animation-fill-mode:both; 
}	
@-webkit-keyframes mig {
	0%{opacity:0;}
	100%{opacity:1;}
}
@keyframes mig {
	0%{opacity:0;}
	100%{opacity:1;}
}

#pfeil {
	z-index:13;position:absolute;opacity:1;width:40px;left:115px;top:40px;background-image:url(../img/pfeil.png);background-size:100% auto;background-position:center center;	
	-webkit-animation-name:pfeil;-webkit-animation-duration:2s;-webkit-animation-delay:18.5s;-webkit-animation-fill-mode:both; 
	animation-name:pfeil;animation-duration:2s;animation-delay:18.5s;animation-fill-mode:both; 
}	
@-webkit-keyframes pfeil {
	0%{height:0;}
	45%{height:55px;}	
	54%{height:55px;}
	55%{height:0;}
	100%{height:55px;}
}
@keyframes pfeil {
	0%{height:0;}
	45%{height:55px;}	
	54%{height:55px;}
	55%{height:0;}
	100%{height:55px;}
}

#hund2 {
	z-index:11;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:21s;-webkit-animation-fill-mode:both;-webkit-transition-timing-function:ease-out;
	animation-name:hund2;animation-duration:1s;animation-delay:21s;animation-fill-mode:both;transition-timing-function:ease-out;
}
@-webkit-keyframes hund2 {
	0%{opacity:0;width:0;height:0;right:100px;top:230px;}	
	100%{opacity:1;width:135px;height:165px;right:-16px;top:-2px;}
} 	
@keyframes hund2 {
	0%{opacity:0;width:0;height:0;right:100px;top:225px;}	
	100%{opacity:1;width:135px;height:165px;right:-16px;top:-2px;}
}

#futter-rechts {
	z-index:14;position:absolute;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:21.5s;-webkit-animation-fill-mode:both; 
	animation-name:futter-rechts;animation-duration:1s;animation-delay:21.5s;animation-fill-mode:both; 
}	
@-webkit-keyframes futter-rechts {
	0%{opacity:0;width:162px;height:125px;right:60px;top:20px;transform: rotate(360deg);}
	100%{opacity:1;width:81px;height:63px;right:60px;top:50px;transform:rotate(0deg);}
}
@keyframes futter-rechts {
	0%{opacity:0;width:162px;height:125px;right:60px;top:20px;transform: rotate(360deg);}
	100%{opacity:1;width:81px;height:63px;right:60px;top:50px;transform:rotate(0deg);}
}