/* lo slider contiene alcune immagini degli incontri o eventi */
/*       10 ott 25         IMPOSTAZIONI DELLE VARIABILI                */
:root {
  --tp: 05s;/* t = tempo di permanenza delle immagini */
  --o:0.5;/* o = opacità */
}

#slider{
    margin:10px 0 30px 0;
    padding:0%;
         border: 0px solid rgb(255,0,0);/* colore rosso (solo per controllo) */
    float:left;
    width:100%;
    z-index: 0;/* si pone a livello inferiore  */
    }

#slider ul{
    background-color:rgb(0,255,0);/* colore verde (solo per controllo) */
    background-color:transparent;/* normale */
        border: 0px solid rgb(0,255,0);/* colore  (solo per controllo) */
    margin:auto;
    padding:0%;
    list-style:none;
    width:100%;
    height:20vw;
    max-height: 235px;
    position:relative;
}

#slider ul li{
  background-color:rgb(255,0,0);/* colore rosso (solo per controllo) */
  background-color:transparent;/* normale */
  margin:0px;
  padding:0%;
  opacity:0;
  position:absolute;
  top:0px;left:0px;
  width:100%;
  font-size: 160%;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  line-height: 180%;

/* Opera 12.0*/
-o-animation-name:slides_animation;
-o-animation-duration:calc(3*var(--tp));
-o-animation-timing-function: linear;
-o-animation-iteration-count: infinite;

-o-animation-play-state: running;
-o-animation-fill-mode: forwards;

/* Chrome 4.0, Safari 4.0, Opera 15.0*/
-webkit-animation-name:slides_animation;       /*elemento per keyframes*/
-webkit-animation-duration:calc(3*var(--tp));   /*tempo totale*/
/*ease - specifies an animation with a slow start, then fast, then end slowly*/
-webkit-animation-timing-function: linear;     /*linear - specifies an animation with the same speed from start to end*/
-webkit-animation-iteration-count: infinite;   /*ripetizione della animazione*/
                    /*ritardo nella partenza*/
-webkit-animation-play-state: running;         /*paused|running|initial|inherit*/
-webkit-animation-fill-mode: forwards;         /*L'elemento manterrà i valori di stile impostati dall'ultimo fotogramma chiave /

/* Mozilla 5.0*/
-moz-animation-name:slides_animation;
-moz-animation-duration:calc(3*var(--tp));
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;

-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;

animation-name:slides_animation;
animation-duration:calc(3*var(--tp));
animation-timing-function: linear;
animation-iteration-count: infinite;

animation-play-state: running;
animation-fill-mode: forwards;
}

#slider ul li:nth-child(1){-o-animation-delay:calc(0*var(--tp));-webkit-animation-delay:calc(0*var(--tp));-moz-animation-delay:calc(0*var(--tp));animation-delay:calc(0*var(--tp))}
#slider ul li:nth-child(2){-o-animation-delay:calc(1*var(--tp));-webkit-animation-delay:calc(1*var(--tp));-moz-animation-delay:calc(1*var(--tp));animation-delay:calc(1*var(--tp))}
#slider ul li:nth-child(3){-o-animation-delay:calc(2*var(--tp));-webkit-animation-delay:calc(2*var(--tp));-moz-animation-delay:calc(2*var(--tp));animation-delay:calc(2*var(--tp))}


#slider ul li img{
display:inline-block;
        max-width:32.00%;
padding: 0%;
xmax-height: 235px;
        border: 1px solid gold;/* colore  (solo per controllo) */

}

/* *** definizione di una classe per rendere NON COPIABILI le immagini dello slider */
.picture {
width: auto;
position:relative;
margin: 0px;
        border: 0px solid green;
}
.picture img{
display: inline-block;
padding: 0px;
        border: 0px dotted blue;
}
.picture span{
position: absolute;
top: 0;left: 0;
width: 100%;height: 100%;
background: url(../blank.gif);
        border: 0px dotted lime;
}


/*animation css3*/
@-o-keyframes slides_animation{
    0%{opacity:0;}
    8%{opacity:calc(1*var(--o));}
   16%{opacity:calc(2*var(--o));}
   33%{opacity:calc(2*var(--o));}
   49%{opacity:0;}
  100%{opacity:0;}
}
@-webkit-keyframes slides_animation{
    0%{opacity:0;}
    8%{opacity:calc(1*var(--o));}
   16%{opacity:calc(2*var(--o));}
   33%{opacity:calc(2*var(--o));}
   49%{opacity:0;}
  100%{opacity:0;}
}

@-moz-keyframes slides_animation{
    0%{opacity:0;}
    8%{opacity:calc(1*var(--o));}
   16%{opacity:calc(2*var(--o));}
   33%{opacity:calc(2*var(--o));}
   49%{opacity:0;}
  100%{opacity:0;}
}

@keyframes slides_animation{
    0%{opacity:0;}
    8%{opacity:calc(1*var(--o));}
   16%{opacity:calc(2*var(--o));}
   33%{opacity:calc(2*var(--o));}
   49%{opacity:0;}
  100%{opacity:0;}
}