.onscroll-slidein { }
.visibility-hidden {visibility:hidden;}

.already-visible {
  transform: translateY(0) translateX(0) scaleX(1) scaleY(1);
  -moz-transform: translateY(0) translateX(0) scaleX(1) scaleY(1);
  -webkit-transform: translateY(0) translateX(0) scaleX(1) scaleY(1);
  -o-transform: translateY(0) translateX(0) scaleX(1) scaleY(1);
  -ms-transform: translateY(0) translateX(0) scaleX(1) scaleY(1);
  transition: none;
  visibility: visible;
}

.onscroll-slidein-from-left {
  visibility: visible;
  animation: slidein-from-left ease-out 0.6s;
  animation-iteration-count: 1;
  transform-origin: ;
  -webkit-animation: slidein-from-left ease-out 0.6s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: ;
  -moz-animation: slidein-from-left ease-out 0.6s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: ;
  -o-animation: slidein-from-left ease-out 0.6s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: ;
  -ms-animation: slidein-from-left ease-out 0.6s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: ;
}


.onscroll-slidein-from-bottom {
  visibility: visible;
  animation: slidein-from-bottom ease-out 0.6s;
  animation-iteration-count: 1;
  transform-origin: ;
  -webkit-animation: slidein-from-bottom ease-out 0.6s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: ;
  -moz-animation: slidein-from-bottom ease-out 0.6s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: ;
  -o-animation: slidein-from-bottom ease-out 0.6s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: ;
  -ms-animation: slidein-from-bottom ease-out 0.6s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: ;
}

.onscroll-slidein-from-right {
  visibility: visible;
  animation: slidein-from-right ease-out 0.6s;
  animation-iteration-count: 1;
  transform-origin: ;
  -webkit-animation: slidein-from-right ease-out 0.6s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: ;
  -moz-animation: slidein-from-right ease-out 0.6s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: ;
  -o-animation: slidein-from-right ease-out 0.6s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: ;
  -ms-animation: slidein-from-right ease-out 0.6s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: ;
}
 

@keyframes slidein-from-right{
  0% {
    transform: translateY(350px) translateX(100px) scaleX(0.5) scaleY(0.5);
  }
  100% {
    transform: translateY(0) translateX(0) scaleX(1) scaleY(1);
  }
}

@-moz-keyframes slidein-from-right{
  0% {
    -moz-transform: translateY(350px) translateX(100px) scaleX(0.5) scaleY(0.5);
  }
  100% {
    -moz-transform: translateY(0) translateX(0) scaleX(1) scaleY(1);
  }
}

@-webkit-keyframes slidein-from-right {
  0% {
    -webkit-transform: translateY(350px) translateX(100px) scaleX(0.5) scaleY(0.5);
  }
  100% {
    -webkit-transform: translateY(0) translateX(0) scaleX(1) scaleY(1);
  }
}

@-o-keyframes slidein-from-right {
  0% {
    -o-transform: translateY(350px) translateX(100px) scaleX(0.5) scaleY(0.5);
  }
  100% {
    -o-transform: translateY(0) translateX(0) scaleX(1) scaleY(1);
  }
}

@-ms-keyframes slidein-from-right {
  0% {
    -ms-transform: translateY(350px) translateX(100px) scaleX(0.5) scaleY(0.5);
  }
  100% {
    -ms-transform: translateY(0) translateX(0) scaleX(1) scaleY(1);
  }
}





@keyframes slidein-from-bottom{
  0% {
    transform: translateY(350px) scaleX(0.5) scaleY(0.5);
  }
  100% {
    transform: translateY(0) scaleX(1) scaleY(1);
  }
}

@-moz-keyframes slidein-from-bottom{
  0% {
    -moz-transform: translateY(350px) scaleX(0.5) scaleY(0.5);
  }
  100% {
    -moz-transform: translateY(0) scaleX(1) scaleY(1);
  }
}

@-webkit-keyframes slidein-from-bottom {
  0% {
    -webkit-transform: translateY(350px) scaleX(0.5) scaleY(0.5);
  }
  100% {
    -webkit-transform: translateY(0) scaleX(1) scaleY(1);
  }
}

@-o-keyframes slidein-from-bottom {
  0% {
    -o-transform: translateY(350px) scaleX(0.5) scaleY(0.5);
  }
  100% {
    -o-transform: translateY(0) scaleX(1) scaleY(1);
  }
}

@-ms-keyframes slidein-from-bottom {
  0% {
    -ms-transform: translateY(350px) scaleX(0.5) scaleY(0.5);
  }
  100% {
    -ms-transform: translateY(0) scaleX(1) scaleY(1);
  }
}





@keyframes slidein-from-left{
  0% {
    transform: translateY(350px) translateX(-100px) scaleX(0.5) scaleY(0.5);
  }
  100% {
    transform: translateY(0) translateX(0) scaleX(1) scaleY(1);
  }
}

@-moz-keyframes slidein-from-left{
  0% {
    -moz-transform: translateY(350px) translateX(-100px) scaleX(0.5) scaleY(0.5);
  }
  100% {
    -moz-transform: translateY(0) translateX(0) scaleX(1) scaleY(1);
  }
}

@-webkit-keyframes slidein-from-left {
  0% {
    -webkit-transform: translateY(350px) translateX(-100px) scaleX(0.5) scaleY(0.5);
  }
  100% {
    -webkit-transform: translateY(0) translateX(0) scaleX(1) scaleY(1);
  }
}

@-o-keyframes slidein-from-left {
  0% {
    -o-transform: translateY(350px) translateX(-100px) scaleX(0.5) scaleY(0.5);
  }
  100% {
    -o-transform: translateY(0) translateX(0) scaleX(1) scaleY(1);
  }
}

@-ms-keyframes slidein-from-left {
  0% {
    -ms-transform: translateY(350px) translateX(-100px) scaleX(0.5) scaleY(0.5);
  }
  100% {
    -ms-transform: translateY(0) translateX(0) scaleX(1) scaleY(1);
  }
}