@charset "UTF-8";
/* CSS Document */

.grouping {
	box-sizing:border-box;
	float: left;
	height: auto;
	padding:0 19px;
	margin-bottom:20px;
	background: #c6c1b6;
}

body.col3 .grouping{
	width: 33.33%;
	
	}
	
	
body.col4 .grouping{
	width: 25%;
	}
	
.grouping img{
	max-width: 100%;/*never gets bigger than container allows, image stays actual size unless container is smaller*/
	height: auto;
	-ms-interpolation-mode: bicubic; /*IE 7*/
	image-rendering: optimizeQuality;
	display:block; /*so we can give margins*/
	margin: 0 auto 7px auto;
		
}

/*.grouping img:last-of-type {
	display:inline-block;
	vertical-align: top;
	
}*/


.grouping p.caption {
	max-width: 179px;
	height: 75px;
	color: #000;
	text-align: center;
	font-size: 12px;
	margin: 0 auto;
	
	/*padding: 0 0% 0 0%;
	margin-left: 3%;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.15em;
	line-height: 115%;*/
}


.captions_bigthree { /*steampunk pages*/
	color: #000;
	text-align: left;
	height: 50px;
	width: 235px;
	float: left;
	margin-left: 15px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11.5px;
	line-height: 115%;
}


.steampunk_sm {
	float: left;
	height: 450px;
	width: 252px;
	margin-left: 25px;
	padding-top: 0px;
	padding-bottom: 60px;
	background: #c6c1b6;
}


@media screen and (max-width: 725px)
{
body.col4 .grouping{
	width: 33.33%;
	}
}


@media screen and (max-width: 650px)
{
body.col3 .grouping{
	width: 50%;
	
	}
body.col4 .grouping{
	width: 50%;
	
	}
}

@media screen and (max-width: 400px)
{
body.col3 .grouping{
	width: 80%;
	
	}

body.col4 .grouping{
	width: 100%;
	
	}
}