/*animation*/
@-webkit-keyframes scaleX {
    from { -webkit-transform: scaleX(0); }
    to { -webkit-transform: scale(1); }
}
@-moz-keyframes scaleX {
    from { -moz-transform: scaleX(0); }
    to { -moz-transform: scale(1); }
}
@-o-keyframes scaleX {
    from { -o-transform: scaleX(0); }
    to { -o-transform: scale(1); }
}
@keyframes scaleX {
    from { transform: scaleX(0); }
    to { transform: scale(1); }
}
@-webkit-keyframes scaleY {
    from { -webkit-transform: scaleY }
    to { -webkit-transform: scale(1); }
}
@-moz-keyframes scaleY {
    from { -moz-transform: scaleY }
    to { -moz-transform: scale(1); }
}
@-o-keyframes scaleY {
    from { -o-transform: scaleY }
    to { -o-transform: scale(1); }
}
@keyframes scaleY {
    from { transform: scaleY }
    to { transform: scale(1); }
}

@-webkit-keyframes slideUpAnimation {
    from { opacity:0;-webkit-transform: translate3d(0,50px,0); }
    to { opacity:1;-webkit-transform: translate3d(0,0,0); }
}
@-moz-keyframes slideUpAnimation {
    from { opacity:0;-moz-transform: translate3d(0,50px,0); }
    to { opacity:1;-moz-transform: translate3d(0,0,0); }
}
@-o-keyframes slideUpAnimation {
    from { opacity:0;-o-transform: translate3d(0,50px,0); }
    to { opacity:1;-o-transform: translate3d(0,0,0); }
}
@keyframes slideUpAnimation {
    from { opacity:0;transform: translate3d(0,50px,0); }
    to { opacity:1;transform: translate3d(0,0,0); }
}

@-webkit-keyframes slideUpAnimationSlow {
    from { opacity:0;-webkit-transform: translate3d(0,100px,0); }
    to { opacity:1;-webkit-transform: translate3d(0,0,0); }
}
@-moz-keyframes slideUpAnimationSlow {
    from { opacity:0;-moz-transform: translate3d(0,100px,0); }
    to { opacity:1;-moz-transform: translate3d(0,0,0); }
}
@-o-keyframes slideUpAnimationSlow {
    from { opacity:0;-o-transform: translate3d(0,100px,0); }
    to { opacity:1;-o-transform: translate3d(0,0,0); }
}
@keyframes slideUpAnimationSlow {
    from { opacity:0;transform: translate3d(0,100px,0); }
    to { opacity:1;transform: translate3d(0,0,0); }
}


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

@-webkit-keyframes rippleAnimation {
  from {opacity: 1;-webkit-transform: scale(0);transform: scale(0);}
  to {opacity: 0;-webkit-transform: scale(1);transform: scale(1);}
}
@-moz-keyframes rippleAnimation {
  from {opacity: 1;-moz-transform: scale(0);transform: scale(0);}
  to {opacity: 0;-moz-transform: scale(1);transform: scale(1);}
}
@-o-keyframes rippleAnimation {
  from {opacity: 1;-o-transform: scale(0);transform: scale(0);}
  to {opacity: 0;-o-transform: scale(1);transform: scale(1);}
}
@keyframes rippleAnimation {
  from {opacity: 1;-webkit-transform: scale(0);transform: scale(0);}
  to {opacity: 0;-webkit-transform: scale(1);transform: scale(1);}
}

