.gallery{ margin:0 -15px;}
.controls{display:inline-block;width:100%;margin:0 0 40px;vertical-align:top;text-align:center}
.controls li{cursor:pointer;list-style-type:none;display:inline-block;padding:0 20px;font:600 14px/14px 'Roboto Condensed';text-transform:uppercase;color:#373737;border-right:1px solid #ccc}
.controls li:last-child{border:none}
hr{margin:0 0 30px;height:0;border:0 none;border-top:1px solid #eee}
#Grid{margin:0}
#Grid:after{content:'';display:inline-block;width:100%}
#Grid .mix{width:33.333%;float:left;margin:0 0 30px 0; padding:0 15px; box-sizing:border-box; height:345px;overflow:hidden;vertical-align:top;box-sizing:border-box;position:relative;transition:all 0.5s ease-in-out; -webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;list-style:none}
#Grid .mix img{width:100%;height:auto;min-height:345px; transition:all 0.5s ease-in-out; -webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;}
#Grid .mix:hover img{opacity:.2; }
#Grid .mix a{display:block}
#Grid .mix{display:none;}
#Grid .mix strong{font:600 24px/24px 'Roboto Condensed';position:absolute;top:0; width:100%;text-align:center;color:#fff;text-transform:uppercase; display:none;}
#Grid .mix:hover strong{display:block; opacity:1;z-index:9999; top:50%; transform:translateY(-50%); -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%);}
.controls li.active,.controls li:hover{color:#a44f1f;}