@font-face {
    font-family: "garamond-reg";
    src: url('GARA.TTF')format('truetype');
}

@font-face {
    font-family: "garamond-it";
    src: url('GARAIT.TTF')format('truetype');
}

@font-face {
    font-family: "garamond-bold";
    src: url('GARABD.TTF')format('truetype');
}

body {
    width: 100%;
    margin: 0 auto;
}

.dore {
    color: #aa742c;
}

.marron {
    color: #222221;
}

p {
    font-family: "garamond-reg";
    font-size: 1em;
    color: #222221;
    text-align: justify;
}

.typo-courant {
    font-family: "garamond-reg";
    font-size: 1em;
    color: #222221;
    text-align: justify;
}

.bold {
    font-family: "garamond-bold";
}

/*------------------------------------presentation------------------------------------------------*/

.fixe {
    overflow-y: hidden;
}

#first-view {
    background-color: #222221;
    width: 100%;
    height: 1000px;
    position: absolute;
    padding: 10% 0 0 0;
    animation: hide 1s;
    text-align: center;
    z-index: 9999;
}

#first-view img {
    text-align: center;
    width: 20%;
}

@keyframes hide {
    0% {
        opacity: 100%;
    }

    100% {
        opacity: 0%;
    }
}

.fade-out {
    -webkit-animation: fade-out 2s ease-out both;
    animation: fade-out 2s ease-out both;
}

/*.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 6s, opacity 2s linear;
}*/
/* ----------------------------------------------
 * Generated by Animista on 2019-2-1 9:58:39
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation fade-out
 * ----------------------------------------
 */
@-webkit-keyframes fade-out {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes fade-out {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

#second-view {
    background-image: url(img/domaine.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 1000px;
    position: absolute;
    padding: 2.5% 0 20% 0;
    text-align: center;
    -webkit-animation: anim 5s infinite;
    /* Safari 4+ */
    -moz-animation: anim 5s infinite;
    /* Fx 5+ */
    -o-animation: anim 5s infinite;
    /* Opera 12+ */
    animation: anim 5s infinite;
    /* IE 10+, Fx 29+ */
    animation: anim 5s;
}

@keyframes anim {
    0% {
        opacity: 0%;
    }

    100% {
        opacity: 100%;
    }
}


.fade-in {
    -webkit-animation: fade-in 6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: fade-in 6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2019-2-1 9:33:24
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation fade-in
 * ----------------------------------------
 */
@-webkit-keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

#second-view h1 {
    text-align: center;
    font-size: 3.2em;
    font-family: 'garamond-bold';
    margin-top: 180px;
}

#second-view h2 {
    text-align: center;
    font-size: 1.8em;
    font-family: 'garamond-reg';
    margin-top: 20px;
    margin-bottom: 40px;
}

#second-view article {
    text-align: center;
    font-size: 1em;
    font-family: 'garamond-reg';
    margin-top: 280px !important;
    background-color: rgba(255, 255, 255, 0.6);
    padding: 10px 20px;
    width: 320px;
    margin: 0 auto;

}

.bouton-entree {
    border: 1px solid black;
    border-radius: 7%;
    width: 150px;
    padding: 5px;
    margin-top: 25px !important;
    margin-bottom: 15px !important;
    margin-left: 0;
    display: block;
    margin: 0 auto;
    color: #000;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.8);
}

.bouton-entree:hover {
    -webkit-transform: scale(1.02);
    transform: scale(1.02);
    transition: 0.3s;
}

.drapeau a {
    display: inline-block;
    margin: 20px;
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    border: 3px ridge grey;
    border-radius: 10px;
}

.drapeau img:hover {
    cursor: pointer;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}

.boutique a {
    display: inline-block;
    margin: 20px;
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    border: 3px ridge grey;
    border-radius: 10px;
}

.boutique img:hover {
    cursor: pointer;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}

.opacity-off {
    opacity: 0.5;
}

.opacity-off:hover {
    opacity: 1;
}

.bouton-revue {
    border: 1px solid black;
    border-radius: 7%;
    width: 150px;
    height: 150px;
    padding: 5px;
    display: inline-block;
    vertical-align: top;
    margin: 0 auto;
    margin: 10px 20px !important;
    color: #000;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.5);
}

.bouton-revue:hover {
    -webkit-transform: scale(1.02);
    transform: scale(1.02);
    transition: 0.3s;
}

.bouton-revue i {
    font-size: 4em;
    margin: 10px;
}

.color-stand {
    font-size: 1.2em;
    font-family: 'garamond-bold';
    color: #aa742c;
}

/*-------------------------------------------------------pageIndex--------------------------------*/
#fd-index {
    background-color: #222221;
    padding: 0;
}

.main {
    width: 100%;
    margin: 0;
    background-color: #222221;
    padding: 0;
}

.container {
    width: 100%;
    margin: 0 auto;
}

header {
    height: 35px;
    width: 100%;
    margin-top: 0;
}

header a {
    margin-right: 25px;
}

/*footer{
    background-color:#aa742c;
    height:40px;
    width:100%;
    margin:0;
    color:#ffffff;
    padding-top:1px;
    padding-bottom:10px;
    padding-left:10px;

}*/
.histoire {
    width: 35%;
    height: 485px;
    background-image: url(img/histoire.jpg);
    border: 1px solid #aa742c;
    margin: 17px;
    float: left;
}

