/**
 * @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-eighth .mask {
    top: -400px;
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transition: all 0.3s ease-out 0.2s;
    -moz-transition: all 0.3s ease-out 0.2s;
    -o-transition: all 0.3s ease-out 0.2s;
    -ms-transition: all 0.3s ease-out 0.2s;
    transition: all 0.3s ease-out 0.2s;
}

.uport-view-eighth.v1 .mask {
    left: -400px;
    top: 0px;
    right: auto;
}

.uport-view-eighth.v2 .mask {
    bottom: -400px;
    top: auto;
}

.uport-view-eighth.v3 .mask {
    right: -400px;
    top: 0px;
    left: auto;
}











.uport-view-eighth h2 {
    -webkit-transform: translateY(-400px);
    -moz-transform: translateY(-400px);
    -o-transform: translateY(-400px);
    -ms-transform: translateY(-400px);
    transform: translateY(-400px);
}

.uport-view-eighth.v1 h2{
    -webkit-transform: translateX(-400px);
    -moz-transform: translateX(-400px);
    -o-transform: translateX(-400px);
    -ms-transform: translateX(-400px);
    transform: translateX(-400px);
}

.uport-view-eighth.v2 h2{
    -webkit-transform: translateY(400px);
    -moz-transform: translateY(400px);
    -o-transform: translateY(400px);
    -ms-transform: translateY(400px);
    transform: translateY(400px);
}


.uport-view-eighth.v3 h2{
    -webkit-transform: translateX(400px);
    -moz-transform: translateX(400px);
    -o-transform: translateX(400px);
    -ms-transform: translateX(400px);
    transform: translateX(400px);
}

.uport-view-eighth .above-wrapper h2,
.uport-view-eighth .above-wrapper h4,
.uport-view-eighth .above-wrapper .price,
.uport-view-eighth .above-wrapper a.info,
.uport-view-eighth .above-wrapper p,
.uport-view-eighth .outarea h2,
.uport-view-eighth .outarea h4,
.uport-view-eighth .outarea .price,
.uport-view-eighth .outarea a.info,
.uport-view-eighth .outarea p{
    -webkit-transform: translateX(0px) translateY(0px) !important;
    -moz-transform: translateX(0px) translateY(0px) !important;
    -o-transform: translateX(0px) translateY(0px) !important;
    -ms-transform: translateX(0px) translateY(0px) !important;
    transform: translateX(0px) translateY(0px) !important;
}



.uport-view-eighth h4 {
    -webkit-transform: translateY(-400px);
    -moz-transform: translateY(-400px);
    -o-transform: translateY(-400px);
    -ms-transform: translateY(-400px);
    transform: translateY(-400px);
}


.uport-view-eighth.v1 h4{
    -webkit-transform: translateX(-400px);
    -moz-transform: translateX(-400px);
    -o-transform: translateX(-400px);
    -ms-transform: translateX(-400px);
    transform: translateX(-400px);
}

.uport-view-eighth.v2 h4{
    -webkit-transform: translateY(400px);
    -moz-transform: translateY(400px);
    -o-transform: translateY(400px);
    -ms-transform: translateY(400px);
    transform: translateY(400px);
}

.uport-view-eighth.v3 h4{
    -webkit-transform: translateX(400px);
    -moz-transform: translateX(400px);
    -o-transform: translateX(400px);
    -ms-transform: translateX(400px);
    transform: translateX(400px);
}





.uport-view-eighth .price {
    -webkit-transform: translateY(-400px);
    -moz-transform: translateY(-400px);
    -o-transform: translateY(-400px);
    -ms-transform: translateY(-400px);
    transform: translateY(-400px);
}


.uport-view-eighth.v1 .price{
    -webkit-transform: translateX(-400px);
    -moz-transform: translateX(-400px);
    -o-transform: translateX(-400px);
    -ms-transform: translateX(-400px);
    transform: translateX(-400px);
}

.uport-view-eighth.v2 .price{
    -webkit-transform: translateY(400px);
    -moz-transform: translateY(400px);
    -o-transform: translateY(400px);
    -ms-transform: translateY(400px);
    transform: translateY(400px);
}

.uport-view-eighth.v3 .price{
    -webkit-transform: translateX(400px);
    -moz-transform: translateX(400px);
    -o-transform: translateX(400px);
    -ms-transform: translateX(400px);
    transform: translateX(400px);
}



.uport-view-eighth h2,
.uport-view-eighth.v1 h2,
.uport-view-eighth.v2 h2,
.uport-view-eighth.v3 h2,
.uport-view-eighth h4,
.uport-view-eighth.v1 h4,
.uport-view-eighth.v2 h4,
.uport-view-eighth.v3 h4,
.uport-view-eighth p,
.uport-view-eighth.v1 p,
.uport-view-eighth.v2 p,
.uport-view-eighth.v3 p,
.uport-view-eighth a.info,
.uport-view-eighth.v1 a.info,
.uport-view-eighth.v2 a.info,
.uport-view-eighth.v3 a.info,
.uport-view-eighth .price,
.uport-view-eighth.v1 .price,
.uport-view-eighth.v2 .price,
.uport-view-eighth.v3 .price
{
    -webkit-transition: all 0.4s ease-in-out 0.1s;
    -moz-transition: all 0.4s ease-in-out 0.1s;
    -o-transition: all 0.4s ease-in-out 0.1s;
    -ms-transition: all 0.4s ease-in-out 0.1s;
    transition: all 0.4s ease-in-out 0.1s;
}





.uport-view-eighth p {
    -webkit-transform: translateY(-400px);
    -moz-transform: translateY(-400px);
    -o-transform: translateY(-400px);
    -ms-transform: translateY(-400px);
    transform: translateY(-400px);
}

.uport-view-eighth.v1 p{
    -webkit-transform: translateX(-400px);
    -moz-transform: translateX(-400px);
    -o-transform: translateX(-400px);
    -ms-transform: translateX(-400px);
    transform: translateX(-400px);
}

.uport-view-eighth.v2 p{
    -webkit-transform: translateY(400px);
    -moz-transform: translateY(400px);
    -o-transform: translateY(400px);
    -ms-transform: translateY(400px);
    transform: translateY(400px);
}

.uport-view-eighth.v3 p{
    -webkit-transform: translateX(400px);
    -moz-transform: translateX(400px);
    -o-transform: translateX(400px);
    -ms-transform: translateX(400px);
    transform: translateX(400px);
}










.uport-view-eighth a.info {
    -webkit-transform: translateY(-400px);
    -moz-transform: translateY(-400px);
    -o-transform: translateY(-400px);
    -ms-transform: translateY(-400px);
    transform: translateY(-400px);
}

.uport-view-eighth.v1 a.info{
    -webkit-transform: translateX(-400px);
    -moz-transform: translateX(-400px);
    -o-transform: translateX(-400px);
    -ms-transform: translateX(-400px);
    transform: translateX(-400px);
}

.uport-view-eighth.v2 a.info{
    -webkit-transform: translateY(400px);
    -moz-transform: translateY(400px);
    -o-transform: translateY(400px);
    -ms-transform: translateY(400px);
    transform: translateY(400px);
}

.uport-view-eighth.v3 a.info{
    -webkit-transform: translateX(400px);
    -moz-transform: translateX(400px);
    -o-transform: translateX(400px);
    -ms-transform: translateX(400px);
    transform: translateX(400px);
}










/*------------------------------------------
    Hover
--------------------------------------------*/



