.shake img
{
    animation: shake 0.5s forwards ease-in-out;
}
@keyframes shake {
    0%
    {
        transform: rotate(-15deg);
    }
    25%
    {
        transform: rotate(15deg);
    }
    50%
    {
        transform: rotate(-15deg);
    }
    75%
    {
        transform: rotate(15deg);
    }
    100%
    {
        transform: rotate(0deg);
    }
}


.rating-reveal
{
    animation: reveal 1.5s forwards ease;
}
@keyframes reveal
{
    from
    {
        clip-path: circle(0 at 0 0);
    }
    to
    {
        clip-path: circle(141.4% at 0 0);
    }
}

/* fation css */
.rating-reveal
{
    animation: reveal 1.5s forwards ease;
}
@keyframes reveal
{
    from
    {
        clip-path: circle(0 at 0 0);
    }
    to
    {
        clip-path: circle(141.4% at 0 0);
    }
}
/* compony css */
.shake img
{
    animation: shake 0.5s forwards ease-in-out;
}
@keyframes shake {
    0%
    {
        transform: rotate(-15deg);
    }
    25%
    {
        transform: rotate(15deg);
    }
    50%
    {
        transform: rotate(-15deg);
    }
    75%
    {
        transform: rotate(15deg);
    }
    100%
    {
        transform: rotate(0deg);
    }
}

.playbtn::before, .playbtn::after
{
    animation: circle_highlight 2.5s infinite ease-in-out;
}
.playbtn::after
{
    animation-delay: 250ms !important;
}
@keyframes circle_highlight
{
    0%
    {
        opacity: 0;
        clip-path: circle(0.0% at 50% 50%);
    }
    25%
    {
        opacity: 0.13;
        clip-path: circle(70.7% at 50% 50%);
    }
    100%
    {
        opacity: 0;
        clip-path: circle(70.7% at 50% 50%);
    }

}

.slider_caption *
{
    animation: revealSlide 1s forwards ease-in-out;
}
@keyframes revealSlide
{
    from
    {
        opacity: 0;
        transform: translateY(-100px);
    }
    to
    {
        opacity: 1;
        transform: translateY(0px);
    }
}

/* survey form css */
/* .typing-cursor
{
    animation: blink 0.7s infinite;
}
  
@keyframes blink
{
    0%
    {
      opacity: 0;
    }
    50%
    {
      opacity: 1;
    }
    100%
    {
      opacity: 0;
    }
}
.roll-left
{
  animation: rollLeft 1s forwards ease-in-out;
  position: relative;
}
@keyframes rollLeft
{
  
  from {
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  }

  to {
    clip-path: polygon(0 0, 120% 0, 120% 100%, 0% 100%);
  }
}

.lightRollLeft:after
{
  animation: lightrollLeft 1s ease-in-out forwards;
  right: 0;
}
@keyframes lightrollLeft
{
  from
  {
    right: 0;
    width: 0;
  }
  to 
  {
    right: 100%;
    width: 100% !important; 
  }
}



.roll-right
{
  animation: rollright 1s forwards ease-in-out;
  position: relative;
}
@keyframes rollright
{
  
  from {
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  }

  to {
    clip-path: polygon(-20% 0, 100% 0, 100% 100%, -20% 100%);
  }
}
.lightRollLeft:after, .lightRollRight:after
{
  content: "";
  position: absolute;
  top: 0;
  width: 100% !important;
  height: 100%;
  box-shadow: 0px 0px 30px 10px rgba(255, 255, 255,0.75);
  background-color: rgba(255, 255, 255, 0.7);
}

.lightRollRight:after
{
  animation: lightRollRight 1s ease-in-out forwards !important;
  left: 100%;
}
@keyframes lightRollRight
{
  from
  {
    left: 0;
    width: 0;
  }
  to 
  {
    left: 100% !important;
    width: 100% !important; 
  }

}

.leftMove
{
  animation: leftMove 1s forwards ease-in-out;
}
@keyframes leftMove {
  from
  {
    object-position: 0px 0px
  }
  to
  {
    object-position: -850px 0px
  }
}
.rightMove
{
  animation: rightMove 1s forwards ease-in-out;
}
@keyframes rightMove {
  from
  {
    object-position: 0px 0px;
  }
  to
  {
    object-position: 760px 0;
  }
} */