.titrehist {
    background-image: linear-gradient(to left, transparent 0%, #222221 40%);
    height: 110px;
    width: 60%;
    color: #aa742c;
    font-family: garamond-reg;
    margin-top: 25px;
    padding-top: 0;
}

.titrehist img {
    height: 130px;
    display: inline-block;
    margin-top: 0;
    padding-bottom: 35px;
}

.titrehist h2 {
    margin-left: 15px;
    display: inline-block;
    vertical-align: top;
    margin-top: 7px;
    font-size: 2.8em;
}

.part2 {
    display: inline-block;
    width: 30%;
    height: 485px;
    padding: 0;
    margin-top: 17px;
}

.cepages {
    height: 231px;
    border: 1px solid #aa742c;
    background-image: linear-gradient(to right, transparent 40%, #222221 84%), url(img/cepages.jpg);
}

.cepages h2 {
    margin-top: 170px;
    color: #ffffff;
    font-family: garamond-reg;
    font-size: 2.8em;
    margin-right: 17px;
    text-align: right;
}

.savoirfaire {
    height: 238px;
    border: 1px solid #aa742c;
    background-image: linear-gradient(to bottom, transparent 40%, #222221 84%), url(img/savoirfaire.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    margin-top: 17px;
}

.savoirfaire h2 {
    margin-top: 180px;
    color: #ffffff;
    font-family: garamond-reg;
    font-size: 2.8em;
    margin-right: 10px;
    text-align: left;
    padding-left: 20px;
}

.philo {
    height: 485px;
    width: 14.7%;
    border: 1px solid #aa742c;
    background-image: linear-gradient(to bottom, transparent 63%, #222221 84%), url(img/caveau-accueil.png);
    display: inline-block;
    margin-left: 17px;
    vertical-align: top;
    margin-top: 17px;
    background-size: cover;
}

.philo h2 {
    margin-top: 380px;
    color: #aa742c;
    font-family: garamond-reg;
    font-size: 2.6em;
    margin-right: 15px;
    text-align: right;
}

.soustitre {
    /* margin-top: 1px; */
    color: #aa742c;
    font-family: garamond-reg;
    font-size: 1em;
    margin-right: 15px;
    text-align: right;
}

.carte {
    height: 485px;
    width: 15%;
    border: 1px solid #aa742c;
    background-image: linear-gradient(to top, transparent 63%, #222221 84%), url(img/philosophie.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    margin-left: 17px;
    color: white;
    font-family: garamond-reg;
    margin-top: 17px;
    vertical-align: top;
}

.carte h2 {
    font-size: 2.5em;
    margin-left: 7px;
    margin-top: 15px;
}

.row{
    display: flex;
    width: 100%;
}

.a-gamme{

    width: 49.9%;
}

.gamme {
    height: 250px;
    border: 1px solid #aa742c;
    background-image: url(img/gammevin.jpg);
    margin: 17px;
    background-size: cover;
}

.titregamme {
    background-image: linear-gradient(to left, transparent 0%, #222221 40%);
    height: 135px;
    width: 25%;
    color: #aa742c;
    font-family: garamond-reg;
    font-size: 3em;
    margin-top: 20px;
}

.titregamme h2 {
    margin-left: 15px;
    margin-top: 25px;
    padding-top: 15px;
}

.a-boutique{

    width: 49.9%;
}

.boutique-2 {
    height: 250px;
    border: 1px solid #aa742c;
    background-image: url(img/domaine.jpg);
    margin: 17px;
    background-size: cover;
    background-position-y: -100px;
}

.titreboutique {
    background-image: linear-gradient(to left, transparent 0%, #222221 40%);
    height: 135px;
    width: 25%;
    color: #aa742c;
    font-family: garamond-reg;
    font-size: 3em;
    margin-top: 20px;
}

.titreboutique h2 {
    margin-left: 15px;
    margin-top: 25px;
    padding-top: 15px;
}

.video {
    height: 192px;
    width: 35%;
    border: 1px solid #aa742c;
    background-image: url(img/videosphotos.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    margin-left: 17px;
    margin-bottom: 20px;
    vertical-align: top;
}

.titrevideo {
    background-image: linear-gradient(to left, transparent 0%, #222221 45%);
    height: 100%;
    width: 42%;
    color: #ffffff;
    font-family: garamond-reg;
    font-size: 2.7em;

}

.titrevideo h2 {
    margin-left: 15px;
    padding-top: 30px;
}

.actu {
    height: 192px;
    width: 30%;
    border: 1px solid #aa742c;
    background-image: linear-gradient(to bottom, transparent 45%, #222221 75%), url(img/actu.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    margin-left: 17px;
    margin-bottom: 17px;
    vertical-align: top;
}

.titreactu {
    height: 65px;
    color: #aa742c;
    font-family: garamond-reg;
    font-size: 3em;
    margin-top: 125px;
    margin-left: 15px;
}

.trouver {
    height: 192px;
    width: 30.7%;
    border: 1px solid #aa742c;
    background-image: linear-gradient(to right, transparent 50%, #222221 70%), url(img/trouvez.jpg);
    display: inline-block;
    margin-left: 17px;
    margin-bottom: 17px;
}

.titretrouver {
    color: #ffffff;
    font-family: garamond-reg;
    font-size: 3.2em;
    text-align: right;
    margin-top: 22px;
    margin-right: 15px;
}

.titretrouver h2 {
    margin-left: 15px;
    margin-top: 25px;
    padding-top: 8px;
}

a {
    text-decoration: none;
    cursor: pointer;
}

.cards{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
}

.modal-content{
    height: 95vh;
}

iframe {
    width: 100%;
    height: 100%;
}

/*--------------------------------------menu------------------------------------------------*/
nav {
    width: 100%;
    background-color: #fff;
    position: fixed;
    z-index: 5000;
    /*    border-bottom: 2px solid white;*/
}

#mobile,
#menu_mobile {
    display: none;
}

/*.fixed{position: fixed;}*/
#barre-header {
    background-color: #aa742c;
    width: 100%;
    padding: 5px 0 5px 0;
}

#barre-header a {
    color: #fff;
    text-decoration: none;
    margin-right: 20px;
    font-family: "garamond-reg";
    font-size: 1em;
}

#barre-header a:hover {
    color: #222221;
}

#barre-header-mobile {
    display: none;
    background-color: #aa742c;
    width: 100%;
    padding: 5px 0 5px 0;
}

#barre-header-mobile a {
    color: #fff;
    text-decoration: none;
    margin-right: 20px;
    font-family: "garamond-reg";
    font-size: 1em;
}

#barre-header-mobile a:hover {
    color: #222221;
}

/*.flag{
    float:left;
    display:inline-block;
    padding-left:10px;
    padding-top: 10px;
}*/

#langues {
    font-family: 'Roboto-Regular';
    z-index: 999;
    position: absolute;
    position: fixed;
    left: 0;
    color: #353535;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 10px 5px;
    margin-top: 230px;
    text-align: center;
    border-radius: 0px 8px 8px 0px;
    font-size: 1.1em;
}

#langues img {
    display: block;
    vertical-align: top;
    margin: 5px;
    width: 40px;
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    border: 1px ridge grey;
    border-radius: 5px;
}

.langues img:hover {
    cursor: pointer;
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
}

.pictocaveau {
    display: block;
    background-image: url(img/caveau-1.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 18px;
    height: 18px;
}

.pictocaveau:hover {
    display: block;
    background-image: url(img/caveau-1-on.png);
    background-repeat: no-repeat;
    width: 18px;
    height: 18px;
}

.boutons-header {
    text-align: right;
}

#menu-gen-mobile,
#menu {
    display: none;
}

#menu-gen-pc {
    margin-top: -10px;
    width: 100%;
    z-index: 9999;
    box-shadow: 10px 10px 30px 10px rgba(37, 37, 36, 0.5);
    -moz-box-shadow: 10px 10px 30px 10px rgba(37, 37, 36, 0.5);
    -webkit-box-shadow: 10px 10px 30px 10px rgba(37, 37, 36, 0.5);
    -o-box-shadow: 10px 10px 30px 10px rgba(37, 37, 36, 0.5);

}

#menu-desk-mobile {
    display: none;
}

#menu-desk {
    margin: 0 auto;
    text-align: center;
    width: 70%;
}

#menu-desk li {
    display: inline-block;
    vertical-align: top;
    height: 105px;
    color: #222221;
    font-size: 1.1em;
}

#menu-desk a:hover {
    border-bottom: 10px solid #222221;
    border-left: 1px solid #222221;
    border-right: 1px solid #222221;
    transition: 0.4s;
    background-color: white;
    color: #222221;
}

#menu-desk a {
    color: white;
    text-decoration: none;
    font-family: "garamond-reg";
    font-size: 18px;
    display: inline-block;
    height: 105px;
    transition: 0.6s;
    border-bottom: 10px solid transparent;
    border-bottom: 0px solid #222221;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
}

#menu-desk li img {
    height: 100px;
}

.pad_top_menu {
    padding-top: 40px;
    padding-left: 27px;
    padding-right: 27px;
}

.capitale {
    text-transform: uppercase;
}

/*--------------------------------------fin menu------------------------------------------------*/


/*--------------------------------------footer------------------------------------------------*/
#barre-footer {
    background-color: #aa742c;
    width: 100%;
    padding: 15px 0 10px 0;
    text-align: right;
    color: #fff;
    text-align: center;

}

#barre-footer a {
    color: #fff;
    text-decoration: none;
    font-family: "garamond-reg";
    font-size: 1em;
    display: inline-block;
    vertical-align: top;
    margin: 0 3px;
}

#barre-footer a:hover {
    color: #222221;
}

.ipsumedia {
    background-image: url(img/design-by_page-0002-125px.png);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 30px;
    width: 90px;
    display: inline-block;
    vertical-align: -6px;
}

.ipsumedia:hover {
    background-image: url(img/design-by_page-0004-125px.png);
}

#barre-footer-mobile {
    display: none;
    background-color: #aa742c;
    width: 100%;
    padding: 15px 0 10px 0;
    text-align: right;
    color: #fff;
    text-align: center;

}

#barre-footer-mobile a {
    color: #fff;
    text-decoration: none;
    font-family: "garamond-reg";
    font-size: 1em;
}

#barre-footer-mobile a:hover {
    color: #222221;
}

/*#barre-footer-mobile img{
    width:17px;
    margin-right:5px;
}*/
.reseau-mob a {
    display: inline-block;
    text-align: center;
    margin: 10px 3px;
}

.txt-footer a {
    display: block;
    text-align: center;
    margin: 1px 0px;
}