.uport-view-eighth .mask-wrapper:hover .mask {
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    top: 0px;
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    -ms-transition-delay: 0s;
    transition-delay: 0s;
    -webkit-animation: bounceY 0.5s linear;
    -moz-animation: bounceY 0.5s linear;
    -ms-animation: bounceY 0.5s linear;
    animation: bounceY 0.5s linear;
}


.uport-view-eighth .mask-wrapper:hover h2 {
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -o-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-transition-delay: 0.5s;
    -moz-transition-delay: 0.5s;
    -o-transition-delay: 0.5s;
    -ms-transition-delay: 0.5s;
    transition-delay: 0.5s;
}


.uport-view-eighth .mask-wrapper:hover h4 {
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -o-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-transition-delay: 0.4s;
    -moz-transition-delay: 0.4s;
    -o-transition-delay: 0.4s;
    -ms-transition-delay: 0.4s;
    transition-delay: 0.4s;
}


.uport-view-eighth .mask-wrapper:hover p {
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -o-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-transition-delay: 0.3s;
    -moz-transition-delay: 0.3s;
    -o-transition-delay: 0.3s;
    -ms-transition-delay: 0.3s;
    transition-delay: 0.3s;
}

.uport-view-eighth .mask-wrapper:hover .price {
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -o-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-transition-delay: 0.2s;
    -moz-transition-delay: 0.2s;
    -o-transition-delay: 0.2s;
    -ms-transition-delay: 0.2s;
    transition-delay: 0.2s;
}





.uport-view-eighth .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;
}

/*----------------------------------------------------------------*/




.uport-view-eighth.v1 .mask-wrapper:hover .mask {
    left: 0px;
    top: 0px;
    -webkit-animation: bounceX 0.5s linear;
    -moz-animation: bounceX 0.5s linear;
    -ms-animation: bounceX 0.5s linear;
    animation: bounceX 0.5s linear;
}

