* { box-sizing: border-box; }
html { font-size: 1rem; scroll-behavior: smooth; }
body {
	font-weight: normal;
	color: Black;
	margin: 0px;
	padding: 0px;
	width: 100%;
	height: 100%;
	font-family: var(--font);
}

/* Tag <a> deve stare prima di <nav> */
a {
	text-decoration: none;
	font-weight: bold;
	color: var(--link);
}
a:hover {
	text-decoration: underline;
	font-weight: bold;
	color: var(--linkhover);
}


/************************/
/* QUI     TESTATA      */
/************************/
/* <header> e' composta tra 3 settori (hellobar, logobar, navbar)
 * ogni settore ha un -contenitore- per centrare e adattare meglio il contenuto
 * ogni -contenitore- contiene oggetti <div> oppure <a> con i vari elementi (items del flex)
 * le parti in comune della testata sono raccolte nella classe -testabar-
 * */
header {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 5;
	width: 100%;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	align-items: stretch;
}
#hellobar { background-color: Silver; }
#logobar { background-color: White; }
#navbar { background-color: WhiteSmoke; border: 1px solid Gainsboro; border-left: 0; border-right: 0; position: relative; }
#promobar { background-image: linear-gradient(to top, Gainsboro, Silver); border-bottom: 1px solid Gray; }

.testabar .contenitore {
	width: 100vw;
	max-width: 1200px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	align-content: center;
	margin: 0 auto;
}
.testabar div { display: inline-block; }
#hellobar .contenitore { padding: 0 15px; height: 26px; } /* padding=0 e stabilire height per gestire meglio il banner */
#logobar .contenitore { padding: 8px 36px; }
#navbar .contenitore { padding: 6px 0; }
#promobar .contenitore { gap: 12px; }

#hellobar a, span#navcar { font-size: small; font-weight: bold; text-decoration: none; color: DimGray; }
#hellobar a:hover { font-size: small; text-decoration: none; color: Black; }
#hellobar img { height: 18px; vertical-align: middle; } /* icone contatti e social */
#hello_contatti {
	display: flex;
	gap: 20px;
	align-items: center;
}
#hello_menu {
	display: flex;
	gap: 12px;
	color: DimGray;
	align-items: baseline;
}
#menulog {
	/* sottomenu a comparsa della voce login - tag ul */
	position: absolute;
	z-index: 1000;
	margin-top: 1px;
	left: -74px;
	width: 222px;
	padding: 0px;
	border: 2px solid Silver;
	border-radius: 12px;
	background-color: WhiteSmoke;
}
#menulog input { width: 94%; }
#menulog li {
	position: relative;
	display: block;
	padding: 10px 8px;
	cursor: pointer;
	font-weight: lighter;
	font-size: medium;
	text-transform: uppercase;
	text-align: center;
	border-bottom: 1px solid Silver;
	color: DimGray;
}
#menulog li:hover { color: Black; background-color: White; }
#menulog li:first-child:hover {
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
}
#menulog li:last-child:hover {
	border-bottom-left-radius: 12px;
	border-bottom-right-radius: 12px;
}


#logobar img { padding: 6px 2px; height: 72px; transition: transform 0.6s; } /* logo azienda */
#logobar img:hover { transform: scale(1.1); } 


/***************************************/
/* QUI    AUTOCOMPLETE RICERCHE        */
/***************************************/
span.boxsuggerimenti {
	/* Mega contenitore */
	position: relative;
	display: inline-block;
	& input { padding-right: 24px; }
	& > span { position: relative; font-size: initial; /* font-size serve per sovrascrivere i th */ }
}
div.boxsuggerimenti {
	/* Elenco dei risultati */
	font-size: small;
	position:absolute;
	margin:0px;
	padding:0px;
	width: 30vw;
	z-index: 1000;
	white-space: normal;
	text-align: left;
}
div.boxsuggerimenti ul {
	border:1px solid Silver;
	border-radius: 7px;
	width: 100%;
	list-style-type:none;
	margin:0px;
	padding:0px;
	background-color: Snow;
	box-shadow: 1px 1px 3px Gray;
}
div.boxsuggerimenti li {
	font-weight: normal;
	display: block;
	padding: 9px 11px;
	cursor: pointer;
	color: var(--testo);
	border-top: 1px solid White;
	border-bottom: 1px solid Gainsboro;
	background-image: linear-gradient(to top, rgba(0,0,0,0.1), Transparent);
	&:hover { 
		background-image: linear-gradient(to top, rgba(0,0,0,0.2), rgba(0,0,0,0.05));
		border-bottom-color: Silver;
	}
	& small { opacity: .5; }
}
div.boxsuggerimenti li:first-child { border-top-width: 0; }
div.boxsuggerimenti li:last-child { border-radius: 0 0 7px 7px; }
div.boxsuggerimenti span.foto_autocomplete {
	display: inline-block;
	display: block;
	float: left;
	width: 35px;
	height: 35px;
	margin-right: 6px;
	border: 2px inset #0005;
	border-radius: 5px;
	background-size: cover;
	background-color: White;
	background-position: center;
	background-repeat: no-repeat;
	box-shadow: 0 0 5px inset #0003;
}
#load_q {
	display: inline-block;
	position: absolute;
	top: -9px;
	right: 3vw;
	& img { height: 36px; }
}


/***************************************/
/* QUI         BARRA MENU              */
/***************************************/

#navbar nav {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	gap: 34px;
}
#navbar nav > div, #navbar nav > a { 
	position:relative; 
	font-size: large; 
	font-weight: normal;
	text-align:center; 
	text-decoration: none; 
	color: DimGray; 
	cursor: pointer;
}
#navbar nav > div:hover, #navbar nav > a:hover { font-size: large; text-decoration: none; color: Black; }
#navbar nav > div:first-child, #navbar nav > div:hover:first-child { 
	/* Icona catalogo */
	font-size: xx-large; 
	font-weight: lighter;
	line-height: 0;
	transform: scaleX(1.5); 
}
#navbar aside {
	/* Sottomenu a comparsa */
	position: relative;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	border-top: 1px solid Silver;
	width: 100%;
	max-width: 1200px;
	height: 83vh;
	margin: 0 auto;
	padding: 36px 28px 26px;
	font-size: small;
}
#navbar aside a, 
#navbar details {
	font-weight: normal;
	color: DimGray;
	cursor: pointer;
	padding: 8px;
	text-decoration: none;
}
#navbar details a {
	color: DimGray;
	margin-left: 8px;
	padding: 6px;
	display: block;
	text-decoration: none;
}
#navbar aside a:hover,
#navbar details:hover,
#navbar details a:hover {
	color: Black;
	text-decoration: none;
}



.tit_nav_aside {
	position: absolute;
	top: 10px;
	left: 10px;
	font-size: small;
	font-weight: lighter;
	color: DarkRed;
}
.chiudi_nav_aside, .chiudi_avviso_modale {
	position: absolute;
	right: 10px;
	font-size: medium;
	font-weight: lighter;
	color: DarkRed;
	cursor: pointer;
}
.chiudi_nav_aside:hover, .chiudi_avviso_modale:hover { color: Black; }
.chiudi_nav_aside::after, .chiudi_avviso_modale::after { content: "\2A09 \2009 Chiudi"; }
.chiudi_nav_aside1, .chiudi_avviso_modale { top: 7px; }
.chiudi_nav_aside2 { bottom: 12px; }

#qta_carrello {
	border: 1px solid white;
	border-radius: 100%;
	color: White;
	font-size: x-small;
	padding: 1px 5px;
	background-color: #900;
}
#account {
	/* serve per mettere i form fuori dal flusso e non dare fastidio alla grafica */
	display:inline;
	visibility:hidden;
	position: absolute;
	top: 0px;
	left: 0px;
	margin: 0;
	padding: 0;
}