.fb {
    display: block;
    background-image: url(img/facebook.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 18px;
    height: 18px;
}

.insta {
    display: block;
    background-image: url(img/insta.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 18px;
    height: 18px;
}

.twitter {
    display: block;
    background-image: url(img/twitter.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 18px;
    height: 18px;
}

.fb:hover {
    display: block;
    background-image: url(img/facebook-on.png);
    background-repeat: no-repeat;
    width: 18px;
    height: 18px;
}

.insta:hover {
    display: block;
    background-image: url(img/insta-on.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 18px;
    height: 18px;
}

.twitter:hover {
    display: block;
    background-image: url(img/twitter-on.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 18px;
    height: 18px;
}

/*--------------------------------------fin-footer------------------------------------------------*/


/*-------------------------------------notre-histoire------------------------------------------------*/
#fd-1 {
    background-color: #222221;
    height: 100%;
    width: 100%;
    position: relative;
}

.contain {
    width: 70%;
    background-color: #fff;
    margin: 0 auto;
    margin-top: 90px;
}

.marge-contain {
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
    height: 100%;
}

#photo-top-histoire {
    background-image: url(img/notre-histoire_03.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 300px;
    position: relative;
}

#photo-top-contact {
    background-image: url(img/contact-top.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 300px;
    position: relative;

}

#photo-top-oeno {
    background-image: url(img/nos-vins-top.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 300px;
    position: relative;

}

#photo-top-atelier {
    background-image: url(img/caveau-atelier.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 300px;
    position: relative;

}


.titreH1 {
    position: absolute;
    left: 0;
    bottom: 10%;
    z-index: 998;
    opacity: 0;
}

.contain h1 {
    font-family: "garamond-bold";
    /*    text-transform:uppercase;*/
    color: #222221;
    font-size: 2em;
    animation: translate 10s;
      text-align: center;
}

@keyframes translate {

    /*
    0% {
        transform: translateX(-50px);
        opacity: 0;
    }
    50% {
        transform: translateX(0px);
        opacity: 1;
    }

    100% {
        transform: translateX(0px);
        opacity: 0;
    }
*/
    from {
        opacity: 1;
        transform: translateX(0px);
    }

    to {
        opacity: 0;
        transform: translateX(200px);
    }
}


h1 span {
    display: block;
    text-align: center;
    margin-bottom: 2%;
}

span
{
    color: #aa742c
}

.bg-blanc {
    background-color: rgba(255, 255, 255, 0.5);
    padding: 12px;
}

.al-title-top {
    margin: 30px 0 20px 0;
    width: 100%;

}

.al-title-top h2 {
    font-size: 1.6em;
    font-family: "garamond-bold";
    text-align: center;
    text-transform: uppercase;

}

.ecole-vin {
    font-size: 1.4em!important;
    font-family: "garamond-bold"!important;
    text-align: center!important;
}

h3 {
    font-size: 1.4em;
    font-family: "garamond-bold";
    margin-bottom: 10px;
        text-align: center;
}

.bloc {
    padding: 12px 0 12px 0;

}

.bloc img {
    display: inline-block;
    vertical-align: top;
}

.bloc div {
    display: inline-block;
    vertical-align: top;
    width: 55%;
    margin-left: 30px;
}

.bloc h3 {
    text-align: left;
}

/*-------------------------------------FIN notre-histoire------------------------------------------------*/
.embed360 {
    width: 500px;
    height: 300px;
    margin: 0 auto;
    margin-bottom: 30px;
    margin-top: 20px;
}

/*-------------------------------------nos-vignobles------------------------------------------------*/
#photo-top-vignoble {
    background-image: url(img/vignoble-head.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 300px;
    position: relative;
}

.terroir ul {
    list-style: initial !important;
    padding-left: 25px;
    text-align: left;
}

.terroir {
    font-family: "garamond-reg";
    font-size: 1em;
}

.p-photo {
    text-align: justify;
    width: 70%;
    margin: 0 auto;
}

.part-photo {
    width: 100%;
    text-align: center;
}

.part-photo h3 {
    font-size: 1.8em;
    font-family: "garamond-bold";
    text-align: center;
    border-bottom: 1px solid #222221;
    margin: 0 auto;
    width: 50%;
}

.bloc-photo img {
    margin: 15px;
}

.bloc-photo {
    width: 90%;
    text-align: center;
    margin: 0 auto;
}

#photo-top-photo {
    background-image: url(img/photos.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 300px;
    position: relative;
}

/*-------------------------------------Nos-gammes------------------------------------------------*/
.margTop {
    padding-top: 10px;
}

.aligne {
    display: inline-block;
    vertical-align: top;
    width: 47%;
    margin-left: 17px;
    margin-top: 20px;
}

.margbot {
    vertical-align: top;
    margin-bottom: 17px;
    background-image: url(img/gammes-top.jpg);
    height: 131px;
    margin-top: 0;
}

.margbot1 {
    margin-bottom: 17px;
    background-image: url(img/gammes-01.jpg);
    height: 131px;
    margin-top: 0;
    background-position: right;
    background-repeat: no-repeat;
}

.margbot2 {
    margin-bottom: 17px;
    background-image: url(img/gammes-07.png);
    height: 131px;
    margin-top: 0;
    background-position: right;
    background-repeat: no-repeat;
}

.margbot3 {
    margin-bottom: 17px;
    background-image: url(img/gammes-03.jpg);
    height: 131px;
    margin-top: 0;
    background-position: right;
    background-repeat: no-repeat;
}

.margbot4 {
    margin-bottom: 17px;
    background-image: url(img/gammes-04.jpg);
    height: 131px;
    margin-top: 0;
    background-position: right;
    background-repeat: no-repeat;
}

.margbot5 {
    margin-bottom: 17px;
    background-image: url(img/gammes-05.jpg);
    height: 131px;
    margin-top: 0;
    background-position: right;
    background-repeat: no-repeat;
}

.margbot6 {
    margin-bottom: 17px;
    background-image: url(img/gammes-06.jpg);
    height: 131px;
    margin-top: 0;
    background-position: right;
    background-repeat: no-repeat;
}

.margbot1:hover,
.margbot2:hover,
.margbot3:hover,
.margbot4:hover,
.margbot5:hover,
.margbot6:hover,
.margbot20:hover,
.margbot21:hover {
    -webkit-transform: scale(1.02);
    transform: scale(1.02);
    transition: 0.6s;
}

#fond-gamme {
    background-image: url(img/fond-gamme.jpg);
    padding: 100px;
    font-family: 'garamond-reg';
    font-size: 1.8em;
    font-weight: 700;
}

.cadre-gammes {
    text-align: center;
    margin-bottom: 17px;
    background-color: #fff;
    height: 720px;
    overflow-y: scroll;
    margin-top: 0;

}

.cadre-gammes figure {
    border: 1px solid rgba(190, 190, 190, 0.5);
}

.cadre-gammes figure:hover {
    text-align: center;
    box-shadow: 2px 10px 30px 10px rgba(37, 37, 36, 0.5);
    -moz-box-shadow: 2px 10px 30px 10px rgba(37, 37, 36, 0.5);
    -webkit-box-shadow: 2px 10px 30px 10px rgba(37, 37, 36, 0.5);
    -o-box-shadow: 2px 10px 30px 10px rgba(37, 37, 36, 0.5);
}

.cadre-gammes img {
    text-align: center;
    padding: 5px;
    width: 100%;
}

.cadre-gammes figcaption {
    text-align: center;
    color: #222221;
    position: bottom;
}

.cadre-gammes figcaption h6 {
    font-family: 'garamond-reg';
    font-size: 1em;
    font-weight: 700;
    margin-top: 10px;
}

.choix-gamme {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: center;

}

.choix-gamme a {
    border: 1px solid;
    padding: 1% 3%;
    flex-basis: 1;
    width: 33%;
    font-size: 0.8rem;
}

.choix-gamme a:hover {
    background-color: #24195c;
    color: #fff!important;
}

/* .choix-gamme a:active {
    background-color: #24195c;
    color: #fff!important;
} */

.div-gamme {
    margin: 2% 0%;
}

#parcellaire {
    display: none;
}

#domaine {
    display: none;
}

#cepage {
    display: none;
}

.couleur {
    font-family: 'garamond-it';
}

.titre-gammes-top h3 {
    background-color: rgba(255, 255, 255, 0.5);
    width: 40%;
    padding: 6px;
    margin: 0 auto;
    text-align: center;
    color: #000;

}

.titre-gammes h3 {
    background-color: rgba(255, 255, 255, 0.5);
    width: 40%;
    padding: 6px;
    margin-top: 60px;
    text-align: right;
    color: #000;
    font-size: 1.2em;
}

.marg-h3 h3 {
    margin-top: 38px;
}

.marg-h3-2 h3 {
    margin-top: 15px;
}

.titre-gammes2 {
    padding: 6px;
    margin-top: 65px;
    text-transform: uppercase;
}

.titre-gammes2 h3 {
    text-transform: uppercase;
    color: #ffffff;
    font-size: 1.2em;
}

