/*	-------------------------------------------------------------------------- */
/*	Mobile
/*	-------------------------------------------------------------------------- */
	@media screen and (max-width: 440px) {

		#Header {
			position: fixed;
			left: 0px;
			top: 0px;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 7.5rem;
			background-color: var(--Palette2);
			color: var(--Header_Text_Color);
			z-index: 100;
			font-family: var(--Header_Font);
			box-sizing: border-box;
			z-index: 9999;
			padding-bottom: 0rem;
			box-shadow: 0px 3px 11px rgba(0, 0, 0, 0.04);
		}
		#Header > .Inner {
			display: flex;
			position: relative;
			width: 90%;
			height: 100%;
			justify-content: space-between;
			align-items: flex-start;
			flex-direction: row;
			padding-top: 1rem;
		}
		#Header > .Inner .Logo {
			position: relative;
			z-index: 1;
			display: flex;
			align-items: center;
			color: #ffffff;
			margin-top: 0.3rem;
			right: 0.5rem;
		}
		#Header > div > div:nth-child(2) > a {
			left: 1rem;
		}
		#Header > .Inner .Logo span {
			font-size: 1.5rem;
			color: #ffffff;
		}
		#Header > .Inner .Logo IMG {
			height: 3.3rem;
		        /*position: relative;
		        bottom: 0.2rem;*/
		    margin-top: -0.1rem;
		}
		#Header > .Inner .Logo IMG.Back {
			filter: invert(100%) saturate(0%);
			height: 1.8rem;
		}
		#Header > .Inner .Logo .Back.homeR {
			filter: invert(0%) saturate(100%);
			width: 8.5rem;
			height: auto !important;
		}
		#Header > div > div:nth-child(3) > a.Logo > span {
			font-size: 1.3rem;
			width: auto;
			color: #ffffff;
		}
		#Header #MobileMenu {
			display: block;
			position: static;
			right: 1rem;
			top: 0.8rem;
			font-size: 1.9rem;
			line-height: 1em;
			margin-right: 2rem;
			color: #ffffff;
			margin-right: -4.5rem;
		}
		#Header #UserMenu {
			display: none;
			position: absolute;
			right: 4.7rem;
			top: 1.15rem;
			font-size: 2.2rem;
			line-height: 1em;
		}
		#Header > .Inner .LoginButton {
			display: block;
		}
		.LoginButton > .Text {
			display: none;
		}
		.LoginButton > .fa-caret-right {
			display: none;
		}
		.LoginButton > .fa-user {
			font-size: 2.6rem;
			color: #0a0a0a;
		}
		#Header #HeaderMenu {
			display: none;
			position: fixed;
			left: 0;
			top: 4rem;
			background: #000000;
			width: 100%;
			overflow: hidden;
			overflow-y: auto;
			height: calc(100vh - 4rem);
			overscroll-behavior: contain;
			align-items: center;
		}
		#Header #HeaderMenu > UL {
			margin:0;
			list-style: none;
			list-style-type: none;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: absolute;
			top: 0;
			overflow: scroll;
			padding: 10rem 0rem;
		}
		#Header #HeaderMenu > UL > LI,
		#Header #HeaderMenu > UL > LI > UL,
		#Header #HeaderMenu > UL > LI > UL > LI {
			margin:0;
			padding:0;
			list-style: none;
			list-style-type: none;
			display: block;
			position: relative;
		}
		#Header #HeaderMenu > UL, {
			
		}
		#Header #HeaderMenu > UL > LI,
		#Header #HeaderMenu > UL > LI > UL > LI {
			font-size: 1.5rem;
			line-height: 4rem;
/*			color: var(--Page_Text_Color);*/
			color: #ffffff;
			padding-left: 1rem;
			padding-right: 1rem;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			box-sizing: border-box;
			width:100vw;
			-webkit-tap-highlight-color: transparent;
			-webkit-touch-callout: none;
			-webkit-user-select: none;
			-khtml-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
