/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */


@font-face {
	font-family: 'Roboto Condensed';
	src: url('fonts/RobotoCondensed-LightItalic.eot');
	src: url('fonts/RobotoCondensed-LightItalic.eot?#iefix') format('embedded-opentype'),
		url('fonts/RobotoCondensed-LightItalic.woff') format('woff'),
		url('fonts/RobotoCondensed-LightItalic.ttf') format('truetype');
	font-weight: 300;
	font-style: italic;
}

@font-face {
	font-family: 'Roboto Condensed';
	src: url('fonts/RobotoCondensed-Regular.eot');
	src: url('fonts/RobotoCondensed-Regular.eot?#iefix') format('embedded-opentype'),
		url('fonts/RobotoCondensed-Regular.woff') format('woff'),
		url('fonts/RobotoCondensed-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Royal Initialen';
	src: url('fonts/RoyalInitialen.eot');
	src: url('fonts/RoyalInitialen.eot?#iefix') format('embedded-opentype'),
		url('fonts/RoyalInitialen.woff') format('woff'),
		url('fonts/RoyalInitialen.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Interstate';
	src: url('fonts/Interstate-Light.eot');
	src: url('fonts/Interstate-Light.eot?#iefix') format('embedded-opentype'),
		url('fonts/Interstate-Light.woff') format('woff'),
		url('fonts/Interstate-Light.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Roboto Condensed';
	src: url('fonts/RobotoCondensed-Bold.eot');
	src: url('fonts/RobotoCondensed-Bold.eot?#iefix') format('embedded-opentype'),
		url('fonts/RobotoCondensed-Bold.woff') format('woff'),
		url('fonts/RobotoCondensed-Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'Roboto Condensed';
	src: url('fonts/RobotoCondensed-Light.eot');
	src: url('fonts/RobotoCondensed-Light.eot?#iefix') format('embedded-opentype'),
		url('fonts/RobotoCondensed-Light.woff') format('woff'),
		url('fonts/RobotoCondensed-Light.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: 'Sabon LT Std';
	src: url('fonts/SabonLTStd-Roman.eot');
	src: url('fonts/SabonLTStd-Roman.eot?#iefix') format('embedded-opentype'),
		url('fonts/SabonLTStd-Roman.woff') format('woff'),
		url('fonts/SabonLTStd-Roman.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}



html,
button,
input,
select,
textarea {
  color: #000;
	font-family: 'Roboto Condensed';
}

html {
  font-size: 1em;
  line-height: 1.3;
	overflow-y:scroll; 
	height:100%; 
	box-sizing: border-box; 
  overflow-x:hidden;
}

*, *:before, *:after {
  box-sizing: inherit;
}

::-moz-selection {
    background: rgba(16,74,142,.3);
    text-shadow: none;
}

::selection {
    background: rgba(16,74,142,.3);
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

audio,
canvas,
img,
video {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/* ==========================================================================
   Author's custom styles
   ========================================================================== */


body { height:100%; background:#F3F1EB; }

img { max-width:100%; height:auto; }

a { color:#000; text-decoration:none; transition:color .2s ease; }
a:hover { color:#104a8e; }


#header { position:fixed; top:0; left:0; width:100%; padding:0 1em; z-index:99; transition:background .6s ease, box-shadow .6s ease; }
.menuLeft { float:left; }
.menuRight { float:right; }
.menu { margin:0; padding:0; list-style:none; font-family: 'Interstate'; letter-spacing:.1em; text-transform:uppercase; font-size:.75em; }
.menu li { display:inline-block; margin:0 .5em; }
#nav li a { display:inline-block; padding:1.3em .5em; transition:box-shadow .3s ease; box-shadow:0 1px 0 transparent; }
#footer li a { display:inline-block; padding:1.3em .5em; }
#nav li a:hover { color:#000; box-shadow:0 1px 0 #104a8e; }
#pageHeader  { padding:20vh 0; min-height: calc(100vh - 270px); background: url(../img/bg2.png) no-repeat 55% 13.3vh; }
#page { padding-top:200px; background: url(../img/bg1.jpg) no-repeat right top; }
#pageTitle { margin:0 auto; width:510px; }
.line1 { font-size: 2.3em; z-index: 1; display:block; text-align:left; font-family: 'Sabon LT Std'; font-weight:normal; position:relative; }
.en .line1 { font-size: 2.2em; }
.line2 { display:block; text-align:left; font-weight:normal; font-size: 1.4em; letter-spacing: .1em; color:#104a8e; position:relative; margin-top:-0.55em; position:relative; z-index:1; }
.line2:before { content:""; position:absolute; left:-50px; bottom:-5px; width:93px; height:38px; background:url(../img/ornement1.png); z-index:-1; }
.line3 { display:block; text-align:right; font-family: 'Sabon LT Std'; font-weight:normal; font-size: 2em; position:relative; z-index: 1; margin-top: -0.65em; }
.line4 { display:block; text-align:right; font-size: 0.48em; text-transform: uppercase; position:relative; z-index: 1; letter-spacing: .08em; margin-top: -0.4em; }

#logoFull { display:block; position:absolute; left:50%; text-align:center; width:237px; margin-left:-118px; top:70px; transition:top .6s ease; }
.topOn #logoFull { top:-5px; }
#logo { display:block; margin:auto; transform:translateZ(0) scale(1); transition:transform .6s ease, opacity .6s ease; }
.topOn #logo { transform:translateZ(0) scale(.7);  opacity:0;  }
#lettrine { display:block; margin:auto; width: 24%; transform:translateZ(0) scale(1); transition:transform .6s ease; }
.topOn #lettrine { transform:translateZ(0) scale(.6);  }

.article { max-width:1400px; margin:auto; margin-bottom:20vh; }
.wrapper:nth-child(odd) .title { text-align:right; }
.wrapper:last-child .article { margin-bottom:4vh; }
.title { color:#104a8e; font-weight:normal; margin-bottom:2em; letter-spacing:.1em; font-size:2.8em; position:relative; z-index:1; }
.titleWrapper{ position:relative; }
#article1 .title:before { content:""; width:280px; height:216px; background:url(../img/bg3.png); position:absolute; left: 47px; top: -140px; z-index:-1;  }
#article2 .title:before { content:""; width:285px; height:313px; background:url(../img/bg4.png); position:absolute; right: -75px; top: -209px; z-index:-1;  }
#article3 .title:before { content:""; width:285px; height:313px; background:url(../img/bg4.png); position:absolute; left: 32px; top: -268px; z-index:-1;  }
.titleWrapper:after { content:""; background:url(../img/ornement2.png); width:51px; height:21px; position:absolute; left:-32px; bottom:1px; }

.colonnes { margin-left:33%; position: relative; z-index: 2; }
.colonne { width:22.33%; margin:0 5.5%; float:left; }
.cuvees { margin:0 -8% 26vh; position: relative; z-index: 2; }
.cuvee { width:16%; margin:0 2%; float:left; }
h3 { text-align:center; letter-spacing:.15em; text-transform:uppercase; font-size:1em; position:relative; z-index:1; transition:opacity .6s ease; }
p { font-weight:300; transition:opacity .6s ease; }
.colonne p:first-letter { line-height:1; display:block; margin-bottom:-.2em; font-size:8em; float:left; color:#104a8e; font-family: 'Royal Initialen'; }

.cuveeLink { display: block; cursor:default; margin:0 -13% 1.3em; min-height:452px; text-align: center; position:relative; z-index:1; }
.cuveeTitleLink { cursor:default; }
figure { margin:0; transition:opacity .6s ease, max-height .3s steps(4, end), broder-radius .3s ease; }
.fileLink { text-align:right; opacity:0; letter-spacing:.05em; transition:opacity .6s ease, transform .3s ease; transform:translateX(-1em); z-index:-1; position:relative; }
.fileLink a { position:relative; }
.fileLink a:after { content:""; position:absolute; width:65px; height:65px; right:-30px; bottom:-20px; background:url(../img/plus.png); opacity:.1; transition:opacity .6s ease; }
.bleu { color:#104a8e; }
.adresse { float:left; width:20%; margin-right:5%; letter-spacing:.07em; }
.mapWrapper { float:left; width:75%; height:60vh; background:#e4ddd4; position:relative; }
.mapWrapper:before { content:""; z-index: 2; position:absolute; left:-40px; bottom:-40px; background:url(../img/rose-des-vents.png); width:121px; height:121px;  }
#map { height:100%; }
.adresse strong { text-transform:uppercase; }

.marker {
  background-image: url('../img/marker.png');
  background-size: 50%;
  background-repeat: no-repeat;
  width: 50px;
  height: 50px;
  cursor: pointer;
}

.email-send{
  position: fixed;
  background: #c0af95;
  bottom: 20px;
  color: #FFf;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  z-index: 1500;
  padding: 20px;
}
.email-erreur{
  position: fixed;
  background: #b93939;
  bottom: 20px;
  color: #FFf;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  z-index: 1500;
  padding: 20px;
}
.grecaptcha-badge{
  display: none;
}
#contactform label{display: block; margin-bottom: 15px;}
#contactform label input{display: block;width: 100%;margin-top: 10px;}
#contactform label textarea{display: block;width: 100%; margin-top: 10px;}


#footer { position:relative; padding:0 1em; overflow:hidden; }
#logoFooter { position:absolute; left:50%; margin-left:-75px; width:150px; display:block; bottom:.5em; }
#logoFooter img {  transform:translateZ(0); }
#mentions-legales { display:none; width:90%; padding:2em 0; margin:auto; max-width:1000px; }
#mentions-legales.on { display:block; }

.topOn #header { height: 47px; background:#F3F1EB; border-bottom: 1px solid rgba(0, 0, 0, 0.03); box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.06);}
#wrapper1 { position:relative; z-index:2; }
#wrapper1:before { content:""; position:absolute; left:0; top:0; z-index:-1; width:844px; height:626px; background:url(../img/bg3.jpg); }
#wrapper1:after{ content:""; position:absolute; right:0; top:50%; z-index:-1; width:620px; height:626px; background:url(../img/bg4.jpg); }
.cuvee:first-child .cuveeLink:before { content:""; position:absolute; left:-30px; bottom:-20px; width:256px; height:168px; background:url(../img/bg5.jpg); z-index:-1;  }
#wrapper2 { position:relative; z-index:2; background:url(../img/bg6.jpg) no-repeat right bottom; background-size:auto 80%; }

.cuvee h3 { opacity:.3; }
.cuvee.on h3 { opacity:1; }
.cuvee p { opacity:0; }
.cuvee.on p { opacity:1; }
.cuvee.on .fileLink { opacity:1; z-index:1; transform:translateX(0);  }
.cuvee figure { opacity:.3; transition:opacity .6s ease; }
.cuvee.on figure { opacity:1; }
/*.cuvee figure { max-height:300px; overflow:hidden; border-radius:0 0 200px 0; }
.cuvee:nth-child(2) figure { max-height:350px; border-radius:0 0 0 300px; }
.cuvee:nth-child(3) figure { max-height:330px; border-radius:0 0 0 200px; }
.cuvee:nth-child(4) figure { max-height:340px; border-radius:0 0 300px 0; }
.cuvee:nth-child(5) figure { max-height:310px; border-radius:0 0 200px 100px; }
.cuvee.on figure { max-height:452px; border-radius:0; }*/

.cuvee.on h3:before { content:""; position:absolute; top:50%; left:50%; transform:translateX(-50%) translateY(-45%); width:143px; height:92px; background:url(../img/ornement3.png); }
.cuvee.hover figure { opacity:.5; }
.cuvee.hover h3 { opacity:.5; }
.cuvee.hover p { opacity:.5; }
.cuvee.hover .fileLink a { color:rgba(0,0,0,.5); }
.cuvee.hover .fileLink a:after { opacity:1; }

#wrapper3 { background:url(../img/bg7.jpg) left top no-repeat, url(../img/bg7.jpg) right bottom no-repeat; padding-bottom:20vh; }
.current1 #nav .menuLeft li:nth-child(1) a { box-shadow: 0 1px 0 rgba(0,0,0,0.2); }
.current2 #nav .menuLeft li:nth-child(2) a { box-shadow: 0 1px 0 rgba(0,0,0,0.2); }
.current3 #nav .menuLeft li:nth-child(3) a { box-shadow: 0 1px 0 rgba(0,0,0,0.2); }

@keyframes fromTop { 
  0% { transform:translateY(-50%); opacity:0; }
  100% { transform:translateY(0); opacity:1; }
}
@keyframes fromBottom { 
  0% { transform:translateY(10%); opacity:0; }
  100% { transform:translateY(0); opacity:1; }
}
@keyframes fade { 
  0% { opacity:0; }
  100% { opacity:1; }
}
@keyframes fromLeft { 
  0% { transform:translateX(-50%); opacity:0; }
  100% { transform:translateX(0); opacity:1; }
}
@keyframes fromLeft2 { 
  0% { transform:translateX(-20px); opacity:0; }
  100% { transform:translateX(0); opacity:1; }
}
@keyframes growX { 
  0% { transform:scaleX(0); }
  100% { transform:scaleX(1); }
}
@keyframes growY { 
  0% { transform:scaleY(0); }
  100% { transform:scaleY(1); }
}
@keyframes growY2 { 
  0% { height:0; }
  100% { height:100%; }
}
@keyframes growX2 { 
  0% { width:0; }
  100% { width:100%; }
}

#nav{ animation:fromTop 1s ease 1.6s 1; animation-fill-mode:backwards; }
#logoFull{ animation:fromTop .8s ease 0s 1; animation-fill-mode:backwards; }
#page{ animation:fade .2s ease 0s 1; animation-fill-mode:backwards; }
#pageHeader { animation:fromBottom 1.8s ease .2s 1; animation-fill-mode:backwards;  }
#wrapper1 { animation:fromBottom 1s ease 1.6s 1; animation-fill-mode:backwards;  }
.line1 { animation:fromLeft 1s ease .7s 1; animation-fill-mode:backwards;  }
.line2 { animation:fromLeft 1s ease .9s 1; animation-fill-mode:backwards;  }
.line3 { animation:fromLeft 1s ease 1.1s 1; animation-fill-mode:backwards;  }
.line4 { animation:fromLeft 1s ease 1.3s 1; animation-fill-mode:backwards;  }

.js .colonne { opacity:0; transition:opacity 1s ease; }
.sectionCurrentOn .colonne:nth-child(1) { opacity:1; animation:fromLeft2 1s ease .2s 1; animation-fill-mode:backwards;  }
.sectionCurrentOn .colonne:nth-child(2) { opacity:1; animation:fromLeft2 1s ease .4s 1; animation-fill-mode:backwards;  }
.sectionCurrentOn .colonne:nth-child(3) { opacity:1; animation:fromLeft2 1s ease .6s 1; animation-fill-mode:backwards;  }
.js .cuvee{ opacity:0; transition:opacity 1s ease; }
.sectionCurrentOn .cuvee:nth-child(1) { opacity:1; animation:fromLeft2 1s ease .2s 1; animation-fill-mode:backwards;  }
.sectionCurrentOn .cuvee:nth-child(2) { opacity:1; animation:fromLeft2 1s ease .4s 1; animation-fill-mode:backwards;  }
.sectionCurrentOn .cuvee:nth-child(3) { opacity:1; animation:fromLeft2 1s ease .6s 1; animation-fill-mode:backwards;  }
.sectionCurrentOn .cuvee:nth-child(4) { opacity:1; animation:fromLeft2 1s ease .8s 1; animation-fill-mode:backwards;  }
.sectionCurrentOn .cuvee:nth-child(5) { opacity:1; animation:fromLeft2 1s ease 1s 1; animation-fill-mode:backwards;  }
.js .adresse{ opacity:0; transition:opacity 1s ease; }
.js .mapWrapper{ opacity:0; transition:opacity 1s ease; }
.sectionCurrentOn .adresse{ opacity:1; animation:fromLeft2 1s ease .2s 1; animation-fill-mode:backwards;  }
.sectionCurrentOn .mapWrapper { opacity:1; animation:fromLeft2 1s ease .4s 1; animation-fill-mode:backwards;  }
 
.line1:before { content:""; position:absolute; top:0; left: -2%; width: 100%; height: 80%; z-index: -1; border-bottom:1px solid #d6d4cb; animation:growX 2s ease 1.5s 1;  animation-fill-mode:backwards; transform-origin:0 0; }
.line3:before { content:""; position:absolute; top: -51%;  right: 0%; width: 100%; height: 186%; z-index: -1; border-right:1px solid #d6d4cb; animation:growY 2s ease 1.8s 1;  animation-fill-mode:backwards; transform-origin:0 0; }
.line1:after { content: ""; position: absolute; top: -4%; left: 0; width: 9%;height: 156%; z-index: -1;  border-left: 1px solid #d6d4cb; border-right: 1px solid #d6d4cb; transform: skewY(11deg); animation:growY 2s ease 2.1s 1;  animation-fill-mode:backwards; transform-origin:0 0; }
.line2:after { content:""; position:absolute; top:0; left: -12%; width: 53%; height: 80%; z-index: -1; border-bottom:1px solid #d6d4cb; animation:growX 2s ease 2.4s 1;  animation-fill-mode:backwards; transform-origin:0 0; }
.line3:after { content:""; position:absolute; top:0; right: -7%; width: 80%; height: 81%; z-index: -1; border-bottom:1px solid #d6d4cb; animation:growX 2s ease 2.7s 1;  animation-fill-mode:backwards; transform-origin:0 0; }
.line4:after { content:""; position:absolute; top:0; right: -13%; width: 80%; height: 87%; z-index: -1; border-bottom:1px solid #d6d4cb; animation:growX 2s ease 3s 1;  animation-fill-mode:backwards; transform-origin:0 0; }
 
.border { position:relative; }
.border:before { content:""; position:absolute; top:0; left:0; width:100%; height:100%; border-top:1px solid #d6d4cb; border-bottom:1px solid #d6d4cb;  transition:width .6s ease; }
.border:after { content:""; position:absolute; top:0; left:0; width:100%; height:100%; border-left:1px solid #d6d4cb; border-right:1px solid #d6d4cb; transition:height .6s ease; }
.border1:before { width:150%; left:-25%; transform:skeWX(-15deg); animation:fade 1s ease 2.6s; animation-fill-mode:backwards;  }
.border1:after { height:300%; top:-100%; transform:skeWY(-5deg); animation:fade 1s ease 2.6s; animation-fill-mode:backwards; }
.border2:before { width:150%; left:-25%; transform:skeWX(15deg); animation:fade 1s ease 2.6s; animation-fill-mode:backwards; }
.border2:after { height:300%; top:-100%; transform:skeWY(-3deg); animation:fade 1s ease 2.6s; animation-fill-mode:backwards; }
.border3:before { width:150%; left:-25%; transform:skeWX(55deg); animation:fade 1s ease 2.6s; animation-fill-mode:backwards; }
.border3:after { height:300%; top:-100%; transform:skeWY(5deg); animation:fade 1s ease 2.6s; animation-fill-mode:backwards; }
.topOn .border1:before{ width:0; }
.topOn .border1:after{ height:0; }
.topOn .border2:before{ width:0; }
.topOn .border2:after{ height:0; }
.topOn .border3:before{ width:0; }
.topOn .border3:after{ height:0; }
a:hover .border1:before{ width:0; }
a:hover .border1:after{ height:0; }
a:hover .border2:before{ width:0; }
a:hover .border2:after{ height:0; }
a:hover .border3:before{ width:0; }
a:hover .border3:after{ height:0; }
.border4:before { width:150%; left:-25%; transform:skeWX(-15deg); transition:width .3s ease; }
.border5:after { height:300%; top:-100%; transform:skeWY(-5deg); transition:height .3s ease; }
.border6:before { width:150%; left:-25%; transform:skeWX(15deg); transition:width .3s ease; }
.border4:after { height:300%; top:-100%; transform:skeWY(-3deg); transition:height .3s ease; }
.border5:before { width:150%; left:-25%; transform:skeWX(55deg); transition:width .3s ease; }
.border6:after { height:300%; top:-100%; transform:skeWY(5deg); transition:height .3s ease; }
#footer a:hover  .border4:before { width:0; }
#footer a:hover  .border5:before { width:0; }
#footer a:hover  .border6:before { width:0; }
#footer a:hover  .border4:after { height:0; }
#footer a:hover  .border5:after { height:0; }
#footer a:hover  .border6:after { height:0; }
 
.titleInner { position:relative; }
.titleInner:before { content:""; width:1.4em; top:-30%; height:150%; left:0; position:absolute; border-left:1px solid #d6d4cb; border-right:1px solid #d6d4cb; transform-origin:0 0; opacity:0; }
.titleInner:after { content:""; width:1.2em; top:-10%; height:110%; left:1.2em; position:absolute; border-left:1px solid #d6d4cb; transform-origin:0 0; opacity:0; }
.titleWrapper:before { content:""; width:120%; left:-8%; height: 70%; top: 14%; position:absolute; border-top:1px solid #d6d4cb; border-bottom:1px solid #d6d4cb; transform-origin:0 0; opacity:0; }
.sectionCurrentOn  .titleInner:before { animation:growY 1s ease 0s 1; opacity:1; }
.sectionCurrentOn  .titleInner:after{ animation:growY 1s ease 0s 1; opacity:1; }
.sectionCurrentOn  .titleWrapper:before{ animation:growX 1s ease 0s 1; opacity:1; }
 
.colonne { position:relative; z-index:1; }
.colonne:before { content:""; width:102%; top:15%; height:100%; left:-1%; position:absolute; border-left:1px solid #d6d4cb; border-right:1px solid #d6d4cb; transform:skewY(10deg); transform-origin:100% 0; z-index:-1;opacity:0 }
.colonne:after { content:""; width:112%; top:15%; height:100%; left:-6%; position:absolute; border-left:1px solid #d6d4cb; border-right:1px solid #d6d4cb; transform:skewY(8deg); transform-origin:0 0; z-index:-1;opacity:0 }
.colonne:nth-child(odd):after { transform:skewY(5deg); transform-origin:100% 0; }
.colonne:nth-child(odd):before { transform:skewY(-15deg); transform-origin:0 0; }
.colonne p { position:relative; z-index:1; }
.colonne p:before { content:""; width:130%; top:0; height:100%; left:-15%; position:absolute; transform-origin:0 0; z-index:-1; background: linear-gradient(to bottom, transparent, transparent 95%, #d6d4cb 95%, #d6d4cb); background-size: 100% 1.3em;opacity:0 }
.colonne p:after { content:""; width:170%; top:0; height:100%; left:-35%; position:absolute; transform-origin:0 0; z-index:-1; background: linear-gradient(to bottom, transparent, transparent 98%, #d6d4cb 98%, #d6d4cb); background-size: 100% 3.8em;opacity:0 }
.sectionCurrentOn .colonne:nth-child(1):before {  animation:growY2 2s ease .9s 1; opacity:1; animation-fill-mode:backwards; }
.sectionCurrentOn .colonne:nth-child(1):after {  animation:growY2 2s ease .9s 1; opacity:1; animation-fill-mode:backwards; }
.sectionCurrentOn .colonne:nth-child(2):before {  animation:growY2 2s ease 1.5s 1; opacity:1; animation-fill-mode:backwards; }
.sectionCurrentOn .colonne:nth-child(2):after {  animation:growY2 2s ease 1.5s 1; opacity:1; animation-fill-mode:backwards; }
.sectionCurrentOn .colonne:nth-child(3):before {  animation:growY2 2s ease 2s 1; opacity:1; animation-fill-mode:backwards; }
.sectionCurrentOn .colonne:nth-child(3):after {  animation:growY2 2s ease 2s 1; opacity:1; animation-fill-mode:backwards; }
.sectionCurrentOn .colonne:nth-child(1) p:before {  animation:growX 2s ease .9s 1; opacity:1; animation-fill-mode:backwards; }
.sectionCurrentOn .colonne:nth-child(1) p:after {  animation:growX 2s ease .9s 1; opacity:1; animation-fill-mode:backwards; }
.sectionCurrentOn .colonne:nth-child(2) p:before {  animation:growX 2s ease 1.5s 1; opacity:1; animation-fill-mode:backwards; }
.sectionCurrentOn .colonne:nth-child(2) p:after {  animation:growX 2s ease 1.5s 1; opacity:1; animation-fill-mode:backwards; }
.sectionCurrentOn .colonne:nth-child(3) p:before {  animation:growX 2s ease 2s 1; opacity:1; animation-fill-mode:backwards; }
.sectionCurrentOn .colonne:nth-child(3) p:after {  animation:growX 2s ease 2s 1; opacity:1; animation-fill-mode:backwards; }

.cuveeouter { position:relative; z-index:1; }
.cuveeouter:before { content:""; width:102%; top:15%; height:100%; left:-1%; position:absolute; border-left:1px solid #d6d4cb; border-right:1px solid #d6d4cb; transform:skewY(1deg) scaleY(2); transform-origin:100% 50%; z-index:-1;opacity:0 }
.cuveeouter:after { content:""; width:112%; top:15%; height:100%; left:-6%; position:absolute; border-left:1px solid #d6d4cb; border-right:1px solid #d6d4cb; transform:skewY(2deg) scaleY(2); transform-origin:0 50%; z-index:-1;opacity:0 }
.cuveeouter p { position:relative; z-index:1; }
.cuveeouter p:before { content:""; width:130%; top:0; height:100%; left:-15%; position:absolute; transform-origin:0 0; z-index:-1; background: linear-gradient(to bottom, transparent, transparent 95%, #d6d4cb 95%, #d6d4cb); border-top:1px solid #d6d4cb; border-bottom:1px solid #d6d4cb; background-size: 100% 1.3em; opacity:0 }
.cuveeouter p:after { content:""; width:170%; top:0; height:100%; left:-35%; position:absolute; transform-origin:0 0; z-index:-1; background: linear-gradient(to bottom, transparent, transparent 98%, #d6d4cb 98%, #d6d4cb); background-size: 100% 3.8em;opacity:0 }
.fileLink:before { content:""; width:100%; top:0; height:100%; left:5%; position:absolute; transform-origin:0 0; z-index:-1; border-bottom:1px solid #d6d4cb; opacity:0 }
.fileLink:after { content:""; width:70%; top:0; height:100%; left:40%; position:absolute; transform-origin:0 0; z-index:-1;  border-top:1px solid #d6d4cb; opacity:0 }
.cuvee.on .cuveeouter:before {  animation:growY2 1s ease .3s 1; opacity:1; animation-fill-mode:backwards; }
.cuvee.on .cuveeouter:after {  animation:growY2 1s ease .3s 1; opacity:1; animation-fill-mode:backwards; }
.cuvee.on .cuveeouter p:before {  animation:growX 1s ease .3s 1; opacity:1; animation-fill-mode:backwards; }
.cuvee.on .cuveeouter p:after {  animation:growX 1s ease .3s 1; opacity:1; animation-fill-mode:backwards; }
.cuvee.on .fileLink:before {  animation:growX 1s ease .5s 1; opacity:1; animation-fill-mode:backwards; }
.cuvee.on .fileLink:after {  animation:growX 1s ease .7s 1; opacity:1; animation-fill-mode:backwards; }
 
.fileLink .cuveeouter:after { display:none; }
 
.adresse { position:relative; z-index:3; }
.adresse:before { content:""; width:102%; top:15%; height:100%; left:-1%; position:absolute; border-left:1px solid #d6d4cb; transform:skewY(10deg); transform-origin:100% 0; z-index:-1;opacity:0 }
.adresse:after { content:""; width:112%; top:15%; height:100%; left:-6%; position:absolute; border-left:1px solid #d6d4cb; transform:skewY(8deg); transform-origin:0 0; z-index:-1;opacity:0 }
.adresse p { position:relative; z-index:1; }
.adresse p:before { content:""; width:130%; top:0; height:100%; left:-15%; position:absolute; transform-origin:0 0; z-index:-1; background: linear-gradient(to bottom, transparent, transparent 95%, #d6d4cb 95%, #d6d4cb); background-size: 100% 1.3em;opacity:0 }
.adresse p:after { content:""; width:170%; top:0; height:100%; left:-35%; position:absolute; transform-origin:0 0; z-index:-1; background: linear-gradient(to bottom, transparent, transparent 98%, #d6d4cb 98%, #d6d4cb); background-size: 100% 3.8em;opacity:0 }
.sectionCurrentOn .adresse:before {  animation:growY2 2s ease .9s 1; opacity:1; animation-fill-mode:backwards; }
.sectionCurrentOn .adresse:after {  animation:growY2 2s ease .9s 1; opacity:1; animation-fill-mode:backwards; }
.sectionCurrentOn .adresse p:before {  animation:growX 2s ease .9s 1; opacity:1; animation-fill-mode:backwards; }
.sectionCurrentOn .adresse p:after {  animation:growX 2s ease .9s 1; opacity:1; animation-fill-mode:backwards; }
 
.mapOuter { height:100%; position:relative; z-index:1; }
.mapOuter:before { content:""; z-index:-1; position:absolute; width:100%; bottom:-1px; top:-1px; left:0; transform:scaleX(1.2); border-bottom:1px solid #d6d4cb; border-top:1px solid #d6d4cb; }
.mapOuter:after { content:""; z-index:-1; position:absolute; height:100%; top:-1px; left:-1px; right:-1px; transform:scaleY(1.2); border-left:1px solid #d6d4cb; border-right:1px solid #d6d4cb; }

.mapInner { height:100%; position:relative; z-index:1; }
.mapInner:before { opacity:0;content:""; z-index:-1; position:absolute; width:100%; bottom:-.7em; top:-.7em; left:0; transform:scaleX(1.3); border-bottom:1px solid #d6d4cb; border-top:1px solid #d6d4cb; }
.mapInner:after { opacity:0; content:""; z-index:-1; position:absolute; height:100%; top:-1px; left:-.7em; right:-.7em; transform:scaleY(1.1); border-left:1px solid #d6d4cb; border-right:1px solid #d6d4cb; }
.sectionCurrentOn .mapOuter:before { animation:growX2 2s ease .9s 1; opacity:1; animation-fill-mode:backwards; }
.sectionCurrentOn .mapOuter:after { animation:growY2 2s ease .9s 1; opacity:1; animation-fill-mode:backwards; }
.sectionCurrentOn .mapInner:before { animation:growX2 2s ease 1.1s 1; opacity:1; animation-fill-mode:backwards; }
.sectionCurrentOn .mapInner:after { animation:growY2 2s ease 1.1s 1; opacity:1; animation-fill-mode:backwards; }

.cuveeLink img { transform:translateZ(0) }
#menuToggler { display:none; }
.bbleu { font-style:normal; font-weight:bold; color:#104a8e;}
.adresse p a:hover { text-decoration:underline; }
.adresse p a { position:relative; z-index:2; }
 
/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (max-width: 750px), screen and (max-height: 820px) {
  #wrapper1:after { top:30%; }
}
@media only screen and (max-width: 750px), screen and (max-height: 600px) {
  #wrapper1:after { top:30%; }
  #pageTitle { font-size: 1.8em; width: 454px; }
  #logoFull { width: 190px; margin-left: -95px; }
  #pageHeader { padding: 11vh 0; background-position:  55% 2.3vh; background-size:auto 100%; }
  .topOn #logoFull { top: 1px; }
}
@media only screen and (max-width: 1760px), screen and (max-height: 470px) {
  .mapInner:before { transform: scaleX(1.05); }
  .mapOuter:before { transform: scaleX(1.03); }
  .cuvees { margin: 0 -2% 26vh; }
}
@media only screen and (max-width: 1580px), screen and (max-height: 470px) {
  .cuvees { margin: 0 0 26vh; }
  #article2 .title:before { right:0; }
  .cuvee:first-child .cuveeLink:before { display:none; }
  #wrapper1:before { left: -350px; }
  .title { padding:0 2em; }
}
@media only screen and (max-width: 1520px), screen and (max-height: 470px) {
  .cuveeLink  { margin: 0 0 1.3em; min-height: 325px; }
  .cuvee.on figure { max-height:325px; }
  #article3 { width:90%; }
  .colonnes { margin: auto; max-width: 930px;}
  .cuvees { margin: 0 50px 26vh; }
  /*.cuvee figure { max-height:220px; }
  .cuvee:nth-child(2) figure { max-height:220px; }
  .cuvee:nth-child(3) figure { max-height:240px; }
  .cuvee:nth-child(4) figure { max-height:230px; }
  .cuvee:nth-child(5) figure { max-height:240px;  }
  .cuvee.on figure { max-height:305px; }*/
}
@media only screen and (max-width: 1420px), screen and (max-height: 470px) {
  .cuvee { width: 20%; margin:0; }
  .cuveeLink { margin: 0 auto 1.3em; min-height: 325px; max-width: 230px; }
  .cuveeouter { margin: 2em; }
}
@media only screen and (max-width: 1300px), screen and (max-height: 470px) { 
  .adresse { width: 22%; margin-right: 9%; }
  .mapWrapper { width:69% }
  #logoFooter { left: 1em; margin-left: 0; }
  .cuveeLink { margin: 0 auto 1.3em; min-height: 255px; max-width: 170px; }
  /*.cuvee figure { max-height:170px; }
  .cuvee:nth-child(2) figure { max-height:170px; }
  .cuvee:nth-child(3) figure { max-height:180px; }
  .cuvee:nth-child(4) figure { max-height:160px; }
  .cuvee:nth-child(5) figure { max-height:180px;  }
  .cuvee.on figure { max-height:255px; }*/
}
@media only screen and (max-width: 1150px), screen and (max-height: 470px) { 
  #wrapper1:after { display:none; }
}
@media only screen and (max-width: 1000px), screen and (max-height: 470px) { 
  .colonnes { max-width:750px; }
  .colonne { width: 27.33%; margin: 0 2.5%; }
  .colonne p:after { display:none; }
  .colonne:after { display:none; }
  .cuvee { float:none; display:inline-block; width: 29%; margin: 0 1.1%; vertical-align:top; }
  .cuvees { text-align:center; }
  .cuvees p { text-align:left; }
}
@media only screen and (max-width: 900px), screen and (max-height: 470px) { 
  .adresse { width: 29%; margin-right: 5%; }
  .mapWrapper { width:65% }
  .cuvee { width: 32.5%; margin: 0; }
}
@media only screen and (max-width: 750px), screen and (max-height: 470px) {
  .cuvee figure { opacity:1; }  
  #logoFooter { position: static; margin: auto; }
  #nav { display:none; }
  #logoFull { top:20px; }
  #pageTitle { font-size: 5vw; width: 80vw;  position: relative; z-index: 3;}
  #logoFull { width: 140px; margin-left: -70px }
  #pageHeader { background:none; }
  #article1 .title:before { right:0; left:auto; }
  #article3 .title:before { right:0; left:auto; }
  .title { font-size:1.9em; padding: 0 0 0 1em; line-height: 0.9; letter-spacing: .03em; }
  .topOn #header { height: 36px; }
  #header { height: 36px; padding:0 .5em; }
  #page { padding-top: 110px; }
  .titleWrapper:after { background-size: contain; background-repeat: no-repeat; width: 30px;bottom: -7px; left: -17px; transform: translateZ(0) }  
  .colonne { width: 200px; float:none; margin: 0 1em; display: inline-block; vertical-align: top; text-align: left; }
  .colonnes { text-align:center; }
  .wrapper:nth-child(odd) .title { text-align: left; }
  .cuvee { width: 200px; }
  #footer .menu { float: none; text-align: center; margin:2em 0; }
  .adresse {  width: 230px; max-width: 90%; margin: auto; float: none; }
  #article3 { width: auto; }
  .mapWrapper { width: auto; float: none; }
  #wrapper1:before { left:auto; right:0; }
  .cuvees { margin: 0 0 26vh; }
  #menuToggler { display: block; float: left; margin-left:17px; color: #ababab; position: relative; text-transform: uppercase; font-family: 'Interstate'; font-size: 0.7em; letter-spacing: .1em; margin-top: 0.5em; transition:margin .2s ease; }
  .topOn #menuToggler { margin-top: 1.1em; }
  #menuToggler:before { content:""; border-top:1px solid #ababab; border-bottom:1px solid #ababab; height:11px; width:15px; position:absolute; left:-19px; top:1px; }
  #menuToggler:after { content:""; border-top:1px solid #ababab; height:1px; width:15px; position:absolute; left:-19px; top:6px; }
  .menuOn #menuToggler:before { height:0; border-bottom:0; transform:rotate(45deg); top:6px; }
  .menuOn #menuToggler:after { transform:rotate(-45deg); }
  .menuOn #nav { display:block; position:fixed; top:0; left:0; width:100%; background:#F3F1EB; border-bottom: 1px solid #c1c1c1; z-index:100; padding-top: 2em;  animation:fromTop .3s ease 0s 1; text-align:center; }
  .menuOn #menuToggler { position: fixed;top: .5em; left: .5em; z-index: 999; }
  #nav .menu { float:none; display:inline-block; vertical-align:top; }
}

/*
@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {

}
*/
/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

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

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}