/* --------------------------------------------------------------------------- MAIN  -----------------------------------------------------*/

@font-face {
 font-family: Nunito;
 src:  url("../fonts/Nunito-Regular.ttf" ) format( "truetype" ); 
 /* src:  url("../fonts/Mulish-Regular.ttf" ) format( "truetype" ); */
 font-weight: 400;
 font-style: normal;
}  

@font-face {
 font-family: Mulish;
 src:  url("../fonts/Mulish-Regular.ttf" ) format( "truetype" );
 font-weight: 400;
 font-style: normal;
}  

@font-face {
 font-family: Raleway;
 src:  url("../fonts/Raleway-Regular.ttf" ) format( "truetype" );
 font-weight: 400;
 font-style: normal;
}  

@font-face {
 font-family: NunitoSans;
 src:  url("../fonts/NunitoSans.ttf" ) format( "truetype" );
 font-weight: 400;
 font-style: normal;
}  

@font-face {
 font-family: RobotoSlab;
 src:  url("../fonts/RobotoSlab-Medium.ttf" ) format( "truetype" );
 font-weight: 500;
 font-style: normal;
}  


main {
 display: flex;
 flex-wrap: wrap;
 max-width: 92%;
 margin: 0 auto;
 gap: 20px;
 paddin-bottom: 20px;
 /* border: solid 1px #333;  */
}

main h2, p {
  font-family: Nunito;
  font-size: 18px;
  letter-spacing: -0.02px; 
  line-height: 28px;
   /* border: solid 1px #333; */
} 

main h2 {
 font-family: NunitoSans;
 font-size: 21px; 
 letter-spacing: 0.32px;
} 



main a { 
 font-family: Nunito;
 font-size: 18px;
 letter-spacing: -0.02px;
 line-height: 26px;
 color: #0093fb;
 text-decoration: none;
 outline: none;
 cursor: pointer;
} 

main a:hover { 
 text-decoration: underline;
 outline: none;
} 

@media (min-width: 1920px) {
    main {
       width: 75%;
    }
}


/* --------------------------------------------------------------------------- CONTENITORE CENTRALE -----------------------------------------------------*/

/* Stile per il contenuto principale */
.content {
  flex: 1;
  max-width: 65%;  /* 68% */
  /* border: solid 1px #333; */
  box-sizing: border-box;
  background-color: white;
  box-shadow: 0px 0px 1px 0px rgba(50, 50, 50, 0.1);
  margin-top: 90px;
  padding: 25px;
  padding-top: 30px;
  margin-bottom: 40px;	
}

ol, ul {
  list-style: disc;   /*  AGGIUNTA STILI */ 
} 

.content p, ul {  /*  AGGIUNTA STILI */ 
  font-family: Raleway;
  font-size: 17px;
  letter-spacing: -0.02px; 
  line-height: 28px;
  margin: 1em 0;  /*  AGGIUNTA STILI */ 
} 

.content ul {
  margin-left: 20px;  /*  AGGIUNTA STILI */ 
}

.content li {
  margin: 0.1em 0;   /*  AGGIUNTA STILI */ 
}

.content h2,h3,h4 {
 font-family: NunitoSans;
 font-size: 19px; 
 letter-spacing: -0.12px; 
 line-height: 12px;
 margin: 1.6em 0 1em 0;  /*  AGGIUNTA STILI */ 
} 

.content h1 {
 font-family: Mulish;
 font-size: 30px; 
 letter-spacing: -0.02px;
 line-height: 34px;
 color: #0093fb;
} 


.content a { 
 /* font-family: Mulish; */
 font-size: 17px;
 letter-spacing: -0.02px;
 line-height: 28px;
 color: #0093fb;
 text-decoration: none;
 outline: none;
 cursor: pointer;
} 

.content a:hover { 
 text-decoration: underline;
 outline: none;
} 

.content .img_centrata {
  width: 70%; 
  height: auto; 
  display: block; 
  margin: auto; 
  margin-bottom: 25px;
}


/* --------------------------------------------------------------------------- BARRA LATRALE -----------------------------------------------------*/

/* Stile per la barra laterale */
.sidebar {
    flex: 1;
	max-width: 32%; 
    /* border: solid 1px #333;  */
	padding: 15px;
	box-sizing: border-box;
	margin-top: 76px;
	box-shadow: 0px 0px 1px 0px rgba(50, 50, 50, 0.1);
}



/* ---------------------------------------------------------------------------- MOBILE: MAIN e SIDEBAR -----------------------------------------------------*/

@media (max-width: 768px) {
    main {
        flex-direction: column;
    }

    /* Regola gli stili per il layout mobile */
    .content,
    .sidebar {
        max-width: 100%;
		margin: 0 auto;
		border: solid 0px;
		padding: 5px;
    }
	
	.content {
	 padding-left: 10px;
	 padding-right: 10px;
	 padding-bottom: 10px;
	}
	
	.content h2,h3,h4 {
      line-height: 24px;
    } 
	
	.sidebar {
	  margin-bottom: 20px;
	}
	
	.upper_content {
	 font-size: 42px;
	 text-align: center;
	 padding: 10px;
	 margin-bottom: 20px;
	 
	}
	
	.nav_pie {
     flex-direction: column;
     align-items: flex-start; /* Allinea gli elementi a sinistra */
	 margin-top: 20px;
	 margin-bottom: 30px;
    }
	
	
	.sep {
	  display: none;
	}
	
	  
}