/*			background-color: var(--Header_Mob_Background_Color);*/
			background: transparent;
			text-align: center;
			font-family: var(--Font_Text);
			text-transform: uppercase;
			font-weight: 700;
    		font-size: 2rem;
		}
		/*#Header #HeaderMenu > UL > LI > A,
		#Header #HeaderMenu > UL > LI > UL > LI > A {
			display: block;
			text-decoration: none;
			color: var(--Header_SubMenu_Background);
			margin-left: -1rem;
			margin-right: -1rem;
			padding-left: 1rem;
			padding-right: 1rem;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			box-sizing: border-box;
			width:100vw;
			height: 4.5rem;
			outline: none;
			text-transform: uppercase;
	        text-align: center;
	        font-weight: 700;
    		font-size: 2rem;
		}*/
		#Header #HeaderMenu > UL > LI > UL {
			display: none;
			margin-left: -1rem;
			margin-right: -1rem;
			background: var(--Header_Mob_Background_Color);
			padding: 0.5rem 0rem;
		}
		#Header #HeaderMenu > UL > LI > UL > LI > A{
			text-transform: capitalize;
        	font-size: 1.6rem;
        	line-height: 4.5rem;
        	height: 4.5rem;
        	font-weight: 500;
		}
		#HeaderMenu > UL > LI:ACTIVE,
		#HeaderMenu > UL > LI:FOCUS,
		#HeaderMenu > UL > LI:HOVER,
		#HeaderMenu > UL > LI > A:ACTIVE,
		#HeaderMenu > UL > LI > A:FOCUS,
		#HeaderMenu > UL > LI > A:HOVER,
		#HeaderMenu > UL > LI > UL > LI:ACTIVE,
		#HeaderMenu > UL > LI > UL > LI:FOCUS,
		#HeaderMenu > UL > LI > UL > LI:HOVER,
		#HeaderMenu > UL > LI > UL > LI > A:ACTIVE,
		#HeaderMenu > UL > LI > UL > LI > A:FOCUS,
		#HeaderMenu > UL > LI > UL > LI > A:HOVER {
			background-color: transparent; !important;
/*			color: var(--Palette1) !important;*/
		}
		#HeaderMenu > UL > LI:HOVER > UL,
		#HeaderMenu > UL > LI > UL:HOVER {
			display: block !important;
		}
		#HeaderMenu > UL > LI > UL > LI {
			background-color: #f5f5f5;
		}


		#Header > .Inner #SearchBlock {
			position: absolute;
			right: 0rem;
			bottom: 1.6rem;
			margin: 0px;
			padding: 0px;
			line-height: 2.6rem;
			height: 2.4rem;
			width: 100%;
			-webkit-border-radius: 0.25rem;
			-moz-border-radius: 0.250rem;
			border-radius: 0.25rem;
			background-color: var(--Box_Evento_Authors_Color);
			border: 0.05rem solid #fff;
		}
		#Header > .Inner #SearchBlock .GsTextBox {
			margin: 0px;
			padding: 0px;
			outline: none;
			font-size: 1.2rem;
			line-height: 2.6rem;
			height: 2.6rem;
			padding-left: 0.7rem;
			width: 21.4rem;
			color: #666666;
			font-weight: 400;
			float: left;
			border: 0px;
			background-color: transparent;
			font-family: var(--Header_Search_Box_Font);
		}
		#Header > .Inner #SearchBlock #bt {
			font-size: 1.5rem;
			line-height: 2.6rem;
			height: 2.5rem;
			color: #fff;
			cursor: pointer;
			float: right;
			width: 2.6rem;
			text-align: center;
			font-weight: 300;
		}

