
.fadein, .slidein, .slidedown, .dropin, .bounceleft, .bounceright, .draw{
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	opacity:0;}
.fadein.on, .slidein.on, .slidedown.on {opacity:1;}

.slidein.js{
	-webkit-transform:translate(0,100px);
	transform:translate(0,100px);
}
.slidein.js.on{
	-webkit-transform:translate(0,0);
	transform:translate(0,0);
}
.slidedown.js{
	-webkit-transform:translate(0,-100px);
	transform:translate(0,-100px);
}
.slidedown.js.on{
	-webkit-transform:translate(0,0);
	transform:translate(0,0);
}
.dropin.js{
	-webkit-transform:translate(0,-100px);
	transform:translate(0,-100px);
	opacity: 0;
}
.dropin.js.on{
	-webkit-animation: shake 0.9s cubic-bezier(.36,.07,.19,.97) both;
	animation: shake 0.9s cubic-bezier(.36,.07,.19,.97) both;
	-webkit-transform:translate(0,0);
	transform:translate(0,0);
}
@keyframes shake {
	0{opacity: 0;}
  10%, 90% {transform: translate3d(0, -2px, 0);}
  20%, 80% {transform: translate3d(0, 5px, 0);}
  30%, 50%, 70% {transform: translate3d(0, -10px, 0);}
  40%, 60% {transform: translate3d(0, 10px, 0);}
	100%{	opacity: 1;}
}
@-webkit-keyframes shake {
	0{opacity: 0;}
  10%, 90% {-webkit-transform: translate3d(0, -2px, 0);}
  20%, 80% {-webkit-transform: translate3d(0, 5px, 0);}
  30%, 50%, 70% {-webkit-transform: translate3d(0, -10px, 0);}
  40%, 60% {-webkit-transform: translate3d(0, 10px, 0);}
	100%{	opacity: 1;}
}


.bounceleft.js{
	-webkit-transform:translate(-200px,0);
	transform:translate(-200px,0);
	opacity: 0;
}
.bounceleft.js.on{
	-webkit-animation: bounceleft 0.9s cubic-bezier(.36,.07,.19,.97) both;
	animation: bounceleft 0.9s cubic-bezier(.36,.07,.19,.97) both;
	-webkit-transform:translate(0,0);
	transform:translate(0,0);
}
@keyframes bounceleft {
	0% {transform: translate3d(-200px,0,0);
	opacity: 0;}
	50% {transform: translate3d(15px,0,0);}
	70% {transform: translate3d(-10px,0,0);}
	80% {transform: translate3d(5px,0,0);}
	90% {transform: translate3d(-2px,0,0);}
	100% {transform: translate3d(0,0,0);
	opacity: 1;}
}
@-webkit-keyframes bounceleft {
	0% {transform: -webkit-translate3d(-200px,0,0);
	opacity: 0;}
	50% {transform: -webkit-translate3d(15px,0,0);}
	70% {transform: -webkit-translate3d(-10px,0,0);}
	80% {transform: -webkit-translate3d(5px,0,0);}
	90% {transform: -webkit-translate3d(-2px,0,0);}
	100% {transform: -webkit-translate3d(0,0,0);
	opacity: 1;}
}

.bounceright.js{
	-webkit-transform:translate(200px,0);
	transform:translate(200px,0);
	opacity: 0;
}
.bounceright.js.on{
	-webkit-animation: bounceright 0.9s cubic-bezier(.36,.07,.19,.97) both;
	animation: bounceright 0.9s cubic-bezier(.36,.07,.19,.97) both;
	-webkit-transform:translate(0,0);
	transform:translate(0,0);
}
@keyframes bounceright {
	0% {transform: translate3d(200px,0,0);
	opacity: 0;}
	50% {transform: translate3d(-15px,0,0);}
	70% {transform: translate3d(10px,0,0);}
	80% {transform: translate3d(-5px,0,0);}
	90% {transform: translate3d(2px,0,0);}
	100% {transform: translate3d(0,0,0);
	opacity: 1;}
}
@-webkit-keyframes bounceright {
	0% {transform: -webkit-translate3d(200px,0,0);
	opacity: 0;}
	50% {transform: -webkit-translate3d(-15px,0,0);}
	70% {transform: -webkit-translate3d(10px,0,0);}
	80% {transform: -webkit-translate3d(-5px,0,0);}
	90% {transform: -webkit-translate3d(2px,0,0);}
	100% {transform: -webkit-translate3d(0,0,0);
	opacity: 1;}
}
.scale, .zoom .bgimg, .zoom img{
	-webkit-animation: scale 10s ease 0s infinite;
	animation: scale 10s ease 0s infinite;
}
@keyframes scale {
  0%{transform:scale(1);}
  50%{transform:scale(1.05);}
  100%{transform:scale(1);}
}
@keyframes scale {
  0%{-webkit-transform:scale(1);}
  50%{-webkit-transform:scale(1.05);}
  100%{-webkit-transform:scale(1);}
}

