/* ************************************************************************* */
/* ************************************************************************* */
/* Para todas las transiciones --------------------------------------------- */
.ng-enter  { z-index:999}
.ng-enter.my-abort{
  -webkit-animation-duration: 0s !important;
  animation-duration: 0s !important;
}
.ng-leave:not(.animate-login){
  -webkit-transform-origin: 0% 50%;
  -webkit-animation: rotatePushLeft .3s both ease;
  transform-origin: 0% 50%;
  animation: rotatePushLeft .3s both ease;
  z-index:998;
}

@-webkit-keyframes rotatePushLeft {
  to { opacity: 0; -webkit-transform: rotateY(90deg); }
}
@keyframes rotatePushLeft {
  to { opacity: 0; transform: rotateY(90deg); }
}
/* ------------------------------------------------------------------------ */

/* ************************************************************************* */
.animate_fade.ng-enter {  
  -webkit-animation: fadeIn .6s ease both;
  animation: fadeIn .6s ease both;    
}

.animate_fade.ng-leave {  
  -webkit-animation: fadeOut .6s ease both;
  animation: fadeOut .6s ease both;    
}

@-webkit-keyframes fadeIn {
  from { opacity: 0.6; }
}
@keyframes fadeIn {
  from { opacity: 0.6;  }
}
@-webkit-keyframes fadeOut {
  to { opacity: 0.6; }
}
@keyframes fadeOut {
  to { opacity: 0.6;  }
}

/* ************************************************************************* */
.animate_slide_left.ng-enter {  
  -webkit-animation: slide_left .6s ease both;
  animation: slide_left .6s ease both;    
}

@-webkit-keyframes slide_left {
  from { -webkit-transform: translateX(100%); }
}
@keyframes slide_left {
  from { transform: translateX(100%); }
}

/* ************************************************************************* */
.animate_slide_right.ng-enter {  
  -webkit-animation: slide_right .6s ease both;
  animation: slide_right .6s ease both;    
}

@-webkit-keyframes slide_right {
  from { -webkit-transform: translateX(-100%); }
}
@keyframes slide_right {
  from { transform: translateX(-100%); }
}

/* ************************************************************************* */
.animate_slide_bottom.ng-enter {  
  -webkit-animation: slide_bottom .6s ease both;
  animation: slide_bottom .6s ease both;    
}

@-webkit-keyframes slide_bottom {
  from { -webkit-transform: translateY(-100%); }
}
@keyframes slide_bottom {
  from { transform: translateY(-100%); }
}

/* ************************************************************************* */
.animate_slide_top.ng-enter {  
  -webkit-animation: slide_top .6s ease both;
  animation: slide_top .6s ease both;    
}

@-webkit-keyframes slide_top {
  from { -webkit-transform: translateY(100%); }
}
@keyframes slide_top {
  from { transform: translateY(100%); }
}

/* ************************************************************************* */
.animate-login {
  display: -webkit-box;
  position: fixed;
    z-index: 1000;
    width:100%;
    height: 100%;
    background-color: #282A29;
    -webkit-box-align: center;
    background: #282A29 url('http://pgpcommon.magmacultura.com/images/login/magma.png') no-repeat center 95%;
}

.animate-login.ng-enter{  
  -webkit-animation: increaseCenter .6s ease both;
  animation: increaseCenter .6s ease both;    
}

@-webkit-keyframes increaseCenter {
  from {-webkit-transform: scale(0.95); opacity: 1;}
}
@keyframes increaseCenter {
  from { transform: scale(0.95); opacity: 1; }
}

.animate-login.ng-leave{  
  -webkit-animation: decreaseCenter .6s ease both;
  animation: decreaseCenter .6s ease both;    
}

@-webkit-keyframes decreaseCenter {
  to {-webkit-transform: scale(0.1); opacity: 0.5;}
}
@keyframes decreaseCenter {
  to { transform: scale(0.1); opacity: 0.5; }
}
/* ************************************************************************* */
.animate-homebox.ng-enter{  
  -webkit-animation: all .6s ease both;
  animation: all .6s ease both;    
}

.animate-homebox.ng-enter .box{  
  -webkit-animation: increaseBox .6s ease both;
  animation: increaseBox .6s ease both;    
}

@-webkit-keyframes increaseBox {
  from {-webkit-transform: scale(0.4);}
}
@keyframes increaseBox {
  from {transform: scale(0.4);}
}

/*@-webkit-keyframes increaseBox {
  from {width:0; height: 0;}
}
@keyframes increaseBox {
  from { width:0; height: 0;}
}*/