::-webkit-scrollbar {
    height: 12px;
    width: 12px;
    background:tan;
	
}

::-webkit-scrollbar-thumb {
    background: maroon;
    -webkit-border-radius: 20% 0% 0% 20%;
    -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
////1ex;
}

::-webkit-scrollbar-corner {
    background: #000;
}



.fronte {
  border: 1px solid #4CAF50;
  padding: 1%;
  animation: fadeIn 2s;
}


.img1 {
float: right;
width: 99px;
height: 110px;
 animation: fadeIn 2s;
 }

.clearfix {
  overflow: auto;
}

.img2 {
  float: right;
}

td.txtImg{
background-size:92%;
background-repeat:no-repeat;
background-position:center;
text-align:center;
transition:opacity 2s;
transition-timing-function: ease
}

img.immaDestra{
float:right;
margin-left:1%;
padding:1%;
width:285px;
}

.arrot-1 {border-radius:5% 15% 5% 15%}
.arrot-2 {border-radius:15% 15% 0% 0%}



.iframesx {
float:left;
width:285px;
height:284px;
margin-top:1%;
margin-right:1%;
border:none;
background-color:black;
opacity:0;
transition-duration: 600ms;
transition-property: opacity;
transition-timing-function: ease-in-out;
}

video.clipSistra{margin:auto;width:345px;float:left}

img.flashCrdDx {float:right;margin-left:1%;margin-top:1%;width:285px;border-radius:0% 10% 0% 0%;cursor:pointer}
img.flashCrdSx{float:left;margin-right:1%;margin-top:1%;width:285px;border-radius:10% 0% 0% 0%;cursor:pointer}


.parole {color:maroon}
.parole:hover{
   color:steelblue;
   text-decoration:underline;
  -webkit-text-decoration-color: maroon; /* Safari */  
  text-decoration-color: maroon;
}

.lavagnaB{
   display: table;
   width: 83%;
   margin:auto;
   border:solid 1px green;
   background-color:beige;
   padding:1%;
   font-size:14pt;
}


.riga{
   display: table-row;
}

.colonna{
   display: table-cell;
   border: 1px solid grey;
   padding: 0.5em 0.5em 0.5em 0.5em;
   text-align:justify;
   width:50%;
}

.colonnaInt{
   display: table-cell;
  border:none
   padding: 0 0 0 0
   text-align:right
}

.colonnaInt:hover{
   color:crimson
}

table.menu {
margin-left:auto;
margin-right:auto;
margin-top:1%;
width:75%;
padding:0%;
border:solid 1px white;
border-collapse:collapse
}


////codice per tabelle div, delle desinenze
div.contorno {width:100%;margin:auto}

.table0 {
  display: table;
  width:100%;
  margin-top:1%;
  margin-bottom:1%;
  border-collapse:separate;
  border-spacing:5px;
 
}

.row0 {
 display: table-row;
}

.cellSB{
display: table-cell;
padding:8px 0;
width:18%;
border-radius:0% 25% 25% 0%;
background-color:wheat;
border: none;
}

.cellRCB{
display: table-cell;

padding:8px 0;
border-radius:10% 10% 10% 10%;
background-color:wheat;
text-align:center;
vertical-align:middle;
font-size:11pt;
 border: 1px solid silver;
}


.cell0 {
 display: table-cell;
 
padding:8px 0;
  width:12%;
  text-align:center;
  font-size:17pt;
  color:maroon;
  border: 1px solid darkslateGray;
}

.cell1 {
 display: table-cell;
 
 width:15%;
padding:8px 0;
  
  text-align:center;
  font-size:17pt;
  color:maroon;
  border: 1px solid darkslateGray;
}


.cell2 {
 display: table-cell;

 width:14%;
padding:8px 0;
  text-align:center;
  font-size:15pt;
  color:maroon;
  border: 1px solid darkslateGray;
}

.cell3 {
 display: table-cell;
 visibility:hidden;
 width:10%;
padding:8px 0;
  text-align:center;
  vertical-align:middle;
  font-size:13pt;
  color:maroon;
  border: 1px solid darkslateGray;
}

