.grid{padding:20px 0 0 0;margin:0 auto 3em auto;list-style:none;overflow:hidden;text-align:center;} 
.grid li{display:inline-block;margin:0;padding:0;text-align:left;position:relative;} 
.grid figure{margin:0;position:relative;box-shadow:0 1px 4px rgba(0,0,0,0.2);-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;} 
.grid figure img{width:100%;display:block;position:relative;border-radius:0px!important;} 
.grid figcaption{position:absolute;top:0;left:0;padding:1.5em 1em;background:#F7E040;color:#333;box-shadow:0 1px 4px rgba(0,0,0,0.2);} 
.grid .circle-arrow{position:absolute;display:inline-block;right:1em;top:0.8em;width:30px;height:31px;background:url(../images/circle-arrow.png) no-repeat right;} 
.grid figcaption:hover .circle-arrow{background-position:left;} 
.grid figcaption h6{margin:0 33px 0 0;color:#000;font-weight:700!important;padding:0;font-weight:normal;} 
.grid figcaption a{color:#000;} 
.cs-style figure{overflow:hidden;} 
.cs-style figure img{-webkit-transition:-webkit-transform 0.4s;-moz-transition:-moz-transform 0.4s;transition:transform 0.4s;} 
.no-touch .cs-style figure:hover img,.cs-style figure.cs-hover img{-webkit-transform:translateY(-50px);-moz-transform:translateY(-50px);-ms-transform:translateY(-50px);transform:translateY(-50px);} 
.cs-style figcaption{width:100%;top:auto;bottom:0;opacity:0;-webkit-transform:translateY(100%);-moz-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%);-webkit-transition:-webkit-transform 0.4s,opacity 0.1s 0.3s;-moz-transition:-moz-transform 0.4s,opacity 0.1s 0.3s;transition:transform 0.4s,opacity 0.1s 0.3s;} 
.no-touch .cs-style figure:hover figcaption,.cs-style figure.cs-hover figcaption{opacity:1;-webkit-transform:translateY(0px);-moz-transform:translateY(0px);-ms-transform:translateY(0px);transform:translateY(0px);-webkit-transition:-webkit-transform 0.4s,opacity 0.1s;-moz-transition:-moz-transform 0.4s,opacity 0.1s;transition:transform 0.4s,opacity 0.1s;} 
@media screen and (max-width: 31.5em) {.grid{padding:10px;} 
.grid li{width:100%;} 
.grid li img{width:100%;} 
} 
@media only screen and (max-width: 479px) {#recent_portfolio .circle-arrow{display:none;} 
} 
@media only screen and (min-width: 960px) {.grid figcaption{padding:1.5em;} 
.grid .circle-arrow{top:1em;} 
}