@-moz-keyframes scroll-left {
 from{ -moz-transform: translateX(100%); }
 to { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes scroll-left {
 from{ -webkit-transform: translateX(100%); }
 to { -webkit-transform: translateX(-100%); }
}
@keyframes scroll-left {
 from{ 
 -moz-transform: translateX(100%); /* Browser bug fix */
 -webkit-transform: translateX(100%); /* Browser bug fix */
 transform: translateX(100%); 		
 }
 to { 
 -moz-transform: translateX(-100%); /* Browser bug fix */
 -webkit-transform: translateX(-100%); /* Browser bug fix */
 transform: translateX(-100%); 
 }
}
@-moz-keyframes scroll-right {
 from{ -moz-transform: translateX(-100%); }
 to { -moz-transform: translateX(100%); }
}
@-webkit-keyframes scroll-right {
 from{ -webkit-transform: translateX(-100%); }
 to { -webkit-transform: translateX(100%); }
}
@keyframes scroll-right {
 from{ 
  -moz-transform: translateX(-100%); /* Browser bug fix */
  -webkit-transform: translateX(-100%); /* Browser bug fix */
  transform: translateX(-100%); 		
 }
 to { 
  -moz-transform: translateX(100%); /* Browser bug fix */
  -webkit-transform: translateX(100%); /* Browser bug fix */
  transform: translateX(100%); 
 }
}

@keyframes circularMotion {100% {transform: rotate(360deg);}}
@-webkit-keyframes circularMotion {100% {transform: rotate(360deg);}}
@-moz-keyframes circularMotion {100% {transform: rotate(360deg);}}
@-o-keyframes circularMotion {100% {transform: rotate(360deg);}}
@keyframes circularMotion {100% {transform: rotate(360deg);}}
[data-ani="css"][data-ani-style="circular-motion"] {animation: circularMotion 10s linear infinite; transform-origin: 50% 50%;}




[data-ani="css"][data-ani-style="slide-up"],
[data-ani="css"][data-ani-style="slide-up-fast"],
[data-ani="css"][data-ani-style="slide-up-slow"] {opacity: 0;}

[data-ani="css"][data-ani-style="slide-up"].ani-on {animation: slideUpAnimation .6s forwards cubic-bezier(.215, .61, .355, 1);}
[data-ani="css"][data-ani-style="slide-up-fast"].ani-on {animation: slideUpAnimation .5s .2s forwards cubic-bezier(0.12, 0.4, 0.41, 0.86);}
[data-ani="css"][data-ani-style="slide-up-slow"].ani-on { animation: slideUpAnimationSlow 1.5s forwards;}


[data-ani="css"][data-ani-style="scaleX-left"]{transform: scaleX(0); transform-origin: left;}
[data-ani="css"][data-ani-style="scaleX-left"].ani-on { animation: scaleX 2s forwards cubic-bezier(0.74, 0.08, 0.12, 1)}


[data-ani="css"][data-ani-style="opacity"],
[data-ani="css"][data-ani-style="opacity-fast"] { opacity: 0;}
[data-ani="css"][data-ani-style="opacity"].ani-on {animation: opacityAnimation .7s .2s forwards;}
/* [data-ani="css"][data-ani-style="opacity-fast"].ani-on {animation: opacityAnimation .5s forwards;} */



/*slideDownAni*/
@-webkit-keyframes slideDownAni {
  from{-webkit-transform: translateY(-100%);}
  to{-webkit-transform: translateY(0);}
}
@-moz-keyframes slideDownAni {
  from{-moz-transform: translateY(-100%);}
  to{-moz-transform: translateY(0);}
}
@-o-keyframes slideDownAni {
  from{-o-transform: translateY(-100%);}
  to{-o-transform: translateY(0);}
}
@keyframes slideDownAni {
  from{transform: translateY(-100%);}
  to{transform: translateY(0);}
}
/*slideRightAni*/
@-webkit-keyframes slideRightAni {
  from{-webkit-transform: translateX(-200%);}
  to{-webkit-transform: translateX(0);}
}
@-moz-keyframes slideRightAni {
  from{-moz-transform: translateX(-200%);}
  to{-moz-transform: translateX(0);}
}
@-o-keyframes slideRightAni {
  from{-o-transform: translateX(-200%);}
  to{-o-transform: translateX(0);}
}
@keyframes slideRightAni {
  from{transform: translateX(-200%);}
  to{transform: translateX(0);}
}
/*slideLeftAni*/
@-webkit-keyframes slideLeftAni {
  from{-webkit-transform: translateX(200%);}
  to{-webkit-transform: translateX(0);}
}
@-moz-keyframes slideLeftAni {
  from{-moz-transform: translateX(200%);}
  to{-moz-transform: translateX(0);}
}
@-o-keyframes slideLeftAni {
  from{-o-transform: translateX(200%);}
  to{-o-transform: translateX(0);}
}
@keyframes slideLeftAni {
  from{transform: translateX(200%);}
  to{transform: translateX(0);}
}

[data-ani="css"][data-ani-style="slide-down"]{display: inline-block; transform: translateY(-150%);}
[data-ani="css"][data-ani-style="slide-right"]{display: inline-block;transform: translateX(-150%);}
[data-ani="css"][data-ani-style="slide-left"]{display: inline-block;transform: translateX(200%);}

[data-ani="css"][data-ani-style="slide-down"].ani-on {animation: slideDownAni .8s forwards}
[data-ani="css"][data-ani-style="slide-right"].ani-on {animation: slideRightAni .8s forwards}
[data-ani="css"][data-ani-style="slide-left"].ani-on {animation: slideLeftAni .8s forwards}

.slideInUp{
  opacity: 0;
}
/* [data-ani-style="slide-right"]{transform: translateX(-200%);transition: .5s;}
[data-ani-style="slide-right"].ani-on {transform: translateX(0);}
[data-ani-style="slide-left"]{transform: translateX(200%);transition: .5s;}
[data-ani-style="slide-left"].ani-on {transform: translateX(0);}
[data-ani-style="slide-left"]{transform: translateX(200%);transition: .5s;}
[data-ani-style="slide-left"].ani-on {transform: translateX(0);} */

/* scrollMagic */
.scaleZoomout {
  transform: scale(1.1);
  transform-origin: center;
}

.slideInUp {
  opacity: 0;
  transform: translate3d(0, 50px, 0);
  /* transition: opacity .6s cubic-bezier(0.34, 0.6, 0.39, 1.05), transform .6s cubic-bezier(0.34, 0.6, 0.39, 1.05); */
  transition: opacity .5s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform .5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.slideInUp.ani-active {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.fadeIn{
  display: block;
  opacity: 0;
}