/*arrow*/ 
@-webkit-keyframes screen-arrow {
    0% {
      -webkit-transform: translateY(-100%);
      transform: translateY(-100%);
    }
    100% {
      -webkit-transform: translateY(100%);
      transform: translateY(100%);
    }
  }
  @keyframes screen-arrow {
    0% {
      -webkit-transform: translateY(-100%);
      transform: translateY(-100%);
    }
    100% {
      -webkit-transform: translateY(100%);
      transform: translateY(100%);
    }
  }



/*nav text*/ 
@keyframes hgInner {
    from {
        transform: matrix(1, 0, 0, 1, -400, 0);
        -webkit-transform: matrix(1, 0, 0, 1, -400, 0);
        -moz-transform: matrix(1, 0, 0, 1, -400, 0);
        -ms-transform: matrix(1, 0, 0, 1, -400, 0)
    }
    to {
        transform: matrix(1, 0, 0, 1, 0, 0);
        -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
        -moz-transform: matrix(1, 0, 0, 1, 0, 0);
        -ms-transform: matrix(1, 0, 0, 1, 0, 0)
    }
}
@-webkit-keyframes hgInner {
    from {
        transform: matrix(1, 0, 0, 1, -400, 0);
        -webkit-transform: matrix(1, 0, 0, 1, -400, 0);
        -moz-transform: matrix(1, 0, 0, 1, -400, 0);
        -ms-transform: matrix(1, 0, 0, 1, -400, 0)
    }
    to {
        transform: matrix(1, 0, 0, 1, 0, 0);
        -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
        -moz-transform: matrix(1, 0, 0, 1, 0, 0);
        -ms-transform: matrix(1, 0, 0, 1, 0, 0)
    }
}
@-moz-keyframes hgInner {
    from {
        transform: matrix(1, 0, 0, 1, -400, 0);
        -webkit-transform: matrix(1, 0, 0, 1, -400, 0);
        -moz-transform: matrix(1, 0, 0, 1, -400, 0);
        -ms-transform: matrix(1, 0, 0, 1, -400, 0)
    }
    to {
        transform: matrix(1, 0, 0, 1, 0, 0);
        -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
        -moz-transform: matrix(1, 0, 0, 1, 0, 0);
        -ms-transform: matrix(1, 0, 0, 1, 0, 0)
    }
}


/*page mask*/ 
@keyframes anmi-mask {
        from {
        width:100%
          }
        to {
       width:0%;
         }
}
@-moz-keyframes anmi-mask {
        from {
        width:100%
          }
        to {
       width:0%;
         }
}

@-webkit-keyframes anmi-mask {
        from {
        width:100%
          }
        to {
       width:0%;
         }
}


/*page mask1*/ 
@keyframes anmi-mask1 {
        from {
        width:0%
          }
        to {
       width:100%;
         }
}
@-moz-keyframes anmi-mask1 {
        from {
        width:0%
          }
        to {
       width:100%;
         }
}

@-webkit-keyframes anmi-mask1 {
        from {
        width:0%
          }
        to {
       width:100%;
         }
}


/*page line*/ 
@keyframes anmi-mask02 {
        from {
        height:0%
          }
        to {
       height:100%;
         }
}
@-moz-keyframes anmi-mask02 {
        from {
        height:0%
          }
        to {
       height:100%;
         }
}

@-webkit-keyframes anmi-mask02 {
        from {
        height:0%
          }
        to {
       height:100%;
         }
}



@keyframes anmi-mask3 {
        from {
        width:0%
        opacity: 0;
          }
        to {
       width:100%;
        opacity: 1;
         }
}
@-moz-keyframes anmi-mask3 {
        from {
        width:0%
        opacity: 0;
          }
        to {
       width:100%;
        opacity: 1;
         }
}

@-webkit-keyframes anmi-mask3 {
        from {
        width:0%
        opacity: 0;
          }
        to {
       width:100%;
        opacity: 1;
         }
}


/*page1 text*/ 
@keyframes anim-text {
from {
transform: translate(-110%, 0%) matrix(1, 0, 0, 1, 0, 0);
}

to {
transform: translate(0%, 0%) matrix(1, 0, 0, 1, 0, 0);
}
}
@-moz-keyframes anim-text {
from {
transform: translate(-110%, 0%) matrix(1, 0, 0, 1, 0, 0);
}

to {
transform: translate(0%, 0%) matrix(1, 0, 0, 1, 0, 0);
}
}

@-webkit-keyframes anim-text {
from {
transform: translate(-110%, 0%) matrix(1, 0, 0, 1, 0, 0);
}

to {
transform: translate(0%, 0%) matrix(1, 0, 0, 1, 0, 0);
}
}



@keyframes mymaps
{
0% {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  opacity: 1;
  }
50% {
  -webkit-transform: scale(1.3);
  -moz-transform: scale(1.3);
  -ms-transform: scale(1.3);
  -o-transform: scale(1.3);
  transform: scale(1.3);
  opacity:0.5;
  }
  100%{
  -webkit-transform: scale(1.5);
  -moz-transform: scale(1.5);
  -ms-transform: scale(1.5);
  -o-transform: scale(1.5);
  transform: scale(1.5);
  opacity:0;
  }
}

@-moz-keyframes mymaps /* Firefox */
{
0% {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  opacity: 1;
  }
50% {
  -webkit-transform: scale(1.3);
  -moz-transform: scale(1.3);
  -ms-transform: scale(1.3);
  -o-transform: scale(1.3);
  transform: scale(1.3);
  opacity:0.5;
  }
  100%{
  -webkit-transform: scale(1.5);
  -moz-transform: scale(1.5);
  -ms-transform: scale(1.5);
  -o-transform: scale(1.5);
  transform: scale(1.5);
  opacity:0;
  }
}

@-webkit-keyframes mymaps /* Safari and Chrome */
{
0% {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  opacity: 1;
  }
50% {
  -webkit-transform: scale(1.3);
  -moz-transform: scale(1.3);
  -ms-transform: scale(1.3);
  -o-transform: scale(1.3);
  transform: scale(1.3);
  opacity:0.5;
  }
  100%{
  -webkit-transform: scale(1.5);
  -moz-transform: scale(1.5);
  -ms-transform: scale(1.5);
  -o-transform: scale(1.5);
  transform: scale(1.5);
  opacity:0;
  }
}

@-o-keyframes mymaps /* Opera */
{
0% {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  opacity: 1;
  }
50% {
  -webkit-transform: scale(1.3);
  -moz-transform: scale(1.3);
  -ms-transform: scale(1.3);
  -o-transform: scale(1.3);
  transform: scale(1.3);
  opacity:0.5;
  }
  100%{
  -webkit-transform: scale(1.5);
  -moz-transform: scale(1.5);
  -ms-transform: scale(1.5);
  -o-transform: scale(1.5);
  transform: scale(1.5);
  opacity:0;
  }
}