/****************************************

To do's and notes:
- Glide animations are not chainable. Maybe with SASS functions?
- Pseudo elements cannot utilize CSS3 animations in webkit.
- Should keyframe mixin arguments be accessible by the user?
- Can the user be able to add/remove animations via JavaScript?
- Use 3d transform to utilize the GPU
- transform: translate3d(0,0,0);
- Use cubic-bezier function on bounce, instead of keyframes?
- Seems to be broken in Safari.
- Add default timing functions


Animation ideas:
- Flashbulb
- Flickering light bulb
- Radioactive (box shadow)
- Sparkle (box shadow)
- Slot machine?
- Spinning lottery ball
- Comet Trails (box shadow)
- whirling red siren (box shadow)
- fire (box shadow)
- energy ball (box shadow)
- cool ice (box shadow)
- smoke (box shadow)
- wave (border radius around an element?)
- circle with waves
- Earthquake
- Wipes?

****************************************/
@-webkit-keyframes fade {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

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

  100% {
    opacity: 0;
  }
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

@-moz-keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
  }

  100% {
    -moz-transform: rotate(360deg);
  }
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
  }

  100% {
    -webkit-transform: scale(1.1);
  }
}

@-moz-keyframes pulse {
  0% {
    -moz-transform: scale(1);
  }

  100% {
    -moz-transform: scale(1.1);
  }
}

@-webkit-keyframes glow {
  0% {
    -webkit-box-shadow: 0px 0px 0px rgba(255, 255, 255, 0.9);
  }

  100% {
    -webkit-box-shadow: 0px 0px 25px rgba(255, 255, 255, 0.9);
  }
}

@-moz-keyframes glow {
  0% {
    -moz-box-shadow: 0px 0px 0px rgba(255, 255, 255, 0.9);
  }

  100% {
    -moz-box-shadow: 0px 0px 25px rgba(255, 255, 255, 0.9);
  }
}

@-webkit-keyframes inner-glow {
  0% {
    -webkit-box-shadow: inset 0px 0px 0px rgba(255, 255, 255, 0.9);
  }

  100% {
    -webkit-box-shadow: inset 0px 0px 25px rgba(255, 255, 255, 0.9);
  }
}

@-moz-keyframes inner-glow {
  0% {
    -moz-box-shadow: inset 0px 0px 0px rgba(255, 255, 255, 0.9);
  }

  100% {
    -moz-box-shadow: inset 0px 0px 25px rgba(255, 255, 255, 0.9);
  }
}

@-webkit-keyframes flash {
  50% {
    box-shadow: inset 0px 0px 100px 100px white;
  }
}

@-moz-keyframes flash {
  50% {
    box-shadow: inset 0px 0px 100px 100px white;
  }
}

@-webkit-keyframes flashbulb {
  50% {
    box-shadow: inset 0px 0px 100px 100px #ffffdc, 0px 0px 30px 10px #ffffdc;
  }
}

@-moz-keyframes flashbulb {
  50% {
    box-shadow: inset 0px 0px 100px 100px #ffffdc, 0px 0px 30px 10px #ffffdc;
  }
}

@-webkit-keyframes shine {
  0% {
    background-position: 100% 100%;
  }

  100% {
    background-position: 0% 0%;
  }
}

@-moz-keyframes shine {
  0% {
    background-position: 100% 100%;
  }

  100% {
    background-position: 0% 0%;
  }
}

@-webkit-keyframes slide {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateX(0px);
  }

  80% {
    opacity: 1;
    -webkit-transform: translateX(0px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(100%);
  }
}

@-moz-keyframes slide {
  0% {
    opacity: 0;
    -moz-transform: translateX(-100%);
  }

  20% {
    opacity: 1;
    -moz-transform: translateX(0px);
  }

  80% {
    opacity: 1;
    -moz-transform: translateX(0px);
  }

  100% {
    opacity: 0;
    -moz-transform: translateX(100%);
  }
}

@-webkit-keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0px);
  }
}

@-moz-keyframes slide-in {
  0% {
    opacity: 0;
    -moz-transform: translateX(-100%);
  }

  100% {
    opacity: 1;
    -moz-transform: translateX(0px);
  }
}

@-webkit-keyframes slide-out {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(100%);
  }
}

@-moz-keyframes slide-out {
  0% {
    opacity: 1;
    -moz-transform: translateX(0px);
  }

  100% {
    opacity: 0;
    -moz-transform: translateX(100%);
  }
}