.bouteille {
    height: 360px;
    width: 25%;
    background-color: #ffffff;
    margin: 7px;
    margin-top: 7px !important;
    display: inline-block;
    vertical-align: top;
}

.fond-ft {
    position: absolute;
    top: 0px;
    background-color: rgba(0, 0, 0, 0.8);
    position: fixed;
    width: 100% !important;
    height: 100%;
    text-align: center;
    z-index: 1000;
    padding-top: 90px;
}

.fond-ft img {
    margin-top: 3%;
    margin-bottom: 20px;
    height: 90%;
}

.fond-ft img:hover {
    cursor: pointer;
}

#infoFT00,
#infoFT01,
#infoFT02,
#infoFT03,
#infoFT04,
#infoFT05,
#infoFT06,
#infoFT07,
#infoFT08,
#infoFT09,
#infoFT10,
#infoFT11,
#infoFT12,
#infoFT13,
#infoFT14,
#infoFT15,
#infoFT16,
#infoFT17,
#infoFT18,
#infoFT19,
#infoFT20,
#infoFT21,
#infoFT22,
#infoFT23,
#infoFT24,
#infoFT25,
#infoFT26,
#infoFT27,
#infoFT28,
#infoFT29,
#infoFT30,
#infoFT31,
#infoFT32,
#infoFT33,
#infoFT34,
#infoFT35,
#infoFT36,
#infoFT37,
#infoFT38,
#infoFT39,
#infoFT40,
#infoFT41,
#infoFT42,
#infoFT43,
#infoFT44,
#infoFT45,
#infoFT46,
#infoFT47,
#infoFT48,
#infoFT49,
#infoFT50,
#infoFT51,
#infoFT52,
#infoFT53,
#infoFT54,
#infoFT55,
#infoFT56,
#infoFT57,
#infoFT58,
#infoFT59,
#infoFT60,
#infoFT61 {
    display: none;
    z-index: 600;
}


/*------------------------------------ou-trouver-nos-vins-----------------------------------------------*/
.margbot20 {
    margin-bottom: 17px;
    /*    background-color: grey;*/
    background-image: url(img/fond-vins-france.jpg);
    height: 425px;
    margin-top: 0;
    background-position: left;
    background-repeat: no-repeat;
}

.margbot21 {
    margin-bottom: 17px;
    /*    background-color: grey;*/
    background-image: url(img/fond-vins-etranger.jpg);
    height: 425px;
    margin-top: 0;
    background-position: right;
    background-repeat: no-repeat;
}

.margbot01 {
    vertical-align: top;
    margin-bottom: 17px;
    background-image: url(img/nos-vins-top.jpg);
    height: 131px;
    margin-top: 0;
}

.margbot02 {
    vertical-align: top;
    margin-bottom: 17px;
    background-image: url(img/nos-vins-top-france.jpg);
    height: 131px;
    margin-top: 0;
}

.margbot03 {
    vertical-align: top;
    margin-bottom: 17px;
    background-image: url(img/nos-vins-top-etranger.jpg);
    height: 131px;
    margin-top: 0;
}

.cadre-gammes li {
    font-size: 1.4em;
    font-family: 'garamond-bold';
    text-align: left;
    list-style: none;
    padding: 5px 0;
}

.cadre-gammes a {
    text-decoration: none;
    color: #000;
}

.cadre-gammes a:hover {
    text-decoration: none;
    color: #222221;
}

.cadre-gammes a li:active {
    background-color: #222221;
    color: #fff;
}

#fond-caveau {
    background-image: url(img/fond-caveau.jpg);
    padding: 100px;
    font-family: 'garamond-reg';
    font-size: 1.8em;
    font-weight: 700;
}

.margbot30 {
    margin-bottom: 17px;
    /*    background-color: grey;*/
    background-image: url(img/caveau-oenotourisme.jpg);
    height: 425px;
    margin-top: 0;
    background-position: left;
    background-repeat: no-repeat;
}

.margbot31 {
    margin-bottom: 17px;
    /*    background-color: grey;*/
    background-image: url(img/caveau-atelier.jpg);
    height: 425px;
    margin-top: 0;
    background-position: right;
    background-repeat: no-repeat;
}

.cadre-caveau {
    text-align: center;
    margin-bottom: 17px;
    background-color: #fff;
    height: 720px;
    overflow-y: scroll;
    margin-top: 0;
}

.cadre-caveau img {
    width: 40%;
    padding: 5px;
}

.atelier h3 {
    border-bottom: 1px solid black;
    padding-bottom: 1px;
    font-size: 1.7em;
}

.bloc-atelier {
    padding: 12px 0 20px 0;

}

.bloc-atelier img {
    vertical-align: top;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 500px;
        padding-bottom: 20px;
}

.bloc-atelier div {
    display: inline-block;
    vertical-align: top;
    width: 50%;
    padding: 0 15px;
}

.bloc-atelier h3,
.bloc-atelier h4 {
    text-align: left;
}

/*-------------------------------------Nos-actualités------------------------------------------------*/

.actualites {
    width: 50%;
    margin-top: 15px;
}

.actualites h3 {
    border-bottom: 1px solid black;
    padding-bottom: 1px;
    font-size: 1.7em;
}

.bouton-actu {
    border: 1px solid black;
    border-radius: 7%;
    width: 123px;
    padding: 5px;
    margin-top: 25px !important;
    margin-bottom: 15px !important;
    margin-left: 0;
    display: block;
    margin: 0 auto;
    color: #000;
    text-align: center;
}

.bouton-actu:hover {
    -webkit-transform: scale(1.02);
    transform: scale(1.02);
    transition: 0.3s;
    color:black
}

.modal.fade.show{
    z-index: 10000;
}

.btn.btn-primary {
    border: 1px solid black;
    border-radius: 7%;
    width: 123px;
    padding: 5px;
    margin-top: 25px !important;
    margin-bottom: 15px !important;
    margin-left: 0;
    display: block;
    margin: 0 auto;
    color: #000;
    text-align: center;
    background-color: transparent;
}

.modal-dialog {
    max-width: 800px !important;
    margin: 1.75rem auto;
}

.btn.btn-primary:hover {
    -webkit-transform: scale(1.02);
    transform: scale(1.02);
    transition: 0.3s;
    color:white;
    background-color: black;
    border-color: black;
}

.btn-primary:focus{
    box-shadow: 0 0 0 .2rem rgba(6, 6, 6, 0.5)
}

.actualites h4 {
    font-size: 1.1em;
    font-family: "garamond-bold";
    margin-bottom: 10px;
    text-align: left;
}

/*--------------------------------------formulaireDeContact---------------------------------*/
.center_contact {
    text-align: left;
    margin: 0 auto;
    width: 50%;
}

.center_espace {
    text-align: left;
    margin: 0 auto;
    width: 50%;
    margin-bottom: 200px;
}

.center_espace input {
    padding: 5px;
    margin: 10px;
}

#al-formulaire,
.btn {
    font-size: 1em;
    font-family: 'garamond-reg';
}

.typo_champs {
    font-size: 0.8em;
    text-align: left;
    font-family: 'garamond-it';
}

input,
textarea {
    width: 100%;
}

.btn {
    padding: 8px 0;
}

.hvr-grow {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}

.hvr-grow:hover,
.hvr-grow:focus,
.hvr-grow:active {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.bloc-note {
    background-image: url(img/robert-parker.jpg);
    width: 20%;
    height: 300px;
    display: inline-block;
}

.bloc-revue-de-presse {
    border-left: 3px solid #222221;
    padding-left: 20px;
    width: 30%;
    display: inline-block;
    vertical-align: top;
}

.bloc-revue-de-presse h4 {
    font-family: 'garamond-it';
    font-size: 1.2em;
}

.bloc2 {
    padding: 12px 0 12px 0;
}

.number {
    font-size: 3em;
    font-weight: 700;
    text-align: right;
    padding-right: 10px;
    width: 10%;
    display: inline-block;
    vertical-align: top;
}

.btn-version-mob {
    display: none;
}


#map {
    width: 100%;
    height: 900px;
    background-image: url(img/CARTE-ARNOUX.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

.mentions {
    width: 80%;
    margin: 0 auto;
    text-align: left;
    margin-bottom: 40px;
}

.mentions h4 {
    margin-top: 30px;
    margin-bottom: 5px;
    font-size: 1.2em;
    font-family: 'garamond-bold'
}

.mentions p {
    color: #222221;
}

.mail-link-o a {
    color: #222221;
}

/*-
/*----------------------------------------reponsive---PC------------------------------------*/
@media screen and (min-width: 1601px) and (max-width: 1850px) {
    .pad_top_menu {
        padding-top: 40px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .titre-gammes h3,
    .titre-gammes-top h3 {
        font-size: 1em;
        width: 25%;
    }

    .bouteille {
        height: 300px;
        width: 25%;
    }

    #menu-desk li {
        font-size: 1em;
    }

    .gamme {
        width: 98.1%;
    }

    #second-view h1 {
        margin-top: 100px;
    }

    #second-view article {
        margin-top: 280px !important;
    }
}

