@font-face {
  font-family: "FontAwesome";
  src: url('../font/fontawesome-webfont.eot');
  src: url('../font/fontawesome-webfont.eot?#iefix') format('eot'),
  url('../font/fontawesome-webfont.woff') format('woff'),
  url('../font/fontawesome-webfont.ttf') format('truetype'),
  url('../font/fontawesome-webfont.svg#FontAwesome') format('svg');
}

html, body {
      margin: 0;
      padding: 0;
      width: 100%;
}
/****************************************//*Inizioparte riguardante il font per il menu a tendina*/
.fa{
    display:inline-block;
    font:normal normal normal 14px/1 FontAwesome;
    font-size:inherit;
    text-rendering:auto;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}
.fa-bars:before{
    content:"\f0c9";
} 
.fa-2x{
    font-size:2em;
}
/****************************************//*Fine parte riguardante il font per il menu a tendina*/
.logo {
    font-family:  'Sacramento', cursive;  
    line-height: 60px;
    position: fixed;
    float: left;
    margin: 5px 20px;
    color: #fff;
    font-weight: bold;
    font-size: 36px;
    letter-spacing: 2px;
}
 
nav {
      position: fixed;
      width: 100%;
      line-height: 40px;
}
 
nav ul {
      line-height: 50px;/*Altezza banda nera dei menu*/
      list-style: none;
      background: none;
      overflow: hidden;
      color: #fff;
      padding: 0;
      text-align: right;
      margin: 0;
      padding-right: 80px;/*margine da destra del intero menu*/
      transition: 1s;
}
 
nav.black ul {
/*colore della barra a scendere della pagina con dimensioni grandi*/    
      background: none;
}
 
nav ul li {
      display: inline-block;
      padding: 5px 10px;
    font-family:  'Sacramento', cursive;
}
 
nav ul li a {
      text-decoration: none;
      color: blue;/*colore del menu*/
      font-size: 24px;margin-right: 20px;
}
 
.menu-icon {
      line-height: 60px;
      width: 100%;
/*colore della barra dei menu alla dimensione inferirore dello schermo*/
      background: none;
/*allineamento a DX dell'icona del menu a tendina*/
      text-align: left  ;
      box-sizing: border-box;
      padding: 15px 0px;
      cursor: pointer;
      color: #fff;
      display: none;
}
@media screen and (max-width: 1200px) {
    .contenitore {
        width: 100%;
    }
}
@media(max-width: 786px) { 
.logo {
    float: right;
    position: fixed;
    top: 0;
    margin-top: 5px;
    margin-left: 55px;
    font-size: 25px;
}
nav ul {
    float: left;
    max-height: 0px;
/*colore del menu a tendina*/
    background: #000;
}
nav.black ul {
    background: #000;
}
.showing {
/*altezza del menu a tendina tottale */
    max-height: 40em;
    max-width: 15 em;
      }
nav ul li {
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
    text-align: center;
}
.menu-icon {
    display: block;
    margin: 0px;
    padding: 0px 10px;
}
}
@media(max-width: 480px) {
.logo {
    position: fixed;
    top: 0;
    margin-top: 5px;
    font-size: 20px;
}
nav ul {
    max-height: 0em;
    background: #000;
}
nav.black ul {
    background: #000;
}
.showing {
/*altezza e larghezza del menu a tendina tottale */  
    max-height: 40em;
    max-width: 15em;
}
nav ul li {
    box-sizing: border-box;
    width: 100%;
/*altezza singolo elenco menu*/
    padding: 10px;
    text-align: center;
}
.menu-icon {
    display: block;
    margin: 0px;
    padding: 0px 5px;
}
}