@import url("fonts.css");

body {
  font-family: 'Gotham', Sans-serif;
  background-color:#fff;
  /* background-color:#3e3935; */
  color: #212121;
}
body:after {
  content: '';
  display: block;
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  text-align: center;
  border-bottom: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #88744f;
  border-top: 0px solid #88744f;
  border-radius: 100%;
  height: 1.6em;
  width: 1.6em;
  -webkit-animation: spin .6s infinite linear;
  -moz-animation: spin .6s infinite linear;
  -ms-animation: spin .6s infinite linear;
  -o-animation: spin .6s infinite linear;
  animation: spin .6s infinite linear;
  transition: .6s opacity;
  -webkit-transition: .6s opacity;
  opacity: 1;
}
body.loaded:after {
  opacity: 0;
}
strong, b {
  line-height: 1em;
  font-size: 1.1em;
}
p.center {
  text-align: center;
  margin: 0 auto;
}
#ombre { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 3; pointer-events: none;
  background: -moz-linear-gradient(top,  rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 15%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.5)), color-stop(15%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 15%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 15%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 15%); /* IE10+ */
  background: linear-gradient(to bottom,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 15%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
  display: none;

}
header {   position: fixed;  top: 0;    left: 0;  right: 0;  text-align: center;z-index: 1;
  width: 38vh; margin: auto; }
header img {   height: 16vh;   margin: 0 2vh 2vh 2vh;}


