@-webkit-keyframes 	zoom { from {-webkit-transform:scale(0)}  to {-webkit-transform:scale(1)}}
@keyframes 		zoom { from {transform:scale(0)}  to {transform:scale(1)}}


@keyframes loginopa {
  0%   {background-color:red;  opacity: 0.5;}
  25%   {background-color:red; opacity: 0.6;}
  50%   {background-color:red; opacity: 0.7;}
  75%   {background-color:red; opacity: 0.8;}
  100%  {background-color:red; opacity: 3;}
}

@keyframes loginchat {
  0%   {background-color:darkgreen;  opacity: 0.5;}
  25%   {background-color:darkgreen; opacity: 0.6;}
  50%   {background-color:darkgreen; opacity: 0.7;}
  75%   {background-color:darkgreen; opacity: 0.8;}
  100%  {background-color:darkgreen; opacity: 3;}
}

/* Add Zoom Animation */
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)} 
  to {-webkit-transform: scale(1)}
}
  
@keyframes animatezoom {
  from {transform: scale(0)} 
  to {transform: scale(1)}
}


@-webkit-keyframes retanimatepop {
  from {-webkit-transform: scale(0.6);  } 
  to {-webkit-transform: scale(1); box-shadow: 6px 3px red; border: 2px solid red; }
}
  
@keyframes retanimatepop {
  from {transform: scale(0.6);} 
  to {transform: scale(1);  box-shadow: 6px 3px red; border: 2px solid red;}
}

@-webkit-keyframes animatepop {
  from {-webkit-transform: box-shadow: 6px 2px black;} 
  to {-webkit-transform: scale(0.7);  box-shadow: 6px 3px red; border: 2px solid red;}
}
  
@keyframes animatepop {
  from {transform: 	box-shadow: 6px 2px black;} 
  to {transform: scale(0.7); box-shadow: 6px 3px red; border: 2px solid red;}
}


  
@keyframes mycolor {  
  from {background-color: #ff0000;}
  to {background-color:   #990000;}
}

@keyframes anilaufen {
  0%   {background-color:white; left:10%; opacity: 1;}
  25%   {background-color:white; left:20%; opacity: 10;}
  50%   {background-color:white; left:40%; opacity: 20;}
  75%   {background-color:white; left:60%; opacity: 30;}
  100%  {background-color:white; left:85%; opacity: 90;}
}
#laufen {  animation: anilaufen 1s infinite linear; animation-iteration-count: 2;}
.claufen {
  left:10%; top:30%; width: 60px; height: 60px;  position: absolute;
  border-radius: 20px;  color: white;  overflow: hidden;  font-size: 10;  z-index: 2;
}




progress {
      width: 15%;
}