html { 
  background: url(sfondo/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


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


p  {
    color: black;
    font-family: Verdana; 
    font-size: 55%;
    text-align: center;
    font-weight: normal;
    text-align: justify;
}

h1 {
    font-family: Verdana; 
    font-size: 14px;
    font-weight: normal
}


h2 {
    color: black;
    font-family: Verdana; 
    font-size: 8px;
    font-weight: normal
}


h3 {
    font-family: Verdana; 
    font-size: 11px;
    font-weight: normal
}

h4 {
    font-family: Verdana; 
    font-size: 9px;
    font-weight: normal
}


}


@media screen and (min-width: 801px) and (max-width: 1366px) {


p  {
    color: black;
    font-family: Verdana; 
    font-size: 70%;
    text-align: center;
    font-weight: normal;
    text-align: justify;
    margin-bottom: 0px;
    margin-top: 2px;
}

h1 {
    font-family: Verdana; 
    font-size: 20px;
    font-weight: normal
}

h2 {
    color: black;
    font-family: Verdana; 
    font-size: 10px;
    font-weight: normal
}

h3 {
    font-family: Verdana; 
    font-size: 15px;
    font-weight: normal
}

h4 {
    font-family: Verdana; 
    font-size: 13px;
    font-weight: normal
}

h5 {
    font-family: Verdana; 
    font-size: 10px;
    font-weight: normal
}

h6 {
    margin-top: 2px;
    color: black;
    font-family: Verdana; 
    font-size: 9px;
    font-weight: normal
    
}

}

@media screen and (min-width: 1367px) {


p  {
    color: black;
    font-family: Verdana; 
    font-size: 87.5%;
    text-align: center;
    font-weight: normal;
    line-height: 25px;
    text-align: justify;
    display: table-cell;
    vertical-align: middle;
}

h1 {
    font-family: Verdana; 
    font-size: 25px;
    font-weight: normal
}


h2 {
    color: black;
    font-family: Verdana; 
    font-size: 11px;
    font-weight: normal
}


h3 {
    font-family: Verdana; 
    font-size: 20px;
    font-weight: normal
}

h4 {
    font-family: Verdana; 
    font-size: 16px;
    font-weight: normal
}

h5 {
    font-family: Verdana; 
    font-size: 12px;
    font-weight: normal
}

h6 {
    color: black;
    font-family: Verdana; 
    font-size: 11px;
    font-weight: normal
}

}

@media screen and (min-width: 1920px) {


p  {
    color: black;
    font-family: Verdana; 
    font-size: 87.5%;
    text-align: center;
    font-weight: normal;
    line-height: 25px;
    text-align: justify;
    display: table-cell;
    vertical-align: middle;
}

h1 {
    font-family: Verdana; 
    font-size: 27px;
    font-weight: normal
}


h2 {
    color: black;
    font-family: Verdana; 
    font-size: 12px;
    font-weight: normal
}

h3 {
    font-family: Verdana; 
    font-size: 22px;
    font-weight: normal
}

h4 {
    font-family: Verdana; 
    font-size: 18px;
    font-weight: normal
}

}


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

    a:hover {
      text-decoration: underline;
    }


     #logo{
          width:10%;
          height:15%;
	  position: absolute;
	  top: 6%;
	  left: 15%;

      }

     #saluto{
          width:50%;
          height:3%;
	  position: absolute;
	  top: 1.5%;
	  right: 3%;

      }


     #footer {

          width: 98%;
          height: 3%;
          position: absolute;
          bottom: 2.5%;
          left: 1%;
      }



     #menu{
          width:45%;
          height:4.7%;
	  position: absolute;
	  top: 15%;
	  left: 27%;
          border-radius: 10px;
          background-color: #FFFFFF;
          opacity:1;
      }

     #menu2{
          width:45.3%;
          height:5.2%;
	  position: absolute;
	  top: 15%;
	  left: 27%;
          border-radius: 10px;
          background-color: #C0C0C0;
          opacity:1;
      }

    #sceltaprodotti{
          width:10%;
          height:0%;
	  position: absolute;
	  top: 17%;
	  left: 40%;
          border-radius: 10px;
          background-color: #F0F0F0;  
          opacity:1;

          transition-property: width, height, top, opacity, right;
          transition-duration: 1s;
 
          -webkit-transition-property: width, height, opacity, top, right;
          -webkit-transition-duration: 1s;
         
          -o-transition-property: width, height, top, opacity, right;
          -o-transition-duration: 1s;
         
          -moz-transition-property: width, height, top, opacity, right;
          -moz-transition-duration: 1s;

      }

     #sceltaprodotti2{
          width:10%;
          height:0%;
	  position: absolute;
	  top: 17%;
	  left: 40%;
          border-radius: 10px;
          background-color: #C0C0C0;
          opacity:1;
          transition-property: width, height, top, opacity, right;
          transition-duration: 1s;
 
          -webkit-transition-property: width, height, opacity, top, right;
          -webkit-transition-duration: 1s;
         
          -o-transition-property: width, height, top, opacity, right;
          -o-transition-duration: 1s;
         
          -moz-transition-property: width, height, top, opacity, right;
          -moz-transition-duration: 1s;
      }

     #sceltap1{
          width:100%;
          height:14%;
	  position: absolute;
	  top: 14%;
	  left: 0%;
          font-family: Verdana; 
          font-size: 11px;
          text-align: center;
          cursor: pointer;
      }

     #sceltap2{
          width:100%;
          height:14%;
	  position: absolute;
	  top: 29%;
	  left: 0%;
          font-family: Verdana; 
          font-size: 11px;
          text-align: center;
          cursor: pointer;
      }

     #sceltap3{
          width:100%;
          height:14%;
	  position: absolute;
	  top: 44%;
	  left: 0%;
          font-family: Verdana; 
          font-size: 11px;
          text-align: center;
          cursor: pointer;
      }

     #sceltap4{
          width:100%;
          height:14%;
	  position: absolute;
	  top: 59%;
	  left: 0%;
          font-family: Verdana; 
          font-size: 11px;
          text-align: center;
          cursor: pointer;
      }

     #sceltap5{
          width:100%;
          height:14%;
	  position: absolute;
	  top: 74%;
	  left: 0%;
          font-family: Verdana; 
          font-size: 11px;
          text-align: center;
          cursor: pointer;
      }

     #sceltap6{
          width:100%;
          height:15%;
	  position: absolute;
	  top: 89%;
	  left: 0%;
          font-family: Verdana; 
          font-size: 11px;
          text-align: center;
          cursor: pointer;
      }

     #angolo{
          width:5%;
          height:10%;
	  position: absolute;
	  top: 17.2%;
	  right: 9.8%;
     }

     #home{
          width:2%;
          height:4.5%;
	  position: absolute;
	  top: 17.6%;
	  right: 10.3%;
          cursor: pointer;
     }

     #prodotti{
          width:80%;
          height:67.5%;
	  position: absolute;
	  top: 20%;
	  left: 10%;
          overflow: hidden;

      }

     #separatore{
          width:0.3%;
          height:100%;
	  position: absolute;
	  top: 0%;
	  left: 50%;
          background-color: #C0C0C0;
          opacity:0.5;
      }

     #prodotti1{
          width:48%;
          height:32%;
	  position: absolute;
	  top: -40%;
	  left: 1%;
          transition-property: top;
          transition-duration: 1s;
 
          -webkit-transition-property: top;
          -webkit-transition-duration: 1s;
         
          -o-transition-property: top;
          -o-transition-duration: 1s;
         
          -moz-transition-property: top;
          -moz-transition-duration: 1s;

      }

     #prodotti2{
          width:48%;
          height:32%;
	  position: absolute;
          top: -40%;
	  left: 1%;

          -webkit-transition-property: top;
          -webkit-transition-duration: 1s;
         
          -o-transition-property: top;
          -o-transition-duration: 1s;
         
          -moz-transition-property: top;
          -moz-transition-duration: 1s;

      }


     #prodotti3{
          width:48%;
          height:32%;
	  position: absolute;
          top: -40%;
	  left: 1%;

          -webkit-transition-property: top;
          -webkit-transition-duration: 1s;
         
          -o-transition-property: top;
          -o-transition-duration: 1s;
         
          -moz-transition-property: top;
          -moz-transition-duration: 1s;



      }

     #prodotti4{
          width:48%;
          height:32%;
	  position: absolute;
	  top: -40%;
	  right: 1%;
          transition-property: top;
          transition-duration: 1s;
 
          -webkit-transition-property: top;
          -webkit-transition-duration: 1s;
         
          -o-transition-property: top;
          -o-transition-duration: 1s;
         
          -moz-transition-property: top;
          -moz-transition-duration: 1s;

      }

     #prodotti5{
          width:48%;
          height:32%;
	  position: absolute;
          top: -40%;
	  right: 1%;

          -webkit-transition-property: top;
          -webkit-transition-duration: 1s;
         
          -o-transition-property: top;
          -o-transition-duration: 1s;
         
          -moz-transition-property: top;
          -moz-transition-duration: 1s;

      }


     #prodotti6{
          width:48%;
          height:32%;
	  position: absolute;
          top: -40%;
	  right: 1%;

          -webkit-transition-property: top;
          -webkit-transition-duration: 1s;
         
          -o-transition-property: top;
          -o-transition-duration: 1s;
         
          -moz-transition-property: top;
          -moz-transition-duration: 1s;



      }



     #riquadro{
          width:80%;
          height:70%;
	  position: absolute;
	  top: 17.5%;
	  left: 10%;
          border-radius: 10px;
          background-color: #FFFFFF;
          opacity:0.6;
      }

     #riquadro2{
          width:80.3%;
          height:70%;
	  position: absolute;
	  top: 17.5%;
	  left: 10%;
          border-radius: 10px;
          background-color: #C0C0C0;
          opacity:0.3;
      }

     #riquadro3{
          width:80%;
          height:67.5%;
	  position: absolute;
	  top: 20%;
	  left: 10%;
          overflow: hidden;
      }

     #ombra{
          width:78%;
          height:12%;
	  position: absolute;
	  top: 85.5%;
	  left: 11%;
      }


     #sfondosuperiore{
          width:100%;
          height:5%;
	  position: absolute;
	  top: 0px;
	  left: 0px;
          background-color: #FFFFFF;
          opacity:0.7;
      }

     #sfondosuperiore2{
          width:100%;
          height:5.3%;
	  position: absolute;
	  top: 0px;
	  left: 0px;
          background-color: #C0C0C0;
          opacity:0.8;
      }

     #sfondoinferiore{
          width:100%;
          height:5%;
	  position: absolute;
	  bottom: 0px;
	  left: 0px;
          background-color: #FFFFFF;
          opacity:0.5;
      }

     #sfondoinferiore2{
          width:100%;
          height:5.3%;
	  position: absolute;
	  bottom: 0px;
	  left: 0px;
          background-color: #C0C0C0;
          opacity:0.8;
      }


     #sfondo {
          width:100%;
          height: 100%;
	  position: absolute;
	  bottom: 0px;
	  left: 0px;
          background-color: #FFFFFF;
          opacity:0.5;
      }
  
     #scelta1{
          width:9%;
          height:4.7%;
	  position: absolute;
	  top: 15%;
	  left: 30.5%;
          background-color: #C0C0C0;
          opacity:0;
      }

     #scelta2{
          width:9%;
          height:4.7%;
	  position: absolute;
	  top: 15%;
	  left: 40.5%;
          background-color: #C0C0C0;
          opacity:0.5;
      }

     #scelta3{
          width:9%;
          height:4.7%;
	  position: absolute;
	  top: 15%;
	  left: 50.5%;
          background-color: #C0C0C0;
          opacity:0;
      }

     #scelta4{
          width:9%;
          height:4.7%;
	  position: absolute;
	  top: 15%;
	  left: 60.5%;
          background-color: #C0C0C0;
          opacity:0;
      }

 
     #scelta10{
          width:9%;
          height:4.7%;
	  position: absolute;
	  top: 16%;
	  left: 30.5%;
          font-family: Verdana; 
          font-size: 12px;
          text-align: center;
          font-weight: normal;
          cursor:pointer;

       }

     #scelta20{
          width:9%;
          height:4.7%;
	  position: absolute;
	  top: 16%;
	  left: 40.5%;
          font-family: Verdana; 
          font-size: 12px;
          text-align: center;
          font-weight: normal;
          cursor:pointer;
      }


     #scelta30{
          width:9%;
          height:4.7%;
	  position: absolute;
	  top: 16%;
	  left: 50.5%;
          font-family: Verdana; 
          font-size: 12px;
          text-align: center;
          font-weight: normal;
          cursor:pointer;
      }


     #scelta40{
          width:9%;
          height:4.7%;
	  position: absolute;
	  top: 16%;
	  left: 60.5%;
          font-family: Verdana; 
          font-size: 12px;
          text-align: center;
          font-weight: normal;
          cursor:pointer;
      }


      #immagine{
          width:30%;
          height:80%;
	  position: absolute;
	  top: 10%;
	  left: -30%;
          opacity:0;
          cursor:pointer;
          transition-property: top, opacity, left;
          transition-duration: 1s;
 
          -webkit-transition-property: top, opacity, left;
          -webkit-transition-duration: 1s;
         
          -o-transition-property: top, opacity, left;
          -o-transition-duration: 1s;
         
          -moz-transition-property: top, opacity, left;
          -moz-transition-duration: 1s;
      }

     #descrizione{
          width:40%;
          height:80%;
	  position: absolute;
	  top: 10%;
	  right: -40%;
          opacity:0;
          transition-property: opacity, right;
          transition-duration: 1s;
 
          -webkit-transition-property: opacity, right;
          -webkit-transition-duration: 1s;
         
          -o-transition-property: opacity, right;
          -o-transition-duration: 1s;
         
          -moz-transition-property: opacity, right;
          -moz-transition-duration: 1s;
      }

     #testo1{
          width:100%;
          height:90%;
	  position: absolute;
	  top: 5%;
	  right: 0%;
          color: #000000;

      }

     #testo2{
          width:100%;
          height:90%;
	  position: absolute;
	  top: 5%;
	  right: 0.2%;
          color: #FFFFFF;

      }