@charset "utf-8";
/* ==========================================================================
   Be Mas s.r.l. - foglio di stile principale
   Le regole della prima sezione sono quelle originali del sito ASP,
   conservate perché usate dal contenuto delle pagine.
   La seconda sezione sostituisce la tabella di impaginazione da 929px
   del template Dreamweaver con un layout CSS.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Stili originali
   -------------------------------------------------------------------------- */

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 70%;
	text-align: left;
	background-color: #F9F9F9;
	margin: 0;
	padding: 0;
	border: 0;
	color: #161616;
}
.fotoe {
	border: 0;
}
.foto {
	float: right;
	padding-left: 10px;
	border: 0;
}
h1 {
	font-weight: bold;
	margin: 0;
	font-size: 200%;
	color: #999999;
	padding: 10px 0 5px 10px;
}
.col {
	width: 1px;
	background-color: #F9F9F9;
}
.menu {
	padding: 0 50px 0 0;
	height: 36px;
	line-height: 36px;
	vertical-align: middle;
	text-align: right;
	text-transform: capitalize;
	font-size: 85%;
	color: #FFFFFF;
	background-image: url(../images/fondo-menu2.jpg);
	background-repeat: repeat-x;
	background-color: #107151;
}
.menu1 {
	padding: 2px 0 2px 15px;
	font-size: 110%;
	font-weight: bold;
	text-align: left;
	color: #FFFFFF;
	background-color: #107151;
}
.inmenu {
	font-size: 125%;
}
.continua {
	padding: 2px 10px;
	text-align: right;
}
.footer {
	color: #107151;
	padding: 15px 3px;
	font-weight: bold;
}
a:active, a:hover, a:link, a:visited {
	color: #000000;
	text-decoration: none;
}
a:hover {
	color: #000000;
	text-decoration: underline;
}
a.bianco:active, a.bianco:hover, a.bianco:link, a.bianco:visited {
	color: #FFFFFF;
	text-decoration: none;
}
a.bianco:hover {
	color: #FFFFFF;
	text-decoration: underline;
}
a.bianco2:active, a.bianco2:hover, a.bianco2:link, a.bianco2:visited {
	color: #FFFFFF;
	text-decoration: none;
	margin-left: 30px;
}
a.bianco2:hover {
	color: #FFFFFF;
	text-decoration: underline;
}
a.verde:active, a.verde:hover, a.verde:link, a.verde:visited {
	color: #107151;
	text-decoration: none;
}
a.verde:hover {
	color: #107151;
	text-decoration: underline;
}
.tdc { text-align: center; }
.tdx { text-align: right; }
.tsx { text-align: left; }
.tdverde {
	height: 5px;
	background-color: #007046;
}
.tdverdep {
	height: 1px;
	margin: 0 10px;
	background-color: #007046;
}
.tdgiallo {
	height: 5px;
	background-color: #D89602;
}
.tdrosso {
	height: 5px;
	background-color: #DF1A23;
}
.tddiv {
	color: #FFFFFF;
	padding-left: 10px;
	background-color: #107151;
	font-size: 90%;
	overflow: hidden;
	white-space: nowrap;
}
.titolo {
	font-size: 120%;
	color: #999999;
	font-weight: bold;
	padding: 15px 2px 10px 10px;
}
.testo {
	padding-left: 38px;
	padding-right: 20px;
	line-height: 16px;
	text-align: left;
}
.testoh {
	padding: 25px 15px 25px 10px;
	text-align: justify;
	line-height: 18px;
	font-size: 95%;
	vertical-align: top;
}
.testoi {
	padding: 5px 10px 10px 10px;
	text-align: justify;
	line-height: 18px;
	vertical-align: top;
}
.bordo {
	border: 1px solid #000000;
	padding: 0;
}
.privacy {
	font-size: 80%;
	color: #999999;
	font-weight: normal;
	text-align: justify;
	line-height: 1.5;
	padding: 2px;
}
input, select, textarea {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #646464;
	border: 1px solid #646464;
}

/* --------------------------------------------------------------------------
   2. Impaginazione (sostituisce la tabella 929px del template Dreamweaver)
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

.pagina {
	max-width: 929px;
	margin: 0 auto;
	background-color: #FFFFFF;
}

/* Menù orizzontale */
.menu a.bianco2.attivo { text-decoration: underline; }

/* Banner: slideshow che ha sostituito il filmato Flash */
.banner {
	position: relative;
	width: 100%;
	aspect-ratio: 929 / 292;
	overflow: hidden;
	background-color: #FFFFFF;
	line-height: 0;
}
.banner img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1.2s ease-in-out;
}
.banner img.visibile { opacity: 1; }
/* Senza JavaScript resta comunque visibile la prima immagine. */
.banner img:first-child { opacity: 1; }
.banner img.visibile ~ img { opacity: 0; }

