.controls {
display: table;
width:auto;
margin: 0 auto 30px;
padding:15px 0;
vertical-align: top;
text-align:center;
border-bottom:1px solid #c1bfbf;
border-top:1px solid #c1bfbf;
}
.controls li {
margin:0 10px;
cursor: pointer;
list-style-type: square;
display:inline-block;
color:#000;
}
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/camera-icon.png") 50% 0 no-repeat #000000; width:33.2%; float:left; margin:0 1px 1px 0; height:210px; 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% 60%}
#Grid .mix img { width:100%; height:auto; min-height:210px;}
#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{ color:#e74c3c;}