.portfolio-list {display: flex;justify-content: start;flex-wrap: wrap;padding:0;margin:.5%}
.portfolio li {width: 32.152%;padding:0 0 35px;margin:.6% .6% 50px .6%; box-sizing: border-box;position: relative}
.portfolio a:hover .portfolio-pic img{-moz-transform: scale(1.1);-ms-transform: scale(1.1);-webkit-transform: scale(1.1);transform: scale(1.1); opacity: 0.8;}
.portfolio-pic {width: 100%;overflow: hidden;position: relative;}
.portfolio-pic{opacity: 0;-moz-transform: translateY(30px);-ms-transform: translateY(30px);-webkit-transform: translateY(30px);transform: translateY(30px);-moz-transition: opacity .8s, -moz-transform .8s;-o-transition: opacity .8s, -o-transform .8s;-webkit-transition: opacity .8s, -webkit-transform .8s;transition: opacity .8s, transform .8s;background-color: #000;}
.portfolio-pic.show {opacity: 1;-moz-transform: translateY(0);-ms-transform: translateY(0);-webkit-transform: translateY(0);transform: translateY(0);}
.portfolio-pic img {max-width: 100%;height: auto;-o-transition: all 1s;-webkit-transition: all 1s;transition: all 1s; margin:0; padding:0;display:block;}
.portfolio-content {text-align: left;transition: 0.3s;-moz-transition: 0.3s;-webkit-transition: 0.3s;-o-transition: 0.3s; margin-bottom: 10px; padding: 0 6px 2px}
.portfolio-content{opacity: 0;-moz-transform: translateY(30px);-ms-transform: translateY(30px);-webkit-transform: translateY(30px);transform: translateY(30px);-moz-transition: opacity .8s, -moz-transform .8s;-o-transition: opacity .8s, -o-transform .8s;-webkit-transition: opacity .8s, -webkit-transform .8s;transition: opacity .8s, transform .8s;}
.portfolio-content.show {opacity: 1;-moz-transform: translateY(0);-ms-transform: translateY(0);-webkit-transform: translateY(0);transform: translateY(0);}
.portfolio-content i{margin:0 0 0 3px;transition: 0.3s;-moz-transition: 0.3s;-webkit-transition: 0.3s;-o-transition: 0.3s; font-size:16px;}
.portfolio a:hover .portfolio-content {color: #955f2e;transition: 0.3s;-moz-transition: 0.3s;-webkit-transition: 0.3s;-o-transition: 0.3s;}
.portfolio-name {display: none;}
.portfolio li .view{opacity: 0;color: #000;width:100%; box-sizing: border-box;position: absolute;left:0; bottom:0; overflow: hidden;
    -webkit-transition: all 0.5s cubic-bezier(0.3, 0.1, 0.58, 1);-moz-transition: all 0.5s cubic-bezier(0.3, 0.1, 0.58, 1);-o-transition: all 0.5s cubic-bezier(0.3, 0.1, 0.58, 1);transition: all 0.5s cubic-bezier(0.3, 0.1, 0.58, 1); padding: 0;z-index: 8;}
.portfolio li .view .tw{width: 100%; float: left; font-size: 15px;text-align:center; letter-spacing: 0.05em}
.portfolio li:hover .view{-webkit-transform: translateY(0);-moz-transform: translateY(0);transform: translateY(0);z-index: 3;opacity: 1;}
.wrapper{width:100%; float:left;}
.base-content{width:94%; margin: 0 auto 20px;}
.caseall{width:100%;margin:0 0 20px; display:block;position:relative;}
.caseall ul { margin:0; padding:0; list-style:none;} 
.caseall li {margin:0 15px 10px; display: inline;text-align:center;} 
.caseall a {font-size:16px;color:#171717;}
.caseall a:hover {color: #a38500;text-decoration: none;}
.inpage a {color: #a38500; font-weight:500;}
.inpage a:hover {color: #a38500;} 
.topbg{width: 100%;float: left;background-color: #f5f3f1;text-align: center;margin:120px  0 50px;padding:50px 25% 30px}
.topbg h1{font-size: 26px;letter-spacing: 0.1em;margin-bottom: 40px;text-indent: 0.1em}

@media screen and (max-width: 1600px) {
.base-content{width:94%;margin: 0 auto 10px; }
}
@media screen and (max-width: 1200px) {
.base-content{width:92%;margin: 0 auto 20px;}
.portfolio li {width: 31.152%;padding:0 0 35px;margin:.5% 1% 40px}
.portfolio li .view{opacity: 1}
.topbg{margin:100px  0 40px;padding:40px 25% 20px}
}
@media screen and (max-width: 980px) {
.base-content{width:93%;}
.portfolio li{width: 47%;margin:.5% 1.5% 30px}
.topbg{margin:90px  0 30px;padding:40px 15% 20px;}
.topbg h1{margin-bottom: 30px;}
}
@media screen and (max-width: 767px) {
.base-content{margin: 0 auto 5px;}
.portfolio li {width:100%;margin:0 0 30px;}
.portfolio-list {width:100%;margin: 0; }
.topbg{margin:80px  0 30px;padding:25px 10% 5px}
.topbg h1{font-size: 24px;margin-bottom: 20px;}
.caseall li {margin:0 10px 10px;} 

}