.background {
  background-size: cover;
  background-position: 50% 25%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.background.mp4 video
{
  position: absolute;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -1000;
  overflow: hidden;
  right: 0; bottom: 0;
  min-width: 100%; min-height: 100%;
  background-size: cover;
  background-color: #fff !important;
  right: 0;
  bottom: 0;
  opacity: .8;
  -webkit-background-size:cover;
  -moz-background-size:cover;
  -o-background-size:cover;
  background-size:cover;
}

.background.no-mp4 {
  background-image: url(../../../ups/htm/ind3x.jpg);
}
section { position: fixed; top: 0; right: 0; bottom: 0; left: 0; height: 100vh; background-position: 50%; background-size: cover;
}


a { color: #212121; text-decoration: none;}
a:hover {text-decoration: underline;}
p, blockquote {  margin: .5em 0 ;
  max-width: 37em; line-height: 1.4; font-size: .8em; text-align: justify;  letter-spacing: -.02em;}
blockquote { position: absolute; margin-left: 37.5em; color: #fff; }
h2,h3 { font-family: 'Libre Baskerville', Sans-serif; font-style: italic; text-transform: uppercase; background-color: rgba(136,116,79,0.75); color: #fff;
font-size: 1.4vw; text-align: center;
width: 16em;
padding: .5em; letter-spacing: 0.1vw; position: absolute; margin-top: -4em; left: -3.5em; }
h2 { position: relative; margin: 0 auto;}
h3 { bottom: 100%;}

article h3 img { width: 100%; }
h4  {
  font-family: 'Libre Baskerville';
  color: rgb(136, 116, 79);
  font-style: italic;
  font-weight: bold;
  letter-spacing: .05em;
  margin-top: .6em;}
.f { font-size: 1.2em;}
button { background-color: transparent; border: 1px solid #fff; color: #fff; font-style: italic; padding: .6vw 1vw;
  font-family: 'Libre Baskerville';}


  textarea, input[type="date"],input[type="text"] { width: 100%; padding:.6em;  margin-bottom:.6em; font-family: "Gotham"; }
  textarea, input[type="text"], input[type="date"],input[type="submit"] { border: 1px solid #212121; background: #fff; }
  .qt.erreur, textarea.erreur, input[type="text"].erreur, input[type="date"].erreur,input[type="number"].erreur,input[type="submit"].erreur { border: 1px solid #cc0000; background: #fff; }
  input[type="submit"] { font-size: 1.5em;   padding: .6vw 3vw; font-style:italic; font-family: "Libre Baskerville"; cursor: pointer; }

  input[type="number"] { width: 100%; padding:.6em; font-family: "Gotham";
  width: 4em;
   border: 1px solid #212121; background: #fff; }
.mfp-arrow {
  position: fixed;}

nav { font-family: 'Libre Baskerville', Sans-serif; position: fixed; right: 0; left:0; bottom: 2em;

height: 3.65vw; background-color: rgba(255,255,255,0.85); text-transform: uppercase; z-index: 3; }

nav a { color: #88744f; text-decoration: none; }
nav menu { position: relative;
  text-align: center; }
nav menu li { display: inline-block; text-align:center;
font-size: .85vw;
padding: 1.6em;}
nav menu li.active a { color: #3e3935;}
nav menu li a { font-size: 1em;}
nav menu li:hover a { color: #3e3935; text-decoration: underline; }
nav menu li:hover li a { color: #88744f;  text-decoration: none;}
nav menu li li:hover a { color: #3e3935;}
nav menu > li:last-child {
  text-align: center;
  background-color: #3e3935;
  height: 3.65vw;
  right: 0;
  position: absolute;
  top: 0;}
nav menu li:last-child:after { clear: right; }

nav menu > li:last-child a { color: #fff;}
nav menu > li.active:last-child { display: inline-block; text-align:center; background-color:#3e3935; color: #88744f;}
nav menu > li.active:last-child a { color: #88744f;}
nav menu li span:first-letter { font-size: 1.2em; }

nav menu li ul { opacity: 0; height: 0; overflow: hidden; position: absolute;
  bottom: 3.65vw; font-size: 1vw;
  padding: 0; }
nav menu li:hover ul {  opacity: 1; height: auto; padding: 1em 0; }
nav menu li:hover ul li { display: block;
  background-color: rgba(255,255,255,0.85);  }
nav menu li ul li { display: block; font-size: 1vw;  background-color: rgba(255,255,255,0);  }
nav menu li ul li:after { content: ''; display: block; width: 50%; position: absolute; border-bottom: 1px solid #3e3935; left: 25%;
height: 1.7em; }
nav menu li ul li:last-child:after { content: ''; display: none; }
nav menu li ul li a { text-transform: capitalize; font-style: italic; }
nav menu li ul li a .f-letter { font-size: 1em; text-transform: uppercase;}
nav menu li ul:after { content: ''; display: block; position: absolute; bottom:-.98; width: 0;height: 0;border-style: solid;border-width: 0 1em 1em 0;border-color: transparent rgba(255,255,255,0.85) transparent transparent; }


article {margin: 0 11vw;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
article > div {
  background-color: rgba(255,255,255,0.85);
  padding: 1em 1.4em 1.4em 1.4em;
	max-width: 65em;
  margin: 0 auto;
  /*  -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 0;
    -moz-column-gap: 0;
    column-gap: 0;
    */
  }


#index .index-logo img { position: absolute; top: 0; right: 0; left: 0; bottom: 0; margin: auto;
  bottom: 35vh;
  width: 51vw;
  }
  #index .index-unesco img {
    position: absolute;
    left: 2.5vw;
    margin: auto;
    bottom: 7.5vw;
    width: 14em;
    opacity: .92;
    }
#une-histoire-de-famille article{
top: 70%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
#une-histoire-de-famille article > div {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
  -webkit-column-gap: 1.4em;
  -moz-column-gap:  1.4em;
  column-gap:  1.4em;
}

#un-terroir-unique article {
top: 70%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
#un-terroir-unique article > div {
  background-color: rgba(255,255,255,0.85);
  max-width: 33em;
  margin: 0
}
.mfp-figure figure {
  margin: 0;
  max-width: 80vw;
}
#un-terroir-unique article + article { position: absolute; font-family: 'Libre Baskerville'; font-style: italic;
  top: 10vh;
  right: 0;
  width: 32em;
  text-shadow: 1px 1px 2px #000;
}
  #un-terroir-unique article + article > div { position: absolute; background: transparent; color: #fff; font-size: 1.2em; }

.slick-slider { margin-bottom: 0 !important; }

.slick-first .slickPrev { display:none; }
#de-la-vigne-au-vin .slick-prev, #de-la-vigne-au-vin .slick-next {display:none !important;}
.slick-prev, .slick-next { position: absolute;}

.slick-prev:before, .slick-next:before { content: ''; }
.slick-prev, .slick-next, .slickPrev, .slickNext { cursor: pointer; position: absolute; z-index: 1;
  width: 6vh;
  padding: 1vh;
  height: 6vh; display: block; background-color: rgba(136,116,79,0.75); color: #fff;
  font-weight: bold;
  font-size: 3vh;
  font-style: italic;
  bottom: 1em;
  border: 0; }
  .slick-prev ,  .slickPrev {
    left: -1.6em;}
    .slick-next,  .slickNext {
    right: -1.6em; }

.slick-next.slick-disabled,
.slick-prev.slick-disabled {
opacity: 0;
}
#de-la-vigne-au-vin .vinification {
  position: relative;
  top: auto;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);

  height: 100vh;
}
#de-la-vigne-au-vin .vinification {
  background-size: cover;
  background-position: 50%; }

.vinification p img {
  width: 6.4em;
  border-radius: 6.4em;
  height: 6.4em;
  margin: 1em 1em 0 0;
  display: inline-block;object-fit: cover
}
  #de-la-vigne-au-vin .vinification > div {
    padding: 11vw;
    position: absolute;
    bottom: 7em;
    background-color: transparent;
    padding: 0;
    max-width: none;
  }

#de-la-vigne-au-vin .vinification > div > div {
    background-color: rgba(255,255,255,0.85);
    padding: 1em 1.4em 2em 1.4em;
    max-width: 33em;
    /* -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 1.4em;
    -moz-column-gap:  1.4em;
    column-gap:  1.4em;*/
    margin: 0 0;
    position: relative;
  }
  #de-la-vigne-au-vin .vinification h3 {  bottom: 100%; }
  #de-la-vigne-au-vin .vinification h3 img {  width: 100%; }

  #nos-vins-de-champagne article > div:last-child {
  max-width: 50em;
}
  #nos-vins-de-champagne article > div { background-color: transparent;
    padding: 0 1.4em 2.8em 1.4em;
    max-width: 77em; }
  #nos-vins-de-champagne article {
    max-width: 77em;
    margin: 0 auto;
    width: 100%;
    }
#nos-vins-de-champagne h4 {display: inline-block; vertical-align: middle; color: #fff; font-style:normal; text-transform: uppercase; font-size: .8em;
  position: absolute; width: 14vw;
  margin-top: 10vh;
  margin-right: -14vw;
  text-align: right;}
  #nos-vins-de-champagne h4:after {display: block; content:''; height: 1px; width: 100%; background-color: #fff;}
  #nos-vins-de-champagne .impair { text-align: right;}
  #nos-vins-de-champagne .impair h4 {
  position: absolute;
  width: 14vw;
  text-align: left;
  margin-right: 0;
  margin-left: -14vw;
  }
