/* 
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: 30px;
    width: 40px;
    height: 40px;
    padding: 5%;
    margin-top: 22px;
}

@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, .4);
    -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, .4);
}


/*===== 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);
    -webkit-transform: rotateY(131deg);
    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);
    -webkit-transform: rotateY(0deg);
    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);
    -webkit-transform: rotateY(-133deg);
    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);
    -webkit-transform: rotateY(0deg);
    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);
    -webkit-transform: rotateX(-125deg);
    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);
    -webkit-transform: rotateX(0deg);
    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);
    -webkit-transform: rotateX(131deg);
    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);
    -webkit-transform: rotateX(0deg);
    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);
    -webkit-transform: rotateY(131deg);
    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);
    -webkit-transform: rotateY(0deg);
    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);
    -webkit-transform: rotateY(-133deg);
    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);
    -webkit-transform: rotateY(0deg);
    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);
    -webkit-transform: rotateX(-131deg);
    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);
    -webkit-transform: rotateX(0deg);
    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);
    -webkit-transform: rotateX(131deg);
    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);
    -webkit-transform: rotateX(0deg);
    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);
    -webkit-transform: rotateY(131deg);
    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);
    -webkit-transform: rotateY(0deg);
    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%);
    -webkit-transform: translateX(20%);
}


/*===== 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);
    -webkit-transform: rotateY(-132deg);
    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);
    -webkit-transform: rotateY(0deg);
    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%);
    -webkit-transform: translateX(-20%);
}


/*===== 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);
    -webkit-transform: rotateX(-125deg);
    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);
    -webkit-transform: rotateX(0deg);
    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%);
    -webkit-transform: translateY(20%);
}


/*===== 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);
    -webkit-transform: rotateX(131deg);
    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);
    -webkit-transform: rotateX(0deg);
    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%);
    -webkit-transform: translateY(-20%);
}


/*===== 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%);
    -webkit-transform: translateX(100%);
}


/*===== 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%);
    -webkit-transform: translateX(-100%);
}


/*===== 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%);
    -webkit-transform: translateY(100%);
}


/*===== 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%);
    -webkit-transform: translateY(-100%);
}


/*===== 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);
    -webkit-transform: rotate(30deg) scale(1.5, 1.5);
    transform: rotate(30deg) scale(1.5, 1.5);
}


/*===== 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);
    -webkit-transform: rotate(-30deg) scale(1.5, 1.5);
    transform: rotate(-30deg) scale(1.5, 1.5);
}


/*===== 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);
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0);
    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);
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
}


/*===== 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);
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0);
    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);
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
}

.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);
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0);
}


/*===== 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);
    -webkit-transform: rotate(0deg) scale(0, 0);
    transform: rotate(0deg) scale(0, 0);
    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);
    -webkit-transform: rotate(360deg) scale(1, 1);
    transform: rotate(360deg) scale(1, 1);
}


/*===== 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);
    -webkit-transform: rotateY(0deg) scale(0, 0);
    transform: rotateY(0deg) scale(0, 0);
    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);
    -webkit-transform: rotateY(360deg) scale(1, 1);
    transform: rotateY(360deg) scale(1, 1);
}


/*===== 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);
    -webkit-transform: rotateX(0deg) scale(0, 0);
    transform: rotateX(0deg) scale(0, 0);
    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);
    -webkit-transform: rotateX(360deg) scale(1, 1);
    transform: rotateX(360deg) scale(1, 1);
}


/*===== Slide Icon Top Bottom =====*/

.xoverlay .x-icon-top-bottom span:nth-of-type(1) {
    opacity: 0;
    transform: translateY(-500%);
    -ms-transform: translateY(-500%);
    -webkit-transform: translateY(-500%);
    -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%);
    -webkit-transform: translateY(0%);
}

.xoverlay .x-icon-top-bottom span:nth-of-type(2) {
    opacity: 0;
    transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    -webkit-transform: scale(0, 0);
    -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);
    -webkit-transform: scale(1, 1);
}

.xoverlay .x-icon-top-bottom span:nth-of-type(3) {
    opacity: 0;
    transform: translateY(300%);
    -ms-transform: translateY(300%);
    -webkit-transform: translateY(300%);
    -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%);
    -webkit-transform: translateY(0%);
}


/*===== Slide Icon Left Right =====*/

.xoverlay .x-icon-left-right span:nth-of-type(1) {
    opacity: 0;
    transform: translateX(-500%);
    -ms-transform: translateX(-500%);
    -webkit-transform: translateX(-500%);
    -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%);
    -webkit-transform: translateX(0%);
}

.xoverlay .x-icon-left-right span:nth-of-type(2) {
    opacity: 0;
    transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    -webkit-transform: scale(0, 0);
    -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);
    -webkit-transform: scale(1, 1);
}

.xoverlay .x-icon-left-right span:nth-of-type(3) {
    opacity: 0;
    transform: translateX(300%);
    -ms-transform: translateX(300%);
    -webkit-transform: translateX(300%);
    -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%);
    -webkit-transform: translateX(0%);
}