@-webkit-keyframes roll {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) rotate(-120deg);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
  }

  80% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(100%) rotate(120deg);
  }
}

@-moz-keyframes roll {
  0% {
    opacity: 0;
    -moz-transform: translateX(-100%) rotate(-120deg);
  }

  20% {
    opacity: 1;
    -moz-transform: translateX(0px) rotate(0deg);
  }

  80% {
    opacity: 1;
    -moz-transform: translateX(0px) rotate(0deg);
  }

  100% {
    opacity: 0;
    -moz-transform: translateX(100%) rotate(120deg);
  }
}

@-webkit-keyframes roll-in {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) rotate(-120deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
  }
}

@-moz-keyframes roll-in {
  0% {
    opacity: 0;
    -moz-transform: translateX(-100%) rotate(-120deg);
  }

  100% {
    opacity: 1;
    -moz-transform: translateX(0px) rotate(0deg);
  }
}

@-webkit-keyframes roll-out {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(100%) rotate(120deg);
  }
}

@-moz-keyframes roll-out {
  0% {
    opacity: 1;
    -moz-transform: translateX(0px) rotate(0deg);
  }

  100% {
    opacity: 0;
    -moz-transform: translateX(100%) rotate(120deg);
  }
}

@-webkit-keyframes drop {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateY(0px);
  }

  80% {
    opacity: 1;
    -webkit-transform: translateY(0px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(100%);
  }
}

@-moz-keyframes drop {
  0% {
    opacity: 0;
    -moz-transform: translateY(-100%);
  }

  20% {
    opacity: 1;
    -moz-transform: translateY(0px);
  }

  80% {
    opacity: 1;
    -moz-transform: translateY(0px);
  }

  100% {
    opacity: 0;
    -moz-transform: translateY(100%);
  }
}

@-webkit-keyframes drop-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
  }
}

@-moz-keyframes drop-in {
  0% {
    opacity: 0;
    -moz-transform: translateY(-100%);
  }

  100% {
    opacity: 1;
    -moz-transform: translateY(0px);
  }
}

@-webkit-keyframes drop-out {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(100%);
  }
}

@-moz-keyframes drop-out {
  0% {
    opacity: 1;
    -moz-transform: translateY(0px);
  }

  100% {
    opacity: 0;
    -moz-transform: translateY(100%);
  }
}

@-webkit-keyframes barcode {
  0% {
    background-position: 100% 100%;
  }

  10% {
    opacity: 1;
  }

  100% {
    background-position: 0% 0%;
  }
}

@-moz-keyframes barcode {
  0% {
    background-position: 100% 100%;
  }

  10% {
    opacity: 1;
  }

  100% {
    background-position: 0% 0%;
  }
}

@-webkit-keyframes shake {
  0% {
    -webkit-transform: translateX(0%);
  }

  20% {
    -webkit-transform: translateX(0%);
  }

  30% {
    -webkit-transform: translateX(5%);
  }

  45% {
    -webkit-transform: translateX(-5%);
  }

  60% {
    -webkit-transform: translateX(5%);
  }

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

  100% {
    -webkit-transform: translateX(0%);
  }
}

@-moz-keyframes shake {
  0% {
    -moz-transform: translateX(0%);
  }

  20% {
    -moz-transform: translateX(0%);
  }

  30% {
    -moz-transform: translateX(5%);
  }

  45% {
    -moz-transform: translateX(-5%);
  }

  60% {
    -moz-transform: translateX(5%);
  }

  75% {
    -moz-transform: translateX(-5%);
  }

  100% {
    -moz-transform: translateX(0%);
  }
}

@-webkit-keyframes wobble {
  0% {
    -webkit-transform: translateX(0%);
  }

  15% {
    -webkit-transform: translateX(-25%) rotate(-5deg);
  }

  30% {
    -webkit-transform: translateX(20%) rotate(3deg);
  }

  45% {
    -webkit-transform: translateX(-15%) rotate(-3deg);
  }

  60% {
    -webkit-transform: translateX(10%) rotate(2deg);
  }

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

  100% {
    -webkit-transform: translateX(0%);
  }
}

@-moz-keyframes wobble {
  0% {
    -moz-transform: translateX(0%);
  }

  15% {
    -moz-transform: translateX(-25%) rotate(-5deg);
  }

  30% {
    -moz-transform: translateX(20%) rotate(3deg);
  }

  45% {
    -moz-transform: translateX(-15%) rotate(-3deg);
  }

  60% {
    -moz-transform: translateX(10%) rotate(2deg);
  }

  75% {
    -moz-transform: translateX(-5%) rotate(-1deg);
  }

  100% {
    -moz-transform: translateX(0%);
  }
}

