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


body {width:100%; height:100%; overflow:hidden; margin:0;}
html {width:100%; height:100%; overflow:hidden;} 
.page        { 
    bottom:0; 
    position:absolute; 
    top:0;  
    width:100%; 
}



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


.page.ng-leave  { 
	z-index:8888; 
}

.page.ng-enter  { 
	z-index:7777; 
}
/* page specific animations ------------------------ */


.slide-left.ng-leave {
    -webkit-animation:slideOutLeft 0.75s both ease-in;
    -moz-animation:slideOutLeft 0.75s both ease-in;
    animation:slideOutLeft 0.75s both ease-in; 

}
.slide-left.ng-enter {
	-webkit-animation:slideInRight 0.75s both ease-in;
    -moz-animation:slideInRight 0.75s both ease-in;
    animation:slideInRight 0.75s both ease-in; 

}
.slide-down.ng-leave {
    -webkit-animation:slideOutDown 0.75s both ease-in;
    -moz-animation:slideOutDown 0.75s both ease-in;
    animation:slideOutDown 0.75s both ease-in;  

}
.slide-down.ng-enter {
	-webkit-animation:slideInDown 1s both ease-in;
    -moz-animation:slideInDown 1s both ease-in;
    animation:slideInDown 1s both ease-in;   

}



.fade-in.ng-enter {
	-webkit-animation:fadeIn 1s both ease-in;
    -moz-animation:fadeIn 1s both ease-in;
    animation:fadeIn 1s both ease-in;   
}


.fade-in.ng-leave {
	-webkit-animation:fadeOut 1s both ease-in;
    -moz-animation:fadeOut 1s both ease-in;
    animation:fadeOut 1s both ease-in;   
}









.main.ng-leave         {
    -webkit-animation:slideOutLeft 0.75s both ease-in;
    -moz-animation:slideOutLeft 0.75s both ease-in;
    animation:slideOutLeft 0.75s both ease-in;   
}
.main.ng-enter          {  
	-webkit-animation:slideInRight 0.75s both ease-in;
    -moz-animation:slideInRight 0.75s both ease-in;
    animation:slideInRight 0.75s both ease-in;    
}

.main-menu.ng-leave        {
    -webkit-animation:slideOutDown 0.75s both ease-in;
    -moz-animation:slideOutDown 0.75s both ease-in;
    animation:slideOutDown 0.75s both ease-in;   
}
.main-menu.ng-enter        {  
    -webkit-animation:slideInUp 1s both ease-in;
    -moz-animation:slideInUp 1s both ease-in;
    animation:slideInUp 1s both ease-in;    
}

.unit.ng-leave        {
	   -webkit-animation:slideOutUp 0.5s both ease-in;
    -moz-animation:slideOutUp 0.5s both ease-in;
    animation:slideOutUp 0.5s both ease-in;    
}
.unit.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;    
}

.aims.ng-enter		{
	-webkit-animation:slideInLeft 1s both ease-in;
    -moz-animation:slideInLeft 1s both ease-in;
    animation:slideInLeft 1s both ease-in;   

}
.aims.ng-leave		{
	-webkit-animation:slideOutRight 1s both ease-in;
    -moz-animation:slideOutRight 1s both ease-in;
    animation:slideOutRight 1s both ease-in;   

}

.text-page.ng-enter		{
	z-index:1; 
	-webkit-animation:slideInDown 1s both ease-in;
    -moz-animation:slideInDown 1s both ease-in;
    animation:slideInDown 1s both ease-in;   

}
.text-page.ng-leave		{
	 -webkit-animation:slideOutLeft  0.75s both ease-in;
    -moz-animation:slideOutLeft  0.75s both ease-in;
    animation:slideOutLeft  0.75s both ease-in;  

}



