/* FadeInUp on Scroll transition */
.fadeInUp-scroll.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition: all 1s;
}
.fadeInLeft-scroll.visible {
  opacity: 1 !important;
  transform: translateX(0) !important;
  transition: all 1s;
}
.fadeInRight-scroll.visible {
  opacity: 1 !important;
  transform: translateX(0) !important;
  transition: all 1s;
}
.no-padding {
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.slide-up-fade-in{
    animation: slide-up-fade-in ease 1s;
    animation-iteration-count: 1;
    transform-origin: 50% 50%;
    animation-fill-mode:forwards; /*when the spec is finished*/
    -webkit-animation: slide-up-fade-in ease 1s;
    -webkit-animation-iteration-count: 1;
    -webkit-transform-origin: 50% 50%;
    -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
    -moz-animation: slide-up-fade-in ease 1s;
    -moz-animation-iteration-count: 1;
    -moz-transform-origin: 50% 50%;
    -moz-animation-fill-mode:forwards; /*FF 5+*/
    -o-animation: slide-up-fade-in ease 1s;
    -o-animation-iteration-count: 1;
    -o-transform-origin: 50% 50%;
    -o-animation-fill-mode:forwards; /*Not implemented yet*/
    -ms-animation: slide-up-fade-in ease 1s;
    -ms-animation-iteration-count: 1;
    -ms-transform-origin: 50% 50%;
    -ms-animation-fill-mode:forwards; /*IE 10+*/

    opacity:0;
/*     opacity: 1\9; */
}

.slide-up-fade-in:nth-child(1) { animation-delay: .25s }
.slide-up-fade-in:nth-child(2) { animation-delay: .5s }
.slide-up-fade-in:nth-child(3) { animation-delay: .75s }
.slide-up-fade-in:nth-child(4) { animation-delay: 1s }
.slide-up-fade-in:nth-child(5) { animation-delay: 1.25s }
.slide-up-fade-in:nth-child(6) { animation-delay: 1.5s }
.slide-up-fade-in:nth-child(7) { animation-delay: 1.75s }
.slide-up-fade-in:nth-child(8) { animation-delay: 2s }
.slide-up-fade-in:nth-child(9) { animation-delay: 2.25s }

@keyframes slide-up-fade-in{
    0% {
        opacity:0;
        transform:  translate(0px,40px)  ;
    }
    100% {
        opacity:1;
        transform:  translate(0px,0px)  ;
    }
}

@-moz-keyframes slide-up-fade-in{
    0% {
        opacity:0;
        -moz-transform:  translate(0px,40px)  ;
    }
    100% {
        opacity:1;
        -moz-transform:  translate(0px,0px)  ;
    }
}

@-webkit-keyframes slide-up-fade-in {
    0% {
        opacity:0;
        -webkit-transform:  translate(0px,40px)  ;
    }
    100% {
        opacity:1;
        -webkit-transform:  translate(0px,0px)  ;
    }
}

@-o-keyframes slide-up-fade-in {
    0% {
        opacity:0;
        -o-transform:  translate(0px,40px)  ;
    }
    100% {
        opacity:1;
        -o-transform:  translate(0px,0px)  ;
    }
}

@-ms-keyframes slide-up-fade-in {
    0% {
        opacity:0;
        -ms-transform:  translate(0px,40px)  ;
    }
    100% {
        opacity:1;
        -ms-transform:  translate(0px,0px)  ;
    }
}


/********************************************
* JQuery使用
********************************************/
.fadeinUp {
  opacity: 0;
  transform : translate(0, 40px);
  transition : all 1000ms;
}

.fadeinUp.scrollinUp{
  opacity: 1;
  transform: translate(0, 0);
}
.fadeinLeft {
  opacity: 0;
  transform : translateX(-40px);
  transition : all 1000ms;
}

.fadeinLeft.scrollinLeft{
  opacity: 1;
  transform: translate(0);
}
.fadeinRight {
  opacity: 0;
  transform : translateX(40px);
  transition : all 1000ms;
  animation-delay:.5s;
}

.fadeinRight.scrollinRight{
  opacity: 1;
  transform: translate(0);
}
.fadein {
  opacity: 0;
  transition : all 1000ms;
  filter: blur(50px);
}

.fadein.scrollin{
  opacity: 1;
  filter: blur(0);
}

.fadein-noblur {
  opacity: 0;
  transition : all 1000ms;

}

.fadein-noblur.scrollin{
  opacity: 1;

}