/* 
Xoverlay
--------------------------------------------------------
Author: Echothemes
Author UI: http://echothemes.ehungers.com
Item Name: Xoverlay
Description: CSS Hover Effects
Version: 1.0

*/

/* general css */
.xoverlay{
position:relative;
overflow:hidden;
perspective: 300px;
-webkit-perspective: 300px;
-ms-perspective: 300px;
-o-perspective: 300px;
}

.xoverlay .x-img-main{
width:100%;
}
.xoverlay-data{
width:100%;
height:100%;
text-align:center;
}
.xoverlay-data p{
color:#fff;
text-align:left;
padding:10px;
margin:0;
float:left;
font-size:13px;
}
.xoverlay h2{
font-size:16px;
margin:0;
float:left;
display:block;
padding:10px 10px 0 10px;
color:#f1c40f;
}
.xoverlay span{
display: inline-block;
position: relative;
top: 33%;
margin:0 3%;
}
.xoverlay span i{
text-align:center;
font-size:40px;
width:50px;
height:50px;
padding:5%;
}
@media(max-width:530px) {
.xoverlay span i{
text-align:center;
font-size:27px;
width:35px;
height:35px;
padding:5%;
}
}
@media(max-width:530px) {
.xoverlay span i{
text-align:center;
font-size:19px;
width:25px;
height:25px;
padding:5%;
}
}
@media(max-width:302px) {
.xoverlay span i{
text-align:center;
font-size:10px;
width:15px;
height:15px;
padding:5%;
}
}
.x-more,.x-more:hover{
background: #ffffff;
border-radius: 2px;
clear: both;
color: #858585;
padding: 3px 7px;
float:left;
margin:0 10px;
text-decoration:none;
}
/* Icon style */
.xoverlay .x-circle i{
border-radius:50%;
border:2px solid;
}
.xoverlay .x-square i{
border:2px solid;
}
.xoverlay .x-lemon  i{
border:2px solid;
border-radius:50% 0;
}
.xoverlay .x-balloon  i{
border:2px solid;
border-radius:50% 0 50% 50%;
}
.xoverlay .x-smooth  i{
border:2px solid;
border-radius:10%;
}
.x-white i{
color:#ffffff;
border-color:#ffffff;
}
.x-yellow i{
color:#f1c40f;
border-color:#f1c40f;
}
.x-green i{
color:#2ecc71;
border-color:#2ecc71;
}
.x-blue i{
color:#1abc9c;
border-color:#1abc9c;
}
.x-red i{
color:#e74c3c;
border-color:#e74c3c;
}
.x-orange i{
color:#e67e22;
border-color:#e67e22;
}
/* Simple Opacity */
.x-simple .xoverlay-box{
width:100%;
height:100%;
position:absolute;
left:0;
right:0;
bottom:0;
top:0;
opacity:0;
background:rgba(27,27,27,.7);
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}