@-webkit-keyframes bounce {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
  }

  30% {
    opacity: 1;
    -webkit-transform: translateY(0%);
  }

  35% {
    -webkit-transform: translateY(-25%);
  }

  60% {
    -webkit-transform: translateY(0%);
  }

  65% {
    -webkit-transform: translateY(-5%);
  }

  80% {
    -webkit-transform: translateY(0px);
  }

  100% {
    -webkit-transform: translateY(0px);
  }
}

@-moz-keyframes bounce {
  0% {
    opacity: 0;
    -moz-transform: translateY(-100%);
  }

  30% {
    opacity: 1;
    -moz-transform: translateY(0%);
  }

  35% {
    -moz-transform: translateY(-25%);
  }

  60% {
    -moz-transform: translateY(0%);
  }

  65% {
    -moz-transform: translateY(-5%);
  }

  80% {
    -moz-transform: translateY(0px);
  }

  100% {
    -moz-transform: translateY(0px);
  }
}

@-webkit-keyframes stomp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
    -webkit-box-shadow: -30px 40px 0px -30px rgba(255, 255, 255, 0),
      0px 40px 0px -30px rgba(255, 255, 255, 0),
      30px 40px 0px -30px rgba(255, 255, 255, 0);
  }

  20% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
    -webkit-box-shadow: -30px 40px 0px -30px rgba(255, 255, 255, 0),
      0px 40px 0px -30px rgba(255, 255, 255, 0),
      30px 40px 0px -30px rgba(255, 255, 255, 0);
  }

  25% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -webkit-box-shadow: -50px 60px 0px -30px rgba(255, 255, 255, 0),
      0px 60px 0px -30px rgba(255, 255, 255, 0),
      50px 60px 0px -30px rgba(255, 255, 255, 0);
  }

  29% {
    -webkit-box-shadow: -70px 80px 70px -30px rgba(255, 255, 255, 0.5),
      0px 80px 70px -30px rgba(255, 255, 255, 0.7),
      70px 80px 70px -30px rgba(255, 255, 255, 0.6);
  }

  100% {
    -webkit-box-shadow: -100px 90px 120px -10px rgba(255, 255, 255, 0),
      0px 90px 120px -10px rgba(255, 255, 255, 0),
      100px 90px 120px -10px rgba(255, 255, 255, 0);
  }
}

@-moz-keyframes stomp {
  0% {
    opacity: 0;
    -moz-transform: translateY(-100%);
    -moz-box-shadow: -30px 40px 0px -30px rgba(255, 255, 255, 0),
      0px 40px 0px -30px rgba(255, 255, 255, 0),
      30px 40px 0px -30px rgba(255, 255, 255, 0);
  }

  20% {
    opacity: 0;
    -moz-transform: translateY(-100%);
    -moz-box-shadow: -30px 40px 0px -30px rgba(255, 255, 255, 0),
      0px 40px 0px -30px rgba(255, 255, 255, 0),
      30px 40px 0px -30px rgba(255, 255, 255, 0);
  }

  25% {
    opacity: 1;
    -moz-transform: translateY(0px);
    -moz-box-shadow: -50px 60px 0px -30px rgba(255, 255, 255, 0),
      0px 60px 0px -30px rgba(255, 255, 255, 0),
      50px 60px 0px -30px rgba(255, 255, 255, 0);
  }

  29% {
    -moz-box-shadow: -70px 80px 70px -30px rgba(255, 255, 255, 0.5),
      0px 80px 70px -30px rgba(255, 255, 255, 0.7),
      70px 80px 70px -30px rgba(255, 255, 255, 0.6);
  }

  100% {
    -moz-box-shadow: -100px 90px 120px -10px rgba(255, 255, 255, 0),
      0px 90px 120px -10px rgba(255, 255, 255, 0),
      100px 90px 120px -10px rgba(255, 255, 255, 0);
  }
}

@-webkit-keyframes redalert {
  50% {
    box-shadow: -100px 0px 50px -50px #ff3232, 100px 0px 50px -50px #ff3232,
      inset 0px 0px 200px #ff3232;
    background-color: #fff;
  }
}

@-moz-keyframes redalert {
}
@-webkit-keyframes glide {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%);
    background-position: 0% 0%;
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
    background-position: 100% 100%;
  }
}

