input:focus, button:focus {outline:0;}

img {
    vertical-align: middle;
}

a{
	text-decoration:none;
}

ul li{ 
	list-style:none;
}

html,body{
	font-family: montserrat,arial, Helvetica, sans-serif ;
	color:#666 /*color-text*/;
	height:100%;
	width:100%;
}

h1{
	font-size: 1.5em;
	text-align:left;
	font-weight: bold;
	color:#db1200/* primary color*/;
}

/* -----------------contenitore e contenuto ------------------ */

.contenitore .contenuto{
	max-width:1200px;
	margin:auto;
	padding: 70px 10px;
}

.contenitore .contenuto a{
	color:#c10b00/* primary color*/;
	text-decoration: underline;
	font-weight: bold;
}

.contenitore .contenuto a:hover{
	color:#c10b00/* primary lightcolor*/;
}

/* -----------------Menu nella versione mobile-----------------*/

.active{
	color:#FFFFFF/* primary super-lightcolor*/;
	background-color: #c10b00/* primary lightcolor*/;
}
	
.active-dropdown{
	color:#FFFFFF /* primary super-lightcolor*/;
	background-color:#c10b00/* primary lightcolor*/;
}

nav{
	height:100%;
	background-color:#c10b00;/* primary lightcolor*			 /* sfondo menu mobile*/
	position:fixed;
	width:100%;
	margin-top:210px;
	visibility:hidden;
	overflow:auto;/* permette lo scroll quando il menu è aperto*/
	z-index: 400; /* Aggiunto per portare il menu mobile in primo piano sopra la barra (#bar ha z-index:200) */
	   
}

nav ul{
	padding-bottom:54px;
}

nav ul li a {
	padding: 20px 0 20px 32px;
	display:block;
	color:#fff;
	font-size:50px;
	font-weight:600;
	transition: background-color 0.3s ease;
}

.submenu{
	color:#000 /* primary super-lightcolor*/;
	padding-left: 55px;
	padding-bottom: 5px;

}


nav ul li ul {
	padding-left:0; 
	padding-bottom:0;
}

nav ul li ul li a {
	font-size:40px;
	font-weight:600;
	padding:20px 0 20px 55px;
	border:hidden; 
}

nav ul li ul li a img {
	width:50px;
	padding:20px 0 20px 20px;
	border:hidden; 
}



.lingua{
	border-top: 1px solid #c10b00/* primary lightcolor*/; 
}

.lingua > a::before{
	content: url(img/earth-globe.svg);
	margin-right: 5px;
}

/* ----------------- div bar per l'attivazione del menu ------------------ */



#bar{
	background-color: rgba(9,9,9,0.8); /* primary color*/ 			/* sfondo della testata */
	 /* background: linear-gradient(60deg,#662482, #f8e100); */
	height:14%;
	width:100%;
	z-index:200;
	position:fixed;
	box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.4);
	transition: all 0.3s ease; /* Aggiunto per transizione fluida allo shrink */
}

#bar #logo{
	float:right;
	margin-right:12px;
	margin-top:1%;
	

}

#logo a img{
	width:90%; 
	float: right; 
	margin-right:2%;
	transition: all 0.3s ease; /* Aggiunto per transizione fluida allo shrink */
}

/* ----------------- Hamburger animation ------------------ */

#hamburger {
  display: none;
}

.menuicon {
 	position:fixed;
	height:100px;
	width:100px;
	margin-left:5px;
	z-index:300;
	transition: all 0.3s ease; /* Aggiunto per transizione fluida allo shrink */
}

.menuicon  span {
    display: block;
    top: 60px;
    width: 100px;
    height:10px;
    left:8px;
    background-color: #fff;
    position: relative;
	border-radius:20px;
    transition-duration: 0;  
    transition-delay: .1s;
}
    
.menuicon  span::after, .menuicon  span::before {
    display: block;
    content: '';
    position: absolute;
    width: 100px;
    height:10px;
    background-color: #fff;
	border-radius:20px;
    transition-duration: .1s;
	-webkit-transition-delay: .1s, 0;
    transition-delay: .1s, 0;
}
.menuicon  span::before {
      margin-top: -25px;
}
.menuicon  span::after {
      margin-top: 25px;
}

#hamburger:checked ~ .menuicon span{
    background-color: rgba(0,0,0,0);
}
    
#hamburger:checked ~ .menuicon span::before {
      margin-top: 10px;
      -webkit-transition-delay: 0, .3s;
      -moz-transition-delay: 0, .3s;
      -ms-transition-delay: 0,.3s;
      -o-transition-delay: 0, .3s;
      transition-delay: 0, .3s;
}
	
