/* retro compatibilità per browser che non conoscono HTML5 */
article, section, header, footer, nav, aside, main {
	display: block;
}
body {
	font-family: serif;
	font-size: 1.2em;
	color: gray;
	background-color: white;
	margin: 0;
}
a:link, a:visited {
	color: maroon;
	background-color: white;
	padding: 0 0.1em;
	border-radius: 0.2em;
	text-decoration: none;
}
a:hover, a:focus {
	color: lime;
	background-color: gray;
	text-decoration: underline;
}
a:active {
	color: white;
	background-color: black;
}
/* Galleria flexbox */
.row a:link, .row a:visited {
	background-color: transparent;
	transition: filter 1.0s ease;
}
.row a:hover, .row a:focus {
	/* background-color: transparent;
	text-decoration: none; */
  filter: sepia(100%);
}
/* Galleria flexbox */
a.skipnav {
	color: black;
	background-color: yellow;
	border: 2px solid maroon;
	border-radius: 5px;
	padding: 0.5em;
	font-weight: bold;
	position: absolute;
	top: auto;
	left: -999em;
	width: 1em;
	overflow: hidden;
}
a.skipnav:hover {
    color: red;
}
a.skipnav:focus, a.skipnav:active { /* torna visibile se riceve fuoco o è attivo */
	position: static; /* torna nel flow della pagina ignorando top e left */
	width: auto;
  color: red;
}
header {
  border-bottom: 1px solid maroon;
	font-style: italic;
	border-bottom-left-radius: 0.5em;
	border-bottom-right-radius: 0.5em;
	padding: 0.5em;
  /* text-shadow: 1px 1px 2px black; */
  box-shadow: 0px 5px 10px 0px maroon;
}
header h1 {
    margin: 0;
}
header h2 {
    text-align: right;
	margin: 0;
}
hr {
	margin: 0 1em 0 1em;
	border-bottom: 1px solid #AF844F;
}

section {
  margin-top: 1em;
  padding: 0 1em 0 1em;
}
section h3 {
	color: maroon;
	font-style: italic;
}
section p {
	text-align: left;
}
footer {
  text-align: center;
	font-style: italic;
  padding: 1em;
  box-shadow: 0px -5px 10px 0px maroon;
}

main > p {
	margin-left: 1em;
	margin-right: 1em;
}

.to_top {
  text-align: right;
  margin: 1em;
  font-size: 0.9em;
}
.to_top a {
  padding: 0.1em 0.5em;
  font-size: 1.3em;
}

/* flexbox mostra tutte le immagini start */
.row {
  display: flex;
  flex-wrap: wrap;
  /* padding: 0 4px; */
}
.column {
  flex: 100%;
  /* max-width: 10%; */
  padding: 0 4px;
	text-align: center;
	/* border: 1px solid green; */
}
.column img {
  margin-bottom: 3%;
  vertical-align: middle;
  width: 100%;
	max-width: 250px;
}
/* flexbox mostra tutte le immagini end */

/* Media Queries */
@media screen and (min-width: 330px) { /* width almeno ... o più */
	.column {
	  flex: 48%;
	}
}
@media screen and (min-width: 569px) { /* width almeno ... o più */
	body {
		font-size: 1.1em;
		text-align: justify;
	}
	section {
		text-align: justify;
	}
	.column {
	  flex: 23%;
	}
}
@media screen and (min-width: 1024px) {
	body { /* centra contenuto */
		max-width: 1000px;
		margin: 0 auto;
	}
	section {
	  margin-top: 2em;
	  padding: 0;
	}
}