.cuvee {position: relative;

  width: 11.2em; line-height: 1.2em;background: transparent; text-align:center;  display: inline-block; vertical-align: middle; }
.cuvee:after {
  content: '';
  width: 95%;
  height: 20.5vh;
  display: block;
  border: 1px solid #fff;
  position: absolute;
  right: 0;
  bottom: -5vh;
  left: 0;
  margin: auto;
  z-index: 1; }

.cuvee a {
  position: relative;
  z-index: 2;
  width: 100%;
  display: block;}
.cuvee img {
  max-height: 18vh; }
.cuvee span {
  padding: 0 .6em;
  font-size: .8em;
  width: 14em;
  display: block;
  position: absolute;
  line-height: 1.1em;color: #fff; z-index: 2;
  }

.packshot { max-height: 81vh;}
.champagne {
  margin: 1em 1em 0em 0; background:transparent;}

  .champagne .recompense-head img { width: 3em; height: 3em;}
.packshot, .champagne {display: inline-block; vertical-align: middle;}
.champagne form {
  float: right;
  margin-top: -2em;
  font-size: .6em;}
.center {text-align:center;}
.left { text-align: left;}
.left { text-align: left;}
  #map-canvas {
    width: 100vw;
    height: 100vh;}
.champagne h2 {
  width: 12em;
  font-size: 3.5vh;
  left: auto;
  right: auto;
  }
  .champagne h2 img { width: 100%;}