/*===== Zoom Icon =====*/

.xoverlay .x-icon-zoom span {
    opacity: 0;
    transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    -webkit-transform: scale(0, 0);
    -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);
    -webkit-transform: scale(1, 1);
}


/*===== Icon Left =====*/

.xoverlay .x-icon-left span {
    opacity: 0;
    transform: translateX(-500%);
    -ms-transform: translateX(-500%);
    -webkit-transform: translateX(-500%);
    -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%);
    -webkit-transform: translateX(0%);
}


/*===== Icon Right =====*/

.xoverlay .x-icon-right span {
    opacity: 0;
    transform: translateX(300%);
    -ms-transform: translateX(300%);
    -webkit-transform: translateX(300%);
    -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%);
    -webkit-transform: translateX(0%);
}


/*===== Icon Top =====*/

.xoverlay .x-icon-top span {
    opacity: 0;
    transform: translateY(-500%);
    -ms-transform: translateY(-500%);
    -webkit-transform: translateY(-500%);
    -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%);
    -webkit-transform: translateY(0%);
}


/*===== Icon Bottom =====*/

.xoverlay .x-icon-bottom span {
    opacity: 0;
    transform: translateY(300%);
    -ms-transform: translateY(300%);
    -webkit-transform: translateY(300%);
    -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%);
    -webkit-transform: translateY(0%);
}


/*===== 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%);
    -webkit-transform: scale(0, 0) translateX(300%);
    -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%);
    -webkit-transform: scale(1, 1) translateX(0%);
}

.xoverlay .x-icon-zoomup span:nth-of-type(2) {
    transform: scale(2, 2);
    -ms-transform: scale(2, 2);
    -webkit-transform: scale(2, 2);
    -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);
    -webkit-transform: scale(1, 1);
}

.xoverlay .x-icon-zoomup span:nth-of-type(3) {
    transform: scale(0, 0) translateY(300%);
    -ms-transform: scale(0, 0) translateX(300%);
    -webkit-transform: scale(0, 0) translateX(300%);
    -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%);
    -webkit-transform: scale(1, 1) translateX(0%);
}


/*===== 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%);
    -webkit-transform: scale(0, 0) translateX(-500%);
    -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%);
    -webkit-transform: scale(1, 1) translateX(0%);
}

.xoverlay .x-icon-zoomdown span:nth-of-type(2) {
    transform: scale(2, 2);
    -ms-transform: scale(2, 2);
    -webkit-transform: scale(2, 2);
    -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);
    -webkit-transform: scale(1, 1);
}

.xoverlay .x-icon-zoomdown span:nth-of-type(3) {
    transform: scale(0, 0) translateY(-500%);
    -ms-transform: scale(0, 0) translateX(-500%);
    -webkit-transform: scale(0, 0) translateX(-500%);
    -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%);
    -webkit-transform: scale(1, 1) translateX(0%);
}


/*===== Icon Rotate Zoom =====*/

.xoverlay .x-icon-rotatezoom span {
    opacity: 0;
    transform: scale(0, 0) rotate(180deg);
    -ms-transform: scale(0, 0) rotate(180deg);
    -webkit-transform: scale(0, 0) rotate(180deg);
    -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);
    -webkit-transform: scale(1, 1) rotate(0deg);
}


/*===== Icon Zoom Out To In =====*/

.xoverlay .x-icon-zoomoutin span:nth-of-type(1) {
    transform: scale(2, 2);
    -ms-transform: scale(2, 2);
    -webkit-transform: scale(2, 2);
    -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);
    -webkit-transform: scale(1, 1);
}

.xoverlay .x-icon-zoomoutin span:nth-of-type(2) {
    transform: scale(2, 2);
    -ms-transform: scale(2, 2);
    -webkit-transform: scale(2, 2);
    -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);
    -webkit-transform: scale(1, 1);
}

.xoverlay .x-icon-zoomoutin span:nth-of-type(3) {
    transform: scale(2, 2);
    -ms-transform: scale(2, 2);
    -webkit-transform: scale(2, 2);
    -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);
    -webkit-transform: scale(1, 1);
}


/*===== Icon All Rotate Zoom In =====*/

.xoverlay .x-icon-allzoomin {
    transform: scale(0, 0) rotate(180deg);
    -ms-transform: scale(0, 0) rotate(180deg);
    -webkit-transform: scale(0, 0) rotate(180deg);
    -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);
    -webkit-transform: scale(1, 1) rotate(0deg);
}


/*===== Icon All Rotate Zoom Out =====*/

.xoverlay .x-icon-allzoomout {
    transform: scale(2, 2) rotate(180deg);
    -ms-transform: scale(2, 2) rotate(180deg);
    -webkit-transform: scale(2, 2) rotate(180deg);
    -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);
    -webkit-transform: scale(1, 1) rotate(0deg);
}


