@charset "utf-8";

/* alexandre.cc */

a, article, aside, b, blockquote, body, button, div, em, footer, h1, h2, h3, h4, header, img, input, li, nav, p, section, span, strong, textarea, ul{
	padding:0;
	margin:0;
	border:0;
	list-style:none;
	outline:none;
	font-family: 'Open Sans', sans-serif;
	font-size:1.4rem;
	color:#fff;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background:none;
}

html, body{
	width:100%;
	min-height:100vh;
	font-size:62.5%;
}
body{
	font-weight:300;
	color:#fff;
	background:#2d2d2d;
}

a{ text-decoration:none; color:#fff;}
a:hover{ text-decoration:none; color:#cbb778;}

::selection{ background:#cbb778; color:#fff;}
::-moz-selection{ background:#cbb778; color:#fff;}

input{ -webkit-appearance:none;}


/* HEADER */

header{
	z-index:3;
	position:fixed;
	width:100%;
	height:80px;
	padding:0 14% 0 16%;
	background:rgba(45,45,45, 0.33);
}
header.noir{ background:rgba(45,45,45, 0.75);}
header:hover, header.noir:hover{ background:rgba(45,45,45, 0.85);}
header #logo{
	float:left;
	width:25%;
}
header #logo a{
	display:inline-block;
	width:100%;
	height: 80px;
	padding: 30px 0;
}
header #logo img{
	display:inline-block;
	height: 20px;
}

header nav{
	float:right;
}
header nav a{
	display:inline-block;
	padding:30px 15px;
}
header nav a span{
	padding:0 0 8px;
	font-size:1.1rem;
	text-transform:uppercase;
	letter-spacing:-0.01rem;
}
header nav a:hover span, header nav a.on span{
	color:#cbb778;
	border-bottom:1px solid #cbb778;
}


/* OUVRIR - FERMER */

#ouvrir, #fermer{
	z-index:5;
	top:0;
	position:fixed;
	width:60px;
	height:80px;
	text-align:center;
	cursor:pointer;
	display:none;
}
#ouvrir ul, #fermer ul{
	position:absolute;
	width:20px;
	margin:33px 0 0 20px;
}
#ouvrir:hover ul{ margin-top:17px;}
#fermer ul{
	width:60px;
	height:60px;
	margin:0;
	padding:23px 20px;
}
#ouvrir ul li, #fermer ul li{
	float:left;
	width:100%;
	height:1px;
	margin:0 0 5px 0;
	background:#fff;
	overflow:hidden;
}
#fermer ul li{ height:2px; background:#f00;}
#ouvrir:hover  ul li.un{ margin:-6px 0 10px 0;}
#ouvrir ul li.quatre{ margin:6px 0 0 0; background:#fff;}
#ouvrir:hover ul li.quatre{ margin:0 0 0 0;}
#ouvrir:hover  ul li.un, #ouvrir ul li.quatre{opacity:0; -moz-opacity:0; -webkit-opacity:0; filter: alpha(opacity=0);}
#ouvrir:hover ul li.quatre{ opacity:1; -moz-opacity:1; -webkit-opacity:1; filter: alpha(opacity=100);}

#fermer ul li.une{
	margin-top:6px;
	 -ms-transform: rotate(45deg); 
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
#fermer ul li.deux{
	margin-top:-7px;
	 -ms-transform: rotate(-45deg); 
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}


/* HOME */

section.full{
	position:relative;
	width:100%;
	height:100vh;
	top:0;
}
section#home{
	display: flex;
	background-color: #cbb778;
	background-image:url('../img/background-home.jpg');
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
	-webkit-background-size:cover;
}

section#home div{
	margin: auto 0 7%;
	width:100%;
	padding: 30px 0 15px;
	text-align: center;
	background: rgba(158, 144, 95, 0.85);
}
section#home div img{
	display: inline-block;
	height: 240px;
}


/* WINES */

