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

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 fadeIn {
  0% {
    opacity: 0; }

  100% {
    opacity: 1; } }

@-moz-keyframes fadeIn {
  0% {
    opacity: 0; }

  100% {
    opacity: 1; } }

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

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

    100% {
        opacity: 0;
    }
}

@keyframes fadeOut {
    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); } }

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

    100% {
        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); } }

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

    100% {
        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); } }

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

    100% {
        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); } }

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

    100% {
        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; } }

@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; } }
@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%; } }

@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%); } }

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

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

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

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



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

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

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

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


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

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

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

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


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

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

    100% {
        opacity: 1;
        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%); } }
@keyframes slide-out {
    0% {
        opacity: 1;
        transform: translateX(0px);
    }

    100% {
        opacity: 0;
        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); } }

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

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

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

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



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

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

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

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

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

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


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

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

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

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

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

    100% {
        opacity: 1;
        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); } }
@keyframes roll-out {
    0% {
        opacity: 1;
        transform: translateX(0px) rotate(0deg);
    }

    100% {
        opacity: 0;
        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%); } }

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

    100% {
        opacity: 1;
        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%); } }

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

    100% {
        opacity: 0;
        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%; } }

@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%); } }

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

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

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

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

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

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

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





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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    30% {
        opacity: 1;
        transform: translateX(20%) rotate(3deg);
    }

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

    60% {
        opacity: 1;
        transform: translateX(10%) rotate(2deg);
    }

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

    60% {
        opacity: 1;
        transform: translateY(0%);
    }

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

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

    100% {
        opacity: 1;
        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% {
        opacity: 1;
        -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% {
        opacity: 1;
        -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% {
        opacity: 1;
        -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% {
        opacity: 1;
        -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);
    } }

@keyframes stomp {
    0% {
        opacity: 0;
        transform: translateY(-100%);
        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;
        transform: translateY(-100%);
        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;
        transform: translateY(0px);
        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% {
        opacity: 1;
        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% {
        opacity: 1;
        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 {
    50% {
        box-shadow: -100px 0px 50px -50px #ff3232, 100px 0px 50px -50px #ff3232, inset 0px 0px 200px #ff3232;
        background-color: #FFF;
    }}


@keyframes redalert {
    50% {
        box-shadow: -100px 0px 50px -50px #ff3232, 100px 0px 50px -50px #ff3232, inset 0px 0px 200px #ff3232;
        background-color: #FFF;
    }
}
@-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%; } }

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

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

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



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

.box-effect {
  display: block;

  position: relative; }

.b4a_fadeIn {
    -webkit-animation: fadeIn 2s ease 0s infinite normal;
    -moz-animation: fadeIn 2s ease 0s infinite normal;
    animation: fadeIn 2s ease 0s infinite normal;
    animation-name: fadeIn ;
}


.b4a_fadeOut {
    -webkit-animation: fadeOut 2s ease 0s infinite normal;
    -moz-animation: fadeOut 2s ease 0s infinite normal;
    animation: fadeOut 2s ease 0s infinite normal;
    animation-name: fadeOut;
}

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

#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;
    animation-name: pulse;
}

.b4a_glow {
    -webkit-animation: glow 0.5s ease 0s infinite alternate;
    -moz-animation: glow 0.5s ease 0s infinite alternate;
    animation: glow 0.5s ease 0s infinite alternate;
    animation-name: glow;
}

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

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

#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, #0066aa;
  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, #0066aa;
  -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.5s, 1s;
  -moz-animation-duration: 0.5s, 1s;
  animation-duration: 0.5s, 1s;
  -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; }

.b4a_slide {
    -webkit-animation: slide 2s ease 0s infinite normal;
    -moz-animation: slide 2s ease 0s infinite normal;
    animation: slide 2s ease 0s infinite normal;
    animation-name: slide;
}

.b4a_slide_inLeft {
    -webkit-animation: slide-inLeft 1s ease 0s infinite normal;
    -moz-animation: slide-inLeft 1s ease 0s infinite normal;
    animation: slide-inLeft 1s ease 0s infinite normal;
    animation-name: slide-inLeft;
}
.b4a_slide_inRight {
    -webkit-animation: slide-inRight 1s ease 0s infinite normal;
    -moz-animation: slide-inRight 1s ease 0s infinite normal;
    animation: slide-inRight 1s ease 0s infinite normal;
    animation-name: slide-inRight;
}


.b4a_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;
    animation-name: slide-out;
}

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

.b4a_drop_inUp {
    -webkit-animation: drop-inUp 1s ease 0s infinite normal;
    -moz-animation: drop-inUp 1s ease 0s infinite normal;
    animation: drop-inUp inUp ease 0s infinite normal;
    animation-name: drop-inUp;
    
}


.b4a_drop_inDown {
    -webkit-animation: drop-inDown 1s ease 0s infinite normal;
    -moz-animation: drop-inDown 1s ease 0s infinite normal;
    animation: drop-inDown 1s ease 0s infinite normal;
    animation-name: drop-inDown;
}

#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;
    animation-name: drop-out;
}

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

.b4a_roll_inLeft {
    -webkit-animation: roll-inLeft 1s ease 0s infinite normal;
    -moz-animation: roll-inLeft 1s ease 0s infinite normal;
    animation: roll-inLeft 1s ease 0s infinite normal;
    animation-name: roll-inLeft;
}


.b4a_roll_inRight {
    -webkit-animation: roll-inRight 1s ease 0s infinite normal;
    -moz-animation: roll-inRight 1s ease 0s infinite normal;
    animation: roll-inRight 1s ease 0s infinite normal;
    animation-name: roll-inRight;
}

.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;
    animation-name: roll-out;
}

#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, #0066aa;
    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, #0066aa;
    -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;
    animation-name: barcode;
}

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

.b4a_wobble {
    -webkit-animation: wobble 1s ease 0s infinite normal;
    -moz-animation: wobble 1s ease 0s infinite normal;
    animation: wobble 1s ease 0s infinite normal;
    animation-name: wobble;
}

.b4a_bounce {
    -webkit-animation: bounce 1s linear 0s infinite normal;
    -moz-animation: bounce 1s linear 0s infinite normal;
    animation: bounce 1s linear 0s infinite normal;
    animation-name: bounce;
}


#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;
    animation-name: stomp;
}

#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;
    animation-name: redalert;
}

#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, #0066aa;
    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, #0066aa;
    -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;
    animation-name: glide;
}

.animate {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    animation-iteration-count: 1;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}