html body {
 font-family: 'Helvetica', sans-serif;
 background-color: #222;
 color: #fff;
 margin-left: 2%;
 margin-right: 2%;
}


a {
  color: #ff0303;
  text-decoration: none;
}

a:hover{
  color: #e6e6e6;
}  


#logosito {
   width: 40%;
}

#fraselogo {
   text-align: center;
   margin-top: 12px;
}
   
    
#header {
   padding-top: 3%;
   text-align: center;
}

#header h2 {
   font-family: "Helvetica", sans-serif;
   font-weight: bold;
   color: #fff;
   margin-top: 0.5em;
}


#torna_su {
   float:left;
   font-size: 27px;
   margin-left: 2%;    
   border: 5px;
   border-color: #141212;   
   border-style: double;
   border-radius: 4%;
   background-color: #c70e0e;
}    

#torna_su a {
   color: whitesmoke;
   letter-spacing: 0.5px;
   font-family: "Rockwell", sans-serif;
   padding: 5px;     
}   


/*------Menu'-----*/

nav ul {
    text-align: center;
    list-style-type: none;
    padding: 0.5em;
    margin: 2%;
} 

nav ul li {
    display: inline-block;
    text-align: center;
    margin: 2px;
    padding: 0.5px;
} 

nav ul li a { 
    display: inline-block;
    font-size: 38px;
    font-family: "Rockwell", sans-serif;
    color: white; 
    text-shadow: 2px 2px 4px black;
} 

nav ul li a:hover {    
    color: #e6e6e6;
    text-decoration: underline;
}


nav barra {
    height: 50px;
    padding: 1.8em;
    color: white;
}

.barra {
    font-size: 1.8em;
    padding: 10px;
}


.titlemenu {
    font-family: "Rockwell", sans-serif;
    text-align: center;
    color: #e6e6e6;
    background-color: #c70e0e; 
    font-size: 25px;
    border-style: double;
    border-width:thick;
    border-color: #e6e6e6;
    margin-top: 6px;
}

.titlemenu h2 {
   text-decoration: none;
   color: #e6e6e6; 
}
    

#box_all {            
    width: 100%;
}

#box_high {
    background-image: url(../Immagini/amplificatore%20wallpaper2.jpg);  
    background-size: cover;
    background-repeat: no-repeat;
    padding-bottom: 2%;
}
    

/*------Home-----*/

.titlehome {
    text-align: center;  
    font-size: 30px;
    font-family: sans-serif;
    margin-top: 50px;
}  


.testohome p {
    font-size: 1.5em;
    text-align: center;
    margin-left: 0.5%;
    margin-right: 0.5%;
    margin-top: 45px;
}  


#slider {
    overflow: hidden;
    margin-top: 3%;
    margin-bottom: 3%;
}

#slider figure {
    position: relative;
    width: 250%;
    margin: 0;
    left: 0;
    animation: 15s slider infinite;
}

#slider figure img {
    width: 14%;
    float: left;
}

@keyframes slider {
    0% {
        left: 0%;
    }
    20% {
        left: 0%;
    }
    25% {
        left: -50%;
    }
    45% {
        left: -50%;
    }
    50% {
        left: -145%;
    }
    70% {
        left: -145%;
    }
}


#immaginenota {
    text-align: center;
    margin-top: 45px;
    margin-bottom: 75px;
}
    
#immaginenota img {
    border: groove 7px #c70e0e;
    border-radius: 2%;
    width: 5%;
}


#testopresentazione a {
    color: #fa0202;
}

#testopresentazione a:hover{
    color: #e6e6e6;
}


.mappacalendario {
    display: table-row;
} 

#mappa, #calendario {
   vertical-align: middle;
   display: table-cell;
}

#maps {
   margin-bottom: 1%;
   margin-left: 54%;
   width: 38em; 
   height: 35em;
   border: dashed 7px;
   border-color: #de1e04;
   padding: 1%;
}  

#calendar { 
   width: 38em;
   height: 35em;
   margin: 60% ;
   padding: 1%; 
   margin-top: 1%;
   margin-bottom: 1%;
   border: dashed 7px;
   border-color: #e07014;
} 


#vieniatrovarci {
   text-align: center;
   vertical-align: middle;
   padding: 0 6% 0 6%;
}