#ricerca, #ricerca form { display: flex; }
#ricerca input {
	background-color: WhiteSmoke;
	border: 2px solid Silver;
	border-right: 0;
	border-radius: 50px 0px 0px 50px;
	margin: auto;
	padding: 8px 24px;
	width: 30vw;
	font-size: medium;
}
#ricerca button {
	background-color: Silver;
	border-radius: 0px 50px 50px 0px;
	margin: auto;
	padding: 0px 18px 6px 12px;
	cursor: pointer;
	color: DarkRed;
	line-height: 0;
	height: 35px;
	text-shadow: -1px -1px 1px rgba(255,255,255,0.5);
}
#ricerca button:hover {
	background-color: Red;
	color: WhiteSmoke;
	text-shadow: -1px -1px 1px rgba(0,0,0,0.5);
}
#ricerca button span { font-size: 36px; display: inline-block; transform: scaleX(-1); }

#topnav {
	position: absolute;
	width: 70%;
	padding: 0 15%;
}
#topnav, #subnav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
}
#subnav {
	padding: 20px;
}
#topnav div, #subnav div {
	margin: 6px;
	border-radius: 40px;
	cursor: pointer;
}
#topnav div {
	padding: 5px 16px 5px 8px;
	background-color: Gainsboro;
	border: 1px solid Silver;
	color: DarkRed;
	text-shadow: 1px 1px 0px White;
	font-size: 0.9rem;
}
#topnav div:hover {
	background-color: Silver;
	border: 1px solid Gray;
}
#subnav div {
	padding: 4px 14px 3px 6px;
	background-color: Gainsboro;
	border: 1px solid Silver;
	color: Black;
	text-shadow: 1px 1px 0px Gainsboro;
	font-size: 0.8rem;
}
#subnav div:hover {
	background-color: rgba(0, 0, 0, 0.2);
	border: 1px solid Gray;
}
#subnav p {
	display: inline-block;
	margin: 5px;
	padding: 0px 5px 2px;
	background-color: rgba(0, 0, 0, 0.2);
	color: White;
	font-size: 0.7rem;
	text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.8);
	border: 1px inset rgba(255, 255, 255, 0.7);
	border-radius: 50%;
}
#subnav span {
	display: inline-block;
}

#promobar .contenitore div {
	display: flex;
	gap: 8px;
	align-items: center;
	font-size: 0.7rem;
  line-height: 0.85rem;
  padding: 6px;
  color: rgba(0,0,0,0.65);
  cursor: pointer;
}
#promobar .contenitore div:hover { color: Black; }
#promobar .contenitore div b { font-size: larger; }
#promobar .contenitore div img { opacity: 28%; height: 25px; }



/************************/
/* QUI     TAG VARI     */
/************************/
main {
	position: relative;
	width: 100%;
	margin: auto;
	padding: 22px 2vw 55px 2vw;
}
mark { display: none; } /* Tag usato per nascondere i markup necessari al motore di ricerca ma inutili per gli utenti */
u { text-decoration: underline double LimeGreen; }
th { color: Black; font-size: 0.9rem; }
td { color: Black; }
h1, h1.home {
	font-weight: lighter;
	font-size: large;
	margin: 5px;
	padding: 10px;
	display: block;
	border-bottom: 1px solid Silver;
}
h2, h2.home {
	font-weight: normal;
	font-size: medium;
	margin: 0;
	padding: 0;
}
h3, h3.home {
	font-weight: normal;
	font-size: large;
	margin: 5px;
	padding: 10px;
	display: block;
	border-bottom: 1px solid Silver;
}
h1, h2, h3 { color: var(--colore1); }
input, textarea, select {
	padding: 7px 11px;
	border-radius: 4px;
	border:1px solid Silver;
	box-sizing: border-box;
}
.tabella {
	box-sizing: border-box;
	border: 0;
	border-radius: 5px;
  box-shadow: 2px 2px 5px Gainsboro;
	text-align: center;
	border-collapse: separate;
	border-spacing: 3px;
	width: 94%;
	max-width: 1100px;
}
.mezzatabella {
	width: 98%;
	max-width: 450px;
}
.tabella th, .tabella td {
	white-space: nowrap;
	empty-cells: show;
	border-radius: 3px;
	padding: 9px 14px;
}
.tabella th {
	background-image: linear-gradient(to bottom, WhiteSmoke, Gainsboro);
	text-align: center;
	border: 0;
}
.tabella td {
	border: 1px solid Gainsboro;
	background-image: linear-gradient(to top, White, WhiteSmoke);
}
.tabella tfoot td {
	background-image: linear-gradient(to top, WhiteSmoke, Gainsboro);
	text-align: right;
	border: 0;
}
.tab_vert {
	margin: 25px;
	width: 95%;
	max-width: 550px;
}
.tab_vert th {
	text-align: left;
	padding: 8px;
}
.tab_vert td {
	text-align: left;
	padding: 8px;
}
.dx, th.dx, tfoot td.dx { text-align: right; }
.sx, th.sx, tfoot td.sx { text-align: left; }
.cx, th.cx, tfoot td.cx { text-align: center; }
.um { font-size: small; }

h2.sfogliacatalogo { color: Gray; }
section.sfogliacatalogo {
	color: Black;
	text-align: center;
	margin: 25px;
}
.path_cat {
	font-size: small;
	padding: 4px;
	margin-left: 15px;
	color: rgba(0,0,0,0.5);
}
.path_cat img {
	width: 16px;
	height: 16px;
	vertical-align: text-bottom;
	text-shadow: 0 0 1px Black;
}
.path_cat a {
	text-decoration: none;
	font-size: small;
}
.path_cat_codart {
	color: rgba(0,0,0,0.7);
	font-weight: bold;
	font-size: small;
}
.sottocat {
	position: relative;
	width: 100%;
	margin: 0px;
	padding: 0px 25px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0px 55px;
}
.sottocat div,
h3.esempi_in_sottocat span {
	position: relative;
	width: 200px;
	height: 200px;
	padding: 15px;
	margin: 40px auto;
	border: 1px solid Silver;
	border-radius: 15px;
	background-color: WhiteSmoke;
	color: #858585;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-content: center;
	align-items: center;
}
.sottocat div:hover,
h3.esempi_in_sottocat span {
	color: #000000;
	background-color: #FFFA5A;
}
.sottocat h3 {
	position: absolute;
	top: -24px;
	border: 0px;
	margin: 0;
	padding: 0;
	text-align: center;
	font-size: small;
	font-weight: 300;
	white-space: nowrap;
}
.sottocat p {
	position: relative;
	text-align: center;
	font-size: x-large;
	font-weight: 300;
	margin: 0;
	padding: 0;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	transition: .3s;
}
.sottocat p:hover {
	transform: scale(1.2);
}

.paragrafo {
	text-align: justify;
	font-size: 0.9rem;
	line-height: 1.4rem;
	margin: 0.6rem 1.4rem 0.4rem;
}
.apartireda {
	display: inline-block;
	margin: auto 7px;
	font-size: small;
}
.apartireda::after {
	content: "a partire da";
}

.ico-disp { display: inline-block; cursor: help; font-size: large; }
.ico-disp-catalogo { display: inline-block; cursor: help; font-size: xx-small; vertical-align: middle; }

div.fieldset { text-align: center; }
div.fieldset fieldset {
	margin: 50px auto;
	width: 96%; 
	max-width: 600px; 
	padding: 2%;
	border-radius: 20px;
	border: 2px solid GreenYellow;
}
div.fieldset legend {
	padding: 0 3%;
	color: ForestGreen;
	font-weight: bold;
}



/************************/
/* QUI      SCHEDA      */
/************************/
#scheda {
	position: relative;
	margin: 15px 0 155px;
	display: grid;
	grid-template-columns: 40% 60%;
	grid-template-rows: auto auto;
	grid-column-gap: 16px;
	grid-row-gap: 36px;
	grid-template-areas:
  "foto cta"
  "dettagli dettagli";
  justify-items: stretch;
}
#scheda aside:nth-child(1) { text-align: center; grid-area: foto; }
#scheda aside:nth-child(2) { text-align: left; grid-area: cta; }
#scheda section:nth-child(3) { text-align: left; grid-area: dettagli; }
.sottotitolo_scheda {
	/* Titolo 2 box scheda */
	position: relative;
	margin: 30px 5px 5px 10px;
	font-size: x-large;
	font-weight: bold;
	text-align: left;
}
.dati_aggiuntivi_scheda {
	margin-top: 50px;
}
.dati_aggiuntivi_scheda caption {
	padding: 8px;
	background-color: Gainsboro;
	color: DimGray;
}
.dati_aggiuntivi_scheda th, .dati_aggiuntivi_scheda td {
	padding: 7px;
	border: 1px solid Gainsboro;
	empty-cells: show;
}
.dati_aggiuntivi_scheda th {
	font-size: small;
}
.marchio-scheda { text-align: left; margin: 30px 15px; }
.marchio-scheda img { max-height: 65px; }
.marchio-scheda figcaption { display: block; padding: 3px; font-style: italic; font-size: small; color: rgba(0,0,0,0.7); }

