/* various css3 animations/transitions */

[ui-view].ng-enter, [ui-view].ng-leave {
  width:100%;
}

[ui-view].ng-enter {
  opacity:0;
  animation-name: fadeIn;
  animation-duration: 1s;
  min-height: 100vh;
}

[ui-view].ng-leave{
  position:absolute;
  top:0;
  left:0;
  z-index:10000;
  opacity:0;
}

[ng-repeat].ng-enter, [ng-repeat].ng-move {
  -webkit-transition:all .5s ease-in-out;
  -moz-transition:all .5s ease-in-out;
  -o-transition:all .5s ease-in-out;
  transition:all .5s ease-in-out;
}

[ng-repeat].ng-leave {
  -webkit-transition:all 0s;
  -moz-transition:all 0s;
  -o-transition:all 0s;
  transition:all 0s;
}

[ng-repeat].ng-leave{
  opacity:0;
  overflow:hidden;
}

[ng-repeat].ng-enter, [ng-repeat].ng-leave.ng-leave-active, [ng-repeat].ng-move  {
  opacity:0;
}

[ng-repeat].ng-enter-active, [ng-repeat].ng-move.ng-move-active {
  opacity:1;
  animation-duration: 0.4s;
}


[ui-scroll].result_record {
  animation-name: fadeIn;
  animation-duration: 1s;
}

/* Image Loading animation */
[animate-image-load='img-loading']{
  opacity:0;
}
.imageLoader {
  width: 100%;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.imageLoader__item {
  animation: bouncing 1.5s cubic-bezier(.6,.05,.15,.95);
  width: 12px;
  height: 12px;
  margin:6px;
  border-radius: 50%;
  background: rgba(0,0,0,0.25);
}
.imageLoader__item:nth-child(1) {
  animation: bouncing 1.5s alternate infinite cubic-bezier(.6,.05,.15,.95);
}
.imageLoader__item:nth-child(2) {
  animation: bouncing 1.5s 0.1s alternate infinite cubic-bezier(.6,.05,.15,.95) backwards;
}
.imageLoader__item:nth-child(3) {
  animation: bouncing 1.5s 0.2s alternate infinite cubic-bezier(.6,.05,.15,.95) backwards;
}

@keyframes bouncing {
  0% {
    transform: translate3d(0, 0, 0) scale(1, 1);
  }
  80% {
    transform: translate3d(0, 0, 0) scale(1, 1);
  }
  85% {
    transform: translate3d(0, 5px, 0) scale(1.03, 0.97);
  }
  100% {
    transform: translate3d(0, -10px, 0) scale(0.97, 1.03);
  }
}



[animate-image-load='img-loaded']{
  animation-name: fadeIn;
  animation-duration: 1s;
}

/* Footer animation */
footer {
  display:none !important;
}
footer.footer-route-loaded:not(#erec_main_container[esar-layout] > footer) {
  display:inherit !important;
  animation:fadeInDelay 2s;
}
div#erec_main_container[esar-layout] > footer.footer-route-loaded {
  display: block !important;
  animation:fadeInDelay 2s;
}

@keyframes fadeInDelay {
  0% {
    opacity:0;
  }
  50% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@keyframes fadeOut {
  0% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}