/*
Usate le classi multiple
L’attributo class di un elemento HTML può avere più di un valore, le cosiddette classi multiple, aggiungendo i successivi separandoli con uno spazio.
Questa utile tecnica permette di applicare più stili allo stesso elemento e quindi definire classi generali che poi distinguiamo con classi specifiche, scrivendo quindi meno righe di codice e rendendo il lavoro più semplice da capire, modificare e riadattare.
Un elemento con più di una classe appare così: 
<a class=’class1 class2′ href=’/'>link</a>Questa tecnica potrebbe creare conflitti nel caso in cui entrambe le classi definiscano la stessa proprietà: 
.class1 {color: #fff;}
.class2 {color: #000;}in casi del genere il browser renderizza la prima classe letta nel codice quindi il colore del link sarà bianco (#fff).
*/

/* GLOBAL CSS VARIABLES */
:root   
{
	--opacity:0.9;
	--color:#033;
	--bgcolor:#085a20;
	--boxshadow:0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);

	--a-color:#066;
	--a-link-color:#033;
	--a-link-border:solid 1px #033;
	--a-visited-color:#066;
	--a-hover-color:#fff;
	--a-hover-bgcolor:#399;
	--a-hover-bgimage:linear-gradient(rgb(20, 123, 23), rgb(1, 56, 27));
	--a-hover-text-decoration-color:#0ff;

	--a-red-link-color:#c00;
	--a-red-visited-color:#c00;
	--a-red-hover-color:#c00;
	--a-red-active-color:#fff;

	--a-red-link-bgcolor:#fff;
	--a-red-visited-bgcolor:#fff;
	--a-red-hover-bgcolor:#fff;
	--a-red-active-bgcolor:#c00;

	--a-top-link-color:#000;
	--a-top-visited-color:brown;
	--a-top-hover-color:#c00;
	--a-top-active-color:#fff;

	--a-top-link-bgcolor:transparent;
	--a-top-visited-bgcolor:transparent;
	--a-top-hover-bgcolor:#066;
	--a-top-active-bgcolor:#fc0;

	--a-menu-link-color:#033;
	--a-menu-visited-color:#066;
	--a-menu-hover-color:#fc0;
	--a-menu-active-color:#fff;

	--h1-a-color:#fc0;
	--h1-a-link-color:#fc0;
	--hX-a-visited-color:#f90;
	--hX-a-hover-color:#eee;
	--hX-a-active-color:#fc0;

	--areesitoblock-bgcolor:#104242;
	--areesitoblock-border:solid 1px #399;	

	--bar-color:#eee;	
	--bar-bordertop:solid 24px Black;	

	--body-color:#033;	
	--body-color2:#fc0;	
	--body-bgcolor:#099;
	--body-bgcolor2:#399;		

	--button-color:#333; 
	--button-bgcolor:#9cc; 
	--button-border:solid 2px #699; 
	--button-boxshadow:0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);

	--details-color:#033; 
	--details-bgcolor:#9cc; 
	--details-bgimage:linear-gradient(rgba(153, 204, 204, 0.8), rgba(133, 212, 204,0.8)); 
	--details-border:1px solid #649695; 
	--details-borderradius:0.5rem;
	--details-padding:0.3125rem;

	--div-bgcolor-rgb:rgb(230,245,245);
	--div-bgcolor-rgba:rgba(230,245,245,0.8);	
	--div-border:border:solid 2px #066;
	--div-site-bgcolor-rgb:rgb(221, 221, 221);
	--div-site-bgcolor-rgba:rgba(221, 221, 221, 0.8);	
	--div-site-border:outset 2px #099;

	--fieldset-bgcolor-rgb:rgb(230,245,245);
	--fieldset-bgcolor-rgba:rgba(230,245,245,0.8);	
	--fieldset-border:solid 1px  aquamarine;

	--fieldset-site-bgcolor-rgb:rgb(221, 221, 221);
	--fieldset-site-bgcolor-rgba:rgba(221, 221, 221, 0.8);	
	--fieldset-site-border:outset 2px #099;
	--fieldset-site-color:#033;	
	--fieldset-site-li-color:#033;	

	--gmb-bgcolor-rgb:rgb(153,204,204);
	--gmb-bgcolor-rgba:rgba(16,66,66,0.2);

	--header-bgcolor:#53b25a;
	--header-boxshadow:1px 2px 4px rgba(0, 0, 0, .5);

	--homepagesitoblock-bgcolor:#104242;
	--homepagesitoblock-border:solid 1px #339999;

	--h1-color:#366;	

	--hr-color:#066;	

	--imgareesitoblock-opacity:0.9;
	--imghomepagesitoblock-opacity:0.9;

	--imgoff45-bgcolor:#ff0;
	--imgoff45-border:solid 1px #ff0!important;
	--imgoff45-opacity:0.9;
	
	--imgoff45-hover-boxshadow:0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	--imgoff45-hover-border:solid 1px Orange!important;
	--imgoff45-hover-opacity:1!important;

	--input-type-text-border:1px solid #555; 
	--input-type-text-focus-bgcolor:lightblue;

	--legend-color:#fc0; 
	--legend-bgcolor:#104242; 
	--legend-bgimage:linear-gradient(rgb(0, 153, 153), rgb(0, 102, 102)); 
	--legend-border:solid 1px #033; 

	--legend-site-color:#033; 
	--legend-site-bgcolor:#fc0; 
	--legend-site-bgimage:linear-gradient(#fc0,#f90); 
	--legend-site-border:outset 2px #fc0; 

	--nav-main-li-borderleft-color:#099;
	--nav-main-bottom-color:#033;
	--nav-main-bottom-bgcolor:#9ccece;
	--nav-main-bottom-bgimage:linear-gradient(#9ccece,#009999);

	--pagebottommenu-bgcolor-rgb:rgb(11, 51, 62);
	--pagebottommenu-bgcolor-rgba:rgba(11, 51, 62, 0.8);

	--panel-bgcolor-rgb:rgb(185, 230, 230);
	--panel-bgcolor-rgba:rgba(185, 230, 230, 0.8);
	--panel-bordercolor:aquamarine;
	--panel-border:solid 1px  aquamarine;

	--panelcta-bgcolor:#fc0;
	--panelnewsreg-bgcolor:orange;
	--panelnewsreg-border:2px solid Brown; 

	--summary-color:#033; 
	--summary-bgcolor:#9cc; 
	--summary-bgimage:linear-gradient(rgba(133, 212, 204, 0.8), rgb(100, 150, 150, 0.8)); 
	--summary-border:1px solid #649695; 
	--summary-borderradius:0.5rem;
	--summary-padding:0.3125rem;

	--panel-bgcolor: lightyellow;

	--table-color:#033;	
	--table-bgcolor:transparent;

	--table-newsrow1-bgcolor:#ddd;
	--table-newsrow2-bgcolor:#bbb;

	--table-menu2-th-color:#fc0;	
	--table-menu2-th-bgcolor:transparent;	
	--table-menu2-th-bordertop:ridge 5px #399;	
	--table-menu2-td-bgcolor:transparent;	

	--table-menu2-a-link-color:#eee;	
	--table-menu2-a-visited-color:#aaa;	
	--table-menu2-a-hover-color:#fff;	
	--table-menu2-a-active-color:#aee3e3;	
	--table-menu2-a-hover-bgcolor:transparent;	
	--table-menu2-a-hover-textshadow:1px 1px 2px white, 0 0 25px yellow, 0 0 5px #fc0;

	--tablenews-bgcolor-rgb:rgb(230,245,245);
	--tablenews-bgcolor-rgba:rgba(230,245,245,0.8);	

	--topbanner-bottom-color:#cc0000;
	--topbanner-bottom-bgimage:linear-gradient(#9ccece,#009999);
	--topbanner-bottom-bordertop: solid 0px rgb(245,245,245);

	}

/* SELECTORS */
#header { background-color:var(--header-bgcolor); box-shadow:var(--header-boxshadow); opacity:1; }
/* #PageBottom { background-color:#0B333E; } */

#PageBottomMenu { background-color:var(--pagebottommenu-bgcolor-rgb); background-color:var(--pagebottommenu-bgcolor-rgba); }
#PanelCTA { opacity:1!important; background-color:var(--panelcta-bgcolor); border-top: solid 1px; border-color:var(--panel-bordercolor); }

#PanelCookies { background-color:rgb(204,0,0); background-color:rgba(204,0,0,0.8); }  
#HyperLinkCookies { color:white; } 
#lblCookiesWarning { color:white; } 
#LinkButtonCookies  { color:white; } 

#HyperLinkCTA{ color:var(--body-color); border:var(--a-link-border); background-color:black; color:white; }
#HyperLinkEN { color:black; }
#HyperLinkIT { color:black; }

/* COLOR DEFINITIONS FOR USAGE WITH MULTIPLE CLASSES (use one of these classes followed by space and the other class name) */
.col  { color:var(--body-color); background-color:var(--body-bgcolor); }
.revcol  {  }

/* ----------------- CLASSES WITH COLOR DEFINITIONS -------------------*/
.body	{ background-color:var(--body-bgcolor); color:var(--body-color); }
.fullbackgroundimage {
	background-color: var(--body-bgcolor);
	background: url(/img/fbgsL.jpg) no-repeat center top;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: fixed;
	z-index: -1;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	z-index: -100;
	-webkit-animation: bounce-in-top 1.1s both;
	animation: bounce-in-top 1.1s both;
}


.bar	{ border-top:var(--bar-bordertop); color:var(--bar-color); }

.fc1 { color:var(--body-color); } /* STANDARD FORECOLOR (ON LIGHT BACKGROUND) */
.fc2 { color: var(--body-color2); } /* REVERSE  FORECOLOR (ON DARK  BACKGROUND) */

.formtitle { color:rgb(0, 51, 51); font-size: 150%; font-weight: bold; text-shadow: 2px 2px 3px; } 
.formheadline { background-image: linear-gradient(0deg, rgba(0,0,0,0.19), rgba(153, 204, 204, 0.5)); }
                

.nav-main li { border-left-color:var(--nav-main-li-borderleft-color); }
.nav-main-bottom { background-color:var(--nav-main-bottom-bgcolor); background-image:var(--nav-main-bottom-bgimage); border-left:1px solid #099; border-radius:0.5rem 0.5rem 0 0; border-top: solid 0px rgb(245,245,245); color:var(--nav-main-bottom-color); margin-top:1em; }

.panel { background-color:var(--panel-bgcolor-rgb); background-color:var(--panel-bgcolor-rgba); border:var(--panel-border); box-shadow:var(--boxshadow); } 
.panelnewsreg { background-color:var(--panelnewsreg-bgcolor); border:var(--panelnewsreg-border); } 

.tablenews { background-color:var(--tablenews-bgcolor-rgb); background-color:var(--tablenews-bgcolor-rgba); } 

.topbannerbottomdiv { color:var(--topbanner-bottom-color); background-image:var(--topbanner-bottom-bgimage); border-top:var(--topbanner-bottom-bordertop); }

/* DB CONTENT */
.areesitoblock { border:var(--areesitoblock-border); color:white; background-color:var(--areesitoblock-bgcolor); Opacity:1; }
.homepagesitoblock  { border:var(--homepagesitoblock-border); color:white; background-color:var(--homepagesitoblock-bgcolor); Opacity:1; }
.imgareesitoblock {
	Opacity: 0.9;
	-webkit-animation: tilt-in-fwd-tr 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	animation: tilt-in-fwd-tr 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.imghomepagesitoblock { Opacity:0.9; }
.gmb { background-color:var(--gmb-bgcolor-rgb); background-color:var(--gmb-bgcolor-rgba); border-top: solid 2px #006666; border-left: solid 2px #006666; border-right: solid 5px #003333; border-bottom: solid 5px #003333; box-shadow:var(--boxshadow); }

.imgareesitoblock { opacity:var(--imgareesitoblock-opacity); }
.imghomepagesitoblock { opacity:var(--imghomepagesitoblock-opacity); }

.imgoff45 { background-color:var(--imgoff45-bgcolor); border:var(--imgoff45-border); opacity:var(--imgoff45-opacity); }
.imgoff45:hover { box-shadow:var(--imgoff45-hover-boxshadow); border:var(--imgoff45-hover-border); opacity:var(--imgoff45-hover-opacity); }

.h1gmb { background-color: #066;background-image: linear-gradient(#399,#066);border: solid 1px #033;border-radius:0.25em;box-shadow:0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);color: #9ccece;font-family: 'Fjalla One',sans-serif; font-size: 2.5em;font-weight:normal; height:fit-content;left:0;margin:0.5em;padding:0.25em;position:relative;width:fit-content;z-index:100; }

.lppanelheadline { background-color:rgb(153,204,204); background-color:rgba(153,204,204,0.7); border-radius:1em; display:block; min-height:12em; margin-bottom:1em; margin-top:0.5em; padding:0.5em; }
.lpheadline {
	display: inline-block;
	background-color: rgba(0,0,0,0.2);
	border-radius: 0.25em;
	color: rgba(255,255,255,0.9);
	font-family: 'Fjalla One', sans-serif;
	font-size: 2.5em;
	font-weight: normal;
	padding: 0.25em;
	text-align: left;
	z-index: 0;
	text-transform: uppercase;
	margin: 0 auto;
	text-align: left;
	word-break: break-word;
	-webkit-animation: bounce-in-top 1.1s both;
	animation: bounce-in-top 1.1s both;
}

.lpheadline:hover {
		-webkit-animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
		animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

.lpsubheadline {
	display: inline-block;
	border-radius: 0.25em;
	color: rgba(0,51,51,0.8);
	font-family: 'Anton', sans-serif;
	font-size: 1.5em;
	font-weight: normal;
	letter-spacing: 0.0125em;
	margin: 0.5em;
	padding: 0.25em;
	position: sticky;
	text-align: right;
	text-transform: none;
	z-index: 0;
	-webkit-animation: bounce-in-top 1.1s both;
	animation-delay: 1s;
	animation: bounce-in-top 1.1s both;
	animation-delay: 1s;
}
.lppanelheadline > h1 { color:rgba(238,238,238,0.9); }

.lppanelheadline > h1 {
	color: rgba(238,238,238,0.9);
	-webkit-animation: tracking-in-expand 1.1s both;
	animation: tracking-in-expand 1.1s both;
}

/* ----------------- HTML ELEMENTS WITH COLOR DEFINITIONS -------------------*/
button	{ color:var(--button-color); background-color:var(--button-bgcolor); border:var(--button-border); box-shadow:var(--button-boxshadow); }
details	{ color:var(--details-color); background-color:var(--details-bgcolor); background-image:var(--details-bgimage); border:var(--details-border); border-radius:var(--details-borderradius); padding:var(--details-padding); }

/* div { border:var(--div-border); background-color:var(--div-bgcolor-rgb); background-color:var(--div-bgcolor-rgba); } */

div.site { border:var(--div-site-border); color:var(--div-site-color); background-color:var(--div-site-bgcolor-rgb); background-color:var(--div-site-bgcolor-rgba);}

fieldset { border:var(--fieldset-border); background-color:var(--fieldset-bgcolor-rgb); background-color:var(--fieldset-bgcolor-rgba); box-shadow:var(--boxshadow); }
fieldset.site { border:var(--fieldset-site-border); color:var(--fieldset-site-color); background-color:var(--fieldset-site-bgcolor-rgb); background-color:var(--fieldset-site-bgcolor-rgba); box-shadow:var(--boxshadow); }
fieldset.site li { color:var(--fieldset-site-li-color); }

hr	{ color:var(--hr-color); }
h1 { color:var(--h1-color); }
h2, h3, h4 { color:var(--body-color);  }


input { box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); }
input[type=submit] { color:var(--button-color); background-color:var(--button-bgcolor); border:var(--button-border); }
input[type=file] { color:var(--button-color); background-color:var(--button-bgcolor); border:var(--input-type-text-border); }
input[type=text] { border:var(--input-type-text-border); }
input[type=text]:hover, :focus  { background-color:var(--input-type-text-focus-bgcolor); }

legend { border:var(--legend-border); color:var(--legend-color); background-color:var(--legend-bgcolor); background-image:var(--legend-bgimage); }
legend.site { border:var(--legend-site-border); color:var(--legend-site-color); background-color:var(--legend-site-bgcolor); background-image:var(--legend-site-bgimage); }

summary	{ color:var(--summary-color); background-color:var(--summary-bgcolor); background-image:var(--summary-bgimage); border:var(--summary-border); border-radius:var(--summary-borderradius); padding:var(--summary-padding); }

/* TABLES AND ELEMENTS */
table { color:var(--table-color); box-shadow:var(--boxshadow); }
table.newsrow1 tr { background-color:var(--table-newsrow1-bgcolor); }
table.newsrow2 tr { background-color:var(--table-newsrow2-bgcolor); }

table.menu2 th { color:var(--table-menu2-th-color); background-color:var(--table-menu2-th-bgcolor); border-top:var(--table-menu2-th-bordertop); }
table.menu2 td { background-color:var(--table-menu2-td-bgcolor); }
table.menu2 a:link { color:var(--table-menu2-a-link-color); }
table.menu2 a:visited { color:var(--table-menu2-a-visited-color); }
table.menu2 a:hover { color:var(--table-menu2-a-hover-color); background-color:var(--table-menu2-a-hover-bgcolor); text-shadow:var(--table-menu2-a-hover-textshadow)}
table.menu2 a:active { color:var(--table-menu2-a-active-color); }

/*
thead { color:#600; background-color:rgba(200,200,200,0.5); border:#ccc solid 0.0625rem;}
tbody { color:#0b5454; background-color:rgba(221,221,221,0.5); border:#ccc solid 0.0625rem;}
tbody tr:hover { color:#000; background-color:#fff; border:#ccc solid 0.0625rem;} 
tfoot { color:#000; background-color:rgba(200,200,200,0.5); border:#ccc solid 0.0625rem;}
*/

/* LINKS AND PSEUDO-CLASSES */


/* unvisited link */
/* visited link */	
/* mouse over link - a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.*/
/* selected link - a:active MUST come after a:hover in the CSS definition in order to be effective.*/

a { color:var(--a-color); }
a:link { color:var(--a-link-color); }
a:visited { color:var(--a-visited-color); }
a:hover { color:var(--a-hover-color); background-color:var(--a-hover-bgcolor); background-image:var(--a-hover-bgimage); border-radius:0.5rem; text-decoration-color:var(--a-hover-text-decoration-color); }

/* SET THE ATTRIBUTES FOR BOTH INNER AND OUTER LINKS  */
/* USE OUTER LINKS FOR LIGHT COLOR ON DARK BACKGROUND */
h1 a { color:var(--h1-a-color); }
h1 a:link { color:var(--h1-a-link-color); }
h1 a:visited { color:var(--hX-a-visited-color); }
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover { color:var(--hX-a-hover-color); }
h1 a:active { color:var(--hX-a-active-color); }

a h1, a h2, a h3, a h4 { color:var(--h1-a-color); }
a h1:link, a h2:link, a h3:link, a h4:link { color:var(--h1-a-link-color); }
a h1:visited, a h2:visited, a h3:visited, a h4:visited { color:var(--hX-a-visited-color); }
a h1:hover, a h2:hover, a h3:hover, a h4:hover { color:var(--hX-a-hover-color); }
a h1:active, a h2:active, a h3:active, a h4:active { color:var(--hX-a-active-color); }

a.menu:link { color:var(--a-menu-link-color); background-color:transparent; }
a.menu:visited { color:var(--a-menu-visited-color); background-color:transparent; }
a.menu:hover { color:var(--a-menu-hover-color); background-color:transparent;  }
a.menu:active { color:var(--a-menu-active-color); background-color:transparent;  }

a.red:link { color:var(--a-red-link-color); background-color:var(--a-red-link-bgcolor); }
a.red:visited { color:var(--a-red-visited-color); background-color:var(--a-red-visited-bgcolor); }
a.red:hover { color:var(--a-red-hover-color); background-color:var(--a-red-hover-bgcolor); }
a.red:active { color:var(--a-red-active-color); background-color:var(--a-red-active-bgcolor); }

a.top:link { color:var(--a-top-link-color); background-color:var(--a-top-link-bgcolor); }
a.top:visited { color:var(--a-top-visited-color); background-color:var(--a-top-visited-bgcolor); }
a.top:hover { color:var(--a-top-hover-color); background-color:var(--a-top-hover-bgcolor); }
a.top:active { color:var(--a-top-active-color); background-color:var(--a-top-active-bgcolor); }


/* ARIA 2019 11 */
h1.aria { font-family: 'Roboto', Arial, sans-serif; font-size: 1.5em; font-weight: 700; margin-top:1em; margin-bottom:1em; }
h1.aria::before, h1.aria::after { content: attr(aria-label); position: absolute; top: 0; transform: translate(-50%, -50%); text-shadow: 0.01em 0.01em 0.01em rgba(0, 0, 0, 0.3); width:100%; }
h1.aria::before { animation: floatAbove 3.5s ease-in-out infinite; -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%); clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%); }
h1.aria::after { margin-bottom:50px; opacity: 0.65; filter: blur(0.02em); transform: translate(-50%, -50%) rotateX(21deg); animation: floatBelow 3.5s ease-in-out infinite; -webkit-clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%); clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%); }