.fotoBIG {
	width: 98%;
	height: 440px;
	position:relative;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	margin: 11px;
	text-align: center;
	cursor: zoom-in;
}
.row {
	max-width: 95%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.column {
	width: 120px;
	height: 140px;
	background-color: White;
	border: 4px solid White;
}

.column2 {
	width: 165px;
	height: 110px;
	border: 4px solid White;
	background-color: Black;
}
.mySlides {
	height: 650px;
	border:2px solid #4A4A4A;
}
.numbertext {
	color: #f2f2f2;
}
.caption-container {
	background-color: black;
	color: white;
}
.qta_scheda {
	display: inline-flex;
	align-items: center;
	margin: 20px 40px 20px 10px;
}
.qta_scheda button {
	padding: 8px 18px;
}
.qta_scheda input {
	padding: 14px 11px;
}
.prezzo_scheda {
	display: inline-block;
	font-weight: normal;
	font-size: xx-large;
	margin: 20px 30px 20px 10px;
}
.pesonetto {
	font-size: 1.1rem;
	color: Gray;
	margin-right: 22px;
}
.pesonetto:before {
	content: "/";
	margin-right: 12px;
}

.note_appese { font-size: small; margin-left: 25px; }

#varianti {
	/* Taglie e Colori */
	font-size: medium;
	color: DimGray;
	font-weight: normal;
	margin-bottom: 14px;
	display: flex;
	flex-wrap: wrap;
	gap: 50px;
	justify-content: start;
}
span.variante_voce {
  display: inline-block;
  cursor: pointer;
  padding: 7px 14px;
  box-sizing: border-box;
  border: 1px solid Silver;
  border-radius: 25px;
  color: rgba(0,0,0,0.6);
  font-size: large;
  background-color: White;
  -webkit-transition: .4s;
  transition: .4s;
}
span.variante_voce:hover {
  background-color: Gainsboro;
  color: Black;
}
input.variante_voce { display: none; }
input.variante_voce:checked + span.variante_voce {
  background-color: #666666;
  box-shadow: 0px 0px 22px inset Black;
  color: White;
  border: 1px solid Black;
}
.variante_nota {
  font-size: medium;
  color: rgba(0,0,0,0.6);
}


.tasto, button {
	position: relative;
	display: inline-block;
	border: 0;
	border-radius: 7px;
	padding: 12px 24px;
	margin: 17px 7px;
	font-weight: normal;
	font-size: 1.2rem;
	text-align: center;
	font-family: var(--font);
	background-color: var(--colore1);
	color: White;
	text-decoration: none;
	cursor: pointer;
	transition: color 0.4s, text-shadow 0.4s;
}
.tasto:hover, button:hover {
	color: White;
	font-weight: normal;
	text-decoration: none;
	text-shadow: 0px 0px 1px White;
	background-image: linear-gradient(to top, rgba(0,0,0,0.4), rgba(0,0,0,0.3));
}
.tasto_cta {
	/* Click To Action - il tasto piu importante della pagina */
	width: 90%;
	max-width: 280px;
	border: 2px solid var(--cta_bordo);
	background-color: var(--cta_sfondo);
	color: var(--cta_testo);
	text-shadow: 1px 1px 1px var(--cta_ombra);
}
.tasto_cta:hover {
	background-image: linear-gradient(to top, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.1));
}
.tasto_cta::before {
	/* Mostra una freccia che si muove per mettere in evidenza */
	content: '\276F';
	color: rgba(255, 255, 255, 0.4);
	text-shadow: none;
	left: -10px;
	margin: 5px;
	position: relative;
	animation: anima_cta 0.8s linear alternate infinite; 
}
@keyframes anima_cta {
  from { left: -10px; }
  to   { left: 0px; }
}
.tasto_acquista::after { content: "Aggiungi al carrello"; }
.tasto_riacquista::after { content: "Acquista di nuovo"; }
.tasto_chiedinfo::after { content: "Richiedi INFO"; }
.tasto_avvisa::after { content: "\2709  Avvisami quando disponibile"; }
.tasto_ricerca::before { content: url('/images/ico_cerca.png'); }
.tasto_ricerca::after { content: "Ricerca altro"; padding-left: 10px; }
.tasto_simili { font-size:small; text-align:left; }
.tasto_compatto { font-size:small; padding: 5px 12px; border-radius: 5px; }

.box_cond_vend {
	position:relative;
	display: block;
	padding: 8px 12px 8px;
	margin: 15px;
	border: 1px solid Gainsboro;
	border-radius: 9px;
	width: 93%;
	max-width: 500px;
	text-align: left;
	font-size: small;
	color: #585555;
	background-color: White;
}
.box_cond_vend a {
	font-size: x-small;
}
.box_cond_vend ul {
	padding: 0;
	margin: 0;
}
.box_cond_vend li {
	list-style-type: none;
	padding: 2px;
}

.foto_simili div {
	border: 0px solid #496EC3;
	float: left;
	border-radius: 10px;
	background-color: White;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
	margin: 7px auto;
	margin: 14px 13px 9px 0px;
	text-align: center;
	width: 70px;
	height: 70px;
}
.foto_simili div:last-child {
	margin-right: 0px;
}



/****************************/
/* QUI    TABs in SCHEDA    */
/****************************/
div.tab {
	overflow: hidden;
	border: 0px;
	margin-left: 10px;
	display: inline-block;
}
div.tab button {
	background: linear-gradient(to top, DarkGray 0%, Silver 30%, Gainsboro 100%);
	float: left;
	border: none;
	border-left: 1px solid Snow;
	border-right: 1px solid DarkGray;
	border-radius: 0;
	text-shadow: none;
	cursor: pointer;
	margin: 0;
	padding: 12px 16px;
	transition: 0.3s;
	color: Black;
	font-size: small;
	font-weight: normal;
}
div.tab button:first-child {
	border-left: 1px solid Silver;
	border-radius: 9px 0 0 0;
}
div.tab button:last-child {
	border-right: 1px solid Silver;
	border-radius: 0 9px 0 0;
}
div.tab button:hover {
	color: Black;
	background: linear-gradient(to top, Gray, Silver);
}
div.tab button.active {
	color: Black;
	border: 1px solid Silver;
	border-bottom: 0;
	background: linear-gradient(to top, White, White);
  font-weight: bold;
  cursor: default;
}
.tab_contenuto {
	display: none;
	margin-top: -5px;
	padding: 24px 24px 40px 30px;
	border: 1px solid Silver;
	background-color: White;
	border-radius: 5px;
	-webkit-animation: fadeEffect 1s;
	animation: fadeEffect 1s; 
}
@-webkit-keyframes fadeEffect {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes fadeEffect {
	from { opacity: 0; }
	to   { opacity: 1; }
}
#tab_dettagli p {
	font-weight: normal;
	font-size: 0.9rem;
	text-align: justify;
	line-height: 1.4rem;
	color: Black;
	margin: 1.2rem 0.9rem 0.4rem 1.4rem;
}



/************************/
/* QUI  CARRELLO/ORDINI */
/************************/
.salvacarrello { text-align: center; }
.salvacarrello input { margin: 12px auto; width: 80%; }
.salvacarrello button { font-size: small; font-weight: bold; margin: auto; padding: 6px 12px; }
.salvacarrello small { color: DarkGreen; }



