.wrapper{width:100%; float:left;}
.base-content{width:94%; margin: 200px auto 20px;}
.projects-list {display: flex;justify-content: start;flex-wrap: wrap;padding:0;margin:.5%}
.projects li {width: 32.152%;padding:0 0 35px;margin:.6% .6% 50px .6%; box-sizing: border-box;position: relative}
.projects a:hover .projects-pic img{-moz-transform: scale(1.1);-ms-transform: scale(1.1);-webkit-transform: scale(1.1);transform: scale(1.1); opacity: 0.8;}
.projects-pic {width: 100%;overflow: hidden;position: relative;}
.projects-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;}
.projects-pic.show {opacity: 1;-moz-transform: translateY(0);-ms-transform: translateY(0);-webkit-transform: translateY(0);transform: translateY(0);}
.projects-pic img {max-width: 100%;height: auto;-o-transition: all 1s;-webkit-transition: all 1s;transition: all 1s; margin:0; padding:0;display:block;}
.projects-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}
.projects-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;}
.projects-content.show {opacity: 1;-moz-transform: translateY(0);-ms-transform: translateY(0);-webkit-transform: translateY(0);transform: translateY(0);}
.projects-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;}
.projects a:hover .projects-content {color: #955f2e;transition: 0.3s;-moz-transition: 0.3s;-webkit-transition: 0.3s;-o-transition: 0.3s;}
.projects-name {display: none;}
.projects 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;}
.projects li .view .tw{width: 100%; float: left; font-size: 15px;text-align:center; letter-spacing: 0.05em}
.projects li:hover .view{-webkit-transform: translateY(0);-moz-transform: translateY(0);transform: translateY(0);z-index: 3;opacity: 1;}
.caseall{float:none;width:97%;margin:0 1.5% 20px; display:block;position:relative;}
.caseall ul { margin:0; padding:0; list-style:none;} 
.caseall li {margin:0 10px 0 0; display: inline;text-align:center; line-height:2em;} 
.caseall a {font-size:15px;text-decoration: none;padding:3px 9px;border-radius: 12px;}
.caseall a:hover {color: #fff;text-decoration: none;transition: .4s;-moz-transition: .4s;-webkit-transition: .4s;-o-transition: .4s;background-color: #121934;}
.inpage a {color: #fff; text-decoration:none;background-color: #121934;padding:3px 9px;border-radius: 12px;}
.inpage a:hover {color: #fff;} 

@media screen and (min-width: 2560px) {
.projects li{width:32.145%;}
}
@media screen and (max-width: 1920px) {
.projects li{width:32.152%;}
}
@media screen and (max-width: 1600px) {
.base-content{width:94%;margin: 160px auto 10px; }
}
@media screen and (max-width: 1200px) {
.base-content{width:92%;margin: 120px auto 20px;}
.projects li {padding:0 0 35px;margin:.5% .5% 30px .5%}
.projects li .view{opacity: 1}
}
@media screen and (max-width: 980px) {
.base-content{width:93%;margin:95px auto 20px;}
.projects li{width: 49%;margin:.5% .5% 25px .5%}
.caseall{width:98%;margin:0 1% 15px; }
.caseall li {margin:0 6px 0 0;} 
}
@media screen and (max-width: 767px) {
.base-content{margin:80px auto 5px;}
.projects li {width:100%;margin:0 0 25px;}
.projects-list {width:100%;margin: 0; }
.caseall{width:100%;margin:0 0 15px}
.caseall li {margin:0 5px 0 0;line-height:1.8em;} 
.caseall a {padding:3px 6px;}
}