.controls {
display: inline-block;
width:100%;
margin: 0 0 30px;
vertical-align: top;
text-align:center;
}
.controls li {
margin-left: 15px;
cursor: pointer;
list-style-type: square;
display:inline-block;
padding:5px 05px; font-size:14px;
}
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-color: #39adff; width:23%; float:left; margin:0 2.6% 2.6% 0; height:200px; 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:200px;}
#Grid .mix:hover img{ opacity:0.35;}
#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:#fff;}