:root {
	--text-color: #222;
	--link-color: #236;
	/* --link-color-alt: #22c; */
	--hover-color: #286;
	--brand-color: #00787f;
	--brand-color-rgba: rgba(0, 120, 127, .8);
	/* --brand-color-rgba: rgba(0, 120, 127, 1); */
	--contrast-color: #f52;
	--highlight-color: #fcf75e;

	--danger-color: #800;
	--danger-color-high: #c00;

	--shadow-color-1: rgba(0, 0, 0, 0.5);
	--shadow-color-2: rgba(20, 20, 20, .8);
	--shadow-color-3: rgba(20, 20, 20, .5);
	--shadow-color-4: rgba(255, 255, 255, .7);

	--white-1: #fff;
	--white-2: #eee;
	--white-3: #d2d3d4;
	--white-4: #ccc;
	--white-5: #888;

	--zebra-color: #efd;

	--neutral-color: #fff;
	--info-color: #00c0ff;
	--warning-color: #ffbf00;
	--error-color: #ff4000;

	--neutral-color-dim: #bbb;
	--info-color-dim: #0099cc;
	--warning-color-dim: #cc9000;
	--error-color-dim: #cc3300;
}

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

/* Utile solo per IE */
/*
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {display: block;}
*/

/* ~~~ stile base per gli elementi */
html {
	overflow-y: scroll;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	scroll-behavior: smooth;
	box-sizing: border-box;
}
html, body {
	width: 100%; height: 100%;
}

body {
	font-family: 'Roboto', sans-serif;
	font-size: 1em;
	color: var(--text-color);
	margin: 0; padding: 0;
}
a {
	text-decoration: none;
	color: var(--link-color);
}
a:hover {
	color: var(--hover-color);
}
ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

fieldset {
	border: 0;
}
button, select, input, textarea {
	font-family: inherit;
	font-size: inherit;
}
label {
	font-weight: bold;
	display: inline-block;
	vertical-align: baseline;
}
label + select {
	vertical-align: baseline;
}
.contenuto label + select,
.contenuto label + input[type="text"] {
	margin-left: 1em;
}
abbr[title] {
	border-bottom: 1px dotted var(--brand-color);
}
em {
	font-weight: bold;
	font-style: normal;
	color: var(--brand-color);
}

/* ~~~ clearfix */
.clearfix:before, .clearfix:after {
	content: "";
	display: table;
}
.clearfix:after {
	clear: both;
}
.clearfix {
	zoom: 1;
}

/* ~~~ variazioni */
.condensed {
	font-family: Roboto Condensed;
}
.condensed th {
	font-weight: 400;
}
.condensed td {
	font-weight: 300;
}
.padded {
	margin-left: 2em; margin-right: 2em;
}

/* ~~~ componenti */
.inline-link {
	display: inline;
	border: 0;
	padding: 0;
	background: transparent;
	cursor: pointer;
	color: var(--brand-color);
	margin-right: 1.25em;
}
.inline-link:hover {
	color: var(--contrast-color);
}
/* ~~~ contenitore per effetto splash */
.splasher {
	width: 100%;
	height: 100%;
}

/* ~~~ intestazione del layout */
.main-header {
	position: fixed;
	top: 0;
	z-index: 200;
	width: 100%;
	height: 60px;
	color: var(--white-1);
}
.main-header .background {
	background: var(--brand-color);
	z-index: -1;
	width: 100%;
	height: 60px;
	position: absolute;
}
.main-header .logo {
	float: left;
	margin-right: 20px;
	padding: 8px;
	height: 100%;
}
.main-header .logo img {
	display: block;
	height: 100%;
}

.landing .background {
	opacity: .5;
}
.landing .logo {
	opacity: 0;
}
.landing ~ .spacer {
	display: none;
}

/* ~~~ menu di navigazione principale */
.navigation {
	float: right;
	margin: 10px 30px;
	display: block;
	font-weight: bold;
}
.navigation ul {
	display: block;
	padding: 0;
	list-style-type: none;
	margin: 10px 0;
	overflow: visible;
}
.navigation li {
	display: block;
	float: left;
	padding: 0 5px;
	min-width: 20px;
	position: relative;
	line-height: 20px;
}
.navigation li + li {
	border-left: 1px solid var(--white-1);
}
.navigation li.no-border {
	border: 0;
}
.navigation li a {
	color: var(--white-1);
}
.navigation li:hover:not(.no-border) {
	background-color: var(--shadow-color-2);
}
.navigation a,
.navigation img {
	display: block;
}

.spacer {
	margin-top: 60px;
	padding: .1px;
}

