/*für index.htm*/
.slides 
{
  position: absolute;
  top:0;
  left:0;
  display:none; 
  float:left; 
  max-width:100%;
  opacity:0;
  animation-name: fromtop6;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
}



@keyframes fromtop6
{
  0% {opacity:0.2;} 
  25% {opacity:0.4;} 
  50% {opacity:0.7;} 
  70% {opacity:0.9;} 
  100% {opacity:1.0;} 
}

/*animation alles-was-ich-will*/
.line1
{
    position: relative;
    opacity:0;
    border:0;
    animation-name: aline1;
    animation-duration: 1.5s;
    //animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1); 
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.line2
{
    position: relative;
    opacity:0;
    border:0;
    animation-name: aline2;
    animation-duration: 1.5s;
    //animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1); 
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.line3
{
    position: relative;
    opacity:0;
    border:0;
    animation-name: aline3;
    animation-duration: 2.0s;
    //animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1); 
    animation-timing-function: linear;
    animation-delay: 2.0s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.line4
{
    position: relative;
    opacity:0;
    border:0;
    animation-name: aline4;
    animation-duration: 1.5s;
    //animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1); 
    animation-timing-function: linear;
    animation-delay: 2.5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}


@keyframes aline1
{
    0%    {left:150px; top:267px;opacity:0.1; width:1px;} 
    30%   {left:110px; top:200px;opacity:1; width:100px;} 
    60%   {left:50px;  top:180px;opacity:1; width:150px;}    
    100%  {left:10px;  top:15px;opacity:1; width:200px;}
}

@keyframes aline2
{
    0%    {left:500px; top:20px;opacity:0.3;} 
    30%   {left:300px; top:60px;opacity:1;} 
    60%   {left:150px; top:90px;opacity:1;}   
    100%  {left:10px;  top:15px;opacity:1;}
}

@keyframes aline3
{
    0%    {left:40px;  top:150px;opacity:0.5;} 
    30%   {left:100px; top:100px;opacity:1;} 
    60%   {left:50px;  top:50px;opacity:1;}   
    100%  {left:10px;  top:15px;opacity:1;}
}

@keyframes aline4
{
    0%    {left:50px; top:50px;opacity:0.1;} 
    20%   {left:40px; top:40px;opacity:1.0;} 
    40%   {left:30px; top:30px;opacity:0.1;}   
    60%   {left:20px; top:30px;opacity:1.0;}   
    80%   {left:15px; top:30px;opacity:0.2;}   
    100%  {left:10px; top:10px;opacity:1.0;}
}