@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,500,700,300italic,400italic,500italic,700italic);

/*
 * @author estelle@agencenomad.com 2015
 *
*/

/*** Colors ***/
/*
	text : #1a171b
	links : #333
	links:active/strong : #333
	grey light (content) : #e3ddd9
*/

/****************** Bof common styles ******************/
/*********************************************************/

html, body, div, img, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, p, hr {
	margin:0;
	padding:0;
}

ul, ul li { 
	list-style:none;
}

ul.list li { 
	list-style:outside disc;
	margin-left:14px;
}

img { 
	display:block;
	max-width: 100%;
}

/***** titles *****/

h1, h2, h3, h4, h5 {
	margin:1em 0 0.5em;
	font-weight:normal;
}

h1 {
	font-size:18px;
	margin:0 0 1em;
}
h2 { 
	font-size:16px;
}
h3 {
	font-size:14px; 
}
h4, h5 {
	font-size:13px;
}

/****** liens ******/

a {
	color:#960b1d;
	text-decoration:none; 
}
a:hover,
a:focus,
a:active
.puce:hover {
	color:#680814;
}

a:active, 
object:active, 
input:active,
object:focus { 
	outline:none; 
}

a img { 
	border:0;
}

a.dld_form,
.dld_form a {
	display:inline-block;
	background-color:#960b1d;
	color:#FFF;
	font-size:14px;
	font-weight:400;
	border-radius:7px;
	padding:2px 10px 3px;
	transition: all .4s;
}

a.dld_form:hover,
.dld_form a:hover {
	background-color:#680814;
}

/***** other *****/

strong {
	color:#333;
	font-weight:normal;
}

.left {float:left;}
.right {float:right;}
.clear {clear:both;}

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

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/*********************** STRUCTURE ***********************/
/*********************************************************/

html, body {
	height:100%;
}

body {
	font:300 16px/1.6em 'Roboto', Helvetica, Arial, sans-serif;
	color:#1a171b;
	background-color:#817975;
	text-align:center;
}

#page {
	padding:0 15px;
	min-width:960px;
}

#wrapper {
	max-width:1200px;
	margin:0 auto 20px;
	box-shadow:#111 0px 0px 5px;
	background-color:#4a3b35;
}

/************************ HEADER *************************/
/*********************************************************/

#header {
	position:relative;
}

#header,
#header a,
#header .logo a,
#header .lang a {
	color:#FFF;
}

#header .logo,
#header .lang,
#header .social,
#header .menu {
	position: absolute;
}
 
/*** visu ***/

#header .visu {
	position:relative;
	z-index:1;
}

#header .visu img {
	display:block;
	max-width:100%;
	height:auto;
}

#header .slideshow {
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	bottom:0;
	z-index:10;
}

#header .slideshow img {
	display:block;
	max-width:100%;
	position:absolute;
	left:0;
	top:0;
}

/*** logo ***/

#header .logo {
	top:0;
	bottom:44px;
	left:30px;
	margin:0;
	width:347px;
	z-index:10;
}

#header .logo a {
	display:block;
	height:100%;
	background:url(images/header_logo.png) no-repeat 50%;
	text-indent:-9999px;
	overflow:hidden;
}

/*** lang + social ***/

#header .lang,
#header .social {
	right:10px;
	font-size:14px;
	font-weight:400;
	z-index:20;
}

#header .lang {
	top:16px;
	height:32px;
	line-height:32px;
}

#header .social {
	bottom:60px;
	height:28px;
	line-height:28px;
}

#header .lang a,
#header .social a {
	display:inline-block;
	height:100%;
}

#header .lang a {
	padding-left:40px;
	background:url(images/header_lang.png) no-repeat;
}

#header .lang .fr {
	background-position:0 -32px;
}

#header .social a {
	padding-left:38px;
	background:url(images/header_fb.png) no-repeat;
}

/*** menu ***/

#header .menu {
	position:absolute;
	bottom:0;
	width:100%;
	background-color:#4a3b35;
	background-color:rgba(74,59,53,.7);
	text-align:center;
	line-height:44px;
	z-index:30;
}

#header .menu li {
	display:inline;
}

#header .menu a {
	display:inline-block;
	padding:0 38px;
	font-size:16px;
	text-transform:uppercase;
	letter-spacing:0.1em;
}

.domaine #header .domaine a,
.vins #header .vins a,
.actualites #header .actualites a,
.photos #header .photos a,
.contact #header .contact a {
	font-weight:bold;
}

/************************* MAIN **************************/
/*********************************************************/

#main {
	background:#cabeb8;
}

.video_container {
	width:100%;
	padding-top:56.33%;
	background-color:#000;
	margin:2em 0;
	position:relative;
}

.video_container a {
	display:block;
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	overflow:hidden;
}

.video_container a img {
	display:block;
	margin:0 auto;
	max-width:100%;
}

.video_container a .play {
	position:absolute;
	top:50%;
	left:50%;
	width:100px;
	height:100px;
	margin-left:-50px;
	margin-top:-50px;
}

.video_container iframe {
	display:block;
  margin:0 auto;
}

/*** content ***/