section#wines{
	float: left;
	height: 100vh;
	background-image:url('../img/background-wines.jpg');
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
	-webkit-background-size:cover;
}
section#wines div#h1{
	float:left;
	width:40%;
	margin:100px 0 0;
	text-align:center;
}
section#wines div#h1 span, section#wines div#h1 h1{
	display:inline-block;
	width:60%;
	margin-left:40%;
}
section#wines div#h1 span{
	color:#c9956b;
	font-size:1.1rem;
	letter-spacing:1.5rem;
	text-transform:uppercase;
}
section#wines div#h1 h1{
	padding:20px 0;
	font-size:5.6rem;
	font-weight:400;
	font-family: 'Vidaloka', serif;
	letter-spacing:0.3rem;
	text-transform:uppercase;
}
section#wines div#h1 span.tiret{
	display:inline-block;
	width:80px;
	height:1px;
	background:#c9956b;
}

/* SLIDER */
#slides{
	float:left;
	width:60% !important;
}
#slides .slides{
	float:left;
	width:100%;
}
#slides div.slides .image{
	display: flex;
	float:left;
	width:20%;
	height: 100vh;
	text-align:center;
}
#slides div.slides .image img{
	margin: auto;
	max-width:100%;
	height: 75vh;
}
#slides div.slides .content{
	float:left;
	width:30%;
	margin:100px 0 0;
}
#slides div.slides h2, #slides div.slides p{
	float:left;
	width:100%;
	padding-right:30%;
}
#slides div.slides h2{
	margin:0 0 30px;
	color:#b78053;
	font-size:1.8rem;
	text-transform:uppercase;
}
#slides div.slides p{
	font-size:1.4rem;
	line-height:2.1rem;
}

.slides-navigation{
	z-index:3;
	position:absolute;
	top:58%;
	left:34%;
}
.slides-navigation a{
	float:left;
	height:60px;
	line-height:56px;
	padding:0 25px 0 15px;
	font-size:1.8rem;
	color:#fff;
	border:1px solid #626262;
	border-right:none;
	cursor:pointer;
}
.slides-navigation a.next{
	padding:0 15px 0 25px;
	border:1px solid #626262;
	border-left:none;
}
.slides-navigation a:hover{ color:#b78053; border-color:#b78053;}
.slides-pagination{ display:none;}


/* VIGNOBLE */

section#vignoble{
	float:left;
	position:relative;
	width:100%;
}
section#vignoble .ligne{
	float:left;
	position:relative;
	width:100%;
}
section#vignoble .image, section#vignoble .textes{
	float:left;
	width:33%;
	min-height:200px;
}
section#vignoble .centre{ width:34%;}
section#vignoble .double{ width:67%;}
section#vignoble .or{ background:#cbb778;}

section#vignoble .image{
	background-repeat:no-repeat;
	background-position:bottom center;
	background-size:cover;
	-webkit-background-size:cover;
}
section#vignoble .bouteilles{ background-image:url('../img/background-bouteilles.jpg');}
section#vignoble .futs{ background-image:url('../img/background-futs.jpg');}
section#vignoble .raisins{ background-image:url('../img/background-raisins.jpg');}
section#vignoble .vignobles{ background-image:url('../img/background-vignobles.jpg');}
section#vignoble .territoire{ background-image:url('../img/background-territoire.jpg');}

section#vignoble .climate-soil{ background-image:url('../img/background-climate-soil.jpg');}
section#vignoble .fourche{ background-image:url('../img/background-fourche.jpg');}
section#vignoble .mains{ background-image:url('../img/background-mains.jpg');}
section#vignoble .wineyard{ background-image:url('../img/background-wineyard.jpg');}
section#vignoble .philosophy{ background-image:url('../img/our-philosophy.jpg');}
section#vignoble .territory{ background-image:url('../img/exceptional-territory.jpg');}

