/* ==================================
 * FADE ANIMATIONS
 * ================================== */
@-webkit-keyframes fadeIn {
    0%   { opacity: 0; }    
    100% { opacity: 1; }
}
@-moz-keyframes fadeIn {
    0%   { opacity: 0; }    
    100% { opacity: 1; }
}
@-o-keyframes fadeIn {
    0%   { opacity: 0; }    
    100% { opacity: 1; }
}
@keyframes fadeIn {
    0%   { opacity: 0; }    
    100% { opacity: 1; }
}


/* FADE OUT */
@-webkit-keyframes fadeOut {
    0%   { opacity: 1; }    
    100% { opacity: 0; }
}
@-moz-keyframes fadeOut {
    0%   { opacity: 1; }    
    100% { opacity: 0; }
}
@-o-keyframes fadeOut {
    0%   { opacity: 1; }    
    100% { opacity: 0; }
}
@keyframes fadeOut {
    0%   { opacity: 1; }    
    100% { opacity: 0; }
}


/* ==================================
 * IN ANIMATIONS
 * ================================== */

/* BACK LEFT - FRON RIGHT */
@-webkit-keyframes backLeftIn {
    0%   { -webkit-transform: perspective(400px) rotateY(90deg); }    
    100% { -webkit-transform: perspective(400px) rotateY(0deg); }
}
@-moz-keyframes backLeftIn {
    0%   { -moz-transform: perspective(400px) rotateY(90deg); }    
    100% { -moz-transform: perspective(400px) rotateY(0deg); }
}
@-o-keyframes backLeftIn {
    0%   { -o-transform: perspective(400px) rotateY(90deg); opacity: 0; }
    100% { -o-transform: perspective(400px) rotateY(0deg); }
}
@keyframes backLeftIn {
    0%   { transform: perspective(1000px) rotateY(90deg);  }    
    100% { transform: perspective(400px) rotateY(0deg); }
}

/* BACK RIGHT - FRONT LEFT*/
@-webkit-keyframes backRightIn {
    0%   { -webkit-transform: perspective(400px) rotateY(-90deg); }    
    100% { -webkit-transform: perspective(400px) rotateY(0deg); }
}
@-moz-keyframes backRightIn {
    0%   { -moz-transform: perspective(400px) rotateY(-90deg); }    
    100% { -moz-transform: perspective(400px) rotateY(0deg); }
}
@-o-keyframes backRightIn {
    0%   { -o-transform: perspective(400px) rotateY(-90deg); }
    100% { -o-transform: perspective(400px) rotateY(0deg); }
}
@keyframes backRightIn {
    0%   { transform: perspective(400px) rotateY(-90deg); }    
    100% { transform: perspective(400px) rotateY(0deg); }
}


/* BACK BOTTOM - FRONT TOP*/
@-webkit-keyframes backBottomIn {
    0%   { -webkit-transform: perspective(400px) rotateX(90deg); }    
    100% { -webkit-transform: perspective(400px) rotateX(0deg); }
}
@-moz-keyframes backBottomIn {
    0%   { -moz-transform: perspective(400px) rotateX(90deg); }    
    100% { -moz-transform: perspective(400px) rotateX(0deg); }
}
@-o-keyframes backBottomIn {
    0%   { -o-transform: perspective(400px) rotateX(90deg); }
    100% { -o-transform: perspective(400px) rotateX(0deg); }
}
@keyframes backBottomIn {
    0%   { transform: perspective(400px) rotateX(90deg); }    
    100% { transform: perspective(400px) rotateX(0deg); }
}

/* BACK TOP - FRONT BOTTOM */
@-webkit-keyframes backTopIn {
    0%   { -webkit-transform: perspective(400px) rotateX(-90deg); }    
    100% { -webkit-transform: perspective(400px) rotateX(0deg); }
}
@-moz-keyframes backTopIn {
    0%   { -moz-transform: perspective(400px) rotateX(-90deg); }    
    100% { -moz-transform: perspective(400px) rotateX(0deg); }
}
@-o-keyframes backTopIn {
    0%   { -o-transform: perspective(400px) rotateX(-90deg); }
    100% { -o-transform: perspective(400px) rotateX(0deg); }
}
@keyframes backTopIn {
    0%   { transform: perspective(400px) rotateX(-90deg); }    
    100% { transform: perspective(400px) rotateX(0deg); }
}

/* ==================================
 * OUT ANIMATIONS
 * ================================== */


/* BACK LEFT - FRON RIGHT */
@-webkit-keyframes backLeftOut {
    0%   { -webkit-transform: perspective(400px) rotateY(0deg); }    
    100% { -webkit-transform: perspective(400px) rotateY(90deg); }
}
@-moz-keyframes backLeftOut {
    0%   { -moz-transform: perspective(400px) rotateY(0deg); }    
    100% { -moz-transform: perspective(400px) rotateY(90deg); }
}
@-o-keyframes backLeftOut {
    0%   { -o-transform: perspective(400px) rotateY(0deg); }
    100% { -o-transform: perspective(400px) rotateY(90deg); }
}
@keyframes backLeftOut {
    0%   { transform: perspective(400px) rotateY(0deg); }    
    100% { transform: perspective(400px) rotateY(90deg); }
}

/* BACK RIGHT - FRONT LEFT*/
@-webkit-keyframes backRightOut {
    0%   { -webkit-transform: perspective(400px) rotateY(0deg); }    
    100% { -webkit-transform: perspective(400px) rotateY(-90deg); }
}
@-moz-keyframes backRightOut {
    0%   { -moz-transform: perspective(400px) rotateY(0deg); }    
    100% { -moz-transform: perspective(400px) rotateY(-90deg); }
}
@-o-keyframes backRightOut {
    0%   { -o-transform: perspective(400px) rotateY(0deg); }
    100% { -o-transform: perspective(400px) rotateY(-90deg); }
}
@keyframes backRightOut {
    0%   { transform: perspective(400px) rotateY(0deg); }    
    100% { transform: perspective(400px) rotateY(-90deg); }
}


/* BACK BOTTOM - FRONT TOP*/
@-webkit-keyframes backBottomOut {
    0%   { -webkit-transform: perspective(400px) rotateX(0deg); }    
    100% { -webkit-transform: perspective(400px) rotateX(90deg); }
}
@-moz-keyframes backBottomOut {
    0%   { -moz-transform: perspective(400px) rotateX(0deg); }    
    100% { -moz-transform: perspective(400px) rotateX(90deg); }
}
@-o-keyframes backBottomOut {
    0%   { -o-transform: perspective(400px) rotateX(0deg); }
    100% { -o-transform: perspective(400px) rotateX(90deg); }
}
@keyframes backBottomOut {
    0%   { transform: perspective(400px) rotateX(0deg); }    
    100% { transform: perspective(400px) rotateX(90deg); }
}

/* BACK TOP - FRONT BOTTOM */
@-webkit-keyframes backTopOut {
    0%   { -webkit-transform: perspective(400px) rotateX(0deg); }    
    100% { -webkit-transform: perspective(400px) rotateX(-90deg); }
}
@-moz-keyframes backTopOut {
    0%   { -moz-transform: perspective(400px) rotateX(0deg); }    
    100% { -moz-transform: perspective(400px) rotateX(-90deg); }
}
@-o-keyframes backTopOut {
    0%   { -o-transform: perspective(400px) rotateX(0deg); }
    100% { -o-transform: perspective(400px) rotateX(-90deg); }
}
@keyframes backTopOut {
    0%   { transform: perspective(400px) rotateX(0deg); }    
    100% { transform: perspective(400px) rotateX(-90deg); }
}