/*===== 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%);
    -webkit-transform: translateX(-500%);
    -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%);
    -webkit-transform: translateX(0%);
}

.xoverlay .x-icon-left-top-right span:nth-of-type(2) {
    opacity: 0;
    transform: translateY(-500%);
    -ms-transform: translateY(-500%);
    -webkit-transform: translateY(-500%);
    -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%);
    -webkit-transform: translateY(0%);
}

.xoverlay .x-icon-left-top-right span:nth-of-type(3) {
    opacity: 0;
    transform: translateX(300%);
    -ms-transform: translateX(300%);
    -webkit-transform: translateX(300%);
    -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%);
    -webkit-transform: translateY(0%);
}


/*===== 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%);
    -webkit-transform: translateX(-500%);
    -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%);
    -webkit-transform: translateX(0%);
}

.xoverlay .x-icon-left-bottom-right span:nth-of-type(2) {
    opacity: 0;
    transform: translateY(300%);
    -ms-transform: translateY(300%);
    -webkit-transform: translateY(300%);
    -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%);
    -webkit-transform: translateY(0%);
}

.xoverlay .x-icon-left-bottom-right span:nth-of-type(3) {
    opacity: 0;
    transform: translateX(300%);
    -ms-transform: translateX(300%);
    -webkit-transform: translateX(300%);
    -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%);
    -webkit-transform: translateY(0%);
}


/*===== 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);
    -webkit-transform: scale(0, 0) rotateX(360deg);
    -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);
    -webkit-transform: scale(1, 1) rotateX(0deg);
}

.xoverlay .x-icon-flip-zoomind span:nth-of-type(2) {
    transform: scale(2, 2) rotateX(360deg);
    -ms-transform: scale(2, 2) rotateX(360deg);
    -webkit-transform: scale(2, 2) rotateX(360deg);
    -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);
    -webkit-transform: scale(1, 1) rotateX(0deg);
}

.xoverlay .x-icon-flip-zoomind span:nth-of-type(3) {
    transform: scale(0, 0) rotateX(360deg);
    -ms-transform: scale(0, 0) rotateX(360deg);
    -webkit-transform: scale(0, 0) rotateX(360deg);
    -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);
    -webkit-transform: scale(1, 1) rotateX(0deg);
}


/*===== 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);
    -webkit-transform: scale(2, 2) rotateX(360deg);
    -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);
    -webkit-transform: scale(1, 1) rotateX(0deg);
}

.xoverlay .x-icon-flip-zoomind2 span:nth-of-type(2) {
    transform: scale(0, 0) rotateX(360deg);
    -ms-transform: scale(0, 0) rotateX(360deg);
    -webkit-transform: scale(0, 0) rotateX(360deg);
    -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);
    -webkit-transform: scale(1, 1) rotateX(0deg);
}

.xoverlay .x-icon-flip-zoomind2 span:nth-of-type(3) {
    transform: scale(2, 2) rotateX(360deg);
    -ms-transform: scale(2, 2) rotateX(360deg);
    -webkit-transform: scale(2, 2) rotateX(360deg);
    -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);
    -webkit-transform: scale(1, 1) rotateX(0deg);
}


/*===== Icon All Slide Down =====*/

.xoverlay .x-icon-all-slidedown {
    transform: translateY(-100%) rotate(180deg);
    -ms-transform: translateY(-100%) rotate(180deg);
    -webkit-transform: translateY(-100%) rotate(180deg);
    -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);
    -webkit-transform: translateY(0%) rotate(0deg);
}


/*===== Icon All Slide Top =====*/

.xoverlay .x-icon-all-slidetop {
    transform: translateY(100%) rotate(180deg);
    -ms-transform: translateY(100%) rotate(180deg);
    -webkit-transform: translateY(100%) rotate(180deg);
    -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);
    -webkit-transform: translateY(0%) rotate(0deg);
}


/*===== Icon All Slide Left =====*/

.xoverlay .x-icon-all-slideleft {
    transform: translateX(-100%) rotate(180deg);
    -ms-transform: translateX(-100%) rotate(180deg);
    -webkit-transform: translateX(-100%) rotate(180deg);
    -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);
    -webkit-transform: translateX(0%) rotate(0deg);
}


/*===== Icon All Slide Right =====*/

.xoverlay .x-icon-all-slideright {
    transform: translateX(100%) rotate(180deg);
    -ms-transform: translateX(100%) rotate(180deg);
    -webkit-transform: translateX(100%) rotate(180deg);
    -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);
    -webkit-transform: translateX(0%) rotate(0deg);
}


/*===== 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);
    -webkit-transform: scale(2, 2);
    -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);
    -webkit-transform: scale(1, 1);
}

.xoverlay .x-icon-lr-zoom span:nth-of-type(2) {
    opacity: 0;
    transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    -webkit-transform: scale(0, 0);
    -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);
    -webkit-transform: scale(1, 1);
}

.xoverlay .x-icon-lr-zoom span:nth-of-type(3) {
    opacity: 0;
    transform: scale(2, 2);
    -ms-transform: scale(2, 2);
    -webkit-transform: scale(2, 2);
    -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);
    -webkit-transform: scale(1, 1);
}