body{ font-family: 'Lato', sans-serif; color: #3d3d3d; background-color: #f1f1f1; }
img { max-width: 100%; }
h1, h2, h3, h4, h5 { text-shadow: 0 1px 4px rgba(255, 255, 255, 0.7); }

.hidden { display: hidden; }

/* layout */
header h1 { font-weight: 300; font-size: 3em; padding: 2em 0; border-bottom: 1px solid; }
	header h1 span:nth-child(2) { font-size: 0.4em; vertical-align: top; }
header h4 { width: 100%; text-align: right; }
@media all and ( max-width: 460px ){
	header h1 span { display: block; }
}
header .contact { position: fixed; top: 0; left: 0; width: 100%; background-color: rgba(255, 255, 255, 0.6); box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); padding: 5px; }
	header .contact a { display: inline-block; margin: 0 0.2em; vertical-align: middle; }

section { margin-bottom: 100px; }

.pre-container { position: fixed; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; background-image: url(../img/marmot-styled3.jpg); background-size: cover; }
.container { position: relative; z-index: 2; }

.projects > div {  }
.projects .project { display: inline-block; width: 100%; padding: 20px; background-color: rgba(255, 255, 255, 0.9); box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); margin-bottom: 20px; } 
	.projects .project img { margin: 10px 0; }
	.projects .project h3 { border-bottom: 1px solid rgba(0 ,0, 0 ,0.1); padding-bottom: 20px; }
	.projects .project > a { display: block; margin: 10px auto; }
	.projects .project > a.btn { margin: 20px auto; }
		.projects .project > a+a.btn { margin-top: 30px; }
		.projects .project > a.btn+a.btn { margin-top: 40px; }
	.projects .project .tool-thumbnails img { max-width: 30%; max-height: 36px; margin-right: 14px; }
	.projects .project .tool-thumbnails img:last-child { margin-right: 0; }
@media all and ( min-width: 760px ){
	.projects .project { width: calc(33% - 13px); vertical-align: top; }
	.projects .project + .project { margin-left: 20px; }
} 

.about { padding: 40px; background-color: rgba(50, 50, 43, 0.9); box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); color: #eee; }
.about h2 { border-bottom: 1px solid rgba(200 ,200, 200 ,0.1); padding-bottom: 20px; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); }
.about > div > p:first-child { font-size: 1.2em; }
@media all and ( min-width: 760px ){
	.about { 
		width: 50%;
	 }
}