section#vignoble .textes{ padding:0 3%;}
section#vignoble .double{ padding:0 20% 0 7%;}
section#vignoble .tablette{ display:none;}
section#vignoble .mobile{ display:none;}
section#vignoble .web{ display:block;}
section#vignoble .textes .content{
	float:left;
	width:100%;
	padding:100px 0;
}

section#vignoble .textes h2{
	float:left;
	width:100%;
	font-size:2.4rem;
	font-weight:400;
	font-family: 'Vidaloka', serif;
	letter-spacing:0.05rem;
}
section#vignoble .textes span.tiret{
	float:left;
	width:15%;
	height:1px;
	margin:20px 0;
	background:#fff;
}
section#vignoble .textes p.resume{
	float:left;
	width:100%;
	font-size:1.2rem;
	line-height:2.1rem;
}

section#vignoble .texte{
	float:left;
	width:100%;
	padding:25px 0 0;
}
section#vignoble .texte a{
	display:inline-block;
	padding:8px 10px;
	font-size:1.2rem;
	text-transform:uppercase;
	letter-spacing:0.05rem;
	color:#cbb778;
	border:1px solid #cbb778;
	cursor:pointer;
}
section#vignoble .texte a:hover{
	color:#fff;
	border:1px solid #fff;
}
section#vignoble .or .texte a{
	color:#fff;
	border:1px solid #fff;
}
section#vignoble .or .texte a:hover{
	color:#8a7433;
	border:1px solid #8a7433;
}


section#vignoble .tout{
	z-index:2;
	display:none;
	position:absolute;
	background:#1e1e1e;
	box-shadow: 0 0 100px #1e1e1e;
}
section#vignoble #what .tout{
	width:67%;
	right: 0;
	top: 0;
	padding-bottom: 50px;
	text-align: center;
}
section#vignoble #winemaking .tout{
	width:67%;
	top:0;
	left:0;
	margin:0 0 0 33%;
}
section#vignoble #exceptional .tout{ margin: 0;}

section#vignoble #history .tout{ margin:0; text-align:center;}
section#vignoble #localisation .tout{ width:33%; right:0; left:auto; background:#cbb778;}
section#vignoble .tout h3, section#vignoble .tout p{
	float:left;
	width:100%;
	padding:0 10.45%;
	font-size:1.2rem;
	line-height:2.1rem;
	text-align: left;
}
section#vignoble .tout p.top{ margin:40px 0 0;}
section#vignoble #history .tout p{ text-align:center;}
section#vignoble .tout h3.g, section#vignoble .tout p.g{ width:75%; padding-right:0;}
section#vignoble .tout h3.d, section#vignoble .tout p.d{ float:right; width:60%; padding-left:20%; padding-right:0; padding-bottom:30px; text-align:right;}
section#vignoble .tout .imaged{
	float:right;
	width:25%;
	padding:0 5%;
	text-align:center;
}
section#vignoble .tout h3{
	margin:20px 0;
	font-size: 2.4rem;
	font-weight: 400;
	font-family: 'Vidaloka', serif;
	letter-spacing: 0.05rem;
	color:#fff;
}
section#vignoble .tout h3.mobile{ display:none;}
section#vignoble .tout h3.blanc{ color:#fff; margin-top:60px;}
section#vignoble #localisation .tout h3.blanc{ margin-top:30px;}
section#vignoble .tout .background{
	float:left;
	width:100%;
	height:200px;
	margin-bottom:30px;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
	-webkit-background-size:cover;
}
section#vignoble #localisation .tout .background{ margin:30px 0 0;}
section#vignoble .tout img{
	display:inline-block;
	margin:0 0 30px;
	max-width:100%;
}
section#vignoble .tout img.map{ max-width: 90%; margin: 50px 5% 0;}
section#vignoble .tout img.margin-top{ margin: 50px 0 0;}
section#vignoble #history .tout img{ max-width:60%; margin:100px 0 40px;}
section#vignoble .tout img.top{ margin-top:0;}
section#vignoble .tout a.close, section#vignoble .tout a.close:hover{
	position:absolute;
	right:0;
	width:100%;
	height:40px;
	padding:0 0 40px;
	text-align:right;
	border:none;
}
section#vignoble #winemaking .tout a.close, section#vignoble #history .tout a.close, section#vignoble #localisation .tout a.close{ padding-right:0;}
section#vignoble #localisation .tout a.close{ padding-bottom:0;}
section#vignoble .tout a.close div{
	float:right;
	width:40px;
	height: 40px;
	padding:7px 0 15px;
	text-align:center;
	background:#ce3b2c;
	opacity:0.8;
}
section#vignoble #localisation .tout a.close div{ background:#ee5f27;}
section#vignoble .tout a.close:hover div{ opacity:1;}
section#vignoble .tout a.close span{
	display:inline-block;
	width:15px;
	height:2px;
	background:#fff;
	margin-top:6px;
	 -ms-transform: rotate(45deg); 
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
section#vignoble .tout a.close span.deux{
	margin:-6px 0 0 -15px;
	 -ms-transform: rotate(-45deg); 
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
section#vignoble #localisation .tout a.close span{ background:#fff;}

