/*
 * Versione per telefono e tablet.
 * Tutte le regole sono dentro la media query qui sotto: sopra i 1000px di
 * larghezza (computer) il sito resta esattamente come prima.
 * Il pulsante "Menu" viene creato da js/menu.js ed è nascosto su computer.
 */

.menu-toggle {
	display: none;
}

@media (max-width: 1000px) {

	/* ---------- Impianto generale: niente più larghezze fisse ---------- */
	body {
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
	}
	.container,
	#header,
	#main,
	#mainHome,
	#mainExhibition,
	#mainExhibition2,
	.mainAirport {
		width: auto;
	}
	.container {
		padding: 0 12px;
	}
	#main {
		padding-top: 10px;
	}
	#main img,
	#main iframe {
		max-width: 100%;
	}
	#main img {
		height: auto;
	}

	/* ---------- Testata: logo e pulsante Menu ---------- */
	#wrapper {
		position: relative;
	}
	#header {
		height: auto;
		padding: 20px 0 12px;
	}
	#logo {
		position: static;
		width: auto;
		height: auto;
	}
	#logo img {
		width: 220px;
		height: auto;
	}
	.menu-toggle {
		display: block;
		position: absolute;
		top: 22px;
		right: 0;
		padding: 8px 12px;
		background: #101010;
		color: #E2E4E6;
		border: 1px solid #333;
		font: 14px Verdana, Geneva, sans-serif;
		text-transform: uppercase;
		cursor: pointer;
	}
	.menu-toggle::before {
		content: "\2630  ";
	}

	/* ---------- Menu: elenco verticale che si apre col pulsante ---------- */
	#menu {
		position: static;
	}
	#menu .sf-menu {
		display: none;
		float: none;
		margin: 0 0 10px;
		background: #101010;
		border-top: 1px solid #333;
	}
	#menu.open .sf-menu {
		display: block;
	}
	#menu ul li,
	.sf-menu li,
	.sf-menu li li,
	.sf-menu li li li {
		float: none;
		width: auto;
		margin: 0;
		padding: 0;
		background-image: none;
		border-bottom: 1px solid #262626;
	}
	#menu ul li a {
		padding: 12px 10px;
		font-size: 15px;
	}
	/* i sottomenu sono sempre visibili, rientrati */
	.sf-menu ul,
	.sf-menu li:hover ul,
	.sf-menu li.sfHover ul,
	ul.sf-menu li li:hover ul,
	ul.sf-menu li li.sfHover ul,
	ul.sf-menu li:hover li ul,
	ul.sf-menu li.sfHover li ul {
		position: static !important;
		visibility: visible !important;
		display: block !important;
		opacity: 1 !important;
		width: auto !important;
		margin-left: 0 !important;
		padding-left: 16px;
		top: auto;
		left: auto;
	}
	.sf-menu li li {
		font-size: 14px;
	}
	.sf-menu li li:last-child {
		border-bottom: 0;
	}
	.sf-sub-indicator {
		display: none;
	}
	/* le voci che sono solo titoli di gruppo (Catalogue, Paintings, ...) */
	#menu a[href="#"] {
		color: #888;
		cursor: default;
	}

	/* ---------- Percorso (breadcrumb) e titoli ---------- */
	#breadC {
		position: static;
		width: auto;
		height: auto;
		margin-bottom: 10px;
	}
	#main h1 {
		padding-left: 0 !important;
	}

	/* ---------- Riquadri di contenuto ---------- */
	.boxExhibition,
	.boxArticolo,
	.boxGallery,
	#mainExhibition2 .boxArticolo,
	#mainExhibition2 .boxGallery,
	.mainAirport .boxArticolo,
	.boxGalleryAirport {
		width: auto;
		float: none;
		box-sizing: border-box;
	}
	.boxGallery,
	#mainExhibition2 .boxGallery {
		padding: 15px 5px;
	}
	.shadowExhibition {
		width: auto;
		background-size: 100% auto;
	}

	/* Elenchi Exhibition / Press / Honors: immagine sopra, testo sotto */
	.boxExhibition {
		padding-bottom: 40px;
	}
	.boxExhibition img {
		float: none;
		display: block;
		margin: 0 auto 12px;
	}
	.textExhibition,
	.textExhibition[style] {
		width: auto;
		float: none !important;
	}
	.dettagli {
		font-size: 11px;
	}

	/* Testi di articoli e biografia più leggibili */
	.textArticolo p {
		font-size: 14px;
		line-height: 1.55;
	}
	.textArticolo h1,
	#mainExhibition .textArticolo h1 {
		font-size: 22px;
	}

	/* ---------- Gallerie di miniature: centrate, su più colonne se c'è spazio ---------- */
	.boxGallery,
	.boxGalleryAirport {
		text-align: center;
	}
	.fotoBox {
		float: none;
		display: inline-block;
		vertical-align: top;
		height: auto;
		margin: 0 4px 18px;
	}

	/* Pagine con miniature più grandi (book-sealand.html ha uno stile suo): mai più larghe dello schermo */
	body #mainExhibition2 .boxGallery,
	body #mainExhibition2 .boxArticolo {
		padding-left: 15px;
		padding-right: 15px;
	}
	body .boxGallery .fotoBox,
	body .boxGallery .fotoContainer {
		max-width: 100%;
		box-sizing: border-box;
	}
	body .boxGallery .fotoBox {
		margin: 0 4px 18px;
	}

	/* ---------- Biografia ---------- */
	#mainHome img {
		float: none;
		display: block;
		margin: 0 auto;
		padding: 10px 0;
	}
	#boxBio {
		float: none;
		width: auto;
	}

	/* ---------- Libro Terre di Mare ---------- */
	.book-intro {
		margin-top: 20px !important;
	}
	.book-cover {
		float: none !important;
		width: auto !important;
		margin-right: 0 !important;
	}
	.book-cover img {
		width: 100% !important;
	}
	.book-text {
		text-indent: 0 !important;
		text-align: left !important;
		font-size: 14px;
	}

	/* ---------- Contatti ---------- */
	.boxContatti form {
		width: auto;
	}
	.boxContatti table {
		width: 100% !important;
		height: auto !important;
	}
	.boxContatti input[type="text"],
	.boxContatti input[type="email"],
	.boxContatti textarea {
		width: 100%;
		box-sizing: border-box;
		font-size: 16px; /* evita lo zoom automatico su iPhone */
	}
	.boxContatti td {
		display: block;
		text-align: left;
	}
	.boxContatti td:empty {
		display: none;
	}
	.boxContatti input[type="submit"] {
		padding: 8px 24px;
		font-size: 16px;
	}

	/* ---------- Video Umbria TV ---------- */
	#video {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 620 / 350;
		margin-top: 10px;
	}

	/* ---------- Pulsante SINGULART in home ---------- */
	#main > div[style*="960px"] {
		width: auto !important;
	}

	/* ---------- Footer ---------- */
	#footer {
		height: auto;
		background-size: auto 100%;
	}
	#shadow {
		height: auto;
		padding-bottom: 20px;
	}
	#shadow p {
		padding: 15px 0 0;
		line-height: 1.5;
	}
	.footerSx,
	.footerCx {
		float: none;
		width: auto;
		height: auto;
		margin-top: 0;
		padding: 15px 0 0;
		border: 0;
	}
}