#homepage-events, #homepage-news, #homepage-products {margin:0 20px 10px; border:1px solid #ccc; padding:20px;-webkit-border-radius: 5px; border-radius: 5px;position: relative;}
#homepage-events h3, #homepage-news h3, #homepage-products h3 {margin-top:0;}
#homepage-events .container, #homepage-news .container, #homepage-products a.container {width:100%;margin:1em 0;}

#homepage-products a.container {border:solid 1px #ccc; padding:10px; text-align:center; text-decoration:none; display:block; background-color:#FFFFFF;}
#homepage-products a.container:hover {text-decoration:underline;}
#homepage-products a.container .image,#homepage-products a.container .title { display:block;}
#homepage-products a.container img {display:block; /*width:100%; max-width:250px;*/ margin:auto;}
	/*#homepage-products a.container img {max-height:250px;}*/

#homepage-events .container .title, #homepage-news .container .title {font-weight:bold;}	
#homepage-products a.container {
	position: relative;
	padding-bottom: 105%;
	height: 0;
}
#homepage-products a.container .image {
	position: relative;
	padding-bottom: 80%;
	height: 0;
}
#homepage-products a.container .image img {
	position: absolute;
	top:0; left:0; right: 0;
	max-width: 100%;
	max-height: 100%;
	margin: auto;
}
	
	
	
#right { clear:left;float:none; width:100%; *zoom:1;padding:10px; }
#right .moreinfolink > a, #right a.moreinfolink {bottom: 1em;float: none;margin: 1em auto 0;/*position: absolute;  ~ removed to stop overlap of button on text*/}
.contentinner {float:left;padding-bottom:1px;max-width:100%}

@media only screen and (min-width: 25em) { /*400px*/
#homepage-events .moreinfolink, #homepage-news .moreinfolink, #homepage-products a.moreinfolink {margin-top:0.3em;}
}
@media only screen and (min-width: 25em) { /*400px*/
	
	#homepage-products a.container {width:48%;float:left; font-size: 0.9em;}
	#homepage-products a.container:nth-of-type(odd) {margin:1em 2% 1em 0}
	#homepage-products a.container:nth-of-type(even) {margin:1em 0 1em 2%}
	#homepage-products a.container {padding-bottom: 60%; overflow:hidden;}
	#homepage-products a.container .image {
		padding-bottom: 100%;
	}
}
@media only screen and (min-width: 32em) { /*512px*/
	#homepage-events .container, #homepage-news .container {width:100%;float:left;}
	#homepage-events div.container:nth-of-type(odd), #homepage-news div.container:nth-of-type(odd) {margin:1em 2% 1em 0}
	#homepage-events div.container:nth-of-type(even), #homepage-news div.container:nth-of-type(even) {margin:1em 0 1em 2%}
	#homepage-events .container, #homepage-news .container, #homepage-products a.container {font-size: 1em;}
	#homepage-events .container, #homepage-news .container, #homepage-products a.container {width:48%;float:left;}
	#homepage-events div.container:nth-of-type(odd), #homepage-news div.container:nth-of-type(odd), #homepage-products a.container:nth-of-type(odd) {margin:1em 2% 1em 0}
	#homepage-events div.container:nth-of-type(even), #homepage-news div.container:nth-of-type(even), #homepage-products a.container:nth-of-type(even) {margin:1em 0 1em 2%}
	
	#homepage-products a.container {padding-bottom: 60%; overflow:hidden;}
	#homepage-products a.container .image {
		padding-bottom: 100%;
	}
}
@media only screen and (min-width: 32em) and (max-width: 60em) { /* between  512px & 960px */
	#right .moreinfolink > a, #right a.moreinfolink {position:absolute;}
}
@media only screen and (max-width: 46em) { /* between  512px & 960px */
	#homepage-events div.container:nth-of-type(2n+1), #homepage-news div.container:nth-of-type(2n+1), #homepage-products a.container:nth-of-type(2n+1){margin-bottom: 3em}
}
@media only screen and (min-width: 46em) { /*737px*/
	#homepage-news, #homepage-events, #homepage-products {padding-bottom:0}
	#homepage-products {margin:0}
	.contentinner {max-width:73%}
	.contentinner.noright {max-width:66%}
	
	#right .moreinfolink > a, #right a.moreinfolink {bottom:auto ;float: right;margin:0;position:inherit;}
	#right .moreinfolink {text-align:right;}
}
@media only screen and (min-width: 46em) { /*737px*/
}

@media only screen and (min-width: 60em) { /*960px*/
	#homepage-events, #homepage-news {margin:0;border:none;clear:both;}
	#homepage-events div.container, #homepage-news div.container {margin:1em 0 1em 0;width:100%;}
	
	#homepage-events div.container:nth-of-type(odd), #homepage-news div.container:nth-of-type(odd),
	#homepage-events div.container:nth-of-type(even), #homepage-news div.container:nth-of-type(even) {margin:0}
	
	.contentinner h1:first-of-type {margin-top:0;}
	.contentinner {max-width:515px}
	.contentinner.noright {max-width:740px}
	#right { float:right; width:250px; clear:none;}
	#right .moreinfolink > a, #right a.moreinfolink {float:none;}
	#homepage-events h3, #homepage-news h3 {margin-bottom:0;}
	#homepage-events .date, #homepage-news .date {margin: 0.2em 0;color:#555}
	#homepage-news .container, #homepage-events .container {padding:0.25em 0.5em}
	
	#homepage-products a.container:nth-of-type(odd) {margin:1em 0 1em 2%;}
	#homepage-products a.container:nth-of-type(even) {margin:1em 0 1em 2%;}
	#homepage-products a.container:nth-of-type(3n-2) {	margin-left: 0 ;	}
	#homepage-products a.container {width:31%;}
	#homepage-products a.container {padding-bottom: 35%; overflow:hidden;}
	#homepage-products a.container .image {
		padding-bottom: 100%;
	}
	
}
@media only screen and (min-width: 80em) { /*1280px*/
	.contentinner {max-width:745px} /*930px*/
	.contentinner.noright {max-width:1060px}
	.contentinner.noright.noleft {max-width:1230px}
	#right { width:340px;}
}
/*
@media only screen and (min-width: 676px) and (max-width: 979px) {}
@media only screen and (min-width: 676px) and (max-width: 847px) {.contentinner {max-width:65%;}} */