.vino {
  margin: 0 auto; /*padding: 15px;	*/  
  list-style: none;
/*  counter-reset: li;
  background: #eee;
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.1) inset;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.1) inset;
  box-shadow: 0 1px 2px rgba(0,0,0,.1) inset;*/
  /*-moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;*/
}

.marsala{
  width: 874px;
  }
  
  .liquorosi{
  width: 384px;
  }
  
.vinitavola{
  width: 258px;
  }
  
  .aromatizzati{
  width: 940px;
  }
  
  .vinimessa{
  width: 212px;
  }
  
li.cat {
margin-right: 40px;
}


.vino:before,
.vino:after {
  content: "";
  display: table;
}

.vino:after {
  clear: both;
}

.vino {
  zoom:1;
}

/* -------------------------------- */        

/*.vino li {
  position: relative;
  float: left;
  cursor: pointer;
  height: 300px; width: 10%;
  margin: 0 10px 10px 0;
  color: #fff;
} */
.vino li {
/*min-height: 200px;*/
float: left;
color: #fff;
position: relative;
width: 86px;
}

.vino li:hover, .vino li:focus{
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.2)), to(rgba(255,255,255,0)));
  background-image: -webkit-linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0));
  background-image: -moz-linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0));
  background-image: -ms-linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0));
  background-image: -o-linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0));
  background-image: linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0));
}

.vino .cover{
  z-index: 3;
}

.vino .cover:focus{
  outline: 0;
}

/* -------------------------------- */

.vino li{
/*content: counter(li);
  counter-increment: li;*/
  
}      
.vino li span.nome{
  font: italic bold 10px serif, georgia;
/*  position: absolute;*/
  color: rgba(255,255,255,.1);
     filter:alpha(opacity=0);
-moz-opacity: 0;
  opacity: 0;
  -webkit-transition: all .2s ease-out;
  -moz-transition: all .2s ease-out;
  -ms-transition: all .2s ease-out; 
  -o-transition: all .2s ease-out;  
  transition: all .2s ease-out; 
}

.vino li:hover span.nome, .vino li:focus span.nome,{
 /* font-size: 100px;*/
 filter:alpha(opacity=100);
-moz-opacity: 1;
  opacity: 1; 
}

.vino li:hover span.nome, .vino li:focus span.nome{

   z-index: 999;
}

.vino .cover::after{
/*  z-index: -1;*/
}

/* -------------------------------- */       

.vino li:nth-child(1),
.vino li:nth-child(2),
.vino li:nth-child(3){
 /* margin-top: 0;*/
}

.vino li:nth-child(1){
  margin-left: 0;      
}

/* -------------------------------- */       

.vino li:nth-child(1),
.vino li:nth-child(1) .content,
.vino li:nth-child(1) .close{

}         

.vino li:nth-child(2),
.vino li:nth-child(2) .content,
.vino li:nth-child(2) .close{
  
}   

.vino li:nth-child(3),
.vino li:nth-child(3) .content,
.vino li:nth-child(3) .close{
   
}

.vino li:nth-child(4),
.vino li:nth-child(4) .content,
.vino li:nth-child(4) .close{
    
}

.vino li:nth-child(5),
.vino li:nth-child(5) .content,
.vino li:nth-child(5) .close{

}

.vino li:nth-child(6),
.vino li:nth-child(6) .content,
.vino li:nth-child(6) .close{

}

.vino li:nth-child(7),
.vino li:nth-child(7) .content,
.vino li:nth-child(7) .close{
    
}

.vino li:nth-child(8),
.vino li:nth-child(8) .content,
.vino li:nth-child(8) .close{

}

.vino li:nth-child(9),
.vino li:nth-child(9) .content,
.vino li:nth-child(9) .close{

}

/* -------------------------------- */

.vino .content{
  opacity: 0; display: none\9;
  overflow: hidden;
  font: 12px Arial, Helvetica;
  position: absolute;
  height: 300px; width: 10%; /* Ideally: height: 100%; width: 100%; but works at it should just in FF */
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out; 
  -o-transition: all .3s ease-out;  
  transition: all .3s ease-out;      
}  

.vino .expanded{
  opacity: .95; display: block\9;
  overflow: visible;
  padding: 40px;
  height: 300px; width: 83%; /* Cover the entire area */
}

.vino li:nth-child(3n) .content{ /* 3,6,9 */
  /*right: 0;*/
}

.vino li:nth-child(3n-1) .expanded{ /* 2,5,8 */
  /*left: 50%;
  margin-left: -310px;*/
}


.vino li:nth-child(1) .content,
.vino li:nth-child(2) .content,
.vino li:nth-child(3) .content,
.vino li:nth-child(4) .content,
.vino li:nth-child(5) .content,
.vino li:nth-child(6) .content,
.vino li:nth-child(7) .content,
.vino li:nth-child(8) .content,
.vino li:nth-child(9) .content{
  float: left;
    left: 5%;
    position: fixed;
    top: 40%;
}                      

.vino li:nth-child(4) .expanded, /* 4,5,6 */
.vino li:nth-child(5) .expanded,
.vino li:nth-child(6) .expanded{
  /*margin-top: -190px;
  top: 50%;*/
} 

/* -------------------------------- */    

.vino .title{
  position: absolute;
  height: 100%; width: 100%;
  text-align: center;
  font: italic bold 1em/120px 'trebuchet MS', Arial, helvetica;
  opacity: .2;
}

.vino li:hover .title{
  opacity: .7;
}    

/* -------------------------------- */

.vino .close {
  display: none;
  border: 5px solid #fff;
  color: #fff;
  cursor: pointer;
  height: 40px; width: 40px;
  font: bold 20px/40px arial, helvetica;
  position: absolute;
  text-align: center;
  top: -20px; right: -20px;
  -moz-border-radius: 40px;
  -webkit-border-radius: 40px;
  border-radius: 40px;      
}

.vino .cover .close{
  display: block;
}


/* -------------------------------- */
.scheda {
  width: 60%;
  min-width: 500px;
  margin: 0 auto; padding: 15px;	
}
.vino_desc {
  width: 40%;
  float: left;
position: relative;
padding-right:3%;
}
.vino_btg {
  width: 14%;
  float: left;
position: relative;
}
.vino_scheda {
  width: 40%;
  float: left;
position: relative;
text-align:left;
padding-left:3%;
}
.en, .fr {
font-style:italic;
}
.vino_desc p {
text-align:right;
margin-top:20px;
}
.vino_scheda p {
text-align:left;
}
.vino_nome {
font-size:20px;
color:#C09100;
margin-bottom: 20px;
font-weight: normal;
}
.parametro {
font-weight:bold;
}

.inizio {
margin-top:10px;
}
.pdfdx a {
background: url("../images/pdf.gif") no-repeat scroll right center transparent;
height: 30px;
padding-bottom: 5px;
padding-right: 25px;
margin-bottom:8px;
}

.pdfsx a {
background: url("../images/pdf.gif") no-repeat scroll left center transparent;
height: 30px;
padding-bottom: 5px;
padding-left: 25px;
margin-bottom:8px;
}