section#vignoble a.ancre{ position:absolute; margin:-80px 0 0;}


/* GOOGLE MAP */

section#googlemap{
	position:relative;
	width:100%;
	height:50vh;
	background:#fff;
}


/* CONTACT */

section#contact{
	position:relative;
	width:100%;
	text-align:center;
	background-image:url('../img/background-contact.jpg');
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
	-webkit-background-size:cover;
}
section#contact div{
	display:inline-block;
	width:34%;
	padding:60px 40px;
	background:#fff;
}
section#contact div h2, section#contact div p{
	float:left;
	width:100%;
	text-align:center;
	color:#000;
}
section#contact div h2{
	padding:55px 0 5px;
	font-size:2.8rem;
	font-family: 'Vidaloka', serif;
	letter-spacing:0.05rem;
	text-transform:uppercase;
}
section#contact div p#accroche{
	font-style:italic;
	font-weight:bold;
}
section#contact div p{ padding:0 0 0;}
section#contact div p b{
	display:inline-block;
	width:100%;
	padding:0 0 10px;
	color:#000;
	font-weight:bold;
}
section#contact div p a{
	float: left;
	width: 100%;
	padding: 40px 5%;
	text-align: center;
}
section#contact div p a button{
	display: inline-block;
	height: 60px;
	line-height: 60px;
	padding: 0 30px;
	color:#000;
	font-weight: 500;
	border: 1px solid rgba(0, 0, 0, 0.5);
	cursor: pointer;
}
section#contact div p a:hover button{ color: #fff; background: #cbb778; border: 1px solid #cbb778; }
	
	
/* FOOTER */

footer{
	float:left;
	position:relative;
	width:100%;
	padding:0 5%;
	background:#0b1216;
}
footer #copyright, footer #logofooter, footer nav{
	float:left;
	position:relative;
	width:33%;
}
footer #copyright, footer nav a{
	height:100px;
	line-height:100px;
}
footer #logofooter{
	width:34%;
	height: 100px;
	padding: 40px 0;
	text-align:center;
}
footer #logofooter img{ 
	display:inline-block;
	height: 20px;
}

footer nav{
	text-align:right;
}
footer nav a{
	display:inline-block;
	padding-left:50px;
	text-transform:uppercase;
}





/* RESPONSIVE */

