/*!
 * Piggy Animations v1.0
 * 
 * Licensed under MIT (https://github.com/ruymon/Piggy)
 */


 /*-------------------
 *  SLIDE ANIMATION
 * ------------------- */
 
@keyframes slide {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

/* Firefox < 16 */
@-moz-keyframes slide {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes slide {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes slide {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes slide {
  from { opacity: 0; }
  to   { opacity: 1; }
}

 /*-------------------
 *  SLIDE UP
 * ------------------- */

@keyframes up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0px); }
}

/* Firefox < 16 */
@-moz-keyframes up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0px); }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0px); }
}

/* Internet Explorer */
@-ms-keyframes up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0px); }
}

/* Opera < 12.1 */
@-o-keyframes up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0px); }
}

 /*-------------------
 *  SLIDE RIGHT
 * ------------------- */

@keyframes right {
  from { opacity: 0; transform: translateX(-100%); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Firefox < 16 */
@-moz-keyframes right {
  from { opacity: 0; transform: translateX(-100%); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes right {
  from { opacity: 0; transform: translateX(-100%); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Internet Explorer */
@-ms-keyframes right {
  from { opacity: 0; transform: translateX(-100%); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Opera < 12.1 */
@-o-keyframes right {
  from { opacity: 0; transform: translateX(-100%); }
  to   { opacity: 1; transform: translateX(0); }
}

 /*-------------------
 *  SLIDE LOGO
 * ------------------- */

@keyframes logo {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Firefox < 16 */
@-moz-keyframes logo {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes logo {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Internet Explorer */
@-ms-keyframes logo {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Opera < 12.1 */
@-o-keyframes logo {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0); }
}

 /*-------------------
 *  SLIDE LEFT
 * ------------------- */

@keyframes left {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0%); }
}

/* Firefox < 16 */
@-moz-keyframes left {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0%); }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes left {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0%); }
}

/* Internet Explorer */
@-ms-keyframes left {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0%); }
}

/* Opera < 12.1 */
@-o-keyframes left {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0%); }
}


 /* ===========================
 *  ==== ANIMATION CLASSES ====
 *  =========================== */

.animate-up {
  -webkit-animation: up 900ms; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: up 900ms; /* Firefox < 16 */
  -ms-animation: up 900ms; /* Internet Explorer */
  -o-animation: up 900ms; /* Opera < 12.1 */
  animation: up 900ms;
  animation-fill-mode: backwards;
}

.animate-flag-buttons {
  -webkit-animation: right 3s; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: right 3s; /* Firefox < 16 */
  -ms-animation: right 3s; /* Internet Explorer */
  -o-animation: right 3s; /* Opera < 12.1 */
  animation: right 3s;
}

.animate-clock {
  -webkit-animation: right 2.5s; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: right 2.5s; /* Firefox < 16 */
  -ms-animation: right 2.5s; /* Internet Explorer */
  -o-animation: right 2.5s; /* Opera < 12.1 */
  animation: right 2.5s;
}

.animate-logo{
  -webkit-animation: logo 4s; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: logo 4s; /* Firefox < 16 */
  -ms-animation: logo 4s; /* Internet Explorer */
  -o-animation: logo 4s; /* Opera < 12.1 */
  animation: logo 4s;
  animation-fill-mode: backwards;
}