.cellLink {
 display: table-cell;
 width:10%;
padding:8px 0;
  text-align:center;
  vertical-align:middle;
  font-size:13pt;
  color:steelBlue;
  border: 1px solid darkslateGray;
  cursor:pointer
  
}
.cellLink:hover {color:crimson;background-color:wheat}

//tabella alternativa con colspan e rowspan

 .table-alt { 
display: table;

 
  border-collapse: separate;
  border-spacing: 5px;
 

  }
  .table-alt-header { font-weight: bold; }
  
  
  
  .alt-cell-class { 
float: left; 
 
 margin-left:0.5%;
  text-align:center;
  font-size:14pt;
  color:black;

outline:solid 1px silver;
  }
  .colspan-1 { width: 13.5%; height:60px;background-color:white; padding:8px 0}
  .colspan-2 { width: 66%;height:60px;background-color:white;padding:8px 0; }
  .colspan-3 { width: 99%;height:30px;background-color:maroon;color:wheat;border-radius:45% 45% 0% 0% }
  .colspan-int { width:18%;height:60px;background-color:wheat;padding:8px 0 ;border-radius:5%;
  }

/* la table degli esercizi */

.table {
   border-width: 2px 2px 0px 0px;
   border-color:green;
   border-radius:10% 0% 0% 10%;
}
.intable {
   border-width: 0px 0px 0px 0px;
  
  
}
.table, .intable {
    display:table;
    width:100%;
    height:100%;
		 
}
.cell {
    display:table-cell;
	padding-left:1%;
	
	 
}
.row {
    display:table-row;
	
}
.cell {
    border-width: 0px 0px 0px 0px;
    width:25%;
	vertical-align:middle;
}

.merged{
  width:50%;
  height:50%;
  background: green;
  color:white;
  text-align:left;
  margin:auto;
  border-radius:10% 0% 0% 10%;
  border:solid
  
}
.table, .intable, .cell {
    border-style: solid;
 }
 
 /* fine tavola esercizi */







td.menu {border:solid 1px white}

