/**
 * @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-view-third = right top
.uport-view-third.v1 = left bottom
.uport-view-third.v2 = left top
.uport-view-third.v3 = right bottom

*/



.uport-view-third img {
    -webkit-transition: all 0.4s ease-in;
    -moz-transition: all 0.4s ease-in;
    -o-transition: all 0.4s ease-in;
    -ms-transition: all 0.4s ease-in;
    transition: all 0.4s ease-in;
}

.uport-view-third .mask-wrapper:hover img {
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);
}

/*----------------------------------
    mask
------------------------------------*/
.uport-view-third .mask {
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transform: translate(460px, -100px) rotate(180deg);
    -moz-transform: translate(460px, -100px) rotate(180deg);
    -o-transform: translate(460px, -100px) rotate(180deg);
    -ms-transform: translate(460px, -100px) rotate(180deg);
    transform: translate(460px, -100px) rotate(180deg);
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

.uport-view-third.v1 .mask {
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transform: translate(-460px, 100px) rotate(180deg);
    -moz-transform: translate(-460px, 100px) rotate(180deg);
    -o-transform: translate(-460px, 100px) rotate(180deg);
    -ms-transform: translate(-460px, 100px) rotate(180deg);
    transform: translate(-460px, 100px) rotate(180deg);
}


.uport-view-third.v2 .mask {
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transform: translate(-460px, -100px) rotate(-180deg);
    -moz-transform: translate(-460px, -100px) rotate(-180deg);
    -o-transform: translate(-460px, -100px) rotate(-180deg);
    -ms-transform: translate(-460px, -100px) rotate(-180deg);
    transform: translate(-460px, -100px) rotate(-180deg);
}

.uport-view-third.v3 .mask {
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transform: translate(460px, -100px) rotate(-180deg);
    -moz-transform: translate(460px, -100px) rotate(-180deg);
    -o-transform: translate(460px, -100px) rotate(-180deg);
    -ms-transform: translate(460px, -100px) rotate-(180deg);
    transform: translate(460px, -100px) rotate(-180deg);
}







.uport-view-third .mask-wrapper:hover .mask {
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    -ms-transition-delay: 0s;
    transition-delay: 0s;
    -webkit-transform: translate(0px, 0px);
    -moz-transform: translate(0px, 0px);
    -o-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
}



/*----------------------------------
    tilte
------------------------------------*/
/* .uport-view-third h4 ,
.uport-view-third .price,
.uport-view-third h2 {
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    -ms-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
    -webkit-transition-delay: 0.1s;
    -moz-transition-delay: 0.1s;
    -o-transition-delay: 0.1s;
    -ms-transition-delay: 0.1s;
    transition-delay: 0.1s;
}
*/
/* .uport-view-third .outarea p, .uport-view-third .mask-wrapper:hover p ,
.uport-view-third .outarea h4, .uport-view-third .mask-wrapper:hover h4 ,
.uport-view-third .outarea .price , .uport-view-third .mask-wrapper:hover .price ,
.uport-view-third .outarea h2 , .uport-view-third .mask-wrapper:hover h2 {
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -o-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
}

*/

/*----------------------------------
    desc
------------------------------------*/
.uport-view-third h2, .uport-view-third .price, .uport-view-third h4, .uport-view-third p {
    -webkit-transform: translateX(300px) rotate(90deg);
    -moz-transform: translateX(300px) rotate(90deg);
    -o-transform: translateX(300px) rotate(90deg);
    -ms-transform: translateX(300px) rotate(90deg);
    transform: translateX(300px) rotate(90deg);
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    -ms-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
    -webkit-transition-delay: 0.1s;
    -moz-transition-delay: 0.1s;
    -o-transition-delay: 0.1s;
    -ms-transition-delay: 0.1s;
    transition-delay: 0.1s;
}


.uport-view-third.v1 h2, .uport-view-third.v1 .price, .uport-view-third.v1 h4,.uport-view-third.v1 p{
    -webkit-transform: translateX(-300px) rotate(90deg);
    -moz-transform: translateX(-300px) rotate(90deg);
    -o-transform: translateX(-300px) rotate(90deg);
    -ms-transform: translateX(-300px) rotate(90deg);
    transform: translateX(-300px) rotate(90deg);
}

.uport-view-third.v2 h2, .uport-view-third.v2 .price, .uport-view-third.v2 h4,.uport-view-third.v2 p {
    -webkit-transform: translateX(-300px) rotate(-90deg);
    -moz-transform: translateX(-300px) rotate(-90deg);
    -o-transform: translateX(-300px) rotate(-90deg);
    -ms-transform: translateX(-300px) rotate(-90deg);
    transform: translateX(-300px) rotate(-90deg);
}


.uport-view-third.v3 h2, .uport-view-third.v3 .price , .uport-view-third.v3 h4 , .uport-view-third.v3 p {
    -webkit-transform: translateX(300px) rotate(-90deg);
    -moz-transform: translateX(300px) rotate(-90deg);
    -o-transform: translateX(300px) rotate(-90deg);
    -ms-transform: translateX(300px) rotate(-90deg);
    transform: translateX(300px) rotate(-90deg);
}

.uport-view-third .outarea .price , .uport-view-third .mask-wrapper:hover .price, .uport-view-third .above-wrapper .price ,
.uport-view-third .outarea h2 , .uport-view-third .mask-wrapper:hover h2, .uport-view-third .above-wrapper h2 ,
.uport-view-third .outarea h4 , .uport-view-third .mask-wrapper:hover h4, .uport-view-third .above-wrapper h4 ,
.uport-view-third .outarea p , .uport-view-third .mask-wrapper:hover p, .uport-view-third .above-wrapper p  { 
    -webkit-transform: translateX(0px) translateY(0px) rotate(0deg);
    -moz-transform: translateX(0px) translateY(0px) rotate(0deg);
    -o-transform: translateX(0px) translateY(0px) rotate(0deg);
    -ms-transform: translateX(0px) translateY(0px) rotate(0deg);
    transform: translateX(0px) translateY(0px) rotate(0deg);
}

/*----------------------------------
    button link
------------------------------------*/

.uport-view-third a.info {
    -webkit-transform: translateY(-200px);
    -moz-transform: translateY(-200px);
    -o-transform: translateY(-200px);
    -ms-transform: translateY(-200px);
    transform: translateY(-200px);
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    -ms-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}


.uport-view-third.v1 a.info, .uport-view-third.v3 a.info {
    -webkit-transform: translateY(200px);
    -moz-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    transform: translateY(200px);
}

.uport-view-third .above-wrapper a.info, .uport-view-third .outarea a.info, .uport-view-third .mask-wrapper:hover a.info {
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -o-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-transition-delay: 0.1s;
    -moz-transition-delay: 0.1s;
    -o-transition-delay: 0.1s;
    -ms-transition-delay: 0.1s;
    transition-delay: 0.1s;
}