.index-header {
	font-family: 'Georgia';	
	text-align: center;
	}

.thumb-box {
	font-size: 16px;
	/* feels weird using px but it's the only way to fix it when I'm being so loosey goosey with the rems? */
	/* still zooms in chrome... */
	}
	@media (min-width: 66em) { .thumb-box {
		margin-left: 3.75%;
		margin-right: 3.75%;
		}}
	@media (min-width: 90em) { .thumb-box {
		margin-left: 7.5%;
		margin-right: 7.5%;
		}}

.post-thumb {
	width: 90%;
	height: 7.5em;

	/* box-shadow: 0 0.125em 0.125em 0 #aaa; */
	/*border: 1px solid white; temp so I can see what's going on with all of that gray*/
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 0.25em;
	margin: 0.5em auto;
	background-color: #161616;
	
	/* margin: 0; */
	}
	.post-thumb:hover {	
		background-color: #0092ff;
		background-image: none !important;
   		}
   		.post-thumb:hover * {
			color: white !important;
   			}
   		.post-thumb:hover .thumb-tags {
			border-top: 1px solid white;
   			}
   	.post-thumb:hover .thumb-h {
   		}
	.post-thumb:active {
		opacity: 1;
		background-color: yellow;
		background-image: none !important;
		}
	.post-thumb > a { /* just for the big clickable a, not the tags */
		display: block;
		width: 100%;
		height: 11.7426457771755em; /* same as div */
		text-decoration: none;
		}

	.thumb-h {
		font-family: 'SooperSansThick', sans-serif;
		color: #e6e6e6;
		letter-spacing: 0.0125em;
		width: 100%;
		padding: 0.75em;
		margin: 0;
		font-size: 1.625em;
		line-height: 1.125;
		text-align: center;
		}

.soft-shadow-text {
	text-shadow: 0 0 0.5rem #666;
	}
	a:hover .soft-shadow-text {
		text-shadow: none;
		}
.post-thumb.soft-shadow-text:hover  {
	text-shadow: none;
	}

.hello {
	text-transform: uppercase;
}

@media (max-width: 380px) {
	.post-thumb { height: 9.5em; }
}


@media (min-width: 29em) { /* bigger than single column */

.thumb-box {
	text-align: center;
	/* text-space-collapse: discard some glorious day, when css text level 4 is implemented in some browser somewhere, I'll turn this on and get rid of all of the commented out white space. */

	}
	
	.post-thumb, .post-thumb a {
		margin-bottom: 0;
		width: 14em;
		height: 22.65247586em; /* golden! vertical! */
		margin: 0.1875em;
		display: inline-block;
		vertical-align: top;
		text-align: center;
		}
		
	.post-thumb > a {height: 22.65247586em;}
	
	.thumb-h { 
		font-size: 2.125em;
		margin-top: 2em;
		text-align: center;
		padding: 0.25em;
		}

	}