


.container-modal {
  margin: 100px auto;
  width: 500px;
  
  text-align: center;
}

/*.progress {*/
/*    width: 100%;*/
/*  padding: 6px;*/
/*  background: rgba(0, 0, 0, 0.25);*/
/*  border-radius: 6px;*/
/*  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);*/
/*}*/

.progress-bar {	
  height: 18px;
	background-color: #ee303c;  
  border-radius: 4px; 
  transition: 0.4s linear;  
  transition-property: width, background-color;    
}

.progress-striped .progress-bar { 	
  background-color: #ccea1e; 
  width: 100%; 
  background-image: linear-gradient(
        45deg, rgb(132,153,12) 25%, 
        transparent 25%, transparent 50%, 
        rgb(189,217,28) 50%, rgb(195,223,32) 75%,
        transparent 75%, transparent); 
  animation: progressAnimationStrike 10s;
margin-top: -4px;

}

@keyframes progressAnimationStrike {
     from { width: 0 }
     to   { width: 100% }
}

.progress2 {
  padding: 6px;
  border-radius: 30px;
  background: rgba(0, 0, 0, 0.25);  
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
}

.progress-moved .progress-bar2 {
  width: 85%; 
  background-color: #EF476F;  
  animation: progressAnimation 6s;
}

@keyframes progressAnimation {
  0%   { width: 5%; background-color: #F9BCCA;}
  100% { width: 85%; background-color: #EF476F; }
}

.progress-infinite .progress-bar3 { 	 
  width: 100%; 
  background-image: 
    linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #7DC8E8, #7DC8E8, #ff2d55);
  animation: colorAnimation 1s infinite;
}

@keyframes colorAnimation {
  0% { 
    background-image: 
    linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #7DC8E8, #7DC8E8, #ff2d55);
  }
  20% { 
    background-image: 
    linear-gradient(to right, #5ac8fa, #007aff, #7DC8E8, #7DC8E8, #ff2d55, #4cd964);
  }
  40% { 
    background-image: 
    linear-gradient(to right, #007aff, #7DC8E8, #7DC8E8, #ff2d55, #4cd964, #5ac8fa);
  }
  60% { 
    background-image: 
    linear-gradient(to right, #7DC8E8, #7DC8E8, #ff2d55, #4cd964, #5ac8fa, #007aff);
  }
  100% { 
    background-image: 
    linear-gradient(to right, #7DC8E8, #ff2d55, #4cd964, #5ac8fa, #007aff, #7DC8E8);
  }
}
