@CHARSET "UTF-8";

 #main .container {
    min-height:631px;
    background:transparent url(../img/BG-et-leurs-vins.jpg) no-repeat left top;
    background-size:contain;
}

#main .container ul li {
    min-height:620px;
    width:200px;
    display:block;
    float:none;
    display:inline-block;
    vertical-align:top;
    max-width:160px;
    margin:10px 20px;
	cursor:pointer;
    position:relative;
}

#main .container ul li a,
#main .container ul li a:hover {
    text-decoration:none;
    border:0px;
}

#main .container h2 {
    color:white;
    font-size:24px;
    margin:50px auto 0px auto;
    text-transform:uppercase;
    display:block;
    text-align:center;
    text-decoration:none;
    cursor:pointer;
    padding:0px 20px 0px 20px;
}

#main .container .khaki h2  { font-size:24px; padding-left:10px; }

#main .container ul li.green {
    background:transparent url(../img/BG-bottle-green.png);
}

#main .container ul li.red {
    background:transparent url(../img/BG-bottle-red.png);
}

#main .container ul li.orange {
    background:transparent url(../img/BG-bottle-orange.png);
}

#main .container ul li.khaki {
    background:transparent url(../img/BG-bottle-khaki.png);
}

#main .container ul li.gray {
    background:transparent url(../img/BG-bottle-gray.png);
}

#main .container ul li a figure { 
    max-width:160px; margin:0px auto;
    position:absolute;
    bottom:0px;
    left:0px;
    right:0px;
    z-index:3;
}

#main .container ul li a figure img {
    display:block;
    position:relative;
    bottom:-10px;
    margin:0px auto 0px auto;
    max-height:350px;
    padding:0px;
    border:0px;
}

#main .container ul li a figure figcaption {
    padding:20px 20px 0px 20px;
    display:block;
    min-height:80px;
    color:white;
    text-decoration:none;
    text-align:center;
    font-size:18px;
    text-transform:uppercase;
    
}

li.green a figure figcaption {
     background:transparent url(../img/BG-bottle-label-green.png);
}

li.red a figure figcaption {
     background:transparent url(../img/BG-bottle-label-red.png);
}

li.khaki a figure figcaption {
     background:transparent url(../img/BG-bottle-label-khaki.png);
}

li.orange a figure figcaption {
     background:transparent url(../img/BG-bottle-label-orange.png);
}

li.gray a figure figcaption {
     background:transparent url(../img/BG-bottle-label-gray.png);
}

@media (max-width:1200px) {
    #main .container ul {
    }
    #main .container ul li {
        margin-left:5px;
        margin-right:5px;
    }
}

@media (max-width:980px) {
    #main .container ul {
        width:85%;
        margin-left:auto;
        margin-right:auto;
    }
    #main .container ul li {
        margin-left:5px;
        margin-right:5px;
    }
}

@media (max-width:765px) {
    #main .container ul {
        width:100%;
    }    
}

@media (max-width:465px) {
    #main .container ul {
        width:100%;
        padding:0px;
    }    
}