/*---------------------------------------------------------------------*/
@media screen and (min-width: 1470px) and (max-width: 1600px) {
    .pad_top_menu {
        padding-top: 40px;
        padding-left: 15px;
        padding-right: 15px;
    }

    .carte {
        width: 13.5%;
    }

    .trouver {
        height: 192px;
        width: 39.5%;
    }

    .histoire h2 {
        margin-top: 5%;
        font-size: 2.5em;
    }

    #menu-desk li {
        font-size: 1em;
    }

    .carte {
        width: 15%;
    }

    .philo {
        width: 13.9%;
    }

    .video {
        width: 35%;
    }

    .trouver {
        width: 30.1%;
    }

    #second-view h1 {
        margin-top: 100px;
    }

    #second-view article {
        margin-top: 280px !important;
    }
}

/*---------------------------------------------------------------------*/
@media screen and (min-width: 1370px) and (max-width: 1469px) {
    .pad_top_menu {
        padding-top: 30px;
        padding-left: 10px;
        padding-right: 10px;
    }

    #menu-desk li {
        font-size: 1em;
    }

    .histoire {
        width: 31.5%;
    }

    .titrehist {
        width: 80%;
    }

    .carte {
        width: 17%;
    }

    .gamme {
        width: 97.4%;
    }

    .video {
        width: 33.8%;
    }

    #second-view h1 {
        margin-top: 100px;
    }
}

@media screen and (min-width: 1280px) and (max-width: 1369px) {
    .pad_top_menu {
        padding-top: 30px;
        padding-left: 8px;
        padding-right: 8px;
    }

    #menu-desk li {
        font-size: 1em;
    }

    .histoire {
        width: 31.5%;
    }

    .titrehist {
        width: 80%;
    }

    .carte {
        width: 17%;
    }

    .gamme {
        width: 97.4%;
    }

    .video {
        width: 33.8%;
    }

    #second-view h1 {
        margin-top: 90px;
    }

    #second-view article {
        margin-top: 280px !important;
    }
}

/*---------------------------------------------------------------------*/
/*----------------------------------------reponsive----TABLETTE-----------------------------------*/

@media screen and (min-width: 1024px) and (max-width: 1279px) {
    #menu-desk {
        width: 100%;
    }

    .contain {
        width: 100%;
    }

    #menu-desk li {
        height: 75px;
    }

    #menu-desk li img {
        height: 80px;
    }

    .pad_top_menu {
        padding-top: 30px;
        padding-left: 15px;
        padding-right: 15px;
    }

    #menu-desk li {
        font-size: 1em;
    }

    .histoire {
        width: 27%;
    }

    .part2 {
        width: 27%;
    }

    .titrehist {
        width: 100%;
    }

    .carte {
        width: 22%;
    }

    .gamme {
        width: 96.5%;
    }

    .video {
        width: 32%;
    }

    .titrehist h2 {
        margin-top: 20px;
    }

    .titrehist h2,
    .cepages h2,
    .savoirfaire h2,
    .philo h2 {
        font-size: 2.3em;
    }

    .titregamme h2 {
        font-size: 1em;
    }

    .titreactu h2 {
        font-size: 0.8em;
        margin-top: -20px;
    }

    .trouver h2 {
        font-size: 0.8em;
    }

    .titrevideo {
        width: 80%;
    }

    .titregamme {
        width: 50%;
    }

    .philo h2 {
        margin-top: 400px;
    }

    .savoirfaire {
        background-position: 30% 75%;
    }

    #second-view h1 {
        margin-top: 90px;
    }

    #first-view {
        padding: 10%;
    }

    #first-view img {
        width: 30%;
    }

    #second-view article {
        margin-top: 280px !important;
    }
}

/*---------------------------------------------------------------------*/
@media screen and (min-width: 910px) and (max-width: 1023px) {
    #menu-desk {
        width: 100%;
    }

    #menu-gen-pc {
        margin-top: 0px;
    }

    .contain {
        width: 100%;
    }

    .pad_top_menu {
        padding-top: 30px;
        padding-left: 10px;
        padding-right: 10px;
    }

    header {
        width: 100%;
        height: 30px;
    }

    header img {
        height: 20px;
    }

    .histoire {
        width: 48%;
        height: 400px;
        margin: 17px;
    }

    .part2 {
        width: 47%;
        height: 417px;
        margin-top: 17px;
    }

    .cepages {
        height: 193px;
    }

    .cepages h2 {
        margin-top: 135px;
        font-size: 2.4em;
    }

    .savoirfaire {
        height: 190px;
    }

    .savoirfaire h2 {
        margin-top: 135px;
        font-size: 2.4em;
    }

    .carte {
        margin-top: 0px;
        width: 46%;
    }

    .philo {
        margin-top: 0px;
        width: 22%;
    }

    .gamme {
        width: 42.1%;
        display: inline-block;
        margin-top: 0px;
        height: 485px;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .titregamme {
        width: 100%;
    }

    .video {
        width: 28%;
    }

    .titrevideo {
        width: 80%;
    }

    .actu {
        width: 32.5%;
    }

    .titreactu h2 {
        font-size: 1em;
        margin-top: -40px;
    }

    .trouver {
        width: 31.5%;
    }

    #menu-desk li {
        font-size: 0.95em;
    }

    .bloc {
        padding: 12px 0 12px 0;

    }

    .bloc img {
        display: inline-block;
        vertical-align: top;
        width: 49%;
    }

    .bloc div {
        display: inline-block;
        vertical-align: top;
        width: 55%;
        margin-top: 20px;
        margin-bottom: 30px;
    }

    .bloc h3 {
        text-align: center;
    }

    #second-view h1 {
        margin-top: 90px;
    }

    #first-view {
        padding: 10%;
    }

    #first-view img {
        width: 30%;
    }

    #second-view article {
        margin-top: 280px !important;
    }
}

/*---------------------------------------------------------------------*/
@media screen and (min-width: 910px) and (max-width: 961px) {
    .histoire {
        width: 48%;
        height: 400px;
        margin: 17px;
    }

    .titrehist {
        width: 90%;
    }

    .part2 {
        width: 46.5%;
        height: 417px;
        margin-top: 17px;
    }

    .cepages {
        height: 193px;
    }

    .cepages h2 {
        margin-top: 135px;
        font-size: 2.4em;
    }

    .savoirfaire {
        height: 190px;
    }

    .savoirfaire h2 {
        margin-top: 135px;
        font-size: 2.4em;
    }

    .carte {
        margin-top: 0px;
        width: 28%;
    }

    .philo {
        margin-top: 0px;
        width: 22%;
    }

    .gamme {
        width: 41.6%;
        display: inline-block;
        margin-top: 0px;
        height: 485px;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .titregamme {
        width: 100%;
    }

    .video {
        width: 28%;
    }

    .titrevideo {
        width: 80%;
    }

    .actu {
        width: 32.5%;
    }

    .titreactu h2 {
        font-size: 1em;
        margin-top: -40px;
    }

    .trouver {
        width: 31.5%;
    }

    #second-view h1 {
        margin-top: 90px;
    }

    #first-view {
        padding: 10%;
    }

    #first-view img {
        width: 30%;
    }

    #second-view article {
        margin-top: 280px !important;
    }
}

