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



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

#ecke1 {
	z-index:3;position:absolute;opacity:1;width:300px;height:120px;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:144px;height:53px;left:72px;top:20px;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:390px;height:500px;left:-25px;top:30px;}
} 	
@keyframes hund1 {
	0%{opacity:0;width:0;height:0;left:175px;top:500px;}	
	100%{opacity:1;width:390px;height:500px;left:-25px;top:30px;}
}

#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:196px;height:274px;left:65px;top:160px;transform: rotate(-360deg);}
	100%{opacity:1;width:98px;height:137px;left:65px;top:320px;transform:rotate(0deg);}
}
@keyframes futter-links {
	0%{opacity:0;width:196px;height:274px;left:65px;top:160px;transform: rotate(-360deg);}
	100%{opacity:1;width:98px;height:137px;left:65px;top:320px;transform:rotate(0deg);}
}

/* Sequenz 2 */

#bg2 {
	z-index:5;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: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:300px;height:365px;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:6s;-webkit-animation-fill-mode:both; 
	animation-name:ecke2;animation-duration:1.5s;animation-delay:6s;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:115px;height:250px;right:30px;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:8s;-webkit-animation-fill-mode:both; 
	animation-name:futter1;animation-duration:1s;animation-delay:8s;animation-fill-mode:both; 
}	
@-webkit-keyframes futter1 {
	0%{top:-250px;}
	100%{top:100px;}
}
@keyframes futter1 {
	0%{top:-250px;}
	100%{top:100px;}
}
#futter2 {
	z-index:7;position:absolute;opacity:1;width:115px;height:250px;left:30px;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:8.5s;-webkit-animation-fill-mode:both; 
	animation-name:futter2;animation-duration:1s;animation-delay:8.5s;animation-fill-mode:both; 
}	
@-webkit-keyframes futter2 {
	0%{top:-250px;}
	100%{top:90px;}
}
@keyframes futter2 {
	0%{top:-250px;}
	100%{top:90px;}
}
#futter3 {
	z-index:8;position:absolute;opacity:1;width:115px;height:250px;right:65px;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:9s;-webkit-animation-fill-mode:both; 
	animation-name:futter3;animation-duration:1s;animation-delay:9s;animation-fill-mode:both; 
}	
@-webkit-keyframes futter3 {
	0%{top:-250px;}
	100%{top:125px;}
}
@keyframes futter3 {
	0%{top:-250px;}
	100%{top:125px;}
}
#futter4 {
	z-index:9;position:absolute;opacity:1;width:115px;height:250px;left:80px;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:9.5s;-webkit-animation-fill-mode:both; 
	animation-name:futter4;animation-duration:1s;animation-delay:9.5s;animation-fill-mode:both; 
}	
@-webkit-keyframes futter4 {
	0%{top:-250px;}
	100%{top:150px;}
}
@keyframes futter4 {
	0%{top:-250px;}
	100%{top:150px;}
}

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

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

#text {
	z-index:14;position:absolute;opacity:1;width:300px;height:75px;bottom:75px;
	-webkit-animation-name:text;-webkit-animation-duration:0.5s;-webkit-animation-delay:11.5s;-webkit-animation-fill-mode:both; 
	animation-name:text;animation-duration:0.5s;animation-delay:11.5s;animation-fill-mode:both; 
}	
#text p {position:relative;top:10px;margin:0 auto;font-family:'Roboto-Light', Arial, sans-serif;font-size:22px;line-height:25px;color:#000000;text-align:center;}
#text span {font-family:'Roboto-Medium', Arial, sans-serif;}

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

#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:12s;-webkit-animation-fill-mode:both; 
	animation-name:button;animation-duration:4s;animation-delay:12s;animation-fill-mode:both; 
}
@-webkit-keyframes button {
	0%{opacity:0;width:0;height:0;bottom:45px;left:150px;}
	30%{opacity:1;width:220px;height:50px;bottom:20px;left:40px;}
	80%{opacity:1;width:220px;height:50px;bottom:20px;left:40px;}
	90%{opacity:0;width:220px;height:50px;bottom:20px;left:40px;}
	100%{opacity:1;width:220px;height:50px;bottom:20px;left:40px;}
}
@keyframes button {
	0%{opacity:0;width:0;height:0;bottom:45px;left:150px;}
	30%{opacity:1;width:220px;height:50px;bottom:20px;left:40px;}
	80%{opacity:1;width:220px;height:50px;bottom:20px;left:40px;}
	90%{opacity:0;width:220px;height:50px;bottom:20px;left:40px;}
	100%{opacity:1;width:220px;height:50px;bottom:20px;left:40px;}
}

