figcaption > h4 {
	margin-top: 0;
}

figure > figcaption {
	margin-top: 0;
	margin-bottom: 2rem;
}

figure > img {
	margin-bottom: 0;
}

ul.sidebar-nav {
	text-align: left;
	/*margin-left: 1.5rem;*/
}

@media only screen and (min-width:48em) {
	ul.sidebar-nav {
		margin-top: 50px;
	}
}

.sidebar-about > h1 {
	line-height: 2rem;
	font-size: 1.8rem;
}

/* Show sidebar photo (top bar on mobile) if on homepage or not on mobile */
/* since photo takes up too much vertical room on mobile */
div.sidebar-about.home {
	display: block;
}

@media only screen and (max-width:36em) {
	div.sidebar-about {
		display: none;
	}
	aside.sidebar {
		padding: 1rem 1rem;
	}
}

/* Link styling */

a {
	text-decoration: underline;
}

/* Links in a paragraph of black text on light background*/
div.post > p > a {
	text-decoration: underline;
	color: #b3555e;
}

div.post > p > a:hover {
	/*color: #137752;*/
	color: #49757a;
}

/* Links in a list of other links on light background*/
ul.posts > li a:hover, div.post > ul a:hover {
	color: black;
/*	font-weight: bold; */
}

.sidebar a:hover {
	color: beige;
	font-weight: bold;
}

.posts a:visited, .post a:visited {
	/*color: #0000CC;*/
	color: purple;
	}

footer {
	color: #222;
	height: 40px;
	width: 100%;
	position: absolute;
	left: 0;
	margin-bottom: 20px;
}

img.thumbnail {
	margin-left: 10px;
	width: 200px;
}

div.thumbnail-container {
	display: flex;
}

.thumbnail-container > * {
	flex: 1 1 0;
}

.thumbnail-container > a {
	flex-basis: 0;
	flex-grow: 1;
	overflow-y: auto;
}

@media only screen and (min-width:48em) {
	footer {
		color: #222;
		height: 40px;
		width: 100%;
		bottom: 0;
		position: absolute;
		left: 0;
	}
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 20px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
}

/* Modal Content (Image) */
.modal-content {
  margin: auto;
  display: block;
  width: 100%;
  max-width: 1200px;
}

.modal-content:hover {
	cursor: pointer;
}

.post > .caption {
	margin-top: 0;
	margin-bottom: 30px;
	line-height: 1.0;
}

video {
	width: 100%;
}

/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
  animation-name: zoom;
  animation-duration: 0.2s;
}

@keyframes zoom {
  from {transform:scale(0)}
  to {transform:scale(1)}
}

figcaption > p {
	margin-top: 5px;
	line-height: 1.2;
}

.post > p {
	line-height: 1.3rem;
}

.copyright {
	font-size: .7rem;
	text-align: center;
}

.my_email {
	font-size: 0.7rem;
	text-align: center;
	color: #222;
}

@media only screen and (max-width:45rem) {
	.img-headshot {
		border: 3px solid #222;
		height: 95px;
		width: 95px;
		margin-right: 0;
		float: left;
	}
	.img-headshot.center {
		 margin-left: inherit;
		margin-right: 1rem;
	}
	.sidebar nav {
		display: inline-block;
		margin-top: 0;
	}
	footer {
		display: none;
	}
	aside.sidebar {
		padding: 0.5rem 0 0 0;
	}
	.content {
		padding-top: 0.5rem;
	}
	.posts > h1:first-child {
		margin-top: 0;
	}
	.posts {
		padding-left: 0;
	}
}

@media only screen and (max-height:27rem) {
	footer {
		display: none;
	}
	aside.sidebar {
		padding: 0.5rem 0 0 0;
	}
	.content {
		padding-top: 0.5rem;
	}
}