@CHARSET "ISO-8859-1";

@font-face
{
	font-family: lato_bold;
	/*src: URL("./font/Lato-Bold.ttf");*/
	src: URL("https://raw.githubusercontent.com/google/fonts/master/ofl/lato/Lato-Bold.ttf");
}

html
{
	font-size: 100%;
	width: 100%;
}

body
{
	--colore1: #1d6dbd;
	--colore2: #fe5f55;
	--colore3: #4f4f4f;
	--colore4: white;
	--colore5: black;
	--colore6: rgb(245, 245, 245);
	font-family: lato_bold;
	font-size: 16px;
	margin: 0;
	width: 100%;
	color: var(--colore3);
}

a
{
	outline: none;
	font-weight: bold;
	text-decoration: none;
	color: var(--colore2);
}

table
{
	border-collapse: collapse;
}

.a_capo
{
	clear:both !important;
}

div#top_div
{
	position:fixed;
	bottom:70px;
	right:-5%;
	width:50px;
	height:50px;
	z-index:99;
	color: black;
	font-size:3em;
	transition:right 2s;
	text-align:center
}

div#top_div img
{
	width: 100%;
	height: 100%;
}

p.titolo1, div.titolo1
{
	font-size: 2.5em;
	color: var(--colore1);
	font-weight: bold;
	text-align: center;
	width: 100%;
}

p.titolo2, div.titolo2
{
	font-size: 1.5em;
	color: var(--colore3);
	font-weight: bold;
	width: 100%;
}

input.tasto, a.tasto, div#catalogo div.tasto
{
	background: var(--colore1);
	border: 0;
	color: var(--colore4) !important;
	font-weight: bold;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 10px;
	padding-right: 10px;
	white-space: nowrap;
	line-height: 3;
}

input.tasto
{
	line-height: 1 !important;
}

b
{
    color: var(--colore3);
}

p.errore
{
	color: var(--colore2);
	font-weight: bold;
	text-align: center;
	font-size: 1.5em;
}

/* ---------------------------------------------------- TABELLA FRECCIA ----------------------------------------------------------------- */

table.freccia
{
	width: 100%;
	color: var(--colore4);
}

table.freccia td
{
	padding: 10px;
}

table.freccia td.uno
{
	background: var(--colore1);
	border-left: 1px solid var(--colore1);
}

table.freccia td.due
{
	background-image: url("./img/freccia_div.webp");
	background-size: 100% 100%;
	width: 15px;
}

table.freccia td.tre
{
	background: var(--colore3);
	border-right: 1px solid var(--colore3);
	text-align: center;
}


/* ---------------------------------------------------- HEADER ----------------------------------------------------------------- */

div#header, div#header table
{
	width: 100%;
}

div#header table
{
	margin: 1%;
}

div#header
{
	position: fixed;
	top: 0;
	left: 0;
	z-index: 4;
	background: var(--colore1);
	line-height: 1.5;
}

div#header a
{
	color: var(--colore4);
}

input.tasto_login_header
{
	height: 20px;
	padding-left: 5px;
	padding-right: 5px;
	vertical-align: middle;
	padding-top: 1px;
	padding-bottom: 1px;
}

div#header div#cerca
{
	position: fixed;
	right: 40px;
	top:10px;
}

div#header div#cerca input.img
{
	width: 35px;
	vertical-align: middle;
}

div#header_space, div#header
{
	height: 115px;
}

div#header td.logo
{
	width: 20%;
	text-align: center;
}

div#header td.logo img
{
	width: 25%;
}

div#header td.tasti1, div#header td.tasti2
{
	vertical-align: bottom;
}

div#header td.tasti2
{
	width: 30%;
	text-align: right;
}

div#header div.tasto
{
	float: left;
	text-align: center;
	white-space: nowrap;
	margin-right: 5%;
	text-shadow: 0px 0px 3px var(--colore5);
}

div#header div.tasto:hover a, div#header div.selezionato a
{
	color: var(--colore2);
}

div#header td.tasti2 div.tasto
{
	width: 25%;
}

div#header div.tasto img
{
	width: 20%;
}


/* ---------------------------------------------------- BODY ----------------------------------------------------------------- */

table#body
{
	width: 100%;
	min-height: 200px;
}

table#body td#body, div#footer div#footer_bottom table, div#footer table#footer1, div#footer p#frase_iva
{
	width: 85%;
	margin: auto;
}

/* ---------------------------------------------------- FOOTER ----------------------------------------------------------------- */

div#footer
{
	width: 100%;
}

div#footer, div#footer a
{
	color: var(--colore4);
}

div#footer a
{
	text-shadow: 0px 0px 3px var(--colore5);
}

div#footer div#footer_top
{
	height: 110px;
	background: var(--colore1);
	width: 100%;
	padding-top: 30px;
	line-height: 2;
}

div#footer div#footer_bottom
{
	width: 100%;
	background: var(--colore5);
	height: 50px;
	align-content: center;
}

div#footer table
{
	width: 100%;
	font-weight: bold;
	margin: 0 auto;
}

div#footer table#footer1 td.sx
{
	width: 30%;
	vertical-align: top;
}

div#footer table#footer1 td.center
{
	width: 30%;
	vertical-align: top;
}

div#footer table#footer1 td.dx
{
	width: 40%;
	vertical-align: middle;
  	text-align: center;
}

div#footer img.pagamenti
{
	width: 90%;
}

div#footer div#footer_bottom table#footer2 td.dx
{
	text-align: center;
}

div#footer p#frase_iva
{
	margin-bottom: 30px;
	color: var(--colore5);
}


/* ---------------------------------------------------- MENU CARRELLO, MENU UTENTE ----------------------------------------------------------------- */

div#header div.menu_header
{
	position: fixed;
	inset: 0 0 0 70%;
	background: var(--colore4);
	padding: 2%;
	overflow-y: scroll;
	z-index: 10;
	transition: 0.5s;
	border-left: 5px solid var(--colore1);
}

div#header div.menu_header a
{
	color: var(--colore1);
}

div#header div#carrello_header span.prezzo
{
	color: var(--colore2);
}

div#header div#menu_header_background
{
	inset: 0;
	z-index: 5;
	background-color: rgba(0,0,0,.7);
	position: fixed;
}

div#header p.chiudi
{
	text-align: right;
	font-size: 2em;
	margin: 0;
}

div#header p.chiudi a
{
	color: var(--colore2);
}

div#header input.pass, div#header input.user, div#header input#testo_cerca
{
	border: 0;
	padding: 0;
	padding-left: 10px;
	width: 170px;
	height: 20px;
	color: var(--colore4);
	font-weight: bold;
	background-color: var(--colore1);
	margin-right: 10px;
}

div#header img.tasto_login_google
{
	height: 30px;
	vertical-align: middle;
}

div#header div#utente_header p.nome, div#header div#utente_header p.logout
{
	line-height: 4;
}

div#header div#utente_header p.nome span
{
	color: var(--colore2);
}

div#header div#filtro_header input#img_cerca
{
	width: 5%;
}

div#header div#filtro_header p.titolo_filtro
{
	font-weight: bold;
	padding-left: 3%;
}