/* success animacion */

@supports (animation: grow .5s cubic-bezier(.25, .25, .25, 1) forwards) {
     .tick {
        stroke-opacity: 0;
        stroke-dasharray: 29px;
        stroke-dashoffset: 29px;
        animation: draw .5s cubic-bezier(.25, .25, .25, 1) forwards;
        animation-delay: .6s
    }

    .circle {
        fill-opacity: 0;
        stroke: #219a00;
        stroke-width: 16px;
        transform-origin: center;
        transform: scale(0);
        animation: grow 1s cubic-bezier(.25, .25, .25, 1.25) forwards;   
    }   
}

@keyframes grow {
    60% {
        transform: scale(.8);
        stroke-width: 4px;
        fill-opacity: 0;
    }
    100% {
        transform: scale(.9);
        stroke-width: 8px;
        fill-opacity: 1;
        fill: #219a00;
    }
}

@keyframes draw {
    0%, 100% { stroke-opacity: 1; }
    100% { stroke-dashoffset: 0; }
}


/*loader animacion*/

svg .svg-loader {
  transform: rotate(45deg);
}

.gradient {
  animation-iteration-count: infinite;
  animation-duration: 1s;
  fill: url('#gradient-fill');
}
.square {
  animation-iteration-count: infinite;
  animation-duration: 2s;
  transition-timing-function: ease-in-out;
}

.s1 {
  animation-name: slide-1;
}

.s2 {
  animation-name: slide-2;
}

.s3 {
  animation-name: slide-3;
}

.s4 {
  animation-name: slide-4;
}

.s5 {
  animation-name: slide-5;
}

.s6 {
  animation-name: slide-6;
}

.s7 {
  animation-name: slide-7;
}

@keyframes slide-1 {
  37.5% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(100px);
  }
  100% {
    transform: translateX(100px);
  }
}

@keyframes slide-2 {
  25% {
    transform: translateX(0px);
  }
  37.5% {
    transform: translateX(100px);
  }
  100% {
    transform: translateX(100px);
  }
}

@keyframes slide-3 {
  12.5% {
    transform: translateY(0px);
  }
  25% {
    transform: translateY(100px);
  }
  100% {
    transform: translateY(100px);
  }
}

@keyframes slide-4 {
  50% {
    transform: translateY(0px);
  }
  62.5% {
    transform: translateY(-100px);
  }
  100% {
    transform: translateY(-100px);
  }
}

@keyframes slide-5 {
  12.5% {
    transform: translate(-100px, 0px);
  }
  87.5% {
    transform: translate(-100px, 0px);
  }
  100% {
    transform: translate(-100px, 100px);
  }
}

@keyframes slide-6 {
  62.5% {
    transform: translateY(0px);
  }
  75% {
    transform: translateY(-100px);
  }
  100% {
    transform: translateY(-100px);
  }
}

@keyframes slide-7 {
  75%  {
    transform: translateX(0px);
  }
  87.5% {
    transform: translateX(-100px);
  }
  100% {
    transform: translateX(-100px);
  }
}

/*error animacion*/

  /*no necesito css*/

/*warning animation*/

.svg-warning svg{
    width: 45px;
    height: 45px;
    transition: transform .5s ease-out;
    #red-exclamation {
      animation: bounce .5s ease-out forwards;
      transform-origin: center center;
      .exclamation {
        opacity: 0;
        stroke-dasharray: 100;
        stroke-dashoffset: 100;
        animation: excl 1.5s ease forwards .5s;
      }
      .dot {
        opacity: 0;
        stroke-width: 30;
        stroke-linecap: round;
        animation: dot-fade .175s ease forwards .7s;
      }
    }
  }

@keyframes excl {
  0% {
    stroke-dashoffset: 100;
  }
  10% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

@keyframes dot-fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes bounce {
  0% {
    opacity: 0;
    transform: scale(0.1);
  }
  50% {
    transform: scale(1.0);
  }
  75% {
    transform: scale(0.6);
  }
  100% {
    opacity: 1;
    transform: scale(0.9);
  }
}