.portfoliolist{font-size: 0;margin: 0 -30px}
.portfoliolist li{font-size: 14px;width: 50%;display: inline-block;vertical-align: top;padding: 0 30px;margin-bottom: 60px}
.portimg{position: relative;overflow: hidden;z-index: 0}
.portimg img{transition: all .5s ease-in-out;-webkit-transition: all .5s ease-in-out;}
.portfoliobox:hover .portimg img{transform: scale(1.1);-webkit-transform: scale(1.1)}
.portimg:before{position: absolute;content: '';left: 0;top:0;margin: auto;right: 0;bottom: 0;transform: rotate(45deg);height:100px;width: 100px;background: rgba(0,0,0,0.6);opacity: 0;transition: all .5s ease-in-out;-webkit-transition: all .5s ease-in-out;z-index: 1}
.portfoliobox:hover .portimg:before{opacity: 1;width: 130%;height: 180%;left: -20%;top: 0;}
.portfoliobox{display: block;border:1px solid #e3e3e3}
.portbtm{overflow: hidden;padding: 18px 25px;font-size: 0}
.portcount{display: inline-block;font-weight:400;font-family: 'Rajdhani', sans-serif;font-size: 22px;line-height: 100%;width: 45px;border-left: 1px solid #e3e3e3;text-align: right;vertical-align: middle;padding: 7px 0}
.portit{width: calc(100% - 45px);display: inline-block;text-transform: uppercase;color: #000;font-size: 24px;line-height: 100%;font-weight: 700;font-family: 'Rajdhani', sans-serif;vertical-align: middle;padding-right: 10px}
.portbtn{position: absolute;width: 100%;height: 40px;top:0;bottom: 0;margin: auto;text-align: center;opacity: 0;visibility: hidden;transition: all .5s ease-in-out;-webkit-transition: all .5s ease-in-out;transition-delay: 0.2s;-webkit-transition-delay: 0.2s;z-index: 2}
.portfoliobox:hover .portbtn{opacity: 1;visibility: visible}
.portbtn .btnread{border-color: #fff;color: #fff;}
.portbtn .btnread:before{background: url(../images/white-read.png)no-repeat;}
.portbtn .btnread:hover{color: #000}
.portbtn .btnread:after{background: #fff}
.portbtn .btnread:hover:after{opacity: 1;width: 100%}
.portbtn .btnread:hover:before{right: -34px}