html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      width: 100%;
      overflow: auto;
      background: #ffffff;
    }


:root {
  --real_width:100vw;
  --square_w: calc(var(--real_width) / 28); /* global scope */
  --square_w_20perc: calc(var(--square_w) / 5); /* global scope */
}

.solomobile{
	display:none;
}

* {
  box-sizing: border-box;
}

video {
  background: transparent;
}

.container{
 display:contents;
}

    /* Griglia principale */
    .grid {
      display: grid;
      width: var(--real_width);
      /* height: 1600vh; */
      grid-template-columns: repeat(28, calc(100% / 28));
	        /* grid-template-columns: repeat(28, var(--square_w)); */
			
      /* grid-auto-rows: 1fr; */
	  /* grid-auto-rows: calc(100vw / 28); */
	  grid-auto-rows: var(--square_w);
	  overflow-x: hidden;
    }

    /*quadrati della griglia */
    .grid > div:not(.top_menu_container) {
      /* aspect-ratio: 1 / 1; */
      border: 1px dotted #c6c6c6;
      box-sizing: border-box;
    }
	
	/************top menu************/
	.top_menu_container{
		grid-column: 2/ span 16;
		/* grid-row: 2 / span 1; */
		
	}
	
	/* .top_menu_container:has(.sub_menu){ */
		/* grid-row: 2 / span 2 !important; */
	/* } */
	
	.top_menu_container_fisso{
		height:53px;
		width:100%;
		position: fixed;
		item-justify:center;
		top: 30px;
		left: 0;
		right: 0;
		opacity: 0;          /* inizialmente invisibile */
		visibility: hidden;  /* non cliccabile */
		transition: opacity 0.4s ease; /* durata del fade */
		z-index: 999;
		backdrop-filter:blur(25);
		background-color:rgba(220, 220, 220, 0.5);
	}
	
	.top_menu_container_fisso.mostra {
    opacity: 1;
    visibility: visible;
    }
	
	
	 .top_menu{
		height: 100%;
		display:grid;
		grid-template-columns: 1fr 2fr 5fr 2fr 1fr 2fr 1fr 2fr;
		grid-template-rows:1fr 1fr;
		justify-items:end;
		align-items:center;
	}
	
    /* .sub_menu{ */
		/* grid-row:2; */
		/* grid-column:1 / span 8; */
		/* justify-self:stretch; */
		
		/* height: 100%; */
		/* display:grid; */
		/* grid-template-columns: 2fr 1fr 2fr 1fr 2fr !important; */
		/* justify-items:end; */
		/* align-items:center; */
	/* } */
	
	.top_menu_container_fisso .top_menu{
		grid-column:2;
	}
	
	.top_menu a, .sub_menu a{
		font-decoration:none;
	}
	
	.top_menu_logo{
		height: 100%;
		width: 100%;
		background-image: url('./logo.png');
		background-size: cover;        /* riempie l’elemento mantenendo le proporzioni */
		background-position: center;   /* centrata */
		background-repeat: no-repeat;  /* nessuna ripetizione */
	}
	
	/* Elemento sticky */
	.sticky {
		position: sticky;
		top: 100px;               /* distanza dal bordo superiore */
		transition: opacity 0.3s; /* effetto dissolvenza */
	}
	
	/* Quando è "sticky" (cioè quando raggiunge il bordo superiore) */
	.sticky.is-stuck {
		opacity: 0.5; /* semitrasparente */
	}

    /* Blocco speciale */
    .special {
   
      background: transparent; /* trasparente per mostrare la griglia */
      overflow: hidden;
      position: relative;
      z-index: 10;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
    }
	
	.special img{
		 width: 100%;
  height: 100%;
  object-fit: contain;  /* mantiene aspect ratio e mostra tutta l'immagine */
  object-position: center; /* opzionale: centra l'immagine dentro il box */
  display: block;
		
	}
	
		.special img.bigimg{
 width:unset;
  height: unset;
  object-fit: contain;  /* mantiene aspect ratio e mostra tutta l'immagine */
  object-position: center; /* opzionale: centra l'immagine dentro il box */
  display: block;
		
	}
	
	.special.text{
		width: 100%;
		height: 100%;
		padding-left:var(--square_w_20perc);
		object-fit: contain;  /* mantiene aspect ratio e mostra tutta l'immagine */
		justify-content:start;
		box-sizing: border-box;
	}
	
	
	.special.text.centered{
		justify-content:center;
		padding-left:0px;
	}
	
	.updownevidence{
		border-top:2px solid black !important;
		border-bottom:2px solid black !important;
	}
	
	.upevidence{
		border-top:2px solid black !important;
	}
	
	.halfsize{
		width:50% !important;
		height:50% !important;
	}
	
	.size66{
		width:66% !important;
		height:66% !important;
	}
	
	/* .special.text.p200{ */
		/* font-family: "DM Sans", sans-serif; */
		/* font-optical-sizing: auto; */
		/* font-weight: 200; */
		/* font-style: normal; */
		/* font-size:60px; */
	/* } */
	
	/* .special.text.p84{ */
		/* font-family: "DM Sans", sans-serif; */
		/* font-optical-sizing: auto; */
		/* font-weight: 200; */
		/* font-style: normal; */
		/* font-size:48px; */
	/* } */
	
	a {
		text-decoration:none;
		color:inherit;
	}
	
	.font_regular_15{
		font-family: 'DM Sans', sans-serif;
		font-weight: 500;          /* Regular */
		font-size: 16px; 
		color:#5c5c5c;
		
	}
	
	
	.font_regular_28{
		font-family: 'DM Sans', sans-serif;
		font-weight: 500;          /* Regular */
		font-size: 18px; 
		color:#5c5c5c;
	}
	
	
	.font_regular_36{
	font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    /* font-size: 20px; */
    font-size: 1.32vw;
    color: #5c5c5c;
    /* line-height: 1.8; */
    line-height: 2.1vw;
	}
	
	.font_medium_60{
		font-family: 'DM Sans', sans-serif;
		font-weight: 500;    /* Medium */
		/* font-size: 80px;      60pt */ 
		/* font-size: 30px;     /* 60pt */ 
		font-size: 2.1vw;     /* 60pt */
		color:#5c5c5c;
		/* line-height: 1.72; */
	}
	
	.font_regular_84{
		font-family: 'DM Sans', sans-serif;
		font-weight: 400;      /* Regular */
		/* font-size: 112px;      84pt */ 
		/* font-size: 42px;      /* 84pt */ 
		font-size: 3.3vw;      /* 84pt */
		color:#5c5c5c;
		/* line-height: 1.72;     /* stesso rapporto del 36/62 */ */
	}
	
	.font_regular_200{
		font-family: 'DM Sans', sans-serif;
		font-weight: 400;     /* Regular */
		/* font-size: 266.7px;    200pt   */
		/* font-size: 100px; */
		font-size: 6.2vw;
		color:#5c5c5c;
		/* line-height: 1.72;      stesso rapporto del 36/62 */
	}
	
	.grayback{
	 background-color:#E6E6E6;
	}
	
	.video-responsive{
	width: 100%;
    height: 100%;
     object-fit: cover;
    display: block;
	}
	
	
	
	.shadown{
	   filter: 
      drop-shadow(0 23px 10px rgba(0, 0, 0, 0.3))
      drop-shadow(0px 82px 25px rgba(100, 100, 100, 0.35));
	}
		
	.shadownshort{
		  filter: 
		 drop-shadow(0 16px 10px rgba(0, 0, 0, 0.3))
      drop-shadow(0px 31px 25px rgba(100, 100, 100, 0.35));
	}		
		
		
	.shadown2{
	   filter: 
      drop-shadow(0 23px 10px rgba(0, 0, 0, 0.3))
      drop-shadow(0px 82px 25px rgba(100, 100, 100, 0.35));
	}
	
	.shadown3{
	  /* filter: 
      //drop-shadow(0 23px 10px rgba(0, 0, 0, 0.3))
      //drop-shadow(0px 82px 25px rgba(100, 100, 100, 0.35));*/
	  overflow:visible;
	}
	
	.shadown3::after{
		content: "x";
		position: absolute;
		/* inset è equivalente a top/right/bottom/left — qui lo riduciamo del 10% */
		inset: 10%;
		z-index: -1;                 /* sotto l'immagine (img ha z-index:2) */
		border-radius: inherit;     /* per seguire gli angoli arrotondati */
		background: rgba(0,0,0,1); /* leggero riempimento, opzionale */
		/* proiezione d'ombra verso il basso con filter */
		/* drop-shadow(x-offset y-offset blur color) */
		 /*filter: drop-shadow(3px 23px 25px #000000);*/
		 filter:drop-shadow(0 23px 10px rgba(0, 0, 0, 0.3));
		/* puoi aggiungere una leggera traslazione se vuoi accentuare la profondità */
		transform: translateY(18px);
		pointer-events: none; /* evita interferenze con click */
	}


   
 /* elementi top comune*/ 
 
 .l_logo_menu{
 grid-column: 7/ span 1;
 grid-row:2 / span 1;

}
.l_logo_menu img{
    width: 50%;
    height: 50%;
}

