.animated-sprite {
  position: relative;
  border-radius: 50%;
  display: inline-block;
  height: 120px;
  width: 120px;
  animation: inner-circle 2s 0.5s forwards alternate infinite;
  -webkit-animation: inner-circle 2s 0.5s forwards alternate infinite;
  transition: 0.5s height,width ease; }
  .animated-sprite.paused {
    -webkit-animation: none !important;
    animation: none !important; }
    .animated-sprite.paused::before, .animated-sprite.paused::after {
      animation: none !important;
      -webkit-animation: none !important; }
  .animated-sprite::before {
    left: 0;
    position: absolute;
    top: 0;
    border: 10px solid;
    border-radius: 50%;
    display: inline-block;
    height: 100%;
    width: 100%;
    content: '';
    box-sizing: border-box;
    animation: circle-pulse 2s 1s infinite;
    -webkit-animation: circle-pulse 2s 1s infinite; }
  .animated-sprite::after {
    left: 0;
    position: absolute;
    top: 0;
    display: inline-block;
    font-family: FontAwesome; }
  .animated-sprite[data-type="check"] {
    background: #0b0; }
    .animated-sprite[data-type="check"]::before {
      border-color: #0b0; }
    .animated-sprite[data-type="check"]::after {
      padding: 15% 16%;
      width: 70%;
      content: url("../SVG/check.svg");
      animation: spinY 2s 0.5s forwards alternate infinite;
      -webkit-animation: spinY 2s 0.5s forwards alternate infinite; }
  .animated-sprite[data-type="error"] {
    background: #f00; }
    .animated-sprite[data-type="error"]::before {
      border-color: #f00; }
    .animated-sprite[data-type="error"]::after {
      padding: 11% 20%;
      width: 60%;
      content: url("../SVG/close.svg");
      animation: spinZ 2s 0.5s forwards alternate infinite;
      -webkit-animation: spinZ 2s 0.5s forwards alternate infinite; }
  .animated-sprite[data-type="info"] {
    background: #8a8a8a; }
    .animated-sprite[data-type="info"]::before {
      border-color: #8a8a8a; }
    .animated-sprite[data-type="info"]::after {
      padding: 13% 36%;
      width: 28%;
      content: url("../SVG/info.svg");
      animation: spinX 2s 0.5s forwards alternate infinite;
      -webkit-animation: spinX 2s 0.5s forwards alternate infinite; }
  .animated-sprite[data-type="warning"] {
    background: #ffdb01; }
    .animated-sprite[data-type="warning"]::before {
      border-color: #ffdb01; }
    .animated-sprite[data-type="warning"]::after {
      padding: 18% 21%;
      width: 60%;
      content: url("../SVG/exclamation-triangle.svg");
      animation: spinY 2s 0.5s forwards alternate infinite;
      -webkit-animation: spinY 2s 0.5s forwards alternate infinite; }
  .animated-sprite[data-type="question"] {
    background: #3882ff; }
    .animated-sprite[data-type="question"]::before {
      border-color: #3882ff; }
    .animated-sprite[data-type="question"]::after {
      padding: 10% 25%;
      width: 45%;
      content: url("../SVG/question.svg");
      animation: spinZ 2s 0.5s forwards alternate infinite;
      -webkit-animation: spinZ 2s 0.5s forwards alternate infinite; }
  .animated-sprite[data-type="loading"] {
    background: #ff8900; }
    .animated-sprite[data-type="loading"]::before {
      border-color: #ff8900; }
    .animated-sprite[data-type="loading"]::after {
      padding: 21% 22%;
      width: 55%;
      content: url("../SVG/refresh.svg");
      animation: spinContinuous 2s 0.5s forwards linear infinite;
      -webkit-animation: spinContinuous 2s 0.5s forwards linear infinite; }

@keyframes circle-pulse {
  0% {
    transform: scale(1);
    border-color: auto; }
  50% {
    transform: scale(1.5);
    border-color: transparent; }
  100% {
    transform: scale(1.5);
    border-color: transparent; } }
@-webkit-keyframes circle-pulse {
  0% {
    transform: scale(1);
    border-color: auto; }
  50% {
    transform: scale(1.5);
    border-color: transparent; }
  100% {
    transform: scale(1.5);
    border-color: transparent; } }
@keyframes inner-circle {
  0% {
    transform: scale(0);
    color: transparent; }
  50% {
    transform: scale(1);
    color: inherit; }
  100% {
    transform: scale(1);
    color: inherit; } }
@-webkit-keyframes inner-circle {
  0% {
    -webkit-transform: scale(0);
    color: transparent; }
  50% {
    -webkit-transform: scale(1);
    color: inherit; }
  100% {
    -webkit-transform: scale(1);
    color: inherit; } }
@keyframes spinY {
  0% {
    transform: scale(0) rotateY(0deg); }
  50% {
    transform: scale(1) rotateY(360deg);
    color: #fff; }
  100% {
    transform: scale(1) rotateY(360deg);
    color: #fff; } }
@-webkit-keyframes spinY {
  0% {
    -webkit-transform: scale(0) rotateY(0deg); }
  50% {
    -webkit-transform: scale(1) rotateY(360deg);
    color: #fff; }
  100% {
    -webkit-transform: scale(1) rotateY(360deg);
    color: #fff; } }
@keyframes spinZ {
  0% {
    transform: scale(0) rotateZ(0deg); }
  50% {
    transform: scale(1) rotateZ(360deg);
    color: #fff; }
  100% {
    transform: scale(1) rotateZ(360deg);
    color: #fff; } }
@-webkit-keyframes spinZ {
  0% {
    -webkit-transform: scale(0) rotateZ(0deg); }
  50% {
    -webkit-transform: scale(1) rotateZ(360deg);
    color: #fff; }
  100% {
    -webkit-transform: scale(1) rotateZ(360deg);
    color: #fff; } }
@keyframes spinX {
  0% {
    transform: scale(0) rotateX(0deg); }
  50% {
    transform: scale(1) rotateX(360deg);
    color: #fff; }
  100% {
    transform: scale(1) rotateX(360deg);
    color: #fff; } }
@-webkit-keyframes spinX {
  0% {
    -webkit-transform: scale(0) rotateX(0deg); }
  50% {
    -webkit-transform: scale(1) rotateX(360deg);
    color: #fff; }
  100% {
    -webkit-transform: scale(1) rotateX(360deg);
    color: #fff; } }
@keyframes spinContinuous {
  0% {
    transform: rotateZ(0deg); }
  100% {
    transform: rotateZ(360deg); } }
@-webkit-keyframes spinContinuous {
  0% {
    transform: rotateZ(0deg); }
  100% {
    transform: rotateZ(360deg); } }