/******************************************************************************/ 

/******************************************************************************/ 

/**
 * @category    Fishpig
 * @package     Fishpig_AttributeSplash
 * @license     http://fishpig.co.uk/license.txt
 * @author      Ben Tideswell <help@fishpig.co.uk>
 */

/* MT: To make it responsive -
Change Column Count=1 in Admin. This puts individual items in its own ul. Set the ul width to the appropriate widths for screen & make all li items 100% of the ul */

.splash-group-grid { display:block; width: 100%; text-align:left; }
.splash-group-grid li.item { width: 25%; display: inline-block; vertical-align:middle; text-align:center; 	padding: 0 10px 20px 0;}

@media only screen and (max-width: 479px) {
	.splash-group-grid li.item { width: 49%; }
}
@media only screen and (min-width: 480px) {
	.splash-group-grid li.item { width: 33%; }
}
@media only screen and (min-width: 771px) {
	.splash-group-grid li.item { width: 25%; }
}
@media only screen and (min-width: 1200px) {
	.splash-group-grid li.item { width: 20%; }
}

.splash-groups .product-image { display:block; text-align:center;}
.splash-groups .product-image img{ display:inline-block; max-width:100%; height:auto;}




/* MT: To make it responsive -
Change Column Count=1 in Admin. This puts individual items in its own ul. Set the ul width to the appropriate widths for screen & make all li items 100% of the ul 

.splash-group-grid { 
	overflow: hidden;
	display:inline-block; /* each row is in a separate ul - we want to make it responsive so change this. * /
	width: 25%; /* default = 4 across * / 
	text-align:center;
}
@media only screen and (max-width: 479px) {
	.splash-group-grid { width: 49%; }
}
@media only screen and (min-width: 480px) {
	.splash-group-grid { width: 33%; }
}
@media only screen and (min-width: 771px) {
	.splash-group-grid { width: 25%; }
}
@media only screen and (min-width: 1200px) {
	.splash-group-grid { width: 20%; }
}

.splash-group-grid li.item,
.splash-group-grid-2 li.item,
.splash-group-grid-3 li.item ,
.splash-group-grid-4 li.item ,
.splash-group-grid-5 li.item {
	text-align:center;
	width: 100%;
	padding: 0 10px 20px 0;
}
*/