.l_logo_menufuz{
	 grid-column: 8/ span 2;
 grid-row:2 / span 1;
}


.l_ae_menu{
 grid-column: 15/ span 2;
 grid-row:2 / span 1;
 justify-content: center;
 flex-direction: row;
 border: 1px dotted #c6c6c6;
}

.l_archetype_menu{
 flex-direction: row;
 grid-column: 18/ span 2;
 grid-row:2 / span 1;
 justify-content: center;
 border: 1px dotted #c6c6c6;
}

.l_cluster_menu{
 flex-direction: row;
 grid-column: 21/ span 2;
 grid-row:2 / span 1;
 justify-content: center !important;
 border: 1px dotted #c6c6c6;
}

/*****SOTTOMENU ae******/
.ae_menu_module{

 grid-column: 7/ span 5;
 grid-row:4 / span 1;	
 border-right:none !important;
	
}
.ae_menu_img_audio{
	 grid-column: 12/ span 1;
	 grid-row:4 / span 1;	
	 border-right:none !important;
	  border-left:none !important;
}

.ae_menu_img_audio img{
    width: 50%;
    height: 50%;
    position: relative;
    left: -6%;
}


.ae_menu_audio{
	 grid-column: 13/ span 1;
	 grid-row:4 / span 1;	
	 border-right:none !important;
	border-left:none !important;
	justify-content: start;
}

