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


@font-face {
    font-family: 'source_sans_pro';
    src: url('font/sourcesanspro-bold-webfont.eot');
    src: url('font/sourcesanspro-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/sourcesanspro-bold-webfont.woff2') format('woff2'),
         url('font/sourcesanspro-bold-webfont.woff') format('woff'),
         url('font/sourcesanspro-bold-webfont.ttf') format('truetype'),
         url('font/sourcesanspro-bold-webfont.svg#source_sans_probold') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'source_sans_pro';
    src: url('font/sourcesanspro-regular-webfont.eot');
    src: url('font/sourcesanspro-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/sourcesanspro-regular-webfont.woff2') format('woff2'),
         url('font/sourcesanspro-regular-webfont.woff') format('woff'),
         url('font/sourcesanspro-regular-webfont.ttf') format('truetype'),
         url('font/sourcesanspro-regular-webfont.svg#source_sans_proregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'eb_garamond';
    src: url('font/ebgaramond08-regular-webfont.eot');
    src: url('font/ebgaramond08-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/ebgaramond08-regular-webfont.woff2') format('woff2'),
         url('font/ebgaramond08-regular-webfont.woff') format('woff'),
         url('font/ebgaramond08-regular-webfont.ttf') format('truetype'),
         url('font/ebgaramond08-regular-webfont.svg#eb_garamond08_regular') format('svg');
    font-weight: normal;
    font-style: normal;
}


@-webkit-keyframes anim {
	0% { opacity:1 }
	50% { opacity:.2 }
	100% { opacity:1  }
}
@keyframes anim {
	0% { opacity:1 }
	50% { opacity:.2 }
	100% { opacity:1  }
}
@-webkit-keyframes fade {
	0% { opacity:0 }
	100% { opacity:1  }
}
@keyframes fade {
	0% { opacity:0 }
	100% { opacity:1  }
}




html,
button,
input,
select,
textarea {
    color: #000000;
	font-family: 'source_sans_pro';
}

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

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

::-moz-selection {
    background: rgba(200,200,255,.9);
    text-shadow: none;
}

::selection {
    background: rgba(200,200,255,.9);
    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%; }

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

a { text-decoration:none; color:#000000; transition:color 250ms ease, box-shadow 250ms ease; }
a:focus { outline:0; }

#header { position:fixed; height:150px; top:0; left:0; width:100%; background:#fff; box-shadow:0 0 20px rgba(0,0,0,.2); z-index:99; transition: height 400ms ease, box-shadow 400ms ease; }

.maxWidth { width:90%; max-width:1400px; margin:auto; }

.topMenu { margin:0; padding:0; list-style:none; text-align:center; height:150px; transition: height 400ms ease }
.topMenu li { display:inline-block; width:33%; height:150px; vertical-align:top; transition: height 400ms ease }
.topMenu a { display:inline-block; width:100%; height:150px; vertical-align:top; transition: height 400ms ease }
.topMenu a:hover { box-shadow:inset 0 -2px 0 #cfa33e; }
.topMenu a:focus{ box-shadow:inset 0 -2px 0 #cfa33e; }
.topMenu img { display:inline-block; margin-top:25px; height:100px; width:auto; max-width:none; transition: height 300ms ease, margin-top 400ms ease; }

.absLink { position:absolute; right:1em; bottom:.5em; font-size:.9em; }
.absLink a:hover, .absLink .archContent:hover > div { color:#CFA33E; }
.absLink a:focus, .absLink .archContent:focus > div { color:#CFA33E; }

.sectionFirst { text-align:center; padding-top:150px; height:100%; position:relative; }
.imgHeader { width:370px; position:absolute; top:175px; left:50%; margin-left:-185px;   }
.pageTitle { width:600px; left:50%; top:50%; margin:-40px 0 0 -300px;  position:absolute; }
.pBottom { text-transform:uppercase; letter-spacing:.1em; font-size:1.1em; position:absolute; bottom:30px; left:0; width:100%; }

#footer { position:fixed; bottom:0; left:0; width:100%; height:30px; line-height:28px; background:#000000; box-shadow:0 -1px 0 rgba(255,255,255,.1); overflow:hidden; }
.footerMenu { margin:0; padding:0; list-style:none; text-align:center; }
.footerMenu li { display:inline; color:#ccc; font-size:.8em;}
.footerMenu a { color:#ccc;letter-spacing:.03em; }
.footerMenu li:after { content:"\2022"; margin:0 .3em 0 .5em; }
.footerMenu li:last-child:after{ display:none; }
.footerMenu a:hover { color:#cfa33e; }

.sectionImg { background:#000; }
.sectionImg img { display:block; margin:auto; width:1200px; }

.backgroundsize .sectionImg  { height:100%;  }
.backgroundsize .cuvee2010 .sectionImg div { height:100%; background:url(../img/stenope-visuel-2010.jpg) center center no-repeat #000; background-size:contain; }
.backgroundsize .cuvee2009 .sectionImg div { height:100%; background:url(../img/stenope-visuel-2009-top.jpg) center center no-repeat #000; background-size:contain; }
.backgroundsize .cuvee2011 .sectionImg div { height:100%; background:url(../img/stenope-visuel-2011.jpg) center center no-repeat #000; background-size:contain; }
.backgroundsize .sectionImg div { height:100%; background:url(../img/stenope-visuel.jpg) center center no-repeat #000; background-size:contain; }
.backgroundsize .sectionImg img { display:none; }

.sectionDesc { text-align:center; margin-bottom:150px; }
.sectionDesc header img{ width:500px; display:block; margin:150px auto 40px }
.sectionDesc h2 img { width:600px;  }
.sectionDesc p { text-align:left; max-width:700px; margin:40px auto; }

.sectionBlack { background:#000; color:#fff }
.half { float:left; width:50%; padding:40px 20px 0 20px; }

.topMenu .topLiFade { opacity:0; position:relative; z-index:-1; width:15%;  transition:opacity 400ms ease, width 600ms ease;}

h3 { font-family: 'eb_garamond'; font-weight:normal; font-size:1.5em; }
h3:after { content:""; display:block; height:5px; background-image: -webkit-repeating-radial-gradient(center center, rgba(255,255,255,.5), rgba(255,255,255,.5) 1px, transparent 1px, transparent 100%);
  background-image: -moz-repeating-radial-gradient(center center, rgba(255,255,255,.5), rgba(255,255,255,.5) 1px, transparent 1px, transparent 100%);
  background-image: -ms-repeating-radial-gradient(center center, rgba(255,255,255,.5), rgba(255,255,255,.5) 1px, transparent 1px, transparent 100%);
  background-image: repeating-radial-gradient(center center, rgba(255,255,255,.5), rgba(255,255,255,.5) 1px, transparent 1px, transparent 100%); background-size: 5px 5px; }

.sectionWhite  h3:after {
 background-image: -webkit-repeating-radial-gradient(center center, rgba(0,0,0,.8), rgba(0,0,0,.8) 1px, transparent 1px, transparent 100%);
  background-image: -moz-repeating-radial-gradient(center center, rgba(0,0,0,.8), rgba(0,0,0,.8) 1px, transparent 1px, transparent 100%);
  background-image: -ms-repeating-radial-gradient(center center, rgba(0,0,0,.8), rgba(0,0,0,.8) 1px, transparent 1px, transparent 100%);
  background-image: repeating-radial-gradient(center center, rgba(0,0,0,.8), rgba(0,0,0,.8) 1px, transparent 1px, transparent 100%); background-size: 5px 5px;
}
  
.menuon #header{ height:75px; box-shadow:0 0 10px rgba(0,0,0,.3); transition: height 400ms ease, box-shadow 400ms ease; }
.menuon #header .topMenu { height:75px; }
.menuon #header .topMenu li {  height:75px; max-width: 300px; }
.menuon #header .topMenu a { height:75px; }
.menuon #header .topMenu img { height:51px; margin-top:12px; }
.menuon #header .topMenu .topLiFade { opacity:1; z-index:1; width:33%; }

.bigTitle img{ display:block; margin-bottom:1em; }

.sectionWhite { margin-bottom:1em; }
.sectionWhite .bigTitle{ margin-top:8em; }

.btnArrow { width:50px; height:50px; position:absolute; left:50%; bottom:90px; margin-left:-25px; background:url(../img/btn.png) center center no-repeat; background-size:contain; padding-top:17px; }
.btnArrow:hover { opacity:.9; }
.btnArrow:focus { opacity:.9; }
.dot { width:5px; height:5px; display:block; background:#000; opacity:.5; border-radius:50%; position:absolute; }

.line1 { animation:anim 1400ms ease 0s infinite; }
.line2  { animation:anim 1400ms ease .2s infinite; }
.line3 { animation:anim 1400ms ease .4s infinite; }
.line4 { animation:anim 1400ms ease .6s infinite; }

.line { display:block; position:relative; height:5px; margin-bottom:1px; }
.dot1 { left:8px; }
.dot2 { right:7px; }
.dot3 { left:13px; }
.dot4 { right:12px; }
.dot5 { left:18px; }
.dot6 { right:17px; }
.dot7 { left:23px; }

.js.backgroundsize.cssanimations .sectionImg.on div{ animation:fade 1400ms ease 0s 1; opacity:1; }
.js.cssanimations .sectionDesc.on header{ animation:fade 1400ms ease 0s 1; opacity:1; }
.js.cssanimations .sectionDesc.on h2{ animation:fade 1400ms ease .5s 1; opacity:1; animation-fill-mode:both; }
.js.cssanimations .sectionDesc.on p{animation:fade 1400ms ease 1s 1; opacity:1; animation-fill-mode:both; }
.js.cssanimations section.on .left{ animation:fade 1400ms ease 0s 1; opacity:1;  }
.js.cssanimations section.on .right{ animation:fade 3400ms ease .5s 1; opacity:1; animation-fill-mode:both; }

.js.backgroundsize.cssanimations .sectionImg div{ opacity:0; }
.js.cssanimations .sectionDesc header{ opacity:0; }
.js.cssanimations .sectionDesc h2{ opacity:0; }
.js.cssanimations .sectionDesc p{opacity:0; }
.js.cssanimations section .left{ opacity:0;  }
.js.cssanimations section .right{ opacity:0; }

#footer .mobileOnly { display:none; }

.sectionFirst p { text-align:center; }
p { text-align:justify; }

#totop { position:absolute; transition:top 300ms ease; right:15px;top:-30px; height:24px; width:24px; background:url(../img/btn.png) center center no-repeat; background-size:contain; text-align:center; }
#totop:hover { opacity:.9; }
#totop:focus { opacity:.9; }
#totop:before { content:""; display:block; width:17px; height:12px; position:absolute; left:3px; top:6px; background:url(../img/arrow.png); }
.menuon #totop { top:3px; }

#legal { display:none; }
#overlay { display:none; }
.legalon #legal { position:fixed; display:block; left:10%; width:80%; top:10%; height:80%; overflow:auto; background: #fff; padding:2em; z-index:999; }
.legalon #overlay{ background:rgba(0,0,0,.5); position:fixed; display:block; left:0; width:100%; top:0; height:100%; z-index:998; }
#close { position:absolute; font-size:2em; right:.6em; top:.3em; }
#close:hover { color:#DABA71; } 
#close:focus { color:#DABA71; } 

.backgroundsize .cuvee2009 .sectionImg div {
    height: 100%;
    background: url(../img/stenope-visuel-2009-top.jpg) center center no-repeat #000;
    background-size: contain;
}

.archLink{
    padding: 0 1.5em 0 1em;
    text-align: left;
    cursor: pointer;
    font-size: 1.15em;
}
.archLink:after{
    content:" ▾ ";
}

.archLinks{
  position: absolute;
    top: 100%;
    left: 0;
    padding: 0 1.5em 0 1em;
    margin: 0;
    list-style: none;
    width: 100%;
    background: white;
    transform: scaleY(0);
     transform-origin: 50% 0;
     transition:transform 0.2s ease;

}

.archLinks li{
     padding: 0.75em 0;
}

.archContent{
      display: inline-block;
    position: relative;

}

.archContent:hover .archLinks{
     transform: scaleY(1);
}.vinolink{
  bottom: 0;
    width: 100%;
    text-align: center;
    box-shadow: 0 0 10px rgba(0,0,0,.3);
    padding: 0.5em;
   margin-bottom: 30px;
}
.lastWhite{
      margin-bottom: 0;
}
/* ==========================================================================
   Media Queries
   ========================================================================== */

   
@media only screen and (max-width: 1350px) {
  .sectionWhite .bigTitle{ padding-top:18%; margin-top:0; }
    .archContent{
        display: block;
    }
.absLink > a{
    text-align: right;
    position: absolute;
    top: -2em;
    right: 0;
}
.archLink{  padding: 0;  }
#header .topMenu{ margin-right: 200px; }
.menuon #header .topMenu .topLiFade { width:30%; margin-left:1%; }

}

@media only screen and (max-height: 800px) {
  .pageTitle { width: 360px;  margin: -55px 0 0 -180px;  }
  .imgHeader { width: 240px;    margin-left: -120px; top:165px; }
  #header { height:100px; }
  .topMenu { height:100px; }
  .topMenu li {  height:100px;  }
  .topMenu a { height:100px; }
  .topMenu img { height:70px; margin-top:15px; }
  .sectionFirst { padding-top:100px; }
  .imgHeader { top:115px; }
  header .vinolink{
     margin-bottom: 0;
  }
}
   
@media only screen and (max-width: 850px) {
	.menuon #header .topMenu .topLiFade { width:31%; margin-left:1%; }
	.half { float:none; width:100%; padding:0; }
	.sectionWhite .bigTitle { margin-top:.67em; padding-top:0; }
	.sectionWhite { padding-bottom:50px; margin-bottom:0; }
}

@media only screen and (max-width: 700px), 
			screen and (max-height: 470px) {
	#footer { position:static; height:auto; line-height:auto; padding:.5em 0; }
	#footer li { display:block; }
	#footer li:after { display:none; }
	#footer .mobileOnly { display:block; }
	.sectionWhite { padding-bottom:10px; }
	.sectionDesc { margin-bottom:0; }
	.sectionDesc header img { margin-top:40px; }
	.backgroundsize .sectionImg div { background:none; }
	.backgroundsize .sectionImg { height:auto; }
	.backgroundsize .sectionImg img { display:block; }
	.js.backgroundsize.cssanimations .sectionImg.on div{ animation:none; }
	.js.cssanimations .sectionDesc.on header{ animation:none; }
	.js.cssanimations .sectionDesc.on h2{ animation:none; }
	.js.cssanimations .sectionDesc.on p{animation:none; }
	.js.cssanimations section.on .left{ animation:none;  }
	.js.cssanimations section.on .right{ animation:none; }
	.js.backgroundsize.cssanimations .sectionImg div{ opacity:1; }
	.js.cssanimations .sectionDesc header{ opacity:1; }
	.js.cssanimations .sectionDesc h2{ opacity:1; }
	.js.cssanimations .sectionDesc p{opacity:1; }
	.js.cssanimations section .left{ opacity:1;  }
	.js.cssanimations section .right{ opacity:1; }	
	
	#header { position:relative; height:auto; }
	.topMenu { height:auto; text-align:right; }
	.topMenu li{ height:auto; width:45%; }
	.topMenu a{ height:auto; padding-bottom:10px; }
	.topMenu img { height:auto; margin-top:10px; max-width:100%; }
	.topMenu .topLiFade { display:none; }
	.absLink { display:none; }
	.sectionFirst { padding-top:0; height:auto; }
	.menuon #header { height:auto; }
	.menuon #header .topMenu { height:auto; }
	.menuon #header .topMenu li {  height:auto;  }
	.menuon #header .topMenu a { height:auto; }
	.menuon #header .topMenu img { height:auto; margin-top:10px; }
	.imgHeader { position:static; margin:auto; padding-top:10px; width:80%; }
	.pageTitle { width:95%; margin:2em auto; position:static; }
	.btnArrow { position:relative; margin:auto; left:auto; bottom:auto; display:block; }
	.pBottom { position:static; font-size:1em; }
	p { text-align:left; }
	#totop { display:none; }
    #header .topMenu {
        margin-right: 0px;
    }
}

/*
@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;
    }
}