#vieniatrovarci p {
   font-size: 1.5em; 
   margin-bottom: 25px;
}  


#quotetext1 {
   text-align: center;
   margin-top: 58px;
   margin-bottom: 2%;
   background: linear-gradient(to right, #e07014, #c70e0e);
   border-width: 3.2px;
   border-radius: 5px;
   border-style: dotted;
   border-color: #222;
   font-size: 1.2em;
   padding-bottom: 1px;
   padding-top: 1px;
   margin-left: 22%;
   margin-right: 22%;
}  


#quotetext1 h4 {
  color: #e6e6e6;
} 


/*------Chi siamo-----*/

#titlebio {
   text-align: right;  
   font-size: 30px;
   font-family: inherit;
   padding-top: 12px;
}   
  
#barra1 {
    font-size: 1.8em;
    padding: 10px;
}     
    

#paragbio {
   padding-top: 0.5px;
   padding-bottom: 5px;
   font-size: 1.5em;
   text-align: right;
   margin-right: 2%;
   margin-top: 3%;
}    
  
#paragbio2 {
    padding-bottom: 8px;
    font-size: 1.5em;
    text-align: right;
    margin-right: 2%;
}    


#immaginenota2 {
    text-align: right;
    margin-right: 12%;
    margin-top: 0.5%;
    margin-bottom: 25px;
}  

#immaginenota2 img {
    width: 3%;
    border: 4px #c70e0e;    
    border-style: outset;
    border-radius: 2%;
 }


#fotomuro {    
    float: left;
    width: 45%;
    border: 7px;
    border-color: #c70e0e;
    border-style: groove;
    border-radius: 4%;
    border-bottom-style: double;
    border-left-color: #fa0202;
    margin-right: 3%;
    margin-left: 1.5%;
    margin-bottom: 3%;
    margin-top: 8%;
}
    

#quotetext2 { 
   text-align: center;
   margin-top: 7%;
   background: linear-gradient(to right, #c70e0e,#e07014);
   border-width: 3.2px;
   border-radius: 5px;
   border-style: dotted;
   border-color: #f76205;
   font-size: 1.2em;
   margin-left: 20%;
   margin-right: 20%;
} 

#quotetext2 h4 {
   color: #e6e6e6;
}  


#titlebio2 { 
    text-align: left;  
    font-size: 30px;
    font-family: inherit;
}   

#barra2 {
    font-size: 1.8em;
    padding-right: 15px;
}  


#paragbio3 {
    padding-bottom: 5px;
    font-size: 1.5em;
    text-align: left;
    margin-left: 2%;
}    
  
#paragbio4 {
    font-size: 1.5em;
    text-align: left;
    margin-left: 2%;
    padding-bottom: 8px;
}  


#immaginenota3 {
   text-align: left;
   margin-left: 25%;
} 

#immaginenota3 img {
    width: 3%;
    border: 4px #c70e0e;    
    border-style: inset;
    border-radius: 2%;
 }


#testovantaggi {
    font-size: 1.5em;
    text-align: left;
}    


#fotomuro2 {  
    float: right;
    width: 45%;
    border: 7px;
    border-color: #c70e0e;
    border-style: groove;
    border-radius: 5%;
    border-bottom-style: double;
    border-right-color: #fa0202;
    margin-top: 150px;
    margin-right: 25px;
    margin-left: 15px;
}  


#frasemusica {  
    text-align: center;
    margin-top: 5%;
}     

#frasemusica h2 { 
   font: 1.5em;
   color: #fc0000;
   text-decoration: underline;
   font-size: 30px;
   font-style: oblique;
}  

summary {
   text-align: center;
   font-size: 1.5em;
   color: whitesmoke;
   margin-bottom: 0.2%;
} 


/*------Prodotti-----*/

#parprodotti {
  font-size: 1.5em;
  text-align: center;
  margin-bottom: 12px; 
  margin-top: 3%;
  margin-left: 0.5%;
  margin-right: 0.5%;
}


#titoloprodotti {
  text-align: center;
  font-size: 30px;
  margin-top: 35px;   
  margin-bottom: 20px;
}


