.sjSlideInUp.step1 {
visibility:visible;
position:relative;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: sjSlideInUp1;
animation-name: sjSlideInUp1;
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
.sjSlideInUp.step2 {
visibility:visible;
position:relative;
-webkit-animation-duration: 0.9s;
animation-duration: 0.9s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: sjSlideInUp2;
animation-name: sjSlideInUp2;
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
.sjSlideInUp.step3 {
visibility:visible;
position:relative;
-webkit-animation-duration: 1.3s;
animation-duration: 1.3s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: sjSlideInUp3;
animation-name: sjSlideInUp3;
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
.sjSlideInUp.step4 {
visibility:visible;
position:relative;
-webkit-animation-duration: 1.7s;
animation-duration: 1.7s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: sjSlideInUp4;
animation-name: sjSlideInUp4;
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}

@-webkit-keyframes sjSlideInUp1 {
	from {
	-webkit-transform: translate3d(0, 80px, 0);
	transform: translate3d(0, 80px, 0);
	opacity:0;
	}
	50% {

	}
	to {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	opacity:1;
	}
}

@keyframes sjSlideInUp1 {
	from {
	-webkit-transform: translate3d(0, 80px, 0);
	transform: translate3d(0, 80px, 0);
	opacity:0;
	}
	50% {

	}
	to {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	opacity:1;
	}
}

@-webkit-keyframes sjSlideInUp2 {
	from {
	-webkit-transform: translate3d(0, 120px, 0);
	transform: translate3d(0, 120px, 0);
	opacity:0;
	}
	20% {

	}
	to {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	opacity:1;
	}
}

@keyframes sjSlideInUp2 {
	from {
	-webkit-transform: translate3d(0, 120px, 0);
	transform: translate3d(0, 120px, 0);
	opacity:0;
	}
	20% {

	}
	to {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	opacity:1;
	}
}

@-webkit-keyframes sjSlideInUp3 {
	from {
	-webkit-transform: translate3d(0, 160px, 0);
	transform: translate3d(0, 160px, 0);
	opacity:0;
	}
	50% {

	}
	to {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	opacity:1;
	}
}

@keyframes sjSlideInUp3 {
	from {
	-webkit-transform: translate3d(0, 160px, 0);
	transform: translate3d(0, 160px, 0);
	opacity:0;
	}
	50% {

	}
	to {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	opacity:1;
	}
}

@-webkit-keyframes sjSlideInUp4 {
	from {
	-webkit-transform: translate3d(0, 200px, 0);
	transform: translate3d(0, 200px, 0);
	opacity:0;
	}
	50% {

	}
	to {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	opacity:1;
	}
}

@keyframes sjSlideInUp4 {
	from {
	-webkit-transform: translate3d(0, 200px, 0);
	transform: translate3d(0, 200px, 0);
	opacity:0;
	}
	50% {

	}
	to {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	opacity:1;
	}
}

.sjZoomIn {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); /* Chrome, Safari, Opera */
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
-webkit-transform: translateZ(0);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
transition: transform .3s;
-webkit-transition: -webkit-transform .3s;
-moz-transition: -moz-transform .3s;    transform: scale(1.02);
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
transform: scale(1.05);
}
	
.sjZoomOut {
-webkit-animation-duration: 0.8s;
animation-duration: 0.8s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); /* Chrome, Safari, Opera */
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
-webkit-transform: translateZ(0);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
transition: transform .3s;
-webkit-transition: -webkit-transform .3s;
-moz-transition: -moz-transform .3s;    transform: scale(1.0);
-webkit-transform: scale(1.0);
-moz-transform: scale(1.0);
transform: scale(1.0);
}


.overHidden {overflow:hidden;}
.overHidden img {display:block;}


.item_con ul li a {
	perspective: 1000;
	-webkit-perspective: 1000;
}
/* flip the pane when hovered */
.item_con ul li a.hover .item_box_wrap {
	transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
}

/* flip speed goes here */
.item_box_wrap {
	transition: 0.6s;
	transform-style: preserve-3d;
	-webkit-transition: 0.6s;
	-webkit-transform-style: preserve-3d;
	position: relative;
	
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	position: absolute;
	position:absolute; top:0; left:0; right:0; bottom:0; 
}

/* front pane, placed above back */
.front {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(0deg);
	-webkit-transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
	transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
}