.x-simple:hover .xoverlay-box{
width:100%;
height:100%;
position:absolute;
left:0;
right:0;
bottom:0;
top:0;
opacity:1;
background:rgba(27,27,27,.7);
}
/* Slide Up */
.x-bottom .xoverlay-box{
width:100%;
height:100%;
position:absolute;
left:0;
right:0;
bottom:-500px;
background:#444444;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}

.x-bottom:hover .xoverlay-box{
width:100%;
height:100%;
position:absolute;
left:0;
right:0;
bottom:0;
background:#444444;
}
/* Slide Down */
.x-top .xoverlay-box{
width:100%;
height:100%;
position:absolute;
left:0;
right:0;
top:-500px;
background:#444444;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}

.x-top:hover .xoverlay-box{
width:100%;
height:100%;
position:absolute;
left:0;
right:0;
top:0;
background:#444444;
}
/* Slide Left */
.x-left .xoverlay-box{
width:100%;
height:100%;
position:absolute;
top:0;
bottom:0;
right:0;
left:-500px;
background:#444444;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}

.x-left:hover .xoverlay-box{
width:100%;
height:100%;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
background:#444444;
}
/* Slide Right */
.x-right .xoverlay-box{
width:100%;
height:100%;
position:absolute;
top:0;
bottom:0;
right:-500px;
background:#444444;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}

.x-right:hover .xoverlay-box{
width:100%;
height:100%;
position:absolute;
right:0;
top:0;
bottom:0;
background:#444444;
}
/* Slide Top Left */
.x-top-left .xoverlay-box{
width:100%;
height:100%;
position:absolute;
top:-500px;
left:-500px;
background:#444444;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}

.x-top-left:hover .xoverlay-box{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
background:#444444;
}
/* Slide Top Right */
.x-top-right .xoverlay-box{
width:100%;
height:100%;
position:absolute;
top:-500px;
right:-500px;
background:#444444;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}

.x-top-right:hover .xoverlay-box{
width:100%;
height:100%;
position:absolute;
top:0;
right:0;
background:#444444;
}
/* Slide Bottom Left */
.x-bottom-left .xoverlay-box{
width:100%;
height:100%;
position:absolute;
bottom:-500px;
left:-500px;
background:#444444;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}

.x-bottom-left:hover .xoverlay-box{
width:100%;
height:100%;
position:absolute;
bottom:0;
left:0;
background:#444444;
}

/* Slide Bottom Right */
.x-bottom-right .xoverlay-box{
width:100%;
height:100%;
position:absolute;
bottom:-500px;
right:-500px;
background:#444444;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}

.x-bottom-right:hover .xoverlay-box{
width:100%;
height:100%;
position:absolute;
bottom:0;
right:0;
background:#444444;
}
/* Flip Left */
.x-flip-left .xoverlay-box{
transform-origin: center left;
-ms-transform-origin: center left;
-webkit-transform-origin: center left;

transform:rotateY(131deg);
-ms-transform:rotateY(131deg); /* IE 9 */
-webkit-transform:rotateY(131deg); /* Opera, Chrome, and Safari */

width:100%;
height:100%;
position:absolute;
top:0;
bottom:0;
left:0;
background:#444444;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}

.x-flip-left:hover .xoverlay-box{
transform-origin: center left;
-ms-transform-origin: center left;
-webkit-transform-origin: center left;

transform:rotateY(0deg);
-ms-transform:rotateY(0deg); /* IE 9 */
-webkit-transform:rotateY(0deg); /* Opera, Chrome, and Safari */


width:100%;
height:100%;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
background:#444444;
}
/* Flip Right */
.x-flip-right .xoverlay-box{
transform-origin: center right;
-ms-transform-origin: center right;
-webkit-transform-origin: center right;

transform:rotateY(-133deg);
-ms-transform:rotateY(-133deg); /* IE 9 */
-webkit-transform:rotateY(-133deg); /* Opera, Chrome, and Safari */

width:100%;
height:100%;
position:absolute;
top:0;
bottom:0;
right:0;
background:#444444;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}

.x-flip-right:hover .xoverlay-box{
transform-origin: center right;
-ms-transform-origin: center right;
-webkit-transform-origin: center right;

transform:rotateY(0deg);
-ms-transform:rotateY(0deg); /* IE 9 */
-webkit-transform:rotateY(0deg); /* Opera, Chrome, and Safari */


width:100%;
height:100%;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
background:#444444;
}
/* Flip Top */
.x-flip-top .xoverlay-box{
transform-origin: center top;
-ms-transform-origin: center top;
-webkit-transform-origin: center top;

transform:rotateX(-125deg);
-ms-transform:rotateX(-125deg); /* IE 9 */
-webkit-transform:rotateX(-125deg); /* Opera, Chrome, and Safari */

width:100%;
height:100%;
position:absolute;
top:0;
bottom:0;
right:0;
background:#444444;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}

.x-flip-top:hover .xoverlay-box{
transform-origin: center top;
-ms-transform-origin: center top;
-webkit-transform-origin: center top;

transform:rotateX(0deg);
-ms-transform:rotateX(0deg); /* IE 9 */
-webkit-transform:rotateX(0deg); /* Opera, Chrome, and Safari */


width:100%;
height:100%;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
background:#444444;
}
/* Flip Bottom */
.x-flip-bottom .xoverlay-box{
transform-origin: center bottom;
-ms-transform-origin: center bottom;
-webkit-transform-origin: center bottom;

transform:rotateX(131deg);
-ms-transform:rotateX(131deg); /* IE 9 */
-webkit-transform:rotateX(131deg); /* Opera, Chrome, and Safari */

width:100%;
height:100%;
position:absolute;
top:0;
bottom:0;
right:0;
background:#444444;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}

.x-flip-bottom:hover .xoverlay-box{
transform-origin: center bottom;
-ms-transform-origin: center bottom;
-webkit-transform-origin: center bottom;

transform:rotateX(0deg);
-ms-transform:rotateX(0deg); /* IE 9 */
-webkit-transform:rotateX(0deg); /* Opera, Chrome, and Safari */


width:100%;
height:100%;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
background:#444444;
}

/* Wobble Left */
.x-wobble-left .xoverlay-box{
transform-origin: center left;
-ms-transform-origin: center left;
-webkit-transform-origin: center left;

transform:rotateY(131deg);
-ms-transform:rotateY(131deg); /* IE 9 */
-webkit-transform:rotateY(131deg); /* Opera, Chrome, and Safari */

width:100%;
height:100%;
position:absolute;
top:0;
bottom:0;
left:0;
background:#444444;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}

.x-wobble-left:hover .xoverlay-box{
transform-origin: center right;
-ms-transform-origin: center right;
-webkit-transform-origin: center right;

transform:rotateY(0deg);
-ms-transform:rotateY(0deg); /* IE 9 */
-webkit-transform:rotateY(0deg); /* Opera, Chrome, and Safari */


width:100%;
height:100%;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
background:#444444;
}
/* Wobble Right */
.x-wobble-right .xoverlay-box{
transform-origin: center right;
-ms-transform-origin: center right;
-webkit-transform-origin: center right;

transform:rotateY(-133deg);
-ms-transform:rotateY(-133deg); /* IE 9 */
-webkit-transform:rotateY(-133deg); /* Opera, Chrome, and Safari */

width:100%;
height:100%;
position:absolute;
top:0;
bottom:0;
left:0;
background:#444444;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}

.x-wobble-right:hover .xoverlay-box{
transform-origin: center left;
-ms-transform-origin: center left;
-webkit-transform-origin: center left;

transform:rotateY(0deg);
-ms-transform:rotateY(0deg); /* IE 9 */
-webkit-transform:rotateY(0deg); /* Opera, Chrome, and Safari */


width:100%;
height:100%;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
background:#444444;
}
/* Wobble Top */
.x-wobble-top .xoverlay-box{
transform-origin: center top;
-ms-transform-origin: center top;
-webkit-transform-origin: center top;

transform:rotateX(-131deg);
-ms-transform:rotateX(-131deg); /* IE 9 */
-webkit-transform:rotateX(-131deg); /* Opera, Chrome, and Safari */

width:100%;
height:100%;
position:absolute;
top:0;
bottom:0;
right:0;
background:#444444;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}

.x-wobble-top:hover .xoverlay-box{
transform-origin: center bottom;
-ms-transform-origin: center bottom;
-webkit-transform-origin: center bottom;

transform:rotateX(0deg);
-ms-transform:rotateX(0deg); /* IE 9 */
-webkit-transform:rotateX(0deg); /* Opera, Chrome, and Safari */


width:100%;
height:100%;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
background:#444444;
}
/* Wobble Bottom */
.x-wobble-bottom .xoverlay-box{
transform-origin: center bottom;
-ms-transform-origin: center bottom;
-webkit-transform-origin: center bottom;

transform:rotateX(131deg);
-ms-transform:rotateX(131deg); /* IE 9 */
-webkit-transform:rotateX(131deg); /* Opera, Chrome, and Safari */

width:100%;
height:100%;
position:absolute;
top:0;
bottom:0;
right:0;
background:#444444;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}

.x-wobble-bottom:hover .xoverlay-box{
transform-origin: center top;
-ms-transform-origin: center top;
-webkit-transform-origin: center top;

transform:rotateX(0deg);
-ms-transform:rotateX(0deg); /* IE 9 */
-webkit-transform:rotateX(0deg); /* Opera, Chrome, and Safari */


width:100%;
height:100%;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
background:#444444;
}

/* Push Left */
.x-fpush-left .xoverlay-box{
transform-origin: center left;
-ms-transform-origin: center left;
-webkit-transform-origin: center left;

transform:rotateY(131deg);
-ms-transform:rotateY(131deg); /* IE 9 */
-webkit-transform:rotateY(131deg); /* Opera, Chrome, and Safari */

width:50%;
height:100%;
position:absolute;
top:0;
bottom:0;
left:0;
background:#444444;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}

.x-fpush-left:hover .xoverlay-box{
transform-origin: center left;
-ms-transform-origin: center left;
-webkit-transform-origin: center left;

transform:rotateY(0deg);
-ms-transform:rotateY(0deg); /* IE 9 */
-webkit-transform:rotateY(0deg); /* Opera, Chrome, and Safari */


width:50%;
height:100%;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
background:#444444;
}
.x-fpush-left .x-img-main{
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.x-fpush-left:hover .x-img-main{
transform:translateX(20%);
-ms-transform:translateX(20%); /* IE 9 */
-webkit-transform:translateX(20%); /* Opera, Chrome, and Safari */
}
/* Push Right */
.x-fpush-right .xoverlay-box{
transform-origin: center right;
-ms-transform-origin: center right;
-webkit-transform-origin: center right;

transform:rotateY(-132deg);
-ms-transform:rotateY(-132deg); /* IE 9 */
-webkit-transform:rotateY(-132deg); /* Opera, Chrome, and Safari */

width:50%;
height:100%;
position:absolute;
top:0;
bottom:0;
right:0;
background:#444444;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}

.x-fpush-right:hover .xoverlay-box{
transform-origin: center right;
-ms-transform-origin: center right;
-webkit-transform-origin: center right;

transform:rotateY(0deg);
-ms-transform:rotateY(0deg); /* IE 9 */
-webkit-transform:rotateY(0deg); /* Opera, Chrome, and Safari */

width:50%;
height:100%;
position:absolute;
top:0;
bottom:0;
right:0;
background:#444444;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.x-fpush-right .x-img-main{
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.x-fpush-right:hover .x-img-main{
transform:translateX(-20%);
-ms-transform:translateX(-20%); /* IE 9 */
-webkit-transform:translateX(-20%); /* Opera, Chrome, and Safari */
}
/* Push Top */
.x-fpush-top .xoverlay-box{
transform-origin: center top;
-ms-transform-origin: center top;
-webkit-transform-origin: center top;

transform:rotateX(-125deg);
-ms-transform:rotateX(-125deg); /* IE 9 */
-webkit-transform:rotateX(-125deg); /* Opera, Chrome, and Safari */

width:100%;
height:70%;
position:absolute;
top:0;
bottom:0;
right:0;
background:#444444;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}

.x-fpush-top:hover .xoverlay-box{
transform-origin: center top;
-ms-transform-origin: center top;
-webkit-transform-origin: center top;

transform:rotateX(0deg);
-ms-transform:rotateX(0deg); /* IE 9 */
-webkit-transform:rotateX(0deg); /* Opera, Chrome, and Safari */

width:100%;
height:70%;
position:absolute;
top:0;
bottom:0;
right:0;
background:#444444;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.x-fpush-top .x-img-main{
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.x-fpush-top:hover .x-img-main{
transform:translateY(20%);
-ms-transform:translateY(20%); /* IE 9 */
-webkit-transform:translateY(20%); /* Opera, Chrome, and Safari */
}
/* Push Bottom */
.x-fpush-bottom .xoverlay-box{
transform-origin: center bottom;
-ms-transform-origin: center bottom;
-webkit-transform-origin: center bottom;

transform:rotateX(131deg);
-ms-transform:rotateX(131deg); /* IE 9 */
-webkit-transform:rotateX(131deg); /* Opera, Chrome, and Safari */

width:100%;
height:70%;
position:absolute;

bottom:0;
right:0;
background:#444444;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}

.x-fpush-bottom:hover .xoverlay-box{
transform-origin: center bottom;
-ms-transform-origin: center bottom;
-webkit-transform-origin: center bottom;

transform:rotateX(0deg);
-ms-transform:rotateX(0deg); /* IE 9 */
-webkit-transform:rotateX(0deg); /* Opera, Chrome, and Safari */

width:100%;
height:70%;
position:absolute;
bottom:0;
right:0;
background:#444444;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.x-fpush-bottom .x-img-main{
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.x-fpush-bottom:hover .x-img-main{
transform:translateY(-20%);
-ms-transform:translateY(-20%); /* IE 9 */
-webkit-transform:translateY(-20%); /* Opera, Chrome, and Safari */
}
/* Push Full Left */
.x-pushfull-left .xoverlay-box{
width:100%;
height:100%;
position:absolute;
top:0;
bottom:0;
right:0;
left:-100%;
background:#444444;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}

.x-pushfull-left:hover .xoverlay-box{
width:100%;
height:100%;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
background:#444444;
}
.x-pushfull-left .x-img-main{
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.x-pushfull-left:hover .x-img-main{
transform:translateX(100%);
-ms-transform:translateX(100%); /* IE 9 */
-webkit-transform:translateX(100%); /* Opera, Chrome, and Safari */
}
/* Push Full Right */
.x-pushfull-right .xoverlay-box{
width:100%;
height:100%;
position:absolute;
top:0;
bottom:0;
right:-100%;
background:#444444;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}

.x-pushfull-right:hover .xoverlay-box{
width:100%;
height:100%;
position:absolute;
right:0;
top:0;
bottom:0;
background:#444444;
}
.x-pushfull-right .x-img-main{
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.x-pushfull-right:hover .x-img-main{
transform:translateX(-100%);
-ms-transform:translateX(-100%); /* IE 9 */
-webkit-transform:translateX(-100%); /* Opera, Chrome, and Safari */
}
/* Push Full Top */
.x-pushfull-top .xoverlay-box{
width:100%;
height:100%;
position:absolute;
top:-100%;
right:0;
left:0;
background:#444444;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}

.x-pushfull-top:hover .xoverlay-box{
width:100%;
height:100%;
position:absolute;
right:0;
top:0;
left:0;
background:#444444;
}
.x-pushfull-top .x-img-main{
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.x-pushfull-top:hover .x-img-main{
transform:translateY(100%);
-ms-transform:translateY(100%); /* IE 9 */
-webkit-transform:translateY(100%); /* Opera, Chrome, and Safari */
}
/* Push Full Bottom */
.x-pushfull-bottom .xoverlay-box{
width:100%;
height:100%;
position:absolute;
bottom:-100%;
right:0;
left:0;
background:#444444;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}

.x-pushfull-bottom:hover .xoverlay-box{
width:100%;
height:100%;
position:absolute;
right:0;
bottom:0;
left:0;
background:#444444;
}
.x-pushfull-bottom .x-img-main{
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.x-pushfull-bottom:hover .x-img-main{
transform:translateY(-100%);
-ms-transform:translateY(-100%); /* IE 9 */
-webkit-transform:translateY(-100%); /* Opera, Chrome, and Safari */
}
/* Image Rotate Left */
.x-imgrotate-left .xoverlay-box{
width:100%;
height:100%;
position:absolute;
left:0;
right:0;
bottom:0;
top:0;
opacity:0;
background:rgba(27,27,27,0.7);
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}

.x-imgrotate-left:hover .xoverlay-box{
width:100%;
height:100%;
position:absolute;
left:0;
right:0;
bottom:0;
top:0;
opacity:1;
background:rgba(27,27,27,0.7);
}
.x-imgrotate-left .x-img-main{
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.x-imgrotate-left:hover .x-img-main{
-ms-transform: rotate(30deg) scale(1.5,1.5); /* IE 9 */
-webkit-transform: rotate(30deg) scale(1.5,1.5); /* Chrome, Safari, Opera */
transform: rotate(30deg) scale(1.5,1.5); /* Standard syntax */
}

/* Image Rotate Right */
.x-imgrotate-right .xoverlay-box{
width:100%;
height:100%;
position:absolute;
left:0;
right:0;
bottom:0;
top:0;
opacity:0;
background:rgba(27,27,27,0.7);
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}

.x-imgrotate-right:hover .xoverlay-box{
width:100%;
height:100%;
position:absolute;
left:0;
right:0;
bottom:0;
top:0;
opacity:1;
background:rgba(27,27,27,0.7);
}
.x-imgrotate-right .x-img-main{
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.x-imgrotate-right:hover .x-img-main{
-ms-transform: rotate(-30deg) scale(1.5,1.5); /* IE 9 */
-webkit-transform: rotate(-30deg) scale(1.5,1.5); /* Chrome, Safari, Opera */
transform: rotate(-30deg) scale(1.5,1.5); /* Standard syntax */
}
/* Zoom */
.x-zoom .xoverlay-box{
width:100%;
height:100%;
position:absolute;
left:0;
right:0;
bottom:0;
top:0;
overflow:hidden;
-ms-transform:scale(0,0); /* IE 9 */
-webkit-transform:scale(0,0); /* Chrome, Safari, Opera */
transform:scale(0,0); /* Standard syntax */
background:#444444;
background:#444444;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}

.x-zoom:hover .xoverlay-box{
width:100%;
height:100%;
position:absolute;
left:0;
right:0;
bottom:0;
top:0;
overflow:hidden;
background:#444444;
-ms-transform:scale(1,1); /* IE 9 */
-webkit-transform:scale(1,1); /* Chrome, Safari, Opera */
transform:scale(1,1); /* Standard syntax */
}
/* Zoom In Out */
.x-zoom-inout .xoverlay-box{
width:100%;
height:100%;
position:absolute;
left:0;
right:0;
bottom:0;
top:0;
overflow:hidden;
-ms-transform:scale(0,0); /* IE 9 */
-webkit-transform:scale(0,0); /* Chrome, Safari, Opera */
transform:scale(0,0); /* Standard syntax */
background:#444444;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}

.x-zoom-inout:hover .xoverlay-box{
width:100%;
height:100%;
position:absolute;
left:0;
right:0;
bottom:0;
top:0;
overflow:hidden;
background:#444444;
-ms-transform:scale(1,1); /* IE 9 */
-webkit-transform:scale(1,1); /* Chrome, Safari, Opera */
transform:scale(1,1); /* Standard syntax */
}
.x-zoom-inout .x-img-main{
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.x-zoom-inout:hover .x-img-main{
-ms-transform:scale(0,0); /* IE 9 */
-webkit-transform:scale(0,0); /* Chrome, Safari, Opera */
transform:scale(0,0); /* Standard syntax */
}
/* Zoom Rotate */
.x-zoom-rotate .xoverlay-box{
width:100%;
height:100%;
position:absolute;
left:0;
right:0;
bottom:0;
top:0;
overflow:hidden;
ms-transform:rotate(0deg) scale(0,0); /* IE 9 */
-webkit-transform:rotate(0deg) scale(0,0); /* Chrome, Safari, Opera */
transform:rotate(0deg) scale(0,0); /* Standard syntax */
background:#444444;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}

.x-zoom-rotate:hover .xoverlay-box{
width:100%;
height:100%;
position:absolute;
left:0;
right:0;
bottom:0;
top:0;
overflow:hidden;
background:#444444;
-ms-transform:rotate(360deg) scale(1,1); /* IE 9 */
-webkit-transform:rotate(360deg) scale(1,1); /* Chrome, Safari, Opera */
transform:rotate(360deg) scale(1,1); /* Standard syntax */

}

/* Zoom RotateY */
.x-zoom-rotatey .xoverlay-box{
width:100%;
height:100%;
position:absolute;
left:0;
right:0;
bottom:0;
top:0;
overflow:hidden;
ms-transform:rotateY(0deg) scale(0,0); /* IE 9 */
-webkit-transform:rotateY(0deg) scale(0,0); /* Chrome, Safari, Opera */
transform:rotateY(0deg) scale(0,0); /* Standard syntax */
background:#444444;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}

.x-zoom-rotatey:hover .xoverlay-box{
width:100%;
height:100%;
position:absolute;
left:0;
right:0;
bottom:0;
top:0;
overflow:hidden;
background:#444444;
-ms-transform:rotateY(360deg) scale(1,1); /* IE 9 */
-webkit-transform:rotateY(360deg) scale(1,1); /* Chrome, Safari, Opera */
transform:rotateY(360deg) scale(1,1); /* Standard syntax */

}

/* Zoom RotateX */
.x-zoom-rotatex .xoverlay-box{
width:100%;
height:100%;
position:absolute;
left:0;
right:0;
bottom:0;
top:0;
overflow:hidden;
ms-transform:rotateX(0deg) scale(0,0); /* IE 9 */
-webkit-transform:rotateX(0deg) scale(0,0); /* Chrome, Safari, Opera */
transform:rotateX(0deg) scale(0,0); /* Standard syntax */
background:#444444;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}

.x-zoom-rotatex:hover .xoverlay-box{
width:100%;
height:100%;
position:absolute;
left:0;
right:0;
bottom:0;
top:0;
overflow:hidden;
background:#444444;
-ms-transform:rotateX(360deg) scale(1,1); /* IE 9 */
-webkit-transform:rotateX(360deg) scale(1,1); /* Chrome, Safari, Opera */
transform:rotateX(360deg) scale(1,1); /* Standard syntax */

}

/* Slide Icon Top Bottom */
.xoverlay .x-icon-top-bottom span:nth-of-type(1){
opacity:0;
transform:translateY(-500%);
-ms-transform:translateY(-500%); /* IE 9 */
-webkit-transform:translateY(-500%); /* Opera, Chrome, and Safari */
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.xoverlay:hover .x-icon-top-bottom span:nth-of-type(1){
opacity:1;
transform:translateY(0%);
-ms-transform:translateY(0%); /* IE 9 */
-webkit-transform:translateY(0%); /* Opera, Chrome, and Safari */
}

.xoverlay .x-icon-top-bottom span:nth-of-type(2){
opacity:0;
transform:scale(0,0);
-ms-transform:scale(0,0); /* IE 9 */
-webkit-transform:scale(0,0); /* Opera, Chrome, and Safari */
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.xoverlay:hover .x-icon-top-bottom span:nth-of-type(2){
opacity:1;
transform:scale(1,1);
-ms-transform:scale(1,1); /* IE 9 */
-webkit-transform:scale(1,1); /* Opera, Chrome, and Safari */
}

.xoverlay .x-icon-top-bottom span:nth-of-type(3){
opacity:0;
transform:translateY(300%);
-ms-transform:translateY(300%); /* IE 9 */
-webkit-transform:translateY(300%); /* Opera, Chrome, and Safari */
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.xoverlay:hover .x-icon-top-bottom span:nth-of-type(3){
opacity:1;
transform:translateY(0%);
-ms-transform:translateY(0%); /* IE 9 */
-webkit-transform:translateY(0%); /* Opera, Chrome, and Safari */
}

/* Slide Icon Left Right */
.xoverlay .x-icon-left-right span:nth-of-type(1){
opacity:0;
transform:translateX(-500%);
-ms-transform:translateX(-500%); /* IE 9 */
-webkit-transform:translateX(-500%); /* Opera, Chrome, and Safari */
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.xoverlay:hover .x-icon-left-right span:nth-of-type(1){
opacity:1;
transform:translateX(0%);
-ms-transform:translateX(0%); /* IE 9 */
-webkit-transform:translateX(0%); /* Opera, Chrome, and Safari */
}

.xoverlay .x-icon-left-right span:nth-of-type(2){
opacity:0;
transform:scale(0,0);
-ms-transform:scale(0,0); /* IE 9 */
-webkit-transform:scale(0,0); /* Opera, Chrome, and Safari */
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.xoverlay:hover .x-icon-left-right span:nth-of-type(2){
opacity:1;
transform:scale(1,1);
-ms-transform:scale(1,1); /* IE 9 */
-webkit-transform:scale(1,1); /* Opera, Chrome, and Safari */
}

.xoverlay .x-icon-left-right span:nth-of-type(3){
opacity:0;
transform:translateX(300%);
-ms-transform:translateX(300%); /* IE 9 */
-webkit-transform:translateX(300%); /* Opera, Chrome, and Safari */
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.xoverlay:hover .x-icon-left-right span:nth-of-type(3){
opacity:1;
transform:translateX(0%);
-ms-transform:translateX(0%); /* IE 9 */
-webkit-transform:translateX(0%); /* Opera, Chrome, and Safari */
}
/* Zoom Icon */
.xoverlay .x-icon-zoom span{
opacity:0;
transform:scale(0,0);
-ms-transform:scale(0,0); /* IE 9 */
-webkit-transform:scale(0,0); /* Opera, Chrome, and Safari */
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.xoverlay:hover .x-icon-zoom span{
opacity:1;
transform:scale(1,1);
-ms-transform:scale(1,1); /* IE 9 */
-webkit-transform:scale(1,1); /* Opera, Chrome, and Safari */
}

/* Icon Left */
.xoverlay .x-icon-left span{
opacity:0;
transform:translateX(-500%);
-ms-transform:translateX(-500%); /* IE 9 */
-webkit-transform:translateX(-500%); /* Opera, Chrome, and Safari */
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.xoverlay:hover .x-icon-left span{
opacity:1;
transform:translateX(0%);
-ms-transform:translateX(0%); /* IE 9 */
-webkit-transform:translateX(0%); /* Opera, Chrome, and Safari */
}

/* Icon Right */
.xoverlay .x-icon-right span{
opacity:0;
transform:translateX(300%);
-ms-transform:translateX(300%); /* IE 9 */
-webkit-transform:translateX(300%); /* Opera, Chrome, and Safari */
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.xoverlay:hover .x-icon-right span{
opacity:1;
transform:translateX(0%);
-ms-transform:translateX(0%); /* IE 9 */
-webkit-transform:translateX(0%); /* Opera, Chrome, and Safari */
}

/* Icon Top */
.xoverlay .x-icon-top span{
opacity:0;
transform:translateY(-500%);
-ms-transform:translateY(-500%); /* IE 9 */
-webkit-transform:translateY(-500%); /* Opera, Chrome, and Safari */
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.xoverlay:hover .x-icon-top span{
opacity:1;
transform:translateY(0%);
-ms-transform:translateY(0%); /* IE 9 */
-webkit-transform:translateY(0%); /* Opera, Chrome, and Safari */
}

/* Icon Bottom */
.xoverlay .x-icon-bottom span{
opacity:0;
transform:translateY(300%);
-ms-transform:translateY(300%); /* IE 9 */
-webkit-transform:translateY(300%); /* Opera, Chrome, and Safari */
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.xoverlay:hover .x-icon-bottom span{
opacity:1;
transform:translateY(0%);
-ms-transform:translateY(0%); /* IE 9 */
-webkit-transform:translateY(0%); /* Opera, Chrome, and Safari */
}

/* Slide Up Icon zoom */
.xoverlay .x-icon-zoomup span:nth-of-type(1){
transform:scale(0,0) translateY(300%);
-ms-transform:scale(0,0) translateX(300%); /* IE 9 */
-webkit-transform:scale(0,0) translateX(300%); /* Opera, Chrome, and Safari */
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.xoverlay:hover .x-icon-zoomup span:nth-of-type(1){
transform:scale(1,1) translateX(0%);
-ms-transform:scale(1,1) translateX(0%); /* IE 9 */
-webkit-transform:scale(1,1) translateX(0%); /* Opera, Chrome, and Safari */
}

.xoverlay .x-icon-zoomup span:nth-of-type(2){
transform:scale(2,2);
-ms-transform:scale(2,2); /* IE 9 */
-webkit-transform:scale(2,2); /* Opera, Chrome, and Safari */
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.xoverlay:hover .x-icon-zoomup span:nth-of-type(2){
transform:scale(1,1);
-ms-transform:scale(1,1); /* IE 9 */
-webkit-transform:scale(1,1); /* Opera, Chrome, and Safari */
}

.xoverlay .x-icon-zoomup span:nth-of-type(3){
transform:scale(0,0) translateY(300%);
-ms-transform:scale(0,0) translateX(300%); /* IE 9 */
-webkit-transform:scale(0,0) translateX(300%); /* Opera, Chrome, and Safari */
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.xoverlay:hover .x-icon-zoomup span:nth-of-type(3){
transform:scale(1,1) translateX(0%);
-ms-transform:scale(1,1) translateX(0%); /* IE 9 */
-webkit-transform:scale(1,1) translateX(0%); /* Opera, Chrome, and Safari */
}

/* Slide Down Icon zoom */
.xoverlay .x-icon-zoomdown span:nth-of-type(1){
transform:scale(0,0) translateY(-500%);
-ms-transform:scale(0,0) translateX(-500%); /* IE 9 */
-webkit-transform:scale(0,0) translateX(-500%); /* Opera, Chrome, and Safari */
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.xoverlay:hover .x-icon-zoomdown span:nth-of-type(1){
transform:scale(1,1) translateX(0%);
-ms-transform:scale(1,1) translateX(0%); /* IE 9 */
-webkit-transform:scale(1,1) translateX(0%); /* Opera, Chrome, and Safari */
}

.xoverlay .x-icon-zoomdown span:nth-of-type(2){
transform:scale(2,2);
-ms-transform:scale(2,2); /* IE 9 */
-webkit-transform:scale(2,2); /* Opera, Chrome, and Safari */
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.xoverlay:hover .x-icon-zoomdown span:nth-of-type(2){
transform:scale(1,1);
-ms-transform:scale(1,1); /* IE 9 */
-webkit-transform:scale(1,1); /* Opera, Chrome, and Safari */
}

.xoverlay .x-icon-zoomdown span:nth-of-type(3){
transform:scale(0,0) translateY(-500%);
-ms-transform:scale(0,0) translateX(-500%); /* IE 9 */
-webkit-transform:scale(0,0) translateX(-500%); /* Opera, Chrome, and Safari */
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.xoverlay:hover .x-icon-zoomdown span:nth-of-type(3){
transform:scale(1,1) translateX(0%);
-ms-transform:scale(1,1) translateX(0%); /* IE 9 */
-webkit-transform:scale(1,1) translateX(0%); /* Opera, Chrome, and Safari */
}

/* Icon Rotate Zoom */
.xoverlay .x-icon-rotatezoom span{
opacity:0;
transform:scale(0,0) rotate(180deg);
-ms-transform:scale(0,0) rotate(180deg); /* IE 9 */
-webkit-transform:scale(0,0) rotate(180deg); /* Opera, Chrome, and Safari */
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.xoverlay:hover .x-icon-rotatezoom span{
opacity:1;
transform:scale(1,1) rotate(0deg);
-ms-transform:scale(1,1) rotate(0deg); /* IE 9 */
-webkit-transform:scale(1,1) rotate(0deg); /* Opera, Chrome, and Safari */
}

/* Icon Zoom Out To In */
.xoverlay .x-icon-zoomoutin span:nth-of-type(1){
transform:scale(2,2);
-ms-transform:scale(2,2); /* IE 9 */
-webkit-transform:scale(2,2); /* Opera, Chrome, and Safari */
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.xoverlay:hover .x-icon-zoomoutin span:nth-of-type(1){
transform:scale(1,1);
-ms-transform:scale(1,1); /* IE 9 */
-webkit-transform:scale(1,1); /* Opera, Chrome, and Safari */
}

.xoverlay .x-icon-zoomoutin span:nth-of-type(2){
transform:scale(2,2);
-ms-transform:scale(2,2); /* IE 9 */
-webkit-transform:scale(2,2); /* Opera, Chrome, and Safari */
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.xoverlay:hover .x-icon-zoomoutin span:nth-of-type(2){
transform:scale(1,1);
-ms-transform:scale(1,1); /* IE 9 */
-webkit-transform:scale(1,1); /* Opera, Chrome, and Safari */
}

.xoverlay .x-icon-zoomoutin span:nth-of-type(3){
transform:scale(2,2);
-ms-transform:scale(2,2); /* IE 9 */
-webkit-transform:scale(2,2); /* Opera, Chrome, and Safari */
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.xoverlay:hover .x-icon-zoomoutin span:nth-of-type(3){
transform:scale(1,1);
-ms-transform:scale(1,1); /* IE 9 */
-webkit-transform:scale(1,1); /* Opera, Chrome, and Safari */
}

/* Icon All Rotate Zoom In */
.xoverlay .x-icon-allzoomin{
transform:scale(0,0) rotate(180deg);
-ms-transform:scale(0,0) rotate(180deg); /* IE 9 */
-webkit-transform:scale(0,0) rotate(180deg); /* Opera, Chrome, and Safari */
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
.xoverlay:hover .x-icon-allzoomin{
transform:scale(1,1) rotate(0deg);
-ms-transform:scale(1,1) rotate(0deg); /* IE 9 */
-webkit-transform:scale(1,1) rotate(0deg); /* Opera, Chrome, and Safari */
}

/* Icon All Rotate Zoom Out */
.xoverlay .x-icon-allzoomout{
transform:scale(2,2) rotate(180deg);
-ms-transform:scale(2,2) rotate(180deg); /* IE 9 */
-webkit-transform:scale(2,2) rotate(180deg); /* Opera, Chrome, and Safari */
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
.xoverlay:hover .x-icon-allzoomout{
transform:scale(1,1) rotate(0deg);
-ms-transform:scale(1,1) rotate(0deg); /* IE 9 */
-webkit-transform:scale(1,1) rotate(0deg); /* Opera, Chrome, and Safari */
}

/* Slide Icon Left Top Right */
.xoverlay .x-icon-left-top-right span:nth-of-type(1){
opacity:0;
transform:translateX(-500%);
-ms-transform:translateX(-500%); /* IE 9 */
-webkit-transform:translateX(-500%); /* Opera, Chrome, and Safari */
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.xoverlay:hover .x-icon-left-top-right span:nth-of-type(1){
opacity:1;
transform:translateX(0%);
-ms-transform:translateX(0%); /* IE 9 */
-webkit-transform:translateX(0%); /* Opera, Chrome, and Safari */
}

.xoverlay .x-icon-left-top-right span:nth-of-type(2){
opacity:0;
transform:translateY(-500%);
-ms-transform:translateY(-500%); /* IE 9 */
-webkit-transform:translateY(-500%); /* Opera, Chrome, and Safari */
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.xoverlay:hover .x-icon-left-top-right span:nth-of-type(2){
opacity:1;
transform:translateY(0%);
-ms-transform:translateY(0%); /* IE 9 */
-webkit-transform:translateY(0%); /* Opera, Chrome, and Safari */
}

.xoverlay .x-icon-left-top-right span:nth-of-type(3){
opacity:0;
transform:translateX(300%);
-ms-transform:translateX(300%); /* IE 9 */
-webkit-transform:translateX(300%); /* Opera, Chrome, and Safari */
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.xoverlay:hover .x-icon-left-top-right span:nth-of-type(3){
opacity:1;
transform:translateY(0%);
-ms-transform:translateY(0%); /* IE 9 */
-webkit-transform:translateY(0%); /* Opera, Chrome, and Safari */
}

/* Slide Icon Left Bottom Right */
.xoverlay .x-icon-left-bottom-right span:nth-of-type(1){
opacity:0;
transform:translateX(-500%);
-ms-transform:translateX(-500%); /* IE 9 */
-webkit-transform:translateX(-500%); /* Opera, Chrome, and Safari */
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.xoverlay:hover .x-icon-left-bottom-right span:nth-of-type(1){
opacity:1;
transform:translateX(0%);
-ms-transform:translateX(0%); /* IE 9 */
-webkit-transform:translateX(0%); /* Opera, Chrome, and Safari */
}

.xoverlay .x-icon-left-bottom-right span:nth-of-type(2){
opacity:0;
transform:translateY(300%);
-ms-transform:translateY(300%); /* IE 9 */
-webkit-transform:translateY(300%); /* Opera, Chrome, and Safari */
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.xoverlay:hover .x-icon-left-bottom-right span:nth-of-type(2){
opacity:1;
transform:translateY(0%);
-ms-transform:translateY(0%); /* IE 9 */
-webkit-transform:translateY(0%); /* Opera, Chrome, and Safari */
}

.xoverlay .x-icon-left-bottom-right span:nth-of-type(3){
opacity:0;
transform:translateX(300%);
-ms-transform:translateX(300%); /* IE 9 */
-webkit-transform:translateX(300%); /* Opera, Chrome, and Safari */
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.xoverlay:hover .x-icon-left-bottom-right span:nth-of-type(3){
opacity:1;
transform:translateY(0%);
-ms-transform:translateY(0%); /* IE 9 */
-webkit-transform:translateY(0%); /* Opera, Chrome, and Safari */
}

/* Flip Icon ZoomIn Individual */
.xoverlay .x-icon-flip-zoomind span:nth-of-type(1){
transform:scale(0,0) rotateX(360deg);
-ms-transform:scale(0,0) rotateX(360deg); /* IE 9 */
-webkit-transform:scale(0,0) rotateX(360deg); /* Opera, Chrome, and Safari */
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.xoverlay:hover .x-icon-flip-zoomind span:nth-of-type(1){
transform:scale(1,1) rotateX(0deg);
-ms-transform:scale(1,1) rotateX(0deg); /* IE 9 */
-webkit-transform:scale(1,1) rotateX(0deg); /* Opera, Chrome, and Safari */
}

.xoverlay .x-icon-flip-zoomind span:nth-of-type(2){
transform:scale(2,2) rotateX(360deg);
-ms-transform:scale(2,2) rotateX(360deg); /* IE 9 */
-webkit-transform:scale(2,2) rotateX(360deg); /* Opera, Chrome, and Safari */
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.xoverlay:hover .x-icon-flip-zoomind span:nth-of-type(2){
transform:scale(1,1) rotateX(0deg);
-ms-transform:scale(1,1) rotateX(0deg); /* IE 9 */
-webkit-transform:scale(1,1) rotateX(0deg); /* Opera, Chrome, and Safari */
}

.xoverlay .x-icon-flip-zoomind span:nth-of-type(3){
transform:scale(0,0) rotateX(360deg);
-ms-transform:scale(0,0) rotateX(360deg); /* IE 9 */
-webkit-transform:scale(0,0) rotateX(360deg); /* Opera, Chrome, and Safari */
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.xoverlay:hover .x-icon-flip-zoomind span:nth-of-type(3){
transform:scale(1,1) rotateX(0deg);
-ms-transform:scale(1,1) rotateX(0deg); /* IE 9 */
-webkit-transform:scale(1,1) rotateX(0deg); /* Opera, Chrome, and Safari */
}

/* Flip Icon Zoom Individual 2 */
.xoverlay .x-icon-flip-zoomind2 span:nth-of-type(1){
transform:scale(2,2) rotateX(360deg);
-ms-transform:scale(2,2) rotateX(360deg); /* IE 9 */
-webkit-transform:scale(2,2) rotateX(360deg); /* Opera, Chrome, and Safari */
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.xoverlay:hover .x-icon-flip-zoomind2 span:nth-of-type(1){
transform:scale(1,1) rotateX(0deg);
-ms-transform:scale(1,1) rotateX(0deg); /* IE 9 */
-webkit-transform:scale(1,1) rotateX(0deg); /* Opera, Chrome, and Safari */
}

.xoverlay .x-icon-flip-zoomind2 span:nth-of-type(2){
transform:scale(0,0) rotateX(360deg);
-ms-transform:scale(0,0) rotateX(360deg); /* IE 9 */
-webkit-transform:scale(0,0) rotateX(360deg); /* Opera, Chrome, and Safari */
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.xoverlay:hover .x-icon-flip-zoomind2 span:nth-of-type(2){
transform:scale(1,1) rotateX(0deg);
-ms-transform:scale(1,1) rotateX(0deg); /* IE 9 */
-webkit-transform:scale(1,1) rotateX(0deg); /* Opera, Chrome, and Safari */
}

.xoverlay .x-icon-flip-zoomind2 span:nth-of-type(3){
transform:scale(2,2) rotateX(360deg);
-ms-transform:scale(2,2) rotateX(360deg); /* IE 9 */
-webkit-transform:scale(2,2) rotateX(360deg); /* Opera, Chrome, and Safari */
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.xoverlay:hover .x-icon-flip-zoomind2 span:nth-of-type(3){
transform:scale(1,1) rotateX(0deg);
-ms-transform:scale(1,1) rotateX(0deg); /* IE 9 */
-webkit-transform:scale(1,1) rotateX(0deg); /* Opera, Chrome, and Safari */
}
/* Icon All Slide Down */
.xoverlay .x-icon-all-slidedown{
transform:translateY(-100%) rotate(180deg);
-ms-transform:translateY(-100%) rotate(180deg); /* IE 9 */
-webkit-transform:translateY(-100%) rotate(180deg); /* Opera, Chrome, and Safari */
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
.xoverlay:hover .x-icon-all-slidedown{
transform:translateY(0%) rotate(0deg);
-ms-transform:translateY(0%) rotate(0deg); /* IE 9 */
-webkit-transform:translateY(0%) rotate(0deg); /* Opera, Chrome, and Safari */
}

/* Icon All Slide Top */
.xoverlay .x-icon-all-slidetop{
transform:translateY(100%) rotate(180deg);
-ms-transform:translateY(100%) rotate(180deg); /* IE 9 */
-webkit-transform:translateY(100%) rotate(180deg); /* Opera, Chrome, and Safari */
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
.xoverlay:hover .x-icon-all-slidetop{
transform:translateY(0%) rotate(0deg);
-ms-transform:translateY(0%) rotate(0deg); /* IE 9 */
-webkit-transform:translateY(0%) rotate(0deg); /* Opera, Chrome, and Safari */
}

/* Icon All Slide Left */
.xoverlay .x-icon-all-slideleft{
transform:translateX(-100%) rotate(180deg);
-ms-transform:translateX(-100%) rotate(180deg); /* IE 9 */
-webkit-transform:translateX(-100%) rotate(180deg); /* Opera, Chrome, and Safari */
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
.xoverlay:hover .x-icon-all-slideleft{
transform:translateX(0%) rotate(0deg);
-ms-transform:translateX(0%) rotate(0deg); /* IE 9 */
-webkit-transform:translateX(0%) rotate(0deg); /* Opera, Chrome, and Safari */
}

/* Icon All Slide Right */
.xoverlay .x-icon-all-slideright{
transform:translateX(100%) rotate(180deg);
-ms-transform:translateX(100%) rotate(180deg); /* IE 9 */
-webkit-transform:translateX(100%) rotate(180deg); /* Opera, Chrome, and Safari */
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
.xoverlay:hover .x-icon-all-slideright{
transform:translateX(0%) rotate(0deg);
-ms-transform:translateX(0%) rotate(0deg); /* IE 9 */
-webkit-transform:translateX(0%) rotate(0deg); /* Opera, Chrome, and Safari */
}

/* Zoom Icon Left Right */
.xoverlay .x-icon-lr-zoom span:nth-of-type(1){
opacity:0;
transform:scale(2,2);
-ms-transform:scale(2,2); /* IE 9 */
-webkit-transform:scale(2,2); /* Opera, Chrome, and Safari */
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.xoverlay:hover .x-icon-lr-zoom span:nth-of-type(1){
opacity:1;
transform:scale(1,1);
-ms-transform:scale(1,1); /* IE 9 */
-webkit-transform:scale(1,1); /* Opera, Chrome, and Safari */
}

.xoverlay .x-icon-lr-zoom span:nth-of-type(2){
opacity:0;
transform:scale(0,0);
-ms-transform:scale(0,0); /* IE 9 */
-webkit-transform:scale(0,0); /* Opera, Chrome, and Safari */
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.xoverlay:hover .x-icon-lr-zoom span:nth-of-type(2){
opacity:1;
transform:scale(1,1);
-ms-transform:scale(1,1); /* IE 9 */
-webkit-transform:scale(1,1); /* Opera, Chrome, and Safari */
}

.xoverlay .x-icon-lr-zoom span:nth-of-type(3){
opacity:0;
transform:scale(2,2);
-ms-transform:scale(2,2); /* IE 9 */
-webkit-transform:scale(2,2); /* Opera, Chrome, and Safari */
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.xoverlay:hover .x-icon-lr-zoom span:nth-of-type(3){
opacity:1;
transform:scale(1,1);
-ms-transform:scale(1,1); /* IE 9 */
-webkit-transform:scale(1,1); /* Opera, Chrome, and Safari */
}