.slideleft.js{
	/*display: inline-block;*/
	-webkit-transform:translate(-100px,0);
	transform:translate(-100px,0);
	opacity: 0;
}
.slideleft.js.on{
	-webkit-animation: slideleft 0.9s cubic-bezier(.36,.07,.19,.97) both;
	animation: slideleft 0.9s cubic-bezier(.36,.07,.19,.97) both;
	-webkit-transform:translate(0,0);
	transform:translate(0,0);
}
@keyframes slideleft {
	0% {transform: translate3d(-100px,0,0); opacity: 0;}
	100% {transform: translate3d(0,0,0); opacity: 1;}
}
@-webkit-keyframes slideleft {
	0% {transform: -webkit-translate3d(-100px,0,0); opacity: 0;}
	100% {transform: -webkit-translate3d(0,0,0); opacity: 1;}
}

.slideright.js{
	/*display: inline-block;*/
	-webkit-transform:translate(100px,0);
	transform:translate(100px,0);
	opacity: 0;
}
.slideright.js.on{
	-webkit-animation: slideright 0.9s cubic-bezier(.36,.07,.19,.97) both;
	animation: slideright 0.9s cubic-bezier(.36,.07,.19,.97) both;
	-webkit-transform:translate(0,0);
	transform:translate(0,0);
}
@keyframes slideright {
	0% {transform: translate3d(100px,0,0); opacity: 0;}
	100% {transform: translate3d(0,0,0); opacity: 1;}
}
@-webkit-keyframes slideright {
	0% {transform: -webkit-translate3d(100px,0,0); opacity: 0;}
	100% {transform: -webkit-translate3d(0,0,0); opacity: 1;}
}

.fadein.collide.js .col2:first-child, .fadein.collide.reverse.js .col2:last-child{
	-webkit-transform:translate(-100px,0);
	transform:translate(-100px,0);
}
.fadein.collide.js .col2:last-child, .fadein.collide.reverse.js .col2:first-child{
	-webkit-transform:translate(100px,0);
	transform:translate(100px,0);
}

.fadein.collide.js.on .col2:first-child, .fadein.collide.reverse.js.on .col2:last-child,
.fadein.collide.js.on .col2:last-child, .fadein.collide.reverse.js.on .col2:first-child{
	-webkit-transform:translate(0,0);
	transform:translate(0,0);
}
.fadein.collide.js.on .col2:first-child, .fadein.collide.reverse.js.on .col2:last-child{
	-webkit-animation: slideleft 0.9s cubic-bezier(.36,.07,.19,.97) both;
	animation: slideleft 0.9s cubic-bezier(.36,.07,.19,.97) both;
}
.fadein.collide.js.on .col2:last-child, .fadein.collide.reverse.js.on .col2:first-child{
	-webkit-animation: slideright 0.9s cubic-bezier(.36,.07,.19,.97) both;
	animation: slideright 0.9s cubic-bezier(.36,.07,.19,.97) both;
}

.draw.js path {
	/*stroke: #CCC;*/
	stroke-dashArray: 500;
	stroke-dashoffset: 500;
	opacity: 0;
}
.draw.on path {
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-fill-mode: forwards;
	-webkit-animation-iteration: 1;
	-webkit-animation-name: ShowOpacity, DrawLine;
	-webkit-animation-duration: 1s, 3s;
	-webkit-animation-delay: 0s, 1s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
	animation-iteration: 1;
	animation-name: ShowOpacity, DrawLine;
	animation-duration: 1s, 3s;
	animation-delay: 0s, 1s;
}
.draw.fill.on path {
	opacity: 1;
	fill-opacity: 0;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-fill-mode: forwards;
	-webkit-animation-iteration: 1;
	-webkit-animation-name: DrawLine, FadeStroke, FillIn;
	-webkit-animation-duration: 3s, 1s, 1s;
	-webkit-animation-delay: 0s, 2.5s, 2.5s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
	animation-iteration: 1;
	animation-name: DrawLine, FadeStroke, FillIn;
	animation-duration: 3s, 1s, 1s;
	animation-delay: 0s, 2.5s, 2.5s;
}
@keyframes ShowOpacity {to { opacity: 1; }}
@keyframes DrawLine {to { stroke-dashOffset: 0; }}
@keyframes FadeStroke {  to { stroke-opacity: 0; }}
@keyframes FillIn {  from { fill-opacity: 0; }  to { fill-opacity: 1; }	}

@-webkit-keyframes ShowOpacity {to { opacity: 1; }}
@-webkit-keyframes DrawLine {to { stroke-dashOffset: 0; }}
@-webkit-keyframes FadeStroke {  to { stroke-opacity: 0; }}
@-webkit-keyframes FillIn {  from { fill-opacity: 0; }  to { fill-opacity: 1; }	}


.js.on.delay1{ -webkit-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s;}
.js.on.delay2{ -webkit-transition-delay: 2s; -o-transition-delay: 2s; transition-delay: 2s;}
.js.on.delay3{ -webkit-transition-delay: 3s; -o-transition-delay: 3s; transition-delay: 3s;}
.js.on.delay4{ -webkit-transition-delay: 4s; -o-transition-delay: 4s; transition-delay: 4s;}
.js.on.delay5{ -webkit-transition-delay: 5s; -o-transition-delay: 5s; transition-delay: 5s;}

.js.on.delay1{ -webkit-animation-delay: 1s; animation-delay: 1s;}
.js.on.delay2{ -webkit-animation-delay: 2s; animation-delay: 2s;}
.js.on.delay3{ -webkit-animation-delay: 3s; animation-delay: 3s;}
.js.on.delay4{ -webkit-animation-delay: 4s; animation-delay: 4s;}
.js.on.delay5{ -webkit-animation-delay: 5s; animation-delay: 5s;}