.ff-container{
	width: 950px;
	margin: 20px auto;
	
}
.ff-container:before, .ff-container:after {content: " ";  display: table;}
.ff-container:after { clear: both; }

.ff-container label{
	font: 13px/40px 'Gudea', sans-serif;
	font-weight: 400;
	width: 158px;
	height: 40px;
	text-transform: uppercase;
	border-bottom: 3px double #f4f4f4;
	text-align: center;
	cursor: pointer;
	color: #777;
	float:left;
	margin-bottom: 20px;
}

.ff-container label:hover {text-decoration: unerline;}

.ff-container input.ff-selector-type-all:checked ~ label.ff-label-type-all,
.ff-container input.ff-selector-type-1:checked ~ label.ff-label-type-1,
.ff-container input.ff-selector-type-2:checked ~ label.ff-label-type-2,
.ff-container input.ff-selector-type-3:checked ~ label.ff-label-type-3,
.ff-container input.ff-selector-type-4:checked ~ label.ff-label-type-4,
.ff-container input.ff-selector-type-5:checked ~ label.ff-label-type-5,
.ff-container input.ff-selector-type-6:checked ~ label.ff-label-type-6,
.ff-container input.ff-selector-type-7:checked ~ label.ff-label-type-7,
.ff-container input.ff-selector-type-8:checked ~ label.ff-label-type-8,
.ff-container input.ff-selector-type-9:checked ~ label.ff-label-type-9,
.ff-container input.ff-selector-type-10:checked ~ label.ff-label-type-10,
.ff-container input.ff-selector-type-11:checked ~ label.ff-label-type-11,
.ff-container input.ff-selector-type-12:checked ~ label.ff-label-type-12,
.ff-container input.ff-selector-type-13:checked ~ label.ff-label-type-13,
.ff-container input.ff-selector-type-14:checked ~ label.ff-label-type-14,
.ff-container input.ff-selector-type-15:checked ~ label.ff-label-type-15,
.ff-container input.ff-selector-type-16:checked ~ label.ff-label-type-16
{
	
}
.ff-container input{
	display: none;
}
.ff-items{
	position: relative;
	margin: 0px auto;
	padding: 0px;
}