/************************/
/* QUI  STORICO ORDINI  */
/************************/
table.tabella_ordinadinuovo {
	width: 99%;
	border-spacing: 15px;
}
table.tabella_ordinadinuovo td {
	padding: 15px;
}
table.tabella_ordinadinuovo td.fotocatalogo {
	padding: 0px;
	border-radius: 0;
}
table.tabella_ordinadinuovo .tasto_riacquista {
	margin: 0px;
}





/************************/
/* QUI     RIBBON       */
/************************/
.ribbonbox {
	position: absolute;
	z-index: 0;
	margin: 0px;
	margin-left: -20px;
	top: -15px;
}
.ribbon {
	position: relative;
	z-index: 0;
	padding: 7px 1px 9px 11px;
	margin: 0px;
	margin-bottom: 15px;
	color: White;
	background: #666;
	text-shadow: 0px 1px 2px Black;
	-webkit-box-shadow: 0px 2px 4px #888;
	box-shadow: 0px 2px 4px #888;
	font-weight: bold;
}
.ribbonbig {
	margin-left: -28px;
	width: 145px;
	font-size: 0.7rem;
}
.ribbonsmall {
	width: 120px;
	font-size: 0.55rem;
}
.ribbon::after {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: 0px;
	top: 100%;
	border-width: 5px 10px;
	border-style: solid;
	border-color: #666 #666 transparent transparent;
}
.offerta { background: linear-gradient(to bottom, #F70505 0%, #8F0808 100%); }
.novita { background: linear-gradient(to bottom, #2989D8 0%, #1D4699 100%); }
.vetrina { background: linear-gradient(to bottom, #9BC90D 0%, #67940C 100%); }


/************************/
/* QUI   BOX PRODOTTI   */
/************************/
.catalogo, .mappa_prodotti {
	position: relative;
	width: 99%;
	text-align: center;
	padding: 10px 0px 10px 0px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.mappa_prodotti {
	justify-content: flex-start;
	padding: 0px;
	margin-bottom: 22px;
}
.catalogo > div, .mappa_prodotti > div {
	margin: 25px;
	width: 190px;
	cursor: pointer;
}
.fotocatalogo, .fotocatalogokit, .fotocarrello {
	position: relative;
	height: 230px;
	padding: 8px;
	width: 100%;
	overflow: hidden;
}
td.fotocatalogo {
	width: 100px;
	height: 90px;
}
.fotocatalogo span, .fotocatalogokit span, .fotocarrello span {
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	height: 100%;
	width: 100%;
	margin-left:auto;
	margin-right:auto;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	transition: transform .3s, opacity .4s;
}
.fotocatalogo .foto2, .fotocatalogokit .foto2, .fotocarrello .foto2 {
	opacity: 0;
}
.fotocatalogo:hover .foto1, .fotocatalogokit:hover .foto1, .fotocarrello:hover .foto1 {
	opacity: 0;
}
.fotocatalogo .foto2:hover, .fotocatalogokit .foto2:hover, .fotocarrello .foto2:hover {
	transform: scale(1.2);
	opacity: 1;
}
.fotocatalogokit {
	width: 120px;
	height: 110px;
	margin-right: 35px;
}
.fotocatalogokit:first-child::before {
	display: none;
}
td.fotocarrello {
	background-color:white;
	background-image:none;
	width: 120px;
	height: 100px;
	text-align: center;
}
.fotocarrello span {
	width: 98%;
	height: 94%;
	margin: 2%;
}
.titolocatalogo {
	padding: 8px;
	margin-top: 9px;
	width: 100%;
	text-align: center;
	transition: opacity 1s;
}
.titolocatalogo:hover {
	opacity: 0.8;
}
.titolocatalogolink {
	display: inline-block; 
	margin: 22px auto;
	color: #000000;
	font-weight: normal;
	/* in caso di titoli lunghi mostro solo i primi due righi */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.titolocatalogolink:hover {
	text-decoration: none;
	font-weight: normal;
	color: Black;
	text-shadow: 0 0 1px Black; /* ingrosso un po' i contorni, con il grassetto va a capo */
}
.prezzocatalogo {
	position: relative;
	color: Black;
	font-weight: normal;
	font-size: xx-large;
}
.noprezzo {
	position: relative;
	display: inline-block;
	text-decoration: line-through;
	text-decoration-color: var(--colore1);
  text-decoration-thickness: 1px;
	font-size: x-large;
}
.risparmio {
	position: absolute;
	top: -38px;
	right: -58px;
	display: inline-block;
	border-radius: 50%;
	background-color: DarkOrange;
	border: 7px solid White;
	outline: 1px solid Gainsboro;
	width: 60px;
	height: 60px;
	text-align: center;
	transform: rotate(18deg);
}
.risparmio span {
	position: absolute;
	top: 50%;
	display: inline-block;
	color: White;
	font-weight: bolder;
	font-size: x-large;
	transform: translate(-50%,-50%);
}
.risparmio small {
	font-size: x-small;
}
.offerta_perc {
	display: inline-block;
	padding: 5px;
	margin-bottom: 24px;
	border: 3px dotted SteelBlue;
	border-color: var(--colore1);
	width: 99%;
	text-align: center;
	border-radius: 14px;
	background-color: rgba(0,0,0,0.1);
}
.offerta_perc b {
	font-size: 1.35em;
}
.offerta_perc::before {
	content:"";
	width:0;
	height:0;
	position: absolute;
	margin-top: -22px;
	left: 50%;
	border-left:17px solid transparent;
	border-right:17px solid transparent;
	border-bottom:17px solid var(--colore1);
}
.catalogokit {
	position: relative;
	display: flex;
	align-items: center;
	cursor: pointer;
}
.separacatalogokit {
	font-size: xx-large;
	color: DimGray;
	margin-right: 35px;
}
.prezzocatalogokit {
	font-size: x-large;
}
.vedicolore {
	box-sizing: border-box;
	display: block;
	font-size: medium;
	color: Gray;
}
.vedicolore div, .vedicolore a {
	display: inline-block;
  border-radius: 50%;
  vertical-align: middle;
  border: 3px solid WhiteSmoke;
  box-shadow: 1px 1px 4px Gray, 0px 0px 9px inset Black;
  /* Inserisco il titolo nel box colore per i motori di ricerca ma lo nascondo senza usare display:none; */
  line-height: 100px;
  white-space: nowrap;
  overflow: hidden; 
}
.vedicolore div {
  height: 36px;
  width: 36px;
  border-width: 2px;
}
a.vedialtrocolore {
  height: 28px;
  width: 28px;
  cursor: pointer;
}
a.vedialtrocolore:hover {
  border-color: White;
  box-shadow: 1px 1px 5px 1px DimGray;
}




/************************/
/* QUI     CONTATTI     */
/************************/
#contatti_box {
	width: 100%;
	margin: 0;
	padding: 0;
	display: flex;
}
#contatti_map {
	width: 46%;
	margin: 2%;	
}
#contatti_map iframe {
	width: 100%;
	height: 100%;
	border: 1px solid Silver;
}
#contatti_sub {
	width: 46%;
	margin: 2%;	
	text-align: center;
}
#contatti_form {
	width: 100%;
}
#contatti_form input, #contatti_form textarea {
	width: 40%;
	margin: 2%;	
	padding: 2%;
}
#contatti_form input[type=checkbox] {
	width: auto;
	margin: 10px;
	margin-bottom: auto;
	padding: initial;
	box-shadow: 0px 0px 5px Black;
}
#contatti_form input[name='captcha'] {
	background-color: rgba(0, 0, 0, 0.15);
	border: 2px solid var(--colore1);
	width: 140px;
	font-size: x-large;
	text-align: center;
	letter-spacing: 0.4em;
	padding: 14px 18px;
}
#contatti_form textarea {
	width: 90%;
	height: 90px;
}
#contatti_form p, #contatti_form button {
	margin: 2%;	
	padding: 2%;
}
#contatti_form p#rigo_campi_obbligatori {
  padding: 0 34px;
  margin: 8px;
  text-align: left;
  font-size: x-small;
}
#contatti_form p#rigo_privacy {
	display: flex;
  padding-left: 34px;
  padding-right: 36px;
  gap: 7px;
  text-align: left;
}
p#contatti_oggetto {
	position: relative;
	margin: 14px 40px;
	font-size: large;
	padding: 15px;
	padding-left: 36px;
	border: 1px solid LimeGreen;
	border-radius: 8px;
	background-color: #E3E8CC;
	text-align: left;
	display: flex;