/*------------------------------------------------------------------*/


		 /* =========================
		    HAMBURGER (2 linee)
		    ========================= */
		 #Header #MobileMenu{
		 position: relative;
		 width: 56px;
		 height: 56px;
		 cursor: pointer;
		 user-select: none;
		 font-size: 0;
		 color: transparent;
		 transform: translateX(-18px);
		 z-index: 1000000;
		 margin-right: -3rem;
		 padding-bottom: 0.7rem;
		 }

		 #Header #MobileMenu .BurgerLine{
		   position: absolute;
		   left: 50%;
		   width: 34px;
		   height: 4px;
		   background: #000;
		   border-radius: 0px;
		   transform: translateX(-50%);
		   transition: transform .25s ease, top .25s ease, opacity .2s ease;
		 }

		 #Header #MobileMenu .L1{ top: 25px; }
		 #Header #MobileMenu .L2{ top: 33px; }

		 /* hover: “||” senza sovrapporsi */
		 #Header #MobileMenu:hover .L1{
		   top: 27.5px;
		   transform: translateX(calc(-50% - 2px)) rotate(90deg);
		 }
		 #Header #MobileMenu:hover .L2{
		   top: 27.5px;
		   transform: translateX(calc(-50% + 6px)) rotate(90deg);
		 }

		 /* se vuoi che resti “||” anche quando è aperto (non solo hover) */
		/* #HeaderPocket.is-open ~ #MobileMenu .L1,
		 #HeaderPocket.is-open ~ #MobileMenu .L2{
		   top: 27.5px;
		 }*/


		 /* =========================
		    MENU FULLSCREEN + ANIMAZIONE (slide top -> down)
		    ========================= */

		 #HeaderPocket{ position: relative; }

		 /* stato chiuso: renderizzato ma invisibile (serve per animare) */
		 #HeaderPocket #HeaderMenu{
		   position: fixed;
		   left: 0;
		   top: 0;
		   width: 100vw;
		   height: 100vh;
		   background: #fff;
		   z-index: 999999;

		   display: flex;
		   align-items: flex-start;
		   justify-content: center;

		   opacity: 0;
		   transform: translateY(-24px);
		   visibility: hidden;
		   pointer-events: none;

		   transition: transform .45s ease, opacity .45s ease, visibility 0s linear .45s;
		 }

		 /* stato aperto */
		 #HeaderPocket.is-open #HeaderMenu{
		   opacity: 1;
		   transform: translateY(0);
		   visibility: visible;
		   pointer-events: auto;
		   transition: transform .45s ease, opacity .45s ease;
		 }

		 #HeaderPocket.is-open #HeaderMenu > ul{
		   margin: 0;
		   padding: 0;
		   list-style: none;
		   display: flex;
		   flex-direction: column;
		   align-items: center;
		   justify-content: flex-start;
		   gap: 22px;
		   padding-top: 6rem;
		 }

		 #HeaderPocket.is-open #HeaderMenu > ul > li{
		   margin: 0;
		   padding: 0;
		   list-style: none;
		 }

		 #HeaderPocket.is-open #HeaderMenu > ul > li > a,
		 #HeaderPocket.is-open #HeaderMenu > ul > li{
		   font-family: var(--Font_Normal);
		   font-size: 3rem;
		   font-weight: 700;
		   letter-spacing: 0.08em;
		   text-transform: uppercase;
		   color: var(--Palette1dark);
		   line-height: 1.05em;
		   background: transparent;
		   text-decoration: none;
		   font-size: 2rem;
		   transition: all 0.2s ease;
		 }
		 #HeaderPocket.is-open #HeaderMenu > ul > li:hover {
		   transform: translateY(-0.5rem);
		 }

		 /* =========================
		    X chiusura
		    ========================= */
		 #MenuClose{
		   position: absolute;
		   top: 1rem;
		   left: 50%;
		   transform: translateX(-50%);
		   font-size: 3.5rem;
		   line-height: 1;
		   font-weight: 300;
		   color: var(--Palette1);
		   cursor: pointer;
		   z-index: 1000;
		   /* user-select: none; */
		 }


		 /* =========================
		    SOCIAL in fondo
		    ========================= */
		 #MenuSocial{
		   position: absolute;
		   left: 50%;
		   bottom: 3rem;
		   transform: translateX(-50%);
		   display: flex;
		   gap: 1rem;
		 }

		 #MenuSocial .MenuSocialBtn{
		   display: inline-flex;
		   font-family: var(--Font_Normal);
		   align-items: center;
		   justify-content: center;
		   min-width: 7rem;
		   height: 2.3rem;
		   padding: 0 18px;
		   background: var(--Palette1dark);
		   color: #fff;
		   text-decoration: none;
		   text-transform: uppercase;
		   letter-spacing: 0.18em;
		   font-weight: 700;
		   font-size: 0.8rem;
		   border-radius: 0.2rem;
		 }


		 /* =========================
		    FIX LOGIN: rendo visibile UserMenu dentro al menu aperto
		    ========================= */

		 /* questa era la causa del bug: la tua regola lo nasconde sempre */
		 #Header #UserMenu{ display: none; }

		 /* override quando è nel menu fullscreen */
		 #HeaderPocket.is-open #HeaderMenu #UserMenu{
		   display: inline-block !important;
		   position: static !important;
		   font-size: inherit;
		   line-height: inherit;
		   color: #000;
		   margin-left: 0.6rem;
		   font-family: var(--Font_Normal);
		   font-weight: 700;
		   font-size: 2rem;
		 }
		 .fa-user:before {
		     content: "\f007";
		     font-family: 'Font Awesome 6 Pro';
		     font-size: 1.8rem;
		     position: relative;
		     bottom: 0.25rem;
		 }

		 /* anche l’anchor (icona) che sposti dentro .UserPocket: rendila visibile/inline */
		 #HeaderPocket.is-open #HeaderMenu .UserPocket a.Logo{
		   display: inline-flex !important;
		   align-items: center;
		   justify-content: center;
		   width: auto !important;
		   margin: 0 !important;
		 }

		 /* la li UserPocket la trattiamo come voce menu “speciale” */
		 #HeaderPocket.is-open #HeaderMenu .UserPocket{
		   display: flex;
		   align-items: center;
		   justify-content: center;
		   gap: 0.8rem;
		   cursor: pointer;
		 }

		 /* evita che vecchie regole del menu (float/height/line-height) sporchino */
		 #HeaderPocket.is-open #HeaderMenu,
		 #HeaderPocket.is-open #HeaderMenu *{
		   float: none !important;
		 }

		 #HeaderPocket #HeaderMenu{ display:flex !important; }

		 #HeaderPocket #HeaderMenu{
		   transform: translateY(-100%);
		 }
		 #HeaderPocket.is-open #HeaderMenu{
		   transform: translateY(0);
		 }





		
	}



