/*
 * Project: PIXEING
 * Description: General CSS Animation code
 * Author: SHIFTBRAIN Inc. 2015
 */


/*
 * Main Animation classes
 */


.elem-from-scale-and {
    opacity: 0;
    -webkit-transform: scale(0.79);
    transform: scale(0.79);
}

.elem-in-scale-and {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: opacity 500ms, -webkit-transform 500ms;
    transition: opacity 500ms, transform 500ms;
}

.elem-in-from-up-and {
    opacity: 0;
    -webkit-transform: translate(0px, 30px);
    transform: translate(0px, 30px);
    -webkit-transition: opacity 1200ms, -webkit-transform 1200ms ease-in-out;
    transition: opacity 1200ms, transform 1200ms ease-in-out;
}

.elem-in-to-up-and {
    opacity: 1;
    -webkit-transform: translateX(0px) translateY(0px);
    transform: translateX(0px) translateY(0px);
    -webkit-transition: opacity 1200ms, -webkit-transform 1200ms ease-in-out;
    transition: opacity 1200ms, transform 1200ms ease-in-out;
}

.elem-in-from-up {
    opacity: 0;
    -webkit-transform: translate(0px, 30px);
    transform: translate(0px, 30px);
    -webkit-transition: opacity 1200ms, -webkit-transform 1200ms cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: opacity 1200ms, transform 1200ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

.elem-in-to-up {
    opacity: 1;
    -webkit-transform: translateX(0px) translateY(0px);
    transform: translateX(0px) translateY(0px);
    -webkit-transition: opacity 1200ms, -webkit-transform 1200ms cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: opacity 1200ms, transform 1200ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

.elem-in-from-down-and {
    opacity: 0;
    -webkit-transform: translate(0px, -60px);
    transform: translate(0px, -60px);
    -webkit-transition: opacity 1200ms, -webkit-transform 1200ms ease-in-out;
    transition: opacity 1200ms, transform 1200ms ease-in-out;
}

.elem-in-to-down-and {
    opacity: 1;
    -webkit-transform: translateX(0px) translateY(0px);
    transform: translateX(0px) translateY(0px);
    -webkit-transition: opacity 1200ms, -webkit-transform 1200ms ease-in-out;
    transition: opacity 1200ms, transform 1200ms ease-in-out;
}


.elem-in-from-down {
    opacity: 0;
    -webkit-transform: translate(0px, -60px);
    transform: translate(0px, -60px);
    -webkit-transition: opacity 1200ms, -webkit-transform 1200ms cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: opacity 1200ms, transform 1200ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

.elem-in-to-down {
    opacity: 1;
    -webkit-transform: translateX(0px) translateY(0px);
    transform: translateX(0px) translateY(0px);
    -webkit-transition: opacity 1200ms, -webkit-transform 1200ms cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: opacity 1200ms, transform 1200ms cubic-bezier(0.215, 0.61, 0.355, 1);
}


.elem-in-from-right {
    opacity: 0;
    -webkit-transform: translateX(-1%) translateY(0px);
    transform: translateX(-1%) translateY(0px);
    -webkit-transition: opacity 750ms, -webkit-transform 750ms;
    transition: opacity 750ms, transform 750ms;
}

.elem-in-to-right {
    opacity: 1;
    -webkit-transform: translateX(0px) translateY(0px);
    transform: translateX(0px) translateY(0px);
    -webkit-transition: opacity 750ms, -webkit-transform 750ms;
    transition: opacity 750ms, transform 750ms;
}

.elem-in-from-left {
    opacity: 0;
    -webkit-transform: translateX(1%) translateY(0px);
    transform: translateX(1%) translateY(0px);
    -webkit-transition: opacity 750ms, -webkit-transform 750ms;
    transition: opacity 750ms, transform 750ms;
}

.elem-in-to-left {
    opacity: 1;
    -webkit-transform: translateX(0px) translateY(0px);
    transform: translateX(0px) translateY(0px);
    -webkit-transition: opacity 750ms, -webkit-transform 750ms;
    transition: opacity 750ms, transform 750ms;
}

.elem-from-scale {
    opacity: 0;
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
}

.elem-from-opacity {
    -webkit-transition: opacity  500ms ease-out;
    transition: opacity  500ms ease-out;
    opacity: 0;
}

.elem-in-opacity {
    opacity: 1;
}

.elem-in-scale {
   -webkit-animation: elem-in-scale 600ms cubic-bezier(.23,1.26,.63,1) forwards;
   animation: elem-in-scale 600ms cubic-bezier(.23,1.26,.63,1) forwards;
}

.elem-in-scale-fadeOut {
   -webkit-animation: elem-in-scale-fadeOut 600ms cubic-bezier(.23,1.26,.63,1) forwards;
   animation: elem-in-scale-fadeOut 600ms cubic-bezier(.23,1.26,.63,1) forwards;
}

/*
 * Keyframes
 */

@-webkit-keyframes outer {
  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(180deg); transform: rotate(180deg); }
}

@keyframes outer {
  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(180deg); transform: rotate(180deg); }
}

@-webkit-keyframes inner {
  0% { -webkit-transform: rotate(180deg); transform: rotate(180deg); }
  100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
}

@keyframes inner {
  0% { -webkit-transform: rotate(180deg); transform: rotate(180deg); }
  100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
}

@-webkit-keyframes elem-in-scale {
    0% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); }
    100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
}

@keyframes elem-in-scale {
    0% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); }
    100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
}

@-webkit-keyframes elem-in-scale-fadeOut {
    0% { opacity: 0; -webkit-transform: scale(1); transform: scale(1); }
    100% { opacity: 1; -webkit-transform: scale(0); transform: scale(0); }
}

@keyframes elem-in-scale-fadeOut {
    0% { opacity: 0; -webkit-transform: scale(1); transform: scale(1); }
    100% { opacity: 1; -webkit-transform: scale(0); transform: scale(0); }
}