.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 {background:url("../images/zoom-icon.png") 50% -50px no-repeat #d0df56; width:33.333%; float:left; margin:0 0 0 0; height:349px; overflow:hidden; vertical-align:top; box-sizing:border-box; position:relative; -webkit-transition:all 0.6s ease-in-out; -moz-transition:all 0.6s ease-in-out; -ms-transition:all 0.6s ease-in-out; -o-transition:all 0.6s ease-in-out; transition:all 0.6s ease-in-out;  list-style:none;}
#Grid .mix:hover { background-position:50% 55%}
#Grid .mix img { width:100%; height:auto; min-height:349px;}
#Grid .mix:hover img{ opacity:0.2;}
#Grid .mix a{ display:block;}
#Grid .mix {display: none;}
#Grid .mix strong{ font:600 24px/24px 'Roboto Condensed'; position:absolute; width:100%; text-align:center; top:40%; color:#fff;opacity:1; display:none;text-transform:uppercase;}
#Grid .mix:hover strong{ display:block; z-index:9999;}
.controls li.active, .controls li:hover{ color:#d0df56;}