/*	-------------------------------------------------------------------------- */
/*	Desktop  
/*	-------------------------------------------------------------------------- */
@media screen and (min-width: 441px) {

		  #Header{
		    position: absolute;
		    left: 0;
		    top: 0;
		    width: 100%;
		    height: 8.8rem;
		    background-color: var(--Palette2);
		    color: var(--Palette1dark);
		    z-index: 9999;
		    font-family: var(--Header_Font);
		    box-sizing: border-box;
		    box-shadow: 0 -2px 16px rgba(0,0,0,0.2);
		  }

		  #Header > .Inner{
		    margin: 0 auto;
		    width: 99%;
		    height: 100%;
		    display: flex;
		    justify-content: space-between;
		    align-items: center;
		    position: relative;
		  }

		  .header-menu{
		    width: 12rem;
		    display: flex;
		    justify-content: center;
		    align-items: center;
		  }

		  #Header > .Inner .Logo{
		    position: relative;
		    z-index: 1;
		    display: block;
		    width: 12rem;
		    margin-top: 0.4rem;
		    left: 0.1rem;
		  }

		  #Header > .Inner .Logo .Back.homeR{
		    width: 99%;
		    filter: invert(0%) saturate(100%);
		  }


		  /* =========================
		     HAMBURGER (2 linee)
		     ========================= */
		  #Header #MobileMenu{
		   position: relative;
		   width: 56px;
		   height: 56px;
		   cursor: pointer;
		   user-select: none;
		   font-size: 0;
		   color: transparent;
		   transform: translateX(-18px);
		   z-index: 1000000;
		   margin-right: 1.5rem;
		   padding-bottom: 0.7rem;
		  }

		  #Header #MobileMenu .BurgerLine{
		    position: absolute;
		    left: 50%;
		    width: 34px;
		    height: 4px;
		    background: #000;
		    border-radius: 0px;
		    transform: translateX(-50%);
		    transition: transform .25s ease, top .25s ease, opacity .2s ease;
		  }

		  #Header #MobileMenu .L1{ top: 25px; }
		  #Header #MobileMenu .L2{ top: 33px; }

		  /* hover: “||” senza sovrapporsi */
		  #Header #MobileMenu:hover .L1{
		    top: 27.5px;
		    transform: translateX(calc(-50% - 2px)) rotate(90deg);
		  }
		  #Header #MobileMenu:hover .L2{
		    top: 27.5px;
		    transform: translateX(calc(-50% + 6px)) rotate(90deg);
		  }

		  /* se vuoi che resti “||” anche quando è aperto (non solo hover) */
		 /* #HeaderPocket.is-open ~ #MobileMenu .L1,
		  #HeaderPocket.is-open ~ #MobileMenu .L2{
		    top: 27.5px;
		  }*/


		  /* =========================
		     MENU FULLSCREEN + ANIMAZIONE (slide top -> down)
		     ========================= */

		  #HeaderPocket{ position: relative; }

		  /* stato chiuso: renderizzato ma invisibile (serve per animare) */
		  #HeaderPocket #HeaderMenu{
		    position: fixed;
		    left: 0;
		    top: 0;
		    width: 100vw;
		    height: 95vh;
		    background: #fff;
		    z-index: 999999;

		    display: flex;
		    align-items: flex-start;
		    justify-content: center;

		    opacity: 0;
		    transform: translateY(-24px);
		    visibility: hidden;
		    pointer-events: none;

		    transition: transform .45s ease, opacity .45s ease, visibility 0s linear .45s;
		  }

		  /* stato aperto */
		  #HeaderPocket.is-open #HeaderMenu{
		    opacity: 1;
		    transform: translateY(0);
		    visibility: visible;
		    pointer-events: auto;
		    transition: transform .45s ease, opacity .45s ease;
		  }

		  #HeaderPocket.is-open #HeaderMenu > ul{
		    margin: 0;
		    padding: 0;
		    list-style: none;
		    display: flex;
		    flex-direction: column;
		    align-items: center;
		    justify-content: flex-start;
		    gap: 22px;
		    padding-top: 6rem;
		  }

		  #HeaderPocket.is-open #HeaderMenu > ul > li{
		    margin: 0;
		    padding: 0;
		    list-style: none;
		  }

		  #HeaderPocket.is-open #HeaderMenu > ul > li > a,
		  #HeaderPocket.is-open #HeaderMenu > ul > li{
		    font-family: var(--Font_Normal);
		    font-size: 3rem;
		    font-weight: 700;
		    letter-spacing: 0.08em;
		    text-transform: uppercase;
		    color: var(--Palette1dark);
		    line-height: 1.05em;
		    background: transparent;
		    text-decoration: none;
		    font-size: 2.2rem;
		    transition: all 0.2s ease;
		  }
		  #HeaderPocket.is-open #HeaderMenu > ul > li:hover {
		    transform: translateY(-0.5rem);
		  }

		  /* =========================
		     X chiusura
		     ========================= */
		  #MenuClose{
		    position: absolute;
		    top: 1rem;
		    left: 50%;
		    transform: translateX(-50%);
		    font-size: 3.5rem;
		    line-height: 1;
		    font-weight: 300;
		    color: var(--Palette1);
		    cursor: pointer;
		    user-select: none;
		  }


		  /* =========================
		     SOCIAL in fondo
		     ========================= */
		  #MenuSocial{
		    position: absolute;
		    left: 50%;
		    bottom: 3rem;
		    transform: translateX(-50%);
		    display: flex;
		    gap: 1rem;
		  }

		  #MenuSocial .MenuSocialBtn{
		    display: inline-flex;
		    font-family: var(--Font_Normal);
		    align-items: center;
		    justify-content: center;
		    min-width: 7rem;
		    height: 2.3rem;
		    padding: 0 18px;
		    background: var(--Palette1dark);
		    color: #fff;
		    text-decoration: none;
		    text-transform: uppercase;
		    letter-spacing: 0.18em;
		    font-weight: 700;
		    font-size: 0.8rem;
		    border-radius: 0.2rem;
		  }


		  /* =========================
		     FIX LOGIN: rendo visibile UserMenu dentro al menu aperto
		     ========================= */

		  /* questa era la causa del bug: la tua regola lo nasconde sempre */
		  #Header #UserMenu{ display: none; }

		  /* override quando è nel menu fullscreen */
		  #HeaderPocket.is-open #HeaderMenu #UserMenu{
		    display: inline-block !important;
		    position: static !important;
		    font-size: inherit;
		    line-height: inherit;
		    color: #000;
		    margin-left: 0.6rem;
		    font-family: var(--Font_Normal);
		    font-weight: 700;
		    font-size: 2.2rem;
		  }
		  .fa-user:before {
		      content: "\f007";
		      font-family: 'Font Awesome 6 Pro';
		      font-size: 1.8rem;
		      position: relative;
		      bottom: 0.25rem;
		  }

		  /* anche l’anchor (icona) che sposti dentro .UserPocket: rendila visibile/inline */
		  #HeaderPocket.is-open #HeaderMenu .UserPocket a.Logo{
		    display: inline-flex !important;
		    align-items: center;
		    justify-content: center;
		    width: auto !important;
		    margin: 0 !important;
		  }

		  /* la li UserPocket la trattiamo come voce menu “speciale” */
		  #HeaderPocket.is-open #HeaderMenu .UserPocket{
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    gap: 0.8rem;
		    cursor: pointer;
		  }

		  /* evita che vecchie regole del menu (float/height/line-height) sporchino */
		  #HeaderPocket.is-open #HeaderMenu,
		  #HeaderPocket.is-open #HeaderMenu *{
		    float: none !important;
		  }

		  #HeaderPocket #HeaderMenu{ display:flex !important; }

		  #HeaderPocket #HeaderMenu{
		    transform: translateY(-100%);
		  }
		  #HeaderPocket.is-open #HeaderMenu{
		    transform: translateY(0);
		  }




}