/*= Reset CSS 
============= */

.container{ clear:both;max-width: 1200px;overflow:hidden;position:relative;}
.container li {display: inline;cursor:pointer;float:left; width:283px;}
.container li:first-child { margin-left:0;}

.text-desc{position: absolute; left: 0; top: 0; background-color:rgba(4,204,7,1); height: 100%; opacity: 0; width: 100%;}
/*= Reset CSS End
================= *

/* effect-1 css */
.port-1{float: left;width: 100%;position: relative;overflow: hidden;text-align: center;}
.port-1 .image-box{ height:294px;border-bottom-width:3px;border-bottom-style:solid;border-bottom-color:rgba(255,255,255,.3);}
.port-1 .text-desc{opacity: 1; top: -100%; transition: 0.5s; color: #000;}
.port-1 .text-desc h3 {font-size: 16px;font-weight: 100;color: #FFF; line-height:55px;padding-top:245px;}
.port-1 .text-desc p { font-size:14px; color:#fff;-moz-opacity:0.7; filter:alpha(opacity=70); opacity:0.7;}
.port-1 .pimg2{ width:263px; height:236px; overflow:hidden;display:table;display: -webkit-box;display: -moz-box;display: box;-webkit-box-align:center;-moz-box-align:center;box-align:center;-webkit-box-pack:center;-moz-box-pack:center;box-pack:center; text-align:center; background:#fff; position:absolute; left:10px;top:10px; z-index:99;}
.port-1 .pimg2 img { max-height:236px; width:auto !important; width:100%; vertical-align:middle;display:table-cell;transition:all 1s;}
.port-1 .pimg2:hover img{ transform:scale(1.2,1.2);transform-origin:center center}
.port-1 .image-box h2 {font-size:16px; font-weight:100; color:#fff; line-height:55px; padding-top:245px;}

.port-1.effect-1:hover .text-desc{top: 0; z-index:1}

.port-1.effect-2 .text-desc{top: auto; bottom: -100%;}
.port-1.effect-2:hover .text-desc{bottom: 0;}