/*
	align-items: center;
*/
	justify-content: space-between;
	gap: 10px;
}
p#contatti_oggetto small {
	font-size: small;
	font-weight: bold;
}
p#contatti_oggetto > span:last-child {
	/* Contiene il prezzo */
	font-size: large;
	font-weight: bold;
	border-left: 1px solid LimeGreen;
	padding-left: 15px;
	margin-left: 15px;
	display: flex;
	align-items: center;
}
p#contatti_oggetto::before {
	/* Mostra una freccia che si muove per mettere in evidenza */
	content: '\276F';
	content: '\27E9';
	font-size: xx-large;
	color: LimeGreen;
	top: 8px;
	left: 13px;
	margin: 5px;
	position: absolute;
	animation: anima_contatti_oggetto 0.8s linear alternate infinite; 
}
@keyframes anima_contatti_oggetto {
  from { left: 13px; }
  to   { left: 3px; }
}


/************************/
/* QUI      BANNER      */
/************************/
#banner_body_box, 
#banner_foot_box {
	/* I settori che contengono il box del banner */
	display: flex;
	box-sizing: border-box;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin-top: 20px;
	margin-bottom: 55px;
}
#banner_body_box > div, 
#banner_foot_box > div {
	margin: 18px;
}
#banner_foot_box {
	margin-top: 115px;
}
.bannerslide_head, 
.bannerslide_neck, 
.bannerslide_body,
.bannerslide_foot {
	position: relative;
	margin: 0;
	padding: 0;
	background-color: Transparent;
	box-sizing: border-box;
}
.bannerslide_head div, 
.bannerslide_neck div,
.bannerslide_body div,
.bannerslide_foot div {
	position:relative;
	width: 100%;
	height: 100%;
	text-align: center;
	box-sizing: border-box;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	background-color: transparent;
}
.sfuma_head_desktop, .sfuma_head_mobile,
.sfuma_neck_desktop, .sfuma_neck_mobile,
.sfuma_body_desktop, .sfuma_body_mobile,
.sfuma_foot_desktop, .sfuma_foot_mobile {
	animation: sfuma 12s infinite linear;
}
.sfuma_head_desktop > *:nth-child(1), .sfuma_head_mobile > *:nth-child(1),
.sfuma_neck_desktop > *:nth-child(1), .sfuma_neck_mobile > *:nth-child(1),
.sfuma_body_desktop > *:nth-child(1), .sfuma_body_mobile > *:nth-child(1),
.sfuma_foot_desktop > *:nth-child(1), .sfuma_foot_mobile > *:nth-child(1) {
	animation-delay: 0s;
}
.sfuma_head_desktop > *:nth-child(2), .sfuma_head_mobile > *:nth-child(2),
.sfuma_neck_desktop > *:nth-child(2), .sfuma_neck_mobile > *:nth-child(2),
.sfuma_body_desktop > *:nth-child(2), .sfuma_body_mobile > *:nth-child(2),
.sfuma_foot_desktop > *:nth-child(2), .sfuma_foot_mobile > *:nth-child(2) {
	animation-delay: 4s;
}
.sfuma_head_desktop > *:nth-child(3), .sfuma_head_mobile > *:nth-child(3),
.sfuma_neck_desktop > *:nth-child(3), .sfuma_neck_mobile > *:nth-child(3),
.sfuma_body_desktop > *:nth-child(3), .sfuma_body_mobile > *:nth-child(3),
.sfuma_foot_desktop > *:nth-child(3), .sfuma_foot_mobile > *:nth-child(3) {
	animation-delay: 8s;
}
@keyframes sfuma {
	0% {opacity: 0.0}
  4% {opacity: 1.0}
  33.33% {opacity: 1.0}
  37.33% {opacity: 0.0}
  100% {opacity: 0.0}
}
.nosfuma_head_desktop:hover, .nosfuma_head_mobile:hover,
.nosfuma_neck_desktop:hover, .nosfuma_neck_mobile:hover,
.nosfuma_body_desktop:hover, .nosfuma_body_mobile:hover,
.nosfuma_foot_desktop:hover, .nosfuma_foot_mobile:hover {
	animation: zumma 1s;
	transform: scale(1.05);
}
@keyframes zumma {
	  0% { opacity: 0.6; transform: scale(1.00); }
	100% { opacity: 1.0; transform: scale(1.05); }
}
.jumbo_button, .subjumbo_button {
	position: absolute;
	text-align: center;
	padding: 0;
	margin: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

/* ************************** */
/*  QUI       POP-UP          */
/* ************************** */
.popup {
	position: fixed; 
	z-index: 1000; 
	padding-top: 120px; 
	left: 0;
	top: 0;
	width: 100%;
	height: 100%; 
	overflow: auto; 
	background-color: rgba(0,0,0,0.4); 
}
.popup_contenuto {
	position: relative;
	width: 640px;
	max-width: 80vw;
	background-color: #fefefe;
	margin: auto;
	padding: 8px 30px 15px;
	border: 1px solid #888;
	border-radius: 18px;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
	-webkit-animation-name: animatetop;
	-webkit-animation-duration: 0.4s;
	animation-name: animatetop;
	animation-duration: 0.4s
}
.popup_contenuto > div:first-child {
	display: flex;
	gap: 28px;
	margin: 20px auto;
}
.popup_chiudi {
	margin-top: 25px;
	display: block;
	width: 97%;
	text-align: center;
}
.popup_chiudi button {
	min-width: 300px;
	height: 60px;
	font-weight: 300;
	font-size: medium;
}
#popup_rigo1 {
	font-size: medium;
	color: DimGray;
}
#popup_rigo1 b {
	margin: 6px 0;
	border: 1px solid LimeGreen;
	border-radius: 5px;
	padding: 9px 15px;
	display: block;
	color: Black;
}
@-webkit-keyframes animatetop {
	from {top:-300px; opacity:0}
	to {top:0; opacity:1}
}
@keyframes animatetop {
	from {top:-300px; opacity:0}
	to {top:0; opacity:1}
}







/************************/
/* QUI    RECENSIONI    */
/************************/
#recensioni {
	/* Fascia recensioni */
	box-sizing: border-box;
	width: 100%;
	padding: 90px 25px 65px;
	display: flex;
	flex-wrap: nowrap;
	gap: 45px;
	justify-content: center;
}
.recensione {
	/* Box singola recensione */
	position: relative;
	flex-basis: 100%;
	box-shadow: 0px 0px 15px rgba(0,0,0,0.5);
	border-radius: 16px;
	height: 240px;
}
.recensione_testo {
	position: relative;
	background-image: linear-gradient(to bottom, rgba(0,0,0,0.05), rgba(0,0,0,0.15));
	padding: 30px 5px 25px 25px;
	font-size: medium;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.6);
	height: 160px;
	cursor: pointer;
	transition: height 0.7s;
}
.recensione_testo p {
	font-size: medium;
	margin-top: 4px;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.6);
	overflow: hidden; 
	height: 124px;
	transition: height 0.7s;
}
.recensione_testo::before {
	/* Virgolette */
	content: "\0201C";
	position: absolute;
	top: -25px;
	left: -16px;
	font-size: 70px;
	font-family: 'Times New Roman', 'Times', 'FreeSerif', serif;
	font-weight: bolder;
	color: White;
	text-shadow: 3px 3px 6px rgba(0,0,0,0.3);
	padding: 0;
	padding-left: 10px;
	line-height: 77px;
	border-radius: 100px;
	box-shadow: 0px 0px 15px rgba(0,0,0,0.5);
	background-color: Gainsboro;
	width: 49px;
	height: 59px;
	overflow: hidden;
}
.recensione_foto {
	position: relative;
	top: -15px;
	right: 7px;
	text-align: right;
}
.recensione_foto img {
	padding: 3px;
	padding-bottom: 0px;
	background-color: White;
	border-radius: 100px;
	width: 85px;
}
.recensione_autore {
	font-size: small;
	font-weight: bold;
	color: DimGray;
	text-align: left;
	position: relative;
	top: -73px;
	left: 20px;
	width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.recensione_stelle {
	/* Punteggio/rating */
	position: relative;
	top: -68px;
	font-size: x-large;
	width: 100%;
	box-sizing: border-box;
	text-align: left;
	left: 18px;
	opacity: 1;
	transition: opacity 0.7s;
}
.recensione_stelle .si { color: Gold; }
.recensione_stelle .no { color: DimGray; }
.recensione:hover .recensione_testo { height: 190px; }
.recensione:hover .recensione_testo p { height: 154px; }
.recensione:hover .recensione_stelle { opacity: 0; }

.lascia_recensione {
	/* Link per lasciare una recensione */
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	margin: 10px;
}

.lascia_recensione div {
	/* Link per lasciare una recensione */
	width: 90%;
	border-radius: 5px;
	background-image: linear-gradient(to bottom, rgba(0,0,0,0.05), rgba(0,0,0,0.15));
	color: Black;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.6);
	text-align: center;
	font-size: large;
	cursor: pointer;
	padding: 15px;
	margin: auto;
	margin-bottom: 100px;
	box-shadow: 0px 0px 15px rgba(0,0,0,0.5);
}
.lascia_recensione div:hover {
	/* Link per lasciare una recensione */
	background-image: linear-gradient(to top, rgba(0,0,0,0.05), rgba(0,0,0,0.15));
	transform: scale(1.05);
	animation: zumma 2s;
}