.text1.ng-leave         {
    -webkit-animation:slideOutLeft  0.75s both ease-in;
    -moz-animation:slideOutLeft  0.75s both ease-in;
    animation:slideOutLeft  0.75s both ease-in;   
}
.text1.ng-enter          {  
  -webkit-animation:slideInRight 0.75s both ease-in;
    -moz-animation:slideInRight 0.75s both ease-in;
    animation:slideInRight 0.75s both ease-in;    
}
/* about ------------------------ */
.text2.ng-leave        {
    -webkit-animation:slideOutLeft 0.75s both ease-in;
    -moz-animation:slideOutLeft 0.75s both ease-in;
    animation:slideOutLeft 0.75s both ease-in;   
}
.text2.ng-enter        {  
    -webkit-animation:slideInRight 0.75s both ease-in;
    -moz-animation:slideInRight 0.75s both ease-in;
    animation:slideInRight 0.75s both ease-in;    
}
/* contact ---------------------- */
.page-contact.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-contact.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;    
}
/* 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    { opacity: 0; transform:translateX(100%); }
    to      {opacity: 1; transform: translateX(0); }
}
@-moz-keyframes slideInRight {
    from    { opacity: 0; -moz-transform:translateX(100%); }
    to      { opacity: 1; -moz-transform: translateX(0); }
}
@-webkit-keyframes slideInRight {
    from    {opacity: 0; -webkit-transform:translateX(100%); }
    to      { opacity: 1; -webkit-transform: translateX(0); }
}

/* slide in from the right */
@keyframes slideOutRight {
    from    { opacity: 1; transform:translateX(0); }
    to      {opacity: 0; transform: translateX(100%); }
}
@-moz-keyframes slideOutRight {
    from    { opacity: 1; -moz-transform:translateX(0); }
    to      { opacity: 0; -moz-transform: translateX(100%); }
}
@-webkit-keyframes slideOutRight {
    from    {opacity: 1; -webkit-transform:translateX(0); }
    to      { opacity: 0; -webkit-transform: translateX(100%); }
}


/* slide in from the left */
@keyframes slideInLeft {
    from    { opacity: 0; transform:translateX(-100%); }
    to      {opacity: 1; transform: translateX(0); }
}
@-moz-keyframes slideInLeft {
    from    { opacity: 0; -moz-transform:translateX(-100%); }
    to      { opacity: 1; -moz-transform: translateX(0); }
}
@-webkit-keyframes slideInLeft {
    from    {opacity: 0; -webkit-transform:translateX(-100%); }
    to      { opacity: 1; -webkit-transform: translateX(0); }
}
/* slide out to the Left*/
@keyframes slideOutLeft {
    to      {opacity: 0; transform: translateX(-100%); }
}
@-moz-keyframes slideOutLeft {  
    to      { opacity: 0; -moz-transform: translateX(-100%); }
}
@-webkit-keyframes slideOutLeft {
    to      {opacity: 0;  -webkit-transform: translateX(-100%); }
}

/* 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); }
}

/* slideout up */
@keyframes slideOutUp {
    from    { transform:translateY(0); }
    to      { transform: translateY(-100%); }
}
@-moz-keyframes slideOutUp {
    from    { -moz-transform:translateY(0); }
    to      { -moz-transform: translateY(-100%); }
}
@-webkit-keyframes slideOutUp {
    from    { -webkit-transform:translateY(0); }
    to      { -webkit-transform: translateY(-100%); }
}

/* slide out to the bottom */
@keyframes slideOutDown {
    from    { transform:translateY(0); }
    to      { transform: translateY(100%); }
}
@-moz-keyframes slideOutDown {
    from    { -moz-transform:translateY(0); }
    to      { -moz-transform: translateY(100%); }
}
@-webkit-keyframes slideOutDown {
    from    { -webkit-transform:translateY(0); }
    to      { -webkit-transform: translateY(100%); }
}


/* slide in from top*/
@keyframes slideInDown {
    from    { transform:translateY(-100%); }
    to      { transform: translateY(0); }
}
@-moz-keyframes slideInDown {
    from    { -moz-transform:translateY(-100%); }
    to      { -moz-transform: translateY(0); }
}
@-webkit-keyframes slideInDown {
    from    { -webkit-transform:translateY(-100%); }
    to      { -webkit-transform: translateY(0); }
}


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

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






/* 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; }
}