.ae_menu_audio_filler{
		 grid-column: 14/ span 2;
	 grid-row:4 / span 1;	
	 border-right:none !important;
	border-left:none !important;
}



.ae_menu_img_image{
	grid-column: 16/ span 1;
	grid-row:4 / span 1;	
	border-right:none !important;
	border-left:none !important;
}
.ae_menu_img_image img{
    width: 50%;
    height: 50%;
    position: relative;
    /* left: -6%; */
}
.ae_menu_image{
	grid-column: 17/ span 1;
	grid-row:4 / span 1;	
	border-right:none !important;
	border-left:none !important;
	justify-content: start;
}

.ae_menu_image_filler{
	 grid-column: 18/ span 2;
	 grid-row:4 / span 1;	
	 border-right:none !important;
	border-left:none !important;
}

.ae_menu_img_screen{
	grid-column: 20/ span 1;
	 grid-row:4 / span 1;	
	border-right:none !important;
	border-left:none !important;
}
.ae_menu_img_screen img{
    width: 50%;
    height: 50%;
    position: relative;
    /* left: -6%; */
}

.ae_menu_screen{
	grid-column: 21/ span 2;
	 grid-row:4 / span 1;	
	border-left:none !important;
	justify-content: start;
}

/**********menu mobile**************/

  /**infrastruttura**/
	  .mobile-menu-full {
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;

	  background: white;
	  z-index: 9999;

	  /* nascosto inizialmente */
	  transform: translateY(-100%);
	  transition: transform 0.3s ease;
	 }


.mobile-menu-full .grid > div:not(.top_menu_container) {
    border:0px;
}

.mobile-menu-full div{
	border:none;
}
	/* stato aperto */
	.mobile-menu-full.active {
	  transform: translateY(0);
	}
	
	/* bottone chiusura */
.close-btn {
  font-size: 30px;
  border: none;
  background: none;
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}

 /**contenuto del menu**/
 .menu_grid{
	z-index:999;
 }

.l_ae_mobile_menu{
 grid-column: 3/ span 2;
 grid-row:7 / span 1;	
}

.l_aecs_mobile_menu{
 grid-column: 3/ span 4;
 grid-row:8 / span 1;	
}

.l_clust_mobile_menu{
 grid-column: 3/ span 6;
 grid-row:11 / span 1;	
}

.l_clustcs_mobile_menu{
 grid-column: 3/ span 4;
 grid-row:12 / span 1;	
}

.l_arch_mobile_menu{
 grid-column: 3/ span 9;
 grid-row:15 / span 1;	
}
.l_archcs_mobile_menu{
 grid-column: 3/ span 4;
 grid-row:16 / span 1;	
}

.l_fuzzae_mobile_menu{
 grid-column: 3/ span 6;
 grid-row:19 / span 1;	
}
.l_fuzzaecs_mobile_menu{
 grid-column: 3/ span 4;
 grid-row:20 / span 1;	
}

.l_linkedin_mobile_menu{
 grid-column: 3/ span 1;
 grid-row:24 / span 1;
}

.l_instagrammobile_menu{
 grid-column: 12/ span 1;
 grid-row:24 / span 1;
}
.l_close_mobile_menu{
  grid-column: 12/ span 2;
 grid-row:2 / span 2;
}


/***********COMUNI ***********/
.sliderimg {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease;
}

