body {
	font-family: 'Gentium Basic', serif;
	color: #444;
	line-height: 150%;
	margin: 0;
	padding: 0;
	background-color: #888;
	text-align: justify;
}

h1, h2 {
	font-variant: small-caps;
	text-align: center;
	color: black;
	padding: 0.4em;
}

h3, h4 {
	font-variant: small-caps;
	width: 17em;
	max-width: 60%;
	padding-top: 0.4em;
	padding-left: 0.5em;
	color: black;
	border-bottom: 0.15em solid #999;
}

p { margin: 0.5em; }

p.quote {
	text-align: right;
	font-style: italic;
	font-size: 80%;
}

p.author {
	text-align: right;
	font-size: 80%;
}

table {border-spacing: 0.5em;}

td, th {vertical-align: top;}

th {
	font-variant: small-caps;
	text-align: left;
	color: black;
}

a:link {
	color: blue;
	text-decoration: none;
}

a:visited {
	color: #00008b;
	text-decoration: none;
}

a:hover {text-decoration: underline;}

address {
	font-style: italic;
	font-variant: small-caps;
}

img {

}

img.left {
	margin: 0;
	padding: 0;
	max-width: 35%;
	transition: all linear 0.15s;
	margin: 1em 2em;
	box-shadow: 0 0 1em black;
	float: left;
}

img.right {
	margin: 0;
	padding: 0;
	max-width: 35%;
	transition: all linear 0.15s;
	margin: 1.5em 2em;
	/*box-shadow: 0 0 1em black;*/
	float: right;
	/*width: 20%;*/
	/*max-width: 60%;*/
  /*height: auto;*/
}



.imgContainer{
	height: auto;
	/*padding: 5px;*/
  float:left;
  width: 31.33%;
}
.image123::after {
  content: "";
  clear: both;
  display: table;
}

#wrapper {
	background-color: white;
	padding: 1.5em;
	margin: 0 auto;
	width: 80%;
	max-width: 55em;
	box-shadow: 0 0 1em black;
}

#navbar li.title { display: none; }

#navbar ul {
	background-color: #333;
	box-shadow: 0 0 1em black;
	text-align: center;
	list-style-type: none;
	margin: 0;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 0;
}

#navbar li {
	width: 50%;
	float: left;
	margin: 0;
}

#navbar a {
	display: block;
	text-align: center;
	padding: 0.1em;
	color: white;
	text-decoration: none;
	text-transform: uppercase;
	transition: color linear 0.6s;
	transition: background-color linear 0.3s;
}

#navbar a:hover {
	background-color: #ffe;
	color: #2f4f4f;
}


#footer {
	border-top: 0.2em #999 solid;
	padding: 0.5em;
	padding-top: 1.3em;
	text-align: center;
}

#footer img {
	border: 0;
	margin: 0;
	padding: 0.1em;
	width: 2.5em;
}

#footer img:hover {filter: invert(100%);}

#last_update {
	font-size: 85%;
	text-align: right;
	padding-bottom: 2em;
}

@media screen and (min-width: 76em) {
	#navbar ul {
		top: 0;
		right: auto;
		bottom: 0;
		padding: 1em;
		width: 7em;
	}
	
	#navbar li {
		width: 7em;
		float: none;
	}
	
	#navbar li.title {
		display: inherit;
		color: #bbb;
		text-transform: uppercase;
		padding-bottom: 1em;
		padding-top: 1em;
	}
	
	#footer {
		padding: 2.5em 1em;
		background-color: #333;
		box-shadow: 0 0 1em black;
		border-top: 0;
		position: fixed;
		bottom: 0;
		right: 0;
		top: 0;
		width: 7em;
	}
	
	#last_update {
		color: white;
		padding: 1em;
		width: 8em;
		position: fixed;
		bottom: 0;
		right: 0;
		line-height: 110%;
		text-align: center;	
	}
}