:root{
    --couleur-rose : #EC3B6E;
}

html, body {
	margin:0;
	padding:0;
	background-color:#FFF;
	font-family: 'Poppins', sans-serif; 
        font-weight: 400; 
        font-size:13px;
	color:#333333;
        
        /* background: #676767 url(../images/bg.jpg) no-repeat top center;  */
        
        /*
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        */           
	/*
        background: url(../images/bg.jpg) no-repeat top center; 
        background-image:url(../images/bg_sodles.jpg);
        background-repeat:repeat;
        */
	/* */
        /* background-attachment: fixed; */
}
ol, ul {
	list-style: none;
}

h1, h2, h3, h4, h5, h6 {margin: .5em 0 .2em 0;font-weight: 400; font-style: normal; padding:0;} 
h1 {font-family: 'Open Sans', sans-serif; font-weight: 400;font-size:36px;color:#323232;line-height:110%;} 
h2 {font-family: 'Open Sans', sans-serif; font-weight: 400;font-size:24px;color:#EC3B6E;} 
h3 {font-family: 'Open Sans', sans-serif; font-weight: 400;font-size:17px;color:#323232;} 
h4 {font-size: 1em; font-family: 'Open Sans', sans-serif;font-weight: 600; } 
h5 {font-size: 1em; font-family: 'Open Sans', sans-serif;font-weight: 600; color:#323232; } 

.Erreur { border: 2px solid #FF0000; background-color: #FFF; color:#FF0000; font-size: 12px; font-weight: bold; padding:10px;}
.Erreur i {float:left; color:#FF0000; margin: 0px 10px; font-size:2.5em;}



/* index  */
#HomeIntroSite {position: relative; z-index: 2; min-height: 100vh; height: auto; background-image: url('../assets/base/img/bgHomeIntroSite_2000x1100.jpg'); background-size: cover;}
#HomeIntroSite .topHeader {position:relative; padding-top: 10px;  background-color: #323333; top: 0; height: auto; min-height: 60px; color:#FFF; font-weight: 400;}                
#HomeIntroSite h1 { margin:0; padding: 0; font-size: 1.2em; color:#FFF; font-weight: 400;}
#HomeIntroSite .form-group { padding-bottom: 8px; margin-bottom:0px;}

#SHome .HeaderHomePage {display: flex; flex-direction: row; justify-content: center; align-items: center; width:100%; height: calc(100vh / 1.8);}
#SHome .HeaderHomePage div.logo {width:400px; position: relative; top: -55px;}
#SHome .HeaderHomePage div.logo img {width:100%;}
#SHome .HeaderHomePage div.element {display: flex; flex-direction: row; justify-content: center; align-items: center;}

#SHome .CTA_Home {display: flex; flex-direction: column; justify-content: center; align-items: center; width:100%}
#SHome .CTA_Home .BtnAction {display: flex; flex-direction: row; justify-content: space-around; align-items: center; width:50%}
#SHome .CTA_Home .BtnAction div {width:80%; margin-bottom: 15px;}
#SHome .CTA_Home .BtnAction a { width:80%}
#SHome .CTA_Home .BtnAction a:hover { background-color: #000; color:#FFF;}
    
.footer{
    background-color: #323333;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,0.4);
    height: auto;
    left: 0;
    position: fixed;
    width: 100%;
    z-index: 100000;

    
}
.footer .content {color: #FFF; font-size: 0.8rem; text-align: center; padding: 15px;}
.footer .content hr { margin: 2px!important;}
.footer .copyright {padding: 10px; color: #FFF; font-size: 0.8rem!important; text-align: center;}
.footer .copyright a {color: #FFF;}
.footer .copyright a:hover {font-weight: 500;}
@media screen  and (max-width : 680px) {
    #HomeIntroSite .topHeader { padding: 15px;}
    #SHome .HeaderHomePage {flex-direction: column; width: 100%; margin-top: 25px; height: auto; }
    #SHome .HeaderHomePage div.logo  { top: 5px;}
     #SHome .CTA_Home .BtnAction {display: flex; flex-direction: column; width: 100%; justify-content: center; align-items: center;}
    #SHome .CTA_Home .BtnAction div {width:auto; margin-bottom: 15px; }
    #SHome .CTA_Home .BtnAction a {width:auto; }
    
  }
@media screen  and (max-width : 480px) {
    #HomeIntroSite .topHeader { padding: 15px;}
    #SHome .HeaderHomePage {flex-direction: column; width: 100%; margin-top: 50px; }
    #SHome .HeaderHomePage div.logo {width:100%; padding: 20px 15px;}
    #SHome .HeaderHomePage div.element {width:100%; display: flex; flex-direction: row; justify-content: space-around; align-items: center;}
    #SHome .CTA_Home .BtnAction {display: flex; flex-direction: column; width: 100%}
    #SHome .CTA_Home .BtnAction div {width:100%; margin-bottom: 15px;}
    #SHome .CTA_Home .BtnAction a { width:100%}
    .footer {position: relative!important; padding: 15px;}
    .footer .content {color: #FFF; font-size: 0.8rem!important; text-align: center;}
    .footer .copyright {padding: 10px; color: #FFF; font-size: 0.8rem!important; text-align: center;}
    .footer .copyright a {color: #FFF;}
    .footer .copyright a:hover {font-weight: 500;}
    
}

                .cboth { clear: both}

#particles{
    position:absolute;
    top:48px;
    left:155px;
    z-index:1;
    cursor:pointer;
}
						
#particles_hover{
    position:absolute;
    top:210px;
    left:0;
    width:190px;
    height:100px;
    z-index:1;
    overflow:hidden;
    display:none;
}

                
#Home .topHeader {position:relative; padding-top: 10px;  background-color: #323333; top: 0; height: auto; min-height: 60px; color:#FFF; font-family: 'Open Sans', sans-serif; font-weight: 400;}                

.footerOLD {position:absolute; bottom: 0; background-color: #323333; height: 30px; width: 100%; z-index: 2}                

.footer{
    background-color: #323333;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,0.4);
    height: auto;
    left: 0;
    position: fixed;
    width: 100%;
    z-index: 100000;
    
}
#footer { color:#FFF;}
#footer ul { padding: 0; margin:0; list-style-type: none}
#footer ul li { display:block; width: 100%; height: auto;color:#FFF; font-family: Arial; font-size:11px; margin: 0; padding: 2px 0px}
#footer ul li a {color:#FFF; text-align: left; text-transform: none}
#footer .copyright { font-family: Arial; font-size:11px; text-align: center; color:#FFF}
#footer .copyright a { color:#FFF; text-decoration: none}
#Home  #logo { position:relative; top:0px; left: 10%;}

#logSystem { position:absolute; width: 530px; height: 200px; right:10%}
#LogMembres { float:left; width: 49%; text-align: left; border-right: 1px solid #FFF; padding: 0 8px 0 0}
#FormCreation { float: right; width: 49%; text-align: left; padding: 0 0px 0 8px}

#FormCreation p, #LogMembres p { font-size:11px;}

#Home h2  {font-family: 'Archivo Narrow', sans-serif; font-size:1.8em; font-weight:400}
.rose { color:#ed3c6e}
.btn-rose { background-color:#ed3c6e; color:#FFF }
.vert { color:#9ac048}
.btn-vert { background-color:#9ac048; color:#000 }
.btn-jaune, .btn-commande {
    -webkit-transition: all .2s ease-in;
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    transition: all .2s ease-in; 
    
    background-color: #ffd800;
    color: #000;
    font-family: 'Archivo Narrow', sans-serif; 
    font-weight:400;
    font-size: 1.5em;
    margin: 5px 0;
    text-transform: uppercase;
    width: 100%; 
}



.btn-jaune:hover, .btn-commande:hover { 
    background-color: #ED3C6E;
    color: #FFF;
}
.btn-noir, a.btn-noir { background-color: #323333; color:#FFF; -webkit-transition: all .2s ease-in;
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    transition: all .2s ease-in; 
    width:100%;
    text-align: center;
}
.btn-noir:hover, a.btn-noir:hover {
    background-color: #FFF;
    border:2px solid #323333;
    color:#323333;
}
.btn-gris, a.btn-gris { background-color: #616161; color:#FFF; -webkit-transition: all .2s ease-in;
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    transition: all .2s ease-in; 
}
a.btn-gris:hover { background-color: #e4e4e4; color:#323333; }

.btn-blanc, a.btn-blanc { background-color: #FFF; color:#323232; -webkit-transition: all .2s ease-in;
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    transition: all .2s ease-in; 
}
a.btn-blanc:hover { background-color: #323232; color:#FFF; }


#PictoHome { width: 514px; height: 167px; display: block; position:relative; margin-left: 10%; margin-top: 10%}
#PictoHomeTransport { float:left;width: 167px; height: 167px; background-repeat: no-repeat}
#PictoHomeSocial {float:left;  width: 167px; height: 167px; background-repeat: no-repeat}
#PictoHomeWine {float:left;  width: 167px; height: 167px; background-repeat: no-repeat}

/* SIte */
/* #Site { max-width:1014px; padding:0px 0px 10px 0px; left:50%; margin-left:-507px; position:relative; background-color:transparent; background-repeat:no-repeat; height:auto;} */
#Site { max-width:1014px; padding:0px 0px 10px 0px; background-color:transparent; background-repeat:no-repeat; height:auto; margin: auto;}

#Site #Logo {position:relative; width:275px; height:121px; float:left; margin-right:30px; margin-left:10px; margin-top: 10px; top: -30px; }
#Site #Logo img {width:275px; height:121px; border:0px;}
#nav {
    border-bottom: 1px solid #D0D3D5;
    display: block;
    /*
    margin-bottom: 8px;
    padding-bottom: 15px;
    */
}

/* 
#Page { height: auto; display: block; position: relative;   -webkit-box-shadow:0 3px 5px #999;-moz-box-shadow:0 3px 5px #999; box-shadow:0 3px 5px #999; background-color:#FFF; padding:8px}
*/
#Page > .clear {
  clear: both;
  height: 0; overflow: hidden; /* Précaution pour IE 7 */
}
#SubPage { display:block; -webkit-box-shadow:3px 3px 5px #999;-moz-box-shadow:0 3px 5px #999; box-shadow:0 3px 5px #999; background-color:#FFF; padding:12px; margin-top: 15px; }

.clearfooter {height: 0px;clear: both;}
.clearBoth {clear: both;height: 0; overflow: hidden;}

#topHeader { height: 35px; position: relative;}
.VignobleTopHead ul { padding: 0;margin: 0; list-style-type: none;}
.VignobleTopHead ul li{ display: inline; float:left; width: auto; margin: 2px 5px; padding: 3px 0px;}
.VignobleTopHead a { font-family: 'Archivo Narrow', sans-serif; font-size:1.1em; font-weight: 400; color:#E6E6E6; text-decoration: none}
.VignobleTopHead a:hover {color:#ed3c6e; cursor: pointer; text-decoration:none }

/*
#header {  border-bottom: 6px solid #9ac048; height:170px; background-color: #FFF; border-top-right-radius: 4px; border-top-left-radius: 4px; position:relative; margin: 0 auto}
*/

/* Suggestion de produit */
#formRecherche .btn { height:34px;}

#suggestions.close {display:none;top:50px;}
#suggestions.open {display:block;top:73px;}

.box-suggestions {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: none repeat scroll 0 0 #FFFFFF;
    border-color: #E2E2E2;
    border-image: none;
    border-style: solid;
    border-width: 0 1px 1px;
    box-shadow: 0 5px 10px #666666;
    clear: both;
    margin-left: -3px;
    margin-top: 3px;
    padding: 10px 0;
    width: 400px;
    left :50%;
    margin-left:-225px;
    top:110px;
    position:absolute;
    z-index: 201;
    opacity: 0.95;
}
 .box-suggestions:hover{opacity: 1;}
 
    .box-suggestions .BlockHeaderSuggest {
    border-bottom: 1px solid #E2E2E2;
    clear: both;
    color: #1B1B1B;
    font-size: 11px;
    font-weight: bold;
    margin: 0 0 20px;
    padding: 2px 10px 2px 0;
    text-align: center;
    opacity: 1;
}

.box-suggestions .BlockHeaderSuggest span {
    background: none repeat scroll 0 0 #FFFFFF;
    bottom: -10px;
    padding: 0 10px;
    position: relative;
    opacity: 1;
}

/* .box-suggestions .products p a span { padding: 3px 10px; } */
.box-suggestions .products p a:hover, .box-suggestions .products p a:focus {  background: none repeat scroll 0 0 #fae1fa;}
/*
.box-suggestions{clear:both;border:1px solid #e2e2e2;border-width:0 1px 1px;width:435px;padding:10px 0;background:#fff;margin-top:3px;margin-left:-3px;-moz-box-shadow:0 5px 10px #666;-webkit-box-shadow:0 5px 10px #666;box-shadow:0 5px 10px #666}
*/
.box-suggestions ul{margin:0;padding:0}
.box-suggestions p{margin:0}
.box-suggestions p.box-suggestions-title{color:#777;font-size:14px;line-height:1;padding:0 0 0 15px; }
.box-suggestions li{list-style-type:none;margin:0 0;overflow:hidden}
.box-suggestions .BlockHeaderSuggest{color:#1b1b1b;font-weight:bold;padding:2px 10px 2px 0;margin:0 0 20px;font-size:11px;border-bottom:1px solid #e2e2e2;text-align:center;clear:both; font-family: 'Nunito', sans-serif;  font-weight: 400;font-size:15px;}
.box-suggestions .BlockHeaderSuggest strong{padding:0 10px;background:#fff;position:relative;bottom:-10px}

.box-suggestions .BlockContentSuggest{overflow:hidden;width:100%}
.box-suggestions .BlockContentSuggest ul li {float:left; width: 48%; margin: 1%; height: 130px}

.box-suggestions .BlockContentSuggest p{font-size:12px;line-height:18px}
.box-suggestions .BlockContentSuggest p a{display:block;color:#333;text-decoration:none;padding:0 0 0 15px}
.box-suggestions .BlockContentSuggest p a:hover, .box-suggestions .BlockContentSuggest p a:focus{background:#e8abe7}
.box-suggestions .BlockContentSuggest p span.match{font-weight:100}
.box-suggestions .BlockContentSuggest p span.match, .box-suggestions .BlockContentSuggest p span.univers{color:#cf07cd}
.box-suggestions .products p{margin:2px 0}
.box-suggestions .products span.desc{display:block; font-size:12px; color:#ED3C6E; word-wrap: break-word;}
.box-suggestions .products span.domaine{display:block; color:#323232; font-size:10px; font-family:Tahoma; word-wrap: break-word;}
.box-suggestions .products span.Prix{display:block;margin:-3px 0 0 0; font-weight: normal; font-size: 10px; font-family:Arial}

.box-suggestions .products p img{float:left;margin-right:10px;border:1px solid transparent; background-color: #FFF}
.box-suggestions .products p a:hover img, .box-suggestions .products p a:focus img{border:1px solid #d4d4d4}
.box-suggestions .products p a{display:block;padding:0px 2px;overflow:hidden}
.box-suggestions .products p a:hover,
.box-suggestions .products p a:focus{background:#fae1fa}


/* fin de suggest*/

/* Compte Client */
#quickaccess{float:right;margin:0px 3px 0px 3px;width: auto ;z-index:300; height:37px}
#quickaccess a, #quickaccess a:hover { color:#000000; text-decoration:none}
#quickNewsLetter { float:left; position:relative;margin-bottom: 0px; height:37px; z-index:1000; margin: 0 15px;}
#quickNewsLetter div.title{float:left; line-height: 32px; font-family: 'Archivo Narrow', sans-serif; font-weight: 400; font-size:16px; color:#585858; margin:0;}
#quickNewsLetter a.links {display:block;}
#quickNewsLetter i { font-size:12px;}
#quickNewsLetter a { color:#EC3B6E}
#quickNewsLetter a:hover { color:#FFF}
#quickViewNewsLetter a:hover { color:#FFF}

#quickNewsLetter .closed  #quickViewNewsletter {display:none;top:0px;}
#quickNewsLetter .open  #quickViewNewsletter {display:none;top:30px;}
#quickViewNewsLetter{position:absolute;top:30px;left:-150px; height:150px; width:150px!important;z-index:1000;}
#quickViewNewsLetter .top{float:left;position:relative; width:250px; height:150px; background-color:#FFFFFF; border: 1px solid #585858; color:#585858; padding:0;min-height:100px;}
#quickViewNewsLetter .bottom{float:left;width:100%;height:20px;}
#quickViewNewsLetter input[type=text], #quickViewNewsLetter input[type=password], #quickViewNewsLetter input[type=button] { padding: 3px}
#quickViewNewsLetter input{background-color:#ffffff; font-family:tahoma; font-size:11px; border:1px solid #a2a29a;margin:2px; color:#333333; width: 95%}
#quickViewNewsLetter .BlockNewsletter { padding:10px;}

#quickaccount{ float:left; position:relative;margin-bottom: 0px; height:37px; z-index:1000;}
#quickaccount span.Titre{line-height: 24px; font-weight: 600; font-size:1.1rem; color:var(--couleur-rose); margin:0;}
#quickaccount a.links {display:block;}
#quickaccount i { font-size:12px;}
#quickaccount a { color:#fff; transition: 0.5s all ease-in-out; font-size:1.2rem;}
#quickaccount a:hover { color:#FFF}

#quickViewAccount{position:absolute;top:37px;left:-60px; height:180px; min-width:150px!important; width: auto; z-index:1000; border:0px;}
#quickViewAccount img {border:0px}
#quickViewAccount input[type=text], #quickViewAccount input[type=password], #quickViewAccount input[type=button] { padding: 3px}
#quickViewAccount a { text-decoration: none; }
#quickaccount .closed  #quickViewAccount{display:none;top:0px; }
#quickaccount .open  #quickViewAccount{display:block;top:37px;}



#quickaccount.close  #quickViewAccount .links{display:block;}
#quickaccount.open  #quickViewAccount .links{display:none;}
#quickViewAccount .btn-center{margin:0px;}
#quickViewAccount .quickconnect{ padding: 10px}
#quickViewAccount .quickconnect input{background-color:#ffffff; border:1px solid #a2a29a;margin:2px; color:#333333}
#quickViewAccount .quickconnect ul { padding: 0; margin: 0; list-style-type: none}
#quickViewAccount .quickconnect ul li { padding:6px 0; display:block; width: 100%; transition: 0.5s all ease-in-out}
#quickViewAccount .quickconnect ul li:hover { background-color: var(--couleur-rose); }
#quickViewAccount .quickconnect ul li a{ text-decoration: none; color:#FFF; font-size: 13px; font-weight: 400; }
#quickViewAccount .quickconnect ul lihover a{color:#FFF;}
#quickViewAccount .quickconnect span a{text-decoration:none; color:#353535}
#quickViewAccount .quickconnect a.btn-ConnectionCompteclient { text-transform: uppercase; color:#353535; float: right;}


#quickViewAccount .quickregister {background-color:#585858; padding:8px; color:#FFFFFF; height: 80px; position:absolute; bottom: 0}
#quickViewAccount .quickregister a.btn-inscription { text-transform: uppercase; color:#FFFFFF; float: right;}

#quickViewAccount .top{float:left; position:relative; width:250px; height:auto; background-color:#323232; color:#FFF; border: 1px solid #585858; color:#585858; padding:0;min-height:100px;}
#quickViewAccount .bottom{float:left;width:100%;height:20px;}


#BlockPanier { float: right; min-width: 226px; width: auto; z-index: 99;  position:absolute; top:40px; margin: 0 35px 0 0; right: 5px;}
#BlockPanier .InfoPanier { float: left; width: 113px;}
#BlockPanier .bg_rose { padding: 4px; background-color:#ed3c6e; color:#FFF; border-top-right-radius: 4px; border-bottom-right-radius: 0px;}
#BlockPanier .bg_gris { padding: 2px 4px; background-color:#585858; color:#FFF; border-top-right-radius: 0px; border-bottom-right-radius: 4px; position:relative; height:20px;}
#BlockPanier .bg_rose span {font-size:13px; font-family: Arial; text-align: center; float: right; width: 80px;}
#BlockPanier .bg_gris span {font-size:11px; font-family: Arial; text-align: left}

.panier {width: 98%; padding:0.5em; border-top-left-radius : 0px; border-top-right-radius:0px}
/* texte defilant pour le nom du producteur */
.marquee { width: 105px; height:20px;  font-size:12px; overflow: hidden;}


.progress-bar-rose {
  background-color: #5e5e5e;
}
.progress .progressbar-front-text {
    font-family: 'Archivo Narrow', sans-serif; font-weight: 400; font-size:1.8em;
}
#Page h1 {font-family: 'Archivo Narrow', sans-serif; font-size:1.6em; font-weight: 400; color:#ed3c6e; text-align: left}
.fleft { float:left}
.fright { float:right}
ul.ProducteurHome { padding: 0px; margin: 0px; list-style-type: none;}
ul.ProducteurHome li  {padding: 2px; margin: 5px 0px;  font-family: Arial; font-size:12px;}
ul.ProducteurHome li ul.DescDomaine  {padding: 0;  list-style-type: none; margin: 0px; }
ul.ProducteurHome li  ul.DescDomaine li{ border:0px; padding: 0px 2px; margin: 0px; font-family: Arial; font-size:11px;}
ul.ProducteurHome h3, ul.ProducteurHome h3 > a {font-family: 'Archivo Narrow', sans-serif; font-size:1.2em; font-weight: 400; color:#323333; padding: 2px 0px; margin:0}
ul.ProducteurHome h3 a:hover {color:#ed3c6e; text-decoration: none; cursor: pointer}
.ProducteurHome .btn, .ProducteurHome a.btn, .ProducteurHome a.btn:hover {-moz-user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 2px;
    cursor: pointer;
    display: inline-block;
    font-size: 12px;
    font-weight: normal;
    line-height: 1.42857;
    margin-bottom: 0;
    padding: 2px 5px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;}

ul.ListeHorizontale { padding: 0; margin:0;list-style-type: none}
ul.ListeHorizontale li { text-align: center}
ul.ListeHorizontale li h4 {font-family: 'Archivo Narrow', sans-serif; font-size:1.2em; font-weight: 400; color:#ed3c6e; padding: 0; margin: 0}
ul.ListeHorizontale li div.TitreProducteur {font-family: Arial; font-size:1em; color:#323333; text-wrap: normal}
ul.ListeHorizontale li div.DescVin {font-family: Arial; font-size:0.8em; color:#323333; font-style:italic}


/* Fiche Producteur */
.Producteur_titre { position:absolute; color:#FFF; z-index: 2; left: 320px; top: 190px; min-width: 40%; width: auto}
.Producteur_titre h2.TitreProducteur  {font-family: 'Open Sans', sans-serif; color:#FFF; padding: 0; margin:0; text-shadow: 1px 1px #323232; font-size:2.2em}
.Producteur_visuel { float:right; width: 60%; max-height: 480px; height:auto; min-height: 250px; max-height: 332px; overflow: hidden; border-bottom: 4px solid #ed3c6e}
.Producteur_Identite {  float:left;  background-color: #EFEFEF; width: 40%; max-height: 480px; height:auto; min-height:332px; overflow: hidden;border-bottom: 4px solid #ed3c6e}

.Producteur_visuel img { width: 100%}
.Producteur_logo { position:absolute; z-index: 2; left: 5%; margin-top: -140px; display:block; width: 219px; height: 219px;
-moz-box-shadow: 0px 0px 5px 0px #656565;
-webkit-box-shadow: 0px 0px 5px 0px #656565;
-o-box-shadow: 0px 0px 5px 0px #656565;
box-shadow: 0px 0px 5px 0px #656565;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=NaN, Strength=5);
background-color:#FFF;
}

.bg-gris-fonce { background-color: #353535; padding-left: 40%; height: 30px;   }
.VenteFlashProducteur { background-image: url('../images/bg_VenteFlash_FicheProducteur.jpg'); background-repeat: no-repeat; background-position: top center; width: 227px; height: 350px;}
#VenteFlashProduit {
    width: 230px;
    height: 49px;
    background-repeat: none;
    display:block;
    position:relative;
    margin-top: -55px;
}
#VenteFlashProduit .Chrono {
    color: #FFFFFF;
    font-family: 'Archivo Narrow', sans-serif;
    font-size: 15px;
    font-weight:400;
    line-height: 30px;
    padding-left: 25px;
    padding-top: 17px;
}
#InfoProducteur .tabInfo {  min-height: 250px; height: auto; overflow: scroll-y }
#InfoProducteur .active {  display:block;}
#InfoProducteur .inactive { display:none}

/*Gallerie*/
#gallerie ul { padding: 0; margin:0;}
#gallerie ul li.photo{ float:left; width: 200px; }
/* Liste des Vins Fiche Producteur */
#ListeVin .item {
  padding: 8px; float: left; margin: 1% 0 0 1%;
  margin-bottom:1em;
  background-color: #FFF; width: 31%; height: 325px; display: block; position: relative;
  /* Force Hardware Acceleration in WebKit */
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
  box-shadow: 0 0px 3px rgba(0, 0, 0, 0.2);

}
#ListeVin .item img { width: 100%; }
 #ListeVin .item:hover{ border:0px solid #1C3F81;  -webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    0px 0px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow:         0px 0px 5px 0px rgba(50, 50, 50, 0.75);}
#ListeVin .item h2 { font-family: 'Archivo Narrow',Arial, sans-serif;  font-weight:400; font-size:1.2em; border-bottom: 1px solid #585858; margin: 5px 0px;}
#ListeVin .item .PrixVente { font-weight: 400; font-size:14px;}
#ListeVin .item a.Link { font-weight: 400; font-size:12px; background-color:#585858; color:#FFF; padding: 3px 5px}

#RechercheConfig label { color:#EC3B6E; font-size: 12px; font-family: Arial;}

.bgTableTarifs { background-color: #FFF; opacity: 0.7; position:absolute; z-index: 2; width: 100%; min-height: 125px; height:auto}
.BlockTableTarifs {position:absolute; z-index: 3; width:95%; height: auto}
.TableTarifs { font-weight: normal; font-size: 12px; font-family: Arial;}   
.TableTarifs tr { border-bottom: 1px solid #EAEAEA;}
.TableTarifs tr th {font-weight: normal;}


.isotope,
.isotope .isotope-item {
  /* change duration value to whatever you like */
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}
.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

.event-list {
		list-style: none;
		font-family: 'Archivo Narrow', sans-serif;
                font-weight:400;
		margin: 0px;
		padding: 0px;
	}
	.event-list > li {
		background-color: rgb(255, 255, 255);
		box-shadow: 0px 0px 5px rgb(51, 51, 51);
		box-shadow: 0px 0px 5px rgba(51, 51, 51, 0.7);
		padding: 0px;
		margin: 0px 0px 20px;
	}
	.event-list > li > time {
		display: inline-block;
		width: 100%;
		color: rgb(255, 255, 255);
		background-color: rgb(197, 44, 102);
		padding: 5px;
		text-align: center;
		text-transform: uppercase;
	}
	.event-list > li:nth-child(even) > time {
		background-color: rgb(165, 82, 167);
	}
	.event-list > li > time > span {
		display: none;
	}
	.event-list > li > time > .day {
		display: block;
		font-size: 3.2em;
		font-weight: 400;
		line-height: 1;
	}
	.event-list > li time > .month {
		display: block;
		font-size: 2.0em;
		font-weight: 400;
		line-height: 1;
	}
        .event-list > li time > .year {
		display: block;
		font-size: 1.5em;
		font-weight: 400;
		line-height: 1;
	}
        
	.event-list > li > img {
		width: 100%;
	}
	.event-list > li > .info {
		padding-top: 5px;
		text-align: center;
	}
	.event-list > li > .info > .title {
		font-size: 1.5em;
		font-weight: 400;
		margin: 0px;
	}
	.event-list > li > .info > .desc {
		font-size: 1em;
		font-weight: 400;
		margin: 0px;
	}
	.event-list > li > .info > ul,
	.event-list > li > .social > ul {
		display: table;
		list-style: none;
		margin: 10px 0px 0px;
		padding: 0px;
		width: 100%;
		text-align: center;
	}
	.event-list > li > .social > ul {
		margin: 0px;
	}
	.event-list > li > .info > ul > li,
	.event-list > li > .social > ul > li {
		display: table-cell;
		cursor: pointer;
		color: rgb(30, 30, 30);
		font-size: 11pt;
		font-weight: 300;
        padding: 3px 0px;
	}
    .event-list > li > .info > ul > li > a {
		display: block;
		width: 100%;
		color: rgb(30, 30, 30);
		text-decoration: none;
	} 
    .event-list > li > .social > ul > li {    
        padding: 0px;
    }
    .event-list > li > .social > ul > li > a {
        padding: 3px 0px;
	} 
	.event-list > li > .info > ul > li:hover,
	.event-list > li > .social > ul > li:hover {
		color: rgb(30, 30, 30);
		background-color: rgb(200, 200, 200);
	}
	.facebook a,
	.twitter a,
	.google-plus a {
		display: block;
		width: 100%;
		color: rgb(75, 110, 168) !important;
	}
	.twitter a {
		color: rgb(79, 213, 248) !important;
	}
	.google-plus a {
		color: rgb(221, 75, 57) !important;
	}
	.facebook:hover a {
		color: rgb(255, 255, 255) !important;
		background-color: rgb(75, 110, 168) !important;
	}
	.twitter:hover a {
		color: rgb(255, 255, 255) !important;
		background-color: rgb(79, 213, 248) !important;
	}
	.google-plus:hover a {
		color: rgb(255, 255, 255) !important;
		background-color: rgb(221, 75, 57) !important;
	}

	@media (min-width: 768px) {
		.event-list > li {
			position: relative;
			display: block;
			width: 100%;
			min-height: 100px;
                        height: auto;
			padding: 0px;
		}
		.event-list > li > time,
		.event-list > li > img  {
			display: inline-block;
		}
		.event-list > li > time,
		.event-list > li > img {
			width: 100px;
			float: left;
		}
		.event-list > li > .info {
			background-color: rgb(245, 245, 245);
			overflow: hidden;
		}
		.event-list > li > time,
		.event-list > li > img {
			width: 100px;
			height: 100px;
			padding: 0px;
			margin: 0px;
		}
		.event-list > li > .info {
			position: relative;
			height: 100px;
			text-align: left;
			padding-right: 40px;
		}	
		.event-list > li > .info > .title, 
		.event-list > li > .info > .desc {
			padding: 0px 10px;
		}
		.event-list > li > .info > ul {
			position: absolute;
			left: 0px;
			bottom: 0px;
		}
		.event-list > li > .social {
			position: absolute;
			top: 0px;
			right: 0px;
			display: block;
			width: 40px;
		}
        .event-list > li > .social > ul {
            border-left: 1px solid rgb(230, 230, 230);
        }
		.event-list > li > .social > ul > li {			
			display: block;
            padding: 0px;
		}
		.event-list > li > .social > ul > li > a {
			display: block;
			width: 40px;
			padding: 10px 0px 9px;
		}
	}
        
/* FIN Liste des Vins Fiche Producteur */

/* DetailProduit */

#BlockVenteFlashFicheProduit {position:relative; border:1px solid #585858; padding:10px; font-size:0.9em; font-family: 'Open Sans', sans-serif; font-weight: 400; font-weight:400; color:#323333;  }
#BlockVenteFlashFicheProduit .PictoVenteFlashFicheProduit {position:relative; float:left;}
#BlockVenteFlashFicheProduit .PictoVenteFlashFicheProduit img { margin: 0 2px; width: 95%}

.AttributTopHead ul { padding: 0; margin: 0; background-color: #e8e8e8;}
.AttributTopHead ul li { height:22px; line-height: 22px; margin: 2px 0px; margin: 0 5px;}


.m-share a {
    color: #999999;
   
    height: 23px;
    line-height: 0;
    margin-left: 8px;
    text-decoration: none;
    vertical-align: top;
    width: 23px;
}

.VinDesc { float:left;  padding: 8px; text-align: justify; /* width: 40%; */ }
#Page .VinDesc h1 {font-size: 2.5em; }
.VinDesc p.desc { font-family: Arial; font-size:12px;}
.VinPhoto { float:left; /* width: 35% */}
.VinCommande { float:left; /* width: 22% */}

.PrixVente { background-color: #d8d8d8; font-family: 'Archivo Narrow', sans-serif; font-weight:400; color:#323333; font-size: 3.2em; padding: 10px; height: 70px; line-height: 30px; text-align: center; border: 2px solid #ED3C6E }

.PrixVentePublic { font-family: 'Archivo Narrow', sans-serif; font-weight:400; color:#323333; font-size: 3.2em; padding: 10px; height: 80px; line-height: 30px; text-align: center; border: 2px solid #ED3C6E }



.DetailPrixBouteille { font-size: 13px; font-family: arial; }
.numUpDownInput {
    background-color: #fff;
    border: 1px solid #c8c8c8;
    border-radius: 5px;
    color: #000;
    height: 20px;
    padding-top: 2px;
    position: relative;
    text-align: center;
    width: 35px;
    z-index: 1;
}
.lir {
    background-repeat: no-repeat;
    height: 0 !important;
    overflow: hidden;
}

table.TablePrix { border: 0px; padding: 0; width: 100%}
table.TablePrix thead tr {  border:1px solid #b53358; background-color:#b53358; color:#FFF; font-size: 12px; text-align: center;height:30px;}
table.TablePrix tbody tr {  font-size: 12px; text-align: left;height:30px;}
table.TablePrix tbody tr > th { border:1px solid #b53358; padding: 5px;}
table.TablePrix tbody tr > th.TarifPreferentiel { background-color: #d8d8d8}
#cart-animation {
    background: none repeat scroll 0 0 #F45B4F !important;
    border: 3px solid #F45B4F;
    border-radius: 50%;
    color: #FFFFFF !important;
    display: block;
    font-size: 16px;
    font-weight: bold;
    height: 25px;
    line-height: 25px;
    position: absolute;
    text-align: center;
    width: 25px;
    z-index: 50;
}

.m-tabs {margin-left: 0;margin-right: 0;}
.m-product_data {text-align: left;}

.m-tabs [data-tabs] {border: 1px solid #E5E5E5;background-color: #F3F3F3;border-top: none;padding-bottom: 12px; float: left; width: 70%; display: block ;position:relative}
.m-tabs [data-tabs]>.active {display: block;}
.m-tabs .tab {background-color: #fff;padding: 18px 20px 53px;display: none;}
.m-tabs .m-product_data dt {padding-top: 15px;clear: left;float: left;width: 160px;}
.m-tabs .m-product_data dd {display: block;width: auto;margin-bottom: 40px;padding-top: 15px;padding-right: 60px;padding-left: 160px;border-top: 1px solid #E5E5E5;}
.mbb {margin-bottom: 30px;}

.recommandation { background-color: #FFF; height: 100%;}
.recommandation ul { padding: 0; margin: 0; list-style-type: none;}
.recommandation ul li {position:relative; display: block; clear: both; margin: 10px 0px; height:180px;}
.recommandation ul li .DescVin { font-size:10px; font-family:Arial;}
.ModalPanier {width:550px!important;}
h1.ui-title { font-family: 'Archivo Narrow', sans-serif; font-weight:400; color:#323333; font-size:2.1em }
/* Fin DetailProduit */

/* CADDIE AFFICHAGE */
a.numUpDown.moins, a.numUpDown.moins:hover {
    background: url("../images/ico_qte_moins.png") no-repeat scroll 0 0 transparent;
}
a.numUpDown, a.numUpDown:hover {
    display: inline-block !important;
    padding-top: 15px;
    width: 16px;
}
a.numUpDown.plus, a.numUpDown.plus:hover {
    background: url("../images/ico_qte_plus.png") no-repeat scroll 0 0 transparent;
}
.btn-large { min-width: 210px}

table tr.TableHeader { background-color:#323333; color:#FFF;  height: 25px; line-height: 25px;}
table tr.HeaderRegion { background-color:#efefef; color:#323333;  height: 25px; line-height: 25px;}
table tr.HeaderRegion th { padding: 5px;}
/*
.BlockPanierPanier .InfoPanier { float: left; width: 113px;}
.BlockPanierPanier .bg_rose { padding: 4px; background-color:#ed3c6e; color:#FFF; border-top-left-radius: 4px; border-bottom-right-radius: 0px; height: 74px;}
.BlockPanierPanier .bg_rose span { font-size:2.5em;}
.BlockPanierPanier .bg_gris { padding: 2px 4px; background-color:#585858; color:#FFF; border-top-right-radius: 0px; border-bottom-left-radius: 4px;}
.BlockPanierPanier .bg_gris span { font-size:12px; font-family: Arial;}                
*/
th.BlockPanierPanier { vertical-align: central; text-align: center}
th.BlockPanierPanier .slide { float:right }
.BlockPanierPanier .InfoPanier { float: left; width: 113px;}
.BlockPanierPanier .bg_rose { padding: 4px; background-color:#ed3c6e; color:#FFF; border-top-right-radius: 4px; border-bottom-right-radius: 0px;}
.BlockPanierPanier .bg_gris { padding: 2px 4px; background-color:#585858; color:#FFF; border-top-right-radius: 0px; border-bottom-right-radius: 4px; position:relative; height:20px;}
.BlockPanierPanier .bg_rose span {font-size:13px; font-family: Arial; text-align: center; float: right; width: 80px;}
.BlockPanierPanier .bg_gris span {font-size:11px; font-family: Arial; text-align: left}


/* Point d'interet */
.cd-single-point {
  position: absolute;
  border-radius: 50%;
}
.cd-single-point > a {
  position: relative;
  z-index: 20;
  display: block;
  width: 30px;
  height: 30px;
  border-radius: inherit;
  background: #d95353;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  -webkit-transition: background-color 0.2s;
  -moz-transition: background-color 0.2s;
  transition: background-color 0.2s;
}
.cd-single-point > a::after, .cd-single-point > a:before {
  /* rotating plus icon */
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  background-color: white;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  transition-duration: 0.2s;
}
.cd-single-point > a::after {
  height: 2px;
  width: 12px;
}
.cd-single-point > a::before {
  height: 12px;
  width: 2px;
}
.cd-single-point::after {
  /* this is used to create the pulse animation */
  content: '';
  position: absolute;
  z-index: 10;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: inherit;
  background-color: transparent;
  -webkit-animation: cd-pulse 2s infinite;
  -moz-animation: cd-pulse 2s infinite;
  animation: cd-pulse 2s infinite;
}
.cd-single-point:first-child {
  bottom: 25%;
  right: 80%;
}
.cd-single-point:nth-child(2) {
  bottom: 24%;
  right: 46%;
}
.cd-single-point:nth-child(3) {
  top: 28%;
  left: 20%;
}
.cd-single-point:nth-child(4) {
  top: 20%;
  right: 22%;
}
.cd-single-point.is-open > a {
  background-color: #475f74;
}
.cd-single-point.is-open > a::after, .cd-single-point.is-open > a::before {
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(135deg);
  -moz-transform: translateX(-50%) translateY(-50%) rotate(135deg);
  -ms-transform: translateX(-50%) translateY(-50%) rotate(135deg);
  -o-transform: translateX(-50%) translateY(-50%) rotate(135deg);
  transform: translateX(-50%) translateY(-50%) rotate(135deg);
}
.cd-single-point.is-open::after {
  /* remove pulse effect */
  display: none;
}
.cd-single-point.is-open .cd-more-info {
  visibility: visible;
  opacity: 1;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0s, -webkit-transform 0.3s 0s, top 0.3s 0s, bottom 0.3s 0s, left 0.3s 0s, right 0.3s 0s;
  -moz-transition: opacity 0.3s 0s, visibility 0s 0s, -moz-transform 0.3s 0s, top 0.3s 0s, bottom 0.3s 0s, left 0.3s 0s, right 0.3s 0s;
  transition: opacity 0.3s 0s, visibility 0s 0s, transform 0.3s 0s, top 0.3s 0s, bottom 0.3s 0s, left 0.3s 0s, right 0.3s 0s;
}
.cd-single-point.visited > a {
  background-color: #475f74;
}
.cd-single-point.visited::after {
  /* pulse effect no more active on visited elements */
  display: none;
}
@media only screen and (min-width: 600px) {
  .cd-single-point.is-open .cd-more-info.cd-left {
    right: 140%;
  }
  .cd-single-point.is-open .cd-more-info.cd-right {
    left: 140%;
  }
  .cd-single-point.is-open .cd-more-info.cd-top {
    bottom: 140%;
  }
  .cd-single-point.is-open .cd-more-info.cd-bottom {
    top: 140%;
  }
}

@-webkit-keyframes cd-pulse {
  0% {
    -webkit-transform: scale(1);
    box-shadow: inset 0 0 1px 1px rgba(217, 83, 83, 0.8);
  }

  50% {
    box-shadow: inset 0 0 1px 1px rgba(217, 83, 83, 0.8);
  }

  100% {
    -webkit-transform: scale(1.6);
    box-shadow: inset 0 0 1px 1px rgba(217, 83, 83, 0);
  }
}
@-moz-keyframes cd-pulse {
  0% {
    -moz-transform: scale(1);
    box-shadow: inset 0 0 1px 1px rgba(217, 83, 83, 0.8);
  }

  50% {
    box-shadow: inset 0 0 1px 1px rgba(217, 83, 83, 0.8);
  }

  100% {
    -moz-transform: scale(1.6);
    box-shadow: inset 0 0 1px 1px rgba(217, 83, 83, 0);
  }
}
@keyframes cd-pulse {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    box-shadow: inset 0 0 1px 1px rgba(217, 83, 83, 0.8);
  }

  50% {
    box-shadow: inset 0 0 1px 1px rgba(217, 83, 83, 0.8);
  }

  100% {
    -webkit-transform: scale(1.6);
    -moz-transform: scale(1.6);
    -ms-transform: scale(1.6);
    -o-transform: scale(1.6);
    transform: scale(1.6);
    box-shadow: inset 0 0 1px 1px rgba(217, 83, 83, 0);
  }
}
.cd-single-point .cd-more-info {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  text-align: left;
  line-height: 1.5;
  background-color: rgba(255, 255, 255, 0.95);
  padding: 2em 1em 1em;
  visibility: hidden;
  opacity: 0;
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -ms-transform: scale(0.8);
  -o-transform: scale(0.8);
  transform: scale(0.8);
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s, -webkit-transform 0.3s 0s, top 0.3s 0s, bottom 0.3s 0s, left 0.3s 0s, right 0.3s 0s;
  -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s, -moz-transform 0.3s 0s, top 0.3s 0s, bottom 0.3s 0s, left 0.3s 0s, right 0.3s 0s;
  transition: opacity 0.3s 0s, visibility 0s 0.3s, transform 0.3s 0s, top 0.3s 0s, bottom 0.3s 0s, left 0.3s 0s, right 0.3s 0s;
}
.cd-single-point .cd-more-info::before {
  /* triangle next to the interest point description - hidden on mobile */
  content: '';
  position: absolute;
  height: 0;
  width: 0;
  display: none;
  border: 8px solid transparent;
}
.cd-single-point .cd-more-info h2 {
  font-size: 22px;
  font-size: 1.375rem;
  margin-bottom: .6em;
}
.cd-single-point .cd-more-info p {
  color: #758eb1;
}
@media only screen and (min-width: 600px) {
  .cd-single-point .cd-more-info {
    position: absolute;
    width: 220px;
    height: 240px;
    padding: 1em;
    overflow-y: visible;
    line-height: 1.4;
    border-radius: 0.25em;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  }
  .cd-single-point .cd-more-info::before {
    display: block;
  }
  .cd-single-point .cd-more-info.cd-left, .cd-single-point .cd-more-info.cd-right {
    top: 50%;
    bottom: auto;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  .cd-single-point .cd-more-info.cd-left::before, .cd-single-point .cd-more-info.cd-right::before {
    top: 50%;
    bottom: auto;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  .cd-single-point .cd-more-info.cd-left {
    right: 160%;
    left: auto;
  }
  .cd-single-point .cd-more-info.cd-left::before {
    border-left-color: rgba(255, 255, 255, 0.95);
    left: 100%;
  }
  .cd-single-point .cd-more-info.cd-right {
    left: 160%;
  }
  .cd-single-point .cd-more-info.cd-right::before {
    border-right-color: rgba(255, 255, 255, 0.95);
    right: 100%;
  }
  .cd-single-point .cd-more-info.cd-top, .cd-single-point .cd-more-info.cd-bottom {
    left: 50%;
    right: auto;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  .cd-single-point .cd-more-info.cd-top::before, .cd-single-point .cd-more-info.cd-bottom::before {
    left: 50%;
    right: auto;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  .cd-single-point .cd-more-info.cd-top {
    bottom: 160%;
    top: auto;
  }
  .cd-single-point .cd-more-info.cd-top::before {
    border-top-color: rgba(255, 255, 255, 0.95);
    top: 100%;
  }
  .cd-single-point .cd-more-info.cd-bottom {
    top: 160%;
  }
  .cd-single-point .cd-more-info.cd-bottom::before {
    border-bottom-color: rgba(255, 255, 255, 0.95);
    bottom: 100%;
  }
  .cd-single-point .cd-more-info h2 {
    font-size: 20px;
    font-size: 1.25rem;
    margin-bottom: 0;
  }
  .cd-single-point .cd-more-info p {
    font-size: 14px;
    font-size: 0.875rem;
  }
}

/* close the interest point description - only on mobile */
.cd-close-info {
  position: fixed;
  top: 0;
  right: 0;
  height: 44px;
  width: 44px;
}
.cd-close-info::after, .cd-close-info:before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  -o-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
  background-color: #475f74;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  transition-duration: 0.2s;
}
.cd-close-info::after {
  height: 2px;
  width: 16px;
}
.cd-close-info::before {
  height: 16px;
  width: 2px;
}




@media (max-width: 640px) {
     * {
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
    }
    body {
        width: auto;
        margin: 0;
        padding: 0;
    }
    img,table,td,blockquote,code,pre,textarea,input,iframe,object,embed,video {max-width: 100%;}
    /* conserver le ratio des images */
    img {height: auto;}

    .cd-close-info {
    display: none;
  }
  
  /* masquer les éléments superflus */
  .hide_mobile {
        display: none !important;
  }
    
  .VinDesc h1 {font-size:1.5em}
}

/* GRID SYSTEME FROM http://www.responsivegridsystem.com/*/
/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }


/*  GROUPING  */
.group:before,
.group:after {
	content:"";
	display:table;
}
.group:after {
	clear:both;
}
.group {
    zoom:1; /* For IE 6/7 */
}

/*  GRID OF THREE  */
.span_3_of_3 {
	width: 100%;
}
.span_2_of_3 {
	width: 66.1%;
}
.span_1_of_3 {
	width: 32.2%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
	.col { 
		margin: 1% 0 1% 0%;
	}
        
        .span_3_of_3 {
		width: 100%; 
	}
	.span_2_of_3 {
		width: 100%; 
	}
	.span_1_of_3 {
		width: 100%;
	}
}

@media only screen and (max-width: 480px) {
	
}

@media (max-device-width:768px) and (orientation: landscape) {
  html {
   -webkit-text-size-adjust: 100%;
  }
  
  .col { 
		margin: 1% 0 1% 0%;
	}
        
    .span_3_of_3 {
            width: 100%; 
    }
    .span_2_of_3 {
            width: 100%; 
    }
    .span_1_of_3 {
            width: 100%;
    }
        
}