.sliderimg.visibile {
  opacity: 1;
  visibility: visible;
}

.slider_button  {
 width: 20%;
  height: 20%;
  border: none;
  cursor: pointer;
  background-position: center;
  transition: transform 0.3s, opacity 0.3s;
  background-image: url("../img/AE_AUDIO/blocco_02/DOT_EMPTY.png");
  
  background-size: contain;     
  background-repeat: no-repeat; 
  background-position: center;  
  /* background-color:#e6e6e6; */
  background-color:transparent;
  
}

.slider_button.selezionato {
  background-image: url("../img/AE_AUDIO/blocco_02/DOT_FULL.png");
}



/************NON IN USO*****************/

    /* Slideshow container */
    .special.slideshow {
      overflow: hidden;
    }

    .slideshow-track {
      display: flex;
      height: 100%;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      gap: 20px; /* SPAZIO TRASPARENTE TRA LE IMMAGINI */
      padding: 0 20px;
      box-sizing: border-box;
      cursor: grab;
    }

    .slideshow-track.dragging {
      cursor: grabbing;
      scroll-behavior: auto;
    }

    .slideshow-track img {
      flex: 0 0 calc(50% - 10px); /* due immagini alla volta, considerando il gap */
      height: 100%;
      object-fit: cover;
      scroll-snap-align: start;
      border-radius: 8px;
      user-select: none;
      pointer-events: none;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    }
	


/* Nascondi su desktop */
@media (min-width: 768px) {
	/*nasconde gli elementi che non devono vedersi nella versione desktop desktop*/
  .hidden_in_desktop {
    display: none !important;
  }
}

@media (max-width: 767px) {
  
   :root {
    --square_w: calc(var(--real_width) / 14);
  }

  .grid {
    grid-template-columns: repeat(14, calc(100% / 14));
  }
  
  
  /*nasconde gli elementi che non devono vedersi nella versioe mobile*/
  .hidden_in_mobile {
    display: none !important;
  }
  
.l_logo_menu{
 grid-column: 2/ span 2;
 grid-row:2 / span 1;

}
.l_logo_menu img{
    width: 50%;
    height: 50%;
	position:relative;
	rigth:50%;
}

.l_logo_menufuz{
grid-column: 4/ span 2;
 grid-row:2 / span 1;
}

#menuBtn{
	 grid-column: 12/ span 2;
 grid-row:2 / span 1;
 background:white;
 border:0;
  position: relative;
   border:1px dotted #c6c6c6 !important;
}
#menuBtn::before,
#menuBtn::after {
  content: "";
  position: absolute;
  width: 33%;
  height: 1px;
  background: black;
  left: 50%;
  transform: translateX(-50%);
}

/* distribuzione verticale equidistante */
#menuBtn::before {
  top: 33.33%;
}

#menuBtn::after {
  top: 66.66%;
}




  .font_regular_15{
		font-family: 'DM Sans', sans-serif;
		font-weight: 500;          /* Regular */
		/* font-size: 16px;  */
		font-size: 12px; 
		color:#5c5c5c;
		
	}
	
	
	.font_regular_28{
		font-family: 'DM Sans', sans-serif;
		font-weight: 500;          /* Regular */
		font-size: 18px; 
		color:#5c5c5c;
	}
	
	
	.font_regular_36{
	font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    /* font-size: 17px; */
    font-size: clamp(10px, 4vw, 25px);
    color: #5c5c5c;
    /* line-height: 1.7; */
    line-height: 8vw;
	}
	
	.font_medium_60{
		font-family: 'DM Sans', sans-serif;
		font-weight: 500;    /* Medium */
		/* font-size: 80px;      60pt */ 
		/* font-size: 30px;     /* 60pt */ 
		font-size: clamp(16px, 7.2vw, 48px);
		color:#5c5c5c;
		/* line-height: 1.72; */
	}
	
	.font_regular_84{
		font-family: 'DM Sans', sans-serif;
		font-weight: 400;      /* Regular */
		/* font-size: 112px;      84pt */ 
		/* font-size: 36px;       */
		font-size: 8.6vw;      /* 84pt */
		color:#5c5c5c;
		/* line-height: 1.72;     /* stesso rapporto del 36/62 */ */
	}
	
	.font_regular_200{
		font-family: 'DM Sans', sans-serif;
		font-weight: 400;     /* Regular */
		/* font-size: 266.7px;    200pt   */
		/* font-size: 56px; */
		/* font-size: 3rem; */
		font-size: clamp(16px, 13.8vw, 60px);
		color:#5c5c5c;
		/* line-height: 1.72;      stesso rapporto del 36/62 */
	}
  








}