/* Corpo a due colonne */
.corpo {
	display: flex;
	align-items: stretch;
}
.colonna-sx {
	flex: 0 0 204px;
	width: 204px;
}
.colonna-dx {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0;
}
.bordo-menu { display: block; max-width: 100%; height: auto; }

.menu-prodotti {
	list-style: none;
	margin: 0;
	padding: 0;
}
.menu-prodotti .menu1.attivo { background-color: #007046; }
.menu-prodotti a { display: block; }

.colonna-dx img { max-width: 100%; height: auto; }
.colonna-dx iframe { max-width: 100%; border: 0; }
.colonna-dx table { max-width: 100%; border-collapse: collapse; }

/* Gallerie fotografiche.
   Nell'originale erano tabelle con celle vuote come distanziatori: qui
   diventano una griglia che si riadatta da sola al numero di colonne
   che ci stanno. */
.galleria {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 10px;
	margin: 14px 0;
}
.galleria a {
	display: block;
	line-height: 0;
	overflow: hidden;
	background: #EFEFEF;
}
.galleria img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	transition: transform .3s ease;
}
.galleria a:hover img { transform: scale(1.06); }

/* I tre riquadri della home page */
.blocchi-home {
	display: flex;
	gap: 14px;
	padding: 0 10px;
}
.blocchi-home .blocco {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
}
.blocchi-home .titolo {
	margin: 0;
	font-size: 120%;
	color: #999999;
	font-weight: bold;
	padding: 15px 0 10px 0;
}
.blocchi-home .titolo .testoh {
	padding: 0;
	font-size: 100%;
}
.blocchi-home .blocco-foto { margin-top: 10px; }
.blocchi-home .blocco-foto img { width: 100%; height: auto; display: block; }
.blocchi-home .testoh { padding: 25px 0; }

/* Piè di pagina */
.piede {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
	padding: 0 5px;
}
.piede .footer { flex: 1 1 auto; }
.piede .tddx { text-align: right; }

/* --------------------------------------------------------------------------
   3. Adattamento agli schermi piccoli
   -------------------------------------------------------------------------- */

@media (max-width: 760px) {
	body { font-size: 90%; }

	/* L'immagine di sfondo del menù è larga 929px ed è bianca nella metà
	   sinistra: su schermo stretto le prime voci risulterebbero bianche su
	   bianco, cioè invisibili. Si usa il verde pieno. */
	.menu {
		height: auto;
		line-height: 2;
		padding: 6px 10px;
		text-align: center;
		background-image: none;
		background-color: #107151;
	}
	.menu a.bianco2 { margin: 0 8px; display: inline-block; }

	.corpo { display: block; }
	.colonna-sx, .colonna-dx { width: auto; flex: none; }
	.colonna-sx { margin-bottom: 14px; }
	.bordo-menu { width: 100%; }

	.blocchi-home { display: block; }
	.blocchi-home .blocco { margin-bottom: 20px; }
	.blocchi-home .testoh { padding: 15px 0; }

	.galleria { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }

	/* Rete di sicurezza: se restasse qualche tabella di impaginazione,
	   su schermo stretto viene impilata invece di sfondare la pagina. */
	.colonna-dx table,
	.colonna-dx tbody,
	.colonna-dx tr,
	.colonna-dx td {
		display: block;
		width: auto !important;
		height: auto !important;
	}
	.colonna-dx .col { display: none; }

	.piede { display: block; text-align: center; }
	.piede .tddx { text-align: center; padding-bottom: 10px; }
}

/* --------------------------------------------------------------------------
   4. Form contatti
   -------------------------------------------------------------------------- */

.campo-riga { margin-bottom: 10px; }
.campo-riga label {
	display: block;
	font-weight: bold;
	margin-bottom: 2px;
}
.campo-riga input[type="text"],
.campo-riga input[type="email"],
.campo-riga input[type="tel"],
.campo-riga select,
.campo-riga textarea {
	width: 100%;
	max-width: 420px;
	padding: 5px;
	font-size: 13px;
}
.campo-riga textarea { min-height: 90px; }
.campo-riga.errore input,
.campo-riga.errore select,
.campo-riga.errore textarea { border-color: #DF1A23; }
.msg-errore {
	color: #DF1A23;
	font-size: 90%;
	display: block;
	margin-top: 2px;
}
.riquadro-errori {
	border: 1px solid #DF1A23;
	background-color: #FFF4F4;
	padding: 10px 14px;
	margin: 10px 0;
}
.riquadro-errori ul { margin: 6px 0 0 18px; padding: 0; }
.riquadro-ok {
	border: 1px solid #007046;
	background-color: #F1F8F4;
	padding: 14px;
	margin: 10px 0;
}
.bottone {
	background-color: #107151;
	color: #FFFFFF;
	border: 0;
	padding: 9px 26px;
	font-size: 13px;
	font-weight: bold;
	cursor: pointer;
}
.bottone:hover { background-color: #007046; }
/* Trappola per i bot: invisibile agli utenti, compilata dagli automatismi. */
.trappola {
	position: absolute;
	left: -5000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}