/************************/
/*    WIDGET MARCHI     */
/************************/
#widget_marchi {
	background: linear-gradient(to bottom, #E0E0E0 0%, #FFF 20%, #FFF 100%); 
	border-radius: 10% 10% 0 0;
	position: relative;
	box-sizing: border-box;
	width: 100%;
	padding: 42px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 65px;
}
#widget_marchi a { 
	display: inline-block; 
	width: 160px; 
	height: 60px; 
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	background-color: White;
	border: 12px solid White;
	border-radius: 12px;
	outline: 1px solid Gainsboro;
	box-shadow: 2px 2px 6px Gainsboro;
	transition: transform 0.4s, opacity 0.6s;
}
#widget_marchi a:hover { opacity: 0.5; transform: scale(1.1); }

/************************/
/*        PIEDE         */
/************************/
footer {
	position: relative;
	width: 100%;
	left: 0vw;
	margin-top: 35px;
	padding-top: 35px;
	background: #212121; 
}
footer > div {
	width: 80%;
	left: 10%;
	position: relative;
	padding: 15px 0;
	color: Snow;
	font-size: 0.7rem;
	text-align: center;
}
footer a {
	font-size: 0.68rem;
	font-weight: bolder;
	color: White;
}
footer a:hover {
	color: #FFFFAF;
	text-decoration: none;
}
footer #credits {
	padding: 35px 6px;
	color: Gainsboro;
}
footer hr {
	width: 80%;
	margin: 32px auto;
	border: 1px solid Black;
}
footer > section {
	width: 80%;
	min-height: 260px;
	left: 10%;
	position: relative;
	padding: 35px 0;
	color: Silver;
	font-size: 0.87rem;
	line-height: 2rem;
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	align-items: flex-start;
}
footer > section ul {
	margin: 0;
	padding: 0;
}
footer > section a {
	font-size: 0.85rem;
}
footer > section a:hover {
	font-size: 0.85rem;
}
footer address {
	/* il tag address in alcuni casi viene mostrato in corsivo quindi imposto normale */
	font-style: normal;
}
footer address img {
	width: 18px;
	height: 18px; 
	vertical-align:sub;
}
footer address img {
	margin-top: 8px;
	margin-right: 8px;
	width: 22px;
	height: 22px; 
	vertical-align:sub;
	filter: brightness(150%);
}
#pagamenti_possibili {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	margin: 18px 5px;
}
dialog {
  padding: 28px 32px 34px;
  border-radius: 16px 0;
  border: 3px solid YellowGreen ;
  background-image: linear-gradient(to top, Beige, White);
  box-shadow: 3px 3px 6px DarkGray;
}
/* Il tasto chiudi condivide le caratteristiche con chiudi_nav_aside */
dialog p:first-child {
	/* Titolo -Attenzione- */
	color: ForestGreen;
	font-size: large;
	margin-left: -12px;
}
/***********************************************/
/*    FORM NEWSLETTER e RICERCA nel piede      */
/***********************************************/
#iscrizione_newsletter {
	width: 100%;
	padding: 3%;
	margin-bottom: 16px;
}
#iscrizione_newsletter form,
#iscrizione_newsletter_popup form {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
}
#iscrizione_newsletter input,
#iscrizione_newsletter_popup input {
	margin: 0;
	background-color: white;
	border: 1px solid rgba(0,0,0,0.5);
	border-radius: 0;
	width: 220px;
	height: 30px;
	padding: 5px 10px;
	box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
	box-sizing: content-box;
}
#iscrizione_newsletter input:hover,
#iscrizione_newsletter_popup input:hover {
	background-color: rgba(255,255,255,0.9);
	border: 1px solid rgba(0,0,0,0.8);
}
#iscrizione_newsletter button,
#iscrizione_newsletter_popup button {
	margin: 0;
	background-color: rgba(0,0,0,0.5);
	border: 1px solid rgba(255,255,255,0.7);
	border-radius: 0;
	width: 45px;
	height: 40px;
	padding: 0px;
	box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
	color: DarkGray;
	box-sizing: content-box;
	text-align: center;
	font-size: x-large;
}
#iscrizione_newsletter button:hover,
#iscrizione_newsletter_popup button:hover {
	background-color: rgba(0,0,0,0.3);
	border: 1px solid rgba(255,255,255,0.5);
	color: White;
	cursor: pointer;
}

/***************************/
/*    NEWSLETTER POPUP     */
/***************************/
#iscrizione_newsletter_popup {
	position: fixed;
	z-index: 40000;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background-color: rgba(0,0,0,0.65);
}
#iscrizione_newsletter_popup_contenuto {
	position: relative;
	margin: 0 auto;
	padding: 20px;
	top: 10vh;
	left: auto;
	width: 90%;
	max-width: 450px; 
	box-sizing: border-box;
	border-radius: 8px;
	background: linear-gradient(to bottom, White, Gainsboro);
	box-shadow: 0px 0px 15px Black;
}
#iscrizione_newsletter_popup_contenuto::before {
	content: "";
	position: absolute;
	width: 162px;
	height: 134px;
	top: -10px;
	left: -22px;
	background-image: url('/icofont/ico_lettera.svg');
	background-position: center;
	background-size: 100%;
	background-repeat: no-repeat;
	transform: rotate(-25deg);
}
#iscrizione_newsletter_popup_logo {
	text-align: center;
	width: 100%;
	height: 40px;
	border-bottom: 1px solid White;
	padding: 0;
	padding-bottom: 20px;
}
#iscrizione_newsletter_popup_logo img {
	height: 100%;
	max-height: 50px;
	width: auto;
}
#iscrizione_newsletter_popup_testo {
	box-sizing: content-box;
	width: 96%;
	text-align: justify;
	margin: 2%;
}
#iscrizione_newsletter_popup_chiudi a {
	position: absolute;
	top: -60px;
	right: 0px;
	padding: 15px;
	font-size: 36px;
	color: white;
	text-shadow: 0px 0px 5px Black;
}
#iscrizione_newsletter_popup_chiudi a:hover {
	color: silver;
	text-decoration: none;
}
#iscrizione_newsletter_popup input {
	width: 310px;
}







