@import url('https://fonts.googleapis.com/css?family=Volkhov');

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
{
	display: block;
}

html, body
{
	margin: 0;
	border: 0;
	/* shorthand top/bottom and left/right */
	/* padding: 2em 2em; */
	
	font-family: 'Volkhov', serif;
	font-weight: 300;
	/* generally 16pt */
	font-size: 100%;
	
	color: #231717;
	background-color: #C1BDBC; 
	
	/* uncomment this to ease everything */
	transition: all .2s ease;
	/* transition: background-color, padding .5s ease; */
	
	text-align: left;
}	

a
{
	font-size: 1.25em;
	font-weight: 300;
	font-family: 'Volkhov', serif;
}
	
h1
{
	font-size: 1.6em;
	font-weight: 800;
	font-family: 'Volkhov', serif;
}

h2
{
	font-size: 1.4em;
	font-weight: 800;
	font-family: 'Volkhov', serif;
}

h3
{
	font-size: 1.6em;
	font-weight: 300;
	font-family: 'Volkhov', serif;
	text-align: center;
}		
	
p
{
	padding: 0;
	margin: 0;
	font-size: 1em;
	font-weight: 100;
	font-family: 'Volkhov', serif;
}

img
{
	width: 100%;
}


/* clearfix for wrapper and floating div stuff */
.cf:before, .cf:after 
	{ content: ""; display: block; }
.cf:after 
	{ clear: both; }

#wrapper
{
	max-width: 60em;
	margin: 0 auto;
	background-color: #eee;
}

#navigation
{
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
	float: left;
	background-color: #260D0C;
}

#navigation li
{
	display: inline-block;
	width: 33.33%;
	text-align: center;
	/* includes padding for % sizing */
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

#navigation li a
{
	padding: 1.5em 0;
	display: block;
	text-decoration: none;
	font-weight: 500;
	color: #ffffff;
	
}

#navigation li a:hover
{
	padding: 1.5em 0;
	display: block;
	text-decoration: none;
	font-weight: 500;
	font-color: #ffffff;
	background-color: #BA334A;
	transition: background-color .2s ease;
	
}

#footer
{
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
	float: left;
	background-color: #260D0C;
}

#footer li
{
	display: inline-block;
	width: 33.33%;
	text-align: center;
	/* includes padding for % sizing */
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

#footer li a
{
	padding: 1.5em 0;
	display: block;
	text-decoration: none;
	font-weight: 500;
	color: #ffffff;
	
}

#footer li a:hover
{
	padding: 1.5em 0;
	display: block;
	text-decoration: none;
	font-weight: 500;
	font-color: #ffffff;
	background-color: #BA334A;
	
}



#headerimg
{
	width: 100%;
	margin: 0;
	padding: 0;
}

#contentimg
{
	width: 100%;
	margin: 0;
	padding: 0;
}

.onecolumn
{
	width: 33.33%;
	margin: 0;
	padding: 2em;
	box-sizing: border-box;
	float: left;
}

.onecolumncrest
{
	width: 33.33%;
	margin: 0;
	padding: 2em 2em 1em 2em;
	box-sizing: border-box;
	float: left;
	text-align: center;
}

.onecolumncrest img
{
	max-height: 15em;
	width: auto;
	
}

.onecolumntext
{
	width: 33.33%;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	float: left;
	background-color: #eee;
}

.twocolumn
{
	width: 66.66%;
	margin: 0;
	padding: 1em 0em;
	box-sizing: border-box;
	float: left;
}

.twocolumntext
{
	width: 66.66%;
	margin: 0;
	padding: 2em;
	box-sizing: border-box;
	float: left;
}

.threecolumn
{
	width: 100%;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	float: left;
}

.threecolumntext
{
	width: 100%;
	margin: 0;
	padding: 4em;
	box-sizing: border-box;
	float: left;
}		

.divider
{
	width: 100%;
	height: .6em;
	background-color: #BA334A;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	float: left;
}	


@media (max-width: 40.313em){
	.onecolumn
	{
		width: 100%;
		margin: 0;
		padding: 2em;
		box-sizing: border-box;
		float: left;
	}
	
	.onecolumncrest
	{
		width: 100%;
		margin: 0;
		padding: 1em 2em 0em 2em;
		text-align: center;
		box-sizing: border-box;
		float: left;
	}

	.onecolumntext
	{
		width: 100%;
		margin: 0;
		padding: 0em 1.5em 1.5em 1.5em;
		box-sizing: border-box;
		float: left;
		background-color: #eee;
	}

	.twocolumn
	{
		width: 100%;
		margin: 0;
		padding: 1.5em 0em;
		box-sizing: border-box;
		float: left;
	}

	.twocolumntext
	{
		width: 100%;
		margin: 0;
		padding: 1.5em;
		box-sizing: border-box;
		float: left;
	}

	.threecolumn
	{
		width: 100%;
		margin: 0;
		padding: 1.5em 0em;
		box-sizing: border-box;
		float: left;
	}	
	}