#hamburger:checked ~ .menuicon span::after {
      margin-top: 10px;
      -webkit-transition-delay: 0, .3s;
      -moz-transition-delay: 0, .3s;
      -ms-transition-delay: 0,.3s;
      -o-transition-delay: 0, .3s;
      transition-delay: 0, .3s;
}

#hamburger:checked ~ .menuicon span::before {
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      transform: rotate(45deg);
}

#hamburger:checked ~ .menuicon span::after {
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
      transform: rotate(-45deg);
}

/* ----------------- menu animation faccio apparire il menu ------------------ */

#hamburger:checked ~ .menu-visibility {
	visibility:visible;
}

/* ----------------- Stato ridotto allo scroll (nuovo) ------------------ */

#bar.shrink {
    height: 8%; /* Riduce da 14% a 10% */
}

#bar.shrink #logo a img {
    width: 38%; /* Riduce il logo da 70% a 50% */
}

#bar.shrink .menuicon {
    height: 70px; /* Riduce l'altezza dell'hamburger da 100px a 70px */
    width: 70px; /* Riduce la larghezza */
}

#bar.shrink .menuicon span, #bar.shrink .menuicon span::before, #bar.shrink .menuicon span::after {
    height: 7px; /* Riduce lo spessore delle linee da 10px a 7px */
    width: 70px; /* Riduce la larghezza */
}

/* -----------------media per menu orizzontale ------------------ */













@media screen and (min-width: 768px){
	
.menuicon{
	display:none; /* togliere icona hambuger icon */
}
	
#bar #logo{
	
	float:left;
	margin-left:10%;
	margin-top:1%;
	
}

#logo a img{width:70%;float:left;}



nav{
	z-index:300;
	margin-top:2%;
	margin-right:2%;
	height:auto;
	background-color:transparent;
	transition:none;
	width:auto;
	float:right;
	right:12px;
	visibility:visible;
	font-family:montserrat,arial, Helvetica, sans-serif ;
	overflow:inherit;
}

.active{
	background-color:transparent;
	color:#fff /* primary super-lightcolor*/;
}
	
.active-dropdown{
	color:#fff;
	background-color:#c10b00/* primary lightcolor*/;
}

nav ul{
	padding:0;
}
	
nav ul li a {						/* colori voci menu desktop */
	padding:0;
	display:inline;
	font-size:16px;
	color: #fff;
	transition: all 0.3s ease; /* Aggiunto per transizione fluida allo shrink */
}

nav ul li a:hover {
	background-color:transparent;
	color:#c10b00 /* primary super-lightcolor*/;    /* colore hover menu desktop*/
}
	
.submenu{
	padding-left: 0;
	color:#fff;
}


nav ul li {	
	margin:0;
	float:left;
	position:relative;
	padding:0 16px;
	transition: all 0.3s ease; /* Aggiunto per transizione fluida allo shrink */
}

.submenu::after{
	content: url(img/arrow-down.svg);
	float: right;
	padding-left: 6px;
}


	
/* ----------------- dropdown - attivare il menu a tendina ------------------ */
	
nav ul li ul { 
	position:fixed;
	height:0;
	overflow:hidden;
	background-color: #fff /* primary color*/
}
	
nav ul li:hover ul{
	height:auto;
	padding-top: 14px;
	position: absolute;
    right: 0;	
}

nav ul li ul li {
	font-size: 14px;
	font-weight: normal;
	float:none;
	padding:0;
	min-width: 160px;
	border-top: 1px solid #fff/* primary lightcolor*/;
}

nav ul li ul li a {
	font-size:25px;
	font-weight:600;
	padding: 16px 32px;
	display: block;
	background-color: #c10b00/* primary color*/;             /* colore menu a tendina */
	color: #ffffff;
	font-weight: normal;
	transition: all 0.3s ease; /* Aggiunto per transizione fluida allo shrink */
}



nav ul li ul li a:hover {
	background-color:#ffff/* primary lightcolor*/;		/* colore sfondo hover menu a tendina */
	color:#c10b00 /* primary super-lightcolor*/;			/* colore scritta hover menu a tendina */
}

.lingua{
	border-top: 0;
	border-left: solid 1px #fff;
	float: left;
}

/* ----------------- Riduzioni per desktop allo scroll (nuovo) ------------------ */

#bar.shrink nav ul li a {
    font-size: 14px; 
    padding: 0 12px; 
}

#bar.shrink nav ul li {
    padding: 0 12px; /* Riduce padding dei li */
	
}

#bar.shrink nav ul li ul li a {
    font-size: 35px; /* Riduce da 40px a 35px */
    padding: 14px 28px; /* Riduce padding */
}

}