#productstable {
  display: table;
  margin-top: 3%;
  margin-bottom: 5%;
  margin-left: 2%;
  margin-right: 2%;
}
   
#productspriga {
  display: table-row;
  overflow: auto; 
} 
    

#chitarra {
   display: table-cell;
   width: 50%;
   text-align: center;
   font-size: 1.3em;
   padding: 1.5%;
}    
 

#custodia {
   display: table-cell;
   width: 50%;
   text-align: center;
   font-size: 1.3em;  
   padding: 1.5%;
}    


#piatto {
   display: table-cell;
   width: 50%;
   text-align: center;
   font-size: 1.3em;    
   padding: 1.5%;
} 


#mixer {
   display: table-cell; 
   width: 50%;
   text-align: center;
   font-size: 1.3em;    
   padding: 1.5%;
}


.prodotto {
   border: 5px #c70e0e;
   border-style: solid;
   border-radius: 5%;
   width: 90%; 
}   

#titoloarticoli {
   font-size: 30px; 
   text-align: center;
   margin-top: 4%;
}
    
#pardisponibilita {
   font-size: 1.5em;
   text-align:center;   
}


/*-----Grafico-----*/

#chartcontainer {
    margin: auto;
    position: relative;
    margin-top: 3%;
    margin-bottom: 6%;
    width: 35%;
    height: 45%;
    border: 10px #de1e04;
    border-style: groove;
    border-radius: 2%;
    background-color: #d6d4d4;
    overflow: hidden;
}

#chart {
   position: static;
   width: 100%;
   height: 100%; 
   top: 0;
   right: 0;
}  


/*------Contatti-----*/


.parsocial p {
   font-size: 1.5em;
   text-align: center;
}  

.parsocial img {
   width: 2%;
   border: 5px #c70e0e;
   border-style: ridge;
   border-radius: 20%;
}


#parsocial2 {
   font-size: 1.5em;   
   text-align: center; 
   margin-bottom: 20px;
   margin-left: 0.5%;
   margin-right: 0.5%;
}     


#immaginenota4 {
   text-align: center;
   margin-top: 50px;
   margin-bottom: 50px;
}    

#immaginenota4 img {
   width: 3%;
   border: 4px #c70e0e;
   border-style: outset;
   border-radius: 2%;
}    


#titolocontatti2 {
   text-align: center;
   font-size: 30px;
} 


.tablep {
   font-size: 1.5em;  
   text-align: center;
   margin-bottom: 50px;
}


table {
   margin: auto;
   border: 8px double #c71212;
   margin-bottom: 50px;
}
    
th {
   border: 2px double #e6e6e6;
   font-size: 1.5em;
   padding-top: 8px;
   padding-bottom: 8px;
   padding-left: 8px;
   padding-right: 8px;
   background-color: #c70e0e;
}   

td {
   text-align: center;
   font-size: 1.5em;
   border: 2px double #e6e6e6;
   padding-top: 8px;
   padding-bottom: 8px;
   padding-left: 8px;
   padding-right: 8px;
   background-color: #c70e0e;
}

td.speciale {
   border: 5px #302c23;
   border-style: double;
}


form {
  margin: auto;
  display: table;
  background-color: #c70e0e;
  border: double 13px #ed6707;
  width: 60%;
  margin-top: 2.5%;
  margin-bottom: 6%;
}

#formp { 
  font-size: 1.5em;  
  text-align: center;
  margin-left: 0.5%;
  margin-right: 0.5%;
  margin-top: 5%;
}  

.tablerow p {
  text-align: center;
  font-weight: 600;
  font-size: 1.3em;
  color: whitesmoke; 
  padding: 0.5%;
}

.tablerow input {
  text-align: center;
  height: 20px;
  width: 40%;
}

.strumenticaselle {
  text-align: center;
}

.strumenticaselle p {
   font-size: 1.2em;
   display: inline-table;
}


/*-----Footer-----*/


#footer {
   background-color: #c70e0e;
   border-radius: 3px;
   border: double 8px #141212;
   margin-top: 25px;
   margin-bottom: 25px;
   padding-top: 5px;    
}

#footer p {
   color: #fff;
   text-align: center;
   font-size: 1.2em;
}  


/*-------------------------------Responsive----------------------------------*/


/*------Menu'-----*/

