/* ==========================================================================
   R.A.C.I. - FOGLIO DI STILE COMUNE A TUTTE LE PAGINE
   (prima era copiato in ogni cartella come css/styleSS.css)
   ========================================================================== */
  /* stile pagina */
body {
    width: 97%;
    font-family:  Verdana;
    color: #000000;
    margin: auto; 
    background-image: url("../img/back_lgt.jpg");
 background-color: #cccccc;
 }
h1 {
    background-color: #efefef;
    margin: 1% 0 1%;
    padding: 1%;}
h2 {
    text-align: center;
    padding: 10px;}
p {
    width: auto;
    margin: auto;
    }
    
.feature{
    width: 97%;
    padding: 10px;
    margin: auto;
    }
    
hr { 
    border: 0;
    width: 100%;
    color: #000000;
    background-color: #000000;
    height: 1px;
    }  

  
  /* reset stili */

ul  {
    margin: 0;
    padding: 0;
    list-style-type: none;
    }

/* lista orizzontale */

#menu li {
    display: inline-block;
    position: RELATIVE;
    }

/* menu */

#menu {
    width: 100%;
    background-color: ##2F4999;
    background: -moz-linear-gradient(#2F4999, #111); /* firefox*/
    background: linear-gradient(#2F4999, #111);
    border: 2px solid #222;
    border-radius: 5px;
    box-shadow: 5px 5px 20px #2F4999;
    text-align: center;
    }

/* links */

li a {
    display: block;
    padding: 10px 10px;
    width: 90px;
    color: #FFFFFF;
    text-transform: none;
    font: bold 0.95em Verdana,Helvetica,sans-serif;
    text-decoration: none;
    text-shadow: 0 1px #0000FF;
    border-right: 2px solid #0000FF;
    box-shadow: 2px 0 #2F4999;
    border: none;
    border-radius: 6px
    }

/* rimuoviamo il bordo e l'ombreggiatura dall'ultimo link del menu*/

#donate {
    border: none;
    box-shadow: none;  
    }

/* links hover */

a:hover {
    color: #FFFF00;
    }
/* sub menu */

#menu li .hidden {
    display: block;
    position: absolute;
    top: 100px;
    left: 0;
    background-color: black;
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
    }

/* links sub menu */

#menu li .hidden li a {
    width: 100px;
    border-bottom: 1px solid #202020;
    border-right: none;
    box-shadow: none;
}
/* menu hover */

#menu li:hover .hidden {
    margin-top: -65px;
    opacity: 1;
    -webkit-transition: all 0.5s ease; /* safari and chrome */
    -moz-transition: all 0.5s ease; /* firefox */
    -o-transition: all 0.5s ease; /* opera */
    transition: all 0.5s ease;
    visibility: visible;
    }
@media only screen and (max-width: 768px) {
  
#menu {
    background: none;
    border: none;
    border-radius: 3;  
    box-shadow: 5px 5px 10px #777;
    text-align: center;
    display: none;  
}
  
/* rendiamo gli elementi dei menu elementi di blocco */  
  
ul li {
    display: block;
    }
  
/* impostiamo la larghezza massima per gli elementi dei menu e i links */  
  
ul li, ul li a {
    padding-right: 0;
    padding-left: 0;
    width: 100%;
    }
  
#menu li .hidden li, #menu li .hidden li a {
    width: 100%;
    }

/* rendiamo visibili gli elementi del sub menu solo al passaggio del mouse */  
  
#menu li .hidden li {
    display: none;
    }
 
#menu li:hover .hidden li {
    display: block;
    }  

/* aumentiamo la grandezza dei links */ 
  
li a {
    font: bold 0.9em Verdana, sans-serif;
    } 
  
/* resettiamo la posizione degli elementi del menu */  
  
#menu li {
    position: static;
    }  
  
/* resettiamo la posizione del sub menu e lo rendiamo visibile */  

#menu li .hidden {
    position: static;
    opacity: 1;
    visibility: visible;
    }
  
/* rimuoviamo bordo e ombreggiatura dai links del menu */
  
#menu li a {
    border: none;
    box-shadow: 10px 10px 40px #777;  
}  
  
/* nessuna animazione al passaggio del mouse */  
  
#menu li:hover .hidden {
    margin: 0;
    } 
  
/* rimuoviamo il bordo dai links del sub menu */  
  
#menu li .hidden li a {
    border: none;
    }
  
/*diamo un colore di sfondo agli elementi del menu e del sub menu */
  
#menu li {
    background-color: #0000FF;
    }
  
#menu li .hidden li {
    background-color:#0000FF;
    } 
    
    }

/* diamo uno stile al pulsante del menu e nascondiamolo */

.showMenu {
    padding: 10px 80;
    color: yellow;
    background: #0000FF;
    text-align: center;
    display: none;
    }
/* nascondiamo il checkbox */

input[type=checkbox]{
    display: none;
    }

/* mostriamo il menu quando il checkbox viene selezionato */

input[type=checkbox]:checked ~ #menu {
    display: block;
    }
/* mostriamo il pulsante del menu */
        
.showMenu {
    display: block;
    }

.column1of2 {
    float: left;
    width: 46%;
    margin: 1%;}
.column2of2 {
    float: left;
    width: 46%;
    margin: 1%;}
    
/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  height: 10px;
  width: 10px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #2F4999;
box-shadow: 2px 0 #FFFF00;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}


.footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: #2F4999;
}

/* ==========================================================================
   PULSANTE MENU PER CELLULARE
   Sotto i 768 px il menu e' nascosto: questo pulsante lo apre e lo chiude.
   ========================================================================== */
.raci-menu-btn {
    display: none;
}
@media only screen and (max-width: 768px) {
  .raci-menu-btn {
    display: block;
    width: 100%;
    margin: 8px 0;
    padding: 12px 10px;
    font: bold 1.1em Verdana, Helvetica, sans-serif;
    color: #FFFF00;
    background: linear-gradient(#2F4999, #111);
    border: 2px solid #222;
    border-radius: 5px;
    box-shadow: 5px 5px 20px #2F4999;
    cursor: pointer;
  }
  #menu.raci-open {
    display: block;
    position: relative;
    z-index: 5000;   /* sopra ai riquadri della pagina */
  }
  /* loghi e titolo non servono nel menu aperto su cellulare */
  #menu .raci-logo,
  #menu > a {
    display: none;
  }
  /* sottomenu aperto con un tocco (Le foto, Libreria, Pratiche) */
  #menu li.raci-sub-open .hidden li {
    display: block;
  }
}


/* ==========================================================================
   MENU CHE SI ADATTA ALLA LARGHEZZA DELLA PAGINA (solo computer/tablet)
   Il fattore --s viene calcolato da comune/raci-layout.js:
   1 = dimensione originale (finestra larga 1300 px), da 0.6 a 1.35.
   ========================================================================== */
@media only screen and (min-width: 769px) {
  #menu li a {
    width: calc(var(--raci-btn, 90px) * var(--s, 1));
    padding: calc(10px * var(--s, 1));
    font-size: calc(0.95em * var(--s, 1));
  }
  #menu #livello1 font {
    font-size: calc(32px * var(--s, 1));
  }
  #menu li .hidden {
    top: calc(100px * var(--s, 1));
  }
  #menu li:hover .hidden {
    margin-top: calc(-65px * var(--s, 1));
  }
  #menu li .hidden li a {
    width: calc(100px * var(--s, 1));
  }
}