/*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 {
        height:100%
          }
        to {
       height:0%;
         }
}
@-moz-keyframes anmi-mask {
        from {
        height:100%
          }
        to {
       height:0%;
         }
}

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


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

@-webkit-keyframes anmi-mask1 {
        from {
        height:0%
          }
        to {
       height: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;
  }
}






.home__flaps{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  width:100vw;
  height:100vh;
  z-index:9;
  pointer-events:none;
  display:flex;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
  -ms-flex-direction:column;
  flex-direction:column;
}
.home__flaps-row{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  width:100vw;
  height:100vh;
  z-index:10;
  -webkit-box-flex:2;
  -ms-flex-positive:2;
  flex-grow:2;
  display:flex;
  -webkit-box-orient:horizontal;
  -webkit-box-direction:normal;
  -ms-flex-direction:row;
  flex-direction:row;
}
.home__flap{
  height:100%;
  width:calc((100% - 0px)/5);
}
.home__flap .inner0{
  border-right:#444 1px solid;
  background-color:#333;
  width:100%;
  height:100%;
  -webkit-animation:anmi-mask 0.8s forwards cubic-bezier(0.64, 0.08, 0.24, 0.94) 1s;
  animation:anmi-mask 0.8s forwards cubic-bezier(0.64, 0.08, 0.24, 0.94) 0.2s;
}

.home__flap .inner1{
  border-right:#444 1px solid;
  background-color:#333;
  width:100%;
  height:100%;
  -webkit-animation:anmi-mask 0.8s forwards cubic-bezier(0.64, 0.08, 0.24, 0.94) 1s;
  animation:anmi-mask 0.8s forwards cubic-bezier(0.64, 0.08, 0.24, 0.94) 0.4s;
}

.home__flap .inner2{
  border-right:#444 1px solid;
  background-color:#333;
  width:100%;
  height:100%;
  -webkit-animation:anmi-mask 0.8s forwards cubic-bezier(0.64, 0.08, 0.24, 0.94) 1s;
  animation:anmi-mask 0.8s forwards cubic-bezier(0.64, 0.08, 0.24, 0.94) 0.6s;
}

.home__flap .inner3{
  border-right:#444 1px solid;
  background-color:#333;
  width:100%;
  height:100%;
  -webkit-animation:anmi-mask 0.8s forwards cubic-bezier(0.64, 0.08, 0.24, 0.94) 1s;
  animation:anmi-mask 0.8s forwards cubic-bezier(0.64, 0.08, 0.24, 0.94) 0.8s;
}

.home__flap .inner4{
  background-color:#333;
  width:100%;
  height:100%;
  -webkit-animation:anmi-mask 0.8s forwards cubic-bezier(0.64, 0.08, 0.24, 0.94) 1s;
  animation:anmi-mask 0.8s forwards cubic-bezier(0.64, 0.08, 0.24, 0.94) 1.0s;
}