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

.container{margin: 0 auto;max-width: 1200px;overflow:hidden;position:relative;}
.container li {float: left;width: 298px;list-style: none;height: 400px;display: inline;margin-left: 2px; cursor:pointer;}
.container li:first-child { margin-left:0;}

.btn{display: inline-block;font-size: 12px;color:#f63900;border: 1px solid #fff;background-color:#fff;text-decoration: none;transition: 0.4s;padding:5px 30px;margin-top: 20px;}
.btn:hover{background-color: transparent;color:#fff;transition: 0.4s; text-decoration:none;}
.text-desc{position: absolute; left: 0; top: 0; background-color:rgba(0,0,0,0.8); height: 100%; opacity: 0; width: 100%;}
/*= Reset CSS End
================= *

/* effect-1 css */
.text-desc p { color:#fff;}
.port-1{float: left;width: 100%;position: relative;overflow: hidden;}
.port-1 .text-desc{opacity: 0.9; top: -100%; width:218px; transition: 0.5s; color: #000; padding:0 40px;}
.port-1 .text-desc h3 { padding-top:70px;font-size: 20px;font-weight: 100;color: #fff; border-bottom:#fff 1px solid; padding-bottom:10px; margin-bottom:10px;}
.port-1 .text-desc a { display:block; color: #fff;}
.port-1 .text-desc a.more { font-size:12px; margin-top:10px;}
.port-1 img{ width:298px; height:400px;transition:all 0.2s;}
.port-1:hover img{transform:scale(1.1,1.1);transform-origin:center center}

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

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

.port-1.effect-3 .text-desc{top: 50%; left: 50%; width: 0; height: 0; overflow: hidden; padding: 0;}
.port-1.effect-3:hover .text-desc{width: 100%; top: 0; left: 0; height: 100%; padding: 45px 20px 20px;}
/* effect-1 css end */