/**
 * @Package: WordPress Plugin
 * @Subpackage: Ultra Portfolio
 * @Since: Ultra Portfolio 1.0
 * @Current Version: Ultra Portfolio 3.1
 * @WordPress Version: 3.5 or above
 * This file is part of Ultra Portofolio WordPress Plugin.
 */

/**************/
.uport-circ-4 .ch-item {
    width: 100%;
    height: 100%;
    position: absolute;
    cursor: default;
}

.uport-circ-4 .ch-info-wrap{
    position: absolute;
    width: 90%;
    height: 90%;


    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    -o-perspective: 800px;
    -ms-perspective: 800px;
    perspective: 800px;

    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;

    top: 5%;
    left: 5%;
    background: #f9f9f9;
    box-shadow: 
        0 0 0 13px rgba(255,255,255,0.2), 
        inset 0 0 0px rgba(115,114, 23, 0.8);

}

.uport-circ-4 .ch-info{
    position: absolute;
    width: 100%;
    height: 100%;


    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;

    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;

}

.uport-circ-4 .ch-info > div {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;

    background-position: center center;

    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
}


.uport-circ-4 .ch-item .ch-info-wrap {
    box-shadow: 
        0 0 0 25px rgba(255,255,255,0.6), 
        inset 0 0 0px rgba(115,114, 23, 0.6);
}

.uport-circ-4 .ch-item:hover .ch-info-wrap {
    box-shadow: 
        0 0 0 0px rgba(255,255,255,0.6), 
        inset 0 0 3px rgba(115,114, 23, 0.6);
}


.uport-circ-4 .ch-info .ch-info-back {
    -webkit-transform: rotate3d(0,1,0,180deg);
    -moz-transform: rotate3d(0,1,0,180deg);
    -o-transform: rotate3d(0,1,0,180deg);
    -ms-transform: rotate3d(0,1,0,180deg);
    transform: rotate3d(0,1,0,180deg);
}



.uport-circ-4.v2 .ch-info .ch-info-back, .uport-circ-4.v3 .ch-info .ch-info-back {
    -webkit-transform: rotate3d(1,0,0,180deg);
    -moz-transform: rotate3d(1,0,0,180deg);
    -o-transform: rotate3d(1,0,0,180deg);
    -ms-transform: rotate3d(1,0,0,180deg);
    transform: rotate3d(1,0,0,180deg);
}


.uport-circ-4 .ch-item:hover .ch-info {
    -webkit-transform: rotate3d(0,1,0,-180deg);
    -moz-transform: rotate3d(0,1,0,-180deg);
    -o-transform: rotate3d(0,1,0,-180deg);
    -ms-transform: rotate3d(0,1,0,-180deg);
    transform: rotate3d(0,1,0,-180deg);
}

.uport-circ-4.v1 .ch-item:hover .ch-info {
    -webkit-transform: rotate3d(0,1,0,180deg);
    -moz-transform: rotate3d(0,1,0,180deg);
    -o-transform: rotate3d(0,1,0,180deg);
    -ms-transform: rotate3d(0,1,0,180deg);
    transform: rotate3d(0,1,0,180deg);
}

.uport-circ-4.v2 .ch-item:hover .ch-info {
    -webkit-transform: rotate3d(1,0,0,-180deg);
    transform: rotate3d(1,0,0,-180deg);
    -moz-transform: rotate3d(1,0,0,-180deg);
    -o-transform: rotate3d(1,0,0,-180deg);
    -ms-transform: rotate3d(1,0,0,-180deg);
}

.uport-circ-4.v3 .ch-item:hover .ch-info {
    -webkit-transform: rotate3d(1,0,0,180deg);
    -moz-transform: rotate3d(1,0,0,180deg);
    -o-transform: rotate3d(1,0,0,180deg);
    -ms-transform: rotate3d(1,0,0,180deg);
    transform: rotate3d(1,0,0,180deg);
}