.controls {
display: inline-block;
width:100%;
margin: 0 0 30px;
vertical-align: top;
text-align:center;
}
.controls li {
margin-left: 20px;
cursor: pointer;
list-style-type: square;
display:inline-block;
padding:5px 15px;
border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px;
text-transform:uppercase;
}
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 #ff5c55; width:25%; float:left; margin:0 0 0 0; height:250px; 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:250px;}
#Grid .mix:hover img{ opacity:0.2;}
#Grid .mix a{ display:block;}
#Grid .mix {display: none;}
#Grid .mix strong{ position:absolute; width:100%; text-align:center; top:40%; color:#fff; opacity:1; display:none;}
#Grid .mix:hover strong{ display:block; z-index:9999;}
.controls li.active, .controls li:hover{ background-color:#ff554e; color:#fff;}