/* regole di reset */
ul{margin: 0;padding:0;list-style-type:none}

/*MENU PRINCIPALE*/
/* lista in orizzontale. inline-block è come inline, ma può avere altezza e larghezza. relative occorre per il sottomenu */
#menu li{display:inline-block;position:relative}

/* menu. Cambiando center l'oriento a destra o sinistra */
#menu{width:100%;background-color:#F5F5F5;border-radius:6px;text-align:center}

/* link menu. Cambiando 80px posso scrivere voci più lunghe */
li a{display:block;padding:20px 20px;width:auto;color:black;font: 140% Arial;text-decoration:none;border-right:1px solid #ccc}

/* link menu hover */
a:hover{color:red}

/* SOTTOMENU PRINCIPALE */
#menu li .hidden{display:block;position:absolute;top:100px;left:0;background-color:#90EE90;visibility:hidden;margin-left:-5px;border-right:none;width:auto}

/* link sottomenu */
#menu li .hidden li a{width:auto;border-right:none}

/* animazione per il passaggio sopra agli elementi del menu */
#menu li:hover .hidden{margin-top:-65px;visibility:visible}

/* TRIGRAMMA */
/* stile e invisibilità */
.showMenu{width:40px;border:1px solid black;margin:auto;color:black;text-align:center;font-size:30px;margin-bottom:10px;
display:none}

/* invisibilità checkbox
Il checkbox va nascosto in ogni caso ed il menu comparirà quando esso verrà selezionato tramite click sull’etichetta */
input[type=checkbox]{display:none}

/* La tilde alt126 permette di selezionare tutti gli elementi B presenti in A; 
qui sta a significare che dà visibilità al menu quando il checkbox viene selezionato. */
input[type=checkbox]:checked ~ #menu{display:block}


/* MEDIA QUERIES */
/* rendo il menù responsivo per adattarlo ai dispositivi più piccoli, fino ad una risoluzione massima di 768px */
@media only screen and (max-width: 800px) {
  
#menu{border-radius:0;text-align:center;display:none}
  
/* rendo gli elementi dei menu elementi di blocco */  
ul li{display:block}
  
/* imposto la larghezza massima per gli elementi dei menu e i links */  
#menu li .hidden li,#menu li .hidden li a, ul li,ul li a{padding-right:0;padding-left:0;width:100%;border-right:none}
  
/* mostro il sottomenu solo al passaggio del mouse */   
#menu li .hidden li{display:none}
#menu li:hover .hidden li{display:block}  

/* resetto la posizione degli elementi del menu. static valore di default. Gli elementi sono mostrati in ordine, come appaiono nel flusso del documento */  
#menu li{position:static}  
  
/* resetto la posizione del sottomenu e lo mostro */  
#menu li .hidden{position: static;visibility:visible}
  
/* nessuna animazione al passaggio del mouse */  
#menu li:hover .hidden{margin:0} 
  
/* colore di sfondo agli elementi del menu e del sottomenu */
#menu li{background-color:#F5F5F5}
#menu li .hidden li{background-color:#F5FFFA}  
  
/* mostro il pulsante del menu nella versione mobile*/
.showMenu{display:block}  
  
}

	.imgtestodx {

width:20%;

margin-left:25%;
margin-right:auto;


}

	.imgtestosx {
float: right;
width:40%;
clear: both;
margin:1% 10% 0% 10%;


}
@media only screen and (max-width: 800px) {
  
	.imgtestosx {
float: right;
width:80%;
clear: both;
margin:1% 10% 0% 10%;


}

}
	.imgtestosx5 {
float: right;
width:65%;
clear: both;
margin:1% 5% 0% 10%;

}
@media only screen and (max-width: 800px) {
  
	.imgtestosx5 {
float: right;
width:100%;
clear: both;
margin:0% 0% 0% 0%;


}

}

	.imgtestosx6 {
float: right;
width:105%;

margin:0% 0% 0% 0%;

}
@media only screen and (max-width: 800px) {
  
	.imgtestosx6 {
float: right;
width:100%;
clear: both;
margin:0% 0% 0% 0%;


}

}
	.imgtesto1 {
float: right;
width:20%;
clear: both;
margin:0% 8% 0.5% 1%;
vertical-align:text-top;

}
.p{

font-size: 200%;
font-family: arial,helvetica;
text-align: left;
margin:0% 20% 0% 20%;
width:60%
}
.p1{
float: bottom;
font-size: 200%;
font-family: arial,helvetica;
text-align: center;
margin:0% 20% 0% 20%;
width:60%
}
.p30{
float: bottom;
font-size: 100%;
font-family: arial,helvetica;
text-align: left;
margin:0% 1% 0.05% 10%;
width:30%
}
	@media only screen and (max-width: 800px) {
  
.p1{
	float: bottom;
font-size: 100%;
font-family: arial,helvetica;
text-align: left;
margin:0% 1% 0.05% 10%;
width:70%

}
.p30{
	float: bottom;
font-size: 100%;
font-family: arial,helvetica;
text-align: left;
margin:0% 1% 0.05% 3%;
width:90%

} 
}
.img {
       width:80%;
	
    vertical-align: text-bottom;
	 margin:5% 0% 0% 10%;  
}
.img2{
       width:75%;
	 
    vertical-align: text-bottom;
	 margin:0% 0% 0% 5%;  
}	

.img99{
       width:40%;
	 
    vertical-align: text-bottom;
	 margin:0% 0% 0% 5%;  
}
.img3{
       width:51%;
	 
    vertical-align: text-bottom;
	 margin:0% 0% 0% 5%;  
}

.img4{
float: right;
width:60%;
clear: both;
margin:-4% 5% 0% 10%;
}
.img30{
width:73%;
	 
    vertical-align: text-bottom;
	 margin:0% 0% 0% 5%; 
}
.img31{
width:88%;
	 
    vertical-align: text-bottom;
	 margin:0% 0% 0% 5%; 
}
.img32{
width:81%;
	 
    vertical-align: text-bottom;
	 margin:0% 0% 0% 5%; 
}
.img33{
width:20%;
	 
    vertical-align: text-bottom;
	 margin:0% 0% 0% 5%; 
}

.img55{
width:62%;
	 
    vertical-align: text-bottom;
	 margin:0% 0% 0% 0%; 
}

.pfondo{
width: 100%;
position : fixed;
bottom: 0;
text-align:center;
font-size: 80%;
font-family : arial;
color : 	black;

margin:0% 0% 0% 0%;

}
.pfondo1{
width: 100%;
position : relative ;
bottom: 0;
text-align:center;
font-size: 130%;
font-family : arial;
color : 	black;

margin:0% 0% 0% 0%;

}
	
body{background-color :#7FF7CB;}




.img10 {
       width:90%;
      
	 margin:0% 0% 0.5% 0%;  
}
.img9 {
       width:2.5%;
      
	 margin:0% 0% 0.5% 0%;  
}

@media only screen and (max-width: 800px) {
  
.img10{width:100%;
      
	 margin:0% 0% 0.5% 0%;

}
  
}
@media only screen and (max-width: 800px) {
  
.img9{width:8%;
      
	 margin:0% 0% 0.5% 0%;

}
  
}

#container {
	
	max-width:90%;

	margin: 1% 5% 1% 5%;
	text-align: center;
}
#griglia {
  padding: 0;
  margin: 0;
}
#griglia  li {

  display: inline-block;
  width:  30%;
  margin: 1%;
