#animatedRing {
  -webkit-transform-origin: 50% 80%;
          transform-origin: 50% 80%;
  
  -webkit-animation-duration: 1s;
  
          animation-duration: 1s;
  -webkit-animation-name: wiggle;
          animation-name: wiggle;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-animation-timing-function: cubic-bezier(0.3, 3, 0.7, 2);
          animation-timing-function: cubic-bezier(0.3, 3, 0.7, 2);
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}

#animatedRing:hover {
  -webkit-animation-play-state: running;
          animation-play-state: running;
}

@-webkit-keyframes wiggle {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  
  25% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }

  75% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
  }

  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}

@keyframes wiggle {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  
  25% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }

  75% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
  }

  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}

#animatedRing #sparkle {
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-name: sparkle;
          animation-name: sparkle;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-animation-timing-function: cubic-bezier(0.5, 5, 0.2, 2);
          animation-timing-function: cubic-bezier(0.5, 5, 0.2, 2);
  -webkit-animation-play-state: running;
          animation-play-state: running;
}

@-webkit-keyframes sparkle {
  from {
    opacity: 0;
  }
  
  25% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }

  75% {
    opacity: 0.8;
  }

  to {
    opacity: 0;
  }
}

@keyframes sparkle {
  from {
    opacity: 0;
  }
  
  25% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }

  75% {
    opacity: 0.8;
  }

  to {
    opacity: 0;
  }
}

.loading {
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-name: pulse;
          animation-name: pulse;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-play-state: running;
          animation-play-state: running;
}

@-webkit-keyframes pulse {
  from {
    opacity: 1;
  }

  70% {
    opacity: 0.5;
  }

  to {
    opacity: 1;
  }
}

@keyframes pulse {
  from {
    opacity: 1;
  }

  70% {
    opacity: 0.5;
  }

  to {
    opacity: 1;
  }
}