.content {
	margin-top: 3em;
	margin-bottom: 3em;
	margin-left: 8em;
	margin-right: 8em;
	
	/*width: calc(100% - 8em);
	margin-left: auto;
	margin-right: auto;*/
}

.albumImage {
	/*width: 15%;*/
	/*width: 240px;*/
	/*margin-left: auto;
	margin-right: auto;*/
	max-width: 100%;
}

/*
so far, the only double sized thumbnail is the panorama shot in the piano game
this is a bit of a hack as these values are eyeballed and are slightly off -not sure on how to actually fix this...
*/
@media only screen and (max-width: 576px) {
	.doubleSizeThumb {
		width: 91%;
	}
}
@media only screen and (min-width: 768px) {
	.doubleSizeThumb {
		width: 65%;
	}
}
@media only screen and (min-width: 992px) {
	.doubleSizeThumb {
		width: 93.5%;
	}
}


.sectionText {
	margin-top: 1em;
	margin-left: 1em;
	margin-bottom: -2em;
}


.thumbnailGrid {
	max-width: calc(960px + 90px);
}

video {
	max-width: 100%;
	height: 100%;
}

.container {
	margin: auto;
	max-width: 60em;
}

/* need to override bootstrap's values on these. Found by trial and error. */
.row {
	margin-left: -2em;
	margin-right: -2em;
}

h1 {
	margin: auto;
	max-width: 60rem;
}
p {
	margin-left: auto;
	margin-right: auto;
}