.champagne .slickNext, .champagne .slickPrev {
  background: transparent;
  color: #dddddd;
  font-size: 3em;
  width: 1em;
  height: 2em;
  top: 1.3em;
  outline: none;
  right: 0;
  }
  .champagne .slickNext:hover, .champagne .slickPrev:hover {
    color: #f1f1f1;
  }
  .champagne .slickNext {
    right: 0;}
    .champagne .slickPrev {
      left: 0;}
.champagne .recompense {
  margin: .3em 0;}

#nos-actualites article { display: none; }
#nos-actualites input[type=radio]:checked + article { display: block; }
#nos-actualites input[type=radio] { display: none;}
#nos-actualites  article > div {
  padding: 1em 0;
  max-width: auto;
  height: 30em;
  width: 100%;
  font-size: 1vw;
  max-width: 77em;
}
#nos-actualites  article#article-presse > div {
  padding: 0 0 2em 0;}

#nos-actualites  article:eq(0) { display: none; }
#nos-actualites .tab, #nos-actualites article#article-recompenses > div.tab, #nos-actualites article#article-salons > div.tab {
	padding: 0;
	background: transparent;
	position: absolute;
	bottom: 100%;
	height: 1.65em;
	font-family: 'Libre Baskerville';
	text-transform: uppercase;
	font-style: italic;
	font-size: .8em;
	/* max-height: 1em; */
}
#nos-actualites .tab label {
  padding: .6em 3em;
  margin: 0 .6em;
  background-color: transparent;
  color:  rgba(255,255,255,0.85);
  cursor: pointer;
  border: .16em solid #fff;
  border-bottom: 0;
}
#nos-actualites .tab label.active {
  background-color: rgba(255,255,255,0.85); color:  #212121;
}

#nos-actualites .tab label:first-child { margin-left: 0;}
.date {   font-size: .8em;

    font-family: 'Libre Baskerville';
    font-style: italic;
}
.group {
  font-size: .8em;}
.slick-slide{
 text-align:center;
  padding: 0 5em;}
.article { display: inline-block;margin: 1vw;text-align: center; vertical-align:top;
  line-height: 1.2em; }
#article-presse .article {
	
    max-width: 15em;
    padding: 1em;
    background: #fff;
    box-shadow: 0px 0px 17px #999999;
    margin-bottom: 0.3vw;
    padding-top: 0;}
#article-presse .article-head {
        display: inline-block;
    background-color: #212121;

}
#article-presse .article-head img { width: 12em; height: 12em; }
#article-presse h4 { display: none }
.article-head{
  background-size: contain;
    background-color: #fff;
    background-repeat: no-repeat;
    margin-bottom: .8em;
    background-position: 50%;
    margin-top: 1em;
}
.article-head img {
  width: 12em;
  height: 12em;}

.recompense-container {display: inline-block; position:relative;

  margin-left: 4em;}
