@import "https://fonts.googleapis.com/css?family=Montserrat";

.fa-arrow-right {
  animation: arrow-right 0.5s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
}
.fa-arrows-alt:hover {
  animation: arrows-alt 1s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
}
.fa-expand:hover {
  animation: expand 0.5s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
}
.fa-refresh {
  animation: refresh 1s cubic-bezier(0.36, 0.07, 0.57, 0.99) 2;
}
.fa-heart {
  animation: heart 0.5s cubic-bezier(0.36, 0.07, 0.57, 0.99) 5;
}
.fa-undo:hover {
  animation: undo 1s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
}
.fa-italic:hover {
  animation: italic 1s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
}
.fa-cog:hover {
  animation: cog 5s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
}
.fa-wrench:hover {
  transform-origin: 79% 26%;
  animation: wrench 1s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
}
.fa-mouse-pointer {
  animation: mouse-pointer 1s cubic-bezier(0.36, 0.07, 0.57, 0.99) 3;
}
.fa-magic:hover {
  animation: magic 1s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
}
.fa-lock:hover {
  animation: lock 1s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
}
.fa-unlock {
  transform-origin: 75% 25%;
  animation: unlock 1s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
}
.fa-hourglass:hover {
  animation: hourglass 1s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
}
.fa-eraser:hover {
  animation: eraser 1s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
}
.fa-rocket {
  animation: rocket 1s cubic-bezier(0.36, 0.07, 0.57, 0.99) 2;
}
.fa-times {
  animation: times 1s cubic-bezier(0.36, 0.07, 0.57, 0.99) 2;
}
.battery-fill:hover {
  .fa-battery-quarter {
    animation: battery 2s 0.4s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
  }
  .fa-battery-half {
    animation: battery 2s 0.8s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
  }
  .fa-battery-three-quarters {
    animation: battery 2s 1.2s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
  }
  .fa-battery-full {
    animation: battery 2s 1.6s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
  }
}
.battery-drain:hover {
  .fa-battery-quarter {
    animation: battery 2s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
  }
  .fa-battery-half {
    animation: battery 2s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
  }
  .fa-battery-three-quarters {
    animation: battery 2s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
  }
  .fa-battery-full {
    animation: battery 2s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
  }
}
@keyframes arrow-right {
  0% {
    transform: scale(1) translateX(0);
  }
  33% {
    transform: scale(1) translateX(-5px);
  }
  66% {
    transform: scale(1) translateX(5px);
  }
  100% {
    transform: scale(1) translateX(0);
  }
}
@keyframes arrows-alt {
  0% {
    transform: scale(1.5) translate(0, 0);
  }
  20% {
    transform: scale(1.5) translate(-5px, 5px);
  }
  40% {
    transform: scale(1.5) translate(-5px, -5px);
  }
  60% {
    transform: scale(1.5) translate(5px, 5px);
  }
  80% {
    transform: scale(1.5) translate(5px, -5px);
  }
  100% {
    transform: scale(1.5) translate(0, 0);
  }
}
@keyframes expand {
  0% {
    transform: scale(1.5) translate(0, 0);
  }
  25% {
    transform: scale(1.5) translate(-5px, 5px);
  }
  50% {
    transform: scale(2) translate(0, 0);
  }
  75% {
    transform: scale(1.5) translate(5px, -5px);
  }
  100% {
    transform: scale(1.5) translate(0, 0);
  }
}
@keyframes refresh {
  from {
    transform: scale(1) rotate(0);
  }
  to {
    transform: scale(1) rotate(360deg);
  }
}
@keyframes heart {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(1.2);
  }
  30% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes undo {
  0% {
    transform: scale(1.5) translateX(0) rotate(0);
  }
  33% {
    transform: scale(1.5) translateX(10px) rotate(0);
  }
  66% {
    transform: scale(1.5) translateX(-10px) rotate(-360deg);
  }
  100% {
    transform: scale(1.5) translateX(0) rotate(-360deg);
  }
}
@keyframes italic {
  0% {
    transform: scale(1.5) skewX(0);
  }
  50% {
    transform: scale(1.5) skewX(12deg);
  }
  100% {
    transform: scale(1.5) skewX(0);
  }
}
@keyframes cog {
  0% {
    transform: scale(1.5) rotate(0);
  }
  10% {
    transform: scale(1.5) rotate(45deg);
  }
  17% {
    transform: scale(1.5) rotate(45deg);
  }
  20% {
    transform: scale(1.5) rotate(90deg);
  }
  27% {
    transform: scale(1.5) rotate(90deg);
  }
  30% {
    transform: scale(1.5) rotate(135deg);
  }
  37% {
    transform: scale(1.5) rotate(135deg);
  }
  40% {
    transform: scale(1.5) rotate(180deg);
  }
  47% {
    transform: scale(1.5) rotate(180deg);
  }
  50% {
    transform: scale(1.5) rotate(225deg);
  }
  57% {
    transform: scale(1.5) rotate(225deg);
  }
  60% {
    transform: scale(1.5) rotate(270deg);
  }
  67% {
    transform: scale(1.5) rotate(270deg);
  }
  70% {
    transform: scale(1.5) rotate(315deg);
  }
  77% {
    transform: scale(1.5) rotate(315deg);
  }
  80% {
    transform: scale(1.5) rotate(360deg);
  }
  100% {
    transform: scale(1.5) rotate(360deg);
  }
}
@keyframes wrench {
  0% {
    transform: scale(1.5) rotate(0);
  }
  20% {
    transform: scale(1.5) rotate(30deg);
  }
  30% {
    transform: scale(1.5) rotate(-20deg);
  }
  50% {
    transform: scale(1.5) rotate(30deg);
  }
  60% {
    transform: scale(1.5) rotate(-20deg);
  }
  100% {
    transform: scale(1.5) rotate(0);
  }
}
@keyframes mouse-pointer {
  0% {
    transform: scale(1.2);
  }
  20% {
    transform: scale(1.2);
  }
  22.5% {
    transform: scale(1);
  }
  32.5% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1.2);
  }
}
@keyframes magic {
  0% {
    transform: scale(1.5) translate(0, 0) rotate(0);
  }
  10% {
    transform: scale(1.5) translate(-5px, 2.5px) rotate(-10deg);
  }
  20% {
    transform: scale(1.5) translate(-10px, 0) rotate(-20deg);
  }
  30% {
    transform: scale(1.5) translate(-5px, -2.5px) rotate(-30deg);
  }
  40% {
    transform: scale(1.5) translate(0, 0) rotate(-20deg);
  }
  50% {
    transform: scale(1.5) translate(5px, 2.5px) rotate(-10deg);
  }
  60% {
    transform: scale(1.5) translate(10px, 0) rotate(0);
  }
  70% {
    transform: scale(1.5) translate(5px, -2.5px) rotate(10deg);
  }
  100% {
    transform: scale(1.5) translate(0, 0) rotate(0);
  }
}
@keyframes lock {
  0% {
    transform: scale(1.5) translateY(0);
  }
  20% {
    transform: scale(1.5) translateY(-5px);
  }
  30% {
    transform: scale(1.5) translateY(5px);
  }
  50% {
    transform: scale(1.5) translateY(-5px);
  }
  60% {
    transform: scale(1.5) translateY(5px);
  }
  100% {
    transform: scale(1.5) translateY(0);
  }
}
@keyframes unlock {
  0% {
    transform: scale(1) rotate(-15deg);
  }
  15% {
    transform: scale(1) rotate(-40deg);
  }
  30% {
    transform: scale(1) rotate(5deg);
  }
  45% {
    transform: scale(1) rotate(-30deg);
  }
  60% {
    transform: scale(1) rotate(-5deg);
  }
  75% {
    transform: scale(1) rotate(-20deg);
  }
  90% {
    transform: scale(1) rotate(-15deg);
  }
  100% {
    transform: scale(1) rotate(-15deg);
  }
}
@keyframes hourglass {
  0% {
    transform: scale(1.5) rotate(0);
  }
  35% {
    transform: scale(1.5) rotate(180deg);
  }
  65% {
    transform: scale(1.5) rotate(180deg);
  }
  100% {
    transform: scale(1.5) rotate(0);
  }
}
@keyframes eraser {
  0% {
    transform: scale(1.5) translate(0, 0);
  }
  15% {
    transform: scale(1.5) translate(-10px, -5px);
  }
  30% {
    transform: scale(1.5) translate(-10px, 5px);
  }
  45% {
    transform: scale(1.5) translate(-5px, -5px);
  }
  60% {
    transform: scale(1.5) translate(-5px, 5px);
  }
  75% {
    transform: scale(1.5) translate(0, 0);
  }
  100% {
    transform: scale(1.5) translate(10px, 0);
  }
}
@keyframes rocket {
  0% {
    transform: scale(1) translate(0, 0);
    opacity: 1;
  }
  5% {
    transform: scale(1) translate(2px, 0);
    opacity: 1;
  }
  10% {
    transform: scale(1) translate(1px, -2px);
    opacity: 1;
  }
  15% {
    transform: scale(1) translate(3px, -1px);
    opacity: 1;
  }
  20% {
    transform: scale(1) translate(2px, -3px);
    opacity: 1;
  }
  25% {
    transform: scale(1) translate(4px, -2px);
    opacity: 1;
  }
  50% {
    transform: scale(1) translate(10px, -10px);
    opacity: 0;
  }
  51% {
    transform: scale(1) translate(-10px, 10px);
    opacity: 0;
  }
  100% {
    transform: scale(1) translate(0, 0);
    opacity: 1;
  }
}
@keyframes times {
  0% {
    transform: scale(1) translateX(0);
  }
  15% {
    transform: scale(1) translateX(5px);
  }
  30% {
    transform: scale(1) translateX(-5px);
  }
  45% {
    transform: scale(1) translateX(3px);
  }
  60% {
    transform: scale(1) translateX(-3px);
  }
  75% {
    transform: scale(1) translateX(0);
  }
  100% {
    transform: scale(1) translateX(0);
  }
}
@keyframes battery {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}