/**
 * IVET 
 * 
 * App Animations

 */

/*slide in from right*/
.view.slide.ng-enter {
  z-index: 1002;
  -webkit-animation: moveFromRightToCenter 300ms forwards;
  animation: moveFromRightToCenter 300ms forwards;
}
/*slide left out*/
.view.slide.ng-leave {
  z-index: 1000;
  -webkit-animation: moveFromCenterToLeft 300ms forwards;
  animation: moveFromCenterToLeft 300ms forwards;

}
/*slide in from left*/
.reverse .view.slide.ng-enter {
  -webkit-animation: moveFromLeftToCenter 300ms forwards;
  animation: moveFromLeftToCenter 300ms forwards;
  
}
.reverse .view.slide.ng-leave {
  -webkit-animation: moveFromCenterToRight 300ms forwards;
  animation: moveFromCenterToRight 300ms forwards;

}

/*preloader*/

 /********************************* keyframes **************************************/
 /* === slide left/slide -=== */
 @-webkit-keyframes moveFromRightToCenter {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
  }
}
@keyframes moveFromRightToCenter {
  from {
    transform: translate3d(100%, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes moveFromCenterToRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(100%, 0, 0);
  }
}
@keyframes moveFromCenterToRight {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(100%, 0, 0);
  }
}
@-webkit-keyframes moveFromCenterToLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(-100%, 0, 0);
  }
}
@keyframes moveFromCenterToLeft {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-100%, 0, 0);
  }
}
@-webkit-keyframes moveFromLeftToCenter {
 from {
    -webkit-transform: translate3d(-100%, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
  }
}
@keyframes moveFromLeftToCenter {
  from {
    transform: translate3d(-100%, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
/* === Loader -=== */
@keyframes radar {
  0% {transform: scale(0); opacity: 0;}
  25% {transform: scale(0); opacity: 0.5;}
  50% {transform: scale(1); opacity: 1;}
  75% {transform: scale(1.5); opacity: 0.5;}
  100% {transform: scale(1.8); opacity: 0;}
}
@-webkit-keyframes radar {
  0% {-webkit-transform: scale(0); opacity: 0;}
  25% {-webkit-transform: scale(0); opacity: 0.5;}
  50% {-webkit-transform: scale(1); opacity: 1;}
  75% {-webkit-transform: scale(1.5); opacity: 0.5;}
  100% {-webkit-transform: scale(1.8); opacity: 0;}
}

.animated {
  -webkit-animation-duration: 270ms;
  animation-duration: 270ms;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes zoomInRight {
  from {
    opacity: 0;
    transform: scale(0);
  -webkit-transform: scale(0)
  transition: opacity 0.5s, transform 0.3s ease-out 0s;
  -webkit-transition: opacity 0.5s, transform 0.3s ease-out 0s;
  transform-origin: right top 0; 
  }

  to {
    transform-origin: right top 0; 
  opacity: 1;
  transform: scale(1);
  -webkit-transform: scale(1);
  transition: opacity 0.5s, transform 0.3s ease-out 0s;
  -webkit-transition: opacity 0.5s, transform 0.3s ease-out 0s;
  }
}

.zoomInRight {
  -webkit-animation-name: zoomInRight;
  animation-name: zoomInRight;
}