@-moz-keyframes glide {
  0% {
    opacity: 0;
    -moz-transform: translateX(-100%);
    background-position: 0% 0%;
  }

  100% {
    opacity: 1;
    -moz-transform: translateX(0%);
    background-position: 100% 100%;
  }
}

/********************************
 BASE
 ********************************/
.clearfix:after {
  content: ".";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

/* body {
  background: #444;
}

#wrapper {
  width: 960px;
  margin: 50px auto;
  background: #999;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.7);
}

.box {
  width: 120px;
  height: 120px;
  display: block;
  margin: 50px;
  padding: 10px;
  background: transparent;
  color: #fff;
  float: left;
  position: relative;
} */

#fade {
  -webkit-animation: fade 2s ease 0s infinite normal;
  -moz-animation: fade 2s ease 0s infinite normal;
  animation: fade 2s ease 0s infinite normal;
}

#spin {
  -webkit-animation: spin 15s linear 0s infinite normal;
  -moz-animation: spin 15s linear 0s infinite normal;
  animation: spin 15s linear 0s infinite normal;
}

#pulse {
  -webkit-animation: pulse 0.5s ease 0s infinite alternate;
  -moz-animation: pulse 0.5s ease 0s infinite alternate;
  animation: pulse 0.5s ease 0s infinite alternate;
}

#glow {
  -webkit-animation: glow 0.7s ease 0s infinite alternate;
  -moz-animation: glow 0.7s ease 0s infinite alternate;
  animation: glow 0.7s ease 0s infinite alternate;
}

#flash {
  -webkit-animation: flash 1.2s linear 0s infinite alternate;
  -moz-animation: flash 1.2s linear 0s infinite alternate;
  animation: flash 1.2s linear 0s infinite alternate;
}

#flashbulb {
  -webkit-animation: flashbulb 1.2s linear 0s infinite alternate;
  -moz-animation: flashbulb 1.2s linear 0s infinite alternate;
  animation: flashbulb 1.2s linear 0s infinite alternate;
}

#shine {
  background: -webkit-linear-gradient(
      right bottom,
      rgba(255, 255, 255, 0) 30%,
      rgba(255, 255, 255, 0.4) 45%,
      white 50%,
      rgba(255, 255, 255, 0.4) 55%,
      rgba(255, 255, 255, 0) 70%
    )
    no-repeat;
  background: -moz-linear-gradient(
      right bottom,
      rgba(255, 255, 255, 0) 30%,
      rgba(255, 255, 255, 0.4) 45%,
      white 50%,
      rgba(255, 255, 255, 0.4) 55%,
      rgba(255, 255, 255, 0) 70%
    )
    no-repeat;
  -webkit-background-size: 500% 300%;
  -moz-background-size: 500% 300%;
  background-size: 500% 300%;
  -webkit-animation-name: inner-glow, shine;
  -moz-animation-name: inner-glow, shine;
  animation-name: inner-glow, shine;
  -webkit-animation-duration: 0.7s, 1.4s;
  -moz-animation-duration: 0.7s, 1.4s;
  animation-duration: 0.7s, 1.4s;
  -webkit-animation-timing-function: ease-in, ease;
  -moz-animation-timing-function: ease-in, ease;
  animation-timing-function: ease-in, ease;
  -webkit-animation-delay: 0s, 0s;
  -moz-animation-delay: 0s, 0s;
  animation-delay: 0s, 0s;
  -webkit-animation-iteration-count: infinite, infinite;
  -moz-animation-iteration-count: infinite, infinite;
  animation-iteration-count: infinite, infinite;
  -webkit-animation-direction: alternate, normal;
  -moz-animation-direction: alternate, normal;
  animation-direction: alternate, normal;
}

#slide {
  -webkit-animation: slide 2s ease 0s infinite normal;
  -moz-animation: slide 2s ease 0s infinite normal;
  animation: slide 2s ease 0s infinite normal;
}

#slide_in {
  -webkit-animation: slide-in 1s ease 0s infinite normal;
  -moz-animation: slide-in 1s ease 0s infinite normal;
  animation: slide-in 1s ease 0s infinite normal;
}

#slide_out {
  -webkit-animation: slide-out 1s ease 0s infinite normal;
  -moz-animation: slide-out 1s ease 0s infinite normal;
  animation: slide-out 1s ease 0s infinite normal;
}