.login-button {
	min-width: 20px;
	position: relative;
}
.login-button img {
	position: absolute;
	top: 50%; transform: translateY(-50%);
}

/* ~~~ caratterizzazione del menu a discesa */
.the-dropper ul {
	left: -6px;
	padding: 5px 0;
	min-width: 100%;
	border-left: 1px solid var(--white-1);
	background-color: var(--brand-color-rgba);
	box-shadow: 0px .5em 1em var(--shadow-color-3);
}
.the-dropper ul a {
	white-space: nowrap;
}

/* ~~~ schermata introduttiva, logo aziendale */
.hero {
	width: 100%; height: 100%;
	background: url("../images/fullsplash.jpg") no-repeat top center; /* o fixed */
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
	position: relative;
}

.hero .banda_gradiente {
	width: 100%;
	position: absolute;
	top: 50%;
	transform: translate(0, -50%);
	background: var(--white-1);
	background: var(--shadow-color-4);
	text-align: center;
	padding: 5px;
}
.hero .banda_gradiente img {
	display: inline-block;
	max-width: 100%;
	/*margin: .4em 0 0em 0;*/
}

/* ~~~ chiusura del layout */
.footer {
	display: table;
	width: 100%;
	margin-top: 3rem;
	background-color: var(--white-3);
	color: var(--brand-color);
}
.footer .slice {
	display: table-cell;
	width: 33%;
	padding: 1.5rem;
}
.footer .center {
	text-align: center;
}
.footer.partners {
	display: block;
	margin: 0; padding: 2em;
}
/* ~~~ area loghi partner */
.partners > div,
.partners a {
	display: inline-block;
}
.partners > div + div {
	margin-left: 4em;
}

/* ~~~ contenuto della pagina: 2 colonne, testo + immagine */
.contenuto {
	width: 100%;
	margin-top: 3rem;
	/*padding: 0 10%;*/
	/*22072019*/
	padding: 0 20%;
}
.contenuto header {
	text-align: center;
}
.contenuto .illustrazione {
	width: 50%;
	float: left;
	clear: right;
	text-align: center;
}
.contenuto .illustrazione img {
	max-width: 100%;
	padding-left: 0;
	padding-right: 2em;
}
.contenuto article {
	width: 50%; height: 100%;
	display: table-cell; /*inline-block;*/
	text-align: justify;
	vertical-align: middle;
}
.contenuto article > p:first-of-type {
	margin-top: 0;
}
.contenuto:nth-child(2n) .illustrazione {
	float: right;
	clear: left;
}
.contenuto:nth-child(2n) .illustrazione img {
	padding-right: 0;
	padding-left: 2em;
}
.contenuto header.target::before {
	content: "";
	display: block;
	height: 60px;
	margin: -60px 0 0;
}

/* ~~~ contenuto della pagina news */
.news {
	padding: 10px;
}
.news header {
	text-align: left;
	overflow: auto;
}
.news h3 {
	display: inline-block;
}
.news h5 {
	float: right;
}
.news article {
	width: auto;
}
.news footer {
	margin-top: 1em;
	text-align: right;
}
.news .tldr {
	font-style: italic;
}
.news + .news::before {
	content: "";
	height: 1px;
	background-color: var(--brand-color);
	width: 90%;
	margin: 0 5%;
}

.notizia {
	border-radius: 5px;
}
.notizia section  {
	float:center;	
}

.interna {
	/*
	border-left:10px solid red;
	padding-left:1px;
	margin-bottom:1px;
	*/
}
.s1 {
	background-color: white;
}
.s2 {
	background-color: #eee;
}

.w100 {
	width: 98%;		
	height: 100px;
	background-color: #cde8e9;
	float:left;
	margin:1%;
	padding:10px;
	box-sizing: border-box;
}
.w50 {
	width: 48%;		
	height: 240px;
	background-color: #6d9ea1;
	float:left;
	margin:1%;
	padding:10px;
}
	.w50 h3 {
		font-size: 2em;
	}
	.w50 article {
		font-size: 1.25em;
	}
.w33 {
	width: 31%;
	height: 180px;
	background-color: #96c5c8;
	float:left;	
	margin:1%;
	padding:10px;
}
	.w33 h3 {
		font-size: 1.50em;
	}
	.w33 article {
		font-size: 1.25em;
	}
.w25 {
	width: 23%;
	height: 100px;
	background-color: #cde8e9;
	float:left;
	margin:1%;
	padding:10px;
}

.content {
	float: left;
	/*width: 80%;*/
	width: 100%;
	height: 400px, auto;
	padding: 20px;
}
	.content h3 {
		font-size: 2em;
	}
	.content article {
		font-size: 1.5em;
		line-height: 2em;
	}
	.content footer {

	}
	.content footer div {
		border-radius: 5px;
		border:1px solid black;
		float:left;
		background-color: #cde8e9;
		margin: 10px;
		padding: 10px;
	}