/* Sequenz 3 */

#bg3 {
	z-index:10;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: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:365px;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:-45px;}
}
@keyframes ecke3 {
	0%{opacity:0;bottom:0;}
	5%{opacity:1;bottom:0;}
	100%{opacity:1;bottom:-45px;}
}

#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:17s;-webkit-animation-fill-mode:both; 
	animation-name:futter-ganz2;animation-duration:1.5s;animation-delay:17s;animation-fill-mode:both; 
}	
@-webkit-keyframes futter-ganz2 {
	0%{opacity:0;width:250px;height:235px;top:165px;left:70px}
	100%{opacity:1;width:186px;height:175px;top:230px;left:10px;}
}
@keyframes futter-ganz2 {
	0%{opacity:0;width:250px;height:235px;top:165px;left:70px}
	100%{opacity:1;width:186px;height:175px;top:230px;left:10px;}
}

#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:9s;-webkit-animation-delay:16.5s;-webkit-animation-fill-mode:both; 
	animation-name:button2;animation-duration:9s;animation-delay:16.5s;animation-fill-mode:both; 
}
@-webkit-keyframes button2 {
	0%{opacity:0;width:220px;height:50px;bottom:20px;left:40px;}
	5%{opacity:1;width:220px;height:50px;bottom:20px;left:40px;}
	90%{opacity:1;width:220px;height:50px;bottom:20px;left:40px;}
	95%{opacity:0;width:220px;height:50px;bottom:20px;left:40px;}
	100%{opacity:1;width:220px;height:50px;bottom:20px;left:40px;}
}
@keyframes button2 {
	0%{opacity:0;width:220px;height:50px;bottom:20px;left:40px;}
	5%{opacity:1;width:220px;height:50px;bottom:20px;left:40px;}
	90%{opacity:1;width:220px;height:50px;bottom:20px;left:40px;}
	95%{opacity:0;width:220px;height:50px;bottom:20px;left:40px;}
	100%{opacity:1;width:220px;height:50px;bottom:20px;left:40px;}
}

#mig {
	z-index:13;position:absolute;width:90px;height:50px;left:25px;top:100px;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:19.5s;-webkit-animation-fill-mode:both; 
	animation-name:mig;animation-duration:1s;animation-delay:19.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:30px;left:75px;top:160px;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:19.5s;-webkit-animation-fill-mode:both; 
	animation-name:pfeil;animation-duration:2s;animation-delay:19.5s;animation-fill-mode:both; 
}	
@-webkit-keyframes pfeil {
	0%{height:0;}
	45%{height:60px;}	
	54%{height:60px;}
	55%{height:0;}
	100%{height:60px;}
}
@keyframes pfeil {
	0%{height:0;}
	45%{height:60px;}	
	54%{height:60px;}
	55%{height:0;}
	100%{height:60px;}
}

#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:21.5s;-webkit-animation-fill-mode:both;-webkit-transition-timing-function:ease-out;
	animation-name:hund2;animation-duration:1s;animation-delay:21.5s;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:230px;height:300px;right:-50px;top:80px;}
} 	
@keyframes hund2 {
	0%{opacity:0;width:0;height:0;right:100px;top:225px;}	
	100%{opacity:1;width:230px;height:300px;right:-50px;top:80px;}
}

#futter-rechts {
	z-index:14;position:absolute;right:10px;top:250px;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:22.5s;-webkit-animation-fill-mode:both; 
	animation-name:futter-rechts;animation-duration:1s;animation-delay:22.5s;animation-fill-mode:both; 
}	
@-webkit-keyframes futter-rechts {	
	0%{opacity:0;width:196px;height:274px;right:15px;top:165px;transform: rotate(360deg);}
	100%{opacity:1;width:98px;height:137px;right:15px;top:230px;transform:rotate(0deg);}
}
@keyframes futter-rechts {
	0%{opacity:0;width:196px;height:274px;right:15px;top:165px;transform: rotate(360deg);}
	100%{opacity:1;width:98px;height:137px;right:15px;top:230px;transform:rotate(0deg);}
}