@media only screen and (max-width : 1599px) {
	
	html, body{ font-size:62%;}
}
@media only screen and (max-width : 1499px) {
	
	html, body{ font-size:61%;}
	
	section#wines div#h1 span, section#wines div#h1 h1{ width:70%; margin-left:30%;}
}
@media only screen and (max-width : 1399px) {
	
	html, body{ font-size:60%;}
	
	section#wines div#h1 span, section#wines div#h1 h1{ width:75%; margin-left:25%;}
}
@media only screen and (max-width : 1299px) {
	
	html, body{ font-size:59%;}
	
	section#wines div#h1 span, section#wines div#h1 h1{ width:80%; margin-left:20%;}
}
@media only screen and (max-width : 1199px) {
	
	html, body{ font-size:58%;}
	
	section#wines div#h1 span, section#wines div#h1 h1{ width:90%; margin-left:10%;}
	section#wines div#h1 h1{ font-size:5.2rem;}
	section#contact div{ width:40%;}
	#slides div.slides h2, #slides div.slides p{ padding-right:15%;}
}
@media only screen and (max-width : 1099px) {
	
	html, body{ font-size:57%;}
	
	section#wines div#h1 span, section#wines div#h1 h1{ width:95%; margin-left:5%;}
}
@media only screen and (max-width : 999px) {
	
	html, body{ font-size:56%;}
	
	#slides div.slides .image{ width:25%;}
	.slides-navigation{ left:42%;}
	section#vignoble .tout h3.d, section#vignoble .tout p.d{ width:100%; padding:0 10.45%;}
	section#contact div{ width:50%;}
	#slides div.slides h2, #slides div.slides p{ padding-right:0;}
}
@media only screen and (max-width : 899px) {
	
	html, body{ font-size:55%;}
	
	section#wines div#h1 span, section#wines div#h1 h1{ width:100%; margin-left:0;}
	section#wines div#h1 h1{ font-size:4.8rem;}
	.bxslider li img{ height:80%; margin:10% 0 0;}
	.bxslider li .content{ width:57%;}
	
	/* VINEYARD */
	section#vignoble .gauche, section#vignoble .centre, section#vignoble .droite{ width:50%;}
	section#vignoble .doublemobile{ width:50%;}
	section#vignoble .web{ display:none;}
	section#vignoble .tablette{ display:block;}
	section#vignoble .double{ padding:0 5%;}
	section#vignoble .textes .content{ padding:80px 0;}
	section#vignoble #what .tout, section#vignoble #winemaking .tout, section#vignoble #history .tout, section#vignoble #localisation .tout{ width:100%; margin:0; left:0;}
	section#vignoble #history .tout img{ margin-top:40px;}
	section#vignoble #history .tout img{ max-width:80%;}
	section#vignoble .tout h3.mobile{ display:block;}
	section#vignoble .tout p.top{ margin-top:0;}
	section#vignoble .tout a.close, section#vignoble .tout a.close:hover{ padding-right:0;}
	
	footer #copyright, footer #logofooter, footer nav{ width:100%; padding: 0; text-align:center;}
	footer nav a{ padding:0 25px;}
	footer #copyright, footer nav a{ height:60px; line-height:60px;}
	footer #logofooter{ height:60px;line-height: 60px;}
	footer #logofooter img{ height:24px;}
	
	section#vignoble .texte a.readmore { display: none;}
	section#vignoble .texte a.readmore-mobile { display: inline-block;}
}
@media only screen and (max-width : 799px) {
	
	html, body{ font-size:54%;}
	
	#ouvrir{ display:block;}
	header nav{ display:none;}
	
	header{
		padding:0;
	}
	header #logo{
		z-index:4;
		position:fixed;
		width:100%;
		padding:0;
		text-align:center;
	}
	header #logo a{
		display: flex;
		width:100%;
		height: 80px;
		padding: 0;
	}
	header #logo img{ margin: auto; max-width: 33%; height: auto; display: none;}
	header nav{
		z-index:3;
		position:fixed;
		width:100%;
		height:100%;
		padding:80px 0 20px;
		text-align:center;
		background:rgba(0,0,0, 0.8);
	}
	header nav a{
		width:100%;
		padding:0;
		height:60px;
		line-height:60px;
	}
	header nav a span{ font-size:1.4rem;}
	
	section#home div { margin-bottom: 10%;}
	section#wines{ overflow:hidden;}
	section#wines div#h1{ width:100%; margin:0;}
	section#wines div#h1 span{ margin:100px 0 0;}
	section#wines div#h1 span.tiret{ margin:0;}
	#slides{ width:100% !important; margin:-40px 0 0;}
	#slides div.slides .image{ width:40%; padding-left:15%;}
	#slides div.slides .content{ width:50%; padding-left:5%; margin:0;}
	.slides-navigation{ left:45%; top:45%;}
	section#contact div{ width:60%;}
}