.uport-view-eighth.v1 .mask-wrapper:hover h2 {
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -o-transform: translateX(0px);
    -ms-transform: translateX(0px);
    transform: translateX(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;
}

.uport-view-eighth.v1 .mask-wrapper:hover h4 {
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -o-transform: translateX(0px);
    -ms-transform: translateX(0px);
    transform: translateX(0px);
    -webkit-transition-delay: 0.2s;
    -moz-transition-delay: 0.2s;
    -o-transition-delay: 0.2s;
    -ms-transition-delay: 0.2s;
    transition-delay: 0.2s;
}

.uport-view-eighth.v1 .mask-wrapper:hover p {
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -o-transform: translateX(0px);
    -ms-transform: translateX(0px);
    transform: translateX(0px);
    -webkit-transition-delay: 0.3s;
    -moz-transition-delay: 0.3s;
    -o-transition-delay: 0.3s;
    -ms-transition-delay: 0.3s;
    transition-delay: 0.3s;
}


.uport-view-eighth.v1 .mask-wrapper:hover .price {
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -o-transform: translateX(0px);
    -ms-transform: translateX(0px);
    transform: translateX(0px);
    -webkit-transition-delay: 0.4s;
    -moz-transition-delay: 0.4s;
    -o-transition-delay: 0.4s;
    -ms-transition-delay: 0.4s;
    transition-delay: 0.4s;
}

.uport-view-eighth.v1 .mask-wrapper:hover a.info {
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -o-transform: translateX(0px);
    -ms-transform: translateX(0px);
    transform: translateX(0px);
    -webkit-transition-delay: 0.5s;
    -moz-transition-delay: 0.5s;
    -o-transition-delay: 0.5s;
    -ms-transition-delay: 0.5s;
    transition-delay: 0.5s;
}






/*----------------------------------------------------------------*/





.uport-view-eighth.v2 .mask-wrapper:hover .mask {
    top: 0px;
    bottom: 0px;
    -webkit-animation: bounceY 0.5s linear;
    -moz-animation: bounceY 0.5s linear;
    -ms-animation: bounceY 0.5s linear;
    animation: bounceY 0.5s linear;
}

.uport-view-eighth.v2 .mask-wrapper:hover h2 {
    -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;
}


.uport-view-eighth.v2 .mask-wrapper:hover h4 {
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -o-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-transition-delay: 0.2s;
    -moz-transition-delay: 0.2s;
    -o-transition-delay: 0.2s;
    -ms-transition-delay: 0.2s;
    transition-delay: 0.2s;
}


.uport-view-eighth.v2 .mask-wrapper:hover p {
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -o-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-transition-delay: 0.3s;
    -moz-transition-delay: 0.3s;
    -o-transition-delay: 0.3s;
    -ms-transition-delay: 0.3s;
    transition-delay: 0.3s;
}

.uport-view-eighth.v2 .mask-wrapper:hover .price {
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -o-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-transition-delay: 0.4s;
    -moz-transition-delay: 0.4s;
    -o-transition-delay: 0.4s;
    -ms-transition-delay: 0.4s;
    transition-delay: 0.4s;
}

.uport-view-eighth.v2 .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.5s;
    -moz-transition-delay: 0.5s;
    -o-transition-delay: 0.5s;
    -ms-transition-delay: 0.5s;
    transition-delay: 0.5s;
}



/*----------------------------------------------------------------*/






.uport-view-eighth.v3 .mask-wrapper:hover .mask {
    right: 0px;
    top: 0px;
    -webkit-animation: bounceX 0.5s linear;
    -moz-animation: bounceX 0.5s linear;
    -ms-animation: bounceX 0.5s linear;
    animation: bounceX 0.5s linear;
}


.uport-view-eighth.v3 .mask-wrapper:hover h2 {
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -o-transform: translateX(0px);
    -ms-transform: translateX(0px);
    transform: translateX(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;
}



.uport-view-eighth.v3 .mask-wrapper:hover h4 {
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -o-transform: translateX(0px);
    -ms-transform: translateX(0px);
    transform: translateX(0px);
    -webkit-transition-delay: 0.2s;
    -moz-transition-delay: 0.2s;
    -o-transition-delay: 0.2s;
    -ms-transition-delay: 0.2s;
    transition-delay: 0.2s;
}


.uport-view-eighth.v3 .mask-wrapper:hover p {
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -o-transform: translateX(0px);
    -ms-transform: translateX(0px);
    transform: translateX(0px);
    -webkit-transition-delay: 0.3s;
    -moz-transition-delay: 0.3s;
    -o-transition-delay: 0.3s;
    -ms-transition-delay: 0.3s;
    transition-delay: 0.3s;
}


.uport-view-eighth.v3 .mask-wrapper:hover .price {
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -o-transform: translateX(0px);
    -ms-transform: translateX(0px);
    transform: translateX(0px);
    -webkit-transition-delay: 0.4s;
    -moz-transition-delay: 0.4s;
    -o-transition-delay: 0.4s;
    -ms-transition-delay: 0.4s;
    transition-delay: 0.4s;
}

.uport-view-eighth.v3 .mask-wrapper:hover a.info {
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -o-transform: translateX(0px);
    -ms-transform: translateX(0px);
    transform: translateX(0px);
    -webkit-transition-delay: 0.5s;
    -moz-transition-delay: 0.5s;
    -o-transition-delay: 0.5s;
    -ms-transition-delay: 0.5s;
    transition-delay: 0.5s;
}






/*----------------------------------------------------------------*/