.recompense-container h4 {text-align:left;}
.recompense-container:after { content:''; height : 1px; display: block; position: absolute; bottom: .2em;
width: 4em; background-color: #000; }
.recompense {
  display: inline-block;
  min-width: 10em;
  margin: .6em 0 1em 0;}
.recompense p { display: inline-block; vertical-align: middle;
    text-align: left;
    max-width: 14em; }
.recompense p span { text-transform: uppercase; font-weight: bold; }

.recompense-head { display: inline-block; vertical-align: middle; background-size: cover; background-position: 50%;
  background-size: 90%;
  background-repeat: no-repeat;}
.recompense-head img {
    width: 3em;
    height: 3em;}

.salon-container {
  line-height: 2em;
  margin: 2em auto;
  position: relative;
  width: 35em;}
.salon-container:after { content:''; height : 1px; display: block; position: absolute;bottom: -1em; width: 36em; background-color: #000; }

article > div.map {
  background: rgb(62,57,52); /* Old browsers */
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMTAwJSIgeDI9IjEwMCUiIHkyPSIwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzNlMzkzNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM4Mjc0NGUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(45deg,  rgba(62,57,52,1) 50%, rgba(130,116,78,1) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left bottom, right top, color-stop(50%,rgba(62,57,52,1)), color-stop(100%,rgba(130,116,78,1))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(45deg,  rgba(62,57,52,1) 50%,rgba(130,116,78,1) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(45deg,  rgba(62,57,52,1) 50%,rgba(130,116,78,1) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(45deg,  rgba(62,57,52,1) 50%,rgba(130,116,78,1) 100%); /* IE10+ */
  background: linear-gradient(45deg,  rgba(62,57,52,1) 50%,rgba(130,116,78,1) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3e3934', endColorstr='#82744e',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */

  padding: 0;
  max-width: 65em;
  height: 23em;
  overflow: hidden;
 }
 /* #mapsvg { width: 100% !important; max-width: 100% !important; height: 25em !important; max-height: 25em !important;} */

#mapsvg {
  width: 100% !important;
  max-width: 65em !important;}

.contact {
  position: absolute;
  text-align:center;
  right: 10vw;
  padding: 2em;
  background-color: rgba(255,255,255,0.85);
  max-width: 23em;
  z-index: 2;


  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.contact label { display:block;text-align: left; }
.contact p { padding: 0; margin-bottom:1em;}
.contact form {  font-size: .7em;}
#contact-acces article > div {
  background-color: rgba(255,255,255,0.75);
  padding: 1em 0;
  max-width: 34em;
  margin: 0;
  -webkit-column-count: 1;
  -moz-column-count: 1;
  column-count: 1;
  -webkit-column-gap: 0;
  -moz-column-gap: 0;
  column-gap: 0;
}
#contact-acces article > div p { text-align: right; }
#contact-acces article > div strong {
  font-family: 'Libre Baskerville';
  font-style: italic;
  font-weight: normal;
  color: rgba(136,116,79,0.75);
  font-size: 1.2em;
  letter-spacing: .05em;
}
#contact-acces p, #contact-acces img { width: 100%;
  max-width: 40em; margin: 0 auto 1em auto;}

#contact-acces input[type="text"],
#contact-acces select { margin-bottom: 1em;}

#boutique {
  background-color: #3e3935;
}
#boutique h4 {
  margin-top: 2em;
}
#boutique b { font-weight: bold;}
#boutique table { display: inline-block; vertical-align:top;margin-right: 1em; font-size: .8em; }
#boutique table td input { margin-left: .6em; }
#boutique article {  margin: 0 9vw;}
#boutique article > div {
padding: 1.6em 1.4em 1.6em 3em;
}
#boutique .right { text-align: right; }
#boutique article > div  div {display:inline-block; vertical-align:top;	max-width: 40em; padding: 0;}
#erreur { float: left; color: #cc0000;}
#erreur:after { clear: left; display: block; content:'';}

footer { position: fixed; right: 0; bottom: 0; left: 0; font-size: .8em; height: 2em; background: rgba(0,0,0,0.3); color: #fff; text-align: center;
height: 2.5em;
padding: .5em;}
footer a { color: #fff; }
#agelegal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 51;
  background-image: url(../img/index-blur.jpg);
  background-size: cover;
  background-position: 50%;
}
#agelegal > div {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 75vw;
  max-height: 65vh;
  margin: auto;
  text-align:center;
  font-size: 1.2em;
}
#agelegal > div p { text-align:center; margin: 0 auto; max-width: 100%; color: #fff; line-height: 2em; }
#agelegal > div p i { font-style: italic; }
#agelegal img {
  max-width: 17em;
  max-height: 8.5em;
  margin-bottom: 3em;}
#agelegal a { color: #fff;  font-style: italic; font-size: 1.3em;   font-family: 'Libre Baskerville'; text-decoration: none;}
#agelegal a:hover {text-decoration: underline;}
#agelegal button { font-size: 1.3em;   padding: .6vw 3vw; cursor: pointer; margin: .6em 0; }

