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



/* Sequenz 1 */

#bg {
	z-index:1;position:absolute;width:160px;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:160px;height:190px;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:-190px;}
	100%{bottom:0;}
}
@keyframes ecke1 {
	0%{bottom:-190px;}
	100%{bottom:0;}
}

#logo {
	z-index:30;position:absolute;width:128px;height:46px;left:16px;top:15px;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:294px;height:380px;left:-45px;top:70px;}
} 	
@keyframes hund1 {
	0%{opacity:0;width:0;height:0;left:175px;top:500px;}	
	100%{opacity:1;width:294px;height:380px;left:-45px;top:70px;}
}

#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:206px;height:284px;left:0;top:150px;transform: rotate(-360deg);}
	100%{opacity:1;width:103px;height:142px;left:0;top:285px;transform:rotate(0deg);}	
	
	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-links {
	0%{opacity:0;width:206px;height:284px;left:0;top:150px;transform: rotate(-360deg);}
	100%{opacity:1;width:103px;height:142px;left:0;top:285px;transform:rotate(0deg);}	
}

/* Sequenz 2 */

#bg2 {
	z-index:5;position:absolute;width:160px;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:160px;height:389px;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:-389px;}
	100%{bottom:0;}
}
@keyframes ecke2 {
	0%{bottom:-389px;}
	100%{bottom:0;}
}

#futter1 {
	z-index:7;position:absolute;opacity:1;width:76px;height:166px;right:6px;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:76px;height:166px;left:8px;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:76px;height:166px;right:28px;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:76px;height:166px;left:26px;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:160px;height:50px;bottom:224px;
	-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:28px;line-height:35px;color:#000000;text-align:center;}

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

#text {
	z-index:14;position:absolute;opacity:1;width:160px;height:75px;bottom:120px;
	-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:-160px;}
	100%{left:0;}
}
@keyframes text {
	0%{left:-160px;}
	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:29px;left:80px;}
	30%{opacity:1;width:144px;height:38px;bottom:10px;left:8px;}
	80%{opacity:1;width:144px;height:38px;bottom:10px;left:8px;}
	90%{opacity:0;width:144px;height:38px;bottom:10px;left:8px;}
	100%{opacity:1;width:144px;height:38px;bottom:10px;left:8px;}
}
@keyframes button {
	0%{opacity:0;width:0;height:0;bottom:29px;left:80px;}
	30%{opacity:1;width:144px;height:38px;bottom:10px;left:8px;}
	80%{opacity:1;width:144px;height:38px;bottom:10px;left:8px;}
	90%{opacity:0;width:144px;height:38px;bottom:10px;left:8px;}
	100%{opacity:1;width:144px;height:38px;bottom:10px;left:8px;}
}

/* Sequenz 3 */

#bg3 {
	z-index:10;position:absolute;width:160px;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:160px;height:389px;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: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:75px;left:70px}
	100%{opacity:1;width:131px;height:146px;top:185px;left:10px;}
}
@keyframes futter-ganz2 {
	0%{opacity:0;width:250px;height:235px;top:75px;left:70px}
	100%{opacity:1;width:131px;height:146px;top:185px;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:144px;height:38px;bottom:10px;left:8px;}
	5%{opacity:1;width:144px;height:38px;bottom:10px;left:8px;}
	90%{opacity:1;width:144px;height:38px;bottom:10px;left:8px;}
	95%{opacity:0;width:144px;height:38px;bottom:10px;left:8px;}
	100%{opacity:1;width:144px;height:38px;bottom:10px;left:8px;}
}
@keyframes button2 {
	0%{opacity:0;width:144px;height:38px;bottom:10px;left:8px;}
	5%{opacity:1;width:144px;height:38px;bottom:10px;left:8px;}
	90%{opacity:1;width:144px;height:38px;bottom:10px;left:8px;}
	95%{opacity:0;width:144px;height:38px;bottom:10px;left:8px;}
	100%{opacity:1;width:144px;height:38px;bottom:10px;left:8px;}
}

#mig {
	z-index:13;position:absolute;width:61px;height:34px;left:13px;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:19px;left:38px;top:139px;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:38px;}	
	54%{height:38px;}
	55%{height:0;}
	100%{height:38px;}
}
@keyframes pfeil {
	0%{height:0;}
	45%{height:38px;}	
	54%{height:38px;}
	55%{height:0;}
	100%{height:38px;}
}

#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:137px;height:179px;right:-50px;top:80px;}
} 	
@keyframes hund2 {
	0%{opacity:0;width:0;height:0;right:100px;top:225px;}	
	100%{opacity:1;width:137px;height:179px;right:-50px;top:80px;}
}

#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: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:108px;height:168px;right:0;top:85px;transform: rotate(360deg);}
	100%{opacity:1;width:54px;height:84px;right:0;top:170px;transform:rotate(0deg);}	
}
@keyframes futter-rechts {
	0%{opacity:0;width:108px;height:168px;right:0;top:85px;transform: rotate(360deg);}
	100%{opacity:1;width:54px;height:84px;right:0;top:170px;transform:rotate(0deg);}
}