.ff-container{
    /* margin-left: -0.9375em;
    margin-right: -0.9375em; */
}
.ff-container label{
	float:left;
    font-size:1em;
    padding: .4em .5em;
}
.ff-container label.ff-label-type-all{

}
.ff-container label.ff-label-type-3{

}
.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{
    background: #3A589B;
    color:#fff;
}
.ff-container input{
	display: none;
}
.ff-items{
	position: relative;
	margin: 0px auto;
	padding-top: 20px;
}
.ff-items a{
	display: block;
	position: relative;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	margin: 4px;
}
.ff-items a span{
    display: block;
    background: rgba(94, 62, 151, 0.7);
    color: #fff;
    font-size: 1.2em;
    padding: 8px;
    position: absolute;
    bottom: -80px;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
    opacity: 0;
    text-align: center;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.ff-items a:hover span{
    bottom:0px;
	opacity: 1;
}
.ff-items li img{
	display: block;
    width: 100%;
    height: auto;
}

.ff-items li{
	margin: 0px;
	float: left;
	width: 0px;
	-webkit-transform: scale(0,0);
	-moz-transform: scale(0,0);
	-o-transform: scale(0,0);
	-ms-transform: scale(0,0);
	transform: scale(0,0);
}
.ff-container input.ff-selector-type-all:checked ~ .ff-items li{
    width: 33.3%;
	-webkit-transform: scale(1,1);
	-moz-transform: scale(1,1);
	-o-transform: scale(1,1);
	-ms-transform: scale(1,1);
	transform: scale(1,1);
	-webkit-transition: -webkit-transform 0.2s linear;
	-o-transition: -o-transform 0.2s linear;
	-ms-transition: -ms-transform 0.2s linear;
	transition: transform 0.2s linear;
}
.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
{
    width: 33.3%;
	-webkit-transition: -webkit-transform 0.2s linear, width 0s linear 0.2s;
	-moz-transition: -moz-transform 0.2s linear, width 0s linear 0.2s;
	-o-transition: -o-transform 0.2s linear, width 0s linear 0.2s;
	-ms-transition: -ms-transform 0.2s linear, width 0s linear 0.2s;
	transition: transform 0.2s linear, width 0s linear 0.2s;
	-webkit-animation: scaleUp 0.2s linear 0.4s forwards;
	-moz-animation: scaleUp 0.2s linear 0.4s forwards;
	-o-animation: scaleUp 0.2s linear 0.4s forwards;
	-ms-animation: scaleUp 0.2s linear 0.4s forwards;
	animation: scaleUp 0.2s linear 0.4s forwards;
}
.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)
{
	-webkit-animation: scaleDown 0.2s linear forwards;
	-moz-animation: scaleDown 0.2s linear forwards;
	-o-animation: scaleDown 0.2s linear forwards;
	-ms-animation: scaleDown 0.2s linear forwards;
	animation: scaleDown 0.2s linear forwards;
}
@-webkit-keyframes scaleUp {
	50% { width: 33.3%; -webkit-transform: scale(0,0); }
    100% { width: 33.3%; -webkit-transform: scale(1,1); }
}
@-webkit-keyframes scaleDown {
	0% { width: 33.3%;-webkit-transform: scale(1,1);}
	99% { width: 33.3%; -webkit-transform: scale(0,0);}
    100% { width: 0px; -webkit-transform: scale(0,0); }
}
@-moz-keyframes scaleUp {
	50% { width: 33.3%; -moz-transform: scale(0,0); }
    100% { width: 33.3%; -moz-transform: scale(1,1); }
}
@-moz-keyframes scaleDown {
	0% { width: 33.3%; -moz-transform: scale(1,1);}
	99% { width: 33.3%; -moz-transform: scale(0,0);}
    100% { width: 33.3%; -moz-transform: scale(0,0); }
}
@-o-keyframes scaleUp {
	50% { width: 33.3%; -o-transform: scale(0,0); }
    100% { width: 33.3%; -o-transform: scale(1,1); }
}
@-o-keyframes scaleDown {
	0% { width: 33.3%; -o-transform: scale(1,1);}
	99% { width: 33.3%; -o-transform: scale(0,0);}
    100% { width: 0px; -o-transform: scale(0,0); }
}
@-ms-keyframes scaleUp {
	50% { width: 33.3%; -ms-transform: scale(0,0); }
    100% { width: 33.3%; -ms-transform: scale(1,1); }
}
@-ms-keyframes scaleDown {
	0% { width: 33.3%;-ms-transform: scale(1,1);}
	99% { width: 33.3%; -ms-transform: scale(0,0);}
    100% { width: 0px; -ms-transform: scale(0,0); }
}
@keyframes scaleUp {
	50% { width: 33.3%; transform: scale(0,0); }
    100% { width: 33.3%; transform: scale(1,1); }
}
@keyframes scaleDown {
	0% { width: 33.3%; transform: scale(1,1);}
	99% { width: 33.3%; transform: scale(0,0);}
    100% { width: 0px; transform: scale(0,0); }
}

@media only screen and (max-width: 40.063em) { 

	.ff-container input.ff-selector-type-all:checked ~ .ff-items li{
    width: 50%;
}
.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
{
    width: 50%;
}
@-webkit-keyframes scaleUp {
	50% { width: 50%; -webkit-transform: scale(0,0); }
    100% { width: 50%; -webkit-transform: scale(1,1); }
}
@-webkit-keyframes scaleDown {
	0% { width: 50%;-webkit-transform: scale(1,1);}
	99% { width: 50%; -webkit-transform: scale(0,0);}
    100% { width: 0px; -webkit-transform: scale(0,0); }
}
@-moz-keyframes scaleUp {
	50% { width: 50%; -moz-transform: scale(0,0); }
    100% { width: 50%; -moz-transform: scale(1,1); }
}
@-moz-keyframes scaleDown {
	0% { width: 50%; -moz-transform: scale(1,1);}
	99% { width: 50%; -moz-transform: scale(0,0);}
    100% { width: 50%; -moz-transform: scale(0,0); }
}
@-o-keyframes scaleUp {
	50% { width: 50%; -o-transform: scale(0,0); }
    100% { width: 50%; -o-transform: scale(1,1); }
}
@-o-keyframes scaleDown {
	0% { width: 50%; -o-transform: scale(1,1);}
	99% { width: 50%; -o-transform: scale(0,0);}
    100% { width: 0px; -o-transform: scale(0,0); }
}
@-ms-keyframes scaleUp {
	50% { width: 50%; -ms-transform: scale(0,0); }
    100% { width: 50%; -ms-transform: scale(1,1); }
}
@-ms-keyframes scaleDown {
	0% { width: 50%;-ms-transform: scale(1,1);}
	99% { width: 50%; -ms-transform: scale(0,0);}
    100% { width: 0px; -ms-transform: scale(0,0); }
}
@keyframes scaleUp {
	50% { width: 50%; transform: scale(0,0); }
    100% { width: 50%; transform: scale(1,1); }
}
@keyframes scaleDown {
	0% { width: 50%; transform: scale(1,1);}
	99% { width: 50%; transform: scale(0,0);}
    100% { width: 0px; transform: scale(0,0); }
}


}