#drop {
  -webkit-animation: drop 2s ease 0s infinite normal;
  -moz-animation: drop 2s ease 0s infinite normal;
  animation: drop 2s ease 0s infinite normal;
}

#drop_in {
  -webkit-animation: drop-in 1s ease 0s infinite normal;
  -moz-animation: drop-in 1s ease 0s infinite normal;
  animation: drop-in 1s ease 0s infinite normal;
}

#drop_out {
  -webkit-animation: drop-out 1s ease 0s infinite normal;
  -moz-animation: drop-out 1s ease 0s infinite normal;
  animation: drop-out 1s ease 0s infinite normal;
}

#roll {
  -webkit-animation: roll 2s ease 0s infinite normal;
  -moz-animation: roll 2s ease 0s infinite normal;
  animation: roll 2s ease 0s infinite normal;
}

#roll_in {
  -webkit-animation: roll-in 1s ease 0s infinite normal;
  -moz-animation: roll-in 1s ease 0s infinite normal;
  animation: roll-in 1s ease 0s infinite normal;
}

#roll_out {
  -webkit-animation: roll-out 1s ease 0s infinite normal;
  -moz-animation: roll-out 1s ease 0s infinite normal;
  animation: roll-out 1s ease 0s infinite normal;
}

#barcode {
  background: -webkit-linear-gradient(
      top,
      rgba(230, 0, 0, 0) 40%,
      rgba(230, 0, 0, 0.1) 45%,
      rgba(230, 0, 0, 0.6) 49%,
      #ff1414 50%,
      rgba(230, 0, 0, 0.6) 51%,
      rgba(230, 0, 0, 0.1) 55%,
      rgba(230, 0, 0, 0) 60%
    )
    no-repeat;
  background: -moz-linear-gradient(
      top,
      rgba(230, 0, 0, 0) 40%,
      rgba(230, 0, 0, 0.1) 45%,
      rgba(230, 0, 0, 0.6) 49%,
      #ff1414 50%,
      rgba(230, 0, 0, 0.6) 51%,
      rgba(230, 0, 0, 0.1) 55%,
      rgba(230, 0, 0, 0) 60%
    )
    no-repeat;
  -webkit-background-size: 100% 300%;
  -moz-background-size: 100% 300%;
  background-size: 100% 300%;
  -webkit-animation: barcode 1s ease 0s infinite alternate;
  -moz-animation: barcode 1s ease 0s infinite alternate;
  animation: barcode 1s ease 0s infinite alternate;
}

#shake {
  -webkit-animation: shake 1s ease 0s infinite normal;
  -moz-animation: shake 1s ease 0s infinite normal;
  animation: shake 1s ease 0s infinite normal;
}

#wobble {
  -webkit-animation: wobble 1s ease 0s infinite normal;
  -moz-animation: wobble 1s ease 0s infinite normal;
  animation: wobble 1s ease 0s infinite normal;
}

#bounce {
  -webkit-animation: bounce 1s linear 0s infinite normal;
  -moz-animation: bounce 1s linear 0s infinite normal;
  animation: bounce 1s linear 0s infinite normal;
}

#stomp {
  -webkit-animation: stomp 2s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0s infinite
    normal;
  -moz-animation: stomp 2s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0s infinite
    normal;
  animation: stomp 2s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0s infinite normal;
}

#redalert {
  -webkit-animation: redalert 0.5s linear 0s infinite normal;
  -moz-animation: redalert 0.5s linear 0s infinite normal;
  animation: redalert 0.5s linear 0s infinite normal;
}

#glide {
  background: -webkit-linear-gradient(
      right bottom,
      rgba(255, 255, 255, 0) 30%,
      rgba(255, 255, 255, 0.4) 45%,
      white 50%,
      rgba(255, 255, 255, 0.4) 55%,
      rgba(255, 255, 255, 0) 70%
    )
    no-repeat;
  background: -moz-linear-gradient(
      right bottom,
      rgba(255, 255, 255, 0) 30%,
      rgba(255, 255, 255, 0.4) 45%,
      white 50%,
      rgba(255, 255, 255, 0.4) 55%,
      rgba(255, 255, 255, 0) 70%
    )
    no-repeat;
  -webkit-background-size: 500% 300%;
  -moz-background-size: 500% 300%;
  background-size: 500% 300%;
  -webkit-animation: glide 1.5s ease 0s infinite normal;
  -moz-animation: glide 1.5s ease 0s infinite normal;
  animation: glide 1.5s ease 0s infinite normal;
}