.ff-items li{
	list-style: none;
	display: inline-block;
	margin: 0px;
	float: left;
	width: 316px;
	height: 65px;
	-webkit-transition: opacity 0.6s ease-in-out;
	-moz-transition: opacity 0.6s ease-in-out;
	-o-transition: opacity 0.6s ease-in-out;
	-ms-transition: opacity 0.6s ease-in-out;
	transition: opacity 0.6s ease-in-out;
}
.ff-items li  p {font: 11px/1.3em 'Gudea', sans-serif;  text-align: left; font-weight:400; color: #575757;  margin:  3px 0px 4px 0px;  }
.ff-items li img {height:48px; width: 48px;  float: left; margin: 0px 30px 0px 25px; border: 2px solid #fff; background: rgba(0,0,0,0);  -webkit-box-shadow: 0px 0px 8px 0px rgba(212,212,212,1);
-moz-box-shadow: 0px 0px 8px 0px rgba(212,212,212,1);
box-shadow: 0px 0px 8px 0px rgba(212,212,212,1)} 
.ff-items li:hover h4 {color: #A1A9BD;}
h4 {font: 13px/1.1em 'Gudea', serif;  color: #3C4965; text-transform: uppercase; letter-spacing: 0px; font-weight: 400; padding: 0; margin: 4px 0px 3px 0px; -webkit-transition: color 0.8s ease; -moz-transition: color 0.8s ease; -ms-transition: color 0.8s ease; -o-transition: color 0.8s ease; transition: color 0.8s ease;}

.ff-container input.ff-selector-type-all:checked ~ .ff-items li,
.ff-container input.ff-selector-type-1:checked ~ .ff-items .ff-item-type-1,
.ff-container input.ff-selector-type-2:checked ~ .ff-items .ff-item-type-2,
.ff-container input.ff-selector-type-3:checked ~ .ff-items .ff-item-type-3,
.ff-container input.ff-selector-type-4:checked ~ .ff-items .ff-item-type-4,
.ff-container input.ff-selector-type-5:checked ~ .ff-items .ff-item-type-5,
.ff-container input.ff-selector-type-6:checked ~ .ff-items .ff-item-type-6,
.ff-container input.ff-selector-type-7:checked ~ .ff-items .ff-item-type-7,
.ff-container input.ff-selector-type-8:checked ~ .ff-items .ff-item-type-8,
.ff-container input.ff-selector-type-9:checked ~ .ff-items .ff-item-type-9,
.ff-container input.ff-selector-type-10:checked ~ .ff-items .ff-item-type-10,
.ff-container input.ff-selector-type-11:checked ~ .ff-items .ff-item-type-11,
.ff-container input.ff-selector-type-12:checked ~ .ff-items .ff-item-type-12,
.ff-container input.ff-selector-type-13:checked ~ .ff-items .ff-item-type-13,
.ff-container input.ff-selector-type-14:checked ~ .ff-items .ff-item-type-14,
.ff-container input.ff-selector-type-15:checked ~ .ff-items .ff-item-type-15,
.ff-container input.ff-selector-type-16:checked ~ .ff-items .ff-item-type-16,
.ff-container input.ff-selector-type-17:checked ~ .ff-items .ff-item-type-17,
.ff-container input.ff-selector-type-18:checked ~ .ff-items .ff-item-type-18,
.ff-container input.ff-selector-type-19:checked ~ .ff-items .ff-item-type-19,
.ff-container input.ff-selector-type-20:checked ~ .ff-items .ff-item-type-20,
.ff-container input.ff-selector-type-21:checked ~ .ff-items .ff-item-type-21,
.ff-container input.ff-selector-type-22:checked ~ .ff-items .ff-item-type-22,
.ff-container input.ff-selector-type-23:checked ~ .ff-items .ff-item-type-23,
.ff-container input.ff-selector-type-24:checked ~ .ff-items .ff-item-type-24,
.ff-container input.ff-selector-type-25:checked ~ .ff-items .ff-item-type-25,
.ff-container input.ff-selector-type-26:checked ~ .ff-items .ff-item-type-26,
.ff-container input.ff-selector-type-27:checked ~ .ff-items .ff-item-type-27,
.ff-container input.ff-selector-type-28:checked ~ .ff-items .ff-item-type-28,
.ff-container input.ff-selector-type-29:checked ~ .ff-items .ff-item-type-29,
.ff-container input.ff-selector-type-30:checked ~ .ff-items .ff-item-type-30,
.ff-container input.ff-selector-type-31:checked ~ .ff-items .ff-item-type-31,
.ff-container input.ff-selector-type-32:checked ~ .ff-items .ff-item-type-32,
.ff-container input.ff-selector-type-33:checked ~ .ff-items .ff-item-type-33,
.ff-container input.ff-selector-type-34:checked ~ .ff-items .ff-item-type-34,
.ff-container input.ff-selector-type-35:checked ~ .ff-items .ff-item-type-35
{
	opacity: 1;
}

.ff-container input.ff-selector-type-1:checked ~ .ff-items li:not(.ff-item-type-1),
.ff-container input.ff-selector-type-2:checked ~ .ff-items li:not(.ff-item-type-2),
.ff-container input.ff-selector-type-3:checked ~ .ff-items li:not(.ff-item-type-3),
.ff-container input.ff-selector-type-4:checked ~ .ff-items li:not(.ff-item-type-4),
.ff-container input.ff-selector-type-5:checked ~ .ff-items li:not(.ff-item-type-5),
.ff-container input.ff-selector-type-6:checked ~ .ff-items li:not(.ff-item-type-6),
.ff-container input.ff-selector-type-7:checked ~ .ff-items li:not(.ff-item-type-7),
.ff-container input.ff-selector-type-8:checked ~ .ff-items li:not(.ff-item-type-8),
.ff-container input.ff-selector-type-9:checked ~ .ff-items li:not(.ff-item-type-9),
.ff-container input.ff-selector-type-10:checked ~ .ff-items li:not(.ff-item-type-10),
.ff-container input.ff-selector-type-11:checked ~ .ff-items li:not(.ff-item-type-11),
.ff-container input.ff-selector-type-12:checked ~ .ff-items li:not(.ff-item-type-12),
.ff-container input.ff-selector-type-13:checked ~ .ff-items li:not(.ff-item-type-13),
.ff-container input.ff-selector-type-14:checked ~ .ff-items li:not(.ff-item-type-14),
.ff-container input.ff-selector-type-15:checked ~ .ff-items li:not(.ff-item-type-15),
.ff-container input.ff-selector-type-16:checked ~ .ff-items li:not(.ff-item-type-16),
.ff-container input.ff-selector-type-17:checked ~ .ff-items li:not(.ff-item-type-17),
.ff-container input.ff-selector-type-18:checked ~ .ff-items li:not(.ff-item-type-18),
.ff-container input.ff-selector-type-19:checked ~ .ff-items li:not(.ff-item-type-19),
.ff-container input.ff-selector-type-20:checked ~ .ff-items li:not(.ff-item-type-20),
.ff-container input.ff-selector-type-21:checked ~ .ff-items li:not(.ff-item-type-21),
.ff-container input.ff-selector-type-22:checked ~ .ff-items li:not(.ff-item-type-22),
.ff-container input.ff-selector-type-23:checked ~ .ff-items li:not(.ff-item-type-23),
.ff-container input.ff-selector-type-24:checked ~ .ff-items li:not(.ff-item-type-24),
.ff-container input.ff-selector-type-25:checked ~ .ff-items li:not(.ff-item-type-25),
.ff-container input.ff-selector-type-26:checked ~ .ff-items li:not(.ff-item-type-26),
.ff-container input.ff-selector-type-27:checked ~ .ff-items li:not(.ff-item-type-27),
.ff-container input.ff-selector-type-28:checked ~ .ff-items li:not(.ff-item-type-28),
.ff-container input.ff-selector-type-29:checked ~ .ff-items li:not(.ff-item-type-29),
.ff-container input.ff-selector-type-30:checked ~ .ff-items li:not(.ff-item-type-30),
.ff-container input.ff-selector-type-31:checked ~ .ff-items li:not(.ff-item-type-31),
.ff-container input.ff-selector-type-32:checked ~ .ff-items li:not(.ff-item-type-32),
.ff-container input.ff-selector-type-33:checked ~ .ff-items li:not(.ff-item-type-33),
.ff-container input.ff-selector-type-34:checked ~ .ff-items li:not(.ff-item-type-34),
.ff-container input.ff-selector-type-35:checked ~ .ff-items li:not(.ff-item-type-35)

{
	opacity: 0.1;
	-webkit-filter: grayscale(1);
}
.ff-container input.ff-selector-type-1:checked ~ .ff-items li:not(.ff-item-type-1) span,
.ff-container input.ff-selector-type-2:checked ~ .ff-items li:not(.ff-item-type-2) span,
.ff-container input.ff-selector-type-3:checked ~ .ff-items li:not(.ff-item-type-3) span,
.ff-container input.ff-selector-type-4:checked ~ .ff-items li:not(.ff-item-type-4) span,
.ff-container input.ff-selector-type-5:checked ~ .ff-items li:not(.ff-item-type-5) span,
.ff-container input.ff-selector-type-6:checked ~ .ff-items li:not(.ff-item-type-6) span,
.ff-container input.ff-selector-type-7:checked ~ .ff-items li:not(.ff-item-type-7) span,
.ff-container input.ff-selector-type-8:checked ~ .ff-items li:not(.ff-item-type-8) span,
.ff-container input.ff-selector-type-9:checked ~ .ff-items li:not(.ff-item-type-9) span,
.ff-container input.ff-selector-type-10:checked ~ .ff-items li:not(.ff-item-type-10) span,
.ff-container input.ff-selector-type-11:checked ~ .ff-items li:not(.ff-item-type-11) span,
.ff-container input.ff-selector-type-12:checked ~ .ff-items li:not(.ff-item-type-12) span,
.ff-container input.ff-selector-type-13:checked ~ .ff-items li:not(.ff-item-type-13) span,
.ff-container input.ff-selector-type-14:checked ~ .ff-items li:not(.ff-item-type-14) span,
.ff-container input.ff-selector-type-15:checked ~ .ff-items li:not(.ff-item-type-15) span,
.ff-container input.ff-selector-type-16:checked ~ .ff-items li:not(.ff-item-type-16) span,
.ff-container input.ff-selector-type-17:checked ~ .ff-items li:not(.ff-item-type-17) span,
.ff-container input.ff-selector-type-18:checked ~ .ff-items li:not(.ff-item-type-18) span,
.ff-container input.ff-selector-type-19:checked ~ .ff-items li:not(.ff-item-type-19) span,
.ff-container input.ff-selector-type-20:checked ~ .ff-items li:not(.ff-item-type-20) span,
.ff-container input.ff-selector-type-21:checked ~ .ff-items li:not(.ff-item-type-21) span,
.ff-container input.ff-selector-type-22:checked ~ .ff-items li:not(.ff-item-type-22) span,
.ff-container input.ff-selector-type-23:checked ~ .ff-items li:not(.ff-item-type-23) span,
.ff-container input.ff-selector-type-24:checked ~ .ff-items li:not(.ff-item-type-24) span,
.ff-container input.ff-selector-type-25:checked ~ .ff-items li:not(.ff-item-type-25) span,
.ff-container input.ff-selector-type-26:checked ~ .ff-items li:not(.ff-item-type-26) span,
.ff-container input.ff-selector-type-27:checked ~ .ff-items li:not(.ff-item-type-27) span,
.ff-container input.ff-selector-type-28:checked ~ .ff-items li:not(.ff-item-type-28) span,
.ff-container input.ff-selector-type-29:checked ~ .ff-items li:not(.ff-item-type-29) span,
.ff-container input.ff-selector-type-30:checked ~ .ff-items li:not(.ff-item-type-30) span,
.ff-container input.ff-selector-type-31:checked ~ .ff-items li:not(.ff-item-type-31) span,
.ff-container input.ff-selector-type-32:checked ~ .ff-items li:not(.ff-item-type-32) span,
.ff-container input.ff-selector-type-33:checked ~ .ff-items li:not(.ff-item-type-33) span,
.ff-container input.ff-selector-type-34:checked ~ .ff-items li:not(.ff-item-type-34) span,
.ff-container input.ff-selector-type-35:checked ~ .ff-items li:not(.ff-item-type-35) span
{
	display:none;
}