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;
}

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
}


}

@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
}



}

@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;
     }


     #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;
      }

     #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;
      }

     #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.5;
      }

 
     #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;
      }

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

    #container{

          width:70%;
          height:67%;
	  position: absolute;
	  top: 22%;
	  left: 15%;
          font-size: 0.7em;
          opacity: 0;
          overflow: auto;
          -webkit-transition-property: opacity;
          -webkit-transition-duration: 1s;
         
          -o-transition-property: opacity;
          -o-transition-duration: 1s;
         
          -moz-transition-property: opacity;
          -moz-transition-duration: 1s;

      
      }



     .required {color: #F67E8F;}


     #formILC {margin:1em auto;width: 300px;}


     #formILC label{display:block; font-family: Verdana; font-size: 60%;}

     
     input, textarea, select{display:block; border: 1px solid #ccc; padding: 2px; font-size: 10px; border-radius: 3px; }


     input.error, textarea.error {border: 2px solid #F67E8F;}


     p.error{background-color: #F67E8F;border:2px solid #F00;color:#660D1E;font-size:90%;margin:1em auto;padding:1em 1em;width:25%;}


     p.validate{background-color: #7EF68F;border:2px solid #0F0;color:#0D661E;font-size:90%;margin:1em auto;padding:1em 1em;width: 100%;}



     }

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

    #container{

          width:70%;
          height:67%;
	  position: absolute;
	  top: 22%;
	  left: 15%;
          font-size: 0.7em;
          opacity: 0;
          overflow: auto;
          -webkit-transition-property: opacity;
          -webkit-transition-duration: 1s;
         
          -o-transition-property: opacity;
          -o-transition-duration: 1s;
         
          -moz-transition-property: opacity;
          -moz-transition-duration: 1s;

      
      }



     .required {color: #F67E8F;}


     #formILC {margin:2em auto;width: 300px;}


     #formILC label{display:block; font-family: Verdana; font-size:75%;}

     
     input, textarea, select{display:block; border: 1px solid #ccc; padding: 2px; font-size: 12px; border-radius: 3px; }


     input.error, textarea.error {border: 2px solid #F67E8F;}


     p.error{background-color: #F67E8F;border:2px solid #F00;color:#660D1E;font-size:105%;margin:2em auto;padding:1em 3em;width:25%;}


     p.validate{background-color: #7EF68F;border:2px solid #0F0;color:#0D661E;font-size:105%;margin:2em auto;padding:1em 3em;width: 100%;}



     }



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


     #container{

          width:70%;
          height:60%;
	  position: absolute;
	  top: 25%;
	  left: 15%;
          font-size: 0.8em;
          opacity: 0;
          overflow: auto;
          -webkit-transition-property: opacity;
          -webkit-transition-duration: 1s;
         
          -o-transition-property: opacity;
          -o-transition-duration: 1s;
         
          -moz-transition-property: opacity;
          -moz-transition-duration: 1s;

      
      }



     .required {color: #F67E8F;}


     #formILC {margin:3em auto;width: 300px;}


     #formILC label{display:block; font-family: Verdana; font-size:90%;}

     
     input, textarea, select{display:block; border: 1px solid #ccc; padding: 2px; font-size: 14px; border-radius: 3px; }


     input.error, textarea.error {border: 2px solid #F67E8F;}


     p.error{background-color: #F67E8F;border:2px solid #F00;color:#660D1E;font-size:105%;margin:3em auto;padding:1em 4em;width:25%;}


     p.validate{background-color: #7EF68F;border:2px solid #0F0;color:#0D661E;font-size:105%;margin:3em auto;padding:1em 4em;width: 100%;}

     }