.bounce-left
{
    animation: bounceleft 0.6s forwards linear;
    opacity: 0;
}
@keyframes bounceleft
{
    0%
    {
        opacity: 0;
     }
     100%
     {
        opacity: 1;
     }
}
.bounce-right
{
    animation: bounceright 0.6s forwards linear;
    opacity: 1;
}
@keyframes bounceright
{
    0%
    {
        opacity: 1;
     }
     100%
     {
        opacity: 0;
     }
}





.delay-100
{
    animation-delay: 100ms;
}
.delay-200
{
    animation-delay: 200ms;
}
.delay-300
{
    animation-delay: 300ms;
}
.delay-400
{
    animation-delay: 400ms;
}

.active::before, .active .step-number::before
{
    animation: left-right 0.5s linear forwards;
}
.active::before
{
    animation-delay: 0.5s;
}
@keyframes left-right
{
    from
    {
        width: 0;
    }
    to
    {
        width: 100px;
    }
}
.checkmark:checked::before
{
    transform-origin: left top;
    animation: checkmark linear both 0.3s;
}
@keyframes checkmark
{
      0%
      {
        height: 0px;
        width: 0;
        opacity: 0;
        right: 75px;
      }
      30%
      {
        height: 15px;
        width: 0;
        opacity: 1;
        right: 75px;
      }
      to
      {
        height: 15px;
        width: 25px;
        opacity: 1;
      }
}



.next:hover i
{
    animation: left .4s forwards;
}

@keyframes left
{
    0%
    {
        transform: translateX(0px);
    }
    100%
    {
        transform: translateX(10px);
    }
}

.prev:hover i
{
    animation: right .4s forwards;
}

@keyframes right
{
    0%
    {
        transform: translateX(0px);
    }
    100%
    {
        transform: translateX(-10px);
    }
}





.wrong
{

    animation: shake 0.5s linear forwards;
  }
  
  @keyframes shake
  {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(0) rotate(0deg); }
  }