/*-------------------------------------------------
	:: Block grids
	
	These are 2-up, 3-up, 4-up and 5-up ULs, suited
	for repeating blocks of content. Add 'mobile' to
	them to switch them just like the layout grid
	(one item per line) on phones
	
	For IE7/8 compatibility block-grid items need to be
	the same height. You can optionally uncomment the
	lines below to support arbitrary height, but know
	that IE7/8 do not support :nth-child.
------------------------------------------------- */
	
	
	.block-grid { display: block; overflow: hidden; }
	.block-grid>li { display: block; height: auto; float: left; }
	
	.block-grid.two-up { margin-left: -4% }
	.block-grid.two-up>li { margin-left: 4%; width: 46%; margin-bottom: 4%;}
	.block-grid.two-up>li:nth-child(2n+1) {clear: left;} 
	
	.block-grid.three-up { margin-left: -2% }
	.block-grid.three-up>li { margin-left: 2%; width: 31.3%; margin-bottom: 2%;}
 	.block-grid.three-up>li:nth-child(3n+1) {clear: left;} 
	
	.block-grid.four-up { margin-left: -2% }
	.block-grid.four-up>li { margin-left: 2%; width: 23%; margin-bottom: 2%;}
	.block-grid.four-up>li:nth-child(4n+1) {clear: left;} 
	
	.block-grid.five-up { margin-left: -1.5% }
	.block-grid.five-up>li { margin-left: 1.5%; width: 18.5%; margin-bottom: 1.5%;}
	.block-grid.five-up>li:nth-child(5n+1) {clear: left;} 
	
	.block-grid.six-up { margin-left: -1.6% }
	.block-grid.six-up>li { margin-left: 1.6%; width: 15%; margin-bottom: 1.6%;}
	.block-grid.six-up>li:nth-child(6n+1) {clear: left;} 
	
	.block-grid.seven-up { margin-left: -1.5% }
	.block-grid.seven-up>li { margin-left: 1.5%; width: 12.5%; margin-bottom: 1.5%;}
	.block-grid.seven-up>li:nth-child(7n+1) {clear: left;} 


	@media only screen and (max-width: 1024px) {
	
	.block-grid.mobile { margin-left: 0; }
	.block-grid.mobile > li { float: none; width: 100%; margin-left: 0; }

	.block-grid.mobile-two-up { margin-left: -2% }
	.block-grid.mobile-two-up>li { margin-left: 2%; width: 48%; margin-bottom: 0%;}
	.block-grid.mobile-two-up>li:nth-child(2n+1) {clear: left;} 
	.block-grid.three-up>li:nth-child(3n+1) {clear: none;} 
	.block-grid.four-up>li:nth-child(4n+1) {clear: none;} 
	.block-grid.five-up>li:nth-child(5n+1) {clear: none;} 
	.block-grid.six-up>li:nth-child(6n+1) {clear: none;} 
	.block-grid.seven-up>li:nth-child(7n+1) {clear: none;} 
	}

	@media only screen and (max-width: 640px) {
	
	.block-grid.mobile-small { margin-left: 0; }
	.block-grid.mobile-small > li { float: none; width: 100%; margin-left: 0; }

	.block-grid.mobile-small-two-up { margin-left: -2% }
	.block-grid.mobile-small-two-up>li { margin-left: 2%; width: 48%; margin-bottom: 0%;}
	.block-grid.mobile-small-two-up>li:nth-child(2n+1) {clear: left;} 
	.block-grid.three-up>li:nth-child(3n+1) {clear: none;} 
	.block-grid.four-up>li:nth-child(4n+1) {clear: none;} 
	.block-grid.five-up>li:nth-child(5n+1) {clear: none;} 
	.block-grid.six-up>li:nth-child(6n+1) {clear: none;} 
	.block-grid.seven-up>li:nth-child(7n+1) {clear: none;} 
	}