.controls{
	display: inline-block;
	width: 100%;
	margin: 0 0 10px;
	vertical-align: top;
	text-align:center;
	
	font-family: 'Open Sans', sans-serif;
	font-size:15px;
}

.controls li{
	
	cursor: pointer;
	list-style-type: none;
	display:inline-block;
	padding:10px 20px;
	transition:all 0.3s;
	
}

.controls li.active{
	background-color:#333;
	color:#fff;
	text-shadow:-1px -1px #000 !important;
	
	transition:all 0.3s;
}



#Grid{
	width: 950px;
	text-align: justify;
	padding:0px;
	
}

#Grid:after{
	content: '';
	display: inline-block;
	width: 100%;
}

#Grid .mix{
	display: none;
	opacity: 0;
	width: 220px;
	height: 250px;
	vertical-align: top;
	margin-bottom: 25px;
	background: #333;
	text-align:center;
	-webkit-filter: grayscale(100%);
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); 
	transition:all 0.5s;
	-moz-transition:all 0.8s;
	
}

#Grid .mix:hover{
	filter:none;
	transition:all 0.5s;
	-moz-transition:all 0.8s;
}

#Grid .mix img{
	margin-bottom:10px;
}


#Grid a{
	font-family: 'Open Sans', sans-serif;
	text-align: center;
	text-shadow:-1px -1px #000 !important;
	font-size:16px;
	color:#CCC;
	text-decoration:none;
	display:block;
}
#Grid a:hover{
	
	color:#FFF;
	
}
#Grid li:hover.mix{
	box-shadow:0px 0px 30px #666;
	-moz-box-shadow:0px 0px 30px #666;
	-webkit-filter: none;
	transition:all 0.5s;
	-moz-transition:all 0.8s;
}



#Grid .gap{
	display: inline-block;
	width: 220px;
}