/*---------------------------------------------------------------------*/
@media screen and (min-width: 800px) and (max-width: 909px) {
    #menu-desk {
        width: 100%;
    }

    .contain {
        width: 100%;
    }

    .pad_top_menu {
        padding-top: 30px;
        padding-left: 8px;
        padding-right: 8px;
    }

    #menu-desk li img {
        height: 70px;
    }

    #menu-desk li {
        height: 90px;
    }

    #menu-desk li {
        font-size: 0.9em;
    }

    #menu-desk a {
        height: 90px;
    }

    .contain {
        margin-top: 50px;
    }

    .bloc {
        padding: 12px 0 12px 0;
        margin: 0 auto;

    }

    .bloc img {
        display: inline-block;
        vertical-align: top;
        width: 49%;
    }

    .bloc div {
        display: inline-block;
        vertical-align: top;
        width: 55%;
        margin-top: 20px;
        margin-bottom: 30px;
    }

    .bloc h3 {
        text-align: center;
    }

    .histoire {
        width: 47%;
        height: 400px;
        margin: 17px;
    }

    .titrehist {
        width: 90%;
    }

    .part2 {
        width: 47%;
        height: 417px;
        margin-top: 17px;
    }

    .cepages {
        height: 193px;
    }

    .cepages h2 {
        margin-top: 135px;
        font-size: 2.4em;
    }

    .savoirfaire {
        height: 190px;
    }

    .savoirfaire h2 {
        margin-top: 135px;
        font-size: 2.4em;
    }

    .carte {
        margin-top: 0px;
        width: 28%;
    }

    .philo {
        margin-top: 0px;
        width: 22%;
    }

    .philo h2 {
        margin-top: 400px;
    }

    .gamme {
        width: 41.1%;
        display: inline-block;
        margin-top: 0px;
        height: 485px;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .titregamme {
        width: 100%;
    }

    .video {
        width: 28%;
    }

    .titrevideo {
        width: 80%;
    }

    .actu {
        width: 31.5%;
    }

    .titreactu h2 {
        font-size: 1em;
        margin-top: -40px;
    }

    .trouver {
        width: 31.5%;
    }

    #second-view h1 {
        margin-top: 90px;
    }

    #second-view {
        background-position: top;
    }

    #first-view {
        padding: 15%;
    }

    #first-view img {
        width: 50%;
    }

    #second-view article {
        margin-top: 280px !important;
    }
}

/*---------------------------------------------------------------------*/
@media screen and (min-width: 844px) and (max-width: 853px) {
    .histoire {
        width: 47%;
        height: 400px;
        margin: 17px;
    }

    .titrehist {
        width: 90%;
    }

    .part2 {
        width: 47%;
        height: 417px;
        margin-top: 17px;
    }

    .cepages {
        height: 193px;
    }

    .cepages h2 {
        margin-top: 135px;
        font-size: 2.4em;
    }

    .savoirfaire {
        height: 190px;
    }

    .savoirfaire h2 {
        margin-top: 135px;
        font-size: 2.4em;
    }

    .carte {
        margin-top: 0px;
        width: 28%;
    }

    .philo {
        margin-top: 0px;
        width: 22%;
    }

    .philo h2 {
        margin-top: 400px;
    }

    .gamme {
        width: 41%;
        display: inline-block;
        margin-top: 0px;
        height: 485px;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .titregamme {
        width: 100%;
    }

    .video {
        width: 28%;
    }

    .titrevideo {
        width: 80%;
    }

    .actu {
        width: 31.5%;
    }

    .titreactu h2 {
        font-size: 1em;
        margin-top: -40px;
    }

    .trouver {
        width: 31.5%;
    }

    #second-view h1 {
        margin-top: 80px;
    }

    #second-view {
        background-position: top;
    }

    #first-view {
        padding: 15%;
    }

    #first-view img {
        width: 50%;
    }

    .fixe {
        overflow-y: auto;
    }

    #second-view article {
        margin-top: 280px !important;
    }
}

/*---------------------------------------------------------------------*/
@media screen and (min-width: 800px) and (max-width: 843px) {
    .histoire {
        width: 47%;
        height: 400px;
        margin: 17px;
    }

    .titrehist {
        width: 90%;
    }

    .part2 {
        width: 46.3%;
        height: 417px;
        margin-top: 17px;
    }

    .cepages {
        height: 193px;
    }

    .cepages h2 {
        margin-top: 135px;
        font-size: 2.4em;
    }

    .savoirfaire {
        height: 190px;
    }

    .savoirfaire h2 {
        margin-top: 135px;
        font-size: 2.4em;
    }

    .carte {
        margin-top: 0px;
        width: 28%;
    }

    .philo {
        margin-top: 0px;
        width: 22%;
    }

    .philo h2 {
        margin-top: 400px;
    }

    .gamme {
        width: 40.2%;
        display: inline-block;
        margin-top: 0px;
        height: 485px;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .titregamme {
        width: 100%;
    }

    .video {
        width: 28%;
    }

    .titrevideo {
        width: 80%;
    }

    .actu {
        width: 30.8%;
    }

    .titreactu h2 {
        font-size: 1em;
        margin-top: -40px;
    }

    .trouver {
        width: 31.5%;
    }

    #second-view h1 {
        margin-top: 80px;
    }

    #second-view {
        background-position: top;
    }

    #first-view {
        padding: 15%;
    }

    #first-view img {
        width: 50%;
    }

    .fixe {
        overflow-y: auto;
        height: 100%;
    }

    #second-view article {
        margin-top: 280px !important;
    }
}

/*---------------------------------------------------------------------*/
@media screen and (min-width: 500px) and (max-width: 799px) {
    nav {
        position: relative;
    }

    .contain {
        margin-top: 0px;
    }

    .bloc h3 {
        margin-top: 17px;
    }

    #barre-header {
        height: 35px;
    }

    #barre-header a {
        margin-right: 10px;
    }

    #menu-desk {
        display: none;
    }

    .contain {
        width: 100%;
    }

    #menu-desk-mobile {
        display: block;
    }

    #menu-gen-pc {
        display: none;
    }

    #menu {
        display: block;
        margin: 10px;
        font-size: 1.5em;
    }

    #menu-gen-mobile {
        display: block;
        margin-top: 0px;
        margin-left: 0px;
        height: 400px;
        z-index: 9999;
        position: absolute;
        text-align: left;
        width: 280px;
        margin-left: -400px;
        opacity: 0;
        transition: 0.6s;
        box-shadow: 2px 2px 2px 2px rgba(37, 37, 36, 0.5);
        -moz-box-shadow: 2px 2px 2px 2px rgba(37, 37, 36, 0.5);
        -webkit-box-shadow: 2px 2px 2px 2px rgba(37, 37, 36, 0.5);
        -o-box-shadow: 2px 2px 2px 2px rgba(37, 37, 36, 0.5);
    }

    #menu-desk-mobile {
        text-align: left;
        position: relative;
    }

    .img-logo {
        margin-bottom: 50px;
    }

    #menu-desk-mobile li {
        width: 100%;
        height: 35px;
        color: #222221;
        font-size: 1.2em;
        background-color: white;
    }

    /*    #menu-desk-mobile a:hover {
        border-bottom: 10px solid #222221;
        border-left: 1px solid #222221;
        border-right: 1px solid #222221;
        transition: 0.4s;
        background-color: white;
        color: #222221;
    }*/
    #menu-desk-mobile li:hover {
        border-bottom: 1px solid #222221;
        border-top: 1px solid #222221;
        border-right: 10px solid #222221;
        transition: 0.4s;
        background-color: white;
        color: #222221;
        padding: -2px;
    }

    #fermer {
        font-size: 1.5em;
        color: #fff;
        height: 35px;
        background-color: #222221;
        position: absolute;
        top: 0;
        margin-left: 280px;
        padding: 4px 10px 7px 10px;

    }

    /*    #menu-desk-mobile a {
        text-decoration: none;
        font-family: "garamond-reg";
        height: 40px;
        transition: 0.6s;
        border-bottom: 10px solid transparent;
        border-bottom: 0px solid #222221;
        border-left: 1px solid transparent;
        border-right: 1px solid transparent;
        margin-top: 10px;
    }
*/
    #menu-desk-mobile li img {
        height: 80px;
    }

    .pad_top_menu {
        padding-top: 10px;
        padding-right: 0;
        padding-left: 15px;
    }

    .bouteille {
        height: 350px;
        width: 40%;
    }

    .histoire {
        width: 46%;
        height: 400px;
        margin: 17px;
    }

    .titrehist {
        width: 90%;
    }

    .part2 {
        width: 47%;
        height: 417px;
        margin-top: 17px;
    }

    .cepages {
        height: 193px;
    }

    .cepages h2 {
        margin-top: 135px;
        font-size: 2.4em;
    }

    .savoirfaire {
        height: 190px;
    }

    .savoirfaire h2 {
        margin-top: 135px;
        font-size: 2.4em;
    }

    .carte {
        margin-top: 0px;
        width: 46%;
    }

    .philo {
        margin-top: 0px;
        width: 46%;
    }

    .philo h2 {
        font-size: 2.2em;
    }

    .gamme {
        width: 92%;
        display: inline-block;
        margin-top: 20px;
        height: 485px;
    }

    .boutique-2 {
        width: 92%;
        display: inline-block;
        margin-top: 20px;
        height: 485px;
        margin-left: 6px;
        background-position-y: 0px;
    }

    .titregamme {
        width: 100%;
    }

    .video {
        width: 28%;
    }

    .titrevideo {
        width: 80%;
    }

    .actu {
        width: 30.5%;
    }

    .titreactu h2 {
        font-size: 1em;
        margin-top: -40px;
    }

    .trouver {
        width: 31.5%;
    }

    .titretrouver {
        font-size: 2.8em;
    }

    #second-view h1 {
        margin-top: 80px;
    }

    #second-view {
        background-position: top;
    }

    #first-view {
        padding: 15%;
    }

    #first-view img {
        width: 50%;
    }

    .fixe {
        overflow-y: auto;
        height: 100%;
    }

    #second-view article {
        margin-top: 280px !important;
    }

    #langues {
        margin-top: 100px;
    }
}

