@charset "utf-8";



body {
	font-family: "serif";
	margin-top: 0px;
	margin-left: 0px;
	padding: 0px;
	border:none;

	}




#displayAd {
	
	width: 728px;
	height: 90px;
	margin-top: 0px;
	padding-top: 0px;
	background-color: #f9dc0a;
	overflow: hidden;
}


#logo {
	position: absolute;
	left: 619px;
	top: 5px;
	margin: 0px;
	padding: 0px;
	z-index: 2;
	animation-name: logoanimation;
	animation-duration: 10s;
}


h1 {
	color: #466a3e;
	font-size: 30px;	
}

#bild {
	posit-ion: relative;
	animation-name: bildzoom;
    animation-duration: 10s;
	animation-fill-mode: forwards;
	animation-timing-funct1ion:ease;
	animation-iteration-count:10;
	z-index: 2;
	
}


#containerbild {

	
	position: absolute;
	width: 300px;
	height: 90px;
	left: 0px;
	overflow: hidden;
}



#text1 {
	position: absolute;
	left:-300px;
	top: 18px;
	animation-name: textanimation1;
    animation-duration: 10s;
	animation-timing-function: ease;
	animation-iteration-count: 10;
	z-index: 2;
	
}




#bild2 {
	position: absolute;
	top: 0px;
	left: 300px;
	opacity: 0.0;
	z-index: 1;
	animation-name: bildzoom2;
    animation-duration: 10s;
	animation-delay: 0s;
	animation-fill-mode: forwards;
	animation-iteration-count: 10;
	
} 




#text2 {
	position: absolute;
	top: 18px;
	left: 300px;
	animation-name: textanimation2;
    animation-duration: 10s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
	animation-iteration-count: 10;
	z-index: 2;
	
}



#info {
	position: absolute;
	animation-name: infoanimation;
    animation-duration: 10s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
	animation-delay:0s;
	animation-iteration-count: 10;
	z-index: 2;
	
}



p {
	font-size: 30px;
	margin-top: 0px;
}

img {
	border:none;                                                                               
                       
}



@keyframes logoanimation{
   0% {left:619px; opacity:1.0; }
  80% {left:619px; opacity:1.0; }
  90% {left:619px; opacity:1.0; }
 100% {left:619px; opacity:1.0; }
}
@-webkit-keyframes logoanimation{
		0%   {left: 300px; opacity: 1.0;}
  18%  {left:300px; opacity:1.0; }
  23% {left:300px; opacity:0.0; }
100% {left:300px; opacity:0.0; }
}




@keyframes bildzoom {
  0%   {width:400px; height: auto; left:-30px; top: -40px;           }
  10%  {width:300px; height: auto; left:0px; top: -20px;             }
  26%  {width:300px; height: auto; left:0px; top: -20px; opacity:1.0 }
  36%  {width:300px; height: auto; left:0px; top: -20px; opacity:0.0 }
 100%  {width:300px; height: auto; left:0px; top: -20px; opacity:0.0 }
}

@-webkit-keyframes bildzoom {
  0%   {width:400px; height: auto; left:-30px; top: -40px;}
  10%  {width:300px; height: auto; left:0px; top: -20px; }
  26%  {width:300px; height: auto; left:0px; top: -20px; opacity:1.0 }
  36% {width:300px; height: auto; left:0px; top: -20px; opacity:0.0 }
 100% {width:300px; height: auto; left:0px; top: -20px; opacity:0.0 }
}





@keyframes textanimation1 {
  0%   {left:300px; opacity: 1.0;}
  16%  {left:300px; opacity:1.0; }
  21%  {left:300px; opacity:0.0; }
  100% {left:300px; opacity:0.0; }
}


@-webkit-keyframes textanimation1 {
  0%   {left: 0px; opacity: 1.0;}
  25%  {left:0px; opacity:1.0; }
  35% {left:0px; opacity:0.0; }
100% {left:0px; opacity:0.0; }
}






@keyframes bildzoom2 {
  0%   {opacity: 0.0;}
	30%   {opacity: 0.0;}
  40%  {opacity: 1.0;}
	90% {opacity: 1.0;}
	100% {opacity: 0.0;}
	
	}
	
@-webkit-keyframes bildzoom2 {
  0%   {opacity: 0.0;}
  90%  {opacity: 0.0;}
  100% {opacity: 1.0;}
	}






@keyframes textanimation2 {
  0%   {left:-301px; opacity: 1.0;}
  25%  {left:-301px; opacity: 1.0;}
  33%  {left:0px;                 }
  100% {left:0px; opacity: 1.0;   }
}
	
@-webkit-keyframes textanimation2 {
  0%   {left:-301px; opacity: 1.0;}
  25%   {left:-301px; opacity: 1.0;}
  33%  {left:0px;}
  100%  {left:0px; opacity: 1.0; }
}

	
	



@keyframes infoanimation {
  0%    {width:165px;top: 50px; left:-200px;opacity: 0;   }
  45%   {width:165px;top: 10px; left: 370px;opacity: 0;   }
  55%   {width:165px;top: 35px; left: 370px;opacity: 1;   }
  65%   {width:165px;top: 35px; left: 370px;opacity: 1;   }
  68%   {width:174px;top: 35px; left: 370px;opacity: 1;   }
  71%   {width:165px;top: 35px; left: 370px;opacity: 1;   }
  72%   {width:165px;top: 35px; left: 370px;opacity: 1;   }
  75%   {width:174px;top: 35px; left: 370px;opacity: 1;   }
  78%   {width:165px;top: 35px; left: 370px;opacity: 1;   }
 100%   {width:165px;top: 35px; left: 370px;opacity: 0;   }
}
	
@-webkit-keyframes infoanimation {
  0%    {top: 50px; left: -200px;opacity: 0; width:165px; }
  45%   {width:165px;top: 10px; left: 370px;opacity: 0; }
  55%   {width:165px;top: 35px; left: 370px;opacity: 1; }
  65%   {width:165px;top: 35px; left: 370px;opacity: 1; }
  68%   {width:174px;top: 35px; left: 370px;opacity: 1; }
  71%   {width:165px;top: 35px; left: 370px;opacity: 1; }
  72%   {width:165px;top: 35px; left: 370px;opacity: 1; }
  75%   {width:174px;top: 35px; left: 370px;opacity: 1; }
  78%   {width:165px;top: 35px; left: 370px;opacity: 1; }
 100%   {width:165px;top: 35px; left: 370px;opacity: 1; }
}