/*= Reset CSS 
============= */
.container3{margin: 0 auto;max-width: 834px;overflow:hidden;}
.container3 li {float: left;width:260px; height:173px; background:#fff;list-style: none;display: inline;margin:14px 0px 15px 23px; cursor:pointer;}
.container3 li.s1,.container3 li.s4,.container3 li.s7 { margin-left:7px;}

.container2{margin: 0 auto;max-width: 834px;overflow:hidden;}
.container2 li {float: left;width:260px;list-style: none;display: inline;margin:16px 3px 2px 13px; cursor:pointer;-moz-box-shadow: 0px 0px 5px #ccc;-webkit-box-shadow: 0px 0px 5px #ccc;box-shadow:0px 0px 5px #ccc;}
.container2 li .tex1 { clear:both; padding:10px 0; text-align:center; font-size:12px; line-height:20px;}

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

/* effect-1 css */
.text-desc p {line-height: 25px;color: #FFF;font-size: 14px;font-family: Arial, Helvetica, sans-serif;text-transform:uppercase; font-size:15px; padding-top:5px;}
.port-1{float: left;width: 100%;position: relative;overflow: hidden;text-align: center;background:#fff;-moz-box-shadow: 0px 0px 5px #ccc;-webkit-box-shadow: 0px 0px 5px #ccc;box-shadow:0px 0px 5px #ccc;}
.port-1 .text-desc{opacity: 0.9; top: -100%; transition: 0.5s; color: #000;}
.port-1 .text-desc h3 { padding-top:40px;font-size: 20px;font-weight: bold;color: #FFF;}
.port-1 .image-box { width:260px; height:173px; overflow:hidden;}
.port-1 .image-box img{ height:163px;transition:all 1s; margin:5px 0;}
.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 */

.reveal-modal-bg {position: fixed;height: 100%;width: 100%;z-index: 100;display: none;top: 0;left: 0;background: rgba(00, 00, 00, 0.8)}
.reveal-modal {visibility: hidden;top: 50%;left: 50%;margin-left:-390px;height:460px; margin-top:-260px;width:720px;position: absolute;z-index: 101;padding:30px;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-moz-box-shadow: 0 0 10px rgba(0,0,0,.4);-webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);-box-shadow: 0 0 10px rgba(0,0,0,.4);background-color: #FFF;}
.reveal-modal .tex { float:right; width:320px;}
.reveal-modal h3 { font-size:18px; line-height:24px; font-weight:bold; color:#014da1; padding-bottom:15px;}
.reveal-modal .pimg { width:350px; height:450px; overflow:hidden; float:left; border:#e4eef7 3px solid;}
.reveal-modal .pimg img{ width:350px; height:450px;transition:all 1s;}
.reveal-modal .pimg:hover img{ transform:scale(1.2,1.2);transform-origin:center center}

.reveal-modal .close-reveal-modal {font-size: 22px;line-height: 0.5;position: absolute;top: 8px;right: 11px;color: #333;text-shadow: 0 -1px 1px rbga(0, 0, 0, .6);font-weight: bold;cursor: pointer;}