/* body text fonts (serif) */
@font-face{
	font-family: Antiqua;
	src: url(fonts/antiqua-regular.ttf);
}
@font-face{
	font-family: Antiqua;
	src: url(fonts/antiqua-italic.ttf);
	font-style: italic;
}
@font-face{
	font-family: Antiqua;
	src: url(fonts/antiqua-bold.ttf);
	font-weight: bold;
}
@font-face{
	font-family: Antiqua;
	src: url(fonts/antiqua-bolditalic.ttf);
	font-style: italic;
	font-weight: bold;
}

/* header, section, and caption fonts (sans-serif) */
@font-face{
	font-family: Serpentine;
	src: url(fonts/serpentine-regular.otf);
}
@font-face{
	font-family: Serpentine;
	src: url(fonts/serpentine-italic.otf);
	font-style: italic;
}
@font-face{
	font-family: Serpentine;
	src: url(fonts/serpentine-bold.otf);
	font-weight: bold;
}
@font-face{
	font-family: Serpentine;
	src: url(fonts/serpentine-bolditalic.otf);
	font-style: italic;
	font-weight: bold;
}

/* alternate font (more designer-style) */
@font-face{
	font-family: Adelle;
	src: url(fonts/adelle-regular.otf);
}
@font-face{
	font-family: Adelle;
	src: url(fonts/adelle-italic.otf);
	font-style: italic;
}

/* text styles */
h1, h2, h3, h4, h5, h6 {
	font-family: Serpentine;
	font-weight: bold;
	color: #007f3e; /* primary color */
	line-height: 1;
}

h3.dept {
	font-family: Adelle;
	font-style: italic;
	color: #007f3e; /* primary color */
	border-bottom: 4px solid #276bad; /* secondary color */
	padding-bottom: 2px;
}

figcaption {
	font-family: Serpentine;
	font-size: 1rem;
	color: #007f3e; /* primary color */
	padding: 2rem 3rem;
}

.contents h1, .contents h2 {
	color: #276bad; /* secondary color */
	font-family: Adelle;
	font-size: 2rem;
	font-style: italic;
}

.title {
	font-variant: small-caps;
}

.author {
	font-style: italic;
	text-align: right;
}

.italic {
	font-style: italic;
}

.italic em {
	font-style: normal;
}


/* sections */
body {
	font-family: Antiqua;
	font-size: 1.25rem;
	line-height: 1.66;
	margin: 0;
	padding: 0;
}

a#header-bar {
	background-color: #007f3e; /* primary color */
	display: block;
	text-decoration: none;
	position: fixed; /* Make it stick/fixed */
	top: 0; /* Stay on top */
	width: 100%; /* Full width */
	transition: top 0.3s; /* Transition effect when sliding down (and up) */
}

a header {
	margin: 0 auto;
	max-width: 720px;
	padding: 1.4rem 0 .6rem;
	width: 100%;
}

a header img {
	display: block;
	float: left;
	height: 3rem;
	margin-top: -.8rem;
}

a header p {
	color: white;
	font: italic bold .8rem arial, sans-serif;
	line-height: 1.25rem;
	margin: 0 4%;
	padding-top: .25rem;
	text-align: right;
}

main {
	max-width: 720px;
	margin: 6.5rem auto 5rem;
}

main header {
	margin: 0 4% 40px;
	border-bottom: 1px solid #276bad; /* secondary color */
}

main header p {
	font-style: italic;
	margin: -15px 0 30px 15px;
}

main header img {
	width: 100vw;
}

main header img.column-logo {
	float: right;
	width: 6vw;
}

article {
	margin: 0 6%;
}

article p:first-child:first-letter {
	color: #007f3e; /* primary color */
	float: left;
	font-size: 7rem;
	line-height: .75;
	padding-top: 0.2rem;
	padding-right: 0.3rem;
	margin-bottom: -0.2rem;
}

aside {
	border-left: 3px dotted #276bad; /* secondary color */
	font-size: 1.1rem;
	line-height: 1.66;
	margin: 3rem 0;
	padding-left: 2rem;
}

footer.article-end {
	background-color: #EEEEEE;
	margin: 2rem 0 0 0;
	padding: 0.5rem 6%;
}

a#footer-bar {
	background-color: #007f3e; /* primary color */
	display: block;
	text-decoration: none;
	text-align: center;
	color: white;
	font: italic bold .8rem arial, sans-serif;
	position: fixed; /* Make it stick/fixed */
	bottom: 0; /* Stay on bottom */
	width: 100%; /* Full width */
}


/* blocks */
figure {
	margin: 3rem 0;
	border: 1px solid #999;
}

img {
	max-width: 100%;
}

img.shadow {
	box-shadow: 0px 5px 20px #999;
}

figure img.shadow {
	max-width: 90%;
	margin: 2rem 5% 0;
}

figure img.shadow:last-child {
	max-width: 90%;
	margin: 0 5% 2rem;
}

hr {
	margin: 5rem 0;
}

.author img {
	margin-top: -2rem;
	width: 16rem;
}

img.end-marker {
	height: 1rem;
	margin-bottom: -1px;
}

.contents {
	margin: 1rem auto;
}

.contents header {
	border: none;
	margin: 1rem 0;
}

.contents .date {
	margin: 0 1rem;
	text-align: right;
}

.contents .article {
	background-color: white;
	border-radius: 1rem;
	box-shadow: 0px 5px 20px #999;
	display: block;
	color: black;
	margin: 2rem 0;
	padding: 1rem 2rem;
	text-align: center;
	text-decoration: none;
}

.contents footer {
	margin: 2rem;
}

.contents footer figure {
	border: none;
	display: grid;
	grid-gap: 2rem;
	grid-template-columns: 1fr 2fr;
	align-items: start;
}

.links {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	width: 100%;
}

.links .btn {
	border-radius: .5em;
	color: white;
	font-family: sans-serif;
	font-size: 18px;
	margin: 0 auto;
	padding: 1em;
	text-decoration: none;
}

.links a img {
	height: 1.25em;
	margin: .25em .5em -.25em 0;
}

.website {
	background-color: #ED1C24;
}

.facebook {
	background-color: #3B5999;
}

@media only screen and (max-width: 720px) {

	main {
		margin-bottom: 3rem;
	}

	.contents header {
		margin: 1rem;
	}

	.contents footer figure {
		display: block;
		padding: 0 2rem;
	}

	.links {
		display: block;
		text-align: center;
	}

	.links .btn {
		border-radius: .5rem;
		display: block;
		font-size: 1rem;
		margin-top: 1rem;
		padding: 1rem;
	}
}