/**
 * Keyframes
 * --------------------------------------------------
 */


// Slide In From Left
// -------------------------------

@-webkit-keyframes slideInFromLeft {
    from { -webkit-transform: translate3d(-100%, 0, 0); }
    to { -webkit-transform: translate3d(0, 0, 0); }
}
@-moz-keyframes slideInFromLeft {
    from { -moz-transform: translateX(-100%); }
    to { -moz-transform: translateX(0); }
}
@keyframes slideInFromLeft {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}


// Slide In From Right
// -------------------------------

@-webkit-keyframes slideInFromRight {
    from { -webkit-transform: translate3d(100%, 0, 0); }
    to { -webkit-transform: translate3d(0, 0, 0); }
}
@-moz-keyframes slideInFromRight {
    from { -moz-transform: translateX(100%); }
    to { -moz-transform: translateX(0); }
}
@keyframes slideInFromRight {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}


// Slide Out To Left
// -------------------------------

@-webkit-keyframes slideOutToleft {
  from { -webkit-transform: translate3d(0, 0, 0); }
  to { -webkit-transform: translate3d(-100%, 0, 0); }
}
@-moz-keyframes slideOutToleft {
  from { -moz-transform: translateX(0); }
  to { -moz-transform: translateX(-100%); }
}
@keyframes slideOutToLeft {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}


// Slide Out To Right
// -------------------------------

@-webkit-keyframes slideOutToRight {
  from { -webkit-transform: translate3d(0, 0, 0); }
  to { -webkit-transform: translate3d(100%, 0, 0); }
}
@-moz-keyframes slideOutToRight {
  from { -moz-transform: translateX(0); }
  to { -moz-transform: translateX(100%); }
}
@keyframes slideOutToRight {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}


// Fade Out
// -------------------------------

@-webkit-keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
@-moz-keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}


// Fade In
// -------------------------------

@-webkit-keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@-moz-keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}


// Spin
// -------------------------------

@-webkit-keyframes spin { 
  100% { -webkit-transform: rotate(360deg); } 
}
@-moz-keyframes spin { 
  100% { -moz-transform: rotate(360deg); } 
}
@keyframes spin { 
  100% { transform: rotate(360deg); } 
}