section { opacity: 0;
  -webkit-transition: opacity 1s ease-in;
  -ms-transition: opacity 1s ease-in;
  transition: opacity 1s ease-in; }
article, #de-la-vigne-au-vin .vinification > div {
  opacity: 0;
  -webkit-transition: opacity .6s ease-in;
  -ms-transition: opacity .6s ease-in;
  transition: opacity .6s ease-in;
  }
.loaded section{opacity:1; }
.animate article, .animate #de-la-vigne-au-vin .vinification.slick-active > div {opacity: 1;}

article > div, #de-la-vigne-au-vin .vinification > div > div{
  -webkit-transform: translateX(5vw);
  -ms-transform: translateX(5vw);
  transform: translateX(5vw);
  -webkit-transition: transform 1s ease-out;
  -ms-transition: transform 1s ease-out;
  transition: transform 1s ease-out;
}
.animate article > div, .animate  #de-la-vigne-au-vin .vinification.slick-active > div > div {
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  }
.animate #nos-vins-de-champagne article > div {
  -webkit-transform: translateX(5vw);
  -ms-transform: translateX(5vw);
  transform: translateX(5vw);
}
#nos-vins-de-champagne article > div {
  -webkit-transform: translateX(5vw);
  -ms-transform: translateX(5vw);
  transform: translateX(5vw);
  -webkit-transition: transform 1s ease-out;
  -ms-transition: transform 1s ease-out;
  transition: transform 1s ease-out;
}
#nos-vins-de-champagne article > div.impair {
  -webkit-transform: translateX(-5vw);
  -ms-transform: translateX(-5vw);
  transform: translateX(-5vw);
}
.contact {
  opacity: 0;
  -webkit-transition: transform 1s ease-out, opacity 1s ease-out;
  -ms-transition: transform 1s ease-out, opacity 1s ease-out;
  transition: transform 1s ease-out, opacity 1s ease-out;
  -webkit-transform: translateY(-50%) translateX(5vw);
  -ms-transform: translateY(-50%) translateX(5vw);
  transform: translateY(-50%) translateX(5vw);
}
.animate .contact {
  opacity: 1;
  -webkit-transform: translateY(-50%) translateX(0);
  -ms-transform: translateY(-50%) translateX(0);
  transform: translateY(-50%) translateX(0);
  }
.animate #nos-vins-de-champagne article > div {

  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
}

nav {
  -webkit-transition: max-height .6s ease;
  -ms-transition: max-height .6s ease;
  transition: max-height .6s ease;}


nav menu li ul {
  -webkit-transition: opacity .3s ease-in;
  -ms-transition: opacity .3s ease-in;
  transition: opacity .3s ease-in; }

  nav menu li a ,section button{
    -webkit-transition: color .3s ease-in, background .3s ease-in;
    -ms-transition: color .3s ease-in, background .3s ease-in;
    transition: color .3s ease-in, background .3s ease-in;}
    section button:hover { color: #fff; background-color: #3e3935}
#agelegal button{ overflow: hidden; position: relative; z-index:1;
  -webkit-transition: color .3s ease-in;
  -ms-transition: color .3s ease-in;
  transition: color .3s ease-in;}
  #agelegal button:before {
  content: '';
  display: block;
  width: 0;
  height: 100%;
  position: absolute;
  background-color: #fff;
  top: 0;
  bottom: 0;
  right: 0;
  width:0;z-index:-1;
  -webkit-transition: width .3s ease;
  -ms-transition: width .3s ease;
  transition: width .3s ease;}

  #agelegal button:hover{ color: #333333 }
  #agelegal button:hover:before {  width: 100%;}
input[type="submit"]{
  background: transparent;
  -webkit-transition: color .3s ease-in, background .3s ease-in;
  -ms-transition: color .3s ease-in, background .3s ease-in;
  transition: color .3s ease-in, background .3s ease-in;}