@media only screen and (max-width : 699px) {
	
	
	section#vignoble .gauche, section#vignoble .centre, section#vignoble .droite{ width:45%;}
	section#vignoble .double, section#vignoble .doublemobile{ width:55%;}
	section#vignoble .textes .content{ padding:60px 0;}
	
	section#home div img{ height: auto; max-width: 70%;}
	section#contact div{ width:70%;}
}
@media only screen and (max-width : 599px) {
	
	html, body{ font-size:53%;}
	
	header #logo img{ max-width: 40%;}
	
	section#home div { margin-bottom: 15%;}
	#slides div.slides .image{ width:100%; padding:0 35%;}
	#slides div.slides .content{ width:100%; padding:0 10%;}
	#slides div.slides h2{ margin:-40px 0 0 !important; text-align:center;}
	#slides div.slides p{ text-align:center;}
	.slides-navigation{ left:0; width:100%;}
	.slides-navigation a.prev{ border: 1px solid #626262; border-left:0;}
	.slides-navigation a.next{ position:absolute; right:0; border: 1px solid #626262; border-right:0;}
	.slides-navigation a.prev:hover, .slides-navigation a.next:hover{ border-color:#b78053;}
	section#vignoble .textes{ width:60%;}
	section#vignoble .image{ width:40%;}
	section#vignoble .textes .content{ padding:50px 0;}
	
	section#contact div{ width:100%;}
}
@media only screen and (max-width : 499px) {
	
	section#home div img{ height: auto; max-width: 80%;}
	section#vignoble .gauche, section#vignoble .centre, section#vignoble .droite, section#vignoble .double, section#vignoble .doublemobile{ width:100%;}
	section#vignoble .tablette{ display:none;}
	section#vignoble .mobile{ display:block;}
	section#vignoble .image{ height: 40vh;}
}
@media only screen and (max-width : 449px) {
	
	header #logo img{ max-width: 50%;}
}
@media only screen and (max-width : 399px) {
	
	html, body{ font-size:52%;}
	
	section#home div { margin-bottom: 25%;}
	section#home div img{ height: auto; max-width: 67%;}
}
@media only screen and (max-width : 349px) {
	
}
@media only screen and (max-width : 299px) {
	
	html, body{ font-size:50%;}
}

@media only screen and (max-width : 299px) {
	
	html, body{ font-size:50%;}
}


/* HEIGHTS */

@media only screen and (max-height : 799px) {
	
	section#home div img { height: 25vh;}
}


/* HEIGHTS + WDITH */
	
@media only screen and (max-width : 799px) and (max-height : 399px) {
	
	header #logo a{ padding:20px 0;}
	header #logo img{ height:20px;}
	header nav{ padding:60px 0 0;}
	header nav a{ height:45px; line-height:45px;}
}
@media only screen and (max-width : 799px) and (max-height : 299px) {
	
	header nav a{ height:35px; line-height:35px;}
}

/* TRANSITIONS */

.t33{-webkit-transition: all 0.33s cubic-bezier(0.86, 0, 0.07, 1);-moz-transition: all 0.33s cubic-bezier(0.86, 0, 0.07, 1); -ms-transition: all 0.33s cubic-bezier(0.86, 0, 0.07, 1); -o-transition: all 0.33s cubic-bezier(0.86, 0, 0.07, 1); transition: all 0.33s cubic-bezier(0.86, 0, 0.07, 1);}