.portfolio-items { font-size: 18px; font-size: 1.125rem; }
.portfolio-items *:not(a) { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.portfolio-items figure { position: relative; overflow: hidden; text-align: center; }
.portfolio-items figure:hover figcaption:after { left: 0; }
.portfolio-items figure:hover figcaption h4 { right: 0; }
.portfolio-items figure:hover figcaption .button { bottom: 15px; }
.portfolio-items figcaption { text-align: content; position: absolute; width: 100%; height: 100%; left: 0; top: 0; transition: .4s; }
.portfolio-items figcaption:after { background-color: #000; content: ""; height: 100%; left: -100%; opacity: .6; position: absolute; top: 0; width: 100%; transition: .4s; }
.portfolio-items figcaption h4 { font-size: inherit; position: absolute; right: -100%; bottom: 50px; text-align: center; padding: 0 15px; color: #ffffff; width: 100%; z-index: 10; transition: .4s; }
.portfolio-items figcaption .button { position: absolute; left: 50%; bottom: -25%; -webkit-transform: translateX(-50%); transform: translateX(-50%); display: table; font-size: 15px; line-height: 1; padding: 8px 33px; background-color: #4cc1be; color: #ffffff; z-index: 10; transition: .4s; }
