/* ANIMATIONS
============================================================================= */


@-webkit-keyframes hvr-wobble-horizontal {
    16.65% {
        -webkit-transform: translateX(8px);
        transform: translateX(8px)
    }
    33.3% {
        -webkit-transform: translateX(-6px);
        transform: translateX(-6px)
    }
    49.95% {
        -webkit-transform: translateX(4px);
        transform: translateX(4px)
    }
    66.6% {
        -webkit-transform: translateX(-2px);
        transform: translateX(-2px)
    }
    83.25% {
        -webkit-transform: translateX(1px);
        transform: translateX(1px)
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes hvr-wobble-horizontal {
    16.65% {
        -webkit-transform: translateX(8px);
        transform: translateX(8px)
    }
    33.3% {
        -webkit-transform: translateX(-6px);
        transform: translateX(-6px)
    }
    49.95% {
        -webkit-transform: translateX(4px);
        transform: translateX(4px)
    }
    66.6% {
        -webkit-transform: translateX(-2px);
        transform: translateX(-2px)
    }
    83.25% {
        -webkit-transform: translateX(1px);
        transform: translateX(1px)
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

.hvr-wobble-horizontal {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale
}

.hvr-wobble-horizontal:hover, .hvr-wobble-horizontal:focus, .hvr-wobble-horizontal:active {
    -webkit-animation-name: hvr-wobble-horizontal;
    animation-name: hvr-wobble-horizontal;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1
}

/* WINDOW ANIMATIONS
============================================================================= */

/* rotate and fall */
@-webkit-keyframes rotateFall {
    0% {
        -webkit-transform: rotateZ(0deg);
    }
    20% {
        -webkit-transform: rotateZ(10deg);
        -webkit-animation-timing-function: ease-out;
    }
    40% {
        -webkit-transform: rotateZ(17deg);
    }
    60% {
        -webkit-transform: rotateZ(16deg);
    }
    100% {
        -webkit-transform: translateY(100%) rotateZ(17deg);
    }
}

@-moz-keyframes rotateFall {
    0% {
        -moz-transform: rotateZ(0deg);
    }
    20% {
        -moz-transform: rotateZ(10deg);
        -moz-animation-timing-function: ease-out;
    }
    40% {
        -moz-transform: rotateZ(17deg);
    }
    60% {
        -moz-transform: rotateZ(16deg);
    }
    100% {
        -moz-transform: translateY(100%) rotateZ(17deg);
    }
}

@keyframes rotateFall {
    0% {
        transform: rotateZ(0deg);
    }
    20% {
        transform: rotateZ(10deg);
        animation-timing-function: ease-out;
    }
    40% {
        transform: rotateZ(17deg);
    }
    60% {
        transform: rotateZ(16deg);
    }
    100% {
        transform: translateY(100%) rotateZ(17deg);
    }
}

/* scale up */
@keyframes scaleUp {
    from {
        opacity: 0.3;
        transform: scale(0.8);
    }
}

@-moz-keyframes scaleUp {
    from {
        opacity: 0.3;
        -moz-transform: scale(0.8);
    }
}

@-webkit-keyframes scaleUp {
    from {
        opacity: 0.3;
        -webkit-transform: scale(0.8);
    }
}

/* slide in from the right */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@-moz-keyframes slideInRight {
    from {
        -moz-transform: translateX(100%);
    }
    to {
        -moz-transform: translateX(0);
    }
}

@-webkit-keyframes slideInRight {
    from {
        -webkit-transform: translateX(100%);
    }
    to {
        -webkit-transform: translateX(0);
    }
}

/* slide in from the bottom */
@keyframes slideInUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

@-moz-keyframes slideInUp {
    from {
        -moz-transform: translateY(100%);
    }
    to {
        -moz-transform: translateY(0);
    }
}

@-webkit-keyframes slideInUp {
    from {
        -webkit-transform: translateY(100%);
    }
    to {
        -webkit-transform: translateY(0);
    }
}

/* slide in from the bottom */
@keyframes slideOutLeft {
    to {
        transform: translateX(-100%);
    }
}

@-moz-keyframes slideOutLeft {
    to {
        -moz-transform: translateX(-100%);
    }
}

@-webkit-keyframes slideOutLeft {
    to {
        -webkit-transform: translateX(-100%);
    }
}

/* rotate out newspaper */
@-webkit-keyframes rotateOutNewspaper {
    to {
        -webkit-transform: translateZ(-3000px) rotateZ(360deg);
        opacity: 0;
    }
}

@-moz-keyframes rotateOutNewspaper {
    to {
        -moz-transform: translateZ(-3000px) rotateZ(360deg);
        opacity: 0;
    }
}

@keyframes rotateOutNewspaper {
    to {
        transform: translateZ(-3000px) rotateZ(360deg);
        opacity: 0;
    }
}



.ng-leave {
    animation: slideOutLeft 0.5s both ease-in;
    z-index: 9999;
}

/* home -------------------------- */
.page-home.ng-leave {
    /*-webkit-transform-origin: 0% 0%;
    -webkit-animation: rotateFall 1s both ease-in;
    -moz-transform-origin: 0% 0%;
    -moz-animation: rotateFall 1s both ease-in;
    transform-origin: 0% 0%;
    animation: rotateFall 1s both ease-in;
*/

    -webkit-animation: fadeOut 0.5s both ease-in;
    -moz-animation: fadeOut 0.5s both ease-in;
    animation: fadeOut 0.5s both ease-in;
}

.page-home.ng-enter {
    -webkit-animation: scaleUp 0.5s both ease-in;
    -moz-animation: scaleUp 0.5s both ease-in;
    animation: scaleUp 0.5s both ease-in;
}

/* about ------------------------ */
.page-login.ng-leave {
    -webkit-animation: slideOutLeft 0.5s both ease-in;
    -moz-animation: slideOutLeft 0.5s both ease-in;
    animation: slideOutLeft 0.5s both ease-in;
}

.page-login.ng-enter {
    -webkit-animation: slideInRight 0.5s both ease-in;
    -moz-animation: slideInRight 0.5s both ease-in;
    animation: slideInRight 0.5s both ease-in;
}

/* about ------------------------ */
.page-lending.ng-leave {
    -webkit-animation: fadeOut 0.5s both ease-in;
    -moz-animation: fadeOut 0.5s both ease-in;
    animation: fadeOut 0.5s both ease-in;
}

.page-lending > .main{
    -webkit-animation: fadeIn 0.5s both ease-in;
    -moz-animation: fadeIn 0.5s both ease-in;
    animation: fadeIn 0.5s both ease-in;
}
/* about ------------------------ */
.page-management.ng-leave {
    -webkit-animation: fadeOut 0.5s both ease-in;
    -moz-animation: fadeOut 0.5s both ease-in;
    animation: fadeOut 0.5s both ease-in;
}

.page-management > .main{
    -webkit-animation: fadeIn 0.5s both ease-in;
    -moz-animation: fadeIn 0.5s both ease-in;
    animation: fadeIn 0.5s both ease-in;
}
/* about ------------------------ */
.page-settings.ng-leave {
    -webkit-animation: fadeOut 0.5s both ease-in;
    -moz-animation: fadeOut 0.5s both ease-in;
    animation: fadeOut 0.5s both ease-in;
}

.page-settings > .main{
    -webkit-animation: fadeIn 0.5s both ease-in;
    -moz-animation: fadeIn 0.5s both ease-in;
    animation: fadeIn 0.5s both ease-in;
}

/* BASE STYLES
============================================================================= */

/* make our pages be full width and full height */
/* positioned absolutely so that the pages can overlap each other as they enter and leave */
.page {
    bottom: 0;
    left: 0;
    padding-top: 200px;
    position: absolute;
    /*text-align: center;*/
    top: 0;
    width: 100%;
}

html {
    overflow-y: hidden;
}