.content {
	float: left;
	width:50%;
	padding:40px 5%;
	text-align:justify;
	line-height:1.5em;
}

.content p {
	margin:0.8em 0 0;
}

.content p:first-child,
.content h5 + p {
	margin-top:0;
}

/*** aside ***/

.aside {
	float: left;
	width:40%;
}

.aside .visus li {
	display:block;
	text-align:right;
}

.aside .visus img {
	margin-top:40px;
}

.aside .visus li:first-child img {
	margin-top:0;
}

/******* accueil *******/

.domaine {
}

/******* vins *******/

.vins .content {
	width:90%;
	padding-bottom:40px;
}

.vins .bandeau {
	font-size:16px;
	font-weight:500;
	margin-bottom:2em;
}

.vins .title {
	color:#FFF;
	font-size:28px;
	text-transform:uppercase;
	margin:1.6em 0 1em;
}

.vins .wines {
	margin:0 10px;
	text-align:left;
}

.vins .wines li {
	display:inline-block;
	vertical-align:top;
	width:32%;
	padding-left:11%;
	margin:14px 3% 40px;
	text-align:justify;
	line-height:1.2em;
	background-repeat:no-repeat;
	background-position:0 28px;
	min-height:250px;
	padding-top:26px;
}

.lt-ie8 .vins .wines li {
	display:inline;
}

.vins .wines .blanc-gressannes {
	background-image:url(images/vins_blanc-gressannes.png);
}

.vins .wines .blanc-tradition {
	background-image:url(images/vins_blanc-tradition.png);
}

.vins .wines .rose-cuvee-speciale {
	background-image:url(images/vins_rose-cuvee-speciale.png);
}

.vins .wines .rose-tradtion {
	background-image:url(images/vins_rose-tradtion.png);
}

.vins .wines .rose-essareaux {
	background-image:url(images/vins_rose-essareaux.png);
}

.vins .wines .rouge-autrefois {
	background-image:url(images/vins_rouge-autrefois.png);
}

.vins .wines .rouge-cuvee-speciale {
	background-image:url(images/vins_rouge-cuvee-speciale.png);
}

.vins .wines .rouge-essareaux {
	background-image:url(images/vins_rouge-essareaux.png);
}

.vins .wines .rouge-lauzerette {
	background-image:url(images/vins_rouge-lauzerette.png);
}

.vins .wines .rouge-terredesafres {
	background-image:url(images/vins_rouge-terredesafres.png);
}

.vins .wines .rouge-tradition {
	background-image:url(images/vins_rouge-tradition.png);
}

.vins .wines .rouge-vieilles-vignes {
	background-image:url(images/vins_rouge-vieilles-vignes.png);
}

.vins .wines .viognier {
	background-image:url(images/vins_viognier.png);
}

.vins .wines li h3 {
	color:#FFF;
	font-size:18px;
	text-transform:uppercase;
	margin:0;
}

.vins .wines li h4 {
	margin:6px 0;
	font-size:14px;
	font-weight:500;
	text-align:left;
	color:#960b1d;
}

.vins .wines li p {
	font-size:12px;
	margin:.7em 0;
}

.vins .wines li p.dld {
	font-size:13px;
	margin-bottom:2px;
}

/******* actualites *******/

.actualites .items {
	margin:2em 0;
}

.actualites .item_title {
	font-size:18px;
	font-weight:700;
	color:#870a44;
	text-shadow: 1px 1px 0px rgba(255,255,255,.3);
	margin:1.3em 0 0.2em;
}

.actualites .item_content {
	width:100%;
	overflow:hidden;
	padding-top:3px;
	word-wrap: break-word;
}

.actualites .item_visu {
	display:block;
	float:left;
	margin:4px 12px 0 0;
	border:1px solid #870a44;
}

/******* photos *******/

#gallery {
	list-style:none;
	width:95%;
	margin:0 auto;
	height:101%;
	padding:30px 0;
}

#gallery li {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	float:left;
	width:20%;
	padding:.8%;
}

#gallery li img {	
	-webkit-transition: opacity 0.3s ease-in-out;
	-moz-transition: opacity 0.3s ease-in-out;
	-ms-transition: opacity 0.3s ease-in-out;
	-o-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;
}

#gallery li a:hover img {	
	opacity:.6;
}

/******* contact *******/

.contact .content {
	font-size:14px;
}

.contact .title {
	font-size:18px;
	margin:0 0 12px;
	line-height:normal;
	font-weight:bold;
	position:relative;
}

.contact .title a {
	display:inline-block;
	position:absolute;
	right:0;
	top:0;
}

.contact h3 {
	margin-top:0;
}

.contact .googlemap {
	margin:24px 0 0;
}

.contact .googlemap iframe {
	display:block;
	border-radius:4px;
}

/************************ FOOTER *************************/
/*********************************************************/

#footer {
	padding:1em 0 1.2em;
	line-height:1.4em;
}

#footer,
#footer a {
	color:#c9c8c7;
	text-shadow:#000 1px 1px 0;
}

#footer h3 {
	font-size:16px;
	color:#ddd;
	margin:0 0 .3em;
}