.ff-container{ margin-top:-40px; margin-bottom:60px;}
.ff-label-type-all{ margin-left:5%}

.ff-container label{font-family: 'mulilight'; 
	width: auto;
	height: 40px;
	cursor: pointer;
	color: #fff;
	text-align:center;
	font-size: 1.1rem;
	background: #FA9ABA;
	float:left;
    padding: 0 2.7em;
	line-height:2em;
}
.rosa {background: #FA9ABA; width:100%; height:40px;}
.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{
	background: #fff;
	color: #FA9ABA;
}
.ff-container input{
	display: none;
}
.ff-items{
	position: relative;
	margin: 0px auto;
	padding-top: 20px;
}
.ff-items a{margin:4%;
	display: block;
	position: relative;
	background: #fff;
	width: 90%;
	height: auto;
	border:solid 3px #7ca3dc;
  background:#FFFFFF;
}

.ff-items li span i{ position:relative; margin-top:50%}
.ff-items li span{
	display: block;
	background: rgba(255,255,255,0.75);
	color: #AC3573;
	font-size:40px;
	vertical-align: middle!important;
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
	opacity: 0;
	text-align: center;
	-webkit-transform: scale(0,0);
	-moz-transform: scale(0,0);
	-o-transform: scale(0,0);
	-ms-transform: scale(0,0);
	transform: scale(0,0);
	-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 li:hover span{
	height: 100%;
	width:100%;
	opacity: 1;
	-webkit-transform: scale(1,1);
	-moz-transform: scale(1,1);
	-o-transform: scale(1,1);
	-ms-transform: scale(1,1);
	transform: scale(1,1);
}
.ff-items li img{
	display: block;
	width:100%;
	
}

.ff-items li{	width:33.333333333%;
	float: left;
	overflow:hidden;
  	height:auto;
	-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-items  .info{ background:#7ca3dc;}
.ff-items  a:hover .info{ background:#AC3573}
.ff-items  a:hover { border:solid 3px #AC3573;}

.ff-items li .info{ width:100%; height:100px; color:#fff }
.ff-items li .info .ico{ float:left; width:100px;  height:auto; text-align:center; padding-bottom:10px; padding-top:70px; background-size:100%; background-repeat:no-repeat; background-position:top center; }
.ff-items li p.gota img{ height:35px; width:auto; float:left}
.ff-items li p.gota { margin-top:7px!important;  font-family: 'mulisemibold'!important;  font-size:1.2em} 
.ff-items li .info p{ width:60%; float:left; text-align:left; color:#fff; margin-left:10px; margin-top:10px;  font-size:1em}
.ff-items li .cd-fail-message {
  display: none;
  text-align: center;
}
.biberon{background:url(../images/biberones.png)}
.mamilas{background:url(../images/mamila.png)}
.mordedera{background:url(../images/mordedera.png)}
.entrenador{background:url(../images/entrenador.png)}
.sets{background:url(../images/set.png)}




.ff-items li .select {
	position: absolute;
	background: rgba(248,248,248,0.57);
	width:33.333333333%;
	height: auto;
	z-index:1;
	text-align:center;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition:all .2s ease-in-out;
	-ms-transition:all .2s ease-in-out;
	-moz-transform:  scale(0);
	-ms-transform:scale(0);
	-o-transform: scale(0);
	-webkit-transform: scale(0) ;
	transform: scale(0); 
}
.ff-items li:hover .select {
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	-webkit-transform: scale(1);
	transform:  scale(1);  
}







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

@keyframes scaleDown {
	0% { width:33.333333333%; transform: scale(1,1);}
	99% { width:33.333333333%; transform: scale(0,0);}
    100% { width: 0px; transform: scale(0,0); }
}



@media only screen and (max-width: 1058px) {

 .ff-container input.ff-selector-type-all:checked ~ .ff-items li{
    width: 50%;
  }
  
  .ff-container label{font-family: 'mulilight';
    padding: 0 1.7em;
	line-height:2em;}


.ff-label-type-all{ margin-left:3%}
.ff-items li .info .ico{ float:left; width:80px;}
  
  
@-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: 0px; -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); }
}

}
@media only screen and (max-width: 970px) {
	.rosa{  text-align:center}
.ff-container label{ 
    padding: 0 1em;
	font-size:1.1em;
}

 
 .ff-container input.ff-selector-type-all:checked ~ .ff-items li{
    width: 95%;
	margin:0px auto;
  }
  
  .ff-items { text-align:center;}
  .ff-items li{ display:block; margin:0px auto;}
  
  .ff-items li .info .ico{ float:left; width:80px;}
  
}
  

@media only screen and (max-width: 570px) {
	.rosa{ height:80px; text-align:center}
.ff-container label{ 
    padding: 0 1.5em;
	font-size:1.1em;
}
.ff-container { margin-top:-80px}
 
 .ff-container input.ff-selector-type-all:checked ~ .ff-items li{
    width: 95%;
	margin:0px auto;
  }
  
  .ff-items { text-align:center;}
  .ff-items li{ display:block; margin:0px auto;}
  
  .ff-items li .info .ico{ float:left; width:80px;}
  

  
  @-webkit-keyframes scaleUp {
	80% {  width: 95%;; -webkit-transform: scale(0,0); }
    100% {  width: 95%;; -webkit-transform: scale(1,1); }
}
@-webkit-keyframes scaleDown {
	0% {  width: 95%;;-webkit-transform: scale(1,1);}
	99% {  width: 95%;; -webkit-transform: scale(0,0);}
    100% { width: 0px; -webkit-transform: scale(0,0); }
}
@-moz-keyframes scaleUp {
	80% {  width: 95%;; -moz-transform: scale(0,0); }
    100% {  width: 95%;; -moz-transform: scale(1,1); }
}
@-moz-keyframes scaleDown {
	0% {  width: 95%;;-moz-transform: scale(1,1);}
	99% {  width: 95%;; -moz-transform: scale(0,0);}
    100% { width: 0px; -moz-transform: scale(0,0); }
}
@-o-keyframes scaleUp {
	80% {  width: 95%;; -o-transform: scale(0,0); }
    100% {  width: 95%;; -o-transform: scale(1,1); }
}
@-o-keyframes scaleDown {
	0% {  width: 95%;;-o-transform: scale(1,1);}
	99% {  width: 95%;; -o-transform: scale(0,0);}
    100% { width: 0px; -o-transform: scale(0,0); }
}
@-ms-keyframes scaleUp {
	80% {  width: 95%;; -ms-transform: scale(0,0); }
    100% {  width: 95%;; -ms-transform: scale(1,1); }
}
@-ms-keyframes scaleDown {
	0% {  width: 95%;;-ms-transform: scale(1,1);}
	99% {  width: 95%;; -ms-transform: scale(0,0);}
    100% { width: 0px; -ms-transform: scale(0,0); }
}
@keyframes scaleUp {
	80% {  width: 95%;; transform: scale(0,0); }
    100% {  width: 95%;; transform: scale(1,1); }
}
@keyframes scaleDown {
	0% {  width: 95%;; transform: scale(1,1);}
	99% {  width: 95%;; transform: scale(0,0);}
    100% { width: 0px; transform: scale(0,0); }
}
}