﻿.cs-style-4 li {
	perspective: 1700;
	perspective-origin: 0 50%;

    -webkit-perspective:1700;
    -webkit-perspective-origin: 0 50%;

    -moz-perspective:1700;
    -moz-perspective-origin: 0 50%;
}

.cs-style-4 figure {
	transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
}

/*.cs-style-4 figure img {
	-webkit-transition: -webkit-transform 0.4s;
	-moz-transition: -moz-transform 0.4s;
	transition: transform 0.4s;
}*/

/*.cs-style-4 figure:hover img,
.cs-style-4 figure.cs-hover img {
	-webkit-transform: translateX(25%);
	-moz-transform: translateX(25%);
	-ms-transform: translateX(25%);
	transform: translateX(25%);
}*/

.cs-style-4 figcaption {
	opacity: 0;
    backface-visibility: hidden;
    transform-origin: bottom center;
    transform: rotateX(-180deg);
    transition: transform 0.6s, opacity 0.2s 0.1s;

    -webkit-transform-origin:bottom center;
    -webkit-transform: rotateX(-180deg);
    -webkit-transition:-webkit-transform 0.6s, opacity 0.2s 0.1s;

    -moz-transform-origin:bottom center;
    -moz-transform: rotateX(-180deg);
    -moz-transition:-moz-transform 0.6s, opacity 0.2s 0.1s;

    -o-transform:rotateX(-180deg);
    -o-transform-origin:bottom center;
    
    
}

.no-touch .cs-style-4 figure:hover figcaption,
.cs-style-4 figure.cs-hover figcaption {
	opacity: 1;
    transform: rotateY(0deg);
    -webkit-transform: rotateX(0deg);

    transition: transform 0.4s, opacity 0.1s;
    -webkit-transition: -webkit-transform 0.4s, opacity 0.1s;

    -moz-transition: -moz-transform 0.4s, opacity 0.1s;

}

.cs-style-3 li img {
	-webkit-transition: -webkit-transform 0.4s;
	-moz-transition: -moz-transform 0.4s;
	transition: transform 0.4s;
}

.no-touch .cs-style-3 li:hover img,
.cs-style-3 li.cs-hover img {
	-webkit-transform: translateY(-50px);
	-moz-transform: translateY(-50px);
	-ms-transform: translateY(-50px);
	transform: translateY(-50px);
}

.cs-style-3 li a span {

	bottom: 0px;
	opacity: 0;
	-webkit-transform: translateY(100%);
	-moz-transform: translateY(100%);
	-ms-transform: translateY(100%);
	transform: translateY(100%);
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
	-moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
	transition: transform 0.4s, opacity 0.1s 0.3s;
}

.no-touch .cs-style-3 li:hover a span ,
.cs-style-3 li.cs-hover a span {
	opacity: 1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-ms-transform: translateY(0px);
	transform: translateY(0px);
	-webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
	-moz-transition: -moz-transform 0.4s, opacity 0.1s;
	transition: transform 0.4s, opacity 0.1s;
}

.cs-style-3 a span {
	bottom: 0px;
}