/* ANIMATIONS
============================================================================= */

.page.ng-leave
{
    z-index: 8999;
}

.page.ng-enter
{
    z-index: 9888;
}

.page.ng-leave
{
    -webkit-animation: slideInDown 0.5s ease both;
    animation: slideInDown 0.7s ease both;
}

.page.ng-enter
{
    -webkit-animation: slideInUp 0.5s ease both;
    animation: slideInUp 0.7s ease both;
}

/* page specific animations ------------------------ */

/*.z.ng-leave {
	-webkit-animation: moveToLeft .16s ease both;
	animation: moveToLeft .16s ease both;
}

.zz.ng-leave {
	-webkit-animation: moveToLeftFade 2.17s ease both;
	animation: moveToLeftFade 2.17s ease both;
}

.z.ng-enter {
	-webkit-animation: moveFromRight 2.16s ease both;
	animation: moveFromRight 2.16s ease both;
}

.zz.ng-enter {
	-webkit-animation: moveFromRightFade 2.17s ease both;
	animation: moveFromRightFade 2.17s ease both;
}*/

/* 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;
}
.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;    
}*/

/* contact ---------------------- */
/*.page-information.ng-leave      {
    -webkit-transform-origin: 50% 50%;
	-webkit-animation: rotateOutNewspaper .5s both ease-in;
	-moz-transform-origin: 50% 50%;
	-moz-animation: rotateOutNewspaper .5s both ease-in;
	transform-origin: 50% 50%;
	animation: rotateOutNewspaper .5s both ease-in;
}
.page-information.ng-enter 		{ 
    -webkit-animation:slideInUp 0.5s both ease-in;
	-moz-animation:slideInUp 0.5s both ease-in;
	animation:slideInUp 0.5s both ease-in;  
}*/

/* news ------------------------ */
/*.page-news.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-news.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;    
}*/

/* contact ---------------------- */
/*.page-contact.ng-leave      {
    -webkit-transform-origin: 50% 50%;
	-webkit-animation: rotateOutNewspaper .5s both ease-in;
	-moz-transform-origin: 50% 50%;
	-moz-animation: rotateOutNewspaper .5s both ease-in;
	transform-origin: 50% 50%;
	animation: rotateOutNewspaper .5s both ease-in;
}
.page-contact.ng-enter 		{ 
    -webkit-animation:slideInUp 0.5s both ease-in;
	-moz-animation:slideInUp 0.5s both ease-in;
	animation:slideInUp 0.5s both ease-in;  
}*/

@-webkit-keyframes moveFromRight
{
    from
    {
        -webkit-transform: translateX(100%);
    }
}

@keyframes moveFromRight
{
    from
    {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
}

@-webkit-keyframes moveFromRightFade
{
    from
    {
        opacity: 0.3;
        -webkit-transform: translateX(100%);
    }
}

@keyframes moveFromRightFade
{
    from
    {
        opacity: 0.3;
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
}

@-webkit-keyframes moveToLeft
{
    from
    {
    }

    to
    {
        -webkit-transform: translateX(-100%);
    }
}

@keyframes moveToLeft
{
    from
    {
    }

    to
    {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}

@-webkit-keyframes moveToLeftFade
{
    from
    {
    }

    to
    {
        opacity: 0.0;
        -webkit-transform: translateX(-100%);
    }
}

@keyframes moveToLeftFade
{
    from
    {
    }

    to
    {
        opacity: 0.0;
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}

/* 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
    {
        opacity: 0;
        transform: translateY(100%);
    }

    to
    {
        opacity: 1.0;
        transform: translateY(0);
    }
}

@keyframes slideInDown
{
    from
    {
        opacity: 1.0;
        transform: translateY(0);
    }

    to
    {
        opacity: 0;
        transform: translateY(100%);
    }
}

@-moz-keyframes slideInUp
{
    from
    {
        opacity: 0;
        -moz-transform: translateY(100%);
    }

    to
    {
        opacity: 1.0;
        -moz-transform: translateY(0);
    }
}

@-moz-keyframes slideInDown
{
    from
    {
        opacity: 1.0;
        transform: translateY(0);
    }

    to
    {
        opacity: 0;
        -moz-transform: translateY(100%);
    }
}

@-webkit-keyframes slideInUp
{
    from
    {
        opacity: 0;
        -webkit-transform: translateY(100%);
    }

    to
    {
        opacity: 1.0;
        -webkit-transform: translateY(0);
    }
}

@-webkit-keyframes slideInDown
{
    from
    {
        opacity: 1.0;
        -webkit-transform: translateY(0);
    }

    to
    {
        opacity: 0;
        -webkit-transform: translateY(100%);
    }
}

/* 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;
    }
}