@media screen and (max-width: 500px) {

#logosito {
     width: 80%;
}

#logosito2 {
     width: 60%;
}  
    
.barra {
     display: none;
}  
  
    
#navbar ul { 
     height: 12%;
     width: 10%;
     transition: width 0.3s;
}
    
#navbar ul li {
      width: 100%;
      display: block;
      background-color: #fff;
      margin-bottom: 15%;
}
    

    
#navbar ul li a { 
      font-size: 0;
      text-align: left;
      transition: font 0.3s; 
      display: block;
      height: 0;
      margin: 1%;

}
    
#navbar ul:hover {
       width: 90%;
       border: none;                   
}
    
#navbar ul:hover li {
       margin-bottom: 3%;
       background-color: transparent;
}
        
#navbar ul:hover li a {
       font-size: 1.4em;
       height: inherit;
       margin: 2px;
}

    
/*------Home-----*/
    
#testopresentazione p, #vieniatrovarci {
      text-align: center;
      padding-left: 5%;
      padding-right: 5%;  
}  


#slider {
     display: block;
     margin-left: auto;
     margin-right: auto;
} 

#slider figure { 
     width: 425%;  
}     
    

#immaginenota img {
     width: 10%;
     display: block;
     margin-left: auto;
     margin-right: auto; 
} 

    
 #mappa, #calendario {
    display: block;
}
    
#maps {
    width: 18em;
    height: 20em;
    margin-left: 25%;
    margin-bottom: 12%;
}
    
#calendar {
    width: 18em;
    height: 20em;
    margin-left: 25%
} 


#quotetext1 {
     width: 92%;
     margin-left: auto;
     margin-right: auto;
}
 

/*------Chi siamo-----*/

#fotochitarre img {    
     width: 92%;
     display: block;
     margin-left: 2%;
}
    
    
#titlebio {
     text-align: center;
     margin-top: 80%;
}    

#barra1 {
     display: none;
} 


#paragbio {
     text-align: center;
     padding-left: 5%;
     padding-right: 5%;
}
    
 #paragbio2 {   
     text-align: center;
     padding-left: 5%;
     padding-right: 5%;
}

    
#immaginenota2 img {
    width: 9%;
    display: block;
    margin-left: 50%;
}


#quotetext2 {
     width: 92%;
     margin-left: auto;
     margin-right: auto;
}

    
#fotobassi img {
     width: 92%;
     display: block;
     margin-right: 2%; 
     margin-top: 25%;
}  
    

#titlebio2 {
    margin-top: 110%;
    text-align: center;
}

#barra2 {  
    display: none;
}


#paragbio3 { 
    text-align: center;
    padding-left: 5%;
    padding-right: 5%;
}
    
#paragbio4 { 
    text-align: center;
    padding-left: 5%;
    padding-right: 5%;
}


#immaginenota3 img {
    width: 9%;
    display: block;
    margin-left: 30%;    
}
  
    
#testovantaggi {  
     text-align: left; 
     padding-left: 5%;
     padding-right: 5%;
}
    

/*------Prodotti-----*/
    
#parprodotti {  
      text-align: center;
      padding-left: 5%;
      padding-right: 5%;    
}
    
#titoloprodotti { 
      margin-top: 15%;    
}
    
#chitarra, #custodia, #piatto, #mixer {
      display: block;
      width: 100%;
      margin: 8% auto;
}      
 

#pardisponibilita {  
      text-align: center;
      padding-left: 5%;
      padding-right: 5%;    
}
    
    
/*-----Grafico-----*/
    
#chartcontainer {
      position: static;
      overflow: auto;
      margin-left:auto;
      margin-right: auto;
      width: 95%;
}
    
#chart {
      position: absolute;
      width: 70%;
      height: 90%;
}
    

/*------Contatti-----*/

#parsocial2 {
      text-align: center;
      padding-left: 5%;
      padding-right: 5%; 
}

.parsocial img {   
      width: 6%;
} 
    

#immaginenota4 img {
      width: 7%;
}   
    
    
table {
      width: 25em;
      margin: 7%;
}
 

#formp {
     text-align: center;
     padding-left: 5%;
     padding-right: 5%; 
}
        
form {
     width: 25em;
     margin: 5%;
}
    
}