@charset "utf-8";

header{background-color:var(--customcolor2);transition-property:all;transition-duration:0.3s;transition-timing-function:ease-in-out;z-index:2;}
.TopHeader{background-color:var(--customcolor2);padding:12px 0;}
.TopHeader .Container > .Box{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;}
/**** Logo ****/
.Logo{flex:1 0 0;display:flex;justify-content:flex-start;order:1;}
	 .Logo a{width:166px;display:block;}
/**** Countrymenu (menu lingue) ****/
.Countrymenu{flex:1 0 0;display:flex;justify-content:flex-end;order:3;position:relative;}
.LogoutButton{width:36px;margin-right:12px;padding:6px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;cursor:pointer;}



.Countrymenu button{background-color:transparent;border-left:1px solid var(--customcolor1);border-radius:0;font-family:'Roboto', sans-serif;text-align:inherit;padding-left:24px;display:block;}
	.Countrymenu button i{width:100%;font-size:15px;font-style:normal;font-weight:400;color:var(--customcolor1);margin-bottom:3px;display:block;}
	.Countrymenu button span{font-size:15px;font-weight:700;color:var(--customcolor1);padding-right:12px;position:relative;display:block;}
		.Countrymenu button span::after{height:6px;width:6px;background-color:transparent;content: "";border-top:2px solid var(--customcolor1);border-left:2px solid var(--customcolor1);position:absolute;top:4px;right:0;transform:rotate(225deg);display:block;}
		.countrymenu .Countrymenu button span::after{top:8px;transform:rotate(45deg);}
		.CountrymenuPanel{min-width:156px;background-color:var(--lightaccent);box-shadow:2px 2px 9px -4px rgba(0,0,0,0.40);list-style-type:none;list-style-position:inside;position:absolute;top:calc(100% + 9px);z-index:2;display:none;}
		.CountrymenuPanel a{display:block;border-bottom:1px solid rgba(0,0,0,0.15);font-family:'Roboto', sans-serif;font-size:15px;color:var(--typographydarkcolor);line-height:18px;text-decoration:none;padding:12px 15px;}
		.CountrymenuPanel li:last-of-type a{border-bottom:none;}
		.CountrymenuPanel a:hover, .CountrymenuPanel a.SelectedItem {background-color:#ffffff;}
		.countrymenu .CountrymenuPanel{display:block;}
.BottomHeader{background-color:var(--customcolor1);}
	/**** Mainmenu (menu principale) ****/
	button.MainmenuOpenButton{height:36px;width:36px;background-color:var(--customcolor2);border-radius:4px;margin:3px;padding:3px;display:none;}
	nav.Mainmenu{}
		.Mainmenu ul{list-style-type: none;list-style-position:inside;margin-right:-12px;margin-left:-12px;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;}
		.Mainmenu ul li{padding:0 12px;}
		.Mainmenu ul li a{font-size:15px;color:#ffffff;text-decoration:none;padding:12px 18px;display:block;position:relative;}
		.Mainmenu ul li a:hover{color:var(--customcolor2);text-decoration:none;}
		.Mainmenu ul li a.SelectedItem{color:var(--customcolor2);}
		.Mainmenu ul li a::after{height:3px;width:0;background-color:var(--customcolor2);content:"";margin:0 auto;position:absolute;right:0;bottom:0;left:0;opacity:0;transition-property:width,opacity;transition-duration:0.4s,0.8s;}
		.Mainmenu ul li a.SelectedItem::after, .Mainmenu ul li a:hover::after{width:100%;opacity:1;}

/* Regole dispositivi >1400px */ 
@media all and (min-width: 1400px) {  
   
}


/* Regole dispositivi orizzontali piccoli (tablet orizzontale, laptop etc.) */ 
@media all and (min-width: 990px) and (max-width: 1399px) and (orientation: landscape) {

/**** Countrymenu (menu lingue) ****/	
.Countrymenu button{min-width:auto;}
	
}


/* Regole orientamento verticale */
@media all and (max-width: 1100px) and (orientation: portrait) {
	
/**** Countrymenu (menu lingue) ****/
.Countrymenu{max-width:144px;}
	.Countrymenu button{min-width:auto;}
      
}
	

/* Eccezioni dispositivi mobili orizzontali piccoli */
@media all and (min-width: 381px) and (max-width: 989px) and (orientation: landscape) {

.TopHeader{padding:6px 0;}
	/**** Countrymenu (menu lingue) ****/	
	.Countrymenu{max-width:144px;}
		.Countrymenu button{min-width:auto;padding-top:0;padding-bottom:0;}

	

}

/* Eccezioni dispositivi mobili verticali piccoli e orizzontali piccolissimi*/
@media all and (max-width: 767px) and (orientation: portrait),all and (max-width: 380px){

header{border-bottom:2px solid var(--customcolor1);display:flex;flex-wrap:wrap;align-items:center;position:relative;}	
.TopHeader{width:calc(100% - 60px);padding-top:6px;padding-bottom:6px;order:2;}
	/**** Logo ****/
	.Logo{justify-content:center;}
	/**** Countrymenu (menu lingue) ****/
	.Countrymenu {max-width:72px;position:inherit;}
		.LogoutButton{width:48px;margin-right:12px;padding:6px 3px;}
		.Countrymenu button{border-left:none;padding-right:0;padding-left:0;}
			.Countrymenu button span{padding-right:15px;}
			.Countrymenu button i{display:none;}
		.CountrymenuPanel{width:100vw;min-width:inherit;background-color:var(--customcolor1);box-shadow:02px 2px 9px -4px rgba(0,0,0,0.50);top:56px;right:0;left:0;display:block;opacity:0;visibility:hidden;transition-property:all;transition-duration:0.4s;}
		.countrymenu .CountrymenuPanel{visibility:visible;opacity:1;}	
			.CountrymenuPanel a{border-bottom:1px solid rgba(255,255,255,0.15);color:#ffffff;line-height:21px;padding:15px 15px;}
			.CountrymenuPanel a:hover, .CountrymenuPanel a.SelectedItem {background-color:var(--customcolor1);color:#ffffff;}
			.CountrymenuPanel a.SelectedItem {background-color:var(--customcolor1);color:var(--customcolor2);}
		
	
.BottomHeader{width:60px;background-color:var(--customcolor2);padding-top:9px;padding-bottom:9px;order:1;}
	button.MainmenuOpenButton{height:36px;width:36px;min-width:inherit;border-radius:0;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;position:relative;}	
		button.MainmenuOpenButton::before,button.MainmenuOpenButton::after{height:3px;width:100%;background-color:var(--customcolor1);border-radius:1px;content:"";position:absolute;transition-property:all;transition-duration:0.3s;}
		button.MainmenuOpenButton::before{margin-top:10px;top:0;}
		button.MainmenuOpenButton::after{margin-bottom:10px;bottom:0;}
		.menu button.MainmenuOpenButton::before{width:20px;margin-top:16px;transform:rotate(45deg);}
		.menu button.MainmenuOpenButton::after{width:20px;margin-bottom:15px;transform:rotate(-45deg);}
		button.MainmenuOpenButton img{display:none;}	
	nav.Mainmenu{height:calc(100vh - 56px);width:100vw;min-width:inherit;background-color:var(--customcolor1);position:absolute;top:56px;right:0;left:0;display:block;opacity:0;visibility:hidden;transition-property:all;transition-duration:0.4s;z-index:2;}
	.menu nav.Mainmenu{opacity:1;visibility:visible;}
		.Mainmenu ul{margin-right:0;margin-left:0;flex-direction:column;align-items:flex-start;justify-content:flex-start;}
			.Mainmenu ul li{width:100%;padding:0;}
				.Mainmenu ul li a{border-bottom:1px solid rgba(255,255,255,0.15);color:#ffffff;line-height:21px;padding:15px 15px;}
				.Mainmenu ul li a::after{margin:inherit;}
	body.menu{position:fixed;right:0;top:0;bottom:0;left:0;}

}



/* Regole per dispositivi Retina | */
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-moz-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx) { 

    
}