input[type="submit"]:hover { color: #fff; background-color: #3e3935}

.cuvee:after {
  -webkit-transition: background .3s ease-in;
  -ms-transition: background .3s ease-in;
  transition: background .3s ease-in; }
.cuvee span {
  -webkit-transition: color .3s ease-in;
  -ms-transition: color .3s ease-in;
  transition: color .3s ease-in;
  }
.cuvee:hover span { color: #000; }
.cuvee:hover:after { background-color: rgba(255,255,255,0.85); }
.texte .slickNext {
  display: none;
}
td.smalltd {
    font-size: .8em;
    font-style: italic;
    }
#cuvee-xii .slickPrev,
#cuvee-xii .slickNext {
	top: 0;
}

@media only screen and (min-width: 1680px) {
  #index img {
    width: 860px;
  }
  h2, h3 { font-size: 24px;}
  nav {
    height: 66px;}
  nav menu li {
    padding: 23px;
  }
  nav menu li:last-child {
     height: 66px;
     bottom: 32px;
  }
  nav menu li ul {
    bottom: 65px;
  }
  nav menu li a {
    font-size: 14px;
  }
  nav menu li ul li:after {
    height: 24px;
  }
  .slick-prev, .slick-next, .slickPrev, .slickNext {
    font-size: 29px;
  }
  .champagne h2 {
    max-width: 350px;
    margin-left: 90px;
  }
}
@media only screen and (max-width: 1281px) {

  #un-terroir-unique article + article {
    right: -8em;
  }
  .article-head img {
    width: 10em;
    height: 10em;
  }
  #contact-acces article > div, .contact {
    font-size: .9em;
  }
   .contact textarea, .contact input[type="text"] {
     font-size: 1.2em;
  }
  /*#boutique article { font-size: .8em;}
  #boutique article > div {
    padding: 1em 0;}
    #boutique article > div > div {
      max-width: 38em;
    }
    #boutique table td input {
     font-size: 1em;
    }*/
    #boutique input[type="number"],
    #boutique input[type="text"],
    #boutique input[type="submit"],
    #boutique input[type="date"],
    #boutique  {
       font-size: .8em;
    }
    #boutique {background-color: #fff;}
}

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

  nav:before { content:''; background-color: #3e3935; background-image: url(../img/menu.svg);
  background-size: 1.6em; background-position: 1em 50%; background-repeat: no-repeat; display: block;  height: 2.5em;}

  nav { bottom: 0;
    max-height: 2.5em;
    height: 2.5em;
    overflow: hidden;
    background-color: rgba(255,255,255,0.95);}
    nav.tap{max-height: 100vh; height: auto;}
  nav menu li { display: block;    list-style-type: none; font-size: 12px;  padding: .63em;}
  nav menu li ul { opacity: 1; height: auto; position: relative;bottom: auto; background:transparent; padding: 1em 0 0 0;
    margin-bottom: -1em; }
  nav menu li ul:hover { background: transparent; }
  nav menu li ul li { font-size: 12px;
    padding: .72em; background: transparent; }
  nav menu li ul li:after { display: none;}
  nav menu > li:last-child { width: 100%;}
  nav menu > li:last-child {
    text-align: center;
    background-color: #3e3935;
    height: auto;
    right: auto;
    position: relative;
    bottom: auto; }
  article {    margin: 0 3vw; }
  h2, h3 { font-size: 16px; margin: 0 auto;
    left: 0;
    right: 0;}
  header, section { position: relative;}
  .background{ position: relative; height: 60vw;}
  section { height: auto; }
  article { top: auto !important;
    -webkit-transform: translateY(0) !important;
    -ms-transform: translateY(0) !important;
    transform: translateY(0) !important;}
    #de-la-vigne-au-vin .vinification > div > div,
    article > div {
      -webkit-column-count: 1 !important;
      -moz-column-count: 1 !important;
      column-count: 1 !important;
      -webkit-column-gap: 0 !important;
      -moz-column-gap: 0 !important;
      column-gap: 0 !important;
      margin-left: auto; margin-right: auto;
      margin-bottom: 10em;
    }
    #contact-acces   article > div {margin-left: auto; margin-right: auto;}
    p, blockquote {margin-left: auto; margin-right: auto; }

    #un-terroir-unique article + article { position: relative;
      text-shadow: 0 0 0 #000; right: auto;
      margin: 0;
    width: 100%; }
      #un-terroir-unique article + article > div {
        position: relative;
        padding: 1em 2em 2em 2em;
        margin-bottom: 16vh;
        color: #555; }

        .slick-slide {
          padding: 0 1em;
        }
        #de-la-vigne-au-vin .vinification {
          background-size: 100% auto;
          background-repeat: no-repeat;
          background-position: top; margin-bottom: 16vh;}
          .slick-prev, .slick-next, .slickPrev, .slickNext { position: relative; left: 0; right: 0; margin: 0; bottom:0;}
          .slick-prev, .slickPrev {float: left;}
            .slick-next, .slickNext {float: right;}
          #de-la-vigne-au-vin .slick-prev, #de-la-vigne-au-vin .slick-next { display: block !important:}

          #nos-vins-de-champagne h4 { display: none;}
          #nos-vins-de-champagne article > div, #nos-vins-de-champagne .impair { text-align:center;
            padding: 1.4em;
            margin: 0;}
            .cuvee {margin: 2vh; color: #212121;
              margin-bottom: 10vh;}
            .cuvee img {max-height: 100vh;}
 #cuvee-nue-brut-zero .background {height: 0; margin-bottom: 5vh;}
 .champagne { margin-right: 0}
 .champagne h2 { margin: 0 auto;}