.notizia {
	padding-left: 20%;
	padding-right: 20%;
	text-align: justify;
}


.sidebar {
	box-sizing: border-box;
	float: right;
	width: 20%;	
	height: 200px;
}
div.allegati:hover {
	background-color: yellow;
}
/* ~~~ caratterizzazione dello strillo di marketing */
.mkt-shoot {
	font-style: italic;
	background-color: #eff;
	margin: 0; margin-top: 1rem; padding: .5em;
	position: relative;
	float: left;
	text-rendering: optimizeLegibility;
	font-variant-ligatures: common-ligatures;
	font-feature-settings: "kern";
	font-kerning: normal;
}
.mkt-shoot::before {
	content: "\201C";
	font-size: 1.5em; position: relative; top: .25em; margin-right: .16em; line-height: .5rem;
}
.mkt-shoot::after {
	content: "\201E";
	font-size: 1.5em; position: relative; bottom: 0; margin-left: .16em; line-height: .5rem;
}

/* ~~~ blocco di citazione */
.contenuto blockquote {
	quotes: "\201C" "\201D" "\2018" "\2019";
}
.contenuto blockquote p:first-of-type {
	display: inline;
}
.contenuto blockquote::before {
	content: open-quote;
	font-size: 4em;
	line-height: .1em;
	margin-right: .25em;
	vertical-align: -.4em;
}
.contenuto blockquote::after {
	content: close-quote;
	font-size: 4em;
	line-height: .1em;
}

.contenuto .img_cat {
		width: 80px;
		padding-right: 8px;
		padding-bottom: 8px;
	}
	.contenuto h3 {
		/*font-size: 3em;*/
		/*22072019*/
		font-size: 2em;
	}

	.contenuto article {
		font-size: 1.25em;
		
		
	}
	.riga_verde {
		/*margin-top: 60px;*/
		/*22072019*/
		border-bottom: 1px solid #00787f;
	}
div.button {
            background-color: #008284;
            padding: 10px;
            margin-top: 10px;
            float: right;
            font-family: Helvetica;
        }
        div.button a {
            text-decoration: none;
            color:white;
        }

/* ~~~ lista con indicatori */
ul.bulleted {
	margin: 0;
	padding: 0;
	list-style: none outside;
}
ul.bulleted li:before {
	content: "\2023";
	width: 1em;
	display: inline-block;
}

/* ~~~ classi di marcatura per i simboli di protezione intellettuale e produttiva */
.mark:after {
	font-size: .7em; font-weight: normal;
	vertical-align: top;
}
.mark.reg:after {
	content: "\00AE";
}
.mark.copy:after {
	content: "\00A9";
}
.mark.trade:after {
	content: "\2122";
}

/* ~~~ caratterizzazione della lista dei contatti */
.contacts ul > li + li {
	margin-top: 1rem;
}

/* ~~~ caratterizzazione della lista del network */
.network-inspector fieldset {
	margin: 1em 0; padding: 0;
}
.network-inspector label {
	display: inline-block;
	width: 20%;
}
.network-inspector select {
	display: inline-block;
	width: 76%;
}
.network-detail {
	display: inline-block;
	width: 100%;
}
.network-detail li + li {
	margin-top: .2em;
}
.network-detail .attachment > a {
	min-width: 40%;
	display: inline-block;
	position: relative;
}
.network-detail > ul {
	width: 100%;
}
.network-detail em {
	float: right;
}

/* ~~~ dialog */
.overlay {
	background-color: var(--shadow-color-1);
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	z-index: 300;

	visibility: hidden;
	opacity: 0;
	transition: visibility .2s linear, opacity .2s ease-in-out;
}
.dialog {
	position: fixed;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	background-color: var(--neutral-color);
	border: .5em solid var(--neutral-color);
	color: var(--text-color);
	/*padding: 1em;*/
	box-shadow: 0px 0px 1em var(--shadow-color-2);
	z-index: 320;

	visibility: hidden;
	opacity: 0;
	transition: visibility .2s linear, opacity .2s ease-in-out;
}
.shown {
	visibility: visible;
	opacity: 1;
	transition: visibility .2s linear, opacity .2s ease-in-out;
}
.noscroll {
	overflow: hidden;
}

.dialog .body {
	display: block;
	background-color: var(--white-1);
	margin: 0;
	padding: 1.5em;
	line-height: 2em;
}
.dialog .toolbar {
	text-align: right;
	padding: 0; padding-top: .5em;
	color: var(--text-color);
	background-color: var(--neutral-color);
	line-height: 2.4em;
}
.dialog .toolbar button {
	padding: 0 1em;
	line-height: 2em;
}