/***************************/
/* ICONE CONTATTI e SOCIAL */
/***************************/
div.ico-social-profilo {
	margin-top: 25px;
	display: flex;
	gap: 25px;
	justify-content: center;
}
div.ico-social-profilo img {
	height: 42px;
}
div.icocontatti_testa {
	position: absolute;
	z-index: 8;
	top: 85px;
	width: 93%;
  height: 70px;
	box-sizing: border-box;
  padding: 0px 10px;
  border: 0;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: stretch;
}
div.icocontatti_testa div {
  margin: 0px;
  height: 100%;
}
div.icocontatti_testa div span {
  margin: 12px 18px;
  margin-bottom: 0px;
	display: inline-block;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 33px;
  height: 33px;
}
div.icoseguici_piede,
div.icoseguici_ordine {
	position: relative;
	width: 100%;
	margin: auto;
  display: flex;
  flex-wrap: wrap;
	justify-content: center;
}
div.icoseguici_piede {
	justify-content: flex-start;
}
div.icoseguici_ordine img {
  margin: 14px;
  width: 42px;
  height: 42px;
  filter: brightness(130%);
}
div.icoseguici_ordine div:hover img { filter: brightness(90%); }

div.icoseguici_ordine {
	position: relative;
	width: 250px;
  margin: 36px 4px 32px;
  display: flex;
  flex-wrap: wrap;
}
div.icoseguici_piede img {
  margin: 11px;
  width: 32px;
  height: 32px;
  filter: brightness(160%);
}
div.icoseguici_piede div:hover img { filter: brightness(200%); }



/************************/
/*         CHAT         */
/************************/
.whatsapp-chat-scheda, .whatsapp-chat-piede {
	position: relative;
	margin: 30px 5px;
	display: inline-block;
}
.whatsapp-chat-piede {
	margin: 15px 0;
	height: 44px;
	text-align: center;
}
.whatsapp-chat-scheda a, .whatsapp-chat-piede a {
	text-decoration: none;
}
.whatsapp-chat-scheda img, .whatsapp-chat-piede img {
	position: relative;
	z-index: 1;
	width: 55px;
	height: 55px;
}
.whatsapp-chat-eti {
	position: relative;
	top: -22px;
	left: -25px;
	display: inline-block;
	z-index: 0;
	border: 4px solid White;
	color: White;
	background-color: OliveDrab;
	box-shadow: 2px 2px 4px 0px Gray;
	font-size: 0.9rem;
	font-weight: bolder;
	border-radius: 11px;
	padding: 3px 10px 3px 20px;
}
.whatsapp-chat-eti:hover {
	opacity: 50%;
}
.whatsapp-chat-testa .whatsapp-chat-eti {
	top: -16px;
	border: 3px solid White;
	font-size: 0.75rem;
}
.whatsapp-chat-piede .whatsapp-chat-eti {
	top: -16px;
	border: 3px solid White;
	font-size: 0.85rem;
	padding: 0px 13px 0px 28px;
	text-shadow: none;
}

p.infochat { margin: 32px 15px 5px; font-size: small; }
p.infochat::first-line { font-size: medium; }
address.infochat {
	position: relative;
	margin: 0px 5px 30px;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	justify-content: start;
	gap: 12px;
}
address.infochat a {
	text-decoration: none;
	font-style: normal;
	display: flex;
	align-items: center;
	transition: opacity 0.6s, transform 0.6s;
}
.infochat a:hover { opacity: 40%; transform: scale(1.05); }
.infochat a div:first-child { 
	/* Icone */
	position: relative;
	display: flex;
	width: 52px; 
	height: 52px; 
	z-index: 1; 
}
.infochat-ico-mail {
	border: 4px solid White;
	border-radius: 100%;
	box-shadow: 2px 2px 4px 0px Gray;
	background-color: SteelBlue;
	font-size: xx-large;
	text-align: center;
	font-weight: bold;
	line-height: 52px;
	width: 52px;
	color: White;
}
.infochat-eti-wa, .infochat-eti-mail {
	position: relative;
	left: -20px;
	display: inline-block;
	z-index: 0;
	border: 4px solid White;
	color: White;
	box-shadow: 2px 2px 4px 0px Gray;
	font-size: small;
	font-weight: bolder;
	border-radius: 11px;
	padding: 3px 10px 3px 20px;
}
.infochat-eti-wa { background-color: ForestGreen; }
.infochat-eti-mail { background-color: SteelBlue; }





/***************************/
/*    NORMATIVA COOKIE     */
/***************************/
#accetta_cookie {
	position: fixed;
	z-index: 50000;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	background-color: rgba(0,0,0,0.5);
}
#accetta_cookie_contenuto {
	position: fixed;
	bottom: 0;
	width: 100%;
	box-sizing: border-box;
	background: linear-gradient(to bottom, White, Gainsboro);
}
#accetta_cookie_contenuto p:first-child {
	box-sizing: content-box;
	width: 96%;
	text-align: justify;
	margin: 2%;
	font-size: small;
}
#accetta_cookie_contenuto p:last-child {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	border-radius: 50% 50% 0 0;
	box-shadow: 0px -2px 5px Gray;
	width: 100%;
	text-align: center;
	background-color: White;
}
#accetta_cookie_contenuto p:last-child button {
	margin: 20px;
	border-radius: 25px;
	font-size: small;
	font-weight: bolder;
	text-shadow: 1px 1px 1px Black;
}


/***************************/
/*    BOX FINANZIAMENTO    */
/***************************/
#finanziamento {
	position: absolute;
	z-index: 10;
	top: 8px;
	left: 5vw;
	display:flex;
	width: 300px;
	justify-content: space-around;
	text-align: center;
	font-size: xx-small;
	font-weight: bolder;
	font-family: sans-serif;
	line-height: 10px;
}
#finanziamento_dida {
	position: absolute;
	z-index: 10;
	top: 75px;
	left: 5vw;
	width: 300px;
	text-align: center;
	line-height: 10px;
	font-size: xx-small;
	font-family: sans-serif;
}


/***************************/
/*      BOX PAGAMENTI      */
/***************************/
fieldset.pagamenti {
	text-align: left; 
	padding: 50px 60px;
	width: 96%;
	max-width: 720px;
}
.pagamenti legend {
	font-size: large;
	padding: 15px;
}
.pagamenti .ordina {
	min-width: 380px;
	max-width: 500px;
	text-align: left;
}
.pagamenti .ordina small {
	font-size: small;
	font-weight: bold;
}


/***************************/
/*       FASI ORDINE       */
/***************************/
#fasi_ordine {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 420px;
  margin: 40px auto;
  font-family: Arial, 'Helvetica', 'FreeSans', sans-serif;
  overflow: hidden;
  padding: 5px;
}
#fasi_ordine div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
#fasi_ordine sup {
  position: relative;
  display: inline-block;
  border: 3px solid WhiteSmoke;
  background-color: LimeGreen;
  box-shadow: 1px 1px 8px rgba(0,0,0,0.3), 0px 0px 11px inset rgba(0,0,0,0.6);
  border-radius: 100px;
  width: 34px;
  height: 34px;
  line-height: 29px;
  font-size: small;
  font-weight: bold;
  color: Ivory;
  text-align: center;
  text-shadow: 0px 0px 2px Black;
  cursor: default;
}
#fasi_ordine sup.passato { background-color: ForestGreen; }
#fasi_ordine sup.presente {
  background-color: LimeGreen;
  width: 38px;
  height: 38px;
  line-height: 32px;
}
#fasi_ordine sup.futuro, #fasi_ordine sup.futuro:after { background-color: Gainsboro; box-shadow: 1px 1px 8px rgba(0,0,0,0.3); }
#fasi_ordine sup::after {
  content: "";
  position: absolute;
  top: 12px;
  left: 48px;
  display: inline-block;
  width: 56px;
  background-color: ForestGreen;
  height: 2px;
}
#fasi_ordine sub {
	font-size: x-small;
	color: Gray;
	text-align: center;
}

/************************/
/*  EXIT INTENT POPUP   */
/************************/
.exit-intent-popup {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 1;
	background: rgba(33, 33, 33, 0.8);
	transform: translateY(60%) scale(0);
	transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}
.exit-intent-popup.visible { transform: translateY(0) scale(1); }
.exit-intent-contenuto {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: whitesmoke;
	border-radius: 16px;
	padding: 20px 30px;
	text-align: left;
	font-size: large;
}
.exit-intent-contenuto input { width: 250px; }
.exit-intent-chiudi {
	display: inline-block;
	position: absolute;
	top: -8px;
	right: -8px;
	color: White;
	border: 3px solid White;
	border-radius: 100px;
	background-color: #444;
	box-shadow: 1px 1px 6px rgba(0,0,0,0.4);
	cursor: pointer;
	width: 30px;
	height: 30px;
	line-height: 21px;
	text-align: center;
	font-weight: bold;
}
.exit-intent-chiudi:hover {
	color: Gainsboro;
	background-color: Black;
}