.packshot {
   margin-top: -50vw;
 }
 .champagne .left, .champagne p { text-align:center;}
 .champagne form {float: none; margin: 5vh auto 10vh auto;
   font-size: 20px; display: block;}
   div.map {display: none;}
   .map + div p:first-child { display: none;}

    #nos-actualites article > div {
font-size: 16px;
}
   #nos-actualites .tab label { margin: 0;

     padding: .6em 3.5vw; }
     .group {
       padding: 5em 0;}
       #nos-actualites article > div { height: auto; }
       #contact-acces article div p { text-align:center; font-size: 1em; }
       #contact-acces { margin-bottom: 10vh; }
       .contact {position: relative; margin: 0; top: 0; right: 0; bottom: 0; left: 0;
         margin: 0 auto;}
       #boutique article { text-align:center; }
  footer {
    height: 6.5em;
    line-height: 1.4em;
    padding: 1.2em 3em;
    font-size: .6em;
    position: relative;
    background: transparent;
    color: #212121;
    margin-bottom: 10em;
  }
  footer a {
    color: #212121;}
  #index, #index .background { position: fixed; height: auto;}
  #index .index-logo img {
    width: 80vw;}
    #index .index-unesco img {
    left: 0;
    right: 0;
    bottom: 24vh;
    width: 10em;
  }
  #index + footer {
    position: absolute;
    background: rgba(0,0,0,0.4);
    bottom: 4em;
    color: #fff;  margin-bottom: 0;
    }
    #index + footer a {
      color: #fff;}


      article > div, #de-la-vigne-au-vin .vinification > div > div{
        -webkit-transform: translateY(5vh);
        -ms-transform: translateY(5vh);
        transform: translateY(5vh);
        -webkit-transition: transform 1s ease-out;
        -ms-transition: transform 1s ease-out;
        transition: transform 1s ease-out;
      }
      .animate article > div, .animate  #de-la-vigne-au-vin .vinification.slick-active > div > div {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
      }

      #de-la-vigne-au-vin .vinification { padding: 0; height: auto;}
      #de-la-vigne-au-vin .vinification > div{

        margin-top: 23em;
        position: relative;
        bottom: auto;
    }
    #agelegal > div {
      font-size: 1em;
    }
    #agelegal img {max-width: 11.5em;
      margin-bottom: 2em;
    }
    #boutique h4 { margin-bottom: 1em;}
    #boutique table {
      margin-bottom: 5em;
    }
input[type="number"], #boutique input[type="text"], #boutique input[type="submit"], #boutique input[type="date"], #boutique {
  font-size: 1em;
}
  .background.mp4 video {
    display: none;
  }
  .background.mp4 {
    background-image: url(../img/index.jpg);
  }
}