/* This file holds all the animation classes used by the ngAnimate module */
/* -----------------------------------------------------------------------*/


/* Fade out */
.fade-in-out {
    -webkit-transition: 0.5s linear all;
    -moz-transition: 0.5s linear all;
    -o-transition: 0.5s linear all;
    transition: 0.5s linear all;
}

    .fade-in-out.ng-hide {
        opacity: 0;
    }

    .fade-in-out.ng-show {
        opacity: 1;
    }




/* Wizard steps styling
============================================================================= */
.wizard-container {
    width: auto;
}
    /* basic styling for entering and leaving */
    /* left and right added to ensure full width */
    .wizard-container.ng-enter,
    .wizard-container.ng-leave {
        -moz-transition: 0.5s all ease;
        -webkit-transition: 0.5s all ease;
        -o-transition: 0.5s all ease;
        transition: 0.5s all ease;
    }

        /* enter animation */
        .wizard-container.ng-enter.ng-enter-active {
            -webkit-animation: slideInRight 0.5s both ease;
            -moz-animation: slideInRight 0.5s both ease;
            -o-animation: slideInRight 0.5s both ease;
            animation: slideInRight 0.5s both ease;
        }


        /* leave animation */
        .wizard-container.ng-leave.ng-leave-active {
            -webkit-animation: slideOutLeft 0.5s both ease;
            -moz-animation: slideOutLeft 0.5s both ease;
            -o-animation: slideOutLeft 0.5s both ease;
            animation: slideOutLeft 0.5s both ease;
        }


/* Wizard Steps animations
============================================================================= */
/* slide out to the left */
@keyframes slideOutLeft {
    to {
        transform: translateX(-200%);
    }
}

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

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

/* slide out to the right */
@keyframes slideOutLeft {
    to {
        transform: translateX(200%);
    }
}

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

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

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

    to {
        transform: translateX(0);
    }
}

@-moz-keyframes slideInRight {
    from {
        -moz-transform: translateX(200%);
    }

    to {
        -moz-transform: translateX(0);
    }
}

@-webkit-keyframes slideInRight {
    from {
        -webkit-transform: translateX(200%);
    }

    to {
        -webkit-transform: translateX(0);
    }
}

/* slide in from the left */
@keyframes slideInLeft {
    from {
        transform: translateX(-200%);
    }

    to {
        transform: translateX(0);
    }
}

@-moz-keyframes slideInLeft {
    from {
        -moz-transform: translateX(-200%);
    }

    to {
        -moz-transform: translateX(0);
    }
}

@-webkit-keyframes slideInLeft {
    from {
        -webkit-transform: translateX(-200%);
    }

    to {
        -webkit-transform: translateX(0);
    }
}