.body_testo
{font-family: verdana;
font-size:17px; 
margin-left: 20px;
margin-right: 20px; 
text-align: justify;
height:100%;
}
.bodycompospitiindex
{font-family: verdana;
font-size:17px; 
margin-left: 20px;
margin-right: 20px; 
text-align: justify;
background-color: white;
height:100%;
}
.bodycompospiti
{text-align: center;
font-size: 20px;
font-family:  verdana, book antiqua, Trebuchet Ms,;
font-style: normal;
line-height: 1.2;
font-weight: 550;
margin-left: 40pt;
margin-right: 40pt;
background-image: url("");
background-color: white;
}

a.compospiti:link
{color: #ff3300; text-decoration: none;
}
a.compospiti:visited
{color: #ff6fff; text-decoration:none;
}
a.compospiti:hover
{color: #ff3300; font-size:100%; text-decoration: underline; 
}
a.articoli:link
{color: green; text-decoration: none; font-size:14
}
a.articoli:visited
{color: 66ff33; text-decoration:none; font-size:14
}
a.articoli:hover
{color: blue; font-size:14; text-decoration: underline; 
}

.tdcomposizioni
{
text-align: justify;
color: black;
font-size: 22px;
font-weight: 500;
font-family: book antiqua, verdana, booksman old style;
padding: 15px;
border: 0px;
background-image: url("");
background-color: white;
}

.link {color:#ad0000; font: bold 12 px arial; text-decoration:underline;  }
/* 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{max-width:100%;background-color:#fff;border-radius:6px; border: solid 1px #660000;
 background: #ad0000;
 background: -webkit-gradient(linear, left top, left bottom, from(#ff3300), to(#990000));
 background: -webkit-linear-gradient(top,  #ff3300,  #990000);
 background: -moz-linear-gradient(top,  #ff3300,  #990000);
 background: -ms-linear-gradient(top,  #ff3300,  #990000);
 background: -o-linear-gradient(top,  #ff3300,  #990000);
 -moz-border-radius: 6px;
 -webkit-border-radius: 6px;
 -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
 -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
 box-shadow: 0 1px 3px rgba(0,0,0,0.5);text-align:center}

/* link menu. Cambiando 80px posso scrivere voci più lunghe */
li a{display:block;padding:08px 14px;width:80px;color:#fff;font:bold 12px Arial;text-decoration:none;border-right:1px solid #ccc}

/* link menu hover */
a:hover{color:#C8C8C8}

/* SOTTOMENU PRINCIPALE */
#menu li .hidden{display:block;position:absolute;top:100px;left:0;background-color:#ff3300;visibility:hidden;margin-left:-5px;border-right:none; z-index:1;}

/* link sottomenu */
#menu li .hidden li a{width:80px;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: 768px) {
  
#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:#3E3E3E}
#menu li .hidden li{background-color:darkblue}  
  
/* mostro il pulsante del menu nella versione mobile*/
.showMenu{display:block}  

/*setto foto a 350 px */
.image_responsive {width: 300px;}
  
}

@media only screen and (min-width: 768px) 
{
	.image_responsive {width: 450px;}
}

.image_flex {max-width: 100%;}

h1
{
font-size: 28px;
text-align: center;}
h3
{/*titoli per composizioni ospiti*/
text-align: center;
color: #663300;
font-size: 26px;
font-family: book antiqua, Trebuchet Ms, verdana;
line-height: 1.8;
letter-spacing: 1px;
}
#fluid
{padding:6px;
}
@media screen and (min-width: 200px) and (max-width: 600px)  {#fluid{max-width: 98%; float: left; text-align: justify;}}
@media screen and (min-width: 601px) and (max-width: 800px)  {#fluid{max-width: 98%; float: left; text-align: justify;}}
@media screen and (min-width: 801px) and (max-width: 1000px)  {#fluid{width: 47%; float: left; text-align: justify;}}
@media screen and (min-width: 1001px) {#fluid {width: 47%; float: left; text-align: justify; } }

#tdstoria
{
text-align: justify;
color: #000033;
font-size: 18px;
font-weight: 500;
font-family: verdana, booksman old style;
padding: 15px;
border: 1px;

}
@media screen and (min-width: 200px) and (max-width: 600px)  {#tdstoria {max-width: 600px; float: left; text-align: justify;}}
@media screen and (min-width: 601px) and (max-width: 800px)  {#tdstoria {max-width: 285px; float: left; text-align: justify;}}
@media screen and (min-width: 801px) and (max-width: 1024px)  {#tdstoria {width: 47%; float: left; text-align: justify,}}
@media screen and (min-width: 1025px) {#tdstoria {width: 47%; float: left; text-align: justify;} }

/*istruzioni menu a scomparsa */

/*menu a scomparsa */
.dropbtn {
    background-color: #ad0000;
    color: #ffffff;
	padding: 3px;
    font-size: 24px;
    border: 2px;
}
 
.dropdown {
    position: relative;
    display: inline-block;
	 z-index: 1;
}
 
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #ad0000;/*lightgrey;*/
    min-width: 200px;
    z-index: 1;
}
 
.dropdown-content a {
    color: #ffffff;
    padding: 2px 6px;
    text-decoration: none;
    display: block;
	 z-index: 1;
}
 
.dropdown-content a:hover {background-color: orange;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: blue;}

/*fine istruzioni nuovo menu a scomparsa*/
/*fine menu a scomparsa*/
/*immagini animate*/
@keyframes slideIn {
  from { transform: translateX(-100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
} 
  .flex_animated {
  max-width: 100%;
  animation-name: slideIn;
  animation-duration: 1.5s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards; /* Mantiene lo stato finale */
}
/*fine immagini animate*/