.uport-wrapper{
box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;-webkit-box-sizing:border-box;
}
.uport-view {
float: left; position: relative;
cursor: default;
}
.uport-view .item-wrapper{
display: inline-block;
position: relative;
width:100%;
}
.uport-view .outarea{
display: inline-block;
position: relative;
width:100%;
}
.uport-view .mask-wrapper{
display: inline-block;
position: relative;
overflow: hidden;
vertical-align: top;
width:100%;
}
.uport-view .above-wrapper{
display: inline-block;
position: absolute;
overflow: hidden;
vertical-align: top;
top:0px;
left: 0px;
z-index: 9;
width:100%;
}
.uport-view .price{
display: inline-block;
}
.uport-view .mask,.uport-view .content {
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.uport-view img {
display: block;
position: relative;
}
.uport-view h2 {
position: relative;
}
.uport-view h2 a{
text-decoration: none;
padding: 0px !important;
margin: 0px !important;
}
.uport-view p {
position: relative;
}
.uport-view a.info {
display: inline-block;
text-decoration: none;
}.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);
} .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);
}    .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);
} .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;
}