/* PAGE TRANSITIONS */
.page {
}

/* Have to set height explicity on ui-view 
to prevent collapsing during animation*/
.ui-view-container {
  width: inherit;
  height: inherit;
}


[ui-view].enter-stagger,
[ui-view].leave-stagger,
[ui-view].move-stagger {
    transition-delay: .7s;
    animation-delay: .7s;
    /*background: red;*/
}


[ui-view].ng-enter, [ui-view].ng-leave {
/*   -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0); */
  pointer-events: none;
  
  /*background-color: white;*/
  /*position: absolute !important;*/
  top: 0 !important;
  /*height: 100%;*/
  /*min-height: 100vh;*/
  /*height: 100vh;*/
  /*max-height: 100vh;*/
  /*z-index: 9999;*/
  /*top: 0 !important;*/
  /*overflow: hidden;*/
  /*box-sizing: border-box;*/
  /*padding: 0 !important;*/
}

[ui-view].ng-enter {
  opacity: 0;
  /* top: 100vh !important; */
  transform: translate(0,500px);
  transition: all .7s 1s;
  z-index: 999;
/*
    -webkit-animation: pageIn 1s 1s;
    animation: pageIn 1s 1s;*/ 
}

[ui-view].ng-enter-active {
  opacity: 1;
  /* position: absolute !important; */

    /* top: 0vh !important; */
    transform: translate(0,0);
}

[ui-view].ng-leave {
/*  content: "<div id=\"coverup\"></div>";
    -webkit-animation: fadeIn 10s 0s;
    animation: fadeIn 10s 0s;

    height: 100px !important;
    top: 0 !important;

    opacity: 1;

*/
  z-index:9;

  opacity: 1;
  transition: all .5s;


}

[ui-view].ng-leave-active {
  /*-webkit-animation: fadeOut 1s 0s;*/
    /*animation: fadeOut 1s 0s;*/
    opacity: 0;
    
}



/* ANIMATIONS */
/* Get more at http://tympanus.net/Development/PageTransitions/ */



@-webkit-keyframes pageIn {
  from { max-height: 0 !important; }
  to { max-height: 100vh !important}
}

@keyframes pageIn {
  from { max-height: 0 !important}
  to { max-height: 100vh !important}
}

@-webkit-keyframes pageOut {
  from { max-height: 100vh }
  to { max-height: 0 }

}

@keyframes pageOut {
  from { max-height: 100vh }
  to { max-height: 0% }

}


@-webkit-keyframes slideIn {
  from { top: 100vh; }
  to { top: 0vh; }
}
@keyframes slideIn {
  from { top: 100vh; }
  to { top: 0vh; }
}






/* fade */

@-webkit-keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeIn {
    from {  opacity: 0;  }
    to { opacity: 1; }
}

@-webkit-keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}
@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}