.bounce-left
{
    animation: bounceleft 0.6s forwards linear;
    opacity: 0;
}
@keyframes bounceleft
{
    0%
    {
        opacity: 0;
        transform: translateY(-2000px);
     }
     60%
     {
        opacity: 1;
        transform: translateY(30px);
     }
     80%
     {
        opacity: 1;
        transform: translateY(-10px);
     }
     100%
     {
        opacity: 1;
        transform: translateY(0);
     }
}
.bounce-right
{
    animation: bounceright 0.6s forwards linear;
    opacity: 1;
}
@keyframes bounceright
{
    0%
    {
        opacity: 1;
        transform: translateY(0);
     }
     60%
     {
        opacity: 1;
        transform: translateY(10px);
     }
     80%
     {
        opacity: 1;
        transform: translateY(-30px);
     }
     100%
     {
        opacity: 0;
        transform: translateY(2000px);
     }
}





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

.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);
    }
}