/* Safari 4.0 - 8.0 ************************************************/
@-webkit-keyframes scroll {
  0%   {transform:translateY(0);-webkit-transform:translateY(0);}
  100% {transform:translateY(14px);-webkit-transform:translateY(14px);}
}
@-webkit-keyframes arrow {
  0%   {transform:translateX(0);-webkit-transform:translateX(0);}
  100% {transform:translateX(10px);-webkit-transform:translateX(10px);}
}
@-webkit-keyframes map_scroll {
  0%   {transform:translateY(0);-webkit-transform:translateY(0);}
  100% {transform:translateY(10px);-webkit-transform:translateY(10px);}
}
@-webkit-keyframes scale {
  0%   {transform:scale(1.0,1.0);-webkit-transform:scale(1.0,1.0);}
  100% {transform:scale(1.1,1.1);-webkit-transform:scale(1.1,1.1);;}
}

/* Standard syntax ************************************************/
@keyframes scroll {
   0%   {transform:translateY(0);-webkit-transform:translateY(0);}
  100% {transform:translateY(14px);-webkit-transform:translateY(14px);}
}
@keyframes arrow {
   0%   {transform:translateX(0);-webkit-transform:translateX(0);}
  100% {transform:translateX(10px);-webkit-transform:translateX(10px);}
}
@keyframes map_scroll {
   0%   {transform:translateY(0);-webkit-transform:translateY(0);}
  100% {transform:translateY(10px);-webkit-transform:translateY(10px);}
}
@keyframes scale {
  0%   {transform:scale(0.7,0.7);-webkit-transform:scale(0.7,0.7); opacity: 0.4}
  100% {transform:scale(1.0,1.0);-webkit-transform:scale(1.0,1.0); opacity: 0.2}
}

/*PAGE Animation************************************************/
.ani {opacity:0; transition:all 0.6s  ease-in-out; -webkit-transition:all 0.6s ease-in-out;}

/*Animation Position */
.ani.top{transform:translateY(-50px); -webkit-transform:translateY(-50px); }
.ani.bottom{transform:translateY(50px); -webkit-transform:translateY(50px);}
.ani.left{transform:translateX(-50px); -webkit-transform:translateX(-50px);}
.ani.right{transform:translateX(50px); -webkit-transform:translateX(50px);}

.ani.scale {transform:scale(1.1,1.1)}

/*Animation Active************************************************/
.ani.active { opacity:1; transform:translate(0px,0px) scale(1,1); -webkit-transform:translate(0px,0px) scale(1,1); }

/*Animation Delay Time************************************************/
.ani.d_1 { transition-delay:0.2s; -webkit-transition-delay:0.2s;}
.ani.d_2 { transition-delay:0.4s;  -webkit-transition-delay:0.4s;}
.ani.d_3 { transition-delay:0.6s;  -webkit-transition-delay:0.6s;}
.ani.d_4 { transition-delay:0.8s;  -webkit-transition-delay:0.8s;}
.ani.d_5 { transition-delay:1s;  -webkit-transition-delay:1s;}
.ani.d_6 { transition-delay:1.2s;  -webkit-transition-delay:1.2s;}
.ani.d_7 { transition-delay:1.4s;  -webkit-transition-delay:1.4s;}
.ani.d_8 { transition-delay:1.6s;  -webkit-transition-delay:1.6s;}
.ani.d_9 { transition-delay:1.8s;  -webkit-transition-delay:1.8s;}
.ani.d_10 { transition-delay:2s;  -webkit-transition-delay:2s;}
.ani.d_11 { transition-delay:2.2s;  -webkit-transition-delay:2.2s;}

@media only screen and (max-width:767px) {
.ani.top{transform:translateY(-30px); -webkit-transform:translateY(-30px);}
.ani.bottom{transform:translateY(30px); -webkit-transform:translateY(30px);}
.ani.left{transform:translateX(-30px); -webkit-transform:translateX(-30px);}
.ani.right{transform:translateX(30px); -webkit-transform:translateX(30px);}
.ani.active { opacity:1; transform:translate(0px,0px) scale(1,1); -webkit-transform:translate(0px,0px) scale(1,1); }
}