.didascalia {color:maroon;text-align:left;font-size:140%}
.didapic{color:silver;font-style:italic;font-size:75%}
.citaz {width:83%;margin:auto;text-align:center;font-size:140%;color:maroon;font-style:italic}
div.noClass {border:none;margin:auto}
div.paragraph {display:block;;animation: fadeIn 2s;}
div.corpo{width:83%;font-family:Palatino, Palatino Linotype, Palatino LT STD, Book Antiqua, Georgia, serif; font-size:15pt; text-align:justify;border:none;margin-left:auto;margin-right:auto;padding:1%}
span.normale{font-family:Palatino, Palatino Linotype, Palatino LT STD, Book Antiqua, Georgia, serif; font-size:15pt;background-color:transparent}
.nebbia {display:none;animation:fadeIn 10s}
div.corp-titolino{width:83%;font-family:Palatino, Palatino Linotype, Palatino LT STD, Book Antiqua, Georgia, serif; font-size:15pt; text-align:justify;border:none;margin-left:auto;margin-right:auto;margin-bottom:1%;padding-top:1.9%}
div.tabLarga{width:86%; max-width:86%;margin:auto}
span.titolino {font-family:Palatino Linotype;font-size:21pt;color:#A65353;animation: fadeIn 2s;}
span.titolo {font-family:Palatino Linotype;font-size:24pt;color:#A65353}
span.citazVrb {font-style:normal;color:maroon}
span.citazTrd {font-style:normal;color:darkgreen}
span.indPers{color:SteelBlue;font-size:16pt}
span.indPluto {color:darkCyan;font-size:80%}
.persona {background-color:transparent;color:firebrick;font-weight:600;border:none;cursor:help}
.persona:focus {outline: none;box-shadow: none;}
.persona:hover {color:RGB(70 130 180);text-decoration:underline;text-decoration-color:darkGreen;text-decoration-style:dotted}

.numPar {color:darkgreen;font-size:21pt;font-weight:500;padding-left:1%;padding-right:1%;animation:fadeIn 2s;}

div.spiegVrb{float:left;width:100%;padding:1%;color:navy;font-size:12pt;font-style:italic;text-align:justify}
span.celNasPerf {display:none;color:white}
span.celNas {display:none;color:white}
span.fintoBot{cursor:pointer}
span.fintoBot:hover{border-color:red}



.riduci{
color:maroon;
cursor:pointer;
border:none;
background-color:transparent;
}

.riduci:hover {color:crimson}


div.numPag{
   border:none;
   font-size:42pt;
   color:#A65353;
   margin-left:auto;
   margin-right:auto;
   text-decoration: none;
   text-align:center
}

.giraPag {color:maroon}
.giraPag:hover {color:darkGreen;text-decoration:none}


.regSter {
   width:80%;
   margin-top:40%;
   opacity: 0.4;
   transition:opacity 3s;
   transition-timing-function: ease-out
}
.regSter:hover{opacity:1}

.bottBianco {background-color:snow;color:silver;border:solid 1px gray;outline:none;opacity:0.5}
.bottBianco:hover{opacity:1;background-color:snow;color:darkslategray;outline:none}

input[name=conVoce]{accent-color:maroon;color:beige}
input[type=checkbox]{accent-color:maroon;color:beige}
input[name=selVerb]{accent-color:maroon;color:beige}
input.Sel {
background-color:lightgreen;
border-radius: 2% 2% 2% 2%;
}

input.Sel:hover {
color:white;
border-radius: 20% 20% 20% 20%;
}

input.Parti {
background-color:crimson;
color:white;
border-radius: 2% 2% 2% 2%;
}

input.Parti:hover {
color:silver;
border-radius: 50% 50% 50% 50%;
}

input.morf{
border-radius:20% 0% 0% 20%;
background-color:white;
color:black;
cursor:pointer;
border:solid 1px green;
font-size:11pt;
   }

input.morf:hover{
   color:white;
   background-color:maroon;

   }

input.viVoce{
border-radius:20%;
background-color:RGB(165  42  42);
color:white;
cursor:pointer;
border:solid 2px white;
font-size:10pt;
   }

input.viVoce:hover{
   color:#00EC00;
border:solid 2px silver;
   }

input.viVoceMenu{
background-color:#A65353;
font-size:130%;
color:white;
cursor:pointer;
border:thin
   }

input.viVoceMenu:hover{
   color:#00EC00
   }

.viVoce2{
	border-radius:15%;
background-color:lightsalmon;
color:maroon;
cursor:pointer;
border:solid 1px maroon;
font-size:10pt;
   }

.viVoce2:hover{
   background-color:firebrick;
   color:white;


   }



button.rec {
      border-radius:40% 0% 0% 40%;
      font-size:9pt;
      border:solid 1px crimson;
      padding-right:6px;
       cursor:pointer;
      title:'registra';
   }

   button.rec:hover {background-color:crimson;color:white;cursor:pointer}
button.rec:active {color:beige;background-color:orange}


   button.stoppa {
      font-size:9pt;
      border:solid 1px black;
      cursor:pointer;
   }

   button.stoppa:hover {
      color:white;
     background-color:blue;
      }

   button.stoppa:active {
  background-color:blue;
   color:white;
      }



   button.suona {
      border-radius: 0% 0% 0% 0%;
      font-size:9pt;
      border:solid 1px green;
      padding-left:6px;
      cursor:pointer
   }

   button.suona:hover {
      background-color:green;
     color:white
     
      }

      button.suona:active {
      background-color:green;color:white;
      }

 button.serieTemi {
      border-radius: 5% 5% 5% 5%;
      font-size:9pt;
      border:solid 1px silver;
      padding-left:6px;
      cursor:pointer
   }

   button.serieTemi:hover {
      background-color:green;
     color:white;
	 
     
      }

      button.serieTemi:active {
      background-color:green;
	  color:white;
	 
      }
	  
	  
	  button.chiusura {
		   background-color:crimson;
		   color:gainsboro;
      border-radius: 5% 5% 5% 5%;
      font-size:9pt;
      border:solid 1px silver;
      padding-left:6px;
      cursor:pointer
   }

   button.chiusura:hover {
      background-color:green;
     color:white;
	 
     
      }

      button.chiusura:active {
      background-color:green;
	  color:white;
	 
      }
	  
	  
	  



button.download {
      border-radius:0% 0% 0% 0%;
      font-size:9pt;
      color:#006B9F;
      border:solid 1px #006B9F;
    
   }
   
   button.orologio {
      border-radius:0% 0% 0% 0%;
      font-size:9pt;
      color:#006B9F;
      border:solid 1px #006B9F;
     width:46px;
     text-align:center

   }

   button.download:hover {color:#2BACA6;cursor:pointer}
 button.download:active {background-color:#2BACA6;color:white}

button.chiudi {
      border-radius:0% 40% 40% 0%;
      font-size:9pt;
      color:maroon;
      border:solid 1px maroon;
      padding-right:6px;

   }

   button.chiudi:hover {background-color:maroon;color:white;cursor:pointer}
   button.chiudi:active {background-color:orange;color:white;}


span.regCase{
display:none;
border-radius:5% 5% 5% 5%;
padding-bottom:4px;
padding-right:2px;
padding-left:2px;
border:solid 1px maroon;
margin:2px;
}


.popover{
  background: white;
  color: black;
  text-align:justify;
  border:color 1px maroon;
  
 
}

.popover-header{
   background-color:darkGreen;
   color: white !important;
   text-align:center
}

div.inPop {width:50%;margin:auto;padding:1%;border:solid 1px maroon}


.tooltip.bs-tooltip-bottom .arrow::before {
  border-bottom-color: silver;
}

.tooltip.bs-tooltip-bottom .tooltip-inner {
  background-color: maroon;
}

.tooltip.bs-tooltip-top .arrow::before {
  border-bottom-color: silver;
}

.tooltip.bs-tooltip-top .tooltip-inner {
  background-color: maroon;
}

.tooltip.bs-tooltip-left .arrow::before {
  border-bottom-color: silver;
}

.tooltip.bs-tooltip-left .tooltip-inner {
  background-color: maroon;
}

.tooltip.bs-tooltip-bottom .arrow::before {
  border-bottom-color: silver;
}

.tooltip.bs-tooltip-bottom .tooltip-inner {
  background-color: maroon;
}

.tooltipDiv {
     display: none;
      width: 320px;
      z-index: 101;
      background-color: #fff;
      border: 2px solid maroon;
      padding: 12px 12px 12px 12px;
      border-radius: 0px 25px 0px 25px;
	  
    }

a.chiuDiz {width:15%;padding:2px 4px 2px 4px;text-align:right;color:SlateGray;text-decoration:none;border:1px solid maroon;border-radius: 0px 10px 0px 4px;title:'chiudi'}
a.chiuDiz:hover{color:white;background-color:maroon;border:solid 2px silver; text-decoration:none}

a.copDiz {width:15%;margin-right:2px;padding:2px 4px 2px 4px;text-align:left;color:SlateGray;text-decoration:none;border:1px solid maroon;border-radius: 10px 0px 4px 0px;font-size:105%;title:'salva la voce'}
a.copDiz:hover{color:white;background-color:green;border:solid 2px silver; text-decoration:none}

aside {
  width: 6%;
 padding-left: 1px;
  margin-left: 1px;
  margin-right: 14px;
  margin-top:14px;
  float: right;
  font-style: italic;
  color:maroon;
text-align:center;
border:none;
font-size:10pt;
cursor:pointer;
background-color:white;
animation: fadeIn 3s;
}
//.bandiera:before{font-size:10pt;content:'testo in\a';white-space:pre}
.bandiera{margin-top:35%}
//.bandiera:hover{opacity:1}



/*

codici per i layer sovrapposti della traduzione interlineare

*/
.container_row {
    //border: 1px solid crimson;
    height: 330px;
    margin: 0;
    position: relative;
}

.strato1 {
    position: absolute;
    width:90%;
    z-index: 1;
    margin-right: auto;
   margin-left:auto;
    top: 18px;
    height:330px;
    font-size:12pt;
line-height:2.2;
}

.strato2 {
    position: absolute;
    width:98%;
    z-index: 2;
    left: 0;
    top: 0;
    height: 330px;
    border: none;
   font-style:normal;
    color:green;
    font-size:15pt;
    line-height:1.9;
}



/**
 * Pannello latearle autouscente con navigazione
#A65353 (vecchio colore)
 */

.nav {
    
    width: 315px;
    min-width: 315px;
    /* fissiamo e indichiamo l'altezza massima  */
    height: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    margin: 0;
    /* spostiamo(nascondiamo)il pannello rispetto bordo sinistro della pagina  */
    left: -265px;
    /* spazi interni */
    padding: 15px 20px;
    /* regoliamo l' uscita del panello  */
    -webkit-transition: left 0.3s;
    -moz-transition: left 0.3s;
    transition: left 0.3s;
    background: maroon;
   opacity:0.890;
    z-index: 2000;
}

/**
 * Bottone interruttore del pannello
 * tag <label>
 */
 
.nav-toggle {
   
    /* posizionamento assoluto*/
    position: absolute;
    /* rispetto bordo sinistro del pannello  */
    left: 265px;
    /* rispetto bordo superiore  */
    top: 0.5em;
    /* spazzi interni  */
    padding: 0.4em;
    /* indichiamo il colore dello sfondo dell'interruttore
     * qui corrisponde al colore del pannello
    */
    background: inherit;
    /* colore del testo */
    color: #dadada;
    /* tipo del cursore */
    cursor: pointer;
    /* altezza del font */
    font-size: 1.8em;
    line-height: 1;
    /* sempre in prima vista rispetto altri elementi della pagina  */
    z-index: 2001;
    /* animazione del colore del testo al hover */
    -webkit-transition: color .25s ease-in-out;
    -moz-transition: color .25s ease-in-out;
    transition: color .25s ease-in-out;
}

/* identifichiamo il test2o del bottone interruttore
 * simbolo Unicode (TRIGRAM FOR HEAVEN)
*/

.nav-toggle:after {
    content: '\2630';
    text-decoration: none;
   
}

/* colore del testo al hover  */

.nav-toggle:hover {
    color: #f4f4f4;
}

/**
 * Checkbox nascosto
 * invisibile e inaccessibile  :)
 * nome del selettore del attributo del checkbox
 */

[id='nav-toggle'] {
    position: absolute;
    display: none;
}

/**
 * cambiamento della posizione dell' interruttore
 * in caso di dispositivi mobili
 * quando pannello aperto si trova all' interno del pannello */

[id='nav-toggle']:checked ~ .nav > .nav-toggle {
    left: auto;
    right: 2px;
    top: 1em;
}

/**
 * Quando checkbox selezionato, aprire pannello
 * usiamo pseudo-classe :checked
 */

[id='nav-toggle']:checked ~ .nav {
    left: 0;
    box-shadow:4px 0px 20px 0px rgba(0,0,0, 0.5);
    -moz-box-shadow:4px 0px 20px 0px rgba(0,0,0, 0.5);
    -webkit-box-shadow:4px 0px 20px 0px rgba(0,0,0, 0.5);
    overflow-y: auto;
   
}

/*
 * spostamento del contenuto della pagina
 * per larghezza del pannelo ,
 * non è obbligatorio il trucco, ma puoi sempre usarlo
*/

[id='nav-toggle']:checked ~ main > article {
    -webkit-transform: translateX(320px);
    -moz-transform: translateX(320px);
    transform: translateX(320px);
   
}

/*
 * cambio del simbolo del bottone interruttore ,
 * qui usiamo una freccia 21E4 o una x (2716-17-19 etc.)
 * ma possiamo cambiare
*/

[id='nav-toggle']:checked ~ .nav > .nav-toggle:after {
    content: '\2718';

}

/**
 * prefissi per Android <= 4.1.2
 *
 */

body {
   -webkit-animation: bugfix infinite 0s;
}

@-webkit-keyframes bugfix {
    to {
      padding: 0;
    }
}

/**
 * per dispositivi medie e piccoli
 */

@media screen and (min-width: 320px) {
    html,
    body {
      margin: 0;
      overflow-x: hidden;
    }
}

@media screen and (max-width: 320px) {
    html,
    body {
      margin: 0;
      overflow-x: hidden;
    }
    .nav {
      width: 100%;
      box-shadow: none;
     
    }
}

/**
 * Definiamo lo stile del titolo(logo) del panello
*/

.nav h2 {
    width: 90%;
    padding: 0;
    margin: 25px 0;
    text-align: center;
    text-shadow: rgba(255, 255, 255, .1) -1px -1px 1px, rgba(0, 0, 0, .5) 1px 1px 1px;
    font-size: 1.3em;
    line-height: 1.3em;
    opacity: 0;
   font-style:italic;
    transform: scale(0.1, 0.1);
    -ms-transform: scale(0.1, 0.1);
    -moz-transform: scale(0.1, 0.1);
    -webkit-transform: scale(0.1, 0.1);
    transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -webkit-transform-origin: 0% 0%;
    transition: opacity 0.8s, transform 0.8s;
    -ms-transition: opacity 0.8s, -ms-transform 0.8s;
    -moz-transition: opacity 0.8s, -moz-transform 0.8s;
    -webkit-transition: opacity 0.8s, -webkit-transform 0.8s;
}

.nav h2 a {
    color: #dadada;
    text-decoration: none;
    text-transform: lowercase;
}


/*Uscita morbida del titolo(logo) al apertura del panello  */

[id='nav-toggle']:checked ~ .nav h2 {
    opacity: 1;
    transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
}

/**
 * Decoriamo il menu
 * usando la lista non numerata per le voci
 * aggiungiamo passaggi morbidi e trasformazioni
 */

.nav > ul {
    display: block;
    margin-left: 3%;
    padding: 0;
    list-style: none;
}

.nav > ul > li {
    line-height: 2.5;
    opacity: 0;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-transition: opacity .5s .1s, -webkit-transform .5s .1s;
    -moz-transition: opacity .5s .1s, -moz-transform .5s .1s;
    -ms-transition: opacity .5s .1s, -ms-transform .5s .1s;
    transition: opacity .5s .1s, transform .5s .1s;
}

[id='nav-toggle']:checked ~ .nav > ul > li {
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}

/* impostiamo intervalli di apparizone delle voci del menu  */

.nav > ul > li:nth-child(2) {
    -webkit-transition: opacity .5s .2s, -webkit-transform .5s .2s;
    transition: opacity .5s .2s, transform .5s .2s;
}

.nav > ul > li:nth-child(3) {
    -webkit-transition: opacity .5s .3s, -webkit-transform .5s .3s;
    transition: opacity .5s .3s, transform .5s .3s;
}

.nav > ul > li:nth-child(4) {
    -webkit-transition: opacity .5s .4s, -webkit-transform .5s .4s;
    transition: opacity .5s .4s, transform .5s .4s;
}

.nav > ul > li:nth-child(5) {
    -webkit-transition: opacity .5s .5s, -webkit-transform .5s .5s;
    transition: opacity .5s .5s, transform .5s .5s;
}

.nav > ul > li:nth-child(6) {
    -webkit-transition: opacity .5s .6s, -webkit-transform .5s .6s;
    transition: opacity .5s .6s, transform .5s .6s;
}

.nav > ul > li:nth-child(7) {
    -webkit-transition: opacity .5s .7s, -webkit-transform .5s .7s;
    transition: opacity .5s .7s, transform .5s .7s;
}

.nav > ul > li:nth-child(8) {
    -webkit-transition: opacity .5s .8s, -webkit-transform .5s .8s;
    transition: opacity .5s .8s, transform .5s .8s;
}

.nav > ul > li:nth-child(9) {
    -webkit-transition: opacity .5s .9s, -webkit-transform .5s .9s;
    transition: opacity .5s .9s, transform .5s .9s;
}

.nav > ul > li:nth-child(10) {
    -webkit-transition: opacity .5s .10s, -webkit-transform .5s .10s;
    transition: opacity .5s .10s, transform .5s .10s;
}


/**
 * decoriamo link delle voci del menu
 */

.nav > ul > li > a {
    display: inline-block;
    position: relative;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size: 1.2em;
    color: #dadada;
    width: 100%;
    text-decoration: none;
    /* passagio morbido */
    -webkit-transition: color .5s ease, padding .5s ease;
    -moz-transition: color .5s ease, padding .5s ease;
    transition: color .5s ease, padding .5s ease;
}

/**
 * stato dei link al passaggio del mouse
 */

.nav > ul > li > a:hover,
.nav > ul > li > a:focus {
    color: white;
    padding-left: 15px;
}

/**
 * sottolineatura dei link del menu
 */

.nav > ul > li > a:before {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    height: 1px;
    width: 100%;
    -webkit-transition: width 0s ease;
    transition: width 0s ease;
}

.nav > ul > li > a:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 100%;
    background: #3bc1a0;
    -webkit-transition: width .5s ease;
    transition: width .5s ease;
}

/**
 * animazione della  linea di sottolineatura al hover
 */

.nav > ul > li > a:hover:before {
    width: 0%;
    background: #3bc1a0;
    -webkit-transition: width .5s ease;
    transition: width .5s ease;
}

.nav > ul > li > a:hover:after {
    width: 0%;
    background: transparent;
    -webkit-transition: width 0s ease;
    transition: width 0s ease;
}

/*

.mask-content {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    visibility: hidden;
    opacity: 0;
}

[id='nav-toggle']:checked ~ .mask-content {
    visibility: visible;
    opacity: 1;
    -webkit-transition: opacity .5s, visibility .5s;
    transition: opacity .5s, visibility .5s;
}

*/

/**
 * codice per simulare un vecchio marquee
 */


.example4 {
 height: 35px;
 overflow: hidden;
 position: relative;
 display:none;
}
.example4 h3 {
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 35px;
 text-align: center;
 color:green;
 font-size:120%;
 font-weight:normal



 /* Apply animation to this element */
 -moz-animation: example4 8s ease-out;
 -webkit-animation: example4 8s ease-out;
 animation: example4 7s ease-out;
}
/* Move it (define the animation) */
@-moz-keyframes example4 {
 0%   { -moz-transform: translateX(200%); }
 100% { -moz-transform: translateX(0%); }
}
@-webkit-keyframes example4 {
 0%   { -webkit-transform: translateX(200%); }
 100% { -webkit-transform: translateX(0%); }
}
@keyframes example4 {
 0%   {
 -moz-transform: translateX(200%); /* Firefox bug fix */
 -webkit-transform: translateX(200%); /* Firefox bug fix */
 transform: translateX(100%);
 }
 100% {
 -moz-transform: translateX(0%); /* Firefox bug fix */
 -webkit-transform: translateX(0%); /* Firefox bug fix */
 transform: translateX(0%);
 }
}


.example5 {
 height: 35px;
 overflow: hidden;
 position: relative;
 display:none;
}
.example5 h3 {
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 35px;
 text-align: center;
 color:green;
 font-size:120%;
 font-weight:normal


 /* Apply animation to this element */
 -moz-animation: example5 8s ease-out;
 -webkit-animation: example5 8s ease-out;
 animation: example5 7s ease-out;
}
/* Move it (define the animation) */
@-moz-keyframes example5 {
 100%   { -moz-transform: translateX(0%); }
 0% { -moz-transform: translateX(200%); }
}
@-webkit-keyframes example5 {
 100%   { -webkit-transform: translateX(-100%); }
 0% { -webkit-transform: translateX(200%); }
}
@keyframes example5 {
 100%   {
 -moz-transform: translateX(0%); /* Firefox bug fix */
 -webkit-transform: translateX(0%); /* Firefox bug fix */
 transform: translateX(0%);
 }
 0% {
 -moz-transform: translateX(-200%); /* Firefox bug fix */
 -webkit-transform: translateX(-200%); /* Firefox bug fix */
 transform: translateX(-100%);
 }
}

///CSS per i post-it

#board {
  font-family: monospace;
  background-color: #96CDCD;
  margin:0;
  padding:0;
  position: relative;
  cursor:pointer;
  }
  
  

.post-it {
  position: absolute !important;
  width: 200px;
  background-color:snow;                                       ;
  box-shadow: -4px 4px 8px #555;
 overflow: hidden;
 z-index:200;
 opacity:0.780;
}

.post-it .header {
 // background-color:#FEE5AC;
  background-color:maroon;
  text-align: right;
  padding-top: 3px;
  cursor:move;
  
}

.post-it .header:hover {
 //background-color:#FFFACD;
 background-color:maroon;
  
}

.post-it .header a, .post-it .header a:visited {
  text-decoration: none;
  color: #603311;
  font-weight: bold;
}

.post-it .header a:hover {
  color: #D19275;
}

.post-it .content {
  padding: 10px;
  min-height: 190px;
  font-size:12pt;
  text-align:justify;
  color:black;
  outline: none;
  animation:fadeIn 2s;
}

.botApp {border-radius:25%;margin-bottom:2px;background-color:#FEE5AC;color:maroon;font-size:11pt;cursor:pointer}
.headBut{background-color:maroon;color:white;font-size:10pt;font-style:normal;border:solid 1px silver; cursor:pointer}
.headBut2{background-color:maroon;color:white;font-size:10pt;font-style:normal;border:solid 1px silver; cursor:pointer}
.headBut:hover {background-color:green;color:white;border:solid 1px black}
.headBut2:hover {background-color:salmon;color:nightblue;border:solid 1px black}

table.verbi{width:94%;max-width:100%;padding:1%;margin:auto;border:solid 1px #4CAF50;border-spacing:2px;border-collapse:separate;margin-top:15px}
.disple{margin-top:0%;border:outset 3px gainsboro;border-radius:5%;background:lightgreen}
.displeSum {margin-top:0%;border:outset 3px gainsboro;border-radius:5%;background:wheat}
.displeTit {width:48%;background:WhiteSmoke;border:outset 3px OldLace;border-radius:5%}

.ciclico
{border:solid 1px darkgreen;border-radius:50%;margin-bottom:2px;background-color:beige;color:maroon;font-size:14pt;cursor:pointer}
.ciclico:hover {transition-duration: 0.6s;color:beige;background-color:maroon}
.ciclico:focus {transition-duration: 0.8s;color:beige;background-color:darkGreen}

.comples {border:solid 1px darkgreen;border-radius:10%;text-align:center;margin-bottom:0px;background-color:beige;color:maroon;font-size:14pt;cursor:pointer}
.comples:hover {transition-duration: 0.6s;color:beige;background-color:maroon}

.ciclaTab {border-radius:50%;margin:1px;background-color:beige;color:maroon;font-size:14pt;cursor:pointer}
.ciclaTab:hover{transition-duration: 0.6s;color:white;background-color:green}
.presTab {border-radius:10%;margin-bottom:2px;background-color:maroon;color:beige;font-size:14pt;cursor:pointer}
.presTab:hover{transition-duration: 0.6s;color:maroon;background-color:beige}
.infectum {width:8%;text-align:center;border-radius:8px;font-size:12pt;background-color:RGB(220 220 220)}
.perfectum {width:8%;text-align:center;border-radius:8px;font-size:12pt;background-color:RGB(220 220 220)}
.supinum {width:8%;text-align:center;border-radius:8px;font-size:12pt;background-color:RGB(220 220 220)}
.novax {width:8%;text-align:center;color:black;border-radius:8px;font-size:12pt;background-color:RGB(220 220 220)}
.puls {width:4%;margin:2%}
.cong {border:solid 3px beige}
.imp {border:solid 3px beige}
.fnom {border:solid 3px beige)
.pres{border:solid 3px beige}
.rel{border:solid 3px beige}
.mfin {border:solid 3px beige}
.minfin {border:solid 3px beige}
td.lessemi{margin:1px;padding:3px;cursor:pointer}



.slidecontainer {
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #04AA6D;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #04AA6D;
  cursor: pointer;
}


.produce {
content:&#8227;
color:firebrick;
}
	
	/*forme geometriche*/
	.triangle-up {
	width: 0;
	height: 0;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	border-bottom: 50px solid silver;
}

.triangle-down {
	width: 0;
	height: 0;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	border-top: 50px solid silver;
}

.triangle-topleft {
      width: 0;
      height: 0;
      border-top: 100px solid green;
      border-right: 100px solid transparent;
    }
	
	 .triangle-topright {
      width: 0;
      height: 0;
      border-top: 100px solid red;
      border-left: 100px solid transparent;
    }
	
	.circle {
	padding:2% 0;
  width: 70px;
  height: 70px;
 vertical-align:middle
  text-align:center
  color:black;
  background: transparent;
  border-radius: 60px/60px;
  font-size:18pt
}