@keyframes animate-progress
{
0% 
{
      left: -24vw;
}
10% 
{
      left: -20vw;
}
30% 
{
      left: -16vw;
}
50% 
{
      left: -12vw;
}
65% 
{
      left: -10vw;
}
80% 
{
      left: -4vw;
}
100% 
{
      left: 0;
}
}



@keyframes animate-arrow
{
0% 
{
      background-position: 0 -50px;  
}
75% 
{
      background-position: 0 0;
}
100% 
{
      background-position: 0 50px;
}
}



@keyframes scroll-left 
{
0% 
{   
      transform: translate3d(0, -50, 0);
      -o-transform: translate3d(0, -50%, 0);
      -ms-transform: translate3d(0, -50%, 0);      
      -moz-transform: translate3d(0, -50%, 0);
      -webkit-transform: translate3d(0, -50%, 0);
}
100% 
{     
      transform: translate3d(-50.6%, -50%, 0);
      -o-transform: translate3d(-50.6%, -50%, 0);
      -ms-transform: translate3d(-50.6%, -50%, 0);      
      -moz-transform: translate3d(-50.6%, -50%, 0);
      -webkit-transform: translate3d(-50.6%, -50%, 0);
}
}



@keyframes animate-content 
{
0%
{
      opacity: 0;
      transform: translateY(100%) scale(0.7);
}
5%, 20%
{
      opacity: 0.05;
      transform: translateY(100%) scale(0.9);
}
25%, 40%
{
      opacity: 0.8;
      pointer-events: auto;
      transform: translateY(0%) scale(1);
}
45%, 60%
{
      opacity: 0.06;
      transform: translateY(-100%) scale(0.9);
}
65%, 100%
{
      opacity: 0;
      transform: translateY(-100%) scale(0.7);
}
}