/**
 * @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-3 .ch-item {
    width: 100%;
    height: 100%;
    position: absolute;
    cursor: default;

}

.uport-circ-3 .ch-thumb {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    /*     box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5); */

    -webkit-transform-origin: 95% 40%;
    -moz-transform-origin: 95% 40%;
    -o-transform-origin: 95% 40%;
    -ms-transform-origin: 95% 40%;
    transform-origin: 95% 40%;

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

}

.uport-circ-3.v1 .ch-thumb {
    -webkit-transform-origin: 5% 40%;
    -moz-transform-origin: 5% 40%;
    -o-transform-origin: 5% 40%;
    -ms-transform-origin: 5% 40%;
    transform-origin: 5% 40%;
}

.uport-circ-3.v2 .ch-thumb {
    -webkit-transform-origin: 5% 40%;
    -moz-transform-origin: 5% 40%;
    -o-transform-origin: 5% 40%;
    -ms-transform-origin: 5% 40%;
    transform-origin: 5% 40%;
}

.uport-circ-3.v3 .ch-thumb {
    -webkit-transform-origin: 95% 40%;
    -moz-transform-origin: 95% 40%;
    -o-transform-origin: 95% 40%;
    -ms-transform-origin: 95% 40%;
    transform-origin: 95% 40%;
}



.uport-circ-3 .ch-thumb:after {
    content: '';
    width: 8px;
    height: 8px;
    position: absolute;
    border-radius: 50%;
    top: 40%;
    left: 95%;
    margin: -4px 0 0 -4px;
    background: rgb(14,14,14,0.2);
    background: -moz-radial-gradient(center, ellipse cover, rgba(14,14,14,0.2) 0%, rgba(125,126,125,0.2) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(14,14,14,0.2)), color-stop(100%,rgba(125,126,125,1)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(14,14,14,0.2) 0%,rgba(125,126,125,1) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(14,14,14,0.2) 0%,rgba(125,126,125,1) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(14,14,14,0.2) 0%,rgba(125,126,125,1) 100%);
    background: radial-gradient(ellipse at center, rgba(14,14,14,0.2) 0%,rgba(125,126,125,1) 100%);
    box-shadow: 0 0 1px rgba(255,255,255,0.4);
}


.uport-circ-3.v1 .ch-thumb:after{
    left: 5%;
}

.uport-circ-3.v2 .ch-thumb:after{
    left: 5%;
}

.uport-circ-3.v3 .ch-thumb:after{
    left: 95%;
}

.uport-circ-3 .ch-info {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /*     box-shadow: inset 0 0 0 5px rgba(0,0,0,0.05); */
}

.uport-circ-3 .ch-info p a {
    display: block;
    opacity: 0;

    -webkit-transition: 
        -webkit-transform 0.3s ease-in-out 0.2s,
        opacity 0.3s ease-in-out 0.2s,
        background 0.2s linear 0s;
    -moz-transition: 
        -moz-transform 0.3s ease-in-out 0.2s,
        opacity 0.3s ease-in-out 0.2s,
        background 0.2s linear 0s;
    -o-transition: 
        -o-transform 0.3s ease-in-out 0.2s,
        opacity 0.3s ease-in-out 0.2s,
        background 0.2s linear 0s;
    -ms-transition: 
        -ms-transform 0.3s ease-in-out 0.2s,
        opacity 0.3s ease-in-out 0.2s,
        background 0.2s linear 0s;
    transition: 
        transform 0.3s ease-in-out 0.2s,
        opacity 0.3s ease-in-out 0.2s,
        background 0.2s linear 0s;

    -webkit-transform: translateX(60px) rotate(90deg);
    -moz-transform: translateX(60px) rotate(90deg);
    -o-transform: translateX(60px) rotate(90deg);
    -ms-transform: translateX(60px) rotate(90deg);
    transform: translateX(60px) rotate(90deg);

    -webkit-backface-visibility: hidden;
}

.uport-circ-3 .ch-item:hover .ch-thumb {
    /*     box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5), 0 1px 3px rgba(0,0,0,0.2); */
    -webkit-transform: rotate(-110deg);
    -moz-transform: rotate(-110deg);
    -o-transform: rotate(-110deg);
    -ms-transform: rotate(-110deg);
    transform: rotate(-110deg);
}

.uport-circ-3 li:hover{
    z-index: 99;
}


.uport-circ-3.v1 .ch-item:hover .ch-thumb {
    /*     box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5), 0 1px 3px rgba(0,0,0,0.2); */
    -webkit-transform: rotate(110deg);
    -moz-transform: rotate(110deg);
    -o-transform: rotate(110deg);
    -ms-transform: rotate(110deg);
    transform: rotate(110deg);
}


.uport-circ-3.v2 .ch-item:hover .ch-thumb {
    /*     box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5), 0 1px 3px rgba(0,0,0,0.2); */
    -webkit-transform: rotate(-110deg);
    -moz-transform: rotate(-110deg);
    -o-transform: rotate(-110deg);
    -ms-transform: rotate(-110deg);
    transform: rotate(-110deg);
}



.uport-circ-3.v3 .ch-item:hover .ch-thumb {
    /*     box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5), 0 1px 3px rgba(0,0,0,0.2); */
    -webkit-transform: rotate(110deg);
    -moz-transform: rotate(110deg);
    -o-transform: rotate(110deg);
    -ms-transform: rotate(110deg);
    transform: rotate(110deg);
}


.uport-circ-3 .ch-item:hover .ch-info p a{
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    -moz-transform: translateX(0px) rotate(0deg);
    -o-transform: translateX(0px) rotate(0deg);
    -ms-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
}