/* queste classi devono stare alla fine */
.desktop { display: inline-block; }
.mobile { display: none; }
table.desktop { display: table; }






/*******************************/
/* QUI    Versione MOBILE      */
/*******************************/


@media only screen and (max-width: 900px) {

	/************************/
	/*      TESTATA         */
	/************************/
	header { position: relative; }
	#hellobar .contenitore { padding: 11px 20px 9px; height: auto; flex-wrap: wrap; gap: 20px; }
	#hello_contatti a { font-size: x-large; }
	#hello_menu a, #hello_menu span { font-size: medium; }
	#logobar .contenitore { padding: 18px 38px; flex-direction: column; justify-content: center; flex-wrap: wrap; gap: 8px; }
	#navbar .contenitore { padding: 20px 48px; justify-content: space-between; }
	#logobar a { text-align: center; }
	#logobar img { height: 65px; }
	#ricerca, #ricerca form { justify-content: center; }
	#ricerca input { width: 80vw; }
	#navbar aside {
		/* Sottomenu a comparsa */
		flex-wrap: nowrap;
		max-height: none;
		min-height: 83vh;
		height: auto;
		padding: 48px 28px;
	}
	#navbar aside a, #navbar details { padding: 16px; }
	.chiudi_nav_aside { margin: 5px; }
	#promobar .contenitore { flex-wrap: wrap; gap: 0; }
	#promobar .contenitore div { margin: 8px 10px; font-size: 0.82rem; line-height: 0.95rem; }
	#promobar .contenitore div span:first-child { display:inline-block; width: 60px; text-align: center; }


	main {
		position: relative;
		width: 100vw;
		padding: 20px 40px 60px 15px;
	}
	blockquote { margin: auto 1px; }



	/************************/
	/*     BOX PRODOTTI     */
	/************************/


	/************************/
	/*      TAG VARI        */
	/************************/
	h1 { font-size: x-large; }
	h2 { font-size: 1.1rem; }
	h3 { font-size: 1.25rem; }
	textarea { width: 92%; }
	h1.home,
	h2.home,
	h3.home,
	h3.home,
	div.home {
	/*
		display: none;
	*/
	}
	.fotoXSMALL {
		/* nel carrello mostra una foto piu piccola */
		margin: 4px;
		width: 90px;
		height: 100px;
	}
	.fotocatalogokit { margin-right: 15px; }
	.separacatalogokit { margin-right: 15px; }
	.offerta_perc { margin-top: 22px; }
	.offerta_perc::before { left: 44%; }
	.paragrafo { text-align: left; }
	.sottocat {
		padding: 65px 15px;
		gap: 60px 25px;
	}
		

	/************************/
	/*        SCHEDA        */
	/************************/
	.path_cat { display: none; }
	#scheda {
		grid-template-columns: auto;
		grid-template-rows: auto auto auto;
		grid-template-areas:
		"foto"
		"cta"
		"dettagli";
		justify-items: center;
		& aside:nth-child(2) {
			text-align: center;
		}
	}
	.sottotitolo_scheda {
		font-size: large;
    color: var(--colore1);
    border: 1px solid var(--cta_sfondo);
    padding: 10px 18px;
    border-radius: 5px;
	}
	#varianti { justify-content: center; }
	div.tab { 
		width: 94%; 
		& button {
			display: block;
			width: 100%;
			font-size: medium;
			text-shadow: 1px 1px 1px rgba(255,255,255,0.7);
			&:first-child { border-radius: 9px 9px 0 0; }
			&:last-child { border-radius: 0; }
		}
	}

	.box_cond_vend { margin-left:auto; margin-right:auto; }
	.dati_aggiuntivi_scheda { margin-left:auto; margin-right:auto; }
	.fotoBIG {
		margin-left: 8vw;
		width: 84vw;
		height: 65vh;
		box-shadow: none;
	}
	.qta_scheda {
		display: flex;
		justify-content: center;
		margin: 20px 0px;
	}
	.prezzo_scheda { font-size: xx-large; margin: 20px 0px; }
	.pesonetto { margin-left: 12px; }
	.marchio-scheda { text-align: center; }

	.popup_contenuto {
		margin-left: 4vw;
		max-width: 92vw;
	}
	#popup_rigo1 b {
		border: 0;
		padding: inherit;
	}
	address.infochat {
		justify-content: center;
		gap: 4px;
	}

	/************************/
	/*       CONTATTI       */
	/************************/
	#contatti_box {
		display: block;
	}
	#contatti_map {
		width: 96%;
		height: 68vh;
		margin: 60px 2%;
	}
	#contatti_map iframe {
		width: 100%;
		height: 100%;
	}
	#contatti_sub {
		width: 96%;
		margin: 2%;	
	}
	#contatti_form input, #contatti_form textarea {
		width: 88%;
		padding: 3%;	
		margin: 3%;	
	}


	/************************/
	/*        BANNER        */
	/************************/
	#banner_body_box > div, 
	#banner_foot_box > div {
		margin: 8px 0px;
	}

	/************************/
	/*  WIDGET RECENSIONI   */
	/************************/
	#recensioni {
		/* Fascia recensioni */
		flex-wrap: wrap;
	}


	/************************/
	/*    WIDGET MARCHI     */
	/************************/
	#widget_marchi {
		background: linear-gradient(to bottom, #E0E0E0 0%, #FFF 5%, #FFF 100%); 
		border-radius: 4% 4% 0 0;
		padding: 42px 12px;
		justify-content: center;
		gap: 32px 24px;
	}

	/************************/
	/*        PIEDE         */
	/************************/
	footer {
		width: 100vw;
	}
	footer > div {
		width: 99vw;
		left: 0vw;
		padding-left: 1vw;
		padding-right: 1vw;
	}
	footer > section {
		flex-direction: column;
		width: 99vw;
		left: 0vw;
		text-align:center;
		align-items: center;
	}
	nav#menupiede {
		width: 90vw;
		text-align: center;
	}
	nav#menupiede ul {
		margin: 20px 8vw;
		padding: 0;
		border: 1px solid Gray;
		border-radius: 10px;
	}
	nav#menupiede ul li {
		padding: 12px;
		display: block;
		border-bottom: 1px solid Gray;
		font-weight: normal;
		text-transform: uppercase;
	}
	nav#menupiede ul li:last-child {
		border-bottom: 0;
	}
	#iscrizione_newsletter form,
	#iscrizione_newsletter_popup form {
		justify-content: center;
	}


	/***************************/
	/*     ICONE SOCIAL        */
	/***************************/
	div.icocontatti_testa {
		top: 150px;
		width: 100%;
		height: 70px;
		border: 0;
		border-top: 2px groove White;
	}
	div.icocontatti_testa div {
		margin: 0px;
		border-left: 2px groove White;
		height: 100%;
	}
	div.icocontatti_testa div span {
		margin: 12px 18px;
		margin-bottom: 0px;
		width: 40px;
		height: 40px;
	}
	div.icoseguici_piede {
		width: 92vw;
		text-align: center;
		justify-content: center;
	}


	/***************************/
	/*    NORMATIVA COOKIE     */
	/***************************/
	#accetta_cookie_contenuto {
		width: 100%;
	}
	#accetta_cookie_contenuto p:first-child {
		width: 90%;
		margin: 5%;
		text-align: justify;
		font-size: small;
	}
	#accetta_cookie_contenuto p:last-child  {
		border-radius: 15% 15% 0 0;
		padding: 5% 0;
	}
	#accetta_cookie_contenuto p:last-child button {
		width: 60%;
		margin: 10px;
		border-radius: 15px;
		font-size: small;
	}


	/* queste classi devono stare alla fine */
	.desktop { display: none; }
	.mobile { display: inline-block; }
	table.mobile { display: table; }

}

/* queste classi devono stare alla fine */
.nascondi { display: none !important; }