/*---------------------------------------------------------------------*/
@media screen and (min-width: 675px) and (max-width: 759px) {
    .histoire {
        width: 46%;
        height: 400px;
        margin: 17px;
    }

    .titrehist {
        width: 90%;
    }

    .part2 {
        width: 47%;
        height: 417px;
        margin-top: 17px;
    }

    .cepages {
        height: 193px;
    }

    .cepages h2 {
        margin-top: 135px;
        font-size: 2.4em;
    }

    .savoirfaire {
        height: 190px;
    }

    .savoirfaire h2 {
        margin-top: 135px;
        font-size: 2.4em;
    }

    .carte {
        margin-top: 0px;
        width: 51%;
    }

    .philo {
        margin-top: 0px;
        width: 41%;
        background-repeat: no-repeat;
        background-image: linear-gradient(to bottom, transparent 63%, #222221 84%), url(img/caveau-accueil-2.jpg);
        background-size: cover;
    }

    .philo h2 {
        font-size: 2.2em;
    }

    .gamme {
        width: 95%;
        display: inline-block;
        margin-top: 15px;
        height: 205px;
    }

    .titregamme {
        width: 100%;
    }

    .video {
        width: 28%;
    }

    .titrevideo {
        width: 80%;
    }

    .actu {
        width: 30.5%;
    }

    .titreactu h2 {
        font-size: 0.8em;
        margin-top: -40px;
    }

    .trouver {
        width: 30.8%;
    }

    .titretrouver {
        font-size: 2.4em;
    }

    .btn-version-mob {
        display: block;
    }

    #second-view h1 {
        margin-top: 80px;
    }

    #second-view {
        background-position: top;
    }

    #first-view {
        padding: 15%;
    }

    #first-view img {
        width: 50%;
    }

    .fixe {
        overflow-y: auto;
        height: 100%;
    }

    #second-view article {
        margin-top: 280px !important;
    }

    #langues {
        margin-top: 100px;
    }

}

/*---------------------------------------------------------------------*/
@media screen and (min-width: 500px) and (max-width: 675px) {
    .histoire {
        width: 45%;
        height: 400px;
        margin: 17px;
    }

    .titrehist {
        width: 100%;
        height: 100px;
    }

    .titrehist h2 {
        font-size: 2.2em;
    }

    .titrehist img {
        height: 100px;
    }

    .part2 {
        width: 45.5%;
        height: 417px;
        margin-top: 17px;
    }

    .cepages {
        height: 193px;
    }

    .cepages h2 {
        margin-top: 135px;
        font-size: 2.2em;
    }

    .savoirfaire {
        height: 190px;
    }

    .savoirfaire h2 {
        margin-top: 135px;
        font-size: 2em;
    }

    .carte {
        margin-top: 0px;
        width: 49.8%;
    }

    .philo {
        margin-top: 0px;
        width: 40%;
        background-repeat: no-repeat;
        background-image: linear-gradient(to bottom, transparent 63%, #222221 84%), url(img/caveau-accueil-2.jpg);
        background-size: cover;
    }

    .philo h2 {
        font-size: 2.2em;
    }

    .gamme {
        width: 93.5%;
        display: inline-block;
        margin-top: 15px;
        height: 205px;
    }

    .titregamme {
        width: 100%;
    }

    .video {
        width: 45%;
    }

    .titrevideo {
        width: 80%;
    }

    .actu {
        width: 45%;
    }

    .titreactu h2 {
        font-size: 0.8em;
        margin-top: -40px;
    }

    .trouver {
        width: 94%;
    }

    .titretrouver {
        font-size: 2.4em;
    }

    .margbot30,
    .margbot31,
    .margbot20,
    .margbot21 {
        height: 150px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }

    .margbot01,
    .margbot {
        display: none;
    }

    .cadre-gammes {
        height: 200px;
    }

    #fond-caveau,
    #fond-gamme {
        font-size: 1em;
        padding: 30px;
    }

    .cadre-caveau,
    .cadre-gammes {
        overflow-y: auto;
        height: 100%;
    }

    .cadre-caveau img {
        width: 100%;
    }

    .bloc-atelier div {
        width: 98%;
        margin: 0 auto;
    }

    .p-photo {
        text-align: center;
        width: 98%;
        margin: 0 auto;
    }

    .part-photo h3 {
        width: 98%;
        margin: 0 auto;
    }

    .bloc-photo {
        width: 98%;
        text-align: center;
    }

    .bloc-photo img {
        margin: 5px 0 0 0;
    }

    .al-title-top {
        margin: 10px 0 20px 0;
    }

    .bouteille {
        height: 340px;
        width: 40%;
    }

    .disparition {
        display: none;
    }

    .center_contact {
        width: 98%;
        margin: 0 auto;
    }

    .aligne {
        display: inline-block;
        vertical-align: top;
        width: 100%;
        margin-left: 0px;
        margin-top: 20px;
        margin: 0 auto;
    }

    .bouteille {
        height: 320px;
        width: 20%;
    }

    .bloc-atelier img {
        width: 40%;
        display: inline-block;
    }

    .bloc-atelier div {
        width: 50%;
        display: inline-block;
    }

    .btn-version-mob {
        display: block;
    }

    #second-view h1 {
        margin-top: 60px;
        font-size: 3.1em;
    }

    #second-view h2 {
        font-size: 1.3em;
    }

    #second-view {
        background-position: top;
    }

    #first-view {
        padding: 15%;
    }

    #first-view img {
        width: 50%;
    }

    .fixe {
        overflow-y: auto;
        height: 100%;
    }

    #second-view article {
        margin-top: 280px !important;
    }

    #langues {
        margin-top: 100px;
    }
}