.dialog.info {
	background-color: var(--info-color);
	border-color: var(--info-color);
}
.dialog.confirm,
.dialog.warning {
	background-color: var(--warning-color);
	border-color: var(--warning-color);
}
.dialog.error {
	background-color: var(--error-color);
	border-color: var(--error-color);
}

.dialog.info .toolbar {
	color: var(--white-1);
	background-color: var(--info-color);
}
.dialog.confirm .toolbar,
.dialog.warning .toolbar {
	color: var(--white-1);
	background-color: var(--warning-color);
}
.dialog.error .toolbar {
	color: var(--white-1);
	background-color: var(--error-color);
}

/* ~~~ pannello di login */
.login form {
	display: block;
}
.login fieldset {
	margin: 0;
	padding: 0;
	text-align: right;
}
.login fieldset + fieldset,
.login fieldset + .fieldset {
	margin-top: 1em;
}
.login input[type="text"],
.login input[type="password"] {
	margin-left: 1em;
}
.submit {
	text-align: right;
}
.recover-link {
	float: left;
}
.recover-link a {
	color: var(--brand-color);
}
.recover-link a:hover {
	color: var(--link-color);
}
.login .sign {
	margin: 0;
}

/* ~~~ pannelli di avviso */
.sign {
	margin: 1em 2em;
	padding: 0 1em;
	border-style: solid;
	border-width: 1px;
	text-align: center;
}

.sign.danger {
	background-color: var(--error-color);
	border-color: var(--error-color-dim);
	color: var(--white-1);
	font-weight: bold;
}

.sign.alert {
	background-color: var(--warning-color);
	border-color: var(--warning-color-dim);
	color: var(--white-1);
	font-weight: bold;
}

.sign.info {
	background-color: var(--info-color);
	border-color: var(--info-color-dim);
	color: var(--white-1);
	font-weight: bold;
}

/* ~~~ form di ricerca track & trace */
.search-filter {
	display: block;
	margin: 0 2em;
}
.search-filter .fields {
	border-collapse: collapse;
	width: 100%;
}
.search-filter .fields + .fields {
	margin-top: 1em;
}
.search-filter .fields .enlarge {
	width: 100%;
}
.search-filter .toolbar {
	text-align: right;
	margin-top: 1em;
}
.search-filter .mobile > div {
	display: inline-block;
	margin-right: 1em;
	height: 42px;
}
.search-filter .mobile > div:last-child {
	margin-right: 0;
}

.search-filter + .search-results {
	margin-top: 1em;
}

.mobile {
	border-color: firebrick !important;
}
.search-results {
	margin: 0 2em;
	overflow-x: auto;
}
.search-results table {
	border-collapse: collapse;
	border: 0;
	border: 1px solid var(--white-5);
	min-width: 100%;
}
.search-results th,
.search-results td {
	padding: .2em .2em;
}
.search-results thead,
.search-results tfoot {
	background-color: var(--white-4);
	color: var(--text-color);
}
.search-results th {
	text-align: left;
	border: 1px solid var(--white-5);
}
.search-results tbody > tr {
	border-bottom: 1px solid var(--white-5);
}
.search-results tbody > tr:nth-child(odd) {
	background-color: var(--zebra-color);
}
.search-results td {
	border: 1px solid var(--white-5);
}
.search-results a.delete {
	color: var(--danger-color);
}
.search-results a.delete:hover {
	color: var(--danger-color-high);
}
.search-results tr[data-ref]:hover {
	background-color: var(--highlight-color);
	cursor: pointer;
}

.pagination {
	margin: .2em 0;
	font-family: Roboto;
}
.pagination li {
	display: inline-block;
	color: var(--white-2);
	background-color: var(--brand-color);
	margin: 0 .1em;
}
.pagination li:first-child {
	margin-left: 0;
}
.pagination li:last-child {
	margin-right: 0;
}
.pagination a,
.pagination span {
	display: block;
	padding: .4em .8em;
	color: inherit;
	font-weight: bold;
}
.pagination .active {
	background-color: var(--contrast-color);
}
.pagination .disabled {
	color: var(--brand-color);
	background-color: transparent;
}

/* ~~~ griglia */
.eq-grid {
	display: flex;
	flex-direction: row;
}
.eq-grid > div {
	width: 50%;
}

/* ~~~ dettaglio del tracking */
.tracking-detail th {
	text-align: left;
	padding-right: 1em;
}
.events-detail th {
	text-align: left;
}
.events-detail td:first-child {
	padding-right: 1em;
}