body,html{padding:0;margin:0}
*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.clearfix:after,.clearfix:before{content:" ";display:table}
.clearfix:after{clear:both}

.demo{background-color:#e4e1d9;}
.box{font-family:kanit,sans-serif;text-align:center;border:10px solid #ececec;box-shadow:1px 1px 2px #e6e6e6;overflow:hidden;position:relative}
.box:hover{box-shadow:13px 13px 15px rgba(0,0,0,.3)}
.box:before{content:"";background:linear-gradient(to left top,#11998e,#38ef7d);height:100%;width:100%;opacity:0;position:absolute;left:0;top:0;transition:all .4s linear}
.box:hover:before{opacity:1}
.box img{width:100%;height:auto;transition:all .4s linear}
.box:hover img{opacity:0;transform:scale(3)}
.box .box-content{color:#fff;width:100%;transform:translateY(-50%) scale(0);position:absolute;top:50%;left:0;transition:all .4s linear}
.box:hover .box-content{transform:translateY(-50%) scale(1)}
.box .title{font-size:25px;font-weight:600;letter-spacing:1px;text-transform:uppercase;margin:0}
.box .post{font-size:12px;text-transform:capitalize}
.box .icon{padding:0;margin:0;list-style:none;position:absolute;right:8px;bottom:10px}
.box .icon li{display:inline-block;margin:0 1px;opacity:0;transform:scale(1.3);transition:all .3s ease .4s}
.box:hover .icon li{opacity:1;transform:scale(1)}
.box:hover .icon li:nth-child(2){transition:all .3s ease .2s}
.box .icon li a{font-size:16px;line-height:33px;height:33px;width:33px;border-radius:50%;display:block;transition:all .5s ease}
.box .icon li a:hover{color:#fff;background-color:#11998e;box-shadow:0 0 5px #000}
@media only screen and (max-width:990px){.box{margin:0 0 30px}
}
.boxs{font-family:kanit,sans-serif;text-align:center;border:10px solid #fff;box-shadow:1px 1px 2px #e6e6e6;overflow:hidden;position:relative}