/*----------------------------------------reponsive---MOBILE---------------------------------*/
@media screen and (min-width: 0px) and (max-width: 499px) {

    /*#first-view{padding: 17% 0 35% 0;}
    #first-view h1{font-size: 1.5em;}
    #first-view img{width: 80%;}*/
    .titrehist img {
        height: 100px;
        padding-bottom: 20px;
    }

    .histoire {
        display: block;
        width: 95%;
        height: 250px;
        margin: 8px;
        background-position: 50% 40%;
    }

    .titrehist {
        width: 100%;
        height: 80px;
    }

    .titrehist h2 {
        font-size: 2em;
    }

    .part2 {
        width: 95%;
        height: 100%;
        margin: 0 8px;
    }

    .cepages {
        height: 193px;
    }

    .cepages h2 {
        font-size: 2.2em;
        margin-top: 135px;
    }

    .savoirfaire {
        height: 190px;
        margin-top: 8px;
    }

    .savoirfaire h2 {
        font-size: 2.2em;
        margin-top: 135px;
    }

    .carte {
        margin: 8px;
        width: 95%;
        height: 250px;
        background-position: 25% 25%;
        background-image: linear-gradient(to top, transparent 63%, #222221 84%), url(img/philosophie.jpg)
    }

    .carte h2 {
        font-size: 2em;
        margin-left: 15px;
    }

    .philo {
        margin: 0 8px;
        width: 95%;
        height: 250px;
        background-image: linear-gradient(to bottom, transparent 63%, #222221 84%), url(img/caveau-accueil-2.jpg);
        background-position: center;
    }

    .philo h2 {
        font-size: 2.4em;
        margin-top: 200px;
    }

    .gamme {
        width: 95%;
        margin: 8px;
        height: 200px;
    }

    .boutique-2 {
        width: 90%;
        margin: 8px;
        height: 200px;
        background-position-y: 0px;
    }

    .titregamme {
        width: 100%;
        height: 100px;
    }

    .titregamme h2 {
        font-size: 0.8em;
    }

    .titreboutique h2 {
        font-size: 0.8em;
    }

    .video {
        width: 95%;
        margin: 0 8px;
        height: 150px;
    }

    .video h2 {
        font-size: 0.9em;
    }

    .titrevideo {
        width: 80%;
    }

    .actu {
        width: 95%;
        margin: 8px;
        height: 150px;
    }

    .titreactu h2 {
        margin-top: -60px;
        font-size: 0.8em;
    }

    .trouver {
        width: 95%;
        margin: 0 8px 8px 8px;
        height: 150px;
    }

    .titretrouver h2 {
        font-size: 0.8em;
    }

    #menu-desk-mobile {
        display: block;
    }

    #menu-gen-pc {
        display: none;
    }

    #menu {
        display: block;
        margin: 10px;
        font-size: 1.5em;
    }

    #menu-gen-mobile {
        display: block;
        margin-top: 0px;
        margin-left: 0px;
        height: 430px;
        z-index: 9999;
        position: absolute;
        text-align: left;
        width: 280px;
        margin-left: -400px;
        opacity: 0;
        transition: 0.6s;
        box-shadow: 2px 2px 2px 2px rgba(37, 37, 36, 0.5);
        -moz-box-shadow: 2px 2px 2px 2px rgba(37, 37, 36, 0.5);
        -webkit-box-shadow: 2px 2px 2px 2px rgba(37, 37, 36, 0.5);
        -o-box-shadow: 2px 2px 2px 2px rgba(37, 37, 36, 0.5);
    }

    #menu-desk-mobile {
        text-align: left;
        position: relative;
    }

    .img-logo {
        margin-bottom: 50px;
    }

    .img-logo img {
        width: 100px;
        margin-left: 15px;
    }

    #menu-desk-mobile li {
        width: 100%;
        height: 35px;
        color: #222221;
        font-size: 1.2em;
        background-color: white;
    }

    /*    #menu-desk-mobile a:hover {
        border-bottom: 10px solid #222221;
        border-left: 1px solid #222221;
        border-right: 1px solid #222221;
        transition: 0.4s;
        background-color: white;
        color: #222221;
    }*/
    #menu-desk-mobile li:hover {
        border-bottom: 1px solid #222221;
        border-top: 1px solid #222221;
        border-right: 10px solid #222221;
        transition: 0.4s;
        background-color: white;
        color: #222221;
        padding: -2px;
    }

    #fermer {
        font-size: 1.5em;
        color: #fff;
        height: 35px;
        background-color: #222221;
        position: absolute;
        top: 0;
        margin-left: 280px;
        padding: 4px 10px 7px 10px;

    }

    .contain {
        width: 100%;
        margin-top: 0px;
    }

    .bloc img {
        width: 100%;
        margin: 0 auto;
    }

    .bloc div {
        width: 100%;
        margin: 0 auto;
    }

    .bloc h3 {
        margin-top: 15px;
    }

    h3 {
        margin-bottom: 5px;
    }

    #menu {
        display: block;
        margin: 10px;
        font-size: 1.5em;
    }

    #barre-header {
        display: none;
    }

    #barre-header-mobile {
        display: block;
    }

    header {
        height: 25px;
    }

    #barre-footer {
        display: none;
    }

    #barre-footer-mobile {
        display: block;
    }

    .pad_top_menu {
        padding-top: 10px;
        padding-right: 0;
        padding-left: 15px;
    }

    .aligne {
        display: inline-block;
        vertical-align: top;
        width: 100%;
        margin-left: 0px;
        margin-top: 20px;
        margin: 0 auto;
    }

    .margbot30,
    .margbot31,
    .margbot20,
    .margbot21 {
        height: 150px;
    }

    .margbot01,
    .margbot {
        display: none;
    }

    .cadre-gammes {
        height: 200px;
    }

    #fond-caveau,
    #fond-gamme {
        font-size: 1em;
        padding: 30px;
    }

    .cadre-caveau,
    .cadre-gammes {
        overflow-y: auto;
        height: 100%;
    }

    .cadre-caveau img {
        width: 100%;
    }

    .bloc-atelier div {
        width: 98%;
        margin: 0 auto;
    }

    .p-photo {
        text-align: center;
        width: 98%;
        margin: 0 auto;
    }

    .part-photo h3 {
        width: 98%;
        margin: 0 auto;
    }

    .bloc-photo {
        width: 98%;
        text-align: center;
    }

    .bloc-photo img {
        margin: 5px 0 0 0;
    }

    .al-title-top {
        margin: 10px 0 20px 0;
    }

    .bouteille {
        height: 340px;
        width: 40%;
    }

    .disparition {
        display: none;
    }

    .center_contact {
        width: 98%;
        margin: 0 auto;
    }

    .contain h1 {
        display: none;
    }

    .btn-version-mob {
        display: block;
    }

    #second-view h1 {
        margin-top: 60px;
        font-size: 2.8em;
        padding: 0 10px;
    }

    #second-view h2 {
        font-size: 1.5em;
        padding: 0 20px;
    }

    #second-view {
        background-position: top;
    }

    #first-view {
        padding: 15%;
    }

    #first-view img {
        width: 70%;
    }

    .fixe {
        overflow-y: auto;
        height: 100%;
    }

    .drapeau a {
        display: block;
        margin: 0 auto;
    }

    #langues {
        margin-top: 80px;
    }

    .fond-ft img {
        margin-top: 3%;
        margin-bottom: 15px;
        width: 90%;
        height: auto;
    }
}

@media screen and (max-width: 320px) {
    .bouteille {
        height: 300px;
        width: 40%;
    }

    #second-view h1 {
        margin-top: 40px;
        font-size: 2.3em;
        padding: 0 10px;
    }

    #second-view h2 {
        font-size: 1.3em;
        padding: 0 20px;
        margin-bottom: 20px;
        margin-top: 10px;
    }

    #second-view {
        background-position: top;
    }

    #first-view {
        padding: 15%;
    }

    #first-view img {
        width: 90%;
    }

    .fixe {
        overflow-y: auto;
        height: 100%;
    }

    #langues {
        margin-top: 80px;
    }
}

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

.cards{
    display: flex;
    flex-direction: column;
    align-items: center;
    }

}

#jean-françois{
    text-align: center;
    font-weight: bold;
    font-size: 1.3em;
}

.atl-oen {
    font-weight: bold;
    font-size: 1.3em;
}

.bouton-actu2 {
    border: 1px solid black;
    border-radius: 7%;
    width: 123px;
    padding: 5px;
    margin-top: 25px !important;
    margin-bottom: 15px !important;
    margin-left: 0;
    display: block;
    margin: 0 auto;
    color: #000;
    text-align: center;
}

.bouton-actu2:hover {
    -webkit-transform: scale(1.02);
    transform: scale(1.02);
    transition: 0.3s;
    color: #aa742c;
    border: 1px solid #aa742c;
}

.txt-1{
    float: left;
    padding-left: 7px
}

.txt-2{
    float: right;
}

.atelier2{
    width: 100%!important;
    padding: 20px 15px 0px 15px!important
}

.atelier3{
    width: 100%!important;
    padding-bottom: 5px!important;
}

.atelier4{
    padding: 0!important
}



/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;

}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-family: "garamond-reg";
    font-size: 24px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  border-bottom: 10px solid #222221;
  border-left: 1px solid #222221;
  border-right: 1px solid #222221;
  transition: 0.4s;
  background-color: white;
  color: #222221;
}

/* Create an active/current tablink class */
.tab button.active {
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border-top: none;
}

video {
    max-width: 400px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-height: 400px;
        padding-bottom: 10px;
}
.contain-caveau {
    width: 100%;
}