@charset "UTF-8";
/* CSS Document */

/************************
ANIMACIONES ENTRADA
************************/
@keyframes moveFromRight {
	from { -webkit-transform: translateX(100%); transform: translateX(100%); }
	to { -webkit-transform: translateX(0%); transform: translateX(0%); }
}
@-webkit-keyframes moveFromRight {
	from { -webkit-transform: translateX(100%); transform: translateX(100%); }
	to { -webkit-transform: translateX(0%); transform: translateX(0%); }
}

@keyframes moveFromLeft {
	from { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
	to { -webkit-transform: translateX(0%); transform: translateX(0%); }
}
@-webkit-keyframes moveFromLeft {
	0% { -webkit-transform: translateX(-100%); }
	100% { -webkit-transform: translateX(0%); }
}
@keyframes moveFromBottom {
	from { -webkit-transform: translateY(200%); transform: translateY(200%); }
	to { -webkit-transform: translateY(0%); transform: translateY(0%); }
}
@-webkit-keyframes moveFromBottom {
	0% { -webkit-transform: translateY(200%); }
	100% { -webkit-transform: translateY(0%); }
}
@keyframes moveFromTop {
	from { -webkit-transform: translateY(-300%); transform: translateY(-300%); }
	to { -webkit-transform: translateY(0%); transform: translateY(0%); }
}
@-webkit-keyframes moveFromTop {
	0% { -webkit-transform: translateY(-100%); }
	100% { -webkit-transform: translateY(0%); }
}
@-webkit-keyframes fadeIn {
	from { opacity: 0.5; }
	to { opacity: 1; }
}
@keyframes fadeIn {
	from { opacity: 0.5; }
	to { opacity: 1; }
}
/************************
ANIMACIONES SALIDA
************************/
@keyframes moveToRight {
	from { -webkit-transform: translateX(0%); transform: translateX(0%); }
	to { -webkit-transform: translateX(100%); transform: translateX(100%); }
}
@-webkit-keyframes moveToRight {
	from { -webkit-transform: translateX(0%); transform: translateX(0%); }
	to { -webkit-transform: translateX(100%); transform: translateX(100%); }
}

@keyframes moveToLeft {
	from { -webkit-transform: translateX(0%); transform: translateX(0%); }
	to { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
}
@-webkit-keyframes moveToLeft {
	from { -webkit-transform: translateX(0%); transform: translateX(0	%); }
	to { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
}
@-webkit-keyframes fadeOut {
	from { }
	to { opacity: 0.5; }
}
@keyframes fadeOut {
	from { }
	to { opacity: 0.5; }
}
@keyframes moveToBottom {
	from { -webkit-transform: translateY(0%); transform: translateY(0%); }
	to { -webkit-transform: translateY(100%); transform: translateY(100%); }
}
@-webkit-keyframes moveToBottom {
	0% { -webkit-transform: translateY(0%); }
	100% { -webkit-transform: translateY(100%); }
}
@keyframes moveToTop {
	from { -webkit-transform: translateY(0%); transform: translateY(0%); }
	to { -webkit-transform: translateY(-300%); transform: translateY(-300%); }
}
@-webkit-keyframes moveToTop {
	0% { -webkit-transform: translateY(0%); }
	100% { -webkit-transform: translateY(-200%); }
}
	.page        {
	bottom:0; 
	position:absolute; 
	top:0;  
	width:100%;
}
	body {
    overflow-x:hidden;  
}

	/* page specific animations ------------------------ */

	/* home -------------------------- */
	.page-home { z-index: -1; }
	.page-home.ng-enter 		{ animation:fadeIn 1s both ease-in-out; -webkit-animation:fadeIn 1s both ease-in-out;}
	.page-home.ng-leave         { animation:fadeOut 1s both ease-in-out; -webkit-animation:fadeOut 1s both ease-in-out;}

	/* menu ------------------------*/
	.page-menu { z-index: 9999; }
	.page-menu.ng-enter 		{ animation:moveFromLeft 0.5s both ease-in-out; -webkit-animation:moveFromLeft 0.5s both ease-in-out;}
	.page-menu.ng-leave        { animation:moveToLeft 0.5s both ease-in-out; -webkit-animation:moveToLeft 0.5s both ease-in-out;}
 
	/* contact ----------------------*/
	.page-contact { z-index: 9999; }
	.page-contact.ng-enter 		{ animation:moveFromRight 0.5s both ease-in-out; -webkit-animation:moveFromRight 0.5s both ease-in-out;}
	.page-contact.ng-leave      { animation:moveToRight 0.5s both ease-in-out;  -webkit-animation:moveToRight 0.5s both ease-in-out;}
	
	/* works -------------------------- */
	.page-works { z-index: -2; }
	.page-works.ng-enter 		{ animation:fadeIn 1s both ease-in-out; -webkit-animation:fadeIn 1s both ease-in-out;}
	.page-works.ng-leave         { animation:fadeOut 1s both ease-in-out; -webkit-animation:fadeOut 1s both ease-in-out;}
	
	/* about -------------------------- */
	.page-about { z-index: -1; }
	.page-about.ng-enter 		{ animation:fadeIn 1s both ease-in-out; -webkit-animation:fadeIn 1s both ease-in-out;}
	.page-about.ng-leave         { animation:fadeOut 1s both ease-in-out; -webkit-animation:fadeOut 1s both ease-in-out;}
	 
	 /* workA -------------------------- */
	.page-workA { z-index: -1; }
	.page-workA.ng-enter 		{ animation:moveFromTop 1.5s both ease-in-out; -webkit-animation:moveFromTop 1s both ease-in-out;}
	.page-workA.ng-leave         { animation:moveToBottom 1.5s both ease-in-out; -webkit-animation:moveToBottom 1s both ease-in-out;}

 /* workB -------------------------- */
	.page-workB { z-index: -1; }
	.page-workB.ng-enter 		{ animation:moveFromRight 1s both ease-in-out; -webkit-animation:moveFromRight 1s both ease-in-out;}
	.page-workB.ng-leave         { animation:moveToRight 1s both ease-in-out; -webkit-animation:moveToRight 1s both ease-in-out;}

 /* workC -------------------------- */
	.page-workC { z-index: -1; }
	.page-workC.ng-enter 		{ animation:moveFromBottom 1s both ease-in-out; -webkit-animation:moveFromBottom 1s both ease-in-out;}
	.page-workC.ng-leave         { animation:moveToBottom 1s both ease-in-out; -webkit-animation:moveToBottom 1s both ease-in-out;}

 /* workD -------------------------- */
	.page-workD { z-index: -1; }
	.page-workD.ng-enter 		{ animation:moveFromLeft 1s both ease-in-out; -webkit-animation:moveFromLeft 1s both ease-in-out;}
	.page-workD.ng-leave         { animation:moveToLeft 1s both ease-in-out; -webkit-animation:moveToLeft 1s both ease-in-out;}
	
	/* blog -------------------------- */
	.page-blog { z-index: -1; }
	.page-blog.ng-enter 		{ animation:fadeIn 1s both ease-in-out; -webkit-animation:fadeIn 1s both ease-in-out;}
	.page-blog.ng-leave         { animation:fadeOut 1s both ease-in-out; -webkit-animation:fadeOut 1s both ease-in-out;}
	
	/*post -------------------------- */
	.page-post { z-index: -1; }
	.page-post.ng-enter 		{ animation:moveFromBottom 1s both ease-in-out; -webkit-animation:moveFromBottom 1s both ease-in-out;}
	.page-post.ng-leave         { animation:fadeOut 2s both ease-in-out; -webkit-animation:fadeOut 2s both ease-in-out;}
	
	@media all and (max-width: 641px) {
	.page-contact, .page-mepone { z-index: -1; }	
	.page-post.ng-enter, .page-blog.ng-enter, .page-workD.ng-enter, .page-workC.ng-enter, .page-workB.ng-enter, .page-workA.ng-enter, .page-about.ng-enter, .page-works.ng-enter, .page-contact.ng-enter, 
	.page-menu.ng-enter, .page-home.ng-enter {
		animation:fadeIn 0.5s both ease-in-out; -webkit-animation:fadeIn 0.5s both ease-in-out;		
	}
	.page-post.ng-leave, .page-blog.ng-leave, .page-workD.ng-leave, .page-workC.ng-leave, .page-workB.ng-leave, .page-workA.ng-leave, .page-about.ng-leave, .page-works.ng-leave, .page-contact.ng-leave, 
	.page-menu.ng-leave, .page-home.ng-leave {
		animation:fadeOut 0.5s both ease-in-out; -webkit-animation:fadeOut 0.5s both ease-in-out;		
	}
	
	}