background: 	#F5F5F5;
  vertical-align: top;
}
#griglia li  p {
  padding: 5px 5px 5px 5px;
  margin: 0;
  font-size: 100%;
  color: black;
  font-family:Arial, sans-serif;
}

@media only screen and (max-width: 800px) {
  
#griglia  li{ 

  width:  90%;
  margin: 0.5%;
 
  vertical-align: top;

}
  
}








.img {
       width:90%;
	
    vertical-align: text-bottom;
	 margin:0% 0% 0% 0%;  
}

H2{
 font-size: 100%;
font-family:Arial, sans-serif;
margin:0% 10% 0% 4%;
}

	.imgtestodx1 {
float: right;
width:35%;
clear: both;
margin:0% 10% 0.5% 1%;
vertical-align:text-top;


}
@media only screen and (max-width: 800px) {
  
	.imgtestodx1 {
float: right;
width:80%;
clear: both;
margin:1% 10% 0% 10%;


}
}
	.imgtestosx1 {
float: right;
width:35%;
clear: both;
margin:0% 10% 0.5% 1%;
vertical-align:text-top;


}
@media only screen and (max-width: 800px) {
  
	.imgtestosx1 {
float: right;
width:80%;
clear: both;
margin:1% 10% 0% 10%;


}
}
.h{
 font-family : arial;
 font-size: 300%;
  text-align: left;
  margin:0% 10% 0% 10%;
color:red
}
.h1{
 font-family : arial;
 font-size: 500%;
  text-align: right;
  margin:0% 20% 0% 20%;

}
H1{
 font-size: 300%;
font-family:Arial, sans-serif;
margin:0% 10% 0% 4%;
text-align: center;
}
H2{
 font-size: 110%;
font-family:Arial, sans-serif;
margin:0% 10% 0% 4%;
}

H3{

 font-size: 90%;
font-family:Arial, sans-serif;
margin:0% 0% 0% 0%;
}


table {

width: 900px;
max-width:50%;
 border-collapse: collapse;
 
 border: 0.5px solid black;

 caption-side: top;
 font-size: 80%;
 background-color : #ffffff;
 font-family : arial;
 margin-left: auto;
  margin-right: auto;
}



.caption{
background-color:	#f5f5f5;
 border: 0.5px solid black;
 text-align:center
}

th {width: 10%;
border-left: 0.5px solid black;
text-align:center;
white-space: nowrap;
font-family:arial, helvetica;
font-size:90%;
}
td {width: 10%;
border-left: 0.5px solid black;
font-size:100%;
white-space: nowrap;
font-family:arial, helvetica;
text-align:left;
}

tbody tr:nth-child(even) {

background:#f5f5f5 /* per creare effetto Zebra colorando solo le righe pari*/

}
@media only screen and (max-width: 800px) {
  
.table-container{
  width: 100%;
  overflow-x: auto
}
}
video{



width: 100%;

}
.figure{
float:left;
font-family: arial;
font-size: 100%;
width: 33%;
margin:0% 0% 0% 0%;
text-align:center
}
@media only screen and (max-width: 800px) {
  
.figure{border-radius:0;
text-align:center;
display:block;
width: 100%;

}
  
}
 .img11 {
       width:20%;
      
	margin:0% 1% 0.05% 10%; 
}

@media only screen and (max-width: 800px) {
  
.img11{width:70%;
      
	 margin:0% 0% 0.5% 10%;

} 
}
@media only screen and (max-width: 800px) {
  
.imgtestodx {

width:40%;

margin-left:1%;
margin-right:auto;
}
}